/* ---------- sección Planes ---------- */
.opr-planes{position:relative !important; overflow:hidden !important}
.opr-planes::before{content:'' !important; position:absolute !important; left:50% !important; top:-32% !important; width:min(880px,110%) !important; aspect-ratio:1 !important;
  transform:translateX(-50%) !important; pointer-events:none !important;
  background:radial-gradient(circle at center, rgba(127,142,159,.34), transparent 64%) !important}

.opr-pn-cabeza{position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important; margin-bottom:clamp(26px,3vw,38px) !important}
.opr-planes .opr-h2{max-width:26ch !important}
.opr-pn-pill{padding:6px 15px !important; border-radius:999px !important; font-size:.78125rem !important; font-weight:600 !important;
  color:var(--p300) !important; box-shadow:inset 0 0 0 1px var(--p700) !important; margin-bottom:16px !important}
.opr-planes .opr-h2{color:#fff !important}
.opr-planes .opr-entradilla{margin-left:auto !important; margin-right:auto !important; text-align:center !important; max-width:72ch !important}
.opr-pn-ciclo{margin-top:20px !important}

/* --- EL ROTULO DE CADA PERIODO, EN DOS PIEZAS ---------------------------
   El texto de los botones era una sola cadena —«Semestral · −5 %»— y a 390 px
   los tres seguidos medían 458 px dentro de una pantalla de 390: «Mensual» se
   salía por la izquierda y «Anual» por la derecha. Sergio: *«en la versión móvil
   los toggle de los precios se salen de la pantalla y queda mal»*.

   Ahora el nombre va en `<b>` y la rebaja en `<span>`. **En el escritorio no
   cambia nada**: se siguen leyendo en una línea y el punto lo pone el CSS. En el
   móvil el botón parte en dos renglones y los tres caben de sobra. */
.opr-pn-ciclo button{display:inline-flex !important; align-items:baseline !important; gap:6px !important}
.opr-pn-ciclo button span::before{content:'· ' !important}

.opr-pn-lista{position:relative !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important; align-items:stretch !important}
.opr-pn-plan{position:relative !important; display:flex !important; flex-direction:column !important; padding:24px 20px 20px !important;
  border-radius:var(--radio) !important; background:var(--p900) !important; box-shadow:inset 0 0 0 1px var(--p800) !important;
  transition:box-shadow .2s ease, transform .2s ease, background .2s ease !important}
.opr-pn-plan:hover{background:#252E38 !important; box-shadow:inset 0 0 0 1px var(--p700) !important}
.opr-pn-plan.es-rec{background:#252E38 !important; box-shadow:inset 0 0 0 1.5px var(--p500), 0 30px 60px -30px rgba(0,0,0,.9) !important;
  transform:translateY(-6px) !important; z-index:1 !important}
.opr-pn-cinta{position:absolute !important; top:-11px !important; left:50% !important; transform:translateX(-50%) !important; white-space:nowrap !important;
  padding:4px 13px !important; border-radius:999px !important; background:var(--p50) !important; color:var(--p950) !important;
  font-size:.6875rem !important; font-weight:700 !important}

.opr-pn-nombre{font-size:1.0625rem !important; font-weight:800 !important; letter-spacing:-.018em !important; color:#fff !important}
.opr-pn-razon{margin-top:6px !important; font-size:.8125rem !important; line-height:1.45 !important; color:var(--p400) !important;
  min-height:3.7em !important; text-wrap:pretty !important}
.opr-pn-precio{display:flex !important; align-items:baseline !important; gap:5px !important; margin-top:16px !important;
  padding-top:16px !important; border-top:1px solid var(--p800) !important}
.opr-pn-precio b{font-size:2rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.04em !important; color:#fff !important}
.opr-pn-precio span{font-size:.78125rem !important; font-weight:600 !important; color:var(--p500) !important}
.opr-pn-ahorro{display:block !important; margin-top:6px !important; font-size:.71875rem !important; color:var(--p500) !important; min-height:2.4em !important}
.opr-pn-cta{margin-top:auto !important; padding-top:0 !important; width:100% !important; padding:12px 14px !important; font-size:.875rem !important}
.opr-pn-plan .opr-pn-cta{margin-top:16px !important}

.opr-pn-pie{position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important;
  margin-top:26px !important; text-align:center !important}
.opr-pn-detalle{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:#fff !important}
.opr-pn-detalle:hover{color:var(--p300) !important}
.opr-pn-legal{max-width:60ch !important; color:var(--p600) !important}

@media (max-width:1080px){
  .opr-pn-lista{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .opr-pn-plan.es-rec{transform:none !important}
}
@media (max-width:720px){ .opr-pn-lista{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
@media (max-width:520px){
  .opr-pn-lista{grid-template-columns:1fr !important; gap:14px !important}
  .opr-pn-razon,.opr-pn-ahorro{min-height:0 !important}
}

/* TRES COLUMNAS DE VERDAD EN EL MOVIL.
   Ni una fila que se sale ni un amasijo: la rejilla reparte el ancho en tres
   partes iguales, el rótulo baja a dos renglones y se ve dónde empieza y acaba
   cada opción, que es lo que se había perdido. Medido a 320, 360 y 390. */
@media (max-width:560px){
  .opr-pn-ciclo{display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important; max-width:420px !important; margin-inline:auto !important; gap:3px !important}
  .opr-pn-ciclo button{flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:1px !important; padding:8px 4px !important; font-size:.8125rem !important; line-height:1.15 !important;
    white-space:normal !important; text-align:center !important}
  .opr-pn-ciclo button span{font-size:.6875rem !important; font-weight:600 !important}
  .opr-pn-ciclo button span::before{content:none !important}
  /* Y EL REDONDEO BAJA DE 999 A 12. Con la casilla a 108x62, un radio de 999 px
     convierte al elegido en un óvalo que se come las esquinas del rótulo. En
     una casilla casi cuadrada el redondeo tiene que ser de esquina, no de
     píldora. */
  .opr-pn-ciclo{border-radius:14px !important}
  .opr-pn-ciclo button{border-radius:11px !important}
}