/* ═══════════════════════════════════════════════════════════
   OTRO CORTE — Barbería Studio
   Sistema tipográfico. Helvetica en dos pesos (light / bold),
   tinta y hueso, rojo solo como acento. Sin ornamento.
   ═══════════════════════════════════════════════════════════ */

:root{
  --tinta:    #0C0C0C;
  --tinta-2:  #131313;
  --tinta-3:  #1B1B1B;
  --hueso:    #EFEDE9;
  --hueso-2:  #E2DFD9;
  --gris:     #8B8985;
  --gris-osc: #55534F;
  --rojo:     #AE040F;

  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  --marco: 1320px;
  --lat: clamp(24px, 6vw, 100px);
  --sec: clamp(88px, 13vh, 190px);

  --hair: 1px solid rgba(239,237,233,.14);
  --hair-osc: 1px solid rgba(12,12,12,.16);

  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

/* Las secciones ya traen aire arriba; solo se compensa la cabecera
   cuando la pantalla es muy baja (teléfono acostado) y ese aire no alcanza. */
section[id]{ scroll-margin-top:10px; }
#reserva{ scroll-margin-top:clamp(84px, 11vh, 104px); }
@media (max-height:620px){
  section[id]{ scroll-margin-top:clamp(72px, 14vh, 92px); }
}

body{
  font-family:var(--sans);
  font-weight:400;
  background:var(--tinta);
  color:rgba(239,237,233,.72);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--hueso); color:var(--tinta); }
:focus-visible{ outline:1px solid var(--hueso); outline-offset:4px; }

.salto{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--hueso); color:var(--tinta); padding:12px 20px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.salto:focus{ left:0; }

.marco{
  width:100%; max-width:var(--marco);
  margin-inline:auto; padding-inline:var(--lat);
}

/* ═══════════ TIPOGRAFÍA ═══════════ */
.rotulo{
  font-size:.62rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gris-osc);
}

.titan{
  font-size:clamp(4rem, 14.5vw, 13rem);
  line-height:.84;
  letter-spacing:-.05em;
  font-weight:700;
  color:var(--hueso);
}
.titan__l{ display:block; }
.titan__l--fino{
  font-weight:200;
  letter-spacing:-.045em;
  padding-left:.055em;
}

.titulo{
  font-size:clamp(2.1rem, 5.2vw, 4rem);
  line-height:1.02;
  letter-spacing:-.038em;
  font-weight:700;
  color:var(--hueso);
}

.bajada{
  margin-top:26px; max-width:52ch;
  color:rgba(239,237,233,.6);
}

.cabecera-seccion{ margin-bottom:clamp(48px,7vw,96px); }
.cabecera-seccion .rotulo{ margin-bottom:26px; display:block; }

/* ═══════════ CABECERA ═══════════ */
.cab{
  position:fixed; inset:0 0 auto 0; z-index:100;
  --progreso:0;
  transition:background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
html.scrolled .cab{
  background:rgba(12,12,12,.86);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:rgba(239,237,233,.1);
}

/* Con el menú abierto la cabecera suelta el desenfoque: si no, el
   backdrop-filter se vuelve el bloque contenedor del menú fijo y lo
   encierra dentro del alto del header. */
html.menu-abierto .cab,
html.menu-abierto.scrolled .cab{
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
html.menu-abierto .cab__progreso{ opacity:0; }
.cab__progreso{
  position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--hueso);
  transform:scaleX(0); transform-origin:left;
  opacity:0; transition:opacity .5s var(--ease);
}
html.scrolled .cab__progreso{ opacity:.55; }

.cab__inner{
  max-width:var(--marco); margin-inline:auto;
  padding:20px var(--lat);
  display:flex; align-items:center; gap:26px;
  transition:padding .5s var(--ease);
}
html.scrolled .cab__inner{ padding-block:13px; }

.cab__marca{ margin-right:auto; position:relative; z-index:2; }
.cab__marca img{ height:38px; width:auto; transition:height .5s var(--ease); }
html.scrolled .cab__marca img{ height:30px; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(239,237,233,.62);
  position:relative; padding-block:3px;
  transition:color .4s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--hueso); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav a:hover{ color:var(--hueso); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__n{
  font-size:.58rem; letter-spacing:.14em; color:var(--gris-osc);
  margin-right:.5em; transition:color .4s var(--ease);
}
@media (min-width:1025px) and (max-width:1179px){ .nav__n{ display:none; } }

.nav a.activo{ color:var(--hueso); }
.nav a.activo::after{ transform:scaleX(1); transform-origin:left; }
.nav a.activo .nav__n{ color:var(--rojo); }

/* contacto dentro del menú desplegado (solo móvil) */
.nav__pie{ display:none; }

.cab__reservar{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--hueso);
  border:1px solid rgba(239,237,233,.28);
  padding:12px 22px; white-space:nowrap;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .25s ease;
}
.cab__reservar:hover{ background:var(--hueso); color:var(--tinta); border-color:var(--hueso); }
.cab__punto{
  width:6px; height:6px; border-radius:50%; background:var(--rojo); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(174,4,15,.6); animation:pulso 2.8s ease-out infinite;
}
.cab__reservar:hover .cab__punto{ background:var(--rojo); }
.cab__volver .cab__punto{ display:none; }

.menu-btn{
  display:none; position:relative; z-index:2;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--hueso);
  padding:12px 4px;
}

/* ═══════════ PORTADA ═══════════ */
.portada{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(120px,16vh,180px) 0 clamp(64px,10vh,110px);
  position:relative;
}
.portada__meta{
  display:flex; gap:clamp(20px,4vw,54px); flex-wrap:wrap;
  padding-bottom:clamp(26px,4vh,44px);
  border-bottom:var(--hair);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gris-osc);
}
.portada__meta span:last-child{ margin-left:auto; }

.titan{ margin:clamp(34px,6vh,70px) 0 clamp(40px,7vh,84px); }

.portada__pie{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px); align-items:end;
  padding-top:clamp(26px,4vh,44px);
  border-top:var(--hair);
}
.portada__frase{
  font-size:clamp(1.05rem,1.8vw,1.4rem);
  line-height:1.42; letter-spacing:-.015em;
  color:var(--hueso); font-weight:400;
}

.datos{ display:flex; gap:clamp(22px,4vw,60px); flex-wrap:wrap; justify-content:flex-end; }
.datos dt{
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gris-osc); margin-bottom:8px;
}
.datos dd{
  font-size:clamp(1.1rem,1.7vw,1.45rem); font-weight:700;
  letter-spacing:-.02em; color:var(--hueso);
}

.baja{
  position:absolute; left:var(--lat); bottom:clamp(26px,4vh,42px);
  width:1px; height:56px; overflow:hidden;
}
.baja__linea{
  display:block; width:1px; height:100%;
  background:linear-gradient(var(--hueso), transparent);
  animation:cae 2.6s var(--ease) infinite;
}
@keyframes cae{
  0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) }
}

/* revelado palabra por palabra */
html.js .palabras .w{
  color:rgba(239,237,233,.16);
  transition:color .34s ease;
}
html.js .palabras .w.on{ color:var(--hueso); }

/* ═══════════ LA CARTA (hueso) ═══════════ */
.carta{
  background:var(--hueso); color:var(--gris-osc);
  padding-block:var(--sec);
}
.carta .rotulo{ color:rgba(12,12,12,.42); }
.carta .titulo{ color:var(--tinta); }

.lista-carta{ border-top:var(--hair-osc); }
.lista-carta li{
  display:flex; align-items:baseline; gap:clamp(12px,2vw,26px);
  padding:clamp(18px,2.4vw,26px) 0;
  border-bottom:var(--hair-osc);
  transition:padding-left .5s var(--ease);
}
.lista-carta li:hover{ padding-left:12px; }
.lista-carta__nombre{
  font-size:clamp(1.05rem,2vw,1.5rem);
  color:var(--tinta); letter-spacing:-.02em; font-weight:400;
  white-space:nowrap;
}
.lista-carta__guia{
  flex:1; height:1px;
  background:repeating-linear-gradient(90deg, rgba(12,12,12,.28) 0 2px, transparent 2px 7px);
  transform:translateY(-4px);
}
.lista-carta__valor{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(12,12,12,.5); white-space:nowrap;
}

.total{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-top:clamp(30px,4vw,48px);
}
.total__label{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(12,12,12,.45);
}
.total__cifra{
  font-size:clamp(3rem,9vw,7rem); line-height:.9;
  font-weight:700; letter-spacing:-.055em; color:var(--tinta);
}
.carta__nota{
  margin-top:clamp(26px,4vw,42px);
  font-size:.92rem; color:rgba(12,12,12,.6);
}
.carta__nota a{
  color:var(--tinta); border-bottom:1px solid var(--rojo); padding-bottom:2px;
  transition:color .4s var(--ease);
}
.carta__nota a:hover{ color:var(--rojo); }

/* ═══════════ LA SESIÓN ═══════════ */
.sesion{ padding-block:var(--sec); }
.tiempos{ border-top:var(--hair); }
.tiempos li{
  display:grid;
  grid-template-columns:auto minmax(160px,.9fr) minmax(0,1.4fr) max-content;
  gap:clamp(16px,3vw,44px);
  align-items:baseline;
  padding:clamp(24px,3vw,38px) 0;
  border-bottom:var(--hair);
  transition:padding-left .5s var(--ease);
}
.tiempos li:hover{ padding-left:12px; }
.tiempos__n{
  font-size:.62rem; letter-spacing:.24em; color:var(--gris-osc); font-weight:700;
}
.tiempos__nombre{
  font-size:clamp(1.15rem,2.2vw,1.7rem); color:var(--hueso);
  letter-spacing:-.025em;
}
.tiempos__desc{ font-size:.94rem; color:rgba(239,237,233,.5); min-width:0; }
.tiempos__min{
  font-size:clamp(1.6rem,3.2vw,2.6rem); font-weight:200;
  color:var(--hueso); letter-spacing:-.04em; justify-self:end; white-space:nowrap;
}
.tiempos__min i{ font-style:normal; color:var(--gris-osc); font-size:.5em; }

/* ═══════════ MARIO ═══════════ */
.mario{ padding-block:var(--sec); border-top:var(--hair); }
.mario__marco{
  display:grid;
  grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  gap:clamp(28px,6vw,90px);
  align-items:center;
}
.mario__retrato img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(1) contrast(1.02);
}
.mario .rotulo{ display:block; margin-bottom:clamp(22px,3.4vw,38px); }
.mario__cita{
  font-size:clamp(1.45rem,3.3vw,2.7rem);
  line-height:1.22; letter-spacing:-.035em;
  font-weight:200; color:var(--hueso);
  max-width:17ch;
}
/* la cita se enciende palabra por palabra al bajar */
html.js .mario__cita .w{ color:rgba(239,237,233,.14); }
html.js .mario__cita .w.on{ color:var(--hueso); }
.mario__firma{
  margin-top:clamp(24px,3.4vw,38px);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gris-osc);
}

/* ═══════════ TURNOS ═══════════ */
.turnos{ padding-block:var(--sec); border-top:var(--hair); }
.cargando{ color:var(--gris-osc); font-size:.9rem; }

.agenda-tablero{ display:grid; gap:clamp(30px,4vw,52px); }
.dia-bloque{ border-top:var(--hair); padding-top:clamp(20px,2.6vw,30px); }
.dia-bloque__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:clamp(18px,2.4vw,26px);
}
.dia-bloque__fecha{
  font-size:clamp(1.4rem,3vw,2.2rem); font-weight:700;
  letter-spacing:-.035em; color:var(--hueso);
}
.dia-bloque__fecha em{
  font-style:normal; font-weight:200; color:var(--gris);
  margin-left:.5em; letter-spacing:-.02em;
}
.dia-bloque__cuenta{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gris-osc);
}
.dia-bloque__cuenta b{ color:var(--hueso); font-weight:700; }

.horas-linea{ display:flex; flex-wrap:wrap; gap:8px; }
.hora-chip{
  border:1px solid rgba(239,237,233,.16);
  padding:11px 16px;
  font-size:.86rem; letter-spacing:.04em; color:rgba(239,237,233,.78);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.hora-chip:hover{ background:var(--hueso); color:var(--tinta); border-color:var(--hueso); }
.hora-chip--mas{ border-style:dashed; color:var(--gris-osc); }
.dia-bloque__lleno{ font-size:.9rem; color:var(--gris-osc); }

.turnos__ubicacion{
  margin-top:clamp(44px,6vw,76px); padding-top:clamp(20px,3vw,30px);
  border-top:var(--hair);
  font-size:.92rem; color:rgba(239,237,233,.55);
  display:flex; gap:clamp(14px,3vw,34px); flex-wrap:wrap; align-items:baseline;
}
.turnos__ubicacion .rotulo{ flex:0 0 auto; }
.mapa{
  color:var(--hueso); white-space:nowrap;
  border-bottom:1px solid rgba(239,237,233,.3); padding-bottom:2px;
  transition:border-color .4s var(--ease);
}
.mapa:hover{ border-bottom-color:var(--hueso); }

/* ═══════════ CIERRE ═══════════ */
.cierre{ padding-block:clamp(96px,16vh,220px); border-top:var(--hair); }
.cierre__link{
  display:flex; align-items:baseline; gap:clamp(16px,3vw,44px);
  font-size:clamp(3.4rem,13vw,11rem); line-height:.86;
  font-weight:700; letter-spacing:-.055em; color:var(--hueso);
  transition:opacity .5s var(--ease);
}
.cierre__flecha{
  font-size:.32em; font-weight:200;
  transition:transform .6s var(--ease);
}
.cierre__link:hover .cierre__flecha{ transform:translateX(.35em); }
.cierre__pie{
  margin-top:clamp(30px,4vw,50px);
  font-size:.94rem; color:rgba(239,237,233,.5);
}
.cierre__pie a{
  color:var(--hueso); border-bottom:1px solid rgba(239,237,233,.35); padding-bottom:2px;
}
.cierre__pie a:hover{ border-bottom-color:var(--hueso); }

/* ═══════════ PIE ═══════════ */
.pie{ border-top:var(--hair); padding-top:clamp(50px,7vw,84px); }
.pie__grid{
  display:grid; grid-template-columns:1.3fr .9fr .9fr .9fr; gap:clamp(28px,4vw,52px);
  padding-bottom:clamp(44px,6vw,72px);
}
.pie__marca img{ height:52px; width:auto; }
.pie__marca p{
  margin-top:16px; font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gris-osc);
}
.pie__col{ display:grid; gap:10px; align-content:start; }
.pie__col .rotulo{ margin-bottom:8px; }
.pie__col p{ font-size:.9rem; color:rgba(239,237,233,.6); }
.pie__col a{
  font-size:.9rem; color:rgba(239,237,233,.72); width:fit-content;
  border-bottom:1px solid transparent; transition:border-color .4s var(--ease), color .4s var(--ease);
}
.pie__col a:hover{ color:var(--hueso); border-bottom-color:var(--hueso); }
.pie__base{
  border-top:var(--hair); padding-block:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.pie__base p{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gris-osc); }
.arriba{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gris);
  display:inline-flex; align-items:center; gap:.6em;
  transition:color .4s var(--ease);
}
.arriba:hover{ color:var(--hueso); }
.arriba span{ transition:transform .4s var(--ease); }
.arriba:hover span{ transform:translateY(-3px); }

.solo-ancho{ display:inline; }

/* ═══════════ DISPONIBILIDAD FLOTANTE ═══════════ */
.disponible{
  position:fixed; right:var(--lat); bottom:clamp(18px,3vh,30px); z-index:95;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px;
  background:rgba(12,12,12,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(239,237,233,.18);
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--hueso);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
html.mostrar-disponible .disponible{ opacity:1; transform:none; pointer-events:auto; }
.disponible:hover{ background:var(--hueso); color:var(--tinta); }
.disponible__punto{
  width:6px; height:6px; border-radius:50%; background:var(--rojo);
  box-shadow:0 0 0 0 rgba(174,4,15,.6); animation:pulso 2.8s ease-out infinite;
}
@keyframes pulso{
  0%{ box-shadow:0 0 0 0 rgba(174,4,15,.55) }
  70%{ box-shadow:0 0 0 8px rgba(174,4,15,0) }
  100%{ box-shadow:0 0 0 0 rgba(174,4,15,0) }
}

/* ═══════════ INTRO ═══════════ */
.intro{
  position:fixed; inset:0; z-index:900;
  background:var(--tinta);
  display:grid; place-items:center;
  transition:opacity .8s ease .2s, visibility .8s ease .2s;
}
.intro img{
  height:clamp(64px,9vw,110px); width:auto;
  opacity:0; transform:translateY(10px);
  animation:entra 1.1s var(--ease) forwards;
}
@keyframes entra{ to{ opacity:1; transform:none } }
html.intro-lista .intro{ opacity:0; visibility:hidden; }

/* ═══════════ REVEALS ═══════════ */
html.js .reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s ease, transform 1s var(--ease);
}
html.js .reveal.visible{ opacity:1; transform:none; }

html.js .anim-titulo{
  opacity:0; transform:translateY(34px);
  transition:opacity 1s ease, transform 1.1s var(--ease);
}
html.js .anim-titulo.visible{ opacity:1; transform:none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1024px){
  .menu-btn{ display:block; }
  .cab__reservar{ padding:11px 16px; font-size:.64rem; letter-spacing:.16em; }
  .nav{
    position:fixed; inset:0;
    background:rgba(12,12,12,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    flex-direction:column; justify-content:center; gap:4px;
    transform:translateY(-101%);
    /* visibility además del transform: cuando la cabecera lleva
       backdrop-filter se convierte en el bloque contenedor del menú fijo,
       y sin esto los enlaces se asoman por detrás al hacer scroll. */
    visibility:hidden;
    transition:transform .7s var(--ease), visibility 0s linear .7s;
    z-index:1;
  }
  .nav.abierto{
    transform:none; visibility:visible;
    transition:transform .7s var(--ease), visibility 0s;
  }
  .nav a{
    font-size:clamp(1.5rem,6vw,2.2rem); letter-spacing:-.03em; text-transform:none;
    color:var(--hueso); padding:12px 0; font-weight:200;
  }
  .nav a::after{ display:none; }
  .nav__n{ font-size:.66rem; margin-right:.7em; opacity:.8; }
  .nav a.activo{ color:var(--hueso); }
  .nav a.activo .nav__n{ color:var(--rojo); opacity:1; }

  .nav__pie{
    display:flex; gap:26px; flex-wrap:wrap; justify-content:center;
    margin-top:clamp(34px,7vh,60px); padding-top:24px;
    border-top:1px solid rgba(239,237,233,.14);
    width:min(100%, 320px);
  }
  .nav__pie a{
    font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
    font-weight:400; color:var(--gris); padding:0;
  }
  .nav__pie a:hover{ color:var(--hueso); }

  /* en móvil el botón de la cabecera es el acceso a reservar */
  .disponible{ display:none; }
  .portada__pie{ grid-template-columns:1fr; align-items:start; gap:34px; }
  .mario__marco{ grid-template-columns:1fr; gap:34px; }
  .mario__retrato{ max-width:340px; }
  .mario__cita{ max-width:22ch; }
  .datos{ justify-content:flex-start; }
  .tiempos li{ grid-template-columns:auto 1fr auto; }
  .tiempos__desc{ grid-column:2/-1; grid-row:2; }
  .pie__grid{ grid-template-columns:1fr 1fr; }
  .pie__marca{ grid-column:1/-1; }
  .solo-ancho{ display:none; }
}

@media (max-width:640px){
  .oculto-movil{ display:none; }
  .portada__meta span:last-child{ margin-left:auto; }
  .titan{ font-size:clamp(3.2rem,17vw,5.4rem); }
  .datos{ gap:26px; }
  .lista-carta li{ flex-wrap:wrap; row-gap:4px; }
  .lista-carta__guia{ min-width:30px; }
  .tiempos li{ grid-template-columns:auto 1fr; }
  .tiempos__min{ grid-column:2; grid-row:1; justify-self:end; }
  .pie__grid{ grid-template-columns:1fr; }
  .disponible{ left:16px; right:16px; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  html.js .reveal, html.js .anim-titulo{ opacity:1; transform:none; }
  html.js .palabras .w{ color:var(--hueso); }
}

/* ═══════════════════════════════════════════════════════════
   PÁGINA DE RESERVA
   ═══════════════════════════════════════════════════════════ */
.titan--medio{ font-size:clamp(3rem, 10vw, 8rem); }

.reserva-portada{
  padding:clamp(122px,17vh,190px) 0 clamp(40px,6vh,70px);
}
.reserva-portada .titan{ margin:clamp(28px,5vh,54px) 0 clamp(30px,5vh,60px); }

.reserva{ padding-block:clamp(52px,8vh,110px); border-top:var(--hair); }
.reserva__marco{ max-width:720px; margin-inline:auto; }

.paso-titulo{
  display:flex; align-items:baseline; gap:1em;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(239,237,233,.8);
  margin:clamp(40px,6vw,64px) 0 22px;
}
.paso-titulo:first-of-type{ margin-top:0; }
.paso-titulo__n{ color:var(--gris-osc); }
.paso-titulo::after{ content:""; flex:1; height:1px; background:rgba(239,237,233,.14); }

/* días */
.dias-tira{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.dia-btn{
  flex:0 0 auto; width:116px;
  border:1px solid rgba(239,237,233,.16);
  padding:18px 14px 15px; text-align:left;
  color:rgba(239,237,233,.75);
  transition:border-color .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.dia-btn:hover:not(:disabled){ border-color:rgba(239,237,233,.55); }
.dia-btn[aria-pressed="true"]{ background:var(--hueso); border-color:var(--hueso); color:var(--tinta); }
.dia-btn--lleno{ opacity:.3; cursor:not-allowed; }
.dia-btn__dow{
  display:block; font-size:.56rem; letter-spacing:.26em; text-transform:uppercase;
  color:inherit; opacity:.6;
}
.dia-btn__num{
  display:block; font-size:1.85rem; line-height:1.15; font-weight:700; letter-spacing:-.04em;
}
.dia-btn__mes{ display:block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; opacity:.6; }
.dia-btn__cupos{
  display:block; margin-top:12px; padding-top:9px;
  border-top:1px solid currentColor;
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; opacity:.65;
}

/* horas */
.horas{ display:flex; flex-wrap:wrap; gap:8px; }
.hora{
  border:1px solid rgba(239,237,233,.16);
  padding:12px 16px; font-size:.88rem; letter-spacing:.03em;
  color:rgba(239,237,233,.78);
  transition:border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.hora:hover:not(:disabled){ border-color:rgba(239,237,233,.55); color:var(--hueso); }
.hora[aria-pressed="true"]{ background:var(--hueso); border-color:var(--hueso); color:var(--tinta); }
.hora:disabled{ opacity:.22; cursor:not-allowed; text-decoration:line-through; }
.horas__vacio{ font-size:.9rem; color:var(--gris-osc); }

/* resumen */
.resumen[hidden]{ display:none; }
.resumen{
  display:flex; gap:clamp(20px,5vw,60px); flex-wrap:wrap;
  padding:22px 0 24px; margin-bottom:34px;
  border-top:var(--hair); border-bottom:var(--hair);
}
.resumen__label{
  display:block; font-size:.56rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gris-osc); margin-bottom:7px;
}
.resumen__dato{
  font-size:1.15rem; font-weight:700; letter-spacing:-.02em; color:var(--hueso);
}

/* formulario */
.campo{ margin-bottom:26px; }
.campo label{
  display:block; font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gris-osc); margin-bottom:10px;
}
.campo__opcional{
  text-transform:none; letter-spacing:.02em; font-size:.74rem;
  color:rgba(239,237,233,.28); margin-left:.7em;
}
.campo input, .campo textarea, .campo select{
  width:100%; background:transparent; color:var(--hueso);
  border:none; border-bottom:1px solid rgba(239,237,233,.2);
  padding:10px 0 12px; font-size:1.02rem; font-family:inherit;
  transition:border-color .45s var(--ease);
}
.campo select{ border:1px solid rgba(239,237,233,.2); padding:12px 14px; }
.campo input::placeholder, .campo textarea::placeholder{ color:rgba(239,237,233,.28); }
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--hueso);
}
.campo textarea{ resize:vertical; min-height:80px; }

.boton{
  display:inline-flex; align-items:center; gap:1.1em;
  background:var(--hueso); color:var(--tinta);
  padding:18px 30px; margin-top:12px;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.boton:hover{ background:#fff; }
.boton__flecha{ font-weight:400; transition:transform .5s var(--ease); }
.boton:hover .boton__flecha{ transform:translateX(.3em); }

.enlace-simple{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(239,237,233,.7);
  border-bottom:1px solid rgba(239,237,233,.3); padding-bottom:3px;
}
.enlace-simple:hover{ color:var(--hueso); border-bottom-color:var(--hueso); }

.reserva__nota{
  margin-top:30px; padding-top:22px; border-top:var(--hair);
  font-size:.86rem; color:var(--gris-osc);
}
.aviso{ margin-top:16px; font-size:.86rem; color:var(--rojo); min-height:1.2em; }

/* éxito */
.exito{ display:none; }
.exito.visible{ display:block; }
.exito .rotulo{ display:block; margin-bottom:22px; }
.exito__texto{ margin-top:22px; max-width:46ch; color:rgba(239,237,233,.6); }
.exito__acciones{ margin-top:38px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }

@media (max-width:640px){
  .horas{ display:grid; grid-template-columns:repeat(3,1fr); }
  .hora{ text-align:center; }
  .resumen{ gap:24px; }
}

/* ═══════════ BARRA DEL TURNO ELEGIDO (móvil, página de reserva) ═══════════ */
.barra-turno{
  position:fixed; left:0; right:0; bottom:0; z-index:96;
  display:none; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(12,12,12,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(239,237,233,.16);
  transform:translateY(100%);
  transition:transform .5s var(--ease);
}
.barra-turno__label{
  display:block; font-size:.55rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gris-osc); margin-bottom:4px;
}
.barra-turno__valor{
  font-size:.98rem; font-weight:700; letter-spacing:-.015em; color:var(--hueso);
}
.boton--barra{ margin-top:0; padding:14px 20px; font-size:.62rem; letter-spacing:.18em; }

@media (max-width:1024px){
  .barra-turno{ display:flex; }
  .barra-turno[hidden]{ display:none; }
  .barra-turno.visible{ transform:none; }
  .pagina-agenda .pie{ padding-bottom:88px; }
}