/* =========================================================
   Fundación Colindres — Capa v3: movimiento y detalle
   Intro de marca, transiciones de página, progreso de lectura,
   cielo animado, revelados con desenfoque y cortina, tilt 3D,
   línea de tiempo dibujada, mapa, legado, compromisos, compartir.
   ========================================================= */

/* ---------- Tipografía fina ---------- */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.h2,.h1{font-variation-settings:"SOFT" 60,"WONK" 0}
.hero__slogan,.quote-band blockquote{font-variation-settings:"SOFT" 100,"WONK" 1}
.lead{font-weight:500}

/* ---------- Accesibilidad ---------- */
.skip{position:fixed;left:16px;top:-60px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--green-dark);color:#fff;font-weight:700;transition:top .2s}
.skip:focus{top:16px}

/* ---------- Transición entre páginas ---------- */
html.leaving body{opacity:0;transform:translateY(-8px);transition:opacity .22s ease, transform .22s ease}
body{transition:opacity .3s ease}

/* ---------- Progreso de lectura ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--green),var(--gold));box-shadow:0 0 12px rgba(214,163,58,.6);transition:width .12s linear}
.header::after{opacity:.25}

/* ---------- Header: se oculta al bajar, vuelve al subir ---------- */
.header{transition:transform .45s var(--ease), border-color .3s, box-shadow .3s, background .3s}
.header.is-hidden{transform:translateY(-100%)}

/* ---------- Intro de marca ---------- */
.loader{display:none;position:fixed;inset:0;z-index:300;place-items:center;background:var(--green-dark);color:#fff}
html.intro .loader{display:grid}
html.intro.intro-done .loader{animation:loader-out .7s var(--ease) forwards}
html.intro:not(.intro-done){overflow:hidden}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.loader__inner img{width:72px;height:72px;border-radius:50%;background:#fff;padding:4px;animation:loader-pop .8s var(--ease) both}
.loader__word{font-size:.72rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);animation:rise .8s .25s var(--ease) both;opacity:0}
.loader__bar{width:140px;height:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--gold);animation:loader-bar 1.2s .2s var(--ease) forwards}
@keyframes loader-pop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes loader-bar{to{width:100%}}
@keyframes loader-out{to{opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0)}}
/* Mientras la intro está activa, el hero espera para animar */
html.intro:not(.intro-done) .hero__title span,
html.intro:not(.intro-done) .hero__kicker,
html.intro:not(.intro-done) .hero__slogan,
html.intro:not(.intro-done) .hero__actions{animation-play-state:paused}

/* ---------- Cielo animado ---------- */
.scene__clouds{animation:drift 60s linear infinite}
.hero__scene .scene__clouds{animation-duration:90s}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(60px)}}
.scene__clouds{animation-direction:alternate;animation-timing-function:ease-in-out}
.scene__birds{animation:fly 26s ease-in-out infinite alternate}
@keyframes fly{from{transform:translate(-40px,10px)}to{transform:translate(60px,-18px)}}
.hero__scene circle[r="230"]{animation:breathe 6s ease-in-out infinite;transform-origin:600px 440px;transform-box:view-box}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}
.hero__title .n{
  background:linear-gradient(110deg,var(--gold-soft) 0%,#fff 45%,var(--gold) 55%,var(--gold-soft) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rise .9s .34s var(--ease) forwards, shimmer 5s 1.6s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ---------- Revelados con desenfoque y cortina ---------- */
.reveal-up{opacity:0;transform:translateY(26px);filter:blur(10px);transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease)}
.reveal-up.is-in{opacity:1;transform:none;filter:blur(0)}
.wipe{position:relative;overflow:hidden}
.wipe::before{
  content:"";position:absolute;inset:0;z-index:5;background:var(--green);
  transform:scaleX(1);transform-origin:right;transition:transform .9s var(--ease) .1s;
}
.wipe > *{opacity:0;transform:scale(1.08);transition:opacity .6s .5s, transform 1.4s var(--ease) .3s}
.wipe.is-in::before{transform:scaleX(0)}
.wipe.is-in > *{opacity:1;transform:none}

/* ---------- Tilt 3D (solo puntero fino) ---------- */
@media (hover:hover) and (pointer:fine){
  .tilt{transform-style:preserve-3d;transition:transform .35s var(--ease), box-shadow .35s}
  .tilt.is-tilting{transition:transform .08s linear, box-shadow .35s}
  .tilt > *{transform:translateZ(0)}
  .tilt::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;
    background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 45%);
  }
  .tilt.is-tilting::before{opacity:1}
  .magnet{transition:transform .25s var(--ease)}
}

/* ---------- Números de sección ---------- */
.section-head{position:relative}
.section-num{
  position:absolute;left:-8px;top:-46px;z-index:-1;font-family:var(--font-display);font-weight:500;
  font-size:7rem;line-height:1;color:rgba(23,107,69,.06);letter-spacing:-.04em;pointer-events:none;user-select:none;
}
.section-head.center .section-num{left:50%;transform:translateX(-50%)}

/* ---------- Checklist de compromisos ---------- */
.checklist{display:grid;gap:12px}
.check{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line-soft);transition:transform .3s var(--ease), box-shadow .3s}
.check:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.check__box{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.check__box svg{width:20px;height:20px}
.check__path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s var(--ease) .35s}
.check.is-in .check__path{stroke-dashoffset:0}
.check b{display:block;color:var(--green-dark);font-weight:800;margin-bottom:2px}
.check p{font-size:.95rem;color:var(--ink-2)}

/* ---------- Línea de tiempo que se dibuja ---------- */
.timeline::before{background:var(--line)}
.timeline::after{
  content:"";position:absolute;left:31px;top:30px;width:2px;height:calc(var(--tl,0) * 1%);max-height:calc(100% - 60px);
  background:linear-gradient(var(--green),var(--gold));transition:height .25s linear;border-radius:2px;
}
@media (max-width:560px){.timeline::after{left:23px}}
.tl-item__num{transition:background .4s, color .4s, box-shadow .4s, transform .4s var(--ease)}
.tl-item.is-in .tl-item__num{background:var(--green);color:#fff;transform:scale(1.06)}

/* ---------- Tarjeta de legado ---------- */
.legacy{
  display:grid;grid-template-columns:320px 1fr;gap:clamp(28px,5vw,64px);align-items:center;
  background:linear-gradient(135deg,#fff,var(--green-tint));border:1px solid var(--line-soft);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,48px);box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.legacy::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(214,163,58,.18),transparent 65%)}
@media (max-width:860px){.legacy{grid-template-columns:1fr;text-align:center}.legacy__photo{margin-inline:auto}.legacy__pills{justify-content:center}.legacy .eyebrow{justify-content:center}}
.legacy__photo{
  position:relative;width:min(320px,100%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#F3F8EF,#CFE3CF 70%,#B6D4BB);box-shadow:inset 0 0 0 10px #fff, var(--shadow-md);
}
.legacy__ring{position:absolute;inset:-10px;border-radius:50%;border:1.5px dashed rgba(214,163,58,.7);animation:spin 40s linear infinite}
.legacy__mono{font-family:var(--font-display);font-weight:500;font-size:clamp(4rem,9vw,6.5rem);color:var(--green);letter-spacing:-.04em;font-variation-settings:"SOFT" 100}
.legacy__photo .scene__chip{left:50%;transform:translateX(-50%);bottom:26px}
.legacy__body h2{margin:10px 0 12px}
.legacy__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---------- Mapa ---------- */
.map{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,48px);align-items:center;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-md)}
@media (max-width:860px){.map{grid-template-columns:1fr}}
.map__info h2{margin:10px 0 12px}
.map__coords{display:inline-flex;align-items:center;gap:12px;margin:18px 0 16px;padding:10px 16px;border-radius:999px;background:var(--green-soft);font-weight:700;font-size:.88rem;color:var(--green-dark)}
.ping{position:relative;width:12px;height:12px;display:grid;place-items:center}
.ping i{width:10px;height:10px;border-radius:50%;background:var(--gold)}
.ping::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);animation:pulse 1.8s ease-out infinite}
.map__frame{position:relative;aspect-ratio:16/11;border-radius:20px;overflow:hidden;background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--line)}
.map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) contrast(1.02)}
.map__frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 40px rgba(23,79,58,.18)}

/* ---------- CTA con malla animada ---------- */
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;opacity:.7}
.cta::before{width:380px;height:380px;left:-120px;top:-140px;background:rgba(46,138,91,.9);animation:blob 14s ease-in-out infinite alternate}
.cta::after{width:320px;height:320px;right:-100px;bottom:-140px;background:rgba(214,163,58,.55);animation:blob 18s ease-in-out infinite alternate-reverse}
@keyframes blob{to{transform:translate(60px,40px) scale(1.15)}}
.cta > *{position:relative;z-index:1}

/* ---------- Compartir + toast ---------- */
.connect__share{margin-top:22px}
.toast{
  position:fixed;left:50%;bottom:92px;z-index:150;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:999px;background:var(--green-dark);color:#fff;font-weight:700;font-size:.9rem;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.45);transition:opacity .3s, transform .3s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Volver arriba ---------- */
.totop{
  position:fixed;right:22px;bottom:92px;z-index:69;width:46px;height:46px;border-radius:50%;
  background:#fff;color:var(--green-dark);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s, transform .3s var(--ease), background .2s;
}
.totop svg{width:18px;height:18px}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--green-soft)}
@media (max-width:560px){.totop{right:24px;bottom:90px}}

/* ---------- Pulido de componentes ---------- */
.social{position:relative;overflow:hidden}
.social::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(23,107,69,.05),transparent);transform:translateX(-100%);transition:transform .7s var(--ease)}
.social:hover::before{transform:translateX(100%)}
.phase--active .state{display:inline-flex;align-items:center;gap:8px}
.badge i{animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(214,163,58,.25)}50%{box-shadow:0 0 0 6px rgba(214,163,58,.12)}}
.nav__links a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1)}
@media (max-width:860px){.nav__links a::after{display:none}}
.pillar__icon svg{transition:transform .5s var(--ease)}
.pillar:hover .pillar__icon svg{transform:translateY(-4px) scale(1.06)}
.hero__scroll{animation:rise .9s 1.1s var(--ease) both}
.footer__pill,.wa-float{overflow:hidden}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal-up,.wipe > *{opacity:1;transform:none;filter:none}
  .wipe::before{display:none}
  .loader{display:none !important}
  html.intro{overflow:auto}
  .hero__title span,.hero__kicker,.hero__slogan,.hero__actions,.hero__scroll{opacity:1;animation:none}
  .timeline::after{height:calc(100% - 60px)}
}

/* ---------- Chip de dimensiones en banners ---------- */
.hero__chip{position:absolute;right:18px;bottom:18px;left:auto;z-index:3}
.hero .hero__chip{bottom:22px;right:22px}
@media (max-width:560px){.hero__chip{display:none}}
/* Header más sólido para que el logo no se vea sobre el contenido */
.header{background:rgba(255,255,255,.95)}
.header.is-scrolled{background:rgba(255,255,255,.98)}