/* ==========================================================================
   GELÉE — base.css
   Tokens de diseño, reset, tipografía y utilidades compartidas.
   Mobile-first: todo se escribe para 390px y escala hacia arriba.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --crema:        #FBF7F2;  /* fondo del sitio */
  --blanco:       #FFFFFF;  /* tarjetas */
  --marca:        #A27572;  /* rosa de marca, único acento fuerte */
  --marca-oscuro: #7E5451;  /* hover, estado activo y enlaces de texto */
  --rosa:         #F2DCD5;  /* secciones alternas */
  --texto:        #2E241E;
  --texto-suave:  #6B5B52;
  --linea:        #E7DCD3;

  /* El rosa de marca es demasiado suave para señalar un error, así que la
     validación tiene su propio rojo. Es el único lugar donde se usa. */
  --error:        #A6402A;

  /* Espaciado — múltiplos de 8 */
  --esp-8:  8px;
  --esp-16: 16px;
  --esp-24: 24px;
  --esp-32: 32px;
  --esp-40: 40px;
  --esp-48: 48px;
  --esp-56: 56px;
  --esp-64: 64px;
  --esp-72: 72px;
  --esp-80: 80px;
  --esp-88: 88px;
  --esp-96: 96px;

  /* Aire entre secciones: 64 en móvil, 96 en escritorio */
  --aire-seccion: var(--esp-64);

  /* Radios — 6px es el techo para cajas, botones y campos.
     Las fotos son la excepción: 12px para que el recorte se vea más suave. */
  --radio:       6px;
  --radio-chico: 4px;
  --radio-foto:  12px;

  /* Tipografía. Playfair Display retoma la serif de alto contraste del
     logotipo; Lora es la de lectura, del mismo aire que Times New Roman
     pero dibujada para pantalla. */
  --fuente-titulo: "Playfair Display", "Times New Roman", Georgia, serif;
  --fuente-cuerpo: "Lora", "Times New Roman", Georgia, serif;

  /* Playfair pinta más grande que la serif anterior con el mismo px, así que
     la escala baja un punto para que los títulos ocupen lo mismo que antes. */
  --t-h1:     clamp(2.00rem, 1.55rem + 1.80vw, 3.00rem);
  --t-h2:     clamp(1.50rem, 1.28rem + 0.90vw, 2.05rem);
  --t-h3:     clamp(1.1875rem, 1.11rem + 0.35vw, 1.375rem);
  --t-cuerpo: 1rem;      /* 16px mínimo */
  --t-lead:   1.0625rem; /* 17px, párrafo de entrada */
  --t-chico:  0.875rem;  /* 14px */
  --t-nav:    0.9375rem; /* 15px, links de escritorio */
  --t-micro:  0.6875rem; /* 11px, etiquetas de la barra inferior */

  /* Layout */
  --ancho-max:      1120px;
  --ancho-lectura:  62ch;
  --margen-lateral: var(--esp-24);

  /* Onda que separa el contenido del footer */
  --onda-alto: 40px;

  /* Alturas de navegación */
  --barra-alto:   64px; /* barra inferior, móvil */
  --barra-margen: 12px; /* separación de la píldora respecto a los bordes */
  --header-alto: 72px; /* header superior, escritorio */

  /* Movimiento — solo color y transform, 150-200ms */
  --transicion: 160ms ease;

  /* Sombras. Solo dos en todo el proyecto: la de las tarjetas de producto y
     la de la barra móvil, que necesita separarse del contenido que pasa
     por debajo al desplazar. */
  --sombra-tarjeta: 0 1px 2px rgba(46, 36, 30, 0.05);
  --sombra-barra:   0 6px 24px rgba(46, 36, 30, 0.13);
}

@media (min-width: 900px) {
  :root {
    --aire-seccion:   var(--esp-96);
    --margen-lateral: var(--esp-32);
  }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4, p,
figure, blockquote,
dl, dd,
ul, ol { margin: 0; }

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. Tipografía
   -------------------------------------------------------------------------- */
body {
  background-color: var(--crema);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.6;          /* interlineado normal de lectura */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* Sin tracking negativo: el logotipo abre las letras, no las junta. */
h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }

h2 { font-size: var(--t-h2); }

h3 { font-size: var(--t-h3); }

p { max-width: var(--ancho-lectura); }
p + p { margin-top: var(--esp-16); }

a {
  color: var(--marca-oscuro);
  text-underline-offset: 3px;
  transition: color var(--transicion);
}

a:hover { color: var(--marca); }

strong { font-weight: 500; }

/* Antetítulo / etiqueta de sección */
.etiqueta {
  font-family: var(--fuente-cuerpo);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: 1.4;
}

.lead {
  font-size: var(--t-lead);
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion { padding-block: var(--aire-seccion); }

.seccion--rosa   { background-color: var(--rosa); }
.seccion--blanca { background-color: var(--blanco); }

/* El main empuja el footer hasta abajo */
.sitio-main { flex: 1 0 auto; }

/* Título de sección corto: el centrado se reserva para esto y para el hero */
.seccion-titulo {
  text-align: center;
  margin-bottom: var(--esp-40);
}

/* El texto largo siempre va a la izquierda */
.prosa {
  text-align: left;
  max-width: var(--ancho-lectura);
}

/* --------------------------------------------------------------------------
   5. Componentes base
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  min-height: 48px;
  padding: 12px var(--esp-24);
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-cuerpo);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}

.btn:active { transform: translateY(1px); }

.btn--primario {
  background-color: var(--marca);
  color: var(--blanco);
}

.btn--primario:hover {
  background-color: var(--marca-oscuro);
  color: var(--blanco);
}

.btn--linea {
  background-color: transparent;
  border-color: var(--marca);
  color: var(--marca);
}

.btn--linea:hover {
  background-color: var(--marca);
  color: var(--blanco);
}

.tarjeta {
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--esp-24);
}

/* Única excepción de sombra */
.tarjeta--producto { box-shadow: var(--sombra-tarjeta); }

.regla {
  height: 1px;
  border: 0;
  background-color: var(--linea);
  margin-block: var(--esp-32);
}

/* Placeholder visible para contenido que todavía no existe */
.pendiente {
  margin-top: var(--esp-24);
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  padding: var(--esp-24);
  color: var(--texto-suave);
  font-size: var(--t-chico);
  text-align: left;
}

/* --------------------------------------------------------------------------
   6. Accesibilidad
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--radio-chico);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salto-contenido {
  position: absolute;
  left: var(--esp-8);
  top: -100px;
  z-index: 100;
  background-color: var(--blanco);
  color: var(--marca);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 10px var(--esp-16);
  font-size: var(--t-chico);
  font-weight: 500;
  text-decoration: none;
}

.salto-contenido:focus { top: var(--esp-8); }

/* En escritorio el header es sticky: los anclajes no deben quedar debajo */
@media (min-width: 900px) {
  [id] { scroll-margin-top: calc(var(--header-alto) + var(--esp-16)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}