/*
 T h*eme Name:     Coalición LAC RMD-child
 Theme URI:      http://ejemplo.com/mi-tema-hijo/
 Description:    Tema hijo para Coalición LAC RMD
 Author:         Frjo91
 Author URI:     http://ejemplo.com
 Template:       lacrmd
 Version:        1.0.8
 */

/* Definir la fuente personalizada */
@font-face {
    font-family: 'Effra Std';
    src: url('fonts/Effra_Std_Rg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Mejora el rendimiento de carga */
}

.site-header_new{
    height: 60px !important;
}
.site-nav_new a{
    font-family: 'Effra Std', Arial, sans-serif !important;
}

.site-nav_new ul li.current-menu-item:not(#menu-item-68):not(#menu-item-69) a,
.site-nav_new ul li.active a{
    opacity: none !important;
    color: var(--primary) !important;
}

.header_empresa{
    margin-top: 60px;
    padding: 16px;
}

/* Estilos personalizados para replicar el diseño exacto */
.coalicion-footer {
    font-family: 'Effra Std', Arial, sans-serif !important;
    padding: 50px 0;
    font-size: 14px;
}

.coalicion-footer h5 {
    font-weight: bold;
    margin-bottom: 20px;
}

/* Estilos para la sección central "Contáctenos" */
.coalicion-footer .contacto-lista {
    list-style: none;
    padding: 0;
}

.coalicion-footer .contacto-lista li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.coalicion-footer .contacto-lista .icono {
    font-size: 24px;
    margin-right: 15px;
    margin-top: -3px; /* Ajuste fino de alineación */
}

.coalicion-footer .contacto-lista .texto p {
    margin: 0;
    line-height: 1.4;
}

.coalicion-footer a {
    text-decoration: none;
}

.coalicion-footer a:hover {
    text-decoration: underline;
}

/* Estilos para los iconos de redes sociales (sección izquierda) */
.coalicion-footer .redes-sociales {
    margin-top: 25px;
}

.coalicion-footer .redes-sociales a {
    display: inline-block;
    margin-right: 15px;
    font-size: 20px;
    width: 35px;
    height: 35px;
    background-color: white;
    color: black;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    transition: opacity 0.3s;
}

.coalicion-footer .redes-sociales a:hover {
    opacity: 0.8;
}

/* Estilos para el gran texto de impacto (sección derecha) */
.coalicion-footer .texto-impacto {
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 25px;
}

/* Estilos para la sección de notificaciones (sección derecha inferior) */
.coalicion-footer .notificaciones {
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.5;
}

/* Estilos para el texto descriptivo del logo */
.logo-descriptivo {
    font-size: 11px;
    line-height: 1.3;
    color: white;
}

.btn-pill-after {
    display: inline-block; /* Para que el contenedor no ocupe todo el ancho */
}

.btn-pill-after > a {
    display: inline-flex;
    align-items: center;
    background-color: var(--secondary) !important;
    color: var(--white) !important;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none !important;
    position: relative;
    transition: all 0.3s ease;
    /* Dejamos un margen derecho para que el círculo tenga su espacio */
}

.btn-pill-after > a::after {
    /* Contenido e Icono */
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    /* Posicionamiento */
    position: absolute;
    right: -55px; /* Lo empuja exactamente fuera del cuerpo verde */
    top: 50%;
    transform: translateY(-50%) rotate(45deg); /* Centra verticalmente y rota la flecha */

    /* Dimensiones del círculo */
    width: 48px;
    height: 48px;
    background-color: var(--secondary);
    color: var(--dark);
    border-radius: 50%;

    /* Centrado del icono dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.3s ease;
}

/* --- Efectos Hover --- */

.btn-pill-after > a:hover {
    transform: scale(1.02);
   /* background-color: #8cc652; /* Cambio sutil en el cuerpo */
}

.btn-pill-after > a:hover::after {

    /* Mantenemos el centrado vertical y la rotación en el hover */
    transform: translateY(-50%) rotate(45deg) scale(1.1);
}


/* Contenedor principal de la tarjeta (Bloque Cover/Fondo) */
.wp-block-cover.tarjeta-proyectos {
    border-radius: 30px; /* Bordes redondeados de la imagen */
    overflow: hidden;
    height: 400px; /* Ajusta según necesites */
    border: none;
    transition: transform 0.3s ease;
}

.wp-block-cover.tarjeta-proyectos:hover {
    transform: translateY(-5px);
}

/* Superposición oscura inferior para legibilidad */
.wp-block-cover.tarjeta-proyectos .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Empuja el contenido al fondo */
    padding: 20px !important;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.8));
}

/* Estilo del Botón dentro de la tarjeta */
.tarjeta-proyectos a {
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro semitransparente */
    color: #ffffff !important;
    padding: 8px 25px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 20px;
    position: relative;
    margin-right: 45px; /* Espacio para el círculo */
    backdrop-filter: blur(5px); /* Efecto cristal si el navegador lo soporta */
}

/* El círculo blanco con la flecha verde */
.tarjeta-proyectos a::after {
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);

    width: 35px;
    height: 35px;
    background-color: #ffffff; /* Círculo blanco */
    color: #7db642; /* Flecha verde */
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Hover específico para el botón de la tarjeta */
.tarjeta-proyectos a:hover::after {
    background-color: #7db642;
    color: #ffffff;
}

.tarjetas-proyectos{
    margin-top:-50px;
}

.texto-compacto {
    line-height: 1.2 !important; /* Valor por defecto suele ser 1.5 o 1.6 */
}

/* Si quieres un interlineado aún más estrecho (para títulos) */
.texto-muy-compacto {
    line-height: 1 !important;
}

.tarjeta-proyectos-contendor{
	max-width: 350px;
	max-height:400px;
}

.logo-comite{
	height:96px !important;
	width:100% !important;
}

.logo-comite img{
	max-height:96px !important;
	width:auto !important;
	max-width: 100% !important;
}

.btn-verde > a {
    display: inline-flex;
    align-items: center;
    background-color: var(--secondary) !important;
    color: var(--white) !important;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none !important;
    position: relative;
    transition: all 0.3s ease;
    /* Dejamos un margen derecho para que el círculo tenga su espacio */
}

.fuente_new{
    font-family: 'Effra Std', Arial, sans-serif !important;
}

.fuente_new>h2{
    font-family: 'Effra Std', Arial, sans-serif !important;
}

.flecha{
	position: relative;
}

.flecha::after {
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);

    width: 35px;
    height: 35px;
    background-color: var(--white); /* Círculo blanco */
    color:var(--secondary); /* Flecha verde */
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

.flecha-verde{
	position: relative;
}

.flecha-verde::after {
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);

    width: 35px;
    height: 35px;
  background-color: var(--secondary);
    color: var(--dark);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

.text-gray{
	color: var(--gray);
}

.card-queHacemos{
	max-width: 500px;
}