/*
Theme Name: Brooklyn Child
Theme URI: http://www.unitedthemes.com
Description: Creative Portfolio
Version: 1.0.0
Author: United Themes
Author URI: http://www.unitedthemes.com
Template: brooklyn
*/

/*
 /*
 * Estilos para la taxonomía
 * -------------------------------------------------- */

/* Contenedor principal del grid */
.tax-etiqueta-de-pagina .mi-diseno-personalizado {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea 3 columnas iguales */
    gap: 30px; /* Espacio entre los artículos */
}

.tax-edicion .mi-diseno-personalizado {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea 3 columnas iguales */
    gap: 30px; /* Espacio entre los artículos */
}

.tax-seccion .mi-diseno-personalizado {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea 3 columnas iguales */
    gap: 30px; /* Espacio entre los artículos */
}


/* Estilo de cada tarjeta de artículo */
.mi-diseno-personalizado .mi-articulo {
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* --- NUEVAS LÍNEAS AQUÍ --- */
    display: flex;          /* Activa Flexbox */
    flex-direction: column; /* Apila los elementos en una columna vertical */
}

.mi-diseno-personalizado .mi-articulo:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Estilo de la imagen */
.mi-articulo-imagen img {
    width: 100%;
    height: auto;
    display: block;
}

/* Contenedor del contenido (título y extracto) */


.mi-articulo-contenido {
    padding: 20px;
}



/* Media Queries para hacerlo responsive */
@media (max-width: 960px) {
    .tax-etiqueta-de-pagina .mi-diseno-personalizado {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (max-width: 600px) {
    .tax-etiqueta-de-pagina .mi-diseno-personalizado {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}


/* Media Queries para hacerlo responsive */
@media (max-width: 960px) {
    .tax-seccion .mi-diseno-personalizado {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (max-width: 600px) {
    .tax-seccion .mi-diseno-personalizado {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}


/*
 * CORRECCIÓN FINAL: Alineación y estilo para el enlace
 * de video con ícono de Font Awesome.
 * -------------------------------------------------- */

.ut-video-link-con-icono {
    /* Alineación horizontal */
    display: contents!important;
    flex-direction: row !important;
    align-items: center !important;
    text-decoration: none; /* Quita el subrayado */
}

/* Corregimos el selector para apuntar al ícono correcto (fa-play) */
.ut-video-link-con-icono .fa-play {
    margin-right: 8px;  /* Espacio entre el ícono y el texto */
    font-size: 1.8em;    /* Tamaño del ícono, ajústalo a tu gusto */
}

/* Estilo para el texto */
.ut-video-link-con-icono span {
    font-weight: bold;   /* Texto en negrita, como en la imagen */
	font-family: 'CocoSharpXS-Bold' !important;
}

/* Efecto hover opcional */
.ut-video-link-con-icono:hover,
.ut-video-link-con-icono:hover span,
.ut-video-link-con-icono:hover .fa-play {
    color: #FFFFFF; /* Cambia a blanco al pasar el ratón */
}

/*
 * Estilos para la sección de Relacionados en Portfolio
 * -------------------------------------------------- */

.portfolio-relacionados {
    padding: 60px 0;
    background-color: #f8f8f8; /* Un fondo gris claro para diferenciar la sección */
    clear: both; /* Asegura que se muestre correctamente debajo de cualquier contenido flotante */
    border-top: 1px solid #eee;
}

.relacionado-titulo {
    font-size: 30px !important;
    line-height: 1.4 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
}


.relacionados-grid {
    display: grid;
    /* Crea 3 columnas iguales en escritorios */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Espacio entre las columnas y filas */
}

.relacionado-item {
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 4px;
    overflow: hidden; /* Para que la imagen respete los bordes redondeados */
}

.relacionado-item:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.relacionado-link {
    display: block;
    text-decoration: none;
	color: black;
}

.relacionado-imagen img {
    width: 100%;
    height: auto;
    display: block; /* Elimina espacios extra debajo de la imagen */
}

.relacionado-contenido {
    padding: 20px 25px;
}

.relacionado-titulo {
    font-size: 1.1rem;
    line-height: 1.4;
    color: #333;
    margin: 0;
}

/* Para pantallas más pequeñas (móviles), pasa a una sola columna */
@media (max-width: 414px) {
    .relacionados-grid {
        grid-template-columns: 1fr;
    }
}
/*
 * Hace que los videos incrustados (oEmbed) sean responsivos
 * -------------------------------------------------- */

.video-incrustado-responsive {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 0px; /* Proporción 16:9 (para videos panorámicos) */
}

.video-incrustado-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}