/* Tipografías alojadas en el propio sitio (SIL Open Font License 1.1, ver fuentes/OFL-*.txt): sin terceros ni rastreo.
   Fuentes variables, solo el juego latino (incluye á é í ó ú ñ ü ¿ ¡). */
@font-face {
  font-family: 'Figtree';
  src: url('../fuentes/figtree.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fuentes/fraunces.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Fono en Casa — tokens de marca y base compartida (landing, portal y requerimientos).
   Colores tomados de las piezas gráficas: verde bosque, terracota, salvia, ocre y crema papel.
   --crema es el fondo exacto de las ilustraciones (#F9F6F1): úsalo detrás de ellas para que se fundan. */

:root {
  --crema: #F9F6F1;
  --crema-2: #F1EBE1;
  --papel: #FFFDF9;

  --verde: #21493A;
  --verde-2: #2D624C;
  --verde-3: #163428;

  --salvia: #9DB59A;
  --salvia-2: #C9D8C4;
  --salvia-3: #E4ECE0;

  --terracota: #C4653F;          /* solo texto grande o decoración */
  --terracota-texto: #A9522F;    /* texto chico sobre crema (AA) */
  --terracota-boton: #B5552F;    /* fondo de botón con texto blanco (AA) */
  --terracota-3: #F6E2D8;

  --ocre: #D9A04F;
  --ocre-3: #F7EAD3;

  --tinta: #23302A;
  --tinta-2: #4E5C55;
  --linea: #E4DDD1;

  --sombra-1: 0 1px 2px rgba(35, 48, 42, .06), 0 4px 14px rgba(35, 48, 42, .06);
  --sombra-2: 0 2px 4px rgba(35, 48, 42, .05), 0 18px 44px rgba(35, 48, 42, .11);

  --radio-s: 12px;
  --radio: 20px;
  --radio-l: 30px;

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --ancho: 1160px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.08;
  color: var(--verde);
  margin: 0 0 .5em;
  letter-spacing: -.012em;
  font-variation-settings: "SOFT" 50;
}

p { margin: 0 0 1em; }
a { color: var(--verde); }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; }

.saltar {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--verde); color: var(--crema); padding: .7em 1.1em; border-radius: 999px; font-weight: 700;
}
.saltar:focus { left: 16px; }

.sobretitulo {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--terracota-texto); margin: 0 0 1rem;
}

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.ico { width: 1.2em; height: 1.2em; flex: none; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: 600 1rem/1.1 var(--f-texto);
  padding: .9em 1.5em; min-height: 50px;
  border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; pointer-events: none; }

.boton--primario { background: var(--verde); color: var(--crema); box-shadow: 0 6px 18px rgba(33, 73, 58, .22); }
.boton--primario:hover { background: var(--verde-2); box-shadow: 0 10px 24px rgba(33, 73, 58, .28); }

.boton--secundario { background: transparent; color: var(--verde); border-color: var(--verde); }
.boton--secundario:hover { background: var(--salvia-3); }

.boton--terracota { background: var(--terracota-boton); color: #fff; box-shadow: 0 6px 18px rgba(181, 85, 47, .25); }
.boton--terracota:hover { background: #A24A27; }

.boton--suave { background: var(--salvia-3); color: var(--verde); }
.boton--suave:hover { background: var(--salvia-2); }

.boton--crema { background: var(--crema); color: var(--verde); }
.boton--crema:hover { background: #fff; }

.boton--chico { padding: .65em 1.1em; min-height: 42px; font-size: .95rem; }

/* Aviso flotante (toast) */
.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  transform: translate(-50%, 160%);
  max-width: calc(100% - 32px);
  background: var(--verde-3); color: var(--crema);
  padding: 13px 20px; border-radius: 14px; font-weight: 600; font-size: .98rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.aviso.visible { transform: translate(-50%, 0); }
.aviso--error { background: #8E3B28; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}