* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'Hero-Bold', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #F3F5FB;
    color: #1b1b1e;
}

h1 {
    font-size: 4rem;
    font-family: "Schibsted Grotesk", serif;
}

h2 {
    font-size: 1.75em;
    font-family: "Schibsted Grotesk", serif;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.5rem;
    font-family: "Schibsted Grotesk", serif;
}

p {
    font-size: 1.25rem;
    font-family: "Schibsted Grotesk", serif;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    font-size: 1.25rem;
    font-family: "Schibsted Grotesk", serif;
}

section {
    position: relative;
    /* Necesario para z-index */
    overflow: visible;
    /* Permite que el contenido salga */
    z-index: 1;
    /* Ajusta según sea necesario */
}

/* Inicialmente ocultos */
.container {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(10%);
    transition: all .5s;
}
/* Cuando entran en la vista (30% inferior), aparecen */
.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}


header {
    top: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    padding: 1rem 8%;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #F3F5FB;
    border-bottom: 1px solid #000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    transition: top 0.1s ease-in-out;
}

/* Espacio reservado para evitar el salto */
.header-placeholder {
    height: 100%;
    /* Ajusta esto a la altura del navbar */
    display: none;
    /* Se activará cuando el header cambie */
}

header.scrolled {
    position: fixed;
    left: 0;
    border: 1px solid #000;
    margin: .5rem auto;
    width: 50%;
    height: 4.5rem;
    background: #fff;
    padding: 0.05rem 7%;
    border-radius: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
   
}

header.scrolled.visible {

    opacity: 1;
    /* Hace visible */
}

/* Cuando el navbar cambia a `fixed`, mostramos el espacio reservado */
header.scrolled+.header-placeholder {
    display: block;
}


/* Cuando el header tiene la clase scrolled */
header.scrolled .btn-content {
    border: 1px solid #000;
    background: #fff;
    color: #000000;
    box-shadow: none;
}

header.scrolled .btn-content:hover {

    transform: scale(1.1);
    color: #000000;
}

/* Ocultar back-btn cuando el header tiene la clase scrolled */
header.scrolled .back-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.logo img {
    width: 10rem;
    height: auto;
}

header.scrolled .logo img {
    width: 7rem;
    height: auto;
}

header.scrolled .logo:hover {

    transform: scale(1.1);
    color: #000000;
}

.navlist {
    display: flex;
}

.navlist a {
    display: inline-block;
    margin: 0 35px;
    color: #1b1b1e;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    /* Necesario para el pseudo-elemento */
    text-decoration: none;
    /* Eliminamos el subrayado por defecto */
}

/* Subrayado animado */
.navlist a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    /* Ajusta esta posición según tu diseño */
    width: 0;
    height: 2px;
    /* Grosor del subrayado */
    background-color: currentColor;
    /* Hereda el color del texto */
    transition: width 0.3s ease;
}

.navlist a:hover::after {
    width: 100%;
    /* Ancho completo al hacer hover */
}

.navlist a:hover {
    color: #f39c12;
}

header.scrolled a:hover {
    color: #f39c12;
}

/* Right Section (Button & Icon) */
.nav-right {
    display: flex;
    align-items: center;
}

.button-container {
    position: relative;
    width: 10rem;
    /* Ancho del botón */
    height: 3rem;
    /* Alto del botón */
    margin: 5px;
}

#blog-button{
    visibility: hidden;
}

/* Efecto hover en el contenedor */
.button-container:hover .btn-content {
    background-color: #fff;
    color: #000000;
    /* Desplaza el botón hacia arriba y la izquierda */
}

.button-container:hover .back-btn {
    transform: translate(5px, 5px);
    /* Desplaza el fondo hacia abajo y la derecha */
}

/* Estilo del botón */
.btn-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #031A6B;
    /* Fondo blanco */
    color: #ffffff;
    /* Texto negro */
    border: none;
    border-radius: 20px;
    /* Bordes redondeados */
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombra */
}

/* Fondo del botón */
.back-btn {
    position: absolute;
    top: 5px;
    /* Desplazamiento inicial */
    left: 5px;
    /* Desplazamiento inicial */
    width: 100%;
    height: 100%;
    background-color: #FF7700;
    /* Color naranja */
    z-index: 1;
    border-radius: 20px;
    /* Bordes redondeados */
    transition: all 0.2s ease-in-out;
}

#menu-icon {
    font-size: 34px;
    color: #000000;
    z-index: 10001;
    cursor: pointer;
    display: none;
}


#hero {
    position: relative;
    min-height: 100vh;
    padding: 100px 0 400px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, #031A6B 40%, #0077B6 80%);
}



/* Contenedor principal */
#hero .container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
}

/* Contenido del hero */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.hero-text {
    background: transparent; /* Fondo blanco semitransparente */
    border: #fff 1px solid;
    border-radius: 10px;
    padding: 2rem 3rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Título principal */
.hero-text h1 {
    font-size: 4rem;
    font-weight: bold;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-text h1 span {
    color: #ff7700;
}

/* Subtítulo */
.hero-text h2 {
    font-size: 2.5rem;
    color: #fff;
    margin: 1rem 0;
    text-transform: uppercase;
}

/* Párrafo */
.hero-text p {
    font-size: 1.5rem;
    color: #fff;
    margin: 1.5rem ;
    line-height: 1.5;
    max-width: 600px;
}

#spects {
    background-color: #fff;
    padding-top: 20rem;
    text-align: center;
    position: relative;
}

/* Botón */
.btn {
    display: inline-block;
    padding: 15px 40px;
    background: #00B4D8;
    /* Amarillo brillante */
    color: #ffffff;
    /* Texto azul oscuro */
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 50px;
    /* Más redondeado */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.btn:hover {
    background: #ffffff;
    /* Cambia a rojo */
    color: #000000;
    transform: scale(1.05);
    /* Ligero aumento */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}


#spects .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    position: relative;
}


.img-container {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -100%);
  }
  
  .img-container dotlottie-player {
    width: 50rem;
    height: auto;
    max-width: none;
    display: block;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
  }


.title-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin: 3rem 0;
    border: #000 1px solid;
    padding: 3rem;
    border-radius: 25px;
    background: linear-gradient(180deg,#0077B6 60%, #031A6B 100%);
}

.title-text h2 {
    font-size: 5rem;
    text-align: center;
    margin-bottom: 1rem;
    width: 1000px;
    color: #fff;
}

.title-text h2 span {
    color: #FF7700;
}

.title-text p {
    color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 2rem;
}

.title{
    font-size: 3.5rem;
    text-align: center;
    margin-top:2rem;
    width: 1100px;
}

.title span {
    color: #FF7700;
}

.dato-item {
    display: flex;
    /* Para tener imagen y texto en línea */
    justify-content: center;
    /* Centra horizontalmente el contenido si el ancho es menor que la pantalla */
    height: auto;
    /* Se ajusta automáticamente a la altura del contenido */
    margin: 2rem;
    /* Centra el contenedor en la página */
    margin-top: 0;
    padding: 4rem;
    /* Espacio interno alrededor del contenedor */
    width: 100%;
}


.dato-img,
.dato-text {
    flex: 1 50%;
    /* Cada uno ocupa 50% del espacio base */
    max-height: 400px;
    display: flex;

}


.dato-img {
    height: 100%;
    margin: 0;
    margin: 0 2rem;
    min-height: 35rem;
    max-width: 35rem;
}

.dato-img img {
    width: 100%;
    object-fit: cover;
    /* Hace que la imagen recorte los bordes si es necesario */
    border-radius: 25px;
    border: #1b1b1e 1px solid;


}


.dato-text {
    flex-direction: column;
    /* Permite apilar h3 y p en columna */
    justify-content: center;
    /* Centra verticalmente el texto */
    text-align: center;
    padding: 2.5rem;
    /* Ajusta según cuánto espacio quieras alrededor del texto */
    border: #1b1b1e 1px solid;
    margin: 0 2rem;
    /* Un poco de margen lateral si lo deseas */
    color: #ffffff;
    min-height: 35rem;
    max-width: 60rem;
    border-radius: 25px;
    background: linear-gradient(180deg,#0077B6 60%, #031A6B 100%);
}

.dato-text h3 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
    /* otros estilos */
}

.dato-text p {
    font-size: 1.6rem;
}


/* Contenedor principal */
.spects-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #031A6B;
    padding: 3rem 0;
}

.spect-title{
    color: #fff;
    font-size: 4rem;
    text-align: center;
    margin:2rem;
    filter: drop-shadow(10px 10px px rgba(0,0,0,0.5));
}

.spect-title span {
    color: #FF7700;
}


/* Contenedor principal */
.spects-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0; 
}


.spects-item:nth-of-type(1) .spects-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 8rem;
    width: 60%;
    background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.1)), url('../Recursos/encuestas.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border: 2px solid #FF7700;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 0.5rem;
}


/* Contenedor de texto */
.spects-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1rem;
}

/* Título ajustado para fondo oscuro */
.spects-text h3 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: #fff; /* Letras blancas para contraste */
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

/* Párrafo ajustado para fondo oscuro */
.spects-text p {
    font-size: 1.5rem;
    color: #fff; /* Color claro para mayor legibilidad */
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
    margin-bottom: 2rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Botón expandible */
.expand-btn {
    width: 10rem;
    height: 3.5rem;
    background: transparent;
    color: #fff;
    border: 2px solid #FF7700;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.expand-btn:hover {
    background: #FF7700;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.expand-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Clase para expandir la sección */
.spects-more-info.expanded {
    max-height: 800px; /* Valor suficientemente grande para mostrar el contenido */
}

/* Contenedor de información adicional (estado colapsado y transición) */
.spects-more-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, transform 0.3s ease-in-out;
    background-color: transparent;
}

/* Estado expandido: para activar con la clase "expanded" en el ítem */
.spects-item.expanded .spects-more-info {
    max-height: 500px;
    gap: 20px;
    padding: 0 20px;
}

/* Para el segundo .spects-item.expanded */
.spects-item.expanded:nth-of-type(1) .spects-more-info {
    max-height: 1000px;
    padding: 0;
}

.spect-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    width: 100%;
    margin: 0 0;
}
/* Estilos para texto e imagen */
.spect-text,
.spect-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;


}


.spects-item:nth-of-type(1) .spects-more-info {
    background: linear-gradient(120deg, #FFE01B 0%, #F43627 80%);
    
}

/* Ítem interno */
.spect-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 2rem;
    margin: 0 auto;
}

/* Imagen */
.spect-img {
    width: 40%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.spect-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenedor de texto */
.spect-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

/* Párrafo */
.spect-text p {
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: #fff;
    margin: 2rem 0 0;
    text-align: center;
    font-style: italic;
    /* Estilo sutil para hacerlo más elegante */
    opacity: 0.9;
}

/* Lista de características */
.features-list {
    width: 100%;
}

.features-list h4 {
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.features-list ul {
    column-count: 2;
    column-gap: 3rem;
    list-style-type: none;
    padding: 0;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2.5rem;
    break-inside: avoid;
    color: #fff;
    transition: transform 0.3s ease;
    /* Animación al pasar el mouse */
}

.features-list li:hover {
    transform: translateX(10px);
    /* Efecto sutil al interactuar */
}

.features-list i {
    font-size: 2.2rem;
    color: #FFE01B;
    /* Color destacado para íconos */
    flex-shrink: 0;
}

.features-list strong {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    display: block;
    margin-bottom: 0.3rem;
    text-align: start;
}

.features-list span {
    text-align: start;
    font-size: 1.2rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    display: block;
}

/* Ajuste de imágenes */
.spect-img {
    width: 40%;
}

.spect-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#contactanos {
    background: #f0f0f0; /* Gris muy claro para suavizar el brillo */
    text-align: center;
    padding: 6rem 2rem;
}

#contactanos .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg,#0077B6 60%, #031A6B 100%);
    border: 1px solid #1b1b1e; /* Borde suave para definir */
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */
}

.contacto-title h2 {
    font-size: 3.8rem;
    margin-bottom: 1.5rem;
    color: #ffffff; /* Azul celeste claro */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contacto-title h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #FF7700; /* Naranja claro */
    font-weight: normal;
}

.contacto-title p {
    font-size: 1.8rem;
    color: #ffffff; /* Gris medio para textos */
    line-height: 1.6;
    margin-bottom: 2rem;
}

.contacto-title p span {
    font-weight: bold;
    color: #ffffff; /* Azul celeste para resaltar */
}

#contactanos .btn {
    background: #FF7700; /* Naranja claro */
    color: #ffffff; /* Texto blanco */
    border: none;
    border-radius: 50px;
    padding: 1.2rem 2.5rem;
    font-size: 1.5rem;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    margin: 2rem 0;
}

#contactanos .btn:hover {
    background: #fff; /* Naranja más oscuro al pasar el ratón */
    transform: translateY(-3px);
    color: #FF7700;
    border: #1b1b1e 1px solid;
}

.contacto-text p {
    font-size: 1.4rem;
    color: #ffffff; /* Gris medio */
    line-height: 2rem;
    margin-top: 3rem;
}


/* Contenedor principal */
.whatsapp-wrapper {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
    display: flex;
    flex-direction: row-reverse;
    /* Invierte el orden de los elementos */
    align-items: center;
    pointer-events: none;
}

/* Botón principal (mismo estilo) */
.whatsapp {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50%;
    font-size: 30px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Contenedor del texto - modificado para izquierda */
.whatsapp-container {
    position: absolute;
    background-color: #ffffff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Alineación a la izquierda */
    width: 80px;
    height: 80px;
    transition: all 0.3s ease;
    z-index: 2;
    overflow: hidden;
    right: 0;
    /* Cambiado de left a right */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Texto del botón - modificado para izquierda */
.whatsapp-text {
    color: #000000;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    font-weight: 500;
    margin-left: 90px;
    /* Cambiado de margin-right a margin-left */
    white-space: nowrap;
    opacity: 0;
    transform: translateX(20px);
    /* Dirección de la animación invertida */
    transition: all 0.3s ease;
}

/* Efectos hover modificados */
.whatsapp:hover+.whatsapp-container {
    width: 280px;

}

.whatsapp:hover+.whatsapp-container .whatsapp-text {
    opacity: 1;
    transform: translateX(-62px);
    transition-delay: 0.1s;
}

/* Ícono y demás estilos se mantienen igual */
.bxl-whatsapp {
    font-size: 3.5rem;
    transition: transform 0.3s ease;
}

.whatsapp:hover {
    transform: scale(1.05);
}

.whatsapp:hover .bxl-whatsapp {
    transform: rotate(15deg);

}


footer {
    background: #001524;
    color: #fff;
    padding: 40px 0;
    padding-bottom: 0;
    border-top: #fff 1px solid;
}

.containfoot {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5rem;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
    gap: 6rem;
    padding-bottom: 20px;
}

.visitanos,
.enlaces,
.info-contacto,
.social-neworks {
    flex: 1;
    min-width: 300px;
}

.visitanos {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.enlaces {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-contacto .datos-contacto {
    margin-top: 4rem;

}

.title-visitanos h3,
.title-enlaces h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    border-bottom: 2px solid #f0a500;
    display: inline-block;
    padding-bottom: 5px;
}

.title-visitanos h4 {
    font-size: 1.5rem;
    margin: 10px 0 5px;
    color: #ffffff;
}

p {
    font-size: 1.04rem;
    margin: 5px 0;
    line-height: 1.5;
}

.menu-enlaces ul {
    list-style: none;
    padding: 0;
}

.menu-enlaces ul li {
    margin: 8px 0;
}

.menu-enlaces ul li a {
    text-decoration: none;
    color: #ddd;
    transition: color 0.3s ease;
}

.menu-enlaces ul li a:hover {
    color: #00B4D8;
}

.datos-contacto i {
    color: #ffffff;
    margin-right: 1px;
    font-size: 1.5rem;
}

.datos-contacto li {
    margin: 8px 0;
    font-size: 1.2rem;
}

.datos-contacto li a {
    text-decoration: none;
    color: #ddd;
    transition: color 0.3s ease;
}

.datos-contacto li a:hover {
    color: #00B4D8;
}

.social-neworks {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-aso img {
    max-width: 15rem;
    margin-bottom: 10px;
}

.redes-sociales ul {
    list-style: none;
    display: flex;
    gap: 15px;
    padding: 0;
}

.redes-sociales ul li a {
    color: #fff;
    font-size: 3rem;
    transition: color 0.3s ease;
}

.redes-sociales ul li a:hover {
    color: #00B4D8;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #444;
    font-size: 14px;
    color: #bbb;
}

.footer-bottom {
    padding: 15px 0;
    text-align: center;
    color: #fff;
    /* Texto en blanco para contraste */
    font-size: 14px;
    margin: 0;
}

.footer-bottom .containfoot {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.copy-right p {
    margin: 0;
    font-weight: 300;
    /* Texto más liviano */
    letter-spacing: 0.5px;
}

.copy-right p:hover {
    color: #f39c12;
    /* Cambio de color al pasar el cursor */
    transition: color 0.3s ease;
}


@media (max-width: 1536px) {
    
    header.scrolled {
        padding: 0.05rem 4%;   
    }
    
}


@media (max-width: 1400px) {

    header {
        padding: 20px 4%;
    }
    header.scrolled{
        width:90%;
    }

    .card-hover__text {
        font-size: 1.3rem;
    }
    .visitanos {
        margin-right: 2rem;
    }

    .containfoot{
        padding: 0 50px;

    }
    .social-neworks{
        margin: 0;
    }


}

@media (max-width: 1200px) {

    header {
        padding: 20px 4%;
    }
    header.scrolled{
        width:90%;
    }

    #hero {
        padding: 100px 0 275px 0;
    }

    .hero-text {
        max-width: 70%;
      }


    .containfoot{
        padding: 0 50px;

    }
    .social-neworks{
        margin: 0;
    }

    #spects {
        padding-top: 10rem;
        
    }
    
    .img-container {
        top: 10%;
    }

    .img-container dotlottie-player {

        width: 40rem;
    }

    .title-text {
        width: 60rem;
      }

    .title-text h2 {
        font-size: 2.8rem;
        width: 950px;
    }

    .title-text p {
        max-width: 800px;
        font-size: 2rem;
    }

    .title {
        width: 1000px;
      }
    
    .dato-text h3 {
        margin-bottom: 1rem;
        font-size: 2rem;
    }

    .dato-text p {
        font-size: 1.2rem;
    }

    .spects-item:nth-of-type(1) .spects-content {
        width: 90%;
      }
    .spects-item:nth-of-type(2) .spects-content {
        width: 90%;
      }
    .spects-item:nth-of-type(3) .spects-content {
        width: 90%;
    }

    .spect-item {
    gap: 1rem;
    }

    .spect-text {
    padding: 3rem 0px;
    }

    .features-list ul {
    
    column-gap: 1rem;       
    }

    #contactanos .container {
    max-width: 940px;
    }

    .contacto-title h2 {
    font-size: 2.8rem;
    }

    .contacto-title h3 {
        font-size: 2rem;
       
    }

    .contacto-title p {
        font-size: 1.5rem; 
    }

    .contacto-text p {
        font-size: 1.5rem;
    }

    .containfoot{
        padding: 0 25px;
        gap: 0;
    }
    .social-neworks{
        margin: 0;
    }

    .logo-aso img {
        margin-top: 30px;
      }
}

@media (max-width: 1175px) {
    .logo img {
        width: 100px;
        height: auto;
    }
    .navlist a {
        margin: 0 25px;
    }
    .btn {
        padding: 11px 23px;
    }

    header.scrolled{
        width:90%;
    }    

}

@media (max-width: 940px) {

    header,
    header.scrolled {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
        padding: 15px 8%;
        background: #fff;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        color: #000;
        opacity: 1; /* Siempre visible */
        transition: none; /* Deshabilita las transiciones */
    }
    
    /* Ocultamos el placeholder, ya que no se necesita para móviles */
    .header-placeholder {
        display: none;
    }
    
    /* Ajustamos el menú responsive */
    #menu-icon {
        display: block;
    }
    
    .navlist {
        position: fixed;  /* Lo cambiamos a fixed para que se superponga */
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        backdrop-filter: blur(32px);
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 180px;
        transition: right 0.7s ease;
        z-index: 1000;
    }
    
    .navlist a {
        display: block;
        padding: 0;
        margin-bottom: 50px;
        font-size: 1.7rem;
        color: #fff;
    }
    
    .navlist.open {
        right: 0;
    }
    
    header .button-container{
        display: none;
    }

    #hero {
        padding: 100px 0 200px 0;
    }
    
    #spects {
        padding-top: 15rem;
    }

    .title-text {
        width: 100%;
        border-radius: 0;
        border: none;
    }

    .dato-item {
        justify-content: center;        
        width: 100%;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
    }

    .dato-img {
        height: 100%;
        max-height: 30rem;
        max-width: 100%;
        min-height: 0;
    }


    .dato-text h3 {
        margin-bottom: 1rem;
        font-size: 2rem;
    }

    .card-hover__title {
        font-size: 1.5rem;    
    }

    .card-hover__text {
        font-size: 1.1rem;
    }

    .spect-item {
        flex-direction: column;
      }

    .whatsapp-wrapper{
        display: none;
    }

}

@media (max-width: 720px) {
    .hero-text h1, 
    .hero-text h1 span,
    .hero-text h2 
    {
        font-size: 2.8rem;
    }

    .slider-container {
        height: 20rem;
        display: flex;
        align-items: center;
      }
    
    .title-text h2 {
    font-size: 2.8rem;
    width: 600px;
    }

    .title {
        width: 600px;
     }
    
    .img-container {
        top: 7%;
        left: 50%
    }

    .img-container dotlottie-player {
        width: 29rem;
      }

    .spects-more-info {
        flex-direction: column;
        width: 80%;
    }

    .spects-item.expanded:nth-of-type(1) .spects-more-info,
    .spects-item.expanded:nth-of-type(2) .spects-more-info {
        max-height: 1500px;
      }
    
    .card-hover__content {
        width: 100%;
        position: absolute;
        top: 0%;
        bottom: 0%;
        left: 0%;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .features-list i {
        color: #fff;
      }

    .card-hover__title {
        font-size: 3rem;
    }

    .card-hover:nth-child(2) .card-hover__content {
        background-color: rgba(0, 0, 0, 0.5);
      }

    .card-hover:nth-child(3) .card-hover__content {
        background-color: rgba(0, 0, 0, 0.5);
      }
    
    .card-hover:nth-child(2) .card-hover__title span,
    .card-hover:nth-child(3) .card-hover__title span {
    color: #f39c12;
    }

   
    .spect-img {
    width: 75%;
    }

    .spects-item.expanded .spects-more-info {
        border-radius: 15px;
    }
    
    .contacto-text {
        display: none;
    }

    .containfoot{
        padding: 0 25px;
        gap: 0;
    }
    .social-neworks{
        margin: 0;
    }
}

@media (max-width:450px){
    header,
    header.scrolled {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
        padding: 15px 8%;
        background: #fff;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        color: #000;
        opacity: 1; /* Siempre visible */
        transition: none; /* Deshabilita las transiciones */
    }
    
    /* Ocultamos el placeholder, ya que no se necesita para móviles */
    .header-placeholder {
        display: none;
    }
    
    /* Ajustamos el menú responsive */
    #menu-icon {
        display: block;
    }
    
    .navlist {
        position: fixed;  /* Lo cambiamos a fixed para que se superponga */
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        backdrop-filter: blur(32px);
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 180px;
        transition: right 0.7s ease;
        z-index: 1000;
    }
    
    .navlist a {
        display: block;
        padding: 0;
        margin-bottom: 50px;
        font-size: 1.7rem;
    }
    
    .navlist.open {
        right: 0;
    }

    #hero {
        padding: 100px 0 80px 0;
      }

    .hero-text h1, 
    .hero-text h1 span,
    .hero-text h2 
    {
        font-size: 1.8rem;
    }

    .hero-text p {
        font-size: 1.3rem;
    }
    .hero-text {
        max-width: 100%;
    }

    .hero-media {
        display: none;
      }
    
    .img-container {
    top: 9%;
    left: 52%;
    }

    .img-container dotlottie-player {
    width: 20rem;
    }

    .title-text {
        gap: 10px;
      }

    .title-text h2 {
        font-size: 2.8rem;
        width: 300px;
    }

    .title-text p {
        max-width: 800px;
        font-size: 1.5rem;
    }

    .title {
        width: 350px;
        font-size: 2rem;
      }
    .dato-item {
        padding: 1rem;
    }

    .dato-text{
        font-size: 1.5rem;
        padding: 1.2rem;
      }
    
    .dato-text h3 {
        font-size: 1.5rem;
      }
    .dato-text p {
        font-size: 1.1rem;
    }

    .spect-title {
        font-size: 2.28rem;
      }
    .spects-item:nth-of-type(1) .spects-content,
    .spects-item:nth-of-type(2) .spects-content,
    .spects-item:nth-of-type(3) .spects-content {
        width: 90%;
        height: 400PX;
    }

    .spects-text h3 {
        font-size: 2rem;
        
    }

    .spects-text p {
        width: 350px;
      }

    .card-hover__title {
        font-size: 2.5rem;
    }

    .spects-item.expanded:nth-of-type(2) .spects-more-info,
    .spects-item.expanded:nth-of-type(3) .spects-more-info {
        max-height: 1500px;
    }

    .features-list ul {
        column-count: 1;
        column-gap: 3rem;
        list-style-type: none;
        padding: 0;
    }

    .features-list i {
        color: #fff;
    }

    .contacto-title h2 {
        font-size: 2rem;
    }

    .contacto-title h3 {
        font-size: 1.5rem;
    }

    .contacto-title p {
        font-size: 1.2rem;
    }

    .contacto-title p span {
        font-weight: bold;
        font-size: 1.5rem;
    }

    #contactanos .btn {
        margin: 0;
    }
}