/* ==========================================================================
   Educaquix — hoja de estilo del sitio
   Sistema gráfico derivado del isotipo: módulos cuadrados, esquina inferior
   derecha cortada a 45° y contraformas. Sin dependencias externas.
   ========================================================================== */

/* --- Reinicio mínimo ---------------------------------------------------- */
*,*::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:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* --- Base --------------------------------------------------------------- */
body{
  font-family:var(--eq-titulo);
  font-size:17px;line-height:1.65;
  color:var(--eq-azul-700);
  background:var(--eq-blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.env{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,36px)}
.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}

/* Foco visible y consistente en toda la página */
:focus-visible{outline:3px solid var(--eq-turquesa);outline-offset:3px;border-radius:2px}
.seccion-oscura :focus-visible{outline-color:var(--eq-turquesa)}

/* Salto al contenido */
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--eq-azul);
  color:var(--eq-blanco);padding:12px 18px;font-weight:600;transition:top .18s ease}
.saltar:focus{top:12px}

/* --- Tipografía --------------------------------------------------------- */
h1,h2,h3{color:var(--eq-azul);font-weight:800;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2.05rem,4.2vw,3.15rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.12rem,1.7vw,1.32rem);font-weight:700;letter-spacing:-.012em}
p{text-wrap:pretty}
.entradilla{font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.6;color:var(--eq-azul-600);max-width:62ch}
.etiqueta{font-family:var(--eq-etiqueta);font-weight:600;font-size:.82rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--eq-azul-600);display:inline-flex;align-items:center;gap:.6em}
.etiqueta::before{content:"";width:10px;height:10px;background:var(--eq-turquesa);flex:none}
.seccion-oscura .etiqueta,.portada .etiqueta{color:var(--eq-turquesa-claro)}
.seccion-oscura h1,.seccion-oscura h2,.seccion-oscura h3,
.portada h1,.portada h2,.portada h3{color:var(--eq-blanco)}
.seccion-oscura p,.portada>.env p{color:#C9D8E2}
.seccion-oscura .entradilla,.portada .entradilla{color:#BFD2DE}
/* El portal es una tarjeta clara dentro de la portada: recupera sus propios colores */
.portada .portal h2{color:var(--eq-azul)}
.portada .portal p,.portada .portal .ayuda{color:var(--eq-azul-600)}
.portada .portal .aviso{color:var(--eq-azul-700)}
.portada .portal .aviso-error{color:#7A2418}

/* --- Motivo geométrico del isotipo -------------------------------------- */
/* Esquina inferior derecha cortada, igual que el doblez del documento. */
.corte{clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.corte-sm{clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
/* Retícula de módulos, muy tenue, solo como textura de fondo. */
.reticula{position:relative;isolation:isolate}
.reticula::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 78%);
}

/* --- Secciones ---------------------------------------------------------- */
.seccion{padding-block:clamp(56px,8vw,104px)}
.seccion-oscura{background:var(--eq-azul);color:#C9D8E2}
.seccion-hueso{background:var(--eq-hueso)}
.seccion-turquesa{background:var(--eq-turquesa);color:var(--eq-azul)}
.seccion-turquesa h2,.seccion-turquesa h3{color:var(--eq-azul)}
.seccion-turquesa p{color:#04303F}
.seccion-turquesa .etiqueta{color:#04303F}
.seccion-turquesa .etiqueta::before{background:var(--eq-azul)}
.seccion-turquesa .entradilla{color:#04303F}
.cabecera-seccion{max-width:66ch;margin-bottom:clamp(30px,4vw,52px)}
.cabecera-seccion h2{margin-top:10px}
.cabecera-seccion .entradilla{margin-top:14px}

/* --- Botones ------------------------------------------------------------ */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-weight:600;font-size:1rem;padding:15px 26px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.boton:hover{transform:translateY(-2px)}
.boton-principal{background:var(--eq-turquesa);color:var(--eq-azul)}
.boton-principal:hover{background:var(--eq-turquesa-claro)}
.boton-oscuro{background:var(--eq-azul);color:var(--eq-blanco)}
.boton-oscuro:hover{background:var(--eq-azul-800)}
.boton-linea{border-color:var(--eq-azul-200);color:var(--eq-azul);background:transparent}
.boton-linea:hover{border-color:var(--eq-azul);background:var(--eq-blanco)}
.seccion-oscura .boton-linea,.portada .boton-linea{border-color:rgba(255,255,255,.3);color:var(--eq-blanco)}
.seccion-oscura .boton-linea:hover,.portada .boton-linea:hover{border-color:var(--eq-turquesa);background:rgba(255,255,255,.08)}

/* --- Barra superior ----------------------------------------------------- */
.barra{position:sticky;top:0;z-index:40;background:rgba(254,254,254,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--eq-azul-100)}
.barra-fila{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px}
.barra .logo{display:flex;align-items:center;flex:none}
.barra .logo img{width:142px;height:auto}
.menu{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.menu a{font-size:.95rem;font-weight:500;color:var(--eq-azul-700);text-decoration:none;padding:8px 2px;
  border-bottom:2px solid transparent;transition:color .16s ease,border-color .16s ease}
.menu a:hover{color:var(--eq-azul);border-bottom-color:var(--eq-turquesa)}
.barra .boton{padding:12px 20px;font-size:.94rem}
@media (max-width:860px){
  .menu{display:none}
  .barra .logo img{width:124px}
}
@media (max-width:560px){
  .texto-largo{display:none}
  .barra-fila{min-height:76px}
}

/* --- Portada ------------------------------------------------------------ */
.portada{background:var(--eq-azul);color:#C9D8E2;padding-block:clamp(44px,5.5vw,78px);overflow:hidden}
.portada-rejilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(400px,.9fr);gap:clamp(30px,4.5vw,60px);align-items:center}
.portada h1{margin-top:18px;letter-spacing:-.03em}
.portada h1 em{font-style:normal;color:var(--eq-turquesa)}
.portada .entradilla{margin-top:18px;max-width:54ch}
.portada-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media (max-width:980px){
  .portada-rejilla{grid-template-columns:minmax(0,1fr);gap:38px}
}

/* --- Portal de acceso --------------------------------------------------- */
.portal{background:var(--eq-blanco);color:var(--eq-azul-700);padding:clamp(24px,3.2vw,34px);
  border-top:6px solid var(--eq-turquesa);box-shadow:0 24px 60px rgba(2,15,26,.36)}
.portal h2{font-size:clamp(1.3rem,2.2vw,1.6rem)}
.portal .ayuda{font-size:.95rem;color:var(--eq-azul-600);margin-top:8px}
.campo{margin-top:22px}
.campo label{display:block;font-family:var(--eq-etiqueta);font-weight:600;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--eq-azul-600);margin-bottom:9px}
.campo-caja{display:flex;align-items:stretch;border:2px solid var(--eq-azul-200);background:var(--eq-blanco);
  transition:border-color .16s ease}
.campo-caja:focus-within{border-color:var(--eq-turquesa)}
.campo input{flex:1;min-width:0;border:0;background:transparent;padding:16px 16px;
  font-size:clamp(1.28rem,2.6vw,1.7rem);font-weight:700;letter-spacing:.06em;
  color:var(--eq-azul);font-variant-numeric:tabular-nums}

.campo input::placeholder{color:var(--eq-azul-450);font-weight:500;letter-spacing:.01em;font-size:.72em}
.campo input:focus{outline:none}
.contador{display:flex;align-items:center;padding-inline:14px;font-family:var(--eq-etiqueta);
  font-size:.92rem;font-weight:600;color:var(--eq-azul-600);border-left:2px solid var(--eq-azul-100);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.portal .boton{width:100%;margin-top:16px;padding-block:17px;font-size:1.05rem}
.portal .boton[disabled]{background:var(--eq-azul-100);color:var(--eq-azul-600);cursor:not-allowed;transform:none}
.aviso{margin-top:16px;padding:15px 17px;font-size:.95rem;line-height:1.55;
  border-left:4px solid var(--eq-azul-200);background:var(--eq-hueso);color:var(--eq-azul-700)}
.aviso[hidden]{display:none}
.aviso strong{color:var(--eq-azul)}
.aviso-error{border-left-color:#B23A2E;background:#FDF1EF;color:#7A2418}
.aviso-error strong{color:#7A2418}
.aviso-ok{border-left-color:var(--eq-turquesa);background:var(--eq-turquesa-palido)}
.aviso a{color:var(--eq-azul);font-weight:600}
.pasos{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--eq-azul-100);font-size:.88rem;color:var(--eq-azul-600)}
.pasos li{display:flex;align-items:center;gap:8px}
.pasos b{font-family:var(--eq-etiqueta);font-weight:600;color:var(--eq-turquesa-texto);
  border:1px solid var(--eq-azul-100);width:22px;height:22px;display:grid;place-items:center;flex:none}

/* --- Tarjetas ----------------------------------------------------------- */
.rejilla{display:grid;gap:clamp(16px,2vw,24px)}
.rejilla>*{min-width:0}
.rejilla-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rejilla-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.rejilla-3,.rejilla-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rejilla-2,.rejilla-3,.rejilla-4{grid-template-columns:minmax(0,1fr)}}

.tarjeta{background:var(--eq-blanco);border:1px solid var(--eq-azul-100);padding:clamp(22px,2.4vw,30px);
  transition:border-color .18s ease,transform .18s ease}
.tarjeta:hover{border-color:var(--eq-turquesa);transform:translateY(-3px)}
.tarjeta h3{margin-bottom:10px}
.tarjeta p{font-size:.97rem;color:var(--eq-azul-600)}
.tarjeta .modulo{width:32px;height:32px;background:var(--eq-turquesa);margin-bottom:18px;
  clip-path:polygon(0 0,100% 0,100% 38%,38% 38%,38% 100%,0 100%)}
.seccion-oscura .tarjeta{background:var(--eq-azul-800);border-color:rgba(255,255,255,.1)}
.seccion-oscura .tarjeta p{color:#B7C8D4}
.seccion-oscura .tarjeta:hover{border-color:var(--eq-turquesa)}

/* --- Etapas del método -------------------------------------------------- */
.etapas{counter-reset:etapa;display:grid;gap:2px;background:var(--eq-azul-100)}
.etapa{counter-increment:etapa;background:var(--eq-blanco);padding:clamp(20px,2.6vw,28px);
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:clamp(16px,2.4vw,30px);align-items:start}
.etapa::before{content:counter(etapa,decimal-leading-zero);font-family:var(--eq-etiqueta);font-weight:600;
  font-size:1.5rem;color:var(--eq-turquesa-texto);line-height:1.2}
.etapa h3{margin-bottom:6px}
.etapa p{font-size:.97rem;color:var(--eq-azul-600)}
.etapa .entrega{display:inline-block;margin-top:10px;font-family:var(--eq-etiqueta);font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--eq-azul);background:var(--eq-turquesa-palido);
  padding:5px 11px;border:1px solid var(--eq-turquesa-claro)}
@media (max-width:620px){
  .etapa{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* --- Diagrama de servidores --------------------------------------------- */
.servidores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.servidor{border:1px solid rgba(255,255,255,.16);background:var(--eq-azul-800);padding:20px}
.servidor .barra-titulo{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.servidor .punto{width:9px;height:9px;background:var(--eq-turquesa);flex:none}
.servidor .nombre{font-family:var(--eq-etiqueta);font-size:.84rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--eq-blanco)}
.servidor ul{display:grid;gap:7px;font-size:.9rem;color:#AEC2D0}
.servidor li{display:flex;gap:9px;align-items:baseline}
.servidor li::before{content:"";width:6px;height:6px;background:var(--eq-azul-400);flex:none;translate:0 -2px}
@media (max-width:760px){.servidores{grid-template-columns:minmax(0,1fr)}}

/* --- Preguntas ---------------------------------------------------------- */
.preguntas{display:grid;gap:2px;background:var(--eq-azul-100)}
.pregunta{background:var(--eq-blanco)}
.pregunta summary{cursor:pointer;list-style:none;padding:20px clamp(18px,2.4vw,26px);
  font-weight:600;color:var(--eq-azul);display:flex;justify-content:space-between;gap:18px;align-items:center}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"";width:13px;height:13px;flex:none;border-right:2px solid var(--eq-turquesa-texto);
  border-bottom:2px solid var(--eq-turquesa-texto);rotate:45deg;translate:0 -3px;transition:rotate .2s ease}
.pregunta[open] summary::after{rotate:-135deg;translate:0 3px}
.pregunta summary:hover{background:var(--eq-hueso)}
.pregunta .respuesta{padding:0 clamp(18px,2.4vw,26px) 22px;font-size:.98rem;color:var(--eq-azul-600);max-width:78ch}

/* --- Contacto ----------------------------------------------------------- */
.contacto-rejilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:860px){.contacto-rejilla{grid-template-columns:minmax(0,1fr)}}
.datos{display:grid;gap:2px;background:rgba(255,255,255,.12);margin-top:8px}
.dato{background:var(--eq-azul);padding:18px 20px}
.dato dt{font-family:var(--eq-etiqueta);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--eq-turquesa-claro);margin-bottom:5px}
.dato dd{margin:0;font-size:1.02rem;color:var(--eq-blanco);font-weight:500;word-break:break-word}
.dato dd a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.dato dd a:hover{border-bottom-color:var(--eq-turquesa)}

.lista-marca{display:grid;gap:10px;max-width:58ch;margin-top:20px}
.lista-marca li{display:flex;gap:12px;align-items:baseline;font-size:.98rem}
.lista-marca li::before{content:"";width:7px;height:7px;background:var(--eq-turquesa);flex:none;translate:0 -2px}

/* --- Pie ---------------------------------------------------------------- */
.pie{background:var(--eq-azul-800);color:#9FB6C5;padding-block:clamp(38px,5vw,56px);font-size:.92rem}
.pie-rejilla{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.pie img{width:180px;height:auto;margin-bottom:16px}
.pie .pie-titulo{font-family:var(--eq-etiqueta);font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--eq-blanco);margin:0 0 12px;font-weight:600}
.pie ul{display:grid;gap:9px}
.pie a{text-decoration:none;border-bottom:1px solid transparent}
.pie a:hover{color:var(--eq-blanco);border-bottom-color:var(--eq-turquesa)}
.pie-fin{margin-top:clamp(28px,4vw,44px);padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.86rem}
@media (max-width:760px){.pie-rejilla{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ─── Equipo ──────────────────────────────────────────────────────────────────
   El retrato es un disco turquesa con las iniciales en azul oscuro. La marca
   prohíbe el texto blanco sobre turquesa (2.08:1); azul sobre turquesa da
   7.66:1, que es AAA. Por eso las iniciales van en azul y no al revés. */
.equipo .persona{ text-align:center; }
.persona .avatar{
  width:96px; height:96px; margin:0 auto .9rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--eq-turquesa);
  color:var(--eq-azul);
  font-family:var(--eq-titulo);
  font-weight:800; font-size:2rem; letter-spacing:.04em;
  user-select:none;
}
.persona h2{ font-size:1.15rem; margin:0 0 .15rem; }
.persona-rol{
  font-family:var(--eq-etiqueta);
  text-transform:uppercase; letter-spacing:.08em; font-size:.82rem;
  color:var(--eq-turquesa-texto);
  margin:0 0 .7rem;
}

/* ─── Páginas legales ─────────────────────────────────────────────────────────
   Columna angosta: un texto legal se lee mal a todo el ancho de la pantalla. */
.legal{ max-width:72ch; }
.legal h2{ font-size:1.25rem; margin:2.2rem 0 .6rem; }
.legal h3{ font-size:1rem; margin:1.4rem 0 .4rem; }
.legal p, .legal li{ line-height:1.7; }
.legal ul, .legal ol{ padding-left:1.2rem; }
.legal li{ margin-bottom:.35rem; }
.legal .actualizado{
  font-family:var(--eq-etiqueta);
  text-transform:uppercase; letter-spacing:.08em; font-size:.8rem;
  color:var(--eq-azul-450);
}
/* Dato que falta completar cuando exista: se ve, no se disimula. */
.legal .por-completar{
  background:var(--eq-turquesa-palido);
  border-left:3px solid var(--eq-turquesa);
  padding:.15rem .4rem; font-weight:600;
}
.legal .indice{
  background:var(--eq-hueso);
  border:1px solid var(--eq-azul-100);
  border-radius:10px; padding:1rem 1rem 1rem 2.2rem; margin:1.5rem 0;
}
.legal .indice li{ margin-bottom:.2rem; }