/* --- Enlaces generales de la web --- */
a {
  color: #336784 !important;
}

a:hover {
  color: #f5c870 !important;
}

/* --- Estilos base para TODO el menú (principal y submenús) --- */
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: 'Verdana', sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  color: #141e23 !important;
}

/* --- Mayúsculas SOLO para el primer nivel --- */
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {
  text-transform: uppercase;
}

/* --- Submenús en formato normal --- */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  text-transform: none !important;
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #cca964 !important;
}

/* --- Hover del menú principal --- */
.sp-megamenu-parent > li > a:hover, 
.sp-megamenu-parent > li > span:hover, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: #4886a9 !important;
}

/* --- Elemento activo del menú principal --- */
.sp-megamenu-parent > li.active > a, 
.sp-megamenu-parent > li.active > span, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: #336784 !important;
}

/* Estilos base del icono (se aplicarán en celulares y tablets) */
.burger-icon {
    width: 25px;
    cursor: pointer;
    display: inline-block !important; 
}

/* Ocultar el icono SOLO en pantallas grandes (PC/Escritorio, a partir de 1200px) */
@media (min-width: 1200px) {
    .burger-icon {
        display: none !important;
    }
}

/* --- Controlar el cambio de Logo para evitar desbordes en Tablets --- */
@media (max-width: 1199.98px) { 
    /* 1. Ocultar radicalmente la imagen del logo blanco (PC) */
    img.logo-image {
        display: none !important;
    }

    /* 2. Forzar que aparezca SOLO la imagen del logo negro (Móvil) */
    img.logo-image-phone {
        display: inline-block !important;
        max-width: 100% !important;
        max-height: 60px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* =========================================
   1. CONTENEDOR Y ESPACIADO DEL CONTADOR
   ========================================= */
#coming-soon-countdown {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 35px !important; 
    width: 100% !important; 
}

/* =========================================
   2. TEXTOS BLANCOS (TÍTULO Y SUBTÍTULO)
   ========================================= */
h1.coming-soon-title {
    font-family: 'Poppins', 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

div.coming-soon-content {
    font-family: 'Poppins', 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    letter-spacing: 1px;
}

/* =========================================
   3. TRADUCCIÓN, NÚMEROS Y ETIQUETAS
   ========================================= */
#coming-soon-countdown .coming-soon-days,
#coming-soon-countdown .coming-soon-hours,
#coming-soon-countdown .coming-soon-minutes,
#coming-soon-countdown .coming-soon-seconds {
    color: transparent !important; 
    font-size: 0px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    text-align: center;
}

#coming-soon-countdown span.coming-soon-number {
    color: #F5C870 !important;
    font-weight: 700 !important; 
    font-size: 3.5rem !important; 
    display: block !important;
    line-height: 1.2;
    transition: transform 0.3s ease-in-out;
}

#coming-soon-countdown span.coming-soon-number:hover {
    transform: scale(1.05); 
}

#coming-soon-countdown .coming-soon-days::after { content: "DÍAS"; }
#coming-soon-countdown .coming-soon-hours::after { content: "HORAS"; }
#coming-soon-countdown .coming-soon-minutes::after { content: "MINUTOS"; }
#coming-soon-countdown .coming-soon-seconds::after { content: "SEGUNDOS"; }

#coming-soon-countdown .coming-soon-days::after,
#coming-soon-countdown .coming-soon-hours::after,
#coming-soon-countdown .coming-soon-minutes::after,
#coming-soon-countdown .coming-soon-seconds::after {
    color: #ffffff !important;
    font-size: 1rem !important;
    display: block !important;
    margin-top: 5px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
}

/* =========================================
   4. ICONOS SOCIALES 
   ========================================= */
ul.social-icons li a {
    color: #F5C870 !important;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

ul.social-icons li a:hover {
    opacity: 0.7; 
}

/* =========================================
   5. RESPONSIVE (ADAPTACIÓN PARA MÓVILES)
   ========================================= */
@media (max-width: 768px) {
    #coming-soon-countdown {
        flex-wrap: wrap !important; 
        gap: 20px !important; 
    }

    #coming-soon-countdown > div {
        flex: 0 0 40% !important; 
        margin-bottom: 10px !important;
    }

    #coming-soon-countdown span.coming-soon-number {
        font-size: 2.5rem !important; 
    }

    #coming-soon-countdown .coming-soon-days::after,
    #coming-soon-countdown .coming-soon-hours::after,
    #coming-soon-countdown .coming-soon-minutes::after,
    #coming-soon-countdown .coming-soon-seconds::after {
        font-size: 0.85rem !important; 
    }
    
    h1.coming-soon-title {
        font-size: 2rem !important;
    }
}

#sp-header {
    background-color: #f5c870 !important;
    height: 60px; 
    padding: 0 !important; 
    display: flex;
    align-items: center; 
}
#sp-header-topbar {
    position: relative;
    z-index: 111;
    background-color: #1b1e20 !important;
}
#sp-header-topbar a {
    color: #909196;
    transition: color 0.3s ease-in-out;
}

#sp-header-topbar a:hover {
    color: #4ea3cf;
}

.logo-image {
    width: 200%;
    height: auto;
    object-fit: contain;
    transform: scale(1) !important; 
    transform-origin: left center !important;
}

@media (min-width: 768px) {
    .logo-image {
        transform: scale(1.5) !important; 
    }
}

/* ================================
   Ajuste del megamenú al borde del header
   ================================ */
#sp-header {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
}

#sp-header .sp-megamenu-parent > li {
    position: relative !important;
    height: 60px !important;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    height: 60px !important;
    line-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#sp-header .sp-megamenu-parent > li > .sp-dropdown,
#sp-header .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main {
    top: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
}

#sp-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #cca964 !important;
    margin-top: 0 !important;
    padding: 30px 20px !important;
}

/* =========================================
   RESPONSIVE HEADER / MENÚ
   ========================================= */
@media (max-width: 1199.98px) {
    #sp-header ul.sp-megamenu-parent,
    #sp-header ul.sp-megamenu-parent.d-lg-block,
    #sp-header .sp-megamenu-parent.menu-animation-fade-up {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #sp-header .ms-3.ps-2,
    #sp-header #offcanvas-toggler,
    #sp-header a#offcanvas-toggler,
    #sp-header .offcanvas-toggler-secondary,
    #sp-header .offcanvas-toggler-right {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #sp-header .burger-icon {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 28px !important;
        height: 20px !important;
        cursor: pointer !important;
    }
}

@media (min-width: 1200px) {
    #sp-header ul.sp-megamenu-parent,
    #sp-header ul.sp-megamenu-parent.d-lg-block,
    #sp-header .sp-megamenu-parent.menu-animation-fade-up {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #sp-header .ms-3.ps-2,
    #sp-header #offcanvas-toggler,
    #sp-header a#offcanvas-toggler,
    #sp-header .offcanvas-toggler-secondary,
    #sp-header .offcanvas-toggler-right,
    #sp-header .burger-icon {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ========================================================================
   VISTA DE BLOG TIPO TARJETAS (CARDS) - ESTILO ELEGANTE
   ======================================================================== */

/* FIX ROBUSTO: Separa verticalmente las columnas cuando cambias a 2 columnas en Joomla */
.com-content-category-blog .article-list .row {
    row-gap: 40px; 
}
.com-content-category-blog .article-list .row > div,
.com-content-category-blog .article-list .row > [class*="col-"] {
    margin-bottom: 40px !important; /* Fuerza el espacio inferior de las columnas para que la fila 2 no se pegue */
}

/* 1. Contenedor principal de la tarjeta */
.com-content-category-blog .article {
    background: rgba(234, 240, 237, 0.7); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative; 
}

.com-content-category-blog .article:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    background: rgba(234, 240, 237, 0.95); 
}

@media (max-width: 575px) {
    .com-content-category-blog .article-list .row > div,
    .com-content-category-blog .article-list .row > [class*="col-"] {
        margin-bottom: 45px !important;
    }
}

/* 2. Área de la imagen */
.com-content-category-blog .article-feature-gallery img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-bottom: 4px solid #cca964;
}

.com-content-category-blog .article-feature-gallery .carousel-inner {
    height: auto;
}

/* 3. Cuerpo de la tarjeta */
.com-content-category-blog .article-body {
    padding: 25px 25px 15px 25px; 
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 4. Etiqueta de la Categoría */
.com-content-category-blog .article-info {
    position: absolute; 
    top: 20px; 
    left: 20px; 
    z-index: 10; 
    margin: 0;
}

.com-content-category-blog .category-name a {
    background-color: #f5c870;
    color: #141e23 !important;
    padding: 6px 16px; 
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    font-family: 'Verdana', sans-serif;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); 
}

.com-content-category-blog .category-name a:hover {
    background-color: #2C566F;
    color: #ffffff !important;
    transform: translateY(-2px); 
}

/* 5. Título del Artículo */
.com-content-category-blog .article-header {
    order: 2;
    margin-bottom: 15px;
}

.com-content-category-blog .article-header h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
}

.com-content-category-blog .article-header h2 a {
    color: #2C566F !important;
    font-family: 'Aclonica', sans-serif;
    text-transform: uppercase; 
}

.com-content-category-blog .article-header h2 a:hover {
    color: #cca964 !important;
}

/* 6. Campos personalizados */
.com-content-category-blog .fields-container {
    order: 3;
    list-style: none;
    padding: 12px 15px;
    margin: 0 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f8f9fa;
    border-left: 3px solid #2C566F;
    border-radius: 0 8px 8px 0;
}

.com-content-category-blog .field-entry {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #555;
    font-family: 'Mulish', sans-serif;
}

.com-content-category-blog .field-label {
    display: none;
}

.com-content-category-blog .field-entry.autor::before {
    content: "\f007";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    color: #cca964;
}

.com-content-category-blog .field-entry.fecha::before {
    content: "\f073";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    color: #cca964;
}

/* 7. Texto Introductorio */
.com-content-category-blog .article-introtext {
    order: 4;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.com-content-category-blog .article-introtext p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
}

/* 8. Botón Leer Más */
.com-content-category-blog .readmore {
    margin-top: auto; 
    margin-bottom: 0;
}

.com-content-category-blog .readmore a {
    display: inline-flex;
    align-items: center;
    background-color: #2C566F;
    color: #ffffff !important;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Verdana', sans-serif;
}

.com-content-category-blog .readmore a::after {
    content: '\f105';
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-left: 8px;
    font-size: 14px;
}

.com-content-category-blog .readmore a:hover {
    background-color: #cca964;
    color: #141e23 !important;
    transform: translateX(3px);
}

.com-content-category-blog__children {
    display: none !important;
}

/* ========================================================================
   VISTA DE ARTÍCULO COMPLETO - ESTILO ELEGANTE Y RESPONSIVO
   ======================================================================== */
.view-article .article-details {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    padding: 50px;
    margin-bottom: 50px;
    margin-top: 20px;
}

.view-article .article-feature-gallery {
    margin: -50px -50px 35px -50px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.view-article .article-feature-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-bottom: 4px solid #cca964;
}

.view-article .article-header h1 {
    font-family: 'Aclonica', sans-serif;
    font-size: 34px;
    color: #2C566F;
    line-height: 1.3;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.view-article .article-info,
.view-article .fields-container {
    display: inline-flex; 
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin: 0 20px 20px 0; 
    list-style: none;
    background: transparent;
    border: none !important; 
}

.view-article .category-name a {
    background-color: #f5c870;
    color: #141e23 !important;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    font-family: 'Verdana', sans-serif;
    transition: background-color 0.3s ease;
}

.view-article .category-name a:hover {
    background-color: #2C566F;
    color: #ffffff !important;
}

.view-article .field-label {
    display: none;
}

.view-article .field-entry,
.view-article .hits {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    font-family: 'Mulish', sans-serif;
}

.view-article .field-entry:not(.autor):not(.fecha) {
    display: none !important;
}

.view-article .field-entry.autor::before {
    content: "\f007"; 
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    color: #cca964;
}

.view-article .field-entry.fecha::before {
    content: "\f073"; 
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    color: #cca964;
}

.view-article .hits::before {
    content: "\f06e"; 
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    color: #cca964;
}

.view-article [itemprop="articleBody"] {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
    font-family: 'Mulish', sans-serif;
}

.view-article [itemprop="articleBody"] p {
    margin-bottom: 25px;
    text-align: justify;
}

.view-article [itemprop="articleBody"] strong,
.view-article [itemprop="articleBody"] b {
    color: #2C566F;
    font-weight: 700;
}

.view-article .article-ratings-social-share {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 10px; 
    margin-bottom: 35px;
    padding-top: 25px;
    border-top: 1px solid #eaeaea; 
}

.view-article .social-share-icon ul {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.view-article .social-share-icon ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: #f8f9fa;
    border-radius: 50%;
    color: #2C566F !important;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.view-article .social-share-icon ul li a:hover {
    background: #cca964;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .view-article .article-details {
        padding: 25px; 
        margin-top: 10px;
    }

    .view-article .article-feature-gallery {
        margin: -25px -25px 25px -25px; 
    }

    .view-article .article-header h1 {
        font-size: 24px;
    }

    .view-article .article-info,
    .view-article .fields-container {
        gap: 15px;
    }

    .view-article .fields-container {
        padding-bottom: 15px;
        margin-bottom: 25px;
    }

    .view-article [itemprop="articleBody"] {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .com-content-category-blog .article-body {
        padding: 15px 15px 10px 15px; 
    }
    
    .com-content-category-blog .article-header h2 {
        font-size: 19px;
    }
}

/* =========================================
   1. ALBUM FOTOS - ENCABEZADO DE LA SECCIÓN
   ========================================= */
.sp-album-intro {
  text-align: center;
  margin-bottom: 40px;
  font-family: 'Mulish', sans-serif;
}
.sp-album-intro h2 {
  color: #346885;
  font-weight: 800;
  font-size: 2.2em;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.sp-album-intro p {
  color: #1b1e20;
  font-size: 1.1em;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* =========================================
   2. GALERÍA EN LA PÁGINA (PORTADA + TIRA)
   ========================================= */
.album-pro-container {
  max-width: 1000px;
  margin: 0 auto 50px auto;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.album-pro-cover {
  position: relative;
  width: 100%;
  height: 550px;
  cursor: zoom-in;
  overflow: hidden;
  background: #1b1e20;
}
.album-pro-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.album-pro-cover:hover img {
  transform: scale(1.02);
}

.album-pro-overlay {
  position: absolute;
  inset: 0;
  background: rgba(52, 104, 133, 0.4);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.album-pro-cover:hover .album-pro-overlay { opacity: 1; }
.album-pro-overlay svg { width: 50px; height: 50px; fill: #F5C870; }

.cover-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(27, 30, 32, 0.6);
  color: #F5C870;
  border: none;
  font-size: 2rem;
  padding: 10px 15px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  border-radius: 4px;
}
.cover-nav-btn:hover {
  background: #346885;
  color: #ffffff;
}
.album-pro-cover:hover .cover-nav-btn {
  opacity: 1;
}
.cover-nav-btn.prev { left: 15px; }
.cover-nav-btn.next { right: 15px; }

.album-pro-strip {
  display: flex;
  gap: 10px;
  padding: 15px;
  background: #fdf4e1;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #346885 #e0e0e0;
}
.album-pro-strip::-webkit-scrollbar { height: 6px; }
.album-pro-strip::-webkit-scrollbar-thumb { background: #346885; border-radius: 4px; }

.thumb-item {
  flex: 0 0 120px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.3s ease;
  border: 3px solid transparent;
}
.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-item:hover { opacity: 0.9; }

.thumb-item.active {
  opacity: 1;
  border-color: #346885;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* =========================================
   3. VISOR LIGHTBOX (PANTALLA COMPLETA)
   ========================================= */
.sp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(27, 30, 32, 0.98);
  z-index: 99999;
  flex-direction: column;
}
.sp-lightbox.active { display: flex; }

.lb-top-bar {
  display: flex;
  justify-content: flex-end;
  padding: 15px 30px;
}
.lb-btn-close {
  background: none; border: none; color: #F5C870; font-size: 2.5rem; cursor: pointer; transition: 0.3s;
}
.lb-btn-close:hover { color: #fff; transform: scale(1.1); }

.lb-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.lb-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
  animation: fadeZoom 0.3s ease;
}

.lb-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #F5C870;
  font-size: 2.5rem;
  padding: 15px 20px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 4px;
}
.lb-nav-btn:hover { background: #346885; color: #fff; }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }

.lb-strip-container {
  padding: 15px;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
}
.lb-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 5px;
  scrollbar-width: thin;
  scrollbar-color: #F5C870 transparent;
}
.lb-strip .thumb-item.active {
  border-color: #F5C870;
}

@media (max-width: 768px) {
  .album-pro-cover { height: 300px; }
  .lb-nav-btn { font-size: 1.5rem; padding: 10px 15px; }
  .lb-prev { left: 5px; }
  .lb-next { right: 5px; }
  .lb-strip-container { justify-content: flex-start; }
  .sp-album-intro h2 { font-size: 1.8em; }
}

body.lightbox-open #sp-header-topbar, 
body.lightbox-open #sp-header,
body.lightbox-open .sp-header-topbar,
body.lightbox-open .sp-header {
    display: none !important;
}

#boton-cierre-global {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 99999999 !important;
    background: none !important;
    border: none !important;
    color: #F5C870 !important;
    font-size: 3rem !important;
    cursor: pointer !important;
    display: none;
    transition: 0.3s;
}
#boton-cierre-global:hover {
    color: #fff !important;
    transform: scale(1.1);
}
#boton-cierre-global.is-visible {
    display: block !important;
}

.lb-nav-btn {
    background: none !important; 
    border: none !important;
    color: #F5C870 !important;
    font-size: 3rem !important;
    cursor: pointer;
    transition: 0.3s;
}
.lb-nav-btn:hover {
    color: #fff !important;
}

/*

 * FORZAR LA FUENTE 'icomoon' Y EL ÍCONO REBICLAR

 * (Versión actualizada con el nuevo código de ícono)

*/



[class^="icon-"], [class*=" icon-"] {

  /* ¡Forzamos la familia de fuentes correcta! */

  font-family: 'fontello' !important;

  speak: never;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

[class^="icon-"], [class*=" icon-"] {

  /* ¡Forzamos la familia de fuentes correcta! */

  font-family: 'fontello' !important;

  speak: never;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



/* Definimos tu ícono específico con el nuevo código */

.icon-flor:before {

  content: "\e801";

}

#sp-left .sp-module, #sp-right .sp-module {
    margin-top: 10px;
    border: 0px solid #E5F4FF;
    padding: 10px;
}

/* ========================================================================
   PERSONALIZACIÓN DE LA PAGINACIÓN - ESTILO LIMPIO Y UNIFORME
   ======================================================================== */

/* Contenedor general del listado de paginación */
.com-content-category-blog .pagination,
.view-category .blog .pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px auto;
    padding: 0;
    list-style: none;
}

/* 1. CONFIGURACIÓN BASE UNIFORME (Cajas cuadradas idénticas para números y flechas) */
.com-content-category-blog .pagination a,
.com-content-category-blog .pagination span,
.com-content-category-blog .pagination > li > a,
.com-content-category-blog .pagination > li > span,
.com-content-category-blog .pagination .page-link {
    font-family: 'Verdana', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #2C566F !important;
    background-color: #ffffff !important;
    border: 2px solid #2C566F !important;
    border-radius: 6px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    
    /* Fuerza cajas perfectamente cuadradas y centradas */
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 2. ELIMINACIÓN DEL DOBLE CUADRO (Reset radical para iconos internos) */
.com-content-category-blog .pagination a *,
.com-content-category-blog .pagination span * {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}

/* 3. RESTAURACIÓN DE FUENTE PARA LAS FLECHAS */
.com-content-category-blog .pagination li:first-child a,
.com-content-category-blog .pagination li:first-child span,
.com-content-category-blog .pagination li:last-child a,
.com-content-category-blog .pagination li:last-child span,
.com-content-category-blog .pagination .pagination-start a,
.com-content-category-blog .pagination .pagination-prev a,
.com-content-category-blog .pagination .pagination-next a,
.com-content-category-blog .pagination .pagination-end a,
.com-content-category-blog .pagination a i,
.com-content-category-blog .pagination span i,
.com-content-category-blog .pagination a::before,
.com-content-category-blog .pagination a::after,
.com-content-category-blog .pagination span::before,
.com-content-category-blog .pagination span::after {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* 4. ESTADO HOVER (Pasar el ratón sobre páginas comunes o flechas activas) */
.com-content-category-blog .pagination a:hover,
.com-content-category-blog .pagination > li > a:hover,
.com-content-category-blog .pagination li:not(.active):not(.disabled) a:hover,
.com-content-category-blog .pagination .page-link:hover {
    background-color: rgba(44, 86, 111, 0.08) !important; /* Sutil fondo azul translúcido */
    border-color: #2C566F !important;
    color: #2C566F !important;
    transform: translateY(-2px);
}

/* 5. ESTADO ACTIVO (La página actual: Más grande y Naranja de acento) */
.com-content-category-blog .pagination > .active > a,
.com-content-category-blog .pagination > .active > span,
.com-content-category-blog .pagination .active a,
.com-content-category-blog .pagination .active span,
.com-content-category-blog .pagination .page-item.active .page-link {
    background-color: #f5c870 !important;
    border-color: #f5c870 !important;
    color: #141e23 !important;
    font-size: 16px !important; /* Texto ligeramente más grande */
    font-weight: 800 !important;
    transform: scale(1.15) !important; /* Caja ampliada estéticamente */
    box-shadow: 0 4px 10px rgba(245, 200, 112, 0.4) !important;
    z-index: 5;
    cursor: default;
}

/* 6. ESTADO DESACTIVADO (Flechas deshabilitadas) */
.com-content-category-blog .pagination > .disabled > a,
.com-content-category-blog .pagination > .disabled > span,
.com-content-category-blog .pagination .disabled a,
.com-content-category-blog .pagination .disabled span,
.com-content-category-blog .pagination .page-item.disabled .page-link {
    color: #cccccc !important;
    background-color: #f8f9fa !important;
    border-color: #eaeaea !important;
    cursor: not-allowed;
    opacity: 0.5;
    transform: none !important;
    box-shadow: none !important;
}

/* ========================================================================
   ESTILOS PREMIUM: CAROUSEL DESTACADOS (ANCHO COMPLETO Y CAJA COMPACTA)
   ======================================================================== */

/* Expansión total de la caja del slider y margen de seguridad inferior */
.slider-destacados {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 65px !important; /* Espacio para que los dots no pisen el siguiente módulo */
}

.slider-destacados .sppb-addon-content,
.slider-destacados .sppb-articles-carousel-wrap,
.slider-destacados .slick-list {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 1. CONTENEDOR DEL SLIDE */
.slider-destacados .sppb-articles-carousel-column {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
    height: 550px !important; 
}

/* 2. ENMASCARAMIENTO DE IMAGEN (ELIMINA EL "PEDACITO" O GAP INFERIOR) */
.slider-destacados .sppb-articles-carousel-img,
.slider-destacados .sppb-articles-carousel-img-link,
.slider-destacados .sppb-articles-carousel-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    vertical-align: bottom !important; /* Corrige subpíxeles residuales en navegadores */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* 3. CAJA ULTRA COMPACTA Y SEMITRANSPARENTE (GLASSMORPHISM ALTO) */
.slider-destacados .sppb-articles-carousel-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 35px !important; /* Padding minimizado para reducir altura */
    
    /* Gradiente con alta transparencia y desenfoque de fondo */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    border-top: 3px solid #f5c870 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    z-index: 10 !important;
}

/* Ocultar la fecha para maximizar el ahorro de espacio vertical */
.slider-destacados .sppb-articles-carousel-meta {
    display: none !important;
}

/* Título optimizado (Compacto) */
.slider-destacados .sppb-articles-carousel-link {
    font-family: 'Aclonica', sans-serif !important;
    color: #2C566F !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.slider-destacados .sppb-articles-carousel-link:hover {
    color: #f5c870 !important;
}

/* Texto introductorio estrictamente limitado a 2 líneas */
.slider-destacados .sppb-articles-carousel-introtext {
    font-family: 'Mulish', sans-serif !important;
    color: #1b1e20 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: justify !important;
    margin: 0 0 10px 0 !important;
    max-width: 94% !important;
    
    /* Forzar corte de texto limpio con puntos suspensivos */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Categoría Inferior (Actúa estéticamente como el cierre de lectura) */
.slider-destacados .sppb-articles-carousel-meta-category {
    display: block !important;
    margin: 0 !important;
}
.slider-destacados .sppb-articles-carousel-meta-category a {
    font-family: 'Verdana', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #346885 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
}

/* ========================================================================
   4. NAVEGACIÓN FLOTANTE INTERNA (SOBRE LA FOTO)
   ======================================================================== */
.slider-destacados .slick-arrow {
    position: absolute !important;
    top: 40% !important; /* Centrado respecto a la zona visible de la imagen */
    transform: translateY(-50%) !important;
    z-index: 50 !important;
    cursor: pointer !important;
    color: #f5c870 !important;
    font-size: 42px !important;
    width: 46px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(27, 30, 32, 0.25) !important; /* Círculo sutil translúcido */
    border-radius: 50% !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Flechas contenidas en los extremos internos */
.slider-destacados .fa-angle-left.slick-arrow { left: 20px !important; }
.slider-destacados .fa-angle-right.slick-arrow { right: 20px !important; }

.slider-destacados .slick-arrow:hover {
    background: #2C566F !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.05) !important;
}

/* Dots inferiores en posición fija relativa */
.slider-destacados .slick-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    bottom: -35px !important; /* Desplazados debajo de la tarjeta de forma limpia */
    left: 0 !important;
    gap: 10px !important;
    width: 100% !important;
}
.slider-destacados .slick-dots li button {
    background-color: #cccccc !important;
    border: none !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    cursor: pointer !important;
}
.slider-destacados .slick-dots li.slick-active button {
    background-color: #f5c870 !important;
    width: 22px !important;
    border-radius: 10px !important;
}

/* Ajustes responsivos móviles */
@media (max-width: 768px) {
    .slider-destacados .sppb-articles-carousel-column { height: 420px !important; }
    .slider-destacados .sppb-articles-carousel-content { padding: 15px 25px !important; }
    .slider-destacados .sppb-articles-carousel-link { font-size: 16px !important; }
    .slider-destacados .fa-angle-left.slick-arrow { left: 10px !important; }
    .slider-destacados .fa-angle-right.slick-arrow { right: 10px !important; }
}

.article .featured-article-badge {
    display: none !important;
}

#sppb-addon-eb091c4b-02bf-4725-80d2-68b6539e3d8c .sppb-addon-articles-carousel .slick-slide {
  padding: 0px ! important;
}

.sppb-col, .sppb-col-auto, .sppb-col-lg, .sppb-col-lg-1, .sppb-col-lg-10, .sppb-col-lg-11, .sppb-col-lg-12, .sppb-col-lg-2, .sppb-col-lg-3, .sppb-col-lg-4, .sppb-col-lg-5, .sppb-col-lg-6, .sppb-col-lg-7, .sppb-col-lg-8, .sppb-col-lg-9, .sppb-col-lg-auto, .sppb-col-md, .sppb-col-md-1, .sppb-col-md-10, .sppb-col-md-11, .sppb-col-md-12, .sppb-col-md-2, .sppb-col-md-3, .sppb-col-md-4, .sppb-col-md-5, .sppb-col-md-6, .sppb-col-md-7, .sppb-col-md-8, .sppb-col-md-9, .sppb-col-md-auto, .sppb-col-sm, .sppb-col-sm-1, .sppb-col-sm-10, .sppb-col-sm-11, .sppb-col-sm-12, .sppb-col-sm-2, .sppb-col-sm-3, .sppb-col-sm-4, .sppb-col-sm-5, .sppb-col-sm-6, .sppb-col-sm-7, .sppb-col-sm-8, .sppb-col-sm-9, .sppb-col-sm-auto, .sppb-col-xl, .sppb-col-xl-1, .sppb-col-xl-10, .sppb-col-xl-11, .sppb-col-xl-12, .sppb-col-xl-2, .sppb-col-xl-3, .sppb-col-xl-4, .sppb-col-xl-5, .sppb-col-xl-6, .sppb-col-xl-7, .sppb-col-xl-8, .sppb-col-xl-9, .sppb-col-xl-auto, .sppb-col-xs-1, .sppb-col-xs-10, .sppb-col-xs-11, .sppb-col-xs-12, .sppb-col-xs-2, .sppb-col-xs-3, .sppb-col-xs-4, .sppb-col-xs-5, .sppb-col-xs-6, .sppb-col-xs-7, .sppb-col-xs-8, .sppb-col-xs-9, .sppb-row-column {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 0px;
}

/* ========================================================================
   REEMPLAZAR DOTS POR LA FLOR SVG EN EL CAROUSEL DE DESTACADOS
   ======================================================================== */

/* 1. Limpiar el botón contenedor nativo de Slick */
.slider-destacados .slick-dots li button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 22px !important;
    height: 22px !important;
    text-indent: 0 !important; /* Recupera el flujo para el pseudo-elemento */
    overflow: visible !important;
    cursor: pointer !important;
    position: relative !important;
    display: block !important;
    padding: 0 !important;
}

/* 2. Inyectar la flor real en el pseudo-elemento ::before */
.slider-destacados .slick-dots li button::before {
    content: "" !important; /* Borra el punto "•" original */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 22px !important;
    height: 22px !important;
    
    /* Tu flor SVG exacta */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6' r='5' fill='%23F5C870'/%3E%3Ccircle cx='12' cy='18' r='5' fill='%23F5C870'/%3E%3Ccircle cx='6' cy='12' r='5' fill='%23F5C870'/%3E%3Ccircle cx='18' cy='12' r='5' fill='%23F5C870'/%3E%3Ccircle cx='12' cy='12' r='3.5' fill='%23346885'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    
    /* Estado inactivo: sutil y elegante */
    opacity: 0.35 !important; 
    transform: scale(0.85) !important;
    transition: all 0.3s ease-in-out !important;
    color: transparent !important; /* Anula cualquier rastro tipográfico heredado */
}

/* 3. Estado Hover al pasar el mouse por las flores */
.slider-destacados .slick-dots li:hover button::before {
    opacity: 0.7 !important;
    transform: scale(1) !important;
}

/* 4. Estado Activo (Flor seleccionada: resalta al 100% y se expande) */
.slider-destacados .slick-dots li.slick-active button::before {
    opacity: 1 !important;
    transform: scale(1.2) !important;
    filter: drop-shadow(0 2px 6px rgba(245, 200, 112, 0.4)) !important; /* Sutil aura dorada */
}

/* ========================================================================
   MÓDULO DE BÚSQUEDA (FOOTER) - ESTILO "PILL" CORPORATIVO
   ======================================================================== */

/* 1. Contenedor principal (Efecto cápsula con borde sutil) */
#sp-footer .mod-finder .input-group {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(245, 200, 112, 0.25) !important;
    border-radius: 35px !important;
    padding: 5px !important;
    transition: all 0.3s ease !important;
    max-width: 100% !important;
    margin-top: 25px !important;
}

/* Estado activo del contenedor */
#sp-footer .mod-finder .input-group:focus-within {
    border-color: #f5c870 !important;
    box-shadow: 0 0 15px rgba(245, 200, 112, 0.1) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 2. Ajuste del wrapper inyectado por Joomla (Awesomplete) */
#sp-footer .mod-finder .awesomplete {
    flex-grow: 1 !important;
    display: flex !important;
}

/* 3. Campo de texto (Input transparente) */
#sp-footer .mod-finder .form-control {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    padding: 10px 20px !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Remover el outline nativo de los navegadores */
#sp-footer .mod-finder .form-control:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Placeholder discreto */
#sp-footer .mod-finder .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* 4. Botón de Búsqueda (Acento Dorado) */
#sp-footer .mod-finder .btn-primary {
    background-color: #f5c870 !important;
    color: #141e23 !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 11px 28px !important;
    font-family: 'Verdana', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 5px !important;
}

#sp-footer .mod-finder .btn-primary:hover {
    background-color: #cca964 !important;
    transform: scale(1.02) !important;
}

/* Ajuste del ícono nativo dentro del botón */
#sp-footer .mod-finder .btn-primary .icon-search {
    margin-right: 8px !important;
    font-size: 14px !important;
}

/* ========================================================================
   PHOCA DOWNLOAD - VISTA DE ARCHIVOS (ESTILO ELEGANTE INTEGRADO)
   ======================================================================== */

/* 1. Título principal de la sección (RETIROS MENSUALES) */
#phoca-dl-category-box .pd-ctitle {
    color: #2C566F !important;
    font-family: 'Aclonica', sans-serif !important;
    font-size: 28px !important;
    text-transform: uppercase !important;
    border-bottom: 3px solid #cca964 !important;
    padding-bottom: 15px !important;
    margin-bottom: 40px !important;
    text-align: center !important;
}

/* 2. Ocultar la fila vacía de valoraciones (Limpieza técnica del DOM) */
#phoca-dl-category-box .pd-row2-bp {
    display: none !important;
}

/* 3. Contenedor de cada archivo (Aplica SOLO a las filas de archivos, ignorando las vacías) */
#phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp) {
    background: rgba(234, 240, 237, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    padding: 15px 25px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    border-left: 5px solid #2C566F !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hover de la barra de archivo */
#phoca-dl-category-box .pd-category > .row:not(.pd-row2-bp):hover {
    transform: translateX(5px) !important; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
    background: rgba(234, 240, 237, 0.95) !important;
    border-left-color: #cca964 !important; 
}

/* 4. Alineación interna de columnas (Flexbox forzado) */
#phoca-dl-category-box .pd-category > .row > div {
    display: flex !important;
    align-items: center !important;
}

/* Empujar el botón de descarga a la derecha */
#phoca-dl-category-box .pd-category > .row > div:last-child {
    justify-content: flex-end !important;
}

/* 5. Título del PDF y ajuste del Icono */
#phoca-dl-category-box .pd-document64 {
    background-size: 35px !important; /* Reducción estética del icono PDF */
    background-position: left center !important;
    padding-left: 50px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

#phoca-dl-category-box .pd-float {
    margin: 0 !important;
}

/* Tipografía del enlace del archivo */
#phoca-dl-category-box .pd-float a {
    color: #141e23 !important;
    font-family: 'Aclonica', sans-serif !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    transition: color 0.3s ease !important;
}

#phoca-dl-category-box .pd-float a:hover {
    color: #cca964 !important;
}

/* 6. Botón de Descarga */
#phoca-dl-category-box .btn-success {
    background-color: #f5c870 !important;
    color: #141e23 !important;
    border: none !important;
    padding: 8px 24px !important;
    border-radius: 20px !important;
    font-family: 'Verdana', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Inyección de ícono FontAwesome en el botón */
#phoca-dl-category-box .btn-success::before {
    content: "\f019" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    font-size: 14px !important;
}

#phoca-dl-category-box .btn-success:hover {
    background-color: #2C566F !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Limpiar márgenes fantasma de Phoca */
#phoca-dl-category-box .pd-button-box-bt {
    margin: 0 !important;
}

/* 7. Adaptación Responsiva (Móviles) */
@media (max-width: 767px) {
    #phoca-dl-category-box .pd-category > .row {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }
    #phoca-dl-category-box .pd-category > .row > div:last-child {
        justify-content: flex-start !important;
        margin-top: 15px !important;
        width: 100% !important;
    }
    #phoca-dl-category-box .btn-success {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================================================
   PHOCA DOWNLOAD - PANEL DE SUBIDA (ESTILO ELEGANTE Y SIMPLIFICADO)
   ======================================================================== */

/* 1. Ocultar todos los campos innecesarios (De la fila 3 en adelante) */
table.pd-user-upload-table tr:nth-child(n+3) {
    display: none !important;
}

/* 2. Contenedor principal con efecto Glassmorphism */
#phocadownload-upload {
    background: rgba(234, 240, 237, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    padding: 35px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08) !important;
    border-top: 4px solid #cca964 !important; 
    margin-bottom: 50px !important;
}

/* 3. Títulos de las secciones internas */
#phocadownload-upload h4 {
    color: #2C566F !important;
    font-family: 'Aclonica', sans-serif !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
    margin-top: 15px !important;
    border-bottom: 1px solid rgba(44, 86, 111, 0.1) !important;
    padding-bottom: 15px !important;
}

/* Ocultar encabezado H3 repetitivo SOLO en el panel de Phoca */
body.com-phocadownload.view-user #sp-component > h3:first-of-type {
    display: none !important;
}

/* 4. Transformar la tabla de formulario en diseño moderno (Stacking) */
table.pd-user-upload-table, 
table.pd-user-upload-table tbody, 
table.pd-user-upload-table tr, 
table.pd-user-upload-table td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
}

table.pd-user-upload-table tr {
    margin-bottom: 20px !important;
}

table.pd-user-upload-table td strong {
    color: #141e23 !important;
    font-family: 'Verdana', sans-serif !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* 5. Estilo general de los Inputs y Selects */
#phocadownload-upload .form-control {
    border-radius: 6px !important;
    border: 1px solid #cfcfcf !important;
    padding: 12px 15px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    color: #333 !important;
    background-color: #fff !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03) !important;
    transition: all 0.3s ease !important;
}

#phocadownload-upload .form-control:focus {
    border-color: #2C566F !important;
    box-shadow: 0 0 0 3px rgba(44, 86, 111, 0.15) !important;
    outline: none !important;
}

/* 6. Botones de Acción (Seleccionar archivo y Buscador) */
#phocadownload-upload .btn-primary {
    background-color: #2C566F !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    font-family: 'Verdana', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    z-index: 2 !important; /* Mantiene prioridad de clic */
}

#phocadownload-upload .btn-primary:hover {
    background-color: #1a394a !important;
    transform: translateY(-2px) !important;
}

/* Botón principal de Iniciar Carga (Acento dorado) */
#file-upload-submit {
    background-color: #f5c870 !important;
    color: #141e23 !important;
    margin-left: 10px !important;
}

#file-upload-submit:hover {
    background-color: #cca964 !important;
}

/* Ajuste del botón "Seleccionar archivo" para que encaje visualmente */
.pd-file-upload-form .input-group-btn .btn-file {
    margin-right: -2px !important;
    border-radius: 6px 0 0 6px !important;
}

/* 7. Rediseño del listado "Archivos Cargados" */
#phocadownload-upload table.table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

#phocadownload-upload table.table thead th {
    border: none !important;
    color: #2C566F !important;
    font-family: 'Verdana', sans-serif !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    padding-bottom: 5px !important;
}

#phocadownload-upload table.table thead th a {
    color: #2C566F !important;
}

/* Cajas de cada archivo ya subido */
#phocadownload-upload table.table tbody tr {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    transition: transform 0.2s ease !important;
}

#phocadownload-upload table.table tbody tr:hover {
    transform: scale(1.01) !important;
}

#phocadownload-upload table.table tbody td {
    border: none !important;
    vertical-align: middle !important;
    padding: 15px !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
}

#phocadownload-upload table.table tbody tr td:first-child {
    border-radius: 8px 0 0 8px !important;
    font-weight: 700 !important;
}

#phocadownload-upload table.table tbody tr td:last-child {
    border-radius: 0 8px 8px 0 !important;
}

/* 8. Fix para móviles */
@media (max-width: 768px) {
    .pd-file-upload-form {
        flex-direction: column !important;
    }
    .pd-file-upload-form .input-group-btn .btn-file {
        border-radius: 6px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    #file-upload-filename {
        border-radius: 6px !important;
        margin-bottom: 10px !important;
    }
    #file-upload-submit {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ========================================================================
   NUEVO COMPONENTE DE ÁLBUM PASTORAL
   Solo tarjeta, portada y miniaturas.
   No afecta el álbum original HISTORY.
   ======================================================================== */


/* ------------------------------------------------------------------------
   1. TARJETA
   ------------------------------------------------------------------------ */

.pastoral-album {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: none !important;
    border-top: 4px solid #346885 !important;
    border-radius: 0 0 8px 8px !important;

    overflow: hidden !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;

    box-sizing: border-box !important;
}


/* Todos los elementos internos respetan el ancho de la columna */

.pastoral-album,
.pastoral-album *,
.pastoral-album *::before,
.pastoral-album *::after {
    box-sizing: border-box !important;
}


/* ------------------------------------------------------------------------
   2. TÍTULO
   ------------------------------------------------------------------------ */

.pastoral-album__title {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 17px 12px 14px !important;

    background: #ffffff !important;
    color: #346885 !important;

    font-family: 'Aclonica', sans-serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    text-align: center !important;
    text-transform: uppercase !important;

    border: none !important;
}


/* ------------------------------------------------------------------------
   3. PORTADA CON ALTURA FIJA
   ------------------------------------------------------------------------ */

.pastoral-album__cover {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #1b1e20 !important;

    overflow: hidden !important;
    cursor: zoom-in !important;

    border: none !important;
    outline: none !important;

    isolation: isolate !important;
}


/* La foto nunca puede cambiar la altura del álbum */

.pastoral-album__cover-image {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: #1b1e20 !important;

    border: none !important;

    transition: transform 0.5s ease !important;

    z-index: 1 !important;
}


/* Evita que aparezca el icono de imagen rota antes de cargar */

.pastoral-album__cover-image:not([src]),
.pastoral-album__cover-image[src=""] {
    visibility: hidden !important;
}


.pastoral-album__cover:hover .pastoral-album__cover-image {
    transform: scale(1.02) !important;
}


/* ------------------------------------------------------------------------
   4. OVERLAY Y LUPA
   ------------------------------------------------------------------------ */

.pastoral-album__overlay {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(52, 104, 133, 0.40) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease !important;

    z-index: 2 !important;
}


.pastoral-album__cover:hover .pastoral-album__overlay {
    opacity: 1 !important;
    visibility: visible !important;
}


.pastoral-album__overlay svg {
    position: relative !important;

    display: block !important;
    flex: 0 0 44px !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: #F5C870 !important;
    color: #F5C870 !important;

    background: transparent !important;
    border: none !important;

    z-index: 1 !important;
}


.pastoral-album__overlay svg path {
    fill: #F5C870 !important;
}


/* ------------------------------------------------------------------------
   5. FLECHAS DE LA PORTADA
   ------------------------------------------------------------------------ */

.pastoral-album__nav {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: absolute !important;
    top: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;

    background: rgba(27, 30, 32, 0.65) !important;
    color: #F5C870 !important;

    border: none !important;
    border-radius: 4px !important;
    outline: none !important;

    box-shadow: none !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease !important;

    z-index: 3 !important;
}


.pastoral-album__cover:hover .pastoral-album__nav {
    opacity: 1 !important;
    visibility: visible !important;
}


.pastoral-album__nav:hover {
    background: #346885 !important;
    color: #ffffff !important;
}


.pastoral-album__nav--prev {
    left: 10px !important;
    right: auto !important;
}


.pastoral-album__nav--next {
    right: 10px !important;
    left: auto !important;
}


/* ------------------------------------------------------------------------
   6. TIRA DE MINIATURAS
   ------------------------------------------------------------------------ */

.pastoral-album__strip {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;

    margin: 0 !important;
    padding: 12px !important;

    background: #fdf4e1 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-behavior: smooth !important;
    overscroll-behavior-x: contain !important;

    scrollbar-width: thin !important;
    scrollbar-color: #346885 #e0e0e0 !important;
}


/* Barra horizontal */

.pastoral-album__strip::-webkit-scrollbar {
    display: block !important;
    height: 6px !important;
}


.pastoral-album__strip::-webkit-scrollbar-track {
    background: #e0e0e0 !important;
}


.pastoral-album__strip::-webkit-scrollbar-thumb {
    background: #346885 !important;
    border-radius: 4px !important;
}


/* ------------------------------------------------------------------------
   7. MINIATURAS
   El JavaScript las creará en el siguiente paso.
   ------------------------------------------------------------------------ */

.pastoral-album__thumb {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative !important;
    display: block !important;

    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 65px !important;

    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;

    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: #1b1e20 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;

    border: 3px solid transparent !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    overflow: hidden !important;

    opacity: 0.5 !important;
    cursor: pointer !important;

    transition:
        opacity 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}


.pastoral-album__thumb:hover {
    opacity: 0.9 !important;
}


.pastoral-album__thumb.is-active {
    opacity: 1 !important;
    border-color: #346885 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20) !important;
}


/* ------------------------------------------------------------------------
   8. TABLETS
   ------------------------------------------------------------------------ */

@media (max-width: 1199.98px) {

    .pastoral-album__cover {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }
}


/* ------------------------------------------------------------------------
   9. MÓVILES
   ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {

    .pastoral-album__title {
        font-size: 18px !important;
    }

    .pastoral-album__cover {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    .pastoral-album__nav {
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* ------------------------------------------------------------------------
   10. MÓVILES PEQUEÑOS
   ------------------------------------------------------------------------ */

@media (max-width: 480px) {

    .pastoral-album__cover {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
    }
}

/* ========================================================================
   FUENTE PERSONALIZADA: FONTELLO / FLOR
   ======================================================================== */

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.woff2') format('woff2'),
       url('../fonts/fontello.woff') format('woff'),
       url('../fonts/fontello.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Aplicación exclusiva a la clase de la flor para evitar conflictos */
.icon-flor:before {
  font-family: 'fontello' !important;
  content: "\e801" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}