/* Cimientos: variables, las dos paletas, tipografía y lo que usa todo el sitio.
   El orden de los <link> en index.html es la cascada; las variables viven acá y
   en ningún otro lado, así la paleta oscura es un bloque y no una copia del
   sitio entero. */

/* La paleta sale de la identidad que Luca ya usa en Instagram y en su logo:
   verde bosque, verde hoja, un verde brote para los detalles y texto crema. Así
   quien llega desde un posteo reconoce el sitio de entrada. */
:root {
  /* Colores, con nombres de para qué sirven y no de qué color son: cambiar la
     paleta es reescribir estos valores, no buscar «verde» por todo el CSS. */
  --fondo: #f5efe2;
  --fondo-alto: #fffaf0;
  --texto: #12291d;
  --texto-suave: #435a4b;
  --acento: #244737;
  --acento-fuerte: #091f13;
  --acento-contraste: #f5efe2;
  --borde: #ddd2bb;
  --foco: #2f6b3e;
  --sombra: 0 1px 2px rgb(9 31 19 / 10%), 0 10px 28px rgb(9 31 19 / 12%);

  /* Las láminas oscuras —el hero, las tarjetas, el contacto— son iguales en los
     dos temas: son la marca, y el texto crema sobre verde bosque se lee igual de
     bien con el sistema claro que con el oscuro. */
  --panel: #244737;
  --panel-texto: #e8d6b8;
  --panel-suave: #cfc7b0;
  --panel-acento: #a3ce84;
  --panel-acento-fuerte: #dff69e;
  --panel-contraste: #091f13;
  --panel-borde: #3b6150;

  /* La franja verde hoja de detrás de las láminas. Sólo lleva texto oscuro: el
     crema sobre este verde no llega al contraste mínimo. */
  --banda: #639863;
  --banda-texto: #091f13;

  --pie: #091f13;

  /* Espaciado, en una escala corta: elegir entre seis valores es más rápido y
     sale más parejo que inventar un número cada vez. */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 1rem;
  --e-4: 1.5rem;
  --e-5: 2.5rem;
  --e-6: 4rem;

  --radio: 0.75rem;
  --radio-grande: 1.75rem;
  /* La curva de las láminas, como el arco de los posteos. Crece con la
     pantalla pero nunca se come el texto: el relleno vertical la cubre. */
  --curva: clamp(3rem, 20vw, 16rem);
  --ancho-max: 68rem;
  --margen: var(--e-3);
  --alto-barra: 3.5rem;

  /* Sin fuentes externas: ningún pedido a un tercero, nada que esperar y
     ningún dato del visitante fuera del sitio. Las del sistema ya se ven bien. */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* La paleta oscura redefine los mismos nombres: el verde casi negro del fondo
   del logo en lugar del papel crema. Nada de negro y blanco puros: el texto
   blanco sobre negro deja un halo que cansa al leer. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #091f13;
    --fondo-alto: #0f2a1d;
    --texto: #e8d6b8;
    --texto-suave: #b8c1ad;
    --acento: #a3ce84;
    --acento-fuerte: #dff69e;
    --acento-contraste: #091f13;
    --borde: #2b4135;
    --foco: #dff69e;
    --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);

    /* El verde hoja encandila de noche: la franja pasa a un verde apagado y el
       texto de encima, a crema. */
    --banda: #1b3a2a;
    --banda-texto: #e8d6b8;
  }
}

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

html {
  /* Con la barra fija, sin esto el título de la sección queda tapado al llegar
     desde un ancla. Es la trampa número uno de una página de una sola hoja. */
  scroll-padding-top: calc(var(--alto-barra) + var(--e-3));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 var(--e-3);
}

/* Tamaños fluidos: dos breakpoints alcanzan para el resto del sitio. */
h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p {
  margin: 0 0 var(--e-3);
}

a {
  color: var(--acento);
}

a:hover {
  color: var(--acento-fuerte);
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Foco visible en todo lo que se pueda enfocar. Nunca quitar el contorno sin
   poner otra cosa en su lugar: es lo único que ve quien navega con teclado. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}

.contenedor {
  width: min(100% - 2 * var(--margen), var(--ancho-max));
  margin-inline: auto;
  /* El notch del celular se come el borde si no se lo tiene en cuenta. Hace
     falta `viewport-fit=cover` en el <meta viewport> para que esto valga algo. */
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}

/* Primer elemento de la página: aparece sólo al llegar con el teclado, y evita
   tener que tabular la barra entera en cada visita. */
.saltar-al-contenido {
  position: absolute;
  left: var(--e-3);
  top: -4rem;
  z-index: 100;
  padding: var(--e-2) var(--e-3);
  background: var(--fondo-alto);
  color: var(--texto);
  border: 2px solid var(--foco);
  border-radius: var(--radio);
  text-decoration: none;
  transition: top 120ms ease-out;
}

.saltar-al-contenido:focus-visible {
  top: var(--e-2);
}

@media (prefers-reduced-motion: reduce) {
  .saltar-al-contenido {
    transition: none;
  }
}

.boton {
  display: inline-block;
  padding: var(--e-2) var(--e-4);
  /* 44 px de alto mínimo: es el tamaño de un dedo, y vale para todos los
     controles del sitio. */
  min-height: 2.75rem;
  border: 1px solid var(--borde);
  /* Redondeados del todo, como los círculos y arcos de la marca. */
  border-radius: 999px;
  background: var(--fondo-alto);
  color: var(--texto);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover {
  border-color: var(--acento);
  color: var(--acento-fuerte);
}

/* Apagado: sin `href` no se puede tocar ni tabular, y esto lo hace evidente.
   Lo usa el botón de los descuentos cuando todavía no hay ninguno. */
.boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

.boton[aria-disabled="true"]:hover {
  border-color: var(--borde);
  background: var(--acento);
  color: var(--acento-contraste);
}

/* Para el botón que cierra una pantalla entera, como el de la calculadora. */
.boton--grande {
  padding: var(--e-3) var(--e-5);
  min-height: 3.25rem;
  font-size: 1.15rem;
}

/* Botón redondo con dibujo y sin texto. Lo que dice va en aria-label: la
   forma se entiende de un vistazo, pero un lector de pantalla necesita el
   nombre. */
.boton--icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  min-height: 3.5rem;
  padding: 0;
  border-radius: 50%;
}

.boton__dibujo {
  width: 1.6rem;
  height: 1.6rem;
}

.boton--principal {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-contraste);
  font-weight: 700;
}

.boton--principal:hover {
  background: var(--acento-fuerte);
  border-color: var(--acento-fuerte);
  color: var(--acento-contraste);
}

/* Lámina oscura: adentro, los mismos nombres de variables apuntan a los
   colores del panel, así botones, enlaces y foco se acomodan solos sin una
   regla más por cada uno. */
.panel {
  --texto: var(--panel-texto);
  --texto-suave: var(--panel-suave);
  --acento: var(--panel-acento);
  --acento-fuerte: var(--panel-acento-fuerte);
  --acento-contraste: var(--panel-contraste);
  --fondo-alto: var(--panel);
  --borde: var(--panel-borde);
  --foco: var(--panel-acento-fuerte);
  background: var(--panel);
  color: var(--texto);
}

/* Para lo que tiene que leer un lector de pantalla pero no se muestra. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}