/* Fuentes */

@font-face {
    font-family: '04b30';
    src: url('fonts/04b_30__-webfont.woff2') format('woff2'),
         url('fonts/04b_30__-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aquilinetworegular';
    src: url('aquilinetwo-webfont.woff2') format('woff2'),
         url('aquilinetwo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

a {
	text-decoration: none;
}

/* Barra de navegación */

body {
  padding-top: 80px;
}

body.admin-bar {
  padding-top: 112px; /* 80 + 32 */
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    padding-top: 126px; /* 80 + 46 */
  }
}

.navbar-personalizada {
    width: 100%;
    height: 80px; /* Altura de la navbar */
    display: flex;
    justify-content: space-between; /* Espacia los elementos */
    align-items: center; /* Centra verticalmente */
    position: fixed;
    top: 0;
    left: 0;
    background-color: #333; /* Fondo oscuro */
    padding: 20px 15px; /* Padding */
    box-sizing: border-box;
    z-index: 1000; /* Asegura que esté sobre otros elementos */
}

.navbar-menu {
    display: none; /* Oculto por defecto */
}

/* Iconos de la barra (toggle, logo, buscar) */
.navbar-toggle-icon, .navbar-close-icon {
    width: 300px; /* Tamaño del ícono */
    height: auto;
    position: relative;
    cursor: pointer;
    max-height: 40px;
    width: 40px; /* Tamaño de los iconos */
    height: 40px;
    margin: 0 10px;
    cursor: pointer; /* Cursor de mano */
    transition: transform 0.3s ease; /* Animación suave */
}
 
 .navbar-input-buscar {
    height: 30px; /* Altura del campo de texto */
    padding: 5px 10px; /* Espaciado interno */
    border: none; /* Sin bordes */
    border-radius: 5px; /* Bordes redondeados */
}

.navbar-toggle-icon, .navbar-close-icon, .navbar-buscar {
    width: 40px; /* Tamaño de los íconos */
    height: 40px;
    margin: 0 10px; /* Espaciado entre íconos */
    cursor: pointer; /* Cursor de mano */
    transition: transform 0.3s ease; /* Animación suave */
}

/* Estilos para el enlace */
.navbar-logo-link {
    display: flex; /* Para centrar la imagen dentro del enlace */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    max-height: 100%; /* Limita la altura */
    margin: auto; /* Asegura que el logo esté centrado dentro del enlace */
}

/* Estilos para la imagen */
.navbar-logo {
    max-height: 40px; /* Altura máxima del logo */
    width: auto; /* Mantén la proporción de la imagen */
    cursor: pointer; /* Cursor de mano */
    transition: transform 0.3s ease; /* Animación suave */
}

/* Contenedor del input de búsqueda */
.menu-search-container {
	width: 70%;
	margin: 0 auto;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Alinea verticalmente el input y el ícono */
    margin-bottom: 20px; /* Espacio entre el input y las 3 columnas */
}

/* Input de búsqueda */
.search-input {
    padding: 10px;
    width: 200px; /* Ajusta según lo necesario */
    border: 1px solid #ccc;
    border-radius: 5px; /* Bordes redondeados en el lado izquierdo */
    outline: none;
}

.navbar-logo:hover {
    transform: scale(1.2); /* Aumenta el tamaño al pasar el mouse */
}

.navbar-close-icon {
    display: none; /* Oculto por defecto */
}

.navbar-buscar {
    max-height: 40px; /* Altura del ícono de búsqueda */
}

/* Ajuste para la barra de administración de WordPress */
body.admin-bar .navbar-personalizada {
    margin-top: 32px; /* Desplaza la navbar */
}

@media screen and (max-width: 782px) {
    body.admin-bar .navbar-personalizada {
        margin-top: 46px; /* Ajuste para pantallas pequeñas */
    }
}

/* Estilos para el menú desplegable a pantalla completa */
.fullscreen-menu {
    display: none;
    position: fixed;
    top: 80px; /* Espacio para la navbar */
    left: 0;
    width: 100%;
    height: 100vh; /* Altura completa de la pantalla */
    background-color: #333;
    z-index: 999;
    overflow: hidden; /* Oculta el scroll si fuera necesario */
    padding-bottom: 10px; /* Aseguramos que los elementos no se corten al final */
}

.fullscreen-menu.active {
    display: flex; /* Muestra el menú cuando está activo */
	flex-direction: column;
}

/* Contenedor de columnas del menú */
.menu-column-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
	margin-top: 5%;
}

/* Estilo de cada columna */
.menu-column-1,
.menu-column-2,
.menu-column-3 {
    width: 33.33%; /* Tres columnas iguales */
    padding: 1em 2em;
    box-sizing: border-box;
}

/* Estilo para la primera columna (Comunidad) */
.comunidad-box {
	font-family: '04b30', sans-serif;
    width: 80%;
    background-color: #d7919b; /* Fondo magenta */
    color: black;
	font-size: 22px;
	text-shadow: 4px 2px #ffe900;
	letter-spacing: 2px;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    margin: 2em auto; /* Centra el div */
    box-sizing: border-box;
	margin-bottom: 2em;
}

.opciones-suscripcion {
    display: flex; /* Fila para opciones */
    justify-content: space-between;
    margin-top: 10px;
}

.opcion-suscripcion {
    background-color: #ffe900; /* Color de fondo */
	font-family: 'Oswald';
    color: black; /* Color de texto */
    border: none; /* Sin bordes */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de fuente */
    text-align: center; /* Centrado del texto */
    cursor: pointer; /* Cursor de mano */
    border-radius: 5px; /* Bordes redondeados */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Animación */
	padding-bottom: 2rem;
	font-weight: bold;
}

.opcion-suscripcion:hover,
.comunidad-box:hover,
.titulo-textos:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño */
	transition: transform 0.3s ease; /* Animación suave */
}

.linea-textos {
	border: 1px solid white; 
    width: 90%;
    margin: 0 auto;
	margin-bottom: 10%;
}

.linea-amarilla {
	border: 1px solid #ffff00; /* Línea blanca */
    width: 80%;
    margin: 0 auto;
	margin-bottom: 1em;
}

.lista-contenedor {
    font-family: monospace;
    display: flex; /* Listas en fila */
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
	text-align: center; /* Centra el texto */
}

.lista-izquierda, .lista-derecha {
    list-style: none; /* Sin viñetas */
    padding: 0;
    margin: 0;
    width: 48%; /* Ancho de las listas */
	text-align: center; /* Centra el texto */
	
}

.lista-izquierda li, .lista-derecha li {
    color: white;
	font-family: 'Oswald';
    font-size: 16px;
    margin-bottom: 10px;
	text-align: center; /* Centra el texto */
	white-space: normal; /* Permite saltos de línea */
    word-wrap: break-word; /* Ajusta las palabras largas */
}

ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estilo base del link */
.link-red {
    display: inline-block; /* Para asegurarte de que el enlace mantenga su comportamiento de bloque */
    text-decoration: none;
    color: inherit; /* Para que herede el color del texto actual */
    cursor: pointer; /* Cursor de mano */
    transition: transform 0.3s ease; /* Animación suave */
}

/* Efecto hover (aplica el translate) */
.link-red:hover {
    transform: scale(1.2); /* Ajusta según el efecto que desees */
}

/* Estilos para la tercera columna (Redes Sociales) */
.redes-sociales {
    display: flex; /* Fila para iconos */
    justify-content: center;
    align-items: center;
    margin-top: 2em;
}

.icono-red {
    width: auto; /* Para evitar restricciones en el ancho */
    height: 40px;
    margin: 0 10px;
    cursor: pointer; /* Cursor de mano */
    transition: transform 0.3s ease; /* Animación suave */
}


.icono-red:hover {
    transform: scale(1.2); /* Aumenta el tamaño al pasar el mouse */
}

.btn-suscripcion {
    width: auto; /* Para evitar restricciones en el ancho */
    height: 40px;
    margin: 0 10px;
    cursor: pointer; /* Cursor de mano */
    transition: transform 0.3s ease; /* Animación suave */
}


.btn-suscripcion:hover {
    transform: scale(1.2); /* Aumenta el tamaño al pasar el mouse */
}

.titulo-textos {
    font-family: 'Oswald';
	color:white;
    font-size: 2em;
	text-align: center; 
	margin-bottom: 1em;
}

.suscribite-por {
	font-family: 'Oswald';
	color: #ffe900;
    font-size: 1.5em;
	text-align: center;
    margin: 1.5em 0em 2em;
}

.seguinos-en {    
	font-family: 'Oswald';
	color: #ffe900;
    font-size: 1.2em;
	text-align: center; 
	margin: 2em 0em 2em;
}

.quienes-somos-nb {
	font-family: '04b30';
	color: #ffe900;
    font-size: 1.3em;
	text-align: center; 
	margin-top: 2em;
}

/* Estilos responsivos para pantallas más pequeñas */

@media (max-width: 600px) {
        .search-input {
                width: 160px;
        }
	.icono-red {
		width: 30px;
		height: 30px;
	}
	.seguinos-en {
		margin-top: -2em;
		margin-bottom: 1em;
	}
	.titulo-textos {
		margin-top: -1.5em;
	}
	.comunidad-box {
		margin-bottom: 1em;
		margin-top: -0.5em;
	}
	.linea-comunidad {
		margin-bottom: 0%;
		width: 75%;
	}
	.menu-search-container {
		margin-top: 1em;
	}
	.linea-textos {
		margin-bottom: 5%;
		width: 75%;
	}
	.suscribite-por {
		margin-bottom: 20px;
		margin-top: 0;
	}
	.titulo-textos {
		margin-bottom: 0.5em;
	}
	.navbar-logo {
		max-height: 30px;
	}
	.quienes-somos-nb {
		margin-top: 10px;
	}
	.seguinos-en {
		margin: 0px 0px 15px;
		font-size: 1.1em;
	}
	.menu-column-2 {
		margin-top: -4em;
	}
	.menu-column-3 {
		margin-top: -6em;
	}
	.opciones-suscripcion {
		justify-content: center;
	}
}

@media (min-width: 600px) and (max-width: 1400px) {
  /* Tus estilos aquí */
  .navbar-logo {
	max-height: 35px;
  }
  .icono-red {
	  max-height: 35px;
  }
}

@media (max-width: 1024px) {
    .menu-column-container {
        flex-direction: column; /* Coloca las columnas en columna */
        height: 100%; /* Ocupa todo el alto disponible */
        justify-content: space-between; /* Espacio entre las columnas */
		margin-top: 3%;
    }
    .menu-column-1,
	.menu-column-2,
	.menu-column-3	{
        width: 100%;
        flex: 1;
    }
    .categories-container {
        flex-direction: column; /* Disposición en columna */
    }
    .vertical-divider {
        width: 80%;
        height: 2px;
        margin: 20px 0; /* Espacio para divisor horizontal */
    }
	.menu-column-1 h1,
	.menu-column-2 h1,
	.menu-column-3 h1,
	.lista-contenedor, 
	.redes-sociales {
		max-height: calc(100vh / 3); /* Limita la altura de cada sección a 1/3 de la pantalla */
		overflow: hidden; /* Si el contenido es muy largo, lo ocultamos */
		text-overflow: ellipsis; /* Se indica que el texto se corta */
	}
	.lista-izquierda li, .lista-derecha li, .opcion-suscripcion, .redes-sociales img {
		font-size: 14px; /* Tamaño de fuente más pequeño para pantallas pequeñas */
		max-height: 30px; /* Limitar la altura de los elementos para que no se corten */
	}
	.menu-column-1,
	.menu-column-2,
	.menu-column-3	{
		padding: 10px 20px; /* Reduce el padding en pantallas pequeñas */
	}
	.redes-sociales {
		margin-top: 0em;
	}
	.opcion-suscripcion {
		margin-top: 0em;
	}
	.navbar-buscar {
		display: none;
	}
	.navbar-logo {
		margin: 0;
	}
	    /* Alinear el logo al margen izquierdo */
    .navbar-logo-link {
        position: absolute;
        left: 15px; /* Margen desde el borde izquierdo */
        top: 50%; /* Centrado vertical */
        transform: translateY(-50%); /* Ajuste para centrar */
    }

    /* Alinear los íconos toggle y cerrar al margen derecho */
    .navbar-toggle-icon, .navbar-close-icon {
        position: absolute;
        right: 15px; /* Margen desde el borde derecho */
        top: 50%; /* Centrado vertical */
        transform: translateY(-50%); /* Ajuste para centrar */
    }
}

@media (min-width: 1024px) {
	.menu-search-container {
		display: none;
	}
}

.navbar-input-buscar {
    display: none;
    position: absolute;
    right: 50px; /* Asegúrate de ajustar la posición correctamente */
    top: 50%; /* Ajustar verticalmente según sea necesario */
    width: 300px !important;
    margin-right: 2rem;
    margin-top: 0.9rem;
}

.navbar-input-buscar.show {
    display: block;
    opacity: 1;
}

/* Estilos para pantallas menores o iguales a 1024px */
@media (max-width: 1024px) {
    .navbar-input-buscar,
    #buscar-icono {
        display: none !important;
    }
}

/* Estilos para pantallas mayores a 1024px */
@media (min-width: 1025px) {
    .navbar-input-buscar {
        position: absolute;
        right: 50px; /* Ajusta según la posición del ícono */
        top: 10px; /* Ajusta según la altura del ícono */
        padding: 5px;
        transition: width 0.5s ease, opacity 0.5s ease;
    }

    .navbar-input-buscar.activo {
        width: 200px; /* El tamaño que quieras para el input */
        opacity: 1;
        visibility: visible;
    }

    .icono-red {
        cursor: pointer;
    }
}

.search-button {
    font-family: 'Oswald', sans-serif; /* Establece la fuente Oswald */
    color: black; /* Texto negro */
    background-color: #ffe900; /* Fondo amarillo */
    border: none; /* Sin borde */
    padding: 7px 15px 8px; /* Relleno */
    cursor: pointer; /* Cursor de mano */
    border-radius: 5px; /* Bordes redondeados */
}