/* ficheo.app · web.css · LA hoja de la web publica. Ninguna pagina lleva
   <style>, style= ni un px a mano: todo cuelga de los tokens de :root.
   Si te falta una regla, NO la inventes en tu pagina: pidela aqui.
   Movil primero · cortes 640/960/1200 · esquinas 4px · sombra solo al flotar.
   0 tokens 1 base 2 tipografia 3 secciones 4 botones 5 cabecera 6 migas
   7 hero 8 tarjetas 9 iconos 10 pasos 11 dos 12 tics 13 tablas 14 chapas
   15 avisos 16 faq 17 sigue 18 cierre 19 fotos 20 campos 21 pie
   22 utilidades 23 accesibilidad 24 planes 25 /diseno 26 matriz 27 pestanas */

/* == 0 · TOKENS == */
:root{
/* color: negro que manda, verde que senala. No hay mas colores. */
--negro:#111111;--negro-80:#2b2b2b;--tinta:#141622;--gris:#646a7a;
--linea:#e8eaee;--lienzo:#f7f8fa;--blanco:#ffffff;
--verde:#16a34a;--verde-700:#15803d;--verde-50:#f0fdf4;--verde-100:#dcfce7;
/* anchuras: .contenedor / .prosa / .estrecho, y el margen lateral */
--ancho:1200px;--ancho-texto:760px;--ancho-estrecho:560px;--lado:24px;
/* espacio, escala de 4 */
--e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;
--e6:32px;--e7:48px;--e8:64px;--e9:96px;--e10:128px;
--seccion-y:var(--e8);
/* tipografia */
--f-t:'Space Grotesk',ui-sans-serif,system-ui,'Segoe UI',Arial,sans-serif;
--f:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
--t-hero:clamp(40px,5.2vw,64px);--t-1:clamp(34px,4vw,48px);
--t-2:clamp(26px,3vw,34px);--t-3:22px;--t-4:18px;
--t-lead:20px;--t-base:17px;--t-sm:15px;--t-xs:13px;
/* controles: 48 principal, 40 secundario, 4px de esquina en TODO */
--control:48px;--control-sm:40px;--radio:4px;--radio-chapa:999px;
--trazo:1.9;--ico-caja:48px;--ico-caja-g:56px;--cab-alto:64px;--paso:.18s ease;
--sombra-flota:0 12px 32px rgba(17,17,17,.12),0 2px 6px rgba(17,17,17,.06);
--chev:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646a7a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

@media (min-width:640px){ :root{ --lado:40px; } }
@media (min-width:960px){ :root{ --cab-alto:72px; --seccion-y:var(--e9); } }

/* == 1 · BASE == */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--f);font-size:var(--t-base);line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--tinta);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:var(--linea)}
a:hover{text-decoration-color:var(--verde)}
ul,ol{margin:0 0 var(--e4);padding-left:1.15em}
li{margin:0 0 var(--e2)}
p{margin:0 0 var(--e4)}
hr{border:0;border-top:1px solid var(--linea);margin:var(--e7) 0}
b,strong{font-weight:600}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
:target{scroll-margin-top:calc(var(--cab-alto) + var(--e5))}

:focus-visible{outline:2px solid var(--verde-700);outline-offset:2px;border-radius:var(--radio)}
.salta{position:absolute;left:-9999px;top:0;background:var(--negro);color:var(--blanco);padding:var(--e3) var(--e4);z-index:200;border-radius:var(--radio);text-decoration:none}
.salta:focus{left:var(--e3);top:var(--e3)}

/* == 2 · TIPOGRAFÍA == */
h1,h2,h3,h4{font-family:var(--f-t);color:var(--tinta);margin:0 0 var(--e4);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--t-1);line-height:1.1;font-weight:700}
h2{font-size:var(--t-2);line-height:1.2}
h3{font-size:var(--t-3);line-height:1.3}
h4{font-size:var(--t-4);line-height:1.4}
.t-hero{font-size:var(--t-hero);line-height:1.05}

/* SIEMPRE verde, y siempre encima de un H1 o un H2 */
.kicker{display:block;font-family:var(--f);font-size:var(--t-xs);line-height:1.4;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--verde-700);margin:0 0 var(--e3)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--gris);margin:0 0 var(--e5);max-width:62ch}
.sm{font-size:var(--t-sm);line-height:1.5;color:var(--gris)}
.xs{font-size:var(--t-xs);line-height:1.4;color:var(--gris)}
.gris{color:var(--gris)}

.prosa{max-width:var(--ancho-texto)}
.prosa h2{margin-top:var(--e7)}
.prosa h3{margin-top:var(--e6)}
.prosa>:first-child{margin-top:0}
.prosa a{text-decoration-color:var(--verde)}
.prosa blockquote{margin:var(--e5) 0;padding:0 0 0 var(--e5);border-left:3px solid var(--verde);color:var(--gris);font-style:normal}

/* == 3 · CONTENEDORES Y SECCIONES == */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--lado)}
.estrecho{max-width:var(--ancho-estrecho);margin-inline:auto}
.seccion{padding-block:var(--seccion-y)}
.seccion.alterna{background:var(--lienzo);border-block:1px solid var(--linea)}
.seccion.apretada{padding-block:var(--e7)}
.seccion-cab{max-width:68ch;margin:0 0 var(--e7)}
.seccion-cab.centrada{margin-inline:auto;text-align:center}
.seccion-cab h2{margin-bottom:var(--e4)}
.seccion-cab p{color:var(--gris);margin-bottom:0}

/* == 4 · BOTONES == */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);height:var(--control);padding:0 var(--e5);border-radius:var(--radio);font-family:var(--f);font-size:16px;font-weight:600;line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--paso),border-color var(--paso),color var(--paso);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn.pri{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
.btn.pri:hover{background:var(--negro-80);border-color:var(--negro-80)}
.btn.sec{background:var(--blanco);color:var(--tinta);border-color:var(--linea)}
.btn.sec:hover{border-color:var(--gris)}
.btn.ter{background:none;color:var(--tinta);padding:0;height:auto;text-decoration:underline;text-decoration-color:var(--linea)}
.btn.ter:hover{text-decoration-color:var(--verde)}
.btn.ter svg{transition:transform var(--paso)}
.btn.ter:hover svg{transform:translateX(3px)}
.btn.sm{height:var(--control-sm);padding:0 var(--e4);font-size:var(--t-sm)}
.btn.ancho{width:100%}
.btn.claro{background:var(--blanco);color:var(--negro);border-color:var(--blanco)}
.btn.claro:hover{background:var(--lienzo);border-color:var(--lienzo)}
.botones{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}

/* == 5 · CABECERA, DESPLEGABLES Y PANEL MÓVIL == */
.cab{position:sticky;top:0;z-index:100;background:var(--blanco);border-bottom:1px solid var(--linea)}
.cab-in{display:flex;align-items:center;gap:var(--e5);height:var(--cab-alto);max-width:var(--ancho);margin-inline:auto;padding-inline:var(--lado)}
.cab-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.cab-logo img{height:22px;width:auto}
.cab-nav{display:none;flex:1}
.nav-lista{display:flex;align-items:center;gap:var(--e1);list-style:none;margin:0;padding:0}
/* Cada entrada, un contenedor flex. Sin esto, las que son ENLACE («Precios»,
   «Ayuda») quedaban 4 px más altas que las que son BOTÓN: un <li> normal
   alinea su contenido en línea por la línea base, y un <li> flex no. Se veía
   a simple vista, con dos palabras del menú flotando por encima del resto. */
.nav-lista>li{display:flex;align-items:center;margin:0}
.nav-item{position:relative}
.nav-bt,.nav-lista>li>a{display:inline-flex;align-items:center;gap:var(--e1);height:var(--control-sm);padding:0 var(--e3);border:0;background:none;cursor:pointer;font-family:var(--f);font-size:var(--t-sm);font-weight:500;color:var(--tinta);text-decoration:none;border-radius:var(--radio);position:relative}
.nav-bt:hover,.nav-lista>li>a:hover{background:var(--lienzo)}
.nav-bt svg{width:14px;height:14px;transition:transform var(--paso);color:var(--gris)}
.nav-item.abierto>.nav-bt svg{transform:rotate(180deg)}
/* enlace de la sección actual: subrayado verde */
.nav-lista a[aria-current],.nav-item.actual>.nav-bt{color:var(--tinta);font-weight:600}
.nav-lista a[aria-current]::after,.nav-item.actual>.nav-bt::after{content:"";position:absolute;left:var(--e3);right:var(--e3);bottom:2px;height:2px;background:var(--verde);border-radius:var(--radio-chapa)}

.cab-acciones{display:none;gap:var(--e2);margin-left:auto;flex:none}
.cab-burger{display:inline-flex;align-items:center;justify-content:center;width:var(--control-sm);height:var(--control-sm);margin-left:auto;border:1px solid var(--linea);border-radius:var(--radio);background:var(--blanco);cursor:pointer;color:var(--tinta);flex:none}
.cab-burger svg{width:22px;height:22px}
.cab-burger .i-cerrar{display:none}
.cab-burger[aria-expanded="true"] .i-menu{display:none}
.cab-burger[aria-expanded="true"] .i-cerrar{display:block}

.mega{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-flota);padding:var(--e5);z-index:110}
/* EL PUENTE. Entre el botón y el panel hay 6 px de separación, y esos 6 px
   no eran de nadie: bajar el ratón hacia el submenú salía del .nav-item, se
   disparaba su mouseleave y el menú se cerraba en la cara. Esta franja
   invisible cubre el hueco y, como vive DENTRO del panel, el ratón nunca
   llega a salir. No se ve, no ocupa y no tapa nada de la página: solo existe
   mientras el menú está abierto. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.nav-item.abierto>.mega{display:block}
.mega-in{display:grid;gap:var(--e5)}
.mega-in.c2{grid-template-columns:repeat(2,minmax(250px,1fr));width:560px}
.mega-in.c3{grid-template-columns:repeat(3,minmax(230px,1fr));width:800px}
.mega-in.c4{grid-template-columns:repeat(4,minmax(170px,1fr));width:760px}
.mega-tit{font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin:0 0 var(--e3)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin:0}
.mega-en{display:flex;gap:var(--e3);padding:var(--e2);border-radius:var(--radio);text-decoration:none;align-items:flex-start}
.mega-en:hover{background:var(--lienzo)}
.mega-en b{display:block;font-size:var(--t-sm);font-weight:600;line-height:1.35}
.mega-en i{display:block;font-style:normal;font-size:var(--t-xs);line-height:1.4;color:var(--gris)}
.mega-pie{margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--linea)}
.mega-sectores{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);width:720px}
.mega-sectores .mega-en{align-items:center}

.movil{display:none;position:fixed;inset:var(--cab-alto) 0 0 0;z-index:90;background:var(--blanco);overflow-y:auto;padding:var(--e5) var(--lado) var(--e8);box-shadow:var(--sombra-flota)}
.movil.abierto{display:block}
body.sin-scroll{overflow:hidden}
.movil>a,.acc-bt{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--e3);padding:var(--e4) 0;border:0;border-bottom:1px solid var(--linea);background:none;cursor:pointer;font-family:var(--f-t);font-size:var(--t-4);font-weight:600;color:var(--tinta);text-decoration:none;text-align:left}
.acc-bt svg{width:18px;height:18px;color:var(--gris);flex:none;transition:transform var(--paso)}
.acc-bt[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc-cuerpo{display:none;padding:var(--e3) 0 var(--e5)}
.acc-cuerpo.abierto{display:block}
.acc-cuerpo .mega-tit{margin-top:var(--e4)}
.acc-cuerpo ul{list-style:none;margin:0;padding:0}
.acc-cuerpo a{display:block;padding:var(--e3) 0;font-size:var(--t-sm);text-decoration:none;color:var(--tinta)}
.acc-cuerpo a:hover{color:var(--verde-700)}
.movil-acciones{display:grid;gap:var(--e3);margin-top:var(--e6)}

@media (min-width:960px){.cab-nav{display:block}.cab-acciones{display:flex}.cab-burger{display:none}.movil{display:none !important}
}

/* == 6 · MIGAS == */
.migas{padding-block:var(--e5) 0;font-size:var(--t-xs);line-height:1.4;color:var(--gris)}
.migas ol{display:flex;flex-wrap:wrap;gap:var(--e2);list-style:none;margin:0;padding:0}
.migas li{margin:0;display:flex;align-items:center;gap:var(--e2)}
.migas li+li::before{content:"/";color:var(--linea)}
.migas a{color:var(--gris);text-decoration:none}
.migas a:hover{color:var(--verde-700)}
.migas [aria-current]{color:var(--tinta)}

/* == 7 · HERO == */
.hero{padding-block:var(--e7) var(--e8)}
.hero-in{display:grid;gap:var(--e6);align-items:center}
.hero h1{margin-bottom:var(--e4)}
.hero .lead{margin-bottom:var(--e5)}
.hero-notas{margin-top:var(--e5)}
.hero.grande h1{font-size:var(--t-hero);line-height:1.05}
.hero.centrado .hero-in{justify-items:center;text-align:center}
.hero.centrado .lead{margin-inline:auto}
.hero.centrado .botones{justify-content:center}
@media (min-width:960px){.hero{padding-block:var(--e8) var(--e9)}.hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--e8)}.hero.centrado .hero-in{grid-template-columns:1fr;max-width:840px;margin-inline:auto}
}

/* == 8 · REJILLAS Y TARJETAS == */
.rejilla{display:grid;gap:var(--e5);grid-template-columns:1fr}
/* sin esto, un texto largo ensancha su columna y la pagina se va de ancho */
.rejilla>*,.planes>*,.pasos>*,.calc-res>*,.cifras>*,.pie-cols>*,.dos>*,
.mega-in>*,.mega-sectores>*{min-width:0}
@media (min-width:640px){.rejilla.c2,.rejilla.c3,.rejilla.c4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){.rejilla.c3{grid-template-columns:repeat(3,1fr)}.rejilla.c4{grid-template-columns:repeat(4,1fr)}
}

.tarjeta{position:relative;display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e5)}
.seccion.alterna .tarjeta{background:var(--blanco)}
.tarjeta h3{font-size:var(--t-3);margin:0 0 var(--e3)}
.tarjeta h4{margin:0 0 var(--e2)}
.tarjeta p{color:var(--gris);margin:0 0 var(--e4)}
.tarjeta p:last-child,.tarjeta ul:last-child{margin-bottom:0}
.tarjeta .ico{margin-bottom:var(--e4)}
.tarjeta .btn.ter{margin-top:auto;padding-top:var(--e3);align-self:flex-start}
.tarjeta .chapa{align-self:flex-start;margin-bottom:var(--e3)}
/* una por página como mucho: franja verde de 4 px arriba */
.tarjeta.destacada{border-color:var(--verde-100)}
.tarjeta.destacada::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:4px;background:var(--verde);border-radius:var(--radio) var(--radio) 0 0}
.tarjeta.destacada{padding-top:calc(var(--e5) + var(--e1))}
.tarjeta.clicable:hover{border-color:var(--gris)}
.tarjeta.clicable a::after{content:"";position:absolute;inset:0}
.tarjeta.con-foto{padding:0;overflow:hidden}
.tarjeta.con-foto .foto{margin:0;border-radius:0}
.tarjeta.con-foto .foto-hueco,.tarjeta.con-foto img{border-radius:0;border-left:0;border-right:0;border-top:0}
.tarjeta-cuerpo{display:flex;flex-direction:column;flex:1;padding:var(--e5)}
.tarjeta-cuerpo p:last-child{margin-bottom:0}
.tarjeta-cuerpo .btn.ter{margin-top:auto;padding-top:var(--e3);align-self:flex-start}
.tarjeta .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radio);background:var(--negro);color:var(--blanco);font-family:var(--f-t);font-size:var(--t-sm);font-weight:600;margin-bottom:var(--e3)}

/* == 9 · FICHAS DE ICONO == */
.ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--ico-caja);height:var(--ico-caja);border-radius:var(--radio);background:var(--verde-50);border:1px solid var(--verde-100);color:var(--verde-700)}
.ico svg{width:24px;height:24px}
.ico.grande{width:var(--ico-caja-g);height:var(--ico-caja-g)}
.ico.grande svg{width:28px;height:28px}
.ico.sm{width:32px;height:32px}
.ico.sm svg{width:20px;height:20px}
.ico-linea{width:20px;height:20px;display:inline-block;vertical-align:-4px;color:var(--gris)}
svg[data-ico]{fill:none;stroke:currentColor;stroke-width:var(--trazo);stroke-linecap:round;stroke-linejoin:round}

/* == 10 · PASOS == */
.pasos{display:grid;gap:var(--e5);grid-template-columns:1fr;counter-reset:paso}
@media (min-width:640px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.pasos{grid-template-columns:repeat(4,1fr)}.pasos.p3{grid-template-columns:repeat(3,1fr)}
}
.paso{position:relative;padding-top:var(--e5);border-top:2px solid var(--linea);counter-increment:paso}
.paso::before{content:counter(paso,decimal-leading-zero);font-family:var(--f-t);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;color:var(--verde-700);display:block;margin-bottom:var(--e2)}
.paso h3{font-size:var(--t-4);margin:0 0 var(--e2)}
.paso p{color:var(--gris);margin:0}

/* == 11 · DOS COLUMNAS TEXTO + IMAGEN == */
.dos{display:grid;gap:var(--e6);align-items:center}
.dos+.dos{margin-top:var(--e8)}
.dos-txt>:last-child{margin-bottom:0}
@media (min-width:960px){.dos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e8)}.dos.invertida .dos-txt{order:2}.dos.invertida .dos-fig{order:1}
}

/* == 12 · TICS Y CRUCES == */
.tics,.cruces{list-style:none;margin:0 0 var(--e5);padding:0;display:grid;gap:var(--e3)}
.tics li,.cruces li{display:flex;gap:var(--e3);align-items:flex-start;margin:0;line-height:1.55}
.tics li::before,.cruces li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;background-repeat:no-repeat;background-position:center;background-size:20px 20px}
.tics li::before{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.cruces li::before{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646a7a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.cruces li{color:var(--gris)}
@media (min-width:640px){.tics.c2,.cruces.c2{grid-template-columns:repeat(2,1fr);gap:var(--e3) var(--e5)}}

/* == 13 · TABLAS == */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--e5)}
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm);line-height:1.5;min-width:520px}
.tabla caption{text-align:left;font-size:var(--t-xs);color:var(--gris);padding-bottom:var(--e3)}
.tabla th,.tabla td{text-align:left;padding:var(--e3) var(--e4);border-bottom:1px solid var(--linea);vertical-align:top}
.tabla thead th{font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);background:var(--lienzo);border-bottom:1px solid var(--linea)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla th[scope="row"]{font-weight:600;color:var(--tinta)}
.tabla .num-col{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* == 14 · CHAPAS, CIFRAS Y MARCA == */
.chapa{display:inline-flex;align-items:center;gap:var(--e2);height:26px;padding:0 var(--e3);border-radius:var(--radio-chapa);background:var(--lienzo);border:1px solid var(--linea);color:var(--gris);font-size:var(--t-xs);font-weight:600;line-height:1;white-space:nowrap}
.chapa.ok{background:var(--verde-50);border-color:var(--verde-100);color:var(--verde-700)}
.chapa.negra{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
.chapa svg{width:14px;height:14px}
.chapas{display:flex;flex-wrap:wrap;gap:var(--e2)}

.cifra{display:block}
.cifra b{display:block;font-family:var(--f-t);font-size:var(--t-hero);line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--tinta)}
.cifra span{display:block;margin-top:var(--e3);font-size:var(--t-sm);color:var(--gris)}
.cifra.verde b{color:var(--verde-700)}
.cifras{display:grid;gap:var(--e6);grid-template-columns:1fr}
@media (min-width:640px){.cifras{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cifras.c3{grid-template-columns:repeat(3,1fr)}.cifras.c4{grid-template-columns:repeat(4,1fr)}}
.marca{color:var(--verde-700);font-weight:600}

/* == 15 · AVISOS == */
.aviso{display:flex;gap:var(--e4);padding:var(--e5);border-radius:var(--radio);background:var(--lienzo);border:1px solid var(--linea);margin:0 0 var(--e5)}
.aviso>svg{width:24px;height:24px;flex:none;color:var(--gris);margin-top:2px}
.aviso-txt>:last-child{margin-bottom:0}
.aviso-txt>:first-child{margin-top:0}
/* SOLO el titulito, que es hijo directo de .aviso-txt. Antes ponía
   `.aviso b`, y eso alcanzaba también a las negritas de dentro de los
   párrafos: cada `<b>` en línea se volvía un bloque y partía la frase en
   trozos sueltos. Sesenta y tres veces, en dieciséis guías. */
.aviso-txt>b{display:block;margin-bottom:var(--e2)}
.aviso.ok{background:var(--verde-50);border-color:var(--verde-100)}
.aviso.ok>svg{color:var(--verde-700)}
.aviso.ojo{background:var(--blanco);border-color:var(--linea);border-left:3px solid var(--negro)}
.aviso.ojo>svg{color:var(--negro)}

/* == 16 · FAQ == */
.faq{border-top:1px solid var(--linea);margin:0 0 var(--e5)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;justify-content:space-between;gap:var(--e4);align-items:flex-start;padding:var(--e5) 0;cursor:pointer;list-style:none;font-family:var(--f-t);font-size:var(--t-4);font-weight:600;line-height:1.4;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;margin-top:2px;transition:transform var(--paso);background:no-repeat center/20px var(--chev)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{color:var(--verde-700)}
.faq-cuerpo{padding:0 0 var(--e5);max-width:72ch}
.faq-cuerpo>:last-child{margin-bottom:0}
.faq.oculto-por-filtro,.faq details[hidden]{display:none}

.buscador{position:relative;max-width:var(--ancho-estrecho);margin:0 0 var(--e6)}
.buscador svg{position:absolute;left:var(--e4);top:50%;width:20px;height:20px;margin-top:-10px;color:var(--gris);pointer-events:none}
.buscador input{padding-left:calc(var(--e4) + var(--e5) + var(--e2))}

/* == 17 · SIGUE LEYENDO == */
.sigue{border-top:1px solid var(--linea);padding-top:var(--e7);margin-top:var(--e8)}
.sigue h2{font-size:var(--t-3);margin-bottom:var(--e5)}
.sigue .rejilla{gap:var(--e5)}
.sigue .tarjeta p{font-size:var(--t-sm)}

/* == 18 · CIERRE (franja negra final) == */
.cierre{background:var(--negro);color:var(--blanco);padding-block:var(--e8)}
.cierre-in{display:grid;gap:var(--e5);align-items:center;max-width:920px}
.cierre h2{color:var(--blanco);margin:0}
.cierre p{color:rgba(255,255,255,.72);margin:var(--e3) 0 0;font-size:var(--t-lead);line-height:1.55}
.cierre .kicker{color:var(--verde)}
.cierre .botones{margin-top:var(--e2)}
.cierre .btn.sec{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.28)}
.cierre .btn.sec:hover{border-color:var(--blanco)}
.cierre a{color:var(--blanco)}
.cierre .xs{color:rgba(255,255,255,.6)}
@media (min-width:960px){.cierre{padding-block:var(--e9)}.cierre-in{grid-template-columns:minmax(0,1.4fr) auto;gap:var(--e8);max-width:none}
}

/* == 19 · HUECOS DE IMAGEN == */
/* data-medida da la proporcion; web.js mete el <img> y, si carga, tapa el hueco. */
.foto{margin:0;position:relative;width:100%}
.foto img{width:100%;height:auto;border-radius:var(--radio);border:1px solid var(--linea);display:none;object-fit:cover}
.foto.lista img{display:block}
.foto.lista .foto-hueco{display:none}
.foto-hueco{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--e3);width:100%;aspect-ratio:var(--ar,3/2);padding:var(--e5);background:var(--lienzo);border:1px dashed var(--linea);border-radius:var(--radio);overflow:hidden}
.foto-hueco b{font-family:var(--f-t);font-size:var(--t-3);line-height:1;color:var(--tinta)}
.foto-hueco span{font-size:var(--t-sm);line-height:1.5;color:var(--gris);max-width:56ch}
.foto-hueco code{font-size:var(--t-xs);color:var(--gris);background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e1) var(--e2)}
.foto[data-medida="1200×720"]{--ar:1200/720}
.foto[data-medida="1200×600"]{--ar:1200/600}
.foto[data-medida="800×520"]{--ar:800/520}
.foto[data-medida="1440×900"]{--ar:1440/900}
.foto[data-medida="600×600"]{--ar:600/600}
.foto[data-medida="1600×500"]{--ar:1600/500}
.foto.marco{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e3)}
.foto.marco .foto-hueco{background:var(--blanco)}
.foto figcaption,.pie-foto{font-size:var(--t-xs);color:var(--gris);margin-top:var(--e3)}

/* == 20 · CAMPOS Y FORMULARIOS == */
.campos{display:grid;gap:var(--e4)}
.campo{display:grid;gap:var(--e2)}
.campo>label,.etiqueta{font-size:var(--t-sm);font-weight:600;color:var(--tinta)}
.campo .pista{font-size:var(--t-xs);color:var(--gris)}
input[type=text],input[type=email],input[type=search],input[type=number],
input[type=tel],select,textarea{width:100%;min-height:var(--control);padding:0 var(--e4);font-family:var(--f);font-size:var(--t-base);color:var(--tinta);background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);transition:border-color var(--paso)}
textarea{padding:var(--e3) var(--e4);min-height:120px;line-height:1.6}
select{appearance:none;padding-right:var(--e7);cursor:pointer;background-image:var(--chev);background-repeat:no-repeat;background-position:right var(--e4) center;background-size:18px 18px}
input:hover,select:hover,textarea:hover{border-color:var(--gris)}
input::placeholder,textarea::placeholder{color:var(--gris);opacity:.75}
.marca-casilla{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e3) 0;cursor:pointer;font-size:var(--t-sm)}
.marca-casilla input{width:18px;height:18px;min-height:0;flex:none;margin-top:3px;accent-color:var(--verde-700)}
.total{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3);padding:var(--e5);background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--radio)}
.total b{font-family:var(--f-t);font-size:var(--t-2);line-height:1;font-weight:700}

/* == 21 · PIE == */
.pie{background:var(--lienzo);border-top:1px solid var(--linea);padding-block:var(--e8) var(--e6);margin-top:0}
.pie-cols{display:grid;gap:var(--e6);grid-template-columns:1fr}
@media (min-width:640px){.pie-cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.pie-cols{grid-template-columns:repeat(4,1fr);gap:var(--e5)}}
.pie h2,.pie-tit{font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--negro);margin:0 0 var(--e4)}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e2)}
.pie li{margin:0}
.pie a{font-size:var(--t-sm);color:var(--gris);text-decoration:none;line-height:1.5;display:inline-block}
.pie a:hover{color:var(--verde-700)}
.pie-fin{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e4);justify-content:space-between;margin-top:var(--e8);padding-top:var(--e5);border-top:1px solid var(--linea)}
.pie-fin img{height:20px;width:auto}
.pie-fin p{margin:0;font-size:var(--t-xs);color:var(--gris)}
.pie-legales{display:flex;flex-wrap:wrap;gap:var(--e4)}

/* == 22 · UTILIDADES (pocas, a propósito) == */
.centrado{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt4{margin-top:var(--e4)}.mt5{margin-top:var(--e5)}
.mt6{margin-top:var(--e6)}.mt7{margin-top:var(--e7)}
.mb5{margin-bottom:var(--e5)}.mb6{margin-bottom:var(--e6)}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.indice{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e5);margin:0 0 var(--e7)}
.indice p{font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin:0 0 var(--e3)}
.indice ol{margin:0;padding-left:1.2em;display:grid;gap:var(--e2)}
.indice a{font-size:var(--t-sm);color:var(--tinta);text-decoration:none}
.indice a:hover{color:var(--verde-700);text-decoration:underline}

/* == 23 · ACCESIBILIDAD == */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.btn.ter:hover svg{transform:none}
}
@media print{.cab,.movil,.cierre,.pie,.salta{display:none !important}body{font-size:12pt}
}

/* == 24 · PLANES, INTERRUPTOR, CALCULADORA Y MATRIZ == */
/* PLANES.md: Gratis · Esencial · Equipo · Pro. Cuatro, no cinco: con la
   quinta columna las tarjetas salían apretadas y el precio no respiraba.
   Los precios van en el HTML y los recalcula web.js. */
.planes{display:grid;gap:var(--e4);grid-template-columns:1fr}
@media (min-width:640px){.planes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.planes{grid-template-columns:repeat(4,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;height:100%;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e5)}
.plan h3{font-size:var(--t-3);margin:0 0 var(--e2)}
.plan .plan-para{font-size:var(--t-sm);color:var(--gris);margin:0 0 var(--e5)}
.plan-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--e2);margin:0 0 var(--e1)}
.plan-precio b{font-family:var(--f-t);font-size:40px;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--tinta)}
.plan-precio span{font-size:var(--t-sm);color:var(--gris)}
.plan-unidad{font-size:var(--t-xs);line-height:1.4;color:var(--gris);margin:0 0 var(--e5)}
.plan .tics{font-size:var(--t-sm);margin-bottom:var(--e5)}
.plan .btn{margin-top:auto;width:100%}
.plan-nota{font-size:var(--t-xs);line-height:1.45;color:var(--gris);margin:var(--e3) 0 0}
.plan>.chapa{align-self:flex-start;margin:0 0 var(--e3)}
/* Esencial: la única con franja verde. Nunca lleva reclamo de popularidad. */
.plan.destacado{border-color:var(--verde-100);padding-top:calc(var(--e5) + var(--e1))}
.plan.destacado::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:4px;background:var(--verde);border-radius:var(--radio) var(--radio) 0 0}

/* chapa de plan: cuatro tonos, de claro a oscuro. Devuelve la forma de chapa. */
.chapa.plan{display:inline-flex;flex-direction:row;height:26px;width:auto;padding:0 var(--e3);border-radius:var(--radio-chapa)}
.chapa.plan.gratis{background:var(--verde-50);border-color:var(--verde-100);color:var(--verde-700)}
.chapa.plan.esencial{background:var(--lienzo);border-color:var(--linea);color:var(--tinta)}
.chapa.plan.equipo{background:var(--blanco);border-color:var(--tinta);color:var(--tinta)}
.chapa.plan.pro{background:var(--negro);border-color:var(--negro);color:var(--blanco)}

.toggle{display:inline-flex;gap:var(--e1);padding:var(--e1);flex:none;background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--radio-chapa)}
.toggle label{position:relative;margin:0;display:block}
.toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.toggle span{display:flex;align-items:center;height:var(--control-sm);padding:0 var(--e5);border-radius:var(--radio-chapa);font-size:var(--t-sm);font-weight:600;color:var(--gris);white-space:nowrap;transition:background var(--paso),color var(--paso)}
.toggle input:checked+span{background:var(--negro);color:var(--blanco)}
.toggle input:focus-visible+span{outline:2px solid var(--verde-700);outline-offset:2px}
.toggle-fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e5);margin:0 0 var(--e6)}
.toggle-fila p{margin:0;font-size:var(--t-sm);color:var(--gris)}

.calc{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e6)}
.calc-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3);justify-content:space-between;margin:0 0 var(--e4)}
.calc-cab label{font-size:var(--t-sm);font-weight:600}
.calc-cab b{font-family:var(--f-t);font-size:var(--t-2);line-height:1;font-weight:700}
.calc input[type=range]{width:100%;height:24px;min-height:0;padding:0;margin:0;border:0;background:none;accent-color:var(--negro);cursor:pointer}
.calc-topes{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--gris);margin:var(--e2) 0 var(--e6)}
.calc-res{display:grid;gap:var(--e3);grid-template-columns:1fr}
@media (min-width:640px){.calc-res{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.calc-res{grid-template-columns:repeat(4,1fr)}}
.calc-plan{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e4)}
.calc-plan .et{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin:0 0 var(--e2)}
.calc-plan .mes{display:block;font-family:var(--f-t);font-size:var(--t-2);line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}
.calc-plan .anio{display:block;font-size:var(--t-sm);color:var(--gris);margin-top:var(--e1);font-variant-numeric:tabular-nums}

/* matriz de planes: 24 filas × 4 columnas de plan */
.matriz{width:100%;border-collapse:collapse;font-size:var(--t-sm);line-height:1.45}
.matriz caption{text-align:left;font-size:var(--t-xs);color:var(--gris);padding-bottom:var(--e3)}
.matriz th,.matriz td{text-align:left;padding:var(--e3) var(--e4);border-bottom:1px solid var(--linea);vertical-align:top}
.matriz thead th{position:sticky;top:var(--cab-alto);z-index:1;background:var(--lienzo);font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.matriz tbody th{font-weight:600;color:var(--tinta)}
.matriz td{color:var(--gris)}
.matriz tbody tr:last-child th,.matriz tbody tr:last-child td{border-bottom:0}
/* En movil no cabe: los chips escriben data-col y el CSS deja UNA columna. */
.matriz-cols{display:flex;flex-wrap:wrap;gap:var(--e2);margin:0 0 var(--e5)}
@media (min-width:760px){.matriz-cols{display:none}.matriz{min-width:760px}
}
@media (max-width:759px){.matriz[data-col="1"] tr>*:not(:nth-child(1)):not(:nth-child(2)),.matriz[data-col="2"] tr>*:not(:nth-child(1)):not(:nth-child(3)),.matriz[data-col="3"] tr>*:not(:nth-child(1)):not(:nth-child(4)),.matriz[data-col="4"] tr>*:not(:nth-child(1)):not(:nth-child(5)),.matriz[data-col="5"] tr>*:not(:nth-child(1)):not(:nth-child(6)){display:none}.matriz th,.matriz td{padding:var(--e3) var(--e2)}
}
.btn[aria-pressed="true"]{background:var(--negro);color:var(--blanco);border-color:var(--negro)}

/* == 25 · PÁGINA DE NORMAS (/diseno) == */
.muestras{display:grid;gap:var(--e4);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.muestra{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.muestra i{display:block;height:64px;border-bottom:1px solid var(--linea)}
.muestra b{display:block;font-size:var(--t-sm);font-weight:600;padding:var(--e3) var(--e3) 0}
.muestra code{display:block;font-size:var(--t-xs);color:var(--gris);padding:0 var(--e3) var(--e3)}
.c-negro{background:var(--negro)}.c-negro80{background:var(--negro-80)}
.c-tinta{background:var(--tinta)}.c-gris{background:var(--gris)}
.c-linea{background:var(--linea)}.c-lienzo{background:var(--lienzo)}
.c-blanco{background:var(--blanco)}.c-verde{background:var(--verde)}
.c-verde700{background:var(--verde-700)}.c-verde50{background:var(--verde-50)}
.c-verde100{background:var(--verde-100)}
.escala{display:grid;gap:var(--e3);margin:0 0 var(--e5)}
.escala div{display:flex;align-items:center;gap:var(--e4);font-size:var(--t-sm)}
.escala i{display:block;height:14px;flex:none;background:var(--verde-100);border-left:2px solid var(--verde)}
.e-1{width:var(--e1)}.e-2{width:var(--e2)}.e-3{width:var(--e3)}
.e-4{width:var(--e4)}.e-5{width:var(--e5)}.e-6{width:var(--e6)}
.e-7{width:var(--e7)}.e-8{width:var(--e8)}.e-9{width:var(--e9)}
.e-10{width:var(--e10)}
.sino{display:grid;gap:var(--e5);margin:0 0 var(--e5)}
@media (min-width:640px){.sino{grid-template-columns:repeat(2,1fr)}}
.sino>div{border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e5)}
.sino .et{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 var(--e4)}
.sino .si{border-color:var(--verde-100);background:var(--verde-50)}
.sino .si .et{color:var(--verde-700)}
.sino .no .et{color:var(--gris)}
.iconos{display:grid;gap:var(--e3);grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}
.iconos figure{display:flex;flex-direction:column;align-items:center;gap:var(--e2);margin:0;padding:var(--e4) var(--e2);text-align:center;border:1px solid var(--linea);border-radius:var(--radio)}
.iconos svg{width:24px;height:24px;color:var(--tinta)}
.iconos.mini svg{width:20px;height:20px}
.iconos figcaption{font-size:var(--t-xs);line-height:1.35;color:var(--gris);overflow-wrap:anywhere}
.medida{display:block;font-size:var(--t-xs);color:var(--gris);margin:var(--e2) 0 var(--e5)}
.regla{display:grid;gap:var(--e2);margin:0 0 var(--e6);padding:var(--e5);background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--radio);font-size:var(--t-sm)}
.regla code{color:var(--tinta)}

/* ── 27 · PESTANAS ────────────────────────────────────────────────────
   Para paginas largas que son varios documentos a la vez. No se usan para
   esconder contenido de venta: lo que hay que leer para decidir va a la
   vista, y las pestanas solo separan cosas que se consultan por turnos. */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);
  margin:0 0 var(--e6);overflow-x:auto;-webkit-overflow-scrolling:touch}
.pestanas button{flex:0 0 auto;border:0;background:none;cursor:pointer;
  font-family:var(--f);font-size:var(--t-sm);font-weight:500;color:var(--gris);
  padding:10px var(--e4);border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap}
.pestanas button:hover{color:var(--tinta);background:var(--lienzo)}
.pestanas button[aria-selected=true]{color:var(--tinta);font-weight:600;
  border-bottom-color:var(--verde)}
.pestanas button:focus-visible{outline:2px solid var(--verde);outline-offset:-2px}
.panel-pestana[hidden]{display:none}