/* ????????????????????????????????????????????????????????
   AQUAGENIA TECNOLOGÍA — Main Stylesheet
   ???????????????????????????????????????????????????????? */

/* ?? RESET & BASE ???????????????????????????????????????? */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Work Sans', sans-serif;
  background: #060f1a;
  color: #d4e8f5;
  overflow-x: hidden;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }

/* ?? CSS VARIABLES ??????????????????????????????????????? */
:root {
  --blue-deep:   #0d3a5c;
  --blue-mid:    #166c9f;
  --blue-bright: #1a8fcb;
  --cyan:        #00c1f2;
  --yellow:      #ffdd00;
  --bg:          #060f1a;
  --bg-2:        #0a1828;
  --bg-3:        #0f2035;
  --bg-card:     rgba(13, 32, 58, 0.65);
  --text:        #d4e8f5;
  --text-dim:    #6b9ab8;
  --border:      rgba(0, 193, 242, 0.12);

  /* ?? Spacing ?? */
  --section-pad:     6rem 3rem;
  --section-pad-sm:  4rem 1.5rem;

  /* ?? Radius ?? */
  --radius-sm:  .35rem;
  --radius-md:  .5rem;
  --radius-lg:  .75rem;
  --radius-xl:  1.25rem;
  --radius-pill: 999px;
}

/* ?? MATERIAL SYMBOLS ???????????????????????????????????  */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ?? TYPOGRAPHY ?????????????????????????????????????????  */
.font-bc { font-family: 'Barlow Condensed', sans-serif; }
.font-ws { font-family: 'Work Sans', sans-serif; }

/* ?? GRID TEXTURE ???????????????????????????????????????  */
.grid-tex {
  background-image:
    linear-gradient(rgba(0,193,242,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,193,242,.035) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* ?? ORBS ???????????????????????????????????????????????  */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-28px,22px) scale(1.05); }
  66%      { transform: translate(18px,-16px) scale(0.96); }
}
.orb-a { width:580px;height:580px; background:radial-gradient(circle,rgba(22,108,159,.42),transparent 70%); top:-120px;right:-100px; animation:drift 14s ease-in-out infinite; }
.orb-b { width:340px;height:340px; background:radial-gradient(circle,rgba(0,193,242,.2),transparent 70%);  top:280px;left:8%;   animation:drift 10s ease-in-out infinite -5s; }
.orb-c { width:260px;height:260px; background:radial-gradient(circle,rgba(255,221,0,.06),transparent 70%); bottom:12%;right:22%; animation:drift 12s ease-in-out infinite -3s; }

/* ?? PARTICLES ??????????????????????????????????????????  */
.pt {
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 35%, #e0f8ff, #00c1f2 50%, transparent);
  box-shadow:0 0 8px 2px rgba(0,193,242,.38);
  animation:twink var(--d,5s) ease-in-out infinite var(--dl,0s);
  opacity:var(--op,.7);
}
@keyframes twink {
  0%,100% { opacity:calc(var(--op,.7)*.4); transform:scale(.9); }
  50%      { opacity:var(--op,.7); transform:scale(1.1); }
}

/* ?? GLASS CARD ?????????????????????????????????????????  */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 48px -12px rgba(0,0,0,.65),
    0 0 48px rgba(0,193,242,.04);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.glass:hover {
  border-color: rgba(0,193,242,.22);
  background: rgba(13,32,58,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 28px 56px -12px rgba(0,0,0,.7),
    0 0 60px rgba(0,193,242,.09);
}

/* ????????????????????????????????????????????????????????
   NAV
   ???????????????????????????????????????????????????????? */
#nav {
  position:fixed; top:0; width:100%; z-index:50;
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 3rem;
  background:rgba(6,15,26,.85);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid rgba(0,193,242,.08);
}
@media(max-width:767px){ .nav-inner{ padding:1rem 1.5rem; } }

.nav-logo img { height:2.4rem; width:auto; object-fit:contain; }

.nav-links {
  display:flex; align-items:center; gap:2.5rem;
}
.nav-links a {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); transition:color .2s;
}
.nav-links a:hover,
.nav-links a.active { color:var(--cyan); }

.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  color:var(--cyan); padding:.25rem;
}

@media(max-width:767px) {
  .nav-links, .nav-cta-wrap { display:none; }
  .nav-toggle { display:flex; align-items:center; justify-content:center; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; top:64px; left:0; right:0;
    background:rgba(6,15,26,.98); backdrop-filter:blur(24px);
    padding:1.5rem 2rem 2rem; gap:1.2rem;
    border-bottom:1px solid var(--border); z-index:49;
  }
  .nav-links.open .nav-cta-wrap { display:flex; }
}

/* ????????????????????????????????????????????????????????
   BOTONES — sistema unificado
   ????????????????????????????????????????????????????????
   .btn-p   = primario (fondo degradado)
   .btn-s   = secundario (ghost/transparente)
   .btn-sm  = variante pequeña (nav, CTAs compactos)
   ???????????????????????????????????????????????????????? */
.btn-p,
.btn-s {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border-radius: var(--radius-md);
  transition:filter .2s, transform .15s, background .2s, border-color .2s;
  cursor:pointer; border:none;
  /* tamaño estándar */
  padding:1rem 2.4rem; font-size:1rem;
}
.btn-p:active, .btn-s:active { transform:scale(.97); }

/* primario */
.btn-p {
  background:linear-gradient(135deg, var(--blue-mid), var(--cyan));
  color:#fff;
  box-shadow:0 0 28px rgba(0,193,242,.35);
}
.btn-p:hover { filter:brightness(1.12); }

/* secundario */
.btn-s {
  background:transparent; color:#e8f4fc;
  border:1px solid rgba(232,244,252,.2);
}
.btn-s:hover { background:rgba(255,255,255,.05); border-color:rgba(232,244,252,.35); }

/* variante pequeña */
.btn-sm {
  padding:.6rem 1.5rem;
  font-size:.88rem; letter-spacing:.06em;
}
.btn-sm.btn-p { box-shadow:0 0 20px rgba(0,193,242,.3); }

/* ?? Alias semántico para el CTA del nav ?? */
.nav-cta { /* hereda de .btn-p.btn-sm */ }

/* ????????????????????????????????????????????????????????
   ETIQUETAS / CHIPS — sistema unificado
   ????????????????????????????????????????????????????????
   .badge        = etiqueta de sección (pill grande)
   .tag          = etiqueta pequeña (tech, producto)
   .chip         = chip horizontal (alianzas)
   ???????????????????????????????????????????????????????? */

/* BADGE — reemplaza .pill */
.badge {
  display:inline-block;
  padding:.22rem .9rem;
  border-radius: var(--radius-pill);
  background:rgba(0,193,242,.07); border:1px solid rgba(0,193,242,.2);
  color:var(--cyan);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:.9rem;
}
/* mantener .pill como alias */
.pill { /* hereda de .badge */ display:inline-block;
  padding:.22rem .9rem; border-radius:var(--radius-pill);
  background:rgba(0,193,242,.07); border:1px solid rgba(0,193,242,.2);
  color:var(--cyan); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:.9rem; }

/* TAG — reemplaza .tech-tag y .prod-tag */
.tag {
  display:inline-block;
  padding:.18rem .55rem;
  border-radius: var(--radius-sm);
  background:rgba(0,193,242,.07); border:1px solid rgba(0,193,242,.12);
  color:var(--text-dim);
  font-family:'Barlow Condensed',sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
/* alias compatibilidad */
.tech-tag { display:inline-block; padding:.2rem .65rem; border-radius:.35rem;
  background:rgba(0,193,242,.07); border:1px solid rgba(0,193,242,.12);
  color:var(--text-dim); font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.prod-tag { font-family:'Barlow Condensed',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
  background:rgba(0,193,242,.06); border:1px solid rgba(0,193,242,.1);
  border-radius:var(--radius-sm); padding:.1rem .5rem; }

/* CHIP — reemplaza .alianza-chip */
.chip {
  padding:.7rem 1rem;
  background:rgba(13,32,58,.5); border:1px solid rgba(0,193,242,.1);
  border-radius: var(--radius-lg); text-align:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dim); transition:border-color .3s, color .3s;
}
.chip:hover { border-color:rgba(0,193,242,.28); color:#e8f4fc; }
/* alias */
.alianza-chip { padding:.7rem 1rem; background:rgba(13,32,58,.5);
  border:1px solid rgba(0,193,242,.1); border-radius:var(--radius-lg);
  text-align:center; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dim); transition:border-color .3s, color .3s; }
.alianza-chip:hover { border-color:rgba(0,193,242,.28); color:#e8f4fc; }

/* ????????????????????????????????????????????????????????
   SECCIONES — base
   ???????????????????????????????????????????????????????? */
section { padding: var(--section-pad); }
@media(max-width:767px){ section{ padding: var(--section-pad-sm); } }

.container { max-width:1200px; margin:0 auto; }

.accent-line {
  display:block; width:3rem; height:3px;
  background:linear-gradient(90deg, var(--blue-mid), var(--cyan));
  border-radius:2px; margin-bottom:1.1rem;
}

.section-h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900; font-size:clamp(2.2rem,5vw,3.5rem);
  line-height:1; letter-spacing:-.01em; text-transform:uppercase;
  color:#e8f4fc; margin-bottom:.9rem;
}
.section-h2 em { color:var(--cyan); font-style:normal; }
.section-h2 .y { color:var(--yellow); }

.section-sub {
  font-family:'Work Sans',sans-serif;
  font-weight:300; font-size:1.05rem; line-height:1.7;
  color:var(--text-dim); max-width:560px;
}

/* ?? SCROLL REVEAL ??????????????????????????????????????  */
.rv {
  opacity:0; transform:translateY(26px);
  transition:opacity .65s ease, transform .65s ease;
}
.rv.visible { opacity:1; transform:translateY(0); }

/* ????????????????????????????????????????????????????????
   HERO
   ???????????????????????????????????????????????????????? */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding:8rem 3rem 4rem; position:relative; overflow:hidden;
}
@media(max-width:767px){ .hero{ padding:7rem 1.5rem 3rem; } }

.hero-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center; max-width:1200px; margin:0 auto;
}
@media(max-width:1023px){ .hero-grid{ grid-template-columns:1fr; } .hero-right{ display:none; } }

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.25rem 1rem; border-radius: var(--radius-pill);
  background:rgba(0,193,242,.08); border:1px solid rgba(0,193,242,.2);
  color:var(--cyan); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:1.5rem;
}
.hero-badge .dot {
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  animation:pulse-d 2s ease-in-out infinite;
}
@keyframes pulse-d {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.8); }
}

.hero-h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900; font-size:clamp(3.2rem,8vw,6.2rem);
  line-height:.95; letter-spacing:-.01em; text-transform:uppercase;
  color:#e8f4fc; margin-bottom:1.4rem;
}
.hero-h1 .c { color:var(--cyan); }
.hero-h1 .y { color:var(--yellow); }

.hero-p {
  font-family:'Work Sans',sans-serif; font-weight:300;
  font-size:1.15rem; line-height:1.7; color:var(--text-dim);
  max-width:30rem; margin-bottom:2.4rem;
}
.hero-ctas { display:flex; flex-wrap:wrap; gap:1rem; }

/* Tech tags row */
.tech-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }

/* ?? Blueprint orbit diagram ??????????????????????????? */
@keyframes float-y {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}
.hero-right { animation:float-y 4s ease-in-out infinite; position:relative; }

.blueprint { position:relative; width:100%; max-width:480px; margin:0 auto; }

.bp-center {
  width:180px; height:180px; border-radius:50%;
  margin:0 auto;
  background:linear-gradient(135deg,rgba(13,58,92,.85),rgba(22,108,159,.5));
  border:2px solid rgba(0,193,242,.25);
  box-shadow:0 0 60px rgba(0,193,242,.15);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2;
}
.bp-center img { width:70px; height:auto; }
.bp-center .bp-label {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cyan); text-align:center;
}

.orbit-wrap { position:relative; width:380px; height:380px; margin:0 auto; }
.orbit-ring  { position:absolute; inset:0;    border-radius:50%; border:1px dashed rgba(0,193,242,.2); }
.orbit-ring-2{ position:absolute; inset:40px; border-radius:50%; border:1px solid  rgba(0,193,242,.1); }

.sat-node {
  position:absolute;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  transform:translate(-50%,-50%);
}
.sat-icon {
  width:44px; height:44px; border-radius: var(--radius-lg);
  background:rgba(13,32,58,.9); border:1px solid rgba(0,193,242,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan); font-size:1.2rem;
  box-shadow:0 0 16px rgba(0,193,242,.12);
}
.sat-label {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); white-space:nowrap; text-align:center;
}

@keyframes spin-slow { from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.spin-ring { animation:spin-slow 20s linear infinite; position:absolute; inset:-8px; }

/* ????????????????????????????????????????????????????????
   PAGE HERO (páginas internas)
   ???????????????????????????????????????????????????????? */
.page-hero {
  padding:10rem 3rem 5rem; position:relative; overflow:hidden;
  background:var(--bg);
}
@media(max-width:767px){ .page-hero{ padding:7rem 1.5rem 3rem; } }
.page-hero .container { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.page-hero-h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900; font-size:clamp(3rem,7vw,5.5rem);
  line-height:.95; letter-spacing:-.01em; text-transform:uppercase;
  color:#e8f4fc; margin-bottom:1rem;
}
.page-hero-h1 em { color:var(--cyan); font-style:normal; }
.page-hero-sub {
  font-family:'Work Sans',sans-serif; font-weight:300;
  font-size:1.1rem; line-height:1.7; color:var(--text-dim);
  max-width:36rem;
}

/* ????????????????????????????????????????????????????????
   STATS BAND
   ???????????????????????????????????????????????????????? */
.stats-band {
  background:var(--bg-2);
  border-top:1px solid rgba(0,193,242,.07);
  border-bottom:1px solid rgba(0,193,242,.07);
  padding:3.5rem 3rem;
}
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  max-width:960px; margin:0 auto;
}
@media(max-width:767px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-item { text-align:center; }
.stat-num {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900; font-size:3rem; color:var(--cyan);
  line-height:1; letter-spacing:-.02em;
}
.stat-label {
  font-family:'Work Sans',sans-serif;
  font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-dim); margin-top:.4rem;
}

/* ????????????????????????????????????????????????????????
   PRODUCTOS GRID
   ???????????????????????????????????????????????????????? */
.prod-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem;
}
@media(max-width:1023px){ .prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:599px){  .prod-grid{ grid-template-columns:1fr; } }

.prod-card { padding:2rem 2rem 2.2rem; }

.prod-icon {
  width:3.2rem; height:3.2rem; border-radius: var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); border:1px solid rgba(0,193,242,.12);
  margin-bottom:1.2rem; transition:border-color .3s, box-shadow .3s;
}
.prod-card:hover .prod-icon {
  border-color:rgba(0,193,242,.35);
  box-shadow:0 0 18px rgba(0,193,242,.15);
}
.prod-icon .material-symbols-outlined { color:var(--cyan); font-size:1.6rem; }
.prod-icon.accent {
  background:linear-gradient(145deg, var(--blue-mid), var(--blue-deep));
  border-color:rgba(0,193,242,.3);
  box-shadow:0 4px 18px rgba(0,193,242,.3);
}
.prod-icon.accent .material-symbols-outlined { color:#fff; }

.prod-card h3 {
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.35rem; letter-spacing:.02em; color:#e8f4fc; margin-bottom:.3rem;
}
.prod-card .prod-sub {
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:.6rem;
}
.prod-card p {
  font-family:'Work Sans',sans-serif;
  font-size:.88rem; font-weight:300; line-height:1.65; color:var(--text-dim);
}
.prod-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem; }

/* ????????????????????????????????????????????????????????
   SCADA SECTION
   ???????????????????????????????????????????????????????? */
.scada-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
  margin-top:3rem;
}
@media(max-width:1023px){ .scada-grid{ grid-template-columns:1fr; } }

.scada-modules { display:flex; flex-direction:column; gap:.75rem; }
.scada-module {
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.2rem;
  background:rgba(13,32,58,.4); border:1px solid rgba(0,193,242,.1);
  border-radius:1rem; transition:border-color .3s, background .3s;
}
.scada-module:hover {
  border-color:rgba(0,193,242,.22);
  background:rgba(13,32,58,.65);
}
.scada-module-icon {
  width:2.6rem; height:2.6rem; border-radius: var(--radius-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--blue-mid), var(--blue-deep));
  color:#fff; font-size:1.1rem;
}
.scada-module h4 {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1.05rem; color:#e8f4fc; margin-bottom:.25rem;
}
.scada-module p {
  font-family:'Work Sans',sans-serif; font-size:.82rem; font-weight:300;
  color:var(--text-dim); line-height:1.6;
}

/* Platform mockup */
.platform-mock {
  border-radius:1rem; overflow:hidden;
  border:1px solid rgba(0,193,242,.15);
  box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 60px rgba(0,193,242,.07);
}
.mock-header {
  background:rgba(13,32,58,.95); padding:.7rem 1.2rem;
  display:flex; align-items:center; gap:.75rem;
  border-bottom:1px solid rgba(0,193,242,.1);
}
.mock-dots { display:flex; gap:.4rem; }
.mock-dots span { width:.55rem; height:.55rem; border-radius:50%; }
.mock-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan);
}
.mock-body {
  background:rgba(9,20,36,.95); padding:1.2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.75rem;
}
.mock-kpi {
  padding:.85rem; border-radius: var(--radius-md);
  background:rgba(13,32,58,.7); border:1px solid rgba(0,193,242,.1);
}
.mock-kpi-val {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:1.6rem; color:var(--cyan); line-height:1;
}
.mock-kpi-label {
  font-family:'Work Sans',sans-serif; font-size:.65rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-top:.2rem;
}
.mock-kpi-sub {
  font-family:'Work Sans',sans-serif; font-size:.7rem; color:var(--text-dim); margin-top:.1rem;
}
.mock-bar-row { grid-column:span 2; }
.mock-bar-label {
  display:flex; justify-content:space-between;
  font-family:'Barlow Condensed',sans-serif; font-size:.68rem; font-weight:700;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.3rem;
}
.mock-bar-track {
  height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden;
}
.mock-bar-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--blue-mid), var(--cyan));
  box-shadow:0 0 10px rgba(0,193,242,.4);
}
.mock-alert {
  grid-column:span 2; padding:.6rem .8rem;
  background:rgba(0,193,242,.06); border:1px solid rgba(0,193,242,.15);
  border-radius: var(--radius-md);
  display:flex; align-items:center; gap:.5rem;
  font-family:'Work Sans',sans-serif; font-size:.72rem; color:var(--text-dim);
}
.mock-alert .material-symbols-outlined { color:var(--yellow); font-size:1rem; }

/* ????????????????????????????????????????????????????????
   PROCESO
   ???????????????????????????????????????????????????????? */
.process-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem; position:relative; margin-top:3.5rem;
}
@media(max-width:767px){ .process-row{ grid-template-columns:repeat(2,1fr); } }

.proc-line {
  display:none; position:absolute; top:2rem;
  left:0; width:100%; height:1px;
  background:linear-gradient(90deg,rgba(0,193,242,.05),rgba(0,193,242,.25),rgba(0,193,242,.05));
}
@media(min-width:768px){ .proc-line{ display:block; } }

.proc-step { text-align:center; }
.proc-num {
  width:4rem; height:4rem; border-radius:50%;
  background:var(--bg-2); border:2px solid var(--blue-mid);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.4rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.4rem;
  color:var(--cyan); position:relative; z-index:1;
}
.proc-step h4 {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.15rem;
  color:#e8f4fc; margin-bottom:.4rem;
}
.proc-step p {
  font-family:'Work Sans',sans-serif; font-size:.8rem; font-weight:300;
  color:var(--text-dim); line-height:1.6; padding:0 .4rem;
}

/* ????????????????????????????????????????????????????????
   ALIANZAS
   ???????????????????????????????????????????????????????? */
.alianzas-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:2.5rem;
}
@media(max-width:767px){ .alianzas-grid{ grid-template-columns:repeat(3,1fr); } }

/* ????????????????????????????????????????????????????????
   PORTAFOLIO
   ???????????????????????????????????????????????????????? */
.porto-grid {
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-template-rows:260px 260px; gap:1.25rem; margin-top:3rem;
}
@media(max-width:767px){ .porto-grid{ grid-template-columns:1fr; grid-template-rows:auto; } }

.pt-item {
  position:relative; border-radius: var(--radius-xl); overflow:hidden; cursor:pointer;
}
.pt-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.pt-item:hover img { transform:scale(1.06); }

.pt-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(6,15,26,.88) 0%,transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem;
}
.pt-tag {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--cyan); margin-bottom:.25rem;
}
.pt-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.3rem;
  color:#e8f4fc; line-height:1.1;
}
.pt-a { grid-column:span 7; }
.pt-b { grid-column:span 5; }
.pt-c { grid-column:span 5; }
.pt-d { grid-column:span 7; }
@media(max-width:767px){ .pt-a,.pt-b,.pt-c,.pt-d{ grid-column:span 1; min-height:220px; } }

/* ????????????????????????????????????????????????????????
   FINAL CTA BLOCK
   ???????????????????????????????????????????????????????? */
.cta-block {
  position:relative; border-radius:1.5rem; overflow:hidden;
  background:var(--bg-2); border:1px solid rgba(0,193,242,.1);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  padding:4.5rem 3rem; text-align:center;
  max-width:860px; margin:0 auto;
}
.cta-block::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue-mid), var(--cyan), var(--yellow), var(--cyan), var(--blue-mid));
  background-size:200%; animation:shimmer 4s linear infinite;
}
@keyframes shimmer {
  from{ background-position:0 0; }
  to{   background-position:200% 0; }
}
.cta-block h2 {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(2.5rem,5vw,4rem); text-transform:uppercase;
  line-height:1; color:#e8f4fc; margin-bottom:.9rem;
}
.cta-block p {
  font-family:'Work Sans',sans-serif; font-weight:300;
  font-size:1.05rem; color:var(--text-dim); max-width:540px;
  margin:0 auto 2.4rem; line-height:1.7;
}
.cta-btns { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ????????????????????????????????????????????????????????
   FORMULARIO DE CONTACTO
   ???????????????????????????????????????????????????????? */
.contact-grid {
  display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; margin-top:3rem; align-items:start;
}
@media(max-width:1023px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-info { display:flex; flex-direction:column; gap:1.5rem; }
.contact-item {
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.2rem; border-radius:var(--radius-lg);
  background:rgba(13,32,58,.4); border:1px solid rgba(0,193,242,.1);
}
.contact-item-icon {
  width:2.6rem; height:2.6rem; border-radius:var(--radius-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--blue-mid), var(--blue-deep));
  color:#fff;
}
.contact-item h4 {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1rem; color:#e8f4fc; margin-bottom:.2rem;
}
.contact-item p {
  font-family:'Work Sans',sans-serif; font-size:.85rem; font-weight:300;
  color:var(--text-dim); line-height:1.6;
}

/* Formulario */
.form-card { padding:2.5rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:599px){ .form-row{ grid-template-columns:1fr; } }

.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.form-group label {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim);
}
.form-group input,
.form-group select,
.form-group textarea {
  background:rgba(13,32,58,.6); border:1px solid rgba(0,193,242,.15);
  border-radius: var(--radius-md);
  padding:.75rem 1rem;
  font-family:'Work Sans',sans-serif; font-size:.9rem; color:#e8f4fc;
  transition:border-color .2s;
  outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:rgba(0,193,242,.45);
  box-shadow:0 0 0 3px rgba(0,193,242,.08);
}
.form-group select option { background:#0a1828; }
.form-group textarea { resize:vertical; min-height:120px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(107,154,184,.5); }

/* ????????????????????????????????????????????????????????
   FOOTER
   ???????????????????????????????????????????????????????? */
footer {
  background:#040c16; border-top:1px solid rgba(0,193,242,.07);
  padding:4rem 3rem 2.5rem;
}
@media(max-width:767px){ footer{ padding:3rem 1.5rem 2rem; } }

.footer-grid {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:3rem; max-width:1200px; margin:0 auto 3rem;
}
@media(max-width:767px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }

.footer-brand img { height:2.6rem; width:auto; margin-bottom:.9rem; }
.footer-tagline {
  font-family:'Work Sans',sans-serif; font-size:.78rem; font-weight:300;
  color:#2d5470; line-height:1.6;
}
.footer-col h4 {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
  color:#e8f4fc; margin-bottom:1rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-col ul li a,
.footer-col ul li {
  font-family:'Work Sans',sans-serif; font-size:.78rem; color:#2d5470; transition:color .2s;
}
.footer-col ul li a:hover { color:var(--cyan); }
.footer-bottom {
  max-width:1200px; margin:0 auto; padding-top:1.5rem;
  border-top:1px solid rgba(0,193,242,.06);
  text-align:center;
  font-family:'Work Sans',sans-serif; font-size:.72rem; color:#2d5470;
}