/* ===========================================================================
   Kuma 2026 · tokens del sistema de diseño

   Sacados del export del propio Figma, con los NOMBRES que les puso el
   diseñador. No son una interpretación ni una medición mía: son las
   variables del fichero.

   Corrigen una que yo había deducido mal: la línea de Oposiciones es el
   azul oscuro #2B6C97, no el azul de marca. El #3797CA es el color de
   enlace (--color-text-link), que es otra cosa.
   =========================================================================== */

:root{
  --color-accent-emphasis:#0B1C28;
  --color-accent-on-accent:#FFFFFF;
  --color-bg-Secondary:#3797CA;
  --color-bg-canvas:#FFFFFF;
  --color-bg-inverse:#0B1C28;
  --color-bg-surface:#FFFFFF;
  --color-bg-surface-subtle:#E7F1F8;
  --color-border-Invert:#E7F1F8;
  --color-border-Subtle-Invert:#EAEBEE;
  --color-border-strong:#3797CA;
  --color-line-empleo:#308461;
  --color-line-fp:#8F4A32;
  --color-line-incompany:#8F6D32;
  --color-line-oposiciones:#2B6C97;
  --color-line-oposiciones-bg:#E7F1F8;
  --color-line-superior:#8F324A;
  --color-text-inverse:#FFFFFF;
  --color-text-inverse-muted:#E7F1F8;
  --color-text-link:#3797CA;
  --color-text-muted:#494B50;
  --color-text-primary:#0B1C28;
  --color-text-secondary:#3797CA;
}

/* Puentes con los nombres que ya usa el tema, para no reescribir la hoja. */
:root{
  --claro:var(--color-text-link);
  --medio:var(--color-line-oposiciones);
  --noche:var(--color-bg-inverse);
  --tinta:var(--color-text-primary);
  --tinta-media:var(--color-text-muted);
  --papel-alt:var(--color-bg-surface-subtle);
  --papel-hueco:var(--color-border-Subtle-Invert);
  --linea-oposiciones:var(--color-line-oposiciones);
  --linea-fe:var(--color-line-empleo);
  --linea-fp:var(--color-line-fp);
  --linea-fs:var(--color-line-superior);
  --linea-fi:var(--color-line-incompany);
}

/* ── tipografía ─────────────────────────────────────────────────────────
   Cuatro diferencias globales con el diseño, y son las que hacían que
   pareciesen dos webs distintas por mucho que se ajustara cada sección:

     titulares   el tema usaba "Clother"; el Figma usa Source Sans 3 en TODO
                 (67 de 68 declaraciones del export)
     cuerpo      18px  ->  16px
     peso        600   ->  700
     espaciado   -.02em en titulares  ->  ninguno

   Van aquí, en los tokens, para no ir persiguiéndolas selector a selector. */
:root{
  --f-tit:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",system-ui,sans-serif;
  --f-txt:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",system-ui,sans-serif;
  --p-tit:700;
}
body{ font-size:16px; line-height:1.2; }
h1,h2,h3,h4{ font-family:var(--f-tit); font-weight:700; letter-spacing:0; }


/* ===========================================================================
   Kuma 2026 · hoja unica de la maqueta aprobada
   Generada desde la maqueta verificada visualmente. No editar a mano sin
   volver a pasarla por la maqueta: es la unica forma de que WordPress y la
   maqueta no se desincronicen.
   =========================================================================== */

:root{
  /* Medidos del Figma del diseñador, no interpretados: son los hex que usa el
     fichero, contados por frecuencia sobre las páginas reales. Ver
     figma/tokens-medidos.md. */
  --noche:#0B1C28; --oscuro:#142c45; --medio:#2B6C97; --claro:#3797CA;
  --papel:#fff; --papel-alt:#E7F1F8; --papel-hueco:#EAEBEE;
  --linea:#dce5ed; --linea-fina:#EEEEEE;
  --tinta:#0B1C28; --tinta-media:#494B50; --tinta-suave:#7f93a4;

  --f-tit:"Clother","Avenir Next","Century Gothic","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --f-txt:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",system-ui,sans-serif;

  /* pesos: nada por encima de 600 en titular, nada en negrita en texto pequeño */
  --p-tit:600; --p-med:500; --p-txt:400;

  --canal:clamp(1.25rem,5vw,3.5rem);
  --ancho:78rem;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-txt);
  font-size:1.125rem;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-tit);font-weight:var(--p-tit);margin:0;
  letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
.caja{width:min(100% - var(--canal)*2,var(--ancho));margin-inline:auto}
:where(a,button,summary):focus-visible{outline:3px solid var(--claro);outline-offset:3px;border-radius:4px}

/* ============ barras ============ */
/* La pila entera (promo + logo + verticales) queda pegada arriba al bajar,
   como en la referencia. El panel del menu cuelga de ella, asi que se posiciona
   aqui y no en .verticales. */
.cabecera{position:sticky;top:0;z-index:60;background:#fff;transition:box-shadow .2s}
.cabecera.esta-fija{box-shadow:0 10px 30px rgba(0,27,45,.11)}
/* La promo se recoge al bajar: recupera 3rem de alto sin perderla del todo. */
.cabecera .promo{overflow:hidden;transition:max-height .28s ease,padding .28s ease;max-height:4rem}
.cabecera.esta-fija .promo{max-height:0;padding-block:0}

.promo{background:var(--papel-hueco);color:var(--noche);text-align:center;padding:.8rem 1rem;
  font-size:.98rem;display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.promo b{font-weight:var(--p-med)}
.promo a{color:var(--medio);font-weight:var(--p-med);text-decoration:underline;
  text-underline-offset:.2em;white-space:nowrap}
/* En móvil el texto ocupa dos líneas y «Ver plazas y fechas» quedaba fuera de
   la barra (alto máximo 4rem): la barra entera hace de enlace, con una flecha. */
@media (max-width:640px){
  .promo{position:relative;font-size:.9rem;line-height:1.3;padding:.55rem 2.4rem .55rem 1rem}
  .promo a{font-size:0;position:static}
  .promo a::after{content:"";position:absolute;inset:0}
  .promo a::before{content:"→";position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.1rem;color:var(--medio)}
}

.barra-logo{background:#fff;border-bottom:1px solid var(--linea-fina);position:relative;z-index:2}
.barra-logo .caja{display:flex;align-items:center;gap:2rem;padding:1rem 0;transition:padding .28s ease}
.cabecera.esta-fija .barra-logo .caja{padding:.55rem 0}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:2.6rem;width:auto;display:block;transition:height .28s ease}
.cabecera.esta-fija .logo img{height:2.1rem}
.barra-logo nav{margin-left:auto;display:flex;gap:1.5rem;align-items:center}
.barra-logo nav a{font-size:.98rem;font-weight:var(--p-med);color:var(--tinta-media);text-decoration:none}
.barra-logo nav a:hover{color:var(--medio)}
@media(max-width:64rem){.barra-logo nav{display:none}}
.btn-campus{background:var(--medio);color:#fff!important;font-size:.92rem;font-weight:var(--p-med);
  padding:.6rem 1.2rem;border-radius:999px;text-decoration:none;white-space:nowrap;margin-left:auto}
@media(min-width:64rem){.btn-campus{margin-left:0}}

/* ============ mega menú ============ */
.verticales{background:var(--oscuro);position:relative;z-index:1}
.verticales>.caja>ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch}
.vert{position:static;display:flex}
/* Enlace y boton comparten pinta: el que abre panel es <button> a proposito,
   asi no se queda con el foco pegado despues de pulsarlo. */
.vert>a,.vert__btn{display:flex;align-items:center;gap:.45rem;padding:0 1.45rem;height:3.5rem;
  font-family:var(--f-txt);font-size:1.02rem;font-weight:var(--p-med);color:#c9dded;
  text-decoration:none;white-space:nowrap;border:0;border-bottom:3px solid transparent;
  background:transparent;cursor:pointer;transition:color .16s,background .16s,border-color .16s}
.vert__btn svg{opacity:.65;transition:transform .2s}
.vert>a:hover,.vert__btn:hover,.vert.abierto>.vert__btn{
  color:#fff;border-bottom-color:var(--claro);background:rgba(255,255,255,.06)}
.vert.abierto>.vert__btn svg{transform:rotate(180deg);opacity:1}

.panel{position:absolute;left:0;right:0;top:100%;background:#fff;
  border-bottom:1px solid var(--linea);box-shadow:0 22px 44px rgba(0,27,45,.14);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:3}
.vert.abierto>.panel{opacity:1;visibility:visible;transform:none}
/* Velo bajo el menu: deja claro que el resto de la pagina esta detras. */
.velo{position:fixed;inset:0;background:rgba(0,27,45,.34);opacity:0;visibility:hidden;
  transition:.2s;z-index:55}
body.menu-abierto .velo{opacity:1;visibility:visible}
.panel__cuerpo{width:min(100% - var(--canal)*2,var(--ancho));margin-inline:auto;
  padding:1.75rem 0 2.25rem}
@media(max-width:66rem){.panel{display:none}}
.panel__titulo{font-family:var(--f-tit);font-weight:var(--p-tit);font-size:1.15rem;
  color:var(--noche);padding-bottom:.9rem;margin-bottom:1.6rem;
  border-bottom:1px solid var(--linea);display:flex;align-items:baseline;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
.panel__titulo .enlace{font-size:.98rem}
/* Cada grupo es hijo directo de la rejilla: asi las filas se alinean solas y no
   quedan las cabeceras de la segunda fila a alturas distintas. */
.panel__rejilla{display:grid;column-gap:2.75rem;row-gap:1.9rem;
  grid-template-columns:repeat(3,minmax(0,1fr)) 15.5rem;align-items:start}
.panel__grupo{grid-column:auto}
.panel__destacado{grid-column:4;grid-row:1/span 2}
/* cabecera de grupo: enlace real, subrayado, del tamano del cuerpo. Como la referencia. */
.panel__grupo > a{display:inline-block;font-size:1.06rem;color:var(--noche);
  font-weight:var(--p-med);text-decoration:underline;text-underline-offset:.28em;
  text-decoration-thickness:1px;text-decoration-color:var(--medio);margin-bottom:.9rem}
.panel__grupo > a:hover{color:var(--medio)}
.panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.panel li a{font-size:1rem;color:var(--tinta-media);text-decoration:none;display:flex;
  align-items:baseline;gap:.55rem}
.panel li a::before{content:"\203A";color:var(--tinta-suave);font-size:1.05rem;line-height:1;
  flex:none;transition:.15s}
.panel li a:hover{color:var(--medio)}
.panel li a:hover::before{color:var(--medio);transform:translateX(2px)}
.panel li a i{font-style:normal;font-size:.85rem;color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;margin-left:auto}
.panel__destacado{background:var(--papel-alt);border-radius:8px;padding:1.5rem;align-self:start}
.panel__destacado p{font-size:.98rem;color:var(--tinta-media);margin:.5rem 0 1.1rem}
.panel__destacado h5{font-family:var(--f-tit);font-weight:var(--p-tit);font-size:1.12rem;margin:0}

/* ============ hero ============ */
.hero{position:relative;isolation:isolate;background:var(--oscuro);overflow:clip;
  display:grid;place-items:center;min-height:min(70vh,38rem);text-align:center}
.hero__foto{position:absolute;inset:0;z-index:-2;background-color:#0e2a41;
  background-image:radial-gradient(110% 80% at 68% 22%,#2a4f74 0%,transparent 62%),
                   linear-gradient(155deg,#123f5c 0%,#001b2d 70%)}
.hero__foto img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,27,45,.5),rgba(0,27,45,.76))}
.hero__cuerpo{padding-block:clamp(3.5rem,8vw,5.5rem);display:grid;gap:1.3rem;justify-items:center}
.eyebrow{font-size:1rem;font-weight:var(--p-med);color:var(--claro)}
.hero h1{font-size:clamp(2.1rem,1.1rem + 4.2vw,4.1rem);color:#fff;max-width:18ch;line-height:1.06}
.hero h1 em{font-style:normal;color:var(--claro);display:block}
.hero__bajada{color:#c9dded;font-size:clamp(1.1rem,1.02rem + .4vw,1.32rem);max-width:54ch}
.hero__bajada b{color:var(--claro);font-weight:var(--p-med)}
.hero__acc{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.hero__sello{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.16);
  width:min(100%,42rem);font-size:.8rem;color:#9fc3dc}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f-txt);
  font-size:1rem;font-weight:var(--p-med);padding:.9rem 1.7rem;border-radius:999px;
  border:2px solid transparent;text-decoration:none;cursor:pointer;transition:.18s}
.btn--claro{background:var(--claro);color:var(--noche)}
.btn--claro:hover{background:#fff}
.btn--linea{border-color:rgba(255,255,255,.45);color:#fff}
.btn--linea:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--medio{background:var(--medio);color:#fff}
.btn--medio:hover{background:var(--oscuro)}
.btn--bloque{width:100%}
.enlace{color:var(--medio);font-weight:var(--p-med);font-size:1rem;text-decoration:none}
.enlace:hover{text-decoration:underline;text-underline-offset:.2em}

.ph-esq{position:absolute;right:.85rem;bottom:.85rem;z-index:3;background:rgba(0,27,45,.72);
  backdrop-filter:blur(6px);color:#c3dcee;font-family:ui-monospace,Menlo,monospace;
  font-size:.66rem;padding:.35rem .6rem;border-radius:4px;border:1px solid rgba(255,255,255,.2);
  font-variant-numeric:tabular-nums;max-width:20rem;text-align:right;line-height:1.35}
.ph-esq em{display:block;font-style:normal;font-family:var(--f-txt);font-size:.64rem;
  opacity:.82;margin-top:.15rem}

/* ============ secciones ============ */
.sec{padding-block:clamp(3.25rem,6vw,5.5rem)}
.sec--alt{background:var(--papel-alt)}
.cab{display:grid;gap:.65rem;margin-bottom:2.4rem;max-width:44rem}
.cab--centro{margin-inline:auto;text-align:center;justify-items:center}
.rot{font-size:.78rem;font-weight:var(--p-med);letter-spacing:.16em;text-transform:uppercase;color:var(--medio)}
.cab h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.6rem)}
.cab h2 em{font-style:normal;color:var(--medio)}
.cab p{color:var(--tinta-media);font-size:1.18rem}

/* ============ tarjeta de programa ============ */
.carro{display:grid;gap:1.1rem;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:thin;padding-bottom:.2rem}
.carro > *{scroll-snap-align:start;min-width:0}
.carro::-webkit-scrollbar{height:6px}
.carro::-webkit-scrollbar-track{background:transparent}
.carro::-webkit-scrollbar-thumb{background:var(--linea);border-radius:99px}
/* minmax(0,1fr) reparte el ancho exacto del contenedor: las tarjetas llenan la
   caja y no sobra ni falta un pixel, asi que no hay corte. El suelo en rem solo
   entra por debajo de 66rem, que es donde de verdad dejan de caber y el scroll
   lateral es la salida buena. */
@media(max-width:66rem){
  .carro{grid-auto-columns:minmax(16rem,1fr);padding-bottom:.7rem;margin-bottom:-.5rem}
}
@media(max-width:38rem){
  .carro{grid-auto-columns:minmax(80%,1fr);scroll-snap-type:x mandatory}
}
.prog{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);
  border-radius:10px;overflow:clip;text-decoration:none;transition:.2s}
.prog:hover{box-shadow:0 14px 34px rgba(0,27,45,.12);transform:translateY(-3px);border-color:var(--claro)}
.prog__foto{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  background-color:var(--dc,#12405f);isolation:isolate;overflow:clip}
.prog__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.prog__foto::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--dc,#12405f) 52%,transparent),
             color-mix(in srgb,var(--dc,#12405f) 88%,transparent))}
.prog__marca{font-family:var(--f-tit);font-weight:var(--p-tit);font-size:1.45rem;color:#fff;
  letter-spacing:-.025em;text-align:center;padding:1rem;line-height:1.15}
.prog__marca span{color:var(--claro)}
.prog__cuerpo{padding:1.3rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.prog__cuerpo h3{font-size:1.18rem}
.prog__linea{height:1px;background:var(--linea)}
.prog__datos{display:grid;gap:.5rem;font-size:.95rem;color:var(--tinta-media)}
.prog__datos div{display:flex;align-items:center;gap:.55rem}
.prog__datos svg{flex:none;color:var(--tinta-suave)}
.prog__datos b{color:var(--tinta);font-weight:var(--p-med);font-variant-numeric:tabular-nums}
.prog__pie{margin-top:auto;padding-top:.3rem}

/* ============ áreas: lista sobria, sin bloques de color ============ */
.areas{columns:4;column-gap:2.5rem}
@media(max-width:68rem){.areas{columns:3}}
@media(max-width:46rem){.areas{columns:2}}
@media(max-width:30rem){.areas{columns:1}}
.areas a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--linea-fina);text-decoration:none;
  color:var(--tinta);font-size:1.04rem;break-inside:avoid;transition:.15s}
.areas a:hover{color:var(--medio);border-bottom-color:var(--medio)}
.areas a i{font-style:normal;font-size:.8rem;color:var(--tinta-suave);font-variant-numeric:tabular-nums}

/* ============ método ============ */
.metodo{display:grid;gap:2rem;grid-template-columns:repeat(4,1fr)}
@media(max-width:64rem){.metodo{grid-template-columns:repeat(2,1fr)}}
@media(max-width:34rem){.metodo{grid-template-columns:1fr}}
.paso{border-top:2px solid var(--claro);padding-top:1.1rem}
.paso span{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--medio);
  display:block;margin-bottom:.5rem}
.paso h3{font-size:1.14rem;margin-bottom:.45rem}
.paso p{font-size:1rem;color:var(--tinta-media)}

/* ============ banda ============ */
.banda{position:relative;isolation:isolate;background:var(--oscuro);color:#fff;text-align:center;overflow:clip}
.banda__foto{position:absolute;inset:0;z-index:-2;background:#0f2d45}
.banda::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,27,45,.74)}
.banda .caja{padding-block:clamp(3.25rem,6vw,5rem)}
.banda h2{font-size:clamp(1.65rem,1.25rem + 1.9vw,2.6rem);max-width:23ch;margin-inline:auto;color:#fff}
.banda h2 em{font-style:normal;color:var(--claro);display:block}
.banda p{color:#c9dded;max-width:58ch;margin:1.1rem auto 0}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center;
  margin-top:clamp(2.5rem,4.5vw,3.5rem);padding-top:clamp(2rem,3.5vw,2.75rem);
  border-top:1px solid rgba(255,255,255,.16)}
@media(max-width:52rem){.cifras{grid-template-columns:repeat(2,1fr)}}
.cifra b{display:block;font-family:var(--f-tit);font-weight:var(--p-tit);
  font-size:clamp(1.9rem,1.4rem + 2.1vw,3rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:#fff}
.cifra span{display:block;margin-top:.5rem;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;color:#7fa9c7}

/* ============ opiniones ============ */
.ops{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:60rem){.ops{grid-template-columns:1fr}}
.op{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1.5rem;
  display:grid;gap:.9rem}
.op p{font-size:1.06rem;color:var(--tinta);line-height:1.6}
.op footer{display:flex;align-items:center;gap:.75rem;background:none;padding:0}
.op__av{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--papel-hueco);flex:none;
  display:grid;place-items:center;font-family:ui-monospace,Menlo,monospace;font-size:.55rem;
  color:var(--tinta-suave)}
.op__quien{font-size:.88rem}
.op__quien b{display:block;font-weight:var(--p-med);color:var(--tinta)}
.op__quien span{color:var(--tinta-suave);font-size:.82rem}
.estrellas{color:var(--claro);font-size:.9rem;letter-spacing:.1em}

/* ============ empresas ============ */
.emp{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr 1fr}
@media(max-width:60rem){.emp{grid-template-columns:1fr}}
.emp__media{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:clip;
  background:linear-gradient(150deg,#dce8f2,#eef3f7)}
.emp h2{font-size:clamp(1.65rem,1.3rem + 1.7vw,2.4rem)}
.emp h2 em{font-style:normal;color:var(--medio)}
.emp p{color:var(--tinta-media);font-size:1.14rem;max-width:44ch;margin-top:.9rem}
.emp__acc{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.4rem;align-items:center}

/* ============ faq ============ */
.faq{display:grid;gap:.6rem;max-width:52rem}
.faq details{border:1px solid var(--linea);border-radius:8px;padding:1.1rem 1.3rem;background:#fff}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:1rem;align-items:center;font-weight:var(--p-med);font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--medio)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:.8rem;color:var(--tinta-media);font-size:1.03rem}

/* ============ pie ============ */
footer.pie{background:var(--noche);color:#93b4ca;padding-block:3.5rem 1.5rem;font-size:1rem}
.pie__marcas{padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.12)}

.pie__fila + .pie__fila{margin-top:2rem}
.pie__rotulo{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#5c809b;
  margin-bottom:1.1rem}
/* Los logos llegan con proporciones muy distintas. Se normalizan por alto optico
   y se limita el ancho para que ninguno domine la fila. */
.pie__logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.6rem}
.pie__logos img{height:1.9rem;width:auto;max-width:9.5rem;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.7;transition:opacity .18s}
.pie__logos img:hover{opacity:1}
.pie__logos img.pie__logo-kuma{height:2.6rem;max-width:12rem;filter:none;opacity:1}
/* Alto por logo: cada marca tiene una proporcion distinta y a un alto unico
   unas se leian y otras (Business Jump, Innovaforma, los PNG institucionales
   con aire alrededor) desaparecian. Los PNG de acreditaciones van recortados
   a su caja real. */
.pie__logos img[alt="Business Jump"]{height:2.9rem}
.pie__logos img[alt="Innovaforma Canarias"]{height:2.7rem}
.pie__logos img[alt="Edugenia"]{height:1.5rem;max-width:11rem}
.pie__logos img[alt="Logesmark"]{height:1.9rem;max-width:10rem}
.pie__logos img[alt="Canarias Forma"]{height:1.5rem;max-width:11rem}
.pie__logos--inst img{height:2.7rem;max-width:12rem;opacity:.85}
.pie__logos--inst img[alt="FUNDAE"]{height:1.7rem;max-width:12rem}
.pie__placa{margin-top:1.4rem;padding:.7rem 1rem;background:#fff;border-radius:4px;max-width:64rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem}
.pie__placa img{display:block;height:2.6rem;width:auto;max-width:100%;filter:none;opacity:1}
.pie__placa img[alt^="EOI"]{height:1.5rem}
.pie__logos a,.pie__placa a{display:block;line-height:0;border-radius:2px}
.pie__logos a:hover img,.pie__logos a:focus-visible img{opacity:1}
.pie__logos a:focus-visible,.pie__placa a:focus-visible{outline:2px solid #6d92ad;outline-offset:4px}
@media (max-width:640px){.pie__logos{gap:1.2rem 1.8rem}.pie__placa{padding:.6rem .7rem;gap:.7rem 1.1rem}.pie__placa img{height:2.1rem}.pie__placa img[alt^="EOI"]{height:1.2rem}}
/* Huecos de los logos institucionales que aun no tenemos en archivo. */
.pie__hueco{height:2.6rem;min-width:8.5rem;border:1px dashed rgba(255,255,255,.2);border-radius:5px;
  display:grid;place-items:center;font-size:.7rem;color:#7fa3bd;padding:0 .8rem;
  text-align:center;line-height:1.2}
.pie__hueco em{display:block;font-style:normal;font-family:ui-monospace,Menlo,monospace;
  font-size:.58rem;opacity:.6;margin-top:.1rem}
.pie__acredita{margin-top:2rem;font-size:.86rem;color:#6d92ad}
.pie__cols{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
  padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.12)}
footer.pie h4{color:#fff;font-family:var(--f-txt);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 .9rem;font-weight:var(--p-med)}
footer.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
footer.pie a{color:#c3dcee;text-decoration:none}
footer.pie a:hover{color:#fff}
.pie__legal{padding-top:1.5rem;display:flex;gap:1.3rem;flex-wrap:wrap;font-size:.78rem;
  align-items:center;color:#6d92ad}
.pie__legal a{font-size:.78rem}

/* Salto al contenido. Solo visible al llegar con el teclado. */
.k-saltar{position:absolute;top:-100%;left:1rem;z-index:200;background:var(--noche);
  color:#fff;padding:.75rem 1.25rem;border-radius:0 0 6px 6px;font-weight:var(--p-med);
  text-decoration:none}
.k-saltar:focus{top:0;color:#fff}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ==== componentes de paginas interiores ==== */
/* Componentes de las paginas interiores. Mismo sistema que la home: sin colores
   nuevos, sin pesos por encima de 600 y la marca solo como acento. */

/* ---- cabecera de pagina ---- */
.portada{position:relative;isolation:isolate;background:var(--oscuro);color:#fff;overflow:clip}
.portada::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(0,27,45,.55),rgba(0,27,45,.85))}
.portada__foto{position:absolute;inset:0;z-index:-2;background-color:#0e2a41;
  background-image:radial-gradient(100% 85% at 72% 18%,#2a4f74 0%,transparent 60%),
                   linear-gradient(155deg,#123f5c 0%,#001b2d 72%)}
.portada .caja{padding-block:clamp(2.75rem,5.5vw,4.5rem);display:grid;gap:1.1rem;
  max-width:min(100% - var(--canal)*2,var(--ancho))}
.portada h1{font-size:clamp(1.95rem,1.35rem + 2.6vw,3.2rem);color:#fff;max-width:20ch}
.portada h1 em{font-style:normal;color:var(--claro)}
.portada p{color:#c9dded;font-size:clamp(1.08rem,1.02rem + .35vw,1.25rem);max-width:58ch}
.portada .btn{margin-top:.6rem;justify-self:start}
.portada__acc{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.5rem}

/* ---- migas ---- */
.migas{font-size:.86rem;color:var(--tinta-suave);padding-block:1rem}
.migas a{color:var(--tinta-media);text-decoration:none}
.migas a:hover{color:var(--medio)}
.migas span{margin-inline:.45rem;opacity:.6}
.portada .migas{color:#8fb4d0;padding:0 0 .3rem}
.portada .migas a{color:#c9dded}
.portada .migas a:hover{color:#fff}

/* ---- barra de datos bajo la portada ---- */
.datos-tira{background:var(--papel-alt);border-bottom:1px solid var(--linea)}
.datos-tira .caja{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  padding-block:1.6rem}
@media(max-width:52rem){.datos-tira .caja{grid-template-columns:repeat(2,1fr)}}
.datos-tira b{display:block;font-family:var(--f-tit);font-weight:var(--p-tit);
  font-size:1.5rem;letter-spacing:-.02em;color:var(--noche);font-variant-numeric:tabular-nums}
.datos-tira span{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-suave);margin-top:.3rem}

/* ---- listado de fichas ---- */
.fichas{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(max-width:56rem){.fichas{grid-template-columns:1fr}}
.ficha{display:flex;flex-direction:column;gap:.7rem;background:#fff;padding:1.4rem 1.5rem;
  border:1px solid var(--linea);border-radius:10px;text-decoration:none;transition:.18s}
.ficha:hover{border-color:var(--claro);box-shadow:0 14px 32px rgba(0,27,45,.1);
  transform:translateY(-2px)}
.ficha h3{font-size:1.14rem;color:var(--tinta)}
.ficha__meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.92rem;color:var(--tinta-media)}
.ficha__meta b{font-weight:var(--p-med);color:var(--tinta);font-variant-numeric:tabular-nums}
.ficha__pie{margin-top:auto;padding-top:.35rem;display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem}
.tarjeta__alto .etiqueta{font-size:.68rem;padding:.2rem .45rem}
.etiqueta{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:var(--p-med);
  background:var(--papel-hueco);color:var(--medio);padding:.25rem .6rem;border-radius:4px}
.etiqueta--abierta{background:#e6f2e9;color:#1f6b3a}

/* ---- grupo de administracion ---- */
.grupo-adm + .grupo-adm{margin-top:2.75rem}
.grupo-adm > h3{font-size:1.3rem;padding-bottom:.7rem;margin-bottom:1.2rem;
  border-bottom:1px solid var(--linea);display:flex;align-items:baseline;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
.grupo-adm > h3 small{font-family:var(--f-txt);font-weight:var(--p-txt);font-size:.92rem;
  color:var(--tinta-suave);letter-spacing:0}

/* ---- indice lateral de areas ---- */
.rejilla-areas{columns:3;column-gap:2.5rem}
@media(max-width:62rem){.rejilla-areas{columns:2}}
@media(max-width:38rem){.rejilla-areas{columns:1}}
.rejilla-areas a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--linea-fina);text-decoration:none;
  color:var(--tinta);font-size:1.02rem;break-inside:avoid;transition:.15s}
.rejilla-areas a:hover{color:var(--medio);border-bottom-color:var(--medio)}
.rejilla-areas i{font-style:normal;font-size:.82rem;color:var(--tinta-suave);
  font-variant-numeric:tabular-nums}

/* ---- dos columnas de texto ---- */
.dos-col{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:60rem){.dos-col{grid-template-columns:1fr}}
.dos-col h2{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.3rem)}
.dos-col h2 em{font-style:normal;color:var(--medio)}
.dos-col p{color:var(--tinta-media);font-size:1.12rem;margin-top:.9rem}

/* ---- lista con marca ---- */
.lista-marca{display:grid;gap:1rem;margin-top:1.4rem;list-style:none;padding:0}
.lista-marca li{display:flex;gap:.85rem;align-items:flex-start;font-size:1.05rem;
  color:var(--tinta-media)}
.lista-marca li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--claro);margin-top:.62rem}
.lista-marca b{color:var(--tinta);font-weight:var(--p-med)}

/* ---- pasos numerados ---- */
.itinerario{display:grid;gap:0;counter-reset:paso;margin-top:2rem}
.itinerario__paso{display:grid;grid-template-columns:3.25rem 1fr;gap:1.4rem;
  padding:1.5rem 0;border-top:1px solid var(--linea)}
.itinerario__paso:last-child{border-bottom:1px solid var(--linea)}
.itinerario__paso b{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;color:var(--medio);
  padding-top:.28rem}
.itinerario__paso h3{font-size:1.16rem;margin-bottom:.4rem}
.itinerario__paso p{color:var(--tinta-media);font-size:1.03rem}

/* ---- llamada final ---- */
.remate{background:var(--noche);color:#fff;text-align:center}
.remate .caja{padding-block:clamp(2.75rem,5vw,4.25rem);display:grid;gap:1rem;justify-items:center}
.remate h2{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.3rem);color:#fff;max-width:24ch}
.remate p{color:#c9dded;max-width:52ch}
.remate__acc{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}

/* ---- tabla sobria ---- */
.tabla-envuelta{overflow-x:auto}
table.tabla{width:100%;border-collapse:collapse;font-size:1rem;min-width:34rem}
table.tabla th,table.tabla td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--linea)}
table.tabla th{font-family:var(--f-txt);font-weight:var(--p-med);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);
  border-bottom-color:var(--tinta-suave)}
table.tabla td{color:var(--tinta-media)}
table.tabla td:first-child{color:var(--tinta);font-weight:var(--p-med)}
table.tabla td.num{font-variant-numeric:tabular-nums;text-align:right}
table.tabla th.num{text-align:right}

/* ---- aviso ---- */
.nota{background:var(--papel-alt);border-left:3px solid var(--claro);padding:1.1rem 1.3rem;
  font-size:.98rem;color:var(--tinta-media);border-radius:0 6px 6px 0}
.nota b{color:var(--tinta);font-weight:var(--p-med)}

/* ---- listado de catalogo ---- */
.catalogo{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:15rem 1fr;
  align-items:start}
@media(max-width:62rem){.catalogo{grid-template-columns:1fr}}
.filtros{position:sticky;top:9.5rem;display:grid;gap:1.6rem}
@media(max-width:62rem){.filtros{position:static}}
.filtro h3{font-family:var(--f-txt);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-suave);font-weight:var(--p-med);margin-bottom:.8rem}
.filtro ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.filtro a{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  padding:.42rem .6rem;margin-inline:-.6rem;border-radius:6px;font-size:.98rem;
  color:var(--tinta-media);text-decoration:none;transition:.14s}
.filtro a:hover{background:var(--papel-alt);color:var(--medio)}
.filtro a[aria-current]{background:var(--papel-hueco);color:var(--noche);font-weight:var(--p-med)}
.filtro a i{font-style:normal;font-size:.82rem;color:var(--tinta-suave);
  font-variant-numeric:tabular-nums}
.filtro__mas{font-size:.92rem;color:var(--medio);background:none;border:0;padding:.4rem 0;
  cursor:pointer;font-family:var(--f-txt)}

.cat__cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  flex-wrap:wrap;padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--linea)}
.cat__cuenta{font-size:.98rem;color:var(--tinta-media)}
.cat__cuenta b{color:var(--tinta);font-weight:var(--p-med);font-variant-numeric:tabular-nums}

.tarjetas{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:82rem){.tarjetas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:60rem){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:38rem){.tarjetas{grid-template-columns:1fr}}
.tarjeta{display:flex;flex-direction:column;gap:.65rem;background:#fff;border:1px solid var(--linea);
  border-radius:10px;padding:1.3rem 1.4rem;text-decoration:none;transition:.18s}
.tarjeta:hover{border-color:var(--claro);box-shadow:0 14px 32px rgba(0,27,45,.1);
  transform:translateY(-2px)}
.tarjeta__alto{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.tarjeta h3{font-size:1rem;color:var(--tinta);line-height:1.3}
.tarjeta__meta{display:flex;flex-wrap:wrap;gap:.3rem .7rem;font-size:.86rem;color:var(--tinta-media);
  margin-top:auto;padding-top:.5rem}
.tarjeta__meta b{color:var(--tinta);font-weight:var(--p-med);font-variant-numeric:tabular-nums}
.tarjeta__precio{font-family:var(--f-tit);font-weight:var(--p-tit);font-size:1.05rem;
  color:var(--noche);letter-spacing:-.01em}
.tarjeta__precio.gratis{color:#1f6b3a}

.paginacion{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:2.5rem}
.paginacion a,.paginacion span{min-width:2.5rem;height:2.5rem;display:grid;place-items:center;
  padding-inline:.7rem;border:1px solid var(--linea);border-radius:7px;text-decoration:none;
  font-size:.98rem;color:var(--tinta-media);font-variant-numeric:tabular-nums}
.paginacion a:hover{border-color:var(--medio);color:var(--medio)}
.paginacion .actual{background:var(--noche);border-color:var(--noche);color:#fff;
  font-weight:var(--p-med)}

.vacio{padding:3rem 1.5rem;text-align:center;background:var(--papel-alt);border-radius:10px}
.vacio h3{font-size:1.2rem;margin-bottom:.6rem}
.vacio p{color:var(--tinta-media);max-width:40ch;margin-inline:auto}

/* ---- ficha de producto ---- */
.ficha-cuerpo{display:grid;gap:clamp(2rem,3.5vw,3.25rem);grid-template-columns:1fr 21rem;
  align-items:start}
@media(max-width:64rem){.ficha-cuerpo{grid-template-columns:1fr}}
.bloque + .bloque{margin-top:2.75rem;padding-top:2.75rem;border-top:1px solid var(--linea)}
.bloque h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.85rem);margin-bottom:1.1rem}
.prosa{color:var(--tinta-media);font-size:1.06rem;line-height:1.68}
.prosa > * + *{margin-top:1rem}
.prosa h3{font-family:var(--f-tit);font-weight:var(--p-tit);font-size:1.14rem;color:var(--tinta);
  margin-top:1.8rem;line-height:1.25;letter-spacing:-.01em}
.prosa h4{font-family:var(--f-tit);font-weight:var(--p-med);font-size:1.04rem;color:var(--tinta);
  margin-top:1.4rem}
.prosa strong,.prosa b{color:var(--tinta);font-weight:var(--p-med)}
.prosa ul,.prosa ol{padding-left:1.25rem;display:grid;gap:.45rem}
.prosa a{color:var(--medio);text-decoration:underline;text-underline-offset:.18em}
.prosa table{width:100%;border-collapse:collapse;font-size:.98rem}
.prosa td,.prosa th{padding:.6rem .8rem;border-bottom:1px solid var(--linea);text-align:left}

/* El temario largo se recorta hasta que se pide entero. */
.temario{max-height:26rem;overflow:hidden;position:relative;transition:max-height .3s}
.temario.abierto{max-height:none}
.temario__velo{position:relative;margin-top:-5.5rem;padding-top:5.5rem;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 62%)}
.temario__velo.oculto{display:none}

.ficha-lateral{display:grid;gap:1rem;position:sticky;top:9.5rem}
@media(max-width:64rem){.ficha-lateral{position:static}}
.panel-accion{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.5rem;
  box-shadow:0 12px 30px rgba(0,27,45,.07)}
.panel-accion__precio{font-family:var(--f-tit);font-weight:var(--p-tit);font-size:2.1rem;
  letter-spacing:-.03em;color:var(--noche);line-height:1}
.panel-accion__precio.gratis{color:#1f6b3a;font-size:1.7rem}
.panel-accion__nota{font-size:.9rem;color:var(--tinta-media);margin-top:.5rem;line-height:1.45}
.panel-accion__datos{list-style:none;margin:1.4rem 0;padding:1.2rem 0;display:grid;gap:.7rem;
  border-block:1px solid var(--linea)}
.panel-accion__datos li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  font-size:.96rem}
.panel-accion__datos span{color:var(--tinta-suave)}
.panel-accion__datos b{color:var(--tinta);font-weight:var(--p-med);text-align:right}
.panel-accion__pie{font-size:.86rem;color:var(--tinta-media);margin-top:.75rem;text-align:center;
  line-height:1.45}
.panel-accion__voz{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--linea);
  text-align:center}
.panel-accion__voz a{display:block;font-family:var(--f-tit);font-weight:var(--p-tit);
  font-size:1.25rem;color:var(--medio);text-decoration:none;letter-spacing:-.01em}
.panel-accion__voz span{display:block;font-size:.82rem;color:var(--tinta-suave);margin-top:.2rem}

.panel-lateral{background:var(--papel-alt);border-radius:12px;padding:1.4rem}
.panel-lateral h3{font-size:1.08rem;margin-bottom:.5rem}
.panel-lateral p{font-size:.96rem;color:var(--tinta-media);margin-bottom:.9rem;line-height:1.5}

/* ---- imagen en la tarjeta del catalogo ---- */
.tarjeta{padding:0;overflow:clip}
.tarjeta__foto{position:relative;aspect-ratio:16/9;background:var(--papel-hueco);overflow:clip}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.tarjeta:hover .tarjeta__foto img{transform:scale(1.03)}
.tarjeta__sello{position:absolute;top:.7rem;right:.7rem;background:#1f6b3a;color:#fff;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--p-med);
  padding:.28rem .6rem;border-radius:4px}
.tarjeta__cuerpo{display:flex;flex-direction:column;gap:.55rem;padding:.95rem 1.05rem 1.1rem;flex:1}


/* ==== calculadora-fundae ==== */
.calc{display:grid;gap:clamp(2rem,4vw,3.25rem);grid-template-columns:1fr 1.05fr;align-items:start}
@media(max-width:62rem){.calc{grid-template-columns:1fr}}
.calc__form{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.75rem}
.campo{display:grid;gap:.45rem;margin-bottom:1.5rem}
.campo label{font-weight:var(--p-med);font-size:1.02rem;color:var(--tinta)}
.campo small{color:var(--tinta-media);font-size:.92rem;line-height:1.45}
.campo input{font-family:var(--f-txt);font-size:1.08rem;padding:.75rem .9rem;border-radius:8px;
  border:1px solid var(--linea);background:var(--papel-alt);color:var(--tinta);width:100%;
  font-variant-numeric:tabular-nums}
.campo input:focus{outline:none;border-color:var(--medio);background:#fff;
  box-shadow:0 0 0 3px rgba(43,97,151,.15)}
.opciones{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
.opciones input{position:absolute;opacity:0;pointer-events:none}
.opciones label{display:block;text-align:center;padding:.7rem .5rem;border-radius:8px;
  border:1px solid var(--linea);background:var(--papel-alt);cursor:pointer;font-size:.98rem;
  font-weight:var(--p-txt);transition:.15s}
.opciones input:checked + label{border-color:var(--medio);background:#fff;color:var(--medio);
  font-weight:var(--p-med);box-shadow:0 0 0 2px rgba(43,97,151,.18)}
.opciones input:focus-visible + label{outline:3px solid var(--claro);outline-offset:2px}

.calc__salida{background:var(--noche);color:#fff;border-radius:12px;padding:1.75rem;
  position:sticky;top:9.5rem}
@media(max-width:62rem){.calc__salida{position:static}}
.calc__salida h3{color:#fff;font-size:1.12rem;margin-bottom:1.2rem}
.cifra-grande{font-family:var(--f-tit);font-weight:var(--p-tit);
  font-size:clamp(2.6rem,2rem + 3vw,3.9rem);line-height:1;letter-spacing:-.035em;color:var(--claro);
  font-variant-numeric:tabular-nums}
.cifra-pie{color:#9fc3dc;font-size:.9rem;margin-top:.5rem}
.desglose{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);
  display:grid;gap:.75rem}
.desglose div{display:flex;justify-content:space-between;gap:1rem;font-size:.98rem;color:#c9dded}
.desglose b{color:#fff;font-weight:var(--p-med);font-variant-numeric:tabular-nums}
.desglose div.total{padding-top:.75rem;margin-top:.25rem;
  border-top:1px solid rgba(255,255,255,.16);font-size:1.05rem}
.calc__salida .btn{margin-top:1.6rem;width:100%}
.calc__aviso{margin-top:1.1rem;font-size:.82rem;color:#7fa9c7;line-height:1.5}

/* ==== centros ==== */
.centros{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)}
@media(max-width:56rem){.centros{grid-template-columns:1fr}}
.centro{background:#fff;border:1px solid var(--linea);border-radius:10px;overflow:clip;
  display:flex;flex-direction:column}
.centro__foto{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#dce8f2,#eef3f7)}
.centro__cuerpo{padding:1.4rem 1.5rem;display:grid;gap:.7rem}
.centro__cuerpo h3{font-size:1.16rem}
.centro__dato{display:flex;gap:.6rem;align-items:baseline;font-size:1rem;color:var(--tinta-media)}
.centro__dato b{color:var(--tinta);font-weight:var(--p-med);flex:none;min-width:6.5rem;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave)}
.centro__acc{margin-top:.4rem;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}

/* ==== puedo-pedir-plaza ==== */
.paso-a-paso{max-width:44rem;margin-inline:auto}
.progreso{display:flex;gap:.4rem;margin-bottom:2rem}
.progreso span{flex:1;height:3px;background:var(--linea);border-radius:2px;transition:background .25s}
.progreso span.hecho{background:var(--claro)}
.pregunta{display:none}
.pregunta.activa{display:block;animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pregunta__num{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--medio);
  display:block;margin-bottom:.5rem}
.pregunta h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);margin-bottom:.6rem}
.pregunta > p{color:var(--tinta-media);font-size:1.05rem;margin-bottom:1.6rem}
.respuestas{display:grid;gap:.6rem}
.respuestas button{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  text-align:left;font-family:var(--f-txt);font-size:1.06rem;color:var(--tinta);
  background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1rem 1.2rem;
  cursor:pointer;transition:.15s}
.respuestas button:hover{border-color:var(--claro);background:var(--papel-alt)}
.respuestas button small{display:block;color:var(--tinta-suave);font-size:.9rem;margin-top:.15rem}
.respuestas button::after{content:"\203A";color:var(--tinta-suave);font-size:1.4rem;flex:none}
.respuestas button.marcado{border-color:var(--medio);background:var(--papel-hueco)}
.atras{margin-top:1.5rem;background:none;border:0;color:var(--tinta-media);font-family:var(--f-txt);
  font-size:.96rem;cursor:pointer;padding:.4rem 0}
.atras:hover{color:var(--medio)}

.veredicto{display:none}
.veredicto.activa{display:block}
.veredicto__marca{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:var(--p-med);padding:.35rem .8rem;
  border-radius:5px;margin-bottom:1rem}
.veredicto__marca.si{background:#e6f2e9;color:#1f6b3a}
.veredicto__marca.quiza{background:var(--papel-hueco);color:var(--medio)}
.veredicto__marca.no{background:#fdeced;color:#a33240}
.veredicto h2{font-size:clamp(1.5rem,1.25rem + 1.2vw,2.1rem);margin-bottom:.8rem}
.veredicto > p{color:var(--tinta-media);font-size:1.1rem;margin-bottom:1.6rem}
.veredicto__cajas{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;margin-bottom:1.8rem}
@media(max-width:44rem){.veredicto__cajas{grid-template-columns:1fr}}
.veredicto__caja{background:var(--papel-alt);border-radius:10px;padding:1.2rem 1.3rem}
.veredicto__caja b{display:block;font-family:var(--f-tit);font-weight:var(--p-tit);font-size:1.75rem;
  letter-spacing:-.02em;color:var(--noche);line-height:1}
.veredicto__caja span{display:block;font-size:.94rem;color:var(--tinta-media);margin-top:.35rem}
.veredicto__porque{border-left:3px solid var(--claro);background:var(--papel-alt);
  padding:1.1rem 1.3rem;border-radius:0 6px 6px 0;margin-bottom:1.8rem}
.veredicto__porque h3{font-size:1rem;margin-bottom:.6rem}
.veredicto__porque ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.98rem;
  color:var(--tinta-media)}
.veredicto__porque li{display:flex;gap:.6rem;align-items:flex-start}
.veredicto__porque li::before{content:"·";color:var(--claro);font-weight:700;font-size:1.2rem;
  line-height:1.1}
.veredicto__acc{display:flex;gap:.8rem;flex-wrap:wrap}

/* ==== sueldos ==== */
.sueldo{display:grid;gap:clamp(2rem,4vw,3.25rem);grid-template-columns:1fr 1.05fr;align-items:start}
@media(max-width:62rem){.sueldo{grid-template-columns:1fr}}
.sueldo__form{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.75rem}
.sueldo__form .campo{display:grid;gap:.45rem;margin-bottom:1.5rem}
.sueldo__form label{font-weight:var(--p-med);font-size:1.02rem;color:var(--tinta)}
.sueldo__form small{color:var(--tinta-media);font-size:.92rem;line-height:1.45}
.sueldo__form select,.sueldo__form input{font-family:var(--f-txt);font-size:1.06rem;
  padding:.75rem .9rem;border-radius:8px;border:1px solid var(--linea);background:var(--papel-alt);
  color:var(--tinta);width:100%;font-variant-numeric:tabular-nums}
.sueldo__form select:focus,.sueldo__form input:focus{outline:none;border-color:var(--medio);
  background:#fff;box-shadow:0 0 0 3px rgba(43,97,151,.15)}
.rango{display:flex;align-items:center;gap:.9rem}
.rango input[type=range]{accent-color:var(--medio)}
.rango output{font-variant-numeric:tabular-nums;font-weight:var(--p-med);min-width:2.5rem;
  text-align:right;color:var(--noche)}

.sueldo__salida{background:var(--noche);color:#fff;border-radius:12px;padding:1.75rem;
  position:sticky;top:9.5rem}
@media(max-width:62rem){.sueldo__salida{position:static}}
.sueldo__salida h3{color:#fff;font-size:1.08rem;margin-bottom:.3rem}
.sueldo__salida .sub{color:#7fa9c7;font-size:.86rem;margin-bottom:1.2rem}
.cifra-grande{font-family:var(--f-tit);font-weight:var(--p-tit);
  font-size:clamp(2.4rem,1.9rem + 2.6vw,3.5rem);line-height:1;letter-spacing:-.035em;
  color:var(--claro);font-variant-numeric:tabular-nums}
.cifra-pie{color:#9fc3dc;font-size:.92rem;margin-top:.5rem}
.desglose{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);
  display:grid;gap:.7rem}
.desglose div{display:flex;justify-content:space-between;gap:1rem;font-size:.97rem;color:#c9dded}
.desglose b{color:#fff;font-weight:var(--p-med);font-variant-numeric:tabular-nums}
.desglose div.total{padding-top:.7rem;margin-top:.2rem;
  border-top:1px solid rgba(255,255,255,.16);font-size:1.04rem}
.sueldo__salida .btn{margin-top:1.5rem;width:100%}
.sueldo__aviso{margin-top:1rem;font-size:.82rem;color:#7fa9c7;line-height:1.5}

/* Deslizadores de las calculadoras.
   El campo numerico sigue estando: la barra es para jugar, el campo para poner la
   cifra exacta. Lleva border:0 explicito porque la hoja global pone borde a todo
   input y en un range eso dibuja una caja alrededor del carril. */
input[type="range"].deslizador{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  margin:.9rem 0 .3rem;padding:0;border:0;border-radius:999px;background:transparent;
  cursor:pointer;display:block}
.deslizador:focus{outline:0}

/* Carril y relleno. Se pintan en el propio carril de cada motor, no en el input,
   que es la unica forma de que el relleno llegue hasta el pulsador y no mas. */
.deslizador::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(to right,var(--medio) 0 var(--relleno,0%),
    var(--linea) var(--relleno,0%) 100%)}
.deslizador::-moz-range-track{height:6px;border-radius:999px;background:var(--linea)}
.deslizador::-moz-range-progress{height:6px;border-radius:999px;background:var(--medio)}

/* Pulsador. Blanco con aro de color: se ve sobre el relleno y sobre el carril. */
.deslizador::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;
  border:2px solid var(--medio);box-shadow:0 1px 3px rgba(0,27,45,.25);cursor:grab}
.deslizador::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;
  border:2px solid var(--medio);box-shadow:0 1px 3px rgba(0,27,45,.25);cursor:grab}
.deslizador:active::-webkit-slider-thumb{cursor:grabbing;background:var(--medio)}
.deslizador:active::-moz-range-thumb{cursor:grabbing;background:var(--medio)}
.deslizador:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(43,97,151,.22)}
.deslizador:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(43,97,151,.22)}

/* Los topes del recorrido, para saber entre que valores se mueve. */
.deslizador-topes{display:flex!important;justify-content:space-between;
  font:var(--p-txt) .74rem/1 var(--f-txt);color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;margin:-.1rem 0 .3rem}


/* La pastilla de oportunidad, cuando cae sobre la portada oscura. Iba con el
   fondo y el texto claros de la version sobre papel: invisible. */
.portada .etiqueta,.hero .etiqueta{background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.28)}
.portada .etiqueta--abierta,.hero .etiqueta--abierta{background:rgba(96,201,140,.18);
  color:#8fe0b0;border-color:rgba(143,224,176,.4)}


/* El titulo de linea es un enlace y el chevron un boton aparte. Antes toda la
   linea era un boton que solo desplegaba, asi que a /oposiciones/ no se llegaba
   desde el menu. Navegar y desplegar son dos acciones y necesitan dos controles. */
.vert{display:flex;align-items:stretch}
.vert__ir{display:inline-flex;align-items:center;flex:1;padding:.85rem .3rem .85rem 1.15rem;
  color:inherit;text-decoration:none;font-size:.92rem;white-space:nowrap}
.vert:first-child .vert__ir{padding-left:0}
/* Nada de subrayado: ensucia la barra. La senal de que la linea esta activa es
   el fondo, igual que en el resto de la navegacion. */
.vert__ir:hover{color:#fff}
.vert__ir:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:3px}
.vert:has(.vert__ir) .vert__btn{padding-left:.4rem;padding-right:1.15rem}


/* ---- Tablon de convocatorias -------------------------------------------
   El componente firma de Oposiciones. La referencia del sector es directa y sin
   humo, asi que aqui se prioriza densidad y legibilidad de dato sobre aire: fila
   compacta, cifras alineadas y tabulares, y el estado como senal de color a la
   izquierda. Es a proposito la seccion menos publicitaria del sitio. */
.tablon-envuelta{overflow-x:auto;border:1px solid var(--linea);border-radius:8px;
  background:var(--papel)}
.tablon{width:100%;border-collapse:collapse;font-size:.9rem;min-width:52rem}
.tablon thead th{background:var(--papel-alt);color:var(--tinta-media);
  font:var(--p-med) .72rem/1.2 var(--f-txt);text-transform:uppercase;letter-spacing:.07em;
  text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--linea);white-space:nowrap}
.tablon td,.tablon tbody th{padding:.72rem .9rem;border-bottom:1px solid var(--linea-fina);
  text-align:left;vertical-align:middle}
.tablon tbody th{font-weight:var(--p-med);color:var(--tinta)}
.tablon tbody tr:last-child td,.tablon tbody tr:last-child th{border-bottom:0}
.tablon .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--p-med)}
.tablon .ir{text-align:right;white-space:nowrap}
.tablon__fila{transition:background .12s}
.tablon__fila:hover{background:var(--papel-alt)}
/* La franja de estado a la izquierda: se lee antes que el texto. */
.tablon__fila > td:first-child{border-left:3px solid transparent}
.tablon__fila.es-abierta > td:first-child{border-left-color:#1f7a5c}
.tablon__fila.es-urgente > td:first-child{border-left-color:#b8620f}
.tablon__fila.es-cerrada > td:first-child{border-left-color:var(--linea)}
.tablon__fila.es-espera > td:first-child{border-left-color:var(--tinta-suave)}
.tablon__fila.es-cerrada{color:var(--tinta-suave)}
.pastilla{display:inline-block;font:var(--p-med) .7rem/1 var(--f-txt);text-transform:uppercase;
  letter-spacing:.06em;padding:.3rem .5rem;border-radius:4px;white-space:nowrap}
.pastilla.es-abierta{background:#e6f2e9;color:#1f6b3a}
.pastilla.es-urgente{background:#fdf0e2;color:#8a4a0b}
.pastilla.es-cerrada{background:var(--papel-hueco);color:var(--tinta-suave)}
.pastilla.es-espera{background:var(--papel-hueco);color:var(--tinta-media)}
.nota--fuente{margin-top:1rem;font-size:.82rem;color:var(--tinta-suave)}
@media(max-width:38rem){.tablon{font-size:.85rem}}

/* El titulo y el chevron son dos controles pero UNA sola zona visual. Antes cada
   uno pintaba su propio fondo al pasar el raton y la barra parecia rota. */
.vert{cursor:pointer}
.vert:hover,.vert:focus-within{background:rgba(255,255,255,.07)}
.vert:hover .vert__ir,.vert:hover .vert__btn{color:#fff}
.vert__ir:hover,.vert__btn:hover{background:none}


/* ---- Rejilla de escuelas (Formacion para el Empleo) --------------------
   El contrapunto del tablon de Oposiciones: alli densidad de dato, aqui aire y
   tipografia. El nombre de la escuela ES el grafico, sin iconos ni fotos, porque
   lo que se compra aqui es la promesa del sector, no una ficha. */
.escuelas{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:10px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.escuela{display:flex;flex-direction:column;gap:.55rem;background:var(--papel);
  padding:1.7rem 1.5rem 1.5rem;text-decoration:none;color:inherit;position:relative;
  transition:background .16s}
.escuela::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--dc,var(--medio));opacity:0;transition:opacity .16s}
.escuela:hover{background:var(--papel-alt)}
.escuela:hover::before,.escuela:focus-visible::before{opacity:1}
.escuela__k{font:var(--p-tit) clamp(1.15rem,1.8vw,1.4rem)/1.15 var(--f-tit);
  color:var(--dc,var(--noche));letter-spacing:-.01em}
.escuela__x{font-size:.9rem;line-height:1.5;color:var(--tinta-media);flex:1}
.escuela__ir{font:var(--p-med) .82rem/1 var(--f-txt);color:var(--medio);margin-top:.4rem}
.escuela:focus-visible{outline:2px solid var(--medio);outline-offset:-2px}


/* ---- Comparador de opciones -------------------------------------------
   El componente de mayor retorno de la referencia: en vez de enumerar ventajas,
   pone las opciones una al lado de otra y deja decidir. La columna destacada se
   marca con fondo y borde, nunca con un "recomendado" en letras grandes. */
.comparador-envuelta{overflow-x:auto}
.comparador{width:100%;border-collapse:separate;border-spacing:0;min-width:44rem}
.comparador th,.comparador td{padding:.85rem 1rem;text-align:center;
  border-bottom:1px solid var(--linea-fina);vertical-align:middle}
.comparador tbody th{text-align:left;font-weight:var(--p-txt);color:var(--tinta-media);
  font-size:.9rem;width:32%}
.comparador thead th{border-bottom:1px solid var(--linea);padding-top:1.2rem}
.comparador__t{display:block;font:var(--p-tit) 1.05rem/1.2 var(--f-tit);color:var(--noche)}
.comparador__s{display:block;margin-top:.25rem;font-size:.78rem;color:var(--tinta-suave);
  font-weight:var(--p-txt)}
.comparador .es-destacada{background:var(--papel-alt)}
.comparador thead .es-destacada{border-top:3px solid var(--medio);border-radius:8px 8px 0 0}
.comparador tbody tr:last-child .es-destacada{border-radius:0 0 8px 8px}
.comparador__pie td{border-bottom:0;padding-top:1.2rem;padding-bottom:1.4rem}
.comparador__pie .btn{width:100%;justify-content:center}
.marca{color:#1f7a5c;font-size:1.15rem;line-height:1}
.aspa{color:var(--tinta-suave);font-size:1rem;line-height:1}
@media(max-width:38rem){.comparador{font-size:.88rem}}


/* ---- Claustro (Formacion Superior) -------------------------------------
   Lo que hace creible un master no es el temario, es quien lo da. Por eso la
   ficha pone cargo y empresa ACTUAL en negrita: es el dato que no se puede
   copiar sin contratar a esa persona. */
.claustro{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.docente{display:flex;flex-direction:column;gap:.45rem}
.docente__foto{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;
  background:var(--papel-hueco);margin-bottom:.5rem}
.docente__foto--hueco{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--linea);color:var(--tinta-suave);font-size:.78rem}
.docente h3{font:var(--p-tit) 1.05rem/1.25 var(--f-tit);color:var(--noche);margin:0}
.docente__cargo{font-size:.86rem;color:var(--tinta-media);margin:0}
.docente__cargo b{color:var(--tinta);font-weight:var(--p-med)}
.docente__x{font-size:.86rem;line-height:1.5;color:var(--tinta-media);margin:.2rem 0 0}


/* ---- Buscador de oposicion --------------------------------------------
   Va pegado bajo la portada, medio montado sobre ella, porque es la primera
   accion que hace quien llega: buscar la suya. */
.sec--buscador{padding-top:0;margin-top:-3.5rem;position:relative;z-index:5}
.busca{background:var(--papel);border:1px solid var(--linea);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,27,45,.10);padding:1.5rem 1.6rem 1.2rem}
.busca__et{display:block;font:var(--p-med) .82rem/1 var(--f-txt);text-transform:uppercase;
  letter-spacing:.07em;color:var(--tinta-media);margin-bottom:.7rem}
.busca__caja{display:flex;align-items:center;gap:.7rem;border:1px solid var(--linea);
  border-radius:8px;padding:.7rem .9rem;color:var(--tinta-suave);transition:border-color .15s}
.busca__caja:focus-within{border-color:var(--medio);box-shadow:0 0 0 3px rgba(43,97,151,.14)}
.busca__caja input{flex:1;border:0;outline:0;background:none;font:var(--p-txt) 1rem/1.3 var(--f-txt);
  color:var(--tinta)}
.busca__lista{list-style:none;margin:.9rem 0 0;padding:0;max-height:19rem;overflow-y:auto;
  display:grid;gap:1px}
.busca__lista a{display:grid;grid-template-columns:1fr auto auto;gap:.9rem;align-items:baseline;
  padding:.62rem .5rem;border-radius:6px;text-decoration:none;color:inherit}
.busca__lista a:hover,.busca__lista a:focus-visible{background:var(--papel-alt)}
.busca__t{font-weight:var(--p-med);color:var(--tinta)}
.busca__a{font-size:.85rem;color:var(--tinta-media)}
.busca__g{font-size:.72rem;letter-spacing:.05em;color:var(--tinta-suave);
  background:var(--papel-hueco);padding:.18rem .42rem;border-radius:4px}
.busca__nada{margin:.9rem 0 0;font-size:.9rem;color:var(--tinta-media)}
@media(max-width:38rem){
  .sec--buscador{margin-top:-2rem}
  .busca__lista a{grid-template-columns:1fr auto}
  .busca__a{grid-column:1/-1;margin-top:-.2rem}
}


/* ---- Formulario -------------------------------------------------------- */
.form{max-width:44rem;display:grid;gap:1.1rem}
.form__par{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
.form label{display:grid;gap:.35rem;font:var(--p-med) .86rem/1.2 var(--f-txt);color:var(--tinta-media)}
.form input,.form select,.form textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--linea);
  border-radius:8px;font:var(--p-txt) 1rem/1.4 var(--f-txt);color:var(--tinta);background:var(--papel)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--medio);
  box-shadow:0 0 0 3px rgba(43,97,151,.14)}
.form textarea{resize:vertical;min-height:7rem}
.form__req{color:var(--medio)}
.form .btn{justify-self:start}
.form__aviso{font-size:.8rem;color:var(--tinta-suave);margin:0;max-width:34rem}
/* La trampa de robots: fuera de la vista pero no display:none, que algunos la
   detectan y la saltan. */
.form__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{padding:.85rem 1.1rem;border-radius:8px;margin:0 0 1.4rem;max-width:44rem;font-size:.92rem}
.aviso--bien{background:#e6f2e9;color:#1f6b3a;border-left:3px solid #1f7a5c}
.aviso--mal{background:#fdf0e2;color:#8a4a0b;border-left:3px solid #b8620f}
@media(max-width:38rem){.form__par{grid-template-columns:1fr}}


/* ---- Blog --------------------------------------------------------------- */
.portada--corta{min-height:auto;padding-block:3.4rem 3rem}
.entrada__meta{display:flex;gap:.5rem;align-items:center;font-size:.86rem;
  color:rgba(255,255,255,.62);margin-top:.6rem}
.prosa--entrada{max-width:44rem;font-size:1.05rem;line-height:1.72}
.prosa--entrada h2{font:var(--p-tit) 1.6rem/1.25 var(--f-tit);color:var(--noche);margin:2.4rem 0 .8rem}
.prosa--entrada h3{font:var(--p-tit) 1.22rem/1.3 var(--f-tit);color:var(--noche);margin:1.9rem 0 .6rem}
.prosa--entrada p{margin:0 0 1.1rem}
.prosa--entrada ul,.prosa--entrada ol{margin:0 0 1.2rem 1.1rem;display:grid;gap:.45rem}
.prosa--entrada img{max-width:100%;height:auto;border-radius:8px;margin:1.4rem 0}
.prosa--entrada blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--medio);color:var(--tinta-media);font-style:normal}
.prosa--entrada a{color:var(--medio);text-underline-offset:3px}
.tarjeta__pie time{font-size:.82rem;color:var(--tinta-suave)}
.pagination{display:flex;gap:.5rem;justify-content:center;margin-top:2.6rem;flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.4rem;height:2.4rem;padding:0 .8rem;border:1px solid var(--linea);border-radius:8px;
  text-decoration:none;color:var(--tinta-media);font-size:.9rem}
.pagination .page-numbers:hover{border-color:var(--medio);color:var(--medio)}
.pagination .page-numbers.current{background:var(--medio);border-color:var(--medio);color:#fff}
.screen-reader-text{position:absolute;left:-9999px}


/* ---- Temario ------------------------------------------------------------
   Abierto y completo. Quien esconde el temario suele ser porque no lo tiene, y
   el opositor lo sabe. Publicarlo es la prueba mas barata de que existe. */
.temario{display:grid;gap:.55rem;max-width:52rem}
.tema{border:1px solid var(--linea);border-radius:8px;background:var(--papel);overflow:hidden}
.tema summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.15rem;cursor:pointer;list-style:none;transition:background .14s}
.tema summary::-webkit-details-marker{display:none}
.tema summary:hover{background:var(--papel-alt)}
.tema__b{font:var(--p-med) 1rem/1.3 var(--f-txt);color:var(--tinta)}
.tema__n{font-size:.8rem;color:var(--tinta-suave);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tema[open] summary{border-bottom:1px solid var(--linea-fina);background:var(--papel-alt)}
.tema__lista{margin:0;padding:.9rem 1.15rem .9rem 2.6rem;display:grid;gap:.4rem;
  font-size:.94rem;color:var(--tinta-media);line-height:1.5}
.tema__lista li::marker{color:var(--tinta-suave);font-variant-numeric:tabular-nums}

/* ---- Como es el examen -------------------------------------------------- */
.examen{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:10px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.examen__d{background:var(--papel);padding:1.3rem 1.2rem;display:grid;gap:.2rem;align-content:start}
.examen__d b{font:var(--p-tit) 1.75rem/1 var(--f-tit);color:var(--medio);
  font-variant-numeric:tabular-nums}
.examen__d span{font-size:.86rem;color:var(--tinta);font-weight:var(--p-med)}
.examen__d i{font-style:normal;font-size:.8rem;color:var(--tinta-suave);line-height:1.4}

/* ---- Cabecera blanca: hamburguesa, logo centrado, acceso ----------------
   Tres zonas de ancho fijo a los lados y el logo en el centro exacto, que es lo
   que hace que la marca quede centrada de verdad y no "casi". */
.barra-logo .caja{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1rem;padding-block:1.05rem}
.barra-logo .logo{justify-self:center}
.barra-logo .logo img{height:2.9rem;width:auto;display:block;transition:height .22s ease}
.cabecera.esta-fija .barra-logo .logo img{height:2.2rem}

.abre-mega{justify-self:start;display:inline-flex;align-items:center;gap:.7rem;
  background:none;border:0;padding:.5rem .2rem;cursor:pointer;color:var(--tinta);
  font:var(--p-med) .95rem/1 var(--f-txt)}
.abre-mega__icono{display:grid;gap:4px;width:21px}
.abre-mega__icono i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .24s ease,opacity .18s ease}
.abre-mega[aria-expanded="true"] .abre-mega__icono i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.abre-mega[aria-expanded="true"] .abre-mega__icono i:nth-child(2){opacity:0}
.abre-mega[aria-expanded="true"] .abre-mega__icono i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.abre-mega:hover{color:var(--medio)}

.acceso{justify-self:end;display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;color:var(--tinta);font:var(--p-med) .95rem/1 var(--f-txt)}
.acceso span{text-decoration:underline;text-underline-offset:4px}
.acceso:hover{color:var(--medio)}

/* El panel general.
   Vive DENTRO de la cabecera fija y en flujo normal, entre la barra blanca y la
   barra de lineas. Antes iba posicionado con coordenadas de pagina y recolocado
   en cada scroll: con la cabecera fija se despegaba y perseguia al cursor. Al
   estar dentro, se mueve con ella sin una sola linea de JS de posicion.

   Va en blanco y no en oscuro. La referencia lo pone oscuro porque debajo tiene
   la pagina; aqui debajo esta la barra de lineas, que ya es oscura, y dos
   oscuros seguidos se emborronan. */
.barra-logo{position:relative;z-index:61}
.mega{position:absolute;top:100%;left:0;right:0;z-index:60;
  background:var(--papel);color:var(--tinta);overflow:hidden;max-height:0;
  border-top:1px solid var(--linea);box-shadow:0 22px 44px rgba(0,27,45,.18);
  transition:max-height .34s cubic-bezier(.4,0,.2,1)}
.mega[hidden]{display:block;max-height:0;border-top-color:transparent}
.mega.abierto{max-height:34rem;border-top-color:var(--linea)}
.mega .caja{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:2.4rem;
  align-items:start;padding-block:2.4rem 2.8rem}
.mega__col{align-self:stretch}
.mega__col{border-left:1px solid var(--linea);padding-left:2rem}
.mega__col:first-child{border-left:0;padding-left:0}
.mega__t{font:var(--p-med) .78rem/1 var(--f-txt);text-transform:uppercase;letter-spacing:.09em;
  color:var(--tinta-suave);margin:0 0 1rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--linea)}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.mega a{color:var(--tinta-media);text-decoration:none;font-size:.95rem;transition:color .14s}
.mega a:hover{color:var(--medio);text-decoration:underline;text-underline-offset:4px}
.mega__lineas{gap:.7rem}
.mega__lineas a{font:var(--p-med) 1.05rem/1.2 var(--f-tit);color:var(--noche)}
.mega__lineas a:hover{color:var(--medio)}
.mega__dir{color:var(--tinta-suave);font-size:.9rem;line-height:1.5}
.mega .btn{display:inline-flex}
.mega .btn--claro{background:var(--medio);color:#fff;border-color:var(--medio)}
.mega .btn--claro:hover{background:var(--oscuro);border-color:var(--oscuro)}
@media(max-width:60rem){
  .mega .caja{grid-template-columns:1fr;gap:1.8rem}
  .mega__col{border-left:0;padding-left:0}
  .mega.abierto{max-height:80vh;overflow-y:auto}
  .abre-mega__txt,.acceso span{display:none}
  .barra-logo .logo img{height:2.3rem}
}


/* ---- Video de fondo del hero -------------------------------------------
   El iframe se escala a 16:9 sobre el centro del hero y se recorta por los
   lados: es la unica forma de cubrir cualquier proporcion sin deformarlo. El
   velo oscuro va encima para que el titular se lea siempre, pase lo que pase en
   el fotograma de debajo. */
.hero--video{position:relative;overflow:hidden;isolation:isolate}
.hero__video{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero__video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0}
.hero__velo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,27,45,calc(var(--velo,.55) + .12)) 0%,
    rgba(0,27,45,var(--velo,.55)) 45%,rgba(0,27,45,calc(var(--velo,.55) + .18)) 100%)}
@media (prefers-reduced-motion:reduce){.hero__video{display:none}}


/* Los dos filtros del buscador de oposicion. Van encima de la caja de texto
   porque la mayoria llega sabiendo su familia antes que el nombre exacto. */
.busca__filtros{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
.busca__filtros label{display:grid;gap:.3rem;font:var(--p-med) .76rem/1 var(--f-txt);
  text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-suave)}
.busca__filtros select{padding:.6rem .7rem;border:1px solid var(--linea);border-radius:8px;
  font:var(--p-txt) .95rem/1.3 var(--f-txt);color:var(--tinta);background:var(--papel)}
.busca__filtros select:focus{outline:0;border-color:var(--medio);
  box-shadow:0 0 0 3px rgba(43,97,151,.14)}
@media(max-width:38rem){.busca__filtros{grid-template-columns:1fr}}


/* ---- Cuenta atras de convocatoria --------------------------------------
   La urgencia viene de una fecha del boletin, no de un contador que se reinicia
   al recargar. Si la fecha pasa, el bloque desaparece solo. */
.cuenta{background:var(--noche);color:#fff;padding-block:2.6rem}
.cuenta .caja{display:grid;grid-template-columns:1fr auto;gap:2.4rem;align-items:center}
.cuenta h2{font:var(--p-tit) clamp(1.35rem,2.4vw,1.9rem)/1.2 var(--f-tit);margin:.3rem 0 .5rem}
.cuenta .rot{color:rgba(255,255,255,.55)}
.cuenta__txt p{color:rgba(255,255,255,.8);margin:0;max-width:34rem}
.cuenta__reloj{display:grid;grid-template-columns:repeat(3,auto);gap:.9rem;justify-items:center}
.cuenta__reloj > div{background:rgba(255,255,255,.1);border-radius:8px;padding:.7rem 1rem;
  min-width:4.6rem;text-align:center}
.cuenta__reloj b{display:block;font:var(--p-tit) 1.9rem/1 var(--f-tit);
  font-variant-numeric:tabular-nums}
.cuenta__reloj span{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:rgba(255,255,255,.6)}
.cuenta__que{grid-column:1/-1;text-align:center;font-size:.84rem;
  color:rgba(255,255,255,.6);margin:.2rem 0 0}
.cuenta__reloj .btn{grid-column:1/-1;margin-top:.6rem;width:100%;justify-content:center}
.cuenta__fuente{font-size:.78rem;color:rgba(255,255,255,.42);margin:1.4rem 0 0}
@media(max-width:60rem){.cuenta .caja{grid-template-columns:1fr}}

/* ---- Recurso gratuito a cambio del correo ------------------------------ */
.iman{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:start}
.iman__form{background:var(--papel);border:1px solid var(--linea);border-radius:12px;
  padding:1.6rem 1.5rem;box-shadow:0 10px 28px rgba(0,27,45,.07)}
.iman__form .form{gap:.9rem}
.iman__form .btn{width:100%;justify-content:center}
@media(max-width:60rem){.iman{grid-template-columns:1fr;gap:2rem}}

/* === generado: areas.css + figma.css ===
   No editar aqui. */

/* ===========================================================================
   Kuma 2026 · color por línea formativa

   Cinco colores, uno por línea, medidos del Figma del diseñador y verificados
   en las cinco páginas de categoría: cada una usa el suyo como acento
   dominante sobre la base azul de marca.

   Esto sustituye a los 17 tonos que había antes, derivados recorriendo la
   rueda cromática desde el azul. Aquello era una gradación decorativa; esto es
   un código con significado, y es el que el diseño usa de verdad.

   Oposiciones NO tiene color propio: usa el azul de marca. Es la línea
   principal del centro, no una categoría más.
   =========================================================================== */

:root{
  --linea-oposiciones:#3797CA;  /* azul de marca · 34 usos en su página */
  --linea-fe:#308461;           /* Formación para el Empleo   · 27 */
  --linea-fp:#8F4A32;           /* Formación Profesional      · 43 */
  --linea-fs:#8F324A;           /* Formación Superior         · 26 */
  --linea-fi:#8F6D32;           /* Formación InCompany        · 38 */
}

/* La página de cada línea tiñe su acento. El resto del diseño no cambia: el
   color marca de qué línea estás, no repinta la página. */
.l-oposiciones{--area:var(--linea-oposiciones)}
.l-empleo,.l-fe{--area:var(--linea-fe)}
.l-fp{--area:var(--linea-fp)}
.l-superior,.l-fs{--area:var(--linea-fs)}
.l-incompany,.l-fi{--area:var(--linea-fi)}

/* Por defecto, azul de marca: una página sin línea asignada no queda sin color. */
:root{--area:var(--linea-oposiciones)}

/* ===========================================================================
   Kuma 2026 · la maqueta del Figma

   Escrita DESDE el export del plugin de Figma, no a ojo. Cada valor sale del
   HTML que genera ese export; lo que no está ahí, no está aquí.

   Sustituye por completo a la version anterior, que iba parcheando la hoja del
   tema seccion a seccion. Ese era el problema: el tema se construyo para OTRO
   diseño y cada regla que no se anulaba explicitamente se colaba.
   =========================================================================== */

:root{
  --fg-caja:1248px;    /* max-width del contenedor, del export */
  --fg-texto:824px;    /* columna de texto centrado */
  --fg-ficha:294px;
  --fg-aire:96px;      /* padding vertical de seccion */
  --fg-aire-osc:92px;
  --fg-hueco:48px;
  --fg-radio:4px;
}

/* ── borron y cuenta nueva ──────────────────────────────────────────────
   La hoja del tema se escribio para OTRO diseño, y su problema no eran las
   reglas que yo veia sino las que NO veia: rellenos, huecos, bordes y fuentes
   que se colaban por todo lo que no anulaba explicitamente. Perseguirlas una a
   una fue semanas de trabajo y no llego a ninguna parte.

   Asi que aqui se neutralizan de golpe en las secciones que este fichero pinta.
   Lo que venga despues es lo unico que decide. La cabecera, el menu y el pie no
   se tocan: no vienen en el export y siguen dependiendo de la hoja del tema.  */
:where(.sec, .sec *, .hero, .hero *, .datos-tira, .datos-tira *){
  font-family:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
  letter-spacing:normal;
}
/* :where() vale CERO de especificidad. Sin el, el reset ganaba a mis propias
   reglas de mas abajo y las borraba: la tarjeta se quedaba sin sombra, el
   zocalo sin color y los titulares con el tamaño heredado. */
:where(.sec .cab, .sec .fichas, .sec .ficha, .sec .ficha *,
       .datos-tira > .caja, .datos-tira > .caja *){
  margin:0; padding:0; border:0; background:none; box-shadow:none;
  text-transform:none; font-size:inherit; line-height:inherit;
}
:where(.sec img, .hero img){ display:block; max-width:100%; }

/* ── tipografia ─────────────────────────────────────────────────────────
   Escala completa del export. Ni una interpolacion: 39/20/16/13 con sus
   interlineados exactos y SIN espaciado entre letras, que es donde yo metia
   un .14em que el diseño no tiene. */
.sec,.hero,.datos-tira{ font-family:"Source Sans 3",system-ui,sans-serif; }

.cab h2,.sec h2{ font-size:39px; line-height:46.8px; font-weight:700;
                 letter-spacing:normal; margin:0; color:var(--color-text-primary);
                 text-wrap:balance; }
.cab h2 em,.sec h2 em{ font-style:normal; color:var(--color-bg-Secondary); }

/* El rotulo es 700 y sin espaciado. Lo tenia en 400 con .14em. */
.sec .rot, .datos-tira .rot, .cab .rot, p.rot{ font-size:13px; line-height:15.6px; font-weight:700; letter-spacing:normal;
      color:var(--color-text-secondary); margin:0 0 4px; text-transform:none; }

/* :not(.rot) porque el rotulo TAMBIEN es un <p> dentro de .cab, y esta regla
   le ganaba en especificidad y lo pintaba a 20px. */
.cab > p:not(.rot){ font-size:20px; line-height:24px; font-weight:400;
          color:var(--color-text-muted); margin:8px auto 0; max-width:var(--fg-texto); }

/* ── secciones ─────────────────────────────────────────────────────────── */
.sec{ padding-block:var(--fg-aire); position:relative; }
.sec > .caja{ width:min(100% - 2 * clamp(1.25rem,5vw,3.5rem), var(--fg-caja));
              max-width:none; padding-inline:0; margin-inline:auto; }
.cab{ max-width:var(--fg-texto); margin-inline:auto;
      margin-block-end:var(--fg-hueco); text-align:center; }

/* ── tarjetas ───────────────────────────────────────────────────────────
   Anatomia exacta del export: zocalo de color detras (282x353), foto de 219
   con velo diagonal, cuerpo 16/20/20/20 y enlace subrayado. */
.fichas{ display:grid; gap:24px; align-items:start;
         grid-template-columns:repeat(auto-fit,minmax(var(--fg-ficha),1fr)); }
@media (min-width:1100px){ .fichas{ grid-template-columns:repeat(4,1fr); } }

.ficha{ position:relative; display:flex; flex-direction:column;
        padding:0; gap:0; border:0; border-radius:var(--fg-radio);
        background:#fff; box-shadow:0 0 16px rgba(11,28,40,.10);
        text-decoration:none; color:inherit; overflow:visible;
        transition:transform .18s ease, box-shadow .18s ease; }
.ficha:hover{ transform:translateY(-3px); box-shadow:0 4px 24px rgba(11,28,40,.16); }
.ficha__zocalo{ position:absolute; left:0; top:0; width:282px; height:353px;
                background:var(--ins,var(--color-line-oposiciones));
                border-radius:var(--fg-radio); z-index:0; }
.ficha > *:not(.ficha__zocalo){ position:relative; z-index:1; }

.ficha__top{ position:relative; display:block; overflow:hidden;
             border-radius:var(--fg-radio) var(--fg-radio) 0 0; }
.ficha__top::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
                    background:linear-gradient(45deg, rgba(255,255,255,0) 0%,
                               color-mix(in srgb, var(--ins,transparent) 55%, transparent) 100%); }
.ficha__img{ display:block; width:100%; height:219px; object-fit:cover;
             background:var(--color-border-Subtle-Invert); }

/* La insignia: cuadro de 32x32 a 23px del borde, con la K al lado. */
.ficha__ins{ position:absolute; top:23px; right:40px; z-index:2;
             display:flex; align-items:center; justify-content:center;
             width:32px; height:32px; background:var(--ins,var(--color-line-oposiciones));
             color:#fff; font-size:20px; line-height:1; font-weight:700; }
.ficha__ins::after{ content:"K"; position:absolute; left:24px; top:-23px; z-index:-1;
                    width:48px; height:77px; display:flex; align-items:center;
                    justify-content:center; color:#fff; font-size:46px; font-weight:700;
                    line-height:1; text-shadow:0 1px 6px rgba(11,28,40,.35); }

.ficha h3{ font-size:20px; line-height:24px; font-weight:700; margin:0;
           padding:16px 20px 0; color:var(--color-text-primary); }
.ficha__meta{ padding:0 20px; font-size:16px; line-height:normal; font-weight:400;
              color:var(--color-text-muted); }
.ficha__pie{ margin-top:auto; padding:16px 20px 20px; }
.ficha .enlace{ display:inline-flex; align-items:center; gap:8px;
                padding-block:6px; border-bottom:1px solid var(--color-border-strong);
                font-size:16px; line-height:19.2px; font-weight:400;
                color:var(--color-text-link); }

/* ── boton ─────────────────────────────────────────────────────────────── */
.sec__acc{ display:flex; justify-content:center; margin-top:var(--fg-hueco); }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 24px;
      border-radius:999px; background:var(--color-bg-inverse); color:#fff;
      font-size:16px; line-height:19.2px; font-weight:400; text-decoration:none;
      border:0; transition:background .18s ease; }
.btn:hover{ background:var(--color-line-oposiciones); }
.btn--linea{ background:transparent; color:inherit; border:1px solid currentColor; }

/* ── cifras ────────────────────────────────────────────────────────────── */
.datos-tira{ padding-block:64px;
             background:linear-gradient(180deg,var(--color-bg-surface-subtle) 0%,#F6FAFD 100%); }
.datos-tira > .cab{ padding-inline:clamp(1.25rem,5vw,3.5rem); }
/* Los dos rotulos del Home NO son del mismo color: el de la franja de cifras va
   en el azul oscuro de linea y el de las tarjetas en el azul de enlace. */
.datos-tira .rot{ color:var(--color-line-oposiciones); }
.datos-tira > .caja{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
                     width:min(100% - 2 * clamp(1.25rem,5vw,3.5rem), var(--fg-caja));
                     margin-inline:auto; }
.datos-tira > .caja > div{ display:flex; align-items:baseline; gap:8px; }
/* Cifra y rotulo son la MISMA linea de 16px: la cifra en 700 y el resto en 400. */
.datos-tira b{ font-size:16px; line-height:19.2px; font-weight:700;
               color:var(--color-text-primary); }
.datos-tira span{ font-size:16px; line-height:19.2px; font-weight:400;
                  letter-spacing:normal; text-transform:none;
                  color:var(--color-text-primary); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:768px; display:grid; place-items:center;
       text-align:center; color:#fff; background:var(--color-bg-inverse); overflow:clip; }
.hero--video::after{ content:none; }
.hero__video,.hero__foto{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__video iframe{ position:absolute; top:50%; left:50%; width:100vw; height:56.25vw;
                     min-height:100%; min-width:177.78vh; transform:translate(-50%,-50%);
                     border:0; pointer-events:none; }
.hero__velo{ position:absolute; inset:0; z-index:1; }
.hero > .caja{ position:relative; z-index:2; max-width:var(--fg-texto);
               padding-inline:clamp(1.25rem,5vw,3.5rem); }
.hero h1{ font-size:39px; line-height:46.8px; font-weight:700; letter-spacing:normal;
          margin:0; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--color-bg-Secondary); }
.hero p{ font-size:20px; line-height:24px; margin:24px auto 0; max-width:var(--fg-texto);
         color:var(--color-text-inverse-muted); }

/* ── destacado a sangre con foto en diagonal ───────────────────────────── */
.sec.tiene-media{ background:var(--color-bg-inverse); color:#fff;
                  padding-block:var(--fg-aire-osc); overflow:clip; }
.sec.tiene-media > .caja{ position:static; display:grid; gap:0; align-items:center;
                          max-width:none; padding-inline:0;
                          grid-template-columns:
                            minmax(0, calc(max(0px,(100vw - var(--fg-caja))/2) + 560px))
                            minmax(0, 1fr); }
.sec.tiene-media > .caja > div:first-child{ position:relative; z-index:2;
  padding-left:max(clamp(1.25rem,5vw,3.5rem), calc((100vw - var(--fg-caja))/2));
  padding-right:clamp(1.5rem,3vw,3rem); min-width:0; }
.sec.tiene-media .emp__media{ position:absolute; inset:0 0 0 38%; z-index:1;
                              aspect-ratio:auto; border-radius:0; margin:0;
                              clip-path:polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.sec.tiene-media .emp__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.sec.tiene-media h2{ color:#fff; }
.sec.tiene-media h2 em{ color:var(--color-bg-Secondary); }
.sec.tiene-media > .caja > div > p:not(.rot){ color:var(--color-text-inverse-muted);
                                    font-size:16px; line-height:19.2px;
                                    max-width:46ch; margin:16px 0 0; }
.sec.tiene-media .rot{ display:inline-block; background:var(--color-line-incompany);
                       color:#fff; font-size:13px; line-height:15.6px; font-weight:400;
                       padding:5px 9px; border-radius:3px; margin:0 0 16px; }
.sec.tiene-media .emp__acc{ margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; }
.sec.tiene-media .btn{ background:#fff; color:var(--color-text-link); }

/* ── fondo de foto en una seccion ──────────────────────────────────────── */
.sec--foto{ isolation:isolate; }
.sec--foto > .fondo{ position:absolute; inset:0; z-index:-2; width:100%; height:100%;
                     object-fit:cover; }
.sec--foto::before{ content:""; position:absolute; inset:0; z-index:-1;
                    background:linear-gradient(180deg,rgba(231,241,248,.92),rgba(246,250,253,.96)); }

/* Una seccion con titular pero sin filas no ocupa el aire de una llena. */
.sec:has(> .caja > .cab:only-child){ padding-block:56px; }
.sec:has(> .caja > .cab:only-child) .cab{ margin-block-end:0; }

@media (max-width:860px){
  :root{ --fg-aire:64px; --fg-aire-osc:64px; --fg-hueco:32px; }
  .cab h2,.sec h2{ font-size:30px; line-height:36px; }
  .hero{ min-height:560px; }
  .sec.tiene-media > .caja{ grid-template-columns:1fr; }
  .sec.tiene-media .emp__media{ position:relative; inset:auto; clip-path:none;
                                aspect-ratio:16/9; margin-top:32px; }
}


/* ── diferencias que saco el comparador ─────────────────────────────────
   Medidas enfrentando cada texto contra el export, no a ojo. */

/* La etiqueta de linea del destacado: 13px y blanca, no 16 y palida. */
.sec.tiene-media .rot{ font-size:13px; line-height:15.6px; color:#fff; }

/* El enlace secundario del destacado va en azul de enlace, no en tinta. */
.sec.tiene-media .enlace,.sec.tiene-media a.enlace{ color:var(--color-text-link) !important; }

/* Los testimonios: 20px/700 en blanco y centrados. Salian a 14px/500 en tinta
   y alineados a la izquierda, que es el estilo por defecto del tema. */
/* El bloque emite .ops > .op > footer > .op__quien > b, no lo que yo suponia.
   El nombre del testimonio es ese <b>, y en el diseño es 20px/700 en blanco. */
.sec:has(.ops){ background:var(--color-bg-inverse); color:#fff; }
.sec:has(.ops) .cab h2,.sec:has(.ops) .cab > p,.sec:has(.ops) .rot{ color:#fff; }
.ops{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.op{ text-align:center; }
.op__quien b{ font-size:20px; line-height:24px; font-weight:700; color:#fff;
              text-align:center; display:block; }
.op__quien span{ font-size:16px; line-height:19.2px; font-weight:400;
                 color:var(--color-text-inverse-muted); }
.op > p{ font-size:16px; line-height:19.2px; color:var(--color-text-inverse-muted); }


/* ── rejilla de tarjetas del export ─────────────────────────────────────
   La TARJETA ya no se estiliza aqui: su marcado viene copiado del export con
   sus estilos en linea (inc/ficha-figma.php). Aqui solo va la rejilla, que en
   el diseño son cuatro de 294 con 24 de hueco dentro de los 1248.
   Medido: x = 59, 377, 695, 1013. */
.fichas-fx{ display:grid; gap:24px; align-items:start;
            grid-template-columns:repeat(auto-fit,minmax(294px,1fr)); }
@media (min-width:1100px){ .fichas-fx{ grid-template-columns:repeat(4,294px);
                                       justify-content:center; } }
.ficha-fx{ display:block; text-decoration:none; }


/* ===========================================================================
   Kuma 2026 · tokens del sistema de diseño

   Sacados del export del propio Figma, con los NOMBRES que les puso el
   diseñador. No son una interpretación ni una medición mía: son las
   variables del fichero.

   Corrigen una que yo había deducido mal: la línea de Oposiciones es el
   azul oscuro #2B6C97, no el azul de marca. El #3797CA es el color de
   enlace (--color-text-link), que es otra cosa.
   =========================================================================== */

:root{
  --color-accent-emphasis:#0B1C28;
  --color-accent-on-accent:#FFFFFF;
  --color-bg-Secondary:#3797CA;
  --color-bg-canvas:#FFFFFF;
  --color-bg-inverse:#0B1C28;
  --color-bg-surface:#FFFFFF;
  --color-bg-surface-subtle:#E7F1F8;
  --color-border-Invert:#E7F1F8;
  --color-border-Subtle-Invert:#EAEBEE;
  --color-border-strong:#3797CA;
  --color-line-empleo:#308461;
  --color-line-fp:#8F4A32;
  --color-line-incompany:#8F6D32;
  --color-line-oposiciones:#2B6C97;
  --color-line-oposiciones-bg:#E7F1F8;
  --color-line-superior:#8F324A;
  --color-text-inverse:#FFFFFF;
  --color-text-inverse-muted:#E7F1F8;
  --color-text-link:#3797CA;
  --color-text-muted:#494B50;
  --color-text-primary:#0B1C28;
  --color-text-secondary:#3797CA;
}

/* Puentes con los nombres que ya usa el tema, para no reescribir la hoja. */
:root{
  --claro:var(--color-text-link);
  --medio:var(--color-line-oposiciones);
  --noche:var(--color-bg-inverse);
  --tinta:var(--color-text-primary);
  --tinta-media:var(--color-text-muted);
  --papel-alt:var(--color-bg-surface-subtle);
  --papel-hueco:var(--color-border-Subtle-Invert);
  --linea-oposiciones:var(--color-line-oposiciones);
  --linea-fe:var(--color-line-empleo);
  --linea-fp:var(--color-line-fp);
  --linea-fs:var(--color-line-superior);
  --linea-fi:var(--color-line-incompany);
}

/* ── tipografía ─────────────────────────────────────────────────────────
   Cuatro diferencias globales con el diseño, y son las que hacían que
   pareciesen dos webs distintas por mucho que se ajustara cada sección:

     titulares   el tema usaba "Clother"; el Figma usa Source Sans 3 en TODO
                 (67 de 68 declaraciones del export)
     cuerpo      18px  ->  16px
     peso        600   ->  700
     espaciado   -.02em en titulares  ->  ninguno

   Van aquí, en los tokens, para no ir persiguiéndolas selector a selector. */
:root{
  --f-tit:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",system-ui,sans-serif;
  --f-txt:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",system-ui,sans-serif;
  --p-tit:700;
}
body{ font-size:16px; line-height:1.2; }
h1,h2,h3,h4{ font-family:var(--f-tit); font-weight:700; letter-spacing:0; }