/* Peralta Labs · portada de IA para empresas (2-nov-2026).
   Una firma que entrega documentos serios: papel, tinta y pluma, reglas finas y mucho aire.
   Cada color, medida y tiempo sale de las variables de :root; fuera de :root solo se escriben
   bordes de 1px y los cortes de @media (una variable no cabe en una condición de @media).
   harness/portada-empresas.mjs truena si aparece un hex o una medida suelta fuera de aquí. */
:root{
  /* color: la paleta de la marca (peralta-labs-logo/LEEME.md) y sus derivados */
  --paper:#F6F7F9; --paper-sunk:#ECEEF3; --surface:#FFFFFF;
  --rule:#D9DDE5; --rule-strong:#AEB5C2;
  --ink:#10141F; --ink-soft:#4A5163; --meta:#5D6577;
  --pluma:#2340D8; --pluma-hover:#1B33B5; --pluma-wash:#E6EAFC;
  --on-ink:#F6F7F9; --on-ink-soft:#B9BFCC; --on-ink-rule:#2C3244;
  --alerta:#B42318; --alerta-wash:#FDECEA;
  --listo:#146C43; --listo-wash:#E8F4ED;
  --seleccion:#D5DCFA; --scroll:#C3C8D3;
  /* letra */
  --display:'Funnel Display','Helvetica Neue',Arial,sans-serif;
  --sans:'Funnel Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-meta:13px; --t-sm:14px; --t-base:16px; --t-md:17px;
  --t-lead:clamp(16px,0.55vw + 14px,20px);
  --t-h3:clamp(18px,0.3vw + 16.5px,20px);
  --t-h2:clamp(30px,2.2vw + 18px,48px);
  --t-h2-col:clamp(28px,1.3vw + 20px,40px);
  --t-h1:clamp(34px,3.8vw + 18px,72px);
  --t-dato:clamp(44px,3.2vw + 30px,72px);
  --t-precio:clamp(26px,1.4vw + 20px,36px);
  --lh-h1:1.02; --lh-h2:1.06; --lh-h3:1.3; --lh-body:1.6; --lh-lead:1.5;
  --tr-h1:-.035em; --tr-h2:-.03em; --tr-h3:-.012em; --tr-meta:.01em;
  --peso-h:650; --peso-fuerte:600; --peso-medio:500;
  /* espacio: una sola escala */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:136px;
  --gut:20px; --max:1240px; --medida:64ch; --medida-corta:46ch;
  /* forma */
  --radio:12px; --radio-sm:8px; --anillo:2px; --anillo-sep:3px;
  --ctl:52px; --ctl-sm:44px; --check:20px; --icono:20px;
  --logo-h:40px; --logo-h-ancho:28px; --marca-w:35px; --marca-h:20px;
  --foto-max:560px;
  /* movimiento */
  --ease:cubic-bezier(.2,.7,.2,1); --rapido:.18s; --medio:.28s;
  --sube:110%;
  /* ilustraciones: sombra, trama y tamaños. Ningún texto de una ilustración mide menos de 12 px en pantalla:
     --il-t va en unidades del esquema, que a 360 px se dibuja al 89 % (13.5 × 320/360 = 12) y a 320 px al 78 %
     (de ahí los 15.5 de abajo). El corte se decide con el ancho de la ventana y el esquema se dibuja con el útil:
     Chrome y Edge de escritorio dibujan aquí una barra de 12 px (::-webkit-scrollbar), y con ella una ventana de
     360 a 371 px medía 11.5–11.9. Por eso los 15.5 siguen hasta 379 px. */
  --sombra:rgba(16,20,31,.07); --sombra-2:rgba(16,20,31,.05);
  --trama:24px; --trama-papel:rgba(174,181,194,.34); --trama-noche:rgba(246,247,249,.05);
  --pluma-niebla:rgba(35,64,216,.26); --pluma-noche:#8193F6; --pluma-borde:#C5CEF6;
  --t-maq:13px; --t-maq-sm:12.5px; --t-micro:12px; --t-nano:12px;
  --il-t:13.5px; --il-t-sm:13.5px; --il-t-hub:30px;
  --cuadro-vacio:#6D727E; --il-linea:#868E9D;
  --vis-max:480px; --maq-max:480px; --cuadros-max:320px; --hoja-w:92px; --barras-h:64px; --tel-w:112px; --carril:76px;
  --ico-tile:36px; --ico-sm:14px; --ico-md:22px; --nodo:52px; --insignia:20px; --radio-pill:999px;
}
@media (min-width:900px){ :root{ --gut:64px; --logo-h:48px; --logo-h-ancho:32px; } }
@media (max-width:379px){ :root{ --il-t:15.5px; --il-t-sm:15.5px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s5)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-base);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
::selection{background:var(--seleccion);color:var(--ink)}
a{color:var(--pluma);text-underline-offset:var(--s1);text-decoration-thickness:1px}
a:hover{color:var(--pluma-hover)}
:focus-visible{outline:var(--anillo) solid var(--pluma);outline-offset:var(--anillo-sep);border-radius:var(--s1)}
::-webkit-scrollbar{width:var(--s3);height:var(--s3)}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:var(--s3);border:var(--anillo-sep) solid var(--paper)}
::-webkit-scrollbar-track{background:transparent}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:var(--peso-h);text-wrap:balance;color:var(--ink)}
p,ul,ol,dl,dd,figure{margin:0}
p{text-wrap:pretty}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:var(--ctl);
  padding:0 var(--s5);border:1px solid var(--pluma);border-radius:var(--radio-sm);background:var(--pluma);color:var(--surface);
  font-family:var(--sans);font-weight:var(--peso-fuerte);font-size:var(--t-md);line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color var(--rapido) var(--ease),border-color var(--rapido) var(--ease),color var(--rapido) var(--ease)}
.btn:hover{background:var(--pluma-hover);border-color:var(--pluma-hover);color:var(--surface)}
.btn svg{width:var(--icono);height:var(--icono);flex:none;transition:transform var(--medio) var(--ease)}
.btn:hover svg{transform:translateX(var(--s1))}
.btn--linea{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn--linea:hover{background:var(--surface);border-color:var(--ink);color:var(--ink)}
.btn--claro{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.btn--claro:hover{background:var(--surface);border-color:var(--surface);color:var(--ink)}
.btn--chico{min-height:var(--ctl-sm);padding:0 var(--s4);font-size:var(--t-sm)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:progress}
.enlace{font-weight:var(--peso-fuerte)}

/* ── encabezado ─────────────────────────────────────────────────────────── */
.cab{padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.cab .wrap{display:flex;align-items:center;gap:var(--s5)}
.marca{display:inline-flex;align-items:center;gap:var(--s2);color:var(--ink);text-decoration:none;flex:none}
.marca svg{width:var(--marca-w);height:var(--marca-h)}
.marca span{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.03em}
.cab__que{display:none;color:var(--meta);font-size:var(--t-sm);padding-left:var(--s5);border-left:1px solid var(--rule);line-height:1.3;max-width:30ch}
.cab__nav{display:none}
.cab .btn{margin-left:auto}

/* ── portada ────────────────────────────────────────────────────────────── */
.hero{padding:var(--s6) 0 var(--s8)}
.hero h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);max-width:16ch}
.hero__sub{margin-top:var(--s4);font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--ink-soft);max-width:var(--medida)}
.hero__cta{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero__para{margin-top:var(--s4);font-size:var(--t-md);font-weight:var(--peso-fuerte);color:var(--ink)}
/* El precio de entrada, en un renglón corto debajo de «para quién»: se ve sin bajar en el Safari de un iPhone. */
.hero__precio{margin-top:var(--s1);font-size:var(--t-md);font-weight:var(--peso-medio);color:var(--ink)}
.hero__wa{margin-top:var(--s2);font-size:var(--t-sm);color:var(--ink-soft)}
.hero__wa a{font-weight:var(--peso-fuerte)}

/* La ficha: lo que un director pregunta en el primer minuto, contestado como en un documento. */
.ficha{margin-top:var(--s7);border-top:1px solid var(--ink)}
.ficha__t{font-family:var(--sans);font-size:var(--t-sm);font-weight:var(--peso-fuerte);color:var(--ink);padding:var(--s3) 0;
  border-bottom:1px solid var(--rule)}
.ficha dl{display:grid}
.ficha div{display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.ficha dt{font-size:var(--t-sm);color:var(--meta);line-height:1.45}
.ficha dd{font-size:var(--t-base);color:var(--ink);line-height:1.45}
.ficha dd b{font-weight:var(--peso-fuerte)}
.ficha__precio dd{text-wrap:balance}

/* ── secciones ──────────────────────────────────────────────────────────── */
.sec{padding:var(--s9) 0}
.sec + .sec{border-top:1px solid var(--rule)}
.sec__cab h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);max-width:22ch}
.sec__cab p{margin-top:var(--s4);font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--ink-soft);max-width:var(--medida)}
.sec__cuerpo{margin-top:var(--s7)}
.nota{font-size:var(--t-sm);color:var(--meta);max-width:var(--medida)}

/* Contexto: una banda de tinta, como el extracto de un informe */
.tinta{background:var(--ink);color:var(--on-ink)}
.tinta h2,.tinta h3{color:var(--on-ink)}
.tinta .sec__cab p,.tinta p{color:var(--on-ink-soft)}
.tinta a{color:var(--on-ink)}
.datos{display:grid;border-top:1px solid var(--on-ink-rule)}
.dato{display:grid;align-content:start;gap:var(--s3);padding:var(--s5) 0;border-bottom:1px solid var(--on-ink-rule)}
.dato__n{font-family:var(--display);font-weight:var(--peso-h);font-size:var(--t-dato);line-height:1;letter-spacing:var(--tr-h2);color:var(--on-ink)}
.dato p{font-size:var(--t-md);color:var(--on-ink);max-width:var(--medida-corta)}
.dato cite{display:block;margin-top:var(--s2);font-style:normal;font-size:var(--t-meta);color:var(--on-ink-soft);letter-spacing:var(--tr-meta)}
.tinta .cierre{margin-top:var(--s7);font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--on-ink);max-width:var(--medida)}

.medida{margin-top:var(--s7);padding:var(--s6);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radio)}
.medida h3{font-size:var(--t-h3)}
.medida p{margin-top:var(--s3);color:var(--ink-soft);max-width:var(--medida)}
.medida .enlace{display:inline-block;margin-top:var(--s4)}
.medida .medida__alcance{font-size:var(--t-sm)}
.limites{margin-top:var(--s6)}


/* ── ilustraciones ─────────────────────────────────────────────────────────
   Todo dibujado aquí, en la tinta del sitio: el esquema del hero, las maquetas de cada solución, los cuadros
   de las cifras y la línea del método. Ninguna foto, ningún logo de terceros, ninguna cifra de resultado. */
.ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* El esquema del hero: sus sistemas → la IA → lo que recibe su equipo. Quieto. Vertical hasta 1099 px; desde 1100,
   horizontal y a todo lo ancho, debajo del texto y la ficha. */
.hero__vis{position:relative;isolation:isolate;margin:var(--s7) auto 0;max-width:var(--vis-max)}
.hero__vis::before{content:"";position:absolute;inset:calc(var(--s6) * -1) 0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--trama-papel) 1px,transparent 1px),linear-gradient(90deg,var(--trama-papel) 1px,transparent 1px);
  background-size:var(--trama) var(--trama);background-position:center;
  -webkit-mask-image:radial-gradient(closest-side,var(--ink) 35%,transparent);mask-image:radial-gradient(closest-side,var(--ink) 35%,transparent)}
.il{display:block;width:100%;height:auto;overflow:visible}
.il text{font-family:var(--sans);font-size:var(--il-t);font-weight:var(--peso-medio);fill:var(--ink)}
.il .il-ley{font-size:var(--il-t-sm);font-weight:var(--peso-fuerte);fill:var(--meta);letter-spacing:var(--tr-meta)}
.il-linea path{fill:none;stroke:var(--il-linea);stroke-width:1.25}
.il--h{display:none}
.il-grupo rect{fill:var(--paper);stroke:var(--rule)}
.il-sis rect{fill:var(--surface);stroke:var(--rule-strong)}
.il-ico{fill:none;stroke:var(--ink-soft);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.il-sal rect{fill:var(--surface);stroke:var(--pluma)}
.il-sal .il-ico{stroke:var(--pluma)}
.il-halo{fill:var(--pluma-wash);stroke:var(--pluma);opacity:.35}
.il-nucleo{fill:var(--pluma)}
.il .il-nucleo__t{font-family:var(--display);font-size:var(--il-t-hub);font-weight:var(--peso-h);fill:var(--surface);letter-spacing:var(--tr-h3)}
.il .il-nucleo__s{font-size:var(--il-t-sm);fill:var(--pluma-wash)}
.il-equipo rect{fill:var(--ink)}
.il .il-equipo text{fill:var(--on-ink);font-weight:var(--peso-fuerte)}
.il-equipo .il-ico{stroke:var(--on-ink)}

/* La banda de tinta: una trama de papel milimétrico que se desvanece y un poco de la pluma arriba */
.tinta{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse 60% 55% at 100% 0%,var(--pluma-niebla),transparent 70%),var(--ink)}
.tinta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--trama-noche) 1px,transparent 1px),linear-gradient(90deg,var(--trama-noche) 1px,transparent 1px);
  background-size:var(--trama) var(--trama);
  -webkit-mask-image:linear-gradient(to bottom,var(--ink),transparent 80%);mask-image:linear-gradient(to bottom,var(--ink),transparent 80%)}
.cuadros{display:block;width:100%;max-width:var(--cuadros-max);height:auto;margin:var(--s1) 0 var(--s2)}
.w-vacio{fill:none;stroke:var(--cuadro-vacio)}
.w-lleno{fill:var(--pluma-noche)}
.tinta .cuadros-ley{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5);font-size:var(--t-meta);color:var(--on-ink-soft)}
.cuadros-ley svg{flex:none;width:var(--s3);height:var(--s3)}

/* Soluciones: cada una con su maqueta (ilustración de ejemplo, datos genéricos) */
.ilus-nota{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5);font-size:var(--t-meta);color:var(--meta)}
.ilus-nota .ico{flex:none;width:var(--ico-sm);height:var(--ico-sm)}
#soluciones .sec__cuerpo{margin-top:var(--s5)}
.sols{list-style:none;padding:0;border-top:1px solid var(--ink)}
.sol{display:grid;gap:var(--s3);padding:var(--s6) 0;border-bottom:1px solid var(--rule);grid-template-areas:"h" "maq" "p" "m"}
.sol h3{grid-area:h;display:flex;align-items:center;gap:var(--s3);font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3)}
.sol > p{grid-area:p;color:var(--ink-soft);max-width:var(--medida)}
.sol > .mide{grid-area:m;font-size:var(--t-sm);color:var(--meta)}
.sol .mide b,.sol strong{color:var(--ink);font-weight:var(--peso-fuerte)}
.sol > .maq{grid-area:maq;margin:var(--s2) 0}
.sol__ico{flex:none;display:grid;place-items:center;width:var(--ico-tile);height:var(--ico-tile);border-radius:var(--radio-sm);background:var(--pluma-wash);color:var(--pluma)}
.sol__ico .ico{width:var(--icono);height:var(--icono)}

.maq{width:100%;max-width:var(--maq-max);overflow:hidden;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radio);
  box-shadow:0 var(--s2) var(--s6) var(--sombra),0 1px var(--s1) var(--sombra-2);font-size:var(--t-maq);line-height:1.4;color:var(--ink)}
.maq .ico{flex:none;width:var(--ico-sm);height:var(--ico-sm)}
.maq__barra{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);background:var(--paper);border-bottom:1px solid var(--rule);
  font-size:var(--t-micro);font-weight:var(--peso-fuerte);color:var(--ink-soft);letter-spacing:var(--tr-meta)}
.maq__barra .ico{color:var(--meta)}
.maq__barra > span:first-of-type{min-width:0}
.maq__ej{flex:none;margin-left:auto;padding:0 var(--s2);border:1px solid var(--rule);border-radius:var(--radio-pill);font-weight:var(--peso-medio);color:var(--meta);white-space:nowrap}
.maq__ej-mas{display:none}
.maq__cuerpo{display:grid;gap:var(--s2);padding:var(--s4)}
/* conversación */
.maq-b{justify-self:start;max-width:88%;padding:var(--s2) var(--s3);background:var(--paper-sunk);border-radius:var(--radio-sm) var(--radio-sm) var(--radio-sm) var(--s1)}
.maq-b--r{justify-self:end;background:var(--pluma-wash);border-radius:var(--radio-sm) var(--radio-sm) var(--s1) var(--radio-sm)}
.maq-b__dato,.maq-fuente{display:flex;align-items:center;gap:var(--s1);margin-top:var(--s1);font-size:var(--t-micro);font-weight:var(--peso-fuerte);color:var(--pluma-hover)}
.maq-fuente{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--pluma-borde)}
.maq-pase{justify-self:center;display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s1);padding:var(--s1) var(--s3);
  border:1px dashed var(--rule-strong);border-radius:var(--radio-pill);font-size:var(--t-micro);font-weight:var(--peso-fuerte)}
.maq-pase .ico{color:var(--pluma)}
/* embudo */
/* En el celular cada etapa es un carril (etapa | tarjetas); desde 480 px, tres columnas lado a lado. */
.maq-col{display:grid;grid-template-columns:var(--carril) repeat(2,minmax(0,1fr));align-items:center;gap:var(--s1);padding:var(--s1);background:var(--paper);border-radius:var(--radio-sm)}
.maq-col__t{padding:0 var(--s1);font-size:var(--t-micro);font-weight:var(--peso-fuerte);color:var(--meta)}
@media (min-width:480px){
  .maq__ej-mas{display:inline}
  .maq-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .maq-embudo{grid-template-columns:repeat(3,minmax(0,1fr))}
  .maq-col{grid-template-columns:minmax(0,1fr);align-items:stretch;align-content:start}
  .maq-col__t{padding:var(--s1) var(--s1) 0}
}
.maq-tar{padding:var(--s1) var(--s2);background:var(--surface);border:1px solid var(--rule);border-radius:var(--s1);font-size:var(--t-maq-sm);font-weight:var(--peso-fuerte)}
.maq-tar span{display:flex;align-items:center;gap:var(--s1);font-size:var(--t-micro);font-weight:var(--peso-medio);color:var(--meta)}
.maq-tar--cita{border-color:var(--pluma)}
.maq-tar--cita span{color:var(--pluma-hover)}
.maq-aviso{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--pluma-wash);border-radius:var(--radio-sm);font-size:var(--t-maq-sm);font-weight:var(--peso-medio)}
.maq-aviso .ico{color:var(--pluma)}
/* facturas */
.maq-fact{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--rule);border-radius:var(--radio-sm)}
.maq .maq-fact > .ico{width:var(--icono);height:var(--icono);color:var(--ink-soft)}
.maq-fact p{min-width:0;font-size:var(--t-micro);color:var(--meta)}
.maq-fact b{display:block;font-size:var(--t-maq);font-weight:var(--peso-fuerte);color:var(--ink)}
.maq-fact span{display:block}
.maq-fact--ex{background:var(--alerta-wash);border:1px dashed var(--alerta)}
.maq .maq-fact--ex > .ico,.maq-fact--ex p{color:var(--alerta)}
.maq-chip{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:var(--radio-pill);
  font-size:var(--t-micro);font-weight:var(--peso-fuerte);line-height:1.2;white-space:nowrap}
.maq .maq-chip .ico{width:var(--s3);height:var(--s3)}
.maq-chip--ok{background:var(--listo-wash);color:var(--listo)}
.maq-chip--alerta{background:var(--alerta-wash);color:var(--alerta)}
.maq-fact--ex .maq-chip--alerta{background:var(--surface)}
.maq-checks{list-style:none;margin:0;padding:var(--s1) var(--s2) var(--s2);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1) var(--s3);font-size:var(--t-micro);color:var(--ink-soft)}
.maq-checks li{display:flex;align-items:center;gap:var(--s1)}
.maq .maq-checks .ico{width:var(--s3);height:var(--s3);color:var(--listo)}
/* captura: de la hoja a los campos */
.maq-cap{grid-template-columns:var(--hoja-w) auto minmax(0,1fr);align-items:center;gap:var(--s3)}
.maq-hoja{display:grid;align-content:start;gap:var(--s1);aspect-ratio:3 / 4;padding:var(--s2);background:var(--paper);border:1px solid var(--rule);border-radius:var(--s1);
  outline:1px dashed var(--pluma);outline-offset:var(--s1);transform:rotate(-2deg)}
.maq-hoja b{margin-bottom:var(--s1);font-size:var(--t-nano);font-weight:var(--peso-fuerte);line-height:1.2}
.maq-hoja b span{white-space:nowrap}
.maq-hoja i{display:block;height:var(--s1);border-radius:var(--s1);background:var(--rule)}
.maq-hoja i.corta{width:60%}
.maq .maq-cap__f{width:var(--icono);height:var(--icono);color:var(--pluma)}
.maq-campos{display:grid;gap:var(--s1);font-size:var(--t-maq-sm)}
.maq-campos div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--s2);padding:var(--s1) var(--s2);background:var(--paper);border-radius:var(--s1)}
.maq-campos dt{font-size:var(--t-micro);color:var(--meta)}
.maq-campos dd{font-weight:var(--peso-fuerte);min-width:0}
.maq-campos .duda{background:var(--alerta-wash)}
.maq-campos .duda dt,.maq-campos .duda dd{color:var(--alerta)}
/* reporte */
.maq-rep{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.maq-rep b{font-weight:var(--peso-fuerte)}
.maq-rep span{font-size:var(--t-micro);color:var(--meta)}
.maq-barras{display:flex;align-items:flex-end;gap:var(--s4);height:var(--barras-h);margin-top:var(--s1);padding:0 var(--s3);border-bottom:1px solid var(--rule-strong);
  background:linear-gradient(var(--rule) 1px,transparent 1px) 0 0 / 100% 33.4%}
.maq-barras i{flex:1;background:var(--pluma);border-radius:var(--s1) var(--s1) 0 0}
.maq-barras .b1{height:78%}
.maq-barras .b2{height:62%}
.maq-barras .b3{height:46%}
.maq-barras .b4{height:70%}
.maq-ejes{display:flex;gap:var(--s4);padding:0 var(--s3);font-size:var(--t-micro);color:var(--meta)}
.maq-ejes span{flex:1;text-align:center}
.maq-ind{list-style:none;margin:var(--s1) 0 0;padding:0;display:grid;gap:var(--s1)}
.maq-ind li{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s1) var(--s2);border:1px solid var(--rule);border-radius:var(--radio-sm);
  font-size:var(--t-micro);font-weight:var(--peso-medio);color:var(--ink-soft)}
.maq-ind .maq-chip{margin-left:0;max-width:100%;white-space:normal}

/* Software a la medida: un teléfono dibujado con líneas, sin la pantalla de nadie */
.medida__vis{display:none}
.tel{fill:var(--surface);stroke:var(--ink)}
.tel-isla{fill:var(--ink)}
.tel-cab{fill:var(--pluma-wash)}
.tel-p{fill:var(--pluma)}
.tel-g{fill:var(--rule)}
.tel-g2{fill:var(--paper-sunk)}

/* Método: la línea de etapas, con su icono y su número en cada nodo */
.etapas{list-style:none;padding:0;display:grid;counter-reset:etapa}
.etapa{position:relative;counter-increment:etapa;align-content:start;padding:0 0 var(--s6) calc(var(--nodo) + var(--s5))}
.etapa:last-child{padding-bottom:0}
.etapa::before{content:"";position:absolute;left:calc(var(--nodo) / 2);top:calc(var(--nodo) + var(--s2));bottom:var(--s2);width:1px;background:var(--rule-strong)}
.etapa:last-child::before{content:none}
.etapa__nodo{position:absolute;left:0;top:0;display:grid;place-items:center;width:var(--nodo);height:var(--nodo);border:1px solid var(--ink);border-radius:50%;background:var(--surface);color:var(--pluma)}
.etapa__nodo .ico{width:var(--ico-md);height:var(--ico-md)}
.etapa__nodo::after{content:counter(etapa);position:absolute;top:calc(var(--s1) * -1);right:calc(var(--s1) * -1);display:grid;place-items:center;
  width:var(--insignia);height:var(--insignia);border-radius:50%;background:var(--pluma);color:var(--surface);font-family:var(--display);font-size:var(--t-micro);font-weight:var(--peso-h);line-height:1}
.etapa h3{padding-top:var(--s3);font-size:var(--t-h3);line-height:var(--lh-h3)}
.etapa .cuando{display:table;margin-top:var(--s2);padding:var(--s1) var(--s3);border-radius:var(--radio-pill);background:var(--paper-sunk);font-size:var(--t-meta);font-weight:var(--peso-medio);color:var(--ink-soft)}
.etapa p{margin-top:var(--s3);color:var(--ink-soft);max-width:var(--medida)}

/* Industrias */
.industrias{list-style:none;padding:0;display:grid;border-top:1px solid var(--ink)}
.industrias li{padding:var(--s4) 0;border-bottom:1px solid var(--rule);display:grid;align-content:start;gap:var(--s1)}
.industrias h3{font-size:var(--t-md);font-family:var(--sans);font-weight:var(--peso-fuerte);letter-spacing:0}
.industrias p{font-size:var(--t-sm);color:var(--ink-soft)}

/* Casos: la franja de logos, separada por grupo, y cada caso con su etiqueta adentro */
.franja{display:grid;gap:var(--s5);padding:var(--s6) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.grupo h3{font-family:var(--sans);font-size:var(--t-meta);font-weight:var(--peso-fuerte);color:var(--meta);letter-spacing:var(--tr-meta)}
.grupo ul{list-style:none;padding:0;margin-top:var(--s3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6)}
.grupo li{display:flex;align-items:center;gap:var(--s2);min-height:var(--logo-h)}
.logo{height:var(--logo-h);width:auto;filter:grayscale(1) contrast(1.15);opacity:.9;transition:filter var(--medio) var(--ease),opacity var(--medio) var(--ease)}
.logo--ancho{height:var(--logo-h-ancho)}
.logo:hover{filter:none;opacity:1}
.logo-texto{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.01em;color:var(--ink-soft);line-height:1}
/* Un cliente que se presenta por su giro y su ciudad, sin nombre ni logo: con la letra del texto y no la de los
   logos, para que no parezca una marca. */
.logo-reservado{font-family:var(--sans);font-size:var(--t-md);font-weight:var(--peso-fuerte);color:var(--ink-soft);line-height:1.3}
.casos{display:grid;gap:0;margin-top:var(--s6)}
.caso{padding:var(--s5) 0;border-bottom:1px solid var(--rule);display:grid;align-content:start;gap:var(--s3)}
.caso__eti{justify-self:start;font-size:var(--t-meta);font-weight:var(--peso-fuerte);color:var(--ink-soft);
  padding:var(--s1) var(--s3);border:1px solid var(--rule-strong);border-radius:var(--radio-sm);letter-spacing:var(--tr-meta)}
.caso h3{font-size:var(--t-h3);line-height:var(--lh-h3)}
.caso__giro{font-size:var(--t-sm);color:var(--meta);margin-top:var(--s1)}
.caso p{color:var(--ink-soft);max-width:var(--medida)}
.caso__estado{font-size:var(--t-sm);color:var(--ink)}
.caso__estado::before{content:"";display:inline-block;width:var(--s2);height:var(--s2);border-radius:50%;background:var(--pluma);margin-right:var(--s2);vertical-align:middle}
.transparencia{margin:var(--s5) 0;padding:var(--s4) var(--s5);background:var(--paper-sunk);border-radius:var(--radio-sm);font-size:var(--t-sm);color:var(--ink-soft);max-width:var(--medida)}
.casos__pie{padding:var(--s5) 0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s4)}

/* Información y seguridad */
.reglas{display:grid;border-top:1px solid var(--ink)}
.reglas div{display:grid;align-content:start;gap:var(--s2);padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.reglas dt{font-family:var(--display);font-weight:var(--peso-h);font-size:var(--t-h3);line-height:var(--lh-h3)}
.reglas dd{color:var(--ink-soft);max-width:var(--medida)}

/* Quiénes somos */
.socios{display:grid;gap:var(--s7)}
.socios figure{max-width:var(--foto-max)}
.socios img{width:100%;height:auto;border-radius:var(--radio);background:var(--paper-sunk)}
.socios figcaption{margin-top:var(--s3);font-size:var(--t-sm);color:var(--meta)}
.socio{padding:var(--s5) 0;border-top:1px solid var(--rule)}
.socio h3{font-size:var(--t-h3)}
.socio .rol{display:block;font-size:var(--t-sm);color:var(--meta);margin-top:var(--s1)}
.socio p{margin-top:var(--s3);color:var(--ink-soft);max-width:var(--medida)}
.socios__texto > p{color:var(--ink-soft);max-width:var(--medida)}
.socios__texto > p + p{margin-top:var(--s4)}
.socios__texto .socio:first-of-type{margin-top:var(--s5)}

/* Inversión: una tabla de planes con reglas */
.planes{display:grid;border-top:1px solid var(--ink)}
.plan{display:grid;align-content:start;gap:var(--s2);padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.plan h3{font-size:var(--t-h3)}
.plan__precio{font-family:var(--display);font-weight:var(--peso-h);font-size:var(--t-precio);line-height:1.1;letter-spacing:var(--tr-h2);color:var(--ink)}
.plan__precio small{font-family:var(--sans);font-size:var(--t-base);font-weight:var(--peso-medio);letter-spacing:0;color:var(--ink-soft);white-space:nowrap}
.plan p{color:var(--ink-soft);max-width:var(--medida-corta)}
.plan .plan__precio{color:var(--ink)}
.incluye{margin-top:var(--s6);display:grid;gap:var(--s3);max-width:var(--medida);padding:0;list-style:none}
.incluye li{color:var(--ink-soft);padding-left:var(--s5);position:relative}
.incluye li::before{content:"";position:absolute;left:0;top:.72em;width:var(--s3);height:1px;background:var(--ink)}
.inversion__cta{margin-top:var(--s6)}

/* Preguntas */
.faq{border-top:1px solid var(--ink);max-width:var(--medida)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s4) 0;
  font-weight:var(--peso-fuerte);font-size:var(--t-md);min-height:var(--ctl-sm);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;margin-left:auto;width:var(--icono);height:var(--icono);margin-top:var(--s1);color:var(--pluma);transition:transform var(--rapido) var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--s5);color:var(--ink-soft)}

/* ── diagnóstico: el formulario ─────────────────────────────────────────── */
.diag{background:var(--paper-sunk)}
.diag__cab h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);max-width:16ch}
.diag__cab p{margin-top:var(--s4);font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--ink-soft);max-width:var(--medida)}
.diag__cab .precio-linea{font-size:var(--t-base);color:var(--ink);font-weight:var(--peso-fuerte)}
.diag__cab .hero__wa{margin-top:var(--s4);font-size:var(--t-sm)}
.forma{margin-top:var(--s7);background:var(--surface);border:1px solid var(--rule);border-radius:var(--radio);padding:var(--s5)}
.forma fieldset{border:0;margin:0;padding:0;min-width:0}
.forma legend{display:block;width:100%;padding:0;font-family:var(--display);font-weight:var(--peso-h);font-size:var(--t-h3);color:var(--ink)}
.forma form > fieldset + fieldset{margin-top:var(--s7)}
.forma form > fieldset + fieldset > legend{padding-top:var(--s6);border-top:1px solid var(--rule)}
.campos{display:grid;gap:var(--s5);margin-top:var(--s5)}
.campo{display:grid;gap:var(--s2);min-width:0}
.campo label,.campo .etq{font-size:var(--t-sm);font-weight:var(--peso-fuerte);color:var(--ink)}
.campo .opc{font-weight:400;color:var(--meta)}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo select,.campo textarea{
  width:100%;min-height:var(--ctl);padding:0 var(--s4);border:1px solid var(--rule-strong);border-radius:var(--radio-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:var(--t-base);
  transition:border-color var(--rapido) var(--ease),box-shadow var(--rapido) var(--ease)}
.campo textarea{min-height:calc(var(--ctl) * 2.4);padding:var(--s3) var(--s4);resize:vertical;line-height:1.5}
.campo select{appearance:none;-webkit-appearance:none;padding-right:var(--s7);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - var(--s5)) 50%,calc(100% - var(--s4)) 50%;background-size:var(--s2) var(--s2);background-repeat:no-repeat}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--ink-soft)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:none;border-color:var(--pluma);box-shadow:0 0 0 var(--anillo) var(--pluma-wash),0 0 0 calc(var(--anillo) * 2) var(--pluma)}
.campo ::placeholder{color:var(--meta);opacity:1}
.ayuda{font-size:var(--t-meta);color:var(--meta);line-height:1.4}
.error{font-size:var(--t-sm);color:var(--alerta);font-weight:var(--peso-medio);line-height:1.4}
.error:empty{display:none}
[aria-invalid="true"]{border-color:var(--alerta)!important}
.marcas{display:grid;gap:var(--s2);margin-top:var(--s1)}
.marca-op{display:flex;align-items:flex-start;gap:var(--s3);min-height:var(--ctl-sm);padding:var(--s2) 0;cursor:pointer;font-size:var(--t-base);color:var(--ink);line-height:1.4}
.marca-op input{flex:none;width:var(--check);height:var(--check);margin:0;accent-color:var(--pluma);cursor:pointer;margin-top:1px}
.grupo-op{border:0;margin:0;padding:0;min-width:0}
.grupo-op legend{font-family:var(--sans);font-size:var(--t-sm);font-weight:var(--peso-fuerte)}
.grupo-op[aria-invalid="true"] legend{color:var(--alerta)}
.trampa{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.forma__fin{margin-top:var(--s6);display:grid;gap:var(--s4)}
.forma__fin .btn{justify-self:start}
.aviso-corto{margin:var(--s1) 0 var(--s3);max-width:var(--medida)}
.resumen-errores{margin-top:var(--s5);padding:var(--s4);border:1px solid var(--alerta);border-radius:var(--radio-sm);background:var(--alerta-wash);color:var(--alerta);font-size:var(--t-sm)}
.resumen-errores[hidden]{display:none}
.estado{margin-top:var(--s5);padding:var(--s5);border-radius:var(--radio-sm);border:1px solid var(--rule)}
#diagListo{margin-top:0}
.estado[hidden]{display:none}
.estado h3{font-size:var(--t-h3)}
.estado p{margin-top:var(--s3);color:var(--ink-soft)}
.estado .folio{white-space:nowrap;font-family:var(--display);font-weight:var(--peso-h);color:var(--ink);font-variant-numeric:tabular-nums}
.estado--listo{background:var(--listo-wash);border-color:var(--listo)}
.estado--listo h3{color:var(--listo)}
.estado--error{background:var(--alerta-wash);border-color:var(--alerta)}
.estado--error h3{color:var(--alerta)}
.estado .btn{margin-top:var(--s4)}
.enviando{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--ink-soft)}
.enviando[hidden]{display:none}

/* ── pie ────────────────────────────────────────────────────────────────── */
.pie{padding:var(--s8) 0 var(--s9);border-top:1px solid var(--ink)}
.pie__grid{display:grid;gap:var(--s6)}
.pie p,.pie li{font-size:var(--t-sm);color:var(--ink-soft);line-height:1.55}
.pie ul{list-style:none;padding:0;display:grid;gap:var(--s2)}
.pie h3{font-family:var(--sans);font-size:var(--t-meta);font-weight:var(--peso-fuerte);color:var(--meta);letter-spacing:var(--tr-meta);margin-bottom:var(--s3)}
.pie a{color:var(--ink)}
.pie .tel{white-space:nowrap}
.pie a:hover{color:var(--pluma)}
.pie__que{margin-top:var(--s4)}
.pie__legal{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule);display:grid;gap:var(--s2)}
.pie__legal p{font-size:var(--t-meta);color:var(--meta)}

/* ── la barra fija del celular ──────────────────────────────────────────── */
.pegado{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:var(--s2);
  padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  background:var(--paper);border-top:1px solid var(--rule);
  transform:translateY(var(--sube));visibility:hidden;
  transition:transform var(--medio) var(--ease),visibility 0s linear var(--medio)}
.pegado[hidden]{display:none}
.pegado.on{transform:none;visibility:visible;transition:transform var(--medio) var(--ease)}
.pegado .btn{min-height:var(--ctl);padding:0 var(--s4);font-size:var(--t-base);white-space:nowrap}
.pegado__cta{flex:1 1 auto}
.pegado__wa{flex:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ── tableta ────────────────────────────────────────────────────────────── */
@media (min-width:640px){
  .campos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marcas--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marcas--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .industrias{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}
  .forma{padding:var(--s7)}
  .maq-ind{grid-template-columns:repeat(3,minmax(0,1fr))}
  .maq-ind li{display:grid;justify-items:start}
}

/* ── escritorio ─────────────────────────────────────────────────────────── */
@media (min-width:900px){
  .cab{padding:var(--s5) 0}
  .cab__nav{display:flex;gap:var(--s5);margin-left:auto}
  .cab__nav a{color:var(--ink);text-decoration:none;font-size:var(--t-base);font-weight:var(--peso-medio)}
  .cab__nav a:hover{color:var(--pluma)}
  .cab .btn{margin-left:0}
  /* «En resumen» a la derecha del texto: el precio se ve sin bajar. El esquema va en la fila de abajo, a todo lo ancho. */
  .hero{padding:var(--s7) 0 var(--s9);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s8);row-gap:var(--s8);align-items:end}
  .hero__vis{grid-column:1 / -1;margin-top:0;width:100%}
  .ficha__precio dd{font-family:var(--display);font-size:var(--t-h3);letter-spacing:var(--tr-h3)}
  .hero__sub{margin-top:var(--s5)}
  .hero__cta{margin-top:var(--s6)}
  .ficha{margin-top:0}
  .sec{padding:var(--s9) 0}
  .sec--dos .sec__cab h2{font-size:var(--t-h2-col)}
  .sec--dos .sec__cab p{font-size:var(--t-md)}
  .sec--dos{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s8);align-items:start}
  .sec--dos .sec__cuerpo{margin-top:0}
  .sec--dos .sec__cab{position:sticky;top:var(--s6)}
  .sol{padding:var(--s7) 0}
  .medida{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h vis" "p vis" "al vis" "a vis";grid-template-rows:auto auto auto 1fr;column-gap:var(--s8);align-items:start}
  .medida h3{grid-area:h}
  .medida p{grid-area:p}
  .medida .medida__alcance{grid-area:al}
  .medida .enlace{grid-area:a;justify-self:start}
  .medida__vis{grid-area:vis;display:block;width:var(--tel-w);height:auto;align-self:center;margin-right:var(--s6)}
  .datos{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s7);border-top:0}
  .dato{border-top:1px solid var(--on-ink-rule);border-bottom:0;align-content:start}
  .etapas{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s6)}
  .etapa{padding:calc(var(--nodo) + var(--s5)) 0 0}
  .etapa::before{left:calc(var(--nodo) + var(--s3));right:calc(var(--s3) - var(--s6));top:calc(var(--nodo) / 2);bottom:auto;width:auto;height:1px}
  .etapa h3{padding-top:0}
  .industrias{grid-template-columns:repeat(3,minmax(0,1fr))}
  .franja{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,3fr);column-gap:var(--s7)}
  .casos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}
  .casos .transparencia{grid-column:1 / -1}
  .reglas{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}
  .socios{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start}
  .planes{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s6);border-top:0}
  .plan{border-top:1px solid var(--ink);border-bottom:0;align-content:start;padding-top:var(--s5)}
  /* De 900 a 1199 px cada columna medía ~166 px y cada plan iba en 5 renglones de una palabra («Desde / $20,000 /
     hasta / $30,000 / al mes + IVA»): dos columnas, hasta que el rango quepa en dos renglones. */
  @media (max-width:1199px){ .planes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s6)} }
  .diag .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s8);align-items:start}
  .diag__cab{position:sticky;top:var(--s6)}
  .forma{margin-top:0}
  .pie__grid{grid-template-columns:minmax(0,4fr) minmax(max-content,3fr) repeat(2,minmax(0,3fr));gap:var(--s7)}
  .pegado{display:none}
}

/* ── escritorio ancho ───────────────────────────────────────────────────── */
/* Debajo de 1100 px la maqueta va bajo el texto, a 480 px: junto a él mediría ~320 px y su contenido no cabría. */
@media (min-width:1100px){
  .hero__vis{max-width:none}
  .il--v{display:none}
  .il--h{display:block}
  .sol{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:var(--s8);row-gap:var(--s3);grid-template-areas:"h maq" "p maq" "m maq";grid-template-rows:auto auto 1fr}
  .sol > .maq{margin:0;justify-self:end}
}
/* La línea del encabezado sale cuando el botón ya cabe en un renglón a su lado, con las dos letras y con barra de
   desplazamiento: con 1210 px útiles o menos, la letra de respaldo lo parte. */
@media (min-width:1240px){
  .cab__que{display:block}
}

/* ── impresión y «guardar como PDF» ─────────────────────────────────────── */
/* La banda de tinta va sin fondo: si alguien marca «gráficos de fondo», la tinta sobre tinta no se leería. */
@media print{
  .pegado{display:none}
  h2,h3{break-inside:avoid;break-after:avoid}
  .maq,.dato,.etapa,.caso,.plan,.medida,.hero__vis{break-inside:avoid}
  .tinta{background:none;color:var(--ink)}
  .tinta::before{content:none}
  .tinta h2,.tinta h3,.tinta p,.tinta a,.tinta .sec__cab p,.tinta .cierre,.tinta .cuadros-ley,.dato__n,.dato p,.dato cite{color:var(--ink)}
  .w-lleno{fill:var(--pluma)}
  .maq-barras i,.maq-hoja i,.etapa__nodo::after,.btn{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* En papel no se puede tocar una pregunta para abrirla: las respuestas salen abiertas, «¿Cuánto cuesta?» incluida. */
  .faq details::details-content{content-visibility:visible;display:block}
}