:root {
  --pink:      #e8305a;
  --pink-l:    #f06080;
  --slate:     #4a5070;
  --slate-m:   #7a80a0;
  --text:      #1e2235;
  --text-d:    #6b7190;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body { font-family: 'Inter', sans-serif; color: var(--text); }

/* ─── CANVAS: pinta su propio fondo, z-index -1 ─── */
#net {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}

/* ─── NAVBAR ─── */
.navbar { position: fixed; top:0; width:100%; z-index:999; padding:1.1rem 0; transition: background .3s, box-shadow .3s; }
.navbar.stuck { background: rgba(247,248,252,.88); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(30,34,53,.08); }
.navbar-brand img { height: 50px; width: auto; }
.nav-link { font-family:'Exo 2',sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)!important; transition:color .2s; }
.nav-link:hover { color:var(--pink)!important; }
.navbar-toggler { border-color:rgba(232,48,90,.35); }
.navbar-toggler-icon { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232,48,90,.9%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.btn-nav { background:var(--pink)!important; color:#fff!important; border-radius:3px; font-family:'Exo 2',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; padding:.48rem 1.3rem!important; box-shadow:0 0 18px rgba(232,48,90,.3); transition:background .2s,box-shadow .2s; }
.btn-nav:hover { background:var(--pink-l)!important; box-shadow:0 0 28px rgba(232,48,90,.5); }

/* ─── HERO ─── */
#hero { min-height:100vh; display:flex; align-items:center; padding:8rem 0 5rem; }
.badge-tag { display:inline-block; font-family:'Exo 2',sans-serif; font-size:.67rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--pink); border:1px solid rgba(232,48,90,.3); border-radius:2px; padding:.28rem .85rem; margin-bottom:1.4rem; opacity:0; animation:fup .6s .2s ease forwards; }
/* El título se ve desde el primer cuadro (solo se desliza): si arranca invisible, Google demora el LCP. */
h1.hero-t { font-family:'Exo 2',sans-serif; font-size:clamp(2.4rem,5.5vw,4.8rem); font-weight:800; line-height:1.08; color:var(--text); margin-bottom:1.2rem; animation:fupt .6s .1s ease both; }
h1.hero-t em { color:var(--pink); font-style:normal; }
.hero-s { font-size:1.05rem; font-weight:300; color:var(--text-d); line-height:1.75; max-width:460px; margin-bottom:2rem; opacity:0; animation:fup .6s .5s ease forwards; }
.hero-btns { display:flex; flex-wrap:wrap; gap:.9rem; opacity:0; animation:fup .6s .65s ease forwards; }

.btn-p { font-family:'Exo 2',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; background:var(--pink); color:#fff; border:none; border-radius:3px; padding:.75rem 2rem; text-decoration:none; transition:background .2s,box-shadow .2s,transform .15s; box-shadow:0 4px 24px rgba(232,48,90,.35); }
.btn-p:hover { background:var(--pink-l); box-shadow:0 4px 36px rgba(232,48,90,.55); transform:translateY(-2px); color:#fff; }
.btn-o { font-family:'Exo 2',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.55); color:var(--slate); border:1px solid rgba(74,80,112,.25); border-radius:3px; padding:.75rem 2rem; text-decoration:none; transition:border-color .2s,color .2s,transform .15s,background .2s; backdrop-filter:blur(4px); }
.btn-o:hover { border-color:var(--pink); color:var(--pink); background:rgba(255,255,255,.75); transform:translateY(-2px); }

/* ─── MÉTRICAS ─── */
.met-strip { padding:2rem 0; border-top:1px solid rgba(74,80,112,.1); border-bottom:1px solid rgba(74,80,112,.1); background:rgba(255,255,255,.35); backdrop-filter:blur(8px); }
.met-box { text-align:center; padding:.4rem 1rem; }
.met-n { font-family:'Exo 2',sans-serif; font-size:2.2rem; font-weight:800; color:var(--pink); line-height:1; }
.met-l { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-m); margin-top:.25rem; }
.met-sep { width:1px; background:rgba(74,80,112,.12); }

/* ─── SECCIONES ─── */
.sec { padding:5.5rem 0; }
.sec-alt { background:rgba(228,231,248,.28); backdrop-filter:blur(4px); }
.sec-tag { font-family:'Exo 2',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--pink); margin-bottom:.7rem; }
.sec-h { font-family:'Exo 2',sans-serif; font-size:clamp(1.7rem,3vw,2.6rem); font-weight:800; color:var(--text); line-height:1.15; margin-bottom:.9rem; }
.sec-p { font-size:.95rem; font-weight:300; color:var(--text-d); line-height:1.75; max-width:480px; }

/* ─── CARDS SERVICIO ─── */
.svc { background:rgba(255,255,255,.62); backdrop-filter:blur(10px); border:1px solid rgba(74,80,112,.1); border-radius:8px; padding:2rem 1.7rem; height:100%; position:relative; overflow:hidden; transition:transform .25s,box-shadow .25s,border-color .25s; box-shadow:0 2px 16px rgba(30,34,53,.05); }
.svc::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--pink),transparent); opacity:0; transition:opacity .3s; }
.svc:hover { transform:translateY(-5px); box-shadow:0 10px 40px rgba(232,48,90,.12); border-color:rgba(232,48,90,.2); }
.svc:hover::after { opacity:1; }
.svc-ico { width:48px; height:48px; background:rgba(232,48,90,.1); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--pink); margin-bottom:1.2rem; }
.svc-n { font-family:'Exo 2',sans-serif; font-weight:700; font-size:1rem; color:var(--text); margin-bottom:.6rem; }
.svc-n a { color:inherit; text-decoration:none; }
.svc-mas { display:inline-block; margin-top:.8rem; font-family:'Exo 2',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pink); }
.svc:hover .svc-mas i { transform:translateX(3px); }
.svc-mas i { transition:transform .2s; }
.svc-d { font-size:.85rem; color:var(--text-d); line-height:1.7; }

/* ─── WHY ─── */
.why { display:flex; gap:.9rem; align-items:flex-start; padding:1.3rem; background:rgba(255,255,255,.55); backdrop-filter:blur(8px); border:1px solid rgba(74,80,112,.09); border-radius:7px; transition:border-color .25s,box-shadow .25s; }
.why:hover { border-color:rgba(232,48,90,.2); box-shadow:0 4px 20px rgba(232,48,90,.07); }
.why-ic { color:var(--pink); font-size:1.1rem; margin-top:3px; flex-shrink:0; }
.why h5 { font-family:'Exo 2',sans-serif; font-weight:700; font-size:.9rem; color:var(--text); margin-bottom:.25rem; }
.why p  { font-size:.8rem; color:var(--text-d); line-height:1.6; margin:0; }

.svc-cat { display:inline-block; font-family:'Exo 2',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-m); margin-bottom:.35rem; }

/* ─── IA & INNOVACIÓN (bloque destacado) ─── */
.ia-panel { background:linear-gradient(135deg,#1e2235 0%,#2c3150 60%,#3a2440 100%); border-radius:14px; padding:3.5rem 2.5rem; color:#fff; position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(30,34,53,.25); }
.ia-panel::before { content:''; position:absolute; width:420px; height:420px; right:-120px; top:-160px; background:radial-gradient(circle,rgba(232,48,90,.35),transparent 70%); pointer-events:none; }
.ia-panel > * { position:relative; z-index:1; }
.ia-panel .sec-tag { color:var(--pink-l); }
.ia-panel .sec-h { color:#fff; }
.ia-panel .sec-p { color:rgba(255,255,255,.72); max-width:560px; }
.ia-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:1.6rem 1.4rem; height:100%; transition:transform .25s,border-color .25s,background .25s; }
.ia-card:hover { transform:translateY(-4px); border-color:rgba(240,96,128,.55); background:rgba(255,255,255,.09); }
.ia-card .svc-ico { background:rgba(232,48,90,.22); color:#fff; }
.ia-card h3 { font-family:'Exo 2',sans-serif; font-weight:700; font-size:1.02rem; margin-bottom:.5rem; }
.ia-card p { font-size:.85rem; color:rgba(255,255,255,.7); line-height:1.65; margin:0; }
.ia-list { list-style:none; padding:0; margin:.9rem 0 0; }
.ia-list li { font-size:.8rem; color:rgba(255,255,255,.78); padding:.18rem 0; }
.ia-list li i { color:var(--pink-l); margin-right:.45rem; font-size:.7rem; }

/* ─── PROCESO ─── */
.step { position:relative; background:rgba(255,255,255,.62); backdrop-filter:blur(10px); border:1px solid rgba(74,80,112,.1); border-radius:8px; padding:1.6rem 1.3rem; height:100%; }
.step-n { font-family:'Exo 2',sans-serif; font-size:2rem; font-weight:800; color:rgba(232,48,90,.25); line-height:1; margin-bottom:.6rem; }
.step h5, .step h3 { font-family:'Exo 2',sans-serif; font-weight:700; font-size:.95rem; margin-bottom:.4rem; }
.step p { font-size:.8rem; color:var(--text-d); line-height:1.6; margin:0; }

/* ─── MARCAS (cinta en movimiento) ─── */
.marcas { padding:3.5rem 0 3rem; border-top:1px solid rgba(74,80,112,.1); border-bottom:1px solid rgba(74,80,112,.1); background:rgba(255,255,255,.35); backdrop-filter:blur(8px); overflow:hidden; }
.marcas-h { font-family:'Exo 2',sans-serif; font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:800; color:var(--text); margin:0; }
.marcas-cinta { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marcas-lista { list-style:none; margin:0; padding:.6rem 0; display:flex; width:max-content; animation:marcas-giro 50s linear infinite; }
.marcas-cinta + .marcas-cinta { margin-top:.4rem; }
.marcas-reversa { animation-direction:reverse; animation-duration:55s; }
.marcas-cinta:hover .marcas-lista { animation-play-state:paused; }
.marcas-lista li { display:flex; align-items:center; gap:.65rem; margin:0 .7rem; padding:.75rem 1.3rem; min-height:60px; background:rgba(255,255,255,.62); border:1px solid rgba(74,80,112,.1); border-radius:8px; white-space:nowrap; box-shadow:0 2px 12px rgba(30,34,53,.04); transition:border-color .25s,box-shadow .25s,transform .25s; }
.marcas-lista img { height:30px; width:auto; filter:grayscale(1); opacity:.55; transition:filter .3s,opacity .3s; }
.marcas-lista .marcas-texto img { height:22px; }
.marcas-lista span { font-family:'Exo 2',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.06em; color:var(--slate-m); transition:color .3s; }
.marcas-lista li:hover { border-color:rgba(232,48,90,.25); box-shadow:0 6px 24px rgba(232,48,90,.1); transform:translateY(-3px); }
.marcas-lista li:hover img { filter:none; opacity:1; }
.marcas-lista li:hover span { color:var(--text); }
@keyframes marcas-giro { to { transform:translateX(-50%); } }
@media (hover:none){ .marcas-lista img { filter:none; opacity:.9; } }
@media (max-width:767px){
  .marcas { padding:2.5rem 0 2rem; }
  .marcas-lista li { margin:0 .45rem; padding:.55rem 1rem; min-height:50px; }
  .marcas-lista img { height:24px; }
  .marcas-lista .marcas-texto img { height:18px; }
  .marcas-lista span { font-size:.78rem; }
}
@media (prefers-reduced-motion:reduce){
  .marcas-lista { animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:1rem; padding:.6rem 1rem; }
  .marcas-cinta + .marcas-cinta { margin-top:0; }
  .marcas-cinta { -webkit-mask-image:none; mask-image:none; }
}

/* ─── CTA ─── */
.cta-box { background:rgba(255,255,255,.55); backdrop-filter:blur(12px); border:1px solid rgba(232,48,90,.15); border-radius:10px; padding:4rem 2.5rem; text-align:center; box-shadow:0 4px 40px rgba(232,48,90,.07); }
.cta-box h2 { font-family:'Exo 2',sans-serif; font-size:clamp(1.5rem,3vw,2.4rem); font-weight:800; color:var(--text); margin-bottom:.9rem; }
.cta-box p  { color:var(--text-d); margin-bottom:2rem; }

/* ─── FOOTER ─── */
footer { padding:2.2rem 0; background:rgba(255,255,255,.35); backdrop-filter:blur(8px); border-top:1px solid rgba(74,80,112,.1); }
footer img { height:36px; width:auto; opacity:.85; }
.ft-a { color:var(--slate-m); font-size:.8rem; text-decoration:none; margin:0 .5rem; transition:color .2s; }
.ft-a:hover { color:var(--pink); }
.ft-c { color:var(--slate-m); font-size:.75rem; }
.ft-s a { color:var(--slate-m); font-size:.95rem; margin-left:.9rem; transition:color .2s; }
.ft-s a:hover { color:var(--pink); }

/* ─── ANIMACIONES ─── */
@keyframes fup { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes fupt { from{transform:translateY(22px)} to{transform:none} }
.rev { opacity:0; transform:translateY(26px); transition:opacity .6s ease,transform .6s ease; }
.rev.in { opacity:1; transform:none; }

@media(max-width:767px){
  .met-sep{display:none;}
  .cta-box{padding:2.5rem 1.5rem;}
  .ia-panel{padding:2.5rem 1.3rem;}
}

/* ─── IA: enlaces de las tarjetas ─── */
.ia-card { position:relative; }
.ia-card h3 a { color:inherit; text-decoration:none; }
.ia-card .svc-mas { color:var(--pink-l); }

/* ─── PREGUNTAS FRECUENTES ─── */
.faq { max-width:820px; margin:0 auto; }
.faq details { background:rgba(255,255,255,.62); backdrop-filter:blur(8px); border:1px solid rgba(74,80,112,.1); border-radius:8px; margin-bottom:.75rem; transition:border-color .25s; }
.faq details[open] { border-color:rgba(232,48,90,.25); }
.faq summary { list-style:none; cursor:pointer; padding:1.1rem 3rem 1.1rem 1.3rem; position:relative; font-family:'Exo 2',sans-serif; font-weight:700; font-size:.98rem; color:var(--text); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%); font-size:1.4rem; font-weight:400; color:var(--pink); transition:transform .2s; }
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq h3 { font:inherit; margin:0; display:inline; }
.faq .faq-r { padding:0 1.3rem 1.2rem; font-size:.9rem; color:var(--text-d); line-height:1.75; }
.faq .faq-r p { margin:0; }

/* ─── PÁGINAS DE SERVICIO ─── */
.pg-hero { padding:8.5rem 0 3.5rem; }
.migas { font-size:.78rem; color:var(--slate-m); margin-bottom:1.4rem; }
.migas ol { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.migas li + li::before { content:'›'; margin-right:.4rem; color:var(--slate-m); }
.migas a { color:var(--slate-m); text-decoration:none; }
.migas a:hover { color:var(--pink); }
.migas [aria-current] { color:var(--text); }
h1.pg-t { font-family:'Exo 2',sans-serif; font-size:clamp(2rem,4.4vw,3.5rem); font-weight:800; line-height:1.1; color:var(--text); margin-bottom:1.2rem; }
h1.pg-t em { color:var(--pink); font-style:normal; }
.pg-lead { font-size:1.08rem; font-weight:300; color:var(--text-d); line-height:1.75; max-width:680px; margin-bottom:2rem; }
.txt { font-size:.97rem; color:var(--text-d); line-height:1.85; }
.txt p { margin-bottom:1rem; }
.txt strong { color:var(--text); font-weight:600; }
.caja { background:rgba(255,255,255,.62); backdrop-filter:blur(10px); border:1px solid rgba(74,80,112,.1); border-radius:10px; padding:2rem 1.8rem; height:100%; box-shadow:0 2px 16px rgba(30,34,53,.05); }
.caja h2, .caja h3 { font-family:'Exo 2',sans-serif; font-weight:800; font-size:1.15rem; color:var(--text); margin-bottom:1rem; }
.chk { list-style:none; padding:0; margin:0; }
.chk li { position:relative; padding:.35rem 0 .35rem 1.7rem; font-size:.9rem; color:var(--text-d); line-height:1.6; }
.chk li::before { content:''; position:absolute; left:0; top:.72rem; width:.95rem; height:.95rem; border-radius:50%; background:rgba(232,48,90,.12) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8305a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.6 2.5L12 5.5'/%3e%3c/svg%3e") center/70% no-repeat; }
.tec { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.tec li { font-family:'Exo 2',sans-serif; font-weight:600; font-size:.8rem; color:var(--slate); background:rgba(255,255,255,.7); border:1px solid rgba(74,80,112,.14); border-radius:4px; padding:.4rem .8rem; }
.tec-nota { font-size:.78rem; color:var(--slate-m); margin-top:1rem; }
.rel { display:block; height:100%; background:rgba(255,255,255,.62); backdrop-filter:blur(10px); border:1px solid rgba(74,80,112,.1); border-radius:8px; padding:1.3rem 1.3rem; text-decoration:none; transition:transform .25s,border-color .25s,box-shadow .25s; }
.rel:hover { transform:translateY(-4px); border-color:rgba(232,48,90,.25); box-shadow:0 8px 30px rgba(232,48,90,.1); }
.rel i { color:var(--pink); font-size:1.1rem; margin-bottom:.7rem; display:block; }
.rel strong { display:block; font-family:'Exo 2',sans-serif; font-weight:700; font-size:.95rem; color:var(--text); margin-bottom:.3rem; }
.rel span { font-size:.8rem; color:var(--text-d); line-height:1.55; display:block; }
.ft-svc { display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem .2rem; padding-bottom:1.4rem; margin-bottom:1.4rem; border-bottom:1px solid rgba(74,80,112,.1); }
.ft-svc .ft-a { font-size:.76rem; }

/* ─── 404 ─── */
.err-n { font-family:'Exo 2',sans-serif; font-size:clamp(4rem,12vw,8rem); font-weight:800; color:rgba(232,48,90,.25); line-height:1; }
.pg-hero .hero-btns { opacity:1; animation:none; }