/* ============================================================
   GENIIADS · web renovada — estilos compartidos
   Colores y tipografías reales del cliente: lima #C4EF17 sobre
   negro, Marcellus (titulares) + Outfit (texto).
   ============================================================ */
:root{
  --mk-primario:#C4EF17;
  --mk-secundario:#9F9F9F;
  --mk-fondo:#060803;
  --mk-texto:#FFFFFF;
  --lima:#C4EF17;
  --lima-oscura:#8FB30E;
  --gris:#9F9F9F;
  --fondo:#060803;
  --panel:#0D1107;
  --borde:rgba(196,239,23,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--fondo); color:#fff;
  font-family:'Outfit',sans-serif; font-weight:300; line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:'Marcellus',serif;font-weight:400;line-height:1.15}
img{max-width:100%}
a{color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.kicker{
  font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--lima);font-weight:500;margin-bottom:1rem;display:block;
}
.lime{color:var(--lima)}
.dim{color:var(--gris)}
section{padding:96px 0}
.sec-title{font-size:clamp(1.9rem,4.4vw,3rem);max-width:22ch}
.lead{font-size:1.12rem;color:#E8EAD9;max-width:62ch}

/* ---------- botones ---------- */
.btn{
  display:inline-block;padding:.78em 1.7em;border-radius:999px;
  background:var(--lima);color:#0B0F04;text-decoration:none;
  font-weight:600;font-size:.95rem;letter-spacing:.02em;
  box-shadow:0 6px 24px rgba(196,239,23,.28);
  transition:transform .25s, box-shadow .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(196,239,23,.4)}
.btn.ghost{background:transparent;color:var(--lima);border:1px solid rgba(196,239,23,.55);box-shadow:none}
.btn.ghost:hover{background:rgba(196,239,23,.08)}

/* ---------- navbar ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:9000;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:14px 28px;
  background:rgba(6,8,3,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(196,239,23,.14);
}
.nav-logo{height:30px;display:block}
.nav-menu{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-menu a{
  text-decoration:none;font-size:.95rem;font-weight:400;color:#E8EAD9;
  letter-spacing:.04em;transition:color .2s;position:relative;
}
.nav-menu a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--lima);transition:width .25s;
}
.nav-menu a:hover,.nav-menu a.active{color:var(--lima)}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%}
.nav-cta{margin-left:.5rem;padding:.55em 1.3em;font-size:.88rem}
.nav-menu a.nav-cta{color:#0B0F04}
.nav-menu a.nav-cta::after{display:none}
.nav-toggle{
  display:none;background:none;border:1px solid var(--borde);border-radius:10px;
  width:44px;height:40px;cursor:pointer;position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--lima);
  position:absolute;left:11px;transition:transform .25s,opacity .2s;
}
.nav-toggle span{top:19px}
.nav-toggle span::before{top:-6px;left:0}
.nav-toggle span::after{top:6px;left:0}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-menu{
    position:fixed;top:69px;right:0;left:0;flex-direction:column;gap:0;
    background:rgba(6,8,3,.97);border-bottom:1px solid var(--borde);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav-menu.open{max-height:420px}
  .nav-menu li{width:100%;text-align:center;border-top:1px solid rgba(196,239,23,.1)}
  .nav-menu li a{display:block;padding:16px}
  .nav-menu li:last-child{padding:14px}
}

/* ============================================================
   HERO 3D — el logo como 3 bloques lisos que giran 360° con
   el scroll, dentro del anillo abierto del sello original.
   ============================================================ */
.hero3d{position:relative;height:340vh}
.hero3d-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;
  background:
    radial-gradient(ellipse 70% 45% at 50% 88%, rgba(196,239,23,.13), transparent 65%),
    radial-gradient(ellipse 120% 80% at 50% 0%, #0c1106 0%, var(--fondo) 62%);
}
.scene{perspective:1500px;display:grid;place-items:center;width:100%;height:100%}
.turntable{
  position:relative;width:0;height:0;transform-style:preserve-3d;
  /* arranca girado en 3D y asienta a la vista frontal del logo */
  transform:translateY(60px)
    rotateX(calc(12deg * (1 - var(--mk-p,0))))
    rotateY(calc(-60deg * (1 - var(--mk-p,0))));
}
/* anillo abierto del logo, girando con la escena */
.ring{
  position:absolute;left:-280px;top:-280px;width:560px;height:560px;border-radius:50%;
  background:conic-gradient(from 215deg, var(--lima) 0deg 292deg, transparent 292deg 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  transform:translateZ(-30px) scale(calc(.9 + .1*clamp(0, calc(var(--mk-p,0)/0.3), 1)));
  opacity:clamp(0, calc(var(--mk-p,0) / 0.22), 1);
  filter:drop-shadow(0 0 18px rgba(196,239,23,.35));
}
/* suelo */
.ground{
  position:absolute;left:-420px;top:-30px;width:840px;height:840px;border-radius:50%;
  transform:rotateX(90deg) translateZ(-1px);
  background:radial-gradient(closest-side, rgba(196,239,23,.16), rgba(196,239,23,.05) 55%, transparent 72%);
}
/* ---------- barras del logo (cubos que crecen con el scroll) ---------- */
.cub{
  position:absolute;transform-style:preserve-3d;
  transform:translate3d(var(--x),0,var(--z,0px)) scaleY(var(--g,1));
}
.f{position:absolute;backface-visibility:visible}
.f.front,.f.back{width:var(--w);height:var(--h);left:calc(var(--w)/-2);top:calc(var(--h)*-1)}
.f.front{transform:translateZ(calc(var(--d)/2))}
.f.back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.f.left,.f.right{width:var(--d);height:var(--h);left:calc(var(--d)/-2);top:calc(var(--h)*-1)}
.f.left{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.f.right{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.f.top{
  width:var(--w);height:var(--d);left:calc(var(--w)/-2);
  top:calc(var(--h)*-1 - var(--d)/2);
  transform:rotateX(90deg);
  background:#DFFF5C;
}
/* caras lisas: lima plano, el volumen lo da el sombreado por cara.
   Coronas en diagonal (como el logo real): la silueta se recorta con
   clip-path — vértice alto a la izquierda, cae hacia la derecha. */
.f.front,.f.back,.f.left,.f.right{
  background:linear-gradient(180deg,#C4EF17,#A5C610);
  border:1px solid rgba(6,8,3,.3);
}
.f.front{clip-path:polygon(0 var(--slant,20px), 100% 0, 100% 100%, 0 100%)}
.f.back{clip-path:polygon(0 0, 100% var(--slant,20px), 100% 100%, 0 100%)}
.f.left{clip-path:polygon(0 var(--slant,20px), 100% var(--slant,20px), 100% 100%, 0 var(--slant,20px))}
.f.top{display:none}
.f.left{filter:brightness(.62)}
.f.back{filter:brightness(.5)}
.f.right{filter:brightness(.8)}
.f.top{border:1px solid rgba(6,8,3,.3)}

/* grupo de edificios: baja respecto al anillo, como en el logo original */
.city{position:absolute;transform-style:preserve-3d;transform:translateY(150px)}

.hero3d-caption{
  position:absolute;bottom:5vh;left:0;right:0;text-align:center;pointer-events:none;
}
.hero3d-caption img{height:34px;opacity:.9;filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.hero3d-caption p{
  margin-top:.7rem;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gris);
  animation:hintFloat 2.4s ease-in-out infinite;
}
@keyframes hintFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (max-width:760px){
  .scene{transform:scale(.52)}
  .hero3d{height:300vh}
}

/* ---------- iconos y tarjetas-enlace ---------- */
[id]{scroll-margin-top:92px}
a.serv-card{text-decoration:none;color:inherit;display:block}
.serv-card{text-align:center}
.icon{width:30px;height:30px;margin:0 auto .9rem;color:var(--lima);display:block}
.icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sec-cta{text-align:center;margin-top:2.8rem}

/* ---------- por qué elegirnos con imagen ---------- */
.why-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center;margin-top:3rem}
@media (max-width:860px){.why-layout{grid-template-columns:1fr}}
.why-media{text-align:center}
.why-media img{
  width:min(330px,70vw);animation:floaty 5s ease-in-out infinite;
  filter:drop-shadow(0 0 44px rgba(196,239,23,.28));
}
.why-layout .why-grid{margin-top:0}
.why{display:flex;gap:.9rem;align-items:flex-start;text-align:left}
.why .icon{width:26px;height:26px;margin:.2rem 0 0;flex-shrink:0}

/* ---------- email grande en contacto ---------- */
.mail-big{
  font-family:'Marcellus',serif;font-size:clamp(1.35rem,3vw,2.1rem);color:var(--lima);
  text-decoration:none;border-bottom:1px solid rgba(196,239,23,.4);transition:border-color .25s;
}
.mail-big:hover{border-color:var(--lima)}

/* ---------- secciones home ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}
.about-badge{width:min(300px,70vw);margin:0 auto;display:block;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}

.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
@media (max-width:960px){.serv-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.serv-grid{grid-template-columns:1fr}}
.serv-card{
  border:1px solid var(--borde);border-radius:20px;padding:2rem 1.7rem;
  background:linear-gradient(165deg, rgba(196,239,23,.07), rgba(6,8,3,.4) 60%);
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s;
}
.serv-card:hover{
  transform:translateY(-8px);border-color:rgba(196,239,23,.55);
  box-shadow:0 22px 50px rgba(196,239,23,.12);
}
.serv-card .num{
  font-family:'Marcellus',serif;font-size:.95rem;color:var(--lima);
  border:1px solid var(--borde);border-radius:999px;padding:.25em .9em;display:inline-block;margin-bottom:1.1rem;
}
.serv-card h3{font-size:1.3rem;color:#fff;margin-bottom:.6rem}
.serv-card p{font-size:.98rem;color:#E8EAD9}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
@media (max-width:960px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.why-grid{grid-template-columns:1fr}}
.why{
  padding:1.6rem 1.5rem;border-radius:16px;background:var(--panel);
  border-left:3px solid var(--lima);transition:transform .3s;
}
.why:hover{transform:translateX(6px)}
.why h3{font-size:1.12rem;margin-bottom:.4rem;color:var(--lima)}
.why p{font-size:.95rem;color:#E8EAD9}

.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:3rem}
@media (max-width:820px){.testi-grid{grid-template-columns:1fr}}
.testi{
  border:1px solid var(--borde);border-radius:20px;padding:2rem 1.8rem;
  background:linear-gradient(150deg, rgba(196,239,23,.05), transparent 55%);
}
.testi .stars{color:var(--lima);letter-spacing:.25em;margin-bottom:1rem;font-size:1.05rem}
.testi blockquote{font-family:'Marcellus',serif;font-size:1.08rem;line-height:1.6;color:#F4F6E8}
.testi figcaption{margin-top:1.2rem;font-size:.9rem}
.testi figcaption b{color:var(--lima);font-weight:600}
.testi figcaption span{color:var(--gris)}

.cta-band{
  text-align:center;padding:110px 24px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 110%, rgba(196,239,23,.16), transparent 65%),
    var(--panel);
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
}
.cta-band h2{font-size:clamp(2rem,5vw,3.4rem);max-width:18ch;margin:0 auto 1.6rem}
.cta-band .btn{font-size:1.08rem;padding:.95em 2.3em}

/* ---------- páginas interiores ---------- */
.page-head{
  padding:180px 0 70px;text-align:center;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(196,239,23,.14), transparent 60%),
    var(--fondo);
}
.page-head img{width:min(180px,44vw);margin-bottom:1.6rem;animation:floaty 5s ease-in-out infinite}
.page-head h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.page-head .lead{margin:1.1rem auto 0}

.sgroup{margin-bottom:4.5rem}
.sgroup > h2{
  font-size:clamp(1.5rem,3vw,2.1rem);color:var(--lima);margin-bottom:1.6rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--borde);
}
.sgroup .serv-grid{margin-top:0}
.tl{display:flex;flex-direction:column;gap:1.4rem;max-width:720px;margin-top:1.6rem}
.tl-item{display:grid;grid-template-columns:78px 1fr;gap:1.3rem;align-items:start}
.tl-item b{
  font-family:'Marcellus',serif;color:var(--lima);font-size:1.35rem;font-weight:400;
  border:1px solid var(--borde);border-radius:12px;text-align:center;padding:.35em 0;
  background:rgba(196,239,23,.06);
}
.tl-item h3{font-size:1.15rem;margin-bottom:.3rem}
.tl-item p{font-size:.97rem;color:#E8EAD9}

.faq-list{max-width:820px;margin:3rem auto 0;display:flex;flex-direction:column;gap:1.1rem}
details.faq{
  border:1px solid var(--borde);border-radius:16px;background:var(--panel);
  padding:1.3rem 1.5rem;transition:border-color .25s;
}
details.faq[open]{border-color:rgba(196,239,23,.55)}
details.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  font-family:'Marcellus',serif;font-size:1.15rem;color:#fff;align-items:center;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+";color:var(--lima);font-size:1.6rem;line-height:1;transition:transform .25s;
}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{margin-top:.9rem;color:#E8EAD9;font-size:1rem}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-info h3{color:var(--lima);font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;margin:1.6rem 0 .5rem}
.contact-info p{color:#E8EAD9}
.form{display:flex;flex-direction:column;gap:1.1rem}
.form label{
  display:block;margin-bottom:.45rem;
  font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
}
.form input,.form textarea{
  display:block;width:100%;
  background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  padding:.9em 1.1em;color:#fff;font-family:'Outfit',sans-serif;font-size:1rem;
  transition:border-color .2s;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--lima)}
.form textarea{min-height:130px;resize:vertical}
.map{border:0;width:100%;height:300px;border-radius:16px;filter:grayscale(1) invert(.92) hue-rotate(60deg) saturate(2.2);opacity:.9;margin-top:1rem}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--borde);padding:70px 0 34px;
  background:linear-gradient(180deg,var(--fondo),#0B0F05);
}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr;text-align:center}}
.foot-grid img{height:30px;margin-bottom:1rem}
.foot-grid h4{color:var(--lima);font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.55rem}
.foot-grid a{text-decoration:none;color:#E8EAD9;font-size:.95rem}
.foot-grid a:hover{color:var(--lima)}
.foot-grid p{color:#E8EAD9;font-size:.95rem}
.legal{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(196,239,23,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--gris);
}

/* ---------- accesibilidad movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  .hero3d{height:100vh}
  .turntable{transform:translateY(60px) !important}
  .cub{--g:1 !important}
  .ring{opacity:1 !important;transform:translateZ(-30px) !important}
  .about-badge,.page-head img,.hero3d-caption p,.why-media img{animation:none !important}
  section{padding:64px 0}
}

/* ---------- hero ya visto (sessionStorage): logo montado, sin animación ----------
   La animación del hero solo se reproduce la primera vez; al volver al
   inicio desde otra página se muestra el logo ya construido. */
.hero3d--seen{height:100vh !important}
.hero3d--seen .hero3d-stage{position:relative}
.hero3d--seen .turntable{transform:translateY(60px)}
.hero3d--seen .cub{--g:1 !important}
.hero3d--seen .ring{opacity:1;transform:translateZ(-30px)}
.hero3d--seen .hero3d-caption p{display:none}

/* ============================================================
   SERVICIOS — cada apartado con una interacción distinta
   ============================================================ */
/* 1 · IA: tarjetas que DESVELAN la info al pasar el cursor */
.rvl{position:relative;overflow:hidden;min-height:230px;cursor:default}
.rvl-front{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:.7rem;padding:1.5rem;transition:opacity .3s, transform .4s cubic-bezier(.22,1,.36,1);
}
.rvl-front .icon{margin:0}
.rvl-front h3{font-size:1.25rem}
.rvl-back{
  position:absolute;inset:0;display:grid;place-content:center;padding:1.6rem;
  background:linear-gradient(160deg, rgba(196,239,23,.16), rgba(6,8,3,.92) 70%);
  transform:translateY(101%);transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.rvl-back p{font-size:.98rem;color:#EFF2DF;text-align:center;line-height:1.6}
.rvl:hover .rvl-back,.rvl:focus-within .rvl-back{transform:none}
.rvl:hover .rvl-front,.rvl:focus-within .rvl-front{opacity:0;transform:translateY(-16px)}
.rvl:hover{border-color:rgba(196,239,23,.55)}
@media (hover:none){
  .rvl{min-height:0}
  .rvl-front{position:static;padding:0 0 .9rem}
  .rvl-back{position:static;transform:none;background:none;padding:0}
  .rvl-back p{text-align:center}
}
/* 2 · Publicidad: CORTE DIAGONAL que revela la descripción al pasar el cursor */
.dcut{position:relative;min-height:230px;overflow:hidden;cursor:default}
.dcut .xp-head{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:.7rem;padding:1.5rem;
  transition:opacity .25s;
}
.dcut:hover .xp-head,.dcut:focus-within .xp-head{opacity:0}
.dcut .xp-head .icon{margin:0}
.dcut .xp-head h3{font-size:1.2rem}
.dcut-panel{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.6rem;
  padding:1.6rem;text-align:center;
  background:linear-gradient(160deg, rgba(196,239,23,.18), rgba(6,8,3,.94) 65%);
  clip-path:polygon(0 0, 0 0, 0 0, 0 0);
  transition:clip-path .55s cubic-bezier(.76,0,.24,1);
}
.dcut-panel h4{color:var(--lima);font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.dcut-panel p{font-size:.98rem;color:#EFF2DF;line-height:1.6}
.dcut-panel h4,.dcut-panel p{opacity:0;transform:translateY(10px);transition:opacity .3s .2s, transform .3s .2s}
.dcut:hover .dcut-panel,.dcut:focus-within .dcut-panel{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}
.dcut:hover .dcut-panel h4,.dcut:hover .dcut-panel p,
.dcut:focus-within .dcut-panel h4,.dcut:focus-within .dcut-panel p{opacity:1;transform:none}
.dcut:hover{border-color:rgba(196,239,23,.55)}
@media (hover:none){
  .dcut{min-height:0}
  .dcut .xp-head{position:static;padding:0 0 .9rem}
  .dcut-panel{position:static;clip-path:none;background:none;padding:0}
  .dcut-panel h4{display:none}
  .dcut-panel h4,.dcut-panel p{opacity:1;transform:none}
}
/* 3 · Redes: tarjetas que se DAN LA VUELTA al pasar el cursor */
.flip{position:relative;min-height:230px;perspective:900px}
.flip-inner{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.1,.2,1);
}
.flip:hover .flip-inner,.flip:focus-within .flip-inner{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.7rem;
  padding:1.5rem;text-align:center;
  border:1px solid var(--borde);border-radius:20px;
  background:linear-gradient(165deg, rgba(196,239,23,.07), rgba(6,8,3,.4) 60%);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.flip-face .icon{margin:0}
.flip-face h3{font-size:1.2rem}
.flip-back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg, rgba(196,239,23,.16), rgba(6,8,3,.92) 70%);
}
.flip-back p{font-size:.98rem;color:#EFF2DF;line-height:1.6}
@media (hover:none){
  .flip{min-height:0}
  .flip-inner{position:static;transform:none;display:grid;gap:1rem}
  .flip-face{position:static;transform:none}
  .flip-back{transform:none}
}
/* 4 · Webs: fichas que se ABREN al hacer clic (acordeón de tarjetas) */
.xcard{
  border:1px solid var(--borde);border-radius:20px;padding:1.5rem 1.5rem;
  background:linear-gradient(165deg, rgba(196,239,23,.07), rgba(6,8,3,.4) 60%);
  transition:border-color .3s;
}
.xcard[open]{border-color:rgba(196,239,23,.55)}
.xcard summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:1rem;text-align:left;
}
.xcard summary::-webkit-details-marker{display:none}
.xcard summary .icon{margin:0;flex-shrink:0}
.xcard summary h3{font-size:1.15rem;color:#fff}
.xcard .plus{margin-left:auto;color:var(--lima);font-size:1.6rem;line-height:1;transition:transform .3s;font-family:'Outfit',sans-serif}
.xcard[open] .plus{transform:rotate(45deg)}
.xcard p{margin-top:1rem;color:#E8EAD9;font-size:.97rem;text-align:left}
/* que solo crezca la ficha abierta, no toda la fila */
.sgroup#webs .serv-grid{align-items:start}

/* ---------- explosión de iconos desde el círculo ----------
   Cada icono nace en el centro del anillo (e=0) y sale disparado
   a su posición final (e=1) mientras avanza el scroll. */
.boom{
  position:absolute;left:50%;top:47%;width:var(--s,30px);height:var(--s,30px);
  color:var(--lima);pointer-events:none;
  --e:clamp(0, calc((var(--mk-p,0) - var(--oi,.5)) / var(--dur,.4)), 1);
  opacity:clamp(0, calc(var(--e)*3), 1);
  transform:translate(-50%,-50%)
    translate(calc(var(--e)*var(--tx,0px)), calc(var(--e)*var(--ty,0px)))
    rotate(calc(var(--e)*var(--rot,0deg)))
    scale(calc(.35 + .65*var(--e)));
  filter:drop-shadow(0 0 8px rgba(196,239,23,.45));
}
.boom svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero3d--seen .boom{
  opacity:.9;
  transform:translate(-50%,-50%) translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg)) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .boom{opacity:.9 !important;transform:translate(-50%,-50%) translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg)) scale(1) !important}
}