/* Estilo PROVISIONAL de Tu Casa Celeste (T80).
   Fuente de colores y contrastes: 04-diseno/identidad-v3.md §4 y §5.
   Regla: el oro y la arena NUNCA para texto sobre marfil (contraste < 4,5:1). */

@font-face {
  font-family: "Spectral";
  src: url("fuentes/Spectral-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fuentes/CormorantGaramond-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Paleta (identidad-v3 §4) */
  --marfil: #f3ead6;       /* fondo */
  --azul-noche: #132b3a;   /* texto y títulos, 12,24:1 */
  --petroleo: #17483f;     /* títulos y etiquetas, 8,62:1 */
  --terracota: #b75d46;    /* solo títulos ≥ 24 px o adornos, 3,76:1 */
  --ciruela: #39283c;      /* títulos, 11,38:1 */
  --oro: #b58a4d;          /* líneas y detalles, no texto */
  --arena: #d7b77e;        /* brillos; texto solo sobre fondo oscuro */
  --tinta: #1c2021;        /* texto largo, 13,73:1 */

  /* Letras (provisionales: identidad-v3 §6 aún pendiente) */
  --letra-texto: "Spectral", Georgia, "Times New Roman", serif;
  --letra-titulos: "Cormorant Garamond", Georgia, serif;

  /* Medidas: móvil primero */
  --ancho-max: 34rem;
  --hueco: 1rem;
  --radio: 0.6rem;
  --boton-alto: 3.25rem;
}

* { box-sizing: border-box; }

html { font-size: 112.5%; }

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--letra-texto);
  line-height: 1.55;
}

.pagina {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: calc(var(--hueco) * 2) var(--hueco);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--letra-titulos);
  font-weight: 600;
  color: var(--azul-noche);
  line-height: 1.15;
}

h1 { font-size: 2.2rem; margin: 0.5rem 0; }

.filete {
  border: 0;
  border-top: 1px solid var(--oro);
  margin: 1.5rem auto;
  width: 40%;
}

.boton {
  display: block;
  width: 100%;
  min-height: var(--boton-alto);
  border: 0;
  border-radius: var(--radio);
  background: var(--azul-noche);
  color: var(--marfil);
  font: 600 1.1rem var(--letra-texto);
  text-align: center;
  text-decoration: none;
  padding: 0.8rem 1rem;
}

.boton:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

.logo { display: block; width: min(16rem, 80%); height: auto; margin: 1rem auto; }

.centro { text-align: center; }

.nota { font-size: 0.85rem; color: var(--petroleo); }

.pie {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.8rem;
  color: var(--azul-noche);
  text-align: center;
}