/* ARCHIVO GENERADO por herramientas/construir.py — no lo edites aquí: edita fuente/estilos/
   Piezas: 01-base.css, 02-controles.css, 03-cabecera.css, 04-portada.css, 05-listado.css, 06-fila.css, 07-ventanas.css, 08-perfil.css, 09-pie.css, 10-movimiento.css, 11-accesibilidad.css */

/* ─────────── fuente/estilos/01-base.css ─────────── */
/* =====================================================================
   Base: reinicio, letra, enlaces, foco, utilidades, aparición al bajar
   ===================================================================== */

/* =====================================================================
   Film Fest Monitor — estilos
   ===================================================================== */
/* Colores, sombras y medidas: en tokens.css (se carga antes que esta hoja) */
* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-padding-top: calc(var(--header) + 72px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Archivo, system-ui, sans-serif; font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

a { color: inherit; }

button, input, select { font: inherit; color: inherit; }

svg { display: block; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.display { font-stretch: 62%; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }

::selection { background: var(--ink); color: var(--bg); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; transition: top .2s; }

.skip:focus { top: 12px; }

/* Vistas: portada / listado completo */
body.is-todas .home-only { display: none !important; }

body:not(.is-todas) .todas-only { display: none !important; }

.select { position: relative; display: inline-flex; }

.select select {
  -webkit-appearance: none; appearance: none; height: 34px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); padding: 0 36px 0 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}

.select select:hover { border-color: var(--ink); }

.select::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; pointer-events: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg);
}

ul.rows { list-style: none; margin: 0; padding: 0; }

ol.plazos { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }

ol.plazos li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; color: var(--ink-2); }

/* Sin rayas: el plazo siguiente se distingue con un fondo verde suave */
ol.plazos li { border-radius: 8px; }

ol.plazos li.past { color: var(--muted); text-decoration: line-through; }

ol.plazos li.next { font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--brand) 10%, transparent); margin: 2px -10px; padding-inline: 10px; }

ol.plazos time { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Aparición al hacer scroll (solo si hay JavaScript y no se ha pedido reducir el movimiento) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }

.js [data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  body:not(.is-todas) .fab { display: none; }
  .steps, .legend { grid-template-columns: 1fr; gap: 16px; }
}

/* =====================================================================
   Cambio de modo día/noche: un fundido de la página entera hecho por el navegador
   (View Transitions) y, mientras dura, ninguna otra transición, para que no se
   animen a la vez cientos de colores.
   ===================================================================== */
.cambiando-tema *, .cambiando-tema *::before, .cambiando-tema *::after { transition: none !important; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }

@media (max-width: 400px) {
  .select select { padding-right: 30px; }
  .select::after { right: 12px; }
}

/* =====================================================================
   BASE ESTABLE (pensada para crecer a cientos o miles de convocatorias)
   ===================================================================== */
/* 1) Sin salto al cargar: el cuerpo aparece con un fundido cuando la letra ya está lista */
html.cargando body { opacity: 0; }

body { transition: opacity .25s ease; }

/* 2) Centrado real del texto en botones y etiquetas (el JS mete cada texto en .t):
      la caja del texto se recorta a la altura de las mayúsculas y así el flex la centra de verdad */
.t { display: block; text-box: trim-both cap alphabetic; }

body:not(.is-todas) .v2 #lista, body.v2:not(.is-todas) #lista { padding-top: clamp(96px, 16vh, 160px); }

a.v2-next:hover .v2-go { color: var(--ink); }

a.v2-next:hover .v2-go svg { transform: translateX(4px); }

@media (max-width: 760px) {
  body.v2:not(.is-todas) #lista { padding-top: 72px; }
}

a.v2-next:hover .v2-date { color: var(--open); }

/* Primer instante tras cargar o recargar: nada se anima ni se desplaza */
html.primera *, html.primera *::before, html.primera *::after { transition: none !important; }

/* La página no se mueve a los lados cuando aparece o desaparece la barra de scroll:
   el hueco de la barra queda siempre reservado */
html { scrollbar-gutter: stable; }

/* =====================================================================
   Portada al volver de «Todas» o del perfil: aparece con un fundido suave escalonado
   ===================================================================== */
.entra-portada .hero .live,
.entra-portada .hero .v2-h1,
.entra-portada .hero .v2-lead,
.entra-portada .hero .search,
.entra-portada .hero .tools,
.entra-portada .v2-proof-wrap { animation: portadaEntra .7s var(--ease) both; }

.entra-portada .hero .v2-h1 { animation-delay: .06s; }

.entra-portada .hero .v2-lead { animation-delay: .12s; }

.entra-portada .hero .search { animation-delay: .18s; }

.entra-portada .hero .tools { animation-delay: .22s; }

.entra-portada .v2-proof-wrap { animation-delay: .28s; }

/* Llegar a una sección desde «Todas», el calendario o el perfil: fundido escalonado como en la portada */
.entra-seccion .wrap > * { animation: portadaEntra .7s var(--ease) both; }

.entra-seccion .wrap > :nth-child(2) { animation-delay: .07s; }

.entra-seccion .wrap > :nth-child(3) { animation-delay: .14s; }

.entra-seccion .wrap > :nth-child(n+4) { animation-delay: .2s; }

/* =====================================================================
   Aparición escalonada al llegar a «Todas», «Calendario» o al perfil (como la portada)
   ===================================================================== */
.entra-listado > .wrap > *, .entra-perfil .profile > .wrap > * { animation: portadaEntra .7s var(--ease) both; }

.entra-listado > .wrap > :nth-child(2), .entra-perfil .profile > .wrap > :nth-child(2) { animation-delay: .06s; }

.entra-listado > .wrap > :nth-child(3), .entra-perfil .profile > .wrap > :nth-child(3) { animation-delay: .12s; }

.entra-listado > .wrap > :nth-child(n+4) { animation-delay: .18s; }

/* «Los cinco tipos»: cada fila es un enlace entero. Al pasar el ratón se tiñe la fila y
   «Ver N» se rellena como un botón; con teclado, un borde verde marca la fila. */
a.tfila { color: inherit; text-decoration: none; cursor: pointer; outline: none; }

a.tfila:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }

a.tfila:hover .tf-link, a.tfila:focus-visible .tf-link { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* =====================================================================
   «¿PUEDO PRESENTARME?» — asistente paso a paso
   Una pregunta por pantalla, tarjetas grandes con icono y el número que encaja en cada una.
   ===================================================================== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Zona de pulsación mínima de 24×24 px (WCAG 2.5.8) ----------
   Los enlaces de texto pequeños ganan área hacia fuera (relleno + margen negativo): no se mueve nada. */
.foot-links a, .foot-links .link { padding-block: 3px; margin-block: -3px; }
/* Enlaces con margen propio: el área extra va en un ::after transparente (no toca márgenes ni rellenos) */
.dlg-mas { position: relative; }
.dlg-mas::after { content: ""; position: absolute; inset: -5px 0; }
/* Botones pequeños: un área invisible alrededor (::after) que también recibe el toque */
.help, .link.small { position: relative; }
.help::after, .link.small::after { content: ""; position: absolute; inset: -4px; }

/* ---------- Pulsar sin «rectángulo azul» (móvil) ----------
   Fuera el resaltado de toque del navegador y la selección de texto en lo que se pulsa
   (botones, tarjetas, píldoras…). El texto normal se sigue pudiendo copiar. El foco con teclado
   sigue viéndose (:focus-visible). */
html { -webkit-tap-highlight-color: transparent; }
button, .btn, [role="button"], summary, label, select, a.chip-link, a.btn, a.mini, a.chip, a.ficha-link, a.tfila, a.legend-card, a.v2-fork-card,
[data-toggle], [data-goto], [data-v], [data-tab], .fp-btn, .opt, .as-op, .as-chip, .pill-btn, .icon-btn {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* ─────────── fuente/estilos/02-controles.css ─────────── */
/* =====================================================================
   Controles reutilizables: botones, píldoras, chips, interruptores, campos
   ===================================================================== */

/* ---------- Botones genéricos ---------- */
/* Regla base de todos los botones: contenido centrado en los dos ejes con flex,
   separación fija entre icono y texto, y altura fija (el texto no la empuja). */
.btn, .pill-btn, .chip-link, .opt, .ptipo, .chip-x, .status, .seg button, .fab {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; line-height: 1;
}

.btn {
  gap: 8px; height: 36px; padding: 0 16px;
  border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background-color .15s, transform .15s, box-shadow .2s;
}

.btn > svg, .pill-btn > svg, .chip-link > svg, .fab > svg { display: block; flex: none; }

.btn:hover { border-color: var(--ink); }

.btn:active, .pill-btn:active, .icon-btn:active { transform: scale(.96); }

.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn.primary:hover { background: var(--ink); border-color: var(--ink); }

.btn.big { height: 46px; padding: 0 24px; font-size: 14px; font-weight: 700; }

.btn.big svg { transition: transform .25s var(--ease); }

.btn.big:hover svg { transform: translateX(4px); }

.btn.block { width: 100%; height: 46px; font-size: 14px; }

.btn svg { width: 16px; height: 16px; flex: none; }

.icon-btn {
  width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer; color: var(--ink-2);
  transition: border-color .15s, background-color .15s, color .15s, transform .15s, box-shadow .25s ease;
}

.icon-btn:hover { border-color: var(--ink); color: var(--ink); }

.icon-btn.ghost { border-color: transparent; background: transparent; }

.icon-btn.ghost:hover { background: var(--soft); }

.icon-btn svg { width: 16px; height: 16px; }

.link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }

.link:hover { color: var(--ink); }

.link.small { font-size: 12px; }

.danger { color: var(--closed); }

.chip-link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }

.chip-link span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: border-color .15s, background-color .15s, color .15s, transform .15s, box-shadow .25s ease;
}

.pill-btn:hover { border-color: var(--ink); }

.pill-btn[aria-pressed="true"], .pill-btn[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.pill-btn .n { font-size: 11px; line-height: 18px; height: 18px; background: var(--soft-2); color: var(--ink); border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }

.pill-btn svg { width: 14px; height: 14px; flex: none; }

.pill-btn .caret { transition: transform .3s var(--ease); }

.pill-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.seg { display: inline-flex; background: var(--soft); border-radius: 999px; padding: 3px; height: 34px; }

.seg button { border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1; color: var(--muted); transition: background-color .2s, color .2s; }

.seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.help { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }

.help:hover { color: var(--ink); border-color: var(--ink); }

.opts { display: flex; flex-wrap: wrap; gap: 6px; }

.opt { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; height: 30px; padding: 0 12px; font-size: 12.5px; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }

.opt:hover { border-color: var(--ink); }

.opt[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.chip-x { display: inline-flex; align-items: center; gap: 6px; height: 28px; background: var(--soft); border: 0; border-radius: 999px; padding: 0 12px; font-size: 13px; line-height: 1; cursor: pointer; animation: fadein .2s ease; }

.chip-x::after { content: "×"; font-size: 16px; color: var(--muted); }

.chip-x:hover { background: var(--soft-2); }

.status { display: inline-flex; align-items: center; justify-content: center; height: 22px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; padding: 0 10px; letter-spacing: .01em; white-space: nowrap; font-style: normal; justify-self: start; }

.chev { width: 18px; height: 18px; transition: transform .35s var(--ease); color: var(--muted); }

.star { width: 36px; height: 36px; margin-right: 6px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); display: grid; place-items: center; border-radius: 50%; transition: color .15s, background-color .15s; }

.star:hover { color: var(--ink); background: var(--soft-2); }

.star svg { width: 17px; height: 17px; }

.star[aria-pressed="true"] { color: var(--ink); }

.star[aria-pressed="true"] svg { fill: currentColor; animation: pop .35s var(--ease); }

.btn.strong { border: 1.5px solid var(--ink); font-weight: 650; }

.btn.strong:hover { background: var(--bg); }

.tag { font-size: 11px; line-height: 18px; border-radius: 999px; padding: 0 9px; color: var(--muted); background: var(--soft); }

.inline-form { display: flex; gap: 8px; }

.inline-form input { flex: 1; min-width: 0; height: 44px; border-radius: 999px; border: 1px solid var(--line); padding: 0 18px; font-size: 15px; }

.inline-form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--brand-soft); }

.inline-form .btn { height: 44px; }

.toggles { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 16px; }

.toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; font-size: 14px; background: var(--bg); cursor: pointer; }

.toggle + .toggle { border-top: 1px solid var(--line); }

.toggle span b { display: block; font-weight: 600; }

.toggle span small { color: var(--muted); font-size: 13px; }

.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--soft-2); position: relative; cursor: pointer; flex: none; transition: background-color .25s; margin: 0; }

.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sobre-color); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }

.switch:checked { background: var(--open); }

.switch:checked::after { transform: translateX(18px); }

.field { display: grid; gap: 6px; margin-bottom: 14px; }

.field label { font-size: 13px; font-weight: 600; }

.opt-label { color: var(--muted); font-weight: 400; }

.field input { height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0 16px; font-size: 16px; }

.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--brand-soft); }

@media (max-width: 760px) {
  .star { margin-top: 8px; }
  .btn.strong svg { display: none; }
  .inline-form { flex-direction: column; }
}

.pill-btn:hover, .opt:hover, .select select:hover, .btn:not(.primary):hover { border-color: color-mix(in srgb, var(--brand) 60%, var(--ink)); }

.chip-link:hover { background: var(--brand-soft); }

/* =====================================================================
   Brillo al pasar el ratón, con sentido:
   - Botones claros (fondo blanco, solo borde): halo verde de la marca.
   - Botones rellenos (fondo negro, o blanco en modo noche): sin halo; ya destacan solos.
   - Campana de avisos desactivados (roja): halo rojizo. Activados (verde): halo verde.
   El color del botón nunca cambia; solo aparece el halo debajo.
   ===================================================================== */
.btn, .pill-btn, .icon-btn { --halo: var(--brand); }

.btn:not(.primary):hover,
.pill-btn:not([aria-pressed="true"]):not([aria-expanded="true"]):hover,
.icon-btn:not(.ghost):hover {
  border-color: color-mix(in srgb, var(--halo) 60%, var(--ink));
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--halo) 85%, transparent), 0 0 0 1px color-mix(in srgb, var(--halo) 22%, transparent);
}

.btn.primary:hover, .pill-btn[aria-pressed="true"]:hover, .pill-btn[aria-expanded="true"]:hover, .fab:hover, .avatar:hover { box-shadow: none; }

.icon-btn.bell.off, #global-bell.off { --halo: var(--closed); }

.icon-btn.bell.on, #global-bell.on { --halo: var(--open); }

.icon-btn.bell.off:hover, #global-bell.off:hover { border-color: var(--closed); }

.icon-btn.bell.on:hover, #global-bell.on:hover { border-color: var(--open); }

/* Centrado óptico de botones con icono delante: el icono pesa menos que el texto
   (en «Requisitos» son tres puntitos), así que se quita un poco de aire a la izquierda. */
.btn:has(> svg:first-child) { padding-left: 13px; padding-right: 18px; }

@media (max-width: 400px) {
  .seg button { padding: 0 10px; }
}

/* Parpadeo al pasar el ratón por los accesos rápidos (Festivales, Laboratorios…).
   No cambia nada en la página: era el navegador repintando de golpe varias capas.
   1) El foco de luz verde ya no se mete bajo la cabecera (que difumina lo que tiene detrás):
      antes cada cambio de color en la portada obligaba a recalcular ese difuminado.
   2) La cabecera ya no usa el efecto de cristal esmerilado (backdrop-filter): en Chrome/Edge
      con Windows, según la tarjeta gráfica, hace parpadear la página entera. Ahora es sólida.
   3) Los accesos cambian a un color sólido ya calculado (no a una mezcla con transparencia). */
.chip-link { background-color: transparent; transition: background-color .2s ease, color .2s ease; }

.chip-link:hover { background-color: color-mix(in srgb, var(--brand) 10%, var(--bg)); color: var(--ink); }

.chip-link:hover span { color: var(--ink-2); }

.status .t, .chip-x .t, .seg button .t { line-height: 1; }

.inline-form input { background: var(--bg); }

@media (max-width: 760px) {
  .inline-form input { flex: none; height: 48px; }
  .inline-form .btn { height: 48px; }
}

@media (max-width: 760px) {
  /* =====================================================================
     BOTONES EN MÓVIL · todo centrado de verdad
     ===================================================================== */
  /* «Requisitos» oculta su icono en móvil: sin icono, el mismo margen a los dos lados
       (antes conservaba el hueco del icono y el texto quedaba 5 px desplazado) */
  .btn.strong:has(> svg:first-child) { padding: 0 16px; }
}

/* =====================================================================
   MEJORAS · buscador guiado, filtros nuevos, «Prepara tu inscripción»,
   calendario en cuadrícula, novedades y suscripción al calendario
   ===================================================================== */
/* «¿Puedo presentarme?» en la portada: destaca un poco sobre los otros dos */
.chip-buscador { cursor: pointer; font: inherit; background: color-mix(in srgb, var(--brand) 9%, var(--bg)); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important; }

.chip-buscador:hover { border-color: var(--brand) !important; }

.btn.small { height: 34px; padding: 0 12px; font-size: 12.5px; }

/* ─────────── fuente/estilos/03-cabecera.css ─────────── */
/* =====================================================================
   Cabecera fija: marca, menú, tema, cuenta, campana y su ventanita de avisos
   ===================================================================== */

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }

.top.scrolled { border-bottom-color: var(--line); }

.top .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header); gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }

/* Logo «F que reproduce»: la F toma el color del texto (negra de día, blanca de noche) y el play es verde */
.brand-logo { width: 34px; height: 34px; flex: none; color: var(--ink); overflow: visible; }

.brand-logo .bl-play { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease); }

/* Al pasar el ratón, el play avanza y crece un poco, como si arrancara la película (en unidades del dibujo de 64) */
.brand:hover .bl-play, .brand:focus-visible .bl-play { transform: translateX(6px) scale(1.12); }

.brand-name { font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 16px; white-space: nowrap; }

.top-right { display: flex; align-items: center; gap: 8px; }

.nav { display: flex; gap: 2px; margin-right: 6px; }

.nav a { text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 500; padding: 7px 11px; border-radius: 999px; transition: color .15s, background-color .15s; }

.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--soft); }

.menu-btn { display: none; }

.theme-ico-sun { display: none; }

:root[data-theme="dark"] .theme-ico-sun { display: block; }

:root[data-theme="dark"] .theme-ico-moon { display: none; }

.notify { margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 14px; border-radius: 12px; background: var(--soft); font-size: 13px; }

.notify > svg { width: 16px; height: 16px; flex: none; color: var(--ink-2); }

.notify p { margin: 0; flex: 1; color: var(--ink-2); line-height: 1.35; }

.notify.on { background: var(--open-tint); }

.notify.on > svg { color: var(--open); }

.account-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; }

.menu-links { display: grid; gap: 2px; margin-top: 36px; }

.menu-links a { font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; text-decoration: none; padding: 10px 0; }

.menu-links a:hover { color: var(--muted); }

#menu-account { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
}

@media (max-width: 760px) {
  .brand-logo { width: 29px; height: 29px; }
  .brand-name { font-size: 14px; letter-spacing: .08em; }
  .top-right { gap: 6px; }
  .top-right .btn-login span { display: none; }
  .top-right .btn-login { width: 36px; padding: 0; }
}

/* Campana de avisos junto a «Inscribirse» */
.bell.on { color: var(--open); border-color: color-mix(in srgb, var(--open) 45%, transparent); background: var(--open-tint); }

.bell.on:hover { border-color: var(--open); color: var(--open); }

.bell.on svg { fill: currentColor; fill-opacity: .18; animation: ring .6s var(--ease); }

.bell.off { color: var(--closed); border-color: color-mix(in srgb, var(--closed) 35%, transparent); }

.bell.off:hover { border-color: var(--closed); background: var(--closed-tint); color: var(--closed); }

/* Campana general (cabecera) y su panel */
.bell-wrap { position: relative; }

#global-bell.on { color: var(--open); border-color: color-mix(in srgb, var(--open) 45%, transparent); background: var(--open-tint); }

#global-bell.on svg { fill: currentColor; fill-opacity: .18; }

#global-bell.off { color: var(--closed); border-color: color-mix(in srgb, var(--closed) 35%, transparent); }

.pop {
  position: absolute; right: -8px; top: calc(100% + 10px); z-index: 40; width: min(560px, calc(100vw - 24px));
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: 20px; text-align: left; animation: drop .22s var(--ease); transform-origin: top right;
}

.pop h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }

.pop p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.pop p b { color: var(--ink); font-weight: 600; }

.pop .fine { margin: 12px 0 0; }

.pop-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-radius: 999px; padding: 4px 10px 4px 8px; margin-bottom: 12px; }

.pop-state svg { width: 14px; height: 14px; }

.pop-state.on { color: var(--open); background: var(--open-tint); }

.pop-state.off { color: var(--closed); background: var(--closed-tint); }

@media (max-width: 760px) {
  .bell-wrap { position: static; }
  .pop { right: 12px; top: calc(var(--header) - 4px); position: fixed; }
}

/* Tipos dentro de los avisos generales: activado = verde con ✓; desactivado = gris y tachado */
.pop-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; transition: opacity .2s; }

.pop-tipos.is-off { opacity: .55; }

/* Toques verdes de la marca */
.top.scrolled { box-shadow: 0 1px 0 0 var(--brand-soft); }

@media (max-width: 380px) {
  /* Móviles muy estrechos: que la cabecera quepa sin desplazamiento lateral */
  .brand { gap: 8px; }
  .brand-name { font-size: 12px; letter-spacing: .04em; }
  .top-right { gap: 4px; }
  .top-right .icon-btn, .top-right .btn-login, .avatar { width: 34px; height: 34px; }
}

@media (max-width: 760px) {
  /* Botón de perfil (solo icono): sin el margen pensado para «icono + texto» */
  .top-right .btn-login:has(> svg:first-child) { padding: 0; gap: 0; justify-content: center; }
}

/* Todos los botones redondos de la cabecera, idénticos */
.top-right .icon-btn:not(.menu-btn) { display: grid; place-items: center; padding: 0; }

.top-right .menu-btn { place-items: center; padding: 0; }

/* el menú sigue oculto en ordenador y visible en móvil */
.top-right svg { flex: none; }

/* ─────────── fuente/estilos/04-portada.css ─────────── */
/* =====================================================================
   Portada: titular, buscador, cifras, prueba de confianza, tipos, cómo funciona, boletín, novedades, Para ti
   ===================================================================== */

/* ---------- Portada ---------- */
.hero { position: relative; padding: 56px 0 40px; text-align: center; transition: padding .3s var(--ease); }

/* Foco de luz suave desde arriba: da profundidad sin añadir color */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 0%, color-mix(in srgb, var(--open) 13%, transparent), transparent 70%); }

body.is-todas .hero::before { display: none; }

body.is-todas .hero { padding: 24px 0 0; }

.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin-bottom: 28px; letter-spacing: .02em; padding: 6px 14px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, transparent); }

.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 2.4s ease-in-out infinite; }

/* Los tres números en una tarjeta con relieve, cada uno con su mini gráfico.
   overflow:hidden contiene cualquier brillo dentro de las esquinas redondeadas. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; max-width: 940px; margin: 0 auto 48px; padding: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 26px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px -36px rgba(10, 10, 20, .35); }

:root[data-theme="dark"] .stats { background: var(--soft); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); }

/* Buscador */
.search { position: relative; max-width: 1000px; margin: 0 auto; text-align: left; }

.search-box { position: relative; }

.search-box > svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--muted); pointer-events: none; }

.search input {
  width: 100%; height: 50px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--bg); font-size: 16px; padding: 0 60px 0 52px;
  --ring: transparent;
  box-shadow: 0 0 0 5px var(--ring), 0 14px 34px -24px rgba(10, 10, 20, .45);
  -webkit-appearance: none; appearance: none; transition: box-shadow .3s ease, border-color .3s ease, height .3s var(--ease), font-size .3s var(--ease);
}

body.is-todas .search input { height: 44px; font-size: 15px; }

.search input::-webkit-search-cancel-button { display: none; }

.search input::placeholder { color: var(--muted); }

/* Un único efecto, en la caja entera (no en el input), así el icono o la tecla «/» no lo cortan */
.search-box:hover input { --ring: var(--soft); }

.search input:focus, .search-box:hover input:focus { outline: none; --ring: var(--brand-soft); }

.search kbd { pointer-events: none; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 600 11px/1.5 Archivo, sans-serif; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 7px; }

.search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }

.search-clear:active { transform: translateY(-50%) scale(.96); }

.search.has-text kbd { display: none; }

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 25;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 6px; list-style: none; margin: 0; max-height: min(440px, 60vh); overflow: auto;
  transform-origin: top center; animation: drop .22s var(--ease);
}

.suggest .sg-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 10px 12px 4px; }

.suggest .sg-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }

.suggest .sg-item[aria-selected="true"], .suggest .sg-item:hover { background: var(--soft); }

.suggest .sg-item b { font-weight: 600; display: block; }

.suggest .sg-item small { color: var(--muted); font-size: 12px; }

.suggest .sg-all { display: block; text-align: center; padding: 10px; font-size: 14px; color: var(--muted); cursor: pointer; border-radius: 12px; }

.suggest .sg-all:hover { background: var(--soft); color: var(--ink); }

.suggest .sg-empty { padding: 16px 12px; color: var(--muted); font-size: 14px; }

.quick { display: flex; gap: 2px; }

/* ---------- Secciones de la portada ---------- */
.para-ti { padding: 0 0 72px; }

.para-ti .list-head { border-bottom-width: 1px; border-color: var(--line); }

.para-ti h2 { font-size: clamp(28px, 5vw, 40px); }

.tipos { padding: 64px 0; border-top: 1px solid var(--line); }

.tipos h2, .how h2 { margin: 0 0 28px; font-size: clamp(30px, 4.6vw, 44px); }

.tipos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.tipo-card { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); transition: border-color .25s, transform .35s var(--ease); }

/* Sombra precalculada en una capa que solo cambia de opacidad: no hay que repintarla en cada fotograma */
.tipo-card::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow); opacity: 0; transition: opacity .35s var(--ease); }

.tipos-grid { isolation: isolate; }

.tipo-card:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }

.tipo-card:hover::after { opacity: 1; }

.tipo-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; flex: none; }

.tipo-ico svg { width: 19px; height: 19px; }

.tipo-card .when { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); background: var(--soft); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }

.tipo-card h3 { margin: 0 0 10px; font-size: 28px; }

.tipo-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

.tc-cta::after, .tipos-list .tipo-card::after { display: none; }

.tipo-card .ej { font-size: 12px; color: var(--muted); margin-top: 8px; }

.tipos-list { display: grid; gap: 4px; margin-top: 16px; }

.tipos-list .tipo-card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px; border: 0; border-radius: 14px; }

.tipos-list .tipo-card:hover { transform: none; background: var(--soft); }

.tipos-list .tipo-card h3 { font-size: 22px; margin: 0 0 4px; }

.tipos-list .tipo-card p { margin: 6px 0 10px; font-size: 13.5px; }

.tipos-list .tipo-card .when { display: inline-block; margin-bottom: 8px; }

.tipos-list .gets { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.tipos-list .gets li { font-size: 13px; gap: 6px; }

.tipos-list .tipo-card .tipo-ico { flex: none; }

.how { background: var(--soft); padding: 64px 0; }

.how h2 { margin-bottom: 24px; }

.legend-title { margin: 40px 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

.legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.legend-card { position: relative; background: var(--bg); border-radius: 14px; padding: 16px; display: grid; gap: 10px; grid-template-rows: auto 1fr auto; justify-items: start;
  color: inherit; text-decoration: none; transition: transform .3s var(--ease); }

.legend-card p { margin: 0; font-size: 13px; color: var(--muted); }

/* Al pasar el ratón: un contorno y un brillo verdes muy suaves que aparecen solo con opacidad */
.legend-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--brand) 55%, transparent);
  opacity: 0; transition: opacity .3s ease; }

.legend-card:hover::after, .legend-card:focus-visible::after { opacity: 1; }

.lc-go { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); transition: color .2s; }

.lc-go svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }

.legend-card:hover .lc-go svg { transform: translateX(4px); }

.newsletter .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }

.newsletter h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 36px); }

.newsletter p { margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 960px) {
  /* ---------- Pantallas medianas y móvil ---------- */
  .legend { grid-template-columns: repeat(2, 1fr); }
  .tipos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .hero { padding-top: 36px; }
  .search input, body.is-todas .search input { height: 46px; font-size: 16px; padding-left: 44px; padding-right: 46px; }
  .stats { border-radius: 20px; margin-bottom: 36px; }
  .search-box > svg { left: 18px; }
  .search kbd { display: none; }
  .tipos-grid { grid-template-columns: 1fr; }
  .tipos-grid { gap: 12px; }
  .tipo-card { padding: 22px; border-radius: 18px; }
  .tipo-card h3 { font-size: 26px; }
  .legend { grid-template-columns: 1fr 1fr; gap: 8px; }
  .legend-card { padding: 14px; }
  .newsletter .wrap { grid-template-columns: 1fr; }
}

.suggest .sg-item[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--brand); }

/* Leyenda: cada tarjeta brilla con el color de su etiqueta */
.legend-card:has(.s-open) { --lc: var(--open); }

.legend-card:has(.s-soon) { --lc: var(--soon); --lc-text: var(--soon-strong); }

.legend-card:has(.s-closed), .legend-card:has(.s-pending) { --lc: var(--closed); }

.legend-card::after {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lc, var(--brand)) 55%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--lc, var(--brand)) 60%, transparent);
}

.legend-card:hover .lc-go { color: var(--lc-text, var(--lc, var(--brand))); }

/* Las tres columnas comparten filas (subgrid): las cifras, las etiquetas y los medidores
   quedan alineados entre sí aunque una etiqueta ocupe dos líneas, y el conjunto sigue centrado. */
.stats { grid-template-rows: auto auto auto; }

/* La portada/buscador es su propia capa (isolation) y, sin z-index, las filas del listado
   (que llevan animación y por eso crean capa) se pintaban encima de las sugerencias.
   La subimos por encima del listado y de su barra fija (15), pero por debajo de la cabecera (30). */
.hero { z-index: 20; }

/* =====================================================================
   Film Fest Monitor — estilos de la versión actual (se carga después de estilos.css)
   Orden del relato: qué es → por qué fiarte → qué urge → encuentra lo tuyo.
   ===================================================================== */
/* ---------- Portada: titular y subtítulo ---------- */
.v2 .hero { padding: 64px 0 28px; }

.v2-intro { max-width: 940px; margin: 0 auto; }

.v2 .live { margin-bottom: 26px; }

.v2-h1 { margin: 0 auto; max-width: 15ch; font-size: clamp(44px, 7.4vw, 96px); line-height: .9; letter-spacing: -.015em; text-wrap: balance; }

.v2-h1 em { font-style: normal; color: var(--brand-titulo); }

.v2-lead { margin: 22px auto 36px; max-width: 54ch; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

body.is-todas.v2 .hero { padding: 24px 0 0; }

/* Accesos por intención bajo el buscador: con icono, más presencia que los de tipo */
.v2-intent { gap: 6px; }

.v2-intent .chip-link { height: 36px; padding: 0 14px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); }

.v2-intent .chip-link svg { width: 16px; height: 16px; color: var(--brand); }

.v2-intent .chip-link:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }

/* ---------- Franja de prueba: ver «Tres tarjetas» más abajo ---------- */
.v2-proof { max-width: none; grid-template-rows: none; }

.v2-checks { list-style: none; margin: 0; padding: 0; display: grid; }

.v2-checks li { color: var(--ink-2); }

.v2-checks svg { color: var(--brand); }

.v2-checks b { color: var(--ink); font-weight: 650; }

/* ---------- Filas: «comprobado» siempre visible ---------- */
.v2-check { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--brand-ink); }

.v2-check svg { width: 13px; height: 13px; flex: none; color: var(--brand); }

.v2-note { color: var(--muted); font-style: italic; }

/* ---------- ¿Qué tienes entre manos? ---------- */
.v2-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.v2-fork-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 34px; border-radius: 22px; text-decoration: none; overflow: hidden; isolation: isolate; }

.v2-fork-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle closest-side at 85% 15%, color-mix(in srgb, var(--brand) 45%, transparent), transparent); }

.v2-fork-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); }

.v2-fork-card b { font-size: clamp(32px, 3.8vw, 46px); line-height: .92; }

.v2-fork-card p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 40ch; }

.v2-fork-go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }

.v2-fork-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }

.v2-fork-card:hover .v2-fork-go svg { transform: translateX(4px); }

/* ---------- Leyenda de tres colores ---------- */
.v2-legend { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) {
  /* ---------- Próximamente ---------- */
  .v2 .hero { padding-top: 36px; }
  .v2-lead { margin: 16px auto 26px; }
  .v2-fork { grid-template-columns: 1fr; }
  .v2-fork-card { padding: 26px; }
  .v2-legend { grid-template-columns: 1fr; }
  /* En móvil el titular no debe empujar el buscador fuera de la primera pantalla */
  /* Titular: como mucho 3 líneas en cualquier móvil (de 320 a 760 px) */
  .v2-h1 { font-size: clamp(26px, 8.7vw, 44px); max-width: none; }
  .v2 .live { margin-bottom: 18px; font-size: 11px; }
  .v2-lead { font-size: 14.5px; }
}

/* 4) Ninguna tarjeta se mueve al pasar el ratón (si se mueve, se escapa del cursor y vibra) */
.tipo-card:hover, .legend-card:hover, .v2-fork-card:hover { transform: none; }

/* =====================================================================
   PORTADA
   ===================================================================== */
/* Titular en tres líneas en escritorio, 8–10 px más pequeño */
.v2-h1 .l { display: inline; }

@media (min-width: 761px) {
  .v2-h1 { max-width: none; }
  .v2-h1 .l { display: block; }
}

/* La portada termina en las tres tarjetas; «Lo más urgente» es otro apartado más abajo */
.v2-proof-wrap { padding: 8px 0 0; }

.v2-proof { margin-bottom: 0; }

/* ---------- Tres tarjetas: etiqueta arriba y contenido centrado en el hueco ---------- */
.v2-proof { grid-template-columns: 1.15fr 1fr 1fr; }

.v2-card { position: relative; display: flex; flex-direction: column; padding: 26px 28px; text-decoration: none; color: inherit; min-width: 0; }

.v2-card + .v2-card { border-left: 1px solid var(--line); }

.v2-card .v2-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

.v2-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Próximo cierre: sin fondo verde; la fecha manda y una línea «Ver convocatoria →» invita */
.v2-date { font-size: clamp(48px, 5.4vw, 66px); line-height: .82; color: var(--ink); }

.v2-name { margin-top: 14px; font-size: 15.5px; font-weight: 650; line-height: 1.3; color: var(--ink); }

.v2-meta { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }

.v2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--open); box-shadow: 0 0 0 3px var(--open-tint); flex: none; }

.v2-go { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--ink-2); }

.v2-go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }

/* Ahora mismo: dos baldosas con el color de su estado */
.v2-tiles { flex-direction: row; align-items: stretch; gap: 10px; }

.v2-tile { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 18px 16px; border-radius: 16px; text-decoration: none; color: inherit;
  background: var(--tile-bg); border: 1px solid transparent; transition: border-color .2s ease, box-shadow .25s ease; }

.v2-tile.is-open { --tile-bg: var(--open-tint); --tile-c: var(--open); }

.v2-tile.is-soon { --tile-bg: var(--soon-tint); --tile-c: var(--soon-strong); }

.v2-tile b { font-size: 52px; line-height: .8; color: var(--tile-c); }

.v2-tile:hover { border-color: color-mix(in srgb, var(--tile-c) 55%, transparent); box-shadow: 0 10px 24px -16px var(--tile-c); }

/* Por qué fiarte: cada ✓ centrado con su línea de texto */
.v2-checks { gap: 14px; }

.v2-checks li { display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; }

.v2-checks svg { width: 16px; height: 16px; margin: 0; justify-self: center; }

@media (max-width: 760px) {
  .v2-proof { grid-template-columns: 1fr; }
  .v2-card { padding: 20px 22px; }
  .v2-card + .v2-card { border-left: 0; border-top: 1px solid var(--line); }
  .v2-body { padding-top: 14px; }
}

@media (min-width: 761px) {
  /* Cada línea del titular cabe siempre entera: el tamaño se ajusta al ancho de pantalla (tope 62 px) */
  .v2-intro { max-width: none; }
  .v2-h1 { font-size: clamp(34px, calc((100vw - 56px) / 15.8), 62px); }
  .v2-h1 .l { white-space: nowrap; }
}

/* Mismo aire arriba y abajo: el contenido queda en el centro exacto del hueco bajo la etiqueta */
.v2-body { padding: 16px 0; }

.v2-next .v2-body { padding-bottom: 8px; }

/* Ahora mismo: cifra y texto centrados en cada baldosa; el texto, más discreto */
.v2-tile { align-items: center; text-align: center; gap: 12px; }

.v2-tile span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); transition: color .2s ease; }

.v2-tile:hover span { color: var(--ink-2); }

/* Próximo cierre: al pasar el ratón por cualquier punto de la tarjeta no se subraya nada.
   La fecha toma el verde de «abierta» y la flecha de «Ver convocatoria» avanza. */
.v2-date { transition: color .3s ease; }

/* =====================================================================
   «¿Qué tienes entre manos?»: dos luces verdes difuminadas.
   - Arriba a la derecha, la que ya había, más grande (se corta con el borde).
   - Abajo a la izquierda, un círculo grande centrado en la esquina: solo se ve
     su cuarto superior derecho, desde media altura hasta pasado el «Ver… →».
   ===================================================================== */
.v2-fork-card::after {
  
  background:
    radial-gradient(circle 300px at 96% 4%, color-mix(in srgb, var(--brand) 42%, transparent), color-mix(in srgb, var(--brand) 14%, transparent) 45%, transparent 72%),
    radial-gradient(circle 440px at 0% 100%, color-mix(in srgb, var(--brand) 34%, transparent), color-mix(in srgb, var(--brand) 12%, transparent) 42%, transparent 70%);
  transition: opacity .5s ease;
}

.v2-fork-card:hover::after { opacity: 1; }

/* Modo noche: nada de blanco puro. Gris oscuro como la tarjeta «¿No sabes por dónde empezar?»,
   con un borde finísimo para separarlo del fondo y el texto claro. */
:root[data-theme="dark"] .v2-fork-card { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

:root[data-theme="dark"] .v2-fork-card p { color: var(--muted); }

:root[data-theme="dark"] .v2-fork-card:hover::after { opacity: .9; }

/* Boletín: tarjeta con la misma luz verde de la marca, y el campo de correo con su altura real */
.newsletter { border-bottom: 0; padding: 72px 0; }

.newsletter .wrap { position: relative; isolation: isolate; overflow: hidden; border-radius: 26px; padding: 44px 48px; background: var(--soft); max-width: 1088px; }

.newsletter .wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle 420px at 100% 100%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%); }

.newsletter p { margin-top: 10px; max-width: 46ch; line-height: 1.6; }

.newsletter .fine { margin-top: 12px; }

@media (max-width: 760px) {
  .newsletter { padding: 48px 0; }
  .newsletter .wrap { margin: 0 16px; padding: 28px 22px; border-radius: 20px; }
}

/* «¿Qué tienes entre manos?»: gris claro en modo día (como «¿No sabes por dónde empezar?»)
   y luces verdes más intensas en los dos modos */
.v2-fork-card { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.v2-fork-card p { color: var(--muted); }

.v2-fork-card::after, :root[data-theme="dark"] .v2-fork-card::after { opacity: .9; }

/* En modo día, el verde del antetítulo un punto más oscuro para que se lea bien sobre el gris claro */
:root:not([data-theme="dark"]) .v2-fork-k { color: var(--brand-ink); }

/* Corrección: en reposo, las luces como estaban; más intensas SOLO al pasar el ratón.
   ::after = luz normal · ::before = luz intensa, que aparece con un fundido en hover. */
.v2-fork-card::after, .v2-fork-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity .5s ease;
}

.v2-fork-card::after {
  
  background:
    radial-gradient(circle 300px at 96% 4%, color-mix(in srgb, var(--brand) 42%, transparent), color-mix(in srgb, var(--brand) 14%, transparent) 45%, transparent 72%),
    radial-gradient(circle 440px at 0% 100%, color-mix(in srgb, var(--brand) 34%, transparent), color-mix(in srgb, var(--brand) 12%, transparent) 42%, transparent 70%);
}

.v2-fork-card::before {
  opacity: 0;
  background:
    radial-gradient(circle 320px at 96% 4%, color-mix(in srgb, var(--brand) 62%, transparent), color-mix(in srgb, var(--brand) 24%, transparent) 42%, transparent 72%),
    radial-gradient(circle 460px at 0% 100%, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand) 22%, transparent) 40%, transparent 70%);
}

.v2-fork-card:hover::after, :root[data-theme="dark"] .v2-fork-card:hover::after { opacity: 0; }

.v2-fork-card:hover::before, .v2-fork-card:focus-visible::before { opacity: 1; }

/* «¿Qué tienes entre manos?»: la luz de arriba a la derecha, a la mitad (toque discreto);
   la de abajo a la izquierda sigue grande */
.v2-fork-card::after {
  background:
    radial-gradient(circle 150px at 96% 4%, color-mix(in srgb, var(--brand) 42%, transparent), color-mix(in srgb, var(--brand) 14%, transparent) 45%, transparent 72%),
    radial-gradient(circle 440px at 0% 100%, color-mix(in srgb, var(--brand) 34%, transparent), color-mix(in srgb, var(--brand) 12%, transparent) 42%, transparent 70%);
}

.v2-fork-card::before {
  background:
    radial-gradient(circle 160px at 96% 4%, color-mix(in srgb, var(--brand) 62%, transparent), color-mix(in srgb, var(--brand) 24%, transparent) 42%, transparent 72%),
    radial-gradient(circle 460px at 0% 100%, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand) 22%, transparent) 40%, transparent 70%);
}

@media (max-width: 760px) {
  .v2-fork-card::after {
      background:
        radial-gradient(circle 100px at 100% 0%, color-mix(in srgb, var(--brand) 40%, transparent), color-mix(in srgb, var(--brand) 12%, transparent) 45%, transparent 72%),
        radial-gradient(circle 280px at 0% 100%, color-mix(in srgb, var(--brand) 32%, transparent), color-mix(in srgb, var(--brand) 10%, transparent) 42%, transparent 70%);
    }
  .v2-fork-card::before {
      background:
        radial-gradient(circle 105px at 100% 0%, color-mix(in srgb, var(--brand) 60%, transparent), color-mix(in srgb, var(--brand) 22%, transparent) 42%, transparent 72%),
        radial-gradient(circle 290px at 0% 100%, color-mix(in srgb, var(--brand) 52%, transparent), color-mix(in srgb, var(--brand) 20%, transparent) 40%, transparent 70%);
    }
}

/* =====================================================================
   «TODAS LAS CONVOCATORIAS»: el buscador va integrado bajo el título
   (antes quedaba suelto, pegado a la cabecera y sin nada encima)
   ===================================================================== */
body.is-todas .hero { display: none; }

#para-ti .list-head + ul.rows { margin-top: 20px; }

.tipos h2, .how h2 { margin-bottom: 28px; }

.legend-title, .v2 .tipos .legend-title { margin-bottom: 16px; }

/* =====================================================================
   «Los cinco tipos, en detalle»: filas compactas dentro de una tarjeta
   ===================================================================== */
.tipos-filas { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--bg); }

.tfila { display: grid; grid-template-columns: 220px 1fr 1fr auto; gap: 24px; align-items: center; padding: 18px 24px; }

.tfila + .tfila { border-top: 1px solid var(--line); }

.tfila:hover { background: var(--soft); }

.tf-nombre { display: flex; align-items: center; gap: 14px; min-width: 0; }

.tf-nombre .tipo-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; }

.tf-nombre h3 { margin: 0; font-size: 24px; line-height: 1; }

.tf-nombre .when { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }

.tf-texto { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

.tf-gets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.tf-gets li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--soft); border-radius: 999px; padding: 5px 10px 5px 8px; }

.tfila:hover .tf-gets li { background: var(--bg); }

.tf-gets svg { width: 12px; height: 12px; color: var(--brand); flex: none; }

.tf-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; text-decoration: none; color: var(--ink); white-space: nowrap; }

.tf-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }

.tfila:hover .tf-link svg { transform: translateX(4px); }

.tf-link.vacio { color: var(--muted); }

.tf-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 18px 24px; border-top: 1px solid var(--line); background: var(--soft); }

.tf-cta b { display: block; font-size: 15px; }

.tf-cta span { font-size: 13px; color: var(--muted); }

@media (max-width: 960px) {
  .tfila { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .tf-nombre { grid-column: 1; }
  .tf-link { grid-column: 2; grid-row: 1; }
  .tf-texto, .tf-gets { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .tipos-filas { border-radius: 18px; }
  .tfila, .tf-cta { padding: 16px; }
  .tf-nombre h3 { font-size: 22px; }
}

.paso { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--bg); }

.paso-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

.paso-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--brand-relleno); color: var(--sobre-color); box-shadow: 0 0 0 5px var(--brand-soft); }

.paso-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--ink-2); }

.paso-ico svg { width: 19px; height: 19px; }

.paso h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }

.paso p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.paso-dato { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--brand-ink); }

.paso-dato svg { width: 14px; height: 14px; flex: none; color: var(--brand); }

/* Línea discontinua que une los pasos (de un número al siguiente) */
.paso:not(:last-child)::after { content: ""; position: absolute; top: 41px; left: calc(100% - 4px); width: 22px; border-top: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent); z-index: 1; }

@media (max-width: 760px) {
  .paso { padding: 20px; }
  .paso:not(:last-child)::after { top: auto; bottom: -13px; left: 40px; width: 0; height: 14px; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent); }
}

/* =====================================================================
   «¿Qué tienes entre manos?»: brillo (gloss) que cruza la tarjeta al pasar el ratón.
   Es solo una capa de fondo que se desplaza: sin elementos extra ni coste de memoria.
   ===================================================================== */
.v2-fork-card {
  background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .55) 49%, rgba(255, 255, 255, .15) 54%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat;
  transition: background-position 1s var(--ease);
}

.v2-fork-card:hover { background-position: -30% 0; }

:root[data-theme="dark"] .v2-fork-card { background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .07) 49%, rgba(255, 255, 255, .02) 54%, transparent 62%); }

:root[data-theme="dark"] .v2-fork-card { background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; }

:root[data-theme="dark"] .v2-fork-card:hover { background-position: -30% 0; }

/* «Los cinco tipos»: más separación de «¿Qué tienes entre manos?» y hover suave con un tono propio (verde muy tenue) */

.tfila { transition: background-color .3s ease; }

.tfila:hover { background: color-mix(in srgb, var(--brand) 7%, var(--bg)); }

/* =====================================================================
   «Los cinco tipos»: la tarjeta aparece entera (las filas, escalonadas dentro)
   y el fondo del hover cambia suave. Antes la regla de aparición pisaba la
   transición del fondo y el cambio era brusco.
   ===================================================================== */
.js .tipos-filas > .tfila, .js .tipos-filas > .tf-cta {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .6s var(--ease), background-color .3s ease;
  transition-delay: calc(var(--d, 0) * 60ms + 80ms), calc(var(--d, 0) * 60ms + 80ms), 0s;
}

.js .tipos-filas.in > .tfila, .js .tipos-filas.in > .tf-cta { opacity: 1; transform: none; }

/* Hover con un verde muy suave (distinto del gris de «¿No sabes por dónde empezar?») */
.tfila:hover { background: color-mix(in srgb, var(--brand) 7%, var(--bg)); }

.tfila:hover .tf-gets li { background: color-mix(in srgb, var(--brand) 12%, var(--bg)); }

.tf-gets li { transition: background-color .3s ease; }

/* Un poco más de aire entre «¿Qué tienes entre manos?» y los cinco tipos */
.v2 .tipos .legend-title { margin-top: 88px; }

@media (max-width: 760px) {
  .v2 .tipos .legend-title { margin-top: 64px; }
}

/* =====================================================================
   PRUEBA · Onda de píxeles en la portada (onda-pixeles.js)
   Si el lienzo está, sustituye al halo de degradado; si no, queda el halo de siempre.
   ===================================================================== */
.onda-pixeles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; image-rendering: pixelated; }

.onda-pixeles.lista { opacity: 1; }

.hero.con-onda::before { display: none; }

body.is-todas .onda-pixeles { display: none; }

/* =====================================================================
   Tema «píxel verde»: el resto de luces verdes de la web, hechas de píxeles.
   - Boletín: onda animada (onda-pixeles.js); se oculta su halo de degradado.
   - Tarjetas «¿Qué tienes entre manos?» y cabecera del perfil: la misma luz de siempre,
     vista a través de una rejilla de cuadraditos de 4 px (máscara CSS: cero coste).
   ===================================================================== */
.newsletter .wrap.con-onda::after { display: none; }

.v2-fork-card::after, .v2-fork-card::before, .p-hero::after {
  -webkit-mask: linear-gradient(90deg, #000 4px, transparent 0) 1px 1px / 6px 6px, linear-gradient(#000 4px, transparent 0) 1px 1px / 6px 6px;
          mask: linear-gradient(90deg, #000 4px, transparent 0) 1px 1px / 6px 6px, linear-gradient(#000 4px, transparent 0) 1px 1px / 6px 6px;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* La rejilla tapa la mitad del área: la luz en píxeles va a más intensidad para verse igual que antes */
.v2-fork-card::after { opacity: 1; }

:root[data-theme="dark"] .v2-fork-card::after { opacity: .85; }

/* Tarjetas con lámpara de lava animada: sustituye a sus luces fijas; al pasar el ratón brilla más */
.v2-fork-card.con-onda::after, .v2-fork-card.con-onda::before { display: none; }

.v2-fork-card .onda-pixeles.lista { opacity: .85; transition: opacity .6s ease; }

.v2-fork-card:hover .onda-pixeles.lista, .v2-fork-card:focus-visible .onda-pixeles.lista { opacity: 1; }

/* «¿No sabes por dónde empezar?»: la lámpara queda detrás del texto y del botón */
.tf-cta { position: relative; isolation: isolate; overflow: hidden; }

.tf-link { padding: 8px 14px 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

.tf-link.vacio { border: 0; background: none; }

/* «Cómo lo comprobamos»: cada paso se puede pulsar. Al pasar el ratón, su número brilla
   (halo verde) y se insinúa que abre el detalle. */
.paso[data-proceso] { cursor: pointer; outline: none; transition: box-shadow .3s ease; }

.paso[data-proceso]:focus-visible { box-shadow: 0 0 0 2px var(--brand); }

.paso-n { transition: box-shadow .45s var(--ease), transform .45s var(--ease); }

.paso[data-proceso]:hover .paso-n, .paso[data-proceso]:focus-visible .paso-n {
  transform: scale(1.08);
  box-shadow: 0 0 0 5px var(--brand-soft), 0 0 22px 6px color-mix(in srgb, var(--brand) 45%, transparent);
}

/* =====================================================================
   Tarjeta «Próximo cierre · Ahora mismo · Por qué fiarte»: sombra normal y elegante
   (sustituye a la sombra de lava). Varias capas: un borde de contacto casi invisible,
   una sombra suave cercana, otra amplia y difusa, y al fondo un leve halo verde de la marca.
   ===================================================================== */

/* Tarjeta «Próximo cierre · Ahora mismo · Por qué fiarte» (versión 2): sombra gris normal,
   corta y pegada a la tarjeta (sin difuminarse mucho hacia abajo ni halo verde) */
.v2-proof {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -6px rgba(16, 24, 40, .14);
}

:root[data-theme="dark"] .v2-proof {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .4), 0 8px 18px -6px rgba(0, 0, 0, .6);
}

/* (sin tocar «display»: el botón de tema oculta uno de sus dos iconos) */
/* =====================================================================
   BOLETÍN · la nota «Sin spam…» centrada justo debajo del campo del correo
   ===================================================================== */
.newsletter .inline-form .btn { flex: none; width: 140px; }

.newsletter .fine { max-width: none; margin: 12px 148px 0 0; text-align: center; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-size: 12.5px; }

.newsletter .fine .link { font: inherit; font-size: inherit; height: auto; padding: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

.newsletter .fine .link:hover { color: var(--ink); }

@media (max-width: 760px) {
  .newsletter .inline-form .btn { width: 100%; }
  .newsletter .fine { margin-right: 0; }
}

/* Novedades de la semana (portada) */
.novedades { padding: 0 0 72px; }

.novedades .list-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.nov-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.nov-lista button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: border-color .2s ease; }

.nov-lista button:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }

.nov-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; font-size: 15px; }

.nov-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }

.nov-txt b { font-size: 14.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.nov-txt span { font-size: 13px; color: var(--muted); }

.nov-cuando { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); }

@media (max-width: 760px) {
  .nov-lista { grid-template-columns: 1fr; }
  .novedades { padding-bottom: 48px; }
}

/* ─────────── fuente/estilos/05-listado.css ─────────── */
/* =====================================================================
   Listado: barra, filtros en píldoras, grupos, calendario por meses y cuadrícula
   ===================================================================== */

.sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.tools { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 16px; }

.tools-sep { width: 1px; height: 18px; background: var(--line); margin: 0 8px; flex: none; }

/* Paneles que se despliegan: animan la altura con grid (barato, sin medir con JS) */
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }

.collapse > .collapse-in { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-6px); transition: opacity .28s ease, transform .4s var(--ease); }

.collapse.is-open { grid-template-rows: 1fr; }

.collapse.is-open > .collapse-in { opacity: 1; transform: none; }

/* ---------- Listado ---------- */
.listing { padding: 16px 0 72px; outline: none; }

.list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }

.list-head h2 { margin: 0; font-size: clamp(30px, 4.6vw, 44px); }

.list-head p { margin: 0 0 3px; color: var(--muted); font-size: 13px; }

.list-head p:empty { display: none; }

.toolbar {
  position: sticky; top: var(--header); z-index: 15; background: var(--bg);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  
}

.active { display: flex; flex-wrap: wrap; gap: 6px; }

.group-title { display: flex; align-items: center; padding-bottom: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

.group-title .n { font-weight: 600; background: var(--soft); color: var(--ink); border-radius: 999px; padding: 0 8px; letter-spacing: 0; }

.s-open { background: var(--open); color: var(--open-ink); }

.s-soon { background: var(--soon); color: var(--soon-ink); }

.s-closed { background: var(--closed); color: var(--closed-ink); }

.more { display: flex; justify-content: center; }

.empty { text-align: center; padding: 48px 16px; color: var(--muted); }

.empty b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; }

.empty .btn { margin-top: 16px; }

/* Vista por meses */
.month { display: grid; grid-template-columns: 150px 1fr; gap: 24px; border-bottom: 1px solid var(--line); animation: rowin .45s var(--ease) both; }

.month h3 { margin: 0; font-size: 28px; }

.month h3 small { display: block; font-size: 13px; color: var(--muted); font-stretch: 100%; font-weight: 500; text-transform: none; letter-spacing: 0; margin-top: 6px; }

.month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.month li button { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 12px; cursor: pointer; }

.month li button:hover { background: var(--soft); }

.month .day { font-size: 24px; text-align: center; }

.month .what { font-size: 14px; font-weight: 600; }

.month .what small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }

.group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin: 0 0 8px !important; }

@media (max-width: 760px) {
  .toolbar { gap: 8px; position: static; }
  /* Accesos rápidos: una sola fila que se desliza con el dedo, con borde difuminado */
  .tools { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
  .tools::-webkit-scrollbar { display: none; }
  .tools .pill-btn, .tools .chip-link { flex: none; }
  body.is-todas .listing { padding-bottom: 110px; }
  .toolbar .pill-btn { padding: 0 12px; font-size: 13px; gap: 6px; }
  
  
  
  .month { grid-template-columns: 1fr; gap: 8px; }
}

/* =====================================================================
   Ritmo vertical de los listados (portada, «Todas», calendario, perfil):
   una sola escala de espacios (8 · 16 · 24 · 40) y solo las líneas que
   aportan algo: la gruesa bajo el título y la fina de la barra de herramientas.
   Los encabezados de grupo ya no llevan línea propia: son una etiqueta con aire.
   ===================================================================== */

.toolbar { padding: 16px 0; gap: 12px; }

.active:not(:empty) { margin-top: 16px; gap: 8px; }

.group-title { margin: 44px 0 8px; padding: 0 0 0 2px; border-bottom: 0; gap: 10px; }

.group-title:first-child { margin-top: 32px; }

/* La primera fila de cada grupo lleva línea arriba, así el grupo queda «enmarcado» */
.group-title + ul.rows > .row:first-child, .group-title + .group-note + ul.rows > .row:first-child { border-top: 1px solid var(--line); }

/* Listado sin grupos (búsquedas, favoritas): mismo aire bajo la barra */
#results > ul.rows:first-child { border-top: 1px solid var(--line); }

#results > .month:first-child { margin-top: 16px; }

.month { padding: 32px 0; }

.more:not(:empty) { margin-top: 40px; }

@media (max-width: 760px) {
  .toolbar { padding: 12px 0; }
  .group-title { margin-top: 36px; }
  .group-title:first-child { margin-top: 24px; }
}

.group-title + ul.rows > .row:first-child, .group-title + .group-note + ul.rows > .row:first-child, #results > ul.rows:first-child { border-top: 0; }

body.is-todas #lista > .wrap[data-reveal] { opacity: 1; transform: none; transition: none; }

/* =====================================================================
   Listados más limpios: más aire bajo el buscador y ninguna línea antes
   de la primera fila. Solo quedan las líneas finas entre convocatorias.
   ===================================================================== */

.list-head { border-bottom: 0; padding-bottom: 8px; }

.toolbar { border-bottom: 0; transition: box-shadow .25s ease; }

/* La barra de filtros solo marca su borde cuando se queda pegada arriba al bajar */
.toolbar.pegada { box-shadow: 0 1px 0 var(--line), 0 10px 20px -18px rgba(10, 10, 20, .35); }

.group-title + ul.rows, .group-title + .group-note + ul.rows, #results > ul.rows:first-child { box-shadow: none; }

#lista .search { max-width: none; margin: 20px 0 6px; }

#lista .search input { height: 48px; }

@media (max-width: 760px) {

  #lista .search { margin-top: 16px; }
}

#toggle-filters + .quitar:not([hidden]) { margin-left: -4px; }

.active, .active:not(:empty) { display: none; }

/* ---------- Menú «Ordenar», con la estética de la web ---------- */
.orden { position: relative; }

#orden-btn .caret { width: 13px; height: 13px; color: var(--muted); }

.orden-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 240px; margin: 0; padding: 6px; list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  transform-origin: top right; animation: drop .2s var(--ease);
}

.orden-menu li { position: relative; display: grid; gap: 2px; padding: 10px 36px 10px 12px; border-radius: 11px; cursor: pointer; outline: none; transition: background-color .15s; }

.orden-menu li b { font-size: 13.5px; font-weight: 650; }

.orden-menu li small { font-size: 12px; color: var(--muted); }

.orden-menu li:hover, .orden-menu li:focus-visible { background: var(--soft); }

.orden-menu li[aria-selected="true"] { background: var(--brand-soft); }

.orden-menu li[aria-selected="true"]::after { content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 5px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: translateY(-70%) rotate(-45deg); }

@media (max-width: 760px) {

  #orden-btn { width: 100%; justify-content: space-between; }

  #orden-btn > svg:first-child { display: none; }
  #orden-btn { padding: 0 12px 0 14px; }
  .orden { flex: 1; min-width: 0; }
  .orden-menu { left: auto; right: 0; min-width: 230px; transform-origin: top right; }
  
}

/* Misma distancia entre cada título y su contenido: 28 px los títulos grandes, 16 px los antetítulos */
#results > ul.rows:first-child { margin-top: 20px; }

@media (max-width: 760px) {
  
  #toggle-filters .caret { display: none; }
  
}

/* «Todas»: el mismo aire entre la cabecera y el título que entre los filtros y «Abiertas ahora» */

body.is-todas #results > .group-title:first-child { margin-top: 48px; }

body.is-todas #results > ul.rows:first-child, body.is-todas #results > .month:first-child { margin-top: 48px; }

body.is-todas #results > .group-title:first-child, body.is-todas #results > ul.rows:first-child, body.is-todas #results > .month:first-child { margin-top: 64px; }

@media (max-width: 760px) {
  body.is-todas #results > .group-title:first-child, body.is-todas #results > ul.rows:first-child, body.is-todas #results > .month:first-child { margin-top: 40px; }
}

/* =====================================================================
   «Todas»: la barra de filtros y su panel bajan juntos al hacer scroll
   ===================================================================== */
.fijo { position: sticky; top: var(--header); z-index: 15; background: var(--bg); transition: box-shadow .25s ease; }

.fijo .toolbar { position: static; box-shadow: none; }

.fijo.pegada { box-shadow: 0 1px 0 var(--line), 0 10px 20px -18px rgba(10, 10, 20, .35); }

@media (max-width: 760px) {
  .fijo { position: static; }
}

/* «Todas» y «Calendario» (la misma página en dos formatos): el mismo hueco visible entre la cabecera
   y el título que entre los botones de filtro y lo primero de la lista (antes 60 · 83 · 112 px). */
body.is-todas .listing { padding-top: 72px; }

body.is-todas #results > .group-title:first-child, body.is-todas #results > ul.rows:first-child { margin-top: 49px; }

body.is-todas #results > .month:first-child { margin-top: 20px; }

@media (max-width: 760px) {
  body.is-todas .listing { padding-top: 48px; }
  body.is-todas #results > .group-title:first-child, body.is-todas #results > ul.rows:first-child { margin-top: 30px; }
  body.is-todas #results > .month:first-child { margin-top: 0; }
}

/* Menú de formato del calendario (junto a «Lista / Por meses») */
.formato-cal[hidden] { display: none !important; }

/* Calendario en cuadrícula de mes */
.mes-cuadricula { display: block; }

.mes-cuadricula h3 { margin-bottom: 14px; }

.cr-rej { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }

.cr-sem { padding: 4px 0 6px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }

.cr-dia { position: relative; min-height: 86px; padding: 8px; border-radius: 12px; background: var(--soft); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 1px solid transparent; font: inherit; color: var(--muted); min-width: 0; }

.cr-dia b { font-size: 13px; font-weight: 650; }

.cr-dia.con { background: var(--bg); border-color: var(--line); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }

.cr-dia.con:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }

.cr-dia.sel { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--bg)); }

.cr-dia.hoy b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--bg); }

.cr-puntos { display: none; gap: 3px; align-items: center; }

.cr-puntos small { font-size: 10px; color: var(--muted); }

.cr-p { width: 7px; height: 7px; border-radius: 50%; background: var(--closed); }

.cr-p.cr-abierta { background: var(--open); }

.cr-p.cr-pronto { background: var(--soon); }

.cr-noms { display: grid; gap: 3px; width: 100%; }

.cr-nom { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 600; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: var(--closed-tint); color: var(--ink-2); }

.cr-nom.cr-abierta { background: var(--open-tint); }

.cr-nom.cr-pronto { background: var(--soon-tint); }

.cr-mas { font-size: 11px; color: var(--muted); padding-left: 2px; }

.cr-vacio { min-height: 0; }

.cr-detalle { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--soft); }

.cr-det-tit { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }

.cr-detalle ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.cr-detalle button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--bg); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }

.cr-detalle .what { display: grid; font-size: 14px; font-weight: 600; }

.cr-detalle .what small { font-size: 12.5px; font-weight: 400; color: var(--muted); }

.cr-estimadas { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

.cr-estimadas button { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 760px) {
  .cr-rej { gap: 3px; }
  .cr-dia { min-height: 46px; padding: 6px 4px; align-items: center; border-radius: 10px; }
  .cr-dia b { font-size: 12px; }
  .cr-noms { display: none; }
  .cr-puntos { display: flex; }
}

/* El detalle de un día no usa la columna del número de día de la vista en lista */
.month .cr-detalle li button { display: flex; grid-template-columns: none; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg); border-radius: 12px; }

.month .cr-detalle li button:hover { background: color-mix(in srgb, var(--brand) 6%, var(--bg)); }

.month .cr-detalle .what { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  /* En móvil el botón de formato del calendario es solo icono (no cabe el texto junto a «Ordenar») */
  .formato-cal #formato-txt, .formato-cal .caret { display: none; }
  
  .formato-cal .orden-menu { left: auto; right: 0; min-width: 240px; transform-origin: top right; }
  .formato-cal { flex: none; }
}

/* =====================================================================
   PANEL DE FILTROS — columna fija a la izquierda en ordenador (≥ 1024 px);
   en móvil y tableta, la misma columna sube desde abajo como una hoja.
   ===================================================================== */
.fp-velo { position: fixed; inset: 0; z-index: 60; background: var(--popup-velo); animation: fadein .2s ease; }
.fp-velo[hidden] { display: none; }
body.is-todas .filtros-panel { display: flex; flex-direction: column; min-height: 0; }
.fl-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding-bottom: 14px; }
.fl-titulo { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.fl-res { order: 5; flex-basis: 100%; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.fl-quitar { margin-left: auto; font-size: 12.5px; font-weight: 650; color: var(--closed); text-decoration: none; }
.fl-quitar:hover { color: var(--ink); }
.fl-cuerpo { display: grid; gap: 22px; align-content: start; overflow-x: hidden; padding-inline: 8px; margin-inline: -8px; }
.fl-grupo h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fl-ops { display: grid; gap: 1px; }
/* Cada opción: casilla cuadrada (como los píxeles de la marca), nombre y cuántas saldrían */
.fl-op { display: flex; align-items: center; gap: 10px; width: calc(100% + 16px); min-height: 34px; margin: 0 -8px; padding: 6px 8px; border: 0; border-radius: 10px;
  background: none; font: inherit; font-size: 14px; color: var(--ink-2); text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.fl-op:hover { background: var(--soft); color: var(--ink); }
.fl-op[hidden] { display: none; }
.fl-check { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 5px; color: transparent;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, var(--line)); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.fl-check svg { width: 12px; height: 12px; }
.fl-op[aria-pressed="true"] { color: var(--ink); font-weight: 650; }
.fl-op[aria-pressed="true"] .fl-check { background: var(--brand-relleno); border-color: var(--brand-relleno); color: var(--sobre-color); }
.fl-t { flex: 1; min-width: 0; }
.fl-n { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.fl-op.vacia { opacity: .45; }
.fl-busca { display: flex; align-items: center; gap: 8px; height: 36px; margin-bottom: 6px; padding: 0 10px; border-radius: 10px; background: var(--soft); }
.fl-busca svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.fl-busca input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; }
.fl-cerrar, .fl-pie { display: none; }

@media (min-width: 1024px) {
  body.is-todas .listado-cuerpo { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 44px; align-items: start; }
  body.is-todas .listado-principal { min-width: 0; }
  /* El panel acompaña al bajar por la lista */
  body.is-todas .filtros-panel { position: sticky; top: calc(var(--header) + 20px); max-height: calc(100dvh - var(--header) - 40px); padding-top: 6px; }
  .fl-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 12px 8px; margin: 0 -12px 0 -8px;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
  /* Con el panel siempre a la vista, el botón «Filtros» de la barra sobra */
  body.is-todas #toggle-filters, body.is-todas #clear-all { display: none; }
}
@media (max-width: 1023px) {
  body.is-todas .filtros-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 86dvh; padding: 18px 18px 0;
    background: var(--popup-fondo); border-radius: 22px 22px 0 0; box-shadow: var(--shadow), 0 0 0 1px var(--popup-borde);
    transform: translateY(104%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
  body.is-todas .filtros-panel.abierto { transform: none; visibility: visible; transition: transform .35s var(--ease); }
  .fl-cab { align-items: center; padding-bottom: 12px; }
  .fl-cerrar { display: grid; margin-left: 4px; }
  .fl-quitar { margin-left: auto; }
  .fl-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 18px; scrollbar-width: none; }
  .fl-cuerpo::-webkit-scrollbar { display: none; }
  .fl-pie { display: block; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); }
  .fl-op { min-height: 42px; font-size: 15px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  body.is-todas .filtros-panel { left: 50%; right: auto; width: 560px; margin-left: -280px; }
}
@media (prefers-reduced-motion: reduce) { body.is-todas .filtros-panel { transition: none !important; } }

/* =====================================================================
   «QUITAR FILTROS» — botón (X roja) de la barra del listado
   ===================================================================== */
/* ---------- «Quitar filtros»: aparece junto a «Filtros» solo si hay alguno ---------- */
.pill-btn.quitar { --halo: var(--closed); color: var(--ink-2); padding: 0 13px 0 11px; }

.pill-btn.quitar:hover { color: var(--closed); background: var(--closed-tint); }

.quitar:not([hidden]) + #toggle-saved { margin-left: 12px; }

@media (max-width: 760px) {
  /* Móvil: la barra de filtros cabe en dos filas limpias */
  .pill-btn.quitar { padding: 0; justify-content: center; }
  .pill-btn.quitar .t { display: none; }
  .quitar:not([hidden]) + #toggle-saved { margin-left: 6px; }
}

/* «Quitar filtros»: solo una X, pequeña, en rojo (borde rojo, X roja oscura, fondo rojo claro) */
.pill-btn.quitar, .pill-btn.quitar:not([aria-pressed="true"]):hover {
  --halo: var(--closed);
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--closed) 70%, transparent);
  background: var(--closed-tint); color: color-mix(in srgb, var(--closed) 72%, var(--mix-oscuro));
}

.pill-btn.quitar svg { width: 12px; height: 12px; }

.pill-btn.quitar:hover {
  border-color: var(--closed); color: color-mix(in srgb, var(--closed) 85%, var(--mix-oscuro));
  background: color-mix(in srgb, var(--closed) 22%, var(--bg));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--closed) 14%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--closed) 80%, transparent);
}

:root[data-theme="dark"] .pill-btn.quitar { color: var(--closed); }

:root[data-theme="dark"] .pill-btn.quitar:hover { color: var(--closed-claro); background: color-mix(in srgb, var(--closed) 28%, var(--bg)); }

@media (max-width: 760px) {
  .pill-btn.quitar { width: 30px; }
}

/* =====================================================================
   BARRA DEL LISTADO (rehecha) — vista como control principal, formato del mes
   como interruptor a la vista (sin menú), Favoritos destacado y calendario con texto.
   ===================================================================== */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.barra-izq, .barra-der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vista { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--soft); }
.vista[hidden] { display: none; }
.vista button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.vista button svg { width: 16px; height: 16px; flex: none; }
.vista button:hover { color: var(--ink); }
.vista button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: 0 2px 8px -3px rgba(10, 10, 20, .45); }
.vista-mini button { height: 30px; padding: 0 11px 0 9px; font-size: 12.5px; }
.vista-mini button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(10, 10, 20, .16); }
:root[data-theme="dark"] .vista-mini button[aria-pressed="true"] { background: var(--soft-2); }
.barra-fav svg { color: var(--soon-strong); }
.barra-fav[aria-pressed="true"] { background: color-mix(in srgb, var(--soon) 22%, var(--bg)); border-color: color-mix(in srgb, var(--soon) 70%, var(--line)); color: var(--ink); }
.barra-fav[aria-pressed="true"] svg { fill: currentColor; }
:root[data-theme="dark"] .barra-fav svg { color: var(--soon); }

/* Cabecera del listado: título a la izquierda; a la derecha, «Todas las fichas» y el asistente */
.list-head-txt { min-width: 0; }
.list-head-acc { display: flex; align-items: center; gap: 10px; }
.guia-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 15px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 12px 26px -16px rgba(10, 10, 20, .7); transition: transform .25s var(--ease), box-shadow .25s ease; }
.guia-btn::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(var(--brand) 1px, transparent 1.3px); background-size: 6px 6px; opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side at 12% 50%, #000, transparent); mask-image: radial-gradient(closest-side at 12% 50%, #000, transparent); }
.guia-btn svg { width: 18px; height: 18px; flex: none; }
.guia-btn svg:first-child { color: var(--brand); }
.guia-btn svg:last-child { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.guia-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(10, 10, 20, .8); }
.guia-btn:hover svg:last-child { transform: translateX(3px); }
.guia-fichas { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--ink); font-size: 14px; font-weight: 650; text-decoration: none; transition: border-color .2s ease; }
.guia-fichas svg { width: 17px; height: 17px; color: var(--brand); flex: none; }
.guia-fichas:hover { border-color: var(--ink); }

@media (max-width: 760px) {
  /* Dos filas ordenadas: «Filtros + vista» arriba; formato, favoritos, orden y calendario abajo */
  .barra { justify-content: flex-start; gap: 8px; }
  .barra-izq, .barra-der { display: contents; }
  #formato-cal { order: 3; }
  .barra-fav { order: 4; margin-left: auto; }
  #orden { order: 5; }
  .barra-cal { order: 6; }
  .barra-txt { display: none; }
  .barra-cal { width: 36px; padding: 0; justify-content: center; }
  .list-head-acc { width: 100%; }
  .guia-btn { flex: 1; justify-content: center; }
  .guia-fichas { padding: 0 14px; }
  .guia-fichas span { display: none; }
}

/* ─────────── fuente/estilos/06-fila.css ─────────── */
/* =====================================================================
   Fila de convocatoria y su detalle desplegado
   ===================================================================== */

.row { animation: rowin .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }

.row-top { display: grid; grid-template-columns: 1fr auto; align-items: center; border-radius: 14px; transition: background-color .2s; }

.row-top:hover { background: var(--soft); }

/* La fila resaltada es una pastilla redondeada: se apagan su línea de abajo y la de la fila anterior
   para que ninguna línea recta corte las esquinas redondas */
.row-head {
  display: grid; grid-template-columns: 104px 1fr 124px 18px; align-items: center; gap: 18px;
  width: 100%; padding: 14px 4px 14px 12px; background: none; border: 0; text-align: left; cursor: pointer; border-radius: 14px;
}

.row-title { display: block; font-size: 15.5px; font-weight: 620; line-height: 1.3; }

.row-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.row-why { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }

.row-why svg { width: 14px; height: 14px; color: var(--open); flex: none; }

.row-date { text-align: right; }

.row-date b { display: block; font-size: 22px; }

.row-date small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.row-date.urgent small { color: var(--closed); font-weight: 700; }

.row.open .chev { transform: rotate(180deg); }

/* Panel de la ficha abierta: fondo gris redondeado, distinto de las líneas que separan convocatorias */
.row-body-in { display: grid; gap: 14px; background: var(--soft); }

/* Plazos (izquierda) y datos (derecha) empiezan a la misma altura */
.detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: stretch; }

.dcard { background: var(--bg); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }

.dcard-h { margin: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

.dcard .verified { margin: auto 0 0; padding-top: 6px; }

.actions-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; }

.tags { display: flex; flex-wrap: wrap; gap: 4px; }

.facts { margin: 0; display: grid; gap: 12px; font-size: 13.5px; }

.facts dt { color: var(--muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1px; }

.facts dd { margin: 0; color: var(--ink-2); }

.estimate { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.ext { font-size: 13px; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px; }

.ext svg { width: 14px; height: 14px; }

.ext:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.verified { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.verified svg { width: 14px; height: 14px; color: var(--open); flex: none; }

.gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.gets li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }

.gets li svg { width: 15px; height: 15px; color: var(--open); flex: none; }

.kv { display: grid; gap: 0; background: var(--soft); border-radius: 16px; margin-top: 16px; padding: 4px 0; }

.kv > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; }


.kv dt { color: var(--muted); font-size: 14px; }

.kv dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.demo-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); background: var(--soft); border-radius: 12px; padding: 10px 12px; margin-top: 16px; }

.demo-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

@media (max-width: 760px) {
  .row-head { grid-template-columns: 1fr auto; grid-template-areas: "status date" "main main"; gap: 8px 12px; padding: 14px 0 14px 8px; }
  .row-head .status { grid-area: status; }
  .row-head .row-main { grid-area: main; }
  .row-head .row-date { grid-area: date; display: flex; align-items: baseline; gap: 8px; }
  .row-date b { font-size: 18px; display: inline; }
  .row-date small { display: inline; margin: 0; }
  .row-head .chev { display: none; }
  .row-top { align-items: start; }
  .row-body-in { gap: 12px; border-radius: 16px; }
  .detail-grid { grid-template-columns: 1fr; gap: 10px; }
  .dcard { padding: 14px; }
  .actions { gap: 6px; }
  .actions .btn { padding: 0 12px; }
}

/* Dentro del panel gris, las etiquetas van en blanco para que se lean */
.row-body-in .tag { background: var(--bg); }

/* Fecha clave en grande dentro de «Plazos»: llena la tarjeta con lo importante */
.key-date { display: flex; align-items: center; gap: 16px; }

.key-date b { font-size: 46px; line-height: .9; white-space: nowrap; }

.key-date span { display: grid; gap: 3px; min-width: 0; }

.key-date strong { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }

.key-date small { font-size: 12.5px; color: var(--muted); }

.key-date.urgent small { color: var(--closed); font-weight: 700; }

.dcard > .key-date:last-child { margin: auto 0; }

/* si es lo único, queda centrada en la tarjeta */
.key-date + ol.plazos, .key-date + .estimate { margin-top: 10px; }

@media (max-width: 760px) {
  .key-date b { font-size: 38px; }
  .dcard > .key-date:last-child { margin: 4px 0; }
}

/* Al cargar más filas, las que ya estaban no vuelven a animarse */
.no-anim .row, .no-anim .month { animation: none; }

/* Fechas estimadas: en gris, para no confundirlas con una fecha oficial */
.row-date.est b { color: var(--muted); }

.row-date.est small { font-style: italic; }

/* 3) Filas sin parpadeo. Antes la línea separadora era el borde de la fila (fuera de la zona
      que reacciona al ratón): en ese píxel no había nada resaltado y, al pasar por él, el fondo
      se encendía y apagaba muy rápido. Ahora la línea es un dibujo encima (no ocupa sitio ni
      recibe el ratón) y las zonas de cada fila se tocan sin hueco. */
.row { border-bottom: 0; position: relative; transition: none; }

.row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); pointer-events: none; transition: opacity .2s ease; }

@media (hover: hover) {
  .row:not(.open):has(> .row-top:hover)::after, .row:has(+ .row > .row-top:hover)::after { opacity: 0; }
}

/* Las líneas ya no cambian de color por CSS antiguo */
.row:not(.open):has(> .row-top:hover), .row:has(+ .row > .row-top:hover) { border-bottom-color: transparent; }

@media (hover: none) {
  /* En pantallas táctiles no hay «hover» (evita que una fila se quede resaltada al tocarla) */
  .row-top:hover { background: none; }
}

html.primera .row, html.primera .month, html.primera .viz-meter .track i, html.primera .viz-bar i, html.primera dialog[open] { animation: none !important; }

/* «Apertura prevista · sin confirmar» siempre en una sola línea */
.row-date.est small { white-space: nowrap; }

@media (min-width: 761px) {
  .row-head { grid-template-columns: 104px 1fr 170px 18px; }
}

@media (max-width: 760px) {
  /* En móvil no cabe junto a la etiqueta: la fecha prevista va en su propia línea, debajo */
  .row-head:has(> .row-date.est) { grid-template-columns: 1fr; grid-template-areas: "status" "date" "main"; }
  .row-head > .row-date.est { justify-self: start; text-align: left; }
}

.row:last-child::after { display: none; }

/* Filas que ya estaban en pantalla al cargar: sin animación de entrada (evita el parpadeo) */
.row.sin-entrada, .month.sin-entrada { animation: none; }

/* =====================================================================
   Ficha abierta: el título y su información forman un solo bloque
   - El título se queda con el fondo del hover mientras está abierta.
   - El panel ocupa el mismo ancho que el título (antes acababa 12 px antes
     a la derecha y empezaba 134 px más a la izquierda).
   - Una línea verde a la izquierda baja despacio, como un corchete.
   ===================================================================== */
.row.open .row-top { background: var(--soft); border-radius: 14px 14px 0 0; }

.row-body-in { position: relative; margin: 0 0 28px; border-radius: 0 0 18px 18px; padding: 18px 20px 20px 30px; }

.row-body-in::before {
  content: ""; position: absolute; left: 14px; top: 6px; bottom: 18px; width: 3px; border-radius: 3px;
  background: var(--brand); transform: scaleY(0); transform-origin: top;
}

.row.open .row-body-in::before { animation: corchete .7s var(--ease) .18s forwards; }

@media (max-width: 760px) {
  .row-body-in { margin: 0 0 24px; padding: 14px 12px 14px 24px; }
  .row-body-in::before { left: 10px; }
}

/* La línea de la ficha abierta va del color de su etiqueta */
.row[data-estado="pronto"] .row-body-in::before { background: color-mix(in srgb, var(--soon) 70%, var(--soon-hondo)); }

.row[data-estado="cerrada"] .row-body-in::before { background: var(--closed); }

/* «Prepara tu inscripción» dentro de cada ficha */
.prepara { margin: 4px 0 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }

.prepara summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 650; color: var(--ink); }

.prepara summary::-webkit-details-marker { display: none; }


.prepara ul { list-style: none; margin: 0; padding: 6px 8px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }

.prepara label { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

.prepara label:hover { background: var(--soft); }

.prepara input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--brand); }

.prepara input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }

@media (max-width: 640px) {
  .prepara ul { grid-template-columns: 1fr; }
}

/* «Ficha completa» y «Fuente oficial» juntos, al final de cada ficha abierta */
.ext-grupo { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* =====================================================================
   «VER LA FICHA COMPLETA» — banda destacada dentro de cada convocatoria abierta
   ===================================================================== */
.ficha-link { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; padding: 14px 16px; border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--bg)); color: var(--ink); text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .25s var(--ease), box-shadow .25s ease; }

/* Trama de puntos verdes a la derecha, como la lava de la web */
.ficha-link::before { content: ""; position: absolute; z-index: -1; inset: -30% -4% -30% 55%; background-image: radial-gradient(var(--brand) 1px, transparent 1.25px); background-size: 6px 6px; opacity: .45;
  -webkit-mask-image: radial-gradient(closest-side at 80% 50%, #000, transparent); mask-image: radial-gradient(closest-side at 80% 50%, #000, transparent); transition: opacity .3s ease; }

.ficha-link:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, var(--bg)); transform: translateY(-1px); box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--brand) 70%, transparent); color: var(--ink); }

.ficha-link:hover::before { opacity: .75; }

.ficha-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.fl-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-relleno); color: var(--sobre-color); }

.fl-ico svg { width: 22px; height: 22px; }

.fl-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }

.fl-txt b { font-size: 15.5px; font-weight: 700; line-height: 1.25; }

.fl-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.fl-go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--bg); transition: transform .25s var(--ease); }

.fl-go svg { width: 17px; height: 17px; }

.ficha-link:hover .fl-go { transform: translateX(3px); }

@media (max-width: 560px) {
  .ficha-link { gap: 12px; padding: 12px; }
  .fl-ico { width: 40px; height: 40px; }
  .fl-go { width: 34px; height: 34px; }
}

/* =====================================================================
   «PREPARA TU INSCRIPCIÓN» — despliegue suave y animación de «todo listo»
   ===================================================================== */
.prepara summary { position: relative; overflow: hidden; transition: background-color .4s ease; }
.pp-cara { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; min-width: 0;
  transition: transform .5s var(--ease), opacity .35s ease; }
.pp-cuerpo { overflow: hidden; }
/* Éxito: entra desde la derecha mientras el texto de antes sale hacia la izquierda */
.pp-exito { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--brand-ink); font-weight: 700;
  opacity: 0; transform: translateX(36px); pointer-events: none; transition: transform .5s var(--ease) .1s, opacity .35s ease .1s; }
.pp-tick { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-relleno); color: var(--sobre-color); flex: none; }
.pp-tick svg { width: 15px; height: 15px; }
.pp-tick::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 var(--brand); opacity: 0; }
.prepara.completo { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.prepara.completo summary { background: color-mix(in srgb, var(--brand) 8%, var(--bg)); }
.prepara.completo .pp-cara { transform: translateX(-40%); opacity: 0; }
.prepara.completo .pp-exito { transform: none; opacity: 1; }
.prepara.completo .pp-tick { animation: ppTick .6s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
.prepara.completo .pp-tick::after { animation: ppOnda .9s ease-out .45s; }
.prepara.completo.ya .pp-cara, .prepara.completo.ya .pp-exito { transition: none; }
.prepara.completo.ya .pp-tick, .prepara.completo.ya .pp-tick::after { animation: none; }
@keyframes ppTick { from { transform: scale(.3) rotate(-25deg); } to { transform: none; } }
@keyframes ppOnda { from { opacity: .55; box-shadow: 0 0 0 0 var(--brand); } to { opacity: 0; box-shadow: 0 0 0 14px var(--brand); } }
@media (prefers-reduced-motion: reduce) { .pp-cara, .pp-exito { transition: none; } .pp-tick, .pp-tick::after { animation: none !important; } }

/* ─────────── fuente/estilos/07-ventanas.css ─────────── */
/* =====================================================================
   Ventanas emergentes (dialog): base y cada ventana concreta
   ===================================================================== */

/* ---------- Diálogos ---------- */
dialog {
  border: 0; padding: 0; border-radius: 24px; background: var(--popup-fondo); color: var(--ink); overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 1px var(--popup-borde);
  width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
}

/* Ventanas de lectura (requisitos, diferencias): casi el doble de grandes, con más aire */
dialog.wide, dialog.big { width: min(880px, calc(100% - 32px)); }

dialog.big .dlg { min-height: min(560px, calc(100dvh - 32px)); }

dialog[open] { animation: dlgin .3s var(--ease); }

dialog::backdrop { background: var(--popup-velo); backdrop-filter: blur(6px) saturate(.8); -webkit-backdrop-filter: blur(6px) saturate(.8); animation: fadein .25s ease; }

/* Con una ventana (o la hoja de filtros del móvil) abierta, la página de detrás no se mueve.
   scrollbar-gutter: el hueco de la barra se mantiene y nada salta de lado. */
html:has(dialog[open]:modal), html:has(.fp-velo:not([hidden])) { overflow: hidden; scrollbar-gutter: stable; }

dialog.sheet { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(360px, 88vw); border-radius: 24px 0 0 24px; }

dialog.sheet[open] { animation: sheetin .35s var(--ease); }

/* El contenido es el que hace scroll (no la ventana), así la barra queda dentro de las esquinas redondeadas */
.dlg { padding: 28px; position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }

dialog.wide .dlg, dialog.big .dlg { padding: 44px 48px; }

dialog.sheet .dlg { max-height: 100dvh; }

.dlg h2 { margin: 0 0 6px; font-size: 30px; padding-right: 40px; }

.dlg > form > p, .dlg > p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

.dlg .close { position: absolute; top: 14px; right: 14px; }

.dlg .opts { margin-bottom: 18px; }

/* Ventana de requisitos */
.req-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.req-h { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

.req-text { margin: 0 0 32px; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); max-width: 68ch; }

.req-actions { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }

.req-actions .btn { height: 44px; padding: 0 22px; font-size: 14px; }

#req-title { font-size: clamp(30px, 4.4vw, 44px); padding-right: 56px; }

dialog.big .close, dialog.wide .close { top: 20px; right: 20px; }

/* =====================================================================
   Barras de scroll de la casa: finas, carril transparente y pulgar verde oscuro.
   El margen del carril las separa de las esquinas redondeadas.
   ===================================================================== */
.dlg, .pop, .suggest { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 55%, var(--ink)) transparent; }

.dlg::-webkit-scrollbar, .pop::-webkit-scrollbar, .suggest::-webkit-scrollbar { width: 10px; }

.dlg::-webkit-scrollbar-track, .pop::-webkit-scrollbar-track, .suggest::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }

.dlg::-webkit-scrollbar-thumb, .pop::-webkit-scrollbar-thumb, .suggest::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand) 55%, var(--ink)); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

.dlg::-webkit-scrollbar-thumb:hover, .pop::-webkit-scrollbar-thumb:hover, .suggest::-webkit-scrollbar-thumb:hover { background-color: var(--brand); }

@media (max-width: 760px) {
  dialog.wide .dlg, dialog.big .dlg { padding: 28px 22px; }
  .req-text { font-size: 15.5px; }
}

/* =====================================================================
   Ventana de requisitos: el cuerpo ocupa todo el alto disponible y la barra
   de acciones queda siempre abajo (bases a la izquierda, botón a la derecha),
   aunque el texto sea corto. En pantalla ancha, texto + ficha lateral.
   ===================================================================== */
#req-body { flex: 1; display: flex; flex-direction: column; }

.req-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }

.req-main .req-text { margin: 0; }

.req-side { display: grid; gap: 0; background: var(--soft); border-radius: 16px; }

.req-fact { padding: 16px 0; display: grid; gap: 4px; }


.req-fact .req-h { margin: 0 0 2px; }

.req-fact b { font-size: 34px; line-height: .95; }

.req-fact small { font-size: 12.5px; color: var(--muted); }

.req-fact p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.req-actions { justify-content: space-between; margin-top: auto; }

.req-actions .ext { padding-left: 0; }

.req-actions .btn svg { transition: transform .25s var(--ease); }

.req-actions .btn:hover svg { transform: translateX(3px); }

@media (max-width: 760px) {
  .req-grid { grid-template-columns: 1fr; gap: 20px; }
  .req-actions { flex-direction: column-reverse; align-items: stretch; }
  .req-actions .btn { width: 100%; }
  .req-actions .ext { justify-content: center; }
}

/* Requisitos ampliados: la columna de texto ocupa la misma altura que la ficha lateral */
.req-grid { align-items: stretch; }

.req-main { display: flex; flex-direction: column; min-width: 0; }

/* Sin rayas: cada dato es un bloque con fondo suave */
.req-list { margin: 0; display: grid; gap: 6px; }

.req-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 16px; border-radius: 12px; background: var(--soft); }

.req-list dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding-top: 3px; }

.req-list dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.req-past { color: var(--muted); text-decoration: line-through; }

.req-note { margin: auto 0 0; padding-top: 20px; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--muted); }

.req-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

.req-side { align-content: space-between; padding: 6px 22px; }

@media (max-width: 760px) {
  .req-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* =====================================================================
   Ventana de requisitos (todas: festivales, mercados, laboratorios…)
   - El texto de requisitos va en negrita: es lo que se viene a buscar.
   - Más aire entre el título y las etiquetas; la ventana es algo más alta
     y el contenido se reparte hacia abajo.
   - Mismo margen (48 px) por abajo, izquierda y derecha: los botones
     de abajo quedan a la misma distancia de los tres bordes.
   ===================================================================== */
dialog.big .dlg { padding: 48px; min-height: min(660px, calc(100dvh - 32px)); }

#req-title { margin-bottom: 0; }

.req-tags { margin: 24px 0 40px; }

.req-main .req-text { font-weight: 650; color: var(--ink); font-size: 17px; line-height: 1.65; margin-bottom: 28px; }

.req-grid { margin-bottom: 40px; }

.req-actions { padding-top: 28px; }

.req-actions .ext { height: 44px; padding: 0; }

@media (max-width: 760px) {
  dialog.big .dlg { padding: 28px 22px; min-height: 0; }
  .req-tags { margin: 16px 0 28px; }
  .req-main .req-text { font-size: 16px; }
  .req-grid { margin-bottom: 28px; }
}

/* Título arriba y botones abajo quedan fijos; solo el contenido del medio se desplaza
   si no cabe. Así los botones están siempre a 48 px del borde inferior, izquierdo y derecho. */
dialog.big .dlg { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 32px); }

dialog.big #req-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -14px; padding-right: 14px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 55%, var(--ink)) transparent; }

dialog.big #req-body::-webkit-scrollbar { width: 8px; }

dialog.big #req-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 55%, var(--ink)); border-radius: 999px; }

dialog.big #req-body .req-grid { margin-bottom: 8px; }

dialog.big .req-actions { flex: none; margin-top: 32px; }

/* La barra de botones es un <footer>: se anula el estilo del pie de la web (padding, letra pequeña gris) */
#req-foot { padding: 28px 0 0; font-size: inherit; color: inherit; }

@media (max-width: 760px) {
  /* En móvil toda la ventana se desplaza (si no, el título y los botones fijos dejan muy poco hueco)
     y la barra de botones se queda pegada abajo, con el mismo margen que a los lados (22 px). */
  dialog.big .dlg { display: block; overflow-y: auto; padding-bottom: 0; }
  dialog.big #req-body { overflow: visible; margin-right: 0; padding-right: 0; }
  dialog.big .req-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 16px 0 22px; background: var(--popup-fondo); box-shadow: 0 -12px 16px -12px color-mix(in srgb, var(--ink) 18%, transparent); }
  dialog.big .req-actions { padding-bottom: 16px; gap: 6px; }
  dialog.big .req-actions .ext { height: auto; padding: 6px 0; }
}

/* ---------- Barras de scroll de las ventanas: finas y lejos de las esquinas redondeadas ---------- */
.dlg::-webkit-scrollbar, #req-body::-webkit-scrollbar, .pop::-webkit-scrollbar, .suggest::-webkit-scrollbar { width: 5px; }

.dlg::-webkit-scrollbar-track, #req-body::-webkit-scrollbar-track, .pop::-webkit-scrollbar-track, .suggest::-webkit-scrollbar-track { background: transparent; margin: 30px 0; }

.dlg::-webkit-scrollbar-thumb, #req-body::-webkit-scrollbar-thumb, .pop::-webkit-scrollbar-thumb, .suggest::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand) 45%, var(--line)); border: 0; border-radius: 999px; }

.dlg::-webkit-scrollbar-thumb:hover, #req-body::-webkit-scrollbar-thumb:hover, .pop::-webkit-scrollbar-thumb:hover, .suggest::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ---------- La X de las ventanas: siempre visible y te acompaña al bajar ---------- */
.dlg .close { background: var(--bg); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(10, 10, 20, .3); z-index: 5; }

.dlg .close:hover { border-color: var(--ink); background: var(--bg); }

dialog:not(.big):not(.sheet) .dlg > .close { position: sticky; top: 0; float: right; margin: -8px -8px 0 12px; }

dialog:not(.big):not(.sheet) .dlg h2 { padding-right: 0; }

/* ---------- Ventana «?» de los cinco tipos ---------- */
#dlg-tipos .dlg { padding: 36px 40px 40px; }

.tdlg-intro { margin: 10px 0 24px; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

#tipos-dlg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }

.tdlg-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: var(--soft); border: 1px solid transparent; transition: border-color .2s ease; }

.tdlg-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }

.tdlg-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.tdlg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }

.tdlg-card .tipo-ico { background: var(--bg); width: 38px; height: 38px; border-radius: 11px; }

.tdlg-card .when { font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--bg); border-radius: 999px; padding: 5px 11px; }

.tdlg-card h3 { margin: 0; font-size: 26px; }

.tdlg-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.tdlg-card .gets { gap: 6px; margin-top: 4px; }

.tdlg-card .gets li { font-size: 13px; }

.tdlg-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; text-decoration: none; color: var(--ink); }

.tdlg-go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }

.tdlg-card:hover .tdlg-go svg { transform: translateX(4px); }

@media (max-width: 760px) {
  #dlg-tipos .dlg { padding: 24px 20px 28px; }
  #tipos-dlg { grid-template-columns: 1fr; }
}

/* =====================================================================
   «Cómo lo comprobamos»: proceso en tres pasos unidos por una línea
   ===================================================================== */
.proceso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; counter-reset: none; }

@media (max-width: 760px) {
  .proceso { grid-template-columns: 1fr; gap: 12px; }
}

.proceso-mas { display: inline-flex; align-items: center; margin-top: 20px; background: none; cursor: pointer;
  font: inherit; }

.proceso-mas svg { color: var(--brand); transition: transform .3s var(--ease); }

.proceso-mas:hover svg { transform: translateX(4px); }

/* Ventana «Tu seguridad es lo más importante» */

#dlg-proceso h2 { margin-top: 8px; }

.proc-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 26px; }

.proc-datos div { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--soft); }

.proc-datos b { font-size: 26px; line-height: .9; }

.proc-datos span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.proc-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--brand-relleno); color: var(--sobre-color); box-shadow: 0 0 0 5px var(--brand-soft); }

@media (max-width: 760px) {
  #dlg-proceso .dlg { padding: 24px 20px 28px; }
  .proc-datos { grid-template-columns: 1fr; }
  .proc-datos div { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

.proc-datos b { white-space: nowrap; }

@media (max-width: 760px) {
  .proc-datos b { font-size: 22px; }
  .proc-datos span { text-align: right; }
}

/* =====================================================================
   VENTANAS (pop-ups) · revisión completa
   ===================================================================== */
/* Botón de cerrar: fuera del contenido que hace scroll, siempre en la esquina de la ventana
   (16 px arriba y 16 px a la derecha en todas) y siempre visible al bajar */
dialog > .close {
  position: absolute; top: 16px; right: 16px; z-index: 6; margin: 0;
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
  
}

dialog > .close:hover { background: var(--bg); }

dialog > .close svg { width: 16px; height: 16px; display: block; }

/* Que ningún título pase por debajo del botón */
.dlg > h2, .dlg > form > h2, .dlg > header h2 { padding-right: 44px; }

@supports selector(::-webkit-scrollbar) {
  /* Barras de desplazamiento finas y que no se meten en las esquinas redondeadas.
     Chrome ignora el diseño propio de la barra si también se usa «scrollbar-width»,
     así que ese ajuste queda solo para Firefox. */
  .dlg, .pop, .suggest, #req-body, .fijo .filters-card { scrollbar-width: auto; scrollbar-color: auto; }
}

.dlg::-webkit-scrollbar, #req-body::-webkit-scrollbar, .pop::-webkit-scrollbar, .suggest::-webkit-scrollbar, .fijo .filters-card::-webkit-scrollbar { width: 8px; }

.dlg::-webkit-scrollbar-track, #req-body::-webkit-scrollbar-track, .pop::-webkit-scrollbar-track, .suggest::-webkit-scrollbar-track, .fijo .filters-card::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }

.dlg::-webkit-scrollbar-track { margin-top: 62px; margin-bottom: 26px; }

/* debajo del botón de cerrar y lejos de la esquina */
.dlg::-webkit-scrollbar-thumb, #req-body::-webkit-scrollbar-thumb, .pop::-webkit-scrollbar-thumb, .suggest::-webkit-scrollbar-thumb, .fijo .filters-card::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;   /* se ve de 4 px */
}

.dlg::-webkit-scrollbar-thumb:hover, #req-body::-webkit-scrollbar-thumb:hover, .pop::-webkit-scrollbar-thumb:hover, .suggest::-webkit-scrollbar-thumb:hover, .fijo .filters-card::-webkit-scrollbar-thumb:hover { background-color: var(--brand); }

/* Antetítulo y entrada comunes de las ventanas */
.dlg-k { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-ink); }

.dlg-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

@media (max-width: 760px) {
  /* Requisitos en móvil: los botones de abajo, centrados entre la línea de separación y el borde
     (antes: 28 px arriba y 0 px abajo) */
  dialog.big #req-foot { padding: 20px 0; gap: 14px; }
  dialog.big #req-foot .ext { padding: 0; height: 24px; }
}

/* ---------- Ventana de privacidad ---------- */
dialog.dlg-privacidad { width: min(520px, calc(100% - 32px)); }

.dlg-privacidad .dlg { padding: 32px 32px 30px; }

.dlg-privacidad h2 { margin: 8px 0 0; font-size: clamp(30px, 6vw, 38px); }

.priv-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }

.priv-lista li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--soft); }

.priv-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); }

.priv-ico svg { width: 18px; height: 18px; }

.priv-lista b { display: block; font-size: 15px; color: var(--ink); line-height: 1.3; margin-top: 2px; }

.priv-lista span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.dlg-privacidad .demo-note { margin-top: 14px; }

.dlg-mas { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 650; color: var(--ink); text-decoration: none; }

.dlg-mas svg { width: 16px; height: 16px; color: var(--brand); transition: transform .3s var(--ease); }

.dlg-mas:hover svg { transform: translateX(4px); }

@media (max-width: 760px) {
  .dlg-privacidad .dlg { padding: 26px 20px 24px; }
}

/* ---------- «Cómo lo hacemos, paso a paso»: botón fino y discreto, centrado bajo los pasos ---------- */
.proceso-mas-fila { display: flex; justify-content: center; margin-top: 24px; }

.proceso-mas { margin: 0; height: 34px; padding: 0 14px 0 16px; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--muted); font-size: 13px; font-weight: 600; transition: color .2s ease, border-color .2s ease; }

.proceso-mas:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }

.proceso-mas svg { width: 14px; height: 14px; }

/* ---------- Ventana «Tu seguridad es lo más importante» ---------- */
#dlg-proceso .dlg { padding: 40px 44px 36px; }

.proc-cab { text-align: center; padding: 0 40px; }

.proc-cab h2 { margin: 10px 0 0; padding-right: 0; font-size: clamp(32px, 5vw, 46px); }

.proc-cab .dlg-lead { max-width: 52ch; margin: 12px auto 0; }

#dlg-proceso .proc-datos { margin: 26px 0 22px; }

#dlg-proceso .proc-datos div { align-items: center; text-align: center; padding: 16px 12px; }

.proc-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.proc-rejilla li { position: relative; padding: 18px 18px 20px; border-radius: 18px; border: 1px solid var(--line); transition: border-color .25s ease; }

.proc-rejilla li:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }

.proc-rejilla .proc-n { width: 28px; height: 28px; font-size: 13px; }

.proc-rejilla h3 { margin: 14px 0 6px; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }

.proc-rejilla p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.proc-pie { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

@media (max-width: 860px) {
  .proc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  #dlg-proceso .dlg { padding: 28px 18px 24px; }
  .proc-cab { padding: 0 34px; }
  .proc-rejilla { grid-template-columns: 1fr; }
  .proc-rejilla li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 14px 16px; }
  .proc-rejilla h3 { margin: 3px 0 4px; }
  .proc-rejilla p { grid-column: 2; }
}

/* Mismo sitio para el botón de cerrar en todas las ventanas (también las grandes) */
dialog.big > .close, dialog.wide > .close, dialog.sheet > .close { top: 16px; right: 16px; }

@media (max-width: 760px) {
  /* Cifras de la ventana de comprobación en móvil: tres baldosas pequeñas, centradas, en fila */
  #dlg-proceso .proc-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 22px 0 18px; }
  #dlg-proceso .proc-datos div { flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 12px 6px; border-radius: 14px; }
  #dlg-proceso .proc-datos b { font-size: 19px; }
  #dlg-proceso .proc-datos span { text-align: center; font-size: 9.5px; letter-spacing: .06em; line-height: 1.3; }
}

/* =====================================================================
   Ajustes finos de las ventanas (medidos)
   ===================================================================== */
/* Botón de cerrar: siempre con su propio fondo (se ve que es un botón sin pasar el ratón) */
dialog > .close { background: color-mix(in srgb, var(--ink) 7%, var(--bg)); border-color: transparent; box-shadow: none; transition: background-color .2s ease; }

dialog > .close:hover { background: color-mix(in srgb, var(--ink) 13%, var(--bg)); border-color: transparent; }

/* «Tu seguridad…»: antetítulo, título y entrada a la misma distancia visual (≈23 px entre letras)… */
.proc-cab h2 { margin-top: 12px; }

/* …y la frase final centrada entre las tarjetas y el borde de abajo (antes 0 px arriba y 54 abajo) */
#dlg-proceso .dlg { padding-bottom: 26px; }

#dlg-proceso .proc-pie { margin: 26px 0 0; }

@media (max-width: 560px) {
  #dlg-proceso .dlg { padding-bottom: 22px; }
  #dlg-proceso .proc-pie { margin-top: 22px; }
}

/* Privacidad: los iconos centrados dentro de su círculo (una regla de texto los convertía en bloque
   y quedaban 9 px arriba) */
.priv-lista .priv-ico { display: grid; place-items: center; margin: 0; }

.priv-lista .priv-ico svg { display: block; }

/* …y «Leer la política completa» a la misma distancia del recuadro de arriba que del borde de abajo */
.dlg-privacidad .dlg { padding-bottom: 16px; }

.dlg-privacidad .dlg-mas { margin-top: 20px; }

@media (max-width: 760px) {
  .dlg-privacidad .dlg { padding-bottom: 14px; }
  .dlg-privacidad .dlg-mas { margin-top: 18px; }
}

/* (más peso: reglas antiguas con «#dlg-proceso h2» y «.icon-btn.ghost» las pisaban) */
#dlg-proceso .proc-cab h2 { margin-top: 13px; }

dialog > .icon-btn.ghost.close { background: color-mix(in srgb, var(--ink) 7%, var(--bg)); border-color: transparent; box-shadow: none; }

dialog > .icon-btn.ghost.close:hover { background: color-mix(in srgb, var(--ink) 13%, var(--bg)); }

/* Ventana del buscador guiado */
dialog.dlg-buscador { width: min(620px, calc(100% - 32px)); }

.dlg-buscador .dlg { padding: 32px 32px 24px; }

.dlg-buscador h2 { margin: 8px 0 0; font-size: clamp(32px, 6vw, 42px); }

@media (max-width: 560px) {
  .dlg-buscador .dlg { padding: 26px 18px 20px; }
}

/* Ventana «Los plazos, en tu calendario» */
dialog.dlg-suscribir { width: min(560px, calc(100% - 32px)); }

.dlg-suscribir .dlg { padding: 32px 32px 26px; }

.dlg-suscribir h2 { margin: 8px 0 0; font-size: clamp(30px, 6vw, 38px); }

.sus-lista { display: grid; gap: 6px; margin-top: 22px; }

.sus-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }

.sus-fila b { display: block; font-size: 14.5px; color: var(--ink); }

.sus-fila span { font-size: 12.5px; color: var(--muted); }

.sus-btns { display: flex; gap: 6px; flex: none; }

.sus-descarga { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

.sus-descarga b { display: block; font-size: 14px; color: var(--ink); }

.sus-descarga span { font-size: 12.5px; color: var(--muted); }

@media (max-width: 560px) {
  .dlg-suscribir .dlg { padding: 26px 18px 20px; }
  .sus-fila { flex-direction: column; align-items: stretch; }
  .sus-btns .btn { flex: 1; }
  .sus-descarga { flex-direction: column; align-items: stretch; }
}

dialog.asis { width: min(680px, calc(100% - 32px)); padding: 0; display: none; }

dialog.asis[open] { display: flex; flex-direction: column; }

.asis .as-cab { display: flex; align-items: center; gap: 18px; padding: 26px 76px 0 32px; }

.asis .as-cab .dlg-k { margin: 0; white-space: nowrap; }

.as-pasos { display: flex; gap: 6px; flex: 1; max-width: 220px; margin: 0; padding: 0; list-style: none; }

.as-pasos li { flex: 1; height: 6px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }

.as-pasos li::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }

.as-pasos li.hecho::after { transform: none; }

.as-pasos li.ahora::after { transform: scaleX(.5); }

.as-cuerpo { padding: 22px 32px 8px; min-height: 340px; }

.as-cuerpo h2 { margin: 0; font-size: clamp(30px, 5.4vw, 42px); line-height: 1; outline: none; }

.as-sub { margin: 10px 0 22px; font-size: 14.5px; color: var(--muted); }

.as-cuerpo.entra-d { animation: asD .32s var(--ease); }

.as-cuerpo.entra-i { animation: asI .32s var(--ease); }

/* Tarjetas de opción */
.as-ops { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }

.as-ops-5 { grid-template-columns: repeat(6, 1fr); }

.as-ops-5 .as-op { grid-column: span 2; }

.as-ops-5 .as-op:nth-child(4) { grid-column: 2 / span 2; }

.as-op { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 150px; padding: 16px 16px 14px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease, background-color .2s ease; }

.as-op:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(10, 10, 20, .35); }

.as-op:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.as-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 11%, var(--bg)); transition: background-color .2s ease, color .2s ease; }

.as-ico svg { width: 24px; height: 24px; }

.as-t { font-size: 15.5px; font-weight: 700; line-height: 1.2; }

.as-s { font-size: 13px; line-height: 1.35; color: var(--muted); }

.as-n { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 650; color: var(--muted); }

.as-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-relleno); color: var(--sobre-color);
  opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .25s var(--ease); }

.as-check svg { width: 13px; height: 13px; }

.as-op[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--bg)); }

.as-op[aria-pressed="true"] .as-ico { background: var(--brand-relleno); color: var(--sobre-color); }

.as-op[aria-pressed="true"] .as-check { opacity: 1; transform: none; }

.as-op[aria-pressed="true"] .as-n { color: var(--brand-ink); }

.as-op.vacia { opacity: .5; }

/* Comunidad: buscador + chips con su número */
.as-busca { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 14px; background: var(--soft); border: 1.5px solid transparent; transition: border-color .2s ease; }

.as-busca:focus-within { border-color: var(--brand); }

.as-busca svg { width: 18px; height: 18px; color: var(--brand); flex: none; }

.as-busca input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; }

.as-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; max-height: 228px; overflow-y: auto; padding: 2px; }

.as-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg);
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }

.as-chip:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }

.as-chip[hidden] { display: none; }

.as-chip-n { min-width: 26px; height: 26px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 700; color: var(--muted); }

.as-chip[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--bg)); }

.as-chip[aria-pressed="true"] .as-chip-n { background: var(--brand-relleno); color: var(--sobre-color); }

.as-chip.vacia { opacity: .45; }

/* Pie: atrás · cuántas encajan · siguiente */
.as-pie { display: flex; align-items: center; gap: 14px; padding: 18px 32px 24px; margin-top: 8px; border-top: 1px solid var(--line); }

.as-atras { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 6px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }

.as-atras:hover { background: var(--soft); color: var(--ink); }

.as-atras svg { width: 18px; height: 18px; }

.as-cuenta { margin-left: auto; font-size: 13.5px; color: var(--muted); white-space: nowrap; }

.as-cuenta b { display: inline-block; min-width: 1.4em; padding: 2px 8px; margin-right: 2px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 12%, var(--bg)); color: var(--brand-ink); text-align: center; font-variant-numeric: tabular-nums; }

.as-sig { height: 46px; padding: 0 24px; }

.as-final .as-cuenta { display: none; }

.as-final .as-sig { margin-left: auto; }

/* Resultado: el número grande sobre una trama de píxeles verdes, como el resto de la web */
.as-res-num { position: relative; display: flex; align-items: flex-end; gap: 16px; padding: 22px 22px 20px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: color-mix(in srgb, var(--brand) 8%, var(--bg)); }

.as-res-num::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: radial-gradient(var(--brand) 1.1px, transparent 1.3px); background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(120% 140% at 100% 0%, #000 0%, transparent 62%); mask-image: radial-gradient(120% 140% at 100% 0%, #000 0%, transparent 62%); }

.as-res-num .display { font-size: clamp(72px, 14vw, 104px); line-height: .82; color: var(--brand-titulo); outline: none; }

.as-res-num p { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.2; max-width: 14ch; }

.as-cero .as-res-num { background: var(--soft); }

.as-cero .as-res-num .display { color: var(--muted); }

.as-res-lista { display: grid; margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }

.as-res-fila { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--ink); text-decoration: none; transition: background-color .2s ease; }

.as-res-fila + .as-res-fila { border-top: 1px solid var(--line); }

.as-res-fila:hover { background: var(--soft); }

.as-res-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }

.as-res-txt b { font-size: 14.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.as-res-tipo { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.as-res-fecha { display: grid; justify-items: end; flex: none; text-align: right; }

.as-res-fecha b { font-size: 20px; line-height: 1; }

.as-res-fecha small { font-size: 11.5px; color: var(--muted); }

.as-mas { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }

.as-nota { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 12.5px; line-height: 1.5; color: var(--muted); }

:root[data-theme="dark"] .as-op, :root[data-theme="dark"] .as-chip { background: var(--soft); }

:root[data-theme="dark"] .as-busca { background: var(--soft); }

@media (max-width: 640px) {
  .asis .as-cab { padding: 22px 64px 0 18px; gap: 12px; }
  .asis .as-cab .dlg-k { display: none; }
  .as-pasos { max-width: none; }
  .as-cuerpo { padding: 18px 18px 6px; min-height: 0; }
  .as-ops, .as-ops-5 { grid-template-columns: 1fr; gap: 8px; }
  .as-ops-5 .as-op, .as-ops-5 .as-op:nth-child(4) { grid-column: auto; }
  /* En móvil cada opción es una fila: icono a la izquierda, texto y número a la derecha */
  .as-op { min-height: 0; padding: 12px 44px 12px 12px; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 1px; align-items: center; border-radius: 16px; }
  .as-op:hover { transform: none; }
  .as-ico { grid-row: span 3; margin: 0; }
  .as-n { margin: 0; padding: 2px 0 0; }
  .as-check { top: 50%; right: 14px; margin-top: -11px; }
  .as-chips { max-height: 40dvh; }
  .as-pie { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); }
  .as-cuenta { font-size: 12.5px; }
  .as-sig { padding: 0 18px; }
  .as-res-num { padding: 18px; }
}

/* =====================================================================
   CONTACTO — correo con Copiar, Gmail y app de correo
   ===================================================================== */
dialog.dlg-contacto { width: min(480px, calc(100% - 32px)); }
.dlg-contacto .dlg { padding: 32px 32px 28px; }
.ct-correo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 14px 14px 14px 18px; border-radius: 16px; background: var(--soft); }
.ct-correo b { font-size: 16px; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.ct-abrir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ct-abrir .btn { height: 46px; }
@media (max-width: 480px) { .ct-abrir { grid-template-columns: 1fr; } .dlg-contacto .dlg { padding: 26px 18px 20px; } }

/* Inicio de sesión: la frase bajo el botón, centrada y con el enlace del mismo tamaño que el texto */
.login-fine { text-align: center; margin: 14px auto 0; max-width: 34ch; }
.login-fine .link { font: inherit; color: var(--ink); vertical-align: baseline; }

/* ─────────── fuente/estilos/08-perfil.css ─────────── */
/* =====================================================================
   Perfil: cabecera, pestañas, favoritas, preferencias, avisos, cuenta
   ===================================================================== */

.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 13px; line-height: 1; border: 0; cursor: pointer; text-decoration: none; flex: none; }

.avatar.lg { width: 56px; height: 56px; font-size: 19px; }

/* ---------- Perfil ---------- */

.tab { position: relative; border: 0; background: none; height: 44px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

.tab:hover { color: var(--ink); }

.tab[aria-selected="true"] { color: var(--ink); }

.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 4px; border-radius: 4px 4px 0 0; background: var(--brand); }

.tab .n { font-size: 12px; line-height: 20px; height: 20px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--ink); text-align: center; }

@media (max-width: 760px) {
  .tab { padding: 0 10px; font-size: 14px; }
}

.ptipo { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }

.ptipo[aria-pressed="true"] { background: var(--open-tint); color: var(--open); border: 1px solid color-mix(in srgb, var(--open) 40%, transparent); }

.ptipo[aria-pressed="true"] svg { width: 12px; height: 12px; flex: none; }

.ptipo[aria-pressed="false"] { background: transparent; color: var(--muted); border: 1px dashed var(--line); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }

.ptipo:hover { border-style: solid; border-color: var(--ink); }

.avatar { transition: box-shadow .25s ease; }

/* =====================================================================
   PERFIL: cabecera con datos clave, pestañas en píldora y todo en tarjetas
   ===================================================================== */
.profile { padding: 40px 0 88px; }

.p-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; gap: 28px;
  padding: 28px; border-radius: 26px; background: var(--soft); }

.p-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle 360px at 0% 100%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%); }

.p-id { display: flex; align-items: center; gap: 18px; min-width: 0; }

.p-id .avatar.lg { width: 64px; height: 64px; font-size: 21px; box-shadow: 0 0 0 4px var(--bg); }

.p-id h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); }

.p-id p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }

.p-stats { flex-wrap: wrap; justify-content: flex-end; }

.p-stat { padding: 14px 16px; border-radius: 16px; background: var(--bg); border: 1px solid transparent; text-align: left; color: inherit; text-decoration: none; cursor: pointer; font: inherit; transition: border-color .2s ease; }

.p-stat:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }

.p-stat b { font-size: 34px; line-height: .85; }

.p-stat span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); max-width: 22ch; }

.p-tabs { display: flex; gap: 4px; margin: 24px 0 20px; padding: 4px; border-radius: 999px; background: var(--soft); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }

.p-tabs::-webkit-scrollbar { display: none; }

.p-tab { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }

.p-tab:hover { color: var(--ink); }

.p-tab[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.p-tab .n { font-size: 11px; line-height: 18px; height: 18px; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--brand-soft); color: var(--ink); text-align: center; }

.tab-panel { padding-top: 0; display: grid; gap: 14px; }

.p-card { border: 1px solid var(--line); border-radius: 22px; padding: 24px; background: var(--bg); }

.p-card-h { margin: 0 0 6px; font-size: 18px; font-weight: 700; }

.p-help { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.p-help b { color: var(--ink); font-weight: 600; }

.p-card-list .rows .row:last-child::after { display: none; }

.p-list-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.p-card-slim { padding: 14px 16px 14px 20px; }

.p-prefs-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.p-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.p-chip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--ink); }

.p-muted { font-size: 13px; color: var(--muted); }

.p-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 32px 12px; }

.p-empty > svg { width: 28px; height: 28px; color: var(--brand); }

.p-empty b { font-size: 17px; }

.p-empty p { margin: 0 0 6px; max-width: 46ch; font-size: 14px; color: var(--muted); }

.p-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: start; }

.p-card .kv { margin-top: 12px; }

.p-form { margin-top: 16px; }

.p-card .toggles { margin-top: 0; }

/* Preferencias */
.pref-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 4px 4px 6px; }

.pref-head h2 { margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 38px); }

.pref-head p { margin: 0; max-width: 58ch; font-size: 14px; line-height: 1.6; color: var(--muted); }

.pref-count { display: grid; justify-items: end; gap: 6px; flex: none; }

.pref-count b { font-size: 56px; line-height: .8; color: var(--brand); }

.pref-count span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.pref-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.p-card-pref { display: flex; flex-direction: column; }

.pref-ops { display: flex; flex-wrap: wrap; gap: 8px; }

.pref-op { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .25s; }

.pref-op small { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.pref-op svg { width: 14px; height: 14px; flex: none; }

.pref-op:hover { border-color: color-mix(in srgb, var(--brand) 60%, var(--ink)); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--brand) 85%, transparent); }

.pref-op[aria-pressed="true"] { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--ink); }

.pref-op[aria-pressed="true"] svg { color: var(--brand); }

.pref-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 6px 4px 0; }

.pref-foot .link[disabled] { opacity: .4; cursor: default; text-decoration: none; }

@media (max-width: 760px) {
  .profile { padding-top: 24px; }
  .p-hero { grid-template-columns: 1fr; padding: 22px; gap: 20px; border-radius: 22px; }
  .p-stats { justify-content: flex-start; }
  .p-stat { min-width: 0; flex: 1 1 calc(50% - 5px); }
  .p-tabs { width: auto; }
  .p-card { padding: 20px; border-radius: 20px; }

  .p-two, .pref-grid { grid-template-columns: 1fr; }
  .pref-head { flex-direction: column; align-items: flex-start; }
  .pref-count { justify-items: start; }
  .pref-foot .btn.big { width: 100%; }
}

.p-stat small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }

/* Pestañas del perfil: texto centrado de verdad (el JS lo mete en .t) */
.p-tab .t { line-height: 1; }

.p-tab .n { display: inline-flex; align-items: center; justify-content: center; }

/* Foto de perfil: al pasar el ratón se difumina y aparece «Cambiar foto de perfil» */
.avatar-edit { position: relative; display: inline-grid; flex: none; border-radius: 50%; cursor: pointer; }

.avatar-edit .avatar.lg { width: 88px; height: 88px; font-size: 28px; overflow: hidden; transition: filter .3s ease; }

.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.avatar { overflow: hidden; }

.avatar-capa { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 3px; padding: 10px;
  background: rgba(8, 8, 12, .5); color: var(--sobre-color); text-align: center; opacity: 0; transition: opacity .3s ease; }

.avatar-capa svg { width: 20px; height: 20px; }

.avatar-capa span { font-size: 9.5px; font-weight: 700; line-height: 1.15; letter-spacing: .02em; }

.avatar-edit:hover .avatar, .avatar-edit:focus-within .avatar { filter: blur(2px); }

.avatar-edit:hover .avatar-capa, .avatar-edit:focus-within .avatar-capa { opacity: 1; }

.avatar-edit:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (hover: none) {
  .avatar-capa { opacity: 1; background: rgba(8, 8, 12, .35); }
  .avatar-capa span { display: none; }
}

/* Tarjeta de favoritas del perfil: más aire abajo */

/* Perfil: el panel solo hace un fundido suave al cambiar de pestaña (nunca al marcar preferencias) */
.tab-panel { animation: none; }

.tab-panel.entra { animation: panelEntra .28s ease; }

/* «Para ti»: resumen de preferencias en una sola línea; el detalle se despliega aparte */
.p-prefs-line { flex-wrap: nowrap; }

.p-prefs-line .p-chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow: hidden; }

.p-prefs-line .p-chip { white-space: nowrap; flex: none; }

.p-prefs-line > .btn { flex: none; }

.p-ver { flex: none; border: 0; background: none; padding: 4px 6px; font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }

.p-ver:hover { color: var(--ink); text-decoration-color: currentColor; }

.p-detalle { margin: 14px 0 2px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

.p-det { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; }

.p-det dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-top: 6px; }

.p-det dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 760px) {
  .p-prefs-line { flex-wrap: wrap; }
  .p-prefs-line .p-chips { flex-basis: 100%; flex-wrap: wrap; }
  .p-det { grid-template-columns: 1fr; gap: 6px; }
  .p-det dt { padding-top: 0; }
}

/* Tarjetas de listas del perfil: la fila resaltada queda a la misma distancia del borde por los cuatro lados */
.p-card-list { padding: 20px; }

.p-card-list .p-list-head { padding-top: 0; }

@media (max-width: 760px) {
  .p-card-list { padding: 14px; }
}

/* Perfil: las cuatro cajas de cifras miden siempre lo mismo (no cambian al añadir o quitar favoritas) */
.p-stats { display: grid; gap: 10px; }

.p-stat { min-width: 0; align-content: start; }

.p-stat small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: none; }

.p-stat.sin { cursor: default; }

.p-stat.sin:hover { border-color: transparent; }

.p-stat.sin b { color: var(--muted); }

.p-stat.sin small { color: var(--muted); font-weight: 500; }

.p-stat:not(.p-stat-next)::after { font-size: 12.5px; line-height: 1.3; }

/* Ancho fijo por caja para que ninguna etiqueta se parta en dos líneas */
.p-hero { grid-template-columns: minmax(0, 1fr) auto; }

.p-stats { grid-template-columns: repeat(4, 156px); }

.p-stat span { white-space: nowrap; }

@media (max-width: 1100px) {
  .p-hero { grid-template-columns: 1fr; }
  .p-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.p-hero::after { filter: saturate(1.15); opacity: 1; background: radial-gradient(circle 380px at 0% 100%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%); }

/* Cabecera del perfil con lámpara de lava animada: sustituye a su luz fija */
.p-hero.con-onda::after { display: none; }

/* Perfil: en cada caja la cifra arriba a la izquierda y la etiqueta abajo, más suave */
.p-stat { display: flex; flex-direction: column; justify-content: flex-start; min-height: 112px; gap: 6px; }

.p-stat:not(.p-stat-next)::after { content: none; }

.p-stat > span { margin-top: auto; opacity: .75; }

.p-stat small { opacity: .8; }

.pp-tit { display: inline-flex; align-items: center; gap: 10px; }

.pp-tit svg { width: 17px; height: 17px; color: var(--brand); }

.pp-n { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }

.pp-n b { color: var(--ink); }

.pp-nota { margin: 12px 16px 4px; font-size: 12.5px; color: var(--muted); }

/* ─────────── fuente/estilos/09-pie.css ─────────── */
/* =====================================================================
   Pie de página, aviso flotante y botón de subir
   ===================================================================== */

.fab { display: none; }

.fine { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

/* ---------- Pie ---------- */
footer { padding: 40px 0 48px; font-size: 13px; color: var(--muted); }

footer .wrap { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.foot-note { margin: 14px 0 0; max-width: 460px; }

.foot-links { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; align-content: flex-start; }

.foot-links a { text-decoration: none; }

.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Avisos flotantes ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s var(--ease); pointer-events: none; z-index: 60; max-width: calc(100% - 32px); text-align: center; }

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.to-top { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 20; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }

.to-top.show { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 760px) {
  .fab {
      display: inline-flex; align-items: center; gap: 8px; position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
      z-index: 22; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 700; box-shadow: var(--shadow); cursor: pointer;
    }
  .fab svg { width: 16px; height: 16px; }
  .fab .n { font-size: 11px; line-height: 18px; height: 18px; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--ink); text-align: center; }
}

.fab { transition: box-shadow .25s ease; }

/* ─────────── fuente/estilos/10-movimiento.css ─────────── */
/* =====================================================================
   Animaciones (@keyframes) compartidas
   ===================================================================== */

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Cada columna: número, etiqueta y gráfico apilados y centrados en los dos ejes */
/* El número: caja recortada a la altura real de las cifras para que el centrado sea exacto */
/* Halo al pasar el ratón: ocupa toda la columna y está centrado en ella (no en la cifra).
   «closest-side» hace que el círculo toque justo los bordes de arriba y abajo: nunca se corta. */
/* Mini gráficos bajo cada número */
/* Medidor: qué parte del catálogo está en ese estado. Escala a cualquier número de convocatorias. */
@keyframes aparece { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }

@keyframes latidoVerde { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--open) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

@keyframes crece { from { transform: scaleX(0); } to { transform: none; } }

@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

@keyframes rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@keyframes pop { 40% { transform: scale(1.3); } }

@keyframes dlgin { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

@keyframes sheetin { from { transform: translateX(100%); } to { transform: none; } }

@keyframes ring { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }

@keyframes corchete { to { transform: scaleY(1); } }

@keyframes panelEntra { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@keyframes portadaEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes fpEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  @keyframes fpSube { from { transform: translateY(100%); } to { transform: none; } }
}

@keyframes asD { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

@keyframes asI { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

/* ─────────── fuente/estilos/11-accesibilidad.css ─────────── */
/* =====================================================================
   Movimiento reducido e impresión
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .top, .hero, .toolbar, .filters, .tipos, .how, .newsletter, footer, .star, .actions, .notify, .to-top, .toast { display: none !important; }
  .collapse { grid-template-rows: 1fr !important; }
  .collapse > .collapse-in { opacity: 1 !important; transform: none !important; }
  body { color: #000; background: #fff; }
}

@media (prefers-reduced-motion: reduce) { .row.open .row-body-in::before { transform: none; } }

@media (prefers-reduced-motion: reduce) { .js .tipos-filas > .tfila, .js .tipos-filas > .tf-cta { opacity: 1; transform: none; } }