/* =========================================================
   Anubis AI Agency – CSS principal (limpio y funcional)
   ========================================================= */

/* 1) Variables (tema claro por defecto) */
:root{
  /* UI global */
  --primary:#0b0b0f;
  --secondary:#333a4a;
  --accent:#f2f2f2;
  --background:#ffffff;
  --border-color:#e9e9ee;

  /* Tipografía base */
  font-family:"Helvetica Neue", Arial, sans-serif;

  /* Hero (claro) */
  --hero-bg-start:#f6f8fc;
  --hero-bg-end:#eef1f6;
  --hero-bg-soft:rgba(0,0,0,.04);
  --hero-vignette:rgba(0,0,0,.06);

  --hero-text:#0b0b0f;
  --hero-muted:#333a4a;

  /* Partículas (claro) */
  --particle-color:rgba(10,14,20,.75);
  --link-color:rgba(10,14,20,.18);
  --particle-opacity:.30;

  /* Botones */
  --btn-primary-bg:#0b0b0f;  --btn-primary-fg:#ffffff;
  --btn-secondary-bg:#ffffff; --btn-secondary-fg:#0b0b0f;

  /* Líneas tecnológicas */
  --tech-opacity: .28; /* se ajusta por tema */
}

/* 2) Tema oscuro – activa añadiendo body.dark-theme */
body.dark-theme{
  --primary:#ffffff;
  --secondary:#c9ceda;
  --accent:#1e1e1e;
  --background:#0b0b0f;
  --border-color:rgba(255,255,255,.15);

  /* Hero (oscuro) */
  --hero-bg-start:#0e1116;
  --hero-bg-end:#0b0e13;
  --hero-bg-soft:rgba(255,255,255,.03);
  --hero-vignette:rgba(255,255,255,.05);

  --hero-text:#ffffff;
  --hero-muted:#c9ceda;

  /* Partículas (oscuro) */
  --particle-color:rgba(255,255,255,.88);
  --link-color:rgba(255,255,255,.22);
  --particle-opacity:.32;

  /* Botones */
  --btn-primary-bg:#ffffff;   --btn-primary-fg:#0b0b0f;
  --btn-secondary-bg:#12151b; --btn-secondary-fg:#ffffff;

  /* Líneas tecnológicas en oscuro (un poco más visibles) */
  --tech-opacity:.38;
}

/* 3) Base & layout generales */
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--background) !important; /* fuerza el color de fondo por tema */
  color:var(--primary);
}

/* Header */
header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in oklab, var(--background) 95%, transparent);
  border-bottom:1px solid var(--border-color);
  box-shadow:0 2px 4px rgba(0,0,0,.04);
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem;
}
header img{ height:40px; }
nav a{
  margin-left:1.5rem; text-decoration:none; color:var(--primary); font-weight:bold;
}
nav a:hover{ color:var(--secondary); }

/* Separadores */
hr{ border:none; border-top:1px solid color-mix(in oklab, var(--primary) 10%, transparent); margin:4rem 0; }

/* 4) HERO (full-bleed, neutro, constelaciones) */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:92vh; padding:clamp(64px,8vh,120px) 16px; text-align:center;
  background:
    radial-gradient(60rem 60rem at 50% 45%, var(--hero-bg-soft) 0%, transparent 60%),
    linear-gradient(120deg, var(--hero-bg-start), var(--hero-bg-end));
}
.hero.fullbleed{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.hero::after{
  content:""; position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:radial-gradient(70rem 70rem at 50% 50%, var(--hero-vignette) 0%, transparent 65%);
}
/* Canvas */
#hero-particles{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:var(--particle-opacity); }
/* Contenido por encima */
.hero > *:not(#hero-particles){ position:relative; z-index:1; }

/* Tipografía hero */
.hero h1{ color:var(--hero-text); font-size:clamp(2rem,3.2vw,3.2rem); margin:.5rem 0 .75rem; }
.hero p { color:var(--hero-muted); font-size:clamp(1rem,1.1vw,1.25rem); margin:0 0 2rem; font-weight:600; }

/* Logos (negro día, blanco noche) */
.logo-dark{ display:none; }
body.dark-theme .logo-light{ display:none; }
body.dark-theme .logo-dark{ display:block; }
.hero .logo-light,.hero .logo-dark{ height:120px; width:auto; margin-bottom:1rem; }

/* Botones del hero */
.buttons{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
.buttons a{
  display:inline-block; padding:.85rem 1.4rem; border-radius:999px;
  font-weight:700; text-decoration:none; transition:transform .15s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  border:1px solid transparent;
}
.buttons a.primary{
  background:var(--btn-primary-bg); color:var(--btn-primary-fg);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.buttons a.secondary{
  background:var(--btn-secondary-bg); color:var(--btn-secondary-fg);
  border-color:rgba(0,0,0,.06);
}
body.dark-theme .buttons a.secondary{ border-color:rgba(255,255,255,.12); }
.buttons a:hover{ transform:translateY(-2px); }
.buttons a.primary:hover{ box-shadow:0 10px 24px rgba(0,0,0,.18); }
.buttons a.secondary:hover{ box-shadow:0 8px 20px rgba(0,0,0,.12); }

/* 5) Secciones y componentes */
section{ padding:4rem 2rem; max-width:1200px; margin:0 auto; background:transparent; }
h2{ text-align:center; margin-bottom:2rem; color:var(--primary); }
p.section-text{ max-width:800px; margin:0 auto 2rem; text-align:center; color:var(--secondary); }

/* Quiénes somos (aparición) */
#quienes .about-line{ opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s; }
#quienes .about-line.visible{ opacity:1; transform:translateY(0); }

/* Servicios */
.servicios-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.serv-card{
  border:1px solid var(--border-color); border-radius:10px; padding:1.25rem;
  background:var(--background); transition:transform .3s, box-shadow .3s;
}
.serv-card:hover{ transform:translateY(-5px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.serv-card h3{ color:var(--primary); margin:.25rem 0 .5rem; }
.serv-card p{ color:var(--secondary); margin:0; }

/* Sectores */
.sectores-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:stretch; }
.sector{
  background:var(--background); border:1px solid var(--border-color); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  opacity:0; transform:translateY(30px); transition:opacity .6s, transform .6s;
}
.sector.visible{ opacity:1; transform:translateY(0); }
.sector:hover{ transform:translateY(-5px) scale(1.03); box-shadow:0 8px 16px rgba(0,0,0,.1); }
.sector .thumb{ width:100%; aspect-ratio:1/1; overflow:hidden; background:#fafafa; }
.sector .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sector h3{ margin:0; padding:1rem; text-align:center; font-size:1.05rem; color:var(--primary); }

/* Proceso */
.proceso-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.paso{
  text-align:center; padding:1.25rem; border:1px solid var(--border-color); border-radius:10px;
  background:var(--background); opacity:0; transition:opacity .6s, transform .6s;
}
.paso:nth-child(odd){ transform:translateX(-30px); }
.paso:nth-child(even){ transform:translateX(30px); }
.paso.visible{ opacity:1; transform:translateX(0); cursor:pointer; }
.paso.visible:hover{ transform:translateY(-5px) scale(1.03); box-shadow:0 6px 16px rgba(0,0,0,.1); }
.paso span{
  display:inline-block; background:var(--primary); color:#fff; width:40px; height:40px; line-height:40px;
  border-radius:50%; margin-bottom:.5rem; font-weight:bold;
}
.paso p{ color:var(--secondary); }
body.dark-theme .paso span{ background:var(--background); color:var(--primary); border:1px solid var(--primary); }

/* FAQ */
details{
  max-width:700px; margin:1rem auto; border:1px solid var(--border-color);
  border-radius:10px; padding:1rem; background:var(--background);
}
summary{ cursor:pointer; font-weight:bold; color:var(--primary); }
details p{ margin-top:.5rem; color:var(--secondary); }

/* Formulario */
form{ max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
input,textarea{
  padding:.85rem; border:1px solid var(--border-color); border-radius:8px;
  background:var(--accent); font-size:1rem; color:var(--primary);
}
button{
  padding:1rem; border:none; border-radius:30px; background:var(--primary);
  color:var(--background); font-weight:bold; cursor:pointer;
}
button:hover{ background:#222; }

/* Footer */
footer{
  background:var(--accent); padding:2rem; border-top:1px solid var(--border-color);
  display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between;
}
footer div{ flex:1 1 200px; }
footer h3{ margin:.25rem 0 .75rem; color:var(--primary); }
footer a{ display:block; margin-bottom:.25rem; color:#555; text-decoration:none; }
footer a:hover{ color:#000; }

/* 6) Blog */
.post-list-wrap{ max-width:800px; margin:0 auto; }
.post-list{ padding-left:1.25rem; margin:0 0 2rem 0; list-style:disc; }
.post-list li{ margin:.6rem 0; }
.post-list a{ color:var(--primary); text-decoration:none; border-bottom:1px dashed rgba(0,0,0,.2); }
.post-list a:hover{ color:#000; border-bottom-color:#000; background-color:rgba(0,0,0,0.04); }
.post-meta{ display:block; font-size:.9rem; color:var(--secondary); }

/* 7) Toggle de tema */
.theme-toggle{
  margin-left:1rem; background:none; border:none; cursor:pointer;
  font-size:1.2rem; padding:.5rem; line-height:1; color:var(--primary);
  transition:transform .2s ease;
}
.theme-toggle:hover{ transform:scale(1.2); }

/* 8) Responsive */
@media (max-width:768px){
  nav a{ margin-left:.9rem; font-size:.95rem; }
  .hero h1{ font-size:2rem; }
  .hero p { font-size:1rem; }
}

/* =========================
   QUIÉNES SOMOS – Carrusel
   ========================= */
.about { padding-top: 4rem; padding-bottom: 4rem; }
.about-slider{ position: relative; max-width: 980px; margin: 0 auto; }
.about-viewport{
  overflow: hidden;
  border:1px solid var(--border-color);
  border-radius:18px;
  background:var(--background);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.about-track{ display:flex; align-items: stretch; transition: transform .6s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.about-card{ min-width:100%; box-sizing:border-box; padding: clamp(1.25rem, 2.4vw, 2rem); display:flex; flex-direction:column; gap:1rem; }
.about-card h3{ margin:.25rem 0; color:var(--primary); font-size:clamp(1.25rem,1.6vw,1.5rem); }
.about-card p{ color:var(--secondary); margin:.25rem 0; line-height:1.6; }

/* Avatares y presentación conjunta */
.founder-photos{ display:flex; gap:.75rem; align-items:center; margin-bottom:.5rem; }
.avatar{ width:88px; height:88px; object-fit:cover; border-radius:50%; border:3px solid var(--background); box-shadow:0 6px 16px rgba(0,0,0,.12); }

/* Botones navegación */
.about-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--border-color);
  background:var(--background);
  color:var(--primary);
  display:grid; place-items:center;
  cursor:pointer; z-index:2;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.about-nav:hover{ transform:translateY(-50%) scale(1.06); box-shadow:0 10px 24px rgba(0,0,0,.14); }
.about-nav.prev{ left:-18px; } .about-nav.next{ right:-18px; }
@media (max-width: 768px){ .about-nav.prev{ left:6px; } .about-nav.next{ right:6px; } }

/* Puntos/paginación */
.about-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.about-dots button{ width:9px; height:9px; border-radius:50%; background:rgba(0,0,0,.18); border:none; cursor:pointer; }
body.dark-theme .about-dots button{ background:rgba(255,255,255,.28); }
.about-dots button[aria-selected="true"]{ transform:scale(1.2); background:var(--primary); }

/* Accesibilidad */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Alineaciones / layouts founders */
.about-card.centered .about-body, .about-card.centered p { text-align: center; margin-left: auto; margin-right: auto; max-width: 62ch; }
.about-card.justified p { text-align: justify; text-justify: inter-word; }
.about-card.founders h3 { margin-top: .25rem; }
.founder-layout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; }
.founder-text { display: flex; flex-direction: column; gap: 0.75rem; text-align: left; }
.founder-photo { display: flex; justify-content: flex-end; }
.avatar-large { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 4px solid var(--background); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
@media (max-width: 768px){
  .founder-layout { grid-template-columns: 1fr; text-align: center; }
  .founder-photo { justify-content: center; margin-top: 1rem; }
}
/* Lectura cómoda */
.about-card p { max-width: 68ch; }

/* Calendly CTA */
.calendly-cta{ margin-top: .5rem; font-size: 1.05rem; }
.link-calendly{ font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link-calendly:hover{ opacity: .85; }

/* =========================
   MÉTRICAS / IMPACTO
   ========================= */
.metrics { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.metrics-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.metric-card{
  position: relative;
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: clamp(1rem, 2.2vw, 2rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.metric-main{ margin: 0 auto clamp(1.25rem, 3vw, 2rem); text-align: center; }

.metric-icon{
  width: 80px; height: 80px; margin: 0 auto 1rem;
  display:flex; justify-content:center; align-items:center;
  background: rgba(0, 102, 255, .08);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%; overflow: hidden;
}
.metric-icon img{ max-width: 95%; height:auto; display:block; }

.metric-value{
  font-size: clamp(2.2rem, 6.5vw, 3.5rem);
  font-weight: 800; letter-spacing: .5px;
  color: #5ce1e6;
  text-shadow: 0 0 6px rgba(59,130,246,.65), 0 0 18px rgba(59,130,246,.35);
}
body.dark-theme .metric-value{
  color: #5ce1e6;
  text-shadow: 0 0 8px rgba(109,168,255,.75), 0 0 22px rgba(109,168,255,.45);
}

.metric-desc{ color: var(--secondary); max-width: 72ch; margin: .75rem auto 0; line-height: 1.65; }

/* Grid inferior */
.metric-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.25rem); }
.metric-grid .metric-card .metric-value{ font-size: clamp(1.6rem, 4.8vw, 2.4rem); }
@media (max-width: 900px){ .metric-grid{ grid-template-columns: 1fr; } }

.metric-card:hover{
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(59,130,246,.18), 0 0 24px rgba(59,130,246,.12) inset;
  transition: box-shadow .25s ease;
}

/* =========================
   FONDO – Líneas tecnológicas estáticas
   ========================= */
/* Capa fija con líneas: permanece en ambos modos; solo varía la opacidad via --tech-opacity */
body::before{
  content:"";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background-repeat:no-repeat;
  background-position: top center;
  background-size: cover;
  opacity: var(--tech-opacity);
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'>\
    <defs>\
      <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
        <stop offset='0'  stop-color='%235ce1e6' stop-opacity='1'/>\
        <stop offset='1'  stop-color='%235ce1e6' stop-opacity='0.85'/>\
      </linearGradient>\
      <filter id='glow' x='-50%%' y='-50%%' width='200%%' height='200%%'>\
        <feGaussianBlur stdDeviation='3' result='b'/>\
        <feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge>\
      </filter>\
    </defs>\
    <rect width='1600' height='900' fill='none'/>\
    <g stroke='url(%23g)' stroke-width='2' fill='none' filter='url(%23glow)'>\
      <path d='M-20 140 L380 300 L820 120 L1220 260 L1620 80'/>\
      <path d='M-20 420 L320 520 L860 360 L1320 500 L1620 430'/>\
      <path d='M-20 760 L580 640 L1100 740 L1620 620'/>\
      <path d='M1600 0 L1200 180 L840 40 L500 160 L0 0'/>\
    </g>\
    <g fill='%235ce1e6' filter='url(%23glow)'>\
      <circle cx='380' cy='300' r='2.2'/><circle cx='820' cy='120' r='2.2'/>\
      <circle cx='1220' cy='260' r='2.2'/><circle cx='320' cy='520' r='2.2'/>\
      <circle cx='860' cy='360' r='2.2'/><circle cx='1320' cy='500' r='2.2'/>\
      <circle cx='580' cy='640' r='2.2'/><circle cx='1100' cy='740' r='2.2'/>\
    </g>\
  </svg>");
}

/* ========================================================= */
/* ========= QUIÉNES SOMOS – Título con acento y glow ========= */
:root{
  --brand-electric: #5ce1e6; /* azul eléctrico (mismo en ambos modos) */
}

/* Título más grande */
#quienes .section-title{
  font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: .2px;
  margin-bottom: 1.6rem;
}

/* “somos” en azul eléctrico con brillo */
#quienes .section-title .brand-accent{
  position: relative;
  color: var(--brand-electric);
  text-shadow:
    0 0 10px rgba(92,225,230,.75),
    0 0 26px rgba(92,225,230,.45),
    0 0 42px rgba(92,225,230,.25);
}

/* (Opcional) halo bajo la palabra para dar más presencia */
#quienes .section-title .brand-accent::after{
  content:"";
  position:absolute; left:-2px; right:-2px; bottom:-0.22em; height:0.22em;
  background: linear-gradient(90deg,
              rgba(92,225,230,0), rgba(92,225,230,.6), rgba(92,225,230,0));
  filter: blur(3px);
  opacity:.9;
  pointer-events:none;
}

/* ========= QUIÉNES SOMOS – Tarjeta con sombra brillante ========= */
/* Aplica el glow al viewport del carrusel (la “tarjeta” grande) */
#quienes .about-viewport{
  border-color: color-mix(in oklab, var(--brand-electric) 40%, transparent);
  box-shadow:
    0 12px 34px rgba(0,0,0,.12),
    0 0 0 1px rgba(92,225,230,.45),
    0 0 34px rgba(92,225,230,.28);
  background: var(--background);
}

/* Un pelín más de intensidad al pasar el ratón (desktop) */
@media (hover:hover){
  #quienes .about-viewport:hover{
    box-shadow:
      0 14px 38px rgba(0,0,0,.14),
      0 0 0 1px rgba(92,225,230,.55),
      0 0 44px rgba(92,225,230,.35);
  }
}
/* ===== SERVICIOS – Título neón y tarjetas renovadas ===== */
:root{ --brand-electric:#5ce1e6; } /* por si no existiera */

#servicios .section-title{
  font-size: clamp(2.4rem, 4.8vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: .2px;
  margin-bottom: 1.2rem;
}

/* “ofrecemos” en azul eléctrico con glow */
#servicios .section-title .brand-accent{
  color: var(--brand-electric);
  text-shadow:
    0 0 10px rgba(92,225,230,.75),
    0 0 26px rgba(92,225,230,.45),
    0 0 42px rgba(92,225,230,.25);
}

/* Grid moderno */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: 1.4rem;
}
@media (max-width: 980px){ .services-grid{ grid-template-columns: 1fr; } }

/* Tarjetas con glow azul eléctrico */
.service-card{
  position:relative;
  background: var(--background);
  border-radius: 16px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid color-mix(in oklab, var(--brand-electric) 28%, var(--border-color));
  box-shadow:
    0 10px 28px rgba(0,0,0,.10),
    0 0 0 1px rgba(92,225,230,.35),
    0 0 32px rgba(92,225,230,.22);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover:hover){
  .service-card:hover{
    transform: translateY(-6px);
    box-shadow:
      0 14px 36px rgba(0,0,0,.14),
      0 0 0 1px rgba(92,225,230,.5),
      0 0 44px rgba(92,225,230,.32);
  }
}

/* Icono en píldora con halo */
.service-icon{
  width:58px; height:58px;
  display:grid; place-items:center;
  border-radius:999px;
  margin-bottom:.6rem;
  background: rgba(92,225,230,.10);
  border:1px solid rgba(92,225,230,.45);
  box-shadow:
    0 0 18px rgba(92,225,230,.18) inset,
    0 0 16px rgba(92,225,230,.24);
  font-size: 1.35rem;
}

/* Tipos dentro de la tarjeta */
.service-card h3{
  margin:.25rem 0 .35rem;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--primary);
}
.service-lead{
  margin:0 0 .5rem;
  color: var(--secondary);
  font-weight: 600;
}
.service-bullets{
  margin:0; padding:0; list-style:none;
}
.service-bullets li{
  position:relative; padding-left:1.15rem;
  color: var(--secondary);
  margin:.35rem 0;
}
.service-bullets li::before{
  content:"";
  position:absolute; left:.2rem; top:.6em;
  width:6px; height:6px; border-radius:50%;
  background: var(--brand-electric);
  box-shadow: 0 0 10px rgba(92,225,230,.6);
}

/* Entrada suave por scroll (usar con el JS opcional) */
.service-card{ opacity:0; transform:translateY(16px); }
.service-card.is-visible{ opacity:1; transform:translateY(0); }

/* ===== SECTORES – Título neón y tarjetas pro ===== */
:root{ --brand-electric:#5ce1e6; }

#sectores .section-title{
  font-size: clamp(2.3rem, 4.6vw, 3.1rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}
#sectores .section-title .brand-accent{
  color: var(--brand-electric);
  text-shadow:
    0 0 10px rgba(92,225,230,.75),
    0 0 26px rgba(92,225,230,.45),
    0 0 42px rgba(92,225,230,.25);
}

/* Grid responsivo */
.sectors-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: 1.2rem;
}
@media (max-width: 1100px){ .sectors-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px){ .sectors-grid{ grid-template-columns: 1fr; } }

/* Tarjeta con borde-gradiente + glow */
.sector-card{
  position: relative;
  border-radius: 16px;
  padding: clamp(1rem, 2vw, 1.4rem);
  background:
    linear-gradient(var(--background), var(--background)) padding-box,
    linear-gradient(180deg, rgba(92,225,230,.55), rgba(92,225,230,.18)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    0 0 24px rgba(92,225,230,.18);
  transform: translateY(0) rotateX(0) rotateY(0);
  transition: transform .18s ease, box-shadow .25s ease;
  will-change: transform;
}
@media (hover:hover){
  .sector-card:hover{
    transform: translateY(-6px);
    box-shadow:
      0 14px 34px rgba(0,0,0,.14),
      0 0 34px rgba(92,225,230,.26);
  }
}

/* Icono en anillo neón */
.sector-icon{
  width:60px; height:60px; border-radius:999px; margin-bottom:.65rem;
  display:grid; place-items:center; overflow:hidden;
  background: rgba(92,225,230,.08);
  border:1px solid rgba(92,225,230,.45);
  box-shadow: 0 0 16px rgba(92,225,230,.22), inset 0 0 18px rgba(92,225,230,.16);
}
.sector-icon img{ width:70%; height:70%; object-fit:contain; }

/* Tipos y microcopy */
.sector-card h3{
  margin:.25rem 0 .35rem;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--primary);
}
.sector-lead{
  margin:0 0 .6rem;
  color: var(--secondary);
  font-weight: 600;
}

/* Chips/etiquetas */
.sector-tags{
  margin:.2rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.4rem;
}
.sector-tags li{
  padding:.32rem .6rem; border-radius:999px; font-size:.85rem;
  background: color-mix(in oklab, var(--brand-electric) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-electric) 45%, transparent);
  color: var(--primary);
}

/* Aparición por scroll */
.sector-card{ opacity:0; transform: translateY(14px); }
.sector-card.is-visible{ opacity:1; transform: translateY(0); }

/* ===== SECTORES – Icono centrado y más grande ===== */

/* Centra todo el contenido de la tarjeta */
#sectores .sector-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Icono más grande, centrado y con halo */
#sectores .sector-icon{
  width: 112px;
  height: 112px;
  margin: 0 auto .85rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(92,225,230,.10);
  border: 1px solid rgba(92,225,230,.50);
  box-shadow:
    0 0 20px rgba(92,225,230,.22),
    inset 0 0 20px rgba(92,225,230,.18);
}

/* El gráfico dentro del icono ocupa más área */
#sectores .sector-icon img{
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* Título y texto centrados */
#sectores .sector-card h3{ text-align:center; }
#sectores .sector-lead{ text-align:center; }

/* Las chips/tags también centradas */
#sectores .sector-tags{ justify-content:center; }

/* Responsive: ajusta tamaño del icono en móviles */
@media (max-width: 720px){
  #sectores .sector-icon{ width: 96px; height: 96px; }
}

/* ===== BENEFICIOS – Título neón y tarjetas pro ===== */
:root{ --brand-electric:#5ce1e6; }

#beneficios .section-title{
  font-size: clamp(2.4rem, 4.8vw, 3.2rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}
#beneficios .section-title .brand-accent{
  color: var(--brand-electric);
  text-shadow:
    0 0 10px rgba(92,225,230,.75),
    0 0 26px rgba(92,225,230,.45),
    0 0 42px rgba(92,225,230,.25);
}

/* Grid responsivo */
.benefits-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: 1.4rem;
}
@media (max-width: 1100px){ .benefits-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .benefits-grid{ grid-template-columns: 1fr; } }

/* Tarjetas con borde-gradiente + glow coherente */
.benefit-card{
  position: relative;
  border-radius: 16px;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  background:
    linear-gradient(var(--background), var(--background)) padding-box,
    linear-gradient(180deg, rgba(92,225,230,.55), rgba(92,225,230,.18)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    0 0 24px rgba(92,225,230,.18);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .25s ease;
}
@media (hover:hover){
  .benefit-card:hover{
    transform: translateY(-6px);
    box-shadow:
      0 14px 34px rgba(0,0,0,.14),
      0 0 34px rgba(92,225,230,.26);
  }
}

/* Icono en anillo neón centrado */
.benefit-icon{
  width:60px; height:60px; border-radius:999px; margin-bottom:.7rem;
  display:grid; place-items:center;
  background: rgba(92,225,230,.10);
  border:1px solid rgba(92,225,230,.48);
  box-shadow: 0 0 16px rgba(92,225,230,.22), inset 0 0 18px rgba(92,225,230,.16);
  font-size: 1.35rem;
}

/* Tipos y bullets cortos */
.benefit-card h3{
  margin:.25rem 0 .35rem;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--primary);
}
.benefit-bullets{
  margin:.4rem 0 0;
  padding:0;
  list-style:none;
}
.benefit-bullets li{
  position:relative;
  padding-left:1.15rem;
  color: var(--secondary);
  margin:.35rem 0;
}
.benefit-bullets li::before{
  content:"";
  position:absolute; left:.2rem; top:.6em;
  width:6px; height:6px; border-radius:50%;
  background: var(--brand-electric);
  box-shadow: 0 0 10px rgba(92,225,230,.6);
}

/* Aparición por scroll (utiliza el JS opcional) */
.benefit-card{ opacity:0; transform: translateY(14px); }
.benefit-card.is-visible{ opacity:1; transform: translateY(0); }

/* ===== PROCESO – Tema neón coherente con el sitio ===== */
:root { --brand-electric:#5ce1e6; }

/* Título con acento y glow */
#proceso .section-title{
  font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: .2px;
  margin-bottom: 1rem;
}
#proceso .section-title .brand-accent{
  color: var(--brand-electric);
  text-shadow:
    0 0 10px rgba(92,225,230,.75),
    0 0 26px rgba(92,225,230,.45),
    0 0 42px rgba(92,225,230,.25);
}

/* Grid con “conector” tenue bajo las tarjetas (desactivado en móvil) */
#proceso .proceso-grid{
  position: relative;
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
@media (min-width: 900px){
  #proceso .proceso-grid::before{
    content:"";
    position:absolute; left:4%; right:4%; top:52%;
    height:2px; pointer-events:none; z-index:0;
    background: linear-gradient(90deg,
      rgba(92,225,230,0) 0%,
      rgba(92,225,230,.35) 20%,
      rgba(92,225,230,.45) 50%,
      rgba(92,225,230,.35) 80%,
      rgba(92,225,230,0) 100%);
    filter: blur(.3px);
  }
}

/* Tarjetas: borde-gradiente + glow (mismo patrón que Servicios/Sectores) */
#proceso .paso{
  position: relative;
  z-index:1;                              /* por encima del conector */
  background:
    linear-gradient(var(--background), var(--background)) padding-box,
    linear-gradient(180deg, rgba(92,225,230,.55), rgba(92,225,230,.18)) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    0 0 24px rgba(92,225,230,.18);
  transition: transform .18s ease, box-shadow .25s ease;
  opacity: 0; transform: translateY(16px);
}
#proceso .paso.is-visible{ opacity:1; transform: translateY(0); }

@media (hover:hover){
  #proceso .paso:hover{
    transform: translateY(-6px);
    box-shadow:
      0 14px 34px rgba(0,0,0,.14),
      0 0 34px rgba(92,225,230,.26);
  }
}

/* Anula las traslaciones izquierda/derecha antiguas */
#proceso .paso:nth-child(odd),
#proceso .paso:nth-child(even){ transform: translateY(16px); }

/* Badge numérico: anillo neón */
#proceso .paso > span{
  display:grid; place-items:center;
  width:48px; height:48px; margin: 0 auto .75rem;
  font-weight:800; line-height:1;
  color: var(--primary);
  background: transparent;
  border-radius:50%;
  border:1px solid rgba(92,225,230,.55);
  box-shadow:
    inset 0 0 4px rgba(92,225,230,.18),
    0 0 16px rgba(92,225,230,.28);
}

/* Tipos */
#proceso .paso h3{
  margin:.25rem 0 .4rem;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--primary);
  text-align:center;
}
#proceso .paso p{
  color: var(--secondary);
  text-align:center;
}

/* Responsive: más aire entre tarjetas en móvil */
@media (max-width: 900px){
  #proceso .proceso-grid{ gap: 1rem; }
}

/* ===== CASOS DE ÉXITO – Estética neón con logos circulares ===== */
:root{ --brand-electric:#5ce1e6; }

#casos .section-title{
  font-size: clamp(2.4rem, 4.8vw, 3.3rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}
#casos .section-title .brand-accent{
  color: var(--brand-electric);
  text-shadow:
    0 0 10px rgba(92,225,230,.75),
    0 0 26px rgba(92,225,230,.45),
    0 0 42px rgba(92,225,230,.25);
}

/* Grid 2 columnas (1 en móvil) */
.cases-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-top: 1.2rem;
}
@media (max-width: 900px){ .cases-grid{ grid-template-columns: 1fr; } }

/* Tarjeta con borde-gradiente + glow */
.case-card{
  position:relative;
  border-radius: 18px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  background:
    linear-gradient(var(--background), var(--background)) padding-box,
    linear-gradient(180deg, rgba(92,225,230,.55), rgba(92,225,230,.18)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 12px 28px rgba(0,0,0,.12),
    0 0 32px rgba(92,225,230,.20);
  transition: transform .18s ease, box-shadow .25s ease;
  text-align:center;
}
@media (hover:hover){
  .case-card:hover{
    transform: translateY(-6px);
    box-shadow:
      0 16px 36px rgba(0,0,0,.16),
      0 0 40px rgba(92,225,230,.28);
  }
}

/* Logo circular grande con halo */
.case-logo{
  width: 140px; height: 140px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  overflow:hidden;
  background: #0a0a0a; /* se cubre con la imagen */
  border:1px solid rgba(92,225,230,.55);
  box-shadow:
    0 0 24px rgba(92,225,230,.28),
    inset 0 0 24px rgba(92,225,230,.14);
  display:grid; place-items:center;
}
.case-logo img{
  width: 92%; height: 92%; object-fit: contain; display:block;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.25));
}

/* Título de caso */
.case-card h3{
  margin:.4rem 0 .6rem;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--primary);
}

/* KPIs con chips */
.case-metrics{
  margin: 0; padding: 0; list-style: none;
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
}
.case-metrics li{
  padding:.45rem .7rem; border-radius:999px;
  background: color-mix(in oklab, var(--brand-electric) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-electric) 46%, transparent);
  color: var(--primary);
  font-weight: 600;
  letter-spacing: .2px;
}
.case-metrics .kpi{
  color: var(--brand-electric);
  text-shadow: 0 0 10px rgba(92,225,230,.6);
  font-weight: 800;
}

/* ===== CASOS – descripción y bullets neón ===== */
#casos .case-metrics{ margin-bottom: .6rem; }

#casos .case-desc{
  color: var(--secondary);
  max-width: 56ch;
  margin: .2rem auto .6rem;
  line-height: 1.6;
}

#casos .case-highlights{
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem .9rem;
  max-width: 720px;
  text-align: left;
}
@media (max-width: 700px){
  #casos .case-highlights{ grid-template-columns: 1fr; }
}

#casos .case-highlights li{
  position: relative;
  padding-left: 1.05rem;
  color: var(--secondary);
}
#casos .case-highlights li::before{
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-electric);
  box-shadow: 0 0 10px rgba(92,225,230,.6);
}
/* ===== FAQ – Título neón y acordeones con glow ===== */
:root{ --brand-electric:#5ce1e6; }

#faq .section-title{
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}
#faq .section-title .brand-accent{
  color: var(--brand-electric);
  text-shadow:
    0 0 10px rgba(92,225,230,.75),
    0 0 26px rgba(92,225,230,.45),
    0 0 42px rgba(92,225,230,.25);
}

/* Contenedor general (opcional, por si quieres algo más ancho) */
#faq .faq-wrap{ max-width: 860px; margin: 0 auto; }

/* Acordeones con borde-gradiente + glow coherente */
#faq details{
  max-width: 860px;
  margin: .75rem auto;
  border-radius: 14px;
  padding: .2rem;                      /* padding externo para el borde gradiente */
  background:
    linear-gradient(var(--background), var(--background)) padding-box,
    linear-gradient(180deg, rgba(92,225,230,.55), rgba(92,225,230,.18)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 8px 22px rgba(0,0,0,.10),
    0 0 20px rgba(92,225,230,.16);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .18s ease;
}
@media (hover:hover){
  #faq details:hover{
    transform: translateY(-2px);
    box-shadow:
      0 12px 28px rgba(0,0,0,.14),
      0 0 28px rgba(92,225,230,.24);
  }
}

/* Summary con icono chevron personalizado */
#faq summary{
  list-style: none;                   /* Firefox */
  cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .75rem;
  padding: .95rem 1.1rem;
  color: var(--primary);
  font-weight: 700;
}
#faq summary::-webkit-details-marker{ display:none; }
#faq summary::before{
  content:"";
  width: 20px; height: 20px; border-radius: 6px;
  box-shadow: inset 0 0 10px rgba(92,225,230,.25), 0 0 12px rgba(92,225,230,.25);
  border:1px solid rgba(92,225,230,.45);
  background: radial-gradient(circle at 50% 50%, rgba(92,225,230,.6), rgba(92,225,230,0) 60%);
}
#faq summary::after{
  content:"";
  width: 12px; height: 12px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
#faq details[open] summary::after{ transform: rotate(-135deg); }

/* Contenido de la respuesta */
#faq details > *:not(summary){ padding: 0 1.1rem 1rem; }
#faq details p{ color: var(--secondary); line-height: 1.65; margin: .35rem 0 0; }

/* Foco accesible (teclado) */
#faq summary:focus-visible{
  outline: 2px solid var(--brand-electric);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(92,225,230,.35) inset, 0 0 18px rgba(92,225,230,.35);
  border-radius: 10px;
}

/* Estado abierto: un pelín más de glow */
#faq details[open]{
  box-shadow:
    0 12px 30px rgba(0,0,0,.16),
    0 0 32px rgba(92,225,230,.26);
}

/* Modo oscuro ya queda bien gracias a las variables globales */

/* ===== CONTACTO – Tarjeta neón, inputs con glow y CTA ===== */
:root{ --brand-electric:#5ce1e6; }

#contacto .section-title{
  font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1.12;
  margin-bottom: .8rem;
}
#contacto .section-title .brand-accent{
  color: var(--brand-electric);
  text-shadow: 0 0 10px rgba(92,225,230,.75), 0 0 26px rgba(92,225,230,.45), 0 0 42px rgba(92,225,230,.25);
}

/* Layout */
.contact-wrap{
  display:grid;
  grid-template-columns: minmax(0, 760px) minmax(260px, 1fr);
  gap: clamp(1rem, 2.8vw, 2rem);
  align-items:start;
}
@media (max-width: 980px){
  .contact-wrap{ grid-template-columns: 1fr; }
}

/* Tarjeta form con borde-gradiente + glow */
.contact-card{
  position:relative;
  background:
    linear-gradient(var(--background), var(--background)) padding-box,
    linear-gradient(180deg, rgba(92,225,230,.55), rgba(92,225,230,.18)) border-box;
  border:1px solid transparent;
  border-radius:18px;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 0 28px rgba(92,225,230,.18);
}
.contact-card .hp{ position:absolute; left:-9999px; opacity:0; }

/* Grid de campos */
.contact-card .grid{
  display:grid; gap: .9rem 1rem;
  grid-template-columns: 1fr 1fr;
}
.contact-card .grid .full{ grid-column: 1 / -1; }
@media (max-width: 720px){
  .contact-card .grid{ grid-template-columns: 1fr; }
}

/* Etiquetas y campos */
.contact-card label > span{
  display:block; font-weight:700; margin: 0 0 .35rem; color: var(--primary);
}
.contact-card input, .contact-card textarea{
  width:100%;
  padding:.9rem 1rem;
  border-radius:12px;
  border:1px solid var(--border-color);
  background: var(--accent);
  color: var(--primary);
  transition: border-color .2s ease, box-shadow .25s ease, background .25s ease;
}
body.dark-theme .contact-card input, body.dark-theme .contact-card textarea{
  background: color-mix(in oklab, var(--background) 6%, transparent);
}

/* Foco glow */
.contact-card input:focus, .contact-card textarea:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--brand-electric) 55%, transparent);
  box-shadow:
    0 0 0 1px rgba(92,225,230,.5),
    0 0 20px rgba(92,225,230,.25);
}

/* Errores */
.contact-card .error{
  display:block;
  height: 0.9rem;
  font-size:.85rem;
  color: #ff6464;
  padding-top:.2rem;
}

/* Footer del form */
.form-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap: .75rem; margin-top: .6rem;
}
@media (max-width: 600px){ .form-footer{ flex-direction:column; align-items:stretch; } }

.consent{ display:flex; align-items:center; gap:.5rem; color:var(--secondary); }
.consent input{ width:18px; height:18px; }

/* Botón primario con glow */
.btn-primary{
  appearance:none; border:0; cursor:pointer;
  padding:.95rem 1.4rem; border-radius:999px;
  font-weight:800; letter-spacing:.2px;
  background: var(--primary); color: var(--background);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .25s ease, opacity .2s ease;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.btn-primary.is-loading{ opacity:.7; pointer-events:none; }

/* Enlace/CTA secundario en píldora */
.alt-cta{ text-align:center; margin: .9rem 0 0; color: var(--secondary); }
.link-pill{
  display:inline-block; margin-left:.35rem; padding:.45rem .75rem; border-radius:999px;
  border:1px solid rgba(92,225,230,.5);
  background: color-mix(in oklab, var(--brand-electric) 12%, transparent);
  color: var(--primary); text-decoration:none; font-weight:700;
  box-shadow: 0 0 18px rgba(92,225,230,.18);
}
.link-pill:hover{ box-shadow: 0 0 24px rgba(92,225,230,.28); }

/* Lateral */
.contact-side .mini-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.9rem; }
.contact-side .badge{
  padding:.35rem .6rem; border-radius:999px;
  border:1px solid rgba(92,225,230,.45);
  background: color-mix(in oklab, var(--brand-electric) 10%, transparent);
  font-size:.85rem; color: var(--primary); font-weight:600;
}
.contact-side .contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.contact-side a{ color: var(--primary); text-decoration: none; border-bottom:1px dashed color-mix(in oklab, var(--brand-electric) 40%, transparent); }
.contact-side a:hover{ text-decoration: underline; }

/* Toasts */
.toast{ display:none; margin-top:.8rem; padding:.75rem 1rem; border-radius:12px; font-weight:700; }
.toast.success{ background: rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.35); color:#27c567; }
.toast.error{ background: rgba(255,100,100,.12); border:1px solid rgba(255,100,100,.35); color:#ff6464; }
.toast.show{ display:block; }

/* Pequeños ajustes del título */
#contacto .section-title span:first-child{ font-weight:700; }

/* CONTACTO: centrar y agrandar el formulario, ocultar toasts */
#contacto .contact-wrap{
  max-width: 1300px;        /* “medio grande” */
  margin: 0 auto;          /* centrado */
  display: block;          /* sin columna lateral */
}

#contacto .contact-card{
  width: 100%;
  margin: 0 auto;
}

#contacto .contact-side{ display:none !important; }  /* por si aún existe el aside */

#contacto .form-footer{ justify-content: center; gap: .9rem; }
#contacto .btn-primary{ min-width: 160px; }

/* Inputs un pelín más grandes y cómodos */
#contacto .contact-card input,
#contacto .contact-card textarea{
  padding: 1rem 1.05rem;
  font-size: 1rem;
}

/* Oculta cualquier toast (éxito/error) */
#contacto .toast{ display:none !important; }

/* ===== Fix Contacto: columnas, separación y contención del glow ===== */

/* Evita desbordes por padding/border en cualquier elemento */
*, *::before, *::after { box-sizing: border-box; }

/* Contenedor centrado y más ancho (sin lateral) */
#contacto .contact-wrap{
  max-width: 920px;       /* medio-grande */
  margin: 0 auto;
  display: block;
}

/* Tarjeta con más aire interior para que el glow no toque bordes */
#contacto .contact-card{
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: 20px;
}

/* Grid 2 columnas bien medidas y con hueco real entre ellas */
#contacto .contact-card .grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: clamp(1.1rem, 2.2vw, 1.5rem);
  row-gap: 1rem;
  align-items: start;
}
#contacto .contact-card .grid > label{ width: 100%; }

/* En móvil pasa a una columna */
@media (max-width: 720px){
  #contacto .contact-card .grid{ grid-template-columns: 1fr; }
}

/* Inputs/textarea dentro de su caja, sin desbordes */
#contacto .contact-card input,
#contacto .contact-card textarea{
  max-width: 100%;
  width: 100%;
  padding: 1rem 1.05rem;
  font-size: 1rem;
}

/* Foco con glow más contenido (no parece que se salga de la tarjeta) */
#contacto .contact-card input:focus,
#contacto .contact-card textarea:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--brand-electric) 55%, transparent);
  /* Glow más corto */
  box-shadow:
    0 0 0 1px rgba(92,225,230,.45),
    0 0 14px rgba(92,225,230,.20);
}

/* Footer centrado */
#contacto .form-footer{ justify-content:center; gap: .9rem; }
#contacto .btn-primary{ min-width: 168px; }

/* Por si el aside siguiera en el HTML, lo ocultamos. */
#contacto .contact-side{ display:none !important; }

/* Calendly CTA (debajo del formulario) */
:root { --brand-electric:#5ce1e6; }

.calendly-cta{
  margin: 1.2rem auto 0;
  text-align: center;
  max-width: 920px;
}
.calendly-cta .cta-text{
  color: var(--secondary);
  margin: 0 0 .6rem;
}
.btn-calendly{
  display:inline-block;
  padding: .85rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  color: var(--primary);
  background: color-mix(in oklab, var(--brand-electric) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-electric) 50%, transparent);
  box-shadow:
    0 8px 22px rgba(0,0,0,.12),
    0 0 22px rgba(92,225,230,.22);
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.btn-calendly:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(0,0,0,.16),
    0 0 30px rgba(92,225,230,.32);
}
/* ===== DEMO VOZ (modo simple: solo bloque informativo) ===== */
:root { --brand-electric:#5ce1e6; }

#demo-voz.simple .section-title{
  font-size: clamp(2.3rem, 4.8vw, 3.3rem);
  line-height: 1.12;
  margin-bottom: .8rem;
}
#demo-voz.simple .section-title .brand-accent{
  color: var(--brand-electric);
  text-shadow: 0 0 10px rgba(92,225,230,.75), 0 0 26px rgba(92,225,230,.45), 0 0 42px rgba(92,225,230,.25);
}

/* Card centrada y ancha */
#demo-voz.simple .voice-info{
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 18px;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  background:
    linear-gradient(var(--background), var(--background)) padding-box,
    linear-gradient(180deg, rgba(92,225,230,.55), rgba(92,225,230,.18)) border-box;
  border:1px solid transparent;
  box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 0 28px rgba(92,225,230,.18);
  transition: transform .18s ease, box-shadow .25s ease;
}
@media (hover:hover){
  #demo-voz.simple .voice-info:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0,0,0,.16), 0 0 36px rgba(92,225,230,.26);
  }
}

#demo-voz.simple .voice-icon{
  width:60px; height:60px; border-radius:999px; margin-bottom:.7rem;
  display:grid; place-items:center; font-size:1.35rem;
  background: rgba(92,225,230,.10);
  border:1px solid rgba(92,225,230,.48);
  box-shadow: 0 0 16px rgba(92,225,230,.22), inset 0 0 18px rgba(92,225,230,.16);
}
#demo-voz.simple h3{ margin:.25rem 0 .45rem; }
#demo-voz.simple .voice-bullets{
  margin:.3rem 0 .6rem; padding:0; list-style:none; display:grid; gap:.45rem;
}
#demo-voz.simple .voice-bullets li{
  position:relative; padding-left:1.1rem; color:var(--secondary);
}
#demo-voz.simple .voice-bullets li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%;
  background: var(--brand-electric);
  box-shadow: 0 0 10px rgba(92,225,230,.6);
}
#demo-voz.simple .voice-note{ color:var(--secondary); }

/* --- Reset por si quedó algún estilo de “dock” anterior (opcional, seguro) --- */
.convai-docked,
.convai-panel,
.convai-panel-fixed{
  position: inherit !important;
  inset: auto !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  width:auto !important; height:auto !important;
  transform:none !important; box-shadow:none !important;
}

/* ===== Footer ===== */
:root{
  --bg:#223140;     /* un pelín más oscuro para contraste */
  --fg:#94a3b8;
  --fg-strong:#e5eef7;
  --accent:#06b6d4;
  --line:#475569;
}

.footer{background:var(--bg); color:var(--fg);}
.footer a{color:var(--fg); text-decoration:none; transition:color .25s ease;}
.footer a:hover{color:var(--accent);}

.footer__container{max-width:1200px; margin:0 auto; padding:4rem 2rem 2rem;}
.footer__grid{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;           /* móvil: 1 col */
}

/* tablet: 2 columnas */
@media (min-width:640px){
  .footer__grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}

/* desktop: 4 columnas con la marca ligeramente mayor */
@media (min-width:1024px){
  .footer__grid{grid-template-columns:1.2fr 1fr 1fr 1fr;}
  /* si quieres todas iguales, usa: repeat(4, 1fr); */
}

.footer__brand p{line-height:1.7; margin:0; max-width:44ch;}

.footer__title{
  color:var(--fg-strong);
  margin:0 0 .75rem;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.2px;
}

.footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.footer__contact .icon{
  display:inline-flex;
  width:18px;
  height:18px;
  margin-right:.5rem;
  color:var(--accent);
}

.footer__contact a{
  display:inline-flex;
  align-items:center;
  line-height:1.4;
}

.footer__static{
  display:flex;
  align-items:center;
}

.footer__static .icon{
  margin-right:.5rem;
  color:var(--accent);
}

.footer__bottom{
  border-top:1px solid var(--line);
  margin-top:2.5rem;
  padding-top:2rem;
  text-align:center;
}

.footer__claim{
  margin:0 0 .75rem;
  font-size:.96rem;
  color:var(--fg-strong);
}

.footer__desc{
  margin:0 auto 1.25rem;
  font-size:.92rem;
  line-height:1.6;
  max-width:70ch;
}

.footer__legal{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.9rem;
}
/* (mantén todo lo anterior sin tocar) */

/* --- NUEVO: redes sociales reutiliza el estilo de contacto --- */
.footer__social .icon{
  display:inline-flex;
  width:18px;
  height:18px;
  margin-right:.5rem;
  /* color por defecto igual que contacto: */
  color:var(--accent);
}
.footer__social a{
  display:inline-flex;
  align-items:center;
  line-height:1.4;
}

/* Si quieres igualar los anchos en desktop, cambia (opcional):
@media (min-width:1024px){
  .footer__grid{grid-template-columns:repeat(4,1fr);}
}
*/