/* ===========================================================
   NUBARA · estilos
   Paleta acuarela (cobalto + coral) · Fraunces + Manrope
   =========================================================== */

:root{
  --cobalt:#2F3A86;          /* texto/marca */
  --cobalt-deep:#1b2150;     /* fondo oscuro hero/contacto */
  --cobalt-deep-2:#2a3170;
  --primary:#3F4DA8;
  --accent:#E8503E;          /* coral */
  --accent-ink:#D2412F;
  --magenta:#D2528A;
  --violet:#8C5AA8;
  --cream:#FCF8F5;
  --surface:#ffffff;
  --text:#262446;
  --muted:#646185;
  --line:#ece2e4;

  --serif:"Fraunces", Georgia, serif;
  --sans:"Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;

  --container:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:var(--container);margin:0 auto;padding:0 32px;width:100%}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

/* ---------- Custom cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;mix-blend-mode:difference}
.cursor{width:40px;height:40px;border:1.5px solid #fff;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease)}
.cursor-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cursor.is-hover{width:64px;height:64px;background:rgba(255,255,255,.15)}
@media (hover:none),(max-width:760px){.cursor,.cursor-dot{display:none}}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;
  transition:background .4s var(--ease),padding .4s var(--ease),color .4s var(--ease);
  color:#fff;mix-blend-mode:normal;
}
.nav.scrolled{background:rgba(252,248,245,.85);backdrop-filter:blur(12px);padding:14px 32px;color:var(--cobalt);border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.brand-mark{width:24px;height:24px;border-radius:50%;background:conic-gradient(from 200deg,var(--accent),var(--magenta),var(--violet),var(--primary),var(--accent))}
.nav-links{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500}
.nav-links a{position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:currentColor;transition:width .3s var(--ease)}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{border:1.5px solid currentColor;padding:9px 18px;border-radius:999px;transition:background .3s,color .3s}
.nav.scrolled .nav-cta:hover{background:var(--cobalt);color:#fff}
.nav:not(.scrolled) .nav-cta:hover{background:#fff;color:var(--cobalt)}
.nav-toggle{display:none}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;
  background:radial-gradient(120% 120% at 70% 10%,var(--cobalt-deep-2),var(--cobalt-deep) 60%);
  color:#fff;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.hero-inner{position:relative;z-index:3;max-width:var(--container);margin:0 auto;padding:0 32px;width:100%}
.hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(80px,18vw,260px);line-height:.95;letter-spacing:-.03em;
  margin:.08em 0;
}
.hero-title .accent{color:var(--accent)}
.hero-sub{font-size:clamp(17px,2vw,22px);max-width:520px;color:rgba(255,255,255,.8);margin-top:18px;font-weight:400}

/* watercolor floating cards */
.hero-watercolor{position:absolute;inset:0;z-index:1}
.wc-card{position:absolute;border-radius:16px;filter:saturate(1.1);box-shadow:0 30px 80px rgba(0,0,0,.35);opacity:.92}
.wc-card::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 6px rgba(255,255,255,.9)}
/* tarjetas SOLO en la mitad derecha: el lado izquierdo queda libre para el texto */
.wc1{width:230px;height:300px;top:11%;right:7%;
  background:radial-gradient(40% 50% at 30% 30%,#E8503E,transparent 70%),radial-gradient(50% 55% at 75% 65%,#3F4DA8,transparent 70%),radial-gradient(45% 50% at 55% 80%,#D2528A,transparent 70%),#f3e7ef}
.wc2{width:175px;height:225px;bottom:18%;right:27%;
  background:radial-gradient(45% 50% at 60% 30%,#8C5AA8,transparent 70%),radial-gradient(50% 55% at 30% 70%,#2F3A86,transparent 70%),radial-gradient(40% 45% at 80% 80%,#E8503E,transparent 70%),#ece4f3}
.wc3{width:188px;height:188px;top:16%;right:24%;border-radius:50%;
  background:radial-gradient(45% 50% at 32% 30%,#E8503E,transparent 68%),radial-gradient(50% 55% at 72% 68%,#8C5AA8,transparent 72%),radial-gradient(44% 48% at 58% 82%,#D2528A,transparent 70%),radial-gradient(40% 44% at 22% 74%,#3F4DA8,transparent 70%),#f2e8f0}
.wc3::after{border-radius:50%}
.wc4{width:140px;height:185px;bottom:22%;right:11%;
  background:radial-gradient(45% 50% at 40% 35%,#3F4DA8,transparent 70%),radial-gradient(50% 55% at 70% 75%,#E8503E,transparent 70%),#efe7ef}
@media(max-width:760px){
  .wc4{display:none}
  .wc1{width:140px;height:185px;top:8%;right:-28px;opacity:.4}
  .wc2{width:120px;height:155px;bottom:10%;right:-22px;opacity:.4}
  .wc3{width:120px;height:120px;top:30%;right:-30px;opacity:.4}
}

/* scroll badge */
.scroll-badge{position:absolute;right:48px;bottom:48px;width:120px;height:120px;z-index:3;display:flex;align-items:center;justify-content:center}
.scroll-badge-text{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.scroll-badge-text text{fill:rgba(255,255,255,.75);font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:2px}
.scroll-badge-mouse{width:22px;height:34px;border:1.5px solid var(--accent);border-radius:12px;position:relative}
.scroll-badge-mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:6px;background:var(--accent);border-radius:2px;animation:wheel 1.6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wheel{0%,100%{opacity:0;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,8px)}}
@media(max-width:760px){.scroll-badge{right:24px;bottom:24px;width:88px;height:88px}}

/* ---------- shared headings ---------- */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.eyebrow-light{color:var(--accent)}
.display-mix{
  font-weight:800;font-size:clamp(40px,7vw,104px);line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--cobalt);display:flex;flex-direction:column;gap:.02em;
}
.display-mix .serif{font-family:var(--serif);font-weight:400;font-style:italic;text-transform:none;color:var(--accent);letter-spacing:-.01em}
.display-mix .sans{font-family:var(--sans)}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:500}

/* ---------- ABOUT ---------- */
.about{padding:140px 0 120px;background:var(--cream)}
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;margin-top:60px;align-items:start}
.about-lead{font-size:clamp(20px,2.4vw,28px);line-height:1.45;color:var(--text);font-weight:400}
.stats{list-style:none;display:flex;flex-direction:column;gap:26px}
.stats li{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:14px}
.stat-num{font-family:var(--serif);font-size:46px;font-weight:500;color:var(--cobalt);line-height:1}
.stat-label{font-size:14px;color:var(--muted);margin-top:4px}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- MARQUESINA ---------- */
.marquee{background:var(--cobalt);color:#fff;padding:22px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marquee 32s linear infinite}
.marquee-track span{font-family:var(--serif);font-size:clamp(26px,4vw,52px);font-weight:400;padding-right:.4em}
.marquee-track i{color:var(--accent);font-style:normal;padding:0 .25em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SERVICIOS ---------- */
.services{padding:130px 0;background:var(--cream)}
.section-head{max-width:760px;margin-bottom:64px}
.section-title{font-family:var(--serif);font-size:clamp(32px,4.6vw,60px);font-weight:500;line-height:1.05;letter-spacing:-.02em;color:var(--cobalt);margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px 30px 40px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;
  position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);transition:width .5s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(47,58,134,.12);border-color:transparent}
.card:hover::before{width:100%}
.card-num{font-family:var(--serif);font-size:15px;color:var(--accent);font-weight:500}
.card h3{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--cobalt);margin:18px 0 12px;line-height:1.15}
.card p{font-size:15.5px;color:var(--muted);line-height:1.55}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

/* ---------- HIGHLIGHT (consulta exprés) ---------- */
.highlight{padding:130px 0;background:linear-gradient(160deg,var(--cobalt),var(--primary));color:#fff}
.highlight-inner{max-width:900px}
.highlight-title{font-weight:800;font-size:clamp(34px,5.4vw,76px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin:18px 0 24px}
.highlight-title .serif{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:#ffd9ce}
.highlight-text{font-size:clamp(17px,2vw,21px);max-width:640px;color:rgba(255,255,255,.85);margin-bottom:34px}
.highlight-text strong{color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:16px 30px;border-radius:14px;font-weight:600;font-size:16px;transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s;border:1.5px solid transparent}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(232,80,62,.4)}
.btn-light{background:#fff;color:var(--cobalt)}
.btn-light:hover{transform:translateY(-3px)}
.btn-ghost-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--cobalt)}

/* ---------- CONTACTO ---------- */
.contact{padding:140px 0 0;background:radial-gradient(120% 120% at 30% 0%,var(--cobalt-deep-2),var(--cobalt-deep) 65%);color:#fff}
.contact-title{font-family:var(--serif);font-weight:500;font-size:clamp(48px,9vw,150px);line-height:.98;letter-spacing:-.03em;margin:16px 0 40px}
.contact-title .accent{color:var(--accent)}
.contact-actions{display:flex;gap:16px;flex-wrap:wrap;padding-bottom:120px}
.footer{border-top:1px solid rgba(255,255,255,.15);padding:30px 32px;display:flex;justify-content:space-between;font-size:14px;color:rgba(255,255,255,.6);max-width:var(--container);margin:0 auto;flex-wrap:wrap;gap:10px}

/* ---------- reveals ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-mask{display:block;overflow:hidden}
.reveal-line{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.in .reveal-line,.reveal-line.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-line{opacity:1 !important;transform:none !important;transition:none}
  .marquee-track,.scroll-badge-text,.scroll-badge-mouse::after,.collage-marquee-track{animation:none}
}

/* ===========================================================
   SECCIONES ANCLADAS (pinned / scroll-driven) — estilo jopecuro
   =========================================================== */

/* ---------- A. Imagen fija + textos que cambian ---------- */
.pin-story{position:relative;height:400vh;background:var(--cobalt-deep);color:#fff}
.pin-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.pin-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;width:100%}
.pin-media{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.pin-media-inner{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:url(images/proceso/01-claridad.webp);  /* default (móvil); JS lo cambia por paso */
  transform-origin:0 0;transition:transform .25s linear,opacity .5s var(--ease)}
.pin-counter{position:absolute;left:22px;bottom:20px;font-family:var(--serif);font-size:18px;color:rgba(255,255,255,.85);letter-spacing:.05em;mix-blend-mode:difference}
.pin-counter b{color:var(--accent);font-weight:500}
.pin-texts{position:relative;min-height:300px}
.pin-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(46px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.pin-text.is-active{opacity:1;transform:none}
.pin-text .eyebrow{color:var(--accent);margin-bottom:18px}
.pin-text h3{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.5vw,82px);line-height:1;letter-spacing:-.02em;margin-bottom:22px}
.pin-text .pin-p{font-size:clamp(17px,1.7vw,21px);color:rgba(255,255,255,.78);max-width:480px;line-height:1.5}
.pin-fig{display:none}  /* solo móvil: foto por bloque */
@media(max-width:860px){
  .pin-story{height:auto}
  .pin-sticky{position:static;height:auto;padding:72px 0}
  .pin-layout{grid-template-columns:1fr;gap:0}
  .pin-media{display:none}                 /* en móvil cada bloque trae su propia foto */
  .pin-texts{position:static;min-height:0;display:grid;gap:70px}
  .pin-text{position:static;opacity:1;transform:none}
  /* foto editorial arriba de cada valor */
  .pin-fig{display:block;position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
    margin-bottom:22px;box-shadow:0 24px 60px rgba(0,0,0,.38)}
  .pin-fig::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;
    transform:scale(1.1);transform-origin:0 0}   /* recorta la marca de agua */
  .pf1::before{background-image:url(images/proceso/01-claridad.webp)}
  .pf2::before{background-image:url(images/proceso/02-tranquilidad.webp)}
  .pf3::before{background-image:url(images/proceso/03-cercania.webp)}
  .pf4::before{background-image:url(images/proceso/04-experiencia.webp)}
  .pin-text h3{margin-bottom:14px}
}

/* ---------- B. Showcase: título anclado + visuales que scrolean ---------- */
.showcase{position:relative;background:var(--cream);isolation:isolate}
.showcase-blend{display:none}
.svc-m{display:none}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.showcase-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:26px}
.showcase-titles{position:relative;display:flex;flex-direction:column;gap:4px}
.showcase-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,46px);line-height:1.18;letter-spacing:-.02em;color:var(--cobalt);opacity:.22;transition:opacity .45s var(--ease);display:flex;align-items:baseline;gap:14px}
.showcase-title.is-active{opacity:1}
.sc-num{font-family:var(--serif);font-size:15px;color:var(--accent)}
.showcase-desc{max-width:400px;color:var(--muted);font-size:17px;line-height:1.55;transition:opacity .4s var(--ease)}
.showcase-scroller{display:flex;flex-direction:column;gap:90px;padding:32vh 0}
.showcase-visual{position:relative}
.sv-art{position:relative;height:78vh;border-radius:22px;overflow:hidden;display:flex;align-items:flex-end;padding:34px;box-shadow:0 30px 70px rgba(47,58,134,.16)}
.sv-art span{position:relative;z-index:3;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,44px);color:#fff}
/* imagen con zoom anclado arriba-izquierda → recorta la marca de agua (abajo-derecha) */
.sv-art::before{content:"";position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;transform:scale(1.1);transform-origin:0 0}
.sv-art::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(18,22,60,.62),rgba(18,22,60,.05) 52%)}
.sv-desc{display:none}
.sc-head-m{display:none}
.sv1 .sv-art::before{background-image:url(images/servicios/01-padron.webp)}
.sv2 .sv-art::before{background-image:url(images/servicios/02-consulta-expres.webp)}
.sv3 .sv-art::before{background-image:url(images/servicios/03-clasificacion-arancelaria.webp)}
.sv4 .sv-art::before{background-image:url(images/servicios/04-calculo-impuestos.webp)}
@media(max-width:860px){
  /* en móvil: igual que jopecuro -> se MANTIENE el anclado.
     Encabezado fijo compacto que muestra solo el servicio activo;
     los visuales grandes scrolean debajo y van sincronizando el título. */
  .showcase-grid{grid-template-columns:1fr;gap:0}
  /* franja superior fija: rótulo + descripción, también con efecto "negativo" */
  .showcase-sticky{position:sticky;top:52px;height:auto;justify-content:flex-start;
    padding:14px 0 12px;background:transparent;z-index:6;gap:6px;
    mix-blend-mode:difference;pointer-events:none}
  .showcase-sticky .eyebrow{color:#fff}
  .showcase-titles{display:none}                       /* el nombre se muestra como título "negativo" */
  .showcase-desc{font-size:15px;max-width:none;color:#fff}
  .sc-head-m{display:none}
  .showcase-scroller{position:relative;padding:0 0 50px;gap:34px}
  .sv-art{height:62vh;padding:24px}
  .sv-art span{display:none}                            /* el nombre va en el título negativo encima */
  .sv-desc{display:none}
  /* título "negativo" anclado, superpuesto a las tarjetas (estilo jopecuro) */
  .showcase-blend{display:flex;position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:5;
    align-items:center;justify-content:flex-end;padding:0 20px;pointer-events:none;mix-blend-mode:difference}
  .showcase-blend span{font-family:var(--serif);font-weight:500;color:#fff;text-align:right;
    font-size:clamp(34px,11vw,62px);line-height:.98;letter-spacing:-.02em;max-width:78%}
}

/* ===== MÓVIL: slideshow anclado de servicios (texto dentro de la imagen) ===== */
@media(max-width:860px){
  .showcase-grid{display:none}          /* ocultar layout de escritorio */
  .svc-m{display:block}
  .svc-m-track{position:relative;height:560vh}
  .svc-m-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .svc-m-label{position:absolute;top:74px;left:24px;z-index:5;margin:0;
    font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
  .svc-m-stage{position:relative;width:86vw;height:72vh}
  .svc-m-slide{position:absolute;inset:0;border-radius:22px;overflow:hidden;opacity:0;isolation:isolate;
    box-shadow:0 30px 70px rgba(47,58,134,.18);will-change:transform,opacity}
  .svc-m-slide::before{content:"";position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.1);transform-origin:0 0}
  .svc-m-slide::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(135% 78% at 50% 52%,rgba(14,17,52,.6),rgba(14,17,52,.12))}
  .svc-m-slide.sv1::before{background-image:url(images/servicios/01-padron.webp)}
  .svc-m-slide.sv2::before{background-image:url(images/servicios/02-consulta-expres.webp)}
  .svc-m-slide.sv3::before{background-image:url(images/servicios/03-clasificacion-arancelaria.webp)}
  .svc-m-slide.sv4::before{background-image:url(images/servicios/04-calculo-impuestos.webp)}
  .svc-m-tx{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 26px;z-index:1;
    color:#fff;will-change:transform}
  .svc-m-tx h3{font-family:var(--serif);font-weight:500;font-size:clamp(30px,8.5vw,46px);line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;text-shadow:0 2px 22px rgba(8,10,35,.45)}
  .svc-m-tx p{font-size:16px;line-height:1.5;margin:0;max-width:30ch;color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(8,10,35,.5)}
}

/* ---------- C. Collage que aparece + marquesina ---------- */
.collage{position:relative;height:320vh;background:radial-gradient(120% 120% at 50% 0%,var(--cobalt-deep-2),var(--cobalt-deep) 65%);color:#fff}
.collage-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.collage-stage{position:absolute;inset:0;z-index:1}
.collage-item{position:absolute;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;padding:18px;opacity:0;will-change:transform,opacity;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.collage-item span{font-family:var(--serif);font-size:clamp(16px,1.5vw,22px);color:#fff;position:relative;z-index:2;text-shadow:0 1px 10px rgba(10,12,40,.6)}
.collage-item::before{content:"";position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;transform:scale(1.1);transform-origin:0 0}
.collage-item::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(15,18,55,.5),transparent 55%)}
/* tarjetas en la mitad superior; parte inferior libre para el título */
.ci1{top:9%;left:5%;width:21vw;height:29vh}
.ci1::before{background-image:url(images/cobertura/01-importacion.webp)}
.ci2{top:15%;left:30%;width:16vw;height:21vh}
.ci2::before{background-image:url(images/cobertura/02-exportacion.webp)}
.ci3{top:9%;right:5%;width:21vw;height:29vh}
.ci3::before{background-image:url(images/cobertura/04-industria-immex.webp)}
.ci4{top:14%;right:30%;width:16vw;height:21vh}
.ci4::before{background-image:url(images/cobertura/03-emprendedores.webp)}
.ci5{top:36%;left:42%;width:16vw;height:21vh}
.ci5::before{background-image:url(images/cobertura/05-noms-permisos.webp)}
/* marquesina centrada verticalmente, por encima de las tarjetas */
.collage-marquee{position:absolute;top:52%;left:0;right:0;transform:translateY(-50%);z-index:2;white-space:nowrap;overflow:hidden;width:100%}
.collage-marquee-track{display:inline-flex;will-change:transform}
.collage-marquee-track span{font-family:var(--serif);font-weight:400;font-size:clamp(48px,10vw,140px);line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.5);text-stroke:1.2px rgba(255,255,255,.5);padding-right:.2em}
/* título solo, en la zona inferior despejada */
.collage-title{position:absolute;z-index:3;left:0;right:0;text-align:center;bottom:14%;padding:0 24px;font-weight:800;font-size:clamp(32px,5.4vw,78px);text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.collage-title.in{opacity:1;transform:none}
.collage-title .serif{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--accent)}
@media(max-width:860px){
  .collage{height:240vh}
  .ci5{display:none}
  .ci1,.ci2,.ci3,.ci4{width:40vw;height:20vh}
  .ci1{top:6%;left:5%}.ci2{top:6%;left:52%}.ci3{top:30%;right:5%}.ci4{top:30%;left:8%;right:auto}
  .collage-marquee{top:60%}
  .collage-title{bottom:16%}
}

/* ===========================================================
   NAVEGACIÓN MÓVIL (menú hamburguesa + overlay)
   =========================================================== */
@media(max-width:860px){
  .container{padding:0 24px}
  .nav{padding:14px 22px}
  .nav.scrolled{padding:12px 22px}

  /* botón hamburguesa */
  .nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    width:46px;height:46px;border:1.5px solid currentColor;border-radius:999px;background:transparent;
    cursor:pointer;position:relative;z-index:130;color:inherit;flex:0 0 auto}
  .nav-toggle span{display:block;width:19px;height:1.7px;background:currentColor;border-radius:2px;
    transition:transform .35s var(--ease),opacity .25s var(--ease)}

  /* el nombre por encima del overlay */
  .brand{position:relative;z-index:130}

  /* overlay de menú a pantalla completa */
  .nav-links{position:fixed;inset:0;z-index:120;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
    padding:0 28px;background:var(--cobalt-deep);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .55s var(--ease),visibility .55s var(--ease);
    pointer-events:none}
  .nav-links a{font-family:var(--serif);font-weight:500;font-size:clamp(34px,9vw,52px);
    color:#fff;padding:12px 0;letter-spacing:-.01em}
  .nav-links a:not(.nav-cta)::after{display:none}
  .nav-links a.nav-cta{border:none;padding:14px 0 0;border-radius:0;color:var(--accent)}

  /* estado abierto */
  body.nav-open{overflow:hidden}
  body.nav-open .nav-links{transform:none;visibility:visible;pointer-events:auto}
  body.nav-open .nav-toggle,body.nav-open .brand{color:#fff}
  body.nav-open .nav-toggle span:first-child{transform:translateY(3.85px) rotate(45deg)}
  body.nav-open .nav-toggle span:last-child{transform:translateY(-3.85px) rotate(-45deg)}

  /* tipografías un poco más contenidas en pantallas chicas */
  .hero-title{font-size:clamp(64px,20vw,150px)}
  .pin-text h3{font-size:clamp(34px,11vw,60px)}
}

@media(max-width:420px){
  .container{padding:0 20px}
  .hero-title{font-size:18vw}
}