:root{--blue:#0077f5;--cyan:#00d3db;--green:#00cd4b;--bg:#0b1220;--text:#e8f0ff;--muted:#cbd5e1}
*{box-sizing:border-box} html,body{margin:0;padding:0;scroll-behavior:smooth}
body{font-family:Poppins,Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:
  radial-gradient(1200px 800px at 20% 10%, color-mix(in oklab, var(--cyan) 35%, transparent), transparent 60%),
  radial-gradient(1200px 800px at 90% 10%, color-mix(in oklab, var(--blue) 45%, transparent), transparent 60%),
  radial-gradient(1200px 800px at 50% 100%, color-mix(in oklab, var(--green) 35%, transparent), transparent 60%),
  linear-gradient(135deg,#061020,#0e172a); color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:#0b1220cc;border-bottom:1px solid #ffffff1a}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-badge{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 0 2px #ffffff22 inset}
.brand-title{font-weight:800;letter-spacing:.2px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:none;gap:18px;font-size:14px;color:#d1e3ffcc} @media(min-width:760px){.nav-links{display:flex}}
.top-cta{display:none} @media(min-width:760px){.top-cta{display:inline-flex}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;padding:12px 20px;font-weight:700;border:1px solid #ffffff40;transition:all .25s ease}
.btn-primary{background:var(--green);color:#052e16;border-color:transparent;position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;opacity:0;transition:.3s;background:radial-gradient(120% 120% at 50% 0%, #fff6, transparent 60%)}
.btn-primary:hover::after{opacity:1} .btn-outline{border:1px solid #fff;color:#fff;background:transparent} .btn-outline:hover{background:#ffffff1a}
 h1{font-size:clamp(32px,4.2vw,56px);font-weight:900} h2{font-size:clamp(26px,3vw,38px);margin-bottom:6px} h3{font-size:20px}
.kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff26;background:#ffffff12;color:#e8f0ffcc;padding:6px 10px;border-radius:9999px;font-size:12px;backdrop-filter:blur(8px)}
.hero{padding:80px 0 40px;position:relative;overflow:hidden} .hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .section{padding:80px 0} .center{text-align:center;margin:0 auto;max-width:760px}
.grid{display:grid;gap:24px} .grid-2{grid-template-columns:1.1fr .9fr} .grid-3{grid-template-columns:repeat(3,1fr)} @media(max-width:920px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{position:relative;overflow:hidden;border:1px solid #ffffff1a;border-radius:24px;background:#ffffff14;backdrop-filter:blur(14px);padding:24px;box-shadow:0 10px 30px #0008;transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px #000a} .card .meta{display:flex;align-items:center;gap:8px;color:#e6f0ffcc;font-size:14px;margin-top:14px}
.wave{width:100%;height:auto;opacity:.35}
.mask-grid{position:absolute;inset:0;opacity:.08;mask-image:radial-gradient(ellipse at center,black,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black,transparent 70%)}
.tag{border:1px solid #ffffff1a;background:#ffffff12;padding:6px 10px;border-radius:9999px;font-size:12px;color:#e6f0ffcc}
footer{border-top:1px solid #ffffff1a;padding:30px 0 10px;text-align:center;color:#cbd5e1} .footer-grid{display:grid;gap:18px} @media(min-width:920px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.list-clean{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.form{display:grid;gap:12px;max-width:520px} .input, textarea{width:100%;border-radius:14px;border:1px solid #ffffff2a;background:#ffffff10;color:#fff;padding:12px 14px;outline:none}
.input:focus, textarea:focus{border-color:#ffffff60} textarea{min-height:120px;resize:vertical}
.reveal{opacity:0;transform:translateY(24px)} .reveal.show{opacity:1;transform:translateY(0);transition:.7s cubic-bezier(.22,1,.36,1)}
.slidein{opacity:0;transform:translateX(24px)} .slidein.show{opacity:1;transform:translateX(0);transition:.7s cubic-bezier(.22,1,.36,1)}
.floaty{animation:floaty 8s ease-in-out infinite} @keyframes floaty{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1.6deg)}100%{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion: reduce){.reveal,.slidein,.floaty{animation:none;transition:none;transform:none;opacity:1}}

/* Holograma Orbital */
.holo{position:relative;overflow:hidden}
.holo-core{position:relative;display:grid;place-items:center;padding:26px 0}
.holo-core::before{content:"";position:absolute;inset:-40px;filter:blur(36px);opacity:.65;background:radial-gradient(closest-side,var(--cyan),transparent 70%)}
.holo-core::after{content:"";position:absolute;right:-30px;bottom:-30px;width:160px;height:160px;border-radius:9999px;filter:blur(36px);opacity:.6;background:radial-gradient(closest-side,var(--green),transparent 70%)}
.holo-grid{position:relative;width:320px;height:320px;opacity:.85}
.holo-grid .ring{transform-origin:110px 110px}
.holo-grid .r1{animation:spin 10s linear infinite} .holo-grid .r2{animation:spinReverse 14s linear infinite} .holo-grid .r3{animation:spin 20s linear infinite}
.holo-grid .orbit circle{fill:url(#holoStroke)}
.holo-grid .o1{transform-origin:110px 110px;animation:spin 6s linear infinite} .holo-grid .o2{transform-origin:110px 110px;animation:spinReverse 8s linear infinite} .holo-grid .o3{transform-origin:110px 110px;animation:spin 12s linear infinite}
.holo-orb{position:absolute;border-radius:9999px;filter:blur(8px);opacity:.5;mix-blend:screen}
.holo-orb.orb-1{width:140px;height:140px;animation:floaty 7s ease-in-out infinite;background:radial-gradient(circle at 30% 30%,var(--cyan),transparent 60%)}
.holo-orb.orb-2{width:100px;height:100px;animation:floaty 6s ease-in-out infinite reverse;background:radial-gradient(circle at 70% 70%,var(--blue),transparent 60%)}
.holo-orb.orb-3{width:70px;height:70px;animation:floaty 5.5s ease-in-out infinite;background:radial-gradient(circle at 50% 20%,var(--green),transparent 60%)}
@keyframes spin{to{transform:rotate(360deg)}} @keyframes spinReverse{to{transform:rotate(-360deg)}}
/* ===== Mega menú Servicios (header) ===== */
.nav { position: relative; }
.nav-item-servicios { position: relative; }
.mega-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  color: #d1e3ffcc; font-size: 14px; cursor: pointer;
}
.mega-toggle:hover { color:#fff; }
.mega { position: absolute; top: 56px; left: 0; width: 720px; max-width: calc(100vw - 24px); background: #fffffff2; backdrop-filter: blur(10px); border: 1px solid #0b122022; border-radius: 16px; padding: 16px; display: none; box-shadow: 0 20px 40px #0009; z-index: 100; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mega a { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:12px; border:1px solid #0b122012; background:#0b122006; color:#0b1220; transition: transform .2s ease, background .2s ease; }
.mega a:hover { transform: translateY(-2px); background:#0b12200f; }
.mega .icon { font-size: 18px; }
.mega .title { color:#0b1220; font-weight:700; margin-bottom:2px; }
.mega .desc { color:#0b1220cc; font-size:13px; line-height:1.5; }
@media (min-width: 960px){
  .nav-item-servicios:hover .mega { position: absolute; top: 56px; left: 0; width: 720px; max-width: calc(100vw - 24px); background: #fffffff2; backdrop-filter: blur(10px); border: 1px solid #0b122022; border-radius: 16px; padding: 16px; display: none; box-shadow: 0 20px 40px #0009; z-index: 100; }
}
/* Mobile dropdown */
@media (max-width: 959px){
  .mega { position: absolute; top: 56px; left: 0; width: 720px; max-width: calc(100vw - 24px); background: #fffffff2; backdrop-filter: blur(10px); border: 1px solid #0b122022; border-radius: 16px; padding: 16px; display: none; box-shadow: 0 20px 40px #0009; z-index: 100; }
  .nav-links { display: none; }
  .mobile-nav { display: grid; gap: 10px; }
}
/* Footer acordeón Servicios */
.footer-accordion { margin-top: 6px; }
.footer-accordion .acc-header { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:8px 0; }
.footer-accordion .acc-list { list-style:none; padding-left: 0; margin: 0; display: none; }
.footer-accordion .acc-list a { color:#d1e3ff; font-size: 14px; opacity:.9 }
.footer-accordion .acc-list a:hover { opacity:1 }
.footer-accordion.open .acc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 10px 8px 6px; }
.footer-accordion .chev { transition: transform .2s ease; }
.footer-accordion.open .chev { transform: rotate(180deg); }

/* Micro-animación: brillo en botones */
.btn:hover { box-shadow: 0 8px 24px #0007; }
.btn-primary { background: linear-gradient(135deg, var(--green), #2bff9d); }
.btn-outline { border-color:#ffffffb3; }

/* Ajuste visual para links activos */
.nav-links a.active, .mega a.active { color:#fff; border-color:#ffffff30; background:#ffffff18; }

/* Iconografía tri-color */
.svc-icon{width:32px;height:32px;flex:0 0 32px;opacity:.95}
.svc-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;margin-bottom:8px;
  border:1px solid #ffffff26;background:#ffffff10;backdrop-filter:blur(8px)}
.mega a .svc-icon{width:22px;height:22px;margin-top:2px}

/* Headings tricromo */
h1,h2,h3,h4{line-height:1.2;margin:0;
  background:linear-gradient(135deg,var(--cyan),var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
h1{font-size:clamp(32px,4.2vw,56px);font-weight:900}
h2{font-size:clamp(26px,3vw,38px);margin-bottom:6px}
h3{font-size:20px}

/* Footer accordion darker background */
.footer-accordion{ background: #0b1220cc; border:1px solid #ffffff22; border-radius:12px; padding:6px 10px; }
.footer-accordion .acc-list{ background:#0b1220ee; border-radius:8px; padding:8px; }
.footer-accordion .acc-header{ color:#e6f0ff; }
.footer-accordion .acc-list a{ color:#e6f0ff; opacity:.95 }

/* Destacado WhatsApp */
.card-featured{
  border:1.5px solid transparent;
  background: linear-gradient(#ffffff1a,#ffffff1a) padding-box,
              linear-gradient(135deg, var(--cyan), var(--blue), var(--green)) border-box;
  position:relative;
  box-shadow:0 18px 48px #000b;
}
.card-featured::before{
  content:"Destacado";
  position:absolute; top:14px; right:-10px;
  background:linear-gradient(135deg,var(--green),#2bff9d);
  color:#052e16; font-weight:800; font-size:12px;
  padding:6px 10px; border-radius:9999px; box-shadow:0 6px 18px #0006;
}
.badge-new{
  display:inline-flex; align-items:center; gap:6px;
  background:#0b1220; color:#fff; border:1px solid #ffffff22;
  padding:4px 8px; border-radius:9999px; font-size:11px; font-weight:700;
}

.footer-accordion .acc-list li { margin: 0; }

@media (max-width: 520px) { .footer-accordion.open .acc-list { grid-template-columns: 1fr; } }


/* === Mega menu fixes === */
.mega a{height:auto; min-height:64px; position:relative; align-items:flex-start;}
.mega a .title{line-height:1.2}
.mega a .desc{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; max-height:3.2em; line-height:1.6;
}
.mega a .badge-new{ position:absolute; top:10px; right:10px; }
.mega-grid > * { height:auto; }



/* --- WhatsApp focus highlight --- */
.whatsapp-focus{
  display:inline-block;
  margin-top:8px;
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(135deg, #0c2a22 0%, #0b1220 60%);
  box-shadow: 0 0 0 1px #00cd4b33 inset, 0 8px 24px #00cd4b22;
  font-weight:500;
  position:relative;
}
.whatsapp-focus strong{
  color: var(--green);
  text-shadow: 0 0 12px rgba(0,205,75,.35);
}
/* subtle shimmer underline */
.whatsapp-focus::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:8px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);
  opacity:.7;
  animation: focusShimmer 2.8s linear infinite;
}
@keyframes focusShimmer{
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.whatsapp-focus{
  opacity:0; transform: translateY(6px);
  animation: popIn .9s ease .2s forwards;
}
@keyframes popIn{
  to{ opacity:1; transform:translateY(0); }
}


/* ======= Service Highlights (Top 3) ======= */
.card.highlight{
  position: relative;
  isolation: isolate; /* keep effects within card stacking */
  --ringA: var(--green);
  --ringB: var(--cyan);
  --ringC: var(--blue);
  overflow: hidden; /* ensure mask looks clean */
}

/* Rotating conic-gradient ring */
.card.highlight::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  padding:2px;
  background: conic-gradient(from 0turn, var(--ringA), var(--ringB), var(--ringC), var(--ringA));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; /* cut inner area -> ring */
  animation: svcSpin 5s linear infinite;
  opacity:.95;
  z-index:0;
  filter: drop-shadow(0 0 14px rgba(0, 205, 75, .35));
}
@keyframes svcSpin { to { transform: rotate(1turn); } }

/* Levels: intensity & speed */
.card.highlight-2::before{ opacity:.75; animation-duration:7s; filter: drop-shadow(0 0 10px rgba(0, 119, 245, .28)); }
.card.highlight-3::before{ opacity:.60; animation-duration:9s; filter: drop-shadow(0 0 8px rgba(0, 211, 219, .22)); }

/* Rank badges */
.rank-badge{
  position:absolute;
  top:10px; left:10px;
  z-index:1;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  padding:6px 10px;
  border-radius:999px;
  color:white;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  box-shadow: 0 6px 18px rgba(0,205,75,.35);
  backdrop-filter: blur(2px);
}
article.rank-2 > .rank-badge{ background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 6px 16px rgba(0,119,245,.30); opacity:.95; }
article.rank-3 > .rank-badge{ background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 5px 14px rgba(0,119,245,.22); opacity:.90; }

/* slight hover lift for highlighted ones */
.card.highlight:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px #00000055; }


/* === spacing for cards without icon === */
.card.no-icon{ padding-top: 44px; } /* matches visual height where icon was */

/* === extra subtle animated glow ONLY for the top card (rank-1) === */
article.highlight.rank-1::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  pointer-events:none;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(0,205,75,.20), transparent 60%),
    radial-gradient(48% 48% at 80% 80%, rgba(0,211,219,.14), transparent 60%);
  mix-blend-mode: screen;
  animation: pulseGlow 3.6s ease-in-out infinite;
  z-index:0;
  filter: blur(0.2px);
}
@keyframes pulseGlow{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:.95; transform:scale(1.01); }
}


/* === Metrics section enhancements === */
.metric-icon{
  width:32px; height:32px; margin-right:10px; vertical-align:middle;
  transform: translateY(4px);
  opacity:.95;
  animation: metricFloat 6s ease-in-out infinite;
}
/* Slightly different delays via nth-of-type when inside the metric grid */
.grid.grid-3 .metric-icon:nth-of-type(1){ animation-delay: .2s; }
.grid.grid-3 .metric-icon:nth-of-type(2){ animation-delay: .6s; }
.grid.grid-3 .metric-icon:nth-of-type(3){ animation-delay: 1s; }

@keyframes metricFloat{
  0%,100%{ transform: translateY(4px); }
  50%{ transform: translateY(0); }
}

/* Layout: icon + number inline */
.grid.grid-3 > div h3{
  display:flex; align-items:center; gap:10px;
}


/* === Metrics micro-interactions === */
.metric-icon{ transform-origin: center; animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }

.metric-progress{ position: relative; width: 100%; height: 6px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.metric-progress__bar{ position: absolute; inset: 0 auto 0 0; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00d3db, #0077f5, #00cd4b); transition: width 1.2s cubic-bezier(.22,.68,0,1.71); }
.metric-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; background: rgba(0,255,170,.06); border:1px solid rgba(0,255,170,.2); font-size:.8rem; color:var(--muted); backdrop-filter: blur(4px); }
.reveal.pop-in{ opacity: 0; transform: translateY(16px) scale(.98); transition: all .6s ease; }
.reveal.pop-in.is-visible{ opacity:1; transform: none; }



/* === FAQ placeholders & transitions (safe horizontal) === */
.faq-content{display:block}
.faq-body{display:grid;gap:14px;align-items:start;margin-top:10px}
@media (min-width: 700px){
  .faq-body{grid-template-columns: 1.2fr .8fr;gap:20px}
}
.faq-media{border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#0f172a,#0b1220);border:1px dashed #33e1ff55;padding:10px}
.faq-box{
  width:100%; max-width:800px;
  aspect-ratio:16 / 9; /* horizontal ratio */
  border-radius:12px;
  border:2px dashed #33e1ff55;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#0b1220,#0e172a);
  box-shadow:inset 0 0 0 1px #ffffff12, 0 10px 30px rgba(0,0,0,.25);
  position:relative; overflow:hidden;
}
.faq-box::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff10,transparent);transform:translateX(-100%);animation:faqSheen 2.6s ease-in-out infinite 1s}
.faq-box-label{font-size:.95rem;color:#a3b7d8;opacity:.9;letter-spacing:.3px;user-select:none}
@keyframes faqSheen{0%{transform:translateX(-100%)}60%{transform:translateX(100%)}100%{transform:translateX(100%)}}
/* Media enter */
details .faq-media{opacity:0;transform:translateY(8px);transition:opacity .35s ease, transform .35s ease}
details[open] .faq-media{opacity:1;transform:translateY(0)}
/* Collapsible animation: JS sets height; keep overflow hidden when closed */


/* ==== Mega menú: destacados y animación ==== */
#megaMenu .mega-grid > a{position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease}
#megaMenu .mega-grid > a .mega-badge{
  position:absolute; top:10px; left:10px;
  font-size:.78rem; font-weight:700; line-height:1;
  padding:6px 10px; border-radius:999px;
  color:#fff; z-index:2; box-shadow:0 6px 16px rgba(0,0,0,.25)
}
#megaMenu .mega-grid > a.featured::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 15% 15%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(70% 60% at 85% 85%, rgba(14,165,233,.14), transparent 60%);
}
#megaMenu .mega-grid > a.featured .title{position:relative; z-index:1}
#megaMenu .mega-grid > a:hover{transform:translateY(-2px)}

/* Niveles de énfasis */
#megaMenu .mega-grid > a.feat1{box-shadow:0 14px 38px rgba(0,255,180,.18), inset 0 0 0 2px #32f5c377}
#megaMenu .mega-grid > a.feat1 .mega-badge{background:linear-gradient(135deg,#10b981,#22d3ee)}
#megaMenu .mega-grid > a.feat2{box-shadow:0 10px 28px rgba(0,200,255,.12), inset 0 0 0 1px #2dd4bf66}
#megaMenu .mega-grid > a.feat2 .mega-badge{background:linear-gradient(135deg,#60a5fa,#a78bfa)}
#megaMenu .mega-grid > a.feat3{box-shadow:0 8px 20px rgba(0,160,255,.10), inset 0 0 0 1px #38bdf866}
#megaMenu .mega-grid > a.feat3 .mega-badge{background:linear-gradient(135deg,#0ea5e9,#64748b)}

/* Animación al abrir el mega menú */
#megaMenu .mega-grid > a{opacity:1; transform:translateY(0)}
#megaMenu.is-open .mega-grid > a{opacity:0; transform:translateY(8px);}
#megaMenu.is-open .mega-grid > a.featured{animation:megaPop .5s ease forwards}
#megaMenu.is-open .mega-grid > a.feat1{animation-delay:.00s}
#megaMenu.is-open .mega-grid > a.feat2{animation-delay:.06s}
#megaMenu.is-open .mega-grid > a.feat3{animation-delay:.12s}
@keyframes megaPop{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}


/* === FIX: Mega menú - que las badges no tapen el contenido === */
/* Más espacio arriba solo en tarjetas destacadas */
#megaMenu .mega-grid > a.featured{ padding-top: 28px; }
/* Un poquito de margen extra para el contenedor de título/desc */
#megaMenu .mega-grid > a.featured > div{ margin-top: 6px; }
/* Baja la badge y dale un pelín más de separación lateral */
#megaMenu .mega-grid > a .mega-badge{ top: 10px; left: 14px; }
/* Alinea el icono con el nuevo padding */
#megaMenu .mega-grid > a .svc-icon{ margin-top: 8px; }
/* En móviles reducimos un poco para no romper la grilla */
@media (max-width: 900px){
  #megaMenu .mega-grid > a.featured{ padding-top: 22px; }
  #megaMenu .mega-grid > a.featured > div{ margin-top: 4px; }
  #megaMenu .mega-grid > a .mega-badge{ top: 8px; left: 12px; }
}


/* === FIX overflow mega menu (align right & fit viewport) === */
#megaMenu{
  left: auto !important;
  right: 16px !important;
  width: min(980px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box;
}
@media (max-width: 960px){
  #megaMenu{ right: 12px !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
}
html, body{ overflow-x: hidden; } /* evita scroll horizontal accidental */


/* === FIX: Mega menú centrado === */
#megaMenu{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(980px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box;
}
@media (max-width: 960px){
  #megaMenu{ width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; left: 50% !important; transform: translateX(-50%) !important; }
}


/* === Mobile Nav (hamburger + drawer) === */
.hamburger{display:inline-flex;flex-direction:column;gap:4px;border:1px solid #ffffff30;background:#ffffff10;
  padding:8px;border-radius:10px;cursor:pointer;backdrop-filter:blur(6px)}
.hamburger span{display:block;width:22px;height:2px;background:#e6f0ff;border-radius:2px;transition:transform .25s ease, opacity .25s ease}
@media(min-width:760px){.hamburger{display:none}}

.mobile-backdrop{position:fixed;inset:0;background:#0008;opacity:0;transition:opacity .25s ease;z-index:60}
.mobile-backdrop.show{opacity:1}

.mobile-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,360px);background:#0b1220;border-left:1px solid #ffffff1a;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);z-index:70;display:flex;flex-direction:column}
.mobile-drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #ffffff14}
.brand-mini{font-weight:800;letter-spacing:.2px;background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.close-drawer{background:#ffffff12;border:1px solid #ffffff30;color:#e6f0ff;border-radius:10px;padding:6px 10px;cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;padding:10px 14px;gap:4px}
.drawer-link{display:flex;align-items:center;justify-content:space-between;padding:12px 10px;border-radius:10px;border:1px solid #ffffff14;background:#ffffff08}
.drawer-link:hover{background:#ffffff14}
.drawer-details{border:1px solid #ffffff14;border-radius:12px;background:#ffffff08;overflow:hidden}
.drawer-details>summary{list-style:none;cursor:pointer;padding:12px 10px;display:flex;align-items:center;justify-content:space-between}
.drawer-details[open] .caret{transform:rotate(180deg)}
.drawer-details .caret{transition:transform .25s ease}
.drawer-sub{display:grid;gap:6px;padding:8px 10px 12px;background:#ffffff06;border-top:1px solid #ffffff14}
.drawer-sub a{padding:8px;border-radius:8px;border:1px solid #ffffff0d;background:#ffffff06}
.drawer-sub a:hover{background:#ffffff12}
.drawer-cta{margin-top:auto;padding:14px;border-top:1px solid #ffffff14}

/* Drawer entrance animation for links */
@keyframes slideUp {from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}}
.mobile-drawer.open .drawer-link, .mobile-drawer.open .drawer-details{animation:slideUp .4s ease both}
.mobile-drawer.open .drawer-link:nth-child(1){animation-delay:.05s}
.mobile-drawer.open .drawer-details{animation-delay:.1s}
.mobile-drawer.open .drawer-link:nth-child(3){animation-delay:.15s}

/* Prevent body scroll when drawer open */
body.nav-open{overflow:hidden}

@media(max-width:759px){.hamburger{margin-left:auto}}


/* === Destacados (Top 3) en menú móvil === */
.drawer-sub .hot{position:relative;border:1px solid #4ade8033;background:linear-gradient(180deg,#ffffff0d,#ffffff12);
  box-shadow:0 8px 20px #0006, inset 0 0 0 1px #ffffff10; font-weight:700}
.drawer-sub .hot::before{content:attr(data-badge); position:absolute; top:-10px; left:10px; font-size:10px; 
  padding:3px 8px; border-radius:9999px; color:#06141f; background:linear-gradient(90deg,var(--cyan),var(--blue));
  box-shadow:0 2px 6px #0006}
.drawer-sep{height:10px}
@media (prefers-reduced-motion: no-preference){
  .drawer-sub .hot{animation:popIn .45s cubic-bezier(.22,1,.36,1) both}
  .drawer-sub .hot:nth-child(1){animation-delay:.02s}
  .drawer-sub .hot:nth-child(2){animation-delay:.06s}
  .drawer-sub .hot:nth-child(3){animation-delay:.1s}
  @keyframes popIn {from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)}}
}


/* === Social Icons in Header === */
.header-social{display:flex;align-items:center;gap:10px;margin-right:12px}
.header-social .social-icon{display:inline-flex;width:26px;height:26px;padding:6px;border-radius:8px;background:#ffffff10;
  border:1px solid #ffffff14;backdrop-filter:blur(6px);transition:all .25s ease}
.header-social .social-icon:hover{background:#ffffff20;transform:translateY(-2px)}
.header-social svg{width:100%;height:100%}
@media(max-width:759px){.header-social{display:none}}


/* === Header Social (brand colors, bigger) === */
.header-social{display:flex;align-items:center;gap:12px;margin-left:12px}
.header-social .social-icon{display:inline-flex;width:36px;height:36px;line-height:0;border-radius:9999px;box-shadow:0 6px 16px #0006;transition:transform .18s ease, filter .18s ease}
.header-social .social-icon:hover{transform:translateY(-2px);filter:brightness(1.08)}
@media(max-width:759px){.header-social{display:none}}


/* === Contact Page: Social big icons === */
.contact-social{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.cs-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:16px;background:#ffffff0d;
  border:1px solid #ffffff1a;backdrop-filter:blur(8px);box-shadow:0 10px 30px #0007;transition:transform .25s ease, background .25s ease}
.cs-btn:hover{transform:translateY(-4px);background:#ffffff14}
.cs-btn svg{width:64px;height:64px}
.cs-btn span{font-weight:700;color:#e6f0ffcc}
@media(max-width:920px){
  .contact-social{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .contact-social{grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
  .cs-btn svg{width:56px;height:56px}
}


/* === Footer social inline (safe minimal) === */
.footer-grid{display:grid;gap:22px}
@media(min-width:920px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-social-inline{display:flex;gap:10px;margin-top:6px}
.footer-social-inline .s{display:inline-flex;width:34px;height:34px;border-radius:9999px;box-shadow:0 6px 16px #0006;transition:transform .2s ease, filter .2s ease}
.footer-social-inline .s:hover{transform:translateY(-2px);filter:brightness(1.08)}
.footer-social-inline svg{width:100%;height:100%}
@media(max-width:760px){.footer-social-inline{justify-content:center}}


/* === Official IAgencia logo sizing === */
img.site-logo { height: 28px; width: auto; vertical-align: middle; display: inline-block; }
@media (min-width: 992px) { img.site-logo { height: 36px; } }
footer img.site-logo { height: 34px; }
.brand-mini-img { height: 28px; }
.header .brand, footer .brand { gap: 10px; align-items: center; display: inline-flex; }