/* ---------- Planes · portada y tarifas ---------- */
.opr-ph{position:relative !important; overflow:hidden !important}
.opr-ph::before{content:'' !important; position:absolute !important; left:50% !important; top:-30% !important; width:min(920px,112%) !important; aspect-ratio:1 !important;
  transform:translateX(-50%) !important; pointer-events:none !important;
  background:radial-gradient(circle at center, rgba(127,142,159,.30), transparent 64%) !important}

.opr-ph-cabeza{position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important; margin-bottom:clamp(28px,3.4vw,44px) !important}
.opr-ph .opr-h2{color:#fff !important; max-width:20ch !important}
.opr-ph .opr-entradilla{margin-left:auto !important; margin-right:auto !important; text-align:center !important; max-width:56ch !important}
.opr-ph-ciclo{margin-top:22px !important; max-width:100% !important; flex-wrap:wrap !important; justify-content:center !important}
/* Con tres modalidades el segmentado no cabe de una tirada en un móvil: se
   aprieta el texto y, si aun así no entra, cae a dos líneas dentro de la píldora. */
@media (max-width:560px){
  .opr-ph-ciclo button{padding-left:13px !important; padding-right:13px !important; font-size:.84375rem !important}
}

/* El agente va al margen izquierdo del titular, nunca encima del texto. La
   posición es CSS pura: aquí no hay nada que colocar desde JavaScript, así que
   el blindaje no puede descolocarlo. */
img.opr-ph-agente{position:absolute !important; left:0 !important; bottom:-22px !important; width:150px !important; height:auto !important;
  pointer-events:none !important; user-select:none !important;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)) !important}

/* --- las cinco tarjetas --- */
.opr-ph-lista{position:relative !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important; align-items:stretch !important}
.opr-ph-plan{position:relative !important; display:flex !important; flex-direction:column !important; padding:26px 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-ph-plan:hover{background:#252E38 !important; box-shadow:inset 0 0 0 1px var(--p700) !important}
.opr-ph-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-ph-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-ph-nombre{font-size:1.125rem !important; font-weight:800 !important; letter-spacing:-.018em !important; color:#fff !important}
.opr-ph-razon{margin-top:7px !important; font-size:.84375rem !important; line-height:1.45 !important; color:var(--p400) !important;
  min-height:3.7em !important; text-wrap:pretty !important}

.opr-ph-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-ph-precio b{font-size:2.125rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.04em !important; color:#fff !important}
.opr-ph-precio span{font-size:.78125rem !important; font-weight:600 !important; color:var(--p500) !important}
.opr-ph-ahorro{display:block !important; margin-top:6px !important; font-size:.71875rem !important; line-height:1.45 !important;
  color:var(--p500) !important; min-height:2.9em !important}

/* Hueco para el desglose de cada plan. Se rellena desde el array PLANES en
   cuanto Sergio pase la tabla; mientras esté vacío no pinta nada. */
.opr-ph-incluye{margin-top:14px !important; display:flex !important; flex-direction:column !important; gap:7px !important}
.opr-ph-incluye li{position:relative !important; padding-left:21px !important; font-size:.8125rem !important; line-height:1.45 !important; color:var(--p300) !important}
.opr-ph-incluye svg{position:absolute !important; left:0 !important; top:3px !important; width:14px !important; height:14px !important; color:var(--p500) !important}

/* El nombre del plan no cabe en el botón a cinco columnas: la etiqueta es
   corta y el nombre viaja en aria-label. */
.opr-ph-cta{margin-top:auto !important; width:100% !important; padding:12px 14px !important; font-size:.90625rem !important; white-space:normal !important}
.opr-ph-plan .opr-ph-cta{margin-top:18px !important}

/* --- pie de la sección --- */
.opr-ph-pie{position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important;
  margin-top:30px !important; text-align:center !important}
.opr-ph-ancla{display:inline-flex !important; align-items:center !important; gap:8px !important; padding:11px 20px !important; border-radius:999px !important;
  font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px var(--p700) !important; transition:background .16s ease, box-shadow .16s ease !important}
.opr-ph-ancla:hover{background:var(--p900) !important; box-shadow:inset 0 0 0 1px var(--p600) !important}
.opr-ph-ancla svg{width:16px !important; height:16px !important; flex:none !important}
.opr-ph-legal{max-width:58ch !important; color:var(--p600) !important}

/* Cinco tarjetas no reparten bien en tres ni en dos columnas: sobra un hueco al
   final de la rejilla. Se usa una rejilla del doble de columnas, cada tarjeta
   ocupa dos, y las de la última fila se colocan a mano para que queden
   centradas en vez de pegadas a la izquierda. */
/* Por debajo de 1080 px el agente estorba: no hay hueco a los lados del
   titular. Para ocultar una imagen hace falta `img.clase`, porque
   `.opr img{display:block !important}` del núcleo le gana a la clase sola. */
@media (max-width:1080px){ img.opr-ph-agente{display:none !important} }

@media (max-width:1120px){
  .opr-ph-lista{grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:12px !important}
  .opr-ph-plan{grid-column:span 2 !important}
  .opr-ph-plan:nth-child(4){grid-column:2/span 2 !important}
  .opr-ph-plan:nth-child(5){grid-column:4/span 2 !important}
  .opr-ph-plan.es-rec{transform:none !important}
}
@media (max-width:760px){
  .opr-ph-lista{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .opr-ph-plan:nth-child(4){grid-column:3/span 2 !important}
  .opr-ph-plan:nth-child(5){grid-column:2/span 2 !important}
}
@media (max-width:540px){
  .opr-ph-lista{grid-template-columns:1fr !important; gap:14px !important}
  .opr-ph-plan,.opr-ph-plan:nth-child(4),.opr-ph-plan:nth-child(5){grid-column:auto !important}
  .opr-ph-razon,.opr-ph-ahorro{min-height:0 !important}
  .opr-ph-plan{padding:24px 18px 18px !important}
}