/* extras.css — la mitad funcional: servicios, método, torre HUD, casos,
   quiénes somos, FAQ, contacto y pie. Misma piel noche que la película. */

.seccion{padding:110px 24px;max-width:1180px;margin:0 auto}
.seccion>.meta{display:inline-flex;text-align:left;margin-bottom:14px}
.seccion h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.05;margin-bottom:34px}
.seccion h2 .v{color:var(--verde)}

/* ---------- servicios ---------- */
.serv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.serv{background:#0D141F;border:1px solid #ffffff14;border-radius:14px;padding:20px;transition:transform .15s ease,border-color .15s ease}
.serv:hover{transform:translateY(-3px);border-color:#6FB55A55}
.serv .ico{font-size:1.5rem;margin-bottom:10px;display:block}
.serv h3{font-size:1.02rem;font-weight:600;margin-bottom:6px}
.serv p{font-size:.86rem;color:#ffffffa6;line-height:1.5}
.serv.estrella{grid-column:1/-1;background:linear-gradient(120deg,#0E1A12,#0D141F);border-color:#6FB55A40;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.serv.estrella .ico{font-size:2.2rem}
.serv.estrella h3{font-size:1.25rem}

/* ---------- método (los 3 colores) ---------- */
.metodo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metodo .paso-m{background:#0D141F;border:1px solid #ffffff14;border-radius:14px;padding:24px}
.metodo .sem{display:block;width:13px;height:13px;border-radius:50%;margin-bottom:14px}
.metodo .paso-m:nth-child(1) .sem{background:var(--ambar);box-shadow:0 0 0 6px #F3A52A26}
.metodo .paso-m:nth-child(2) .sem{background:var(--azul);box-shadow:0 0 0 6px #6aa0ff26}
.metodo .paso-m:nth-child(3) .sem{background:var(--verde);box-shadow:0 0 0 6px #6FB55A26}
.metodo h3{font-size:1.05rem;font-weight:600;margin-bottom:8px}
.metodo h3 span{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;display:block;margin-bottom:6px}
.metodo p{font-size:.9rem;color:#ffffffa6;line-height:1.55}
@media(max-width:820px){.metodo{grid-template-columns:1fr}.serv.estrella{grid-template-columns:1fr}}

/* ---------- torre de control HUD ---------- */
.hud{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hud-panel{position:relative;background:#050B08;border:1px solid #6FB55A44;border-radius:14px;overflow:hidden;box-shadow:0 0 44px #6FB55A22,inset 0 0 60px #6FB55A0d;
  background-image:linear-gradient(#6FB55A12 1px,transparent 1px),linear-gradient(90deg,#6FB55A12 1px,transparent 1px);background-size:28px 28px}
.hud-top{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #6FB55A33;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:#8fd47f}
.hud-top .live::before{content:"● ";color:var(--verde)}
.hud-kpis{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #6FB55A33}
.hud-kpis div{padding:12px 16px;border-right:1px solid #6FB55A22}
.hud-kpis div:last-child{border-right:none}
.hud-kpis b{display:block;font-size:1.4rem;color:#CFF5C2;font-variant-numeric:tabular-nums}
.hud-kpis span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:#8fd47f99;text-transform:uppercase}
#hudFeed{list-style:none;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:290px}
#hudFeed .inc{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#07110B;border:1px solid #6FB55A26;border-radius:10px;padding:11px 13px}
#hudFeed .st{width:10px;height:10px;border-radius:50%}
#hudFeed [data-st="0"] .st{background:var(--ambar);box-shadow:0 0 10px var(--ambar)}
#hudFeed [data-st="1"] .st{background:var(--azul);box-shadow:0 0 10px var(--azul)}
#hudFeed [data-st="2"] .st{background:var(--verde);box-shadow:0 0 10px var(--verde)}
#hudFeed .what{font-size:.88rem;font-weight:600;color:#E9F7E4}
#hudFeed .who{font-family:var(--mono);font-size:.7rem;color:#8fd47f99}
#hudFeed .badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:#CFF5C2;border:1px solid #6FB55A44;border-radius:999px;padding:.3em .7em}
.hud-scan{position:absolute;left:0;right:0;top:0;height:80px;background:linear-gradient(180deg,#6FB55A14,transparent);animation:escaneo 5s linear infinite;pointer-events:none}
@keyframes escaneo{from{transform:translateY(-80px)}to{transform:translateY(520px)}}
.hud-puntos{list-style:none;display:flex;flex-direction:column;gap:18px}
.hud-puntos li{color:#ffffffa6;line-height:1.55;font-size:.95rem;padding-left:22px;position:relative}
.hud-puntos li::before{content:"▸";position:absolute;left:0;color:var(--verde)}
.hud-puntos b{color:var(--blanco);display:block}
@media(max-width:880px){.hud{grid-template-columns:1fr}}

/* ---------- casos reales ---------- */
.casos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.caso{background:#0D141F;border:1px solid #ffffff14;border-radius:14px;padding:22px}
.caso header{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:#8fa5c4;margin-bottom:12px;text-transform:uppercase}
.caso p{font-size:.92rem;color:#ffffffb3;line-height:1.65}
.caso b{color:var(--blanco);font-variant-numeric:tabular-nums}
@media(max-width:820px){.casos{grid-template-columns:1fr}}

/* ---------- quiénes somos ---------- */
.nos{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.nos-p{color:#ffffffb3;line-height:1.7;font-size:1.02rem;margin-bottom:24px}
.nos-p b{color:var(--blanco)}
.sedes{list-style:none;display:grid;gap:10px}
.sedes li{border-left:3px solid var(--verde);padding:.35em 0 .35em 14px}
.sedes b{display:block}
.sedes span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:#8fa5c4;text-transform:uppercase}
.nos-seight{justify-self:center;filter:drop-shadow(0 18px 36px rgba(0,0,0,.5))}
@media(max-width:820px){.nos{grid-template-columns:1fr}}

/* ---------- faq ---------- */
details{border:1px solid #ffffff14;border-radius:12px;background:#0D141F;margin-bottom:8px}
summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ ";color:var(--verde);font-family:var(--mono)}
details[open] summary::before{content:"− "}
details p{padding:0 20px 16px;color:#ffffffa6;line-height:1.6;max-width:56em}

/* ---------- contacto + pie ---------- */
.contacto-p{text-align:center;color:#ffffffb3;max-width:36em;margin:0 auto 30px;line-height:1.6}
.contacto-p a{color:var(--verde)}
.ok3d{margin:0 auto 12px}
.form-lead{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:0 auto}
.form-lead label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:500}
.form-lead input,.form-lead textarea{font-family:var(--body);font-size:1rem;padding:.8em 1em;border-radius:10px;border:1px solid #ffffff2e;background:#0D141F;color:var(--blanco)}
.form-lead input:focus-visible,.form-lead textarea:focus-visible,.btn-cine:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.form-lead .full{grid-column:1/-1}
.form-lead .rgpd{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:#ffffffa6}
.form-lead .rgpd a{color:var(--verde)}
.btn-cine{font-family:var(--mono);font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:#05080C;background:var(--verde);border:none;border-radius:10px;padding:1em 1.6em;cursor:pointer;transition:transform .15s ease}
.btn-cine:hover{transform:translateY(-2px)}
.form-aviso{text-align:center;margin-top:16px;min-height:1.4em}
.form-aviso a{color:var(--verde)}
.form-aviso.bien{color:var(--verde)}
.form-aviso.mal{color:var(--ambar)}
.pie{border-top:1px solid #ffffff17;padding:26px 24px 40px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem;color:#ffffff73;max-width:1180px;margin:0 auto}
.pie a{color:#ffffffb3}
@media(max-width:640px){.form-lead{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
  .hud-scan{display:none}
  .serv,.btn-cine{transition:none}
}