/* Planes según la maqueta «planes.png» (25/09/2026): banda oscura con ventajas,
   cuatro tarjetas de color, comparación, ventajas, preguntas frecuentes y
   medios de pago. */
/* Mismo ancho que Concursos y Contenido: portada de página completa y contenido a 1440 px. */
.pl,.pl-hero{--pl-azul:#1a56db;--pl-tinta:#0b1c3d;--pl-texto:#3b4a63;--pl-borde:#e3e9f3}
.plans-page-wrapper.pl{max-width:1440px;padding-left:0;padding-right:0}
.pl-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;margin:-16px -36px 22px;padding:30px clamp(24px,4.5vw,72px) 30px;color:#fff;
  background:linear-gradient(90deg,#071a3f 0%,#0a2455 45%,rgba(10,36,85,.78) 68%,rgba(10,36,85,.35) 100%),url('/static/assets/home/hero_planes_postula_sin_rostros_2026.webp') right center/cover,#0a2455}
.pl-hero h1{margin:0 0 6px;font:800 clamp(1.8rem,2.8vw,2.6rem)/1.1 'Outfit',sans-serif;letter-spacing:-.02em;color:#fff}
.pl-hero-texto>p{margin:0 0 20px;font-size:1.1rem;color:#dbe6ff}
.pl-hero-ventajas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 20px}
.pl-hero-ventajas li{display:flex;align-items:center;gap:10px;max-width:200px;margin:0;font-size:.86rem;line-height:1.3;color:#e8efff}
.pl-hero-ventajas span{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.pl-hero-ventajas i,.pl-hero-ventajas svg{width:20px;height:20px;color:#fff}
.pl-hero-destacado{display:flex;gap:14px;align-items:center;max-width:280px;padding:14px 18px;border:1px solid rgba(255,255,255,.35);border-radius:14px;background:rgba(7,26,63,.55);backdrop-filter:blur(4px)}
.pl-hero-destacado>i,.pl-hero-destacado>svg{width:38px;height:38px;color:#fbbf24;flex:none}
.pl-hero-destacado strong{display:block;font:800 1.15rem 'Outfit',sans-serif;color:#fff}
.pl-hero-destacado span{font-size:.84rem;color:#dbe6ff}

.pl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}
.pl-plan{position:relative;display:flex;flex-direction:column;padding:22px 24px 22px;background:#fff;border:1px solid var(--pl-borde);border-radius:16px;box-shadow:0 4px 18px rgba(16,40,80,.06)}
.pl-plan-cabecera{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.pl-plan-icono{display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:12px}
.pl-plan-icono i,.pl-plan-icono svg{width:32px;height:32px}
.pl-plan h3{margin:0;font:800 1.3rem 'Outfit',sans-serif;color:var(--pl-tinta)}
.pl-plan-cabecera p{margin:3px 0 0;font-size:.9rem;color:#4b5b75}
.pl-precio{display:flex;align-items:baseline;gap:8px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #edf1f7}
.pl-precio strong{font:800 2.2rem/1 'Outfit',sans-serif;color:var(--pl-tinta)}
.pl-precio span{font-size:1rem;color:#4b5b75}
.pl-lista{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;flex:1}
.pl-lista li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:0;font-size:.9rem;line-height:1.35;color:#24324b}
.pl-lista i,.pl-lista svg{width:19px;height:19px;flex:none;color:#fff;fill:#16a34a;margin-top:1px}
.pl-lista .pl-no svg,.pl-lista .pl-no i{fill:#ef4444}
.pl-lista .pl-no{color:#6b7a91}
.pl-boton{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border:1.5px solid var(--pl-azul);border-radius:9px;background:var(--pl-azul);color:#fff;font:700 .98rem 'Inter',sans-serif;text-decoration:none;transition:filter .15s}
.pl-boton:hover{filter:brightness(.92);color:#fff}
.pl-boton-borde{background:#fff;color:var(--pl-azul)}
.pl-boton-borde:hover{background:#eef4ff;color:var(--pl-azul);filter:none}
.pl-gris .pl-plan-icono{background:#eef1f6;color:#475569}
.pl-azul{background:#f7faff}.pl-azul .pl-plan-icono{background:#e3edff;color:var(--pl-azul)}
.pl-violeta{background:#faf7ff;border:2px solid #8b5cf6;box-shadow:0 12px 32px rgba(124,58,237,.16)}
.pl-violeta .pl-plan-icono{background:#efe7ff;color:#7c3aed}
.pl-violeta .pl-boton{background:#6d28d9;border-color:#6d28d9}
.pl-dorado{background:#fffbef;border-color:#f5d27a}
.pl-dorado .pl-plan-icono{background:#fff1c7;color:#e5a000}
.pl-dorado .pl-boton{background:#f5b301;border-color:#f5b301;color:#1b1400}
.pl-dorado .pl-boton:hover{color:#1b1400}
.pl-cinta{position:absolute;top:-15px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:#6d28d9;color:#fff;font:700 .8rem 'Inter',sans-serif;white-space:nowrap;box-shadow:0 6px 14px rgba(109,40,217,.3)}
.pl-cinta i,.pl-cinta svg{width:15px;height:15px;color:#fbbf24}

.pl-inferior{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.85fr) minmax(0,.95fr);gap:18px;align-items:start;margin-bottom:18px}
.pl-caja{background:#fff;border:1px solid var(--pl-borde);border-radius:14px;box-shadow:0 2px 10px rgba(16,40,80,.04)}
.pl-comparacion{overflow:hidden}
.pl-comparacion table{width:100%;border-collapse:collapse;font-size:.8rem}
.pl-comparacion th,.pl-comparacion td{padding:9px 10px;line-height:1.3;border-bottom:1px solid #edf1f7;text-align:center;color:#24324b}
.pl-comparacion thead th{background:#f5f8fc;font-weight:700;color:var(--pl-tinta)}
.pl-comparacion thead th:first-child{text-align:left;font:800 .98rem 'Outfit',sans-serif}
.pl-comparacion tbody th{width:34%;text-align:left;font-weight:500}
.pl-comparacion tbody th svg,.pl-comparacion tbody th i{width:17px;height:17px;color:var(--pl-azul);vertical-align:-3px;margin-right:8px}
.pl-comparacion thead th span{display:inline-flex;align-items:center;gap:5px}
.pl-comparacion thead .pl-col-violeta span{padding:5px 12px;border-radius:7px;background:#6d28d9;color:#fff}
.pl-comparacion thead .pl-col-violeta svg,.pl-comparacion thead .pl-col-violeta i{width:14px;height:14px;color:#fbbf24}
.pl-comparacion td.pl-col-violeta{background:#faf7ff;color:#5b21b6;font-weight:600}
.pl-comparacion .pl-col-dorado{background:#fffbef}
.pl-comparacion td.pl-col-dorado{color:#a16207;font-weight:600}
.pl-si{width:18px;height:18px;color:#fff;fill:#16a34a;vertical-align:middle}
.pl-ventajas{display:grid;gap:10px}
.pl-ventajas>div{display:flex;gap:14px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--pl-borde);border-radius:12px}
.pl-ventaja-icono{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:12px;background:#eef4ff}
.pl-ventaja-icono i,.pl-ventaja-icono svg{width:28px;height:28px}
.pl-rojo{background:#fff0f1;color:#e0342a}.pl-azul-t{color:var(--pl-azul)}
.pl-ventajas p{margin:0;display:grid;gap:2px}
.pl-ventajas strong{font-size:.9rem;color:var(--pl-tinta)}
.pl-ventajas span{font-size:.78rem;line-height:1.35;color:#4b5b75}
.pl-faq{padding:14px 16px}
.pl-faq-cabecera{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pl-faq h2{margin:0;font:800 1.1rem 'Outfit',sans-serif;color:var(--pl-tinta)}
.pl-faq-cabecera a{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:700;color:var(--pl-azul);text-decoration:none}
.pl-faq-cabecera a svg,.pl-faq-cabecera a i{width:15px;height:15px}
.pl-faq details{border-bottom:1px solid #edf1f7}
.pl-faq summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 2px;cursor:pointer;list-style:none;font-size:.86rem;font-weight:600;color:#1b2b48}
.pl-faq summary::-webkit-details-marker{display:none}
.pl-faq summary::before{content:'›';font-size:1.2rem;color:#475569;margin-right:4px}
.pl-faq summary::after{content:'+';margin-left:auto;font-size:1.3rem;font-weight:400;color:var(--pl-azul)}
.pl-faq details[open] summary::after{content:'−'}
.pl-faq details p{margin:0 0 12px 16px;font-size:.84rem;line-height:1.5;color:#4b5b75}

.pl-pie{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:18px;margin-bottom:26px}
.pl-medios{display:flex;align-items:center;gap:18px;padding:14px 18px}
.pl-medios-texto{display:flex;gap:12px;align-items:center;flex:none;padding-right:18px;border-right:1px solid #edf1f7}
.pl-medios-texto>svg,.pl-medios-texto>i{width:30px;height:30px;color:var(--pl-tinta)}
.pl-medios-texto p,.pl-ayuda p{margin:0;display:grid;gap:2px}
.pl-medios-texto strong,.pl-ayuda strong{font-size:.92rem;color:var(--pl-tinta)}
.pl-medios-texto span,.pl-ayuda span{font-size:.78rem;color:#4b5b75}
.pl-medios-logos{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;min-width:0}
.pl-medios-logos img{width:auto;height:28px}
.pl-ayuda{display:flex;align-items:center;gap:14px;padding:14px 18px}
.pl-ayuda-icono{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:12px;background:#fff0f1;color:#e0342a}
.pl-ayuda-icono svg,.pl-ayuda-icono i{width:26px;height:26px}
.pl-ayuda p{flex:1}
.pl-ayuda .pl-boton{min-height:42px;flex:none}
.pl-pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

@media(min-width:1281px){.pl-hero-ventajas{flex-wrap:nowrap}}
@media(max-width:1280px){.pl-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.pl-inferior{grid-template-columns:1fr 1fr}.pl-comparacion{grid-column:1/-1}.pl-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.pl-hero{grid-template-columns:1fr}.pl-pie{grid-template-columns:1fr}.pl-medios{flex-direction:column;align-items:flex-start}.pl-medios-texto{border-right:0;padding-right:0}}
@media(max-width:700px){.pl-grid,.pl-inferior,.pl-pasos{grid-template-columns:1fr}.pl-hero-ventajas li{max-width:none;width:100%}.pl-ayuda{flex-wrap:wrap}.pl-comparacion{overflow-x:auto}}
.pl .payment-section-grid{display:block;max-width:none}
.pl .payment-card-box{max-width:none;width:100%}
/* Cinta de medios de pago (22/09) con el aspecto de la franja de la maqueta. */
.pl .medios-pago-cinta{margin:0 0 26px;padding:16px 20px;background:#fff;border:1px solid var(--pl-borde);border-radius:14px;box-shadow:0 2px 10px rgba(16,40,80,.04)}
.pl .medios-pago-titulo{font:800 1.05rem 'Outfit',sans-serif;color:var(--pl-tinta)}
/* Revisión de alineación: listas sin estirarse y precios a la misma altura. */
.pl-lista{align-content:start}
@media(min-width:1281px){.pl-plan-cabecera{min-height:84px;align-items:flex-start}.pl-plan h3{line-height:1.15}}
@media(max-width:768px){.pl-hero{margin:-24px -16px 18px}}
