/* =====================================================================
   Barber House Club — sitio publico (public.css)
   Rediseno 2026-07-31: industrial americano.
   Base negro/grafito/gris + blanco calido. Madera (#CDAF95) como UNICO acento.
   Fuentes: Barlow Condensed (titulos de card, precios, botones, labels — siempre
   en mayusculas y con tracking) / Jost (texto corrido y titulos fantasma).
   Recurso firma: titulos fantasma gigantes a un paso del fondo, que sangran por
   el borde de la seccion. Motivo hexagonal sutil. Mobile-first.
   NOTA: se preservan TODOS los hooks del wizard (IDs, .pub-*, .is-*, data-*).
   ===================================================================== */

:root {
    /* Neutros industriales */
    --ink:         #171717;
    --charcoal:    #242323;
    --graphite:    #393735;
    --gray-med:    #66615E;
    --gray-warm:   #AAA6A3;
    --gray-light:  #D8D4D1;
    --white-warm:  #F3F1EF;
    --white:       #FFFFFF;
    --wood:        #CDAF95;
    --wood-bright: #DcC4AC;
    --wood-soft:   rgba(205,175,149,.14);
    --wood-line:   rgba(205,175,149,.45);
    --wood-deep:   #9c7d5f;  /* madera oscura, para acentos sobre fondo claro (contraste) */

    /* Tokens compat (nombres heredados por el wizard) -> repintados */
    --bhc-bg:            var(--ink);
    --bhc-surface:       #201f1d;
    --bhc-surface-2:     #191817;
    --bhc-accent:        var(--wood);
    --bhc-accent-bright: var(--wood-bright);
    --bhc-accent-soft:   var(--wood-soft);
    --bhc-hairline:      rgba(205,175,149,.32);
    --bhc-hairline-soft: rgba(255,255,255,.08);
    --bhc-text:          #F3F1EF;
    --bhc-text-mute:     #AAA6A3;
    --bhc-text-dim:      #6b665e;
    --bhc-danger:        #d98c8c;
    --bhc-success:       #86c79a;

    /* Hairlines contextuales */
    --hair:   rgba(23,23,23,.10);   /* sobre fondo claro */
    --hair-d: rgba(255,255,255,.09); /* sobre fondo oscuro */

    /* Radios / sombras */
    --r-sm: 6px;
    --r:    8px;
    --r-lg: 12px;
    --sh-sm: 0 1px 2px rgba(23,23,23,.06);
    --sh:    0 8px 26px rgba(23,23,23,.10);
    --sh-lg: 0 24px 60px rgba(0,0,0,.5);

    /* Tipografia — Barlow Condensed (condensada en mayusculas: titulos de card,
       precios, botones, labels) + Jost (texto corrido y titulos fantasma).
       --font-serif quedo como ALIAS de body: ya no hay serif en el sistema.
       Se conservan los tres NOMBRES porque gana.css y sorteo.css los heredan. */
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body:    'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif:   var(--font-body);

    /* Titulos fantasma: a un solo paso del fondo. Son textura, no contenido. */
    --ghost-on-ink:   #232221;
    --ghost-on-char:  #302d2b;
    --ghost-on-light: #E4E0DC;

    /* Tracking de la condensada en mayusculas */
    --track:    .18em;
    --track-lg: .26em;

    /* Motivo hexagonal (honeycomb seamless, madera muy tenue) */
    --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23CDAF95' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M14 0l13 7.5v15l-13 7.5L1 22.5v-15L14 0zM14 49l13-7.5V26.5L14 34 1 26.5V41.5L14 49z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Lo define styles.css (la hoja del admin) y lo usa public.js:460 para el aviso
   de dia no laboral. Declarado aca tambien para que funcione en /gana, que no
   carga styles.css, y para poder cortar esa dependencia mas adelante. */
:root { --st-cancelado: #ef4444; }

*, *::before, *::after { box-sizing: border-box; }

/* styles.css pinta html/body de azul oscuro (#0f172a). body.public-layout pisa el
   body pero NO el html: sin esto el rebote de scroll en iOS muestra el azul. */
html { background: var(--ink); }

body.public-layout {
    margin: 0;
    background: var(--white-warm);
    color: var(--charcoal);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.public-layout img { max-width: 100%; display: block; }

/* =====================================================================
   HEADER + NAV
   ===================================================================== */
.pub-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(23,23,23,.68);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease;
}
.pub-header.is-scrolled {
    background: rgba(23,23,23,.97);
    border-bottom-color: var(--wood-line);
}
.pub-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.pub-brand-isologo { display: inline-flex; align-items: center; flex-shrink: 0; }
.pub-brand-img { height: 42px; width: auto; filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }

/* Boton Reservar que queda siempre visible en la barra mobile (fuera del menu) */
.pub-header-reservar { display: none; }

.pub-nav {
    display: flex;
    align-items: center;
    gap: clamp(13px, 1.9vw, 26px);
    flex: 1;
    min-width: 0; /* sin esto los links con nowrap desbordan el contenedor */
}
/* Los links fluyen desde la izquierda; el CTA y "Mi cuenta" se van a la derecha.
   Un solo margin-left:auto (en el CTA) alcanza: el chip lo sigue. */
.pub-nav > .pub-nav-cta { margin-left: auto; }
.pub-nav > a {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track);
    color: var(--gray-light);
    text-decoration: none;
    transition: color .16s ease;
    position: relative;
    padding: 4px 0;
    white-space: nowrap;
}
.pub-nav > a:not(.pub-nav-cta):not(.pub-mi-cuenta-chip):hover { color: var(--wood); }
.pub-nav > a:not(.pub-nav-cta):not(.pub-mi-cuenta-chip)::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: -3px;
    height: 1px; background: var(--wood); transition: right .22s ease;
}
.pub-nav > a:not(.pub-nav-cta):not(.pub-mi-cuenta-chip):hover::after { right: 0; }

/* CTA del nav: pill de contorno, como todos los botones del sistema */
.pub-nav-cta {
    border: 1px solid var(--wood-line);
    color: var(--wood) !important;
    padding: 8px 20px !important;
    border-radius: 999px;
    font-size: 13.5px !important;
    letter-spacing: var(--track-lg) !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pub-nav-cta:hover { background: var(--wood); color: var(--ink) !important; border-color: var(--wood); }
.pub-nav-cta::after { display: none !important; }

.pub-mi-cuenta-chip {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--gray-warm) !important;
    border: 1px solid var(--hair-d);
    padding: 7px 13px; border-radius: 999px;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease;
}
.pub-mi-cuenta-chip:hover { color: var(--wood) !important; border-color: var(--wood-line); }
.pub-mi-cuenta-chip::after { display: none !important; }

/* Hamburguesa (CSS-only) */
.pub-nav-toggle { display: none; }
.pub-nav-burger {
    display: none;
    flex-direction: column; gap: 5px;
    width: 42px; height: 42px;
    margin-left: auto;
    align-items: center; justify-content: center;
    cursor: pointer; border-radius: var(--r-sm);
    border: 1px solid var(--hair-d);
}
.pub-nav-burger span {
    display: block; width: 20px; height: 2px;
    background: var(--gray-light); border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}

/* =====================================================================
   TITULOS FANTASMA — el recurso firma
   Palabra gigante a un solo paso del fondo, que sangra por el borde de la
   seccion. Es TEXTURA, no contenido: va con aria-hidden y el <h2> real sigue
   existiendo. Sin overflow:hidden en la seccion se lleva puesto el layout.
   OJO: no usar en .pub-reserva — el overflow recortaria el desplegable de paises.
   ===================================================================== */
.pub-ghost {
    position: absolute;
    top: clamp(6px, 1.6vw, 26px);
    z-index: 0;
    font-family: var(--font-body);
    font-weight: 900;
    font-size: clamp(62px, 13vw, 186px);
    line-height: .8;
    letter-spacing: -.035em;
    text-transform: lowercase;
    white-space: nowrap;
    pointer-events: none;
    -webkit-user-select: none; user-select: none;
}
.pub-ghost-left  { left:  -.055em; }
.pub-ghost-right { right: -.055em; }
.pub-section-light .pub-ghost { color: var(--ghost-on-light); }
.pub-section-dark  .pub-ghost { color: var(--ghost-on-ink); }

/* =====================================================================
   BANDA DIVISORIA — motivo hexagonal en crema, entre secciones
   ===================================================================== */
.pub-divider {
    height: 54px;
    background: var(--white-warm) var(--hex);
    background-size: 28px 49px;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}

/* =====================================================================
   HERO
   ===================================================================== */
.pub-hero {
    position: relative;
    min-height: 86vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    color: var(--white-warm);
    background: var(--ink);
    overflow: hidden;
    /* Ajustado para que los dos CTA entren arriba del pliegue en un portatil */
    padding: 104px 20px 78px;
}
.pub-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Sin foto: gradiente industrial + motivo hexagonal a escala grande.
   Es el mismo look que ya tenia el proyecto, pero a proposito. */
.pub-hero.is-empty::before {
    background:
        radial-gradient(130% 90% at 50% 8%, var(--charcoal) 0%, var(--ink) 62%),
        var(--hex);
    background-size: auto, 56px 98px;
}
.pub-hero-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(23,23,23,.40) 0%, rgba(23,23,23,.58) 55%, rgba(23,23,23,.90) 100%),
        radial-gradient(120% 80% at 50% 0%, rgba(23,23,23,.12), rgba(23,23,23,.72)),
        var(--hex);
    background-size: auto, auto, 34px 60px;
}
.pub-hero-inner { position: relative; z-index: 2; max-width: 780px; }
.pub-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: var(--track-lg);
    font-size: 14px; font-weight: 600;
    color: var(--wood);
    margin-bottom: 26px;
    padding-left: var(--track-lg);
}
.pub-hero-eyebrow svg { flex-shrink: 0; }
.pub-hero-logo {
    width: min(390px, 74vw);
    height: auto;
    margin: 0 auto 22px;
    display: block;
    filter: drop-shadow(0 6px 30px rgba(0,0,0,.6));
}
/* El h1 real: condensada en mayusculas, muy abierto. Es la linea de oficio. */
.pub-hero-h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(15px, 2.6vw, 19px);
    text-transform: uppercase;
    letter-spacing: .42em;
    color: var(--gray-warm);
    margin: 0 0 18px;
    padding-left: .42em;
}
.pub-hero-tagline {
    font-family: var(--font-body);
    font-size: clamp(19px, 3.4vw, 27px);
    font-weight: 300;
    color: var(--gray-light);
    margin: 0 0 36px;
    letter-spacing: -.01em;
}
.pub-hero-tagline em { font-style: normal; font-weight: 500; color: var(--wood-bright); }
.pub-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pub-hero-scroll {
    position: absolute; z-index: 2; bottom: 26px; left: 50%;
    transform: translateX(-50%);
    color: var(--gray-warm);
    opacity: .7;
    animation: bhc-bob 2.4s ease-in-out infinite;
}

/* =====================================================================
   HERO variante SORTEO (V40)
   =====================================================================
   Todo va bajo .pub-hero-sorteo: sin esa clase el hero de marca queda
   EXACTAMENTE como estaba. Es lo que permite que la home vuelva sola
   cuando cierra la inscripcion, sin tocar una linea.

   El problema a resolver es de ALTURA. El hero centrado ya entraba justo
   (ver la nota de padding en .pub-hero) y esta variante suma un titular,
   una bajada, un ticket, una firma y un microtexto legal. De ahi que el
   logo se achique, que "Barberia en Neuquen" se haya mudado al eyebrow y
   que los interlineados sean mas cortos que en el hero normal.
   ===================================================================== */
.pub-hero-sorteo { padding-top: 72px; padding-bottom: 40px; }
.pub-hero-sorteo .pub-hero-inner { max-width: 860px; }
.pub-hero-sorteo .pub-hero-eyebrow { margin-bottom: 14px; }
.pub-hero-eyebrow-sep { opacity: .5; margin: 0 2px; }
/* Bastante mas chico que en el hero de marca. El isologo es alto en relacion
   a su ancho, asi que cada pixel de ancho cuesta casi uno de alto, y el alto
   es el recurso escaso de este hero: los dos botones tienen que entrar arriba
   del pliegue en una notebook. */
.pub-hero-sorteo .pub-hero-logo { width: min(158px, 40vw); margin-bottom: 11px; }
/* La flecha de scroll queda absoluta al fondo y con este contenido se pisa con
   el microtexto legal. Ademas ya no hace falta: hay dos botones a la vista. */
.pub-hero-sorteo .pub-hero-scroll { display: none; }

.pub-hero-title {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(28px, 4.6vw, 44px);
    line-height: 1.05;
    letter-spacing: -.032em;
    color: var(--white-warm);
    margin: 0 0 11px;
}
/* La segunda linea en madera: parte el titular en "quien sos" / "que ganas"
   y le da el unico golpe de color de la tipografia. */
.pub-hero-title em {
    font-style: normal; font-weight: 500;
    color: var(--wood-bright);
}

.pub-hero-bajada {
    font-family: var(--font-body);
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 300;
    color: var(--gray-light);
    margin: 0 0 17px;
}
.pub-hero-bajada strong { font-weight: 500; color: var(--white-warm); }

.pub-hero-sorteo .pub-hero-cta { margin-top: 22px; }

.pub-hero-firma {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.8vw, 16.5px);
    font-weight: 300;
    color: var(--gray-warm);
    margin: 20px 0 0;
}
.pub-hero-firma em { font-style: normal; font-weight: 500; color: var(--gray-light); }

.pub-hero-legal {
    font-size: 12.5px;
    color: var(--bhc-text-dim);
    margin: 8px 0 0;
}
.pub-hero-legal a {
    color: var(--gray-warm);
    text-decoration: underline; text-underline-offset: 3px;
}
.pub-hero-legal a:hover { color: var(--wood); }

/* ---------------------------------------------------------------------
   EL TICKET
   ---------------------------------------------------------------------
   Un talon de rifa troquelado. Las muescas laterales NO son pseudo-
   elementos tapando el fondo: eso obliga a que el fondo del hero sea un
   color plano, y aca abajo hay una foto o un gradiente. Se recortan de
   verdad con mask-image, asi el hueco deja ver lo que haya atras.
   --------------------------------------------------------------------- */
.pub-ticket {
    --notch: 15px;
    position: relative;
    max-width: 620px;
    margin: 0 auto;
    background:
        linear-gradient(150deg, rgba(57,55,53,.96) 0%, rgba(36,35,35,.97) 100%);
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    box-shadow:
        0 18px 44px rgba(0,0,0,.46),
        inset 0 0 0 1px var(--wood-line);
    -webkit-mask-image:
        radial-gradient(var(--notch) at left 50%,  transparent 98%, #000 100%),
        radial-gradient(var(--notch) at right 50%, transparent 98%, #000 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        radial-gradient(var(--notch) at left 50%,  transparent 98%, #000 100%),
        radial-gradient(var(--notch) at right 50%, transparent 98%, #000 100%);
            mask-composite: intersect;
}
/* El brillo que barre el ticket UNA vez al cargar. Una sola pasada a
   proposito: en loop seria un banner parpadeante y esto es una barberia,
   no un casino. */
.pub-ticket::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg,
        transparent 38%, rgba(205,175,149,.16) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: bhc-ticket-shine 1.5s cubic-bezier(.22,.61,.36,1) 1.1s 1 forwards;
    pointer-events: none;
}
@keyframes bhc-ticket-shine {
    to { transform: translateX(120%); }
}

.pub-ticket-head {
    display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
    padding: 12px 20px 10px;
    border-bottom: 1px dashed var(--wood-line);
}
.pub-ticket-kicker {
    font-family: var(--font-display); font-weight: 600;
    font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--track-lg);
    color: var(--gray-warm);
}
.pub-ticket-premio {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(20px, 3.4vw, 27px);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--wood-bright);
}

.pub-ticket-list {
    display: grid; grid-template-columns: repeat(3, 1fr);
    margin: 0; padding: 0; list-style: none;
}
.pub-ticket-list li {
    padding: 11px 12px 12px;
    text-align: center;
}
/* El perforado del troquel entre chance y chance. */
.pub-ticket-list li + li { border-left: 1px dashed rgba(205,175,149,.30); }

.pub-ticket-n {
    display: block;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(30px, 5vw, 40px); line-height: .92;
    letter-spacing: -.01em;
    color: var(--wood);
}
.pub-ticket-txt {
    display: block; margin-top: 5px;
    font-family: var(--font-body); font-weight: 300;
    font-size: 13px; line-height: 1.35;
    color: var(--gray-light);
}

/* El pie del ticket: la letra chica del talon. Va dentro de la card, no
   suelta debajo, porque es una condicion DE las chances, no del sorteo. */
.pub-ticket-nota {
    margin: 0;
    padding: 8px 16px 10px;
    border-top: 1px dashed rgba(205,175,149,.30);
    font-family: var(--font-body); font-weight: 300;
    font-size: 12.5px; line-height: 1.4;
    text-align: center;
    /* Legible a proposito, no gris decorativo: es la condicion que evita que
       "+2 reservar turno" se lea como que alcanza con sacar el turno. */
    color: var(--gray-warm);
}

/* ---- Entrada escalonada ---- */
.pub-hero-sorteo .pub-hero-eyebrow,
.pub-hero-sorteo .pub-hero-logo,
.pub-hero-sorteo .pub-hero-title,
.pub-hero-sorteo .pub-hero-bajada,
.pub-hero-sorteo .pub-ticket,
.pub-hero-sorteo .pub-hero-cta,
.pub-hero-sorteo .pub-hero-firma,
.pub-hero-sorteo .pub-hero-legal {
    animation: bhc-hero-in .72s cubic-bezier(.22,.61,.36,1) both;
}
.pub-hero-sorteo .pub-hero-eyebrow { animation-delay: .05s; }
.pub-hero-sorteo .pub-hero-logo    { animation-delay: .13s; }
.pub-hero-sorteo .pub-hero-title   { animation-delay: .22s; }
.pub-hero-sorteo .pub-hero-bajada  { animation-delay: .30s; }
.pub-hero-sorteo .pub-ticket       { animation-delay: .40s; }
.pub-hero-sorteo .pub-hero-cta     { animation-delay: .50s; }
.pub-hero-sorteo .pub-hero-firma   { animation-delay: .58s; }
.pub-hero-sorteo .pub-hero-legal   { animation-delay: .64s; }

@keyframes bhc-hero-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Sin animaciones: el contenido tiene que quedar visible igual. `both`
   arrancaria en opacity 0 y sin animacion se quedaria invisible. */
@media (prefers-reduced-motion: reduce) {
    .pub-hero-sorteo .pub-hero-eyebrow,
    .pub-hero-sorteo .pub-hero-logo,
    .pub-hero-sorteo .pub-hero-title,
    .pub-hero-sorteo .pub-hero-bajada,
    .pub-hero-sorteo .pub-ticket,
    .pub-hero-sorteo .pub-hero-cta,
    .pub-hero-sorteo .pub-hero-firma,
    .pub-hero-sorteo .pub-hero-legal { animation: none; }
    .pub-ticket::after { animation: none; opacity: 0; }
}

/* ---- Celular ---- */
@media (max-width: 560px) {
    .pub-hero-sorteo { padding-top: 78px; padding-bottom: 52px; }
    .pub-hero-sorteo .pub-hero-logo { width: min(210px, 52vw); margin-bottom: 16px; }
    .pub-ticket { --notch: 12px; }
    .pub-ticket-head { padding: 13px 16px 11px; gap: 8px; }
    /* Tres columnas a 390px dejan los rotulos en tres renglones cada uno.
       En fila apilada se leen de un vistazo y el troquel pasa a horizontal. */
    .pub-ticket-list { grid-template-columns: 1fr; }
    .pub-ticket-list li {
        display: flex; align-items: baseline; gap: 12px;
        text-align: left; padding: 11px 18px;
    }
    .pub-ticket-list li + li {
        border-left: 0;
        border-top: 1px dashed rgba(205,175,149,.30);
    }
    .pub-ticket-n { font-size: 30px; min-width: 48px; }
    .pub-ticket-txt { margin-top: 0; font-size: 14px; }
    .pub-hero-sorteo .pub-hero-cta { margin-top: 22px; }
    .pub-hero-sorteo .pub-hero-cta .pub-btn { width: 100%; }
}

/* =====================================================================
   BOTONES — pill de contorno, condensada en mayusculas con tracking.
   Nunca rellenos en reposo: se rellenan de madera al hover.
   ===================================================================== */
.pub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: var(--track-lg);
    text-transform: uppercase;
    padding: 14px 34px;
    border-radius: 999px;
    border: 1px solid var(--wood-line);
    background: transparent;
    cursor: pointer; text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pub-btn-primary { color: var(--ink); border-color: var(--ink); }
.pub-btn-primary:hover { background: var(--ink); color: var(--white-warm); transform: translateY(-2px); }
.pub-btn-ghost { color: var(--gray-med); border-color: var(--hair); }
.pub-btn-ghost:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }

/* Sobre fondo oscuro el primario se dibuja en madera */
.pub-hero .pub-btn-primary,
.pub-section-dark .pub-btn-primary,
.pub-reserva .pub-btn-primary {
    color: var(--wood); border-color: var(--wood-line);
}
.pub-hero .pub-btn-primary:hover,
.pub-section-dark .pub-btn-primary:hover,
.pub-reserva .pub-btn-primary:hover {
    background: var(--wood); color: var(--ink); border-color: var(--wood);
}
.pub-hero .pub-btn-ghost,
.pub-section-dark .pub-btn-ghost { color: var(--gray-light); border-color: rgba(243,241,239,.28); }
.pub-hero .pub-btn-ghost:hover,
.pub-section-dark .pub-btn-ghost:hover { color: var(--white); border-color: var(--white-warm); background: transparent; }

/* =====================================================================
   SECCIONES (light / dark) + cabeceras
   ===================================================================== */
.pub-section {
    position: relative;
    padding: clamp(64px, 9.5vw, 124px) 20px;
    overflow: hidden; /* recorta el titulo fantasma que sangra */
}
.pub-section-tight { padding-bottom: clamp(0px, 2vw, 24px); }
.pub-section-light { background: var(--white-warm); color: var(--charcoal); }
.pub-section-dark  { background: var(--ink); color: var(--white-warm); }
.pub-section-dark::before,
.pub-reserva::before {
    content: ''; position: absolute; inset: 0;
    background: var(--hex); background-size: 34px 60px;
    opacity: .5; pointer-events: none;
}
.pub-wrap { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; }

.pub-section-head { max-width: 640px; margin: 0 0 clamp(38px, 5vw, 62px); }
.pub-kicker {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: var(--track-lg);
    font-size: 14px; font-weight: 600; color: var(--wood);
    margin-bottom: 12px;
}
/* El titulo real de seccion: geometrica, grande, en minusculas. Contrasta con
   la condensada en mayusculas de las cards. */
.pub-section-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(32px, 5.6vw, 54px);
    line-height: 1.02;
    letter-spacing: -.03em;
    margin: 0;
    color: var(--ink);
}
.pub-title-light { color: var(--white); }
.pub-section-dark .pub-section-title,
.pub-reserva .pub-section-title { color: var(--white); }
.pub-section-sub {
    margin: 14px 0 0;
    color: var(--gray-med);
    font-size: 16px;
    font-weight: 300;
    max-width: 52ch;
}
.pub-sub-light,
.pub-section-dark .pub-section-sub,
.pub-reserva .pub-section-sub { color: var(--gray-warm); }
.pub-section-light .pub-kicker,
.pub-contact-info .pub-kicker { color: var(--wood-deep); }

/* La seccion de reserva mantiene su cabecera centrada */
.pub-reserva .pub-section-head { margin-left: auto; margin-right: auto; text-align: center; }

/* =====================================================================
   SERVICIOS — card vertical: icono / regla / nombre / meta / precio / CTA
   ===================================================================== */
/* Mismo criterio que la grilla de barberos: auto-fill para que desactivar
   servicios no infle las cards que quedan. */
.pub-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(14px, 2.2vw, 26px);
}
.pub-svc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--hair);
    border-radius: 0;
    padding: 34px 16px 30px;
    transition: transform .2s ease;
}
.pub-svc-card:hover { transform: translateY(-3px); }
.pub-svc-ico {
    width: 46px; height: 46px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
    color: var(--wood-deep);
    border: 0; background: none;
}
.pub-svc-ico, .pub-exp-ico, .pub-contact-ico { position: relative; }
.pub-svc-ico > svg, .pub-exp-ico > svg, .pub-contact-ico > svg {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
/* La regla fina bajo el icono, marca de la casa */
.pub-svc-rule {
    display: block; width: 58px; height: 1px;
    background: var(--wood-line);
    margin: 14px 0 20px;
}
.pub-svc-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(21px, 2.6vw, 27px);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0; color: var(--ink); line-height: 1.1;
}
.pub-svc-meta {
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-size: 14.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--gray-med);
    display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: center;
}
.pub-svc-combo, .pub-svc-top {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
    padding: 2px 9px; border-radius: 999px;
}
.pub-svc-combo { background: var(--graphite); color: var(--white-warm); }
.pub-svc-top   { background: var(--wood); color: var(--ink); }
/* Precio flanqueado por guiones: el gesto que fija la jerarquia de la card */
.pub-svc-price { margin-top: 18px; white-space: nowrap; }
.pub-svc-price strong {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: .02em;
}
.pub-svc-price strong::before { content: '\2014\00a0'; color: var(--wood-deep); }
.pub-svc-price strong::after  { content: '\00a0\2014'; color: var(--wood-deep); }
.pub-svc-price-old {
    display: block; margin-bottom: 2px;
    font-family: var(--font-display);
    font-size: 16px; color: var(--gray-warm); text-decoration: line-through;
}
.pub-svc-cta {
    margin-top: 20px;
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-lg);
    color: var(--gray-med); text-decoration: none;
    border: 1px solid var(--hair);
    border-radius: 999px;
    padding: 9px 24px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pub-svc-cta:hover { background: var(--ink); color: var(--white-warm); border-color: var(--ink); }
.pub-svc-nota {
    margin: clamp(26px, 4vw, 40px) 0 0;
    text-align: center;
    font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: var(--track);
    font-size: 14px; color: var(--wood-deep);
}

/* =====================================================================
   EXPERIENCIA (editorial texto + imagen)
   ===================================================================== */
.pub-exp {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.pub-exp-text .pub-kicker { color: var(--wood); }
.pub-exp-text .pub-section-title { color: var(--white); text-align: left; }
.pub-exp-lead { color: var(--gray-warm); font-size: 17px; font-weight: 300; margin: 18px 0 30px; max-width: 46ch; }
.pub-exp-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 18px; }
.pub-exp-list li { display: flex; gap: 14px; align-items: flex-start; }
.pub-exp-ico {
    flex-shrink: 0; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
    border-radius: 999px;
    border: 1px solid var(--wood-line);
    color: var(--wood);
    margin-top: 1px;
}
.pub-exp-list strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 600; font-size: 17px;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--white-warm);
}
.pub-exp-list span { display: block; font-size: 14.5px; font-weight: 300; color: var(--gray-med); margin-top: 2px; }
.pub-exp-media {
    position: relative;
    min-height: 460px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background-image: var(--exp-img);
    background-size: cover; background-position: center;
    border: 1px solid var(--hair-d);
}
/* Sin foto: panel de textura, no un hueco */
.pub-exp-media.is-empty {
    background:
        linear-gradient(155deg, var(--charcoal) 0%, var(--ink) 100%),
        var(--hex);
    background-size: auto, 40px 70px;
    border-color: var(--wood-line);
}
.pub-exp-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(23,23,23,0) 40%, rgba(23,23,23,.7));
}
.pub-exp-media.is-empty::after { background: none; }
.pub-exp-badge {
    position: absolute; left: 20px; bottom: 18px; z-index: 2;
    font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: var(--track);
    font-size: 16px; font-weight: 600; color: var(--white-warm);
    border-left: 2px solid var(--wood); padding-left: 12px;
}

/* =====================================================================
   BARBEROS — retrato 3:4 uniforme con tratamiento duotono, para que
   CUALQUIER foto que suban despues se vea homogenea.
   ===================================================================== */
/* auto-fill, NO auto-fit: con auto-fit un solo barbero se estira a los 1120px
   del contenedor y, con aspect-ratio 3/4, da un retrato de ~1500px de alto.
   auto-fill conserva el ancho de pista aunque sobren columnas vacias. */
.pub-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(16px, 2.6vw, 30px);
}
.pub-team-card {
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.pub-team-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    margin: 0 0 16px;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--graphite);
    display: grid; place-items: center;
    border: 1px solid var(--hair);
    box-shadow: none;
}
.pub-team-photo img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) contrast(1.06);
    transition: filter .4s ease, transform .5s ease;
}
/* Tinte madera por mezcla: unifica retratos de origenes distintos */
.pub-team-photo::after {
    content: ''; position: absolute; inset: 0;
    background: var(--wood); mix-blend-mode: color;
    opacity: .2; pointer-events: none;
    transition: opacity .4s ease;
}
.pub-team-card:hover .pub-team-photo img { filter: grayscale(.1) contrast(1.02); transform: scale(1.035); }
.pub-team-card:hover .pub-team-photo::after { opacity: 0; }
/* Sin foto: monograma sobre grafito + motivo hexagonal */
.pub-team-photo.is-empty {
    background: linear-gradient(160deg, var(--graphite) 0%, var(--charcoal) 100%), var(--hex);
    background-size: auto, 32px 56px;
    border-color: var(--wood-line);
}
.pub-team-photo.is-empty::after { display: none; }
.pub-team-initials {
    font-family: var(--font-display);
    font-size: clamp(44px, 7vw, 64px);
    color: var(--wood); font-weight: 700;
    letter-spacing: .08em;
}
.pub-team-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(21px, 2.5vw, 26px);
    text-transform: uppercase; letter-spacing: .05em;
    margin: 0; color: var(--ink); line-height: 1.1;
}
.pub-team-role {
    margin: 5px 0 16px;
    font-family: var(--font-display);
    font-size: 14px; text-transform: uppercase;
    letter-spacing: var(--track); color: var(--gray-warm);
}
.pub-team-cta {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-lg);
    color: var(--gray-med); text-decoration: none;
    border: 1px solid var(--hair);
    padding: 9px 24px; border-radius: 999px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pub-team-cta:hover { border-color: var(--ink); color: var(--white-warm); background: var(--ink); }

/* =====================================================================
   GALERIA — mosaico a sangre completa
   ===================================================================== */
.pub-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(150px, 20vw, 230px);
    gap: 10px;
    margin-top: clamp(28px, 4vw, 48px);
    padding: 0 10px;
}
.pub-gal-tile {
    position: relative;
    border-radius: var(--r-sm);
    overflow: hidden;
    background-color: var(--graphite);
    background-image: var(--g-img);
    background-size: cover; background-position: center;
    border: 1px solid var(--hair-d);
    transition: transform .35s ease;
}
.pub-gal-tile::after {
    content: ''; position: absolute; inset: 0;
    background: var(--hex); background-size: 28px 49px; opacity: .35;
    mix-blend-mode: overlay;
    transition: opacity .3s ease;
}
.pub-gal-tile:hover { transform: scale(1.012); }
.pub-gal-tile:hover::after { opacity: 0; }
.pub-gal-tile-lg { grid-column: span 2; grid-row: span 2; }
/* Sin foto: laminas alternadas con el motivo. Se lee como un patron
   deliberado, no como imagenes rotas. */
.pub-gal-tile.is-empty {
    background: linear-gradient(150deg, var(--charcoal) 0%, var(--ink) 100%), var(--hex);
    background-size: auto, 30px 53px;
    border-color: rgba(205,175,149,.16);
}
.pub-gal-tile.is-empty:nth-child(even) {
    background: linear-gradient(150deg, var(--graphite) 0%, var(--charcoal) 100%), var(--hex);
    background-size: auto, 30px 53px;
}
.pub-gal-tile.is-empty::after { display: none; }
.pub-gal-tile.is-empty:hover { transform: none; }
/* El tile grande vacio lleva el isologo, para que el mosaico tenga un foco */
.pub-gal-tile-lg.is-empty::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../img/isologo.png') center / min(52%, 220px) no-repeat;
    opacity: .16;
}

/* =====================================================================
   SCROLL REVEAL — lo aplica assets/js/reveal.js agregando .is-in.
   Sin JS (o con reduced-motion) todo queda visible: el estado base del
   .reveal solo se activa cuando el script marca el <html>.
   ===================================================================== */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   RESERVA (seccion oscura que contiene el wizard)
   ===================================================================== */
.pub-reserva {
    position: relative;
    background: var(--charcoal);
    color: var(--white-warm);
    padding: clamp(58px, 9vw, 108px) 20px;
    border-top: 1px solid var(--hair-d);
    border-bottom: 1px solid var(--hair-d);
}
.pub-main { max-width: 640px; margin: 0 auto; }

/* Tarjeta del formulario */
.pub-form-card {
    position: relative;
    background: linear-gradient(180deg, var(--bhc-surface), var(--bhc-surface-2));
    border: 1px solid var(--hair-d);
    border-radius: var(--r-lg);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: var(--sh-lg);
}
.pub-form-card::before {
    content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
    background: linear-gradient(to right, transparent, var(--wood-line), transparent);
}
.pub-form-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(24px, 4vw, 32px);
    text-align: center; margin: 0 0 6px; color: var(--white);
}
.pub-form-sub { text-align: center; color: var(--bhc-text-mute); margin: 0 0 20px; }
.pub-error {
    background: rgba(217,140,140,.1);
    border: 1px solid rgba(217,140,140,.4);
    color: #e8b4b4;
    border-radius: var(--r);
    padding: 12px 14px; margin-bottom: 18px; font-size: 14px;
}

/* Progress */
.pub-progress { display: flex; gap: 6px; margin: 18px 0 8px; }
.pub-progress-seg {
    flex: 1; height: 3px; border-radius: 999px;
    background: rgba(255,255,255,.10); overflow: hidden; position: relative;
}
.pub-progress-seg::after {
    content: ''; position: absolute; inset: 0;
    background: var(--wood);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
}
.pub-progress-seg.is-active::after { transform: scaleX(1); }
.pub-progress-seg.is-done::after { transform: scaleX(1); background: var(--gray-med); }
.pub-step-label {
    text-align: center; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bhc-text-mute); margin-bottom: 14px; min-height: 14px;
}
/* El usuario no quiere ver el indicador de pasos ("Paso 2 de 6") en el wizard */
.pub-progress, .pub-step-label { display: none !important; }

/* Steps */
.pub-step {
    padding-top: 18px; margin-top: 18px;
    border-top: 1px solid var(--hair-d);
    animation: bhc-step-reveal .32s ease both;
}
.pub-step[data-step="1"] { border-top: 0; padding-top: 0; margin-top: 0; }
.pub-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pub-step-num { display: none; }
.pub-step-head h3 {
    font-family: var(--font-serif);
    font-weight: 600; font-size: 21px; margin: 0; color: var(--white-warm);
    letter-spacing: .01em;
}

/* Fields */
.pub-fields { display: grid; gap: 16px; }
.pub-field { display: grid; gap: 6px; }
.pub-field label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pub-input {
    width: 100%;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--hair-d);
    border-radius: var(--r);
    color: var(--white-warm);
    font-family: var(--font-body); font-size: 16px;
    padding: 14px 15px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.pub-input::placeholder { color: var(--bhc-text-dim); }
.pub-input:focus {
    outline: none;
    border-color: var(--wood);
    background: rgba(205,175,149,.05);
    box-shadow: 0 0 0 3px var(--wood-soft);
}
.pub-input-date::-webkit-calendar-picker-indicator { filter: invert(.7); }
.pub-hint { font-size: 12.5px; color: var(--bhc-text-mute); }

/* Sexo (solo /gana): dos chips de radio.
   OJO con `.pub-field label`, que arriba esta oculto para lectores de pantalla
   (en este wizard el texto lo lleva el placeholder). Los <label> de las opciones
   viven DENTRO de un .pub-field, asi que heredan ese clip y quedan invisibles:
   por eso el reset explicito. Y como no hay placeholder donde poner el titulo
   del grupo, este va en un <span> aparte que si se ve. */
.pub-sexo-label {
    font-family: var(--font-body); font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--track);
    color: var(--bhc-text-dim);
}
.pub-sexo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pub-field .pub-sexo-opt {
    position: static; width: auto; height: auto; padding: 13px 10px; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--hair-d);
    border-radius: var(--r);
    color: var(--bhc-text-dim);
    font-family: var(--font-body); font-size: 14px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.pub-sexo-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pub-field .pub-sexo-opt:hover { border-color: var(--wood-soft); color: var(--white-warm); }
.pub-field .pub-sexo-opt:has(input:checked) {
    border-color: var(--wood);
    background: rgba(205,175,149,.09);
    color: var(--white-warm);
    font-weight: 500;
}
/* Fallback para navegadores sin :has() — el foco por teclado tiene que verse
   igual, si no el campo es inusable sin mouse. */
.pub-field .pub-sexo-opt:focus-within {
    border-color: var(--wood);
    box-shadow: 0 0 0 3px var(--wood-soft);
}
.pub-required-mark { color: var(--wood); }
.pub-date-native[hidden] { display: none !important; }

/* Boton de paso (Continuar) + confirmar: madera (unico acento funcional) */
.pub-step-btn.btn,
.pub-step-btn {
    width: 100%;
    background: var(--wood) !important;
    color: var(--ink) !important;
    border: 1px solid var(--wood) !important;
    font-family: var(--font-body); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
    padding: 14px 18px; border-radius: var(--r);
    cursor: pointer; transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pub-step-btn:hover { background: var(--wood-bright) !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(205,175,149,.2); }

/* Tel group + country picker */
.pub-tel-group { display: flex; gap: 8px; position: relative; }
.pub-country-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--hair-d);
    border-radius: var(--r);
    color: var(--white-warm);
    padding: 0 12px; font-size: 15px; cursor: pointer; white-space: nowrap;
    transition: border-color .16s ease;
}
.pub-country-btn:hover { border-color: var(--wood-line); }
.pub-country-flag { font-size: 18px; line-height: 1; }
.pub-country-dial { font-size: 14px; color: var(--bhc-text-mute); }
.pub-country-caret { font-size: 10px; color: var(--bhc-text-dim); }
.pub-input-tel { flex: 1; }
.pub-country-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    width: min(320px, 88vw);
    background: #201f1d;
    border: 1px solid var(--hair-d);
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    padding: 8px; max-height: 320px; overflow: auto;
}
.pub-country-dropdown[hidden] { display: none; }
.pub-country-search {
    width: 100%; background: rgba(255,255,255,.04);
    border: 1px solid var(--hair-d); border-radius: var(--r-sm);
    color: var(--white-warm); padding: 9px 11px; font-size: 14px; margin-bottom: 6px;
}
.pub-country-search:focus { outline: none; border-color: var(--wood); }
.pub-country-list { list-style: none; margin: 0; padding: 0; }
.pub-country-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px;
}
.pub-country-item:hover { background: rgba(205,175,149,.1); }
.pub-country-item-flag { font-size: 17px; }
.pub-country-item-name { flex: 1; color: var(--white-warm); }
.pub-country-item-dial { color: var(--bhc-text-mute); font-size: 13px; }
.pub-country-item-empty { padding: 12px; text-align: center; color: var(--bhc-text-dim); font-size: 13px; }

/* Cards (servicios / barberos del wizard) */
.pub-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.pub-card {
    position: relative; text-align: left;
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--hair-d);
    border-radius: var(--r);
    color: var(--white-warm);
    padding: 15px 15px 16px; cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
    font-family: var(--font-body);
}
.pub-card:hover { border-color: var(--wood-line); background: rgba(205,175,149,.05); transform: translateY(-2px); }
.pub-card:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.pub-card.is-selected {
    border-color: var(--wood);
    background: rgba(205,175,149,.12);
    box-shadow: 0 0 0 1px var(--wood) inset, 0 10px 26px rgba(0,0,0,.35);
}
.pub-card-title { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--white); line-height: 1.15; }
.pub-card-meta { font-size: 13px; color: var(--bhc-text-mute); }
.pub-card-precio-old { color: var(--bhc-text-dim); text-decoration: line-through; margin-right: 4px; }
.pub-card-tag, .pub-card-any-badge {
    position: absolute; top: -9px; left: 12px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    background: var(--wood); color: var(--ink);
    padding: 3px 8px; border-radius: 999px;
}
.pub-card-combo-chip {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    background: var(--graphite); color: var(--gray-light);
    padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
}
.pub-card-discount { display: flex; flex-direction: column; margin-top: 4px; }
.pub-card-discount-precio { font-family: var(--font-serif); font-size: 18px; color: var(--wood-bright); font-weight: 600; }
.pub-card-discount-leyenda { font-size: 11px; color: var(--bhc-text-mute); }

/* Barberos */
.pub-cards-barberos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pub-card-barbero { align-items: center; text-align: center; }
.pub-card-avatar, .pub-card-avatar-fallback {
    width: 64px; height: 64px; border-radius: 999px; margin-bottom: 4px;
    object-fit: cover; border: 1px solid var(--gray-light);
    box-shadow: 0 0 0 4px var(--wood-soft);
}
.pub-card-avatar-fallback {
    display: grid; place-items: center;
    background: var(--graphite); color: var(--wood);
    font-family: var(--font-display); font-size: 24px; font-weight: 600;
}
.pub-card-barbero .pub-card-title, .pub-card-any .pub-card-title { font-size: 16px; }
.pub-card-any {
    background: linear-gradient(180deg, rgba(205,175,149,.1), rgba(205,175,149,.03));
    border-color: var(--wood-line);
}

/* Dias */
.pub-days { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-day {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--hair-d);
    border-radius: 999px;
    color: var(--white-warm);
    padding: 10px 16px; font-size: 13.5px; cursor: pointer;
    font-family: var(--font-body);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.pub-day:hover { border-color: var(--wood-line); transform: translateY(-1px); }
.pub-day:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.pub-day.is-selected { background: var(--wood); border-color: var(--wood); color: var(--ink); font-weight: 600; }

/* Slots */
.pub-slots { display: block; }
.pub-slots-empty, .pub-slots-loading, .pub-slots-none {
    font-family: var(--font-serif); font-style: italic;
    color: var(--bhc-text-mute); font-size: 15px; padding: 8px 0;
}
.pub-slots-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.pub-slots-franja {
    width: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wood); margin: 12px 0 4px; font-weight: 600;
}
.pub-slot {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--hair-d);
    border-radius: var(--r);
    color: var(--white-warm);
    padding: 10px 15px; font-size: 14px; cursor: pointer;
    font-family: var(--font-body);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.pub-slot:hover { border-color: var(--wood-line); transform: translateY(-1px); }
.pub-slot:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.pub-slot.is-selected { background: var(--wood); border-color: var(--wood); color: var(--ink); font-weight: 700; }

/* Club / cortes previos */
.pub-club-msg {
    background: rgba(205,175,149,.08);
    border: 1px solid var(--wood-line);
    border-radius: var(--r);
    padding: 12px 14px; font-size: 14px; color: var(--gray-light); margin-bottom: 12px;
}
.pub-cuenta-link { margin-bottom: 12px; }
.pub-cuenta-link a { color: var(--wood); font-weight: 600; text-decoration: none; font-size: 14px; }
.pub-cuenta-link a:hover { text-decoration: underline; }
.pub-cortes-prev { margin-bottom: 14px; }
.pub-cortes-titulo { font-family: var(--font-serif); font-style: italic; color: var(--bhc-text-mute); margin: 0 0 8px; }
.pub-cortes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pub-corte-item {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--hair-d);
    border-radius: var(--r); padding: 10px 12px; font-size: 13.5px;
}
.pub-corte-item--top { background: linear-gradient(180deg, rgba(205,175,149,.1), rgba(205,175,149,.03)); border-color: var(--wood-line); }
.pub-corte-repetir {
    background: transparent; border: 1px solid var(--hair-d); border-radius: var(--r-sm);
    color: var(--white-warm); padding: 7px 12px; font-size: 12px; cursor: pointer;
    text-transform: uppercase; letter-spacing: .05em; transition: all .16s ease;
}
.pub-corte-repetir:hover { border-color: var(--wood); color: var(--wood); }
.pub-corte-repetir--hero { background: var(--wood); color: var(--ink); border-color: var(--wood); font-weight: 700; }
.pub-corte-repetir--hero:hover { background: var(--wood-bright); color: var(--ink); }

/* Resumen */
.pub-resumen { display: none; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair-d); }
.pub-resumen:has(.pub-confirmar:not(:disabled)) { display: block; animation: bhc-fade-in .3s ease both; }
.pub-resumen-items { display: grid; gap: 8px; margin-bottom: 14px; }
.pub-resumen-item { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pub-resumen-item-label { color: var(--bhc-text-mute); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.pub-resumen-item-value { font-family: var(--font-serif); font-size: 16px; color: var(--white-warm); text-align: right; }
.pub-resumen-edit {
    background: none; border: none; color: var(--wood); font-size: 11px; cursor: pointer;
    text-transform: uppercase; letter-spacing: .05em; margin-left: 8px; padding: 0;
}
.pub-resumen-edit:hover { text-decoration: underline; }
.pub-trust { text-align: center; font-size: 12px; color: var(--bhc-text-mute); margin: 0 0 14px; }
.pub-confirmar.btn, .pub-confirmar {
    width: 100%;
    background: var(--wood) !important; color: var(--ink) !important;
    border: 1px solid var(--wood) !important;
    font-family: var(--font-body); font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; font-size: 14px;
    padding: 16px; border-radius: var(--r); cursor: pointer;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pub-confirmar:hover:not(:disabled) { background: var(--wood-bright) !important; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(205,175,149,.24); }
.pub-confirmar:disabled { opacity: .4; cursor: not-allowed; }

.pub-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* =====================================================================
   SUCCESS CARD
   ===================================================================== */
.pub-success-card {
    position: relative;
    background: linear-gradient(180deg, var(--bhc-surface), var(--bhc-surface-2));
    border: 1px solid var(--hair-d);
    border-radius: var(--r-lg);
    padding: clamp(28px, 5vw, 44px);
    text-align: center; color: var(--white-warm);
    box-shadow: var(--sh-lg);
}
.pub-success-card::before {
    content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
    background: linear-gradient(to right, transparent, var(--wood), transparent);
}
.pub-success-icon {
    width: 76px; height: 76px; margin: 0 auto 16px;
    display: grid; place-items: center; border-radius: 999px;
    background: rgba(134,199,154,.12); color: var(--bhc-success);
    border: 1px solid rgba(134,199,154,.35);
}
.pub-success-card h2 { font-family: var(--font-serif); font-weight: 600; font-size: 28px; margin: 0 0 4px; color: var(--white); }
.pub-success-sub { color: var(--bhc-text-mute); margin: 0 0 20px; }
.pub-success-detail { display: grid; gap: 10px; text-align: left; margin: 0 auto 18px; max-width: 340px; }
.pub-success-detail > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--hair-d); padding-bottom: 8px; }
.pub-success-label { color: var(--bhc-text-mute); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.pub-success-detail strong { font-family: var(--font-serif); font-size: 16px; }
.pub-success-note { font-size: 13.5px; color: var(--bhc-text-mute); margin: 0 0 18px; }
.pub-success-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.pub-success-action {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--hair-d); border-radius: var(--r);
    padding: 11px 16px; font-size: 13px; text-decoration: none; color: var(--white-warm);
    transition: all .16s ease;
}
.pub-success-action:hover { border-color: var(--wood); color: var(--wood); }
.pub-success-action-wa { background: #25d366; color: #06281a; border-color: #25d366; font-weight: 700; }
.pub-success-action-wa:hover { background: #1fb857; color: #06281a; border-color: #1fb857; }
.pub-success-cta {
    display: inline-block; background: var(--wood); color: var(--ink);
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
    padding: 14px 28px; border-radius: var(--r); text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}
.pub-success-cta:hover { background: var(--wood-bright); transform: translateY(-2px); }

/* =====================================================================
   UBICACION / CONTACTO
   ===================================================================== */
.pub-contact {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 60px); align-items: center;
}
.pub-contact-info .pub-section-title { text-align: left; color: var(--ink); }
.pub-contact-list { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 16px; }
.pub-contact-list li { display: flex; gap: 13px; align-items: flex-start; }
.pub-contact-ico {
    flex-shrink: 0; width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
    border-radius: 999px;
    background: var(--wood-soft); color: var(--wood-deep); border: 1px solid var(--wood-line);
}
.pub-contact-list strong { display: block; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-med); }
.pub-contact-list span, .pub-contact-list a { display: block; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.pub-contact-list a:hover { color: var(--gray-med); text-decoration: underline; }
.pub-contact-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.pub-contact-map {
    border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--gray-light);
    box-shadow: var(--sh); min-height: 320px; background: var(--gray-light);
}
.pub-contact-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(.3) contrast(1.02); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.pub-footer { background: var(--ink); color: var(--gray-warm); position: relative; }
.pub-footer::before { content: ''; position: absolute; inset: 0; background: var(--hex); background-size: 34px 60px; opacity: .35; pointer-events: none; }
.pub-footer-inner {
    position: relative; z-index: 1;
    max-width: 1120px; margin: 0 auto;
    padding: clamp(40px, 6vw, 66px) 20px 30px;
    display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 34px;
}
.pub-footer-logo { height: 52px; width: auto; margin-bottom: 14px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.pub-footer-slogan { font-family: var(--font-serif); font-size: 17px; color: var(--gray-light); max-width: 30ch; margin: 0; }
.pub-footer-slogan em { font-style: italic; color: var(--wood); }
.pub-footer-links { display: grid; gap: 9px; align-content: start; }
.pub-footer-links a { color: var(--gray-warm); text-decoration: none; font-size: 14px; transition: color .16s ease; width: fit-content; }
.pub-footer-links a:hover { color: var(--wood); }
.pub-footer-info { font-size: 13px; color: var(--gray-med); margin: 0 0 14px; line-height: 1.7; }
.pub-footer-social { display: flex; gap: 10px; }
.pub-footer-social a {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--hair-d); border-radius: 999px; color: var(--gray-warm);
    transition: all .16s ease;
}
.pub-footer-social a:hover { border-color: var(--wood); color: var(--wood); transform: translateY(-2px); }
.pub-footer-bottom {
    position: relative; z-index: 1;
    border-top: 1px solid var(--hair-d);
    max-width: 1120px; margin: 0 auto; padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 12.5px; color: var(--gray-med);
}
.pub-footer-admin { color: var(--gray-med); text-decoration: none; }
.pub-footer-admin:hover { color: var(--wood); }

/* =====================================================================
   WHATSAPP FAB
   ===================================================================== */
.pub-fab-wa {
    position: fixed; right: 18px; bottom: 18px; z-index: 90;
    width: 56px; height: 56px; border-radius: 999px;
    background: #25d366; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(37,211,102,.4);
    animation: bhc-fab-pulse 2.6s ease-in-out infinite;
}
.pub-fab-wa svg { width: 30px; height: 30px; }

/* =====================================================================
   MI CUENTA (cliente) — fondo negro, cards blancas.
   Redisenada 2026-07-31 con el mismo sistema que la home: condensada en
   mayusculas para titulos y numerales, geometrica para texto, pills de
   contorno. El fondo oscuro con tarjetas claras se conserva: es lo que
   separa el area privada del sitio publico de un vistazo.
   ===================================================================== */
/* Fondo negro de la pagina: es lo que hace que las tarjetas blancas se lean
   como area privada. Sin esta regla el <body> hereda el crema de .public-layout
   y los titulos claros quedan invisibles. */
body.public-layout.mi-cuenta-page { background: var(--ink); color: var(--white-warm); }

.pub-header--static { position: static; background: var(--ink); border-bottom: 1px solid var(--wood-line); }
.pub-back-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gray-light); text-decoration: none;
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--track);
    transition: color .16s ease;
}
.pub-back-link:hover { color: var(--wood); }
.pub-cuenta-reservar {
    margin-left: auto;
    display: inline-flex; align-items: center;
    background: transparent; color: var(--wood);
    border: 1px solid var(--wood-line); border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600; text-transform: uppercase; letter-spacing: var(--track); font-size: 14px;
    padding: 8px 20px; text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.pub-cuenta-reservar:hover { background: var(--wood); color: var(--ink); }

.cuenta-main { max-width: 660px; margin: 0 auto; padding: 34px 20px 64px; }
.cuenta-brand { text-align: center; margin-bottom: 22px; }
/* Sin box-shadow ni border-radius: el PNG es TRANSPARENTE (verificado con GD:
   alpha=127 en las 4 esquinas), asi que la sombra no envolvia un logo — dibujaba
   la silueta rectangular del elemento y sobre el fondo casi negro se leia como
   una tarjeta oscura detras del logo. Esas dos propiedades solo tendrian sentido
   si la imagen fuese una tarjeta opaca. */
.cuenta-club-logo { display: block; width: min(300px, 76%); height: auto; margin: 0 auto; }
.cuenta-intro-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(28px, 5.6vw, 40px);
    letter-spacing: -.03em;
    color: var(--white);
    text-align: center;
    margin: 0 0 20px;
}
.cuenta-intro-title em { font-style: normal; font-weight: 500; color: var(--wood); }

/* La regla que define el look: tarjeta clara sobre el negro */
.cuenta-saludo, .cuenta-card, .cuenta-stat {
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.cuenta-saludo { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 14px; }
.cuenta-saludo h1 {
    font-family: var(--font-display);
    font-weight: 700; font-size: 26px;
    text-transform: uppercase; letter-spacing: .05em;
    margin: 0; color: var(--ink); line-height: 1.1;
}
.cuenta-saludo h1 em { font-style: normal; color: var(--wood-deep); }

/* auto-fit con minimo chico: 3 columnas en 660px, y se reacomoda solo en
   pantallas angostas (antes era repeat(3,1fr) fijo y se apretaba). */
.cuenta-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cuenta-stat { padding: 18px 12px; text-align: center; border-radius: var(--r); }
.cuenta-stat-val { font-family: var(--font-display); font-size: 34px; color: var(--wood-deep); font-weight: 700; line-height: 1; }
.cuenta-stat-lbl {
    font-family: var(--font-display);
    font-size: 12.5px; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: .12em; margin-top: 6px;
}

.cuenta-card { padding: 22px 24px; margin-bottom: 14px; }
.cuenta-card h2 {
    font-family: var(--font-display);
    font-weight: 700; font-size: 21px;
    text-transform: uppercase; letter-spacing: .07em;
    margin: 0 0 14px; color: var(--ink);
}
.cuenta-empty {
    color: var(--gray-med);
    font-family: var(--font-display);
    font-style: normal;
    text-transform: uppercase; letter-spacing: var(--track);
    font-size: 14px;
    margin: 0;
}
.cuenta-empty a { color: var(--wood-deep); }

.cuenta-turno-list { list-style: none; margin: 0; padding: 0; }
.cuenta-turno { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; border-top: 1px solid var(--gray-light); padding: 13px 0; }
.cuenta-turno:first-child { border-top: 0; padding-top: 0; }
.cuenta-turno-fecha strong { display: block; font-family: var(--font-display); font-size: 19px; color: var(--ink); letter-spacing: .02em; }
.cuenta-turno-fecha span { font-size: 12.5px; color: var(--gray-med); }
.cuenta-turno-detalle { text-align: right; }
.cuenta-turno-detalle > div { font-size: 14px; color: var(--gray-med); }
.cuenta-turno-estado {
    display: inline-block; margin-top: 5px;
    font-family: var(--font-display);
    font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
    padding: 2px 10px; border-radius: 999px;
    background: var(--white-warm); color: var(--gray-med); border: 1px solid var(--gray-light);
}
.cuenta-turno-estado.est-confirmado { color: #2f8f52; border-color: rgba(47,143,82,.4); }
.cuenta-turno-estado.est-pendiente { color: #a5772a; border-color: rgba(165,119,42,.4); }
.cuenta-turno-estado.est-en_proceso { color: var(--wood-deep); border-color: var(--wood-line); }
.cuenta-card-beneficios p { color: var(--gray-med); font-size: 14.5px; margin: 0; line-height: 1.6; }

/* La Racha del Club */
.cuenta-card-racha { border-color: var(--wood-line); }
.racha-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.racha-count { font-family: var(--font-display); font-size: 54px; font-weight: 700; color: var(--wood-deep); line-height: 1; }
.racha-count-lbl { font-family: var(--font-display); font-size: 14px; color: var(--gray-med); text-transform: uppercase; letter-spacing: var(--track); }
.racha-bar { position: relative; height: 10px; border-radius: 999px; background: var(--gray-light); overflow: hidden; }
.racha-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--wood-deep), var(--wood)); transition: width .5s ease; }
.racha-bar-mark { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); opacity: .35; transform: translateX(-1px); }
/* Sin mayusculas a proposito: son textos descriptivos configurables por el
   admin ("Descuento especial o servicio sin cargo en tu proximo corte") y en
   versalitas con tracking se parten en tres lineas. */
.racha-metas {
    display: flex; justify-content: space-between; gap: 14px; margin-top: 10px;
    font-family: var(--font-display);
    font-size: 15px; letter-spacing: .01em; line-height: 1.25; color: var(--gray-med);
}
.racha-metas span:last-child { text-align: right; }
.racha-premio { margin-top: 16px; padding: 13px 15px; border-radius: var(--r); background: var(--white-warm); border: 1px solid var(--gray-light); font-size: 14.5px; color: var(--charcoal); line-height: 1.55; }
.racha-premio--on { background: var(--wood-soft); border-color: var(--wood-line); color: var(--ink); }
.racha-premio strong { color: var(--wood-deep); }
.racha-nota { display: block; font-size: 12.5px; color: var(--gray-med); margin-top: 3px; }

/* CTA final y salir: pills de contorno sobre el fondo negro */
.cuenta-dashboard-cta, .pub-dashboard-cta {
    display: inline-block;
    background: transparent; color: var(--wood);
    border: 1px solid var(--wood-line); border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-lg); font-size: 15px;
    padding: 14px 32px; text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.pub-dashboard-cta:hover, .cuenta-dashboard-cta:hover { background: var(--wood); color: var(--ink); }
.pub-logout {
    display: inline-block;
    border: 1px solid var(--gray-light); color: var(--gray-med);
    border-radius: 999px; padding: 8px 20px; text-decoration: none;
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--track);
    transition: border-color .16s ease, color .16s ease;
}
.pub-logout:hover { border-color: var(--wood-deep); color: var(--wood-deep); }

/* Login: form card blanca sobre fondo negro (inputs claros) */
.mi-cuenta-page .pub-form-card { background: var(--white); border-color: var(--gray-light); color: var(--charcoal); box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.mi-cuenta-page .pub-form-card::before { background: linear-gradient(to right, transparent, var(--wood-line), transparent); }
.mi-cuenta-page .pub-form-title { color: var(--ink); }
.mi-cuenta-page .pub-form-sub { color: var(--gray-med); }
.mi-cuenta-page .pub-input { background: var(--white-warm); border-color: var(--gray-light); color: var(--ink); }
.mi-cuenta-page .pub-input::placeholder { color: var(--gray-warm); }
.mi-cuenta-page .pub-input:focus { border-color: var(--wood-deep); background: #fff; box-shadow: 0 0 0 3px var(--wood-soft); }
.mi-cuenta-page .pub-hint { color: var(--gray-med); }
.mi-cuenta-page .pub-country-btn { background: var(--white-warm); border-color: var(--gray-light); color: var(--ink); }
.mi-cuenta-page .pub-country-dial, .mi-cuenta-page .pub-country-caret { color: var(--gray-med); }
.mi-cuenta-page .pub-country-dropdown { background: var(--white); border-color: var(--gray-light); box-shadow: var(--sh); }
.mi-cuenta-page .pub-country-search { background: var(--white-warm); border-color: var(--gray-light); color: var(--ink); }
.mi-cuenta-page .pub-country-item-name { color: var(--ink); }
.mi-cuenta-page .pub-country-item-dial { color: var(--gray-med); }
.mi-cuenta-page .pub-country-item:hover { background: var(--wood-soft); }
/* Los labels del login SI se ven: public.css los esconde (visually-hidden) para
   el wizard, y la regla que los devuelve vive en gana.css scopeada a .gana-page,
   asi que aca no llegaba. Con placeholder solo, "Tu DNI" no dice que campo es. */
.mi-cuenta-page .pub-field label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
    display: block; margin-bottom: 7px;
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--track);
    color: var(--gray-med);
}

/* Responsive: antes NO habia una sola media query para .cuenta-*/.racha-* */
@media (max-width: 560px) {
    .cuenta-main { padding: 24px 15px 48px; }
    .cuenta-saludo { padding: 18px 18px; }
    .cuenta-saludo h1 { font-size: 22px; }
    .cuenta-card { padding: 18px 17px; }
    .cuenta-stat-val { font-size: 28px; }
    .racha-count { font-size: 44px; }
    /* El turno pasa de dos columnas a apilado: con el detalle a la derecha
       en pantallas angostas el nombre del servicio se partia en 3 lineas. */
    .cuenta-turno { grid-template-columns: 1fr; gap: 6px; }
    .cuenta-turno-detalle { text-align: left; }
    .racha-metas { flex-direction: column; gap: 4px; }
    .racha-metas span:last-child { text-align: left; }
}

/* =====================================================================
   ANIMACIONES
   ===================================================================== */
@keyframes bhc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bhc-step-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bhc-fab-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(37,211,102,.4); } 50% { box-shadow: 0 8px 24px rgba(37,211,102,.4), 0 0 0 10px rgba(37,211,102,0); } }
@keyframes bhc-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

@media (prefers-reduced-motion: reduce) {
    .pub-step, .pub-hero-scroll, .pub-fab-wa, .pub-resumen { animation: none !important; }
    * { scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
    .pub-exp { grid-template-columns: 1fr; }
    .pub-exp-media { min-height: 300px; order: -1; }
    .pub-contact { grid-template-columns: 1fr; }
    .pub-footer-inner { grid-template-columns: 1fr 1fr; }
    .pub-gallery { grid-auto-rows: 160px; }
}

@media (max-width: 760px) {
    /* Nav mobile: menu desplegable */
    .pub-nav-burger { display: flex; }
    .pub-header-reservar {
        display: inline-flex; align-items: center;
        background: transparent; color: var(--wood);
        border: 1px solid var(--wood-line); border-radius: 999px;
        font-family: var(--font-display);
        font-weight: 600; text-transform: uppercase; letter-spacing: var(--track); font-size: 14px;
        padding: 8px 18px; text-decoration: none;
    }
    .pub-nav {
        position: fixed; top: 68px; left: 0; right: 0; z-index: 95;
        /* Altura EXPLICITA: con top+bottom la altura quedaba resuelta por el
           contexto flex del header (flex:1 de la regla base) y daba 41px, asi
           que el translateY(-110%) no alcanzaba a esconder el menu. Con dvh
           ademas no salta con la barra de direcciones del navegador movil. */
        height: calc(100dvh - 68px);
        bottom: auto;
        flex: none;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--ink);
        border-top: 1px solid var(--hair-d);
        padding: 16px 18px 24px;
        transform: translateY(-110%);
        transition: transform .28s ease;
        overflow: auto;
    }
    .pub-nav-toggle:checked ~ .pub-nav { transform: translateY(0); }
    .pub-nav > a { padding: 15px 4px; border-bottom: 1px solid var(--hair-d); font-size: 16px; color: var(--white-warm); font-weight: 500; }
    .pub-nav > a:not(.pub-nav-cta):not(.pub-mi-cuenta-chip):hover,
    .pub-nav > a:not(.pub-nav-cta):not(.pub-mi-cuenta-chip):active { color: var(--wood); }
    .pub-nav > a::after { display: none; }
    /* Reservar = boton destacado arriba de todo el menu.
       El selector lleva el combinador hijo para ganarle en especificidad a
       `.pub-nav > .pub-nav-cta { margin-left:auto }` de la regla de escritorio;
       si no, el auto lo empuja a la derecha y queda flotando. */
    .pub-nav > .pub-nav-cta {
        order: -1;
        text-align: center; margin: 0 0 14px;
        padding: 15px !important; font-size: 15px !important;
        border-bottom: 0 !important; border-radius: 999px;
    }
    .pub-nav > .pub-mi-cuenta-chip {
        margin: 14px 0 0; justify-content: center; border-bottom: 0;
        color: var(--white-warm) !important;
        border: 1px solid var(--hair-d); padding: 13px;
    }
    .pub-nav-toggle:checked ~ .pub-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .pub-nav-toggle:checked ~ .pub-nav-burger span:nth-child(2) { opacity: 0; }
    .pub-nav-toggle:checked ~ .pub-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .pub-svc-grid, .pub-team-grid { grid-template-columns: 1fr; }
    .pub-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .pub-gal-tile-lg { grid-column: span 2; grid-row: span 1; }
    .pub-footer-inner { grid-template-columns: 1fr; gap: 26px; }
    .pub-cards { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
}

@media (max-width: 400px) {
    .pub-hero { min-height: 88vh; }
    .pub-cards { grid-template-columns: 1fr; }
    /* Las cards de servicio pasaron de grilla de 3 columnas a columna flex
       centrada: las reglas de grid-column/justify-self de antes ya no aplican. */
    .pub-svc-card { padding: 26px 12px 24px; }
    .pub-footer-bottom { flex-direction: column; gap: 8px; }
    .pub-brand-img { height: 36px; }
}

/* =====================================================================
   CAPA TIPOGRAFICA DEL REDISENO (2026-07-31)
   Va al final a proposito: es un bloque contiguo y borrable de una sola vez
   si hay que volver atras.

   Por que existe: en el sistema viejo la fuente de TITULOS y PRECIOS era
   --font-serif (Cormorant) y --font-display (Cinzel) solo se usaba en 5
   numerales/monogramas. En el sistema nuevo el reparto es al reves:
   la condensada (--font-display) manda en titulos de card, precios, botones
   y labels, y la geometrica (--font-body) en texto y titulos gigantes.
   Repuntar solo los tokens dejaria todos los titulos en Jost, asi que la
   reasignacion se hace por SELECTOR.
   ===================================================================== */

/* Titulos estructurales -> condensada en mayusculas */
.pub-form-title,
.pub-step-head h3,
.pub-card-title,
.pub-success-card h2,
.pub-footer-links a {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pub-footer-links a { font-size: 15px; font-weight: 600; letter-spacing: var(--track); }
.pub-form-title    { letter-spacing: .05em; }

/* Importes y valores -> condensada, SIN mayusculas: llevan nombres propios
   (cliente, barbero) y versalitas forzadas sobre un nombre quedan gritonas. */
.pub-card-discount-precio,
.pub-resumen-item-value,
.pub-success-detail strong,
.pub-cortes-precio,
.pub-corte-precio {
    font-family: var(--font-display);
    letter-spacing: .02em;
}

/* Estados vacios / hints: eran itálicas de Cormorant. Jost tiene oblicua
   geometrica y el gesto editorial se pierde, asi que el recurso pasa a ser
   tracking abierto en condensada. */
.pub-slots-empty,
.pub-slots-loading,
.pub-slots-none,
.pub-cortes-titulo {
    font-family: var(--font-display);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: var(--track);
}

/* Los <em> de acento dejan de ser cursivas y pasan a peso + madera */
.pub-footer-slogan em,
.pub-hero-tagline em {
    font-style: normal;
    font-weight: 500;
    color: var(--wood-bright);
}
.pub-footer-slogan { font-weight: 300; }

/* Enlaces en linea dentro de las tarjetas claras de Mi cuenta.
   Reemplazan dos style="" inline que tomaban acentos equivocados:
   uno usaba var(--accent) (el DORADO DEL ADMIN, que llega por styles.css) y
   el otro var(--bhc-accent) = --wood #CDAF95, que sobre blanco da ~1.7:1 y no
   pasa contraste. --wood-deep es la version para fondo claro. */
.cuenta-inline-link {
    color: var(--wood-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--wood-line);
    padding-bottom: 1px;
    transition: border-color .16s ease;
}
.cuenta-inline-link:hover { border-bottom-color: var(--wood-deep); }

/* =====================================================================
   LA RACHA DEL CLUB v2 (V36) — panel del cliente
   Mismo lenguaje que el resto: negro/blanco/madera, condensada en mayusculas
   para titulos y numerales, geometrica para texto. Sin colores nuevos.
   ===================================================================== */

/* La racha pasa a ser la card protagonista */
.cuenta-card-racha { border-color: var(--wood-line); }

/* ---- Las 5 etapas: el indicador principal ---- */
.racha-etapas {
    list-style: none; margin: 4px 0 18px; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 6px; align-items: start;
    counter-reset: none;
}
.racha-etapa { position: relative; text-align: center; }
/* La linea que une las etapas: va DETRAS del numero */
.racha-etapa::before {
    content: ''; position: absolute; top: 21px; right: 50%; left: -50%;
    height: 2px; background: var(--gray-light); z-index: 0;
}
.racha-etapa:first-child::before { display: none; }
.racha-etapa.is-hecha::before { background: var(--wood-deep); }

.racha-etapa-num {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 999px;
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700;
    background: var(--white); color: var(--gray-warm);
    border: 2px solid var(--gray-light);
    transition: transform .18s ease;
}
/* Completado: relleno madera */
.racha-etapa.is-hecha .racha-etapa-num {
    background: var(--wood-deep); border-color: var(--wood-deep); color: var(--white);
}
/* El proximo corte: el foco de la tarjeta */
.racha-etapa.is-actual .racha-etapa-num {
    border-color: var(--wood-deep); color: var(--wood-deep);
    box-shadow: 0 0 0 4px var(--wood-soft);
    transform: scale(1.08);
}
/* Etapa premiada: anillo doble para que se distinga sin agregar color */
.racha-etapa.is-premiada .racha-etapa-num { border-style: double; border-width: 4px; }

.racha-etapa-premio {
    display: block; margin-top: 7px;
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--wood-deep);
    line-height: 1.1;
}
.racha-etapa.is-hecha .racha-etapa-premio { color: var(--gray-warm); }

/* ---- Mensaje dinamico ---- */
.racha-msg { margin-top: 16px; }
.racha-msg h3 {
    font-family: var(--font-display);
    font-size: 21px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 6px; color: var(--ink);
}
.racha-msg p { margin: 0 0 4px; font-size: 15px; color: var(--gray-med); line-height: 1.5; }
.racha-msg-fuerte { color: var(--ink) !important; font-weight: 500; font-size: 16.5px !important; }
.racha-msg-sub { font-size: 14px !important; }
.racha-msg strong { color: var(--wood-deep); }

/* ---- CTA de la racha: pill relleno, es la accion principal del panel ---- */
.racha-cta-wrap { margin-top: 18px; }
.racha-cta {
    display: inline-block;
    background: var(--ink); color: var(--white-warm);
    border: 1px solid var(--ink); border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600; font-size: 15px;
    text-transform: uppercase; letter-spacing: var(--track);
    padding: 13px 28px; text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.racha-cta:hover { background: var(--wood-deep); border-color: var(--wood-deep); color: var(--white); }
.racha-cta-nota {
    margin: 9px 0 0; font-size: 13.5px; color: var(--wood-deep);
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
}

/* ---- Celebracion de racha completada ---- */
.racha-celebra {
    margin: 0 0 18px; padding: 16px 18px;
    background: var(--wood-soft); border: 1px solid var(--wood-line);
    border-radius: var(--r);
}
.racha-celebra-tit {
    display: block;
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--wood-deep); margin-bottom: 6px;
}
.racha-celebra p { margin: 0 0 3px; font-size: 15px; color: var(--charcoal); }
.racha-celebra-sub { font-size: 13.5px !important; color: var(--gray-med) !important; }

/* ---- Tus beneficios ---- */
.benef-list { list-style: none; margin: 0; padding: 0; }
.benef-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 0; border-top: 1px solid var(--gray-light);
}
.benef-item:first-child { border-top: 0; padding-top: 0; }
.benef-nombre {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink);
}
.benef-estado {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--gray-light); color: var(--gray-med);
}
/* Los cuatro estados se distinguen por peso y relleno, no por colores nuevos */
.benef-disponible .benef-estado { background: var(--wood-deep); border-color: var(--wood-deep); color: var(--white); }
.benef-proximo    .benef-estado { border-color: var(--wood-line); color: var(--wood-deep); }
.benef-utilizado  .benef-nombre { color: var(--gray-warm); }
.benef-utilizado  .benef-estado { color: var(--gray-warm); }
.benef-bloqueado  .benef-nombre { color: var(--gray-warm); }
.benef-nota { margin: 14px 0 0; font-size: 12.5px; color: var(--gray-warm); line-height: 1.5; }

/* ---- Turnos: etiquetas de racha e historial enriquecido ---- */
.cuenta-turno-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 5px; }
.cuenta-turno-pos {
    font-family: var(--font-display);
    font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--gray-med);
    border: 1px solid var(--gray-light); border-radius: 999px; padding: 2px 10px;
}
.cuenta-turno-benef-ok {
    font-family: var(--font-display);
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: var(--white); background: var(--wood-deep);
    border-radius: 999px; padding: 2px 10px;
}
.cuenta-turno-benef {
    display: block; margin-top: 6px;
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--wood-deep);
}
.cuenta-turno-repetir {
    display: inline-block; margin-top: 8px;
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--gray-med); text-decoration: none;
    border-bottom: 1px solid var(--wood-line); padding-bottom: 1px;
    transition: color .16s ease;
}
.cuenta-turno-repetir:hover { color: var(--wood-deep); }
.cuenta-empty-cta { margin-top: 14px; }

/* ---- Responsive ---- */
@media (max-width: 560px) {
    .racha-etapa-num { width: 36px; height: 36px; font-size: 17px; }
    .racha-etapa::before { top: 18px; }
    .racha-etapa-premio { font-size: 10.5px; letter-spacing: .02em; }
    .racha-etapas { gap: 3px; }
    .racha-msg h3 { font-size: 18px; }
    .racha-cta { display: block; text-align: center; padding: 14px 18px; }
    /* Las etiquetas se alinean a la izquierda junto con el resto del detalle */
    .cuenta-turno-tags { justify-content: flex-start; }
    .benef-item { flex-direction: column; align-items: flex-start; gap: 7px; }
    .benef-nombre { font-size: 15.5px; }
}