/* Escenas nuevas de la web renovada (maqueta del 04/11/2026). Usan los tokens y las clases de estilos.css de la portada 0.4.10. */
.rn { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--margen);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 72px); align-items: center; }
.rn-invertida { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rn-invertida .rn-texto { order: 2; }
.rn-texto { display: grid; gap: 20px; align-content: start; }
.rn > *, .rn-dos > *, .rn-texto > *, .rn-tarjeta > * { min-width: 0; }
.rn-linea, .rn .titular, .rn-dos .titular { overflow-wrap: break-word; }
.rn .titular { font-size: clamp(32px, 3.6vw, 54px); margin: 0; }
.rn-linea { margin: 0; color: var(--suave); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.45; max-width: 36ch; }
.rn-plan { margin: 0; color: var(--tenue); font-size: 14px; }
.rn-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rn-tarjeta { position: relative; background: linear-gradient(180deg, var(--noche-alzada), #0A1D3D); border: 1px solid var(--filete);
  border-radius: 20px; box-shadow: var(--sombra-ui); padding: clamp(18px, 2.2vw, 28px); color: var(--blanco); font-family: var(--f-sans); }
.rn-ejemplo { margin: 0; font-size: 12.5px; color: var(--tenue); }
.rn-etq { font-size: 12.5px; font-weight: 700; color: var(--tenue); letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.rn-cian { color: var(--aguamarina); }

/* Pasos de la ficha */
.rn-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rn-pasos button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 8px 10px; border-radius: 10px; color: var(--tenue); font: 600 16px/1.3 var(--f-sans); transition: color .25s, background-color .25s; }
.rn-pasos button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--tenue); flex: none; transition: all .25s; }
.rn-pasos button[aria-current="true"] { color: var(--blanco); background: rgba(23, 184, 246, .08); }
.rn-pasos button[aria-current="true"]::before { background: var(--aguamarina); border-color: var(--aguamarina); box-shadow: 0 0 0 4px rgba(23, 184, 246, .18); }
.rn-pasos button:focus-visible { outline: 2px solid var(--aguamarina); outline-offset: 2px; }

/* Ficha */
.rn-ficha-cab { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--filete); }
.rn-ficha-titulo { margin: 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 800; line-height: 1.25; }
.rn-ficha-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.rn-reloj { display: inline-flex; gap: 6px; align-items: center; }
.rn-reloj svg { width: 16px; height: 16px; }
.rn-bloques { display: grid; gap: 10px; margin-top: 16px; }
.rn-bloque { border: 1px solid var(--filete); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px;
  transition: opacity .45s ease, border-color .45s ease, box-shadow .45s ease, background-color .45s ease; }
.rn-bloque.activo { border-color: rgba(23, 184, 246, .7); background: rgba(23, 184, 246, .05); box-shadow: 0 0 28px -10px rgba(23, 184, 246, .55); }
.rn-resumen { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--suave); }
.rn-resumen b { color: var(--blanco); font-weight: 700; }
.rn-resumen mark { background: linear-gradient(transparent 72%, rgba(242, 193, 78, .5) 72%); color: inherit; padding: 0 2px; }
.rn-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rn-cifra { display: grid; gap: 4px; }
.rn-cifra strong { font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rn-cifra span { font-size: 13px; color: var(--tenue); }
.rn-barra { position: relative; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rn-margen { position: absolute; top: 0; bottom: 0; left: 30%; width: 26%; border-radius: 6px; background: rgba(23, 184, 246, .28);
  transform-origin: center; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.rn-marca-estimada { position: absolute; top: -3px; bottom: -3px; left: 42%; width: 4px; border-radius: 2px; background: var(--blanco); }
.anima .rn-bloque:not(.activo) .rn-margen { transform: scaleX(.2); }
.rn-ediciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.rn-ediciones li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 92px; gap: 12px; align-items: center; }
.rn-ediciones .ano { color: var(--tenue); font-weight: 700; }
.rn-ediciones .quien { color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-ediciones .baja { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; color: var(--aguamarina); font-weight: 700; }
.rn-ediciones .baja i { display: block; height: 6px; border-radius: 3px; background: var(--aguamarina); opacity: .8; transform-origin: left; transition: transform .7s ease; }
.anima .rn-bloque:not(.activo) .rn-ediciones .baja i { transform: scaleX(.15); }
.rn-racha { margin: 0; font-size: 13.5px; color: var(--suave); }
.rn-ruleta { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.rn-ruleta svg { width: 150px; height: 88px; overflow: visible; }
.rn-arco-fondo { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 14; stroke-linecap: round; }
.rn-arco { fill: none; stroke: var(--ambar); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.rn-aguja { transform-origin: 75px 78px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.rn-prob { display: grid; gap: 8px; }
.rn-prob strong { font-size: 24px; font-weight: 850; font-variant-numeric: tabular-nums; }
.rn-prob label { font-size: 13.5px; color: var(--suave); display: flex; justify-content: space-between; gap: 8px; }
.rn-prob input[type="range"] { width: 100%; accent-color: var(--ambar); }

/* Antes de que salga */
.rn-radar-tarjeta { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 24px; align-items: center; }
.rn-radar { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgba(23, 184, 246, .1) 0 1px, transparent 1.5px) 0 0 / 100% 100%,
    repeating-radial-gradient(circle, transparent 0 calc(25% - 1px), rgba(23, 184, 246, .28) calc(25% - 1px) 25%), #071A36;
  box-shadow: inset 0 0 0 1px rgba(23, 184, 246, .35), 0 0 60px -20px rgba(23, 184, 246, .5); }
.rn-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(23, 184, 246, .55), rgba(23, 184, 246, 0) 70deg, transparent 360deg); }
.anima .rn-radar::before { animation: rn-barrido 4s linear infinite; }
@keyframes rn-barrido { to { transform: rotate(360deg); } }
.rn-eco { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--aguamarina);
  box-shadow: 0 0 12px 2px rgba(23, 184, 246, .8); }
.anima .rn-eco { animation: rn-eco 4s ease-out infinite; }
@keyframes rn-eco { 0%, 100% { opacity: .35; transform: scale(.8); } 8% { opacity: 1; transform: scale(1.35); } 40% { opacity: .55; transform: scale(1); } }
.rn-viene { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rn-viene li { border: 1px solid var(--filete); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; background: rgba(6, 20, 41, .55);
  transition: opacity .5s ease, transform .5s ease; }
.anima .rn-anima:not(.es-vista) .rn-viene li { opacity: .6; transform: translateX(12px); }
.rn-viene li:nth-child(2) { transition-delay: .25s; }
.rn-viene li:nth-child(3) { transition-delay: .5s; }
.rn-viene b { font-size: 15.5px; }
.rn-viene .datos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--suave); font-variant-numeric: tabular-nums; }

/* Fuentes */
.rn-fuentes { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--margen) clamp(24px, 4vw, 48px); display: grid; gap: 14px; }
.rn-fuentes .titular { font-size: clamp(28px, 3vw, 44px); margin: 0; }
.rn-cinta { overflow: hidden; border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); margin-bottom: clamp(24px, 4vw, 56px);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rn-cinta-in { display: flex; width: max-content; gap: 56px; padding: 22px 28px; font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; font-stretch: 108%; color: var(--suave); }
.rn-cinta-in span { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.rn-cinta-in span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aguamarina); box-shadow: 0 0 10px rgba(23, 184, 246, .8); }
.anima .rn-cinta-in { animation: rn-cinta var(--rn-dur, 36s) linear infinite; }
.rn-cinta:hover .rn-cinta-in { animation-play-state: paused; }
/* --rn-set: ancho de una tanda de fuentes (escenas.js repite tandas hasta cubrir dos pantallas); sin JS, la mitad */
@keyframes rn-cinta { to { transform: translateX(calc(-1 * var(--rn-set, 50%))); } }

/* Competencia */
.rn-organismo { display: grid; gap: 16px; }
.rn-gana { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rn-gana li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 100px; gap: 12px; align-items: center; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.rn-gana .rn-b { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--azul-globo), var(--aguamarina)); transform-origin: left; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.rn-gana li:nth-child(2) .barra { transition-delay: .15s; }
.rn-gana li:nth-child(3) .barra { transition-delay: .3s; }
.anima .rn-anima:not(.es-vista) .rn-gana .rn-b { transform: scaleX(.05); }
.rn-gana .num { color: var(--suave); text-align: right; }
.rn-pie-org { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 14px; border-top: 1px solid var(--filete); font-size: 14px; color: var(--suave); }
.rn-pie-org strong { color: var(--blanco); font-size: 20px; font-weight: 850; margin-right: 6px; }

/* Equipo y red */
.rn-dos { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--margen); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rn-dos .rn-tarjeta { display: grid; gap: 16px; align-content: start; }
.rn-dos .titular { font-size: clamp(26px, 2.6vw, 38px); margin: 0; }
.rn-chat { display: grid; gap: 8px; }
.rn-msj { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.35; transition: opacity .4s ease, transform .4s ease; }
.rn-msj small { display: block; font-size: 12px; font-weight: 700; color: var(--tenue); margin-bottom: 2px; }
.rn-msj.otro { background: rgba(255, 255, 255, .07); border-bottom-left-radius: 4px; justify-self: start; }
.rn-msj.yo { background: var(--aguamarina-tinta); border-bottom-right-radius: 4px; justify-self: end; }
.rn-msj.yo small { color: rgba(255, 255, 255, .75); }
.anima .rn-anima:not(.es-vista) .rn-msj { opacity: 0; transform: translateY(8px); }
.rn-msj:nth-child(2) { transition-delay: .4s; }
.rn-msj:nth-child(3) { transition-delay: .8s; }
.rn-muro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rn-anuncio { border: 1px solid var(--filete); border-radius: 14px; overflow: hidden; background: rgba(6, 20, 41, .55); display: grid; }
.rn-anuncio .img { height: 74px; background: radial-gradient(120% 120% at 20% 10%, rgba(23, 184, 246, .55), transparent 60%), linear-gradient(135deg, #0B64F0, #061429); }
.rn-anuncio:nth-child(2) .img { background: radial-gradient(120% 120% at 80% 20%, rgba(242, 193, 78, .55), transparent 60%), linear-gradient(135deg, #0D8EF2, #061429); }
.rn-anuncio div:last-child { padding: 10px 12px; display: grid; gap: 2px; font-size: 13.5px; }
.rn-anuncio b { font-size: 14.5px; }
.rn-anuncio span { color: var(--tenue); }
.rn-extra { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--suave); }
.rn-extra strong { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ambar); color: var(--tinta); font-size: 17px; font-weight: 850; flex: none; }

/* Radar gratuito de la maqueta (en la web real va el buscador del Radar) */
.rn-radar-gratis { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--margen); }
.rn-buscador { display: grid; gap: 18px; }
.rn-buscador .titular { font-size: clamp(30px, 3.2vw, 48px); margin: 0; }
.rn-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; }
.rn-campo { min-height: 52px; border-radius: 12px; border: 1px solid var(--filete); background: rgba(6, 20, 41, .7); color: var(--tenue);
  display: flex; align-items: center; padding: 0 16px; font-size: 16px; }

@media (max-width: 900px) {
  .rn, .rn-invertida { grid-template-columns: 1fr; }
  .rn-invertida .rn-texto { order: 0; }
  .rn-dos { grid-template-columns: 1fr; }
  .rn-radar-tarjeta { grid-template-columns: 1fr; }
  .rn-radar { max-width: 220px; justify-self: center; }
  .rn-campos { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rn .titular, .rn-buscador .titular { font-size: clamp(28px, 8.2vw, 40px); }
  .rn-dos .titular { font-size: clamp(26px, 7.4vw, 34px); }
  .rn-fuentes .titular { font-size: clamp(26px, 7.4vw, 34px); }
  .rn-ruleta { grid-template-columns: 1fr; justify-items: start; }
  .rn-ediciones li { grid-template-columns: 40px minmax(0, 1fr) 80px; gap: 8px; }
  .rn-gana li { grid-template-columns: 80px minmax(0, 1fr) 86px; }
  .rn-muro { grid-template-columns: 1fr; }
  .rn-cifras { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rn-bloque, .rn-margen, .rn-aguja, .rn-arco, .rn-viene li, .rn-gana .rn-b, .rn-msj { transition: none; }
}

/* Tarjetas en blanco (04/11, «pon los widgets en blanco ahora se leen mal y no resaltan»): resaltan sobre la noche y se leen mejor */
.rn-tarjeta { background: #FFFFFF; border-color: var(--borde-ui); color: var(--tinta); box-shadow: var(--sombra-flotante); }
.rn-tarjeta .titular { color: var(--tinta); }
.rn-tarjeta .rn-linea { color: var(--gris-tinta); }
.rn-tarjeta .rn-etq, .rn-tarjeta .rn-plan, .rn-tarjeta .rn-ejemplo { color: #607089; }
.rn-tarjeta .rn-cian { color: var(--aguamarina-media); font-weight: 700; }
.rn-ficha-cab { border-bottom-color: var(--borde-ui); }
.rn-ficha-meta { color: var(--gris-tinta); }
.rn-bloque { border-color: var(--borde-ui); background: #F7FAFE; }
.rn-bloque.activo { border-color: var(--aguamarina-tinta); background: #EEF5FF; box-shadow: 0 10px 28px -14px rgba(11, 100, 240, .55); }
.rn-resumen { color: var(--gris-tinta); }
.rn-resumen b { color: var(--tinta); }
.rn-resumen mark { background: linear-gradient(transparent 70%, rgba(242, 193, 78, .7) 70%); }
.rn-cifra span { color: var(--gris-tinta); }
.rn-barra { background: #E3EAF5; }
.rn-margen { background: rgba(13, 142, 242, .3); }
.rn-marca-estimada { background: var(--tinta); }
.anima .rn-bloque:not(.activo) .rn-margen, .anima .rn-bloque:not(.activo) .rn-ediciones .baja i { transform: none; }
.rn-ediciones .ano { color: #607089; }
.rn-ediciones .quien { color: var(--gris-tinta); }
.rn-ediciones .baja { color: var(--aguamarina-media); }
.rn-ediciones .baja i { background: var(--aguamarina); opacity: 1; }
.rn-racha { color: var(--gris-tinta); }
.rn-arco-fondo { stroke: #E3EAF5; }
.rn-prob label { color: var(--gris-tinta); }
.rn-prob input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; padding: 0; border: 0;
  background: transparent; box-shadow: none; cursor: pointer; --rn-p: 48%; }
.rn-prob input[type="range"]:focus-visible { outline: 2px solid var(--aguamarina-tinta); outline-offset: 3px; border-radius: 6px; }
.rn-prob input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ambar) var(--rn-p), #E3EAF5 var(--rn-p)); }
.rn-prob input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px;
  border-radius: 50%; background: #FFFFFF; border: 3px solid var(--ambar); box-shadow: 0 2px 8px rgba(11, 27, 51, .28); }
.rn-prob input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #E3EAF5; }
.rn-prob input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ambar); }
.rn-prob input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--ambar); }
.rn-viene li { background: #F4F8FF; border-color: var(--borde-ui); }
.rn-viene .datos { color: var(--gris-tinta); }
.rn-gana .num { color: var(--gris-tinta); }
.rn-pie-org { border-top-color: var(--borde-ui); color: var(--gris-tinta); }
.rn-pie-org strong { color: var(--tinta); }
.rn-msj.otro { background: #EEF2F8; color: var(--tinta); }
.rn-msj.yo { color: #FFFFFF; }
.rn-msj small { color: #607089; }
.rn-anuncio { background: #F4F8FF; border-color: var(--borde-ui); }
.rn-anuncio span { color: #607089; }
.rn-extra { color: var(--gris-tinta); }

/* 0.4.14 (04/11, «el contador no me gusta, lo demas, si»): colores de marca en los planes y tabla «Compara los planes» */
.plan-ia { --acento: #6FE0FF; --suave-plan: #C9DDF5; --filete-plan: rgba(111, 224, 255, .22); --f2: #6FE0FF;
  background: radial-gradient(60% 24% at 50% 0%, rgba(23, 184, 246, .3), transparent 72%), linear-gradient(165deg, #0B64F0 0%, #0B1B33 100%);
  box-shadow: inset 0 0 0 1px rgba(111, 224, 255, .2), var(--sombra-ui); }
.plan-ia .boton-plan { color: #0B64F0; }
.plan-ia .plan-descuento { background: #D5F4FF; color: #0B1B33; }
.plan-presentacion { --f3: #F2C14E; --filete-plan: rgba(242, 193, 78, .24); --caja-tu: rgba(242, 193, 78, .08); }
.plan-presentacion .boton-plan { background: #F2C14E; box-shadow: 0 14px 30px -16px rgba(242, 193, 78, .7); }
.rn-tarjeta .rn-cian, .rn-ediciones .baja { color: #0B64F0; }
.rn-compara { margin-top: 28px; background: #FFFFFF; border-radius: 20px; box-shadow: var(--sombra-flotante); overflow-x: auto; }
.rn-compara table { border-collapse: collapse; width: 100%; min-width: 620px; color: var(--tinta); font-size: 15px; }
.rn-compara caption { text-align: left; padding: 18px 20px 6px; font-size: 20px; font-weight: 850; }
.rn-compara th, .rn-compara td { padding: 11px 16px; border-bottom: 1px solid var(--borde-ui); text-align: center; }
.rn-compara th:first-child, .rn-compara td:first-child { text-align: left; }
.rn-compara thead th { font-size: 14px; font-weight: 800; color: var(--tinta); }
.rn-compara tr:last-child td { border-bottom: 0; }
.rn-compara .si { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E6F0FF; color: #0B64F0; font-weight: 900; }
.rn-compara .no { color: #C6D5E8; font-weight: 700; }
.rn-compara td.n { font-weight: 800; font-variant-numeric: tabular-nums; }

/* «nuevo» en los planes: lo publicado en la última semana (quitar a principios de diciembre) */
.rn-nuevo::after { content: "nuevo"; margin-left: 8px; font-size: .78em; font-weight: 700; color: var(--aguamarina); white-space: nowrap; }
