/* =====================================================================
   INSTITUTO AGROPECUARIO - Sistema de diseno del embudo (gallinas ponedoras)
   Paleta: verde campo + amarillo yema + tierra + rojo cresta (urgencia)
   Tipografias: Anton (titulos, impacto VSL) + Source Sans 3 (cuerpo)
   ===================================================================== */

:root{
  --verde-900:#0F3D1E;
  --verde-800:#14532D;
  --verde-700:#1B6B39;
  --verde-500:#2E8B4F;
  --yema-500:#F5B301;
  --yema-400:#FFC93C;
  --yema-100:#FFF3CC;
  --crema:#FFFBF0;
  --crema-2:#F7EFDD;
  --tierra:#4E342E;
  --tierra-claro:#8D6E63;
  --cresta:#C62828;
  --cresta-claro:#E53935;
  --tinta:#20211E;
  --gris:#5B5F58;
  --linea:#E3DAC6;
  --blanco:#FFFFFF;
  --ok:#1B8A4B;

  --ancho:1080px;
  --ancho-texto:720px;
  --radio:14px;
  --radio-sm:8px;
  --sombra:0 10px 30px rgba(20,60,35,.10);
  --sombra-fuerte:0 18px 45px rgba(20,60,35,.18);
  --fuente-titulo:"Anton","Archivo Black",Impact,sans-serif;
  --fuente-cuerpo:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--fuente-cuerpo);font-size:19px;line-height:1.62;font-weight:400;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-700)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}
.wrap-texto{width:100%;max-width:var(--ancho-texto);margin:0 auto;padding:0 20px}
.sec{padding:64px 0}
.sec-sm{padding:40px 0}
.sec-lg{padding:88px 0}
.centro{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}

.bg-verde{background:var(--verde-900);color:#F3F7F1}
.bg-verde h1,.bg-verde h2,.bg-verde h3{color:var(--blanco)}
.bg-verde a:not(.btn):not(.logo){color:var(--yema-400)}
.bg-crema{background:var(--crema)}
.bg-crema2{background:var(--crema-2)}
.bg-blanco{background:var(--blanco)}
.bg-yema{background:var(--yema-100)}
.bg-tierra{background:var(--tierra);color:#F7EFE8}
.bg-tierra h2,.bg-tierra h3{color:var(--blanco)}

.textura{
  background-image:
    radial-gradient(circle at 18% 12%, rgba(245,179,1,.14), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(46,139,79,.28), transparent 46%);
}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--fuente-titulo);font-weight:400;letter-spacing:.4px;line-height:1.08;margin:0 0 18px;color:var(--verde-900);text-wrap:balance}
h1{font-size:clamp(34px,5.6vw,62px);text-transform:uppercase}
h2{font-size:clamp(28px,4.2vw,44px);text-transform:uppercase}
h3{font-size:clamp(21px,2.6vw,28px)}
h4{font-size:19px;letter-spacing:.6px;text-transform:uppercase}
p{margin:0 0 18px}
strong,b{font-weight:700}
.destacado{background:linear-gradient(transparent 58%, var(--yema-400) 58%);padding:0 3px;font-weight:700}
.subrayado{border-bottom:3px solid var(--yema-500);padding-bottom:1px}
.rojo{color:var(--cresta)}
.verde{color:var(--verde-700)}
.grande{font-size:clamp(21px,2.4vw,24px)}
.chico{font-size:16px;color:var(--gris)}
.mini{font-size:14px;color:var(--gris);line-height:1.5}

.pretitular{
  display:inline-block;font-family:var(--fuente-cuerpo);font-weight:800;
  font-size:14px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--verde-800);background:var(--yema-400);
  padding:9px 18px;border-radius:100px;margin:0 0 20px;
}
.bg-verde .pretitular,.bg-tierra .pretitular{background:var(--yema-500);color:var(--verde-900)}
.pretitular-linea{
  display:block;font-family:var(--fuente-cuerpo);font-weight:800;font-size:15px;
  letter-spacing:2px;text-transform:uppercase;color:var(--cresta);margin-bottom:14px;
}
.subtitular{font-size:clamp(18px,2.3vw,23px);line-height:1.5;color:#3C4139;max-width:760px;margin:0 auto 26px}
.bg-verde .subtitular,.bg-tierra .subtitular{color:#DDE7DA}
.kicker{font-family:var(--fuente-cuerpo);font-weight:800;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--verde-500);margin-bottom:10px;display:block}

/* ---------- Barra superior de aviso ---------- */
.barra-aviso{
  background:var(--cresta);color:#fff;text-align:center;
  font-weight:700;font-size:15px;padding:11px 16px;letter-spacing:.3px;
}
.barra-aviso b{color:var(--yema-400)}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;font-family:var(--fuente-cuerpo);font-weight:800;
  background:var(--yema-500);color:var(--verde-900);
  border:none;border-radius:var(--radio);cursor:pointer;text-decoration:none;
  padding:20px 34px;font-size:20px;line-height:1.25;text-align:center;
  box-shadow:0 6px 0 #C79000, 0 14px 26px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-transform:uppercase;letter-spacing:.5px;
}
.btn:hover{background:var(--yema-400);transform:translateY(-2px);box-shadow:0 8px 0 #C79000,0 18px 30px rgba(0,0,0,.22)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #C79000}
.btn-lg{width:100%;max-width:620px;padding:24px 30px;font-size:clamp(19px,2.4vw,25px)}
.btn-verde{background:var(--verde-700);color:#fff;box-shadow:0 6px 0 #0F3D1E,0 14px 26px rgba(0,0,0,.18)}
.btn-verde:hover{background:var(--verde-500)}
.btn-verde:active{box-shadow:0 2px 0 #0F3D1E}
.btn-wa{background:#25D366;color:#0B2E17;box-shadow:0 6px 0 #128C4A,0 14px 26px rgba(0,0,0,.18)}
.btn-wa:hover{background:#3ae07a}
.btn-wa:active{box-shadow:0 2px 0 #128C4A}
.btn-sub{display:block;margin-top:10px;font-size:15px;color:var(--gris);font-weight:600}
.btn-nota{font-size:14px}
.cta-bloque{text-align:center;margin:34px 0}

/* ---------- Bullets ---------- */
.bullets{list-style:none;margin:0 0 26px;padding:0}
.bullets li{position:relative;padding:0 0 0 46px;margin-bottom:18px;font-size:19px;line-height:1.55}
.bullets li::before{
  content:"";position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;
  background:var(--yema-400);box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
}
.bullets li::after{
  content:"";position:absolute;left:9px;top:11px;width:6px;height:12px;
  border:solid var(--verde-900);border-width:0 3px 3px 0;transform:rotate(45deg);
}
.bullets-x li::before{background:#F3C9C9}
.bullets-x li::after{
  content:"X";border:none;left:9px;top:1px;width:auto;height:auto;transform:none;
  color:var(--cresta);font-weight:900;font-size:17px;
}
.bg-verde .bullets li,.bg-tierra .bullets li{color:#EAF1E8}
.bullets-2col{columns:2;column-gap:44px}
.bullets-2col li{break-inside:avoid}

/* ---------- Tarjetas ---------- */
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:30px;box-shadow:var(--sombra)}
.card-yema{background:var(--yema-100);border-color:#EAD9A0}
.card-verde{background:var(--verde-800);color:#EAF1E8;border-color:#1B6B39}
.card-verde h3{color:#fff}
.card-borde-rojo{border:2px solid var(--cresta)}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Pasos numerados ---------- */
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso}
.pasos li{counter-increment:paso;position:relative;padding:0 0 0 66px;margin-bottom:28px}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:-4px;
  width:46px;height:46px;border-radius:50%;background:var(--verde-700);color:#fff;
  font-family:var(--fuente-titulo);font-size:24px;display:flex;align-items:center;justify-content:center;
}
.pasos li h3{margin-bottom:6px}

/* ---------- Modulos / stack de oferta ---------- */
.modulo{
  display:flex;gap:20px;align-items:flex-start;background:var(--blanco);
  border:1px solid var(--linea);border-left:6px solid var(--verde-700);
  border-radius:var(--radio-sm);padding:24px;margin-bottom:18px;box-shadow:var(--sombra);
}
.modulo .letra{
  flex:0 0 auto;width:58px;height:58px;border-radius:12px;background:var(--yema-400);
  color:var(--verde-900);font-family:var(--fuente-titulo);font-size:32px;
  display:flex;align-items:center;justify-content:center;
}
.modulo h3{margin-bottom:6px}
.modulo p:last-child{margin-bottom:0}
.bono{border-left-color:var(--cresta)}
.bono .letra{background:var(--cresta);color:#fff;font-size:14px;font-family:var(--fuente-cuerpo);font-weight:800;letter-spacing:1px}

/* Tabla de apilamiento de valor */
.valor{width:100%;border-collapse:collapse;background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);font-size:17px}
.valor td{padding:15px 18px;border-bottom:1px solid var(--linea);vertical-align:top}
.valor td:last-child{text-align:right;white-space:nowrap;font-weight:800;color:var(--verde-800)}
.valor tr:last-child td{border-bottom:none}
.valor .total td{background:var(--verde-900);color:#fff;font-weight:800;font-size:19px}
.valor .total td:last-child{color:var(--yema-400)}
.valor .tachado{text-decoration:line-through;color:var(--tierra-claro)}

/* Caja de precio */
.precio-caja{background:var(--blanco);border:3px dashed var(--verde-700);border-radius:var(--radio);padding:34px 26px;text-align:center;box-shadow:var(--sombra-fuerte)}
.precio-antes{font-size:20px;color:var(--tierra-claro);text-decoration:line-through;margin:0}
.precio{font-family:var(--fuente-titulo);font-size:clamp(56px,10vw,92px);color:var(--verde-800);line-height:1;margin:6px 0}
.precio small{font-size:26px;color:var(--gris);font-family:var(--fuente-cuerpo);font-weight:700}
.precio-nota{font-weight:700;color:var(--cresta);margin:0}

/* Garantia */
.garantia{display:flex;gap:24px;align-items:center;background:var(--yema-100);border:2px solid var(--yema-500);border-radius:var(--radio);padding:28px}
.garantia .sello{
  flex:0 0 auto;width:110px;height:110px;border-radius:50%;background:var(--verde-700);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-family:var(--fuente-titulo);line-height:1;box-shadow:0 0 0 6px #fff,0 0 0 9px var(--verde-700);
}
.garantia .sello span{font-size:34px}
.garantia .sello small{font-size:11px;font-family:var(--fuente-cuerpo);font-weight:800;letter-spacing:1px;margin-top:4px}

/* ---------- About me ---------- */
.about{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
.about .foto{
  width:100%;aspect-ratio:1/1;border-radius:var(--radio);object-fit:cover;
  background:var(--crema-2);border:6px solid var(--blanco);box-shadow:var(--sombra-fuerte);
  display:flex;align-items:center;justify-content:center;color:var(--tierra-claro);
  font-size:14px;text-align:center;padding:12px;
}
.about .credenciales{list-style:none;padding:0;margin:18px 0 0}
.about .credenciales li{padding-left:30px;position:relative;margin-bottom:10px;font-size:17px}
.about .credenciales li::before{content:"\1F33E";position:absolute;left:0;top:0}

/* ---------- Testimonios ---------- */
.testimonio{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px;box-shadow:var(--sombra)}
.testimonio p{font-size:17px;font-style:italic;margin-bottom:14px}
.testimonio .autor{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--verde-800);font-style:normal}
.testimonio .autor .inicial{width:40px;height:40px;border-radius:50%;background:var(--verde-700);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fuente-titulo);font-size:19px}
.estrellas{color:var(--yema-500);font-size:17px;letter-spacing:2px;margin-bottom:8px}

/* ---------- FAQ ---------- */
.faq{max-width:800px;margin:0 auto}
.faq details{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-sm);margin-bottom:12px;box-shadow:0 3px 10px rgba(20,60,35,.05)}
.faq summary{cursor:pointer;list-style:none;padding:20px 54px 20px 22px;position:relative;font-weight:800;font-size:18px;color:var(--verde-900);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:var(--fuente-titulo);font-size:28px;color:var(--yema-500);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{color:var(--verde-700)}
.faq .respuesta{padding:0 22px 22px;font-size:17px;color:#3C4139}
.faq .respuesta p:last-child{margin-bottom:0}

/* ---------- Formulario ---------- */
.form-caja{background:var(--blanco);border-radius:var(--radio);padding:30px;box-shadow:var(--sombra-fuerte);border-top:6px solid var(--yema-500)}
.form-caja h3{text-align:center;margin-bottom:6px}
.campo{margin-bottom:14px}
.campo label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--verde-900);letter-spacing:.4px;text-transform:uppercase}
.campo input,.campo select{
  width:100%;padding:15px 16px;font-size:17px;font-family:var(--fuente-cuerpo);
  border:2px solid var(--linea);border-radius:var(--radio-sm);background:#FFFDF7;color:var(--tinta);
}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--verde-500);box-shadow:0 0 0 3px rgba(46,139,79,.15)}
.form-legal{font-size:13px;color:var(--gris);text-align:center;margin:12px 0 0;line-height:1.45}
.form-error{color:var(--cresta);font-weight:700;font-size:15px;margin-top:10px;display:none}

/* ---------- Contador ---------- */
.contador{display:flex;gap:12px;justify-content:center;margin:20px 0}
.contador .bloque{background:var(--verde-900);color:#fff;border-radius:var(--radio-sm);padding:12px 14px;min-width:78px;text-align:center}
.contador .num{font-family:var(--fuente-titulo);font-size:34px;line-height:1;display:block;color:var(--yema-400)}
.contador .lab{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;opacity:.85}

/* ---------- Sticky CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(15,61,30,.97);padding:10px 14px;box-shadow:0 -6px 20px rgba(0,0,0,.25);display:none}
.sticky-cta .btn{width:100%;padding:16px;font-size:17px;box-shadow:0 4px 0 #C79000}
.sticky-cta.visible{display:block}

/* ---------- Divisores ---------- */
.divisor{height:6px;background:repeating-linear-gradient(90deg,var(--yema-500) 0 22px,var(--verde-700) 22px 44px)}
.divisor-huevo{text-align:center;color:var(--yema-500);font-size:26px;letter-spacing:14px;margin:34px 0}

/* ---------- Antes / Despues ---------- */
.comparativa{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.comparativa>div{padding:28px}
.comparativa .malo{background:#FBEAEA}
.comparativa .bueno{background:#E9F5EC}
.comparativa h3{margin-bottom:16px}
.comparativa .malo h3{color:var(--cresta)}
.comparativa .bueno h3{color:var(--verde-800)}
.comparativa ul{margin:0;padding-left:22px}
.comparativa li{margin-bottom:11px;font-size:17px}

/* ---------- Numeros / prueba ---------- */
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.numeros .n{font-family:var(--fuente-titulo);font-size:clamp(38px,6vw,56px);color:var(--yema-500);line-height:1}
.numeros .t{font-size:16px;color:#DDE7DA}
.bg-crema .numeros .t,.bg-blanco .numeros .t,.bg-crema2 .numeros .t{color:var(--gris)}

/* ---------- Cajas de aviso ---------- */
.aviso{border-left:6px solid var(--cresta);background:#FBEAEA;padding:20px 24px;border-radius:var(--radio-sm);margin:26px 0}
.aviso p:last-child{margin-bottom:0}
.nota{border-left:6px solid var(--verde-500);background:#E9F5EC;padding:20px 24px;border-radius:var(--radio-sm);margin:26px 0}
.nota p:last-child{margin-bottom:0}

/* ---------- PS / firma ---------- */
.ps{border-top:2px dashed var(--linea);padding-top:24px;margin-top:34px}
.firma{font-family:"Caveat","Segoe Script",cursive;font-size:34px;color:var(--verde-800);margin:14px 0 2px}

/* ---------- Cabecera / pie ---------- */
.logo{font-family:var(--fuente-titulo);font-size:22px;letter-spacing:1px;color:var(--verde-900);text-decoration:none;text-transform:uppercase}
.logo span{color:var(--yema-500)}
.bg-verde .logo,.bg-tierra .logo{color:#fff}
.topbar{padding:18px 0;display:flex;justify-content:center;align-items:center}
.footer{background:var(--verde-900);color:#B9C9B5;padding:44px 0;font-size:14px;text-align:center;line-height:1.7}
.footer a{color:#DCE8D8;text-decoration:underline}
.footer .legal{max-width:760px;margin:16px auto 0;font-size:12.5px;opacity:.8}

/* =====================================================================
   CONTRASTE HEREDABLE
   El color del texto secundario viaja en variables, no en reglas sueltas.
   Así una tarjeta clara dentro de una sección oscura (o al revés) recupera
   sola sus colores, sin tener que enumerar cada combinación.
   ===================================================================== */
:root{
  --txt:var(--tinta);
  --txt-2:var(--gris);
  --txt-kicker:var(--verde-700);
  --txt-acento:var(--cresta);
  --txt-rojo:var(--cresta);
  --txt-verde:var(--verde-700);
}
/* Secciones oscuras: se invierte la escala */
.bg-verde,.bg-tierra{
  --txt:#F3F7F1;
  --txt-2:#C4D3C0;
  --txt-kicker:var(--yema-400);
  --txt-acento:var(--yema-400);
  --txt-rojo:#FF8A80;
  --txt-verde:var(--yema-400);
}
/* Contenedores CLAROS: pasen por donde pasen, vuelven a la escala oscura */
.card:not(.card-verde),.card-yema,.precio-caja,.form-caja,.testimonio,
.garantia,.modulo,.valor,.nota,.aviso,.faq details,.comparativa>div{
  --txt:var(--tinta);
  --txt-2:var(--gris);
  --txt-kicker:var(--verde-700);
  --txt-acento:var(--cresta);
  --txt-rojo:var(--cresta);
  --txt-verde:var(--verde-700);
  color:var(--txt);
}
/* Los títulos dentro de un contenedor claro NO deben heredar el blanco de
   .bg-verde h2/h3 (dejaba el título del formulario blanco sobre blanco). */
.bg-verde .card:not(.card-verde) :is(h1,h2,h3,h4),
.bg-tierra .card:not(.card-verde) :is(h1,h2,h3,h4),
.bg-verde :is(.card-yema,.precio-caja,.form-caja,.testimonio,.garantia,.modulo,.nota,.aviso,.faq details) :is(h1,h2,h3,h4),
.bg-tierra :is(.card-yema,.precio-caja,.form-caja,.testimonio,.garantia,.modulo,.nota,.aviso,.faq details) :is(h1,h2,h3,h4){
  color:var(--verde-900);
}

/* Contenedores OSCUROS dentro de secciones claras */
.card-verde{--txt:#EAF1E8;--txt-2:#C4D3C0;--txt-kicker:var(--yema-400);--txt-acento:var(--yema-400);--txt-rojo:#FF8A80;--txt-verde:var(--yema-400)}

/* El resaltador amarillo solo cubre la mitad baja del texto: sobre fondo
   oscuro la parte alta de las letras desaparecía. Ahí se pinta entero. */
.bg-verde .destacado,.bg-tierra .destacado,.card-verde .destacado{
  background:var(--yema-400);color:var(--verde-900);
  padding:1px 6px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

.chico,.mini,.btn-sub,.form-legal{color:var(--txt-2)}
.kicker{color:var(--txt-kicker)}
.pretitular-linea{color:var(--txt-acento)}
.rojo{color:var(--txt-rojo)}
.verde{color:var(--txt-verde)}
.bg-verde .destacado,.bg-tierra .destacado{color:var(--verde-900)}
.bg-verde .ps,.bg-tierra .ps{border-top-color:rgba(255,255,255,.28)}
.bg-verde .firma,.bg-tierra .firma{color:var(--yema-400)}
.bg-verde .bullets li,.bg-tierra .bullets li{color:var(--txt)}
.card:not(.card-verde) .bullets li,.card-yema .bullets li,
.nota .bullets li,.aviso .bullets li{color:var(--tinta)}

/* Los botones NO son enlaces de texto: nunca deben heredar el color de
   .bg-verde a / .bg-tierra a (dejaba texto amarillo sobre botón amarillo). */
.bg-verde a:not(.btn):not(.logo),.bg-tierra a:not(.btn):not(.logo){color:var(--yema-400)}
.btn,.bg-verde .btn,.bg-tierra .btn{color:var(--verde-900)}
.btn-verde,.bg-verde .btn-verde,.bg-tierra .btn-verde{color:#fff}
.btn-wa,.bg-verde .btn-wa,.bg-tierra .btn-wa{color:#0B2E17}

/* Texto pequeño sobre la barra roja: amarillo yema no llegaba a 4.5:1 */
.barra-aviso b{color:var(--yema-100)}
/* El tachado sigue la escala del contenedor: gris sobre blanco, claro sobre la fila oscura */
.valor .tachado,.precio-antes{color:var(--txt-2)}
.valor .total{--txt:#fff;--txt-2:#C4D3C0}
/* El "Agropecuario" del logo en amarillo no contrastaba sobre crema */
.logo span{color:#8F6300}
.bg-verde .logo span,.bg-tierra .logo span{color:var(--yema-400)}

/* ---------- Datos pendientes de configurar (assets/config.js) ---------- */
.dato-pendiente{
  background:#FFE082;color:#7A4F00;font-weight:800;padding:0 6px;border-radius:4px;
  border:1px dashed #C79000;font-size:.92em;letter-spacing:.3px;
}
.enlace-pendiente{position:relative;filter:grayscale(.35)}
.enlace-pendiente::after{
  content:"CONFIGURA EL ENLACE";position:absolute;top:-10px;right:-6px;
  background:var(--cresta);color:#fff;font-size:10px;font-weight:800;
  padding:2px 6px;border-radius:4px;letter-spacing:.5px;
}

/* ---------- Utilidades ---------- */
.max-720{max-width:720px;margin-left:auto;margin-right:auto}
.max-820{max-width:820px;margin-left:auto;margin-right:auto}
.oculto{display:none}
.solo-movil{display:none}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  body{font-size:18px}
  .sec{padding:48px 0}
  .sec-lg{padding:56px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:24px}
  .about .foto{max-width:260px;margin:0 auto}
  .comparativa{grid-template-columns:1fr}
  .bullets-2col{columns:1}
  .numeros{grid-template-columns:1fr;gap:18px}
  .garantia{flex-direction:column;text-align:center}
  .modulo{flex-direction:column}
  .solo-movil{display:block}
  .no-movil{display:none}
  .contador .bloque{min-width:66px;padding:10px}
  .contador .num{font-size:27px}
  /* La tabla de apilamiento de valor no puede empujar el ancho de la página */
  .valor{font-size:15.5px}
  .valor td{padding:12px 12px}
  .valor td:last-child{white-space:normal}
  .valor .total td{font-size:17px}
  /* Espacio para que el CTA pegajoso no tape el final del contenido */
  body{padding-bottom:0}
  .sticky-cta.visible ~ .footer{padding-bottom:90px}
}
@media (max-width:400px){
  .bullets li{padding-left:40px;font-size:17px}
  .bullets li::before{width:26px;height:26px}
  .bullets li::after{left:8px;top:9px}
  .modulo,.card{padding:22px}
  .contador{gap:8px}
  .contador .bloque{min-width:0;flex:1;padding:9px 4px}
}
@media print{.sticky-cta,.barra-aviso{display:none}}