/* Membresías (2026-10-14): diferencias con referencias/membresia, sobre lo que la página
   ya tenía (css/style.css, planes-marcos.css y planes-mejora.css). Solo presentación:
   encabezados de sección, filas de duración y botón al ancho de la tarjeta, las ventajas
   en una franja, las preguntas en dos columnas y el llamado final. Se carga al final. */

/* ---------- Encabezado de sección (planes y ventajas) ---------- */
.planes-encabezado{max-width:640px;margin:0 auto 22px;text-align:center}
.planes-encabezado__antetitulo{margin:0 0 5px;color:#5c6f94;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.planes-encabezado h2{margin:0;color:var(--fc-oscuro,#0f172a);font-size:clamp(22px,2.1vw,27px);font-weight:800;line-height:1.15;letter-spacing:-.025em}
.planes-encabezado h2 span{color:var(--fc-primario,#0066ff)}
.planes-encabezado__bajada{margin:5px 0 0;color:var(--fc-texto-suave,#64748b);font-size:14px;line-height:1.45}

/* ---------- Tarjetas de plan ---------- */
/* Las duraciones y el botón ocupan el ancho de la tarjeta, como los beneficios. */
.planes-card .plan-duraciones{width:100%;align-self:stretch}
.planes-card__comprar{text-align:center;font-weight:700;border-radius:10px}
.planes-card__comprar:not(.planes-card__comprar--contorno):not(:disabled){background:linear-gradient(180deg,#ff6a1a,#e8480c);box-shadow:0 6px 14px rgba(232,72,12,.22)}

/* ---------- Ventajas: una franja con tres columnas ---------- */
.planes-valores{padding:6px 0 40px}
.planes-valores__franja{border:1px solid var(--fc-borde,#e2e8f0);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(20,52,95,.05)}
.planes-valores__franja .planes-valor{height:100%;padding:16px 20px;border:0;border-radius:0;background:transparent;box-shadow:none;align-items:center}
.planes-valores__franja>[class*="col-"]+[class*="col-"] .planes-valor{border-left:1px solid var(--fc-borde,#e2e8f0)}
.planes-valores__franja .planes-valor__icono{width:44px;height:44px;border-radius:12px;background:#e8f1ff;color:var(--fc-primario,#0066ff);font-size:21px}
.planes-valores__franja .planes-valor h3{font-size:14.5px}
@media(max-width:767.98px){
 .planes-valores__franja>[class*="col-"]+[class*="col-"] .planes-valor{border-left:0;border-top:1px solid var(--fc-borde,#e2e8f0)}
}

/* ---------- Preguntas frecuentes: dos columnas ---------- */
.planes-faq{padding-bottom:40px}
.planes-faq__encabezado{margin-bottom:16px}
@media(min-width:768px){
 .planes-faq__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;align-items:start;max-width:960px}
 .planes-faq__lista .accordion-item{margin-bottom:0}
}
.planes-faq__lista .accordion-item{border-radius:12px;overflow:hidden}
.planes-faq__lista .accordion-button{padding:.7rem 1rem;font-size:14px}

/* ---------- Encabezado: copia de referencias/membresia ----------
   Etiqueta en píldora, título con su parte en color y bajada a la izquierda; a la
   derecha, la ilustración de la referencia (sus textos dibujados se borraron: van en
   HTML). Hero de página de la escala del sitio (css/marca.css). */
.planes-hero{padding:22px 0 6px}
.planes-hero__grilla{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:8px}
.planes-hero__copia{position:relative;z-index:1;padding-left:10px}
.planes-hero .fc-kicker--suave{display:inline-flex;align-items:center;margin:0 0 14px;padding:6px 14px;border-radius:20px;background:#dcebff;color:#0b57d0;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.planes-hero__titulo{max-width:440px;margin:0 0 14px;color:#0b1033;font-size:var(--fc-titulo-hero-pagina,clamp(28px,2.45vw,38px));font-weight:800;line-height:1.1;letter-spacing:-.035em}
.planes-hero__titulo span{color:var(--fc-primario,#0066ff)}
.planes-hero__bajada{max-width:460px;margin:0;color:#4b5a7a;font-size:15.5px;line-height:1.5}
/* La ilustración mide 594 px (la lámina de la referencia no tiene más): nunca se agranda. Una
   imagen subida en el Admin (membresias.hero) ocupa la misma caja, recortada sin deformarse. */
.planes-hero__ilustracion{display:block;width:100%;max-width:594px;height:auto;margin-left:auto;aspect-ratio:594/335;object-fit:cover}
.planes-hero__ilustracion--foto{border-radius:18px;box-shadow:0 14px 34px rgba(16,42,94,.12)}
@media(max-width:991.98px){
 .planes-hero__grilla{grid-template-columns:minmax(0,1fr);gap:18px}
 .planes-hero__copia{padding-left:0}
 .planes-hero__ilustracion{max-width:560px;margin:0 auto}
}

/* ---------- Tarjetas de plan: más compactas ----------
   Tres de cada cuatro columnas (unos 410 px) y todo a menor escala: cabecera, precio,
   beneficios, duraciones y botón. */
.planes-tarjetas{padding-bottom:26px}
.planes-tarjetas .row{--bs-gutter-x:1.75rem}
.planes-card{padding:20px 20px 16px!important;border-radius:18px}
.planes-card__cabecera{margin-bottom:10px}
.planes-card__icono{width:38px;height:38px;border-radius:11px;font-size:19px}
.planes-card__chip{padding:3px 10px;font-size:11px}
.planes-card__nombre{font-size:19px}
.planes-card__subtitulo{margin:2px 0 0;font-size:12.5px}
.planes-card__precio{margin:10px 0 4px;font-size:30px}
.planes-card__precio small{font-size:12px}
.planes-card__descripcion{margin:0;font-size:12.5px;line-height:1.45}
.planes-card__linea{margin:12px 0}
.planes-card__beneficios{gap:7px}
.planes-card__beneficios li{font-size:13px;line-height:1.4}
.planes-card__marca{width:18px;height:18px;font-size:12px}
.planes-card .plan-duraciones{padding-top:12px}
.planes-card .plan-duraciones__titulo{margin-bottom:6px;font-size:11px}
.planes-card .plan-duraciones__opciones{gap:6px}
/* Cada duración en una sola línea: radio, nombre, ahorro y precio (antes el ahorro iba en
   una segunda línea y cada fila medía el doble). */
.planes-card .plan-duracion{grid-template-columns:auto auto minmax(0,1fr) auto;padding:7px 11px;border-radius:10px}
.planes-card .plan-duracion__ahorro{grid-column:3;grid-row:1}
.planes-card .plan-duracion__precio{grid-column:4;grid-row:1}
.planes-card .plan-duracion__titulo{font-size:13px}
.planes-card .plan-duracion__precio{font-size:13.5px}
.planes-card .plan-duracion__ahorro{padding:1px 7px;font-size:11px}
.planes-card__comprar{margin-top:12px;padding:.6rem 1rem;font-size:14.5px}
.planes-card__cinta{padding:4px 12px;font-size:10.5px}

/* ---------- Detalle del plan: la ventana de membership:detail ----------
   Ya no se abre desde la lista de planes (su botón se quitó el 2026-10-24),
   pero la vista sigue en pie y estas reglas son las que la visten. */
.plan-detalle-modal{max-width:min(720px,calc(100vw - 24px));margin-left:auto;margin-right:auto}
.plan-detalle-ventana{position:relative;border:1.5px solid #c9d3e3!important;border-radius:18px;background:linear-gradient(160deg,#f8fbff,#fff 60%)!important;box-shadow:0 18px 44px rgba(20,52,110,.2)}
.plan-detalle-ventana--gold{border-color:#f2bf3d!important;background:linear-gradient(160deg,#fff7df,#fff 60%)!important}
.plan-detalle-ventana__cerrar{position:absolute;right:14px;top:14px;z-index:2;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#fff;color:#0b1033;font-size:20px;box-shadow:0 3px 10px rgba(20,60,130,.14);cursor:pointer}
.plan-detalle-ventana__cerrar:focus-visible{outline:2px solid #0066ff;outline-offset:3px}
.plan-detalle-cuerpo,.plan-detalle-ventana .modal-body.plan-detalle-cuerpo{padding:22px 24px 22px!important}
.plan-detalle-cabecera{display:flex;align-items:center;gap:14px;margin:0 40px 18px 0}
.plan-detalle-cabecera__icono{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#f4f6f9,#c4cbd5);color:#475569;font-size:22px}
.plan-detalle-ventana--gold .plan-detalle-cabecera__icono{background:linear-gradient(135deg,#fff3c4,#f2c14e);color:#8a5a00}
.plan-detalle-cabecera__nombre{margin:0;color:#0b1033;font-size:var(--fc-titulo-panel,26px);font-weight:800;line-height:1.1}
.plan-detalle-ventana--gold .plan-detalle-cabecera__nombre{color:#8a5a00}
.plan-detalle-cabecera__texto{margin:4px 0 0;color:#5b6b8c;font-size:13.5px;line-height:1.45}
.plan-detalle-grilla{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}
.plan-detalle-subtitulo{margin:0 0 10px;color:#5b6b8c;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.plan-detalle-lista{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.plan-detalle-lista li{display:flex;align-items:flex-start;gap:9px;color:#1f2a44;font-size:13.5px;line-height:1.4;list-style:none}
.plan-detalle-lista__marca{display:flex;flex:none;align-items:center;justify-content:center;width:19px;height:19px;margin-top:1px;border-radius:50%;background:#dcebff;color:#0b57d0;font-size:13px}
.plan-detalle-ventana--gold .plan-detalle-lista__marca{background:#fde3cf;color:#d9480f}
.plan-detalle-lista li.is-excluido{color:#8a96ad}
.plan-detalle-lista li.is-excluido .plan-detalle-lista__marca{background:#eef1f6;color:#8a96ad}
.plan-detalle-precios{display:grid;gap:8px}
.plan-detalle-precios form{margin:0}
.plan-detalle-precio{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 13px;border:1px solid #dbe3ef;border-radius:11px;background:#fff;text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.plan-detalle-precio:hover{border-color:#5b9dff;box-shadow:0 0 0 3px rgba(0,102,255,.1)}
.plan-detalle-precio:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.plan-detalle-precio__texto{display:flex;flex-direction:column;min-width:0}
.plan-detalle-precio__texto strong{color:#0b1033;font-size:13.5px}
.plan-detalle-precio__texto small{color:#7a87a3;font-size:11.5px;line-height:1.35}
.plan-detalle-precio__valor{flex:none;color:#d9480f;font-size:15px;font-weight:800;white-space:nowrap}
.plan-detalle-precio__valor small{margin-left:2px;color:#7a87a3;font-size:10.5px;font-weight:600}
@media(max-width:620px){
 .plan-detalle-grilla{grid-template-columns:minmax(0,1fr)}
 .plan-detalle-cuerpo,.plan-detalle-ventana .modal-body.plan-detalle-cuerpo{padding:18px 16px!important}
}
@media(prefers-reduced-motion:reduce){.plan-detalle-precio{transition:none}}

/* ---------- Pasos numerados (sobre la franja de ventajas) ---------- */
.planes-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 46px;max-width:1040px;margin:4px auto 30px!important;padding:0;list-style:none;counter-reset:none}
.planes-paso{position:relative;display:flex;align-items:center;gap:13px;min-width:0;list-style:none}
.planes-paso__numero{display:flex;align-items:center;justify-content:center;flex:none;align-self:flex-start;width:23px;height:23px;margin-right:-4px;border-radius:50%;background:#5aa0ff;color:#fff;font-size:12px;font-weight:700;line-height:1}
.planes-paso__icono{display:flex;align-items:center;justify-content:center;flex:none;width:54px;height:54px;border-radius:50%;background:#e8f1ff;color:var(--fc-primario,#0066ff);font-size:26px;line-height:1}
.planes-paso h3{margin:0 0 3px;color:var(--fc-oscuro,#0f172a);font-size:15px;font-weight:700;letter-spacing:-.01em}
.planes-paso p{margin:0;color:var(--fc-texto-suave,#64748b);font-size:13px;line-height:1.4}
/* La flecha punteada que lleva al paso siguiente. */
.planes-paso:not(:last-child)::after{content:"";position:absolute;right:-38px;top:50%;width:26px;border-top:2px dotted #8dbbff}
.planes-paso:not(:last-child)::before{content:"";position:absolute;right:-39px;top:calc(50% - 3px);width:7px;height:7px;border-top:2px solid #5aa0ff;border-right:2px solid #5aa0ff;transform:rotate(45deg)}
@media(max-width:767.98px){
 .planes-pasos{grid-template-columns:minmax(0,1fr);max-width:420px}
 .planes-paso:not(:last-child)::after,.planes-paso:not(:last-child)::before{display:none}
}

/* ---------- Llamado final: franja a todo el ancho, pegada al footer ----------
   referencias/membresia: la figura protagonista a la izquierda, saliendo desde el borde de
   abajo y fundida con el fondo; el texto al centro y el botón a la derecha. La franja va a
   todo el ancho (como el fondo del footer, aunque la página estuviera dentro de un
   .container) y su contenido usa el mismo marco que .fc-footer__marco, así quedan
   alineados. Sin hueco entre la franja y el footer.
   La figura (img/membresia/cta-persona.webp, 406 x 455 px) es un recorte sin ampliar de
   img/registro-escena.webp con los bordes fundidos en el propio archivo (canal alfa): a
   190 px de alto tiene más del doble de píxeles que los que se dibujan. */
.planes{padding-bottom:0}
main.planes~.fc-footer{margin-top:0}
.planes-cta.planes-cta--franja{position:relative;z-index:1;margin-top:8px;padding:0}
.planes-cta--franja::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#dceaff 0%,#eef4ff 38%,#f8f6ff 58%,#ffeadb 100%);box-shadow:0 0 0 100vmax #f3f5fd;clip-path:inset(0 -100vmax)}
.planes-cta--franja::after{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:1px;background:rgba(160,185,230,.45);box-shadow:0 0 0 100vmax rgba(160,185,230,.45);clip-path:inset(0 -100vmax)}
.planes-cta__marco{position:relative;width:min(100%,1180px);margin:0 auto;padding:0 24px}
.planes-cta--franja .planes-cta__banner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 32px;min-height:196px;padding:26px 0 26px 214px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.planes-cta--franja .planes-cta__persona{position:absolute;left:-4px;bottom:0;display:block;width:auto;max-width:none;height:190px;margin:0;pointer-events:none}
.planes-cta--franja .planes-cta__icono--imagen{position:absolute;left:24px;top:50%;width:150px;height:120px;transform:translateY(-50%)}
.planes-cta--franja .planes-cta__texto{position:relative;z-index:1;min-width:0}
.planes-cta--franja .planes-cta__texto h2{margin:0 0 6px;color:#0b1033;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.025em}
.planes-cta--franja .planes-cta__texto p{margin:0;color:#4b5a7a;font-size:15px;line-height:1.5}
.planes-cta--franja .planes-cta__boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:12px;font-size:15.5px;font-weight:700;white-space:nowrap}
@media(max-width:991.98px){
 .planes-cta--franja .planes-cta__banner{min-height:170px;padding-left:180px;gap:16px 22px}
 .planes-cta--franja .planes-cta__persona{height:164px}
 .planes-cta--franja .planes-cta__texto h2{font-size:21px}
}
@media(max-width:700px){
 /* Celular y tablet angosta: figura arriba, luego título, texto y botón a todo el ancho. */
 .planes-cta__marco{padding:0 20px}
 .planes-cta--franja .planes-cta__banner{grid-template-columns:minmax(0,1fr);justify-items:center;min-height:0;padding:172px 0 26px;text-align:center}
 .planes-cta--franja .planes-cta__persona{left:50%;top:6px;bottom:auto;height:160px;transform:translateX(-50%);-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
 .planes-cta--franja .planes-cta__icono--imagen{left:50%;top:14px;transform:translateX(-50%)}
 .planes-cta--franja .planes-cta__texto h2{font-size:20px}
 .planes-cta--franja .planes-cta__texto p{font-size:14.5px}
 .planes-cta--franja .planes-cta__boton{width:100%}
}