/* ============================================================
   PLANES — presentación de precios (11-nov-2026)
   Solo la página /web/planes. Clases propias (pl-*), sin depender del CSS compilado de Tailwind:
   el HTML que escribe assets/js/precios-por-oposicion.js no lo ve el scanner del build.

   Reglas de diseño:
   - Una sola cifra grande por tarjeta (el precio). Lo demás va en una línea pequeña.
   - Las cuatro tarjetas arrancan a la misma altura, miden lo mismo y el botón queda siempre abajo.
   - Ninguna columna más estrecha de 240 px; en anchos medios 2×2, en el móvil una columna.
   - Contraste mínimo 4,5:1 en todo el texto; foco visible en todo lo que se pulsa.
   ============================================================ */

.pl {
    --pl-ink: #0f172a;
    --pl-muted: #475569;
    --pl-line: #e2e8f0;
    --pl-bg: #f8fafc;
    --pl-card: #ffffff;
    --pl-brand: #4338ca;
    --pl-brand-dark: #312e81;
    --pl-brand-soft: #eef2ff;
    --pl-brand-line: #c7d2fe;
    --pl-save: #047857;
    --pl-save-soft: #ecfdf5;
    --pl-ccoo: #92400e;
    --pl-ccoo-soft: #fffbeb;
    --pl-ccoo-line: #fcd34d;
    --pl-radius: 18px;
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    color: var(--pl-ink);
    font-variant-numeric: tabular-nums;
}

.pl-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.pl *:focus-visible,
.pl-foco:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}

/* ---------- Cabecera ---------- */
.pl-hero {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    color: #fff;
    padding: 56px 0 72px;
    text-align: center;
}
.pl-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.pl-hero p {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.4;
    color: #e0e7ff;
    margin: 0 auto;
    max-width: 40rem;
}

/* ---------- Selector de oposición ---------- */
.pl-selector-zona {
    position: relative;
    margin-top: -36px;
    padding: 0 0 8px;
}
.pl-selector {
    position: relative;
    background: var(--pl-card);
    border: 1px solid var(--pl-line);
    border-radius: 24px;
    box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.35);
    padding: 28px;
}
.pl-selector[hidden] { display: none; }
.pl-sel-titulo {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 16px;
}
.pl-grupos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.pl-grupo { display: flex; cursor: pointer; position: relative; }
.pl-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.pl-grupo-caja {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 88px;
    padding: 16px 20px 16px 56px;
    border: 2px solid var(--pl-line);
    border-radius: 16px;
    background: #fff;
    position: relative;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.pl-grupo-caja::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}
.pl-grupo:hover .pl-grupo-caja { border-color: var(--pl-brand-line); background: #fafaff; }
.pl-radio:checked + .pl-grupo-caja {
    border-color: var(--pl-brand);
    background: var(--pl-brand-soft);
    box-shadow: 0 0 0 1px var(--pl-brand);
}
.pl-radio:checked + .pl-grupo-caja::before {
    border-color: var(--pl-brand);
    background: radial-gradient(circle, var(--pl-brand) 0 5px, #fff 6px);
}
.pl-radio:focus-visible + .pl-grupo-caja {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}
.pl-grupo-nombre { font-size: 1.1rem; line-height: 1.25; font-weight: 700; color: var(--pl-ink); }
.pl-grupo-desde { font-size: 0.95rem; color: var(--pl-muted); }

.pl-concreta { margin-top: 20px; max-width: 32rem; }
.pl-concreta[hidden] { display: none; }
.pl-concreta label { display: block; font-weight: 700; margin-bottom: 6px; }
.pl-concreta select {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--pl-ink);
    background: #fff;
    border: 2px solid #94a3b8;
    border-radius: 12px;
}
.pl-concreta select:hover { border-color: var(--pl-brand); }

.pl-resumen {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-left: 4px solid var(--pl-brand);
    background: var(--pl-brand-soft);
    border-radius: 0 12px 12px 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1e1b4b;
}

/* ---------- Tarjetas de plan ---------- */
.pl-planes-zona { padding: 32px 0 64px; background: var(--pl-bg); }
.pl-planes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 640px) {
    .pl-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}
@media (min-width: 1180px) {
    .pl-planes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pl-card {
    display: flex;
    flex-direction: column;
    background: var(--pl-card);
    border: 2px solid var(--pl-line);
    border-radius: var(--pl-radius);
    padding: 24px 20px;
    min-width: 0;
}
.pl-card--destacada { border-color: var(--pl-brand); box-shadow: 0 16px 32px -20px rgba(67, 56, 202, 0.55); }
.pl-card--oscura {
    background: linear-gradient(160deg, #312e81 0%, #3730a3 100%);
    border-color: #312e81;
    color: #fff;
}

.pl-tag-fila { min-height: 30px; display: flex; align-items: flex-start; }
.pl-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--pl-brand);
    color: #fff;
}
.pl-card--oscura .pl-tag { background: #fbbf24; color: #1e1b4b; }

.pl-nombre { font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin: 4px 0 12px; }

.pl-precio {
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
    margin: 0;
}
.pl-card--destacada .pl-precio { color: var(--pl-brand); }

.pl-mes { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.4; color: var(--pl-muted); }
.pl-card--oscura .pl-mes { color: #c7d2fe; }

.pl-fila-etiquetas { min-height: 34px; margin: 10px 0 0; display: flex; align-items: center; }
.pl-ahorro {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--pl-save);
    background: var(--pl-save-soft);
}
.pl-ahorro[hidden] { display: none; }
.pl-card--oscura .pl-ahorro { color: #bbf7d0; background: rgba(255, 255, 255, 0.12); }

.pl-ccoo {
    margin: 4px 0 0;
    padding: 8px 12px;
    border: 1px dashed var(--pl-ccoo-line);
    border-radius: 10px;
    background: var(--pl-ccoo-soft);
    color: var(--pl-ccoo);
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 600;
}
.pl-ccoo[hidden] { display: none; }
.pl-card--oscura .pl-ccoo { background: rgba(255, 255, 255, 0.1); border-color: rgba(253, 230, 138, 0.55); color: #fde68a; }

.pl-descripcion {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--pl-line);
}
.pl-card--oscura .pl-descripcion { border-top-color: rgba(255, 255, 255, 0.2); }
.pl-dur { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.4; }
.pl-para { text-wrap: balance; margin: 4px 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--pl-muted); }
.pl-card--oscura .pl-para { color: #c7d2fe; }

.pl-sesion {
    text-wrap: balance;
    margin: 12px 0 0;
    padding-left: 26px;
    position: relative;
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 600;
}
.pl-sesion[hidden] { display: none; }
.pl-sesion::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2334d399'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.pl-boton {
    display: block;
    margin-top: auto;
    padding: 14px 20px;
    border: 2px solid var(--pl-brand);
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pl-brand);
    background: #fff;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
.pl-boton:hover { background: var(--pl-brand-soft); }
.pl-card--destacada .pl-boton { background: var(--pl-brand); color: #fff; }
.pl-card--destacada .pl-boton:hover { background: var(--pl-brand-dark); }
.pl-card--oscura .pl-boton { background: #fff; border-color: #fff; color: var(--pl-brand-dark); }
.pl-card--oscura .pl-boton:hover { background: #e0e7ff; }
.pl-card--oscura .pl-boton:focus-visible { outline-color: #fbbf24; }
.pl-cuerpo-flex { flex: 1 1 auto; min-height: 20px; }

/* ---------- Lo común a todos los planes ---------- */
.pl-comunes {
    margin-top: 24px;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
}
.pl-comunes h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 14px; }
.pl-comunes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 32px;
}
@media (min-width: 768px) { .pl-comunes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-comunes li { position: relative; padding-left: 30px; line-height: 1.5; }
.pl-comunes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23059669'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.pl-comunes strong { font-weight: 700; }

/* ---------- Comparativa de precios ---------- */
.pl-comparativa {
    margin-top: 24px;
    padding: 24px 28px;
    background: var(--pl-brand-soft);
    border: 1px solid var(--pl-brand-line);
    border-radius: var(--pl-radius);
}
.pl-comparativa h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 14px; }
.pl-tabla-caja { overflow-x: auto; }
.pl-tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: 0.95rem; }
.pl-tabla caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-tabla th, .pl-tabla td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--pl-line); line-height: 1.35; }
.pl-tabla thead th { background: #e0e7ff; color: #1e1b4b; font-weight: 700; vertical-align: bottom; }
.pl-tabla tbody th { font-weight: 600; }
.pl-tabla td { font-weight: 600; white-space: nowrap; }
.pl-tabla tbody tr:last-child th, .pl-tabla tbody tr:last-child td { border-bottom: 0; }
.pl-nota { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.5; color: #334155; }
.pl-detalle { margin-top: 14px; }
.pl-detalle summary { cursor: pointer; font-weight: 700; color: var(--pl-brand); padding: 6px 0; }
.pl-detalle-rejilla { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 10px; }
@media (min-width: 768px) { .pl-detalle-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pl-detalle h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.pl-detalle ul { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; line-height: 1.7; }
.pl-detalle a { color: var(--pl-brand); text-decoration: underline; }

/* ---------- Portada (index.html, 11-nov-2026) ----------
   Misma sección de planes dentro de la portada: cabecera propia en vez del bloque morado de /web/planes. */
.pl-portada { padding: 80px 0; background: #fff; }
.pl-portada-cabecera { text-align: center; margin-bottom: 32px; }
.pl-portada-cabecera h2 {
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--pl-ink);
}
.pl-portada-cabecera p { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.4; color: var(--pl-muted); margin: 0 auto; max-width: 40rem; }
.pl-portada .pl-selector { box-shadow: 0 12px 30px -22px rgba(15, 23, 42, 0.35); }
.pl-portada .pl-planes { margin-top: 28px; }
.pl-portada .pl-comunes, .pl-portada .pl-comparativa { margin-top: 28px; }
.pl-portada .pl-banner-ccoo { margin-top: 28px; }
@media (max-width: 639px) { .pl-portada { padding: 56px 0; } }

/* ---------- Móvil ---------- */
@media (max-width: 639px) {
    .pl-tag-fila:empty { display: none; }
    .pl-fila-etiquetas { min-height: 0; }
    .pl-wrap { padding-left: 16px; padding-right: 16px; }
    .pl-hero { padding: 40px 0 64px; }
    .pl-selector { padding: 20px 16px; border-radius: 20px; }
    .pl-grupos { grid-template-columns: 1fr; }
    .pl-grupo-caja { min-height: 72px; }
    .pl-comunes, .pl-comparativa { padding: 20px 16px; }
    .pl-precio { font-size: 2.75rem; }
}
@media (min-width: 640px) and (max-width: 899px) {
    .pl-grupos { grid-template-columns: 1fr; }
}

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