/**
 * Responsive CSS - Estilos para todas las pantallas
 * 
 * Este archivo contiene todos los estilos responsive del tema Explora,
 * organizados por componente y breakpoint para facilitar el mantenimiento.
 * 
 * @package Explora_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   BREAKPOINTS UTILIZADOS
   ========================================================================== */
/*
   - Mobile: hasta 767px
   - Tablet: 768px - 1023px  
   - Desktop: 1024px en adelante
   - Large Desktop: 1200px en adelante
*/


/* ==========================================================================
MOBILE MENU
========================================================================== */


.mobile-menu-btn,
.mobile-menu-close {
   background-color: var(--color-primary-blue);
   width: 40px;
   height: 40px;   
   margin-left: 50px;
   border-radius: 4px;
   justify-content: center;
   align-items: center;
}
.mobile-menu-close {
   margin-left: auto;
   display: flex;
   flex-direction: column;
}
.mobile-menu-btn span,
.mobile-menu-close span {
   background-color: #fff;
   margin-top: 3px;
   margin-bottom: 3px;
   width: 24px;
   height: 2px;
   border-radius: 0;
}
.mobile-menu-btn.active span:nth-child(1),
.mobile-menu-close span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-btn.active span:nth-child(3),
.mobile-menu-close span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}
.mobile-menu-close span:nth-child(2) {
   opacity: 0;
}
.mobile-menu-nav a {
   padding: 8px 20px;
   font-size: 16px;
   font-weight: 600;
   color: var(--color-primary-blue);
}
.mobile-menu-nav a:nth-last-of-type(1),
.mobile-menu-nav a:nth-last-of-type(2),
.mobile-menu-nav a:nth-last-of-type(3),
.mobile-menu-nav a:nth-last-of-type(4) {
   background-color: var(--color-primary-blue);
   margin-left: 10px;
   margin-right: 10px;
   border: 0;
   color: #fff;
}
.mobile-menu-nav a:nth-last-of-type(1) {
   padding-bottom: 20px;
}
.mobile-menu-nav a:nth-last-of-type(4) {
   margin-top: 20px;
   padding-top: 20px;
}
.mobile-menu-header img {
   display: none;
}
.home .testimonials-section .testimonial-card {
   border-radius: 0;
}
.home .testimonials-section .testimonial-card img {
   background: transparent!important;
}


/* ==========================================================================
BANNER
========================================================================== */

/* replace 125 styles.css */
.hero-content-wrapper {
   max-width: 100%;
}

.hero-image-mobile {
   display: none;
}



/* ==========================================================================
   DESKTOP CUSTOM
   ========================================================================== */

/* replace 466 styles.css */
.explora-grid {
   grid-template-columns: 1fr 1fr;
   gap: 70px;
}

/* under 508 styles.css */
.page-region .tabs-nav {
   justify-content: center;
}

/* replace 2180 styles.css */
.section-title {
   margin-bottom: 30px;
   font-size: 38px;
   color: var(--color-text);
}

/* under 2180 styles.css */
.page-region .section-title {
   font-weight: 500;
}

/* replace 779 styles.css */
.podcast-left {
    max-width: 500px;
}

/* replace 784 styles.css */
.podcast-left h3 {
   margin-bottom: 50px;
   font-size: 38px;
   color: var(--color-text);
}

/* replace 792 styles.css */
.btn-podcast {
   background: var(--color-primary-blue);
   width: 80%;
   padding: 15px 32px;
   display: block;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
   border-radius: 4px;
}

/* replace 1753 styles.css */
.podcast-section h2 {
    font-size: 38px;
    color: var(--color-text);
    margin-bottom: 30px;
}

/* add 808 styles.css */
.podcast-right {
   margin-top: -100px;
}

/* replace 3415 styles.css */
.iniciativas-grid {
   gap: 40px;
}

/* replace 3422 styles.css */
.iniciativa-card {
   border-radius: 0;
   padding: 0;
   text-align: left;
   box-shadow: none;
}

/* replace 3431 styles.css */
.iniciativa-card:hover {
    box-shadow: none;
}

/* replace 3502 styles.css */
.iniciativa-card p {
   font-size: 16px;
   font-weight: 500;
   color: var(--color-text);
}

/* replace 859 styles.css */
.iniciativa-img {
   height: 190px;
   aspect-ratio: 3 / 3;
}

/* replace 3494 styles.css */
.iniciativa-card h3 {
   color: var(--color-text);
}



.iniciativa-card .btn {
   padding: 15px 32px;
   font-size: 16px;
}










.feedback-widget {
   display: none!important;
}

.tabs-nav-section * {
   font-size: 16px;
}
.tabs-nav-section p,
.tabs-nav-section span,
.tabs-nav-section div {
   font-weight: 500;
}



/* ==========================================================================
   RESPONSIVE GENERAL
   ========================================================================== */

@media (max-width: 1024px) {
   
    .container {
        padding: 0 20px;
    }
    
    .article-header {
         grid-template-columns: 1fr;
         gap: 30px;
     }
     
     .article-image {
         margin-bottom: 20px;
     }
     
     .article-title {
         font-size: 28px;
     }
     
     .article-text {
         columns: 1;
     }
    
    
}

@media (max-width: 768px) {
   
    .container {
        padding: 0 20px;
    }
    
    .btn-primary {
       box-shadow: none;
    }
    
    .tab-navigation {
       padding-bottom: 50px;
       flex-direction: column;
    }
    
    .page-id-38322 .tab-content.active {
       padding-bottom: 0;
    }
    
    .breadcrumb {
       background-color: #F7F9FF;
    }
    
    .intro-section h2 {
       font-size: 50px;
    }
    
    .extra-blocks {
       flex-direction: column;
    }
    .extra-blocks .extra-block {
       width: 100%;
    }
    
    .page-con-intro .main-section {
       flex-direction: column;
    }
    
    .page-con-intro .main-info {
       width: auto;
    }
    
    .page-con-intro .main-info p {
       text-align: left;
    }
    
    .page-con-intro .btn-certificados {
       width: 100%;
    }
    
    .page-id-73205 .activities-grid {
       gap: 0;
    }
    .news-card-image {
       height: auto;
    }
    
    .article-title {
         font-size: 24px;
     }
     
     .article-subtitle {
         font-size: 16px;
     }
     
     .share-buttons {
         justify-content: center;
     }
     
     .single .breadcrumb {
        display: none;
     }
     .filters-section .btn {
        width: 100%;
     }
     .filters-section .filtro-btn {
        padding-top: 15px;
        padding-bottom: 15px;
     }
     
     .survey-info,
      .stats-grid {
          grid-template-columns: 1fr;
      }
      
      .btn-survey {
          padding: 15px 30px;
          font-size: 16px;
      }
      
      .documentos-reporte {
         padding: 70px 0;
      }
      .titulo-sc {
         font-size: 30px;
      }
      .links-download {
         flex-direction: column;
      }
      .links-download .btn-survey {
         width: 100%;
         height: auto;
      }
      .explora-grid {
         grid-template-columns: 1fr;
      }
      .region-banner {
         padding-bottom: 30px;
      }
      .region-header-content {
         flex-direction: row;
      }
      .region-title {
         font-size: 30px;
      }
      .region-icon-thumb {
         width: 50px;
         height: 50px;
         margin-top: 0;
      }
      .region-content {
         flex-direction: column;
      }
      .region-icon {
         width: 60%;
      }
      .region-text {
         width: 100%;
         padding-left: 0;
      }
      .region-text h2 {
         font-size: 42px;
      }
      .region-text p {
         font-size: 40px;
      }
      .page-region .explora-grid {
         gap: 35px;
      }
      .explora-text h2 {
         font-size: 30px;
      }
      .page-region .tabs-nav {
         padding-bottom: 40px;
         flex-direction: column;
      }
      .podcast-left {
         width: 100%;
      }
      .podcast-left h3 {
         text-align: left;
      }
      .podcast-section h2,
      .podcast-left h3 {
         font-size: 30px;
      }
      .podcast-right {
         margin-top: 0;
      }
      .btn-podcast {
         width: 100%;
      }
      .page-region .section-title {
         font-size: 30px;
      }
      
      .admin-bar {
        margin-top: -46px;
      }

      
      
}

/* ==========================================================================
   HEADER RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .header {
        padding: 10px 0;
    }
    
    .header-top {
        padding: 5px 0;
    }
    
    .header-top-content {
        justify-content: center;
        text-align: center;
    }
    
    .header-top-text {
        font-size: 12px;
    }
    
    .page-header {
       background-color: #F7F9FF;
    }
    
    .main-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex !important;
    }
    
    .header-right {
        gap: 10px;
    }
    
    .accessibility-tools {
        gap: 6px;
    }
    
    .search-container .search-input {
        width: 150px;
    }
}

@media (max-width: 480px) {
    .header-main-content {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .header-logo img {
        height: 35px;
    }
    
    
    .search-container .search-input {
        width: 100%;
    }
}

/* ==========================================================================
   NAVIGATION RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
   
    .nav-container {
        padding: 0 16px;
    }
    
    .header-logo img {
      height: 60px !important;
   }
    
    .main-nav-menu {
        flex-direction: column;
        gap: 0;
    }
    
    .main-nav-menu > li {
        border-bottom: 1px solid var(--color-gray-100);
    }
    
    .main-nav-menu > li:last-child {
        border-bottom: none;
    }
    
    .main-nav-menu a {
        padding: 15px 0;
        display: block;
    }
    .header-nav {
       display: none;
    }
    .search-container {
         display: block;
     }
    
    
    
    
    
}

/* ==========================================================================
   HOME PAGE RESPONSIVE
   ========================================================================== */

/* Hero Section */
@media (max-width: 768px) {
    .hero-home {
        padding: 0;
    }
    
    .hero-content-wrapper {
        padding: 0 16px;
    }
    
    .hero-illustration,
    .hero-content-wrapper {
       margin: 0;
       padding: 0;
    }
    .hero-image-desktop {
       display: none;
    }
    
    .hero-image-mobile {
       display: block;
    }
    
    
}


/* News Section */
@media (max-width: 1024px) {
    .news-featured {
        gap: 30px;
    }
    
    .news-featured-content,
    .news-featured-image {
        flex: 1;
    }
    
    .news-featured-image {
       width: 100%;
       order: 1!important;
    }
    .news-featured-image img {
       height: 400px;
    }
    .news-featured-content {
       order: 2!important;
    }
    
}

@media (max-width: 768px) {
    .news-featured {
        flex-direction: column;
        gap: 20px;
    }
    
    .news-carousel-wrapper {
        margin-top: 30px;
    }
    
    .news-card {
        margin: 0 10px;
    }
}

/* Testimonials Section */
@media (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==========================================================================
   PÁGINAS INTERNAS RESPONSIVE
   ========================================================================== */

/* Hero Banner Responsive */
@media (max-width: 1024px) {
    .hero-content {
        gap: 40px;
    }
    
    .hero-pattern {
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    .hero-banner {
        padding: 60px 0;
    }
    
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .hero-text {
        text-align: center;
    }
    
    .hero-text h1 {
        font-size: 36px;
    }
    
    .hero-text p {
        font-size: 16px;
    }
    
    .hero-pattern {
        max-width: 300px;
        order: 1;
    }
    
    .hero-text {
        order: 2;
        text-align: center;
    }
}

/* ==========================================================================
   QUIÉNES SOMOS RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .page-quienes-somos .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .page-quienes-somos .hero-text h1 {
        font-size: 36px;
    }
    
    .page-quienes-somos .hero-text p {
        font-size: 16px;
    }
    
    .page-quienes-somos .hero-pattern {
        max-width: 250px;
    }
}

/* ==========================================================================
   BIBLIOTECA DIGITAL RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .hero-text h1 {
        font-size: 36px;
    }
    
    .hero-text p {
        font-size: 16px;
    }
    
    .hero-pattern {
        max-width: 250px;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   ARCHIVO DE NOTICIAS RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .archive-noticia .hero-content {
        gap: 40px;
    }
    
    .archive-noticia .hero-pattern {
        max-width: 250px;
    }
    
    .archive-noticia .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .archive-noticia .news-hero {
        padding: 60px 0;
    }
    
    .archive-noticia .hero-content {
        flex-direction: column;
        text-align: center;
    }
    
    .archive-noticia .hero-text {
        text-align: center;
    }
    
    .archive-noticia .hero-text h1 {
        font-size: 36px;
    }
    
    .archive-noticia .hero-text p {
        font-size: 16px;
    }
    
    .archive-noticia .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   FOOTER RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .footer-container {
        padding: 40px 20px;
    }
    
    .footer-top-row {
        gap: 60px;
    }
}

@media (max-width: 768px) {
   
    .footer {
       padding: 0;
    }
    .footer-top-row {
       margin-bottom: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }
    
    .footer-logo-section {
        order: 1;
    }
    
    .footer-logo img {
      height: 100px;
   }
    
    .footer-links-section {
        order: 2;
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
    }
    
    .footer-links-column {
        text-align: center;
    }
    
    .footer-bottom {
       padding: 0;
    }
    .footer-bottom-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      padding-top: 0;
      text-align: center;
      place-items: center;
    }
    
    .contact-item {
       margin-bottom: 20px;
       display: block;
    }
    .contact-label {
       display: flex;
       align-items: center;
       justify-content: center;
    }
    
    .footer-social-section {
        align-items: center;
    }
    .social-header {
       justify-content: center;
    }
    
    
}

@media (max-width: 480px) {
    .footer-links-section {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    
    .footer-links-column {
        text-align: center;
    }
    
    .footer-bottom-row {
        gap: 15px;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-item i {
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   COMPONENTES GLOBALES RESPONSIVE
   ========================================================================== */

/* Buttons */
@media (max-width: 480px) {
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .btn-group {
        flex-direction: column;
        gap: 10px;
    }
}

/* Breadcrumb */
@media (max-width: 480px) {
    .breadcrumb {
        font-size: 11px;
        padding: 6px 0;
    }
}

/* Cards */
@media (max-width: 768px) {
    .news-card,
    .resource-card {
        margin: 0;
    }
    
    .news-content,
    .resource-content {
        padding: 15px;
    }
}

/* Modal Responsive */
@media (max-width: 768px) {
    .search-modal-content {
        width: 95%;
        margin: 20px;
        padding: 20px;
    }
    
    .search-modal-title {
        font-size: 20px;
    }
}

/* Pagination */
@media (max-width: 768px) {
    .pagination {
        gap: 5px;
    }
    
    .page-numbers {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

/* ==========================================================================
   UTILITIES RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center;
    }
    
    .hidden-mobile {
        display: none;
    }
    
    .visible-mobile {
        display: block;
    }
    
    .flex-column-mobile {
        flex-direction: column;
    }
    
    .gap-small-mobile {
        gap: 10px;
    }
    
    .padding-small-mobile {
        padding: 10px;
    }
    
    .margin-small-mobile {
        margin: 10px;
    }
}