/* ========================================
   RESPONSIVE MOBILE CSS
   Only for portrait orientation (vertical)
   ======================================== */

/* === MOBILE PORTRAIT (hasta 767px) === */
@media only screen and (max-width: 767px) and (orientation: portrait) {
html body:has(.dropdown-hover:hover) header.header-hover-transparent {
        background-color: white !important;
    }
        #init--hero--effect{
            width: calc(100% - 30px) !important;
            margin: 90px auto 0px;
        }
    /* === TIPOGRAFÍA === */
    /* Font sizes ahora manejados con clamp() en styles.css */
    body .navbar-toggler{
        color: black;
        border-color: black;
        box-shadow: initial !important;
        position: relative;
        width: 40px;
        height: 40px;
        border: 2px solid black;
        border-radius: 8px;
        background: transparent;
        transition: all 0.3s ease;
    }

    body .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }

    /* Ocultar el icono default de Bootstrap */
    .navbar-toggler-icon {
        display: none;
    }

    /* Crear hamburger custom */
    .navbar-toggler::before,
    .navbar-toggler::after,
    .navbar-toggler span {
        content: '';
        position: absolute;
        width: 20px;
        height: 2px;
        background-color: black;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .navbar-toggler::before {
        top: 11px;
    }

    .navbar-toggler span {
        top: 19px;
        opacity: 1;
    }

    .navbar-toggler::after {
        top: 27px;
    }

    /* Estado abierto - convertir a X */
    .navbar-toggler[aria-expanded="true"]::before {
        top: 19px;
        transform: translateX(-50%) rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] span {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }

    .navbar-toggler[aria-expanded="true"]::after {
        top: 19px;
        transform: translateX(-50%) rotate(-45deg);
    }

    .navbar-toggler[aria-expanded="true"] {
        border-color: black;
    }

    /* === NAVEGACIÓN === */
    .navbar {
        padding: 0.5rem 0;
    }

    .nav-link {
        padding: 0.5rem .5rem !important;
        border-radius: 0px !important;
    }
        .nav-item.dropdown-hover:not(.active) .nav-link:hover,
.nav-item.dropdown-hover:not(.active) .dropdown-hover:hover>.nav-link {
    color: #000 !important;
    background-color: transparent;
}
.dropdown-header{
    display: none !important;
}
.nav-item.dropdown-hover:not(.active) .dropdown-icon {
    transform: rotate(0deg);
}
    .navbar-brand img {
        max-width: 50px;
    }

    /* Animación suave del collapse del navbar */
    .navbar-collapse {
        transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .navbar-collapse.show {
        min-height: 100vh;
    }

    .navbar-collapse.collapsing {
        transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Animación de los nav-items al aparecer */
    .navbar-collapse .nav-item {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .navbar-collapse.show .nav-item {
        opacity: 1;
        transform: translateY(0);
    }

    /* Delay escalonado para nav-items */
    .navbar-collapse.show .nav-item:nth-child(1) {
        transition-delay: 0.05s;
    }

    .navbar-collapse.show .nav-item:nth-child(2) {
        transition-delay: 0.1s;
    }

    .navbar-collapse.show .nav-item:nth-child(3) {
        transition-delay: 0.15s;
    }

    .navbar-collapse.show .nav-item:nth-child(4) {
        transition-delay: 0.2s;
    }

    .navbar-collapse.show .nav-item:nth-child(5) {
        transition-delay: 0.25s;
    }

    .navbar-collapse.show .nav-item:nth-child(6) {
        transition-delay: 0.3s;
    }

    .navbar-collapse.show .nav-item:nth-child(7) {
        transition-delay: 0.35s;
    }

    /* Botón GIVE */
    .navbar-collapse .d-flex {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
    }

    .navbar-collapse.show .d-flex {
        opacity: 1;
        transform: translateY(0);
    }

    /* Cerrar mega-dropdowns por defecto en mobile */
    .dropdown-hover .mega-dropdown {
        display: block;
        position: relative;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transform: translateY(-10px);
        margin-top: 0;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease,
                    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    margin-top 0.3s ease,
                    visibility 0s linear 0.3s;
    }

    /* Mostrar cuando esté activo */
    .dropdown-hover.active .mega-dropdown {
        max-height: 1000px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        margin-top: 0.5rem;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.4s ease 0.1s,
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
                    margin-top 0.3s ease,
                    visibility 0s linear 0s;
    }

    /* Eliminar hover en mobile */
    .dropdown-hover:hover .mega-dropdown {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
    }

    .dropdown-hover.active:hover .mega-dropdown {
        max-height: 1000px;
        opacity: 1;
        visibility: visible;
    }

    /* Ajustar contenido del mega dropdown */
    .mega-dropdown-content {
        grid-template-columns: 1fr;
        background: #f8f9fa;
        border-radius: 0.75rem;
        padding: 0px 1rem;
    }

    /* Ocultar imágenes en mobile */
    .mega-dropdown-image {
        display: none !important;
    }
.mega-dropdown-column:first-child {
    padding: 0.5rem;
}
    /* Ajustar header del dropdown */
    .dropdown-header {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #dee2e6;
    }

    /* Ajustar items del dropdown */
    .dropdown-item {
        padding: 0.625rem 0;
        font-size: 0.875rem;
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Animar items cuando el dropdown está activo */
    .dropdown-hover.active .dropdown-item {
        opacity: 1;
        transform: translateX(0);
    }

    /* Delay escalonado para cada item */
    .dropdown-hover.active .dropdown-item:nth-child(1) {
        transition-delay: 0.1s;
    }

    .dropdown-hover.active .dropdown-item:nth-child(2) {
        transition-delay: 0.15s;
    }

    .dropdown-hover.active .dropdown-item:nth-child(3) {
        transition-delay: 0.2s;
    }

    .dropdown-hover.active .dropdown-item:nth-child(4) {
        transition-delay: 0.25s;
    }

    .dropdown-hover.active .dropdown-item:nth-child(5) {
        transition-delay: 0.3s;
    }

    /* Animar también el header */
    .dropdown-hover .dropdown-header {
        opacity: 0;
        transform: translateY(-5px);
        transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
    }

    .dropdown-hover.active .dropdown-header {
        opacity: 1;
        transform: translateY(0);
    }

    /* === HERO SECTION === */
    .height-70 {
        height: 85vh;
    }

    .floating--content--hero {
        bottom: 0px;
        position: relative;
        padding: 0 !important;
        margin-top: 40px;
    }

    .tobtn {
        display: flex;  
        width: 100%;
        justify-content: space-between;
    }

    .tobtn .btn {
        width: auto;
        margin: 0 !important;
        justify-content: center;
        letter-spacing: 0;
    }

    /* === BOTONES === */
    /* Font sizes ahora manejados con clamp() en styles.css */

    .btn.btn-small span.btn-text {
        padding: 0.375rem 1rem;
        font-size: 11px;
    }

    .btn.btn-small .arrow-circle {
        width: 32px;
        height: 32px;
    }

    .btn-black-circle .arrow-circle,
    .btn-transparent-black-circle .arrow-circle,
    .btn-yellow-circle .arrow-circle {
        width: 36px !important;
        height: 36px !important;
    }
    .content--recent-sermon{
        width: 100%;
    }
    /* === RECENT SERMON === */
    .card--recent-sermon {
        flex-direction: column;
        padding: 2rem 0rem;
        margin-top: 10px;
    }
        .container.video--hero{
            max-height: 50vh;
        }
    .card--recent-sermon img,
    .img--recent-sermon {
        width: calc(100% - 0px);
        height: 40vh;
    }
    h2.footer-title{
        font-size: 27px !important;
    }
    h2.footer-title br{display: none;}

    /* === EVENTOS SLIDER === */
    .carousel--events .pantry-item {
        width: 90% !important;
        min-width: 280px;
    }

    .carousel--events .pantry-title {
        margin-bottom: 0.625rem;
    }

    .slider-btn {
        width: 40px;
        height: 40px;
    }

    /* === GIVE SECTION === */
    .give--animations {
        flex-direction: column;
        padding: 2rem 1.5rem;
        padding-bottom: 3rem;
    }

    .GA--left-column {
        width: 100%;
        text-align: center;
    }

    .CicleTexture {
        width: 60%;
        margin: 1rem auto;
    }

    .website--url {
        width: 100%;
        text-align: center !important;
        justify-content: center;
        align-items: center;
        bottom: 0;
    }

    .website--url h5 {
        margin-bottom: 1.5rem !important;
    }

    .PicPhone {
        position: relative;
        width: 60%;
        margin: 2rem auto;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2rem;
    }

    .Home-Give-CircleText {
        display: none; /* Ocultar en mobile */
    }

    /* === CAMPUS CARDS === */
    .campus-list {
        gap: 1rem;
    }

    .campus-list li {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .campus-label {
        padding: 0.25rem 0.5rem;
        top: 0.75rem;
        left: 0.75rem;
    }
    .card--recent-sermon{
        padding: 50px 15px;
    }
    #ondemand .card--recent-sermon{
        background: #f2f2f2 !important;
    }
    .campus-title {
        transform: translateY(0rem) !important;
    }
        body .campus-card .campus-info {
            opacity: 1;
            transform: translateY(0);
        }
    /* === GROUP UP SECTION === */
    .card--recent-sermon.mt-90 {
        margin-top: 3rem !important;
    }

    /* === RESOURCES CARDS === */
    .cards__wrap {
        flex-direction: column;
    }

    .card--lg {
        min-height: 320px;
    }

    .card--sm {
        min-height: 180px;
    }

    .card__content {
        padding: 1.5rem;
    }

    .row--2 {
        flex-direction: column;
    }

    /* === FOOTER === */
    .footer-panel {
        padding: 2rem 1.5rem 1rem;
        border-radius: 1rem;
    }

    .footer-top {
        flex-direction: column;
        gap: 0;
    }

    .footer-brand {
        margin-bottom: 2rem;
        text-align: center;
    }

    .footer-logo img {
        max-width: 80px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    /* Footer Accordion */
    .footer-col {
        min-width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 1.25rem 0;
    }

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

    .footer-heading {
        margin-bottom: 0;
        cursor: pointer;
        position: relative;
        padding-right: 2.5rem;
        user-select: none;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .footer-heading:active {
        color: #F1E632;
    }

    /* Icono de acordeón - Horizontal bar */
    .footer-heading::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.7);
        transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Icono de acordeón - Vertical bar */
    .footer-heading::before {
        content: '';
        position: absolute;
        right: 7px;
        top: 50%;
        transform: translateY(-50%) scaleY(1);
        width: 2px;
        height: 16px;
        background-color: rgba(255, 255, 255, 0.7);
        transform-origin: center center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Cuando está activo */
    .footer-col.active .footer-heading {
        color: #F1E632;
    }

    .footer-col.active .footer-heading::after {
        background-color: #F1E632;
    }

    .footer-col.active .footer-heading::before {
        transform: translateY(-50%) scaleY(0);
        background-color: #F1E632;
    }

    /* Ocultar links por defecto */
    .footer-col .footer-link {
        display: none;
        margin: 0;
        padding: 0.625rem 0;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
    }

    /* Mostrar links cuando está activo */
    .footer-col.active .footer-link {
        display: block;
        opacity: 1;
        max-height: 100px;
        animation: slideDown 0.3s ease forwards;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Primer link con margen superior */
    .footer-col.active .footer-link:first-of-type {
        padding-top: 1rem;
    }

    /* Último link con padding inferior */
    .footer-col.active .footer-link:last-of-type {
        padding-bottom: 0;
    }

    .footer-hero {
        margin-top: 2.5rem;
        flex-direction: column;
        align-items: center;
        text-align: left;
        gap: 1.5rem;
    }

    .footer-title {
        line-height: 1.1;
    }

    .footer-cta {
        width: 100%;
        display: flex;
    }

    .footer-btn {
        padding: 0.875rem 1.5rem;
        width: auto;
    }

    .footer-btn__icon {
        width: 32px;
        height: 32px;
    }

    .footer-bottom {
        margin-top: 1.5rem;
    }

    .footer-bottom__meta {
        justify-content: center;
    }

    /* === UTILITIES === */
    .mb-40,
    .mb-50,
    .mb-60 {
        margin-bottom: 2rem !important;
    }

    .mt-40,
    .mt-50,
    .mt-60 {
        margin-top: 1rem !important;
    }
.dropdown-hover {
    position: static;
    padding: 5px 0px;
    border-bottom: 1px solid #d0d0d0;
}
    .mb-80,
    .mb-90,
    .mb-100 {
        margin-bottom: 2rem !important;
    }

    .py-120 {
        padding: 2rem 0 !important;
    }

    .pt-120 {
        padding-top: 3rem !important;
    }

    body .cards__wrap,
    body .row--2,
    body .col{
        gap: 10px;
    }
    #init--hero--effect h3{font-size: 16px;}
    .pb-120 {
        padding-bottom: 3rem !important;
    }

    /* === CONTAINER === */
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* === TEXT ALIGNMENT === */
    .text-right {
        text-align: left !important;
        margin-top: 40px;
    }

    /* === DROPDOWN === */
    .dropdown-backdrop {
        display: none;
    }
        .carousel--events {
            padding: 0px 0;
            overflow: visible;
        }
    .mega-dropdown {
        position: relative;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mega-dropdown-content {
        grid-template-columns: 1fr;
    }

    .mega-dropdown-image {
        display: none;
    }
}

/* === TABLET PORTRAIT (768px - 991px) === */
@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {

    /* Font sizes ahora manejados con clamp() en styles.css */

    .carousel--events .pantry-item {
        width: 45%;
    }

    .campus-list li {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .cards__wrap {
        flex-direction: column;
    }

    .give--animations {
        padding: 3rem 2rem;
    }

    .PicPhone {
        width: 40%;
    }
}