/* Maderera KIBA · estilos de la web por escenas (demo de propuesta).
   Identidad tomada del lugar: almacén en sombra (noche), tablones cobrizos y rojizos (cobre), luz cenital
   (oro), madera cepillada (crema, aserrín), el portón naranja de la fachada (porton, color medido en la foto) y el
   árbol rojo del letrero (arbol). Las texturas son recortes de las fotos del local (medios/tex-*.webp).
   Tipografía: Anton (titulares altos y angostos, como los tablones de pie), Manrope (texto) y Permanent
   Marker solo para las anotaciones «a tiza», como las medidas escritas en las piezas del almacén.

   Versión 2 (8-oct-2026): portada a sangre en escritorio, la llegada saca el texto con desplazamiento (nunca a media
   opacidad sobre la foto), maderas sobre tablones reales oscurecidos (no naranja plano), cabeceras de especie con
   veta real teñida, muro del almacén con jerarquía, «Tres pasos» sobre las piezas marcadas a tiza y cotizador
   sobre tablón claro.

   Movimiento: solo transform y opacity. Clases en <html>:
     .js    hay JavaScript           .anima  no se pidió reducir movimiento
     .sda   CSS scroll-driven animations (animation-timeline) · lo pone el <head>, es CSS puro
     .io    respaldo con IntersectionObserver · lo pone escenas.js
     .pin   escenas fijadas (sticky) · lo pone escenas.js     .pin-gal  la galería de maderas también se fija
   Sin JavaScript o con «reducir movimiento», nada se esconde ni se mueve.
   Versión 3 (9-oct-2026): video del recorrido de 32 s con más tiempo y tamaño (barra con contador y «ver completo»),
   el portón en su naranja real y revisión responsiva de 320 a 1920 px y con el celular acostado.

   Primero el celular (360 px). Cortes: 360, 420, 640, 760, 860, 1080 · por alto: 520 (celular acostado), 640 y 860.
   Los altos de pantalla usan svh con respaldo en vh para navegadores sin unidades nuevas.
   Diseño y desarrollo: Marketing Virtual Planet S.A.C. */

@font-face{font-family:'Anton';src:url(../fonts/anton-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url(../fonts/manrope-var.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Permanent Marker';src:url(../fonts/permanent-marker-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --noche:#120c08; --noche-2:#1a120c; --tronco:#2a1c13; --tronco-2:#35251a; --linea:#3d2c20; --linea-2:#56402e;
  --crema:#f3e9d8; --crema-2:#e9dcc6; --crema-claro:#fff6e6; --aserrin:#fbf6ee;
  --tinta:#1e140d; --tinta-2:#6b5444; --tinta-cobre:#2a1408; --linea-clara:#dccbb2;
  --humo:#d9c7b2; --humo-2:#bba78f;
  --cobre:#d27a3c; --cobre-boton:#e3843f; --cobre-claro:#f0a066; --cobre-osc:#8f4317; --oro:#f2c26b;
  --rojizo:#86391a; --rojizo-texto:#f6e3cc; /* cobre rojizo sacado de las fotos (fondo de maderas) y su texto */
  /* naranja del portón: promedio medido de la chapa y el marco en la foto de la fachada (kiba-2568). Encima va texto
     oscuro: tinta 5,8:1 y porton-osc 4,1:1 (3,6:1 en la nervadura oscura; solo en el titular grande). El crema no llega a AA sobre él (2,6:1). */
  --porton:#e17354; --porton-osc:#5a2008;
  --arbol:#e0606a; /* el árbol rojo del letrero (medido #df7379, algo más saturado para el logo); 5,6:1 sobre la noche */
  --wa:#157347; --wa-2:#0f5c38; --error:#a3341b;
  --display:'Anton','Arial Narrow','Helvetica Neue',Impact,sans-serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --tiza:'Permanent Marker','Segoe Print','Comic Sans MS',cursive;
  --gutter:16px; --header-h:64px; --franja-h:52px; --r:22px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sombra:0 30px 60px -30px rgba(40,20,8,.55);
  --focus:var(--cobre-claro);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
html.menu-abierto,html.dialogo-abierto{overflow:hidden}
body{margin:0;background:var(--noche);color:var(--crema);font:16px/1.6 var(--sans);overflow-x:hidden}
img,video,svg,canvas{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.1;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,figure{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cobre-boton);color:var(--tinta);padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.saltar:focus{top:12px}

/* titulares de escena: Anton en mayúsculas */
.titular,.galeria-titulo,.medida-titulo,.pedido-titulo,.guia-titulo,.visita-titulo,.almacen-titulo,.quienes-titulo,.llegada-titulo{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92}
h2 em,h1 em,h3 em{font-style:normal}
.esc-num,.etiqueta{font:800 12px/1.35 var(--sans);letter-spacing:.16em;margin-bottom:16px;color:var(--humo)}
.tiza{font-family:var(--tiza);font-weight:400;letter-spacing:.01em}

/* palabras que suben detrás de una máscara (escenas.js parte el texto en .pal > .pal-in) */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .1em;margin:-.14em 0 -.1em}
.pal-in{display:inline-block}
html.anima [data-palabras] .pal-in{transition:transform .7s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
html.anima [data-palabras]:not(.is-in) .pal-in{transform:translateY(110%)}

/* ── franja de demo ── */
.franja-demo{background:#2b1a0f;color:#f6dcc2;border-bottom:1px solid #4a2e1b;padding:6px var(--gutter);font-size:12.5px;line-height:1.4;text-align:center}
.franja-demo p{max-width:900px;margin-inline:auto}
.franja-mas{display:none}
@media (min-width:640px) and (min-height:521px){.franja-mas{display:inline}}

/* ── cabecera ── */
.cabecera{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;gap:12px;padding-inline:var(--gutter);background:rgba(18,12,8,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,background-color .2s}
.cabecera.con-borde{border-bottom-color:var(--linea);background:rgba(18,12,8,.96)}
.cab-progreso{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--cobre),var(--oro));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.marca{display:inline-flex;align-items:flex-end;gap:7px;text-decoration:none;color:var(--crema);min-height:44px;line-height:1;padding-bottom:9px;align-self:center;box-sizing:border-box}
.marca-sup{font:800 12px/1 var(--sans);letter-spacing:.05em;color:var(--crema);padding-bottom:2px}
.marca-nom{display:inline-flex;align-items:flex-end;font:400 30px/.9 var(--display);letter-spacing:.03em}
.marca-arbol{width:.66em;height:.84em;fill:var(--arbol);margin-left:.04em;transform:translateY(.02em)}
.nav-escritorio{display:none}
.cab-wa{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.cab-wa span{display:none}
.cab-wa:hover{background:var(--wa-2)}
.menu-boton{display:none;align-items:center;text-decoration:none;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--linea-2);border-radius:999px;background:transparent;color:var(--crema);font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
html.js .menu-boton{display:inline-flex}
/* sin JavaScript: «Menú» es un enlace a #menu-movil y el menú se abre con :target */
html:not(.js) .menu-enlace{display:inline-flex}
html.js .menu-enlace{display:none!important}
.menu-boton i{position:relative;width:18px;height:2px;background:currentColor}
.menu-boton i::before,.menu-boton i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .2s var(--ease)}
.menu-boton i::before{transform:translateY(-6px)}
.menu-boton i::after{transform:translateY(6px)}
.menu-boton[aria-expanded="true"] i{background:transparent}
.menu-boton[aria-expanded="true"] i::before{transform:rotate(45deg)}
.menu-boton[aria-expanded="true"] i::after{transform:rotate(-45deg)}
.menu-movil{position:fixed;inset:0;z-index:40;padding:calc(var(--menu-top,var(--header-h)) + 8px) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));background:rgba(18,12,8,.985);display:none;flex-direction:column;gap:24px;overflow-y:auto}
html.js .menu-movil.abierto{display:flex}
html:not(.js) .menu-movil:target{display:flex;z-index:60;padding-top:20px}
.menu-cerrar{display:none}
html:not(.js) .menu-cerrar{display:inline-flex;align-self:flex-end;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--linea-2);border-radius:999px;text-decoration:none;font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.menu-movil nav{display:flex;flex-direction:column}
.menu-movil nav a{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-bottom:1px solid var(--linea);text-decoration:none;font:400 26px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.menu-movil nav a span{font:800 12px var(--sans);letter-spacing:.12em;color:var(--cobre-claro)}
.menu-pie{display:grid;gap:10px;color:var(--humo);font-size:14px}
.menu-pie b{color:var(--crema)}
html.anima .menu-movil.abierto nav a{animation:menu-entra .4s var(--ease) both}
html.anima .menu-movil nav a:nth-child(2){animation-delay:.03s}
html.anima .menu-movil nav a:nth-child(3){animation-delay:.06s}
html.anima .menu-movil nav a:nth-child(4){animation-delay:.09s}
html.anima .menu-movil nav a:nth-child(5){animation-delay:.12s}
html.anima .menu-movil nav a:nth-child(6){animation-delay:.15s}
html.anima .menu-movil nav a:nth-child(7){animation-delay:.18s}
@keyframes menu-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── botones y enlaces ── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font:700 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;text-align:center;transition:transform .18s var(--ease),background-color .15s,border-color .15s,color .15s}
.boton:hover{transform:translateY(-2px)}
.boton:active{transform:translateY(1px) scale(.98)}
.boton-cobre{background:var(--cobre-boton);color:var(--tinta)}
.boton-cobre:hover{background:#f0954f}
.boton-fantasma{background:rgba(18,12,8,.3);color:var(--crema);border-color:rgba(243,233,216,.5)}
.boton-fantasma:hover{border-color:var(--cobre-claro);color:var(--crema-claro)}
.boton-wa{background:var(--wa);color:#fff}
.boton-wa:hover{background:var(--wa-2)}
.boton-oscuro{background:var(--tinta);color:var(--cobre-claro)}
.boton-oscuro:hover{background:#30200f}
.boton-tinta{background:var(--tinta);color:var(--crema-claro)}
.boton-tinta:hover{background:#3a2616}
.boton-linea{background:#fff;color:var(--tinta);border-color:var(--linea-clara)}
.boton-linea:hover{border-color:var(--cobre)}
.boton-chico{min-height:44px;padding:0 16px;font-size:14px}
.boton:disabled{opacity:.5;cursor:not-allowed;transform:none}
.enlace-flecha{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;text-decoration:none;border-bottom:2px solid currentColor;line-height:1.2}
.enlace-flecha span{transition:transform .18s var(--ease)}
.enlace-flecha:hover span{transform:translateX(4px)}
.nota-borde{border-left:3px solid var(--cobre);padding:6px 0 6px 14px;font-size:14px;color:var(--tinta-2);max-width:60ch}
.aviso-chico{font-size:13px;margin-top:18px}
.hueco{display:inline-block;border:1.5px dashed currentColor;border-radius:10px;padding:5px 12px;font-weight:700;font-size:14px;line-height:1.35}

/* estado abierto / cerrado: punto de color y la palabra (nunca solo el color) */
.estado.abierto::before,.estado.cerrado::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.estado.abierto::before{background:#7ed59b}
.estado.cerrado::before{background:#f2a383}

/* las escenas recortan en horizontal lo que entra de lado (clip no crea contenedor de scroll: lo fijado sigue funcionando) */
.esc,.pie{overflow-x:clip}

/* ═══════════ 00 · LLEGADA ═══════════ */
.esc-llegada{position:relative;background:var(--noche)}
.llegada-escenario{position:relative;min-height:clamp(560px,calc(100vh - var(--header-h) - var(--franja-h)),1000px);min-height:clamp(560px,calc(100svh - var(--header-h) - var(--franja-h)),1000px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;overflow:clip;isolation:isolate}
.llegada-panel{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#2a1a10}
.llegada-foto{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform-origin:52% 34%}
.llegada-velo{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(18,12,8,.4) 0%,rgba(18,12,8,0) 20%,rgba(18,12,8,.25) 38%,rgba(18,12,8,.86) 58%,rgba(18,12,8,.97) 76%,var(--noche) 100%)}
.llegada-oscuro{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,12,8,.62) 0%,rgba(18,12,8,.8) 55%,var(--noche) 94%);opacity:0;pointer-events:none}
.llegada-contenido{width:100%;max-width:1240px;margin-inline:auto;padding:24px var(--gutter) 20px;display:flex;flex-direction:column;gap:14px}
.llegada-lugar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:800 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--humo)}
.llegada-lugar i{flex:0 0 26px;height:2px;background:var(--cobre-claro)}
.llegada-titulo{font-size:clamp(3.4rem,17vw,7.4rem);line-height:.9}
.llegada-titulo em{display:block;color:var(--cobre-claro)}
.llegada-lead{font-size:clamp(.98rem,1.4vw,1.15rem);line-height:1.55;color:#ecdfcc;max-width:46ch}
.llegada-acciones{display:flex;flex-wrap:wrap;gap:10px}
.llegada-acciones .boton{flex:1 1 auto;padding:0 18px;white-space:nowrap}
@media (max-width:389px){.llegada-acciones .boton{padding:0 13px;gap:6px}}
@media (max-width:359px){.llegada-acciones{gap:8px}.llegada-acciones .boton{padding:0 10px;gap:5px;font-size:14px}}
/* celulares bajos (≤ 760 px de alto): la portada se aprieta para que el letrero de la fachada siga a la vista */
@media (max-width:639px) and (max-height:760px){
  .llegada-lugar{display:none}
  .llegada-titulo{font-size:clamp(3rem,15vw,7.4rem)}
  .llegada-lead{font-size:.93rem;line-height:1.5}
  .llegada-contenido{gap:12px}
}
/* celulares muy bajos (≤ 640 px, como 320 × 568): sin los subtítulos de los datos, para que la portada fijada entre */
@media (max-width:639px) and (max-height:640px){
  .llegada-titulo{font-size:clamp(2.8rem,14vw,7.4rem)}
  .llegada-lead{font-size:.9rem}
  .llegada-datos dd>span{display:none}
  .llegada-contenido{gap:10px;padding-top:16px}
}
.llegada-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(243,233,216,.22);margin-top:4px}
.llegada-datos>div{padding:12px 6px 0 0;min-width:0}
.llegada-datos>div+div{padding-left:10px;border-left:1px solid rgba(243,233,216,.22)}
.llegada-datos dt{font:800 10px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--humo-2)}
.llegada-datos strong{display:block;font:400 clamp(1.05rem,4.9vw,1.75rem)/1.02 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-top:6px;color:var(--crema)}
.llegada-datos dd>span{display:block;font-size:12px;line-height:1.35;color:#d8c8b3;margin-top:3px}
html.anima .llegada-contenido>*{animation:entra .8s var(--ease) both}
html.anima .llegada-titulo{animation-delay:.06s}
html.anima .llegada-lead{animation-delay:.16s}
html.anima .llegada-acciones{animation-delay:.24s}
html.anima .llegada-datos{animation-delay:.32s}
html.anima .llegada-panel{animation:panel-entra 1.8s var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes panel-entra{from{transform:scale(1.07)}to{transform:none}}

/* ═══════════ 01 · ADENTRO ═══════════ */
.esc-adentro{position:relative;background:var(--noche);isolation:isolate}
.esc-adentro::before{content:"";position:absolute;inset:0;z-index:-3;background:url(../medios/tex-tablones.webp) 0 0/300px auto repeat;opacity:.05;pointer-events:none}
.adentro{position:relative}
.adentro-fijo{position:relative;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;overflow:clip;isolation:isolate}
.adentro-video-caja{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#1a120c url(../medios/kiba-recorrido-largo-poster-720.webp) 50% 50%/cover no-repeat}
.adentro-video{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 40%}
/* el rótulo va solo en el marco de escritorio; en el celular arriba va la barra del video */
.adentro-rotulo{position:absolute;top:14px;left:var(--gutter);display:none;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(18,12,8,.72);font:800 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--crema)}
.adentro-rotulo i{width:8px;height:8px;border-radius:50%;background:var(--arbol)}
/* barra del video: pausa, contador «0:12 / 0:32», «Ver el recorrido completo» y la línea de avance.
   En el celular va arriba (la frase entra abajo); en el marco de escritorio, abajo. */
.video-controles{position:absolute;left:var(--gutter);right:var(--gutter);top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 6px 9px;border-radius:20px;background:rgba(18,12,8,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.video-boton{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(243,233,216,.5);background:transparent;color:var(--crema);cursor:pointer}
.video-boton:hover{border-color:var(--cobre-claro)}
.ico-pausa{display:block;width:14px;height:16px;border-left:4.5px solid currentColor;border-right:4.5px solid currentColor}
.video-boton.en-pausa .ico-pausa{width:0;height:0;margin-left:4px;border-right:0;border-left:15px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent}
.video-cuenta{flex:1;min-width:0;font:800 13px/1 var(--sans);letter-spacing:.04em;color:var(--crema);white-space:nowrap}
.video-completo{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:var(--cobre-boton);color:var(--tinta);font:800 13.5px/1.1 var(--sans);cursor:pointer;white-space:nowrap}
.video-completo:hover{background:#f0954f}
.ico-grande{flex:none;width:15px;height:15px;background:linear-gradient(currentColor,currentColor) 0 0/6px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 0/2px 6px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/6px 2px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/2px 6px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/6px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/2px 6px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/6px 2px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/2px 6px no-repeat}
.solo-ancho{display:none}
@media (min-width:420px){.solo-ancho{display:inline}}
@media (max-width:359px){.video-controles{column-gap:6px}.video-cuenta{font-size:12px;letter-spacing:0}.video-completo{padding:0 11px;gap:6px}}
.video-avance{flex:1 0 100%;order:9;height:3px;margin:0 6px;border-radius:3px;background:rgba(243,233,216,.25);overflow:hidden}
.video-avance i{display:block;height:100%;background:var(--cobre-claro);transform-origin:0 50%;transform:scaleX(0)}
/* «Ver el recorrido completo»: el video en grande, centrado, con sus controles */
.video-dialogo{padding:0;border:0;background:transparent;color:var(--crema);max-width:100vw;max-height:100vh;max-height:100dvh;overflow:visible}
.video-dialogo[open]{display:flex;flex-direction:column;align-items:center;gap:10px}
.video-dialogo::backdrop{background:rgba(10,7,4,.93)}
.video-dialogo-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.video-dialogo-cabeza p{font:800 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--crema)}
.video-dialogo-cabeza p span{color:var(--humo)}
.video-cerrar{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(243,233,216,.6);background:rgba(18,12,8,.6);color:var(--crema);font:800 13px var(--sans);cursor:pointer}
.video-cerrar:hover{border-color:var(--cobre-claro)}
.video-grande{display:block;height:calc(100vh - 84px);height:min(calc(100dvh - 84px),1280px);width:auto;max-width:calc(100vw - 24px);aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:16px}
/* con datos móviles, ahorro de datos o «reducir movimiento» el video no arranca solo: botón grande sobre el póster */
.video-play{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 22px 8px 8px;border-radius:999px;border:1px solid rgba(243,233,216,.55);background:rgba(18,12,8,.8);color:var(--crema);font:800 15px/1.2 var(--sans);cursor:pointer;text-align:left;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.video-play small{display:block;font-weight:600;font-size:12px;color:var(--humo);margin-top:2px}
.video-play-ico{position:relative;flex:none;width:42px;height:42px;border-radius:50%;background:var(--cobre-boton)}
.video-play-ico::after{content:"";position:absolute;left:16px;top:13px;border-left:14px solid var(--tinta);border-top:8px solid transparent;border-bottom:8px solid transparent}
.video-play:hover{border-color:var(--cobre-claro)}
.adentro-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,12,8,0) 0%,rgba(18,12,8,0) 22%,rgba(18,12,8,.1) 36%,rgba(18,12,8,.8) 58%,rgba(18,12,8,.96) 78%,var(--noche) 100%);pointer-events:none}
.adentro-texto{width:100%;max-width:1240px;margin-inline:auto;padding:24px var(--gutter) clamp(28px,6vh,64px)}
.adentro-texto .esc-num{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.adentro-frase{font:400 clamp(2rem,8.6vw,4.6rem)/1.02 var(--display);letter-spacing:.005em;max-width:17ch;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.adentro-frase em{color:var(--cobre-claro)}
.adentro-pie{margin-top:18px;max-width:48ch;font-size:clamp(1rem,1.3vw,1.12rem);color:var(--humo)}

.quienes{padding-block:clamp(56px,9vw,120px) clamp(72px,11vw,150px)}
.quienes-cabeza{margin-bottom:24px}
.quienes-titulo{font-size:clamp(2.1rem,7vw,4.2rem);max-width:14ch}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.bt{position:relative;overflow:hidden;border-radius:var(--r);padding:22px;background:var(--tronco);border:1px solid var(--linea);display:flex;flex-direction:column;gap:8px;min-height:190px;min-width:0}
.bt-ico{color:var(--cobre-claro);margin-bottom:auto}
.bt-num{position:absolute;top:18px;right:20px;font:400 15px/1 var(--display);letter-spacing:.06em;color:var(--humo-2)}
.bt h4{font-size:clamp(1.2rem,2vw,1.45rem);letter-spacing:-.01em}
.bt p{color:var(--humo);font-size:15px;line-height:1.5}
.bt-foto{padding:0;min-height:440px;justify-content:flex-end;border:0}
.bt-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.bt-foto:hover img{transform:scale(1.035)}
.bt-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,12,8,0) 30%,rgba(18,12,8,.88) 78%)}
.bt-texto{position:relative;z-index:1;padding:22px;display:grid;gap:8px}
.bt-texto .bt-num{position:static;color:var(--cobre-claro)}
.bt-texto h4{font:400 clamp(1.9rem,4.4vw,2.8rem)/.95 var(--display);text-transform:uppercase;max-width:12ch}
.bt-texto p{color:#e6d7c3;max-width:40ch}
.bt-cobre{background:var(--rojizo) url(../medios/tex-tablones-osc.webp) 0 0/300px auto repeat;border-color:#9c4a24;color:var(--crema-claro)}
.bt-cobre .bt-ico{color:var(--oro)}
.bt-cobre p{color:var(--rojizo-texto)}

/* ═══════════ 02 · LAS MADERAS (tablones reales del almacén, oscurecidos al cobre rojizo de las fotos) ═══════════
   tex-tablones-osc: media #863d1a y brillo acotado; crema sobre ella ≥ 4,7:1 y el dorado de titulares ≥ 3,4:1. */
.esc-maderas{background:var(--rojizo) url(../medios/tex-tablones-osc.webp) 0 0/300px auto repeat;color:var(--crema-claro);--focus:var(--oro)}
.esc-maderas .esc-num{color:var(--rojizo-texto)}
.galeria{position:relative}
.galeria-fijo{display:flex;flex-direction:column;gap:clamp(18px,3vw,32px);padding-block:clamp(64px,9vw,112px) 24px}
.galeria-cabeza{display:grid;gap:14px}
.galeria-titulo{font-size:clamp(2.5rem,min(11vw,10.5vh),6rem)}
.galeria-titulo em{display:block;color:var(--oro)}
.galeria-texto{display:grid;gap:10px;max-width:46ch;font-size:clamp(.98rem,1.3vw,1.1rem);color:var(--rojizo-texto);font-weight:500}
.galeria-ayuda{display:flex;align-items:center;gap:8px;font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rojizo-texto)}
.galeria-ayuda i{font-style:normal}
.solo-fijo{display:none}
html.pin-gal .solo-fijo{display:inline}
html.pin-gal .solo-libre{display:none}
.galeria-ventana{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--oro) transparent}
.galeria-ventana:focus-visible{outline-offset:-3px}
.galeria-pista{position:relative;display:flex;gap:14px;width:max-content;padding-left:max(var(--gutter),calc((100% - 1240px) / 2 + var(--gutter)));padding-right:max(var(--gutter),calc((100% - 1240px) / 2 + var(--gutter)));padding-bottom:8px}
.mad{flex:none;scroll-snap-align:center;width:clamp(268px,80vw,360px);background:var(--noche-2);color:var(--crema);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;--focus:var(--cobre-claro);box-shadow:0 24px 50px -28px rgba(40,16,4,.7)}
/* cabecera de cada especie: veta real (una tabla clara fotografiada en KIBA, en gris medio) teñida con el tono de
   referencia de la especie. Es CSS puro: se ve igual sin JavaScript. */
.mad-veta{display:block;width:100%;height:118px;background:var(--base) url(../medios/tex-grano.webp) var(--x,50% 50%)/cover no-repeat;background-blend-mode:overlay;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}
.mad-cuerpo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.mad-nombre{font:400 clamp(2rem,6vw,2.5rem)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.mad-cient{font-style:italic;font-size:13px;color:var(--humo-2)}
.mad-nota{font-size:15px;line-height:1.45}
.mad-datos{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;border-top:1px solid var(--linea);padding-top:12px;margin-top:4px}
.mad-datos div{min-width:0}
.mad-datos dt{font:800 10px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--humo-2)}
.mad-datos dd{font-weight:700;font-size:14px;line-height:1.3;margin-top:3px}
.barrita{display:inline-flex;gap:3px;vertical-align:middle;margin-right:4px}
.barrita i{width:11px;height:6px;border-radius:3px;background:var(--linea-2)}
.barrita i.on{background:var(--cobre-claro)}
.mad-usos{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.mad-usos li{font-size:12.5px;font-weight:700;border:1px solid var(--linea-2);border-radius:999px;padding:3px 10px;color:var(--humo)}
.mad-boton{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cobre-claro);font-weight:800;text-decoration:none;border-bottom:2px solid currentColor;line-height:1.2}
.mad-boton span{transition:transform .18s var(--ease)}
.mad-boton:hover span{transform:translateX(4px)}
.mad-ayuda{background:var(--crema);color:var(--tinta);padding:24px;gap:14px;justify-content:space-between;--focus:var(--cobre-osc)}
.mad-ayuda-eti{font:800 12px var(--sans);letter-spacing:.16em;color:var(--cobre-osc)}
.mad-ayuda-frase{font:400 clamp(2.6rem,9vw,3.6rem)/.92 var(--display);text-transform:uppercase}
.mad-ayuda>p:not([class]){color:var(--tinta-2);font-size:15px}
.galeria-pie{display:flex;align-items:center;gap:16px}
.galeria-barra{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(255,236,214,.22);overflow:hidden}
.galeria-barra i{position:absolute;inset:0;background:var(--oro);transform-origin:0 50%;transform:scaleX(1)}
.galeria-cuenta{font:800 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--rojizo-texto);white-space:nowrap}
html.pin-gal .galeria-barra i{transform:scaleX(0)}
html.pin-gal .galeria{height:calc(100vh - var(--header-h) + var(--tramo,var(--recorrido,0px)));height:calc(100svh - var(--header-h) + var(--tramo,var(--recorrido,0px)))}
html.pin-gal .galeria-fijo{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));overflow:hidden;overflow:clip;justify-content:center;padding-block:clamp(14px,3vh,40px)}
html.pin-gal .galeria-ventana{overflow:visible;scroll-snap-type:none}
html.pin-gal .galeria-pista{will-change:transform}
html.pin-gal .mad-veta{height:clamp(56px,10vh,118px)}
@media (max-width:859px) and (max-height:920px){
  html.pin-gal .galeria-texto>p:first-child{display:none}
  html.pin-gal .galeria-titulo{font-size:clamp(2.3rem,min(10vw,7.4vh),4rem)}
  html.pin-gal .mad-cuerpo{gap:6px;padding-block:14px 16px}
  html.pin-gal .mad-datos{gap:8px 12px;padding-top:10px}
}

.formatos{padding-block:clamp(36px,5vw,64px) clamp(56px,7vw,96px)}
.formatos-cabeza{display:grid;gap:8px;margin-bottom:20px;max-width:640px}
.formatos-cabeza h3{font:400 clamp(2rem,6vw,3.2rem)/.95 var(--display);text-transform:uppercase}
.formatos-cabeza p{color:var(--rojizo-texto);font-weight:500}
.grid-fmt{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.fmt{background:var(--crema-claro);color:var(--tinta);border-radius:18px;padding:16px;display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:start;--focus:var(--cobre-osc)}
.fmt svg{width:60px;height:60px}
.fmt h4{font-size:16px;margin-bottom:2px}
.fmt-med{font-size:13px;font-weight:800;color:var(--cobre-osc)}
.fmt p{font-size:14px;color:var(--tinta-2);margin-top:4px}
.fmt a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:800;color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.esc-maderas .aviso-chico{color:var(--rojizo-texto);font-weight:600;max-width:90ch}

/* ═══════════ 03 · A TU MEDIDA (crema con veta) ═══════════ */
.esc-medida{background:var(--crema) url(../medios/tex-veta.webp) 0 0/300px auto repeat;background-blend-mode:multiply;color:var(--tinta);--focus:var(--cobre-osc);padding-block:clamp(72px,11vw,150px)}
.esc-medida .esc-num{color:var(--tinta-2)}
.medida-cabeza{display:grid;gap:18px}
.medida-titulo{font-size:clamp(2.5rem,10.4vw,5.6rem)}
.medida-titulo em{display:block;color:var(--cobre-osc)}
.medida-lead{max-width:46ch;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--tinta-2)}
.medida-cuerpo{display:grid;gap:40px;margin-top:clamp(36px,6vw,72px)}
.medida-foto-marco{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:#c98a5a;box-shadow:var(--sombra)}
.medida-foto-marco img{width:100%;height:100%;object-fit:cover}
.cotas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cota path{fill:none;stroke:var(--crema-claro);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgba(30,15,5,.6))}
.cota{transform-box:fill-box}
.cota-largo{transform-origin:50% 0}
.cota-ancho{transform-origin:0 50%}
.cota-texto{font:400 44px var(--tiza);fill:var(--crema-claro);paint-order:stroke;stroke:rgba(40,20,8,.6);stroke-width:7px}
.medida-foto figcaption{margin-top:12px;font-size:14px;color:var(--tinta-2);max-width:52ch}
.camino{position:relative}
.camino-linea{position:absolute;top:8px;bottom:0;left:11px;width:2px;background:rgba(143,67,23,.22)}
.camino-linea i{position:absolute;inset:0;background:var(--cobre);transform-origin:50% 0}
.etapa{position:relative;padding:0 0 clamp(26px,4vw,44px) 44px}
.etapa::before{content:"";position:absolute;left:4px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--crema);border:2px solid var(--cobre)}
.etapa-num{position:relative;width:max-content;font:400 clamp(3.4rem,11vw,5.4rem)/.85 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(143,67,23,.55);margin-bottom:8px}
.etapa-num-lleno{position:absolute;left:0;top:0;color:var(--cobre);-webkit-text-stroke:0;transform-origin:0 100%}
.etapa-cuerpo{display:grid;gap:6px;max-width:560px}
.etapa-cuerpo h3{display:flex;align-items:center;gap:10px;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.01em}
.etapa-cuerpo h3 svg{flex:none;color:var(--cobre-osc)}
.etapa-cuerpo p{color:var(--tinta-2);font-size:clamp(1rem,1.3vw,1.08rem);max-width:48ch}
.esc-medida .nota-borde{margin:4px 0 28px 44px}
.esc-medida .enlace-flecha{margin-left:44px;color:var(--tinta)}

/* tablón que cruza la pantalla entre escenas (recorte real de una tabla) */
.tablon{position:relative;height:clamp(22px,3vw,40px);overflow:hidden;background:#7a3a1a}
.tablon i{position:absolute;inset:0 -12%;background:url(../medios/tex-tablon.webp) 0 50%/auto 100% repeat-x}
.tablon::after{content:"";position:absolute;inset:0;box-shadow:inset 0 2px 0 rgba(255,236,214,.22),inset 0 -4px 6px rgba(0,0,0,.45);pointer-events:none}

/* ═══════════ 04 · EL ALMACÉN POR DENTRO (noche: un pasillo a sangre y, debajo, los contraplanos) ═══════════ */
.esc-almacen{position:relative;background:var(--noche);color:var(--crema);padding-block:clamp(72px,11vw,150px) clamp(56px,8vw,110px);overflow:hidden;overflow:clip;isolation:isolate}
.esc-almacen::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../medios/tex-tablones.webp) 0 0/300px auto repeat;opacity:.06;pointer-events:none}
.almacen-titulo{font-size:clamp(3.1rem,15vw,9.6rem);line-height:.9}
/* en el celular el titular va en cobre liso (la veta partía las letras); la veta real rellena las letras desde 900 px */
.texto-veta{display:block;color:var(--cobre-claro);padding-top:.14em;margin-top:-.14em}
@media (min-width:900px){
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .texto-veta{background:url(../medios/tex-tablones.webp) 0 40%/auto 520% repeat-x;-webkit-background-clip:text;background-clip:text;color:transparent}
  }
}
@media (forced-colors:active){.texto-veta{background:none;color:CanvasText}}
.almacen-titulo-b{display:block;color:var(--crema)}
.almacen-lead{margin-top:22px;max-width:52ch;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--humo)}
.almacen-grande{position:relative;margin-top:clamp(32px,5vw,64px);aspect-ratio:4/3;max-height:86svh;width:100%;overflow:hidden;overflow:clip;background:var(--tronco)}
.almacen-grande img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.almacen-grande::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(180deg,rgba(18,12,8,0),rgba(18,12,8,.8));pointer-events:none}
.almacen-grande figcaption{position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);bottom:14px;font-size:clamp(1.15rem,2.4vw,1.9rem);line-height:1.15;color:var(--crema-claro);text-shadow:0 1px 4px rgba(0,0,0,.85);transform:rotate(-1.5deg);transform-origin:0 100%}
.muro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.foto{position:relative;border-radius:16px;overflow:hidden;background:var(--tronco);min-width:0}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.foto:hover img{transform:scale(1.035)}
.foto::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(180deg,rgba(18,12,8,0),rgba(18,12,8,.78));pointer-events:none}
.foto figcaption{position:absolute;z-index:1;left:12px;right:12px;bottom:10px;font:400 clamp(.92rem,1.5vw,1.12rem)/1.15 var(--tiza);color:var(--crema-claro);text-shadow:0 1px 3px rgba(0,0,0,.85);transform:rotate(-2deg);transform-origin:0 100%}
.foto-veta,.foto-tiza{aspect-ratio:1}
.foto-escalera,.foto-porton{aspect-ratio:3/4}
.foto-entrada{grid-column:1/-1;aspect-ratio:4/3}
.foto-entrada img{object-position:50% 40%}
.foto-tiza img{object-position:58% 50%}
.almacen-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(36px,6vw,72px);padding-top:24px;border-top:1px solid var(--linea)}
.almacen-pie p{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--humo);max-width:44ch}

/* ═══════════ 05 · TRES PASOS (foto de las piezas marcadas a tiza + pizarra con marco de tablón) ═══════════ */
.esc-pasos{position:relative;background:var(--noche);color:var(--crema);isolation:isolate;padding-bottom:clamp(64px,9vw,120px)}
.esc-pasos::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../medios/tex-tablones.webp) 0 0/300px auto repeat;opacity:.05;pointer-events:none}
.defs-tiza{position:absolute;width:0;height:0;overflow:hidden}
.pasos-foto{position:relative;min-height:clamp(440px,74svh,760px);display:flex;align-items:flex-end;overflow:hidden;overflow:clip;isolation:isolate}
.pasos-foto picture{position:absolute;inset:0;z-index:-2}
.pasos-foto img{width:100%;height:100%;object-fit:cover;object-position:20% 30%}
.pasos-foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,12,8,.3) 0%,rgba(18,12,8,0) 22%,rgba(18,12,8,.15) 46%,rgba(18,12,8,.86) 76%,var(--noche) 100%)}
.pasos-cabeza{padding-top:140px;padding-bottom:4px}
.pasos-cabeza .esc-num{color:var(--crema)}
.pedido-titulo{font-size:clamp(2.9rem,12.4vw,6.6rem);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.pedido-titulo em{display:block;color:var(--cobre-claro)}
.pasos{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(16px,3vw,36px)}
.paso{display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-top:1.5px dashed rgba(243,233,216,.24)}
.paso:first-child{border-top:0}
.paso-n{display:grid;place-items:center;width:54px;height:54px;font-size:34px;line-height:1;color:var(--oro);border:2px solid rgba(242,194,107,.8);border-radius:54% 44% 52% 46%;transform:rotate(-7deg)}
.paso h3{font-size:1.22rem;color:var(--crema-claro);margin-top:4px}
.paso p{color:var(--humo);font-size:15px;margin-top:6px;max-width:42ch}
.asistente{margin-top:clamp(36px,6vw,72px);padding:clamp(20px,3vw,34px);border:9px solid transparent;border-radius:16px;background:radial-gradient(ellipse at 18% 12%,rgba(243,233,216,.07),transparent 55%) padding-box,radial-gradient(ellipse at 85% 95%,rgba(243,233,216,.05),transparent 50%) padding-box,linear-gradient(#1c1915,#1c1915) padding-box,url(../medios/tex-tablon.webp) 0 0/auto 26px repeat border-box;box-shadow:0 30px 60px -30px #000,inset 0 0 0 1px rgba(0,0,0,.5)}
.asis-cabeza{display:grid;gap:8px;max-width:640px;margin-bottom:20px}
.asis-cabeza .etiqueta{margin:0;color:var(--oro)}
.asis-cabeza h3{font:400 clamp(1.7rem,5.6vw,2.5rem)/1.08 var(--tiza);color:var(--crema-claro);transform:rotate(-1deg);transform-origin:0 50%}
.asis-cabeza p{color:var(--humo)}
.grid-asis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.proy{all:unset;box-sizing:border-box;cursor:pointer;position:relative;border:1.5px dashed rgba(243,233,216,.32);border-radius:14px;padding:10px 12px 14px;display:grid;gap:3px;align-content:start;min-height:44px;color:var(--crema);transition:border-color .15s,background-color .15s,transform .18s var(--ease)}
.proy:hover{border-color:var(--cobre-claro);background:rgba(243,233,216,.05);transform:translateY(-2px)}
.proy:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.proy[aria-pressed="true"]{border-style:solid;border-color:var(--oro);background:rgba(242,194,107,.11)}
.proy-dibujo{display:block;width:100%;max-width:150px;height:auto;aspect-ratio:3/2;overflow:visible}
.proy-dibujo path{fill:none;stroke:#f3eadb;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.proy-dibujo .suave{stroke-width:1.3;opacity:.5}
.proy-med{font-size:17px;line-height:1.1;color:var(--oro);transform:rotate(-3deg);transform-origin:0 50%;margin-bottom:2px}
.proy b{font-size:15px;line-height:1.25}
.proy small{color:var(--humo);font-size:13px;line-height:1.35}
.sugerencia{margin-top:14px;background:var(--crema-claro);color:var(--tinta);border-radius:14px;padding:16px 18px;border-left:4px solid var(--cobre);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;--focus:var(--cobre-osc)}
.sugerencia p{max-width:68ch;min-width:0}

/* ═══════════ 06 · COTIZADOR (mesa de tablón claro: la veta clara, en horizontal, sobre un tono de madera cepillada) ═══════════ */
.esc-cotiza{background:#ead6b3 url(../medios/tex-veta-h.webp) 0 0/726px auto repeat;background-blend-mode:multiply;color:var(--tinta);--focus:var(--cobre-osc);padding-block:clamp(64px,9vw,120px);color-scheme:light}
.esc-cotiza .etiqueta{color:#4a3528}
.cotiza-cabeza{display:grid;gap:12px;max-width:760px;margin-bottom:26px}
.cotiza-cabeza .esc-num{margin:0;color:#4a3528}
.cotiza-titulo{font:400 clamp(2.9rem,12.4vw,6.6rem)/.92 var(--display);text-transform:uppercase;letter-spacing:.005em}
.cotiza-titulo em{color:var(--cobre-osc)}
.cotiza-cabeza p{color:#3a2a1f;font-weight:500;max-width:60ch}
.bloque-cabeza{display:grid;gap:8px;max-width:720px;margin-bottom:22px}
.bloque-cabeza .etiqueta{margin:0}
.bloque-cabeza h3{font:400 clamp(1.8rem,5.4vw,2.8rem)/.98 var(--display);text-transform:uppercase}
.bloque-cabeza p{color:#3a2a1f}
.conf{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.panel{background:#fff;border-radius:20px;border:1px solid var(--linea-clara);box-shadow:0 1px 2px rgba(40,25,10,.05),0 14px 34px -18px rgba(40,25,10,.22);padding:18px}
.paso-c{display:grid;gap:10px;padding-block:16px;border-top:1px solid var(--linea-clara)}
.paso-c:first-child{border-top:0;padding-top:0}
.paso-c>label,.paso-c>.t{font-weight:800;font-size:14px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.paso-c .t small,.paso-c>label small{font-weight:600;color:var(--tinta-2);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;cursor:pointer;min-width:48px;justify-content:center;background:var(--crema);border-radius:999px;padding:0 14px;min-height:44px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;color:var(--tinta);transition:background-color .12s,box-shadow .12s}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--cobre)}
.chip[aria-pressed="true"]{background:var(--tinta);color:#fff}
.chip .sw{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.chip.serv[aria-pressed="true"]{background:var(--cobre-osc)}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.esc-cotiza select,.esc-cotiza input[type=number],.esc-cotiza input[type=text],.esc-cotiza input[type=date],.esc-cotiza textarea{background:#fff;border:1.5px solid var(--linea-clara);border-radius:12px;padding:10px 12px;min-height:44px;min-width:0;color:var(--tinta)}
.esc-cotiza select:focus,.esc-cotiza input:focus,.esc-cotiza textarea:focus{border-color:var(--cobre)}
.kerf{width:84px}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--linea-clara);border-radius:12px;overflow:hidden;background:#fff;width:max-content}
.stepper button{border:0;background:var(--crema);width:44px;height:44px;font-size:22px;font-weight:700;cursor:pointer;color:var(--tinta)}
.stepper button:disabled{opacity:.45;cursor:not-allowed}
.esc-cotiza .stepper input{border:0;width:72px;text-align:center;font-weight:800;min-height:44px;border-radius:0}
.stepper input:disabled{background:#fff;color:var(--cobre-osc)}
.ayuda{font-size:13px;color:var(--tinta-2)}
.cortes{display:grid;gap:8px}
.corte,.corte-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:8px;align-items:center}
.corte input{width:100%}
.corte button{border:0;background:var(--crema);border-radius:10px;height:44px;cursor:pointer;font-size:18px;color:var(--tinta)}
.corte-cab{font-size:12px;font-weight:800;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.06em}
.vista{display:grid;gap:16px}
.vista-panel{display:grid;gap:14px}
.lienzo{background:linear-gradient(180deg,#fbf7f0,#f1e8da);border-radius:14px;padding:8px;position:relative}
.lienzo svg{display:block;width:100%;height:auto}
.perfil{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.9);border-radius:12px;padding:6px 8px;font-size:10px;font-weight:800;color:var(--tinta-2);text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.perfil svg{width:56px;height:auto;display:block;margin:0 auto 4px}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px}
.etiquetas span{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:#f6e3d3;color:var(--cobre-osc)}
.resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dato{background:var(--crema);border-radius:12px;padding:12px;min-width:0}
.dato small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.dato b{font:400 24px/1.15 var(--display);letter-spacing:.01em}
.dato.fuerte{background:var(--tinta);color:#fff}
.dato.fuerte small{color:#e3d0b6}
.medida-txt{font-weight:700}
.medida-txt span{color:var(--tinta-2);font-weight:500}
.formula{font-size:13px;color:var(--tinta-2);background:var(--crema);border-radius:10px;padding:8px 12px}
.precio{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px}
.precio b{color:var(--cobre-osc)}
.plan{display:grid;gap:10px}
.plan h3{font-size:15px;line-height:1.3}
.plan .grupo{display:grid;gap:4px}
.plan .grupo small{font-size:12px;color:var(--tinta-2);font-weight:700}
.tira{display:flex;height:34px;border-radius:6px;overflow:hidden;background:repeating-linear-gradient(45deg,#efe6d6 0 6px,#ddcfb6 6px 9px)}
.tira span{flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#1c1712;border:1.5px solid;border-radius:4px;overflow:hidden;white-space:nowrap}
.tira i{flex:none;background:#1c1712}
.tira em{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;color:var(--tinta-2);white-space:nowrap;overflow:hidden}
.plan .err{color:var(--error);font-weight:700;font-size:14px}
.kpis{display:flex;flex-wrap:wrap;gap:8px}
.kpis span{font-size:13px;font-weight:700;background:var(--crema);border-radius:999px;padding:5px 12px}
.vista-panel>.boton{width:100%}
.mi-pedido{margin-top:clamp(56px,8vw,96px)}
.pedido-box{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.lineas{display:grid;gap:12px}
.linea{background:#fff;border-radius:16px;border:1px solid var(--linea-clara);padding:16px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start}
.linea .sw{width:44px;height:44px;border-radius:10px}
.linea h3{font-size:16px;line-height:1.3}
.linea p{font-size:14px;color:var(--tinta-2)}
.linea .pt{font:400 20px/1.2 var(--display);text-align:right;white-space:nowrap}
.linea .quitar{border:0;background:none;color:var(--error);font-weight:700;font-size:13px;cursor:pointer;min-height:44px;padding:0}
.vacio{background:#fff;border:2px dashed var(--linea-clara);border-radius:16px;padding:28px;text-align:center;color:var(--tinta-2)}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 4px 0;font-weight:800}
.total b{font:400 30px/1 var(--display)}
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:700}
.form-eti{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.seg{display:flex;background:var(--crema);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;border-radius:9px;min-height:44px;padding:0 10px;font-weight:700;cursor:pointer;color:var(--tinta)}
.seg button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.msj{background:#e7f4ec;border-radius:14px;padding:14px;font-size:14px;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto;font-family:ui-monospace,Consolas,monospace;line-height:1.5;color:#123d24}
.envio{display:flex;flex-wrap:wrap;gap:10px}
.envio .boton-wa{flex:1 1 220px}
.req,.err-campo,.falta{color:var(--error)}
.err-campo{font-size:13px;font-weight:700}
.falta{font-size:14px;font-weight:700}
.esc-cotiza input[aria-invalid="true"]{border-color:var(--error);background:#fff6f3}
.destello{animation:destello 1.2s ease}
@keyframes destello{0%{box-shadow:0 0 0 0 rgba(210,122,60,.6)}100%{box-shadow:0 0 0 18px rgba(210,122,60,0)}}

/* ═══════════ 06 · GUÍA Y PREGUNTAS (tronco) ═══════════ */
.esc-guia{background:var(--tronco);color:var(--crema);padding-block:clamp(72px,11vw,150px)}
.guia-cabeza{display:grid;gap:28px}
.guia-titulo{font-size:clamp(2.5rem,10.4vw,6rem)}
.guia-foto{border-radius:var(--r);overflow:hidden;background:var(--noche-2);border:1px solid var(--linea)}
.guia-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 62%}
.guia-foto figcaption{padding:12px 16px 14px;font-size:14px;line-height:1.45;color:var(--humo);display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline}
.guia-foto .tiza{font-size:20px;color:var(--oro)}
.guia-titulo em{color:var(--cobre-claro)}
.guia-lead{margin-top:18px;max-width:46ch;color:var(--humo);font-size:clamp(1rem,1.4vw,1.15rem)}
.guia-desliza{display:none;align-items:center;gap:8px;margin-top:28px;font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cobre-claro)}
.grid-guia{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:clamp(28px,4vw,48px)}
.art{background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--r);padding:22px;display:grid;gap:10px;align-content:start}
.art-n{font:400 16px/1 var(--display);letter-spacing:.06em;color:var(--cobre-claro)}
.art h3{font-size:1.25rem;line-height:1.25}
.art p{color:var(--humo);font-size:15px}
.art .ej{background:rgba(240,160,102,.09);border-left:3px solid var(--cobre-claro);border-radius:8px;padding:10px 12px;color:var(--crema);font-weight:600;font-size:14px}
.pt-tabla{margin-top:14px;background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--r);padding:0 20px}
.pt-tabla summary,.faq summary{cursor:pointer;list-style:none;min-height:56px;padding:16px 36px 16px 0;font-weight:800;font-size:17px;position:relative;display:flex;align-items:center}
.pt-tabla summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.pt-tabla summary::after,.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 26px/1 var(--sans);color:var(--cobre-claro)}
.pt-tabla[open] summary::after,.faq details[open] summary::after{content:"−"}
.pt-tabla .ayuda{color:var(--humo);margin-bottom:12px}
.desliza{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--linea);margin-bottom:20px}
.ptab{border-collapse:collapse;width:100%;min-width:480px;font-variant-numeric:tabular-nums;font-size:15px}
.ptab th,.ptab td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--linea)}
.ptab thead th{background:var(--tronco-2);font-size:13px}
.ptab th:first-child,.ptab td:first-child{text-align:left;position:sticky;left:0;background:var(--noche-2);font-weight:800;box-shadow:1px 0 0 var(--linea)}
.ptab thead th:first-child{background:var(--tronco-2)}
.ptab tbody tr:last-child th,.ptab tbody tr:last-child td{border-bottom:0}
.faq-cabeza{margin:clamp(56px,8vw,96px) 0 20px}
.faq-cabeza h3{font:400 clamp(2rem,6.4vw,3.4rem)/.95 var(--display);text-transform:uppercase}
.faq{display:grid;gap:10px;max-width:880px}
.faq details{background:var(--noche-2);border:1px solid var(--linea);border-radius:16px;padding:0 20px}
.faq details p{padding-bottom:18px;color:var(--humo);max-width:70ch}

/* ═══════════ 08 · VISÍTANOS (el naranja del portón, con las nervaduras de la plancha) ═══════════
   Texto oscuro: la tinta da 5,8:1 sobre el naranja, 6,7:1 sobre la nervadura clara y 5,1:1 sobre la oscura. */
.esc-visita{position:relative;background:var(--porton);color:var(--tinta);--focus:var(--tinta);color-scheme:light;padding-block:clamp(72px,11vw,150px);overflow:hidden;overflow:clip;isolation:isolate}
.esc-visita::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,236,214,.14) 0 3px,rgba(90,32,8,.1) 3px 7px,transparent 7px 30px)}
.esc-visita .esc-num{color:var(--tinta)}
.visita{display:grid;gap:40px;align-items:center}
.visita-titulo{font-size:clamp(2.5rem,11vw,6rem);line-height:1.04}
.visita-titulo em{display:block;color:var(--porton-osc)}
.visita-lead{margin-top:16px;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:600}
.ficha{display:grid;gap:16px;margin:28px 0}
.ficha dt{font:800 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.ficha dd{margin-top:3px;font-size:clamp(1.02rem,1.5vw,1.15rem);font-weight:700}
.ficha dd a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.horario{display:grid;gap:2px;max-width:340px;margin-top:6px;font-size:15px}
.horario div{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:8px}
.horario div.hoy{background:rgba(255,236,214,.3);font-weight:800}
.esc-visita .estado.abierto::before{background:var(--wa-2)}
.esc-visita .estado.cerrado::before{background:var(--tinta)}
.visita-acciones{display:flex;flex-wrap:wrap;gap:10px}
.visita-acciones .boton{flex:1 1 auto}
.esc-visita .boton-fantasma{background:rgba(255,236,214,.2);color:var(--tinta);border:1.5px solid var(--tinta)}
.esc-visita .boton-fantasma:hover{background:rgba(255,236,214,.4);color:var(--tinta);border-color:var(--tinta)}
.esc-visita .boton-wa{border-color:var(--tinta)}
.visita-foto{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;max-width:520px;width:100%;justify-self:center;box-shadow:0 40px 70px -34px rgba(60,20,4,.7);transform:rotate(1.2deg)}
.visita-foto img{width:100%;height:100%;object-fit:cover}
.visita-foto .tiza{position:absolute;left:18px;bottom:16px;font-size:clamp(1.6rem,4vw,2.2rem);color:var(--crema-claro);text-shadow:0 2px 6px rgba(0,0,0,.7);transform:rotate(-5deg)}

/* ═══════════ PROPUESTA · PIE ═══════════ */
.esc-propuesta{background:var(--crema);color:var(--tinta);--focus:var(--cobre-osc);padding-block:clamp(64px,9vw,120px);color-scheme:light}
.esc-propuesta .etiqueta{color:var(--cobre-osc)}
.prop-cabeza{display:grid;gap:10px;max-width:760px}
.prop-cabeza .etiqueta{margin:0}
.prop-cabeza h2{font:400 clamp(2rem,6.4vw,3.6rem)/1.04 var(--display);text-transform:uppercase}
.prop-cabeza p{color:var(--tinta-2)}
.grid-prop{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:12px;margin-top:28px}
.prop{background:#fff;border:1px solid var(--linea-clara);border-radius:18px;padding:18px;display:grid;gap:6px;align-content:start}
.prop b{font-size:16px}
.prop p{font-size:14px;color:var(--tinta-2)}
.fase{font:800 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cobre-osc)}

.pie{background:var(--noche);color:var(--humo);font-size:14px;padding-block:44px calc(40px + env(safe-area-inset-bottom,0px))}
body.con-barra .pie{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.pie-grid{display:grid;gap:22px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pie-grid>div:first-child{grid-column:1/-1}
.pie-marca{display:inline-flex;align-items:flex-end;gap:7px;margin-bottom:12px;color:var(--crema);line-height:1}
.pie-eti{font:800 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--crema);margin-bottom:8px}
.pie a,.pie-grid span{display:flex;align-items:center;min-height:44px;text-decoration:none}
.pie a:hover{color:var(--crema)}
.legal{border-top:1px solid var(--linea);margin-top:28px;padding-top:18px;font-size:13px}
.legal b{color:var(--crema)}

/* barra del pedido */
.barra{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:46;background:var(--noche-2);color:#fff;border:1px solid var(--linea-2);border-radius:18px;padding:10px 10px 10px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:translateY(160%);transition:transform .25s var(--ease)}
.barra.ver{transform:none}
.barra div{flex:1;min-width:0;font-size:14px;line-height:1.3}
.barra b{display:block;font:400 20px/1.1 var(--display);letter-spacing:.02em}
.toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-20px);opacity:0;z-index:60;background:var(--wa-2);color:#fff;font-weight:700;padding:12px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .25s,opacity .25s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* ════════════════ ESCENAS FIJADAS (html.pin: hay JS y se permite movimiento) ════════════════ */
html.pin .esc-llegada{height:calc(175vh - var(--header-h));height:calc(100svh - var(--header-h) + 75svh)}
html.pin .llegada-escenario{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:0;padding-bottom:var(--franja-h)}
html.pin .llegada-foto{will-change:transform}
/* 01 · el video tiene 1,5 pantallas de tramo fijado: hasta el 40 % se ve solo y después entra la frase */
html.pin .adentro{height:calc(250vh - var(--header-h));height:calc(100svh - var(--header-h) + 150svh)}
html.pin .adentro-fijo{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:0}

/* ════════════════ MOVIMIENTO LIGADO AL SCROLL (html.sda: CSS scroll-driven animations) ════════════════ */
html.sda .cab-progreso{animation:barra-x linear both;animation-timeline:scroll(root)}
@keyframes barra-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 00 · la cámara se acerca al portón y entra a la sombra del almacén */
html.sda.pin .esc-llegada{view-timeline:--llegada block;view-timeline-inset:var(--header-h) 0px}
html.sda.pin .llegada-foto{animation:al-porton linear both;animation-timeline:--llegada;animation-range:contain 0% contain 100%}
@keyframes al-porton{from{transform:none}to{transform:scale(2.5)}}
/* el texto no se desvanece sobre la foto: sale del encuadre hacia arriba, entero y legible, en el primer tercio */
html.sda.pin .llegada-contenido{animation:sale-arriba linear both;animation-timeline:--llegada;animation-range:contain 0% contain 34%}
@keyframes sale-arriba{from{transform:none}to{transform:translateY(-105svh)}}
@media (min-width:1080px){html.sda.pin .llegada-velo{animation:velo-baja linear both;animation-timeline:--llegada;animation-range:contain 22% contain 45%}}
@keyframes velo-baja{from{opacity:1}to{opacity:.45}}
html.sda.pin .llegada-oscuro{animation:a-la-sombra linear both;animation-timeline:--llegada;animation-range:contain 58% contain 100%}
@keyframes a-la-sombra{from{opacity:0}to{opacity:1}}

/* 01 · primero el video solo (se asienta hasta el 40 %); después la frase se enciende palabra por palabra entre el
   42 y el 86 % (los tramos los pone escenas.js) y al final aparece el pie. En el celular la frase y su velo recién
   entran al 34 %, para no tapar el video mientras se ve solo. */
html.sda.pin .adentro{view-timeline:--adentro block;view-timeline-inset:var(--header-h) 0px}
html.anima .adentro-frase .luz{opacity:.3}
html.sda.pin .adentro-frase .luz{animation:luz linear both;animation-timeline:--adentro}
@keyframes luz{from{opacity:.3}to{opacity:1}}
html.sda.pin .adentro-pie{animation:aparece linear both;animation-timeline:--adentro;animation-range:contain 88% contain 97%}
@keyframes aparece{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
html.sda.pin .adentro-video{animation:video-asienta linear both;animation-timeline:--adentro;animation-range:contain 0% contain 40%}
@keyframes video-asienta{from{transform:scale(1.14)}to{transform:none}}
@keyframes texto-entra{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@media (max-width:859px){
  html.sda.pin .adentro-velo{animation:aparece-sola linear both;animation-timeline:--adentro;animation-range:contain 32% contain 46%}
  html.sda.pin .adentro-texto{animation:texto-entra linear both;animation-timeline:--adentro;animation-range:contain 34% contain 46%}
  html.io.pin .adentro-velo{opacity:clamp(0,calc((var(--p,0) - .32) / .14),1)}
  html.io.pin .adentro-texto{opacity:clamp(0,calc((var(--p,0) - .34) / .12),1);transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .34) / .12),1)) * 32px))}
}

/* revelados generales */
html.sda .rv{animation:rv-sube both var(--ease);animation-timeline:view();animation-range:cover 0vh cover 32vh}
html.sda .rv-escala{animation-name:rv-escala}
html.sda .rv-lado{animation-name:rv-lado}
@keyframes rv-sube{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes rv-escala{from{opacity:0;transform:translateY(44px) scale(.88)}to{opacity:1;transform:none}}
@keyframes rv-lado{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}

/* 02 · la pista avanza con el scroll vertical */
html.sda.pin-gal .galeria{view-timeline:--gal block;view-timeline-inset:var(--header-h) 0px}
html.sda.pin-gal .galeria-pista{animation:pista linear both;animation-timeline:--gal;animation-range:contain 0% contain 100%}
@keyframes pista{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--recorrido,0px) * -1),0,0)}}
html.sda.pin-gal .galeria-barra i{animation:barra-x linear both;animation-timeline:--gal;animation-range:contain 0% contain 100%}

/* 03 · las cotas se trazan a tiza y el camino de servicios se dibuja */
html.sda .medida-foto{view-timeline:--foto block}
html.sda .cota-largo{animation:cota-y both var(--ease);animation-timeline:--foto;animation-range:cover 6% cover 26%}
html.sda .cota-ancho{animation:cota-x both var(--ease);animation-timeline:--foto;animation-range:cover 12% cover 28%}
html.sda .cota-texto{animation:aparece-sola both linear;animation-timeline:--foto;animation-range:cover 20% cover 32%}
@keyframes cota-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes cota-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes aparece-sola{from{opacity:0}to{opacity:1}}
html.sda .camino-linea i{animation:linea linear both;animation-timeline:view();animation-range:cover 50vh cover calc(100% - 50vh)}
@keyframes linea{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html.sda .etapa-num-lleno{animation:llena both var(--ease);animation-timeline:view();animation-range:cover 40vh cover 56vh}
@keyframes llena{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

/* el tablón se desliza como si pasara por la sierra */
html.sda .tablon i{animation:tablon linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes tablon{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
html.sda .tablon-b i,html.sda .tablon-c i{animation-direction:reverse}

/* 04 · el pasillo grande se acerca al pasar (paralaje suave) */
html.sda .almacen-grande{view-timeline:--grande block}
html.sda .almacen-grande img{animation:grande linear both;animation-timeline:--grande;animation-range:cover 0% cover 100%}
@keyframes grande{from{transform:scale(1.16) translateY(-3%)}to{transform:scale(1.02) translateY(3%)}}

/* ════════════════ RESPALDO SIN scroll-driven animations (html.io: IntersectionObserver) ════════════════ */
html.io .rv{transition:opacity .55s var(--ease),transform .75s var(--ease)}
html.io .rv:not(.is-in){opacity:0;transform:translateY(48px)}
html.io .rv-escala:not(.is-in){transform:translateY(36px) scale(.9)}
html.io .rv-lado:not(.is-in){transform:translateX(48px)}
html.io.pin .llegada-foto{transform:scale(calc(1 + var(--p,0) * 1.5))}
html.io.pin .llegada-contenido{transform:translateY(calc(min(var(--p,0) / .34, 1) * -105svh))}
@media (min-width:1080px){html.io.pin .llegada-velo{opacity:calc(1 - .55 * clamp(0, (var(--p,0) - .22) / .23, 1))}}
html.io.pin .llegada-oscuro{opacity:calc((var(--p,0) - .58) / .42)}
html.io .adentro-frase .luz{transition:opacity .25s linear}
html.io .adentro-frase .luz.on{opacity:1}
html.io .adentro-pie{transition:opacity .5s var(--ease),transform .6s var(--ease)}
html.io.pin .adentro:not(.al-final) .adentro-pie{opacity:0;transform:translateY(28px)}
html.io .cota{transition:transform .9s var(--ease)}
html.io .cota-ancho{transition-delay:.25s}
html.io .cota-texto{transition:opacity .5s .6s}
html.io .medida-foto:not(.is-in) .cota-largo{transform:scaleY(0)}
html.io .medida-foto:not(.is-in) .cota-ancho{transform:scaleX(0)}
html.io .medida-foto:not(.is-in) .cota-texto{opacity:0}
html.io .camino-linea i{transition:transform 1.6s var(--ease)}
html.io .camino:not(.is-in) .camino-linea i{transform:scaleY(0)}
html.io .etapa-num-lleno{transition:opacity .4s var(--ease),transform .5s var(--ease)}
html.io .etapa:not(.is-in) .etapa-num-lleno{opacity:0;transform:scale(.82)}

/* ════════════════ RESPONSIVO ════════════════ */
@media (max-width:639px){
  .quienes{padding-block:56px 64px}
  .bt{min-height:0}
  .bt-foto{min-height:380px}
  .etapa{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding-bottom:20px}
  .etapa-num{font-size:2.5rem;margin:0}
  .etapa-cuerpo h3 svg{width:24px;height:24px}
  .medida-foto-marco{aspect-ratio:4/5}
  .proy-dibujo{max-width:118px}
  .pasos-foto{min-height:clamp(400px,62svh,620px)}
  .pasos-cabeza{padding-top:110px}
  /* guía: los 6 artículos en una fila que se desliza con el dedo (todo visible, con su borde asomando) */
  .grid-guia{grid-auto-flow:column;grid-auto-columns:min(84%,330px);grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:var(--cobre-claro) transparent}
  .grid-guia>.art{scroll-snap-align:start}
  html.sda .grid-guia>.art.rv{animation:none}
  html.io .grid-guia>.art.rv:not(.is-in){opacity:1;transform:none}
  .guia-desliza{display:flex}
  .guia-desliza + .grid-guia{margin-top:12px}
  .visita-foto{aspect-ratio:4/3;transform:none}
  .visita-foto img{object-position:50% 18%}
  .grid-prop{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prop{padding:14px}
  .prop:last-child{grid-column:1/-1}
}
@media (max-width:419px){
  .grid-fmt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fmt{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px}
  .fmt svg{width:44px;height:44px}
  .dos{grid-template-columns:minmax(0,1fr)}
  .resumen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dato.fuerte{grid-column:1/-1}
}
/* 320 px: «Machihembrado» y «machihembradas» no caben en dos columnas */
@media (max-width:359px){
  .grid-fmt{grid-template-columns:minmax(0,1fr)}
  .fmt{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .asistente{padding:14px;border-width:7px}
  .grid-asis{gap:8px}
  .proy{padding:10px 8px 12px}
  .proy small{font-size:12px}
}
@media (min-width:420px){
  .grid-fmt{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:640px){
  :root{--gutter:28px;--header-h:72px;--franja-h:36px}
  .cab-wa{padding:0 16px}
  .cab-wa span{display:inline}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-foto{grid-column:1/-1}
  .bt-cobre{grid-column:1/-1}
  .grid-guia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-asis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .muro{gap:14px;margin-top:14px}
  .paso{grid-template-columns:64px minmax(0,1fr)}
  .perfil{padding:8px 10px;font-size:11px}
  .perfil svg{width:96px}
  .panel{padding:22px}
}
/* cotizador en tablet: las opciones a la izquierda y la pieza con sus totales fija a la derecha, desde 760 px */
@media (min-width:760px){
  .conf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .vista{position:sticky;top:calc(var(--header-h) + 16px)}
}
@media (min-width:760px) and (max-width:1079px){
  .perfil svg{width:64px}
  .resumen{gap:8px}
  .dato{padding:10px}
  .dato b{font-size:21px}
}
@media (min-width:860px){
  .pedido-box{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}
  .galeria-cabeza{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;column-gap:48px}
  .grid-fmt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .medida-cabeza{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;column-gap:48px}
  .medida-cuerpo{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,6vw,88px);align-items:start}
  .medida-foto{position:sticky;top:calc(var(--header-h) + 24px)}
  .muro{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
  .foto-veta,.foto-tiza,.foto-porton,.foto-entrada{aspect-ratio:1;grid-column:auto}
  .foto-escalera{grid-column:3;grid-row:1 / span 2;aspect-ratio:auto}
  .almacen-grande{aspect-ratio:21/9}
  .pasos{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
  .paso{grid-template-columns:1fr;gap:14px;border-top:0;border-left:1.5px dashed rgba(243,233,216,.24);padding:4px 0 4px clamp(18px,2.4vw,32px)}
  .paso:first-child{border-left:0;padding-left:0}
  .pasos-foto{min-height:clamp(480px,78svh,820px)}
  .pasos-foto img{object-position:30% 40%}
  .guia-cabeza{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;column-gap:clamp(32px,5vw,72px)}
  .guia-foto img{aspect-ratio:4/3}
  .visita{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,96px)}
  .pie-grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
  .pie-grid>div:first-child{grid-column:auto}
}
/* 01 en escritorio (y con el celular acostado): la frase a la izquierda y el video grande a la derecha, en un marco
   3:4 que llena el alto de la pantalla (recorta 1/8 arriba y abajo del video vertical) y nunca pasa del 58 % del ancho */
@media (min-width:860px),(min-width:640px) and (max-height:520px){
  .adentro-fijo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(32px,5vw,88px);max-width:1240px;margin-inline:auto;padding:20px var(--gutter)}
  .adentro-video-caja{position:relative;inset:auto;z-index:0;grid-column:2;grid-row:1;height:calc(100vh - var(--header-h) - 40px);height:min(calc(100svh - var(--header-h) - 40px),920px,calc((min(100vw,1240px) - 2 * var(--gutter)) * .78));aspect-ratio:3/4;border-radius:24px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(240,160,102,.18)}
  .adentro-velo{display:none}
  .adentro-texto{grid-column:1;grid-row:1;padding:0;max-width:none}
  .adentro-frase{font-size:clamp(2rem,2.9vw,3.3rem);text-shadow:none;max-width:22ch}
  .adentro-rotulo{display:inline-flex;left:14px}
  .video-controles{top:auto;bottom:12px;left:12px;right:12px}
}
@media (min-width:1080px){
  :root{--gutter:40px}
  .nav-escritorio{display:flex;gap:2px;margin-left:auto}
  .nav-escritorio a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14.5px;color:#eadcc8}
  .nav-escritorio a:hover{background:rgba(243,233,216,.08);color:var(--crema-claro)}
  .cab-wa{margin-left:12px}
  html.js .menu-boton{display:none}
  .marca-nom{font-size:34px}
  /* 00 en escritorio: la fachada a sangre de borde a borde. La foto es vertical, así que se agranda un 12 % y se corre
     a la derecha para que el letrero y el portón queden en la mitad derecha; su borde izquierdo cae bajo el degradado. */
  .llegada-foto{position:absolute;top:0;left:14%;width:112%;max-width:none;height:100%;object-position:50% 6%;transform-origin:50% 88%}
  .llegada-velo{background:linear-gradient(90deg,var(--noche) 0%,var(--noche) 13%,rgba(18,12,8,.92) 25%,rgba(18,12,8,.74) 35%,rgba(18,12,8,.34) 44%,rgba(18,12,8,0) 53%),linear-gradient(180deg,rgba(18,12,8,.35) 0%,rgba(18,12,8,0) 14%,rgba(18,12,8,0) 72%,rgba(18,12,8,.72) 100%)}
  .llegada-contenido{justify-content:center;flex:1;gap:18px}
  .llegada-contenido>*{max-width:500px}
  .llegada-contenido>.llegada-titulo{max-width:none;font-size:clamp(4.6rem,6.6vw,6rem)}
  .llegada-acciones .boton{flex:0 0 auto}
  .llegada-datos strong{font-size:1.5rem}
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(220px,auto)}
  .bt-foto{grid-column:1 / span 2;grid-row:1 / span 2;min-height:520px}
  .bt-cobre{grid-column:3 / span 2}
  .grid-guia{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-asis{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid-prop{grid-template-columns:repeat(5,minmax(0,1fr))}
  html.pin-gal .mad-veta,.mad-veta{height:clamp(90px,13vh,170px)}
  .conf{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px}
  .vista{position:sticky;top:calc(var(--header-h) + 20px)}
  .pedido-box{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px}
  .barra{left:auto;width:380px}
}
@media (min-width:1080px) and (max-height:820px){
  .llegada-contenido>.llegada-titulo{font-size:clamp(4.2rem,min(6.6vw,12vh),6rem)}
  .llegada-contenido{gap:14px}
}
/* galería fijada en pantallas de escritorio bajas (1024 × 768, 1280 × 800): el pie con la barra quedaba cortado */
@media (min-width:860px) and (max-height:860px){
  html.pin-gal .galeria-fijo{gap:clamp(12px,2.2vh,22px)}
  html.pin-gal .galeria-titulo{font-size:clamp(2.4rem,8vh,4.6rem)}
  html.pin-gal .mad-veta{height:clamp(56px,9vh,96px)}
  html.pin-gal .mad-cuerpo{gap:6px;padding-block:14px 16px}
  html.pin-gal .mad-datos{gap:8px 12px;padding-top:10px}
}
/* pantallas bajas (celular acostado): nada se fija, todo fluye, la cabecera es más baja y cada escena cabe en una
   pantalla (portada y video en dos columnas desde 640 px de ancho) */
@media (max-height:520px){
  :root{--header-h:56px}
  html.pin .esc-llegada,html.pin .adentro{height:auto}
  html.pin .llegada-escenario,html.pin .adentro-fijo{position:relative;top:auto;height:auto;padding-bottom:0}
  .llegada-escenario,html.pin .llegada-escenario{min-height:calc(100vh - var(--header-h) - var(--franja-h));min-height:calc(100svh - var(--header-h) - var(--franja-h))}
  .adentro-fijo,html.pin .adentro-fijo{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h))}
  html.sda.pin .llegada-foto,html.sda.pin .llegada-contenido,html.sda.pin .llegada-velo,html.sda.pin .llegada-oscuro,html.sda.pin .adentro-video,html.sda.pin .adentro-pie,html.sda.pin .adentro-velo,html.sda.pin .adentro-texto,html.sda.pin .adentro-frase .luz{animation:none}
  html.io.pin .llegada-foto,html.io.pin .llegada-contenido{transform:none;opacity:1}
  html.io.pin .llegada-velo{opacity:1}
  html.io.pin .llegada-oscuro{opacity:0}
  html.io.pin .adentro-velo,html.io.pin .adentro-texto,html.io.pin .adentro:not(.al-final) .adentro-pie{opacity:1;transform:none}
  html.anima .adentro-frase .luz{opacity:1}
  .menu-movil nav a{min-height:48px;font-size:22px}
  .llegada-lugar{display:none}
  .llegada-titulo{font-size:clamp(2.2rem,11.5vh,4.4rem);font-size:clamp(2.2rem,11.5svh,4.4rem)}
  .llegada-contenido{gap:10px;padding-block:12px}
  .llegada-lead{font-size:.92rem;max-width:56ch}
  .llegada-datos strong{font-size:1.1rem}
  .llegada-datos dd>span{display:none}
  .adentro-fijo{padding-block:8px}
  .adentro-video-caja{height:calc(100vh - var(--header-h) - 16px);height:calc(100svh - var(--header-h) - 16px)}
  .adentro-frase{font-size:clamp(1.5rem,8vh,2.4rem);font-size:clamp(1.5rem,8svh,2.4rem)}
  .adentro-pie{margin-top:12px}
  .video-cuenta,.solo-ancho,.adentro-rotulo{display:none}
  .video-controles{justify-content:space-between}
  .galeria-fijo{padding-block:40px 16px}
  .mad{width:min(440px,72vw)}
  .mad-veta{height:52px}
  .mad-cient{display:none}
  .mad-cuerpo{gap:6px;padding:12px 18px 14px}
  .mad-datos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pasos-foto{min-height:max(300px,88vh);min-height:max(300px,88svh)}
  .pasos-cabeza{padding-top:56px}
}
/* portada con el celular acostado: como en escritorio, la fachada a la derecha y el texto sobre la noche a la izquierda */
@media (max-height:520px) and (min-width:640px) and (max-width:1079px){
  .llegada-foto{position:absolute;top:0;left:50%;width:50%;max-width:none;height:100%;object-position:50% 14%}
  .llegada-velo{background:linear-gradient(90deg,var(--noche) 0%,var(--noche) 50%,rgba(18,12,8,.55) 54%,rgba(18,12,8,0) 64%)}
  .llegada-contenido>*{max-width:min(420px,47vw)}
  .llegada-acciones .boton{flex:0 0 auto;padding:0 16px;font-size:14px;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;transition-delay:0s!important}
  .boton:hover,.boton:active,.proy:hover{transform:none}
  .foto:hover img,.bt-foto:hover img{transform:none}
}

/* SEO (9-oct): la marca va dentro del h1 para que «Maderera KIBA» sea el titular principal; se ve como la línea chica de arriba. */
.llegada-marca{display:block;margin-bottom:.55em;font:800 clamp(11px,.95vw,13px)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cobre-claro)}