/* ==========================================================================
   KREANDING — Landing de servicio · styles.css
   Vanilla CSS. Cero librerías. Cero frameworks.
   Sistema de diseño Kreanding + capa de dirección de arte (03_DESIGN_SYSTEM §8).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TIPOGRAFÍAS AUTOALOJADAS
   Los woff2 viven en assets/fonts/. Cero peticiones a terceros en tiempo de
   ejecución: si Google desaparece o un firewall lo bloquea, la página no cambia.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-weight:400 800; font-stretch:100%;
  font-display:swap;
  src:url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-weight:400 800; font-stretch:100%;
  font-display:swap;
  src:url('assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   0. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Color de marca */
  --tinta:#111010;
  --tinta-2:#1B1917;
  --papel:#F5F2ED;
  --papel-calido:#EDE9E1;
  --ambar:#C8860A;              /* SOLO decorativo: filetes, halos, campo con tinta encima */
  --ambar-ink:#8A5E08;          /* CTA base — 5.70:1 con blanco */
  --stone:#635E58;              /* 5.83:1 sobre papel · 5.38:1 sobre papel cálido */
  --stone-claro:#A9A39B;        /* solo sobre fondos oscuros — 7.47:1 sobre tinta */
  --dust:#C8C2B8;
  --ambar-texto-claro:#8A5E08;  /* ámbar como TEXTO sobre papel — 5.10:1 */
  --ambar-texto-oscuro:#E0A526; /* ámbar como TEXTO sobre tinta — 8.67:1 */

  /* CTA */
  /* Ámbar más claro que el anterior (#8A5E08). Tope duro: con texto blanco,
     #9C6C09 da 4.60:1 — el último tono que pasa AA. Más claro obligaría a
     texto oscuro. */
  --cta:#9C6C09; --cta-h:#875D07; --cta-a:#734F06;
  --cta-grad-top:#AE7A0A; --cta-grad-bot:#8A5E08; --sh:88,60,5;

  /* Radios */
  --r-btn:6px; --r-card:16px; --r-media:20px;

  /* Motion */
  --dur-fast:150ms; --dur-base:250ms; --dur-enter:550ms; --dur-hero:800ms;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.4,0,0.2,1);
  --ease-emph-acc:cubic-bezier(0.3,0,0.8,0.15);
  --stagger:70ms;

  /* Métrica */
  --ancho:1200px;
  --lectura:62ch;
  --pad-x:clamp(20px, 5vw, 64px);
  --sec-y:clamp(72px, 9vw, 132px);

  /* Grano universal */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:1ms; --dur-base:1ms; --dur-enter:300ms; --dur-hero:300ms; --stagger:0ms }
}

@property --pos { syntax:'<number>'; inherits:true; initial-value:50 }
@property --ang { syntax:'<angle>'; inherits:false; initial-value:0deg }

/* --------------------------------------------------------------------------
   1. RESET Y BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:400 17px/1.65 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{ max-width:100%; display:block }
button,input,textarea,select{ font:inherit; color:inherit }
a{ color:inherit }

h1,h2,h3,h4{
  font-family:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;
  font-weight:700; line-height:1.04; letter-spacing:-0.025em;
  margin:0; text-wrap:balance;
}
p{ margin:0 0 1.05em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }

::selection{ background:var(--ambar); color:var(--tinta) }

:focus-visible{ outline:3px solid var(--ambar-texto-oscuro); outline-offset:3px; border-radius:2px }
.seccion--claro :focus-visible,
.seccion--ambar :focus-visible{ outline-color:var(--tinta) }

.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:#fff; padding:14px 22px; border-radius:0 0 var(--r-btn) 0;
}
.salto-contenido:focus{ left:0 }

.oculto-visual{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   2. ESTRUCTURA DE SECCIÓN
   -------------------------------------------------------------------------- */
.seccion{
  position:relative;
  padding:var(--sec-y) 0;
  isolation:isolate;
  overflow:hidden;
  /* La barra superior es fija: sin esto, al usar el menú el rótulo de la
     sección queda escondido detrás de ella. */
  scroll-margin-top:78px;
}
.seccion + .seccion{ margin-top:-1px }

.seccion::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:var(--grano); background-size:140px 140px;
  opacity:.055; mix-blend-mode:multiply;
}
.seccion--oscuro::after{ opacity:.09; mix-blend-mode:overlay }

.envoltura{
  width:min(100% - (var(--pad-x) * 2), var(--ancho));
  margin-inline:auto; position:relative; z-index:4;
}
.envoltura--ancha{ width:min(100% - (var(--pad-x) * 2), 1380px) }

.seccion--oscuro{ color:var(--papel) }
.seccion--oscuro h1,.seccion--oscuro h2,.seccion--oscuro h3{ color:var(--papel) }

/* Fondo claro con textura: retícula fina + halo frío, para que esta sección
   se distinga de las demás sin recurrir al negro. */
.seccion--textura{
  color:var(--tinta);
  background:
    radial-gradient(80% 60% at 15% 0%,   rgba(27,99,245,.07), transparent 60%),
    radial-gradient(70% 55% at 92% 100%, rgba(200,134,10,.09), transparent 62%),
    linear-gradient(180deg,#FBFAF8 0%, #F2EFE9 100%);
}
.seccion--textura::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(17,16,16,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,16,16,.045) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
  mask-image:radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
}
.seccion--textura h1,.seccion--textura h2,.seccion--textura h3{ color:var(--tinta) }
.seccion--textura .cejilla{ color:var(--ambar-texto-oscuro) }

/* Banda de fundido entre fondos distintos */
.fundido{
  position:absolute; left:0; right:0; height:130px; z-index:2; pointer-events:none;
}
.fundido--arriba{ top:0 }
.fundido--abajo{ bottom:0 }

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA DE PÁGINA
   -------------------------------------------------------------------------- */
.cejilla{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ambar-texto-claro); margin:0 0 22px;
}
.seccion--oscuro .cejilla{ color:var(--ambar-texto-oscuro) }
.cejilla::before{
  content:''; width:26px; height:2px; background:var(--ambar); flex:0 0 auto; border-radius:2px;
}

.titulo-xl{ font-size:clamp(2.45rem, 7.4vw, 5.1rem) }
.titulo-l { font-size:clamp(2.05rem, 5.4vw, 3.65rem) }
.titulo-m { font-size:clamp(1.6rem, 3.4vw, 2.4rem) }
.titulo-s { font-size:clamp(1.16rem, 2vw, 1.4rem); letter-spacing:-.015em }

.bajada{
  font-size:clamp(1.06rem, 1.7vw, 1.31rem); line-height:1.55;
  color:var(--stone); max-width:52ch;
}
.seccion--oscuro .bajada{ color:#C6C0B8 }

.cuerpo{ max-width:var(--lectura) }
.cuerpo p{ font-size:clamp(1.03rem,1.35vw,1.16rem) }

.nota{ font-size:13px; line-height:1.5; color:var(--stone) }
.seccion--oscuro .nota{ color:var(--stone-claro) }

.destaca{ color:var(--ambar-texto-claro); font-weight:600 }
.seccion--oscuro .destaca{ color:var(--ambar-texto-oscuro) }

.filete{ width:64px; height:3px; background:var(--ambar); border-radius:3px; margin:0 0 30px }

/* --------------------------------------------------------------------------
   4. ANIMACIÓN DE ENTRADA (solo con JS activo — sin JS todo es visible)
   -------------------------------------------------------------------------- */
.js-anim .anim{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--dur-enter) var(--ease-out-expo),
             transform var(--dur-enter) var(--ease-out-expo);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.js-anim .anim.anim--izq{ transform:translateX(-30px) }
.js-anim .anim.anim--der{ transform:translateX(30px) }
.js-anim .anim.anim--zoom{ transform:scale(.965) }
.js-anim .anim.en-vista{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  .js-anim .anim{ transform:none!important }
}

/* --------------------------------------------------------------------------
   5. BOTÓN CTA
   -------------------------------------------------------------------------- */
.cta-primario{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:20px 40px;
  font:700 18px/1 'DM Sans', system-ui, sans-serif; letter-spacing:.01em;
  color:#FFFFFF; text-decoration:none;
  background:linear-gradient(180deg, var(--cta-grad-top) 0%, var(--cta) 55%, var(--cta-grad-bot) 100%);
  border:0; border-radius:var(--r-btn); cursor:pointer; position:relative; overflow:hidden;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.28) inset,
    0 2px 4px -1px rgba(var(--sh),.24),
    0 8px 20px -6px rgba(var(--sh),.34);
  transition:
    transform 90ms cubic-bezier(.2,.8,.3,1),
    box-shadow var(--dur-fast) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft);
}
.cta-primario:hover{
  background:var(--cta-h); transform:translateY(-2px);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.28) inset,
    0 4px 8px -2px rgba(var(--sh),.28),
    0 12px 28px -8px rgba(var(--sh),.42);
}
.cta-primario:hover .flecha{ transform:translateX(4px) }
.cta-primario:active{
  background:var(--cta-a); transform:translateY(1px) scale(.985);
  box-shadow:
    0 2px 5px rgba(58,38,3,.30) inset,
    0 1px 2px rgba(var(--sh),.35);
}
.cta-primario:focus-visible{ outline:3px solid var(--tinta); outline-offset:3px }
.seccion--oscuro .cta-primario:focus-visible{ outline-color:var(--papel) }
.flecha{ transition:transform var(--dur-fast) cubic-bezier(.2,.8,.3,1); flex:0 0 auto }

.cta-primario.es-hero.shimmer-once::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%);
  transform:translateX(-100%);
  animation:shimmer 900ms var(--ease-soft) 1 forwards;
}
@keyframes shimmer{ to{ transform:translateX(200%) } }

.cta-primario[aria-busy="true"]{ opacity:.9; pointer-events:none }
.cta-hilo{
  width:16px; height:16px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:girar 700ms linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }

.cta-envoltura{ margin:clamp(40px,5vw,64px) 0 }
.cta-micro{ margin:14px 0 0; font-size:13px; color:var(--stone) }
.seccion--oscuro .cta-micro{ color:var(--stone-claro) }
.seccion--ambar .cta-micro{ color:#2B2415 }   /* 5.04:1 sobre ámbar */

@media (prefers-reduced-motion: reduce){
  .cta-primario,.flecha{ transition:background-color 120ms ease }
  .cta-primario:hover,.cta-primario:active{ transform:none }
  .cta-primario::before{ display:none }
}
@media (max-width:640px){
  .cta-primario{ min-height:60px; width:100%; padding:20px 24px; font-size:17px }
  .cta-envoltura{ margin:40px 0 }
}

/* Enlace de texto (acción secundaria) */
.enlace-texto{
  color:var(--tinta); font-weight:600; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:4px;
  text-decoration-color:var(--ambar);
  transition:text-decoration-color var(--dur-fast) var(--ease-soft);
}
.enlace-texto:hover{ text-decoration-color:var(--tinta) }
.seccion--oscuro .enlace-texto{ color:var(--papel) }
.seccion--oscuro .enlace-texto:hover{ text-decoration-color:var(--papel) }

/* --------------------------------------------------------------------------
   6. BARRA SUPERIOR
   -------------------------------------------------------------------------- */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition:background-color var(--dur-base) var(--ease-soft),
             box-shadow var(--dur-base) var(--ease-soft),
             backdrop-filter var(--dur-base) var(--ease-soft);
}
.barra__caja{
  width:min(100% - 40px, 1380px); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding:16px 0;
}
.barra.pegada{
  background:rgba(17,16,16,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(245,242,237,.10);
}
.barra.pegada .barra__caja{ padding:10px 0 }

.marca{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; min-height:46px }
.marca__glifo{ width:34px; height:34px; flex:0 0 auto }
.marca__glifo img{ width:100%; height:100%; object-fit:contain }
.marca__nombre{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:21px;
  letter-spacing:-.03em; color:var(--papel); line-height:1;
}
.marca__nombre span{ color:inherit }

.menu{ display:flex; align-items:center; gap:4px; margin-left:auto }
.menu a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  font-size:14.5px; font-weight:500; color:rgba(245,242,237,.72); text-decoration:none;
  border-radius:var(--r-btn); position:relative;
  transition:color var(--dur-fast) var(--ease-soft);
}
.menu a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:9px; height:2px;
  background:var(--ambar); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out-expo);
}
.menu a:hover,.menu a:focus-visible,.menu a.activo{ color:var(--papel) }
.menu a:hover::after,.menu a.activo::after{ transform:scaleX(1) }

.barra .cta-primario{ min-height:46px; padding:13px 22px; font-size:15px; margin-left:12px }

.menu-boton{
  display:none; margin-left:auto; align-items:center; justify-content:center;
  width:48px; height:48px; background:transparent; border:1px solid rgba(245,242,237,.28);
  border-radius:var(--r-btn); cursor:pointer;
}
.menu-boton span{
  display:block; width:20px; height:2px; background:var(--papel); border-radius:2px;
  position:relative; transition:background-color var(--dur-fast) var(--ease-soft);
}
.menu-boton span::before,.menu-boton span::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:var(--papel);
  border-radius:2px; transition:transform var(--dur-base) var(--ease-out-expo);
}
.menu-boton span::before{ top:-6px } .menu-boton span::after{ top:6px }
.menu-boton[aria-expanded="true"] span{ background:transparent }
.menu-boton[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg) }
.menu-boton[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:1000px){
  .menu-boton{ display:inline-flex }
  .barra .cta-primario{ display:none }
  .menu{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; padding:10px 20px 22px; background:rgba(17,16,16,.97);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid rgba(245,242,237,.10);
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height var(--dur-base) var(--ease-soft), visibility var(--dur-base);
  }
  .menu.abierto{ max-height:420px; visibility:visible }
  .menu a{ min-height:52px; font-size:16px; padding:0 6px }
  .menu a::after{ left:6px; right:auto; width:22px }
  .menu .cta-primario{ display:inline-flex; margin:14px 0 0; width:100% }
}

/* --------------------------------------------------------------------------
   7. §1 PORTADA
   -------------------------------------------------------------------------- */
/* La portada cabe en UNA pantalla: alto fijo al viewport y la maqueta
   dimensionada por altura, no por ancho. Antes la maqueta (5:7 sobre
   540px = 756px de alto) desbordaba y cortaba la sección. */
#portada{
  background:var(--tinta);
  padding-top:clamp(96px,12vh,140px);
  padding-bottom:clamp(32px,4vh,56px);
  height:100svh; min-height:640px; max-height:1000px;
  display:flex; align-items:center; overflow:hidden;
}
@media (max-width:1000px){
  /* Apilado: forzar una pantalla haría el texto ilegible. */
  #portada{ height:auto; max-height:none; padding-bottom:clamp(48px,7vw,72px) }
}
#portada .capa-foto{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
#portada .capa-foto img{
  width:100%; height:100%; object-fit:cover;
  opacity:.20; filter:grayscale(1) contrast(1.15);
  mix-blend-mode:luminosity;
}
#portada .capa-mesh{
  position:absolute; inset:-10%; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 52% at 18% -5%, rgba(200,134,10,.22) 0%, transparent 62%),
    radial-gradient(46% 44% at 88% 12%, rgba(224,165,38,.10) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 108%, rgba(17,16,16,.94) 0%, transparent 64%);
}
#portada .capa-lineas{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(90deg, rgba(245,242,237,.045) 1px, transparent 1px);
  background-size:clamp(64px,7vw,96px) 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* Dos mitades exactas: el eje de división es el centro de la página
   (la «línea verde» que marcó el cliente). Texto a la izquierda,
   maqueta a la derecha, grande y girada hacia el texto. */
.portada__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.2vw,56px); align-items:center;
}
.portada__texto{ max-width:600px; justify-self:start; width:100% }
@media (max-width:1000px){
  .portada__grid{ grid-template-columns:1fr; gap:40px }
  .portada__texto{ justify-self:stretch; max-width:none }
}
#portada .cejilla{ color:var(--ambar-texto-oscuro) }
.portada__h1{
  font-size:clamp(3rem, 7.2vw, 5.4rem); color:var(--papel);
  margin:0 0 26px; letter-spacing:-.035em;
}
.portada__h1 em{
  font-style:normal; color:var(--ambar-texto-oscuro); position:relative; white-space:nowrap;
}
.portada__sub{
  font-size:clamp(1.08rem,1.75vw,1.34rem); line-height:1.52; color:#CFC9C0;
  max-width:44ch; margin:0 0 8px;
}

.portada__pruebas{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin:30px 0 0;
  padding:0; list-style:none;
}
.portada__pruebas li{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; color:#B6B0A7; letter-spacing:.01em;
}
.portada__pruebas svg{ color:var(--ambar-texto-oscuro); flex:0 0 auto }

/* Entrada del hero */
@keyframes elevar{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
@keyframes elevar-h1{ from{ transform:translateY(22px) } to{ transform:none } }
.entra{ animation:elevar var(--dur-hero) var(--ease-out-expo) both }
.entra-h1{ animation:elevar-h1 var(--dur-hero) var(--ease-out-expo) both }
.d1{ animation-delay:60ms } .d2{ animation-delay:140ms } .d3{ animation-delay:260ms }
.d4{ animation-delay:300ms } .d5{ animation-delay:380ms }

/* --------------------------------------------------------------------------
   8. MOCKUP ANIMADO DEL HERO
   -------------------------------------------------------------------------- */
/* ── Maqueta del hero ──────────────────────────────────────────────────
   Es la landing real de un cliente dentro de una ventana de navegador.
   El marco y el halo son BLANCOS (antes tiraban a verde y desentonaban
   con el fondo oscuro); el giro la deja mirando hacia el titular.      */
:root{ --mock-gris:#D6D6D6; --mock-borde:#FFFFFF; --mock-texto:#5B5B5B; }

/* Va pegada al borde derecho de la envoltura, igual que el texto va pegado
   al izquierdo: así los dos márgenes son idénticos a cualquier ancho.
   El pie va DEBAJO de la maqueta, no a su lado (antes flotaba a la derecha
   y desbalanceaba el hero). */
.mock-stage{
  text-decoration:none; color:inherit;
  perspective:2100px; perspective-origin:50% 50%;
  position:relative; z-index:4;
  height:min(84svh, 820px); margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  justify-self:end; align-self:center;
  animation:flotar 9s ease-in-out infinite;
}
.mock{ height:calc(100% - 58px); aspect-ratio:.80; max-width:100% }
@media (max-width:1000px){
  .mock-stage{ margin-inline:auto; justify-self:center; height:auto; width:min(100%, 430px) }
  .mock{ height:auto; aspect-ratio:auto }
  .mock__screen{ aspect-ratio:5/7; height:auto }
}
@keyframes flotar{ 0%,100%{ transform:translateY(-8px) } 50%{ transform:translateY(8px) } }

.mock{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:20px; padding:7px;
  background:linear-gradient(165deg,#FFFFFF 0%,#FCFCFC 55%,#F3F3F3 100%);
  border:1px solid rgba(255,255,255,.92);
  /* Girada mirando hacia el texto: el borde izquierdo se acerca al lector
     y el derecho se aleja, así la pantalla «apunta» al titular. */
  transform:rotateY(-13deg) rotateX(2.5deg) rotate(-1deg)
            rotateX(var(--my,0deg)) rotateY(var(--mx,0deg));
  transition:transform 700ms var(--ease-out-expo);
  /* Blanco brillante alrededor + sombra neutra para despegarla del fondo. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.75),
    0 0 26px -2px rgba(255,255,255,.34),
    0 18px 40px -12px rgba(0,0,0,.42),
    0 60px 110px -30px rgba(0,0,0,.60);
}
.mock-stage:hover .mock{ transform:rotateY(-5deg) rotateX(1.5deg) scale(1.02) }

/* halo blanco giratorio: el «margen que brilla» */
.mock::before{
  content:''; position:absolute; inset:-4px; z-index:-1; border-radius:inherit;
  background:conic-gradient(from var(--ang),
    rgba(255,255,255,.30) 0deg, #FFFFFF 55deg, rgba(255,255,255,.62) 120deg,
    rgba(255,255,255,.24) 185deg, rgba(255,255,255,.46) 250deg,
    #FFFFFF 305deg, rgba(255,255,255,.30) 360deg);
  filter:blur(15px); opacity:.9;
  animation:girar-ang 11s linear infinite;
}
@keyframes girar-ang{ to{ --ang:360deg } }

.mock__bar{
  display:flex; align-items:center; gap:6px; padding:8px 11px 10px;
}
.mock__bar > span{
  width:8px; height:8px; border-radius:50%; background:var(--mock-gris); flex:0 0 auto;
}
.mock__bar > span:first-child{ background:#BFBFBF }
.mock__url{
  margin-left:7px; flex:1 1 auto; min-width:0;
  background:#FFFFFF; border:1px solid #E7E7E7; border-radius:5px;
  padding:5px 11px; font-size:10.5px; color:var(--mock-texto); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:'DM Sans',system-ui,sans-serif;
}
.mock__url b{ color:#2E2E2E; font-weight:600 }

/* Vertical. En escritorio toma el alto que le deja la barra del navegador;
   en móvil vuelve a proporción fija (ver media query de .mock-stage). */
.mock__screen{
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden; border-radius:14px;
  background:#FFFFFF;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.mock__reel{
  will-change:transform;
  animation:reel 42s linear infinite;
}
@keyframes reel{
  from{ transform:translate3d(0,0,0) }
  to{ transform:translate3d(0,-50%,0) }
}
.mock__reel picture{ display:block }
.mock__reel img{ display:block; width:100%; height:auto }
.mock-stage:hover .mock__reel{ animation-play-state:paused }

.mock__glare{
  position:absolute; inset:-40%; pointer-events:none; z-index:5;
  mix-blend-mode:screen; will-change:transform;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.08) 46%,
    rgba(255,255,255,.22) 50%, rgba(255,255,255,.08) 54%, transparent 65%);
  animation:destello 7s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes destello{
  0%,62%{ transform:translate3d(-120%,0,0) }
  100%{ transform:translate3d(120%,0,0) }
}

/* Tarjetas flotantes */
.float{
  position:absolute; z-index:6;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px; border-radius:10px;
  background:rgba(24,22,20,.72); color:#EDE9E1;
  border:1px solid rgba(224,165,38,.30);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:12.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
}
.float::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--ambar-texto-oscuro);
  box-shadow:0 0 0 4px rgba(224,165,38,.18);
}
/* Fuera del marco, no encima: antes tapaban la pantalla de la maqueta. */
.float--a{
  left:-64px; top:6%; transform:translate3d(0,0,60px);
  animation:flotar-a 7s ease-in-out infinite;
}
.float--b{
  right:-56px; bottom:8%; transform:translate3d(0,0,-40px);
  animation:flotar-b 9.5s ease-in-out infinite reverse;
}
@media (max-width:1240px){
  .float--a{ left:-24px } .float--b{ right:-20px }
}
@keyframes flotar-a{ 0%,100%{ translate:0 -7px } 50%{ translate:0 7px } }
@keyframes flotar-b{ 0%,100%{ translate:0 8px } 50%{ translate:0 -8px } }
@media (max-width:768px){ .float{ display:none } }

/* Contenido del reel — la página de otra empresa: blanco y azul vivo,
   deliberadamente distinta de la identidad ámbar de Kreanding. */
.reel-pagina{ background:#FFFFFF }

@media (prefers-reduced-motion: reduce){
  .mock-stage,.mock__reel,.mock__glare,.mock::before,.float{ animation:none!important }
  .mock{ transform:none!important }
  .mock__glare{ opacity:0 }
}

/* --------------------------------------------------------------------------
   9. §2 SELLO
   -------------------------------------------------------------------------- */
#sello{
  background:var(--papel-calido);
  padding:clamp(26px,3.4vw,40px) 0; max-height:none;
  border-top:1px solid rgba(17,16,16,.07);
  border-bottom:1px solid rgba(17,16,16,.07);
}
.sello__grid{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px clamp(24px,4vw,54px);
}
.sello__etq{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ambar-texto-claro); flex:0 0 auto;
}
.pulso{
  width:8px; height:8px; border-radius:50%; background:var(--ambar-texto-claro);
  position:relative; flex:0 0 auto;
}
.pulso::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:inherit;
  animation:pulsar 2.4s var(--ease-soft) infinite;
}
@keyframes pulsar{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(3.4); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .pulso::after{ animation:none; opacity:0 } }

.sello__url{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(1rem,2vw,1.42rem); letter-spacing:-.025em;
  color:var(--tinta); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  border-bottom:2px solid var(--ambar); transition:border-color var(--dur-fast) var(--ease-soft);
  word-break:break-word;
}
.sello__url:hover{ border-color:var(--tinta) }
.sello__url svg{ flex:0 0 auto; color:var(--ambar-texto-claro) }
.sello__quien{ font-size:14.5px; color:var(--stone); max-width:40ch; margin-left:auto }
.sello__quien b{ color:var(--tinta); font-weight:600 }
@media (max-width:820px){ .sello__quien{ margin-left:0 } }

/* --------------------------------------------------------------------------
   10. §3 DIAGNÓSTICO
   -------------------------------------------------------------------------- */
/* Fondo claro con retícula: lo hereda de .seccion--textura.
   Antes esta sección era negra; se aclaró por pedido del cliente
   («no me gusta que todo sea negro»). */

.diag__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(32px,5vw,80px) }
@media (max-width:940px){ .diag__grid{ grid-template-columns:1fr; gap:38px } }

.diag__h2{ font-size:clamp(2.3rem,6vw,4.1rem); margin:0 0 28px }
.diag__cuerpo p{ font-size:clamp(1.05rem,1.45vw,1.2rem); color:#4A453F }
.diag__cuerpo strong{ color:var(--tinta); font-weight:600 }

.diag__folleto{
  position:relative; border-radius:var(--r-card); overflow:hidden; align-self:start;
  border:1px solid rgba(17,16,16,.12); background:#FFFFFF;
  box-shadow:0 18px 40px -22px rgba(17,16,16,.28);
}
.diag__folleto img{ width:100%; height:auto; opacity:.9; filter:grayscale(.35) contrast(1.02) }
.diag__sellote{
  position:absolute; top:22px; left:-8px; z-index:3;
  background:var(--tinta); color:#F5F2ED; font-family:'Bricolage Grotesque',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 18px; transform:rotate(-3deg); border-radius:3px;
}
.diag__pie{ padding:18px 20px; font-size:14px; color:#5C564E; border-top:1px solid rgba(17,16,16,.10) }

.diag__causa{
  margin-top:34px; padding:26px 28px; border-radius:var(--r-card);
  background:rgba(200,134,10,.09); border:1px solid rgba(224,165,38,.24);
  border-left:3px solid var(--ambar);
}
.diag__causa p{ margin:0; color:#2B2723; font-size:clamp(1.02rem,1.4vw,1.14rem) }
.diag__causa b{ color:var(--ambar-texto-oscuro); font-weight:700 }

.diag__salida{
  margin-top:30px; font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.24rem,2.5vw,1.86rem); line-height:1.24; letter-spacing:-.025em;
  color:var(--tinta);
}
.diag__salida span{ color:var(--ambar-texto-oscuro) }

/* --------------------------------------------------------------------------
   11. §4 COSTO + CALCULADORA
   -------------------------------------------------------------------------- */
/* Fondo tinta que SOLO aclara en la banda final de 140px: ningún texto
   queda nunca sobre el tono intermedio del degradado. */

#costo .capa-mesh{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(50% 40% at 50% 20%, rgba(200,134,10,.13), transparent 66%);
}
#costo .fundido--abajo{
  height:140px;
  background:linear-gradient(180deg, rgba(237,233,225,0) 0%, var(--papel-calido) 100%);
}
.costo__h2{ font-size:clamp(2.2rem,5.4vw,3.7rem); margin:0 0 26px }
.costo__cuerpo{ max-width:58ch }
.costo__cuerpo p{ color:#CFC9C0; font-size:clamp(1.03rem,1.4vw,1.17rem) }

.calc{
  margin:clamp(36px,4.4vw,56px) 0 0;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(20px,3vw,34px); align-items:stretch;
}
@media (max-width:900px){ .calc{ grid-template-columns:1fr } }

.calc__campos{
  background:rgba(245,242,237,.05); border:1px solid rgba(245,242,237,.14);
  border-radius:var(--r-card); padding:clamp(22px,3vw,32px);
}
.calc__campo + .calc__campo{ margin-top:22px }
.calc__campo label{
  display:block; font-size:13.5px; font-weight:600; color:#CFC9C0; margin-bottom:9px;
}
.calc__envoltura{ position:relative; display:flex; align-items:center }
.calc__prefijo{
  position:absolute; left:16px; font-size:17px; color:var(--ambar-texto-oscuro); font-weight:700;
  pointer-events:none;
}
.calc__campos input{
  width:100%; min-height:56px; padding:14px 16px;
  background:#0E0D0D; color:var(--papel);
  border:1px solid rgba(245,242,237,.20); border-radius:var(--r-btn);
  font-family:'Bricolage Grotesque',sans-serif; font-size:1.35rem; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  transition:border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
  -moz-appearance:textfield;
}
.calc__campos input::-webkit-outer-spin-button,
.calc__campos input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.calc__campos input.con-prefijo{ padding-left:34px }
.calc__campos input:focus{
  outline:none; border-color:var(--ambar);
  box-shadow:0 0 0 3px rgba(200,134,10,.24);
}
.calc__ayuda{ font-size:12.5px; color:var(--stone-claro); margin:8px 0 0 }

.calc__salida{
  border-radius:var(--r-card); padding:clamp(24px,3.4vw,38px);
  background:linear-gradient(155deg, rgba(200,134,10,.16), rgba(200,134,10,.05));
  border:1px solid rgba(224,165,38,.32);
  display:flex; flex-direction:column; justify-content:center;
}
.calc__etq{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ambar-texto-oscuro); margin:0 0 14px;
}
.calc__cifra{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(2.3rem,6vw,4rem); line-height:1; letter-spacing:-.04em;
  color:var(--papel); font-variant-numeric:tabular-nums; word-break:break-word;
  margin:0;
}
.calc__unidad{ display:block; font-size:clamp(1rem,1.6vw,1.2rem); color:#CFC9C0; margin-top:12px; font-family:'DM Sans',sans-serif; font-weight:400; letter-spacing:0 }
.calc__formula{ margin:18px 0 0; font-size:12px; line-height:1.5; color:var(--stone-claro) }
.calc__error{ margin:14px 0 0; font-size:13px; color:#E0A526 }

.costo__salida{
  margin:clamp(34px,4vw,50px) 0 0;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.3rem,2.8vw,2.05rem); line-height:1.22; letter-spacing:-.03em;
  color:var(--papel); max-width:22ch;
}

/* --------------------------------------------------------------------------
   12. §5 MECANISMO + COMPARADOR
   -------------------------------------------------------------------------- */
#mecanismo{ background:var(--papel-calido) }
#mecanismo .capa-reticula{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(17,16,16,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,16,16,.055) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 40%, #000 30%, transparent 100%);
  mask-image:radial-gradient(85% 75% at 50% 40%, #000 30%, transparent 100%);
}
#mecanismo .capa-arco{
  position:absolute; right:-140px; top:8%; width:520px; height:520px; z-index:0;
  border:1px solid rgba(200,134,10,.30); border-radius:50%; pointer-events:none;
}
#mecanismo .capa-arco::after{
  content:''; position:absolute; inset:64px; border:1px solid rgba(200,134,10,.18); border-radius:50%;
}
@media (max-width:900px){ #mecanismo .capa-arco{ display:none } }

/* Cabecera centrada y corta: el cliente pidió que este bloque ocupara
   menos y que el comparador quedara centrado, no pegado a la izquierda. */
.mec__cab{
  max-width:52ch; margin:0 auto clamp(24px,2.8vw,36px); text-align:center;
}
.mec__h2{ font-size:clamp(1.9rem,3.9vw,2.7rem); margin:0 0 14px }
.mec__entrada{ margin:0 auto; font-size:1.04rem; color:var(--stone); max-width:54ch }

/* El comparador y su leyenda viven en un marco centrado y acotado. El marco
   mide exactamente lo que mide el comparador, para que leyenda, comparador
   y pie queden alineados al pixel y centrados en la sección. */
.mec__marco{ width:min(100%, 960px); margin-inline:auto }

.mec__leyenda{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 14px;
}
.mec__pieza{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 16px; border-radius:12px;
  background:rgba(255,255,255,.62); border:1px solid rgba(17,16,16,.10);
}
.mec__pieza--fuerte{ background:var(--tinta); border-color:var(--tinta) }
.mec__pieza svg{
  width:23px; height:23px; flex:0 0 auto; margin-top:2px; color:var(--ambar-texto-claro);
}
.mec__pieza--fuerte svg{ color:var(--ambar-texto-oscuro) }
.mec__pieza b{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:1.04rem; letter-spacing:-.025em; margin-bottom:3px; color:var(--tinta);
}
.mec__pieza span{ display:block; font-size:.9rem; line-height:1.42; color:var(--stone) }
.mec__pieza--fuerte b{ color:var(--papel) }
.mec__pieza--fuerte span{ color:#CFC9C0 }
@media (max-width:640px){ .mec__leyenda{ grid-template-columns:1fr } }

/* Comparador */
.comparador{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-media);
  isolation:isolate; border:1px solid rgba(17,16,16,.14);
  box-shadow:none; touch-action:pan-y;
}
@media (max-width:640px){ .comparador{ aspect-ratio:4/5 } }
.comparador:focus-within{ outline:3px solid var(--ambar-texto-claro); outline-offset:3px }

.cmp-lado{ position:absolute; inset:0; overflow:hidden }
.antes{ clip-path:inset(0 calc((100 - var(--pos)) * 1%) 0 0); z-index:2 }
.despues{ z-index:1 }

.divisor{
  position:absolute; top:0; bottom:0; width:2px; background:var(--ambar);
  left:calc(var(--pos) * 1%); pointer-events:none; z-index:5;
  box-shadow:0 0 0 1px rgba(17,16,16,.10);
}
.divisor::after{
  content:''; position:absolute; top:50%; left:50%; width:46px; height:46px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--ambar); border:2px solid var(--papel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111010' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
/* Abajo, no arriba: arriba chocaban con la barra de navegación de la mini-página. */
/* Antes / Después explícito: el cliente no distinguía qué lado era cuál. */
.etq{
  position:absolute; bottom:16px; z-index:6; pointer-events:none;
  display:grid; gap:2px; line-height:1.2;
  font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none;
  padding:9px 15px; border-radius:7px;
  box-shadow:0 8px 22px -10px rgba(17,16,16,.5);
}
.etq b{
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  opacity:.72;
}
.etq-izq{ left:16px; background:rgba(17,16,16,.90); color:#EDE9E1; opacity:calc((50 - var(--pos)) / 50 + .6) }
.etq-der{ right:16px; background:var(--ambar); color:var(--tinta); opacity:calc((var(--pos) - 50) / 50 + .6) }

.comparador input[type=range]{
  position:absolute; inset:0; width:100%; height:100%; z-index:7;
  opacity:0; cursor:ew-resize; margin:0; -webkit-appearance:none; appearance:none; background:transparent;
}
.comparador input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:44px; height:44px }
.comparador input[type=range]::-moz-range-thumb{ width:44px; height:44px; border:0; background:transparent }

.cmp-pie{
  margin:14px 0 0; font-size:13.5px; color:var(--stone);
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.cmp-pie svg{ color:var(--ambar-texto-claro); flex:0 0 auto }

/* Mini-páginas del comparador */
.mp{ width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden }
/* Lado A — plantilla genérica */
.mp--plantilla{ background:#FFFFFF; font-family:Arial, Helvetica, sans-serif }
.mp--plantilla .mp__nav{
  display:flex; align-items:center; gap:12px; padding:10px clamp(14px,2.4vw,28px);
  border-bottom:1px solid #DDD; font-size:clamp(8px,1vw,11px); color:#555;
}
.mp--plantilla .mp__logo{ font-weight:700; color:#2B5FA8; font-size:clamp(11px,1.4vw,15px) }
.mp--plantilla .mp__nav span{ display:none }
@media (min-width:700px){ .mp--plantilla .mp__nav span{ display:inline } }
.mp--plantilla .mp__hero{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(14px,3vw,34px); gap:10px;
  background:linear-gradient(180deg,#EAF1FA,#FFFFFF);
}
.mp--plantilla h4{
  font-family:inherit; font-weight:700; font-size:clamp(13px,2.3vw,26px); color:#1F2A37;
  letter-spacing:0; line-height:1.25; margin:0; max-width:26ch;
}
.mp--plantilla p{ font-size:clamp(8px,1.1vw,13px); color:#6B7280; margin:0; max-width:40ch }
.mp--plantilla .mp__btn{
  background:#2B5FA8; color:#fff; font-size:clamp(8px,1vw,12px); font-weight:700;
  padding:9px 18px; border-radius:3px;
}
.mp--plantilla .mp__cols{ display:flex; gap:8px; padding:0 clamp(14px,2.4vw,28px) clamp(12px,2vw,22px) }
.mp--plantilla .mp__col{ flex:1; border:1px solid #E5E7EB; border-radius:3px; padding:9px }
.mp--plantilla .mp__col b{ display:block; height:5px; width:60%; background:#2B5FA8; margin-bottom:6px; border-radius:2px }
.mp--plantilla .mp__col i{ display:block; height:4px; background:#E5E7EB; margin-bottom:4px; border-radius:2px }
.mp--plantilla .mp__col i:nth-child(3){ width:70% }

/* Lado B — a medida */
/* Lado «a medida»: azul profundo con la foto visible. Antes era casi negro
   con la imagen al 24%, y el lado que debía verse mejor parecía un vacío. */
.mp--medida{ background:#0B2E63; color:#FFFFFF; position:relative }
.mp--medida .mp__foto{ position:absolute; inset:0 }
.mp--medida .mp__foto img{ width:100%; height:100%; object-fit:cover; opacity:.62; filter:saturate(1.05) }
.mp--medida .mp__foto::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(65% 62% at 12% 4%, rgba(43,116,255,.42), transparent 62%),
             linear-gradient(180deg, rgba(7,32,78,.58) 0%, rgba(6,26,66,.90) 100%);
}
/* El lado «a medida» va DEBAJO y solo se ve su mitad derecha (el divisor
   recorta el lado «plantilla» desde la derecha). Por eso su contenido se
   desplaza a la mitad derecha del panel: si no, el texto queda tapado. */
.mp--medida .mp__cont{
  position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(16px,3.4vw,44px); gap:clamp(8px,1.2vw,14px);
  padding-left:53%;
}
@media (max-width:640px){
  .mp--medida .mp__cont{ padding-left:clamp(16px,3.4vw,44px); padding-top:52% }
}
.mp--medida .mp__k{ font-size:clamp(7px,.85vw,10px); letter-spacing:.2em; color:#8FC0FF; font-weight:700 }
.mp--medida h4{
  font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(15px,2.9vw,34px);
  line-height:1.05; letter-spacing:-.035em; margin:0; max-width:16ch; color:#FFFFFF;
}
.mp--medida p{ font-size:clamp(8px,1.15vw,14px); color:#D5E4FB; margin:0; max-width:34ch }
.mp--medida .mp__btn{
  align-self:flex-start; background:linear-gradient(180deg,#2C74FF,#1B63F5); color:#fff;
  font-size:clamp(8px,1vw,13px); font-weight:700; padding:clamp(8px,1.2vw,14px) clamp(14px,2vw,26px);
  border-radius:4px; display:inline-flex; align-items:center; gap:7px;
}
.mp--medida .mp__micro{ font-size:clamp(6.5px,.85vw,10.5px); color:#A9C4EC }
.mp--medida .mp__pruebas{ display:flex; gap:clamp(10px,1.6vw,22px); margin-top:4px; flex-wrap:wrap }
.mp--medida .mp__pruebas span{ font-size:clamp(6.5px,.85vw,10.5px); color:#BCD3F2; display:inline-flex; align-items:center; gap:5px }
.mp--medida .mp__pruebas span::before{ content:''; width:4px; height:4px; border-radius:50%; background:#5B9BFF }

/* --------------------------------------------------------------------------
   13. §6 PORTAFOLIO CAMALEÓN
   -------------------------------------------------------------------------- */
#portafolio{
  /* Fondos CLAROS teñidos con el color de cada proyecto: la sección cambia
     de tono al enfocar cada trabajo, sin recurrir al negro. */
  --p-bg:#F7F5F1; --p-tinta:#1A1815; --p-acento:#8A5E08; --p-suave:rgba(26,24,21,.12);
  background:var(--p-bg); color:var(--p-tinta);
  transition:background-color 600ms var(--ease-soft), color 600ms var(--ease-soft);
}
/* --p-acento se usa como TEXTO sobre --p-bg: cada terna verificada ≥4.5:1. */
#portafolio[data-proyecto="ibonne"]  { --p-bg:#EDF2F9; --p-tinta:#0E1A2B; --p-acento:#1B4E82; --p-suave:rgba(14,26,43,.14) }
#portafolio[data-proyecto="orenta"]  { --p-bg:#EDF5F1; --p-tinta:#132A20; --p-acento:#1F5C41; --p-suave:rgba(19,42,32,.13) }
#portafolio[data-proyecto="lexterra"]{ --p-bg:#F7EFEF; --p-tinta:#2A1216; --p-acento:#8E2438; --p-suave:rgba(42,18,22,.14) }
@media (prefers-reduced-motion: reduce){ #portafolio{ transition:none } }

#portafolio h2,#portafolio h3{ color:var(--p-tinta) }
#portafolio .cejilla{ color:var(--p-acento) }
#portafolio .cejilla::before{ background:var(--p-acento) }
#portafolio::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 46% at 78% 4%, color-mix(in srgb, var(--p-acento) 22%, transparent), transparent 64%);
  transition:background 600ms var(--ease-soft);
}
.porta__cab{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px; margin-bottom:clamp(34px,4vw,52px) }
.porta__h2{ font-size:clamp(2.1rem,5.2vw,3.5rem); margin:0; flex:1 1 380px }
.porta__sub{ font-size:1.06rem; color:var(--p-tinta); opacity:.72; max-width:34ch; margin:0 }

.porta__lista{ display:grid; gap:clamp(20px,3vw,34px) }
.porta__item{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,48px); align-items:center;
  padding:clamp(20px,2.6vw,34px); border-radius:var(--r-media);
  border:1px solid var(--p-suave); background:color-mix(in srgb, var(--p-tinta) 4%, transparent);
  text-decoration:none; color:inherit; position:relative;
  transition:border-color var(--dur-base) var(--ease-soft),
             transform var(--dur-base) var(--ease-out-expo),
             background-color var(--dur-base) var(--ease-soft);
}
.porta__item:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) }
.porta__item:nth-child(even) .porta__marco{ order:2 }
@media (max-width:900px){
  .porta__item,.porta__item:nth-child(even){ grid-template-columns:1fr }
  .porta__item:nth-child(even) .porta__marco{ order:0 }
}
.porta__item:hover,.porta__item:focus-visible{
  border-color:var(--p-acento); transform:translateY(-4px);
  background:color-mix(in srgb, var(--p-tinta) 7%, transparent);
}
.porta__item.enfocada{ border-color:color-mix(in srgb, var(--p-acento) 60%, transparent) }

/* Marco navegador de cada portada */
.porta__marco{
  border-radius:14px; overflow:hidden; background:#0F0E0D;
  border:1px solid rgba(0,0,0,.35); position:relative;
}
.porta__barra{
  display:flex; align-items:center; gap:6px; padding:8px 11px; background:#1A1917;
}
.porta__barra i{ width:8px; height:8px; border-radius:50%; background:#3A3733; display:block }
.porta__barra em{
  font-style:normal; margin-left:6px; font-size:10.5px; color:#8E8880;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.porta__lienzo{ position:relative; aspect-ratio:16/10; overflow:hidden }
.porta__lienzo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* Capturas reales: se muestra la portada tal cual, alineada arriba y sin
   filtros de color, para que el prospecto vea la página como es de verdad. */
.porta__lienzo--captura img{ object-fit:cover; object-position:top center; filter:none }
.porta__item:hover .porta__lienzo--captura img,
.porta__item:focus-visible .porta__lienzo--captura img{ transform:scale(1.02) }
.porta__lienzo--captura img{ transition:transform .5s cubic-bezier(.22,.61,.36,1) }
@media (prefers-reduced-motion: reduce){
  .porta__lienzo--captura img{ transition:none }
  .porta__item:hover .porta__lienzo--captura img,
  .porta__item:focus-visible .porta__lienzo--captura img{ transform:none }
}
.porta__capa{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(14px,2.4vw,26px); gap:8px;
}
.porta__capa::before{ content:''; position:absolute; inset:0; z-index:0 }
.porta__capa > *{ position:relative; z-index:2 }
.porta__capa em{
  font-style:normal; font-size:clamp(7px,.9vw,11px); letter-spacing:.2em; font-weight:700;
}
.porta__capa strong{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(15px,2.3vw,28px); line-height:1.05; letter-spacing:-.035em; max-width:18ch;
}
.porta__capa span{
  align-self:flex-start; font-size:clamp(7.5px,.95vw,11.5px); font-weight:700;
  padding:7px 13px; border-radius:4px; margin-top:4px;
}
/* Identidad por proyecto en la portada */
.pv--ibonne .porta__capa::before{ background:linear-gradient(180deg, rgba(14,26,43,.28), rgba(14,26,43,.93)) }
.pv--ibonne .porta__capa em{ color:#C9A24A }
.pv--ibonne .porta__capa strong{ color:#F4F0E7 }
.pv--ibonne .porta__capa span{ background:#C9A24A; color:#0E1A2B }
.pv--ibonne .porta__lienzo img{ filter:saturate(.85) contrast(1.05) }

.pv--orenta .porta__capa::before{ background:linear-gradient(180deg, rgba(242,246,243,.30), rgba(242,246,243,.95)) }
.pv--orenta .porta__capa em{ color:#2E7D5B }
.pv--orenta .porta__capa strong{ color:#132A20 }
.pv--orenta .porta__capa span{ background:#2E7D5B; color:#F2F6F3 }
.pv--orenta .porta__barra{ background:#E4EBE6 }
.pv--orenta .porta__barra em{ color:#6D7C74 }
.pv--orenta .porta__marco{ background:#F2F6F3 }

.pv--lexterra .porta__capa::before{ background:linear-gradient(180deg, rgba(26,16,19,.30), rgba(26,16,19,.94)) }
.pv--lexterra .porta__capa em{ color:#D08A9B }
.pv--lexterra .porta__capa strong{ color:#F3E9E4 }
.pv--lexterra .porta__capa span{ background:#B0475C; color:#FFF }
.pv--lexterra .porta__lienzo img{ filter:saturate(.7) contrast(1.1) }

.porta__texto h3{ font-size:clamp(1.44rem,2.7vw,2.05rem); margin:0 0 6px; letter-spacing:-.03em }
.porta__rol{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--p-acento); margin-bottom:14px;
}
.porta__texto p{ font-size:1rem; opacity:.78; margin:0 0 16px; max-width:46ch }
/* La opacidad de arriba es para el párrafo descriptivo. Las etiquetas que
   distinguen cliente real de demostración NUNCA se atenúan: con opacity:.78
   caen a 4.16:1 (defecto), 3.65:1 (orenta) y 4.15:1 (lexterra). A opacidad 1
   los cuatro estados quedan entre 5.8:1 y 7.3:1.
   Selector de 2 clases a propósito: tiene que ganarle a `.porta__texto p`. */
.porta__texto .porta__rol,
.porta__texto .porta__etiqueta-demo{ opacity:1 }
.porta__url{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  font-size:14px; font-weight:600; color:var(--p-acento);
  border-bottom:2px solid color-mix(in srgb, var(--p-acento) 45%, transparent);
  transition:border-color var(--dur-fast) var(--ease-soft);
  word-break:break-word;
}
.porta__item:hover .porta__url{ border-color:var(--p-acento) }
.porta__etiqueta-demo{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  padding:6px 11px; border-radius:4px; margin-bottom:14px;
  background:color-mix(in srgb, var(--p-tinta) 12%, transparent);
  color:var(--p-tinta); border:1px solid var(--p-suave);
}

/* Rótulo DENTRO del marco: ninguna de las tres portadas es una captura.
   Mismo peso visual que .porta__etiqueta-demo. Color fijo, no temático:
   #F2EDE2 sobre #0A0908 = 17.4:1 en los cuatro estados del camaleón. */
.porta__recreacion{
  position:absolute; z-index:3; top:10px; left:10px;
  display:inline-block; max-width:calc(100% - 20px);
  font-size:13.5px; font-weight:700; letter-spacing:.04em; line-height:1.25;
  padding:6px 11px; border-radius:4px;
  background:#0A0908; color:#F2EDE2;
  border:1px solid rgba(242,237,226,.28);
}
@media (max-width:520px){
  .porta__recreacion{ font-size:11px; padding:5px 9px; top:7px; left:7px }
}

/* Homenaje a IBONNE */
.homenaje{
  margin-top:clamp(40px,5vw,66px); padding:clamp(26px,3.6vw,48px);
  border-radius:var(--r-media); border:1px solid var(--p-suave);
  background:color-mix(in srgb, var(--p-tinta) 5%, transparent);
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(24px,3.4vw,54px);
}
@media (max-width:900px){ .homenaje{ grid-template-columns:1fr } }
.homenaje__sello{
  font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.1; letter-spacing:-.03em;
}
.homenaje__sello small{
  display:block; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--p-acento); margin-bottom:16px;
}
.homenaje__cuerpo p{ font-size:clamp(1.02rem,1.35vw,1.13rem); opacity:.85; max-width:62ch }
.homenaje__cuerpo p:first-child::first-letter{
  float:left; font-family:'Bricolage Grotesque',sans-serif; font-size:3.4em; line-height:.82;
  padding:6px 12px 0 0; color:var(--p-acento); font-weight:700;
}
.homenaje__nota{
  margin-top:22px; padding:18px 22px; border-radius:var(--r-card);
  border-left:3px solid var(--p-acento);
  background:color-mix(in srgb, var(--p-tinta) 6%, transparent);
}
.homenaje__nota p{ margin:0; font-size:1rem; opacity:.9 }

/* --------------------------------------------------------------------------
   14. §7 EQUIPO
   -------------------------------------------------------------------------- */
/* El fondo lo aporta .seccion--calido; aquí ya no se fuerza el negro
   (el cliente pidió expresamente que esta sección fuera cálida). */

.eq__datos h3{ font-size:1.36rem; margin:0 0 5px; letter-spacing:-.03em }
.eq__rol{
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ambar-texto-oscuro); margin:0 0 12px;
}
.eq__datos p{ margin:0; font-size:.98rem; color:#B6B0A7 }

@keyframes respirar{ 0%,100%{ opacity:.26; transform:scale(1) } 50%{ opacity:.42; transform:scale(1.04) } }
@media (prefers-reduced-motion: reduce){ .eq__marca-agua{ animation:none } }


/* --------------------------------------------------------------------------
   15. §8 OFERTA
   -------------------------------------------------------------------------- */
#oferta{ background:var(--papel) }
#oferta .capa-mesh{
  position:absolute; inset:-8%; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 44% at 10% 6%,  rgba(200,134,10,.16) 0%, transparent 64%),
    radial-gradient(52% 46% at 88% 18%, rgba(237,233,225,.95) 0%, transparent 62%),
    radial-gradient(60% 50% at 50% 108%, rgba(17,16,16,.07) 0%, transparent 62%);
}
.of__cab{ max-width:60ch; margin-bottom:clamp(34px,4vw,52px) }
.of__h2{ font-size:clamp(2.1rem,5.2vw,3.5rem); margin:0 }

/* Rejilla exacta de 3×2: con auto-fit quedaban 4 columnas y la última fila
   dejaba un hueco vacío a la derecha. Ahora las seis piezas cierran el
   rectángulo y todas miden lo mismo. */
.of__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px,2vw,20px); align-items:stretch;
}
@media (max-width:880px){ .of__grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:560px){ .of__grid{ grid-template-columns:1fr } }
.of__tarjeta{
  padding:clamp(22px,2.6vw,30px); border-radius:var(--r-card);
  background:rgba(255,255,255,.62); border:1px solid rgba(17,16,16,.10);
  position:relative; overflow:hidden;
  transition:border-color var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-out-expo);
}
.of__tarjeta:hover{ border-color:rgba(200,134,10,.55); transform:translateY(-3px) }
.of__tarjeta--fuerte{ background:var(--tinta); border-color:var(--tinta) }
.of__tarjeta.of__tarjeta--fuerte h3{ color:var(--papel) }
.of__tarjeta.of__tarjeta--fuerte p{ color:#C6C0B8 }  /* especificidad doble: gana a .of__tarjeta p */
.of__tarjeta--fuerte .of__icono{ color:var(--ambar-texto-oscuro) }
.of__tarjeta--fuerte::after{
  content:''; position:absolute; right:-50px; top:-50px; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,134,10,.30), transparent 68%);
}
.of__icono{ width:34px; height:34px; color:var(--ambar-texto-claro); margin-bottom:16px }
.of__tarjeta h3{ font-size:1.22rem; margin:0 0 9px; letter-spacing:-.025em }
.of__tarjeta p{ margin:0; font-size:.99rem; color:var(--stone) }

/* Tabla de reconciliación */
.recon{ margin-top:clamp(38px,4.4vw,58px) }
.recon__titulo{ font-size:clamp(1.36rem,2.6vw,1.85rem); margin:0 0 20px }
.recon__envoltura{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-card) }
.recon table{
  width:100%; min-width:620px; border-collapse:collapse;
  background:rgba(255,255,255,.6); border:1px solid rgba(17,16,16,.10);
  border-radius:var(--r-card); overflow:hidden;
}
.recon th,.recon td{ padding:16px 20px; text-align:left; vertical-align:top; font-size:.98rem }
.recon thead th{
  background:var(--tinta); color:var(--papel); font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.recon tbody tr + tr{ border-top:1px solid rgba(17,16,16,.10) }
.recon tbody th{ font-family:'Bricolage Grotesque',sans-serif; font-size:1.04rem; font-weight:700; letter-spacing:-.02em; width:26% }
.recon tbody td{ color:var(--stone) }
.recon tbody tr.resaltada{ background:rgba(200,134,10,.10) }
.recon tbody tr.resaltada th{ color:var(--ambar-texto-claro) }
.recon tbody tr.resaltada td{ color:var(--tinta) }

/* Recomendación firmada */
.firma{
  margin-top:clamp(34px,4vw,50px); padding:clamp(26px,3.2vw,42px);
  border-radius:var(--r-media); background:var(--tinta); color:var(--papel);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.6vw,30px); align-items:center;
}
@media (max-width:640px){ .firma{ grid-template-columns:1fr } }
.firma__foto{
  width:86px; height:86px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  border:2px solid rgba(224,165,38,.45); background:#221F1C;
  display:flex; align-items:flex-end; justify-content:center;
}
.firma__foto picture{ display:block; width:100%; height:100% }
.firma__foto img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.firma__texto{
  font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(1.2rem,2.4vw,1.72rem);
  line-height:1.24; letter-spacing:-.028em; margin:0;
}
.firma__quien{ margin:14px 0 0; font-size:13.5px; color:var(--stone-claro); font-family:'DM Sans',sans-serif; letter-spacing:0 }
.firma__quien b{ color:var(--ambar-texto-oscuro); font-weight:700 }

/* --------------------------------------------------------------------------
   16. §9 PROCESO
   -------------------------------------------------------------------------- */
#proceso{ background:var(--papel-calido) }
#proceso .capa-diagonal{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:repeating-linear-gradient(135deg, rgba(17,16,16,.035) 0 1px, transparent 1px 16px);
}
#proceso .capa-foto{
  position:absolute; right:0; top:0; width:min(38%,520px); height:100%; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%);
  mask-image:linear-gradient(90deg, transparent, #000 70%);
}
#proceso .capa-foto img{ width:100%; height:100%; object-fit:cover; opacity:.16; filter:grayscale(1) }
@media (max-width:900px){ #proceso .capa-foto{ display:none } }

/* Titular deliberadamente largo: baja un punto de escala y ensancha la medida. */
.pr__h2{ font-size:clamp(1.9rem,4.4vw,2.9rem); margin:0 0 clamp(34px,4vw,52px); max-width:28ch }
.pr__pasos{ display:grid; gap:clamp(16px,2.2vw,24px); grid-template-columns:repeat(auto-fit,minmax(258px,1fr)) }
.pr__paso{
  position:relative; padding:clamp(24px,2.8vw,32px); border-radius:var(--r-card);
  background:rgba(255,255,255,.62); border:1px solid rgba(17,16,16,.10);
  overflow:hidden;
}
.pr__paso::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--ambar), transparent);
}
.pr__num{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(3rem,6vw,4.4rem); line-height:.86; letter-spacing:-.055em;
  color:rgba(17,16,16,.11); font-variant-numeric:tabular-nums; margin-bottom:10px;
}
.pr__semana{
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ambar-texto-claro); display:block; margin-bottom:12px;
}
.pr__paso h3{ font-size:1.16rem; margin:0 0 9px; letter-spacing:-.02em }
.pr__paso p{ margin:0; font-size:.99rem; color:var(--stone) }

.pr__no{
  margin-top:clamp(28px,3.4vw,44px); padding:clamp(26px,3.2vw,40px);
  border-radius:var(--r-media); background:var(--tinta); color:var(--papel);
  display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:center;
  position:relative; overflow:hidden;
}
@media (max-width:820px){ .pr__no{ grid-template-columns:1fr } }
.pr__no::after{
  content:''; position:absolute; left:-60px; bottom:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,134,10,.26), transparent 68%);
}
.pr__no h3{ font-size:clamp(1.5rem,3.2vw,2.15rem); margin:0; color:var(--papel); position:relative; z-index:2 }
.pr__no ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; position:relative; z-index:2 }
.pr__no li{ display:flex; align-items:center; gap:13px; font-size:1.04rem; color:#CFC9C0 }
.pr__no li svg{ flex:0 0 auto; color:var(--ambar-texto-oscuro) }

/* --------------------------------------------------------------------------
   17. §10 PRECIO
   -------------------------------------------------------------------------- */
#precio{ background:var(--tinta); color:var(--papel) }
#precio .capa-mesh{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(46% 40% at 50% 42%, rgba(200,134,10,.14) 0%, transparent 66%);
  box-shadow:inset 0 0 240px 70px rgba(0,0,0,.55);
}
.precio__caja{ text-align:center; max-width:820px; margin-inline:auto }
.precio__etq{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ambar-texto-oscuro); margin:0 0 20px;
}
.precio__cifra{
  font-size:clamp(3.1rem,10.5vw,7rem); line-height:.92; letter-spacing:-.05em;
  color:var(--papel); margin:0; font-variant-numeric:tabular-nums;
}
.precio__cifra small{
  display:block; font-family:'DM Sans',sans-serif; font-weight:500; letter-spacing:.02em;
  font-size:clamp(.9rem,1.6vw,1.1rem); color:var(--stone-claro); margin-top:16px;
}
.precio__pago{ font-size:clamp(1.05rem,1.7vw,1.24rem); color:#CFC9C0; margin:18px 0 0 }

.precio__cupo{
  margin:clamp(30px,3.4vw,44px) auto 0; max-width:620px; text-align:left;
  padding:20px 24px; border-radius:var(--r-card);
  border:1px solid rgba(224,165,38,.30); background:rgba(200,134,10,.09);
  display:flex; gap:15px; align-items:flex-start;
}
.precio__cupo svg{ flex:0 0 auto; color:var(--ambar-texto-oscuro); margin-top:2px }
.precio__cupo p{ margin:0; font-size:.99rem; color:#DCD6CD }
.precio__cupo b{ color:var(--ambar-texto-oscuro) }

.desact{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(14px,2vw,20px); margin:clamp(28px,3.2vw,40px) 0 0; text-align:left;
}
.desact__item{
  padding:24px 26px; border-radius:var(--r-card);
  border:1px solid rgba(245,242,237,.13); background:rgba(245,242,237,.04);
}
.desact__item svg{ color:var(--ambar-texto-oscuro); margin-bottom:14px }
.desact__item p{ margin:0; font-size:.99rem; color:#CFC9C0 }
.desact__item b{ color:var(--papel); font-weight:600 }

.honestidad{
  margin:clamp(40px,5vw,68px) 0 0; padding:clamp(28px,3.6vw,52px);
  border-radius:var(--r-media); text-align:left;
  background:rgba(245,242,237,.05); border:1px solid rgba(245,242,237,.14);
}
.honestidad h3{
  font-size:clamp(1.6rem,3.6vw,2.5rem); margin:0 0 22px; color:var(--papel); letter-spacing:-.03em;
}
.honestidad p{ font-size:clamp(1.03rem,1.4vw,1.17rem); color:#CFC9C0; max-width:62ch }
.honestidad .remate{
  margin-top:22px; font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.16rem,2.3vw,1.6rem); line-height:1.26; letter-spacing:-.03em; color:var(--ambar-texto-oscuro);
}
#precio .cta-envoltura{ text-align:center }

/* --------------------------------------------------------------------------
   18. §11 OBJECIONES — formato «expediente», sin acordeón
   -------------------------------------------------------------------------- */
#objeciones{ background:var(--papel) }
#objeciones .capa-textura{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(17,16,16,.11) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 78%);
  mask-image:linear-gradient(180deg, #000, transparent 78%);
}
#objeciones .capa-foto{
  position:absolute; left:0; bottom:0; width:min(34%,440px); height:60%; z-index:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(45deg, #000, transparent 72%);
  mask-image:linear-gradient(45deg, #000, transparent 72%);
}
#objeciones .capa-foto img{ width:100%; height:100%; object-fit:cover; opacity:.13; filter:grayscale(1) }
@media (max-width:900px){ #objeciones .capa-foto{ display:none } }

.obj__cab{ max-width:60ch; margin-bottom:clamp(28px,3.2vw,40px) }
.obj__h2{ font-size:clamp(2.1rem,5.2vw,3.5rem); margin:0 0 16px }

.obj__indice{
  display:flex; flex-wrap:wrap; gap:9px; margin:0 0 clamp(30px,3.6vw,46px); padding:0; list-style:none;
}
.obj__indice a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  font-size:13.5px; font-weight:600; color:var(--tinta); text-decoration:none;
  background:rgba(255,255,255,.7); border:1px solid rgba(17,16,16,.13);
  border-radius:999px;
  transition:background-color var(--dur-fast) var(--ease-soft),
             border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.obj__indice a:hover,.obj__indice a:focus-visible{
  background:var(--tinta); color:var(--papel); border-color:var(--tinta);
}

.obj__lista{ display:grid; gap:clamp(20px,2.6vw,32px) }
.obj__caso{
  display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(18px,3vw,44px); align-items:start;
  padding-top:clamp(20px,2.6vw,32px); border-top:1px solid rgba(17,16,16,.13);
  scroll-margin-top:100px;
}
@media (max-width:820px){ .obj__caso{ grid-template-columns:1fr; gap:18px } }

.obj__pregunta{
  position:relative; padding:clamp(20px,2.4vw,28px); border-radius:var(--r-card);
  background:var(--papel-calido); border:1px solid rgba(17,16,16,.11);
  transform:rotate(-.55deg);
  transition:transform var(--dur-base) var(--ease-out-expo);
}
.obj__caso:nth-child(even) .obj__pregunta{ transform:rotate(.65deg) }
.obj__caso:hover .obj__pregunta{ transform:rotate(0deg) }
.obj__pregunta::before{
  content:''; position:absolute; left:0; top:22px; bottom:22px; width:3px;
  background:var(--ambar); border-radius:0 3px 3px 0;
}
.obj__num{
  display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.18em; color:var(--ambar-texto-claro); margin-bottom:12px;
}
.obj__pregunta q{
  display:block; quotes:'«' '»'; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(1.14rem,2.1vw,1.44rem); line-height:1.25; letter-spacing:-.025em; color:var(--tinta);
}
.obj__quien{ margin:14px 0 0; font-size:12.5px; color:var(--stone) }

.obj__respuesta p{ font-size:clamp(1.01rem,1.35vw,1.12rem); color:#3A3733; max-width:58ch }
.obj__respuesta p:first-child{ margin-top:0 }
.obj__firma{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--stone);
}
.obj__firma::before{ content:''; width:20px; height:2px; background:var(--ambar); border-radius:2px }

/* --------------------------------------------------------------------------
   19. §12 CIERRE — campo ámbar
   -------------------------------------------------------------------------- */
#cierre{ background:var(--ambar); color:var(--tinta) }
.seccion--ambar::after{ opacity:.07; mix-blend-mode:multiply }
#cierre .capa-anillos{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.42;
  background-image:
    repeating-radial-gradient(circle at 88% 8%, transparent 0 46px, rgba(17,16,16,.10) 46px 47px);
}
#cierre h2,#cierre h3{ color:var(--tinta) }
.cierre__grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(30px,4.4vw,64px); align-items:start }
@media (max-width:940px){ .cierre__grid{ grid-template-columns:1fr } }
/* Título en blanco sobre el mostaza, por pedido del cliente.
   Blanco sobre #C8860A da 2.26:1, así que se refuerza con una sombra
   proyectada oscura para que el trazo se lea sin ambigüedad. */
.cierre__h2{
  font-size:clamp(2.2rem,5.6vw,3.8rem); margin:0 0 24px;
  color:#FFFFFF;
  text-shadow:0 2px 14px rgba(60,38,2,.55), 0 1px 2px rgba(60,38,2,.65);
}
#cierre h2{ color:#FFFFFF }
.cierre__cuerpo p{ font-size:clamp(1.05rem,1.45vw,1.2rem); color:#2B2415; max-width:52ch }
.cierre__cuerpo b{ color:var(--tinta); font-weight:700 }
#cierre .cta-primario{
  background:var(--tinta); box-shadow:0 1px 0 0 rgba(255,255,255,.14) inset,
    0 2px 4px -1px rgba(17,16,16,.30), 0 10px 24px -8px rgba(17,16,16,.45);
}
#cierre .cta-primario:hover{ background:#2A2622 }
#cierre .cta-primario:active{ background:#000; box-shadow:0 2px 5px rgba(0,0,0,.4) inset }
#cierre .cta-primario:focus-visible{ outline-color:var(--tinta) }

/* Meta-cierre auto-auditado */
.meta{
  border-radius:var(--r-media); padding:clamp(24px,3vw,34px);
  background:rgba(17,16,16,.9); color:var(--papel);
  font-family:'DM Sans',sans-serif;
}
.meta__etq{
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ambar-texto-oscuro); margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.meta__etq::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ambar-texto-oscuro) }
.meta dl{ margin:0; display:grid; gap:0 }
.meta__fila{
  display:flex; align-items:baseline; gap:12px; padding:11px 0;
  border-top:1px solid rgba(245,242,237,.12);
}
.meta__fila:first-child{ border-top:0 }
.meta dt{ font-size:14px; color:#B6B0A7; flex:1 1 auto }
.meta dd{
  margin:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.24rem;
  letter-spacing:-.03em; color:var(--ambar-texto-oscuro); font-variant-numeric:tabular-nums;
}
.meta__remate{
  margin:20px 0 0; font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.16rem,2.2vw,1.5rem); line-height:1.22; letter-spacing:-.03em; color:var(--papel);
}

/* --------------------------------------------------------------------------
   20. PIE
   -------------------------------------------------------------------------- */
/* ── PIE COMPLETO ──────────────────────────────────────────────────── */
.pie{ background:var(--tinta); color:#9A948C; padding:clamp(46px,5.5vw,72px) 0 30px; position:relative }
.pie__grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr));
  gap:clamp(28px,3.4vw,48px);
}
@media (max-width:900px){ .pie__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .pie__grid{ grid-template-columns:1fr; gap:30px } }

.pie__marca{ display:inline-flex; align-items:center; gap:11px; margin-bottom:14px }
.pie__marca img{ width:30px; height:30px }
.pie__marca b{ font-family:'Bricolage Grotesque',sans-serif; color:var(--papel); font-size:20px; letter-spacing:-.03em }
.pie__lema{ font-size:14.5px; line-height:1.6; color:#B6B0A7; margin:0 0 12px; max-width:38ch }
.pie__ubi{ font-size:13px; line-height:1.6; color:#8E8880; margin:0; max-width:38ch }

.pie__titulo{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ambar-texto-oscuro); margin:0 0 16px;
}
.pie__lista{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.pie__lista a,.pie__boton{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; color:#C6C0B8; text-decoration:none;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  min-height:26px; transition:color var(--dur-rapida) var(--ease-soft);
}
.pie__lista a:hover,.pie__lista a:focus-visible,
.pie__boton:hover,.pie__boton:focus-visible{ color:var(--papel) }
.pie__lista svg{ flex:0 0 auto; opacity:.75 }
.pie__demo{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8E8880; border:1px solid rgba(198,192,184,.28); border-radius:3px; padding:1px 6px;
}

.pie__base{
  margin-top:clamp(34px,4vw,52px); padding-top:22px;
  border-top:1px solid rgba(198,192,184,.16);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-size:12.5px; color:#8E8880;
}
.pie :focus-visible{ outline-color:var(--papel) }

/* ── CIERRE · fila de acciones ─────────────────────────────────────── */
.cierre__acciones{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:6px;
}
.cta-secundario,.cta-terciario{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 26px; border-radius:var(--r-btn);
  font-family:'DM Sans',system-ui,sans-serif; font-size:16px; font-weight:700;
  letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition:transform var(--dur-rapida) var(--ease-out-expo),
             background-color var(--dur-rapida) var(--ease-soft),
             border-color var(--dur-rapida) var(--ease-soft);
}
/* Sobre el ámbar del cierre: relleno oscuro translúcido y borde sólido. */
.cta-secundario{
  background:rgba(17,16,16,.10); color:var(--tinta); border:2px solid var(--tinta);
}
.cta-secundario:hover{ background:rgba(17,16,16,.18); transform:translateY(-2px) }
.cta-terciario{
  background:transparent; color:#3A2E12; border:2px solid rgba(17,16,16,.32);
  min-height:50px; font-size:15px;
}
.cta-terciario:hover{ border-color:var(--tinta); color:var(--tinta); transform:translateY(-2px) }
@media (prefers-reduced-motion: reduce){
  .cta-secundario:hover,.cta-terciario:hover{ transform:none }
}
@media (max-width:560px){
  .cierre__acciones{ flex-direction:column; align-items:stretch }
  .cierre__acciones > *{ width:100% }
}
.pie__marca{ display:inline-flex; align-items:center; gap:10px }
.pie__marca img{ width:26px; height:26px }
.pie__marca b{ font-family:'Bricolage Grotesque',sans-serif; color:var(--papel); font-size:17px; letter-spacing:-.03em }
.pie a{ color:#B6B0A7; text-decoration:underline; text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center }
.pie a:hover{ color:var(--papel) }

@media (max-width:640px){ .pie__derecha{ margin-left:0 } }

/* --------------------------------------------------------------------------
   21. MODAL / FORMULARIO
   -------------------------------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:20px;
}
.modal.abierto{ display:flex }
.modal__velo{
  position:absolute; inset:0; background:rgba(11,10,10,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:aparecer var(--dur-base) var(--ease-soft) both;
}
@keyframes aparecer{ from{ opacity:0 } to{ opacity:1 } }
.modal__caja{
  position:relative; z-index:2; width:min(100%, 560px); max-height:min(88vh, 860px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--papel); border-radius:var(--r-media);
  padding:clamp(26px,4vw,44px);
  animation:subir var(--dur-base) var(--ease-out-expo) both;
}
@keyframes subir{ from{ opacity:0; transform:translateY(18px) scale(.98) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  .modal__velo,.modal__caja{ animation-duration:1ms }
}
.modal__cerrar{
  position:absolute; top:12px; right:12px; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(17,16,16,.14); border-radius:var(--r-btn);
  cursor:pointer; color:var(--tinta);
  transition:background-color var(--dur-fast) var(--ease-soft);
}
.modal__cerrar:hover{ background:rgba(17,16,16,.06) }
.modal__cejilla{
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ambar-texto-claro); margin:0 0 12px;
}
.modal__titulo{ font-size:clamp(1.5rem,3.4vw,2.05rem); margin:0 0 10px; padding-right:44px }
.modal__sub{ font-size:.99rem; color:var(--stone); margin:0 0 26px }

.campo{ margin-bottom:20px }
.campo label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px }
.campo label .req{ color:var(--ambar-texto-claro) }
.campo input{
  width:100%; min-height:52px; padding:13px 16px;
  background:#FFFFFF; border:1px solid var(--dust); border-radius:var(--r-btn);
  font-size:16px; color:var(--tinta);
  transition:border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.campo input:focus{
  outline:none; border-color:var(--ambar-ink); box-shadow:0 0 0 3px rgba(138,94,8,.18);
}
.campo input[aria-invalid="true"]{ border-color:#B3271E; box-shadow:0 0 0 3px rgba(179,39,30,.14) }
.campo__error{
  display:none; margin:8px 0 0; font-size:13px; color:#8E1F19; font-weight:600;
  align-items:center; gap:7px;
}
.campo__error.visible{ display:flex }
.campo__pista{ margin:7px 0 0; font-size:12.5px; color:var(--stone) }

.modal .cta-primario{ width:100% }
.modal__legal{ margin:14px 0 0; font-size:12.5px; color:var(--stone); text-align:center }
.modal__aviso{
  display:none; margin:0 0 20px; padding:14px 16px; border-radius:var(--r-btn);
  background:rgba(179,39,30,.10); border:1px solid rgba(179,39,30,.30);
  font-size:14px; color:#8E1F19;
}
.modal__aviso.visible{ display:block }

.exito{ text-align:center }
.exito__icono{
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  background:rgba(200,134,10,.14); border:1px solid rgba(200,134,10,.4);
  display:flex; align-items:center; justify-content:center; color:var(--ambar-texto-claro);
}
.exito h2{ font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 12px }
.exito p{ color:var(--stone); font-size:1rem }
.exito .enlace-texto{ display:inline-flex; min-height:44px; align-items:center }

body.sin-scroll{ overflow:hidden }

/* --------------------------------------------------------------------------
   22. BARRA DE PROGRESO DE LECTURA
   -------------------------------------------------------------------------- */
.progreso{
  position:fixed; top:0; left:0; height:3px; z-index:95;
  background:linear-gradient(90deg, var(--ambar-ink), var(--ambar));
  width:0%; pointer-events:none;
  transition:width 120ms linear;
}

/* --------------------------------------------------------------------------
   23. VARIANTE TIBIA
   -------------------------------------------------------------------------- */
body.v-tibia #costo{ display:none }
body.v-tibia .solo-fria{ display:none }

/* --------------------------------------------------------------------------
   24. AJUSTES MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  body{ font-size:16px }
  .seccion{ padding:clamp(56px,13vw,80px) 0 }
  .homenaje__cuerpo p:first-child::first-letter{ font-size:2.8em }
  .eq__retrato{ aspect-ratio:4/5 }
  .obj__pregunta{ transform:none!important }
}

@media print{
  .barra,.progreso,.modal,.mock-stage,.comparador{ display:none!important }
  .seccion{ background:#fff!important; color:#000!important; padding:20px 0 }
}

/* ══════════════════════════════════════════════════════════════════════
   FONDOS DISTINTIVOS POR ETAPA
   Cada sección tiene su propio tratamiento para que se note el cambio
   de etapa al bajar. Pedido explícito del cliente.
   ══════════════════════════════════════════════════════════════════════ */

/* Hueso liso con veladura fría: cierra la etapa de objeciones. */
.seccion--hueso{
  color:var(--tinta);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(27,99,245,.05), transparent 62%),
    linear-gradient(180deg,#FCFBF9 0%, #F1EEE8 100%);
}
.seccion--hueso h1,.seccion--hueso h2,.seccion--hueso h3{ color:var(--tinta) }
.seccion--hueso .cejilla{ color:var(--ambar-texto-oscuro) }

/* ── FAQ · acordeón ────────────────────────────────────────────────── */
.envoltura--angosta{ width:min(100% - (var(--pad-x) * 2), 860px) }

.faq{ display:grid; gap:12px; margin-top:clamp(30px,3.6vw,44px) }

.faq__item{
  background:var(--blanco, #FDFCFA);
  border:1px solid rgba(17,16,16,.11);
  border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(17,16,16,.04);
  transition:border-color var(--dur-rapida) var(--ease-soft),
             box-shadow var(--dur-rapida) var(--ease-soft);
}
.faq__item[open]{
  border-color:rgba(200,134,10,.42);
  box-shadow:0 10px 30px -16px rgba(17,16,16,.26);
}
.faq__item:hover{ border-color:rgba(17,16,16,.2) }

.faq__pregunta{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(18px,2.2vw,24px) clamp(18px,2.4vw,28px);
  cursor:pointer; list-style:none; min-height:56px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.02rem,1.7vw,1.24rem); font-weight:600;
  letter-spacing:-.02em; color:var(--tinta);
}
.faq__pregunta::-webkit-details-marker{ display:none }
.faq__pregunta:focus-visible{ outline:3px solid var(--ambar-texto-oscuro); outline-offset:-3px; border-radius:var(--r-card) }

.faq__mas{
  flex:0 0 auto; color:var(--ambar-texto-oscuro);
  transition:transform var(--dur-base) var(--ease-out-expo);
}
.faq__item[open] .faq__mas{ transform:rotate(45deg) }

.faq__respuesta{
  padding:0 clamp(18px,2.4vw,28px) clamp(20px,2.4vw,26px);
  border-top:1px solid rgba(17,16,16,.07); margin-top:-2px; padding-top:18px;
}
.faq__respuesta p{
  margin:0 0 10px; font-size:clamp(.98rem,1.35vw,1.08rem);
  line-height:1.62; color:#4A453F; max-width:62ch;
}
.faq__respuesta p:last-child{ margin-bottom:0 }

@media (prefers-reduced-motion: reduce){
  .faq__mas{ transition:none }
}

/* ── PRECIO · ficha de inversión ───────────────────────────────────────
   Reemplaza la cifra gigante suelta por una ficha con estructura de
   cotización: concepto, moneda, importe y términos. Pedido del cliente:
   «que la parte del precio se vea más profesional». */
.ficha{
  max-width:660px; margin:clamp(26px,3vw,38px) auto 0;
  background:linear-gradient(168deg, rgba(245,242,237,.075), rgba(245,242,237,.035));
  border:1px solid rgba(245,242,237,.16);
  border-radius:var(--r-card);
  overflow:hidden; text-align:left;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.85);
}
.ficha__cab{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:18px clamp(20px,2.6vw,32px);
  border-bottom:1px solid rgba(245,242,237,.13);
  background:rgba(245,242,237,.035);
}
.ficha__concepto{ font-size:14.5px; color:#C6C0B8; letter-spacing:.01em }
.ficha__sello{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ambar-texto-oscuro);
  border:1px solid rgba(224,165,38,.42); border-radius:999px; padding:5px 12px;
}
.ficha__cifra{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:clamp(26px,3.2vw,38px) clamp(20px,2.6vw,32px) clamp(20px,2.4vw,28px);
}
.ficha__moneda{
  font-family:'DM Sans',system-ui,sans-serif; font-size:15px; font-weight:700;
  letter-spacing:.1em; color:#9A948C;
}
.ficha__numero{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.8rem,7.4vw,4.6rem); font-weight:700;
  letter-spacing:-.04em; line-height:1; color:var(--papel);
}
.ficha__terminos{
  margin:0; padding:0 clamp(20px,2.6vw,32px) clamp(22px,2.6vw,30px);
  display:grid; gap:0;
}
.ficha__terminos > div{
  display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:12px 22px; padding:14px 0; border-top:1px solid rgba(245,242,237,.10);
}
.ficha__terminos > div:first-child{ border-top:0 }
.ficha__terminos dt{
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#8E8880; margin:0;
}
.ficha__terminos dd{ margin:0; font-size:15px; line-height:1.55; color:#DCD6CD }
@media (max-width:600px){
  .ficha__terminos > div{ grid-template-columns:1fr; gap:5px; padding:13px 0 }
}

/* Cierre: una sola columna tras retirar el widget de auto-auditoría. */
.cierre__grid{ display:block }
.cierre__cuerpo p{ max-width:58ch }

/* ══════════════════════════════════════════════════════════════════════
   §7 EQUIPO · fondo cálido, retrato AL LADO del texto y halo dorado.
   Reescrito por pedido del cliente: rechazó el fondo negro y las
   tarjetas apiladas; pidió «que la silueta tenga un brillo dorado
   alrededor y al lado esté nuestra información».
   ══════════════════════════════════════════════════════════════════════ */
.seccion--calido{
  color:var(--tinta);
  background:
    radial-gradient(70% 55% at 84% 6%,  rgba(200,134,10,.16), transparent 62%),
    radial-gradient(66% 52% at 8% 96%,  rgba(200,134,10,.10), transparent 60%),
    linear-gradient(180deg,#F7F3EA 0%, #EFE8DA 55%, #EDE5D5 100%);
}
.seccion--calido h1,.seccion--calido h2,.seccion--calido h3{ color:var(--tinta) }
.seccion--calido .cejilla{ color:var(--ambar-texto-oscuro) }

.eq__cab{ max-width:64ch; margin-bottom:clamp(34px,4vw,52px) }
.eq__h2{ font-size:clamp(2.4rem,6vw,4rem); margin:0 0 18px; letter-spacing:-.035em }
.eq__intro{ font-size:clamp(1.04rem,1.45vw,1.18rem); line-height:1.62; color:#4A453F; margin:0 }

.eq__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:clamp(22px,3vw,40px);
}

/* Retrato a la izquierda, datos a la derecha. */
.eq__ficha{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; gap:clamp(18px,2.2vw,28px);
  padding:clamp(16px,2vw,22px);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(17,16,16,.09);
  border-radius:var(--r-card);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-out-expo);
}
.eq__ficha:hover{ border-color:rgba(200,134,10,.45); transform:translateY(-3px) }

/* Halo dorado: dos capas — un disco cálido detrás y un anillo fino.
   La silueta se recorta contra ellos y «sobresale». */
.eq__retrato{
  position:relative; width:clamp(104px,11vw,132px); aspect-ratio:1/1; flex:0 0 auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 62%, #F6E3BC 0%, #E7C88A 42%, #D8AE5E 72%, #C8860A 100%);
  box-shadow:
    0 0 0 1px rgba(200,134,10,.55),
    0 0 0 7px rgba(200,134,10,.13),
    0 14px 34px -12px rgba(140,92,6,.55);
}
.eq__retrato::after{           /* brillo superior, da volumen al disco */
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(165deg, rgba(255,255,255,.55), transparent 46%);
}
.eq__retrato picture{
  position:absolute; left:0; right:0; bottom:0; top:6%; z-index:2; display:block;
}
.eq__retrato picture img{
  width:100%; height:100%; object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 6px 12px rgba(90,58,4,.35));
}

.eq__datos{ padding:0 }
.eq__datos h3{ font-size:clamp(1.24rem,2vw,1.5rem); margin:0 0 6px; letter-spacing:-.03em }
.eq__rol{
  margin:0; font-size:12.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ambar-texto-oscuro);
}

/* Centrados y con su icono, como pidió el cliente. */
.eq__enlaces{
  list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
}
.eq__enlaces a{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; color:#4A453F; text-decoration:none;
  background:rgba(255,255,255,.62); border:1px solid rgba(17,16,16,.13);
  border-radius:999px; padding:9px 17px;
  transition:color var(--dur-rapida) var(--ease-soft),
             border-color var(--dur-rapida) var(--ease-soft),
             background var(--dur-rapida) var(--ease-soft);
}
.eq__enlaces a svg{ width:17px; height:17px; flex:0 0 auto; color:var(--ambar-texto-oscuro) }
.eq__enlaces a:hover{ color:var(--tinta); border-color:var(--ambar); background:#FFFFFF }

@media (prefers-reduced-motion: reduce){ .eq__ficha:hover{ transform:none } }
@media (max-width:420px){
  .eq__ficha{ grid-template-columns:1fr; justify-items:center; text-align:center }
}

/* ══════════════════════════════════════════════════════════════════════
   §7 PRECIO · tarjeta única centrada
   Anatomía tomada de estudios que sí publican tarifa: nombre del producto
   arriba, la cifra como elemento tipográfico dominante, moneda al 30% del
   tamaño, y las inclusiones DENTRO de la misma tarjeta (no en otra sección).
   ══════════════════════════════════════════════════════════════════════ */
#precio{
  background:
    radial-gradient(64% 46% at 50% 0%,  rgba(200,134,10,.15), transparent 62%),
    radial-gradient(50% 40% at 8% 100%, rgba(200,134,10,.09), transparent 60%),
    linear-gradient(180deg,#F7F5F1 0%,#EFEAE0 100%);
}
/* Textura de retícula: el cliente pidió que el fondo no se viera muerto. */
#precio::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(17,16,16,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,16,16,.05) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(78% 68% at 50% 46%, #000 26%, transparent 100%);
  mask-image:radial-gradient(78% 68% at 50% 46%, #000 26%, transparent 100%);
}
#precio .cejilla{ color:var(--ambar-texto-oscuro); margin-bottom:clamp(22px,2.6vw,32px) }

.tarjeta-precio{
  max-width:760px; margin-inline:auto;
  padding:clamp(40px,5.6vw,72px) clamp(28px,4.6vw,64px);
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFEFB 0%, #FFFCF6 55%, #FBF7EE 100%);
  border:3px solid var(--tinta); border-radius:10px;
  box-shadow:
    0 2px 0 0 rgba(200,134,10,.35) inset,
    0 34px 80px -40px rgba(17,16,16,.45);
  text-align:center;
}

.tp__producto{
  font-size:clamp(2rem,4.2vw,2.9rem); margin:0 0 10px;
  letter-spacing:-.03em; color:var(--tinta);
}
.tp__encuadre{ margin:0 0 clamp(22px,2.8vw,30px); font-size:14px; color:#6E6862; line-height:1.55 }

.tp__cifra{
  margin:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:clamp(3.6rem,10vw,6.6rem); line-height:.92; letter-spacing:-.05em;
  color:var(--tinta); font-variant-numeric:tabular-nums;
  display:flex; align-items:flex-start; justify-content:center; gap:.06em;
}
.tp__signo{ font-size:.62em; margin-top:.14em }
.tp__moneda{
  font-family:'DM Sans',system-ui,sans-serif; font-size:.30em; font-weight:700;
  letter-spacing:.08em; color:#7A7570; margin-left:.34em; margin-top:.22em;
}
.tp__calificador{ margin:12px 0 0; font-size:13px; color:#6E6862 }

.tp__datos{
  margin:clamp(24px,3vw,32px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.tp__datos > div{ padding:0 12px; border-left:1px solid rgba(17,16,16,.10) }
.tp__datos > div:first-child{ border-left:0 }
.tp__datos dt{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#7A7570; margin:0 0 5px;
}
.tp__datos dd{ margin:0; font-size:14px; font-weight:600; color:var(--tinta); line-height:1.4 }
@media (max-width:560px){
  .tp__datos{ grid-template-columns:1fr; gap:16px }
  .tp__datos > div{ border-left:0; padding:0 }
}

.tp__linea{ border:0; border-top:1px solid rgba(17,16,16,.10); margin:clamp(24px,3vw,30px) 0 }

.tp__rotulo{
  margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#7A7570; text-align:left;
}
.tp__incluye{ list-style:none; margin:0; padding:0; display:grid; gap:11px; text-align:left }
.tp__incluye li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:15px; line-height:1.5; color:#2B2723;
}
.tp__check{ flex:0 0 auto; margin-top:2px; color:var(--ambar) }

.tp__excluye{
  margin:clamp(20px,2.4vw,26px) 0 0; font-size:13px; color:#7A7570;
  text-align:left; line-height:1.55;
}

.tp__cta{ width:100%; margin-top:clamp(24px,3vw,30px) }
.tp__micro{ margin:14px 0 0; font-size:13px; color:#6E6862; line-height:1.5 }
.tp__garantia{
  margin:14px 0 0; padding-top:14px; border-top:1px solid rgba(17,16,16,.08);
  font-size:13px; line-height:1.55; color:rgba(17,16,16,.72);
}

/* Precio anterior tachado: es una promoción real, no un ancla inventada. */
.tp__antes{
  margin:0 0 6px; display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:clamp(1.05rem,1.9vw,1.32rem); color:#8A847C;
}
.tp__antes s{ text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:#B9483A }
.tp__antes span{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#8A847C; border:1px solid rgba(17,16,16,.16); border-radius:999px; padding:3px 10px;
}

/* ── DIAGNÓSTICO · columna visual «la fuga» ────────────────────────────
   Rellena el vacío que el cliente marcó en rojo: foto + recorrido en
   tres pasos, para que la sección no se lea como un muro de texto. */
.fuga{ align-self:start; display:grid; gap:20px }

.fuga__foto{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  border:1px solid rgba(17,16,16,.12); background:#fff;
  box-shadow:0 22px 48px -26px rgba(17,16,16,.34);
}
/* La foto original venía muy oscura: se aclara y se baja el velo inferior
   para que se lea sin necesidad de cambiarla. */
.fuga__foto img{
  width:100%; height:auto; display:block;
  filter:brightness(1.42) contrast(.94) saturate(1.14);
}
.fuga__foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,16,16,0) 52%, rgba(17,16,16,.34));
}
.fuga__sello{
  position:absolute; left:16px; bottom:14px; z-index:2;
  background:var(--tinta); color:#F5F2ED;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:7px 14px; border-radius:4px;
}

.fuga__pasos{ list-style:none; margin:0; padding:0; counter-reset:f; display:grid; gap:0 }
.fuga__pasos li{
  counter-increment:f; position:relative;
  padding:15px 0 15px 46px;
  border-top:1px solid rgba(17,16,16,.10);
}
.fuga__pasos li:first-child{ border-top:0 }
.fuga__pasos li::before{
  content:counter(f); position:absolute; left:0; top:14px;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Bricolage Grotesque',sans-serif; font-size:13px; font-weight:700;
  color:var(--ambar-texto-oscuro);
  border:1px solid rgba(200,134,10,.45); background:rgba(200,134,10,.10);
}
/* Línea que conecta los pasos: hace legible que es un recorrido. */
.fuga__pasos li:not(:last-child)::after{
  content:''; position:absolute; left:13.5px; top:44px; bottom:2px;
  width:1px; background:rgba(200,134,10,.30);
}
.fuga__pasos b{ display:block; font-size:1.02rem; color:var(--tinta); margin-bottom:3px }
.fuga__pasos span{ display:block; font-size:.94rem; color:#5C564E; line-height:1.5 }

.fuga__remate{
  margin:0; padding:16px 18px; border-radius:var(--r-card);
  background:rgba(200,134,10,.09); border-left:3px solid var(--ambar);
  font-size:.98rem; line-height:1.55; color:#2B2723;
}

/* ══════════════════════════════════════════════════════════════════════
   VIDA · animaciones y figuras de fondo
   El cliente dijo que la página se siente muerta. Se añade: entrada
   escalonada más marcada, figuras geométricas suaves de fondo, y
   micro-movimiento en tarjetas. Todo se apaga con prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

/* 1 · Entrada más notoria (antes era casi imperceptible) */
.js-anim .anim{
  opacity:0; transform:translateY(26px);
  transition:opacity .72s var(--ease-out-expo), transform .72s var(--ease-out-expo);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js-anim .anim.en-vista{ opacity:1; transform:none }
.js-anim .anim--der{ transform:translateX(34px) }
.js-anim .anim--zoom{ transform:scale(.955) }

/* 2 · Figuras de fondo: círculos y arcos que respiran */
.figura{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  animation:respirar 14s ease-in-out infinite;
}
.figura--anillo{
  border:1px solid rgba(200,134,10,.26); background:transparent;
}
.figura--disco{
  background:radial-gradient(circle at 34% 30%, rgba(200,134,10,.16), transparent 68%);
}
.figura--a{ width:min(46vw,520px); aspect-ratio:1; top:-8%; right:-9%; animation-delay:-2s }
.figura--b{ width:min(34vw,380px); aspect-ratio:1; bottom:-12%; left:-8%; animation-delay:-7s }
.figura--c{ width:min(22vw,240px); aspect-ratio:1; top:38%; left:6%;   animation-delay:-4s }
@keyframes respirar{
  0%,100%{ transform:translate3d(0,0,0) scale(1);      opacity:.9 }
  50%    { transform:translate3d(0,-26px,0) scale(1.06); opacity:.65 }
}

/* 3 · Micro-movimiento al pasar el cursor por tarjetas */
.of__tarjeta,.faq__item,.eq__ficha{
  transition:transform .42s var(--ease-out-expo),
             box-shadow .42s var(--ease-soft),
             border-color .42s var(--ease-soft);
}
.of__tarjeta:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(17,16,16,.32) }

/* 4 · Subrayado animado del título de sección */
.cejilla::before{
  content:''; display:inline-block; width:34px; height:2px; margin-right:2px;
  background:currentColor; transform-origin:left center; transform:scaleX(0);
  transition:transform .7s var(--ease-out-expo);
  transition-delay:calc(var(--i,0) * 90ms + 120ms);
}
.anim.en-vista .cejilla::before,
.cejilla.en-vista::before,
.en-vista .cejilla::before{ transform:scaleX(1) }

@media (prefers-reduced-motion: reduce){
  .js-anim .anim{ opacity:1!important; transform:none!important; transition:none!important }
  .figura{ animation:none }
  .of__tarjeta:hover,.eq__ficha:hover{ transform:none }
  .cejilla::before{ transform:scaleX(1); transition:none }
}

/* ══════════════════════════════════════════════════════════════════════
   CIERRE · conversación animada
   El cliente dijo que esta parte estaba muerta. Se añade una maqueta de
   chat que se escribe sola: muestra literalmente la acción que se pide.
   ══════════════════════════════════════════════════════════════════════ */
.cierre__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,4.6vw,68px); align-items:center;
}
@media (max-width:940px){ .cierre__grid{ grid-template-columns:1fr; gap:38px } }

.cierre__visual{ display:grid; gap:14px; justify-items:center }

.chat{
  width:min(100%,420px);
  background:#0F1B14; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px -34px rgba(30,18,0,.75), 0 2px 0 rgba(255,255,255,.06) inset;
}
.chat__barra{
  display:flex; align-items:center; gap:9px;
  padding:13px 16px; background:#132318; border-bottom:1px solid rgba(255,255,255,.07);
}
.chat__punto{
  width:9px; height:9px; border-radius:50%; background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.55); animation:latir 2.4s ease-out infinite;
}
@keyframes latir{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55) }
  70%{ box-shadow:0 0 0 9px rgba(74,222,128,0) }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0) }
}
.chat__quien{ font-size:13px; font-weight:600; color:#CFE8D8; letter-spacing:.01em }

.chat__cuerpo{ padding:18px 16px 22px; display:grid; gap:10px }

.burbuja{
  margin:0; max-width:82%; padding:11px 14px; font-size:14.2px; line-height:1.45;
  border-radius:16px; opacity:0; transform:translateY(10px) scale(.98);
  animation:entra-burbuja .5s var(--ease-out-expo) forwards;
}
.burbuja--suya{
  justify-self:start; background:#1E3327; color:#E6F2EA;
  border-bottom-left-radius:5px;
}
.burbuja--nuestra{
  justify-self:end; background:#1E6B57; color:#FFFFFF;
  border-bottom-right-radius:5px;
}
.b1{ animation-delay:.35s } .b2{ animation-delay:1.15s }
.b3{ animation-delay:1.95s } .b4{ animation-delay:2.75s }
@keyframes entra-burbuja{ to{ opacity:1; transform:none } }

.escribiendo{
  justify-self:end; margin:0; display:flex; gap:5px;
  padding:13px 16px; border-radius:16px; background:#1E3327;
  opacity:0; animation:entra-burbuja .4s var(--ease-out-expo) forwards;
}
.b5{ animation-delay:3.5s }
.escribiendo i{
  width:6px; height:6px; border-radius:50%; background:#8FC9A8;
  animation:puntear 1.3s ease-in-out infinite;
}
.escribiendo i:nth-child(2){ animation-delay:.18s }
.escribiendo i:nth-child(3){ animation-delay:.36s }
@keyframes puntear{
  0%,60%,100%{ transform:translateY(0);   opacity:.45 }
  30%        { transform:translateY(-5px); opacity:1 }
}

.cierre__pie{
  margin:0; font-size:13.5px; color:rgba(17,16,16,.72); text-align:center; max-width:36ch;
}

@media (prefers-reduced-motion: reduce){
  .burbuja,.escribiendo{ opacity:1; transform:none; animation:none }
  .escribiendo i,.chat__punto{ animation:none }
}

/* Pie de la maqueta: deja explícito que es un trabajo real y que se puede abrir */
.mock__pie{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:16px; font-size:13px; font-weight:600; color:#CFC9C0;
  letter-spacing:.01em; transition:color var(--dur-rapida) var(--ease-soft);
}
.mock__punto{
  width:8px; height:8px; border-radius:50%; background:#FFFFFF; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,255,255,.55); animation:latir-blanco 2.4s ease-out infinite;
}
@keyframes latir-blanco{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55) }
  70%{ box-shadow:0 0 0 9px rgba(255,255,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) }
}
.mock-stage:hover .mock__pie,
.mock-stage:focus-visible .mock__pie{ color:var(--papel) }
.mock-stage:focus-visible{ outline:3px solid var(--ambar); outline-offset:8px; border-radius:24px }
@media (prefers-reduced-motion: reduce){ .mock__punto{ animation:none } }

/* Lado «después» del comparador: captura real de la landing de IBONNE. */
.mp--real{ width:100%; height:100%; background:#0E1A2B }
.mp--real picture{ display:block; width:100%; height:100% }
.mp--real img{ width:100%; height:100%; object-fit:cover; object-position:top center }

/* ══════════════════════════════════════════════════════════════════════
   AJUSTE DE ALTURA · que cada etapa quepa en una pantalla
   Se comprimen espaciados y escalas en las secciones que se pasaban.
   Nada de contenido se elimina; solo se aprieta el ritmo vertical.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:1001px) and (min-height:700px){
  #precio, #mecanismo, #objeciones, #oferta, #diagnostico, #portafolio, #equipo, #cierre{
    --sec-y:clamp(48px,5.4vh,76px);
  }

  /* Precio: la tarjeta era lo que más pesaba */
  .tarjeta-precio{ padding:clamp(26px,3.4vh,40px) clamp(26px,3.4vw,52px) }
  .tp__cifra{ font-size:clamp(3rem,7.6vh,5rem) }
  .tp__producto{ font-size:clamp(1.7rem,3.4vh,2.3rem); margin-bottom:6px }
  .tp__encuadre{ margin-bottom:clamp(14px,2vh,20px) }
  .tp__datos{ margin-top:clamp(16px,2.2vh,24px) }
  .tp__linea{ margin:clamp(16px,2.2vh,22px) 0 }
  /* Las siete inclusiones en dos columnas: en una sola, la tarjeta se
     pasaba de pantalla por unos 100px. */
  .tp__incluye{ gap:8px 26px; grid-template-columns:1fr 1fr; text-align:left }
  .tp__incluye li{ font-size:14.5px }
  .tp__cta{ margin-top:clamp(16px,2.2vh,24px) }
  .tp__micro,.tp__garantia{ margin-top:10px; font-size:12.5px }
  .tp__garantia{ padding-top:10px }

  /* Mecanismo: era el peor (1,5 pantallas). El comparador se dimensiona
     por ALTO —no por ancho— para que respete el 16/9 y quede centrado. */
  .mec__cab{ margin-bottom:clamp(18px,2.4vh,28px) }
  .mec__leyenda{ gap:10px; margin-bottom:12px }
  .mec__pieza{ padding:11px 14px }
  /* El alto manda: el ancho del marco se deriva de él (16/9), así el
     comparador cabe en pantalla y la leyenda mide exactamente lo mismo. */
  .mec__marco{ --cmp-h:min(50vh, 520px); width:min(100%, calc(var(--cmp-h) * 16 / 9)) }
  .comparador{ height:var(--cmp-h); width:100%; aspect-ratio:auto }

  /* Resto: apretar cabeceras */
  .diag__h2,.porta__h2,.of__h2,.obj__h2,.eq__h2,.cierre__h2{
    font-size:clamp(1.9rem,4.4vh,3rem);
  }
  .cejilla{ margin-bottom:14px }
  .fuga{ gap:14px }
  .fuga__pasos li{ padding:11px 0 11px 46px }
}