/* ==========================================================================
   Tema Promedrice
   Los estilos del mockup, sacados de los atributos style= a clases reutilizables.
   Todo color, tamaño y ritmo vertical sale de los tokens de :root, así que ajustar
   la identidad del sitio es tocar este bloque y nada más.
   ========================================================================== */

:root {
  /* Paleta */
  --cream: #F4F1E8;
  --cream-soft: #FCFBF6;
  --ink: #16201A;
  --green-deep: #1E3F28;
  --green: #2E5E3A;
  --green-dark: #15301F;
  --gold: #C9963F;
  --white: #FFFFFF;

  --ink-78: rgba(22, 32, 26, .78);
  --ink-70: rgba(22, 32, 26, .70);
  --ink-60: rgba(22, 32, 26, .60);
  --ink-40: rgba(22, 32, 26, .40);
  --ink-14: rgba(22, 32, 26, .14);
  --ink-08: rgba(22, 32, 26, .08);

  --cream-82: rgba(244, 241, 232, .82);
  --cream-78: rgba(244, 241, 232, .78);
  --cream-66: rgba(244, 241, 232, .66);
  --cream-50: rgba(244, 241, 232, .50);
  --cream-45: rgba(244, 241, 232, .45);
  --cream-14: rgba(244, 241, 232, .14);
  --cream-10: rgba(244, 241, 232, .10);
  --cream-04: rgba(244, 241, 232, .04);

  /* Tipografía */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Ritmo */
  --shell: clamp(20px, 5vw, 64px);
  --wrap: 1180px;
  --section-y: clamp(70px, 10vw, 130px);
  --radius: 18px;
  --radius-sm: 12px;
}

/* --- Reinicio mínimo --------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--green); color: var(--cream); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
input, textarea, button { font-family: inherit; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--cream); padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* --- Contenedores ------------------------------------------------------ */
.wrap { max-width: var(--wrap); margin-inline: auto; }
.section { padding: var(--section-y) var(--shell); }
.section--tight { padding-block: clamp(60px, 8vw, 110px); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--green { background: var(--green); color: var(--cream); }
.section--rule { border-bottom: 1px solid rgba(22, 32, 26, .1); }
.section--flush { padding-inline: 0; }

/* --- Tipografía -------------------------------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before { content: ''; width: 26px; height: 1.5px; background: currentColor; flex: none; }
.eyebrow--plain::before { display: none; }
.eyebrow--gold { color: rgba(201, 150, 63, .95); }

.display   { font-family: var(--font-display); font-weight: 500; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.display-1 { font-size: clamp(40px, 6vw, 82px); }
.display-2 { font-size: clamp(34px, 5vw, 68px); line-height: 1.04; }
.display-3 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.015em; }
.display-4 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.01em; }

.lede  { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; max-width: 640px; }
.prose { font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.65; color: var(--ink-78); }
.prose p + p { margin-top: 1.1em; }
.prose h2, .prose h3 { font-family: var(--font-display); font-weight: 500; color: var(--green); margin-top: 1.6em; margin-bottom: .5em; }
.prose ul, .prose ol { margin: 1em 0 1em 1.2em; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--green); border-bottom: 1.5px solid currentColor; }

.on-dark .eyebrow { color: rgba(201, 150, 63, .95); }
.on-dark .prose { color: var(--cream-78); }

/* --- Botones ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: 100px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.btn--gold  { background: var(--gold); color: var(--ink); }
.btn--gold:hover  { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(201, 150, 63, .35); }
.btn--ghost { border-color: rgba(244, 241, 232, .4); color: var(--cream); }
.btn--ghost:hover { background: var(--cream-10); border-color: rgba(244, 241, 232, .7); }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--cream:hover { transform: translateY(-3px); }
.btn--green { background: var(--green); color: var(--cream); justify-content: center; width: 100%; padding: 15px; }
.btn--green:hover { background: var(--green-deep); transform: translateY(-2px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; color: var(--green);
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.on-dark .link-arrow { color: var(--gold); }

/* --- Barra de navegación ----------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px var(--shell);
  background: rgba(244, 241, 232, 0);
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.is-solid {
  background: rgba(244, 241, 232, .92);
  box-shadow: 0 2px 24px rgba(22, 32, 26, .08);
  padding-block: 12px;
  backdrop-filter: blur(12px);
}
.nav__logo { display: flex; align-items: center; gap: 12px; }
.nav__logo img { height: 38px; width: auto; transition: opacity .3s; }
.nav__right { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }

.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.nav__links > li { position: relative; list-style: none; }
.nav__link {
  display: inline-block;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  padding-bottom: 3px; border-bottom: 1.5px solid transparent;
  color: var(--cream);
  transition: opacity .2s, border-color .2s, color .35s;
}
.nav.is-solid .nav__link { color: var(--ink); }
.nav__link:hover { opacity: .72; }
.nav__link.is-active { border-bottom-color: var(--gold); }

/* Submenús desplegables */
.nav__sub {
  position: absolute; top: calc(100% + 14px); left: -18px; min-width: 230px;
  background: var(--white); border-radius: 14px; padding: 10px;
  box-shadow: 0 20px 44px rgba(22, 32, 26, .16);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s, transform .22s, visibility .22s;
  list-style: none;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub .nav__link {
  display: block; color: var(--ink); font-size: 14px;
  padding: 10px 14px; border-radius: 8px; border-bottom: 0;
}
.nav__sub .nav__link:hover { background: rgba(46, 94, 58, .08); color: var(--green); opacity: 1; }
.nav__sub .nav__sub { top: -10px; left: calc(100% + 6px); }

.nav__caret { font-size: 9px; opacity: .7; margin-left: 5px; }

.lang {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  padding: 7px 12px; border: 1.5px solid rgba(244, 241, 232, .5); border-radius: 100px;
  background: transparent; color: var(--cream);
  transition: color .25s, border-color .25s, background .25s;
}
.nav.is-solid .lang { color: var(--ink); border-color: rgba(22, 32, 26, .25); }
.lang__opt { opacity: .4; }
.lang__opt.is-on { opacity: 1; }

.nav__burger {
  display: none; width: 42px; height: 42px; border: 0; background: transparent;
  color: currentColor; cursor: pointer; align-items: center; justify-content: center;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ''; display: block; width: 22px; height: 1.6px; background: var(--cream);
  transition: transform .3s, opacity .3s, background .35s;
}
.nav.is-solid .nav__burger span,
.nav.is-solid .nav__burger span::before,
.nav.is-solid .nav__burger span::after { background: var(--ink); }
.nav__burger span::before { transform: translateY(-7px); }
.nav__burger span::after  { transform: translateY(5.6px); }
.nav.is-open .nav__burger span { background: transparent !important; }
.nav.is-open .nav__burger span::before { transform: rotate(45deg); }
.nav.is-open .nav__burger span::after  { transform: rotate(-45deg) translateY(-1.4px); }

/* --- Portada ------------------------------------------------------------ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: var(--green-deep); color: var(--cream); overflow: hidden;
  padding: 120px var(--shell) 60px;
}
.hero__glow {
  position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(120% 90% at 80% 10%, var(--green) 0%, var(--green-deep) 55%, var(--green-dark) 100%);
}
.hero__photos {
  position: absolute; inset: 0 0 0 auto; width: 42%;
  display: flex; gap: 18px; padding: 0 24px; opacity: .9;
}
.hero__col { display: flex; flex-direction: column; gap: 18px; animation: floaty 9s ease-in-out infinite; }
.hero__col--offset { margin-top: 64px; animation-duration: 11s; animation-delay: .6s; }
.hero__photos img {
  width: 100%; border-radius: 14px; object-fit: cover;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.hero__body { position: relative; z-index: 2; max-width: 760px; }
.hero__sub { color: var(--cream-78); max-width: 540px; }
.hero__scroll {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-45); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero__scroll::after { content: ''; width: 1px; height: 34px; background: linear-gradient(var(--cream-50), transparent); }

/* Cabecera de página interior */
.pagehero {
  background: var(--green-deep); color: var(--cream); position: relative; overflow: hidden;
  padding: clamp(140px, 18vh, 200px) var(--shell) clamp(60px, 9vw, 110px);
}
.pagehero__glow {
  position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(120% 100% at 85% 0%, var(--green) 0%, var(--green-deep) 60%, var(--green-dark) 100%);
}
.pagehero__body { position: relative; max-width: var(--wrap); margin-inline: auto; }

/* --- Rejillas ----------------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.stack--sm { gap: 14px; }
.stack--md { gap: 26px; }

.grid-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.stat__num { font-family: var(--font-display); font-size: clamp(44px, 5vw, 68px); font-weight: 500; color: var(--green); line-height: 1; }
.stat__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); margin-top: 6px; }
.on-dark .stat__num { color: var(--gold); }
.on-dark .stat__label { color: var(--cream-45); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.split--weighted { grid-template-columns: 1.1fr 1fr; align-items: center; }
.split__sticky { position: sticky; top: 110px; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.5vw, 28px); }
.card {
  background: var(--cream-04); border: 1px solid var(--cream-10); border-radius: var(--radius);
  padding: 34px 28px;
  transition: transform .35s, background .35s, border-color .35s;
}
.card:hover { transform: translateY(-6px); background: rgba(244, 241, 232, .07); border-color: rgba(201, 150, 63, .4); }
.card__icon {
  width: 62px; height: 62px; border-radius: 14px; background: rgba(201, 150, 63, .12);
  display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.card__icon img {
  width: 34px; height: 34px; object-fit: contain;
  filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(560%) hue-rotate(354deg) brightness(92%) contrast(88%);
}
.card__title { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.2; margin-bottom: 12px; }
.card__text { font-size: 14.5px; line-height: 1.6; color: var(--cream-66); }

.imgrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.imgrow img { width: 100%; height: 340px; object-fit: cover; border-radius: 16px; }

/* Imagen suelta. Se alinea contra la columna del texto (760px, la del bloque de texto)
   y no contra el borde de la pantalla: a la izquierda queda a ras de los párrafos. El
   margen sale del ancho del contenedor, así que en móvil se queda en cero. */
.figimg { --col: 760px; width: min(100%, var(--fig)); margin-inline: auto; }
.figimg--small { --fig: 340px; }
.figimg--medium { --fig: 560px; }
.figimg--large { --fig: var(--col); }
.figimg--full { --fig: var(--wrap); }
.figimg--left:not(.figimg--full) { margin-left: max(0px, calc((100% - var(--col)) / 2)); margin-right: auto; }
.figimg--right:not(.figimg--full) { margin-right: max(0px, calc((100% - var(--col)) / 2)); margin-left: auto; }
.figimg img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.figimg figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-60); }
.figimg--right figcaption { text-align: right; }

/* Cinta de fotos */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 18px; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track img { height: 340px; width: auto; border-radius: 14px; object-fit: cover; background: rgba(46, 94, 58, .08); }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Lista numerada (paquetes de trabajo) */
.numbered__row {
  display: grid; grid-template-columns: 120px 1fr; gap: clamp(20px, 4vw, 56px);
  padding: 30px 0; border-top: 1px solid var(--ink-14); align-items: start;
}
.numbered__code { font-family: var(--font-display); font-size: clamp(30px, 3vw, 44px); color: var(--gold); line-height: 1; font-weight: 500; }
.numbered__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; margin-bottom: 10px; }
.numbered__text { font-size: 15.5px; line-height: 1.62; color: var(--ink-70); max-width: 760px; }

/* Rejilla de logos */
.logogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.logogrid__cell {
  background: var(--cream); border-radius: var(--radius-sm); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; padding: 14px;
  transition: transform .3s;
}
.logogrid__cell:hover { transform: scale(1.05); }
.logogrid__cell img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Fichas de socios */
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.partner {
  background: var(--white); border: 1px solid var(--ink-08); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s, box-shadow .3s;
}
.partner:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22, 32, 26, .09); }
.partner__logo { width: 78px; height: 78px; border-radius: var(--radius-sm); object-fit: contain; background: var(--cream); padding: 8px; }
.partner__name { font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.2; }
.partner__meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.partner__link { font-family: var(--font-mono); font-size: 13px; color: var(--ink-70); word-break: break-all; }
.partner__link:hover { color: var(--green); }

/* Lista de noticias */
.newslist { display: grid; gap: 2px; }
.news {
  display: grid; grid-template-columns: 160px 1fr; gap: clamp(18px, 3vw, 40px);
  padding: 28px 0; border-top: 1px solid var(--ink-14); align-items: start;
}
.news__kind { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); padding-top: 4px; }
.news__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.8vw, 25px); line-height: 1.25; margin-bottom: 8px; }
.news__text { font-size: 15.5px; line-height: 1.62; color: var(--ink-70); max-width: 720px; }

/* Fichas numeradas (recursos) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tile {
  background: var(--white); border: 1px solid var(--ink-08); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s, box-shadow .3s;
}
.tile:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(22, 32, 26, .08); }
.tile__num { font-family: var(--font-display); font-size: 34px; color: var(--gold); line-height: 1; }
.tile__title { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.25; }
.tile__text { font-size: 14.5px; line-height: 1.62; color: var(--ink-70); }
.tag {
  align-self: flex-start; margin-top: auto;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(46, 94, 58, .1); color: var(--green); padding: 6px 12px; border-radius: 100px;
}

/* --- Formulario --------------------------------------------------------- */
.form {
  background: var(--white); border: 1px solid var(--ink-08); border-radius: 20px;
  padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 20px 50px rgba(22, 32, 26, .06);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: rgba(22, 32, 26, .75); }
.field input, .field textarea {
  padding: 13px 15px; border: 1.5px solid rgba(22, 32, 26, .15); border-radius: 10px;
  font-size: 15px; background: var(--cream-soft); transition: border-color .2s;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-40); }
.field__error { font-size: 13px; color: #B3261E; }

.notice { border-radius: 12px; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; }
.notice--ok { background: rgba(46, 94, 58, .1); color: var(--green); }
.notice--bad { background: rgba(179, 38, 30, .08); color: #B3261E; }

/* Bloque de contacto */
.contactline + .contactline { border-top: 1px solid rgba(22, 32, 26, .12); padding-top: 26px; }
.contactline__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.contactline__name { font-family: var(--font-display); font-size: 21px; margin-bottom: 4px; }
.contactline__mail { font-family: var(--font-mono); font-size: 15px; color: var(--ink-70); }
.contactline__mail:hover { color: var(--green); }

/* --- Pie de página ------------------------------------------------------ */
.foot { background: var(--ink); color: var(--cream); padding: clamp(50px, 7vw, 90px) var(--shell) 36px; }
.foot__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 48px; border-bottom: 1px solid var(--cream-14);
}
.foot__logo { height: 42px; margin-bottom: 20px; }
.foot__tag { font-size: 14.5px; line-height: 1.6; color: rgba(244, 241, 232, .6); max-width: 320px; }
.foot__head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-45); margin-bottom: 18px; }
.foot__links { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; list-style: none; }
.foot__links a { color: var(--cream-82); transition: color .2s; }
.foot__links a:hover { color: var(--gold); }
.foot__badge { background: var(--cream); border-radius: 8px; padding: 10px; width: fit-content; }
.foot__grant { font-size: 12px; line-height: 1.5; color: var(--cream-50); }
.foot__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; flex-wrap: wrap; }
.foot__copy { font-size: 13px; color: var(--cream-50); }
.foot__social {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  color: rgba(244, 241, 232, .7); border: 1px solid rgba(244, 241, 232, .2);
  padding: 8px 16px; border-radius: 100px; transition: border-color .2s, color .2s;
}
.foot__social:hover { color: var(--gold); border-color: var(--gold); }

/* --- Animación ---------------------------------------------------------- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

[data-reveal] { opacity: 0; transform: translateY(26px); }
.js-ready [data-reveal] { transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* Sin JS el contenido tiene que verse igual: el reveal es un extra, no un requisito. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* --- Adaptación a pantallas pequeñas ------------------------------------ */
@media (max-width: 900px) {
  .split, .split--weighted { grid-template-columns: 1fr; }
  .split__sticky { position: static; }
  .imgrow { grid-template-columns: 1fr 1fr; }
  .imgrow img { height: 240px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .hero__photos { display: none; }
  .hero { min-height: auto; padding-top: 140px; }
}

@media (max-width: 780px) {
  .nav__burger { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 0 0 auto 0; top: 0; padding: 92px var(--shell) 28px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--cream); box-shadow: 0 18px 40px rgba(22, 32, 26, .14);
    transform: translateY(-102%); transition: transform .35s cubic-bezier(.22, .61, .36, 1);
    max-height: 100vh; overflow-y: auto;
  }
  .nav.is-open .nav__links { transform: none; }
  .nav__link { color: var(--ink); font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--ink-08); }
  .nav__link.is-active { border-bottom-color: var(--gold); }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent; padding: 0 0 6px 16px;
  }
  .nav__sub .nav__link { font-size: 15px; padding: 9px 0; }
  .nav__caret { display: none; }
}

@media (max-width: 640px) {
  .numbered__row { grid-template-columns: 1fr; gap: 10px; }
  .news { grid-template-columns: 1fr; gap: 10px; }
  .imgrow { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .logogrid { grid-template-columns: repeat(2, 1fr); }
  .marquee__track img { height: 220px; }
}

/* --- Blog ---------------------------------------------------------------- */
.catbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 100px;
  border: 1.5px solid var(--ink-14); color: var(--ink-70);
  transition: border-color .2s, color .2s, background .2s;
}
.chip:hover { border-color: var(--green); color: var(--green); }
.chip.is-on { background: var(--green); border-color: var(--green); color: var(--cream); }
.chip__n { opacity: .6; }
.postmeta .chip { border-color: rgba(244, 241, 232, .3); color: var(--cream-82); }
.postmeta .chip:hover { border-color: var(--gold); color: var(--gold); }

.postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(18px, 2.5vw, 28px); }

.postcard {
  background: var(--white); border: 1px solid var(--ink-08); border-radius: var(--radius);
  overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.postcard:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(22, 32, 26, .1); }
.postcard__link { display: flex; flex-direction: column; height: 100%; }
.postcard__img { width: 100%; height: 200px; object-fit: cover; background: rgba(46, 94, 58, .08); }
.postcard__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.postcard__meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
.postcard__title { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.22; }
.postcard__text { font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.postcard__more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--green); }
.postcard:hover .postcard__more { color: var(--gold); }

.postmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--cream-78);
}
.postcover { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); }
.postlede { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-78); font-family: var(--font-display); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px); }
.pager__link { font-weight: 600; font-size: 15px; color: var(--green); }
.pager__link:hover { color: var(--gold); }
.pager__link.is-off { color: var(--ink-40); pointer-events: none; }
.pager__count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }

@media (max-width: 640px) {
  .postcard__img { height: 170px; }
  .pager { justify-content: center; }
}

/* --- Redes sociales en la barra ------------------------------------------ */
.nav__social { display: flex; align-items: center; gap: 4px; }
.nav__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 100px;
  color: var(--cream); font-size: 15px;
  transition: background .22s, color .3s;
}
/* Los iconos son SVG en linea y heredan el color del enlace. */
.nav__social svg, .foot__social svg { display: block; }
.nav.is-solid .nav__social a { color: var(--ink); }
.nav__social a:hover { background: rgba(244, 241, 232, .16); color: var(--gold); }
.nav.is-solid .nav__social a:hover { background: rgba(22, 32, 26, .07); color: var(--green); }

.foot__socials { display: flex; gap: 8px; }
.foot__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 100px;
  border: 1px solid rgba(244, 241, 232, .2); color: rgba(244, 241, 232, .7);
  transition: border-color .2s, color .2s;
}
.foot__social:hover { color: var(--gold); border-color: var(--gold); }

/* --- Mapa embebido -------------------------------------------------------- */
.mapframe {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--ink-14); background: rgba(46, 94, 58, .05);
}
.mapframe iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Ventana de una ficha ------------------------------------------------- */
.tile__btn {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  background: rgba(46, 94, 58, .1); color: var(--green);
  border: 0; border-radius: 100px; padding: 9px 18px; cursor: pointer;
  transition: background .22s, color .22s, transform .22s;
}
.tile__btn:hover { background: var(--green); color: var(--cream); transform: translateY(-2px); }

.dlg {
  /* Un <dialog> modal lo centra el navegador con inset:0 + margin:auto. El reset de
     arriba pone margin:0 en TODO, se lleva ese auto por delante y la ventana se pega
     a la esquina superior izquierda. Por eso se devuelve aquí de forma explícita. */
  position: fixed;
  inset: 0;
  margin: auto;

  width: min(720px, calc(100vw - 2.5rem));
  /* Con inset:0, si la altura fuera auto el navegador la estiraría a toda la pantalla
     y los márgenes automáticos se anularían: la ventana dejaría de estar centrada. Se
     declara fit-content en vez de confiar en que lo traiga la hoja del navegador. */
  height: fit-content;
  max-height: min(80vh, 720px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--cream); color: var(--ink);
  box-shadow: 0 40px 90px rgba(22, 32, 26, .3);
  overflow: hidden;
}
.dlg::backdrop { background: rgba(22, 32, 26, .55); backdrop-filter: blur(3px); }
.dlg[open] { display: flex; flex-direction: column; }

.dlg__head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 26px 18px; border-bottom: 1px solid var(--ink-14);
  flex: none;
}
.dlg__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.2; }
.dlg__close {
  margin-left: auto; flex: none;
  width: 36px; height: 36px; border: 0; border-radius: 100px;
  background: transparent; color: var(--ink-60); font-size: 26px; line-height: 1;
  cursor: pointer; transition: background .2s, color .2s;
}
.dlg__close:hover { background: rgba(22, 32, 26, .07); color: var(--ink); }

.dlg__body { padding: 22px 26px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }

.dlgpost {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px; margin: 0 -12px; border-radius: .7rem;
  transition: background .2s;
}
.dlgpost:hover { background: rgba(46, 94, 58, .07); }
.dlgpost + .dlgpost { border-top: 1px solid var(--ink-08); }
.dlgpost__img { width: 84px; height: 62px; object-fit: cover; border-radius: .5rem; flex: none; }
.dlgpost__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dlgpost__date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
.dlgpost__title { font-family: var(--font-display); font-size: 18px; line-height: 1.25; }
.dlgpost__text { font-size: 14px; line-height: 1.5; color: var(--ink-70); }

@media (max-width: 640px) {
  .dlgpost__img { width: 62px; height: 48px; }
}

/* En estrecho la barra no da para todo: las redes se ven en el pie, que si cabe. */
@media (max-width: 780px) { .nav__social { display: none; } }