/* ==========================================================================
   El valle con nombre · el vestido de las páginas de entrada
   --------------------------------------------------------------------------
   La portada y la página de buscar van en claro, como una hoja de papel:
   son el recibidor. El mapa y los visores se quedan de noche, porque encima
   llevan fotos aéreas y sobre fondo claro se apagan.

   Está pensado para leerse cómodo: letra de 17 px para arriba, líneas
   sueltas, botones grandes y un icono con color en cada sitio donde hay
   que pulsar.
   ========================================================================== */
:root {
  --papel:   #f7f3e9;   /* el fondo, hueso */
  --tarjeta: #fffdf7;
  --tinta:   #2b2921;
  --tinta-2: #5d5747;   /* lo secundario */
  --linea:   #e2dac5;
  --oro:     #9a7526;
  --oro-suave:#f0e4c6;
  --musgo:   #57742f;
  --musgo-suave:#e6ecd8;
  --teja:    #a1522c;
  --teja-suave:#f6e3d7;
  --pizarra: #3f5c74;
  --pizarra-suave:#dee8ef;
  --sombra:  0 2px 4px rgba(60,50,25,.05), 0 8px 22px rgba(60,50,25,.07);
  --sombra-alta: 0 4px 8px rgba(60,50,25,.07), 0 14px 34px rgba(60,50,25,.12);
  --curva:   16px;
  --palo: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --serifa: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papel); color: var(--tinta); }
body { font-family: var(--palo); font-size: 17px; line-height: 1.6;
       -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }

.caja { max-width: 1040px; margin: 0 auto; padding: 0 22px; }

/* ------------------------------------------------------------- la cabecera */
header.top { background: var(--papel); border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 20; }
header.top .caja { display: flex; align-items: center; gap: 14px;
  padding-top: 12px; padding-bottom: 12px; }
header.top .marca { font-family: var(--serifa); font-size: 19px; font-weight: 600; }
header.top .marca em { color: var(--oro); font-style: normal; }
header.top .hueco { flex: 1; }

/* --------------------------------------------------------------- botones */
.bt { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  border: 1px solid var(--linea); background: var(--tarjeta); color: var(--tinta);
  border-radius: 12px; padding: 11px 17px; font-size: 16px; white-space: nowrap;
  box-shadow: var(--sombra); }
.bt:hover { border-color: var(--oro); color: var(--oro); }
.bt.fuerte { background: var(--oro); border-color: var(--oro); color: #fffdf7; font-weight: 600; }
.bt.fuerte:hover { background: #886619; border-color: #886619; color: #fffdf7; }
.fl { font-size: 20px; line-height: 0; position: relative; top: -1px; }

/* ---------------------------------------------------------------- titulares */
h1 { font-family: var(--serifa); font-size: 44px; line-height: 1.12; margin: 0 0 14px;
  font-weight: 600; }
h1 em { color: var(--oro); font-style: normal; }
h2 { font-family: var(--serifa); font-size: 27px; margin: 0 0 6px; font-weight: 600; }
.entradilla { color: var(--tinta-2); margin: 0 0 22px; max-width: 640px; font-size: 17px; }
section { padding: 38px 0; scroll-margin-top: 74px; }

/* ------------------------------------------------------------------- pie */
footer { border-top: 1px solid var(--linea); margin-top: 24px; padding: 26px 0 44px;
  font-size: 14.5px; color: var(--tinta-2); }
footer p { margin: 0 0 8px; max-width: 730px; }
footer a:hover { color: var(--oro); }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .caja { padding: 0 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
  header.top .marca { font-size: 16px; }
  section { padding: 26px 0; }
}