/* ============================================================================
   site.css — hoja global del sitio del BMW Auto Club Chile.

   Todo lo que usa más de una parte del sitio: tipografía oficial, base del
   documento con sus halos, header, footer, botones, formularios, captcha,
   tarjetas, acordeón, modal, lightbox, toast y la neutralización del chrome de
   Bootstrap. Los selectores son los del prototipo v0.5 para compararlo uno a uno.
   Ni un color literal: todo por variable de tokens.css.
   ============================================================================ */

@font-face {
    font-family: "BMW Type Next";
    src: url("/fonts/BMWTypeNextProRegular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "BMW Type Next";
    src: url("/fonts/BMWTypeNextProBold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Chrome de Bootstrap — neutralizado UNA sola vez.
   El stack carga Bootstrap global, y su reboot y sus componentes comparten nombre
   con clases del prototipo (.btn, .card, .toast, .modal, .lead, .h1–.h3). Donde
   Bootstrap gana por especificidad o fija una propiedad que el prototipo no
   declaraba, se devuelve aquí al comportamiento del prototipo.
   --------------------------------------------------------------------------- */
.h1, .h2, .h3, .h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 700;
    line-height: 1.15;
}

h5, h6 {
    margin-top: 0;
    font-weight: 700;
    line-height: inherit;
}

small {
    font-size: smaller;
}

/* El reboot deja en 0 el margen de checkbox y radio; el prototipo usa el del navegador
   (medido: la fila de aceptación del reglamento medía 24 px en vez de 26). */
input[type="checkbox"],
input[type="radio"] {
    margin: 3px 3px 3px 4px;
}

/* El reboot extiende border-box a ::before y ::after; el prototipo solo lo aplicaba a los
   elementos (medido: los puntos de la línea de tiempo medían 12 px en vez de 16). */
*::before,
*::after {
    box-sizing: content-box;
}

/* El reboot centra verticalmente img y svg; el prototipo usa la línea base del navegador
   (medido: el ícono del menú móvil quedaba desplazado). */
img, svg {
    vertical-align: baseline;
}

.lead {
    font-weight: inherit;
}

.card {
    min-width: auto;
    height: auto;
    word-wrap: normal;
    color: inherit;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.btn {
    line-height: inherit;
    text-align: start;
    vertical-align: baseline;
    user-select: auto;
}

.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: none;
}

.btn:disabled {
    pointer-events: auto;
}

.toast {
    width: auto;
    max-width: none;
    border: 0;
    box-shadow: none;
    background-clip: border-box;
}

.toast:not(.show) {
    display: block;
}

.modal {
    overflow: visible;
}

/* ---------------------------------------------------------------------------
   Base del documento
   --------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation: none !important;
        transition: none !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(900px 600px at 8% 18%, var(--halo-blue), transparent 60%),
        radial-gradient(800px 700px at 92% 62%, var(--halo-violet), transparent 60%),
        radial-gradient(700px 500px at 30% 95%, var(--halo-cyan), transparent 60%);
    background-attachment: fixed;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

input, select, textarea {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.15;
    text-wrap: balance;
    font-weight: 700;
}

p {
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------------------
   Página de error
   --------------------------------------------------------------------------- */
.error-page {
    padding-block: clamp(64px, 9vw, 120px);
}

.error-page .h2 {
    font-size: clamp(30px, 4vw, 46px);
}

.error-page .h2 span {
    display: block;
    font-weight: 400;
    color: var(--muted);
}

.error-page__id {
    margin-top: 22px;
    color: var(--muted);
}

/* Without this the identifier takes Bootstrap's default code color, a pink that is not the club's. */
.error-page__id code {
    color: var(--text);
}

.error-page__back {
    margin-top: 28px;
}

.demo-flag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    padding: 3px 8px;
    color: var(--muted);
    vertical-align: middle;
    margin-left: 10px;
}

.demo-flag--inline {
    margin-left: 0;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--veil-82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
}

.hdr .wrap {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 78px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-wrap: wrap;
}

.nav a {
    padding: 10px 10px;
    font-size: 15px;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}

.nav a:hover {
    color: var(--text);
}

.nav a.on {
    color: var(--accent);
    border-color: var(--accent);
}

.hdr .login {
    border: 1px solid var(--line);
    background: transparent;
    padding: 9px 14px;
    font-size: 14px;
    border-radius: 2px;
    white-space: nowrap;
}

.hdr .login:hover {
    background: var(--surface-2);
}

.burger {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line);
    width: 44px;
    height: 44px;
    border-radius: 2px;
}

@media (max-width: 1260px) {
    .nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 78px;
        background: var(--bg-2);
        flex-direction: column;
        padding: 12px var(--gutter) 20px;
        border-bottom: 1px solid var(--line-soft);
    }

    .nav.open {
        display: flex;
    }

    .nav a {
        padding: 12px 4px;
        border-bottom: 1px solid var(--line-soft);
    }

    .burger {
        display: block;
    }

    .hdr .login {
        display: none;
    }

    .nav .login-m {
        display: block;
        margin-top: 10px;
        border: 1px solid var(--line);
        text-align: center;
    }
}

.nav .login-m {
    display: none;
}

@media (max-width: 1260px) {
    .nav .login-m {
        display: block;
    }
}

.userchip {
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
    /* El nombre se acorta con puntos suspensivos (el completo va en el title) antes de que el nav
       tenga que envolver sus enlaces: con un nombre largo, «Contacto» no debe bajar a una segunda fila. */
    min-width: 0;
    max-width: 200px;
}

.userchip.show {
    display: inline-flex;
}

.userchip b {
    color: var(--white);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.userchip button {
    flex: none;
    background: none;
    border: 0;
    text-decoration: underline;
    color: var(--muted);
    font-size: 13px;
}

/* Una salida fallida no puede quedar solo en la consola: quien está en un computador ajeno creería haber salido. */
#logout-error {
    color: var(--danger-text);
    font-size: 12px;
}

/* Con el menú hamburguesa no cabe el chip junto al logotipo: baja a su propia fila, el nombre se acorta con puntos
   suspensivos (el completo va en el title) y «Salir» y el aviso de error nunca ensanchan el encabezado. */
@media (max-width: 1260px) {
    .hdr .wrap {
        flex-wrap: wrap;
        row-gap: 0;
        min-height: 0;
    }

    .brand {
        min-height: 78px;
    }

    .userchip.show {
        display: grid;
        grid-template-columns: auto minmax(0, auto) auto;
        justify-content: start;
        flex: 1 1 100%;
        order: 3;
        min-width: 0;
        max-width: none;
        padding-bottom: 10px;
    }

    .userchip b {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #logout-error {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------------------
   Logos oficiales — siempre completos, como imagen, nunca descompuestos
   --------------------------------------------------------------------------- */
.logo-img {
    display: block;
    height: auto;
}

.brand .iso {
    height: 26px;
    width: auto;
}

.brand .wm {
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .005em;
    white-space: nowrap;
}

.brand .wm span {
    font-weight: 400;
    color: var(--muted);
}

@media (max-width: 420px) {
    .brand .wm {
        font-size: 16px;
    }
}

.logo-row {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.logo-row img {
    height: 150px;
    width: auto;
}

@media (max-width: 560px) {
    .logo-row img {
        height: 120px;
    }
}

/* ---------------------------------------------------------------------------
   Tarjetas grises con botón de esquina (noticias, red)
   --------------------------------------------------------------------------- */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 980px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .cards {
        grid-template-columns: 1fr;
    }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card .tile {
    position: relative;
    background: var(--card);
    aspect-ratio: 1.28;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background .25s;
}

.card:hover .tile {
    background: var(--card-hover);
}

/* Light tile (red-bmw-enlace-cic-y-fondo-blanco): a modifier that says what the tile is, so any card with a logo can
   reuse it. Placed after the grey hover rule so it wins at equal specificity. */
.card .tile.tile--light {
    background: var(--tile-light);
}

.card:hover .tile.tile--light {
    background: var(--tile-light-hover);
}

/* Inverted corner: a white corner on a light background vanishes, so on the light tile of Red BMW and on the agreement
   tiles whose brand background is light (convenios-enlace-y-sugerencias, D10: white 1.00:1 and mint 1.94:1 against the
   white corner) the corner turns --ink and the arrow --white. What decides it is the background, not the brand. A new
   light brand background adds its selector here; the dark ones keep the white corner. */
.card .tile.tile--light .corner,
.pt-link.pt--bg-white .corner,
.pt-link.pt--bg-mint .corner {
    background: var(--ink);
    color: var(--white);
}

.card .tile img.photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The corner is shared by the Red BMW cards (.card) and the agreement tiles that carry a link (.pt-link): one rule,
   one size. --corner-size and --corner-lift (how far the corner rises on hover) are measures and not colors, so each
   has one declaration for both themes; the corner and the right padding of the tile footer read them, so they cannot
   disagree. */
.card,
.pt-link {
    --corner-size: 56px;
    --corner-lift: 4px;
}

.card .corner,
.pt-link .corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--corner-size);
    height: var(--corner-size);
    background: var(--white);
    color: var(--ink);
    display: grid;
    place-items: center;
    transition: transform .25s;
}

.card:hover .corner,
.pt-link:hover .corner,
.pt-link:focus-visible .corner {
    transform: translate(calc(var(--corner-lift) * -1), calc(var(--corner-lift) * -1));
}

.card .corner svg,
.pt-link .corner svg {
    width: 22px;
    height: 22px;
}

.card .ct {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.card .cs {
    color: var(--muted);
    font-size: 15px;
}

.card .meta {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Vertical framing of a news photo (noticias-admin-y-cargar-mas): one copy, used by the home page cards, the detail
   page cover and the card preview of the administration editor. */
img.obj-50 {
    object-position: 50% 50%;
}

img.obj-58 {
    object-position: 50% 58%;
}

img.obj-62 {
    object-position: 50% 62%;
}

.tile .logo-card {
    height: 78%;
    width: auto;
    max-width: 70%;
    box-shadow: 0 10px 30px var(--shade-35);
}

.tile .logo-card.wide {
    height: auto;
    width: 78%;
}

/* ---------------------------------------------------------------------------
   Acordeón
   --------------------------------------------------------------------------- */
.acc {
    border-top: 1px solid var(--line);
}

.acc details {
    border-bottom: 1px solid var(--line);
}

.acc summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
}

.acc summary::-webkit-details-marker {
    display: none;
}

.acc summary .pm {
    width: 26px;
    height: 26px;
    position: relative;
    flex: none;
}

.acc summary .pm::before,
.acc summary .pm::after {
    content: "";
    position: absolute;
    background: var(--white);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.acc summary .pm::before {
    width: 18px;
    height: 2px;
}

.acc summary .pm::after {
    width: 2px;
    height: 18px;
    transition: transform .2s;
}

.acc details[open] summary .pm::after {
    transform: translate(-50%, -50%) scaleY(0);
}

.acc .ac {
    padding: 0 0 26px;
    color: var(--text-soft);
    max-width: 66ch;
}

.acc .ac p + p {
    margin-top: 12px;
}

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    color: var(--ink);
    padding: 14px 22px;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid var(--white);
    border-radius: 2px;
    transition: background .2s, color .2s;
}

.btn:hover,
.btn:active,
.btn:first-child:active {
    background: var(--bg);
    color: var(--white);
    border-color: var(--white);
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn.ghost {
    background: transparent;
    color: var(--white);
    border-color: var(--line);
}

.btn.ghost:hover,
.btn.ghost:active,
.btn.ghost:first-child:active {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}

.btn.accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.btn.accent:hover,
.btn.accent:active,
.btn.accent:first-child:active {
    background: var(--white);
    border-color: var(--white);
    color: var(--ink);
}

.btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.btn-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ---------------------------------------------------------------------------
   Formularios y captcha
   --------------------------------------------------------------------------- */
.form {
    display: grid;
    gap: 20px;
}

.f-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 640px) {
    .f-grid {
        grid-template-columns: 1fr;
    }
}

.fld {
    display: grid;
    gap: 8px;
}

.fld label {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.fld input,
.fld select,
.fld textarea {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    padding: 13px 14px;
    border-radius: 2px;
    width: 100%;
    color: var(--white);
}

.fld input:focus,
.fld select:focus,
.fld textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.fld textarea {
    min-height: 130px;
    resize: vertical;
}

.fld .hint {
    font-size: 13px;
    color: var(--dim);
}

.fld.err input,
.fld.err select,
.fld.err textarea {
    border-color: var(--danger);
}

.fld-pass {
    position: relative;
}

.fld-pass input {
    padding-right: 44px;
}

.pass-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
}

.pass-toggle:hover,
.pass-toggle:focus-visible {
    color: var(--white);
}

.pass-toggle svg {
    width: 18px;
    height: 18px;
}

.fld .msg {
    font-size: 13px;
    color: var(--danger-text);
    display: none;
}

.fld.err .msg {
    display: block;
}

.chk {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
    color: var(--text-soft);
}

.chk input {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--accent);
}

.captcha {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    padding: 16px;
    border-radius: 2px;
}

.captcha .q {
    font-family: var(--font);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .06em;
    background: var(--surface-2);
    padding: 10px 16px;
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
}

.captcha .ans {
    display: grid;
    gap: 6px;
}

.captcha input {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    padding: 12px 14px;
    border-radius: 2px;
    color: var(--white);
    max-width: 160px;
}

.captcha .re {
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
}

.cap-msg {
    color: var(--danger-text);
    font-size: 13px;
    display: none;
}

.cap-msg.show {
    display: block;
}

.notice {
    display: none;
    background: var(--ok-tint);
    border: 1px solid var(--ok-edge);
    padding: 18px 20px;
    border-radius: 2px;
    font-size: 15px;
}

.notice.show {
    display: block;
}

.notice b {
    display: block;
    margin-bottom: 4px;
}

/* A failed submission: same box as the confirmation, in the danger colors, so the person
   sees the failure where the confirmation would have appeared. */
.notice.notice--err {
    background: var(--danger-tint);
    border-color: var(--danger-edge);
}

.upper {
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Redes sociales (contacto y footer)
   --------------------------------------------------------------------------- */
.social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social a,
.social span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 2px;
}

.social a:hover {
    border-color: var(--white);
}

.social svg {
    width: 18px;
    height: 18px;
}

.social .soon {
    opacity: .42;
    cursor: not-allowed;
    border-style: dashed;
}

.social .soon small {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
footer {
    border-top: 1px solid var(--line-soft);
    padding-block: 56px 32px;
    margin-top: 40px;
    background: linear-gradient(var(--veil-0), var(--veil-60));
}

.flogos {
    margin-bottom: 44px;
}

.fgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

@media (max-width: 980px) {
    .fgrid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .fgrid {
        grid-template-columns: 1fr;
    }
}

.fcol h5 {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 16px;
}

/* Segundo título de una columna del pie («Síguenos», «Legal»): 24 px sobre el último enlace del
   grupo anterior. Nombraba el contenido de su primer uso hasta que «Legal» fue el segundo (2026-09-22). */
.fcol h5.after-links {
    margin-top: 24px;
}

.fcol a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    color: var(--text-soft);
}

/* .fcol a fija su propio display: sin esta regla el atributo hidden no escondería el enlace de una sección oculta. */
.fcol a[hidden] {
    display: none;
}

.fcol a:hover {
    color: var(--white);
}

.fbot {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    margin-top: 40px;
    padding-top: 24px;
    font-size: 13px;
    color: var(--muted);
}

/* El crédito de Dasapi ocupa el lugar que tenían los enlaces legales en la línea inferior. .fbot ya
   reparte con space-between y envuelve con wrap: cuando el crédito cabe junto al © queda a su derecha,
   en su misma línea; cuando no cabe baja a una fila propia. margin: 0 anula el margen de párrafo de
   Bootstrap, y margin-left: auto lo mantiene en el extremo derecho también en esa fila propia, donde
   space-between con un solo ítem lo dejaría a la izquierda (decisión de Klaus, 2026-09-21). */
.fcredit {
    margin: 0 0 0 auto;
}

/* Fuera de .fcol no compite ninguna regla de enlace (solo a { color: inherit }), así que el selector va
   sin .fcol delante: con él no calzaría y el crédito saldría con los 13 px de .fbot. Medidas homologadas
   con el crédito de Hahnemann; el enlace envuelve si no cabe: nada de nowrap ni de puntos suspensivos. */
.fcredit-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.fcredit-link:hover {
    color: var(--white);
}

/* Solo el alto: el ancho sale de la proporción del archivo (1071 × 336). flex: none para que la fila
   nunca lo aplaste. Al logo no se le toca el color: es la marca de otra empresa (CLAUDE.md §2 regla 6). */
.fcredit-logo {
    display: block;
    flex: none;
    height: 18px;
    width: auto;
}

/* ---------------------------------------------------------------------------
   Modal de acceso, lightbox y toast
   --------------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    place-items: center;
    background: var(--modal-overlay);
    backdrop-filter: blur(6px);
    padding: 20px;
    /* Un modal más alto que la ventana (el formulario de «Crear cuenta» abierto) se desplaza en vez de quedar cortado:
       un elemento fijo no se desplaza con la página, y lo que sobra por abajo sería inalcanzable. */
    overflow-y: auto;
}

.modal.open {
    display: grid;
}

.mbox {
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    width: min(440px, 100%);
    padding: 36px;
    border-radius: 2px;
    display: grid;
    gap: 18px;
    position: relative;
}

.mbox h3 {
    font-size: 24px;
}

.mbox p {
    color: var(--muted);
    font-size: 15px;
}

.mbox .logo-img {
    height: 110px;
    width: auto;
}

.mbox .x {
    position: absolute;
    right: 14px;
    top: 14px;
    background: none;
    border: 0;
    font-size: 22px;
    color: var(--muted);
    width: 36px;
    height: 36px;
}

.mbox .fine {
    font-size: 12px;
    color: var(--dim);
    text-align: center;
}

/* Los tres modos del modal de acceso (ingresar, crear cuenta, sesión abierta) son bloques de la misma caja: mismo espacio
   entre sus piezas que .registro. .form, .btn y .notice fijan su propio display, así que el atributo hidden solo esconde
   lo que ninguna de esas clases toca: se refuerza aquí para todo el modal. */
.mbox [hidden] {
    display: none;
}

.login-modo {
    display: grid;
    gap: 14px;
}

.login-modo .btn {
    justify-self: stretch;
    text-align: center;
}

/* «Crear cuenta» del modal de acceso (socios-registro-y-aprobacion). El formulario reutiliza .form, .fld, .captcha, .cap-msg
   y .notice; lo único propio es el enlace que lo abre y su separación del resto del modal. */
.registro {
    display: grid;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

/* .form y .btn fijan su propio display: el atributo hidden no bastaría para esconder lo que ellos declaran. */
.registro [hidden] {
    display: none;
}

.registro .registro-abrir {
    justify-self: stretch;
    text-align: center;
}

.registro .fld label small {
    text-transform: none;
    letter-spacing: 0;
    color: var(--dim);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    place-items: center;
    background: var(--shade-92);
    padding: 20px;
}

.lightbox.open {
    display: grid;
}

.lightbox img {
    max-width: min(1200px, 100%);
    max-height: 86vh;
    object-fit: contain;
}

.lightbox .cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    text-align: center;
    color: var(--text-soft);
    font-size: 14px;
}

.lightbox .x {
    position: absolute;
    right: 20px;
    top: 16px;
    background: none;
    border: 0;
    color: var(--white);
    font-size: 32px;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    background: var(--white);
    color: var(--ink);
    padding: 12px 18px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: .25s;
    z-index: 120;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%);
}

/* ---------- Tarjeta de convenio (.pt) ----------
   Shared by the Partners section of the home page and by the preview of the agreement modal in
   /Admin/Convenios (convenios-grupos-admin, D8). Moved here from index.css with the SAME selectors
   and the SAME order: the .pt--bg-* rules still come after .pt:hover. */
.pt {
    background: var(--card);
    aspect-ratio: 1.5;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 20px;
    position: relative;
    transition: background .25s;
    border-top: 3px solid var(--white);
}

.pt:hover {
    background: var(--card-hover);
}

.pt.pt--ben {
    border-top-color: var(--accent);
}

.pt.pt--inst {
    border-top-color: var(--white);
}

.pt .pl {
    font-weight: 700;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.15;
    color: var(--white);
}

.pt .pk {
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.pt .pb {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    font-size: 12px;
    color: var(--text-partner);
}

.pt.lg {
    padding: 0;
    overflow: hidden;
}

.pt.lg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8% 10% 22%;
    box-sizing: border-box;
}

.pt.lg.cover img {
    object-fit: cover;
    padding: 0 0 14%;
    object-position: 50% 40%;
}

.pt.lg .pk {
    position: absolute;
    z-index: 1;
    background: var(--veil-60);
    padding: 3px 8px;
    border-radius: 2px;
}

.pt.lg .pb {
    z-index: 1;
    background: var(--veil-72);
    padding: 6px 10px;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

.pt.lg.light .pk,
.pt.lg.light .pb {
    color: var(--white);
}

/* A tile with a link (convenios-enlace-y-sugerencias): the corner sits over the footer, so the footer keeps its text
   out of the corner's width, INCLUDING the lift of the hover (measured: without it the longest name touched the
   raised corner). Only the corner moves on hover; the tile never changes size. */
.pt.pt-link .pb {
    padding-right: calc(var(--corner-size) + var(--corner-lift));
}

.pt-link .corner {
    z-index: 2;
}

/* With two columns on a phone the tile is about 160 x 108 px, and the 56 px corner would rise into the lines of a
   three-line category label (measured at 390 px: 379 px2 of the label under the raised corner). A smaller corner keeps
   its top below those lines; the footer padding follows because it reads the same measure. */
@media (max-width: 600px) {
    .pt-link {
        --corner-size: 32px;
    }
}

/* Fondo propio de cada marca detrás de su logo (CLAUDE.md §2 regla 6). Van después de
   .pt:hover para que el hover no cambie el color de la marca, igual que en el prototipo.
   Los fondos claros (white y mint) figuran además en la regla de la esquina invertida,
   junto a la tesela clara de Red BMW: un fondo claro nuevo se agrega también ahí. */
.pt.pt--bg-club { background: var(--brand-bg-club); }
.pt.pt--bg-black { background: var(--brand-bg-black); }
.pt.pt--bg-near-black { background: var(--brand-bg-near-black); }
.pt.pt--bg-charcoal { background: var(--brand-bg-charcoal); }
.pt.pt--bg-white { background: var(--brand-bg-white); }
.pt.pt--bg-mint { background: var(--brand-bg-mint); }
.pt.pt--bg-wine { background: var(--brand-bg-wine); }

/* ---------- Tarjeta de producto del store de socios ----------
   Vive acá y no en index.css porque la comparten el store de la portada y la vista previa del
   modal de /Admin/Productos (catalogo-store-en-base), que arma ProductCardRenderer. Se movió
   sin cambiar una regla. */
.prod {
    display: grid;
    gap: 12px;
}

.prod .pi {
    aspect-ratio: 1;
    background: var(--card);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

.prod .pi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prod .pi .ph-ico {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
    text-align: center;
    padding: 16px;
}

.prod .pi .ph-note {
    opacity: .6;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}

.prod .pn {
    font-weight: 700;
    font-size: 17px;
}

.prod .pp {
    color: var(--muted);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.prod .add {
    justify-self: start;
    background: none;
    border: 1px solid var(--line);
    padding: 9px 14px;
    font-size: 14px;
    border-radius: 2px;
}

.prod .add:hover {
    border-color: var(--white);
}

/* Carrusel de fotos de la tarjeta (producto-imagenes-multiples): flechas y puntos solo aparecen con más de una
   foto. ProductCardRenderer arma el marcado; acá solo su presentación, sobre el fondo oscuro de la tarjeta. */
.prod .pi-nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: var(--brand-bg-near-black);
    opacity: .7;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--white);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.prod .pi-nav:hover {
    opacity: 1;
}

.prod .pi-prev { left: 8px; }
.prod .pi-next { right: 8px; }

.prod .pi-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    translate: -50% 0;
    display: flex;
    gap: 5px;
}

.prod .pi-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--white);
    opacity: .4;
}

.prod .pi-dot.active {
    opacity: 1;
}