/**
Theme Name: Brilio Child
Theme URI: https://brilio.theme-land.com
Author: Themeland
Author URI: https://theme-land.com
Description: Brilio Child Theme for Advanced Users.
Tags: blog, grid-layout, right-sidebar, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, threaded-comments, translation-ready, theme-options
Text Domain: brilio-child
Version: 1.0.48
License: GNU General Public License v2 or later
License URI: LICENSE
Template: brilio

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Brilio is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*----------------------------------------------
*
* If you activated the Child Theme, the styles placed here will work.
* 
----------------------------------------------*/

#magic-cursor {
  display: none !important;
}

/* Variables Generales aplicadas solo al contenido principal del Blog y Single Posts */
.blog main h1,
.blog main h2,
.blog main h3,
.blog main h4,
.blog main h5,
.blog main h6,
.single-post main h1,
.single-post main h2,
.single-post main h3,
.single-post main h4,
.single-post main h5,
.single-post main h6 {
  font-family: var(--primary-font);
  line-height: 1.2;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.blog main h1,
.single-post main h1 {
  margin-bottom: 1.5rem;
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  color: var(--primary-color);
}

.blog main h1 em,
.single-post main h1 em {
  display: block;
  font-size: var(--h2-size);
  font-weight: 300;
}

.blog main h2,
.blog main h3,
.blog main h4,
.blog main h5,
.blog main h6,
.single-post main h2,
.single-post main h3,
.single-post main h4,
.single-post main h5,
.single-post main h6 {
  margin: 1.5rem 0;
  color: black !important;
}

[data-theme="dark"] .blog main h2,
[data-theme="dark"] .blog main h3,
[data-theme="dark"] .blog main h4,
[data-theme="dark"] .blog main h5,
[data-theme="dark"] .blog main h6,
[data-theme="dark"] .single-post main h2,
[data-theme="dark"] .single-post main h3,
[data-theme="dark"] .single-post main h4,
[data-theme="dark"] .single-post main h5,
[data-theme="dark"] .single-post main h6 {
  color: black !important;
}

[data-theme="dark"] .blog main h1,
[data-theme="dark"] .single-post main h1 {
  color: white !important;
}

/* header */
nav.navbar-sticky {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}

nav.navbar-sticky .nav-link {
  color: #333333 !important;
}

nav.navbar-sticky .icon-menu {
  color: #00a985 !important;
}

nav.navbar-sticky .nav-link:hover {
  color: #00a985 !important;
}

/* logo footer blanco */
footer.custom-site-footer .footer-col-logo-new .footer-actual-logo {
  filter: brightness(0) invert(1);
}

/* Target the container(s) */
.particle-container {
  position: relative !important;
  min-height: 400px !important;
  overflow: hidden;
}

/* Target the canvas created by particles.js inside ANY container */
.particle-container > .particles-js-canvas-el {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

/*----------------------------------------------
15. Custom Footer Styles 
----------------------------------------------*/
.custom-site-footer {
  background-color: #000000;
  color: #ffffff;
  padding: 60px 0 0;
  font-family: sans-serif;
  position: relative;
}

/* Links y encabezados */
.custom-site-footer a {
  color: #a9a8ae;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}
.custom-site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.custom-site-footer h4 {
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 20px;
  text-transform: none;
  letter-spacing: 0;
}

/* Contenedor y estructura */
.custom-footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
}
.custom-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  padding-bottom: 40px;
}
.custom-footer-column {
  flex: 1;
  min-width: 250px;
}
.custom-footer-column.footer-col-logo-new {
  flex-basis: 15%;
  min-width: 150px;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-actual-logo {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin-bottom: 10px;
}
.custom-footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.custom-footer-column ul li {
  margin-bottom: 10px;
}
.custom-footer-column p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #a9a8ae;
}
.custom-footer-column.footer-col-contact p,
.custom-footer-column.footer-col-contact p a {
  color: #a9a8ae;
  font-size: 18px !important;
}
.custom-footer-column.footer-col-contact p a:hover {
  color: #dddddd;
}
.footer-social-icons {
  display: flex;
  gap: 33px;
}
.footer-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a9a8ae;
  font-size: 22px;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-social-icons a:hover {
  color: #ffffff;
}
.custom-footer-bottom {
  padding: 15px 0;
  margin-top: auto;
}
.footer-copyright {
  width: 100%;
  text-align: right;
  padding-right: 30px;
}
.footer-copyright p {
  margin: 0;
  font-size: 13px;
  color: #a9a8ae;
}

/* Responsive */
@media (max-width: 1100px) {
  .custom-footer-column.footer-col-logo-new {
    flex-basis: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    align-items: left;
  }
  .custom-footer-column.footer-col-logo-new img {
    max-width: 100%;
  }
  .custom-footer-column {
    flex-basis: calc(50% - 15px);
    min-width: auto;
  }
  .footer-copyright {
    text-align: center;
    padding-right: 0;
  }
}

/* Menu modal */
#menu .modal-dialog {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
#menu .modal-dialog-slideout {
  width: 100% !important;
  max-width: 100% !important;
}
#menu .modal-content {
  background-color: #242e49;
  border-radius: 0;
  height: 100%;
  width: 100% !important;
}
#menu .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  text-align: center;
  width: 100% !important;
}
#menu .modal-body {
  padding: 0;
  width: 100% !important;
}
#menu .row {
  margin: 0 !important;
  width: 100% !important;
}
#menu .col-12 {
  padding: 0 !important;
  width: 100% !important;
}
#menu .items {
  padding: 0;
  text-align: center;
  width: 100% !important;
}
#menu .nav-item {
  position: relative;
  transition: all 0.3s ease;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
#menu .nav-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 1px;
  background-color: #00A985;
}
#menu .nav-item:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 1px;
  background-color: #00A985;
}
#menu .nav-link {
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  color: white;
  display: block;
  text-align: center;
  transition: all 0.3s ease;
  width: 90% !important;
}
#menu .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#menu .dropdown-menu {
  background-color: rgba(0, 123, 255, 0.9);
  border: none;
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}
#menu .dropdown-menu .nav-item {
  padding: 20px 0;
}
#menu .dropdown-menu .nav-link {
  padding: 0;
  font-size: 16px;
  width: 90% !important;
}
#menu .icon-close {
  cursor: pointer;
  font-size: 20px;
  transition: all 0.3s ease;
  color: white;
}
#menu .icon-close:hover {
  opacity: 0.8;
}

@media (max-width: 850px) {
  .custom-footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .custom-footer-column,
  .custom-footer-column.footer-col-logo-new {
    flex-basis: 100%;
    width: 100%;
    max-width: 300px;
    margin-right: 0;
    align-items: center;
  }
  .custom-footer-column ul {
    padding-left: 0;
    display: inline-block;
    text-align: center;
  }
  .footer-social-icons {
    justify-content: center;
  }
  .custom-footer-column h4,
  .custom-footer-column.footer-col-contact p {
    text-align: center;
  }
  .custom-footer-top {
    gap: 20px;
  }
}

/* blog page */
body.blog #slider.p-0 {
  background-color: #0d1421 !important;
  position: relative !important;
  padding-top: 120px !important;
  padding-bottom: 120px !important;
  background-image: linear-gradient(rgba(10,20,30,0.75),rgba(10,20,30,0.75)),url('URL_DE_TU_IMAGEN.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}
body.blog #slider .full-image.mask {
  display: none !important;
}
body.blog #slider .slide-content h1 {
  font-size: 4.5rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
}
body.blog #slider .breadcrumb {
  justify-content: center !important;
}
body.blog #slider .breadcrumb-item,
body.blog #slider .breadcrumb-item a {
  color: #e0e0e0 !important;
  font-size: 1rem !important;
}
body.blog #slider .breadcrumb-item.active {
  color: #00a985 !important;
}

/* section#showcase (si aún lo usas) */
section#showcase .card.item {
  display: flex !important;
  flex-direction: column !important;
  min-height: 650px !important;
  padding: 0 !important;
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
section#showcase .card.item .image-over {
  width: 100% !important;
  height: 350px !important;
  position: relative !important;
  overflow: hidden !important;
}
section#showcase .card.item .image-over img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
section#showcase .card.item .card-caption {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  width: 100% !important;
  padding: 15px !important;
  background-color: #0f172a !important;
}
section#showcase .card.item .card-caption {
  height: 350px !important;   
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background-color: #0f172a !important;
}

section#showcase .card.item .card-caption p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;    
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 0 !important;
}
section#showcase .card.item h4 {
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
}
section#showcase .card.item p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  margin: 0 0 15px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
section#showcase .card.item .card-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 15px !important;
  border-top: 1px solid #334155 !important;
  background: transparent !important;
}
@media (min-width: 992px) {
  section#showcase .card.item .card-footer {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
}
section#showcase .card.item .card-footer a {
  display: inline-flex !important;
  align-items: center !important;
  color: #ffffff !important;
  margin: 0 8px !important;
}
section#showcase .card.item .card-footer i {
  margin-right: 6px !important;
}
section#showcase .card.item::before,
section#showcase .card.item::after,
section#showcase .card.item .image-over::before,
section#showcase .card.item .image-over::after,
section#showcase .card.item .card-caption::before,
section#showcase .card.item .card-caption::after {
  display: none !important;
}

/* single blog */
#block-4 {
  display: none;
}

/* hero blog */
/* ----------------------------------------
   Partículas: detrás de todo
---------------------------------------- */
#slider .particle-container {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0 !important;
}

/* ----------------------------------------
   Slider y contenido: por encima de las partículas
---------------------------------------- */
#slider > .swiper-container,
#slider .slide-center,
#slider .slide-content,
#slider .slide-content .inner {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ----------------------------------------
   Título y breadcrumb: blancos y bien visibles
---------------------------------------- */
#slider .slide-content .inner h1,
#slider .slide-content .inner .breadcrumb,
#slider .slide-content .inner .breadcrumb a,
#slider .slide-content .inner .breadcrumb-item.active {
  color: #ffffff !important;
  z-index: 10 !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

#slider {
  height: 650px !important;
}

/* ——————————————————————————————
   Forzar imágenes full‑width en tu Masonry (.bricklayer)
   —————————————————————————————— */
.bricklayer .card.item .image-over {
  width: 100% !important;
  overflow: hidden !important;
}

.bricklayer .card.item .image-over img,
.bricklayer .card.item .card-img-top {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ——————————————————————————————
   Asegurar que .card-img-top nunca esté acotada
   —————————————————————————————— */
.card-img-top {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ——————————————————————————————
   Single‑post hero: full‑bleed y sin partículas
   —————————————————————————————— */


body.single-post #slider.p-0 {
  height: 650px !important; 
}

/* ocultar partículas sólo en single-post */
body.single-post #slider .particle-container,
body.single-post #slider .particles-js-canvas-el {
  display: none !important;
}

body.single-post .slider-h-auto.no-slider .inner {
  top: 0;
  padding-top: 100px;
  padding-bottom: 100px;
}

.blog .slider-h-auto.no-slider .inner {
  padding-top: 0px;
  padding-bottom: 100px;
}

/* placeholders */
.bricklayer .card.item .image-over {
  height: 250px !important;          
  overflow: hidden !important;
}


.bricklayer .card.item .image-over img.card-img-top {
  height: 100% !important;            
  width: 100% !important;
  object-fit: cover !important;      
}


.elementor-698 .elementor-element.elementor-element-cc6a984 .image-marquee .marquee-item{
  background: transparent !important;
}

.blog a:not(.button):not(.nav-link):not(.elementor-icon),
.page-id-1972 a:not(.button):not(.nav-link):not(.elementor-icon) {
  font-size: 1rem !important;
}