/* =========================================================================
   Araant — páginas de plataforma, «para quién», principios, preguntas,
   acceso y aviso legal. Prefijo pl-.

   Se carga después de sitio.css, marco.css y catalogo.css (de ahí las
   variables --cielo y --arena y las piezas ct-*).

   Reglas de la casa:
   - Nada de texto por debajo de 12 px ni en --slate (no llega a 4,5:1).
   - Color con función: --cielo marca lo comprobado, --arena lo pendiente.
     El cobalto queda solo para la acción principal (sitio.css).
   - Los trazos que se dibujan solo existen si plataforma.js marca el bloque
     como «en espera» (fuera de pantalla): sin JS, o con movimiento reducido,
     todo está dibujado desde el principio.
   ========================================================================= */

/* --- Cabecera de página --------------------------------------------------- */
.pl-heroe .velo {
  background:
    linear-gradient(90deg, rgba(23, 23, 33, 0.8) 0%, rgba(23, 23, 33, 0.44) 54%, rgba(23, 23, 33, 0.1) 100%),
    linear-gradient(0deg, var(--onyx) 0%, rgba(23, 23, 33, 0) 38%);
}
.pl-heroe .titular-xl { max-width: 23ch; }
.pl-heroe .entradilla { max-width: 56ch; color: var(--mist); }
.pl-heroe .heroe__acciones { margin-top: clamp(24px, 3vw, 36px); }

/* Ficha técnica: cuatro datos de un vistazo, como en la primera página de un informe. */
.pl-ficha {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1040px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0;
  border-top: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea);
  background: rgba(23, 23, 33, 0.52);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pl-ficha > div { min-width: 0; padding: 16px 20px 18px; border-right: 1px solid var(--linea); }
.pl-ficha > div:first-child { padding-left: 0; }
.pl-ficha > div:last-child { border-right: 0; }
.pl-ficha dt { font-size: 12px; line-height: 1.2; font-weight: 480; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.pl-ficha dd { margin: 10px 0 0; font-family: var(--f-titular); font-stretch: 112%; font-weight: 480; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.22; color: var(--ivory); overflow-wrap: anywhere; }
.pl-ficha dd .cifra { font-size: 1.3em; line-height: 1; letter-spacing: -0.005em; }
.pl-ficha dd small { display: block; margin-top: 4px; font-family: var(--f-texto); font-stretch: 100%; font-size: 13px; font-weight: 400; color: var(--ash); }

/* --- Bandas de fondo ------------------------------------------------------ */
.pl-luz {
  border-block: 1px solid var(--linea);
  background:
    radial-gradient(70% 100% at 8% 0%, rgba(147, 166, 193, 0.21), rgba(147, 166, 193, 0) 62%),
    radial-gradient(60% 90% at 100% 100%, rgba(217, 203, 176, 0.1), rgba(217, 203, 176, 0) 62%),
    var(--grafito);
}

/* El formulario de acceso (componente compartido, sitio.css) rebasaba su tarjeta: los campos
   no se encogían. Aquí se corrige solo para estas páginas. */
.cierre__formulario .formulario, .pl-acceso__form .formulario { grid-template-columns: minmax(0, 1fr); }
.cierre__formulario .formulario__fila, .pl-acceso__form .formulario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cierre__formulario .campo, .pl-acceso__form .campo { min-width: 0; }
.cierre__formulario .campo input, .pl-acceso__form .campo input { width: 100%; min-width: 0; }
.pl-foto { position: relative; isolation: isolate; overflow: hidden; border-block: 1px solid var(--linea); }
.pl-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/sitio/medios/horizonte-1280.webp") 50% 92% / cover no-repeat;
}
.pl-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(147, 166, 193, 0.2), rgba(147, 166, 193, 0) 70%),
    linear-gradient(180deg, var(--onyx) 0%, rgba(23, 23, 33, 0.6) 30%, rgba(23, 23, 33, 0.38) 100%);
}

/* --- Flujo: pasos sobre un riel que se dibuja ------------------------------ */
.pl-flujo { --n: 3; --oculto: scaleX(0); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pl-flujo--4 { --n: 4; }
.pl-flujo--5 { --n: 5; }
.pl-flujo--6 { --n: 6; }
.pl-flujo--7 { --n: 7; }
.pl-flujo__paso { position: relative; min-width: 0; padding: 38px clamp(14px, 1.8vw, 28px) 12px 0; }
.pl-flujo__paso::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px;
  background: var(--linea-fuerte); transform-origin: left;
  transition: transform 0.9s var(--curva-suave) calc(var(--i, 0) * 0.2s);
}
.pl-flujo__paso:last-child::before { right: 35%; background: linear-gradient(90deg, var(--linea-fuerte), rgba(237, 237, 243, 0)); }
.pl-flujo__paso::after {
  content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--ivory); background: var(--onyx);
  transition: opacity 0.4s var(--curva) calc(var(--i, 0) * 0.2s), transform 0.5s var(--curva-suave) calc(var(--i, 0) * 0.2s);
}
.pl-flujo__n { display: block; margin-bottom: 10px; font-size: 13px; letter-spacing: 0.08em; color: var(--ash); font-variant-numeric: tabular-nums; }
.pl-flujo__paso h3 { margin: 0 0 10px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.18; letter-spacing: 0.01em; }
.pl-flujo__paso p { margin: 0; color: var(--ash); font-size: 15px; line-height: 1.5; max-width: 34ch; }
.pl-flujo__paso .punto, .pl-flujo__paso .estado { margin-top: 16px; }
.pl-flujo--cielo .pl-flujo__paso::after { border-color: var(--cielo); }
.pl-flujo--cielo .pl-flujo__paso::before { background: color-mix(in srgb, var(--cielo) 55%, transparent); }
.pl-flujo--cielo .pl-flujo__paso:last-child::before { background: linear-gradient(90deg, color-mix(in srgb, var(--cielo) 55%, transparent), rgba(147, 166, 193, 0)); }
.pl-flujo--cielo .pl-flujo__n { color: var(--cielo); }

.pl-espera .pl-flujo__paso::before { transform: var(--oculto); }
.pl-espera .pl-flujo__paso::after { opacity: 0; transform: scale(0.3); }

/* --- Estados de un dato ---------------------------------------------------- */
.pl-marca { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ivory); }
.pl-marca--hecho { background: var(--ivory); }
.pl-marca--interp { border-color: var(--cielo); background: radial-gradient(circle, var(--cielo) 0 3px, transparent 3.6px); }
.pl-marca--confirmar { border-style: dashed; border-color: var(--arena); }
.pl-marca--nada { border-color: var(--slate); }

.pl-estados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.pl-estados--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-estados > li { padding: 26px clamp(16px, 2vw, 32px) 10px 0; border-right: 1px solid var(--linea); }
.pl-estados > li + li { padding-left: clamp(16px, 2vw, 32px); }
.pl-estados > li:last-child { border-right: 0; }
.pl-estados h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.15; }
.pl-estados p { margin: 0; max-width: 34ch; color: var(--ash); font-size: 15px; line-height: 1.55; }
.pl-estados .pl-sin { font-family: var(--f-titular); font-stretch: 112%; font-weight: 480; line-height: 1; }

/* --- Celdas con filete (nueve tipos, métricas, cuatro atributos) ------------ */
.pl-celdas { --c: 3; display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); border-left: 1px solid var(--linea); }
.pl-celdas--2 { --c: 2; }
.pl-celdas--4 { --c: 4; }
.pl-celdas--5 { --c: 5; }
.pl-celdas > li { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 150px; padding: clamp(20px, 2.2vw, 30px); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); transition: background-color 0.3s var(--curva); }
.pl-celdas > li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--ivory); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--curva-suave); }
.pl-celdas > li:hover { background: rgba(237, 237, 243, 0.035); }
.pl-celdas > li:hover::before { transform: scaleX(1); }
.pl-celdas h3 { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; letter-spacing: 0.01em; }
.pl-celdas p { margin: 0; color: var(--ash); font-size: 15px; line-height: 1.5; }
.pl-celdas--corto > li { min-height: 0; }
.pl-celdas--sencillas > li { min-height: 0; padding-block: 18px; }

/* --- Cifras grandes con filete ---------------------------------------------- */
.pl-gran { display: block; font-family: var(--f-titular); font-stretch: 112%; font-weight: 480; font-size: clamp(44px, 6vw, 92px); line-height: 0.95; letter-spacing: -0.01em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.pl-gran small { font-size: 0.34em; letter-spacing: 0; color: var(--ash); margin-left: 0.2em; font-weight: 400; }
.pl-cifras-fila { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px var(--hueco); align-items: end; }
.pl-cifras-fila__texto { max-width: 52ch; }
.pl-cifras-fila__texto p { color: var(--ash); font-size: 17px; line-height: 1.55; }
.pl-barra { margin-top: 22px; height: 6px; border-radius: 3px; background: var(--linea); overflow: hidden; }
.pl-barra__relleno { display: block; height: 100%; width: calc(var(--p, 0) * 1%); min-width: 3px; border-radius: 3px; background: var(--cielo); transform-origin: left; transition: transform 1.1s var(--curva-suave); }
.pl-espera .pl-barra__relleno { transform: scaleX(0); }
.pl-pie-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-top: 14px; color: var(--ash); font-size: 14px; }
.pl-pie-cifra b { color: var(--ivory); font-weight: 480; }

/* --- Pesos del encaje -------------------------------------------------------- */
.pl-pesos__barra { display: flex; gap: 3px; height: clamp(54px, 6vw, 88px); margin: 0 0 clamp(20px, 2.4vw, 32px); padding: 0; list-style: none; }
.pl-pesos__tramo { position: relative; flex: var(--p) 1 0; min-width: 0; border-top: 3px solid var(--cielo); background: linear-gradient(180deg, rgba(147, 166, 193, 0.5), rgba(147, 166, 193, 0.12)); transform-origin: left; transition: transform 0.9s var(--curva-suave) calc(var(--i, 0) * 0.12s); }
.pl-pesos__tramo:nth-child(2) { background: linear-gradient(180deg, rgba(147, 166, 193, 0.42), rgba(147, 166, 193, 0.1)); }
.pl-pesos__tramo:nth-child(3) { background: linear-gradient(180deg, rgba(147, 166, 193, 0.36), rgba(147, 166, 193, 0.08)); }
.pl-pesos__tramo:nth-child(4) { background: linear-gradient(180deg, rgba(147, 166, 193, 0.3), rgba(147, 166, 193, 0.07)); }
.pl-pesos__tramo:nth-child(5) { background: linear-gradient(180deg, rgba(147, 166, 193, 0.24), rgba(147, 166, 193, 0.05)); }
.pl-pesos__tramo:nth-child(6) { background: linear-gradient(180deg, rgba(147, 166, 193, 0.18), rgba(147, 166, 193, 0.04)); }
.pl-espera .pl-pesos__tramo { transform: scaleX(0); }
.pl-pesos__lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.pl-pesos__lista li { padding: 16px 14px 0 0; border-top: 1px solid var(--linea-fuerte); }
.pl-pesos__lista .pl-gran { font-size: clamp(32px, 3.6vw, 52px); }
.pl-pesos__lista span:not(.pl-gran) { display: block; margin-top: 8px; color: var(--ash); font-size: 14px; line-height: 1.35; }

/* --- Hub: una ficha, varios usos ---------------------------------------------- */
.pl-hub { display: grid; grid-template-columns: minmax(230px, 3.2fr) minmax(56px, 1.3fr) minmax(0, 7.5fr); align-items: stretch; }
.pl-hub__origen { align-self: center; padding: 24px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); background: rgba(23, 23, 33, 0.6); }
.pl-hub__origen h3 { margin: 12px 0 16px; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; }
.pl-hub__origen ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-hub__origen li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pildora); color: var(--ash); font-size: 13px; }
.pl-hub__lineas { width: 100%; height: 100%; min-height: 240px; overflow: visible; transition: clip-path 1.4s var(--curva-suave); clip-path: inset(0 0 0 0); }
.pl-hub__lineas path { fill: none; stroke: var(--cielo); stroke-width: 1; stroke-opacity: 0.7; vector-effect: non-scaling-stroke; }
.pl-hub__lineas path.pl-hub__tenue { stroke-opacity: 0.35; }
.pl-espera .pl-hub__lineas { clip-path: inset(0 100% 0 0); }
.pl-hub__salidas { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.pl-hub__salidas > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.pl-hub__salidas h3 { grid-column: 1; margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; }
.pl-hub__salidas p { grid-column: 1; margin: 0; color: var(--ash); font-size: 14px; line-height: 1.45; }
.pl-hub__salidas .estado { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pl-hub__salidas a { display: inline-block; min-height: 28px; color: inherit; text-decoration: none; }
.pl-hub__salidas a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Comparación: hoy / con Araant -------------------------------------------- */
.pl-compara { width: 100%; border-collapse: collapse; }
.pl-compara th { padding: 0 16px 14px 0; border-bottom: 1px solid var(--linea-fuerte); text-align: left; font-size: 12px; font-weight: 480; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.pl-compara td { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--linea); vertical-align: top; font-size: 16px; line-height: 1.45; color: var(--ash); }
.pl-compara td:first-child { width: 22%; font-family: var(--f-titular); font-stretch: 112%; font-weight: 480; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.25; color: var(--ivory); }
.pl-compara td:nth-child(2) { width: 34%; }
.pl-compara td:nth-child(3) { color: var(--ivory); }
.pl-compara td:nth-child(3)::before { content: "→"; content: "→" / ""; display: inline-block; margin-right: 12px; color: var(--cielo); }
.pl-compara tbody tr { transition: background-color 0.25s var(--curva); }
.pl-compara tbody tr:hover { background: linear-gradient(90deg, rgba(237, 237, 243, 0.04), transparent); }
.pl-nota { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--ash); font-size: 14px; line-height: 1.5; }

/* --- Matriz de permisos ---------------------------------------------------------- */
.pl-matriz { width: 100%; border-collapse: collapse; }
.pl-matriz th { padding: 0 12px 14px 0; border-bottom: 1px solid var(--linea-fuerte); text-align: left; font-size: 12px; font-weight: 480; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.pl-matriz th:not(:first-child), .pl-matriz td:not(:first-child) { text-align: center; }
.pl-matriz td { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--linea); color: var(--ash); font-size: 15px; }
.pl-matriz td:first-child { font-size: 16px; color: var(--ivory); }
.pl-matriz .pl-marca { vertical-align: middle; }
.pl-leyenda { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--ash); font-size: 14px; }
.pl-leyenda li { display: inline-flex; align-items: center; gap: 10px; }
.pl-marca--medio { border-color: var(--cielo); background: linear-gradient(90deg, var(--cielo) 50%, transparent 50%); }

/* --- Reglas con su cifra ------------------------------------------------------------ */
.pl-reglas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.pl-reglas > li { padding: 24px clamp(14px, 1.8vw, 28px) 10px 0; border-right: 1px solid var(--linea); }
.pl-reglas > li + li { padding-left: clamp(14px, 1.8vw, 28px); }
.pl-reglas > li:last-child { border-right: 0; }
.pl-reglas .pl-gran { font-size: clamp(34px, 3.8vw, 58px); white-space: nowrap; }
.pl-reglas h3 { margin: 16px 0 8px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.25; }
.pl-reglas p { margin: 0; color: var(--ash); font-size: 14px; line-height: 1.5; }
.pl-reglas small { display: block; margin-top: 10px; color: var(--ash); font-size: 13px; line-height: 1.4; }

/* --- Columnas de problemas / dos lados ---------------------------------------------- */
.pl-cols { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.pl-cols--2 { --c: 2; }
.pl-cols > li { padding: 26px clamp(16px, 2.2vw, 36px) 12px 0; border-right: 1px solid var(--linea); }
.pl-cols > li + li { padding-left: clamp(16px, 2.2vw, 36px); }
.pl-cols > li:last-child { border-right: 0; }
.pl-cols h3 { margin: 0 0 12px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.18; }
.pl-cols p { margin: 0; color: var(--ash); font-size: 16px; line-height: 1.55; max-width: 38ch; }
.pl-cols ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pl-cols ul li { position: relative; padding-left: 22px; color: var(--ash); font-size: 16px; line-height: 1.5; }
.pl-cols ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--cielo); }
.pl-cols .etiqueta { display: flex; margin-bottom: 18px; }

/* --- Formato de un punto (anatomía) ----------------------------------------------------- */
.pl-formato { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin: 0; }
.pl-formato__tarjeta { position: relative; padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); background: rgba(23, 23, 33, 0.7); }
.pl-formato__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.pl-formato__estado { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ivory); }
.pl-formato blockquote { margin: 22px 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--cielo); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ivory); }
.pl-formato__donde { margin: 0; padding-top: 16px; border-top: 1px solid var(--linea); color: var(--ash); font-size: 14px; }
.pl-n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 10px; border: 1px solid var(--cielo); border-radius: 50%; font-size: 12px; line-height: 1; color: var(--cielo); font-variant-numeric: tabular-nums; }
.pl-formato__tarjeta .pl-n { position: absolute; left: -11px; margin: 0; background: var(--grafito); }
.pl-formato__tarjeta .pl-n:nth-of-type(1) { top: 22px; }
.pl-formato__tarjeta .pl-n:nth-of-type(2) { top: 96px; }
.pl-formato__tarjeta .pl-n:nth-of-type(3) { bottom: 22px; }
.pl-formato__leyenda { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.pl-formato__leyenda li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 0; align-items: start; }
.pl-formato__leyenda .pl-n { grid-column: 1; grid-row: 1; margin: 1px 0 0; }
.pl-formato__leyenda strong { grid-column: 2; grid-row: 1; font-weight: 480; font-size: 17px; line-height: 1.3; color: var(--ivory); }
.pl-formato__leyenda li > span:not(.pl-n) { grid-column: 2; grid-row: 2; color: var(--ash); font-size: 15px; line-height: 1.5; }

/* --- Filas de enlace (qué obtienes) ------------------------------------------------------- */
.pl-enlaces .ct-fila a { padding-block: 24px; }
.pl-enlaces .ct-fila__tit { font-family: var(--f-titular); font-stretch: 112%; font-size: clamp(20px, 2vw, 28px); line-height: 1.15; font-weight: 480; letter-spacing: 0.01em; }
.pl-enlaces .ct-fila__meta { font-size: 15px; }
.pl-enlaces .ct-fila__plazo { color: var(--ivory); font-size: 15px; }

/* --- Hoja de contenidos (índice del memorándum) ---------------------------------------------- */
.pl-hoja { position: relative; padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); background: rgba(23, 23, 33, 0.6); }
.pl-hoja ol { counter-reset: h; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; }
.pl-hoja li { counter-increment: h; display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.35; color: var(--ivory); }
.pl-hoja li::before { content: counter(h, decimal-leading-zero); flex: none; width: 22px; color: var(--ash); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.pl-hoja__pie { margin: 18px 0 0; color: var(--ash); font-size: 14px; line-height: 1.5; }

/* --- Etiquetas sueltas ---------------------------------------------------------------------------- */
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-chips li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pildora); color: var(--ash); font-size: 14px; }
.pl-chips--fuertes li { color: var(--ivory); }
.pl-sub { margin: clamp(28px, 3vw, 44px) 0 14px; font-size: 12px; font-weight: 480; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }

/* --- Utilidades ------------------------------------------------------------------------------------------ */
.pl-mt { margin-top: clamp(32px, 4vw, 56px); }
.pl-mitades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pl-mitades > div > .pl-sub:first-child { margin-top: 0; }
.pl-enlace-linea { margin: clamp(28px, 3vw, 40px) 0 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* --- Dos columnas de texto y lista ------------------------------------------------------------------- */
.pl-dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pl-dos h2 { margin: 0; }
.pl-dos__lado { color: var(--ash); font-size: 17px; line-height: 1.55; max-width: 44ch; }
.pl-dos__lado p { margin-top: 18px; }
.pl-filas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.pl-filas > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.pl-filas strong { display: block; font-weight: 480; font-size: 17px; line-height: 1.3; color: var(--ivory); }
.pl-filas span:not(.estado) { display: block; margin-top: 3px; color: var(--ash); font-size: 14px; line-height: 1.45; }
.pl-filas a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-underline-offset: 0.2em; }
.pl-sin { font-family: var(--f-titular); font-stretch: 112%; font-weight: 480; color: var(--ivory); margin-right: 8px; }

/* --- Principios ------------------------------------------------------------------------------------------------ */
.pl-grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.pl-grupos > li { padding: 24px clamp(14px, 1.8vw, 28px) 12px 0; border-right: 1px solid var(--linea); }
.pl-grupos > li + li { padding-left: clamp(14px, 1.8vw, 28px); }
.pl-grupos > li:last-child { border-right: 0; }
.pl-grupos h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
.pl-grupos h3 .indice { font-size: 13px; }
.pl-grupos ul { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.pl-grupos strong { display: block; margin-bottom: 4px; font-weight: 480; font-size: 17px; line-height: 1.3; color: var(--ivory); }
.pl-grupos li li > span { display: block; color: var(--ash); font-size: 15px; line-height: 1.5; }
.pl-grupos .pl-ver { display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; color: var(--cielo); font-size: 14px; text-decoration: none; }
.pl-grupos .pl-ver:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Preguntas ----------------------------------------------------------------------------------------------------------- */
.pl-preguntas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pl-preguntas__indice { position: sticky; top: calc(var(--barra) + 28px); }
.pl-preguntas__indice ol { margin: 18px 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.pl-preguntas__indice li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--linea); color: var(--ash); font-size: 15px; text-decoration: none; transition: color 0.2s var(--curva), padding 0.25s var(--curva); }
.pl-preguntas__indice li a:hover, .pl-preguntas__indice li a[aria-current="true"] { color: var(--ivory); padding-left: 8px; }
.pl-preguntas__indice .cifra { color: var(--ash); font-size: 13px; }
.pl-pregunta-grupo + .pl-pregunta-grupo { margin-top: clamp(40px, 5vw, 72px); }
.pl-pregunta-grupo { scroll-margin-top: calc(var(--barra) + 24px); }
.pl-pregunta-grupo > h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; }
.pl-pregunta-grupo > h2 .indice { font-size: 13px; }
.pl-preguntas .ct-faq summary { font-size: clamp(17px, 1.5vw, 20px); font-weight: 480; line-height: 1.35; min-height: 64px; }
.pl-preguntas .ct-faq p { font-size: 17px; max-width: 64ch; }
.pl-preguntas .ct-faq p a { color: var(--ivory); }

/* --- Acceso ------------------------------------------------------------------------------------------------------------------ */
.pl-acceso { min-height: 100svh; }
.pl-acceso .velo { background: linear-gradient(90deg, rgba(23, 23, 33, 0.9) 0%, rgba(23, 23, 33, 0.62) 55%, rgba(23, 23, 33, 0.38) 100%); }
.pl-acceso .heroe__contenido { padding-top: calc(var(--barra) + 40px); padding-bottom: clamp(40px, 6vw, 88px); }
.pl-acceso__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--hueco); align-items: start; }
.pl-acceso__texto { grid-column: 1 / span 6; }
.pl-acceso__texto .titular-xl { margin-bottom: 22px; max-width: 14ch; }
.pl-acceso__form { grid-column: 8 / span 5; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); background: rgba(30, 30, 42, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scroll-margin-top: calc(var(--barra) + 24px); }
.pl-acceso__form h2 { margin: 12px 0 8px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.pl-acceso__form .texto-s { margin: 0 0 22px; }
.pl-puertas { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); max-width: 620px; }
.pl-puertas > li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.pl-puertas .indice { align-self: start; padding-top: 4px; }
.pl-puertas h2 { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: 0.01em; }
.pl-puertas p { margin: 4px 0 0; color: var(--mist); font-size: 15px; line-height: 1.45; }
.pl-puertas .boton, .pl-puertas .pl-puertas__ir { grid-column: 3; grid-row: 1; }
.pl-puertas__ir { display: inline-flex; align-items: center; min-height: 44px; color: var(--ivory); font-size: 15px; text-decoration: none; white-space: nowrap; }
.pl-puertas__ir::after { content: "↓"; margin-left: 8px; }
.pl-puertas__ir:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pl-puertas__otro { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; color: var(--ivory); font-size: 14px; }

/* --- Aviso legal --------------------------------------------------------------------------------------------------------------------- */
.pl-legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pl-legal__indice { position: sticky; top: calc(var(--barra) + 28px); }
.pl-legal__indice ol { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.pl-legal__indice a { display: flex; align-items: center; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--linea); color: var(--ash); font-size: 15px; text-decoration: none; transition: color 0.2s var(--curva), padding 0.25s var(--curva); }
.pl-legal__indice a:hover, .pl-legal__indice a[aria-current="true"] { color: var(--ivory); padding-left: 8px; }
.pl-legal__indice .indice { width: 22px; }
.pl-legal__cuerpo > section { padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--linea); scroll-margin-top: calc(var(--barra) + 24px); }
.pl-legal__cuerpo > section:first-child { border-top: 0; padding-top: 0; }
.pl-legal__cuerpo h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; }
.pl-legal__cuerpo h2 .indice { font-size: 13px; }
.pl-legal__intro { max-width: 66ch; margin: 0 0 22px; color: var(--ash); font-size: 17px; line-height: 1.6; }
.pl-legal__cuerpo p { max-width: 70ch; color: var(--ash); font-size: 16px; line-height: 1.65; }
.pl-legal__cuerpo p strong, .pl-legal__cuerpo dd strong { color: var(--ivory); font-weight: 480; }
.pl-legal__cuerpo a { color: var(--ivory); }
.pl-legal__cuerpo code { padding: 1px 6px; border-radius: 4px; background: rgba(237, 237, 243, 0.08); font-size: 0.92em; }
.pl-glosario { margin: 0; border-top: 1px solid var(--linea-fuerte); }
.pl-glosario > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 6px 28px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.pl-glosario dt { font-weight: 480; color: var(--ivory); line-height: 1.4; }
.pl-glosario dd { margin: 0; color: var(--ash); font-size: 16px; line-height: 1.65; }
.pl-glosario .pl-glosario__aviso { background: linear-gradient(180deg, rgba(237, 237, 243, 0.05), rgba(237, 237, 243, 0)); }
.pl-legal__fecha { margin: 22px 0 0; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pildora); color: var(--ash); font-size: 13px; }

/* --- Adaptación --------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .pl-flujo--6, .pl-flujo--7 { --n: 3; row-gap: 20px; }
  .pl-flujo--6 .pl-flujo__paso:nth-child(3n)::before, .pl-flujo--7 .pl-flujo__paso:nth-child(3n)::before { right: 35%; background: linear-gradient(90deg, var(--linea-fuerte), rgba(237, 237, 243, 0)); }
  .pl-pesos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .pl-reglas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-reglas > li:nth-child(2) { border-right: 0; }
  .pl-reglas > li:nth-child(3) { padding-left: 0; border-top: 1px solid var(--linea); }
  .pl-reglas > li:nth-child(4) { border-top: 1px solid var(--linea); }
  .pl-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-grupos > li:nth-child(2) { border-right: 0; }
  .pl-grupos > li:nth-child(3) { padding-left: 0; border-top: 1px solid var(--linea); }
  .pl-grupos > li:nth-child(4) { border-top: 1px solid var(--linea); }
  .pl-celdas--4, .pl-celdas--5 { --c: 2; }
  .pl-hoja ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pl-acceso__texto, .pl-acceso__form { grid-column: 1 / -1; }
  .pl-acceso__texto .titular-xl { max-width: 18ch; }
  .pl-dos, .pl-cifras-fila, .pl-formato, .pl-legal, .pl-preguntas, .pl-mitades { grid-template-columns: 1fr; }
  .pl-legal__indice, .pl-preguntas__indice { position: static; }
  .pl-estados, .pl-estados--4 { grid-template-columns: 1fr; }
  .pl-estados > li, .pl-estados > li + li { padding: 20px 0 14px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .pl-cols, .pl-cols--2 { --c: 1; }
  .pl-cols > li, .pl-cols > li + li { padding: 22px 0 18px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .pl-celdas { --c: 2; }
  .pl-formato__tarjeta .pl-n { position: static; }
}
@media (max-width: 860px) {
  .pl-hub { grid-template-columns: 1fr; gap: 0; }
  .pl-hub__origen { align-self: stretch; }
  .pl-hub__lineas { display: none; }
  .pl-hub__salidas { grid-auto-rows: auto; margin-top: 28px; }
  .pl-flujo, .pl-flujo--4, .pl-flujo--5, .pl-flujo--6, .pl-flujo--7 { --n: 1; --oculto: scaleY(0); row-gap: 0; }
  .pl-flujo__paso { padding: 0 0 30px 38px; }
  .pl-flujo__paso::before, .pl-flujo--6 .pl-flujo__paso:nth-child(3n)::before, .pl-flujo--7 .pl-flujo__paso:nth-child(3n)::before { left: 7px; right: auto; top: 18px; bottom: -4px; width: 1px; height: auto; background: var(--linea-fuerte); transform-origin: top; }
  .pl-flujo--cielo .pl-flujo__paso::before { background: color-mix(in srgb, var(--cielo) 55%, transparent); }
  .pl-flujo__paso:last-child::before { display: none; }
  .pl-flujo__paso::after { top: 2px; }
  .pl-flujo__paso p { max-width: 52ch; }
  .pl-compara thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pl-compara, .pl-compara tbody, .pl-compara tr, .pl-compara td { display: block; width: 100%; }
  .pl-compara tr { padding: 20px 0; border-bottom: 1px solid var(--linea); }
  .pl-compara td, .pl-compara td:first-child, .pl-compara td:nth-child(2) { width: 100%; padding: 4px 0; border: 0; }
  .pl-compara td:first-child { margin-bottom: 6px; }
  .pl-compara td:nth-child(2)::before { content: "Hoy · "; color: var(--ash); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
  .pl-compara td:nth-child(3)::before { content: "→ Con Araant · "; content: "→ Con Araant · " / ""; color: var(--cielo); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 0; }
}
@media (max-width: 640px) {
  .pl-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-ficha > div { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--linea); }
  .pl-ficha > div:nth-child(even) { padding-left: 14px; border-right: 0; }
  .pl-ficha > div:nth-last-child(-n+2) { border-bottom: 0; }
  .pl-heroe .titular-xl { max-width: none; }
  .pl-estados--4 { grid-template-columns: 1fr; }
  .pl-celdas, .pl-celdas--2, .pl-celdas--4, .pl-celdas--5 { --c: 1; }
  .pl-celdas--sencillas, .pl-celdas--5 { --c: 2; }
  .pl-celdas > li { min-height: 0; }
  .pl-celdas--sencillas > li, .pl-celdas--5 > li { padding: 16px 14px; }
  .pl-pesos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-reglas { grid-template-columns: 1fr; }
  .pl-reglas > li, .pl-reglas > li + li, .pl-reglas > li:nth-child(3) { padding: 22px 0 18px; border-right: 0; border-top: 0; border-bottom: 1px solid var(--linea); }
  .pl-grupos { grid-template-columns: 1fr; }
  .pl-grupos > li, .pl-grupos > li + li, .pl-grupos > li:nth-child(3) { padding: 24px 0 18px; border-right: 0; border-top: 0; border-bottom: 1px solid var(--linea); }
  .pl-hoja ol { grid-template-columns: 1fr; }
  .pl-filas > li { grid-template-columns: 1fr; }
  .pl-puertas > li { grid-template-columns: 32px minmax(0, 1fr); }
  .pl-puertas .boton, .pl-puertas .pl-puertas__ir { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 12px; }
  .pl-glosario > div { grid-template-columns: 1fr; }
  .pl-hub__salidas > li { grid-template-columns: 1fr; }
  .pl-hub__salidas .estado { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .pl-matriz th, .pl-matriz td { padding-right: 6px; }
  .pl-matriz td:first-child { font-size: 15px; }
  .pl-matriz th { font-size: 12px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-flujo__paso::before, .pl-flujo__paso::after, .pl-pesos__tramo, .pl-hub__lineas, .pl-barra__relleno, .pl-celdas > li, .pl-celdas > li::before { transition: none !important; }
}