/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: OoO Amodo Soluciones
Author URI: https://amodosoluciones.com/
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.6.1770221652
Updated: 2026-02-04 17:14:12

*/
@import url('../hello-elementor/style.css');
@import url('https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&display=swap');
/*
.header-scroll {
    background-color: transparent;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    position: fixed; 
    width: 100%;
    z-index: 999;
}

.header-scroll.scrolled {
    background-color: rgba(40, 40, 40, 0.85);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); 
}
*/

/* *,p,h1,h2,h3,h4,h5,div,span{
    font-family: "LEGO typewell", Sans-serif!important;
} */

/* ==========================
   Fullwidth Portfolio Wrapper
========================== */
.portfolio-fullwidth-wrapper{
    width: 100%; 
    max-width: 100%;
    overflow: hidden; /* Añadimos esto por seguridad */
}

/* ==========================
   Portfolio Rows Elementor
========================== */
.portfolio-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin:0;
    padding:80px 5%;
    border-bottom:1px solid #eee;
}

.portfolio-text{
    order:1;
}

.portfolio-image{
    order:2;
}

.portfolio-image img{
    width:100%;
    height:auto;
    border-radius:12px;
}

.portfolio-description{
    width:100%;
    margin-top:30px;
}

.portfolio-title{
    font-size:48px;
    margin-bottom:20px;
}

.portfolio-content{
    font-size:18px;
    line-height:1.7;
}

/* ==========================
   Grid 3x Portfolio Cards
========================== */
/* .portfolio-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    width:100%;
    padding:40px 5%;
    box-sizing:border-box;
} */
/* 1. MÓVIL VERTICAL (Por defecto) 
   - 1 columna por línea
   - Reducimos el gap y el padding lateral para ganar espacio
*/
.portfolio-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  width: 100%;
  padding: 30px 15px; /* Menos espacio en los bordes para móviles */
  box-sizing: border-box;
}

/* 2. MÓVIL HORIZONTAL (Landscape) Y TABLETS PEQUEÑAS 
   - A partir de 480px o 600px según el diseño
   - Pasamos a 2 columnas para que no se vea una imagen gigante
*/
@media (max-width: 853px) {
    .portfolio-card {
       /* min-height: 444px;*/
		min-height: auto;
    }
    .portfolio-card-title{
        font-size: 16px;
        margin:0px;
        min-height: 42px;
    }
    .portfolio-card-image {
        width: 100%;
        max-width: 100% !important;
    }
}
@media (min-width: 600px) {
  .portfolio-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding: 40px 3%;
  }

}

/* 3. IPAD / TABLET VERTICAL 
   - Mantenemos 2 columnas pero con márgenes más amplios
*/
@media (min-width: 768px) {
  .portfolio-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 5%;
  }
}

/* 4. IPAD HORIZONTAL / LAPTOPS PEQUEÑOS 
   - A partir de 1024px
   - Aquí ya consideramos óptimo volver a las 3 columnas originales
*/
@media (min-width: 1024px) {
  .portfolio-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 40px 5%;
  }
}
/* ==========================
   Individual Card
========================== */
.portfolio-card {
    background: transparent;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    border: 0.5px solid grey;
    border-radius: 0px;
}

/* 1. TÍTULO ARRIBA (100% ancho) */
.portfolio-card-title {
    width: 100%;
    /* font-size: 22px;
    margin: 0 0 15px 0; */
    text-align: center;
    box-sizing: border-box;
}

/* 2. CUERPO (50% Imagen / 50% Descripción) */
.portfolio-card-body {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

/* ==========================
   Sección interna: 2 columnas
========================== */
.portfolio-card-inner{
    display:flex;
    flex-direction:row;
    gap:20px;
    padding:20px;
}

/* Imagen a la izquierda (50%) */
.portfolio-card-image {
    flex: 0 0 50%;
    max-width: 50%;
    height: 180px; /* Altura máxima controlada */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
}

/* Derecha: título + descripción + botón */
.portfolio-card-right{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

/* Título */
.portfolio-card-title{
    font-size:25px;
    margin:0 0 10px 0;
    font-family: "LEGO typewell", Sans-serif;
	min-height: 60px;
	text-transform: uppercase; /*añadido pablo*/
}

/* Descripción */
.portfolio-card-desc {
    font-family: "LEGO typewell", Sans-serif;
    flex: 0 0 50%;
    max-width: 50%;
    font-size: 14px;
    color: #fff;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    box-sizing: border-box;
}

/* Botón */
/* 3. BOTÓN ABAJO (100% ancho, centrado con su tamaño original) */
.portfolio-card-button {
    width: 100%;
    text-align: center;
    margin-top: auto; /* Empuja el botón al final de la tarjeta */
}

.portfolio-card-button a {
    display: inline-block;
    padding: 10px 25px; /* Mantiene el tamaño original del botón */
    background: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 6px;
    transition: all .3s ease;
    font-size: 13px;
}

.portfolio-card-button a:hover {
    background: #fff;
    color: #D3141B;
}

/* ==========================
   Botón carga más
========================== */
.portfolio-load-wrapper{
    text-align:center;
    margin:40px 0;
}

#portfolio-load-more-grid{
    padding:12px 30px;
    background: #D3141B;
    color:#fff;
    border:none;
    cursor:pointer;
    border-radius:6px;
}

/* ==========================
   Ajuste Responsive (Móviles)
========================== */
@media (max-width: 600px) {
    .portfolio-card-body {
        flex-direction: column; /* Pasa a 1 sola columna en dispositivos pequeños */
    }
    
    .portfolio-card-image,
    .portfolio-card-desc {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .portfolio-card-desc {
        text-align: center;
    }
}

/* ==========================
   Responsive
========================== */
@media(max-width:1024px){
    /* .portfolio-grid-3{
        grid-template-columns:1fr;
    } */
    .portfolio-card-inner{
        flex-direction:column;
        align-items:center;
    }
    .portfolio-card-image{
        max-width:100%;
        height:200px;
    }
    .portfolio-card-right{
        text-align:center;
        margin-top:10px;
    }
    .portfolio-card-desc, .portfolio-card-button{
        padding:10px 0;
        text-align:center;
    }
}

/* Imagen izquierda centrada horizontal y vertical */
.portfolio-card-image{
    flex:0 0 40%;
    max-width:40%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    height:200px; /* altura fija para todas las imágenes */
}

.portfolio-card-image img{
    max-width:100%;
    max-height:100%;
    object-fit:cover;
}
.portfolio-card:hover {
	border: 0.5px solid grey;
	border-radius: 0px
}

.portfolio-card-button {
	text-align: center;
}

html, body {
	overflow-x: hidden;
	position: relative;
	width: 100%;
}

/* html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
} */

body {
    overflow: visible !important;
    height: auto !important;
    position: relative;
}
.elementor-field-group-field_6571836 .elementor-field-label {
  font-size: 12px !important;line-height: 1.2;letter-spacing: -0.029em;
}
body .elementor-282 .elementor-element.elementor-element-801e2e1 .elementor-labels-above .elementor-field-group > label {
  padding-bottom: 30px;
  text-transform: inherit;
  text-align: justify;
}
.contenedorportfolio .elementor-heading-title.elementor-size-default .titulo {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  color: var( --e-global-color-6a9cd0c );
}
.contenedorportfolio .elementor-heading-title.elementor-size-default {
  text-align: center;
  line-height: 1.5;
}
/* .evento-card.visible .elementor-icon svg {
  filter: brightness(0) invert(1);
} */


/* 
MEDIA */
@media(max-width:700px){
.elementor-element.elementor-element-b8212da.elementor-widget__width-inherit.elementor-absolute.elementor-widget.elementor-widget-image.elementor-motion-effects-element {
  display: none;
}
}

#eventos-container {
    display: grid;
    /* Tu configuración actual de columnas (ejemplo 3 columnas) */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    min-height: 300px; /* Altura mínima para que el centrado vertical se note */
    width: 100%;
    box-sizing: border-box;
}

/* LÓGICA DE CENTRADO PARA HIJO ÚNICO */
#eventos-container:has(> :only-child),
#eventos-container:empty {
    /* Si está vacío o solo tiene uno, usamos flex para centrar total */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
}

/* Fallback para navegadores antiguos que no soportan :has */
#eventos-container > :only-child {
    grid-column: 1 / -1; /* Ocupa todo el ancho del grid */
    margin: auto;        /* Se centra horizontal y verticalmente si el padre es grid */
    max-width: 400px;    /* Opcional: para que no se estire al ancho total de la web */
}

@media screen and (max-width: 768px) {

	body:not(.rtl) .elementor-1249 .elementor-element.elementor-element-472657b {
		left: -141px;top: 8px;
	}

	body:not(.rtl) .elementor-1249 .elementor-element.elementor-element-c3ab7fc {
		left: -106px;
		top: -83px;
	}
	body:not(.rtl) .elementor-1249 .elementor-element.elementor-element-3f383c0 {
		right: 0px;
	}
	
}


.evento-lista-item::marker {
	color: white;
}
.eventos-lista-simple li {
  color: #fff;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 37px;
}

.eventos-lista-simple {
	list-style: none;
}
.eventos-lista-simple li {
	border: 1px solid white;
	font-weight: lighter;
	font-size: 14px;
	padding: 10px;
	border-radius: 5px;
}
.page.page-id-280 .elementor-widget-social-icons .elementor-icon svg,.page.page-id-2393 .elementor-widget-social-icons .elementor-icon svg{
	filter: brightness(0) invert(0);
}

/* Contenedor de la lista con transición nativa de opacidad */
#eventos-lista-container {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

/* Clase que aplicaremos por JS temporalmente para ocultar la lista con suavidad */
#eventos-lista-container.cambiando-categoria {
    opacity: 0;
}

@media screen and (max-width: 768px) {

    .elementor-280 .elementor-element.elementor-element-86b77da:not(.elementor-motion-effects-element-type-background), .elementor-280 .elementor-element.elementor-element-86b77da > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-position: right;
        background-size: auto;
    }
}

/*truncar porfopio pablo prueba español*/
.portfolio-desc {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 8;

    overflow: hidden;

    line-height: 1.5em;

    max-height: 9 em;

}