/* =========================================================================
   CORPORACIÓN LUZ DE GRACIA — Hoja de estilos única
   -------------------------------------------------------------------------
   Concepto: el logo es un FARO sostenido por manos. El faro guía en la
   oscuridad. De ahí la paleta: noche profunda (el mar de Buenaventura),
   la luz dorada del haz, y el rojo del faro para todo lo que es acción.
   Sin frameworks. Sin librerías. CSS puro.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Paleta derivada del logo real (faro rojo/blanco, manos, luz dorada) */
  --rojo:        #D62311;   /* cuerpo del faro — acción, urgencia */
  --rojo-osc:    #A5170A;
  --rojo-claro:  #F04A32;
  --dorado:      #E9930B;   /* haz de luz */
  --dorado-cl:   #FFC93C;
  --luz:         #FFE9A8;   /* resplandor */
  --noche:       #08131F;   /* mar de noche — fondo oscuro */
  --noche-2:     #10283C;
  --noche-3:     #1B3B54;
  --tierra:      #8B5A45;   /* manos del logo */
  --crema:       #FBF6EF;
  --blanco:      #FFFFFF;

  --texto:       #14202B;
  --texto-suave: #55636F;
  --texto-inv:   #EAF1F6;
  --texto-inv-s: #A9BECD;
  --borde:       #E6DDD1;
  --borde-osc:   rgba(255,255,255,.14);

  /* Tipografía fluida */
  --f-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --f-texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-xs:   clamp(.75rem,  .72rem + .12vw,  .82rem);
  --t-sm:   clamp(.87rem,  .84rem + .15vw,  .95rem);
  --t-base: clamp(1rem,    .97rem + .18vw,  1.09rem);
  --t-md:   clamp(1.12rem, 1.05rem + .35vw, 1.3rem);
  --t-lg:   clamp(1.35rem, 1.2rem + .75vw,  1.85rem);
  --t-xl:   clamp(1.75rem, 1.4rem + 1.7vw,  2.9rem);
  --t-2xl:  clamp(2.1rem,  1.5rem + 3vw,    4rem);
  --t-3xl:  clamp(2.6rem,  1.6rem + 4.6vw,  5.5rem);
  --t-cifra:clamp(2.6rem,  1.7rem + 4vw,    5rem);

  /* Ritmo espacial */
  --e-1: .5rem;   --e-2: 1rem;    --e-3: 1.5rem;
  --e-4: 2rem;    --e-5: 3rem;    --e-6: 4.5rem;
  --e-7: clamp(4rem, 9vw, 8rem);          /* separación entre secciones */
  --ancho: 1200px;
  --ancho-lectura: 68ch;
  --radio: 14px;
  --radio-sm: 8px;
  --radio-lg: 26px;

  --sombra-sm: 0 2px 8px rgba(8,19,31,.07);
  --sombra:    0 12px 32px -8px rgba(8,19,31,.16);
  --sombra-lg: 0 28px 64px -18px rgba(8,19,31,.32);

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 72px;
}

/* ---------- 2. RESET Y BASE --------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--f-texto);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--texto);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,video,svg{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
p{ text-wrap:pretty; }
a{ color:inherit; }
button,input,textarea,select{ font:inherit; color:inherit; }
ul,ol{ padding:0; list-style:none; }

/* Foco visible — accesibilidad (WCAG 2.4.7) */
:focus-visible{
  outline:3px solid var(--dorado);
  outline-offset:3px;
  border-radius:4px;
}

/* Salto al contenido — accesibilidad (WCAG 2.4.1) */
.saltar{
  position:absolute; left:8px; top:-100px; z-index:2000;
  background:var(--rojo); color:#fff; padding:.8rem 1.3rem;
  border-radius:0 0 var(--radio-sm) var(--radio-sm); font-weight:600;
  transition:top .2s var(--ease);
}
.saltar:focus{ top:0; }

.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. ESTRUCTURA ----------------------------------------------- */
.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
@media (max-width:480px){ .contenedor{ width:min(100% - 1.75rem, var(--ancho)); } }

.seccion{ padding-block:var(--e-7); }
.seccion--compacta{ padding-block:clamp(2.5rem,6vw,4.5rem); }

.seccion--noche{ background:var(--noche); color:var(--texto-inv); }
.seccion--noche h2,.seccion--noche h3{ color:var(--blanco); }
.seccion--noche p{ color:var(--texto-inv-s); }
.seccion--blanca{ background:var(--blanco); }

/* Encabezado de sección */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-texto); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rojo);
  margin-bottom:var(--e-2);
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--rojo); flex:none;
}
.seccion--noche .eyebrow{ color:var(--dorado-cl); }
.seccion--noche .eyebrow::before{ background:var(--dorado-cl); }

.titulo-seccion{ font-size:var(--t-xl); margin-bottom:var(--e-3); }
.entradilla{
  font-size:var(--t-md); color:var(--texto-suave);
  max-width:var(--ancho-lectura); line-height:1.6;
}
.seccion--noche .entradilla{ color:var(--texto-inv-s); }

/* ---------- 4. BOTONES --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.75rem; border-radius:100px; border:2px solid transparent;
  font-family:var(--f-texto); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primario{ background:var(--rojo); color:#fff; box-shadow:0 8px 22px -8px rgba(214,35,17,.75); }
.btn--primario:hover{ background:var(--rojo-osc); box-shadow:0 14px 30px -8px rgba(214,35,17,.85); }

.btn--luz{ background:var(--dorado-cl); color:#3A2500; box-shadow:0 8px 22px -8px rgba(233,147,11,.7); }
.btn--luz:hover{ background:var(--dorado); color:#2B1B00; }

.btn--claro{ background:var(--blanco); color:var(--texto); box-shadow:var(--sombra-sm); }
.btn--claro:hover{ background:var(--crema); }

.btn--borde{ background:transparent; border-color:currentColor; }
.btn--borde:hover{ background:rgba(255,255,255,.1); }
.seccion--blanca .btn--borde:hover,.seccion:not(.seccion--noche) .btn--borde:hover{ background:rgba(8,19,31,.05); }

.btn--sm{ padding:.6rem 1.2rem; font-size:var(--t-xs); }
.btn-fila{ display:flex; flex-wrap:wrap; gap:var(--e-2); }

/* Enlace con flecha */
.enlace-flecha{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; font-size:var(--t-sm); text-decoration:none;
  color:var(--rojo); border-bottom:2px solid transparent;
  transition:gap .25s var(--ease), border-color .25s var(--ease);
}
.enlace-flecha:hover{ gap:.8rem; border-bottom-color:currentColor; }
.seccion--noche .enlace-flecha{ color:var(--dorado-cl); }

/* ---------- 5. NAVEGACIÓN ------------------------------------------------ */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:900;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease),
             backdrop-filter .35s var(--ease);
}
.cabecera--solida{
  background:rgba(251,246,239,.93);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--borde), 0 6px 24px -14px rgba(8,19,31,.35);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e-3);
  min-height:var(--nav-h);
}
.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.marca__aro{
  width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none;
  background:#fff; box-shadow:0 0 0 2px rgba(233,147,11,.55), var(--sombra-sm);
}
.marca__aro img{ width:100%; height:100%; object-fit:cover; }
.marca__texto{ display:flex; flex-direction:column; line-height:1.1; }
.marca__nombre{
  font-family:var(--f-display); font-weight:700; font-size:1.06rem;
  letter-spacing:-.02em; color:var(--texto);
}
.marca__tipo{
  font-size:.62rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--texto-suave);
}
.cabecera:not(.cabecera--solida) .marca__nombre{ color:#fff; }
.cabecera:not(.cabecera--solida) .marca__tipo{ color:rgba(255,255,255,.75); }

.menu{ display:flex; align-items:center; gap:.3rem; }
.menu a{
  padding:.55rem .85rem; border-radius:100px; text-decoration:none;
  font-size:var(--t-sm); font-weight:600; color:var(--texto);
  transition:background-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.menu a:hover{ background:rgba(8,19,31,.06); }
.menu a[aria-current="page"]{ color:var(--rojo); }
.cabecera:not(.cabecera--solida) .menu a{ color:rgba(255,255,255,.92); }
.cabecera:not(.cabecera--solida) .menu a:hover{ background:rgba(255,255,255,.14); }
.cabecera:not(.cabecera--solida) .menu a[aria-current="page"]{ color:var(--dorado-cl); }

.nav__acciones{ display:flex; align-items:center; gap:.6rem; flex:none; }

/* Hamburguesa */
.hamburguesa{
  display:none; width:46px; height:46px; border:0; background:transparent;
  cursor:pointer; border-radius:12px; padding:0;
  align-items:center; justify-content:center;
}
.hamburguesa span{
  display:block; width:23px; height:2.5px; background:var(--texto);
  border-radius:2px; position:relative;
  transition:transform .3s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.hamburguesa span::before,.hamburguesa span::after{
  content:""; position:absolute; left:0; width:23px; height:2.5px;
  background:inherit; border-radius:2px;
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.hamburguesa span::before{ top:-7px; }
.hamburguesa span::after{ top:7px; }
.cabecera:not(.cabecera--solida) .hamburguesa span{ background:#fff; }
.hamburguesa[aria-expanded="true"] span{ background:transparent !important; }
.hamburguesa[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); background:var(--texto); }
.hamburguesa[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); background:var(--texto); }

/* Panel móvil */
.menu-movil{
  position:fixed; inset:0; z-index:890;
  background:var(--crema);
  padding:calc(var(--nav-h) + 2rem) 1.75rem 2rem;
  display:flex; flex-direction:column; gap:.2rem;
  transform:translateX(100%); visibility:hidden;
  transition:transform .4s var(--ease), visibility .4s;
  overflow-y:auto;
}
.menu-movil[data-abierto="true"]{ transform:translateX(0); visibility:visible; }
.menu-movil a{
  font-family:var(--f-display); font-size:1.7rem; font-weight:700;
  text-decoration:none; padding:.7rem 0; border-bottom:1px solid var(--borde);
  color:var(--texto); display:flex; align-items:center; justify-content:space-between;
}
.menu-movil a[aria-current="page"]{ color:var(--rojo); }
.menu-movil a span{ font-family:var(--f-texto); font-size:.8rem; color:var(--texto-suave); font-weight:500; }
.menu-movil__pie{ margin-top:auto; padding-top:var(--e-4); display:grid; gap:.7rem; }

body[data-menu-abierto="true"]{ overflow:hidden; }

/* ---------- 6. HERO ------------------------------------------------------ */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:end;
  background:var(--noche); overflow:hidden; isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
/* <picture> necesita altura propia: si no, el img con height:100% colapsa */
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.hero__velo{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(8,19,31,.95) 0%, rgba(8,19,31,.72) 30%, rgba(8,19,31,.22) 58%, rgba(8,19,31,.42) 100%),
    linear-gradient(105deg, rgba(8,19,31,.52) 0%, transparent 48%);
}
/* Haz de luz del faro — homenaje al logo */
.hero__haz{
  position:absolute; z-index:-1; top:-30%; left:50%; width:170vmax; height:170vmax;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    transparent 0deg 14deg,
    rgba(255,233,168,.11) 18deg,
    rgba(255,201,60,.055) 24deg,
    transparent 30deg 360deg);
  animation:girar 22s linear infinite;
  pointer-events:none; mix-blend-mode:screen;
}
@keyframes girar{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.hero__contenido{
  position:relative; padding-block:clamp(6rem,14vh,9rem) clamp(3.5rem,8vh,5.5rem);
  max-width:940px;
}
.hero__marca{
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  padding:.45rem 1rem .45rem .5rem; border-radius:100px;
  font-size:var(--t-xs); font-weight:600; color:#fff; letter-spacing:.03em;
  margin-bottom:var(--e-3);
}
.hero__marca img{ width:26px; height:26px; border-radius:50%; }
.hero h1{
  font-size:var(--t-3xl); color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
  margin-bottom:var(--e-3);
}
.hero h1 em{
  font-style:normal; color:var(--dorado-cl);
  position:relative; white-space:nowrap;
}
.hero__bajada{
  font-size:var(--t-md); color:rgba(255,255,255,.88);
  max-width:56ch; margin-bottom:var(--e-4); line-height:1.55;
}
.hero__pie{
  display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-4);
  align-items:center; margin-top:var(--e-4);
  padding-top:var(--e-3); border-top:1px solid rgba(255,255,255,.16);
}
.hero__sello{
  display:flex; align-items:center; gap:.5rem;
  font-size:var(--t-xs); color:rgba(255,255,255,.72); font-weight:500;
}
.hero__sello svg{ width:16px; height:16px; flex:none; color:var(--dorado-cl); }

/* Indicador de scroll */
.hero__scroll{
  position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.35);
  border-radius:100px; display:grid; place-items:start center; padding-top:7px;
}
.hero__scroll::after{
  content:""; width:3px; height:8px; border-radius:2px; background:var(--dorado-cl);
  animation:bajar 1.9s var(--ease) infinite;
}
@keyframes bajar{ 0%{opacity:0;transform:translateY(0)} 35%{opacity:1} 70%,100%{opacity:0;transform:translateY(11px)} }
@media (max-width:768px){ .hero__scroll{ display:none; } }

/* Hero secundario (páginas internas) */
.hero-int{
  position:relative; background:var(--noche); color:#fff; isolation:isolate;
  padding-block:calc(var(--nav-h) + clamp(3.5rem,9vw,6rem)) clamp(3rem,8vw,5rem);
  overflow:hidden;
}
.hero-int::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 12% 0%, rgba(233,147,11,.18), transparent 58%),
             radial-gradient(90% 80% at 92% 12%, rgba(214,35,17,.16), transparent 60%);
}
.hero-int h1{ font-size:var(--t-2xl); color:#fff; margin-bottom:var(--e-2); max-width:20ch; }
.hero-int p{ color:var(--texto-inv-s); font-size:var(--t-md); max-width:60ch; }

/* Variante con fotografía de fondo */
.hero-int--foto{ padding-block:calc(var(--nav-h) + clamp(5rem,12vw,8rem)) clamp(4rem,10vw,7rem); }
.hero-int--foto::after{ display:none; }
.hero-int__media{ position:absolute; inset:0; z-index:-2; }
.hero-int__media picture{ display:block; width:100%; height:100%; }
.hero-int__media img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
/* Suficiente para leer el titular, sin apagar la imagen */
.hero-int__velo{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(8,19,31,.92) 2%, rgba(8,19,31,.62) 30%, rgba(8,19,31,.2) 72%, rgba(8,19,31,.45) 100%),
    linear-gradient(100deg, rgba(8,19,31,.6) 0%, rgba(8,19,31,.04) 55%);
}
@media (max-width:900px){
  /* En vertical el texto ocupa más alto: se refuerza solo abajo */
  .hero-int__velo{
    background:linear-gradient(to top, rgba(8,19,31,.94) 6%, rgba(8,19,31,.72) 38%, rgba(8,19,31,.28) 78%, rgba(8,19,31,.5) 100%);
  }
}
.hero-int h1{ text-shadow:0 2px 26px rgba(0,0,0,.55); }
.hero-int--foto p{ color:rgba(255,255,255,.9); }
/* Sobre foto, el rojo pierde contraste: se pasa a dorado */
.hero-int--foto .eyebrow{ color:var(--dorado-cl); }
.hero-int--foto .eyebrow::before{ background:var(--dorado-cl); }
.hero-int--foto .miga{ color:rgba(255,255,255,.75); }
/* Crédito de la imagen: honestidad sobre qué se está viendo */
.credito{
  position:absolute; right:clamp(.9rem,3vw,2rem); bottom:.9rem; z-index:2;
  font-size:.68rem; letter-spacing:.04em; color:rgba(255,255,255,.5);
  background:rgba(8,19,31,.45); padding:.3rem .7rem; border-radius:99px;
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px);
}
@media (max-width:600px){ .credito{ position:static; display:inline-block; margin-top:1.2rem; } }

/* Miga de pan */
.miga{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:var(--t-xs); color:var(--texto-inv-s); margin-bottom:var(--e-3); }
.miga a{ text-decoration:none; opacity:.85; }
.miga a:hover{ opacity:1; text-decoration:underline; }

/* ---------- 7. FRANJA DE EMERGENCIA ------------------------------------- */
.alerta{
  background:linear-gradient(100deg, var(--rojo-osc), var(--rojo) 55%, #E8531F);
  color:#fff; position:relative; overflow:hidden;
}
.alerta::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px);
  pointer-events:none;
}
.alerta__caja{
  position:relative; display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--e-3); padding-block:1.15rem;
}
.alerta__punto{
  width:11px; height:11px; border-radius:50%; background:var(--dorado-cl); flex:none;
  box-shadow:0 0 0 0 rgba(255,201,60,.8); animation:latir 2s infinite;
}
@keyframes latir{
  0%{ box-shadow:0 0 0 0 rgba(255,201,60,.75); }
  70%{ box-shadow:0 0 0 14px rgba(255,201,60,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,201,60,0); }
}
.alerta__texto{ flex:1 1 320px; font-size:var(--t-sm); font-weight:500; }
.alerta__texto strong{ font-weight:800; }
.alerta .btn{ flex:none; }

/* ---------- 8. CIFRAS / CONTADORES -------------------------------------- */
.cifras{
  display:grid; gap:var(--e-3);
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
}
.cifra{
  padding:var(--e-3) 0;
  border-top:2px solid rgba(255,255,255,.16);
}
.seccion:not(.seccion--noche) .cifra{ border-top-color:var(--borde); }
.cifra__num{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:var(--t-cifra); line-height:.95; letter-spacing:-.03em;
  color:var(--dorado-cl); font-variant-numeric:tabular-nums;
}
.seccion:not(.seccion--noche) .cifra__num{ color:var(--rojo); }
.cifra__etq{
  display:block; margin-top:.55rem; font-size:var(--t-sm);
  color:var(--texto-inv-s); line-height:1.4; max-width:24ch;
}
.seccion:not(.seccion--noche) .cifra__etq{ color:var(--texto-suave); }
.cifra__fuente{ display:block; margin-top:.4rem; font-size:.68rem; opacity:.6; letter-spacing:.02em; }

/* ---------- 9. LÍNEAS DE TRABAJO (lista editorial, no tarjetas) --------- */
.lineas{ border-top:1px solid var(--borde); }
.linea{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start;
  gap:var(--e-2) var(--e-3);
  padding:var(--e-4) 0; border-bottom:1px solid var(--borde);
  position:relative; transition:padding-left .35s var(--ease);
}
.linea::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(180deg,var(--dorado-cl),var(--rojo));
  transition:width .35s var(--ease);
}
.linea:hover{ padding-left:1.1rem; }
.linea:hover::before{ width:4px; }
.linea__n{
  font-family:var(--f-display); font-size:var(--t-md); font-weight:700;
  color:var(--rojo); opacity:.5; font-variant-numeric:tabular-nums; line-height:1.4;
}
.linea__cuerpo h3{ font-size:var(--t-lg); margin-bottom:.5rem; }
.linea__cuerpo p{ color:var(--texto-suave); max-width:62ch; font-size:var(--t-sm); }
.linea__etqs{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.etq{
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:.3rem .75rem; border-radius:100px;
  background:rgba(214,35,17,.07); color:var(--rojo-osc);
  border:1px solid rgba(214,35,17,.14);
}
@media (max-width:640px){
  .linea{ grid-template-columns:auto 1fr; }
  .linea__n{ font-size:var(--t-sm); }
}

/* ---------- 10. PROYECTOS (bloques alternos) ---------------------------- */
.proyecto{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,4rem);
  align-items:center; padding-block:var(--e-5);
}
.proyecto:nth-child(even) .proyecto__media{ order:2; }
.proyecto__media{
  position:relative; border-radius:var(--radio-lg); overflow:hidden;
  box-shadow:var(--sombra); aspect-ratio:4/3; background:var(--noche-2);
}
.proyecto__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.proyecto:hover .proyecto__media img{ transform:scale(1.045); }
.proyecto h3{ font-size:var(--t-lg); margin-bottom:.7rem; }
.proyecto p{ color:var(--texto-suave); margin-bottom:var(--e-3); font-size:var(--t-sm); }
.proyecto__datos{ display:grid; gap:.65rem; }
.proyecto__dato{
  display:flex; align-items:baseline; gap:.7rem;
  padding-bottom:.65rem; border-bottom:1px dashed var(--borde);
}
.proyecto__dato b{
  font-family:var(--f-display); font-size:var(--t-md); color:var(--rojo);
  font-variant-numeric:tabular-nums; flex:none; min-width:3.2ch;
}
.proyecto__dato span{ font-size:var(--t-sm); color:var(--texto-suave); }
@media (max-width:840px){
  .proyecto{ grid-template-columns:1fr; gap:var(--e-3); padding-block:var(--e-4); }
  .proyecto:nth-child(even) .proyecto__media{ order:0; }
}

/* ---------- 11. TESTIMONIOS --------------------------------------------- */
.citas{ display:grid; gap:var(--e-3); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.cita{
  background:var(--blanco); border-radius:var(--radio-lg);
  padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--sombra-sm);
  border:1px solid var(--borde); display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cita:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.cita__comilla{
  font-family:var(--f-display); font-size:3.4rem; line-height:.7;
  color:var(--dorado-cl); margin-bottom:.6rem;
}
.cita blockquote{ font-size:var(--t-sm); line-height:1.68; color:var(--texto); margin-bottom:var(--e-3); flex:1; }
.cita figcaption{ display:flex; align-items:center; gap:.75rem; padding-top:var(--e-2); border-top:1px solid var(--borde); }
.cita__inicial{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700;
  background:linear-gradient(140deg,var(--dorado-cl),var(--rojo)); color:#fff;
}
.cita__nombre{ display:block; font-weight:700; font-size:var(--t-sm); }
.cita__rol{ display:block; font-size:var(--t-xs); color:var(--texto-suave); }

/* ---------- 12. GALERÍA + LIGHTBOX -------------------------------------- */
.galeria{
  display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  grid-auto-rows:190px;
}
.galeria__item{
  position:relative; overflow:hidden; border-radius:var(--radio);
  border:0; padding:0; cursor:zoom-in; background:var(--noche-2);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.galeria__item:hover{ transform:scale(1.015); box-shadow:var(--sombra); z-index:2; }
.galeria__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.galeria__item:hover img{ transform:scale(1.08); }
.galeria__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(8,19,31,.72),transparent 48%);
  opacity:0; transition:opacity .35s var(--ease);
}
.galeria__item:hover::after{ opacity:1; }
.galeria__pie{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.9rem; color:#fff; font-size:var(--t-xs); font-weight:600;
  text-align:left; transform:translateY(8px); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.galeria__item:hover .galeria__pie{ transform:translateY(0); opacity:1; }
.galeria__item--alto{ grid-row:span 2; }
.galeria__item--ancho{ grid-column:span 2; }
@media (max-width:640px){
  .galeria{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:.5rem; }
  .galeria__item--ancho{ grid-column:span 2; }
  .galeria__item--alto{ grid-row:span 1; }
  .galeria__pie{ opacity:1; transform:none; font-size:.68rem; padding:.6rem; }
  .galeria__item::after{ opacity:1; }
}

.lightbox{
  position:fixed; inset:0; z-index:1500; display:none;
  background:rgba(6,14,22,.96); backdrop-filter:blur(6px);
  place-items:center; padding:clamp(1rem,4vw,3rem);
}
.lightbox[data-abierto="true"]{ display:grid; animation:aparecer .25s var(--ease); }
@keyframes aparecer{ from{opacity:0} to{opacity:1} }
.lightbox__fig{ margin:0; max-width:min(1100px,100%); max-height:100%; display:grid; gap:.9rem; }
.lightbox__fig img{
  max-height:78svh; width:auto; margin-inline:auto; border-radius:var(--radio);
  box-shadow:var(--sombra-lg);
}
.lightbox__fig figcaption{ color:#fff; text-align:center; font-size:var(--t-sm); }
.lightbox__fig figcaption span{ display:block; color:var(--texto-inv-s); font-size:var(--t-xs); margin-top:.25rem; }
.lightbox__btn{
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  color:#fff; width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1.5rem; line-height:1;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.lightbox__btn:hover{ background:rgba(255,255,255,.24); transform:scale(1.07); }
.lightbox__cerrar{ top:1.1rem; right:1.1rem; }
.lightbox__ant{ left:1.1rem; top:50%; transform:translateY(-50%); }
.lightbox__sig{ right:1.1rem; top:50%; transform:translateY(-50%); }
.lightbox__ant:hover,.lightbox__sig:hover{ transform:translateY(-50%) scale(1.07); }
@media (max-width:640px){
  .lightbox__btn{ width:44px; height:44px; }
  .lightbox__ant{ left:.4rem; } .lightbox__sig{ right:.4rem; }
}

/* ---------- 13. CRÓNICA (Emergencia Buenaventura) ----------------------- */
.progreso{
  position:fixed; top:0; left:0; height:3px; z-index:950;
  background:linear-gradient(90deg,var(--dorado-cl),var(--rojo));
  width:0; transition:width .1s linear;
}
.cronica{ max-width:var(--ancho-lectura); margin-inline:auto; }
.cronica p{ margin-bottom:var(--e-3); font-size:var(--t-md); line-height:1.75; }
.cronica p:first-of-type::first-letter{
  float:left; font-family:var(--f-display); font-size:3.9em; line-height:.82;
  padding:.06em .1em 0 0; color:var(--rojo); font-weight:700;
}
.cronica h2{ font-size:var(--t-lg); margin-top:var(--e-5); margin-bottom:var(--e-2); }

/* Línea de tiempo */
.tiempo{ position:relative; padding-left:2.2rem; }
.tiempo::before{
  content:""; position:absolute; left:7px; top:.6rem; bottom:.6rem; width:2px;
  background:linear-gradient(180deg,var(--rojo),var(--dorado-cl),transparent);
}
.tiempo__hito{ position:relative; padding-bottom:var(--e-4); }
.tiempo__hito::before{
  content:""; position:absolute; left:-2.2rem; top:.45rem;
  width:16px; height:16px; border-radius:50%;
  background:var(--crema); border:3px solid var(--rojo);
}
.seccion--noche .tiempo__hito::before{ background:var(--noche); }
.tiempo__fecha{
  display:inline-block; font-size:var(--t-xs); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rojo); margin-bottom:.35rem;
}
.seccion--noche .tiempo__fecha{ color:var(--dorado-cl); }
.tiempo__hito h3{ font-size:var(--t-md); margin-bottom:.4rem; }
.tiempo__hito p{ font-size:var(--t-sm); color:var(--texto-suave); }
.seccion--noche .tiempo__hito p{ color:var(--texto-inv-s); }

/* Bloque de datos oficiales */
.balance{
  display:grid; gap:1px; background:var(--borde-osc);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:1px solid var(--borde-osc); border-radius:var(--radio); overflow:hidden;
}
.balance__celda{ background:var(--noche-2); padding:var(--e-3) var(--e-2); text-align:center; }
.balance__num{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.7rem,4vw,2.6rem); line-height:1; color:var(--dorado-cl);
  font-variant-numeric:tabular-nums;
}
.balance__etq{ display:block; margin-top:.4rem; font-size:var(--t-xs); color:var(--texto-inv-s); line-height:1.35; }

/* Lista de insumos */
.insumos{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.insumo{
  display:flex; align-items:center; gap:.85rem;
  background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--radio); padding:.95rem 1.1rem;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.insumo:hover{ border-color:var(--rojo); transform:translateX(4px); }
.insumo__ico{
  width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(255,201,60,.25),rgba(214,35,17,.14));
  font-size:1.15rem;
}
.insumo span{ font-size:var(--t-sm); font-weight:600; line-height:1.35; }

/* Aviso de transparencia */
.aviso{
  display:flex; gap:var(--e-2); align-items:flex-start;
  background:linear-gradient(135deg,rgba(255,201,60,.14),rgba(214,35,17,.07));
  border:1px solid rgba(233,147,11,.35); border-left:4px solid var(--dorado);
  border-radius:var(--radio); padding:var(--e-3);
}
.aviso__ico{ font-size:1.4rem; flex:none; line-height:1.2; }
.aviso h3{ font-size:var(--t-md); margin-bottom:.4rem; }
.aviso p{ font-size:var(--t-sm); color:var(--texto-suave); margin:0; }
.seccion--noche .aviso{ background:rgba(255,255,255,.05); border-color:rgba(255,201,60,.3); }
.seccion--noche .aviso p{ color:var(--texto-inv-s); }

/* Marcador de dato pendiente — visible a propósito */
.pendiente{
  display:inline-block; background:repeating-linear-gradient(45deg,#FFF3C4,#FFF3C4 8px,#FFE9A8 8px,#FFE9A8 16px);
  border:1px dashed #B8860B; color:#6B4E00; border-radius:6px;
  padding:.12em .5em; font-size:.85em; font-weight:700; font-family:var(--f-texto);
}

/* ---------- 14. TARJETAS DE APOYO --------------------------------------- */
.apoyos{ display:grid; gap:var(--e-3); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.apoyo{
  position:relative; background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--radio-lg); padding:clamp(1.5rem,3vw,2.1rem);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.apoyo::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--dorado-cl),var(--rojo));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.apoyo:hover{ transform:translateY(-6px); box-shadow:var(--sombra); border-color:transparent; }
.apoyo:hover::before{ transform:scaleX(1); }
.apoyo__ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--dorado-cl),var(--rojo));
  color:#fff; font-size:1.5rem; margin-bottom:var(--e-2);
}
.apoyo h3{ font-size:var(--t-md); margin-bottom:.55rem; }
.apoyo p{ font-size:var(--t-sm); color:var(--texto-suave); margin-bottom:var(--e-3); flex:1; }

/* ---------- 15. VALORES -------------------------------------------------- */
.valores{ display:flex; flex-wrap:wrap; gap:.65rem; }
.valor{
  padding:.7rem 1.3rem; border-radius:100px;
  border:1px solid var(--borde-osc); background:rgba(255,255,255,.05);
  font-weight:600; font-size:var(--t-sm); color:#fff;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.valor:hover{ background:rgba(255,201,60,.16); border-color:var(--dorado-cl); transform:translateY(-3px); }

/* ---------- 16. FAQ (details nativo, accesible) ------------------------- */
.faq{ display:grid; gap:.6rem; max-width:860px; }
.faq details{
  background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--radio); overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq details[open]{ border-color:var(--dorado); box-shadow:var(--sombra-sm); }
.faq summary{
  padding:1.1rem 1.3rem; cursor:pointer; font-weight:700; font-size:var(--t-sm);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--f-display); font-size:1.5rem; line-height:1;
  color:var(--rojo); flex:none; transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 1.3rem 1.2rem; font-size:var(--t-sm); color:var(--texto-suave); }

/* ---------- 17. FORMULARIO ---------------------------------------------- */
.form{ display:grid; gap:var(--e-2); }
.campo{ display:grid; gap:.35rem; }
.campo label{ font-size:var(--t-sm); font-weight:600; }
.campo label span{ color:var(--rojo); }
.campo input,.campo textarea,.campo select{
  padding:.85rem 1rem; border:1.5px solid var(--borde); border-radius:var(--radio-sm);
  background:var(--blanco); font-size:var(--t-sm); width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none; border-color:var(--dorado); box-shadow:0 0 0 3px rgba(233,147,11,.18);
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo__ayuda{ font-size:var(--t-xs); color:var(--texto-suave); }
.form__fila{ display:grid; gap:var(--e-2); grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .form__fila{ grid-template-columns:1fr; } }

/* ---------- 18. DATOS DE CONTACTO --------------------------------------- */
.datos{ display:grid; gap:var(--e-2); }
.dato{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1rem; border-radius:var(--radio);
  background:rgba(255,255,255,.05); border:1px solid var(--borde-osc);
  text-decoration:none; transition:background-color .25s var(--ease), transform .25s var(--ease);
}
a.dato:hover{ background:rgba(255,255,255,.1); transform:translateX(4px); }
.dato__ico{ width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center; background:rgba(255,201,60,.16); font-size:1.15rem; }
.dato__etq{ display:block; font-size:var(--t-xs); color:var(--texto-inv-s); letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.dato__val{ display:block; font-weight:600; font-size:var(--t-sm); color:#fff; word-break:break-word; }
.seccion--blanca .dato{ background:var(--crema); border-color:var(--borde); }
.seccion--blanca .dato__etq{ color:var(--texto-suave); }
.seccion--blanca .dato__val{ color:var(--texto); }

/* ---------- 19. FLOTANTES ----------------------------------------------- */
.flotantes{
  position:fixed; right:clamp(.8rem,2.5vw,1.5rem); bottom:clamp(.8rem,2.5vw,1.5rem);
  z-index:880; display:flex; flex-direction:column; gap:.7rem; align-items:flex-end;
}
.wa{
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 24px -6px rgba(37,211,102,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); position:relative;
}
.wa:hover{ transform:scale(1.09); box-shadow:0 12px 30px -6px rgba(37,211,102,.75); }
.wa svg{ width:29px; height:29px; }
.wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:onda 2.4s var(--ease) infinite;
}
@keyframes onda{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.55);opacity:0} }

/* Barra fija móvil con Donar siempre visible */
.barra-movil{
  display:none; position:fixed; inset:auto 0 0 0; z-index:885;
  background:rgba(251,246,239,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--borde);
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  gap:.5rem;
}
.barra-movil .btn{ flex:1; padding:.85rem 1rem; }

@media (max-width:900px){
  .menu{ display:none; }
  .hamburguesa{ display:flex; }
  .nav__acciones .btn--primario{ display:none; }
  .barra-movil{ display:flex; }
  .flotantes{ bottom:calc(4.6rem + env(safe-area-inset-bottom)); }
  body{ padding-bottom:0; }
}

/* En móvil los botones del hero ocupan el mismo ancho: se leen como un par */
@media (max-width:560px){
  .hero .btn-fila{ flex-direction:column; align-items:stretch; }
  .hero .btn-fila .btn{ width:100%; }
  .barra-movil .btn{ font-size:.8rem; padding:.85rem .6rem; }
}

/* ---------- 20. PIE ------------------------------------------------------ */
.pie{ background:var(--noche); color:var(--texto-inv-s); padding-block:var(--e-6) var(--e-3); }
.pie__grid{
  display:grid; gap:var(--e-4);
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  padding-bottom:var(--e-4); border-bottom:1px solid var(--borde-osc);
}
@media (max-width:900px){ .pie__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pie__grid{ grid-template-columns:1fr; gap:var(--e-3); } }
.pie h4{
  font-family:var(--f-texto); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dorado-cl);
  margin-bottom:var(--e-2);
}
.pie ul{ display:grid; gap:.55rem; }
.pie a{ text-decoration:none; font-size:var(--t-sm); transition:color .2s var(--ease); }
.pie a:hover{ color:var(--dorado-cl); }
.pie__legal{
  display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-3);
  justify-content:space-between; align-items:center;
  padding-top:var(--e-3); font-size:var(--t-xs);
}
.pie__nit{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.06); border:1px solid var(--borde-osc);
  padding:.4rem .85rem; border-radius:100px; font-size:var(--t-xs);
}
.redes{ display:flex; gap:.6rem; }
.redes a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid var(--borde-osc);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.redes a:hover{ background:var(--dorado-cl); color:var(--noche); transform:translateY(-3px); }
.redes svg{ width:19px; height:19px; }

/* ---------- 21. ANIMACIÓN DE APARICIÓN ---------------------------------- */
.revelar{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.revelar.visible{ opacity:1; transform:none; }
.revelar[data-retraso="1"]{ transition-delay:.08s; }
.revelar[data-retraso="2"]{ transition-delay:.16s; }
.revelar[data-retraso="3"]{ transition-delay:.24s; }
.revelar[data-retraso="4"]{ transition-delay:.32s; }
.revelar[data-retraso="5"]{ transition-delay:.4s; }

/* Respeto absoluto por quien pide menos movimiento (WCAG 2.3.3) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .revelar{ opacity:1; transform:none; }
  .hero__haz{ display:none; }
}

/* ---------- 22. UTILIDADES ---------------------------------------------- */
.grid-2{ display:grid; gap:clamp(1.5rem,5vw,4rem); grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:840px){ .grid-2{ grid-template-columns:1fr; } }
.grid-2--lateral{ grid-template-columns:1fr 1.3fr; align-items:start; }
@media (max-width:840px){ .grid-2--lateral{ grid-template-columns:1fr; } }
.mt-3{ margin-top:var(--e-3); } .mt-4{ margin-top:var(--e-4); } .mt-5{ margin-top:var(--e-5); }
.mb-3{ margin-bottom:var(--e-3); } .mb-4{ margin-bottom:var(--e-4); }
.centro{ text-align:center; margin-inline:auto; }
.media-redonda{ border-radius:var(--radio-lg); overflow:hidden; box-shadow:var(--sombra); }
.media-redonda img{ width:100%; height:100%; object-fit:cover; }
.ratio-4-3{ aspect-ratio:4/3; } .ratio-1-1{ aspect-ratio:1/1; } .ratio-3-4{ aspect-ratio:3/4; }