:root {
  --azul: #005E99;          /*Color Asxeedo*/
  --blanco: #FFFFFF;        /*Contraste limpio y corporativo.*/
  --gris: #F5F5F5;          /**/
  --gris_claro:#E0E0E0;     /*Sofisticado y balanceado*/
  --negro:#000000;          /*Formal y fuerte.*/
  --naranja:#FF6600;        /*Contraste directo en la rueda de color, ideal para destacar botones o llamadas a la acción.*/
  --dorado:#FFD700;         /*Aporta prestigio y resalta sobre el azul.*/
  --turquesa:#00A3CC;       /*Fresco y tecnológico.*/
  --verde_azulado:#007F73;  /*Moderno y equilibrado.*/
  --azul_claro:#3B8CDE;     /*Gradientes y fondos suaves.*/
  --rojo_coral:#CC3333;     /*Energía y dinamismo.*/
  --verde_lima:#66CC33;     /*Innovación y frescura.*/
  --azul_oscuro:#003F6B;    /*Azul oscuro*/
}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--gris_claro);
  color: var(--azul_oscuro);
}

header {
  background-color: var(--azul);
  color: var(--gris_claro);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}  

.decora_logo{
  height: 50px;
  display: inline-flex;
  padding: 10px 20px;
}

.decora_logo:hover {
  filter: invert(100%);      /* Invierte colores */
}

header .lema_asxeedo  {
  padding: 20px 50px;
  display: inline-flex;
}

header .lema_asxeedo a {
  color: var(--gris_claro);
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
}

nav {
  background-color: var(--azul_oscuro);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px;
  position: relative;
}
nav .menu-item {
  position: relative;
}
nav a {
  color: var(--gris_claro);
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-block;
}
nav a:hover {
  background-color: var(--azul_oscuro);
  color: var(--gris_claro);
  border-radius: 5px;
}
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--gris_claro);
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.submenu a {
  display: block;
  color: var(--azul_oscuro);
  text-decoration: none;
  margin: 5px 0;
  font-weight: normal;
}
.menu-item:hover .submenu {
  opacity: 1;
  visibility: visible;
  display: block;
}
main {
  padding: 40px 20px;
  background-color: var(--gris_claro);
  min-height: 60vh;
  transition: opacity 0.3s ease;
}
h2 {
  color: var(--azul);
}
h3 {
  color: var(--blanco);
}
ul {
  list-style-type: disc;
  padding-left: 20px;
}
form {
  background-color: var(--blanco);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  max-width: 500px;
  margin: auto;
}
input, textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  background-color: var(--azul);
  color: var(--blanco);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}
footer {
  background-color: var(--azul);
  color: var(--blanco);
  text-align: center;
  padding: 20px;
}

/* ********* Estilo base para todos los botones redes sociales ******* */
.linkedin-btn,
.facebook-btn,
.instagram-btn,
.tiktok-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;       /* Botón circular */
  color: #fff;
  transition: all 0.3s ease;
  text-decoration: none;
  margin: 0 8px;            /* Espaciado entre botones */
}
.linkedin-btn svg,
.facebook-btn svg,
.instagram-btn svg,
.tiktok-btn svg {
  fill: #fff;               /* Ícono blanco */
  transition: transform 0.3s ease;
}
/* Facebook */
.facebook-btn {
 background-color: #1877F2; /* Azul Facebook */
}
.facebook-btn:hover {
  background-color: #0d5bd7;
  transform: scale(1.1);
}

/* Instagram (gradiente) */
.instagram-btn {
  background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, #fdf497 5%, 
    #fd5949 45%, #d6249f 60%, 
    #285AEB 90%);
}
.instagram-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.1);
}

/* TikTok (negro con acento) */
.tiktok-btn {
  background-color: #000000; /* Fondo negro TikTok */
  position: relative;
}
.tiktok-btn:hover {
  background-color: #111111;
  transform: scale(1.1);
}

/*boton linkedin*/
.linkedin-btn{
  background-color: #0A66C2; /* Azul LinkedIn */
}
.linkedin-btn:hover {
  background-color: #004182; /* Azul más oscuro al pasar el mouse */
  transform: scale(1.1); /* Efecto de zoom */
}
.facebook-btn:active,
.instagram-btn:active,
.tiktok-btn:active,
.linkedin-btn:active {
  transform: scale(0.95); /* Pequeño efecto al hacer clic */
}

/* ************************ Inicio de carrusel ************************ */
.product-carousel {
  --slide-gap: 16px;
  --caption-bg: rgba(0, 94, 153, 0.7);
  --caption-color: var(--blanco);
  --btn-bg: rgba(0, 94, 153, 0.8);
  --btn-color: var(--blanco);
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 10px auto;
}
.carousel__viewport {
  overflow: hidden;
  border-radius: 12px;
}
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--slide-gap);
  align-items: stretch;
  transition: transform 420ms ease;
}
.carousel__slide {
  position: relative;
  width: 100%;
  height: clamp(220px, 40vw, 520px);
  background: #111;
  border-radius: 12px;
  overflow: hidden;
}
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background: var(--caption-bg);
  color: var(--caption-color);
  backdrop-filter: blur(3px);
}
.carousel__caption h3 {
  margin: 0 0 4px;
  font-size: clamp(16px, 2.6vw, 22px);
}
.carousel__caption p {
  margin: 0;
  font-size: clamp(13px, 2.2vw, 16px);
  opacity: 0.9;
}

/* Botones */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
}
.carousel__btn:hover {
  background: rgba(0, 94, 153, 1);
}
.carousel__btn.prev {
  left: 10px;
}
.carousel__btn.next {
  right: 10px;
}
/* Dots */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.carousel__dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--gris);
  cursor: pointer;
}
.carousel__dots button[aria-current="true"] {
  background: var(--azul);
}

/* Opcional: mostrar 2–3 slides en desktop */
@media (min-width: 900px) {
  .carousel__track {
    grid-auto-columns: 50%;
  }
}
@media (min-width: 1200px) {
  .carousel__track {
    grid-auto-columns: 33.333%;
  }
}
/* Fin del carrusel */

/* Estilo icono WhatsApp*/
.whatsapp-float { 
  
  position: fixed;
  display: flex;

  width: 60px; 
  height: 60px; 
  bottom: 20px; 
  right: 20px; 
  background-color: #25D366; 
  border-radius: 50%; 
  box-shadow: 0 2px 5px rgba(0,0,0,1); 
  z-index: 10000; 
  align-items: center; 
  justify-content: center; 
  transition: background-color 0.3s ease; 
  cursor: pointer; 
 } 
.whatsapp-float:hover { 
  background-color: #25D366; 
 } 
.whatsapp-float svg { 
  width: 32px; 
  height: 32px; 
  fill: #FFFFFF; 
  transition: fill 0.3s ease; 
 } 
.whatsapp-float:hover svg { 
  fill: #FFFFFF; 
 }

.whatsapp-float::before {
  content: attr(title); /* usa el atributo title */
  position: absolute;
  left: -120%; /* ajusta la distancia a la izquierda */
  top: 50%;
  transform: translateY(-50%);
  background: #25D366;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, left 0.3s ease;
}

.whatsapp-float:hover::before {
  opacity: 1;
  left: -300%; /* se acerca un poco al ícono */
  font-weight: bold;
}



`/* ********** Termina Carrusel ************ */


/* ************* Botón hamburguesa ****************** */
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
    z-index: 10001;
  }
  .nav-toggle .hamburger,
  .nav-toggle .hamburger::before,
  .nav-toggle .hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    position: relative;
    transition: all 0.3s ease;
  }
  .nav-toggle .hamburger::before {
    position: absolute;
    top: -8px;
    width: 25px;
  }
  .nav-toggle .hamburger::after {
    position: absolute;
    top: 8px;
    width: 25px;
  }

  /* ****************** Estilos para móvil ***************** */
  @media (max-width: 768px) {
    .nav-toggle {
      display: block;
    }
    .nav-menu {
      display: none;
      flex-direction: column;
      width: 100%;
      background-color: var(--azul_oscuro);
      position: absolute;
      top: 100%;                                     /*modificacion del top 100 a 60*/
      left: 0;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      border-radius: 0 0 8px 8px;
      z-index: 1000; 
    }
    .nav-menu.active {
      display: flex;
    }
    .nav-menu .menu-item {
      margin: 10px 0;
      text-align: center;
    }
    .menu-item { 
      margin: 0; 
    }
    .submenu {
      display: none;
      position: relative;                    /* cambio de display none a basolute  */
      box-shadow: none;
      flex-direction: column;
      background-color: var(--gris_claro);
      transition: opacity 0.3s ease;
      padding-left: 1rem;
      z-index: 10;                        /* Asegura que el submenu esté sobre otros elementos */
      visibility: hidden;
    }
    .menu-item .submenu{
      display: none;
    }
    .submenu-active {                  /* .submenu.submenu-active  */
      display: block;
    }
    .submenu a {
      color: var(--azul);
      padding: 8px 0;
    }
    
    header .lema_asxeedo a {
      font-size: 12px;
    }

    body {
      font-size: 16px;
      padding: 10px;
    }
    header, nav, main, footer {
      padding: 10px;
    }
    nav {
      flex-direction: column;
      align-items: flex-start;
      z-index: 9999;
    }
    nav a {
      padding: 10px 0;
      width: 100%;
      display: block;
    }
    .carousel__slide {
      height: auto;
    }
  }

  /* Estilos para escritorio */
  @media (min-width: 769px) {
    .nav-toggle {
      display: none;
    }
    .nav-menu {
      display: flex !important;
      flex-direction: row;
      gap: 15px;
      background: none;
      position: static;
      box-shadow: none;
      padding: 0;
    }
    .nav-menu .menu-item {
      margin: 0;
      position: relative;
    }
    .submenu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #eee;
      padding: 10px 20px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      min-width: 200px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
      flex-direction: column;
      border-radius: 0 0 8px 8px;
      z-index: 1000;
    }
    .submenu a {
      color: #005E99;
      text-decoration: none;
      margin: 5px 0;
      font-weight: normal;
    }
    .menu-item:hover .submenu {
      opacity: 1;
      visibility: visible;
      display: block;
    }






  }


/* Nav fijo con sombra */
  nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #003F6B;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 10000; /* Debajo del header */
  transition: box-shadow 0.3s ease;
}
header {
  transition: opacity 0.3s ease;
  opacity: 1;
}
header.hidden {
  opacity: 0;
  pointer-events: none;
}




/* *************** Texto de encima de carrusel *********** */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
  display: block;       /* Activa flexbox */
  align-items: center;
  justify-content: space-between;
} 

.container_1{
  background-color: var(--gris_claro);
   
}

/*
.image img{
  width: auto;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;

  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,2) 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;

}
.image img:hover {
  transform: scale(1.05); /* Efecto zoom al pasar el mouse 
}
*/

.asxeedo_inicio p {
  font-size: 1.4rem;
  line-height: 2rem;
  color: var(--azul_oscuro);
  text-align: justify;
  padding: 0 25px;

}



/* **************** Seccion pagina, parrafo, titulo, imágenes */
.sobre-seccion {
  width: 100%;
  max-width: 1200px;
  display: block;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: var(--gris_claro); /* Fondo claro */
  border-radius: 12px;
  margin: 0 auto;
  
}

.sobre-seccion .cajatextodividido-seccion { /*grupo de subtitulo y texto */
  display: flex;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
    
}

.sobre-seccion .cajatextodividido-seccion:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}

.subtitulo-ctd-s, .texto-ctd-s{ /*subtitulo a la izq y parrafo a la derecha*/
  flex: 1;
  padding: 20px;
  margin: auto;
}

.sobre-seccion .cajatextodividido-seccion .lineavertical-ctd-s{ /*Linea devisora del texto*/
  width: 5px;
  background-color: var(--azul_oscuro);
  margin: 0 20px;
  border-radius: 12px;

}

.sobre-seccion .cajatextodividido-seccion .subtitulo-ctd-s h2 { /* Subtitulo */
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--azul_oscuro);

}

.sobre-seccion .cajatextodividido-seccion .texto-ctd-s p { /* Parrafo */
  font-size: 1.0rem;
  line-height: 1.3;
  color: var(--negro);
  margin-bottom: 15px;
  text-align: justify;

}

.sobre-seccion .imagen-seccion {
  display: block;
  text-align: center;
  padding: 30px 0;

}

.sobre-seccion .imagen-seccion img {
  max-width: 100%;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.6);
  transition: transform 0.3s ease;

}

.sobre-seccion .imagen-seccion img:hover {
  transform: scale(1.05); /* Efecto zoom al pasar el mouse */
}


/* ***************** CSS Empresa **************** */

/*************** FIN CSS EMPRESA*/