/* Variables, reset y tipografía. Cambiar la paleta = editar este bloque.
   Los nombres son semánticos a propósito: en /resto/ estos mismos tokens se
   invierten a modo noche (ver css/resto.css), y un token llamado --fondo con
   valor oscuro sería una mentira. */
:root {
  /* Superficies y texto */
  --fondo: #f3efe8;
  --fondo-hundido: #eae4d9;
  --fondo-rgb: 243 239 232;          /* el mismo --fondo, para transparencias */
  --texto: #191512;
  --texto-suave: rgb(25 21 18 / 0.62);
  --texto-tenue: rgb(25 21 18 / 0.38);
  --borde: rgb(25 21 18 / 0.14);

  /* Acento. --acento es relleno; --acento-texto es el que se lee.
     Se separan porque sobre fondo oscuro el terracota de relleno no
     tiene contraste suficiente como texto. */
  --acento: #c2542f;
  --acento-fuerte: #98411f;
  --acento-texto: #c2542f;
  --acento-texto-fuerte: #98411f;
  --sobre-acento: #f3efe8;           /* texto sobre relleno de acento: crema siempre */
  --verde: #2f6b4f;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --radio: 14px;
  --radio-chico: 9px;
  --ancho-max: 1080px;
  --espacio-seccion: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Nada con ancho propio puede desbordar a lo ancho. Un <img> o un <canvas> con
   atributo width traen sus pixeles puestos —el lienzo del café son 480— y en un
   teléfono de 390 eso mete scroll horizontal en toda la página. */
img, canvas, video, svg { max-width: 100%; }

html { scroll-behavior: smooth; }

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

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(40px, 11vw, 76px); }
h2 { font-size: clamp(28px, 6.5vw, 40px); }
h3 { font-size: 21px; }

a { color: var(--acento-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acento-texto-fuerte); }

:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 3px; border-radius: 4px; }

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

.seccion { padding: var(--espacio-seccion) 0; }
.seccion--hundida { background: var(--fondo-hundido); }
.seccion__titulo { margin-bottom: 10px; }
.seccion__bajada { color: var(--texto-suave); max-width: 60ch; margin-bottom: 34px; }

.dato { font-family: var(--mono); font-size: 13px; }
.etiqueta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texto-tenue);
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 99px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.boton--primario { background: var(--acento); color: var(--sobre-acento); }
.boton--primario:hover { background: var(--acento-fuerte); color: var(--sobre-acento); }
.boton--secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton--secundario:hover { background: rgba(25, 21, 18, 0.05); color: var(--texto); }

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

/* —— Firma de quien hizo el sitio ——————————————————————————————————————————
   Va al final de las tres paginas (portal, resto, hostal). Hereda el color del
   pie que la contiene, asi sirve sobre el crema del portal y sobre el negro del
   pie del resto sin dos versiones. El logo es un PNG chico con fondo
   transparente; tiene el tamano puesto en el HTML para que no haya salto de
   layout mientras carga. */
.firma-cs {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-decoration: none; color: inherit; opacity: 0.62;
  transition: opacity 0.2s ease;
}
.firma-cs:hover, .firma-cs:focus-visible { opacity: 1; }
.firma-cs img { width: 26px; height: auto; display: block; }