/* Pizzarium — sitio público.
   Un solo archivo, sin framework ni compilación: lo que se escribe aquí es
   exactamente lo que sirve el servidor. */

:root {
  --rojo:        #e5342a;
  --rojo-claro:  #ff6b5f;
  --rojo-oscuro: #b8231a;

  --fondo:        #ffffff;
  --fondo-alt:    #f7f5f4;
  --fondo-card:   #ffffff;
  --borde:        #e6e1df;
  --texto:        #1a1614;
  --texto-suave:  #6b625d;
  --sombra:       0 1px 3px rgba(26, 22, 20, .08), 0 8px 24px rgba(26, 22, 20, .06);
  --sombra-alta:  0 2px 6px rgba(26, 22, 20, .1), 0 16px 48px rgba(26, 22, 20, .12);

  --radio:    14px;
  --radio-sm: 9px;
  --ancho:    1140px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* La app es dark-first y el sitio la acompaña cuando el visitante prefiere
   oscuro. Se respeta la preferencia del sistema y punto: un selector de tema en
   una landing es un botón que nadie pulsa. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo:       #131011;
    --fondo-alt:   #1b1719;
    --fondo-card:  #1e1a1c;
    --borde:       #322c2f;
    --texto:       #f4f0ef;
    --texto-suave: #a89f9b;
    --sombra:      0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 16px 48px rgba(0, 0, 0, .45);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 750; }
h3 { font-size: 1.16rem; font-weight: 650; }
p  { margin: 0 0 1em; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 22px;
}

.seccion { padding: clamp(56px, 9vw, 104px) 0; }
.seccion--alt { background: var(--fondo-alt); }

.centrado { text-align: center; }

.plomo {
  font-size: clamp(1.03rem, 2.1vw, 1.22rem);
  color: var(--texto-suave);
  max-width: 62ch;
}
.centrado .plomo { margin-inline: auto; }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.03em;
  text-decoration: none;
}
.marca__punto {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--rojo);
  flex: none;
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  text-decoration: none;
  color: var(--texto-suave);
  font-size: .96rem;
  font-weight: 500;
  transition: color .15s;
}
.nav a:hover { color: var(--texto); }

@media (max-width: 780px) {
  .nav__enlaces { display: none; }
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .98rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--rojo);
  color: #fff;
  box-shadow: 0 2px 12px rgba(229, 52, 42, .32);
}
.boton--primario:hover { background: var(--rojo-oscuro); }

.boton--fantasma {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde);
}
.boton--fantasma:hover { border-color: var(--texto-suave); }

.boton--ancho { width: 100%; }
.boton--grande { padding: 16px 32px; font-size: 1.05rem; }

.boton[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Portada ───────────────────────────────────────────────────────────── */
.portada {
  padding: clamp(58px, 10vw, 116px) 0 clamp(48px, 8vw, 88px);
  position: relative;
  overflow: hidden;
}
.portada::before {
  /* Un resplandor rojo muy tenue detrás del titular: da profundidad sin meter
     una imagen que haya que descargar. */
  content: "";
  position: absolute;
  inset: -40% 20% auto -10%;
  height: 620px;
  background: radial-gradient(circle at 30% 40%, rgba(229, 52, 42, .14), transparent 62%);
  pointer-events: none;
}
.portada > * { position: relative; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 22px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo-card);
  font-size: .87rem;
  font-weight: 550;
  color: var(--texto-suave);
}
.etiqueta__pastilla {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 30px;
}

.portada__nota {
  margin-top: 18px;
  font-size: .92rem;
  color: var(--texto-suave);
}

/* ── Rejillas ──────────────────────────────────────────────────────────── */
.rejilla {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

.tarjeta {
  padding: 26px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-card);
  box-shadow: var(--sombra);
}

.tarjeta__icono {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--rojo) 12%, transparent);
  color: var(--rojo);
  font-size: 1.25rem;
}

.tarjeta p:last-child { margin-bottom: 0; color: var(--texto-suave); font-size: .97rem; }

/* ── Franja destacada ──────────────────────────────────────────────────── */
.franja {
  padding: clamp(34px, 5vw, 52px);
  border-radius: var(--radio);
  background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro));
  color: #fff;
}
.franja h2 { color: #fff; }
.franja p  { color: rgba(255, 255, 255, .9); }
.franja .boton--fantasma {
  background: #fff;
  color: var(--rojo-oscuro);
  border-color: #fff;
}

/* ── Planes ────────────────────────────────────────────────────────────── */
.planes {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-card);
  box-shadow: var(--sombra);
  height: 100%;
}

.plan--destacado {
  border-color: var(--rojo);
  box-shadow: var(--sombra-alta);
}
@media (min-width: 900px) {
  /* Solo se levanta cuando los tres caben en fila; apilados en el móvil, un
     plan desplazado hacia arriba se lee como un fallo de maquetación. */
  .plan--destacado { transform: translateY(-10px); }
}

.plan__cinta {
  align-self: flex-start;
  padding: 4px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.plan__nombre { font-size: 1.32rem; font-weight: 720; margin-bottom: 4px; }
.plan__resumen { color: var(--texto-suave); font-size: .95rem; min-height: 2.9em; }

.plan__precio {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 16px 0 4px;
}
.plan__monto { font-size: 2.5rem; font-weight: 800; letter-spacing: -.035em; }
.plan__periodo { color: var(--texto-suave); font-size: .95rem; }

.plan__prueba {
  margin-bottom: 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--rojo);
}

.plan__lista {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: .96rem;
}
.plan__lista li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
  color: var(--texto-suave);
}
.plan__lista li::before {
  content: "✓";
  color: var(--rojo);
  font-weight: 800;
  line-height: 1.45;
}

.plan__pie { margin-top: auto; }

/* Esqueleto mientras llegan los precios del servidor. Reserva el mismo alto que
   la tarjeta real para que la página no dé un salto al cargar. */
.esqueleto {
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: linear-gradient(100deg,
    var(--fondo-alt) 30%, var(--fondo-card) 50%, var(--fondo-alt) 70%);
  background-size: 220% 100%;
  animation: brillo 1.4s ease-in-out infinite;
  min-height: 430px;
}
@keyframes brillo {
  from { background-position: 180% 0; }
  to   { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
}

/* ── Comparativa ───────────────────────────────────────────────────────── */
.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-card);
}
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .96rem; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--borde); }
thead th { font-weight: 680; background: var(--fondo-alt); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
td.si { color: var(--rojo); font-weight: 700; }
td.no { color: var(--texto-suave); }

/* ── Preguntas ─────────────────────────────────────────────────────────── */
.pregunta {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.pregunta summary {
  padding: 18px 22px;
  font-weight: 620;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "+";
  color: var(--rojo);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  flex: none;
}
.pregunta[open] summary::after { content: "−"; }
.pregunta__cuerpo { padding: 0 22px 20px; color: var(--texto-suave); }
.pregunta__cuerpo p:last-child { margin-bottom: 0; }

/* ── Formulario ────────────────────────────────────────────────────────── */
.formulario {
  max-width: 560px;
  margin-inline: auto;
}

.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: .92rem;
  font-weight: 600;
}
.campo__ayuda {
  margin-top: 6px;
  font-size: .86rem;
  color: var(--texto-suave);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-card);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 18%, transparent);
}

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .fila { grid-template-columns: 1fr; } }

.aviso {
  padding: 14px 16px;
  border-radius: var(--radio-sm);
  font-size: .95rem;
  margin-bottom: 20px;
}
.aviso--error {
  background: color-mix(in srgb, var(--rojo) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 34%, transparent);
  color: var(--texto);
}
.aviso--info {
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
}

.oculto { display: none !important; }

/* ── Panel (área con sesión iniciada) ──────────────────────────────────── */
.panel__barra {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.panel__quien { font-size: .95rem; color: var(--texto-suave); }
.panel__quien strong { color: var(--texto); }

.insignia {
  display: inline-block;
  padding: 3px 10px;
  margin-left: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rojo) 14%, transparent);
  color: var(--rojo);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
}

/* Pestañas del panel de plataforma. */
.pestanas {
  display: flex;
  gap: 4px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
}

.pestana {
  padding: 11px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: .97rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] {
  color: var(--rojo);
  border-bottom-color: var(--rojo);
}

/* Tarjetas de cifras. */
.metricas {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 30px;
}

.metrica {
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-card);
}
.metrica__cifra {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.metrica__nombre {
  margin-top: 4px;
  font-size: .88rem;
  color: var(--texto-suave);
}
.metrica--alerta .metrica__cifra { color: var(--rojo); }

/* Estado de una suscripción. Los colores son de significado, no decorativos:
   sirven para encontrar de un vistazo lo que necesita atención. */
.estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 650;
  white-space: nowrap;
}
.estado--activa   { background: color-mix(in srgb, #16a34a 18%, transparent); color: #16a34a; }
.estado--prueba   { background: color-mix(in srgb, #2563eb 18%, transparent); color: #3b82f6; }
.estado--vencida  { background: color-mix(in srgb, var(--rojo) 18%, transparent); color: var(--rojo); }
.estado--cancelada{ background: var(--fondo-alt); color: var(--texto-suave); }

/* Un ajuste editable. */
.ajuste {
  padding: 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-card);
  margin-bottom: 14px;
}
.ajuste__titulo {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 650;
  margin-bottom: 4px;
}
.ajuste__nota {
  font-size: .88rem;
  color: var(--texto-suave);
  margin-bottom: 12px;
}
.ajuste__fila { display: flex; gap: 10px; align-items: flex-start; }
.ajuste__fila input, .ajuste__fila textarea, .ajuste__fila select { flex: 1; }
.ajuste__clave {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem;
  color: var(--texto-suave);
}

textarea {
  width: 100%;
  min-height: 92px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-card);
  color: var(--texto);
  font: inherit;
  font-size: .97rem;
  resize: vertical;
}
textarea:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 18%, transparent);
}

.boton--chico { padding: 9px 16px; font-size: .89rem; }

.aviso--exito {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  border: 1px solid color-mix(in srgb, #16a34a 34%, transparent);
  color: var(--texto);
}

.cargando {
  padding: 40px;
  text-align: center;
  color: var(--texto-suave);
}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie {
  padding: 48px 0 34px;
  border-top: 1px solid var(--borde);
  background: var(--fondo-alt);
  font-size: .93rem;
  color: var(--texto-suave);
}
.pie__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: space-between;
  align-items: center;
}
.pie a { text-decoration: none; }
.pie a:hover { color: var(--texto); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 20px; }