/* ============================================================
   precios.css — página pública de Precios (#/precios).
   Solo clases con prefijo `precios-`; los colores salen de las
   variables de styles.css (sin valores de paleta hardcodeados).
   ============================================================ */

.precios-main {
  padding: clamp(28px, 5vw, 64px) 0;
}

.precios-container {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

/* ---------- Encabezado ---------- */

.precios-encabezado {
  max-width: 640px;
}

.precios-encabezado h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
}

.precios-bajada {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
}

/* ---------- Contenido dinámico ---------- */

.precios-contenido {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.precios-estado {
  margin: 0;
  color: var(--muted);
  /* Reserva altura SOLO mientras se ve "Cargando planes…" (evita el salto).
     Va aquí y no en el contenedor: en el estado de error dejaba un hueco. */
  min-height: 260px;
}

.precios-error {
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid color-mix(in srgb, var(--highlight) 22%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--highlight) 7%, var(--secondary));
}

.precios-error p {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.precios-error a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Grilla de planes ---------- */

.precios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.5vw, 22px);
}

/* 1 columna hasta 1000px; 3 columnas desde 1001px (sin tarjeta huérfana). */
@media (min-width: 1001px) {
  .precios-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.precios-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.precios-plan-nombre {
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
}

.precios-plan-lista {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.precios-plan-lista li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.precios-plan-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--text);
  font-weight: 700;
}

.precios-plan-precio {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.precios-precio-valor {
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 800;
}

.precios-precio-periodo {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Formas de pago ---------- */

.precios-pagos {
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.precios-pagos-titulo {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.05rem;
}

.precios-pagos-lista {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.6;
}

/* ---------- Cierre y llamados a la acción ---------- */

.precios-condiciones {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Línea de ayuda al pie (reemplaza al botón genérico: ahora cada tarjeta tiene el suyo). */
.precios-ayuda {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.precios-ayuda a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
}

/* Botón de cada tarjeta: abajo del todo, ancho completo y sin subrayado. */
.precios-cta {
  margin-top: auto;
  width: 100%;
  text-decoration: none;
  text-align: center;
}

.precios-cta:focus-visible,
.precios-ayuda a:focus-visible,
.pagar-main a:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .precios-precio-valor {
    font-size: 1.35rem;
  }
}

/* ---------- Free Premium, IVA y obra adicional ---------- */

/* Free Premium se distingue por el borde y la etiqueta de días, no por el color
   de acento (en el tema Neón es ilegible sobre fondo oscuro). */
.precios-plan.precios-plan-gratis {
  border: 2px solid var(--text);
}

.precios-plan-etiqueta {
  align-self: flex-start;
  margin: 0 0 6px;
  padding: 2px 10px;
  border: 1.5px solid var(--text);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.precios-precio-linea {
  margin: 0;
}

.precios-precio-nota {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.precios-plan-extra {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
}

/* Botón principal: `.btn` (blanco sobre `--accent`) no cumple 4,5:1 en Nocturno
   (3,68) ni Programación (2,95). Colores invertidos, como en las demás páginas
   públicas. */
.precios-main .btn.precios-cta,
.precios-main .btn.precios-cta:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--primary);
}

/* El precio ahora tiene dos líneas (valor + IVA y total con IVA): en columna. */
.precios-plan-precio {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.precios-precio-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

/* ---------- Tabla comparativa ---------- */
/* Contraste: todo el texto usa `--text` o `--muted` (nunca `--accent`, ilegible en
   Neón) sobre `--card`/`--bg-2`. Free Premium se resalta con borde, no con color.
   Los ✓/✗ se distinguen por la forma y llevan texto para lectores de pantalla. */

/* Texto solo para lectores de pantalla (no existe una clase global). */
.precios-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.precios-comparativa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.precios-comparativa-titulo {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.2;
}

.precios-comparativa-nota {
  margin: 0 0 6px;
  max-width: 640px;
  color: var(--muted);
  font-size: 0.95rem;
}

.precios-tabla {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
}

.precios-tabla th,
.precios-tabla td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

/* Primera columna (nombre de la fila) más ancha; las de plan, iguales. */
.precios-th-vacio,
.precios-th-fila {
  width: 34%;
  text-align: left;
}

.precios-th-fila {
  font-weight: 600;
}

.precios-th-plan {
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  background: var(--bg-2);
}

.precios-th-vacio {
  background: var(--bg-2);
}

.precios-celda {
  text-align: center;
  vertical-align: middle;
}

/* Fila de grupo: una banda con el título del bloque (Precio, Topes, Funciones). */
.precios-fila-grupo th {
  padding: 10px 14px;
  background: var(--bg-2);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.precios-grupo:last-child tr:last-child th,
.precios-grupo:last-child tr:last-child td {
  border-bottom: 0;
}

/* Esquinas redondeadas del contenedor. */
.precios-tabla thead tr:first-child th:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
}

.precios-tabla thead tr:first-child th:last-child {
  border-top-right-radius: calc(var(--radius) - 1px);
}

.precios-marca {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.precios-marca .eico {
  stroke-width: 2.6;
}

.precios-marca-si {
  color: var(--text);
}

/* ✕ y — más apagados: el significado ya va en la forma y en el texto accesible. */
.precios-marca-no,
.precios-marca-vacia {
  color: var(--muted);
}

.precios-valor {
  font-weight: 600;
}

/* Columna Free Premium: marco con borde (no color de acento). Se corta en las
   bandas de grupo, que ocupan todo el ancho, así que cada tramo cierra su propia caja.
   El marco se dibuja con sombra interior y no con `border`: en una tabla con bordes
   colapsados el borde inferior de la última fila lo recorta la esquina redondeada de
   la caja y el marco quedaba abierto. */
.precios-tabla .precios-col-free {
  --marco: var(--text);
  box-shadow: inset 2px 0 0 var(--marco), inset -2px 0 0 var(--marco);
}

/* Encabezado: marco cerrado arriba y abajo. */
.precios-tabla thead .precios-col-free {
  box-shadow: inset 2px 0 0 var(--marco), inset -2px 0 0 var(--marco), inset 0 2px 0 var(--marco),
    inset 0 -2px 0 var(--marco);
}

/* Primera fila de cada grupo (tras la banda): cierra por arriba. */
.precios-grupo tr.precios-fila-grupo + tr .precios-col-free {
  box-shadow: inset 2px 0 0 var(--marco), inset -2px 0 0 var(--marco), inset 0 2px 0 var(--marco);
}

/* Última fila de cada grupo: cierra por abajo. */
.precios-grupo tr:last-child .precios-col-free {
  box-shadow: inset 2px 0 0 var(--marco), inset -2px 0 0 var(--marco), inset 0 -2px 0 var(--marco);
}

/* Grupo de una sola fila: primera y última a la vez, caja completa. */
.precios-grupo tr.precios-fila-grupo + tr:last-child .precios-col-free {
  box-shadow: inset 2px 0 0 var(--marco), inset -2px 0 0 var(--marco), inset 0 2px 0 var(--marco),
    inset 0 -2px 0 var(--marco);
}

/* ---------- Tabla en móvil: una tarjeta por fila ---------- */
/* Hasta 700px la tabla no cabe sin apretar los textos: cada fila pasa a ser una
   tarjeta (título arriba y, debajo, un valor por plan con su etiqueta `data-label`).
   Se eligió reflujo y no scroll horizontal para que se pueda comparar una fila de un
   vistazo, sin deslizar ni esconder columnas. */
@media (max-width: 700px) {
  .precios-tabla,
  .precios-tabla tbody,
  .precios-tabla thead {
    display: block;
  }

  .precios-tabla {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* El encabezado se oculta a la vista; las etiquetas salen de `data-label`. */
  .precios-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .precios-grupo {
    margin-bottom: 14px;
  }

  .precios-tabla tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-top: 0;
    background: var(--card);
  }

  .precios-tabla tr.precios-fila-grupo {
    display: block;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--bg-2);
  }

  .precios-grupo tr:last-child {
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .precios-tabla th,
  .precios-tabla td {
    display: block;
    padding: 0;
    border: 0;
  }

  .precios-fila-grupo th {
    padding: 10px 14px;
  }

  .precios-th-fila {
    grid-column: 1 / -1;
    width: auto;
    font-size: 1rem;
  }

  .precios-celda {
    text-align: left;
  }

  /* Etiqueta del plan encima de cada valor. `/ ""` la deja fuera del árbol de
     accesibilidad (la tabla ya anuncia la columna); sin soporte, se ve igual. */
  .precios-celda::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* Free Premium se sigue distinguiendo por borde: un filete a la izquierda. */
  .precios-tabla .precios-grupo tr td.precios-col-free {
    border: 0;
    border-left: 3px solid var(--text);
    box-shadow: none;
    padding-left: 8px;
  }
}

/* ---------- Pagar tu plan (#/pagar) ---------- */
/* Pantalla provisoria: solo el plan elegido y cómo activarlo. Mismos criterios de
   contraste que arriba (texto en `--text`/`--muted`, sin `--accent`). */

.pagar-main {
  padding: clamp(28px, 5vw, 64px) 0;
}

.pagar-container {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 28px);
  max-width: 720px;
}

.pagar-h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
}

.pagar-contenido {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 22px);
}

.pagar-estado {
  margin: 0;
  color: var(--muted);
}

.pagar-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(18px, 2.5vw, 26px);
  border: 2px solid var(--text);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.pagar-plan-nombre {
  margin: 0;
  color: var(--text);
  font-size: 1.3rem;
}

.pagar-plan-precio,
.pagar-plan-total {
  margin: 0;
}

.pagar-plan-valor {
  color: var(--text);
  font-size: 1.7rem;
  font-weight: 800;
}

.pagar-plan-periodo {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.pagar-plan-total {
  color: var(--text);
  font-weight: 600;
}

.pagar-aviso,
.pagar-cambiar {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.pagar-aviso a,
.pagar-cambiar a,
.pagar-aviso-caja a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
}

.pagar-aviso-caja {
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.pagar-aviso-caja p {
  margin: 0 0 8px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.pagar-aviso-caja p:last-child {
  margin-bottom: 0;
}