/* ═══════════════════════════════════════════════════════════
   Illofrío · Variante B "El calor de casa, bien hecho"
   Clave clara escandinava · Familjen Grotesk · vidrio esmerilado
   Sin acento de color en la interfaz: negro, gris y blanco.
   El calor solo aparece donde hay fuego de verdad (fotos y esquema).
   Imágenes del cliente: assets/img/{hero,casa,taller,detalle,instalacion,fuego}.jpg
   Si falta el archivo, se pinta el degradado de respaldo.
   ═══════════════════════════════════════════════════════════ */

:root{
  --papel:#f6f3ee;
  --blanco:#fdfcfa;
  --gris-suelo:#eceae3;
  --tinta:#1b1915;
  --gris:#6e685d;
  --linea:#e3ded3;
  --fuego:#c2571b;          /* solo para el esquema de la casa y la brasa */
  --etiqueta:#98907f;       /* gris cálido de las etiquetas de categoría */
  --vidrio-bg:rgba(24,22,18,.38);
  --sans:"Familjen Grotesk",-apple-system,sans-serif;
  --r:20px;
  --tr:cubic-bezier(.25,.8,.25,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:90px}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--tinta);color:var(--blanco)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{width:min(1180px,92%);margin-inline:auto}

h1,h2,h3{font-weight:700;letter-spacing:-.035em;line-height:1.1}
h2{font-size:clamp(28px,3.6vw,44px)}

/* vidrio esmerilado */
.vidrio{
  background:var(--vidrio-bg);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;color:#fff;
}

/* botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14.5px;padding:13px 24px;border-radius:12px;
  transition:transform .3s var(--tr),box-shadow .3s,background .3s,color .3s;
  cursor:pointer;border:none;
}
.btn:hover{transform:translateY(-1px)}
.btn-claro{background:var(--blanco);color:var(--tinta);box-shadow:0 4px 18px -6px rgba(0,0,0,.35)}
.btn-claro:hover{box-shadow:0 8px 24px -6px rgba(0,0,0,.4)}
.btn-vidrio{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-vidrio:hover{background:rgba(255,255,255,.24)}
.btn-oscuro{background:var(--tinta);color:var(--blanco)}
.btn-oscuro:hover{background:#000}
.btn-borde{border:1px solid var(--linea);background:transparent;color:var(--tinta);white-space:nowrap}
.btn-borde:hover{border-color:var(--tinta)}

/* ═══ cabecera ═══ */
header{
  position:fixed;inset-inline:0;top:0;z-index:100;
  transition:background .4s,box-shadow .4s,color .4s;
  color:#fff;
}
header.solida{background:rgba(246,243,238,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--tinta);box-shadow:0 1px 0 var(--linea)}
header.solida .btn-borde{color:var(--tinta);border-color:var(--linea)}
header:not(.solida) .btn-borde{color:#fff;border-color:rgba(255,255,255,.35)}
.barra{display:flex;align-items:center;gap:32px;height:80px}
.logo{font-weight:600;font-size:19px;letter-spacing:-.01em;margin-right:auto;display:flex;align-items:baseline;gap:8px}
.logo span{opacity:.4}
.logo small{font-weight:400;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.55}
header nav{display:flex;gap:26px}
header nav a{font-size:14.5px;font-weight:500;opacity:.85;transition:opacity .3s}
header nav a:hover{opacity:1}
.menu-btn{display:none}

/* ═══ hero cinemático scroll-world (arquitectura motos con GSAP) ═══ */
.hero-scroll-world {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #131315;
  z-index: 1;
}
main > section:not(.hero-scroll-world){position:relative;z-index:2}
.hero-sticky-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-video-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background: #131315;
}
.hero-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  will-change: transform;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}
.hero-dark-scrim {
  position: absolute;
  inset: 0;
  background: rgba(19, 19, 21, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.hero-panel{
  position:relative;z-index:3;
  margin:0 auto clamp(28px,6vh,64px);
  width:min(560px,calc(100% - 32px));
  margin-left:max(4%,calc((100% - 1180px)/2));
  padding:34px 36px;
  opacity:1;transform:translateY(0);
  will-change:opacity,transform;
}
.hero-panel h1{font-size:clamp(34px,4.6vw,54px);margin-bottom:12px}
.hero-panel p{font-size:16px;opacity:.9;margin-bottom:22px;max-width:420px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-cue{
  position:absolute;bottom:26px;right:max(4%,calc((100% - 1180px)/2));z-index:3;
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.6);border-radius:14px;
}
.hero-cue::after{
  content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;border-radius:2px;
  background:#fff;transform:translateX(-50%);
  animation:rueda-cue 1.8s ease-in-out infinite;
}
@keyframes rueda-cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

/* ── Etapa 2: Frase editorial monumental a mitad del recorrido ── */
.hero-stage-mid {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 4vw, 40px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  will-change: opacity, transform;
}
.hero-mid-eyebrow {
  font-family: inherit;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fuego);
  margin-bottom: 12px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.hero-mid-title {
  font-family: inherit;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 14px;
  max-width: 720px;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.85);
}
.hero-mid-sub {
  font-family: inherit;
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgba(246, 243, 238, 0.88);
  max-width: 480px;
  margin: 0;
  line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}

/* ═══ declaración (cortina que cubre el hero) ═══ */
.declara{
  padding:130px 0 110px;background:var(--papel);
  border-radius:26px 26px 0 0;margin-top:-26px;
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.35);
}
.declara h2{max-width:820px;margin-bottom:64px}
.declara-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);
  max-width:900px;
}
.declara-cols h3{font-size:15px;font-weight:600;margin-bottom:10px;padding-top:16px;border-top:1px solid var(--tinta)}
.declara-cols p{color:var(--gris);font-size:15.5px}

/* ═══ sistema interactivo ═══ */
.sistema{background:var(--gris-suelo);padding:80px 0 60px;border-block:1px solid var(--linea)}
.toggle{
  display:flex;width:max-content;margin:0 auto 46px;padding:4px;
  background:var(--blanco);border-radius:999px;border:1px solid var(--linea);
  box-shadow:0 2px 10px -4px rgba(0,0,0,.08);
}
.toggle-btn{
  border:none;background:none;cursor:pointer;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--gris);
  padding:9px 26px;border-radius:999px;transition:all .35s var(--tr);
}
.toggle-btn[aria-selected="true"]{background:var(--tinta);color:var(--blanco)}
.modo-nota{
  text-align:center;color:var(--gris);font-size:14.5px;max-width:520px;
  margin:-26px auto 40px;min-height:44px;transition:opacity .3s;
}
.sistema-escena{
  position:relative;width:min(960px,94%);margin:0 auto;aspect-ratio:16/9;
  will-change:transform;transform-origin:center 70%;
}
.sistema-escena.cambia .sistema-media{animation:modo-pulso .5s var(--tr)}
@keyframes modo-pulso{0%{opacity:.55;transform:scale(.985)}100%{opacity:1;transform:scale(1)}}
.sistema-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.traza{fill:none;stroke:var(--fuego);stroke-width:.55;stroke-linecap:round;opacity:.85}
.traza-humo{stroke-dasharray:2.2 2.6;animation:flujo 1.4s linear infinite}
.traza-humo.fina{stroke-width:.35}
.traza-aire{stroke-dasharray:1.6 2.2;animation:flujo 1.1s linear infinite;stroke:#a8622a}
.traza-calor{stroke-width:.4;opacity:0;animation:calor-ondea 2.6s ease-in-out infinite}
.traza-calor:nth-of-type(3){animation-delay:.5s}
.traza-calor:nth-of-type(4){animation-delay:1s}
@keyframes flujo{to{stroke-dashoffset:-19.2}}
@keyframes calor-ondea{0%,100%{opacity:0}40%{opacity:.7}}
.brasa-glow{fill:rgba(230,120,40,.28);animation:glow-late 3s ease-in-out infinite}
@keyframes glow-late{0%,100%{opacity:.5}50%{opacity:1}}
.sistema-escena[data-modo="lena"] .g-pellet{display:none}
.sistema-escena[data-modo="pellet"] .g-lena{display:none}
.sistema-media{
  position:absolute;inset:0;border-radius:var(--r);
  background-image:url("../img/casa.jpg"),linear-gradient(180deg,#dfe3e6 0%,#eceae3 70%,#e2ddd2 100%);
  background-size:cover;background-position:center;
  box-shadow:0 24px 60px -30px rgba(27,25,21,.35);
}
.punto{
  position:absolute;transform:translate(-50%,-50%);z-index:3;
  transition:opacity .3s,filter .3s;
  display:flex;align-items:center;gap:8px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:999px;
  padding:7px 12px;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--tinta);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.18);
  transition:transform .3s var(--tr),box-shadow .3s;
  animation:punto-entra .5s var(--tr) backwards;
}
.punto:nth-child(2){animation-delay:.08s}
.punto:nth-child(3){animation-delay:.16s}
.punto:nth-child(4){animation-delay:.24s}
@keyframes punto-entra{from{opacity:0;transform:translate(-50%,-30%)}}
.punto:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 8px 20px -4px rgba(0,0,0,.25)}
.punto i{
  font-style:normal;width:18px;height:18px;border-radius:50%;
  background:var(--tinta);color:#fff;display:grid;place-items:center;
  font-size:13px;line-height:1;transition:transform .3s;
}
.punto.abierto i{transform:rotate(45deg)}
.punto.abierto{z-index:30}
.puntos.tiene-abierto .punto:not(.abierto){opacity:.25;filter:saturate(.4)}
.punto-info{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:240px;background:var(--blanco);border:1px solid var(--linea);border-radius:14px;
  padding:14px 16px;text-align:left;cursor:default;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  font-weight:400;font-size:13px;color:var(--gris);line-height:1.5;
}
.punto-info strong{display:block;color:var(--tinta);font-weight:600;margin-bottom:4px;font-size:13.5px}
.punto.abierto .punto-info{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(2px)}
.punto.info-arriba .punto-info{top:auto;bottom:calc(100% + 10px)}
.sistema-pie{text-align:center;color:var(--gris);font-size:13.5px;margin-top:26px}

/* ═══ grid editorial ═══ */
.editorial{padding:110px 0;background:var(--papel)}
.tarjeta{
  position:relative;border-radius:var(--r);overflow:hidden;
  display:flex;align-items:flex-end;
  transition:transform .5s var(--tr),box-shadow .5s;
  box-shadow:0 18px 44px -24px rgba(27,25,21,.3);
}
.tarjeta:hover{transform:translateY(-5px);box-shadow:0 30px 60px -26px rgba(27,25,21,.4)}
.tarjeta-ancha{aspect-ratio:21/9;margin-bottom:22px}
.editorial-dos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.editorial-dos .tarjeta{aspect-ratio:4/3.4}
.tarjeta-fondo{
  position:absolute;inset:-9% 0;background-size:cover;background-position:center;
  will-change:transform;
}
.tarjeta[data-img="taller"] .tarjeta-fondo{background-image:url("../img/taller.jpg"),linear-gradient(120deg,#4a453c,#2b2822 60%,#1d1b16);background-position:center 32%}
.tarjeta[data-img="detalle"] .tarjeta-fondo{background-image:url("../img/detalle.jpg"),linear-gradient(140deg,#3a3a3c,#232324 60%,#161617)}
.tarjeta[data-img="instalacion"] .tarjeta-fondo{background-image:url("../img/instalacion.jpg"),linear-gradient(160deg,#7d8894,#5c6670 55%,#3c434b)}
.tarjeta-panel{position:relative;z-index:1;margin:18px;padding:22px 24px;max-width:420px}
.tarjeta-panel h3{font-size:clamp(19px,2vw,24px);margin-bottom:8px}
.tarjeta-panel p{font-size:14px;opacity:.85;margin-bottom:14px}
.mas{font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.mas span{
  width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:14px;transition:transform .3s,background .3s;
}
.tarjeta:hover .mas span{transform:rotate(90deg);background:rgba(255,255,255,.42)}

/* ═══ colecciones (home - pinned horizontal scroll GSAP) ═══ */
.colecciones{
  min-height:100vh;
  height:100vh;
  height:100dvh;
  background:var(--blanco);
  border-block:1px solid var(--linea);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  box-sizing:border-box;
  padding:30px 0;
}
.colecciones h2{font-size:clamp(30px,3.8vw,48px)}
.cole-sub{color:var(--gris);font-size:15px;margin-top:8px;line-height:1.5;max-width:600px}
.cole-zona{position:relative;margin-top:36px;width:100%;overflow:hidden}
.cole-carril{
  display:flex;gap:22px;width:max-content;
  overflow:visible;
  padding:10px max(4%,calc((100% - 1180px)/2)) 20px;
  will-change:transform;
  outline:none;
}
.cole-carril::-webkit-scrollbar{display:none}
.cole-card{
  position:relative;flex:0 0 clamp(230px,24vw,300px);aspect-ratio:3/4;
  border-radius:26px;padding:26px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f1ea 100%);
  border:1px solid var(--linea);
  display:flex;flex-direction:column;
  scroll-snap-align:start;
  transition:transform .5s var(--tr),box-shadow .5s;
  box-shadow:0 10px 30px -18px rgba(27,25,21,.18);
}
.cole-card:hover{transform:translateY(-8px);box-shadow:0 30px 54px -22px rgba(27,25,21,.3)}
.cole-num{font-size:13px;font-weight:500;color:var(--etiqueta)}
.cole-card img{
  width:78%;margin:auto;mix-blend-mode:multiply;
  transition:transform .6s var(--tr);
}
.cole-card:hover img{transform:scale(1.06) translateY(-4px)}
.cole-nombre{font-size:21px;font-weight:700;letter-spacing:-.035em;line-height:1.15;padding-right:34px}
.cole-flecha{
  position:absolute;right:20px;bottom:22px;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;
  background:var(--papel);border:1px solid var(--linea);color:var(--tinta);
  transition:background .3s,color .3s,transform .4s var(--tr);
}
.cole-card:hover .cole-flecha{background:var(--tinta);color:var(--blanco);transform:translateX(3px)}
.cole-card.todo{
  background:linear-gradient(160deg,#2a2521 0%,var(--tinta) 70%);
  border-color:transparent;color:var(--blanco);justify-content:flex-end;gap:8px;
}
.cole-card.todo strong{
  font-size:clamp(56px,6vw,84px);font-weight:700;letter-spacing:-.05em;line-height:1;
  color:var(--blanco);
}
.cole-card.todo .cole-flecha{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--blanco)}
.cole-card.todo:hover .cole-flecha{background:var(--blanco);color:var(--tinta)}
.cole-nav{display:none}
.cole-nav button{
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:var(--blanco);border:1px solid var(--linea);color:var(--tinta);
  font-size:16px;transition:all .3s;
}
.cole-nav button:hover{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.cole-nav button:disabled{opacity:.3;pointer-events:none}

/* ═══ catálogo ═══ */
.catalogo{padding:100px 0 120px;background:var(--blanco);border-block:1px solid var(--linea)}
.cat-pagina{padding-top:0;border-top:none}
.cat-cab{padding:150px 0 30px}
.cat-cab h1{font-size:clamp(44px,6.5vw,84px)}
.cat-volver{margin-bottom:22px}
.cat-volver a{font-size:13.5px;font-weight:500;color:var(--gris);transition:color .3s}
.cat-volver a:hover{color:var(--tinta)}
.cat-cierre{padding:80px 0;text-align:center;background:var(--papel)}
.cat-cierre p{font-size:clamp(19px,2.2vw,26px);font-weight:500;letter-spacing:-.01em;margin-bottom:22px}
.catalogo-nota{color:var(--gris);font-size:15px;margin-top:10px;max-width:440px}
.filtros{
  position:sticky;top:80px;z-index:60;margin:40px 0 30px;
  background:rgba(253,252,250,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-block:1px solid var(--linea);
}
.filtros-int{display:flex;align-items:center;gap:18px;padding:13px 0}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--gris);background:var(--papel);border:1px solid var(--linea);
  padding:8px 15px;border-radius:999px;cursor:pointer;transition:all .3s;
}
.chip:hover{color:var(--tinta);border-color:var(--tinta)}
.chip[aria-selected="true"]{background:var(--tinta);color:var(--blanco);border-color:var(--tinta);font-weight:600}
.chip small{opacity:.6;font-size:11px;margin-left:3px}
#buscar{
  background:var(--papel);border:1px solid var(--linea);border-radius:999px;
  color:var(--tinta);font-family:var(--sans);font-size:13.5px;
  padding:9px 18px;width:210px;outline:none;transition:border-color .3s;
}
#buscar:focus{border-color:var(--tinta)}
#buscar::placeholder{color:#a49d8f}
.contador{font-size:13px;color:var(--gris);margin-bottom:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{
  background:var(--blanco);border:1px solid var(--linea);border-radius:16px;overflow:hidden;
  cursor:pointer;transition:transform .4s var(--tr),box-shadow .4s,border-color .4s;
  opacity:0;transform:translateY(18px);
}
.card.in{opacity:1;transform:translateY(0)}
.card:hover,.card:focus-visible{
  transform:translateY(-4px);border-color:#cfc8b8;
  box-shadow:0 18px 38px -18px rgba(27,25,21,.25);outline:none;
}
.card-img{aspect-ratio:1;background:#fff;display:grid;place-items:center;position:relative}
.card-img img{width:80%;height:80%;object-fit:contain;transition:transform .5s var(--tr)}
.card:hover .card-img img{transform:scale(1.05)}
.card-marca{
  position:absolute;top:10px;left:10px;
  font-size:11px;font-weight:600;
  background:var(--tinta);color:var(--blanco);padding:4px 10px;border-radius:999px;
}
.card-info{padding:14px 16px 16px;border-top:1px solid var(--linea)}
.card-cat{font-size:12.5px;color:var(--etiqueta);margin-bottom:4px;font-weight:500}
.card-nombre{font-size:17px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.vacio{color:var(--gris);padding:56px 0;text-align:center}

/* ═══ reseñas google maps (marquesina vertical 3 columnas) ═══ */
.resenas {
  padding: 120px 0 100px;
  background: var(--papel);
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--linea);
}
.resenas-cabecera {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 54px;
}
.resenas-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  box-shadow: 0 4px 14px -4px rgba(27, 25, 21, 0.08);
  margin-bottom: 20px;
}
.google-icon {
  flex-shrink: 0;
}
.resenas-cabecera h2 {
  font-size: clamp(32px, 4.2vw, 54px);
  margin-bottom: 14px;
}
.resenas-sub {
  font-size: 16px;
  color: var(--gris);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.5;
}

.resenas-escenario {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-height: 720px;
  overflow: hidden;
  position: relative;
  width: min(1180px, 94%);
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.resenas-col {
  flex: 1;
  max-width: 360px;
  overflow: hidden;
}

.resenas-track {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: resenas-scroll linear infinite;
  will-change: transform;
}

.resenas-col.col-1 .resenas-track {
  animation-duration: 26s;
}
.resenas-col.col-2 .resenas-track {
  animation-duration: 34s;
}
.resenas-col.col-3 .resenas-track {
  animation-duration: 30s;
}

.resenas-track:hover {
  animation-play-state: paused;
}

@keyframes resenas-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.resena-card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 24px;
  padding: 30px 28px;
  box-shadow: 0 10px 30px -15px rgba(27, 25, 21, 0.08);
  transition: transform 0.35s var(--tr), box-shadow 0.35s var(--tr), border-color 0.3s;
  cursor: default;
  display: flex;
  flex-direction: column;
}

.resena-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--linea-forte);
  box-shadow: 0 20px 45px -15px rgba(27, 25, 21, 0.16);
}

.resena-estrellas {
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.resena-texto {
  font-size: 14.5px;
  color: #3b3a36;
  line-height: 1.6;
  margin: 0 0 22px;
}

.resena-autor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.resena-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--papel) 0%, #e5e0d8 100%);
  border: 1.5px solid var(--linea);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  flex-shrink: 0;
}

.resena-nombre {
  font-size: 14.5px;
  font-weight: 700;
  font-style: normal;
  color: var(--tinta);
  display: block;
  line-height: 1.2;
}

.resena-info {
  font-size: 12px;
  color: var(--gris);
  display: block;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .resenas-col.col-3 {
    display: none;
  }
}

@media (max-width: 640px) {
  .resenas-col.col-2 {
    display: none;
  }
  .resenas-escenario {
    max-height: 600px;
  }
}

/* ═══ cita ═══ */
.cita{padding:120px 0;text-align:center;background:var(--papel)}
.cita p{
  font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.25;
  max-width:760px;margin:0 auto 18px;
}
.cita span{font-size:14px;color:var(--etiqueta)}

/* ═══ CTA final a sangre ═══ */
.final{position:relative;min-height:78svh;display:grid;place-items:center;overflow:hidden}
.final-media{
  position:absolute;inset:-12% 0;
  background-image:url("../img/fuego.jpg"),radial-gradient(90% 90% at 50% 80%,#7a3c14 0%,#3c1f0c 45%,#160d06 100%);
  background-size:cover;background-position:center;
  will-change:transform;
}
.final-panel{position:relative;z-index:2;text-align:center;padding:40px 44px;width:min(560px,calc(100% - 32px))}
.final-panel h2{margin-bottom:12px}
.final-panel p{opacity:.9;margin-bottom:22px;font-size:15.5px}

/* ═══ contacto ═══ */
.contacto{padding:110px 0;background:var(--papel)}
.contacto-int{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:center}
.contacto address{font-style:normal;color:var(--gris);margin:18px 0 6px;font-size:16px}
.contacto-tel{
  display:block;font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-.02em;
  color:var(--tinta);margin-bottom:24px;transition:color .3s;
}
.contacto-tel:hover{opacity:.55}
.contacto-mapa{border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);aspect-ratio:4/3}
.contacto-mapa iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.04);transition:filter .5s}
.contacto-mapa:hover iframe{filter:grayscale(0)}

/* ═══ pie ═══ */
footer{border-top:1px solid var(--linea);padding:26px 0}
.pie{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.pie p,.pie a{font-size:13px;color:var(--gris)}
.pie nav{display:flex;gap:22px}
.pie a:hover{color:var(--tinta)}

/* ═══ ficha ═══ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal-fondo{
  position:absolute;inset:0;background:rgba(27,25,21,.45);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:aparece .3s;
}
@keyframes aparece{from{opacity:0}}
.ficha{
  position:relative;background:var(--blanco);color:var(--tinta);
  width:min(900px,100%);max-height:min(620px,92svh);border-radius:var(--r);
  display:grid;grid-template-columns:1fr 1.1fr;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  animation:ficha-entra .4s var(--tr);
}
@keyframes ficha-entra{from{opacity:0;transform:translateY(28px) scale(.98)}}
.ficha-img{background:#fff;display:grid;place-items:center;padding:32px;border-right:1px solid var(--linea)}
.ficha-img img{max-height:100%;object-fit:contain}
.ficha-info{padding:38px 40px;overflow-y:auto}
.ficha-cat{font-size:13.5px;color:var(--etiqueta);font-weight:500;margin-bottom:8px}
.ficha-info h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:6px}
.ficha-marca{font-size:13.5px;font-weight:600;color:var(--tinta);margin-bottom:12px}
.ficha-desc{font-size:15px;color:var(--gris);margin:10px 0 14px}
.ficha-lista{margin-bottom:24px}
.ficha-lista li{
  position:relative;padding:7px 0 7px 20px;font-size:14px;color:var(--gris);
  border-bottom:1px solid var(--linea);
}
.ficha-lista li::before{
  content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;
  background:var(--tinta);opacity:.35;
}
.ficha-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ficha-ref{font-size:12px;color:#a49d8f;letter-spacing:.08em}
.ficha-cerrar{
  position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--linea);cursor:pointer;background:var(--blanco);color:var(--tinta);
  font-size:19px;line-height:1;transition:transform .3s,background .3s,color .3s;
}
.ficha-cerrar:hover{transform:rotate(90deg);background:var(--tinta);color:var(--blanco)}

/* ═══ reveals ═══ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--tr),transform .8s var(--tr)}
.reveal.in{opacity:1;transform:translateY(0)}
.editorial-dos .tarjeta:nth-child(2){transition-delay:.12s}
.declara-cols div:nth-child(2){transition-delay:.12s}

/* ═══ scroll inmersivo ═══ */
.progreso{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:300;
  background:var(--tinta);transform-origin:0 50%;transform:scaleX(0);
}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .w i{
  display:inline-block;font-style:inherit;transform:translateY(115%);
  transition:transform .85s var(--tr);transition-delay:var(--d,0s);
}
[data-split].in .w i{transform:translateY(0)}
footer{position:relative;z-index:2;background:var(--papel)}

/* ═══ responsive ═══ */
@media (max-width:900px){
  .contacto-int{grid-template-columns:1fr}
  .editorial-dos{grid-template-columns:1fr}
  .editorial-dos .tarjeta{aspect-ratio:4/3}
  .tarjeta-ancha{aspect-ratio:4/3}
  .declara-cols{grid-template-columns:1fr;gap:26px}
  .ficha{grid-template-columns:1fr;max-height:92svh}
  .ficha-img{max-height:260px;padding:20px;border-right:none;border-bottom:1px solid var(--linea)}
  .sistema-escena{aspect-ratio:4/3.4}
}
@media (max-width:760px){
  header nav{
    position:fixed;inset:80px 0 auto 0;flex-direction:column;gap:0;
    background:var(--papel);border-bottom:1px solid var(--linea);
    max-height:0;overflow:hidden;transition:max-height .5s var(--tr);color:var(--tinta);
  }
  header:not(.solida) nav a{color:var(--tinta)}
  header nav.abierto{max-height:300px}
  header nav a{padding:16px 6%;border-top:1px solid var(--linea);font-size:16px;opacity:1}
  .menu-btn{
    display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;
    width:40px;height:40px;background:none;border:1px solid currentColor;border-radius:10px;
    cursor:pointer;color:inherit;
  }
  .menu-btn span{width:16px;height:1.5px;background:currentColor;transition:transform .3s}
  .menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
  .btn-borde{padding:10px 16px;font-size:13px}
  .hero-panel{margin-inline:16px;padding:26px 24px}
  .hero-cue{display:none}
  .filtros{top:79px}
  .filtros-int{flex-direction:column;align-items:stretch;gap:10px}
  #buscar{width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
  .card-nombre{font-size:14.5px}
  .ficha-info{padding:28px 24px}
  .punto-info{width:200px}
  .cole-card{flex-basis:72vw}
  .cole-nav{display:none}
  .cat-cab{padding:120px 0 24px}
}

/* ═══ botón flotante whatsapp ═══ */
.btn-whatsapp{
  position:fixed;bottom:26px;right:26px;z-index:90;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#ffffff;
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(37,211,102,.45),0 2px 6px rgba(0,0,0,.15);
  transition:transform .3s var(--tr),box-shadow .3s var(--tr),background .3s;
  text-decoration:none;
}
.btn-whatsapp:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 28px rgba(37,211,102,.55),0 4px 10px rgba(0,0,0,.2);
  background:#20ba5a;
}
.btn-whatsapp svg{
  width:34px;height:34px;fill:currentColor;display:block;
}

@media (max-width:760px){
  .btn-whatsapp{
    bottom:20px;right:20px;width:52px;height:52px;
  }
  .btn-whatsapp svg{
    width:30px;height:30px;
  }
}

/* ═══ movimiento reducido ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal,.card,.btn-whatsapp{opacity:1;transform:none}
  [data-split] .w i{transform:none}
  .hero-scroll-world{height:100vh}
  .hero-panel{opacity:1!important;transform:none!important}
  .resenas-track{animation:none!important}
  .resenas-escenario{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
}