*{
    box-sizing: border-box;

}
html{
    scroll-behavior: smooth;
}

/* VARIABLES DE COLOR */
:root {
    --color-primary: rgba(255, 255, 255, 0.8); /* Blanco con transparencia para el vidrio */
    --color-accent: #b01c5a; /* El magenta/morado de tu logo */
    --color-text-dark: #333;
    --color-text-light: #ccc;
}

/* RESET BÁSICO Y TIPOGRAFÍA */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--color-text-dark);
    background-color: var(--color-primary);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: var(--color-text-dark);
}

ul {
    list-style: none;
}


.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background-color: #444; /* Gris oscuro profesional */
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 5%;
    font-size: 11px;
    z-index: 101; /* Por encima del header */
    letter-spacing: 1px;
}

/* --- HEADER --- */
header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    position: fixed;
    top: 35px; /* Ajusta esto según el alto de tu barra gris superior */
    left: 0;
    width: 100%;
    height: 80px; /* Definimos una altura fija para evitar saltos */
    
    /* Efecto Glassmorphism */
    background: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px);
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    box-sizing: border-box;
}

header .logo {
    display: flex;
    flex-direction: column;
    width: auto; /* IMPORTANTE */
    min-width: 150px; 
}
header .logo h1 {
    font-size: 16px;
    font-weight: 700px;
    color: var(--color-accent); /* Nombre de la marca en Morado */
    line-height: 0,9;
    margin: 0;
}

 header .logo span {
    display: block;
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--color-text-dark);
}

header .logo img {
    height: 50px; /* Esto controlará el tamaño de la imagen del logo directamente */
    width: auto;
}

header nav {
    display: flex;
    justify-content: center;
    flex-grow: 1; /* Esto hace que el nav use el espacio del centro */
}

header nav ul {
    /* Aquí definimos cómo se ven los ítems del menú */
    display: flex;
    gap: 25px;
    list-style: none; /* Asegura que no haya viñetas */
    padding: 0;
    margin: 0;
}

header nav a {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 5px;
    transition: color 0.3s;
}

/* Animación de línea en el hover */
header nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

header nav a:hover::after, 
header nav a.active::after {
    width: 100%;
}

header nav a:hover {
    color: var(--color-accent);
}

/* --- BOTÓN DE CONTACTO (EL CAMBIO CLAVE) --- */
.btn-contacto {
    background-color: #b01c5a; /* Tu color magenta */
    color: white !important;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: 0.3s;
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}

.btn-contacto:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(176, 28, 90, 0.4);
    background-color: #8a1646; /* Un tono más oscuro al pasar el mouse */
}

header a:hover, nav a.active {
    color: var(--color-accent); /* Resaltar enlace activo y hover */
    border-bottom: 2px solid var(--color-accent);
}

.menu-right {
    display: flex;
    align-items: center;
    gap: 30px; /* Espacio entre el menú de navegación y los iconos (ES/Lupa) */
}

/* --- SECCIÓN HERO --- */

.hero-section {
    background-color: #F8F8F8; /* Fondo gris para toda la sección */
    display: flex;
    width: 100%;
    min-height: 100vh;
    padding-top: 100px;
    position: relative;
    overflow: hidden; /* Evita scrolls accidentales */
}

.hero-image-slider {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: #F8F8F8; /* Asegura que el fondo del slider sea el mismo gris */
}

.image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Llena el espacio sin estirarse */
    object-position: center; /* Centra a la persona en el encuadre */
}

.image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 5;
    
    /* ESTO CREA LA INTEGRACIÓN SUAVE */
    mask-image: linear-gradient(to right, transparent 0%, black 15%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%);
}


/* Columna Izquierda: Contenido */
.hero-content {
    flex-grow: 0; /* No permite que crezca */
    flex-shrink: 0; /* No permite que se encoja */
    flex-basis: 500px; /* Un ancho base para la columna de contenido */
    max-width: 40%; /* Limita su ancho máximo al 40% del contenedor */
    min-width: 350px; /* Asegura un ancho mínimo en pantallas pequeñas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5%;
    background-color: #F8F8F8;
    z-index: 20; /* Asegura que esté por encima de la imagen si hay solapamiento */
}

.wavy-line {
    width: 40px;
    height: 3px;
    background-color: var(--color-accent);
    margin-bottom: 10px;
    /* Esto simula la línea ondulada. Para la onda real, se usaría una imagen SVG */
}

.subtitle {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 5px;
}

.hero-content h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-accent); /* Título en Morado */
    line-height: 1.2;
    margin-bottom: 20px;
}

.indicators {
    position: absolute; /* Relativo al .hero-content */
    bottom: 30px;
    left: 5%; /* Alineado con el padding del hero-content */
    display: flex;
    gap: 8px;
}

.wavy-line {
    width: 40px;
    height: 3px;
    background-color: var(--color-accent); /* Tu morado de acento */
    margin-bottom: 15px; /* Espacio debajo de la línea */
    /* Para una línea REALMENTE ondulada, necesitarías un SVG de fondo o CSS más complejo. */
    /* Para este ejemplo, es una línea recta. */
}


.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-text-light);
    cursor: pointer;
}

.dot.active {
    background-color: var(--color-accent);
}

/* Columna Derecha: Imagen */
.hero-image-slider {
    flex: 1; /* Ocupa el 60% restante */
    position: relative; /* Clave para que los slides se posicionen absolutamente dentro */
    overflow: hidden;
}

/* Define cómo se comportan los slides */
.image-slide {
    position: absolute; /* Superpone todos los slides */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Ocultar todos los slides por defecto */
    transition: opacity 1s ease-in-out; /* Transición de 1 segundo para el efecto de fundido */
    z-index: 5;
}

/* El slide actual debe ser visible */
.image-slide.current-slide {
    opacity: 1; 
    z-index: 10;
}

/* --- SECCIONES INFERIORES --- */
.seccion-inferior {
    padding: 80px 5%;
    text-align: center;
}


/* --- SECCIÓN QUIÉNES SOMOS --- */
.quienes-somos-section {
    display: flex;
    background-color: #F8F8F8; /* Fondo gris muy claro como en la imagen */
    padding: 80px 0; /* Padding superior e inferior */
    min-height: 70vh; /* Altura mínima para que se vea el contenido */
}

.quienes-somos-content {
    flex: 0 0 60%; /* Ocupa el 60% del ancho para el texto y características */
    display: flex;
    padding-left: 5%; /* Margen izquierdo, alineado con el hero-content */
    padding-right: 2%; /* Espacio entre las columnas de texto */
}

.quienes-somos-image {
    flex: 1; /* Ocupa el 40% restante para la imagen */
    overflow: hidden;
    display: flex;
    align-items: center; /* Centra la imagen verticalmente */
    padding-right: 5%; /* Margen derecho */
}

.quienes-somos-image img {
    width: 100%;
    height: auto; /* Mantiene la proporción de la imagen */
    display: block;
    border-radius: 8px; /* Bordes ligeramente redondeados como en la imagen */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Sombra sutil */
}

.text-column {
    flex: 0 0 50%; /* La columna de texto ocupa la mitad del content */
    padding-right: 30px; /* Espacio entre el texto y las características */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
}

.features-column {
    flex: 0 0 50%; /* La columna de características ocupa la otra mitad */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    gap: 30px; /* Espacio entre cada 'feature-item' */
}

.quienes-somos-section .wavy-line {
    /* Mismos estilos que el wavy-line del hero, pero en esta sección */
    width: 40px;
    height: 3px;
    background-color: var(--color-accent);
    margin-bottom: 15px;
}

.quienes-somos-section .section-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 10px;
}

.quienes-somos-section h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--color-accent); /* Título en Morado */
    line-height: 1.2;
    margin-bottom: 25px;
}

.quienes-somos-section .description {
    font-size: 15px;
    color: var(--color-text-dark);
    line-height: 1.7;
}

.feature-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item .feature-icon {
    font-size: 28px; /* Tamaño del icono */
    color: var(--color-accent); /* Color morado para los iconos */
    margin-bottom: 5px;
}

.feature-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1.4;
}

.feature-item p {
    font-size: 14px;
    color: var(--color-text-dark);
    line-height: 1.6;
}

.lugar {
    /* Ocupa al menos toda la altura de la ventana del navegador */
    min-height: 100vh;
    /* Usa Flexbox para centrar el contenido horizontal y verticalmente */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Propiedades de la imagen de fondo */
    background-image: url('imagenes/fondo.png'); /* ¡IMPORTANTE! Reemplaza esto con la ruta a tu imagen */
    
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Opcional: Hace que el fondo sea fijo al hacer scroll */
    padding: 20px; /* Espacio alrededor del borde */
    
}


.info-box {
    /* Fondo: Totalmente blanco y opaco para una sensación de limpieza */
    background-color: #ffffff; 
    padding: 45px 50px; /* Más espacio interior para respirar */
    border-radius: 8px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra sutil, no muy oscura */
    max-width: 450px; 
    text-align: center;
    
    /* Efecto de borde sutil para darle más sofisticación */
    border: 1px solid #e0e0e0;
}

/* Estilos para el título */
.info-box h1 {
    /* Color de acento elegante */
    color: #D91770; 
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2.2em;
    font-weight: 300; /* Fuente más delgada para un look moderno */
    letter-spacing: 1px;
    border-bottom: 2px solid #D91770; /* Línea de acento debajo del título */
    padding-bottom: 15px;
}

.info-box p {
    color: #555;
    font-size: 1.1em;
    margin-bottom: 30px;
}

/* Estilos para la lista de países (Limpia y Simple) */
.info-box ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    text-align: left;
}

.info-box ul li {
    background-color: transparent; /* Fondo transparente para minimalismo */
    padding: 12px 0;
    margin-bottom: 0;
    font-weight: 400; 
    color: #333;
    /* Separador sutil en lugar de un bloque de color */
    border-bottom: 1px solid #f0f0f0; 
    
    /* Pequeño círculo o punto como viñeta */
    position: relative;
    padding-left: 20px;
}

/* Viñeta personalizada con el color de acento */
.info-box ul li::before {
    content: '•'; /* Un punto o círculo como viñeta */
    color: #A523A5; /* El color de acento */
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Quitar el separador del último elemento para mantener la limpieza */
.info-box ul li:last-child {
    border-bottom: none;
}


.piedepagina{
    width: 100%;
    background-color:rgb(232, 232, 232);
}

.piedepagina .grupo1{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
    padding: 40px 0px;
}

.piedepagina .grupo1 .box figure{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.piedepagina .grupo1 .box figure img{
    width: 250px;
    
}

.piedepagina .grupo1 .box h2{
    color: #D91770;
    margin-bottom: 25px;
    font-size: 20px;
}

.piedepagina .grupo1 .box p{
    color: #020202;
    margin-bottom: 10px;
}

.piedepagina .grupo2{
    color: #000000;
    padding: 15px 10px;
    background-color: #D91770;
    text-align: center;
}

#whatsapp-button {
    position: fixed;
    bottom: 20px; /* Altura desde la parte inferior */
    right: 20px;  /* Distancia desde la derecha */
    z-index: 1000; /* Asegura que siempre esté encima */
}

#whatsapp-button img {
    width: 60px; /* Tamaño del botón */
    height: 60px;
    border-radius: 50%; /* Redondea el botón */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para efecto flotante */
    transition: transform 0.2s ease-in-out; /* Animación suave */
}

#whatsapp-button img:hover {
    transform: scale(1.1); /* Aumenta ligeramente el botón al pasar el mouse */
}