/* ============================================================
   B&SiT — style.css (mobile-first)
   Base = móvil · @media (min-width:768px) = tablet
   @media (min-width:1024px) = escritorio
   ============================================================ */
:root{
    --bg:#FFFFFF;
    --bg-soft:#E4F1F6;
    --ink:#0D2630;
    --primary:#00BCE4;
    --primary-dark:#0E6B8C;
    --primary-light:#48ACD5;
    --primary-pale:#E7F8FC;
    --text:#1B2A30;
    --text-dim:#5B6F78;
    --text-faint:#92A4AC;
    --line:#DDEEF4;
    --ok:#1E9E72;
    --radius:14px;
    --shadow:0 24px 50px -28px rgba(11,38,77,0.28);
    --shadow-sm:0 8px 24px -16px rgba(11,38,77,0.25);
    --display:'Plus Jakarta Sans', sans-serif;
    --sans:'Inter', sans-serif;
    --mono:'IBM Plex Mono', monospace;
    --maxw:75rem;
    --section-py:4rem;
    --wrap-x:1.25rem;
    --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  }
  @media (min-width:768px){
    :root{--section-py:6rem; --wrap-x:1.75rem;}
  }

  /* ===== RESET / BASE ===== */
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
    border-radius:4px;
  }
  body{background:var(--bg); color:var(--text); font-family:var(--sans); font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--wrap-x);}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%; height:auto;}
  h1,h2,h3{font-family:var(--display); color:var(--ink); letter-spacing:-0.01em;}
  .eyebrow{font-family:var(--mono); font-size:0.9rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--primary); font-weight:500; display:inline-flex; align-items:center; gap:8px;}
  .eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--primary); animation:eyebrowPulse 2.2s ease-in-out infinite;}
  @keyframes eyebrowPulse{0%,100%{transform:scale(1); opacity:1;}50%{transform:scale(1.6); opacity:.45;}}

  /* ===== BOTONES ===== */
  .btn{font-family:var(--display); font-weight:600; font-size:0.9rem; padding:0.8rem 1.5rem; border-radius:8px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1.5px solid transparent;
    transition:transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;}
  .btn:active{transform:scale(0.97);}
  .btn-primary{background:var(--primary); color:#fff; position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(13,38,48,.10), 0 8px 20px -12px rgba(0,188,228,.55);}
  .btn-primary::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); transition:left .55s var(--ease-out);}
  .btn-ghost{border-color:var(--line); color:var(--ink); background:#fff;}
  @media (hover:hover) and (pointer:fine){
    .btn-primary:hover{background:var(--primary-dark); box-shadow:0 2px 4px rgba(13,38,48,.12), 0 14px 28px -14px rgba(14,107,140,.6);}
    .btn-primary:hover::after{left:130%;}
    .btn-ghost:hover{border-color:var(--primary); color:var(--primary); background:var(--primary-pale);}
  }

  /* ===== HEADER / NAV (colapsable en móvil, completo en escritorio) ===== */
  header{position:fixed; top:0; left:0; right:0; z-index:100; background:#fff; border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease;}
  header.scrolled{border-bottom-color:var(--line); box-shadow:var(--shadow-sm);}
  nav{display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.75rem var(--wrap-x); max-width:var(--maxw); margin:0 auto;}
  .logo-link{display:flex; align-items:center; flex-shrink:0;}
  .logo-link img{height:30px; width:auto;}
  .navlinks{display:none; align-items:center; gap:6px;}
  .navlinks > li{list-style:none; position:relative;}
  .navlinks > li > a{display:flex; align-items:center; gap:4px; padding:10px 14px; border-radius:8px; font-size:0.9rem; font-weight:500; color:var(--text-dim); transition:color .15s ease, background-color .15s ease;}
  .navlinks > li > a:hover, .navlinks > li > a.active{color:var(--primary); background:var(--primary-pale);}
  .navlinks > li > a svg{width:14px; height:14px;}
  /* origen del escalado en el trigger (arriba-izquierda), no en el centro */
  .dropdown{position:absolute; top:100%; left:0; margin-top:8px; width:min(560px, calc(100vw - 2 * var(--wrap-x))); background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:4px; opacity:0; visibility:hidden;
    transform:translateY(6px) scale(.97); transform-origin:top left;
    transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;}
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
  .dropdown a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:0.845rem; color:var(--text); font-weight:500;}
  .dropdown a:hover{background:var(--bg-soft); color:var(--primary);}
  .dropdown a svg{width:18px; height:18px; color:var(--primary); flex-shrink:0;}
  .navcta{display:flex; align-items:center; gap:0.5rem;}
  .navcta .btn-ghost{display:none;}
  .burger{display:flex; width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
  .burger span, .burger span::before, .burger span::after{content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.2s;}
  .burger span::before{position:absolute; top:-6px;} .burger span::after{position:absolute; top:6px;}
  .burger.active span{background:transparent;} .burger.active span::before{transform:rotate(45deg); top:0;} .burger.active span::after{transform:rotate(-45deg); top:0;}
  @media (min-width:1024px){
    .navlinks{display:flex;}
    .navcta{gap:0.625rem;}
    .navcta .btn-ghost{display:inline-flex;}
    .burger{display:none;}
  }

  .mobile-nav{position:fixed; top:0; right:-100%; width:min(340px, 86%); height:100%; background:#fff; z-index:99; box-shadow:-20px 0 50px rgba(11,38,77,0.18); transition:right .28s var(--ease-out); overflow-y:auto; padding:5.625rem 1.625rem 2.5rem;}
  .mobile-nav.open{right:0;}
  .mobile-nav a, .mobile-nav button.open-contact{display:block; width:100%; padding:0.7rem 0; font-weight:600; font-size:0.97rem; color:var(--ink); border:none; border-bottom:1px solid var(--line); background:none; text-align:left; cursor:pointer; font-family:var(--sans);}
  .mobile-sub{padding-left:0.875rem; margin-bottom:6px;}
  .mobile-sub a{font-weight:500; font-size:0.845rem; color:var(--text-dim); border-bottom:none; padding:0.44rem 0;}
  .scrim{position:fixed; inset:0; background:rgba(11,22,38,0.4); z-index:98; opacity:0; visibility:hidden; transition:.2s;}
  .scrim.show{opacity:1; visibility:visible;}

/* ===== HERO VISUAL: logo + ondas de radar (sonar) ===== */
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center; width:min(70%, 340px); aspect-ratio:1/1; margin:0 auto; overflow:visible;}
.hero-visual-img{width:62%; position:relative; z-index:2;}
.orbit-rings{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible;}
.pulse-ring{fill:none; stroke:#00BCE4; stroke-width:1.6; vector-effect:non-scaling-stroke; transform-origin:200px 200px; opacity:0; animation:sonarPulse 5.1s ease-out infinite;}
@keyframes sonarPulse{
  0%{transform:scale(.4); opacity:.75;}
  55%{opacity:.22;}
  100%{transform:scale(3.3); opacity:0;}
}
.orbit-dot{fill:#00BCE4;}
.orbit-dot-float{transform-box:fill-box; transform-origin:50% 50%; animation:dotFloat 3.8s ease-in-out infinite;}
@keyframes dotFloat{0%,100%{transform:scale(1) translateY(0); opacity:.9;}50%{transform:scale(1.45) translateY(-6px); opacity:.5;}}
.orbit-outer{transform-origin:200px 200px; animation:spin 26s linear infinite;}
.orbit-mid{transform-origin:200px 200px; animation:spinReverse 32s linear infinite;}
.orbit-inner{transform-origin:200px 200px; animation:spin 20s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes spinReverse{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
@media (min-width:1024px){
  .hero-visual{width:100%; max-width:none;}
}

  /* ===== HERO ===== */
  .hero{padding:7.5rem 0 3.5rem; background:linear-gradient(180deg, #96DAF0 0%, #fff 85%); overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;}
  .hero-grid > .hero-visual-col{display:flex; justify-content:center; align-items:center;}
  .hero h1{font-size:clamp(1.9rem, 1.2rem + 3.5vw, 3.3rem); line-height:1.08; font-weight:800; margin:1.125rem 0 1.375rem; letter-spacing:-0.035em; text-wrap:balance;}
  .hero h1 em{color:var(--primary); font-style:normal;}
  .hero .sub{color:var(--text-dim); font-size:1.09rem; line-height:1.62; max-width:32.5rem; margin-bottom:2rem; text-wrap:pretty;}
  .hero-actions{display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.875rem;}
  .chips{display:flex; gap:10px; flex-wrap:wrap;}
  .chip{font-family:var(--mono); font-size:0.75rem; padding:7px 13px; border-radius:30px; background:#fff; border:1px solid var(--line); color:var(--text-dim);}
  .chip:hover{border-color:var(--primary); color:var(--primary);}
  @media (min-width:1024px){
    .hero{padding:8.75rem 0 4.375rem;}
    .hero-grid{grid-template-columns:1fr 1fr;}
  }

  /* ===== MARCAS (partners) ===== */
  .partners-section{padding:var(--section-py) 0;}
  .partner-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(110px,100%),1fr)); gap:10px;}
  .partner-link{
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:3/2; padding:1rem;
    border:1px solid var(--line); border-radius:14px; background:#fff;
    transition:transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms var(--ease-out);
  }
  .partner-grid img{max-height:38px; width:auto; max-width:100%; object-fit:contain; opacity:.9; transition:opacity 200ms ease;}
  @media (hover:hover) and (pointer:fine){
    .partner-link:hover{transform:translateY(-3px); border-color:var(--primary-light); box-shadow:var(--shadow-sm);}
    .partner-link:hover img{opacity:1;}
  }
  @media (min-width:768px){
    .partner-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px;}
    .partner-grid img{max-height:52px;}
  }

  /* ===== CLIENTES: carrusel de logos ===== */
  .clients-section{padding:var(--section-py) 0; background:var(--bg-soft); overflow:hidden;}
  .logo-carousel{display:flex; flex-direction:column; gap:3.25rem;}
  .logo-sector{display:flex; flex-direction:column; gap:1.25rem;}
  .sector-title{font-family:var(--mono); font-size:0.8125rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--primary-dark); font-weight:600; text-align:center; display:flex; align-items:center; justify-content:center; gap:14px;}
  .sector-title::before, .sector-title::after{content:""; height:1px; width:38px; background:linear-gradient(90deg, transparent, var(--primary-light)); flex-shrink:0;}
  .sector-title::after{transform:scaleX(-1);}
  .carousel-row{overflow:hidden; mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);}
  .carousel-track{display:inline-flex; gap:3rem; align-items:center; animation:carouselScroll 42s linear infinite;}
  .carousel-track.reverse{animation-direction:reverse; animation-duration:50s;}
  .carousel-track img{height:46px; max-width:130px; width:auto; object-fit:contain; opacity:.92; flex-shrink:0;
    transition:opacity 200ms ease, transform 200ms var(--ease-out);}
  @media (hover:hover) and (pointer:fine){
    .carousel-row:hover .carousel-track{animation-play-state:paused;}
    .carousel-track img:hover{opacity:1; transform:scale(1.1);}
  }
  @keyframes carouselScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* ===== CARRUSEL 3D OBJETIVOS ===== */
  .objectives-section{padding:var(--section-py) 0; background:var(--bg-soft); overflow:hidden;}
  .obj-carousel-wrap{max-width:var(--maxw); margin:0 auto;}
  .obj-carousel{
    position:relative; display:flex; align-items:center; justify-content:center;
    height:430px; perspective:1200px; transform-style:preserve-3d;
    cursor:grab; user-select:none;
  }
  .obj-carousel:active{cursor:grabbing;}
  .obj-slide{
    position:absolute; width:88vw; max-width:400px; height:400px; border-radius:20px;
    overflow:hidden; transition:transform .7s var(--ease-in-out), opacity .7s ease;
    transform-style:preserve-3d; box-shadow:0 40px 80px -30px rgba(0,30,50,.45);
  }
  .obj-slide-img{
    position:absolute; inset:-10px; background-size:cover; background-position:center;
    transition:transform .4s ease;
  }
  .obj-slide-overlay{position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,30,50,.55) 0%, rgba(0,20,40,.85) 100%);}
  .obj-slide-content{position:absolute; inset:0; padding:2.25rem 2rem; display:flex; flex-direction:column; justify-content:flex-end; color:#fff;}
  .obj-slide-num{font-family:var(--mono); font-size:0.69rem; letter-spacing:.18em; color:rgba(0,188,228,.8); text-transform:uppercase; margin-bottom:0.875rem;}
  .obj-slide-content h3{font-family:var(--display); font-size:1.375rem; font-weight:800; margin-bottom:0.875rem; line-height:1.25; color:#00BCE4;}
  .obj-slide-content p{font-size:0.845rem; line-height:1.65; color:rgba(255,255,255,.8);}
  .obj-carousel-nav{display:flex; align-items:center; justify-content:center; gap:1.375rem; margin-top:2.25rem;}
  .obj-nav-btn{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--primary); font-size:1.125rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease;}
  .obj-nav-btn:active{transform:scale(0.94);}
  @media (hover:hover) and (pointer:fine){
    .obj-nav-btn:hover{background:var(--primary); color:#fff; border-color:var(--primary);}
  }
  .obj-dots{display:flex; gap:8px; align-items:center;}
  .obj-dot{width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:.25s ease;}
  .obj-dot.active{background:var(--primary); width:22px; border-radius:4px;}
  @media (min-width:768px){
    .obj-carousel{height:480px;}
    .obj-slide{width:400px; height:420px;}
  }

  /* ===== STATS ===== */
  .stats{display:flex; flex-direction:column; padding:2.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .stat{padding:1.375rem 1.25rem; text-align:center;}
  .stat + .stat{border-top:1px solid var(--line);}
  .stat .num{font-family:var(--display); font-size:clamp(1.9rem, 1.4rem + 2vw, 2.6rem); color:var(--primary); font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
  .stat .lbl{color:var(--text-dim); font-size:0.845rem; margin:0.5rem auto 0; max-width:12.5rem; text-wrap:balance;}
  @media (min-width:768px){
    .stats{flex-direction:row; flex-wrap:wrap; padding:3.5rem 0;}
    .stat{flex:1; min-width:11.25rem; padding:0 1.75rem; border-left:1px solid var(--line);}
    .stat + .stat{border-top:none;}
    .stat:first-child{border-left:none;}
  }

  /* ===== SECTION ===== */
  .section{padding:var(--section-py) 0;}
  .section-soft{background:var(--bg-soft);}

  /* ===== COSTURA SUTIL ENTRE SECCIONES ===== */
  section + section{box-shadow:inset 0 1px 0 rgba(13,38,48,0.08);}

  .section-head{max-width:38.75rem; margin-bottom:2.75rem;}
  .section-head h2{font-size:clamp(1.75rem, 1.3rem + 2vw, 2.64rem); margin-top:0.75rem; font-weight:800; letter-spacing:-0.025em; line-height:1.15; text-wrap:balance;}
  .section-head p{color:var(--text-dim); margin-top:0.875rem; font-size:0.97rem; line-height:1.65; text-wrap:pretty;}
  .section-head-center{text-align:center; margin:0 auto 2.5rem; max-width:40rem;}
  .eyebrow-center{justify-content:center;}

  /* ===== SERVICIOS DESTACADOS (hero cards) ===== */
  .featured-services{display:grid; grid-template-columns:1fr; gap:1.25rem; margin-bottom:3.5rem;}
  .featured-card{
    position:relative; border-radius:20px; overflow:hidden;
    min-height:300px; cursor:pointer;
    box-shadow:0 2px 8px -3px rgba(0,40,60,.2), 0 18px 40px -28px rgba(0,60,100,.45);
    transition:transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .featured-card:active{transform:scale(0.99);}
  .featured-bg{
    position:absolute; inset:-8px;
    background-size:cover; background-position:center;
    transition:transform 500ms var(--ease-out);
  }
  @media (hover:hover) and (pointer:fine){
    .featured-card:hover{transform:translateY(-6px); box-shadow:0 40px 80px -30px rgba(0,60,100,.45);}
    .featured-card:hover .featured-bg{transform:scale(1.06);}
  }
  .featured-overlay{
    position:absolute; inset:0;
    background:linear-gradient(170deg, rgba(0,20,40,.3) 0%, rgba(0,30,60,.92) 70%);
  }
  .featured-body{
    position:relative; z-index:2;
    padding:1.5rem 1.5rem 1.375rem; color:#fff;
    display:flex; flex-direction:column; gap:0.75rem;
  }
  .featured-body h3{font-family:var(--display); font-size:clamp(1.1rem, 1rem + 0.6vw, 1.35rem); font-weight:800; line-height:1.25; color:#fff;}
  .featured-body > p{font-size:0.845rem; color:rgba(255,255,255,.78); line-height:1.65; max-width:26.25rem;}
  .featured-metrics{display:flex; gap:1.25rem; flex-wrap:wrap; padding:0.875rem 0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);}
  .featured-metric{display:flex; flex-direction:column; gap:3px;}
  .featured-metric .num{font-family:var(--mono); font-size:0.94rem; font-weight:600; color:#00BCE4;}
  .featured-metric .lbl{font-size:0.625rem; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.06em;}
  .featured-cta{
    align-self:flex-start; display:flex; align-items:center; gap:8px;
    font-family:var(--display); font-weight:700; font-size:0.8125rem;
    background:rgba(0,188,228,.18); border:1px solid rgba(0,188,228,.4);
    color:#00BCE4; border-radius:8px; padding:9px 18px;
    transition:background-color 200ms ease, color 200ms ease; cursor:pointer;
  }
  .featured-cta span{transition:transform 200ms var(--ease-out);}
  @media (hover:hover) and (pointer:fine){
    .featured-cta:hover{background:rgba(0,188,228,.32); color:#fff;}
    .featured-cta:hover span{transform:translateX(4px);}
  }
  @media (min-width:768px){
    .featured-services{grid-template-columns:1fr 1fr; gap:1.5rem;}
    .featured-body{padding:1.75rem 1.75rem 1.625rem;}
  }

  /* ===== DIVISOR PORTAFOLIO ===== */
  .portfolio-divider{display:flex; align-items:center; gap:1.125rem; margin-bottom:2.75rem;}
  .portfolio-divider-line{flex:1; height:1px; background:var(--line);}
  .portfolio-divider span{font-family:var(--mono); font-size:0.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap;}

  /* ===== SERVICES (con imagen de fondo) ===== */
  .services-mega{padding:var(--section-py) 0; position:relative;}
  .services-mega .section-head{max-width:42.5rem;}
  .services-mega .section-head h2{font-size:clamp(2rem, 1.4rem + 2.6vw, 3.48rem);}
  .services-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px,100%),1fr)); gap:1.375rem;}
  .service-card{
    position:relative; border-radius:18px; padding:2.125rem 1.875rem;
    min-height:220px; overflow:hidden;
    cursor:pointer; user-select:none;
    display:flex; flex-direction:column; justify-content:flex-end;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 2px 6px -2px rgba(0,40,60,.18), 0 12px 28px -20px rgba(0,60,100,.4);
    transition:transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
  }
  .service-card:active{transform:scale(0.985);}
  .sc-bg{
    position:absolute; inset:-6px;
    background-image:var(--sc-img); background-size:cover; background-position:center;
    transition:transform 480ms var(--ease-out);
  }
  .sc-overlay{
    position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(0,20,40,.22) 0%, rgba(0,25,50,.70) 75%);
    transition:opacity 260ms ease;
  }
  @media (hover:hover) and (pointer:fine){
    .service-card:hover .sc-bg{transform:scale(1.07);}
    .service-card:hover{box-shadow:0 30px 60px -24px rgba(0,60,100,.5); transform:translateY(-5px);}
    .service-card:hover .sc-overlay{opacity:.82;}
  }
  .service-icon{
    position:relative; z-index:2;
    width:50px; height:50px; border-radius:12px;
    background:rgba(0,188,228,.18); border:1px solid rgba(0,188,228,.35);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1rem; color:#00BCE4;
    transition:transform .3s var(--ease-out), background-color .3s ease;
  }
  .service-icon svg{width:24px; height:24px;}
  @media (hover:hover) and (pointer:fine){
    .service-card:hover .service-icon{transform:scale(1.1) rotate(-5deg); background:rgba(0,188,228,.35);}
  }
  .service-card h3{position:relative; z-index:2; font-size:1.125rem; font-weight:800; color:#fff; margin-bottom:0; line-height:1.25;}
  .expand-toggle{
    position:absolute; top:22px; right:22px; z-index:3;
    width:26px; height:26px; border-radius:50%;
    border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:0.94rem; color:rgba(255,255,255,.7); line-height:1;
    transition:transform 250ms var(--ease-out), background-color 250ms ease, color 250ms ease, border-color 250ms ease;}
  @media (hover:hover) and (pointer:fine){
    .service-card:hover .expand-toggle, .case-card:hover .expand-toggle{
      background:var(--primary); color:#fff; border-color:var(--primary); transform:translateX(3px);
    }
  }
  .expand-hint{
    position:relative; z-index:2;
    display:block; margin-top:0.875rem;
    font-family:var(--mono); font-size:0.625rem; letter-spacing:.06em;
    text-transform:uppercase; color:rgba(255,255,255,.45);
  }

  /* ===== MODAL DE SERVICIO ===== */
  .service-modal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:1.25rem; opacity:0; visibility:hidden;
    transition:opacity 180ms ease, visibility 180ms;}
  .service-modal.open{opacity:1; visibility:visible; transition-duration:220ms;}
  .service-modal-backdrop{position:absolute; inset:0; background:rgba(8,28,38,0.58); backdrop-filter:blur(3px);}
  /* transform-origin centrado: es un modal, no un popover anclado a un trigger */
  .service-modal-content{position:relative; background:#fff; border-radius:22px; max-width:40rem; width:100%; max-height:84vh; overflow-y:auto; padding:0 1.5rem 2.5rem; box-shadow:0 60px 110px -30px rgba(0,40,60,0.5);
    transform:translateY(12px) scale(.97); transform-origin:center;
    transition:transform 180ms var(--ease-out);}
  .service-modal.open .service-modal-content{transform:translateY(0) scale(1); transition-duration:260ms;}
  .modal-close{position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:1.375rem; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
    transition:transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease;}
  .modal-close:active{transform:scale(0.94);}
  @media (hover:hover) and (pointer:fine){
    .modal-close:hover{color:#fff; background:var(--primary); border-color:var(--primary);}
  }
  #modalBanner{margin:0 -1.5rem 1.5rem; height:150px; background-size:cover; background-position:center; background-color:var(--primary-pale); border-radius:22px 22px 0 0;}
  #modalTitle{font-size:clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); margin-bottom:0.875rem; padding-right:1.25rem; font-weight:800;}
  #modalIntro{color:var(--text-dim); font-size:0.97rem; margin-bottom:1.625rem; line-height:1.6;}
  #modalList{list-style:none; display:flex; flex-direction:column; gap:0.8rem;}
  #modalList li{position:relative; padding-left:1.625rem; font-size:0.9rem; color:var(--text); line-height:1.55;}
  #modalList li::before{content:""; position:absolute; left:0; top:6px; width:13px; height:13px; border-radius:50%; background:var(--primary-pale); border:2px solid var(--primary);}
  @media (min-width:768px){
    .service-modal{padding:1.5rem;}
    .service-modal-content{padding:0 2.875rem 3rem;}
    #modalBanner{margin:0 -2.875rem 1.75rem; height:185px;}
  }

  /* ===== DIFFERENTIATORS ===== */
  .diff-row{display:grid; grid-template-columns:1fr; gap:1.625rem;}
  .diff-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem;}
  .diff-item h3{font-size:1rem; margin:0.75rem 0 0.5rem; font-weight:700;}
  .diff-item p{font-size:0.86rem; color:var(--text-dim);}
  @media (min-width:768px){.diff-row{grid-template-columns:repeat(2,1fr);}}
  @media (min-width:1024px){.diff-row{grid-template-columns:repeat(4,1fr);}}

  /* ===== CASOS DE ÉXITO ===== */
  .cases-grid{display:grid; grid-template-columns:1fr; gap:1.625rem;}
  @media (min-width:768px){.cases-grid{grid-template-columns:1fr 1fr;}}
  .case-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:2.125rem 2rem; box-shadow:var(--shadow-sm); cursor:pointer;
    transition:transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms ease;}
  .case-card:active{transform:scale(0.985);}
  @media (hover:hover) and (pointer:fine){
    .case-card:hover{box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--primary-light);}
  }
  .case-tag{display:inline-block; align-self:flex-start; font-family:var(--mono); font-size:0.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark); background:var(--primary-pale); border-radius:30px; padding:6px 14px; margin-bottom:1.125rem;}
  .case-card h3{font-size:1.3rem; font-weight:800; line-height:1.32; margin-bottom:0;}
  .case-card .expand-hint{margin-top:1rem; color:var(--text-faint);}
  .case-lead{font-size:0.97rem; font-weight:600; color:var(--ink); line-height:1.5; margin-bottom:0.875rem;}
  .case-modal-title{font-size:clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin:0.875rem 0 1rem; padding-right:1.25rem; font-weight:800;}
  .case-modal-text{font-size:0.9rem; color:var(--text-dim); line-height:1.7; margin-bottom:1.625rem;}
  .case-metric{display:flex; align-items:baseline; gap:10px; border-top:1px solid var(--line); padding-top:1.125rem;}
  .case-metric .num{font-family:var(--display); font-size:1.75rem; font-weight:800; color:var(--primary);}
  .case-metric .lbl{font-size:0.8rem; color:var(--text-dim); max-width:17.5rem;}

  /* ===== MODAL DE CONTACTO ===== */
  .contact-modal-content{max-width:37.5rem;}
  .contact-modal-header{margin-bottom:1.75rem;}
  .contact-modal-title{font-size:clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight:800; margin:0.5rem 0;}
  .contact-modal-sub{font-size:0.875rem; color:var(--text-dim);}
  .contact-form{display:flex; flex-direction:column; gap:1.125rem;}
  .contact-row{display:grid; grid-template-columns:1fr; gap:1rem;}
  @media (min-width:768px){.contact-row{grid-template-columns:1fr 1fr;}}
  .contact-field{display:flex; flex-direction:column; gap:6px; position:relative;}
  .contact-field label{font-size:0.8125rem; font-weight:600; color:var(--ink);}
  .contact-field input, .contact-field textarea{
    width:100%; padding:0.75rem 0.875rem; border:1.5px solid var(--line);
    border-radius:8px; font-size:1rem; font-family:var(--sans);
    color:var(--ink); background:#fff; outline:none; resize:vertical;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .contact-field input:focus, .contact-field textarea:focus{
    border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,188,228,.12);
  }
  .contact-field input.cf-invalid, .contact-field textarea.cf-invalid{
    border-color:#e55; box-shadow:0 0 0 3px rgba(220,50,50,.1);
  }
  .cf-error{font-size:0.75rem; color:#d93; font-weight:500; margin-top:2px;}
  .contact-submit{width:100%; justify-content:center; margin-top:4px;}
  .contact-submit:disabled{opacity:.65; cursor:not-allowed;}
  @media (min-width:768px){
    .contact-submit{width:auto; align-self:flex-start; min-width:11.25rem;}
  }
  .contact-error{font-size:0.845rem; color:#b03a2e; background:#fdf0ee; border:1px solid #f0c8c0; border-radius:8px; padding:0.75rem 0.875rem; line-height:1.5;}
  .contact-error a{color:#b03a2e; font-weight:600; text-decoration:underline;}
  /* honeypot anti-spam: fuera de pantalla, invisible y no enfocable */
  .cf-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none;}

  /* ===== MODAL DE CALENDLY ===== */
  .calendly-modal-content{max-width:45rem; padding:2rem 1.375rem 1.5rem;}
  .calendly-frame-wrap{margin-top:1.375rem; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bg-soft);}
  #calendlyFrame{width:100%; height:min(560px, 68vh); border:0; display:block;}
  @media (min-width:768px){
    .calendly-modal-content{padding:2.5rem 2.5rem 2rem;}
    #calendlyFrame{height:640px;}
  }
  .contact-success{text-align:center; padding:2rem 0;}
  .success-icon{width:64px; height:64px; border-radius:50%; background:var(--primary-pale); color:var(--primary); font-size:1.625rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem;}
  .contact-success h3{font-size:1.375rem; font-weight:800; margin-bottom:0.625rem;}
  .contact-success p{color:var(--text-dim); font-size:0.9rem;}

  /* ===== TEAM ===== */
  .team-grid{display:grid; grid-template-columns:1fr; gap:1.5rem;}
  @media (min-width:768px){.team-grid{grid-template-columns:1fr 1fr;}}
  .team-card{background:#fff; border:1px solid var(--line); padding:2rem; border-radius:18px; box-shadow:var(--shadow-sm);
    transition:transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms ease;}
  @media (hover:hover) and (pointer:fine){
    .team-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--primary-light);}
  }
  .avatar{width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:600; color:#fff; margin-bottom:1rem;}
  .avatar-photo{width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center top; margin-bottom:1rem; border:3px solid var(--primary-pale); box-shadow:0 4px 16px rgba(0,188,228,.2);}
  .team-card h3{font-size:1.06rem; font-weight:700;}
  .team-card .role{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; color:var(--primary); text-transform:uppercase; margin:0.375rem 0 0.75rem;}
  .team-card p{font-size:0.86rem; color:var(--text-dim); margin-bottom:0.75rem;}
  .team-card a{font-size:0.8125rem; color:var(--primary); font-weight:600;}

  /* ===== CTA ===== */
  .cta{position:relative; background:linear-gradient(135deg,var(--primary-dark) 0%, var(--primary) 100%); padding:var(--section-py) 0; text-align:center; color:#fff; overflow:hidden;}
  .cta::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,255,255,.16), transparent 70%); pointer-events:none;}
  .cta .wrap{position:relative; z-index:1;}
  .cta h2{color:#fff; font-size:clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem); max-width:42.5rem; margin:0 auto 1.375rem; font-weight:800; letter-spacing:-0.025em; line-height:1.15; text-wrap:balance;}
  .cta .sub{color:rgba(255,255,255,.82); margin:0 auto 2rem; max-width:38.75rem; font-size:1rem; line-height:1.65; text-wrap:pretty;}
  .cta .btn-primary{background:#fff; color:var(--primary-dark); box-shadow:0 4px 12px rgba(0,30,50,.18), 0 16px 32px -16px rgba(0,30,50,.4);}
  @media (hover:hover) and (pointer:fine){.cta .btn-primary:hover{background:#eef9fd; color:var(--primary-dark);}}

  /* ===== FOOTER ===== */
  footer{background:var(--ink); color:#aab6c9; padding:3.75rem 0 1.875rem;}
  .footer-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.875rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,0.1);}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  .footer-grid img{height:26px; margin-bottom:0.875rem;}
  .footer-grid h4{font-family:var(--display); color:#fff; font-size:0.8125rem; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:0.875rem;}
  .footer-grid a{display:block; font-size:0.845rem; padding:5px 0; color:#aab6c9;}
  .footer-grid a:hover{color:#fff;}
  .footer-bottom{display:flex; flex-direction:column; gap:0.625rem; padding-top:1.5rem; font-family:var(--mono); font-size:0.75rem; color:#7c8aa0;}
  @media (min-width:1024px){
    .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}
    .footer-grid > div:first-child{grid-column:auto;}
    .footer-bottom{flex-direction:row; justify-content:space-between; flex-wrap:wrap;}
  }

  /* ===== BACK TO TOP ===== */
  .back-to-top{position:fixed; bottom:1.625rem; right:1.625rem; width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px -8px rgba(0,188,228,.6), var(--shadow); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px) scale(.9); z-index:60;
    transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms, background-color 180ms ease;}
  .back-to-top.show{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
  .back-to-top.show:active{transform:scale(0.93);}
  @media (hover:hover) and (pointer:fine){.back-to-top:hover{background:var(--primary-dark);}}

  .scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--primary), var(--primary-light)); z-index:200; transition:width .1s linear;}

  /* ===== REVEAL + STAGGER ===== */
  .reveal{opacity:0; transform:translateY(14px); transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out);}
  .reveal.visible{opacity:1; transform:translateY(0);}

  /* Stagger: los hijos de una grilla revelada entran en cascada */
  .reveal.visible > *{animation:staggerIn 420ms var(--ease-out) both;}
  .reveal.visible > *:nth-child(1){animation-delay:0ms;}
  .reveal.visible > *:nth-child(2){animation-delay:50ms;}
  .reveal.visible > *:nth-child(3){animation-delay:100ms;}
  .reveal.visible > *:nth-child(4){animation-delay:150ms;}
  .reveal.visible > *:nth-child(5){animation-delay:200ms;}
  .reveal.visible > *:nth-child(6){animation-delay:250ms;}
  .reveal.visible > *:nth-child(7){animation-delay:300ms;}
  .reveal.visible > *:nth-child(8){animation-delay:340ms;}
  @keyframes staggerIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  /* El carrusel de logos y el head no deben escalonarse */
  .logo-carousel.reveal.visible > *, .section-head.reveal.visible > *{animation:none;}

  /* ===== PÁGINAS LEGALES ===== */
  .legal-hero{background:linear-gradient(180deg, var(--primary-pale) 0%, #fff 100%); padding:7.5rem 0 2.5rem;}
  .legal-hero .eyebrow{margin-bottom:0.875rem;}
  .legal-hero h1{font-size:clamp(1.9rem, 1.4rem + 2vw, 2.7rem); font-weight:800; line-height:1.15;}
  .legal-hero .legal-updated{font-family:var(--mono); font-size:0.78rem; color:var(--text-faint); margin-top:0.875rem;}
  .legal-content{max-width:50rem; margin:0 auto; padding:1.25rem var(--wrap-x) 5.625rem;}
  .legal-content h2{font-size:1.35rem; font-weight:800; margin:2.375rem 0 0.75rem;}
  .legal-content h3{font-size:1.05rem; font-weight:700; margin:1.5rem 0 0.5rem; color:var(--ink);}
  .legal-content p{color:var(--text-dim); font-size:0.94rem; line-height:1.7; margin-bottom:0.875rem;}
  .legal-content ul,.legal-content ol{margin:0 0 1rem 1.25rem;}
  .legal-content li{color:var(--text-dim); font-size:0.94rem; line-height:1.7; margin-bottom:0.44rem;}
  .legal-content a{color:var(--primary-dark); font-weight:600; text-decoration:underline;}
  .legal-back{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:0.875rem; color:var(--primary-dark); margin-bottom:0.5rem;}
  @media (min-width:1024px){
    .legal-hero{padding:8.125rem 0 2.5rem;}
  }

  /* ===== LANGUAGE TOGGLE ===== */
  .lang-toggle{
    display:flex; align-items:center; gap:6px;
    background:var(--primary-pale); border:1.5px solid var(--line);
    border-radius:30px; padding:6px 14px; cursor:pointer;
    font-family:var(--mono); font-size:0.75rem; font-weight:600;
    color:var(--text-dim); transition:border-color .2s ease, background-color .2s ease;
  }
  .lang-toggle:hover{border-color:var(--primary); background:#fff;}
  .lang-sep{color:var(--line); font-size:0.625rem;}
  .lang-active{color:var(--primary);}
  .lang-es-txt, .lang-en-txt{transition:color .2s ease;}

  /* ===== IMAGENES: fade-in al cargar ===== */
  img[loading="lazy"]{opacity:0; transition:opacity .4s ease;}
  img[loading="lazy"].img-loaded, img[loading="lazy"].img-error{opacity:1;}

  /* ===== ACCESIBILIDAD: respeta preferencia de menos movimiento ===== */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.001ms !important;
      animation-iteration-count:1 !important;
      animation-delay:0ms !important;
      scroll-behavior:auto !important;
    }
    /* Movimiento fuera; opacidad y color se mantienen porque ayudan a comprender el estado */
    .reveal, .reveal.visible > *{transform:none !important;}
    .service-card:hover, .case-card:hover, .featured-card:hover, .team-card:hover, .partner-link:hover{transform:none !important;}
    .btn:active, .service-card:active, .case-card:active, .featured-card:active{transform:none !important;}
    .sc-bg, .featured-bg, .obj-slide-img{transition:none !important;}
    .cookie-banner{transition:none !important;}
  }

  /* ===== BANNER DE COOKIES ===== */
  .cookie-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:1200;
    padding:0 var(--wrap-x) calc(env(safe-area-inset-bottom, 0px) + 1rem);
    display:flex; justify-content:center;
    transform:translateY(120%); opacity:0;
    transition:transform 340ms var(--ease-out), opacity 340ms ease;
    pointer-events:none;
  }
  .cookie-banner.show{transform:translateY(0); opacity:1; pointer-events:auto;}
  .cookie-banner-inner{
    width:100%; max-width:var(--maxw);
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:1.1rem 1.25rem;
    display:flex; flex-direction:column; gap:1rem;
  }
  .cookie-banner-text strong{
    font-family:var(--display); color:var(--ink); font-size:1rem; display:block; margin-bottom:.25rem;
  }
  .cookie-banner-text p{
    font-size:.9rem; color:var(--text-dim); line-height:1.5; margin:0;
  }
  .cookie-banner-text a{color:var(--primary-dark); text-decoration:underline; font-weight:500;}
  .cookie-banner-actions{
    display:flex; gap:.6rem; flex-shrink:0;
  }
  .cookie-banner-actions .btn{flex:1; justify-content:center;}
  @media (min-width:768px){
    .cookie-banner-inner{flex-direction:row; align-items:center; gap:1.5rem;}
    .cookie-banner-actions .btn{flex:initial;}
  }