/* =========================
  VARIABLES
========================= */
:root{
  /* Base */
  --fondo:#0A0F18;
  --texto:#E6F1FF;

  /* Marca */
  --cian: rgba(0,179,255,1);
  --cian-soft: rgba(0,179,255,.18);

  /* Halos */
  --neon-1: rgba(0,179,255,.26);
  --neon-2: rgba(0,179,255,.14);
  --neon-3: rgba(47,164,255,.08);

  /* Glass */
  --borde: rgba(255,255,255,.10);
  --borde-nav: rgba(255,255,255,.06);

  /* Tipografía */
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* Layout */
  --max: 1280px;
  /*--max: 1320px;*/

  /* Radios */
  --r-12: 12px;
  --r-18: 18px;
  --r-pill: 999px;

  /* Timing */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 160ms;
  --t-med: 240ms;

  /* Navbar */
  --nav-h: 76px;

  /* Tipos globales */
  --h2-size: clamp(34px, 4vw, 48px);
  --h2-weight: 900;

  --h3-size: clamp(18px, 1.6vw, 22px);
  --h3-weight: 850;

  /* Texto base cards (UNIFICADO para p y li) */
  /*--card-text-size: 16px;*/
  --card-text-size: 18px;
  --card-text-color: rgba(230,241,255,.70);
  --card-text-lh: 1.68;

  --sub-color: rgba(230,241,255,.70);

  /*--eyebrow-size: 12px;*/
  --eyebrow-size: 14px;
  --eyebrow-track: .22em;
  --eyebrow-color: rgba(155,233,255,.78);

  /* Cards */
  --card-radius: 20px;
  --card-pad: 22px 20px 18px;

  /* Premium / Shine */
  --card-hover-raise: 6px;
  --card-tilt: 2.2deg;                 
  --card-hover-glow: 0 0 36px rgba(0,179,255,.16), 0 0 76px rgba(47,164,255,.10);
  --card-shadow-rest: 0 18px 48px rgba(0,0,0,.35);
  --card-shadow-hover: 0 26px 74px rgba(0,0,0,.50);

  /* ✅ Ajuste: el “corte” se siente menos si reanuda suave */
  --shine-resume-delay: 140ms;

  /* ✅ Tokens para quitar duplicados */
  --grad-accent: linear-gradient(90deg, #6FE7FF 0%, #2DBBFF 30%, #00B3FF 58%, #2A6BFF 100%);
  --bg-principal:
    radial-gradient(900px 520px at 20% 15%, rgba(0,179,255,.10), transparent 62%),
    radial-gradient(900px 520px at 80% 22%, rgba(47,164,255,.08), transparent 62%),
    linear-gradient(180deg, #05070C, var(--fondo));

  --glass-borde: 1px solid rgba(255,255,255,.08);
  --glass-fondo: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12));
  --glass-sombra:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 48px rgba(0,0,0,.35);

  --notch-bg: linear-gradient(180deg, rgba(10,15,24,.92), rgba(10,15,24,.70));
}

/* ✅ Ajuste: en pantallas pequeñas, menos “salto” en hover */
@media (max-width: 980px){
  :root{ --card-hover-raise: 3px; }
}
@media (max-width: 640px){
  :root{ --card-hover-raise: 2px; }
}

/* =========================
  BASE
========================= */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  min-height:100vh;
  font-family: var(--font);
  font-weight: 400;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
  position:relative;
  background: var(--bg-principal);
}

/* Halo ambiental */
.halo-central{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(560px 380px at 50% 48%, rgba(0,179,255,.10), transparent 60%),
    radial-gradient(420px 260px at 52% 52%, rgba(47,164,255,.07), transparent 65%);
  filter: blur(8px);
  opacity: .9;
  transform: translate3d(0,0,0);
}

/* Grid tech sutil */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.16;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 55%, transparent 100%);
}

/* Contenido encima */
.barra-navegacion, main{ position:relative; z-index:1; }

/* =========================
  UTILIDADES VISUALES (Global)
========================= */
.accent,
.text-accent{
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(0,179,255,.18), 0 0 22px rgba(0,179,255,.10);
  filter: saturate(1.12) contrast(1.05);
}

.section-header{
  text-align: center;
  max-width: 920px;
  margin: 0 auto 34px;
}

.section-eyebrow{
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin-bottom: 12px;
}

.section-title{
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 0 22px rgba(0,179,255,.10);
}

.section-subtitle{
  color: var(--sub-color);
  line-height: 1.75;
  font-size: 18px;
}

/* =========================
  INTRO 
========================= */
.intro{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 20px;
  background: var(--bg-principal);
  transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease;
  pointer-events: none;
}

.intro.fade-out{
  opacity:0;
  transform: translateY(-10px) scale(.985);
  filter: blur(10px);
}

.intro-contenido{
  width: min(620px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(12px, 3.2vw, 18px);
  perspective: 900px;
  perspective-origin: 50% 45%;
}

/* Marca (aparece firme, sin typing) */
.intro-brand{
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 54px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 0 12px var(--neon-1), 0 0 24px var(--neon-2);

  opacity: 0;
  transform: translateY(8px);
  animation: brandReveal 520ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: 180ms;
}

@keyframes brandReveal{
  to{ opacity:1; transform: translateY(0); }
}

/* Slogan (máquina de escribir) */
.intro-slogan{
  font-size: 16px;
  line-height: 1.55;
  color: rgba(230,241,255,.62);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 8px;
  opacity: .92;
  min-height: 24px;
  text-shadow: 0 0 18px rgba(0,179,255,.08);
}

/* Cursor SOLO para el slogan */
.intro-slogan.cursor::after{
  content:"";
  display:inline-block;
  width: 6px;
  height: 1em;
  margin-left: 6px;
  background: rgba(0,179,255,.95);
  box-shadow: 0 0 8px var(--neon-1), 0 0 16px var(--neon-2);
  border-radius: 2px;
  vertical-align: -0.06em;
  animation: blinkCursor 1s steps(2,end) infinite;
}

@keyframes blinkCursor{
  0%,100%{ opacity:1; }
  50%{ opacity:.15; }
}

.intro-hint{
  font-size: 13px;
  color: rgba(230,241,255,.62);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: .85;
}

/* Touch */
@media (prefers-reduced-motion: reduce){
  .intro{ display:none !important; }
}
@media (max-width: 720px){
  .intro{ display:none !important; }
}

/* =========================
   MASCOTA
========================= */
.mascota{
  position: relative;
  width: clamp(130px, 35vw, 190px);
  height: clamp(130px, 35vw, 190px);
  pointer-events:none;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.50));

  --head-rot-x: 0deg;
  --head-rot-y: 0deg;
  --head-translate-y: 0px;
  --body-x: 0px;
  --body-y: 0px;

  transform-origin: 50% 55%;
  will-change: transform;
  animation: respirar 3.2s ease-in-out infinite;

  transform:
    translate3d(var(--body-x), calc(var(--head-translate-y) + var(--body-y)), 0)
    rotateX(var(--head-rot-x))
    rotateY(var(--head-rot-y));

  transform-style: preserve-3d;
  backface-visibility: hidden;
}

@keyframes respirar{
  0%,100%{ --head-translate-y: 0px; }
  50%{ --head-translate-y: 4px; }
}

.casco{
  position:absolute;
  inset:0;
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.95), rgba(255,255,255,.62) 36%, rgba(255,255,255,.12) 75%, rgba(255,255,255,.06) 100%),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.22), transparent 55%);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.casco::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0,0,0,.18);
  opacity:.22;
}

.visor{
  position:absolute;
  left: 12%;
  right: 12%;
  top: 25%;
  height: 45%;
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,179,255,.06), transparent 45%),
    linear-gradient(180deg, #0B101B, #060A12);
  border: 1px solid rgba(47,164,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.30);
  overflow:hidden;
}
.visor::after{
  content:"";
  position:absolute;
  left:-30%;
  top: 60%;
  width: 160%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,179,255,.18), transparent);
  opacity:.45;
  transform: rotate(-10deg);
}

.cara{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(12px, 3.5vw, 20px);
  transform: translate(calc(var(--eye-x, 0px) * 1), calc(var(--eye-y, 0px) * 1));
  will-change: transform;
}

.ojo{
  width: clamp(12px, 3.2vw, 18px);
  height: clamp(30px, 7.8vw, 44px);
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle at 40% 22%, rgba(255,255,255,.50), transparent 28%),
    linear-gradient(180deg, rgba(0,179,255,.88), rgba(31,127,191,.28));
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 18px rgba(0,179,255,.18);
  transform: scaleY(1);
}

.mascota.parpadeando .ojo{ animation: parpadear .12s ease-in-out 1; }

@keyframes parpadear{
  0%{ transform: scaleY(1); }
  50%{ transform: scaleY(.06); }
  100%{ transform: scaleY(1); }
}

.nodo{
  position:absolute;
  right: 6%;
  top: 44%;
  width: clamp(10px, 2.6vw, 12px);
  height: clamp(10px, 2.6vw, 12px);
  border-radius: var(--r-pill);
  background: rgba(0,179,255,.9);
  box-shadow: 0 0 0 6px rgba(0,179,255,.10), 0 0 18px rgba(0,179,255,.25);
  opacity:.9;
  animation: pulso 1.9s ease-in-out infinite;
}
@keyframes pulso{
  0%,100%{ transform: scale(1); opacity:.9; }
  50%{ transform: scale(1.14); opacity:.7; }
}

.sombra{
  position:absolute;
  left: 14%;
  right: 14%;
  bottom: 8%;
  height: clamp(14px, 3.2vw, 18px);
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(0,0,0,.42), transparent 65%);
  filter: blur(1px);
  opacity:.55;
}

.visor.visor-pulse{ animation: visorPulse .4s ease-out 1; }

@keyframes visorPulse{
  0%{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.30);
    border-color: rgba(47,164,255,.16);
  }
  45%{
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 10px 26px rgba(0,0,0,.30),
      0 0 18px rgba(0,179,255,.22),
      0 0 34px rgba(47,164,255,.14);
    border-color: rgba(0,179,255,.30);
  }
  100%{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.30);
    border-color: rgba(47,164,255,.16);
  }
}

/* =========================
  NAVBAR
========================= */
.barra-navegacion{
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  min-height: var(--nav-h);
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.14));
  border-bottom: 1px solid var(--borde-nav);
}

.contenedor-nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.logo{
  display: flex;
  align-items: center;
  min-width: 140px;
}

.logo img{
  display: block;
  width: auto;
  height: 72px;
  max-width: 220px;
  object-fit: contain;
}

.menu{
  display:flex;
  align-items:center;
  gap: 18px;
  list-style:none;
}
.menu a{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 2px;
  text-decoration:none;
  color: rgba(230,241,255,.70);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .10px;
  transition: color var(--t-fast) ease, transform var(--t-fast) ease, text-shadow var(--t-fast) ease;
}
.menu a::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, var(--cian), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
}
.menu a:hover{
  color: rgba(155,233,255,1);
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(155,233,255,.12), 0 0 px rgba(0,179,255,.08);
}
.menu a:hover::after{ opacity: 1; transform: translateY(0); }

.menu a.activo,
.panel-movil a.activo{
  color: rgba(155,233,255,1);
  text-shadow: 0 0 10px rgba(155,233,255,.12), 0 0 20px rgba(0,179,255,.08);
}
.menu a.activo::after{ opacity: 1; transform: translateY(0); }

.boton-menu{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-12);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  cursor:pointer;
  place-items:center;
  transition: transform var(--t-med) ease, border-color var(--t-med) ease;
}
.boton-menu:hover{ border-color: rgba(0,179,255,.22); transform: translateY(-1px); }

.icono-hamburguesa{ width: 18px; height: 12px; position:relative; }
.icono-hamburguesa span{
  position:absolute; left:0; right:0;
  height:2px;
  background: rgba(255,255,255,.86);
  border-radius: var(--r-pill);
  transition: transform var(--t-med) ease, top var(--t-med) ease, opacity var(--t-med) ease;
}
.icono-hamburguesa span:nth-child(1){ top:0; }
.icono-hamburguesa span:nth-child(2){ top:5px; }
.icono-hamburguesa span:nth-child(3){ top:10px; }
.barra-navegacion.abierta .icono-hamburguesa span:nth-child(1){ top:5px; transform: rotate(45deg); }
.barra-navegacion.abierta .icono-hamburguesa span:nth-child(2){ opacity:0; }
.barra-navegacion.abierta .icono-hamburguesa span:nth-child(3){ top:5px; transform: rotate(-45deg); }

.panel-movil{
  display:none;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.panel-movil ul{
  list-style:none;
  padding: 10px 12px 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-width: var(--max);
  margin: 0 auto;
}
.panel-movil a{
  position: relative;
  display:flex;
  align-items:center;
  padding: 16px 16px;
  border-radius: 20px;
  text-decoration:none;
  color: rgba(230,241,255,.88);
  font-weight: 500;
  letter-spacing: .10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  transition: border-color var(--t-med) ease, background var(--t-med) ease, box-shadow var(--t-med) ease, transform var(--t-med) ease, color var(--t-med) ease;
}
.panel-movil a::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, transparent, var(--cian), transparent);
  opacity: 0;
  transition: opacity var(--t-med) ease;
}
.panel-movil a:hover{
  color: rgba(155,233,255,1);
  border-color: rgba(0,179,255,.22);
  background: rgba(0,179,255,.05);
  box-shadow: 0 0 0 6px rgba(0,179,255,.05), 0 0 18px rgba(0,179,255,.10);
  transform: translateY(-1px);
}
.panel-movil a:hover::before{ opacity: 1; }
.panel-movil a.activo::before{ opacity: 1; }

/* =========================
  SEPARADOR
========================= */
.separador{
  position: relative;
  z-index: 1;
  height: 1px;
  max-width: var(--max);
  margin: 0 auto;
  opacity: .9;
  background: linear-gradient(90deg, transparent, rgba(0,179,255,.22), rgba(255,255,255,.10), rgba(0,179,255,.22), transparent);
  box-shadow: 0 0 22px rgba(0,179,255,.10);
}

/* =========================
  CLIENTES
========================= */
.clientes{ position: relative; z-index: 1; padding: 90px 20px 80px; }
.clientes-contenedor{ max-width: var(--max); margin: 0 auto; }

.logos-marquee{
  position: relative;
  overflow: hidden;
  margin-top: 26px;
  padding: 22px 0;

  /* Difuminado real (sin borde) para entrada/salida del carrusel */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.logos-track{
  display:flex;
  align-items:center;
  gap: clamp(48px, 6vw, 105px);
  width: max-content;
  padding: 0 18px;
  will-change: transform;
  animation: logosMarquee var(--dur, 26s) linear infinite;
}

.logos-marquee:hover .logos-track{ animation-play-state: paused; }
@keyframes logosMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(var(--to, -50%)); }
}

.logos-track img{
  height: clamp(68px, 8vw, 104px);
  width: auto;
  opacity: .78;
  filter: grayscale(1) contrast(1.05) brightness(1.12);
  transition: opacity var(--t-med) var(--ease), filter var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.logos-track img:hover{
  opacity: 1;
  filter: grayscale(0) contrast(1.05) brightness(1.18);
  transform: translateY(-2px) scale(1.03);
}

/* =========================
  SECCIONES: Layout base
========================= */
.nosotros,
.servicios,
.representacion{
  position: relative;
  z-index: 1;
  padding: 90px 20px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.representacion{ padding: 95px 20px; }

.nosotros-contenedor{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 4.5vw, 58px);
  align-items: center;
}

.nosotros-texto{
  max-width: 560px;
  color: rgba(230,241,255,.72);
  line-height: 1.75;
  font-size: 18px;
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}

.nosotros-mockup{
  width: 100%;
  max-width: 600px;
  margin: 22px 0 18px;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

.nosotros-mockup img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  object-fit: cover;
  object-position: center;
  filter:
    drop-shadow(0 24px 44px rgba(0,0,0,.48))
    drop-shadow(0 0 28px rgba(0,179,255,.12));
}

.nosotros-mockup::before{
  content:"";
  position:absolute;
  inset: 10% 8% -8% 8%;
  z-index:-1;
  border-radius: 28px;
  background: radial-gradient(circle, rgba(0,179,255,.22), transparent 70%);
  filter: blur(24px);
  opacity: .7;
}

.nosotros-izq{
  min-width: 0;
}

.nosotros-der{
  min-width: 0;
  position: relative;
  z-index: 2;
}

.nosotros-cta{ display: flex; gap: 12px; flex-wrap: wrap; }

.nosotros-der{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-self: center;
}

.servicios-contenedor,
.representacion-contenedor{
  max-width: var(--max);
  margin: 0 auto;
}

.servicios-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.representacion-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* =========================
  CARD SYSTEM (Global)
========================= */
.card{
  position: relative;
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  overflow: hidden;

  border: var(--glass-borde);
  background: var(--glass-fondo);
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-sombra);

  transform: translateY(0);
  transition:
    transform var(--t-med) ease,
    border-color var(--t-med) ease,
    box-shadow var(--t-med) ease,
    background var(--t-med) ease;

  --mx: 50%;
  --my: 50%;
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;

  background:
    radial-gradient(560px 360px at var(--mx) var(--my), rgba(0,179,255,.24), transparent 60%),
    radial-gradient(420px 300px at calc(var(--mx) + 16%) calc(var(--my) - 10%), rgba(47,164,255,.14), transparent 68%);

  opacity: .46;
  filter: blur(13px);
  transition: opacity var(--t-med) ease, filter var(--t-med) ease;
}

/* Rim light */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: radial-gradient(
    560px 360px at var(--mx) var(--my),
    rgba(0,179,255,.62),
    rgba(47,164,255,.20) 35%,
    transparent 62%
  );

  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  padding: 1px;
  opacity: 0;
  transition: opacity var(--t-med) ease;
}

.card:hover{
  transform: translateY(calc(-1 * var(--card-hover-raise)));
  border-color: rgba(0,179,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.10));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    var(--card-shadow-hover),
    var(--card-hover-glow);
}
.card:hover::before{ opacity: 1; filter: blur(14px); }
.card:hover::after{ opacity: .95; }

/* Tipos dentro de la card */
.card-title{
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.95);
  margin-bottom: 8px;
}

/* ✅ UNIFICACIÓN TOTAL de texto dentro de cards */
.card-text,
.card p,
.card li{
  color: var(--card-text-color);
  font-size: var(--card-text-size);
  line-height: var(--card-text-lh);
}
.card p{ margin: 0; }

/* =========================
  ICON SYSTEM (Global)
========================= */
.icon-badge{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;

  color: rgba(155,233,255,.95);
  border: 1px solid rgba(0,179,255,.18);
  background: rgba(0,0,0,.20);
  box-shadow: 0 0 18px rgba(0,179,255,.10);

  position: relative;
  overflow: hidden;
  transform: translateZ(0);

  transition: border-color var(--t-med) ease, box-shadow var(--t-med) ease, transform var(--t-med) ease;
}

.icon-badge svg{
  width: 24px;
  height: 24px;
  display:block;
  filter: drop-shadow(0 0 10px rgba(0,179,255,.10));
}

/* Ring neon (conic) */
.icon-badge::before{
  content:"";
  position:absolute;
  inset:-60%;
  pointer-events:none;
  opacity: 0;

  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(155,233,255,.16) 70deg,
    rgba(0,179,255,.32) 120deg,
    transparent 200deg,
    transparent 360deg
  );

  filter: blur(1.6px);
  transform: rotate(0deg);
  transition: opacity var(--t-med) ease;
}

@keyframes ringSpin{
  to{ transform: rotate(360deg); }
}

/* Visor/Shine */
.icon-badge::after{
  content:"";
  position:absolute;
  inset:-70%;
  pointer-events:none;

  background: linear-gradient(120deg, transparent 40%, rgba(155,233,255,.14) 50%, transparent 60%);
  transform: translateX(-60%) rotate(12deg);
  opacity: 0;

  animation: badgeShine var(--shine-dur, 6.2s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--shine-delay, 0s);
}

@keyframes badgeShine{
  0%, 58%  { opacity: 0; transform: translateX(-60%) rotate(12deg); }
  70%      { opacity: .9; }
  100%     { opacity: 0; transform: translateX(60%) rotate(12deg); }
}

/* Hover: ring + boost */
.card:hover .icon-badge{
  border-color: rgba(0,179,255,.30);
  box-shadow:
    0 0 22px rgba(0,179,255,.20),
    0 0 44px rgba(47,164,255,.12);
  transform: translateY(-1px);
}
.card:hover .icon-badge::before{
  opacity: 1;
  animation: ringSpin 1.1s linear infinite;
}
.card:hover .icon-badge svg{
  filter: drop-shadow(0 0 16px rgba(0,179,255,.20));
  transform: translateY(-1px) scale(1.06);
  transition: transform var(--t-med) ease;
}

/* Pausa global del shine */
body.shine-paused .icon-badge::after{
  animation-play-state: paused !important;
  opacity: 0 !important;
}
body.shine-resuming .icon-badge::after{
  opacity: 0 !important;
  animation-play-state: paused !important;
}

/* =========================
  LISTAS (servicios)
========================= */
.service-list{
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
.service-list li{
  position: relative;
  padding-left: 16px;
}
.service-list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .60em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(0,179,255,.65);
  box-shadow: 0 0 12px rgba(0,179,255,.22);
}

/* =========================
  APLICACIONES / PORTAFOLIO
========================= */
.apps{
  position: relative;
  z-index: 1;
  padding: 95px 20px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.apps-contenedor{
  max-width: var(--max);
  margin: 0 auto;
}
.apps-header{ margin-bottom: 22px; }

/* Tabs */
.apps-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 12px;
  margin: 18px auto 34px;
}

.apps-tab{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 13px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(12px);

  color: rgba(230,241,255,.90);
  font-weight: 650;
  font-size: 16px;
  letter-spacing: .10px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 12px 28px rgba(0,0,0,.25);

  transition:
    transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}

.apps-tab::after{ display:none !important; }

.apps-tab:hover{
  transform: translateY(-2px);
  border-color: rgba(0,179,255,.40);
  background: rgba(0,179,255,.05);
  color: rgba(255,255,255,.96);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 22px rgba(0,179,255,.10),
    0 18px 44px rgba(0,0,0,.35);
}
.apps-tab.is-active{
  border-color: rgba(0,179,255,.70);
  background: linear-gradient(180deg, rgba(0,179,255,.10), rgba(0,0,0,.10));
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 22px rgba(0,179,255,.14),
    0 18px 44px rgba(0,0,0,.38);
}
.apps-tab:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 3px rgba(0,179,255,.18),
    0 18px 44px rgba(0,0,0,.35);
}

/* Panels */
.apps-panels{ margin-top: 6px; }
.apps-panel{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.apps-panel.is-active{
  opacity: 1;
  transform: translateY(0);
}

/* Layout 2 columnas */
.apps-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}

/* Textos */
.apps-info{ max-width: 560px; }
.apps-h3{
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.95);
  margin-bottom: 12px;
  text-shadow: 0 0 18px rgba(0,179,255,.10);
}
.apps-p{
  color: rgba(230,241,255,.72);
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.apps-list{
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.apps-list li{
  position: relative;
  padding-left: 18px;
  color: rgba(230,241,255,.78);
  font-size: 18px;
  line-height: 1.55;
}
.apps-list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(155,233,255,.90);
  box-shadow: 0 0 12px rgba(0,179,255,.20);
}

/* Visual / mock */
.apps-visual{ display: grid; justify-items: end; }
.apps-mock{
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  padding: 0;

  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(16px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 30px 70px rgba(0,0,0,.55);
}
.apps-mock-bg{ display:none; }
.apps-mock-img{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  filter: none;
  border-radius: inherit;
}
.apps-mock::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.16));
  pointer-events:none;
}

/* Responsive apps */
@media (max-width: 980px){
  .apps-grid{ grid-template-columns: 1fr; }
  .apps-visual{ justify-items: start; }
  .apps-mock{ aspect-ratio: 16 / 10; }
}
@media (max-width: 640px){
  .apps-tab{ padding: 12px 16px; font-size: 13.5px; }
  .apps-list li{ font-size: 15px; }
}

/* =========================
   FAQ SECTION
========================= */
.faq{
  position: relative;
  z-index: 1;
  padding: 95px 20px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.faq-container{
  max-width: var(--max);
  margin: 0 auto;
}

/* Header FAQ */
.faq-header{
  text-align: center;
  max-width: 920px;
  margin: 0 auto 40px;
}
.faq-label{
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin-bottom: 12px;
  display:block;
}
.faq-title{
  font-weight: var(--h2-weight);
  font-size: 41.61px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 0 22px rgba(0,179,255,.10);
}

/* Accordion */
.faq-accordion{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item{
  position: relative;
  border-radius: 18px;
  overflow: hidden;

  border: var(--glass-borde);
  background: var(--glass-fondo);
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-sombra);

  transition:
    transform .35s var(--ease),
    border-color .35s var(--ease),
    box-shadow .35s var(--ease),
    background .35s var(--ease);

  --mx: 50%;
  --my: 50%;
}

.faq-item:hover{
  transform: translateY(-6px);
  border-color: rgba(0,179,255,.55);
  background: linear-gradient(180deg, rgba(0,179,255,.08), rgba(0,0,0,.25));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 35px 90px rgba(0,0,0,.65),
    0 0 50px rgba(0,179,255,.25);
}

/* Glow dinámico FAQ */
.faq-item::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;

  background:
    radial-gradient(560px 360px at var(--mx) var(--my), rgba(0,179,255,.24), transparent 60%),
    radial-gradient(420px 300px at calc(var(--mx) + 16%) calc(var(--my) - 10%), rgba(47,164,255,.14), transparent 68%);

  opacity: .18;
  filter: blur(13px);
  transition: opacity var(--t-med) ease, filter var(--t-med) ease;
}
.faq-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: radial-gradient(
    560px 360px at var(--mx) var(--my),
    rgba(0,179,255,.62),
    rgba(47,164,255,.20) 35%,
    transparent 62%
  );

  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  padding: 1px;
  opacity: 0;
  transition: opacity var(--t-med) ease;
}
.faq-item:hover::before{ opacity: .95; filter: blur(14px); }
.faq-item:hover::after{ opacity: .95; }

/* Question */
.faq-question{
  width: 100%;
  background: none;
  border: none;
  padding: 22px 24px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;
  text-align: left;

  color: rgba(255,255,255,.95);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.faq-question:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 0 3px rgba(0,179,255,.18);
  border-radius: 18px;
}

/* Icon */
.faq-icon{
  width: 18px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
  opacity: .95;
}
.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  background: rgba(155,233,255,.95);
  box-shadow: 0 0 10px rgba(0,179,255,.18);
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}
.faq-icon::before{
  width: 100%;
  height: 2px;
  top: 8px;
  left: 0;
  border-radius: 99px;
}
.faq-icon::after{
  height: 100%;
  width: 2px;
  left: 8px;
  top: 0;
  border-radius: 99px;
}
.faq-item:hover .faq-icon::before,
.faq-item:hover .faq-icon::after{
  background: #6FE7FF;
  box-shadow: 0 0 16px rgba(0,179,255,.35);
}
.faq-item.is-open .faq-icon::after{
  transform: scaleY(0);
  opacity: 0;
}

/* Answer */
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.faq-answer p{
  padding: 0 24px 22px 24px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(230,241,255,.70);
  margin: 0;
}
.faq-item.is-open{
  border-color: rgba(0,179,255,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.10));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 26px 74px rgba(0,0,0,.50),
    0 0 36px rgba(0,179,255,.12);
}

/* Responsive FAQ */
@media (max-width: 640px){
  .faq-title{ font-size: 34px; }
  .faq-question{ padding: 18px 18px; }
  .faq-answer p{ padding: 0 18px 18px 18px; }
}

/* =========================
   CONTACTO
========================= */
.contacto{
  position: relative;
  z-index: 1;
  padding: 95px 20px;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.contacto-contenedor{
  max-width: var(--max);
  margin: 0 auto;
}
.contacto-header{ margin-bottom: 34px; }

.contacto-grid{
  display: grid;
  justify-items: stretch;
  margin-top: 38px;
}

/* Contacto form (card) */
.contacto-form{
  width: 100%;
  max-width: 100%;
  padding: 28px 26px 22px;
}

/* Grid del form */
.contacto-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contacto-form .field--full{ grid-column: 1 / -1; }

/* Floating label */
.contacto-form .field{ position: relative; }

.contacto-form .control{
  width: 100%;
  height: 52px;
  padding: 18px 14px 14px;
  border-radius: 12px;
  font-size: 18px;
  font-family: var(--font);

  background: rgba(10,15,24,.60);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(230,241,255,.95);

  outline: none;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background var(--t-med) var(--ease);
}

.contacto-form .field--textarea .control{
  height: auto;
  min-height: 150px;
  padding-top: 22px;
  resize: vertical;
}

.contacto-form .label{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);

  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  line-height: 1;

  color: rgba(155,233,255,.62);
  pointer-events: none;

  padding: 0;
  background: transparent;

  transition: top var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              padding var(--t-fast) var(--ease);
  opacity: .95;
}

.contacto-form .field--textarea .label{
  top: 18px;
  transform: none;
}

.contacto-form .control:focus{
  border-color: rgba(0,179,255,.55);
  box-shadow: 0 0 0 4px rgba(0,179,255,.10),
              0 0 26px rgba(0,179,255,.14);
  background: rgba(10,15,24,.72);
}

.contacto-form .control::placeholder{
  font-size: 16px;
  color: rgba(230,241,255,.55);
}

/* Label flotante notch */
.contacto-form .control:focus + .label,
.contacto-form .control:not(:placeholder-shown) + .label{
  top: 0;
  transform: translateY(-50%);
  padding: 0 10px;

  color: rgba(0,179,255,.92);
  opacity: 1;
  text-shadow: 0 0 12px rgba(0,179,255,.18);

  background: var(--notch-bg);
  border-radius: 999px;
}

/* Botón */
.contacto-form .btn-submit{
  width: 100%;
  height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--r-pill);
  cursor: pointer;

  border: 1px solid rgba(0,179,255,.55);
  background: rgba(0,0,0,.24);
  backdrop-filter: blur(12px);

  color: #fff;
  font-weight: 650;
  font-size: 16px;
  letter-spacing: .06em;

  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset,
              0 12px 28px rgba(0,0,0,.35);

  transition: transform var(--t-med) ease,
              border-color var(--t-med) ease,
              box-shadow var(--t-med) ease,
              background var(--t-med) ease;

  position: relative;
  overflow: hidden;
}

.contacto-form .btn-submit:hover{
  transform: translateY(-2px);
  border-color: rgba(0,179,255,.85);
  background: rgba(0,179,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset,
              0 0 22px rgba(0,179,255,.12),
              0 18px 44px rgba(0,0,0,.40);
}
.contacto-form .btn-submit:active{ transform: translateY(0); }

/* Fix autocomplete chrome */
.contacto-form .control:-webkit-autofill,
.contacto-form .control:-webkit-autofill:hover,
.contacto-form .control:-webkit-autofill:focus,
.contacto-form .control:-webkit-autofill:active{
  -webkit-text-fill-color: rgba(230,241,255,.95) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(10,15,24,.72) inset !important;
  border: 1px solid rgba(255,255,255,.12);
}
.contacto-form .control:-webkit-autofill + .label{
  top: 0;
  transform: translateY(-50%);
  padding: 0 10px;
  color: rgba(0,179,255,.92);
  background: var(--notch-bg);
}

.contacto-form .field-error{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--sub-color);
  opacity: .9;
}

@media (max-width: 820px){
  .contacto-form-grid{ grid-template-columns: 1fr; }
}

/* CTA READY */
.contacto-form .btn-submit.is-ready{
  border-color: rgba(0,179,255,.90);
  background: rgba(0,179,255,.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 26px rgba(0,179,255,.18),
    0 18px 44px rgba(0,0,0,.40);
}
.contacto-form .btn-submit.is-ready::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 38%, rgba(155,233,255,.18) 50%, transparent 62%);
  transform: translateX(-55%) rotate(12deg);
  animation: btnShine 2.6s cubic-bezier(.2,.8,.2,1) infinite;
  pointer-events:none;
  opacity: .9;
}
@keyframes btnShine{
  0%, 52% { opacity: 0; transform: translateX(-55%) rotate(12deg); }
  72%     { opacity: .95; }
  100%    { opacity: 0; transform: translateX(55%) rotate(12deg); }
}

/* Toast */
.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  width: min(420px, calc(100vw - 36px));
}
.toast[hidden]{ display:none; }

.toast-card{
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  gap: 12px;
  align-items: center;

  padding: 14px 14px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  backdrop-filter: blur(14px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 26px 70px rgba(0,0,0,.55),
    0 0 44px rgba(0,179,255,.16);

  transform: translateY(10px);
  opacity: 0;
}

.toast.is-show .toast-card{
  animation: toastIn 320ms cubic-bezier(.2,.8,.2,1) forwards;
}
.toast.is-hide .toast-card{
  animation: toastOut 220ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes toastIn{ to{ transform: translateY(0); opacity: 1; } }
@keyframes toastOut{ to{ transform: translateY(10px); opacity: 0; } }

.toast-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;

  color: rgba(255,255,255,.95);
  font-weight: 900;

  border: 1px solid rgba(0,179,255,.22);
  background: rgba(0,179,255,.10);
  box-shadow: 0 0 18px rgba(0,179,255,.18);
}

.toast-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.96);
  margin: 0 0 2px 0;
}
.toast-text{
  margin: 0;
  color: rgba(230,241,255,.72);
  line-height: 1.45;
  font-size: 13.5px;
}
.toast-close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(230,241,255,.90);
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.toast-close:hover{
  transform: translateY(-1px);
  border-color: rgba(0,179,255,.30);
}

/* =========================
  MASCOTA FLOTANTE
========================= */
.mascota.mascota-flotante{
  position: fixed;
  right: 60px;
  bottom: 60px;
  z-index: 999;
  pointer-events: none;
}

/* Solo desktop */
/*@media (max-width: 1200px){
  #mascotaFlotante{ display: none !important; }
}*/

/* Mascota flotante responsive */
@media (max-width: 1200px){
  .mascota.mascota-flotante{
    display: block !important;
    right: 28px;
    bottom: 28px;
    width: 120px;
    height: 120px;
    z-index: 1200;
  }
}

@media (max-width: 768px){
  .mascota.mascota-flotante{
    display: block !important;
    right: 18px;
    bottom: 22px;
    width: 96px;
    height: 96px;
    z-index: 1200;
  }

  .mascota-flotante .mascota-bubble{
    min-width: 160px;
    max-width: 210px;
    font-size: 13px;
  }
}

@media (max-width: 480px){
  .mascota.mascota-flotante{
    display: block !important;
    right: 14px;
    bottom: 18px;
    width: 82px;
    height: 82px;
  }

  .mascota-flotante .mascota-bubble{
    right: 0;
    left: auto;
    transform: translateY(10px) scale(.96);
  }

  .mascota-flotante .mascota-bubble.visible{
    transform: translateY(0) scale(1);
  }
}

/* Capa invisible clickeable */
.capa-click-mascota{
  pointer-events: auto;
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* Reacción */
.mascota.reaccionando{
  animation: reaccionMascota 420ms cubic-bezier(.2,.8,.2,1) 1;
}
@keyframes reaccionMascota{
  0%{
    transform:
      translate3d(var(--body-x), calc(var(--head-translate-y) + var(--body-y)), 0)
      rotateX(var(--head-rot-x))
      rotateY(var(--head-rot-y))
      scale(1);
  }
  40%{
    transform:
      translate3d(var(--body-x), calc(var(--head-translate-y) + var(--body-y) - 2px), 0)
      rotateX(var(--head-rot-x))
      rotateY(var(--head-rot-y))
      scale(1.02);
  }
  100%{
    transform:
      translate3d(var(--body-x), calc(var(--head-translate-y) + var(--body-y)), 0)
      rotateX(var(--head-rot-x))
      rotateY(var(--head-rot-y))
      scale(1);
  }
}

/* =========================
  RESPONSIVE GENERAL
========================= */
@media (max-width: 980px){
  .nosotros-contenedor{ grid-template-columns: 1fr; }
  .nosotros-der{ grid-template-columns: 1fr 1fr; }
  .servicios-grid{ grid-template-columns: repeat(2, 1fr); }
  .representacion-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .nosotros-der{ grid-template-columns: 1fr; }
  .servicios-grid{ grid-template-columns: 1fr; }
  .representacion-grid{ grid-template-columns: 1fr; }
}

/* Navbar responsive */
@media (max-width: 860px){
  .menu{ display:none; }
  .boton-menu{ display:grid; }

  .panel-movil{
    display:block;
    max-height:0;
    overflow:hidden;
    transition: max-height .28s ease;
  }
  .barra-navegacion.abierta .panel-movil{ max-height: 460px; }
  .hero{ padding-top: 80px; }
}

/* =========================
  PREMIUM UPGRADE (Cards + Iconos)
========================= */
@media (pointer:fine) and (hover:hover) and (min-width: 980px){
  .cards-grid{ perspective: 900px; }

  .card{
    transform-style: preserve-3d;
    will-change: transform;
    --rx: 0deg;
    --ry: 0deg;
  }

  .card:hover{
    transform:
      translateY(calc(-1 * var(--card-hover-raise)))
      rotateX(var(--rx))
      rotateY(var(--ry));
  }

  body.card-focus .cards-grid .card{
    opacity: .85;
    transform: translateY(1px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  }
  body.card-focus .cards-grid .card.is-hovered{
    opacity: 1;
    transform:
      translateY(calc(-1 * var(--card-hover-raise)))
      rotateX(var(--rx))
      rotateY(var(--ry));
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  body.card-focus .cards-grid .card{ opacity: 1 !important; transform: none !important; }
  .card:hover{ transform: translateY(calc(-1 * var(--card-hover-raise))) !important; }
}

@media (hover: none){
  .card::after{ opacity: 0 !important; }
  .card::before{ opacity: .55; }
  .icon-badge::after{ opacity: .35; animation: none !important; }
}

/* =========================
   FOOTER (Tech premium)
========================= */
.site-footer{
  position: relative;
  padding: 100px 16px 40px;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.35) 25%,
      rgba(0,0,0,.65) 60%,
      #05070C 100%
    );
}

.site-footer{
  position: relative;
  padding: 100px 16px 40px;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.35) 25%,
      rgba(0,0,0,.65) 60%,
      #05070C 100%
    );
}

.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,179,255,.35),
    transparent
  );
  opacity:.6;
}

.footer-glow{
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 520px;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(0,179,255,.18), transparent 65%),
    radial-gradient(closest-side, rgba(47,164,255,.10), transparent 70%);
  filter: blur(12px);
  transform: translateY(40px);
}

.footer-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-top{
  position: relative;
  padding: 60px 0 40px;
  border: none;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.footer-top::before{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,179,255,.55), transparent);
  opacity: .7;
}

.footer-top{
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;
  gap: 22px;
  align-items: start;
}

.footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.footer-logo img{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.footer-logo-text{
  font-weight: 800;
  letter-spacing: .3px;
  color: rgba(230,241,255,.96);
}

.footer-desc{
  margin: 12px 0 14px;
  color: rgba(230,241,255,.74);
  line-height: 1.55;
  max-width: 46ch;
}

.footer-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-badge{
  font-size: 12px;
  letter-spacing: .3px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(230,241,255,.86);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.footer-title{
  margin: 2px 0 12px;
  font-size: 14px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(230,241,255,.90);
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer-links a{
  color: rgba(230,241,255,.74);
  text-decoration: none;
  transition: transform .15s ease, color .15s ease, opacity .15s ease;
}

.footer-links a:hover{
  color: rgba(0,179,255,.95);
  transform: translateX(2px);
}

.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer-contact li{
  display: grid;
  gap: 4px;
}

.footer-k{
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(230,241,255,.55);
}

.footer-contact a,
.footer-v{
  color: rgba(230,241,255,.80);
  text-decoration: none;
}

.footer-contact a:hover{
  color: rgba(0,179,255,.95);
}

.footer-social{
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

.social-btn{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(230,241,255,.90);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.social-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,179,255,.35);
  background: rgba(0,179,255,.08);
}

.footer-bottom{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16px 6px 0;
  margin-top: 14px;
  color: rgba(230,241,255,.60);
  font-size: 16px;
}

/* <= 980px: 2 columnas */
@media (max-width: 980px){
  .footer-top{
    grid-template-columns: 1fr 1fr;
  }
  .footer-desc{
    max-width: 60ch;
  }
}

/* <= 640px: 1 columna + bottom apilado */
@media (max-width: 640px){
  .site-footer{
    padding-top: 52px;
  }

  .footer-top{
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    padding-left: 2px;
    padding-right: 2px;
  }
}

/* Blindaje: el bloque del footer no debe “levantarse” ni tomar sombra/backdrop */
.site-footer,
.footer-container,
.footer-top{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  border-radius: 0 !important;
}

/* Incluso al pasar mouse por encima del área */
.site-footer:hover,
.footer-container:hover,
.footer-top:hover{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Asegura que el glow y separadores nunca “interactúen” */
.site-footer::before,
.footer-top::before,
.footer-glow{
  pointer-events: none;
}

/* Importante: NO tocamos el hover azul; queda tal cual */
.footer-links a:hover,
.footer-contact a:hover{
  color: rgba(0,179,255,.95);
}

.site-footer .footer-top,
.site-footer .footer-container,
.site-footer{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Si el marco viene por hover/focus-within */
.site-footer .footer-top:hover,
.site-footer .footer-top:focus,
.site-footer .footer-top:focus-within,
.site-footer .footer-container:hover,
.site-footer .footer-container:focus-within{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Si el marco lo dibuja un pseudo-elemento (MUY común) */
.site-footer .footer-top::after,
.site-footer .footer-container::after,
.site-footer::after{
  content: none !important;
  display: none !important;
}

.footer-social{
  display:flex;
  gap:14px;
}

.social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
}

.social-btn img{
  width:22px;
  height:22px;
  object-fit:contain;
}

/* =========================
   TRANSICIÓN INTRO → HERO (Premium Tech)
========================= */

/* HERO: base */
#hero .hero-contenido{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

/* Stagger “fino” dentro del hero (si existen estos elementos) */
#hero .hero-contenido > *{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

/* Delays suaves (ajusta si quieres) */
#hero .hero-contenido > *:nth-child(1){ transition-delay: .08s; }
#hero .hero-contenido > *:nth-child(2){ transition-delay: .14s; }
#hero .hero-contenido > *:nth-child(3){ transition-delay: .20s; }
#hero .hero-contenido > *:nth-child(4){ transition-delay: .26s; }
#hero .hero-contenido > *:nth-child(5){ transition-delay: .32s; }

/* Overlay premium: una “cortina” que tapa el sitio y se va */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;

  /* Vidrio oscuro + un toque de luz arriba */
  background:
    radial-gradient(900px 500px at 50% 10%, rgba(0,179,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(10,15,24,.92), rgba(10,15,24,.82));
  opacity: 0;
  transform: translateY(0);
}

/* Cuando empieza la salida de la intro, activamos la cortina un instante */
body.is-transitioning::before{
  opacity: 1;
  transition: opacity .28s ease;
}

/* Y cuando el sitio está listo, la cortina se “abre” con wipe vertical */
body.site-ready::before{
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity .55s cubic-bezier(.16,1,.3,1),
    transform .55s cubic-bezier(.16,1,.3,1);
}

/* Intro fade-out */
.intro{
  opacity: 1;
  transition: opacity .55s ease;
  will-change: opacity;
}
.intro.fade-out{
  opacity: 0;
}

/* Activación del hero */
body.site-ready #hero .hero-contenido{
  opacity: 1;
  transform: translateY(0);
}

/* Activación del stagger interno */
body.site-ready #hero .hero-contenido > *{
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #hero .hero-contenido,
  #hero .hero-contenido > *,
  .intro,
  body::before{
    transition: none !important;
    transform: none !important;
  }
}

/* =========================
   REVEAL SCROLL
========================= */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =================================================
   BURBUJA MASCOTA FLOTANTE
================================================= */

/* contenedor de la mascota flotante */
.mascota.mascota-flotante{
  position: fixed;
  right: 60px;
  bottom: 60px;
  z-index: 999;
  pointer-events: none;
  overflow: visible;
}

/* burbuja de mensaje */
.mascota-flotante .mascota-bubble{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);

  transform: translateX(-50%) translateY(10px) scale(.96);
  transform-origin: bottom center;

  min-width: 180px;
  max-width: 240px;

  padding: 12px 14px;
  border-radius: 16px;

  background: rgba(18,28,42,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(0,180,255,.25);

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 18px rgba(0,180,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.04);

  color: #e8f1ff;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 20;

  transition:
    opacity .32s ease,
    transform .32s ease,
    visibility .32s ease;
}

/* cuando la burbuja aparece */
.mascota-flotante .mascota-bubble.visible{
  opacity: 1;
  visibility: visible;

  transform: translateX(-50%) translateY(0) scale(1);

  animation: bubbleFloat 2.4s ease-in-out infinite;
}

/* texto dentro de la burbuja */
.mascota-flotante .mascota-bubble span{
  display: block;
  white-space: normal;
  word-break: break-word;
}

/* cola triangular de la burbuja */
#mascotaBubble::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform: translateX(-50%);
  width:20px;
  height:12px;
  background: rgba(18,28,42,.88);
  clip-path: polygon(
    50% 100%,
    0% 0%,
    100% 0%
  );

  /* borde para integrarlo con la burbuja */
  border-left:1px solid rgba(0,180,255,.25);
  border-right:1px solid rgba(0,180,255,.25);

  filter: drop-shadow(0 4px 8px rgba(0,180,255,.18));
}

/* animación flotante sutil */
@keyframes bubbleFloat{
  0%,100%{
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50%{
    transform: translateX(-50%) translateY(-4px) scale(1.01);
  }
}

/* efecto ping luminoso de la mascota */
.mascota-flotante::before{
  content:"";
  position:absolute;

  inset:-10px;
  border-radius:50%;

  background: radial-gradient(
    circle,
    rgba(0,179,255,.25) 0%,
    transparent 70%
  );

  opacity:0;
  transform:scale(.6);

  pointer-events:none;
}

.mascota-flotante.ping::before{
  animation: mascotaPing .9s ease-out;
}

@keyframes mascotaPing{
  0%{
    opacity:.7;
    transform:scale(.6);
  }
  70%{
    opacity:.3;
  }
  100%{
    opacity:0;
    transform:scale(1.4);
  }
}

/* ajuste en pantallas más pequeñas */
@media (max-width: 1400px){
  .mascota.mascota-flotante{
    right: 34px;
    bottom: 34px;
  }
}

/* =========================
   CONTROL AUDIO ON/OFF
========================= */

.boton-audio{
  position: fixed;
  left: 22px;
  right: auto;
  bottom: 24px;
  z-index: 1001;

  width: 56px;
  height: 56px;
  border-radius: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(0,179,255,.28);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.24));

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 48px rgba(0,0,0,.38),
    0 0 28px rgba(0,179,255,.10);

  color: rgba(230,241,255,.95);
  cursor: pointer;

  transition:
    transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    opacity var(--t-med) var(--ease);
}

.boton-audio:hover{
  transform: translateY(-2px);
  border-color: rgba(0,179,255,.60);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.055) inset,
    0 22px 56px rgba(0,0,0,.45),
    0 0 24px rgba(0,179,255,.20),
    0 0 48px rgba(47,164,255,.10);
}

.boton-audio-icon{
  position: absolute;
  width: 25px;
  height: 25px;
  background: currentColor;
  transition: opacity .22s ease, transform .22s ease;
}

.icon-audio-on{
  clip-path: path("M3 9 H8 L15 3 V21 L8 15 H3 Z M18 8 C19.4 9.1 20.2 10.4 20.2 12 C20.2 13.6 19.4 14.9 18 16 L16.8 14.6 C17.7 13.9 18.2 13 18.2 12 C18.2 11 17.7 10.1 16.8 9.4 Z M20.5 5.4 C22.6 7.1 24 9.4 24 12 C24 14.6 22.6 16.9 20.5 18.6 L19.2 17 C20.9 15.7 22 14 22 12 C22 10 20.9 8.3 19.2 7 Z");
}

.icon-audio-off{
  clip-path: path("M3 9 H8 L15 3 V21 L8 15 H3 Z M18.2 7.2 L23 12 L18.2 16.8 L16.8 15.4 L20.2 12 L16.8 8.6 Z M16.8 7.2 L18.2 5.8 L23 10.6 L21.6 12 Z");
  opacity: 0;
  transform: scale(.82);
}

.boton-audio.audio-off{
  opacity: .78;
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 16px 42px rgba(0,0,0,.36);
}

.boton-audio.audio-off .icon-audio-on{
  opacity: 0;
  transform: scale(.82);
}

.boton-audio.audio-off .icon-audio-off{
  opacity: 1;
  transform: scale(1);
}

@media(max-width: 720px){
  .boton-audio{
    right: 16px;
    bottom: 84px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
}

/* =========================
   RED INTELIGENTE INTERACTIVA
========================= */
.fondo-interactivo{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  --fx: 50%;
  --fy: 50%;

  background:
    radial-gradient(
      360px circle at var(--fx) var(--fy),
      rgba(0,179,255,.22),
      rgba(0,179,255,.08) 35%,
      transparent 75%
    );

  opacity: .95;
  mix-blend-mode: screen;
}

.red-nodo{
  position: fixed;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: rgba(155,233,255,.9);

  box-shadow:
    0 0 8px rgba(0,179,255,.8),
    0 0 20px rgba(0,179,255,.4);

  pointer-events:none;

  z-index:1;

  animation:
    nodoFade 1.8s ease forwards;
}

.red-linea{
  position: fixed;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,179,255,.55),
      transparent
    );

  transform-origin:left center;

  pointer-events:none;

  z-index:1;

  animation:
    lineaFade 1.8s ease forwards;
}

@keyframes nodoFade{

  0%{
    opacity:0;
    transform:scale(.4);
  }

  15%{
    opacity:1;
    transform:scale(1);
  }

  100%{
    opacity:0;
    transform:scale(.8);
  }
}

@keyframes lineaFade{

  0%{
    opacity:0;
  }

  15%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}

/* =========================
   SERVICIOS CAROUSEL LIMPIO
========================= */

.servicios-carousel{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.servicios-carousel .servicios-grid{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 8px 4px 18px;
}

.servicios-carousel .servicios-grid::-webkit-scrollbar{
  display: none;
}

.servicios-carousel .service-card{
  /*flex: 0 0 calc((100% - 36px) / 3);*/
  flex: 0 0 calc((100% - 52px) / 2.85);
  scroll-snap-align: start;
}

@media(max-width: 980px){
  .servicios-carousel .service-card{
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media(max-width: 640px){
  .servicios-carousel .service-card{
    flex-basis: 88%;
  }
}

.servicios-carousel{
  position: relative;
}

.servicios-carousel::before,
.servicios-carousel::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:60px;
  z-index:2;
  pointer-events:none;
}

.servicios-carousel::before{
  left:0;
  background: linear-gradient(
    90deg,
    rgba(10,15,24,1),
    transparent
  );
}

.servicios-carousel::after{
  right:0;
  background: linear-gradient(
    270deg,
    rgba(10,15,24,1),
    transparent
  );
}

.servicios-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  color:rgba(155,233,255,.72);
  font-size:14px;
  letter-spacing:.02em;
}

.servicios-hint i{
  font-size:13px;
  animation: hintMove 1.4s ease-in-out infinite;
}

@keyframes hintMove{
  0%,100%{ transform:translateX(0); opacity:.65; }
  50%{ transform:translateX(6px); opacity:1; }
}

/* Protección del hero para que no se pierda al recargar */
.hero-contenido,
.hero-titulo,
.hero-subtitulo,
.hero-botones{
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-contenido{
  position: relative;
  z-index: 2;
}

@media (max-width: 980px){
  .nosotros-contenedor{
    grid-template-columns: 1fr;
  }

  .nosotros-mockup{
    max-width: 620px;
  }

  .nosotros-der{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  .nosotros-mockup{
    max-width: 100%;
    margin: 22px 0;
    border-radius: 20px;
  }

  .nosotros-mockup img{
    border-radius: 20px;
  }

  .nosotros-der{
    grid-template-columns: 1fr;
  }
}

.servicios-showcase{
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin: 42px auto 34px;
}

.servicios-showcase-copy{
  max-width: 500px;
}

.servicios-showcase-img{
  width: 100%;
  max-width: 680px;
  justify-self: end;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}

.servicios-showcase-img img{
  width: 100%;
  display: block;
  border-radius: 28px;
  object-fit: cover;
  filter:
    drop-shadow(0 28px 54px rgba(0,0,0,.50))
    drop-shadow(0 0 30px rgba(0,179,255,.10));
}

@media (max-width: 980px){
  .servicios-showcase{
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  .servicios-showcase-copy{
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
  }

  .servicios-showcase-img{
    justify-self: center;
    max-width: 680px;
  }
}

@media (max-width: 640px){
  .servicios-showcase{
    margin: 28px auto;
  }

  .servicios-showcase-img,
  .servicios-showcase-img img{
    border-radius: 20px;
  }
}

.servicios-showcase-copy .section-eyebrow{
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin-bottom: 12px;
  font-weight: 400;
}

.servicios-showcase-copy .section-title{
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 0 22px rgba(0,179,255,.10);
}

.servicios-showcase-copy .section-subtitle{
  color: var(--sub-color);
  line-height: 1.75;
  font-size: 18px;
}

/* =========================
  HERO CON VIDEO
========================= */

.hero{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  scroll-margin-top: calc(var(--nav-h) + 16px);
  min-height: 82vh;
  padding: 90px 20px 60px;
  overflow:hidden;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;

  opacity: .35;
  filter:
    brightness(.80)
    saturate(1.1)
    contrast(1.05);

  pointer-events:none;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

    background:
    radial-gradient(
      900px 500px at 50% 50%,
      rgba(0,179,255,.10),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(5,7,12,.35),
      rgba(5,7,12,.55)
    );      
}

.hero-contenido{
  position:relative;
  z-index:2;
  max-width:900px;
}

.hero-titulo{
  font-weight:900;
  font-size:clamp(34px, 5vw, 64px);
  line-height:1.05;
  letter-spacing:-0.03em;
  color:#fff;
  margin-bottom:22px;
}

.hero-subtitulo{
  font-size:22px;
  line-height:1.6;
  color: rgba(230,241,255,.80);
  font-weight:400;
  max-width:720px;
  margin:0 auto 34px;
}

.hero-botones{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn-principal{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(0,179,255,.55);
  backdrop-filter:blur(12px);
  font-weight:650;
  font-size:22px;
}

.btn-secundario{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  text-decoration:none;
  color:rgba(230,241,255,.92);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  font-weight:600;
  font-size:22px;
}

.hero-video{
  transform: scale(1.2);
}

/* =========================
  CHAT IA TECNOTRANSPORTAR
========================= */
.chat-ia{
  position: fixed;
  inset: 0;
  z-index: 1300;
  pointer-events: none;
}

.chat-ia::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.chat-ia-panel{
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: min(420px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 56px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(500px 280px at 50% 0%, rgba(0,179,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(10,15,24,.78));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 30px 90px rgba(0,0,0,.62),
    0 0 70px rgba(0,179,255,.20);

  transform: translateX(calc(100% + 42px)) scale(.96);
  opacity: 0;
  transition:
    transform 360ms cubic-bezier(.2,.8,.2,1),
    opacity 260ms ease;
}

.chat-ia.abierto{
  pointer-events: auto;
}

.chat-ia.abierto::before{
  opacity: 1;
}

.chat-ia.abierto .chat-ia-panel{
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* Header */
.chat-ia-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
}

.chat-ia-avatar{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: rgba(0,179,255,.14);
  border: 1px solid rgba(0,179,255,.28);
  box-shadow: 0 0 24px rgba(0,179,255,.20);
}

.chat-ia-info{
  flex: 1;
  min-width: 0;
}

.chat-ia-info h3{
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
}

.chat-ia-info p{
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(230,241,255,.68);
}

.chat-ia-info p span{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #25d366;
  box-shadow: 0 0 12px rgba(37,211,102,.7);
}

.chat-ia-close{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(230,241,255,.86);
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.chat-ia-close:hover{
  transform: translateY(-1px);
  border-color: rgba(0,179,255,.34);
  background: rgba(0,179,255,.08);
}

/* Mensajes */
.chat-ia-messages{
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,179,255,.45) transparent;
}

.chat-ia-messages::-webkit-scrollbar{
  width: 6px;
}

.chat-ia-messages::-webkit-scrollbar-thumb{
  background: rgba(0,179,255,.38);
  border-radius: 999px;
}

.chat-msg{
  max-width: 84%;
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.55;
  animation: chatMsgIn 260ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes chatMsgIn{
  from{
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-msg.ia{
  align-self: flex-start;
  color: rgba(255,255,255,.94);
  background:
    linear-gradient(180deg, rgba(0,179,255,.22), rgba(0,179,255,.10));
  border: 1px solid rgba(0,179,255,.22);
  box-shadow: 0 0 24px rgba(0,179,255,.10);
  border-bottom-left-radius: 6px;
}

.chat-msg.usuario{
  align-self: flex-end;
  color: rgba(230,241,255,.94);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-bottom-right-radius: 6px;
}

/* Footer */
.chat-ia-form{
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.18));
}

.chat-ia-form input{
  width: 100%;
  height: 46px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  outline: none;
  padding: 0 15px;
  font-family: var(--font);
  color: rgba(230,241,255,.96);
  background: rgba(0,0,0,.22);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}

.chat-ia-form input::placeholder{
  color: rgba(230,241,255,.46);
}

.chat-ia-form input:focus{
  border-color: rgba(0,179,255,.44);
  background: rgba(0,179,255,.045);
  box-shadow: 0 0 0 4px rgba(0,179,255,.08);
}

.chat-ia-form button{
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #2DBBFF, #00B3FF);
  box-shadow: 0 0 24px rgba(0,179,255,.26);
  transition: transform 180ms var(--ease), filter 180ms var(--ease);
}

.chat-ia-form button:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.chat-ia-form button:active{
  transform: translateY(0) scale(.98);
}

/* Responsive */
@media (max-width: 640px){
  .chat-ia-panel{
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    height: min(640px, calc(100vh - 24px));
    border-radius: 24px;
  }

  .chat-msg{
    max-width: 90%;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .chat-ia-panel,
  .chat-ia::before,
  .chat-msg{
    transition: none !important;
    animation: none !important;
  }
}

.chat-ia-avatar-bot{
  width: 54px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}

.chat-bot{
  position: relative;
  width: 44px;
  height: 44px;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.45));
  animation: chatBotRespirar 3.2s ease-in-out infinite;
}

.chat-bot-casco{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.95), rgba(255,255,255,.62) 36%, rgba(255,255,255,.12) 75%, rgba(255,255,255,.06) 100%),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.22), transparent 55%);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

.chat-bot-casco::before{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  opacity:.22;
}

.chat-bot-visor{
  position:absolute;
  left: 12%;
  right: 12%;
  top: 25%;
  height: 45%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,179,255,.06), transparent 45%),
    linear-gradient(180deg, #0B101B, #060A12);
  border: 1px solid rgba(47,164,255,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 5px 12px rgba(0,0,0,.30);
  overflow:hidden;
}

.chat-bot-visor::after{
  content:"";
  position:absolute;
  left:-30%;
  top: 60%;
  width: 160%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,179,255,.18), transparent);
  opacity:.45;
  transform: rotate(-10deg);
}

.chat-bot-cara{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 5px;
}

.chat-bot-ojo{
  width: 4px;
  height: 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% 22%, rgba(255,255,255,.50), transparent 28%),
    linear-gradient(180deg, rgba(0,179,255,.88), rgba(31,127,191,.28));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 10px rgba(0,179,255,.18);
  transform: scaleY(1);
}

.chat-bot.parpadeando .chat-bot-ojo{
  animation: chatBotParpadear .12s ease-in-out 1;
}

.chat-bot-nodo{
  position:absolute;
  right: 6%;
  top: 44%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,179,255,.9);
  box-shadow:
    0 0 0 3px rgba(0,179,255,.10),
    0 0 10px rgba(0,179,255,.25);
  opacity:.9;
  animation: chatBotPulso 1.9s ease-in-out infinite;
}

@keyframes chatBotRespirar{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(2px); }
}

@keyframes chatBotParpadear{
  0%{ transform: scaleY(1); }
  50%{ transform: scaleY(.06); }
  100%{ transform: scaleY(1); }
}

@keyframes chatBotPulso{
  0%,100%{ transform: scale(1); opacity:.9; }
  50%{ transform: scale(1.14); opacity:.7; }
}

/* =========================
  CHAT IA RESPONSIVE
========================= */

/* Tablets */
@media (max-width: 1024px){
  .chat-ia-panel{
    right: 18px;
    bottom: 18px;
    width: min(390px, calc(100vw - 36px));
    height: min(620px, calc(100vh - 36px));
  }
}

/* Tablets pequeñas y móviles grandes */
@media (max-width: 768px){
  .chat-ia-panel{
    right: 14px;
    left: 14px;
    bottom: 14px;
    width: auto;
    height: min(620px, calc(100vh - 28px));
    border-radius: 24px;
  }

  .chat-ia-header{
    padding: 14px;
  }

  .chat-ia-messages{
    padding: 14px;
  }

  .chat-msg{
    max-width: 90%;
    font-size: 14px;
  }
}

/* Móviles */
@media (max-width: 480px){
  .chat-ia-panel{
    inset: auto 10px 10px 10px;
    width: auto;
    height: min(560px, calc(100dvh - 20px));
    border-radius: 22px;
  }

  .chat-ia-form{
    grid-template-columns: 1fr 44px;
    padding: 12px;
  }

  .chat-ia-form input{
    height: 44px;
    font-size: 14px;
  }

  .chat-ia-form button{
    width: 44px;
    height: 44px;
  }
}

/* Móviles muy pequeños */
@media (max-width: 360px){
  .chat-ia-panel{
    inset: auto 8px 8px 8px;
    height: calc(100dvh - 16px);
  }

  .chat-ia-info h3{
    font-size: 14px;
  }

  .chat-ia-info p{
    font-size: 12px;
  }
}

/* ===============================
   FIX OVERFLOW MOBILE + CHAT IA
================================ */

html,
body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Solo móviles */
@media (max-width: 768px){

  #mascotaFlotante{
    position: fixed !important;
    right: 18px !important;
    left: auto !important;
    bottom: 24px !important;
    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    overflow: visible !important;
    z-index: 9999 !important;
    transform: none !important;
  }

  #mascotaFlotante .mascota-bubble{
    display: none !important;
  }

  #chatIA{
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  #chatIA.abierto{
    pointer-events: auto !important;
  }

  #chatIA .chat-ia-panel{
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;

    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;

    height: min(580px, calc(100dvh - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;

    border-radius: 22px !important;
    overflow: hidden !important;
  }

  body.chat-ia-abierto #mascotaFlotante{
    display: none !important;
  }
}

/* Ajuste visual ojos mascota en móvil */
@media (max-width: 768px){
  #mascotaFlotante .cara{
    gap: 8px !important;
  }

  #mascotaFlotante .ojo{
    width: 9px !important;
    height: 24px !important;
  }
}

@media (max-width: 480px){
  #mascotaFlotante .cara{
    gap: 7px !important;
  }

  #mascotaFlotante .ojo{
    width: 8px !important;
    height: 22px !important;
  }
}

/* Nodo azul proporcional en móvil */
@media (max-width: 768px){
  #mascotaFlotante .nodo{
    width: 6px !important;
    height: 6px !important;
    right: 1px !important;
    top: 36px !important;

    box-shadow:
      0 0 0 3px rgba(0,179,255,.10),
      0 0 8px rgba(0,179,255,.25) !important;
  }
}

@media (max-width: 480px){
  #mascotaFlotante .nodo{
    width: 5px !important;
    height: 5px !important;
    right: 1px !important;
    top: 34px !important;

    box-shadow:
      0 0 0 3px rgba(0,179,255,.10),
      0 0 7px rgba(0,179,255,.22) !important;
  }
}

/* Alinear bitón del audio en móviles */
@media (max-width: 768px){

  .boton-audio{
    left: 20px !important;
    bottom: 24px !important;
  }

  #mascotaFlotante{
    right: 20px !important;
    bottom: 24px !important;
  }

}

/* ==========================================
   FIX TABLETS: MASCOTA + AUDIO VISIBLES
========================================== */

@media (min-width: 769px) and (max-width: 1200px){

  #mascotaFlotante{
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    right: 34px !important;
    bottom: 34px !important;

    width: 110px !important;
    height: 110px !important;

    z-index: 9999 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  #mascotaFlotante .capa-click-mascota{
    pointer-events: auto !important;
  }

  #mascotaFlotante .mascota-bubble{
    display: none !important;
  }

  .boton-audio{
    position: fixed !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    left: 34px !important;
    right: auto !important;
    bottom: 34px !important;

    width: 54px !important;
    height: 54px !important;

    z-index: 9998 !important;
  }
}

/* FIX TABLET HORIZONTAL: MASCOTA + AUDIO */
@media (min-width: 769px) and (max-width: 1400px){

  #mascotaFlotante{
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    right: 34px !important;
    bottom: 34px !important;

    width: 110px !important;
    height: 110px !important;

    z-index: 99999 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  #mascotaFlotante .capa-click-mascota{
    pointer-events: auto !important;
  }

  .boton-audio{
    position: fixed !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    left: 34px !important;
    right: auto !important;
    bottom: 34px !important;

    width: 54px !important;
    height: 54px !important;

    z-index: 99999 !important;
  }
}

/* btns mensajes ia */
.chat-quick-actions{
  width: 100%;
  margin: 12px 0 4px;
  display: grid;
  gap: 12px;
}

.chat-quick-title{
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(155,233,255,.75);
}

.chat-quick-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.chat-quick-btn{
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,179,255,.28);
  background: rgba(0,0,0,.24);
  color: rgba(230,241,255,.92);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.chat-quick-btn:hover{
  border-color: rgba(0,179,255,.65);
  background: rgba(0,179,255,.08);
  color: #fff;
}

.chat-msg.ia.escribiendo::after{
  content: "";
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 5px;
  border-radius: 3px;
  background: rgba(0,179,255,.9);
  vertical-align: -2px;
  animation: cursorTecnoIA .8s steps(2,end) infinite;
}

@keyframes cursorTecnoIA{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .15; }
}

.chat-thinking{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(230,241,255,.78);
}

.thinking-dots{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.thinking-dots i{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,179,255,.9);
  box-shadow: 0 0 10px rgba(0,179,255,.35);
  animation: thinkingDotTecnoIA .9s ease-in-out infinite;
}

.thinking-dots i:nth-child(2){
  animation-delay: .15s;
}

.thinking-dots i:nth-child(3){
  animation-delay: .3s;
}

@keyframes thinkingDotTecnoIA{
  0%, 100%{
    opacity: .25;
    transform: translateY(0);
  }
  50%{
    opacity: 1;
    transform: translateY(-3px);
  }
}