/* v113 · FIRST-PAINT REFRACTION — loader CSS is the first stylesheet.
   An inline SVG filter is parsed as the first child of BODY, BEFORE the loader
   is rendered. Refraction is limited to glass layers: lettering stays sharp. */
html body #preloader.preloader::before{
 -webkit-filter:url(#inv-loader-optic);
 filter:url(#inv-loader-optic);
}
html body #preloader.preloader .animation-preloader .spinner::before{
 -webkit-filter:url(#inv-loader-optic);
 filter:url(#inv-loader-optic);
}

/* v112 · CRISTAL ÓPTICO: se carga como la PRIMERA hoja CSS de cada página.
   Filtro SVG injertado por JS global antes del primer cierre del preloader.
   El anillo usa sombras internas animadas (referencia React), color de marca verde. */
html body #preloader.preloader{
 --theme:#fff;--header:#fff;--bg:#00431b;
 position:fixed!important;inset:0!important;z-index:9999999!important;
 margin:0!important;width:100%!important;height:100dvh!important;
 min-height:100vh;display:flex!important;align-items:center!important;justify-content:center!important;
 isolation:isolate;overflow:hidden;pointer-events:none!important;color:#fff!important;
 background:rgba(0,67,27,.85)!important;
 -webkit-backdrop-filter:blur(7px) saturate(172%)!important;
 backdrop-filter:blur(7px) saturate(172%)!important;
 opacity:1!important;visibility:visible!important;
 transition:opacity .44s ease,visibility .44s ease!important;
}
html body #preloader.preloader::before{
 content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;
 opacity:.79;
 background:
  radial-gradient(ellipse 61% 49% at 23% 4%,rgba(236,255,242,.22),transparent 79%),
  linear-gradient(117deg,transparent 5%,rgba(234,255,248,.17) 21%,transparent 33%,transparent 62%,rgba(178,255,213,.11) 79%,transparent 94%),
  url("../img/cloud-network-topology.svg");
 background-size:auto,auto,1050px auto;
 background-position:center,center,center;
 background-repeat:no-repeat,no-repeat,repeat;
 -webkit-filter:url(#inv-loader-optic);
 filter:url(#inv-loader-optic);
}
html body #preloader.preloader::after{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse 82% 65% at 50% 48%,transparent 35%,rgba(0,24,13,.18));
}
html.inv-backdrop-refraction body #preloader.preloader{
 -webkit-backdrop-filter:blur(1.5px) url(#inv-loader-optic) saturate(184%)!important;
 backdrop-filter:blur(1.5px) url(#inv-loader-optic) saturate(184%)!important;
}
html body #preloader.preloader .loader{display:none!important}
html body #preloader.preloader .animation-preloader{
 position:relative!important;z-index:2!important;
 display:flex!important;flex-direction:column;align-items:center;justify-content:center;
 width:max-content;max-width:95vw;margin:0;padding:0 13px;text-align:center;
 transform:translateY(-2.4vh);
}
html body #preloader.preloader .animation-preloader .spinner{
 position:relative;display:block;box-sizing:border-box;
 width:122px!important;height:122px!important;min-width:122px;min-height:122px;
 margin:0 auto clamp(24px,4.1vh,38px)!important;
 border:0!important;border-radius:50%!important;
 background:rgba(248,255,250,.013)!important;
 box-shadow:
  0 6px 12px 0 rgba(255,255,255,.94) inset,
  0 12px 18px 0 rgba(202,255,220,.52) inset,
  0 36px 38px 0 rgba(69,173,104,.27) inset,
  0 0 7px 1px rgba(255,255,255,.22),
  0 0 25px rgba(215,255,225,.16)!important;
 animation:invLoaderCircle 4.6s linear infinite!important;
}
html body #preloader.preloader .animation-preloader .spinner::before{
 content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
 opacity:.75;
 background:radial-gradient(circle at 27% 20%,rgba(255,255,255,.19),transparent 40%),linear-gradient(115deg,transparent 12%,rgba(255,255,255,.11) 41%,transparent 68%);
 -webkit-filter:url(#inv-loader-optic);
 filter:url(#inv-loader-optic);
}
@keyframes invLoaderCircle{
 0%{transform:rotate(90deg);box-shadow:0 6px 12px 0 #fff inset,0 12px 18px 0 rgba(226,255,236,.80) inset,0 36px 36px 0 rgba(90,203,125,.28) inset,0 0 4px 1px rgba(235,255,239,.31),0 0 13px rgba(235,255,239,.22)}
 50%{transform:rotate(270deg);box-shadow:0 6px 12px 0 #fff inset,0 12px 6px 0 rgba(209,255,228,.77) inset,0 24px 36px 0 rgba(122,220,147,.27) inset,0 0 7px 1.5px rgba(239,255,244,.32),0 0 20px rgba(239,255,244,.25)}
 100%{transform:rotate(450deg);box-shadow:0 6px 12px 0 #fff inset,0 12px 18px 0 rgba(226,255,236,.80) inset,0 36px 36px 0 rgba(90,203,125,.28) inset,0 0 4px 1px rgba(235,255,239,.31),0 0 13px rgba(235,255,239,.22)}
}
html body #preloader.preloader .animation-preloader .txt-loading{
 display:inline-flex!important;align-items:baseline!important;
 font-family:"Stalysta",serif!important;font-weight:400!important;
 font-size:clamp(45px,6.7vw,87px)!important;
 line-height:1!important;letter-spacing:-.05em!important;
 white-space:nowrap;text-align:center;margin:0!important;
 color:#fff!important;filter:brightness(1.25) saturate(1.6);
 text-shadow:0 0 11px rgba(255,255,255,.24),0 0 27px rgba(242,255,247,.18);
}
html body #preloader.preloader .animation-preloader .txt-loading .letters-loading{
 position:relative;display:inline-block!important;
 color:#fff!important;-webkit-text-fill-color:#fff!important;
 animation:invLoaderLetter 3s ease-in-out infinite;
}
html body #preloader.preloader .animation-preloader .txt-loading .letters-loading::before{
 color:#fff!important;-webkit-text-fill-color:#fff!important;
 text-shadow:0 0 9px rgba(255,255,255,.3);
}
html body #preloader.preloader .letters-loading:nth-child(1){animation-delay:0s}
html body #preloader.preloader .letters-loading:nth-child(2){animation-delay:.1s}
html body #preloader.preloader .letters-loading:nth-child(3){animation-delay:.2s}
html body #preloader.preloader .letters-loading:nth-child(4){animation-delay:.3s}
html body #preloader.preloader .letters-loading:nth-child(5){animation-delay:.4s}
html body #preloader.preloader .letters-loading:nth-child(6){animation-delay:.5s}
html body #preloader.preloader .letters-loading:nth-child(7){animation-delay:.6s}
html body #preloader.preloader .letters-loading:nth-child(8){animation-delay:.7s}
html body #preloader.preloader .letters-loading:nth-child(9){animation-delay:.8s}
@keyframes invLoaderLetter{
 0%,100%{opacity:.70;transform:translateY(0)}
 20%{opacity:1;transform:scale(1.075)}
 40%{opacity:.86;transform:translateY(0)}
}
html body #preloader.preloader .animation-preloader > p{
 font-family:"Stalysta",Georgia,serif!important;
 font-size:clamp(27px,3.25vw,39px)!important;
 line-height:1.1!important;font-weight:500!important;letter-spacing:.2em!important;
 text-transform:uppercase!important;color:#fff!important;
 opacity:1!important;margin:0!important;padding:0!important;position:relative;top:-7px;
 text-shadow:0 0 10px rgba(255,255,255,.31),0 0 24px rgba(244,255,246,.16);
}
html body #preloader.preloader.loaded,
html body #preloader.preloader.inv-loader-dismissed{
 opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
html body #preloader.preloader[hidden]{display:none!important}
@media(max-width:767px){
 html body #preloader.preloader .animation-preloader{transform:translateY(-2vh)}
 html body #preloader.preloader .animation-preloader .spinner{
  width:98px!important;height:98px!important;min-width:98px;min-height:98px;
  margin-bottom:23px!important;
 }
 html body #preloader.preloader .animation-preloader .txt-loading{font-size:clamp(39px,9vw,60px)!important}
 html body #preloader.preloader .animation-preloader > p{
  font-size:clamp(23px,5.1vw,31px)!important;letter-spacing:.16em!important;top:-6px;
 }
}
@media(prefers-reduced-motion:reduce){
 html body #preloader.preloader{display:none!important}
 html body #preloader.preloader .animation-preloader .spinner{animation:none!important}
 html body #preloader.preloader .animation-preloader .txt-loading .letters-loading,
 html body #preloader.preloader .animation-preloader .txt-loading .letters-loading::before{animation:none!important}
}

/* Estilo de logo animado compartido. Su fuente es el CSS original de Inicio
   (assets/css/main.css), no una reinterpretación visual. */
@font-face {
  font-family: 'Stalysta';
  src: url('../webfonts/Stalysta.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Colores de la portada originales, aislados del resto del catálogo. */
#preloader{--theme:#00461c;--header:#17012c;--bg:#f7fef3;pointer-events:none}

.preloader {
  align-items: center;
  cursor: default;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
}
.preloader .animation-preloader {
  z-index: 1000;
}
.preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--theme);
  height: 9em;
  margin: 0 auto 3.5em auto;
  width: 9em;
}
@media (max-width: 767px) {
  .preloader .animation-preloader .spinner {
    width: 7.5em;
    height: 7.5em;
    margin: 0 auto 1.5em auto;
  }
}
.preloader .animation-preloader .txt-loading {
            display: inline-flex;
            font-family: 'Stalysta';
            font-size: 4.5em;
            font-weight: normal;
            line-height: 1;
            align-items: baseline;
            letter-spacing: -0.05em;
            text-align: center;
            user-select: none;
}
@media (max-width: 767px) {
  .preloader .animation-preloader .txt-loading {
    font-size: 2.25em;
  }
}
.preloader .animation-preloader .txt-loading .letters-loading {
  color: var(--theme);
  position: relative;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  animation-delay: 0.2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  animation-delay: 0.4s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  animation-delay: 0.6s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  animation-delay: 0.8s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  animation-delay: 1s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  animation-delay: 1.2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
  animation-delay: 1.4s;
}
.preloader .animation-preloader .txt-loading .letters-loading::before {
  animation: letters-loading 4s infinite;
  color: var(--header);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  font-family: "Stalysta";
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
}
.preloader p {
  font-family: "Stalysta", serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 6px;
  color: var(--theme);
  text-transform: uppercase;
}

.preloader .loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  z-index: 1;
  pointer-events: none;
}
.preloader .loader .row {
  height: 100%;
}
.preloader .loader .loader-section {
  padding: 0px;
}
.preloader .loader .loader-section .bg {
  background-color: var(--bg);
  height: 100%;
  left: 0;
  width: 100%;
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.preloader.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}
.preloader.loaded .loader-section .bg {
  width: 0;
  transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
}

/* Bootstrap aporta flex de cuatro columnas en Inicio; se replica de forma
   aislada para que Productos Principales tenga exactamente la misma composición. */
#preloader .loader .row{display:flex;flex-wrap:wrap;margin:0;height:100%}
#preloader .loader .col-3{flex:0 0 auto;width:25%;padding:0}
#preloader .animation-preloader{position:relative;text-align:center}
#preloader[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){
  #preloader{display:none!important}
  #preloader *,#preloader *::before{animation:none!important;transition:none!important}
}

@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@-webkit-keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}



/* v113 · Anillo cinemático inspirado en la referencia de 180 px:
   tres niveles cambiantes de sombra interior y dos halos externos. */
html body #preloader.preloader .animation-preloader .spinner{
 width:180px!important;height:180px!important;min-width:180px;min-height:180px;
 flex:none;
 margin:0 auto clamp(19px,3.4vh,33px)!important;
 border:0!important;border-radius:50%!important;
 background:rgba(244,255,248,.01)!important;
 animation:invLoaderCircle 5s linear infinite!important;
 box-shadow:0 6px 12px 0 rgba(255,255,255,.98) inset,
   0 12px 18px 0 rgba(223,255,233,.86) inset,
   0 36px 36px 0 rgba(42,128,72,.63) inset,
   0 0 3px 1.2px rgba(235,255,243,.42),
   0 0 8px 1.8px rgba(175,255,200,.28)!important;
}
@keyframes invLoaderCircle{
 0%{transform:rotate(90deg);
  box-shadow:0 6px 12px 0 #fff inset,
   0 12px 18px 0 rgba(223,255,233,.88) inset,
   0 36px 36px 0 rgba(38,136,70,.69) inset,
   0 0 3px 1.2px rgba(234,255,239,.38),
   0 0 8px 1.8px rgba(174,255,197,.25)}
 50%{transform:rotate(270deg);
  box-shadow:0 6px 12px 0 #fff inset,
   0 12px 6px 0 rgba(193,255,214,.91) inset,
   0 24px 36px 0 rgba(11,115,48,.72) inset,
   0 0 4px 1.5px rgba(246,255,247,.48),
   0 0 11px 2px rgba(163,255,191,.3)}
 100%{transform:rotate(450deg);
  box-shadow:0 6px 12px 0 #fff inset,
   0 12px 18px 0 rgba(223,255,233,.88) inset,
   0 36px 36px 0 rgba(38,136,70,.69) inset,
   0 0 3px 1.2px rgba(234,255,239,.38),
   0 0 8px 1.8px rgba(174,255,197,.25)}
}
html body #preloader.preloader .animation-preloader .spinner::before{
 inset:-9px;
 opacity:.85;
 background:radial-gradient(circle at 24% 22%,rgba(255,255,255,.22),transparent 35%),
  linear-gradient(120deg,transparent 14%,rgba(248,255,248,.17) 35%,transparent 58%,rgba(180,255,202,.09) 84%,transparent);
}
html body #preloader.preloader .animation-preloader > p{
 top:-12px;
 font-size:clamp(29px,3.4vw,42px)!important;
}
@media(max-width:767px){
 html body #preloader.preloader .animation-preloader .spinner{
  width:132px!important;height:132px!important;min-width:132px;min-height:132px;
  margin-bottom:19px!important
 }
 html body #preloader.preloader .animation-preloader > p{
  top:-9px;font-size:clamp(23px,5.4vw,33px)!important
 }
}
@media(prefers-reduced-motion:reduce){
 html body #preloader.preloader .animation-preloader .spinner{animation:none!important}
}