/* ============================================================
   Página de Planes — tarjetas de suscripción y formulario de alta
   Estilo tomado del mockup: título con icono, subtítulo, precio en UF,
   referencia en CLP, lista con checks verdes y CTA azul.
   ============================================================ */

/* ---------- Rejilla de planes ---------- */

.planes-grid {
  display: grid;
  /* Tres columnas: son los tres niveles de un producto y se comparan en
     horizontal. Estaba en dos, de cuando cada app tenía un solo plan, y el
     tercero se caía a una segunda fila. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  max-width: 72rem;
  margin: 0 auto;
  /* `stretch` (por defecto) iguala el alto de las tarjetas; junto con el
     `flex-grow` de la lista, deja los CTA alineados abajo aunque las listas de
     características ocupen distinto número de líneas. */
}

/* ---------- Tarjeta ---------- */

.plan {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-suave);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.plan:hover {
  border-color: var(--azul-borde);
  box-shadow: var(--sombra-media);
  transform: translateY(-3px);
}

.plan-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.plan-nombre {
  font-family: var(--fuente-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.plan-icono { color: var(--texto-suave); flex-shrink: 0; margin-top: 0.15rem; }

.plan-sub {
  font-size: 0.92rem;
  color: var(--texto-suave);
  margin-top: 0.45rem;
  line-height: 1.5;
}

/* ---------- Precio ---------- */

.plan-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.4rem;
}
.plan-precio-uf {
  font-family: var(--fuente-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan-precio-periodo {
  font-size: 1rem;
  color: var(--texto);
}

/* Referencia en CLP: es informativa, nunca el monto que se cobra. */
.plan-clp {
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-top: 0.5rem;
  min-height: 1.45rem;
}
.plan-clp[data-estado="cargando"] { opacity: 0.55; }

/* ---------- Lista de características ---------- */

.plan-lista {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--borde-suave);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-grow: 1;
}
.plan-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.97rem;
  color: var(--texto);
  line-height: 1.5;
}
.plan-check {
  color: #16A34A;
  flex-shrink: 0;
  margin-top: 0.18rem;
}

/* ---------- CTA ---------- */

/* Azul y no el naranja de `.btn`: es lo que pide el mockup, y coincide con
   el azul de marca del sitio (--azul), así que no introduce un color nuevo. */
.plan-cta {
  width: 100%;
  margin-top: 1.7rem;
  justify-content: center;
  font-size: 1rem;
  background: var(--azul);
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.7);
}
.plan-cta:hover { background: var(--azul-oscuro); }

.plan-nota {
  font-size: 0.82rem;
  color: var(--texto-suave);
  text-align: center;
  margin-top: 0.8rem;
}

/* ---------- Aclaración de facturación ---------- */

.planes-aclaracion {
  max-width: 46rem;
  margin: 2.4rem auto 0;
  padding: 1.1rem 1.3rem;
  background: var(--azul-claro);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  font-size: 0.9rem;
  color: var(--texto);
  line-height: 1.6;
}
.planes-aclaracion strong { color: var(--tinta); }

/* ============================================================
   Modal de alta
   ============================================================ */

/* Sin `backdrop-filter`.
   Un desenfoque a pantalla completa obliga al navegador a re-rasterizar todo
   lo que hay detrás en cada fotograma, y detrás siguen corriendo animaciones
   infinitas (el chevrón del logo, los orbes de las secciones, la banda CTA).
   El resultado era que, con el modal abierto, hasta escribir en un input se
   arrastraba. Un velo sólido logra el mismo efecto visual y no cuesta nada. */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  z-index: 100;
}
.modal-fondo.abierto { display: flex; }

/* Con el modal abierto, lo de atrás no se ve ni se usa: no tiene sentido
   seguir gastando fotogramas en animarlo. */
body.modal-abierto .logo-chevron,
body.modal-abierto .hero::before,
body.modal-abierto .hero::after,
body.modal-abierto .hero .acento,
body.modal-abierto .cabecera-pagina::after,
body.modal-abierto .banda-cta::before {
  animation: none !important;
}

.modal {
  background: var(--blanco);
  border-radius: var(--radio-g);
  width: 100%;
  max-width: 27rem;
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.7rem;
  box-shadow: 0 30px 70px -20px rgba(17, 24, 39, 0.45);
  animation: modalEntra 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes modalEntra {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
}

.modal-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.3rem;
}
.modal h2 { font-size: 1.3rem; }
.modal-cerrar {
  background: none;
  border: none;
  color: var(--texto-suave);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.modal-cerrar:hover { color: var(--tinta); }

.modal-sub { font-size: 0.92rem; color: var(--texto-suave); margin-bottom: 1.3rem; }
.modal-plan { font-weight: 600; color: var(--azul); }

.campo { margin-bottom: 0.95rem; }

/* Nombre y apellido comparten línea: son un solo dato partido en dos, y en
   filas separadas parecían campos sin relación. */
.campo-doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.75rem;
}

@media (max-width: 480px) {
  .campo-doble { grid-template-columns: 1fr; }
}
.campo label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 0.35rem;
}
.campo input {
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: 0.97rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.7rem 0.85rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.campo input[aria-invalid="true"] { border-color: #DC2626; }
.campo-error {
  display: none;
  font-size: 0.82rem;
  color: #DC2626;
  margin-top: 0.3rem;
}
.campo input[aria-invalid="true"] ~ .campo-error { display: block; }

.modal-aviso {
  display: none;
  font-size: 0.88rem;
  border-radius: var(--radio);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.modal-aviso.visible { display: block; }
.modal-aviso.error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }

/* Azul, igual que el CTA de la tarjeta: el modal es la continuación de ese
   clic y cambiar de color a mitad del flujo se lee como otra acción. */
.modal-enviar {
  width: 100%;
  justify-content: center;
  margin-top: 0.4rem;
  background: var(--azul);
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.7);
}
.modal-enviar:hover { background: var(--azul-oscuro); }
.modal-enviar[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.modal-legal {
  font-size: 0.8rem;
  color: var(--texto-suave);
  line-height: 1.55;
  margin-top: 1rem;
  text-align: center;
}

/* ============================================================
   Página de retorno tras el pago
   ============================================================ */

.retorno {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}
.retorno-icono {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.retorno-icono.ok { background: #DCFCE7; color: #16A34A; }
.retorno-icono.pendiente { background: var(--azul-claro); color: var(--azul); }
.retorno-icono.error { background: #FEF2F2; color: #DC2626; }
.retorno p { margin-top: 0.9rem; }
.retorno-acciones { margin-top: 1.8rem; display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Pantalla de creación de cuenta (tras el pago)
   ============================================================ */

.cuenta {
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
}
.cuenta h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.cuenta > .cuenta-paso > p { margin-top: 0.9rem; }
.cuenta-intro { margin-bottom: 1.6rem; }

.cuenta-cargando {
  width: 34px; height: 34px;
  margin: 2.5rem auto 0;
  border: 3px solid var(--borde);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cuenta-cargando { animation-duration: 2.4s; }
}
.cuenta-esperando { color: var(--texto-suave); font-size: 0.95rem; }

.cuenta-form { text-align: left; margin-top: 0.5rem; }
.cuenta-form .campo { margin-bottom: 1.15rem; }
.campo-ayuda { font-size: 0.82rem; color: var(--texto-suave); margin-top: 0.3rem; }

/* Un campo de sólo lectura debe *parecerlo*: si se ve igual que los demás,
   el usuario intenta escribir en él y no entiende por qué no puede. */
.cuenta-form input[readonly] {
  background: var(--fondo-alt);
  color: var(--texto);
  cursor: default;
}
.cuenta-form input[readonly]:focus { border-color: var(--borde); box-shadow: none; }

.campo-clave { position: relative; display: flex; align-items: center; }
.campo-clave input { padding-right: 5.2rem; }
.campo-ojo {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--azul);
  font-family: var(--fuente-texto);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
}
.campo-ojo:hover { color: var(--azul-oscuro); }

.fuerza {
  height: 5px;
  border-radius: 3px;
  background: var(--borde);
  overflow: hidden;
  margin-top: 0.55rem;
}
.fuerza i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.fuerza-texto { font-size: 0.8rem; margin-top: 0.3rem; min-height: 1.1rem; font-weight: 600; }

.cuenta .modal-aviso { text-align: left; }

/* ---------- La descarga al terminar el alta ----------
   Antes esta pantalla decía «ya puedes entrar a la aplicación» y ahí se
   acababa. El bloque de abajo es el enlace al instalador de la app que se
   acaba de contratar, que es lo que faltaba para poder usarla. */
.cuenta-descarga,
.cuenta-descarga-falta {
  margin-top: 1.6rem;
  padding: 1.2rem;
  border: 1px solid var(--borde);
  border-radius: 0.9rem;
  background: var(--fondo-suave, #FAFAFA);
}
.cuenta-descarga-enlace { display: inline-flex; align-items: center; gap: 0.45rem; }
.cuenta-descarga-meta {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.cuenta-descarga-falta p { margin-top: 0; }
.cuenta-descarga-falta .retorno-acciones { margin-top: 1.1rem; }
.cuenta-descarga-nota {
  font-size: 0.85rem;
  color: var(--texto-suave);
}
/* `hidden` pierde contra `display:flex`/`block` de las reglas de arriba. */
.cuenta-descarga[hidden],
.cuenta-descarga-falta[hidden],
.cuenta-descarga-nota[hidden] { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
  /* Dos y una: bajar de tres a una de golpe desperdicia el ancho de una
     tableta, donde dos tarjetas todavía se comparan bien. */
  .planes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; }
}

@media (max-width: 700px) {
  .planes-grid { grid-template-columns: 1fr; max-width: 27rem; }
}


/* === Pestañas de producto ==================================================
   Cada pestaña lleva el color real de su app en `--color-app`, y todo lo que
   hay dentro del panel lo hereda. Así el visitante asocia color y producto sin
   tener que leer el título — es el mismo criterio de la presentación.
   ========================================================================== */

.planes-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.pestana {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: transparent;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}

.pestana:hover { color: var(--texto); border-color: var(--color-app); }

.pestana.activa {
  color: #fff;
  background: var(--color-app);
  border-color: var(--color-app);
}

.pestana-icono { display: inline-flex; }
.pestana-icono svg { display: block; }

.pestana:focus-visible {
  outline: 2px solid var(--color-app);
  outline-offset: 3px;
}

.planes-panel { animation: panel-entra .25s ease both; }

@keyframes panel-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .planes-panel { animation: none; }
}

.panel-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.panel-sub { margin: 0; color: var(--texto-suave); }

.panel-enlace {
  color: var(--color-app);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.panel-enlace:hover { text-decoration: underline; }

/* El acento de las tarjetas es el del producto, no el de la marca. */
.planes-panel .plan-precio-uf,
.planes-panel .plan-check { color: var(--color-app); }

.planes-panel .plan-cta {
  background: var(--color-app);
  border-color: var(--color-app);
}

.planes-panel .plan-destacado {
  border-color: var(--color-app);
  box-shadow: 0 0 0 1px var(--color-app);
  position: relative;
}

.plan-etiqueta {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-app);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Un pago único no es una cuota: se destaca para que no se lea como mensual. */
.plan-precio-periodo.es-unico {
  color: var(--color-app);
  font-weight: 700;
}

.plan-nota.es-unico { color: var(--texto-suave); }