/* 
    ======================================
    OXQUIM - RESPONSIVE CSS (MOBILE FIRST)
    ======================================
*/

/* O grid padrão já usa auto-fill e minmax para os segmentos.
   Aqui tratamos detalhes específicos como Header, Footer e margens */

/* =======================================
   TABLET (Máximo 992px)
   ======================================= */
@media (max-width: 992px) {

    /* Header & Navigation */
    .header-container {
        height: 70px;
    }

    .logo img {
        height: 45px;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .nav-menu {
        position: fixed;
        top: 90px;
        right: 24px;
        left: 24px;
        width: auto;
        max-width: none;
        height: auto;
        max-height: calc(100vh - 120px);
        background: #ffffff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
        padding: 20px;
        overflow-y: auto;
        border-radius: 28px;
        backdrop-filter: blur(22px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px) scale(0.98);
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .nav-list {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: var(--space-md);
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 16px 18px;
        font-size: 1rem;
        text-align: center;
        letter-spacing: 0;
        border-bottom: none;
        background: #ffffff;
        border-radius: 999px;
    }

    .nav-dropdown-toggle {
        position: relative;
    }

    .nav-dropdown-toggle .nav-icon {
        position: absolute;
        right: 18px;
    }

    .nav-link::after {
        display: none;
    }

    .nav-link:hover,
    .nav-link.active:not(.btn-contato) {
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(17, 28, 68, 0.06);
    }

    .btn-contato {
        margin-left: 0;
        text-align: center;
        justify-content: center;
        color: var(--color-white);
        background: linear-gradient(135deg, #153f8a 0%, #2b67b8 100%);
        border-radius: 999px;
    }

    .btn-contato:hover,
    .btn-contato:focus,
    .btn-contato:focus-visible {
        color: var(--color-white);
        background: linear-gradient(135deg, #0f3474 0%, #245aa4 100%);
    }

    .btn-contato:active,
    .btn-contato.active {
        color: var(--color-white);
        background: linear-gradient(135deg, #0c2b63 0%, #1d4f96 100%);
    }

    /* Submenu em Mobile: Funciona como Accordion */
    .dropdown {
        position: static;
        width: 100%;
        max-height: 320px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        padding-left: 0;
        border-top: none;
        border-left: none;
        margin-top: 10px;
        background: #ffffff;
        border-radius: 18px;
        padding: 8px;
    }

    .has-dropdown.active .dropdown {
        display: block;
    }

    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown,
    .has-dropdown.active .dropdown {
        transform: none;
    }

    .dropdown a {
        text-align: center;
        padding: 12px 14px;
        border-radius: 999px;
    }

    /* Hero */
    .oxq-hero {
        min-height: auto;
        height: auto;
        padding: 112px 0 64px;
    }

    .oxq-hero__inner,
    .oxq-hero__carousel,
    .oxq-hero__track {
        height: auto;
        min-height: 0;
    }

    .oxq-hero__carousel {
        padding: 0;
    }

    .oxq-hero__frame {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: auto;
        width: 100%;
        padding: 28px 24px 0;
    }

    .oxq-hero__copy {
        padding: 12px 4px 0;
    }

    .oxq-hero__media {
        min-height: clamp(320px, 44vw, 420px);
        height: clamp(320px, 44vw, 420px);
        order: -1;
    }

    .oxq-hero__title {
        max-width: 12ch;
    }

    .oxq-hero__nav {
        top: auto;
        bottom: 134px;
        transform: none;
    }

    .oxq-hero__nav--prev {
        left: 20px;
    }

    .oxq-hero__nav--next {
        right: 20px;
    }

    .oxq-hero__footer {
        grid-template-columns: auto;
        justify-items: center;
        gap: 10px;
        width: fit-content;
        max-width: calc(100% - 48px);
        margin-top: 18px;
        padding: 10px 14px;
    }

    .sobre-grid {
        padding: 36px;
    }

    .social-section .container>div {
        grid-template-columns: 1fr !important;
    }

    .social-section .container>div>div {
        padding: 28px;
    }

    .social-instagram-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .social-events-grid {
        grid-template-columns: 1fr !important;
    }

    .social-event-card {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .presenca-section .container {
        padding-top: 44px;
        padding-bottom: 44px;
        border-radius: 28px;
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .footer-col-units {
        grid-column: 1 / -1;
    }

    .footer-units {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =======================================
   SMARTPHONE (Máximo 768px)
   ======================================= */
@media (max-width: 768px) {
    h2.section-title {
        font-size: 1.8rem;
    }

    .oxq-hero {
        padding: 96px 0 40px;
    }

    .oxq-hero__grid {
        background-size: 48px 48px;
    }

    .oxq-hero__carousel {
        padding-bottom: 20px;
    }

    .oxq-hero__frame {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        padding: 16px 16px 0;
        align-items: start;
    }

    .oxq-hero__copy {
        order: 2;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 2px 4px;
    }

    .oxq-hero__title {
        max-width: none;
        font-size: clamp(2.05rem, 8.4vw, 2.8rem);
    }

    .oxq-hero__description {
        font-size: 0.96rem;
    }

    .oxq-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    .oxq-hero__actions .btn {
        width: 100%;
    }

    .oxq-hero__media {
        order: 1;
        width: 100%;
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 11;
        max-height: min(42vh, 320px);
        border-radius: 22px;
    }

    .oxq-hero__media::after {
        inset: 12px;
        border-radius: 16px;
    }

    .oxq-hero__nav {
        position: absolute;
        top: 180px;
        bottom: auto;
        transform: translateY(-50%);
        width: 46px;
        height: 46px;
        z-index: 4;
    }

    .oxq-hero__nav--prev {
        left: 12px;
    }

    .oxq-hero__nav--next {
        right: 12px;
    }

    .oxq-hero__footer {
        width: 100%;
        max-width: none;
        margin-top: 0;
        padding: 10px 12px;
        border-radius: 22px;
    }

    .oxq-hero__counter strong {
        font-size: 1rem;
    }

    .footer-units {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }


    .sobre-grid {
        padding: 28px 22px;
        border-radius: 24px;
    }

    .segmento-card {
        border-radius: 20px;
    }

    .social-section .container>div>div {
        padding: 22px;
        border-radius: 22px;
    }

    .social-section .container>div>div:first-child>div {
        grid-template-columns: 1fr !important;
    }

    .social-instagram-grid {
        grid-template-columns: 1fr !important;
    }

    .social-event-card,
    .social-event-card-featured {
        grid-template-columns: 1fr;
    }

    .social-event-image {
        min-height: 200px;
    }

    .social-event-copy {
        padding: 20px;
    }

    .gptw-section .container>div {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .presenca-section .container {
        padding-top: 32px;
        padding-bottom: 32px;
        border-radius: 22px;
    }

    .tab-btn {
        width: 100%;
    }

    .unidade-card {
        padding: 22px;
        border-radius: 20px;
    }

    /* Sobre Grid */
    .sobre-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sobre-grid .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .sobre-img-container {
        order: -1;
        /* Imagem por cima em mobile */
    }

    /* Contato Grid */
    .contato-grid {
        grid-template-columns: 1fr;
    }

    .flex-group {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        text-align: left;
    }

    .footer-col {
        margin-bottom: var(--space-sm);
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .footer-col:last-child {
        border-bottom: none;
    }

    .footer-logo {
        max-width: 160px;
    }

    .footer-col-units {
        grid-column: auto;
    }

    .social-links {
        justify-content: flex-start;
    }

    .footer-units {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .footer-col ul li {
        font-size: 0.9rem;
    }
}

/* =======================================
   SOBRE PAGE
   ======================================= */
@media (max-width: 992px) {
    .page-shell,
    .form-basico,
    .event-card-body {
        padding: 28px;
    }

    .form-grid-two {
        grid-template-columns: 1fr;
    }

    .sac-contact-grid {
        grid-template-columns: 1fr;
    }

    .event-grid {
        grid-template-columns: 1fr;
    }

    .about-hero {
        min-height: auto;
        padding: 108px 0 38px;
    }

    .about-hero-layout,
    .quality-grid,
    .about-foundations-grid,
    .licenses-panel,
    .about-cta-card {
        grid-template-columns: 1fr;
    }

    .about-hero-copy h1 {
        max-width: none;
    }

    .about-hero-brand {
        justify-content: center;
    }

    .about-hero-copy,
    .about-hero-text {
        max-width: none;
        margin: 0 auto;
        text-align: center;
        align-items: center;
    }

    .about-hero-logos {
        width: min(100%, 360px);
        margin: 0 auto;
    }

    .unidades-tabs {
        width: 100%;
        border-radius: 24px;
    }

    .unidade-content {
        padding: 24px;
    }

    .timeline-entry {
        border-radius: 24px;
    }

    .timeline-period {
        padding: 24px;
        border-radius: 28px;
    }

    .timeline-period-header {
        grid-template-columns: 1fr;
    }

    .timeline-period-logo-card {
        min-height: auto;
    }

    .timeline-period-logo {
        width: min(100%, 220px);
    }

    .units-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .certifications-grid {
        grid-template-columns: 1fr;
    }

    .license-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: 110px 0 56px;
    }

    .error-hero {
        padding: 104px 0 62px;
    }

    .error-hero-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .error-status-panel {
        min-height: 220px;
    }

    .error-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #historia,
    #mvv,
    #licencas,
    #unidades {
        scroll-margin-top: 92px;
    }

    .page-shell,
    .panel-card,
    .form-basico,
    .sac-panel,
    .event-card-body {
        padding: 22px;
        border-radius: 22px;
    }

    .sac-panel-intro {
        margin-bottom: 28px;
    }

    .sac-contact-grid {
        gap: 24px;
    }

    .sac-contact-card .sac-number {
        justify-content: flex-start;
    }

    .contact-box,
    .segmento-placeholder,
    .event-card {
        border-radius: 22px;
    }

    .catalog-search {
        max-width: none;
    }

    .about-hero {
        padding: 94px 0 30px;
    }

    .about-hero-logos {
        width: min(100%, 300px);
    }

    .quality-card,
    .about-cta-card,
    .foundation-card,
    .unit-card,
    .certification-card {
        padding: 24px;
        border-radius: 22px;
    }

    .timeline-entry-body,
    .licenses-panel {
        border-radius: 22px;
    }

    .timeline-period {
        padding: 20px;
        border-radius: 24px;
    }

    .timeline-periods {
        gap: 22px;
    }

    .timeline-period-header {
        gap: 18px;
        margin-bottom: 20px;
    }

    .timeline-period-copy h3 {
        font-size: 1.35rem;
    }

    .timeline-period-logo-card {
        padding: 18px;
        border-radius: 22px;
    }

    .timeline-period-logo {
        width: min(100%, 200px);
    }

    .timeline-toggle {
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 18px 16px 18px 20px;
    }

    .timeline-toggle-icon {
        grid-column: 2 / 3;
        grid-row: 1 / span 2;
        align-self: center;
        width: 52px;
        height: 52px;
    }

    .timeline-toggle .timeline-year {
        grid-column: 1 / 2;
        width: fit-content;
        margin-bottom: 0;
    }

    .timeline-toggle-title {
        grid-column: 1 / 2;
        font-size: 1rem;
    }

    .quality-card-stacked,
    .unidade-content {
        padding: 22px;
        border-radius: 22px;
    }

    .tab-btn {
        width: 100%;
    }

    .social-links-left,
    .catalog-toolbar {
        justify-content: center;
    }

    .units-grid {
        grid-template-columns: 1fr;
    }

    .certification-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .license-logos {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .license-logos img {
        max-height: 96px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .error-hero {
        padding: 82px 0 46px;
    }

    .error-hero-copy h1 {
        font-size: clamp(2.35rem, 13vw, 3.4rem);
    }

    .error-actions,
    .error-actions .btn {
        width: 100%;
    }

    .error-actions .btn {
        justify-content: center;
    }

    .error-status-panel {
        min-height: 170px;
        padding: 24px;
        border-radius: 22px;
    }

    .error-status-panel p {
        max-width: 210px;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
    }

    .error-links-grid {
        grid-template-columns: 1fr;
    }

    .error-link-card {
        min-height: 82px;
        padding: 18px;
    }
}