/* GESTIONA34 — v3 visual concept: dark cinematic, glass, neon, mesh gradients. */

:root{
  --v2-bg:#050706;
  --v2-glass:rgba(255,255,255,.045);
  --v2-glass-border:rgba(255,255,255,.09);
  --v2-text-dim:#8fa39a;
}

body{background:var(--v2-bg)}

/* subtle grain for a filmic, non-flat feel */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Mesh gradient blobs — soft radial glows, not hard-edged discs.
   No overflow:hidden on the wrapper: the gradient itself fades to transparent,
   so nothing needs clipping (clipping a blurred circle is what caused the hard seam). */
.mesh-blobs{position:absolute;inset:0;pointer-events:none;z-index:0}
.mesh-blobs .blob{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle, var(--blob-color,rgba(30,157,95,.35)) 0%, transparent 65%);
}
.mesh-blobs .b1{width:900px;height:900px;top:-380px;left:-300px;--blob-color:rgba(30,157,95,.4)}
.mesh-blobs .b2{width:800px;height:800px;top:-260px;right:-320px;--blob-color:rgba(91,224,163,.22)}
.mesh-blobs .b3{width:700px;height:700px;bottom:-380px;left:20%;--blob-color:rgba(14,92,58,.35)}

/* ===== Header on dark ===== */
header.main{background:rgba(5,7,6,.7);backdrop-filter:blur(16px);border-bottom:1px solid var(--v2-glass-border)}
.mobile-toggle span{background:#fff}
@media (max-width:900px){
  .mobile-menu{
    background:#070908 !important;
    border-bottom:1px solid var(--v2-glass-border) !important;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6) !important;
  }
  nav.primary li{border-bottom:1px solid var(--v2-glass-border) !important}
  .nav-cta .btn-ghost{color:var(--v2-text-dim) !important}
}

/* ===== Hero ===== */
.hero-v2{position:relative;padding:64px 0 48px;color:#fff;isolation:isolate;overflow:hidden}
.hero-photo-bg{position:absolute;inset:0;z-index:0}
.hero-photo-bg img{
  width:100%;height:100%;object-fit:cover;object-position:20% 55%;opacity:.3;
  filter:blur(3px) saturate(1.15);
}
.hero-photo-bg::after{
  content:"";position:absolute;inset:0;
  /* a single soft radial veil, centred where the beam sits, hides its hard edge
     instead of letting it collide with straight-line gradients */
  background:
    radial-gradient(60% 70% at 22% 55%, transparent 0%, var(--v2-bg) 75%),
    linear-gradient(to top, var(--v2-bg) 0%, transparent 22%, transparent 78%, var(--v2-bg) 100%);
}
.hero-v2 .fiber-bg{position:absolute;top:-10%;left:0;width:100%;height:120%;opacity:.4;z-index:1}
.hero-v2 .fiber-bg canvas{display:block;width:100%;height:100%}
.hero-v2 .container{position:relative;z-index:2}
.hero-v3-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:start}
.hero-v2-inner{max-width:640px}

.hero-v2 .kicker{
  font-family:var(--font-mono);color:var(--acento);letter-spacing:3px;font-size:.78rem;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;
  padding:8px 16px;border:1px solid var(--v2-glass-border);border-radius:30px;background:var(--v2-glass);
  backdrop-filter:blur(10px);
}
.hero-v2 .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acento);box-shadow:0 0 10px 2px var(--acento)}

.hero-v2 h1{
  font-family:var(--font-brand);text-transform:uppercase;
  font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.12;letter-spacing:-.3px;
  margin-bottom:30px;overflow-wrap:break-word;
}
.hero-v2 h1 .line2{
  display:block;
  background:linear-gradient(90deg,var(--acento),#1e9d5f 60%,#5be0a3);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(91,224,163,.35));
}
.hero-v2 p.lead{font-size:1.1rem;color:#b9c9c1;max-width:520px;margin-bottom:36px;line-height:1.7;font-weight:300}
.hero-v2 .actions{display:flex;gap:18px;flex-wrap:wrap}
.hero-v2 .btn-xl{padding:15px 30px;font-size:.98rem;border-radius:12px}
.hero-v2 .btn-accent{box-shadow:0 0 0 1px rgba(91,224,163,.4),0 12px 40px -8px rgba(91,224,163,.55)}

/* ===== Hero info card (Atención directa) ===== */
.hero-info-card{
  background:var(--v2-glass);border:1px solid var(--v2-glass-border);border-radius:22px;
  padding:34px;backdrop-filter:blur(20px);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.hero-info-card .phone-big{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:#fff;margin-bottom:8px}
.hero-info-card .dim{color:var(--v2-text-dim);font-size:.88rem;line-height:1.6;font-weight:300}
.hero-info-card .accent-line{color:var(--acento);font-weight:700;font-size:.86rem;margin-top:8px}
.hero-info-card hr{border:none;border-top:1px solid var(--v2-glass-border);margin:26px 0}
.hero-info-card .btn-row{display:flex;gap:10px;margin-top:18px}

@media (max-width:900px){
  .hero-v2{padding:48px 0 64px}
  .hero-v3-grid{grid-template-columns:1fr;gap:32px}
  .hero-v2 h1{font-size:clamp(2rem,8vw,2.6rem)}
  .hero-v2 .actions{margin-bottom:4px}
  .hero-photo-bg img{opacity:.3}
}

/* ===== Dark sections ===== */
.section-dark{position:relative;background:var(--v2-bg);color:#fff;padding:96px 0;overflow:hidden}
.section-eyebrow{
  font-family:var(--font-mono);color:var(--acento);letter-spacing:3px;font-size:.76rem;
  text-transform:uppercase;display:block;margin-bottom:18px;
}
.section-title{
  font-family:var(--font-brand);text-transform:uppercase;font-size:clamp(1.8rem,3.2vw,2.7rem);
  line-height:1.22;letter-spacing:-.3px;max-width:660px;margin-bottom:22px;
}
.section-sub{color:var(--v2-text-dim);max-width:560px;font-size:1.02rem;line-height:1.75;font-weight:300}
.section-head-v2{margin-bottom:52px;position:relative;z-index:2}

/* ===== Editorial services layout: one large visual + a clean list, no icon-box grid ===== */
.svc-layout{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start;position:relative;z-index:2;
}
.svc-visual{
  position:sticky;top:120px;
  aspect-ratio:1;border-radius:28px;
  background:radial-gradient(circle at 35% 30%, rgba(91,224,163,.14), transparent 60%), var(--v2-glass);
  border:1px solid var(--v2-glass-border);
  backdrop-filter:blur(18px);
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;will-change:transform;
}
.svc-visual img{width:56%;filter:drop-shadow(0 0 40px rgba(91,224,163,.3))}

.svc-list{border-top:1px solid var(--v2-glass-border)}
.svc-row{
  display:grid;grid-template-columns:56px 1fr;gap:28px;
  padding:28px 0;border-bottom:1px solid var(--v2-glass-border);
  transition:padding-left .3s ease;
}
.svc-row:hover{padding-left:10px}
.svc-row .idx{font-family:var(--font-mono);color:var(--acento);font-size:.85rem;padding-top:4px}
.svc-row h3{font-size:1.3rem;color:#fff;margin-bottom:10px;font-weight:700;letter-spacing:.2px}
.svc-row p{color:var(--v2-text-dim);font-size:.96rem;line-height:1.7;font-weight:300;max-width:480px}
.svc-row .svc-tag{
  display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:1px;text-transform:uppercase;color:var(--acento);
  border:1px solid rgba(91,224,163,.35);padding:4px 10px;border-radius:20px;
}
@media (max-width:900px){
  .svc-layout{grid-template-columns:1fr;gap:40px}
  .svc-visual{position:static;max-width:280px;margin:0 auto}
}

/* ===== Coverage showcase ===== */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.showcase-visual{
  position:relative;justify-self:center;width:100%;max-width:420px;aspect-ratio:1;
  border-radius:28px;background:var(--v2-glass);border:1px solid var(--v2-glass-border);
  backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;
}
.showcase-visual img{width:70%;filter:drop-shadow(0 0 30px rgba(91,224,163,.25))}
.showcase-photo{overflow:hidden;padding:0}
.showcase-photo img{width:100%;height:100%;object-fit:cover;filter:none;border-radius:27px}
.showcase-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.showcase-stats .item{
  background:var(--v2-glass);border:1px solid var(--v2-glass-border);border-radius:14px;padding:20px;
  backdrop-filter:blur(12px);
}
.showcase-stats .num{font-family:var(--font-brand);color:var(--acento);font-size:1.55rem}
.showcase-stats .label{color:var(--v2-text-dim);font-size:.8rem;margin-top:4px}

/* ===== CTA band ===== */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0e5c3a,#0a2e1e 65%);
  border:1px solid var(--v2-glass-border);
  border-radius:28px;padding:56px 48px;text-align:center;color:#fff;margin:0 24px;
}
.cta-band::before{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,224,163,.4),transparent 70%);
  filter:blur(70px);top:-220px;right:-140px;
}
.cta-band h2{font-family:var(--font-brand);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:16px;position:relative}
.cta-band p{color:rgba(255,255,255,.8);margin-bottom:32px;font-size:1.05rem;position:relative;font-weight:300}
.cta-band .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative}

footer{background:#040504;border-top:1px solid var(--v2-glass-border)}

/* ===== Sitewide dark reskin — applies v2's dark/glass language to every
   inner page (services, company, contact, quotes, legal, client area, EN)
   without rewriting their markup. ===== */
nav.primary a{color:#dfeae3}
nav.primary a:hover{color:var(--acento)}
.nav-cta .btn-ghost{color:var(--v2-text-dim)}
.logo{color:#fff}

.page-hero{background:var(--v2-bg);position:relative;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 100% at 15% 0%, rgba(30,157,95,.16), transparent 60%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-family:var(--font-brand)}
.breadcrumb a{color:var(--acento) !important}

.bg-gris{background:#0c1310 !important}
.section-head .eyebrow{color:var(--acento)}
.section-head h2{color:#fff}
.section-head p{color:var(--v2-text-dim)}

.card{
  background:var(--v2-glass);border:1px solid var(--v2-glass-border);box-shadow:none;backdrop-filter:blur(14px);
  transition:transform .35s cubic-bezier(.16,.84,.44,1),border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(91,224,163,.5);
  background:rgba(255,255,255,.07);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.5),0 0 0 1px rgba(91,224,163,.15);
}
.card h3{color:#fff}
.card p{color:var(--v2-text-dim)}
.card .tag{color:var(--acento)}
.card .icon{transition:transform .35s cubic-bezier(.16,.84,.44,1),filter .35s ease}
.card:hover .icon{transform:scale(1.12) rotate(-4deg);filter:drop-shadow(0 0 14px rgba(91,224,163,.55))}

/* Featured AI cards: give them a permanent accent border + glow so they stand out from the rest of the grid */
.card.card-ai{
  border-color:rgba(91,224,163,.4);
  background:linear-gradient(160deg,rgba(91,224,163,.09),var(--v2-glass) 55%);
  position:relative;
}
.card.card-ai::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(91,224,163,.6),transparent 40%,transparent 60%,rgba(91,224,163,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card.card-ai:hover{border-color:rgba(91,224,163,.7);box-shadow:0 24px 48px -20px rgba(0,0,0,.5),0 0 0 1px rgba(91,224,163,.3),0 0 40px -10px rgba(91,224,163,.35)}
.card .tag-new{
  display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--oscuro);background:var(--acento);padding:4px 10px;border-radius:20px;font-weight:700;
}

.stats .num{color:var(--acento);font-family:var(--font-brand)}
.stats .label{color:var(--v2-text-dim)}

.area-card.tecnica{background:linear-gradient(135deg,#12181c,#1c2126)}

.gate{background:var(--v2-glass);border:1px solid var(--v2-glass-border);backdrop-filter:blur(20px);box-shadow:none}
.gate h3{color:#fff}
.gate p{color:var(--v2-text-dim)}
.gate label{color:#dfeae3}
.gate input,.gate select{background:rgba(255,255,255,.04);border:1px solid var(--v2-glass-border);color:#fff}
.gate input::placeholder{color:#5f7268}
.gate select option{background:#0c1310;color:#fff}
.consent-row label{color:var(--v2-text-dim)}

.support-panel{background:#0c1310;border:1px solid var(--v2-glass-border);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.support-panel a{color:#e7efe9}
.support-panel a:hover{background:rgba(255,255,255,.06)}

.lock-note{background:rgba(255,255,255,.04);color:var(--v2-text-dim)}
.product-row{border-bottom:1px solid var(--v2-glass-border)}
.product-row .name{color:#fff}
.product-row .desc{color:var(--v2-text-dim)}

.legal-content h2{color:#fff}
.legal-content p,.legal-content ul{color:var(--v2-text-dim)}
.legal-content .updated{color:var(--v2-text-dim)}
.legal-content .pending{background:rgba(255,176,32,.15);color:#ffb020}

.g34-panel{background:#0c1310;color:#e7efe9;border:1px solid var(--v2-glass-border)}
.g34-panel h3{color:#fff}
.g34-panel p{color:var(--v2-text-dim)}
.g34-cookie-row{border-bottom:1px solid var(--v2-glass-border)}
.g34-cookie-row .g34-cookie-name{color:#fff}
.g34-cookie-row .g34-cookie-desc{color:var(--v2-text-dim)}
.switch .slider{background:rgba(255,255,255,.15)}

/* Old single-gradient hero (still used by the EN homepage) reskinned to match */
.hero{background:radial-gradient(120% 140% at 15% 0%, rgba(30,157,95,.35), transparent 55%), var(--v2-bg) !important;animation:none !important}
.hero-card{background:var(--v2-glass);border:1px solid var(--v2-glass-border);backdrop-filter:blur(20px)}

@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr}
  .hero-stats-strip{grid-template-columns:1fr 1fr;row-gap:24px}
  .cta-band{margin:0 16px;padding:52px 28px}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .showcase-stats{grid-template-columns:1fr}
}
