/* ============================================================
   DESIGN TOKENS (Manual de Marca Infiniti Group)
   ============================================================ */
:root{
  /* Tokens de marca conectados a theme.json (Apariencia → Editor → Estilos).
     Cambiar un color global en el editor cambia estas variables y, con ellas, la página pública.
     El valor hex es solo el respaldo cuando WordPress no está presente. */
  --background:var(--wp--preset--color--midnight,#0B1F3A); --foreground:var(--wp--preset--color--white,#FFFFFF);
  --ink:var(--wp--preset--color--midnight,#0B1F3A);            /* Midnight Blue */
  --royal:var(--wp--preset--color--royal,#2563EB);          /* Royal Blue */
  --emerald:var(--wp--preset--color--emerald,#10B981);        /* Emerald */
  --cyan:var(--wp--preset--color--cyan,#38BDF6);           /* Cyan */
  --purple:var(--wp--preset--color--purple,#885CF6);         /* Purple */
  --graphite:var(--wp--preset--color--graphite,#1F2937);       /* Graphite */
  --light-gray:var(--wp--preset--color--light-gray,#E5E7EB);     /* Light Gray */
  --pf-card:#1F2937;
  --cc-search:#0B1F3A;
  --paper:#FFFFFF;
  --paper-alt:#E5E7EB;
  --nav-ink:#0B1F3A;
  --cc-dark-ink:#FFFFFF; --cc-light-ink:#0B1F3A; --cc-light-muted:#64748B;
  --nav-surface:#E5E7EB; --nav-item:#FFFFFF; --nav-logo:#FFFFFF;
  --nav-cta:#2563EB; --nav-cta-ink:#FFFFFF;
  --nav-border:rgba(255,255,255,0.6); --nav-shadow:rgba(0,0,0,0.12);
  --glass-dark:rgba(40,36,33,0.55); --glass-border:rgba(255,255,255,0.12);
  --glass-border-soft:rgba(255,255,255,0.14); --hairline:rgba(255,255,255,0.28);
  --watermark:rgba(255,255,255,0.85);
  --card-violet:radial-gradient(95% 80% at 50% 28%, #E5E7EB 0%, #38BDF6 34%, #2563EB 66%, #0B1F3A 100%);
  --loader-glow:rgba(37,99,235,0.55);
  /* Radii */
  --radius-btn:8px; --radius-card:3vmin; --radius-pf:2.5vmin;
  --radius-slider:1.6vmin; --radius-grid:12px; --radius-target:30px;
  /* Showreel geometry — DESKTOP defaults (also the no-JS fallback) */
  --sr-card-w:42vmin;
  --sr-card-h:62vmin;
  --sr-carousel-r:27vmin;
  --sr-flyback:40vmin;
  --sr-hero-pad:8vmin;
  --sr-heading-1:18vmin;
  --sr-heading-2:24vmin;
  --sr-sphere-body-w:52vmin;
  --sr-sphere-body-text:2.4vmin;
  --sr-track-vh:2000vh;
}

/* Adaptive root font-size (rem scaling for UI only; most layout is vmin/vw/vh) */
html{ font-size:16px; }
@media (max-width:1920px){ html{ font-size:0.833333vw; } }
@media (max-width:1440px){ html{ font-size:1.111111vw; } }
@media (max-width:1024px){ html{ font-size:1.5625vw; } }
@media (max-width:640px){  html{ font-size:4.444444vw; } }

*{ margin:0; box-sizing:border-box; }
html,body{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; }

body{
  background:var(--background);
  color:var(--foreground);
  overflow-x:hidden;
  font-family:"Inter", sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,nav,button,.font-poppins{ font-family:"Poppins", sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.mono{ font-family:"JetBrains Mono", monospace; }
::selection{ background:var(--royal); color:#fff; }

:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:2px; }

/* Skip link + reduced-motion helper */
.skip-link{
  position:fixed; left:1vmin; top:1vmin; z-index:300;
  background:var(--royal); color:#fff; padding:10px 16px; border-radius:8px;
  transform:translateY(-160%); transition:transform .2s ease; font-family:"Poppins",sans-serif; font-size:14px;
}
.skip-link:focus{ transform:translateY(0); }

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:200; display:flex; place-items:center; justify-content:center;
  overflow:hidden; background:var(--ink); flex-direction:column; gap:4vmin;
}
#loader-bloom{
  position:absolute; left:50%; top:44%; width:78vmin; height:78vmin; transform:translate(-50%,-50%);
  border-radius:9999px; filter:blur(80px); background:var(--card-violet); opacity:0; pointer-events:none;
}
#loader-mark{
  position:relative; width:180px; height:132px; object-fit:contain; opacity:0;
  filter:drop-shadow(0 0 28px var(--loader-glow)); will-change:transform,opacity,filter;
}
#loader-ui{
  position:absolute; left:0; right:0; bottom:8vmin; display:flex; flex-direction:column; align-items:center; gap:1.2vmin;
  color:rgba(255,255,255,0.85);
}
#loader-ui .sys{ font-size:12px; letter-spacing:0.4em; color:rgba(255,255,255,0.5); }
#loader-ui .msg{ font-size:13px; letter-spacing:0.06em; color:rgba(255,255,255,0.75); }
#loader-count{ font-size:26px; font-family:"JetBrains Mono",monospace; color:#fff; letter-spacing:0.08em; }

/* ============================================================
   SITE HEADER / NAV
   ============================================================ */
#site-header{
  position:fixed; left:0; top:2vmin; z-index:100; display:flex; width:100%; flex-direction:column; align-items:center;
  pointer-events:none; opacity:0; transform:translateY(-10px); transition:opacity .7s ease-in-out, transform .7s ease-in-out;
}
#site-header.revealed{ opacity:1; transform:translateY(0); }
#site-header nav{
  pointer-events:auto; display:flex; align-items:stretch; gap:1px; border-radius:8px; background:var(--nav-surface);
  padding:1px; box-shadow:0 10px 30px var(--nav-shadow); max-width:calc(100% - 6vmin);
}
.nav-tile{ border-radius:8px; height:40px; display:flex; align-items:center; justify-content:center; }
.nav-logo-tile{ background:var(--ink); padding:0 12px; }
.nav-logo-tile img{ height:22px; width:auto; object-fit:contain; }
.nav-logo-tile .iso{ display:none; }
.nav-links{ display:none; align-items:stretch; gap:1px; }
.nav-links a{ width:88px; background:var(--nav-item); color:var(--nav-ink); font-family:"Poppins",sans-serif; font-size:15px; }
.nav-links a span{ transition:opacity .25s ease; }
.nav-links a:hover span{ opacity:0.55; }
.nav-toggle{ width:40px; background:var(--nav-item); color:var(--nav-ink); border:none; cursor:pointer; }
.nav-cta{ background:var(--nav-cta); color:var(--nav-cta-ink); padding:0 22px; font-family:"Poppins",sans-serif; font-size:15px; font-weight:500; }
#mobile-menu{
  margin-top:1vmin; width:calc(100% - 8vmin); max-width:420px; overflow:hidden; border-radius:8px; background:var(--nav-surface);
  padding:1px; pointer-events:none; opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease;
}
#mobile-menu.open{ pointer-events:auto; opacity:1; transform:translateY(0); }
#mobile-menu ul{ list-style:none; display:flex; flex-direction:column; gap:1px; }
#mobile-menu a{ display:flex; align-items:center; height:44px; width:100%; padding:0 16px; background:var(--nav-item); color:var(--nav-ink); font-family:"Poppins",sans-serif; font-size:15px; }
@media (min-width:640px){
  .nav-links{ display:flex; }
  .nav-toggle{ display:none; }
  .nav-logo-tile{ padding:0 16px; }
}
@media (max-width:760px){
  .nav-links a{ width:66px; font-size:13px; }
  .nav-cta{ padding:0 16px; font-size:13px; }
}
@media (max-width:640px){
  .nav-logo-tile img.blanco{ display:none; }
  .nav-logo-tile img.iso{ display:block; height:26px; }
}

/* ============================================================
   AURORA OVERLAY
   ============================================================ */
#aurora{ position:fixed; inset:0; pointer-events:none; z-index:30; opacity:0; }
#aurora canvas{ width:100%; height:100%; display:block; }

/* ============================================================
   TRACK + STICKY STAGE
   ============================================================ */
.track{ position:relative; height:var(--sr-track-vh); }
.sticky{ position:sticky; top:0; height:100vh; overflow:hidden; padding:4vmin; }

#stage-backdrop{ position:absolute; inset:0; background:#fff; z-index:0; }
#marquee-wrap{
  position:absolute; left:0; top:50%; width:100vw; transform:translateY(-50%); pointer-events:none; z-index:1;
}
.marquee{ width:100%; overflow:hidden; }
.marquee-row{ display:flex; width:max-content; animation:marquee 25s linear infinite; }
.marquee-item{ padding:0 3vw; font-size:7vw; letter-spacing:-0.03em; color:#000; font-family:"Poppins",sans-serif; font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; }
.marquee-bullet{ width:1.5vw; height:1.5vw; transform:translateY(0.8vw); border-radius:9999px; border:2px solid #000; display:inline-block; margin:0 1.5vw; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

#scene3d{ position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center; perspective:1500px; z-index:2; }
#camera-rig{ position:absolute; inset:0; transform-style:preserve-3d; }
#carousel{ position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center; transform-style:preserve-3d; }

.card{ position:absolute; }
#card1{ overflow:hidden; }
#card2,#card3,#card4{ height:var(--sr-card-h); width:var(--sr-card-w); }
#card4{ display:flex; align-items:center; justify-content:center; overflow:visible; }

/* Grid tiles */
.grid-tile{ position:absolute; left:50%; top:50%; z-index:-1; overflow:hidden; background-size:cover; background-position:center; }

/* Target block */
#target-block{ position:absolute; left:50%; top:50%; z-index:-1; height:100vh; width:100vw; overflow:hidden; background:var(--ink); }
#target-block canvas{ position:absolute; inset:0; width:100%; height:100%; }
#target-frame{ position:absolute; inset:-4vmin; z-index:3; border-radius:11vmin; border:8vmin solid #fff; pointer-events:none; opacity:0; }

/* Carousel CTA */
#carousel-cta{ position:absolute; left:0; right:0; bottom:2vmin; z-index:3; display:flex; justify-content:center; padding:0 4vmin; pointer-events:none; }
#carousel-cta a{ pointer-events:auto; border-radius:var(--radius-btn); background:var(--ink); padding:2vmin 4.2vmin; font-size:2.1vmin; color:var(--paper); font-family:"Poppins",sans-serif; }

/* ============================================================
   HERO CARD
   ============================================================ */
.hero-card{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:var(--radius-card); background:#000; }
.hero-card canvas.hero-grad{ position:absolute; inset:0; z-index:1; width:100%; height:100%; }
.hero-head{ position:absolute; inset:0; z-index:3; display:flex; padding:40px; pointer-events:none; }
.hero-head h1{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; font-size:7vw; font-weight:400; line-height:0.95; letter-spacing:-0.03em; color:#fff; }
.hero-head .l2{ opacity:0.4; }
.hero-transition{ position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.hero-transition h2{ text-align:center; font-size:3.6vmin; font-weight:400; color:#fff; filter:drop-shadow(0 6px 12px rgba(0,0,0,0.5)); transform:rotate(-90deg); }
.hero-img-card{ position:absolute; inset:0; z-index:6; perspective:1400px; pointer-events:none; }
.hero-slider{ position:absolute; left:50%; top:50%; overflow:hidden; border-radius:var(--radius-slider); box-shadow:0 25px 50px -12px rgba(0,0,0,0.55); }
.hero-slider img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.hero-slider img.b{ left:100%; transform:rotate(0deg); }
.hero-bottom{ position:absolute; bottom:0; left:0; width:100%; padding:40px; z-index:6; display:flex; flex-direction:column; gap:1.5rem; color:#fff; font-weight:300; }
.hero-bottom p.lead{ max-width:28rem; opacity:0.9; font-size:16px; line-height:1.6; }
.hero-btns{ display:flex; align-items:center; gap:1rem; }
.btn-glass{ padding:0.9rem 2rem; border-radius:8px; background:rgba(255,255,255,0.1); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.2); font-size:17px; font-family:"Poppins",sans-serif; cursor:pointer; }
.btn-solid-white{ background:#fff; color:#000; font-weight:500; border:none; }
.hero-divider{ width:100%; height:1px; background:rgba(255,255,255,0.3); margin:0.5rem 0; }
.hero-humanai{ display:flex; flex-direction:column; gap:0.4rem; }
.hero-humanai strong{ font-weight:600; }
.hero-humanai span{ opacity:0.7; font-size:15px; max-width:30rem; }
@media (max-width:640px){
  .hero-head, .hero-bottom{ padding:20px; }
  .hero-head{ padding-top:72px; align-items:flex-start; }  /* el título despeja la barra de navegación */
  .hero-bottom{ gap:1rem; }
  .hero-bottom p.lead{ font-size:14px; }
  .hero-btns{ flex-direction:column; align-items:stretch; gap:0.75rem; }
  .btn-glass{ font-size:15px; padding:0.75rem 1.25rem; }
  .hero-divider, .hero-humanai{ display:none; }
}

/* ============================================================
   SERVICE CARD
   ============================================================ */
.svc-card{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:var(--radius-card); }
.svc-card.dark{ color:var(--cc-dark-ink); }
.svc-card.light{ color:var(--cc-light-ink); }
.svc-card > img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; padding:3.2vmin; }
.svc-top{ display:flex; align-items:center; justify-content:space-between; }
.svc-logo{ width:3.4vmin; height:3.4vmin; border-radius:0.9vmin; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.svc-logo svg{ width:2.2vmin; height:2.2vmin; }
.svc-url{ font-size:1.5vmin; letter-spacing:0.02em; opacity:0.85; }
.svc-pill{ margin-top:2.6vmin; display:flex; align-items:center; justify-content:space-between; gap:1.5vmin; border-radius:4vmin; border:1px solid var(--glass-border); background:var(--glass-dark); padding:1.8vmin 2vmin; backdrop-filter:blur(10px); }
.svc-pill .lbl{ display:flex; flex-direction:column; }
.svc-pill .lbl small{ font-size:1.4vmin; opacity:0.6; }
.svc-pill .lbl b{ font-size:2.2vmin; font-weight:400; }
.svc-badge{ width:3vmin; height:3vmin; border-radius:9999px; background:var(--glass-border); display:flex; align-items:center; justify-content:center; }
.svc-search{ margin:auto 0; display:flex; align-items:center; gap:1.4vmin; border-radius:5vmin; background:var(--cc-search); padding:2vmin 2.2vmin; color:var(--paper); }
.svc-search .q{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.7vmin; opacity:0.8; }
.svc-bottom{ margin-top:auto; }
.svc-card.dark h3{ font-size:4.6vmin; font-weight:400; line-height:1.05; }
.svc-card.dark h3 strong{ font-weight:700; color:#fff; }
.svc-card.light p{ font-size:3.1vmin; line-height:1.2; color:var(--paper); }
.svc-card.light p strong{ font-weight:700; color:#fff; }

/* ============================================================
   SPHERE CARD
   ============================================================ */
.sphere-face{ position:absolute; inset:0; overflow:hidden; border-radius:var(--radius-card); background:var(--card-violet); }
.sphere-face .inner{ display:flex; width:100%; height:100%; flex-direction:column; padding:3.2vmin; color:var(--paper); }
.sphere-face .top{ display:flex; align-items:center; justify-content:space-between; }
.sphere-face .pill{ border-radius:9999px; border:1px solid var(--glass-border); background:var(--glass-dark); padding:0.8vmin 1.8vmin; font-size:1.4vmin; backdrop-filter:blur(10px); }
.sphere-face .url{ font-size:1.5vmin; opacity:0.85; }
.sphere-face h3{ margin-top:auto; max-width:88%; font-size:4.4vmin; line-height:1.05; font-weight:400; }

.sphere-panel{ position:absolute; left:50%; top:50%; height:300vh; width:300vw; background:#0B1F3A; mask-position:center; -webkit-mask-position:center; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; }
.sphere-scene{ position:absolute; left:50%; top:50%; height:100vh; width:100vw; }
.sphere-canvas{ position:absolute; left:50%; top:50%; z-index:2; width:100%; height:100%; }
.sphere-canvas canvas{ width:100%; height:100%; display:block; }
.sphere-logo{ position:absolute; left:50%; top:50%; z-index:3; height:12vh; width:18vh; object-fit:contain; }
.sphere-h-top{ position:absolute; left:4vmin; top:4vmin; z-index:4; font-size:var(--sr-heading-1); line-height:0.85; color:#fff; font-weight:700; }
.sphere-h-bot{ position:absolute; bottom:4vmin; right:4vmin; z-index:4; display:flex; flex-direction:column; align-items:flex-end; text-align:right; font-size:var(--sr-heading-2); line-height:0.85; color:#fff; font-weight:700; }
.sphere-body{ position:absolute; bottom:5vmin; left:4vmin; z-index:4; display:flex; max-width:var(--sr-sphere-body-w); flex-direction:column; gap:1.8vmin; font-size:var(--sr-sphere-body-text); font-weight:300; line-height:1.45; color:#fff; }

/* ============================================================
   CASOS DE ÉXITO
   ============================================================ */
#casos-de-exito{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; overflow:hidden; padding-top:9vmin; padding-bottom:8vmin; transform:translateY(100%); }
#pf-heading{ position:absolute; left:4vmin; top:3vmin; z-index:2; font-size:5vmin; font-weight:700; color:#fff; }
#pf-track{ display:flex; height:100%; gap:3vmin; padding-left:3vmin; will-change:transform; }
.case-card{ position:relative; display:flex; height:100%; width:62vw; flex-shrink:0; flex-direction:column; justify-content:space-between; overflow:hidden; border-radius:var(--radius-pf); background:var(--pf-card); padding:3.5vmin; color:#fff; }
.case-card canvas.case-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.85; }
.case-logo-zone{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; padding:8vmin; pointer-events:none; }
.case-logo-zone .logo-pad{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:2vmin; padding:5vmin; backdrop-filter:blur(4px); max-width:70%; }
.case-logo-zone img{ width:100%; height:auto; max-height:26vh; object-fit:contain; }
.case-top{ position:relative; z-index:2; }
.case-tag{ font-family:"JetBrains Mono",monospace; font-size:1.6vmin; letter-spacing:0.2em; text-transform:uppercase; color:var(--cyan); }
.case-name{ margin-top:1vmin; font-size:3.4vmin; font-weight:700; }
.case-actions{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:1.4vmin; }
.case-actions a{ display:inline-flex; align-items:center; gap:0.6vmin; border-radius:8px; padding:1.4vmin 2.4vmin; font-size:1.9vmin; font-family:"Poppins",sans-serif; }
.case-actions a.fb{ background:rgba(37,99,235,0.18); border:1px solid rgba(37,99,235,0.5); color:#dbe6ff; }
.case-actions a.ig{ background:rgba(136,92,246,0.18); border:1px solid rgba(136,92,246,0.5); color:#e7deff; }
.case-actions a.go{ background:#fff; color:var(--ink); font-weight:600; }

/* CtaBlock on target */
#cta-block{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2.5vmin; padding:9vmin; pointer-events:none; }
#cta-block h2{ max-width:60vw; display:flex; flex-direction:column; align-items:flex-start; font-size:7vw; font-weight:400; line-height:0.95; letter-spacing:-0.03em; color:var(--paper); }
#cta-block h2 .dim{ opacity:0.4; }
#cta-block p{ max-width:26vw; font-size:2.2vmin; line-height:1.35; color:rgba(255,255,255,0.7); }
#cta-block a{ pointer-events:auto; margin-top:1.5vmin; display:inline-flex; border-radius:8px; background:var(--paper); padding:2.2vmin 4.6vmin; font-size:2.5vmin; color:var(--ink); font-family:"Poppins",sans-serif; font-weight:500; }
@media (max-width:640px){
  #cta-block h2{ max-width:88vw; }
  #cta-block p{ max-width:80vw; font-size:3.4vmin; }
}

/* ============================================================
   SEMANTIC SECTIONS (presencia / contacto / footer)
   ============================================================ */
.section-pad{ position:relative; z-index:41; background:var(--ink); padding:12vh 6vw; }
.section-pad.alt{ background:linear-gradient(180deg,#0B1F3A 0%, #0d1424 100%); }
.eyebrow{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--cyan); margin-bottom:1.2rem; }
.h-section{ font-family:"Poppins",sans-serif; font-weight:700; font-size:clamp(28px,5vw,56px); line-height:1.02; letter-spacing:-0.02em; max-width:20ch; }
.sub-section{ margin-top:1.4rem; max-width:60ch; color:rgba(255,255,255,0.72); font-size:clamp(15px,1.3vw,18px); line-height:1.6; font-weight:300; }

.presence-grid{ margin-top:5vh; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem; }
.presence-card{ position:relative; border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:2rem; background:rgba(255,255,255,0.02); overflow:hidden; transition:border-color .3s ease, transform .3s ease; }
.presence-card:hover{ border-color:var(--royal); transform:translateY(-4px); }
.presence-card .flagdot{ width:10px; height:10px; border-radius:50%; background:var(--emerald); box-shadow:0 0 12px var(--emerald); }
.presence-card h3{ margin-top:1rem; font-size:1.4rem; }
.presence-card a{ display:inline-flex; align-items:center; gap:0.4rem; margin-top:1rem; color:var(--cyan); font-size:0.95rem; }
.presence-card a:hover{ text-decoration:underline; }

/* Services grid */
.svc-grid{ margin-top:5vh; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.svc-item{ border:1px solid rgba(255,255,255,0.1); border-left:3px solid var(--dot,var(--royal)); border-radius:12px; padding:1.6rem; background:rgba(255,255,255,0.02); }
.svc-item h4{ font-size:1.15rem; }
.svc-item .en{ font-family:"Poppins",sans-serif; }
.svc-item .es{ display:block; margin-top:0.4rem; color:rgba(255,255,255,0.6); font-size:0.9rem; font-weight:300; }

/* Contact tabs */
.tabs{ margin-top:4vh; display:inline-flex; gap:0.5rem; padding:0.4rem; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.tab-btn{ padding:0.8rem 1.6rem; border-radius:9px; background:transparent; color:rgba(255,255,255,0.7); font-family:"Poppins",sans-serif; font-size:0.95rem; cursor:pointer; border:none; transition:background .25s, color .25s; }
.tab-btn[aria-selected="true"]{ background:var(--royal); color:#fff; }
.tab-btn.cand[aria-selected="true"]{ background:var(--emerald); }
.panel{ margin-top:2.5vh; max-width:920px; }
.panel[hidden]{ display:none; }
.panel-note{ margin-bottom:1.5rem; padding:1rem 1.2rem; border-radius:10px; background:rgba(56,189,246,0.1); border:1px solid rgba(56,189,246,0.3); color:#cbe9ff; font-size:0.9rem; }
form .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; }
@media (max-width:640px){ form .grid2{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; }
.field label{ font-family:"JetBrains Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.65); }
.field input,.field select,.field textarea{
  width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.16); border-radius:8px;
  color:#fff; font-family:"Inter",sans-serif; font-size:0.95rem; padding:0.8rem 0.9rem; transition:border-color .2s, background .2s;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,0.3); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--royal); background:rgba(255,255,255,0.07); }
.field select option{ background:#0a1220; color:#fff; }
.field textarea{ min-height:120px; resize:vertical; }
.field .err{ color:#ff9d9d; font-size:0.78rem; font-family:"Inter",sans-serif; min-height:1em; display:none; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#ff6b6b; }
.field.invalid .err{ display:block; }
.field-file small{ font-size:11px; color:rgba(255,255,255,0.45); font-family:"JetBrains Mono",monospace; }
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:0.5rem; }
.btn-primary{ background:#fff; color:var(--ink); border-radius:8px; padding:0.9rem 1.8rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:0.9rem; cursor:pointer; border:none; }
.btn-primary[disabled]{ opacity:0.6; cursor:progress; }
.btn-wa{ display:inline-flex; align-items:center; gap:0.5rem; border:1px solid rgba(37,211,102,0.6); color:#25D366; border-radius:8px; padding:0.85rem 1.3rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:0.9rem; }
.btn-wa:hover{ background:rgba(37,211,102,0.12); }
.btn-wa svg{ width:16px; height:16px; }
.form-status{ margin-top:1rem; font-size:0.85rem; min-height:1.2em; }
.form-status.ok{ color:var(--emerald); }
.form-status.warn{ color:var(--cyan); }

/* Footer */
footer{ position:relative; z-index:41; background:#08152b; padding:8vh 6vw 4vh; border-top:1px solid rgba(255,255,255,0.08); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr; gap:2rem; } }
.footer-brand img{ height:34px; width:auto; margin-bottom:1.4rem; }
.footer-brand p{ max-width:34ch; color:rgba(255,255,255,0.6); font-size:0.92rem; line-height:1.6; font-weight:300; }
.footer-col h5{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:1rem; }
.footer-col a, .footer-col span{ display:block; color:rgba(255,255,255,0.72); font-size:0.9rem; margin-bottom:0.6rem; }
.footer-col a:hover{ color:#fff; }
.footer-services{ margin-top:3rem; display:flex; flex-wrap:wrap; gap:0.6rem; }
.footer-services span{ font-size:0.8rem; color:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:0.35rem 0.9rem; }
.footer-bottom{ margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.08); display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.footer-bottom .legal{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer-bottom a{ font-size:0.8rem; color:rgba(255,255,255,0.5); }
.footer-bottom .cr{ font-family:"JetBrains Mono",monospace; font-size:11px; color:rgba(255,255,255,0.4); }

/* WhatsApp float */
#wa-float{
  position:fixed; right:2.2vmin; bottom:2.2vmin; z-index:90; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,0.35);
  transition:transform .2s ease;
}
#wa-float:hover{ transform:scale(1.08); }
#wa-float svg{ width:30px; height:30px; }

/* ---- Botón de música de ambiente ---- */
#music-toggle{
  position:fixed; left:2.2vmin; bottom:2.2vmin; z-index:90; width:52px; height:52px; border-radius:50%;
  background:rgba(11,31,58,0.72); border:1px solid rgba(56,189,246,0.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,0.35); transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
#music-toggle:hover{ transform:scale(1.08); background:rgba(37,99,235,0.55); border-color:var(--cyan); }
#music-toggle svg{ width:22px; height:22px; }
#music-toggle .ic-on{ display:none; }
#music-toggle.playing .ic-on{ display:block; }
#music-toggle.playing .ic-off{ display:none; }
#music-toggle.playing{ border-color:var(--cyan); background:rgba(37,99,235,0.5); }

/* =====================================================================
   NUEVO HERO EDITORIAL (aislado, prefijo .ig-hero). No afecta estilos globales.
   ===================================================================== */
.ig-hero{ position:relative; width:100%; min-height:100svh; background:var(--ink); overflow:hidden; isolation:isolate; }
.ig-hero__media, .ig-hero__canvas, .ig-hero__veil{ position:absolute; inset:0; }
.ig-hero__media{ z-index:1; }
.ig-hero__img{ width:100%; height:100%; object-fit:cover; object-position:var(--ig-obj,50% 32%); transition:opacity .6s ease; }
.ig-hero__canvas{ z-index:2; width:100%; height:100%; display:block; opacity:0; transition:opacity .6s ease; }
.ig-hero.webgl-on .ig-hero__canvas{ opacity:1; }
.ig-hero.webgl-on .ig-hero__img{ opacity:0; }  /* solo puntos: la foto queda oculta (sigue siendo la fuente del halftone) */
.ig-hero__veil{ z-index:3; pointer-events:none;
  background:
    linear-gradient(to top, rgba(11,31,58,0.96) 0%, rgba(11,31,58,0.82) 26%, rgba(11,31,58,0.40) 56%, rgba(11,31,58,0.14) 100%),
    linear-gradient(to right, rgba(11,31,58,0.74) 0%, rgba(11,31,58,0.16) 46%, rgba(11,31,58,0) 70%),
    linear-gradient(to bottom, rgba(11,31,58,0.38) 0%, rgba(11,31,58,0) 16%);
}
.ig-hero__inner{ position:relative; z-index:4; width:100%; max-width:1240px; margin:0 auto;
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:16vh 6vw 9vh; gap:0; }
.ig-hero__eyebrow{ font-family:"JetBrains Mono",monospace; font-size:clamp(10px,1.05vw,13px); letter-spacing:0.26em; text-transform:uppercase; color:var(--cyan); margin:0 0 1.1rem; }
.ig-hero__title{ font-family:"Poppins",sans-serif; font-weight:700; color:#fff; line-height:1.02; letter-spacing:-0.02em;
  font-size:clamp(2.3rem,6.2vw,5.6rem); margin:0 0 1.4rem; text-shadow:0 2px 30px rgba(0,0,0,0.5); max-width:18ch; }
.ig-hero__title .ig-line{ display:block; }
.ig-hero__title .ig-line:last-child{ color:#dbe6ff; }
.ig-hero__text{ font-family:"Inter",sans-serif; font-weight:300; color:#fff; max-width:54ch;
  font-size:clamp(1rem,1.45vw,1.25rem); line-height:1.6; margin:0 0 1.8rem; }
.ig-hero__cta{ display:flex; align-items:center; gap:1.4rem 1.6rem; flex-wrap:wrap; margin:0 0 2.4rem; }
.ig-hero__btn{ font-family:"Poppins",sans-serif; font-weight:600; font-size:clamp(.95rem,1.15vw,1.05rem); color:#fff;
  background:var(--royal); border:none; border-radius:10px; padding:0.95rem 2.6rem; cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(37,99,235,0.6); transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }
.ig-hero__btn:hover{ background:#1e5ae0; transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(37,99,235,0.78); }
.ig-hero__phrase{ font-family:"Inter",sans-serif; font-size:clamp(.85rem,1.05vw,1rem); color:#fff; opacity:0.72; max-width:36ch; line-height:1.5; }
.ig-hero__caps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; max-width:960px; }
.ig-cap__dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--c,#fff); box-shadow:0 0 12px var(--c); margin-bottom:.6rem; }
.ig-cap b{ display:block; font-family:"Poppins",sans-serif; font-weight:600; color:#fff; font-size:clamp(1rem,1.25vw,1.15rem); margin-bottom:.25rem; }
.ig-cap small{ display:block; font-family:"Inter",sans-serif; font-weight:300; color:#fff; opacity:0.78; font-size:clamp(.78rem,.92vw,.9rem); line-height:1.45; }
.ig-hero__cue{ position:absolute; left:50%; bottom:2.2vh; transform:translateX(-50%); z-index:4; }
.ig-hero__cue span{ display:block; width:22px; height:36px; border:2px solid rgba(255,255,255,0.5); border-radius:12px; position:relative; }
.ig-hero__cue span::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:igCue 1.6s ease-in-out infinite; }
@keyframes igCue{ 0%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 100%{opacity:0; transform:translate(-50%,10px);} }

/* Entrada cinematográfica (se dispara con .ig-in tras el loader) */
.ig-hero__eyebrow,.ig-hero__title .ig-line,.ig-hero__text,.ig-hero__cta,.ig-cap{
  opacity:0; transform:translateY(18px); filter:blur(6px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease; transition-delay:var(--d,0s);
}
.ig-hero.ig-in .ig-hero__eyebrow{ opacity:1; transform:none; filter:none; --d:0s; }
.ig-hero.ig-in .ig-hero__title .ig-line:nth-child(1){ opacity:1; transform:none; filter:none; --d:.12s; }
.ig-hero.ig-in .ig-hero__title .ig-line:nth-child(2){ opacity:1; transform:none; filter:none; --d:.22s; }
.ig-hero.ig-in .ig-hero__text{ opacity:.85; transform:none; filter:none; --d:.38s; }
.ig-hero.ig-in .ig-hero__cta{ opacity:1; transform:none; filter:none; --d:.5s; }
.ig-hero.ig-in .ig-cap:nth-child(1){ opacity:1; transform:none; filter:none; --d:.6s; }
.ig-hero.ig-in .ig-cap:nth-child(2){ opacity:1; transform:none; filter:none; --d:.68s; }
.ig-hero.ig-in .ig-cap:nth-child(3){ opacity:1; transform:none; filter:none; --d:.76s; }
.ig-hero.ig-in .ig-cap:nth-child(4){ opacity:1; transform:none; filter:none; --d:.84s; }

/* Móvil (<768px): imagen vertical, contenido apilado, título legible, CTA visible */
@media (max-width:767px){
  .ig-hero__inner{ padding:14vh 6vw 12vh; }
  .ig-hero__title{ font-size:clamp(2rem,9vw,3rem); max-width:14ch; }
  .ig-hero__caps{ grid-template-columns:1fr 1fr; gap:1.1rem; }
  .ig-hero__veil{ background:linear-gradient(to top, rgba(11,31,58,0.96) 0%, rgba(11,31,58,0.82) 34%, rgba(11,31,58,0.4) 66%, rgba(11,31,58,0.15) 100%); }
  .ig-hero__cue{ display:none; }
}
@media (max-width:420px){
  .ig-hero__caps{ grid-template-columns:1fr; gap:.9rem; }
}

/* Movimiento reducido: mostrar contenido final e imagen de inmediato, sin scrub */
@media (prefers-reduced-motion: reduce){
  .ig-hero__eyebrow,.ig-hero__title .ig-line,.ig-hero__text,.ig-hero__cta,.ig-cap{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .ig-hero.ig-in .ig-hero__text{ opacity:.85 !important; }
  .ig-hero__cue span::after{ animation:none; }
}
/* invitación sutil hasta la primera activación */
#music-toggle.hint::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(56,189,246,0.55); animation:mtPulse 2s ease-out infinite; }
@keyframes mtPulse{ 0%{ transform:scale(1); opacity:0.7; } 100%{ transform:scale(1.5); opacity:0; } }
#music-tip{
  position:fixed; left:calc(2.2vmin + 62px); bottom:calc(2.2vmin + 12px); z-index:90;
  background:rgba(11,31,58,0.9); border:1px solid rgba(56,189,246,0.4); color:#fff; font-size:12px;
  padding:8px 12px; border-radius:10px; max-width:180px; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  opacity:0; transform:translateX(-6px); transition:opacity .4s ease, transform .4s ease; pointer-events:none;
}
#music-tip.show{ opacity:1; transform:translateX(0); }
@media (max-width:640px){ #music-tip{ display:none; } }
@media (prefers-reduced-motion: reduce){ #music-toggle .eq i, #music-toggle.hint::after{ animation:none; } }

/* No-JS / no-WebGL fallback banner */
#fallback-note{ display:none; }

/* ---- Service card thumbnails (soluciones grid) ---- */
.svc-item{ overflow:hidden; padding:0; }
.svc-thumb{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#12336a,#0B1F3A); }
.svc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.svc-item:hover .svc-thumb img{ transform:scale(1.05); }
.svc-item.noimg .svc-thumb{ background:radial-gradient(120% 100% at 30% 20%, var(--royal), #0B1F3A 70%); }
.svc-item h4{ padding:1.2rem 1.4rem 0; }
.svc-item .es{ padding:0.4rem 1.4rem 1.4rem; }

/* ---- Legibility: solid white titles + protective shadow ---- */
.hero-head h1, #cta-block h2, .sphere-h-top, .sphere-h-bot{ color:#fff; opacity:1; text-shadow:0 2px 30px rgba(0,0,0,0.55); }
.hero-head{ z-index:8; }            /* nunca cubierto por la imagen del hero */
.hero-head h1 .l2{ opacity:0.55; }
/* Titular de la tarjeta del recorrido: reducido para que NO tape el texto pequeño de la izquierda. */
#card1 .hero-head{ display:flex; align-items:flex-start; }
#card1 .hero-head h1{ font-size:clamp(0.85rem, 2.1vw, 1.5rem); line-height:1.12; max-width:46%; }
.h-section{ color:#fff; opacity:1; }
.sub-section{ opacity:0.85; }
/* scrim suave detrás de la tarjeta de servicio (imagen) para textos sobre ella */
.svc-card .svc-bottom{ position:relative; z-index:2; }
.svc-card::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(11,31,58,0.85) 0%, rgba(11,31,58,0.15) 45%, rgba(11,31,58,0) 70%); }
.svc-card .svc-overlay{ position:relative; z-index:2; }

/* ---- "Hablemos" modal ---- */
#hablemos-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:5vmin 4vmin; }
#hablemos-modal.open{ display:flex; }
.hm-backdrop{ position:absolute; inset:0; background:rgba(6,15,32,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hm-card{ position:relative; z-index:1; width:min(560px,100%); max-height:90vh; overflow:auto; background:linear-gradient(165deg,#0e2650 0%, #0B1F3A 60%); border:1px solid rgba(56,189,246,0.35); border-radius:20px; padding:clamp(1.6rem,3.4vw,2.6rem); box-shadow:0 30px 80px rgba(0,0,0,0.6); animation:hmIn .35s cubic-bezier(0.16,1,0.3,1); }
@keyframes hmIn{ from{ opacity:0; transform:translateY(18px) scale(0.97);} to{ opacity:1; transform:none;} }
.hm-close{ position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,0.08); color:#fff; font-size:16px; cursor:pointer; transition:background .2s; }
.hm-close:hover{ background:rgba(255,255,255,0.18); }
.hm-eyebrow{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--cyan); margin-bottom:0.6rem; }
.hm-card h2{ font-family:"Poppins",sans-serif; font-weight:700; font-size:clamp(1.4rem,3vw,2rem); color:#fff; line-height:1.1; }
.hm-sub{ margin-top:0.6rem; margin-bottom:1.6rem; color:rgba(255,255,255,0.72); font-size:0.95rem; }
.hm-options{ display:flex; flex-direction:column; gap:0.9rem; }
.hm-option{ display:flex; align-items:center; gap:1rem; width:100%; text-align:left; padding:1.1rem 1.2rem; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); color:#fff; cursor:pointer; transition:border-color .2s, background .2s, transform .2s; }
.hm-option:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.08); }
.hm-option .hm-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.hm-option .hm-txt{ display:flex; flex-direction:column; flex:1; }
.hm-option .hm-txt b{ font-family:"Poppins",sans-serif; font-weight:600; font-size:1rem; }
.hm-option .hm-txt small{ color:rgba(255,255,255,0.6); font-size:0.82rem; margin-top:0.15rem; }
.hm-option .hm-arrow{ font-size:1.2rem; opacity:0.7; transition:transform .2s; }
.hm-option:hover .hm-arrow{ transform:translateX(4px); }
.opt-empresa{ border-color:rgba(37,99,235,0.5); } .opt-empresa .hm-dot{ background:var(--royal); } .opt-empresa:hover{ border-color:var(--royal); }
.opt-candidato{ border-color:rgba(16,185,129,0.5); } .opt-candidato .hm-dot{ background:var(--emerald); } .opt-candidato:hover{ border-color:var(--emerald); }
.opt-wa{ border-color:rgba(37,211,102,0.5); } .opt-wa .hm-dot{ background:#25D366; } .opt-wa:hover{ border-color:#25D366; }

/* ---- Hero (inicio): fondo más moderno ---- */
.hero-card::after{ /* rejilla técnica sutil, se desvanece hacia los bordes */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 18%, #000 28%, transparent 82%);
  mask-image:radial-gradient(130% 95% at 50% 18%, #000 28%, transparent 82%);
}
.hero-card::before{ /* resplandores flotantes de marca (Emerald + Cyan) */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0.9;
  background:
    radial-gradient(40vmin 40vmin at 16% 82%, rgba(16,185,129,0.22), transparent 68%),
    radial-gradient(46vmin 46vmin at 88% 26%, rgba(56,189,246,0.24), transparent 68%),
    radial-gradient(60vmin 40vmin at 50% -10%, rgba(37,99,235,0.28), transparent 70%);
  animation:heroGlow 14s ease-in-out infinite alternate;
}
@keyframes heroGlow{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(0,-2%,0) scale(1.06);} }
/* marco premium de la imagen del hero */
.hero-slider{ border:1px solid rgba(255,255,255,0.18); box-shadow:0 40px 90px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(56,189,246,0.18), 0 0 60px rgba(37,99,235,0.25); }
.hero-slider img{ object-position:center; }
/* scrim de legibilidad detrás del texto inferior del hero */
.hero-bottom{ background:linear-gradient(to top, rgba(11,31,58,0.94) 0%, rgba(11,31,58,0.6) 55%, rgba(11,31,58,0) 100%); }
@media (prefers-reduced-motion: reduce){ .hero-card::before{ animation:none; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee-row{ animation:none; }
  .presence-card{ transition:none; }
}

/* ---- Imagen editable por capacidad (v0.8.0) ----
   Ambito EXCLUSIVO .ig-cap: no toca lienzos WebGL ni el recorrido.
   Sin imagen se conserva el punto de acento aprobado. */
.ig-cap__media{ display:block; width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin-bottom:.7rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); }
.ig-cap__media picture{ display:block; width:100%; height:100%; }
.ig-cap__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.ig-cap__media--fallback{ aspect-ratio:auto; background:none; border:0; border-radius:0; overflow:visible; }
.ig-cap__link{ display:block; text-decoration:none; color:inherit; }
.ig-cap__link:hover b{ text-decoration:underline; }
@media (max-width:360px){ .ig-cap__media{ aspect-ratio:16/9; } }

/* ---- Pulido movil/tablet (v0.9.0) ----
   Reglas ACOTADAS a elementos concretos. No hay selectores globales
   (ni html, ni body, ni universal, ni canvas), por lo que no afectan
   al recorrido inmersivo ni al WebGL. */

/* 1) Campos >=16px en movil: evita el zoom automatico de iOS al enfocar. */
@media (max-width:767px){
  .field input, .field select, .field textarea{ font-size:16px; }
}

/* 2) Areas seguras de iPhone (notch / barra de gestos) para los flotantes. */
#wa-float{
  right:max(2.2vmin, env(safe-area-inset-right, 0px));
  bottom:max(2.2vmin, calc(env(safe-area-inset-bottom, 0px) + 14px));
}
#music-toggle{
  bottom:max(2.2vmin, calc(env(safe-area-inset-bottom, 0px) + 14px));
}

/* 3) Capacidades a 2 columnas en tablet (a 4 quedaban muy estrechas). */
@media (min-width:768px) and (max-width:1024px){
  .ig-hero__caps{ grid-template-columns:repeat(2, 1fr); }
}

/* ============================================================
   LEGIBILIDAD EN MOVIL (v0.10.0)
   El sitio dimensiona la tipografia en vmin/vw. En escritorio
   1vmin = 9px, pero en un movil de 390x844 pasa a 3.9px, asi que
   muchos textos caian a 5-8px (ilegibles).
   Aqui se ponen SUELOS en px con max(), solo por debajo de 768px.
   Escritorio y tablet no se tocan: alli gana siempre el valor vmin/vw.
   No se modifica ninguna geometria 3D (transform, perspective, camara).
   ============================================================ */
@media (max-width:767px){

  /* --- Recorrido: tarjeta 1 (hero) --- */
  #card1 .hero-head h1{ font-size:clamp(1.35rem, 6.4vw, 2.1rem); max-width:88%; }
  .hero-card .lead{ font-size:max(14px, 1.9vmin); }

  /* --- Recorrido: tarjetas de servicios --- */
  .svc-url{ font-size:max(11px, 1.5vmin); }
  .svc-pill .lbl small{ font-size:max(10px, 1.4vmin); }
  .svc-pill .lbl b{ font-size:max(14px, 2.2vmin); }
  .svc-search .q{ font-size:max(11px, 1.7vmin); white-space:normal; }
  .svc-bottom h3{ font-size:max(17px, 3.2vmin); }
  .svc-bottom p{ font-size:max(13px, 2.2vmin); }

  /* --- Recorrido: esfera --- */
  .sphere-face .pill{ font-size:max(10px, 1.4vmin); }
  .sphere-face .url{ font-size:max(11px, 1.5vmin); }

  /* --- Recorrido: CTA superpuesto --- */
  #carousel-cta a{ font-size:max(13px, 2.1vmin); padding:max(10px,2vmin) max(18px,4.2vmin); }

  /* --- Bloque final del recorrido ---
     La camara lo deja a escala 0.4 en movil, asi que el texto se veia a
     10.9px (titulo) y 5.3px (parrafo). Se compensa SOLO el tamano de letra;
     no se toca la escala ni la posicion. */
  #cta-block h2{ font-size:15vw; max-width:92%; }
  #cta-block p{ font-size:9vw; max-width:92%; line-height:1.3; }

  /* --- Casos de exito (fuera del 3D) --- */
  #pf-heading{ font-size:max(20px, 5vmin); }
  .case-card{ width:78vw; padding:max(16px, 3.5vmin); }
  .case-tag{ font-size:max(10px, 1.6vmin); }
  .case-name{ font-size:max(16px, 3.4vmin); }
  .case-actions{ gap:max(8px, 1.4vmin); }
  .case-actions a{ font-size:max(12px, 1.9vmin); padding:max(9px,1.4vmin) max(14px,2.4vmin); }
  .case-logo-zone{ padding:max(24px, 8vmin); }
  .case-logo-zone .logo-pad{ padding:max(16px, 5vmin); }

  /* --- Microetiqueta del hero --- */
  .ig-hero__eyebrow{ font-size:max(11px, 1.6vmin); }
}