/* ============================================================
   IHSC — Componentes
   Guía de estilo web IHSC v2.0
   ------------------------------------------------------------
   Los COLORES y la TIPOGRAFÍA no se declaran aquí: vienen de
   theme.json del tema hijo, como variables --wp--preset--*.
   Este archivo solo describe COMPONENTES. Si necesita cambiar un
   color de marca, se cambia en theme.json y todo el sitio sigue.
   ============================================================ */

:root{
  /* Puentes hacia los presets de theme.json, con respaldo por si
     el tema hijo no estuviera activo. */
  --ihsc-marino-profundo: var(--wp--preset--color--marino-profundo, #0F2248);
  --ihsc-azul-marino:     var(--wp--preset--color--azul-marino, #1B3A6B);
  --ihsc-azul-hover:      #16305A;
  --ihsc-dorado:          var(--wp--preset--color--dorado, #C9A227);
  --ihsc-dorado-hover:    #B08F1F;
  --ihsc-dorado-profundo: var(--wp--preset--color--dorado-profundo, #756017);
  --ihsc-dorado-claro:    #EFD9A4;
  --ihsc-crema-dorada:    var(--wp--preset--color--crema-dorada, #F5E9C0);
  --ihsc-crema:           var(--wp--preset--color--crema, #F7F1E3);
  --ihsc-blanco:          var(--wp--preset--color--blanco, #fff);
  --ihsc-carmesi:         var(--wp--preset--color--carmesi, #8B1A1A);
  --ihsc-rojo:            var(--wp--preset--color--rojo, #E51312);
  --ihsc-tinta:           var(--wp--preset--color--tinta, #14181F);
  --ihsc-tinta-suave:     var(--wp--preset--color--tinta-suave, #5B6472);
  --ihsc-linea:           var(--wp--preset--color--linea, #DDD5C2);
  --ihsc-verde-wa:        #1F6B4A;

  --ihsc-serif: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
  --ihsc-sans:  var(--wp--preset--font-family--lato, Lato, system-ui, sans-serif);

  --ihsc-s2:8px; --ihsc-s3:12px; --ihsc-s4:16px; --ihsc-s5:24px;
  --ihsc-s6:32px; --ihsc-s7:48px; --ihsc-s8:64px; --ihsc-s9:96px;
  --ihsc-r-md:8px; --ihsc-r-lg:12px; --ihsc-r-xl:16px; --ihsc-r-full:999px;
  --ihsc-sh-1:0 1px 2px rgba(15,34,72,.08),0 2px 8px rgba(15,34,72,.06);
  --ihsc-sh-2:0 2px 4px rgba(15,34,72,.08),0 12px 28px rgba(15,34,72,.10);
  --ihsc-sh-3:0 4px 8px rgba(15,34,72,.10),0 24px 48px rgba(15,34,72,.14);
  --ihsc-t:180ms cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   CAJA
   WordPress no aplica box-sizing:border-box de forma global, y muchos
   temas tampoco. Sin esto, un botón con width:100% suma su relleno y
   su borde por fuera y se sale de la tarjeta.
   Se limita a los elementos del plugin para no alterar el tema.
   ============================================================ */
[class*="ihsc-"],
[class*="ihsc-"]::before,
[class*="ihsc-"]::after{ box-sizing:border-box }

/* --- Tinta de la marca y halo, según el tema activo --- */
html[data-tema="azul"]{ --ihsc-marca-tinta:var(--ihsc-marino-profundo); --ihsc-halo:201,162,39; --ihsc-acento-oscuro:var(--ihsc-dorado); }
html[data-tema="rojo"]{ --ihsc-marca-tinta:#fff;                        --ihsc-halo:239,217,164; --ihsc-acento-oscuro:var(--ihsc-dorado-claro); }

/* ============================================================
   FOCO VISIBLE  ·  WCAG 2.4.7 — nunca quitar sin sustituir
   ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid var(--ihsc-dorado-profundo);
  outline-offset:3px;
  border-radius:4px;
}
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   BOTONES  ·  tres niveles declarados
   1 primario · 2 conversión (uno por pantalla) · 3 terciario
   ============================================================ */
.ihsc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ihsc-s2);
  min-height:48px; padding:0 var(--ihsc-s6);
  border:2px solid transparent; border-radius:var(--ihsc-r-md);
  font-family:var(--ihsc-sans); font-size:.95rem; font-weight:900; letter-spacing:.01em;
  line-height:1.2; text-decoration:none; cursor:pointer; transition:var(--ihsc-t);
  position:relative; overflow:hidden;
}
.ihsc-btn:hover{ text-decoration:none }
.ihsc-btn[disabled], .ihsc-btn.is-disabled{ opacity:.42; pointer-events:none }

.ihsc-btn--1{ background:var(--ihsc-azul-marino); color:#fff; border-color:var(--ihsc-azul-marino) }
.ihsc-btn--1:hover{ background:var(--ihsc-azul-hover); border-color:var(--ihsc-azul-hover); color:#fff }
.ihsc-btn--1:active{ background:var(--ihsc-marino-profundo) }

/* Conversión. Texto Marino Profundo, nunca blanco: sobre dorado
   el blanco da 2,42:1 e incumple WCAG en cualquier tamaño. */
.ihsc-btn--2{ background:var(--ihsc-dorado); color:var(--ihsc-marino-profundo); border-color:var(--ihsc-dorado) }
.ihsc-btn--2:hover{ background:var(--ihsc-dorado-hover); border-color:var(--ihsc-dorado-hover); color:var(--ihsc-marino-profundo) }
.ihsc-btn--2:active{ background:#9C7E1B }
.ihsc-btn--2:focus-visible{ outline-color:var(--ihsc-marino-profundo) }

.ihsc-btn--3{ background:transparent; color:var(--ihsc-azul-marino); border-color:var(--ihsc-azul-marino) }
.ihsc-btn--3:hover{ background:var(--ihsc-crema-dorada); color:var(--ihsc-azul-marino) }

.ihsc-btn--inv{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7) }
.ihsc-btn--inv:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff }
.ihsc-btn--inv:focus-visible{ outline-color:var(--ihsc-dorado) }

.ihsc-btn--wa{ background:transparent; color:var(--ihsc-verde-wa); border-color:var(--ihsc-verde-wa) }
.ihsc-btn--wa:hover{ background:#E8F3EE; color:var(--ihsc-verde-wa) }

.ihsc-btn--sm{ min-height:44px; padding:0 var(--ihsc-s5); font-size:.86rem }

.ihsc-ic{ width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none;
          stroke-linecap:round; stroke-linejoin:round; flex:none }

/* Destello del botón de conversión; se apaga con movimiento reducido. */
.ihsc-btn--2::after{
  content:""; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); transition:left 620ms cubic-bezier(.4,0,.2,1); pointer-events:none;
}
.ihsc-btn--2:hover::after{ left:120% }

/* ============================================================
   MARCA MONOCROMA  ·  un solo activo teñido por tema
   Se aplica con máscara CSS. Trazo engrosado a propósito: la
   línea fina se deshace por debajo de 100 px.
   La imagen se inyecta desde el JS del plugin (--ihsc-marca-img).
   ============================================================ */
.ihsc-marca-esc{
  display:inline-block; flex:none; width:62px; aspect-ratio:456/520;
  background-color:transparent;   /* sin soporte de máscara: no se pinta un bloque */
  -webkit-mask:var(--ihsc-marca-img) center/contain no-repeat;
          mask:var(--ihsc-marca-img) center/contain no-repeat;
}
@supports (mask-image:url(a)) or (-webkit-mask-image:url(a)){
  .ihsc-marca-esc{ background-color:var(--ihsc-marca-tinta) }
}

/* ============================================================
   LOCKUP DE LA MARCA  ·  escudo monocromo + palabra
   Para el encabezado. Usa el patrón «IHSC · Marca del encabezado».
   ============================================================ */
.ihsc-marca{
  display:inline-flex; gap:var(--ihsc-s3); align-items:center;
  text-decoration:none; flex:none;
}
.ihsc-marca:hover{ text-decoration:none }
.ihsc-marca-txt{ line-height:1.12; display:block }
.ihsc-marca-txt .n{
  display:block; font-family:var(--ihsc-serif); font-weight:700; font-size:1.05rem;
  color:var(--ihsc-marca-tinta);
}
.ihsc-marca-txt .p{
  display:block; font-size:.58rem; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ihsc-acento-oscuro);
}
html[data-tema="azul"] .ihsc-marca-txt .p{ color:var(--ihsc-dorado-profundo) }
.ihsc-marca .ihsc-marca-esc{ transition:width 260ms cubic-bezier(.4,0,.2,1) }
html.ihsc-scrolled .ihsc-marca .ihsc-marca-esc{ width:48px }
.ihsc-flota-marca{ animation:ihsc-flota 6s ease-in-out infinite }
@media (max-width:620px){
  .ihsc-marca-txt{ display:none }
  .ihsc-marca .ihsc-marca-esc{ width:52px }
  html.ihsc-scrolled .ihsc-marca .ihsc-marca-esc{ width:44px }
}

/* ============================================================
   ENCABEZADO ADHERIDO
   Por qué no basta con poner sticky en .ihsc-header: un elemento
   sticky solo puede desplazarse DENTRO de su elemento padre. El grupo
   del encabezado vive dentro de <header class="wp-block-template-part">,
   que mide exactamente lo mismo que él — cero recorrido, así que nunca
   se pega. Hay que hacer adherente al contenedor, no al grupo.
   Se resuelve por dos vías a la vez: :has() en CSS y una clase que
   añade el JavaScript, para que funcione aunque falle una de las dos.
   ============================================================ */
.ihsc-header{ position:relative; z-index:30 }

.ihsc-header-wrap,
:where(header, div).wp-block-template-part:has(> .ihsc-header),
:where(header, div).wp-block-template-part:has(> * > .ihsc-header){
  position:sticky;
  top:0;
  z-index:30;
}
/* Con la barra de administración de WordPress, que va fija arriba */
body.admin-bar .ihsc-header-wrap,
body.admin-bar :where(header, div).wp-block-template-part:has(> .ihsc-header){ top:32px }
@media screen and (max-width:782px){
  body.admin-bar .ihsc-header-wrap,
  body.admin-bar :where(header, div).wp-block-template-part:has(> .ihsc-header){ top:46px }
}

/* ============================================================
   BARRA SUPERIOR  ·  teléfono, correo e Ingresar
   Se recoge al desplazar, de modo que arriba se ve completa y al bajar
   solo queda fija la fila principal.
   ============================================================ */
.ihsc-topbar{
  background:var(--ihsc-marino-profundo); color:#C7D3E8;
  font-family:var(--ihsc-sans); font-size:.8rem;
  overflow:hidden; max-height:140px;
  transition:max-height 260ms cubic-bezier(.4,0,.2,1), opacity 160ms linear;
}
/* El texto se desvanece antes de que acabe de cerrarse la barra. Sin esto,
   durante los 260 ms de cierre el texto sigue a plena opacidad mientras la
   franja azul ya casi no existe, y se lee blanco sobre crema: es el momento
   en que el encabezado parece estar duplicado. */
html.ihsc-scrolled .ihsc-topbar{ opacity:0; pointer-events:none }
/* Chrome ancla el desplazamiento al contenido que cambia de alto, y aquí eso
   juega en contra: el encabezado que se encoge es justo el elemento que el
   navegador tomaría como referencia, y el reajuste pelea con el cierre. */
.ihsc-header-wrap{ overflow-anchor:none }
html[data-tema="rojo"] .ihsc-topbar{ background:#5F1111; color:#F0D6D6 }
html.ihsc-scrolled .ihsc-topbar{ max-height:0 }
.ihsc-topbar-in{
  max-width:var(--wp--style--global--wide-size, 1280px);
  margin-inline:auto; padding-inline:var(--ihsc-s5);
  display:flex; gap:var(--ihsc-s5); align-items:center; justify-content:flex-end; flex-wrap:wrap;
}
.ihsc-topbar a{
  color:inherit; text-decoration:none; display:inline-flex; gap:6px; align-items:center;
  min-height:32px; padding:4px 0;
}
.ihsc-topbar a:hover{ color:#fff; text-decoration:none }
.ihsc-topbar .ihsc-ic{ width:15px; height:15px }
.ihsc-topbar .is-fuerte{ font-weight:900 }
@media (max-width:640px){
  .ihsc-topbar-in{ justify-content:center; gap:var(--ihsc-s4); font-size:.74rem }
}

/* ============================================================
   NAVEGACIÓN  ·  estilos del bloque nativo de WordPress
   ============================================================ */
.ihsc-header .wp-block-navigation{
  font-family:var(--ihsc-sans); font-size:.9rem; font-weight:700;
}
.ihsc-header .wp-block-navigation a,
.ihsc-header .wp-block-navigation a:visited{
  color:var(--ihsc-tinta-suave);
  text-decoration:none;
  padding:6px 10px;
  border-radius:var(--ihsc-r-sm, 4px);
  border-bottom:2px solid transparent;
  transition:color var(--ihsc-t), background-color var(--ihsc-t), border-color var(--ihsc-t);
}
/* El detalle al pasar el puntero: fondo crema dorada y filete dorado */
.ihsc-header .wp-block-navigation a:hover{
  color:var(--ihsc-marino-profundo);
  background-color:var(--ihsc-crema-dorada);
  border-bottom-color:var(--ihsc-dorado);
}
.ihsc-header .wp-block-navigation a:focus-visible{
  outline:3px solid var(--ihsc-dorado-profundo); outline-offset:2px;
}
/* Página actual */
.ihsc-header .wp-block-navigation .current-menu-item > a,
.ihsc-header .wp-block-navigation a[aria-current="page"]{
  color:var(--ihsc-marino-profundo);
  border-bottom-color:var(--ihsc-dorado);
}
/* Ítem clave: la sección de conversión, en negrita permanente */
.ihsc-header .wp-block-navigation li.ihsc-nav-clave > a,
.ihsc-header .wp-block-navigation a.ihsc-nav-clave{
  color:var(--ihsc-marino-profundo); font-weight:900;
}
/* Tema rojo: el encabezado es carmesí, la navegación va en claro */
html[data-tema="rojo"] .ihsc-header .wp-block-navigation a,
html[data-tema="rojo"] .ihsc-header .wp-block-navigation a:visited{ color:#EFCFCF }
html[data-tema="rojo"] .ihsc-header .wp-block-navigation a:hover{
  color:#fff; background-color:rgba(255,255,255,.14); border-bottom-color:var(--ihsc-dorado);
}
html[data-tema="rojo"] .ihsc-header .wp-block-navigation .current-menu-item > a,
html[data-tema="rojo"] .ihsc-header .wp-block-navigation a[aria-current="page"],
html[data-tema="rojo"] .ihsc-header .wp-block-navigation li.ihsc-nav-clave > a{ color:#fff }
/* Menú desplegado en móvil: fondo del sistema, no el del tema */
.ihsc-header .wp-block-navigation__responsive-container.is-menu-open{
  background-color:var(--ihsc-crema);
  padding-top:var(--ihsc-s8);
}
html[data-tema="rojo"] .ihsc-header .wp-block-navigation__responsive-container.is-menu-open{
  background-color:var(--ihsc-carmesi);
}
.ihsc-header .wp-block-navigation__responsive-container.is-menu-open a{ font-size:1.05rem }
.ihsc-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--ihsc-dorado),var(--ihsc-carmesi)); opacity:.85;
}
html[data-tema="rojo"] .ihsc-header::after{ background:linear-gradient(90deg,var(--ihsc-rojo),var(--ihsc-dorado)) }
html.ihsc-scrolled .ihsc-header{ box-shadow:0 6px 24px rgba(15,34,72,.16) }

/* Utilidad de sección: el relleno vertical del sistema */
.ihsc-seccion{ padding-block:var(--ihsc-s9) }
@media (max-width:760px){ .ihsc-seccion{ padding-block:var(--ihsc-s8) } }

/* ============================================================
   FICHAS DE COLEGIO  ·  shortcode [ihsc_colegios]
   ============================================================ */
.ihsc-colegios-bloque{ margin-block:var(--ihsc-s6) }

/* WordPress limita todo bloque hijo al ancho de LECTURA (620 px), que es
   correcto para un párrafo y demasiado estrecho para una retícula de fichas.
   Estas dos reglas la dejan usar el ancho amplio. Especificidad (0,2,0)
   frente a la (0,1,0) del núcleo: gana por especificidad, sin !important. */
.is-layout-constrained > .ihsc-colegios-bloque,
.is-layout-constrained > .ihsc-cifras{
  max-width:var(--wp--style--global--wide-size, 1280px);
  margin-inline:auto;
  width:100%;
}

.ihsc-filtros{
  display:flex; gap:var(--ihsc-s3); flex-wrap:wrap;
  justify-content:center; margin:0 0 var(--ihsc-s7);
}
.ihsc-chip{
  background:var(--ihsc-blanco); border:1.5px solid var(--ihsc-linea); border-radius:var(--ihsc-r-full);
  padding:10px 20px; min-height:44px; font-family:var(--ihsc-sans); font-size:.88rem; font-weight:700;
  color:var(--ihsc-tinta-suave); cursor:pointer; transition:var(--ihsc-t);
  display:inline-flex; align-items:center; gap:8px;
}
.ihsc-chip:hover{ border-color:var(--ihsc-dorado); color:var(--ihsc-marino-profundo); transform:translateY(-1px) }
.ihsc-chip[aria-pressed="true"]{ background:var(--ihsc-azul-marino); border-color:var(--ihsc-azul-marino); color:#fff }
html[data-tema="rojo"] .ihsc-chip[aria-pressed="true"]{ background:var(--ihsc-carmesi); border-color:var(--ihsc-carmesi) }
.ihsc-chip .c{ background:rgba(0,0,0,.08); border-radius:var(--ihsc-r-full); padding:1px 8px; font-size:.74rem }
.ihsc-chip[aria-pressed="true"] .c{ background:rgba(255,255,255,.22) }

.ihsc-colegios{
  /* 300 px de mínimo, no 340: así caben dos columnas incluso si el
     contenedor se queda en el ancho de lectura. */
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:var(--ihsc-s5); list-style:none; padding:0; margin:0;
}
.ihsc-card{
  background:var(--ihsc-blanco); border:1px solid var(--ihsc-linea); border-radius:var(--ihsc-r-lg);
  box-shadow:var(--ihsc-sh-1); overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--ihsc-t), transform var(--ihsc-t); position:relative;
}
.ihsc-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--ihsc-dorado);
  transform:scaleX(0); transform-origin:left; transition:transform 320ms cubic-bezier(.22,.61,.36,1); z-index:3;
}
.ihsc-card:hover{ box-shadow:var(--ihsc-sh-2); transform:translateY(-4px) }
.ihsc-card:hover::before{ transform:scaleX(1) }
.ihsc-card[hidden]{ display:none }

.ihsc-card-hd{
  background:linear-gradient(135deg,var(--ihsc-marino-profundo),var(--ihsc-azul-marino));
  padding:var(--ihsc-s5); display:flex; gap:var(--ihsc-s4); align-items:center; min-height:112px;
}
html[data-tema="rojo"] .ihsc-card-hd{ background:linear-gradient(135deg,#6B1414,var(--ihsc-carmesi)) }
.ihsc-card-hd .ihsc-card-img{ width:52px; height:auto; flex:none; border-radius:6px }
.ihsc-card-esc{
  flex:none; width:48px; aspect-ratio:456/520; background-color:#fff;
  -webkit-mask:var(--ihsc-marca-img) center/contain no-repeat;
          mask:var(--ihsc-marca-img) center/contain no-repeat;
}
.ihsc-card-ciudad{
  display:block; font-size:.68rem; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ihsc-acento-oscuro);
}
.ihsc-card-tit{
  font-family:var(--ihsc-serif); font-size:1.12rem; font-weight:600;
  color:#fff !important; margin:3px 0 0; line-height:1.22;
}

.ihsc-card-bd{ padding:var(--ihsc-s5); display:flex; flex-direction:column; gap:var(--ihsc-s4); flex:1 }
.ihsc-badges{ display:flex; gap:6px; flex-wrap:wrap }
.ihsc-badge{ font-size:.7rem; font-weight:900; padding:3px 10px; border-radius:var(--ihsc-r-full) }
.ihsc-badge.b-niv{ background:#DDE6F5; color:#173463 }
.ihsc-badge.b-ab{ background:#DAECE2; color:#1F4A34 }
.ihsc-card-bd dl{ display:grid; grid-template-columns:auto 1fr; gap:5px var(--ihsc-s4); margin:0; font-size:.86rem }
.ihsc-card-bd dt{ font-weight:900; color:var(--ihsc-marino-profundo) }
.ihsc-card-bd dd{ margin:0; color:var(--ihsc-tinta-suave) }
.ihsc-card-desc{ font-size:.9rem; color:var(--ihsc-tinta-suave); margin:0; flex:1 }
.ihsc-card-acts{ display:flex; flex-direction:column; gap:var(--ihsc-s2) }
.ihsc-card-acts .ihsc-btn{ width:100%; min-height:44px; padding:0 var(--ihsc-s5); font-size:.86rem }
.ihsc-vacio, .ihsc-vacio-filtro{
  text-align:center; padding:var(--ihsc-s8); color:var(--ihsc-tinta-suave); font-style:italic;
}
.ihsc-vacio-filtro[hidden]{ display:none }

/* ============================================================
   ESCUDO CON HALO  ·  clase .ihsc-halo en un bloque de imagen
   ============================================================ */
.ihsc-halo{ position:relative; display:grid; place-items:center }
.ihsc-halo > img, .ihsc-halo > figure{ position:relative; z-index:2 }
.ihsc-halo::before{
  content:""; position:absolute; inset:6%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(var(--ihsc-halo),.20),transparent 68%);
}
.ihsc-radar{ position:absolute; inset:0; pointer-events:none; z-index:1 }
.ihsc-radar i{
  position:absolute; top:50%; left:50%; width:100%; aspect-ratio:1; border-radius:50%;
  border:1.5px solid rgba(var(--ihsc-halo),.55);
  transform:translate(-50%,-50%) scale(.52); opacity:0;
  animation:ihsc-ping 7.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.ihsc-radar i:nth-child(2){ animation-delay:2.6s }
.ihsc-radar i:nth-child(3){ animation-delay:5.2s }
@keyframes ihsc-ping{
  0%{ transform:translate(-50%,-50%) scale(.52); opacity:0 }
  16%{ opacity:.34 }
  60%{ opacity:.16 }
  100%{ transform:translate(-50%,-50%) scale(2.1); opacity:0 }
}
.ihsc-flota{ animation:ihsc-flota 7s ease-in-out infinite }
@keyframes ihsc-flota{ 0%,100%{ transform:translateY(-3px) } 50%{ transform:translateY(3px) } }

/* ============================================================
   CIFRAS INSTITUCIONALES  ·  clase .ihsc-cifra en un párrafo
   ============================================================ */
.ihsc-cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); gap:var(--ihsc-s5) }
.ihsc-cifra{ text-align:center }
.ihsc-cifra b{
  display:block; font-family:var(--ihsc-serif); font-weight:700; line-height:1;
  font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--ihsc-marino-profundo);
  font-variant-numeric:tabular-nums;
}
.ihsc-cifra span{ display:block; font-size:.82rem; font-weight:700; color:#6B5514; margin-top:6px }

/* ============================================================
   REVELADO AL DESPLAZAR  ·  clase .ihsc-rev
   ============================================================ */
.ihsc-rev{ opacity:0; transform:translateY(22px);
  transition:opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1) }
.ihsc-rev.is-vis{ opacity:1; transform:none }
.no-js .ihsc-rev, html:not(.ihsc-js) .ihsc-rev{ opacity:1; transform:none }

/* ============================================================
   BARRA DE PROGRESO DE LECTURA
   ============================================================ */
#ihsc-prog{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:999;
  background:linear-gradient(90deg,var(--ihsc-dorado),var(--ihsc-carmesi));
  transition:width 90ms linear;
}
html[data-tema="rojo"] #ihsc-prog{ background:linear-gradient(90deg,var(--ihsc-rojo),var(--ihsc-dorado)) }

/* ============================================================
   BURBUJA FLOTANTE DE CONTACTO
   Se retira cuando la sección de contacto entra en pantalla y
   vuelve al alejarse. Solo la × la cierra de forma definitiva.
   ============================================================ */
.ihsc-burbuja{
  position:fixed; right:var(--ihsc-s5); bottom:var(--ihsc-s5); z-index:50;
  display:flex; align-items:stretch;
  background:var(--ihsc-dorado); color:var(--ihsc-marino-profundo);
  border-radius:var(--ihsc-r-full);
  box-shadow:0 6px 16px rgba(15,34,72,.24),0 18px 40px rgba(15,34,72,.20);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.96);
  transition:opacity 300ms cubic-bezier(.22,.61,.36,1), transform 300ms cubic-bezier(.22,.61,.36,1), visibility 300ms;
  max-width:calc(100vw - var(--ihsc-s5) * 2);
}
.ihsc-burbuja.is-on{ opacity:1; visibility:visible; transform:none }
html[data-tema="rojo"] .ihsc-burbuja{ background:var(--ihsc-carmesi); color:#fff }
.ihsc-burbuja-btn{
  display:flex; gap:var(--ihsc-s3); align-items:center; text-decoration:none; color:inherit;
  padding:var(--ihsc-s3) var(--ihsc-s4) var(--ihsc-s3) var(--ihsc-s5); min-height:56px;
  border-radius:var(--ihsc-r-full) 0 0 var(--ihsc-r-full); transition:background var(--ihsc-t);
}
.ihsc-burbuja-btn:hover{ background:rgba(255,255,255,.28); color:inherit }
.ihsc-burbuja-btn .ihsc-ic{ width:24px; height:24px; stroke-width:1.9 }
.ihsc-burbuja-btn .t{ display:flex; flex-direction:column; line-height:1.2; text-align:left }
.ihsc-burbuja-btn .t small{ font-size:.74rem; font-weight:700; opacity:.85 }
.ihsc-burbuja-btn .t b{ font-size:.92rem; font-weight:900 }
.ihsc-burbuja-x{
  background:transparent; border:0; border-left:1px solid rgba(15,34,72,.22);
  color:inherit; cursor:pointer; width:48px; min-height:56px;
  border-radius:0 var(--ihsc-r-full) var(--ihsc-r-full) 0;
  display:grid; place-items:center; transition:background var(--ihsc-t);
}
html[data-tema="rojo"] .ihsc-burbuja-x{ border-left-color:rgba(255,255,255,.3) }
.ihsc-burbuja-x:hover{ background:rgba(255,255,255,.28) }
.ihsc-burbuja-x .ihsc-ic{ width:18px; height:18px }
@media (max-width:620px){
  .ihsc-burbuja{ right:var(--ihsc-s4); bottom:var(--ihsc-s4) }
  .ihsc-burbuja-btn{ padding:var(--ihsc-s3) var(--ihsc-s3) var(--ihsc-s3) var(--ihsc-s4) }
  .ihsc-burbuja-btn .t small{ display:none }
}


/* ============================================================
   UTILIDADES PARA CONSTRUIR CON BLOQUES
   Se aplican desde el editor en «Avanzado → Clases CSS adicionales».
   Sin :where() a propósito: los estilos de theme.json salen con
   especificidad (0,1,0) y estas reglas tienen que poder ganarles.
   ============================================================ */

/* Bloque sobre fondo oscuro: invierte el texto.
   Hace falta porque theme.json fija el color de los encabezados y
   ese color explícito no se hereda del fondo del grupo. */
.ihsc-sobre-oscuro,
.ihsc-sobre-oscuro p,
.ihsc-sobre-oscuro li,
.ihsc-sobre-oscuro h1,
.ihsc-sobre-oscuro h2,
.ihsc-sobre-oscuro h3,
.ihsc-sobre-oscuro h4,
.ihsc-sobre-oscuro h5,
.ihsc-sobre-oscuro h6{ color:#fff }
.ihsc-sobre-oscuro .ihsc-lead{ color:#D9E2F0 }
html[data-tema="rojo"] .ihsc-sobre-oscuro .ihsc-lead{ color:#F4E3E3 }
.ihsc-sobre-oscuro a:not(.ihsc-btn){ color:var(--ihsc-dorado-claro) }
.ihsc-sobre-oscuro .ihsc-over{ color:var(--ihsc-acento-oscuro) }

/* Antetítulo. Único uso permitido de mayúsculas sostenidas. */
.ihsc-over{
  display:block; font-family:var(--ihsc-sans); font-size:.74rem; font-weight:900;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ihsc-dorado-profundo);
  margin:0 0 var(--ihsc-s3);
}

/* Entradilla */
.ihsc-lead{ font-size:1.1rem; color:var(--ihsc-tinta-suave); max-width:66ch }

/* Medida de línea. Evita que un titular rompa dejando una palabra sola. */
.ihsc-medida{ max-width:68ch }
.ihsc-medida-centrada{ max-width:68ch; margin-inline:auto }

/* Filete dorado bajo un título */
.ihsc-filete{ width:60px; height:3px; background:var(--ihsc-dorado); border-radius:2px; border:0; margin:var(--ihsc-s4) 0 var(--ihsc-s6) }
.ihsc-filete.is-centrado{ margin-inline:auto }

/* Tarjeta genérica de contenido, con filete superior por familia */
.ihsc-tarjeta{
  background:var(--ihsc-blanco); border:1px solid var(--ihsc-linea);
  border-top:4px solid var(--ihsc-dorado); border-radius:var(--ihsc-r-lg);
  padding:var(--ihsc-s6); box-shadow:var(--ihsc-sh-1);
  transition:box-shadow var(--ihsc-t), transform var(--ihsc-t);
}
.ihsc-tarjeta:hover{ box-shadow:var(--ihsc-sh-2); transform:translateY(-3px) }
.ihsc-tarjeta.is-educacion{ border-top-color:var(--ihsc-azul-marino) }
.ihsc-tarjeta.is-vocacion{ border-top-color:var(--ihsc-carmesi) }

/* Cita destacada */
.ihsc-cita{
  background:var(--ihsc-crema-dorada); border-radius:var(--ihsc-r-xl);
  padding:var(--ihsc-s7); position:relative; border:0;
}
.ihsc-cita::before{
  content:""; position:absolute; top:var(--ihsc-s5); left:var(--ihsc-s6);
  width:44px; height:3px; background:var(--ihsc-dorado); border-radius:2px;
}
.ihsc-cita p{ font-family:var(--ihsc-serif); font-size:1.3rem; font-weight:500; font-style:italic; line-height:1.45; color:var(--ihsc-marino-profundo) }
.ihsc-cita cite{ display:block; margin-top:var(--ihsc-s5); font-size:.84rem; font-weight:900; font-style:normal; color:var(--ihsc-dorado-profundo) }

/* ============================================================
   MOVIMIENTO REDUCIDO  ·  respeta la preferencia del sistema
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ihsc-rev{ opacity:1 !important; transform:none !important }
  .ihsc-radar{ display:none }
  .ihsc-card:hover, .ihsc-chip:hover{ transform:none }
  .ihsc-btn--2::after{ display:none }
}