:root{
  --navy:#070c1a;
  --navy-2:#0d1428;
  --paper:#f3f6fb;
  --paper-2:#ffffff;
  --ink:#0a0f1f;
  --blue:#3b82f6;
  --cyan:#22d3ee;
  --violet:#8b5cf6;
  --mint:#34d399;
  --line-dark: rgba(226,232,240,0.12);
  --line-light: rgba(10,15,31,0.1);
  --muted-dark: rgba(226,232,240,0.62);
  --muted-light: rgba(10,15,31,0.6);
  --text-light:#e7ecf7;
  --vh-pad: 96px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Hanken Grotesk', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
/* Footer "pegajoso": si el contenido de la página es más corto que la
   pantalla, la última sección se estira para llenar el espacio en vez de
   dejar ver el fondo claro del body debajo del footer. */
main{ flex:1 0 auto; display:flex; flex-direction:column; }
main > .view:last-child{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; }
.site-footer{ flex-shrink:0; }
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3{ font-family:'Chakra Petch', sans-serif; letter-spacing:-0.01em; }
a{ color:inherit; }
img{ display:block; max-width:100%; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; width:100%; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; letter-spacing:0.03em;
  margin-bottom:18px;
}
.eyebrow::before{ content:''; width:8px; height:8px; border-radius:2px; display:inline-block; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.eyebrow.on-light{ color:var(--blue); }
.eyebrow.on-dark{ color:var(--cyan); }

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

/* ---------- PAGE SECTIONS ----------
   Cada .view es un bloque de color de ancho completo dentro de una página
   normal (ya no hay scroll-snap entre "vistas": eso pertenecía al one-pager;
   ahora cada página es su propio documento). padding-top deja espacio para
   el header fijo. */
.view{
  padding:var(--vh-pad) 0 70px;
  position:relative;
}
.view.tight{ padding-top:48px; padding-bottom:60px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:0s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.24s; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; border-radius:12px;
  text-decoration:none; font-weight:600; font-size:15.5px;
  border:none; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-glow{
  background:linear-gradient(120deg, var(--blue), var(--cyan));
  color:#04101f;
  box-shadow:0 14px 30px -12px rgba(59,130,246,0.7);
}
.btn-glow:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 0 24px 2px rgba(34,211,238,0.45), 0 18px 34px -12px rgba(59,130,246,0.8); }
.btn-glow:active{ transform:translateY(-2px) scale(0.97); transition-duration:.12s; }
.btn-ghost-dark{ background:rgba(226,232,240,0.06); color:var(--text-light); border:1.5px solid rgba(226,232,240,0.22); }
.btn-ghost-dark:active{ transform:scale(0.97); transition-duration:.12s; }
.btn-ghost-dark:hover{ border-color:var(--cyan); background:rgba(34,211,238,0.08); }
.btn-ghost-light{ background:rgba(10,15,31,0.04); color:var(--ink); border:1.5px solid var(--line-light); }
.btn-ghost-light:hover{ border-color:var(--blue); background:rgba(59,130,246,0.06); }
.btn-ghost-light:active{ transform:scale(0.97); transition-duration:.12s; }

/* ---------- FIXED TOP BAR ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(7,12,26,0.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
  transition:top .3s ease, left .3s ease, right .3s ease, border-radius .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
@media (min-width:981px){
  header.scrolled{
    top:14px; left:16px; right:16px; max-width:1200px; margin:0 auto;
    border-radius:16px;
    border:1px solid var(--line-dark);
    box-shadow:0 20px 44px -22px rgba(0,0,0,0.55);
    background:rgba(7,12,26,0.85);
  }
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1200px; margin:0 auto; }
@media (min-width:981px){ header.scrolled .nav{ padding:11px 22px; } }
.logo{ font-family:'Chakra Petch', sans-serif; font-weight:700; font-size:19px; color:var(--text-light); display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-mark{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg, var(--blue), var(--violet)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -6px rgba(7,12,26,0.5); flex-shrink:0; }
.logo-mark svg{ width:16px; height:16px; }
nav.links ul{ list-style:none; display:flex; gap:30px; font-size:14px; font-weight:500; }
nav.links ul a{ text-decoration:none; color:var(--muted-dark); transition:color .2s; position:relative; }
nav.links ul a:hover{ color:var(--cyan); }
nav.links ul a.active{ color:var(--text-light); }
nav.links ul a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--cyan); border-radius:2px; box-shadow:0 0 8px var(--cyan); opacity:0; transform:scaleX(.6); transition:opacity 200ms ease-out, transform 200ms ease-out; }
nav.links ul a.active::after{ opacity:1; transform:scaleX(1); }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:11px; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--text-light); margin:5px 0; border-radius:2px; transition:transform 200ms ease-out, opacity 150ms ease-out; }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
  display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
  background:rgba(7,12,26,0.98); border-bottom:1px solid var(--line-dark);
  padding:8px 20px 16px; opacity:0; visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 240ms ease-out, opacity 180ms ease-out, visibility 240ms;
}
.mobile-menu.open{ clip-path:inset(0 0 0% 0); opacity:1; visibility:visible; }
.mobile-menu a{ padding:14px 4px; text-decoration:none; color:var(--text-light); font-size:15px; border-bottom:1px solid var(--line-dark); }
.mobile-menu a.active{ color:var(--cyan); }
.mobile-menu a:last-child{ border-bottom:none; }

/* ---------- PAGE HEADER (páginas internas, sin hero completo) ---------- */
.page-header{ background:var(--navy); color:var(--text-light); overflow:hidden; }
.page-header h1{ font-size:clamp(32px,4vw,48px); line-height:1.1; font-weight:700; margin-bottom:14px; }
.page-header p{ font-size:16.5px; color:var(--muted-dark); max-width:560px; }
.page-header .hero-bg-grid{ opacity:.7; }
.breadcrumb{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted-dark); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.breadcrumb a{ text-decoration:none; color:var(--muted-dark); transition:color .2s; }
.breadcrumb a:hover{ color:var(--cyan); }

/* ---------- HERO (solo Inicio) ---------- */
.hero-view{
  background:var(--navy);
  color:var(--text-light);
  overflow:hidden;
}
.hero-bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(59,130,246,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.09) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 60% at 30% 20%, black 40%, transparent 90%);
  pointer-events:none;
}
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; }
.blob-1{ width:420px; height:420px; background:radial-gradient(circle, var(--blue), transparent 70%); top:-140px; left:-100px; animation:float1 12s ease-in-out infinite; }
.blob-2{ width:360px; height:360px; background:radial-gradient(circle, var(--violet), transparent 70%); bottom:-160px; right:-80px; animation:float2 14s ease-in-out infinite; }
@keyframes float1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(30px,40px);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-35px,-25px);} }
.hero-particles{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .hero-particles{ display:none; } }

.hero-view .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero-view h1{ font-size:clamp(36px,4.6vw,58px); line-height:1.05; font-weight:700; margin-bottom:20px; }
.hero-view h1 .grad{ background:linear-gradient(120deg, var(--cyan), var(--blue) 60%, var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-view h1 .word{
  display:inline-block; opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.hero-view h1.in .word{ opacity:1; transform:translateY(0); }
.hero-view p.lead{ font-size:17.5px; color:var(--muted-dark); max-width:460px; margin-bottom:28px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }

.hero-visual{ position:relative; }
.hero-photo{ border-radius:20px; overflow:hidden; border:1px solid rgba(226,232,240,0.14); box-shadow:0 30px 70px -25px rgba(0,0,0,0.7); position:relative; }
.hero-photo img{
  width:100%; height:300px; object-fit:cover; filter:saturate(1.05) contrast(1.02);
  animation:kenBurns 18s ease-in-out infinite alternate;
  transform-origin:60% 40%;
}
@keyframes kenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.1) translate(-1.5%,-1%); }
}
.hero-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,12,26,0) 40%, rgba(7,12,26,0.85) 100%); }
.float-card{ position:absolute; z-index:3; background:rgba(13,20,40,0.85); backdrop-filter:blur(10px); border:1px solid rgba(226,232,240,0.16); border-radius:14px; padding:12px 15px; display:flex; align-items:center; gap:11px; box-shadow:0 18px 40px -18px rgba(0,0,0,0.6); animation:cardFloat 5s ease-in-out infinite; }
.float-card.f1{ top:-18px; right:-16px; }
.float-card.f2{ bottom:-20px; left:-18px; animation-delay:1.4s; }
@keyframes cardFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
.float-card .ic{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.float-card .ic svg{ width:16px; height:16px; color:#04101f; }
.float-card .t{ font-size:12px; color:var(--muted-dark); }
.float-card .v{ font-size:13.5px; font-weight:600; color:var(--text-light); }

.scroll-hint{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted-dark);
  z-index:3;
}
.scroll-hint .chevron{ width:14px; height:14px; animation:chevronBounce 1.8s ease-in-out infinite; }
@keyframes chevronBounce{ 0%,100%{ transform:translateY(0); opacity:.5;} 50%{ transform:translateY(5px); opacity:1;} }

/* ---------- SECTION HEAD ---------- */
.servicios-view{ background:var(--paper-2); }
.section-head{ max-width:620px; margin-bottom:38px; }
.section-head h2{ font-size:clamp(28px,3vw,38px); font-weight:700; }
.section-head p{ color:var(--muted-light); font-size:16px; margin-top:12px; }
.clientes-view .section-head p, .hero-view .section-head p, .portafolio-view .section-head p{ color:var(--muted-dark); }

.servicios-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; align-items:start; }
.servicio{ background:var(--paper-2); border:1px solid var(--line-light); border-radius:18px; padding:26px 22px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.servicio:hover{ transform:translateY(-6px); box-shadow:0 24px 40px -20px rgba(59,130,246,0.35); border-color:rgba(59,130,246,0.4); }
a.servicio{ text-decoration:none; display:block; color:inherit; }
.servicio-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.servicio-icon{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.servicio-icon svg{ width:18px; height:18px; color:#fff; }
.servicio h3{ font-size:17px; font-weight:600; }
.servicio p{ color:var(--muted-light); font-size:13.5px; }
.servicio-features{ list-style:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-light); display:flex; flex-direction:column; gap:9px; }
.servicio-features li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted-light); }
.servicio-features svg{ width:14px; height:14px; color:var(--blue); flex-shrink:0; }
.servicio-proof{ margin-top:16px; border-radius:14px; overflow:hidden; border:1px solid var(--line-light); }
.servicio-proof img{ width:100%; height:120px; object-fit:cover; display:block; }
.servicio-proof.tall img{ height:220px; }
.servicio-proof-label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted-light); background:var(--paper-2); padding:8px 12px; }
.servicio-more{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; font-weight:600; color:var(--blue); text-decoration:none; }
.clientes-view .servicio-more, .hero-view .servicio-more{ color:var(--cyan); }
.servicio-more svg{ width:14px; height:14px; transition:transform .2s; }
a.servicio:hover .servicio-more svg, a.servicio-more:hover svg{ transform:translateX(3px); }

/* ---------- DETAIL PAGE (una solución) ---------- */
.solucion-section{ background:var(--paper-2); }
.solucion-body{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.solucion-body h2{ font-size:clamp(24px,2.6vw,32px); font-weight:700; margin:28px 0 14px; }
.solucion-body p{ color:var(--muted-light); font-size:15.5px; margin-bottom:14px; }
.solucion-includes{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:18px 0 28px; }
.solucion-includes li{ display:flex; align-items:center; gap:10px; font-size:14.5px; }
.solucion-includes svg{ width:16px; height:16px; color:var(--blue); flex-shrink:0; }

/* Marca(s) con la que GAEMTech presta el servicio (ej. EZVIZ, Punto.pe) */
.solucion-marcas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:4px 0 22px; padding:14px 18px; background:var(--paper-2); border:1px solid var(--line-light); border-radius:14px; }
.marcas-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-light); white-space:nowrap; }
.marcas-logos{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.marca-logo{ height:34px; width:auto; object-fit:contain; display:block; }
.solucion-proof{ position:sticky; top:calc(var(--vh-pad) + 24px); }
.solucion-proof img{ width:100%; border-radius:18px; box-shadow:0 24px 50px -24px rgba(10,15,31,0.35); }
.solucion-proof-label{ display:block; margin-top:12px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted-light); }
.solucion-proof-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.solucion-proof-pair .solucion-proof-label{ text-align:center; margin-top:10px; }
@media (max-width:480px){ .solucion-proof-pair{ grid-template-columns:1fr; } }

/* Galería ilustrativa (no es "caso real" — fotos genéricas/de apoyo, sin etiqueta de evidencia) */
.solucion-gallery{ margin-top:48px; }
.solucion-gallery-grid{ display:grid; gap:16px; }
.solucion-gallery-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; display:block; transition:transform .3s ease; }
@media (max-width:820px){ .solucion-gallery-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:520px){ .solucion-gallery-grid{ grid-template-columns:1fr !important; } }

/* Beneficios / objetivos comerciales de cada servicio */
.solucion-beneficios{ margin-top:56px; }
.beneficios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.beneficio{ background:var(--paper-2); border:1px solid var(--line-light); border-radius:16px; padding:22px 20px; }
.beneficio h3{ font-size:16px; font-weight:600; margin-bottom:8px; }
.beneficio p{ font-size:14px; color:var(--muted-light); line-height:1.5; }
@media (max-width:820px){ .beneficios-grid{ grid-template-columns:1fr; } }

/* Cada foto de galería se envuelve en .gallery-item por JS: recorte parejo,
   sombra, y un ícono de lupa que aparece al pasar el mouse para indicar que
   se puede hacer clic y agrandar. */
.gallery-item{ position:relative; overflow:hidden; border-radius:16px; cursor:zoom-in; box-shadow:0 20px 40px -22px rgba(10,15,31,0.3); }
.gallery-item::after{ content:''; position:absolute; inset:0; background:rgba(4,8,18,0); transition:background .25s ease; }
.gallery-item:hover::after{ background:rgba(4,8,18,0.28); }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item-zoom{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.7); width:40px; height:40px; border-radius:50%; background:rgba(7,12,26,0.75); border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.gallery-item-zoom svg{ width:18px; height:18px; }
.gallery-item:hover .gallery-item-zoom{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* Lightbox: se agrega una sola vez por página (JS), reutilizado por todas las galerías de esa página. */
.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(4,8,18,0.94); display:flex; align-items:center; justify-content:center; padding:70px 20px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-img{ max-width:min(1100px,92vw); max-height:86vh; border-radius:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.6); object-fit:contain; transition:opacity .14s ease; }
.lightbox-img.fading{ opacity:0; }
.lightbox-close, .lightbox-prev, .lightbox-next{ position:absolute; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); color:#fff; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, border-color .2s; }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:20px; height:20px; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(34,211,238,0.18); border-color:var(--cyan); }
.lightbox-close{ top:20px; right:20px; }
.lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){ .lightbox{ padding:60px 12px; } .lightbox-prev, .lightbox-next{ width:38px; height:38px; } .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; } .lightbox-close{ top:12px; right:12px; } }
.otras-soluciones{ background:var(--navy); color:var(--text-light); }
.otras-soluciones h2{ font-size:22px; font-weight:700; margin-bottom:20px; }
.otras-soluciones .servicio{ background:rgba(226,232,240,0.04); border-color:var(--line-dark); }
.otras-soluciones .servicio p{ color:var(--muted-dark); }

/* ---------- QUIENES SOMOS: empresa (misión/visión/valores) ---------- */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:56px; }
.mv-card{ background:var(--paper-2); border:1px solid var(--line-light); border-radius:18px; padding:28px 26px; }
.mv-card .eyebrow{ margin-bottom:12px; }
.mv-card p{ font-size:15.5px; color:var(--ink); line-height:1.55; }
.porque-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; margin-top:24px; }
.porque-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.5; }
.porque-list svg{ width:18px; height:18px; color:var(--cyan); flex-shrink:0; margin-top:2px; }
@media (max-width:640px){ .mv-grid{ grid-template-columns:1fr; } .porque-list{ grid-template-columns:1fr; } }

/* ---------- FUNDADOR / QUIENES SOMOS ---------- */
.fundador-view{ background:var(--paper-2); }
.fundador-view .wrap{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center; }

.fundador-photo{ position:relative; }
.fundador-photo img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:22px;
  border:1px solid var(--line-light);
  box-shadow:0 30px 60px -28px rgba(10,15,31,0.4);
}
.fundador-badge{
  position:absolute; left:16px; bottom:16px;
  display:flex; align-items:center; gap:8px;
  background:rgba(7,12,26,0.85);
  backdrop-filter:blur(8px);
  color:var(--text-light);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,0.18);
}
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); display:inline-block; }

.fundador-view h1{ font-size:clamp(28px,3.2vw,38px); font-weight:700; margin-bottom:2px; }
.fundador-role{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; color:#2563eb;
  margin-bottom:18px;
}
.fundador-bio{ color:var(--muted-light); font-size:15.5px; margin-bottom:22px; max-width:560px; }

.fundador-quote{
  position:relative;
  padding:6px 0;
  max-width:520px;
}
.fundador-quote .quote-mark{ width:26px; height:26px; color:rgba(59,130,246,0.28); margin-bottom:6px; }
.fundador-quote p{ font-family:'Chakra Petch', sans-serif; font-size:17px; font-weight:500; font-style:italic; color:var(--ink); line-height:1.45; }
.fundador-view .stat-list{ margin:22px 0; max-width:520px; }
.fundador-view .stat{ background:rgba(10,15,31,0.03); border:1px solid var(--line-light); }
.fundador-view .stat .label{ color:var(--muted-light); }

@media (max-width:980px){
  .fundador-view .wrap{ grid-template-columns:1fr; }
  .fundador-photo{ max-width:320px; margin:0 auto; }
  .solucion-body{ grid-template-columns:1fr; }
  .solucion-proof{ position:static; order:-1; }
}

.stat-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.stat{ background:rgba(226,232,240,0.05); border:1px solid var(--line-dark); border-radius:14px; padding:16px 14px; }
.stat .num{ font-family:'Chakra Petch', sans-serif; font-size:26px; font-weight:700; color:var(--blue); }
.stat .label{ font-size:11.5px; color:var(--muted-dark); margin-top:5px; }

/* ---------- CLIENTES (fila de logos) ---------- */
.clientes-view{ background:var(--navy); color:var(--text-light); overflow:hidden; }
.logos-row{ display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:36px; margin-top:8px; }
.logo-item{ display:flex; flex-direction:column; align-items:center; gap:12px; width:128px; }
.logo-tile{
  display:block; width:128px; height:128px; flex-shrink:0;
  border-radius:18px; overflow:hidden; text-decoration:none;
  box-shadow:0 16px 34px -16px rgba(0,0,0,0.6);
  opacity:.9; transition:opacity .2s, transform .2s;
}
.logo-tile:hover{ opacity:1; transform:translateY(-4px); }
.logo-caption{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted-dark); text-align:center; line-height:1.4; }
.logo-tile img{ width:100%; height:100%; object-fit:cover; display:block; }

.clientes-list{ display:flex; flex-direction:column; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:18px; overflow:hidden; margin-top:40px; }
.cliente-row{ background:var(--navy); display:flex; align-items:center; gap:20px; padding:22px 26px; }
.cliente-row .logo-tile{ width:64px; height:64px; border-radius:12px; }
.cliente-row h2{ font-size:16px; font-weight:600; margin-bottom:3px; }
.cliente-row p{ font-size:13px; color:var(--muted-light); }
.cliente-service{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:500; color:var(--blue); background:rgba(59,130,246,0.08); border:1px solid rgba(59,130,246,0.25); padding:4px 10px; border-radius:20px; }
.cliente-service svg{ width:12px; height:12px; flex-shrink:0; }
.cliente-row .visit{ margin-left:auto; font-size:13px; font-weight:600; color:var(--blue); text-decoration:none; white-space:nowrap; }
@media (max-width:640px){ .cliente-row{ flex-wrap:wrap; } .cliente-row .visit{ margin-left:0; } }

/* ---------- LISTA DE CLIENTES (página Clientes, sección clara bajo el page-header) ---------- */
.clientes-list-view{ background:var(--paper-2); }
.clientes-list-view .clientes-list{ background:var(--line-light); border-color:var(--line-light); margin-top:0; }
.clientes-list-view .cliente-row{ background:var(--paper-2); }

/* ---------- CONTACTO + FOOTER ---------- */
.contacto-view{ background:var(--paper-2); color:var(--ink); overflow:hidden; }
.contacto-grid{ display:grid; grid-template-columns:1fr 0.9fr; gap:48px; }

.big-cta{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:linear-gradient(120deg, rgba(59,130,246,0.16), rgba(139,92,246,0.16)); border:1px solid rgba(59,130,246,0.3); border-radius:18px; padding:26px 28px; }
.big-cta h3{ font-size:18px; font-weight:600; margin-bottom:5px; }
.big-cta p{ font-size:13px; color:var(--muted-light); }

.contact-card{ background:var(--paper-2); border:1px solid var(--line-light); border-radius:18px; padding:26px; }
.contact-row{ display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line-light); }
.contact-row:last-child{ border-bottom:none; }
.contact-row .ico{ width:36px; height:36px; border-radius:10px; background:rgba(59,130,246,0.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-row .ico svg{ width:16px; height:16px; color:var(--blue); }
.contact-row .label{ font-size:11px; color:var(--muted-light); font-family:'IBM Plex Mono', monospace; margin-bottom:2px; }
.contact-row .value{ font-weight:600; font-size:14px; color:var(--ink); }
.contact-row a.value{ text-decoration:none; transition:color .2s; }
.contact-row a.value:hover{ color:var(--blue); }

/* ---------- FOOTER (todas las páginas) ---------- */
footer.site-footer{ background:var(--navy); color:var(--text-light); border-top:1px solid var(--line-dark); padding:48px 0 0; }
.footer-main{ display:grid; grid-template-columns:1.3fr 0.8fr 1fr 0.8fr; gap:32px; padding-bottom:32px; }
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand p{ font-size:13.5px; color:var(--muted-dark); max-width:280px; line-height:1.6; }
.footer-col h3{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-dark); margin-bottom:16px; font-weight:500; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ text-decoration:none; color:var(--text-light); font-size:13.5px; transition:color .2s; }
.footer-col a:hover{ color:var(--cyan); }
.footer-col p{ font-size:13.5px; color:var(--text-light); margin-bottom:4px; }
.footer-col p.muted{ color:var(--muted-dark); font-size:12.5px; }

.foot-socials{ display:flex; gap:10px; margin-top:4px; }
.foot-socials a{ width:32px; height:32px; border-radius:9px; background:rgba(226,232,240,0.06); border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s; }
.foot-socials a:hover{ border-color:var(--cyan); background:rgba(34,211,238,0.1); }
.foot-socials svg{ width:14px; height:14px; color:var(--text-light); }

.footer-bottom{ padding:18px 0; border-top:1px solid var(--line-dark); text-align:center; font-size:12.5px; color:var(--muted-dark); }

@media (max-width:820px){
  .footer-main{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .footer-main{ grid-template-columns:1fr; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  :root{ --vh-pad:84px; }
  nav.links{ display:none; }
  .menu-toggle{ display:block; }
  .hero-view .wrap{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .contacto-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .nav{ padding:14px 20px; }
  .servicios-grid{ grid-template-columns:1fr; }
  .stat-list{ grid-template-columns:1fr; gap:10px; }
  .float-card{ display:none; }
  .big-cta{ flex-direction:column; align-items:flex-start; }
  .scroll-hint{ display:none; }
}

:focus-visible{ outline:2.5px solid var(--cyan); outline-offset:2px; }

/* ---------- BOTÓN FLOTANTE "COTIZA TU WEB" ---------- */
.fab-quote{
  position:fixed; left:24px; bottom:24px; z-index:95;
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(120deg, var(--blue), var(--violet));
  color:#fff; border:none; cursor:pointer;
  padding:14px 20px; border-radius:999px;
  font-family:'Hanken Grotesk', sans-serif; font-weight:600; font-size:14px;
  box-shadow:0 14px 30px -10px rgba(59,130,246,0.6);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:fabAttention 4.5s ease-in-out 3;
}
.fab-quote::before, .fab-quote::after{
  content:'';
  position:absolute; inset:0;
  border-radius:999px;
  border:2px solid var(--cyan);
  opacity:0;
  pointer-events:none;
  animation:fabPulse 2.6s ease-out 3;
}
.fab-quote::after{ animation-delay:1.3s; }
@keyframes fabPulse{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(1.45); opacity:0; }
}
@keyframes fabAttention{
  0%, 78%, 100%{ transform:translateY(0) rotate(0); }
  82%{ transform:translateY(-7px) rotate(-2deg); }
  86%{ transform:translateY(0) rotate(2deg); }
  90%{ transform:translateY(-3px) rotate(0); }
}
.fab-quote:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -10px rgba(139,92,246,0.65); animation-play-state:paused; }
.fab-quote:active{ transform:scale(0.96); transition-duration:.12s; animation-play-state:paused; }
.fab-quote svg{ width:18px; height:18px; flex-shrink:0; }
@media (max-width:640px){
  .fab-quote{ left:16px; bottom:16px; padding:12px 16px; font-size:13px; }
  .fab-quote .fab-text{ display:none; }
}

/* ---------- TOAST DE CONFIRMACIÓN ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:300;
  display:flex; align-items:center; gap:10px;
  background:var(--navy-2); color:var(--text-light);
  border:1px solid rgba(52,211,153,0.35);
  border-radius:999px; padding:12px 20px 12px 16px;
  font-size:13.5px; font-weight:500;
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.6);
  opacity:0; pointer-events:none;
  transform:translate(-50%, 10px);
  transition:opacity 280ms ease-out, transform 280ms ease-out;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast svg{ width:17px; height:17px; color:var(--mint); flex-shrink:0; }

/* ---------- PANEL FLOTANTE DE CONTACTO (no cubre toda la pantalla) ---------- */
.modal-overlay{
  position:fixed;
  left:24px; bottom:96px;
  z-index:200;
  width:100%; max-width:380px;
  opacity:0; pointer-events:none;
  transform:translateY(16px) scale(0.97);
  transform-origin:bottom left;
  transition:opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
@media (max-width:640px){
  .modal-overlay{ left:12px; right:12px; bottom:84px; width:auto; max-width:none; }
}

.modal-card{
  position:relative;
  width:100%;
  max-height:none; overflow:visible;
  background:var(--navy-2);
  color:var(--text-light);
  border:1px solid rgba(226,232,240,0.16);
  border-radius:20px;
  padding:22px 22px 20px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(59,130,246,0.08);
}

.modal-close{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:9px;
  background:rgba(226,232,240,0.08); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-light);
  transition:background .2s, transform .12s ease-out;
}
.modal-close:hover{ background:rgba(226,232,240,0.16); }
.modal-close:active{ transform:scale(0.9); }
.modal-close svg{ width:16px; height:16px; }

.modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.modal-icon{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 6px 16px -6px rgba(7,12,26,0.5);
}
.modal-icon svg{ width:18px; height:18px; color:#04101f; }

.modal-card h3{ font-family:'Chakra Petch', sans-serif; font-size:18.5px; font-weight:700; }
.modal-card > p{ color:var(--muted-dark); font-size:13px; margin-bottom:16px; line-height:1.4; }

.form-field{ margin-bottom:11px; }
.form-field label{ display:block; font-size:11px; font-family:'IBM Plex Mono', monospace; color:var(--muted-dark); margin-bottom:5px; }
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:rgba(226,232,240,0.06);
  border:1.5px solid rgba(226,232,240,0.16);
  border-radius:9px;
  padding:9px 12px;
  color:var(--text-light);
  font-family:'Hanken Grotesk', sans-serif;
  font-size:13.5px;
  transition:border-color .2s, background .2s;
}
.form-field textarea{ resize:vertical; min-height:52px; }
.form-field input::placeholder, .form-field textarea::placeholder{ color:rgba(226,232,240,0.35); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--cyan); background:rgba(34,211,238,0.06);
}
.form-field select{ cursor:pointer; }
.form-field select option{ background:var(--navy-2); color:var(--text-light); }
.field-error{ font-size:12px; color:#f87171; margin-top:5px; display:none; }
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea{ border-color:#f87171; }
.form-field.invalid .field-error{ display:block; }

.modal-submit{
  width:100%; justify-content:center;
  margin-top:4px;
  padding:12px 22px;
  font-size:14px;
}