/* Mueblería La Cruz — landing de presentación
   Números del movimiento y del aire: ver C:\Proyecto\Marketing-mlc\04-implementacion\CONTRATO-VISUAL-LANDING.md
   Textos aprobados: ver C:\Proyecto\Marketing-mlc\04-implementacion\PAGINA-WEB.md
   Motion, interacción, máquina de escribir, bloques intercalados claro/marrón y detalles
   editoriales: pedidos de Tomás, 12/09/2026.

   Regla aprendida el 12/09: lo que observa el IntersectionObserver NUNCA lleva clip-path.
   El recorte va siempre en una capa interior (.telon, img), y se observa la capa exterior.

   Tema por bloque: cada sección define --tinta (texto), --tinta-suave, --fondo y --hairline.
   Las claras usan marrón sobre crema; las .oscuro, crema sobre marrón. Nada cambia de color
   con JavaScript: la transición entre partes es una franja degradada arriba y abajo de cada
   bloque oscuro, que vive en el aire que separa los bloques. */

:root{
  --crema:#F7F5ED;
  --beige:#BFB7A1;
  --marron:#3E3730;
  --marron-suave:#6b6156;
  --tinta:var(--marron);
  --tinta-suave:var(--marron-suave);
  --fondo:var(--crema);
  --hairline:rgba(62,55,48,.16);
  --dur-bloque:.8s;
  --dur-cortina:1.15s;
  --curva:cubic-bezier(.25,.1,.25,1);
  --aire:130px;
}
@media (max-width:700px){ :root{ --aire:90px; } }

*{box-sizing:border-box}
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--crema);
  color:var(--marron);
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
h1,h2,h3,.editorial{ font-family:'Playfair Display',Georgia,serif; font-weight:600; text-wrap:balance; }
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; }
::selection{ background:var(--marron); color:var(--crema); }

/* ===== Fondo con flujo constante (formas que se mueven siempre) ===== */
.fondo-flujo{
  position:fixed; inset:0; overflow:hidden; pointer-events:none;
  --px:0; --py:0;
}
/* La órbita sigue apenas al puntero (escritorio); la forma adentro tiene su propio vaivén */
.blob-orbita{
  position:absolute; inset:0;
  transform:translate(calc(var(--px) * var(--fuerza, 30) * 1px), calc(var(--py) * var(--fuerza, 30) * 1px));
  transition:transform 1.2s var(--curva);
  will-change:transform;
}
.blob{
  position:absolute; border-radius:50%; filter:blur(70px); will-change:transform;
}
.blob-1{
  width:560px; height:560px; top:-180px; left:-200px;
  background:radial-gradient(circle, rgba(191,183,161,.55), rgba(191,183,161,0) 72%);
  animation:flotar-1 42s ease-in-out infinite;
}
.blob-2{
  width:460px; height:460px; bottom:8%; right:-180px;
  background:radial-gradient(circle, rgba(216,205,182,.5), rgba(216,205,182,0) 72%);
  animation:flotar-2 52s ease-in-out infinite;
}
.blob-3{
  width:380px; height:380px; top:42%; left:55%;
  background:radial-gradient(circle, rgba(62,55,48,.12), rgba(62,55,48,0) 74%);
  animation:flotar-3 60s ease-in-out infinite;
}
.blob-4{
  width:300px; height:300px; top:75%; left:8%;
  background:radial-gradient(circle, rgba(191,183,161,.4), rgba(191,183,161,0) 72%);
  animation:flotar-2 47s ease-in-out infinite reverse;
}
@keyframes flotar-1{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(90px,120px) scale(1.18); }
  66%{ transform:translate(-60px,60px) scale(.92); }
}
@keyframes flotar-2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-110px,-90px) scale(1.12); }
}
@keyframes flotar-3{
  0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }
  50%{ transform:translate(-80px,100px) rotate(20deg) scale(1.15); }
}
@media (prefers-reduced-motion:reduce){
  .fondo-flujo{ display:none; }
}
@media (max-width:600px){
  .blob{ filter:blur(46px); }
  .blob-1{ width:340px; height:340px; }
  .blob-2{ width:300px; height:300px; }
  .blob-3{ width:240px; height:240px; }
  .blob-4{ width:200px; height:200px; }
}

/* Grano fino sobre todo, como película: un mosaico de ruido, casi transparente */
.grano{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.055;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* ===== Cabecera ===== */
header.cab{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  transition:background-color .4s var(--curva), box-shadow .4s var(--curva);
}
header.cab.tomo-fondo{
  background:rgba(247,245,237,.92);
  box-shadow:0 1px 0 rgba(62,55,48,.08);
  backdrop-filter:blur(6px);
}
header.cab .logo{ font-family:'Playfair Display',serif; font-weight:700; font-size:19px; letter-spacing:.02em; }
header.cab .btn-wsp{
  font-size:14px; padding:9px 18px; border:1px solid var(--marron);
  border-radius:2px; text-decoration:none; white-space:nowrap;
  transition:transform .35s var(--curva), background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
header.cab .btn-wsp:hover{ background:var(--marron); color:var(--crema); }
/* Sobre la portada (antes de tomar fondo) la cabecera va en crema: el nombre en marrón se perdía
   contra la foto (pedido de Tomás, 13/09). Al bajar, toma fondo crema y vuelve al marrón. */
header.cab:not(.tomo-fondo){ color:var(--crema); }
header.cab:not(.tomo-fondo) .btn-wsp{ border-color:var(--crema); }
header.cab:not(.tomo-fondo) .btn-wsp:hover{ background:var(--crema); color:var(--marron); }
/* Línea de avance de lectura: aparece cuando la cabecera toma fondo */
header.cab .progreso{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--marron); transform:scaleX(0); transform-origin:left;
  opacity:0; transition:opacity .4s var(--curva);
}
header.cab.tomo-fondo .progreso{ opacity:.55; }

/* ===== Utilidades de revelado ===== */
/* A1 (informe AJ, 25/09): lo que aparece al bajar solo arranca oculto si el JavaScript está andando.
   La clase "js" la pone un script de una línea en el <head>. Sin JavaScript, todo se ve quieto y completo. */
.aparece{
  transition:opacity var(--dur-bloque) var(--curva), transform var(--dur-bloque) var(--curva);
}
.js .aparece{ opacity:0; transform:translateY(24px); }
.js .aparece.visible{ opacity:1; transform:none; }
.aparece[data-grupo]{ transition-delay:calc(var(--i,0) * 100ms); }

/* Telón por sección: se observa la sección (nunca recortada) y se recorta la capa interior */
.cortina .telon{ transition:clip-path var(--dur-cortina) var(--curva); }
.js .cortina .telon{ clip-path:inset(0 -40px 100% -40px); }
.js .cortina.visible .telon{ clip-path:inset(-40px -40px -40px -40px); }

/* Fotos que se revelan de costado: se observa la figura, se recorta la imagen */
.foto-revela img{ transition:clip-path 1s var(--curva); }
.js .foto-revela img{ clip-path:inset(0 0 0 100%); }
.js .foto-revela.visible img{ clip-path:inset(0 0 0 0); }

/* A2: el texto completo de lo que se escribe solo, para los lectores de pantalla (no se ve) */
.solo-lector{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* A4: recuadro de foco visible con el teclado, en el color del texto de cada bloque */
:focus-visible{ outline:2px solid var(--tinta); outline-offset:3px; }
.portada :focus-visible, header.cab:not(.tomo-fondo) :focus-visible{ outline-color:var(--crema); }

/* A8: lo que se mueve sin parar se pausa cuando su bloque no está en pantalla (lo marca el JavaScript) */
.pausado .olas, .pausado .olas i, .pausado .sello svg, .pausado .credito::before,
.pausado .sello-credito, .pausado .sello-credito svg, .pausado .flotar-idle,
.pausado .fondo-foto img, .pausado .marco-foto img, .pausado .linea-tiempo .flujo{ animation-play-state:paused; }

/* Máquina de escribir: cada letra ya ocupa su lugar (no se mueve nada), y se va mostrando una a una */
.tipea .l{ visibility:hidden; }
.tipea .l.v{ visibility:visible; }
.caret{
  display:inline-block; width:2px; height:.85em; background:currentColor;
  margin-left:3px; vertical-align:-.08em; animation:parpadeo .85s steps(2, start) infinite;
}
@keyframes parpadeo{ to{ visibility:hidden; } }

@media (prefers-reduced-motion:reduce){
  .aparece, .js .aparece{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .cortina .telon, .js .foto-revela img{ clip-path:none !important; transition:none !important; }
  .tipea .l{ visibility:visible !important; }
  .caret{ display:none !important; }
  .flotar-idle, .portada .marco-foto img, .portada .marco-foto video, .senal-bajar::before{ animation:none !important; }
  .foto-revela.visible img, .cat.visible .marco img{ animation:none !important; }
}

/* ===== Bloques: a todo el ancho, con el contenido centrado adentro del telón ===== */
section{
  position:relative; z-index:1;
  padding:var(--aire) 0;
  color:var(--tinta);
}
section .telon{ max-width:1200px; margin:0 auto; padding:0 24px; }
.col-texto{ max-width:400px; }

/* Bloque oscuro: crema sobre marrón, y una franja degradada arriba y abajo que hace la
   transición de color en el aire que lo separa del bloque anterior y del siguiente */
section.oscuro{
  --tinta:var(--crema);
  --tinta-suave:rgba(247,245,237,.68);
  --fondo:var(--marron);
  --hairline:rgba(247,245,237,.22);
  background:rgba(62,55,48,.96);
}
section.oscuro ::selection{ background:var(--crema); color:var(--marron); }

/* Olas: la transición entre crema y marrón se mueve. Tres capas de ola en marrón, cada una con
   su ancho, su velocidad y su sentido, que se desplazan de costado sin parar; y todo el borde
   "respira" (crece y se achica apenas). Viven en el aire que separa los bloques, arriba y abajo
   de cada bloque oscuro. Solo transform: se compone en la placa de video, no se redibuja. */
/* 13/09, pedido de Tomás: olas más altas y más rápidas. La franja mide 1,5 veces el aire entre
   bloques (sube hasta el borde del bloque claro), las crestas llegan al 80 % de la franja, cada capa
   da la vuelta en 14 a 24 s (antes 28 a 44) y el borde respira un 35 % (antes 16 %). Una cuarta capa
   en beige, adelante y más rápida, da la espuma. */
.olas{
  position:absolute; left:0; right:0; height:calc(var(--aire) * 1.5); overflow:hidden; pointer-events:none;
}
.olas-arriba{ top:calc(var(--aire) * -1.5); transform-origin:50% 100%; animation:respira-arriba 6s ease-in-out infinite alternate; }
.olas-abajo{ bottom:calc(var(--aire) * -1.5); transform:scaleY(-1); transform-origin:50% 50%; animation:respira-abajo 7s ease-in-out infinite alternate; }
@keyframes respira-arriba{ from{ transform:scaleY(1); } to{ transform:scaleY(1.35); } }
@keyframes respira-abajo{ from{ transform:scaleY(-1); } to{ transform:scaleY(-1.35); } }
.olas i{
  position:absolute; top:0; left:0; height:100%; width:calc(100% + var(--w));
  background-repeat:repeat-x; background-size:var(--w) 100%; will-change:transform;
  animation:ola var(--t) linear infinite;
}
@keyframes ola{ to{ transform:translateX(calc(var(--w) * -1)); } }
/* capa de atrás: la más suave, la más ancha, la más alta */
.olas i:nth-child(1){
  --w:1800px; --t:24s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 150C200 20 400 200 600 140C800 30 1000 200 1200 150L1200 200L0 200Z' fill='%233E3730' fill-opacity='0.3'/%3E%3C/svg%3E");
}
/* capa del medio: va en sentido contrario */
.olas i:nth-child(2){
  --w:1150px; --t:16s; animation-direction:reverse;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 130C200 40 400 190 600 120C800 40 1000 190 1200 130L1200 200L0 200Z' fill='%233E3730' fill-opacity='0.55'/%3E%3C/svg%3E");
}
/* capa de adelante: la sólida, que se une con el fondo del bloque */
.olas i:nth-child(3){
  --w:1400px; --t:20s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120C200 60 400 175 600 110C800 50 1000 175 1200 120L1200 200L0 200Z' fill='%233E3730' fill-opacity='0.96'/%3E%3C/svg%3E");
}
/* la espuma: una línea beige fina que corre sobre la cresta de la capa sólida, la más rápida */
.olas i:nth-child(4){
  --w:1400px; --t:14s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120C200 60 400 175 600 110C800 50 1000 175 1200 120' fill='none' stroke='%23BFB7A1' stroke-opacity='0.7' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  .olas, .olas i{ animation:none !important; }
}

/* Índice editorial arriba de cada título: "01 · Historia", con una rayita antes */
.cabecera-bloque{ margin-bottom:40px; }
.cabecera-bloque h2{ font-size:clamp(26px,3.4vw,40px); line-height:1.25; margin:0; }
.indice{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-suave);
}
.indice::before{ content:""; width:28px; height:1px; background:var(--tinta); opacity:.5; }

/* Fotos con marco de galería: una línea fina separada del borde */
.enmarcada{ outline:1px solid var(--hairline); outline-offset:8px; }

/* Zoom lento y constante (tipo "Ken Burns"): arranca cuando la foto ya se reveló */
@keyframes zoom-lento{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
.foto-revela.visible img{ animation:zoom-lento 9s var(--curva) forwards; }
.cat.visible .marco img{ animation:zoom-lento 9s var(--curva) forwards; }

/* Flotar apenas, constante, para que las tarjetas se sientan vivas */
@keyframes flotar-idle{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.flotar-idle{ animation:flotar-idle 6.5s ease-in-out infinite; }

/* Inclinación con el puntero (escritorio): la clase la pone el JS mientras el puntero está encima */
.inclinable{ transform-style:preserve-3d; }
.inclinable.inclinando{ transition:transform .15s ease-out !important; }

/* Botones magnéticos: se acercan un poco al puntero (escritorio) */
.magnetico{ display:inline-block; transition:transform .35s var(--curva); will-change:transform; }
.aparece.magnetico{ transition:opacity var(--dur-bloque) var(--curva), transform .35s var(--curva); }

/* ===== Portada ===== */
.portada{
  /* A5: 100svh es el alto visible real del celular (con la barra del navegador); 100vh queda de respaldo */
  position:relative; height:100vh; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  padding:0; overflow:hidden;
}
/* 25/09: el marco ya no es un 16 % más grande que la pantalla (era para el parallax, que se sacó con el video) */
.portada .marco-foto{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
/* La foto se apoya arriba (object-position) para que el cartel del vidrio quede a la vista y la calle
   afuera, y va un poco más apagada para que el titular resalte (pedido de Tomás, 13/09) */
/* Portada de día a noche (Tomás, 25/09, video de Kling): la foto de noche va siempre abajo, quieta; el video
   corre una sola vez encima y después sigue el tramo de noche que se repite. Sin JavaScript, con "reducir
   movimiento" o con ahorro de datos, el video no se baja y queda la foto de noche. El centro del encuadre es
   el cartel MLC, así en el celular se ven el cartel y la puerta.
   Sin zoom ni corrimientos (Tomás, 25/09: "tiembla y no se ve tan HD"): mover o agrandar un video por
   fracciones de píxel hace titilar las líneas finas del frente. El video se ve a su tamaño, quieto. */
.portada .marco-foto img, .portada .marco-foto video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:47% 40%; filter:saturate(.92) brightness(.9);
}
.portada .marco-foto video{ opacity:0; transition:opacity .5s var(--curva); }
.portada .marco-foto video.andando{ opacity:1; }
@keyframes zoom-portada{ from{ transform:scale(1); } to{ transform:scale(1.1); } }
/* Opción A (Tomás, 26/09): el texto baja a la esquina de abajo a la izquierda y el oscurecido sale de esa
   esquina, sin tocar el cartel MLC ni las vidrieras de la derecha: el video no pierde protagonismo.
   En el celular, el oscurecido es solo desde abajo (el texto ocupa todo el ancho). */
.portada::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(38,33,28,.70) 0%, rgba(38,33,28,.42) 34%, rgba(38,33,28,0) 58%),
    linear-gradient(180deg, rgba(38,33,28,.34) 0%, rgba(38,33,28,0) 20%, rgba(38,33,28,0) 48%, rgba(38,33,28,.72) 100%);
}
@media (max-width:700px){
  .portada::after{ background:linear-gradient(180deg, rgba(38,33,28,.34) 0%, rgba(38,33,28,0) 22%, rgba(38,33,28,0) 46%, rgba(38,33,28,.78) 100%); }
}
/* Velo suave arriba, para que la cabecera se lea sobre el cielo de la foto */
.portada::before{
  content:""; position:absolute; left:0; right:0; top:0; height:170px; z-index:1;
  background:linear-gradient(180deg,rgba(62,55,48,.5),rgba(62,55,48,0));
}
.portada .contenido{
  position:relative; z-index:2; color:var(--crema);
  padding:0 24px 52px; width:100%; max-width:1200px; margin:0 auto;
}
/* Texto más chico para no pisar el cartel, con una sombra muy suave que lo despega de las luces */
.portada h1{
  font-size:clamp(30px,3.4vw,48px); line-height:1.15; margin:0 0 14px;
  max-width:640px; text-shadow:0 2px 22px rgba(20,17,14,.5);
}
.portada p.bajada{
  font-size:clamp(16px,1.25vw,17px); line-height:1.6; max-width:520px;
  margin:0 0 22px; color:var(--crema); text-shadow:0 1px 10px rgba(20,17,14,.55);
}
/* Pantallas muy apaisadas: el video se recorta arriba y abajo y el cartel baja; el titular se achica más */
@media (min-aspect-ratio:16/9){
  .portada h1{ font-size:clamp(28px,2.9vw,42px); }
  .portada .contenido{ padding-bottom:40px; }
}
@media (max-width:700px){ .portada .contenido{ padding-bottom:44px; } }
.btn-principal{
  display:inline-block; background:var(--crema); color:var(--marron);
  font-size:14px; letter-spacing:.02em; padding:14px 26px;
  border-radius:2px; text-decoration:none;
}
.btn-principal::after, .suc .acciones a.principal::after{
  content:"→"; display:inline-block; margin-left:10px; transition:transform .35s var(--curva);
}
.btn-principal:hover::after, .suc .acciones a.principal:hover::after{ transform:translateX(4px); }
.btn-principal:hover{ background:#fff; }

/* Flecha que respira, invita a bajar */
.portada .senal-bajar{
  position:absolute; left:50%; bottom:22px; z-index:2; transform:translateX(-50%);
  width:22px; height:34px; border:1.5px solid rgba(247,245,237,.75); border-radius:14px;
}
.portada .senal-bajar::before{
  content:""; position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px;
  background:var(--crema); border-radius:2px;
  animation:senal-bajar 1.8s ease-in-out infinite;
}
@keyframes senal-bajar{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(10px);} 100%{opacity:0;} }

/* ===== Quiénes somos ===== */
.historia .intro{ margin-bottom:56px; font-size:16px; line-height:1.85; }
/* Letra capital, como en una revista */
.capital{
  /* más chica y pegada a "odo" (pedido de Tomás, 13/09): antes 3.6em con 10px de aire a la derecha */
  float:left; font-family:'Playfair Display',serif; font-weight:600; font-size:3em;
  line-height:.82; padding:5px 3px 0 0; margin-right:1px; color:var(--tinta);
}
.historia .grilla{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}
.historia .foto-fija{ position:sticky; top:110px; margin:0; }
/* La foto de 1994 se muestra entera (proporción del cuadro del video, 1856/1032), no recortada a 4:5:
   recortada se veía mal (Tomás, 13/09). El archivo viejo va chico y completo, como dice AH B7. */
.historia .foto-fija .marco{ position:relative; aspect-ratio:1856/1032; overflow:hidden; border-radius:2px; }
/* sin sepia: Tomás eligió el color crudo del video para esta foto (13/09) */
.historia .foto-fija .marco img{ filter:contrast(1.03); }
.historia .foto-fija figcaption{
  color:var(--tinta-suave); margin-top:18px; letter-spacing:.02em;
  font-style:italic; font-family:'Playfair Display',serif; font-size:14px;
}

/* La línea de tiempo: una sola línea fina, con una luz que la recorre, y puntos precisos */
.linea-tiempo{ position:relative; padding-left:34px; }
.linea-tiempo::before{
  content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px;
  background:var(--hairline);
}
.linea-tiempo .relleno{
  position:absolute; left:7px; top:8px; width:1px; background:var(--tinta);
  height:0%; transition:height 1.4s var(--curva); z-index:1;
}
.linea-tiempo .flujo{
  position:absolute; left:7px; top:8px; bottom:8px; width:1px; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(180deg,
    transparent 0, transparent 110px,
    rgba(247,245,237,0) 110px, rgba(247,245,237,.95) 150px, transparent 190px);
  background-size:1px 190px;
  animation:flujo-linea 3.2s linear infinite;
}
@keyframes flujo-linea{ from{ background-position:0 -190px; } to{ background-position:0 0; } }
@media (prefers-reduced-motion:reduce){ .linea-tiempo .flujo{ display:none; } }

.hito{ position:relative; margin-bottom:60px; padding-top:6px; cursor:default; }
.hito::before{
  content:""; position:absolute; left:-30px; top:14px; width:7px; height:7px;
  border-radius:50%; background:var(--fondo); border:1px solid var(--tinta); z-index:3;
  transition:background-color .4s var(--curva), box-shadow .4s var(--curva);
}
.hito .anio-fondo{
  position:absolute; top:-30px; left:-6px; z-index:0; pointer-events:none;
  font-family:'Playfair Display',serif; font-weight:700; font-size:min(30vw,150px);
  line-height:1; color:var(--tinta); opacity:.055; white-space:nowrap;
  transition:opacity .6s var(--curva), transform .8s var(--curva);
}
.hito .anio{
  position:relative; z-index:1;
  font-family:'Montserrat',sans-serif; font-size:13px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta);
  margin-bottom:10px;
}
.hito .anio::after{
  content:""; display:inline-block; width:22px; height:1px; background:var(--tinta);
  opacity:.45; margin-left:12px; vertical-align:middle; transition:width .5s var(--curva);
}
.hito p{ position:relative; z-index:1; margin:0; font-size:16px; line-height:1.8; max-width:420px; }
/* El hito "activo": el más cercano al centro de la pantalla, o el que tiene el puntero encima */
.hito.activo::before, .hito:hover::before{
  background:var(--tinta);
  box-shadow:0 0 0 3px var(--fondo), 0 0 0 4px var(--tinta);
}
.hito.activo .anio-fondo, .hito:hover .anio-fondo{ opacity:.11; transform:translateX(10px); }
.hito.activo .anio::after, .hito:hover .anio::after{ width:48px; }

/* Las frases de Tete */
.cita{
  position:relative; margin:64px 0 0; padding:36px 0 0; border-top:1px solid var(--hairline);
  font-family:'Playfair Display',serif; font-size:clamp(19px,2.4vw,25px);
  line-height:1.65; font-style:italic; max-width:640px;
}
/* La comilla de apertura cuelga afuera del texto, como en los libros */
.cita .comilla{ position:absolute; left:-.55em; top:36px; }
.cita footer{ margin-top:16px; font-family:'Montserrat',sans-serif; font-style:normal; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); }
.cita.cita-chica{ font-size:clamp(17px,2vw,21px); margin-top:40px; padding-top:28px; max-width:560px; }
.cita.cita-chica .comilla{ top:28px; }

/* Antes y ahora: comparador que se arrastra */
.comparador{
  /* 3712/1600: la proporción del cuadro de 1994 recortado sin la calle de tierra (decisión de Tomás, 13/09) */
  position:relative; margin-top:72px; aspect-ratio:3712/1600; overflow:hidden; border-radius:2px;
  user-select:none; -webkit-user-select:none; touch-action:pan-y; background:var(--beige);
}
.comparador img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.comparador .antes{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); filter:sepia(.2) contrast(1.02); }
/* Tomás, 25/09: la foto de hoy más arriba, para que entren el cartel y las vidrieras y no la vereda */
.comparador .ahora{ object-position:50% 34%; }
@media (max-width:820px){ .comparador .ahora{ object-position:50% 16%; } }
.comparador .mango{
  position:absolute; top:0; bottom:0; left:var(--pos); width:1px; background:var(--crema);
  transform:translateX(-50%); pointer-events:none; box-shadow:0 0 0 1px rgba(62,55,48,.2);
}
.comparador .mango i{
  position:absolute; top:50%; left:50%; width:44px; height:44px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--crema); border:1px solid rgba(62,55,48,.25);
  box-shadow:0 6px 18px rgba(62,55,48,.25);
}
.comparador .mango i::before, .comparador .mango i::after{
  content:""; position:absolute; top:50%; width:7px; height:7px; border-top:1.5px solid var(--marron);
}
.comparador .mango i::before{ left:13px; border-left:1.5px solid var(--marron); transform:translateY(-50%) rotate(-45deg); }
.comparador .mango i::after{ right:13px; border-right:1.5px solid var(--marron); transform:translateY(-50%) rotate(45deg); }
.comparador .etiq{
  position:absolute; bottom:14px; z-index:2; pointer-events:none;
  font-family:'Playfair Display',serif; font-style:italic; font-size:15px; letter-spacing:.04em;
  padding:6px 14px; border-radius:20px; background:rgba(62,55,48,.72); color:var(--crema);
}
.comparador .etiq.a{ left:14px; }
.comparador .etiq.b{ right:14px; }
/* El arrastre lo maneja el JavaScript con eventos de puntero sobre todo el marco (13/09: en el
   celular, el control de rango solo respondía al tocar sobre su manija de 2 px). El control queda
   para el teclado y los lectores de pantalla, sin recibir toques. */
.comparador{ cursor:ew-resize; }
.comparador input[type=range]{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0;
  pointer-events:none; -webkit-appearance:none; appearance:none; background:transparent;
}
.comparador input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:2px; height:100%; }
.comparador input[type=range]::-moz-range-thumb{ width:2px; height:100%; border:0; }
.comparador:has(input:focus-visible){ outline:2px solid var(--tinta); outline-offset:12px; }
.pista{ color:var(--tinta-suave); margin:18px 0 0; letter-spacing:.02em; font-style:italic; font-family:'Playfair Display',serif; font-size:14px; }

@media (max-width:820px){
  .historia .grilla{ grid-template-columns:1fr; gap:36px; }
  .historia .foto-fija{ position:static; }
  .comparador{ aspect-ratio:16/10; }
  .cita .comilla{ position:static; }
}

/* ===== El local (galería) ===== */
.el-local .cabecera-bloque{ margin-bottom:12px; }
.el-local .indicacion{ font-size:12px; color:var(--tinta-suave); letter-spacing:.14em; text-transform:uppercase; margin:0 0 20px; font-weight:700; }
.galeria{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; margin:0 -24px; padding-left:24px; padding-right:24px;
  -webkit-overflow-scrolling:touch; cursor:grab;
}
.galeria.arrastrando{ scroll-snap-type:none; cursor:grabbing; scroll-behavior:auto; }
.galeria::-webkit-scrollbar{ height:5px; }
.galeria::-webkit-scrollbar-thumb{ background:var(--beige); border-radius:4px; }
.galeria figure{
  flex:0 0 78%; max-width:420px; scroll-snap-align:start; margin:0;
  aspect-ratio:4/5; border-radius:2px; overflow:hidden;
  transition:transform .5s var(--curva);
}
.galeria figure:hover{ transform:translateY(-4px); }
.galeria.arrastrando figure{ transform:none; }
@media (min-width:820px){ .galeria figure{ flex-basis:32%; } }
.contador-galeria{
  font-family:'Playfair Display',serif; font-style:italic; font-size:15px;
  color:var(--tinta-suave); margin-top:12px; letter-spacing:.06em;
}

/* ===== Cómo atendemos ===== */
.atendemos .grilla-promesas{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:20px;
}
@media (max-width:900px){ .atendemos .grilla-promesas{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){
  .atendemos .grilla-promesas{ grid-template-columns:1fr; }
  /* En una sola columna, la tarjeta 3:4 ocupaba más de una pantalla: apaisada */
  .promesa .marco{ aspect-ratio:16/10; }
}
.promesa{ position:relative; border-radius:2px; overflow:hidden; }
.promesa .marco{ aspect-ratio:3/4; position:relative; overflow:hidden; }
.promesa .marco img{ filter:saturate(.92); }
/* 13/09, pedido de Tomás: el texto al centro de la foto, como gancho, porque es la información
   importante. Va en una caja marrón translúcida centrada (la misma receta que las etiquetas del
   comparador), así la foto sigue viéndose alrededor. */
.promesa .marco::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(62,55,48,.12) 0%,rgba(62,55,48,.38) 100%);
}
.promesa .texto{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:18px; color:var(--crema);
  text-align:center;
}
.promesa .texto > div{
  background:rgba(62,55,48,.8); padding:18px 20px; border-radius:2px; max-width:92%;
  box-shadow:0 8px 24px rgba(62,55,48,.25);
}
.promesa .texto h3{ font-size:clamp(19px,1.8vw,23px); margin:0 0 8px; font-family:'Playfair Display',serif; font-weight:600; line-height:1.2; }
.promesa .texto p{ font-size:14px; line-height:1.5; margin:0; color:#F1EDE0; }
/* El crédito propio es diferencial (pedido de Tomás, 13/09: más movimiento y más presencia):
   sello que gira como el de la portada, título en Playfair, una luz beige que recorre el borde
   sin parar, y el botón de WhatsApp del bloque (regla S3). Todo se apaga con "reducir movimiento". */
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.credito{
  position:relative; margin-top:48px; padding:26px 28px; border:1px solid var(--hairline); border-radius:2px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px 28px;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva);
}
.credito::before{
  content:""; position:absolute; inset:-1px; border-radius:3px; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ang), transparent 0 62%, var(--beige) 80%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:luz-borde 7s linear infinite;
}
@keyframes luz-borde{ to{ --ang:360deg; } }
.credito:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(62,55,48,.1); }
.credito p{ margin:0; font-size:14px; }
.credito .credito-titulo{ font-family:'Playfair Display',serif; font-size:clamp(20px,2.4vw,26px); line-height:1.25; margin:0 0 6px; }
.credito p.nota{ font-size:14px; color:var(--tinta-suave); }
.credito .sello-credito{ position:relative; width:104px; height:104px; color:var(--tinta); animation:flotar-idle 6.5s ease-in-out infinite; }
.credito .sello-credito svg{ width:100%; height:100%; animation:girar 30s linear infinite; }
.credito .sello-credito text{ font-family:'Montserrat',sans-serif; font-size:9.4px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; fill:currentColor; }
.credito .sello-credito .sello-centro{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Playfair Display',serif; font-weight:700; font-size:14px; letter-spacing:.2em; padding-left:.2em;
}
.credito .credito-accion{
  font-size:14px; padding:12px 18px; border:1px solid var(--tinta); border-radius:2px; text-decoration:none;
  background:var(--tinta); color:var(--fondo); white-space:nowrap;
}
.credito .credito-accion::after{ content:"→"; display:inline-block; margin-left:10px; transition:transform .35s var(--curva); }
.credito .credito-accion:hover::after{ transform:translateX(4px); }
@media (max-width:700px){
  .credito{ grid-template-columns:auto 1fr; }
  .credito .credito-accion{ grid-column:1 / -1; justify-self:start; }
}
@media (prefers-reduced-motion:reduce){
  .credito::before, .credito .sello-credito, .credito .sello-credito svg{ animation:none !important; }
}

/* ===== Qué vas a encontrar ===== */
.categorias .grilla-cat{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px;
}
@media (max-width:820px){ .categorias .grilla-cat{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .categorias .grilla-cat{ grid-template-columns:1fr; } }
.cat{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  text-decoration:none; display:block; background:var(--beige);
}
.cat .marco{ position:absolute; inset:-8%; width:116%; height:116%; overflow:hidden; }
.cat.sin-foto{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(160deg,var(--beige),#cdc6b3);
}
.cat.sin-foto span.aviso-foto{ font-size:13px; color:var(--marron); opacity:1; display:block; margin-top:6px; letter-spacing:.06em; }
.cat::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(62,55,48,.1) 0%,rgba(62,55,48,.38) 100%);
}
/* Numerito editorial en la esquina de cada rubro */
.cat .indice-cat{
  position:absolute; top:16px; left:18px; z-index:2;
  font-family:'Playfair Display',serif; font-style:italic; font-size:15px; letter-spacing:.06em;
  color:var(--crema); opacity:.85;
}
.cat.sin-foto .indice-cat{ color:var(--marron); opacity:1; }
/* 13/09, pedido de Tomás: el nombre del rubro al centro de la foto, como gancho, en caja marrón */
.cat .nombre{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  color:var(--crema); font-family:'Playfair Display',serif; font-size:clamp(22px,2.2vw,27px);
  background:rgba(62,55,48,.8); padding:14px 24px; border-radius:2px; white-space:nowrap;
  box-shadow:0 8px 24px rgba(62,55,48,.25);
  transition:transform .4s var(--curva);
}
.cat:hover .nombre{ transform:translate(-50%,-50%) translateY(-4px); }
.cat.sin-foto .nombre{ position:static; transform:none; color:var(--marron); background:none; box-shadow:none; white-space:normal; padding:0; }
.cat.sin-foto:hover .nombre{ transform:none; }
.cat::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:var(--crema); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--curva);
}
.cat:hover::before{ transform:scaleX(1); }

/* ===== Preguntas frecuentes (Tomás, 25/09: las seis del informe AJ, tal cual) =====
   Elemento nativo del navegador (details/summary): se abre con un toque o con el teclado, y sin
   JavaScript funciona igual. El signo más gira a cruz al abrir. */
.faq{ max-width:760px; border-bottom:1px solid var(--hairline); }
.faq details{ border-top:1px solid var(--hairline); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 2px; font-family:'Playfair Display',serif; font-weight:600; font-size:clamp(18px,2vw,21px); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:0 0 14px; height:14px;
  background:linear-gradient(var(--tinta),var(--tinta)) center/100% 1.5px no-repeat,
             linear-gradient(var(--tinta),var(--tinta)) center/1.5px 100% no-repeat;
  transition:transform .4s var(--curva);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--tinta-suave); }
.faq details p{ margin:0; padding:0 2px 22px; font-size:16px; line-height:1.75; max-width:620px; }
@media (prefers-reduced-motion:reduce){ .faq summary::after{ transition:none; } }

/* ===== Contacto ===== */
.contacto .grilla-suc{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
@media (max-width:700px){ .contacto .grilla-suc{ grid-template-columns:1fr; } }
.suc{
  border:1px solid var(--hairline); border-radius:2px; padding:26px;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva);
}
.suc:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(62,55,48,.1); }
.suc h3{ margin:0 0 4px; font-size:20px; }
.suc .dir{ font-size:14px; color:var(--tinta-suave); margin-bottom:18px; }
.suc .acciones{ display:flex; gap:10px; flex-wrap:wrap; }
.suc .acciones a{
  font-size:14px; padding:10px 16px; border:1px solid var(--tinta); border-radius:2px; text-decoration:none;
}
.suc .acciones a.principal{ background:var(--tinta); color:var(--fondo); }
.horario{ margin-top:40px; font-size:14px; color:var(--tinta-suave); line-height:2; }
.horario b{ color:var(--tinta); }

/* ===== Sello que gira (portada) ===== */
.sello{
  position:absolute; right:36px; bottom:36px; z-index:2; width:150px; height:150px;
  color:var(--crema); opacity:.92;
}
.sello svg{ width:100%; height:100%; animation:girar 26s linear infinite; }
.sello text{
  font-family:'Montserrat',sans-serif; font-size:11.6px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; fill:currentColor;
}
.sello .sello-centro{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Playfair Display',serif; font-weight:700; font-size:18px; letter-spacing:.2em;
  padding-left:.2em;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (max-width:600px){
  .sello{ width:88px; height:88px; right:16px; bottom:auto; top:92px; }
  .sello .sello-centro{ font-size:12px; }
}
@media (prefers-reduced-motion:reduce){ .sello svg{ animation:none; } }

/* ===== Apertura de la historia: dos columnas ===== */
.historia .apertura{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; margin-bottom:72px;
}
.historia .apertura .cabecera-bloque{ margin-bottom:0; }
.historia .apertura .intro{ margin:0; max-width:480px; }
@media (max-width:820px){
  .historia .apertura{ grid-template-columns:1fr; gap:28px; margin-bottom:48px; }
}

/* ===== Bloque con foto real de fondo, velada, y el texto adelante ===== */
section.con-fondo{ overflow:hidden; }
section.con-fondo .telon{ position:relative; z-index:1; }
.fondo-foto{
  position:absolute; left:0; right:0; bottom:0; top:var(--aire); z-index:0; overflow:hidden;
}
.fondo-foto img{
  width:100%; height:100%; object-fit:cover; filter:blur(3px) saturate(.75);
  animation:zoom-fondo 34s ease-in-out infinite alternate;
}
@keyframes zoom-fondo{ from{ transform:scale(1.04); } to{ transform:scale(1.14); } }
.fondo-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--crema) 0, rgba(247,245,237,.8) 160px, rgba(247,245,237,.8) 100%);
}
.con-fondo .suc{ background:rgba(247,245,237,.72); backdrop-filter:blur(4px); }
/* La foto queda quieta, del alto de la pantalla, mientras se baja por el bloque: sin esto, en el celular
   (bloque de ~2600 px) se estira tanto que solo se ve una franja crema. clip, no hidden: hidden anula el sticky */
section.fondo-fijo, section.fondo-fijo .fondo-foto{ overflow:clip; }
section.fondo-fijo .fondo-foto img{ position:sticky; top:0; height:100vh; height:100svh; }
/* Fondos ambientados con IA (03 cocina, 05 living): difuminado y velo por bloque, elegidos por Tomás moviéndolos
   en la vista previa (26/09): 03 en 2 px y 65 %, 05 en 2,5 px y 63 % */
.atendemos{ --difuminado:2px; --velo:.65; }
.preguntas{ --difuminado:2.5px; --velo:.63; }
.fondo-ajustable img{ filter:blur(var(--difuminado)) saturate(.85); }
.fondo-ajustable::after{
  background:linear-gradient(180deg, var(--crema) 0, rgba(247,245,237,var(--velo)) 160px, rgba(247,245,237,var(--velo)) 100%);
}
@media (prefers-reduced-motion:reduce){ .fondo-foto img{ animation:none; } }

/* ===== Pie ===== */
footer.pie{
  position:relative; z-index:1;
  text-align:center; padding:var(--aire) 24px calc(var(--aire) * .6);
  font-size:14px; color:var(--marron-suave); line-height:1.9;
}
/* Una línea fina con el monograma en el medio */
footer.pie .pie-linea{
  position:relative; height:1px; background:var(--hairline); max-width:1152px; margin:0 auto 40px;
}
footer.pie .pie-linea span{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--crema); padding:0 18px;
  font-family:'Playfair Display',serif; font-weight:700; letter-spacing:.3em; font-size:13px; color:var(--marron);
}
footer.pie .logo-pie{ font-family:'Playfair Display',serif; font-size:20px; color:var(--marron); margin-bottom:10px; }