/* ==========================================================================
   DAZ Solutions Corp — hoja de estilos
   Sin compilación. Editar directo y subir.

   Tres reglas que no se rompen en este archivo:
   1. Nada queda invisible si el JavaScript falla. El estado oculto de las
      animaciones de entrada SOLO existe bajo .armado, que la pone el JS.
   2. prefers-reduced-motion apaga todo el movimiento, no lo atenúa.
   3. Ningún adorno puede provocar scroll horizontal. Los separadores
      diagonales van con clip-path, no con cajas rotadas que sobresalen.
   ========================================================================== */

:root{
  /* --- fondos oscuros --- */
  --fondo:        #0a1622;
  --fondo-2:      #0d1d2b;
  --fondo-3:      #08111b;
  --panel:        #12283a;
  --panel-2:      #16303f;
  --linea:        #1e3d52;
  --linea-suave:  #17303f;

  /* --- fondos claros (secciones alternas) --- */
  --claro:        #eef3f7;
  --claro-2:      #e2eaf1;
  --claro-panel:  #ffffff;
  --claro-linea:  #cfdbe6;
  --claro-texto:  #0c2032;
  --claro-texto-2:#3d5a71;
  --claro-texto-3:#5a7183;

  /* --- texto sobre oscuro --- */
  --texto:        #e9f2f7;
  --texto-2:      #b3cad8;
  --texto-3:      #7f9cae;

  /* --- acentos --- */
  --cian:         #3fb8cf;
  --cian-claro:   #6fd4e6;
  --cian-hondo:   #186c80;
  --cian-tenue:   rgba(63,184,207,.12);
  --verde:        #25a75a;
  --verde-claro:  #2fc46c;

  /* --- un color por familia de servicio ---
     El acento cambia con la disciplina: quien recorre el catálogo distingue
     de un vistazo dónde está, en vez de leer diez tarjetas idénticas. */
  --f-soporte:    #3fb8cf;   /* soporte y gestionados      */
  --f-cableado:   #e2a13f;   /* conectividad y cableado    */
  --f-redes:      #8f86f2;   /* redes y wifi               */
  --f-seguridad:  #ec7361;   /* seguridad y videovigilancia*/
  --f-nube:       #3fcf9b;   /* infraestructura y nube     */
  --f-educativa:  #5ba0f2;   /* plataforma educativa       */
  --f-hardware:   #f08a4b;   /* hardware y equipos         */
  --f-licencias:  #6fb7e8;   /* licencias microsoft        */
  --f-desarrollo: #d976c8;   /* desarrollo y asesoría      */
  --f-suministros:#9fb0bd;   /* suministros de oficina     */

  /* Los mismos diez colores, oscurecidos para leerse sobre fondo claro.
     Un acento pensado para fondo oscuro sobre blanco se queda en 2:1 y el
     texto desaparece. Se cambian en bloque dentro de .clara. */
  --f-soporte-h:    #146b7d;
  --f-cableado-h:   #8a5a06;
  --f-redes-h:      #5b4fd0;
  --f-seguridad-h:  #b4342b;
  --f-nube-h:       #10775a;
  --f-educativa-h:  #2c62b8;
  --f-hardware-h:   #a4500f;
  --f-licencias-h:  #2a6fa0;
  --f-desarrollo-h: #a13a90;
  --f-suministros-h:#56646f;

  /* medidas */
  --ancho:        1180px;
  --radio:        4px;
  --radio-g:      10px;
  --lectura:      65ch;      /* ancho de lectura pedido */

  /* tipografía */
  --display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --cuerpo:  Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box}

/* overflow-x en el HTML y con `clip`, NO `hidden` y NO en el body:
   `hidden` crea un contenedor de scroll y eso rompe el position:sticky de la
   barra de navegación. `clip` corta el desbordamiento sin crear scroll. */
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:18px;              /* cuerpo pedido */
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--cian-claro);text-decoration:none}
a:hover{color:var(--cian)}
/* Un enlace dentro de un párrafo va subrayado. Sin subrayado, quien no pasa
   el cursor por encima no sabe que puede hacer clic — que es exactamente lo
   que pasaba con los enlaces de contacto y de certificaciones. */
main p a:not([class]),.cert-pie a,.form-pie a,.nota-testimonios p a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 55%, transparent);
  transition:text-decoration-color .2s, color .2s;
}
main p a:not([class]):hover,.cert-pie a:hover,.form-pie a:hover,
.nota-testimonios p a:hover{text-decoration-color:currentColor}
/* Los del pie y los datos de contacto se subrayan al pasar por encima */
.pie-nav a:hover,.datos a:hover,.miga a:hover{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
:focus-visible{outline:2px solid var(--cian-claro);outline-offset:3px;border-radius:2px}

.saltar{
  position:absolute;top:0;left:0;z-index:200;
  background:var(--cian);color:#03131c;padding:12px 20px;font-weight:700;
  /* Recortado en vez de empujado a -9999px: así no cuenta como desborde
     horizontal en ninguna medición ni en ningún navegador. */
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;
}
.saltar:focus{clip-path:none;width:auto;height:auto;left:12px;top:12px}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* ==========================================================================
   BARRA DE PROGRESO DE LECTURA
   Adorno puro: si el JS no corre se queda en ancho 0 y no estorba.
   ========================================================================== */
.progreso{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--cian-hondo),var(--cian),var(--cian-claro));
  transition:width .12s linear;
  will-change:width;
}
@media (prefers-reduced-motion: reduce){ .progreso{transition:none} }

/* ==========================================================================
   TIPOGRAFÍA DE SECCIÓN
   ========================================================================== */
.rotulo{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--cian);margin:0 0 16px;display:flex;align-items:center;gap:12px;
}
.rotulo::after{
  content:"";flex:1;height:1px;max-width:120px;
  background:linear-gradient(90deg,var(--linea),transparent);
  transform-origin:left;transform:scaleX(0);transition:transform .6s ease .1s;
}
.visible .rotulo::after,.rotulo.visible::after,
body:not(.armado) .rotulo::after{transform:scaleX(1)}

.titulo{
  font-family:var(--display);font-weight:700;letter-spacing:-.024em;line-height:1.1;
  font-size:clamp(30px,4.6vw,46px);   /* título de sección pedido: 46px */
  margin:0 0 20px;text-wrap:balance;max-width:22ch;
}
.entrada{
  color:var(--texto-2);max-width:var(--lectura);margin:0 0 44px;font-size:18px;
}

.seccion{padding:104px 0;position:relative}
.seccion.oscura{background:var(--fondo-2)}
.seccion.honda{background:var(--fondo-3)}

/* ---------- secciones claras ----------
   El sitio alterna claro y oscuro para que el recorrido tenga ritmo y no se
   lea como un solo bloque de color. */
/* Aquí NO se persiguen selectores uno a uno: se reescriben los tokens.
   Cualquier componente que use var(--texto-2) recibe automáticamente el
   valor oscuro cuando está dentro de una sección clara.

   El bug que esto arregla: `.tarjeta p{color:var(--texto-2)}` tiene la misma
   especificidad que `.clara p` y va después en el archivo, así que ganaba —
   y pintaba texto azul claro (pensado para fondo oscuro) sobre tarjeta
   blanca, a 1.7:1 de contraste. Prácticamente invisible. Reescribir el token
   no depende del orden ni de la especificidad. */
.clara{
  background:var(--claro);
  color:var(--claro-texto);

  --texto:        var(--claro-texto);
  --texto-2:      var(--claro-texto-2);
  --texto-3:      var(--claro-texto-3);
  --linea:        var(--claro-linea);
  --linea-suave:  #dde7ee;
  --panel:        var(--claro-panel);
  --panel-2:      #f7fafc;
  --fondo:        var(--claro);
  --fondo-2:      var(--claro-2);
  --fondo-3:      var(--claro-2);
  --cian:         var(--cian-hondo);
  --cian-claro:   #12586a;
  --cian-tenue:   rgba(24,108,128,.10);
}
/* las familias, en su versión oscura */
.clara .f-soporte,.clara.f-soporte          {--acento:var(--f-soporte-h)}
.clara .f-cableado,.clara.f-cableado        {--acento:var(--f-cableado-h)}
.clara .f-redes,.clara.f-redes              {--acento:var(--f-redes-h)}
.clara .f-seguridad,.clara.f-seguridad      {--acento:var(--f-seguridad-h)}
.clara .f-nube,.clara.f-nube                {--acento:var(--f-nube-h)}
.clara .f-educativa,.clara.f-educativa      {--acento:var(--f-educativa-h)}
.clara .f-hardware,.clara.f-hardware        {--acento:var(--f-hardware-h)}
.clara .f-licencias,.clara.f-licencias      {--acento:var(--f-licencias-h)}
.clara .f-desarrollo,.clara.f-desarrollo    {--acento:var(--f-desarrollo-h)}
.clara .f-suministros,.clara.f-suministros  {--acento:var(--f-suministros-h)}

/* Dos islas que se quedan oscuras DENTRO de una sección clara: el estante de
   insignias (son arte blanco) y los diagramas. Recuperan los tokens oscuros. */
.clara .estante,.clara .diagrama{
  --texto:        #e9f2f7;
  --texto-2:      #b3cad8;
  --texto-3:      #7f9cae;
  --linea:        #1e3d52;
  --linea-suave:  #17303f;
  --panel:        #12283a;
  --fondo:        #0a1622;
  --fondo-2:      #0d1d2b;
  --fondo-3:      #08111b;
  --cian:         #3fb8cf;
  --cian-claro:   #6fd4e6;
  --cian-tenue:   rgba(63,184,207,.12);
  color:var(--texto);
}
.clara .rotulo::after{background:linear-gradient(90deg,var(--claro-linea),transparent)}
/* trama de puntos: da textura sin cargar una sola imagen */
.clara::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--claro-linea) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.55;
  mask-image:linear-gradient(180deg,#000,transparent 55%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);
}
.clara > *{position:relative;z-index:1}

/* ---------- separadores diagonales ----------
   Con clip-path sobre la propia sección: nunca sobresale del ancho y por
   tanto nunca genera scroll horizontal. */
.diag-arriba{clip-path:polygon(0 46px,100% 0,100% 100%,0 100%);margin-top:-46px;padding-top:150px}
.diag-abajo {clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),0 100%);padding-bottom:150px}
.diag-arriba.diag-abajo{
  clip-path:polygon(0 46px,100% 0,100% calc(100% - 46px),0 100%);
}
@media (max-width:760px){
  .diag-arriba{clip-path:polygon(0 22px,100% 0,100% 100%,0 100%);margin-top:-22px;padding-top:96px}
  .diag-abajo {clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%);padding-bottom:96px}
  .diag-arriba.diag-abajo{clip-path:polygon(0 22px,100% 0,100% calc(100% - 22px),0 100%)}
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(10,22,34,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.nav.pegado{
  border-bottom-color:var(--linea);background:rgba(10,22,34,.97);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav-in{
  max-width:var(--ancho);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
/* El logo es casi cuadrado (398x300). Se dimensiona por ALTO, nunca por ancho,
   o la barra de navegación se infla. */
.marca{display:flex;align-items:center;transition:opacity .2s}
.marca:hover{opacity:.82}
.marca img{height:54px;width:auto;max-width:none;transition:height .25s}
.nav.pegado .marca img{height:46px}

.menu{display:flex;align-items:center;gap:30px}
.menu a{
  color:var(--texto-2);font-size:15.5px;font-weight:500;
  position:relative;padding:4px 0;transition:color .18s;
}
.menu a:not(.btn-wa):hover{color:var(--texto)}
.menu a:not(.btn-wa)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--cian);transition:right .22s ease;
}
.menu a:not(.btn-wa):hover::after{right:0}

.hamburguesa{
  display:none;background:none;border:1px solid var(--linea);border-radius:var(--radio);
  /* 44x44 mínimo: es el objetivo táctil que se puede tocar con el pulgar
     sin fallar. Antes medía 33 px de alto. */
  width:46px;height:46px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;gap:5px;flex-direction:column;
  transition:border-color .2s, background .2s;
}
.hamburguesa:hover{border-color:var(--cian);background:var(--cian-tenue)}
.hamburguesa span{display:block;width:20px;height:1.8px;background:var(--texto);transition:transform .25s,opacity .2s}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

@media (max-width:980px){
  .hamburguesa{display:flex}
  .menu{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--fondo-2);border-bottom:1px solid var(--linea);
    padding:8px 24px 20px;
    display:none;
  }
  .menu.abierto{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--linea-suave);font-size:16.5px}
  .menu a::after{display:none}
  .menu .btn-wa{margin-top:14px;border-bottom:none;justify-content:center}
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.ico-wa{
  width:17px;height:17px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--wa) center/contain no-repeat;mask:var(--wa) center/contain no-repeat;
  transition:transform .2s;
  --wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.63.71.23 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23a8.23 8.23 0 0 1 .01 16.47z'/%3E%3C/svg%3E");
}
.ico-mail{
  width:17px;height:17px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  transition:transform .2s;
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.btn-wa{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--verde-claro),var(--verde));
  color:#fff;font-weight:600;font-size:16px;
  padding:12px 21px;border-radius:var(--radio);border:none;cursor:pointer;
  font-family:var(--cuerpo);line-height:1.2;
  box-shadow:0 6px 18px rgba(37,167,90,.22);
  transition:transform .18s, box-shadow .22s, filter .18s;
}
.btn-wa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .55s ease;
}
.btn-wa:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,167,90,.34)}
.btn-wa:hover::after{transform:translateX(120%)}
.btn-wa:hover .ico-wa{transform:scale(1.12)}
.btn-wa.grande{font-size:17px;padding:16px 28px}
.btn-wa.compacto{padding:9px 16px;font-size:14.5px;box-shadow:none}
.btn-wa.bloque{width:100%;justify-content:center;margin-top:8px}

.btn-linea{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--linea);color:var(--texto);
  padding:15px 25px;border-radius:var(--radio);font-weight:600;font-size:16.5px;
  transition:border-color .18s, background .18s, color .18s, transform .18s;
}
.btn-linea:hover{border-color:var(--cian);background:var(--cian-tenue);color:var(--texto);transform:translateY(-2px)}
.btn-linea:hover .ico-mail{transform:translateX(2px)}
.btn-linea.chico{padding:10px 19px;font-size:15px}
.btn-linea.claro{border-color:var(--cian);color:var(--cian-claro)}
.btn-linea.claro:hover{background:var(--cian-tenue);color:var(--texto)}
.btn-linea.bloque{width:100%;justify-content:center;margin-top:10px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:110px 0 104px;
  background:
    radial-gradient(1000px 520px at 14% -12%, rgba(63,184,207,.20), transparent 68%),
    radial-gradient(760px 430px at 94% 10%, rgba(37,167,90,.10), transparent 70%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%);
}
.hero-red{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg, var(--fondo) 4%, rgba(10,22,34,.84) 42%, rgba(10,22,34,.26) 74%, rgba(10,22,34,.55) 100%);
}
@media (max-width:960px){
  .hero-velo{background:linear-gradient(180deg, rgba(10,22,34,.7) 0%, rgba(10,22,34,.9) 55%, var(--fondo) 100%)}
}
/* rejilla técnica: tercer tratamiento de fondo del hero */
.hero-rejilla{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(63,184,207,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(63,184,207,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 26% 24%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 26% 24%, #000 0%, transparent 70%);
}
.hero-in{
  position:relative;z-index:1;
  display:grid;gap:56px;align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:1000px){
  .hero-in{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:44px}
}

.etiqueta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cian);margin:0 0 24px;
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--linea);border-radius:100px;padding:6px 15px;
  background:var(--cian-tenue);
  transition:border-color .25s, background .25s;
}
.etiqueta:hover{border-color:var(--cian)}

.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(40px,7.2vw,80px);   /* titular de portada pedido: 80px */
  line-height:1.02;letter-spacing:-.035em;
  margin:0 0 26px;text-wrap:balance;max-width:15ch;
}
.hero h1 .resalte{
  color:var(--cian);
  background:linear-gradient(180deg,transparent 76%,rgba(63,184,207,.22) 76%);
}

.hero-sub{
  font-size:clamp(18px,1.5vw,21px);color:var(--texto-2);
  max-width:var(--lectura);margin:0 0 38px;line-height:1.62;
}

.hero-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:46px}

.hero-puntos{
  list-style:none;margin:0;padding:26px 0 0;border-top:1px solid var(--linea-suave);
  display:flex;flex-wrap:wrap;gap:12px 38px;
}
.hero-puntos li{
  position:relative;padding-left:24px;color:var(--texto-2);font-size:15.5px;
  transition:color .2s, transform .2s;
}
.hero-puntos li:hover{color:var(--texto);transform:translateX(2px)}
.hero-puntos li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:50%;
  background:var(--cian);box-shadow:0 0 0 4px var(--cian-tenue);
  transition:box-shadow .25s;
}
.hero-puntos li:hover::before{box-shadow:0 0 0 6px var(--cian-tenue)}

.pulso{
  width:7px;height:7px;border-radius:50%;background:var(--cian);
  box-shadow:0 0 0 0 rgba(63,184,207,.7);animation:latido 2.4s ease-out infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(63,184,207,.6)}
  70%{box-shadow:0 0 0 9px rgba(63,184,207,0)}
  100%{box-shadow:0 0 0 0 rgba(63,184,207,0)}
}

/* ==========================================================================
   DIAGRAMAS SVG
   No hay fotos: las instalaciones son data centers bajo confidencialidad.
   El vacío visual se llena con diagramas dibujados con código, uno por
   disciplina. Se sirven VISIBLES; la animación de trazado solo los adorna.
   ========================================================================== */
.diagrama{
  position:relative;
  border:1px solid var(--linea);border-radius:var(--radio-g);
  background:
    radial-gradient(600px 300px at 70% 0%, color-mix(in srgb, var(--acento,#3fb8cf) 12%, transparent), transparent 70%),
    linear-gradient(160deg, var(--panel) 0%, var(--fondo-3) 100%);
  padding:22px;overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
.diagrama:hover{border-color:var(--cian-hondo);box-shadow:0 16px 44px rgba(0,0,0,.34)}
.diagrama::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(63,184,207,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(63,184,207,.05) 1px, transparent 1px);
  background-size:30px 30px;
}
.diagrama svg{position:relative;width:100%;height:auto;display:block}
.diagrama-pie{
  position:relative;margin:16px 0 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-3);text-align:center;
}

/* --- trazos y piezas comunes a todos los diagramas ---
   Heredan --acento, así que el diagrama de cada página de servicio se dibuja
   en el color de su familia. Sin familia definida, cian. */
.diagrama{--acento:var(--cian)}
.f-soporte .diagrama,.hero-int.f-soporte .diagrama{--acento:var(--f-soporte)}
.f-cableado .diagrama,.hero-int.f-cableado .diagrama{--acento:var(--f-cableado)}
.f-redes .diagrama,.hero-int.f-redes .diagrama{--acento:var(--f-redes)}
.f-seguridad .diagrama,.hero-int.f-seguridad .diagrama{--acento:var(--f-seguridad)}
.f-nube .diagrama,.hero-int.f-nube .diagrama{--acento:var(--f-nube)}
.f-educativa .diagrama,.hero-int.f-educativa .diagrama{--acento:var(--f-educativa)}
.f-hardware .diagrama,.hero-int.f-hardware .diagrama{--acento:var(--f-hardware)}
.f-licencias .diagrama,.hero-int.f-licencias .diagrama{--acento:var(--f-licencias)}
.f-desarrollo .diagrama,.hero-int.f-desarrollo .diagrama{--acento:var(--f-desarrollo)}
.f-suministros .diagrama,.hero-int.f-suministros .diagrama{--acento:var(--f-suministros)}

.dg-linea{fill:none;stroke:var(--acento);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.dg-linea-2{fill:none;stroke:var(--texto-3);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.dg-caja{fill:rgba(18,40,58,.9);stroke:var(--acento);stroke-width:1.5}
.dg-caja-2{fill:rgba(18,40,58,.75);stroke:var(--linea);stroke-width:1.4}
.dg-relleno{fill:var(--acento);opacity:.9}
.dg-tenue{fill:var(--acento);opacity:.13}
.dg-texto{
  fill:var(--texto-2);font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
  font-size:9.5px;letter-spacing:.06em;
}
.dg-texto-f{fill:var(--acento)}

/* --- trazado automático: la figura se dibuja sola ---
   Sin .armado (JS caído) los trazos ya están completos y visibles. */
.armado .diagrama .dg-trazo{
  stroke-dasharray:var(--largo,600);stroke-dashoffset:var(--largo,600);
}
.armado .diagrama.visible .dg-trazo{
  animation:trazar 1.5s cubic-bezier(.6,.05,.3,1) forwards;
}
.armado .diagrama .dg-aparece{opacity:0;transform:scale(.85);transform-origin:center;transform-box:fill-box}
.armado .diagrama.visible .dg-aparece{animation:aparecer .55s ease forwards}
.armado .diagrama .dg-sube{opacity:0;transform:translateY(10px);transform-box:fill-box}
.armado .diagrama.visible .dg-sube{animation:subir .6s ease forwards}

@keyframes trazar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1;transform:scale(1)}}
@keyframes subir{to{opacity:1;transform:translateY(0)}}

/* retardos escalonados, para que se lea como un dibujo en curso */
.dg-r1{animation-delay:.05s}.dg-r2{animation-delay:.2s}.dg-r3{animation-delay:.35s}
.dg-r4{animation-delay:.5s}.dg-r5{animation-delay:.65s}.dg-r6{animation-delay:.8s}
.dg-r7{animation-delay:.95s}.dg-r8{animation-delay:1.1s}.dg-r9{animation-delay:1.25s}
.dg-r10{animation-delay:1.4s}.dg-r11{animation-delay:1.55s}.dg-r12{animation-delay:1.7s}

/* pulsos que siguen corriendo: dan vida sin distraer */
.dg-pulso{animation:dgPulso 3.2s ease-in-out infinite}
.dg-pulso-2{animation:dgPulso 3.2s ease-in-out .8s infinite}
.dg-pulso-3{animation:dgPulso 3.2s ease-in-out 1.6s infinite}
@keyframes dgPulso{0%,100%{opacity:.25}50%{opacity:1}}

.dg-recorre{animation:dgRecorre 3.4s linear infinite}
@keyframes dgRecorre{to{stroke-dashoffset:-120}}

.dg-gira{animation:dgGira 14s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes dgGira{to{transform:rotate(360deg)}}

.dg-onda{animation:dgOnda 3s ease-out infinite;transform-origin:center;transform-box:fill-box}
.dg-onda-2{animation:dgOnda 3s ease-out 1s infinite;transform-origin:center;transform-box:fill-box}
.dg-onda-3{animation:dgOnda 3s ease-out 2s infinite;transform-origin:center;transform-box:fill-box}
@keyframes dgOnda{
  0%{transform:scale(.35);opacity:.75}
  100%{transform:scale(1.25);opacity:0}
}

.dg-barrido{animation:dgBarrido 5s ease-in-out infinite alternate;transform-box:fill-box}
@keyframes dgBarrido{0%{transform:rotate(-16deg)}100%{transform:rotate(16deg)}}

@media (prefers-reduced-motion: reduce){
  .dg-pulso,.dg-pulso-2,.dg-pulso-3,.dg-recorre,.dg-gira,
  .dg-onda,.dg-onda-2,.dg-onda-3,.dg-barrido{animation:none}
  .armado .diagrama .dg-trazo{stroke-dasharray:none;stroke-dashoffset:0}
  .armado .diagrama .dg-aparece,.armado .diagrama .dg-sube{opacity:1;transform:none}
}

/* ==========================================================================
   CIFRAS
   ========================================================================== */
.cifras{
  background:
    linear-gradient(120deg, var(--panel) 0%, var(--panel-2) 55%, var(--panel) 100%);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  position:relative;overflow:hidden;
}
.cifras-in{
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));
  padding-top:0;padding-bottom:0;position:relative;z-index:1;
}
.cifra{padding:44px 26px 44px 0;transition:transform .25s}
.cifra:hover{transform:translateY(-3px)}
.cifra-n{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:-.03em;
  color:var(--cian);font-variant-numeric:tabular-nums;margin-bottom:8px;
  transition:color .25s;
}
.cifra:hover .cifra-n{color:var(--cian-claro)}
.cifra-t{display:block;color:var(--texto-2);font-size:15px;max-width:24ch;line-height:1.45}

/* ==========================================================================
   TARJETAS
   ========================================================================== */
.tarjetas{display:grid;gap:22px}
.tarjetas.tres{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.tarjetas.dos{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}

.tarjeta{
  --acento:var(--cian);
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--panel) 0%, var(--fondo-2) 100%);
  border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:32px 30px;
  transition:border-color .22s, transform .22s, box-shadow .28s;
}
.tarjeta::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--acento),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.tarjeta:hover{border-color:var(--acento);transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.32)}
.tarjeta:hover::after{transform:scaleX(1)}
.clara .tarjeta{background:var(--claro-panel)}
.clara .tarjeta:hover{box-shadow:0 18px 40px rgba(12,32,50,.14)}

.tarjeta-ico{
  width:46px;height:46px;border-radius:var(--radio);
  background:var(--cian-tenue);color:var(--acento);
  display:grid;place-items:center;margin-bottom:22px;
  transition:background .25s, transform .25s, color .25s;
}
.tarjeta:hover .tarjeta-ico{background:rgba(63,184,207,.2);transform:translateY(-2px) rotate(-4deg)}
.tarjeta-ico svg{width:23px;height:23px}
.clara .tarjeta-ico{background:color-mix(in srgb, var(--acento) 14%, transparent);color:var(--acento)}

.tarjeta h3{
  font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.015em;
  margin:0 0 12px;line-height:1.25;transition:color .2s;
}
.tarjeta p{margin:0;color:var(--texto-2);font-size:16.5px;max-width:var(--lectura)}

/* tarjeta que además es enlace */
.tarjeta.enlace{display:flex;flex-direction:column;gap:0}
.tarjeta.enlace h3{color:var(--texto)}
.tarjeta.enlace p{flex:1;margin-bottom:18px}
.tarjeta.enlace:hover h3{color:var(--cian)}
.clara .tarjeta.enlace:hover h3{color:var(--acento)}

/* ---------- bloques de texto partido ----------
   Los párrafos largos se parten en tarjetas con jerarquía: un titular corto
   que se puede leer de reojo y el desarrollo debajo. */
.bloques{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:8px}
.bloque-t{
  position:relative;padding:24px 24px 24px 26px;
  border:1px solid var(--linea);border-left:3px solid var(--cian);
  border-radius:0 var(--radio-g) var(--radio-g) 0;
  background:var(--panel);
  transition:transform .22s, border-color .22s, background .22s;
}
.bloque-t:hover{transform:translateX(3px);border-left-color:var(--cian-claro)}
.bloque-t h4{
  font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;
  margin:0 0 8px;color:var(--texto);
}
.bloque-t p{margin:0;color:var(--texto-2);font-size:15.5px;line-height:1.6}
.clara .bloque-t{background:var(--claro-panel);border-color:var(--claro-linea);border-left-color:var(--cian-hondo)}

/* ==========================================================================
   SERVICIOS — un color por familia
   ========================================================================== */
.serv{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--panel) 0%, var(--fondo-2) 100%);
  border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:32px 30px;display:flex;flex-direction:column;
  --acento:var(--cian);
  transition:border-color .22s, transform .22s, box-shadow .28s;
}
.serv::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--acento);
  transform:scaleY(0);transform-origin:top;transition:transform .32s ease;
}
.serv::after{
  content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,var(--acento),transparent 68%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.serv:hover{border-color:var(--acento);transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.32)}
.serv:hover::before{transform:scaleY(1)}
.serv:hover::after{opacity:.14}
.serv h3{
  font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.015em;
  margin:0 0 11px;transition:color .2s;
}
.serv:hover h3{color:var(--acento)}
.serv-d{color:var(--texto);font-size:16.5px;margin:0 0 20px;max-width:var(--lectura)}
.serv ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.serv ul li{
  position:relative;padding-left:21px;color:var(--texto-2);font-size:15.5px;line-height:1.58;
  transition:color .2s, transform .2s;
}
.serv ul li:hover{color:var(--texto);transform:translateX(2px)}
.serv ul li::before{
  content:"";position:absolute;left:0;top:.66em;width:8px;height:1.6px;
  background:var(--acento);transition:width .22s;
}
.serv ul li:hover::before{width:13px}
/* ---------- la llamada a la acción tiene que verse SIN pasar el cursor ----------
   Antes era texto del color del acento con una flecha: quien no pasaba el
   ratón por encima no se enteraba de que la tarjeta llevaba a otra página.
   Ahora es una píldora con borde, fondo y flecha, visible en reposo. */
.serv-cta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acento);
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  /* 11px arriba y abajo para que el botón llegue a los 44 px de objetivo
     táctil sin depender de una media query. */
  padding:11px 18px;border-radius:100px;min-height:44px;box-sizing:border-box;
  border:1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  background:color-mix(in srgb, var(--acento) 10%, transparent);
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.serv-cta::after{
  content:"→";display:inline-block;font-size:14px;line-height:1;
  transition:transform .22s;
}
.serv:hover .serv-cta,.tarjeta.enlace:hover .serv-cta,.serv-cta:hover{
  background:var(--acento);color:#08131c;border-color:var(--acento);
}
.serv:hover .serv-cta::after,.tarjeta.enlace:hover .serv-cta::after,
.serv-cta:hover::after{transform:translateX(4px)}
/* sobre fondo claro el acento es oscuro: el texto del botón lleno va en blanco */
.clara .serv-cta{color:color-mix(in srgb, var(--acento) 88%, #000)}
.clara .serv:hover .serv-cta,.clara .tarjeta.enlace:hover .serv-cta,
.clara .serv-cta:hover{color:#fff}

/* ---------- la tarjeta entera es el enlace ----------
   El visitante hace clic en cualquier parte de la tarjeta, no solo en las
   dos palabras del final. `.serv` es un <article> con un <a> dentro: este
   pseudo-elemento estira ese enlace sobre toda la tarjeta. */
.serv{cursor:pointer}
.serv-cta::before{
  content:"";position:absolute;inset:0;z-index:2;
  border-radius:var(--radio-g);
}
.serv:focus-within{border-color:var(--acento)}
.serv-cta:focus-visible{outline-offset:6px}

/* familias */
.f-soporte    {--acento:var(--f-soporte)}
.f-cableado   {--acento:var(--f-cableado)}
.f-redes      {--acento:var(--f-redes)}
.f-seguridad  {--acento:var(--f-seguridad)}
.f-nube       {--acento:var(--f-nube)}
.f-educativa  {--acento:var(--f-educativa)}
.f-hardware   {--acento:var(--f-hardware)}
.f-licencias  {--acento:var(--f-licencias)}
.f-desarrollo {--acento:var(--f-desarrollo)}
.f-suministros{--acento:var(--f-suministros)}

/* la misma familia tiñe el hero y el diagrama de la página de servicio */
.hero-int.f-soporte,.hero-int.f-cableado,.hero-int.f-redes,.hero-int.f-seguridad,
.hero-int.f-nube,.hero-int.f-educativa,.hero-int.f-hardware,.hero-int.f-licencias,
.hero-int.f-desarrollo,.hero-int.f-suministros{
  background:
    radial-gradient(820px 400px at 10% -22%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%);
}
.hero-int{--acento:var(--cian)}
.hero-int .etiqueta{border-color:var(--acento);color:var(--acento);background:transparent}
.hero-int .pulso{background:var(--acento)}

/* ==========================================================================
   CERTIFICACIONES
   ========================================================================== */
.cert-rejilla{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}
.cert{
  background:linear-gradient(165deg,var(--panel) 0%, var(--fondo-2) 100%);
  border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:32px 30px;position:relative;overflow:hidden;
  transition:border-color .22s, transform .22s, box-shadow .28s;
}
.cert::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cian);
  transform:scaleY(0);transform-origin:top;transition:transform .3s ease;
}
.cert:hover{border-color:var(--cian);transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.3)}
.cert:hover::before{transform:scaleY(1)}
.clara .cert{background:var(--claro-panel);border-color:var(--claro-linea)}
.clara .cert:hover{box-shadow:0 16px 38px rgba(12,32,50,.14)}

/* ---------- la tarjeta de la especialidad ----------
   Ubiquiti / UniFi no es una certificación más: es la disciplina en la que
   DAZ es especialista y la que sostiene su cuenta más grande. Ocupa el doble
   de ancho, lleva sus propias insignias dentro y va marcada. */
.cert.destacada{
  grid-column:1/-1;
  border-color:color-mix(in srgb, var(--acento) 45%, var(--linea));
  background:
    radial-gradient(700px 300px at 88% 0%, color-mix(in srgb, var(--acento) 13%, transparent), transparent 70%),
    linear-gradient(165deg,var(--panel) 0%, var(--fondo-2) 100%);
}
.cert.destacada::before{transform:scaleY(1);background:var(--acento)}
@media (min-width:900px){
  .cert.destacada{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;align-items:center}
  .cert.destacada .cert-texto{grid-column:1}
  .cert.destacada .cert-insignias{grid-column:2}
}
.clara .cert-marbete{color:color-mix(in srgb, var(--acento) 80%, #000)}
.cert-marbete{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento);margin:0 0 14px;
  padding:5px 12px;border-radius:100px;
  border:1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  background:color-mix(in srgb, var(--acento) 12%, transparent);
}
.cert-marbete::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--acento);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--acento) 60%, transparent);
  animation:latido 2.4s ease-out infinite;
}
/* ---------- las insignias, dentro de la tarjeta de su disciplina ----------
   Antes iban todas juntas en una fila aparte, arriba de las tarjetas. La
   administración lo dijo mejor que nadie: el cliente no lee el texto primero,
   *reconoce de un vistazo la insignia de lo que necesita para su proyecto* y
   entonces lee. Si la insignia no está pegada a su disciplina, no cumple su
   trabajo. Ahora cada tarjeta abre con las suyas. */
.cert-insignias{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  margin:0 0 22px;padding:0 0 20px;
  border-bottom:1px solid var(--linea);
}
.cert-insignias img{
  height:54px;width:auto;max-width:100%;
  /* Los archivos son arte BLANCO. Sobre tarjeta clara hay que pasarlos a
     oscuro; sobre tarjeta oscura, dejarlos blancos. */
  filter:brightness(0) invert(1);
  opacity:.9;transition:opacity .22s, transform .22s, filter .22s;
}
.clara .cert-insignias img{filter:brightness(0);opacity:.78}
.cert-insignias img:hover{opacity:1;transform:translateY(-3px) scale(1.05)}
.clara .cert:hover .cert-insignias img{opacity:.92}

/* En la tarjeta de la especialidad las insignias van en su propia placa
   oscura, a la derecha: es la que tiene que pesar más. */
.cert.destacada .cert-insignias{
  justify-content:center;
  padding:24px 20px;margin:22px 0 0;border:1px solid #1e3d52;border-radius:var(--radio-g);
  background:linear-gradient(160deg,#12283a 0%, #0a1622 100%);
}
.cert.destacada .cert-insignias img{height:66px;filter:brightness(0) invert(1);opacity:.9}
@media (min-width:900px){ .cert.destacada .cert-insignias{margin:0} }
.cert-lista{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.cert-lista li{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--texto-2);
  padding:6px 12px;border-radius:100px;
  border:1px solid var(--linea);background:var(--cian-tenue);
  transition:border-color .2s, color .2s, transform .2s;
}
.cert-lista li:hover{border-color:var(--acento);color:var(--texto);transform:translateY(-2px)}

.cert-marca{
  font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 14px;color:var(--texto);
}
.cert-nombre{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--cian);
  margin:0 0 6px;line-height:1.5;
}
.cert-destaque{
  display:inline-block;margin:12px 0 0;padding:6px 13px;border-radius:100px;
  background:var(--cian-tenue);border:1px solid var(--linea);
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cian-claro);
  transition:background .22s, border-color .22s;
}
.cert:hover .cert-destaque{background:rgba(63,184,207,.2);border-color:var(--cian)}
.clara .cert-destaque{color:#12586a;border-color:#b9d9e0;background:#dfeef2}
.cert-d{color:var(--texto-2);font-size:16px;margin:18px 0 0;line-height:1.62;max-width:var(--lectura)}
.cert-pie{
  margin:34px 0 0;color:var(--texto-3);font-size:16px;
  padding-top:24px;border-top:1px solid var(--linea-suave);
}

/* ---------- estante de insignias ----------
   En la sección clara las insignias van sobre un estante oscuro: son arte
   blanco y sobre fondo claro desaparecerían. */
.estante{
  background:
    radial-gradient(680px 260px at 20% 0%, rgba(63,184,207,.14), transparent 70%),
    linear-gradient(160deg, var(--panel) 0%, var(--fondo) 100%);
  border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:34px 30px 30px;margin:0 0 40px;
  box-shadow:0 20px 50px rgba(12,32,50,.16);
}
.estante-r{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  /* --texto-3 sobre el estante oscuro daba 2.59:1. Con --texto-2 son 8.9:1. */
  color:var(--texto-2);margin:0 0 24px;text-align:center;
}
.insignias{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:30px 44px;margin:0;
}
.insignias img{
  height:74px;width:auto;max-width:none;
  filter:brightness(0) invert(1);
  opacity:.88;transition:opacity .22s, transform .22s, filter .22s;
}
.insignias img:hover{opacity:1;transform:translateY(-4px) scale(1.04)}

.cert-modelo{
  margin-top:36px;padding:32px 34px;
  border:1px solid var(--linea);border-left:3px solid var(--cian);
  border-radius:0 var(--radio-g) var(--radio-g) 0;
  background:var(--panel);
  transition:border-left-color .25s;
}
.cert-modelo:hover{border-left-color:var(--cian-claro)}
.cert-modelo h3{
  font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.015em;
  margin:0 0 14px;
}
.cert-modelo p{color:var(--texto-2);font-size:16.5px;margin:0 0 14px;max-width:var(--lectura)}
.cert-modelo .cert-pie{
  margin:0;padding-top:18px;border-top:1px solid var(--linea-suave);
  font-size:15.5px;color:var(--texto-3);
}
.clara .cert-modelo{background:var(--claro-panel);border-color:var(--claro-linea);border-left-color:var(--cian-hondo)}

/* ==========================================================================
   TIRA DE TECNOLOGÍAS — marquesina continua
   El HTML trae UNA lista. El JS la duplica para que el desplazamiento no
   tenga costura. Sin JS queda una fila centrada, legible y quieta.
   ========================================================================== */
.tecnos{
  background:linear-gradient(180deg, var(--fondo-3), var(--fondo-2));
  border-top:1px solid var(--linea-suave);border-bottom:1px solid var(--linea-suave);
  padding:52px 0;overflow:hidden;
}
.tecnos-r{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-3);margin:0 0 30px;text-align:center;
}
.marquesina{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tira{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:26px 52px;margin:0;padding:0;list-style:none;
}
/* cuando el JS arma la marquesina, la fila deja de envolver y rueda */
.marquesina.rueda{display:flex;width:max-content}
.marquesina.rueda .tira{
  flex-wrap:nowrap;justify-content:flex-start;
  animation:rodar var(--vel,42s) linear infinite;
  padding-right:52px;
}
.marquesina.rueda:hover .tira{animation-play-state:paused}
@keyframes rodar{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){
  .marquesina.rueda .tira{animation:none}
  .marquesina.rueda{width:auto;overflow-x:auto}
}
/* Caja fija: normaliza alto Y ancho. Sin esto, un wordmark ancho como
   Fortinet ocupa 10 veces más que un isotipo como Adobe y la tira deja
   de leerse como un sistema. */
.tira img{
  height:34px;width:auto;max-width:132px;object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.5;transition:opacity .22s, transform .22s;
}
.tira img:hover{opacity:1;transform:scale(1.08)}
/* Los isotipos altos y estrechos necesitan más alto para pesar igual */
.tira img[alt="UniFi"],
.tira img[alt="Adobe"]{height:40px}
.tira img[alt="Nexxt Solutions"]{height:30px}

/* ==========================================================================
   PROCESO
   ========================================================================== */
.proceso{
  list-style:none;margin:0;padding:0;
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
}
.proceso li{
  position:relative;padding:32px 28px 30px;
  background:linear-gradient(165deg,var(--fondo) 0%, var(--panel) 100%);
  border:1px solid var(--linea);border-radius:var(--radio-g);
  transition:transform .22s, border-color .22s, box-shadow .28s;
}
.proceso li:hover{transform:translateY(-4px);border-color:var(--cian);box-shadow:0 16px 38px rgba(0,0,0,.3)}
.proceso li::after{
  content:"";position:absolute;top:54px;right:-12px;width:24px;height:1px;
  background:var(--linea);z-index:1;transition:background .25s;
}
.proceso li:hover::after{background:var(--cian)}
.proceso li:last-child::after{display:none}
@media (max-width:1080px){.proceso li::after{display:none}}
.clara .proceso li{background:var(--claro-panel);border-color:var(--claro-linea)}
.clara .proceso li:hover{box-shadow:0 16px 38px rgba(12,32,50,.14)}

.paso-n{
  display:block;font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.16em;color:var(--cian);margin-bottom:18px;
  transition:letter-spacing .25s;
}
.proceso li:hover .paso-n{letter-spacing:.26em}
.proceso h3{
  font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.015em;
  margin:0 0 11px;line-height:1.3;
}
.proceso p{margin:0;color:var(--texto-2);font-size:16px;max-width:var(--lectura)}

/* ==========================================================================
   BANDA CTA — degradado
   ========================================================================== */
.banda{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 320px at 12% 50%, rgba(63,184,207,.24), transparent 68%),
    radial-gradient(620px 300px at 88% 20%, rgba(37,167,90,.18), transparent 70%),
    linear-gradient(115deg, #0f2739 0%, #14364b 46%, #0d2233 100%);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:66px 0;
}
.banda::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 100%;
}
.banda-in{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px;
}
.banda h2{
  font-family:var(--display);font-size:clamp(26px,3.4vw,38px);font-weight:700;
  letter-spacing:-.024em;margin:0 0 10px;text-wrap:balance;max-width:22ch;color:var(--texto);
}
.banda p{margin:0;color:var(--texto-2);font-size:17px;max-width:48ch}
.banda-acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ==========================================================================
   SECTORES
   ========================================================================== */
.sectores{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio-g);
  overflow:hidden;
}
.sectores li{
  background:var(--fondo);padding:28px 28px;
  transition:background .25s, transform .25s;
}
.sectores li:hover{background:var(--panel)}
.sectores strong{
  display:block;font-family:var(--display);font-size:18px;font-weight:700;
  margin-bottom:8px;letter-spacing:-.01em;transition:color .2s;
}
.sectores li:hover strong{color:var(--cian)}
.sectores span{color:var(--texto-2);font-size:15.5px;line-height:1.58}
.clara .sectores{background:var(--claro-linea);border-color:var(--claro-linea)}
.clara .sectores li{background:var(--claro-panel)}
.clara .sectores li:hover{background:#f7fafc}
.clara .sectores li:hover strong{color:var(--acento,var(--cian-hondo))}

.nota-testimonios{
  margin-top:32px;padding:26px 28px;
  border:1px dashed var(--linea);border-radius:var(--radio-g);
  background:var(--cian-tenue);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  transition:border-color .25s;
}
.nota-testimonios:hover{border-color:var(--cian)}
.nota-testimonios p{margin:0;color:var(--texto-2);font-size:16px;max-width:var(--lectura)}
.nota-testimonios strong{color:var(--texto)}
.clara .nota-testimonios{border-color:var(--claro-linea);background:rgba(24,108,128,.07)}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto-rejilla{display:grid;gap:52px;grid-template-columns:1fr}
@media(min-width:940px){.contacto-rejilla{grid-template-columns:1fr 1fr;gap:70px;align-items:start}}

.datos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
.datos li{display:flex;flex-direction:column;gap:5px;transition:transform .22s}
.datos li:hover{transform:translateX(3px)}
.dato-r{
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-3);
}
.datos a,.dato-v{font-size:18px;color:var(--texto);font-weight:500;line-height:1.45;transition:color .2s}
.datos a:hover{color:var(--cian)}

.form{
  background:linear-gradient(165deg,var(--panel) 0%, var(--fondo-2) 100%);
  border:1px solid var(--linea);border-radius:var(--radio-g);
  padding:34px 32px;display:flex;flex-direction:column;
  transition:border-color .25s, box-shadow .3s;
}
.form:focus-within{border-color:var(--cian);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.form-t{
  font-family:var(--display);font-size:22px;font-weight:700;margin:0 0 24px;letter-spacing:-.015em;
}
.form label{
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:8px;transition:color .2s;
}
.form label span{color:var(--cian)}
.form input,.form select,.form textarea{
  background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);
  color:var(--texto);font-family:var(--cuerpo);font-size:16.5px;
  padding:13px 15px;margin-bottom:20px;width:100%;
  transition:border-color .18s, box-shadow .2s, background .2s;
}
.form input::placeholder,.form textarea::placeholder{color:var(--texto-3)}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--cian);outline:none;box-shadow:0 0 0 3px var(--cian-tenue);
}
.form input.malo,.form textarea.malo{border-color:#e0616b}
.form textarea{resize:vertical;min-height:110px}
.form select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--texto-3) 50%),linear-gradient(135deg,var(--texto-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.form-pie{font-size:14.5px;color:var(--texto-3);margin:18px 0 0;line-height:1.55}
.form-error{color:#e0616b;font-size:15px;margin:12px 0 0}

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{
  background:linear-gradient(180deg,var(--fondo-2),var(--fondo-3));
  border-top:1px solid var(--linea);padding-top:64px;
}
.pie-in{
  display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  padding-bottom:46px;
}
.pie-marca img{height:48px;width:auto;max-width:none;margin-bottom:18px;transition:opacity .2s}
.pie-marca a:hover img{opacity:.8}
.pie-marca p{color:var(--texto-3);font-size:15px;margin:0;max-width:38ch}
.pie-nav{display:flex;flex-direction:column;gap:11px}
.pie-r{
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-3);margin:0 0 4px;
}
.pie-nav a{color:var(--texto-2);font-size:15.5px;transition:color .18s, transform .18s;width:fit-content}
.pie-nav a:hover{color:var(--cian);transform:translateX(3px)}
.pie-legal{
  border-top:1px solid var(--linea-suave);padding-top:22px;padding-bottom:28px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
}
.pie-legal p{margin:0;color:var(--texto-3);font-size:14.5px}

/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.wa-flotante{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--verde-claro),var(--verde));color:#fff;
  display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.44);
  transition:transform .22s, box-shadow .25s;
}
.wa-flotante::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(47,196,108,.5);
  animation:flota 2.8s ease-out infinite;
}
@keyframes flota{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.5);opacity:0}
}
.wa-flotante:hover{color:#fff;transform:scale(1.08) translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.wa-flotante .ico-wa{width:28px;height:28px}
@media (prefers-reduced-motion: reduce){ .wa-flotante::before{animation:none;opacity:0} }

/* ==========================================================================
   PÁGINAS DE SERVICIO
   ========================================================================== */
.miga{
  border-bottom:1px solid var(--linea-suave);background:var(--fondo-2);
  padding:13px 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
}
.miga a{color:var(--texto-3);transition:color .18s}
.miga a:hover{color:var(--cian)}
.miga span{color:var(--texto-2)}
.miga span[aria-hidden]{color:var(--texto-3);margin:0 6px}

.hero-int{
  position:relative;overflow:hidden;
  padding:80px 0 74px;
  background:
    radial-gradient(820px 400px at 10% -22%, rgba(63,184,207,.18), transparent 70%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%);
  border-bottom:1px solid var(--linea-suave);
}
.hero-int-in{display:grid;gap:48px;grid-template-columns:1fr;align-items:center;position:relative;z-index:1}
@media (min-width:1000px){
  .hero-int-in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
}
.hero-int h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,5.4vw,58px);line-height:1.04;letter-spacing:-.03em;
  margin:0 0 22px;text-wrap:balance;max-width:18ch;
}
.hero-int .hero-sub{margin-bottom:34px;max-width:var(--lectura)}

.dolor{
  font-family:var(--display);font-size:clamp(20px,2.6vw,28px);font-weight:600;
  line-height:1.4;letter-spacing:-.015em;color:var(--texto);
  border-left:3px solid var(--cian);padding:6px 0 6px 24px;
  margin:0 0 58px;max-width:56ch;
  transition:border-left-color .25s;
}
.dolor:hover{border-left-color:var(--cian-claro)}

/* ---------- preguntas frecuentes ---------- */
.faq{display:flex;flex-direction:column;gap:3px;max-width:80ch}
.faq-i{
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  transition:border-color .2s, background .2s;
}
.faq-i:hover{border-color:var(--cian)}
.faq-i summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  transition:color .18s;
}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{
  content:"+";font-family:var(--mono);font-size:20px;color:var(--cian);
  line-height:1;flex:0 0 auto;transition:transform .25s;
}
.faq-i[open] summary::after{content:"–"}
.faq-i summary:hover{color:var(--cian)}
.faq-i:focus-within{border-color:var(--cian)}
.faq-r{padding:0 24px 22px}
.faq-r p{margin:0;color:var(--texto-2);font-size:16.5px;max-width:var(--lectura)}
.clara .faq-i{background:var(--claro-panel);border-color:var(--claro-linea)}
.clara .faq-i:hover{border-color:var(--cian)}
.clara .faq-i summary:hover{color:var(--cian)}

/* ==========================================================================
   REVELADO AL HACER SCROLL
   El contenido es visible por defecto. La clase .armado la pone el JS solo
   si el navegador soporta IntersectionObserver: si el JS falla, no se
   esconde nada. Nunca repetir el error de la web anterior.
   ========================================================================== */
.armado .revelar{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.armado .revelar.visible{opacity:1;transform:none}
.armado .revelar-izq{opacity:0;transform:translateX(-22px);transition:opacity .6s ease, transform .6s ease}
.armado .revelar-izq.visible{opacity:1;transform:none}
.armado .revelar-der{opacity:0;transform:translateX(22px);transition:opacity .6s ease, transform .6s ease}
.armado .revelar-der.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .armado .revelar,.armado .revelar-izq,.armado .revelar-der{
    opacity:1;transform:none;transition:none;
  }
}

/* parallax del hero: lo mueve el JS con una variable, no con scroll listeners
   sobre estilos individuales */
.hero-capa{transform:translate3d(0,var(--par,0px),0);will-change:transform}

/* ==========================================================================
   AJUSTES MÓVIL
   ========================================================================== */
/* Por debajo de 380 px (iPhone SE, Galaxy A pequeños) el margen de 24 px a
   cada lado se come el 15% de la pantalla. */
@media (max-width:380px){
  .contenedor{padding:0 18px}
  .nav-in{padding:12px 18px}
  .titulo{font-size:clamp(26px,7vw,34px)}
  .cert-marca{font-size:20px}
  .cert-lista li{font-size:11.5px;padding:5px 10px}
  .cert-insignias{gap:12px 16px}
  .cert-insignias img{height:38px}
  .cert.destacada .cert-insignias{gap:16px 18px;padding:18px 14px}
  .cert.destacada .cert-insignias img{height:52px}
}

@media (max-width:640px){
  body{font-size:17px}
  /* Teléfono y correo son las dos acciones que más se tocan desde el móvil:
     que tengan altura de dedo, no de ratón. */
  .datos li{gap:6px}
  .datos a{
    display:inline-flex;align-items:center;min-height:44px;
    padding:6px 0;font-size:18.5px;
  }
  .faq-i summary{min-height:52px;align-items:center}
  .seccion{padding:74px 0}
  .hero{padding:70px 0 66px}
  .hero-acciones{flex-direction:column;align-items:stretch}
  .hero-acciones .btn-wa,.hero-acciones .btn-linea{justify-content:center}
  .cifra{padding:32px 20px 32px 0}
  .tarjeta,.serv,.cert,.form{padding:26px 22px}
  .estante{padding:26px 18px 22px}
  .insignias{gap:24px 30px}
  .insignias img{height:56px}
  .tira{gap:20px 30px}
  .tira img{height:27px;max-width:104px}
  .tira img[alt="UniFi"],
  .tira img[alt="Adobe"]{height:32px}
  .tira img[alt="Nexxt Solutions"]{height:24px}
  .cert-modelo{padding:24px 22px}
  .nota-testimonios{flex-direction:column;align-items:flex-start}
  .banda-acciones{flex-direction:column;align-items:stretch;width:100%}
  .banda-acciones .btn-wa,.banda-acciones .btn-linea{justify-content:center}
  .marca img{height:44px}
  .nav.pegado .marca img{height:40px}
  .wa-flotante{right:14px;bottom:14px;width:54px;height:54px}
  .hero-int{padding:52px 0 48px}
  .dolor{margin-bottom:42px;padding-left:18px}
  .faq-i summary{padding:17px 19px;font-size:17px}
  .faq-r{padding:0 19px 19px}
  .diagrama{padding:16px}
}