/* ============================================================
   ALEJANDRO TORO · INGENIERO CIVIL
   Sistema de diseño — cinematográfico, minimalista, premium
   Tipografía: Marcellus (display) + Hanken Grotesk (texto)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Color — noche de cordillera + guadua */
  --noche:        oklch(15.5% 0.012 165);
  --noche-2:      oklch(18.5% 0.014 165);
  --noche-3:      oklch(23% 0.016 162);
  --marfil:       oklch(94% 0.012 85);
  --marfil-2:     oklch(80% 0.015 100);
  --guadua:       oklch(76% 0.105 78);
  --guadua-2:     oklch(86% 0.06 85);
  --papel:        oklch(95.5% 0.012 90);
  --papel-2:      oklch(92% 0.016 88);
  --tinta:        oklch(23% 0.018 165);
  --tinta-2:      oklch(40% 0.02 160);
  --linea-osc:    oklch(35% 0.015 160 / .45);
  --linea-cla:    oklch(23% 0.018 165 / .18);

  /* Tipografía */
  --serif: "Marcellus", "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --fs-hero: clamp(2.35rem, 1rem + 5.6vw, 5.4rem);
  --fs-1: clamp(2rem, 1rem + 4vw, 4rem);
  --fs-2: clamp(1.6rem, 1rem + 2.6vw, 2.7rem);
  --fs-3: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small: 0.9rem;
  --fs-label: 0.78rem;

  /* Ritmo */
  --sec: clamp(5rem, 14vh, 9.5rem);
  --gut: clamp(1.35rem, 4.5vw, 4rem);
  --ancho: 1280px;
  --ancho-xl: 1520px;

  /* Movimiento */
  --exp: cubic-bezier(0.16, 1, 0.3, 1);
  --quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 0.55s;
  --dur-2: 0.95s;
  --dur-3: 1.4s;

  /* Capas */
  --z-nav: 40;
  --z-menu: 50;
  --z-preview: 30;

  /* Fotografía — regla del sitio: toda foto lleva esquinas redondeadas
     (ver skill del proyecto: fotos-bordes-redondeados) */
  --radio-foto: 14px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 380;
  line-height: 1.7;
  color: var(--marfil);
  background: var(--noche);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: oklch(76% 0.105 78 / .28); color: var(--marfil); }
.tema-claro ::selection { color: var(--tinta); }

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

.salto {
  position: absolute; left: -999px; top: 0; z-index: 100;
  padding: .8rem 1.4rem; background: var(--guadua); color: var(--noche);
}
.salto:focus { left: 1rem; top: 1rem; }

/* ---------- Tipografía base ---------- */
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.12;
  text-wrap: balance;
}
p { max-width: 62ch; text-wrap: pretty; }

.label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--guadua);
}

.meta-linea {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem;
  font-size: var(--fs-small); color: var(--marfil-2);
}
.meta-linea .punto { color: var(--guadua); }

/* ---------- Contenedores ---------- */
.cont { width: min(100% - 2 * var(--gut), var(--ancho)); margin-inline: auto; }
.cont-xl { width: min(100% - 2 * var(--gut), var(--ancho-xl)); margin-inline: auto; }

.seccion { padding-block: var(--sec); position: relative; }
.tema-claro { background: var(--papel); color: var(--tinta); }
.tema-claro p { color: oklch(32% 0.02 163); }

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.03em;
  padding: 0.95rem 1.7rem; border-radius: 2px;
  background: var(--guadua); color: oklch(18% 0.02 90);
  transition: background var(--dur-1) var(--exp), transform var(--dur-1) var(--exp);
}
.btn:hover { background: var(--guadua-2); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform var(--dur-1) var(--exp); }
.btn:hover svg { transform: translateX(4px); }

.btn--fantasma {
  background: transparent; color: var(--marfil);
  box-shadow: inset 0 0 0 1px oklch(94% 0.012 85 / .32);
}
.btn--fantasma:hover { background: oklch(94% 0.012 85 / .07); box-shadow: inset 0 0 0 1px oklch(94% 0.012 85 / .6); }
.tema-claro .btn--fantasma { color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-cla); }
.tema-claro .btn--fantasma:hover { background: oklch(23% 0.018 165 / .05); box-shadow: inset 0 0 0 1px oklch(23% 0.018 165 / .4); }

.enlace {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; color: var(--guadua);
  transition: gap var(--dur-1) var(--exp);
}
.enlace:hover { gap: .85rem; }
.enlace::after { content: "→"; font-family: var(--sans); }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav);
  transition: transform var(--dur-1) var(--exp), background var(--dur-1) ease,
              box-shadow var(--dur-1) ease, backdrop-filter var(--dur-1) ease;
}
.nav__int {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.15rem;
}
.nav.solida {
  background: oklch(15.5% 0.012 165 / .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 oklch(94% 0.012 85 / .08);
}
.nav.oculta { transform: translateY(-100%); }

.marca { display: flex; flex-direction: column; line-height: 1.15; z-index: 2; }
.marca__nombre { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.09em; text-transform: uppercase; }
.marca__cargo { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--marfil-2); }

.nav__enlaces { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.4rem); }
.nav__enlaces a:not(.btn) {
  font-size: 0.92rem; font-weight: 450; color: var(--marfil-2);
  transition: color var(--dur-1) ease;
}
.nav__enlaces a:not(.btn):hover { color: var(--marfil); }
.nav__enlaces .btn { padding: 0.6rem 1.15rem; font-size: 0.88rem; }

.nav__burger { display: none; z-index: 2; width: 44px; height: 44px; position: relative; }
.nav__burger span {
  position: absolute; left: 10px; right: 10px; height: 1.5px;
  background: var(--marfil); transition: transform var(--dur-1) var(--exp), opacity var(--dur-1) ease;
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 26px; }
.menu-abierto .nav__burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-abierto .nav__burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* Menú móvil */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--noche);
  display: grid; place-content: center; gap: .4rem;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-1) ease, visibility 0s linear var(--dur-1);
}
.menu-abierto .menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu a {
  font-family: var(--serif); font-size: clamp(2rem, 8vw, 3rem);
  padding: .35rem 0; text-align: center;
  transform: translateY(22px); opacity: 0;
  transition: transform .7s var(--exp), opacity .7s ease, color .3s ease;
  transition-delay: calc(var(--i) * 60ms);
}
.menu-abierto .menu a { transform: none; opacity: 1; }
.menu a:hover { color: var(--guadua); }
.menu .menu__meta {
  margin-top: 2rem; text-align: center; font-size: var(--fs-small); color: var(--marfil-2);
  opacity: 0; transition: opacity .7s ease .4s;
}
.menu-abierto .menu .menu__meta { opacity: 1; }
.menu-abierto { overflow: hidden; }
@media (max-width: 860px) {
  .nav__enlaces { display: none; }
  .nav__burger { display: block; }
}
@media (min-width: 861px) { .menu { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden; overflow: clip;
}
.hero__fondo { position: absolute; inset: 0; }
.hero__fondo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
}
.js .hero.lista .hero__fondo img { animation: hero-zoom 2.4s var(--exp) forwards; }
@keyframes hero-zoom { to { transform: scale(1); } }

.hero__velo { position: absolute; inset: 0; pointer-events: none; }
.hero__velo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    oklch(15.5% 0.012 165 / .42) 0%,
    oklch(15.5% 0.012 165 / 0) 32%,
    oklch(15.5% 0.012 165 / 0) 46%,
    oklch(15.5% 0.012 165 / .88) 88%,
    var(--noche) 100%);
}
/* viñeta lateral: asegura contraste del titular sobre cielos claros */
.hero__velo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    oklch(15.5% 0.012 165 / .6) 0%,
    oklch(15.5% 0.012 165 / .22) 34%,
    transparent 55%);
}
.hero__cont {
  position: relative;
  padding-block-end: clamp(3rem, 9vh, 6rem);
}
.hero__meta { margin-bottom: 1.3rem; }
.hero h1 { font-size: var(--fs-hero); max-width: 15ch; }
.hero__sub { margin-top: 1.4rem; font-size: var(--fs-3); font-family: var(--serif); color: var(--guadua-2); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* coreografía de entrada */
.js .hero [data-alba] { opacity: 0; transform: translateY(34px); }
.js .hero.lista [data-alba] {
  animation: alba var(--dur-3) var(--exp) forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.14s);
}
@keyframes alba { to { opacity: 1; transform: none; } }

.hero__scroll {
  position: absolute; right: var(--gut); bottom: clamp(3rem, 9vh, 6rem);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  color: var(--marfil-2); font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 74px;
  background: linear-gradient(var(--marfil-2), transparent);
  animation: gotea 2.4s var(--quint) infinite;
  transform-origin: top;
}
@keyframes gotea {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(30px); opacity: 0; }
}
@media (max-width: 700px) { .hero__scroll { display: none; } }

/* Hero interior (landings) */
.hero--paisaje { min-height: 86svh; }

/* ---------- Revelados por scroll ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--exp);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].en-vista { opacity: 1; transform: none; }

.js [data-reveal="mascara"] {
  transform: none; opacity: 1;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-3) var(--quint);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="mascara"].en-vista { clip-path: inset(0 0 0 0); }
.js [data-reveal="mascara"] img { transform: scale(1.14); transition: transform var(--dur-3) var(--quint); transition-delay: var(--d, 0s); }
.js [data-reveal="mascara"].en-vista img { transform: scale(1); }

/* ---------- Figuras / parallax ---------- */
/* overflow doble: hidden es el fallback para Safari < 16, que no soporta clip
   (sin él, las fotos pierden las esquinas redondeadas en iPhone viejos). */
.figura { overflow: hidden; overflow: clip; position: relative; border-radius: var(--radio-foto); }
.figura img { width: 100%; height: 100%; object-fit: cover; }
.figura[data-plx] img { transform: scale(1.14); will-change: transform; }
.figura figcaption {
  margin-top: .8rem; font-size: var(--fs-small); color: var(--marfil-2);
}
.tema-claro .figura figcaption { color: var(--tinta-2); }

/* ---------- Manifiesto ---------- */
.manifiesto { padding-block: calc(var(--sec) * 1.15); }
.manifiesto__frase {
  font-family: var(--serif); font-size: var(--fs-1);
  line-height: 1.18; max-width: 24ch;
}
.manifiesto__frase em { font-style: normal; color: var(--guadua); }
.manifiesto__pie { margin-top: 2.6rem; display: flex; gap: 1.2rem; align-items: center; }
.manifiesto__pie::before { content: ""; width: 56px; height: 1px; background: var(--guadua); }
.manifiesto__pie span { font-size: var(--fs-small); color: var(--marfil-2); }

/* ---------- Filmstrip (proyecto reciente) ---------- */
.film { position: relative; }
.film__tira { position: relative; }
.film__cabeza {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; padding-block: 0 2.6rem;
}
.film__cabeza h2 { font-size: var(--fs-2); max-width: 18ch; }
.film__pista {
  display: flex; gap: clamp(1rem, 2.5vw, 2rem);
  will-change: transform;
}
.film__marco {
  flex: 0 0 auto;
  width: min(78vw, 880px);
}
.film__marco--alto { width: min(58vw, 560px); }
.film__marco .figura { aspect-ratio: 3 / 2; }
.film__marco--alto .figura { aspect-ratio: 4 / 4.4; }
.film__final {
  flex: 0 0 auto; width: min(70vw, 520px);
  display: grid; place-content: center; gap: 1.6rem;
  text-align: center; padding: 2rem;
}
.film__final .serif { font-size: var(--fs-3); max-width: 16ch; }

/* modo escritorio: sticky + desplazamiento horizontal */
@media (min-width: 861px) {
  .js .film--anclado { height: 340vh; }
  .js .film--anclado .film__tira {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden; overflow: clip;
  }
}
/* modo móvil / sin JS: carrete nativo */
.film__pista--carrete {
  /* proximity, no mandatory: WebKit (iPhone) no deja alcanzar el final de la
     pista con snap obligatorio; con proximity ancla suave y siempre llega. */
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-inline: var(--gut); padding-bottom: 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.film__pista--carrete::-webkit-scrollbar { display: none; }
.film__pista--carrete .film__marco { scroll-snap-align: center; width: min(84vw, 720px); }
/* El panel final (frase + enlace) con su propio punto de anclaje. */
.film__pista--carrete .film__final { scroll-snap-align: center; }

/* ---------- Índice de servicios ---------- */
.servicios__intro { max-width: 58ch; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.servicios__intro h2 { font-size: var(--fs-1); margin-bottom: 1.4rem; }

.serv { border-top: 1px solid var(--linea-cla); }
.serv:last-child { border-bottom: 1px solid var(--linea-cla); }
.serv a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: .4rem 2rem; padding: clamp(1.6rem, 3.5vh, 2.4rem) 0;
  position: relative;
}
.serv h3 {
  grid-column: 1; grid-row: 1;
  font-size: clamp(1.7rem, 1rem + 2.8vw, 3.1rem);
  transition: color var(--dur-1) ease, transform var(--dur-2) var(--exp);
}
.serv__desc { grid-column: 1; grid-row: 2; color: var(--tinta-2); max-width: 52ch; font-size: var(--fs-small); }
.serv__flecha {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 1.5rem; color: var(--tinta-2);
  transition: transform var(--dur-1) var(--exp), color var(--dur-1) ease;
}
.serv a:hover h3, .serv a:focus-visible h3 { color: oklch(58% 0.13 70); transform: translateX(10px); }
.serv a:hover .serv__flecha { transform: translateX(6px); color: oklch(58% 0.13 70); }

/* vista previa flotante (solo puntero fino) */
.previa {
  position: fixed; z-index: var(--z-preview); pointer-events: none;
  width: 300px; aspect-ratio: 3 / 2; overflow: hidden; overflow: clip; border-radius: var(--radio-foto);
  opacity: 0; transform: scale(.92);
  transition: opacity .35s ease, transform .5s var(--exp);
}
.previa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.previa.activa { opacity: 1; transform: scale(1); }
.previa img.actual { opacity: 1; }
@media (pointer: coarse), (max-width: 860px) { .previa { display: none; } }

/* ---------- Perfil / método ---------- */
.perfil { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 861px) { .perfil { grid-template-columns: 1.05fr 0.95fr; } }
.perfil__foto { max-width: 460px; margin-inline: auto; border-radius: var(--radio-foto); overflow: hidden; overflow: clip; }
.perfil__foto img { filter: brightness(.96); }
.perfil h2 { font-size: var(--fs-1); margin-bottom: 1.5rem; max-width: 16ch; }
.perfil__texto p + p { margin-top: 1.1rem; }
.perfil__texto .serif-inline { font-family: var(--serif); font-size: 1.35em; line-height: 1.4; color: var(--guadua-2); display: block; margin-block: 1.6rem .4rem; }

.metodo { margin-top: clamp(3rem, 8vh, 5.5rem); }
.metodo li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: baseline;
  padding-block: 1.5rem; border-top: 1px solid var(--linea-osc);
}
.metodo h3 { font-size: var(--fs-3); }
.metodo p { color: var(--marfil-2); font-size: var(--fs-small); max-width: 58ch; }
.metodo .rom {
  font-family: var(--serif); color: var(--guadua); font-size: .95rem;
  letter-spacing: .12em; min-width: 2.2rem;
}

/* ---------- Cita cinematográfica ---------- */
.cita { position: relative; min-height: 88svh; display: grid; place-items: center; overflow: hidden; overflow: clip; }
/* Excepción de la regla de esquinas redondeadas: fondos a sangre completa
   que tocan los bordes del viewport (cita y banda). */
.cita .figura, .banda .figura { border-radius: 0; }
.cita .figura { position: absolute; inset: 0; }
.cita .figura::after {
  content: ""; position: absolute; inset: 0;
  background: oklch(15.5% 0.012 165 / .55);
}
.cita blockquote { position: relative; text-align: center; padding-block: var(--sec); }
.cita blockquote p { font-family: var(--serif); font-size: var(--fs-1); max-width: 20ch; margin-inline: auto; }
.cita cite { display: block; margin-top: 2rem; font-style: normal; font-size: var(--fs-small); color: var(--marfil-2); letter-spacing: .06em; }

/* ---------- Confianza institucional ---------- */
.confianza { text-align: center; }
.confianza h2 { font-size: var(--fs-2); max-width: 24ch; margin-inline: auto; }
.confianza > .cont > p { margin: 1.4rem auto 0; max-width: 52ch; }
.logos {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.logos img {
  height: clamp(74px, 9vw, 108px); width: auto;
  filter: grayscale(1) brightness(1.16) contrast(.88);
  mix-blend-mode: multiply; opacity: .85;
  transition: opacity var(--dur-1) ease, filter var(--dur-1) ease;
}
.logos img:hover { opacity: 1; filter: grayscale(0) brightness(1) contrast(1); }
/* Gobernación de Risaralda destacada; el logo horizontal de Autopistas del Café
   baja de altura para igualar el peso visual de los escudos verticales. */
.logos img.logo--grande { height: clamp(86px, 10.5vw, 126px); }
.logos img.logo--ancho { height: clamp(46px, 5.5vw, 68px); }
.confianza__nota { margin: 2.8rem auto 0 !important; font-size: var(--fs-small); color: var(--tinta-2) !important; }

/* ---------- Historia / capítulos (landings) ---------- */
.capitulo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 861px) {
  .capitulo { grid-template-columns: repeat(12, 1fr); }
  .capitulo__texto { grid-column: 1 / 6; }
  .capitulo__media { grid-column: 6 / 13; }
  .capitulo--inverso .capitulo__texto { grid-column: 8 / 13; grid-row: 1; }
  .capitulo--inverso .capitulo__media { grid-column: 1 / 8; grid-row: 1; }
}
.capitulo + .capitulo { margin-top: calc(var(--sec) * .9); }
.capitulo h2, .capitulo h3 { font-size: var(--fs-2); margin-bottom: 1.3rem; max-width: 17ch; }
.capitulo__texto p + p { margin-top: 1.05rem; }
.capitulo__media .figura { aspect-ratio: 3 / 2.1; }
.capitulo__media .figura--alta { aspect-ratio: 4 / 4.6; max-width: 560px; }

.destacada { font-family: var(--serif); font-size: var(--fs-3); line-height: 1.4; color: var(--guadua-2); }
.tema-claro .destacada { color: oklch(52% 0.11 70); }

/* ---------- Banda completa ---------- */
.banda { position: relative; min-height: 92svh; overflow: hidden; overflow: clip; display: flex; align-items: flex-end; }
.banda .figura { position: absolute; inset: 0; }
.banda .figura::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, oklch(15.5% 0.012 165 / .78) 100%);
}
.banda__pie { position: relative; padding-block: clamp(2.5rem, 7vh, 4.5rem); }
.banda__pie .serif { font-size: var(--fs-2); max-width: 18ch; }
.banda__pie p:not(.serif) { margin-top: .9rem; color: var(--marfil-2); }

/* ---------- Ficha técnica ---------- */
.ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--linea-osc);
  border-block: 1px solid var(--linea-osc);
}
.ficha > div { background: var(--noche); padding: 1.7rem 1.5rem; }
.ficha dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--marfil-2); margin-bottom: .5rem; }
.ficha dd { font-family: var(--serif); font-size: 1.2rem; }

/* ---------- Galería ---------- */
.galeria {
  display: grid; gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 861px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.galeria .figura { aspect-ratio: 3 / 2.2; cursor: zoom-in; }
.galeria .figura--v { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 860px) { .galeria .figura--v { grid-row: auto; aspect-ratio: 3 / 2.2; } }

/* ---------- Visor de imágenes de la galería ---------- */
.visor {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center;
  background: rgba(7, 13, 10, 0.95);
  padding: clamp(0.8rem, 3vw, 2rem);
}
body.visor-abierto { overflow: hidden; }
body.visor-abierto .visor { display: flex; }
body.visor-abierto .wsp { display: none; }
.visor__img {
  max-width: min(94vw, 1280px); max-height: 80vh;
  width: auto; height: auto;
  border-radius: var(--radio-foto);
}
.visor__pie {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(0.9rem, 3vh, 1.8rem);
  max-width: 84vw; text-align: center;
  color: var(--marfil-2); font-size: var(--fs-small);
}
.visor__cerrar, .visor__ant, .visor__sig {
  position: absolute; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1;
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.visor__cerrar:hover, .visor__ant:hover, .visor__sig:hover {
  border-color: var(--guadua); background: rgba(255, 255, 255, 0.06);
}
.visor__cerrar { top: clamp(0.8rem, 3vh, 1.6rem); right: clamp(0.8rem, 3vw, 1.6rem); }
.visor__ant { left: clamp(0.5rem, 2.5vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.visor__sig { right: clamp(0.5rem, 2.5vw, 1.6rem); top: 50%; transform: translateY(-50%); }

/* ---------- Datos resaltados en prosa ---------- */
.dato { font-family: var(--serif); font-size: 1.5em; color: var(--guadua); }
.tema-claro .dato { color: oklch(52% 0.11 70); }

/* ---------- CTA final ---------- */
.cierre { text-align: center; padding-block: calc(var(--sec) * 1.15); }
.cierre h2 { font-size: var(--fs-1); max-width: 17ch; margin-inline: auto; }
.cierre p { margin: 1.6rem auto 0; max-width: 46ch; color: var(--marfil-2); }
.cierre__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.6rem; }
.cierre__lugar { margin-top: 3.2rem !important; font-size: var(--fs-small); letter-spacing: .08em; }

/* ---------- Enlaces en texto corrido ---------- */
.enlace-texto {
  color: var(--guadua);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: oklch(76% 0.105 78 / .45);
  transition: text-decoration-color var(--dur-1) ease;
}
.enlace-texto:hover { text-decoration-color: var(--guadua); }
.tema-claro .enlace-texto { color: oklch(52% 0.11 70); text-decoration-color: oklch(52% 0.11 70 / .4); }

/* ---------- Preguntas frecuentes (acordeón nativo details/summary) ---------- */
.faq h2 { font-size: var(--fs-2); max-width: 26ch; margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.faq__item { border-top: 1px solid var(--linea-osc); }
.faq__item:last-child { border-bottom: 1px solid var(--linea-osc); }
.faq__item summary {
  display: block; list-style: none; cursor: pointer;
  position: relative;
  padding: clamp(1.6rem, 3.5vh, 2.2rem) 2.8rem clamp(1.6rem, 3.5vh, 2.2rem) 0;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif, serif); font-size: 1.7rem; line-height: 1;
  color: var(--guadua);
  transition: opacity var(--dur-1) ease;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover h3 { color: var(--guadua); }
.faq__item h3 {
  font-size: var(--fs-3); max-width: 32ch; display: inline;
  transition: color var(--dur-1) ease;
}
.faq__item p {
  color: var(--marfil-2); max-width: 68ch;
  padding-bottom: clamp(1.6rem, 3.5vh, 2.2rem);
}

/* ---------- Nota "También construimos" ---------- */
.tambien { margin-top: 1.4rem !important; font-size: var(--fs-small); color: var(--marfil-2); }

/* ---------- Footer ---------- */
.pie {
  border-top: 1px solid var(--linea-osc);
  padding-block: 2.4rem;
}
.pie__int {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2.5rem;
}
.pie nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.pie a { font-size: var(--fs-small); color: var(--marfil-2); transition: color var(--dur-1) ease; }
.pie a:hover { color: var(--guadua); }
.pie__firma { font-size: 0.8rem; color: oklch(64% 0.015 160); width: 100%; margin-top: .6rem; }

/* ---------- WhatsApp flotante ---------- */
.wsp {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: var(--z-nav);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--guadua); color: oklch(18% 0.02 90);
  box-shadow: 0 8px 24px oklch(0% 0 0 / .35);
  transition: transform var(--dur-1) var(--exp), background var(--dur-1) ease;
}
.wsp:hover { transform: translateY(-3px) scale(1.05); background: var(--guadua-2); }

/* ---------- Utilidades ---------- */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .js .hero [data-alba] { opacity: 1; transform: none; }
  .figura[data-plx] img, .js [data-reveal="mascara"] img { transform: none; }
  .js .film--anclado { height: auto; }
  .js .film--anclado .film__tira { position: static; height: auto; }
}