/* ============================================================
   Glinkerme® corporativa — overrides MÍNIMOS sobre _bs-style.css.
   El diseño base (tipografías, secciones, hero, principios, red-zone…)
   viene de _bs-style.css para que respire igual que glinkermeboost.com.
   ============================================================ */
/* Marca-texto en el nav y el footer (no hay logo img de Glinkerme aún) */
.gbrand{font-family:inherit;font-weight:800;font-size:1.42rem;letter-spacing:-.03em;color:var(--ink)}
.gbrand .r{color:var(--red)}
footer .gbrand{color:#fff}
/* Logo real de Glinkerme (versión blanca) — se pinta en el footer oscuro */
.glk-logo{height:38px;width:auto;display:block}

/* ============================================================
   HERO — banner slider (3 temas) + nav transparente sobre el hero
   ============================================================ */
:root{--glk-navh:84px}
#evolucion,#contacto{scroll-margin-top:100px}

/* Contacto: botones de WhatsApp (mismo estilo que /contacto de glinkermeboost) */
.wa-contacts{display:flex;flex-direction:column;gap:14px}
.wa-btn{display:flex;align-items:center;gap:15px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:#fff;text-decoration:none;transition:box-shadow .2s,transform .2s,border-color .2s}
.wa-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35);border-color:#25D366}
.wa-ic{width:48px;height:48px;flex:0 0 auto;border-radius:14px;background:#e7f7ee;display:grid;place-items:center}
.wa-ic svg{width:26px;height:26px;fill:#25D366}
.wa-tx{display:flex;flex-direction:column;line-height:1.3}
.wa-tx b{font-size:1.02rem;color:var(--ink)}
.wa-tx small{color:var(--muted);font-size:.92rem;margin-top:1px}
.wa-tx span{color:#25D366;font-size:.82rem;font-weight:700;margin-top:4px}
/* Nav semi-transparente sobre el hero (panel oscuro translúcido + blur, texto blanco) */
header{background:rgba(12,12,16,.32);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.10);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
header .gbrand{color:#fff}
header .nav-link{color:#fff}
header .nav-link:hover,header .nav-link.active,header .nav-item.open .nav-link{color:#fff;opacity:.72}
header .menu-btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
header .menu-btn span{background:#fff}
/* Logo de Glinkerme en el nav (PNG a color, teal sobre transparente; legible sobre el hero oscuro y sobre el nav blanco) */
.logo .glk-navlogo{height:36px;width:auto;display:block}
/* Botón del nav "Descubrir GlinkermeBoost™" — pastilla roja delicada */
.nav-actions .btn.glk-navbtn{background:var(--red);color:#fff;border:0;border-radius:999px;padding:8px 16px;font-weight:600;font-size:.84rem;letter-spacing:-.01em;box-shadow:0 8px 20px -11px rgba(217,0,0,.55);transition:background .2s,box-shadow .2s,transform .15s}
.nav-actions .btn.glk-navbtn:hover{background:#bd0000;color:#fff;box-shadow:0 12px 26px -11px rgba(217,0,0,.7);transform:translateY(-1px)}
/* Estado sólido al bajar del hero — charcoal oscuro monocromo (marca madre) */
header.glk-solid{background:rgba(16,17,21,.90);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.10)}
header.glk-solid .gbrand{color:#fff}
header.glk-solid .nav-link{color:#fff;opacity:.85}
header.glk-solid .nav-link:hover,header.glk-solid .nav-item.open .nav-link{color:#fff;opacity:1}
header.glk-solid .menu-btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
header.glk-solid .menu-btn span{background:#fff}
/* En móvil el panel del menú abierto es blanco → texto oscuro */
@media(max-width:1040px){.nav-menu.open .nav-link{color:var(--ink)!important;opacity:1}}

.glk-hero{position:relative;margin-top:calc(-1 * var(--glk-navh));min-height:100vh;min-height:100svh;overflow:hidden;background:#08080b;isolation:isolate;display:flex;align-items:center}
.glk-track{position:absolute;inset:0;z-index:0}
.glk-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;overflow:hidden;display:flex;align-items:center}
.glk-slide::before{content:"";position:absolute;inset:-3%;z-index:0;background-image:var(--bg);background-size:cover;background-position:center;transform:scale(1.05);will-change:transform}
.glk-slide::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(135% 125% at 10% 26%,rgba(4,4,7,.74) 0%,rgba(4,4,7,.28) 46%,rgba(4,4,7,0) 72%),linear-gradient(180deg,rgba(4,4,7,.50) 0%,rgba(4,4,7,0) 24%,rgba(4,4,7,0) 50%,rgba(4,4,7,.86) 100%),linear-gradient(97deg,rgba(4,4,7,.90) 0%,rgba(4,4,7,.44) 40%,rgba(4,4,7,0) 74%)}
.glk-slide.is-on{opacity:1}
.glk-slide.is-on::before{animation:glkKen 7.5s ease-out both}
@keyframes glkKen{from{transform:scale(1.05) translate3d(0,0,0)}to{transform:scale(1.15) translate3d(-2%,-1.4%,0)}}
.glk-slide .glk-copy>*{opacity:0;transform:translateY(16px)}
.glk-slide.is-on .glk-copy>*{animation:glkUp .8s cubic-bezier(.2,.7,.2,1) forwards}
.glk-slide.is-on .glk-copy>*:nth-child(1){animation-delay:.18s}
.glk-slide.is-on .glk-copy>*:nth-child(2){animation-delay:.30s}
.glk-slide.is-on .glk-copy>*:nth-child(3){animation-delay:.44s}
@keyframes glkUp{to{opacity:1;transform:none}}
.glk-hero:hover .glk-slide.is-on::before{animation-play-state:paused}
.glk-copy{position:relative;z-index:2;color:#fff;padding-top:calc(var(--glk-navh) + 8px)}
.glk-kicker{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);padding:8px 15px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.glk-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.glk-copy h1{color:#fff;font-size:clamp(2.5rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.025em;margin:20px 0 0;max-width:17ch;text-wrap:balance}
.glk-copy h1 .r{color:#ff5a5f}
.glk-copy p{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.55vw,1.28rem);line-height:1.55;margin:18px 0 0;max-width:46ch}
.glk-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}
/* dots */
.glk-dots{position:absolute;left:0;right:0;bottom:26px;display:flex;gap:11px;justify-content:center;z-index:3}
.glk-dot{position:relative;overflow:hidden;width:40px;height:5px;border-radius:99px;border:0;background:rgba(255,255,255,.32);cursor:pointer;padding:0;transition:width .28s}
.glk-dot.is-on{width:58px}
.glk-dot::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:99px}
.glk-dot.is-on::after{animation:glkProg 5.5s linear forwards}
.glk-hero:hover .glk-dot.is-on::after{animation-play-state:paused}
@keyframes glkProg{from{width:0}to{width:100%}}
/* flechas */
.glk-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(0,0,0,.24);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.glk-nav:hover{background:rgba(0,0,0,.45)}
.glk-prev{left:22px}.glk-next{right:22px}
@media(max-width:640px){.glk-nav{display:none}.glk-hero{min-height:90svh}.glk-copy p{max-width:36ch}.glk-dots{bottom:18px}}
@media(prefers-reduced-motion:reduce){.glk-slide{transition:none}.glk-slide.is-on::before,.glk-slide.is-on .glk-copy>*,.glk-dot.is-on::after{animation:none}.glk-slide .glk-copy>*{opacity:1;transform:none}}

/* Gráfico orbital sobre el hero (transparente, lado derecho) */
.glk-orbit{position:absolute;z-index:2;top:50%;right:5.5%;transform:translateY(-50%);width:min(39vw,500px);aspect-ratio:1;pointer-events:none;display:none}
@media(min-width:1140px){.glk-orbit{display:block}.glk-nav{display:none}}
.glk-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.34);animation:glkBreathe 7s ease-in-out infinite}
.glk-ring.r1{width:34%;height:34%}
.glk-ring.r2{width:60%;height:60%;border-color:rgba(255,255,255,.26);animation-delay:-2.3s}
.glk-ring.r3{width:88%;height:88%;border-color:rgba(255,255,255,.18);animation-delay:-4.6s}
@keyframes glkBreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.045)}}
.glk-pulse{position:absolute;top:50%;left:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(233,20,27,.55);animation:glkSonar 4.4s ease-out infinite}
.glk-pulse.p2{animation-delay:2.2s}
@keyframes glkSonar{0%{opacity:.6;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}
.glk-ocore{position:absolute;top:50%;left:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:27%;background:linear-gradient(158deg,rgba(229,20,27,.78),rgba(175,12,18,.72));-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25);display:grid;place-items:center;box-shadow:0 34px 66px -22px rgba(180,10,15,.6),inset 0 0 0 1px rgba(255,255,255,.22);animation:glkCoreBob 6.5s ease-in-out infinite}
.glk-ocore svg{width:54%;height:54%}
.glk-ocore svg path{fill:#fff}
@keyframes glkCoreBob{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-53%) scale(1.02)}}
.glk-node{position:absolute;inset:6%;border-radius:50%;animation:glkSpin 15s linear infinite}
.glk-node::after{content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;width:14px;height:14px;border-radius:50%;background:#e5141b;box-shadow:0 0 0 5px rgba(233,20,27,.20)}
@keyframes glkSpin{to{transform:rotate(360deg)}}
.glk-ochip{position:absolute;background:rgba(16,16,22,.40);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:12px 16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px;white-space:nowrap;animation:glkFloat 6s ease-in-out infinite}
.glk-ochip b{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.glk-ochip b .d{width:8px;height:8px;border-radius:50%;background:var(--red);flex:0 0 auto;box-shadow:0 0 9px rgba(229,20,27,.85)}
.glk-ochip span{font-size:.86rem;color:rgba(255,255,255,.72);padding-left:16px}
.glk-ochip.c1{top:1%;left:33%;animation-delay:0s}
.glk-ochip.c2{top:24%;left:-6%;animation-delay:-1.2s}
.glk-ochip.c3{top:24%;right:-2%;animation-delay:-2.4s}
.glk-ochip.c4{top:60%;left:-6%;animation-delay:-1.8s}
.glk-ochip.c6{top:60%;right:-2%;animation-delay:-3.6s}
.glk-ochip.c5{top:84%;left:35%;animation-delay:-3s}
@keyframes glkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.glk-pulse,.glk-ocore,.glk-ochip{animation:none}}

/* Flip cards SOLO en glinkerme.com: FRENTE blanco / REVERSO rojo (invertido).
   El prefijo #principios (id) gana a los estilos embebidos de identidad-digital, incluido el intercalado .bc-flip. */
#principios .flip-front{background:#fff;border-color:var(--line);color:var(--ink)}
#principios .flip-front .icon{background:rgba(217,0,0,.10)}
#principios .flip-front .icon svg{stroke:var(--red)}
#principios .flip-front .bt{color:var(--red)}
#principios .flip-front h3{color:var(--ink)}
#principios .flip-front .hint{color:var(--muted)}
#principios .flip-front .hint svg{stroke:var(--red)}
#principios .flip-back{background:var(--red);border-color:var(--red);color:#fff}
#principios .flip-back .bt{color:rgba(255,255,255,.85)}
#principios .flip-back p{color:rgba(255,255,255,.94)}

/* Cifras animadas bajo "Conecta. Comparte. Crece." — minimalista, iconos planos 2D, sin fondo */
.glk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.glk-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.glk-stat-ic svg{width:48px;height:48px;fill:none;stroke:var(--red);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.glk-num{font-size:clamp(2.1rem,3.6vw,3.1rem);font-weight:800;letter-spacing:-.02em;color:var(--red);line-height:1;font-variant-numeric:tabular-nums;margin-top:4px}
.glk-stat>span:last-child{color:var(--muted);font-size:.98rem;max-width:17ch;line-height:1.35}
@media(max-width:820px){.glk-stats{grid-template-columns:1fr 1fr;gap:36px 20px}}
@media(max-width:440px){.glk-stats{grid-template-columns:1fr}}

/* Marquesina de logos bajo el mapa (grises, degradado en los extremos, sin línea) */
#grupo .grid-2>div{min-width:0}  /* evita que el max-content de la marquesina ensanche la columna del grid */
#grupo .grid-2>.reveal.d1{display:flex;flex-direction:column;justify-content:center}  /* centra el mapa+logos verticalmente (no pegado arriba) */
.glk-logomq{position:relative;overflow:hidden;width:100%;max-width:100%;margin-top:60px;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.glk-logomq-track{display:flex;align-items:center;width:max-content;animation:glkLogoMq 20s linear infinite}
.glk-logomq:hover .glk-logomq-track{animation-play-state:paused}
.glk-logomq img{height:54px;width:auto;flex:0 0 auto;margin-right:clamp(46px,6vw,84px);filter:grayscale(1);opacity:.84}
.glk-logomq img.big{height:68px}
@keyframes glkLogoMq{to{transform:translateX(-50%)}}
@media(max-width:560px){.glk-logomq img{height:42px}.glk-logomq img.big{height:54px}}
@media(prefers-reduced-motion:reduce){.glk-logomq-track{animation:none}}

/* ® / ™ más pequeños (superíndice) en los títulos */
.glk-tm{font-size:.52em;vertical-align:.5em;letter-spacing:normal;font-weight:inherit}

/* Botón de login en el footer */
.glk-footlogin{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:10px 20px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;font-weight:600;font-size:.92rem;transition:background .2s,border-color .2s}
.glk-footlogin:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.glk-footlogin svg{opacity:.9}

/* Cierre del timeline de Revyoo (glinkerme.com): línea + punto + eslogan */
.rv-end{display:flex;flex-direction:column;align-items:center}
.rv-end-line{width:3px;height:60px;background:linear-gradient(var(--red),#f3c0c2);border-radius:3px}
.rv-end-dot{width:20px;height:20px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(217,0,0,.14);margin-top:-1px}
.rv-slogan{margin-top:34px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-size:clamp(.85rem,2.1vw,1.5rem);text-align:center;line-height:1.3}
.rv-slogan b{font-weight:800;letter-spacing:.2em}
@media(max-width:560px){.rv-slogan{letter-spacing:.12em}}

/* "El respaldo": rotador de logos con crossfade (mismo tamaño, uno a la vez) */
.glk-logorot{position:relative;width:min(340px,74%);height:150px;margin:0 auto}
.glk-logorot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:glkLogoFade 9s ease-in-out infinite;filter:drop-shadow(0 10px 22px rgba(0,0,0,.10))}
.glk-logorot .l1{animation-delay:0s;filter:grayscale(1) contrast(1.02) drop-shadow(0 10px 22px rgba(0,0,0,.10))}
.glk-logorot .l2{animation-delay:-3s}
.glk-logorot .l3{animation-delay:-6s}
@keyframes glkLogoFade{0%{opacity:0}3%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.glk-logorot img{animation:none;position:relative;display:block;height:auto;margin:10px auto}.glk-logorot .l2,.glk-logorot .l3{opacity:1}.glk-logorot .l1{opacity:1}}

/* Bloque "Smart Business Movement" — rejilla de pilares/Business Suites */
.bs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bs-chip{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line,#e7e2db);border-radius:14px;padding:15px 16px;transition:transform .18s,box-shadow .25s,border-color .18s}
.bs-chip:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(0,0,0,.35);border-color:var(--red)}
.bs-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:rgba(217,0,0,.09);display:grid;place-items:center}
.bs-ic svg{width:21px;height:21px;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bs-chip b{font-size:.98rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
@media(max-width:560px){.bs-grid{grid-template-columns:1fr}}

/* "Principios del movimiento" (red-zone) al estilo glinkermeboost/movimiento: iconos outline + centrado */
.red-zone .icon-grid.cols3{gap:50px 30px}
.red-zone .icf{display:flex;flex-direction:column;align-items:center;text-align:center}
.red-zone .icf strong{text-wrap:balance;max-width:14em;margin-inline:auto;line-height:1.45}
.red-zone .ficon{background:none;width:auto;height:auto;min-width:0;margin:0 0 14px;box-shadow:none;border-radius:0}
.red-zone .ficon svg{width:44px;height:44px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Tarjetas del ecosistema (GlinkermeBoost · ValenciaBoost · Próximamente) */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
@media(max-width:860px){.eco-grid{grid-template-columns:1fr}}
.eco-card{background:#fff;border:1px solid var(--line,#e7e2db);border-radius:18px;padding:28px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .25s,border-color .2s}
.eco-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -30px rgba(0,0,0,.4);border-color:var(--red)}
.eco-card.soon{background:var(--wash,#f7f4ef);border-style:dashed}
.eco-tag{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.eco-card.soon .eco-tag{color:var(--muted)}
.eco-card h3{font-size:1.5rem;margin-top:9px;font-weight:800;letter-spacing:-.02em}
.eco-card p{color:var(--muted);font-size:.98rem;margin-top:10px;flex:1;line-height:1.6}
.eco-card .lnk{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.95rem;color:var(--red)}

/* Principios — escenario de la imagen tres-principios.png con halo rojo suave */
.tp-stage{position:relative;display:grid;place-items:center;padding:18px}
.tp-stage::before{content:"";position:absolute;inset:50%;width:min(430px,86%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(215,25,32,.12),transparent 66%);z-index:0}
.tp-stage::after{content:"";position:absolute;inset:50%;width:min(360px,76%);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(215,25,32,.16);border-radius:50%;z-index:0}
.tp-stage img{position:relative;z-index:1;width:100%;max-width:440px;height:auto;filter:drop-shadow(0 26px 48px rgba(0,0,0,.22))}
@media(max-width:860px){.tp-stage{order:-1}.tp-stage img{max-width:340px}}
