/* ════════════════════════════════════════════════════════════════════
   CEDIC · estilos compartidos del sitio público

   Lo usan todas las páginas nuevas. Hasta ahora cada página llevaba sus
   estilos dentro —bien para una o dos— pero con siete páginas que
   comparten cabecera, pie y paleta, tenerlo repetido significa que
   cualquier retoque hay que hacerlo siete veces y que a la séptima se
   olvida. Un archivo aparte cuesta una petición más y la evita.

   La paleta es la misma del boletín, las reservas y la intranet, para
   que el sitio se lea como uno solo y no como piezas pegadas.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --papel:#F2F4FA; --carta:#FFFFFF; --hundido:#F7F9FD;
  --tinta:#10162B; --gris:#5B6479; --tenue:#8A93A8; --linea:#DCE1EF;
  --azul:#354D93; --azul-suave:rgba(53,77,147,.10);
  --verde:#1C7A55; --rojo:#9B2C2C;
  --noche:#10162B;
  --ancho:1080px;
}
@media (prefers-color-scheme: dark){
  :root{
    --papel:#0B0F1C; --carta:#141A2B; --hundido:#10162B;
    --tinta:#F2F4FA; --gris:#A6B0C6; --tenue:#7B8399; --linea:#232B42;
    --azul:#7B93DC; --azul-suave:rgba(123,147,220,.14);
    --verde:#2E9E71; --rojo:#B84545;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none !important}

/* Color de enlace por defecto.
   Sin esta regla, cualquier <a> que no caiga bajo un selector propio
   —los del recuadro de llamada, por ejemplo— se queda con el azul de
   fábrica del navegador: #0000EE, pensado para papel blanco y
   prácticamente invisible sobre el fondo de noche. Es un fallo que
   reaparece cada vez que se añade un enlace en un sitio nuevo, así que
   se corta aquí, en la base, y no enlace a enlace. */
a{color:var(--azul)}

/* ── Cabecera ─────────────────────────────────────────────────── */
.cabecera{
  background:var(--noche); position:sticky; top:0; z-index:40;
  border-bottom:1px solid rgba(147,165,221,.12);
}
.cabecera .interior{
  max-width:var(--ancho); margin:0 auto; padding:13px 22px;
  display:flex; align-items:center; gap:16px;
}
/* Alto fijo y ancho libre. Así, el día que cambie el logo, sirve
   cualquier proporción: uno más cuadrado o más alargado se coloca solo
   sin deformarse ni romper la cabecera. Con un ancho fijo habría que
   venir a tocar esto. */
.cabecera img{display:block; height:30px; width:auto; max-width:220px; border:0;}
.cabecera a.marca{display:inline-block; line-height:0; border:0; text-decoration:none; flex:0 0 auto;}
.cabecera a.marca:hover{opacity:.85}
.cabecera a.marca:focus-visible{outline:2px solid #93A5DD; outline-offset:4px}

.menu{display:flex; align-items:center; gap:2px; margin-left:auto;}
.menu a{
  color:#B9C6EA; font-size:14px; text-decoration:none;
  padding:8px 12px; border-radius:7px; white-space:nowrap;
}
.menu a:hover{background:rgba(147,165,221,.12); color:#fff}
.menu a[aria-current="page"]{color:#fff; font-weight:600; background:rgba(147,165,221,.16)}
.menu a:focus-visible{outline:2px solid #93A5DD; outline-offset:2px}
.menu a.accion{
  background:var(--azul); color:#fff; font-weight:600; margin-left:8px;
  padding:9px 18px;
}
.menu a.accion:hover{background:var(--azul); opacity:.9}

.hamburguesa{
  display:none; margin-left:auto; background:transparent;
  border:1px solid rgba(147,165,221,.3); border-radius:8px;
  color:#B9C6EA; font-family:inherit; font-size:14px;
  padding:9px 14px; cursor:pointer; min-height:40px;
}
.hamburguesa:focus-visible{outline:2px solid #93A5DD; outline-offset:2px}

@media (max-width:880px){
  .hamburguesa{display:block}
  .menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--noche); flex-direction:column; align-items:stretch;
    gap:0; padding:8px 14px 16px; margin:0;
    border-bottom:1px solid rgba(147,165,221,.12);
  }
  .menu.abierto{display:flex}
  .menu a{padding:12px 10px; font-size:15px; border-radius:8px;}
  .menu a.accion{margin:8px 0 0; text-align:center}
}

/* ── Estructura de página ─────────────────────────────────────── */
main{max-width:var(--ancho); margin:0 auto; padding:0 22px 72px;}
.estrecho{max-width:760px}

.portadilla{padding:48px 0 34px;}
.portadilla h1{
  margin:0 0 12px; font-size:clamp(28px,5vw,40px); font-weight:700;
  letter-spacing:-.022em; line-height:1.16; text-wrap:balance;
}
.portadilla p{margin:0; color:var(--gris); font-size:17.5px; max-width:62ch;}

/* Las migas van en gris y no en el tono tenue: a 12.5px, el tenue se
   queda en 2.8 a 1 sobre el papel claro, por debajo del mínimo legible.
   El tenue sirve para adornos, no para texto que alguien va a leer. */
.migas{
  font-size:12.5px; color:var(--gris); margin:0 0 14px;
  display:flex; gap:7px; align-items:center; flex-wrap:wrap;
}
.migas a{color:var(--gris); text-decoration:none}
.migas a:hover{color:var(--azul); text-decoration:underline}

/* ── Tarjetas ─────────────────────────────────────────────────── */
.rejilla{display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:620px){ .rejilla.dos{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .rejilla.tres{grid-template-columns:repeat(3,1fr)} }

.tarjeta{
  background:var(--carta); border:1px solid var(--linea); border-radius:14px;
  padding:24px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s ease;
}
.tarjeta.enlazable:hover{border-color:var(--azul)}
.tarjeta h2,.tarjeta h3{
  margin:0; font-size:17.5px; font-weight:650; line-height:1.35;
  letter-spacing:-.008em; text-wrap:balance;
}
.tarjeta p{margin:0; color:var(--gris); font-size:14.5px; line-height:1.62;}
.tarjeta .etiqueta{
  align-self:flex-start; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--azul); background:var(--azul-suave);
  padding:3px 9px; border-radius:5px;
}
.tarjeta a{color:var(--azul); text-decoration:none; font-weight:600; font-size:14px;}
.tarjeta a:hover{text-decoration:underline}

/* ── El logo de un convenio ──────────────────────────────────────────
   Una pastilla blanca de altura fija con el logo centrado dentro. La
   altura la pone la pastilla y no la imagen, así que da igual que un
   logo sea apaisado y otro casi cuadrado: ninguno mueve la tarjeta ni
   deja la rejilla descuadrada.

   `object-fit:contain` lo encaja entero sin deformarlo. Deformar el
   logo de otra empresa para que cuadre es, además de feo, faltar al
   acuerdo que esa página anuncia.

   Blanca en los dos modos a propósito: los logos de terceros se
   diseñan para fondo claro y sobre el fondo oscuro desaparecerían.
   El borde en modo noche evita que la pastilla parezca un recorte. */
.logo-convenio{
  align-self:flex-start;
  height:58px; width:auto; max-width:100%;
  padding:10px 16px; border-radius:10px;
  background:#FFFFFF; border:1px solid var(--linea);
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box;
}
.logo-convenio img{
  max-height:100%; max-width:220px; width:auto; height:auto;
  object-fit:contain; display:block;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .logo-convenio{border-color:rgba(255,255,255,.14)}
}

.icono{
  width:42px; height:42px; border-radius:11px; flex:0 0 auto;
  background:var(--azul-suave); color:var(--azul);
  display:flex; align-items:center; justify-content:center;
}
.icono svg{width:21px; height:21px; display:block}

/* ── Botones ──────────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:9px; font-size:15px; font-weight:600;
  text-decoration:none; font-family:inherit; cursor:pointer; border:1px solid transparent;
  min-height:46px;
}
.boton.primario{background:var(--azul); color:#fff}
.boton.primario:hover{opacity:.92}
.boton.secundario{background:var(--carta); color:var(--tinta); border-color:var(--linea)}
.boton.secundario:hover{border-color:var(--azul)}
.boton:focus-visible{outline:2px solid var(--azul); outline-offset:3px}
.botones{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;}

/* ── Llamada de cierre ────────────────────────────────────────── */
.llamada{
  margin-top:52px; padding:32px 30px; border-radius:16px;
  background:var(--carta); border:1px solid var(--linea);
  border-left:3px solid var(--azul);
}
.llamada h2{margin:0 0 8px; font-size:21px; font-weight:700; letter-spacing:-.012em;}
.llamada p{margin:0 0 18px; color:var(--gris); font-size:15.5px; max-width:58ch;}

/* ── Estados ──────────────────────────────────────────────────── */
.estado{
  background:var(--carta); border:1px dashed var(--linea); border-radius:14px;
  padding:38px 26px; text-align:center;
}
.estado h2{margin:0 0 8px; font-size:17px; font-weight:650}
.estado p{margin:0 auto; color:var(--gris); font-size:14.5px; max-width:46ch}
.estado a{color:var(--azul); font-weight:600; text-decoration:none}
.estado a:hover{text-decoration:underline}

/* Mientras carga, se pintan bloques del tamaño aproximado del
   contenido real. Evita que la página salte cuando llegan los datos,
   que es lo que hace que un sitio se sienta mal hecho aunque sea
   rápido. */
.hueso{
  background:var(--carta); border:1px solid var(--linea); border-radius:14px;
  padding:24px; min-height:150px;
}
.hueso div{
  height:11px; border-radius:6px; background:var(--linea);
  margin-bottom:10px; opacity:.7;
}
.hueso div:nth-child(1){width:45%; height:15px; margin-bottom:16px}
.hueso div:nth-child(3){width:85%}
.hueso div:nth-child(4){width:60%}
@media (prefers-reduced-motion:no-preference){
  .hueso div{animation:latir 1.4s ease-in-out infinite}
  @keyframes latir{0%,100%{opacity:.45} 50%{opacity:.85}}
}

/* ── Pie ──────────────────────────────────────────────────────── */
.pie{
  background:var(--noche); color:#B9C6EA; margin-top:auto;
  padding:44px 22px 30px;
}
.pie .interior{
  max-width:var(--ancho); margin:0 auto;
  display:grid; gap:28px; grid-template-columns:1fr;
}
@media (min-width:720px){ .pie .interior{grid-template-columns:1.4fr 1fr 1fr} }
.pie h3{
  margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:#7f8db8;
}
.pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.pie a{color:#B9C6EA; text-decoration:none; font-size:14px;}
.pie a:hover{color:#fff; text-decoration:underline}
.pie a:focus-visible{outline:2px solid #93A5DD; outline-offset:2px}
.pie .lema{font-size:14px; line-height:1.6; margin:12px 0 0; color:#8e9cc4; max-width:40ch;}
.pie img{height:30px; width:auto; max-width:220px; display:block}
.pie .abajo{
  max-width:var(--ancho); margin:28px auto 0; padding-top:20px;
  border-top:1px solid rgba(147,165,221,.14);
  font-size:12.5px; color:#7f8db8;
  display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
}

body{display:flex; flex-direction:column; min-height:100vh}
main{flex:1 0 auto; width:100%}

/* ── Carta de promesa ─────────────────────────────────────────────
   Una carta se lee seguido, no se escanea: columna estrecha, línea
   más alta y párrafos con aire. Es el único sitio del sitio donde el
   texto largo es el producto. */
.carta{max-width:66ch; font-size:17px; line-height:1.78;}
.carta h2{
  margin:40px 0 12px; font-size:20px; font-weight:700;
  letter-spacing:-.012em; line-height:1.3; text-wrap:balance;
}
.carta h3{margin:30px 0 10px; font-size:17px; font-weight:650; line-height:1.35;}
.carta p{margin:0 0 20px;}
.carta strong{font-weight:650; color:var(--tinta);}
.carta ul,.carta ol{margin:0 0 20px; padding-left:24px;}
.carta li{margin-bottom:10px;}
.carta li::marker{color:var(--tenue)}
.carta a{color:var(--azul); text-decoration:underline; text-underline-offset:2px;}
.carta blockquote{
  margin:0 0 20px; padding:2px 0 2px 20px;
  border-left:3px solid var(--azul); color:var(--gris);
}
.carta hr{margin:34px 0; border:0; border-top:1px solid var(--linea);}
.carta code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:var(--hundido); border:1px solid var(--linea);
  padding:1px 6px; border-radius:4px;
}

.firma{
  max-width:66ch; margin-top:8px; padding-top:22px;
  border-top:1px solid var(--linea);
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
}
.firma strong{display:block; font-size:16px; font-weight:650;}
.firma span{font-size:14px; color:var(--gris);}
.firma .fecha{font-size:13px; color:var(--gris);}

/* ── Bloques de texto (quiénes somos) ─────────────────────────────── */
.bloque{margin-bottom:34px; max-width:68ch;}
.bloque > h2{
  margin:0 0 10px; font-size:19px; font-weight:700;
  letter-spacing:-.012em; line-height:1.3;
}
.bloque > p{margin:0 0 12px; color:var(--gris); font-size:16.5px; line-height:1.72;}
.bloque.destacado{
  max-width:none; background:var(--carta); border:1px solid var(--linea);
  border-left:3px solid var(--azul); border-radius:0 14px 14px 0;
  padding:26px 28px;
}
.bloque.destacado > p{color:var(--tinta); font-size:17.5px;}
.bloque .rejilla{max-width:none; margin-top:16px;}
.bloque .rejilla .bloque{margin-bottom:0}
a.enlace-bloque{
  display:inline-block; color:var(--azul); font-weight:600;
  font-size:14.5px; text-decoration:none;
}
a.enlace-bloque:hover{text-decoration:underline}
a.enlace-bloque:focus-visible{outline:2px solid var(--azul); outline-offset:3px}

.rejilla.valores .tarjeta{padding:20px 22px;}
.rejilla.valores h3{margin:0; font-size:16px; font-weight:650;}

/* ── Portada ──────────────────────────────────────────────────────── */
.portada .hero{padding:66px 0 48px; max-width:800px;}
.sobretitulo{
  margin:0 0 14px; font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--azul);
}
.portada h1{
  margin:0 0 18px; font-size:clamp(31px,5.6vw,48px); font-weight:700;
  letter-spacing:-.028em; line-height:1.1; text-wrap:balance;
}
.hero-texto{margin:0 0 26px; font-size:18.5px; line-height:1.68; color:var(--gris); max-width:60ch;}

.cifras{
  display:flex; gap:40px; flex-wrap:wrap; margin:42px 0 0; padding:26px 0 0;
  border-top:1px solid var(--linea);
}
.cifras dt{font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--azul); margin:0;}
.cifras dd{margin:2px 0 0; font-size:13.5px; color:var(--gris); max-width:18ch;}

.franja{
  background:var(--carta); border:1px solid var(--linea);
  border-left:3px solid var(--azul); border-radius:0 16px 16px 0;
  padding:28px 30px; margin-bottom:56px;
}
.franja h2{margin:0 0 9px; font-size:19px; font-weight:700; letter-spacing:-.012em;}
.franja p{margin:0 0 14px; color:var(--gris); font-size:16.5px; line-height:1.7; max-width:66ch;}

.seccion{margin-bottom:60px;}

/* ═══ El vídeo de la portada ════════════════════════════════════════
   La carátula es un botón del propio sitio, no un iframe. Mientras
   nadie lo pulse, aquí dentro no hay nada de Google. */
.seccion-entrada{
  margin:0 0 20px; max-width:62ch;
  color:var(--gris); font-size:16px; line-height:1.65;
}
.video-marco{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--linea); background:var(--hundido);
}
.video-marco iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.video-caratula{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; cursor:pointer; display:block;
  /* Si no hay imagen de carátula, esto es lo que se ve. */
  background:linear-gradient(140deg, var(--noche) 0%, var(--azul) 140%);
}
.video-caratula img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Un velo para que el triángulo se lea sobre cualquier fotograma. */
.video-caratula::after{
  content:""; position:absolute; inset:0;
  background:rgba(16,22,43,.24); transition:background .15s ease;
}
.video-caratula:hover::after{background:rgba(16,22,43,.10)}
.video-caratula:focus-visible{outline:3px solid var(--azul); outline-offset:3px}

.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; z-index:1;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 24px rgba(0,0,0,.26);
  transition:transform .15s ease;
}
/* El triángulo, con bordes: sin imagen y sin otra petición. */
.video-play::before{
  content:""; position:absolute; top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-style:solid; border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--noche);
}
.video-caratula:hover .video-play{transform:translate(-50%,-50%) scale(1.07)}

/* Mientras el reproductor se descarga. La carátula sigue puesta —un
   hueco en blanco esperando se lee como avería— y el triángulo se
   convierte en un aro girando. */
.video-caratula.cargando{cursor:progress}
.video-caratula.cargando .video-play::before{display:none}
.video-caratula.cargando .video-play{
  background:transparent; box-shadow:none;
  border:4px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:girar .9s linear infinite;
}
@keyframes girar{to{transform:translate(-50%,-50%) rotate(360deg)}}

.video-cargando{
  position:absolute; left:50%; bottom:18%; transform:translateX(-50%);
  z-index:1; white-space:nowrap;
  font-size:13px; font-weight:600; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* Sin animación para quien la pidió desactivada: el aro se queda
   quieto, pero el texto sigue diciendo qué está pasando. */
@media (prefers-reduced-motion:reduce){
  .video-caratula.cargando .video-play{animation:none}
}

.video-nota{
  margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--tenue);
}

@media (prefers-reduced-motion:reduce){
  .video-caratula::after, .video-play{transition:none}
  .video-caratula:hover .video-play{transform:translate(-50%,-50%)}
}
@media (max-width:560px){
  .video-play{width:60px; height:60px}
  .video-play::before{border-width:11px 0 11px 17px}
}
.titular{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.titular h2{margin:0; font-size:23px; font-weight:700; letter-spacing:-.018em;}
.titular a{color:var(--azul); text-decoration:none; font-weight:600; font-size:14.5px; white-space:nowrap;}
.titular a:hover{text-decoration:underline}
.titular a:focus-visible{outline:2px solid var(--azul); outline-offset:3px}

a.tarjeta{text-decoration:none; color:inherit;}
a.tarjeta h3{color:var(--tinta)}

.tarjeta.caso .resultado{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--linea);
  color:var(--azul); font-weight:650; font-size:14.5px;
}

.seccion.dos-columnas{display:grid; gap:28px; grid-template-columns:1fr;}
@media (min-width:860px){ .seccion.dos-columnas{grid-template-columns:1.25fr 1fr; align-items:start;} }
.seccion.dos-columnas h2{margin:0 0 12px; font-size:23px; font-weight:700; letter-spacing:-.018em;}
.seccion.dos-columnas > div > p{margin:0 0 20px; color:var(--gris); font-size:16.5px; line-height:1.7;}

.lista-simple{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:7px;}
.lista-simple li{font-size:14px; color:var(--gris);}
.lista-simple strong{color:var(--tinta); font-weight:650;}

.llamada.grande{padding:40px 34px;}
.llamada.grande h2{font-size:24px}
.llamada.grande p{font-size:16.5px}

/* ═══ Portafolio: barra de filtros ══════════════════════════════════
   Los botones son <button> de verdad y no enlaces disfrazados: no
   llevan a ninguna parte, solo cambian lo que se ve. Quien navega con
   teclado llega a ellos con Tab y los activa con Espacio, como espera.
   El estado se marca con aria-pressed, y el CSS lo lee de ahí en vez
   de con una clase aparte, para que nunca se contradigan. */
.filtros{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;}
.filtro{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  padding:9px 15px; min-height:38px; border-radius:999px;
  border:1px solid var(--linea); background:var(--carta); color:var(--gris);
}
.filtro:hover{border-color:var(--azul); color:var(--tinta)}
.filtro[aria-pressed="true"]{background:var(--azul); border-color:var(--azul); color:#fff}
.filtro:focus-visible{outline:2px solid var(--azul); outline-offset:3px}

.cuenta{margin:-8px 0 26px; font-size:14px; color:var(--gris);}

/* ═══ Currículum ════════════════════════════════════════════════════
   Dos columnas en pantalla ancha —el periodo a la izquierda, el resto
   a la derecha— y una sola apilada en el móvil. La línea vertical es
   decorativa, así que se dibuja con un borde y no con un elemento: no
   aparece en el árbol de accesibilidad ni se lee en voz alta. */
.portadilla .meta{margin:8px 0 0; font-size:14.5px; color:var(--gris);}
.portadilla .botones{margin-top:18px;}

.seccion.cv{margin-bottom:46px;}
.seccion.cv > h2{
  margin:0 0 20px; font-size:19px; font-weight:700; letter-spacing:-.012em;
  padding-bottom:10px; border-bottom:1px solid var(--linea);
}

.linea{display:flex; flex-direction:column; gap:26px;}
.entrada{display:grid; gap:4px 26px; grid-template-columns:1fr;}
@media (min-width:760px){
  .entrada{grid-template-columns:168px 1fr;}
  .entrada > div{border-left:1px solid var(--linea); padding-left:24px;}
}
.entrada .periodo{
  margin:0; font-size:13.5px; color:var(--gris); font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.entrada h3{margin:0 0 3px; font-size:16.5px; font-weight:650; line-height:1.4; color:var(--tinta);}
.entrada .donde{margin:0; font-size:14.5px; color:var(--azul); font-weight:600;}
.entrada ul{margin:11px 0 0; padding-left:19px;}
.entrada li{margin-bottom:7px; font-size:14.5px; line-height:1.66; color:var(--gris);}
.entrada li::marker{color:var(--tenue)}

.competencias{margin:0; display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:760px){ .competencias{gap:16px 26px; grid-template-columns:minmax(0,220px) 1fr;} }
.competencias dt{font-size:15px; font-weight:650; color:var(--tinta); margin:0 0 3px;}
.competencias dd{margin:0; font-size:14.5px; line-height:1.6; color:var(--gris);}

.fichas{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.fichas li{
  font-size:13.5px; font-weight:600; color:var(--gris);
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--linea); background:var(--carta);
}

/* ═══ Cursos: tarjeta de producto ═══════════════════════════════════ */
.tarjeta.producto{display:flex; flex-direction:column;}
.tarjeta.producto p{flex:1 1 auto;}
.pie-producto{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--linea);
}
.pie-producto .precio{
  font-size:20px; font-weight:700; letter-spacing:-.015em; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.pie-producto .boton{padding:10px 18px; font-size:14px;}

/* ═══ Ventana de compra ═════════════════════════════════════════════
   <dialog> trae de fábrica el foco atrapado dentro, el cierre con
   Escape y el fondo inerte. Escribir todo eso a mano es la vía rápida
   a una ventana que un lector de pantalla no sabe anunciar. */
dialog{
  border:0; border-radius:16px; padding:0; width:min(92vw,470px);
  background:var(--carta); color:var(--tinta);
  box-shadow:0 24px 60px rgba(16,22,43,.28);
}
dialog::backdrop{background:rgba(16,22,43,.55)}
dialog form{padding:24px 26px 26px; display:flex; flex-direction:column;}

.ventana-cabeza{display:flex; align-items:flex-start; gap:14px; margin-bottom:4px;}
.ventana-cabeza h2{
  margin:0; font-size:18.5px; font-weight:700; letter-spacing:-.014em;
  line-height:1.32; flex:1 1 auto;
}
.cerrar{
  font:inherit; font-size:26px; line-height:1; cursor:pointer;
  background:none; border:0; color:var(--tenue);
  width:36px; height:36px; border-radius:9px; flex:0 0 auto; margin:-6px -8px 0 0;
}
.cerrar:hover{background:var(--hundido); color:var(--tinta)}
.cerrar:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

.resumen-compra{
  margin:0 0 18px; font-size:14.5px; color:var(--azul); font-weight:600;
}

dialog label{
  display:block; font-size:13.5px; font-weight:650; margin:14px 0 6px; color:var(--tinta);
}
dialog input{
  font:inherit; font-size:15.5px; width:100%; box-sizing:border-box;
  padding:11px 13px; min-height:44px; border-radius:10px;
  border:1px solid var(--linea); background:var(--papel); color:var(--tinta);
}
dialog input:focus{outline:2px solid var(--azul); outline-offset:1px; border-color:var(--azul)}
.pista{margin:7px 0 0; font-size:13px; color:var(--tenue);}

.boton.ancho{width:100%; justify-content:center; margin-top:20px; min-height:46px;}

/* Los avisos se colocan ARRIBA del formulario, no junto al botón: si
   salieran abajo, en un teléfono quedarían fuera de la pantalla justo
   cuando hay algo que leer. */
.recado{
  margin:0 0 4px; padding:11px 14px; border-radius:10px;
  font-size:14px; line-height:1.55; border:1px solid transparent;
}
.recado.error{background:#F6E5E5; border-color:#E4C4C4; color:#7E2222;}
.recado.aviso-tono{background:#F8EFDD; border-color:#E8D6B0; color:#6E4708;}
.recado.bien{background:#E4F2EB; border-color:#BFDDCE; color:#145A3E;}

dialog .aviso{
  margin:18px 0 0; font-size:11.5px; line-height:1.6; color:var(--tenue);
}
dialog .aviso a{color:var(--tenue); text-decoration:underline;}

/* Los tres tonos de aviso llevan color propio y no variables de la
   paleta, porque su trabajo es destacar sobre ella. Eso obliga a
   repetirlos para el modo oscuro: los de arriba sobre fondo de noche
   serían tres manchas claras ilegibles. */
@media (prefers-color-scheme: dark){
  .recado.error{background:#2B1717; border-color:#4A2626; color:#E4A0A0;}
  .recado.aviso-tono{background:#2B2113; border-color:#4A3B1C; color:#E0BE7C;}
  .recado.bien{background:#12291F; border-color:#1E4433; color:#79D3AC;}
  dialog{box-shadow:0 24px 60px rgba(0,0,0,.6)}
  dialog::backdrop{background:rgba(3,6,14,.72)}
}

/* ═══ Mis compras ═══════════════════════════════════════════════════ */
.tarjeta.compra{margin-bottom:16px;}
.tarjeta.compra h2{margin:0 0 14px; font-size:17px; font-weight:650;}

.descargas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.descargas li{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 14px; border-radius:10px;
  background:var(--hundido); border:1px solid var(--linea);
}
.etiqueta-archivo{flex:1 1 180px; font-size:14.5px; color:var(--tinta); font-weight:600;}
.descargas .boton{padding:9px 16px; font-size:13.5px; min-height:40px;}
.nota-archivo{flex:1 1 100%; font-size:13px; color:var(--rojo);}

/* ═══ Botones primarios en modo oscuro ══════════════════════════════
   En claro, el botón primario es azul oscuro con texto blanco y se lee
   de sobra. En oscuro la paleta aclara el azul —tiene que hacerlo, o
   desaparecería contra el fondo de noche— y entonces el texto blanco
   encima queda en 2.98 a 1, por debajo del mínimo de 4.5 que hace falta
   para leer con comodidad.

   La solución no es oscurecer el botón, que lo devolvería al fondo,
   sino invertir la tinta: texto de noche sobre el azul claro sube a
   6:1. Es la misma lógica que usan los botones de acento sobre fondo
   oscuro en cualquier interfaz bien hecha. */
@media (prefers-color-scheme: dark){
  .boton.primario, .menu a.accion, .filtro[aria-pressed="true"]{color:var(--noche)}
  .boton.primario:hover, .menu a.accion:hover{opacity:.88}
}

/* El renglón inferior del pie: derechos a la izquierda, correo y acceso
   interno a la derecha. En el móvil se apila, como todo lo demás. */
.abajo-derecha{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.pie .acceso-interno{
  color:#8e9cc4; border:1px solid #2A3453; border-radius:8px;
  padding:6px 13px; font-size:13px; font-weight:600;
}
.pie .acceso-interno:hover{color:#fff; border-color:#4A5B8C; text-decoration:none}