/* ============================================================
   ABEJA CREATIVA — hoja de estilos
   Rebuild orgánico (vanilla, técnica studionumbra.com)
   ------------------------------------------------------------
   1. Tokens (paleta, tipografía, easing)
   2. Base y utilidades
   3. Componentes (loader, cursor, nav, menú, botones)
   4. El universo (éter/polen, panal, cinta, veil, sectores)
   5. Secciones de la home (hero, servicios, portafolio, planes, causa, cta)
   6. Sectores (eventos / negocios): grids de casos y trabajos
   7. Mascota + accesibilidad + mobile
   ============================================================ */

/* ---------- 1 · TOKENS ---------- */
:root{
  --ink:#0b0b0d;
  --ink-soft:#141417;
  --ink-200:#1d1d22;
  --honey:#f5f804;
  --honey-light:#fbff5e;
  --amber:#f59e0b;
  --lime:#c6f806;
  --cream:#f7f2e7;
  --cream-soft:#efe7d4;
  --muted:#9a958c;
  --line:rgba(247,242,231,.09);
  --line-hi:rgba(247,242,231,.17);
  --honey-lo:rgba(245,248,4,.12);
  --accent:var(--honey);         /* home = miel; eventos = lima; negocios = ámbar */
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  /* el sitio Next.js usa Geist Sans (fuente propia de Vercel, no está en Google
     Fonts) — acá, sin build ni npm, se usa Inter como equivalente geométrico
     servido de forma estable desde Google Fonts, mismo espíritu tipográfico */
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --titulo:clamp(34px,min(7.2vw,8.2vh),108px);
  --titulo-sec:clamp(32px,min(4.4vw,6.2vh),62px);
}
.pg-eventos{ --accent:var(--lime); }
.pg-negocios{ --accent:var(--amber); }

/* ---------- 2 · BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--ink);color-scheme:dark}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{background:transparent;color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden}
/* SCROLLBAR DE MIEL — el patrón propio de abejacreativa (viene del sitio
   Next.js, globals.css): la barra nativa se ve, pero vestida de marca.
   Nada de ocultarla ni reemplazarla por cintas dibujadas. */
html{scrollbar-width:thin;scrollbar-color:var(--ink-200) var(--ink)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:999px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}
::selection{background:var(--honey);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:-.02em;line-height:.98;font-weight:600}
body{-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable="true"],.selectable,.allow-select{-webkit-user-select:text;user-select:text}
.accent{color:var(--accent)}
.wrap{max-width:1280px;margin:0 auto;padding:0 36px}
section{position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-hi);border-radius:999px;padding:7px 16px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:500;background:rgba(247,242,231,.03)}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:dotpulse 2.4s ease-in-out infinite}
@keyframes dotpulse{50%{opacity:.4}}

.glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;animation:breathe 11s ease-in-out infinite;background:var(--honey-lo)}
@keyframes breathe{50%{transform:scale(1.14);opacity:.75}}

/* ---------- 3 · COMPONENTES ---------- */

#loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:opacity .5s}
#loader svg{width:64px;height:64px;animation:beat 1.15s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(245,248,4,.5))}
@keyframes beat{0%,100%{transform:scale(.94)}20%{transform:scale(1.07)}35%{transform:scale(.97)}50%{transform:scale(1.04)}}
#loader .lw{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--muted)}

/* NAV — barra completa propia de Abeja (logo a la izquierda, todo lo demás
   a la derecha), no una isla-píldora centrada. Nace transparente sobre el
   hero y se asienta con blur al scrollear. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:24px;
  padding:16px clamp(20px,4vw,48px);border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(11,11,13,.7),rgba(11,11,13,0));
  transition:border-color .5s var(--ease),background .5s var(--ease);white-space:nowrap}
.nav.s{background:rgba(11,11,13,.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line)}
.nav .logo{flex-shrink:0;display:flex;align-items:center}
.nav .logo img{height:28px;width:auto;object-fit:contain;transition:transform .5s var(--ease)}
.nav .logo:hover img{transform:scale(1.05)}
.nav-links{display:flex;gap:22px;font-size:14px;font-weight:500;color:var(--muted);margin-left:auto}
.nav-links a{transition:color .35s var(--ease)}
.nav-links a:hover{color:var(--honey)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex-shrink:0}
.lang button{background:none;border:none;color:var(--muted);padding:6px 11px;font-weight:700;font-size:11px;letter-spacing:.08em;transition:all .3s var(--ease)}
.lang button.on{background:var(--honey);color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--honey);color:var(--ink);padding:8px 8px 8px 16px;border-radius:999px;font-size:13.5px;font-weight:700}
.nav-cta .ico{width:24px;height:24px;border-radius:50%;background:rgba(11,11,13,.18);display:flex;align-items:center;justify-content:center;font-size:11px;transition:transform .4s var(--ease)}
.nav-cta:hover .ico{transform:translate(2px,-2px)}
.burger{display:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-hi);background:none;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:1.6px;background:var(--cream);transition:transform .5s var(--ease),top .5s var(--ease)}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:21px}
.burger.open span:nth-child(1){top:17px;transform:rotate(45deg)}
.burger.open span:nth-child(2){top:17px;transform:rotate(-45deg)}
@media(max-width:900px){
  .nav{gap:12px;padding:7px 8px 7px 14px}
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
}

.menu{position:fixed;inset:0;z-index:95;background:rgba(11,11,13,.92);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  display:flex;flex-direction:column;justify-content:center;padding:0 9vw;visibility:hidden;opacity:0;transition:opacity .6s var(--ease),visibility 0s .6s}
.menu.open{visibility:visible;opacity:1;transition:opacity .6s var(--ease)}
.menu a{font-family:var(--disp);text-transform:uppercase;font-size:clamp(28px,8vw,54px);line-height:1.3;color:var(--cream);
  transform:translateY(36px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease),color .3s}
.menu a:hover{color:var(--honey)}
.menu.open a{transform:none;opacity:1}
.menu.open a:nth-child(1){transition-delay:.07s}.menu.open a:nth-child(2){transition-delay:.13s}
.menu.open a:nth-child(3){transition-delay:.19s}.menu.open a:nth-child(4){transition-delay:.25s}
.menu.open a:nth-child(5){transition-delay:.31s}.menu.open a:nth-child(6){transition-delay:.37s}
.menu.open a:nth-child(7){transition-delay:.43s}

.btn{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 24px;border-radius:999px;font-weight:700;font-size:14.5px;
  transition:background .45s var(--ease),border-color .45s var(--ease)}
.btn .ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;transition:transform .45s var(--ease)}
.btn:hover .ico{transform:translate(2px,-2px) scale(1.06)}
.btn-primary{background:var(--honey);color:var(--ink)}
.btn-primary .ico{background:rgba(11,11,13,.15)}
.btn-ghost{border:1px solid var(--line-hi);color:var(--cream)}
.btn-ghost .ico{background:rgba(247,242,231,.07)}
.btn-ghost:hover{border-color:var(--honey)}

/* Botón de sonido ABAJO-DERECHA como celda de panal (hexágono) — posición
   y forma propias, nada del círculo abajo-izquierda de otros sitios */
#sound-toggle{position:fixed;right:22px;bottom:22px;z-index:96;width:46px;height:46px;font-size:15px;line-height:1;
  background:rgba(245,248,4,.1);border:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background .3s,transform .3s}
#sound-toggle:hover{background:rgba(245,248,4,.28);transform:scale(1.08)}
@media(max-width:768px){ #sound-toggle{bottom:74px} }

#world-back{position:fixed;right:78px;bottom:22px;z-index:96;width:46px;height:46px;font-size:18px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;background:var(--honey);border:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  opacity:0;visibility:hidden;transform:translateX(6px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s}
html.world-eventos #world-back, html.world-negocios #world-back{opacity:1;visibility:visible;transform:none;pointer-events:auto}
#world-back:hover{background:var(--honey-light)}
@media(max-width:768px){ #world-back{bottom:74px} }

/* ---------- 4 · EL UNIVERSO ---------- */
#pollen{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:1;transition:opacity .9s var(--ease)}
.honeycomb{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='111' viewBox='0 0 64 111'%3E%3Cg fill='none' stroke='%23f5f804' stroke-width='1.4'%3E%3Cpath d='M32 0 L64 18.5 64 55.5 32 74 0 55.5 0 18.5Z'/%3E%3Cpath d='M32 74 L64 92.5 64 129.5 32 148 0 129.5 0 92.5Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 111px}
#veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(11,11,13,.22)}

/* EL TABLERO: paneo horizontal del encuadre (world.js) */
#home-world{position:relative}
#home-world{transition:transform 1.05s cubic-bezier(.55,.05,.2,1)}
html.world-negocios #home-world{transform:translateX(-100vw)}
html.world-negocios{overflow:hidden}
#negocios-sector{position:fixed;inset:0;z-index:90;transform:translateX(100vw);background:transparent;
  transition:transform 1.05s cubic-bezier(.55,.05,.2,1), visibility 0s 1.05s;visibility:hidden}
html.world-negocios #negocios-sector{transform:none;visibility:visible;transition:transform 1.05s cubic-bezier(.55,.05,.2,1), visibility 0s 0s}
#negocios-sector iframe{width:100%;height:100%;border:0;display:block;background:transparent}

/* páginas de sector embebidas (eventos/negocios): fondo transparente para
   que se vea el polen COMPARTIDO del padre, y se ocultan nav/controles
   propios — el padre ya los muestra (nav, #world-back, #sound-toggle) */
html.embedded, html.embedded body{background:transparent}
html.embedded .nav, html.embedded #sound-toggle, html.embedded #world-back{display:none}

html.world-eventos #home-world{transform:translateX(100vw)}
html.world-eventos{overflow:hidden}
#eventos-sector{position:fixed;inset:0;z-index:90;transform:translateX(-100vw);background:transparent;
  transition:transform 1.05s cubic-bezier(.55,.05,.2,1), visibility 0s 1.05s;visibility:hidden}
html.world-eventos #eventos-sector{transform:none;visibility:visible;transition:transform 1.05s cubic-bezier(.55,.05,.2,1), visibility 0s 0s}
#eventos-sector iframe{width:100%;height:100%;border:0;display:block;background:transparent}

/* ---------- 5 · SECCIONES DE LA HOME ---------- */
.hero{min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;user-select:none;-webkit-user-select:none}
#bg3d{position:fixed;inset:0;z-index:1;pointer-events:none}
.hero .glow{width:680px;height:680px;top:-200px;right:-220px}
.hero .glow.b{width:520px;height:520px;background:rgba(198,248,6,.08);bottom:-220px;left:-180px;top:auto;right:auto;animation-delay:-5s}
.hero-in{position:relative;z-index:2;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding:80px 36px 14px}
.hero h1{font-size:var(--titulo);margin:0}
/* la máscara respira arriba y abajo: sin el padding-top, la virgulilla
   de la Ñ (y los diacríticos en general) quedaba rebanada */
.lm{display:block;overflow:hidden;padding:.14em 0 .08em;margin:-.14em 0 -.08em}
.li{display:inline-block;transform:translateY(115%)}
.hero .sub{font-size:clamp(16px,1.9vw,19px);color:var(--cream-soft);max-width:540px;margin-top:16px;line-height:1.5}
.hero-cta{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.hero-foot{position:relative;z-index:2;padding-bottom:22px}
.hero-foot .wrap{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){ .hero-foot .wrap span:nth-child(2){display:none} }

@media(max-height:920px){
  :root{--titulo:clamp(42px,8vw,108px)}
  .hero-in{padding-top:90px}
}
@media(max-height:760px){
  :root{--titulo:clamp(34px,6.8vw,80px)}
}

.li{position:relative}
.fade{opacity:0;transform:translateY(28px)}

/* TEXT-STROKE de miel: acento tipográfico propio de Abeja (viene del
   sitio Next.js: .text-stroke-honey en globals.css) */
.stroke-honey{color:transparent;-webkit-text-stroke:2px var(--honey)}
@media(max-width:640px){ .stroke-honey{-webkit-text-stroke-width:1.4px} }

/* MARQUEE — la cinta de servicios de la marca (marqueeItems de site.ts),
   franja de miel levemente inclinada que corre en loop. Es el elemento
   distintivo del sitio real de Abeja Creativa. */
.marquee{position:relative;z-index:3;background:var(--honey);color:var(--ink);overflow:hidden;
  padding:13px 0;transform:rotate(-1.2deg);width:104vw;margin-left:-2vw;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.marquee-track{display:inline-flex;gap:0;white-space:nowrap;animation:marq 30s linear infinite;will-change:transform}
.marquee-track span{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:15px;letter-spacing:.06em;padding:0 22px;display:inline-flex;align-items:center;gap:44px}
.marquee-track span::after{content:'🐝';font-size:12px;margin-left:44px}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

.band{padding:150px 0}
h2.sec{font-size:var(--titulo-sec);margin-top:22px}
@media(max-width:768px){ .band{padding:96px 0} .hero-in{padding:116px 24px 28px} }

/* Servicios — bento respetando span wide/tall de site.ts */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:14px;margin-top:60px}
.bento-item{position:relative;border:1px solid var(--line);border-radius:22px;padding:28px 26px;background:rgba(247,242,231,.02);
  transition:border-color .5s var(--ease),transform .5s var(--ease);overflow:hidden;grid-column:span 2}
.bento-item.span-wide{grid-column:span 4}
.bento-item.span-tall{grid-row:span 2}
.bento-item:hover{border-color:rgba(245,248,4,.4);transform:translateY(-4px)}
.bento-ico{width:46px;height:46px;border-radius:14px;background:var(--honey-lo);color:var(--honey);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.bento-ico svg{width:22px;height:22px}
.bento-item h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.01em;line-height:1.05}
.bento-item p{font-size:14.5px;color:var(--muted);line-height:1.5;margin-top:10px;max-width:44ch}
@media(max-width:900px){ .bento{grid-template-columns:repeat(2,1fr)} .bento-item{grid-column:span 2 !important;grid-row:auto !important} }
@media(max-width:560px){ .bento{grid-template-columns:1fr} }

/* Portafolio — tarjetas directas con hover (el patrón de cards del sitio
   Next.js de Abeja), sin trucos de naipe */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.teaser{display:block;transition:transform .6s var(--ease)}
.teaser:hover{transform:translateY(-6px)}
.teaser-card{position:relative;border:1px solid var(--line);border-radius:24px;padding:8px;background:rgba(247,242,231,.02);
  transition:border-color .5s var(--ease)}
.teaser:hover .teaser-card{border-color:rgba(245,248,4,.4)}
.teaser-in{border-radius:18px;overflow:hidden;background:#0e0e0a}
.teaser-vis{position:relative;height:230px;overflow:hidden;background:#0e0e0a}
.teaser-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.teaser:hover .teaser-vis img{transform:scale(1.06)}
.teaser-body{padding:22px 24px 26px}
.teaser-body .n{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);font-weight:700}
.teaser-body h3{font-family:var(--disp);text-transform:uppercase;font-size:19px;margin:8px 0 6px;line-height:1.1}
.teaser-body p{font-size:13px;color:var(--muted)}
@media(max-width:880px){ .teaser-grid{grid-template-columns:1fr} .teaser-vis{height:200px} }

/* Planes */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px;align-items:stretch}
.plan-card{border:1px solid var(--line);border-radius:26px;padding:36px 30px;background:rgba(247,242,231,.02);display:flex;flex-direction:column;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.plan-card:hover{transform:translateY(-6px);border-color:rgba(245,248,4,.35)}
.plan-card.popular{border-color:var(--honey);background:linear-gradient(165deg,rgba(245,248,4,.07),rgba(247,242,231,.02))}
.plan-tag{display:inline-block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);background:var(--honey);
  padding:5px 12px;border-radius:999px;font-weight:700;margin-bottom:18px;width:max-content}
.plan-card h3{font-family:var(--disp);text-transform:uppercase;font-size:26px}
.plan-card .blurb{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.5}
.plan-feats{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.plan-feats li{font-size:14px;color:var(--cream-soft);display:flex;align-items:flex-start;gap:10px}
.plan-feats li::before{content:'✓';color:var(--honey);font-weight:700;flex-shrink:0}
.plan-card .btn{margin-top:28px;justify-content:center}
@media(max-width:900px){ .plans-grid{grid-template-columns:1fr} }

/* Causa — BLOQUE CREMA: la sección se da vuelta a claro (fondo crema,
   texto tinta), un quiebre de ritmo que es de Abeja y de nadie más en
   este universo. El polen y el panal quedan tapados a propósito:
   la sección respira distinto. */
.band-cream{background:var(--cream);color:var(--ink);position:relative;z-index:2}
.band-cream .eyebrow{border-color:rgba(11,11,13,.18);color:#6b665c;background:rgba(11,11,13,.03)}
.band-cream .eyebrow::before{background:var(--amber);box-shadow:0 0 12px var(--amber)}
.band-cream .accent{color:var(--amber)}
.band-cream p{color:#4a463c}
.band-cream .stat{border-color:rgba(11,11,13,.12);background:#fffdf6}
.band-cream .stat .v{color:var(--ink)}
.band-cream .stat .k{color:#6b665c}
.band-cream .causa-photo{border-color:rgba(11,11,13,.12)}
.causa-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-top:56px}
.causa-photo{border-radius:26px;overflow:hidden;border:1px solid var(--line)}
.causa-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.causa-text p{font-size:clamp(16px,1.8vw,19px);color:var(--cream-soft);line-height:1.6;max-width:52ch}
/* dentro del bloque crema, el párrafo va en tinta (esta regla vive después
   de .causa-text p a propósito: misma especificidad, gana por orden) */
.band-cream .causa-text p{color:#4a463c}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.stat{border:1px solid var(--line);border-radius:20px;padding:20px 20px;background:rgba(247,242,231,.02)}
.stat .v{font-family:var(--disp);font-size:clamp(28px,3vw,42px);color:var(--cream)}
.stat .v .accent{font-size:.6em}
.stat .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:900px){ .causa-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr 1fr 1fr} }
@media(max-width:560px){ .stats-grid{grid-template-columns:1fr} }

/* CTA final */
.cta{min-height:80dvh;display:flex;align-items:center;text-align:center;overflow:hidden;user-select:none;-webkit-user-select:none}
.cta .glow{width:640px;height:640px;top:50%;left:50%;transform:translate(-50%,-50%)}
.cta-bee{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(56vw,480px);opacity:.14;z-index:0;animation:beatslow 4.5s ease-in-out infinite}
@keyframes beatslow{0%,100%{transform:translate(-50%,-50%) scale(.97)}50%{transform:translate(-50%,-50%) scale(1.04)}}
.cta-in{position:relative;z-index:2;width:100%;background:radial-gradient(60% 62% at 50% 45%, rgba(11,11,13,.86) 0%, rgba(11,11,13,.5) 52%, rgba(11,11,13,0) 78%);padding:64px 0}
.cta h2{text-shadow:0 4px 40px rgba(11,11,13,.9)}
.cta .contact-row a, .cta p{text-shadow:0 2px 12px rgba(11,11,13,.85)}
.cta h2{font-size:clamp(40px,min(7.2vw,10.6vh),108px);line-height:1.02}
.cta .btn{margin-top:40px}
.contact-row{display:flex;gap:24px;justify-content:center;margin-top:28px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.contact-row a{color:var(--cream);border-bottom:1px solid var(--honey);padding-bottom:2px;transition:color .3s}
.contact-row a:hover{color:var(--honey)}

footer{border-top:1px solid var(--line);padding:48px 0 42px;position:relative;z-index:2}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot img{height:24px;width:auto;object-fit:contain;opacity:.9}
.foot .mid{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot .mid a:hover{color:var(--honey)}
.foot .fine{font-size:11px;color:#6e6a5f;letter-spacing:.05em}
@media(max-width:760px){ .foot{flex-direction:column;text-align:center} }

/* ---------- 6 · SECTORES (eventos / negocios) ---------- */
.sector-hero{padding:150px 0 60px;position:relative}
.sector-hero h1{font-size:var(--titulo-sec);margin-top:20px;max-width:16ch}
.sector-hero p{color:var(--muted);max-width:56ch;margin-top:16px;font-size:15.5px;line-height:1.6}

.case-grid,.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px}
.case-card,.work-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:rgba(247,242,231,.02);
  transition:border-color .5s var(--ease),transform .5s var(--ease);display:flex;flex-direction:column}
.case-card:hover,.work-card:hover{transform:translateY(-5px);border-color:rgba(245,248,4,.35)}
.case-vis,.work-vis{position:relative;height:190px;overflow:hidden;background:#0e0e0a}
.case-vis img,.work-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.case-card:hover .case-vis img,.work-card:hover .work-vis img{transform:scale(1.06)}
.case-body,.work-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.case-body .kind,.work-body .kind{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700}
.case-body h3,.work-body h3{font-family:var(--disp);text-transform:uppercase;font-size:19px;margin:8px 0 8px;line-height:1.1}
.case-body p,.work-body p{font-size:13.5px;color:var(--muted);line-height:1.5;flex:1}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.tag-row span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-hi);border-radius:999px;padding:4px 10px}
.case-link,.work-link{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
@media(max-width:980px){ .case-grid,.work-grid{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .case-grid,.work-grid{grid-template-columns:1fr} }

/* ---------- 7 · MASCOTA + PERF + A11Y ---------- */
#mascot{position:fixed;left:0;top:0;width:170px;height:170px;z-index:95;pointer-events:none;opacity:1;transition:opacity .5s var(--ease)}
@media(max-width:768px){ #mascot{width:140px;height:140px} }

@media(max-width:768px){
  .glow{filter:blur(70px);animation:none;opacity:.85}
}

html.no-gsap .li{transform:none}
html.no-gsap .fade{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .li{transform:none}.fade{opacity:1;transform:none}
  .glow,#loader svg,.cta-bee,.eyebrow::before{animation:none}
}