:root {
  color-scheme: light;
  --ink: #0d0c08;
  --ink-soft: #2f2b22;
  --paper: #f5eddb;
  --paper-quiet: #eadfc9;
  --white: #fffdf7;
  --yellow: #f3c318;
  --yellow-deep: #b98705;
  --clay: #a95e36;
  --moss: #4f5b43;
  --water: #6f9f9a;
  --line: rgba(13, 12, 8, 0.12);
  --shadow: 0 18px 54px rgba(32, 27, 16, 0.1);
  --shadow-lift: 0 26px 72px rgba(32, 27, 16, 0.15);
  --radius: 8px;
  --radius-media: clamp(14px, 1.5vw, 22px);
  --max: 1360px;
  --layout-side: clamp(1rem, 4vw, 7rem);
  --layout-gutter: clamp(2rem, 8vw, 14rem);
  --font-body: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-logo: "Bodoni Moda", "Bodoni 72", "Bodoni MT", Didot, Georgia, serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
  background-color: #070704;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #fffaf0 0%, var(--paper) 38%, var(--paper-quiet) 100%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

main,
footer {
  max-width: 100%;
  overflow-x: clip;
}

img,
video {
  max-width: 100%;
}

.page-transition {
  position: fixed;
  /* Se sobredimensiona 2px por lado para que el giro/transform con
     subpíxeles no deje una línea oscura visible en el borde al levantarse. */
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: 9999;
  overflow: hidden;
  isolation: isolate;
  background: #070704;
  color: var(--white);
  pointer-events: none;
  transform: translateY(-100%) translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  visibility: hidden;
  transition:
    transform 980ms cubic-bezier(0.83, 0, 0.17, 1),
    visibility 0s linear 980ms;
}

/* Cola amarilla que sigue a la cortina al levantarse */
.page-transition::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 16vh;
  background: var(--yellow);
}

/* Viñeta sutil para dar profundidad */
.page-transition::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(0, 0, 0, 0.55));
}

.page-transition__frame {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  justify-items: center;
  row-gap: 1.15rem;
  padding: 2rem;
  isolation: isolate;
}

/* Intro "Horizonte": una línea se dibuja, el sol asciende sobre ella
   y el nombre respira abriéndose. Minimalista y ligado al viaje. */
.page-transition__sky {
  position: relative;
  width: min(60vw, 380px);
  height: 56px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.page-transition__sun {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 34px rgba(243, 195, 24, 0.35);
  transform: translateY(120%);
  opacity: 0;
}

.page-transition__horizon {
  width: min(60vw, 380px);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--yellow) 22%, var(--yellow) 78%, transparent);
  transform: scaleX(0);
  transform-origin: center;
}

.page-transition__word {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-logo);
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fffdf7;
  opacity: 0;
}

.page-transition__caption {
  display: block;
  color: rgba(255, 253, 247, 0.55);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}

body.page-is-entering .page-transition {
  visibility: visible;
  transform: translateY(0) translateZ(0);
  transition: none;
}

body.page-is-entering .page-transition__horizon {
  animation: introHorizon 820ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

body.page-is-entering .page-transition__sun {
  animation: introSunrise 1050ms cubic-bezier(0.22, 1, 0.36, 1) 320ms both;
}

body.page-is-entering .page-transition__word {
  animation: introWord 860ms cubic-bezier(0.22, 1, 0.36, 1) 560ms both;
}

body.page-is-entering .page-transition__caption {
  animation: introRise 720ms cubic-bezier(0.22, 1, 0.36, 1) 860ms both;
}

/* Al salir, el contenido se mantiene visible y sube con la cortina */
body.page-is-ready .page-transition {
  transform: translateY(calc(-100% - 16vh)) translateZ(0);
  visibility: hidden;
  transition:
    transform 1040ms cubic-bezier(0.83, 0, 0.17, 1),
    visibility 0s linear 1040ms;
}

body.page-is-ready .page-transition__word,
body.page-is-ready .page-transition__caption {
  opacity: 1;
}

body.page-is-ready .page-transition__horizon {
  transform: scaleX(1);
}

body.page-is-ready .page-transition__sun {
  opacity: 1;
  transform: translateY(12%);
}

/* Separador de secciones "amanecer": una línea fina se dibuja y el sol
   asciende sobre ella cuando el separador entra en pantalla. */
.sun-divider {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(46vw, 300px);
  margin: clamp(1.6rem, 3.5vw, 3rem) auto 0;
  pointer-events: none;
}

.sun-divider__sky {
  position: relative;
  width: 100%;
  height: 22px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.sun-divider__sun {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--yellow);
  transform: translateY(130%);
  opacity: 0;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 260ms, opacity 500ms ease 260ms;
}

.sun-divider__line {
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(201, 161, 26, 0.85) 24%, rgba(201, 161, 26, 0.85) 76%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sun-divider.is-in .sun-divider__sun {
  transform: translateY(16%);
  opacity: 1;
}

.sun-divider.is-in .sun-divider__line {
  transform: scaleX(1);
}

/* Variante para secciones oscuras: el sol brilla un poco más */
.sun-divider--dark .sun-divider__line {
  background: linear-gradient(90deg, transparent, rgba(243, 195, 24, 0.7) 24%, rgba(243, 195, 24, 0.7) 76%, transparent);
}

body.page-shell-enter main {
  opacity: 0;
  transform: translateY(14px);
}

body.page-shell-ready main {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 460ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* El hero entra un punto después que el resto, con más recorrido */
body.page-shell-enter .hero-content,
body.page-shell-enter .page-hero__content {
  opacity: 0;
  transform: translateY(28px);
}

body.page-shell-ready .hero-content,
body.page-shell-ready .page-hero__content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 720ms ease 140ms, transform 820ms cubic-bezier(0.22, 1, 0.36, 1) 140ms;
}

/* Velo oscuro: cubre al salir y se disipa al entrar, sin destellos blancos */
body::after {
  content: "";
  position: fixed;
  /* Sobredimensionado 2px por lado: evita una línea oscura residual en el
     borde cuando el navegador redondea el subpíxel del fundido. */
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: 240;
  background: #070704;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

/* La página llega ya cubierta (clase puesta en <head>, antes del primer
   pintado) y se revela como un diafragma de cámara que se abre: el velo
   oscuro se contrae hacia el centro y desaparece. */
html.is-arriving body::after {
  opacity: 1;
  animation: irisOpen 560ms cubic-bezier(0.45, 0, 0.2, 1) 160ms forwards;
}

/* Al salir, el diafragma se cierra: el velo crece desde el centro. */
body.page-is-leaving::after {
  opacity: 1;
  clip-path: circle(0% at 50% 50%);
  animation: irisClose 420ms cubic-bezier(0.5, 0, 0.35, 1) forwards;
}

@keyframes irisOpen {
  0% {
    clip-path: circle(125% at 50% 50%);
    opacity: 1;
  }

  99% {
    clip-path: circle(0% at 50% 50%);
    opacity: 1;
  }

  100% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}

@keyframes irisClose {
  to {
    clip-path: circle(125% at 50% 50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-arriving body::after {
    animation: veilOut 400ms ease 120ms forwards;
    clip-path: none;
  }

  body.page-is-leaving::after {
    animation: none;
    clip-path: none;
  }
}

@keyframes veilOut {
  to {
    opacity: 0;
  }
}

body.page-is-leaving main {
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-is-leaving footer {
  opacity: 0;
  transition: opacity 260ms ease;
}

@keyframes introRise {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes introHorizon {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes introSunrise {
  0% {
    opacity: 0;
    transform: translateY(120%);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(12%);
  }
}

@keyframes introWord {
  0% {
    opacity: 0;
    letter-spacing: 0.04em;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    letter-spacing: 0.14em;
    transform: translateY(0);
  }
}

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

figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

::selection {
  background: var(--yellow);
  color: var(--ink);
}

p {
  margin: 0;
  color: rgba(13, 12, 8, 0.68);
  font-weight: 400;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.04;
  font-family: var(--font-display);
  font-weight: 480;
  font-variation-settings: "opsz" 110;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: 4.1rem;
}

h2 {
  font-size: 2.55rem;
}

h3 {
  font-size: 1.62rem;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-140%);
  background: var(--yellow);
  color: var(--ink);
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  font-weight: 650;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(13, 12, 8, 0.38), rgba(13, 12, 8, 0.04));
  color: var(--white);
  backdrop-filter: blur(6px);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Al bajar se retira; al subir reaparece al instante */
.site-header[data-hidden="true"] {
  transform: translateY(-102%);
}

.site-header[data-scrolled="true"] {
  background: rgba(13, 12, 8, 0.9);
  border-color: rgba(255, 253, 247, 0.14);
  box-shadow: 0 12px 34px rgba(13, 12, 8, 0.14);
  backdrop-filter: blur(16px);
}

.nav-wrap {
  width: min(calc(100% - var(--layout-gutter)), var(--max));
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-logo);
  font-size: 1.45rem;
  line-height: 1;
  white-space: nowrap;
  transition: transform 180ms ease, opacity 180ms ease;
}

.brand:hover {
  transform: translateY(-1px);
}

.brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  transition: transform 220ms ease, filter 220ms ease;
}

.brand:hover img {
  filter: drop-shadow(0 10px 20px rgba(243, 195, 24, 0.18));
  transform: scale(1.04);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.8rem);
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  padding: 0.4rem 0;
  opacity: 0.86;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--yellow);
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--white);
  opacity: 1;
  transform: translateY(-1px);
}

.site-nav a[data-route-link="contacto"] {
  border: 1px solid rgba(243, 195, 24, 0.72);
  border-radius: var(--radius);
  padding: 0.48rem 0.72rem;
}

.site-nav a[data-route-link="contacto"]::after {
  display: none;
}

.site-nav a[data-route-link="contacto"]:hover,
.site-nav a[data-route-link="contacto"][aria-current="page"] {
  background: var(--yellow);
  color: var(--ink);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 253, 247, 0.28);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.menu-toggle span {
  margin: 5px 0;
}

.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.hero {
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
}

.hero-media,
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media video,
.hero-media img,
.page-hero__media img,
.page-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after,
.page-hero::after,
.media-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(13, 12, 8, 0.62), rgba(13, 12, 8, 0.14) 58%, rgba(13, 12, 8, 0.42)),
    linear-gradient(0deg, rgba(13, 12, 8, 0.62), transparent 48%);
}

.hero-content,
.page-hero__content {
  width: min(calc(100% - var(--layout-gutter)), var(--max));
  margin: 0 auto;
  padding: clamp(6.5rem, 10vw, 9rem) 0 clamp(3.6rem, 6vw, 5.4rem);
}

.hero-content {
  max-width: 820px;
  margin-left: max(var(--layout-side), calc((100vw - var(--max)) / 2));
}

.hero h1,
.page-hero h1 {
  max-width: 920px;
}

.hero h1 {
  font-size: 4.35rem;
}

.hero p,
.page-hero p {
  color: rgba(255, 253, 247, 0.88);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}

.hero-content > p:not(.lead),
.page-hero__content > p:not(.lead) {
  font-size: 1.03rem;
  line-height: 1.66;
}

.hero .lead,
.page-hero .lead {
  color: var(--white);
}

.eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lead {
  max-width: 720px;
  margin-top: 1.2rem;
  font-size: 1.18rem;
  line-height: 1.55;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 46px;
  padding: 0.78rem 1.08rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(13, 12, 8, 0.12);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.button::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 253, 247, 0.32) 50%, transparent 66% 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
  transition: opacity 180ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(13, 12, 8, 0.18);
}

.button:hover::after {
  opacity: 1;
  transform: translateX(120%);
}

.button--yellow {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

.button--ghost {
  border-color: rgba(255, 253, 247, 0.72);
  background: rgba(255, 253, 247, 0.1);
  color: var(--white);
  backdrop-filter: blur(10px);
  /* Evita el "pop-in" del desenfoque: el navegador prepara la capa
     de composición desde el primer pintado en vez de crearla al vuelo. */
  will-change: backdrop-filter;
}

.button--light {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.section {
  padding: clamp(3.2rem, 6.2vw, 5.9rem) 0;
}

.section--tight {
  padding: clamp(2.4rem, 4.8vw, 4rem) 0;
}

.section--ink {
  background: var(--ink);
  color: var(--white);
}

.section--ink p {
  color: rgba(255, 253, 247, 0.72);
}

.section--white {
  background: #fffaf0;
}

.section--yellow {
  background: var(--yellow);
}

.section--yellow p {
  color: rgba(13, 12, 8, 0.72);
}

.section--values {
  background: #090908;
  color: var(--white);
}

.values-head {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  text-align: center;
}

.values-head .eyebrow {
  margin-bottom: 0;
}

.values-head h2 {
  color: var(--white);
  font-size: 3.45rem;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  column-gap: clamp(2.6rem, 7vw, 7rem);
  row-gap: clamp(4rem, 8vw, 6.5rem);
}

.value-item {
  display: grid;
  align-content: start;
  gap: 0.78rem;
  max-width: 390px;
}

.value-item:nth-child(4) {
  grid-column: 1;
}

.value-item:nth-child(5) {
  grid-column: 2;
}

.value-icon {
  width: 38px;
  height: 38px;
  margin-bottom: clamp(0.8rem, 2vw, 1.45rem);
  color: var(--yellow);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.value-item h3 {
  color: var(--white);
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 1;
}

.value-item em {
  color: rgba(255, 253, 247, 0.58);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.25;
}

.value-item p {
  color: rgba(255, 253, 247, 0.72);
  font-size: 1.06rem;
  line-height: 1.62;
}

.container {
  width: min(calc(100% - var(--layout-gutter)), var(--max));
  margin: 0 auto;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.75fr);
  gap: clamp(1.4rem, 3.4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(1.45rem, 3.2vw, 2.7rem);
}

.section-head p {
  max-width: 760px;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.62;
}

.section-head--stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  max-width: 900px;
}

.section-head--stacked h2 {
  max-width: 920px;
}

.section-head--stacked p {
  margin-top: 0.1rem;
}

.section-head--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-head--center p {
  margin-right: auto;
  margin-left: auto;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.split--reverse {
  grid-template-columns: minmax(320px, 1.05fr) minmax(0, 0.95fr);
}

.split--intro {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  align-items: center;
}

.split--intro .text-stack {
  max-width: 680px;
  padding-top: 0;
}

.split--intro .media-frame {
  width: min(100%, 520px);
  justify-self: end;
}

.text-stack {
  display: grid;
  gap: 1rem;
}

.media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13, 12, 8, 0.1);
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: var(--shadow);
}

.media-frame img {
  transition: transform 600ms ease;
}

.media-frame:hover img {
  transform: scale(1.025);
}

.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.media-frame--portrait {
  aspect-ratio: 4 / 5;
}

.media-frame--wide {
  aspect-ratio: 16 / 10;
}

.caption-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  background: rgba(13, 12, 8, 0.72);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 650;
  text-transform: uppercase;
}

.section--production-intro {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(243, 195, 24, 0.08), transparent 32%),
    #090908;
  color: var(--white);
}

.section--production-intro::after {
  content: none;
}

.production-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1.05fr);
  gap: clamp(2.4rem, 6vw, 7rem);
  align-items: center;
}

.production-intro__copy {
  display: grid;
  gap: 1rem;
  max-width: 720px;
}

.production-intro__copy h2 {
  max-width: 11ch;
  color: var(--white);
  font-size: clamp(2.5rem, 3.4vw, 3.4rem);
}

.production-intro__copy p {
  color: rgba(255, 253, 247, 0.72);
  font-size: 1.03rem;
  line-height: 1.78;
}

.production-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: clamp(1.2rem, 3vw, 2rem) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 253, 247, 0.14);
}

.production-signals li {
  display: grid;
  gap: 0.34rem;
  padding: 1.1rem 1rem 0 0;
}

.production-signals span {
  color: var(--yellow);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.production-signals strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.1;
}

.production-collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.42fr);
  grid-template-rows: minmax(260px, 1fr) auto;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  min-height: clamp(520px, 54vw, 760px);
}

.production-collage figure,
.production-note {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 253, 247, 0.14);
  border-radius: var(--radius);
}

.production-collage__main {
  grid-row: 1 / span 2;
}

.production-collage__side {
  min-height: 100%;
}

.production-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.08);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1), filter 720ms ease;
}

.production-collage figure:hover img {
  filter: saturate(1.02) contrast(1.1);
  transform: scale(1.035);
}

.production-collage figcaption::before {
  content: "";
  display: inline-block;
  width: 1.3rem;
  height: 1px;
  margin-right: 0.5rem;
  vertical-align: middle;
  background: rgba(243, 195, 24, 0.85);
}

.production-collage figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  color: rgba(255, 253, 247, 0.86);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.production-note {
  display: grid;
  align-content: end;
  gap: 0.5rem;
  min-height: 190px;
  padding: 1.2rem;
  background: linear-gradient(155deg, #f8d04b, var(--yellow) 55%, #e0b30e);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.production-note span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.production-note strong {
  max-width: 12rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.02;
}

.section--services {
  background: var(--white);
}

body[data-route="produccion"] .production-services {
  background: #fffaf0;
}

body[data-route="produccion"] .production-services .section-head {
  margin-bottom: clamp(2.2rem, 5vw, 4.4rem);
}

.service-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.35rem, 3vw, 2.4rem);
  margin-top: clamp(2.4rem, 5vw, 4.6rem);
}

body[data-route="produccion"] .service-columns {
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: 0;
}

.service-column {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.05rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(13, 12, 8, 0.42);
}

body[data-route="produccion"] .service-column {
  gap: 0;
  overflow: hidden;
  padding-top: 0;
  border: 1px solid rgba(13, 12, 8, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.92);
  box-shadow: 0 22px 60px rgba(32, 27, 16, 0.08);
}

.service-column::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 5.8rem;
  height: 1px;
  background: var(--yellow);
}

body[data-route="produccion"] .service-column::before {
  top: 0;
  z-index: 1;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow), transparent);
}

.service-column__media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: 0 18px 54px rgba(13, 12, 8, 0.16);
}

body[data-route="produccion"] .service-column__media {
  aspect-ratio: 4 / 3;
  border-radius: 0;
  box-shadow: none;
}

.service-column__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), filter 620ms ease;
}

.service-column:hover .service-column__media img {
  filter: saturate(1.02) contrast(1.08);
  transform: scale(1.035);
}

.service-column h3 {
  max-width: 92%;
  font-size: 2.05rem;
  line-height: 1.02;
}

body[data-route="produccion"] .service-column > .card-meta {
  display: block;
  padding: 1.1rem 1.1rem 0;
}

body[data-route="produccion"] .service-column > h3 {
  max-width: none;
  padding: 0.35rem 1.1rem 0;
  font-size: clamp(1.85rem, 2.4vw, 2.35rem);
}

.service-list {
  display: grid;
  gap: 1.05rem;
  padding: 0;
  margin: 0.25rem 0 0;
  list-style: none;
}

body[data-route="produccion"] .service-list {
  padding: 0 1.1rem 1.2rem;
}

.service-list li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.85rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line);
}

.service-list span {
  color: var(--yellow-deep);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

.service-list h4 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.28;
}

.service-list p {
  margin-top: 0.35rem;
  color: rgba(13, 12, 8, 0.72);
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.55;
}

.section--services .cta-row {
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.service-grid,
.value-grid,
.trip-grid,
.article-grid,
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pillar-grid,
.choice-grid,
.dual-form-grid,
.team-grid,
.steps-grid,
.service-cluster,
.country-grid,
.instagram-grid {
  display: grid;
  gap: 1rem;
}

.pillar-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.value-card--major {
  grid-column: span 2;
}

.service-cluster,
.steps-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-grid,
.dual-form-grid,
.team-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dual-form-grid {
  align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 941px) {
  .dual-form-grid .form-panel:nth-child(even) {
    margin-top: clamp(1rem, 2vw, 1.8rem);
  }
}

.country-grid,
.instagram-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-card,
.value-card,
.trip-card,
.article-card,
.product-card,
.contact-card,
.team-card,
.country-card,
.instagram-grid a {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.84);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(13, 12, 8, 0.04), 0 18px 52px rgba(32, 27, 16, 0.06);
  will-change: transform;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.service-card:hover,
.value-card:hover,
.trip-card:hover,
.article-card:hover,
.product-card:hover,
.contact-card:hover,
.team-card:hover,
.country-card:hover,
.instagram-grid a:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 12, 8, 0.34);
  box-shadow: var(--shadow-lift);
}

.section--ink .service-card,
.section--ink .value-card,
.section--ink .trip-card,
.section--ink .article-card,
.section--ink .contact-card {
  border-color: rgba(255, 253, 247, 0.18);
  background: rgba(255, 253, 247, 0.06);
}

.service-card img,
.trip-card img,
.article-card img,
.product-card img,
.team-card img,
.country-card img,
.instagram-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 520ms ease, filter 520ms ease;
}

.service-card:hover img,
.trip-card:hover img,
.article-card:hover img,
.product-card:hover img,
.team-card:hover img,
.country-card:hover img,
.instagram-grid a:hover img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.02);
}

.card-body {
  display: grid;
  gap: 0.75rem;
  padding: 1.22rem;
}

.card-body h3 {
  transition: color 180ms ease, transform 180ms ease;
}

.service-card:hover .card-body h3,
.value-card:hover .card-body h3,
.trip-card:hover .card-body h3,
.article-card:hover .card-body h3,
.product-card:hover .card-body h3 {
  transform: translateY(-1px);
}

.country-card,
.instagram-grid a {
  min-height: 240px;
  color: inherit;
}

.country-card img,
.instagram-grid img {
  height: 100%;
  min-height: 240px;
  filter: brightness(0.78);
}

.country-card span,
.country-card small,
.instagram-grid span {
  position: absolute;
  left: 1rem;
  right: 1rem;
  z-index: 1;
  color: var(--white);
}

.country-card span,
.instagram-grid span {
  bottom: 2.1rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
}

.country-card small {
  bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.country-card::after,
.instagram-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 12, 8, 0.76), rgba(13, 12, 8, 0.04));
}

.team-card {
  background: var(--white);
}

.card-meta {
  color: var(--yellow-deep);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.section--ink .card-meta {
  color: var(--yellow);
}

.section--yellow .eyebrow {
  color: var(--ink);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pill-list li,
.tag {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.32rem 0.66rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.feature-trip {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.82fr);
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
  align-items: stretch;
}

.feature-trip .media-frame {
  min-height: clamp(310px, 34vw, 470px);
}

.route-map {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.72rem;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 247, 0.2);
  border-radius: var(--radius);
  padding: clamp(1.05rem, 2vw, 1.55rem);
  background:
    linear-gradient(145deg, rgba(88, 88, 50, 0.98), rgba(42, 51, 42, 0.98)),
    var(--moss);
  color: var(--white);
  box-shadow: 0 28px 78px rgba(32, 27, 16, 0.18);
}

.route-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 253, 247, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(13, 12, 8, 0), rgba(13, 12, 8, 0.18));
  pointer-events: none;
}

.route-map > * {
  position: relative;
  z-index: 1;
}

.route-map .eyebrow {
  margin-bottom: 0;
  color: var(--yellow);
}

.route-map h3 {
  max-width: 12.5ch;
  color: var(--white);
  font-size: clamp(1.65rem, 2.55vw, 2.25rem);
}

.route-map p {
  max-width: 34rem;
  color: rgba(255, 253, 247, 0.78);
  font-size: 0.93rem;
  line-height: 1.58;
}

.route-facts {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0.3rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 253, 247, 0.18);
}

.route-facts li {
  display: grid;
  grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1fr);
  gap: 0.82rem;
  padding: 0.56rem 0;
  border-bottom: 1px solid rgba(255, 253, 247, 0.16);
}

.route-facts span {
  color: rgba(255, 253, 247, 0.58);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.route-facts strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.15;
}

.route-map .pill-list {
  margin-top: 0.25rem;
}

.route-map .cta-row {
  margin-top: 0.65rem;
}

.route-map .pill-list li {
  border-color: rgba(255, 253, 247, 0.28);
  background: rgba(255, 253, 247, 0.08);
  color: rgba(255, 253, 247, 0.84);
  font-size: 0.66rem;
  font-weight: 700;
}

.route-line {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: 0.55rem;
  padding-left: 1.5rem;
  color: rgba(255, 253, 247, 0.82);
}

.route-line::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0.35rem;
  width: 2px;
  background: var(--yellow);
}

.route-line li {
  position: relative;
  list-style: none;
}

.route-line li::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: -1.5rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--yellow);
}

.page-hero {
  min-height: 58svh;
  display: flex;
  align-items: flex-end;
}

.page-hero--minimal {
  min-height: 100svh;
  align-items: flex-end;
}

.page-hero--minimal::after {
  background:
    linear-gradient(90deg, rgba(13, 12, 8, 0.54), rgba(13, 12, 8, 0.1) 58%, rgba(13, 12, 8, 0.34)),
    linear-gradient(0deg, rgba(13, 12, 8, 0.68), rgba(13, 12, 8, 0.08) 55%, rgba(13, 12, 8, 0.18));
}

.page-hero--minimal .page-hero__content {
  display: grid;
  justify-items: start;
  max-width: 760px;
  margin-left: max(var(--layout-side), calc((100vw - var(--max)) / 2));
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.page-hero--minimal h1 {
  max-width: 10ch;
  font-size: clamp(2.8rem, 5.2vw, 4.75rem);
}

.page-hero--minimal .lead {
  max-width: 620px;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.62;
}

body[data-route="produccion"] .page-hero {
  min-height: 100svh;
  align-items: center;
}

body[data-route="produccion"] .page-hero::after {
  background:
    linear-gradient(90deg, rgba(13, 12, 8, 0.58), rgba(13, 12, 8, 0.1) 55%, rgba(13, 12, 8, 0.44)),
    linear-gradient(0deg, rgba(13, 12, 8, 0.56), rgba(13, 12, 8, 0.08) 52%, rgba(13, 12, 8, 0.3));
}

body[data-route="produccion"] .page-hero__content {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

body[data-route="produccion"] .page-hero h1 {
  max-width: 980px;
  font-size: 3.65rem;
}

body[data-route="produccion"] .page-hero .lead {
  max-width: 680px;
}

body[data-route="produccion"] .page-hero .cta-row {
  justify-content: center;
}

.breadcrumbs {
  margin-bottom: 1rem;
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.project-card {
  position: relative;
  min-height: 320px;
  grid-column: span 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  will-change: transform;
  transition: transform 240ms ease, box-shadow 240ms ease, filter 240ms ease;
}

html.is-ready [data-category] {
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    filter 260ms ease,
    box-shadow 240ms ease;
}

html.is-ready [data-category]:not(.is-filter-visible),
html.is-ready body.is-filtering [data-category] {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  filter: blur(4px);
}

.project-card--wide {
  grid-column: span 8;
}

.portfolio-grid--commissioned {
  grid-auto-flow: dense;
  gap: clamp(0.65rem, 1.2vw, 0.95rem);
}

.portfolio-grid--commissioned .project-card {
  min-height: clamp(240px, 25vw, 390px);
  border-radius: 2px;
  box-shadow: none;
}

.portfolio-grid--commissioned .project-card--wide {
  grid-column: span 7;
  min-height: clamp(300px, 32vw, 520px);
}

.portfolio-grid--commissioned .project-card:nth-child(2) {
  grid-column: span 5;
}

.portfolio-grid--commissioned .project-card:nth-child(n + 3) {
  grid-column: span 4;
}

.portfolio-grid--commissioned .project-card img,
.portfolio-grid--commissioned .project-card video {
  min-height: inherit;
  filter: saturate(0.92) contrast(1.04);
}

.portfolio-grid--commissioned .project-card__body {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    linear-gradient(0deg, rgba(13, 12, 8, 0.84), rgba(13, 12, 8, 0.02));
  transform: translateY(calc(100% - 4.5rem));
}

.portfolio-grid--commissioned .project-card:hover .project-card__body,
.portfolio-grid--commissioned .project-card:focus-within .project-card__body {
  background:
    linear-gradient(0deg, rgba(13, 12, 8, 0.9), rgba(13, 12, 8, 0.08));
  transform: translateY(0);
}

.portfolio-grid--commissioned .project-card h3 {
  font-size: clamp(1.28rem, 1.9vw, 1.95rem);
}

.portfolio-grid--commissioned .project-card p {
  color: rgba(255, 253, 247, 0.76);
  font-size: 0.84rem;
}

.portfolio-grid--compact {
  max-width: 1080px;
}

.portfolio-grid--compact .project-card,
.portfolio-grid--compact .project-card--wide {
  grid-column: span 4;
  min-height: 260px;
}

.portfolio-grid--compact .project-card img,
.portfolio-grid--compact .project-card video {
  min-height: 260px;
}

.portfolio-grid--compact .project-card h3 {
  font-size: 1.55rem;
}

.project-card img,
.project-card video {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  transition: transform 400ms ease;
}

.project-card:hover img,
.project-card:hover video {
  transform: scale(1.04);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(13, 12, 8, 0.26);
}

.project-link,
.article-link {
  display: block;
  height: 100%;
  color: inherit;
}

.project-link::after,
.article-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.project-card__body {
  position: absolute;
  inset: auto 0 0;
  padding: 1.1rem;
  background: linear-gradient(0deg, rgba(13, 12, 8, 0.86), rgba(13, 12, 8, 0));
  transition: transform 220ms ease, background 220ms ease;
}

.project-card:hover .project-card__body {
  background: linear-gradient(0deg, rgba(13, 12, 8, 0.92), rgba(13, 12, 8, 0.04));
  transform: translateY(-4px);
}

.link-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.link-cue::after {
  content: "->";
  transition: transform 180ms ease, opacity 180ms ease;
}

.project-card:hover .link-cue::after,
.article-card:hover .link-cue::after {
  transform: translateX(4px);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.detail-block {
  display: grid;
  gap: 1rem;
}

.detail-list {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.detail-list li {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.detail-list strong {
  font-size: 0.72rem;
  text-transform: uppercase;
}

.article-body {
  max-width: 780px;
}

.article-body p {
  margin-top: 1rem;
  font-size: 1.08rem;
}

.quote-band {
  border-left: 3px solid var(--yellow);
  padding: 0.7rem 0 0.7rem 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.3vw, 2.15rem);
  line-height: 1.18;
}

.next-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.back-link::before {
  content: "<-";
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.filter-bar button {
  border: 1px solid rgba(13, 12, 8, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: 0.48rem 0.72rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.filter-bar button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.filter-bar button:hover {
  transform: translateY(-1px);
  border-color: var(--yellow-deep);
}

.section--portfolio {
  background: var(--paper);
}

.section--portfolio-premium {
  background:
    linear-gradient(180deg, #0b0b08 0%, #050504 100%);
  color: var(--white);
  padding-top: clamp(2.6rem, 5vw, 4.7rem);
  padding-bottom: clamp(2.8rem, 5.6vw, 5rem);
}

.section--portfolio-premium .eyebrow {
  color: var(--yellow);
}

.section--portfolio-premium p {
  color: rgba(255, 253, 247, 0.7);
}

.portfolio-head {
  align-items: start;
}

.portfolio-head h2 {
  max-width: 840px;
  font-size: clamp(2.35rem, 4vw, 3.65rem);
}

.portfolio-head p {
  max-width: 520px;
  padding-top: 0.3rem;
}

.section--portfolio-premium .filter-bar button {
  border-color: rgba(255, 253, 247, 0.24);
  color: rgba(255, 253, 247, 0.82);
}

.section--portfolio-premium .filter-bar button[aria-pressed="true"] {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

.section--portfolio-premium .filter-bar button:hover {
  border-color: var(--yellow);
  color: var(--white);
}

body[data-route="produccion"] .portfolio-grid--commissioned {
  gap: clamp(0.62rem, 1.15vw, 0.9rem);
}

body[data-route="produccion"] .portfolio-grid--commissioned .project-card {
  border: 1px solid rgba(255, 253, 247, 0.12);
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

body[data-route="produccion"] .portfolio-grid--commissioned .project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(255, 253, 247, 0.1);
  border-radius: inherit;
  pointer-events: none;
}

body[data-route="produccion"] .portfolio-grid--commissioned .project-card img,
body[data-route="produccion"] .portfolio-grid--commissioned .project-card video {
  filter: saturate(0.94) contrast(1.08) brightness(0.9);
}

body[data-route="produccion"] .portfolio-grid--commissioned .project-card:hover img,
body[data-route="produccion"] .portfolio-grid--commissioned .project-card:hover video {
  filter: saturate(1.04) contrast(1.12) brightness(0.94);
}

body[data-route="produccion"] .portfolio-grid--commissioned .project-card__body {
  z-index: 2;
  min-height: 34%;
  align-content: end;
  background:
    linear-gradient(0deg, rgba(5, 5, 4, 0.92), rgba(5, 5, 4, 0.2) 72%, rgba(5, 5, 4, 0));
  transform: translateY(0);
}

body[data-route="produccion"] .portfolio-grid--commissioned .project-card h3 {
  max-width: 11ch;
  color: var(--white);
}

body[data-route="produccion"] .portfolio-grid--commissioned .project-card p {
  max-width: 32rem;
}

body[data-route="produccion"] .production-clients {
  background:
    linear-gradient(180deg, #fffaf0, var(--paper));
}

body[data-route="produccion"] .production-clients .work-with__intro h2 {
  font-size: 3.35rem;
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(340px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form-layout h2 {
  font-size: 3.1rem;
  line-height: 1.06;
}

.form-layout .shop-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-layout .product-card h3 {
  font-size: 1.65rem;
  overflow-wrap: anywhere;
}

.form-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13, 12, 8, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 253, 247, 0.98), rgba(245, 237, 219, 0.9));
  color: var(--ink);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 24px 72px rgba(32, 27, 16, 0.1);
}

.form-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.25rem, 3vw, 2rem);
  width: 4.5rem;
  height: 2px;
  background: var(--yellow);
}

.form-panel > h3 {
  margin-bottom: 0.35rem;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
}

form {
  display: grid;
  gap: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

label {
  display: grid;
  gap: 0.42rem;
  color: rgba(13, 12, 8, 0.72);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid transparent;
  border-bottom-color: rgba(13, 12, 8, 0.3);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--ink);
  padding: 0.82rem 0.88rem;
  font: inherit;
  text-transform: none;
  box-shadow: inset 0 -1px 0 rgba(13, 12, 8, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--yellow-deep);
  background: var(--white);
  box-shadow: 0 5px 0 -3px rgba(243, 195, 24, 0.72);
  transform: translateY(-1px);
}

[aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.form-status {
  min-height: 1.4rem;
  font-size: 0.9rem;
  font-weight: 650;
}

.form-status[data-type="error"] {
  color: #b42318;
}

.form-status[data-type="success"] {
  color: #247044;
}

.form-status[data-type="progress"] {
  color: rgba(13, 12, 8, 0.66);
}

form button[type="submit"]:disabled {
  cursor: wait;
  opacity: 0.68;
}

.aside-note {
  border-left: 4px solid var(--yellow);
  padding-left: 1rem;
}

.contact-strip,
.contact-links-large {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.contact-strip a,
.contact-links-large a {
  border: 1px solid rgba(13, 12, 8, 0.24);
  border-radius: 999px;
  padding: 0.62rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 650;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.contact-strip a:hover,
.contact-links-large a:hover {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
  transform: translateY(-1px);
}

.contact-strip--light a {
  border-color: rgba(255, 253, 247, 0.32);
  color: var(--white);
}

.contact-direct {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(320px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.work-with {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.78fr);
  gap: clamp(2.4rem, 6vw, 6rem);
  align-items: center;
}

.work-with__intro h2 {
  max-width: 900px;
}

.work-with__panel {
  position: relative;
  display: grid;
  gap: 1rem;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(243, 195, 24, 0.12), transparent 38%),
    var(--ink);
  color: var(--white);
  padding: clamp(1.25rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lift);
}

.work-with__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7rem;
  height: 4px;
  background: var(--yellow);
}

.work-with__panel p {
  color: rgba(255, 253, 247, 0.82);
  font-weight: 400;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0;
  margin: 0.35rem 0 0.2rem;
  list-style: none;
}

.work-tags li {
  border: 1px solid rgba(255, 253, 247, 0.24);
  border-radius: 999px;
  color: var(--yellow);
  padding: 0.45rem 0.68rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.work-with__panel .button {
  justify-self: start;
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

.contact-links-large {
  display: grid;
  gap: 0.8rem;
}

.contact-links-large a {
  padding: 1rem 1.15rem;
  background: var(--ink);
  color: var(--white);
  font-size: 1.1rem;
}

.instagram-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.instagram-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.footer {
  background: var(--ink);
  color: var(--white);
  padding: 3rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.42fr) minmax(210px, 0.55fr) minmax(260px, 0.7fr);
  gap: 2rem;
}

.footer a {
  color: var(--white);
}

.footer .lead {
  color: var(--yellow);
}

.footer-links {
  display: grid;
  gap: 0.45rem;
}

.footer-newsletter {
  display: grid;
  gap: 0.8rem;
}

.footer-newsletter h3 {
  font-size: 1.25rem;
}

.footer-newsletter form {
  gap: 0.7rem;
}

.footer-newsletter input {
  background: rgba(255, 253, 247, 0.08);
  color: var(--white);
  border-color: rgba(255, 253, 247, 0.24);
}

.footer-newsletter .form-status {
  color: rgba(255, 253, 247, 0.76);
}

/* Client feedback refinements */
.hero {
  min-height: 86svh;
}

.hero h1 {
  max-width: 26ch;
  font-size: clamp(2.1rem, 3.2vw, 3.1rem);
  line-height: 1.12;
}

.hero .eyebrow {
  margin-bottom: 0.7rem;
  font-size: 0.66rem;
}

.hero .lead {
  color: var(--white);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  font-weight: 500;
}

.hero-content > p:not(.lead) {
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.7;
}

.hero .cta-row {
  margin-top: 1.4rem;
}

.hero .button {
  min-height: 40px;
  padding: 0.6rem 0.95rem;
  font-size: 0.69rem;
}

.site-header {
  background: linear-gradient(180deg, rgba(13, 12, 8, 0.32), rgba(13, 12, 8, 0.02));
}

.reel-card {
  position: relative;
  display: grid;
  align-self: center;
  justify-self: end;
  width: min(100%, 360px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(13, 12, 8, 0.14);
  border-radius: var(--radius);
  background: #050504;
  box-shadow: 0 34px 90px rgba(32, 27, 16, 0.2);
}

.reel-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.05) brightness(0.86);
}

.reel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 5, 4, 0.02), rgba(5, 5, 4, 0.22) 58%, rgba(5, 5, 4, 0.72)),
    linear-gradient(90deg, rgba(243, 195, 24, 0.12), transparent 36%);
}

.reel-card figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  display: grid;
  gap: 0.16rem;
  color: var(--white);
}

.reel-card figcaption span {
  color: var(--yellow);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reel-card figcaption strong {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1;
}

.reel-card--home {
  grid-template-columns: 1fr;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 1px solid rgba(13, 12, 8, 0.1);
  border-radius: var(--radius-media);
  box-shadow: 0 28px 80px rgba(32, 27, 16, 0.16);
}

.section--home-story {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 6.5vw, 6.8rem);
  padding-bottom: clamp(3.5rem, 6.5vw, 6.8rem);
  background: #fffdf7;
}

.section--home-story::after {
  content: none;
}

.home-story {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.74fr) minmax(380px, 1fr);
  gap: clamp(2.2rem, 4.5vw, 4.5rem);
  align-items: center;
}

.home-story__copy {
  max-width: 560px;
}

.home-story__copy h2 {
  max-width: 17ch;
  font-size: clamp(1.95rem, 2.8vw, 2.65rem);
  line-height: 1.1;
}

.home-story__copy p {
  max-width: 52ch;
  font-size: 0.92rem;
}

.home-story__lead {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}

.reel-card--home::after {
  display: none;
}

.reel-card--home .reel-card__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #050504;
}

.reel-card--home .reel-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 5, 4, 0.38)),
    linear-gradient(90deg, rgba(243, 195, 24, 0.1), transparent 32%);
}

.reel-card--home video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.reel-card--home figcaption {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.6rem, 3vw, 2.7rem);
  background: #11110e;
  color: var(--white);
}

.reel-card--home figcaption::before {
  content: "";
  width: 3rem;
  height: 2px;
  background: var(--yellow);
}

.reel-card--home figcaption div {
  display: grid;
  gap: 0.6rem;
  margin-top: auto;
}

.reel-card--home figcaption strong {
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
  line-height: 0.98;
}

.reel-card--home figcaption p {
  margin: 0;
  color: rgba(255, 253, 247, 0.68);
  font-size: 0.84rem;
  line-height: 1.65;
}

/* Lámina: el bloque gris entra como una hoja con esquinas redondeadas
   montándose sobre la sección blanca anterior */
.section--portfolio-teaser {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(24px, 3.5vw, 48px));
  border-radius: clamp(24px, 3.5vw, 48px) clamp(24px, 3.5vw, 48px) 0 0;
  padding-top: calc(clamp(24px, 3.5vw, 48px) + clamp(1.8rem, 2.6vw, 2.6rem));
  background: #f4f4f0;
  box-shadow: 0 -26px 56px rgba(32, 27, 16, 0.08);
}

.section--portfolio-teaser .section-head {
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.section--portfolio-teaser .section-head h2 {
  max-width: 18ch;
  font-size: clamp(2.3rem, 3.2vw, 3.3rem);
}

.section--portfolio-teaser .section-head p {
  max-width: 560px;
}

.portfolio-grid--home-featured {
  counter-reset: doc;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: clamp(0.85rem, 1.6vw, 1.2rem);
}

/* Si al añadir contenido queda una tarjeta suelta en la última fila, se
   estira a todo el ancho (se lee como pieza destacada) en vez de dejar un
   hueco. Solo actúa con un número impar; con número par no cambia nada. */
.portfolio-grid--home-featured .project-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.portfolio-grid--home-featured .project-card,
.portfolio-grid--home-featured .project-card--wide {
  counter-increment: doc;
  grid-column: auto;
  min-height: clamp(260px, 31vw, 410px);
  border: 1px solid rgba(13, 12, 8, 0.08);
}

/* Numeración editorial, como en las piezas de producción */
.portfolio-grid--home-featured .project-card::after {
  content: "0" counter(doc);
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  z-index: 2;
  color: rgba(255, 253, 247, 0.65);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.portfolio-grid--home-featured .card-meta {
  color: var(--yellow);
}

.portfolio-grid--home-featured .project-card:hover .link-cue {
  color: var(--yellow);
}

.portfolio-grid--home-featured .project-card img {
  min-height: clamp(260px, 31vw, 410px);
}

.portfolio-grid--home-featured .project-card__body {
  padding: clamp(1rem, 2vw, 1.35rem);
  background: linear-gradient(0deg, rgba(5, 5, 4, 0.86), rgba(5, 5, 4, 0.04));
  color: #fffdf7;
}

.portfolio-grid--home-featured .project-card__body p,
.portfolio-grid--home-featured .project-card__body h3,
.portfolio-grid--home-featured .project-card__body .link-cue {
  color: #fffdf7 !important;
}

.section--portfolio-teaser .cta-row {
  margin-top: clamp(1.3rem, 3vw, 2.1rem);
}

/* Home · bloque documentales tipo portfolio: encabezado centrado + miniaturas */
body[data-route="home"] .section--portfolio-teaser .section-head {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  gap: 0.55rem;
}

body[data-route="home"] .section--portfolio-teaser .section-head > div {
  width: 100%;
}

body[data-route="home"] .section--portfolio-teaser .section-head h2 {
  max-width: none;
  font-size: clamp(1.7rem, 2.3vw, 2.5rem);
  line-height: 1.1;
}

body[data-route="home"] .section--portfolio-teaser .section-head p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

body[data-route="home"] .portfolio-grid--home-featured {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
}

body[data-route="home"] .portfolio-grid--home-featured .project-card,
body[data-route="home"] .portfolio-grid--home-featured .project-card--wide {
  min-height: 0;
  aspect-ratio: 16 / 10;
}

body[data-route="home"] .portfolio-grid--home-featured .project-card img {
  min-height: 0;
  height: 100%;
}

@media (max-width: 640px) {
  body[data-route="home"] .portfolio-grid--home-featured {
    grid-template-columns: minmax(0, 1fr);
  }
}

.newsletter-inline {
  align-self: center;
  display: grid;
  gap: 0.85rem;
  max-width: 660px;
  width: 100%;
}

.newsletter-inline form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.newsletter-inline label {
  color: rgba(13, 12, 8, 0.76);
}

.newsletter-inline input {
  min-height: 50px;
  background: rgba(255, 253, 247, 0.25);
  border-color: rgba(13, 12, 8, 0.28);
}

.section--pillars-about {
  background: #fffaf0;
}

.pillar-story-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.2rem);
}

.pillar-story-card {
  overflow: hidden;
  border: 1px solid rgba(13, 12, 8, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.78);
  box-shadow: 0 18px 54px rgba(32, 27, 16, 0.06);
}

.pillar-story-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04);
}

.pillar-story-card h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

body[data-route="nosotros"] .page-hero--minimal {
  min-height: 88svh;
}

body[data-route="produccion"] .page-hero {
  min-height: 86svh;
  align-items: center;
}

body[data-route="produccion"] .page-hero__content {
  justify-items: start;
  max-width: 760px;
  margin-left: max(var(--layout-side), calc((100vw - var(--max)) / 2));
  text-align: left;
  padding-bottom: clamp(3.2rem, 6vw, 5.2rem);
}

body[data-route="produccion"] .page-hero h1 {
  max-width: 11ch;
  font-size: clamp(2.75rem, 4.8vw, 3.55rem);
  line-height: 1;
}

body[data-route="produccion"] .page-hero .cta-row {
  justify-content: flex-start;
}

.section--production-intro {
  background: var(--white);
  color: var(--ink);
  padding-top: clamp(2.8rem, 5vw, 4.6rem);
  padding-bottom: clamp(2.2rem, 3.6vw, 3.4rem);
}

.section--production-intro::after {
  background: linear-gradient(90deg, transparent, rgba(13, 12, 8, 0.12), transparent);
}

.production-intro {
  grid-template-columns: minmax(0, 0.96fr) minmax(260px, 0.52fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.production-intro__copy h2 {
  max-width: 10.5ch;
  color: var(--ink);
  font-size: clamp(2.1rem, 3.7vw, 3.05rem);
}

.production-intro__copy p {
  color: rgba(13, 12, 8, 0.72);
}

.reel-card--production {
  width: min(100%, 340px);
}

body[data-route="produccion"] .production-services {
  background: #f4f4f0;
  padding-top: clamp(2.2rem, 3.6vw, 3.4rem);
}

.service-columns--editorial {
  gap: clamp(1.6rem, 4vw, 3.8rem);
}

body[data-route="produccion"] .service-columns--editorial .service-column {
  gap: 1rem;
  overflow: visible;
  padding-top: 1.05rem;
  border: 0;
  border-top: 1px solid rgba(13, 12, 8, 0.62);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-route="produccion"] .service-columns--editorial .service-column::before {
  top: -1px;
  width: 4.8rem;
  height: 1px;
  background: var(--yellow);
}

body[data-route="produccion"] .service-columns--editorial .service-column > .card-meta,
body[data-route="produccion"] .service-columns--editorial .service-column > h3,
body[data-route="produccion"] .service-columns--editorial .service-list {
  padding-right: 0;
  padding-left: 0;
}

body[data-route="produccion"] .service-columns--editorial .service-column > h3 {
  max-width: 11ch;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
}

body[data-route="produccion"] .service-columns--editorial .service-list {
  padding-bottom: 0;
}

/* Lámina oscura: misma lógica que el porfolio de documentales más arriba
   en esta página, para que las dos uniones se lean con el mismo lenguaje */
body[data-route="produccion"] .production-clients {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: calc(-1 * clamp(28px, 4vw, 56px));
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  padding-top: calc(clamp(28px, 4vw, 56px) + clamp(1.6rem, 2.4vw, 2.4rem));
  background:
    linear-gradient(135deg, rgba(243, 195, 24, 0.08), transparent 34%),
    #0b0b08;
  box-shadow: 0 -30px 70px rgba(9, 9, 8, 0.22);
}

/* Lámina clara del formulario montada sobre la anterior */
body[data-route="produccion"] .section--production-form {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(28px, 4vw, 56px));
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  padding-top: calc(clamp(28px, 4vw, 56px) + clamp(2rem, 2.8vw, 2.8rem));
}

body[data-route="produccion"] .production-clients .work-with {
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.78fr);
  justify-items: stretch;
  gap: clamp(2.2rem, 5vw, 5.8rem);
  text-align: left;
}

body[data-route="produccion"] .production-clients .work-with__intro h2 {
  max-width: 720px;
  color: var(--white);
  font-size: clamp(2rem, 3.7vw, 3.05rem);
  line-height: 1.02;
}

body[data-route="produccion"] .production-clients .work-with__panel {
  max-width: none;
  justify-items: start;
  border: 1px solid rgba(255, 253, 247, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.045);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.18);
  padding: clamp(1.2rem, 2.8vw, 2rem);
}

body[data-route="produccion"] .production-clients .work-with__panel::before {
  display: block;
  width: 4.6rem;
  height: 2px;
  background: var(--yellow);
}

body[data-route="produccion"] .production-clients .work-with__panel p {
  max-width: 42rem;
  font-size: 0.98rem;
}

body[data-route="produccion"] .production-clients .work-tags {
  justify-content: flex-start;
}

.section--portfolio-gallery {
  position: relative;
  background: #f4f4f0;
  color: var(--ink);
}

.section--portfolio-gallery .portfolio-head {
  align-items: end;
}

.section--portfolio-gallery .portfolio-head h2 {
  max-width: 860px;
  font-size: clamp(2.35rem, 4.4vw, 4.05rem);
}

.section--portfolio-gallery .portfolio-head p,
.section--portfolio-gallery p {
  color: rgba(13, 12, 8, 0.68);
}

.section--portfolio-gallery .filter-bar button {
  border-color: rgba(13, 12, 8, 0.28);
  color: var(--ink);
}

.section--portfolio-gallery .filter-bar button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

body[data-route="produccion"] .section--portfolio-gallery .portfolio-grid--commissioned .project-card {
  grid-column: span 6;
  min-height: clamp(320px, 34vw, 520px);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 22px 70px rgba(32, 27, 16, 0.12);
}

body[data-route="produccion"] .section--portfolio-gallery .portfolio-grid--commissioned .project-card img {
  filter: saturate(0.92) contrast(1.06) brightness(0.92);
}

body[data-route="produccion"] .section--portfolio-gallery .portfolio-grid--commissioned .project-card__body {
  min-height: 40%;
  background: linear-gradient(0deg, rgba(5, 5, 4, 0.92), rgba(5, 5, 4, 0.48) 58%, rgba(5, 5, 4, 0.02));
}

body[data-route="produccion"] .section--portfolio-gallery .portfolio-grid--commissioned .project-card__body p {
  color: rgba(255, 253, 247, 0.84);
}

body[data-route="produccion"] .section--portfolio-gallery .portfolio-grid--commissioned .link-cue {
  color: var(--white);
}

.anchor-offset {
  position: relative;
  display: block;
  top: -90px;
  height: 0;
}

.section--process-line {
  background: var(--white);
}

.section--process-line .section-head {
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(1.8rem, 4vw, 3.4rem);
}

.section--process-line .section-head h2 {
  font-size: clamp(1.95rem, 3.7vw, 2.95rem);
}

.section--process-line .steps-grid {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
}

.section--process-line .steps-grid::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  right: 5%;
  left: 5%;
  height: 1px;
  background: rgba(13, 12, 8, 0.18);
}

.section--process-line .value-card {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.section--process-line .value-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.section--process-line .card-meta {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
}

.section--production-form {
  background: #fffaf0;
  color: var(--ink);
}

.section--production-form .form-layout {
  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 0.95fr);
  align-items: center;
}

.section--production-form h2 {
  color: var(--ink);
  font-size: clamp(1.95rem, 3.5vw, 2.95rem);
}

.section--production-form p {
  color: rgba(13, 12, 8, 0.72);
}

.section--production-form .form-panel {
  border-color: rgba(13, 12, 8, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 253, 247, 0.98), rgba(245, 237, 219, 0.9));
  color: var(--ink);
  box-shadow: 0 24px 72px rgba(32, 27, 16, 0.1);
}

.section--production-form input,
.section--production-form select,
.section--production-form textarea {
  border-color: transparent;
  border-bottom-color: rgba(13, 12, 8, 0.3);
  background: rgba(255, 255, 255, 0.56);
  color: var(--ink);
}

.section--production-form input::placeholder,
.section--production-form textarea::placeholder {
  color: rgba(13, 12, 8, 0.42);
}

.section--production-form .contact-strip a {
  color: var(--ink);
}

.custom-section {
  background: var(--white);
}

.custom-section--cream {
  background: #f4f4f0;
}

.custom-section--dark {
  background: var(--ink);
  color: var(--white);
}

.custom-section--dark p {
  color: rgba(255, 253, 247, 0.76);
}

.custom-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.custom-section__copy {
  display: grid;
  gap: 1rem;
}

.custom-section__copy h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.custom-section__media {
  overflow: hidden;
  min-height: 320px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: var(--shadow);
}

.custom-section__media img,
.custom-section__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer {
  padding: clamp(2.4rem, 4vw, 3.2rem) 0 1.6rem;
}

.footer-grid {
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.footer::before {
  content: "";
  display: block;
  width: min(calc(100% - var(--layout-gutter)), var(--max));
  height: 1px;
  margin: 0 auto 1.2rem;
  background: rgba(255, 253, 247, 0.12);
}

.footer-title,
.footer-newsletter h3 {
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer .lead {
  display: grid;
  gap: 0.35rem;
  color: rgba(255, 253, 247, 0.82);
}

.footer .lead strong {
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal {
  margin-top: 1.3rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 253, 247, 0.16);
  color: rgba(255, 253, 247, 0.72);
  font-size: 0.8rem;
}

.legal a {
  color: var(--white);
}

.legal .admin-entry {
  color: rgba(255, 253, 247, 0.46);
  font-size: 0.78rem;
}

.legal .admin-entry:hover {
  color: var(--yellow);
}

.admin-page {
  min-height: 100svh;
  background: var(--ink);
  color: var(--white);
}

.admin-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.admin-panel {
  width: min(100%, 920px);
  display: grid;
  gap: 1.3rem;
  border: 1px solid rgba(255, 253, 247, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.06);
  padding: clamp(1.3rem, 4vw, 2.6rem);
}

.admin-panel .lead,
.admin-note {
  max-width: 58rem;
  color: rgba(255, 253, 247, 0.76);
}

.admin-login,
.admin-tools {
  display: grid;
  gap: 1rem;
}

.admin-login[hidden] {
  display: none;
}

.admin-login input {
  background: rgba(255, 253, 247, 0.08);
  color: var(--white);
  border-color: rgba(255, 253, 247, 0.3);
}

.admin-dashboard {
  display: grid;
  gap: 1.4rem;
}

.admin-dashboard[hidden] {
  display: none;
}

.admin-panel.is-unlocked {
  gap: 0.85rem;
}

.admin-panel.is-unlocked > .eyebrow,
.admin-panel.is-unlocked > h1,
.admin-panel.is-unlocked > .lead,
.admin-panel.is-unlocked > .admin-note {
  display: none;
}

.admin-panel.is-unlocked > .brand {
  margin-bottom: 0.3rem;
}

.admin-page p {
  color: rgba(255, 253, 247, 0.76);
}

.admin-management {
  display: grid;
  gap: 1rem;
  border-top: 1px solid rgba(255, 253, 247, 0.14);
  padding-top: 1.25rem;
}

.admin-management h2 {
  font-size: 2.1rem;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.admin-content-form {
  display: grid;
  gap: 0.85rem;
}

.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.admin-list {
  display: grid;
  gap: 0.65rem;
}

.admin-empty {
  border: 1px dashed rgba(255, 253, 247, 0.18);
  border-radius: var(--radius);
  padding: 0.85rem;
}

.admin-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid rgba(255, 253, 247, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.06);
  padding: 0.85rem;
}

.admin-list-item strong {
  display: block;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.05;
}

.admin-list-item p {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

.admin-list-item button {
  border: 1px solid rgba(255, 253, 247, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.08);
  color: var(--white);
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.admin-toolbar {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: min(100% - 2rem, 920px);
  margin: 0 auto;
  border: 1px solid rgba(255, 253, 247, 0.18);
  border-radius: var(--radius);
  background: rgba(13, 12, 8, 0.94);
  color: var(--white);
  padding: 0.75rem;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.admin-toolbar strong {
  margin-right: auto;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.admin-toolbar button {
  border: 1px solid rgba(255, 253, 247, 0.24);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.08);
  color: var(--white);
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-toolbar button:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.admin-toolbar [data-admin-status] {
  min-width: 13rem;
  color: rgba(255, 253, 247, 0.72);
  font-size: 0.8rem;
}

html.admin-mode [contenteditable="true"] {
  outline: 1px dashed rgba(243, 195, 24, 0.65);
  outline-offset: 4px;
  border-radius: 0.2rem;
}

html.admin-mode [contenteditable="true"]:focus {
  outline: 2px solid var(--yellow);
  background: rgba(243, 195, 24, 0.12);
}

html.admin-mode [contenteditable="true"][data-admin-empty="true"] {
  display: block !important;
  width: min(100%, 32rem);
  min-width: 12rem;
  min-height: 1.5em !important;
}

html.admin-mode [data-admin-image="true"] {
  cursor: pointer;
  outline: 2px dashed rgba(243, 195, 24, 0.72);
  outline-offset: 4px;
  transition: outline-color 180ms ease, filter 180ms ease;
}

html.admin-mode [data-admin-image="true"]:hover {
  outline-color: var(--yellow);
  filter: saturate(1.08) contrast(1.04);
}

.admin-image-button {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  background: rgba(13, 12, 8, 0.9);
  color: var(--yellow);
  padding: 0.42rem 0.65rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.admin-content-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  border: 1px solid rgba(255, 253, 247, 0.32);
  border-radius: 999px;
  background: rgba(13, 12, 8, 0.82);
  color: var(--white);
  padding: 0.45rem 0.62rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.admin-content-button:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.admin-image-button[hidden] {
  display: none;
}

.admin-image-button:hover {
  background: var(--yellow);
  color: var(--ink);
}

.admin-image-dialog {
  position: fixed;
  right: 1rem;
  bottom: 6.5rem;
  z-index: 10000;
  width: min(100% - 2rem, 460px);
  border: 1px solid rgba(255, 253, 247, 0.18);
  border-radius: var(--radius);
  background: rgba(13, 12, 8, 0.96);
  color: var(--white);
  padding: 1rem;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}

.admin-image-dialog[hidden] {
  display: none;
}

.admin-image-dialog form {
  display: grid;
  gap: 0.9rem;
}

.admin-image-dialog strong {
  font-size: 0.84rem;
  text-transform: uppercase;
}

.admin-image-dialog input {
  background: rgba(255, 253, 247, 0.08);
  color: var(--white);
  border-color: rgba(255, 253, 247, 0.28);
}

.admin-image-dialog input[type="file"] {
  padding: 0.8rem;
  cursor: pointer;
}

.admin-image-dialog input[type="file"]::file-selector-button {
  border: 1px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--ink);
  margin-right: 0.8rem;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-image-dialog__hint {
  margin: -0.2rem 0 0;
  color: rgba(255, 253, 247, 0.68);
  font-size: 0.82rem;
}

.admin-image-dialog__preview {
  margin: -0.3rem 0 0;
  padding: 0.6rem;
  border: 1px solid rgba(255, 253, 247, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.04);
}

.admin-image-dialog__preview img {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: calc(var(--radius) - 4px);
  background: rgba(0, 0, 0, 0.3);
}

.admin-image-dialog__preview-status {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.76rem;
  color: rgba(255, 253, 247, 0.62);
}

.admin-image-dialog__preview.is-broken {
  border-color: #e05a4e;
}

.admin-image-dialog__preview.is-broken .admin-image-dialog__preview-status {
  color: #ff8b7d;
  font-weight: 700;
}

.admin-image-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.admin-image-dialog button {
  border: 1px solid rgba(255, 253, 247, 0.24);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.08);
  color: var(--white);
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-image-dialog button[type="submit"] {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

@media (max-width: 940px) {
  :root {
    --layout-side: clamp(1rem, 4vw, 1.4rem);
    --layout-gutter: clamp(1.6rem, 7vw, 2rem);
  }

  h1 {
    font-size: 3.75rem;
  }

  h2 {
    font-size: 2.65rem;
  }

  .form-layout h2 {
    font-size: 2.75rem;
  }

  h3 {
    font-size: 1.55rem;
  }

  .lead {
    font-size: 1.06rem;
  }

  .quote-band {
    font-size: 2.1rem;
  }

  .menu-toggle {
    display: grid;
  }

  .site-nav {
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    max-height: calc(100svh - 74px);
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    gap: 0;
    padding: 0.8rem 1rem 1.2rem;
    background: rgba(13, 12, 8, 0.98);
    transform: translateY(-120%);
    transition: transform 180ms ease;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 3.75rem;
  }

  .site-nav[data-open="true"] {
    transform: translateY(0);
  }

  .site-nav a {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255, 253, 247, 0.12);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .section-head,
  .split,
  .split--reverse,
  .production-intro,
  .custom-section__layout,
  .service-columns,
  .work-with,
  .values-grid,
  .feature-trip,
  .detail-grid,
  .form-layout,
  .contact-direct,
  .dual-form-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* La cabecera del porfolio vuelve a una columna en pantallas estrechas */
  body[data-route="produccion"] .production-portfolio .portfolio-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.1rem;
  }

  body[data-route="produccion"] .production-portfolio .portfolio-head h2 {
    max-width: none;
  }

  body[data-route="produccion"] .production-portfolio .portfolio-head p {
    max-width: 46ch;
  }

  .production-intro__copy {
    max-width: none;
  }

  .production-intro__copy h2 {
    max-width: 12ch;
    font-size: 3.45rem;
  }

  .production-collage {
    min-height: clamp(460px, 76vw, 640px);
  }

  .feature-trip .media-frame {
    min-height: clamp(300px, 55vw, 460px);
  }

  .route-map h3 {
    max-width: 16ch;
  }

  .split--intro .text-stack {
    max-width: none;
    padding-top: 0;
  }

  .split--intro .media-frame {
    width: 100%;
    justify-self: stretch;
  }

  body[data-route="produccion"] .page-hero h1 {
    font-size: 3.55rem;
  }

  .service-column {
    gap: 0.95rem;
  }

  .service-column h3 {
    max-width: none;
  }

  body[data-route="produccion"] .service-column > h3 {
    font-size: 1.85rem;
  }

  .work-with__panel {
    max-width: 720px;
  }

  .value-item:nth-child(4),
  .value-item:nth-child(5) {
    grid-column: auto;
  }

  .admin-actions {
    grid-template-columns: 1fr 1fr;
  }

  .admin-form-grid,
  .admin-list-item {
    grid-template-columns: 1fr;
  }

  .admin-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .service-grid,
  .value-grid,
  .trip-grid,
  .article-grid,
  .shop-grid,
  .pillar-grid,
  .service-cluster,
  .steps-grid,
  .country-grid,
  .instagram-grid,
  .team-grid,
  .choice-grid {
    grid-template-columns: 1fr 1fr;
  }

  .project-card,
  .project-card--wide {
    grid-column: span 6;
  }

  .portfolio-grid--commissioned .project-card,
  .portfolio-grid--commissioned .project-card--wide,
  .portfolio-grid--commissioned .project-card:nth-child(2),
  .portfolio-grid--commissioned .project-card:nth-child(n + 3) {
    grid-column: span 6;
  }

  .portfolio-grid--compact .project-card,
  .portfolio-grid--compact .project-card--wide {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  :root {
    --layout-side: 1rem;
    --layout-gutter: 2rem;
  }

  .page-transition__frame {
    padding: 1.15rem;
  }

  .page-transition__word {
    font-size: 1.72rem;
  }

  .page-transition__sky {
    height: 44px;
  }

  .page-transition__sun {
    width: 24px;
    height: 24px;
  }

  .page-transition__caption {
    max-width: 17rem;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
  }

  h1 {
    font-size: 2.55rem;
  }

  h2 {
    font-size: 2.05rem;
  }

  .form-layout h2 {
    font-size: 2.15rem;
  }

  .form-layout .shop-grid {
    grid-template-columns: 1fr;
  }

  h3 {
    font-size: 1.32rem;
  }

  .nav-wrap {
    width: calc(100% - 1.25rem);
    min-height: 66px;
    gap: 0.55rem;
  }

  .brand {
    min-width: 0;
    gap: 0.55rem;
  }

  .brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand span {
    font-size: 1.18rem;
  }

  .brand img {
    width: 42px;
    height: 42px;
  }

  .site-nav {
    top: 66px;
    max-height: calc(100svh - 66px);
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .hero {
    min-height: 88svh;
  }

  body[data-route="produccion"] .page-hero {
    min-height: 100svh;
  }

  .hero h1 {
    font-size: 2.05rem;
  }

  .page-hero h1 {
    font-size: 2.72rem;
  }

  body[data-route="produccion"] .page-hero h1 {
    font-size: 2.72rem;
  }

  .service-column h3 {
    font-size: 1.65rem;
  }

  .service-list li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .service-list p {
    font-size: 0.94rem;
  }

  .values-head {
    justify-items: start;
    text-align: left;
  }

  .value-item {
    max-width: none;
  }

  .value-icon {
    width: 34px;
    height: 34px;
  }

  .work-with__panel {
    padding: 1.15rem;
  }

  .hero-content,
  .page-hero__content {
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 3rem;
  }

  .page-hero--minimal .page-hero__content {
    max-width: none;
    margin-left: auto;
    padding-bottom: 3.2rem;
  }

  .page-hero--minimal h1 {
    font-size: 2.95rem;
  }

  .lead {
    font-size: 1.02rem;
  }

  .hero-content > p:not(.lead),
  .page-hero__content > p:not(.lead) {
    font-size: 0.98rem;
  }

  .values-head h2,
  .production-intro__copy h2,
  body[data-route="produccion"] .production-clients .work-with__intro h2 {
    font-size: 2.2rem;
  }

  .quote-band {
    font-size: 1.8rem;
  }

  .button {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .cta-row {
    width: 100%;
    max-width: 100%;
    gap: 0.65rem;
  }

  .production-signals {
    grid-template-columns: 1fr;
  }

  .production-signals li {
    padding: 0.85rem 0 0;
  }

  .production-collage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .production-collage__main,
  .production-collage__side {
    grid-row: auto;
    min-height: 260px;
  }

  .production-note {
    min-height: 160px;
  }

  .route-map {
    padding: 1.2rem;
  }

  .route-map h3 {
    max-width: none;
    font-size: 1.85rem;
  }

  .route-facts li {
    grid-template-columns: 1fr;
    gap: 0.18rem;
    padding: 0.72rem 0;
  }

  .admin-shell {
    padding: 1rem;
  }

  .admin-actions,
  .admin-form-grid,
  .admin-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-toolbar {
    display: grid;
  }

  .admin-toolbar [data-admin-status] {
    min-width: 0;
  }

  .service-grid,
  .value-grid,
  .trip-grid,
  .article-grid,
  .shop-grid,
  .pillar-grid,
  .service-cluster,
  .steps-grid,
  .country-grid,
  .instagram-grid,
  .team-grid,
  .choice-grid,
  .next-grid,
  .form-grid,
  .instagram-strip {
    grid-template-columns: 1fr;
  }

  .value-card--major {
    grid-column: auto;
  }

  .country-card,
  .instagram-grid a,
  .country-card img,
  .instagram-grid img {
    min-height: 220px;
  }

  .project-card,
  .project-card--wide {
    grid-column: 1 / -1;
  }

  .portfolio-grid--commissioned .project-card,
  .portfolio-grid--commissioned .project-card--wide,
  .portfolio-grid--commissioned .project-card:nth-child(2),
  .portfolio-grid--commissioned .project-card:nth-child(n + 3) {
    grid-column: 1 / -1;
    min-height: 300px;
  }

  .portfolio-grid--commissioned .project-card__body {
    transform: none;
  }

  .portfolio-grid--compact .project-card,
  .portfolio-grid--compact .project-card--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 940px) {
  .portfolio-grid--home-featured,
  .pillar-story-grid,
  .section--process-line .steps-grid {
    grid-template-columns: 1fr 1fr;
  }

  .production-intro {
    grid-template-columns: 1fr;
  }

  .home-story {
    grid-template-columns: 1fr;
  }

  .home-story__copy {
    max-width: 720px;
  }

  .section--home-story::after {
    top: auto;
    width: 100%;
    height: 30%;
  }

  .reel-card,
  .reel-card--production {
    justify-self: start;
    width: min(100%, 340px);
  }

  .reel-card--home {
    justify-self: stretch;
    width: 100%;
  }

  .newsletter-inline form {
    grid-template-columns: 1fr;
  }

  body[data-route="produccion"] .page-hero__content {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }

  .section--process-line .steps-grid::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 84svh;
  }

  .hero h1 {
    max-width: 18ch;
    font-size: clamp(1.8rem, 7.2vw, 2.25rem);
  }

  .hero .lead {
    font-size: 0.98rem;
  }

  .hero .button {
    min-height: 38px;
    font-size: 0.66rem;
  }

  .reel-card,
  .reel-card--production {
    width: min(100%, 300px);
    justify-self: center;
  }

  .reel-card--home {
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 0;
    justify-self: stretch;
  }

  .reel-card--home video {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .reel-card--home figcaption {
    min-height: 210px;
  }

  .home-story__copy h2 {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }

  .portfolio-grid--home-featured,
  .pillar-story-grid,
  .section--process-line .steps-grid {
    grid-template-columns: 1fr;
  }

  .section--portfolio-gallery .portfolio-head h2,
  body[data-route="produccion"] .production-clients .work-with__intro h2 {
    font-size: 2.35rem;
  }

  body[data-route="produccion"] .page-hero {
    min-height: 84svh;
  }

  body[data-route="produccion"] .page-hero__content {
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    padding-bottom: 2.6rem;
  }

  body[data-route="produccion"] .page-hero h1 {
    max-width: 10.5ch;
    font-size: 2.6rem;
  }

  body[data-route="nosotros"] .page-hero--minimal {
    min-height: 84svh;
  }

  .section--production-form .form-panel {
    padding: 0;
    border: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
  }

  .footer-grid > :first-child,
  .footer-newsletter {
    grid-column: 1 / -1;
  }
}

/* Mobile hardening for production layouts with desktop minimum column widths. */
@media (max-width: 700px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  body[data-route="produccion"] .production-clients .work-with,
  body[data-route="produccion"] .section--production-form .form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    width: min(calc(100% - var(--layout-gutter)), var(--max));
  }

  body[data-route="produccion"] .production-clients .work-with > *,
  body[data-route="produccion"] .section--production-form .form-layout > *,
  body[data-route="produccion"] .section--production-form form,
  body[data-route="produccion"] .section--production-form label,
  body[data-route="produccion"] .section--production-form input,
  body[data-route="produccion"] .section--production-form select,
  body[data-route="produccion"] .section--production-form textarea {
    min-width: 0;
    max-width: 100%;
  }

  body[data-route="produccion"] .production-clients .work-with__intro h2 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(2.15rem, 11vw, 2.85rem);
    line-height: 0.98;
  }

  body[data-route="produccion"] .production-clients .work-with__panel {
    width: 100%;
    margin: 0;
    padding: 1.25rem;
    transform: none;
  }

  body[data-route="produccion"] .production-clients .work-with__panel p {
    font-size: 0.96rem;
    line-height: 1.58;
  }

  body[data-route="produccion"] .production-clients .work-tags {
    gap: 0.45rem;
  }

  body[data-route="produccion"] .production-clients .work-tags li {
    padding: 0.42rem 0.58rem;
    font-size: 0.65rem;
  }

  body[data-route="produccion"] .section--production-form .text-stack {
    width: 100%;
  }

  body[data-route="produccion"] .section--production-form .form-panel {
    width: 100%;
    margin: 0;
    padding: 1.15rem;
    overflow: visible;
    transform: none;
  }

  body[data-route="produccion"] .section--production-form .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="produccion"] .section--production-form textarea {
    min-height: 170px;
  }

  body[data-route="produccion"] .section--production-form .contact-strip {
    width: 100%;
  }
}

/* June 2026 client refinement: compact editorial rhythm and portfolio-first production. */
body[data-route="home"] .hero-content {
  width: min(1180px, calc(100% - 7vw));
}

body[data-route="home"] .home-hero-title {
  max-width: 26ch;
  font-size: clamp(2.2rem, 3.3vw, 3.2rem);
  line-height: 1.12;
}

.section--home-story {
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}

.section--home-story::after {
  display: none;
}

.home-story {
  width: min(1120px, calc(100% - 3rem));
  grid-template-columns: minmax(280px, 0.82fr) minmax(430px, 1.18fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.home-story__copy {
  max-width: 34rem;
}

/* El antetítulo pegado al título, no flotando lejos */
.home-story__copy .eyebrow {
  margin-bottom: 0.45rem;
}

.home-story__copy h2 {
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1;
}

.reel-card--home,
.reel-card--production {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 1px solid rgba(17, 16, 12, 0.14);
  border-radius: 4px;
  overflow: hidden;
  background: #0d0d0b;
  box-shadow: 0 24px 55px rgba(27, 23, 14, 0.14);
}

.reel-card--home video,
.reel-card--production video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section--portfolio-teaser {
  padding-block: clamp(3rem, 5vw, 4.75rem);
}

.section--portfolio-teaser .container {
  width: min(1180px, calc(100% - 3rem));
}

.section--portfolio-teaser .section-head {
  margin-bottom: 1.7rem;
}

.section--portfolio-teaser .section-head h2 {
  max-width: 18ch;
  font-size: clamp(2.25rem, 4vw, 4rem);
}

.portfolio-grid--home-featured {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.portfolio-grid--home-featured .project-card,
.portfolio-grid--home-featured .project-card--wide {
  grid-column: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.portfolio-grid--home-featured .project-card__body {
  padding: 1.25rem;
}

.portfolio-grid--home-featured .project-card__body h3 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-style: italic;
  font-weight: 460;
  letter-spacing: -0.01em;
}

.portfolio-grid--home-featured .project-card__body p {
  max-width: 38ch;
  margin-block: 0.25rem 0.5rem;
  font-size: 0.9rem;
}

body[data-route="home"] #viaje-destacado {
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}

body[data-route="home"] #viaje-destacado .container {
  width: var(--home-content-width);
}

body[data-route="home"] #viaje-destacado .section-head {
  margin-bottom: 1.75rem;
}

body[data-route="home"] #viaje-destacado .section-head h2 {
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
}

body[data-route="home"] .feature-trip {
  grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.78fr);
  gap: 1rem;
  align-items: stretch;
}

body[data-route="home"] .feature-trip .route-map {
  order: -1;
  padding: clamp(1.6rem, 3vw, 2.5rem);
}

body[data-route="home"] .feature-trip .media-frame {
  min-height: 0;
}

.footer {
  padding: clamp(1.4rem, 3vw, 2.1rem) 0 1rem;
}

.footer-grid {
  gap: clamp(1rem, 2.4vw, 2rem);
  padding-bottom: 1rem;
}

.footer .brand img {
  width: 34px;
  height: 34px;
}

.footer .lead,
.footer-links,
.footer-newsletter {
  font-size: 0.8rem;
}

.footer-newsletter {
  gap: 0.12rem;
}

.footer-newsletter h3,
.footer-newsletter p {
  margin: 0;
}

.footer-newsletter form {
  gap: 0.4rem;
  margin-top: 0.1rem;
}

body[data-route="produccion"] .page-hero__content {
  width: min(880px, calc(100% - 3rem));
  margin-inline: auto;
  text-align: center;
  justify-items: center;
  align-content: center;
}

body[data-route="produccion"] .page-hero__content h1 {
  max-width: 26ch;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}

body[data-route="produccion"] .page-hero__content .lead {
  max-width: 55ch;
}

body[data-route="produccion"] .page-hero__content .cta-row {
  justify-content: center;
}

body[data-route="produccion"] .section--production-intro {
  padding-top: clamp(3.25rem, 6vw, 5.5rem);
  padding-bottom: calc(clamp(28px, 4vw, 56px) + clamp(2.4rem, 3.4vw, 3.4rem));
}

body[data-route="produccion"] .section--production-intro .container {
  width: min(calc(100% - var(--layout-gutter)), var(--max));
}

body[data-route="produccion"] .production-intro {
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

body[data-route="produccion"] .production-intro__copy h2 {
  max-width: 13ch;
  font-size: clamp(2.4rem, 4.4vw, 4.5rem);
}

.process-compact {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: clamp(2.25rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(17, 16, 12, 0.18);
}

.process-compact__heading h3 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.process-compact ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-compact li {
  display: grid;
  gap: 0.25rem;
  min-height: 64px;
  padding: 0 1.1rem;
  border-left: 1px solid rgba(17, 16, 12, 0.18);
}

.process-compact li strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.process-compact li span {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Lámina oscura: se monta sobre la sección clara con esquinas redondeadas y sombra */
body[data-route="produccion"] .production-portfolio {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: calc(-1 * clamp(28px, 4vw, 56px));
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  padding-top: calc(clamp(28px, 4vw, 56px) + clamp(1.6rem, 2.4vw, 2.4rem));
  padding-bottom: calc(clamp(28px, 4vw, 56px) + clamp(2.2rem, 3vw, 3rem));
  background:
    radial-gradient(46% 130% at 28% 0%, rgba(243, 195, 24, 0.09), transparent 68%),
    radial-gradient(56% 44% at 84% 0%, rgba(243, 195, 24, 0.05), transparent 62%),
    #090908;
  color: #f7f5ed;
  box-shadow: 0 -30px 70px rgba(9, 9, 8, 0.22);
}

/* Lámina clara de servicios sobre el porfolio oscuro */
body[data-route="produccion"] .production-services {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(28px, 4vw, 56px));
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  padding-top: calc(clamp(28px, 4vw, 56px) + clamp(2rem, 2.8vw, 2.8rem));
}

body[data-route="produccion"] .production-portfolio .container {
  width: min(1440px, calc(100% - 2rem));
}

/* El layout a dos columnas de esta cabecera vive solo en escritorio (bloque min-941) */
body[data-route="produccion"] .production-portfolio .portfolio-head {
  width: min(1160px, 100%);
  margin: 0 auto clamp(1.7rem, 3vw, 2.6rem);
}

body[data-route="produccion"] .production-portfolio .portfolio-head h2 {
  max-width: 16ch;
  color: #f7f5ed;
  font-size: clamp(2.3rem, 3.4vw, 3.5rem);
}

body[data-route="produccion"] .production-portfolio .portfolio-head p {
  max-width: 38ch;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(247, 245, 237, 0.18);
  color: rgba(247, 245, 237, 0.66);
  font-size: 0.95rem;
  line-height: 1.66;
}

/* S3 · cabecera de "Documentales x La Perduda" centrada en una sola
   columna (sin el texto descriptivo a la derecha). El selector compuesto
   .portfolio-head.portfolio-head--center sube la especificidad para ganar
   a la rejilla de dos columnas del @media (que está más abajo en el
   archivo) y al cap de ancho de .section-head--center. */
body[data-route="produccion"] .production-portfolio .portfolio-head.portfolio-head--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  text-align: center;
  width: min(1160px, 100%);
  max-width: none;
  margin-inline: auto;
}

body[data-route="produccion"] .production-portfolio .portfolio-head.portfolio-head--center h2 {
  max-width: 22ch;
  margin-inline: auto;
}

body[data-route="produccion"] .production-portfolio .portfolio-grid--commissioned {
  counter-reset: doc;
  align-items: start;
  width: min(1160px, 100%);
  margin-inline: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

body[data-route="produccion"] .production-portfolio .project-card {
  counter-increment: doc;
  grid-column: span 7;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(247, 245, 237, 0.1);
  border-radius: var(--radius-media);
}

body[data-route="produccion"] .production-portfolio .portfolio-grid--commissioned .project-card:nth-child(2) {
  grid-column: span 5;
  margin-top: clamp(2rem, 4.5vw, 3.6rem);
  aspect-ratio: 4 / 3.55;
}

body[data-route="produccion"] .production-portfolio .project-card::before {
  content: none;
}

/* Numeración editorial de cada pieza */
body[data-route="produccion"] .production-portfolio .project-card::after {
  content: "0" counter(doc);
  position: absolute;
  top: 1.05rem;
  right: 1.2rem;
  z-index: 2;
  color: rgba(247, 245, 237, 0.6);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

body[data-route="produccion"] .production-portfolio .project-card img {
  height: 100%;
}

body[data-route="produccion"] .production-portfolio .card-meta {
  color: var(--yellow);
}

body[data-route="produccion"] .production-portfolio .project-card__body {
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
  background: linear-gradient(0deg, rgba(5, 5, 4, 0.94), rgba(5, 5, 4, 0.42) 62%, rgba(5, 5, 4, 0));
}

body[data-route="produccion"] .production-portfolio .project-card h3 {
  max-width: 15ch;
  font-size: clamp(1.65rem, 2.3vw, 2.3rem);
  font-style: italic;
  font-weight: 460;
  letter-spacing: -0.01em;
}

body[data-route="produccion"] .production-portfolio .project-card:hover .link-cue {
  color: var(--yellow);
}

body[data-route="produccion"] .production-services {
  padding-block: clamp(3.25rem, 5.5vw, 5rem);
}

body[data-route="produccion"] .production-services .section-head {
  margin-bottom: 2rem;
}

body[data-route="produccion"] .production-services .section-head h2 {
  font-size: clamp(2.35rem, 4vw, 4rem);
}

body[data-route="produccion"] .service-columns--editorial {
  gap: clamp(1.5rem, 3vw, 3rem);
}

body[data-route="produccion"] .service-column {
  padding-top: 1.2rem;
}

body[data-route="produccion"] .service-column > h3 {
  min-height: 0;
  margin-bottom: 1rem;
  font-size: clamp(1.65rem, 2.5vw, 2.4rem);
  text-align: left;
}

body[data-route="produccion"] .service-list {
  gap: 0;
}

body[data-route="produccion"] .service-list li {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-block: 0.9rem;
}

body[data-route="produccion"] .service-list li > span {
  display: none;
}

body[data-route="produccion"] .service-list h4 {
  margin-bottom: 0.25rem;
}

body[data-route="produccion"] .service-list p {
  max-width: none;
}

.project-card--portrait,
.article-card--portrait,
.country-card--portrait {
  aspect-ratio: 4 / 5;
}

.project-card--square,
.article-card--square,
.country-card--square {
  aspect-ratio: 1;
}

.custom-section--text-right .custom-section__media {
  order: -1;
}

.custom-section--media-wide .custom-section__layout {
  grid-template-columns: minmax(0, 1fr);
}

.custom-section--media-wide .custom-section__media {
  order: -1;
}

.custom-section--text-only .custom-section__layout {
  grid-template-columns: minmax(0, 760px);
}

.custom-section--text-only .custom-section__media {
  display: none;
}

.custom-section__media--landscape {
  aspect-ratio: 16 / 9;
}

.custom-section__media--portrait {
  aspect-ratio: 4 / 5;
}

.custom-section__media--square {
  aspect-ratio: 1;
}

.custom-section__media--natural {
  aspect-ratio: auto;
}

.custom-section__media img,
.custom-section__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-inline-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 800px) {
  body[data-route="home"] .hero-content,
  body[data-route="produccion"] .page-hero__content {
    width: min(100% - 2rem, 680px);
  }

  body[data-route="home"] .home-hero-title {
    max-width: 18ch;
    font-size: clamp(1.9rem, 7.5vw, 2.4rem);
  }

  .home-story,
  body[data-route="produccion"] .production-intro {
    width: min(100% - 2rem, 680px);
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .home-story__copy {
    max-width: 100%;
  }

  .portfolio-grid--home-featured,
  body[data-route="produccion"] .production-portfolio .portfolio-grid--commissioned {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-grid--home-featured .project-card,
  .portfolio-grid--home-featured .project-card--wide,
  body[data-route="produccion"] .production-portfolio .project-card,
  body[data-route="produccion"] .production-portfolio .portfolio-grid--commissioned .project-card:nth-child(2) {
    grid-column: 1 / -1;
    margin-top: 0;
    aspect-ratio: 4 / 3;
  }

  body[data-route="home"] .feature-trip {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-route="home"] .feature-trip .route-map {
    order: 0;
  }

  body[data-route="home"] .feature-trip .media-frame {
    order: 1;
    aspect-ratio: 4 / 3;
  }

  body[data-route="produccion"] .page-hero__content h1 {
    max-width: 11ch;
    font-size: clamp(2.8rem, 13vw, 4.4rem);
  }

  .process-compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .process-compact ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-compact li {
    margin-top: 0.75rem;
    padding: 0 0.75rem;
  }

  body[data-route="produccion"] .production-portfolio .container {
    width: min(100% - 1rem, 680px);
  }
}

@media (max-width: 480px) {
  .process-compact ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .process-compact li {
    min-height: 0;
    padding-block: 0.65rem;
    border-left: 0;
    border-top: 1px solid rgba(17, 16, 12, 0.14);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 720ms ease,
      transform 980ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .media-frame.reveal,
  .project-card.reveal,
  .article-card.reveal,
  .trip-card.reveal,
  .product-card.reveal,
  .country-card.reveal {
    transform: translateY(34px) scale(0.98);
  }

  .media-frame.reveal.is-visible,
  .project-card.reveal.is-visible,
  .article-card.reveal.is-visible,
  .trip-card.reveal.is-visible,
  .product-card.reveal.is-visible,
  .country-card.reveal.is-visible {
    transform: translateY(0) scale(1);
  }
}

/* June 2026: denser editorial rhythm across the public site. */
@media (min-width: 941px) {
  .section {
    padding-block: clamp(2.4rem, 3.4vw, 3.5rem);
  }

  .section--tight {
    padding-block: clamp(2rem, 2.8vw, 2.8rem);
  }

  .section-head {
    gap: clamp(1.4rem, 2.6vw, 2.6rem);
    margin-bottom: clamp(1rem, 1.7vw, 1.5rem);
  }

  .section-head--stacked {
    gap: 0.42rem;
  }

  .text-stack,
  .production-intro__copy {
    gap: 0.78rem;
  }

  .split {
    width: min(1160px, 100%);
    margin-inline: auto;
    gap: clamp(2rem, 3.4vw, 3.4rem);
  }

  .portfolio-head h2 {
    font-size: clamp(2.2rem, 2.7vw, 3.05rem);
  }

  .split .media-frame--portrait {
    max-height: 520px;
    aspect-ratio: 1 / 1;
  }

  .split .media-frame--wide {
    max-height: 480px;
  }

  .split .media-frame--portrait img,
  .split .media-frame--portrait video {
    min-height: 0;
  }

  .hero {
    min-height: 84svh;
  }

  .page-hero {
    min-height: 58svh;
  }

  body[data-route="produccion"] .page-hero,
  body[data-route="nosotros"] .page-hero--minimal {
    min-height: 72svh;
  }

  body[data-route="produccion"] .page-hero__content {
    padding-block: clamp(3.25rem, 5vw, 4.75rem);
  }

  .section--home-story,
  body[data-route="produccion"] .section--production-intro {
    padding-block: clamp(2.6rem, 3.6vw, 3.5rem);
  }

  /* Aire para que la lámina siguiente se monte sin pisar contenido */
  body[data-route="produccion"] .section--production-intro {
    padding-bottom: calc(clamp(28px, 4vw, 56px) + clamp(2.4rem, 3.4vw, 3.4rem));
  }

  .section--home-story {
    padding-bottom: calc(clamp(24px, 3.5vw, 48px) + clamp(2.2rem, 3vw, 3rem));
  }

  .home-story,
  body[data-route="produccion"] .production-intro {
    gap: clamp(2.2rem, 3.4vw, 3.2rem);
  }

  .home-story {
    width: min(var(--max), calc(100% - var(--layout-gutter)));
  }

  body[data-route="produccion"] .production-intro__copy h2 {
    font-size: clamp(2.3rem, 3.6vw, 3.65rem);
  }

  .reel-card--home,
  .reel-card--production {
    box-shadow: 0 18px 42px rgba(27, 23, 14, 0.12);
  }

  .section--portfolio-teaser {
    padding-top: calc(clamp(24px, 3.5vw, 48px) + clamp(1.8rem, 2.6vw, 2.6rem));
    padding-bottom: clamp(2.4rem, 3.4vw, 3.3rem);
  }

  body[data-route="produccion"] .production-portfolio {
    padding-top: calc(clamp(28px, 4vw, 56px) + clamp(1.6rem, 2.4vw, 2.4rem));
    padding-bottom: calc(clamp(28px, 4vw, 56px) + clamp(2.2rem, 3vw, 3rem));
  }

  body[data-route="produccion"] .production-services {
    padding-top: calc(clamp(28px, 4vw, 56px) + clamp(1.8rem, 2.6vw, 2.6rem));
    padding-bottom: clamp(2.4rem, 3.4vw, 3.3rem);
  }

  body[data-route="produccion"] .production-portfolio .portfolio-head {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.52fr);
    align-items: end;
  }

  .portfolio-grid--home-featured .project-card,
  .portfolio-grid--home-featured .project-card--wide {
    aspect-ratio: 16 / 8.6;
  }

  body[data-route="home"] #viaje-destacado {
    padding-block: clamp(2.6rem, 3.6vw, 3.5rem);
  }

  body[data-route="home"] #viaje-destacado .feature-trip .media-frame {
    aspect-ratio: 16 / 10;
  }

  body[data-route="home"] #comunidad {
    padding-block: clamp(2.4rem, 3.4vw, 3.2rem);
  }

  body[data-route="bitacora"] #instagram .instagram-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-route="bitacora"] #instagram .instagram-grid a {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  body[data-route="bitacora"] #instagram .instagram-grid img {
    min-height: 0;
  }

  body[data-route="bitacora"] #instagram .instagram-grid span {
    bottom: 1rem;
  }

  body[data-route="bitacora"] #instagram .cta-row {
    margin-top: 1.35rem;
  }

  body[data-route="bitacora"] #paises .country-grid,
  body[data-route="viajes"] #destinos .country-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body[data-route="bitacora"] #paises .country-card,
  body[data-route="viajes"] #destinos .country-card {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  body[data-route="bitacora"] #paises .country-card img,
  body[data-route="viajes"] #destinos .country-card img {
    min-height: 0;
  }

  body[data-route="viajes"] .value-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body[data-route="viajes"] .value-grid .value-card {
    padding: 1rem;
  }

  body[data-route="viajes"] .value-grid h3 {
    font-size: clamp(1.25rem, 1.65vw, 1.65rem);
  }

  body[data-route="viajes"] .value-grid p {
    font-size: 0.88rem;
    line-height: 1.52;
  }

  body[data-route="viajes"] #guatemala .feature-trip {
    grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.96fr);
  }

  body[data-route="viajes"] #guatemala .feature-trip .media-frame {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  body[data-route="viajes"] #guatemala .route-map {
    min-height: 0;
    padding: clamp(1.25rem, 2vw, 1.8rem);
  }

  body[data-route="viajes"] #guatemala .route-line {
    gap: 0.65rem;
  }

  body[data-route="viajes"] #formás-viajar .trip-card img {
    aspect-ratio: 16 / 8.5;
  }

  body[data-route="nosotros"] .values-head {
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
  }

  body[data-route="nosotros"] .values-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: clamp(2.75rem, 4vw, 3.75rem);
  }

  body[data-route="nosotros"] .value-item {
    grid-column: span 2;
    max-width: none;
  }

  body[data-route="nosotros"] .value-item:nth-child(4) {
    grid-column: 1 / span 3;
  }

  body[data-route="nosotros"] .value-item:nth-child(5) {
    grid-column: 4 / span 3;
  }

  body[data-route="nosotros"] .value-icon {
    margin-bottom: 0.45rem;
  }

  body[data-route="nosotros"] .value-item p {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  body[data-route="nosotros"] .pillar-story-card img {
    aspect-ratio: 16 / 10;
  }

  body[data-route="produccion"] .process-compact {
    margin-top: clamp(1.75rem, 3vw, 2.6rem);
  }

  body[data-route="produccion"] .production-services .section-head {
    margin-bottom: 1.5rem;
  }

  body[data-route="produccion"] .production-clients .work-with {
    gap: clamp(2rem, 4vw, 4rem);
  }

  body[data-route="produccion"] .production-clients .work-with__panel {
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
  }

  .section--production-form,
  #form-viajes {
    padding-block: clamp(3rem, 4.25vw, 4.2rem);
  }

  .custom-section {
    padding-block: clamp(2.9rem, 4.25vw, 4.4rem);
  }
}

@media (max-width: 940px) {
  .section,
  .section--home-story,
  .section--portfolio-teaser,
  body[data-route="home"] #viaje-destacado,
  body[data-route="produccion"] .section--production-intro,
  body[data-route="produccion"] .production-portfolio,
  body[data-route="produccion"] .production-services {
    padding-block: clamp(2.55rem, 7vw, 3.6rem);
  }

  .section-head {
    gap: 0.65rem;
    margin-bottom: 1.35rem;
  }

  .split,
  .home-story,
  body[data-route="produccion"] .production-intro {
    gap: 1.6rem;
  }

  body[data-route="bitacora"] #instagram .instagram-grid,
  body[data-route="bitacora"] #paises .country-grid,
  body[data-route="viajes"] #destinos .country-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-route="bitacora"] #instagram .instagram-grid a,
  body[data-route="bitacora"] #paises .country-card,
  body[data-route="viajes"] #destinos .country-card {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  body[data-route="bitacora"] #instagram .instagram-grid img,
  body[data-route="bitacora"] #paises .country-card img,
  body[data-route="viajes"] #destinos .country-card img {
    min-height: 0;
  }

  body[data-route="nosotros"] .values-head {
    margin-bottom: 2.2rem;
  }

  body[data-route="nosotros"] .values-grid {
    column-gap: 1.5rem;
    row-gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .section,
  .section--home-story,
  .section--portfolio-teaser,
  body[data-route="home"] #viaje-destacado,
  body[data-route="produccion"] .section--production-intro,
  body[data-route="produccion"] .production-portfolio,
  body[data-route="produccion"] .production-services {
    padding-block: 2.35rem;
  }

  /* Las láminas conservan su curva y su aire también en móvil */
  .section--portfolio-teaser,
  body[data-route="produccion"] .production-portfolio,
  body[data-route="produccion"] .production-services,
  body[data-route="produccion"] .production-clients,
  body[data-route="produccion"] .section--production-form {
    padding-top: calc(28px + 1.5rem);
  }

  .section--home-story,
  body[data-route="produccion"] .section--production-intro,
  body[data-route="produccion"] .production-portfolio,
  body[data-route="produccion"] .production-clients {
    padding-bottom: calc(28px + 1.6rem);
  }

  .section--portfolio-teaser,
  body[data-route="produccion"] .production-portfolio,
  body[data-route="produccion"] .production-services,
  body[data-route="produccion"] .production-clients,
  body[data-route="produccion"] .section--production-form {
    margin-top: -28px;
    border-radius: 28px 28px 0 0;
  }

  .section-head {
    margin-bottom: 1.15rem;
  }

  .section-head h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .card-body {
    gap: 0.58rem;
    padding: 1rem;
  }

  .media-frame img,
  .media-frame video {
    min-height: 220px;
  }

  .home-story__copy h2 {
    font-size: clamp(1.75rem, 8vw, 2.15rem);
  }

  body[data-route="produccion"] .production-intro__copy h2 {
    font-size: clamp(2.1rem, 11vw, 2.85rem);
  }

  body[data-route="bitacora"] #instagram .instagram-grid span {
    right: 0.75rem;
    bottom: 0.8rem;
    left: 0.75rem;
    font-size: 1.1rem;
  }

  body[data-route="nosotros"] .values-grid {
    row-gap: 2rem;
  }
}

/* === Capa de refinado premium (solo presentación, sin cambios funcionales) === */

/* Grano fílmico muy sutil sobre toda la página */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Microtipografía: etiquetas en mayúsculas con aire */
.eyebrow {
  letter-spacing: 0.2em;
  font-weight: 600;
}

.site-nav {
  letter-spacing: 0.14em;
  font-weight: 600;
}

.button {
  letter-spacing: 0.1em;
  font-weight: 700;
}

.card-meta,
.breadcrumbs,
.back-link,
.link-cue,
.caption-strip,
.country-card small,
.production-signals span,
.route-facts span,
.production-note span,
.production-collage figcaption,
.detail-list strong {
  letter-spacing: 0.1em;
}

.pill-list li,
.tag {
  letter-spacing: 0.05em;
  font-weight: 600;
}

.filter-bar button {
  letter-spacing: 0.04em;
}

/* Cita destacada en cursiva editorial */
.quote-band {
  font-style: italic;
  font-weight: 440;
  letter-spacing: -0.01em;
}

/* Marca con un punto más de presencia */
.brand {
  letter-spacing: 0.015em;
}

/* Transiciones de tarjeta un punto más suaves */
.service-card,
.value-card,
.trip-card,
.article-card,
.product-card,
.contact-card,
.team-card,
.country-card,
.instagram-grid a {
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Esquinas redondeadas en todo lo fotográfico y de vídeo (línea Watatu) */
.media-frame,
.reel-card,
.project-card,
.country-card,
.instagram-grid a,
.production-collage figure,
.production-note,
.service-column__media,
.pillar-story-card img,
.team-card img {
  border-radius: var(--radius-media);
}

.team-card img {
  border-radius: var(--radius-media) var(--radius-media) 0 0;
}

/* Fichas de país: pie en columna — el nombre ya no puede pisar la etiqueta */
.country-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 1.05rem;
}

.country-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.country-card::after {
  background: linear-gradient(0deg, rgba(13, 12, 8, 0.84), rgba(13, 12, 8, 0.18) 55%, rgba(13, 12, 8, 0.02));
}

.country-card span,
.country-card small {
  position: relative;
  inset: auto;
  z-index: 1;
}

.country-card span {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  letter-spacing: -0.01em;
}

.country-card small {
  color: rgba(255, 253, 247, 0.78);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* Flechas tipográficas reales en los enlaces */
.link-cue::after {
  content: "→";
}

.back-link::before {
  content: "←";
}

/* Leyendas sobre imagen con efecto de vidrio */
.caption-strip {
  background: rgba(13, 12, 8, 0.58);
  backdrop-filter: blur(6px);
  font-weight: 600;
}

/* Pie de página: remate con filete ámbar */
.footer {
  border-top: 1px solid rgba(243, 195, 24, 0.32);
}

/* === "Para quién es este viaje" (viajes): tratamiento editorial === */

/* Fondo cinematográfico: brisa ámbar arriba y musgo en la base, no negro plano */
body[data-route="viajes"] .section--ink:has(#perfil) {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50% 80% at 78% 16%, rgba(243, 195, 24, 0.07), transparent 65%),
    radial-gradient(70% 100% at 10% 100%, rgba(79, 91, 67, 0.32), transparent 70%),
    #0b0a08;
}

/* La foto, como copia positivada: marco ámbar desplazado detrás */
body[data-route="viajes"] .section--ink:has(#perfil) .media-frame {
  overflow: visible;
  border: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

body[data-route="viajes"] .section--ink:has(#perfil) .media-frame::before {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  z-index: -1;
  border: 1px solid rgba(243, 195, 24, 0.4);
  border-radius: var(--radius-media);
}

body[data-route="viajes"] .section--ink:has(#perfil) .media-frame img {
  border-radius: var(--radius-media);
  transform: none;
  transition: none;
}

body[data-route="viajes"] .section--ink:has(#perfil) .media-frame:hover img {
  transform: none;
}

/* La cita como protagonista, con comilla ámbar de gran cuerpo */
body[data-route="viajes"] .section--ink:has(#perfil) .quote-band {
  position: relative;
  max-width: 30ch;
  margin-top: 1.9rem;
  padding: 0.45rem 0 0.45rem 1.4rem;
  border-left: 2px solid rgba(243, 195, 24, 0.6);
  color: var(--white);
  font-size: clamp(1.85rem, 2.5vw, 2.45rem);
  line-height: 1.22;
}

body[data-route="viajes"] .section--ink:has(#perfil) .quote-band::before {
  content: "\201C";
  position: absolute;
  top: -2.9rem;
  left: 1.2rem;
  color: rgba(243, 195, 24, 0.5);
  font-family: var(--font-display);
  font-size: 4.6rem;
  font-style: normal;
  line-height: 1;
}

body[data-route="viajes"] .section--ink:has(#perfil) .text-stack {
  max-width: 560px;
}

/* === Hero de inicio: composición centrada (referencia Watatu) === */
body[data-route="home"] .hero {
  align-items: center;
  min-height: 96svh;
}

/* Velo ligero arriba; abajo la imagen se disuelve en el papel de la
   siguiente sección — el color de la foto sangra de forma orgánica */
body[data-route="home"] .hero::after {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0) 78%, rgba(255, 253, 247, 0.5) 93%, #fffdf7 100%),
    linear-gradient(180deg, rgba(13, 12, 8, 0.4) 0%, rgba(13, 12, 8, 0.16) 42%, rgba(13, 12, 8, 0.08) 100%);
}

/* (Marco de visor retirado: dejaba unas líneas tenues en las esquinas
   superiores del hero). */
body[data-route="home"] .hero::before {
  content: none;
}

body[data-route="home"] .hero-content {
  display: grid;
  justify-items: center;
  width: min(1100px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding-block: clamp(6rem, 14vh, 8.5rem) clamp(4rem, 10vh, 6rem);
  text-align: center;
}

body[data-route="home"] .home-hero-title {
  max-width: none;
  font-size: clamp(2.3rem, 4.8vw, 4.2rem);
  font-weight: 500;
  line-height: 1.06;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4);
}

body[data-route="home"] .hero .eyebrow {
  margin-bottom: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.32em;
}

body[data-route="home"] .hero .lead {
  margin-top: 0.9rem;
  font-size: 1.08rem;
  font-weight: 450;
  color: rgba(255, 253, 247, 0.88);
}

body[data-route="home"] .hero-content > p:not(.lead) {
  max-width: 56ch;
  color: rgba(255, 253, 247, 0.7);
  font-size: 0.88rem;
  line-height: 1.7;
}

body[data-route="home"] .hero .cta-row {
  justify-content: center;
  margin-top: 1.25rem;
}

body[data-route="home"] .hero .button {
  min-height: 36px;
  border-radius: 999px;
  padding-block: 0.5rem;
  padding-inline: 1.2rem;
  font-size: 0.64rem;
}

/* Hilo de scroll: una línea ámbar que respira bajo el contenido */
body[data-route="home"] .hero-content::after {
  content: "";
  width: 1px;
  height: 44px;
  margin-top: clamp(1.5rem, 3vh, 2.4rem);
  background: linear-gradient(180deg, rgba(243, 195, 24, 0.9), rgba(243, 195, 24, 0));
}

@media (prefers-reduced-motion: no-preference) {
  body[data-route="home"] .hero-content::after {
    animation: scrollCue 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@keyframes scrollCue {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.9;
  }

  50% {
    transform: translateY(9px);
    opacity: 0.35;
  }
}

/* Scroll premium: barra fina y deriva sutil del hero al desplazarse */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 12, 8, 0.35) transparent;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media img,
    .hero-media video,
    .page-hero__media img,
    .page-hero__media video {
      animation: heroDrift linear both;
      animation-timeline: view(block);
    }
  }
}

@keyframes heroDrift {
  0% {
    transform: translateY(-3%) scale(1.07);
  }

  100% {
    transform: translateY(6%) scale(1.07);
  }
}

/* Home: wider editorial frame and softer section hand-offs. */
body[data-route="home"] {
  --home-content-width: min(1680px, calc(100% - clamp(2.5rem, 6vw, 7rem)));
}

@media (min-width: 941px) {
  body[data-route="home"] main > .section > .container {
    width: var(--home-content-width);
    max-width: none;
  }

  body[data-route="home"] .home-story {
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(2.25rem, 4vw, 5rem);
  }

  body[data-route="home"] .home-story__copy {
    max-width: 36rem;
  }

  body[data-route="home"] .reel-card--home {
    min-width: 0;
  }

  body[data-route="home"] .section--home-story {
    padding-top: clamp(3rem, 4.2vw, 4.25rem);
    padding-bottom: calc(clamp(32px, 3vw, 52px) + clamp(2.5rem, 3.4vw, 3.5rem));
  }

  body[data-route="home"] .section--portfolio-teaser,
  body[data-route="home"] #viaje-destacado,
  body[data-route="home"] #comunidad {
    position: relative;
    overflow: hidden;
    margin-top: calc(-1 * clamp(32px, 3vw, 52px));
    border-radius: clamp(32px, 3vw, 52px) clamp(42px, 4vw, 68px) 0 0;
    padding-top: calc(clamp(32px, 3vw, 52px) + clamp(2rem, 2.8vw, 2.8rem));
    box-shadow: 0 -22px 52px rgba(32, 27, 16, 0.07);
  }

  body[data-route="home"] .section--portfolio-teaser {
    z-index: 2;
  }

  body[data-route="home"] #viaje-destacado {
    z-index: 3;
    padding-bottom: calc(clamp(32px, 3vw, 52px) + clamp(2.5rem, 3.4vw, 3.5rem));
    background: #fffdf7;
  }

  body[data-route="home"] #comunidad {
    z-index: 4;
    padding-bottom: clamp(2.6rem, 3.4vw, 3.5rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-route="home"] .reveal {
    transform: translateY(22px);
    transition:
      opacity 860ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 1080ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body[data-route="home"] .media-frame.reveal,
  body[data-route="home"] .project-card.reveal {
    transform: translateY(26px) scale(0.992);
  }

  body[data-route="home"] .reveal.is-visible,
  body[data-route="home"] .media-frame.reveal.is-visible,
  body[data-route="home"] .project-card.reveal.is-visible {
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 940px) {
  body[data-route="home"] main > .section > .container {
    width: min(100% - 2rem, 760px);
  }

  body[data-route="home"] .section--portfolio-teaser,
  body[data-route="home"] #viaje-destacado,
  body[data-route="home"] #comunidad {
    position: relative;
    overflow: hidden;
    margin-top: -28px;
    border-radius: 28px 36px 0 0;
    padding-top: calc(28px + 1.75rem);
    box-shadow: 0 -18px 42px rgba(32, 27, 16, 0.06);
  }

  body[data-route="home"] #viaje-destacado {
    background: #fffdf7;
  }
}

/* Administration workspace: clear navigation and reliable save feedback. */
.admin-panel {
  width: min(100%, 1180px);
}

.admin-dashboard-nav {
  position: sticky;
  top: 0.75rem;
  z-index: 3;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  border: 1px solid rgba(255, 253, 247, 0.14);
  border-radius: 8px;
  background: rgba(13, 12, 8, 0.94);
  padding: 0.4rem;
  scrollbar-width: thin;
}

.admin-dashboard-nav button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 253, 247, 0.68);
  padding: 0.72rem 0.9rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-dashboard-nav button[aria-pressed="true"] {
  background: var(--yellow);
  color: var(--ink);
}

.admin-dashboard [data-admin-view][hidden] {
  display: none !important;
}

html.admin-mode body {
  padding-bottom: 7rem;
}

.admin-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 240px) auto;
  gap: 0.75rem;
  width: min(calc(100% - 2rem), 1180px);
  border-radius: 8px;
  padding: 0.7rem;
  backdrop-filter: blur(18px);
}

.admin-toolbar__identity {
  display: grid;
  align-content: center;
  gap: 0.15rem;
  min-width: 0;
}

.admin-toolbar__identity strong {
  margin: 0;
  font-size: 0.72rem;
}

.admin-toolbar__identity [data-admin-status] {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 253, 247, 0.7);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-toolbar__page {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  color: rgba(255, 253, 247, 0.62);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-toolbar__page select {
  min-height: 40px;
  border: 1px solid rgba(255, 253, 247, 0.22);
  border-radius: 6px;
  background: #25241f;
  color: var(--white);
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
}

.admin-toolbar__actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.admin-toolbar__actions button:first-child {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

@media (max-width: 760px) {
  html.admin-mode body {
    padding-bottom: 13.5rem;
  }

  .admin-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    width: calc(100% - 1rem);
    padding: 0.55rem;
  }

  .admin-toolbar__identity {
    grid-column: 1 / -1;
  }

  .admin-toolbar__page {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-toolbar__page > span {
    display: none;
  }

  .admin-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    overflow: visible;
    padding: 0;
  }

  .admin-toolbar__actions button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-inline: 0.45rem;
    line-height: 1.15;
    white-space: normal;
  }

  .admin-dashboard-nav {
    top: 0.35rem;
  }
}

/* ===================================================================
   Home · fondo homogéneo
   Elimina las "láminas" (borde redondeado, sombra y solapamiento) y
   los saltos de color entre secciones. El fondo continuo lo aporta el
   degradado cálido del body; la diferenciación entre secciones es sutil
   y orgánica, sin líneas ni cambios cromáticos marcados.
   =================================================================== */
body[data-route="home"] .section--home-story,
body[data-route="home"] .section--portfolio-teaser,
body[data-route="home"] #viaje-destacado,
body[data-route="home"] #comunidad {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
  padding-block: clamp(3rem, 5.5vw, 5.25rem);
}

/* Secciones que se funden con el fondo cálido del body */
body[data-route="home"] .section--portfolio-teaser,
body[data-route="home"] #viaje-destacado {
  background: transparent;
}

/* La sección tras el hero recoge el mismo crema en el que se disuelve la
   imagen del hero (continuidad del fundido) y luego se funde con el fondo. */
body[data-route="home"] .section--home-story {
  background: linear-gradient(
    180deg,
    #fffdf7 0%,
    rgba(255, 253, 247, 0) 44%
  );
}

/* Diferenciación orgánica del bloque de documentales: una franja cálida
   (tono tierra) perceptible pero suave, difuminada en los extremos para
   que el bloque se distinga sin ninguna línea ni borde. */
body[data-route="home"] .section--portfolio-teaser {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(120, 82, 40, 0.06) 26%,
    rgba(120, 82, 40, 0.06) 74%,
    transparent 100%
  );
}

/* "Comunidad" conserva el amarillo de marca, pero con transición limpia
   (sin lámina). El borde superior recto se suaviza con un degradado breve
   que entra desde el fondo cálido hacia el amarillo. */
body[data-route="home"] #comunidad {
  background:
    linear-gradient(180deg, var(--paper-quiet) 0, var(--yellow) 130px),
    var(--yellow);
}

/* Tamaños de título homogéneos en el home: home-story y Guatemala igualan
   al título del bloque de documentales. */
body[data-route="home"] .home-story__copy h2,
body[data-route="home"] #viaje-destacado .section-head h2 {
  font-size: clamp(1.7rem, 2.3vw, 2.5rem);
  line-height: 1.12;
}

/* ===================================================================
   Guatemala · caja informativa a la izquierda (más ancha) y collage de
   4 fotos a la derecha, más contenido y sin pegarse al borde.
   =================================================================== */
body[data-route="home"] #viaje-destacado .feature-trip {
  grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.82fr);
  gap: clamp(1rem, 2.2vw, 1.9rem);
  align-items: stretch;
}

body[data-route="home"] #viaje-destacado .route-map {
  order: -1; /* la caja informativa queda a la izquierda */
}

body[data-route="home"] .trip-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.45rem, 0.8vw, 0.7rem);
  height: 100%;
  min-height: clamp(300px, 34vw, 470px);
}

body[data-route="home"] .trip-collage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  border-radius: clamp(8px, 0.9vw, 14px);
  box-shadow: 0 12px 30px rgba(32, 27, 16, 0.12);
}

@media (max-width: 800px) {
  body[data-route="home"] #viaje-destacado .feature-trip {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-route="home"] .trip-collage {
    min-height: 0;
  }
}

/* ===================================================================
   Documentales · acabado premium (dentro del estilo Francisco): las
   piezas se elevan y la imagen hace un zoom lento y suave al pasar.
   =================================================================== */
body[data-route="home"] .portfolio-grid--home-featured .project-card {
  border: 1px solid rgba(13, 12, 8, 0.06);
  box-shadow: 0 16px 38px rgba(32, 27, 16, 0.10);
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms ease;
}

body[data-route="home"] .portfolio-grid--home-featured .project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 74px rgba(32, 27, 16, 0.22);
}

body[data-route="home"] .portfolio-grid--home-featured .project-card img {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-route="home"] .portfolio-grid--home-featured .project-card:hover img {
  transform: scale(1.06);
}

/* ===================================================================
   Guatemala · panel oscuro premium con mapa de ruta dibujado.
   Texto a la izquierda; a la derecha una sola foto con la línea de
   ruta y sus paradas superpuestas.
   =================================================================== */
body[data-route="home"] #viaje-destacado .trip-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(280px, 0.94fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 26px);
  background: #0e0d0a;
  color: #fffdf7;
  box-shadow: 0 34px 80px rgba(20, 17, 10, 0.22);
}

body[data-route="home"] #viaje-destacado .trip-feature__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  padding: clamp(1.6rem, 2.8vw, 2.6rem);
}

body[data-route="home"] #viaje-destacado .trip-feature__text {
  flex: 0 0 auto;
}

/* Galería: un único marco que funde las fotos del viaje (auto-rotación) */
body[data-route="home"] #viaje-destacado .trip-gallery {
  position: relative;
  flex: 1 1 0;
  min-height: clamp(150px, 18vw, 260px);
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 14px);
}

body[data-route="home"] #viaje-destacado .trip-gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1400ms ease;
  filter: saturate(0.96) brightness(0.95);
}

body[data-route="home"] #viaje-destacado .trip-gallery img.is-active {
  opacity: 1;
}

body[data-route="home"] #viaje-destacado .eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: rgba(255, 253, 247, 0.66);
}

body[data-route="home"] #viaje-destacado .eyebrow--rule::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(255, 253, 247, 0.5);
}

body[data-route="home"] #viaje-destacado .trip-feature__title {
  max-width: none;
  margin: 0.75rem 0 1.15rem;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.02;
}

body[data-route="home"] #viaje-destacado .trip-feature__title em {
  display: block;
  margin-top: 0.1rem;
  font-style: italic;
  font-weight: 400;
  font-size: 0.82em;
  color: rgba(255, 253, 247, 0.74);
}

body[data-route="home"] #viaje-destacado .trip-meta {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.9rem;
  font-size: 0.95rem;
}

body[data-route="home"] #viaje-destacado .trip-meta span {
  margin-right: 0.45rem;
  color: var(--yellow);
  font-weight: 600;
}

body[data-route="home"] #viaje-destacado .trip-feature__copy p {
  max-width: 46ch;
  margin: 0 0 1.6rem;
  color: rgba(255, 253, 247, 0.8);
  font-size: 0.98rem;
  line-height: 1.66;
}

body[data-route="home"] #viaje-destacado .button--ghost-light {
  background: transparent;
  color: var(--yellow);
  border: 1px solid rgba(243, 195, 24, 0.55);
}

body[data-route="home"] #viaje-destacado .button--ghost-light:hover {
  background: rgba(243, 195, 24, 0.12);
}

/* Foto + overlay de ruta */
body[data-route="home"] #viaje-destacado .trip-feature__map {
  position: relative;
  margin: 0;
  min-height: 100%;
}

body[data-route="home"] #viaje-destacado .trip-feature__map img {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 38vw, 540px);
  object-fit: cover;
  display: block;
}

body[data-route="home"] #viaje-destacado .trip-feature__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 12, 8, 0.3),
    rgba(13, 12, 8, 0.04) 42%,
    rgba(13, 12, 8, 0.22)
  );
  pointer-events: none;
}

body[data-route="home"] #viaje-destacado .trip-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

body[data-route="home"] #viaje-destacado .trip-route__line {
  fill: none;
  stroke: #fffdf7;
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

body[data-route="home"] #viaje-destacado .trip-route__stop circle {
  fill: var(--yellow);
  stroke: #fffdf7;
  stroke-width: 1.6;
}

body[data-route="home"] #viaje-destacado .trip-route__stop text {
  fill: #fffdf7;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 3px;
}

@media (max-width: 820px) {
  body[data-route="home"] #viaje-destacado .trip-feature {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================================================================
   Home · fondo vivo + profundidad (movimiento sutil)
   El fondo deja de ser un crema plano: tres auroras cálidas muy tenues
   se desplazan despacio por detrás del contenido, dando sensación de
   profundidad y vida sin saltos de color.
   =================================================================== */
body[data-route="home"]::before {
  content: "";
  position: fixed;
  inset: -16vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36vmax 36vmax at 18% 20%, rgba(243, 195, 24, 0.10), transparent 60%),
    radial-gradient(42vmax 42vmax at 84% 44%, rgba(169, 94, 54, 0.10), transparent 62%),
    radial-gradient(40vmax 40vmax at 28% 86%, rgba(79, 91, 67, 0.09), transparent 60%);
  animation: laperdudaAurora 42s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes laperdudaAurora {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2.4%, -2%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-2.2%, 1.6%, 0) scale(1.04);
  }
}

/* Parallax: los medios grandes se mueven a otro ritmo dentro de su marco */
body[data-route="home"] .hero-media img,
body[data-route="home"] .hero-media video,
body[data-route="home"] [data-parallax] {
  will-change: transform;
}

body[data-route="home"] #viaje-destacado .trip-feature__map img[data-parallax] {
  transform: scale(1.16);
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="home"]::before {
    animation: none;
  }
  body[data-route="home"] .hero-media img,
  body[data-route="home"] .hero-media video,
  body[data-route="home"] [data-parallax] {
    transform: none !important;
  }
}

/* ===================================================================
   Guatemala · versión clara y minimalista (tipografía del sitio):
   texto a la izquierda, rejilla 2x2 de fotos a la derecha. Reemplaza
   al panel oscuro anterior.
   =================================================================== */
body[data-route="home"] #viaje-destacado .trip-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(1.6rem, 3vw, 3.4rem);
  align-items: center;
}

/* Elemento premium: línea de ruta serpenteante (conecta texto y fotos) */
body[data-route="home"] #viaje-destacado .trip-board__route {
  align-self: stretch;
  display: flex;
  justify-content: center;
  color: rgba(13, 12, 8, 0.4);
}

body[data-route="home"] #viaje-destacado .trip-board__route svg {
  width: clamp(90px, 11vw, 140px);
  height: 100%;
  max-height: 480px;
  overflow: visible;
}

body[data-route="home"] #viaje-destacado .trip-board__route circle {
  fill: var(--yellow);
  stroke: #fffdf7;
  stroke-width: 2;
}

body[data-route="home"] #viaje-destacado .trip-board__title {
  max-width: none;
  margin: 0.65rem 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
}

body[data-route="home"] #viaje-destacado .trip-board__title em {
  display: block;
  margin-top: 0.05rem;
  font-style: italic;
  font-weight: 400;
  font-size: 0.74em;
  color: var(--ink-soft);
}

body[data-route="home"] #viaje-destacado .trip-board__facts {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0.6rem 0 0;
  border-top: 1px solid rgba(13, 12, 8, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.8rem;
}

body[data-route="home"] #viaje-destacado .trip-board__facts li {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

body[data-route="home"] #viaje-destacado .trip-board__facts .trip-board__fact-label {
  margin-right: 0.5rem;
  color: var(--ink);
  font-weight: 600;
}

body[data-route="home"] #viaje-destacado .trip-board__copy p {
  max-width: 54ch;
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}

body[data-route="home"] #viaje-destacado .trip-board__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.9vw, 0.85rem);
  width: 100%;
  aspect-ratio: 4 / 3.3;
}

/* Mosaico tipo bento: piezas de distinto tamaño que encajan (premium) */
body[data-route="home"] #viaje-destacado .trip-board__grid .trip-tile:nth-child(1) {
  grid-area: 1 / 1 / 3 / 2;
}
body[data-route="home"] #viaje-destacado .trip-board__grid .trip-tile:nth-child(2) {
  grid-area: 1 / 2 / 2 / 3;
}
body[data-route="home"] #viaje-destacado .trip-board__grid .trip-tile:nth-child(3) {
  grid-area: 2 / 2 / 4 / 3;
}
body[data-route="home"] #viaje-destacado .trip-board__grid .trip-tile:nth-child(4) {
  grid-area: 3 / 1 / 4 / 2;
}

body[data-route="home"] #viaje-destacado .trip-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(8px, 1vw, 14px);
  box-shadow: 0 16px 38px rgba(32, 27, 16, 0.12);
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms ease;
}

/* Filete interior fino para definir cada pieza */
body[data-route="home"] #viaje-destacado .trip-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(13, 12, 8, 0.08);
  pointer-events: none;
}

body[data-route="home"] #viaje-destacado .trip-tile img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  filter: saturate(1.03) contrast(1.02);
  transition:
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
}

body[data-route="home"] #viaje-destacado .trip-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 64px rgba(32, 27, 16, 0.2);
}

body[data-route="home"] #viaje-destacado .trip-tile:hover img {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.04);
}

@media (max-width: 820px) {
  body[data-route="home"] #viaje-destacado .trip-board {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 2.4rem);
  }
  body[data-route="home"] #viaje-destacado .trip-board__route {
    display: none;
  }
  body[data-route="home"] #viaje-destacado .trip-board__grid {
    max-width: none;
    justify-self: stretch;
  }
  body[data-route="home"] #viaje-destacado .trip-board__grid img:nth-child(2),
  body[data-route="home"] #viaje-destacado .trip-board__grid img:nth-child(4) {
    margin-top: 0;
  }
}

/* ===================================================================
   Documentales · "minicuadro": marco sutil que enmarca el bloque para
   darle empaque, y rejilla a más ancho. Estilo minimalista.
   =================================================================== */
body[data-route="home"] .section--portfolio-teaser {
  background: transparent;
}

body[data-route="home"] .section--portfolio-teaser .portfolio-frame {
  padding: clamp(1.7rem, 3vw, 2.9rem) clamp(1.5rem, 3vw, 2.9rem) clamp(2rem, 3.2vw, 3.1rem);
  border: 1px solid rgba(13, 12, 8, 0.13);
  border-radius: clamp(16px, 2vw, 26px);
  background: rgba(255, 253, 247, 0.55);
  box-shadow: 0 22px 54px rgba(32, 27, 16, 0.06);
}

/* La rejilla ocupa todo el ancho del marco (más espacio horizontal) */
body[data-route="home"] .portfolio-grid--home-featured {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ===================================================================
   Documentales · pulido premium (mismo estilo, más empaque visual):
   filete interior, velo más rico, imagen cinematográfica y tipografía
   más cuidada.
   =================================================================== */
body[data-route="home"] .portfolio-grid--home-featured .project-card {
  box-shadow: 0 20px 46px rgba(32, 27, 16, 0.13);
}

/* Filete interior fino: encuadre premium */
body[data-route="home"] .portfolio-grid--home-featured .project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 247, 0.16);
  pointer-events: none;
  transition: box-shadow 360ms ease;
}

body[data-route="home"] .portfolio-grid--home-featured .project-card:hover::before {
  box-shadow: inset 0 0 0 1px rgba(255, 253, 247, 0.3);
}

/* Imagen con un punto cinematográfico y zoom lento al pasar */
body[data-route="home"] .portfolio-grid--home-featured .project-card img {
  filter: saturate(1.04) contrast(1.03);
  transition:
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
}

body[data-route="home"] .portfolio-grid--home-featured .project-card:hover img {
  transform: scale(1.05);
  filter: saturate(1.08) contrast(1.05);
}

/* Velo inferior más rico y alto: el texto respira con elegancia */
body[data-route="home"] .portfolio-grid--home-featured .project-card__body {
  padding: clamp(1.2rem, 2.2vw, 1.75rem);
  background: linear-gradient(
    0deg,
    rgba(8, 7, 5, 0.92) 0%,
    rgba(8, 7, 5, 0.55) 32%,
    rgba(8, 7, 5, 0) 72%
  );
}

/* Tipografía más cuidada */
body[data-route="home"] .portfolio-grid--home-featured .card-meta {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
}

body[data-route="home"] .portfolio-grid--home-featured .project-card h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  letter-spacing: 0.005em;
}

body[data-route="home"] .portfolio-grid--home-featured .link-cue {
  letter-spacing: 0.16em;
  opacity: 0.92;
}

/* Numeración editorial más fina */
body[data-route="home"] .portfolio-grid--home-featured .project-card::after {
  top: 1.1rem;
  right: 1.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: rgba(255, 253, 247, 0.55);
}

/* ===================================================================
   Heros de páginas interiores (Producción, Viajes, etc.) al mismo
   tamaño de fuente que el hero de la página de inicio.
   =================================================================== */
.page-hero h1,
body[data-route="produccion"] .page-hero h1,
body[data-route="produccion"] .page-hero__content h1 {
  max-width: 26ch !important;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem) !important;
}

.page-hero .lead,
body[data-route="produccion"] .page-hero__content .lead {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}

/* ===================================================================
   Mismo "fundido" del hero del home en todas las páginas interiores:
   la imagen se disuelve en el papel por la parte inferior.
   =================================================================== */
.page-hero::after,
body[data-route="produccion"] .page-hero::after {
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0) 70%, rgba(255, 250, 240, 0.55) 88%, #fffaf0 100%),
    linear-gradient(180deg, rgba(13, 12, 8, 0.5) 0%, rgba(13, 12, 8, 0.2) 40%, rgba(13, 12, 8, 0.05) 66%),
    linear-gradient(90deg, rgba(13, 12, 8, 0.34), rgba(13, 12, 8, 0.05) 55%, rgba(13, 12, 8, 0.24));
}

/* ===================================================================
   Proceso "Cómo trabajamos": los pasos entran en cascada (dinámico,
   premium) cada vez que la sección aparece.
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* El bloque no se desvanece como un todo; animan sus pasos. */
  .process-compact.reveal {
    opacity: 1;
    transform: none;
  }

  .process-compact ol li {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s ease,
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .process-compact.is-visible ol li {
    opacity: 1;
    transform: none;
  }

  .process-compact.is-visible ol li:nth-child(1) {
    transition-delay: 60ms;
  }
  .process-compact.is-visible ol li:nth-child(2) {
    transition-delay: 170ms;
  }
  .process-compact.is-visible ol li:nth-child(3) {
    transition-delay: 280ms;
  }
  .process-compact.is-visible ol li:nth-child(4) {
    transition-delay: 390ms;
  }
}

/* ===================================================================
   Documentales x La Perduda · portfolio estilo Francisco:
   4 tarjetas horizontales, esquinas muy redondeadas, título centrado.
   =================================================================== */
.doc-portfolio {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
}

.doc-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: clamp(18px, 1.8vw, 28px);
  color: #fffdf7;
  text-decoration: none;
  box-shadow: 0 20px 46px rgba(8, 7, 5, 0.26);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease;
}

.doc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.doc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 7, 5, 0.12) 0%,
    rgba(8, 7, 5, 0.28) 45%,
    rgba(8, 7, 5, 0.62) 100%
  );
  transition: background 420ms ease;
}

.doc-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.2rem;
  text-align: center;
}

.doc-card__meta {
  color: var(--yellow);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.doc-card__title {
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.35vw, 1.5rem);
  font-weight: 500;
  line-height: 1.12;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.doc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px rgba(8, 7, 5, 0.34);
}

.doc-card:hover img {
  transform: scale(1.07);
}

.doc-card:hover::after {
  background: linear-gradient(
    180deg,
    rgba(8, 7, 5, 0.2) 0%,
    rgba(8, 7, 5, 0.34) 45%,
    rgba(8, 7, 5, 0.66) 100%
  );
}

/* "Próximamente": no es enlace, atenuado */
.doc-card--soon {
  cursor: default;
}

.doc-card--soon img {
  filter: grayscale(0.4) brightness(0.7);
}

@media (max-width: 900px) {
  .doc-portfolio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .doc-portfolio {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Galería de la ficha (estilo Francisco) */
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.55rem, 1vw, 1rem);
}

.detail-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 16px);
  aspect-ratio: 4 / 3;
  box-shadow: 0 14px 34px rgba(32, 27, 16, 0.1);
}

.detail-gallery__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.detail-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.detail-gallery__item:hover img {
  transform: scale(1.05);
}

@media (max-width: 700px) {
  .detail-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .detail-gallery__item:first-child {
    grid-column: span 2;
    grid-row: auto;
  }
}

/* ===================================================================
   Ficha de documental (plantilla repetible · referencia Francisco/Canva)
   Vídeo contenido, texto compacto, galería 6-9, sin nada de viajes.
   =================================================================== */
.doc-detail {
  padding-block: clamp(1.6rem, 4vw, 3.2rem) clamp(2.5rem, 5vw, 4.5rem);
}

.doc-detail__head {
  max-width: 880px;
  margin: 0 auto clamp(1.4rem, 3vw, 2.4rem);
  text-align: center;
}

.doc-detail__head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.06;
}

.doc-detail__meta {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.doc-detail__meta .doc-meta-place {
  color: var(--yellow-deep);
}

/* Vídeo de YouTube embebido, contenido (no abarca toda la página) */
.doc-video {
  max-width: 880px;
  margin: 0 auto clamp(1.8rem, 4vw, 3rem);
  border-radius: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(32, 27, 16, 0.16);
  background: #0d0c08;
}

.doc-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  display: block;
  color: #fffdf7;
}

.doc-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.doc-video__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}

.doc-video__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fffdf7;
}

.doc-video__play span:first-child {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(243, 195, 24, 0.95);
  color: #0d0c08;
  font-size: 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.doc-video__play small {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Bloques de texto compactos */
.doc-block {
  max-width: 760px;
  margin: 0 auto;
}

.doc-block h2,
.doc-why h2 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
}

.doc-block p {
  margin: 0 0 0.7rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.62;
}

.doc-gallery__label {
  max-width: 760px;
  margin: clamp(1.2rem, 2.5vw, 2rem) auto 0.7rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Galería 6-9 fotos, compacta (se rellena según el nº de fotos) */
.doc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 15vw, 170px), 1fr));
  gap: clamp(0.4rem, 0.8vw, 0.7rem);
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
}

.doc-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: clamp(8px, 0.9vw, 12px);
  aspect-ratio: 1 / 1;
}

.doc-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.doc-gallery figure:hover img {
  transform: scale(1.06);
}

/* "¿Por qué este documental?" — encabezado izq., texto der. (Francisco) */
.doc-why {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
}

.doc-why p {
  margin: 0 0 0.7rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.62;
}

.doc-detail .doc-back {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

/* "Volver a bitácora" al pie de los artículos (mismo estilo que la ficha). */
body[data-route="bitacora"] .doc-back {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}


@media (max-width: 700px) {
  .doc-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .doc-why {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================================================================
   Producción · Servicios más compacto: título principal más pequeño y
   junto, sin números en las listas, subtítulos de columna centrados.
   =================================================================== */
body[data-route="produccion"] .production-services {
  padding-block: clamp(1.9rem, 4vw, 3.1rem);
}

body[data-route="produccion"] .production-services .section-head {
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
}

body[data-route="produccion"] .production-services .section-head h2 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

body[data-route="produccion"] .service-column > .card-meta,
body[data-route="produccion"] .service-column > h3 {
  text-align: center;
}

body[data-route="produccion"] .service-column > h3 {
  max-width: none;
  padding: 0.3rem 1rem 0.1rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.14;
}

body[data-route="produccion"] .service-list {
  padding: 0 1.1rem 1.1rem;
  gap: 0.55rem;
  margin-top: 0.2rem;
}

body[data-route="produccion"] .service-list li {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-top: 0.6rem;
}

/* fuera los números (01, 02, 03) */
body[data-route="produccion"] .service-list li > span {
  display: none;
}

body[data-route="produccion"] .service-list h4 {
  font-size: 0.92rem;
}

body[data-route="produccion"] .service-list p {
  margin-top: 0.25rem;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ===================================================================
   Con quién trabajamos · cajitas para logos de colaboradores
   (editables desde el admin: cada caja contiene una imagen sustituible).
   =================================================================== */
.client-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: clamp(1.2rem, 2.6vw, 1.9rem);
}

/* Sin caja ni contorno: solo el logo, tal cual se suba */
.client-logo {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 2;
  padding: 0.6rem;
  border: none;
  background: none;
}

.client-logo img {
  width: 86%;
  height: 74%;
  object-fit: contain;
}

@media (max-width: 600px) {
  .client-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===================================================================
   Servicios · acabado premium y equilibrado: cada columna es una
   tarjeta suave (superficie, borde fino, redondeo, sombra, hover),
   con separador bajo el título y alturas iguales.
   =================================================================== */
body[data-route="produccion"] .service-columns {
  align-items: stretch;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
}

body[data-route="produccion"] .service-column {
  border: 1px solid rgba(13, 12, 8, 0.1);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.6);
  box-shadow: 0 14px 36px rgba(32, 27, 16, 0.05);
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms ease;
}

body[data-route="produccion"] .service-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(32, 27, 16, 0.1);
}

body[data-route="produccion"] .service-column::before {
  border-radius: 16px 16px 0 0;
}

body[data-route="produccion"] .service-column > .card-meta {
  padding: 1.3rem 1.3rem 0;
}

body[data-route="produccion"] .service-column > h3 {
  margin: 0 1.3rem;
  padding: 0.45rem 0 0.95rem;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  border-bottom: 1px solid rgba(13, 12, 8, 0.09);
}

body[data-route="produccion"] .service-list {
  padding: 0.6rem 1.3rem 1.4rem;
}

body[data-route="produccion"] .service-list li:first-child {
  border-top: 0;
  padding-top: 0.3rem;
}

/* ===================================================================
   Servicios · móvil: el título dejaba de verse bien por el max-width
   de 11ch (lo metía en una franja estrecha en una columna a todo el
   ancho). En móvil usa el ancho disponible, alineado a la izquierda
   (uniforme con el acento y la lista) y un tamaño equilibrado.
   =================================================================== */
@media (max-width: 940px) {
  body[data-route="produccion"] .service-columns--editorial .service-column > .card-meta,
  body[data-route="produccion"] .service-columns--editorial .service-column > h3 {
    text-align: left;
  }

  body[data-route="produccion"] .service-columns--editorial .service-column > h3 {
    max-width: none;
    font-size: clamp(1.35rem, 4.8vw, 1.75rem);
    line-height: 1.12;
  }

  body[data-route="produccion"] .service-columns--editorial .service-column {
    padding-top: 1.25rem;
  }

  body[data-route="produccion"] .service-list h4 {
    font-size: 0.95rem;
  }

  body[data-route="produccion"] .service-list p {
    font-size: 0.9rem;
  }
}

/* ===================================================================
   Formulario de producción · caja más pequeña y premium (solo aquí,
   para no afectar a los formularios de contacto/newsletter).
   =================================================================== */
body[data-route="produccion"] .section--production-form .form-panel {
  max-width: 560px;
  margin-left: auto;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(32, 27, 16, 0.08);
}

body[data-route="produccion"] .section--production-form form {
  gap: 0.7rem;
}

body[data-route="produccion"] .section--production-form .form-grid {
  gap: 0.7rem;
}

body[data-route="produccion"] .section--production-form label {
  gap: 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

body[data-route="produccion"] .section--production-form input,
body[data-route="produccion"] .section--production-form select,
body[data-route="produccion"] .section--production-form textarea {
  padding: 0.56rem 0.72rem;
  border: 1px solid rgba(13, 12, 8, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  box-shadow: none;
}

body[data-route="produccion"] .section--production-form textarea {
  min-height: 88px;
}

body[data-route="produccion"] .section--production-form .button {
  margin-top: 0.2rem;
  padding: 0.68rem 1.2rem;
  font-size: 0.78rem;
}

/* ===================================================================
   Ficha de documental · TEMA OSCURO PREMIUM (la parte más cuidada).
   Fondo vivo (auroras cálidas en movimiento), título que respira bajo
   el menú fijo, y todo el contenido en una columna coherente.
   =================================================================== */
body[data-route="produccion"] .doc-detail {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 9vw, 9rem) clamp(3.5rem, 6vw, 5.5rem);
  background: linear-gradient(180deg, #15130d 0%, #0c0b07 58%, #0a0a06 100%);
  color: #f1ece1;
}

body[data-route="produccion"] .doc-detail::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36vmax 36vmax at 15% 6%, rgba(243, 195, 24, 0.12), transparent 60%),
    radial-gradient(44vmax 44vmax at 88% 62%, rgba(169, 94, 54, 0.14), transparent 62%),
    radial-gradient(40vmax 40vmax at 58% 112%, rgba(79, 91, 67, 0.12), transparent 60%);
  animation: laperdudaAurora 46s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="produccion"] .doc-detail::before {
    animation: none;
  }
}

body[data-route="produccion"] .doc-detail > .container {
  position: relative;
  z-index: 1;
}

/* Contenido en una columna coherente (se acaba el "manga por hombro") */
body[data-route="produccion"] .doc-block,
body[data-route="produccion"] .doc-gallery__label,
body[data-route="produccion"] .doc-detail .doc-gallery,
body[data-route="produccion"] .doc-why {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Encabezado */
body[data-route="produccion"] .doc-detail__head h1 {
  color: #fffdf7;
}

body[data-route="produccion"] .doc-detail__meta {
  color: rgba(255, 253, 247, 0.64);
}

body[data-route="produccion"] .doc-detail__meta .doc-meta-place {
  color: var(--yellow);
}

/* Texto */
body[data-route="produccion"] .doc-block h2,
body[data-route="produccion"] .doc-why h2 {
  color: #fffdf7;
}

body[data-route="produccion"] .doc-block p,
body[data-route="produccion"] .doc-why p {
  color: rgba(255, 253, 247, 0.78);
}

body[data-route="produccion"] .doc-gallery__label {
  color: rgba(255, 253, 247, 0.58);
}

/* Vídeo: marco premium sobre oscuro */
body[data-route="produccion"] .doc-video {
  border: 1px solid rgba(255, 253, 247, 0.08);
  box-shadow: 0 44px 96px rgba(0, 0, 0, 0.5);
}

/* Galería */
body[data-route="produccion"] .doc-detail .doc-gallery figure {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 253, 247, 0.06);
}

/* CTA volver: pie de navegación claramente separado del CTA principal.
   Una línea fina lo separa y le da aire, y el enlace es ligero (no un
   botón sólido) para que no se confunda con "Apoya este proyecto". */
body[data-route="produccion"] .doc-detail .doc-back {
  max-width: 1000px;
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 253, 247, 0.12);
}

body[data-route="produccion"] .doc-back .button {
  background: transparent;
  border: 0;
  color: rgba(255, 253, 247, 0.62);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 0.35rem 0.2rem;
  box-shadow: none;
}

body[data-route="produccion"] .doc-back .button:hover {
  background: transparent;
  color: #fffdf7;
  transform: translateX(-3px);
}

/* CTA "Apoya este proyecto" (solo Senegal) sobre oscuro */
body[data-route="produccion"] .doc-why .button--yellow {
  color: #0d0c08;
}

/* ===================================================================
   Servicios · tarjetas premium consistentes (web y móvil).
   Antes las columnas eran planas y el hover dejaba una sombra
   "cortada y sin margen". Ahora cada columna es una tarjeta real
   (borde, fondo, padding, esquinas) y la floritura (elevación +
   sombra) tiene su espacio.
   =================================================================== */
body[data-route="produccion"] .production-services {
  padding-block: clamp(2.2rem, 4vw, 3.4rem);
}

body[data-route="produccion"] .service-columns--editorial {
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
  align-items: stretch;
}

body[data-route="produccion"] .service-columns--editorial .service-column {
  padding: clamp(1.3rem, 2vw, 1.7rem) clamp(1.3rem, 2vw, 1.6rem)
    clamp(1.5rem, 2.2vw, 1.85rem);
  border: 1px solid rgba(13, 12, 8, 0.1);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.5);
  box-shadow: 0 14px 36px rgba(32, 27, 16, 0.05);
  overflow: hidden;
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms ease;
}

body[data-route="produccion"] .service-columns--editorial .service-column::before {
  content: none;
}

body[data-route="produccion"] .service-columns--editorial .service-column:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 62px rgba(32, 27, 16, 0.1);
}

body[data-route="produccion"] .service-column__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: rgba(243, 195, 24, 0.16);
  color: var(--yellow-deep);
  transition: background 320ms ease, color 320ms ease;
}

body[data-route="produccion"] .service-column__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

body[data-route="produccion"] .service-columns--editorial .service-column:hover .service-column__icon {
  background: var(--yellow);
  color: var(--ink);
}

body[data-route="produccion"] .service-columns--editorial .service-column > .card-meta {
  margin-top: 0.3rem;
}

body[data-route="produccion"] .service-columns--editorial .service-column > h3 {
  max-width: none;
  margin-bottom: 0.45rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(13, 12, 8, 0.09);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
}

@media (max-width: 940px) {
  body[data-route="produccion"] .service-columns--editorial .service-column > h3 {
    font-size: clamp(1.2rem, 4.4vw, 1.6rem);
  }
}

/* Visual admin drawer: edit the site from the page itself. */
.admin-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 10002;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  width: min(560px, calc(100vw - 18px));
  border-left: 1px solid rgba(255, 253, 247, 0.12);
  background: rgba(17, 16, 12, 0.98);
  box-shadow: -30px 0 70px rgba(0, 0, 0, 0.36);
  color: var(--white);
  overflow: auto;
}

.admin-drawer[hidden] {
  display: none !important;
}

.admin-drawer::before {
  content: "";
  position: fixed;
  inset: 0;
  right: min(560px, calc(100vw - 18px));
  z-index: -1;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px);
}

.admin-drawer__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 253, 247, 0.11);
  background: rgba(17, 16, 12, 0.98);
  padding: 1.2rem 1.2rem 1rem;
}

.admin-drawer__header strong {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.05;
}

.admin-drawer__header button,
.admin-drawer-form button,
.admin-drawer-tabs button,
.admin-drawer-pages button,
.admin-drawer-item__actions button {
  border: 1px solid rgba(255, 253, 247, 0.2);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.04);
  color: var(--white);
  padding: 0.68rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-drawer__hint,
.admin-drawer-view > p {
  margin: 0;
  color: rgba(255, 253, 247, 0.72);
  font-size: 0.92rem;
  line-height: 1.6;
}

.admin-drawer__hint {
  padding: 1rem 1.2rem 0;
}

.admin-drawer-tabs {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 1rem 1.2rem 0.75rem;
  scrollbar-width: thin;
}

.admin-drawer-tabs button {
  flex: 0 0 auto;
  padding-inline: 0.85rem;
}

.admin-drawer-tabs button[aria-pressed="true"],
.admin-drawer-form button[type="submit"] {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

.admin-drawer-status {
  min-height: 1.5rem;
  margin: 0;
  padding: 0 1.2rem 0.8rem;
  color: rgba(255, 253, 247, 0.68);
  font-size: 0.82rem;
}

.admin-drawer-status[data-type="error"] {
  color: #ff8e7e;
}

.admin-drawer-view {
  display: grid;
  gap: 1rem;
  padding: 0.4rem 1.2rem 1.4rem;
}

.admin-drawer-view[hidden] {
  display: none !important;
}

.admin-drawer-view h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.05;
}

.admin-drawer-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.admin-drawer-pages button {
  border-radius: 8px;
  padding: 0.95rem;
  text-align: left;
}

.admin-drawer-form {
  display: grid;
  gap: 0.85rem;
  border: 1px solid rgba(255, 253, 247, 0.12);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.055);
  padding: 1rem;
}

.admin-drawer-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-drawer-form label {
  display: grid;
  gap: 0.35rem;
  color: rgba(255, 253, 247, 0.74);
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-drawer-form input,
.admin-drawer-form textarea,
.admin-drawer-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 253, 247, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--white);
  padding: 0.7rem 0.78rem;
  font: 700 0.88rem/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.admin-drawer-form textarea {
  min-height: 92px;
  resize: vertical;
}

.admin-drawer-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.admin-drawer-list {
  display: grid;
  gap: 0.65rem;
}

.admin-drawer-empty {
  margin: 0;
  border: 1px dashed rgba(255, 253, 247, 0.18);
  border-radius: 12px;
  color: rgba(255, 253, 247, 0.66);
  padding: 1rem;
}

.admin-drawer-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  border: 1px solid rgba(255, 253, 247, 0.12);
  border-radius: 13px;
  background: rgba(255, 253, 247, 0.045);
  padding: 0.7rem;
}

.admin-drawer-item--section {
  grid-template-columns: minmax(0, 1fr);
}

.admin-drawer-item img {
  width: 86px;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
}

.admin-drawer-item strong {
  display: block;
  margin: 0.12rem 0 0.25rem;
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.1;
}

.admin-drawer-item p {
  margin: 0;
  color: rgba(255, 253, 247, 0.68);
  font-size: 0.8rem;
  line-height: 1.45;
}

.admin-drawer-item__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-drawer-item__actions button {
  padding: 0.5rem 0.62rem;
  font-size: 0.64rem;
}

.admin-drawer-item__actions button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

html.admin-drawer-open .admin-toolbar {
  transform: translateY(110%);
  pointer-events: none;
}

html.admin-mode [data-admin-image="true"],
html.admin-mode [data-admin-video="true"] {
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .admin-drawer {
    width: 100vw;
  }

  .admin-drawer::before {
    display: none;
  }

  .admin-drawer-form__grid,
  .admin-drawer-pages {
    grid-template-columns: 1fr;
  }

  .admin-drawer__header,
  .admin-drawer__hint,
  .admin-drawer-tabs,
  .admin-drawer-status,
  .admin-drawer-view {
    padding-inline: 1rem;
  }
}

/* ===================================================================
   Texto justificado en toda la web: los párrafos de cuerpo salen con
   los márgenes rectos a ambos lados. Se usa guionado en español para
   evitar huecos grandes. No afecta a títulos, etiquetas, botones ni a
   los bloques que deben ir centrados (heros, intros centradas, etc.).
   =================================================================== */
main p,
main li,
main blockquote {
  text-align: left;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Restaurar el centrado donde es intencional */
[class*="hero"] p,
[class*="hero"] .lead,
.section-head--center p,
.section--portfolio-teaser .section-head p,
.section--process-line .section-head p,
.doc-detail__head p,
.doc-detail__meta,
.process-compact__heading p,
.contact-form-card__head p,
.contact-direct__head p,
.quote-band,
.quote-band p {
  text-align: center;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ===================================================================
   Footer · Newsletter compacto: el título "Newsletter" pegado a la
   caja del email. Se retira la línea descriptiva y se ajusta el
   espaciado del formulario (el hueco pasa de ~52px a ~14px).
   =================================================================== */
.footer-newsletter {
  gap: 0.3rem;
}

/* Línea descriptiva ("Recibe nuestras historias.") fuera, para pegar
   el título a la caja. */
.footer-newsletter > p {
  display: none;
}

.footer-newsletter > h3 {
  margin: 0;
}

.footer-newsletter form {
  margin-top: 0.15rem;
}

/* Oculta visualmente el texto "Email" del label (el campo se entiende
   solo), manteniendo el label para accesibilidad. */
.footer-newsletter form > label {
  font-size: 0;
}

.footer-newsletter form > label input {
  font-size: 0.9rem;
}

/* ===================================================================
   Heros interiores UNIFORMES: misma altura y todo centrado, como
   Inicio/Producción. Aplica a Viajes, Bitácora, Nosotros, Tienda,
   Contacto y Producción (todos tienen .page-hero). El hero del home
   (.hero) se mantiene aparte (casi pantalla completa).
   =================================================================== */
.page-hero {
  min-height: 80svh !important;
  align-items: center !important;
}

.page-hero__content {
  width: min(880px, calc(100% - 3rem)) !important;
  margin-inline: auto !important;
  justify-items: center !important;
  text-align: center !important;
  align-content: center !important;
}

.page-hero h1 {
  max-width: 26ch;
  margin-inline: auto;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem) !important;
}

.page-hero .lead {
  max-width: 60ch;
  margin-inline: auto;
}

.page-hero__content > p:not(.lead) {
  max-width: 62ch;
  margin-inline: auto;
}

/* ===================================================================
   Ficha de viaje destacado: formato editorial compacto (texto + 2
   parrafos a la izquierda, minimapa minimalista del recorrido a la
   derecha). Contenido y mapa centrados y equilibrados.
   =================================================================== */
.trip-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
  background: #fffaf0;
  border: 1px solid rgba(13, 12, 8, 0.1);
  border-radius: clamp(14px, 1.6vw, 22px);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  box-shadow: 0 22px 60px rgba(32, 27, 16, 0.06);
}

.trip-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  text-align: left;
}

.trip-feature__meta {
  color: #b6900a;
  font-size: 0.66rem;
}

.trip-feature__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
  line-height: 1.05;
  color: var(--ink);
  max-width: none;
  margin: 0;
}

.trip-feature__copy p {
  color: rgba(13, 12, 8, 0.7);
  line-height: 1.62;
  font-size: 0.93rem;
  margin: 0;
  text-align: left;
}

.trip-feature__line {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}

.trip-feature .cta-row {
  margin-top: 0.5rem;
}

.trip-feature .button--ghost {
  color: var(--ink);
  border: 1px solid rgba(13, 12, 8, 0.28);
  background: transparent;
}

.trip-feature .button--ghost:hover {
  background: rgba(13, 12, 8, 0.06);
  border-color: rgba(13, 12, 8, 0.5);
}

.trip-feature__map {
  position: relative;
  overflow: hidden;
  margin: 0;
  align-self: stretch;
  min-height: 340px;
  background: #15130d;
  border: 1px solid rgba(255, 253, 247, 0.1);
  border-radius: clamp(12px, 1.4vw, 18px);
  display: grid;
  place-items: stretch;
}

.trip-feature__map-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.trip-feature__map-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 100% at 70% 22%, rgba(243, 195, 24, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(13, 12, 8, 0.72), rgba(13, 12, 8, 0.9));
}

.trip-feature__map svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  padding: clamp(0.8rem, 1.6vw, 1.3rem);
}

.trip-feature__map svg path {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.trip-feature__map svg text {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

@media (max-width: 820px) {
  .trip-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .trip-feature__map {
    min-height: 300px;
  }
}

/* ===================================================================
   Ficha de viaje · interacción mapa <-> texto y vida del recorrido:
   - La ruta se dibuja al entrar en pantalla (stroke-dashoffset por JS).
   - Un punto de luz viaja por el recorrido (animateMotion).
   - Al pasar el ratón por una ciudad del texto se ilumina en el mapa,
     y viceversa.
   =================================================================== */
.trip-city {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.trip-city.is-active {
  color: #b6900a;
  border-bottom-color: rgba(182, 144, 10, 0.5);
}

.trip-route {
  transition: stroke-dashoffset 1.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.trip-dot {
  cursor: pointer;
  transition: r 0.25s ease, filter 0.25s ease;
}

.trip-dot.is-active {
  r: 5.4;
  filter: drop-shadow(0 0 7px rgba(243, 195, 24, 0.95));
}

.trip-label {
  cursor: pointer;
  transition: fill 0.2s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.trip-label.is-active {
  fill: #f3c318;
  font-weight: 700;
}

.trip-spark {
  filter: drop-shadow(0 0 6px rgba(255, 253, 247, 0.95));
}

@media (prefers-reduced-motion: reduce) {
  .trip-spark { display: none; }
  .trip-route { transition: none; }
}

/* ===================================================================
   Viajes · "Para quién es este viaje" fusionado con "Por qué viajar":
   foto del perfil reducida + timeline horizontal de puntos clave
   (sin descripciones) sobre el fondo oscuro.
   =================================================================== */
body[data-route="viajes"] .section--ink:has(#perfil) .media-frame--portrait {
  max-width: 340px;
  margin-inline: auto;
  align-self: center;
}

.why-timeline {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 253, 247, 0.12);
  padding-top: clamp(1.8rem, 4vw, 2.8rem);
}

.why-timeline__eyebrow {
  display: block;
  text-align: center;
  color: var(--yellow);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.why-timeline__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
}

.why-timeline__steps::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 195, 24, 0.55) 12%, rgba(243, 195, 24, 0.55) 88%, transparent);
}

.why-timeline__steps li {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  text-align: center;
  position: relative;
}

.why-timeline__steps li::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 5px rgba(243, 195, 24, 0.12);
  position: relative;
  z-index: 1;
}

.why-timeline__label {
  color: rgba(255, 253, 247, 0.9);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  font-weight: 600;
  line-height: 1.25;
  max-width: 14ch;
}

@media (max-width: 720px) {
  .why-timeline__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.7rem 1rem;
  }
  .why-timeline__steps::before {
    display: none;
  }
}

/* ===================================================================
   Viajes · refinamiento de la sección fusionada: más compacta (cita e
   imagen más pequeñas) y timeline dinámico (la línea se dibuja, los
   puntos aparecen en secuencia y se iluminan al pasar el ratón).
   El estado inicial oculto se limita a .reveal, así que si el JS no
   corre el timeline se ve igualmente.
   =================================================================== */
body[data-route="viajes"] .section--ink:has(#perfil) {
  padding-block: clamp(2.4rem, 5vw, 3.8rem);
}

body[data-route="viajes"] .section--ink:has(#perfil) .split {
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

body[data-route="viajes"] .section--ink:has(#perfil) .quote-band {
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.32;
  margin-top: 0.9rem;
  max-width: 26ch;
}

body[data-route="viajes"] .section--ink:has(#perfil) .media-frame--portrait {
  max-width: 300px;
}

.why-timeline__steps li::before {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.why-timeline__steps li:hover::before {
  transform: scale(1.55);
  box-shadow: 0 0 0 7px rgba(243, 195, 24, 0.2);
}

.why-timeline__steps li:hover .why-timeline__label {
  color: #f3c318;
}

@media (prefers-reduced-motion: no-preference) {
  .why-timeline.reveal .why-timeline__steps::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .why-timeline.is-visible .why-timeline__steps::before {
    transform: scaleX(1);
  }

  .why-timeline.reveal .why-timeline__steps li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .why-timeline.is-visible .why-timeline__steps li {
    opacity: 1;
    transform: none;
  }

  .why-timeline.is-visible .why-timeline__steps li:nth-child(2) { transition-delay: 0.1s; }
  .why-timeline.is-visible .why-timeline__steps li:nth-child(3) { transition-delay: 0.2s; }
  .why-timeline.is-visible .why-timeline__steps li:nth-child(4) { transition-delay: 0.3s; }
  .why-timeline.is-visible .why-timeline__steps li:nth-child(5) { transition-delay: 0.4s; }
}

/* Viajes · perfil: la imagen rellena su columna (recorte vertical) para
   eliminar el hueco que la rodeaba cuando era más baja que el texto. */
body[data-route="viajes"] .section--ink:has(#perfil) .split {
  align-items: stretch;
}

body[data-route="viajes"] .section--ink:has(#perfil) .media-frame--portrait {
  max-width: 330px;
  align-self: stretch;
  height: auto;
  aspect-ratio: auto;
}

body[data-route="viajes"] .section--ink:has(#perfil) .media-frame--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why-timeline {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
}

/* ============================================================
   Tienda · Próxima apertura (columna centrada) + Colaboraciones
   ============================================================ */
body[data-route="tienda"] .shop-coming__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}

body[data-route="tienda"] .shop-coming__eyebrow {
  font-size: 0.92rem;
  letter-spacing: 0.32em;
}

body[data-route="tienda"] .shop-coming h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  margin: 0;
}

body[data-route="tienda"] .shop-coming p {
  margin: 0;
  max-width: 52ch;
}

body[data-route="tienda"] .shop-coming__form {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  width: min(420px, 100%);
  margin-top: 0.9rem;
}

body[data-route="tienda"] .shop-coming__cue {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  margin: 0 0 0.2rem;
}

body[data-route="tienda"] .shop-coming__form input[type="email"] {
  width: 100%;
  text-align: center;
}

body[data-route="tienda"] .shop-coming__form .button {
  width: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Colaboraciones: caja más reducida y texto centrado a su altura */
body[data-route="tienda"] #colaboraciones .form-layout {
  align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.7fr);
}

body[data-route="tienda"] #colaboraciones .form-panel {
  max-width: 460px;
  justify-self: end;
  width: 100%;
}

/* ============================================================
   NOSOTROS · ajustes integrales (historia, pilares, valores,
   equipo en filas alternas, comunidad)
   ============================================================ */

/* S1 · Nuestra historia: imagen ~50% menos alta, texto centrado */
body[data-route="nosotros"] #historia .split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
body[data-route="nosotros"] #historia .media-frame--portrait {
  aspect-ratio: 1 / 1;
  width: 100%;
  justify-self: end;
}
body[data-route="nosotros"] #historia .text-stack {
  max-width: 540px;
}
body[data-route="nosotros"] #historia h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
}
body[data-route="nosotros"] #historia p {
  font-size: 0.97rem;
  line-height: 1.6;
}

/* S2 · Pilares: sin cuadros blancos y CTAs alineados abajo */
body[data-route="nosotros"] .pillar-story-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
body[data-route="nosotros"] .pillar-story-card img {
  border-radius: 14px;
}
body[data-route="nosotros"] .pillar-story-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.95rem 0.1rem 0;
  flex: 1 1 auto;
}
body[data-route="nosotros"] .pillar-story-card .button {
  margin-top: auto;
}

/* S3 · Valores: 3 columnas, más compacto y centrado */
body[data-route="nosotros"] .section--values .values-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
  margin-inline: auto;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
}
body[data-route="nosotros"] .section--values .value-item {
  max-width: 340px;
}
body[data-route="nosotros"] .section--values .values-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
}
body[data-route="nosotros"] .section--values .value-item h3 {
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
}
body[data-route="nosotros"] .section--values .value-item em {
  font-size: 1rem;
}
body[data-route="nosotros"] .section--values .value-item p {
  font-size: 0.95rem;
  line-height: 1.58;
}

/* S4 · Equipo: filas alternas (zigzag) estilo Watatu */
body[data-route="nosotros"] .team-rows {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
body[data-route="nosotros"] .team-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
body[data-route="nosotros"] .team-row--reverse {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
body[data-route="nosotros"] .team-row--reverse .team-row__media {
  order: 2;
}
body[data-route="nosotros"] .team-row--reverse .team-row__body {
  order: 1;
}
body[data-route="nosotros"] .team-row__media {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius);
}
body[data-route="nosotros"] .team-row__media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}
body[data-route="nosotros"] .team-row__body {
  display: grid;
  gap: 0.5rem;
  max-width: 480px;
}
body[data-route="nosotros"] .team-row__body h3 {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  line-height: 1.05;
}
body[data-route="nosotros"] .team-row__body p {
  font-size: 0.97rem;
  line-height: 1.6;
}
@media (max-width: 760px) {
  body[data-route="nosotros"] .team-row,
  body[data-route="nosotros"] .team-row--reverse {
    grid-template-columns: 1fr;
  }
  body[data-route="nosotros"] .team-row--reverse .team-row__media,
  body[data-route="nosotros"] .team-row--reverse .team-row__body {
    order: 0;
  }
}

/* S6 · Comunidad: centrado, CTAs como enlaces de texto */
body[data-route="nosotros"] #comunidad .comunidad-inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1rem;
}
body[data-route="nosotros"] #comunidad .comunidad-links {
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}
body[data-route="nosotros"] #comunidad .comunidad-links a {
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 12, 8, 0.4);
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
body[data-route="nosotros"] #comunidad .comunidad-links a:hover {
  border-bottom-color: var(--ink);
}

/* ============================================================
   NOSOTROS · correcciones (v2): historia al margen estándar,
   valores compactos en 3 columnas, equipo compacto 2x2
   ============================================================ */

/* S1 · Historia: el contenedor .split estaba capado a 1160px (regla global)
   y quedaba 100px descentrado respecto a la línea roja. Lo llevamos al
   ancho estándar (--max) para que el texto arranque en el margen real. */
body[data-route="nosotros"] #historia .split {
  width: min(calc(100% - var(--layout-gutter)), var(--max));
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}
body[data-route="nosotros"] #historia .media-frame--portrait {
  aspect-ratio: 1 / 1;
  width: 100%;
  justify-self: end;
}
body[data-route="nosotros"] #historia .text-stack {
  max-width: 560px;
}

/* S3 · Valores: mucho más compacto, 3 columnas reales (cancelamos el
   span 2 sobre rejilla de 6 que dejaba todo en una columna) */
body[data-route="nosotros"] .section--values {
  padding-block: clamp(2.4rem, 4.5vw, 3.8rem);
}
body[data-route="nosotros"] .section--values .values-head {
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
body[data-route="nosotros"] .section--values .values-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}
body[data-route="nosotros"] .section--values .values-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1000px;
  margin-inline: auto;
  column-gap: clamp(1.6rem, 3vw, 2.6rem);
  row-gap: 0;
}
body[data-route="nosotros"] .section--values .value-item,
body[data-route="nosotros"] .section--values .value-item:nth-child(4),
body[data-route="nosotros"] .section--values .value-item:nth-child(5) {
  grid-column: auto;
  max-width: none;
}
body[data-route="nosotros"] .section--values .value-icon {
  margin-bottom: 0.5rem;
}
body[data-route="nosotros"] .section--values .value-item h3 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}
body[data-route="nosotros"] .section--values .value-item em {
  font-size: 0.98rem;
}
body[data-route="nosotros"] .section--values .value-item p {
  font-size: 0.92rem;
  line-height: 1.55;
}

/* S4 · Equipo: rejilla compacta 2x2 (retrato + texto al lado), moderno y premium */
body[data-route="nosotros"] .team-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 3vw, 2.6rem) clamp(2.2rem, 4vw, 3.6rem);
  max-width: 920px;
  margin-inline: auto;
}
body[data-route="nosotros"] .team-row,
body[data-route="nosotros"] .team-row--reverse {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  max-width: none;
  margin: 0;
}
body[data-route="nosotros"] .team-row--reverse .team-row__media,
body[data-route="nosotros"] .team-row--reverse .team-row__body {
  order: 0;
}
body[data-route="nosotros"] .team-row__media {
  aspect-ratio: 4 / 5;
  width: 160px;
  border-radius: 14px;
}
body[data-route="nosotros"] .team-row__media img {
  min-height: 0;
}
body[data-route="nosotros"] .team-row__body {
  max-width: none;
  gap: 0.3rem;
}
body[data-route="nosotros"] .team-row__body .card-meta {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
body[data-route="nosotros"] .team-row__body h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  line-height: 1.04;
}
body[data-route="nosotros"] .team-row__body p {
  font-size: 0.9rem;
  line-height: 1.5;
}
@media (max-width: 720px) {
  body[data-route="nosotros"] .team-rows {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   NOSOTROS · v3: equipo zigzag compacto + premium, fundido en Valores
   ============================================================ */

/* Encabezado de equipo centrado */
body[data-route="nosotros"] #equipo .team-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
body[data-route="nosotros"] #equipo .team-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  max-width: 20ch;
}

/* Filas alternas (zigzag) compactas, texto centrado */
body[data-route="nosotros"] .team-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 3.4vw, 2.8rem);
  max-width: 960px;
  margin-inline: auto;
}
body[data-route="nosotros"] .team-row,
body[data-route="nosotros"] .team-row--reverse {
  display: grid;
  grid-template-columns: 200px minmax(0, 300px);
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 0 0;
}
body[data-route="nosotros"] .team-row--reverse {
  grid-template-columns: minmax(0, 300px) 200px;
  margin: 0 0 0 auto;
}
body[data-route="nosotros"] .team-row--reverse .team-row__media { order: 2; }
body[data-route="nosotros"] .team-row--reverse .team-row__body { order: 1; }
body[data-route="nosotros"] .team-row__media {
  width: 200px;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
}
body[data-route="nosotros"] .team-row__media img { min-height: 0; }
body[data-route="nosotros"] .team-row__body {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 300px;
  gap: 0.4rem;
}
body[data-route="nosotros"] .team-row__body .card-meta {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
body[data-route="nosotros"] .team-row__body h3 {
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.05;
}
body[data-route="nosotros"] .team-row__body p {
  font-size: 0.92rem;
  line-height: 1.55;
}
@media (max-width: 720px) {
  body[data-route="nosotros"] .team-row,
  body[data-route="nosotros"] .team-row--reverse {
    grid-template-columns: 1fr;
    width: auto;
    margin-inline: auto;
    justify-items: center;
  }
  body[data-route="nosotros"] .team-row--reverse .team-row__media,
  body[data-route="nosotros"] .team-row--reverse .team-row__body { order: 0; }
}

/* Aparición moderna y escalonada de los miembros (observer propio en
   nosotros.html añade .anim-ready al activar y .is-in al entrar en vista) */
@media (prefers-reduced-motion: no-preference) {
  body[data-route="nosotros"] #equipo.anim-ready .team-row {
    opacity: 0;
    transform: translateY(26px) scale(0.984);
    filter: blur(4px);
    transition: opacity 0.8s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.8s ease;
  }
  body[data-route="nosotros"] #equipo.anim-ready .team-row.is-in {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Valores: fundido blanco arriba y abajo (estilo heros) para enlazar con
   las secciones crema vecinas */
body[data-route="nosotros"] .section--values {
  position: relative;
  padding-block: clamp(4rem, 6.5vw, 5.5rem);
}
body[data-route="nosotros"] .section--values > .container {
  position: relative;
  z-index: 2;
}
body[data-route="nosotros"] .section--values::before,
body[data-route="nosotros"] .section--values::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(56px, 7vw, 96px);
  pointer-events: none;
  z-index: 1;
}
body[data-route="nosotros"] .section--values::before {
  top: 0;
  background: linear-gradient(to bottom, #fffaf0, rgba(255, 250, 240, 0));
}
body[data-route="nosotros"] .section--values::after {
  bottom: 0;
  background: linear-gradient(to top, #fffaf0, rgba(255, 250, 240, 0));
}

/* ============================================================
   NOSOTROS · v4: footer distinguido, fundido sutil, equipo con
   número índice que rellena los huecos del zigzag
   ============================================================ */

/* Footer: como la sección previa (intercultural) es oscura, lo separamos
   con una fina línea y un acento ámbar central */
body[data-route="nosotros"] .footer {
  position: relative;
  border-top: 1px solid rgba(247, 245, 237, 0.12);
}
body[data-route="nosotros"] .footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
}

/* Valores: fundido mucho más sutil y subtextos algo más pequeños */
body[data-route="nosotros"] .section--values {
  padding-block: clamp(3rem, 5vw, 4.4rem);
}
body[data-route="nosotros"] .section--values::before,
body[data-route="nosotros"] .section--values::after {
  height: clamp(26px, 3vw, 44px);
}
body[data-route="nosotros"] .section--values::before {
  background: linear-gradient(to bottom, rgba(255, 250, 240, 0.8), rgba(255, 250, 240, 0));
}
body[data-route="nosotros"] .section--values::after {
  background: linear-gradient(to top, rgba(255, 250, 240, 0.8), rgba(255, 250, 240, 0));
}
body[data-route="nosotros"] .section--values .value-item em {
  font-size: 0.9rem;
}
body[data-route="nosotros"] .section--values .value-item p {
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Equipo: zigzag a ancho completo, foto más grande, número índice gigante
   (01–04) que rellena el hueco del lado contrario */
body[data-route="nosotros"] .team-rows {
  counter-reset: member;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  max-width: var(--max);
}
body[data-route="nosotros"] .team-row,
body[data-route="nosotros"] .team-row--reverse {
  position: relative;
  counter-increment: member;
  grid-template-columns: 300px minmax(0, 360px) 1fr;
  gap: clamp(1.6rem, 3vw, 2.8rem);
  align-items: center;
  width: auto;
  max-width: none;
  margin: 0;
}
body[data-route="nosotros"] .team-row--reverse {
  grid-template-columns: 1fr minmax(0, 360px) 300px;
}
body[data-route="nosotros"] .team-row .team-row__media { grid-column: 1; order: 0; }
body[data-route="nosotros"] .team-row .team-row__body { grid-column: 2; order: 0; }
body[data-route="nosotros"] .team-row--reverse .team-row__media { grid-column: 3; order: 0; }
body[data-route="nosotros"] .team-row--reverse .team-row__body { grid-column: 2; order: 0; }
body[data-route="nosotros"] .team-row__media {
  width: 300px;
  aspect-ratio: 4 / 5;
}
body[data-route="nosotros"] .team-row__body {
  max-width: 360px;
}
body[data-route="nosotros"] .team-row::after {
  content: counter(member, decimal-leading-zero);
  grid-column: 3;
  justify-self: end;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: 0.9;
  color: rgba(13, 12, 8, 0.05);
  pointer-events: none;
  user-select: none;
}
body[data-route="nosotros"] .team-row--reverse::after {
  grid-column: 1;
  justify-self: start;
}
@media (max-width: 860px) {
  body[data-route="nosotros"] .team-row,
  body[data-route="nosotros"] .team-row--reverse {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  body[data-route="nosotros"] .team-row .team-row__media,
  body[data-route="nosotros"] .team-row--reverse .team-row__media { grid-column: 1; }
  body[data-route="nosotros"] .team-row .team-row__body,
  body[data-route="nosotros"] .team-row--reverse .team-row__body { grid-column: 1; }
  body[data-route="nosotros"] .team-row::after,
  body[data-route="nosotros"] .team-row--reverse::after { display: none; }
}

/* ============================================================
   NOSOTROS · v5: footer con color propio, equipo compacto real,
   degradado de Valores más sutil y orgánico
   ============================================================ */

/* Footer: diferencia cromática real (marrón cálido) frente a la sección
   oscura previa */
body[data-route="nosotros"] .footer {
  background: var(--ink);
  border-top: 1px solid rgba(243, 195, 24, 0.18);
}

/* Valores: degradado mucho más sutil y orgánico (baja opacidad, varios
   pasos suavizados) */
body[data-route="nosotros"] .section--values::before,
body[data-route="nosotros"] .section--values::after {
  height: clamp(22px, 2.4vw, 34px);
}
body[data-route="nosotros"] .section--values::before {
  background: linear-gradient(to bottom, rgba(255, 250, 240, 0.42) 0%, rgba(255, 250, 240, 0.15) 45%, rgba(255, 250, 240, 0) 100%);
}
body[data-route="nosotros"] .section--values::after {
  background: linear-gradient(to top, rgba(255, 250, 240, 0.42) 0%, rgba(255, 250, 240, 0.15) 45%, rgba(255, 250, 240, 0) 100%);
}

/* Equipo: pares compactos pegados (max-content) que alternan izquierda/
   derecha, con el número índice justo al lado interior para rellenar el
   centro sin desperdiciar espacio vertical */
body[data-route="nosotros"] .team-rows {
  counter-reset: member;
  grid-template-columns: 1fr;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  max-width: var(--max);
}
body[data-route="nosotros"] .team-row,
body[data-route="nosotros"] .team-row--reverse {
  position: relative;
  counter-increment: member;
  grid-template-columns: 190px minmax(0, 320px);
  gap: clamp(1.2rem, 2.2vw, 2rem);
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 0 0;
}
body[data-route="nosotros"] .team-row--reverse {
  margin: 0 0 0 auto;
}
body[data-route="nosotros"] .team-row .team-row__media { grid-column: auto; order: 0; }
body[data-route="nosotros"] .team-row .team-row__body { grid-column: auto; order: 0; }
body[data-route="nosotros"] .team-row--reverse .team-row__media { grid-column: auto; order: 2; }
body[data-route="nosotros"] .team-row--reverse .team-row__body { grid-column: auto; order: 1; }
body[data-route="nosotros"] .team-row__media {
  width: 190px;
  aspect-ratio: 4 / 5;
}
body[data-route="nosotros"] .team-row__body {
  max-width: 320px;
}
body[data-route="nosotros"] .team-row::after {
  content: counter(member, decimal-leading-zero);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 0.9;
  color: rgba(13, 12, 8, 0.06);
  pointer-events: none;
  user-select: none;
}
body[data-route="nosotros"] .team-row::after { left: calc(100% + 1.8rem); }
body[data-route="nosotros"] .team-row--reverse::after { left: auto; right: calc(100% + 1.8rem); }
@media (max-width: 860px) {
  body[data-route="nosotros"] .team-row,
  body[data-route="nosotros"] .team-row--reverse {
    grid-template-columns: 1fr;
    width: auto;
    margin-inline: auto;
    justify-items: center;
    text-align: center;
  }
  body[data-route="nosotros"] .team-row--reverse .team-row__media,
  body[data-route="nosotros"] .team-row--reverse .team-row__body { order: 0; }
  body[data-route="nosotros"] .team-row::after,
  body[data-route="nosotros"] .team-row--reverse::after { display: none; }
}

/* Equipo · entrelazado vertical (zigzag tejido) para comprimir y rellenar:
   cada fila sube sobre la anterior; como alternan lado izq/der no colisionan */
body[data-route="nosotros"] .team-rows {
  row-gap: 0;
}
body[data-route="nosotros"] .team-row--reverse {
  margin-top: -104px;
}
body[data-route="nosotros"] .team-row:not(.team-row--reverse) ~ .team-row:not(.team-row--reverse) {
  margin-top: -104px;
}
@media (max-width: 860px) {
  body[data-route="nosotros"] .team-row,
  body[data-route="nosotros"] .team-row--reverse,
  body[data-route="nosotros"] .team-row:not(.team-row--reverse) ~ .team-row:not(.team-row--reverse) {
    margin-top: 0;
  }
}

/* ============================================================
   HOME · "Qué es La Perduda": texto más suelto y premium
   (más interlineado, más aire entre párrafos, lead destacado)
   ============================================================ */
body[data-route="home"] .home-story__copy {
  max-width: 590px;
  gap: clamp(1.15rem, 1.9vw, 1.6rem);
}
body[data-route="home"] .home-story__copy p {
  font-size: 1rem;
  line-height: 1.9;
  max-width: 60ch;
}
body[data-route="home"] .home-story__lead {
  font-size: 1.14rem;
  line-height: 1.75;
  color: var(--ink);
}

/* ============================================================
   Reels como YouTube ligero (facade): póster + botón play que
   carga el iframe al pulsar. Sustituir data-youtube="REEMPLAZAR_ID"
   por el ID real cuando se tengan los enlaces.
   ============================================================ */
.reel-card__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  color: #fffdf7;
  text-decoration: none;
}
.reel-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82);
}
.reel-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   HOME · "Qué es La Perduda" (ajuste 2): texto oscuro (no gris),
   vídeo más pequeño para ensanchar el texto, y soporte de párrafos
   (saltos de línea) en el texto editable.
   ============================================================ */
body[data-route="home"] .home-story {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 4vw, 3.6rem);
}
body[data-route="home"] .reel-card--home {
  width: 100%;
  max-width: 520px;
  justify-self: end;
}
body[data-route="home"] .home-story__copy {
  max-width: 660px;
}
body[data-route="home"] .home-story__copy p {
  color: var(--ink);
  white-space: pre-line;
}
body[data-route="home"] .home-story__lead {
  color: var(--ink);
  white-space: pre-line;
}

/* ============================================================
   HOME · "Qué es La Perduda" (ajuste 3): el texto se extiende a lo
   ancho (líneas largas) y el vídeo queda fijo y pequeño a la derecha;
   el hueco central desaparece. Móvil apilado.
   ============================================================ */
@media (min-width: 941px) {
  body[data-route="home"] .home-story {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: clamp(2.2rem, 4vw, 3.6rem);
    align-items: center;
  }
  body[data-route="home"] .reel-card--home {
    width: 460px;
    max-width: 460px;
    justify-self: end;
  }
}
@media (max-width: 940px) {
  body[data-route="home"] .home-story {
    grid-template-columns: 1fr;
  }
  body[data-route="home"] .reel-card--home {
    width: 100%;
    max-width: 520px;
    justify-self: center;
  }
}
body[data-route="home"] .home-story__copy {
  max-width: none;
}
body[data-route="home"] .home-story__copy p {
  max-width: none;
}

/* ============================================================
   HOME · "Qué es La Perduda" (ajuste 4 · equilibrio): el bloque de
   contenido (que en home es muy ancho, 1680px) se acota a 1300px y se
   reparte texto/vídeo a partes parejas. Así el texto no queda ni
   ahogado ni demasiado largo, el vídeo recupera tamaño medio y no hay
   hueco vacío en el centro. Selector específico para ganar a la regla
   de ancho de contenido del home.
   ============================================================ */
@media (min-width: 941px) {
  body[data-route="home"] main > .section--home-story > .container.home-story {
    width: var(--home-content-width);
    max-width: none;
    margin-inline: auto;
    grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
    gap: clamp(2.2rem, 3.2vw, 3.6rem);
    align-items: center;
  }
  body[data-route="home"] .home-story__copy {
    max-width: none;
  }
  body[data-route="home"] .reel-card--home {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
  }
}
body[data-route="home"] .home-story__copy p {
  max-width: none;
}

/* ============================================================
   CONTACTO · contacto directo (tarjetas), formulario sobre foto
   con caja translúcida centrada y checkboxes
   ============================================================ */

/* S1 · Contacto directo centrado + tarjetas email/instagram */
body[data-route="contacto"] .contact-direct {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 760px;
  margin-inline: auto;
}
body[data-route="contacto"] .contact-direct__head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.7rem;
  max-width: 56ch;
}
body[data-route="contacto"] .contact-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  width: 100%;
  max-width: 680px;
}
body[data-route="contacto"] .contact-method {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid rgba(13, 12, 8, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.6);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body[data-route="contacto"] .contact-method:hover {
  transform: translateY(-3px);
  border-color: rgba(13, 12, 8, 0.34);
  box-shadow: var(--shadow-lift);
}
body[data-route="contacto"] .contact-method__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
}
body[data-route="contacto"] .contact-method__icon svg {
  width: 26px;
  height: 26px;
}
body[data-route="contacto"] .contact-method__label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(13, 12, 8, 0.6);
}
body[data-route="contacto"] .contact-method__value {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
}
@media (max-width: 560px) {
  body[data-route="contacto"] .contact-methods {
    grid-template-columns: 1fr;
  }
}

/* S3 · Formulario sobre imagen de fondo con caja translúcida */
body[data-route="contacto"] .contact-form-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body[data-route="contacto"] .contact-form-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
body[data-route="contacto"] .contact-form-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-route="contacto"] .contact-form-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 12, 8, 0.5), rgba(13, 12, 8, 0.66));
}
body[data-route="contacto"] .contact-form-section > .container {
  position: relative;
  z-index: 1;
}
body[data-route="contacto"] .contact-form-section {
  padding: clamp(2.2rem, 4.4vw, 3.6rem) 0;
}
body[data-route="contacto"] .contact-form-card {
  max-width: 560px;
  margin-inline: auto;
  background: rgba(255, 253, 247, 0.68);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 253, 247, 0.5);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  color: var(--ink);
}
body[data-route="contacto"] .contact-form-card__head {
  display: grid;
  gap: 0.5rem;
  text-align: center;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
}
body[data-route="contacto"] .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  cursor: pointer;
}
body[data-route="contacto"] .form-check input {
  width: auto;
  margin-top: 0.18rem;
  flex: 0 0 auto;
  accent-color: var(--yellow);
}
body[data-route="contacto"] .form-check a {
  color: var(--ink);
  text-decoration: underline;
}

/* ============================================================
   NOSOTROS · arreglos MÓVIL: la historia (foto a ancho completo) y
   los valores (una columna, texto a tamaño móvil). Mis overrides de
   escritorio no estaban acotados y forzaban 2/3 columnas en móvil.
   ============================================================ */
@media (max-width: 760px) {
  /* Historia: apilar y foto grande a ancho completo */
  body[data-route="nosotros"] #historia .split {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  body[data-route="nosotros"] #historia .media-frame--portrait {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  body[data-route="nosotros"] #historia .text-stack {
    max-width: none;
  }

  /* Valores: una sola columna y texto a tamaño móvil */
  body[data-route="nosotros"] .section--values .values-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
    row-gap: clamp(1.8rem, 6vw, 2.6rem);
  }
  body[data-route="nosotros"] .section--values .value-item {
    max-width: none;
    text-align: left;
  }
  body[data-route="nosotros"] .section--values .value-item h3 {
    font-size: 1.35rem;
  }
  body[data-route="nosotros"] .section--values .value-item em {
    font-size: 0.92rem;
  }
  body[data-route="nosotros"] .section--values .value-item p {
    font-size: 0.9rem;
    line-height: 1.55;
  }
}

/* ============================================================
   TIENDA · arreglo MÓVIL: la sección Colaboraciones se mantenía en 2
   columnas (con un mínimo de 300px en la caja) y se solapaba. En móvil
   se apila y la caja del formulario ocupa todo el ancho.
   ============================================================ */
@media (max-width: 760px) {
  body[data-route="tienda"] #colaboraciones .form-layout {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.6rem;
  }
  body[data-route="tienda"] #colaboraciones .form-panel {
    max-width: none;
    width: 100%;
    justify-self: stretch;
  }
}
@media (max-width: 520px) {
  body[data-route="tienda"] .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Modo admin · botón flotante "Ir ↗" para navegar al destino de un enlace
   editable (el texto se edita con clic normal; el destino con este botón
   o con Ctrl/Cmd+clic). */
.admin-go-button {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.62rem;
  border: 1px solid rgba(255, 253, 247, 0.25);
  border-radius: 999px;
  background: #0d0c08;
  color: #fffdf7;
  font-family: var(--font-body, system-ui), sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  will-change: transform;
}
.admin-go-button:hover {
  background: var(--yellow);
  color: #0d0c08;
}
.admin-go-button[hidden] {
  display: none;
}

/* Modo admin · los enlaces de tarjeta usan un overlay ::after a pantalla
   completa ("stretched link") que captaba TODOS los clics e impedía editar
   el texto. En admin lo desactivamos para que el clic llegue al texto
   (y a la imagen, que se edita con su botón). La navegación se hace con
   el botón "Ir ↗". */
html.admin-mode .project-link::after,
html.admin-mode .article-link::after,
html.admin-mode .doc-card::after {
  pointer-events: none;
}

/* Hero · centrado de los CTA robusto en todos los navegadores (Safari
   no aplicaba el justify-items del contenedor a la fila de botones, y los
   dejaba a la izquierda). Centramos los botones dentro de su propia fila. */
.page-hero .cta-row {
  justify-content: center;
  width: 100%;
}

/* ============================================================
   VIAJES · "Próximas rutas": ruta destacada (mapa) + tarjetas
   editoriales alternas, depuradas, con número índice, regla ámbar,
   2 párrafos y animación de entrada al hacer scroll.
   ============================================================ */
.trip-feature--featured {
  margin-bottom: clamp(2.8rem, 6.5vw, 5.5rem);
}
body[data-route="viajes"] .proximos-list {
  counter-reset: ruta;
  display: grid;
  gap: clamp(3rem, 7vw, 6.5rem);
  max-width: 1120px;
  margin-inline: auto;
}
body[data-route="viajes"] .proximos-list:empty::before {
  content: "Aún no hay próximas rutas publicadas. Se añaden desde el panel de administración (pestaña Viajes).";
  display: block;
  text-align: center;
  color: rgba(13, 12, 8, 0.5);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px dashed rgba(13, 12, 8, 0.2);
  border-radius: var(--radius);
}
.proximo-card {
  position: relative;
  counter-increment: ruta;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.proximo-card:nth-child(even) .proximo-card__media { order: 2; }
.proximo-card:nth-child(even) .proximo-card__body { order: 1; }
.proximo-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(32, 27, 16, 0.13);
}
.proximo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 750ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.proximo-card:hover .proximo-card__media img {
  transform: scale(1.05);
}
.proximo-card__body {
  position: relative;
  display: grid;
  gap: 0.55rem;
  justify-items: start;
  max-width: 46ch;
}
.proximo-card__body::before {
  content: counter(ruta, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  font-weight: 500;
  line-height: 1;
  color: rgba(13, 12, 8, 0.22);
}
.proximo-card__subtitle {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow-deep);
}
.proximo-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.7vw, 2.45rem);
  line-height: 1.05;
  color: var(--ink);
}
.proximo-card__title::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  margin-top: 0.7rem;
  background: var(--yellow);
}
.proximo-card__dates {
  display: inline-block;
  margin-top: 0.5rem;
  background: rgba(243, 195, 24, 0.18);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 650;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}
.proximo-card__places {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(13, 12, 8, 0.55);
}
.proximo-card__text {
  font-size: 0.97rem;
  line-height: 1.66;
  color: var(--ink-soft);
}
.proximo-card__cta {
  margin-top: 0.85rem;
}
@media (prefers-reduced-motion: no-preference) {
  .proximos-list.reveal-ready .proximo-card {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .proximos-list.reveal-ready .proximo-card.is-in {
    opacity: 1;
    transform: none;
  }
  html.admin-mode .proximos-list.reveal-ready .proximo-card {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 720px) {
  .proximo-card {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }
  .proximo-card:nth-child(even) .proximo-card__media,
  .proximo-card:nth-child(even) .proximo-card__body {
    order: 0;
  }
  .proximo-card__media { aspect-ratio: 16 / 10; }
  .proximo-card__body { max-width: none; }
}

/* Próximas rutas · el texto de cada viaje admite varios párrafos / saltos
   de línea escritos en el panel, de forma sutil. */
.proximo-card__text {
  white-space: pre-line;
}

/* Tarjetas de "Próximos viajes": edición inline. En modo admin cada campo
   se puede escribir directamente en la tarjeta (incluso vacío, con un
   placeholder). En la web pública los campos vacíos no se muestran. */
html:not(.admin-mode) .proximo-card__subtitle:empty,
html:not(.admin-mode) .proximo-card__places:empty,
html:not(.admin-mode) .proximo-card__text:empty {
  display: none;
}
html.admin-mode .proximo-card [data-field] {
  outline: 1px dashed rgba(13, 12, 8, 0.16);
  outline-offset: 4px;
  border-radius: 4px;
  min-height: 1em;
  cursor: text;
  transition: outline-color 160ms ease;
}
html.admin-mode .proximo-card [data-field]:hover {
  outline-color: rgba(13, 12, 8, 0.34);
}
html.admin-mode .proximo-card [data-field]:focus {
  outline: 1px solid var(--yellow);
}
html.admin-mode .proximo-card [data-field]:empty::before {
  content: attr(data-placeholder);
  color: rgba(13, 12, 8, 0.32);
  font-style: italic;
  font-weight: 400;
}

/* ===== Viajes · "Por qué viajar" (sección unificada, fondo claro) =====
   Sustituye al antiguo bloque negro "Para quién es este viaje": resume ese
   contenido en una cabecera centrada y muestra los motivos como tarjetas. */
.section--why-travel {
  position: relative;
  overflow: hidden;
}
.section--why-travel .container {
  position: relative;
  z-index: 1;
}
.why-travel__head {
  max-width: 780px;
  margin: 0 auto clamp(2.6rem, 5vw, 4.2rem);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
}
.why-travel__head h2 {
  font-size: clamp(2rem, 4vw, 3.05rem);
  line-height: 1.05;
  margin: 0;
}
.why-travel__lead {
  max-width: 62ch;
  margin: 0;
  color: rgba(13, 12, 8, 0.66);
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  line-height: 1.62;
}
.why-travel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: clamp(1rem, 1.7vw, 1.5rem);
  align-items: stretch;
}
.why-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: clamp(1.55rem, 2.4vw, 2.15rem) clamp(1.3rem, 2vw, 1.75rem);
  background: var(--white);
  border: 1px solid rgba(13, 12, 8, 0.09);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.55s ease;
}
.why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.why-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 52px -30px rgba(13, 12, 8, 0.45);
  border-color: rgba(13, 12, 8, 0.16);
}
.why-card:hover::before {
  transform: scaleX(1);
}
.why-card__index {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--yellow-deep);
  margin-bottom: 0.35rem;
}
.why-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1.9vw, 1.52rem);
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
.why-card p {
  margin: 0;
  color: rgba(13, 12, 8, 0.64);
  font-size: 0.97rem;
  line-height: 1.56;
}
.why-travel__quote {
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  max-width: 720px;
  padding: clamp(1.5rem, 3vw, 2.2rem) 1rem 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.3;
  color: var(--ink);
  border: 0;
  position: relative;
}
.why-travel__quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 2px;
  background: var(--yellow);
}
@media (max-width: 720px) {
  .why-travel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 440px) {
  .why-travel__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Viajes · "Por qué viajar": iconos SVG + placa + nº marca de agua ===== */
.why-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(0.8rem, 1.6vw, 1.2rem);
}
.why-card__icon-wrap {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(243, 195, 24, 0.16);
  color: var(--yellow-deep);
  transition: background 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.why-card__icon {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-card__index {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(13, 12, 8, 0.11);
  letter-spacing: 0.01em;
  margin: 0;
  transition: color 0.5s ease;
}
.why-card:hover .why-card__icon-wrap {
  background: var(--yellow);
  color: var(--ink);
  transform: translateY(-2px) rotate(-3deg);
}
.why-card:hover .why-card__index {
  color: rgba(185, 135, 5, 0.32);
}
@media (prefers-reduced-motion: reduce) {
  .why-card,
  .why-card__icon-wrap,
  .why-card__index { transition: none; }
}

/* ===== Viajes · "Formas de viajar": selector interactivo (grupo/privado) =====
   Sustituye las dos tarjetas grandes con foto por un selector por pestañas:
   más compacto, sin imágenes, números en línea junto a cada paso. */
.section--ways .ways-head {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.section--ways .ways-head h2 {
  font-size: clamp(2rem, 4vw, 3.05rem);
  line-height: 1.05;
  margin: 0;
}
.ways-head__lead {
  max-width: 58ch;
  margin: 0;
  color: rgba(13, 12, 8, 0.66);
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  line-height: 1.6;
}
.ways {
  max-width: 780px;
  margin: 0 auto;
}
.ways__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: var(--paper);
  border-radius: 18px;
  margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem);
}
.ways__tab {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.28rem;
  justify-items: start;
  text-align: left;
  padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(1rem, 2vw, 1.4rem);
  border: 0;
  background: transparent;
  border-radius: 13px;
  cursor: pointer;
  color: rgba(13, 12, 8, 0.5);
  transition: color 0.4s ease;
}
.ways__tab-meta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ways__tab-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  line-height: 1.1;
}
.ways__tab.is-active {
  color: var(--ink);
}
.ways__tab:focus-visible {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 2px;
}
.ways__indicator {
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 0;
  background: var(--white);
  border-radius: 13px;
  box-shadow: 0 14px 30px -18px rgba(13, 12, 8, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 0;
}
.ways__panel {
  background: var(--white);
  border: 1px solid rgba(13, 12, 8, 0.09);
  border-radius: 20px;
  padding: clamp(1.7rem, 3.2vw, 2.7rem);
}
.ways__panel[hidden] {
  display: none;
}
.ways__panel.is-active {
  animation: waysPanelIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes waysPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.ways__lead {
  margin: 0 0 clamp(1.3rem, 2.4vw, 1.8rem);
  max-width: 60ch;
  color: rgba(13, 12, 8, 0.68);
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 1.62;
}
.ways__steps {
  list-style: none;
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
  padding: 0;
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
}
.ways__steps li {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.8rem, 1.6vw, 1.05rem);
}
.ways__num {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--yellow);
  color: var(--yellow-deep);
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1;
}
.ways__step-text {
  padding-top: 0.32rem;
  color: var(--ink);
  font-size: clamp(0.98rem, 1.4vw, 1.06rem);
  line-height: 1.5;
}
@media (max-width: 540px) {
  .ways__tab-title { font-size: 1rem; }
  .ways__tab { padding: 0.8rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ways__indicator { transition: none; }
  .ways__panel.is-active { animation: none; }
}

/* ===== Viajes · "Formas de viajar" + formularios unificados =====
   La sección con pestañas ahora contiene también el formulario de cada
   opción: pasos a la izquierda, formulario a la derecha. Un solo formulario
   visible cada vez para que la página no se vea cargada. */
.ways-head__contact {
  justify-content: center;
  margin-top: 0.4rem;
}
.section--ways-forms .ways {
  max-width: 1080px;
}
.ways__panel--form {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.ways__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}
.ways__intro {
  position: sticky;
  top: 110px;
}
.ways__intro .ways__lead {
  margin-bottom: clamp(1.4rem, 2.6vw, 1.9rem);
}
.ways__intro .ways__steps {
  margin-bottom: 0;
}
.ways__form.form-panel {
  box-shadow: 0 30px 80px -40px rgba(32, 27, 16, 0.5);
}
@media (max-width: 860px) {
  .ways__layout {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.2rem);
  }
  .ways__intro {
    position: static;
  }
}

/* ===== Viajes · formularios más compactos (solo sección unificada) ===== */
.section--ways-forms .ways__form.form-panel {
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}
.section--ways-forms .ways__form form {
  gap: 0.7rem;
}
.section--ways-forms .ways__form .form-grid {
  gap: 0.7rem;
}
.section--ways-forms .ways__form label {
  gap: 0.3rem;
  font-size: 0.64rem;
}
.section--ways-forms .ways__form input,
.section--ways-forms .ways__form select,
.section--ways-forms .ways__form textarea {
  padding: 0.6rem 0.72rem;
}
.section--ways-forms .ways__form textarea {
  min-height: 96px;
}
.section--ways-forms .ways__form .button {
  margin-top: 0.2rem;
}

/* ===== Viajes · "Próximas rutas" refinada (alternada editorial) =====
   Alinea la ruta destacada y la lista al mismo ancho, las conecta con un
   separador con etiqueta y pule las tarjetas: líneas divisorias, ritmo más
   apretado, número como marca editorial y zoom suave de la imagen. */
body[data-route="viajes"] .trip-feature--featured {
  max-width: none;
  margin: 0 auto;
}
.proximos-divider {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  max-width: 1080px;
  margin: clamp(2.6rem, 5vw, 4rem) auto clamp(0.4rem, 1vw, 0.8rem);
}
.proximos-divider::before,
.proximos-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(13, 12, 8, 0.14);
}
.proximos-divider span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  white-space: nowrap;
}
body[data-route="viajes"] .proximos-list {
  gap: 0;
  max-width: 1080px;
}
.proximo-card {
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  padding: clamp(2.4rem, 5vw, 3.8rem) 0;
  border-top: 1px solid rgba(13, 12, 8, 0.1);
}
.proximo-card:first-child {
  border-top: 0;
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
}
.proximo-card:last-child {
  padding-bottom: 0;
}
.proximo-card__media {
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  box-shadow: 0 26px 60px -30px rgba(32, 27, 16, 0.5);
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 600ms ease;
}
.proximo-card:hover .proximo-card__media {
  transform: translateY(-4px);
  box-shadow: 0 34px 70px -30px rgba(32, 27, 16, 0.55);
}
.proximo-card__body {
  gap: 0.62rem;
  max-width: 44ch;
}
.proximo-card__body::before {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 600;
  color: rgba(13, 12, 8, 0.15);
  margin-bottom: 0.1rem;
}
.proximo-card__title {
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
}

/* Valores (nosotros): se elimina el fundido blanco superior/inferior — sobre
   el fondo negro creaba una banda grisácea borrosa. Borde limpio crema/negro. */
body[data-route="nosotros"] .section--values::before,
body[data-route="nosotros"] .section--values::after {
  display: none;
}

/* Próximas rutas: si la píldora de fechas/precio queda vacía, no se muestra
   en la web pública (en admin sí, con su placeholder editable). */
html:not(.admin-mode) .proximo-card__dates:empty {
  display: none;
}

/* Próximas rutas: se quitan los números 01/02/03 de cada ruta */
.proximo-card__body::before {
  content: none !important;
}

/* Próximas rutas: la imagen de cada ruta es un collage de 4 fotos (2×2),
   cada una editable de forma independiente desde el modo admin. */
.proximo-card__media.proximo-card__collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.4rem, 0.7vw, 0.6rem);
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.proximo-card__cell {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 16px 36px -22px rgba(32, 27, 16, 0.5);
}
.proximo-card:hover .proximo-card__media.proximo-card__collage {
  box-shadow: none;
}
@media (max-width: 720px) {
  /* En móvil la tarjeta se apila (el rediseño de escritorio de más
     arriba pisaba la regla de apilado original) y el collage pasa a
     formato cuadrado a ancho completo para que las fotos se vean bien. */
  .proximo-card {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .proximo-card__body {
    max-width: none;
  }
  .proximo-card__media.proximo-card__collage {
    aspect-ratio: 1 / 1;
    gap: 0.5rem;
  }
}

/* ===== Mapa de ruta (Viajes): acabado más premium y legible ===== */
/* Viñeta y capa oscura algo más profunda para que el recorrido resalte. */
.trip-feature__map-overlay {
  background:
    radial-gradient(120% 90% at 68% 20%, rgba(243, 195, 24, 0.18), transparent 52%),
    radial-gradient(150% 130% at 50% 48%, transparent 38%, rgba(8, 7, 4, 0.6)),
    linear-gradient(180deg, rgba(13, 12, 8, 0.78), rgba(13, 12, 8, 0.94));
}
/* Etiquetas con halo suave: se leen nítidas sobre cualquier foto. */
.trip-feature__map svg text,
.trip-label {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 7px rgba(0, 0, 0, 0.6));
  letter-spacing: 0.3px;
  paint-order: stroke;
}
/* Puntos: algo más grandes, con aro blanco y sombra para destacar. */
.trip-dot {
  r: 3.9;
  stroke: rgba(255, 253, 247, 0.92);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}
.trip-dot.is-active {
  r: 5.6;
}
/* Recorrido un pelín más marcado. */
.trip-route {
  stroke-width: 2.4;
}

/* Por qué viajar: cabecera a dos columnas (título a la izquierda, texto a la
   derecha) para evitar espacios laterales y que quede más compacta. */
.why-travel__head {
  max-width: none;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: end;
  justify-items: stretch;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  margin: 0 auto clamp(2.4rem, 4.5vw, 3.6rem);
}
.why-travel__head-main {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 0.95rem);
  justify-items: start;
}
.why-travel__head .why-travel__lead {
  max-width: 56ch;
  margin: 0;
  align-self: end;
}
@media (max-width: 760px) {
  .why-travel__head {
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
  }
}

/* ============================================================
   Equipo · v6: rejilla PARALELA y compacta.
   Se anula el zigzag entrelazado (márgenes negativos) y los
   números. Imágenes y textos alineados, 2 miembros por fila.
   ============================================================ */
body[data-route="nosotros"] .team-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.4rem, 5vw, 4.5rem);
  row-gap: clamp(2rem, 4vw, 3.4rem);
  max-width: var(--max);
  margin-inline: auto;
}
body[data-route="nosotros"] .team-row,
body[data-route="nosotros"] .team-row--reverse {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 160px) minmax(0, 1fr);
  gap: clamp(1.1rem, 2vw, 1.7rem);
  align-items: start;
  width: auto;
  max-width: none;
  margin: 0;
}
/* anular el entrelazado vertical (márgenes negativos del zigzag) */
body[data-route="nosotros"] .team-row--reverse,
body[data-route="nosotros"] .team-row:not(.team-row--reverse) ~ .team-row:not(.team-row--reverse) {
  margin-top: 0;
}
/* todas las filas con la MISMA orientación: imagen izquierda, texto derecha */
body[data-route="nosotros"] .team-row--reverse .team-row__media,
body[data-route="nosotros"] .team-row--reverse .team-row__body {
  order: 0;
}
body[data-route="nosotros"] .team-row__media {
  width: 100%;
  aspect-ratio: 4 / 5;
}
body[data-route="nosotros"] .team-row__body {
  max-width: none;
}
/* quitar los números índice */
body[data-route="nosotros"] .team-row::after,
body[data-route="nosotros"] .team-row--reverse::after {
  content: none;
  display: none;
}
@media (max-width: 820px) {
  body[data-route="nosotros"] .team-rows {
    grid-template-columns: 1fr;
    row-gap: clamp(1.8rem, 6vw, 2.6rem);
  }
  body[data-route="nosotros"] .team-row,
  body[data-route="nosotros"] .team-row--reverse {
    grid-template-columns: clamp(110px, 30vw, 150px) minmax(0, 1fr);
    text-align: left;
    justify-items: stretch;
  }
}

/* ===== Bitácora · Feed de Instagram (4 posts que enlazan al post real) ===== */
.section--ig-feed .ig-feed__head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  display: grid;
  justify-items: center;
  gap: clamp(0.6rem, 1.4vw, 0.95rem);
}
.section--ig-feed .ig-feed__head h2 {
  margin: 0;
}
.ig-feed__lead {
  max-width: 58ch;
  margin: 0;
  color: rgba(13, 12, 8, 0.62);
  line-height: 1.6;
}
/* esquinas más redondeadas para que no quede tan cuadrado */
.instagram-grid.ig-feed__grid a {
  border-radius: 20px;
}
/* insignia de Instagram en cada tarjeta */
.instagram-grid .ig-post__badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  left: auto;
  bottom: auto;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(13, 12, 8, 0.4);
  color: #fffdf7;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, transform 0.3s ease;
}
.instagram-grid.ig-feed__grid a:hover .ig-post__badge {
  background: rgba(243, 195, 24, 0.92);
  color: var(--ink);
  transform: translateY(-2px);
}
.cta-row--center {
  justify-content: center;
}

/* ===== Bitácora · Feed de Instagram como carrusel con flechas ===== */
.ig-carousel {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
}
.ig-carousel__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.1rem, 2.2vw, 1.7rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 1.1rem 0.3rem 1.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ig-carousel__track::-webkit-scrollbar { display: none; }
.ig-carousel__track > .ig-post {
  flex: 0 0 clamp(132px, 17%, 175px);
  scroll-snap-align: start;
}
/* Estilo "polaroid": marco blanco tipo foto revelada, con un ligero giro
   por tarjeta que se endereza al pasar el ratón — para diferenciarlo
   claramente de las fichas de "Reflexiones", más limpias y formales. */
.ig-post {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(13, 12, 8, 0.08);
  border-radius: 4px;
  padding: 10px 10px 26px;
  box-shadow: 0 16px 38px rgba(32, 27, 16, 0.16);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.ig-carousel__track > .ig-post:nth-child(3n+1) { transform: rotate(-3deg); }
.ig-carousel__track > .ig-post:nth-child(3n+2) { transform: rotate(2.4deg); }
.ig-carousel__track > .ig-post:nth-child(3n+3) { transform: rotate(-1.6deg); }
.ig-post img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  transition: transform 0.6s ease;
}
.ig-post:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 26px 54px -16px rgba(32, 27, 16, 0.4);
  z-index: 2;
}
.ig-post:hover img { transform: scale(1.04); }
.ig-post__cap {
  margin: 0.65rem 0.1rem 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  line-height: 1.25;
  text-align: center;
}
.ig-post__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(13, 12, 8, 0.42);
  color: #fffdf7;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, transform 0.3s ease;
}
.ig-post:hover .ig-post__badge {
  background: rgba(243, 195, 24, 0.95);
  color: var(--ink);
  transform: translateY(-2px);
}
.ig-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(13, 12, 8, 0.12);
  background: rgba(255, 253, 247, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 32px -14px rgba(32, 27, 16, 0.5);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.ig-carousel__nav--prev { left: clamp(-10px, -1vw, 0px); }
.ig-carousel__nav--next { right: clamp(-10px, -1vw, 0px); }
.ig-carousel__nav:hover {
  background: var(--yellow);
  transform: translateY(-50%) scale(1.07);
}
.ig-carousel__nav:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}
.ig-carousel__nav[hidden] { display: none; }
@media (max-width: 620px) {
  .ig-carousel__track > .ig-post { flex-basis: 56%; }
  .ig-carousel__nav { width: 42px; height: 42px; font-size: 1.4rem; }
}

/* ===== Bitácora · "Países recorridos": mapa interactivo de puntos ===== */
.section--paises .paises-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  display: grid;
  justify-items: center;
  gap: clamp(0.6rem, 1.4vw, 0.95rem);
}
.section--paises .paises-head h2 { margin: 0; }
.paises-head__lead {
  max-width: 56ch;
  margin: 0;
  color: rgba(13, 12, 8, 0.62);
  line-height: 1.6;
}
.mapa-panel {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  background: #15130d;
  border: 1px solid rgba(255, 253, 247, 0.1);
  border-radius: clamp(14px, 1.6vw, 22px);
  padding: clamp(1rem, 2.4vw, 2rem);
  overflow: hidden;
}
.mapa-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mapa-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 70% 22%, rgba(243, 195, 24, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(13, 12, 8, 0.72), rgba(13, 12, 8, 0.9));
}
.mapa-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
}
.mp-land circle { fill: rgba(255, 253, 247, 0.15); }
.mp-dot {
  fill: #4a4433;
  stroke: rgba(255, 253, 247, 0.45);
  stroke-width: 1.1;
  transition: fill 0.3s ease, stroke 0.3s ease, r 0.2s ease;
}
.mp-pin.is-on .mp-dot {
  fill: #f3c318;
  stroke: #fffdf7;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 5px rgba(243, 195, 24, 0.85));
}
/* Rejilla de atlas muy sutil */
.mapa-svg .mp-grat line { stroke: rgba(255, 253, 247, 0.06); stroke-width: 1; }
/* Halo ámbar que late en los países visitados */
.mapa-svg .mp-pulse { fill: #f3c318; opacity: 0; pointer-events: none; }
.mapa-svg .mp-pin.is-on .mp-pulse { animation: mpPulse 2.8s ease-out infinite; }
/* Globo flotante con las categorías del país (foto / vídeo / mochila /
   personalizadas), en grupo: sube por ENCIMA del punto en vez de ir
   hacia el lado, para no solaparse con un país vecino muy pegado. En
   público se mantiene oculto por defecto y aparece, con una aparición
   suave, al pasar el ratón por el país o al seleccionarlo; en admin se
   ve siempre para poder identificar cada país de un vistazo. */
.mapa-svg .mp-icon-group {
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
html:not(.admin-mode) .mapa-svg .mp-icon-group {
  opacity: 0;
  transform: scale(0.6);
}
html:not(.admin-mode) .mapa-svg .mp-pin:hover .mp-icon-group,
html:not(.admin-mode) .mapa-svg .mp-pin.is-active .mp-icon-group {
  opacity: 1;
  transform: scale(1);
}
.mapa-svg .mp-icon-pill,
.mapa-svg .mp-icon-pointer {
  fill: rgba(13, 12, 8, 0.88);
}
.mapa-svg .mp-icon {
  color: var(--yellow, #f3c318);
  fill: currentColor;
}
/* Categoría personalizada dentro del globo (sin icono propio): un
   puntito de su color, mismo tamaño que los iconos vecinos. */
.mapa-svg .mp-icon-dot {
  fill: var(--mp-custom-color, #f3c318);
  stroke: #fffdf7;
  stroke-width: 1;
}
/* Burbuja "+N" (ya no se genera; se deja el estilo por si algún país
   antiguo aún la tuviera guardada) */
.mapa-svg .mp-badge circle {
  fill: var(--ink);
  stroke: #fffdf7;
  stroke-width: 1.1;
}
.mapa-svg .mp-badge text {
  fill: #fffdf7;
  font-size: 6.5px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
html.admin-mode .mapa-svg .mp-pin.is-editing .mp-dot {
  stroke: #fffdf7;
  stroke-width: 2.2;
}
@keyframes mpPulse {
  0% { r: 4.8px; opacity: 0.5; }
  70% { r: 16px; opacity: 0; }
  100% { r: 16px; opacity: 0; }
}
/* Etiqueta dentro del pin: solo visible si el país está marcado, o al pasar
   el ratón en modo edición (así no se amontonan las etiquetas) */
.mapa-svg .mp-label {
  display: none;
  fill: rgba(255, 253, 247, 0.94);
  font-weight: 600;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}
/* Público: el nombre solo aparece al pasar el ratón o al tocar el punto
   (se muestra grande debajo, en .mapa-active); así el mapa no se llena
   de etiquetas cuando hay muchos países marcados. */
html:not(.admin-mode) .mapa-svg .mp-pin.is-on:hover .mp-label { display: block; }
html.admin-mode .mapa-svg .mp-pin.is-on .mp-label { display: block; }
html.admin-mode .mapa-svg .mp-pin:hover .mp-label { display: block; }
/* Público: solo se ven los países visitados */
html:not(.admin-mode) .mapa-svg .mp-pin:not(.is-on) { display: none; }
html:not(.admin-mode) .mapa-svg .mp-pin.is-on { cursor: pointer; }
/* Admin: se ven todos para poder seleccionarlos */
html.admin-mode .mapa-svg .mp-pin { cursor: pointer; }
html.admin-mode .mapa-svg .mp-pin:hover .mp-dot { stroke: #f3c318; stroke-width: 1.7; }
@media (prefers-reduced-motion: reduce) {
  .mapa-svg .mp-pin.is-on .mp-pulse { animation: none; }
}
/* Nombre del país tocado (interactivo, legible en cualquier tamaño) */
.mapa-active {
  position: relative;
  z-index: 1;
  margin: clamp(0.8rem, 1.6vw, 1.2rem) 0 0;
  min-height: 1.3em;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--yellow);
  transition: opacity 0.25s ease;
}
.mapa-svg .mp-pin.is-active .mp-dot { stroke: #fffdf7; stroke-width: 2; }
.mapa-svg .mp-pin.is-active .mp-label { display: block; fill: #fffdf7; }
/* Móvil: mapa a pantalla completa (sin scroll lateral); se toca un punto
   para ver su nombre grande debajo. Se ocultan las etiquetas diminutas. */
@media (max-width: 640px) {
  .section--paises > .container { width: 100%; }
  .mapa-panel { padding: 0.7rem 0.5rem; border-radius: 12px; }
  .mapa-svg .mp-label { display: none !important; }
  .mapa-svg .mp-dot { r: 6px; }
  .mapa-svg .mp-hit { r: 22px; }
  .mapa-active { font-size: 1.35rem; min-height: 1.5em; }
}
.mapa-hint {
  position: relative;
  z-index: 1;
  margin: clamp(0.8rem, 1.6vw, 1.2rem) 0 0;
  text-align: center;
  color: rgba(255, 253, 247, 0.6);
  font-size: 0.82rem;
}
html:not(.admin-mode) .mapa-hint { display: none; }

/* Leyenda de iconos del mapa (visible para todo el mundo) */
.mapa-legend {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: clamp(0.9rem, 1.8vw, 1.3rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.3rem;
}
.mapa-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 253, 247, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.mapa-legend__mark {
  flex: none;
  color: var(--yellow, #f3c318);
  fill: currentColor;
}
.mapa-legend__mark--dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f3c318;
  box-shadow: 0 0 5px rgba(243, 195, 24, 0.85);
}
@media (max-width: 640px) {
  .mapa-legend { gap: 0.5rem 0.9rem; }
  .mapa-legend li { font-size: 0.72rem; }
}

/* Editor de categorías por país (solo admin): se abre al tocar un país y
   permite marcar varias categorías a la vez con botones tipo casilla */
.mapa-country-editor {
  position: relative;
  z-index: 1;
  margin: clamp(0.9rem, 1.8vw, 1.3rem) auto 0;
  max-width: 420px;
  padding: 0.9rem 1rem 1rem;
  border-radius: 12px;
  background: rgba(243, 195, 24, 0.08);
  border: 1px solid rgba(243, 195, 24, 0.35);
}
html:not(.admin-mode) .mapa-country-editor { display: none !important; }
.mapa-country-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.mapa-country-editor__name {
  margin: 0;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.mapa-country-editor__close {
  border: none;
  background: transparent;
  color: rgba(255, 253, 247, 0.6);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.mapa-country-editor__close:hover { color: #f3c318; }
.mapa-country-editor__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mapa-cat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 247, 0.25);
  background: transparent;
  color: rgba(255, 253, 247, 0.75);
  font-size: 0.76rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.mapa-cat-toggle[aria-pressed="true"] {
  background: rgba(243, 195, 24, 0.22);
  border-color: #f3c318;
  color: #fffdf7;
}
.mapa-cat-toggle__mark {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fffdf7;
  flex: none;
}
.mapa-cat-toggle__mark--dot,
.mapa-cat-toggle__mark--custom {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f3c318;
}
.mapa-cat-toggle__mark--custom { background: var(--chip-color, #f3c318); }

/* Gestor de categorías del mapa (solo visible en modo admin) */
.mapa-cat-manager {
  position: relative;
  z-index: 1;
  margin: clamp(0.9rem, 1.8vw, 1.3rem) auto 0;
  max-width: 420px;
  padding: 0.9rem 1rem 1rem;
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.06);
  border: 1px solid rgba(255, 253, 247, 0.16);
}
html:not(.admin-mode) .mapa-cat-manager { display: none; }
.mapa-cat-manager__label {
  margin: 0 0 0.55rem;
  text-align: center;
  color: rgba(255, 253, 247, 0.75);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mapa-cat-manager__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.mapa-cat-manager__list:empty { margin-bottom: 0; }
.mapa-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.08);
  border: 1px solid rgba(255, 253, 247, 0.16);
  color: #fffdf7;
  font-size: 0.74rem;
}
.mapa-cat-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-color, #f3c318);
  flex: none;
}
.mapa-cat-chip__remove {
  border: none;
  background: transparent;
  color: rgba(255, 253, 247, 0.6);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0.15rem;
}
.mapa-cat-chip__remove:hover { color: #f3c318; }
.mapa-cat-manager__add {
  display: flex;
  gap: 0.5rem;
}
.mapa-cat-manager__input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 253, 247, 0.22);
  background: rgba(13, 12, 8, 0.4);
  color: #fffdf7;
  font-size: 0.82rem;
  font-family: var(--font-body);
}
.mapa-cat-manager__input::placeholder { color: rgba(255, 253, 247, 0.42); }
.mapa-cat-manager__input:focus {
  outline: none;
  border-color: #f3c318;
}
.mapa-cat-manager__btn {
  flex: none;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: none;
  background: #f3c318;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.mapa-cat-manager__btn:hover { background: #fffdf7; }
.mapa-cat-manager__btn:active { transform: scale(0.96); }

/* IG feed: centrar los posts cuando no desbordan (con "safe" se alinean a la
   izquierda si hay overflow, para no recortar al hacer scroll). */
.ig-carousel__track {
  justify-content: safe center;
}

/* ===== Mapa · controles de zoom + gestos ===== */
.mapa-svg { touch-action: pan-y; }
.mapa-panel.is-zoomed .mapa-svg { touch-action: none; cursor: grab; }
.mapa-panel.is-zoomed .mapa-svg:active { cursor: grabbing; }
.mapa-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}
.mapa-zoom,
.mapa-reset {
  border: 1px solid rgba(255, 253, 247, 0.18);
  background: rgba(21, 19, 13, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fffdf7;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.18s ease;
}
.mapa-zoom {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.mapa-reset {
  height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mapa-zoom:hover,
.mapa-reset:hover {
  background: rgba(243, 195, 24, 0.92);
  color: var(--ink);
  border-color: transparent;
}
.mapa-zoom:active { transform: scale(0.94); }
/* Al hacer zoom se muestran las etiquetas de los países marcados/activo */
.mapa-panel.is-zoomed .mapa-svg .mp-pin.is-on .mp-label,
.mapa-panel.is-zoomed .mapa-svg .mp-pin.is-active .mp-label { display: block !important; }

/* ===== Bitácora · "Reflexiones" estilo watatu: sin caja blanca, más limpio ===== */
body[data-route="bitacora"] #reflexiones {
  position: relative;
}

body[data-route="bitacora"] #reflexiones .reflexiones-quote {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 7vw, 7.5rem);
  line-height: 1;
  color: rgba(185, 135, 5, 0.16);
  pointer-events: none;
  user-select: none;
}

body[data-route="bitacora"] #reflexiones .reflexiones-quote--open {
  left: clamp(1rem, 3vw, 3rem);
}

body[data-route="bitacora"] #reflexiones .reflexiones-quote--close {
  right: clamp(1rem, 3vw, 3rem);
}

body[data-route="bitacora"] #reflexiones .container {
  position: relative;
  z-index: 1;
}

@media (min-width: 1700px) {
  body[data-route="bitacora"] #reflexiones .reflexiones-quote {
    display: block;
  }
}

body[data-route="bitacora"] #reflexiones .article-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body[data-route="bitacora"] #reflexiones .article-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: none;
}
body[data-route="bitacora"] #reflexiones .article-card img {
  border-radius: 16px;
  box-shadow: 0 20px 44px -24px rgba(32, 27, 16, 0.38);
}
body[data-route="bitacora"] #reflexiones .article-card .card-body {
  padding: 1.05rem 0.15rem 0;
  gap: 0.5rem;
}

/* ===== Bitácora · alineación consistente (contenido centrado, mismo ancho) ===== */
/* IG: tarjetas más discretas (formato Instagram, no deben competir en
   tamaño con las fichas de Reflexiones); se centran cuando no desbordan. */
.ig-carousel__track > .ig-post {
  flex: 0 0 clamp(190px, 22%, 250px);
}
/* Reflexiones: cabecera centrada, siguiendo el título del hero */
body[data-route="bitacora"] #reflexiones .section-head {
  display: block;
  grid-template-columns: none;
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
body[data-route="bitacora"] #reflexiones .section-head > div {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
body[data-route="bitacora"] #reflexiones .section-head p {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* Newsletter de Bitácora: mismo degradado blanco/cálido del Inicio
   (fundido desde el fondo hacia el amarillo, sin borde duro). */
body[data-route="bitacora"] #newsletter {
  background:
    linear-gradient(180deg, var(--paper-quiet) 0, var(--yellow) 130px),
    var(--yellow);
}

/* ===== Nosotros · Valores fundamentales: fondo claro, tarjetas centradas
   e iconos animados (antes: fondo negro plano, texto a la izquierda) ===== */

body[data-route="nosotros"] .section--values {
  background: var(--paper);
  color: var(--ink);
}

body[data-route="nosotros"] .section--values .values-head h2 {
  color: var(--ink);
}

body[data-route="nosotros"] .section--values .values-grid {
  justify-items: center;
}

/* Cada tarjeta centrada: icono, título, subtítulo y texto en eje vertical */
body[data-route="nosotros"] .section--values .value-item {
  justify-items: center;
  text-align: center;
}

body[data-route="nosotros"] .section--values .value-item h3 {
  color: var(--ink);
}

body[data-route="nosotros"] .section--values .value-item em {
  color: rgba(13, 12, 8, 0.6);
}

body[data-route="nosotros"] .section--values .value-item p {
  max-width: 34ch;
  color: rgba(13, 12, 8, 0.68);
}

/* Icono con más presencia sobre el papel: tono ocre profundo + anillo sutil */
body[data-route="nosotros"] .section--values .value-icon {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 9px;
  color: var(--yellow-deep);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
}

body[data-route="nosotros"] .section--values .value-item:hover .value-icon {
  transform: translateY(-3px) scale(1.08);
  color: var(--clay);
}

/* Anillo que aparece detrás del icono al pasar el ratón */
body[data-route="nosotros"] .section--values .value-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(185, 135, 5, 0.3);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-route="nosotros"] .section--values .value-item:hover .value-icon::before {
  opacity: 1;
  transform: scale(1);
}

/* El icono se dibuja a sí mismo (stroke-draw) al entrar en pantalla,
   aprovechando el mismo sistema de revelado por scroll del resto del sitio */
@media (prefers-reduced-motion: no-preference) {
  body[data-route="nosotros"] .section--values .value-icon {
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    transition:
      stroke-dashoffset 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms,
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      color 220ms ease;
  }

  body[data-route="nosotros"] .section--values .value-item.is-visible .value-icon {
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   HOME · "Qué es La Perduda": el eyebrow y el título quedan
   centrados, y el título cabe en una sola línea (se retira el
   límite de caracteres que forzaba el salto de línea).
   ============================================================ */
body[data-route="home"] .home-story__copy {
  justify-items: center;
  text-align: center;
}

body[data-route="home"] .home-story__copy .eyebrow,
body[data-route="home"] .home-story__copy h2 {
  text-align: center;
}

body[data-route="home"] .home-story__copy h2 {
  max-width: none;
}

body[data-route="home"] .home-story__copy p,
body[data-route="home"] .home-story__lead {
  text-align: left;
  justify-self: center;
}

/* Una sola línea solo a partir de un ancho donde la columna de texto
   tiene espacio de sobra; por debajo se permite el salto natural para
   no recortar el título. */
@media (min-width: 1100px) {
  body[data-route="home"] .home-story__copy h2 {
    white-space: nowrap;
  }
}

/* ============================================================
   Ficha de documental · "Ficha Técnica" (créditos + dossier PDF).
   Mismo patrón de dos columnas que "¿Por qué este documental?",
   pero con una lista real de créditos (nada de saltos de línea a
   mano, que en móvil no eran fiables) y el CTA de descarga.
   ============================================================ */
.doc-facts {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
}

.doc-facts h2 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
}

.doc-facts__list {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0 0 1.2rem;
  list-style: none;
}

.doc-facts__list li {
  display: grid;
  grid-template-columns: minmax(6rem, 0.32fr) minmax(0, 1fr);
  gap: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.doc-facts__list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.doc-facts__list li span {
  color: var(--ink);
  font-weight: 650;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* El valor (nombres/datos) es un <span> hermano de la etiqueta, para que
   también sea editable desde el admin — pero debe verse como texto
   normal, no como la etiqueta en mayúsculas. */
.doc-facts__list li span.doc-facts__value {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 700px) {
  .doc-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-facts__list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

/* Tema oscuro de la ficha de documental (Producción) */
body[data-route="produccion"] .doc-detail .doc-facts {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

body[data-route="produccion"] .doc-facts h2 {
  color: #fffdf7;
}

body[data-route="produccion"] .doc-facts__list li {
  border-top-color: rgba(255, 253, 247, 0.12);
  color: rgba(255, 253, 247, 0.78);
}

body[data-route="produccion"] .doc-facts__list li span {
  color: rgba(255, 253, 247, 0.92);
}

body[data-route="produccion"] .doc-facts__list li span.doc-facts__value {
  color: rgba(255, 253, 247, 0.78);
}

body[data-route="produccion"] .doc-facts .button--yellow {
  color: #0d0c08;
}

/* ============================================================
   Ficha de documental · galería en carrusel de scroll horizontal
   con flechas (mismo lenguaje que el feed de Instagram de
   Bitácora: .ig-carousel), adaptado al tema oscuro de la ficha.
   ============================================================ */
.doc-carousel {
  position: relative;
  max-width: 920px;
  margin: 0 auto clamp(2rem, 4vw, 3.2rem);
}

.doc-carousel__track {
  display: flex;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.2rem 0.1rem 0.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.doc-carousel__track::-webkit-scrollbar {
  display: none;
}

.doc-carousel__track > figure {
  flex: 0 0 clamp(280px, 62%, 620px);
  scroll-snap-align: start;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  aspect-ratio: 16 / 10;
}

.doc-carousel__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.doc-carousel__track figure:hover img {
  transform: scale(1.045);
}

.doc-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 247, 0.18);
  background: rgba(13, 12, 8, 0.68);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.6);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--white);
  transition: transform 250ms ease, background 250ms ease, opacity 250ms ease;
}

.doc-carousel__nav--prev {
  left: clamp(-10px, -1vw, 0px);
}

.doc-carousel__nav--next {
  right: clamp(-10px, -1vw, 0px);
}

.doc-carousel__nav:hover {
  background: var(--yellow);
  color: var(--ink);
  transform: translateY(-50%) scale(1.07);
}

.doc-carousel__nav:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}

.doc-carousel__nav[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .doc-carousel__track > figure {
    flex-basis: 84%;
  }
  .doc-carousel__nav {
    width: 42px;
    height: 42px;
    font-size: 1.4rem;
  }
}

/* Hero de portada en móvil: eslogan grande pero sin desbordar */
@media (max-width: 800px) {
  body[data-route="home"] .home-hero-title {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.7rem);
  }
}

/* Subtítulo en español bajo el título original en las tarjetas de documental */
.project-card__subtitle {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 253, 247, 0.78);
}

/* El subtítulo vacío de las tarjetas no ocupa hueco para el público;
   en modo admin queda visible como campo editable. */
html:not(.admin-mode) .project-card__subtitle:empty {
  display: none;
}
html.admin-mode .project-card__subtitle:empty::before {
  content: "Título en español…";
  opacity: 0.5;
}

/* ===== Producción · ajustes de la clienta (jul 2026) ===== */
/* Título del hero más presente, sin robar protagonismo al CTA amarillo */
body[data-route="produccion"] .page-hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  line-height: 1.06;
}

body[data-route="produccion"] .page-hero .lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

/* "Qué hacemos": entradilla al mismo tamaño que el titular de inicio,
   con un filete ámbar corto como detalle */
body[data-route="produccion"] .production-intro h2 {
  max-width: 22ch;
  font-size: clamp(1.95rem, 2.8vw, 2.65rem);
  line-height: 1.12;
}

body[data-route="produccion"] .production-intro h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 0.7rem;
  border-radius: 2px;
  background: var(--yellow);
}

/* "Cómo trabajamos." es un título: en negrita */
body[data-route="produccion"] .process-compact__heading h3 {
  font-weight: 700;
}

/* Vídeos de YouTube embebidos directamente donde antes había miniatura */
.youtube-embed-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: inherit;
  background: #050504;
}

.youtube-embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== Próximas salidas · ruta que conecta los tres viajes ===== */
/* Entre tarjeta y tarjeta, un tramo de ruta punteada con una parada
   amarilla que late: los viajes se leen como etapas de un mismo camino. */
body[data-route="viajes"] .proximo-card:not(:first-child) {
  border-top: 0;
}

body[data-route="viajes"] .proximo-card:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  height: clamp(64px, 9vw, 120px);
  width: 0;
  border-left: 2px dashed rgba(201, 161, 26, 0.5);
}

body[data-route="viajes"] .proximo-card:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid #fffdf7;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(243, 195, 24, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  body[data-route="viajes"] .proximo-card:not(:first-child)::before {
    animation: rutaParada 2.8s ease-out infinite;
  }
}

@keyframes rutaParada {
  0%, 100% { box-shadow: 0 0 0 4px rgba(243, 195, 24, 0.18); }
  50% { box-shadow: 0 0 0 9px rgba(243, 195, 24, 0.08); }
}

/* Las fotos del collage amplían al clic (visor), ya no enlazan */
html:not(.admin-mode) .proximo-card__collage img {
  cursor: zoom-in;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(13, 12, 8, 0.92);
  opacity: 0;
  transition: opacity 240ms ease;
  cursor: zoom-out;
}

.photo-lightbox.is-open {
  opacity: 1;
}

.photo-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-lightbox.is-open img {
  transform: scale(1);
}

/* "Próximas rutas" centrado sobre la sección */
body[data-route="viajes"] #proximos-viajes .section-head {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 0.8rem;
}

body[data-route="viajes"] #proximos-viajes .section-head p {
  margin-inline: auto;
}

/* Inicio: la tarjeta de "Qué es" pasa de vídeo a foto simple */
.reel-card--home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Producción: el reel se mantiene como vídeo pero en formato vertical */
body[data-route="produccion"] .reel-card--production {
  aspect-ratio: 9 / 16;
  width: min(100%, 380px);
  justify-self: center;
}

body[data-route="produccion"] .reel-card--production .youtube-embed-frame,
body[data-route="produccion"] .reel-card--production iframe {
  aspect-ratio: 9 / 16;
  height: 100%;
}

/* ===== "Una sola línea": ilustración animada de la portada ===== */
/* Se dibuja una vez al entrar en pantalla; después quedan vivos los
   rollos girando, el piloto REC y el halo del sol. */
.linea-viajera {
  background: #0d0c08;
  display: grid;
  place-items: center;
}

.linea-viajera svg {
  width: 100%;
  height: 100%;
  display: block;
}

.linea-viajera text {
  font-family: var(--font-body, sans-serif);
  letter-spacing: 0.32em;
}

.linea-viajera .lv-cap {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0.04em;
}

.linea-viajera .lv-draw {
  stroke-dasharray: var(--l);
  stroke-dashoffset: var(--l);
}

.linea-viajera.is-in .lv-draw {
  animation: lvDraw var(--d) cubic-bezier(0.4, 0, 0.2, 1) var(--dl) forwards;
}

@keyframes lvDraw {
  to { stroke-dashoffset: 0; }
}

.linea-viajera .lv-spokes {
  opacity: 0;
  stroke: rgba(255, 253, 247, 0.55);
}

.linea-viajera.is-in .lv-spokes {
  animation: lvFade 500ms ease 1200ms forwards;
}

.linea-viajera .lv-spin--a { transform-origin: 92px 121px; }
.linea-viajera .lv-spin--b { transform-origin: 124px 121px; }

.linea-viajera.is-in .lv-spin--a { animation: lvSpin 10s linear infinite; }
.linea-viajera.is-in .lv-spin--b { animation: lvSpin 7s linear infinite; }

@keyframes lvSpin { to { transform: rotate(360deg); } }

.linea-viajera .lv-sun {
  transform: translateY(58px);
  opacity: 0;
}

.linea-viajera.is-in .lv-sun {
  animation: lvSun 1300ms cubic-bezier(0.22, 1, 0.36, 1) 3400ms forwards;
}

@keyframes lvSun {
  40% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.linea-viajera .lv-halo { opacity: 0; }

.linea-viajera.is-in .lv-halo {
  animation: lvHalo 3.6s ease-out 4700ms infinite;
}

@keyframes lvHalo {
  0% { r: 20; opacity: 0.45; }
  55% { r: 33; opacity: 0; }
  100% { r: 33; opacity: 0; }
}

.linea-viajera .lv-rec { opacity: 0; }

.linea-viajera.is-in .lv-rec {
  animation: lvRec 2.4s linear 2200ms infinite;
}

@keyframes lvRec {
  0%, 45% { opacity: 1; }
  55%, 75% { opacity: 0.12; }
  85%, 100% { opacity: 1; }
}

.linea-viajera .lv-word,
.linea-viajera .lv-cap { opacity: 0; }

.linea-viajera.is-in .lv-word--a { animation: lvFade 700ms ease 4200ms forwards; }
.linea-viajera.is-in .lv-word--b { animation: lvFade 700ms ease 4500ms forwards; }
.linea-viajera.is-in .lv-cap { animation: lvFade 900ms ease 4800ms forwards; }

@keyframes lvFade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .linea-viajera .lv-draw { stroke-dashoffset: 0; }
  .linea-viajera .lv-sun { transform: none; opacity: 1; }
  .linea-viajera .lv-spokes,
  .linea-viajera .lv-rec,
  .linea-viajera .lv-word,
  .linea-viajera .lv-cap { opacity: 1; }
  .linea-viajera.is-in .lv-draw,
  .linea-viajera.is-in .lv-spin--a,
  .linea-viajera.is-in .lv-spin--b,
  .linea-viajera.is-in .lv-sun,
  .linea-viajera.is-in .lv-halo,
  .linea-viajera.is-in .lv-rec { animation: none; }
}

/* Mapa de bitácora: antetítulo, título y mapa más pegaditos */
body[data-route="bitacora"] .paises-head {
  margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
}

body[data-route="bitacora"] .paises-head .eyebrow {
  margin-bottom: 0.4rem;
}

body[data-route="bitacora"] .paises-head h2 {
  margin: 0 0 0.3rem;
}

/* Líneas de enlace dentro de los artículos: separadas del texto editable */
.article-body .article-link-line {
  margin: -0.4rem 0 1.3rem;
}

.article-body .article-link-line a {
  color: #8a6d1a;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 161, 26, 0.55);
  padding-bottom: 2px;
}

.article-body .article-link-line a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Artículos de bitácora: fila con scroll horizontal, sin saltar de línea */
body[data-route="bitacora"] .article-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: 0.3rem 0.2rem 0.9rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body[data-route="bitacora"] .article-grid::-webkit-scrollbar {
  display: none;
}

body[data-route="bitacora"] .article-grid > .article-card {
  flex: 0 0 clamp(270px, 34%, 400px);
  scroll-snap-align: start;
}

/* Carrusel de artículos: flechas y tarjeta asomando sin cortes bruscos */
.article-carousel {
  position: relative;
}

body[data-route="bitacora"] .article-grid > .article-card {
  flex-basis: clamp(270px, 34%, 400px);
}

/* Nosotros · solo las descripciones de "Valores fundamentales" van
   justificadas, como pidió la clienta, para que el bloque quede alineado */
body[data-route="nosotros"] .section--values .value-item p {
  text-align: justify;
  text-justify: inter-word;
}

/* Quinto miembro del equipo (impar): centrado en su fila para que la
   rejilla de dos columnas no quede coja */
body[data-route="nosotros"] .team-row--solo {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 640px);
}

/* ===== Nosotros · equipo v7: "cartel de equipo" ====================
   Los cinco al mismo nivel en una fila de retratos 3:4. La biografía se
   lee en un panel único bajo la fila (gestionado en site.js). En modo
   admin las bios se muestran bajo cada retrato para poder editarlas. */
body[data-route="nosotros"] .team-rows {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
}

body[data-route="nosotros"] .team-rows .team-row,
body[data-route="nosotros"] .team-rows .team-row--reverse,
body[data-route="nosotros"] .team-rows .team-row--solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  direction: ltr;
  cursor: pointer;
  grid-column: auto;
  justify-self: stretch;
}

body[data-route="nosotros"] .team-rows .team-row__media {
  order: 0;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
}

body[data-route="nosotros"] .team-rows .team-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-route="nosotros"] .team-rows .team-row__body {
  order: 1;
  display: grid;
  gap: 0.25rem;
  justify-items: center;
}

body[data-route="nosotros"] .team-rows .card-meta {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

body[data-route="nosotros"] .team-rows h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  line-height: 1.05;
}

body[data-route="nosotros"] .team-rows h3::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin: 0.35rem auto 0;
  border-radius: 2px;
  background: var(--yellow);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-route="nosotros"] .team-rows .team-row.is-active h3::after {
  width: 34px;
}

body[data-route="nosotros"] .team-rows .team-row.is-active .team-row__media,
body[data-route="nosotros"] .team-rows .team-row:hover .team-row__media {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(32, 27, 16, 0.45);
}

/* La bio individual queda oculta para el público: se lee en el panel */
html:not(.admin-mode) body[data-route="nosotros"] .team-rows .team-row__body p {
  display: none;
}

.team-bio-panel {
  max-width: 640px;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
  min-height: 4.6em;
  text-align: center;
}

.team-bio-panel p {
  margin: 0;
  color: rgba(13, 12, 8, 0.7);
  font-size: 0.98rem;
  line-height: 1.7;
  transition: opacity 260ms ease;
}

.team-bio-panel.is-switching p {
  opacity: 0;
}

html.admin-mode .team-bio-panel {
  display: none;
}

@media (max-width: 760px) {
  body[data-route="nosotros"] .team-rows {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.6rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  body[data-route="nosotros"] .team-rows::-webkit-scrollbar { display: none; }

  body[data-route="nosotros"] .team-rows .team-row,
  body[data-route="nosotros"] .team-rows .team-row--reverse,
  body[data-route="nosotros"] .team-rows .team-row--solo {
    flex: 0 0 52%;
    scroll-snap-align: center;
  }
}

/* ===================================================================
   Toques premium adicionales (cursor, hovers, scrollbar, subrayados)
   =================================================================== */

/* --- Zoom sutil al hover en tarjetas que aún no lo tenían --- */
.pillar-story-card img {
  transition: transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pillar-story-card:hover img {
  transform: scale(1.05);
}

.reel-card__frame img {
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 300ms ease;
}
.reel-card:hover .reel-card__frame img {
  transform: scale(1.06);
  filter: brightness(0.88);
}

/* --- Scrollbar de marca en escritorio (Chrome/Edge/Safari) --- */
html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background: var(--paper-quiet);
}
html::-webkit-scrollbar-thumb {
  background-color: rgba(13, 12, 8, 0.32);
  border-radius: 8px;
  border: 2px solid var(--paper-quiet);
}
html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(13, 12, 8, 0.5);
}
body[data-route="bitacora"] .mapa-panel::-webkit-scrollbar,
body[data-route="bitacora"] .mapa-panel *::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

/* --- Subrayados que crecen desde el centro (enlaces de prosa/footer) --- */
.footer-links a,
.footer-newsletter a,
.contact-method a,
.article-card .card-body a:not(.button):not(.link-cue) {
  position: relative;
}
.footer-links a::after,
.contact-method a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}
.footer-links a:hover::after,
.contact-method a:hover::after {
  transform: scaleX(1);
  opacity: 0.9;
}

/* Nav: el subrayado ahora crece desde el centro en vez de desde la izquierda */
.site-nav a::after {
  transform-origin: center;
}

/* Flecha de .link-cue: también se anima si el propio enlace recibe el hover
   directamente (no solo cuando el hover viene de la tarjeta contenedora) */
.link-cue:hover::after {
  transform: translateX(4px);
}

/* ===================================================================
   Legal (Aviso legal, privacidad, cookies)
   =================================================================== */
.legal-index {
  padding-top: 0;
  padding-bottom: 0;
}
.legal-index p {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.legal-index a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#aviso-legal h3,
#privacidad h3,
#cookies h3 {
  margin-top: 2.2rem;
  font-size: 1.32rem;
}
#aviso-legal h2,
#privacidad h2,
#cookies h2 {
  padding-top: 0.4rem;
}
#privacidad,
#cookies {
  padding-top: clamp(1rem, 2vw, 1.6rem);
}
.article-body ul {
  margin: 0.8rem 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
}
.article-body ul li {
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ===================================================================
   Heros interiores al estilo del hero de Inicio: mismo tamaño de
   fuente, peso e interlineado. Sustituye el ajuste anterior que los
   dejaba mucho más pequeños que el de Home. La altura y el centrado
   ya establecidos en cada página se mantienen.
   =================================================================== */
.page-hero,
.page-hero--minimal,
body[data-route="produccion"] .page-hero {
  min-height: 88svh !important;
}

.page-hero h1,
.page-hero--minimal h1,
body[data-route="produccion"] .page-hero h1,
body[data-route="produccion"] .page-hero__content h1 {
  max-width: 20ch;
  font-size: clamp(2.3rem, 4.8vw, 4.2rem) !important;
  font-weight: 500;
  line-height: 1.06;
}

.page-hero .lead,
body[data-route="produccion"] .page-hero .lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .page-hero h1,
  .page-hero--minimal h1,
  body[data-route="produccion"] .page-hero h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
  }
}

/* ===================================================================
   Galería de fotos interna de cada documental (ficha individual,
   .doc-carousel): fotos más pequeñas para que se vean varias a la vez
   en vez de una casi a pantalla completa.
   =================================================================== */
.doc-carousel {
  max-width: 760px;
}
.doc-carousel__track > figure {
  flex: 0 0 clamp(190px, 34%, 300px);
}
@media (max-width: 620px) {
  .doc-carousel__track > figure {
    flex-basis: 62%;
  }
}

/* ===================================================================
   Nosotros: el texto de "Valores fundamentales" se había quedado más
   pequeño (0.86rem) y justificado (con huecos raros) respecto al de
   "Nuestros pilares" (que usa el tamaño de párrafo normal, 1rem, sin
   justificar). Se igualan para que ambas secciones lean igual.
   =================================================================== */
body[data-route="nosotros"] .section--values .value-item p {
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  text-justify: auto;
}