/* =====================================================================
   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); }
.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: color-mix(in srgb, var(--brand) 75%, var(--ink)); }
.v2-check svg { width: 13px; height: 13px; flex: none; color: var(--brand); }
.v2-note { color: var(--muted); font-style: italic; }
/* 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; }

/* ---------- ¿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; background: var(--ink); color: var(--bg); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease); }
.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); opacity: .5; transition: opacity .35s ease; }

.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; color: color-mix(in srgb, var(--bg) 75%, var(--ink)); 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); }
.v2 .tipos .legend-title { margin-top: 48px; }

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

/* ---------- Próximamente ---------- */

@media (max-width: 760px) {
  .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 */
@media (max-width: 760px) {
  .v2-h1 { font-size: clamp(32px, 9.4vw, 44px); max-width: none; }
  .v2 .live { margin-bottom: 18px; font-size: 11px; }
  .v2-lead { font-size: 14.5px; }
}

/* =====================================================================
   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; }
.status .t, .chip-x .t, .seg button .t { line-height: 1; }

/* 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; }
.group-title + ul.rows > .row:first-child, .group-title + .group-note + ul.rows > .row:first-child, #results > ul.rows:first-child { border-top: 0; }
.group-title + ul.rows, .group-title + .group-note + ul.rows, #results > ul.rows:first-child { box-shadow: 0 -1px 0 var(--line); }
@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; }
/* En pantallas táctiles no hay «hover» (evita que una fila se quede resaltada al tocarla) */
@media (hover: none) { .row-top:hover { background: none; } }

/* 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; font-size: clamp(40px, 4.85vw, 62px); }
  .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; }
body:not(.is-todas) .v2 #lista, body.v2:not(.is-todas) #lista { padding-top: clamp(96px, 16vh, 160px); }
body.is-todas #lista > .wrap[data-reveal] { opacity: 1; transform: none; transition: none; }

/* ---------- 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; padding: 18px 0 4px; }

/* 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); }
a.v2-next:hover .v2-go { color: var(--ink); }
a.v2-next:hover .v2-go svg { transform: translateX(4px); }

/* 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; gap: 10px; 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; }
  body.v2:not(.is-todas) #lista { padding-top: 72px; }
}
/* Cada línea del titular cabe siempre entera: el tamaño se ajusta al ancho de pantalla (tope 62 px) */
@media (min-width: 761px) {
  .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; }
a.v2-next:hover .v2-date { color: var(--open); }

/* =====================================================================
   «¿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 {
  opacity: .75;
  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; }
.inline-form input { background: var(--bg); }
@media (max-width: 760px) {
  .newsletter { padding: 48px 0; }
  .newsletter .wrap { margin: 0 16px; padding: 28px 22px; border-radius: 20px; }
  .inline-form input { flex: none; height: 48px; }
  .inline-form .btn { height: 48px; }
}

/* «¿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: color-mix(in srgb, var(--brand) 78%, var(--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 {
  opacity: .75;
  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%);
}
:root[data-theme="dark"] .v2-fork-card::after { opacity: .6; }
.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; }

/* Primer instante tras cargar o recargar: nada se anima ni se desplaza */
html.primera *, html.primera *::before, html.primera *::after { transition: none !important; }
html.primera .row, html.primera .month, html.primera .viz-meter .track i, html.primera .viz-bar i, html.primera dialog[open] { animation: none !important; }

/* «¿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%);
  }
}

/* «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; }
}

/* =====================================================================
   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.
   ===================================================================== */
body.is-todas .listing { padding-top: 72px; }
.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; }
#results > ul.rows:first-child { margin-top: 16px; }
.row:last-child::after { display: none; }
@media (max-width: 760px) {
  body.is-todas .listing { padding-top: 44px; }
}

/* =====================================================================
   «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; }
body.is-todas .listing { padding-top: 48px; }
#lista .search { max-width: none; margin: 20px 0 6px; }
#lista .search input { height: 48px; }
@media (max-width: 760px) {
  body.is-todas .listing { padding-top: 28px; }
  #lista .search { margin-top: 16px; }
}

/* ---------- «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 svg { width: 13px; height: 13px; }
.pill-btn.quitar:hover { color: var(--closed); background: var(--closed-tint); }
#toggle-filters + .quitar:not([hidden]) { margin-left: -4px; }
.quitar:not([hidden]) + #toggle-saved { margin-left: 12px; }
.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 { flex: 1; }
  #orden-btn { width: 100%; justify-content: space-between; }
  .orden-menu { left: 0; right: auto; min-width: 100%; transform-origin: top left; }
}

/* ---------- 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; }
}

/* =====================================================================
   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; grid-template-columns: auto 1fr; 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 { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.p-stat { display: grid; gap: 6px; min-width: 120px; 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 { padding: 8px 20px; }
.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; flex-wrap: wrap; }
.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-card-list { padding: 4px 14px; }
  .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%; }
}

/* Móvil: la barra de filtros cabe en dos filas limpias */
@media (max-width: 760px) {
  .pill-btn.quitar { width: 34px; padding: 0; justify-content: center; }
  .pill-btn.quitar .t { display: none; }
  .quitar:not([hidden]) + #toggle-saved { margin-left: 6px; }
  #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; }
}
@media (max-width: 760px) { .toolbar-group { gap: 6px; } }
.p-stat small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; max-width: 24ch; }

/* 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; }
#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; }

/* 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; }

/* 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: #fff; 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; } }

/* «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%, #000);
}
.pill-btn.quitar svg { width: 12px; height: 12px; }
.pill-btn.quitar:hover {
  border-color: var(--closed); color: color-mix(in srgb, var(--closed) 85%, #000);
  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: #ff8a85; background: color-mix(in srgb, var(--closed) 28%, var(--bg)); }
@media (max-width: 760px) { .pill-btn.quitar { width: 30px; } }
@media (max-width: 760px) { .toolbar-group:first-child .pill-btn:not(.quitar) { padding: 0 11px; gap: 6px; } }
@media (max-width: 760px) { #toggle-filters .caret { display: none; } }
@media (max-width: 760px) { .toolbar-group:first-child { flex: 1 1 100%; } }

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

/* Tarjeta de favoritas del perfil: más aire abajo */
.p-card-list { padding: 8px 20px 20px; }

/* =====================================================================
   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; }
@keyframes corchete { to { transform: scaleY(1); } }
@media (max-width: 760px) {
  .row-body-in { margin: 0 0 24px; padding: 14px 12px 14px 24px; }
  .row-body-in::before { left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .row.open .row-body-in::before { transform: none; } }

/* 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; }
@keyframes panelEntra { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* «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; }
}

/* «Todas»: el mismo aire entre la cabecera y el título que entre los filtros y «Abiertas ahora» */
body.is-todas .listing { padding-top: 64px; }
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; }
@media (max-width: 760px) {
  body.is-todas .listing { padding-top: 40px; }
  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: 28px; }
}
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); }
.fijo .filters { padding-bottom: 2px; }
/* Si el panel está abierto y la barra va pegada, el panel nunca pasa del alto de la pantalla */
.fijo .filters-card { max-height: calc(100dvh - var(--header) - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fijo .filters-card::-webkit-scrollbar { width: 5px; }
.fijo .filters-card::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }
.fijo .filters-card::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: 999px; }
@media (max-width: 760px) {
  .fijo { position: static; }
  .fijo .filters-card { max-height: none; overflow: visible; }
}

/* =====================================================================
   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; }
@keyframes portadaEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   «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; transition: background-color .2s ease; }
.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; }
}

/* =====================================================================
   «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; }
.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); color: #fff; 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: color-mix(in srgb, var(--brand) 72%, var(--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) {
  .proceso { grid-template-columns: 1fr; gap: 12px; }
  .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; }

/* 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; } }

/* «Los cinco tipos»: más separación de «¿Qué tienes entre manos?» y hover suave con un tono propio (verde muy tenue) */
.v2 .tipos .legend-title { margin-top: 72px; }
.tfila { transition: background-color .3s ease; }
.tfila:hover { background: color-mix(in srgb, var(--brand) 7%, var(--bg)); }
.tf-gets li { transition: background-color .3s ease; }
@media (max-width: 760px) { .v2 .tipos .legend-title { margin-top: 56px; } }

/* =====================================================================
   «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; } }
@media (prefers-reduced-motion: reduce) { .js .tipos-filas > .tfila, .js .tipos-filas > .tf-cta { opacity: 1; transform: none; } }

/* 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; }

/* 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%, #ff8a00); }
.row[data-estado="cerrada"] .row-body-in::before { background: var(--closed); }

/* «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; }
}

/* =====================================================================
   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; }

/* Perfil: las cuatro cajas de cifras miden siempre lo mismo (no cambian al añadir o quitar favoritas) */
.p-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); 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 { content: "\00a0"; font-size: 12.5px; line-height: 1.3; }  /* misma altura que la caja con nombre */
@media (max-width: 760px) { .p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 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)); } }

/* =====================================================================
   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; }
.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%); }
/* 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; }
/* Cabecera del perfil con lámpara de lava animada: sustituye a su luz fija */
.p-hero.con-onda::after { display: none; }

/* «¿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; }

/* «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); }
.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; }
a.tfila:hover .tf-link, a.tfila:focus-visible .tf-link { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.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);
}
.proceso-mas { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 650; color: var(--ink); }
.proceso-mas svg { width: 16px; height: 16px; 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 .dlg { padding: 36px 40px 40px; }
.proc-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--brand) 78%, var(--ink)); }
#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-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.proc-lista li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 14px 0; }
.proc-lista li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 52px; bottom: -8px; border-left: 2px dashed color-mix(in srgb, var(--brand) 40%, transparent); }
.proc-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--brand); color: #fff; box-shadow: 0 0 0 5px var(--brand-soft); }
.proc-lista h3 { margin: 6px 0 6px; font-size: 16.5px; font-weight: 700; }
.proc-lista p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 62ch; }
@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; }
}

/* 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; }
.proc-datos b { white-space: nowrap; }
@media (max-width: 760px) { .proc-datos b { font-size: 22px; } .proc-datos span { text-align: right; } }

/* =====================================================================
   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.
   ===================================================================== */
.v2-proof {
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .04),
    0 6px 12px -4px rgba(16, 24, 40, .05),
    0 24px 48px -18px rgba(16, 24, 40, .12),
    0 50px 90px -50px color-mix(in srgb, var(--brand) 32%, transparent);
}
:root[data-theme="dark"] .v2-proof {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 10px 24px -10px rgba(0, 0, 0, .55),
    0 30px 60px -24px rgba(0, 0, 0, .7),
    0 50px 100px -50px color-mix(in srgb, var(--brand) 26%, transparent);
}

/* 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);
}