/* ---------- 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; justify-content:center !important}

/* --- EL ROTULO DE CADA PERIODO, EN DOS PIEZAS --------------------------
   Antes esto era `flex-wrap:wrap`, y el resultado en el móvil lo describió
   Sergio mejor que nadie: *«es como si las 3 opciones estuvieran dentro del
   mismo toggle»*. Y era literal: la fila se partía **dentro** de la misma
   píldora gris, así que se veían tres rótulos sueltos en dos renglones y no
   tres botones.

   Ahora el nombre va en `<b>` y la rebaja en `<span>`, igual que en la home.
   En el escritorio se siguen leyendo en una línea —el punto lo pone el CSS— y
   en el móvil cada botón parte en dos renglones dentro de su propia casilla.
   Medido a 320, 360 y 390. */
.opr-ph-ciclo button{display:inline-flex !important; align-items:baseline !important; gap:6px !important}
.opr-ph-ciclo button span::before{content:'· ' !important}

@media (max-width:560px){
  .opr-ph-ciclo{display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important; max-width:420px !important; margin-left:auto !important; margin-right:auto !important; gap:3px !important}
  .opr-ph-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-ph-ciclo button span{font-size:.6875rem !important; font-weight:600 !important}
  .opr-ph-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-ph-ciclo{border-radius:14px !important}
  .opr-ph-ciclo button{border-radius:11px !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 --- */
/* --- LAS SEIS FILAS, CUADRADAS ENTRE LAS CINCO TARJETAS ----------------
   Sergio: *«los títulos y subtítulos lo mismo, la línea que separa los
   subtítulos de los precios alineada también y por supuesto los precios
   alineados. Todo alineado»*.

   Antes cada tarjeta era una columna suelta y el cuadre se intentaba a ojo con
   dos alturas mínimas escritas a mano —`3.7em` en la razón y `2.9em` en el
   ahorro—. Eso aguanta mientras todos los textos ocupen las mismas líneas; en
   cuanto uno se pasa de una, **todo lo que va debajo se desplaza sólo en esa
   tarjeta**: la línea, el precio y el botón.

   Se quita el apaño y se usa **rejilla anidada** (`subgrid`): la lista declara
   las seis filas —nombre, razón, precio, ahorro, incluye y botón— y cada
   tarjeta se cuelga de esas mismas líneas. El cuadre deja de depender de que el
   texto mida lo que alguien supuso. La fila del «incluye» se lleva el sobrante,
   así que el botón queda abajo y a la misma altura en las cinco.

   Los navegadores sin `subgrid` se quedan con el comportamiento de antes, que
   es el que había hasta hoy: el `@supports` de más abajo les devuelve las dos
   alturas mínimas. */
/* BravoZulu: dos planes, centrados y más anchos. */
.opr-ph-lista{position:relative !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,340px)) !important; justify-content:center !important;
  grid-auto-rows:auto auto auto auto 1fr auto !important;
  gap:10px !important; align-items:stretch !important}
.opr-ph-plan{position:relative !important; display:grid !important; grid-template-rows:subgrid !important; grid-row:span 6 !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:#0F332D !important; box-shadow:inset 0 0 0 1px var(--p700) !important}
/* LA RECOMENDADA YA NO SE SUBE. Llevaba `translateY(-6px)`, y eso movía seis
   píxeles hacia arriba su nombre, su razón, su línea, su precio y su botón
   respecto a las otras cuatro. Sergio: *«los botones salen uno más arriba que
   el otro y así, y los quiero alineados»*. Se distingue de sobra sin moverla:
   fondo más claro, aro más grueso, la sombra y la cinta de «El más elegido». */
.opr-ph-plan.es-rec{background:#0F332D !important; box-shadow:inset 0 0 0 1.5px var(--p500), 0 30px 60px -30px rgba(0,0,0,.9) !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:0 !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:0 !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{align-self:end !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:62ch !important; color:var(--p500) !important}
.opr-ph-extras{display:grid !important; grid-template-columns:repeat(2,minmax(0,340px)) !important; justify-content:center !important;
  gap:10px !important; margin:8px 0 6px !important; text-align:left !important; width:100% !important}
.opr-ph-extra{display:flex !important; flex-direction:column !important; gap:5px !important; padding:16px 18px !important;
  border-radius:var(--radio) !important; box-shadow:inset 0 0 0 1px var(--p800) !important}
.opr-ph-extra > b{font-size:.96875rem !important; font-weight:800 !important; color:#fff !important}
.opr-ph-extra > span{font-size:.8125rem !important; line-height:1.5 !important; color:var(--p400) !important}
.opr-ph-extra span b{color:#fff !important; font-weight:700 !important}
@media (max-width:760px){ .opr-ph-extras{grid-template-columns:1fr !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:540px){
  .opr-ph-lista{grid-template-columns:1fr !important; gap:14px !important}
  .opr-ph-plan{grid-column:auto !important}
  .opr-ph-razon,.opr-ph-ahorro{min-height:0 !important}
  .opr-ph-plan{padding:24px 18px 18px !important}
}

/* SIN `subgrid`, LO DE ANTES. Navegadores viejos: vuelven las dos alturas
   mínimas y el botón empujado con `margin-top:auto`. No cuadra fino, pero es
   exactamente lo que se veía hasta hoy, así que nadie pierde nada. */
@supports not (grid-template-rows:subgrid){
  .opr-ph-plan{display:flex !important; flex-direction:column !important}
  .opr-ph-razon{min-height:3.7em !important}
  .opr-ph-ahorro{min-height:2.9em !important}
  .opr-ph-cta{margin-top:auto !important}
  @media (max-width:540px){
    .opr-ph-razon,.opr-ph-ahorro{min-height:0 !important}
  }
}

/* Podcast · aún no existe (24 sep 2026): difuminado + etiqueta «Próximamente». */
.opr .opr-pronto, .opr-pronto { display: inline-block !important; margin: 0 0 0 6px !important; padding: 2px 8px !important; border-radius: 999px !important; background: #fff !important; color: #15181d !important; font-style: normal !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: .02em !important; white-space: nowrap !important; vertical-align: middle !important; filter: none !important; opacity: 1 !important; }
.opr .opr-ph-incluye li.es-pronto > svg, .opr .opr-ph-incluye li.es-pronto > span { filter: blur(1.2px) !important; opacity: .55 !important; }