/* ============================================================
   BRANDING BOARD — Shandong Gangfeng New Materials Co., Limited
   山東港豐新材料有限公司
   Familia visual: Industrial Editorial  ·  Paleta: Plum Steel
   Tipografía: Rubik (display + body, self-host)
   Cambiar este archivo re-skinea toda la web sin tocar bloques.
   ============================================================ */
/* Fuentes self-host (no Google Fonts: clave en China). */
@import url('fonts.css');

:root{
  /* Paleta — Apricot · Cotton Candy · Blush Rose · Berry Crush · Night Bordeaux */
  --brand-1:#450920;   /* Night Bordeaux (nav scrolled / footer / bandas) */
  --brand-2:#7d1c3b;   /* bordeaux → berry (banda media / gradientes) */
  --brand-3:#a53860;   /* Berry Crush */
  --brand-4:#da627d;   /* Blush Rose */
  --brand-5:#fdeee4;   /* casi blanco cálido (texto sobre bandas oscuras) */

  /* Acento Berry para CTA + apricot/blush cálido para hairlines */
  --accent:#a53860;          /* Berry Crush — CTA / links */
  --accent-press:#822c4b;    /* berry más oscuro (hover) */
  --accent-ink:#fff5f0;
  --accent-tint:#ffe0e2;     /* blush claro — fondos de íconos/badges */
  --gold:#f4c9a4;            /* apricot cálido — reglas/hairlines sobre fondo oscuro */
  --gold-soft:#f9dbbd;       /* Soft Apricot — números/acentos sobre bandas oscuras */

  /* Roles tipográficos (tinta cálida bordeaux, no negro puro) */
  --ink:#2a1620;
  --ink-soft:#6a4f59;
  --ink-faint:#917680;

  /* Superficies — off-white cálido + blush muy claro para bandas alternas */
  --surface:#fbf6f3;
  --surface-2:#f6e9e6;
  --card:#fffdfb;
  --line:#ecdcd8;

  /* Personalidad: radio bajo, sombra ciruela suave, mucho aire */
  --font-display:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:7px;
  --maxw:1200px;
  --shadow:0 18px 44px -22px rgba(69,9,32,0.38);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---- Escala tipográfica: titulares apretados, eyebrow con regla champagne ---- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-0.025em}
.h-sec{font-weight:700;letter-spacing:-0.025em}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--accent);font-weight:700;letter-spacing:.16em}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.lead{font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.7;color:var(--ink-soft);max-width:62ch}
.section{padding:clamp(40px,5.5vw,78px) 0}

/* ---- NAV: hero oscuro ciruela arriba, sólido al scrollear ---- */
.nav__logo{font-weight:800;letter-spacing:-0.03em}
.nav__logo .mk{background:var(--brand-1);color:var(--gold-soft);font-weight:800;
  border:1px solid color-mix(in oklab,var(--gold),transparent 55%)}
.nav.scrolled{background:color-mix(in oklab,var(--brand-5),white 40%);box-shadow:0 1px 0 var(--line),var(--shadow)}
.nav.scrolled .nav__logo .mk{background:var(--brand-1);color:var(--gold-soft)}
.lang button.on{color:var(--accent);font-weight:700}
.lang button{transition:color .2s}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:var(--accent-press);filter:none}
.btn--ghost:hover{background:var(--brand-1);color:var(--brand-5);border-color:var(--brand-1)}

/* ============================================================
   HEADER "SELLO DE LA CASA" (identidad propia de Gangfeng):
   un bloque ciruela cuelga del borde superior con el logo crema (el
   "sello" de la trading house); a la derecha, links + idioma + CTA
   "Cotizar →". Color comprometido y asimétrico, no un bar fino decorado.
   ============================================================ */
.gfhdr .nav__in{align-items:center;padding-top:0;padding-bottom:0;gap:clamp(14px,3vw,40px)}
/* Sello champagne con el logo ciruela: cuelga del borde superior, alto
   contraste sobre el hero oscuro y sobre el contenido claro. Caja alineada
   al container (logo.left = contenido.left) → gate-safe. */
.nav__seal{position:relative;align-self:stretch;display:inline-flex;align-items:center;overflow:hidden;
  padding:15px 26px 16px 22px;
  background:var(--gold-soft);
  border:1px solid color-mix(in oklab,var(--accent),transparent 62%);border-top:0;
  border-radius:0 0 17px 17px;
  box-shadow:0 16px 32px -20px rgba(20,3,9,.5);
  transition:padding .35s var(--ease),box-shadow .3s var(--ease)}
.nav__seal img{height:30px;width:auto;display:block}
.nav__seal::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent),transparent 65%) 55%,transparent)}
.gfhdr .nav__links{margin-left:auto}
.nav__seal .lg-cream{display:none}
/* al scrollear el sello INVIERTE: ciruela sólido + logo crema (pop sobre barra clara) */
.nav.scrolled .nav__seal{padding-top:11px;padding-bottom:12px;background:var(--brand-1);
  border-color:color-mix(in oklab,var(--gold),transparent 55%);box-shadow:0 12px 26px -18px rgba(20,3,9,.55)}
.nav.scrolled .nav__seal .lg-plum{display:none}
.nav.scrolled .nav__seal .lg-cream{display:block}
.nav.scrolled .nav__seal::after{background:linear-gradient(90deg,var(--gold),color-mix(in oklab,var(--gold),transparent 65%) 55%,transparent)}
/* CTA "Cotizar →" con flecha que avanza al hover */
.nav__quote{display:inline-flex;align-items:center;gap:8px}
.nav__quote::after{content:"→";font-weight:700;transition:transform .25s var(--ease)}
.nav__quote:hover::after{transform:translateX(4px)}
/* móvil: sello compacto (no se come el fold) */
@media(max-width:860px){
  .nav__seal{padding:10px 15px 11px 14px;border-radius:0 0 13px 13px}
}

/* ============================================================
   HERO a sangre (herox split) — imagen producto + texto, banda ciruela
   ============================================================ */
.hero-gf{background:var(--brand-1);color:var(--brand-5);position:relative;overflow:hidden;
  padding:clamp(116px,15vh,168px) 0 clamp(56px,8vw,92px)}
.hero-gf::after{content:"";position:absolute;right:-180px;top:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 68%);opacity:.42;filter:blur(8px);pointer-events:none}
.hero-gf .container{position:relative;z-index:1}
.hero-gf__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(320px,.86fr);
  gap:clamp(34px,5vw,72px);align-items:center}
@media(max-width:900px){.hero-gf__grid{grid-template-columns:1fr;gap:32px}}
.hero-gf .eyebrow{color:var(--gold-soft)}
.hero-gf .eyebrow::before{background:var(--gold)}
.hero-gf h1{font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.06;letter-spacing:-0.03em;color:var(--brand-5);max-width:15ch}
.hero-gf p{color:color-mix(in oklab,var(--brand-5),transparent 18%);font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.7;max-width:48ch;margin-top:22px}
.hero-gf__cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-gf .btn--ghost{color:var(--brand-5);border-color:color-mix(in oklab,var(--brand-5),transparent 60%)}
.hero-gf .btn--ghost:hover{background:var(--brand-5);color:var(--brand-1);border-color:var(--brand-5)}
.hero-gf__media{position:relative;border-radius:calc(var(--radius)*1.8);overflow:hidden;
  box-shadow:0 30px 70px -30px black;aspect-ratio:4/5;background:var(--brand-2)}
.hero-gf__media img{width:100%;height:100%;object-fit:cover}
.hero-gf__media .tagchip{position:absolute;left:16px;bottom:16px;background:color-mix(in oklab,var(--brand-1),transparent 8%);
  color:var(--gold-soft);border:1px solid color-mix(in oklab,var(--gold),transparent 50%);
  padding:8px 14px;border-radius:30px;font-size:12.5px;font-weight:600;letter-spacing:.04em;backdrop-filter:blur(4px)}
.hero-gf__meta{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(22px,4vw,46px);margin-top:46px;
  border-top:1px solid color-mix(in oklab,var(--brand-5),transparent 78%);padding-top:26px}
@media(max-width:520px){.hero-gf__meta{grid-template-columns:1fr 1fr;gap:22px}}
.hero-gf__meta b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3vw,2.5rem);
  color:var(--gold-soft);line-height:1;display:block}
.hero-gf__meta span{font-size:13px;color:color-mix(in oklab,var(--brand-5),transparent 30%);margin-top:6px;display:block}

/* ============================================================ PAGEHEAD (cabecera de páginas internas, banda bordeaux) */
.pagehead{background:var(--brand-1);color:var(--brand-5);position:relative;overflow:hidden;
  padding:clamp(116px,15vh,168px) 0 clamp(48px,7vw,82px)}
.pagehead::after{content:"";position:absolute;right:-160px;top:-130px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 68%);opacity:.36;pointer-events:none}
.pagehead .container{position:relative;z-index:1}
.pagehead .eyebrow{color:var(--gold-soft)}
.pagehead .eyebrow::before{background:var(--gold)}
.pagehead h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.05;letter-spacing:-0.03em;color:var(--brand-5);max-width:18ch;margin-top:14px}
.pagehead p{color:color-mix(in oklab,var(--brand-5),transparent 20%);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.7;max-width:56ch;margin-top:18px}
.pagehead__cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.pagehead .btn--ghost{color:var(--brand-5);border-color:color-mix(in oklab,var(--brand-5),transparent 60%)}
.pagehead .btn--ghost:hover{background:var(--brand-5);color:var(--brand-1);border-color:var(--brand-5)}

/* ============================================================ LOGO MARQUEE (sectores/retail) */
.lmar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--surface)}
.lmar__item{color:var(--ink-faint);font-weight:700;letter-spacing:.02em;font-size:clamp(1rem,1.6vw,1.2rem);white-space:nowrap}
.lmar__item .dot{color:var(--accent);margin-right:18px}

/* ============================================================ SPECCARDS (categorías) */
.speccards{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.speccards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.speccards{grid-template-columns:1fr}}
.speccard{background:var(--card);border-color:var(--line);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.speccard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in oklab,var(--accent),transparent 60%)}
.speccard__ic{background:var(--accent-tint);color:var(--accent)}
.speccard h3{letter-spacing:-0.02em}

/* ============================================================ CATEGORÍAS visual (prods reuso) */
.prod__b .tag{background:var(--accent-tint);color:var(--accent)}
.prod__img{background:var(--surface-2)}

/* ============================================================ MANIFESTO / declaración */
.manifesto{background:var(--brand-1);color:var(--brand-5)}
.manifesto .container{max-width:940px}
.manifesto .eyebrow{color:var(--gold-soft)}
.manifesto .eyebrow::before{background:var(--gold)}
.manifesto .statement{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.5rem);
  line-height:1.28;letter-spacing:-0.02em;color:var(--brand-5);margin-top:20px}
.manifesto .statement em{color:var(--gold-soft);font-style:normal;font-weight:700}
.manifesto .signature{margin-top:34px;display:flex;gap:16px;align-items:center;
  color:color-mix(in oklab,var(--brand-5),transparent 40%);font-size:14px}
.manifesto .signature .rule{width:48px;height:1px;background:color-mix(in oklab,var(--gold),transparent 40%)}

/* ============================================================ SVERT (proceso vertical) */
.svert__step::before{background:var(--accent);color:var(--accent-ink)}
.svert__step h3{letter-spacing:-0.02em}

/* ============================================================ STAT CARDS */
.statc__c{background:var(--card)}
.statc__c b{color:var(--brand-1)}
.statc__c .gold{color:var(--accent)}

/* ============================================================ ICARDS (servicios/garantías) */
.icard__ic{background:var(--accent-tint);color:var(--accent)}
.icard:hover{border-color:color-mix(in oklab,var(--accent),transparent 55%)}

/* ============================================================ CTA FORM */
.ctaform{background:var(--brand-1);color:var(--brand-5);border-radius:calc(var(--radius)*1.8);
  padding:clamp(40px,5vw,72px)}
.ctaform .eyebrow{color:var(--gold-soft)}
.ctaform .eyebrow::before{background:var(--gold)}
.ctaform h2{color:var(--brand-5);letter-spacing:-0.025em}
.ctaform>div p{color:color-mix(in oklab,var(--brand-5),transparent 25%)}
.ctaform__form{background:var(--card);color:var(--ink)}
.ctaform__form label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.ctaform__form input,.ctaform__form textarea{border:1.5px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);width:100%}
.ctaform__form input:focus,.ctaform__form textarea:focus{outline:none;border-color:var(--accent)}
.ctaform__form button{background:var(--accent);color:var(--accent-ink);border:0;font-family:inherit;font-weight:700;
  font-size:15px;padding:14px 24px;border-radius:var(--radius);cursor:pointer}
.ctaform__form .ok{background:var(--accent-tint);color:var(--accent-press);border-radius:var(--radius);padding:14px 16px;font-size:14px}

/* ============================================================ CONTACT GRID */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);margin-top:30px}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}
.cgrid>div{padding:34px 30px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.cgrid>div:nth-child(2n){border-right:0}
@media(max-width:760px){.cgrid>div{border-right:0}}
.cgrid .label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.cgrid h3{font-size:1.35rem;letter-spacing:-0.02em;margin-bottom:6px}
.cgrid p,.cgrid a{color:var(--ink-soft);font-size:15px;line-height:1.75}
.cgrid a:hover{color:var(--accent)}

/* ============================================================ DLABEL divider */
.dlabel{justify-content:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:clamp(14px,2.2vw,26px) 0}
.dlabel::before,.dlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.dlabel a{color:var(--accent)}

/* ============================================================ FOOTER */
.site-footer{background:var(--brand-1);color:color-mix(in oklab,var(--brand-5),transparent 32%)}
.site-footer a{color:color-mix(in oklab,var(--brand-5),transparent 32%)}
.site-footer a:hover{color:var(--gold-soft)}
.site-footer .foot__logo{color:var(--brand-5)}
.site-footer h4{color:var(--gold-soft)}

/* ============================================================ COOKIE / MISC */
.cookiebar{bottom:18px;left:auto;right:18px;margin:0;max-width:420px;padding:12px 16px;border-radius:12px;
  background:color-mix(in oklab,var(--brand-1),black 4%);color:var(--brand-5);font-size:13px;opacity:.98}
.cookiebar .btn{padding:8px 16px;font-size:12.5px}
@media(max-width:560px){.cookiebar{left:12px;right:12px;max-width:none}}
@media(max-width:860px){
  .nav__cta .btn--primary{display:none}
  .nav__cta{gap:8px}
  .lang button{padding:5px 7px;font-size:11.5px}
}

/* Fbleed: oscurecer la banda para que una foto clara se lea cohesiva y el texto contraste */
.fbleed::after{background:linear-gradient(90deg,var(--brand-1) 14%,color-mix(in oklab,var(--brand-1),transparent 26%) 60%,color-mix(in oklab,var(--brand-1),transparent 58%) 100%)}
.fbleed h2,.fbleed p{color:var(--brand-5)}

/* Móvil: hero compacto + cookie compacta para que el banner no tape el CTA del primer fold */
@media(max-width:560px){
  .hero-gf{padding-top:98px;padding-bottom:38px}
  .hero-gf h1{font-size:clamp(1.95rem,8.4vw,2.5rem);line-height:1.08}
  .hero-gf p{font-size:1rem;line-height:1.62;margin-top:14px}
  .hero-gf__cta{margin-top:22px;gap:10px}
  .hero-gf__meta{margin-top:28px;padding-top:20px}
  .cookiebar{bottom:12px;padding:9px 12px;font-size:12px;gap:8px;border-radius:10px}
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ============================================================
   ELEVACIÓN — motion premium + profundidad (capa de calidad)
   ============================================================ */
/* Sombra multicapa (más profundidad que una sola sombra plana) */
:root{
  --shadow:0 1px 2px rgba(69,9,32,.05), 0 10px 22px -12px rgba(69,9,32,.20), 0 30px 60px -28px rgba(69,9,32,.28);
  --shadow-lift:0 2px 6px rgba(69,9,32,.06), 0 18px 38px -14px rgba(69,9,32,.26), 0 44px 80px -36px rgba(69,9,32,.32);
}

/* Entrada del hero al cargar (escalonada) */
@keyframes gf-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes gf-media{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
@keyframes gf-glow{0%,100%{opacity:.32;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}}
.js .hero-gf__copy>*{animation:gf-up .85s var(--ease) both}
.js .hero-gf__copy>:nth-child(1){animation-delay:.06s}
.js .hero-gf__copy>:nth-child(2){animation-delay:.14s}
.js .hero-gf__copy>:nth-child(3){animation-delay:.22s}
.js .hero-gf__copy>:nth-child(4){animation-delay:.30s}
.js .hero-gf__copy>:nth-child(5){animation-delay:.38s}
.js .hero-gf__media{animation:gf-media 1s var(--ease) .18s both}
.hero-gf::after{animation:gf-glow 7s ease-in-out infinite}
.pagehead::after{animation:gf-glow 9s ease-in-out infinite}
.hero-gf__media{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.hero-gf__media:hover{transform:translateY(-6px);box-shadow:0 40px 90px -36px black}
.hero-gf__media img{transition:transform 1.2s var(--ease)}
.hero-gf__media:hover img{transform:scale(1.04)}

/* Stagger: los hijos de las grillas entran en secuencia al revelarse la sección */
.reveal :is(.icards,.speccards,.statc,.prods,.qcards,.cgrid)>*,
.reveal .svert__step,.reveal .checks>li,.reveal .faq2__col>div{
  opacity:0;transform:translateY(18px);
  transition:opacity .65s var(--ease),transform .65s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.reveal.in :is(.icards,.speccards,.statc,.prods,.qcards,.cgrid)>*,
.reveal.in .svert__step,.reveal.in .checks>li,.reveal.in .faq2__col>div{opacity:1;transform:none}
.reveal.in :is(.icards,.speccards,.statc,.prods,.qcards,.cgrid)>*:nth-child(2),
.reveal.in .svert__step:nth-child(2){transition-delay:.07s}
.reveal.in :is(.icards,.speccards,.statc,.prods,.qcards,.cgrid)>*:nth-child(3),
.reveal.in .svert__step:nth-child(3){transition-delay:.14s}
.reveal.in :is(.icards,.speccards,.statc,.prods,.qcards,.cgrid)>*:nth-child(4),
.reveal.in .svert__step:nth-child(4){transition-delay:.21s}
.reveal.in :is(.icards,.speccards,.prods,.qcards)>*:nth-child(5),
.reveal.in .svert__step:nth-child(5){transition-delay:.28s}
.reveal.in :is(.speccards,.prods)>*:nth-child(6){transition-delay:.35s}
.reveal.in :is(.speccards,.prods)>*:nth-child(7){transition-delay:.42s}
.reveal.in :is(.speccards,.prods)>*:nth-child(8){transition-delay:.49s}
.no-js .reveal :is(.icards,.speccards,.statc,.prods,.qcards,.cgrid)>*,
.no-js .reveal .svert__step,.no-js .reveal .checks>li{opacity:1;transform:none}

/* Hover premium: lift mayor + acento champagne + borde de acento */
.icard:hover,.qcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.speccard{position:relative;overflow:hidden}
.speccard::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--accent),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.speccard:hover::before{transform:scaleX(1)}
.speccard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.speccard__ic{transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.speccard:hover .speccard__ic{background:var(--accent);color:var(--accent-ink);transform:scale(1.06)}
.statc__c:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.statc__c b{transition:color .3s var(--ease)}
.statc__c:hover b{color:var(--accent)}
.icard__ic{transition:transform .3s var(--ease),background .3s,color .3s}
.icard:hover .icard__ic{transform:translateY(-2px) scale(1.05)}

/* Botones con micro-profundidad */
.btn--primary{box-shadow:0 8px 20px -8px var(--accent);transition:transform .18s var(--ease),box-shadow .25s,background .2s}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--accent)}

/* Eyebrow: la regla champagne crece sutilmente */
.eyebrow::before{transition:width .4s var(--ease)}
.reveal.in .eyebrow::before,.hero-gf .eyebrow::before,.pagehead .eyebrow::before{width:32px}

/* Marquee: items con separador champagne + leve realce */
.lmar__item{transition:color .25s,opacity .25s}
.lmar:hover .lmar__track{animation-play-state:paused}


/* ============================================================ LOGO DE MARCA (anillos enlazados + check) */
.nav__logo{gap:10px}
.nav__logo .gfmark,.foot__logo .gfmark{display:inline-flex;align-items:center}
.nav__logo .gfmark svg{display:block;width:37px;height:37px}
.foot__logo{display:inline-flex;align-items:center;gap:9px}
.foot__logo .gfmark svg{display:block;width:30px;height:30px;opacity:.95}

/* ============================================================ SELECTOR DE IDIOMA PREMIUM (bandera + nombre, animado) */
#langsw.lang--flags-dd .lang__trigger{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.13);border-radius:9px;padding:7px 11px;line-height:1}
.nav.scrolled #langsw .lang__trigger{background:var(--surface-2);color:var(--ink)}
#langsw .lang__trigger::after{content:"▾";font-size:10px;opacity:.7;transition:transform .25s var(--ease)}
#langsw.open .lang__trigger::after{transform:rotate(180deg)}
#langsw .lang__menu{display:flex!important;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 10px);right:0;min-width:174px;
  background:var(--card);border:1px solid var(--line);border-radius:13px;padding:7px;box-shadow:var(--shadow-lift);z-index:70;
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
#langsw.open .lang__menu{opacity:1;transform:none;visibility:visible;pointer-events:auto}
#langsw .lang__menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink);background:transparent;border:0;border-radius:9px;padding:9px 11px;cursor:pointer;transition:background .18s,color .18s}
#langsw .lang__menu button:hover{background:var(--surface-2)}
#langsw .lang__menu button .lf{display:inline-flex;flex:0 0 auto}
#langsw .lang__menu button .ln{flex:1}
#langsw .lang__menu button.on{color:var(--accent)}
#langsw .lang__menu button.on::after{content:"✓";margin-left:auto;color:var(--accent);font-weight:800}

/* ============================================================ BARRA DE PROGRESO DE SCROLL */
.scrollprog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--gold));will-change:transform}

/* ============================================================ NAV LINKS: underline champagne animado */
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)}

/* ============================================================ WHATSAPP FLOTANTE */
.wafab{position:fixed;left:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);
  transition:transform .25s var(--ease),box-shadow .25s}
.wafab:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 18px 36px -10px rgba(0,0,0,.5)}
.wafab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:wapulse 2.4s ease-out infinite;pointer-events:none}
@keyframes wapulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.65)}}
@media(max-width:560px){.wafab{left:14px;bottom:14px;width:52px;height:52px}}

/* parallax */
[data-parallax]{will-change:transform}

/* ============================================================ BANDA DE IMAGEN (figura cinematográfica proporcionada) */
.imgband{display:block!important;position:relative;margin:0;border-radius:calc(var(--radius)*1.7);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--surface-2)}
.imgband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.imgband:hover img{transform:scale(1.04)}
@media(max-width:600px){.imgband{aspect-ratio:16/11}}

/* ============================================================ SERVICIOS: filas alternadas imagen/texto (zig-zag) */
.svcrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(30px,5vw,72px);align-items:center}
.svcrow__media{position:relative;margin:0;border-radius:calc(var(--radius)*1.6);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:3/2;background:var(--surface-2)}
.svcrow__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.svcrow:hover .svcrow__media img{transform:scale(1.05)}
.svcrow--flip .svcrow__media{order:-1}
@media(max-width:820px){
  .svcrow{grid-template-columns:1fr;gap:22px}
  .svcrow__media{order:-1}
}

/* ============================================================ PROCESO: recorrido scroll-spy + gráfico de rail sticky */
.journey{display:grid;grid-template-columns:minmax(0,1fr) clamp(108px,13vw,150px);gap:clamp(28px,5vw,60px);align-items:start;margin-top:clamp(26px,4vw,46px)}
.journey__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(22px,3.2vw,40px)}
.jstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,24px);align-items:start;opacity:.42;transition:opacity .45s var(--ease)}
.jstep__n{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:.85;color:var(--line);transition:color .45s var(--ease)}
.jstep h3{font-size:clamp(1.15rem,1.9vw,1.45rem);letter-spacing:-0.01em;color:var(--ink-soft);transition:color .45s var(--ease)}
.jstep p{color:var(--ink-faint);margin-top:8px;max-width:52ch;line-height:1.65;transition:color .45s var(--ease)}
.jstep.active{opacity:1}
.jstep.active .jstep__n{color:var(--accent)}
.jstep.active h3{color:var(--ink)}
.jstep.active p{color:var(--ink-soft)}
.jstep.done{opacity:.72}
.jstep.done .jstep__n{color:color-mix(in oklab,var(--accent),transparent 52%)}
/* gráfico: rail vertical de progreso (sticky); los nodos se encienden 1..6 al scrollear */
.journey__rail{position:sticky;top:clamp(86px,12vh,124px);align-self:start}
.jrail{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.4vw,30px);padding:6px 0}
.jrail__track{position:absolute;left:50%;transform:translateX(-50%);top:25px;bottom:25px;width:3px;background:var(--line);border-radius:3px;overflow:hidden}
.jrail__fill{position:absolute;inset:0 0 auto 0;width:100%;height:0;background:linear-gradient(var(--accent),var(--gold));border-radius:3px;transition:height .5s var(--ease)}
.jnode{position:relative;z-index:1}
.jnode__dot{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--line);
  color:var(--ink-faint);font-family:var(--font-display);font-weight:800;font-size:17px;
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.jnode.done .jnode__dot{background:color-mix(in oklab,var(--accent),white 24%);border-color:transparent;color:#fff}
.jnode.active .jnode__dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.16);box-shadow:0 12px 26px -8px color-mix(in oklab,var(--accent),transparent 30%)}
@media(max-width:820px){.journey{grid-template-columns:1fr}.journey__rail{display:none}}


/* ============================================================ LOGO OFICIAL (imagen PNG, swap claro/color por scroll) */
.nav__logo{gap:0}
.nav__logo img{height:30px;width:auto;display:block}
.nav__logo .on-light{display:none}
.nav.scrolled .nav__logo .on-dark{display:none}
.nav.scrolled .nav__logo .on-light{display:block}
.foot__logo img{height:30px;width:auto;display:block}
@media(max-width:520px){.nav__logo img{height:26px}}

/* ============================================================ EFECTOS PREMIUM 2.0 (video hero · tilt 3D · spotlight · mesh) */
/* Hero: video de fondo + velo ciruela (texto siempre legible) */
.hero-gf__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.9;filter:blur(2.5px) saturate(1.08) brightness(.95);transform:scale(1.04);will-change:transform}
.hero-gf__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--brand-1) 0%,color-mix(in oklab,var(--brand-1),transparent 26%) 38%,color-mix(in oklab,var(--brand-1),transparent 60%) 70%,color-mix(in oklab,var(--brand-1),transparent 78%) 100%)}
.hero-gf::after{z-index:2}
.hero-gf>.container{position:relative;z-index:3}

/* Tilt 3D + spotlight (estilo 21st) en tarjetas */
.tiltable{transform-style:preserve-3d;position:relative;transition:transform .18s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.tiltable::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:0;
  transition:opacity .3s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--accent),transparent 80%),transparent 60%)}
.tiltable:hover::after{opacity:1}
.tiltable>*{position:relative;z-index:1}
.prod.tiltable{overflow:visible}
.prod.tiltable .prod__img{border-radius:calc(var(--radius)*1.4) calc(var(--radius)*1.4) 0 0}

/* Gradiente mesh animado en bandas oscuras */
.manifesto,.ctaform{position:relative;overflow:hidden;isolation:isolate}
.manifesto::before,.ctaform::before{content:"";position:absolute;inset:-45%;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(38% 48% at 22% 28%,color-mix(in oklab,var(--accent),transparent 50%),transparent 62%),
            radial-gradient(34% 44% at 84% 74%,color-mix(in oklab,var(--gold),transparent 66%),transparent 62%);
  animation:gfmesh 18s ease-in-out infinite alternate}
@keyframes gfmesh{from{transform:translate3d(-2%,-1%,0) rotate(0deg) scale(1)}to{transform:translate3d(3%,2%,0) rotate(8deg) scale(1.08)}}