/* =========================================================
   Home 2026 — estilos de la plantilla home/template-home.php
   Todo está encapsulado en .ldt-home. Colores: variables --cv-* de citiverse.css.
   Tipografías: Quantico e Inter, ya cargadas por el sitio (pesos 400/600/700).
   ========================================================= */

/* Salient deja body con overflow:hidden (el scroll lo hace <html>). Eso convierte a body en
   contenedor de scroll y anula position:sticky. En esta plantilla se recorta solo en horizontal. */
body.ldt-home-page{overflow:visible!important;overflow-x:clip!important}

.ldt-home{
  /* Derivados de los tokens (transparencias, no colores nuevos) */
  --ldt-ink-ghost:rgba(7,26,51,.16);
  --ldt-blue-glow:rgba(7,70,144,.28);
  --ldt-mint-glow:rgba(158,212,208,.55);
  --ldt-display:"Quantico","Inter","Open Sans",sans-serif;
  --ldt-text:"Inter","Open Sans",sans-serif;
  --ldt-gutter:clamp(20px,2.8vw,40px);
  --ldt-maxw:1440px;
  /* Alto real de la cabecera fija de Salient (+ barra de admin). home.js lo actualiza. */
  --ldt-h:88px;

  display:block;position:relative;background:#fff;color:var(--cv-ink);
  font-family:var(--ldt-text);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
.ldt-home *,.ldt-home *::before,.ldt-home *::after{box-sizing:border-box}
.ldt-home img{max-width:100%;display:block}
.ldt-home a{color:inherit}
.ldt-home :focus-visible{outline:2px solid var(--cv-blue);outline-offset:3px}
/* Neutraliza márgenes y tamaños globales de Salient dentro de la plantilla */
.ldt-home h1,.ldt-home h2,.ldt-home h3,.ldt-home p,.ldt-home blockquote,.ldt-home figure,.ldt-home ul{margin:0;padding:0}
.ldt-home blockquote{border:0;quotes:none}
.ldt-home blockquote::before,.ldt-home blockquote::after{content:none}
.ldt-home ul{list-style:none}
.ldt-home .ldt-wrap{max-width:var(--ldt-maxw);margin:0 auto;padding:0 var(--ldt-gutter);width:100%}

/* Etiqueta de sección con filete */
.ldt-home .ldt-section-label{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--cv-line);padding-bottom:.7rem;margin:0 0 clamp(20px,3vw,40px);
  font:600 .8rem/1.2 var(--ldt-text);letter-spacing:.02em;color:var(--cv-muted);
}

/* Enlaces */
.ldt-home .ldt-text-link{
  display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;
  font:600 1rem/1.4 var(--ldt-text);border-bottom:1px solid var(--cv-ink);padding-bottom:.2rem;
}
.ldt-home .ldt-text-link:hover{color:var(--cv-blue);border-color:var(--cv-blue)}
.ldt-home .ldt-rich a{color:var(--cv-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ldt-home .ldt-rich p{margin:0 0 1.2rem;padding:0}

/* =========================================================
   Manchas de degradado
   ========================================================= */
/* Sin filter:blur (en Safari repinta en cada frame de scroll); el degradado radial ya es difuso */
.ldt-home .ldt-glow{position:absolute;pointer-events:none;border-radius:50%;will-change:transform}
.ldt-home .ldt-glow--hero{
  width:min(90vw,1200px);aspect-ratio:1.3;left:-18vw;top:-30vh;
  background:radial-gradient(closest-side, rgba(7,70,144,.42), transparent 78%);
  animation:ldt-drift 18s ease-in-out infinite alternate;
}
.ldt-home .ldt-glow--hero-2{
  width:min(70vw,960px);aspect-ratio:1.1;right:-14vw;bottom:-28vh;
  background:radial-gradient(closest-side, rgba(158,212,208,.9), transparent 78%);
  animation:ldt-drift 22s ease-in-out infinite alternate-reverse;
}
.ldt-home .ldt-glow--hero-3{
  width:min(50vw,680px);aspect-ratio:1;right:6vw;top:-12vh;
  background:radial-gradient(closest-side, rgba(7,70,144,.18), transparent 78%);
  animation:ldt-drift 26s ease-in-out infinite alternate;
}
@media (max-width:600px){
  .ldt-home .ldt-glow--hero{width:170vw;left:-60vw;top:-18vh}
  .ldt-home .ldt-glow--hero-2{width:150vw;right:-55vw;bottom:-14vh}
  .ldt-home .ldt-glow--hero-3{width:110vw;right:-30vw;top:10vh}
}
@keyframes ldt-drift{to{transform:translate3d(6vw,5vh,0) scale(1.08)}}

/* =========================================================
   1. Hero
   ========================================================= */
.ldt-home .ldt-hero{
  position:relative;min-height:calc(100vh - var(--ldt-h));min-height:calc(100svh - var(--ldt-h));
  display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(180deg, rgba(158,212,208,.14), rgba(255,255,255,0) 70%), #fff;
}
.ldt-home .ldt-hero .ldt-wrap{position:relative}
/* Hero con animación del logo: logo a la izquierda, H1 a la derecha */
.ldt-home .ldt-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center}
.ldt-home .ldt-hero__logo{position:relative;width:100%}
/* El vídeo tiene fondo blanco: multiply lo funde con el degradado del hero */
.ldt-home .ldt-hero__video{display:block;width:100%;height:auto;max-height:calc(100svh - var(--ldt-h) - 120px);object-fit:contain;background:transparent;mix-blend-mode:multiply}
.ldt-home .ldt-hero__grid .ldt-hero__title{font-size:clamp(2.2rem,4vw,5.4rem);max-width:none}
@media (max-width:800px){
  .ldt-home .ldt-hero__grid{grid-template-columns:1fr;gap:12px}
  .ldt-home .ldt-hero__logo{max-width:420px}
}
.ldt-home .ldt-hero__title{
  font:400 clamp(2.6rem,7.2vw,6.6rem)/1.02 var(--ldt-display);letter-spacing:-.01em;
  color:var(--cv-ink);max-width:14ch;text-transform:none;
}
@media (max-width:999px){
  .ldt-home .ldt-hero__title{
    max-width:none;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .ldt-home .ldt-line,
  .ldt-home .ldt-line > span{
    text-align:center;
  }
}
.ldt-home .ldt-line{display:block;overflow:hidden}
.ldt-home .ldt-line > span{display:block;transform:translateY(105%);animation:ldt-rise 1.1s cubic-bezier(.2,.7,.1,1) forwards}
.ldt-home .ldt-line:nth-child(2) > span{animation-delay:.14s}
.ldt-home .ldt-line:nth-child(3) > span{animation-delay:.28s}
.ldt-home .ldt-line:nth-child(4) > span{animation-delay:.42s}
@keyframes ldt-rise{to{transform:none}}
.ldt-home .ldt-scroll-cue{
  position:absolute;left:var(--ldt-gutter);bottom:28px;
  font:400 .8rem var(--ldt-text);color:var(--cv-muted);display:flex;align-items:center;gap:.6rem;
}
.ldt-home .ldt-scroll-cue::before{content:"";width:1px;height:38px;background:var(--cv-ink);transform-origin:top;animation:ldt-cue 2.2s ease-in-out infinite}
@keyframes ldt-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* Palabras que se revelan con el scroll */
.ldt-home .ldt-word{transition:color .3s ease}

/* =========================================================
   2. Vídeo que se abre a pantalla completa + panel azul con la frase
   ========================================================= */
.ldt-home .ldt-media{position:relative;height:340vh}
.ldt-home .ldt-media__sticky{position:sticky;top:var(--ldt-h);height:calc(100vh - var(--ldt-h));height:calc(100svh - var(--ldt-h));overflow:hidden}
.ldt-home .ldt-media__frame{
  position:absolute;inset:0;overflow:hidden;background:var(--cv-ink);
  /* El marco crece con transform (lo resuelve la GPU, también en Safari) en lugar de clip-path */
  transform:scale(var(--fx,.56),var(--fy,.64));transform-origin:50% 50%;will-change:transform;
}
.ldt-home .ldt-media__video{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;
  /* Contraescala: el vídeo no se deforma aunque el marco escale distinto en cada eje */
  transform:scale(var(--vx,2.1),var(--vy,1.84));transform-origin:50% 50%;will-change:transform;
}
.ldt-home .ldt-media__shade{position:absolute;inset:0;background:var(--cv-ink);opacity:var(--shade,0);pointer-events:none;will-change:opacity}
.ldt-home .ldt-media__panel{
  position:absolute;top:24px;left:var(--ldt-gutter);width:min(48vw,700px);
  background:var(--cv-blue);color:#fff;padding:clamp(28px,3.2vw,52px);
  opacity:var(--panel-o,0);transform:translateY(calc(var(--panel-y,48) * 1px));will-change:transform,opacity;
}
.ldt-home .ldt-media__text{font:400 clamp(1.5rem,2.7vw,2.7rem)/1.2 var(--ldt-display);color:#fff}
.ldt-home .ldt-media__text .ldt-word{color:rgba(255,255,255,.28)}
.ldt-home .ldt-media__text .ldt-word.on{color:#fff}

/* =========================================================
   3. ¿Por qué?
   ========================================================= */
.ldt-home .ldt-split{padding:clamp(80px,12vw,180px) 0}
.ldt-home .ldt-split__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,6vw,96px);align-items:start}
.ldt-home .ldt-split h2{font:400 clamp(1.7rem,3vw,2.6rem)/1.15 var(--ldt-display);color:var(--cv-ink);max-width:16ch;letter-spacing:0}
.ldt-home .ldt-split .ldt-rich p{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.6;max-width:58ch;color:var(--cv-ink)}

/* =========================================================
   4. About / EDIC — foto a pantalla completa + paneles a la derecha
   ========================================================= */
.ldt-home .ldt-sp{position:relative;height:300vh}
.ldt-home .ldt-sp__sticky{position:sticky;top:var(--ldt-h);height:calc(100vh - var(--ldt-h));height:calc(100svh - var(--ldt-h));overflow:hidden;background:var(--cv-ink)}
.ldt-home .ldt-sp__photo{position:absolute;inset:0}
.ldt-home .ldt-sp__photo img{width:100%;height:100%;max-width:none;object-fit:cover}
.ldt-home .ldt-sp__panels{position:absolute;top:24px;right:var(--ldt-gutter);width:min(40vw,620px);display:flex;flex-direction:column}
.ldt-home .ldt-sp__panel{
  padding:clamp(28px,3.2vw,52px);display:flex;flex-direction:column;
  transform:translateX(calc(var(--sp-x,1) * (100% + var(--ldt-gutter) + 8px)));will-change:transform;
}
.ldt-home .ldt-sp__panel--a{background:var(--cv-blue);color:#fff;--sp-x:var(--sp-a,1)}
.ldt-home .ldt-sp__panel--b{background:var(--cv-mint);color:var(--cv-ink);--sp-x:var(--sp-b,1)}
.ldt-home .ldt-sp__panel h2{font:400 clamp(1.5rem,2.2vw,2.1rem)/1.15 var(--ldt-display);margin:0 0 1rem;color:inherit;letter-spacing:0}
.ldt-home .ldt-sp__panel .ldt-rich p{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.55;max-width:46ch;color:inherit}
.ldt-home .ldt-sp__panel--a .ldt-rich a{color:var(--cv-mint)}
.ldt-home .ldt-sp__panel--b .ldt-rich a{color:var(--cv-blue)}
.ldt-home .ldt-sp__panel--a .ldt-text-link{border-color:#fff;align-self:flex-start;color:#fff}
.ldt-home .ldt-sp__panel--a .ldt-text-link:hover{color:var(--cv-mint);border-color:var(--cv-mint)}
@media (max-width:700px){
  .ldt-home .ldt-sp__panels{left:var(--ldt-gutter);width:auto;top:8px}
  .ldt-home .ldt-sp__panel{padding:22px}
}

/* =========================================================
   5. Cita — texto sobre la foto; la foto se apaga al entrar el texto
   ========================================================= */
.ldt-home .ldt-quote-sec{position:relative;height:260vh}
.ldt-home .ldt-quote-sec__inner{position:sticky;top:var(--ldt-h);height:calc(100vh - var(--ldt-h));height:calc(100svh - var(--ldt-h));display:flex;align-items:center}
.ldt-home .ldt-quote{margin:0 auto;max-width:880px}
.ldt-home .ldt-quote__stage{position:relative;display:grid;align-items:center;font:400 clamp(1.45rem,3vw,2.6rem)/1.22 var(--ldt-display)}
.ldt-home .ldt-quote__stage > *{grid-area:1 / 1}
.ldt-home .ldt-quote__photo{
  position:relative;justify-self:center;aspect-ratio:681 / 737;overflow:hidden;background:var(--cv-blue);
  height:min(460px, calc(100svh - var(--ldt-h) - 160px));
  opacity:var(--photo-o,1);will-change:opacity;
}
.ldt-home .ldt-quote__photo img{width:100%;height:100%;object-fit:cover}
.ldt-home .ldt-quote__text{position:relative;z-index:1;text-align:left;font:inherit;letter-spacing:0;color:var(--cv-blue);padding:0;margin:0}
.ldt-home .ldt-quote__text--on-photo{color:#fff;pointer-events:none;opacity:var(--copy-o,1);will-change:opacity}
.ldt-home .ldt-quote .ldt-word{color:transparent;transition:color .35s ease}
.ldt-home .ldt-quote .ldt-word.on{color:var(--cv-blue)}
.ldt-home .ldt-quote .ldt-quote__text--on-photo .ldt-word.on{color:#fff}
.ldt-home .ldt-quote-by{
  position:relative;margin-top:1.6rem;text-align:center;font:400 .95rem/1.4 var(--ldt-text);color:var(--cv-blue);
  opacity:0;transform:translateY(8px);transition:.6s ease;
}
.ldt-home .ldt-quote-by.on{opacity:1;transform:none}
.ldt-home .ldt-quote-by strong{font-weight:600}
.ldt-home .ldt-quote-by span{color:var(--cv-muted)}
@media (max-width:600px){.ldt-home .ldt-quote__photo{height:auto;width:62%}}

/* =========================================================
   6. Country Members — mapa en relieve que se marca con el scroll
   ========================================================= */
.ldt-home .ldt-countries{position:relative;height:300vh}
.ldt-home .ldt-countries__sticky{position:sticky;top:var(--ldt-h);height:calc(100vh - var(--ldt-h));height:calc(100svh - var(--ldt-h));display:flex;align-items:center}
.ldt-home .ldt-countries__grid{display:grid;grid-template-columns:minmax(260px,4fr) 7fr;gap:clamp(24px,5vw,80px);align-items:center}
.ldt-home .ldt-countries__list,.ldt-home .ldt-countries__list li{list-style:none!important;margin:0;padding:0;background:none}
.ldt-home .ldt-countries__list li::marker{content:none}
.ldt-home .ldt-countries__list li::before{content:none!important;display:none!important}
.ldt-home .ldt-countries__list li{
  font:400 clamp(1.15rem,1.9vw,1.75rem)/1.32 var(--ldt-display);
  color:var(--ldt-ink-ghost);transition:color .45s ease;
}
.ldt-home .ldt-countries__list li.on{color:var(--cv-ink)}
.ldt-home .ldt-countries__list li.current{color:var(--cv-blue)}
.ldt-home .eu-map{width:100%;height:auto;max-height:calc(100svh - var(--ldt-h) - 140px);display:block;margin-left:auto;overflow:visible}
.ldt-home .eu-map__side{fill:var(--cv-muted);fill-opacity:.35;stroke:none;transform:translateY(6px)}
.ldt-home .eu-map__land{fill:var(--cv-line);stroke:#fff;stroke-width:1;stroke-linejoin:round}
.ldt-home .eu-map__lift path{
  fill:var(--cv-line);stroke:#fff;stroke-width:1;stroke-linejoin:round;
  transform:translateY(0);filter:drop-shadow(0 0 0 rgba(7,26,51,0));
  transition:transform .7s cubic-bezier(.2,.7,.1,1), filter .7s cubic-bezier(.2,.7,.1,1), fill .5s ease;
}
.ldt-home .eu-map__lift path.on{fill:var(--cv-blue);stroke:rgba(255,255,255,.55);transform:translateY(-12px);filter:drop-shadow(0 12px 0 var(--cv-ink))}
.ldt-home .eu-map__lift path.current{fill:var(--cv-mint);transform:translateY(-20px);filter:drop-shadow(0 20px 0 var(--cv-blue))}

/* =========================================================
   7. Noticias — fila WPBakery original (the_content); solo se ajusta el contenedor
   ========================================================= */
.ldt-news-wp.container-wrap{padding-top:0}
.ldt-footer-wp.container-wrap{padding:0}

/* =========================================================
   8. Llamada final (discreta)
   ========================================================= */
.ldt-home .ldt-cta{padding:clamp(48px,6vw,88px) 0}
.ldt-home .ldt-cta__row{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--cv-line);padding-top:clamp(20px,2.4vw,32px)}
.ldt-home .ldt-cta h2{font:400 clamp(1.3rem,2vw,1.75rem)/1.2 var(--ldt-display);color:var(--cv-ink);letter-spacing:0}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  .ldt-home .ldt-split__grid{grid-template-columns:1fr}
  .ldt-home .ldt-countries__grid{grid-template-columns:1fr;gap:16px}
  .ldt-home .ldt-countries__map{order:-1}
  .ldt-home .eu-map{max-height:40svh;margin:0 auto}
  .ldt-home .ldt-countries__list{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1rem}
  .ldt-home .ldt-countries__list li{font-size:1rem}
}
@media (max-width:600px){
  .ldt-home .ldt-countries__list{grid-template-columns:1fr 1fr}
  .ldt-home .ldt-countries__list li{font-size:.92rem}
  .ldt-home .ldt-media{height:260vh}
  .ldt-home .ldt-media__panel{left:var(--ldt-gutter);right:var(--ldt-gutter);width:auto;top:auto;bottom:24px}
}

/* =========================================================
   Movimiento reducido: todo visible y estático
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .ldt-home *,.ldt-home *::before,.ldt-home *::after{animation:none!important;transition:none!important}
  .ldt-home .ldt-line > span{transform:none}
  .ldt-home .ldt-media,.ldt-home .ldt-sp,.ldt-home .ldt-quote-sec,.ldt-home .ldt-countries{height:auto}
  .ldt-home .ldt-media__sticky,.ldt-home .ldt-sp__sticky,.ldt-home .ldt-quote-sec__inner,.ldt-home .ldt-countries__sticky{position:relative;top:auto;height:auto}
  .ldt-home .ldt-media__sticky{padding:0 0 60px}
  .ldt-home .ldt-media__frame{position:relative;transform:none;aspect-ratio:16/9}
  .ldt-home .ldt-media__video{transform:none}
  .ldt-home .ldt-media__panel{position:relative;inset:auto;width:auto;margin:-48px var(--ldt-gutter) 0;opacity:1;transform:none}
  .ldt-home .ldt-sp__sticky{min-height:100svh}
  .ldt-home .ldt-sp__panel{transform:none}
  .ldt-home .ldt-quote-sec__inner,.ldt-home .ldt-countries__sticky{padding:100px 0}
  .ldt-home .ldt-quote-by{opacity:1;transform:none}
  .ldt-home .ldt-countries__list li{color:var(--cv-ink)}
  .ldt-home .eu-map__lift path{fill:var(--cv-blue);transform:translateY(-12px);filter:drop-shadow(0 12px 0 var(--cv-ink))}
}

/* Diagnóstico (?ldt-test=static): estado final de todo, sin animaciones de scroll */
.ldt-home.ldt-test-static .ldt-media__frame,.ldt-home.ldt-test-static .ldt-media__video{transform:none}
.ldt-home.ldt-test-static .ldt-media__panel{opacity:1;transform:none}
.ldt-home.ldt-test-static .ldt-sp__panel{transform:none}

/* Safari (clase .ldt-pin puesta por home.js): fijado con position:fixed en lugar de sticky */
.ldt-home.ldt-pin .ldt-media__sticky,
.ldt-home.ldt-pin .ldt-sp__sticky,
.ldt-home.ldt-pin .ldt-quote-sec__inner,
.ldt-home.ldt-pin .ldt-countries__sticky{position:absolute;top:0;left:0;right:0;bottom:auto}
.ldt-home.ldt-pin .is-pinned{position:fixed!important;top:var(--ldt-h)!important;left:0;right:0}
.ldt-home.ldt-pin .is-after{top:auto!important;bottom:0!important}