@font-face {
    font-family: 'LTSaeada';
    src: url('../fonts/saeada/LTSaeada-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}



:root {
    --primary-color: #1E064A;/*var(--primary-color)*/
    --secondary-color: #CC6CDE;/*var(--secondary-color)*/
    --accent-color1: #5820D4;/*var(--accent-color1)*/
    --accent-color2: #46C6F6;/*var(--accent-color2)*/
    --background-color: #f3f3f3;/*var(--background-color)*/
    --text-color: #f0f0f0;/*var(--text-color)*/
    --text-color-secondary: #3b3b3b;/*var(--text-color-secondary)*/
    --background-color-transparent: #ffffff00;/*var(--background-color-transparent)*/
    --text-yellow: #e9cc2c;/*var(--text-yellow)*/
    --button-bg-color: #e4a00d; /* Color de fondo del botón */
    --button-text-color: #FFFFFF; /* Color del texto del botón */
}
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    background-color: var(--background-color);    
    align-content: space-between;
}

/* Media Queries */



.header-container {
    width: 100%;
    height: 4rem;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.search-container img.pluss-icon,
.header-items button img {
    width: 2.5rem; /* Ajusta según sea necesario */
    height: 2.5rem; /* Ajusta según sea necesario */
    vertical-align: middle;
}

.search-container img.pluss-icon {
    width: 2rem; /* Ajusta según sea necesario */
    height: 2rem; /* Ajusta según sea necesario */
    vertical-align: middle;
}

.search-container img.search-icon {
    width: 1.8rem; /* Ajusta según sea necesario */
    height: 1.8rem; /* Ajusta según sea necesario */
    vertical-align: middle;
}

.search-container:hover img.pluss-icon{
    transform: scale(1.1); /* Aumenta ligeramente el tamaño */
    opacity: 1; /* Reduce la opacidad para el efecto de hover */
}
.search-container {
    position: relative;
    background-color: var(--accent-color1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    line-height: 2.5;
}
.logo-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-image {
    height: 3rem;
}

.right-container {
    display: none;
    align-items: center;
}

.search-input {
    font-family: 'LTSaeada', sans-serif;
    width: 6.5rem;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    padding-right: 0rem;
    padding-left: 2.8rem;
    font-size: 1rem;
    margin: -4px;
    font-weight: 700;
}

.search-input:focus {
    outline: none;
}

.search-icon {
    color: white;
    position: absolute;
    right: 6rem;
    font-size: 14px;
    pointer-events: none;
}

.pluss :hover {
    cursor: pointer;
}
.pluss-icon {
    width: 2rem; /* Ajusta según sea necesario */
    height: 2rem; /* Ajusta según sea necesario */
    vertical-align: middle;
    padding: 4px;
    grid-area: button;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(255, 255, 255);
    background-color: rgb(102, 187, 102);
    border-bottom: 0.1875rem solid rgb(65, 117, 65);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0.625rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hamburger-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    display: none;
    margin-left: 10px;
}

.header-items {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.header-btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
    outline: none; /* Remueve el borde del botón */
}

.header-btn:hover img {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño */
}

.header-btn:active {
    outline: none; /* Remueve el borde al presionar */
    box-shadow: none; /* Remueve el sombreado al presionar */
}

.header-btn:focus {
    outline: none; /* Remueve el borde al enfocarse */
}

.btn-header-inicio {
    background-color: transparent !important; /* Fondo transparente */
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}
.btn-header-inicio:hover {
    background-color: var(--background-color-transparent); /* Mantener el fondo transparente */
}
.btn-header-inicio a {
    font-family: 'Heebo', sans-serif;
    font-size: 1.2rem;
    font-weight: 600; /* Letras un poco gruesas */
    color: #ffffff !important; /* Color amarillo de la paleta */
    text-decoration: none;
    transition: color 0.3s ease;
}
.btn-header-inicio a:hover {
    color: var(--accent-color2) !important; /* Cambiar color al pasar el mouse */
}

.btn-header-login {
    background-color: transparent !important; /* Fondo transparente */
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}
.btn-header-login:hover {
    background-color: var(--background-color-transparent); /* Mantener el fondo transparente */
}
.btn-header-login a {
    font-family: 'Heebo', sans-serif;
    font-size: 1.2rem;
    font-weight: 600; /* Letras un poco gruesas */
    color: var(--text-yellow) !important; /* Color amarillo de la paleta */
    text-decoration: none;
    transition: color 0.3s ease;
}
.btn-header-login a:hover {
    color: var(--accent-color2) !important; /* Cambiar color al pasar el mouse */
}
.btn-header-registro {
    background-color: var(--button-bg-color);
    border: none;
    border-radius: 25px; /* Bordes redondeados */
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.btn-header-registro a {
    font-family: 'Heebo', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--button-text-color);
    text-decoration: none;
    display: inline-block;
    padding: 0.2rem 0.4rem;
    transition: color 0.3s ease;
}

.btn-header-registro:hover {
    background-color: var(--accent-color1); /* Cambiar color de fondo al pasar el mouse */
}

.btn-header-registro a:hover {
    color: var(--text-color) !important; /* Cambiar color de letras al pasar el mouse */
}
/* Media Queries */
@media (min-width: 320px)  { /* Vertical Screen Phones */
    /* Estilos específicos para dispositivos con ancho mínimo de 320px */
}

@media (min-width: 375px)  { /* iPhone 6 / 6S */
    /* Estilos específicos para dispositivos con ancho mínimo de 375px */
}

@media (min-width: 414px)  { /* iPhone 7 / 7 Plus, iPhone 8 / 8 Plus, Nexus 6P */
    /* Estilos específicos para dispositivos con ancho mínimo de 414px */
}

@media (min-width: 480px)  { /* Horizontal/Landscape Screen Phones */
    /* Estilos específicos para dispositivos con ancho mínimo de 480px */
}

@media (min-width: 600px)  { /* Tablets and Vertical iPads */
    /* Estilos específicos para dispositivos con ancho mínimo de 600px */
    
}

@media (min-width: 768px)  { /* iPad Mini */
    /* Estilos específicos para dispositivos con ancho mínimo de 768px */   
    .right-container {
        display: flex;
        align-items: center;
    }
    
    
    
}

@media (min-width: 801px)  { /* Tablet, Horizontal/Landscape iPads, low-resolution Laptops */
    /* Estilos específicos para dispositivos con ancho mínimo de 801px */
    
}

@media (min-width: 1024px) { /* iPad Pro */
    /* Estilos específicos para dispositivos con ancho mínimo de 1024px */
}

@media (min-width: 1280px) { /* Pixel C, Samsung Galaxy Tab 10 */
    /* Estilos específicos para dispositivos con ancho mínimo de 1280px */
}

@media (min-width: 1281px) { /* Laptops and Desktops */
    /* Estilos específicos para dispositivos con ancho mínimo de 1281px */
}