/* ============================================================
TOKENS · Off-White (#FCFEFF) is the single canvas color
============================================================ */
:root {
--raw-blue:#15A3DD; --raw-magenta:#A81D81; --raw-yellow:#F3C701;
--raw-crimson:#E41C4C; --raw-green:#019D60; --raw-red:#e5262b;
--raw-red-600:#CB0101; --raw-red-100:rgba(254,1,1,0.10); --raw-red-glow:rgba(254,1,1,0.32);
--raw-off-black:#0E0E0E; --raw-ink-70:#4A4A4A; --raw-ink-50:#6F6F6F;
--raw-ink-30:#A8A8A2; --raw-ink-15:#DEDCD6; --raw-ink-08:#EAE7E1;
--raw-off-white:#FCFEFF;
--color-bg: var(--raw-off-white);
--color-glass: rgba(252,254,255,0.86);
--color-text-primary: var(--raw-off-black);
--color-text: var(--raw-off-black);
--color-text-muted: var(--raw-ink-70);
--color-text-2: var(--raw-ink-50);
--color-line: var(--raw-ink-15);
--color-line-2: var(--raw-ink-30);
--color-accent: var(--raw-red);
--color-accent-hover: var(--raw-red-600);
--color-accent-soft: var(--raw-red-100);
--color-accent-glow: var(--raw-red-glow);
--font-display:"Inter Tight","Helvetica Neue",system-ui,sans-serif;
--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--font-mono:"JetBrains Mono","SF Mono",Menlo,monospace;
--font-script:"Caveat",cursive;
--t-xs:11px; --t-sm:14px; --t-md:16px; --t-lg:20px;
--container-max:1280px;
--space-side:64px; --space-side-mobile:24px;
--space-section-lg:160px; --space-section-md:120px; --space-section-sm:96px;
--space-block:64px;
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
--s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px;
--r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
--shadow-sm:0 1px 2px rgba(14,14,14,0.06);
--shadow-md:0 8px 18px -6px rgba(14,14,14,0.10), 0 18px 36px -12px rgba(14,14,14,0.10);
--shadow-lg:0 18px 38px -12px rgba(14,14,14,0.14), 0 36px 72px -24px rgba(14,14,14,0.18);
--shadow-focus:0 0 0 3px var(--color-accent-soft);
--ease-smooth:cubic-bezier(0.22,1,0.36,1);
--ease-expo:cubic-bezier(0.16,1,0.3,1);
--z-sticky:1100;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
margin:0;
overflow-x:hidden;overflow-x:clip;
width:100%;
font-family:var(--font-sans);
font-size:var(--t-md);
line-height:1.65;
color:var(--color-text);
background:var(--color-bg);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--color-accent);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Italic safety (no clipping) */
em{
font-style:italic;
display:inline-block;
padding-right:0.06em;
overflow:visible;
}
/* ============================================================
LAYOUT PRIMITIVES
============================================================ */
.section{padding:var(--space-section-lg) var(--space-side);background:var(--color-bg);position:relative}
.section.size-md{padding-top:var(--space-section-md);padding-bottom:var(--space-section-md)}
.section.size-sm{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
.section + .section{border-top:1px solid var(--color-line)}
@media(max-width:780px){.section{padding-left:var(--space-side-mobile);padding-right:var(--space-side-mobile);padding-top:var(--space-section-md);padding-bottom:var(--space-section-md)}}
.section-inner{max-width:var(--container-max);margin:0 auto;width:100%}
/* ============================================================
SECTION INTRO · unified pattern (num + verb-h + tagline)
============================================================ */
.section-intro{text-align:center;margin-bottom:var(--space-block)}
.section-intro .num{
display:inline-flex;align-items:center;gap:12px;justify-content:center;
font-family:var(--font-mono);font-size:var(--t-xs);font-weight:500;
color:var(--color-accent);letter-spacing:.22em;text-transform:uppercase;
margin-bottom:22px;
}
.section-intro .num::before{
content:""; width:7px; height:7px; border-radius:50%;
background:var(--color-accent); animation:pulseSoft 2.6s ease-in-out infinite;
}
@keyframes pulseSoft{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.section-intro .verb-h{
font-family:var(--font-display); font-weight:700;
font-size:clamp(34px,4.2vw,60px); letter-spacing:-0.03em; line-height:1.12;
color:var(--color-text); max-width:920px; margin:0 auto;
padding:0.04em 0.06em 0.12em; overflow:visible;
}
.section-intro .verb-h em{font-style:italic;color:var(--color-accent);padding-right:0.04em}
.section-intro .verb-h.h-light{font-weight:800;font-size:clamp(36px,4.8vw,72px);letter-spacing:-0.035em;line-height:1.08}
.section-intro .verb-h.h-light em{font-weight:800;font-style:italic}
.section-intro .tagline{
font-family:var(--font-sans); font-size:var(--t-md); line-height:1.6;
color:var(--color-text-muted); max-width:600px;
margin:18px auto 0; text-align:center;
}
/* word wrappers for splits */
.word{display:inline-block;will-change:transform,opacity,filter}
.letter{display:inline-block;will-change:transform,opacity,filter}
/* ============================================================
BUTTONS
============================================================ */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:15px 30px; border-radius:var(--r-pill);
font-family:var(--font-sans); font-size:14px; font-weight:600;
letter-spacing:-0.005em; border:1px solid transparent; cursor:pointer; text-decoration:none;
transition:background .5s var(--ease-smooth),
color .5s var(--ease-smooth),
border-color .5s var(--ease-smooth),
transform .5s var(--ease-smooth),
box-shadow .5s var(--ease-smooth);
user-select:none; white-space:nowrap; position:relative; overflow:hidden;
}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn-dark{background:var(--color-accent);color:#fff}
.btn-dark::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s var(--ease-expo)}
.btn-dark:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 14px 32px var(--color-accent-glow)}
.btn-dark:hover::before{transform:translateX(100%)}
.btn-primary{background:var(--color-accent);color:#fff}
.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 14px 32px var(--color-accent-glow)}
.btn-ghost{background:var(--color-accent);color:#fff;border:1px solid var(--color-accent)}
.btn-ghost:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#fff;transform:translateY(-2px);box-shadow:0 14px 32px var(--color-accent-glow)}
.btn .icon{width:16px;height:16px;stroke-width:2;transition:transform .4s var(--ease-smooth)}
.btn:hover .icon{transform:translateX(4px)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
/* ============================================================
NAVBAR · fixed, glass, refined
============================================================ */
nav.navbar{
position:fixed; top:0; left:0; right:0; z-index:var(--z-sticky);
display:flex; align-items:center; justify-content:space-between;
padding:18px 32px;
background:var(--color-glass);
backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
border-bottom:1px solid transparent;
transition:padding .5s var(--ease-smooth), border-color .4s, background .4s, box-shadow .4s;
}
nav.navbar.is-scrolled{padding:12px 32px; background:rgba(252,254,255,0.97); border-bottom-color:var(--color-line); box-shadow:0 4px 24px -4px rgba(14,14,14,0.10), 0 1px 0 var(--color-line)}
.nav-brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;transition:transform .5s var(--ease-smooth)}
.nav-brand:hover{transform:translateY(-1px)}
.nav-brand img{height:37px;width:auto;transition:height .5s var(--ease-smooth)}
nav.navbar.is-scrolled .nav-brand img{height:31px}
.nav-menu{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.nav-menu > li{position:relative}
.nav-menu a{
position:relative;
font-family:var(--font-sans); font-size:14px; font-weight:500;
color:var(--color-text); padding:6px 0;
display:inline-flex; align-items:center; gap:5px;
transition:color .4s;
}
.nav-menu > li > a::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
background:var(--color-accent); border-radius:1px;
transform:scaleX(0); transform-origin:right;
transition:transform .6s var(--ease-expo);
}
.nav-menu > li > a:hover{color:var(--color-accent)}
.nav-menu > li > a:hover::after,
.nav-menu > li > a[aria-current="page"]::after,
.nav-menu > li.has-child:hover > a::after{transform:scaleX(1);transform-origin:left}
.nav-menu .chev{width:11px;height:11px;stroke-width:2.4;transition:transform .4s var(--ease-smooth);opacity:.6}
.nav-menu > li.has-child:hover > a .chev{transform:rotate(180deg);opacity:1}
/* Dropdown panel */
.nav-dropdown{
position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,-6px);
min-width:220px;padding:8px;
background:rgba(252,254,255,.97);
backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
border:1px solid var(--color-line);border-radius:var(--r-lg);
box-shadow:0 18px 40px -10px rgba(14,14,14,.15),0 0 0 1px rgba(14,14,14,.04);
opacity:0;pointer-events:none;
transition:opacity .25s var(--ease-smooth),transform .3s var(--ease-smooth);
list-style:none;margin:0;z-index:var(--z-sticky);
}
.nav-menu > li.has-child::before{
content:"";position:absolute;left:0;right:0;top:100%;height:18px;
}
.nav-menu > li.has-child:hover > .nav-dropdown,
.nav-menu > li.has-child:focus-within > .nav-dropdown{
opacity:1;pointer-events:auto;transform:translate(-50%,0);
}
.nav-dropdown li{margin:0}
.nav-dropdown a{
display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:11px 14px;border-radius:var(--r-sm);
font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--color-text);
transition:background .25s,color .25s,padding-left .25s var(--ease-smooth);
}
.nav-dropdown a::after{display:none}
.nav-dropdown a .sub{
font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--color-text-2);font-weight:500;transition:color .3s;
}
.nav-dropdown a:hover{background:rgba(254,1,1,0.05);color:var(--color-accent);padding-left:18px}
.nav-dropdown a:hover .sub{color:var(--color-accent)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:10px 20px;font-size:13px}
.nav-toggle{display:none}
.mobile-dropdown{display:none}
/* ── Mobile nav (≤ 980px) ── */
@media(max-width:980px){
nav.navbar{
display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;
}
.nav-brand{margin-right:auto}
/* Hide desktop links */
.nav-menu{display:none}
/* Nav toggle - right side */
.nav-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;
background:transparent;
border:1px solid var(--color-line);
border-radius:var(--r-pill);
cursor:pointer;color:var(--color-text);
transition:border-color .25s, color .25s, background .25s;
flex-shrink:0;
}
.nav-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}
.nav-toggle.is-open{background:var(--color-text);color:#fff;border-color:var(--color-text)}
.nav-toggle svg{width:18px;height:18px}
.nav-toggle .icon-close{display:none}
.nav-toggle .icon-open{display:block}
.nav-toggle.is-open .icon-close{display:block}
.nav-toggle.is-open .icon-open{display:none}
/* Mobile nav-cta: only the hamburger toggle remains visible */
.nav-brand{margin-right:0}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-cta .btn{display:none}
.nav-cta .lang-toggle{display:none}
.mobile-dropdown-links .md-group{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-2);padding:14px 20px 4px;font-weight:500}
.mobile-dropdown-links a.is-child{padding-left:40px;font-size:14px;font-weight:400;color:var(--color-text-muted)}
.mobile-dropdown-links a.is-child .arrow{font-size:11px}
/* ── Dropdown panel ── */
.mobile-dropdown{
display:block;
position:fixed;
top:68px;
right:16px;
width:min(300px, calc(100vw - 32px));
background:rgba(252,254,255,0.94);
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
border:1px solid var(--color-line);
border-radius:var(--r-xl);
box-shadow:0 24px 48px -12px rgba(14,14,14,0.18), 0 0 0 1px rgba(14,14,14,0.04);
overflow:hidden;
opacity:0;
transform:translateY(-8px) scale(0.97);
pointer-events:none;
transform-origin:top right;
transition:opacity .28s var(--ease-smooth), transform .32s var(--ease-smooth);
z-index:1200;
}
.mobile-dropdown.is-open{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:all;
}
.mobile-dropdown-links{list-style:none;margin:0;padding:8px 0}
.mobile-dropdown-links li{margin:0}
.mobile-dropdown-links a{
display:flex;align-items:center;justify-content:space-between;
padding:13px 20px;
font-family:var(--font-sans);font-size:15px;font-weight:500;
color:var(--color-text);letter-spacing:-0.005em;
transition:color .2s, background .2s;
}
.mobile-dropdown-links a:hover{color:var(--color-accent);background:rgba(254,1,1,0.05)}
.mobile-dropdown-links a .arrow{
font-size:12px;color:var(--color-text-2);opacity:0;
transform:translateX(-4px);
transition:opacity .2s, transform .2s var(--ease-smooth);
}
.mobile-dropdown-links a:hover .arrow{opacity:1;transform:translateX(0)}
.mobile-dropdown-divider{height:1px;background:var(--color-line);margin:4px 0}
.mobile-dropdown-footer{
padding:14px 18px 16px;
display:flex;flex-direction:column;align-items:stretch;gap:10px;
background:rgba(14,14,14,0.03);
}
.md-lang-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-3);font-weight:500}
.mobile-dropdown-footer .lang-toggle{display:flex;width:100%;border-color:var(--color-line-2)}
.mobile-dropdown-footer .lang-btn{flex:1;text-align:center;padding:11px 4px;font-size:13px}
.mobile-dropdown-footer .lang-toggle{border-color:var(--color-line-2)}
.mobile-cta-link{
font-family:var(--font-sans);font-size:14px;font-weight:600;
color:var(--color-accent);letter-spacing:-0.005em;
display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 0;
}
}
/* ── Small phones (≤ 480px) ── */
@media(max-width:480px){
nav.navbar{padding:12px 16px}
.nav-brand img{height:32px}
nav.navbar.is-scrolled .nav-brand img{height:27px}
.mobile-dropdown{right:10px;width:calc(100vw - 20px);top:62px}
nav.navbar.is-scrolled ~ .mobile-dropdown{top:54px}
}
/* ============================================================
HERO · one-page (100svh), background slideshow + smoke verb
============================================================ */
.hero{
position:relative; overflow:hidden;
background:var(--color-bg);
min-height:100vh; min-height:100svh;
display:flex; align-items:center; justify-content:center;
padding:120px 32px 80px;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg-slide{
position:absolute; inset:-8%;
background-size:cover; background-position:center;
opacity:0;
transition:opacity 2s var(--ease-expo);
will-change:transform;
}
.hero-bg-slide.is-active{
opacity:1;
animation:kenBurns 28s ease-in-out infinite alternate;
}
@keyframes kenBurns{
0% { transform:scale(1.05) translate(0,0) }
100% { transform:scale(1.22) translate(-1.8%,-1.2%) }
}
.hero.is-out .hero-bg-slide.is-active{animation-play-state:paused}
.hero-overlay{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(252,254,255,0.74) 0%, rgba(252,254,255,0.58) 35%, rgba(252,254,255,0.76) 100%);
}
.hero-vignette{
position:absolute; inset:0; z-index:2; pointer-events:none;
background:radial-gradient(ellipse at center, rgba(252,254,255,0) 30%, rgba(252,254,255,0.5) 90%);
}
/* Fundido inferior: el hero termina disuelto en el color de fondo, sin borde perceptible */
.hero::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:38%;
z-index:4; pointer-events:none;
background:linear-gradient(180deg,
rgba(252,254,255,0) 0%,
rgba(252,254,255,.08) 18%,
rgba(252,254,255,.22) 36%,
rgba(252,254,255,.45) 54%,
rgba(252,254,255,.70) 72%,
rgba(252,254,255,.92) 88%,
var(--color-bg) 100%);
}
.hero-grid-bg{
position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.22;
background-image:
linear-gradient(rgba(14,14,14,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(14,14,14,.06) 1px, transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse at center, black 22%, transparent 70%);
-webkit-mask-image:radial-gradient(ellipse at center, black 22%, transparent 70%);
}
.hero-inner{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:var(--container-max)}
.hero-eyebrow{
display:inline-flex; align-items:center; gap:14px;
font-family:var(--font-mono); font-size:12px; font-weight:500;
letter-spacing:.22em; text-transform:uppercase; color:var(--color-accent);
background:rgba(252,254,255,.86); border:1px solid var(--color-line);
padding:10px 18px; border-radius:var(--r-pill);
margin-bottom:20px;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
opacity:0;
}
.hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);animation:pulseSoft 2.6s ease-in-out infinite}
.verb-stage{position:relative;width:100%;height:clamp(140px,16vw,240px);display:flex;align-items:center;justify-content:center;margin-bottom:0}
.verb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;gap:30px}
.verb h1,.verb .verb-h1{
font-family:var(--font-display); font-weight:900;
font-size:clamp(44px,7.5vw,100px); letter-spacing:-0.045em; line-height:1.05;
color:var(--color-text); margin:0; text-align:center;
padding:0.05em 0.08em 0.1em; overflow:visible;
}
.verb h1 .accent,.verb .verb-h1 .accent{color:var(--color-accent)}
.verb h1 em,.verb .verb-h1 em{color:var(--color-accent);font-style:italic;font-weight:900;padding-right:0.1em}
.vl-tag .accent{color:var(--color-accent)}
.verb-tag{
font-family:var(--font-display); font-weight:600;
font-size:clamp(18px,2.2vw,32px);
color:var(--color-text); letter-spacing:-0.02em; line-height:1.2;
margin:0; max-width:660px; text-align:center;
opacity:0;
}
.verb-tag em{color:var(--color-accent);font-style:italic;font-weight:700}
.vt-detail{
display:block;
font-family:var(--font-sans); font-weight:400;
font-size:24px; line-height:1.6;
letter-spacing:0em;
color:var(--color-text-muted);
margin-top:14px;
}
.hero-sub{
margin-top:10px; max-width:680px; text-align:center;
font-size:19px; line-height:1.6; color:var(--color-text-muted); font-weight:500;
text-shadow:0 1px 2px rgba(252,254,255,.5);
opacity:0;
}
/* Editorial line-break utility: extra
only on mobile */
.br-mobile{display:none}
@media(max-width:640px){.br-mobile{display:inline}}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:36px;opacity:0;transform:translateY(20px)}
.verb-indicators{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:36px;opacity:0;flex-wrap:nowrap}
.vi{
display:inline-block;
width:6px; height:6px; border-radius:50%;
padding:0; border:0; background:rgba(252,254,255,.55);
cursor:pointer;
font-size:0; line-height:0; color:transparent;
transition:width .35s var(--ease-smooth), background-color .35s var(--ease-smooth), border-radius .35s var(--ease-smooth);
}
.vi:hover{background:rgba(252,254,255,.85)}
.vi.active{
width:22px; border-radius:3px;
background:var(--color-accent);
}
.vi .dot-i{display:none}
100%{top:36px}}
@media(max-width:980px){
.hero{padding:110px 24px 80px}
.verb-stage{height:clamp(100px,15vw,150px)}
}
/* ============================================================
ANNOUNCEMENT TOP-BAR · InfoComm 2026
Fixed at top:0 above the navbar. Navbar shifts to top:42px
while .has-ic-topbar is on . Close button removes both.
============================================================ */
.ic-topbar{
position:fixed; top:0; left:0; right:0; z-index:1101;
width:100%;
background:#5a1ea8 url('/Images/Infocomm/Gradient.jpg') center/cover no-repeat;
color:#fff;
isolation:isolate;
font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
.ic-topbar::before{
content:""; position:absolute; inset:0; z-index:0;
background:linear-gradient(90deg, rgba(20,5,38,.28), rgba(20,5,38,.04) 55%, rgba(20,5,38,.10));
pointer-events:none;
}
.ic-topbar-inner{
position:relative; z-index:1;
max-width:1380px; margin:0 auto;
min-height:42px;
display:flex; align-items:center; justify-content:center; gap:18px;
padding:5px 18px 5px 22px;
}
.ic-msg{
margin:0; display:flex; align-items:center; gap:11px; min-width:0;
font-size:13px; font-weight:500; letter-spacing:.005em;
color:rgba(255,255,255,.96);
text-shadow:0 1px 8px rgba(25,0,45,.35);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ic-msg b{ font-weight:700; color:#fff; }
.ic-msg .sep{ opacity:.55; font-weight:400; }
.ic-msg .meta{ color:rgba(255,255,255,.9); font-weight:500; }
.ic-mark{ flex:0 0 auto; height:18px; width:auto; display:block; margin-right:-4px; }
.ic-pass{
flex:0 0 auto;
display:inline-flex; align-items:center; gap:7px;
background:#fff; color:#E41C4C;
font-family:inherit; font-weight:700; font-size:11.5px;
letter-spacing:.09em; text-transform:uppercase;
padding:6px 15px; border-radius:40px; text-decoration:none;
box-shadow:0 2px 10px rgba(18,0,40,.18);
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.ic-pass:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(18,0,40,.34); }
.ic-pass .arr{ width:13px; height:13px; flex:0 0 auto; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.ic-pass:hover .arr{ transform:translateX(3px); }
.ic-close{
position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:2;
width:24px; height:24px; border:0; background:transparent; cursor:pointer;
color:rgba(255,255,255,.7); display:grid; place-items:center; border-radius:50%;
transition:color .3s, background .3s;
}
.ic-close:hover{ color:#fff; background:rgba(255,255,255,.14); }
.ic-close svg{ width:13px; height:13px; }
/* Push body + navbar down by 42px when banner is visible */
body.has-ic-topbar{ padding-top:42px; }
body.has-ic-topbar nav.navbar{ top:42px; }
/* Tablet / small phones */
@media(max-width:640px){
.ic-topbar-inner{ justify-content:flex-start; gap:10px; padding:5px 40px 5px 16px; }
.ic-msg .meta{ display:none; }
.ic-msg{ font-size:12.5px; }
.ic-pass{ margin-left:auto; }
.ic-close{ right:8px; }
}
/* Very narrow phones */
@media(max-width:380px){
.ic-msg b .long{ display:none; }
}
/* ============================================================
HERO · InfoComm 2026 first-spawn slide (Las Vegas + discount card)
Shows first on page load. Fades out after ~8s. Returnable via 4th dot.
z-index:8 keeps it below the navbar (z-sticky:1100).
============================================================ */
.hero-ic{
position:absolute; inset:0; z-index:8;
display:flex; flex-direction:column;
overflow:hidden; isolation:isolate;
color:#fff;
font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif;
/* Background: real photo with purple fallback color if the file fails to load.
The dark legibility wash is applied separately via the ::after pseudo-element. */
background-color:#5a1ea8;
background-image:url('/Images/Infocomm/Group%208.jpg?v=20260603');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transition:opacity 0.9s cubic-bezier(.2,.7,.2,1);
pointer-events:none;
}
.hero-ic.is-in{ opacity:1; pointer-events:auto; }
.hero-ic.is-gone{ display:none; }
/* Dark wash for legibility over the bright gradient */
.hero-ic::after{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(130% 100% at 28% 32%, rgba(40,12,70,.30) 0%, rgba(30,8,52,.52) 100%),
linear-gradient(to bottom, rgba(17,16,20,.46) 0%, rgba(20,8,40,.30) 30%, rgba(20,8,40,.34) 60%, rgba(20,5,38,.62) 100%);
}
.hero-ic > *{ position:relative; z-index:2; }
/* shared Anton + gradient text utilities, scoped */
.hero-ic .anton{
font-family:"Anton","Arial Narrow",Impact,"Helvetica Neue",Arial,sans-serif;
font-weight:400; text-transform:uppercase; line-height:1; letter-spacing:.004em;
}
.hero-ic .grad-text{
background:linear-gradient(95deg,#4A1A8C,#8B1FB0 28%,#E41C4C 56%,#E9440A 80%,#F5C500);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:#E41C4C;
}
/* ---- buttons (poster DNA: white pill, crimson text) ---- */
.hero-ic .ic-btn{
display:inline-flex; align-items:center; justify-content:center; gap:11px;
font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif;
font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
padding:16px 34px; border-radius:40px; border:1px solid transparent;
cursor:pointer; white-space:nowrap; text-decoration:none;
transition:transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s, background .35s, color .35s, border-color .35s;
}
.hero-ic .ic-btn .arr{ width:16px; height:16px; transition:transform .35s cubic-bezier(0.22,1,0.36,1); }
.hero-ic .ic-btn:hover .arr{ transform:translateX(4px); }
.hero-ic .ic-btn-ghost-w{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.5); }
.hero-ic .ic-btn-ghost-w:hover{ transform:translateY(-2px); background:rgba(255,255,255,.18); border-color:#fff; }
.hero-ic .ic-btn-red{ background:#E41C4C; color:#fff; }
.hero-ic .ic-btn-red:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(228,28,76,.34); }
/* ---- hero body grid ---- */
.hero-ic .hero-ic-body{
flex:1; max-width:1240px; width:100%; margin:0 auto;
padding:clamp(96px,12vh,140px) clamp(22px,4vw,48px) 30px;
display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center;
}
.hero-ic .hero-ic-copy{ max-width:600px; }
.hero-ic .hero-ic-copy .ic-logo{
height:clamp(104px,14vw,168px); width:auto; margin:6px 0 28px;
filter:drop-shadow(0 8px 30px rgba(28,0,52,.32));
}
.hero-ic .hero-ic-copy h1{
margin:0 0 24px; padding-bottom:.04em;
font-family:"Anton","Arial Narrow",Impact,"Helvetica Neue",Arial,sans-serif;
font-weight:400; text-transform:uppercase;
font-size:clamp(44px,6.4vw,92px); line-height:.96; letter-spacing:-.004em;
color:#fff; text-shadow:0 6px 40px rgba(35,0,60,.4);
}
.hero-ic .hero-ic-actions{ display:flex; gap:14px; flex-wrap:wrap; }
/* ---- discount code card ---- */
.hero-ic .codecard{
background:#fff; color:#1A1A1A;
border-radius:24px; padding:34px;
justify-self:end; width:100%; max-width:440px;
box-shadow:0 40px 90px -36px rgba(18,0,40,.6), 0 4px 14px rgba(18,0,40,.18);
}
.hero-ic .codecard .ch{ margin-bottom:24px; }
.hero-ic .codecard .ck{
font-family:"Inter Tight",sans-serif; font-weight:700;
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:#E41C4C; margin:0 0 7px;
}
.hero-ic .codecard h2{
font-family:"Anton","Arial Narrow",Impact,sans-serif;
font-weight:400; text-transform:uppercase;
font-size:clamp(24px,2.6vw,32px); line-height:1.02; letter-spacing:.004em;
color:#1A1A1A; margin:0 0 8px;
}
.hero-ic .codecard p{ margin:0; font-size:13.5px; line-height:1.55; color:#444; }
.hero-ic .codecard .codebox{
display:flex; flex-direction:column; align-items:center; text-align:center;
border:1px dashed #E0E0E0; border-radius:16px;
padding:22px 16px 18px; margin:0 0 22px; background:#FCFAFB;
}
.hero-ic .codecard .codebox .code{
display:block; font-size:clamp(48px,7vw,68px); line-height:1; letter-spacing:.04em; margin:0 0 6px;
}
.hero-ic .codecard .codebox .codel{
font-family:"Inter Tight",sans-serif; font-weight:700;
font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#9A9A9A;
}
.hero-ic .codecard .ic-btn{ width:100%; padding:17px 34px; }
/* ---- event meta strip ---- */
.hero-ic .partners{
max-width:1240px; width:100%; margin:0 auto;
padding:8px clamp(22px,4vw,48px) clamp(28px,4vw,44px);
display:flex; align-items:center; gap:clamp(28px,4vw,56px); flex-wrap:wrap;
}
.hero-ic .partners .logos{
display:flex; align-items:center; gap:clamp(26px,4vw,52px); flex-wrap:wrap; flex:1;
}
.hero-ic .partners .lg.meta{
display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px;
cursor:default; color:rgba(255,255,255,.78);
font-family:"Inter Tight",sans-serif; font-weight:700;
}
.hero-ic .partners .ml{
font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:rgba(255,255,255,.6);
}
.hero-ic .partners .mv{
font-size:clamp(17px,1.6vw,22px); color:#fff; letter-spacing:.01em;
}
/* ---- responsive: tablet ---- */
@media (max-width:960px){
.hero-ic .hero-ic-body{
grid-template-columns:1fr; gap:36px; padding-top:96px;
}
.hero-ic .codecard{ justify-self:stretch; max-width:560px; margin:0 auto; }
}
/* ---- responsive: phone ---- */
@media (max-width:640px){
.hero-ic .hero-ic-body{
padding-top:88px; padding-bottom:24px; gap:30px; align-content:center;
}
.hero-ic .hero-ic-copy{
max-width:none; text-align:center;
display:flex; flex-direction:column; align-items:center;
}
.hero-ic .hero-ic-copy .ic-logo{ height:clamp(104px,30vw,150px); margin:2px auto 22px; }
.hero-ic .hero-ic-copy h1{ font-size:clamp(52px,15vw,76px); margin-bottom:22px; }
.hero-ic .hero-ic-actions{ flex-direction:column; align-items:stretch; width:100%; gap:12px; }
.hero-ic .hero-ic-actions .ic-btn{ width:100%; padding:17px 28px; font-size:13px; }
.hero-ic .codecard{ max-width:560px; margin:0 auto; padding:28px 24px; }
.hero-ic .partners{
padding-top:6px; padding-bottom:36px; justify-content:center;
}
.hero-ic .partners .logos{
display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%;
justify-items:center; align-items:center; padding:6px 0;
}
.hero-ic .partners .lg.meta{
align-items:center; text-align:center; gap:9px; padding:14px 8px; position:relative;
}
.hero-ic .partners .lg.meta:nth-child(even){
align-items:flex-start; text-align:left; padding-left:22px;
}
.hero-ic .partners .lg.meta:nth-child(odd)::after{
content:""; position:absolute; right:-4px; top:18%; height:64%; width:1px;
background:rgba(255,255,255,.16);
}
.hero-ic .partners .ml{ font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.66); }
.hero-ic .partners .mv{ font-size:30px; line-height:1.04; }
}
/* Hide non-essential hero layers while InfoComm is showing,
but keep .verb-indicators visible and clickable above the overlay. */
.hero.has-ic .hero-bg,
.hero.has-ic .hero-overlay,
.hero.has-ic .hero-vignette,
.hero.has-ic .hero-grid-bg,
.hero.has-ic .verb-stage,
.hero.has-ic .hero-sub,
.hero.has-ic .hero-actions{
opacity:0;
transition:opacity 0.7s ease;
}
/* Indicators sit ABOVE the InfoComm overlay (z-index:8) */
.verb-indicators{ position:relative; z-index:10; }
/* 4th indicator dot (white) - InfoComm */
.vi.vi-ic{ background:rgba(255,255,255,0.7); }
.vi.vi-ic:hover{ background:#fff; }
.vi.vi-ic.active{ width:22px; border-radius:3px; background:#fff; }
/* ============================================================
ECO PILLARS · Expanding panels (4 pillars)
============================================================ */
.eco-pillars{
display:flex;gap:12px;min-height:440px;margin-bottom:48px;align-items:stretch;
}
@media(max-width:980px){.eco-pillars{flex-direction:column;gap:8px;min-height:auto}}
.pillar{
position:relative;flex:1;overflow:hidden;border-radius:var(--r-lg);
cursor:pointer;box-shadow:var(--shadow-md);background:var(--raw-off-black);min-width:0;
transition:flex .72s var(--ease-smooth),box-shadow .5s;outline:none;
}
.pillar.is-open{flex:5;cursor:default}
.pillar:focus-visible{box-shadow:var(--shadow-md),0 0 0 3px var(--color-accent-soft)}
@media(max-width:980px){
.pillar{min-height:72px}
.pillar.is-open{min-height:340px}
}
/* Background image */
.pillar-bg{position:absolute;inset:0;z-index:0}
.pillar-bg img{
width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.82);
transition:transform 1.2s var(--ease-smooth),filter .7s;
}
.pillar.is-open .pillar-bg img{transform:scale(1.04);filter:saturate(1)}
#eco-pillars .pillar:nth-child(3) .pillar-bg img{object-position:100% center;transform:scale(1.5)}
@media(max-width:980px){#eco-pillars .pillar:nth-child(3) .pillar-bg img{object-position:center center;transform:none}}
#eco-pillars .pillar:nth-child(4) .pillar-bg img{object-position:65% 20%}
@media(max-width:980px){#eco-pillars .pillar:nth-child(4) .pillar-bg img{object-position:55% 15%}}
#eco-pillars .pillar:nth-child(5) .pillar-bg img{object-position:center 20%}
@media(max-width:980px){#eco-pillars .pillar:nth-child(5) .pillar-bg img{object-position:center 15%}}
/* Overlay */
.pillar-overlay{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:transparent;
transition:background .6s;
}
.pillar.is-open .pillar-overlay{
background:linear-gradient(0deg,rgba(14,14,14,.96) 0%,rgba(14,14,14,.7) 55%,rgba(14,14,14,.24) 100%);
}
/* Expand hint - "Saber más" text pill */
.pillar-hint{
position:absolute;bottom:24px;right:18px;z-index:3;
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;border-radius:var(--r-pill);
background:rgba(252,254,255,.14);border:1px solid rgba(252,254,255,.28);
color:#fff;
font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.01em;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:background .35s,border-color .35s,transform .35s var(--ease-smooth),opacity .25s;
pointer-events:none;white-space:nowrap;
}
.pillar:hover .pillar-hint{background:var(--color-accent);border-color:var(--color-accent);transform:translateY(-2px)}
.pillar.is-open .pillar-hint{opacity:0}
/* Collapsed label */
.pillar-label{
position:absolute;inset:0;z-index:2;
/* center the rotated title on the vertical axis (pushed to the left edge) so it clears the bottom button */
display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
padding:28px 22px 28px 6px;
transition:opacity .28s;
}
.pillar.is-open .pillar-label{opacity:0;pointer-events:none}
.pillar-label-cat{display:none}
.pillar-label-title{
writing-mode:vertical-rl;transform:rotate(180deg);
font-family:var(--font-display);font-weight:700;font-size:clamp(26px,2.6vw,36px);
letter-spacing:-.028em;line-height:1;
color:#fff;white-space:nowrap;overflow:hidden;
text-shadow:0 2px 12px rgba(14,14,14,.7),0 1px 3px rgba(14,14,14,.5);
}
/* Mobile: horizontal label (stack is vertical so text reads normally) */
@media(max-width:980px){
.pillar-label{
flex-direction:row;align-items:center;justify-content:flex-start;
padding:0 20px;height:72px;
}
.pillar-label-title{
writing-mode:horizontal-tb;transform:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-size:clamp(18px,4vw,22px);
}
.pillar-hint{top:50%;bottom:auto;transform:translateY(-50%);right:16px}
.pillar:hover .pillar-hint{transform:translateY(-50%) translateY(-2px)}
}
/* Close button - same pill style as .pillar-hint */
.pillar-close{
position:absolute;bottom:24px;right:18px;z-index:5;
display:none;align-items:center;justify-content:center;gap:6px;
padding:7px 14px;border-radius:var(--r-pill);
background:rgba(252,254,255,.14);border:1px solid rgba(252,254,255,.28);
color:#fff;cursor:pointer;white-space:nowrap;
font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.01em;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:background .35s,border-color .35s,transform .35s var(--ease-smooth);
}
.pillar.is-open .pillar-close{display:inline-flex}
.pillar-close:hover{background:var(--color-accent);border-color:var(--color-accent);transform:translateY(-2px)}
/* Expanded detail */
.pillar-detail{
position:absolute;inset:0;z-index:3;
display:flex;flex-direction:column;justify-content:flex-end;
/* extra bottom space so title/CTA never overlap the pillar-close button */
padding:32px 32px 88px;overflow-y:auto;
opacity:0;pointer-events:none;
transition:opacity .38s .18s;
}
.pillar.is-open .pillar-detail{opacity:1;pointer-events:auto}
@media(max-width:980px){
.pillar-detail{padding:64px 22px 80px;justify-content:flex-start}
}
.pillar-detail-num{
font-family:var(--font-sans);font-size:13px;font-weight:400;
letter-spacing:0em;text-transform:none;line-height:1.4;
color:#fff;margin-bottom:8px;display:block;opacity:.85;
}
.pillar-detail h3{
font-family:var(--font-display);font-weight:700;
font-size:clamp(20px,2vw,26px);letter-spacing:-.028em;
line-height:1.2;color:#fff;
margin:0 0 12px;padding-bottom:.04em;overflow:visible;
}
.pillar-detail p{
font-size:14px;line-height:1.55;color:#fff;margin:0 0 14px;
max-width:560px;
}
.pillar-detail ul{
list-style:none;padding:14px 0 0;margin:0;
border-top:1px solid rgba(252,254,255,.14);
display:flex;flex-direction:column;gap:7px;
}
.pillar-detail ul li{
font-family:var(--font-sans);font-size:13px;
color:#fff;
display:flex;align-items:flex-start;gap:9px;line-height:1.42;
}
.pillar-detail ul li::before{
content:"";flex-shrink:0;width:4px;height:4px;border-radius:50%;
background:var(--color-accent);margin-top:7px;
}
.pillar-detail .pillar-cta{
align-self:flex-start;margin-top:4px;
padding:11px 20px;font-size:13px;
}
.pillar-detail .pillar-cta .icon{width:14px;height:14px}
@media(max-width:980px){
.pillar-detail .pillar-cta{align-self:center;margin-top:14px}
}
/* ============================================================
HUMAN GRID · collage 4 fotos + texto editorial
============================================================ */
.human-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.human-grid.text-right{grid-template-columns:1.1fr 1fr}
.human-grid.text-right .human-text{order:2}
.human-grid.text-right .human-photos{order:1}
#aulas .human-grid{grid-template-areas:"photos text" "photos actions";grid-template-rows:auto auto;align-items:start;row-gap:24px}
#aulas .human-photos{grid-area:photos;align-self:center}
#aulas .human-text{grid-area:text}
#aulas .aulas-actions{grid-area:actions}
@media(max-width:980px){
.human-grid,.human-grid.text-right{grid-template-columns:1fr;gap:36px}
.human-grid.text-right .human-text{order:1}
.human-grid.text-right .human-photos{order:2}
#aulas .human-grid{grid-template-areas:none;grid-template-rows:auto;row-gap:36px}
#aulas .human-photos{grid-area:auto;align-self:auto;order:2}
#aulas .human-text{grid-area:auto;order:1}
#aulas .aulas-actions{grid-area:auto;order:3}
}
.human-text h3{
font-family:var(--font-display); font-weight:700;
font-size:clamp(28px,3.4vw,44px); letter-spacing:-0.025em; line-height:1.12;
margin:0; color:var(--color-text);
padding:0.04em 0.04em 0.08em; overflow:visible;
}
.human-text h3 em{font-style:italic;color:var(--color-accent);padding-right:0.04em}
/* Section 02 & 04 subtitle → H3 style from design system */
#aulas .human-text h3,
#about .human-text h3{
font-weight:600; font-size:clamp(20px,2.2vw,32px);
letter-spacing:-0.02em; line-height:1.2;
padding:0;
}
.human-text p{margin:18px 0 0;font-size:17px;line-height:1.65;color:var(--color-text-muted);max-width:540px}
.human-text .hand{
font-family:var(--font-script); color:var(--color-accent);
font-size:30px; font-weight:600; display:inline-block;
transform:rotate(-2deg); margin-top:14px;
}
/* Impact stats strip - DS aligned (display numerals + Body S labels, single row) */
.impact-stats{
display:flex; flex-wrap:nowrap; align-items:flex-start;
gap:0; margin-top:24px; padding:16px 0;
border-top:1px solid var(--color-line);
border-bottom:1px solid var(--color-line);
}
.impact-stats .is-item{
display:flex; flex-direction:column; gap:4px;
flex:1 1 0; min-width:0;
}
.impact-stats .is-item + .is-item{
padding-left:16px; margin-left:16px; border-left:1px solid var(--color-line);
}
.impact-stats .is-item strong{
font-family:var(--font-display); font-weight:700;
font-size:clamp(18px,1.6vw,22px); letter-spacing:-0.02em;
color:var(--color-accent); line-height:1;
}
.impact-stats .is-item span{
font-family:var(--font-sans); font-size:var(--fs-sm,14px); font-weight:400;
color:var(--color-text-muted); line-height:var(--lh-base,1.5);
letter-spacing:0; text-transform:none;
}
@media(max-width:980px){
.impact-stats{flex-wrap:wrap}
.impact-stats .is-item{flex:1 1 45%}
.impact-stats .is-item + .is-item{
padding-left:0; margin-left:0; border-left:0;
}
.impact-stats .is-item:nth-child(n+3){
border-top:1px dashed var(--color-line); padding-top:10px; margin-top:6px;
}
}
.human-photos{position:relative;width:100%;height:520px}
@media(max-width:980px){.human-photos{height:420px}}
/* DS editorial collage - base layer */
.img-col-ph{
position:absolute; border-radius:var(--r-md); overflow:hidden;
transform:translateZ(0); will-change:transform; isolation:isolate;
box-shadow:0 14px 28px -8px rgba(14,14,14,.15),
0 36px 70px -12px rgba(14,14,14,.20),
0 0 0 1px rgba(14,14,14,.06);
}
.img-col-ph img{width:100%;height:100%;object-fit:cover;transition:transform 14s var(--ease-smooth)}
.img-col-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(14,14,14,.4));pointer-events:none}
.human-photos.is-revealed .img-col-ph img{transform:scale(1.06)}
/* ic-1–6: uniform size, varied position & rotation */
.ic-1{top:2%;right:0;width:47%;height:47%;transform:rotate(-2deg);animation:floatPh1 11s ease-in-out infinite}
.ic-2{top:0;left:0;width:47%;height:47%;transform:rotate(2.5deg);animation:floatPh2 13s ease-in-out -2s infinite}
.ic-3{bottom:0;left:2%;width:47%;height:47%;transform:rotate(1.5deg);animation:floatPh3 12s ease-in-out -4s infinite}
.ic-4{bottom:2%;right:0;width:46%;height:46%;transform:rotate(-2.5deg);animation:floatPh4 10s ease-in-out -1s infinite}
.ic-5{top:26%;left:18%;width:46%;height:46%;transform:rotate(1deg);animation:floatPh5 14s ease-in-out -3s infinite}
.ic-6{top:28%;right:16%;width:46%;height:46%;transform:rotate(-1.5deg);animation:floatPh6 12s ease-in-out -5s infinite}
@keyframes floatPh1{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(-2deg)}}
@keyframes floatPh2{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes floatPh3{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes floatPh4{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes floatPh5{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
@keyframes floatPh6{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(-2deg)}}
.img-col-ph .ph-cap{
position:absolute; left:14px; bottom:12px; z-index:3;
font-family:var(--font-mono); font-size:9.5px; letter-spacing:.15em;
text-transform:uppercase; color:#fff;
background:rgba(0,0,0,.45); padding:5px 10px; border-radius:var(--r-pill);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.aulas-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.ac-chip{
display:inline-flex;align-items:center;gap:4px;
font-family:var(--font-sans);font-size:12px;font-weight:500;
padding:4px 12px;border-radius:var(--r-pill);
background:rgba(252,254,255,1);border:1px solid var(--color-line);
color:var(--color-text);cursor:pointer;white-space:nowrap;
transition:background .25s,border-color .25s,color .25s;
text-decoration:none;
}
.ac-chip:hover,.ac-chip.is-active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
/* collage highlight on chip hover - center + enlarge active photo */
#aulas .img-col-ph{
transition:opacity .4s ease, filter .4s ease,
top .45s cubic-bezier(.4,0,.2,1),
left .45s cubic-bezier(.4,0,.2,1),
width .45s cubic-bezier(.4,0,.2,1),
height .45s cubic-bezier(.4,0,.2,1);
}
#aulas .img-col-ph::after{display:none}
#aulas .human-photos.chip-hover .img-col-ph{opacity:.12;filter:grayscale(.5)}
#aulas .human-photos.chip-hover .img-col-ph.is-highlight{
top:12% !important; left:50% !important;
right:auto !important; bottom:auto !important;
width:80% !important; height:76% !important;
transform:translateX(-50%) !important;
animation:none !important;
z-index:10; opacity:1; filter:none;
}
/* ============================================================
SOCIAL IMPACT REEL · Section 04 (#about)
============================================================ */
#about .section-intro--left{
text-align:left;
margin-bottom:24px;
}
#about .section-intro--left .num{
justify-content:flex-start;
margin-bottom:14px;
}
#about .section-intro--left .verb-h{
margin:0;
max-width:none;
font-size:clamp(38px,4.6vw,64px);
line-height:1.05;
letter-spacing:-0.035em;
padding:0;
}
#about .human-text h3{
margin-top:18px;
}
#about .reel-stage{
position:relative;
width:100%;
min-height:560px;
display:flex;
align-items:center;
justify-content:center;
isolation:isolate;
overflow:visible;
}
#about .reel-glow{
position:absolute; inset:-10%;
background:
radial-gradient(circle at 30% 25%, rgba(254,1,1,.18), transparent 55%),
radial-gradient(circle at 75% 80%, rgba(60,110,255,.14), transparent 55%);
filter:blur(50px);
z-index:-1;
pointer-events:none;
}
#about .reel-carousel{
position:relative;
width:min(340px, 90%);
aspect-ratio:9 / 16;
perspective:1400px;
}
#about .reel-track{
position:absolute; inset:0;
transform-style:preserve-3d;
pointer-events:none;
}
#about .reel-card{
position:absolute;
top:50%; left:50%;
width:100%; height:100%;
margin:0;
border-radius:26px;
overflow:hidden;
background:#0a0a0a;
box-shadow:
0 30px 60px -20px rgba(14,14,14,.45),
0 14px 28px -10px rgba(14,14,14,.32),
inset 0 0 0 1px rgba(255,255,255,.04);
--ox:0%; --s:1; --r:0deg; --o:0; --z:1;
transform:translate(-50%,-50%) translateX(var(--ox)) scale(var(--s)) rotateY(var(--r));
opacity:var(--o);
z-index:var(--z);
pointer-events:none;
transition:none;
cursor:default;
will-change:transform, opacity;
}
#about .reel-card.is-active{
--ox:0%; --s:1; --r:0deg; --o:1; --z:5;
pointer-events:auto;
}
#about .reel-card.is-active iframe.reel-video{ pointer-events:auto; }
#about .reel-card.is-prev1{
--ox:-68%; --s:.78; --r:22deg; --o:.68; --z:4;
pointer-events:auto;
cursor:pointer;
}
#about .reel-card.is-next1{
--ox:68%; --s:.78; --r:-22deg; --o:.68; --z:4;
pointer-events:auto;
cursor:pointer;
}
#about .reel-card.is-prev2{
--ox:-118%; --s:.58; --r:32deg; --o:.28; --z:3;
}
#about .reel-card.is-next2{
--ox:118%; --s:.58; --r:-32deg; --o:.28; --z:3;
}
#about .reel-card::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.18));
opacity:0;
transition:opacity .4s ease;
pointer-events:none;
}
#about .reel-card.is-prev1::after,
#about .reel-card.is-next1::after,
#about .reel-card.is-prev2::after,
#about .reel-card.is-next2::after{
opacity:1;
background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.45) 100%);
}
#about .reel-video{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
display:block;
z-index:1;
border:0;
}
/* Iframe-based reel: hide controls/progress/sound that need a HTMLMediaElement API */
#about iframe.reel-video ~ .reel-sound,
#about iframe.reel-video ~ .reel-tap,
#about iframe.reel-video ~ .reel-prog{ display:none; }
#about .reel-card:has(iframe.reel-video) ~ .reel-sound,
#about .reel-carousel:has(iframe.reel-video) .reel-sound,
#about .reel-carousel:has(iframe.reel-video) .reel-tap,
#about .reel-carousel:has(iframe.reel-video) .reel-prog{ display:none; }
#about .reel-eyebrow{
position:absolute;
top:18px; left:18px;
z-index:4;
font-family:var(--font-mono);
font-size:10px;
letter-spacing:.18em;
text-transform:uppercase;
color:#fff;
background:rgba(0,0,0,.42);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
padding:6px 10px;
border-radius:var(--r-pill);
pointer-events:none;
}
#about .reel-sound{
position:absolute;
top:14px; right:14px;
z-index:5;
width:38px; height:38px;
border-radius:50%;
border:0;
background:rgba(0,0,0,.42);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
color:#fff;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:transform .2s ease, background .2s ease;
}
#about .reel-sound:hover{ transform:scale(1.06); background:rgba(0,0,0,.62); }
#about .reel-sound svg{ width:18px; height:18px; }
#about .reel-sound .ic-sound{ display:none; }
#about .reel-sound.is-on .ic-mute{ display:none; }
#about .reel-sound.is-on .ic-sound{ display:block; }
#about .reel-tap{
position:absolute; inset:0;
background:transparent; border:0;
z-index:3;
cursor:pointer;
}
#about .reel-tap::after{
content:"";
position:absolute; left:50%; top:50%;
width:84px; height:84px;
border-radius:50%;
background:rgba(0,0,0,.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
opacity:0;
transform:translate(-50%,-50%) scale(.7);
transition:opacity .25s ease, transform .25s ease;
background-image:url("data:image/svg+xml;utf8,");
background-size:38px;
background-repeat:no-repeat;
background-position:56% center;
}
#about .reel-tap.is-paused::after{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
#about .reel-prog{
position:absolute; left:14px; right:14px; bottom:12px;
height:2px;
background:rgba(255,255,255,.22);
border-radius:2px;
z-index:4;
overflow:hidden;
pointer-events:none;
}
#about .reel-prog-fill{
height:100%; width:0%;
background:#fff;
border-radius:2px;
transition:width .12s linear;
}
#about .reel-dots{ display:none; }
#about .reel-nav{
position:absolute;
top:50%; transform:translateY(-50%);
z-index:7;
width:42px; height:42px;
border-radius:50%;
border:0;
background:rgba(14,14,14,.62);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
color:#fff;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:transform .2s ease, background .2s ease;
}
#about .reel-nav:hover{ background:rgba(14,14,14,.82); transform:translateY(-50%) scale(1.06); }
#about .reel-nav:active{ transform:translateY(-50%) scale(.94); }
#about .reel-nav svg{ width:20px; height:20px; }
#about .reel-prev{ left:-58px; }
#about .reel-next{ right:-58px; }
#about .reel-dots{
position:absolute;
left:50%; bottom:-28px;
transform:translateX(-50%);
z-index:7;
display:flex; gap:8px;
pointer-events:auto;
}
#about .reel-dots span{
width:6px; height:6px; border-radius:50%;
background:var(--color-line);
cursor:pointer;
transition:width .35s var(--ease-smooth), background-color .35s var(--ease-smooth), border-radius .35s var(--ease-smooth);
}
#about .reel-dots span:hover{ background:var(--color-text-2); }
#about .reel-dots span:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
#about .reel-dots span.is-active{
width:22px; border-radius:3px;
background:var(--color-accent);
}
@media(max-width:980px){
#about .reel-stage{ min-height:auto; padding:24px 0; }
#about .reel-carousel{ width:min(320px,82%); }
#about .reel-prev{ left:-46px; }
#about .reel-next{ right:-46px; }
}
@media(max-width:700px){
#about .reel-nav{ width:38px; height:38px; background:rgba(14,14,14,.7); }
#about .reel-carousel{ width:min(260px,72%); }
#about .reel-prev{ left:-44px; }
#about .reel-next{ right:-44px; }
}
@media(max-width:560px){
#about .reel-carousel{ width:min(240px,68%); }
#about .reel-nav{ width:34px; height:34px; }
#about .reel-nav svg{ width:18px; height:18px; }
#about .reel-prev{ left:-40px; }
#about .reel-next{ right:-40px; }
#about .reel-card{ border-radius:22px; }
#about .reel-eyebrow{ top:14px; left:14px; font-size:9.5px; padding:5px 9px; }
#about .reel-sound{ top:12px; right:12px; width:34px; height:34px; }
#about .reel-sound svg{ width:16px; height:16px; }
#about .reel-card.is-prev1{ --ox:-62%; --s:.72; }
#about .reel-card.is-next1{ --ox:62%; --s:.72; }
#about .reel-card.is-prev2,
#about .reel-card.is-next2{ --o:0; }
}
/* ============================================================
VOICES CAROUSEL · Section 05 (voc-carousel layout)
============================================================ */
.voc-carousel{position:relative}
.voc-track-wrap{overflow:hidden;margin:0 -4px;padding:4px}
.voc-track{display:flex;gap:24px;transition:transform .7s var(--ease-smooth);will-change:transform}
.voc-card{
position:relative;overflow:hidden;
flex:0 0 calc((100% - 48px) / 3);
border-radius:var(--r-lg);background:var(--color-sunken);
aspect-ratio:4/5;
cursor:pointer;
opacity:0;transform:translateY(20px);
transition:opacity .6s var(--ease-smooth),transform .6s var(--ease-smooth),box-shadow .6s var(--ease-smooth);
box-shadow:var(--shadow-sm);
}
@media(max-width:980px){.voc-card{flex:0 0 calc((100% - 24px) / 2)}}
@media(max-width:640px){.voc-card{flex:0 0 100%}}
.voc-card.is-in{opacity:1;transform:translateY(0)}
.voc-card:hover{box-shadow:var(--shadow-lg)}
.voc-card .voc-img{position:absolute;inset:0}
.voc-card .voc-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.voc-card .voc-img .ph-stripes{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(14,14,14,.10) 0 14px,rgba(14,14,14,.18) 14px 28px);filter:saturate(.9)}
.voc-card .voc-img .ph-label{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(252,254,255,.78);background:rgba(14,14,14,.32);padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap;backdrop-filter:blur(6px)}
.voc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,14,.78) 0%,rgba(14,14,14,.42) 38%,transparent 62%);pointer-events:none}
.voc-card .voc-role{
position:absolute;left:24px;top:24px;z-index:2;
font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-base);font-weight:500;
color:#fff;background:rgba(254,1,1,.85);padding:6px 12px;border-radius:var(--r-pill);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(254,1,1,.45);
}
.voc-card .voc-quote-ic{
position:absolute;left:24px;top:72px;z-index:2;color:rgba(254,1,1,.72);
width:45px;height:45px;
transition:color .4s,transform .4s var(--ease-smooth);
}
.voc-card:hover .voc-quote-ic{color:rgba(254,1,1,.95);transform:scale(1.08)}
.voc-card .voc-body{
position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 24px;color:#fff;
}
.voc-card .voc-q{
font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.35;letter-spacing:-0.01em;
margin:0 0 14px;text-wrap:pretty;
}
.voc-card .voc-cap{
font-family:var(--font-sans);font-size:13px;color:#fff;font-weight:600;letter-spacing:-0.005em;
}
.voc-card .voc-cap .role{margin-left:6px;color:rgba(255,255,255,.62);font-weight:400}
/* Carousel controls */
.voc-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:32px;flex-wrap:wrap}
.voc-progress{display:flex;flex-direction:column;gap:10px;flex:1;min-width:220px;max-width:480px}
.voc-progress-meta{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-base);color:var(--color-text-2)}
.voc-progress-meta b{color:var(--color-text);font-weight:600}
.voc-progress-bar{height:2px;background:var(--color-line);border-radius:1px;overflow:hidden;position:relative}
.voc-progress-fill{position:absolute;left:0;top:0;height:100%;background:var(--color-accent);border-radius:1px;transition:width .7s var(--ease-smooth);width:33%}
.voc-nav{display:flex;gap:8px}
.voc-btn{
width:48px;height:48px;border-radius:50%;border:1px solid var(--color-line);
background:var(--color-surface);color:var(--color-text);cursor:pointer;
display:grid;place-items:center;
transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease-smooth),opacity .35s;
}
.voc-btn:hover:not(:disabled){background:var(--color-text);color:#fff;border-color:var(--color-text);transform:translateY(-2px)}
.voc-btn:disabled{opacity:.35;cursor:not-allowed}
.voc-btn svg{width:18px;height:18px;stroke-width:2}
/* Chalk underline (kept from DS) */
.chalk-underline{position:relative;display:inline-block;vertical-align:baseline;overflow:visible}
.chalk-underline svg{position:absolute;left:-3%;bottom:-3px;width:106%;height:12px;pointer-events:none;overflow:visible}
.chalk-underline svg path{
fill:none; stroke:var(--color-accent); stroke-width:3;
stroke-linecap:round; stroke-linejoin:round; opacity:.95;
filter:drop-shadow(0 0 3px rgba(254,1,1,.32));
stroke-dasharray:300; stroke-dashoffset:300;
transition:stroke-dashoffset 1.8s var(--ease-smooth) .4s;
}
.section-intro.is-revealed .chalk-underline svg path{stroke-dashoffset:0}
/* ============================================================
GLOBE DASHBOARD · premium editorial layout
============================================================ */
.section-globe{background:var(--color-bg);position:relative;overflow:visible;clip-path:none}
.section-globe::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(circle at 35% 55%, rgba(107,168,212,0.05), transparent 55%);
}
/* Fit-in-one-screen overrides - keep total section height under ~900px */
.section-globe{padding-top:64px;padding-bottom:32px}
.section-globe .section-intro{margin-bottom:24px}
.section-globe .section-intro .verb-h.h-light{font-size:clamp(28px,3.4vw,48px);line-height:1.05}
.section-globe .globe-layout{align-items:center;gap:36px}
.globe-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:stretch;position:relative;z-index:1}
@media(max-width:980px){.globe-layout{grid-template-columns:1fr;gap:32px;align-items:start}}
.globe-stage{position:relative;width:100%;height:min(704px,62vh);margin:-5% auto 0;display:flex;align-items:center;justify-content:center;overflow:visible;z-index:2}
@media(max-width:980px){.globe-stage{height:min(680px,72vh);margin-top:-24px}}
@media(max-width:560px){.globe-stage{height:min(620px,88vw);margin-top:-8px}}
#globe-canvas{
width:100%;height:100%;cursor:grab;display:block;
filter:drop-shadow(0 24px 60px rgba(20,40,50,0.16)) hue-rotate(-14deg) saturate(1.3) brightness(1.06) contrast(1.03);
}
#globe-canvas:active{cursor:grabbing}
.globe-loader{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
flex-direction:column; gap:16px;
font-family:var(--font-mono); font-size:11px;
color:var(--color-text-2); letter-spacing:.18em; text-transform:uppercase;
background:radial-gradient(circle at center, rgba(155,200,232,0.18), transparent 60%);
pointer-events:none; transition:opacity .8s;
}
.globe-loader.hidden{opacity:0}
.globe-loader .spin{width:36px;height:36px;border:2px solid rgba(254,1,1,.15);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.country-marker{
position:relative; pointer-events:none;
transform:translate(-50%,-100%); z-index:5; width:0; height:0;
}
.country-marker .pin{
position:absolute; left:0; top:0; width:12px; height:12px;
margin:-6px 0 0 -6px; border-radius:50%; background:rgba(254,1,1,.92);
box-shadow:
0 0 0 2px rgba(255,255,255,0.95),
0 0 0 4px rgba(254,1,1,0.55),
0 0 16px 3px rgba(254,1,1,0.55),
0 0 36px 6px rgba(254,1,1,0.35);
animation:pinGlow 3s ease-in-out infinite;
}
@keyframes pinGlow{
0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 4px rgba(254,1,1,.55),0 0 16px 3px rgba(254,1,1,.55),0 0 36px 6px rgba(254,1,1,.35)}
50%{box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 5px rgba(254,1,1,.85),0 0 22px 4px rgba(254,1,1,.85),0 0 52px 10px rgba(254,1,1,.5)}
}
.country-marker .pin::after{
content:""; position:absolute; left:50%; top:50%;
width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
border:1.5px solid rgba(254,1,1,.85);
animation:pinRing 2.6s ease-out infinite; pointer-events:none;
}
@keyframes pinRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(5);opacity:0}}
.country-marker .label{
position:absolute; left:60px; top:-72px;
background:rgba(252,254,255,0.96);
padding:7px 12px 7px 11px; border-radius:6px;
font-family:var(--font-mono); font-size:10px; font-weight:600;
letter-spacing:.12em; color:var(--color-text); text-transform:uppercase;
box-shadow:0 6px 18px rgba(0,0,0,.12), 0 0 0 1px rgba(254,1,1,.30);
white-space:nowrap; display:flex; align-items:center; gap:8px;
}
.country-marker .label .brand{color:var(--color-accent);font-weight:700;border-right:1px solid rgba(254,1,1,.30);padding-right:8px}
.country-marker .label .place{color:var(--color-text);font-weight:500;letter-spacing:.10em}
/* Dashboard right column */
.globe-text{display:flex;flex-direction:column;justify-content:flex-start;min-height:100%;gap:18px}
.dashboard-header{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.dashboard-header .eyebrow{
display:inline-flex; align-items:center; gap:12px;
font-family:var(--font-mono); font-size:11px; font-weight:500;
color:var(--color-accent); letter-spacing:.22em; text-transform:uppercase;
}
.dashboard-header .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-accent);animation:pulseSoft 2.6s ease-in-out infinite}
.dashboard-title{
font-family:var(--font-display); font-weight:500;
font-size:clamp(22px,2.2vw,30px); letter-spacing:-0.02em; line-height:1.15;
color:var(--color-text); margin:10px 0 0;
padding:0.04em 0.04em 0.08em; overflow:visible;
}
.dashboard-title em{font-style:italic;color:var(--color-accent);font-weight:600;padding-right:0.04em}
.dashboard-desc{margin:8px 0 0;color:var(--color-text-muted);font-size:14px;line-height:1.55;max-width:480px}
/* Metric hero - compact (labels: H4 from design system) */
.metric-hero{margin-top:4px;padding-bottom:12px;border-bottom:1px solid var(--color-line)}
.metric-hero .n{
font-family:var(--font-display); font-weight:800;
font-size:clamp(22px,2.8vw,38px); letter-spacing:-0.04em; line-height:1;
color:var(--color-text); display:flex; align-items:baseline; gap:4px;
padding-bottom:0.04em;
}
.metric-hero .n em{font-style:italic;color:var(--color-accent);font-size:.55em;font-weight:700;letter-spacing:.01em;padding-right:0.04em}
.metric-hero .l{
font-family:var(--font-display); font-weight:600;
font-size:clamp(18px,1.8vw,24px); line-height:1.25; letter-spacing:-0.01em;
color:var(--color-text); text-transform:none;
margin-top:4px; display:block;
}
/* Triple metric row - compact (labels: H4 from design system) */
.metric-row{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:0;padding-bottom:12px;padding-top:12px;border-bottom:1px solid var(--color-line)}
.metric-row .m{padding:0 16px;position:relative}
.metric-row .m:first-child{padding-left:0}
.metric-row .m:last-child{padding-right:0}
.metric-row .m + .m::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--color-line)}
.metric-row .m .n{
font-family:var(--font-display); font-weight:700;
font-size:clamp(22px,2.4vw,30px); letter-spacing:-0.035em; line-height:1;
color:var(--color-text); display:flex; align-items:baseline; gap:3px;
padding-bottom:0.04em;
}
.metric-row .m .n em{font-style:italic;color:var(--color-accent);font-size:.5em;font-weight:600;padding-right:0.04em}
.metric-row .m .l{
font-family:var(--font-display); font-weight:600;
font-size:clamp(16px,1.5vw,20px); line-height:1.25; letter-spacing:-0.01em;
color:var(--color-text); text-transform:none;
margin-top:4px; display:block;
}
/* Atributos - compact (labels: H4 from design system) */
.metric-attrs{display:flex;gap:0;margin-top:12px;flex-wrap:wrap;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--color-line)}
.metric-attr{display:inline-flex;align-items:baseline;gap:6px;padding:2px 0}
.metric-attr + .metric-attr{padding-left:14px;margin-left:14px;border-left:1px solid var(--color-line)}
.metric-attr strong{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--color-accent);letter-spacing:-0.01em}
.metric-attr span{
font-family:var(--font-display); font-weight:600;
font-size:clamp(15px,1.3vw,18px); line-height:1.25; letter-spacing:-0.01em;
color:var(--color-text); text-transform:none;
}
@media(max-width:560px){
.metric-row{grid-template-columns:repeat(2,1fr);gap:14px;padding-bottom:20px}
.metric-row .m{padding:0 12px 0 0}
.metric-row .m + .m::before{display:none}
.metric-attrs{gap:12px}
.metric-attr + .metric-attr{padding-left:12px;margin-left:0;border-left:0}
}
/* Región pills */
.metric-regiones{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.metric-región{
display:inline-flex; align-items:center; gap:8px;
padding:8px 14px; background:var(--color-bg);
border:1px solid var(--color-line); border-radius:var(--r-pill);
transition:border-color .7s var(--ease-smooth), transform .7s var(--ease-smooth);
}
.metric-región:hover{border-color:var(--color-accent);transform:translateY(-2px)}
.metric-región .dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent);animation:pulseSoft 2.6s ease-in-out infinite;flex-shrink:0}
.metric-región .name{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--color-text);letter-spacing:-0.005em}
.metric-región .role{font-family:var(--font-mono);font-size:9.5px;color:var(--color-text-2);letter-spacing:.1em;text-transform:uppercase;padding-left:6px;border-left:1px solid var(--color-line)}
/* Mono fair strip */
.metric-fairs{
margin:12px 0 0; padding-bottom:12px;
font-family:var(--font-display); font-weight:600;
font-size:clamp(15px,1.3vw,18px); line-height:1.3;
letter-spacing:-0.01em; color:var(--color-text);
text-transform:none;
}
.metric-fairs em{font-style:normal;color:var(--color-accent);font-weight:700}
.metric-fairs .sep{margin:0 8px;color:var(--color-line-2);font-weight:400}
/* ============================================================
NEWSROOM · casestudy layout (section 06)
============================================================ */
.nr-wrap{overflow:hidden}
/* Featured article */
.nr-featured{
display:grid;grid-template-columns:1fr 1fr;
text-decoration:none;color:var(--color-text);
padding:0 56px;overflow:hidden;
transition:background .5s var(--ease-smooth);
}
.nr-featured:hover{background:rgba(14,14,14,.03)}
@media(max-width:980px){.nr-featured{grid-template-columns:1fr;padding:0 28px}}
.nr-featured-text{
display:flex;flex-direction:column;justify-content:space-between;
gap:20px;padding:52px 40px 52px 0;
}
@media(max-width:980px){.nr-featured-text{padding:32px 0 0}}
.nr-tags{
font-family:var(--font-mono);font-size:10px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-2);
}
.nr-title{
font-family:var(--font-display);font-weight:700;
font-size:clamp(20px,2.1vw,28px);line-height:1.22;
letter-spacing:-.025em;color:var(--color-text);
margin:14px 0 8px;padding-bottom:.04em;overflow:visible;
}
.nr-subtitle{
font-family:var(--font-sans);font-size:15px;line-height:1.65;
color:var(--color-text-muted);margin:0;
transition:color .5s var(--ease-smooth);
}
.nr-featured:hover .nr-subtitle,.nr-card:hover .nr-subtitle{color:var(--color-text-2)}
.nr-read{
display:inline-flex;align-items:center;gap:8px;margin-top:24px;
font-family:var(--font-sans);font-size:13px;font-weight:600;
color:var(--color-accent);letter-spacing:-.005em;
transition:gap .4s var(--ease-smooth);
}
.nr-featured:hover .nr-read,.nr-card:hover .nr-read{gap:14px}
.nr-read .nr-arrow{
width:14px;height:14px;stroke-width:2;
transition:transform .4s var(--ease-smooth);
}
.nr-featured:hover .nr-arrow,.nr-card:hover .nr-arrow{transform:translateX(4px)}
/* Featured image frame */
.nr-featured-image{
padding:28px 0 28px 32px;
display:flex;align-items:center;
}
@media(max-width:980px){.nr-featured-image{padding:24px 0 32px}}
.nr-img-frame{
position:relative;width:100%;
overflow:hidden;border-radius:var(--r-lg);
box-shadow:var(--shadow-md);
}
.nr-img-frame img{
width:100%;aspect-ratio:14/9;object-fit:cover;display:block;
transition:transform .65s var(--ease-smooth);
}
.nr-featured:hover .nr-img-frame img{transform:scale(1.04)}
/* Secondary row */
.nr-secondary{
display:flex;
}
.nr-dot-side{
display:none;
}
.nr-cards{display:grid;grid-template-columns:1fr 1fr;flex:1}
@media(max-width:640px){.nr-cards{grid-template-columns:1fr}}
.nr-card{
display:flex;flex-direction:column;justify-content:space-between;
gap:40px;padding:40px 56px;
text-decoration:none;color:var(--color-text);
transition:background .5s var(--ease-smooth);
}
.nr-card:hover{background:rgba(14,14,14,.03)}
@media(max-width:980px){.nr-card{padding:32px 28px}}
/* CTA row */
.nr-cta-row{display:flex;justify-content:center;margin-top:40px}
/* ── Fit-in-one-screen overrides for section 06 ── */
#newsroom.section{padding-top:56px;padding-bottom:40px}
#newsroom .section-intro{margin-bottom:28px}
#newsroom .section-intro .verb-h{font-size:clamp(28px,3.4vw,48px);line-height:1.05}
#newsroom .section-intro .tagline{margin-top:6px;font-size:14px;line-height:1.5}
#newsroom .nr-featured-text{padding:24px 40px 24px 0;gap:12px}
#newsroom .nr-featured-image{padding:12px 0 12px 32px}
#newsroom .nr-img-frame img{aspect-ratio:16/9}
#newsroom .nr-title{font-size:clamp(17px,1.8vw,22px);line-height:1.2;margin:8px 0 6px}
#newsroom .nr-subtitle{font-size:14px;line-height:1.5}
#newsroom .nr-read{margin-top:14px;font-size:12px}
#newsroom .nr-card{padding:24px 40px;gap:18px}
#newsroom .nr-cta-row{margin-top:20px}
@media(max-width:980px){
#newsroom.section{padding-top:48px;padding-bottom:32px}
#newsroom .nr-featured-text{padding:20px 0 0}
#newsroom .nr-featured-image{padding:16px 0 24px}
#newsroom .nr-card{padding:20px 24px}
}
/* ============================================================
CIERRE · showrooms + brand statement
============================================================ */
.section-cierre{
text-align:center; background:var(--color-bg); position:relative; overflow:hidden;
/* Fit in one viewport */
min-height:100vh; min-height:100svh; padding-top:48px; padding-bottom:32px;
display:flex; flex-direction:column; justify-content:center;
}
.section-cierre::before{
content:""; position:absolute; inset:0;
background-image:linear-gradient(rgba(14,14,14,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(14,14,14,.03) 1px,transparent 1px);
background-size:64px 64px; opacity:.4;
mask-image:radial-gradient(ellipse at center,black 25%,transparent 70%);
-webkit-mask-image:radial-gradient(ellipse at center,black 25%,transparent 70%);
pointer-events:none;
}
.section-cierre > *{position:relative;z-index:2}
.cierre-eyebrow{
display:inline-flex; align-items:center; gap:12px; justify-content:center;
font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:400;
color:var(--color-accent); letter-spacing:normal; text-transform:none;
line-height:var(--lh-base);
margin-bottom:10px;
}
.cierre-title{
font-family:var(--font-display); font-weight:700;
font-size:clamp(34px,4.4vw,56px); line-height:1.02; letter-spacing:-0.035em;
color:var(--color-text); max-width:880px; margin:0 auto 8px;
padding:0.04em 0.04em 0.1em;
}
.cierre-title em{font-style:italic;color:var(--color-accent);padding-right:0.04em}
.cierre-sub{
font-family:var(--font-sans); font-size:15px; line-height:1.5;
color:var(--color-text-muted); max-width:560px; margin:0 auto 20px;
}
/* ====== WORLD MAP STAGE ====== */
/* Desktop: two-column layout - map on the left, city card stage on the right,
so the card never covers the map. Mobile: stack (handled in @media below). */
.worldmap-stage{
position:relative;
max-width:min(1200px, 94vw);
width:100%;
margin:0 auto 18px;
padding:0;
background:none; border:0; box-shadow:none;
display:grid;
grid-template-columns:minmax(0, 1fr) clamp(280px, 30%, 360px);
gap:24px;
align-items:center;
}
.worldmap-wrap{
position:relative; width:100%;
aspect-ratio:1242 / 625;
margin-inline:auto;
user-select:none;
/* The visible map box */
background:linear-gradient(180deg, var(--color-bg) 0%, #fafaf8 100%);
border:1px solid var(--color-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-md);
overflow:hidden;
}
.worldmap-wrap .worldmap-img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; pointer-events:none;
opacity:0; transition:opacity 1s var(--ease-smooth);
}
.worldmap-wrap.is-ready .worldmap-img{opacity:1}
/* glowing ambient grid behind dots */
.worldmap-wrap::before{
content:""; position:absolute; inset:-2% -2% -2% -2%;
background:none;
pointer-events:none;
}
/* city dot system */
.city-pin{
position:absolute; transform:translate(-50%,-50%);
width:0; height:0; cursor:pointer; z-index:3;
}
.city-pin[data-city="bogota"]{ z-index:5; }
.city-pin .pin-core{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:14px; height:14px; border-radius:50%;
background:#e5262b;
box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 4px 14px rgba(254,1,1,.55);
transition:transform .5s var(--ease-smooth), box-shadow .5s;
z-index:4;
}
.city-pin .pin-ring{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:14px; height:14px; border-radius:50%;
border:2px solid rgba(254,1,1,.6);
animation:pinPulse 2.4s var(--ease-smooth) infinite;
pointer-events:none;
}
.city-pin .pin-ring.delay{animation-delay:1.2s}
@keyframes pinPulse{
0%{transform:translate(-50%,-50%) scale(1); opacity:.85}
80%{transform:translate(-50%,-50%) scale(3.6); opacity:0}
100%{transform:translate(-50%,-50%) scale(3.6); opacity:0}
}
.city-pin .pin-label{
position:absolute; left:50%; top:auto; bottom:calc(50% + 16px);
transform:translateX(-50%);
font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:500;
letter-spacing:normal; text-transform:none;
color:#fff; background:rgba(20,20,22,.92);
padding:5px 10px 5px 10px; border-radius:var(--r-pill);
white-space:nowrap; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
box-shadow:0 6px 16px rgba(14,14,14,.18);
transition:transform .5s var(--ease-smooth), background .5s, color .5s;
pointer-events:none; line-height:var(--lh-base);
}
.city-pin .pin-label::after{
content:""; position:absolute; left:50%; bottom:-4px;
transform:translateX(-50%) rotate(45deg);
width:8px; height:8px; background:inherit;
border-radius:1px;
}
.city-pin .pin-region{
position:absolute; left:50%; top:calc(50% + 18px);
transform:translateX(-50%);
font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:600;
letter-spacing:-0.01em; text-transform:none;
color:#000; white-space:nowrap;
opacity:1; transition:color .5s, opacity .5s;
pointer-events:none; line-height:1.25;
}
.city-pin:hover .pin-core,
.city-pin.is-active .pin-core{
transform:translate(-50%,-50%) scale(1.35);
box-shadow:0 0 0 4px rgba(255,255,255,.95), 0 8px 22px rgba(254,1,1,.7);
}
.city-pin:hover .pin-label,
.city-pin.is-active .pin-label{
background:#e5262b; transform:translateX(-50%) translateY(-3px);
}
.city-pin:hover .pin-region,
.city-pin.is-active .pin-region{
color:#000; opacity:1;
}
/* ====== SPAWN MODE · pins hidden until spawned ====== */
.worldmap-wrap.spawn-mode .city-pin{
opacity:0;
transform:translate(-50%,-50%) scale(0);
transition:opacity .45s cubic-bezier(.34,1.56,.64,1),
transform .45s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
}
.worldmap-wrap.spawn-mode .city-pin.is-spawned{
opacity:1;
transform:translate(-50%,-50%) scale(1);
pointer-events:auto;
}
.worldmap-wrap.spawn-mode .city-pin .pin-label,
.worldmap-wrap.spawn-mode .city-pin .pin-region{
opacity:0; transition:opacity .3s ease;
}
.worldmap-wrap.spawn-mode .city-pin.is-spawned .pin-label{
opacity:1; transition:opacity .4s .15s ease;
}
.worldmap-wrap.spawn-mode .city-pin.is-spawned .pin-region{
opacity:1; transition:opacity .4s .2s ease;
}
/* ====== REVEAL MODE · all pins appear after click ====== */
@keyframes pinRevealBounce{
0% {transform:translate(-50%,-50%) scale(0); opacity:0}
50% {transform:translate(-50%,-50%) scale(1.5); opacity:1}
70% {transform:translate(-50%,-50%) scale(0.85); opacity:1}
85% {transform:translate(-50%,-50%) scale(1.15); opacity:1}
100%{transform:translate(-50%,-50%) scale(1); opacity:1}
}
@keyframes pinRevealPulseSync{
0% {transform:translate(-50%,-50%) scale(1); opacity:.9; border-color:rgba(254,1,1,.8)}
50% {transform:translate(-50%,-50%) scale(4.5); opacity:0; border-color:rgba(254,1,1,.3)}
100%{transform:translate(-50%,-50%) scale(4.5); opacity:0; border-color:rgba(254,1,1,0)}
}
.worldmap-wrap.reveal-mode .city-pin{
opacity:1; pointer-events:auto;
animation:pinRevealBounce .7s cubic-bezier(.34,1.56,.64,1) both;
}
.worldmap-wrap.reveal-mode .city-pin:nth-child(1){animation-delay:0s}
.worldmap-wrap.reveal-mode .city-pin:nth-child(2){animation-delay:.1s}
.worldmap-wrap.reveal-mode .city-pin:nth-child(3){animation-delay:.18s}
.worldmap-wrap.reveal-mode .city-pin:nth-child(4){animation-delay:.26s}
.worldmap-wrap.reveal-mode .city-pin:nth-child(5){animation-delay:.34s}
.worldmap-wrap.reveal-mode .city-pin .pin-ring{
animation:pinRevealPulseSync 1s .5s cubic-bezier(.16,1,.3,1) both;
}
.worldmap-wrap.reveal-mode .city-pin .pin-ring.delay{
animation:pinRevealPulseSync 1s .8s cubic-bezier(.16,1,.3,1) both;
}
.worldmap-wrap.reveal-mode .city-pin .pin-label,
.worldmap-wrap.reveal-mode .city-pin .pin-region{
opacity:1; transition:opacity .4s .5s ease;
}
/* helper hint while no city selected */
.worldmap-hint{
position:absolute; left:50%; bottom:14px;
transform:translateX(-50%);
font-family:var(--font-sans); font-size:var(--fs-sm); letter-spacing:normal;
text-transform:none; color:var(--color-text-2);
opacity:.8; pointer-events:none;
display:inline-flex; align-items:center; gap:8px;
line-height:var(--lh-base);
}
.worldmap-hint .dot{
width:6px; height:6px; border-radius:50%; background:#e5262b;
animation:pinPulse 2.4s var(--ease-smooth) infinite;
}
/* ====== CITY CARD STAGE · sits to the right of the map on desktop ====== */
.city-card-stage{
position:relative;
width:100%;
min-height:clamp(360px, 32vw, 460px);
z-index:6;
pointer-events:none;
}
.city-card{
position:absolute; left:0; right:0; top:0; height:fit-content;
display:flex; flex-direction:column;
background:#fff;
border-radius:var(--r-lg); overflow:hidden;
box-shadow:0 36px 70px -22px rgba(14,14,14,.32), 0 14px 32px -14px rgba(14,14,14,.22);
border:1px solid rgba(14,14,14,.05);
opacity:0;
transform:translateY(28px) scale(.92);
filter:blur(8px);
clip-path:inset(22% 6% 22% 6% round 20px);
/* instant close - no transition on the base state */
transition:none;
will-change:opacity, transform, clip-path, filter;
}
.city-card.is-active{
opacity:1; pointer-events:auto;
transform:translateY(0) scale(1);
filter:blur(0);
clip-path:inset(0% 0% 0% 0% round 18px);
/* slow, animated spawn IN */
transition:
opacity .65s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .65s cubic-bezier(0.16,1,0.3,1),
clip-path .9s cubic-bezier(0.16,1,0.3,1);
}
.city-card .sr-photo{
position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--color-bg);
}
.city-card .sr-photo img{
width:100%; height:100%; object-fit:cover;
transform:scale(1.12);
transition:transform 1.4s var(--ease-smooth);
}
.city-card.is-active .sr-photo img{ transform:scale(1.02); }
.city-card .sr-photo::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 55%, rgba(14,14,14,.45));
pointer-events:none;
}
.city-card .sr-tag{
position:absolute; left:10px; top:10px; z-index:2;
font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:500;
letter-spacing:normal; color:#fff;
background:rgba(254,1,1,.92); padding:4px 10px; border-radius:var(--r-pill);
text-transform:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
line-height:var(--lh-base);
}
/* close button on city card */
.city-card .card-close{
position:absolute; right:8px; top:8px; z-index:8;
width:28px; height:28px; border:none; border-radius:50%; cursor:pointer;
background:rgba(14,14,14,.55); color:#fff;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center;
opacity:0; transform:scale(.7);
transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .2s;
pointer-events:none;
}
.city-card.is-active .card-close{
opacity:1; transform:scale(1); pointer-events:auto;
transition-delay:.4s;
}
.city-card .card-close:hover{
background:rgba(254,1,1,.85); transform:scale(1.12);
transition-delay:0s;
}
.city-card .card-close svg{
width:14px; height:14px; stroke-width:2.5;
}
@media(max-width:980px){.city-card .card-close{display:none}}
.city-card .sr-body{
padding:14px 16px 16px;
display:flex; flex-direction:column; gap:4px; flex:1;
}
.city-card .sr-region{
font-family:var(--font-sans); font-size:var(--fs-sm);
letter-spacing:normal; text-transform:none;
color:var(--color-accent); font-weight:400;
line-height:var(--lh-base);
}
.city-card .sr-city{
font-family:var(--font-display); font-weight:700;
font-size:20px; letter-spacing:-0.02em; line-height:1.1;
color:var(--color-text); padding-bottom:0.04em;
}
.city-card .sr-coords{
display:none;
}
.city-card .sr-meta{
font-family:var(--font-sans); font-size:var(--fs-sm); line-height:var(--lh-base);
color:var(--color-text-muted);
margin:4px 0 6px;
}
.city-card .sr-meta-row{
display:none;
}
.city-card .sr-meta-tag{
display:none;
}
/* list bullets hidden */
.city-card .sr-cta{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
align-self:stretch; margin-top:10px;
width:100%; box-sizing:border-box;
padding:11px 14px; border-radius:var(--r-pill);
background:var(--color-text); color:#fff;
font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:500;
letter-spacing:normal; text-transform:none;
line-height:var(--lh-base);
text-decoration:none;
transition:transform .5s var(--ease-smooth), background .5s, color .5s, gap .4s var(--ease-smooth);
}
.city-card .sr-cta:hover{
transform:translateY(-2px); background:var(--color-accent); color:#fff; gap:10px;
}
.city-card .sr-cta .icon{width:12px;height:12px}
/* staggered inner spawn animation */
.city-card.is-active .sr-body > *{
animation:cardLineIn .65s cubic-bezier(0.16,1,0.3,1) both;
}
.city-card.is-active .sr-body > *:nth-child(1){animation-delay:.18s}
.city-card.is-active .sr-body > *:nth-child(2){animation-delay:.24s}
.city-card.is-active .sr-body > *:nth-child(3){animation-delay:.30s}
.city-card.is-active .sr-body > *:nth-child(4){animation-delay:.36s}
.city-card.is-active .sr-body > *:nth-child(5){animation-delay:.42s}
.city-card.is-active .sr-body > *:nth-child(6){animation-delay:.48s}
.city-card.is-active .sr-tag{
animation:cardTagIn .55s cubic-bezier(0.16,1,0.3,1) both;
animation-delay:.32s;
}
@keyframes cardLineIn{
0%{opacity:0; transform:translateY(10px); filter:blur(4px)}
100%{opacity:1; transform:translateY(0); filter:blur(0)}
}
@keyframes cardTagIn{
0%{opacity:0; transform:translateY(-6px) scale(.85)}
100%{opacity:1; transform:translateY(0) scale(1)}
}
@media(max-width:980px){
/* Collapse the two-column desktop layout to a single column */
.worldmap-stage{
grid-template-columns:1fr;
gap:0;
}
/* Card stage moves out from beside the map and stacks BELOW it */
.city-card-stage{
position:relative; inset:auto;
top:auto; right:auto;
width:100%; max-width:520px;
margin:18px auto 0;
min-height:470px;
pointer-events:auto;
}
.city-card{
height:auto;
/* smoother mobile crossfade - instant-close not desired on mobile */
transition:opacity .35s ease-out, transform .45s ease-out, clip-path .45s ease-out, filter .35s ease-out;
}
.city-card.is-active{
transition:opacity .35s ease-out, transform .45s ease-out, clip-path .45s ease-out, filter .35s ease-out;
}
/* Use the SVG's native aspect so the whole map fits with no crop */
.worldmap-wrap{ aspect-ratio:1242/625; }
.worldmap-wrap .worldmap-img{
object-fit:contain;
object-position:center;
}
}
@media(max-width:780px){
/* Hide the map on mobile */
.worldmap-wrap{display:none!important}
.worldmap-stage{padding:0; overflow:visible}
/* Horizontal swipe - one card at a time */
.city-card-stage{
position:relative!important; inset:auto;
top:auto!important; right:auto!important;
width:100%!important; max-width:100%!important;
margin:0 auto;
min-height:auto!important;
pointer-events:auto;
display:flex!important; flex-direction:row;
gap:0; padding:0;
overflow-x:auto!important; overflow-y:hidden!important;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.city-card-stage::-webkit-scrollbar{display:none}
.city-card{
position:relative!important; left:auto!important; right:auto!important; top:auto!important;
flex:0 0 100%!important; width:100%!important; max-width:100%!important;
height:auto!important;
opacity:1!important; transform:none!important;
filter:none!important; clip-path:none!important;
pointer-events:auto;
transition:none!important;
scroll-snap-align:start;
border-radius:0;
box-shadow:none;
border:none;
border-bottom:1px solid var(--color-line);
}
.city-card .sr-photo{border-radius:0}
.city-card .sr-body{padding:16px 18px 18px}
.city-card .sr-city{font-size:22px}
.city-card .sr-tag{font-size:12px; padding:5px 9px}
.city-card .sr-cta{font-size:13px; padding:11px 16px}
/* Navigation tabs above scroller */
.sr-nav-tabs{
display:flex!important;
overflow-x:auto; scrollbar-width:none;
-webkit-overflow-scrolling:touch;
gap:0; padding:0 0 0 0;
border-bottom:1px solid var(--color-line);
margin-bottom:0;
}
.sr-nav-tabs::-webkit-scrollbar{display:none}
.sr-nav-tab{
flex:1 1 0; min-width:0;
padding:10px 8px;
font-family:var(--font-sans); font-size:12px; font-weight:500;
color:var(--color-text-muted);
text-align:center; white-space:nowrap;
background:none; border:none; border-bottom:2px solid transparent;
cursor:pointer;
transition:color .25s, border-color .25s;
}
.sr-nav-tab.is-active{
color:var(--color-accent);
border-bottom-color:var(--color-accent);
font-weight:600;
}
}
/* Hide tabs on desktop */
.sr-nav-tabs{display:none}
.aulas-nav-tabs{display:none}
.cierre-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
.cierre-meta{margin-top:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-2)}
.cierre-meta em{font-style:normal;color:var(--color-accent);font-weight:600}
/* ============================================================
FOOTER (no rainbow line)
============================================================ */
.footer{background:var(--color-bg);padding:80px var(--space-side) 32px;border-top:1px solid var(--color-line)}
@media(max-width:780px){.footer{padding-left:var(--space-side-mobile);padding-right:var(--space-side-mobile)}}
.footer-inner{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px;max-width:var(--container-max);margin:0 auto 40px}
@media(max-width:980px){.footer-inner{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.footer-inner{grid-template-columns:1fr}}
.footer-brand{display:flex;flex-direction:column;gap:18px;max-width:360px;align-items:flex-start}
.footer-brand svg{height:28px;width:auto}
.footer-brand p{font-family:var(--font-sans);font-size:14px;color:var(--color-text-muted);line-height:1.5;margin:0}
.footer-socials{display:flex;gap:10px}
.footer-socials a{
width:38px;height:38px;display:grid;place-items:center;
color:var(--color-text-2);
transition:color .5s, transform .5s var(--ease-smooth),filter .5s;
}
.footer-socials a:hover{color:var(--color-accent);transform:translateY(-3px)}
.footer-socials a:hover{transform:translateY(-3px)}
.footer-col h4{
font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--color-text-2);
margin:0 0 16px; font-weight:500;
}
.footer-col a{
display:block; padding:6px 0;
font-family:var(--font-sans); font-size:14px; color:var(--color-text);
transition:color .4s, padding-left .4s var(--ease-smooth);
}
.footer-col a:hover{color:var(--color-accent);padding-left:4px}
.footer-bottom{
display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
padding-top:24px; border-top:1px solid var(--color-line);
max-width:var(--container-max); margin:0 auto;
font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
color:var(--color-text-2);
}
/* ── Region scroll ticker ── */
.region-scroll{width:100%;overflow:hidden;padding:16px 0;position:relative;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.region-scroll::before,.region-scroll::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.region-scroll::before{left:0;background:linear-gradient(90deg,var(--color-bg),transparent)}
.region-scroll::after{right:0;background:linear-gradient(270deg,var(--color-bg),transparent)}
.region-scroll-track{display:flex;align-items:baseline;width:max-content;animation:regionScroll 45s linear infinite}
.region-scroll-track:hover{animation-play-state:paused}
@keyframes regionScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.region-scroll-item{display:inline-flex;align-items:baseline;gap:10px;padding:6px 32px;border-right:1px solid var(--color-line)}
.region-scroll-item strong{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--color-accent);letter-spacing:-0.01em}
.region-scroll-item span{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--color-text);letter-spacing:-0.01em}
/* ── Language toggle ── */
.lang-toggle{display:flex;align-items:center;border:1px solid var(--color-line);border-radius:var(--r-pill);overflow:hidden;flex-shrink:0}
.lang-btn{padding:5px 11px;background:transparent;color:var(--color-text-2);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;cursor:pointer;border:none;transition:background .25s,color .25s}
.lang-btn.active{background:var(--color-text);color:#fff}
.lang-btn:hover:not(.active){color:var(--color-accent)}
/* ════════════════════════════════════════════════════════════
MOBILE RESPONSIVE - full page (≤ 640px)
════════════════════════════════════════════════════════════ */
@media(max-width:640px){
/* Layout */
:root{--space-side:20px;--space-section-lg:80px;--space-section-md:64px;--space-section-sm:48px}
/* Hero */
.hero{padding:100px 20px 64px}
.verb-stage{height:clamp(260px,52vw,300px);margin-top:24px}
.verb{gap:22px;justify-content:flex-end;padding-bottom:4px}
.verb h1,.verb .verb-h1{font-size:clamp(44px,12vw,68px);letter-spacing:-0.04em;line-height:1.04;text-wrap:balance}
.verb-tag{font-size:clamp(19px,5vw,24px);line-height:1.3;max-width:92%;text-wrap:balance}
.hero-sub{font-size:16px;line-height:1.45;max-width:92%;margin-top:6px;text-wrap:pretty}
.hero-actions{flex-direction:column;align-items:center;margin-top:4px}
.hero-actions .btn{width:auto;min-width:240px;justify-content:center;padding:16px 28px;font-size:15px}
.verb-indicators{flex-direction:row;align-items:center;gap:8px;margin-top:28px}
.vi{width:6px;height:6px;padding:0;font-size:0}
.vi.active{width:22px}
/* Section intro */
.section-intro .verb-h{font-size:clamp(26px,7vw,40px)}
.section-intro .tagline{font-size:15px}
/* Human grid / collage */
.human-grid,.human-grid.text-right{grid-template-columns:1fr;gap:28px}
.human-photos{height:auto}
.human-text h3{font-size:clamp(22px,6vw,32px)}
.human-text p{font-size:15px}
.aulas-chips{gap:6px}
/* ── Section 03 · showroom-style horizontal slider on mobile ── */
#aulas .human-photos{order:1 !important}
#aulas .human-text{order:2 !important}
#aulas .aulas-actions{order:3 !important}
#aulas .aulas-chips{display:none}
#aulas .human-photos{
display:flex; gap:0; height:auto;
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
border:1px solid var(--color-line);
border-radius:var(--r-lg);
}
#aulas .human-photos::-webkit-scrollbar{display:none}
#aulas .img-col-ph{
position:relative !important;
top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
flex:0 0 100%; width:100%; height:auto;
aspect-ratio:4/3;
transform:none !important; animation:none !important;
scroll-snap-align:start;
border-radius:0; box-shadow:none;
border-right:1px solid var(--color-line);
}
#aulas .img-col-ph:last-child{border-right:none}
#aulas .img-col-ph .ph-cap{
left:auto; right:12px; bottom:auto; top:12px;
font-size:11px; padding:6px 12px;
background:rgba(254,1,1,.92); color:#fff;
letter-spacing:.08em;
}
#aulas .human-photos.chip-hover .img-col-ph{opacity:1;filter:none}
#aulas .human-photos.chip-hover .img-col-ph.is-highlight{
top:auto !important; left:auto !important;
width:100% !important; height:auto !important;
transform:none !important;
}
/* ── Section 03 · nav tabs above slider (mobile) ── */
#aulas .aulas-nav-tabs{order:0 !important}
.aulas-nav-tabs{
display:flex!important;
overflow-x:auto; scrollbar-width:none;
-webkit-overflow-scrolling:touch;
gap:0; padding:0;
border-bottom:1px solid var(--color-line);
margin-bottom:0;
}
.aulas-nav-tabs::-webkit-scrollbar{display:none}
.aulas-nav-tab{
flex:1 1 0; min-width:0;
padding:10px 8px;
font-family:var(--font-sans); font-size:12px; font-weight:500;
color:var(--color-text-muted);
text-align:center; white-space:nowrap;
background:none; border:none; border-bottom:2px solid transparent;
cursor:pointer;
transition:color .25s, border-color .25s;
}
.aulas-nav-tab.is-active{
color:var(--color-accent);
border-bottom-color:var(--color-accent);
font-weight:600;
}
/* ── Section 04 · reorder so video appears above text on mobile ── */
#about .human-grid{display:flex; flex-direction:column}
#about .human-text{display:contents}
#about .section-intro--left{order:1}
#about .reel-stage{order:2}
#about .human-text > h3,
#about .human-text > .impact-stats,
#about .human-text > .actions{order:3}
/* Testimonial Slider */
.ts-quote{font-size:18px}
/* Globe */
.globe-layout{grid-template-columns:1fr;gap:24px}
.globe-stage{height:min(620px,88vw);margin-top:-8px}
.metric-hero .n{font-size:clamp(40px,10vw,64px)}
.metric-row{grid-template-columns:repeat(2,1fr);gap:0}
.metric-attrs{flex-wrap:wrap;gap:12px}
.metric-attr + .metric-attr{margin-left:12px;padding-left:12px}
/* World map stage */
.worldmap-stage{padding:10px}
.worldmap-hint{font-size:10px;letter-spacing:.18em}
/* Cierre - allow natural height on mobile (cards stack below map) */
.section-cierre{min-height:auto;padding-top:64px;padding-bottom:48px}
/* Footer */
.footer{padding:56px 20px 24px}
.footer-inner{grid-template-columns:1fr;gap:28px}
.footer-bottom{flex-direction:column;gap:8px;text-align:center}
/* Cierre */
.cierre-actions{flex-direction:column;align-items:center}
.cierre-actions .btn{width:100%;justify-content:center;max-width:320px}
/* Region scroll - slightly smaller items on mobile */
.region-scroll-item{padding:4px 20px}
.region-scroll-item strong,.region-scroll-item span{font-size:15px}
}
/* Counter typo */
.counter, .counter-num{font-variant-numeric:tabular-nums}
/* ============================================================
SHOWROOMS + SECTION 03 fixes (Design branch)
- full-bleed city cards (lang-independent .section-cierre scope)
- card aligned to the world map on desktop
- University collage image shows its right side (the screen)
============================================================ */
.section-cierre .city-card{
display:block;
height:auto;
aspect-ratio:4 / 5;
background:#0e0e0e;
border:0;
}
.section-cierre .city-card .sr-photo{
position:absolute; inset:0;
aspect-ratio:auto;
width:100%; height:100%;
border-radius:inherit;
}
.section-cierre .city-card .sr-photo img{ width:100%; height:100%; object-fit:cover; }
.section-cierre .city-card .sr-photo::after{
background:linear-gradient(180deg, rgba(14,14,14,0) 28%, rgba(14,14,14,.55) 60%, rgba(14,14,14,.92) 100%);
}
.section-cierre .city-card .sr-body{
position:absolute; left:0; right:0; bottom:0; z-index:4;
padding:22px 22px 24px;
background:transparent;
gap:6px;
}
.section-cierre .city-card .sr-region{ color:rgba(255,255,255,.82); }
.section-cierre .city-card .sr-city{
color:#fff;
font-size:clamp(28px, 2.6vw, 38px);
line-height:1.05;
}
.section-cierre .city-card .sr-coords{ color:rgba(255,255,255,.6); }
.section-cierre .city-card .sr-meta{ display:none; }
.section-cierre .city-card .sr-cta{
margin-top:14px;
background:var(--color-accent); color:#fff;
}
.section-cierre .city-card .sr-cta:hover{ background:var(--color-accent-hover); color:#fff; }
/* Desktop two-column: card stage matches the map (same top edge + height) */
@media(min-width:981px){
.section-cierre .worldmap-stage{ align-items:stretch; }
.section-cierre .worldmap-stage > .worldmap-wrap{ align-self:start; }
.section-cierre .city-card-stage{ min-height:0; }
.section-cierre .city-card{ aspect-ratio:auto; height:100%; top:0; }
}
/* Mobile: tall full-bleed tile */
@media(max-width:780px){
.section-cierre .city-card{ aspect-ratio:3 / 4; }
.section-cierre .city-card .sr-city{ font-size:30px; }
}
/* Section 03 · University image: reveal the right side (the big screen) */
#aulas .ic-2 img{ object-position:right center; }