/* ============================================================================
   Dandy's Barbershop — hoja de estilos
   Paleta: negro carbón + oro viejo + marfil.  Tipografías: Playfair Display
   (títulos), Cormorant Garamond (cursivas) y Jost (texto).
   ========================================================================== */

:root {
  --oro: #c8a24a;
  --oro-marca: #dcbb9c;
  --oro-claro: #e9d193;
  --oro-osc: #8a6d2c;
  --negro: #0a0a0b;
  --carbon: #121214;
  --carbon2: #17171a;
  --marfil: #f1e8d6;
  --humo: #a49e93;
  --humo-claro: #c4bdb0;
  --linea: #2a2a2e;
  --error: #e08a72;
  --ok: #8fbf87;

  --serif: 'Playfair Display', Georgia, serif;
  --ital: 'Cormorant Garamond', Georgia, serif;
  --body: 'Jost', -apple-system, 'Segoe UI', Arial, sans-serif;

  --nav-alto: 88px;
  --ancho: 1250px;
}

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

html {
  scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%;
  /* El color va aquí y no en <body> para que el fondo de body no se propague
     al lienzo: si se propagase, se pintaría por encima de html::before y
     taparía el mármol. */
  background: var(--negro);
}

/*
 * LA LOSA DE FONDO. Toda la web se apoya sobre un único bloque de mármol.
 * Va en una capa fija, así que las secciones pasan por encima de una piedra
 * que no se mueve: refuerza la idea de que todo está tallado del mismo
 * bloque, y de paso evita `background-attachment: fixed`, que iOS ignora y
 * que da tirones al hacer scroll.
 *
 * Las secciones que quieran destacarse no traen su propia losa —dos mármoles
 * a escalas distintas se ven sucios—, sino un velo oscuro translúcido que
 * deja ver esta misma piedra más apagada.
 */
html::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  /* `lvh` y no `100%` ni `vh`: en el móvil, la barra del navegador aparece y
     desaparece al hacer scroll y con ella cambia el alto de la ventana. Como
     la losa se escala con `cover`, cada cambio obligaba a rerasterizarla
     —medido: unos 34 ms por vez en un servidor, y eso en mitad de un scroll
     se nota—. `lvh` es el alto con la barra recogida y no se mueve, así que
     la capa conserva el tamaño y el navegador se limita a recomponer. */
  height: 100vh;
  height: 100lvh;
  background: var(--losa) center / cover;
  opacity: .8;
  pointer-events: none;
  z-index: 0;
}

body {
  background: transparent;
  color: var(--marfil);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Textura art-decó, aún más sutil, por encima del mármol. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('../assets/img/textura.svg') repeat;
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}

::selection { background: var(--oro); color: var(--negro); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
ul { list-style: none; }

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

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; top: -100px; left: 16px; z-index: 300;
  background: var(--oro); color: var(--negro); padding: 12px 22px;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  transition: top .25s;
}
.saltar:focus { top: 16px; }

/* ============================== NAVEGACIÓN ============================== */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 6vw;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.compacta {
  background: rgba(10, 10, 11, .96);
  backdrop-filter: blur(10px);
  padding: 13px 6vw;
  border-bottom-color: rgba(200, 162, 74, .25);
}

.logo { display: flex; align-items: center; gap: 13px; }
.logo-marca { width: 54px; height: auto; flex-shrink: 0; }
.pie-marca .logo-marca { width: 60px; }
.logo-texto {
  font-family: var(--serif); font-weight: 900; font-size: 1.22rem;
  letter-spacing: .05em; line-height: 1.15; white-space: nowrap;
}
/* El oro del logotipo, medido sobre el logotipo real de la barbería, tira a
   champán y no al oro amarillo del resto de la web (--oro). Se usa solo aquí:
   el monograma va en ese tono y, si la palabra de al lado fuese amarilla, el
   choque se ve a la primera ojeada. El resto de la web sigue con --oro. */
.logo-texto em { color: var(--oro-marca); font-style: normal; }
.logo-sub {
  display: block; font-family: var(--body); font-weight: 400; font-size: .53rem;
  letter-spacing: .28em; color: var(--humo); text-transform: uppercase;
}

.nav-enlaces { display: flex; gap: 34px; }
.nav-enlaces a {
  font-size: .76rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--marfil); position: relative; padding: 6px 0; transition: color .3s;
}
.nav-enlaces a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--oro); transition: width .35s ease;
}
.nav-enlaces a:hover, .nav-enlaces a[aria-current="true"] { color: var(--oro); }
.nav-enlaces a:hover::after, .nav-enlaces a[aria-current="true"]::after { width: 100%; }

.nav-acciones { display: flex; align-items: center; gap: 14px; }
.nav-tel {
  font-size: .74rem; letter-spacing: .16em; color: var(--humo); transition: color .3s;
}
.nav-tel:hover { color: var(--oro); }

.hamburguesa {
  display: none; background: none; border: none;
  flex-direction: column; gap: 6px; padding: 8px;
}
.hamburguesa i { width: 26px; height: 1px; background: var(--oro); display: block; transition: .3s; }
.hamburguesa[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movil { display: none; }
.velo-menu {
  position: fixed; inset: 0; background: rgba(5, 5, 6, .7); z-index: 140;
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.velo-menu.visible { opacity: 1; pointer-events: auto; }

/* ================================ BOTONES =============================== */

.btn {
  display: inline-block; padding: 15px 38px; font-size: .75rem; letter-spacing: .28em;
  text-transform: uppercase; border: 1px solid var(--oro); color: var(--oro);
  background: transparent; transition: color .35s ease, background-color .35s ease;
  position: relative; overflow: hidden; text-align: center; z-index: 0;
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--oro);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease; z-index: -1;
}
.btn:hover, .btn:focus-visible { color: var(--negro); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled::before { transform: scaleX(0); }

.btn-solido { background: var(--oro); color: var(--negro); font-weight: 500; }
.btn-solido::before { background: var(--marfil); }
.btn-solido:hover, .btn-solido:focus-visible { color: var(--negro); }

.btn-fino { padding: 11px 26px; font-size: .7rem; letter-spacing: .24em; }
.btn-ancho { width: 100%; }

/* ================================= HERO ================================= */

.hero {
  min-height: 100svh; position: relative; display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden;
}
.hero-fondo {
  position: absolute; inset: 0;
  background: url('../assets/img/hero.svg') center bottom / cover no-repeat #0b0b0e;
  animation: acercar 22s ease-in-out infinite alternate;
}
@keyframes acercar {
  from { transform: scale(1.04); }
  to { transform: scale(1.14) translateY(-12px); }
}
.hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, .8) 0%, rgba(10, 10, 11, .42) 40%, rgba(10, 10, 11, .93) 100%);
}
.hero-cont { position: relative; z-index: 2; padding: 130px 20px 90px; max-width: 920px; }
.hero-pre {
  font-size: .72rem; letter-spacing: .55em; text-transform: uppercase; color: var(--oro);
  margin-bottom: 26px; display: flex; align-items: center; justify-content: center; gap: 16px;
}
.hero-pre::before, .hero-pre::after {
  content: ""; width: 48px; height: 1px; display: inline-block;
  background: linear-gradient(90deg, transparent, var(--oro));
}
.hero-pre::after { background: linear-gradient(90deg, var(--oro), transparent); }
.hero h1 {
  font-family: var(--serif); font-weight: 900; font-size: clamp(2.8rem, 8.5vw, 6.4rem);
  line-height: .96; letter-spacing: .02em; text-shadow: 0 8px 40px rgba(0, 0, 0, .75);
}
.hero h1 .oro { color: var(--oro); display: block; }
.hero-lema {
  font-family: var(--ital); font-style: italic; font-weight: 500;
  font-size: clamp(1.1rem, 2.5vw, 1.55rem); margin: 24px auto 10px; max-width: 560px; opacity: .94;
}
.hero-orn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--oro); margin: 6px 0 36px; font-size: .85rem;
}
.hero-orn::before, .hero-orn::after {
  content: ""; height: 1px; width: 84px; background: linear-gradient(90deg, transparent, var(--oro));
}
.hero-orn::after { background: linear-gradient(90deg, var(--oro), transparent); }
.hero-btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

.hero-aviso {
  margin-top: 34px; font-size: .74rem; letter-spacing: .14em; color: var(--humo);
  display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.hero-aviso b { color: var(--marfil); font-weight: 400; }
.punto-vivo {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(143, 191, 135, .6); animation: latir 2.4s infinite;
}
.punto-vivo.cerrado { background: var(--error); animation: none; }
@keyframes latir {
  70% { box-shadow: 0 0 0 9px rgba(143, 191, 135, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 191, 135, 0); }
}

.indicador {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: var(--humo); font-size: .6rem; letter-spacing: .38em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.indicador i { width: 1px; height: 42px; background: rgba(164, 158, 147, .35); position: relative; overflow: hidden; display: block; }
.indicador i::after {
  content: ""; position: absolute; top: -40%; left: 0; width: 1px; height: 40%;
  background: var(--oro); animation: caer 2.2s ease-in-out infinite;
}
@keyframes caer { to { top: 110%; } }

/* Poste de barbero decorativo */
.poste {
  position: absolute; right: 6vw; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 190px; display: none;
}
@media (min-width: 1160px) { .poste { display: flex; flex-direction: column; } }
.poste-tapa { height: 20px; background: linear-gradient(180deg, var(--oro-claro), var(--oro-osc)); border-radius: 15px 15px 0 0; }
.poste-tapa.abajo { border-radius: 0 0 15px 15px; }
.poste-vidrio {
  flex: 1; border-left: 1px solid rgba(200, 162, 74, .6); border-right: 1px solid rgba(200, 162, 74, .6);
  overflow: hidden; position: relative;
}
.poste-franjas {
  position: absolute; left: -30%; width: 160%; height: 300%; top: -100%;
  background: repeating-linear-gradient(-45deg, #a3242e 0 12px, #f3e8d6 12px 24px, #24457c 24px 36px, #f3e8d6 36px 48px);
  animation: girar 3.4s linear infinite; opacity: .88;
}
@keyframes girar { to { transform: translateY(48px); } }

/* ============================== MARQUESINA ============================== */

.marquesina {
  border-top: 1px solid rgba(200, 162, 74, .3);
  border-bottom: 1px solid rgba(200, 162, 74, .3);
  background: var(--carbon); overflow: hidden; padding: 15px 0; position: relative; z-index: 1;
}
.marquesina-pista { display: flex; width: max-content; animation: desfilar 42s linear infinite; }
.marquesina span {
  font-family: var(--serif); font-size: .8rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--oro); white-space: nowrap; padding: 0 1.3rem;
}
@keyframes desfilar { to { transform: translateX(-50%); } }

/* ============================ SECCIONES BASE ============================ */

section { position: relative; z-index: 1; padding: 108px 6vw; }
.contenedor { max-width: var(--ancho); margin: 0 auto; }

.sec-cabecera { text-align: center; margin-bottom: 66px; }
.sec-pre { font-size: .7rem; letter-spacing: .5em; text-transform: uppercase; color: var(--oro); margin-bottom: 15px; }
.sec-titulo { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.12; }
.sec-titulo em { font-family: var(--ital); font-style: italic; color: var(--oro); font-weight: 500; }
.sec-intro { color: var(--humo); max-width: 620px; margin: 18px auto 0; line-height: 1.85; }
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--oro); margin-top: 20px; }
.orn::before, .orn::after { content: ""; height: 1px; width: 66px; background: linear-gradient(90deg, transparent, var(--oro)); }
.orn::after { background: linear-gradient(90deg, var(--oro), transparent); }

/* ============================== LA CASA ================================= */

.casa-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 68px; align-items: center; max-width: var(--ancho); margin: 0 auto; }
.casa-collage { position: relative; padding-bottom: 68px; }
.casa-img-principal { border: 1px solid rgba(200, 162, 74, .45); padding: 13px; background: rgba(18, 18, 20, .6); }
.casa-img-principal img { width: 100%; height: 520px; object-fit: cover; background: #1a1a1d; }
.casa-img-flotante {
  position: absolute; right: -14px; bottom: 0; width: 46%;
  border: 1px solid var(--oro); padding: 9px; background: var(--carbon);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .65);
}
.casa-img-flotante img { height: 230px; width: 100%; object-fit: cover; background: #1a1a1d; }
.casa-texto .sec-pre { text-align: left; }
.casa-texto h2 { font-family: var(--serif); font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.16; margin-bottom: 24px; }
.casa-texto h2 em { font-family: var(--ital); color: var(--oro); font-weight: 500; }
.casa-texto p { color: var(--humo); line-height: 1.9; font-size: 1rem; margin-bottom: 16px; }
.casa-texto p strong { color: var(--marfil); font-weight: 400; }
.casa-datos { display: flex; gap: 42px; margin: 34px 0 38px; border-top: 1px solid var(--linea); padding-top: 32px; flex-wrap: wrap; }
.dato b { display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--oro); font-weight: 700; line-height: 1.2; }
.dato span { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--humo); }

/* ============================== EL RITUAL =============================== */

.ritual { background: rgba(18, 18, 20, .96); }
.ritual-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--ancho); margin: 0 auto; }
.ritual-paso { border-top: 1px solid var(--linea); padding-top: 26px; position: relative; }
.ritual-paso::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 42px; height: 1px; background: var(--oro);
}
.ritual-num { font-family: var(--serif); font-size: 1.6rem; color: var(--oro); letter-spacing: .1em; }
.ritual-paso h3 { font-family: var(--serif); font-size: 1.15rem; margin: 10px 0 10px; font-weight: 700; }
.ritual-paso p { color: var(--humo); font-size: .92rem; line-height: 1.8; }

/* =============================== SERVICIOS ============================== */

.servicios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--ancho); margin: 0 auto; }
.servicio {
  border: 1px solid var(--linea);
  background: linear-gradient(160deg, rgba(23, 23, 26, .96), rgba(12, 12, 14, .96));
  padding: 40px 32px; position: relative; overflow: hidden;
  transition: transform .45s ease, border-color .45s ease;
  display: flex; flex-direction: column;
}
.servicio::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  transform: scaleX(0); transition: transform .5s ease;
}
.servicio:hover { transform: translateY(-7px); border-color: rgba(200, 162, 74, .5); }
.servicio:hover::before { transform: scaleX(1); }
.servicio.destacado { border-color: rgba(200, 162, 74, .45); }
.servicio-etiqueta {
  position: absolute; top: 18px; right: -34px; transform: rotate(45deg);
  background: var(--oro); color: var(--negro); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; padding: 5px 40px; font-weight: 500;
}
.servicio-num { font-family: var(--serif); color: rgba(200, 162, 74, .45); font-size: .95rem; letter-spacing: .2em; }
.servicio h3 { font-family: var(--serif); font-size: 1.35rem; margin: 12px 0 10px; font-weight: 700; }
.servicio p { color: var(--humo); font-size: .91rem; line-height: 1.75; flex: 1; }
.servicio-pie {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 24px; border-top: 1px solid var(--linea); padding-top: 18px;
}
.servicio-precio { font-family: var(--serif); font-size: 1.6rem; color: var(--oro); line-height: 1; }
.servicio-precio small { font-size: .8rem; color: var(--humo); font-family: var(--body); letter-spacing: .08em; }
.servicio-dur { font-size: .68rem; letter-spacing: .22em; color: var(--humo); text-transform: uppercase; }
.servicio-reservar {
  margin-top: 18px; width: 100%; background: transparent; border: 1px solid var(--linea);
  color: var(--humo); padding: 12px; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  transition: border-color .3s, color .3s, background-color .3s;
}
.servicio:hover .servicio-reservar, .servicio-reservar:hover, .servicio-reservar:focus-visible {
  border-color: var(--oro); color: var(--oro);
}
.servicio-reservar:hover { background: rgba(200, 162, 74, .1); }

/* =============================== MAESTROS =============================== */

.maestros-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1150px; margin: 0 auto; }
.maestro { text-align: center; }
.maestro-foto { position: relative; padding: 11px; border: 1px solid var(--linea); transition: border-color .4s; background: var(--carbon); }
.maestro-foto::after {
  content: ""; position: absolute; inset: 11px; border: 1px solid rgba(200, 162, 74, .35);
  transition: inset .4s ease; pointer-events: none;
}
.maestro:hover .maestro-foto { border-color: rgba(200, 162, 74, .55); }
.maestro:hover .maestro-foto::after { inset: 19px; }
.maestro-foto img { width: 100%; height: 400px; object-fit: cover; object-position: top center; background: #101014; }
.maestro-info { padding: 24px 10px 0; }
.maestro-info h3 { font-family: var(--serif); font-size: 1.38rem; font-weight: 700; }
.maestro-rol { color: var(--oro); font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; margin: 8px 0 10px; }
.maestro-cita { color: var(--humo); font-size: .93rem; font-family: var(--ital); font-style: italic; font-weight: 500; }
.maestro-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.maestro-tags span {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--humo);
  border: 1px solid var(--linea); padding: 5px 12px;
}

/* =============================== RESEÑAS ================================ */

.resenas { background: rgba(18, 18, 20, .96); }
.resenas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: var(--ancho); margin: 0 auto; }
.resena { border: 1px solid var(--linea); padding: 36px 30px; background: rgba(12, 12, 14, .6); position: relative; }
.resena::before {
  content: "\201C"; font-family: var(--serif); font-size: 4.5rem; color: rgba(200, 162, 74, .3);
  position: absolute; top: 6px; left: 20px; line-height: 1;
}
.resena-estrellas { color: var(--oro); letter-spacing: .28em; font-size: .82rem; margin-bottom: 16px; position: relative; }
.resena p { color: var(--humo-claro); font-family: var(--ital); font-style: italic; font-size: 1.08rem; line-height: 1.75; position: relative; }
.resena-autor { margin-top: 22px; border-top: 1px solid var(--linea); padding-top: 16px; }
.resena-autor b { display: block; font-family: var(--serif); font-size: 1rem; font-weight: 700; }
.resena-autor span { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--humo); }

/* =============================== RESERVAS =============================== */

.reservas {
  background-color: #0c0c0f;
  background-image: linear-gradient(rgba(10, 10, 11, .93), rgba(10, 10, 11, .95)), url('../assets/img/hero.svg');
  background-size: cover; background-position: center;
}
.reservas-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  max-width: var(--ancho); margin: 0 auto; align-items: start;
}
.panel { border: 1px solid rgba(200, 162, 74, .3); background: rgba(15, 15, 17, .96); padding: 36px; }
.panel-ancho { grid-column: 1 / -1; }

.paso { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.paso b { font-family: var(--serif); color: var(--oro); font-size: .98rem; letter-spacing: .12em; }
.paso span { font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--humo); white-space: nowrap; }
.paso::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.paso + .paso { margin-top: 34px; }

/* --- Elección de servicio --- */
.opciones { display: grid; gap: 10px; }
.opciones-2 { grid-template-columns: 1fr 1fr; }
.opcion {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: rgba(10, 10, 11, .6); border: 1px solid var(--linea); padding: 14px 16px;
  transition: border-color .28s, background-color .28s;
}
.opcion:hover:not(:disabled) { border-color: rgba(200, 162, 74, .55); background: rgba(200, 162, 74, .06); }
.opcion[aria-pressed="true"] { border-color: var(--oro); background: rgba(200, 162, 74, .12); }
.opcion:disabled { opacity: .4; cursor: not-allowed; }
.opcion-cuerpo { flex: 1; min-width: 0; }
.opcion-titulo { display: block; font-size: .95rem; color: var(--marfil); letter-spacing: .02em; }
.opcion-meta { display: block; font-size: .7rem; letter-spacing: .16em; color: var(--humo); margin-top: 4px; text-transform: uppercase; }
.opcion-precio { font-family: var(--serif); color: var(--oro); font-size: 1.15rem; white-space: nowrap; }
.opcion-avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top center;
  border: 1px solid var(--linea); background: #101014; flex-shrink: 0;
}
.opcion-marca {
  width: 46px; height: 46px; border: 1px solid var(--linea); display: grid; place-items: center;
  color: var(--oro); border-radius: 50%; flex-shrink: 0; font-size: 1.1rem;
}

/* --- Calendario --- */
.cal-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; }
.cal-cabecera h4 { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; text-transform: capitalize; letter-spacing: .04em; }
.cal-nav {
  background: none; border: 1px solid var(--linea); color: var(--oro);
  width: 38px; height: 38px; font-size: 1rem; transition: border-color .3s, background-color .3s; flex-shrink: 0;
}
.cal-nav:hover:not(:disabled) { border-color: var(--oro); background: rgba(200, 162, 74, .12); }
.cal-nav:disabled { opacity: .22; cursor: not-allowed; }
.cal-dias, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dias span { text-align: center; font-size: .62rem; letter-spacing: .16em; color: var(--oro); text-transform: uppercase; padding: 8px 0; }
.cal-celda {
  min-height: 46px; background: transparent; border: 1px solid transparent; color: var(--marfil);
  font-size: .88rem; font-weight: 400; transition: border-color .25s, background-color .25s, color .25s;
  display: grid; place-items: center; position: relative;
}
.cal-celda.dia:hover:not(:disabled) { border-color: var(--oro); background: rgba(200, 162, 74, .1); }
.cal-celda.cerrado { color: #3c3c40; cursor: not-allowed; }
.cal-celda.cerrado::after {
  content: ""; position: absolute; left: 28%; right: 28%; top: 50%; height: 1px; background: #3c3c40;
}
.cal-celda.elegido { background: var(--oro); color: var(--negro); font-weight: 500; border-color: var(--oro); }
.cal-celda.hoy:not(.elegido) { border-color: rgba(200, 162, 74, .5); }
.cal-leyenda { display: flex; gap: 18px; margin-top: 16px; font-size: .66rem; letter-spacing: .14em; color: var(--humo); text-transform: uppercase; flex-wrap: wrap; }
.cal-leyenda i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.cal-leyenda .libre { border: 1px solid var(--oro); }
.cal-leyenda .no { background: #3c3c40; }

/* --- Horas --- */
.horas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.hora {
  padding: 12px 4px; background: transparent; border: 1px solid var(--linea); color: var(--marfil);
  font-size: .84rem; letter-spacing: .06em; transition: border-color .25s, color .25s, background-color .25s;
}
.hora:hover:not(:disabled) { border-color: var(--oro); color: var(--oro); }
.hora.ocupada { color: #3c3c40; cursor: not-allowed; border-color: transparent; text-decoration: line-through; }
.hora[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--negro); font-weight: 500; }
.vacio {
  color: var(--humo); font-family: var(--ital); font-style: italic; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 96px; border: 1px dashed var(--linea); padding: 16px;
}

/* --- Resumen y formulario --- */
.resumen {
  border: 1px solid rgba(200, 162, 74, .35); background: rgba(200, 162, 74, .06);
  padding: 20px 24px; margin-bottom: 26px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.resumen div b { display: block; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--humo); margin-bottom: 6px; }
.resumen div span { font-family: var(--serif); color: var(--oro-claro); font-size: .98rem; }
.resumen-total { border-left: 1px solid rgba(200, 162, 74, .3); padding-left: 18px; }
.resumen-total span { font-size: 1.3rem !important; }

.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--humo); margin-bottom: 8px; }
.campo input, .campo select, .campo textarea {
  width: 100%; background: rgba(10, 10, 11, .7); border: 1px solid var(--linea); color: var(--marfil);
  padding: 13px 15px; font-family: var(--body); font-weight: 300; font-size: .95rem;
  transition: border-color .3s; outline: none; border-radius: 0;
}
.campo textarea { resize: vertical; min-height: 128px; }
.campo input::placeholder, .campo textarea::placeholder { color: #5f5a53; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--oro); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--error); }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8a24a' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo-ayuda { font-size: .72rem; color: var(--humo); margin-top: 7px; }

.consentimiento { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; font-size: .8rem; color: var(--humo); line-height: 1.6; }
.consentimiento input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--oro); flex-shrink: 0; }
.consentimiento a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }

.aviso { font-size: .85rem; margin-bottom: 14px; font-family: var(--ital); font-style: italic; display: none; }
.aviso.visible { display: block; }
.aviso.error { color: var(--error); }
.aviso.ok { color: var(--ok); }

.cargando { position: relative; color: transparent !important; pointer-events: none; }
.cargando::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border: 2px solid rgba(10, 10, 11, .3); border-top-color: var(--negro);
  border-radius: 50%; animation: rotar .7s linear infinite;
}
.btn:not(.btn-solido).cargando::after { border-color: rgba(200, 162, 74, .3); border-top-color: var(--oro); }
@keyframes rotar { to { transform: rotate(360deg); } }

/* --- Mis reservas --- */
.mis-reservas { max-width: var(--ancho); margin: 26px auto 0; }
.mis-reservas[hidden] { display: none; }
.reserva-fila {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--linea); background: rgba(12, 12, 14, .7); padding: 18px 22px; margin-bottom: 10px;
}
.reserva-fila .cod { font-family: var(--serif); color: var(--oro); letter-spacing: .12em; }
.reserva-fila .det { flex: 1; min-width: 200px; color: var(--humo-claro); font-size: .92rem; }
.reserva-fila .det b { color: var(--marfil); font-weight: 400; }
.reserva-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.enlace-mini {
  background: none; border: 1px solid var(--linea); color: var(--humo); padding: 8px 14px;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; transition: border-color .3s, color .3s;
}
.enlace-mini:hover { border-color: var(--oro); color: var(--oro); }
.enlace-mini.peligro:hover { border-color: var(--error); color: var(--error); }

/* =============================== CONTACTO =============================== */

.contacto { background: rgba(18, 18, 20, .96); }
.contacto-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; max-width: var(--ancho); margin: 0 auto; align-items: start; }
.contacto-info h3 { font-family: var(--serif); font-size: 1.8rem; margin-bottom: 12px; font-weight: 700; }
.contacto-info > p { color: var(--humo); line-height: 1.85; margin-bottom: 32px; }
.contacto-item { display: flex; gap: 18px; margin-bottom: 22px; align-items: flex-start; }
.contacto-icono {
  width: 46px; height: 46px; border: 1px solid var(--oro); color: var(--oro);
  display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; transform: rotate(45deg);
}
.contacto-icono i { transform: rotate(-45deg); font-style: normal; }
.contacto-item b { display: block; font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--oro); margin-bottom: 5px; }
.contacto-item p, .contacto-item a { color: var(--marfil); font-size: .94rem; line-height: 1.7; }
.contacto-item a:hover { color: var(--oro); }
.horario-lista { margin-top: 32px; border-top: 1px solid var(--linea); padding-top: 22px; }
.horario-lista li {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-bottom: 1px dashed var(--linea); font-size: .9rem; color: var(--humo);
}
.horario-lista li b { color: var(--marfil); font-weight: 400; }
.horario-lista li.hoy { color: var(--oro-claro); }
.horario-lista li.hoy b { color: var(--oro); }
.horario-lista li.cerrado span:last-child { color: #7a4437; }

.mapa {
  margin-top: 30px; border: 1px solid var(--linea); padding: 9px; background: var(--carbon);
}
.mapa iframe { width: 100%; height: 260px; border: 0; display: block; filter: grayscale(1) invert(.92) contrast(.86); }
.mapa-enlace { display: inline-block; margin-top: 12px; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.mapa-enlace:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================================ FOOTER ================================ */

.pie { background: #070708; border-top: 1px solid rgba(200, 162, 74, .28); position: relative; z-index: 1; }
.pie-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 46px;
  padding: 66px 6vw 48px; max-width: 1350px; margin: 0 auto;
}
.pie-col h5 { font-size: .68rem; letter-spacing: .36em; text-transform: uppercase; color: var(--oro); margin-bottom: 20px; }
.pie-col a, .pie-col p { display: block; color: var(--humo); font-size: .88rem; margin-bottom: 9px; transition: color .3s; }
.pie-col a:hover { color: var(--oro); }
.pie-marca p { max-width: 310px; line-height: 1.8; }
.pie-marca .logo { margin-bottom: 20px; }
.pie-bot {
  border-top: 1px solid var(--linea); padding: 22px 6vw; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-size: .74rem; color: #5c5c60; letter-spacing: .1em;
}
.pie-bot a { color: #5c5c60; }
.pie-bot a:hover { color: var(--oro); }
.pie-bot em { color: var(--oro); font-style: normal; }

/* ============================ MODAL Y AVISOS ============================ */

.modal {
  position: fixed; inset: 0; background: rgba(5, 5, 6, .92); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.modal.visible { display: flex; }
.modal-tarjeta {
  background: var(--carbon); border: 1px solid var(--oro); max-width: 540px; width: 100%;
  padding: 48px 44px; text-align: center; position: relative; animation: subir .5s ease; margin: auto;
}
@keyframes subir { from { transform: translateY(36px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-tarjeta::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(200, 162, 74, .3); pointer-events: none; }
.modal-cerrar {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  color: var(--humo); font-size: 1.5rem; line-height: 1; width: 38px; height: 38px; z-index: 1;
}
.modal-cerrar:hover { color: var(--oro); }
.modal-sello {
  width: 66px; height: 66px; border: 1px solid var(--oro); border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 20px; color: var(--oro); font-size: 1.5rem;
}
.modal-tarjeta h3 { font-family: var(--serif); font-size: 1.7rem; margin-bottom: 8px; }
.modal-tarjeta .ital { font-family: var(--ital); font-style: italic; color: var(--humo); margin-bottom: 24px; font-size: 1.05rem; }
.modal-detalle {
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  padding: 18px 0; margin-bottom: 20px; display: grid; gap: 9px; text-align: left;
}
.modal-detalle div { display: flex; justify-content: space-between; gap: 16px; font-size: .92rem; }
.modal-detalle b { color: var(--humo); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: .64rem; padding-top: 3px; }
.modal-detalle span { color: var(--oro-claro); text-align: right; }
.modal-codigo { font-size: .72rem; letter-spacing: .26em; color: var(--humo); margin-bottom: 22px; }
.modal-codigo b { color: var(--oro); }
.modal-acciones { display: grid; gap: 10px; }
.modal-nota { font-size: .74rem; color: var(--humo); margin-top: 16px; line-height: 1.6; }

.brindis {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 90px);
  background: var(--carbon); border: 1px solid var(--oro); color: var(--oro-claro);
  padding: 15px 30px; font-size: .84rem; letter-spacing: .1em; z-index: 300;
  transition: transform .5s ease; display: flex; gap: 12px; align-items: center; max-width: 90vw;
}
.brindis.visible { transform: translate(-50%, 0); }

/* Botón flotante de WhatsApp */
.wasap {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--carbon); border: 1px solid var(--oro); color: var(--oro);
  display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  transition: background-color .3s, color .3s, transform .3s;
}
.wasap:hover { background: var(--oro); color: var(--negro); transform: translateY(-3px); }
.wasap svg { width: 26px; height: 26px; }

/* =============================== LEGAL ================================== */

.legal { padding-top: calc(var(--nav-alto) + 60px); max-width: 860px; margin: 0 auto; }
.legal h1 { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.legal h2 { font-family: var(--serif); font-size: 1.35rem; color: var(--oro); margin: 40px 0 14px; }
.legal p, .legal li { color: var(--humo); line-height: 1.9; margin-bottom: 12px; }
.legal ul { padding-left: 22px; list-style: disc; }
.legal .actualizado { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--humo); margin-bottom: 30px; }

/* ============================== REVELADO ================================ */

html.js .revelar { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
html.js .revelar.visible { opacity: 1; transform: none; }

/* ============================== RESPONSIVE ============================== */

@media (max-width: 1080px) {
  .servicios-grid, .maestros-grid, .resenas-grid { grid-template-columns: repeat(2, 1fr); }
  .ritual-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .reservas-grid, .contacto-grid, .casa-grid { grid-template-columns: 1fr; }
  .casa-collage { padding-bottom: 40px; }
  .pie-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .resenas-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .nav-enlaces, .nav-tel, .nav .btn { display: none; }
  .hamburguesa { display: flex; }
  .menu-movil {
    display: block; position: fixed; top: 0; right: 0; width: 82%; max-width: 340px; height: 100dvh;
    background: var(--carbon); z-index: 150; border-left: 1px solid rgba(200, 162, 74, .3);
    padding: 96px 34px 34px; transform: translateX(101%); transition: transform .45s ease;
    overflow-y: auto;
  }
  .menu-movil.abierto { transform: translateX(0); }
  .menu-movil a {
    display: block; font-family: var(--serif); font-size: 1.22rem; padding: 15px 0;
    border-bottom: 1px solid var(--linea); color: var(--marfil);
  }
  .menu-movil a:hover { color: var(--oro); }
  .menu-movil .btn { margin-top: 26px; display: block; }
  .menu-movil .movil-tel { font-family: var(--body); font-size: .86rem; letter-spacing: .16em; color: var(--oro); border: 0; }
}

@media (max-width: 700px) {
  section { padding: 76px 6vw; }
  .hero-pre { font-size: .66rem; letter-spacing: .38em; gap: 10px; }
  .hero-pre::before, .hero-pre::after { width: 26px; }
  .hero-aviso { display: block; line-height: 1.7; }
  .punto-vivo { display: inline-block; margin-right: 8px; vertical-align: middle; }
  .cal-celda { min-height: 40px; font-size: .82rem; }
  .servicios-grid, .maestros-grid, .resenas-grid, .ritual-grid { grid-template-columns: 1fr; }
  .resenas-grid > :last-child { grid-column: auto; }
  .horas-grid { grid-template-columns: repeat(3, 1fr); }
  .fila2, .opciones-2 { grid-template-columns: 1fr; }
  .panel { padding: 26px 20px; }
  .resumen { grid-template-columns: 1fr 1fr; padding: 18px; }
  .resumen-total { border-left: 0; padding-left: 0; }
  .casa-datos { gap: 26px; }
  .casa-img-principal img { height: 380px; }
  .casa-img-flotante { width: 52%; }
  .casa-img-flotante img { height: 170px; }
  .maestro-foto img { height: 340px; }
  .pie-top { grid-template-columns: 1fr; }
  .modal-tarjeta { padding: 38px 24px; }
  .pie-bot { justify-content: center; text-align: center; }
  .wasap { right: 16px; bottom: 16px; }
}

@media (max-width: 400px) {
  .horas-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-pre::before, .hero-pre::after { display: none; }
  .btn { padding: 14px 26px; letter-spacing: .2em; }
}

/* ====================== PREFERENCIA DE MENOS MOVIMIENTO ================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-fondo { animation: none; transform: none; }
  html.js .revelar { opacity: 1; transform: none; }
}

/* ============================== IMPRESIÓN =============================== */

@media print {
  .nav, .menu-movil, .wasap, .indicador, .marquesina, .reservas, .brindis, .poste,
  .franja-poste, .corte { display: none !important; }
  .ritual, .resenas, .contacto, .galeria,
  .servicio, .panel, .resena { background: #fff !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
}

/* =============================== GALERÍA ================================ */

.galeria { background: rgba(18, 18, 20, .96); }

.galeria-mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 14px;
  max-width: var(--ancho);
  margin: 0 auto;
}

.pieza {
  grid-column: span 1; grid-row: span 2;
  position: relative; overflow: hidden; padding: 0;
  border: 1px solid var(--linea); background: #0c0c0f;
  cursor: zoom-in; display: block; width: 100%;
  transition: border-color .4s ease, transform .5s ease;
}
.pieza.grande { grid-column: span 2; grid-row: span 3; }
.pieza.ancha { grid-column: span 2; grid-row: span 2; }

.pieza img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1), filter .5s ease;
}
.pieza::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,11,0) 45%, rgba(10,10,11,.9) 100%);
  opacity: 0; transition: opacity .45s ease;
}
.pieza:hover, .pieza:focus-visible { border-color: rgba(200, 162, 74, .6); }
.pieza:hover img, .pieza:focus-visible img { transform: scale(1.07); filter: brightness(1.06); }
.pieza:hover::after, .pieza:focus-visible::after { opacity: 1; }

.pieza-pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 18px 20px; text-align: left;
  transform: translateY(14px); opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
}
.pieza-pie span {
  font-family: var(--serif); font-size: 1rem; color: var(--marfil);
  display: block; line-height: 1.3;
}
.pieza-pie::before {
  content: ""; display: block; width: 30px; height: 1px;
  background: var(--oro); margin-bottom: 10px;
}
.pieza:hover .pieza-pie, .pieza:focus-visible .pieza-pie { transform: none; opacity: 1; }

.pieza-lupa {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 34px; height: 34px; border: 1px solid var(--oro); color: var(--oro);
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  background: rgba(10, 10, 11, .55); opacity: 0; transform: scale(.8);
  transition: opacity .35s ease, transform .35s ease;
}
.pieza:hover .pieza-lupa, .pieza:focus-visible .pieza-lupa { opacity: 1; transform: none; }

/* --------------------------------- visor -------------------------------- */

.visor {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(5, 5, 6, .96);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; opacity: 0; transition: opacity .3s ease;
}
.visor.visible { opacity: 1; }
.visor[hidden] { display: none; }

.visor-marco {
  margin: 0; max-width: min(920px, 92vw); max-height: 88svh;
  display: flex; flex-direction: column; border: 1px solid rgba(200, 162, 74, .35);
  background: var(--carbon); animation: subir .45s ease;
}
.visor-marco img {
  max-width: 100%; max-height: calc(88svh - 66px); object-fit: contain;
  display: block; margin: 0 auto; background: #0c0c0f;
}
.visor-marco figcaption {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 15px 20px; border-top: 1px solid var(--linea);
  font-family: var(--serif); font-size: 1rem; color: var(--marfil);
}
.visor-cuenta {
  font-family: var(--body); font-size: .68rem; letter-spacing: .26em;
  color: var(--humo); white-space: nowrap;
}

.visor-flecha, .visor-cerrar {
  background: rgba(18, 18, 20, .9); border: 1px solid var(--linea); color: var(--oro);
  width: 48px; height: 48px; font-size: 1.6rem; line-height: 1; flex-shrink: 0;
  transition: border-color .3s, background-color .3s;
}
.visor-flecha:hover:not(:disabled), .visor-cerrar:hover {
  border-color: var(--oro); background: rgba(200, 162, 74, .15);
}
.visor-flecha:disabled { opacity: .25; cursor: not-allowed; }
.visor-cerrar { position: absolute; top: 20px; right: 20px; font-size: 1.5rem; z-index: 2; }

@media (max-width: 1080px) {
  .galeria-mosaico { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; }
}
@media (max-width: 700px) {
  .galeria-mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 118px; gap: 10px; }
  .pieza.grande { grid-column: span 2; grid-row: span 3; }
  .pieza.ancha { grid-column: span 2; grid-row: span 2; }
  .pieza-pie { padding: 14px; }
  .pieza-pie span { font-size: .88rem; }
  /* En el móvil no hay hover: el pie se ve siempre. */
  .pieza-pie { opacity: 1; transform: none; }
  .pieza::after { opacity: .85; }
  .visor { padding: 12px; }
  .visor-flecha { position: absolute; bottom: 20px; }
  .visor-flecha.izq { left: 20px; }
  .visor-flecha.der { right: 20px; }
  .visor-marco { max-height: 78svh; }
  .visor-marco img { max-height: calc(78svh - 66px); }
}

/* ================================ MÁRMOL ================================ */

/*
 * La losa (assets/img/marmol.svg) la genera tools/generar-arte.mjs. Va
 * siempre bajo un velo oscuro: la piedra a pelo se come el texto, y lo que
 * se busca es que se intuya al mover la página, no que compita con ella.
 *
 * En las tarjetas no se escala con `cover`, sino a un tamaño fijo: si la
 * losa se estirase al tamaño de cada tarjeta, las vetas saldrían gruesas en
 * las grandes y finas en las pequeñas, y se notaría que no es piedra de
 * verdad. A tamaño fijo todas parecen cortadas del mismo bloque.
 */

:root { --losa: url('../assets/img/marmol.webp'); }

/* Velos sobre la losa de fondo, no losas nuevas. Así la web alterna piedra
   vista y piedra en sombra sin que se vean dos mármoles distintos.

   Las secciones de texto corrido llevan velo aunque sea flojo: sin él, una
   veta blanca cruzando por detrás de un párrafo se lo come. El mármol se
   sigue viendo, pero no compite con lo que hay que leer. */
/* El .58 no es a ojo: con el velo a .46 el punto más claro que le caía detrás
   al párrafo de La Casa era rgb(66,65,69), y contra el gris del texto daba
   3,81:1, por debajo del 4,5:1 que pide la norma para texto corrido. Para
   bajar ese pico a 55 y llegar al 4,5 hace falta velar el 58 %. */
#la-casa,
#servicios,
#maestros {
  background: linear-gradient(rgba(8, 8, 11, .58), rgba(8, 8, 11, .63));
}

.ritual,
.resenas,
.contacto,
.galeria {
  background: linear-gradient(rgba(7, 7, 10, .62), rgba(5, 5, 8, .72));
}

.servicio,
.panel,
.resena {
  background:
    linear-gradient(160deg, rgba(23, 23, 26, .86), rgba(11, 11, 14, .92)),
    var(--losa) 30% 40% / 760px auto;
}

.servicio:nth-child(2)  { background-position: center, 62% 12%; }
.servicio:nth-child(3)  { background-position: center, 12% 78%; }
.servicio:nth-child(4)  { background-position: center, 84% 56%; }
.servicio:nth-child(5)  { background-position: center, 38% 30%; }
.servicio:nth-child(6)  { background-position: center, 70% 88%; }
.resena:nth-child(2)    { background-position: center, 66% 20%; }
.resena:nth-child(3)    { background-position: center, 22% 64%; }

/* El brillo del pulido: una lama de luz que cruza la tarjeta al pasar por
   encima. Es lo que separa una superficie mate de uno pulido. */
.servicio::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .05) 47%, transparent 56%);
  transform: translateX(-120%);
  transition: transform .9s ease;
}
.servicio:hover::after { transform: translateX(120%); }

/* ========================= FRANJA DE POSTE DE BARBERO ==================== */

/*
 * El poste clásico, desenrollado en una cinta.
 *
 * Tres decisiones que vienen de que la primera versión se veía serrada:
 *
 * 1. ALTURA. Con 7px de alto y franjas de 10px, cada franja cruzaba la banda
 *    en un pelo y solo se veían esquirlas. A 18px la diagonal se lee.
 * 2. BORDES. Los cortes duros (`#a3242e 0 10px, #f3e8d6 10px 20px`) no dejan
 *    antialias: el navegador pinta el salto de color en el píxel exacto y la
 *    diagonal sale con dientes de sierra. Separando cada parada un píxel
 *    (`0 9px, 10px 19px`) queda un degradado de 1px que suaviza el filo.
 * 3. MOVIMIENTO. Antes se animaba `background-position`, y eso obliga a
 *    repintar el degradado en cada fotograma, con las paradas cayendo en
 *    posiciones subpíxel distintas: de ahí el parpadeo. Ahora se mueve una
 *    capa con `transform`, que va por compositor y no repinta nada.
 *
 * El bucle desplaza exactamente un periodo horizontal. Para un degradado a
 * un ángulo A, ese periodo es P / |sen A|; con P = 40px y A = -60° salen
 * 46.19px.
 */

.franja-poste {
  position: relative;
  height: 18px;
  overflow: hidden;
  border-top: 1px solid rgba(200, 162, 74, .45);
  border-bottom: 1px solid rgba(200, 162, 74, .45);
  background: #1a1013;
}

.franja-poste::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(100% + 47px);
  background-image: repeating-linear-gradient(
    -60deg,
    #8f2531 0 9px,
    #e9dcc3 10px 19px,
    #1f3a63 20px 29px,
    #e9dcc3 30px 39px,
    #8f2531 40px);
  animation: poste-rodar 2.4s linear infinite;
}
@keyframes poste-rodar { to { transform: translateX(-46.19px); } }

/* Sombreado de cilindro: oscuro arriba y abajo, brillo alto justo por encima
   del centro. Es lo que separa un poste de una cinta de caramelo plana. */
.franja-poste::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .62) 0,
    rgba(0, 0, 0, .12) 16%,
    rgba(255, 255, 255, .26) 38%,
    rgba(255, 255, 255, .03) 56%,
    rgba(0, 0, 0, .3) 80%,
    rgba(0, 0, 0, .66) 100%);
}

/* El poste vertical de la portada deja de ser cosa de pantallas grandes. */
@media (min-width: 760px) { .poste { display: flex; flex-direction: column; } }
@media (max-width: 1159px) {
  .poste { width: 20px; height: 130px; right: 3vw; opacity: .75; }
  .poste-tapa { height: 13px; }
}

/* =========================== TIJERAS ANIMADAS =========================== */

/*
 * Las dos hojas giran sobre el eje, que está en el (0,0) del sistema de
 * coordenadas del SVG. Con `transform-box: view-box` el origen se mide
 * desde la esquina del viewBox, de ahí que haya que compensar con los
 * mismos números que el viewBox lleva en negativo.
 */

.tijeras { width: 72px; height: auto; overflow: visible; color: var(--oro); }
.tijeras-filo { fill: currentColor; opacity: .92; }
/* La forma de la hoja va en el atributo `d` de cada <path> del HTML, no aquí.
   Son dos curvas que se encuentran en un punto: ahí está la punta. La versión
   anterior cerraba con un casquete redondeado de radio 6, y a 54 px parecía que
   las tijeras estuvieran romas. La punta llega a x=306 y el viewBox acaba en
   310: si se alarga más, la hoja se sale del marco y pisa lo que tenga al lado. */
.tijeras-mango { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; }
.tijeras-anilla { fill: none; stroke: currentColor; stroke-width: 11; }
.tijeras-eje { fill: currentColor; }
/* La hoja de abajo se refleja con el atributo `transform` del SVG, no con
   CSS: el atributo trabaja en coordenadas de usuario y refleja sobre el eje
   y=0, que es justo donde está el tornillo. Con `transform` de CSS habría
   que pelearse otra vez con transform-box y el punto de giro. */

.tijeras-hoja {
  transform-box: view-box;
  transform-origin: 150px 80px;
  animation: tijeretazo 3.4s ease-in-out infinite;
}
.tijeras-baja { animation-name: tijeretazo-baja; }

@keyframes tijeretazo {
  0%, 54%, 100% { transform: rotate(-8deg); }
  62%           { transform: rotate(-1deg); }
  70%           { transform: rotate(-8deg); }
  78%           { transform: rotate(-1.5deg); }
  86%           { transform: rotate(-8deg); }
}
@keyframes tijeretazo-baja {
  0%, 54%, 100% { transform: rotate(8deg); }
  62%           { transform: rotate(1deg); }
  70%           { transform: rotate(8deg); }
  78%           { transform: rotate(1.5deg); }
  86%           { transform: rotate(8deg); }
}

/* En los remates de sección las tijeras sustituyen al glifo ✂: mismo hueco,
   mismas líneas de oro a los lados. */
.orn .tijeras { margin-top: -2px; }

/* ============================ LÍNEA DE CORTE ============================ */

/*
 * Separador: una línea de puntos y unas tijeras que la recorren, como el
 * «recorte por aquí» de un cupón.
 */

/* A todo el ancho a propósito: las tijeras se desplazan en vw, así que el
   recorrido solo cuadra si el contenedor mide lo mismo que la ventana. */
.corte {
  position: relative;
  height: 34px;
  overflow: hidden;
}
.corte::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--oro) 0 9px, transparent 9px 20px);
  opacity: .45;
}
.corte .tijeras {
  position: absolute; top: 50%; left: 0;
  width: 54px;
  margin-top: -9px;
  animation: recorrer-corte 13s linear infinite;
}
@keyframes recorrer-corte {
  from { transform: translateX(-8vw); }
  to   { transform: translateX(104vw); }
}

/* El captcha de Cloudflare. Solo aparece si hay clave de sitio configurada. */
.captcha { margin-bottom: 18px; min-height: 0; }
.captcha:not([hidden]) { display: flex; justify-content: center; }

/* ============================================================================
   AJUSTES DE MÓVIL
   ----------------------------------------------------------------------------
   Todo lo de aquí sale de medir la web en dispositivos reales con
   pruebas/responsive.mjs, no de suponer. Cada bloque dice qué se medía mal.
   ========================================================================== */

/* --- 1. LA BARRA NO CABÍA, Y ARRASTRABA LA PÁGINA ENTERA -------------------
   Medido: la barra ocupaba 376 px dentro de una ventana de 320, y 379 dentro de
   una de 360. Como es lo más ancho del documento, cualquier móvil de menos de
   ~380 px de ancho tenía scroll lateral — iPhone SE y iPhone 13 mini incluidos.

   La causa: `.logo-texto` llevaba `white-space: nowrap`, así que «DANDY BARBERS»
   no podía partirse y la barra crecía hasta caber. Como además es `position:
   fixed` con `left:0; right:0`, al crecer se llevaba por delante el ancho del
   documento.

   Se arregla por los dos lados: se le fija el ancho para que no pueda crecer, y
   se encoge el contenido para que no haga falta. */
.nav { width: 100%; max-width: 100vw; }
.logo { min-width: 0; }

@media (max-width: 480px) {
  .nav { padding: 16px 18px; }
  .nav.compacta { padding: 11px 18px; }
  .logo { gap: 10px; }
  .logo-marca { width: 44px; }
  .logo-texto { font-size: 1.04rem; }
  /* De .53rem (8,48 px) a .58rem: era letra de pie de página en un sitio
     donde hay que leerla de un vistazo. */
  .logo-sub { font-size: .58rem; letter-spacing: .2em; }
}

@media (max-width: 380px) {
  /* A este ancho el lema no cabe sin comerse el nombre. No se pierde nada: está
     repetido en la portada, en letra grande. */
  .logo-sub { display: none; }
  .logo-texto { font-size: 1rem; letter-spacing: .03em; }
  .logo-marca { width: 40px; }
}

/* --- 2. EL FONDO DE MÁRMOL SE VEÍA POBRE EN VERTICAL ------------------------
   La losa es apaisada (2800×1800). Con `cover` en una pantalla de móvil
   —430 de ancho por 932 de alto— el navegador la escala hasta cubrir el alto y
   solo deja ver un 37 % de su ancho: una tira estrecha del centro, con dos
   vetas sueltas y mucho negro plano. En escritorio se ve la losa entera y por
   eso allí sí luce.

   En vez de generar una segunda imagen vertical (otros 160 KB que descargar),
   se gira la que ya hay. Al rotarla 90° el recuadro pasa a ser apaisado otra
   vez, así que `cover` recorta por el lado largo y se ve la veta completa.
   El mármol se corta en ambos sentidos, así que girado no se nota.

   La condición es la orientación y no solo el ancho: el problema aparece cuando
   la pantalla es más alta que ancha. Un móvil tumbado (932×430) ya es apaisado
   y ahí la losa se ve entera sin tocar nada. */
@media (orientation: portrait) and (max-width: 900px) {
  html::before {
    /* Ancho y alto se intercambian: al girar, el ancho del elemento es lo que
       se verá como alto en pantalla. */
    width: 100vh;
    width: 100lvh;
    height: 100vw;
    transform-origin: 0 0;
    /* El orden importa: primero gira y luego se desplaza para volver a entrar
       en pantalla, porque al rotar sobre la esquina se sale por la izquierda.
       El desplazamiento va en vw y no en %, porque el % se mide sobre el ancho
       del propio elemento, que aquí es el alto de la ventana. */
    transform: translateX(100vw) rotate(90deg);
  }
}

/* --- 3. LA FOTO FLOTANTE SE COMÍA LA PRINCIPAL ------------------------------
   En escritorio es un collage: una foto grande y otra pequeña encima, en la
   esquina. En un móvil la pequeña ocupa más de la mitad del ancho y tapa justo
   el centro de la grande, que es donde está el sillón.

   Por debajo de 560 px deja de ir superpuesta y pasa a colocarse debajo,
   montada solo unos píxeles para que no se pierda el aire del collage. */
@media (max-width: 560px) {
  .casa-collage { padding-bottom: 0; }
  .casa-img-flotante {
    position: static;
    width: 74%;
    margin: -38px 0 0 auto;
    right: auto; bottom: auto;
  }
  .casa-img-flotante img { height: 190px; }
}

/* --- 4. OBJETIVOS DEMASIADO PEQUEÑOS PARA UN DEDO ---------------------------
   La recomendación es 44×44 px. Medido: los días del calendario quedaban en
   30×40 en pantallas estrechas, y el botón del menú en 42×31. */
@media (max-width: 700px) {
  .cal-celda { min-height: 44px; }
  .hamburguesa { padding: 12px 8px; }
  .consentimiento input { width: 22px; height: 22px; }
}

/* --- 5. TEXTO POR DEBAJO DE LO LEGIBLE --------------------------------------
   `.hero-pre` bajaba a 10,56 px en móvil, con mucho espaciado entre letras
   encima, que es lo que termina de hacerlo ilegible. */
@media (max-width: 700px) {
  .hero-pre { font-size: .72rem; }
}

/* --- 6. LA TRAMPA DE `1fr` EN CSS GRID --------------------------------------
   Medido: el panel de reservas ocupaba 357 px dentro de una ventana de 320 y
   era, tras arreglar la barra, lo que seguía provocando scroll lateral.

   El motivo no es el panel: es la rejilla que lo contiene. Una columna `1fr`
   es en realidad `minmax(auto, 1fr)`, y ese `auto` significa «nunca más
   estrecha que su contenido mínimo». Si algo dentro no puede encoger, la
   columna crece y se lleva por delante el ancho de la página, por mucho que el
   contenedor tenga el ancho correcto. Con `minmax(0, 1fr)` se le permite
   encoger y el contenido se adapta. */
@media (max-width: 1080px) {
  .reservas-grid, .contacto-grid, .casa-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- 7. LA PORTADA RECORTABA AL PELUQUERO DE LA DERECHA ---------------------
   La foto de portada es apaisada (2400×1350). En escritorio se ve entera o casi
   —un 90 % de su ancho—, pero en un móvil en vertical el navegador la amplía
   hasta llenar el alto y solo deja ver un 33 %. Y como estaba centrada, ese 33 %
   es la franja del medio: lo que hay a los lados desaparece.

   No es que falte nada en la foto, es que no cabe. Se arregla moviendo el punto
   por el que se encuadra, igual que al recortar una foto a mano.

   AJUSTAR ESTO ES CAMBIAR UN NÚMERO: 50% es el centro, 100% el borde derecho.
   Para encontrar el valor bueno sin esperar a un despliegue, abre la web en el
   móvil o en el navegador estrecho y pega esto en la consola:

     document.documentElement.style.setProperty('--foco-portada', '85%')

   Se ve el cambio al instante. Cuando des con el que te gusta, se pone aquí. */
@media (orientation: portrait) and (max-width: 900px) {
  /* 78 % dejaba al peluquero todavía fuera del recorte. A 92 % queda pegado al
     borde derecho pero entero; a 100 % se vería el borde mismo de la foto. */
  :root { --foco-portada: 92%; }
  .hero-fondo { background-position: var(--foco-portada) bottom; }
}