/* MANGORA — sitio publico y portal de plataforma
   Sistema de diseno propio. Sin dependencias externas: la tipografia usa la
   pila del sistema operativo, que en macOS, Windows y Android moderno da
   fuentes de alta calidad sin una peticion de red mas. */

/* ---------------------------------------------------------------- tokens */
:root{
  /* Marca, tomada de configuracion_sistema */
  --navy-900:#04192b;
  --navy-800:#062339;
  --navy-700:#082e49;
  --navy-600:#0b3b5c;
  --tech-700:#05528f;
  --tech-600:#075ea8;
  --tech-500:#0b78bd;
  --tech-400:#1594da;
  --tech-300:#5cbcf0;
  --wine-600:#8a1f42;
  --wine-500:#a72a51;

  /* Neutros */
  --tinta:#0c2035;
  --tinta-suave:#43607d;
  --tenue:#6b829b;
  --linea:#dbe4ee;
  --linea-suave:#eaf0f6;
  --lienzo:#ffffff;
  --lienzo-alt:#f4f8fc;
  --lienzo-frio:#eef5fb;

  --exito:#15805a;
  --alerta:#8c6200;

  /* Escala tipografica fluida */
  --t-display:clamp(2.6rem, 1.3rem + 4.4vw, 4.6rem);
  --t-h1:clamp(2.1rem, 1.3rem + 2.7vw, 3.2rem);
  --t-h2:clamp(1.65rem, 1.15rem + 1.7vw, 2.4rem);
  --t-h3:clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --t-cuerpo:clamp(1rem, 0.96rem + 0.16vw, 1.075rem);
  --t-lead:clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  --t-menudo:0.82rem;

  /* Ritmo */
  --ancho:1200px;
  --ancho-texto:68ch;
  --seccion:clamp(3.5rem, 2rem + 6vw, 7rem);
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;

  --sombra-sm:0 1px 2px rgba(9,32,53,.06), 0 4px 12px rgba(9,32,53,.05);
  --sombra-md:0 2px 6px rgba(9,32,53,.07), 0 18px 40px rgba(9,32,53,.09);
  --sombra-alta:0 30px 70px rgba(4,25,43,.30);

  --tipo:"Inter var","Inter",system-ui,-apple-system,"Segoe UI Variable Text",
         "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace;
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--tipo);
  font-size:var(--t-cuerpo);
  line-height:1.62;
  color:var(--tinta);
  background:var(--lienzo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.021em;font-weight:680}
p{margin:0}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--tech-600);text-decoration:none}
a:hover{color:var(--tech-500)}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}

/* Foco visible y consistente: requisito de accesibilidad, no adorno. */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--tech-400);
  outline-offset:2px;
  border-radius:4px;
}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 20px;background:var(--navy-900);color:#fff;border-radius:0 0 8px 0;
}
.saltar:focus{left:0;color:#fff}

/* --------------------------------------------------------------- layout */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.seccion{padding-block:var(--seccion)}
.seccion--compacta{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem)}
.seccion--alt{background:var(--lienzo-alt)}
.seccion--frio{background:var(--lienzo-frio)}
.seccion--oscura{background:var(--navy-900);color:#dceaf6}
.seccion--oscura h2,.seccion--oscura h3{color:#fff}

.encabezado-seccion{max-width:var(--ancho-texto);margin-bottom:clamp(2rem,1rem + 3vw,3.25rem)}
.encabezado-seccion--centro{margin-inline:auto;text-align:center}
.antetitulo{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1rem;
  font-size:var(--t-menudo);font-weight:660;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tech-600);
}
.antetitulo::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.encabezado-seccion--centro .antetitulo::before{display:none}
.seccion--oscura .antetitulo{color:var(--tech-300)}
.encabezado-seccion h2{font-size:var(--t-h2)}
.encabezado-seccion p{margin-top:1rem;font-size:var(--t-lead);color:var(--tinta-suave);line-height:1.6}
.seccion--oscura .encabezado-seccion p{color:#a9c4da}

/* ---------------------------------------------------------------- botones */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:50px;padding:.8rem 1.6rem;
  border:1px solid transparent;border-radius:var(--r-sm);
  font-size:.98rem;font-weight:620;letter-spacing:-.006em;
  cursor:pointer;text-align:center;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.boton:active{transform:translateY(1px)}
.boton svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.boton--principal{background:var(--wine-600);color:#fff;box-shadow:0 6px 18px rgba(138,31,66,.28)}
.boton--principal:hover{background:var(--wine-500);color:#fff;box-shadow:0 10px 26px rgba(138,31,66,.34)}

.boton--tech{background:var(--tech-600);color:#fff;box-shadow:0 6px 18px rgba(7,94,168,.26)}
.boton--tech:hover{background:var(--tech-500);color:#fff}

.boton--contorno{background:transparent;border-color:var(--linea);color:var(--tinta)}
.boton--contorno:hover{border-color:var(--tech-400);background:var(--lienzo-frio);color:var(--tinta)}

.boton--claro{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);color:#fff}
.boton--claro:hover{background:rgba(255,255,255,.16);color:#fff}

.boton--blanco{background:#fff;color:var(--navy-900)}
.boton--blanco:hover{background:#eef5fb;color:var(--navy-900)}

.grupo-botones{display:flex;flex-wrap:wrap;gap:.85rem}

/* -------------------------------------------------------------- cabecera */
.cabecera{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea-suave);
}
.cabecera__fila{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.marca{display:flex;align-items:center;flex:0 0 auto}
.marca img{height:46px;width:auto}
.cabecera__nav{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.cabecera__nav a{
  padding:.6rem .85rem;border-radius:var(--r-sm);
  color:var(--tinta-suave);font-size:.94rem;font-weight:560;
  transition:background .16s ease,color .16s ease;
}
.cabecera__nav a:hover{background:var(--lienzo-frio);color:var(--tinta)}
.cabecera__nav a[aria-current="page"]{color:var(--tech-600);font-weight:640}
.cabecera__acciones{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.cabecera__acciones .boton{min-height:42px;padding:.5rem 1.05rem;font-size:.9rem}

.menu-movil{
  display:none;width:44px;height:44px;margin-left:auto;
  align-items:center;justify-content:center;
  border:1px solid var(--linea);border-radius:var(--r-sm);
  background:#fff;color:var(--tinta);cursor:pointer;
}
.menu-movil svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu-movil__cerrar{display:none}
.cabecera.abierta .menu-movil__abrir{display:none}
.cabecera.abierta .menu-movil__cerrar{display:block}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(21,148,218,.30), transparent 62%),
    radial-gradient(700px 460px at 6% 108%, rgba(138,31,66,.24), transparent 60%),
    linear-gradient(158deg, var(--navy-900) 0%, var(--navy-800) 46%, var(--navy-700) 100%);
  color:#fff;
}
/* Retícula tenue: el mismo motivo del documento maestro. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(92,188,240,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,188,240,.11) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 84% 74% at 62% 34%, #000 25%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 84% 74% at 62% 34%, #000 25%, transparent 76%);
}
.hero__interior{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,4.5rem);align-items:center;padding-block:clamp(3.5rem,2rem + 7vw,7rem)}
.hero__copia{max-width:40rem}
.hero__insignia{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.6rem;
  padding:.5rem 1rem;border:1px solid rgba(92,188,240,.34);border-radius:999px;
  background:rgba(11,120,189,.16);
  font-size:var(--t-menudo);font-weight:600;letter-spacing:.05em;color:#bfe2f8;
}
.hero__insignia span{width:7px;height:7px;border-radius:50%;background:#4be1a2;box-shadow:0 0 0 4px rgba(75,225,162,.18)}
.hero h1{font-size:var(--t-display);font-weight:730;letter-spacing:-.032em;color:#fff}
.hero h1 em{font-style:normal;background:linear-gradient(96deg,var(--tech-300),#8fd6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{margin-top:1.5rem;font-size:var(--t-lead);line-height:1.62;color:#b6d0e4;max-width:34rem}
.hero__acciones{margin-top:2.4rem}
.hero__pie{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:2.8rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.13)}
.hero__dato strong{display:block;font-size:1.7rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.hero__dato span{display:block;margin-top:.15rem;font-size:.85rem;color:#8fb0c9}

/* Diagrama del hero: la arquitectura, no una captura decorativa. */
.diagrama{
  padding:1.6rem;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  background:rgba(4,20,35,.52);box-shadow:var(--sombra-alta);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.diagrama__titulo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.11);
  font-size:var(--t-menudo);font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:#8fb0c9;
}
.diagrama__capa{margin-bottom:.6rem}
.diagrama__etiqueta{margin-bottom:.4rem;font-size:.7rem;font-weight:640;letter-spacing:.13em;text-transform:uppercase;color:#6f92ad}
.diagrama__fila{display:grid;gap:.5rem}
.diagrama__fila--2{grid-template-columns:1fr 1fr}
.diagrama__fila--3{grid-template-columns:repeat(3,1fr)}
.diagrama__nodo{
  padding:.7rem .8rem;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  background:rgba(255,255,255,.05);
}
.diagrama__nodo strong{display:block;font-size:.86rem;font-weight:640;color:#fff}
.diagrama__nodo span{display:block;margin-top:.15rem;font-size:.72rem;color:#89a9c2}
.diagrama__nodo--go{background:rgba(7,94,168,.34);border-color:rgba(92,188,240,.36)}
.diagrama__nodo--rust{background:rgba(21,128,90,.28);border-color:rgba(75,225,162,.32)}
.diagrama__nodo--php{background:rgba(140,98,0,.24);border-color:rgba(226,178,66,.30)}
.diagrama__flecha{display:flex;justify-content:center;padding:.15rem 0;color:#5f87a4;font-size:.85rem}

/* ---------------------------------------------------------------- tarjetas */
.rejilla{display:grid;gap:1.15rem}
.rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.tarjeta{
  padding:1.7rem;border:1px solid var(--linea);border-radius:var(--r-md);
  background:var(--lienzo);box-shadow:var(--sombra-sm);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.tarjeta--enlace:hover{border-color:var(--tech-300);box-shadow:var(--sombra-md);transform:translateY(-3px)}
.tarjeta h3{font-size:var(--t-h3);margin-bottom:.6rem}
.tarjeta p{color:var(--tinta-suave);font-size:.97rem;line-height:1.62}
.tarjeta__icono{
  width:48px;height:48px;display:grid;place-items:center;margin-bottom:1.15rem;
  border-radius:12px;background:var(--lienzo-frio);color:var(--tech-600);
}
.tarjeta__icono svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tarjeta__numero{
  display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:1rem;
  border-radius:9px;background:var(--navy-900);color:#fff;
  font-size:.85rem;font-weight:700;
}
.seccion--oscura .tarjeta{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);box-shadow:none}
.seccion--oscura .tarjeta p{color:#a4c0d7}
.seccion--oscura .tarjeta__icono{background:rgba(92,188,240,.14);color:var(--tech-300)}

/* --------------------------------------------------------------- modulos */
.grupo-modulos{margin-bottom:3rem}
.grupo-modulos__cabeza{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.15rem;padding-bottom:.8rem;border-bottom:1px solid var(--linea)}
.grupo-modulos__cabeza h3{font-size:1.28rem}
.grupo-modulos__cuenta{font-size:var(--t-menudo);color:var(--tenue);font-variant-numeric:tabular-nums}
.modulo{
  display:flex;gap:.95rem;align-items:flex-start;
  padding:1.15rem 1.2rem;border:1px solid var(--linea);border-radius:var(--r-md);
  background:#fff;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.modulo:hover{border-color:var(--tech-300);box-shadow:var(--sombra-sm);transform:translateY(-2px)}
.modulo__punto{width:9px;height:9px;flex:0 0 9px;margin-top:.55rem;border-radius:50%;background:var(--tech-500)}
.modulo strong{display:block;font-size:1rem;font-weight:620;color:var(--tinta)}
.modulo span{display:block;margin-top:.2rem;font-size:.88rem;color:var(--tenue);line-height:1.5}

/* --------------------------------------------------------------- precios */
.rejilla-precios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;align-items:start}
.plan{
  display:flex;flex-direction:column;height:100%;
  padding:2rem 1.8rem;border:1px solid var(--linea);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sombra-sm);
}
.plan--destacado{
  border-color:var(--tech-500);box-shadow:0 3px 10px rgba(7,94,168,.12),0 24px 50px rgba(7,94,168,.16);
  position:relative;
}
.plan--destacado::before{
  content:attr(data-etiqueta);position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  padding:.35rem 1rem;border-radius:999px;background:var(--tech-600);color:#fff;
  font-size:.72rem;font-weight:680;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.plan h3{font-size:1.35rem;margin-bottom:.5rem}
.plan__resumen{color:var(--tinta-suave);font-size:.94rem;min-height:3.1rem}
.plan__precio{margin:1.4rem 0;padding-bottom:1.4rem;border-bottom:1px solid var(--linea-suave)}
.plan__monto{font-size:2.5rem;font-weight:720;letter-spacing:-.03em;color:var(--navy-900);font-variant-numeric:tabular-nums}
.plan__periodo{font-size:.92rem;color:var(--tenue)}
.plan__consultar{font-size:1.55rem;font-weight:660;color:var(--navy-900)}
.plan__lista{display:grid;gap:.7rem;margin-bottom:1.8rem;flex:1}
.plan__lista li{display:flex;gap:.65rem;align-items:flex-start;font-size:.94rem;color:var(--tinta-suave)}
.plan__lista svg{width:19px;height:19px;flex:0 0 19px;margin-top:.16rem;fill:none;stroke:var(--exito);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.plan .boton{width:100%}

/* ------------------------------------------------------------ franja cifras */
.franja-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.15rem}
.cifra{padding:1.5rem;border:1px solid rgba(255,255,255,.13);border-radius:var(--r-md);background:rgba(255,255,255,.045)}
.cifra strong{display:block;font-size:clamp(1.9rem,1.4rem + 1.5vw,2.6rem);font-weight:720;letter-spacing:-.03em;color:#fff}
.cifra span{display:block;margin-top:.35rem;font-size:.88rem;color:#9dbdd5;line-height:1.5}

/* ------------------------------------------------------------------- CTA */
.cta{
  padding:clamp(2.5rem,1.5rem + 4vw,4.5rem);border-radius:var(--r-lg);text-align:center;
  background:
    radial-gradient(700px 340px at 50% -30%, rgba(21,148,218,.34), transparent 65%),
    linear-gradient(150deg,var(--navy-900),var(--navy-700));
  color:#fff;box-shadow:var(--sombra-alta);
}
.cta h2{font-size:var(--t-h2);margin-bottom:1rem;color:#fff}
.cta p{max-width:46rem;margin:0 auto 2.2rem;font-size:var(--t-lead);color:#b6d0e4}
.cta .grupo-botones{justify-content:center}

/* --------------------------------------------------------------- codigo */
.codigo{
  padding:1.3rem 1.5rem;border:1px solid rgba(255,255,255,.13);border-radius:var(--r-md);
  background:var(--navy-900);color:#cfe6f7;
  font-family:var(--mono);font-size:.855rem;line-height:1.75;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.codigo__cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem;border:1px solid var(--linea);border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0;background:var(--lienzo-alt);
  font-size:var(--t-menudo);font-weight:620;color:var(--tinta-suave);
}
.codigo__cabeza + .codigo{border-radius:0 0 var(--r-md) var(--r-md);border-color:var(--linea)}
.codigo .c-verbo{color:#8fd6ff;font-weight:600}
.codigo .c-ruta{color:#fff}
.codigo .c-com{color:#7192ab}
.codigo .c-llave{color:#9fd8b4}

/* ------------------------------------------------------------ formulario */
.formulario{display:grid;gap:1.15rem}
.campo{display:grid;gap:.45rem}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:.9rem;font-weight:600;color:var(--tinta)}
.campo label .req{color:var(--wine-600)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:50px;padding:.75rem .95rem;
  border:1px solid var(--linea);border-radius:var(--r-sm);
  background:#fff;color:var(--tinta);font:inherit;font-size:1rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.campo textarea{min-height:140px;resize:vertical;line-height:1.6}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--tech-500);box-shadow:0 0 0 4px rgba(11,120,189,.13);
}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:var(--wine-600)}
.campo__ayuda{font-size:.84rem;color:var(--tenue)}
.campo__error{font-size:.86rem;font-weight:560;color:var(--wine-600)}
.formulario__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}

.aviso{
  display:flex;gap:.8rem;align-items:flex-start;
  padding:1rem 1.15rem;border-radius:var(--r-sm);font-size:.95rem;
}
.aviso svg{width:20px;height:20px;flex:0 0 20px;margin-top:.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aviso--ok{background:#e7f7ef;color:#0f6b4b;border:1px solid #b7e4cf}
.aviso--error{background:#fdeef1;color:#8a1f42;border:1px solid #f2c6d1}

/* -------------------------------------------------------------- contacto */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(2rem,3vw,3.5rem);align-items:start}
.contacto__panel{padding:1.9rem;border:1px solid var(--linea);border-radius:var(--r-md);background:var(--lienzo-alt)}
.contacto__dato{padding-block:1.05rem;border-bottom:1px solid var(--linea)}
.contacto__dato:last-child{border-bottom:0;padding-bottom:0}
.contacto__dato span{display:block;font-size:.78rem;font-weight:660;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.contacto__dato strong{display:block;margin-top:.3rem;font-size:1.02rem;font-weight:600}

/* ----------------------------------------------------------------- prosa */
.prosa{max-width:var(--ancho-texto)}
.prosa h2{font-size:1.5rem;margin-top:2.6rem;margin-bottom:.9rem}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-size:1.12rem;margin-top:1.8rem;margin-bottom:.6rem}
.prosa p{margin-bottom:1.05rem;color:var(--tinta-suave)}
.prosa ul{margin-bottom:1.05rem;display:grid;gap:.5rem}
.prosa ul li{position:relative;padding-left:1.35rem;color:var(--tinta-suave)}
.prosa ul li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--tech-500)}
.prosa strong{color:var(--tinta);font-weight:640}

/* --------------------------------------------------------------- tablas */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;min-width:36rem;font-size:.94rem}
.tabla th{padding:.9rem 1.1rem;background:var(--lienzo-alt);color:var(--tinta);text-align:left;font-weight:640;white-space:nowrap;border-bottom:1px solid var(--linea)}
.tabla td{padding:.9rem 1.1rem;border-bottom:1px solid var(--linea-suave);color:var(--tinta-suave);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla code{font-family:var(--mono);font-size:.86em;color:var(--tech-700)}

/* ------------------------------------------------------------- etiquetas */
.pastilla{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .75rem;border-radius:999px;
  background:var(--lienzo-frio);color:var(--tech-700);
  font-size:.78rem;font-weight:620;
}
.pastilla--verde{background:#e7f7ef;color:#0f6b4b}
.pastilla--ambar{background:#fff4dd;color:#8c6200}

/* -------------------------------------------------------------- migajas */
.migajas{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem;font-size:.87rem;color:var(--tenue)}
.migajas a{color:var(--tenue)}
.migajas a:hover{color:var(--tech-600)}

/* ------------------------------------------------------------------- pie */
.pie{padding-block:clamp(3rem,2rem + 3vw,4.5rem) 2rem;background:var(--navy-900);color:#9dbdd5}
.pie__rejilla{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,3vw,3.5rem);padding-bottom:2.8rem;border-bottom:1px solid rgba(255,255,255,.11)}
.pie__marca img{height:34px;width:auto;margin-bottom:1.15rem}
.pie__marca p{font-size:.94rem;line-height:1.65;max-width:26rem}
.pie h4{margin-bottom:1.1rem;font-size:.8rem;font-weight:660;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.pie ul{display:grid;gap:.65rem}
.pie a{color:#9dbdd5;font-size:.94rem}
.pie a:hover{color:#fff}
.pie__base{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding-top:1.8rem;font-size:.87rem}
.pie__legal{display:flex;flex-wrap:wrap;gap:1.4rem}

/* -------------------------------------------------------------- respuesta */
@media (max-width:1040px){
  .hero__interior{grid-template-columns:1fr}
  .diagrama{max-width:34rem}
  .rejilla--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .franja-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contacto{grid-template-columns:1fr}
  .pie__rejilla{grid-template-columns:1fr 1fr}
  .pie__marca{grid-column:1/-1}
}

@media (max-width:900px){
  .menu-movil{display:flex}
  .cabecera__nav,.cabecera__acciones{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:.3rem;
    padding:1rem clamp(1.15rem,4vw,2.5rem);
    background:#fff;border-bottom:1px solid var(--linea);
  }
  .cabecera.abierta .cabecera__nav{display:flex;box-shadow:none}
  .cabecera.abierta .cabecera__acciones{display:flex;top:auto;position:static;border-bottom:0;padding-top:.5rem;box-shadow:0 20px 30px rgba(9,32,53,.10)}
  .cabecera__nav a{padding:.85rem .75rem;font-size:1rem}
  .cabecera__acciones .boton{width:100%;min-height:48px}
  .rejilla--2,.rejilla--3{grid-template-columns:1fr}
  .rejilla-precios{grid-template-columns:1fr;gap:2rem}
  .plan--destacado{order:-1}
  .formulario__rejilla{grid-template-columns:1fr}
}

@media (max-width:560px){
  .rejilla--4,.franja-cifras{grid-template-columns:1fr}
  .pie__rejilla{grid-template-columns:1fr;gap:2.2rem}
  .diagrama__fila--3{grid-template-columns:1fr}
  .hero__pie{gap:1.4rem}
  .grupo-botones .boton{width:100%}
}

@media print{
  .cabecera,.pie,.cta,.menu-movil{display:none}
  body{color:#000;background:#fff}
}

/* Texto solo para lectores de pantalla. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* El encabezado principal de cada pagina interior comparte la escala del h1
   de portada sin necesidad de estilos en linea. */
.encabezado-seccion h1{font-size:var(--t-h1)}
.titulo-error{font-size:var(--t-h1);margin-bottom:1rem}

/* ==========================================================================
   PORTADA CLARA
   ==========================================================================
   La portada anterior abria con un diagrama de arquitectura sobre fondo
   oscuro. Hablaba a quien va a integrarse, no a quien va a comprar.

   Estas reglas se anaden al final a proposito, sin tocar las de arriba: las
   otras ocho paginas siguen usandolas y rehacerlas todas de golpe seria
   cambiar nueve cosas para arreglar una.

   Las clases van con nombre propio -bloque, no seccion- porque .seccion ya
   existe arriba con otro significado: alli solo pone espaciado y el fondo lo
   deciden sus modificadores. Al redefinirla aqui, mi regla ganaba por ir
   despues y dejaba .seccion--oscura con fondo blanco y texto blanco.

   La marca no cambia: el vino sigue siendo el acento y el navy el texto. Lo
   que cambia es el fondo, que pasa a claro, y el espacio, que se multiplica.
   ========================================================================== */

:root{
  --papel:#ffffff;
  --papel-alt:#f6f8fa;
  --papel-frio:#eef3f8;
  --borde:#e2e9f0;
  --acento:var(--wine-600);
  --acento-vivo:var(--wine-500);
}

/* ------------------------------------------------------------------ portada */
.portada{
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(11,120,189,.07), transparent 60%),
    radial-gradient(760px 460px at 92% 0%, rgba(138,31,66,.06), transparent 58%),
    var(--papel);
  border-bottom:1px solid var(--borde);
}

.portada__caja{max-width:56rem}

.marbete{
  display:inline-block;margin:0 0 1.4rem;
  padding:.34rem .85rem;border-radius:999px;
  border:1px solid var(--borde);background:var(--papel-frio);
  font-size:.78rem;font-weight:640;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tech-600);
}
.marbete--tenue{background:transparent;border-color:transparent;padding-left:0}

.portada__titulo{
  margin:0 0 1.5rem;
  font-size:clamp(2.4rem,1.3rem + 4.6vw,4.4rem);
  line-height:1.04;
  letter-spacing:-.032em;
  font-weight:760;
  color:var(--tinta);
  text-wrap:balance;
  max-width:20ch;
}
.portada__titulo span{display:block;color:var(--acento)}

.portada__entrada{
  margin:0 0 2.2rem;
  max-width:44rem;
  font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);
  line-height:1.6;
  color:var(--tinta-suave);
}

.portada__acciones{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

.portada__sellos{
  list-style:none;margin:2.6rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;
  font-size:.92rem;color:var(--tenue);
}
.portada__sellos li{display:flex;align-items:center;gap:.5rem}
.portada__sellos li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tech-500);flex:none;
}

/* ------------------------------------------------------------------ botones */
.btn--grande{padding:.85rem 1.6rem;font-size:1rem;border-radius:10px}
.btn--principal{background:var(--acento);color:#fff;border:1px solid var(--acento)}
.btn--principal:hover{background:var(--acento-vivo);border-color:var(--acento-vivo)}
.btn--fantasma{
  background:transparent;color:var(--tinta);
  border:1px solid var(--borde);
}
.btn--fantasma:hover{border-color:var(--tech-400);color:var(--tech-700)}
.btn--claro{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn--claro:hover{background:rgba(255,255,255,.22)}

/* ----------------------------------------------------------------- secciones */
.bloque{padding:clamp(3rem,7vw,5.5rem) 0;background:var(--papel)}
.bloque--claro{background:var(--papel-alt);border-block:1px solid var(--borde)}

.bloque__cabeza{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.bloque__cabeza h2{
  margin:.3rem 0 .8rem;
  font-size:clamp(1.7rem,1.2rem + 1.9vw,2.6rem);
  line-height:1.15;letter-spacing:-.022em;font-weight:720;
  color:var(--tinta);text-wrap:balance;
}
.bloque__entrada{margin:0;font-size:1.05rem;line-height:1.6;color:var(--tinta-suave)}
.bloque__pie{margin:2.4rem 0 0}

.enlace-fuerte{color:var(--acento);font-weight:640;text-decoration:none}
.enlace-fuerte:hover{text-decoration:underline}

/* --------------------------------------------------------------- familias */
.familias{display:flex;flex-direction:column;gap:clamp(1.8rem,3.5vw,2.8rem)}

.familia__nombre{
  margin:0 0 1rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--borde);
  font-size:.82rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);
}

.fichas{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
}

/* La ficha de modulo es el corazon de la pagina: es lo que deja ver de un
   vistazo el tamano de la plataforma. Se mantiene sobria -sin iconos de
   colores ni ilustraciones- porque son treinta y dos y cualquier adorno
   repetido treinta y dos veces se vuelve ruido. */
.ficha{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.85rem .95rem;
  border:1px solid var(--borde);border-radius:10px;
  background:var(--papel);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.ficha:hover{
  border-color:var(--tech-300);
  box-shadow:0 1px 2px rgba(9,32,53,.04), 0 10px 24px rgba(9,32,53,.07);
  transform:translateY(-1px);
}
/* El icono va en trazo y monocromo: repetido treinta y dos veces en la
   parrilla, uno relleno y de color competiria con el nombre del modulo, que
   es lo que hay que leer. */
.ficha__icono{
  flex:none;display:grid;place-items:center;
  width:2.1rem;height:2.1rem;border-radius:8px;
  background:var(--papel-frio);color:var(--tech-600);
  transition:background-color .15s, color .15s;
}
.ficha__icono svg{width:18px;height:18px;display:block}
.ficha:hover .ficha__icono{background:var(--tech-600);color:#fff}
.ficha__nombre{margin:0;font-size:.98rem;font-weight:640;color:var(--tinta);line-height:1.3}
.ficha__nota{
  margin:.25rem 0 0;font-size:.86rem;line-height:1.45;color:var(--tenue);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* -------------------------------------------------------------------- ejes */
.ejes{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}

.eje{
  padding:1.6rem;border-radius:14px;
  background:var(--papel);border:1px solid var(--borde);
}
/* La cifra es un <span> y no un <p> a proposito. Siendo <p>, la regla
   `.eje p{color:var(--tinta-suave)}` de abajo la alcanzaba con mas
   especificidad -clase mas elemento gana a clase sola- y le pisaba el blanco:
   el numero salia azul oscuro sobre vino y no se leia.

   La salida no es subir la especificidad aqui, que solo aplaza la siguiente
   pelea, sino que el elemento deje de coincidir con esa regla. */
.eje__cifra{
  margin:0 0 1.1rem;
  width:2.8rem;height:2.8rem;border-radius:10px;
  display:grid;place-items:center;
  background:var(--acento);color:#fff;
  font-size:1.35rem;font-weight:760;line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 8px rgba(138,31,66,.28);
}
.eje h3{margin:0 0 .55rem;font-size:1.12rem;font-weight:680;color:var(--tinta)}
.eje p{margin:0;font-size:.96rem;line-height:1.6;color:var(--tinta-suave)}

/* -------------------------------------------------------------- principios */
.principios{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

.principio{
  padding:1.5rem;border-radius:14px;
  background:var(--papel-alt);border:1px solid var(--borde);
}
.principio__icono{
  display:grid;place-items:center;
  width:2.4rem;height:2.4rem;margin-bottom:.9rem;
  border-radius:9px;background:var(--papel-frio);color:var(--tech-600);
}
.principio__icono svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.principio h3{margin:0 0 .5rem;font-size:1.06rem;font-weight:680;color:var(--tinta)}
.principio p{margin:0;font-size:.94rem;line-height:1.6;color:var(--tinta-suave)}

/* ------------------------------------------------------------------ cierre */
.cierre{
  padding:clamp(3rem,7vw,5rem) 0;
  background:linear-gradient(155deg,var(--navy-900),var(--navy-700));
  color:#dceaf6;
}
.cierre__caja{max-width:44rem}
.cierre h2{
  margin:0 0 .8rem;color:#fff;
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);
  line-height:1.18;letter-spacing:-.02em;font-weight:720;text-wrap:balance;
}
.cierre p{margin:0 0 1.9rem;font-size:1.05rem;line-height:1.6;color:#a9c8de}

@media (prefers-reduced-motion:reduce){
  .ficha:hover{transform:none}
}

/* Estado de la consulta de DNI y RUC. */
.campo label small{
  margin-left:.4rem;font-weight:500;font-size:.78rem;color:var(--tenue);
  text-transform:none;letter-spacing:0;
}
.campo__estado{
  margin:.35rem 0 0;min-height:1.1rem;
  font-size:.82rem;line-height:1.35;color:var(--tenue);
}
.campo__estado--ok{color:var(--exito,#15805a);font-weight:560}
.campo__estado--aviso{color:#8a5a00}

/* Ubicación detectada por el RUC. */
.ubicacion-detectada{
  margin:-.4rem 0 1rem;padding:.6rem .8rem;
  border-left:3px solid var(--exito,#15805a);border-radius:0 6px 6px 0;
  background:var(--lienzo-alt,#f3f7fb);
  font-size:.86rem;line-height:1.45;color:var(--tinta-suave);
}
.ubicacion-detectada--aviso{border-left-color:#b8860b;color:#8a5a00}

/* ==========================================================================
   PIE: marca visible y libro de reclamaciones
   ========================================================================== */

/* La tarjeta blanca es la solucion honesta a un logotipo azul sobre fondo
   navy: en vez de recolorear la marca -que deja de ser la marca- se le da el
   fondo para el que fue disenada. */
.pie__logotipo{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.7rem 1.1rem;margin-bottom:1.2rem;
  background:#fff;border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .15s;
}
.pie__logotipo:hover{transform:translateY(-1px)}
.pie__logotipo img{height:40px;width:auto;display:block;margin:0}

.pie__firma{display:inline-flex;align-items:center;gap:.6rem}
.pie__firma img{width:22px;height:22px;opacity:.75;flex:none}

/* El enlace al libro se distingue del resto: la norma pide que sea visible,
   y una linea mas en una lista de cuatro no lo es. */
.pie__libro{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .7rem;margin-top:.25rem;
  border:1px solid rgba(255,255,255,.24);border-radius:6px;
  font-weight:560;
}
.pie__libro::before{
  content:"";flex:none;width:14px;height:16px;
  border:1.5px solid currentColor;border-radius:2px 3px 3px 2px;
  border-left-width:3px;
}
.pie__libro:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}

/* ------------------------------------------------- libro de reclamaciones */
.reclamo{max-width:52rem}
.reclamo__aviso{
  margin-bottom:2.2rem;padding:1.2rem 1.4rem;
  border-left:3px solid var(--tech-500);border-radius:0 8px 8px 0;
  background:var(--lienzo-alt,#f3f7fb);
}
.reclamo__aviso h2{margin:0 0 .6rem;font-size:1.05rem;font-weight:660}
.reclamo__aviso p{margin:0 0 .6rem;font-size:.94rem;line-height:1.6;color:var(--tinta-suave)}
.reclamo__aviso p:last-child{margin-bottom:0}

.reclamo__titulo{
  margin:2.4rem 0 1.1rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--linea);
  font-size:.84rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue);
}
.reclamo__titulo:first-of-type{margin-top:0}

.casilla{display:flex;align-items:center;gap:.6rem;font-weight:500}

/* La trampa para robots: fuera de la vista pero no display:none, que algunos
   la detectan y la saltan. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------- la constancia */
.constancia{
  padding:2rem;border-radius:14px;
  border:1px solid var(--exito,#15805a);
  background:#f2fbf7;
}
.constancia__marbete{
  margin:0;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--exito,#15805a);
}
.constancia__numero{
  margin:.4rem 0 1rem;font-size:2.6rem;font-weight:740;
  letter-spacing:-.02em;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.constancia p{margin:0 0 .7rem;line-height:1.6;color:var(--tinta-suave)}
.constancia__plazo{margin-bottom:0}

/* ==========================================================================
   MAQUETA DEL PRODUCTO
   ==========================================================================
   Se dibuja con HTML y CSS, no con una captura de pantalla. Una imagen se
   queda vieja en cuanto el producto cambia, pesa cientos de kilobytes y no se
   puede leer con un lector de pantalla. Esto se adapta al ancho, pesa lo que
   ocupa su marcado y se puede corregir editando una linea.
   ========================================================================== */
.maqueta{
  margin:clamp(2.5rem,5vw,4rem) 0 0;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--borde);
  background:var(--papel);
  box-shadow:0 2px 4px rgba(9,32,53,.05), 0 24px 60px rgba(9,32,53,.13);
}

.maqueta__barra{
  display:flex;align-items:center;gap:.45rem;
  padding:.7rem .9rem;
  background:var(--papel-alt);border-bottom:1px solid var(--borde);
}
.maqueta__barra > span{
  width:10px;height:10px;border-radius:50%;background:#d4dde6;flex:none;
}
.maqueta__url{
  margin:0 0 0 .8rem;padding:.2rem .7rem;
  border-radius:999px;background:var(--papel);
  border:1px solid var(--borde);
  font-family:var(--mono,ui-monospace,monospace);
  font-size:.76rem;color:var(--tenue);
}

.maqueta__cuerpo{display:grid;grid-template-columns:11.5rem 1fr;min-height:19rem}

.maqueta__lateral{
  padding:1.1rem .9rem;background:var(--navy-900);color:#9dbdd5;
}
.maqueta__marca{
  margin:0 0 1.1rem;padding-bottom:.8rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#fff;
}
.maqueta__lateral ul{list-style:none;margin:0;padding:0;display:grid;gap:.18rem}
.maqueta__lateral li{
  padding:.42rem .6rem;border-radius:6px;font-size:.83rem;
}
.maqueta__lateral li.activo{background:rgba(255,255,255,.12);color:#fff;font-weight:600}

.maqueta__panel{padding:1.1rem 1.2rem;overflow-x:auto}
.maqueta__cabeza{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1rem;
}
.maqueta__cabeza strong{font-size:1.05rem;color:var(--tinta)}
.maqueta__boton{
  padding:.34rem .8rem;border-radius:7px;
  background:var(--acento);color:#fff;
  font-size:.79rem;font-weight:600;white-space:nowrap;
}

.maqueta__tabla{width:100%;border-collapse:collapse;font-size:.84rem}
.maqueta__tabla th{
  text-align:left;padding:.45rem .6rem;
  border-bottom:1px solid var(--borde);
  font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tenue);
}
.maqueta__tabla td{
  padding:.55rem .6rem;border-bottom:1px solid var(--papel-alt);
  color:var(--tinta-suave);white-space:nowrap;
}
.maqueta__tabla td:first-child{font-family:var(--mono,monospace);font-size:.78rem}
.maqueta__tabla tr:last-child td{border-bottom:none}

.pastilla{
  display:inline-block;padding:.12rem .5rem;border-radius:999px;
  background:#e6f4ee;color:#15805a;font-size:.72rem;font-weight:640;
}
.pastilla--gris{background:var(--papel-alt);color:var(--tenue)}

.maqueta__pie{
  margin:.9rem 0 0;text-align:center;
  font-size:.86rem;color:var(--tenue);
}

@media (max-width:44rem){
  /* El menu lateral es lo primero que sobra en un movil: la tabla es lo que
     cuenta la historia. */
  .maqueta__cuerpo{grid-template-columns:1fr}
  .maqueta__lateral{display:none}
}

/* ==========================================================================
   PRECIOS
   ========================================================================== */

/* El IGV pegado al precio. Enterarse del 18% despues de haber decidido es la
   sorpresa que rompe la confianza antes de la primera reunion. */
.plan__igv{
  display:block;margin-top:.3rem;
  font-size:.78rem;color:var(--tenue);font-weight:500;
}

.precios__nota{
  max-width:44rem;margin:2.2rem auto 0;
  text-align:center;font-size:.92rem;line-height:1.6;color:var(--tenue);
}

/* ------------------------------------------------------------ comparativa */
.tabla-planes-caja{
  overflow-x:auto;
  border:1px solid var(--linea);border-radius:14px;
  background:var(--lienzo,#fff);
}
.tabla-planes{border-collapse:collapse;width:100%;min-width:38rem;font-size:.93rem}

.tabla-planes th,.tabla-planes td{
  padding:.85rem 1rem;text-align:center;
  border-bottom:1px solid var(--linea-suave,#eaf0f6);
}
.tabla-planes thead th{
  font-size:.82rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta);
  background:var(--lienzo-alt,#f3f7fb);
  border-bottom:1px solid var(--linea);
}
.tabla-planes tbody th{
  text-align:left;font-weight:600;color:var(--tinta);white-space:nowrap;
}
.tabla-planes td{color:var(--tinta-suave)}
.tabla-planes tr:last-child th,.tabla-planes tr:last-child td{border-bottom:none}

/* La columna del plan mas elegido se marca en toda su altura: sin eso, la
   etiqueta de arriba se pierde en cuanto uno baja la vista tres filas. */
.tabla-planes .destacada{background:rgba(11,120,189,.05)}
.tabla-planes thead .destacada{background:rgba(11,120,189,.11)}

.tabla-planes .si{color:var(--exito,#15805a);font-weight:640}
.tabla-planes .no{color:#c3ced9}

/* -------------------------------------------------------------- preguntas */
.preguntas{
  max-width:46rem;margin-inline:auto;
  display:flex;flex-direction:column;gap:.7rem;
}

/* <details> nativo y no un acordeon de JavaScript: funciona sin guion, el
   navegador ya sabe abrirlo con teclado, y el buscador encuentra el texto
   aunque este cerrado. */
.pregunta{
  border:1px solid var(--linea);border-radius:10px;
  background:var(--lienzo,#fff);
  transition:border-color .15s;
}
.pregunta[open]{border-color:var(--tech-300)}
.pregunta summary{
  padding:1rem 1.2rem;cursor:pointer;
  font-weight:620;color:var(--tinta);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{
  content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--tenue);border-bottom:2px solid var(--tenue);
  transform:rotate(45deg);transition:transform .15s;
}
.pregunta[open] summary::after{transform:rotate(-135deg)}
.pregunta summary:hover{color:var(--tech-700)}
.pregunta p{
  margin:0;padding:0 1.2rem 1.15rem;
  font-size:.95rem;line-height:1.65;color:var(--tinta-suave);
}