/* ============================================
   IMPERIUM CORE SYSTEM
============================================ */

@import url("./reset.css");

@import url("./typography.css");
@import url("./layout.css");
@import url("./components.css");
@import url("./utilities.css");






:root {
    --header-height: 80px; /* fallback */
}

section[id] {
    scroll-margin-top: var(--header-height);
}


/* ============================================
   MOBILE NAV SYSTEM
============================================ */

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;

    color: var(--color-text); /* Ensures shapes are visible */
    padding: 10px; /* Improves click area */
}



/* ============================================
   MOBILE OVERLAY BASE
============================================ */

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-surface);
    z-index: 2000;
    transition: all 0.28s cubic-bezier(.4,0,.2,1);
}

.mobile-overlay-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 24px;
}

.no-scroll {
    overflow: hidden;
}



/* ============================================
   MODE: SLIDE
============================================ */

.mobile-overlay--slide {
    height: 100vh;
    width: 280px;
    left: auto;
    right: -100%;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}

.mobile-overlay--slide.active {
    right: 0;
}



/* ============================================
   MODE: DROPDOWN
============================================ */

.mobile-overlay--dropdown {
    top: 70px; /* below header */
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.mobile-overlay--dropdown.active {
    max-height: 500px;
}



/* ============================================
   MODE: FULLSCREEN
============================================ */

.mobile-overlay--fullscreen {
    height: 100vh;
    width: 100%;
    transform: translateY(-100%);
}

.mobile-overlay--fullscreen.active {
    transform: translateY(0);
}

/* Prevent X overlapping first link */
.mobile-overlay--fullscreen .mobile-overlay-inner {
    position: relative;
    padding-top: 80px;
}



/* ============================================
   MOBILE CLOSE (FULLSCREEN ONLY)
============================================ */

.mobile-close {
    position: absolute;
    top: 20px;
    right: 20px;

    background: transparent;
    border: none;
    outline: none;

    font-size: 24px;
    cursor: pointer;

    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-close i {
    pointer-events: none;
}



/* ============================================
   MOBILE BACKDROP
============================================ */

.mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1500;
}

.mobile-backdrop.active {
    opacity: 1;
    pointer-events: all;
}



/* ============================================
   HAMBURGER
============================================ */

.hamburger {
    width: 26px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    height: 2px;
    width: 100%;
    background: currentColor;
    transition: all 0.3s ease;
}



/* ============================================
   THREE DOTS
============================================ */

.three-dots {
    width: 6px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.three-dots span {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}



/* ============================================
   MINIMAL
============================================ */

.minimal-toggle {
    width: 24px;
    height: 2px;
    background: currentColor;
    display: block;
}



/* ============================================
   RESPONSIVE LOGIC
============================================ */

@media (max-width: 992px) {

    .nav {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }
}

@media (min-width: 993px) {

    .mobile-overlay {
        display: none;
    }

    .mobile-backdrop {
        display: none;
    }
}








/* ============================================
   DIVIDER TOKEN (THEME AWARE)
============================================ */

/* Fallback for older browsers */
:root {
    --color-divider: rgba(0, 0, 0, 0.12);
}

/* Modern browsers override with theme-aware mix */
@supports (color: color-mix(in srgb, black 50%, white)) {
    :root {
        --color-divider: color-mix(in srgb, var(--color-text) 15%, transparent);
    }
}

/* ===================================== */
/* BASE HERO */
/* ===================================== */

.hero {
    position: relative;
    width: 100%;
    
    display: flex;
    align-items: center;          /* vertical centering */
    justify-content: center;      /* horizontal centering base */
    z-index: 0;   /* 🔥 creates stacking context */
}

/* HEIGHT MODES */
.hero--height-auto { min-height: auto; padding: 120px 0; }
.hero--height-medium {
    min-height: 60vh;
    height: 60vh;
}

.hero--height-large {
    min-height: 80vh;
    height: 80vh;
}

.hero--height-full {
    min-height: 100vh;
    max-height: 100vh; /* opcional */
}

/* ===================================== */
/* MEDIA */
/* ===================================== */

.hero-media-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media,
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

/* ===================================== */
/* OVERLAY */
/* ===================================== */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ===================================== */
/* CONTENT */
/* ===================================== */

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-block {
    max-width: 900px;
    display: flex;                /* NEW */
    flex-direction: column;       /* NEW */
    gap: 1.5rem;                  /* NEW */
}

/* ALIGNMENT */
.hero--align-left .hero-block {
    text-align: left;
    align-items: flex-start;      /* NEW */
    margin-right: auto;
}

.hero--align-center .hero-block {
    text-align: center;
    align-items: center;          /* NEW */
    margin: 0 auto;
}

.hero--align-right .hero-block {
    text-align: right;
    align-items: flex-end;        /* NEW */
    margin-left: auto;
}

/* ===================================== */
/* TYPOGRAPHY */
/* ===================================== */

.hero-title {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    color: white;
    margin-bottom: 0;             /* spacing now controlled by flex gap */
}

.hero-subheading {
    font-size: 1.125rem;
    line-height: 1.8;
    color: white;
    max-width: 700px;
}

/* ===================================== */
/* CTA */
/* ===================================== */

.hero-cta-group {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Alignment for CTA group */
.hero--align-center .hero-cta-group {
    justify-content: center;
}

.hero--align-left .hero-cta-group {
    justify-content: flex-start;
}

.hero--align-right .hero-cta-group {
    justify-content: flex-end;
}

/* ===================================== */
/* VISIBILITY LOGIC */
/* ===================================== */

.hero-visibility-hide_mobile { display: block; }
.hero-visibility-hide_desktop { display: block; }
.hero-visibility-mobile_only { display: none; }
.hero-visibility-desktop_only { display: block; }

@media (max-width: 768px) {
    .hero-visibility-hide_mobile { display: none; }
    .hero-visibility-mobile_only { display: block; }
    .hero-visibility-desktop_only { display: none; }
}


/* ===================================== */
/* MOBILE BREATHING SPACE (TRANSPARENT NAV) */
/* ===================================== */

@media (max-width: 768px) {

    body.nav-transparent .hero {
        padding-top: 110px;
        align-items: flex-start; /* ⬅️ clave */
    }

    .hero-content {
        padding-top: 1.5rem;
    }

}

/* ===================================== */
/* CTA RESPONSIVE INLINE FIX */
/* ===================================== */

/* Base CTA layout */
.hero-cta-group {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;   /* Center by default */
    align-items: center;
    flex-wrap: wrap;           /* Allows natural wrap if needed */
}

/* Alignment-aware behavior */
.hero--align-left .hero-cta-group {
    justify-content: flex-start;
}

.hero--align-center .hero-cta-group {
    justify-content: center;
}

.hero--align-right .hero-cta-group {
    justify-content: flex-end;
}

/* ===================================== */
/* MOBILE TUNING (STAYS INLINE) */
/* ===================================== */

@media (max-width: 768px) {

    .hero-cta-group {
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .hero-cta-group .btn {
        width: auto;          /* Keep inline */
        text-align: center;
    }

}

/* ===================================================== */
/* CARD SECTION */
/* ===================================================== */



.card-section{
    background: var(--section-bg, transparent);
}




/* ===================================================== */
/* CARD BASE COMPONENT */
/* ===================================================== */

.card {

    width: 100%;
    border-radius: 16px;

    background: white;

    min-height: 260px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-accent) 20%, transparent);

}



.card-description p{
    margin-bottom:1em;
}

.card-description p:last-child{
    margin-bottom:0;
}



/* ===================================================== */
/* CARD SLIDER LAYOUT */
/* ===================================================== */

.card-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 2rem;
    padding-bottom: 20px;
}


/* ===================================================== */
/* SLIDER TRACK */
/* ===================================================== */

.card-slider-track {
    will-change: transform;
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}


/* ===================================================== */
/* SLIDE */
/* ===================================================== */

.card-slide {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    transform: translateZ(0);
}


/* ===================================================== */
/* SURFACE CARD MODE */
/* ===================================================== */

.card--surface {

    position: relative;

    color: white;

    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;

}

/* ===================================================== */
/* SURFACE OVERLAY */
/* ===================================================== */

.card--surface::before {

    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.35),
        rgba(0,0,0,0)
    );

}


/* ===================================================== */
/* SURFACE CONTENT */
/* ===================================================== */

.card--surface .card-body {

    position: relative;
    z-index: 2;

}


/* ===================================================== */
/* IMAGE MODE */
/* ===================================================== */

.card--image {
    background-image: var(--card-bg);
}


/* ===================================================== */
/* COLOR MODE */
/* ===================================================== */

.card--color {
    background-color: var(--card-color);
    color: white;
}


/* ===================================================== */
/* SURFACE IMAGE */
/* ===================================================== */

.card--surface.card--image {

    background-size: 110%;
    background-position: center;
    background-repeat: no-repeat;

}


/* ===================================================== */
/* MEDIA BLOCK */
/* ===================================================== */

.card-media {

    height: 160px;
    border-radius: 12px;

    margin-bottom: 1.5rem;

    overflow: hidden;

    flex-shrink: 0;

}

.card-media img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* ===================================================== */
/* EMOJI MODE */
/* ===================================================== */

.card-media--emoji {

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 3rem;

}


/* ===================================================== */
/* ICON MODE */
/* ===================================================== */

.card-media--icon {

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;

}


/* ===================================================== */
/* CARD BODY */
/* ===================================================== */

.card-body {

    display: flex;
    flex-direction: column;

    gap: .8rem;

}

.card-title {

    margin: 0;
    font-size: 1.2rem;

}

.card-description {

    margin: 0;
    line-height: 1.5;

}


/* ===================================================== */
/* LINKS */
/* ===================================================== */

.card-link {

    margin-top: 1rem;

    font-weight: 600;

    text-decoration: none;

}




/* ===================================================== */
/* SLIDER CARD VARIANT */
/* ===================================================== */

.card-slider .card {

    padding: 2rem 5rem;
    min-height: 380px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

}


/* ===================================================== */
/* SLIDER TEXT ALIGNMENT */
/* ===================================================== */

.card-slider .card-body {

    margin-left: auto;
    margin-right: 2rem;
    margin-bottom: 2rem;

    max-width: 520px;

    text-align: right;

}








/*===CARDS MODE=== */

/* ========================================= */
/* CARDS TEXT COLOR FIX */
/* ========================================= */

.card-cards .card-body {

    color: var(--color-text);

}

.card-cards .card-title {

    color: var(--color-heading, var(--color-text));

}

.card-cards .card-description {

    color: var(--color-text);

}

/* ========================================= */
/* CARDS LAYOUT SURFACE RULE */
/* Cards always have white surface */
/* ========================================= */

.card-cards .card {

    background: white;
    overflow: hidden;

}

/* ===================================================== */
/* CARDS GRID LAYOUT */
/* ===================================================== */

.card-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 2.5rem;

    margin-top: 3rem;

}

/* ========================================= */
/* CARDS LAYOUT MEDIA */
/* ========================================= */

.card-cards .card-media {

    width: 100%;

    aspect-ratio: 16/9;

    margin: 0;

    border-radius: 16px 16px 0 0;

    overflow: hidden;

}

.card-cards .card-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    

}


.card-cards .card {
    padding: 0;
}



/* ===================================================== */
/* GRID BASE */
/* Ensures grid respects container width */
/* ===================================================== */

.card-grid {

    display: grid;

    width: 100%;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 2.5rem;

}


/* ===================================================== */
/* GRID ITEM */
/* ===================================================== */

.card-grid-item {

    display: flex;

    align-items: stretch;

}


/* Cards fill grid height */

.card-grid-item .card {

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

}


/* ===================================================== */
/* CARD HOVER IMPROVEMENT */
/* ===================================================== */

.card-grid-item .card {

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.card-grid-item .card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 18px 40px color-mix(in srgb, var(--color-accent) 25%, transparent);

}


/* ===================================================== */
/* MEDIA BALANCING */
/* Prevents uneven card heights */
/* ===================================================== */

/* This only affects cards layout, avoids conflict with slider */

.card-cards .card-media {

    height: 220px;

}


/* ===================================================== */
/* CARD BODY BALANCE */
/* ===================================================== */

.card-grid .card-body {

    flex-grow: 1;

    padding: 1.6rem;

}


/* ===================================================== */
/* TABLET */
/* ===================================================== */

@media (max-width: 1024px) {

    .card-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 2rem;

    }

}


/* ===================================================== */
/* MOBILE */
/* 2x2 layout */
/* ===================================================== */

@media (max-width: 640px) {

    .card-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 1.2rem;

    }

}


/* ===================================================== */
/* RESPONSIVE SLIDER*/
/* ===================================================== */

@media (max-width: 768px) {

    .card-slider .card {

        padding: 1.6rem 2rem;
        min-height: 300px;

    }

    .card--surface {

        min-height: 300px;

    }

    .card-media {

        height: 140px;

    }

}


@media (max-width: 480px) {

    .card-slider .card {

        padding: 1.2rem 1.4rem;
        min-height: 240px;

    }

    .card--surface {

        min-height: 240px;

    }

    .card-media {

        height: 120px;

    }

}



/* ========================================= */
/* SLIDER CONTROLS — IMPERIAL VERSION */
/* ========================================= */

.slider-btn {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 1px solid var(--color-border);

    background: var(--color-surface);
    color: var(--color-text);
    opacity: .85;

    cursor: pointer;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--shadow);

    transition: 
        transform .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;

}


.card-slider:hover .slider-btn {

    opacity: 1;

}

/* Hover — subtle accent activation */

.slider-btn:hover {

    border-color: var(--color-accent);
    color: var(--color-accent);

    transform: translateY(-50%) scale(1.06);

    box-shadow:
        var(--shadow),
        0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent);

}

/* Click feedback */

.slider-btn:active {

    transform: translateY(-50%) scale(0.96);

}

/* ========================================= */
/* POSITIONING */
/* ========================================= */

.slider-prev {

    left: 12px;

}

.slider-next {

    right: 12px;

}

/* ========================================= */
/* MOBILE TUNING */
/* ========================================= */

@media (max-width: 768px) {

    .slider-btn {

        width: 36px;
        height: 36px;

    }

    .slider-prev {

        left: 8px;

    }

    .slider-next {

        right: 8px;

    }

}

/* ========================================= */
/* SLIDER DOTS — PREMIUM */
/* ========================================= */

.slider-dots {

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 18px;

}

/* base */

.slider-dot {

    width: 8px;
    height: 8px;

    border-radius: 999px;

    border: none;

    background: var(--color-border);

    opacity: .6;

    cursor: pointer;

    transition:
        width .25s ease,
        transform .2s ease,
        background .2s ease,
        opacity .2s ease;

}

/* hover */

.slider-dot:hover {

    opacity: 1;

    transform: scale(1.15);

}

/* active */

.slider-dot.active {

    width: 22px;

    background: var(--color-accent);

    opacity: 1;

}


/* ================================= */
/* FEATURE LIST — HORIZONTAL CARDS */
/* ================================= */

.card-list .feature-list{
    position:relative;
    padding-left:80px;
}

/* ROW */

.card-list .feature-row{
    position:relative;
    margin-bottom:24px;
}

/* CARD */

.card-list .card{
    position:relative;

    display:flex;
    flex-direction:row;
    align-items:center;

    gap:20px;

    padding:12px 20px;

    background:white;
    border-radius:12px;

    box-shadow:0 6px 16px rgba(0,0,0,.05);

    min-height:auto;
}

/* ICON */

.card-list .card-media{
    position:absolute;

    left:-100px;
    top:50%;

    transform:translateY(-50%);

    width:120px;
    height:120px;

    margin:0;
}

/* BODY */

.card-list .card-body{
    padding:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

/* TITLE */

.card-list .card-title{
    margin:0;
    font-size:1.1rem;
    line-height:1.25;
}

/* DESCRIPTION */

.card-list .card-description{
    margin-top:2px;
    font-size:.9rem;
    line-height:1.4;
}


.card-list .card-body{
    max-width:520px;
}

.card-list .card-title{
    max-width:520px;
}





/* ================================= */
/* FEATURE LIST — FINAL ALIGN FIX */
/* ================================= */

/* fuerza que el texto ocupe todo el ancho disponible */
.card-list .card-body{
    flex:1;
    max-width:none;
}

/* asegura alineación izquierda real */
.card-list .card-title,
.card-list .card-description{
    text-align:left;
}

/* evita que el título se centre dentro del flex */
.card-list .card-title{
    width:100%;
}






/* stable */ 






/* ================================= */
/* CARD HOVER */
/* ================================= */

.card-list .card{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.card-list .card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.08),
        0 6px 12px rgba(0,0,0,.06);
}


/* ================================= */
/* CARD SPACING */
/* ================================= */

.card-list .feature-row{
    margin-bottom:28px;
}

/* ================================= */
/* CARD HOVER IMPROVEMENT */
/* ================================= */

.card-list .card{

    /* animaciones siguen por si luego agregas micro-interacciones */
    transition:
        transform .25s ease,
        box-shadow .25s ease;

    /* efecto permanente */
    transform:translateY(-6px);

    box-shadow:
        0 18px 40px color-mix(in srgb, var(--color-accent) 25%, transparent);
}



/* CARD ABOUT MODE */



/* =========================================
   ABOUT SECTION GRID
========================================= */

.card-about .about-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: start;
}

/* =========================================
   CARD BASE OVERRIDE
========================================= */

.card-about .card-layout--about {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

/* =========================================
   LEFT MAIN CARD (ABOUT)
========================================= */

.card-about .about-item:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* layout inside the big card */

.card-about .card--image {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* TEXT | IMAGE */
    height: 100%;
}

/* TEXT SIDE */

.card-about .card--image .card-body {
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* NEW: force text to left column */
    grid-column: 1;
    grid-row: 1;
}

/* IMAGE SIDE */

.card-about .card--image .card-media {
    height: 100%;

    /* NEW: force image to right column */
    grid-column: 2;
    grid-row: 1;
}

.card-about .card--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   RIGHT COLUMN CARDS
========================================= */

.card-about .about-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.card-about .about-item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.card-about .card--text {
    padding: 32px;
}

/* =========================================
   TYPOGRAPHY
========================================= */

.card-about .card-title {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.card-about .card-description {
    line-height: 1.6;
}


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

@media (max-width: 900px) {

    /* MAIN LAYOUT */

    .card-about .about-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* RESET DESKTOP GRID POSITIONING */

    .card-about .about-item:first-child,
    .card-about .about-item:nth-child(2),
    .card-about .about-item:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        display: block;
    }

    /* ABOUT CARD INTERNAL LAYOUT */

    .card-about .card--image {
        grid-template-columns: 1fr;
    }

    .card-about .card--image .card-body {
        grid-column: 1;
        grid-row: 1;
        padding: 28px;
    }

    .card-about .card--image .card-media {
        grid-column: 1;
        grid-row: 2;
        margin-top: 16px;

        display: block;
        width: 100%;
    }

    .card-about .card--image img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 12px;
    }

}


/* ================================= */
/* CARD-ABOUT HOVER */
/* ================================= */

.card-about .card{
    transition:
        transform .28s ease,
        box-shadow .28s ease;
}


/* subtle lift */

.card-about .card:hover{

    transform: translateY(-4px);

    box-shadow:
        0 18px 38px rgba(0,0,0,.08),
        0 6px 14px rgba(0,0,0,.06);
}




/* CARD-PARTNERS */ 

/* ========================================= */
/* PARTNERS LAYOUT OVERRIDE */
/* ========================================= */


.card-partners{
    padding:20px 0;
}




.card-partners .partners-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    will-change: transform;
}


/* center the card inside each column */
.card-partners .partner-item {
    display: flex;
    justify-content: center;
}


/* override the global card layout */
.card-partners .card {

    height: auto !important;
    min-height: 0 !important;

    padding: 8px 20px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;              /* stretch horizontally */
    max-width: 100%;

    background-image: none !important;   /* stop repeating logos */
}


/* media container */
.card-partners .card-media {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: auto !important;

    margin: 0;
}


/* logo */
.card-partners .card-media img {

    max-height: 80px;
    width: auto;

    max-width: 100%;
}


/* hide titles */
.card-partners .card-body {
    display: none;
}



/* animations */



.card-partners .card{
    transition:transform .2s ease, box-shadow .2s ease;
}

.card-partners .card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}





/* ========================================= */
/* PARTNERS TICKER */
/* ========================================= */

.card-partners .partners-grid {

    display:flex !important;
    gap:24px;
    width:max-content;
    animation:partnersTicker 45s linear infinite;
    

}


/* evita que los items colapsen */

.card-partners .partner-item{
    flex:0 0 auto;
}


/* animación */

@keyframes partnersTicker {

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


@keyframes partnersTickerMobile {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-25%);
    }

}


.card-partners .container{
    overflow:hidden;
}




/* tablet */
@media (max-width:1024px){
    .card-partners .partners-grid{
        animation-duration:28s;
    }
}

/* mobile */
@media (max-width:768px){
    .card-partners .partners-grid{
        animation-duration:16s;
    }
}



/* ================================= */
/* CONTACT LAYOUT */
/* ================================= */

.card-contact .contact-layout{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:60px;
    align-items:start;
}

.card-contact .card--embed{
    min-height:520px;
}

/* ================================= */
/* CONTACT FORM PANEL */
/* ================================= */

.card-contact .contact-form{

    background:#255e8f;
    padding:40px;
    border-radius:8px;
    color:white;

}

.card-contact .contact-form h3{
    margin-bottom:24px;
}


/* ================================= */
/* CONTACT INPUTS */
/* ================================= */

.card-contact .contact-form-inner{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.card-contact .form-field input,
.card-contact .form-field textarea{

    width:100%;
    padding:12px 14px;
    border-radius:4px;
    border:0;
    background:#f1f1f1;
    font-size:14px;

}


/* ================================= */
/* CONTACT BUTTON */
/* ================================= */

.card-contact .contact-form .btn-primary{

    margin-top:10px;
    padding:12px 24px;
    background:#2db7c8;
    color:white;
    border:none;
    border-radius:4px;
    font-weight:600;
    cursor:pointer;

}


/* ================================= */
/* CONTACT CARD LAYOUT */
/* ================================= */

.card-contact .card--embed{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:40px;

    padding:40px;

    height:100%;

    align-items:stretch;

}


/* ================================= */
/* CONTACT TEXT */
/* ================================= */

.card-contact .card-body{
    display:flex;
    flex-direction:column;
    gap:20px;
}


/* ================================= */
/* CONTACT MAP */
/* ================================= */

.card-contact .card-media--embed{

    display:flex;

    height:100%;

}

.card-contact .card-media--embed iframe{

    width:100%;

    height:100%;

    

    border:0;

}


/* ================================= */
/* CONTACT RESPONSIVE (TABLET + MOBILE) */
/* ================================= */

@media (max-width: 1024px){

    /* STACK FORM + CARD */
    .card-contact .contact-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    /* STACK TEXT + MAP */
    .card-contact .card--embed{

        grid-template-columns:1fr;

        grid-template-rows:auto auto;

    }

    /* MAP GOES BELOW TEXT */
    .card-contact .card-media--embed{

        grid-column:1;

        grid-row:2;

        margin-top:20px;
        border-radius: 12px;

    }

    /* CONTROL MAP HEIGHT ON MOBILE */
    .card-contact .card-media--embed iframe{

        height:320px;

    }

}



/* ================================= */
/* CONTACT CARD LIFT EFFECT */
/* ================================= */

.card-contact .card{

    transition:transform .25s ease, box-shadow .25s ease;

}

.card-contact .card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(0,0,0,0.08);

}






/* stable * /


/* ================================= */
/* TABS SECTION */
/* ================================= */

.card-tabs .tabs-section{
    display:flex;
    flex-direction:column;
    align-items:center;
}


/* ================================= */
/* TAB NAV */
/* ================================= */

.card-tabs .tabs-nav{

    display:flex;
    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

    margin-bottom:40px;

}


/* TAB BUTTON */

.card-tabs .tab-button{

    background:#1f5c8a;

    color:white;

    border:none;

    padding:14px 26px;

    border-radius:999px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

}


/* ACTIVE TAB */

.card-tabs .tab-button.is-active{

    background:#2db7c8;

}


/* ================================= */
/* TAB PANELS */
/* ================================= */

.card-tabs .tabs-panels{

    width:100%;

}


/* hide all panels */

.card-tabs .tab-panel{
    display:none;
}


/* show active */

.card-tabs .tab-panel.is-active{
    display:block;
}


/* ================================= */
/* CARD MAP */
/* ================================= */

.card-tabs .card{

    padding:0;

    overflow:hidden;
    border-radius: 14px;
    height:auto;

}


/* map fills card */

.card-tabs .card-media--embed iframe{

    width:100%;

    height:600px;

    margin-top: -60px;

    border:0;
    display: block;

}


/*================================ */
/* TABLET */
/* ================================= */

@media (max-width:1024px){

    .card-tabs .card-media--embed iframe{
        height:420px;
    }

}


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

@media (max-width:640px){

    .card-tabs .tabs-nav{
        gap:10px;
    }

    .card-tabs .tab-button{

        padding:10px 16px;

        font-size:14px;

    }

    .card-tabs .card-media--embed iframe{
        height:340px;
    }

}





/* ================================= */
/* EMBED MEDIA */
/* ================================= */

.card-tabs .card-media--embed {

    width:100%;
    height:auto;
    display:block;
    line-height: 0;

}

/* ================================= */
/* REMOVE EMPTY CARD BODY IN TABS */
/* ================================= */

.card-tabs .card-body{
    display:none;
}


/* ================================= */
/* TABS CARD RESET */
/* ================================= */

.card-tabs .card {
    padding:0 !important;
}

.card-tabs .card-body {
    display:none;
}

.card-tabs .card-media--embed {
    padding:0 !important;
    margin:0;
}

.card-tabs .card-media--embed iframe{
    display:block;
}

/* stable */


/* subtle lift */

.card-tabs .tab-button:hover{

    transform:translateY(-2px);

    box-shadow:0 6px 14px rgba(0,0,0,.08);

}

.card-tabs .tab-button.is-active{

    background:#2db7c8;

    transform:translateY(-1px);

    box-shadow:0 4px 10px rgba(0,0,0,.06);

}

/* ================================= */
/* TABS CARD LIFT */
/* ================================= */

.card-tabs .card{

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

/* lift on hover */

.card-tabs .card:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 32px rgba(0,0,0,.10);

}






/* stable */


/* =========================
   DASHBOARD SYSTEM (PRO)
========================= */

.dashboard {
    padding: 100px 0;
}

/* CENTER */
.dashboard-center {
    max-width: 560px;
    margin: 0 auto;
}

/* CARD */
.dashboard-card-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

/* HEADER */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.dashboard-header h1 {
    color: var(--color-heading);
}

/* LIST */
.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* CARD ITEM */
.dashboard-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-radius: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all 0.25s ease;
}

.dashboard-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* TEXT */
.dashboard-card h3 {
    margin: 0;
    color: var(--color-heading);
}

.dashboard-card p {
    margin: 6px 0;
    color: var(--color-text);
    opacity: 0.7;
}

.dashboard-card small {
    color: var(--color-text);
    opacity: 0.5;
}

/* ACTIONS */
.dashboard-card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* =========================
   BUTTONS (🔥 FIX REAL)
========================= */

.btn-primary {
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
    padding: 10px 18px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.btn-primary:active {
    transform: scale(0.98);
}

/* 🔥 VIEW BUTTON (ANTES MAL) */
.btn-secondary {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}

/* DELETE */
.btn-danger {
    background: var(--color-danger);
    color: white;
    border-radius: 10px;
    padding: 8px 14px;
    border: none;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* =========================
   FORM (🔥 FIX GRANDE)
========================= */

.dashboard-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 🔥 GRID PARA INPUTS */
.dashboard-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* FULL WIDTH ELEMENT */
.full {
    grid-column: span 2;
}

/* INPUTS */
.dashboard-form input,
.dashboard-form textarea {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    transition: all 0.2s ease;
}

.dashboard-form input:focus,
.dashboard-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.05);
}

/* FILE INPUT FIX */
.dashboard-form input[type="file"] {
    padding: 10px;
    background: var(--color-bg);
}

/* BACK */
.dashboard-back {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--color-text);
    opacity: 0.6;
    transition: 0.2s;
}

.dashboard-back:hover {
    opacity: 1;
}