/* =====================================================================
   Barber House Club — Landing de campanas (V35, modulo GANA)
   Hereda los tokens de public.css (--ink, --wood, --font-display...).
   Se carga DESPUES de public.css y nunca lo pisa: todo namespaceado .gana-*.

   Mobile-first de verdad: esta landing se difunde por Instagram, asi que
   practicamente todo el trafico entra desde un celular.
   ===================================================================== */

body.gana-page {
    min-height: 100dvh;
    margin: 0;
    background:
        radial-gradient(130% 70% at 50% -5%, rgba(205,175,149,.16), transparent 62%),
        var(--hex),
        var(--ink);
    background-size: auto, 28px 49px, auto;
    color: var(--white-warm);
}

.gana-shell {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: clamp(18px, 5vw, 34px) 18px 30px;
    padding-bottom: max(30px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3.5vw, 22px);
}

/* ---- Cabecera ---- */
.gana-head { text-align: center; }
.gana-logo { width: clamp(170px, 52vw, 230px); margin: 0 auto; opacity: .96; }

/* Al pie de la landing la marca cierra, no encabeza: mas chica y mas apagada,
   para que no compita con el premio ni con el boton de participar. */
.gana-head--pie { padding-top: clamp(8px, 3vw, 18px); }
.gana-head--pie .gana-logo { width: clamp(132px, 40vw, 168px); opacity: .62; }

/* ---- Bloque del premio principal ---- */
.gana-hero {
    text-align: center;
    padding: clamp(22px, 6vw, 34px) clamp(18px, 5vw, 28px);
    background: linear-gradient(180deg, rgba(32,31,29,.96), rgba(25,24,23,.96));
    border: 1px solid var(--bhc-hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    position: relative;
    overflow: hidden;
}
/* Resplandor de madera detras del premio */
.gana-hero::before {
    content: '';
    position: absolute;
    top: -40%; left: 50%; transform: translateX(-50%);
    width: 130%; height: 80%;
    background: radial-gradient(closest-side, rgba(205,175,149,.16), transparent 70%);
    pointer-events: none;
}

.gana-kicker {
    position: relative;
    margin: 0 0 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--wood);
}

.gana-premio-nombre {
    position: relative;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 11vw, 58px);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--white);
    text-shadow: 0 0 60px rgba(205,175,149,.3);
}

.gana-premio-desc {
    position: relative;
    margin: 10px 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(16px, 4.4vw, 20px);
    color: var(--gray-light);
}

.gana-premio-img {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 18px auto 4px;
    border-radius: var(--r);
    display: block;
}

.gana-fecha {
    position: relative;
    margin: 18px 0 0;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-warm);
}
.gana-fecha strong { color: var(--wood); }

/* ---- Tarjetas de seccion ---- */
.gana-card {
    position: relative;
    background: linear-gradient(180deg, rgba(32,31,29,.92), rgba(25,24,23,.92));
    border: 1px solid var(--bhc-hairline-soft);
    border-radius: var(--r-lg);
    padding: clamp(22px, 6vw, 32px) clamp(18px, 5vw, 28px);
}
.gana-card::before {
    content: '';
    position: absolute;
    top: -1px; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wood-line), transparent);
}

.gana-title, .gana-h2 {
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--white-warm);
    line-height: 1.15;
}
.gana-title { font-size: clamp(26px, 8vw, 36px); }
.gana-h2    { font-size: clamp(17px, 4.8vw, 22px); }

.gana-rule {
    display: flex; align-items: center; justify-content: center;
    margin: 14px auto 16px;
    width: 66%;
}
.gana-rule::before, .gana-rule::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--wood-line));
}
.gana-rule::after { background: linear-gradient(90deg, var(--wood-line), transparent); }

.gana-lead {
    margin: 0;
    text-align: center;
    font-family: var(--font-serif);
    font-size: clamp(15.5px, 4.2vw, 18px);
    line-height: 1.55;
    color: var(--gray-light);
}

/* ---- Lista de premios secundarios ---- */
.gana-premios { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gana-premio-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bhc-hairline-soft);
}
.gana-premio-item:last-child { border-bottom: 0; padding-bottom: 0; }
.gana-premio-item img {
    width: 52px; height: 52px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--bhc-hairline-soft);
}
.gana-premio-item strong {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(16px, 4.4vw, 19px);
    color: var(--white-warm);
    font-weight: 500;
}
.gana-premio-puesto {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border: 1px solid var(--wood-line);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--wood);
}
.gana-premio-sub {
    display: block;
    font-size: 12.5px;
    color: var(--gray-med);
    margin-top: 2px;
}

/* ---- Lista de acciones que suman chances ---- */
.gana-acciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gana-acciones li {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
}
.gana-acciones strong {
    display: block;
    font-size: clamp(15px, 4.2vw, 17px);
    color: var(--white-warm);
    font-weight: 500;
}
.gana-chance-tag {
    display: flex; align-items: center; justify-content: center;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--wood-soft);
    border: 1px solid var(--wood-line);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--wood-bright);
}

.gana-acciones-btns {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

/* ---- Botones ---- */
.gana-cta {
    display: block;
    position: relative;
    margin: 20px auto 0;
    max-width: 340px;
    padding: 17px 26px;
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--wood-bright), var(--wood));
    color: #241d16;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    box-shadow: 0 12px 34px rgba(205,175,149,.24);
    transition: transform .12s ease, box-shadow .25s ease;
}
.gana-cta:hover { box-shadow: 0 16px 42px rgba(205,175,149,.34); }
.gana-cta:active { transform: translateY(1px); }

.gana-ghost {
    display: inline-block;
    padding: 11px 20px;
    border: 1px solid var(--bhc-hairline);
    border-radius: var(--r-sm);
    color: var(--wood);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease;
}
.gana-ghost:hover { background: var(--wood-soft); border-color: var(--wood); }
.gana-card--ok .gana-ghost { margin-top: 10px; }

/* ---- Formulario ---- */
/* 52px de alto y 16px de fuente: comodo para el pulgar y iOS no hace zoom. */
.gana-form { margin-top: 4px; }
.gana-page .pub-input { min-height: 52px; font-size: 16px; }
.gana-page .pub-field label {
    position: static;
    width: auto; height: auto;
    padding: 0; margin: 0;
    overflow: visible; clip: auto; clip-path: none; white-space: normal;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gray-warm);
}

/* El @ pegado al input de Instagram */
.gana-ig-group { position: relative; }
.gana-ig-at {
    position: absolute;
    left: 15px; top: 50%; transform: translateY(-50%);
    font-size: 16px;
    color: var(--gray-med);
    pointer-events: none;
}
.gana-ig-group .pub-input { padding-left: 32px; }

.gana-hint { font-size: 12px; color: var(--bhc-text-dim); margin-top: 4px; }

.gana-check-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--gray-light);
    cursor: pointer;
}
.gana-check-row input {
    width: 20px; height: 20px;
    margin: 1px 0 0;
    accent-color: var(--wood);
}
.gana-check-row a { color: var(--wood); }

.gana-submit {
    margin-top: 8px;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--wood-bright), var(--wood));
    color: #241d16;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(205,175,149,.22);
    transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.gana-submit:hover { box-shadow: 0 14px 38px rgba(205,175,149,.32); }
.gana-submit:active { transform: translateY(1px); }
.gana-submit:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* ---------------------------------------------------------------------
   WIZARD DE RESERVAS DENTRO DE LA LANDING  (V35 fase 2)
   ---------------------------------------------------------------------
   El markup viene de includes/wizard_reserva.php, el mismo que usa la home, y
   casi todo el estilo sale gratis: los selectores del wizard en public.css son
   de una sola clase sin ancestro (.pub-step, .pub-card, .pub-day, .pub-slot...)
   y esta pagina carga public.css ANTES que este archivo.
   Lo unico que hay que evitar es la clase .pub-form-card, que trae su propio
   ::before decorativo y quedaria duplicado dentro de una .gana-card: por eso el
   partial recibe card_class = 'gana-wizard'.
   Los labels del wizard SI se ven aca (la regla .gana-page .pub-field label de
   mas arriba revierte el visually-hidden de public.css). Es a proposito: el
   placeholder "Sin puntos" no dice que el campo es el DNI.
   --------------------------------------------------------------------- */

.gana-wizard-wrap { padding-bottom: 4px; }

/* El wizard ya vive dentro de una .gana-card: no repite fondo ni borde. */
.gana-wizard {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
/* El titulo de la tarjeta lo pone la seccion (.gana-h2), no el partial. */
.gana-wizard > .pub-form-title { display: none; }

/* Separadores entre pasos, en la clave de la landing */
.gana-page .pub-step { border-top-color: var(--wood-line); }
.gana-page .pub-step-head h3 {
    font-family: var(--font-display);
    letter-spacing: .01em;
}

/* "(opcional)" al lado del titulo del paso de Instagram */
.gana-opt {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--gray-warm);
}

/* El paso de Instagram no es uno de los 6 numerados: sin data-step, asi que
   public.js lo ignora. Se separa un poco mas para que se lea como un extra. */
.pub-step-extra { padding-top: 22px; }
.pub-step-extra .gana-check-row:first-of-type { margin-top: 14px; }

/* El boton de confirmar toma el peso visual del CTA de la landing */
.gana-page .pub-confirmar {
    min-height: 56px;
    letter-spacing: .18em;
    box-shadow: 0 10px 30px rgba(205,175,149,.22);
}

/* ---- Tarjeta del turno reservado (pantalla de confirmacion) ---- */
.gana-turno {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 18px 0 4px;
    padding: 16px 18px;
    border: 1px solid var(--wood-line);
    border-radius: var(--r-lg);
    background: rgba(205,175,149,.07);
    text-align: center;
}
.gana-turno-fecha {
    font-family: var(--font-display);
    font-size: clamp(19px, 5vw, 24px);
    font-weight: 600;
    color: var(--wood-bright);
    line-height: 1.25;
}
.gana-turno-det { font-size: 14px; color: var(--gray-light); }
.gana-turno-cod { font-size: 12px; color: var(--gray-med); }

/* ---- Avisos ---- */
.gana-aviso {
    margin: 16px 0 0;
    padding: 13px 16px;
    border-radius: var(--r);
    background: rgba(205,175,149,.08);
    border: 1px solid var(--wood-line);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gray-light);
    text-align: left;
}
.gana-aviso strong { color: var(--wood-bright); }

/* ---- Confirmacion ---- */
.gana-card--ok { text-align: center; }

.gana-check { width: 74px; height: 74px; margin: 2px auto 18px; }
.gana-check svg { width: 100%; height: 100%; }
.gana-check-c {
    fill: none; stroke: var(--wood); stroke-width: 1.5; opacity: .5;
    stroke-dasharray: 152; stroke-dashoffset: 152;
    animation: gana-draw .7s ease forwards;
}
.gana-check-p {
    fill: none; stroke: var(--wood-bright); stroke-width: 3.4;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 40; stroke-dashoffset: 40;
    animation: gana-draw .45s .5s ease forwards;
}
@keyframes gana-draw { to { stroke-dashoffset: 0; } }

.gana-ok-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(23px, 7vw, 31px);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wood);
}
.gana-ok-name {
    margin: 10px 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(21px, 6vw, 27px);
    color: var(--white-warm);
}

/* Contador grande de chances */
.gana-chances-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 22px auto 4px;
    padding: 18px 24px;
    max-width: 240px;
    border: 1px solid var(--wood-line);
    border-radius: var(--r-lg);
    background: rgba(205,175,149,.07);
}
.gana-chances-n {
    font-family: var(--font-display);
    font-size: clamp(44px, 14vw, 64px);
    font-weight: 700;
    line-height: 1;
    color: var(--wood-bright);
}
.gana-chances-lbl {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gray-warm);
}

.gana-ok-sub {
    margin: 18px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gray-light);
}
.gana-ok-sub strong { color: var(--white-warm); }
.gana-ok-foot { margin: 0; font-size: 13px; color: var(--gray-med); }
.gana-ok-foot strong { color: var(--wood); }

/* ---- Bases ---- */
.gana-bases {
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-warm);
    max-height: 340px;
    overflow-y: auto;
    padding-right: 6px;
}

/* ---- Pie ---- */
.gana-foot {
    margin-top: 6px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--bhc-text-dim);
}

/* V61: .gana-hero, .gana-kicker, .gana-premio-*, .gana-acciones*,
   .gana-resumen*, .gana-fecha y .gana-head--pie quedaron SIN USO desde el
   afiche. No se borran en el mismo paso que el rediseño: si algo queda feo,
   hay que poder saber si fue el markup nuevo o una clase que se fue de mas. */

/* Entrada escalonada */
.gana-head  { animation: gana-rise .55s ease both; }
.gana-hero  { animation: gana-rise .55s .1s ease both; }
.gana-card  { animation: gana-rise .55s .18s ease both; }
@keyframes gana-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gana-head, .gana-hero, .gana-card { animation: none; }
    .gana-check-c, .gana-check-p { animation-duration: .01ms; stroke-dashoffset: 0; }
}


/* =====================================================================
   V61 — EL AFICHE  (landing /gana, estado D)
   =====================================================================
   Rediseño con voz propia: un AFICHE de barberia, no un formulario web.
   Quien llega desde una historia de Instagram decide en dos segundos, asi
   que el premio ocupa la pantalla y el formulario esta a un scroll de cero.

   ⚠️ ES ADITIVO. Todo lleva prefijo .gana-af-* y no pisa NADA de lo anterior:
   los estados "ya participas", "turno reservado" y "sin campania" siguen con
   sus clases de siempre, y el WIZARD embebido (.gana-page .pub-*) tampoco se
   toca. El formulario corto se REUSA tal cual (.gana-form, .gana-field...):
   ahi viven los contratos con gana.js y no hay motivo para arriesgarlos.

   La paleta y las fuentes salen de public.css. Acento unico: --wood.
   ===================================================================== */

/* El afiche respira mas que las otras pantallas: el titulo es enorme y
   dentro de 520px en desktop se veria como un movil estirado. */
.gana-shell--afiche { max-width: 620px; }

/* ---------- Entrada escalonada ----------
   ⚠️ El delay va por variable inline (--gana-i) y NO por :nth-child(): la
   cantidad de secciones cambia segun haya inscripcion abierta, premios
   secundarios o bases, asi que un nth-child se desfasa solo. */
.gana-shell--afiche > * { animation-delay: calc(var(--gana-i, 0) * 80ms); }

/* =====================  HERO  ===================== */
.gana-af-hero {
    position: relative;
    padding: clamp(26px, 7vw, 44px) clamp(18px, 5vw, 30px) clamp(22px, 6vw, 34px);
    border: 1px solid var(--bhc-hairline);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(205,175,149,.16), transparent 60%),
        linear-gradient(180deg, #262421, var(--bhc-surface-2));
    box-shadow: var(--sh-lg);
    overflow: hidden;
    text-align: center;
    animation: gana-rise .55s ease both;
}
/* Textura hexagonal: es el motivo de la marca, aca se usa como trama de
   afiche impreso. Va enmascarado para que se apague hacia abajo. */
.gana-af-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--hex);
    opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    pointer-events: none;
}
/* La franja diagonal: guiño al poste de barberia, en madera y muy tenue. */
.gana-af-hero::after {
    content: '';
    position: absolute; inset: -40% -10% auto -10%; height: 180%;
    background: repeating-linear-gradient(
        -55deg,
        transparent 0 22px,
        rgba(205,175,149,.05) 22px 26px
    );
    pointer-events: none;
}
.gana-af-hero > * { position: relative; z-index: 1; }

.gana-af-kicker {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: var(--track-lg);
    text-transform: uppercase;
    color: var(--wood);
    margin-bottom: clamp(10px, 2.6vw, 16px);
}
/* El titulo del afiche. Condensado, enorme y con tracking NEGATIVO: es lo
   que lo saca de "web" y lo mete en "cartel". */
.gana-af-titulo {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: .88;
    letter-spacing: -.015em;
    font-size: clamp(46px, 13.5vw, 84px);
    color: var(--white-warm);
    margin: 0;
    /* Un premio con nombre largo no puede desbordar el afiche. */
    overflow-wrap: break-word;
    hyphens: auto;
}
.gana-af-titulo em {
    display: block;
    font-style: normal;
    color: var(--wood);
    /* El nombre del premio pesa mas que el verbo. */
    font-size: 1.12em;
}
.gana-af-sub {
    font-family: var(--font-body);
    font-size: clamp(13.5px, 3.4vw, 15.5px);
    color: var(--gray-warm);
    margin: clamp(14px, 3.4vw, 20px) auto 0;
    max-width: 34ch;
    line-height: 1.5;
}
.gana-af-fecha {
    display: inline-block;
    margin-top: clamp(16px, 4vw, 22px);
    padding: 7px 14px;
    border: 1px solid var(--wood-line);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 11.5px;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--wood);
    background: var(--wood-soft);
}
.gana-af-hero-img {
    display: block;
    width: min(74%, 300px);
    margin: clamp(18px, 5vw, 26px) auto 0;
    border-radius: var(--r);
}

/* =====================  ENCABEZADOS DE SECCION  ===================== */
.gana-af-h {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -.005em;
    font-size: clamp(26px, 7.2vw, 40px);
    color: var(--white-warm);
    text-align: center;
    margin: 0 0 6px;
}
.gana-af-h em { font-style: normal; color: var(--wood); display: block; }
.gana-af-bajada {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gray-warm);
    text-align: center;
    margin: 0 auto clamp(16px, 4vw, 22px);
    max-width: 36ch;
    line-height: 1.5;
}

/* =====================  PREMIOS  =====================
   Los emojis de medalla se reemplazan por NUMERALES tipograficos: es el
   mismo recurso que usa una ficha de taller y no rompe la identidad. */
.gana-af-premios { display: grid; gap: 0; }
.gana-af-premio {
    display: grid;
    grid-template-columns: clamp(52px, 15vw, 74px) 1fr;
    gap: clamp(12px, 3.5vw, 18px);
    align-items: center;
    padding: clamp(14px, 3.6vw, 18px) 0;
    border-top: 1px solid var(--bhc-hairline-soft);
}
.gana-af-premio:first-child { border-top: 0; }
/* El primer premio pesa mas: numeral en madera y nombre mas grande. */
.gana-af-premio--top .gana-af-num { color: var(--wood); }
.gana-af-premio--top .gana-af-premio-nom { font-size: clamp(19px, 5vw, 24px); }

.gana-af-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(38px, 11vw, 56px);
    line-height: .8;
    letter-spacing: -.03em;
    color: var(--graphite);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.gana-af-premio-nom {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(16px, 4.4vw, 19px);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white-warm);
    line-height: 1.15;
}
.gana-af-premio-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gray-med);
    margin-top: 3px;
    line-height: 1.4;
}
.gana-af-premio-img {
    grid-column: 1 / -1;
    width: min(60%, 220px);
    margin: 10px auto 0;
    border-radius: var(--r);
}

/* =====================  LA ESCALERA DE CHANCES  =====================
   El recurso central del afiche: se ve de un vistazo COMO se acumulan.
   Cada escalon tiene su +N y una barra que crece con lo acumulado. */
.gana-af-escalera { display: grid; gap: clamp(10px, 2.6vw, 14px); }
.gana-af-paso {
    display: grid;
    grid-template-columns: clamp(54px, 15vw, 66px) 1fr;
    gap: clamp(12px, 3.4vw, 16px);
    align-items: center;
}
.gana-af-mas {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--wood);
    text-align: center;
    padding: 10px 4px;
    border: 1px solid var(--wood-line);
    border-radius: var(--r);
    background: var(--wood-soft);
    font-variant-numeric: tabular-nums;
}
.gana-af-paso-t {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(15px, 4.2vw, 17px);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--white-warm);
    line-height: 1.2;
}
.gana-af-paso-d {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--gray-med);
    margin-top: 3px;
    line-height: 1.45;
}
/* La barra que crece: el ancho lo pone PHP con --w, derivado de las reglas. */
.gana-af-barra {
    grid-column: 2 / -1;
    height: 3px;
    margin-top: 9px;
    border-radius: 999px;
    background: var(--graphite);
    overflow: hidden;
}
.gana-af-barra i {
    display: block; height: 100%;
    width: var(--w, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wood-deep), var(--wood));
    animation: gana-af-crecer .9s .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes gana-af-crecer { from { width: 0; } to { width: var(--w, 0%); } }

/* El total al pie de la escalera. */
.gana-af-total {
    margin-top: clamp(16px, 4vw, 22px);
    padding-top: clamp(14px, 3.4vw, 18px);
    border-top: 1px solid var(--bhc-hairline);
    text-align: center;
}
.gana-af-total-n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(44px, 13vw, 64px);
    line-height: .85;
    letter-spacing: -.03em;
    color: var(--wood);
    font-variant-numeric: tabular-nums;
}
.gana-af-total-l {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--gray-warm);
    margin-top: 8px;
}
/* La nota que mantiene honesta a la pagina: las chances de la reserva se
   acreditan cuando la persona VIENE. Sin esto, el afiche promete algo que
   el motor no da (ver V41). */
.gana-af-nota {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    color: var(--bhc-text-dim);
    text-align: center;
    margin-top: clamp(12px, 3vw, 16px);
    padding: 10px 12px;
    border-left: 2px solid var(--wood-line);
    background: rgba(255,255,255,.02);
    text-align: left;
}

/* =====================  CIERRE  ===================== */
.gana-af-cierre { text-align: center; }
.gana-af-cierre .gana-af-h { margin-bottom: 10px; }

/* =====================  ICONO SVG line-art  ===================== */
.gana-af-ico {
    width: 26px; height: 26px;
    stroke: var(--wood);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    margin: 0 auto clamp(10px, 2.6vw, 14px);
}


/* ---------- V62: direccion bajo el logo ----------
   El anuncio se ve en todo el pais. Que diga NEUQUEN arriba de todo evita que
   alguien de otra provincia deje el DNI para un sorteo al que no puede ir. */
.gana-af-dir {
    font-family: var(--font-display);
    font-weight: 600;
    /* Estaba en 11px gris y se perdia. Es el dato que evita que alguien de
       otra provincia deje el DNI para un sorteo al que no puede ir: tiene que
       leerse SIN buscarlo. */
    font-size: clamp(13px, 3.6vw, 15px);
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--wood);
    text-align: center;
    margin: 14px auto 0;
    padding: 7px 16px;
    display: inline-block;
    border-top: 1px solid var(--wood-line);
    border-bottom: 1px solid var(--wood-line);
}
/* El <p> es de ancho completo; el borde tiene que abrazar solo al texto. */
.gana-head { text-align: center; }

/* ---------- V62: cuenta regresiva ----------
   Reemplaza a la fecha. "Faltan 39 dias" empuja; "16/09/2026" obliga a hacer
   la cuenta mentalmente, que es justo lo que nadie hace en Instagram. */
.gana-af-cuenta {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-top: clamp(16px, 4vw, 22px);
    padding: 8px 16px;
    border: 1px solid var(--wood-line);
    border-radius: 999px;
    background: var(--wood-soft);
}
.gana-af-cuenta-n {
    font-family: var(--font-display);
    font-weight: 700;
    /* Bajado de 34px: el numero le ganaba al titulo del premio, que es lo que
       de verdad tiene que dominar el afiche. Ahora acompaña a su etiqueta en
       vez de competir con ella. */
    font-size: clamp(17px, 4.4vw, 20px);
    line-height: 1;
    letter-spacing: 0;
    color: var(--wood);
    font-variant-numeric: tabular-nums;
}
.gana-af-cuenta-l {
    font-family: var(--font-display);
    font-size: 11.5px;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--gray-warm);
}
.gana-af-cuenta-hoy { color: var(--wood); font-weight: 700; }

/* ---------- V62: la tarjeta final, la del formulario ----------
   Es la unica que pide algo, asi que se distingue del resto con el borde en
   madera: cuando la persona llega hasta aca, tiene que saber que es EL paso. */
.gana-af-final { border-color: var(--wood-line); }
.gana-af-final .gana-af-h { margin-bottom: 6px; }
.gana-af-final .gana-af-bajada { margin-bottom: clamp(18px, 4.5vw, 24px); }

/* ⚠️ REDUCED-MOTION: sin esto, `animation: ... both` con `from{opacity:0}`
   deja TODA la pagina invisible para quien pidio menos movimiento. Es el
   error mas facil de cometer en un rediseño con reveals. */
@media (prefers-reduced-motion: reduce) {
    .gana-af-hero { animation: none; }
    .gana-shell--afiche > * { animation-delay: 0s !important; }
    .gana-af-barra i { animation: none; width: var(--w, 0%); }
}

/* =====================================================================
   AREA DEL PARTICIPANTE  (bloque dentro de mi-cuenta.php)
   Convive con las clases .cuenta-* de esa pantalla: solo estila lo propio.

   OJO CON LA PALETA: la landing /gana es OSCURA, pero mi-cuenta.php dibuja
   tarjetas BLANCAS (.cuenta-card). Todo lo de aca abajo usa la paleta clara
   del proyecto -- --ink / --charcoal / --gray-med / --wood-deep --, la misma
   que .cuenta-* y .racha-*. Los tokens claros de arriba (--white-warm,
   --gray-light, --wood-bright) son texto sobre fondo oscuro: usados aca dan
   1.2 de contraste y el bloque queda ilegible.
   ===================================================================== */

.gana-mi { border-color: var(--wood-line) !important; }

.gana-mi-flash {
    margin: 0 0 16px;
    padding: 12px 15px;
    border-radius: var(--r);
    font-size: 13.5px;
    line-height: 1.5;
}
.gana-mi-flash--ok    { background: rgba(47,143,82,.09);  border: 1px solid rgba(47,143,82,.4);  color: #276f41; }
.gana-mi-flash--error { background: rgba(176,65,62,.08);  border: 1px solid rgba(176,65,62,.38); color: #9b3936; }

/* Contador grande */
.gana-mi-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin: 6px 0 18px;
    padding: 20px;
    border: 1px solid var(--wood-line);
    border-radius: var(--r-lg);
    background: var(--wood-soft);
}
.gana-mi-n {
    font-family: var(--font-display);
    font-size: clamp(46px, 15vw, 68px);
    font-weight: 700;
    line-height: 1;
    color: var(--wood-deep);
}
.gana-mi-lbl {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--gray-med);
}
.gana-mi-pend {
    margin-top: 6px;
    font-size: 12px;
    color: var(--gray-med);
}

.gana-mi-aviso {
    margin: 0 0 14px;
    padding: 13px 16px;
    border-radius: var(--r);
    background: var(--wood-soft);
    border: 1px solid var(--wood-line);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--charcoal);
}
.gana-mi-aviso--urg {
    background: rgba(176,65,62,.07);
    border-color: rgba(176,65,62,.4);
}
.gana-mi-aviso strong { color: var(--ink); }

.gana-mi-ok {
    margin: 0 0 14px;
    padding: 11px 15px;
    border-radius: var(--r);
    background: rgba(47,143,82,.09);
    border: 1px solid rgba(47,143,82,.35);
    font-size: 13.5px;
    color: #276f41;
}

.gana-mi-h3 {
    margin: 22px 0 10px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gray-med);
}

/* Historial de movimientos */
.gana-mi-movs { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gana-mi-movs li {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: baseline;
    font-size: 14px;
    color: var(--charcoal);
}
.gana-mi-movs li.is-anulada { opacity: .55; }
.gana-mi-mov-n {
    font-weight: 700;
    color: var(--wood-deep);
    text-align: right;
}
.gana-mi-movs li.is-anulada .gana-mi-mov-n { color: var(--gray-med); }
.gana-mi-mov-tx em { font-style: normal; font-size: 12px; color: var(--gray-med); }
.gana-mi-mov-f { font-size: 12px; color: var(--gray-med); white-space: nowrap; }

/* Estado de Instagram */
.gana-mi-ig {
    padding: 12px 15px;
    border-radius: var(--r);
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid var(--gray-light);
    background: var(--white-warm);
    color: var(--charcoal);
}
.gana-mi-ig--aprobada  { background: rgba(47,143,82,.09); border-color: rgba(47,143,82,.35); color: #276f41; }
.gana-mi-ig--pendiente { background: var(--wood-soft);    border-color: var(--wood-line); }
.gana-mi-ig--sin_ig    { background: var(--wood-soft);    border-color: var(--wood-line); }
.gana-mi-ig--rechazada,
.gana-mi-ig--vencida   { background: rgba(176,65,62,.08); border-color: rgba(176,65,62,.38); color: #9b3936; }

/* Form para cargar el Instagram despues de haberse anotado sin cuenta.
   Vive en la tarjeta BLANCA de mi-cuenta, asi que redefine el @ y el input:
   .gana-ig-at usa --gray-med, que sobre blanco funciona, pero el input hereda
   el .pub-input oscuro de public.css y hay que aclararlo como el resto de
   .mi-cuenta-page. */
.gana-mi-igform { display: grid; gap: 10px; }
.gana-mi-igform .pub-input {
    background: var(--white-warm);
    border-color: var(--gray-light);
    color: var(--ink);
    min-height: 50px;
}
.gana-mi-igform .pub-input:focus {
    border-color: var(--wood-deep);
    background: #fff;
    box-shadow: 0 0 0 3px var(--wood-soft);
}
.gana-mi-igform .pub-input::placeholder { color: var(--gray-warm); }

.gana-mi-ayuda {
    margin: 10px 0 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gray-med);
}
.gana-mi-ayuda strong { color: var(--charcoal); }

.gana-mi-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.gana-mi-btns form { margin: 0; }

.gana-mi-cta {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--wood), var(--wood-deep));
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
}
.gana-mi-cta--sec {
    background: transparent;
    border: 1px solid var(--gray-light);
    color: var(--wood-deep);
    flex: 1;
}

.gana-mi-foot {
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--gray-light);
    font-size: 12.5px;
    color: var(--gray-med);
}
.gana-mi-foot strong { color: var(--wood-deep); }
.gana-mi-foot a { color: var(--wood-deep); }

/* =====================================================================
   V46 — Primero participás, después reservás
   ===================================================================== */

/* ---- El claim del hero: la promesa en una frase ---- */
.gana-hero-claim {
    margin: 14px 0 6px;
    font-family: var(--font-body);
    font-size: clamp(17px, 4.4vw, 21px);
    font-weight: 400; line-height: 1.35;
    color: var(--white-warm);
}
.gana-hero-extra {
    margin: 0 0 20px;
    font-size: 15px; line-height: 1.5;
    color: var(--gray-warm);
}
.gana-hero-extra strong { color: var(--wood); font-weight: 600; }

/* ---- Las tres líneas de chances, debajo del botón ----
   Cortas a propósito: la explicación larga vive mucho más abajo. */
.gana-resumen {
    list-style: none; margin: 20px 0 0; padding: 0;
    display: grid; gap: 9px;
    text-align: left;
}
.gana-resumen li {
    display: flex; align-items: baseline; gap: 11px;
    font-size: 15px; color: var(--white-warm);
}
.gana-resumen li span {
    flex: none; min-width: 38px;
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700; line-height: 1;
    color: var(--wood);
}
.gana-resumen-nota {
    margin: 12px 0 0;
    font-size: 12.5px; line-height: 1.45;
    color: var(--gray-warm);
}

/* ---- El formulario corto ---- */
.gana-form { display: grid; gap: 15px; }
.gana-field { display: grid; gap: 6px; text-align: left; }
.gana-field label,
.gana-field-lbl {
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--gray-warm);
}
.gana-field input[type="tel"],
.gana-field input[type="text"] {
    width: 100%;
    padding: 15px 16px;
    background: var(--bhc-surface-2);
    border: 1px solid var(--bhc-hairline-soft);
    border-radius: var(--r);
    color: var(--white-warm);
    font-family: var(--font-body);
    font-size: 16px;   /* 16px o menos hace que iOS zoomee al enfocar */
}
.gana-field input:focus {
    outline: none;
    border-color: var(--wood);
    box-shadow: 0 0 0 3px var(--wood-soft);
}

/* Sexo: dos chips. Con dos opciones, un <select> son tres taps en vez de uno. */
.gana-sexo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gana-sexo-opt {
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 10px;
    background: var(--bhc-surface-2);
    border: 1px solid var(--bhc-hairline-soft);
    border-radius: var(--r);
    color: var(--white-warm);
    font-size: 15.5px; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.gana-sexo-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gana-sexo-opt:has(input:checked) {
    border-color: var(--wood);
    background: var(--wood-soft);
}
/* Sin :has() el estado elegido no se veria; el foco por teclado tiene que
   marcarse igual o el campo queda inusable sin mouse. */
.gana-sexo-opt:focus-within {
    border-color: var(--wood);
    box-shadow: 0 0 0 3px var(--wood-soft);
}

.gana-cta--full { display: block; width: 100%; margin-top: 4px; }
.gana-form-foot {
    margin: 0; text-align: center;
    font-size: 13px; color: var(--gray-med);
}

/* Honeypot: fuera de pantalla, nunca display:none (algunos bots lo detectan) */
.gana-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- Bases en desplegable ---- */
.gana-bases-box > summary {
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; list-style: none;
}
.gana-bases-box > summary::-webkit-details-marker { display: none; }
.gana-bases-box > summary .gana-h2 { margin: 0; }
.gana-bases-mas {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--wood);
}
/* El texto lo pone el CSS, no el HTML: asi no hace falta JS para alternarlo. */
.gana-bases-mas::after { content: 'Ver'; }
.gana-bases-box[open] .gana-bases-mas::after { content: 'Cerrar'; }

/* ---- Botón fijo en celular ----
   El recorrido nuevo tiene un solo objetivo por pantalla; esto lo mantiene
   siempre a un tap sin obligar a scrollear de vuelta al hero. */
.gana-fijo { display: none; }
@media (max-width: 720px) {
    .gana-fijo {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(23,23,23,0), rgba(23,23,23,.94) 32%);
        transition: transform .22s ease, opacity .22s ease;
    }
    .gana-fijo .gana-cta { display: block; width: 100%; margin: 0; }
    /* Lo esconde gana.js cuando el formulario esta a la vista, para que no
       tape el boton de enviar. */
    .gana-fijo.is-oculto { transform: translateY(120%); opacity: 0; pointer-events: none; }
    /* Que la barra no tape el ultimo bloque de la pagina. */
    .gana-shell { padding-bottom: 96px; }
}