/* Moda en Casa — modaencasa.mx
   Lino cálido con el verde del logo. Hilo conductor: la persiana día y noche (portada que se abre con el scroll,
   fotos que cambian como láminas de persiana y una cinta métrica en el proceso). */

:root {
  --lino: #f4efe7;
  --lino-2: #ebe3d6;
  --papel: #fbf8f3;
  --linea: #ddd2c1;
  --tinta: #221c17;
  --tinta-2: #5b5047;
  --verde: #6bc04b;          /* verde del logo: barras, acentos y fondos */
  --verde-hondo: #2f6e2c;    /* para texto y botones sobre claro */
  --verde-hondo-2: #245a22;
  --verde-palido: #d4ecc6;
  --bosque: #13251a;
  --tela: #74593f;          /* persiana día y noche en tono madera, como la de su cocina */
  --velo: rgb(255 251 244 / .17);
  --sol: 255 212 146;
  --cinta-color: #efc233;
  --radio: 18px;
  --margen: clamp(16px, 4vw, 48px);
  --cab: 68px;
  --f-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --curva: cubic-bezier(.2, .75, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--cab); }
body {
  margin: 0;
  background: var(--lino);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.bloqueado { overflow: hidden; }
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: min(100% - 2 * var(--margen), 1240px); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--lino); padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -.022em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--verde-hondo); }
p { text-wrap: pretty; }

.antetitulo {
  display: flex; align-items: center; gap: .75em;
  margin: 0 0 1.1rem;
  font: 700 .76rem/1.25 var(--f-texto);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-hondo);
}
.antetitulo::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--verde); flex: none; }

/* Botones */
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.5em;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 700 1rem/1 var(--f-texto); letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--curva), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton-primario { background: var(--verde-hondo); color: #fff; box-shadow: 0 14px 26px -16px rgb(31 70 30 / .9); }
.boton-primario:hover { background: var(--verde-hondo-2); }
.boton-linea { border-color: rgb(34 28 23 / .35); color: var(--tinta); background: rgb(251 248 243 / .4); }
.boton-linea:hover { background: var(--tinta); border-color: var(--tinta); color: var(--lino); }
.boton-claro { background: var(--lino); color: var(--bosque); }
.boton-claro:hover { background: #fff; }
.boton-linea-clara { border-color: rgb(244 239 231 / .55); color: var(--lino); background: transparent; }
.boton-linea-clara:hover { background: var(--lino); color: var(--bosque); }
.icono-wa { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* ───────── Cabecera ───────── */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--cab); display: flex; align-items: center;
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.cabecera.con-fondo { background: rgb(244 239 231 / .88); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 1px 0 rgb(34 28 23 / .08); }
.cabecera-fila { display: flex; align-items: center; gap: 28px; }
.cab-logo { display: block; flex: none; }
.cab-logo img { height: 48px; width: auto; }
.logo-corto { display: none; }
.cab-nav { display: flex; gap: 26px; margin-left: auto; }
.cab-nav a { position: relative; font-weight: 600; font-size: .95rem; text-decoration: none; padding: 6px 0; }
.cab-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--verde); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--curva); }
.cab-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.cab-cotiza {
  display: inline-flex; align-items: center; gap: .6em;
  height: 44px; padding: 0 .55em 0 1.15em;
  border: 0; border-radius: 999px;
  background: var(--tinta); color: var(--lino);
  font: 700 .92rem/1 var(--f-texto); cursor: pointer;
  transition: transform .25s var(--curva), background-color .25s;
}
.cab-cotiza:hover { transform: translateY(-1px); background: #000; }
.cuenta {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 7px;
  border-radius: 999px; background: var(--verde); color: var(--bosque);
  font: 800 .82rem/1 var(--f-texto); font-variant-numeric: tabular-nums;
}
.cab-menu { display: none; }

/* ───────── Portada ───────── */
/* Persiana día y noche a pantalla completa. JS mueve: --cierre (1 cerrada → 0 bandas alineadas),
   --enrollado (0 → 1 arriba), --abre (cuánto se ve la foto), --borde (borde inferior de la tela, px) y --p. */
.portada {
  position: relative; height: 290vh;
  --cierre: 1; --enrollado: 0; --abre: 0; --borde: 200vh; --p: 0; --tiron: 0;
  --b1: clamp(30px, 6.2vh, 60px);    /* banda opaca */
  --b2: clamp(22px, 4.3vh, 42px);    /* banda traslúcida */
}
.portada-fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #2a231d; }
.portada-foto, .portada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada-foto img {
  object-fit: cover; object-position: 50% 55%;
  filter: brightness(calc(.38 + var(--abre) * .64)) saturate(calc(.7 + var(--abre) * .32));
  transform: scale(calc(1.09 - var(--enrollado) * .09));
}
/* velo claro para leer el texto oscuro; solo existe debajo del borde de la persiana */
.portada-velo {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(244 239 231 / .95) 0%, rgb(244 239 231 / .9) 32%, rgb(244 239 231 / .55) 50%, rgb(244 239 231 / 0) 68%);
  clip-path: inset(var(--borde) 0 0 0);
}
.persiana { position: absolute; left: 0; right: 0; top: calc(var(--cab) + 12px); bottom: 0; overflow: hidden; }
.tela {
  position: absolute; inset: 0; overflow: hidden;
  transform: translateY(calc(var(--enrollado) * -100%));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.capa {
  position: absolute; left: 0; right: 0;
  top: calc((var(--b1) + var(--b2)) * -1); bottom: calc((var(--b1) + var(--b2)) * -1);
  background: repeating-linear-gradient(to bottom, var(--tela) 0 var(--b1), rgb(34 22 13 / .42) var(--b1) calc(var(--b1) + var(--b2)));
}
.capa-trasera { background: repeating-linear-gradient(to bottom, #684f38 0 var(--b1), rgb(34 22 13 / .42) var(--b1) calc(var(--b1) + var(--b2))); }
.capa-frontal { transform: translateY(calc(var(--cierre) * (var(--b1) + var(--b2)) / 2)); }
/* tejido: hilos finos y luz de la ventana que se cuela por las bandas */
.tela::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(255 236 210 / .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(97deg, rgb(0 0 0 / .05) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, rgb(0 0 0 / .22), transparent 22%, transparent 78%, rgb(0 0 0 / .22)); }
.tela-brillo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 70% at 72% 42%, rgb(var(--sol) / .38), rgb(var(--sol) / 0) 70%); mix-blend-mode: screen; opacity: calc((1 - var(--cierre)) * (1 - var(--enrollado))); }
.riel { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 2; background: linear-gradient(#f3eee6 0%, #d2cabe 55%, #a99f92 100%); box-shadow: 0 6px 14px rgb(0 0 0 / .35); }
.riel::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; background: var(--verde); opacity: .9; }
.cajillo { position: absolute; z-index: 3; left: 0; right: 0; top: var(--cab); height: 18px; background: linear-gradient(#fdfbf7, #d8cfc2); box-shadow: 0 8px 16px -6px rgb(30 20 10 / .55); }

.portada-texto {
  position: absolute; z-index: 4; left: 0; right: 0; top: var(--cab); bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 48px 64px;
}
.portada-texto > * { max-width: 660px; }
.portada-texto > h1 { max-width: 880px; }
.portada-texto h1 { font-size: clamp(2.9rem, 1rem + 5.6vw, 6.8rem); line-height: .96; margin-bottom: 1.4rem; }
.portada .entrada { font-size: clamp(1.04rem, .95rem + .4vw, 1.28rem); max-width: 31em; margin: 0 0 2rem; }
.nota { display: flex; align-items: center; gap: .6em; margin: 1.15rem 0 0; font-size: .92rem; font-weight: 700; }
.nota::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgb(107 192 75 / .25); flex: none; }

/* el color del texto se parte en el borde de la persiana: claro sobre la tela, oscuro sobre la foto */
.portada [data-tono] {
  --claro: var(--lino); --oscuro: var(--tinta);
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(to bottom, var(--claro) 0, var(--claro) var(--c, 9999px), var(--oscuro) var(--c, 9999px));
  background-repeat: no-repeat;
}
.portada h1 em { display: inline-block; }
.portada h1 em[data-tono] { --claro: #9fdc82; --oscuro: var(--verde-hondo); padding-right: .08em; }
.portada .antetitulo[data-tono] { --claro: var(--verde-palido); --oscuro: var(--verde-hondo); }
.portada .entrada[data-tono] { --claro: rgb(244 239 231 / .9); --oscuro: var(--tinta-2); }
.portada .nota[data-tono] { --claro: rgb(244 239 231 / .88); --oscuro: var(--tinta-2); }
.portada .boton-linea { transition: transform .25s var(--curva), background-color .35s, color .35s, border-color .35s; }
.portada .boton-linea.sobre-tela { border-color: rgb(244 239 231 / .6); color: var(--lino); background: rgb(255 255 255 / .06); }
.portada .boton-linea.sobre-tela:hover { background: var(--lino); color: var(--tinta); }

/* entrada del texto al cargar */
.portada-texto > * { animation: subir 1s var(--curva) both; }
.portada-texto > :nth-child(2) { animation-delay: .08s; }
.portada-texto > :nth-child(3) { animation-delay: .18s; }
.portada-texto > :nth-child(4) { animation-delay: .26s; }
.portada-texto > :nth-child(5) { animation-delay: .34s; }
@keyframes subir { from { opacity: 0; transform: translateY(26px); } }

/* cordón para jalar (botón): se arrastra o se toca para abrir */
.cordon {
  position: absolute; z-index: 5; right: max(18px, 6vw); top: calc(var(--cab) + 14px);
  width: 48px; height: min(46vh, 420px); padding: 0; border: 0; background: none;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
  transform: translateY(calc(var(--tiron) * 1px));
}
.cordon:active { cursor: grabbing; }
.cordon .hilo { position: absolute; left: 23px; top: 0; bottom: 20px; width: 2px; background: linear-gradient(#d9d3ca, #b2b2b2); }
.cordon .perilla { position: absolute; left: 13px; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e6e2dc, #a9a59f 70%); box-shadow: 0 6px 12px rgb(0 0 0 / .35); transition: transform .3s var(--curva); }
.cordon:hover .perilla, .cordon:focus-visible .perilla { transform: scale(1.18); }
.cordon::after { content: ""; position: absolute; left: 4px; bottom: -9px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgb(244 239 231 / .6); opacity: calc(1 - var(--p) * 6); animation: latido 2.2s var(--curva) infinite; }
@keyframes latido { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

.desliza { position: absolute; z-index: 5; left: 50%; bottom: 22px; margin: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 700 .74rem/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: rgb(244 239 231 / .9); opacity: calc(1 - var(--p) * 8); white-space: nowrap; pointer-events: none; }
.desliza i { width: 2px; height: 34px; background: linear-gradient(rgb(244 239 231 / .9), transparent); transform-origin: top; animation: gota 1.9s var(--curva) infinite; }
@keyframes gota { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ───────── Manifiesto ───────── */
.manifiesto { padding: clamp(96px, 13vw, 190px) 0 clamp(72px, 9vw, 130px); }
.manifiesto-texto { margin: 0; max-width: 19em; font: 300 clamp(1.9rem, .9rem + 3.3vw, 4.1rem)/1.13 var(--f-titulo); letter-spacing: -.02em; }
.manifiesto-texto .palabra { opacity: .17; transition: opacity .2s linear; }
.sellos { list-style: none; padding: 0; margin: 3rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sellos li { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.15em; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); font-weight: 700; font-size: .92rem; }
.sellos li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }

/* ───────── Productos (sala) ───────── */
.sala { padding-top: clamp(40px, 6vw, 72px); }
.sala-cabeza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(24px, 4vw, 48px); }
.sala-cabeza .antetitulo { grid-column: 1 / -1; margin: 0; }
.sala-cabeza h2 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4.3rem); }
.sala-cabeza p { margin: 0; color: var(--tinta-2); max-width: 30em; }

.sala-indice { display: flex; flex-wrap: wrap; gap: 6px; }
.sala-indice a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95em; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: .86rem; color: var(--tinta-2); text-decoration: none; white-space: nowrap; transition: background-color .3s, border-color .3s, color .3s; }
.sala-indice a b { color: var(--verde-hondo); margin-right: .45em; font-weight: 800; }
.sala-indice a:hover { color: var(--tinta); }
.sala-indice a.activo { color: var(--tinta); background: var(--papel); border-color: var(--linea); }

.cap-num { margin: 0; font: 700 .8rem/1 var(--f-texto); letter-spacing: .16em; color: var(--verde-hondo); }
.cap-num span { color: var(--tinta-2); }
.cap h3 { font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.7rem); margin: .55rem 0 1rem; }
.cap-texto { color: var(--tinta-2); max-width: 33em; margin: 0 0 1.4rem; }
.piezas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pieza {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: 0 1.15em 0 .7em;
  border: 1.5px solid rgb(34 28 23 / .2); border-radius: 999px;
  background: var(--papel); color: var(--tinta);
  font: 700 .95rem/1.15 var(--f-texto); text-align: left; cursor: pointer;
  transition: transform .25s var(--curva), background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}
.pieza i { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--lino-2); flex: none; transition: background-color .25s, transform .4s var(--curva); }
.pieza i::before, .pieza i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--tinta); transition: transform .35s var(--curva), opacity .2s; }
.pieza i::after { transform: rotate(90deg); }
.pieza:hover { border-color: var(--tinta); transform: translateY(-2px); box-shadow: 0 10px 18px -14px rgb(34 28 23 / .6); }
.pieza[aria-pressed="true"] { background: var(--verde-hondo); border-color: var(--verde-hondo); color: #fff; }
.pieza[aria-pressed="true"] i { background: #fff; transform: rotate(-8deg); }
.pieza[aria-pressed="true"] i::before { width: 6px; margin: 1px 0 0 -6px; background: var(--verde-hondo); transform: rotate(45deg); }
.pieza[aria-pressed="true"] i::after { width: 11px; margin: -1px 0 0 -2px; background: var(--verde-hondo); transform: rotate(-50deg); }
.cap-nota { display: flex; align-items: center; gap: .7em; margin: 1.3rem 0 0; font-size: .92rem; font-weight: 600; color: var(--tinta-2); }
.cap-nota::before { content: ""; width: 18px; height: 2px; background: var(--verde); flex: none; }
.cap-foto { display: none; }

/* escenario: la foto se arma con láminas que giran como una persiana veneciana */
.escenario { position: relative; height: min(74vh, 680px); border-radius: var(--radio); }
.escenario::before { content: ""; position: absolute; z-index: 3; left: -10px; right: -10px; top: -12px; height: 18px; border-radius: 4px; background: linear-gradient(#fdfbf7, #d6ccbe); box-shadow: 0 8px 14px -6px rgb(54 38 22 / .45); }
.laminas { position: absolute; inset: 0; perspective: 1700px; border-radius: var(--radio); overflow: hidden; background: #2a231d; box-shadow: 0 50px 80px -50px rgb(54 38 22 / .65); }
.lamina { position: absolute; left: 0; right: 0; top: calc(var(--i) * var(--hl)); height: calc(var(--hl) + .6px); transform-style: preserve-3d; transform: translateZ(calc(var(--hl) * -.5)) rotateX(var(--a, 0deg)); will-change: transform; }
.cara { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-repeat: no-repeat; background-size: var(--bw) var(--bh); background-position: var(--bx) calc(var(--by) - var(--i) * var(--hl)); }
.cara-a { background-image: var(--img-a); transform: translateZ(calc(var(--hl) * .5)); }
.cara-b { background-image: var(--img-b); transform: rotateX(-90deg) translateZ(calc(var(--hl) * .5)); }
.cara::after { content: ""; position: absolute; inset: 0; background: #1a140f; }
.cara-a::after { opacity: var(--pa, 0); }
.cara-b::after { opacity: var(--pb, .6); }
.lamina[data-fase="a"], .lamina[data-fase="b"], .lamina[data-fase="a"] .cara-a, .lamina[data-fase="b"] .cara-b { transform: none; }
.lamina[data-fase="a"] .cara-b, .lamina[data-fase="b"] .cara-a { visibility: hidden; }
.escenario-pie { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; display: flex; justify-content: space-between; gap: 16px; padding: 48px 22px 18px; border-radius: 0 0 var(--radio) var(--radio); background: linear-gradient(transparent, rgb(20 15 10 / .72)); color: #fff; font: 700 .86rem/1.3 var(--f-texto); }
.escenario-pie span:last-child { font-variant-numeric: tabular-nums; letter-spacing: .08em; }

/* Modo fijo (escritorio): capítulos anclados */
.sala.fija .sala-pista { height: calc(var(--caps, 5) * 82vh + 40vh); }
.sala.fija .sala-fija { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--cab); }
.sala.fija .sala-rejilla { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sala.fija .sala-info { display: flex; flex-direction: column; gap: clamp(18px, 3.5vh, 32px); }
.sala.fija .capitulos { display: grid; }
.sala.fija .cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(22px); transition: opacity .45s, transform .6s var(--curva), visibility 0s .6s; }
.sala.fija .cap.activo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sala:not(.fija) .escenario { display: none; }

/* ───────── Proyectos ───────── */
.obra { position: relative; margin-top: clamp(40px, 6vw, 80px); padding: clamp(84px, 10vw, 150px) 0 clamp(72px, 9vw, 130px); background: var(--bosque); color: var(--lino); border-radius: 32px 32px 0 0; }
.obra .antetitulo { color: var(--verde); }
.obra h2 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.6rem); }
.obra h2 em { color: var(--verde); }
.obra-cabeza { max-width: 40em; }
.obra-cabeza p { color: rgb(244 239 231 / .8); margin: 1.2rem 0 0; font-size: 1.08rem; }
.clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); margin: clamp(44px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
.clip { margin: 0; transform: translateY(calc(var(--y, 0) * 1px)); }
.clip:nth-child(2) { margin-top: 72px; }
.clip-marco { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #0b1a10; box-shadow: 0 50px 70px -40px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .07); }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip figcaption { margin-top: 18px; color: rgb(244 239 231 / .78); font-size: .95rem; }
.clip figcaption strong { display: block; margin-bottom: 4px; font: 400 1.4rem/1.2 var(--f-titulo); color: var(--lino); }

.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 230px); grid-template-areas: "a b c" "a d c" "e d f"; gap: clamp(10px, 1.4vw, 18px); }
.mosaico figure { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #0b1a10; }
.mosaico-a { grid-area: a; } .mosaico-b { grid-area: b; } .mosaico-c { grid-area: c; } .mosaico-d { grid-area: d; } .mosaico-e { grid-area: e; } .mosaico-f { grid-area: f; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.mosaico figure:hover img { transform: scale(1.04); }
.mosaico figcaption { position: absolute; left: 12px; bottom: 12px; padding: .5em .9em; border-radius: 999px; background: rgb(19 37 26 / .82); color: var(--lino); font: 700 .78rem/1.2 var(--f-texto); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.enlace-ig { display: inline-flex; gap: .5em; margin-top: 40px; padding-bottom: 4px; color: var(--lino); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgb(107 192 75 / .7); transition: gap .3s var(--curva); }
.enlace-ig:hover { gap: .9em; }

/* ───────── Cómo trabajamos ───────── */
.proceso { padding: clamp(90px, 11vw, 160px) 0; --cinta: 0; }
.proceso-cabeza h2 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4.3rem); }
.cinta { position: relative; display: flex; align-items: center; height: 64px; margin: clamp(40px, 6vw, 64px) 0 clamp(36px, 5vw, 56px); }
.cinta-caja { position: relative; z-index: 2; width: 64px; height: 64px; flex: none; border-radius: 16px; background: linear-gradient(145deg, #3a3029, #1d1813); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .06), 0 16px 26px -14px rgb(0 0 0 / .6); }
.cinta-caja::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 5px; border-radius: 2px; background: var(--verde); }
.cinta-tornillo { position: absolute; inset: 21px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9a9186, #4a433c); }
.cinta-tira { position: relative; flex: 1; height: 36px; margin-left: -4px; }
.cinta-tira::before, .cinta-marcas { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--cinta)) * 100%) 0 0); }
.cinta-tira::before {
  content: ""; border-radius: 0 3px 3px 0;
  background:
    repeating-linear-gradient(90deg, #2a221b 0 2px, transparent 2px 60px) 0 0 / 100% 58% no-repeat,
    repeating-linear-gradient(90deg, rgb(42 34 27 / .8) 0 1px, transparent 1px 12px) 0 0 / 100% 28% no-repeat,
    linear-gradient(#f6d257, var(--cinta-color));
  box-shadow: 0 8px 14px -10px rgb(0 0 0 / .5);
}
.cinta-marcas span { position: absolute; bottom: 3px; font: 800 .62rem/1 var(--f-texto); color: #2a221b; font-variant-numeric: tabular-nums; }
.cinta-punta { position: absolute; top: -4px; left: calc(var(--cinta) * 100%); width: 8px; height: 44px; margin-left: -6px; border-radius: 2px; background: linear-gradient(90deg, #d8d1c6, #8f877c); box-shadow: 0 4px 8px rgb(0 0 0 / .3); }
.cinta-cifra { flex: none; min-width: 5.2ch; margin-left: 24px; font: 300 clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem)/1 var(--f-titulo); font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.cinta-cifra b { font-weight: 400; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.paso { padding-top: 22px; border-top: 2px solid var(--linea); transition: opacity .6s, transform .7s var(--curva), border-color .6s; }
html.js .paso { opacity: .28; transform: translateY(14px); }
html.js .paso.alcanzado { opacity: 1; transform: none; border-color: var(--verde); }
.paso-num { font: 300 2.6rem/1 var(--f-titulo); color: var(--verde-hondo); }
.paso h3 { margin: 14px 0 10px; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.75rem); line-height: 1.15; }
.paso p { margin: 0; color: var(--tinta-2); }
.proceso-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(48px, 6vw, 72px); }
.proceso-foto { margin: 0; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--radio); background: #d8cebf; }
.proceso-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(var(--zoom, 1.1)); }
.proceso-foto:first-child img { object-position: 50% 92%; }

/* ───────── Catálogos ───────── */
.catalogos { padding: clamp(84px, 10vw, 140px) 0; background: var(--lino-2); }
.catalogos-cabeza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px 64px; align-items: end; }
.catalogos-cabeza .antetitulo { grid-column: 1 / -1; margin: 0; }
.catalogos-cabeza h2 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4.3rem); }
.catalogos-cabeza p { margin: 0; color: var(--tinta-2); max-width: 30em; }
.muestrarios { list-style: none; padding: 0; margin: clamp(40px, 5vw, 56px) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.muestrario { display: flex; flex-direction: column; height: 100%; padding: 14px 14px 20px; border-radius: 18px; background: var(--papel); color: var(--tinta); text-decoration: none; box-shadow: 0 1px 0 rgb(34 28 23 / .06), 0 24px 34px -28px rgb(54 38 22 / .5); transition: transform .4s var(--curva), box-shadow .4s; }
.muestrario:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(34 28 23 / .06), 0 34px 44px -28px rgb(54 38 22 / .55); }
.muestrario-telas { position: relative; display: flex; height: 150px; margin-bottom: 18px; }
.muestrario-telas i { flex: 1; border-radius: 9px; background: var(--t1); margin-left: -22%; transform-origin: 50% 100%; box-shadow: -6px 0 10px -6px rgb(0 0 0 / .35); background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / .07) 0 2px, transparent 2px 5px); transition: transform .55s var(--curva); }
.muestrario-telas i:first-child { margin-left: 0; }
.muestrario-telas i:nth-child(2) { background-color: var(--t2); }
.muestrario-telas i:nth-child(3) { background-color: var(--t3); }
.muestrario-telas i:nth-child(4) { background-color: var(--t4); }
.muestrario-telas i:nth-child(1) { background-color: var(--t1); }
.muestrario:hover .muestrario-telas i:nth-child(1) { transform: rotate(-9deg) translateX(-4px); }
.muestrario:hover .muestrario-telas i:nth-child(2) { transform: rotate(-3deg); }
.muestrario:hover .muestrario-telas i:nth-child(3) { transform: rotate(3deg); }
.muestrario:hover .muestrario-telas i:nth-child(4) { transform: rotate(9deg) translateX(4px); }
.muestrario-nombre { font: 400 1.6rem/1.1 var(--f-titulo); }
.muestrario-meta { margin-top: 4px; font-size: .86rem; color: var(--tinta-2); }
.muestrario-ver { margin-top: auto; padding-top: 18px; font-weight: 800; font-size: .9rem; color: var(--verde-hondo); }
.muestrario-ver::after { content: " →"; }

/* ───────── Nosotros ───────── */
.nosotros { padding: clamp(90px, 11vw, 160px) 0; }
.nosotros-rejilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.nosotros-foto { position: relative; margin: 0 0 34px; }
.nosotros-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); }
.nosotros-foto::before, .nosotros-foto::after { content: ""; position: absolute; left: 10%; right: -14px; background: var(--verde); border-radius: 2px; }
.nosotros-foto::before { bottom: -16px; height: 6px; }
.nosotros-foto::after { bottom: -34px; height: 12px; }
.nosotros-texto h2 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4.2rem); margin-bottom: 1.6rem; }
.nosotros-texto p { color: var(--tinta-2); max-width: 35em; margin: 0 0 1.1rem; }

/* ───────── Contacto ───────── */
.contacto { padding: 0 0 clamp(80px, 10vw, 140px); }
.contacto-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding: clamp(32px, 6vw, 80px); border-radius: 32px; background: var(--verde-hondo); color: var(--lino); }
.contacto-panel::before { content: ""; position: absolute; right: -190px; bottom: -350px; width: 460px; height: 460px; border-top: 26px solid rgb(107 192 75 / .2); border-left: 26px solid rgb(107 192 75 / .2); transform: rotate(45deg); pointer-events: none; }
.contacto-llamado, .contacto-datos { position: relative; }
.contacto .antetitulo { color: var(--verde-palido); }
.contacto .antetitulo::before { background: var(--verde-palido); }
.contacto h2 { font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4.2rem); }
.contacto h2 em { color: var(--verde-palido); }
.contacto-llamado > p:not(.antetitulo) { color: rgb(244 239 231 / .88); font-size: 1.1rem; margin: 1.2rem 0 2rem; max-width: 28em; }
.contacto-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(226px, calc((100% - 32px) / 2)), 1fr)); gap: 30px 32px; margin: 0; align-content: start; }
.contacto-datos dt { margin-bottom: 8px; font: 700 .74rem/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--verde-palido); }
.contacto-datos dd { margin: 0; line-height: 1.6; }
.contacto-datos a[href^="mailto:"] { white-space: nowrap; }   /* un correo nunca se parte */
.contacto-datos a { color: var(--lino); text-decoration-color: rgb(244 239 231 / .45); text-underline-offset: 3px; }
.contacto-datos a:hover { text-decoration-color: currentColor; }

/* ───────── Pie ───────── */
.pie { background: var(--bosque); color: rgb(244 239 231 / .78); padding: 64px 0 calc(40px + env(safe-area-inset-bottom)); }
.pie-rejilla { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.pie-logo { width: 240px; height: auto; }
.pie-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 26px; }
.pie-nav a { color: var(--lino); font-weight: 700; font-size: .95rem; text-decoration: none; }
.pie-nav a:hover { color: var(--verde); }
.pie-legal { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 24px; border-top: 1px solid rgb(244 239 231 / .14); font-size: .86rem; }

/* ───────── Botón flotante y aviso ───────── */
.flotante {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .55em;
  height: 58px; padding: 0 .65em 0 1.1em;
  border: 0; border-radius: 999px;
  background: var(--verde-hondo); color: #fff;
  font: 800 1rem/1 var(--f-texto); cursor: pointer;
  box-shadow: 0 18px 32px -14px rgb(20 50 20 / .65);
  transition: transform .45s var(--curva), opacity .35s, background-color .25s;
}
.flotante:hover { background: var(--verde-hondo-2); }
.flotante .cuenta { background: #fff; color: var(--verde-hondo); }
.flotante.oculto { transform: translateY(150%); opacity: 0; pointer-events: none; }
.flotante.pulso { animation: pulso .7s var(--curva); }
@keyframes pulso { 30% { transform: scale(1.1); } 60% { transform: scale(.97); } }
.cuenta[data-vacia] { display: none; }
.flotante .cuenta[data-vacia] { display: none; }

.aviso { position: fixed; z-index: 60; left: 50%; bottom: 92px; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 12px 12px 12px 18px; border-radius: 999px; background: var(--tinta); color: var(--lino); font-weight: 700; font-size: .92rem; box-shadow: 0 18px 30px -16px rgb(0 0 0 / .6); opacity: 0; transform: translate(-50%, 18px); pointer-events: none; transition: opacity .3s, transform .4s var(--curva); }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso button { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--verde); color: var(--bosque); font-weight: 800; cursor: pointer; }
.aviso span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────── Tu cotización ───────── */
.cotiza { position: fixed; inset: 0; z-index: 80; }
.cotiza[hidden] { display: none; }
.cotiza-fondo { position: absolute; inset: 0; background: rgb(19 24 18 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.cotiza.abierta .cotiza-fondo { opacity: 1; }
.cotiza-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--papel); box-shadow: -30px 0 60px -30px rgb(0 0 0 / .35); transform: translateX(100%); transition: transform .5s var(--curva); outline: none; }
.cotiza.abierta .cotiza-panel { transform: none; }
.cotiza-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.cotiza-cabeza h2 { font-size: 1.9rem; }
.cotiza-cerrar { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--linea); border-radius: 50%; background: transparent; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background-color .2s; }
.cotiza-cerrar:hover { background: var(--lino-2); }
.cotiza-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 30px; }
.cotiza-vacia p { margin: 0 0 18px; color: var(--tinta-2); }
.cotiza-vacia a { color: var(--verde-hondo); font-weight: 700; }
.cotiza-lista { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.cotiza-lista:empty { display: none; }
.linea { padding: 14px; border: 1px solid var(--linea); border-radius: 16px; background: #fff; }
.linea-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.linea-nombre { font-weight: 800; line-height: 1.3; padding-top: 4px; }
.linea-quitar { flex: none; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--tinta-2); font-size: .86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linea-opc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; }
.linea-opc label { position: relative; }
.linea-opc input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.linea-opc span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--tinta-2); transition: background-color .2s, color .2s, border-color .2s; }
.linea-opc input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--lino); }
.linea-opc input:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 2px; }
.linea-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.contador { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--linea); border-radius: 999px; }
.contador button { width: 40px; height: 38px; border: 0; background: none; font-size: 1.2rem; font-weight: 700; cursor: pointer; border-radius: 999px; }
.contador button:hover { background: var(--lino-2); }
.contador output { min-width: 2.4ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.contador-etiqueta { font-size: .86rem; color: var(--tinta-2); font-weight: 600; }
.linea-medidas { flex: 1 1 160px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #cfc3b1; border-radius: 10px; background: var(--papel); font: 500 .92rem var(--f-texto); color: var(--tinta); }
.linea-medidas::placeholder, .campo input::placeholder { color: #7d7166; }
.campo { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 700; font-size: .92rem; }
.campo small { font-weight: 500; color: var(--tinta-2); }
.campo input, .campo textarea { width: 100%; padding: 12px 14px; border: 1px solid #cfc3b1; border-radius: 12px; background: #fff; font: 500 1rem/1.4 var(--f-texto); color: var(--tinta); }
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo textarea:focus, .linea-medidas:focus { outline: 2px solid var(--verde-hondo); outline-offset: 1px; border-color: var(--verde-hondo); }
.campo-opciones { margin: 0 0 14px; padding: 0; border: 0; }
.campo-opciones legend { margin-bottom: 6px; font-weight: 700; font-size: .92rem; }
.campo-opciones label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .96rem; cursor: pointer; }
.campo-opciones input { width: 19px; height: 19px; accent-color: var(--verde-hondo); }
.cotiza-error { min-height: 1.3em; margin: 0 0 8px; color: #a12f1d; font-weight: 700; font-size: .9rem; }
.boton-enviar { width: 100%; }
.cotiza-legal { margin: 10px 0 0; text-align: center; font-size: .84rem; color: var(--tinta-2); }

/* Aparición al entrar en pantalla */
html.js .aparece { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--curva), transform 1s var(--curva); transition-delay: var(--d, 0s); }
html.js .aparece.visto { opacity: 1; transform: none; }
html.js .mosaico figure { opacity: 0; transform: translateY(46px) scale(.95); filter: blur(6px); transition: opacity .9s var(--curva), transform 1.1s var(--curva), filter .9s; transition-delay: var(--d, 0s); }
html.js .mosaico figure.visto { opacity: 1; transform: none; filter: none; }

/* ───────── Pantallas medianas ───────── */
@media (max-width: 1180px) {
  .cab-nav { gap: 20px; }
  .contacto-panel { grid-template-columns: 1fr; }
  .muestrarios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ───────── Tableta y celular ───────── */
@media (max-width: 999px) {
  :root { --cab: 62px; }
  .logo-completo { display: none; }
  .logo-corto { display: block; }
  .cab-logo img { height: 44px; }
  .cab-cotiza { display: none; }
  .cab-menu { display: grid; place-items: center; width: 46px; height: 46px; margin-left: auto; border: 1px solid rgb(34 28 23 / .18); border-radius: 50%; background: rgb(251 248 243 / .6); cursor: pointer; }
  .cab-menu-lineas { display: grid; gap: 6px; width: 18px; }
  .cab-menu-lineas i { display: block; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .35s var(--curva); }
  .cab-menu[aria-expanded="true"] .cab-menu-lineas i:first-child { transform: translateY(4px) rotate(45deg); }
  .cab-menu[aria-expanded="true"] .cab-menu-lineas i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .cab-nav { position: fixed; z-index: -1; top: 0; left: 0; right: 0; flex-direction: column; gap: 4px; margin: 0; padding: calc(var(--cab) + 18px) var(--margen) 28px; background: var(--lino); box-shadow: 0 30px 40px -30px rgb(0 0 0 / .35); transform: translateY(-105%); visibility: hidden; transition: transform .5s var(--curva), visibility 0s .5s; }
  .cab-nav.abierto { transform: none; visibility: visible; transition-delay: 0s; }
  .cab-nav a { font: 400 1.9rem/1.25 var(--f-titulo); padding: 8px 0; }
  .cab-nav a::after { display: none; }
  .cabecera.menu-abierto { background: var(--lino); }

  .muestrarios { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(200px, 42%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); scroll-padding-inline: var(--margen); }
  .muestrarios li { scroll-snap-align: start; }

  .sala-indice { position: sticky; top: var(--cab); z-index: 5; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margen) * -1); padding: 10px var(--margen); background: rgb(244 239 231 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scrollbar-width: none; }
  .sala-indice::-webkit-scrollbar { display: none; }
  .cap { padding: 30px 0 44px; border-bottom: 1px solid var(--linea); scroll-margin-top: calc(var(--cab) + 64px); }
  .cap:last-child { border-bottom: 0; }
  .cap-foto { display: block; position: relative; margin: 0 0 24px; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: var(--radio); background: #d8cebf; }
  .cap-foto img { width: 100%; height: 100%; object-fit: cover; }
  html.js .cap-foto img { -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 calc(var(--r) * 12.5%), transparent calc(var(--r) * 12.5%) 12.5%); mask-image: repeating-linear-gradient(to bottom, #000 0 calc(var(--r) * 12.5%), transparent calc(var(--r) * 12.5%) 12.5%); transition: --r 1.3s var(--curva); }
  html.js .cap-foto.visto img { --r: 1; }

  .clips { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(220px, 64%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--margen) * -1); padding: 0 var(--margen) 12px; scroll-padding-inline: var(--margen); scrollbar-width: none; }
  .clips::-webkit-scrollbar { display: none; }
  .clip { scroll-snap-align: start; transform: none; }
  .clip:nth-child(2) { margin-top: 0; }

  .pasos { grid-template-columns: 1fr; gap: 28px; }
  .proceso-fotos { grid-template-columns: 1fr; }
  .proceso-foto { aspect-ratio: 4 / 3; }
  .nosotros-rejilla, .contacto-panel { grid-template-columns: 1fr; }
  .nosotros-foto { max-width: 520px; }
  .sala-cabeza, .catalogos-cabeza { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .pie-nav { justify-content: flex-start; }
  .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@property --r { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Portada en celular: texto arriba, velo desde arriba y foto vertical */
@media (max-width: 860px) {
  .portada { height: 240vh; }
  .portada-texto { justify-content: flex-start; padding-block: 34px 24px; }
  .portada-texto .antetitulo { font-size: .7rem; margin-bottom: .8rem; }
  .portada-texto h1 { font-size: clamp(2.5rem, 11vw, 3.8rem); margin-bottom: 1rem; }
  .portada .entrada { font-size: 1rem; line-height: 1.55; margin-bottom: 1.3rem; }
  .acciones { gap: 8px; }
  .portada .boton { min-height: 48px; padding: 0 1.05em; font-size: .95rem; }
  .portada-velo { background: linear-gradient(180deg, rgb(244 239 231 / .96) 0%, rgb(244 239 231 / .92) 50%, rgb(244 239 231 / .5) 64%, rgb(244 239 231 / 0) 78%); }
  .cordon { right: 8px; top: auto; bottom: 64px; height: 26vh; }
  .desliza { bottom: 18px; }
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 38vw, 220px); grid-template-areas: "a b" "a c" "d e" "d f"; }
  .contacto-datos { grid-template-columns: 1fr; }
  .contacto-panel { border-radius: 24px; }
  .contacto-panel::before { width: 280px; height: 280px; right: -120px; bottom: -210px; border-width: 18px; }
  .cinta { height: 48px; }
  .cinta-caja { width: 48px; height: 48px; border-radius: 12px; }
  .cinta-tornillo { inset: 15px; }
  .cinta-caja::after { left: 8px; right: 8px; bottom: 6px; height: 4px; }
  .cinta-tira { height: 28px; }
  .cinta-punta { height: 36px; }
  .cinta-cifra { margin-left: 14px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .portada .entrada { font-size: .95rem; margin-bottom: 1rem; }
  .portada-texto h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
}
@media (max-width: 380px) {
  .portada .boton { padding: 0 .9em; font-size: .9rem; }
  .flotante span { display: none; }
}

/* Laptops bajitas (p. ej. 1477×598): todo el capítulo debe caber */
@media (min-width: 1000px) and (max-height: 700px) {
  .portada-texto { padding-block: 24px 40px; }
  .portada-texto h1 { font-size: clamp(2.6rem, 1rem + 4.2vw, 5rem); margin-bottom: 1rem; }
  .portada .entrada { margin-bottom: 1.4rem; }
  .portada .nota { display: none; }
  .desliza { bottom: 12px; }
  .cap h3 { font-size: clamp(2rem, 1rem + 2vw, 3rem); margin: .4rem 0 .7rem; }
  .cap-texto { margin-bottom: 1rem; font-size: 1rem; line-height: 1.55; }
  .pieza { min-height: 42px; font-size: .9rem; }
  .cap-nota { margin-top: .9rem; }
  .escenario { height: 72vh; }
}

/* Movimiento reducido: sin anclajes ni recorridos */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada { height: auto; }
  .portada-fija { position: relative; height: 100svh; }
  .desliza { display: none; }
  .portada-texto > * { animation: none; }
  .cordon::after { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}