/* ── tipografia autoalojada ──────────────────────────────── */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/activos/fraunces.woff2) format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/activos/inter.woff2) format('woff2');
}

:root{
  /* tinta */
  --tinta:#0E1A2B; --tinta-2:#1B2C42; --gris:#55647A; --gris-2:#8494A8;
  /* papel */
  --papel:#FFFFFF; --papel-2:#F6F8FC; --papel-3:#EFF3F9; --linea:#E2E9F2;
  /* marca */
  --naranja:#E8620C; --naranja-2:#C24E05; --naranja-luz:#FFF1E6;
  --azul:#2E5C98; --azul-2:#22477A; --azul-luz:#EBF2FB;
  /* sombras en capas: lo que separa un sitio pro de uno plano */
  --s1:0 1px 2px rgba(14,26,43,.04), 0 2px 6px rgba(14,26,43,.04);
  --s2:0 2px 4px rgba(14,26,43,.04), 0 8px 20px rgba(14,26,43,.06);
  --s3:0 4px 8px rgba(14,26,43,.05), 0 18px 44px rgba(14,26,43,.10);
  --radio:14px;
  --ancho:1120px; --lectura:680px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--papel);color:var(--tinta);
  font-size:17px;line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:600;letter-spacing:-.02em;line-height:1.15;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
a{color:var(--azul)}
::selection{background:var(--naranja);color:#fff}

.ancho{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.lectura{max-width:var(--lectura);margin:0 auto;padding:0 24px}

/* ── cabecera ────────────────────────────────────────────── */
header.sitio{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;
}
header.sitio.pegado{border-bottom-color:var(--linea);box-shadow:var(--s1)}
header.sitio .fila{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--ancho);margin:0 auto;padding:13px 24px;
}
.marca{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--tinta);font-weight:700;font-size:19.5px;letter-spacing:-.025em;
}
.marca .iso{width:27px;height:27px;flex:0 0 27px;transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.marca:hover .iso{transform:rotate(-8deg) scale(1.06)}
.marca b{font-weight:700}
nav.principal{display:flex;align-items:center;gap:4px}
nav.principal a{
  color:var(--gris);text-decoration:none;font-size:15px;font-weight:500;
  padding:8px 13px;border-radius:8px;transition:color .15s,background .15s;
}
nav.principal a:hover{color:var(--tinta);background:var(--papel-2)}
nav.principal a.activo{color:var(--tinta);font-weight:600}
.nav-cta{margin-left:6px}

/* ── botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:11px 20px;border-radius:10px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .14s cubic-bezier(.34,1.3,.64,1),box-shadow .18s,background .18s;
}
.btn:active{transform:translateY(1px)}
.btn.primario{
  background:linear-gradient(180deg,#F0710F,var(--naranja));color:#fff;
  box-shadow:0 1px 2px rgba(194,78,5,.30),0 6px 16px rgba(232,98,12,.26),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primario:hover{
  box-shadow:0 2px 4px rgba(194,78,5,.32),0 12px 26px rgba(232,98,12,.34),
             inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(-1.5px);
}
.btn.fantasma{background:var(--papel);color:var(--tinta);border-color:var(--linea);box-shadow:var(--s1)}
.btn.fantasma:hover{border-color:#CBD7E6;box-shadow:var(--s2);transform:translateY(-1.5px)}
.btn.texto{background:transparent;color:var(--azul);padding:11px 4px}
.btn.texto:hover{color:var(--azul-2);gap:11px}
.btn.grande{font-size:16px;padding:14px 26px;border-radius:11px}
.btn svg{width:16px;height:16px;flex:0 0 16px}

/* ── etiquetas ───────────────────────────────────────────── */
.pildora{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  padding:6px 13px 6px 10px;border-radius:100px;
  background:var(--papel);border:1px solid var(--linea);color:var(--gris);
  box-shadow:var(--s1);
}
.pildora .pt{width:7px;height:7px;border-radius:50%;background:#12A150;
  box-shadow:0 0 0 3px rgba(18,161,80,.16);animation:latido 2.4s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.45}}
.etiqueta{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--naranja-2);background:var(--naranja-luz);
  padding:5px 10px;border-radius:6px;
}
.etiqueta.azul{color:var(--azul-2);background:var(--azul-luz)}
.etiqueta.gris{color:var(--gris);background:var(--papel-3)}

/* ── portada ─────────────────────────────────────────────── */
.hero{position:relative;padding:76px 0 84px;overflow:hidden}
.hero::before{  /* luz de malla */
  content:"";position:absolute;inset:-40% -20% auto -20%;height:150%;z-index:-2;
  background:
    radial-gradient(46% 40% at 18% 8%, rgba(232,98,12,.13), transparent 62%),
    radial-gradient(42% 38% at 82% 4%, rgba(46,92,152,.15), transparent 64%),
    radial-gradient(50% 44% at 52% 52%, rgba(46,92,152,.05), transparent 70%);
  filter:blur(6px);
}
.hero::after{  /* rejilla tenue */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:64px 64px;opacity:.42;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 34%,#000,transparent 78%);
          mask-image:radial-gradient(78% 62% at 50% 34%,#000,transparent 78%);
}
.hero .rejilla-hero{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:54px;align-items:center;
}
.hero{padding:84px 0 96px}
.hero h1{
  font-size:clamp(40px,5.8vw,66px);line-height:1.02;letter-spacing:-.038em;
  margin:22px 0 22px;font-weight:600;
}
.hero h1 .marcado{
  position:relative;white-space:nowrap;color:var(--naranja-2);
  font-variation-settings:"SOFT" 0,"WONK" 1;font-style:italic;
}
.hero h1 .marcado::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.30em;
  background:linear-gradient(90deg,rgba(232,98,12,.26),rgba(232,98,12,.10));
  border-radius:3px;z-index:-1;
}
.hero .entradilla{font-size:19.5px;line-height:1.6;color:var(--gris);max-width:50ch}
.hero .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.bajo-boton{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:20px;font-size:13.5px;color:var(--gris-2);
}
.bajo-boton span{display:inline-flex;align-items:center;gap:6px}
.bajo-boton svg{width:14px;height:14px;color:#12A150}

/* ── maqueta del panel (CSS puro, no imagen) ─────────────── */
.maqueta{position:relative}
.maqueta .ventana{
  background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  box-shadow:var(--s3);overflow:hidden;transform:perspective(1400px) rotateY(-7deg) rotateX(2.5deg);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.maqueta:hover .ventana{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-4px)}
.maqueta .barra{
  display:flex;align-items:center;gap:9px;padding:11px 14px;
  background:var(--papel-2);border-bottom:1px solid var(--linea);
}
.maqueta .luces{display:flex;gap:6px}
.maqueta .luces i{width:10px;height:10px;border-radius:50%;background:#DCE3EC;display:block}
.maqueta .titulo-v{font-size:12px;font-weight:600;color:var(--gris-2);letter-spacing:.01em}
.maqueta .cuerpo{padding:16px;display:grid;gap:11px;background:var(--papel)}
.bloque-soap{border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.bloque-soap .cab{
  display:flex;align-items:center;gap:8px;padding:8px 11px;
  background:var(--papel-2);border-bottom:1px solid var(--linea);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
}
.bloque-soap .cab .l{
  width:19px;height:19px;border-radius:5px;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;letter-spacing:0;
}
.bloque-soap .txt{padding:10px 11px;display:grid;gap:6px}
.bloque-soap .txt i{display:block;height:7px;border-radius:4px;background:var(--papel-3)}
.bloque-soap .txt i.c1{width:100%}.bloque-soap .txt i.c2{width:88%}
.bloque-soap .txt i.c3{width:71%}.bloque-soap .txt i.c4{width:94%}
.chip-anon{
  display:inline-block;padding:1px 7px;border-radius:5px;font-size:10.5px;font-weight:700;
  background:var(--azul-luz);color:var(--azul-2);letter-spacing:.02em;
}
.flotante{
  position:absolute;background:var(--papel);border:1px solid var(--linea);
  border-radius:11px;padding:11px 14px;box-shadow:var(--s3);
  font-size:12.5px;font-weight:600;color:var(--tinta);
  display:flex;align-items:center;gap:9px;
}
.flotante svg{width:16px;height:16px;flex:0 0 16px}
.flotante.f1{top:-16px;right:-6px;animation:flota 5.5s ease-in-out infinite}
.flotante.f2{bottom:-18px;left:-22px;animation:flota 5.5s ease-in-out .9s infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ── franja de credibilidad ──────────────────────────────── */
.franja{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:var(--papel-2);padding:22px 0}
.franja .fila{display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap;
  font-size:13.5px;color:var(--gris);font-weight:500}
.franja .fila b{color:var(--tinta);font-weight:650}
.franja .sep{width:1px;height:20px;background:var(--linea)}

/* ── secciones ───────────────────────────────────────────── */
/* Ritmo vertical. Antes todas las secciones median 82px y el resultado
   era una pila de bloques con el mismo peso: nada destacaba. Ahora la
   primera respira mas que las siguientes y las franjas grises cortan. */
section{padding:96px 0}
section + section{padding-top:88px}
section.gris{
  background:var(--papel-2);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
section.compacta{padding:64px 0}
.cabecera-sec{max-width:62ch;margin-bottom:48px}
.cabecera-sec.centro{margin-left:auto;margin-right:auto;text-align:center}
/* Titulos de seccion mas contenidos que el h1 del hero: la diferencia
   de tamano es lo que crea jerarquia. Antes casi competian. */
.cabecera-sec h1,.cabecera-sec h2{font-size:clamp(26px,3.1vw,35px);letter-spacing:-.028em;margin:13px 0 14px}
.cabecera-sec p{font-size:18px;color:var(--gris);line-height:1.6}

/* ── el diagrama: el argumento de venta hecho imagen ─────── */
.diagrama{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:0;
  background:var(--papel);border:1px solid var(--linea);border-radius:18px;
  padding:34px 28px;box-shadow:var(--s2);
}
.nodo{text-align:center;display:grid;gap:10px;justify-items:center}
.nodo .caja{
  width:80px;height:80px;border-radius:18px;display:grid;place-items:center;
  background:var(--papel-2);border:1px solid var(--linea);box-shadow:var(--s1);
}
.nodo .caja svg{width:34px;height:34px}
.nodo b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.nodo span{font-size:13px;color:var(--gris-2);line-height:1.45;max-width:20ch}
.nodo.tachado .caja{border-style:dashed;border-color:#E4B4B4;background:#FEF6F6;position:relative}
.nodo.tachado .caja::after{
  content:"";position:absolute;width:112%;height:2px;background:#D96A6A;
  transform:rotate(-45deg);border-radius:2px;
}
.flecha{display:grid;place-items:center;padding:0 6px;position:relative;min-width:74px}
.flecha .linea{width:100%;height:2px;background:linear-gradient(90deg,var(--linea),#C9D6E6,var(--linea));position:relative}
.flecha .linea::after{
  content:"";position:absolute;right:-1px;top:-4px;width:0;height:0;
  border-left:7px solid #C9D6E6;border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.flecha .pulso{
  position:absolute;left:0;width:8px;height:8px;border-radius:50%;background:var(--naranja);
  box-shadow:0 0 0 4px rgba(232,98,12,.18);animation:viaja 2.8s linear infinite;
}
.flecha .pulso.b{animation-delay:1.4s}
@keyframes viaja{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.flecha em{position:absolute;top:-26px;font-size:11.5px;font-style:normal;font-weight:650;
  color:var(--gris-2);white-space:nowrap;letter-spacing:.02em}

/* ── tarjetas ────────────────────────────────────────────── */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:22px}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.tarjeta{
  position:relative;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:26px;box-shadow:var(--s1);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .22s;
}
.tarjeta::before{  /* filo superior que se enciende */
  content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--naranja),var(--azul));
  opacity:0;transition:opacity .22s;
}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--s3);border-color:#D3DEEC}
.tarjeta:hover::before{opacity:1}
.tarjeta .icono{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--naranja-luz);margin-bottom:15px;
}
.tarjeta .icono svg{width:21px;height:21px;color:var(--naranja-2)}
.tarjeta .icono.azul{background:var(--azul-luz)}
.tarjeta .icono.azul svg{color:var(--azul-2)}
.tarjeta h3{font-size:19px;margin-bottom:8px;letter-spacing:-.02em}
.tarjeta p{font-size:15.5px;color:var(--gris);line-height:1.6}
.tarjeta.apagada{opacity:.62;border-style:dashed;box-shadow:none}
.tarjeta.apagada:hover{transform:none;box-shadow:none;border-color:var(--linea)}
.tarjeta.apagada::before{display:none}
.tarjeta a.cubre{position:absolute;inset:0;border-radius:var(--radio)}

/* cifras */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.cifra{background:var(--papel);padding:26px 24px}
.cifra b{display:block;font-family:'Fraunces',Georgia,serif;font-size:38px;font-weight:600;
  letter-spacing:-.035em;line-height:1;margin-bottom:9px;color:var(--tinta)}
.cifra b em{font-style:normal;color:var(--naranja)}
.cifra span{font-size:14.5px;color:var(--gris);line-height:1.5;display:block}

/* lista con palomita */
.lista-check{display:grid;gap:13px;margin:24px 0}
.lista-check li{display:flex;gap:12px;align-items:flex-start;list-style:none;font-size:16px;line-height:1.55}
.lista-check svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;color:var(--naranja)}

/* bloque de codigo / prueba tecnica */
.consola{
  background:#0E1A2B;border-radius:13px;overflow:hidden;box-shadow:var(--s3);
  border:1px solid #1E3049;
}
.consola .cab{display:flex;align-items:center;gap:8px;padding:11px 15px;
  background:#152438;border-bottom:1px solid #1E3049}
.consola .cab i{width:10px;height:10px;border-radius:50%;background:#2B4160;display:block}
.consola .cab span{font-size:12px;color:#7C93AE;font-weight:600;margin-left:6px}
.consola pre{
  padding:18px;overflow-x:auto;font-size:13.5px;line-height:1.75;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;color:#C7D6E8;
}
.consola .v{color:#5BD9A0}.consola .n{color:#7C93AE}.consola .o{color:#FF9B57}

/* ── articulo ────────────────────────────────────────────── */
article{padding:52px 0 84px}
.migas{font-size:13.5px;color:var(--gris-2);margin-bottom:20px}
.migas a{color:var(--gris-2);text-decoration:none}
.migas a:hover{color:var(--azul)}
article h1{font-size:clamp(31px,4.6vw,45px);line-height:1.1;letter-spacing:-.032em;margin-bottom:18px}
article h2{font-size:27px;margin:52px 0 16px;letter-spacing:-.025em}
article h3{font-size:20.5px;margin:38px 0 12px;letter-spacing:-.02em}
article p{margin:19px 0;font-size:17.5px;line-height:1.75;color:#22323F}
article ul,article ol{margin:19px 0 19px 22px}
article li{margin:9px 0;font-size:17.5px;line-height:1.7;color:#22323F;padding-left:4px}
article li::marker{color:var(--naranja);font-weight:700}
article hr{border:none;border-top:1px solid var(--linea);margin:46px 0}
article a{color:var(--azul);text-decoration:underline;text-decoration-color:#B7CBE4;
  text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color .15s}
article a:hover{text-decoration-color:var(--azul)}
article strong{font-weight:650;color:var(--tinta)}
article > p:first-of-type{font-size:20px;line-height:1.65;color:var(--gris)}

blockquote{
  position:relative;margin:34px 0;padding:22px 26px 22px 30px;
  background:linear-gradient(180deg,var(--papel-2),var(--papel));
  border:1px solid var(--linea);border-left:3px solid var(--naranja);
  border-radius:0 12px 12px 0;color:var(--tinta-2);font-size:17px;line-height:1.65;
}
blockquote p{margin:0;font-size:17px;color:var(--tinta-2)}
code{background:var(--papel-3);padding:2.5px 7px;border-radius:5px;font-size:14.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--azul-2);
  border:1px solid var(--linea)}
.tabla{overflow-x:auto;margin:30px 0;border:1px solid var(--linea);
  border-radius:12px;box-shadow:var(--s1)}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
th{background:var(--papel-2);font-weight:650;font-size:13.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--gris)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--papel-2)}

.meta-art{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:14px;color:var(--gris-2);margin-bottom:34px;
  padding-bottom:22px;border-bottom:1px solid var(--linea);
}
.meta-art .punto{width:3px;height:3px;border-radius:50%;background:var(--gris-2)}

/* llamada final */
.cta{
  position:relative;overflow:hidden;margin:56px 0 0;padding:34px;
  border-radius:18px;border:1px solid var(--linea);
  background:linear-gradient(135deg,#fff,var(--papel-2));box-shadow:var(--s2);
}
.cta::before{
  content:"";position:absolute;top:-60%;right:-14%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,98,12,.13),transparent 68%);
}
.cta .interior{position:relative}
.cta .etiqueta{margin-bottom:13px}
.cta h3{font-size:23px;margin-bottom:10px;letter-spacing:-.025em}
.cta p{font-size:16px;color:var(--gris);margin:0 0 20px;max-width:54ch;line-height:1.6}

/* ── tabla comparativa ───────────────────────────────────── */
.comparativa table{font-size:15px}
.comparativa th{font-size:12.5px;white-space:nowrap}
.comparativa td{vertical-align:middle}
.comparativa td:first-child{font-weight:600;color:var(--tinta)}
.comparativa th.col-yo,.comparativa td.col-yo{
  background:var(--naranja-luz);border-left:2px solid var(--naranja);
  border-right:2px solid var(--naranja);
}
.comparativa thead th.col-yo{color:var(--naranja-2);border-top:2px solid var(--naranja)}
.comparativa tbody tr:last-child td.col-yo{border-bottom:2px solid var(--naranja)}
.comparativa .mal{color:#B03A3A;font-weight:650}
.comparativa .bien{color:#12A150;font-weight:700}
.comparativa .no{color:var(--gris-2)}
.comparativa tbody tr:hover td.col-yo{background:#FFE8D6}

/* ── antes / despues ─────────────────────────────────────── */
.antes-despues{
  display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;
}
.col-ad{
  background:var(--papel);border:1px solid var(--linea);border-radius:14px;
  box-shadow:var(--s1);overflow:hidden;display:flex;flex-direction:column;
}
.cab-ad{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--linea);background:var(--papel-2);
}
.tiempo-ad{font-size:12.5px;font-weight:650;color:var(--gris-2)}
.crudo{padding:20px;font-size:14.5px;line-height:1.7;color:var(--gris);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.crudo p{margin:0 0 14px}
.crudo p:last-child{margin-bottom:0}
.nota-ad{padding:16px;display:grid;gap:12px}
.bloque-ad{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start}
.letra-ad{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  color:#fff;font-size:12.5px;font-weight:800;
}
.bloque-ad b{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);margin-bottom:4px}
.bloque-ad p{font-size:14px;line-height:1.6;color:var(--tinta);margin:0}
.bloque-ad em{color:var(--gris);font-style:italic}
/* La flecha entre las dos columnas. El svg necesita medidas propias y
   flex:0 0 auto: sin eso el navegador lo estira a todo el hueco de la
   rejilla y ocupa media pantalla. Pasó en produccion. */
.flecha-ad{
  display:flex;align-items:center;justify-content:center;
  color:var(--naranja);width:44px;flex:0 0 44px;align-self:center;
}
.flecha-ad svg{
  width:26px!important;height:26px!important;
  min-width:26px;max-width:26px;flex:0 0 26px;display:block;
}

@media(max-width:900px){
  .antes-despues{grid-template-columns:1fr;gap:14px}
  .flecha-ad{transform:rotate(90deg);padding:4px 0}
}

/* ── formulario de captura ───────────────────────────────── */
.captura{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.captura input[type=email]{
  flex:1 1 240px;min-width:0;padding:12px 15px;font-size:15.5px;
  font-family:'Inter',sans-serif;color:var(--tinta);
  background:var(--papel);border:1px solid var(--linea);border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.captura input[type=email]:focus{
  outline:none;border-color:var(--naranja);
  box-shadow:0 0 0 3px rgba(232,98,12,.14);
}
.captura input[type=email]::placeholder{color:var(--gris-2)}
.captura .btn{flex:0 0 auto}

/* ── listado del blog ────────────────────────────────────── */
.entrada{
  position:relative;display:grid;grid-template-columns:96px 1fr;gap:26px;
  padding:28px 24px;margin:0 -24px;border-radius:14px;
  transition:background .18s;border-bottom:1px solid var(--linea);
}
.entrada:hover{background:var(--papel-2)}
.entrada:last-child{border-bottom:none}
.entrada .fechero{
  display:grid;place-content:start center;text-align:center;padding-top:4px;
}
.entrada .fechero .d{font-family:'Fraunces',Georgia,serif;font-size:29px;font-weight:600;
  line-height:1;letter-spacing:-.03em}
.entrada .fechero .m{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris-2);margin-top:5px}
.entrada h2{font-size:22.5px;margin:9px 0 8px;letter-spacing:-.025em;line-height:1.25}
.entrada h2 a{color:var(--tinta);text-decoration:none}
.entrada:hover h2 a{color:var(--azul-2)}
.entrada p{font-size:15.5px;color:var(--gris);line-height:1.6}
.entrada .pie{display:flex;align-items:center;gap:12px;margin-top:12px;
  font-size:13px;color:var(--gris-2)}
.entrada a.cubre{position:absolute;inset:0;border-radius:14px}

/* ── pie ─────────────────────────────────────────────────── */
footer.sitio{
  background:var(--tinta);color:#9DB0C6;margin-top:0;padding:56px 0 30px;
  font-size:14.5px;
}
footer.sitio .rejilla-pie{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:38px;border-bottom:1px solid #1E3049;
}
footer.sitio .marca{color:#fff;font-size:19px;margin-bottom:13px}
footer.sitio .marca .iso{width:26px;height:26px;flex:0 0 26px}
footer.sitio p{color:#8296AE;max-width:34ch;line-height:1.6;font-size:14.5px}
footer.sitio h4{color:#fff;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:15px}
footer.sitio ul{list-style:none;display:grid;gap:10px}
footer.sitio a{color:#9DB0C6;text-decoration:none;transition:color .15s}
footer.sitio a:hover{color:#fff}
footer.sitio .abajo{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;padding-top:24px;font-size:13.5px;color:#6E829A}

.idiomas{display:flex;gap:8px;flex-wrap:wrap}
.idiomas a{padding:6px 13px;border:1px solid var(--linea);border-radius:8px;
  text-decoration:none;font-size:13.5px;color:var(--gris);background:var(--papel);
  font-weight:500;transition:all .15s}
.idiomas a:hover{border-color:#C9D6E6;color:var(--tinta)}
.idiomas a.activo{background:var(--tinta);color:#fff;border-color:var(--tinta)}

/* ── aparicion al desplazar ──────────────────────────────── */
.rev{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,1,.36,1),
  transform .6s cubic-bezier(.22,1,.36,1)}
.rev.visible{opacity:1;transform:none}

/* ── adaptable ───────────────────────────────────────────── */
@media(max-width:940px){
  .hero .rejilla-hero{grid-template-columns:1fr;gap:46px}
  .maqueta .ventana{transform:none}
  .maqueta:hover .ventana{transform:translateY(-3px)}
  .flotante.f2{left:auto;right:12px;bottom:-14px}
  footer.sitio .rejilla-pie{grid-template-columns:1fr 1fr;gap:32px}
  .diagrama{grid-template-columns:1fr;gap:20px;padding:28px 22px}
  .flecha{min-height:56px;min-width:0;width:100%}
  .flecha .linea{width:2px;height:44px;margin:0 auto;
    background:linear-gradient(180deg,var(--linea),#C9D6E6,var(--linea))}
  .flecha .linea::after{right:-4px;top:auto;bottom:-1px;
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:7px solid #C9D6E6;border-bottom:none}
  .flecha .pulso{animation:viajaV 2.8s linear infinite;left:calc(50% - 4px)}
  @keyframes viajaV{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:36px;opacity:0}}
  .flecha em{position:static;margin-top:8px}
}
@media(max-width:640px){
  body{font-size:16.5px}
  section{padding:58px 0}
  .hero{padding:52px 0 62px}
  /* en movil la barra se reduce a marca + boton: lo demas vive en el pie */
  nav.principal .oculta-movil,nav.principal a:not(.nav-cta){display:none}
  nav.principal .nav-cta{margin-left:0;padding:9px 16px;font-size:14.5px}
  header.sitio .fila{padding:11px 16px}
  .marca{font-size:18px}
  .ancho,.lectura{padding:0 18px}
  /* la tarjeta flotante se sale del ancho: se ancla dentro */
  .flotante{position:static;margin-top:12px;width:fit-content}
  .flotante.f1,.flotante.f2{animation:none}
  .maqueta{display:flex;flex-direction:column;align-items:flex-start}
  .entrada{grid-template-columns:1fr;gap:6px;padding:24px 16px;margin:0 -16px}
  .entrada .fechero{display:flex;align-items:baseline;gap:8px;text-align:left}
  .entrada .fechero .d{font-size:17px}
  .entrada .fechero .m{margin-top:0}
  .franja .fila{gap:18px}.franja .sep{display:none}
  footer.sitio .rejilla-pie{grid-template-columns:1fr;gap:28px}
  .cifra b{font-size:31px}
  article p,article li{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════
   COMPONENTES DE CONFIANZA
   La competencia (Mentalyc, Upheal, Blueprint) pone aqui
   "30.000 profesionales" y seis caras. Corefide no los tiene y
   no se inventan. Se cambia la moneda: en vez de cuanta gente
   lo usa, que se puede comprobar.
   ═══════════════════════════════════════════════════════════ */

/* Tarjetas grandes de recurso: calculadora y glosario.
   Antes solo se llegaba a ellas desde el pie, donde no mira nadie. */
.destacados{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
.destacado{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  padding:26px;box-shadow:var(--s1);text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s;
}
.destacado:hover{transform:translateY(-3px);box-shadow:var(--s2);border-color:#D3DEEC}
.destacado .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--naranja-luz);flex:0 0 46px;
}
.destacado .ico.azul{background:var(--azul-luz)}
.destacado .ico svg{width:23px;height:23px;color:var(--naranja-2)}
.destacado .ico.azul svg{color:var(--azul-2)}
.destacado .et{
  display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris-2);margin-bottom:7px;
}
.destacado h2{font-size:19px;line-height:1.3;letter-spacing:-.022em;margin-bottom:9px}
.destacado p{font-size:15px;color:var(--gris);line-height:1.6;margin-bottom:14px}
.destacado .ir{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:650;color:var(--azul);
}
.destacado .ir svg{width:15px;height:15px;transition:transform .18s}
.destacado:hover .ir svg{transform:translateX(3px)}
@media(max-width:640px){
  .destacado{grid-template-columns:1fr;gap:14px;padding:22px}
}

/* Barra de verificables, montada sobre el borde inferior del hero */
.franja-verificables{
  max-width:1120px;margin:-34px auto 0;padding:0 24px;
  position:relative;z-index:2;
}
@media(max-width:860px){ .franja-verificables{margin-top:-18px} }
.verificables{
  display:flex;gap:0;flex-wrap:wrap;align-items:stretch;justify-content:center;
  border:1px solid var(--linea);border-radius:14px;background:var(--papel);
  box-shadow:var(--s1);overflow:hidden;
}
.verificable{
  flex:1 1 200px;min-width:0;padding:18px 22px;
  border-right:1px solid var(--linea);
  display:flex;gap:12px;align-items:flex-start;
}
.verificable:last-child{border-right:none}
.verificable svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px;color:var(--naranja)}
.verificable b{display:block;font-size:14px;font-weight:650;color:var(--tinta);
  letter-spacing:-.01em;margin-bottom:3px;line-height:1.3}
.verificable span{display:block;font-size:12.5px;color:var(--gris-2);line-height:1.45}
.verificable a{color:var(--azul);text-decoration:none;border-bottom:1px solid #C6D6EA}
.verificable a:hover{border-bottom-color:var(--azul)}
@media(max-width:860px){
  .verificable{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--linea)}
  .verificable:last-child{border-bottom:none}
}

/* Numero de version en el pie. Discreto pero visible: sirve para
   saber de un vistazo que version esta publicada sin abrir el codigo
   fuente. Desde 24-sep-2026 cada correccion lleva numero. */
.version{opacity:.55;font-variant-numeric:tabular-nums;margin-left:4px}

/* Descargo de responsabilidad medica.

   Va en el pie de TODAS las paginas, no solo en una. Es la
   recomendacion 12 del analisis de riesgo: el profesional firma, y eso
   tiene que estar dicho en cualquier pagina desde la que alguien pueda
   llegar a instalar. */
.descargo-medico{
  margin:26px 0 0;padding:14px 0 0;border-top:1px solid var(--linea);
  font-size:12.5px;line-height:1.6;color:var(--gris-2);max-width:78ch;
}

/* Aviso de por que se pide la facturacion activada en Google.

   No es letra pequena: es la razon por la que el producto dejo de
   recomendar el nivel gratuito (24-sep-2026). Los terminos de la API
   piden no enviar informacion sensible a la capa gratuita. */
.aviso-plan{
  border-left:3px solid var(--naranja);padding-left:14px;
  background:var(--naranja-luz);padding:12px 14px;border-radius:0 10px 10px 0;
}
.aviso-plan a{color:var(--naranja-2)}

/* Aviso de estimacion.

   Regla 2 del proyecto: toda cifra tiene que ser verificable, y si es
   una estimacion se dice que lo es. El 13 min por nota NO esta
   cronometrado -- el propio articulo fuente admite que "los numeros
   publicados y lo que reportan los profesionales rara vez coinciden".
   Declararlo no debilita el numero: lo blinda. Un dato presentado como
   medicion y luego desmentido cuesta mucho mas que una estimacion
   honesta. */
.aviso-estimacion{
  font-size:14px;color:var(--gris-2);line-height:1.6;
  border-left:2px solid var(--linea);padding-left:14px;margin-top:14px;
}

/* Bloque de honestidad: decir lo que NO se tiene */
.honesto{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  border:1px solid var(--linea);border-left:3px solid var(--naranja);
  border-radius:0 14px 14px 0;background:var(--papel-2);padding:26px 30px;
}
.honesto .ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--naranja-luz);flex:0 0 42px;
}
.honesto .ico svg{width:21px;height:21px;color:var(--naranja-2)}
.honesto h3{font-size:19px;margin-bottom:9px;letter-spacing:-.02em}
.honesto p{font-size:15.5px;color:var(--gris);line-height:1.65;margin:0}
.honesto p + p{margin-top:11px}
@media(max-width:640px){
  .honesto{grid-template-columns:1fr;padding:22px;gap:14px}
}

/* Precio en portada: la competencia lo esconde tras "Pricing" */
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.plan{
  position:relative;background:var(--papel);border:1px solid var(--linea);
  border-radius:16px;padding:28px;box-shadow:var(--s1);
  display:flex;flex-direction:column;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s;
}
.plan:hover{transform:translateY(-3px);box-shadow:var(--s2);border-color:#D3DEEC}
.plan.destacado{border-color:var(--naranja);box-shadow:var(--s2)}

/* Plan unico: desde el 16 sept 2026 solo hay uno (gratis). Se centra
   y se limita el ancho para que no quede una tarjeta estirada de lado
   a lado, y se quita la etiqueta "Recomendado" -- no se recomienda
   entre uno. */
.plan-unico{
  max-width:420px;margin:0 auto;
  border-color:var(--naranja);box-shadow:var(--s2);
}
.plan.destacado::before{
  content:"Recomendado";position:absolute;top:-11px;left:28px;
  background:var(--naranja);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:6px;
}
.plan .nombre{font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gris);margin-bottom:14px}
.plan .cifra{
  font-family:'Fraunces',Georgia,serif;font-size:44px;font-weight:600;
  letter-spacing:-.035em;line-height:1;color:var(--tinta);
}
/* El simbolo de moneda. Con position:relative + top se desplazaba sin
   reservar hueco y el numero se le montaba encima. Con inline-block y
   vertical-align el flujo lo respeta. Pasó en produccion. */
.plan .cifra sup{
  font-size:21px;font-weight:500;
  display:inline-block;vertical-align:super;line-height:1;
  margin-right:2px;position:static;top:auto;
}
.plan .periodo{font-size:14px;color:var(--gris-2);margin:8px 0 18px}
.plan .para{font-size:14.5px;color:var(--gris);line-height:1.55;
  padding-bottom:18px;border-bottom:1px solid var(--linea);margin-bottom:18px}
.plan ul{list-style:none;display:grid;gap:10px;margin-bottom:22px;flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;
  color:var(--tinta);line-height:1.5}
.plan li svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:var(--naranja)}
.plan .btn{width:100%}
.nota-precio{
  font-size:13.5px;color:var(--gris-2);text-align:center;margin-top:22px;
  line-height:1.6;
}
.nota-precio b{color:var(--gris);font-weight:600}

/* Hueco preparado para testimonios reales.
   No se rellena hasta tener permiso por escrito de la persona. */
.testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.testimonio{
  background:var(--papel);border:1px solid var(--linea);border-radius:14px;
  padding:26px;box-shadow:var(--s1);display:flex;flex-direction:column;
}
.testimonio .cita{font-size:16px;line-height:1.65;color:var(--tinta);flex:1;margin-bottom:20px}
.testimonio .quien{display:flex;gap:12px;align-items:center}
.testimonio .quien img{width:42px;height:42px;border-radius:50%;object-fit:cover;
  flex:0 0 42px;background:var(--papel-3)}
.testimonio .quien b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.testimonio .quien span{display:block;font-size:13px;color:var(--gris-2)}

/* ── Aviso de que hace falta un ordenador ──────────────────
   Una pediatra intento instalar la extension desde el movil y
   acabo creando un acceso directo a la web. Nada en la pagina
   le advirtio. En Mexico la mayoria del trafico es movil, asi
   que esto le pasa a mucha gente que no lo cuenta.
   Solo se ve por debajo de 860px. */
.aviso-escritorio{display:none}
@media(max-width:860px){
  .aviso-escritorio{
    display:flex;gap:12px;align-items:flex-start;
    background:var(--naranja-luz);border:1px solid #F5C9A6;
    border-radius:12px;padding:14px 16px;margin:18px 0 6px;
    font-size:15px;line-height:1.55;color:var(--tinta)
  }
  .aviso-escritorio b{display:block;margin-bottom:3px}
  .aviso-escritorio .ico{flex:0 0 auto;font-size:19px;line-height:1.3}
}

/* Caja de "plantilla afinada a tu especialidad".
   Mide el interes ANTES de poner un precio: si nadie escribe, el
   problema no es cuanto cuesta. Por eso no lleva cifra. */
.caja-plantilla{
  display:flex;gap:22px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
  max-width:640px;margin:26px auto 0;
  background:var(--azul-luz);border:1px solid #CFE0F5;
  border-radius:14px;padding:20px 24px;
}
.caja-plantilla b{display:block;font-size:16.5px;color:var(--tinta);margin-bottom:6px}
.caja-plantilla p{margin:0;font-size:14.5px;line-height:1.6;color:var(--gris);max-width:46ch}
.caja-plantilla .btn{flex:0 0 auto}
@media(max-width:640px){
  .caja-plantilla{flex-direction:column;align-items:flex-start;gap:16px}
  .caja-plantilla .btn{width:100%;text-align:center}
}

/* Objeciones: decirlas en voz alta antes de que las piense el visitante.

   ORIGEN — 23 sept 2026
   ----------------------
   Las tres salen de la validacion 01 (Analia, pediatra). No son
   inventadas ni sacadas de un manual de copywriting: cada una tiene
   una frase textual detras. Ver VALIDACION-01-ANALIA-PEDIATRA.md.

   Josh Spector: hay que atacarlas "de frente", no de refilon. Por eso
   cada una es una PREGUNTA en el titulo -- la pregunta que la persona
   ya se esta haciendo -- y la respuesta empieza reconociendola, no
   negandola.

   La tercera (queda mal que se note la IA) es una objecion SOCIAL, no
   tecnica. Katelyn Bourgoin avisa de que los perfiles tecnicos solo
   contestan lo funcional. El resto de la portada es 100% funcional;
   este bloque es el unico sitio donde se responde a lo social. */
.objeciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.objecion{
  background:var(--papel);border:1px solid var(--linea);
  border-radius:14px;padding:24px 26px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s,box-shadow .2s;
}
.objecion:hover{border-color:#D3DEEC;box-shadow:var(--s1)}
.objecion .q{
  font-size:16.5px;font-weight:650;color:var(--tinta);
  letter-spacing:-.015em;line-height:1.4;margin:0;
}
.objecion .r{font-size:14.8px;color:var(--gris);line-height:1.65;margin:0}
.objecion .r b{color:var(--tinta);font-weight:600}
.objecion .r + .r{margin-top:-2px}
.objecion .pie{
  font-size:13.5px;color:var(--gris-2);line-height:1.55;margin:2px 0 0;
  padding-top:11px;border-top:1px solid var(--linea);
}
.objecion .pie a{color:var(--azul);text-decoration:none;border-bottom:1px solid #C6D6EA}
.objecion .pie a:hover{border-bottom-color:var(--azul)}
@media(max-width:640px){
  .objeciones{grid-template-columns:1fr}
  .objecion{padding:20px 22px}
}

/* ── aviso urgente ───────────────────────────────────────── */
.aviso-urgente{
  background:linear-gradient(180deg,#FFF6EE,#FFF1E6);
  border-top:1px solid #F5D5BA;border-bottom:1px solid #F5D5BA;
  padding:20px 0;
}
.aviso-cuerpo{
  display:flex;gap:14px;align-items:flex-start;
  max-width:78ch;margin:0 auto;font-size:15.5px;line-height:1.6;color:#6B3410;
}
.aviso-cuerpo svg{width:22px;height:22px;flex:0 0 22px;margin-top:2px;color:var(--naranja-2)}
.aviso-cuerpo strong{color:#4A2409}

/* ── pasos con captura ───────────────────────────────────── */
.pasos-g{display:grid;gap:52px;max-width:860px;margin:0 auto}
.paso-g{display:block}
.paso-cab{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start}
.paso-num{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#F0710F,var(--naranja));color:#fff;
  font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:600;
  box-shadow:0 2px 8px rgba(232,98,12,.28);
}
.paso-cab h2{font-size:24px;margin-bottom:9px;letter-spacing:-.025em}
.paso-cab p{font-size:16.5px;color:var(--gris);line-height:1.65}
.paso-cab code{font-size:14.5px}

.captura{margin:20px 0 0 72px}
.captura img{
  width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid var(--linea);box-shadow:var(--s2);
}
.captura.estrecho{max-width:330px}
.captura figcaption{
  font-size:13.5px;color:var(--gris-2);margin-top:11px;
  padding-left:2px;line-height:1.5;max-width:62ch;
}

/* ── bloque de reinicio ──────────────────────────────────── */
.reset{display:grid;grid-template-columns:330px 1fr;gap:38px;align-items:start}
.reset p{font-size:16px;color:var(--gris);line-height:1.65;margin-bottom:14px}
.reset .lista-check li{font-size:15.5px}
@media(max-width:820px){
  .reset{grid-template-columns:1fr;gap:26px}
  .reset .captura.estrecho{max-width:330px;margin:0 auto}
}

/* ── preguntas ───────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px}
.faq-item{
  background:var(--papel);border:1px solid var(--linea);
  border-radius:13px;padding:22px 24px;
}
.faq-item h3{font-size:17px;margin-bottom:8px;letter-spacing:-.015em}
.faq-item p{font-size:15px;color:var(--gris);line-height:1.6}
.faq-item code{font-size:13.5px;word-break:break-word}

@media(max-width:640px){
  .pasos-g{gap:40px}
  .paso-cab{grid-template-columns:40px 1fr;gap:14px}
  .paso-num{width:36px;height:36px;font-size:18px}
  .paso-cab h2{font-size:20px}
  .paso-cab p{font-size:15.5px}
  .captura{margin-left:0}
  .captura.estrecho{max-width:100%}
  .aviso-cuerpo{font-size:14.5px}
}

/* ── diagramas de articulo ───────────────────────────────── */
.figura-diagrama{margin:34px 0;padding:0}
.diagrama-svg{
  width:100%;height:auto;display:block;
  border-radius:14px;
  filter:drop-shadow(0 2px 6px rgba(14,26,43,.05));
}
.figura-diagrama figcaption{
  font-size:13.5px;color:var(--gris-2);margin-top:11px;
  line-height:1.5;text-align:center;
}
@media(max-width:640px){
  .figura-diagrama{margin:26px -18px}
  .diagrama-svg{border-radius:0}
  .figura-diagrama figcaption{padding:0 18px}
}

/* ── calculadora ─────────────────────────────────────────── */
.calc{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;
  border:1px solid var(--linea);border-radius:18px;overflow:hidden;
  box-shadow:var(--s2);background:var(--papel);
}
.calc-entrada{padding:30px;background:var(--papel-2);border-right:1px solid var(--linea)}
.calc-campo{margin-bottom:24px}
.calc-campo:last-child{margin-bottom:0}
.calc-campo label{
  display:block;font-size:13.5px;font-weight:650;color:var(--tinta);
  margin-bottom:4px;letter-spacing:-.01em;
}
.calc-campo .pista{display:block;font-size:12.5px;color:var(--gris-2);margin-bottom:11px}
.calc-fila{display:flex;align-items:center;gap:13px}
.calc-fila input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;
  background:var(--papel-3);outline:none;cursor:pointer;
}
.calc-fila input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:21px;height:21px;border-radius:50%;
  background:var(--naranja);cursor:pointer;border:3px solid #fff;
  box-shadow:0 1px 4px rgba(194,78,5,.4);
}
.calc-fila input[type=range]::-moz-range-thumb{
  width:21px;height:21px;border-radius:50%;background:var(--naranja);
  cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(194,78,5,.4);
}
.calc-valor{
  font-family:'Fraunces',Georgia,serif;font-size:25px;font-weight:600;
  letter-spacing:-.03em;color:var(--tinta);min-width:66px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.calc-valor small{font-size:14px;color:var(--gris-2);font-family:'Inter',sans-serif;
  font-weight:500;margin-left:2px}

.calc-salida{padding:30px;display:flex;flex-direction:column}
.calc-titular{
  font-family:'Fraunces',Georgia,serif;font-size:clamp(38px,6vw,58px);
  font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--naranja-2);
  font-variant-numeric:tabular-nums;
}
.calc-titular small{
  display:block;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
  color:var(--gris);letter-spacing:0;margin-top:9px;
}
.calc-desglose{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:11px;overflow:hidden;margin:24px 0;
}
.calc-dato{background:var(--papel);padding:15px 16px}
.calc-dato b{
  display:block;font-family:'Fraunces',Georgia,serif;font-size:23px;
  font-weight:600;letter-spacing:-.03em;color:var(--tinta);line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.calc-dato span{display:block;font-size:12.5px;color:var(--gris-2);margin-top:4px;line-height:1.4}
.calc-frase{
  background:var(--naranja-luz);border-radius:11px;padding:16px 18px;
  font-size:15px;line-height:1.6;color:#6B3410;margin-bottom:20px;
}
.calc-frase b{color:#4A2409;font-weight:700}
.calc-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.calc-nota{
  font-size:12.5px;color:var(--gris-2);margin-top:16px;line-height:1.5;
  display:flex;gap:8px;align-items:flex-start;
}
.calc-nota svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;color:#12A150}
@media(max-width:800px){
  .calc{grid-template-columns:1fr}
  .calc-entrada{border-right:none;border-bottom:1px solid var(--linea)}
}

/* ── glosario ────────────────────────────────────────────── */
.glo-filtros{
  display:flex;gap:9px;flex-wrap:wrap;margin-bottom:32px;
  padding-bottom:24px;border-bottom:1px solid var(--linea);
}
.glo-filtro{
  font:600 14px 'Inter',sans-serif;padding:9px 17px;border-radius:100px;
  border:1px solid var(--linea);background:var(--papel);color:var(--gris);
  cursor:pointer;transition:all .15s;
}
.glo-filtro:hover{border-color:#CBD7E6;color:var(--tinta)}
.glo-filtro.activo{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.glo-lista{display:grid;gap:18px}
.glo-item{
  border:1px solid var(--linea);border-radius:14px;padding:26px 28px;
  background:var(--papel);box-shadow:var(--s1);
  transition:border-color .18s,box-shadow .18s;scroll-margin-top:90px;
}
.glo-item:hover{border-color:#D3DEEC;box-shadow:var(--s2)}
.glo-item h2{
  font-size:21px;letter-spacing:-.025em;margin:0 0 4px;
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
}
.glo-item .cat{
  font:700 10.5px 'Inter',sans-serif;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;
}
.cat.privacidad{color:var(--naranja-2);background:var(--naranja-luz)}
.cat.documentacion{color:var(--azul-2);background:var(--azul-luz)}
.glo-item .def{font-size:16.5px;line-height:1.65;color:var(--tinta);margin:14px 0}
.glo-item .porque{
  font-size:15.5px;line-height:1.65;color:var(--gris);
  padding-left:16px;border-left:2px solid var(--linea);margin:16px 0;
}
.glo-item .preg{
  display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--linea);
  font-size:14.5px;line-height:1.55;color:var(--tinta);
}
.glo-item .preg svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--naranja)}
.glo-item .preg b{font-weight:650}
.glo-item.oculto{display:none}
@media(max-width:640px){
  .glo-item{padding:22px}
  .glo-item h2{font-size:19px}
}