/* header */ 

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

.header-camaleon-2025{ position: fixed; width: 100%; height: auto; background: #02538E; top: 0; left: 0; right: 0; z-index: 99; }

#acrilicos,
#silicones,
#poliuretanos {
    scroll-margin-top: 150px;
  }

  :root{
    --transition-speed: 0.4s;
    --transition-func: cubic-bezier(0.16, 1, 0.3, 1);
  }

body{ 
    overflow-x: hidden;
    cursor: none;
    transition: background-color var(--transition-speed) var(--transition-func);
    opacity: 0;
    animation: fadeIn 1s var(--transition-func) forwards 0.5s;
}


  .cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #02538E;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
}

.cursor-follower {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1px solid #02538E;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: all 0.15s ease-out;
}

.hamburger{font:inherit;display:inline-block;overflow:visible;margin:0;padding:7px 15px 5px 15px;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:white; border-radius: 25px;}.hamburger.is-active:hover,.hamburger:hover{opacity:.7}.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before{background-color:black}.hamburger-box{position:relative;display:inline-block;width:60px;height:24px}.hamburger-inner{top:50%;display:block;margin-top:0px}.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:60px;height:4px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:black}.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}.hamburger-inner:before{top:-10px}.hamburger-inner:after{bottom:-10px}

.hamburger--squeeze .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms}.hamburger--squeeze .hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease}.hamburger--squeeze .hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.hamburger--squeeze.is-active .hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0}.hamburger--squeeze.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}

#open-menu{ margin-top: 25px; margin-right: 0; }

.text-blue{ color: #0E2588; }


.offcanvas-body ul.navbar-nav li{ margin: 10px 0; }
.offcanvas-body ul.navbar-nav li,
.header-silicones ul.navbar-nav li{ padding: 0 10px; }


.offcanvas-body ul.navbar-nav li a,
.header-silicones ul.navbar-nav li a{ background-color: transparent; padding: 10px 10px !important; color: white; font-weight: bold !important; }
/* 
.offcanvas-body ul.navbar-nav li a,
.header-silicones ul.navbar-nav li a{ background-color: blue; padding: 28px 45px !important; color: white; font-weight: bold !important; transform: skew(-5deg, 0deg); }
*/


.navbar-brand img{ height: 60px; }

.offcanvas-body ul.navbar-nav li a:hover,
.offcanvas-body ul.navbar-nav li a:focus,
.offcanvas-body ul.navbar-nav li a:active,
.header-silicones ul.navbar-nav li a:hover,
.header-silicones ul.navbar-nav li a:focus,
.header-silicones ul.navbar-nav li a:active{ opacity: 0.8;}

a.swca-cta {
  display: inline-block; /* Para que padding y otras propiedades de bloque funcionen */
  padding: 15px 30px; /* Ajusta el espaciado interno según necesites */
  text-decoration: none; /* Elimina el subrayado predeterminado */
  color: #ffffff; /* Color de texto blanco normal */
  background-color: #212121; /* Fondo negro oscuro normal */
  border: none; /* Sin borde predeterminado */
  border-radius: 100px; /* Bordes completamente redondeados */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave para los efectos */
  cursor: pointer; /* Cambia el cursor al pasar por encima para indicar interactividad */
  font-weight: bold; /* Opcional: Texto en negrita */
  font-size: 0.9em; /* Opcional: Tamaño de fuente */
}

/* Estilo para el estado Hover */
a.swca-cta:hover {
  background-color: #777777; /* Fondo gris al pasar el ratón */
  transform: scale(1.05); /* Pequeña animación de "aumento" al pasar el ratón (opcional) */
}

/* Estilo para el estado Active (cuando se está haciendo clic) */
a.swca-cta:active {
  background-color: #333333; /* Fondo gris más oscuro al hacer clic */
  transform: scale(0.9); /* Pequeña animación de "encogimiento" al hacer clic (opcional) */
}

/* Estilo para el estado Focus (cuando el enlace tiene el foco, por ejemplo, al navegar con el teclado) */
a.swca-cta:focus {
  outline: none; /* Elimina el outline predeterminado del navegador para un mejor estilo */
  box-shadow: 0 0 0 2px #777777; /* Añade un outline personalizado */
  background-color: #777777; /* Fondo gris al tener el foco */
}

/* Estilo para el estado Visitado (opcional, para enlaces que ya han sido visitados) */
a.swca-cta:visited {
  /* Puedes mantener el estilo normal o aplicar un estilo sutilmente diferente */
  color: #f0f0f0; /* Un blanco ligeramente más claro para enlaces visitados */
}