/* ============================================================
   NUCLEO - sistema de diseno compartido por tecnomedia.pe y sophiasoft.pe
   Sin dependencias. Cada sitio redefine solo la marca en :root.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* marca: cada sitio la sobreescribe */
  --marca:        #005088;
  --marca-claro:  #0098e0;
  --marca-oscuro: #003a63;
  --acento:       #f89800;
  --acento-suave: #ffb648;

  /* derivados */
  --marca-06: color-mix(in srgb, var(--marca) 6%, transparent);
  --marca-12: color-mix(in srgb, var(--marca) 12%, transparent);
  --marca-20: color-mix(in srgb, var(--marca) 20%, transparent);
  /* La marca como TEXTO no puede ser la misma que como FONDO: el azul marino
     sobre el fondo oscuro se queda en 2,2:1. En claro valen lo mismo; en oscuro
     este se aclara y el otro no, porque debajo lleva texto blanco. */
  --marca-texto: var(--marca);
  --acento-10: color-mix(in srgb, var(--acento) 10%, transparent);
  --acento-24: color-mix(in srgb, var(--acento) 24%, transparent);

  /* superficie clara */
  --fondo:      #ffffff;
  --fondo-2:    #f7f8fb;
  --fondo-3:    #eef1f7;
  --panel:      #ffffff;
  --texto:      #0e1420;
  --texto-2:    #47536b;
  --texto-3:    #7d8798;
  --borde:      #e2e7f0;
  --borde-2:    #cfd7e6;

  /* tipografia */
  --tipo: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* escala fluida */
  --t-xs:  clamp(.72rem, .70rem + .10vw, .80rem);
  --t-sm:  clamp(.84rem, .81rem + .15vw, .94rem);
  --t-md:  clamp(.98rem, .94rem + .20vw, 1.09rem);
  --t-lg:  clamp(1.12rem, 1.05rem + .34vw, 1.32rem);
  --t-xl:  clamp(1.36rem, 1.22rem + .70vw, 1.86rem);
  --t-2xl: clamp(1.72rem, 1.42rem + 1.45vw, 2.72rem);
  --t-3xl: clamp(2.16rem, 1.62rem + 2.60vw, 4.00rem);
  --t-4xl: clamp(2.60rem, 1.70rem + 4.30vw, 5.40rem);

  /* ritmo */
  --gutter: clamp(1.15rem, 4vw, 2rem);
  --ancho:  1220px;
  --ancho-txt: 68ch;
  --sec-y: clamp(3.6rem, 8vw, 7.5rem);

  /* forma */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px;
  --r-lg: 26px; --r-xl: 36px; --r-full: 999px;

  --sombra-1: 0 1px 2px rgba(10,22,50,.05), 0 2px 8px -3px rgba(10,22,50,.07);
  --sombra-2: 0 4px 12px -4px rgba(10,22,50,.10), 0 12px 34px -14px rgba(10,22,50,.16);
  --sombra-3: 0 10px 24px -8px rgba(10,22,50,.14), 0 30px 70px -28px rgba(10,22,50,.26);
  --sombra-marca: 0 12px 34px -14px var(--marca-20);

  /* movimiento */
  --sal: cubic-bezier(.16,1,.3,1);
  --muelle: cubic-bezier(.34,1.42,.64,1);
  --v-1: .18s; --v-2: .34s; --v-3: .6s;
}

/* superficie oscura */
:root[data-tema="oscuro"]{
  --marca-texto: var(--marca-claro);
  --texto-3:   #8996ad;   /* 4,24:1 era insuficiente para el texto pequeno */
  --fondo:   #080b12;
  --fondo-2: #0d1220;
  --fondo-3: #141b2d;
  --panel:   #101728;
  --texto:   #eef2f9;
  --texto-2: #a5b1c6;
  --borde:   #1e2739;
  --borde-2: #2c3850;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 6px 18px -6px rgba(0,0,0,.55);
  --sombra-3: 0 18px 48px -16px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --marca-texto: var(--marca-claro);
    --texto-3:#8996ad;
    --fondo:#080b12; --fondo-2:#0d1220; --fondo-3:#141b2d; --panel:#101728;
    --texto:#eef2f9; --texto-2:#a5b1c6;
    --borde:#1e2739; --borde-2:#2c3850;
    --sombra-1:0 1px 2px rgba(0,0,0,.4);
    --sombra-2:0 6px 18px -6px rgba(0,0,0,.55);
    --sombra-3:0 18px 48px -16px rgba(0,0,0,.7);
  }
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--tipo); font-size:var(--t-md); line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background var(--v-2) var(--sal), color var(--v-2) var(--sal);
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.028em;font-weight:700;text-wrap:balance}
h1{font-size:var(--t-4xl);letter-spacing:-.038em}
h2{font-size:var(--t-3xl);letter-spacing:-.032em}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--acento-24);color:var(--texto)}
:focus-visible{outline:3px solid var(--marca-claro);outline-offset:3px;border-radius:6px}

/* ---------- 3. UTILES ---------- */
.env{width:min(100% - var(--gutter)*2, var(--ancho));margin-inline:auto}
.env-ancho{width:min(100% - var(--gutter)*2, 1440px);margin-inline:auto}
.sec{padding-block:var(--sec-y);position:relative}
.sec--alt{background:var(--fondo-2)}
.pila{display:flex;flex-direction:column}
.fila{display:flex;align-items:center;flex-wrap:wrap}
.g-xs{gap:.5rem}.g-sm{gap:.85rem}.g-md{gap:1.4rem}.g-lg{gap:2.2rem}.g-xl{gap:3.2rem}
.centro{text-align:center}
.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}
.mono{font-family:var(--mono);font-variant-ligatures:none}
.tenue{color:var(--texto-2)}
.mas-tenue{color:var(--texto-3)}
.medida{max-width:var(--ancho-txt)}
.medida-centro{max-width:var(--ancho-txt);margin-inline:auto}

/* degradado de marca sobre texto */
/* Dos tonos del mismo azul. Mezclar el azul con el naranja a mitad de palabra
   da un gris oliva apagado (probado en pantalla): el naranja se queda para los
   botones y los acentos, no para el texto grande. */
.deg{
  background:linear-gradient(100deg,var(--marca) 0%,var(--marca-claro) 62%,var(--marca-claro) 100%);
  background:linear-gradient(100deg in oklab,var(--marca) 0%,var(--marca-claro) 62%,var(--marca-claro) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;
}
/* variante calida, para un dato suelto que deba cantar */
.deg--calido{
  background:linear-gradient(100deg in oklab,var(--acento) 0%,var(--acento-suave) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.deg--anima{animation:deg-corre 7s linear infinite}
@keyframes deg-corre{to{background-position:220% center}}

/* ---------- 4. SUPERTITULO ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--marca-texto);
  padding:.42rem .9rem;border-radius:var(--r-full);
  background:var(--marca-06);border:1px solid var(--marca-12);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--acento);
  box-shadow:0 0 0 0 var(--acento-24);animation:latido 2.6s var(--sal) infinite;
}
@keyframes latido{0%{box-shadow:0 0 0 0 var(--acento-24)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- 5. BOTONES ---------- */
.btn{
  --btn-bg:var(--marca); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.88rem 1.55rem;border-radius:var(--r-full);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  font-weight:600;font-size:var(--t-sm);letter-spacing:-.01em;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--v-1) var(--muelle), box-shadow var(--v-2) var(--sal),
             background var(--v-2) var(--sal), color var(--v-2) var(--sal),
             border-color var(--v-2) var(--sal);
  box-shadow:var(--sombra-1);
  white-space:nowrap;
}
.btn::after{ /* brillo que cruza */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .62s var(--sal);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--acento{--btn-bg:var(--acento);--btn-fg:#1a1000;box-shadow:0 10px 26px -10px var(--acento-24)}
.btn--acento:hover{box-shadow:0 16px 36px -12px var(--acento-24)}
.btn--marco{--btn-bg:transparent;--btn-fg:var(--texto);--btn-bd:var(--borde-2);box-shadow:none}
.btn--marco:hover{--btn-bd:var(--marca);--btn-fg:var(--marca);background:var(--marca-06)}
.btn--fantasma{--btn-bg:transparent;--btn-fg:var(--texto-2);box-shadow:none;padding-inline:1rem}
.btn--fantasma:hover{--btn-fg:var(--marca);background:var(--marca-06)}
.btn--grande{padding:1.06rem 2rem;font-size:var(--t-md)}
.btn--bloque{width:100%}
.btn__flecha{transition:transform var(--v-2) var(--muelle)}
.btn:hover .btn__flecha{transform:translateX(4px)}

/* ---------- 6. TARJETAS ---------- */
.tarjeta{
  position:relative;background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--r-lg);padding:clamp(1.35rem,2.4vw,2rem);
  box-shadow:var(--sombra-1);
  transition:transform var(--v-2) var(--sal), box-shadow var(--v-2) var(--sal),
             border-color var(--v-2) var(--sal);
  overflow:hidden;
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:var(--borde-2)}
/* foco de luz que sigue al raton (lo alimenta nucleo.js) */
.tarjeta--foco::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--marca-06), transparent 62%);
  transition:opacity var(--v-2) var(--sal);
}
.tarjeta--foco:hover::before{opacity:1}
.tarjeta__icono{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-sm);background:var(--marca-06);color:var(--marca-texto);
  border:1px solid var(--marca-12);
  transition:transform var(--v-2) var(--muelle), background var(--v-2) var(--sal);
}
.tarjeta:hover .tarjeta__icono{transform:scale(1.08) rotate(-4deg);background:var(--marca-12)}
.tarjeta__titulo{font-size:var(--t-lg);font-weight:650;margin-bottom:.4rem}
.tarjeta__texto{color:var(--texto-2);font-size:var(--t-sm);line-height:1.62}

/* rejilla automatica */
.rejilla{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,278px),1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}

/* ---------- 7. NAVEGACION ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:900;
  padding-block:.8rem;
  background:color-mix(in srgb, var(--fondo) 72%, transparent);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color var(--v-2) var(--sal), background var(--v-2) var(--sal),
             padding var(--v-2) var(--sal), box-shadow var(--v-2) var(--sal);
}
.nav[data-pegado="1"]{
  border-bottom-color:var(--borde);padding-block:.5rem;
  background:color-mix(in srgb, var(--fondo) 90%, transparent);
  box-shadow:var(--sombra-1);
}
.nav__caja{display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.nav__marca{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.03em;font-size:var(--t-lg)}
.nav__marca img{height:34px;width:auto;transition:transform var(--v-2) var(--muelle), filter var(--v-2) var(--sal)}
/* el azul marino del logo pierde fuerza sobre el fondo oscuro */
:root[data-tema="oscuro"] .nav__marca img,
:root[data-tema="oscuro"] .pie img{filter:brightness(1.28) saturate(1.08)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .nav__marca img,
  :root:not([data-tema="claro"]) .pie img{filter:brightness(1.28) saturate(1.08)}
}
.nav__marca:hover img{transform:scale(1.06) rotate(-3deg)}
.nav__enlaces{display:flex;align-items:center;gap:.15rem}
.nav__enlace{
  padding:.5rem .68rem;border-radius:var(--r-full);font-size:var(--t-sm);font-weight:500;
  white-space:nowrap;
  color:var(--texto-2);position:relative;
  transition:color var(--v-1) var(--sal), background var(--v-1) var(--sal);
}
.nav__enlace:hover,.nav__enlace[aria-current="true"]{color:var(--texto);background:var(--marca-06)}
.nav__acciones{display:flex;align-items:center;gap:.5rem}
.nav__hamb{display:none;background:none;border:1px solid var(--borde);border-radius:var(--r-sm);
  width:42px;height:42px;cursor:pointer;place-items:center;color:var(--texto)}
.nav__barra{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--v-2) var(--sal), opacity var(--v-1) linear}
.nav__barra + .nav__barra{margin-top:5px}
.nav[data-abierto="1"] .nav__barra:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav[data-abierto="1"] .nav__barra:nth-child(2){opacity:0}
.nav[data-abierto="1"] .nav__barra:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tema-btn{
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--borde);border-radius:var(--r-full);background:transparent;
  color:var(--texto-2);transition:all var(--v-2) var(--sal);
}
.tema-btn:hover{color:var(--acento);border-color:var(--acento);transform:rotate(18deg)}
.tema-btn .luna{display:none}
:root[data-tema="oscuro"] .tema-btn .sol{display:none}
:root[data-tema="oscuro"] .tema-btn .luna{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .tema-btn .sol{display:none}
  :root:not([data-tema="claro"]) .tema-btn .luna{display:block}
}

@media (max-width:1080px){
  .nav__hamb{display:grid}
  .nav__enlaces{
    position:fixed;inset:64px var(--gutter) auto;flex-direction:column;align-items:stretch;
    background:var(--panel);border:1px solid var(--borde);border-radius:var(--r-lg);
    padding:.7rem;gap:.15rem;box-shadow:var(--sombra-3);
    opacity:0;visibility:hidden;transform:translateY(-12px) scale(.98);
    transition:opacity var(--v-2) var(--sal), transform var(--v-2) var(--sal), visibility var(--v-2);
  }
  .nav[data-abierto="1"] .nav__enlaces{opacity:1;visibility:visible;transform:none}
  .nav__enlace{padding:.72rem .9rem;font-size:var(--t-md)}
  .nav__acciones .btn{display:none}
}

/* ---------- 8. PORTADA ---------- */
.portada{position:relative;padding-block:clamp(7rem,14vw,10.5rem) var(--sec-y);overflow:hidden}
.portada__fondo{position:absolute;inset:0;z-index:-2;pointer-events:none}
/* malla de puntos con desvanecido */
.malla{
  position:absolute;inset:-2px;
  background-image:radial-gradient(circle at 1px 1px, var(--borde-2) 1px, transparent 0);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 12%, transparent 76%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 12%, transparent 76%);
  opacity:.75;
}
/* manchas de color que respiran */
.aurora{position:absolute;border-radius:50%;filter:blur(78px);opacity:.4;will-change:transform}
.aurora--1{width:44vw;height:44vw;max-width:640px;max-height:640px;top:-14%;left:-10%;
  background:radial-gradient(circle,var(--marca),transparent 68%);animation:flota-1 19s ease-in-out infinite}
.aurora--2{width:38vw;height:38vw;max-width:540px;max-height:540px;top:6%;right:-10%;
  background:radial-gradient(circle,var(--acento),transparent 68%);animation:flota-2 24s ease-in-out infinite}
.aurora--3{width:30vw;height:30vw;max-width:420px;max-height:420px;bottom:-16%;left:38%;
  background:radial-gradient(circle,var(--marca-claro),transparent 68%);animation:flota-3 21s ease-in-out infinite}
@keyframes flota-1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,9%) scale(1.13)}}
@keyframes flota-2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-9%,7%) scale(1.09)}}
@keyframes flota-3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-9%) scale(1.16)}}
:root[data-tema="oscuro"] .aurora{opacity:.28}

/* ---------- 9. REVELADO AL BAJAR ---------- */
[data-anima]{opacity:0;will-change:transform,opacity}
[data-anima="sube"]{transform:translateY(26px)}
[data-anima="baja"]{transform:translateY(-22px)}
[data-anima="izq"]{transform:translateX(-30px)}
[data-anima="der"]{transform:translateX(30px)}
[data-anima="zoom"]{transform:scale(.94)}
[data-anima="giro"]{transform:translateY(24px) rotate(-1.6deg)}
[data-anima].visto{opacity:1;transform:none;
  transition:opacity .74s var(--sal) var(--retraso,0s), transform .74s var(--sal) var(--retraso,0s)}
/* En pantalla estrecha, el desplazamiento lateral se sale del ancho y el navegador
   quiere hacer scroll horizontal. Ahi entran desde abajo. */
@media (max-width:700px){
  [data-anima="izq"],[data-anima="der"]{transform:translateY(24px)}
}

/* texto que entra palabra a palabra */
.palabra{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  transition:opacity .58s var(--sal) var(--retraso,0s), transform .58s var(--muelle) var(--retraso,0s)}
.palabra.visto{opacity:1;transform:none}

/* ---------- 10. CIFRAS ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:clamp(1rem,2.6vw,2rem)}
.cifra{text-align:center;position:relative}
.cifra__n{font-size:var(--t-3xl);font-weight:750;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,var(--marca),var(--marca-claro));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cifra__t{margin-top:.55rem;font-size:var(--t-sm);color:var(--texto-2)}

/* ---------- 11. CINTA QUE CORRE ---------- */
.cinta{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta__pista{display:flex;gap:clamp(1.6rem,4vw,3.4rem);width:max-content;
  animation:cinta-corre var(--cinta-vel,34s) linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
@keyframes cinta-corre{to{transform:translateX(-50%)}}
.cinta__pieza{display:flex;align-items:center;gap:.6rem;color:var(--texto-3);
  font-weight:600;font-size:var(--t-sm);white-space:nowrap}

/* ---------- 12. ACORDEON ---------- */
.acor{border-top:1px solid var(--borde)}
.acor__item{border-bottom:1px solid var(--borde)}
.acor__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.28rem .2rem;background:none;border:0;cursor:pointer;text-align:left;
  font-weight:600;font-size:var(--t-lg);letter-spacing:-.02em;
  transition:color var(--v-1) var(--sal)}
.acor__btn:hover{color:var(--marca-texto)}
.acor__mas{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  background:var(--marca-06);color:var(--marca-texto);transition:transform var(--v-2) var(--muelle), background var(--v-2) var(--sal)}
.acor__item[data-abierto="1"] .acor__mas{transform:rotate(135deg);background:var(--acento);color:#1a1000}
.acor__cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--v-3) var(--sal)}
.acor__item[data-abierto="1"] .acor__cuerpo{grid-template-rows:1fr}
.acor__interior{overflow:hidden}
.acor__interior > p{padding-bottom:1.35rem;color:var(--texto-2);max-width:74ch}

/* ---------- 13. PESTANAS ---------- */
.pest{display:inline-flex;padding:.3rem;gap:.2rem;border-radius:var(--r-full);
  background:var(--fondo-3);border:1px solid var(--borde);position:relative}
.pest__btn{padding:.6rem 1.25rem;border:0;background:none;cursor:pointer;border-radius:var(--r-full);
  font-weight:600;font-size:var(--t-sm);color:var(--texto-2);position:relative;z-index:1;
  transition:color var(--v-2) var(--sal);white-space:nowrap}
.pest__btn[aria-selected="true"]{color:#fff}
.pest__pastilla{position:absolute;z-index:0;border-radius:var(--r-full);
  background:linear-gradient(120deg,var(--marca),var(--marca-claro));
  box-shadow:var(--sombra-marca);
  transition:transform var(--v-3) var(--muelle), width var(--v-3) var(--muelle)}
.panel[hidden]{display:none}
.panel{animation:panel-entra .5s var(--sal)}
@keyframes panel-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- 14. WHATSAPP ---------- */
.wa{
  position:fixed;right:clamp(1rem,3vw,1.7rem);bottom:clamp(1rem,3vw,1.7rem);z-index:950;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;box-shadow:0 10px 28px -8px rgba(37,211,102,.62);
  transition:transform var(--v-2) var(--muelle), box-shadow var(--v-2) var(--sal);
}
.wa::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;
  animation:wa-onda 2.6s var(--sal) infinite}
@keyframes wa-onda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.wa:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 16px 40px -10px rgba(37,211,102,.75)}
.wa svg{width:31px;height:31px}

/* ---------- 15. IR ARRIBA ---------- */
.arriba{
  position:fixed;right:clamp(1rem,3vw,1.7rem);bottom:calc(clamp(1rem,3vw,1.7rem) + 70px);z-index:940;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--panel);color:var(--texto-2);border:1px solid var(--borde);box-shadow:var(--sombra-2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--v-2) var(--sal), transform var(--v-2) var(--sal), visibility var(--v-2), color var(--v-1);
}
.arriba[data-ver="1"]{opacity:1;visibility:visible;transform:none}
.arriba:hover{color:var(--marca-texto);border-color:var(--marca-texto)}

/* ---------- 16. FORMULARIO ---------- */
.campo{display:flex;flex-direction:column;gap:.42rem}
.campo__et{font-size:var(--t-sm);font-weight:600;color:var(--texto-2)}
.campo__et span{color:var(--acento)}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.82rem 1rem;border-radius:var(--r-sm);
  background:var(--fondo);border:1.5px solid var(--borde);color:var(--texto);
  font-size:var(--t-sm);transition:border-color var(--v-1) var(--sal), box-shadow var(--v-1) var(--sal), background var(--v-1)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3)}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:0;border-color:var(--marca-texto);box-shadow:0 0 0 4px var(--marca-12)}
.campo textarea{resize:vertical;min-height:112px}
.campo--mal input,.campo--mal textarea,.campo--mal select{border-color:#e5484d}
.campo__error{font-size:var(--t-xs);color:#e5484d;min-height:1em}
.aviso{padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:var(--t-sm);display:none}
.aviso[data-ver="1"]{display:block;animation:panel-entra .4s var(--sal)}
.aviso--ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#15803d}
.aviso--mal{background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.3);color:#c2262b}
:root[data-tema="oscuro"] .aviso--ok{color:#4ade80}
:root[data-tema="oscuro"] .aviso--mal{color:#ff8b8f}

/* ---------- 17. PIE ---------- */
.pie{background:var(--fondo-2);border-top:1px solid var(--borde);padding-block:clamp(2.8rem,6vw,4.4rem) 1.8rem}
.pie__rejilla{display:grid;gap:2.4rem;grid-template-columns:1.6fr repeat(auto-fit,minmax(140px,1fr))}
.pie__tit{font-size:var(--t-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:.9rem}
.pie__lista li + li{margin-top:.55rem}
.pie__lista a{font-size:var(--t-sm);color:var(--texto-2);transition:color var(--v-1) var(--sal), padding-left var(--v-1) var(--sal)}
.pie__lista a:hover{color:var(--marca-texto);padding-left:4px}
.pie__abajo{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--borde);
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;
  font-size:var(--t-xs);color:var(--texto-3)}

/* ---------- 18. VARIOS ---------- */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .78rem;border-radius:var(--r-full);
  background:var(--fondo-3);border:1px solid var(--borde);font-size:var(--t-xs);font-weight:600;color:var(--texto-2)}
.chip--acento{background:var(--acento-10);border-color:var(--acento-24);color:var(--acento)}
.linea-luz{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--borde-2),transparent);margin:0}

/* barra de progreso de lectura */
.progreso{position:fixed;top:0;left:0;height:3px;z-index:999;
  background:linear-gradient(90deg,var(--marca),var(--marca-claro),var(--acento));
  width:var(--pct,0%);transition:width .1s linear}

/* ---------- 19. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-anima],.palabra{opacity:1 !important;transform:none !important}
  .aurora{animation:none}
}

/* ---------- 20. IMPRESION ---------- */
@media print{
  .nav,.wa,.arriba,.progreso{display:none !important}
  body{background:#fff;color:#000}
}

/* ---------- 21. ETIQUETAS DE ESTADO EN OSCURO ---------- */
/* El verde sobre verde daba 1,00:1. En oscuro se aclara el texto. */
:root[data-tema="oscuro"] .mq-eti{background:rgba(248,152,0,.18);color:#ffc46b;border-color:rgba(255,196,107,.34)}
:root[data-tema="oscuro"] .mq-eti--ok{background:rgba(31,138,76,.24);color:#7fe8ab;border-color:rgba(127,232,171,.4)}
:root[data-tema="oscuro"] .mq-eti--info{background:rgba(255,255,255,.12);color:#9fd8f7;border-color:rgba(255,255,255,.24)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .mq-eti{background:rgba(248,152,0,.18);color:#ffc46b;border-color:rgba(255,196,107,.34)}
  :root:not([data-tema="claro"]) .mq-eti--ok{background:rgba(31,138,76,.24);color:#7fe8ab;border-color:rgba(127,232,171,.4)}
  :root:not([data-tema="claro"]) .mq-eti--info{background:rgba(255,255,255,.12);color:#9fd8f7;border-color:rgba(255,255,255,.24)}
}