/* MiMérito · web. Tokens del sistema de diseño MiMérito (Aero). */
:root{
  --lima:#aef202;--lima-luz:#d4fa6e;--lima-reflejo:#cdf967;
  --tinta:#2b2a3c;--tinta-luz:#4a4966;--tinta-medio:#34334a;--tinta-reflejo:#45445e;
  --crema:#f0eee7;--crema-hondo:#d9d2c2;--crema-luz:#fbfaf6;
  --tinte-marca:#e3ddcf;--chip:#edebe4;--blanco:#fff;
  --texto-2:rgba(43,42,60,.75);--texto-3:rgba(43,42,60,.7);--linea:rgba(43,42,60,.2);--blanco-60:rgba(255,255,255,.6);
  --vidrio-alto:rgba(255,255,255,.85);--vidrio-medio:rgba(255,255,255,.55);--vidrio-bajo:rgba(255,255,255,.35);--vidrio-borde:rgba(255,255,255,.95);
  --shadow-vidrio:0 12px 30px rgba(43,42,60,.18);--shadow-chica:0 4px 12px rgba(43,42,60,.12);
  --r-sm:11px;--r-md:14px;--r-lg:16px;--r-xl:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Archivo",system-ui,sans-serif;color:var(--tinta);line-height:1.6;min-height:100vh;
  background:
    radial-gradient(60vw 50vh at 100% 0%,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(55vw 60vh at -10% 45%,rgba(199,189,166,.55),transparent 70%),
    radial-gradient(50vw 50vh at 105% 80%,rgba(174,242,2,.32),transparent 70%),
    radial-gradient(55vw 45vh at 10% 110%,rgba(110,106,154,.22),transparent 70%),
    linear-gradient(160deg,var(--crema-luz),var(--crema) 55%,var(--crema-hondo));
  background-attachment:fixed}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.saltar{position:absolute;left:-999px}.saltar:focus{left:16px;top:8px;background:var(--tinta);color:#fff;padding:8px 12px;border-radius:8px;z-index:20}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.tinta :focus-visible,.tinta-card :focus-visible{outline-color:var(--lima)}

/* Encabezado */
header{position:sticky;top:0;z-index:10;background:rgba(251,250,246,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1.5px solid var(--vidrio-borde);box-shadow:0 1px 0 rgba(43,42,60,.06)}
nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.marca{display:inline-flex;align-items:center;background:var(--tinta);border-radius:var(--r-md);padding:8px 12px}
.marca img{height:28px;width:auto}
.menu{display:flex;gap:22px;align-items:center}
.menu a{text-decoration:none;font-weight:600;color:var(--texto-2);font-size:.95rem}
.menu a:hover{color:var(--tinta)}
@media(max-width:760px){.menu a:not(.btn){display:none}}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--tinta);color:var(--blanco);text-decoration:none;font:700 .98rem "Archivo",sans-serif;padding:12px 22px;border-radius:var(--r-md);border:0;cursor:pointer;box-shadow:var(--shadow-chica);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn .punto{width:26px;height:26px;border-radius:50%;background:var(--lima);display:grid;place-items:center}
.btn .punto svg{width:14px;height:14px}
.btn.lima{background:linear-gradient(115deg,var(--lima-luz),var(--lima) 42%,#b8f521 68%,var(--lima-reflejo) 74%,var(--lima) 90%);color:var(--tinta);border:1.5px solid var(--vidrio-borde)}
.btn.claro{background:linear-gradient(180deg,var(--vidrio-alto),var(--vidrio-bajo));color:var(--tinta);border:1.5px solid var(--vidrio-borde)}

/* Superficies Aero */
.vidrio{background:linear-gradient(180deg,var(--vidrio-alto),var(--vidrio-medio) 16%,var(--vidrio-bajo) 60%,rgba(255,255,255,.45));border:1.5px solid var(--vidrio-borde);border-radius:var(--r-lg);box-shadow:var(--shadow-vidrio)}
.tinta-card{background:linear-gradient(115deg,var(--tinta-luz),var(--tinta) 42%,var(--tinta-medio) 68%,var(--tinta-reflejo) 74%,var(--tinta) 90%);color:var(--blanco);border-radius:var(--r-xl);box-shadow:0 24px 50px rgba(43,42,60,.32)}
.lima-card{background:linear-gradient(115deg,var(--lima-luz),var(--lima) 42%,#b8f521 68%,var(--lima-reflejo) 74%,var(--lima) 90%);color:var(--tinta);border:1.5px solid var(--vidrio-borde);border-radius:var(--r-xl);box-shadow:var(--shadow-vidrio)}

/* Texto */
.rotulo{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.tinta-card .rotulo{color:var(--blanco-60)}
.lima-card .rotulo{color:var(--tinta)}
h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.2;font-weight:800;margin:8px 0 12px;letter-spacing:-.01em}
h3{font-size:1.1rem;line-height:1.35;margin-bottom:6px}
.sub{color:var(--texto-2);max-width:640px}
.tinta-card .sub,.tinta-card p{color:rgba(255,255,255,.82)}

section{padding:64px 0}
.firma{font-family:"Herr Von Muellerhoff",cursive;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1.1;font-weight:400;transform:rotate(-3.5deg);transform-origin:left bottom;display:inline-block;margin-bottom:10px}

/* Hero */
.hero{padding:56px 0 64px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero .lead{font-size:1.12rem;color:var(--texto-2);margin:18px 0 28px;max-width:540px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.insignia{display:inline-flex;align-items:center;gap:8px;background:var(--tinta);color:var(--blanco);font-weight:700;font-size:.82rem;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.insignia i{width:8px;height:8px;border-radius:50%;background:var(--lima)}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr}.hero{padding:36px 0 48px}}

/* Pregunta de ejemplo */
.demo{padding:24px}
.demo .arriba{display:flex;justify-content:space-between;font-size:.8rem;color:var(--blanco-60);font-weight:600;margin-bottom:12px}
.demo .barra{height:6px;background:rgba(255,255,255,.14);border-radius:9px;margin-bottom:18px;overflow:hidden}
.demo .barra div{width:60%;height:100%;background:var(--lima)}
.demo .caso{font-size:.9rem;color:rgba(255,255,255,.82);margin-bottom:10px}
.demo .preg{font-weight:700;margin-bottom:14px}
.opcion{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--blanco);border-radius:12px;padding:10px 12px;margin-bottom:9px;font:500 .92rem "Archivo",sans-serif;cursor:pointer}
.opcion b{min-width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:.75rem}
.opcion:hover{border-color:var(--lima)}
.opcion.bien{border-color:var(--lima);background:rgba(174,242,2,.14)}
.opcion.bien b{background:var(--lima);color:var(--tinta)}
.opcion.mal{border-color:#e26586;background:rgba(226,101,134,.14)}
.demo .resp{font-size:.88rem;color:rgba(255,255,255,.82);min-height:1.5em;margin-top:6px}

/* Rejillas */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
@media(max-width:880px){.g3,.g2{grid-template-columns:1fr}}
.tarjeta{padding:24px}
.tarjeta p{color:var(--texto-2);font-size:.96rem}
.ico{width:52px;height:52px;margin-bottom:14px}

/* Pasos */
.paso{padding:24px;position:relative}
.paso .n{width:36px;height:36px;border-radius:50%;background:var(--tinta);color:var(--lima);font-weight:800;display:grid;place-items:center;margin-bottom:12px}
.paso .tema{display:inline-block;margin-top:10px;font-size:.82rem;background:var(--tinte-marca);border-radius:999px;padding:3px 10px;font-weight:600}

/* DIAN */
.dian{padding:40px;display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center}
.cifras{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cifra{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:16px}
.cifra strong{display:block;font-size:2rem;line-height:1.1;color:var(--lima);font-weight:800}
.cifra span{font-size:.85rem;color:rgba(255,255,255,.82)}
@media(max-width:880px){.dian{grid-template-columns:1fr;padding:28px 20px}}

/* Planes */
.plan{padding:26px;display:flex;flex-direction:column;gap:10px}
.plan .precio{font-size:2rem;font-weight:800;line-height:1.1}
.plan .precio small{font-size:.95rem;font-weight:600;color:var(--texto-2)}
.tinta-card.plan .precio small{color:var(--blanco-60)}
.plan ul{list-style:none;display:grid;gap:8px;margin-top:6px}
.plan li{display:flex;gap:10px;font-size:.95rem}
.plan li svg{flex:none;width:20px;height:20px;margin-top:2px}
.ahorro{align-self:flex-start;background:var(--lima);color:var(--tinta);font-weight:800;font-size:.75rem;border-radius:999px;padding:3px 10px}
.nota{font-size:.88rem;color:var(--texto-2);margin-top:14px}

/* Lista de espera */
.espera{padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
@media(max-width:880px){.espera{grid-template-columns:1fr;padding:26px 20px}}
form{display:grid;gap:12px}
label{font-weight:600;font-size:.9rem}
input,select{width:100%;font:500 1rem "Archivo",sans-serif;padding:12px 14px;border-radius:var(--r-md);border:1.5px solid var(--linea);background:rgba(255,255,255,.9);color:var(--tinta)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:.85rem;color:var(--texto-2)}
.check input{width:20px;height:20px;margin-top:2px;flex:none}
.estado{min-height:1.4em;font-size:.92rem;font-weight:600}
.play{display:inline-flex;align-items:center;gap:10px;background:var(--tinta);color:#fff;border-radius:12px;padding:10px 16px;font-weight:700;font-size:.9rem}
.play small{display:block;font-weight:500;font-size:.72rem;color:var(--blanco-60);line-height:1.1}

/* Preguntas */
.faq{max-width:780px;margin:32px auto 0;display:grid;gap:10px}
details{padding:16px 20px}
summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--texto-2);margin-top:8px}

/* Pie */
footer{margin-top:40px;padding:36px 0;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .wrap > div{max-width:520px}
footer nav{height:auto;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:flex-start}
footer a{text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}
footer small{display:block;margin-top:8px;color:rgba(255,255,255,.82)}

/* Páginas de texto (legales) */
.doc{padding:36px 0 24px}
.doc article{padding:32px;max-width:820px;margin:0 auto}
.doc h1{font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:6px}
.doc h2{font-size:1.25rem;margin:28px 0 8px}
.doc p,.doc li{color:var(--texto-2);margin-bottom:10px}
.doc ul,.doc ol{padding-left:22px}
.doc .fecha{font-size:.88rem;color:var(--texto-3);margin-bottom:18px}
@media(max-width:600px){.doc article{padding:22px 18px}}

/* Cajón con el splash en bucle (6 s): firma, cinta que se dibuja y rellena, nombre */
.cajon-splash{position:relative;display:grid;place-items:center;min-height:380px;padding:32px 24px;overflow:hidden}
.cajon-splash .sp-firma{position:absolute;top:16%;left:50%;margin:0;transform:translateX(-50%) rotate(-3.5deg);font-family:"Herr Von Muellerhoff",cursive;font-size:clamp(2.4rem,5vw,3.6rem);color:#fff;white-space:nowrap;clip-path:inset(0 100% 0 0);animation:cjFirma 6s ease-out infinite}
.cajon-splash .sp-marca{display:flex;align-items:center;gap:3%;width:88%;margin-top:18%}
.cajon-splash .sp-cinta{width:33%;flex:none;overflow:visible}
.cajon-splash .sp-cinta path{fill:transparent;stroke:var(--lima);stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1;animation:cjCinta 6s ease-in-out infinite}
.cajon-splash .sp-nombre{width:64%;transform:translateY(-4%);clip-path:inset(0 100% 0 0);animation:cjNombre 6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes cjFirma{0%,5%{clip-path:inset(0 100% 0 0);opacity:1}22%,88%{clip-path:inset(0 0 0 0);opacity:1}96%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes cjCinta{0%,18%{stroke-dashoffset:1;fill:transparent;opacity:1}42%{stroke-dashoffset:0;fill:transparent}50%,88%{stroke-dashoffset:0;fill:var(--lima);opacity:1}96%,100%{stroke-dashoffset:0;fill:var(--lima);opacity:0}}
@keyframes cjNombre{0%,46%{clip-path:inset(0 100% 0 0);opacity:1}56%,88%{clip-path:inset(0 0 0 0);opacity:1}96%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .cajon-splash .sp-firma,.cajon-splash .sp-nombre{animation:none;clip-path:none}
  .cajon-splash .sp-cinta path{animation:none;stroke-dashoffset:0;fill:var(--lima)}
}

/* Botón del menú: el color del enlace no debe tapar el del botón */
.menu a.btn{color:var(--blanco)}
.menu a.btn:hover{color:var(--blanco)}
/* Dos preguntas de ejemplo lado a lado */
.demos{margin-top:28px;align-items:stretch}
/* Sección DIAN mitad y mitad; cifra: número a la izquierda, texto a la derecha */
.dian{grid-template-columns:1fr 1fr}
.cifras{grid-template-columns:1fr}
.cifra{display:flex;align-items:center;gap:16px;padding:14px 18px}
.cifra strong{min-width:120px;font-size:2.2rem;text-align:right}
.cifra span{font-size:.95rem}
@media(max-width:880px){.cifra strong{min-width:96px;font-size:1.9rem}}
/* La marca dentro de los textos: negrita tinta con subrayado lima (sobre tinta, en lima) */
.mm{font-weight:800;color:var(--tinta);background:var(--lima);padding:.02em .22em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tinta-card .mm{color:var(--tinta);background:var(--lima)}