/* ============================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   Todos los breakpoints para celulares, tablets y monitores
   ============================================ */

/* ============================================
   PANTALLAS MEDIANAS - APILAMIENTO DE BOTONES
   Breakpoint: max-width: 1375px
   A partir de este tamaño, solo el botón de Trámites pasa abajo
   ============================================ */
@media (max-width: 1375px) {
    .header-wrapper {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }
    
    .pagos-section {
        flex-shrink: 0;
        margin-right: 10px;
        margin-bottom: 0;
    }
    
    .tramites-section {
        width: 100%;
        margin-right: 10px;
        margin-bottom: 0;
        max-width: 100%;
        flex-shrink: 0;
        order: 3;
    }
    
    .pagos-banner {
        max-width: calc(50vw - 100px);
        min-width: 200px;
        width: auto;
        white-space: nowrap;
        overflow: visible;
        box-sizing: border-box;
    }
    
    .tramites-banner {
        max-width: calc(100vw - 120px);
        min-width: 200px;
        width: auto;
        white-space: nowrap;
        overflow: visible;
        box-sizing: border-box;
    }
    
    /* Evitar solapamiento con el botón de Trámites cuando se apila */
    .hero-social {
        top: 90%;
        transform: none; /* Eliminar transform para control preciso */
    }
}

/* ============================================
   TABLET Y PANTALLAS MEDIANAS
   Breakpoint: max-width: 1200px
   ============================================ */
@media (max-width: 1200px) {
    .top-bar-container {
        padding: 0 25px;
    }
    
    .gov-logo {
        height: 18px;
    }
    
    .header-wrapper {
        width: calc(100% - 50px);
        max-width: 100%;
        overflow: visible;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .nav-bar-white {
        padding: 12px 30px;
        padding-right: 50px;
    }
    
    .nav-link {
        font-size: 15px;
    }
    
    .pagos-section,
    .tramites-section {
        margin-right: 10px;
        flex-shrink: 0;
        min-width: 0;
        max-width: 100%;
    }
    
    .btn-pse-circle,
    .btn-tramites-circle {
        left: 55px;
    }
    
    .pse-logo-container {
        width: 50px;
        height: 50px;
    }
    
    .pse-logo-img {
        width: 50px;
        height: 50px;
    }
    
    .tramites-logo-container {
        width: 50px;
        height: 50px;
    }
    
    .tramites-logo-img {
        width: 40px;
        height: 40px;
    }
    
    .pagos-banner,
    .tramites-banner {
        padding: 10px 18px 10px 55px;
        clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%);
        margin-left: 25px;
        max-width: calc(100vw - 200px);
        min-width: 200px;
        white-space: nowrap;
        flex-shrink: 1;
        width: auto;
        overflow: visible;
        box-sizing: border-box;
    }
    
    /* Ajuste específico para pantallas entre 600-800px */
    @media (max-width: 800px) and (min-width: 600px) {
        .hero-social {
            left: 25px;
            top: 80%;
        }
        
        .pagos-banner,
        .tramites-banner {
            min-width: 200px;
            max-width: calc(100vw - 180px);
            padding: 10px 15px 10px 50px;
            margin-left: 35px;
            flex-shrink: 1;
            width: auto;
            box-sizing: border-box;
        }
    }
    
    /* Ajuste específico para pantallas entre 481-599px (dentro de 1200px) */
    @media (max-width: 599px) and (min-width: 481px) {
        .hero-social {
            left: 22px;
            top: 90%;
            transform: none; /* Eliminar transform para control preciso */
        }
        
        .pagos-banner,
        .tramites-banner {
            min-width: 200px;
            max-width: calc(100vw - 160px);
            padding: 10px 15px 10px 50px;
            margin-left: 32px;
            flex-shrink: 1;
            width: auto;
            box-sizing: border-box;
        }
    }
    
    .pagos-text,
    .tramites-text {
        line-height: 1.25;
    }
    
    .pagos-line1,
    .pagos-line2,
    .tramites-line1,
    .tramites-line2 {
        font-size: 14px;
    }
    
    .pagos-line2,
    .tramites-line2 {
        padding-left: 4px;
    }
    
    .header-container {
        flex-wrap: wrap;
        gap: 20px;
        padding: 0 25px;
    }
    
    .main-nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }
    
    .nav-list {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .hero {
        height: 100vh;
        min-height: 100vh;
    }
    
    /* Ajustar imagen hero para tablets */
    .hero-image {
        object-position: center center;
    }
    
    .hero-social {
        left: 20px;
        top: 80%;
    }
    
    .social-icon {
        width: 45px;
        height: 45px;
        font-size: 22px;
        padding: 7px;
    }
    
    .social-icon-img {
        width: 100%;
        height: 100%;
    }
    
    .services-bar {
        padding: 45px 30px;
    }
    
    .services-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    
    .news-section,
    .portfolio-section {
        padding: 60px 30px;
    }
    
    .section-title,
    .portfolio-title {
        font-size: 40px;
    }
    
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .news-image-container {
        height: 180px;
    }
    
    .news-content {
        padding: 18px 22px 22px;
    }
    
    .news-title {
        font-size: 17px;
    }
    
    .btn-primary {
        padding: 11px 25px;
        font-size: 15px;
    }
    
    .portfolio-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .portfolio-image-container {
        height: 400px;
    }
    
    .portfolio-image-text {
        padding: 25px;
    }

    /* Promo Slider */
    .promo-slider-section {
        padding: 60px 30px;
    }

    .promo-slide-title {
        font-size: 40px;
    }

    .promo-slide-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .promo-slide-image-container {
        height: 350px;
    }

    .promo-slide-image-overlay {
        padding: 25px;
    }
    
    .btn-secondary {
        padding: 13px 28px;
        font-size: 15px;
    }
    
    .main-footer {
        padding: 55px 30px;
    }
    
    .footer-logo-central {
        margin-bottom: 30px;
    }
    
    .footer-logo-img {
        max-width: 100px;
    }
    
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .footer-title {
        font-size: 24px;
    }
    
    .footer-text p {
        font-size: 15px;
    }
}

/* ============================================
   MÓVILES GRANDES Y TABLETS PEQUEÑAS
   Breakpoint: max-width: 768px and min-width: 481px
   ============================================ */
@media (max-width: 768px) and (min-width: 481px) {
    .top-bar-container,
    .header-container {
        padding: 0 20px;
    }
    
    .gov-logo {
        height: 16px;
    }
    
    .header-wrapper {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0 20px;
        position: relative;
    }
    
    .main-header {
        top: 35px;
        padding: 12px 0;
    }
    
    /* Ocultar menú normal en tablets/móviles */
    .nav-bar-white {
        display: none;
    }
    
    /* Mostrar botón hamburguesa - Posicionado a la derecha del header */
    .hamburger-menu-btn {
        display: flex;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        z-index: 10001;
        margin-left: 0;
        width: 48px;
        height: 48px;
    }
    
    .hamburger-line {
        width: 22px;
        height: 3.5px;
    }
    
    .hamburger-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .hamburger-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    
    .header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .pagos-section {
        order: 2;
        width: 100%;
        justify-content: flex-start;
        margin-right: 0;
        margin-bottom: 0;
        display: flex;
        visibility: visible;
        opacity: 1;
    }
    
    .tramites-section {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 0;
        display: flex;
        visibility: visible;
        opacity: 1;
    }
    
    .btn-pse-circle,
    .btn-tramites-circle {
        left: 0;
        position: relative;
        transform: none;
        top: auto;
        margin-right: -25px;
        z-index: 10;
    }
    
    .pse-logo-container {
        width: 45px;
        height: 45px;
    }
    
    .pse-logo-img {
        width: 45px;
        height: 45px;
    }
    
    .tramites-logo-container {
        width: 45px;
        height: 45px;
    }
    
    .pagos-text,
    .tramites-text {
        line-height: 1.3;
    }
    
    .pagos-line2,
    .tramites-line2 {
        padding-left: 4px;
    }
    
    .tramites-logo-img {
        width: 35px;
        height: 35px;
    }
    
    .pagos-line1,
    .pagos-line2,
    .tramites-line1,
    .tramites-line2 {
        font-size: 13px;
    }
    
    .pagos-section,
    .tramites-section {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .pagos-banner,
    .tramites-banner {
        flex: 0 1 auto;
        padding: 10px 15px 10px 50px;
        clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
        margin-left: 30px;
        min-width: 200px;
        max-width: calc(100vw - 120px);
        width: auto;
        white-space: nowrap;
        box-sizing: border-box;
    }
    
    /* Asegurar que el rango 600-800px tenga prioridad sobre 768px */
    @media (max-width: 800px) and (min-width: 600px) {
        .pagos-banner,
        .tramites-banner {
            margin-left: 35px;
            max-width: calc(100vw - 180px);
        }
        
        .hero-social {
            left: 25px;
            top: 90%;
            transform: none; /* Eliminar transform para control preciso */
        }
    }
    
    .pagos-line1,
    .pagos-line2,
    .tramites-line1,
    .tramites-line2 {
        font-size: 13px;
    }
    
    .hero {
        height: 100vh;
        min-height: 100vh;
    }
    
    /* Ajustar imagen hero para tablets pequeñas */
    .hero-image {
        object-position: center center;
    }
    
    .hero-social {
        left: 20px;
        top: 90%;
        transform: none; /* Eliminar transform para control preciso */
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
        padding: 6px;
    }
    
    .social-icon-img {
        width: 100%;
        height: 100%;
    }
    
    .services-bar {
        padding: 40px 20px;
    }
    
    .services-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .news-section,
    .portfolio-section {
        padding: 50px 20px;
    }
    
    .section-title,
    .portfolio-title {
        font-size: 32px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .news-image-container {
        height: 200px;
    }
    
    .news-content {
        padding: 18px 20px 20px;
    }
    
    .news-card .news-title {
        font-size: 20px;
    }
    
    .news-card .news-description {
        font-size: 15px;
    }
    
    .btn-primary {
        padding: 11px 25px;
        font-size: 15px;
    }
    
    .portfolio-description {
        font-size: 17px;
    }
    
    .portfolio-image-container {
        height: 350px;
    }
    
    .portfolio-image-text {
        padding: 20px;
    }
    
    .portfolio-buttons {
        flex-direction: column;
        gap: 15px;
    }

    /* Promo Slider */
    .promo-slider-section {
        padding: 50px 20px;
    }

    .promo-slide-title {
        font-size: 32px;
    }

    .promo-slide-description {
        font-size: 17px;
    }

    .promo-slide-image-container {
        height: 300px;
    }

    .promo-slide-image-overlay {
        padding: 20px;
    }

    .promo-slide-highlight {
        font-size: 40px;
    }

    .promo-slide-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-secondary {
        padding: 13px 28px;
        font-size: 15px;
    }
    
    .main-footer {
        padding: 50px 20px;
    }
    
    .footer-logo-central {
        margin-bottom: 30px;
    }
    
    .footer-logo-img {
        max-width: 90px;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    
    .footer-title {
        font-size: 22px;
    }
    
    .footer-text p {
        font-size: 15px;
    }
}

/* ============================================
   MÓVILES PEQUEÑOS
   Breakpoint: max-width: 480px
   ============================================ */
@media (max-width: 480px) {
    /* Top Bar */
    .top-bar {
        height: 40px;
        font-size: 12px;
    }
    
    .top-bar-container {
        padding: 0 15px;
    }
    
    .gov-logo {
        height: 14px;
    }
    
    /* Header */
    .logo-text h1 {
        font-size: 12px;
    }
    
    .logo-img {
        width: 40px;
        height: 40px;
    }
    
    .btn-white {
        padding: 8px 15px;
        font-size: 12px;
    }
    
    .btn-white .btn-text {
        display: none;
    }
    
    .main-header {
        top: 40px;
        padding: 10px 0;
    }
    
    .header-wrapper {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 0 15px;
        position: relative;
    }
    
    .header-container {
        padding: 0 15px;
        overflow: visible;
    }
    
    /* Ocultar menú normal en móviles */
    .nav-bar-white {
        display: none;
    }
    
    /* Mostrar botón hamburguesa - Posicionado a la derecha del header */
    .hamburger-menu-btn {
        display: flex;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        width: 46px;
        height: 46px;
        z-index: 10001;
        margin-left: 0;
    }
    
    .hamburger-line {
        width: 20px;
        height: 3px;
    }
    
    .hamburger-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    
    .hamburger-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
    
    /* Ajustar menú móvil para pantallas pequeñas */
    .mobile-menu-overlay {
        max-width: 280px;
    }
    
    .mobile-nav-link {
        font-size: 15px;
        padding: 16px 18px;
    }
    
    .pagos-section {
        order: 2;
        width: 100%;
        justify-content: flex-start;
        margin-right: 0;
        margin-bottom: 0;
        display: flex;
        visibility: visible;
        opacity: 1;
    }
    
    .tramites-section {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 0;
        display: flex;
        visibility: visible;
        opacity: 1;
    }
    
    .btn-pse-circle,
    .btn-tramites-circle {
        left: 0;
        position: relative;
        transform: none;
        top: auto;
        margin-right: -20px;
        z-index: 10;
    }
    
    .pse-logo-container {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .pse-logo-img {
        width: 40px;
        height: 40px;
    }
    
    .tramites-logo-container {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .pagos-text,
    .tramites-text {
        line-height: 1.4;
    }
    
    .pagos-line2,
    .tramites-line2 {
        padding-left: 3px;
    }
    
    .tramites-logo-img {
        width: 30px;
        height: 30px;
    }
    
    .pagos-section,
    .tramites-section {
        width: 100%;
        margin-bottom: 6px;
    }
    
    .pagos-banner,
    .tramites-banner {
        padding: 8px 12px 8px 40px;
        clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%);
        margin-left: 25px;
        font-size: 12px;
        min-width: 200px;
        max-width: calc(100vw - 100px);
        width: auto;
        white-space: nowrap;
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    
    .pagos-line1,
    .pagos-line2,
    .tramites-line1,
    .tramites-line2 {
        font-size: 11px;
    }
    
    /* Hero */
    .hero {
        height: 100vh;
        min-height: 100vh;
    }
    
    /* Ajustar imagen hero para móviles - centrar y asegurar que se vea bien */
    .hero-image {
        object-position: center center;
        object-fit: cover;
    }
    
    .hero-social {
        left: 15px;
        top: 85%;
        transform: none; /* Eliminar transform para control preciso */
    }
    
    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 18px;
        padding: 5px;
    }
    
    .social-icon-img {
        width: 100%;
        height: 100%;
    }
    
    .hero-carousel-dots {
        bottom: 20px;
        gap: 8px;
    }
    
    .carousel-dot {
        width: 10px;
        height: 10px;
    }
    
    .carousel-dot.active {
        width: 12px;
        height: 12px;
    }
    
    /* Services */
    .services-bar {
        padding: 30px 15px;
    }
    
    .services-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .service-icon {
        width: 70px;
        height: 70px;
    }
    
    .service-title {
        font-size: 13px;
    }
    
    /* News Section */
    .news-section {
        padding: 40px 15px;
    }
    
    .section-title {
        font-size: 24px;
        margin-bottom: 25px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .news-image-container {
        height: 180px;
    }
    
    .news-content {
        padding: 15px;
    }
    
    .news-card {
        padding: 15px;
    }
    
    .news-date {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    .news-card .news-title {
        font-size: 18px;
        margin: 12px 0;
    }
    
    .news-card .news-description {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .btn-primary {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Portfolio */
    .portfolio-section {
        padding: 40px 15px;
    }
    
    .portfolio-title {
        font-size: 24px;
    }
    
    .portfolio-description {
        font-size: 16px;
    }
    
    .portfolio-image-container {
        height: 300px;
    }
    
    .portfolio-image-text {
        padding: 15px;
    }
    
    .portfolio-buttons {
        gap: 15px;
    }

    /* Promo Slider */
    .promo-slider-section {
        padding: 40px 15px;
    }

    .promo-slide-title {
        font-size: 24px;
    }

    .promo-slide-description {
        font-size: 16px;
    }

    .promo-slide-image-container {
        height: 260px;
    }

    .promo-slide-highlight {
        font-size: 32px;
    }

    .promo-slide-buttons {
        gap: 12px;
    }

    .promo-slider-dots {
        margin-top: 25px;
        gap: 8px;
    }
    
    .btn-secondary {
        padding: 12px 25px;
        font-size: 14px;
    }
    
    /* Footer */
    .main-footer {
        padding: 40px 15px;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-title {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .footer-text p {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 6px;
    }
    
    .footer-text p strong {
        font-size: 16px;
    }
    
    .footer-note {
        font-size: 12px;
    }
}