/* ============================================================
   AURA · Sistema de diseño
   Única fuente de verdad de color, tipografía y primitivas.
   Se carga ANTES que style.css en todas las páginas.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --crema:      #F0EADC;
  --crema-alt:  #E4DCCB;
  --dorado:     #C09A5E;
  --dorado-alt: #A87F45;
  --oliva:      #3C4035;
  --cacao:      #4A3728;
  --tinta:      #2B2620;
  --linea:      rgba(240, 234, 220, .15);

  /* ---------- Canales ----------
     Los mismos colores de arriba en componentes, para poder darles
     opacidad sin escribir un literal nuevo en ningún lado. */
  --crema-rgb:  240, 234, 220;
  --tinta-rgb:  43, 38, 32;
  --dorado-rgb: 192, 154, 94;
  --papel:      #FFFFFF;      /* sólo impresión */

  /* ---------- Derivados ----------
     No son colores nuevos: son los mismos tonos ajustados para que el
     texto se lea. El dorado base no alcanza el mínimo de contraste ni
     sobre crema ni en cuerpos de texto chicos sobre cacao. */
  --dorado-claro:  #E2CB9F;   /* dorado para texto sobre fondo oscuro */
  --dorado-oscuro: #7A5C2A;   /* dorado para texto sobre fondo claro  */

  /* Un paso más abajo de cada base, para bordes y fondos de segundo nivel */
  --crema-hondo: #D3C8B2;
  --oliva-hondo: #33362C;
  --cacao-hondo: #38291D;

  --tinta-70:  rgba(var(--tinta-rgb), .72);
  --tinta-50:  rgba(var(--tinta-rgb), .52);
  --tinta-18:  rgba(var(--tinta-rgb), .18);
  --tinta-10:  rgba(var(--tinta-rgb), .10);
  --crema-94:  rgba(var(--crema-rgb), .94);
  --crema-75:  rgba(var(--crema-rgb), .75);
  --crema-50:  rgba(var(--crema-rgb), .50);
  --crema-14:  rgba(var(--crema-rgb), .14);
  --crema-03:  rgba(var(--crema-rgb), .03);

  /* Sombras: siempre el tono más oscuro de la paleta */
  --sombra-alta:  0 20px 50px rgba(var(--tinta-rgb), .45);
  --sombra-media: 0 12px 30px rgba(var(--tinta-rgb), .38);
  --sombra-panel: -24px 0 70px rgba(var(--tinta-rgb), .35);

  /* ---------- Tipografía ---------- */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Ritmo y movimiento ---------- */
  --ancho-max: 1240px;
  --gutter:    clamp(20px, 5vw, 72px);
  --aire:      clamp(60px, 9vw, 124px);
  --curva:     cubic-bezier(.22, .8, .28, 1);
}

/* ============================================================
   Base
   ============================================================ */

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 6.4vw, 78px); }
h2 { font-size: clamp(30px, 4.6vw, 56px); }
h3 { font-size: clamp(24px, 3.2vw, 38px); }
h4 { font-size: clamp(19px, 2.2vw, 25px); line-height: 1.2; }

/* ============================================================
   Primitivas
   ============================================================ */

/* Pastilla dorada: la acción principal en toda la página */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--dorado);
  color: var(--tinta);
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s var(--curva), color .25s var(--curva),
              border-color .25s var(--curva), transform .2s var(--curva);
}
.btn-pill:hover { background: var(--dorado-claro); }
.btn-pill:active { transform: translateY(1px); }

.btn-pill--linea {
  background: transparent;
  border-color: var(--linea);
  color: var(--crema);
}
.btn-pill--linea:hover { background: var(--crema); color: var(--tinta); border-color: var(--crema); }

.btn-pill--tinta {
  background: transparent;
  border-color: var(--tinta-18);
  color: var(--tinta);
}
.btn-pill--tinta:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

.btn-pill--sm { padding: 11px 24px; font-size: 13px; }

/* Corte a sangre completa: la sección ocupa todo el ancho de la ventana
   y sólo su contenido respeta el gutter. */
.seccion {
  width: 100%;
  padding-block: var(--aire);
  padding-inline: var(--gutter);
}
.seccion > * {
  max-width: var(--ancho-max);
  margin-inline: auto;
}

/* Sin modificador, la sección hereda el crema del body */
.seccion--oliva { background: var(--oliva); color: var(--crema); }
.seccion--cacao { background: var(--cacao); color: var(--crema); }