/* ===== SIGESA — estilos compartidos (acento por variable --acc) ===== */
html{scroll-behavior:smooth}
body{font-family:'Inter',Arial,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;background:#0A2540;overflow-x:hidden}
/* Las brasas viven en un canvas de fondo (z-index:-1). Para que se vean a
   través del navy de las secciones —pero NO sobre las fotos, que van encima—
   quitamos el relleno navy sólido de las secciones; el mismo navy del body
   queda detrás. Las imágenes y tarjetas tapan las brasas de forma natural. */
section.bg-marino{background-color:transparent}
.font-head{font-family:'Archivo',Arial,sans-serif}
::selection{background:var(--acc,#1D9CD3);color:#fff}

.acc-tx{color:var(--acc)}
.acc-bg{background:var(--acc)}
.acc-border{border-color:var(--acc)}

.mesh-acc{
  background:
    radial-gradient(60% 60% at 15% 10%, color-mix(in srgb, var(--acc) 26%, transparent) 0%, transparent 60%),
    radial-gradient(50% 50% at 90% 15%, rgba(242,101,34,.16) 0%, transparent 55%),
    radial-gradient(70% 70% at 80% 100%, rgba(29,156,211,.10) 0%, transparent 60%),
    #0A2540;
}
.grid-tech{
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 78%);
          mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 78%);
}
.glass{background:rgba(10,37,64,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-glow{box-shadow:0 10px 30px -8px rgba(242,101,34,.6)}
.btn-glow:hover{box-shadow:0 14px 38px -8px rgba(242,101,34,.75)}
.gsap-fade{will-change:transform,opacity}

/* Cards con spotlight de acento */
.svc{position:relative;overflow:hidden;isolation:isolate}
.svc::after{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--acc) 20%, transparent), transparent 62%)}
.svc:hover::after{opacity:1}
.svc:hover{border-color:color-mix(in srgb, var(--acc) 50%, transparent);transform:translateY(-4px)}

/* Antes / después */
.ba{position:relative;user-select:none;touch-action:none}
.ba .after{position:absolute;inset:0;overflow:hidden;width:50%}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:9999px;background:#fff;color:#0A2540;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.35)}

/* FAQ */
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}

/* WhatsApp */
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-pulse{animation:pulse-ring 2.4s infinite}

/* Botones magnéticos */
.magnetic{transition:transform .18s ease}

/* HUD / tipografía cinética */
.hud-mono{font-family:ui-monospace,'Cascadia Code','Consolas',monospace}
.hud-bracket{position:absolute;width:18px;height:18px;border:2px solid color-mix(in srgb, var(--acc) 50%, transparent)}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee-big{width:max-content;animation:scroll 24s linear infinite}
.marquee-wrap:hover .marquee-big{animation-play-state:paused}
.txt-outline{color:transparent;-webkit-text-stroke:1.6px currentColor}

/* Logo isotipo girando lento (sentido horario) */
@keyframes sigesa-spin{to{transform:rotate(360deg)}}
.logo-spin{animation:sigesa-spin 11s linear infinite;transform-origin:50% 50%}
/* Efecto de luz en navegación (naranja, distinto a los 7 colores de divisiones) */
#nav ul a{transition:color .2s ease, text-shadow .2s ease}
#nav ul a:hover{color:#fff;text-shadow:0 0 14px rgba(242,101,34,.9),0 0 5px rgba(242,101,34,.6)}
[class~="border"][class~="rounded-xl"],[class~="border"][class~="rounded-2xl"],[class~="border"][class~="rounded-3xl"]{position:relative;isolation:isolate}
[class~="border"][class~="rounded-xl"]::after,[class~="border"][class~="rounded-2xl"]::after,[class~="border"][class~="rounded-3xl"]::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .4s ease;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent,#1D9CD3) 22%,transparent),transparent 60%);pointer-events:none}
[class~="border"][class~="rounded-xl"]:hover::after,[class~="border"][class~="rounded-2xl"]:hover::after,[class~="border"][class~="rounded-3xl"]:hover::after{opacity:1}
footer a:hover{color:#fff;text-shadow:0 0 12px rgba(242,101,34,.7)}
a:not(.btn-glow):not([class*="bg-naranja"]):hover{text-shadow:0 0 10px rgba(242,101,34,.5)}
/* ===== Marco cósmico: haz de luz que gira en el borde, solo al pasar el cursor =====
   Se enciende únicamente en elementos accionables (enlaces y campos del formulario).
   Todo el bloque vive dentro de @media (hover:hover) -> en celular y tablet no existe. */
@property --cos-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes cos-spin{to{--cos-ang:360deg}}

@media (hover:hover) and (pointer:fine){
  .marco-cosmos{position:relative;isolation:isolate}
  .marco-cosmos::before{
    content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:conic-gradient(from var(--cos-ang),
      transparent 0deg,
      color-mix(in srgb, var(--accent, var(--acc, #1D9CD3)) 85%, #fff) 22deg,
      #ffffff 38deg,
      var(--accent, var(--acc, #1D9CD3)) 54deg,
      transparent 96deg,
      transparent 180deg,
      var(--accent, var(--acc, #1D9CD3)) 214deg,
      transparent 262deg,
      transparent 360deg);
    /* recorta el relleno y deja solo el contorno */
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    filter:drop-shadow(0 0 5px color-mix(in srgb, var(--accent, var(--acc, #1D9CD3)) 70%, transparent));
    opacity:0;transition:opacity .45s ease;pointer-events:none;z-index:1;
  }
  .marco-cosmos:hover::before,
  .marco-cosmos:focus-within::before{opacity:1;animation:cos-spin 4s linear infinite}
  /* el campo enfocado gira más rápido y no se apaga al quitar el cursor */
  .marco-cosmos:focus-within::before{animation-duration:2.2s}
}
@media (prefers-reduced-motion:reduce){.marco-cosmos::before{animation:none!important}}

/* Haz de luz en móvil/tablet (sin cursor): lo enciende efectos.js en los
   elementos que entran a la vista, añadiendo la clase .cos-activo. */
@media (hover:none){
  .marco-cosmos{position:relative;isolation:isolate}
  .marco-cosmos.cos-activo::before{
    content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:conic-gradient(from var(--cos-ang),
      transparent 0deg,
      color-mix(in srgb, var(--accent, var(--acc, #1D9CD3)) 85%, #fff) 22deg,
      #ffffff 38deg,
      var(--accent, var(--acc, #1D9CD3)) 54deg,
      transparent 96deg,
      transparent 180deg,
      var(--accent, var(--acc, #1D9CD3)) 214deg,
      transparent 262deg,
      transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    filter:drop-shadow(0 0 5px color-mix(in srgb, var(--accent, var(--acc, #1D9CD3)) 70%, transparent));
    pointer-events:none;z-index:1;
    animation:cos-spin 5s linear infinite;
  }
}
@media (prefers-reduced-motion:reduce){.marco-cosmos.cos-activo::before{animation:none!important}}

/* ===== Redes sociales: tubo de neón con el color de cada marca, al pasar el cursor =====
   El color se asigna por el aria-label que cada icono ya tiene -> cero cambios en el HTML.
   Igual que el marco cósmico: todo dentro de @media (hover:hover) -> en celular no existe. */
.social-ic[aria-label="LinkedIn"] {--marca:#0A66C2}
.social-ic[aria-label="Facebook"] {--marca:#1877F2}
.social-ic[aria-label="Instagram"]{--marca:#E4405F}
.social-ic[aria-label="YouTube"]  {--marca:#FF0000}
.social-ic[aria-label="TikTok"]   {--marca:#00F2EA}
.social-ic[aria-label="X"]        {--marca:#FFFFFF}

@media (hover:hover) and (pointer:fine){
  .social-ic{transition:color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease-out}
  /* [aria-label] sube la especificidad para ganarle al hover:border-azul de Tailwind
     y al footer a:hover naranja del molde compartido */
  .social-ic[aria-label]:hover{
    color:var(--marca,#1D9CD3);
    border-color:var(--marca,#1D9CD3);
    transform:translateY(-5px) scale(1.12);
    box-shadow:
      /* vidrio del tubo */
      inset 0 0 0 1px rgba(0,0,0,.25),
            0 0 0 1px rgba(0,0,0,.25),
      /* resplandor dentro y fuera */
      inset 0 0 9px var(--marca,#1D9CD3),
            0 0 11px var(--marca,#1D9CD3);
    text-shadow:none;
  }
}
@media (prefers-reduced-motion:reduce){.social-ic{transition:none}.social-ic[aria-label]:hover{transform:none}}

/* Slider de Proyectos: flechas visibles al pasar el cursor */
#proySlider:hover .ps-nav{opacity:1}
.ps-nav{cursor:pointer}
@media (hover:none){.ps-nav{opacity:1}}
/* Diagramas técnicos protegidos: sin selección, arrastre ni interacción directa */
.protegido{user-select:none;-webkit-user-select:none}
.protegido .diag-bg{pointer-events:none;-webkit-user-drag:none}
@media (prefers-reduced-motion:reduce){.gsap-fade{opacity:1!important;transform:none!important}.marquee-big{animation:none}.logo-spin{animation:none}}