/* ==========================================================================
   COLEGIO SECUNDARIO MODELO — Hoja de estilos institucional
   Paleta derivada del logo: azul #0F0D93 · rojo #FF1616 · celeste #147EA3
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Azules institucionales */
  --azul-950:#070B24;
  --azul-900:#0C1238;
  --azul-850:#101950;
  --azul-800:#152063;
  --azul-700:#1C2A85;
  --azul-600:#2536A8;
  --azul-500:#3547C9;
  --azul-300:#8E99E8;
  --azul-100:#E4E7FA;
  --azul-50:#F1F3FD;

  /* Rojo institucional */
  --rojo-700:#98101A;
  --rojo-600:#C4131E;
  --rojo-500:#E01821;
  --rojo-400:#FF2B2B;
  --rojo-100:#FDE7E8;

  /* Apoyo */
  --celeste:#147EA3;
  --celeste-100:#E2F1F6;
  --verde:#0F7A5A;
  --dorado:#B8892B;
  --dorado-100:#F8EFDD;

  /* Neutros */
  --blanco:#FFFFFF;
  --crema:#FAF8F4;
  --gris-50:#F6F7F9;
  --gris-100:#EDEFF3;
  --gris-200:#DFE3EA;
  --gris-300:#C6CCD8;
  --gris-400:#9AA3B4;
  --gris-500:#6B7488;
  --gris-600:#4E566A;
  --gris-700:#39404F;
  --gris-900:#1A1E28;

  /* Semánticos */
  --texto:#242A38;
  --texto-suave:#5A6274;
  --borde:#E3E7EE;
  --fondo:#FFFFFF;

  /* Tipografía */
  --fuente:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fuente-serif:'Lora',Georgia,'Times New Roman',serif;

  /* Medidas */
  --ancho:1200px;
  --ancho-angosto:760px;
  --radio-sm:8px;
  --radio:14px;
  --radio-lg:22px;
  --radio-xl:32px;

  /* Sombras */
  --sombra-xs:0 1px 2px rgba(12,18,56,.06);
  --sombra-sm:0 2px 8px rgba(12,18,56,.07);
  --sombra:0 8px 28px rgba(12,18,56,.09);
  --sombra-lg:0 20px 56px rgba(12,18,56,.14);
  --sombra-azul:0 14px 36px rgba(28,42,133,.24);
  --sombra-roja:0 14px 34px rgba(196,19,30,.28);

  --trans:.28s cubic-bezier(.4,0,.2,1);
  --header-h:88px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);overflow-x:clip}
body{
  font-family:var(--fuente);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.7;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  min-width:0;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--azul-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--azul-700);color:#fff}

/* ---------- 3. Tipografía ---------- */
h1,h2,h3,h4,h5{
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--azul-900);
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,1.35rem + 3.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,1.2rem + 2.1vw,2.85rem)}
h3{font-size:clamp(1.25rem,1.08rem + .75vw,1.65rem);letter-spacing:-.015em}
h4{font-size:1.14rem;font-weight:700;letter-spacing:-.01em}
p{text-wrap:pretty}
p + p{margin-top:1.05em}
strong{font-weight:700;color:var(--azul-900)}

.lead{
  font-size:clamp(1.08rem,1rem + .5vw,1.3rem);
  line-height:1.65;
  color:var(--texto-suave);
  font-weight:400;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.775rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo-600);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--rojo-500);border-radius:2px}
.eyebrow--claro{color:#FF8E8E}
.eyebrow--claro::before{background:var(--rojo-400)}
.eyebrow--centro{justify-content:center}

.serif{font-family:var(--fuente-serif)}

/* ---------- 4. Layout ---------- */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
.contenedor--angosto{max-width:var(--ancho-angosto)}
.contenedor--ancho{max-width:1360px}

.seccion{padding-block:clamp(3.5rem,2rem + 6vw,7rem)}
.seccion--sm{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem)}
.seccion--crema{background:var(--crema)}
.seccion--gris{background:var(--gris-50)}
.seccion--azul{background:var(--azul-900);color:#DDE1F2}
.seccion--azul h1,.seccion--azul h2,.seccion--azul h3,.seccion--azul h4{color:#fff}
.seccion--azul .lead{color:#B7BFE0}

.encabezado-seccion{max-width:720px;margin-bottom:clamp(2.2rem,1.5rem + 2vw,3.4rem)}
.encabezado-seccion--centro{margin-inline:auto;text-align:center}
.encabezado-seccion h2 + .lead{margin-top:1.1rem}

.grid{display:grid;gap:clamp(1.15rem,.8rem + 1.2vw,2rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}
.grid--ajustada{gap:1.1rem}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.split--top{align-items:start}

.mt-0{margin-top:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}
.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}
.centro{text-align:center}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 5. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.75rem;
  border-radius:100px;
  font-weight:700;font-size:.975rem;letter-spacing:-.005em;
  transition:var(--trans);
  border:2px solid transparent;
  cursor:pointer;line-height:1.2;text-align:center;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn--primario{background:var(--rojo-600);color:#fff;box-shadow:var(--sombra-roja)}
.btn--primario:hover{background:var(--rojo-700);transform:translateY(-2px);box-shadow:0 18px 40px rgba(152,16,26,.34)}
.btn--azul{background:var(--azul-800);color:#fff;box-shadow:var(--sombra-azul)}
.btn--azul:hover{background:var(--azul-900);transform:translateY(-2px)}
.btn--linea{border-color:var(--azul-800);color:var(--azul-800);background:transparent}
.btn--linea:hover{background:var(--azul-800);color:#fff;transform:translateY(-2px)}
.btn--linea-claro{border-color:rgba(255,255,255,.45);color:#fff}
.btn--linea-claro:hover{background:#fff;color:var(--azul-900);border-color:#fff}
.btn--blanco{background:#fff;color:var(--azul-900);box-shadow:var(--sombra)}
.btn--blanco:hover{transform:translateY(-2px);box-shadow:var(--sombra-lg)}
.btn--sm{padding:.62rem 1.2rem;font-size:.875rem}
.btn--lg{padding:1.08rem 2.2rem;font-size:1.05rem}
.btn--bloque{width:100%}
.botonera{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.botonera--centro{justify-content:center}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;color:var(--rojo-600);font-size:.94rem;
  transition:gap var(--trans),color var(--trans);
}
.enlace-flecha svg{width:17px;height:17px;transition:transform var(--trans)}
.enlace-flecha:hover{gap:.75rem;color:var(--rojo-700)}
.enlace-flecha:hover svg{transform:translateX(3px)}

/* ---------- 6. Header ---------- */
.barra-superior{
  background:var(--azul-950);color:#A8B0D4;
  font-size:.815rem;padding:.5rem 0;
}
.barra-superior .contenedor{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.barra-superior a{transition:color var(--trans)}
.barra-superior a:hover{color:#fff}
.barra-superior__datos{display:flex;gap:1.5rem;flex-wrap:wrap}
.barra-superior__datos span,.barra-superior__datos a{display:inline-flex;align-items:center;gap:.4rem}
.barra-superior svg{width:14px;height:14px;color:var(--rojo-400)}
.barra-superior__redes{display:flex;gap:.7rem;align-items:center}
.barra-superior__redes svg{width:15px;height:15px;color:#A8B0D4}
.barra-superior__redes a:hover svg{color:#fff}

.cabecera{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borde);
  transition:box-shadow var(--trans);
}
.cabecera.fijada{box-shadow:0 6px 26px rgba(12,18,56,.1)}
.cabecera__interno{display:flex;align-items:center;justify-content:space-between;gap:clamp(.7rem,1.4vw,1.6rem);height:var(--header-h);min-width:0}

.marca{display:flex;align-items:center;gap:clamp(.5rem,.7vw,.85rem);flex:0 0 auto;min-width:0}
.marca img{width:56px;height:56px;object-fit:contain}
.marca__texto{display:flex;flex-direction:column;line-height:1.15}
.marca__nombre{font-weight:800;font-size:1.02rem;color:var(--azul-900);letter-spacing:-.02em}
.marca__sub{font-size:.7rem;font-weight:600;color:var(--rojo-600);letter-spacing:.1em;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:.1rem;flex:0 1 auto;min-width:0}
.nav__item{position:relative}
.nav__enlace{
  display:flex;align-items:center;gap:.3rem;
  padding:.62rem clamp(.42rem,.62vw,.82rem);border-radius:10px;
  font-weight:600;font-size:clamp(.855rem,.63vw,.925rem);color:var(--gris-700);
  transition:var(--trans);white-space:nowrap;
}
.nav__enlace svg{width:14px;height:14px;transition:transform var(--trans);opacity:.6}
.nav__enlace:hover{color:var(--azul-800);background:var(--azul-50)}
.nav__item:hover > .nav__enlace svg{transform:rotate(180deg)}
.nav__enlace.activo{color:var(--azul-800);background:var(--azul-50)}
.nav__enlace.activo::after{
  content:"";position:absolute;left:clamp(.42rem,.62vw,.82rem);right:clamp(.42rem,.62vw,.82rem);bottom:.15rem;
  height:2.5px;background:var(--rojo-500);border-radius:2px;
}

.submenu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:262px;
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra-lg);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:var(--trans);
}
.nav__item:hover .submenu,.nav__item:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.submenu a{
  display:block;padding:.62rem .85rem;border-radius:9px;
  font-size:.9rem;font-weight:500;color:var(--gris-700);transition:var(--trans);
}
.submenu a:hover{background:var(--azul-50);color:var(--azul-800);padding-left:1.1rem}

.cabecera__acciones{display:flex;align-items:center;gap:.55rem;flex:0 0 auto}
.menu-btn{display:none;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;color:var(--azul-900);background:var(--gris-100)}
.menu-btn svg{width:24px;height:24px}

/* Menú móvil */
.nav-movil{
  position:fixed;inset:0;z-index:200;
  background:var(--azul-950);color:#fff;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:1.3rem 0 3rem;
}
.nav-movil.abierto{transform:translateX(0)}
.nav-movil__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.nav-movil__top .marca__nombre,.nav-movil__top .marca__sub{color:#fff}
.nav-movil__cerrar{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff}
.nav-movil__cerrar svg{width:24px;height:24px}
.nav-movil__lista > li{border-bottom:1px solid rgba(255,255,255,.09)}
.nav-movil__lista > li > a,.nav-movil__toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:1.05rem 0;font-size:1.06rem;font-weight:700;color:#fff;
}
.nav-movil__toggle svg{width:19px;height:19px;transition:transform var(--trans);opacity:.7}
.nav-movil__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-movil__sub{max-height:0;overflow:hidden;transition:max-height .35s ease}
.nav-movil__sub.abierto{max-height:520px}
.nav-movil__sub a{display:block;padding:.62rem 0 .62rem 1.1rem;font-size:.95rem;color:#AFB7DC;border-left:2px solid rgba(255,255,255,.16);margin-bottom:.15rem}
.nav-movil__sub a:hover{color:#fff;border-color:var(--rojo-400)}
.nav-movil__pie{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  background:linear-gradient(135deg,var(--azul-950) 0%,var(--azul-850) 48%,var(--azul-700) 100%);
  color:#fff;overflow:hidden;
  padding-block:clamp(3.5rem,2rem + 8vw,7.5rem);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img,none);
  background-size:cover;background-position:center;
  opacity:.85;
}
.hero::after{
  content:"";position:absolute;z-index:-1;
  width:820px;height:820px;right:-260px;top:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(53,71,201,.45) 0%,transparent 68%);
}
.hero h1{color:#fff;max-width:16ch}
.hero .lead{color:#C3CAE8;max-width:56ch;margin-top:1.4rem}
.hero__interno{position:relative;z-index:2;max-width:760px}
.hero--centrado .hero__interno{max-width:800px;margin-inline:auto;text-align:center}
.hero--centrado h1{max-width:none}
.hero--centrado .lead{margin-inline:auto}
.hero--centrado .botonera{justify-content:center}

/* Hero de portada, más alto y con tarjeta */
.hero--portada{padding-block:clamp(4rem,2rem + 10vw,9rem);min-height:min(88vh,760px);display:flex;align-items:center}
.hero__badge{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  padding:.45rem 1.05rem;border-radius:100px;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;color:#fff;margin-bottom:1.5rem;
  backdrop-filter:blur(8px);
}
.hero__badge svg{width:15px;height:15px;color:var(--dorado)}

/* Hero interno de páginas */
.hero--interno{padding-block:clamp(2.8rem,2rem + 4vw,5rem)}
.hero--interno h1{font-size:clamp(1.95rem,1.4rem + 2.4vw,3.1rem)}

.migas{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.83rem;color:#A5AEDA;margin-bottom:1.1rem}
.migas a{transition:color var(--trans)}
.migas a:hover{color:#fff}
.migas span{opacity:.5}
.migas .actual{color:#fff;font-weight:600}

/* Onda decorativa */
.onda{display:block;width:100%;height:auto;margin-bottom:-1px}
.onda--arriba{margin-top:-1px;margin-bottom:0}

/* ---------- 8. Tarjetas ---------- */
.tarjeta{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio-lg);
  padding:clamp(1.5rem,1.2rem + .9vw,2.1rem);
  transition:var(--trans);position:relative;overflow:hidden;height:100%;
  display:flex;flex-direction:column;
}
.tarjeta:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg);border-color:transparent}
.tarjeta__icono{
  width:58px;height:58px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--azul-50);color:var(--azul-700);margin-bottom:1.25rem;
  transition:var(--trans);flex-shrink:0;
}
.tarjeta__icono svg{width:27px;height:27px}
.tarjeta:hover .tarjeta__icono{background:var(--azul-800);color:#fff;transform:scale(1.06) rotate(-4deg)}
.tarjeta h3{margin-bottom:.6rem}
.tarjeta p{color:var(--texto-suave);font-size:.955rem}
.tarjeta .enlace-flecha{margin-top:auto;padding-top:1.2rem}

.tarjeta--roja .tarjeta__icono{background:var(--rojo-100);color:var(--rojo-600)}
.tarjeta--roja:hover .tarjeta__icono{background:var(--rojo-600)}
.tarjeta--linea-sup::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--rojo-500),var(--azul-600));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.tarjeta--linea-sup:hover::before{transform:scaleX(1)}

/* Tarjeta de modalidad */
.tarjeta-mod{
  position:relative;overflow:hidden;border-radius:var(--radio-lg);
  background:#fff;border:1px solid var(--borde);
  display:flex;flex-direction:column;transition:var(--trans);height:100%;
}
.tarjeta-mod:hover{transform:translateY(-6px);box-shadow:var(--sombra-lg)}
.tarjeta-mod__cabecera{
  padding:1.7rem 1.7rem 1.4rem;color:#fff;position:relative;overflow:hidden;
  background:var(--mod-color,var(--azul-800));
}
.tarjeta-mod__cabecera::after{
  content:"";position:absolute;right:-40px;bottom:-55px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.09);
}
.tarjeta-mod__cabecera svg{width:34px;height:34px;margin-bottom:.9rem;position:relative;z-index:1}
.tarjeta-mod__cabecera h3{color:#fff;font-size:1.32rem;position:relative;z-index:1}
.tarjeta-mod__cuerpo{padding:1.5rem 1.7rem 1.8rem;display:flex;flex-direction:column;flex:1}
.tarjeta-mod__cuerpo p{color:var(--texto-suave);font-size:.95rem}
.tarjeta-mod__cuerpo .enlace-flecha{margin-top:auto;padding-top:1.3rem}

/* Tarjeta de noticia */
.nota{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio-lg);
  overflow:hidden;display:flex;flex-direction:column;height:100%;transition:var(--trans);
}
.nota:hover{transform:translateY(-5px);box-shadow:var(--sombra-lg)}
.nota__img{aspect-ratio:16/10;overflow:hidden;background:var(--gris-100)}
.nota__img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.nota:hover .nota__img img{transform:scale(1.05)}
.nota__cuerpo{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.nota__meta{display:flex;align-items:center;gap:.7rem;font-size:.78rem;color:var(--gris-500);margin-bottom:.7rem;flex-wrap:wrap}
.nota__cat{
  background:var(--azul-50);color:var(--azul-700);
  padding:.22rem .68rem;border-radius:100px;font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;
}
.nota h3{font-size:1.12rem;margin-bottom:.55rem;line-height:1.3}
.nota h3 a:hover{color:var(--rojo-600)}
.nota p{font-size:.925rem;color:var(--texto-suave)}
.nota .enlace-flecha{margin-top:auto;padding-top:1.1rem}

/* ---------- 9. Cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(1.5rem,1rem + 2vw,3rem)}
.cifra{text-align:center}
.cifra__icono{
  width:52px;height:52px;margin:0 auto .9rem;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--rojo-400);
}
.cifra__icono svg{width:25px;height:25px}
.cifra__valor{font-size:clamp(2.3rem,1.6rem + 2.4vw,3.4rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff}
.cifra__etiqueta{font-size:.9rem;color:#A9B2DA;margin-top:.55rem;font-weight:500}
.cifras--claro .cifra__icono{background:var(--azul-50);color:var(--azul-700)}
.cifras--claro .cifra__valor{color:var(--azul-900)}
.cifras--claro .cifra__etiqueta{color:var(--texto-suave)}

/* ---------- 10. Acentos tecnológicos (institucional 2026) ---------- */
/* Malla de puntos / grilla técnica de fondo */
.malla-puntos{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
}
.malla-puntos--oscura{
  background-image:radial-gradient(circle at 1px 1px,rgba(21,32,99,.13) 1px,transparent 0);
}
/* Línea de circuito sutil */
.linea-tech{
  position:absolute;pointer-events:none;z-index:-1;
  stroke:rgba(255,255,255,.14);fill:none;stroke-width:1.2;
}
/* Etiqueta monoespaciada tipo dato */
.dato-mono{
  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--celeste);font-weight:600;
}
/* Panel de vidrio */
.vidrio{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-radius:var(--radio-lg);
}
.vidrio--claro{
  background:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.9);
  box-shadow:var(--sombra);
}
/* Borde con degradé */
.borde-degrade{position:relative;background:#fff;border-radius:var(--radio-lg)}
.borde-degrade::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,var(--azul-500),var(--celeste) 45%,var(--rojo-500));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
/* Resplandor detrás de imágenes */
.resplandor{position:relative}
.resplandor::before{
  content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(53,71,201,.28),transparent 68%);
  filter:blur(46px);
}

/* Revelado al hacer scroll */
.revelar{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.revelar.visible{opacity:1;transform:none}
.revelar[data-retraso="1"]{transition-delay:.09s}
.revelar[data-retraso="2"]{transition-delay:.18s}
.revelar[data-retraso="3"]{transition-delay:.27s}
.revelar[data-retraso="4"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .revelar{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 11. Imagen / marco ---------- */
.marco{
  position:relative;border-radius:var(--radio-xl);overflow:hidden;
  box-shadow:var(--sombra-lg);
}
.marco img{width:100%;height:100%;object-fit:cover;display:block}
.marco--alto{aspect-ratio:4/5}
.marco--ancho{aspect-ratio:16/10}
.marco--cuadro{aspect-ratio:1}
.marco-decorado{position:relative}
.marco-decorado::before{
  content:"";position:absolute;inset:22px -22px -22px 22px;
  border:2.5px solid var(--rojo-500);border-radius:var(--radio-xl);z-index:-1;
}

/* ---------- 12. Listas ---------- */
.lista-check{display:grid;gap:.85rem}
.lista-check li{display:flex;gap:.8rem;align-items:flex-start;font-size:.965rem}
.lista-check svg{width:21px;height:21px;flex-shrink:0;margin-top:.2rem;color:var(--verde)}
.lista-check--azul svg{color:var(--azul-600)}
.lista-check--claro li{color:#C7CDE9}
.lista-check--claro svg{color:var(--rojo-400)}

.pastillas{display:flex;flex-wrap:wrap;gap:.55rem}
.pastilla{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--gris-100);color:var(--gris-700);
  padding:.44rem 1rem;border-radius:100px;font-size:.86rem;font-weight:600;
  border:1px solid var(--borde);transition:var(--trans);
}
.pastilla:hover{background:var(--azul-50);color:var(--azul-800);border-color:var(--azul-100)}
.pastilla--azul{background:var(--azul-50);color:var(--azul-700);border-color:var(--azul-100)}
.pastilla--roja{background:var(--rojo-100);color:var(--rojo-700);border-color:#F7CFD1}

/* ---------- 13. Línea de tiempo ---------- */
.linea-tiempo{position:relative;padding-left:2.6rem}
.linea-tiempo::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(to bottom,var(--rojo-500),var(--azul-600),var(--celeste));
  border-radius:2px;
}
.hito{position:relative;padding-bottom:2.4rem}
.hito:last-child{padding-bottom:0}
.hito::before{
  content:"";position:absolute;left:-2.6rem;top:5px;width:24px;height:24px;
  border-radius:50%;background:#fff;border:3px solid var(--azul-600);
  box-shadow:0 0 0 5px var(--azul-50);
}
.hito__anio{
  display:inline-block;font-weight:800;font-size:.9rem;letter-spacing:.05em;
  color:var(--rojo-600);margin-bottom:.35rem;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.hito h4{margin-bottom:.4rem;font-size:1.16rem}
.hito p{color:var(--texto-suave);font-size:.95rem}

/* ---------- 14. Acordeón ---------- */
.acordeon{border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:#fff}
.acordeon + .acordeon{margin-top:.85rem}
.acordeon__btn{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;padding:1.25rem 1.5rem;text-align:left;
  font-weight:700;font-size:1.02rem;color:var(--azul-900);transition:var(--trans);
}
.acordeon__btn:hover{background:var(--gris-50)}
.acordeon__btn svg{width:20px;height:20px;flex-shrink:0;color:var(--rojo-600);transition:transform var(--trans)}
.acordeon__btn[aria-expanded="true"]{background:var(--azul-50)}
.acordeon__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.acordeon__panel{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1)}
.acordeon__panel > div{padding:0 1.5rem 1.4rem;color:var(--texto-suave);font-size:.965rem}

/* ---------- 15. Cita ---------- */
.cita{
  position:relative;padding:2.3rem 2.4rem;border-radius:var(--radio-lg);
  background:var(--crema);border-left:5px solid var(--rojo-500);
}
.cita__texto{font-family:var(--fuente-serif);font-size:clamp(1.1rem,1rem + .6vw,1.42rem);line-height:1.6;color:var(--azul-900);font-style:italic}
.cita__autor{margin-top:1.2rem;font-size:.9rem;font-weight:700;color:var(--rojo-600)}
.cita__autor span{display:block;font-weight:500;color:var(--texto-suave);font-size:.85rem;margin-top:.15rem}

/* Testimonios */
.testimonio{background:#fff;border:1px solid var(--borde);border-radius:var(--radio-lg);padding:2rem;height:100%;display:flex;flex-direction:column}
.testimonio__comillas{font-family:var(--fuente-serif);font-size:3.4rem;line-height:1;color:var(--azul-100);margin-bottom:-.6rem}
.testimonio p{font-size:.97rem;color:var(--texto-suave);flex:1}
.testimonio__pie{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--borde)}
.testimonio__avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--azul-700),var(--celeste));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem;
}
.testimonio__nombre{font-weight:700;font-size:.95rem;color:var(--azul-900);line-height:1.3}
.testimonio__rol{font-size:.82rem;color:var(--gris-500)}

/* ---------- 16. Franja CTA ---------- */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(120deg,var(--azul-900),var(--azul-700) 60%,var(--azul-600));
  color:#fff;border-radius:var(--radio-xl);
  padding:clamp(2.4rem,1.8rem + 3vw,4.2rem);
}
.cta::after{
  content:"";position:absolute;z-index:-1;right:-140px;top:-140px;
  width:440px;height:440px;border-radius:50%;background:rgba(224,24,33,.28);filter:blur(20px);
}
.cta h2{color:#fff;max-width:20ch}
.cta .lead{color:#C4CBE9;max-width:52ch}
.cta__interno{display:grid;grid-template-columns:1.5fr auto;gap:2.5rem;align-items:center;position:relative;z-index:1}
@media (max-width:880px){.cta__interno{grid-template-columns:1fr}}

/* ---------- 17. Formularios ---------- */
.form{display:grid;gap:1.15rem}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo label{font-weight:700;font-size:.885rem;color:var(--azul-900)}
.campo label .req{color:var(--rojo-600)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.85rem 1.05rem;
  border:1.5px solid var(--gris-200);border-radius:var(--radio-sm);
  background:#fff;font-size:.97rem;transition:var(--trans);
}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--gris-300)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-600);box-shadow:0 0 0 4px var(--azul-100);
}
.campo textarea{resize:vertical;min-height:140px;font-family:inherit}
.campo__ayuda{font-size:.8rem;color:var(--gris-500)}
.campo--error input,.campo--error select,.campo--error textarea{border-color:var(--rojo-500);box-shadow:0 0 0 4px var(--rojo-100)}
.campo__error{font-size:.82rem;color:var(--rojo-600);font-weight:600}
.form__fila{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:620px){.form__fila{grid-template-columns:1fr}}
.trampa{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important;width:0!important}

.aviso{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1.05rem 1.3rem;border-radius:var(--radio);font-size:.94rem;font-weight:500;
}
.aviso svg{width:21px;height:21px;flex-shrink:0;margin-top:.15rem}
.aviso--ok{background:#E8F6F0;color:#0B5C43;border:1px solid #BCE5D6}
.aviso--error{background:var(--rojo-100);color:var(--rojo-700);border:1px solid #F6CBCE}
.aviso--info{background:var(--azul-50);color:var(--azul-800);border:1px solid var(--azul-100)}

/* ---------- 18. Tablas ---------- */
.tabla-envoltorio{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio);background:#fff}
.tabla{min-width:520px}
.tabla th,.tabla td{padding:.95rem 1.2rem;text-align:left;border-bottom:1px solid var(--borde);font-size:.94rem}
.tabla th{background:var(--azul-900);color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:nth-child(even){background:var(--gris-50)}

/* ---------- 19. Contenido de texto largo ---------- */
.prosa{font-size:1.05rem;line-height:1.78;color:var(--texto)}
.prosa > * + *{margin-top:1.25em}
.prosa h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-top:2.4em}
.prosa h3{margin-top:2em}
.prosa ul{list-style:none;display:grid;gap:.6rem}
.prosa ul li{position:relative;padding-left:1.6rem}
.prosa ul li::before{content:"";position:absolute;left:.15rem;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--rojo-500)}
.prosa ol{counter-reset:n;display:grid;gap:.6rem}
.prosa ol li{position:relative;padding-left:2.2rem;counter-increment:n}
.prosa ol li::before{
  content:counter(n);position:absolute;left:0;top:.1em;
  width:1.55rem;height:1.55rem;border-radius:50%;
  background:var(--azul-50);color:var(--azul-700);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;
}
.prosa blockquote{border-left:4px solid var(--rojo-500);padding-left:1.4rem;font-family:var(--fuente-serif);font-style:italic;color:var(--azul-900)}
.prosa img{border-radius:var(--radio);margin-block:1.8em}
.prosa a:not(.btn){color:var(--azul-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prosa a:not(.btn):hover{color:var(--rojo-600)}

/* ---------- 20. Paginación ---------- */
.paginacion{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap;margin-top:3rem}
.paginacion a,.paginacion span{
  min-width:44px;height:44px;padding:0 .8rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--borde);border-radius:11px;
  font-weight:700;font-size:.92rem;color:var(--gris-700);transition:var(--trans);
}
.paginacion a:hover{border-color:var(--azul-600);color:var(--azul-700);background:var(--azul-50)}
.paginacion .actual{background:var(--azul-800);color:#fff;border-color:var(--azul-800)}
.paginacion .inactivo{opacity:.4;pointer-events:none}

/* ---------- 21. Pie ---------- */
.pie{background:var(--azul-950);color:#96A0CC;padding-top:clamp(3rem,2rem + 3vw,4.5rem);position:relative;overflow:hidden}
.pie__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(1.8rem,1rem + 3vw,3.5rem);padding-bottom:3rem}
@media (max-width:960px){.pie__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__grid{grid-template-columns:1fr}}
.pie h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.3rem;font-weight:800}
.pie a{transition:var(--trans);font-size:.925rem}
.pie a:hover{color:#fff}
.pie ul{display:grid;gap:.62rem}
.pie__marca{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem}
.pie__marca img{width:60px;height:60px;object-fit:contain;background:#fff;border-radius:12px;padding:5px}
.pie__marca .marca__nombre{color:#fff;font-size:1.05rem}
.pie__marca .marca__sub{color:var(--rojo-400)}
.pie__desc{font-size:.925rem;max-width:36ch;line-height:1.7}
.pie__contacto li{display:flex;gap:.7rem;align-items:flex-start;font-size:.925rem}
.pie__contacto svg{width:17px;height:17px;flex-shrink:0;margin-top:.22rem;color:var(--rojo-400)}
.pie__redes{display:flex;gap:.65rem;margin-top:1.5rem}
.pie__redes a{
  width:41px;height:41px;border-radius:11px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;transition:var(--trans);
}
.pie__redes svg{width:18px;height:18px}
.pie__redes a:hover{background:var(--rojo-600);border-color:var(--rojo-600);color:#fff;transform:translateY(-3px)}
.pie__base{
  border-top:1px solid rgba(255,255,255,.1);padding-block:1.5rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;
}
.pie__base-links{display:flex;gap:1.4rem;flex-wrap:wrap}

/* ---------- 22. Botón WhatsApp flotante ---------- */
.wa-flotante{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.42);
  transition:var(--trans);
}
.wa-flotante svg{width:29px;height:29px}
.wa-flotante:hover{transform:scale(1.09) translateY(-2px)}
@media (max-width:600px){.wa-flotante{width:52px;height:52px;right:15px;bottom:15px}.wa-flotante svg{width:26px;height:26px}}

/* Volver arriba */
.arriba{
  position:fixed;left:20px;bottom:20px;z-index:90;
  width:46px;height:46px;border-radius:12px;
  background:var(--azul-900);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:var(--trans);
  box-shadow:var(--sombra);
}
.arriba.visible{opacity:1;visibility:visible;transform:none}
.arriba svg{width:20px;height:20px;transform:rotate(-90deg)}
.arriba:hover{background:var(--rojo-600)}
@media (max-width:600px){.arriba{left:15px;bottom:15px;width:42px;height:42px}}

/* ---------- 23. Responsive ---------- */
@media (max-width:1200px){
  .nav{display:none}
  .menu-btn{display:flex}
  :root{--header-h:76px}
  .marca img{width:48px;height:48px}
}
@media (max-width:760px){
  .barra-superior__datos{gap:1rem;font-size:.78rem}
  .barra-superior__datos .ocultar-movil{display:none}
  .marca__sub{font-size:.62rem}
  .marca__nombre{font-size:.92rem}
  .marco-decorado::before{inset:14px -14px -14px 14px}
  .cita{padding:1.7rem 1.6rem}
}
@media (max-width:480px){
  .botonera .btn{width:100%}
}

/* ---------- 24. Impresión ---------- */
@media print{
  .cabecera,.barra-superior,.pie,.wa-flotante,.arriba,.nav-movil,.botonera{display:none!important}
  body{font-size:11pt;color:#000}
  .hero{background:none!important;color:#000;padding-block:1rem}
  .hero h1,.hero .lead{color:#000}
  a{text-decoration:underline}
}

/* ==========================================================================
   25. COMPONENTES ADICIONALES
   ========================================================================== */

/* Salto de accesibilidad */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--azul-900);color:#fff;padding:.9rem 1.4rem;
  border-radius:0 0 10px 0;font-weight:700;
}
.saltar:focus{left:0}

/* Cinta de aviso superior */
.cinta-aviso{
  background:linear-gradient(90deg,var(--rojo-600),var(--rojo-500));
  color:#fff;font-size:.88rem;font-weight:600;padding:.62rem 0;
}
.cinta-aviso .contenedor{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;text-align:center}
.cinta-aviso svg{width:17px;height:17px;flex-shrink:0}
.cinta-aviso a{display:inline-flex;align-items:center;gap:.35rem;text-decoration:underline;text-underline-offset:3px}
.cinta-aviso a svg{width:14px;height:14px}

/* Acceso al sistema de cuotas */
.barra-superior__sistema{
  display:inline-flex!important;align-items:center;gap:.4rem;
  background:var(--rojo-600);color:#fff!important;
  padding:.28rem .85rem;border-radius:100px;font-weight:700;font-size:.78rem;
  transition:var(--trans);
}
.barra-superior__sistema svg{color:#fff!important;width:13px;height:13px}
.barra-superior__sistema:hover{background:var(--rojo-500);transform:translateY(-1px)}
@media (max-width:1080px){.barra-superior__sistema{display:none!important}}

.btn-sistema{white-space:nowrap;flex-shrink:0}
.btn-sistema--pila{max-width:min(15rem,26vw)}
.btn-sistema--pila .btn-sistema__txt{min-width:0}
.btn-sistema--pila .btn-sistema__txt strong,
.btn-sistema--pila .btn-sistema__txt em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
@media (max-width:520px){.btn-sistema{display:none}}

.franja-sistema{
  background:linear-gradient(120deg,var(--azul-800),var(--azul-600));
  color:#fff;padding:1.5rem 0;
}
.franja-sistema .contenedor{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.franja-sistema__texto{display:flex;align-items:center;gap:1rem}
.franja-sistema__texto > svg{width:34px;height:34px;flex-shrink:0;color:#FF8E8E}
.franja-sistema__texto strong{display:block;font-size:1.08rem;color:#fff;font-weight:800;letter-spacing:-.01em}
.franja-sistema__texto span{display:block;font-size:.92rem;color:#C4CBE9;margin-top:.15rem}

/* Barra de filtros de noticias */
.barra-filtros{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-bottom:1.6rem;border-bottom:1px solid var(--borde);
}
.filtros-cat{display:flex;flex-wrap:wrap;gap:.5rem}
.filtros-cat .pastilla{border-color:var(--borde)}
.filtros-cat .pastilla span{
  background:var(--gris-200);color:var(--gris-600);
  padding:.05rem .42rem;border-radius:100px;font-size:.72rem;font-weight:800;margin-left:.15rem;
}
.filtros-cat .pastilla:hover{background:color-mix(in srgb,var(--cat,var(--azul-600)) 10%,#fff);border-color:var(--cat,var(--azul-600));color:var(--cat,var(--azul-800))}
.pastilla--activa{background:var(--azul-800)!important;color:#fff!important;border-color:var(--azul-800)!important}
.pastilla--activa span{background:rgba(255,255,255,.22)!important;color:#fff!important}

.buscador{position:relative;display:flex;align-items:center;gap:.5rem}
.buscador > svg{position:absolute;left:.95rem;width:17px;height:17px;color:var(--gris-400);pointer-events:none}
.buscador input{
  padding:.68rem 1rem .68rem 2.5rem;min-width:230px;
  border:1.5px solid var(--gris-200);border-radius:100px;font-size:.92rem;transition:var(--trans);
}
.buscador input:focus{outline:none;border-color:var(--azul-600);box-shadow:0 0 0 4px var(--azul-100)}
@media (max-width:520px){.buscador{width:100%}.buscador input{flex:1;min-width:0}}

/* Estado vacío */
.vacio{
  text-align:center;padding:4rem 2rem;border:2px dashed var(--gris-200);
  border-radius:var(--radio-lg);background:var(--gris-50);
}
.vacio > svg{width:46px;height:46px;color:var(--gris-300);margin:0 auto 1.2rem}
.vacio h3{margin-bottom:.5rem}
.vacio p{color:var(--texto-suave)}

/* Nota individual */
.hero--nota h1{max-width:22ch}
.nota-meta-hero{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.5rem;font-size:.88rem;color:#B7BFE0}
.nota-meta-hero span{display:inline-flex;align-items:center;gap:.45rem}
.nota-meta-hero svg{width:16px;height:16px;color:var(--rojo-400)}

.nota-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:start}
@media (max-width:960px){.nota-layout{grid-template-columns:1fr}}
.nota-lateral{position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:960px){.nota-lateral{position:static}}

.epigrafe{font-size:.85rem;color:var(--gris-500);margin-top:.7rem;font-style:italic;text-align:center}

.compartir{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding-top:1.8rem;border-top:1px solid var(--borde)}
.compartir > span{font-weight:700;font-size:.9rem;color:var(--azul-900);margin-right:.3rem}
.compartir a,.compartir button{
  width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gris-100);color:var(--gris-700);transition:var(--trans);border:1px solid var(--borde);
}
.compartir svg{width:19px;height:19px}
.compartir a:hover,.compartir button:hover{background:var(--azul-800);color:#fff;border-color:var(--azul-800);transform:translateY(-2px)}
.copiar-enlace{width:auto!important;padding:0 1rem;gap:.5rem;font-size:.88rem;font-weight:600}
.copiar-enlace.copiado{background:var(--verde)!important;color:#fff!important;border-color:var(--verde)!important}

/* Datos de contacto */
.datos-contacto{display:grid;gap:1.15rem}
.datos-contacto li{display:flex;gap:.9rem;align-items:flex-start}
.datos-contacto > li > svg{width:20px;height:20px;flex-shrink:0;margin-top:.25rem;color:var(--rojo-600)}
.datos-contacto strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gris-500);margin-bottom:.15rem}
.datos-contacto a,.datos-contacto span{font-size:.97rem;color:var(--texto)}
.datos-contacto a:hover{color:var(--azul-700)}

/* Mapa */
.mapa{border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--borde)}
.mapa iframe{display:block;width:100%;height:clamp(300px,42vh,440px);border:0}

/* Casilla de verificación */
.checkbox{display:flex;gap:.7rem;align-items:flex-start;font-weight:500!important;font-size:.9rem!important;cursor:pointer;color:var(--texto-suave)}
.checkbox input{width:19px;height:19px;flex-shrink:0;margin-top:.15rem;accent-color:var(--azul-700);cursor:pointer}
.checkbox a{color:var(--azul-700);text-decoration:underline;text-underline-offset:2px}

/* Tarjeta que es enlace */
a.tarjeta:hover h3{color:var(--rojo-600)}

/* ==========================================================================
   26. AJUSTES FINOS RESPONSIVE
   ========================================================================== */

@media (max-width:1200px){
  .hero--portada{min-height:auto}
  .hero--portada .split{gap:2.5rem}
}
@media (max-width:900px){
  .franja-sistema .contenedor{flex-direction:column;align-items:flex-start}
  .franja-sistema .btn{width:100%;justify-content:center}
}
@media (max-width:680px){
  .barra-filtros{flex-direction:column;align-items:stretch}
  .compartir{gap:.5rem}
  .compartir > span{width:100%;margin-bottom:.3rem}
  .cifras{grid-template-columns:1fr 1fr!important}
  .hero__badge{font-size:.74rem;padding:.4rem .85rem}
  .nota-meta-hero{gap:.9rem;font-size:.82rem}
  .testimonio,.tarjeta{padding:1.4rem}
}
@media (max-width:420px){
  .cifra__valor{font-size:2rem}
  .marca__nombre{font-size:.84rem}
  .marca__sub{font-size:.58rem}
  .marca img{width:42px;height:42px}
}
@media (max-width:340px){
  .marca__texto{display:none}
}

/* Pantallas muy anchas */
@media (min-width:1600px){
  :root{--ancho:1280px}
}

/* ---------- Acceso al sistema de autogestión ---------- */
.acceso-sistema{display:flex;gap:.45rem;align-items:center}
.btn-sistema__sep{opacity:.5;font-weight:400;margin:0 .1rem}
.btn-sistema--pila{padding:.5rem 1.15rem;align-items:center;gap:.55rem}
.btn-sistema__txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.btn-sistema__txt strong{font-size:.92rem;font-weight:800}
.btn-sistema__txt em{font-size:.7rem;font-style:normal;font-weight:600;opacity:.78;letter-spacing:.02em}
.franja-sistema__botones{display:flex;gap:.7rem;flex-wrap:wrap}
@media (max-width:900px){.franja-sistema__botones{width:100%}.franja-sistema__botones .btn{flex:1;justify-content:center}}
@media (max-width:1340px){.acceso-sistema .btn-sistema--alt{display:none}}