.elementor-7758 .elementor-element.elementor-element-34baccf{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7758 .elementor-element.elementor-element-d778be4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7758 .elementor-element.elementor-element-d778be4.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-7758 .elementor-element.elementor-element-841eef4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:14px;--padding-right:14px;}.elementor-7758 .elementor-element.elementor-element-3f95ee0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.1;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7758 .elementor-element.elementor-element-3f95ee0:not(.elementor-motion-effects-element-type-background), .elementor-7758 .elementor-element.elementor-element-3f95ee0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-63ef0b6 );}.elementor-7758 .elementor-element.elementor-element-3f95ee0::before, .elementor-7758 .elementor-element.elementor-element-3f95ee0 > .elementor-background-video-container::before, .elementor-7758 .elementor-element.elementor-element-3f95ee0 > .e-con-inner > .elementor-background-video-container::before, .elementor-7758 .elementor-element.elementor-element-3f95ee0 > .elementor-background-slideshow::before, .elementor-7758 .elementor-element.elementor-element-3f95ee0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-7758 .elementor-element.elementor-element-3f95ee0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-7758 .elementor-element.elementor-element-ffc9f60{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-7758 .elementor-element.elementor-element-032628d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-7758 .elementor-element.elementor-element-d778be4{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-2dc6e04 *//* ==========================================================================
   CABECERA NATIVA (ESTADO INICIAL: ARRIBA DEL TODO)
   ========================================================================== */
.gcblog-nav {
    width: 100%;
    height: 110px; /* Altura inicial más holgada para lucir el logo horizontal */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    
    /* FONDO BLANCO Y BORDE SUPERIOR AZUL EN ESTADO INICIAL */
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 6px solid #1967af !important; /* Tu azul corporativo */
    
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.gcblog-nav-wrapper {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

/* --- LOGOTIPO (ESTADO INICIAL) --- */
.gcblog-nav-logo .gcblog-nav-logo-img {
    content: initial !important; /* Mantiene el logo horizontal original del HTML */
    height: 80px; /* Tamaño elegante para el logo horizontal */
    width: auto;
    display: block;
    opacity: 0.9;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.3s ease, 
                height 0.4s ease !important;
}

.gcblog-nav-logo:hover .gcblog-nav-logo-img {
    opacity: 1;
}

/* --- LISTA DE NAVEGACIÓN --- */
.gcblog-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 60px !important;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
}

.gcblog-nav-list li {
    padding: 0 !important;
    margin: 0 !important;
}

.gcblog-nav-list a {
    font-family: var(--gcblog-font-main) !important;
    font-size: 0.85rem !important; /* Ligeramente más legible arriba */
    font-weight: 300 !important;
    color: #1d1d1f !important; /* Contraste oscuro para fondo blanco */
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    transition: color 0.2s ease, font-size 0.4s ease;
    display: inline-block;
}

.gcblog-nav-list a:hover {
    color: #1967af !important; /* Hover azul sobre fondo blanco */
    border-bottom: 1px solid #1967af;
}

/* --- REDES SOCIALES --- */
.gcblog-nav-socials {
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
}

.social-icon-link {
    color: #515154 !important; /* Gris oscuro para el estado inicial */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.social-icon-link svg {
    width: 16px;
    height: 16px;
    display: block;
}

.social-icon-link:hover {
    color: #1967af !important; /* Hover azul para los iconos */
    transform: scale(1.1);
}

/* ==========================================================================
   NUEVO COMPONENTE: SELECTOR DE IDIOMA (ESTADO INICIAL - OSCURO)
   ========================================================================== */
.gcblog-lang-.elementor-7758 .elementor-element.elementor-element-2dc6e04 {
    position: relative;
    display: inline-block;
    margin-left: 40px; /* Separación sutil tras el último icono social */
}

/* Botón del idioma activo */
.gcblog-lang-current {
    background: none !important;
    border: none !important;
    color: #515154 !important; /* Gris premium a juego con las redes sociales */
    font-family: var(--gcblog-font-main), sans-serif!important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    gap: 2px;
    transition: color 0.2s ease;
}

.gcblog-lang-current:hover {
    color: #1967af !important; /* Sintonía con tu azul de marca */
}

.gcblog-lang-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

/* El desplegable flotante */
.gcblog-lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0; /* Anclado a la derecha para que no se desborde del Wrapper */
    background-color: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 8px !important;
    padding: 6px 0 !important;
    margin: 4px 0 0 0 !important;
    list-style: none !important;
    min-width: 65px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 10000;
}

.gcblog-lang-option {
    display: block !important;
    padding: 5px 12px !important;
    color: #515154 !important;
    text-decoration: none !important;
    font-family: var(--gcblog-font-main), sans-serif;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-align: center;
    letter-spacing: 0.03em;
    border-bottom: none !important; /* Evita heredar la línea inferior del menú principal */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.gcblog-lang-option:hover {
    background-color: #f5f5f7 !important;
    color: #1d1d1f !important;
    border-bottom: none !important;
}

/* Efectos Hover del desplegable */
.gcblog-lang-.elementor-7758 .elementor-element.elementor-element-2dc6e04:hover .gcblog-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gcblog-lang-.elementor-7758 .elementor-element.elementor-element-2dc6e04:hover .gcblog-lang-chevron {
    transform: rotate(180deg);
}


/* ==========================================================================
   ESTADO AL HACER SCROLL (A PARTIR DE 100PX - ENGANCHADO POR ELEMENTOR)
   ========================================================================== */

/* Ajustes del contenedor del Header al bajar (Se vuelve compacto) */
.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .gcblog-nav,
.elementor-sticky--effects .gcblog-nav {
    height: 48px !important; /* Pasa a la altura ultra-compacta que querías */
    background-color: #1967afd6 !important; /* Azul corporativo con opacidad */
    border-top: 0px solid transparent !important; /* Retiramos el borde de arriba al encoger */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Cambio e inyección del Imagotipo (Icono Blanco) */
.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .gcblog-nav-logo-img,
.elementor-sticky--effects .gcblog-nav-logo-img {
    /* Intercambiamos el logo completo por el imagotipo suelto */
    content: url("https://oscarrodrigo.com/wp-content/uploads/2026/06/logo-gc-icono-blanco.png") !important;
    height: 28px !important; /* Ajuste perfecto para el imagotipo en 48px de alto */
    
    /* Animación de caída limpia y suavizada */
    animation: simularCaidaGcb 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Ajustes finos de los textos del menú al hacer scroll */
.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .gcblog-nav-list a,
.elementor-sticky--effects .gcblog-nav-list a {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.8rem !important; /* Encoge un píxel para armonizar el espacio compacto */
}

.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .gcblog-nav-list a:hover,
.elementor-sticky--effects .gcblog-nav-list a:hover {
    color: #ffffff !important;
    border-bottom: 1px solid #ffffff;
}

/* Ajustes de iconos sociales al hacer scroll */
.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .social-icon-link,
.elementor-sticky--effects .social-icon-link {
    color: #ffffff !important;
}

.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .social-icon-link:hover,
.elementor-sticky--effects .social-icon-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* --- IDIOMA AL HACER SCROLL (MUTACIÓN A COLOR BLANCO) --- */
.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .gcblog-lang-current,
.elementor-sticky--effects .gcblog-lang-current {
    color: #ffffff !important;
}

.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .gcblog-lang-current:hover,
.elementor-sticky--effects .gcblog-lang-current:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* ==========================================================================
   CONGELAR EL ESPACIO DEL LOGO AL HACER SCROLL 
   ========================================================================== */

/* Forzamos a que el enlace del logo mantenga un área reservada para que el menú no se desplace a la izquierda */
.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .gcblog-nav-logo,
.elementor-sticky--effects .gcblog-nav-logo {
    display: block;
    width: 60px; /* Mismo ancho máximo que tenía tu logo completo */
    transition: width 0.4s ease-in-out;
}

/* Reservamos espacio para redes sociales + el .elementor-7758 .elementor-element.elementor-element-2dc6e04 para que la barra mantenga simetría */
.elementor-7758 .elementor-element.elementor-element-2dc6e04.elementor-sticky--effects .gcblog-nav-socials,
.elementor-sticky--effects .gcblog-nav-socials {
    min-width: 250px; /* Ampliado de 200px a 240px para acomodar el idioma perfectamente sin apretar */
    justify-content: flex-end;
}


/* ==========================================================================
   ANIMACIÓN DE ENTRADA DEL IMAGOTIPO
   ========================================================================== */
@keyframes simularCaidaGcb {
    0% {
        opacity: 0;
        transform: translateY(-10px); /* Viene sutilmente desde arriba */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Se asienta perfectamente */
    }
}

/* ==========================================================================
   RESCATE DE VISIBILIDAD DEL DESPLEGABLE
   ========================================================================== */

/* Aseguramos que el contenedor de redes sociales deje salir elementos flotantes */
.gcblog-nav-socials {
    overflow: visible !important;
}

/* Forzamos el despliegue inmediato al hacer hover */
.gcblog-lang-.elementor-7758 .elementor-element.elementor-element-2dc6e04:hover .gcblog-lang-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Aseguramos que la caja blanca no sea tapada por el propio contenido del Header */
.gcblog-lang-dropdown {
    z-index: 999999 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-22cca73 *//* ==========================================================================
   SECCIÓN EN FORMATO MURO (MASONRY NATIVO ADAPTATIVO)
   ========================================================================== */
.gcblog-masonry-section.gcblog-clear-style {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 30px 0 60px 0;
    background-color: #ffffff;
    box-sizing: border-box;
}

.gcblog-masonry-header {
    margin-bottom: 32px;
}

.gcblog-masonry-section-title {
    font-family: var(--gcblog-font-stack) !important;
    font-size: 2.5rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.015em;
    margin: 0;
}

/* El contenedor del muro distribuye los elementos en columnas fluidas */
.gcblog-masonry-wrapper {
    column-count: 3; /* Número de columnas en escritorio */
    column-gap: 36px; /* Separación horizontal entre columnas */
    width: 100%;
}

/* Tarjeta optimizada para comportamiento de flujo vertical */
.gcblog-event-card-clear.gcblog-masonry-item {
    display: inline-block; /* OBLIGATORIO: Cambiar flex/block por inline-block para Masonry */
    width: 100%;
    margin-bottom: 24px; /* Separación vertical entre cajas del muro */
    break-inside: avoid; /* CRÍTICAL: Impide que la tarjeta se fracture entre columnas */
    text-decoration: none !important;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 18px;
    background-color: #f5f5f7; 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.gcblog-event-card-clear.gcblog-masonry-item:hover {
    transform: scale(0.985);
}

/* El alto ahora se define de manera maleable mediante estilos en línea en el HTML */
.gcblog-event-card-thumb {
    width: 100%;
    background-size: cover;
    background-position: center;
    display: block;
}

.gcblog-event-card-text-area {
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


/* Tipografías del Post */
.gcblog-event-title-clear {
    font-family: var(--gcblog-font-stack) !important;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.gcblog-event-excerpt {
    font-family: var(--gcblog-font-main) !important;
    font-size: 0.85rem !important;
    font-weight: 300;
    color: #515154 !important;
    line-height: 1.45 !important;
    margin: 0 0 16px 0; /* Un poco menos de margen inferior ya que no fuerza el push del flex */
}

.gcblog-event-link-btn-clear {
    font-family: var(--gcblog-font-main) !important;
    font-size: 0.85rem;
    color: #0066cc;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 400;
}

/* ENTORNO OSCURO DE METADATOS (Alineado a la izquierda) */
.gcblog-dark-meta.gcblog-meta-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 12px;
    gap: 12px;
}

.gcblog-dark-meta .gcblog-meta-item {
    font-family: var(--gcblog-font-main) !important;
    color: #515154 !important; 
    font-size: 0.6rem !important;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.gcblog-dark-meta .gcblog-meta-item svg {
    color: #86868b !important;
    width: 13px;
    height: 13px;
    display: block;
}

/* Estilo del botón (Sutil, limpio y moderno) */
/* Contenedor del botón (Forzamos centrado absoluto con Flexbox) */
.gcblog-loadmore-container {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    width: 100%;
    padding: 30px 0 10px 0;  /* Aumentamos un poco el espacio superior para que respire respecto al bloque masonry */
    box-sizing: border-box;
}

/* Estilo del botón (Mantenemos tu diseño limpio) */
.gcblog-loadmore-btn {
    font-family: var(--gcblog-font-main), sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d1d1f;
    background-color: #f5f5f7;
    border: none;
    padding: 14px 32px;
    border-radius: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.gcblog-loadmore-btn:hover {
    background-color: #e8e8ed;
    transform: translateY(-1px);
    color: #1d1d1f;
}

.gcblog-loadmore-btn:active {
    transform: translateY(1px);
}

/* Icono de flecha hacia abajo */
.gcblog-loadmore-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.gcblog-loadmore-btn:hover .gcblog-loadmore-icon {
    transform: translateY(2px);
}

/* ==========================================================================
   RESPONSIVE (BAJADA DE COLUMNAS SEGÚN DISPOSITIVO)
   ========================================================================== */
@media (max-width: 992px) {
    .gcblog-masonry-wrapper {
        column-count: 2; /* 2 columnas en pantallas medianas y tabletas */
        column-gap: 20px;
    }
    .gcblog-event-card-clear.gcblog-masonry-item {
        margin-bottom: 20px;
    }
}

@media (max-width: 600px) {
    .gcblog-masonry-wrapper {
        column-count: 1; /* 1 sola columna vertical en teléfonos */
    }
    .gcblog-grid-section-title {
        font-size: 1.8rem;
    }
    .gcblog-event-card-text-area {
        padding: 20px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5c92218 *//* ==========================================================================
   COMPONENT: NUBE DE TAGS EDITORIAL (ESTILO PREMIUM)
   ========================================================================== */
.gcblog-tags-section.gcblog-clear-style {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 60px 22px;
    box-sizing: border-box;
}

/* ==========================================================================
   CABECERA DE ETIQUETAS
   ========================================================================== */
.gcblog-tags-header {
    width: 100%;
    margin-bottom: 30px; /* Espacio de colchón antes de que empiece el cloud de tags */
    display: flex;
    align-items: center;
}

.gcblog-tags-profile {
    display: flex;
    align-items: center;
    gap: 14px; /* Distancia exacta entre el SVG y los textos */
}

/* El icono de etiquetas heredará el color del texto automáticamente */
.gcblog-tags-icon {
    width: 36px; /* Ajuste proporcional para equilibrar las dos líneas de texto */
    height: 36px;
    color: #1d1d1f; /* Gris premium/negro suave de Apple/editorial */
    display: block;
}

.gcblog-tags-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gcblog-tags-section-title {
    font-family: var(--gcblog-font-stack) !important;
    font-size: 1.5rem !important; /* Ajusta este valor si tu título de IG es más grande o pequeño */
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}

.gcblog-tags-subtitle {
    font-family: var(--gcblog-font-main), sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #86868b !important; /* Gris atenuado idéntico al de los handles secundarios */
    margin-top: 2px !important;
    letter-spacing: 0.01em;
}

/* Contenedor Flex que permite que los elementos se envuelvan orgánicamente */
.gcblog-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Espaciado uniforme horizontal y vertical entre botones */
    align-items: center; /* Alinea verticalmente los diferentes tamaños */
    width: 100%;
}

/* Estilo Base del Botón Tag (Hereda la estética de tus botones limpios) */
.gcblog-tag-btn {
    font-family: var(--gcblog-font-main) !important;
    text-decoration: none !important;
    color: #1d1d1f !important;
    background-color: #f5f5f7; /* Fondo gris claro e impecable */
    border-radius: 20px; /* Botón tipo píldora */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.01em;
    box-sizing: border-box;
    transition: 
        background-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), 
        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Efecto hover interactivo pero sutil */
.gcblog-tag-btn:hover {
    background-color: #e8e8ed;
    transform: translateY(-1px);
}

/* ==========================================================================
   ESCALAS DE IMPORTANCIA (PROPORCIÓN DE TAMAÑOS)
   ========================================================================== */

/* Nivel 1: Importancia Máxima */
.gcblog-tag-btn.gc-tag-max {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    padding: 10px 20px;
    border-radius: 24px;
}

/* Nivel 2: Importancia Media */
.gcblog-tag-btn.gc-tag-med {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    padding: 8px 16px;
}

/* Nivel 3: Importancia Mínima */
.gcblog-tag-btn.gc-tag-min {
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    padding: 6px 12px;
    color: #515154 !important; /* Texto ligeramente más suave para menor peso visual */
}

/* ==========================================================================
   NUBE DE TAGS: PALETA DE COLORES CORPORATIVOS (DOBLE ESTADO)
   ========================================================================== */

/* --- 1. AZUL (#1967af) --- */
.gcblog-tag-btn.tag-azul {
    background-color: rgba(25, 103, 175, 0.25);
    color: #1967af !important;
}
.gcblog-tag-btn.tag-azul:hover {
    background-color: #1967af !important;
    color: #ffffff !important;
}

/* --- 2. CELESTE (#1892d1) --- */
.gcblog-tag-btn.tag-celeste {
    background-color: rgba(24, 146, 209, 0.25);
    color: #1892d1 !important;
}
.gcblog-tag-btn.tag-celeste:hover {
    background-color: #1892d1 !important;
    color: #ffffff !important;
}

/* --- 3. AMARILLO (#feda00) --- */
.gcblog-tag-btn.tag-amarillo {
    /* El amarillo necesita un poco más de presencia de fondo */
    background-color: rgba(254, 218, 0, 0.25); 
    color: #c4a800 !important; /* Tono de texto sutilmente más oscuro para legibilidad */
}
.gcblog-tag-btn.tag-amarillo:hover {
    background-color: #feda00 !important;
    color: #1d1d1f !important; /* Letras oscuras en hover para que se lea perfectamente */
}

/* --- 4. VERDE (#1aa238) --- */
.gcblog-tag-btn.tag-verde {
    background-color: rgba(26, 162, 56, 0.25);
    color: #1aa238 !important;
}
.gcblog-tag-btn.tag-verde:hover {
    background-color: #1aa238 !important;
    color: #ffffff !important;
}

/* --- 5. LIMA (#bccb15) --- */
.gcblog-tag-btn.tag-lima {
    background-color: rgba(188, 203, 21, 0.25);
    color: #8b9605 !important; /* Contraste ajustado para lectura */
}
.gcblog-tag-btn.tag-lima:hover {
    background-color: #bccb15 !important;
    color: #1d1d1f !important; /* Letras oscuras para mantener legibilidad */
}

/* --- 6. GRIS (#333333) --- */
.gcblog-tag-btn.tag-gris {
    background-color: rgba(51, 51, 51, 0.15);
    color: #333333 !important;
}
.gcblog-tag-btn.tag-gris:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Ajuste general para asegurar que la transición de color de texto sea fluida */
.gcblog-tag-btn {
    transition: 
        background-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
        color 0.25s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ==========================================================================
   RESPONSIVE (Ajustes para pantallas pequeñas)
   ========================================================================== */
@media (max-width: 600px) {
    .gcblog-tags-cloud {
        gap: 8px; /* Reducimos la separación en móviles */
    }
    
    /* Suavizamos los tamaños máximos en pantallas pequeñas para evitar desbordes */
    .gcblog-tag-btn.gc-tag-max {
        font-size: 0.95rem !important;
        padding: 8px 16px;
    }
    .gcblog-tag-btn.gc-tag-med {
        font-size: 0.88rem !important;
        padding: 7px 14px;
    }
    .gcblog-tag-btn.gc-tag-min {
        font-size: 0.82rem !important;
        padding: 5px 10px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3be9403 *//* ==========================================================================
   COMPONENT: INSTAGRAM SLIDER AUTOMÁTICO (INFINITE LOOP)
   ========================================================================== */
.gcblog-instagram-section.gcblog-clear-style {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0 80px 0;
    background-color: #ffffff;
    box-sizing: border-box;
    overflow: hidden; /* Evita que el slider ensanche el ancho de la web */
}

/* Cabecera */
.gcblog-instagram-header {
    margin-bottom: 28px;
    
   
}
.gcblog-insta-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 1040px;
    margin:0 auto;
}
.gcblog-insta-icon {
    width: 48px;
    height: 48px;
    color: #1d1d1f;
}
.gcblog-insta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gcblog-instagram-title {
    font-family: var(--gcblog-font-stack) !important;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0;
}
.gcblog-instagram-handle {
    font-family: var(--gcblog-font-main) !important;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1892d1!important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.gcblog-instagram-handle:hover {
    color: #1967af;
}

/* --- ESCENARIO DEL SLIDER --- */
.gcblog-instagram-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}

/* El riel que se desplaza de forma infinita */
.gcblog-insta-track {
    display: flex;
    width: max-content; /* Se expande dinámicamente según el número de fotos */
    gap: 16px;
    /* Ajusta los '35s' (35 segundos) para que vaya más rápido o más lento */
    animation: gcblogPanScroll 35s linear infinite; 
}

/* Forzar que el carrusel se detenga al poner el ratón encima */
.gcblog-insta-track:hover {
    animation-play-state: paused;
}

/* Cada celda individual del slider */
.gcblog-insta-slide {
    flex-shrink: 0; /* Evita que el navegador colapse o deforme el tamaño del slide */
    width: 240px;   /* Tamaño perfecto tipo tarjeta cuadrada */
}

/* El elemento link con la foto de fondo */
.gcblog-insta-item {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

/* Efecto hover individual sobre la tarjeta */
.gcblog-insta-item:hover {
    transform: scale(1.03) translateY(-4px);
    box-shadow: 0 10px 20px rgba(25, 103, 175, 0.15); /* Sombra con un toque azul corporativo */
}

/* ==========================================================================
   ANIMACIÓN MATEMÁTICA EN BUCLE (CSS KEYFRAMES)
   ========================================================================== */
@keyframes gcblogPanScroll {
    0% {
        /* Usamos translate3d para activar la aceleración por tarjeta gráfica (GPU) */
        transform: translate3d(0, 0, 0); 
    }
    100% {
        /* Desplazamos exactamente la mitad del riel (el bloque original). */
        /* Al ser idéntico al duplicado, el reinicio visual es imperceptible (0 cortes) */
        transform: translate3d(calc(-50% - 8px), 0, 0); 
    }
}

/* Responsive para pantallas muy pequeñas (ajustamos el tamaño de la foto) */
@media (max-width: 500px) {
    .gcblog-insta-slide {
        width: 180px; /* Fotos ligeramente más compactas en móviles */
    }
    .gcblog-instagram-title {
        font-size: 1.35rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-185d346 *//* ==========================================================================
   COMPONENT: FOOTER EDITORIAL PREMIUM
   ========================================================================== */
.gcblog-footer-section {
    position: relative; /* Indispensable para sujetar el botón flotante */
    background-color: #f5f5f7; /* Gris claro sofisticado */
    width: 100%;
    padding: 80px 22px 50px 22px; /* Margen superior amplio para dar aire al diseño */
    border-top: 1px solid #e8e8ed;
    box-sizing: border-box;
}

.gcblog-footer-container {
    max-width: 720px; /* Contenedor de lectura estrecho estilo editorial */
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- BOTÓN VOLVER ARRIBA (PISANDO EL BORDE) --- */
body .gcblog-to-top-btn {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* Lo sube exactamente la mitad de su tamaño */
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 50%; /* Esfera perfecta */
    color: #1d1d1f!important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s;
    z-index: 10;
}

.gcblog-to-top-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.2s ease;
}

body .gcblog-to-top-btn:hover {
    transform: translate(-50%, -54%); /* Sutil empuje hacia arriba en hover */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    color: #1d1d1f!important;
}

body .gcblog-to-top-btn:hover svg {
    transform: translateY(-2px); /* Eleva la flecha */
    color: #1d1d1f!important;
}

/* --- LOGOTIPO AREA --- */
.gcblog-footer-logo-area {
    margin-bottom: 20px;
    color: #1d1d1f;
}
.gcblog-footer-logo {
    width: 120px;
    height: auto;
}

/* --- TEXTOS EDITORIALES --- */
.gcblog-footer-text-block {
    margin-bottom: 28px;
}

.gcblog-footer-subtitle {
    font-family: var(--gcblog-font-stack) !important; /* Aplica Raleway */
    font-size: 1rem;
    font-weight: 700;
    color: #515154;
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}

.gcblog-footer-description {
    font-family: var(--gcblog-font-main) !important; /* Aplica Nunito Sans */
    font-size: 0.85rem;
    line-height: 1.5;
    color: #515154;
    margin: 0;
}

.gcblog-footer-hashtags {
    color: #1967af; /* Tus hashtags en azul corporativo sutil */
    font-weight: 500;
}

/* --- ENLACE WEB OFICIAL --- */
.gcblog-footer-official-link {
    margin-bottom: 30px;
}

.gcblog-footer-link-title {
    font-family: var(--gcblog-font-stack) !important;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 6px 0;
}

.gcblog-footer-url {
    font-family: var(--gcblog-font-main) !important;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1892d1 !important; /* Celeste corporativo */
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.gcblog-footer-url:hover {
    color: #1967af !important; /* Sube a azul en hover */
}

/* --- ELEMENTOS DE CIERRE --- */
.gcblog-footer-divider {
    width: 60px;
    border: 0;
    border-top: 1px solid #d2d2d7;
    margin-bottom: 24px;
}

.gcblog-footer-legal-links {
    margin-bottom: 24px;
    font-family: var(--gcblog-font-main) !important;
    font-size: 0.75rem;
}

.gcblog-footer-legal-links a {
    color: #86868b !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.gcblog-footer-legal-links a:hover {
    color: #1d1d1f !important;
}

.gcblog-legal-separator {
    color: #d2d2d7;
    margin: 0 10px;
}

/* --- REDES SOCIALES --- */
.gcblog-footer-socials {
    display: flex;
    gap: 20px;
}

.gcblog-footer-socials a {
    color: #86868b;
    transition: color 0.25s ease, transform 0.2s ease;
}

.gcblog-footer-socials a svg {
    width: 16px;
    height: 16px;
}

.gcblog-footer-socials a:hover {
    color: #1d1d1f;
    transform: scale(1.08);
}/* End custom CSS */
/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================================================
   1. VARIABLES GLOBALES Y PILAS TIPOGRÁFICAS
   ========================================================================== */
:root {
    /* Fuente para textos base, párrafos y metadatos */
    --gcblog-font-main: 'Nunito Sans', sans-serif;
    
    /* Nueva fuente para titulares (Estilo editorial, estilizado y premium) */
    --gcblog-font-stack: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   2. REGLAS GLOBALES PARA TEXTOS NO-TITULARES
   ========================================================================== */
p, a, li, span, small, label, input, button {
    font-family: var(--gcblog-font-main) !important;
    font-weight: 300 !important; /* Variante Light */
}



/* ==========================================================================
   4. ARQUITECTURA DE LA HOME (HERO Y CONTENEDOR)
   ========================================================================== */
.gcblog-home-container {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* ==========================================================================
   SECCIONES DE IMPACTO (HERO CON EFECTO KEN BURNS)
   ========================================================================== */
.gcblog-hero {
    width: 100%;
    height: calc(100vh - 110px);
    min-height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Alinea el contenido abajo */
    position: relative;
    box-sizing: border-box;
    margin-bottom: 12px;
    /* EMPUJAMOS EL HERO hacia abajo para que el menú fixed no lo tape */
    margin-top: 110px !important;

    /* REQUISITO KEN BURNS: Escondemos el desborde de la imagen al crecer */
    overflow: hidden; 
}

/* PSEUDO-ELEMENTO: Capa exclusiva para la imagen en movimiento */
.gcblog-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Hereda automáticamente la imagen de fondo asignada en Elementor */
    background-size: cover;
    background-position: center;
    z-index: 0;
    
    /* DISPARADOR DE LA ANIMACIÓN: 
       20 segundos de duración para que sea MUY sutil, lineal e infinita */
    animation: gcblogKenBurns 20s linear infinite alternate;
    will-change: transform; /* Avisa al navegador para optimizar la GPU */
}

/* CAPA EXTRA PARA EL DEGRADADO OSCURO (HERO) */
.gcblog-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%);
    z-index: 1; /* Por encima de la imagen (::before) y por debajo del texto */
}

.hero-content {
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
    margin-bottom: 60px; 
    z-index: 2; /* Por encima de todo para mantener la legibilidad intacta */
}


/* ==========================================================================
   KEYFRAMES: ANIMACIÓN KEN BURNS EDITORIAL
   ========================================================================== */
@keyframes gcblogKenBurns {
    0% {
        /* Estado inicial: tamaño normal y centrado */
        transform: scale(1) translate(0, 0);
    }
    100% {
        /* Estado final: un zoom muy ligero del 6% con un levísimo desplazamiento 
           horizontal y vertical para dar dinamismo orgánico */
        transform: scale(1.06) translate(1%, -0.5%);
    }
}

.hero-title {
    font-family: var(--gcblog-font-stack) !important;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.022em;
    line-height: 1.07;
}

.hero-subtitle {
    font-family: var(--gcblog-font-main) !important;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 18px;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

/* Modificadores cromáticos globales */
.hero-dark, .item-dark { color: #f5f5f7; }
.hero-dark .hero-title, .item-dark .grid-title { color: #ffffff; }

.hero-light, .item-light { color: #1d1d1f; }
.hero-light .hero-title, .item-light .grid-title { color: #000000; }

/* REPOSITORIO DE BOTONES Y ACCIONES */
.hero-actions, .grid-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    z-index: 2;
}

.btn-gcblog-primary, .btn-gcblog-secondary {
    font-family: var(--gcblog-font-main) !important;
    font-size: 0.85rem;
    font-weight: 400;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.btn-gcblog-primary {
    color: #0066cc !important;
}
.btn-gcblog-primary:hover {
    text-decoration: underline !important;
}

.btn-gcblog-secondary {
    color: #fff !important;
    border: 1px solid #fff;
    padding: 4px 18px;
    border-radius: 20px;
}
.btn-gcblog-secondary:hover {
    background-color: #fff;
    color: #000 !important;
}

/* REGLA PRO DE LECTURA: Botón secundario blanco sobre fondos oscuros oscurecidos por el scrim */
.item-dark .btn-gcblog-secondary {
    color: #ffffff !important;
    border-color: #ffffff;
}
.item-dark .btn-gcblog-secondary:hover {
    background-color: #ffffff;
    color: #000000 !important;
}

/* ==========================================================================
   5. LA REJILLA DE PRODUCTO (GRID ACTUALIZADO ESTILO HERO)
   ========================================================================== */
.gcblog-grid {
    margin: 0 auto;
    width: 100%;
    max-width: 1080px;
    padding: 60px 0 30px 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.grid-box {
    height: 400px;
    position: relative;        /* Obligatorio para anclar el overlay dentro */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* NUEVO: Empuja el contenido al fondo */
    box-sizing: border-box;
    border-radius: 18px;
    
    /* MODIFICACIONES PARA EL ZOOM PERFECTO */
    overflow: hidden;          /* Recorta la imagen para que no se salga de las esquinas redondeadas */
    cursor: pointer;
}

/* NUEVO PSEUDO-ELEMENTO: Maneja la imagen de fondo de forma aislada */
.grid-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Hereda automáticamente la imagen que le pongas al .grid-box */
    background-size: cover;
    background-position: center;
    z-index: 0;                /* Se queda abajo del todo */
    
    /* Transición suave para la vuelta al estado original (cuando quitas el ratón) */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* EFECTO HOVER: Hace zoom únicamente a la capa de la imagen */
.grid-box:hover::before {
    transform: scale(1.08);    /* Un 8% de zoom. Ajusta a 1.1 si quieres que se note más */
}

/* NUEVA CAPA EN EL GRID: Degradado oscuro ascendente de lectura */
.gcblog-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;                /* Por encima de la imagen (::before) */
    border-radius: 18px;
    pointer-events: none;      /* Evita que interfiera con los clics */
}

.grid-content {
    text-align: center;
    max-width: 450px;
    padding: 0 20px;
    margin-bottom: 20px; /* NUEVO: El colchón de separación inferior de los textos */
    z-index: 2;          /* Fuerza la superposición sobre el degradado */
}

.grid-title {
    font-family: var(--gcblog-font-stack) !important;
    font-size: 1.85rem;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    line-height: 1.85rem;
}

.grid-subtitle {
    font-family: var(--gcblog-font-main) !important;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 15px;
    letter-spacing: -0.01em;
    line-height: 1.25rem;
}

/* ==========================================================================
   METADATOS DE CONTENIDO (FECHA, TAGS, LECTURA)
   ========================================================================== */
.gcblog-meta-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 0px; /* Separación sutil antes del titular */
    z-index: 2;          /* Garantiza estar sobre el overlay oscuro */
}

.gcblog-meta-item {
    font-family: var(--gcblog-font-main) !important;
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    color: rgba(245, 245, 247, 0.75) !important; /* Blanco/gris translúcido estilo Apple */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase; /* Le da el toque editorial de revista */
}

.gcblog-meta-item svg {
    width: 14px;
    height: 14px;
    display: block;
    color: rgba(245, 245, 247, 0.6) !important;
}

/* Ajuste responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .gcblog-meta-wrapper {
        gap: 12px;
        margin-bottom: 6px;
    }
    .gcblog-meta-item {
        font-size: 0.75rem !important;
    }
    .gcblog-meta-item svg {
        width: 12px;
        height: 12px;
    }
}



/* ==========================================================================
   6. COMPORTAMIENTO RESPONSIVE (MÓVIL)
   ========================================================================== */
@media (max-width: 768px) {
    .gcblog-nav-list {
        display: none;
    }
    .gcblog-nav-socials {
        gap: 12px;
    }
    .social-icon-link svg {
        width: 14px;
        height: 14px;
    }
    
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.2rem; }
    
    .gcblog-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    
    .grid-box { height: 400px; }
    .grid-title { font-size: 1.8rem; }
    .grid-subtitle { font-size: 1rem; }
}/* End custom CSS */