/* ===========================================================================
   Sitio publico — Salon Marco Iglesias
   Movil primero (regla 625): el CSS base es el de celular y se ensancha con
   min-width. Nunca al reves.
   =========================================================================== */

:root {
  /* Regla 615: monocromo. Sin dorado. El unico color del sitio sale de las
     fotos de los trabajos (regla 616), que es el unico acento que ningun
     competidor puede copiar porque es el trabajo del salon. */
  --carbon: #1A1917;
  --carbon-suave: #232120;
  --hueso: #F2EEE7;
  --gris: #8C8880;
  --linea: rgba(242, 238, 231, 0.14);

  /* Regla 617: el gesto grafico es el corte diagonal del isotipo, donde la M
     y la I estan rebanadas por tajos inclinados. Ese mismo angulo separa las
     secciones. No se dibujan tijeras: el corte ya esta en la marca. */
  --tajo: 2.6rem;

  --ancho: 68rem;
  /* Aire sobre la imagen del hero. Antes la figura arrancaba pegada al borde
     de la pantalla y la cabecera le caia encima de la cabeza; con esta franja
     de fondo arriba, el menu flota sobre el fondo y la foto respira. */
  --aire-hero: 76px;
  /* Regla 624: el hero no se estira mas alla de la resolucion real del
     material. Un cuadro de 1920 px a pantalla completa en un monitor grande se
     ve blando, y esa es la perdida real de nitidez. */
  --hero-max: 1920px;
}

* { box-sizing: border-box; }

/* El atributo hidden tiene que ganarle a cualquier display puesto por una
   clase. Sin esto, .filtros { display: flex } deja el buscador a la vista
   cuando el codigo lo oculta porque los precios no cargaron: queda un campo
   que no filtra nada sobre un mensaje de error. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--carbon);
  color: var(--hueso);
  font-family: Jost, system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  /* Ni una pagina puede desbordar a lo ancho en celular. */
  overflow-x: hidden;
}

img, video, canvas, iframe { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3 {
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  /* El logotipo es monolineal y de trazo fino: los titulares lo acompanan con
     peso ligero y tracking cerrado, no con mayusculas espaciadas. */
}
h1 { font-size: clamp(2.3rem, 9vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 5.5vw, 2.9rem); }
h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: 0; margin-bottom: .4em; }

p { margin: 0 0 1em; max-width: 62ch; }

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

.envoltorio { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

/* El foco se ve siempre y en todo: se navega con teclado y con lector. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--hueso);
  outline-offset: 3px;
}

/* --- Botones --------------------------------------------------------------
   44 px de alto minimo en todo lo tocable (regla 625). */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1.3rem;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--hueso);
  font: inherit;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.boton:hover { border-color: var(--hueso); }
.boton-fuerte { background: var(--hueso); color: var(--carbon); border-color: var(--hueso); font-weight: 500; }
.boton-fuerte:hover { background: #fff; }

/* --- Aviso de portada ----------------------------------------------------- */
.aviso {
  background: var(--hueso);
  color: var(--carbon);
  padding: .7rem 1rem;
  text-align: center;
  font-size: .95rem;
}

/* --- Cabecera -------------------------------------------------------------- */
/* Se queda arriba mientras se baja, y empieza transparente sobre la foto: el
   hero se ve entero y la navegacion nunca se pierde de vista. Al dejar atras el
   hero toma fondo, porque sobre texto claro un menu transparente no se lee.
   La clase .cabecera-posada la pone sitio.js. */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: transparent;
  transition: background-color .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
/* Transparente TODO el recorrido, no solo sobre el hero (pedido de Marco,
   2026-10-14). El unico riesgo es el carrusel: cuando pasa por detras una foto
   de pelo rubio, un menu sin nada detras se vuelve ilegible. Por eso lleva un
   velo que se desvanece hacia abajo, lo justo para sostener el texto. No es un
   degradado decorativo con brillo de los que prohibe la regla 618: es una
   sombra plana cuyo unico trabajo es que se lean cuatro palabras. */
/* COMPLETAMENTE transparente todo el recorrido (pedido de Marco, 2026-10-14).
   Sin velo ni sombra de fondo: la barra no existe, solo flotan el logo y los
   enlaces.
   El riesgo esta medido: cuando pasa por detras una foto de pelo rubio del
   carrusel, el texto sobre blanco puro cae a 1.78:1 y WCAG pide 4.5:1. Sin
   fondo que lo sostenga, lo sostiene el propio texto con un contorno oscuro.
   Es una sombra negra para poder leer, no un resplandor de color de los que
   prohibe la regla 618. */
.cabecera-posada { background: transparent; border-bottom-color: transparent; }
.cabecera .cabecera-nav a,
.cabecera .cabecera-marca {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 0 10px rgba(0, 0, 0, .85),
    0 0 22px rgba(0, 0, 0, .6);
}
.cabecera-marca img { width: 128px; height: auto; }

/* En celular tambien se ve el menu: antes estaba oculto y la unica forma de
   llegar a una seccion era bajar a pulso. Se desplaza en horizontal si no cabe,
   igual que las pestanas de Configuracion. */
.cabecera-nav {
  display: flex;
  gap: 1rem;
  font-size: .9rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.cabecera-nav::-webkit-scrollbar { display: none; }
.cabecera-nav a {
  text-decoration: none;
  color: var(--hueso);
  opacity: .8;
  padding: .6rem .2rem;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.cabecera-nav a:hover { opacity: 1; }

/* --- Hero ------------------------------------------------------------------
   La altura de la seccion es cuanto dura el scrub; dentro, un bloque pegajoso
   de una pantalla. El margen negativo lo mete bajo la cabecera transparente. */
/* Mas corto que antes: la secuencia ya no se acaba aqui, sigue corriendo
   detras de los precios, asi que no hace falta reservarle tres pantallas. Se
   llega antes a lo que la clienta viene a buscar. */
.hero { height: 180vh; position: relative; z-index: 1; }
.hero-fijo {
  position: sticky;
  top: var(--aire-hero);
  height: calc(100svh - var(--aire-hero));
}

/* Regla 624 y Review Focus 5: el poster es un <img> real, se ve SIEMPRE, y el
   canvas solo aparece cuando ya tiene un cuadro dibujado. Si las imagenes no
   llegan nunca, queda el poster. Nunca un rectangulo en blanco. */
/* LA ESCENA DE FONDO. Fija detras de TODA la pagina, no solo del hero: las
   secciones pasan por delante y el video sigue ahi. Por eso es position: fixed
   a nivel de documento y no sticky dentro de una seccion; encerrada en una,
   desaparecia al bajar. */
/* Llega hasta el borde de arriba, por DETRAS del menu: una cabecera
   transparente sobre una banda de fondo solido se sigue viendo opaca. El texto
   del hero no se mueve, porque cuelga de --aire-hero por su cuenta. */
.fondo-escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--carbon);
  pointer-events: none;
}
.fondo-escena picture { display: contents; }
.hero-poster, .hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: var(--hero-max);
  margin: 0 auto;
  object-fit: cover;
  /* Anclada ARRIBA, no al centro. Con el centro, cualquier pantalla mas baja de
     lo previsto -y la barra del navegador en un telefono real quita 150 px- se
     come lo que sobra por arriba Y por abajo, y lo primero que se pierde es la
     cabeza. Anclada arriba, lo que se recorta son los pies, que ademas quedan
     tapados por el bloque de texto. El encuadre del video ya trae aire sobre la
     cabeza: ese aire es el que ahora se ve siempre. */
  object-position: center top;
}
.hero-canvas { opacity: 0; transition: opacity .3s ease; }
.fondo-listo .hero-canvas { opacity: 1; }

/* El texto se lee sobre la parte baja de la imagen: una sombra plana, sin
   degradado con brillo (regla 618). */
.hero-fijo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(26, 25, 23, .92), rgba(26, 25, 23, 0));
  pointer-events: none;
}

/* Regla 618: no todo centrado. El contenido se ancla abajo a la izquierda. */
.hero-contenido {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  /* Deja aire para la barra fija de abajo: sin esto el ultimo boton del hero
     queda debajo de ella. */
  padding: 0 1rem 5.2rem;
}
.hero-bajada { color: var(--hueso); opacity: .85; max-width: 38ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
/* En celular la barra inferior fija ya ofrece Reservar desde el primer pixel
   (regla 622), y ademas no se va nunca. Repetirlo aqui deja dos botones
   identicos pegados uno encima del otro, que se lee como un error. */
.hero-acciones .boton-fuerte { display: none; }

/* --- Estado en vivo -------------------------------------------------------- */
.estado {
  position: relative;
  z-index: 1;
  background: var(--carbon-suave);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: .9rem 1rem;
  font-size: .95rem;
}
.estado p, .estado a { margin: 0; max-width: none; }
.estado-ahora { display: flex; align-items: center; gap: .55rem; }
.estado-donde { color: var(--gris); text-decoration: none; display: inline-block; padding: .4rem 0; }
.estado-donde:hover { color: var(--hueso); }
/* El punto es un cuadrado cortado en diagonal, no un circulo: es el mismo tajo
   de la marca a tamano minimo. */
.punto {
  width: .6rem; height: .6rem; flex: 0 0 auto;
  background: var(--gris);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.estado-abierto .punto { background: var(--hueso); }

/* --- Secciones ------------------------------------------------------------- */
/* Al saltar desde el menu, el navegador deja la seccion pegada al borde de
   arriba y la cabecera fija le tapa el titulo. Este margen de desplazamiento
   la deja justo debajo. */
.seccion, [id] { scroll-margin-top: calc(var(--aire-hero) + 1rem); }
/* Pasan POR DELANTE de la escena, asi que llevan fondo propio y se apilan
   encima. Sin fondo, el texto caeria sobre una imagen en movimiento y no
   habria forma de leerlo. */
.seccion {
  position: relative;
  z-index: 1;
  background: var(--carbon);
  padding: 3.5rem 0;
}
.seccion-bajada { color: var(--gris); }

/* Regla 617: el corte diagonal del isotipo separa secciones. */
.corte-diagonal {
  position: relative;
  background: var(--carbon-suave);
  clip-path: polygon(0 var(--tajo), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--tajo) * -1);
  padding-top: calc(3.5rem + var(--tajo));
}
/* Dentro de una paleta monocroma los dos fondos estan demasiado cerca para que
   el canto del tajo se vea solo: medido en pantalla, la diagonal desaparecia.
   Un filete sobre el corte lo hace legible, y ademas es mas fiel a la marca:
   el logotipo esta construido con lineas de un pelo, no con masas. */
.corte-diagonal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--tajo) + 2px);
  background: rgba(242, 238, 231, 0.3);
  clip-path: polygon(0 var(--tajo), 100% 0, 100% 2px, 0 calc(var(--tajo) + 2px));
  pointer-events: none;
}

/* Ventana a la escena de fondo: un tramo sin nada encima por el que vuelve a
   verse el video. No lleva contenido ni fondo a proposito; su unico trabajo es
   separar dos secciones y dejar pasar la imagen. */
.ventana-escena {
  position: relative;
  z-index: 0;
  height: 56vh;
}
@media (min-width: 48rem) { .ventana-escena { height: 64vh; } }

/* --- Servicios -------------------------------------------------------------
   SOLO esta seccion deja ver la escena de fondo (pedido de Marco, 2026-10-14):
   el resto va opaco. Es un velo PLANO, no vidrio esmerilado: la regla 618
   prohibe el desenfoque de fondo por ser uno de los delatores del estilo
   generado por IA, y ademas en celular cuesta caro de dibujar.
   La opacidad no es un gusto. Se mide el contraste del texto contra el pixel
   MAS CLARO de toda la secuencia, no contra el fondo negro, que seria hacerse
   trampa.
   Corregido el 2026-10-18 al pasar los cuadros a WebP: la medicion anterior
   tomaba 228,211,200 -un brillo en la cara- y daba 6.8:1. Barriendo los 120
   cuadros entero aparecen 157 pixeles de BLANCO PURO en f_042, repartidos por
   el centro de la escena, que es justo por donde pasa el texto. El peor caso
   real es 255,255,255 y con 0.70 da 5.6:1: cumple el minimo de 4.5:1 que pide
   WCAG, con un 25% de margen, no el 50% que decia esta nota.
   Como 255 es el techo, ninguna recompresion puede empeorarlo: el paso a WebP
   dejo el contraste intacto en 5.6:1. Margen para bajar el velo queda poco:
   0.65 da 4.7:1 y 0.60 ya cae a 4.0:1, que NO cumple.
   Si algun dia se cambia el video del hero, HAY QUE VOLVER A MEDIR esto:
     python3 scripts/medir-velo-servicios.py public/sitio/hero/escritorio 0.70
   Barre todos los cuadros; no sirve elegir un pixel claro a ojo, que es como
   se colo el error anterior. */
#servicios {
  background: rgba(26, 25, 23, 0.70);
}
/* El tajo diagonal se dibuja sobre el velo, asi que tambien se transparenta un
   poco: si quedara opaco se veria como una tapa pegada encima. */
#servicios::before { background: rgba(242, 238, 231, 0.22); }

/* --- Servicios ------------------------------------------------------------- */
.filtros { display: flex; flex-direction: column; gap: .8rem; margin: 1.6rem 0 1.2rem; }
.busca input {
  width: 100%;
  min-height: 44px;
  padding: .7rem .9rem;
  background: var(--carbon);
  border: 1px solid var(--linea);
  color: var(--hueso);
  font: inherit;
}
.busca input::placeholder { color: var(--gris); }

.tramos { display: flex; flex-wrap: wrap; gap: .4rem; }
.tramo {
  min-height: 44px;
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--gris);
  font: inherit;
  cursor: pointer;
}
.tramo[aria-pressed="true"] { background: var(--hueso); color: var(--carbon); border-color: var(--hueso); }

/* Lista de precios, no tarjetas: aqui se compara el valor contra el nombre, y
   una lista con filetes se lee de corrido. */
.lista-precios { border-top: 1px solid var(--linea); }
.servicio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linea);
}
.servicio-nombre { font-size: 1.15rem; font-weight: 400; margin: 0; flex: 1 1 60%; }
.servicio-precio { font-size: 1.15rem; font-weight: 500; margin: 0; white-space: nowrap; }
.servicio-precio .desde { color: var(--gris); font-size: .85rem; font-weight: 400; margin-right: .3rem; }
.servicio-desc { flex: 1 1 100%; color: var(--gris); font-size: .95rem; margin: 0; }
.cargando, .vacio { color: var(--gris); padding: 1.1rem 0; }
.nota { color: var(--gris); font-size: .9rem; margin-top: 1rem; }

/* --- Mosaico de trabajos ---------------------------------------------------
   Regla 616: el unico color de la pagina. Alturas desiguales para que la
   atencion caiga en las fotos y no en una retícula perfecta. */
/* Carrusel, no retícula (pedido de Marco, 2026-10-14). En celular una tira que
   se arrastra con el dedo muestra cada trabajo MUCHO mas grande que una
   cuadricula de dos columnas, y el color del cabello -que es el unico color de
   la pagina, regla 616- es justo lo que hay que ver grande.
   scroll-snap deja cada foto centrada al soltar, en vez de a medio cortar. */
.mosaico {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 1.6rem 1rem .5rem;
  /* El ultimo elemento necesita su propio margen derecho: el padding del
     contenedor no se respeta al final de un desplazamiento horizontal. */
  scroll-padding-left: 1rem;
}
.mosaico::-webkit-scrollbar { display: none; }
.mosaico::after { content: ""; flex: 0 0 .4rem; }

.pieza {
  margin: 0;
  overflow: hidden;
  flex: 0 0 78%;
  scroll-snap-align: start;
}
.pieza img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }

/* Pista de que hay mas fotos a la derecha, sin depender de pasar el mouse. */
.pista-carrusel {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1rem;
  color: var(--gris);
  font-size: .85rem;
}

/* --- El salon --------------------------------------------------------------- */
.recorrido { width: 100%; height: auto; border: 1px solid var(--linea); margin-bottom: .5rem; }
.tira-salon { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.tira-salon img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Marco ------------------------------------------------------------------ */
.marco-caja { display: grid; gap: 1.6rem; }
.marco-retrato {
  width: 100%;
  max-width: 22rem;
  /* OBLIGATORIO. El <img> trae width/height en el HTML y el navegador los usa
     como medida si el CSS no dice otra cosa: al fijar solo el ancho, la altura
     se quedaba en los 1124 px del atributo y el retrato salia comprimido a lo
     ancho. Sin esta linea la cara se ve larga y angosta. */
  height: auto;
  /* El tajo de la marca, otra vez, en la esquina del retrato. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tajo)), calc(100% - var(--tajo)) 100%, 0 100%);
}

/* La frase de Marco. Es una cita, no un titular: va en el peso del cuerpo y
   algo mas grande, colgada de un filete, sin comillas decorativas ni cursiva
   -las dos cosas la volverian un adorno en vez de algo que alguien dijo. */
.cita {
  margin: 0 0 1.4rem;
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--hueso);
}
.cita p {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

/* --- Visitanos --------------------------------------------------------------- */
.visita { display: grid; gap: 1.6rem; }
.direccion { font-size: 1.1rem; }
.horario { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; }
.horario th, .horario td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.horario td { text-align: right; color: var(--gris); }
.horario .cerrado { color: var(--gris); }
.visita-acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.mapa { width: 100%; height: 18rem; border: 1px solid var(--linea); filter: grayscale(1) contrast(1.05); }

/* --- Pie ---------------------------------------------------------------------- */
.pie {
  position: relative;
  z-index: 1;
  background: var(--carbon);
  border-top: 1px solid var(--linea);
  padding: 2.5rem 0 7rem; /* el hueco de abajo deja ver el pie sobre la barra movil */
  color: var(--gris);
  font-size: .95rem;
}
.pie-caja { display: flex; gap: 1.2rem; align-items: flex-start; }
.pie-isotipo { width: 56px; height: 56px; opacity: .5; flex: 0 0 auto; }
.pie p { margin: 0 0 .3rem; }
.pie-nombre { color: var(--hueso); }

/* Volver arriba. Aparece solo al final, que es cuando el camino de vuelta es
   largo; antes seria un boton tapando contenido sin hacer falta. */
.subir {
  position: fixed;
  right: 1rem;
  bottom: calc(5.2rem + env(safe-area-inset-bottom));
  z-index: 6;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--hueso);
  color: var(--carbon);
  border: none;
  border-radius: 0;
  /* El tajo de la marca, tambien aqui (regla 617). */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.subir-visible { opacity: 1; visibility: visible; }
.subir svg { width: 20px; height: 20px; display: block; }

/* --- Barra inferior de celular -------------------------------------------- */
.barra-movil {
  position: fixed;
  inset: auto 0 0;
  z-index: 5;
  display: flex;
  gap: .5rem;
  padding: .6rem;
  background: var(--carbon);
  border-top: 1px solid var(--linea);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}
.barra-movil .boton { flex: 1 1 auto; }
.barra-movil .boton:last-child { flex: 0 0 auto; }

/* ===========================================================================
   Escritorio: la version que se ensancha (regla 625)
   =========================================================================== */
@media (min-width: 48rem) {
  :root { --tajo: 4.5rem; --aire-hero: 92px; }

  .cabecera { padding: 1.2rem 2rem; }
  .cabecera-marca img { width: 170px; }
  .cabecera-nav { gap: 1.8rem; font-size: .95rem; }

  .hero-contenido { padding: 0 2rem 3.2rem; }
  /* En escritorio no hay barra inferior: el boton principal vive en el hero. */
  .hero-acciones .boton-fuerte { display: inline-flex; }
  .envoltorio { padding: 0 2rem; }

  .estado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 2rem; }

  .seccion { padding: 5.5rem 0; }
  .corte-diagonal { padding-top: calc(5.5rem + var(--tajo)); }

  .filtros { flex-direction: row; align-items: center; justify-content: space-between; }
  .busca { flex: 0 1 22rem; }

  .mosaico { gap: .8rem; padding: 2rem 2rem .5rem; scroll-padding-left: 2rem; }
  .pieza { flex: 0 0 30%; }
  .pista-carrusel { padding: 0 2rem; }
  .tira-salon { grid-template-columns: repeat(4, 1fr); }

  .marco-caja { grid-template-columns: 20rem 1fr; gap: 3rem; align-items: start; }
  .visita { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .mapa { height: 24rem; }

  .pie { padding-bottom: 3rem; }
  /* En escritorio hay sitio para los botones arriba: la barra fija estorba. */
  .barra-movil { display: none; }
  /* Sin barra inferior, el boton baja a su sitio natural. */
  .subir { bottom: 1.6rem; right: 2rem; }
}

/* ===========================================================================
   Regla 623 y accesibilidad: con "reducir movimiento" no hay scrub. hero.js no
   dibuja y marca .hero-estatico; aqui se congela todo lo demas.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Sin scrub, la seccion alta no tiene sentido: se queda en una pantalla con
     el retrato fijo. */
  .hero { height: calc(100svh - var(--aire-hero)); }
}
/* Con "reducir movimiento" la clase va en <html> y el hero deja de reservar
   recorrido: no hay secuencia que recorrer, queda el retrato fijo de fondo. */
.hero-estatico .hero { height: calc(100svh - var(--aire-hero)); }

/* --- Reservar (Feature 5, Etapa 3) ------------------------------------------
   El panel vive sobre la portada: la spec madre decidio sitio de una sola
   pagina, y mandar a la clienta a otra pantalla para reservar es perderla.
   Monocromo como el resto (regla 615): el unico color sigue saliendo de las
   fotos de los trabajos. */
/* El bloque de Reservar, aparte de la tabla de valores (pedido de Marco,
   2026-10-20). Va al lateral en pantalla ancha y debajo en el teléfono. */
.reservar-aparte {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-start;
}
.reservar-aparte-nota {
  margin: 0;
  max-width: 34rem;
  font-size: .86rem;
  color: var(--gris);
}
@media (min-width: 48rem) {
  .reservar-aparte {
    flex-direction: row-reverse;      /* el botón al lateral derecho */
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

.servicio-reservar {
  justify-self: start;
  margin-top: .6rem;
  padding: .55rem 1.1rem;
  background: var(--hueso);
  color: var(--carbon);
  border: 1px solid var(--hueso);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;           /* el dedo necesita 44px, no 32 */
}
.servicio-reservar:hover { background: transparent; color: var(--hueso); }

.reserva-velo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 10, 9, .72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 48rem) {
  .reserva-velo { align-items: center; padding: 2rem 1rem; }
}

/* Pedido de Marco (2026-10-20), dos veces: el panel de reserva va CLARO, con
   letras negras y legibles. El resto del sitio es oscuro porque las fotos de
   los trabajos mandan ahí; aquí lo que manda es que se lea un formulario, y
   un formulario se lee mejor en claro. Las variables de abajo son las propias
   del panel: así el resto del sitio no se entera. */
.reserva-panel {
  --p-fondo: #FFFFFF;
  --p-texto: #141414;
  --p-suave: #5A5750;
  --p-linea: #D8D3CA;
  --p-tenue: #F4F1EA;

  background: var(--p-fondo);
  color: var(--p-texto);
  border: 1px solid var(--p-linea);
  width: 100%; max-width: 32rem;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
}

.reserva-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--p-linea);
}
.reserva-cabecera h3 { margin: 0; font-size: 1.1rem; font-weight: 500; }
.reserva-cerrar {
  background: none; border: none; color: var(--p-texto);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px;
}

.reserva-cuerpo { padding: 1.2rem; overflow-y: auto; }
.reserva-cuerpo h4 { margin: .2rem 0 1rem; font-size: 1.05rem; font-weight: 500; }
.reserva-paso { margin: 0; font-size: .74rem; letter-spacing: .14em;
                text-transform: uppercase; color: var(--p-suave); }
.reserva-ayuda { margin: 1rem 0 0; font-size: .85rem; color: var(--p-suave); }
.reserva-ayuda a { color: var(--p-texto); }
.reserva-resumen { margin: 0 0 1rem; font-size: .92rem; color: var(--p-texto); }
.reserva-error { margin: .6rem 0 0; font-size: .87rem; color: #A3301B; }
.reserva-listo { font-size: 1.3rem !important; }

.reserva-opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.reserva-opcion, .reserva-hora, .reserva-dia {
  background: var(--p-fondo); color: var(--p-texto);
  border: 1px solid var(--p-linea);
  font: inherit; cursor: pointer; min-height: 44px;
}
.reserva-opcion { padding: .6rem 1.1rem; flex: 0 1 auto; }
.reserva-opcion:hover, .reserva-hora:hover, .reserva-dia:hover {
  border-color: var(--p-texto); background: var(--p-tenue);
}

.reserva-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .45rem; }
.reserva-dia { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .5rem .2rem; }
.reserva-dia-nombre { font-size: .72rem; color: var(--p-suave); text-transform: uppercase; letter-spacing: .08em; }
.reserva-dia-numero { font-size: 1.15rem; }
.reserva-dia-mes { font-size: .7rem; color: var(--p-suave); }

.reserva-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .45rem; }
.reserva-hora { padding: .6rem .2rem; text-align: center; }

.reserva-form { display: flex; flex-direction: column; gap: .8rem; margin-top: .4rem; }
.reserva-campo { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--p-suave); }
.reserva-campo input {
  width: 100%; min-height: 44px; padding: .6rem .7rem;
  background: var(--p-fondo); border: 1px solid var(--p-linea);
  color: var(--p-texto); font: inherit; font-size: 1rem;  /* 16px: menos hace que iOS acerque la pagina */
}
.reserva-campo input:focus { outline: 2px solid var(--p-texto); outline-offset: 1px; }
.reserva-casilla {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .85rem; color: var(--p-suave); cursor: pointer;
}
.reserva-casilla input { margin-top: .15rem; width: auto; min-height: 0; flex: 0 0 auto; }

.reserva-enviar {
  margin-top: .4rem; padding: .8rem 1.2rem; min-height: 48px;
  background: var(--p-texto); color: #FFFFFF;
  border: 1px solid var(--p-texto); font: inherit; font-weight: 500; cursor: pointer;
}
.reserva-enviar[disabled] { opacity: .6; cursor: default; }
.reserva-atras {
  margin-top: 1.1rem; padding: .4rem 0;
  background: none; border: none; color: var(--p-suave);
  font: inherit; font-size: .85rem; cursor: pointer; min-height: 44px;
}
.reserva-atras:hover { color: var(--p-texto); }

/* Un dia que no acepta reservas se ve apagado, no desaparece: que falte el
   lunes haria dudar de si el calendario esta bien. */
.reserva-dia-cerrado {
  opacity: .32;
  cursor: not-allowed;
  border-style: dashed;
}
.reserva-dia-cerrado:hover { border-color: var(--p-linea); background: var(--p-fondo); }

/* --- El chat del sitio (Feature 6b, 2026-10-21) --------------------------
   La burbuja acompaña a la visitante mientras mira precios o trabajos, que
   es donde aparece la duda. Nace escondida: la enciende chat.js solo si
   Marco tiene el chat activo. */
#chat-burbuja { position: fixed; right: 18px; bottom: 18px; z-index: 60; }

.chat-abrir {
  width: 60px; height: 60px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.85); background: #111; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.chat-abrir img { width: 100%; height: 100%; object-fit: cover; display: block; }

#chat-panel {
  position: absolute; right: 0; bottom: 74px; width: min(340px, calc(100vw - 36px));
  background: #141414; border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.chat-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9rem; letter-spacing: 0.03em;
}
.chat-cabecera button {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 1rem; min-width: 32px; min-height: 32px;
}

#chat-hilo { padding: 12px 14px; max-height: 46vh; overflow-y: auto; font-size: 0.92rem; line-height: 1.55; }
.chat-linea { margin-bottom: 9px; padding: 8px 11px; max-width: 86%; }
.chat-mio { margin-left: auto; background: rgba(255, 255, 255, 0.92); color: #111; }
.chat-suyo { background: rgba(255, 255, 255, 0.08); }

.chat-reservar {
  display: block; margin: 4px 0 10px; padding: 9px 16px; cursor: pointer;
  background: #fff; color: #0f0f0f; border: none; font-family: inherit; font-size: 0.9rem;
}

.chat-pie { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.chat-pie textarea {
  flex: 1; resize: none; padding: 9px 10px; font-family: inherit; font-size: 0.92rem;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.22); color: inherit;
}
.chat-pie button {
  min-height: 42px; padding: 0 14px; cursor: pointer; font-family: inherit; font-size: 0.9rem;
  background: #fff; color: #0f0f0f; border: none;
}
.chat-pie button:disabled { opacity: 0.5; cursor: default; }

.chat-wsp {
  display: block; padding: 0 14px 12px; font-size: 0.8rem; opacity: 0.7;
  color: inherit; text-decoration: underline;
}

@media (max-width: 480px) {
  #chat-panel { position: fixed; right: 12px; left: 12px; bottom: 86px; width: auto; }
}