/* ==========================================================================
   TBEO — Sistema de estilos (rediseño)
   Portado de Tbeo_Web_base_css/css/styles.css entregado por el diseñador.

   Se carga DESPUES de site.css. Estructura:
     Capa 1 · Base        variables, reset, utilidades
     Capa 2 · Componentes clases del diseño nuevo
     Capa 3 · Puente      reescribe las clases del kit ui-* (angular.ui.min.js)
                          para que las pantallas aun no migradas hereden la
                          estetica nueva sin tocar su markup   [Fase 2]

   Unica desviacion respecto del archivo del diseñador: `.plan` y `.logo`
   colisionan con reglas vivas de site.css, asi que van acotadas a su
   contenedor real (`.planes .plan`, `.header .logo` / `.registro .logo`).
   El resto del diseño usa nombres en español que no chocan con nada.
   ========================================================================== */

/* ==========================================================================
   TBEO — Hoja de estilos principal
   1. Variables · 2. Reset · 3. Header · 4. Hero · 5. Cómo funciona
   6. Planes · 7. Contenido · 8. Ventajas · 9. FAQ · 10. Footer
   11. Registro · 12. Responsive
   ========================================================================== */

/* ---------- 1. VARIABLES ---------- */
:root {
  --color-primario: #FF1B5E;
  --color-primario-claro: #FF3D7F;
  --color-naranja: #FF7A3D;
  --color-amarillo: #FFD400;
  --color-fondo: #08060B;
  --color-superficie: #101014;
  --color-texto: #FFFFFF;
  --color-texto-suave: #BEB9C4;
  --color-texto-tenue: #8E8996;
  --borde: rgba(255, 255, 255, .07);
  --borde-fuerte: rgba(255, 255, 255, .16);
  --fuente: 'Montserrat', system-ui, -apple-system, sans-serif;
  --radio: 16px;
  --radio-boton: 999px;
  --ancho-max: 1440px;
  --sombra-primario: 0 12px 30px -12px rgba(255, 27, 94, .9);
}

/* ---------- 2. RESET ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }
a { color: var(--color-primario); text-decoration: none; }
a:hover { color: #FF6A8E; }
button, input, select { font-family: inherit; }
::selection { background: var(--color-primario); color: #fff; }

/* El diseño original aplica `display:block` a toda imagen y `font-size:16px` a
   todo control. Las pantallas aun sin migrar usan layout con <table> e <img>
   en linea y se romperian, asi que ambos quedan acotados a las secciones ya
   rediseñadas. Al terminar la Fase 7 se pueden volver globales. */
.header img, .hero img, .seccion img, .footer img, .registro img { display: block; }
.header button, .header input, .header select,
.hero button, .hero input, .hero select,
.seccion button, .seccion input, .seccion select,
.footer button, .footer input, .footer select,
.registro button, .registro input, .registro select { font-size: 16px; }

/* ---------- UTILIDADES ---------- */
.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.seccion { position: relative; padding: clamp(50px, 7vw, 100px) clamp(18px, 4vw, 40px); }
.seccion__cabecera { text-align: center; position: relative; }
.seccion__titulo { margin: 0; font-size: clamp(30px, 5.4vw, 58px); font-weight: 700; letter-spacing: -.03em; text-wrap: pretty; }
.seccion__subtitulo { margin: 12px 0 0; font-size: clamp(15px, 2.5vw, 20px); color: var(--color-texto-suave); }
.destacado { color: var(--color-primario); }
.degradado {
  background: linear-gradient(96deg, #FF0F63, var(--color-naranja));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brillo { position: absolute; inset: 0; pointer-events: none; }
.nota { font-size: 13.5px; color: var(--color-texto-tenue); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: var(--radio-boton); cursor: pointer;
  font-weight: 600; transition: box-shadow .2s, background .2s, border-color .2s, filter .2s;
}
.boton--primario {
  background: linear-gradient(100deg, var(--color-primario), #FF2F6C);
  color: #fff; box-shadow: var(--sombra-primario);
}
.boton--primario:hover { color: #fff; filter: brightness(1.08); }
.boton--contorno { background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.boton--contorno:hover { border-color: var(--color-primario); background: rgba(255, 27, 94, .12); }
.boton--grande { width: 100%; padding: 16px; border-radius: 12px; font-size: clamp(15px, 2.6vw, 17px); }

/* ---------- 3. HEADER ---------- */
.barra-promo {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 16px; text-align: center;
  background: linear-gradient(90deg, var(--color-primario), var(--color-naranja));
  font-size: clamp(11px, 2.6vw, 13px); font-weight: 600; color: #fff;
}
.barra-promo a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 6, 11, .92); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--borde);
}
.header__interior {
  max-width: var(--ancho-max); margin: 0 auto;
  padding: clamp(10px, 2vw, 14px) clamp(16px, 3.5vw, 40px);
  display: flex; align-items: center; gap: clamp(12px, 2.5vw, 40px);
}

.header .logo, .registro .logo { display: flex; align-items: center; gap: 9px; color: #fff; }
.header .logo:hover, .registro .logo:hover { color: #fff; }
.logo__imagen { height: 36px; width: auto; display: block; }
.logo__marca {
  width: clamp(28px, 6vw, 34px); height: clamp(28px, 6vw, 34px);
  display: grid; place-items: center; border-radius: 6px;
  background: linear-gradient(140deg, var(--color-primario), #E0104E);
  clip-path: polygon(14% 4%, 100% 50%, 14% 96%, 0% 78%, 0% 22%);
}
.logo__marca svg { margin-left: -4px; }
.logo__texto { font-size: clamp(21px, 4.6vw, 27px); font-weight: 700; letter-spacing: -.02em; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); flex: 1 1 auto; }
.nav__enlace {
  font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; padding-bottom: 6px; border-bottom: 2px solid transparent; transition: color .2s;
}
.nav__enlace:hover, .nav__enlace.activo { color: var(--color-primario); }
.nav__enlace.activo { border-bottom-color: var(--color-primario); }

.header__acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header__acciones .boton { padding: clamp(9px, 2vw, 12px) clamp(16px, 3vw, 26px); font-size: clamp(12px, 2.6vw, 13.5px); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }

.hamburguesa {
  display: none; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer;
}
.menu-movil { display: none; flex-direction: column; padding: 8px 20px 20px; border-top: 1px solid var(--borde); }
.menu-movil.abierto { display: flex; }
.menu-movil a { padding: 14px 4px; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .06); }

/* ---------- 4. HERO ---------- */
.hero { position: relative; overflow: hidden; background: var(--color-fondo); }
.hero__brillo {
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 85% 45%, rgba(255, 27, 94, .20), transparent 70%),
              radial-gradient(50% 60% at 0% 60%, rgba(120, 10, 60, .35), transparent 75%);
}
.slide { display: none; position: relative; animation: aparecer .5s ease both; }
.slide.activo { display: block; }
.slide__completo { width: 100%; height: auto; display: block; }
.slide__contenido { position: relative; max-width: var(--ancho-max); margin: 0 auto; padding: clamp(40px, 6vw, 74px) clamp(18px, 4vw, 40px) clamp(80px, 8vw, 96px); }
.slide__imagen { position: absolute; right: 0; top: 0; height: 100%; width: min(58%, 900px); min-width: 300px; object-fit: cover; object-position: left center; }
.slide__imagen--centrada { top: 50%; transform: translateY(-50%); height: auto; object-fit: contain; }
.slide--television .slide__imagen { width: min(46%, 830px); }
.slide--dispositivos .slide__imagen { width: min(56%, 936px); }
.slide__velo { position: absolute; inset: 0; background: linear-gradient(90deg, #08060B 22%, rgba(8, 6, 11, .72) 52%, rgba(8, 6, 11, .15) 88%); }
.slide__velo--fuerte { background: linear-gradient(90deg, #08060B 26%, rgba(8, 6, 11, .88) 58%, rgba(8, 6, 11, .4) 92%); }

.hero__titulo { margin: 0; font-size: clamp(34px, 7.2vw, 76px); line-height: 1.02; font-weight: 700; letter-spacing: -.03em; }
.hero__titulo--italica { margin-top: 6px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; }
.hero__subtitulo { margin: 20px 0 0; font-size: clamp(16px, 2.8vw, 21px); line-height: 1.6; color: #E7E4EA; max-width: 420px; }

/* Tarjeta de oferta (slide 1) */
.oferta {
  margin-top: clamp(26px, 4vw, 44px); width: min(640px, 100%);
  padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 30px);
  border-radius: 20px; background: rgba(18, 16, 22, .82);
  border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(10px);
}
.oferta__fila { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 22px); flex-wrap: wrap; }
.oferta__etiqueta { font-size: clamp(13px, 2.6vw, 15px); font-weight: 800; font-style: italic; color: var(--color-primario); letter-spacing: .04em; text-transform: uppercase; }
.oferta__plan { margin-top: 4px; font-size: clamp(20px, 4vw, 26px); font-weight: 700; letter-spacing: -.01em; }
.oferta__dato { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--borde-fuerte); text-align: center; line-height: 1.15; display: flex; align-items: center; gap: 10px; }
.oferta__dato-cifra { font-size: clamp(18px, 3.4vw, 22px); font-weight: 700; }
.oferta__dato-texto { font-size: 12.5px; color: #B9B4BE; }
.oferta__precio { font-size: clamp(26px, 5vw, 34px); font-weight: 700; letter-spacing: -.02em; }
.oferta__precio span { font-size: clamp(17px, 3.4vw, 22px); font-weight: 500; color: #EDEAF0; }
.oferta__logos { height: clamp(26px, 5vw, 34px); margin-bottom: 18px; }
.oferta__cta { flex: 1 1 200px; padding: 15px 30px; font-size: clamp(14px, 2.6vw, 15.5px); }

.separador { height: 1px; background: rgba(255, 255, 255, .09); margin: clamp(16px, 3vw, 22px) 0; }
.punto-vivo { width: 9px; height: 9px; border-radius: 50%; background: var(--color-primario); animation: latido 2s infinite; }

/* Slide 2 */
.hero__precio-linea { margin-top: 16px; display: flex; align-items: baseline; gap: clamp(8px, 1.6vw, 16px); flex-wrap: wrap; }
.marcador { background: var(--color-amarillo); color: #0A0509; font-size: clamp(24px, 4.8vw, 48px); font-weight: 700; letter-spacing: -.02em; padding: 2px 12px; border-radius: 4px; }
.hero__precio-texto { font-size: clamp(24px, 4.8vw, 48px); font-weight: 600; letter-spacing: -.02em; }
.hero__precio-cifra { font-size: clamp(26px, 5.2vw, 52px); font-weight: 700; letter-spacing: -.02em; border-bottom: 5px solid var(--color-primario); padding-bottom: 2px; }
.ventajas-hero { margin-top: clamp(30px, 4.5vw, 48px); display: flex; gap: clamp(18px, 3.4vw, 34px); flex-wrap: wrap; }
.ventaja-hero { text-align: center; flex: 1 1 150px; max-width: 210px; }
.ventaja-hero__texto { font-size: clamp(13px, 2.6vw, 15px); letter-spacing: .06em; text-transform: uppercase; color: #E7E4EA; line-height: 1.5; }
.rec { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; font-size: clamp(22px, 4.6vw, 30px); font-weight: 700; letter-spacing: .06em; }
.rec::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--color-primario); }

/* Slide 3 */
.hero__intro { display: flex; align-items: flex-start; gap: clamp(24px, 4vw, 60px); flex-wrap: wrap; }
.hero__intro h2 { margin: 0; font-size: clamp(30px, 5.6vw, 56px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; flex: 1 1 460px; }
.hero__intro p { flex: 1 1 340px; margin: 0; font-size: clamp(15px, 2.4vw, 17px); line-height: 1.85; color: #D8D4DD; }
.mosaico { margin-top: clamp(26px, 4vw, 40px); display: flex; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap; }
.mosaico__panel { position: relative; min-height: 300px; border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.mosaico__panel--lateral { flex: 1 1 200px; }
.mosaico__panel--central { flex: 3 1 340px; }
.mosaico__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaico__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 11, .35), rgba(8, 6, 11, .9)); }
.mosaico__velo--lateral { background: linear-gradient(100deg, rgba(8, 6, 11, .94) 20%, rgba(8, 6, 11, .55) 62%, rgba(8, 6, 11, .25)); }
.mosaico__pie { position: absolute; left: 18px; right: 18px; bottom: 18px; }
.mosaico__encabezado { position: absolute; left: 18px; right: 18px; top: 18px; }
.mosaico__texto { position: relative; padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 30px); }
.etiqueta { display: inline-block; padding: 6px 14px; border-radius: 6px; background: var(--color-primario); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.momentos__titulo { margin-top: 14px; font-size: clamp(19px, 3vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.momentos__miniaturas { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; max-width: 600px; }
.miniatura { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.miniatura.activa { border: 1.5px solid var(--color-primario); }
.miniatura img { position: static; width: 100%; height: 82px; object-fit: cover; }
.miniatura__hora { position: absolute; right: 8px; bottom: 6px; font-size: 12.5px; font-weight: 600; }
.miniatura__progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .35); }
.miniatura__progreso span { display: block; width: 34%; height: 100%; background: var(--color-primario); }

/* Slide 4 */
.plataformas { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 12px; max-width: 640px; }
.plataforma {
  padding: 13px 14px; border-radius: 10px; border: 1px solid var(--borde-fuerte);
  background: rgba(10, 7, 14, .82); backdrop-filter: blur(6px);
  font-size: clamp(13px, 2.4vw, 15px); font-weight: 600; text-align: center; transition: border-color .2s, background .2s;
}
.plataforma:hover { border-color: var(--color-primario); background: rgba(255, 27, 94, .22); }

/* Controles del carrusel */
.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--borde-fuerte); background: rgba(8, 6, 11, .6);
  color: var(--color-primario); cursor: pointer; backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.carrusel__flecha:hover { background: rgba(255, 27, 94, .18); border-color: var(--color-primario); }
.carrusel__flecha--prev { left: 22px; }
.carrusel__flecha--next { right: 22px; }
.carrusel__puntos { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vw, 26px); z-index: 5; display: flex; justify-content: center; align-items: center; gap: 10px; }
.punto { width: 11px; height: 11px; padding: 0; border: 0; border-radius: var(--radio-boton); background: rgba(255, 255, 255, .35); cursor: pointer; transition: background .3s, width .3s; }
.punto.activo { width: 28px; background: var(--color-primario); }
.carrusel__flecha--movil { display: none; position: static; transform: none; width: 44px; height: 44px; }

/* ---------- 5. CÓMO FUNCIONA ---------- */
.pasos { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(30px, 4vw, 40px); align-items: start; }
.paso { position: relative; padding-top: 14px; text-align: center; }
.paso:not(:first-child)::before { content: ''; position: absolute; top: 112px; left: -16%; width: 16%; border-top: 2px dashed rgba(255, 27, 94, .6); }
.paso__circulo { position: relative; width: min(210px, 60vw); aspect-ratio: 1; margin: 0 auto; }
.paso__aro { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 27, 94, .55); display: grid; place-items: center; }
.paso__numero {
  position: absolute; left: -6px; top: -12px;
  width: clamp(50px, 14vw, 66px); height: clamp(50px, 14vw, 66px);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: var(--color-fondo);
  display: grid; place-items: center; font-size: clamp(20px, 5vw, 27px); font-weight: 600;
}
.paso__titulo { margin-top: 24px; font-size: clamp(24px, 4.2vw, 31px); font-weight: 700; letter-spacing: -.02em; }
.paso p { margin: 12px auto 0; max-width: 290px; font-size: clamp(15px, 2.4vw, 17px); line-height: 1.6; color: var(--color-texto-suave); }

/* ---------- 6. PLANES ---------- */
.subrayado { width: 88px; height: 4px; background: var(--color-primario); border-radius: 2px; margin: 18px auto 0; }
.planes { margin-top: clamp(40px, 6vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(22px, 3vw, 28px); align-items: stretch; }
.planes .plan {
  /* site.css fija `.plan { width: 400px; height: 200px }` para la tarjeta vieja
     con <table>. La tarjeta nueva es mucho mas alta, y con ese alto fijo el
     contenido se desbordaba y se solapaba con la nota y los botones de abajo.

     El `margin: 10px auto !important` de site.css tambien hay que anularlo: los
     margenes laterales `auto` impiden que la tarjeta ocupe su celda del grid,
     asi que cada una tomaba el ancho de su contenido -anchos distintos- y la
     mas larga se salia de su columna y se montaba sobre la siguiente. */
  width: auto; height: auto; margin: 0 !important;
  container-type: inline-size;
  position: relative; padding: clamp(26px, 4vw, 34px) clamp(20px, 3vw, 28px) 30px;
  border-radius: 20px; background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 27, 94, .4); transition: transform .25s;
}
.planes .plan:hover { transform: translateY(-6px); }
.plan--destacado { background: rgba(255, 27, 94, .06); border-color: var(--color-primario); box-shadow: 0 0 60px -14px rgba(255, 27, 94, .75); }
.plan__cinta {
  position: absolute; right: -4px; top: -14px; display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px; font-size: 11px; font-weight: 800; line-height: 1.15;
  letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--color-primario), var(--color-primario-claro));
  box-shadow: 0 10px 26px -10px rgba(255, 27, 94, .9);
}
.plan__nombre {
  /* El max-width deja libre la esquina donde va el radio (.plan__radio, 22px)
     mas el ancho que gana la cinta al inclinarse; sin el, un nombre largo
     crecia hasta taparlo. */
  display: block; margin: 0 auto; width: max-content; max-width: calc(100% - 64px); padding: 9px 24px; text-align: center;
  background: linear-gradient(100deg, var(--color-primario), #FF4A7E); transform: skewX(-12deg);
  font-size: clamp(15px, 2.8vw, 17px); font-weight: 700; letter-spacing: .04em;
}
/* La cinta se escala con el ancho de la tarjeta (unidad cqi, contenedor
   `.planes .plan`): en tres columnas sobre pantallas medianas la tarjeta baja a
   ~296px y un nombre largo se partia en cuatro lineas. Los navegadores sin
   container queries ignoran esta regla y se quedan con el tamaño de arriba. */
.plan__nombre { font-size: clamp(11.5px, 4.4cqi, 17px); padding: 9px clamp(12px, 3.6cqi, 24px); }
.plan__nombre span { display: block; transform: skewX(12deg); }
.plan__precio { margin-top: 24px; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.plan__moneda { font-size: clamp(22px, 4.4vw, 28px); font-weight: 500; color: #EDEAF0; }
.plan__cifra { font-size: clamp(48px, 9vw, 64px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan__decimal { font-size: clamp(24px, 4.6vw, 30px); font-weight: 600; }
.plan__tag { margin: 14px auto 0; display: table; padding: 7px 16px; border-radius: 8px; background: linear-gradient(100deg, var(--color-primario), #FF4A7E); font-size: 13px; font-weight: 700; }
.plan__despues { margin-top: 12px; text-align: center; font-size: 14.5px; color: #B0AAB8; min-height: 22px; }
.plan__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.plan__lista li { display: flex; align-items: center; gap: 11px; font-size: clamp(14px, 2.4vw, 15.5px); color: #EDEAF0; }
.plan__icono { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 27, 94, .6); display: grid; place-items: center; }
.plan__icono::before {
  content: ''; width: 7px; height: 7px; margin-left: -2px;
  border-top: 2px solid var(--color-primario); border-right: 2px solid var(--color-primario);
  transform: rotate(45deg);
}
.plan__enlace { display: flex; justify-content: center; }
.plan__enlace a { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(15px, 2.6vw, 17px); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 7. CONTENIDO ---------- */
.filtros { margin-top: clamp(30px, 4vw, 48px); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtro {
  padding: clamp(10px, 2vw, 14px) clamp(18px, 3vw, 30px); border-radius: var(--radio-boton);
  border: 1px solid var(--borde-fuerte); background: transparent; color: #EDEAF0;
  font-size: clamp(14px, 2.5vw, 17px); font-weight: 600; cursor: pointer; transition: all .2s;
}
.filtro:hover { border-color: var(--color-primario); }
.filtro.activo { background: linear-gradient(100deg, var(--color-primario), var(--color-primario-claro)); border-color: var(--color-primario); color: #fff; }
.filtros__ver-todo { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: clamp(15px, 2.6vw, 17px); }
.galeria { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(14px, 2vw, 20px); align-items: start; }
.tarjeta { border-radius: 14px; overflow: hidden; background: var(--color-superficie); border: 1px solid var(--borde); transition: transform .25s, border-color .25s; }
.tarjeta:hover { transform: translateY(-6px); border-color: rgba(255, 27, 94, .55); }
.tarjeta img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tarjeta--poster img { aspect-ratio: 2 / 3; }
.tarjeta__cuerpo { padding: 14px 14px 18px; }
.tarjeta__titulo { font-size: clamp(15px, 2.6vw, 17px); font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.tarjeta__meta { margin-top: 6px; font-size: clamp(13px, 2.4vw, 15px); color: #9C97A3; }

/* ---------- 8. VENTAJAS ---------- */
.ventajas { margin-top: clamp(36px, 5vw, 54px); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(16px, 2.2vw, 22px); }
.ventaja {
  padding: clamp(26px, 3.5vw, 34px) 22px 28px; border-radius: 18px; text-align: center;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--borde);
  transition: border-color .25s, transform .25s;
}
.ventaja:hover { border-color: var(--color-primario); transform: translateY(-6px); }
.ventaja--destacada { background: rgba(255, 27, 94, .05); border-color: var(--color-primario); box-shadow: 0 0 40px -12px rgba(255, 27, 94, .6); }
.ventaja__titulo { margin-top: 20px; font-size: clamp(19px, 3.2vw, 22px); font-weight: 700; letter-spacing: -.01em; }
.ventaja--destacada .ventaja__titulo { color: var(--color-primario-claro); }
.ventaja p { margin: 12px 0 0; font-size: clamp(14px, 2.4vw, 16px); line-height: 1.55; color: #B0AAB8; }
.ventaja__rec { height: 60px; display: grid; place-items: center; }
.ventaja__rec span { padding: 8px 12px; border: 1.6px solid var(--color-primario); border-radius: 8px; color: var(--color-primario); font-size: 24px; font-weight: 700; letter-spacing: .04em; }

/* ---------- 9. FAQ ---------- */
.faq { margin-top: clamp(30px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.faq__item { border-radius: var(--radio); background: rgba(255, 255, 255, .03); border: 1px solid var(--borde); overflow: hidden; transition: border-color .25s; }
.faq__item.abierto { border-color: rgba(255, 27, 94, .55); }
.faq__pregunta {
  width: 100%; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 20px);
  padding: clamp(18px, 3vw, 26px) clamp(16px, 3vw, 28px);
  background: transparent; border: 0; color: #fff; cursor: pointer; text-align: left;
}
.faq__marca { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--color-primario); display: grid; place-items: center; color: var(--color-primario); font-size: 18px; font-weight: 600; }
.faq__texto { flex: 1 1 auto; font-size: clamp(16px, 3vw, 23px); font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
.faq__flecha { flex: 0 0 auto; color: var(--color-primario); transition: transform .3s; }
.faq__item.abierto .faq__flecha { transform: rotate(180deg); }
.faq__respuesta { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq__item.abierto .faq__respuesta { max-height: 340px; }
.faq__respuesta p { margin: 0; padding: 0 clamp(16px, 3vw, 28px) clamp(20px, 3vw, 28px) clamp(16px, 3vw, 86px); font-size: clamp(14.5px, 2.5vw, 17.5px); line-height: 1.7; color: var(--color-texto-suave); }

/* ---------- 10. FOOTER ---------- */
.footer { position: relative; padding: clamp(50px, 7vw, 100px) clamp(18px, 4vw, 40px) 40px; text-align: center; }
.redes { margin-top: 30px; display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 18px); flex-wrap: wrap; }
.red {
  width: clamp(58px, 12vw, 78px); height: clamp(58px, 12vw, 78px); border-radius: 50%;
  border: 1px solid rgba(255, 27, 94, .7); display: grid; place-items: center; color: #fff;
  transition: background .2s, transform .2s;
}
.red:hover { background: rgba(255, 27, 94, .18); transform: translateY(-3px); color: #fff; }
.footer__marca { margin-top: clamp(40px, 6vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.footer__logo { display: flex; align-items: center; gap: clamp(8px, 2vw, 14px); }
.footer__logo-icono {
  width: clamp(42px, 9vw, 64px); height: clamp(42px, 9vw, 64px); display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(140deg, var(--color-primario), #E0104E);
  clip-path: polygon(14% 4%, 100% 50%, 14% 96%, 0% 78%, 0% 22%);
}
.footer__logo-texto { font-size: clamp(38px, 8vw, 62px); font-weight: 700; letter-spacing: -.03em; }
.footer__logo-imagen { height: clamp(48px, 10vw, 78px); width: auto; display: block; }
.footer__claim { font-size: clamp(17px, 3.4vw, 27px); color: #B0AAB8; letter-spacing: -.01em; }
.footer__legal { margin-top: clamp(34px, 5vw, 52px); display: flex; justify-content: center; align-items: center; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; }
.footer__legal a { display: flex; align-items: center; gap: 12px; color: #EDEAF0; font-size: clamp(15px, 2.6vw, 19px); }
.footer__legal a:hover { color: var(--color-primario-claro); }
.footer__divisor { width: 1px; height: 30px; background: var(--borde-fuerte); }
.footer__copy { margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--borde); font-size: clamp(14px, 2.4vw, 17px); color: var(--color-texto-tenue); }

/* ---------- 11. REGISTRO ---------- */
.registro { display: none; position: fixed; inset: 0; z-index: 120; overflow-y: auto; background: var(--color-fondo); }
.registro.abierto { display: block; }
.registro__fondo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.registro__velo { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 11, .78), rgba(8, 6, 11, .92)); }
.registro__interior { position: relative; min-height: 100%; display: flex; flex-direction: column; }
.registro__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px clamp(16px, 4vw, 40px); }
.registro__header-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.boton-pequeno { padding: 11px 20px; border-radius: 8px; border: 1px solid var(--borde-fuerte); background: transparent; color: #EDEAF0; font-size: 15px; font-weight: 600; cursor: pointer; }
.boton-pequeno--activo { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.registro__cuerpo { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px clamp(14px, 4vw, 40px) 50px; }

.formulario {
  width: min(600px, 100%); padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 38px) clamp(26px, 4vw, 38px);
  border-radius: var(--radio); background: rgba(16, 14, 20, .94);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  animation: subir .4s ease both;
}
.formulario__titulo { font-size: clamp(24px, 4.6vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.formulario__subrayado { width: 56px; height: 3px; background: var(--color-primario); border-radius: 2px; margin: 12px 0 18px; }
.formulario__intro { font-size: 15px; color: #D8D4DD; }
.formulario__fila { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.campo { position: relative; }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.campo__caja { position: relative; }
.campo input, .campo select {
  width: 100%; padding: 14px 14px 14px 44px; border-radius: 8px;
  border: 1px solid var(--borde-fuerte); background: #f4f4f6; color: #1a1520;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(255, 27, 94, .25); }
.campo select { appearance: none; cursor: pointer; }
.campo--simple input { padding: 14px; background: rgba(255, 255, 255, .06); color: #EDEAF0; border-color: rgba(255, 255, 255, .1); }
.campo--busqueda input { padding: 14px 46px 14px 14px; }
.campo--clave input { padding-right: 46px; }
.campo__icono { position: absolute; left: 14px; top: 16px; pointer-events: none; }
.campo__icono--derecha { left: auto; right: 14px; top: 15px; }
.campo__ojo { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: #6c6577; cursor: pointer; }
.campo__ayuda { margin-top: 8px; font-size: 12.5px; color: #9C97A3; }
.terminos { margin-top: 22px; display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #EDEAF0; cursor: pointer; }
.terminos input { width: 20px; height: 20px; accent-color: var(--color-primario); margin: 0; cursor: pointer; }
.formulario__enviar { margin-top: 22px; width: 100%; padding: 17px; border-radius: 8px; background: var(--color-primario); font-size: clamp(15px, 2.6vw, 16.5px); }
.formulario__pie { margin-top: 18px; font-size: 15px; color: #D8D4DD; }
.registro__footer { display: flex; justify-content: center; gap: clamp(18px, 5vw, 44px); flex-wrap: wrap; padding: 20px clamp(16px, 4vw, 40px); background: rgba(8, 6, 11, .9); font-size: 15px; }
.registro__footer a { color: #EDEAF0; }

/* ---------- ANIMACIONES ---------- */
@keyframes latido { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width: 1079px) {
  .nav, .header__acciones .boton--contorno { display: none; }
  .hamburguesa { display: grid; }
  .paso:not(:first-child)::before { display: none; }
  .carrusel__flecha--prev, .carrusel__flecha--next { display: none; }
  .carrusel__flecha--movil { display: grid; }
  .slide--dispositivos .slide__imagen { width: 100%; height: 100%; object-fit: cover; opacity: .3; transform: translateY(-50%); }
  .slide--television .slide__imagen { width: 100%; height: 100%; object-fit: cover; opacity: .3; transform: translateY(-50%); }
  .slide--dispositivos .slide__contenido { width: 100%; }
}

@media (min-width: 1080px) {
  .slide--dispositivos .slide__contenido { width: min(100%, 660px); }
  .slide--television .slide__contenido { width: min(100%, 640px); }
}

@media (max-width: 640px) {
  .oferta__cta { width: 100%; }
}

/* ==========================================================================
   CAPA 3 · PUENTE DEL KIT ui-*                                      [Fase 2]

   Las directivas de libs/js/angular.ui.min.js emiten markup con clases fijas
   (.button, .input, .form, .dialog, .foot, .linear, .loader, .avatar...).
   Aqui se reescriben con los tokens del diseño para que las pantallas que
   todavia no se han migrado hereden la estetica Tbeo sin tocar su markup.

   Todo lo de abajo pisa reglas vivas de site.css, asi que la especificidad
   esta igualada a proposito. Conforme cada pantalla se migre a las clases
   del diseñador, su bloque aqui deja de hacer falta y se borra junto con la
   regla original de site.css.
   ========================================================================== */

/* ---------- Fondo general ---------- */
/* site.css pinta el fondo con .gradiente (azul marino) sobre <body>. */
.gradiente { background: var(--color-fondo); }

/* ---------- Tipografia base ---------- */
.body h1 { color: var(--color-texto); font-weight: 700; letter-spacing: -.02em; }
.body h1 label { color: var(--color-primario); }
.form h3 { color: var(--color-texto); }
.link { color: var(--color-primario); cursor: pointer; }
.link:hover { color: var(--color-primario-claro); }

/* ---------- Botones ---------- */
.button {
  border-radius: var(--radio-boton);
  height: 44px;
  padding: 6px 22px;
  font-family: var(--fuente);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.button.primary {
  background: linear-gradient(100deg, var(--color-primario), #FF2F6C);
  color: #fff;
  box-shadow: var(--sombra-primario);
}
.button.primary:hover { filter: brightness(1.08); }
.button.succes { background: #1F9E4D; color: #fff; }
.button.primary.disabled,
.button.primary[disabled] { background: #3A3440; color: var(--color-texto-tenue); box-shadow: none; transform: none; }

.button-item {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radio-boton);
  height: 40px;
  color: var(--color-texto);
  font-weight: 600;
  transition: border-color .2s, background .2s;
}
.button-item:hover { border-color: var(--color-primario); background: rgba(255, 27, 94, .12); }
.button-item td.value { text-shadow: none; letter-spacing: .04em; }
.button-item.red { border-color: var(--color-primario); }
.button-item.white { border-color: rgba(255, 255, 255, .5); }
.button-item.backred {
  border-color: var(--color-primario);
  background: linear-gradient(100deg, var(--color-primario), var(--color-primario-claro));
}

/* ---------- Campos ---------- */
/* El diseño usa caja clara sobre formulario oscuro (ver .campo input). */
.input {
  background-color: #f4f4f6;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(255, 27, 94, .25); }
.input input { font-family: var(--fuente); font-size: 15px; color: #1a1520; background: transparent; }
.input .icon svg { color: #6c6577; }

.input-control { border-radius: 10px; font-family: var(--fuente); }
.input-label { color: var(--color-texto-suave); font-size: 13px; font-weight: 600; }

/* ---------- Mensajes ---------- */
.linear-message { border-radius: 10px; font-family: var(--fuente); }
.error { background-color: #E23148; border-radius: 10px; }
.success { background-color: #1F9E4D; border-radius: 10px; }
.error span, .success span { font-size: 14.5px; font-weight: 600; }

/* ---------- Pie ---------- */
/* site.css deja .form con margin 0 auto: sin aire, la linea del pie queda
   pegada al panel de arriba. */
.foot .form { border-top: 1px solid var(--borde); margin-top: clamp(28px, 5vw, 48px); }
.foot p { color: var(--color-texto-tenue); font-size: 13.5px; }
.foot a { color: var(--color-primario); font-size: 13.5px; }
.foot a:hover { color: var(--color-primario-claro); }
.foot .menu > li a, .foot .socialmedia > li a { color: var(--color-texto-suave); }
.foot .menu > li a:hover, .foot .socialmedia > li a:hover { color: var(--color-primario); }
/* Redes en una fila: la primera al borde izquierdo, la del medio centrada y la
   ultima al derecho. site.css las flota a la derecha pensando en dos columnas. */
.foot .socialmedia--fila { float: none; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 16px; align-items: center; }
.foot .socialmedia--fila > li:first-child { justify-self: start; }
.foot .socialmedia--fila > li:last-child { justify-self: end; }
@media (max-width: 480px) {
  .foot .socialmedia--fila { grid-template-columns: 1fr; justify-items: center; }
  .foot .socialmedia--fila > li:first-child, .foot .socialmedia--fila > li:last-child { justify-self: center; }
}

/* ---------- Tarjeta de plan (markup viejo, con <table>) ---------- */
/* La tarjeta nueva del diseño es `.planes .plan`; esto es el puente para
   Signup/Package, Account/Package y Account/ChangePackage hasta las Fases 4 y 6. */
.plan {
  background-color: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 27, 94, .4);
  color: var(--color-texto);
  transition: border-color .25s, box-shadow .25s;
}
.plan:hover { border-color: var(--color-primario); }
.plan.active {
  background-color: rgba(255, 27, 94, .06);
  border-color: var(--color-primario);
  box-shadow: 0 0 60px -14px rgba(255, 27, 94, .75);
}
.plan.disabled, .plan.active.disabled { background-color: #2A2530; border-color: #3A3440; }
.plan h1, .plan h2 { font-weight: 700; letter-spacing: -.02em; }
.plan .equipo { color: var(--color-texto-suave); }
.plan input { accent-color: var(--color-primario); }

/* ---------- Avatar y loader ---------- */
.avatar div { background-color: var(--color-superficie); border: 1px solid var(--borde-fuerte); }
.avatar div svg { color: var(--color-texto-tenue); }
.loader .label { color: var(--color-texto-suave); font-size: 14px; }

/* ---------- Dialogos ---------- */
/* La caja sigue clara a proposito: el copy del acordeon de preguntas esta
   quemado en #6288AD dentro de _FaqTbeo.cshtml y en oscuro perderia contraste.
   El rediseño completo del dialogo va con la Fase 4. */
.dialog .dialog-form { border-radius: var(--radio); overflow: hidden; }
.dialog .dialog-header { border-color: var(--borde-fuerte); }
.dialog-header-text { font-family: var(--fuente); font-weight: 700; }

/* ---------- Puente del formulario viejo ---------- */
/* Las vistas de Signup/Login/Ventas repiten .linear > .input > <table> con
   etiquetas sueltas en <div style="...Verdana..."> . Estas dos clases
   sustituyen esos estilos inline; el resto lo cubre `.input` mas arriba. */
.etiqueta-campo {
  display: block; padding-left: 15px; margin-bottom: 8px;
  font-size: 14px; font-weight: 600; color: var(--color-texto);
}
.ayuda-campo {
  display: block; padding-left: 15px; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--color-texto-tenue);
}

/* Controles nativos con el color de marca */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primario); }

/* ---------- Compatibilidad al migrar botones a `.boton` ---------- */
/* site.css oculta el spinner con `.button img.gif`. Las pantallas ya migradas
   usan `.boton`, asi que necesitan la misma regla.
   El JS de las vistas hace `btn.children('span').hide()` + `.children('img').show()`,
   y ese `show()` escribe un display en linea que gana a cualquier regla de aqui.
   Por eso el spinner va posicionado en absoluto: al mostrarse queda fuera del
   flujo y el boton conserva exactamente la misma altura. */
.boton { position: relative; }
.boton img.gif {
  display: none;
  position: absolute; left: 50%; top: 50%;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
}
.boton[disabled], .boton.disabled { background: #3A3440; color: var(--color-texto-tenue); box-shadow: none; transform: none; cursor: default; }

/* El formulario del diseño centra su propio contenido; estas dos vienen de
   site.css y sobran cuando la pantalla ya usa `.formulario`. */
.recaptcha-tbeo { margin-top: 18px; display: flex; justify-content: center; }
.recaptcha-tbeo iframe { display: block; }
/* El widget mide 304px fijos; en pantallas muy estrechas se escala en vez de desbordar. */
@media (max-width: 360px) {
  .recaptcha-tbeo .g-recaptcha { transform: scale(.88); transform-origin: center top; }
}

/* ---------- Extras del formulario migrado ---------- */
.formulario__ilustracion { height: 132px; width: auto; display: block; margin: 22px auto 0; }
.formulario__titulo { margin: 0; }
.formulario__intro { margin: 0; }
.formulario .campo__ayuda { padding-left: 2px; }
.obligatorio { color: var(--color-primario); font-weight: 700; }

/* ==========================================================================
   VISTAS INTERNAS MIGRADAS (Signup / Login / Account / Ventas)      [Fase 4+]
   Piezas que el diseño no traia porque su maqueta solo cubria la landing y el
   registro: cabecera compacta, selector de plan con radio y barra de acciones.
   ========================================================================== */

.seccion__cabecera--compacta { padding: clamp(22px, 4vw, 34px) clamp(16px, 4vw, 40px) 0; }
.seccion__titulo--vista { font-size: clamp(22px, 4vw, 34px); }
.subrayado { margin-top: 14px; }

.nota--centrada { max-width: 620px; margin: 22px auto 0; padding: 0 20px; text-align: center; }

/* Aviso para cuando el API no devuelve datos (sin planes, sin adicionales). */
.estado-vacio {
  max-width: 620px; margin: clamp(28px, 5vw, 48px) auto; padding: clamp(26px, 4vw, 36px) clamp(20px, 4vw, 32px);
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--color-superficie); text-align: center;
}
.estado-vacio__titulo { margin: 0 0 10px; font-size: clamp(17px, 3vw, 20px); font-weight: 700; color: var(--color-texto); }
.estado-vacio__texto { margin: 0; font-size: clamp(14px, 2.4vw, 15.5px); line-height: 1.6; color: var(--color-texto-suave); }

.acciones-vista {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: clamp(20px, 4vw, 30px) 20px clamp(28px, 5vw, 44px);
}
.acciones-vista .boton { padding: 14px 34px; font-size: clamp(14px, 2.6vw, 15.5px); }

/* ---------- Selector de plan ---------- */
.planes--seleccion { max-width: var(--ancho-max); margin-left: auto; margin-right: auto; padding: 0 clamp(16px, 4vw, 40px); }
.plan__seleccion { position: relative; display: block; cursor: pointer; }
.plan__radio { position: absolute; top: 0; right: 0; z-index: 2; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.plan__antes { margin: 14px 0 0; text-align: center; color: var(--color-texto-tenue); font-size: 15px; }
.planes .plan:has(.plan__radio:checked) {
  border-color: rgba(255, 27, 94, .7);
  box-shadow: inset 0 0 28px -8px rgba(150, 12, 50, .55);
}
.plan__lista .equipo { color: inherit; font-size: inherit; margin: 0; display: inline; }

/* Tarjeta de relleno "MUY PRONTO" de la pantalla de cambio de plan. El
   contenido va desenfocado y el aviso se superpone centrado; antes esto se
   resolvia con estilos en linea sobre <table> anidadas. */
.plan--pronto__fondo { filter: blur(6px); user-select: none; }
.plan--pronto__aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.plan--pronto__aviso h3 { margin: 0 0 6px; font-size: clamp(20px, 4vw, 26px); font-weight: 700; letter-spacing: .06em; color: var(--color-texto); }
.plan--pronto__aviso label { color: var(--color-texto-suave); }
.planes .plan--pronto { cursor: default; }
.planes .plan--pronto:hover { transform: none; border-color: rgba(255, 27, 94, .4); }

/* `.plan.disabled` (mas arriba) pierde contra `:has(.plan__radio:checked)`, que
   viene despues: el plan actual que ademas no se puede cambiar saldria en rosa
   de seleccionado en vez de en gris de deshabilitado. */
.planes .plan.disabled:has(.plan__radio:checked) { background: #2A2530; border-color: #3A3440; box-shadow: none; }

/* "Tu plan actual" va como franja al pie de la tarjeta, de lado a lado. Cuelga
   de `.planes .plan`, no del <label>: la rejilla estira las tarjetas a la altura
   de la fila y el label se queda en la altura de su contenido, asi que anclado a
   el la franja flotaria a media tarjeta. Por eso el <span> vive fuera del label
   en las tres vistas que lo usan (planes.html, ChangePackage y Package).
   El radio de 19px es el de la tarjeta (20px) menos su borde. */
.planes .plan:has(.plan__actual) { padding-bottom: 58px; }
.planes .plan .plan__actual {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  padding: 11px 12px; text-align: center;
  border: 0; border-top: 1px solid rgba(255, 27, 94, .5); border-radius: 0 0 19px 19px;
  background: rgba(255, 27, 94, .18);
}

/* ---------- Variantes de boton usadas por las vistas internas ---------- */
.boton--exito { background: #1F9E4D; color: #fff; }
.boton--exito:hover { background: #23B257; color: #fff; }
.boton--peligro { background: #E23148; color: #fff; }
.boton--peligro:hover { background: #F04358; color: #fff; }
/* Muchas vistas traen `style="display:block;margin:0 auto;width:150px"` en el
   boton. `display:block` gana a `inline-flex`, asi que el contenido se centra
   por texto en vez de por flex; esto lo deja consistente. */
.boton { text-align: center; }

/* ---------- Pantalla de resultado (ResultMessage*) ---------- */
.resultado { max-width: 640px; margin: 0 auto; padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 24px); text-align: center; }
.resultado__icono { width: 62px; height: 62px; display: block; margin: 0 auto 18px; }
.resultado__titulo { margin: 0 0 22px; font-size: clamp(20px, 4vw, 29px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; text-wrap: pretty; }
.resultado__detalle {
  text-align: left; padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: rgba(255, 255, 255, .03);
}
.detalle { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.detalle__fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--borde);
}
.detalle__fila:last-child { padding-bottom: 0; border-bottom: 0; }
.detalle dt { margin: 0; font-size: 14px; color: var(--color-texto-suave); }
.detalle dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; word-break: break-word; }
.detalle dd.dato--clave { color: var(--color-primario); }
.detalle__aviso { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-texto-tenue); }
.detalle__legal { margin: 14px 0 0; font-size: 14px; }
.resultado__pie { margin-top: 30px; font-size: clamp(15px, 2.6vw, 17px); color: var(--color-texto-suave); }
.resultado__logo { height: 34px; width: auto; display: block; margin: 12px auto 0; }
.resultado__marco { width: 100%; min-height: 550px; border: 0; border-radius: var(--radio); background: #fff; }
.resultado--ancho { max-width: 860px; }
.reenviado { color: var(--color-primario); font-weight: 600; }

/* ---------- Fila de total en los resumenes ---------- */
.detalle__fila--total { border-top: 1px solid var(--borde-fuerte); padding-top: 12px; margin-top: 4px; }
.detalle__fila--total dt { font-size: 15px; font-weight: 700; color: var(--color-texto); }
.detalle__fila--total dd { font-size: 18px; }

/* ---------- Catalogo de paquetes temporales ---------- */
.paquetes-temp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
  max-width: var(--ancho-max); margin: clamp(24px, 4vw, 36px) auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
}
.paquete-temp {
  position: relative; cursor: pointer; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--borde);
  background: var(--color-superficie);
  transition: border-color .25s, transform .25s;
}
.paquete-temp:hover { border-color: rgba(255, 27, 94, .55); transform: translateY(-4px); }
.paquete-temp img { width: 100%; height: auto; display: block; }
.paquete-temp__radio { position: absolute; top: 10px; right: 10px; z-index: 2; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.paquete-temp__precio {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 10px 12px; text-align: center;
  font-size: 15px; font-weight: 700;
  background: linear-gradient(180deg, transparent, rgba(8, 6, 11, .92) 55%);
}
.paquete-temp:has(.paquete-temp__radio:checked) {
  border-color: var(--color-primario);
  box-shadow: 0 0 40px -12px rgba(255, 27, 94, .8);
}

/* ---------- Paquetes adicionales (reusan .adicional de site.css por el JS) ---------- */
/* site.css fija `.adicional { height: 240px }` y `.adicional img { border-radius: 29px }`
   para la tarjeta vieja. Con `overflow:hidden` esa altura recortaba el nombre del
   medio de pago, y el radio de la imagen no cuadraba con el de la tarjeta. */
.paquetes-temp .adicional { width: auto; height: auto; display: block; margin: 0; }
.paquetes-temp .adicional img { border-radius: 0; }
.paquete-temp--fijo { cursor: default; }
.adicional.paquete-temp.active { border-color: var(--color-primario); box-shadow: 0 0 40px -12px rgba(255, 27, 94, .8); }
.paquete-temp .adicional-costo { margin-top: 0; }

/* ---------- Medios de pago ---------- */
.formulario__ilustracion--chica { height: 64px; margin: 18px auto 0; }
.mediopago { display: flex; flex-direction: column; }
/* Tarjetas mas angostas y altas que las de paquetes: la rejilla general reparte
   el ancho completo y salian demasiado anchas para lo que muestran. */
.paquetes-temp:has(.mediopago) {
  max-width: 940px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
  justify-content: center;
}
/* En movil el tope de 190px dejaria una sola columna con mucho aire al lado. */
@media (max-width: 560px) {
  .paquetes-temp:has(.mediopago) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Las fotos son verticales (472x672) y traen abajo el bloque azul de TBeo.
   Solo la mitad de arriba es foto util, asi que la banda se encuadra en 3:2
   recortando desde arriba: a 210px de ancho son ~140px de alto. Una caja mas
   alta que eso empieza a dejar ver el azul. */
.mediopago img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; }
/* El radio va sobre la foto: necesita fondo propio para verse. */
.mediopago .paquete-temp__radio { background: rgba(8, 6, 11, .6); border-color: rgba(255, 255, 255, .45); }
.mediopago__cuerpo { padding: 14px 12px 18px; text-align: center; }
.mediopago__nombre { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.mediopago__promo { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--color-naranja); line-height: 1.35; }
.mediopago__desc { margin: 6px 0 0; font-size: 13.5px; font-weight: 500; color: var(--color-texto-tenue); line-height: 1.35; }
.mediopago--proximo { cursor: default; opacity: .65; }
.mediopago--proximo:hover { border-color: var(--borde); transform: none; }

/* ---------- Titulos de vista interna (barrido de <h1 style="..."> ) ---------- */
.titulo-vista {
  margin: clamp(20px, 4vw, 32px) auto clamp(14px, 2.5vw, 20px);
  padding: 0 20px;
  max-width: 720px;
  text-align: center;
  font-size: clamp(19px, 3.4vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--color-texto);
  text-wrap: pretty;
}
.titulo-vista--sub { font-size: clamp(16px, 2.8vw, 19px); font-weight: 500; color: var(--color-texto-suave); }
.titulo-vista .destacado, .titulo-vista label.destacado { font-weight: 700; }

/* ---------- Tabla de resumen (.resume) ---------- */
.resume {
  width: min(560px, 100% - 32px); margin: 0 auto; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}
.resume td { padding: 12px 16px; font-size: 15px; vertical-align: middle; }
.resume td:first-child { color: var(--color-texto-suave); }
.resume td:last-child { font-weight: 600; }

/* Vigencias del resumen de cuenta cuando hay un cambio de plan programado: el
   plan que aun no rige se atenua y ambos llevan su fecha debajo del nombre. */
.resume__vigencia { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--color-texto-tenue); }
.resume__fila--programada td { opacity: .72; }

/* ---------- Correcciones tras revision visual ---------- */
/* `.boton` no traia altura; site.css se la daba a `.button` (40px). Sin esto
   los botones de las pantallas aun no migradas quedan aplastados. */
.boton { min-height: 44px; padding: 12px 26px; }
.formulario__enviar { min-height: 52px; }

/* Las vistas traen anchos fijos en linea (width:80px, 100px, 120px) heredados
   del diseno anterior, cuando `.button` tenia `padding: 6px`. El rediseno subio
   el padding a 22px/26px por lado y con `box-sizing: border-box` esos 80px ya no
   dan para la etiqueta: el texto se salia del boton. El ancho declarado pasa a
   ser un suelo, no un techo, asi que cada boton crece lo justo para su texto. */
.button, .boton { min-width: -moz-fit-content; min-width: fit-content; white-space: nowrap; }

/* Separacion entre campos en las pantallas que siguen con `.linear`. */
.formulario .linear + .linear { margin-top: 12px; }
.formulario .input + .input { margin-top: 12px; }

/* ---------- Logo Tbeo ---------- */
/* El kit fija width/height en el <img> desde los atributos de <ui-logo>. El
   logo de Tbeo tiene otra proporcion, asi que se deja que el alto lo calcule
   el navegador para que no se deforme. */
.logo img, .resultado__logo { height: auto !important; max-height: 42px; width: auto !important; }
.foot .logo img { max-height: 46px; }

/* ==========================================================================
   PANEL DE CUENTA (private/html + Views/Account)                    [Fase 6]
   ========================================================================== */

/* Ficha de datos del cliente */
.resumen {
  max-width: 560px; padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: rgba(255, 255, 255, .03);
}
.resumen .label { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--color-texto-suave); }
.resumen .value { margin-top: 4px; font-size: 16px; font-weight: 600; word-break: break-word; }
.resumen .value + .label { margin-top: 18px; }

/* Estado de la suscripcion */
.estadocliente {
  width: auto; max-width: 320px; padding: 8px 18px;
  border-radius: var(--radio-boton);
}
.estadocliente.activo { background-color: #1F9E4D; }
.estadocliente.inactivo { background-color: #E23148; }
.estadocliente span { font-size: 14.5px; font-weight: 600; }
.estadocliente .icon div { background-color: rgba(255, 255, 255, .92); }

/* Barra de acciones de la cuenta */
.toolbar-resumen { margin-top: clamp(22px, 4vw, 32px); }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin-bottom: 0; }
.pill { margin-bottom: 0; }
.toolbar-resumen .button-item { height: 42px; padding: 0 6px; }
.nota--justificada { max-width: 620px; margin: 14px auto 0; padding: 0 20px; text-align: justify; }
.plan__actual {
  position: absolute; top: -2px; left: 0;
  padding: 5px 12px; border-radius: 8px;
  background: rgba(255, 27, 94, .18); border: 1px solid rgba(255, 27, 94, .5);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-primario-claro);
}

/* Caja de detalle en las pantallas de resultado que aun usan <p>Clave: valor</p> */
.resultado__detalle--parrafos { max-width: 620px; margin: 18px auto 0; text-align: left; }
.resultado__detalle--parrafos p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.resultado__detalle--parrafos p:last-child { margin-bottom: 0; }
.resultado__detalle--parrafos .dato--clave { color: var(--color-primario); font-weight: 700; }

.formulario__subrayado--centrado { margin-left: auto; margin-right: auto; }
.formulario__pie--centrado { display: flex; justify-content: center; margin-top: 22px; }
.formulario__enviar + .formulario__enviar { margin-top: 12px; }
/* El link de pago es largo: se apila para que no rompa la fila */
.detalle__fila--enlace { flex-direction: column; align-items: flex-start; gap: 4px; }
.detalle__fila--enlace dd { text-align: left; font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }

/* Aire entre la cabecera con el logo y la tarjeta que va debajo.
   `.head` no tiene ninguna regla en site.css, asi que se define aqui. */
.head { padding-bottom: clamp(16px, 3vw, 28px); }

/* La tarjeta del diseñador trae `border: 1px solid rgba(255,255,255,.08)` sobre
   un fondo casi negro, y el borde se pierde. Se sube el contraste del borde, se
   aclara un punto la superficie y se anade un halo suave para despegarla del
   fondo. Va aqui y no en el bloque portado para no tocar el original. */
.formulario {
  background: #15131B;
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset,
              0 24px 60px -30px rgba(0, 0, 0, .95);
}

/* ---------- Campos en oscuro ---------- */
/* El diseño usa caja clara (#f4f4f6), pensada para la pantalla de registro a
   pantalla completa. Sobre la tarjeta oscura deslumbra, asi que se adopta como
   base la variante que el propio diseñador definio en `.campo--simple`. */
.campo input, .campo select {
  background: rgba(255, 255, 255, .06);
  color: var(--color-texto);
  border-color: var(--borde-fuerte);
}
.campo input::placeholder { color: var(--color-texto-tenue); }
.campo select option { background: var(--color-superficie); color: var(--color-texto); }
.campo input:hover, .campo select:hover { border-color: rgba(255, 255, 255, .28); }
.campo input:focus, .campo select:focus { background: rgba(255, 255, 255, .09); }

/* Los iconos del campo llevan stroke="#6c6577" como atributo en el SVG; el
   stroke de CSS gana a los atributos de presentacion. */
.campo__icono { stroke: var(--color-texto-tenue); }
.campo__ojo { color: var(--color-texto-suave); }
.campo__ojo:hover { color: var(--color-primario); }

/* Mismo criterio para el kit ui-* de las pantallas aun sin migrar. */
.input { background-color: rgba(255, 255, 255, .06); border-color: var(--borde-fuerte); }
.input input { color: var(--color-texto); }
.input input::placeholder { color: var(--color-texto-tenue); }
.input .icon svg { color: var(--color-texto-tenue); }
.input select { background-color: transparent; color: var(--color-texto); }
.input select option { background: var(--color-superficie); color: var(--color-texto); }

/* ---------- Casillas y radios en oscuro ---------- */
/* El control nativo sin marcar se pinta blanco y destaca demasiado sobre la
   tarjeta. Se dibuja a mano; `accent-color` deja de aplicar al usar appearance. */
.terminos input[type="checkbox"],
.plan__radio,
.paquete-temp__radio,
input[type="checkbox"][name="acepto"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0; flex: 0 0 auto;
  border: 1px solid var(--borde-fuerte); background: rgba(255, 255, 255, .06);
  cursor: pointer; display: inline-grid; place-content: center;
  transition: border-color .2s, background .2s;
}
.terminos input[type="checkbox"],
input[type="checkbox"][name="acepto"] { border-radius: 5px; }
.plan__radio, .paquete-temp__radio { border-radius: 50%; }

.terminos input[type="checkbox"]:hover,
.plan__radio:hover,
.paquete-temp__radio:hover,
input[type="checkbox"][name="acepto"]:hover { border-color: var(--color-primario); }

.terminos input[type="checkbox"]:checked,
input[type="checkbox"][name="acepto"]:checked {
  background: var(--color-primario); border-color: var(--color-primario);
}
.terminos input[type="checkbox"]:checked::after,
input[type="checkbox"][name="acepto"]:checked::after {
  content: ''; width: 5px; height: 10px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.plan__radio:checked, .paquete-temp__radio:checked { border-color: var(--color-primario); }
.plan__radio:checked::after, .paquete-temp__radio:checked::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primario);
}

.terminos input[type="checkbox"]:focus-visible,
.plan__radio:focus-visible,
.paquete-temp__radio:focus-visible,
input[type="checkbox"][name="acepto"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(255, 27, 94, .3);
}

/* ---------- Marco para los widgets de pasarela ---------- */
/* Los SDK (Izipay/Krypton, OpenPay, Niubiz) traen su propio tema claro y no
   permiten tematizarlos desde fuera. En vez de pelearse con ellos se les da un
   panel claro propio, que ademas separa visualmente la zona de pago. */
.pasarela {
  max-width: 560px; margin: clamp(18px, 3vw, 26px) auto 0;
  padding: clamp(18px, 3vw, 26px);
  background: #fff; border-radius: var(--radio);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.pasarela__aviso {
  max-width: 560px; margin: 12px auto 0; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--color-texto-tenue);
}

/* ---------- Panel claro de Izipay ---------- */
/* Estas tres vistas dibujan el formulario del SDK sobre fondo blanco. Al pasar
   los botones a `.boton` quedaron en blanco sobre blanco, invisibles; aqui se
   les devuelve contraste y se tematiza el resto del contenido del panel. */
.pasarela-panel {
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: clamp(14px, 3vw, 22px);
  background: #fff; border-radius: var(--radio); color: #1a1520;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.pasarela-panel .boton--contorno { border-color: rgba(0, 0, 0, .25); color: #1a1520; }
.pasarela-panel .boton--contorno:hover { border-color: var(--color-primario); background: rgba(255, 27, 94, .08); color: #1a1520; }
.pasarela-panel .resume { background: transparent; border-color: rgba(0, 0, 0, .14); }
.pasarela-panel .resume td { color: #1a1520; }
.pasarela-panel .resume td:first-child { color: #55505c; }
.pasarela-panel hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .12); }

/* Nota sobre "Guardar mi tarjeta": sin esa casilla Izipay no guarda el token y
   no hay debito automatico al mes siguiente. Va antes del formulario para que
   el cliente la lea antes de pagar. */
.aviso-pago {
  margin: 0 0 18px; padding: 14px 16px;
  border-left: 4px solid var(--color-primario); border-radius: 10px;
  background: rgba(255, 27, 94, .07); text-align: left;
}
.aviso-pago__titulo { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #1a1520; }
.aviso-pago__texto { margin: 0; font-size: 14px; line-height: 1.55; color: #3d3844; }

/* ==========================================================================
   DIALOGOS DE AVISO Y CONFIRMACION (ui-message / ui-confirm)
   Los emite angular.ui.min.js con `.dialog-form` sobre fondo blanco, heredado
   de site.css. Con el texto de la pagina en blanco el mensaje quedaba
   invisible. Se distinguen de los dialogos de contenido (canales, preguntas)
   por el atributo `ctrl`, que Angular conserva al reemplazar el elemento:
   los de aviso son ctrl="msg" y ctrl="conf".
   ========================================================================== */

.dialog[ctrl="msg"] .dialog-form,
.dialog[ctrl="conf"] .dialog-form {
  background-color: var(--color-superficie);
  color: var(--color-texto);
  border: 1px solid var(--borde-fuerte);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
}

.dialog[ctrl="msg"] ui-p,
.dialog[ctrl="conf"] ui-p {
  display: block; padding: 0 22px 6px;
  font-size: 15px; line-height: 1.55; color: var(--color-texto-suave);
}

/* La plantilla fija `width:80px` en linea para estos botones. Con la caja del
   boton nuevo (padding, mayusculas y espaciado) el texto se salia, asi que hay
   que ganarle al estilo en linea. */
.dialog[ctrl="msg"] .button,
.dialog[ctrl="conf"] .button {
  width: auto !important;
  min-width: 124px;
  padding: 12px 24px;
}
.dialog[ctrl="conf"] table[style*="margin:0 auto"] td { padding: 0 6px; }

/* Los dialogos de contenido (canales, preguntas) mantienen la caja blanca de
   site.css, pero heredaban el texto blanco de la pagina: cualquier texto suyo
   quedaba invisible, incluido el titulo de la cabecera. Se les fija color
   oscuro por defecto; los de aviso lo vuelven a poner en claro mas abajo. */
.dialog .dialog-form { color: #1a1520; }
.dialog .dialog-header-text { color: #1a1520; }
.dialog[ctrl="msg"] .dialog-form,
.dialog[ctrl="conf"] .dialog-form { color: var(--color-texto); }

/* ---------- Login compacto ---------- */
/* El login (Login/Index, con .formulario--compacto) media ~55px mas que una
   pantalla de portatil y obligaba a hacer scroll. Se aprietan solo sus
   espacios verticales; el pie es comun a otras vistas y no se toca. */
.head:has(~ .body .formulario--compacto) { padding-bottom: 14px; }
.formulario.formulario--compacto { padding-top: 26px; padding-bottom: 24px; }
.formulario--compacto .formulario__subrayado { margin: 10px 0 14px; }
.formulario--compacto .formulario__fila { margin-top: 14px; }
.formulario--compacto .recaptcha-tbeo { margin-top: 14px; }
.formulario--compacto .formulario__enviar { margin-top: 18px; }
.formulario--compacto .formulario__pie { margin: 14px 0 0; }