*{
    box-sizing: border-box;

}
html{
    scroll-behavior: smooth;
}

/* VARIABLES DE COLOR */
:root {
    --color-primary: #FFFFFF; /* Fondo principal */
    --color-accent: #D91770; /* Morado/Magenta para acentos */
    --color-secondary: #D91770; /* Morado Oscuro */
    --color-text-dark: #333333; /* Texto principal oscuro */
    --color-text-light: #CCCCCC; /* Texto claro */
    --font-family: 'Poppins', sans-serif;
}

/* 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;
}

/* --- HEADER --- */
header {
    display: flex;
    justify-content: space-between; /* CLAVE para separar el logo, nav y utilidades */
    align-items: center;
    padding: 10px 30px; /* Asegura un buen margen a los lados */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-primary); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    z-index: 100;
}
header .logo{
    max-width: 150px; /* Limita el ancho total del área del logo */
    line-height: 1;
}

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: 57px; /* Esto controlará el tamaño de la imagen del logo directamente */
    width: auto;
}

header nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    
}

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: 14px;
    font-weight: 600;
    padding-bottom: 5px;
    transition: color 0.3s;
}

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) */
}

#hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all .3s ease-in-out;
    background-image: url("imagenes/kist\ frios.png");
    animation: hero 28s infinite linear;
}

.hero-content{

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.658);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}

.hero-content h1{

    margin: 0;
    padding: 0;
    padding-bottom: 30px;
    font-size: 40px;
    text-align: center;

}

.hero-content a{
    text-decoration: none;
    color: #fff;
    padding: 9px 20px;
    border: 1px solid #fff;
    text-transform: uppercase;
    transition: all .3s ease-in-out;

}


#productos h1{

    text-align: center; 
    color: #1a1819;
    

}

#productos .container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto; /* CENTRA el contenedor en la pantalla */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* CENTRA las tarjetas internamente */
    gap: 20px; /* Crea un espacio uniforme entre tarjetas sin usar márgenes manuales */
}


#productosterag h1{

    text-align: center; 
    color: #1a1819;
    

}

#productosterag .container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto; /* CENTRA el contenedor en la pantalla */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* CENTRA las tarjetas internamente */
    gap: 20px; /* Crea un espacio uniforme entre tarjetas sin usar márgenes manuales */
}




.card {
    display: flex;
    flex-direction: column; /* Alinea el contenido en vertical */
    justify-content: space-between; /* Empuja el contenido a los extremos */
    flex: 0 1 250px; 
    min-height: 400px; /* OPCIONAL: Define una altura mínima para que todas sean iguales */
    border-radius: 10px;
    background: #ffffff;
    padding: 20px;
    text-align: center;
    transition: all 400ms ease;
}





.card:hover {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1); /* Sin comas entre los valores numéricos */
    transform: translateY(-5px);
}

.card h3 { 
    text-align: center; 
}


.card img{
    width: 100%;
    height: 210px;
    
}


#searchBar {
    width: 50%; /* Ajusta el ancho al 50% del contenedor */
    padding: 15px; /* Agrega espacio interno para que el texto se vea cómodo */
    margin: 20px auto; /* Centra horizontalmente y da espacio superior e inferior */
    display: block; /* Asegura que la barra esté alineada correctamente */
    font-size: 18px; /* Haz el texto más grande */
    border: 2px solid #d400ff; /* Borde azul con grosor */
    border-radius: 10px; /* Bordes redondeados */
    outline: none; /* Elimina el borde al hacer clic */
    transition: all 0.3s ease-in-out; /* Suaviza las transiciones */
}

#searchBar:focus {
    border-color: #D91770; /* Cambia el color del borde al enfocarse */
    box-shadow: 0 0 10px rgba(247, 0, 255, 0.5); /* Agrega un efecto de sombra */
}

.contenido a {
  margin-top: auto;
  display: inline-block;
  background-color:#ac155b; /* Un azul más suave y moderno */
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  border: 2px solid transparent; /* Borde transparente para la transición */
  border-radius: 50px; /* Bordes muy redondeados para un estilo "pastilla" */
  font-weight: 600; /* Un grosor de fuente intermedio */
  letter-spacing: 0.5px; /* Pequeño espaciado entre letras */
  transition: all 0.3s ease; /* Transición para todos los cambios */
}

.contenido1 a {
  margin-top: auto;
  display: inline-block;
  background-color:#ac155b; /* Un azul más suave y moderno */
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  border: 2px solid transparent; /* Borde transparente para la transición */
  border-radius: 50px; /* Bordes muy redondeados para un estilo "pastilla" */
  font-weight: 600; /* Un grosor de fuente intermedio */
  letter-spacing: 0.5px; /* Pequeño espaciado entre letras */
  transition: all 0.3s ease; /* Transición para todos los cambios */
}

.contenido a:hover {
  background-color: transparent; /* Fondo transparente */
  color: #9c4abd; /* El color del texto cambia a azul */
  border-color: #bd4abd; /* El borde se vuelve azul */
  transform: translateY(-2px); /* Mueve el botón ligeramente hacia arriba */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.contenido1 a:hover {
  background-color: transparent; /* Fondo transparente */
  color: #9c4abd; /* El color del texto cambia a azul */
  border-color: #bd4abd; /* El borde se vuelve azul */
  transform: translateY(-2px); /* Mueve el botón ligeramente hacia arriba */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.contenido h3 {
  margin-bottom: 10px; /* Un pequeño margen para separar el título del botón */
}

.contenido1 h3 {
  margin-bottom: 10px; /* Un pequeño margen para separar el título del botón */
}

.contenido {
  display: flex; /* Convierte el contenedor del contenido en un flex container */
  flex-direction: column; /* Apila el título y el botón */
  flex-grow: 1; /* Permite que este contenedor ocupe todo el espacio disponible */
  justify-content: flex-end; /* **Clave:** Alinea el contenido (el botón) al final */
  padding: 20px;
  text-align: center; /* Centra el texto y el botón horizontalmente */
}

.contenido1 {
  display: flex; /* Convierte el contenedor del contenido en un flex container */
  flex-direction: column; /* Apila el título y el botón */
  flex-grow: 1; /* Permite que este contenedor ocupe todo el espacio disponible */
  justify-content: flex-end; /* **Clave:** Alinea el contenido (el botón) al final */
  padding: 20px;
  text-align: center; /* Centra el texto y el botón horizontalmente */
}

/* El modal (por defecto oculto) */
.modal {
    display: none; /* Oculta el modal por defecto */
    position: fixed; /* Mantiene el modal en la misma posición al hacer scroll */
    z-index: 1; /* Coloca el modal encima de todo */
    left: 0;
    top: 0;
    width: 100%; /* Ocupa el ancho completo */
    height: 100%; /* Ocupa el alto completo */
    overflow: auto; /* Habilita el scroll si el contenido es muy largo */
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente */
}

/* Contenido del modal */
.modal-contenido {
    background-color: #fefefe;
    margin: 15% auto; /* Centra el modal vertical y horizontalmente */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Ancho del cuadro modal */
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Botón para cerrar el modal */
.cerrar-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.cerrar-modal:hover,
.cerrar-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Animación de entrada */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}



.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: #000000;
    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 */
}

/* parte del codigo de yodo 131 */


#hero2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all .3s ease-in-out;
    background-image: url("imagenes/yodo2.png");
    animation: hero 28s infinite linear;
}

.hero-content{

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.658);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}

.hero-content h1{

    margin: 0;
    padding: 0;
    padding-bottom: 30px;
    font-size: 40px;
    text-align: center;

}

.hero-content a{
    text-decoration: none;
    color: #fff;
    padding: 9px 20px;
    border: 1px solid #fff;
    text-transform: uppercase;
    transition: all .3s ease-in-out;

}


/* parte del codigo de teragnosticos */
#hero3 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all .3s ease-in-out;
    background-image: url("imagenes/terag.png");
    animation: hero 28s infinite linear;
}