/* Estilos de la página pública. Se carga DESPUÉS de estilos.css y solo acá.

   Reusa los tokens de la aplicación a propósito: que la página de venta y el
   producto se parezcan es parte de que el producto parezca serio. Lo que cambia
   es el ritmo —mucho más aire— y la tipografía de los títulos.

   Al no estar enlazada en ningún otro template, todo lo de este archivo está
   acotado a la landing aunque los selectores parezcan globales. */

/* --- Siempre clara ---------------------------------------------------------

   La aplicación se da vuelta sola con prefers-color-scheme; la landing no. Si
   alguien la abre con el sistema en oscuro, vería una versión que nadie diseñó y
   que además pelea con la idea de "papel" que buscan los títulos.

   Esto funciona porque una regla posterior con la misma especificidad le gana a
   la del @media de estilos.css, sin importar que aquella esté en un media query. */
:root {
  --fondo: #f7f6f3;
  --papel: #ffffff;
  --texto: #1b1f24;
  --suave: #5b6672;
  --borde: #e2ded6;
  --borde-fuerte: #c9c3b8;
  --acento: #1d4ed8;
  --acento-texto: #ffffff;
  /* Estos cuatro también hay que repetirlos. El @media oscuro de estilos.css
     define trece tokens y acá se pisaban nueve: con el sistema en oscuro, un
     mensaje de Django en la landing salía con fondo casi negro y letra salmón
     en el medio de una página crema. */
  --error: #b42318;
  --error-fondo: #fef3f2;
  --exito: #067647;
  --exito-fondo: #ecfdf3;
  --atencion: #8a5200;
  --atencion-fondo: #fff8ed;
  --borde-control: #a29a8c;

  --sombra: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px -12px rgb(16 24 40 / 0.18);

  /* Un serif para los títulos. Son fuentes que ya están en el sistema: no se
     descarga nada. Si algún día querés una de verdad, es cambiar esta línea por
     un @font-face con un .woff2 en static/ y nada más. */
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* La aplicación encierra todo en 720px; acá cada sección decide su ancho. */
main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Los mensajes de Django viven dentro de <main> y antes del contenido. Como acá
   main no tiene padding, salían pegados a los dos bordes de la ventana y arriba
   de la portada. Se ve cada vez que alguien cierra sesión y cae en la landing. */
main > .aviso {
  max-width: 780px;
  margin: var(--e5) auto 0;
}

/* --- Ritmo ---------------------------------------------------------------- */

.seccion {
  padding: var(--e7) var(--e5);
  border-bottom: 1px solid var(--borde);
}

/* Las bandas alternan con un tono MÁS CLARO del mismo papel, nunca con un salto
   a oscuro: una sección negra en el medio de una página clara se lee como un
   error de copiado, no como una decisión. */
.seccion.papel { background: var(--papel); }

.centro {
  max-width: 780px;
  margin: 0 auto;
}

/* --- Tipografía ----------------------------------------------------------- */

.landing h1,
.landing h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.landing h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 var(--e5);
}

.landing h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin: 0 0 var(--e5);
}

/* La medida: alrededor de 65 caracteres es donde el ojo no se pierde al saltar
   de renglón. */
.landing p {
  max-width: 62ch;
  margin: 0 0 var(--e4);
}

.bajada {
  font-size: 1.1875rem;
  color: var(--suave);
  line-height: 1.6;
}

.remate {
  font-size: 1.0625rem;
  font-weight: 500;
}

/* Etiqueta chiquita arriba de un título, para ubicar de qué se está hablando
   antes de leerlo. */
.rotulo {
  display: inline-block;
  margin-bottom: var(--e4);
  padding: 3px var(--e3);
  border: 1px solid var(--borde-fuerte);
  border-radius: 99px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--suave);
}

/* --- Portada -------------------------------------------------------------- */

.portada {
  padding: clamp(var(--e7), 9vw, 120px) var(--e5);
  background: var(--papel);
}

/* --- Llamada a la acción -------------------------------------------------- */

/* OJO con el nombre: `.acciones` ya existe en estilos.css y ahí es la barra de
   acción PEGADA ABAJO del formulario (sticky, con desenfoque y margen negativo).
   Como esta hoja carga después pero solo declaraba cinco propiedades, las filas
   de botones de la landing heredaban el sticky, el blur, el borde superior y un
   margen lateral de -24px: quedaban clavadas al pie de la ventana y corridas.
   Por eso el nombre propio. No lo vuelvas a llamar `.acciones`. */
.acciones-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e6);
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  border-radius: 99px;
  border: 1px solid transparent;
  background: var(--acento);
  color: var(--acento-texto);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms;
}

.boton:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra);
}

.boton.tenue {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-fuerte);
}

.boton.tenue:hover { border-color: var(--suave); }

/* --- Los pasos ------------------------------------------------------------

   Numerados y en vertical, no tres tarjetas iguales en fila. Son tres momentos
   de UN proceso, y ponerlos en columnas los muestra como si fueran alternativas
   entre las que hay que elegir. */

.pasos {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
}

.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 var(--e6) calc(var(--e7) + var(--e4));
  min-height: var(--e7);
}

.pasos li:last-child { padding-bottom: 0; }

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -0.15em;
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--borde-fuerte);
}

/* La línea que une los pasos: son un recorrido, no una lista suelta. */
.pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--e5) - 1px);
  top: var(--e6);
  bottom: var(--e3);
  width: 1px;
  background: var(--borde);
}

.pasos h3 {
  margin: 0 0 var(--e2);
  font-size: 1.0625rem;
  font-weight: 600;
}

.pasos p { margin: 0; color: var(--suave); }

/* --- Tablas ---------------------------------------------------------------

   Tablas de verdad y no tarjetas de precio: el que compra esto lee tablas todo
   el día y las entiende más rápido que a cualquier otra cosa. */

.tabla-envoltorio { overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  margin: var(--e5) 0;
  font-variant-numeric: tabular-nums;
}

.tabla th,
.tabla td {
  padding: var(--e3) var(--e4);
  text-align: left;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

.tabla thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--suave);
  border-bottom-color: var(--borde-fuerte);
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td { border-bottom: none; }

.tabla .plan { font-weight: 600; white-space: nowrap; }
.tabla .precio { font-weight: 600; white-space: nowrap; }

.si { color: var(--texto); font-weight: 500; }
.no { color: var(--suave); }

/* --- Cierre --------------------------------------------------------------- */

.cierre {
  text-align: center;
  padding: var(--e7) var(--e5) calc(var(--e7) + var(--e5));
  border-bottom: none;
}

.cierre p { margin-left: auto; margin-right: auto; }
.cierre .acciones-cta { justify-content: center; }

.nota {
  font-size: 0.875rem;
  color: var(--suave);
}

/* --- Pantallas chicas ----------------------------------------------------- */

@media (max-width: 640px) {
  .seccion,
  .portada,
  .cierre { padding-left: var(--e4); padding-right: var(--e4); }

  .pasos li { padding-left: var(--e6); }
  .pasos li::before { font-size: 1.75rem; }
  .pasos li:not(:last-child)::after { left: calc(var(--e4) - 1px); }

  .acciones-cta .boton { width: 100%; justify-content: center; }
}