/* =========================================================
   Fundación Roger Claessens — hoja de estilo institucional

   La identidad procede del vídeo de presentación de la Fundación:
   logotipo caligráfico + serif en versalitas con tracking amplio, sobre una
   paleta cálida de arena, cal y madera. Sin dependencias externas.
   ========================================================= */

/* ---------- Copperplate Gothic licenciada (pendiente) ----------
   Cuando se compre la licencia web, deja los .woff2 en assets/fonts/,
   descomenta este bloque y añade "Copperplate Gothic Web" al principio de
   --font-display. No hay que tocar nada más.

@font-face {
  font-family: "Copperplate Gothic Web";
  src: url("../fonts/copperplate-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Copperplate Gothic Web";
  src: url("../fonts/copperplate-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Copperplate Gothic Web";
  src: url("../fonts/copperplate-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
---------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Paleta tomada del vídeo: cal, arena, madera y sombra cálida */
  --lime-50:  #FAF7F1;   /* cal / encalado */
  --lime-100: #F4EEE3;
  --sand-200: #E9DFCC;
  --sand-300: #D6C7AC;
  --wood-500: #A9762F;   /* madera / miel */
  --wood-600: #8A5F23;
  --wood-700: #7A5A33;
  --wood-800: #5E4425;
  --ink-900:  #1F1B15;
  --ink-600:  #6B6357;

  /* Roles semánticos (modo claro) */
  --bg:            var(--lime-50);
  --bg-soft:       var(--lime-100);
  --bg-inset:      #FFFFFF;
  --border:        var(--sand-200);
  --border-strong: var(--sand-300);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-600);
  --brand:         var(--wood-700);
  --brand-strong:  var(--wood-800);
  --brand-soft:    #EFE4D2;
  --accent:        var(--wood-500);
  --accent-strong: var(--wood-600);
  --accent-soft:   #F7ECDA;
  --on-brand:      #FFFDF9;

  --shadow-sm: 0 1px 2px rgba(56, 44, 28, .05), 0 1px 3px rgba(56, 44, 28, .06);
  --shadow-md: 0 4px 12px rgba(56, 44, 28, .07), 0 14px 34px rgba(56, 44, 28, .08);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --container: 1120px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  /* Titulares: Copperplate Gothic, la fuente de la marca. Es un tipo capitular —
     sus minúsculas son versalitas—, así que el texto se escribe en capitalización
     normal y la fuente hace el resto, igual que en el logotipo.
     Donde no esté instalada, el serif de respaldo simula el efecto con
     font-variant-caps: small-caps. */
  /* Al licenciar la fuente, añade "Copperplate Gothic Web" delante de Copperplate. */
  --font-display: Copperplate, "Copperplate Gothic", "Copperplate Gothic Light",
                  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* Serif de lectura: para citas y textos largos, donde las capitales cansan. */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #16130E;
    --bg-soft:       #1D1913;
    --bg-inset:      #232019;
    --border:        #332D24;
    --border-strong: #443C30;
    --text:          #EFE8DC;
    --text-muted:    #A79E90;
    --brand:         #D9AE72;
    --brand-strong:  #EDC894;
    --brand-soft:    #2A2117;
    --accent:        #E0B87E;
    --accent-strong: #EFCF9C;
    --accent-soft:   #2C2318;
    --on-brand:      #1A140C;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .3);
  }
}

/* ---------- Reset ligero ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Copperplate es capitular: no tiene descendentes, así que admite un interlineado
   más ceñido y pesos ligeros en tamaños grandes.

   El tracking está calibrado contra el logotipo: la Copperplate de macOS tiene las
   letras más estrechas que el corte del vídeo, así que con el tracking amplio que
   pide normalmente una capitular quedaba mucho más aireada que la marca. Con .02em
   el ritmo entre letra y hueco se aproxima al del logotipo. Si algún día se licencia
   la fuente original, habrá que volver a subirlo (~.04em). */
h1, h2, h3 {
  font-family: var(--font-display);
  font-variant-caps: small-caps;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: .02em;
  margin: 0 0 .7em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2.6rem); font-weight: 400; }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem); }
h3 { font-size: clamp(1.05rem, .98rem + .45vw, 1.22rem); font-weight: 700; letter-spacing: .035em; }
h4 { font-size: 1.0625rem; font-family: var(--font-sans); font-weight: 650; letter-spacing: 0; margin: 0 0 .6em; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.15em; }
p { text-wrap: pretty; }
li + li { margin-top: .35em; }

a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-strong); }

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }

small { font-size: .875rem; }

::selection { background: var(--brand-soft); color: var(--text); }

/* ---------- Rótulos: mayúsculas, no versalitas ----------
   Los titulares sí van en versalitas, como el logotipo. Los rótulos pequeños
   —antetítulos, cargos, fechas, epígrafes del pie— no: a ese cuerpo la versalita
   se queda en unos 8 px de altura efectiva y cuesta leerla, sobre todo en el color
   de acento. Van en mayúsculas completas, con un cuerpo algo menor y algo menos de
   tracking para compensar que las capitales ocupan más. */

.eyebrow {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-variant-caps: normal;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent-strong);
  margin-bottom: 1rem;
}

.smallcaps {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-variant-caps: normal;
  font-size: .88rem;
  letter-spacing: .13em;
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 44rem; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--soft { background: var(--bg-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--on-brand);
  padding: .75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Cabecera ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.75rem;
}

/* El logotipo se pinta como máscara para que herede el color del tema:
   un único archivo sirve para el modo claro y el oscuro. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-inline-end: auto;
}
/* La imagen de máscara se declara en el atributo style del elemento: dentro de una
   variable CSS, url() se resolvería respecto a esta hoja de estilo y no respecto a
   la página, lo que rompería las rutas relativas de /en/. */
.brand__mark {
  display: block;
  width: 11.5rem;
  max-width: 100%;
  aspect-ratio: 760 / 328;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.nav { display: flex; align-items: center; gap: .15rem; min-width: 0; }
.nav a {
  display: inline-block;
  padding: .5rem .6rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--bg-soft); color: var(--brand); }
.nav a[aria-current="page"] {
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.header__actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: .78rem;
  letter-spacing: .04em;
}
.lang-switch a, .lang-switch span {
  padding: .3rem .65rem;
  text-decoration: none;
  color: var(--text-muted);
}
.lang-switch [aria-current="true"] { background: var(--brand); color: var(--on-brand); font-weight: 600; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .8rem .25rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: none; }
}

@media (max-width: 560px) {
  /* Las capitulares con tracking amplio ocupan mucho: en móvil se aprieta el
     antetítulo para que no se parta en dos líneas. */
  .eyebrow { font-size: .78rem; letter-spacing: .1em; }
  h1 { letter-spacing: .012em; }

  .site-header__inner { gap: .7rem; min-height: 4.25rem; }
  .brand__mark { width: 8.5rem; }
  .header__actions { gap: .4rem; }
  .lang-switch { font-size: .72rem; }
  .lang-switch a, .lang-switch span { padding: .28rem .5rem; }
  .nav-toggle { width: 2.4rem; height: 2.4rem; }
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }

.btn--accent { background: var(--accent-strong); color: #FFFDF9; }
.btn--accent:hover { background: var(--brand-strong); color: #FFFDF9; }

.btn--ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-soft); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Portada ---------- */

/* La fotografía procede de un vídeo 1080p. A sangre sobre una pantalla ancha había
   que ampliarla y se veía blanda, y el velo oscuro que hacía falta para leer el
   titular encima la ensuciaba todavía más. Contenida a media columna se muestra
   por debajo de su resolución nativa, así que se ve nítida, y el texto va sobre el
   fondo claro de la marca. */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(58rem 38rem at 88% -8%, var(--brand-soft) 0%, transparent 60%),
    radial-gradient(42rem 30rem at -5% 105%, var(--accent-soft) 0%, transparent 58%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 7vw, 5.5rem);
}
.hero__text { max-width: 34rem; }
.hero h1 { margin-bottom: .45em; }

.hero__figure { margin: 0; position: relative; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hero__figure figcaption {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding-top: .7rem;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero__figure img { aspect-ratio: 4 / 3; }
}

.lede {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 42ch;
}


/* ---------- Figuras y fotografía ---------- */

figure { margin: 0; }

.figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption {
  font-size: .82rem;
  color: var(--text-muted);
  padding: .6rem .1rem 0;
}
/* Vídeo de presentación, autoalojado */
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: var(--radius);
  background: var(--ink-900);
  box-shadow: var(--shadow-md);
}

.figure--tall { aspect-ratio: 4 / 5; }
.figure--square { aspect-ratio: 1 / 1; }
.figure--wide { aspect-ratio: 16 / 9; }
.figure--band { aspect-ratio: 21 / 8; }

/* Tarjeta con fotografía arriba */
.photo-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.photo-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-soft); }
.photo-card__media img { width: 100%; height: 100%; object-fit: cover; }
.photo-card__body { padding: 1.35rem 1.5rem 1.6rem; }
.photo-card__body > :last-child { margin-bottom: 0; }
.photo-card h3 { font-family: var(--font-sans); font-size: 1.08rem; font-weight: 650;
  letter-spacing: 0; font-variant-caps: normal; }
.photo-card p { color: var(--text-muted); font-size: .97rem; margin-bottom: 0; }

a.photo-card { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.photo-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }

/* ---------- Rejillas y tarjetas ---------- */

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.card > :last-child { margin-bottom: 0; }
.card__icon { width: 2.1rem; height: 2.1rem; color: var(--accent-strong); margin-bottom: .9rem; }
.card h3 { font-family: var(--font-sans); font-size: 1.08rem; font-weight: 650;
  letter-spacing: 0; font-variant-caps: normal; }
.card p { color: var(--text-muted); font-size: .97rem; margin-bottom: 0; }

.card--link { text-decoration: none; color: inherit; display: block; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card--link:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }

/* Lista numerada de líneas de actuación */
.actions { counter-reset: action; display: grid; gap: 1rem; padding: 0; list-style: none; }
.actions li {
  counter-increment: action;
  position: relative;
  padding: 1.25rem 1.4rem 1.25rem 3.9rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0;
}
.actions li::before {
  content: counter(action, decimal-leading-zero);
  position: absolute;
  left: 1.35rem;
  top: 1.3rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent-strong);
  font-weight: 600;
}
.actions h3 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 650;
  margin-bottom: .3em; letter-spacing: 0; font-variant-caps: normal; }
.actions p { margin: 0; color: var(--text-muted); font-size: .97rem; }

/* Patronato */
.people { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; padding: 0; }
.people li { margin: 0; }
.person {
  height: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.person__avatar {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
/* Retrato: mismo círculo, con la cara encuadrada arriba */
.person__avatar--foto {
  object-fit: cover;
  object-position: center 22%;
  background: var(--bg-soft);
}
.person__name { font-weight: 650; margin-bottom: .1rem; }
.person__role {
  color: var(--accent-strong);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
}

/* Cifras */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); list-style: none; padding: 0; }
.stats li { margin: 0; }
.stat__value { font-family: var(--font-display); letter-spacing: .015em; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); color: var(--brand); line-height: 1.1; }
.stat__label { color: var(--text-muted); font-size: .93rem; }

/* Bloque destacado */
.callout {
  border-inline-start: 3px solid var(--accent);
  background: var(--bg-soft);
  padding: 1.35rem 1.6rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout > :last-child { margin-bottom: 0; }

/* Las citas de los Estatutos son párrafos largos: van en el serif de lectura,
   no en la capitular. */
.quote {
  font-family: var(--font-serif);
  font-variant-caps: normal;
  letter-spacing: 0;
  font-size: clamp(1.15rem, 1.02rem + .7vw, 1.5rem);
  line-height: 1.5;
  color: var(--text);
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

/* Definiciones / datos */
.datalist { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .55rem 1.5rem; margin: 0; }
.datalist dt { color: var(--text-muted); font-size: .93rem; }
.datalist dd { margin: 0; }
@media (max-width: 620px) {
  .datalist { grid-template-columns: 1fr; gap: .1rem; }
  .datalist dd { margin-bottom: .8rem; }
}

/* Cronología */
.timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--border); }
.timeline li { position: relative; margin: 0; padding: 0 0 1.9rem 1.75rem; }
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  top: .45rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline__date {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
}
.timeline__title { font-weight: 650; }
.timeline p { margin: .15rem 0 0; color: var(--text-muted); font-size: .97rem; }

/* Aviso de contenido pendiente (no debe llegar a producción) */
.pending {
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: .93rem;
  color: var(--text);
}
.pending strong { color: var(--accent-strong); }

/* CTA final sobre fotografía */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  text-align: center;
  color: #FFFDF9;
  background: var(--ink-900);
}
.cta-band__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28, 22, 14, .78), rgba(28, 22, 14, .86));
}
.cta-band h2 { color: #FFFDF9; }
.cta-band p { color: rgba(255, 253, 249, .82); max-width: 48ch; margin-inline: auto; }
.cta-band .btn--ghost { border-color: rgba(255, 253, 249, .5); color: #FFFDF9; }
.cta-band .btn--ghost:hover { background: rgba(255, 253, 249, .14); border-color: #FFFDF9; color: #FFFDF9; }
.cta-band .btn--accent { background: #FFFDF9; color: var(--wood-800); }
.cta-band .btn--accent:hover { background: #FFFDF9; color: var(--wood-800); }
.cta-band .btn-row { justify-content: center; }

/* Formulario */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .92rem; font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text);
  width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field__hint { font-size: .85rem; color: var(--text-muted); }
.checkbox { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.checkbox input { width: auto; margin-top: .25rem; }

/* Pie */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  font-size: .94rem;
}
.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  margin-bottom: 2.25rem;
}

@media (max-width: 900px) {
  /* Dos columnas, con el bloque de marca ocupando la fila entera */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer__about { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
.footer__grid h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--text-muted);
  margin-bottom: .9rem;
}
.footer__grid ul { list-style: none; padding: 0; margin: 0; }
.footer__grid li { margin: 0 0 .5rem; }
.footer__grid a { color: var(--text); text-decoration: none; }
.footer__grid a:hover { color: var(--brand); text-decoration: underline; }
.footer__about p { color: var(--text-muted); max-width: 34ch; }
.footer__about .brand__mark { width: 13rem; margin-bottom: 1rem; }
.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  color: var(--text-muted);
  font-size: .87rem;
}
.footer__bottom a { color: var(--text-muted); }
.footer__legal { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* Utilidades */
.stack > * + * { margin-top: 1.15rem; }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-wide { max-width: 74ch; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.section-head { max-width: 52ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head > :last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: start; padding: .7rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 650; color: var(--text-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}