/* About Us — Guna cultural identity (complements Tailwind) */

.about-guna-page {
    --guna-earth: #3d1f0a;
    --guna-green: #11802b;
    --guna-jungle: #1a5c2e;
    --guna-sun: #ffb300;
    --guna-gold: #d4a017;
    --guna-cream: #f8f3ea;
    --guna-red: #c0392b;
    --soged-green: #28A745;
    --soged-yellow: #FFB300;
    --soged-orange: #FF6B35;
    --soged-blue: #00A3E0;
    --absolute-black: #000000;
    font-family: 'Quicksand', sans-serif;
    color: var(--absolute-black);
    background: linear-gradient(180deg, #fffef9 0%, var(--guna-cream) 35%, #f0faf4 100%);
    overflow-x: hidden;
}

/* Hero gradient + logo */
.about-hero-gradient {
    background: linear-gradient(165deg, #fffef9 0%, #f8f3ea 40%, rgba(40, 167, 69, 0.06) 70%, rgba(0, 163, 224, 0.05) 100%);
}

/* Hero — Guna / mola organic background (no grid) */
.about-hero-mola-bg {
    background-color: #fffef9;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0 30 L15 15 L30 30 L45 15 L60 30 L75 15 L90 30 L105 15 L120 30' fill='none' stroke='%23c0392b' stroke-opacity='0.055' stroke-width='2'/%3E%3Cpath d='M0 45 L15 30 L30 45 L45 30 L60 45 L75 30 L90 45 L105 30 L120 45' fill='none' stroke='%23ffb300' stroke-opacity='0.045' stroke-width='2'/%3E%3Cpath d='M0 15 L15 0 L30 15 L45 0 L60 15 L75 0 L90 15 L105 0 L120 15' fill='none' stroke='%2311802b' stroke-opacity='0.04' stroke-width='2'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 100% 70% at 50% -5%, rgba(255, 179, 0, 0.14) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 0% 85%, rgba(192, 57, 43, 0.09) 0%, transparent 52%),
        radial-gradient(ellipse 50% 40% at 100% 75%, rgba(17, 128, 43, 0.1) 0%, transparent 50%),
        linear-gradient(175deg, #fffef9 0%, #f8f3ea 55%, rgba(240, 250, 244, 0.9) 100%);
    background-size: 120px 60px, auto, auto, auto, auto;
}

.mola-stripe-accent {
    background: repeating-linear-gradient(
        90deg,
        var(--guna-red) 0,
        var(--guna-red) 16px,
        var(--guna-sun) 16px,
        var(--guna-sun) 32px,
        var(--guna-green) 32px,
        var(--guna-green) 48px,
        var(--guna-gold) 48px,
        var(--guna-gold) 64px
    );
    opacity: 0.75;
}

.about-mola-soft-bg {
    background-color: var(--guna-cream);
    background-image:
        radial-gradient(ellipse 70% 50% at 20% 30%, rgba(255, 179, 0, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 70%, rgba(192, 57, 43, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(17, 128, 43, 0.07) 0%, transparent 45%);
}

/* Centered logo — cinematic emerge from depth */
.about-logo-emerge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(160px, 24vw, 260px);
    margin-bottom: 1.5rem;
    perspective: 1200px;
}

.about-logo-emerge::before {
    content: '';
    position: absolute;
    width: clamp(100px, 18vw, 180px);
    height: clamp(100px, 18vw, 180px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 179, 0, 0.35) 0%, rgba(40, 167, 69, 0.15) 45%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
    animation: logoAuraExpand 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-logo-emerge::after {
    content: '';
    position: absolute;
    width: clamp(60px, 10vw, 100px);
    height: clamp(60px, 10vw, 100px);
    border-radius: 50%;
    border: 2px solid rgba(255, 179, 0, 0.25);
    z-index: 0;
    animation: logoRingBurst 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-hero-logo {
    position: relative;
    z-index: 2;
    height: clamp(96px, 16vw, 168px);
    width: auto;
    object-fit: contain;
    transform-origin: center center;
    animation: logoEmergeGrow 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity, filter;
}

@keyframes logoEmergeGrow {
    0% {
        transform: scale(0.04) translateZ(-280px);
        opacity: 0;
        filter: blur(48px) brightness(1.6);
    }
    20% {
        opacity: 0.15;
        filter: blur(32px) brightness(1.4);
    }
    45% {
        transform: scale(0.55) translateZ(-80px);
        opacity: 0.55;
        filter: blur(14px) brightness(1.15);
    }
    68% {
        transform: scale(1.1) translateZ(30px);
        opacity: 1;
        filter: blur(0) brightness(1.03);
    }
    82% {
        transform: scale(0.97) translateZ(0);
    }
    100% {
        transform: scale(1) translateZ(0);
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}

@keyframes logoAuraExpand {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    40% {
        opacity: 0.8;
    }
    100% {
        transform: scale(2.8);
        opacity: 0.35;
    }
}

@keyframes logoRingBurst {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-hero-logo {
        animation: none;
        opacity: 1;
        filter: none;
        transform: none;
    }
    .about-logo-emerge::before,
    .about-logo-emerge::after {
        animation: none;
    }
}

.about-section-warm {
    background: linear-gradient(180deg, rgba(255, 179, 0, 0.06) 0%, #fffef9 100%);
}

/* Alliance cards — mola top accent */
.about-alliance-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(61, 31, 10, 0.06);
}

.about-alliance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: repeating-linear-gradient(
        90deg,
        var(--guna-red) 0,
        var(--guna-red) 10px,
        var(--guna-sun) 10px,
        var(--guna-sun) 20px,
        var(--guna-green) 20px,
        var(--guna-green) 30px,
        var(--guna-gold) 30px,
        var(--guna-gold) 40px
    );
}

.about-alliance-card--jungle::before {
    background: repeating-linear-gradient(
        90deg,
        var(--guna-sun) 0,
        var(--guna-sun) 10px,
        #fff 10px,
        #fff 20px,
        var(--guna-gold) 20px,
        var(--guna-gold) 30px
    );
}

.about-alliance-card--sun::before {
    background: repeating-linear-gradient(
        90deg,
        var(--guna-red) 0,
        var(--guna-red) 10px,
        var(--guna-earth) 10px,
        var(--guna-earth) 20px,
        var(--guna-green) 20px,
        var(--guna-green) 30px
    );
}

/* Team cards — mola ring colors */
.about-guna-page .about-team-track article {
    border-top: 3px solid transparent;
    border-image: repeating-linear-gradient(
        90deg,
        var(--guna-red),
        var(--guna-red) 8px,
        var(--guna-sun) 8px,
        var(--guna-sun) 16px,
        var(--guna-green) 16px,
        var(--guna-green) 24px
    ) 1;
}

.about-section-mission {
    background: linear-gradient(135deg, #ffffff 0%, rgba(40, 167, 69, 0.04) 50%, #ffffff 100%);
}

.about-section-vision {
    background-color: var(--guna-cream);
}

.about-section-team {
    background: linear-gradient(180deg, #f0faf4 0%, #fffef9 100%);
}

.about-guna-page h1,
.about-guna-page h2,
.about-guna-page h3,
.about-guna-page h4 {
    font-family: 'Fredoka', 'Fredoka One', sans-serif;
    color: var(--absolute-black);
}

/* Mola-inspired accent pattern (organic zigzag, not grid) */
.mola-pattern-bg {
    background-color: var(--guna-cream);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 100 50'%3E%3Cpath d='M0 25 L12.5 12.5 L25 25 L37.5 12.5 L50 25 L62.5 12.5 L75 25 L87.5 12.5 L100 25' fill='none' stroke='%23c0392b' stroke-opacity='0.05' stroke-width='1.5'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 179, 0, 0.06) 0%, transparent 60%);
    background-size: 100px 50px, auto;
}

.mola-divider {
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        var(--guna-red) 0,
        var(--guna-red) 12px,
        var(--guna-gold) 12px,
        var(--guna-gold) 24px,
        var(--guna-green) 24px,
        var(--guna-green) 36px,
        var(--guna-earth) 36px,
        var(--guna-earth) 48px
    );
    border-radius: 2px;
    opacity: 0.85;
}

/* Hero group carousel — wide stage layout */
.about-gallery-stage {
    position: relative;
    margin-top: 1.5rem;
    padding-bottom: 1rem;
}

.about-mola-wing {
    position: absolute;
    top: 28%;
    width: clamp(80px, 12vw, 160px);
    height: clamp(140px, 22vw, 260px);
    opacity: 0.12;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect fill='%23c0392b' x='0' y='0' width='40' height='40'/%3E%3Crect fill='%23ffb300' x='40' y='0' width='40' height='40'/%3E%3Crect fill='%2311802b' x='0' y='40' width='40' height='40'/%3E%3Crect fill='%23d4a017' x='40' y='40' width='40' height='40'/%3E%3Cpath fill='none' stroke='%23000' stroke-opacity='0.15' stroke-width='2' d='M0 0 L80 80 M80 0 L0 80'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    border-radius: 1rem;
}

.about-mola-wing--left {
    left: 0;
    transform: rotate(-6deg);
}

.about-mola-wing--right {
    right: 0;
    transform: rotate(6deg);
}

/* Center SOGED in Action card */
.about-gallery-center {
    position: relative;
    z-index: 20;
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    margin-bottom: -4.5rem;
}

.about-mola-frame {
    position: relative;
    padding: 10px;
    border-radius: 1.75rem;
    background: repeating-linear-gradient(
        135deg,
        var(--guna-red) 0,
        var(--guna-red) 8px,
        var(--guna-sun) 8px,
        var(--guna-sun) 16px,
        var(--guna-green) 16px,
        var(--guna-green) 24px,
        var(--guna-gold) 24px,
        var(--guna-gold) 32px
    );
    box-shadow: 0 28px 60px rgba(61, 31, 10, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.about-mola-frame-inner {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--guna-earth);
}

.about-soged-action-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.about-mola-frame-inner:hover .about-soged-action-img {
    transform: scale(1.04);
}

.about-soged-action-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(61, 31, 10, 0.88) 0%, rgba(61, 31, 10, 0.25) 45%, rgba(0, 163, 224, 0.12) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
}

.about-soged-badge {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 0.5rem 0.85rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 179, 0, 0.4);
}

.about-soged-action-caption {
    text-align: center;
}

.about-mola-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23c0392b' d='M0 0h12v4H4v8H0z'/%3E%3Cpath fill='%23ffb300' d='M12 0h8v4h4v8h-4V4h-8z'/%3E%3Cpath fill='%2311802b' d='M0 12h4v8h8v4H0z'/%3E%3C/svg%3E");
    background-size: contain;
}

.about-mola-corner--tl { top: 2px; left: 2px; }
.about-mola-corner--tr { top: 2px; right: 2px; transform: scaleX(-1); }
.about-mola-corner--bl { bottom: 2px; left: 2px; transform: scaleY(-1); }
.about-mola-corner--br { bottom: 2px; right: 2px; transform: scale(-1); }

.about-mola-zigzag {
    position: absolute;
    left: 12%;
    right: 12%;
    height: 6px;
    z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath fill='%23ffb300' d='M0 4 L5 0 L10 4 L15 0 L20 4 L25 0 L30 4 L35 0 L40 4 L40 8 L35 4 L30 8 L25 4 L20 8 L15 4 L10 8 L5 4 L0 8 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 40px 8px;
    opacity: 0.9;
}

.about-mola-zigzag--top { top: 3px; }
.about-mola-zigzag--bottom { bottom: 3px; }

/* Wide bleed carousel */
.about-gallery-carousel-bleed {
    position: relative;
    z-index: 10;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 5.5rem 0 2.5rem;
    background:
        linear-gradient(180deg, transparent 0%, rgba(248, 243, 234, 0.6) 15%, rgba(240, 250, 244, 0.85) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 20 L10 10 L20 20 L30 10 L40 20 L50 10 L60 20 L70 10 L80 20' fill='none' stroke='%23c0392b' stroke-opacity='0.04' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: auto, 80px 40px;
}

.about-gallery-carousel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0 1.5rem;
}

.about-mola-line {
    flex: 1;
    max-width: 120px;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--guna-red) 0,
        var(--guna-red) 8px,
        var(--guna-sun) 8px,
        var(--guna-sun) 16px,
        var(--guna-green) 16px,
        var(--guna-green) 24px
    );
    border-radius: 2px;
    opacity: 0.7;
}

.about-gallery-carousel-label {
    font-family: 'Fredoka', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--guna-earth);
    white-space: nowrap;
}

.about-gallery-carousel {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

.about-gallery-carousel-track {
    position: relative;
    min-height: clamp(220px, 32vw, 380px);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(61, 31, 10, 0.18);
    border: 3px solid rgba(255, 179, 0, 0.35);
}

.about-gallery-slide-img {
    width: 100%;
    height: 100%;
    min-height: clamp(220px, 32vw, 380px);
    object-fit: cover;
    object-position: center;
}

.about-gallery-fade {
    position: absolute;
    top: 0;
    bottom: 3rem;
    width: clamp(40px, 8vw, 120px);
    z-index: 5;
    pointer-events: none;
}

.about-gallery-fade--left {
    left: clamp(1rem, 4vw, 3rem);
    background: linear-gradient(to right, rgba(248, 243, 234, 0.95), transparent);
}

.about-gallery-fade--right {
    right: clamp(1rem, 4vw, 3rem);
    background: linear-gradient(to left, rgba(240, 250, 244, 0.95), transparent);
}

.about-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 179, 0, 0.5);
    background: rgba(255, 255, 255, 0.95);
    color: var(--guna-green);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.about-gallery-nav:hover {
    transform: translateY(-50%) scale(1.1);
    background: var(--guna-sun);
    color: var(--guna-earth);
    box-shadow: 0 8px 24px rgba(255, 179, 0, 0.35);
}

.about-gallery-nav--prev {
    left: clamp(0.25rem, 2vw, 1rem);
}

.about-gallery-nav--next {
    right: clamp(0.25rem, 2vw, 1rem);
}

.about-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.about-gallery-dots button {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    background: rgba(17, 128, 43, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}

.about-gallery-dots button.is-active,
.about-gallery-dots button:hover {
    background: var(--guna-sun);
    transform: scale(1.35);
}

@media (min-width: 1024px) {
    .about-gallery-center {
        margin-bottom: -5.5rem;
    }

    .about-gallery-carousel-bleed {
        padding-top: 6.5rem;
    }
}

@media (max-width: 640px) {
    .about-gallery-center {
        margin-bottom: -3rem;
    }

    .about-gallery-carousel-bleed {
        padding-top: 4rem;
    }

    .about-mola-wing {
        display: none;
    }
}

.about-group-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.about-group-carousel-slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 1;
}

/* Alliance modal */
.alliance-modal-backdrop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.alliance-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.alliance-modal-panel {
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.alliance-modal-backdrop.is-open .alliance-modal-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.alliance-modal-carousel-slide {
    opacity: 0;
    transition: opacity 0.45s ease;
}

.alliance-modal-carousel-slide.is-active {
    opacity: 1;
    z-index: 1;
}

/* Team marquee */
@keyframes aboutTeamScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.about-team-track {
    animation: aboutTeamScroll 35s linear infinite;
}

.about-team-track:hover {
    animation-play-state: paused;
}

/* Scrollbar hide for thumbnail strip */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Footer — match home page styling inside About Us */
.about-guna-page #footer-component {
    display: block;
    width: 100%;
    margin-top: 0;
}

.about-guna-page #footer-component .footer {
    border-top: 4px solid;
    border-image: linear-gradient(90deg,
        url('../Multimedia/Images/Languages/Azul.png') 0% 25%,
        url('../Multimedia/Images/Languages/Amarillo.png') 25% 50%,
        url('../Multimedia/Images/Languages/Verde.png') 50% 75%,
        url('../Multimedia/Images/Languages/Rojo.png') 75% 100%) 1;
    opacity: 1;
    background: var(--bg-secondary);
    font-family: 'Quicksand', sans-serif;
}

.about-guna-page #footer-component .footer::before {
    display: none;
}