/* Planes, pago y destacados (30-09-2026). Usa los tokens de estilos.css. */
.planes { padding: 24px 16px 64px; display: flex; flex-direction: column; gap: 22px; }
.planes__controles { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.planes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; background: var(--superficie-tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-tarjeta); }
.plan h3 { margin: 0; font: 700 22px/1.15 var(--font-display); color: var(--texto-fuerte); }
.plan > p { margin: -6px 0 0; }
.plan .boton, .plan > .chico:last-child { margin-top: auto; align-self: stretch; justify-content: center; }
.plan--base { background: var(--cuadricula), var(--cm-papel); }
.plan--recomendado { border: 2px solid var(--cm-tinta); box-shadow: var(--sombra-elevada); }
.plan__cinta { position: absolute; top: -12px; left: 18px; padding: 3px 10px; border-radius: var(--radio-pildora); background: var(--cm-lapiz); color: var(--cm-tinta); font: 600 var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.plan__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.plan__uf { font: 700 30px/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--texto-fuerte); font-variant-numeric: tabular-nums; }
.plan__periodo { font-size: var(--fs-small); color: var(--texto-suave); }
.plan__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.plan__lista li { display: flex; gap: 8px; align-items: flex-start; }
.plan__lista i { flex: none; margin-top: 3px; color: var(--texto-info); }
.aviso--ok { border-color: rgba(46, 94, 78, .35); background: rgba(46, 94, 78, .07); }
.casilla--error { color: var(--texto-alerta); }
.casilla--error input { outline: 2px solid var(--texto-alerta); outline-offset: 1px; }

.aviso--etapa { align-items: flex-start; flex-wrap: nowrap; border-color: var(--cm-cielo); background: var(--cm-cuaderno); }
.aviso--etapa i { flex: none; margin-top: 1px; }
.plan__desde { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: var(--radio-m); background: var(--cm-papel); color: var(--texto-info); font-weight: 600; text-align: center; }

/* Registro manual */
.planes-registro { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; border-radius: var(--radio-l); background: var(--cm-tinta); color: var(--texto-sobre-oscuro); }
.planes-registro h2 { margin: 4px 0 8px; color: var(--cm-papel); }
.planes-registro p { margin: 0 0 8px; }
.planes-registro .etiqueta { color: var(--cm-cielo); }
.planes-registro .suave, .planes-registro .plan__periodo { color: rgba(244, 246, 250, .75); }
.planes-registro .plan__uf { color: var(--cm-lapiz); }
.planes-registro__precio { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.planes-registro--activo { box-shadow: 0 0 0 4px var(--cm-cielo); }
@media (min-width: 820px) { .planes-registro { grid-template-columns: 1.6fr 1fr; align-items: center; padding: 28px; } }

/* Secciones de la página */
.planes-seccion { display: flex; flex-direction: column; gap: 14px; }
.planes-seccion h2 { margin: 8px 0 0; }
.planes-seccion > p { margin: 0; }

/* ¿Cuándo buscan las familias? */
.temporadas { display: flex; flex-direction: column; gap: 18px; padding: 20px; background: var(--superficie-tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-l); }
.temporada { display: flex; flex-direction: column; gap: 8px; }
.temporada__nombre { font-weight: 600; }
.temporada__meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; }
.temporada__mes { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.temporada__barra { display: block; height: 16px; border-radius: 4px 4px 2px 2px; background: var(--cm-cuaderno); }
.temporada__mes--1 .temporada__barra { height: 16px; background: var(--cm-cuaderno); }
.temporada__mes--2 .temporada__barra { height: 34px; background: var(--cm-cielo); }
.temporada__mes--3 .temporada__barra { height: 52px; background: var(--cm-tinta); }
.temporada__etq { font: 600 10.5px/1.2 var(--font-mono); text-align: center; color: var(--texto-suave); }
.temporada__hito { font-size: 10.5px; line-height: 1.2; color: var(--texto-info); text-align: center; overflow-wrap: anywhere; }
.temporada__leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-small); color: var(--texto-suave); }
.temporada__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.temporada__leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.temporada__leyenda .temporada__mes--1 { background: var(--cm-cuaderno); }
.temporada__leyenda .temporada__mes--2 { background: var(--cm-cielo); }
.temporada__leyenda .temporada__mes--3 { background: var(--cm-tinta); }
.temporada__hitos { display: none; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--texto-info); }
.temporada__hitos strong { font-family: var(--font-mono); font-size: 11px; color: var(--texto-fuerte); margin-right: 4px; }
.planes-seccion .aviso { flex-wrap: nowrap; align-items: flex-start; }
.planes-seccion .aviso i { flex: none; margin-top: 2px; }
@media (max-width: 640px) {
  .temporada__hito { display: none; }
  .temporada__hitos { display: flex; flex-direction: column; gap: 3px; }
  .temporada__mes[title*=":"] .temporada__etq::after { content: "•"; display: block; color: var(--texto-info); }
}

/* Producción audiovisual */
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.servicio { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--superficie-tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-l); }
.servicio p { margin: 0; }
.servicio .plan__uf { font-size: 24px; }
.servicio .boton { margin-top: auto; align-self: flex-start; }

/* Cifras (antes del lanzamiento, sin números) */
.cifras-previas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cifra-previa { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px dashed var(--cm-tinta-20); border-radius: var(--radio-m); background: var(--superficie-tarjeta); font-size: 14.5px; }
.cifra-previa i { color: var(--texto-info); font-size: 20px; }

/* Preguntas frecuentes */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--borde); }
.faq__item { border-bottom: 1px solid var(--borde); }
.faq__item summary { cursor: pointer; padding: 14px 0; font-weight: 600; min-height: var(--toque-min); list-style-position: outside; }
.faq__item p { margin: 0 0 14px; color: var(--texto-suave); }

/* #/pagar */
.pagar { padding: 24px 16px 64px; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.pagar__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pagar__resumen h3 { margin: 0; font-size: 18px; }
.pagar__total { border-bottom: 0 !important; padding-top: 10px !important; font-size: 16px !important; }
.pagar__total strong { font-size: 22px; }
.pagar .casilla { align-items: flex-start; }
.pagar .casilla input { flex: none; margin-top: 1px; }
@media (min-width: 900px) { .pagar { grid-template-columns: 1.4fr 1fr; } .pagar__resumen { position: sticky; top: 90px; } }

/* #/pago */
.pago-resultado { align-items: flex-start; }
.pago-resultado h2 { margin: 0; }
.pago-resultado--pendiente .icono-listo { background: var(--cm-cuaderno); color: var(--cm-tinta); }
.pago-resultado--rechazado .icono-listo, .pago-resultado--anulado .icono-listo { background: var(--cm-correccion); }
.flow-simulado { display: flex; flex-direction: column; gap: 10px; padding-right: 44px; }
.flow-simulado h2 { margin: 0; font-size: 32px; }

/* Destacado en resultados: espacio aparte y rotulado */
.bloque-destacados { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px dashed var(--cm-cielo); border-radius: var(--radio-l); background: rgba(80, 163, 226, .06); }
.bloque-destacados > .etiqueta { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-info); }
.bloque-destacados > p { margin: 0; }

/* Interruptor segmentado (30-09-2026): tipo de establecimiento y forma de pago */
.interruptor { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--radio-pildora); background: var(--cm-gris-boton); border: 1px solid var(--borde); isolation: isolate; max-width: 100%; }
.interruptor::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); transform: translateX(calc(100% * var(--i))); border-radius: var(--radio-pildora); background: var(--cm-tinta); box-shadow: var(--sombra-tarjeta); transition: transform var(--dur) var(--ease); }
.interruptor__op { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: var(--radio-pildora); font: 600 var(--fs-ui)/1.2 var(--font-text); color: var(--texto-fuerte); text-decoration: none; text-align: center; white-space: nowrap; }
.interruptor__op[aria-checked="true"] { color: var(--cm-papel); }
.interruptor__op:not([aria-checked="true"]):hover { background: rgba(27, 43, 75, .06); }
.interruptor__op:focus-visible { outline: 3px solid var(--cm-cielo); outline-offset: 2px; }
@media (max-width: 520px) { .planes__controles { flex-direction: column; align-items: stretch; } .interruptor { display: grid; } .interruptor__op { padding: 0 8px; white-space: normal; font-size: 14px; } }

/* Llamado a los planes en #/establecimientos (30-09-2026) */
.llamado-planes { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; border-radius: var(--radio-l); background: var(--superficie-tarjeta); border: 1px solid var(--borde); border-top: 4px solid var(--cm-cielo); box-shadow: var(--sombra-elevada); }
.llamado-planes h2 { margin: 6px 0 12px; font: 700 clamp(22px, 3vw, 28px)/1.15 var(--font-display); letter-spacing: var(--tracking-display); color: var(--texto-fuerte); }
.llamado-planes .etiqueta { color: var(--texto-info); }
.llamado-planes__lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.llamado-planes__lista li { display: flex; gap: 10px; align-items: flex-start; }
.llamado-planes__lista i { flex: none; margin-top: 2px; font-size: 20px; color: var(--texto-info); }
.llamado-planes__nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radio-m); background: var(--cm-cuaderno); font-size: 14.5px; }
.llamado-planes__nota i { flex: none; margin-top: 2px; color: var(--texto-info); }
.llamado-planes__accion { display: flex; flex-direction: column; gap: 8px; align-items: stretch; justify-content: center; text-align: center; }
.llamado-planes__accion .boton { justify-content: center; white-space: nowrap; }
/* "¿No encuentras tu establecimiento?": en celulares el texto baja a su propia línea en vez de quedar en una columna angosta */
.agregar-llamado > div { flex: 1 1 240px !important; min-width: 200px !important; }
@media (min-width: 720px) { .llamado-planes { grid-template-columns: 1fr 270px; align-items: center; padding: 28px; } }