/* ==========================================================================
   FONTS
   ========================================================================== */

/* HELVETICA NEUE */

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../assets/font/HelveticaNeueThin.otf') format('opentype');
    font-weight: 100;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../assets/font/HelveticaNeueLight.otf') format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../assets/font/HelveticaNeueRoman.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../assets/font/HelveticaNeueMedium.otf') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../assets/font/HelveticaNeueBold.otf') format('opentype');
    font-weight: 700;
}

/* COCOGOOSE */

@font-face {
    font-family: 'Cocogoose Regular';
    src: url('../assets/font/cocogoose-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Cocogoose Semilight';
    src: url('../assets/font/cocogoose-semilight.ttf') format('truetype');
}

@font-face {
    font-family: 'Cocogoose Bold';
    src: url('../assets/font/cocogoose-bold.ttf') format('truetype');
}

/* ==========================================================================
   CSS VARIABLES & DESIGN SYSTEM (Light Mode Update)
   ========================================================================== */
:root {
    /* Colors */
    --clr-orange: #EC6608;
    --clr-black: #373030;
    --clr-white: #FFFFFF;
    --clr-light-bg: #F4F4F4;
    --clr-black-real: #000000;

    /* Light grey for sections */
    --clr-hero-bg: #DCDCDC;
    /* Grey for hero */
    --clr-text-grey: #6B6B6B;
    /* Grey for text */
    --clr-card-bg: #E0E0E0;
    /* Grey for blank cards */
    --clr-border: #E8E8E8;

    /* Typography */
    --font-heading: 'Cocogoose Regular', sans-serif;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Layout */
    --container-width: 1700px;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--clr-white);
    color: var(--clr-text-grey);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Typography Base */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--clr-black);
    font-weight: 700;
    line-height: 1.2;
}

.highlight {
    color: var(--clr-orange);
}

.dark-text {
    color: var(--clr-black);
}

.center {
    text-align: center;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: center;
}

.btn-outline {
    background-color: transparent;
    color: var(--clr-orange);
    border: 2px solid var(--clr-orange);
}

.btn-outline:hover {
    background-color: var(--clr-orange);
    color: var(--clr-white);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 1.5rem 0;

    transition: all 0.3s ease;
}

.header.scrolled {
    padding: 1rem 0;
    background-color: var(--clr-black);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.header-hidden {
    transform: translateY(-100%);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    height: 40px;
}

.nav-list {
    display: flex;
    gap: 2rem;
}

.gallery-video,
.gallery-image {
    z-index: 1;
    opacity: 1;
}

.nav-link {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-white);
    transition: color var(--transition-fast);
    position: relative;
    padding-bottom: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--clr-orange);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--clr-orange);
}

.nav-link:hover::after {
    width: 30px;
    /* Línea corta al inicio del texto al hacer hover */
}

.nav-link.active {
    color: var(--clr-orange);
}

.nav-link.active::after {
    width: 15px;
    /* Línea corta al inicio del texto para la página activa */
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--clr-white);
    font-size: 1.5rem;
    cursor: pointer;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
    position: relative;

    height: 100vh;
    min-height: 760px;

    overflow: hidden;

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

    text-align: center;

    background: #000;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.658);
    /* Sutil oscurecimiento gris para legibilidad */
}

.hero-content {
    position: relative;
    z-index: 2;
    margin-top: 4rem;
    width: 100%;
    padding: 0 2rem;
}

.hero-title {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    text-align: center;

    font-family: var(--font-body);
}

.hero-title-top {
    display: block;
    color: var(--clr-orange);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 45px;
    letter-spacing: -1px;
    line-height: 0.9;
    margin-bottom: 0;
}

.hero-title-bottom {
    display: block;
    color: var(--clr-white);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 50px;
    letter-spacing: -1px;
    line-height: 0.9;
    white-space: normal;
    margin-top: 0.2em;
}

/* ==========================================================================
   INTRO SECTION
   ========================================================================== */
.intro-section {
    padding: 2rem 0 3rem;
    text-align: center;
    background-color: var(--clr-white);
}

.intro-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    color: var(--clr-text-grey);
    line-height: 1.35;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
    /* Reduced margin to pull button up */
    font-weight: 100;
}

/* ==========================================================================
   SPLIT SECTION (Marcas + KPIs)
   ========================================================================== */

.split-section {
    background: #f7f7f7;
    overflow: visible;
}

.split-container {
    display: flex;
    min-height: 340px;
    align-items: stretch;
    position: relative;
}

/* LEFT */

.split-left {
    position: relative;
    flex: 0 0 52%;
    background: #efefef;

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

    padding: 4rem 3rem;

    z-index: 2;
}

.split-left::after {
    content: "";

    position: absolute;
    top: 0;
    right: -70px;
    width: 70px;
    height: 100%;
    background: #efefef;

    clip-path: polygon(0 0, 100% 50%, 0 100%);

    z-index: 1;
}

.split-right {
    flex: 1;
    background: #f7f7f7;

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

    padding: 4rem 5rem 4rem 8rem;

    position: relative;
}

.marcas-wrapper {
    position: relative;
    z-index: 5;
}

.marcas-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 2.1rem;
    font-weight: 100;
    color: #222;
    margin-bottom: 2rem;
    position: relative;
    letter-spacing: 0.03em;
}

.marcas-title::after {
    content: "";
    width: 50px;
    height: 2px;
    background: #d9d9d9;
    position: absolute;
    left: 0;
    bottom: -10px;
}

.marcas-logos {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img {
    height: 48px;
    width: auto;
    object-fit: contain;

    filter: grayscale(0%);
    opacity: 1;

    transition: transform .3s ease,
        opacity .3s ease;
}

/* ARQONS más pequeño */
.brand-logo:nth-child(5) img {
    height: 28px;
}

.brand-logo img:hover {
    transform: translateY(-2px);
}

.brand-logo:nth-child(3) img {
    height: 42px;
}

.brand-logo:nth-child(4) img {
    height: 44px;
}

.brand-logo:nth-child(5) img {
    height: 23px;
}

/* vertical divider */
.split-right::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 60px;
    width: 1px;
    height: calc(100% - 120px);
    background: #222;
    opacity: 0.18;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 3.5rem 6rem;
}

.kpi-item {
    text-align: left;
}

.reveal-left,
.reveal-right {
    opacity: 0;
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
    transform: translateX(-80px);
}

.reveal-right {
    transform: translateX(80px);
}

.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.kpi-number-wrap {
    display: flex;
    align-items: center;

    line-height: 1;

}

.kpi-number {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 6.4rem;
    font-weight: 700;
    color: #EC6608;

    letter-spacing: -2px;
    line-height: 1;
}

.kpi-plus {
    font-size: 4rem;
    color: #222;
    font-weight: 300;

    margin-left: -2px;
    margin-top: -2px;

    line-height: 1;
}

.dashboard-kpi-plus {
    font-size: 4rem;
    font-weight: 300;
    color: var(--clr-white);
}

.kpi-label {
    display: block;

    font-size: 1.15rem;
    line-height: 1.15;

    color: #1f1f1f;

    max-width: 260px;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-weight: 100;

    letter-spacing: 0.06em;
}

/* RESPONSIVE */

@media (max-width: 1100px) {

    .split-container {
        flex-direction: column;
    }

    .split-left {
        flex: 1;
    }

    .split-left::after {
        display: none;
    }

    .split-right::before {
        display: none;
    }

    .split-right {
        padding: 4rem 4rem 4rem 6rem;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .kpi-item {
        text-align: center;
    }

    .kpi-number-wrap {
        justify-content: center;
    }

    .kpi-label {
        max-width: none;
    }
}

/* ==========================================================================
   NEWS SECTION
   ========================================================================== */

.news-section {
    padding: 2rem 0;
    background-color: transparent;
}

.news-section .section-title {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-weight: 300;
    font-size: clamp(3rem, 4vw, 4rem);

    padding: 0.3rem 0;

    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--clr-black);
    margin-bottom: 0;
}

.news-section .highlight {
    color: var(--clr-orange);
    margin-right: 0.15em;
}

/* ==========================================================================
   NEWS GALLERY (Apple TV+ Style)
   ========================================================================== */
/* ==========================================================================
   NEWS GALLERY (360 Touch Infinite)
   ========================================================================== */
.gallery {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 2rem 0 2.5rem;
    /* Increased padding */
    user-select: none;
}

.item-container {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    gap: 0;
    touch-action: pan-y;
    align-items: center;

}

.gallery-item {
    flex: 0 0 70%;
    aspect-ratio: 19 / 9;
    padding: 0;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    transition: opacity 0.6s ease, transform 0.6s ease;
    cursor: grab;
}

.gallery-item:active {
    cursor: grabbing;
}

.gallery-item:not(.current) {
    opacity: 0.5;
    transform: scale(0.95);
    /* Less shrinking for side items */
}

.item-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* Added overflow hidden */
    background: #000;
    /* Fallback background */
}

.gallery-video,
.gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.gallery-item .inner {
    position: absolute;
    inset: 0;
    padding: 3rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
    color: white;
    pointer-events: none;
}

.info-top {
    font-family: 'Cocogoose', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 300;
}

.info-bottom {
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.gallery-item.current .info-bottom {
    transform: translateY(0);
    opacity: 1;
}

.typography-news-title {
    margin-top: 1.2rem;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 80%;
}

.typography-news-title .tag {
    font-weight: 700;
}

.m-dot {
    margin: 0 8px;
    opacity: 0.6;
}

/* Dot Nav */
.dotnav-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.dotnav-items {
    display: flex;
    gap: 15px;
    list-style: none;
}

.dotnav-item {
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    transition: all 0.4s ease;
}

.dotnav-items li.current .dotnav-item {
    background: var(--clr-orange);
    transform: scale(1.4);
}

@media (max-width: 768px) {
    .gallery-item {
        flex: 0 0 85%;
    }

    .item-container {
        padding-left: 7.5%;
    }

    .paddlenav {
        display: none;
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background-color: var(--clr-white);
    padding-bottom: 1rem;
}

.footer-top-line {
    height: 3px;
    background-color: var(--clr-orange);
    width: 100%;
    margin-bottom: 1.5rem;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.footer-logo-col {
    flex: 0 0 250px;
}

.footer-logo-img {
    height: 30px;
}

.footer-links-col {
    display: flex;
    gap: 8rem;
    flex: 0 1 auto;
}

.footer-nav-group h4 {
    font-size: 0.7rem;
    color: var(--clr-orange);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    font-family: 'Cocogoose Semilight', sans-serif;
    letter-spacing: 1.2px;
}

.footer-nav-group ul li {
    margin-bottom: 0.4rem;
}

.footer-nav-group a {
    font-size: 1.05rem;
    color: var(--clr-black);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 200;
    text-transform: none;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.footer-nav-group a:hover {
    color: var(--clr-orange);
}

.footer-right-col {
    flex: 0 0 560px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.social-links {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.social-links a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 1;
}

.social-links a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block !important;
}

.social-links a:hover {
    transform: translateY(-3px);
    opacity: 0.7;
}

.disclaimer-text {
    font-size: 0.93rem;
    color: #000000;
    line-height: 1.3;
    text-align: right;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 200;
    letter-spacing: -0.015em;
    max-width: 560px;
    white-space: normal;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    gap: 0.75rem;
}

.footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

.legal-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legal-links li a {
    font-size: 0.85rem;
    color: var(--clr-black);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.8px;
    transition: color 0.25s ease;
}

.legal-links a:hover {
    color: var(--clr-orange);
}

.copyright {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    color: var(--clr-black);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    white-space: nowrap;
}

.powered-by {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.powered-by img {
    height: 15px;
}

/* ==========================================================================
   ANIMATIONS & RESPONSIVE
   ========================================================================== */

/* Fade Up Animation */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

/* Media Queries */
@media (max-width: 1100px) {
    .split-container {
        flex-direction: column;
    }

    .split-left {
        padding: 4rem 2rem;
        align-items: center;
    }

    .split-right {
        padding: 4rem 2rem;
        clip-path: none;
    }

    .footer-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-links-col {
        justify-content: center;
        gap: 1rem;
    }

    .footer-right-col {
        align-items: center;
        text-align: center;
    }

    .disclaimer-text {
        text-align: center;
    }


    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }

}

@media (max-width: 768px) {
    .header-container {
        padding: 0 1rem;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: var(--clr-white);
        padding: 6rem 2rem;
        transition: right var(--transition-normal);
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 1.5rem;
    }

    .nav-link {
        color: var(--clr-black);
        font-size: 1rem;
    }

    .mobile-menu-btn {
        display: block;
        color: var(--clr-black);
        z-index: 1000;
        position: relative;
    }

    .hero-title {
        max-width: 1100px;
        margin: 0 auto;

        font-size: clamp(1.6rem, 3vw, 4rem);

        line-height: 1.05;
        letter-spacing: -2px;

        font-weight: 300;
    }

    .intro-text {
        font-size: 1.1rem;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .kpi-number-wrap {
        justify-content: center;
    }

    .carousel-track {
        flex-wrap: wrap;
    }

    .carousel-slide {
        flex: 0 0 calc(50% - 0.5rem);
    }

    .legal-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem;
    }
}

/* ==========================================================================
   SOBRE NOSOTROS PAGE STYLES
   ========================================================================== */

.header-inner {
    background-color: var(--clr-black);
}

.nosotros-page main {
    background-color: var(--clr-white);
}

.nosotros-title {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.5rem);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

/* Quiénes Somos Section */
.nosotros-intro {
    padding: 6rem 0;
}

.intro-split {
    display: flex;

    align-items: center;

    gap: 6rem;

    min-height: 650px;
}

.nosotros-kpi-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem 2rem;
}

.nosotros-kpi-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kpi-num-wrapper {
    display: flex;

    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.nosotros-kpi-item .kpi-num {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 6.5rem;
    font-weight: 700;
    color: var(--clr-orange);
    line-height: 0.85;
    letter-spacing: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.nosotros-kpi-item p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 1.1rem;

    color: #373030;

    line-height: 1.35;

    margin-top: 0.25rem;

    font-weight: 100;

    letter-spacing: 0.03em;
}

.nosotros-intro-text {
    flex: 1;
}

.nosotros-intro-text p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 1rem;

    font-weight: 300;

    line-height: 1.85;

    letter-spacing: 0.012em;

    color: #5a5a5a;

    text-align: justify;

    text-justify: inter-word;
    max-width: 690px;
    margin-bottom: 0.9rem;
}

/* CONTENEDOR GLOBAL */

.container {
    width: 100%;

    max-width: 1400px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 40px;

    padding-right: 40px;

    box-sizing: border-box;
}

.intro-justify {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 1.08rem;

    font-weight: 300;

    line-height: 1.85;

    letter-spacing: 0.012em;

    color: #5a5a5a;

    text-align: justify;

    text-justify: inter-word;

    max-width: 690px;

}

/* Misión & Visión Section */
.nosotros-mision-vision {
    width: 100%;
    margin: 0;
}

.mision-block {
    background-color: var(--clr-black);
    color: var(--clr-white);
    padding: 4rem 0;
}

.vision-block {
    background-color: var(--clr-orange);
    color: var(--clr-white);
    padding: 4rem 0;
}

.split-mv {
    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 10rem;

    gap: 6rem;
}

.mv-title {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-weight: 300;
    font-size: 3.8rem;
    flex: 0 0 350px;
    margin-bottom: 0;
    line-height: 1;
    text-align: left;
}

.white-text {
    color: var(--clr-white);
}

.mv-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.08rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.01em;
    text-align: left;
    color: rgba(255, 255, 255, 0.96);
    max-width: 520px;
    flex: 1;
}

.vision-block .mv-text {
    max-width: 520px;
}

/* Posicionamiento & Creamos Valor (Shared layout) */
.nosotros-posicionamiento,
.nosotros-creamos-valor {
    padding: 6rem 0;
}

.split-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;
}


.split-row p {
    font-size: 1rem;

    font-weight: 300;

    line-height: 1.7;

    letter-spacing: 0.035em;

    text-align: justify;

    max-width: 800px;

    margin-left: 0;
}

/* Ecosistema de Marcas */
.nosotros-ecosistema {
    position: relative;
    padding: 6rem 0;
    background-color: #f7f7f7;
    overflow: hidden;
}

.nosotros-ecosistema .container {
    position: relative;
    z-index: 2;
}

.nosotros-ecosistema::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background-color: #efefef;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    z-index: 1;
}


.ecosistema-logos {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 2.5rem;

    margin-top: 1.5rem;

    flex-wrap: wrap;
}

.ecosistema-logos img {
    height: 45px;
    object-fit: contain;
}

.ecosistema-content {
    max-width: 760px;
}

/* Arqons logo sizing in ecosistema */
.ecosistema-logos img[alt="Arqons"] {
    height: 25px;
}

.ecosistema-text {
    max-width: 760px;

    margin-bottom: 2rem;
}

.ecosistema-wrapper {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: 0;
    transform: translateX(200px);
    /* Empuja el bloque a la derecha sin mover el título */
}

.valor-content p {
    max-width: 720px;
}

.split-content p {
    max-width: 720px;

    line-height: 1.8;
}

/* ==========================================================================
   OPERAMOS / FRANQUICIAMOS
   ========================================================================== */
.operamos-grid {
    display: flex;
    width: 100%;
    min-height: 520px;
}

/* ==========================================================================
   PREMIUM SPLIT CARDS
   ========================================================================== */

.split-cards-container {
    display: flex;

    max-width: 1180px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 0px;
}

/* CARD BASE */

.split-card {
    flex: 1;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    transition:
        flex 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s ease,
        background-color 0.5s ease;
}

/* HOVER EXPANSION */

.split-card:hover {
    flex: 1.12;
}

/* GLOW */

.split-card::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.08),
            transparent 70%);

    opacity: 0;

    transition: opacity 0.5s ease;

    pointer-events: none;

    z-index: 1;
}

.split-card:hover::before {
    opacity: 1;
}

/* ORANGE LINE */

.split-card::after {
    content: '';

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0%;
    height: 4px;

    background: #fff;

    transition: width .6s ease;

    z-index: 2;
}

.split-card:hover::after {
    width: 100%;
}

/* CONTENT */

.split-card .card-content {
    position: relative;

    z-index: 3;

    transition:
        transform .5s ease,
        opacity .5s ease;
}

/* TEXT MOTION */

.split-card:hover .card-content {
    transform: translateY(-10px);
}

/* TITLES */

.split-card h3 {
    transition:
        transform .5s ease,
        letter-spacing .5s ease;
}

.split-card:hover h3 {
    transform: translateY(-6px);

    letter-spacing: 1px;
}

/* PARAGRAPHS */

.split-card p,
.split-card .card-footer-brands {
    transition:
        transform .5s ease,
        opacity .5s ease;
}

.split-card:hover p {
    transform: translateY(-3px);
}

.split-card:hover .card-footer-brands {
    transform: translateY(-2px);

    opacity: 1;
}

/* DARK CARD */

.card-operamos {
    background: #34292b;
}

/* ORANGE CARD */

.card-franquiciamos {
    background: #EC6608;
}

.nosotros-split-cards {
    padding: 5rem 0 7rem;
    background: #f4f4f4;
}

.split-card {
    flex: 1;

    transition:
        flex 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s ease,
        background 0.5s ease;

    position: relative;

    overflow: hidden;
}

.split-card:hover {
    flex: 1.15;
}

.split-card h2,
.split-card p {
    transition:
        transform 0.5s ease,
        opacity 0.5s ease;
}

.split-card:hover h2 {
    transform: translateY(-8px);
}

.split-card:hover p {
    transform: translateY(-4px);
}

.split-card::before {
    display: none;
}

.split-card::after {
    content: '';

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0%;
    height: 4px;

    background: #EC6608;

    transition: width .5s ease;
}

.operamos-grid {
    display: flex;

    width: 100%;

    min-height: 520px;
}

.split-card {
    flex: 1;

    position: relative;

    overflow: hidden;

    transition:
        flex 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s ease,
        background-color 0.5s ease;

    cursor: pointer;
}

.split-card:hover::after {
    width: 100%;
}

.split-cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    max-width: 1180px;

    margin: 0 auto;

    overflow: hidden;
}

.card-operamos,
.card-franquiciamos {
    min-height: 430px;

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

    padding: 4rem;

    position: relative;

    text-align: left;
}

.card-operamos {
    background: #34292b;
    color: #fff;
}

.card-operamos .card-content {
    max-width: 360px;
}

.card-franquiciamos {
    background: #EC6608;
    color: #fff;
}

.nosotros-split-cards .card-content {
    width: 100%;
    max-width: 360px;

    margin: 0 auto;
}

.nosotros-split-cards h3 {
    font-family: 'Cocogoose Semilight', sans-serif;

    font-size: clamp(2rem, 2.5vw, 3.2rem);
    font-weight: 300;

    line-height: 0.95;

    letter-spacing: -1px;

    color: #ffffff;

    margin-bottom: 0.35rem;
}

.card-franquiciamos .card-content {
    max-width: 460px;
}

.nosotros-split-cards p {
    font-family: 'Helvetica Neue', sans-serif;

    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 300;

    line-height: 1.7;

    letter-spacing: 0.03em;

    text-align: justify;

    color: rgba(255, 255, 255, 0.95);

    max-width: 360px;
}

/* CREAMOS VALOR EN UNA LINEA */

.valor-title {
    white-space: nowrap;
}

.card-footer-brands {
    display: block;

    margin-top: 0;
    font-family: 'Helvetica Neue', sans-serif;

    font-size: 1rem;

    font-weight: 300;

    opacity: 0.85;

    line-height: 1.5;
}

/* Active Nav Link */
.nav-link.active {
    color: var(--clr-orange);
}

/* RESPONSIVE FOR NOSOTROS */
@media (max-width: 1200px) {

    .intro-split,
    .split-mv,
    .split-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        padding-left: 10rem;
    }

    .nosotros-intro-text p,
    .mv-text,
    .split-row p {
        max-width: 100%;
    }

    .mv-title {
        flex: none;
    }

    .nosotros-ecosistema::before {
        display: none;
    }

    .nosotros-split-cards {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .nosotros-kpi-grid {
        grid-template-columns: 1fr;
    }


    .mv-title {
        font-size: 3rem;
    }

    .nosotros-split-cards h3 {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   MARCAS PAGE  (prefijo bm-)
   ========================================================================== */

/* ---------- HERO ---------- */
.bm-hero {
    position: relative;
    height: 90vh;
    overflow: hidden;
}

.bm-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .1) 60%);
}

.bm-hero-content {
    position: absolute;
    inset: 0;

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

    text-align: center;
}

.bm-hero-content h1 {
    color: #fff;

    font-family: 'Cocogoose Semilight', sans-serif;

    font-size: clamp(2rem, 1.8vw, 1.9rem);
    line-height: 1.1;


    white-space: nowrap;

    max-width: none;
}

/* ---------- TITLE BAR ---------- */
.bm-title-bar {
    background: #2d2326;
    padding: 2em 0;
    text-align: center;
}

.bm-title-bar h2 {
    font-family: 'Cocogoose Semilight', sans-serif;

    font-size: clamp(0.8rem, vw, 2.5rem);
    color: #fff;

    margin: 0;

    letter-spacing: 0.03em;

    line-height: 1;
}

.bm-highlight {
    color: var(--clr-orange, #EC6608);
}

/* ---------- BRAND INTRO ---------- */
.bm-intro {
    padding: 6rem 0;
    background: #ECECEC;
}

.bm-intro-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7rem;
}

.bm-intro-logo img {
    width: 260px;
    max-width: 100%;
    object-fit: contain;
}

.bm-intro-text h2 {
    font-family: 'Cocogoose Regular', 'Helvetica Neue', sans-serif;
    font-size: clamp(1.8rem, 2.8vw, 3.2rem);
    line-height: 1;
    color: #2D2326;
    margin: 0 0 1.4rem;
    letter-spacing: .02em;
}

.bm-intro-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    max-width: 480px;
}

.bm-cards {
    padding: 5rem 0 6rem;

    background: #ffffff;
}

.bm-cards-grid {
    display: grid;

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

    max-width: 1100px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 0px;
}

.bm-card {
    padding: 4.5rem 5rem;
}

/* SUBTITULO */

.bm-card span {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

    font-weight: 300 !important;

    font-size: 1.4rem !important;
    letter-spacing: 0 !important;

    text-transform: none !important;

    color: #fff !important;
    display: block;

    margin-bottom: -0.4rem !important;
}

/* TITULO PRINCIPAL */

.bm-card h3 {
    font-family: 'Cocogoose Semilight', sans-serif !important;

    font-size: clamp(1.7rem, 2vw, 2.6rem) !important;

    line-height: 0.95 !important;

    letter-spacing: -2px !important;

    color: #fff !important;

    margin-top: 0.4rem;
}

.bm-card-orange .card-content {
    max-width: 430px;

    margin-top: -10px;
}

/* PARRAFOS */

.bm-card span {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    margin-bottom: 0.40rem !important;
    display: block;
    color: #fff !important;
}

.bm-card h3 {
    font-family: 'Cocogoose Semilight', sans-serif !important;

    font-size: clamp(1.8rem, 2vw, 2.8rem) !important;

    line-height: 0.95 !important;

    letter-spacing: -2px !important;

    margin-top: 0 !important;

    color: #fff !important;

    white-space: nowrap;
}

.bm-card p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

    font-size: 1rem !important;

    font-weight: 300 !important;

    line-height: 1.7 !important;

    color: #fff !important;
}

.bm-card .card-content {
    max-width: 520px;
}

.bm-card-orange {
    padding-left: 4.5rem;
    padding-right: 5rem;
}

.bm-card-orange h3 {
    margin-top: 0.4rem;
}

/* PARRAFOS */

.bm-card p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-weight: 300;

    font-size: 1.05rem;

    line-height: 1.7;
}

.bm-card p {
    font-size: .95rem;
    line-height: 1.75;
    max-width: 420px;
}

.bm-card-dark {
    background: #2D2326;
    color: #fff;
}

.bm-card-orange {
    background: var(--clr-orange, #EC6608);
    color: #fff;
}

/* ---------- ATRIBUTOS DE MARCA ---------- */
.bm-attributes {
    /* no extra padding — full bleed layout */
}

.bm-attributes-inner {
    display: flex;
    min-height: 440px;
}

.bm-attributes-text {
    width: 26%;
    background: var(--clr-orange, #EC6608);
    color: #fff;
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bm-attributes-text h2 {
    font-family: 'Cocogoose Regular', 'Helvetica Neue', sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 3rem);
    line-height: 1;
    margin: 0 0 1.2rem;
    letter-spacing: .02em;
}

.bm-attributes-text p {
    font-size: .9rem;
    line-height: 1.65;
    opacity: .9;
    max-width: 200px;
}

.bm-attributes-gallery {
    width: 74%;
    display: flex;
}

.bm-attr-item {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.bm-attr-label {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    color: #fff;
    font-family: 'Cocogoose Regular', 'Helvetica Neue', sans-serif;
    font-size: .85rem;
    letter-spacing: .08em;
}

.bm-attr-img {
    width: 100%;
    height: 100%;
    min-height: 440px;
    background-size: cover;
    background-position: center;
    transition: transform .7s ease;
}

.bm-attr-item:hover .bm-attr-img {
    transform: scale(1.06);
}

/* Fallback gradient colours so placeholders look good without images */
.bm-attr-img-1 {
    background-color: #4a7c59;
    background-image: linear-gradient(135deg, #3d6b4a, #6aaa80);
}

.bm-attr-img-2 {
    background-color: #5c8a5c;
    background-image: linear-gradient(135deg, #4f7a4f, #7ab87a);
}

.bm-attr-img-3 {
    background-color: #a0522d;
    background-image: linear-gradient(135deg, #8b4513, #cd853f);
}

/* ---------- AÑOS ---------- */
.bm-years {
    padding: 6rem 0;
    text-align: center;
    background: #f4f4f4;
}

.bm-years-inner {}

.bm-years h2 {
    font-family: 'Cocogoose Regular', 'Helvetica Neue', sans-serif;
    font-size: clamp(2rem, 3.5vw, 4rem);
    color: #2D2326;
    margin: 0 0 1.2rem;
    letter-spacing: .02em;
}

.bm-years-num {
    color: var(--clr-orange, #EC6608);
    font-size: clamp(3.5rem, 7vw, 8rem);
    line-height: .85;
    display: inline-block;
    vertical-align: middle;
}

.bm-years p {
    font-size: clamp(1.1rem, 2vw, 1.8rem);
    color: #444;
    margin: 0;
    line-height: 1.5;
}

/* ---------- PROCESO ¿QUÉ SIGUE? ---------- */
.bm-process {
    padding: 6rem 0 8rem;
    background: #fff;
    text-align: center;
}

.bm-process-title {
    font-family: 'Cocogoose Regular', 'Helvetica Neue', sans-serif;
    font-size: clamp(2rem, 3.5vw, 4rem);
    color: #2D2326;
    margin: 0 0 3rem;
    letter-spacing: .02em;
}

.bm-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    margin: 0 0 4rem;
}

.bm-process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

.bm-process-num {
    font-family: 'Cocogoose Regular', 'Helvetica Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 5.5rem);
    color: var(--clr-orange, #EC6608);
    line-height: 1;
}

.bm-process-item h3 {
    font-family: 'Cocogoose Regular', 'Helvetica Neue', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    color: #2D2326;
    margin: .5rem 0 .2rem;
    letter-spacing: .04em;
}

.bm-process-item p {
    font-size: .85rem;
    color: #666;
    margin: 0;
}

.bm-process-btns {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.bm-btn-orange {
    display: inline-block;
    background: var(--clr-orange, #EC6608);
    color: #fff;
    font-family: 'Cocogoose Regular', 'Helvetica Neue', sans-serif;
    font-size: .95rem;
    letter-spacing: .06em;
    padding: 1.1rem 3rem;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.bm-btn-orange:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(236, 102, 8, .35);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .bm-intro-inner {
        flex-direction: column;
        gap: 3rem;
    }

    .bm-intro-logo img {
        width: 180px;
    }

    .bm-cards-grid {
        grid-template-columns: 1fr;
    }

    .bm-card {
        padding: 3rem 2rem;
    }

    .bm-attributes-inner {
        flex-direction: column;
    }

    .bm-attributes-text {
        width: 100%;
        padding: 3rem 2rem;
    }

    .bm-attributes-gallery {
        width: 100%;
        min-height: 260px;
    }

    .bm-attr-img {
        min-height: 260px;
    }

    .bm-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .bm-hero-content h1 {
        font-size: 2rem;
        padding: 0 1rem;
    }

    .bm-process-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bm-process-btns {
        flex-direction: column;
        align-items: center;
    }
}

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

/* TODOS LOS TITULOS */

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.nav-link,
.footer-nav-group h4,
.bm-process-title,
.bm-title-bar h2,
.bm-card h3,
.bm-years h2,
.bm-attributes-text h2,
.brand-description h3 {
    font-family: 'Cocogoose Semilight', sans-serif;

    font-weight: 300;
}

/* TODOS LOS TEXTOS */

p,
a,
li,
button,
input,
textarea,
small,
label,
.disclaimer-text,
.card-footer-brands,
.typography-news-title,
.info-top,
.info-bottom {
    font-family: 'Helvetica Neue Thin', 'Helvetica Neue', sans-serif;

    font-weight: 200;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    font-family: inherit;
}

/* ==========================================================================
   MARCAS INTRO (SPLIT SECTION)
   ========================================================================== */
.split-section-marcas {
    background: #f7f7f7;
    overflow: visible;
}

.split-section-marcas .split-right::before {
    display: none;
}

.split-section-marcas .split-left {
    padding: 2rem 3rem;

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

.split-section-marcas .split-right {
    padding: 5rem 6rem 5rem 7rem;

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

.marcas-intro-heading {
    margin-bottom: 1rem;

    line-height: 0.95;
}

/* SOMOS UNA CADENA */

.marcas-intro-thin {
    font-family: 'Helvetica Neue Thin', 'Helvetica Neue', sans-serif !important;

    font-weight: 200 !important;

    font-size: clamp(2rem, 2.7vw, 3.2rem);

    letter-spacing: 0.02em;

    color: #2f2a2b;

    text-transform: uppercase;

    display: block;

    margin-bottom: .35rem;
}

.marcas-intro-bold-orange {
    font-family: 'Cocogoose Semilight', sans-serif !important;

    font-weight: 300 !important;

    font-size: clamp(2.2rem, 3.8vw, 4rem);

    color: var(--clr-orange);

    text-transform: uppercase;

    letter-spacing: -0.03em;
}

.marcas-intro-bold-black {
    font-family: 'Cocogoose Semilight', sans-serif !important;

    font-weight: 300 !important;

    font-size: clamp(2.2rem, 3.8vw, 4rem);

    color: #2a2425;

    text-transform: uppercase;

    letter-spacing: -0.04em;
}

/* PÁRRAFO */

.marcas-intro-paragraph {
    font-family: 'Helvetica Neue Thin', 'Helvetica Neue', sans-serif !important;

    font-weight: 300 !important;

    font-size: 1.05rem;

    color: #4f4a4b;

    line-height: 1.7;

    max-width: 760px;

    margin-top: 1.2rem;
}

@media (max-width: 1100px) {
    .split-section-marcas .split-right {
        padding: 4rem;
    }
}

/* ==========================================================================
   TRIANGULO MARCAS
   ========================================================================== */

.split-left-marcas {
    position: relative;

    overflow: visible;
}

.marcas-triangle {
    position: absolute;

    top: 0;

    right: -70px;

    width: 140px;

    height: 100%;

    background: #f7f7f7;

    clip-path: polygon(0 0, 100% 50%, 0 100%);

    z-index: 5;
}

/* ==========================================================================
   BM CARDS PREMIUM EFFECT
   ========================================================================== */

.bm-cards-grid {
    gap: 0;
    overflow: hidden;
}

.bm-card {
    position: relative;

    overflow: hidden;

    cursor: pointer;

    transition:
        transform 0.5s ease,
        background-color 0.5s ease;

    min-height: 420px;

    padding: 5rem 4.5rem;

    display: flex;
    align-items: center;
}

.bm-card:hover {
    transform: translateY(-4px);
}

/* LINEA ANIMADA */

.bm-card::after {
    content: '';

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0%;
    height: 4px;

    background: rgba(255, 255, 255, 0.95);

    transition: width .55s ease;
}

.bm-card:hover::after {
    width: 100%;
}

/* GLOW */

.bm-card::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.08),
            transparent 70%);

    opacity: 0;

    transition: opacity .5s ease;

    pointer-events: none;
}

.bm-card:hover::before {
    opacity: 1;
}

/* CONTENT */

.bm-card .card-content {
    position: relative;

    z-index: 3;

    transition:
        transform .55s ease,
        opacity .55s ease;

    max-width: 430px;
}

.bm-card .card-content {
    max-width: 430px;
}

.bm-card:hover .card-content {
    transform: translateY(-10px);
}

/* TITULO */

.bm-card h3 {
    transition:
        transform .5s ease,
        letter-spacing .5s ease;
}

.bm-card:hover h3 {
    transform: translateY(-6px);

    letter-spacing: 1px;
}

/* TEXTO */

.bm-card p {
    transition:
        transform .5s ease,
        opacity .5s ease;
}

.bm-card:hover p {
    transform: translateY(-2px);
}

/* CARD DARK */

.bm-card-dark {
    background: #34292b;
    color: #fff;
}

/* CARD ORANGE */

.bm-card-orange {
    background: #EC6608;
    color: #fff;
}

/* ==========================================================================
   GLOBAL PREMIUM FIXES
   NO ROMPE ESTRUCTURA EXISTENTE
   ========================================================================== */

/* ---------- CONTENEDOR GLOBAL ---------- */

.container {
    width: 100%;

    max-width: 1400px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 40px;

    padding-right: 40px;

    box-sizing: border-box;
}

/* ---------- QUIENES SOMOS ---------- */

.nosotros-title {
    margin-bottom: 1rem;
}

.nosotros-intro-text p,
.intro-justify {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 1.08rem;

    font-weight: 300;

    line-height: 1.8;

    letter-spacing: 0.012em;

    color: #5a5a5a;

    text-align: justify;

    text-justify: inter-word;

    max-width: 690px;
}

/* ---------- KPIS ---------- */

.nosotros-kpi-item p,
.kpi-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-weight: 100;

    letter-spacing: 0.05em;

    line-height: 1.35;
}

/* ---------- MISION / VISION ---------- */

.mv-row {
    display: grid;

    grid-template-columns: 320px 1fr;

    align-items: center;

    gap: 5rem;

    padding: 0 8rem;

    min-height: 220px;
}

.mv-title {
    font-family: 'Cocogoose Semilight', sans-serif;

    font-weight: 300;

    font-size: clamp(3rem, 4vw, 4.2rem);

    line-height: 0.95;

    margin: 0;
}

.mv-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 1.08rem;

    font-weight: 300;

    line-height: 1.7;

    letter-spacing: 0.01em;

    text-align: left;

    color: rgba(255, 255, 255, 0.96);

    max-width: 700px;

    margin: 0;
}



/* ---------- ECOSISTEMA ---------- */

.ecosistema-content {
    width: 100%;

    max-width: 760px;

}

.ecosistema-logos {
    display: flex;

    align-items: center;

    justify-content: flex-start;
    /* Alinea los logos al inicio (izquierda) del bloque de texto */

    flex-wrap: wrap;

    gap: 2rem;

    margin-top: 1.2rem;

    margin-left: 0;
}

.ecosistema-logos img {
    display: flex;

    align-items: center;

    justify-content: center;
}

/* ---------- OPERAMOS / FRANQUICIAMOS ---------- */

.nosotros-split-cards p {
    margin-bottom: 0;
}

.card-footer-brands {
    margin-top: 0;
}

/* ---------- CREAMOS VALOR ---------- */

.valor-title {
    white-space: nowrap;
}

/* ---------- NEWS ---------- */

.news-section {
    padding-top: 4rem;

    padding-bottom: 4rem;
}

.gallery {
    padding-top: 2rem;

    padding-bottom: 2rem;
}

/* ---------- DISCLAIMER FOOTER ---------- */

.disclaimer-text {
    line-height: 1.6;

    letter-spacing: 0.06em;

    max-width: 580px;
}

/* ---------- HERO MARCAS ---------- */

.bm-hero-content h1 {
    font-family: 'Cocogoose Semilight', sans-serif;

    font-size: clamp(1.2rem, 2vw, 2rem);

    line-height: 1.15;

    letter-spacing: 0.08em;

    white-space: nowrap;
}

/* ---------- TITULOS GENERALES ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Cocogoose Semilight', sans-serif;
}

/* ---------- TEXTOS GENERALES ---------- */

p,
span,
a,
li,
button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 768px) {

    .container {
        padding-left: 24px;

        padding-right: 24px;
    }

    .mv-row {
        grid-template-columns: 1fr;

        gap: 2rem;

        padding: 0 2rem;
    }

    .mv-row .vision-text {
        margin-left: 0 !important;
    }

    .split-row {
        flex-direction: column;

        gap: 2rem;
    }

    .ecosistema-logos {
        justify-content: center;
    }
}




/* TODOS LOS PARRAFOS - ESTILO COMPARTIDO (Mismo estilo que "Creamos Valor") */
.nosotros-intro-text p,
.mv-text,
.intro-justify,
.ecosistema-text,
.ecosistema-content p,
.valor-content p,
.split-row p {
    font-size: 1rem !important;
    font-weight: 300 !important;
    line-height: 1.7 !important;
    letter-spacing: 0.035em !important;
    text-align: justify !important;
    /* Fuerza a que las líneas antes de los <br> y la última línea también se justifiquen */
    text-justify: inter-word !important;
    max-width: 800px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    color: var(--clr-text-grey) !important;
}

/* Conservar color para bloques Misión y Visión sobre fondos oscuros */
.mv-text {
    color: rgba(255, 255, 255, 0.96) !important;
}

/* ==========================================================================
   ALINEACION LIMPIA FINAL
   ========================================================================== */

.split-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6rem;
}

.split-row .nosotros-title {
    flex: 0 0 420px;
    margin-bottom: 0;
}

/* MOVER TODO MISION / VISION */
.split-mv {
    transform: translateX(180px);
    /* Aumentado de 120px a 180px para moverlo más a la derecha */
}

/* MOVER PARRAFO CREAMOS VALOR */
.nosotros-creamos-valor p {
    position: relative !important;
    left: -80px !important;
    /* Desplaza el párrafo a la derecha sin interferir con la animación de ScrollReveal */
}

/* ==========================================================================
   FRANQUICIAMIENTO PAGE
   ========================================================================== */
.franquiciamiento-page main {
    background-color: var(--clr-white);
}

.franq-hero {
    position: relative;
    height: 65vh;
    background-color: #373030;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    overflow: hidden;
}

.franq-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.franq-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}

.franq-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 20px;
}

.franq-subtitle {
    font-size: 30px !important;
    color: var(--clr-orange);
    font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    margin-bottom: 0;
    letter-spacing: 0.5px;
    text-transform: none;
}

.franq-hero-title {
    font-size: 30px !important;
    color: var(--clr-white);
    font-family: 'Cocogoose Semilight', sans-serif;
    font-weight: 300;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

.franq-brands {
    padding: 1rem 0 4.4em 0;

    background-color: #f3f3f3;
}

.franq-grid {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7rem;

    transform: translateY(20px);
}

.franq-text {
    flex: 0 0 540px;
    margin-top: 3px;
}

.franq-mini-title {
    font-size: 32px !important;
    color: var(--clr-black);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 100;
    margin-bottom: 0.1rem;
    text-transform: none;
    letter-spacing: 0.5px;
}

.franq-text h2 {
    font-size: 46px !important;
    font-family: 'Cocogoose Semilight', sans-serif;
    font-weight: 300;
    color: var(--clr-black);
    line-height: 0.9;
    margin-bottom: 0.2rem;
    letter-spacing: -1.5px;
}

.franq-text h2 .orange {
    color: var(--clr-orange);
}

.franq-description {
    font-size: 16px !important;
    line-height: 1.6;
    color: var(--clr-black);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 100;
    text-align: justify;
    letter-spacing: 1.2px;
}

.franq-logos {
    flex: 0 0 460px;

    display: grid;

    grid-template-columns: repeat(2, 180px);

    justify-content: center;

    align-items: center;

    justify-items: center;

    column-gap: 3rem;

    row-gap: 2rem;

    margin: 0 auto;
}

.logo-item {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 180px;

    height: 100px;
}

.logo-item img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.logo-item img:hover {
    transform: scale(1.05);
}

@media (max-width: 991px) {
    .franq-grid {
        flex-direction: column;
        text-align: center;
        gap: 4rem;
    }

    .franq-text {
        max-width: 100%;
    }

    .franq-logos {
        margin: 0 auto;
        gap: 3rem 2rem;
    }

    .franq-description {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .franq-hero {
        height: 50vh;
        min-height: 380px;
    }

    .franq-hero h1 {
        font-size: 2.2rem;
    }

    .franq-subtitle {
        font-size: 1.2rem;
    }

    .franq-text h2 {
        font-size: 2.4rem;
    }
}

/* ==========================================================================
   BRAND CONNECTIONS DETAILS SECTION
   ========================================================================== */
.franq-connections {
    background-color: var(--clr-white);
    padding-bottom: 5rem;
}

.franq-connections-header {
    background-color: #362f2d;
    padding: 1.7rem 0;
    text-align: center;
}

.franq-connections-header h2 {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-size: 2.9rem;
    font-weight: 300;
    color: var(--clr-white);
    margin: 0;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.franq-connections-header h2 .orange {
    color: var(--clr-orange);
}

.franq-brand-list {
    padding-top: 1rem;
}

.franq-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    padding: 4rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.franq-brand-row:last-child {
    border-bottom: none;
}

.franq-brand-logo-col {
    flex: 0 0 380px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.franq-brand-logo-col img {
    max-width: 300px;
    max-height: 140px;
    object-fit: contain;
}

/* China Wok logo specific size adjustment */
.franq-brand-logo-col img[alt*="China Wok"] {
    max-width: 350px;
    max-height: 200px;
}

.franq-brand-info-col {
    flex: 0 0 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.franq-brand-info-col p {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.6;
    color: #000000;
    text-align: justify;
    margin-bottom: 1.5rem;
    max-width: 580px;
    letter-spacing: 0.05em;
}

.btn-franq {
    display: inline-block;
    padding: 0.65rem 2.2rem;
    border-radius: 6px;
    font-family: 'Helvetica Neue Thin', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-franq-filled {
    background-color: var(--clr-orange);
    color: var(--clr-white);
    border: 1px solid var(--clr-orange);
}

.btn-franq-filled:hover {
    background-color: transparent;
    color: var(--clr-orange);
}

.btn-franq-outlined {
    background-color: transparent;
    color: var(--clr-orange);
    border: 1px solid var(--clr-orange);
}

.btn-franq-outlined:hover {
    background-color: var(--clr-orange);
    color: var(--clr-white);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .franq-brand-row {
        flex-direction: column;
        text-align: center;
        gap: 2.5rem;
        padding: 3rem 0;
    }

    .franq-brand-logo-col {
        flex: 0 0 auto;
    }

    .franq-brand-info-col {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .franq-brand-info-col p {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .franq-hero {
        height: 100vh;
    }

    .franq-subtitle {
        font-size: 20px !important;
    }

    .franq-hero-title {
        white-space: normal;
        font-size: 20px !important;
        letter-spacing: -0.3px;
    }

    .franq-text h2 {
        font-size: 2.4rem;
    }

    .franq-connections-header h2 {
        font-size: 1.3rem;
        letter-spacing: 1px;
    }
}

/* CHINA WOK MAS GRANDE */

.logo-item:first-child img {
    max-height: 85px;
    transform: translateY(13px);
}

/* MONTAO MAS PEQUEÑO */

.logo-item:nth-child(2) img {
    max-height: 58px;
}

/* IL FORNAIO MAS PEQUEÑO */

.logo-item:nth-child(3) img {
    max-height: 67px;
    transform: translateY(-6px);
}

/* WANG MAS PEQUEÑO */

.logo-item:nth-child(4) img {
    max-height: 67px;
}

/* ==========================================================================
   ¿DÓNDE PODRÁS PARTICIPAR? SECTION
   ========================================================================== */
.franq-spaces-section {
    background-color: var(--clr-light-bg);
    padding: 6rem 0 8rem 0;
}

.franq-spaces-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.franq-spaces-header h2 {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    color: #362f2d;
    margin: 0;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.franq-spaces-header h2 .orange {
    color: var(--clr-orange);
}

.franq-spaces-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    background-color: transparent;
    padding: 1rem 0;
}

.franq-space-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    transition: all 0.3s ease;
}

/* Center the last two cards in the 3-column grid */
.franq-space-card:nth-child(10) {
    grid-column: 2 / span 2;
}

.franq-space-card:nth-child(11) {
    grid-column: 4 / span 2;
}

.franq-space-image-box {
    width: 100%;
    aspect-ratio: 16/10;
    background-color: #e0e0e0;
    overflow: hidden;
    position: relative;
}

.franq-space-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.5s ease;
}

.franq-space-card:hover .franq-space-image-box img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.franq-space-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.90rem;
    font-weight: 300;
    color: #4a4a4a;
    text-align: center;
    padding: 1.4rem 0.5rem;
    background-color: transparent;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-top: none;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .franq-spaces-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .franq-space-card {
        grid-column: span 2 !important;
    }

    .franq-space-card:nth-child(10) {
        grid-column: span 2 !important;
    }

    .franq-space-card:nth-child(11) {
        grid-column: 2 / span 2 !important;
    }

    .franq-spaces-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .franq-spaces-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .franq-space-card,
    .franq-space-card:nth-child(10),
    .franq-space-card:nth-child(11) {
        grid-column: span 1 !important;
    }

    .franq-spaces-header h2 {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   NOS ADAPTAMOS A CUALQUIER ESPACIO SECTION
   ========================================================================== */
.franq-adapt-section {
    background-color: var(--clr-black);
    padding: 3.5rem 0 4.5rem 0;
    color: var(--clr-white);
}

.franq-adapt-section .container {
    max-width: 1300px;
}

.franq-adapt-header {
    text-align: center;
    margin-bottom: 3rem;
}

.franq-adapt-header h2 {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--clr-white);
    margin: 0;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.franq-adapt-header h2 .orange {
    color: var(--clr-orange);
}

.franq-adapt-grid {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.franq-adapt-row {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: 100%;
}

.franq-adapt-col {
    display: flex;
    align-items: center;
}

/* Align contents */
.content-col {
    flex: 1;
    padding: 0;
}

.content-right-align {
    justify-content: flex-end;
    text-align: right;
    gap: 1.8rem;
    padding-right: 0;
    transform: translateX(-2.5rem);
}

.franq-adapt-row:nth-child(1) .content-right-align {
    transform: translateX(6rem);
}

.franq-adapt-row:nth-child(3) .content-right-align {
    transform: translateX(1.3rem);
}

.content-left-align {
    justify-content: flex-start;
    text-align: left;
    gap: 1.8rem;
}

.franq-adapt-row:nth-child(2) .content-left-align {
    transform: translateX(-1rem);
}

.image-col {
    display: flex;
    flex: 2.5;
    align-items: center;
}

.franq-adapt-row:nth-child(odd) .image-col {
    justify-content: flex-start;
}

.franq-adapt-row:nth-child(even) .image-col {
    justify-content: flex-end;
}

.franq-adapt-row:nth-child(1) .image-col {
    transform: translateX(16.1rem);
}

.franq-adapt-row:nth-child(2) .image-col {
    transform: translateX(-11rem);
}

.franq-adapt-row:nth-child(3) .image-col {
    transform: translateX(11.2rem);
}

.franq-adapt-image-box {
    width: 100%;
    max-width: 514px;
    aspect-ratio: 514/321;
    background-color: var(--clr-card-bg);
    overflow: hidden;
    display: block;
}

.franq-adapt-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.5s ease;
    display: block;
}

.franq-adapt-row:hover .franq-adapt-image-box img {
    filter: grayscale(0%);
}

.franq-adapt-text {
    display: flex;
    flex-direction: column;
}

.content-right-align .franq-adapt-text {
    align-items: flex-end;
    text-align: right;
}

.content-left-align .franq-adapt-text {
    align-items: flex-start;
    text-align: left;
}

.franq-adapt-text h3 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 2.4rem;
    font-weight: 300;
    letter-spacing: 1.2px;
    margin-bottom: 0.2rem;
    color: var(--clr-white);
}

.franq-adapt-text p {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.42rem;
    letter-spacing: 0.7px;
    font-weight: 300;
    color: rgb(255, 255, 255);
    margin: 0;
    white-space: nowrap;
}

/* Diagram styling */
.franq-space-diagram {
    position: relative;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.diagram-square {
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1.5px dashed rgb(255, 255, 255);
    transition: border-color 0.3s ease, border-style 0.3s ease;
}

.diagram-square.outer {
    width: 100%;
    height: 100%;
}

.diagram-square.middle {
    width: 68%;
    height: 68%;
}

.diagram-square.inner {
    width: 35%;
    height: 35%;
}

.diagram-square.active {
    border: 2px solid var(--clr-white);
}

/* ==========================================================================
   TE ACOMPAÑAMOS EN EL PROCESO SECTION
   ========================================================================== */
.franq-process-section {
    background-color: var(--clr-light-bg);
    padding: 2.5rem 0;
    color: var(--clr-black);
    text-align: center;
}

.franq-process-section .container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.franq-process-header {
    margin-bottom: 3rem;
}

.franq-process-header h2 {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-size: 3.2rem;
    font-weight: 300;
    color: var(--clr-black);
    margin: 0;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.franq-process-header h2 .orange {
    color: var(--clr-orange);
}

.franq-process-cards {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    width: 100%;
    margin-bottom: 4.5rem;
}

.franq-process-card {
    flex: 1;
    height: 190px;
    perspective: 1000px;
    cursor: pointer;
    background: transparent;
}

.franq-process-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.175);
    transform-style: preserve-3d;
}

/* Hover triggers the Y rotation and elevates the card */
.franq-process-card:hover .franq-process-card-inner {
    transform: rotateY(180deg) translateY(-6px);
}

.franq-process-card-front,
.franq-process-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
}

.franq-process-card-front {
    background-color: var(--clr-orange);
    justify-content: center;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(236, 102, 8, 0.15);
    transition: box-shadow 0.3s ease;
}

.franq-process-card:hover .franq-process-card-front {
    box-shadow: 0 15px 30px rgba(236, 102, 8, 0.28);
}

.franq-process-card-front h3 {
    color: var(--clr-white);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 2.6rem;
    line-height: 1.25;
    letter-spacing: 0.5px;
    text-align: center;
}

.franq-process-card-back {
    background-color: var(--clr-white);
    color: var(--clr-black);
    transform: rotateY(180deg);
    border: 2.5px solid var(--clr-orange);
    padding: 1.5rem 1.8rem;
    justify-content: flex-start;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.franq-process-card:hover .franq-process-card-back {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.franq-process-card-back ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.franq-process-card-back ul li {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.35;
    color: #222222;
    margin-bottom: 0.6rem;
    position: relative;
    padding-left: 1.6rem;
    text-align: left;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.franq-process-card:hover .franq-process-card-back ul li {
    opacity: 1;
}

.franq-process-card-back ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--clr-orange);
    border-radius: 50%;
    background-color: transparent;
}

.franq-process-card-back ul li:last-child {
    margin-bottom: 0;
}

.franq-process-footer {
    margin-bottom: 3.5rem;
}

.franq-process-footer h4 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 2rem;
    color: var(--clr-black);
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
    line-height: 1.1;
}

.franq-process-footer p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 2rem;
    color: #000000;
    letter-spacing: 3px;
    line-height: 1.1;
}

.franq-process-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.franq-process-logos .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.franq-process-logos .logo-item img {
    height: 65px !important;
    max-height: 65px !important;
    transform: none !important;
    width: auto;
    object-fit: contain;
    filter: none;
    transition: transform 0.2s ease;
}

.franq-process-logos .logo-item img:hover {
    transform: scale(1.08) !important;
}

/* Responsive adjustments for Adaptation section */
@media (max-width: 768px) {
    .franq-adapt-row {
        flex-direction: column;
        min-height: auto;
    }

    .franq-adapt-row:nth-child(odd) {
        flex-direction: column-reverse;
    }

    .content-col {
        padding: 3rem 1.5rem;
        justify-content: center !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .content-right-align,
    .content-left-align {
        text-align: center !important;
    }

    .content-right-align,
    .content-left-align {
        padding-right: 0 !important;
        transform: none !important;
    }

    .franq-adapt-text {
        align-items: center !important;
        order: 1;
    }

    .franq-adapt-text p {
        white-space: normal !important;
    }

    .franq-space-diagram {
        order: 2;
    }

    .image-col {
        justify-content: center !important;
        transform: none !important;
    }

    .franq-adapt-image-box {
        aspect-ratio: 514/321;
        height: auto;
    }

    /* Responsive process section styles */
    .franq-process-section {
        padding: 2.5rem 1.5rem;
    }

    .franq-process-header h2 {
        font-size: 2rem;
    }

    .franq-process-cards {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 3rem;
        padding: 0 1rem;
    }

    .franq-process-card {
        height: 175px;
    }

    .franq-process-card-front,
    .franq-process-card-back {
        padding: 1.5rem;
    }

    .franq-process-card h3 {
        font-size: 1.9rem;
    }

    .franq-process-card-back ul li {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
        line-height: 1.25;
        padding-left: 1.2rem;
    }

    .franq-process-card-back ul li::before {
        top: 4px;
        width: 5px;
        height: 5px;
    }

    .franq-process-footer h4 {
        font-size: 1.6rem;
        line-height: 1.1;
        margin-bottom: 0.2rem;
    }

    .franq-process-footer p {
        font-size: 1.3rem;
        letter-spacing: 1px;
        line-height: 1.1;
    }

    .franq-process-logos {
        gap: 1.2rem;
        padding: 0 1rem;
    }

    .franq-process-logos .logo-item img {
        height: 60px !important;
        max-height: 60px !important;
        transform: none !important;
    }
}

/* ==========================================================================
   IMPACTO PAGE SPECIAL STYLES
   ========================================================================== */

.impacto-page .hero-inner {
    background-color: var(--clr-hero-bg);
}

.impacto-hero {
    height: 100vh;
    min-height: 100vh;

    background-color: var(--clr-hero-bg);

}

.impacto-hero .hero-title-bottom {
    font-size: 30px !important;
    color: var(--clr-white);
    font-family: 'Cocogoose Semilight', sans-serif;
    font-weight: 300;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}


/* Orange Transition Banner */

.orange-banner {

    background-color: var(--clr-orange);

    min-height: 100px;
    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    margin-top: -2px;
}

.orange-banner-text {

    font-family: 'Cocogoose Semilight', sans-serif;

    font-size: clamp(2.8rem, 3.5vw, 3.5rem);

    letter-spacing: -0.8px;

    font-weight: 300;

    line-height: 1;

    margin: 0;
}

.orange-banner-text .banner-black {
    color: var(--clr-black);
}

.orange-banner-text .banner-white {
    color: var(--clr-white);
}

/* Map Section with Split Column Layout */
.map-section {
    padding: 1.5rem 0;
    background-color: var(--clr-white);
}

.map-section .container {
    max-width: 1850px;
}

.map-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.map-info-col {
    padding-right: 0;
}

.map-info-col h2 {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-size: clamp(2.2rem, 2.8vw, 2.6rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--clr-black);
    text-transform: uppercase;
}

.map-info-col h2 .highlight {
    color: var(--clr-orange);
}

.map-info-col p {
    font-size: 1.05rem;
    color: var(--clr-text-grey);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    font-weight: 300;
}

/* Legend styling */
.map-legend {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.legend-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.legend-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.legend-color-dot.operating {
    background-color: var(--clr-orange);
}

.legend-color-dot.upcoming {
    background-color: #34292B;
}

.legend-text-block {
    display: flex;
    flex-direction: column;
}

.legend-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--clr-black);
    margin-bottom: 0.2rem;
}

.legend-desc {
    font-size: 0.95rem;
    color: var(--clr-text-grey);
    line-height: 1.4;
    font-weight: 300;
}

/* Country Details Card style */
.country-details-box {
    margin: 0;
    padding: 0.5rem 0 1.5rem 0;
    background-color: transparent;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    animation: mapDetailsFadeIn 0.3s ease-out;
    text-align: left;
}

@keyframes mapDetailsFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    gap: 1rem;
}

.details-header h3 {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--clr-black);
    margin: 0;
    text-transform: uppercase;
}

.status-badge {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-badge.operating {
    background-color: rgba(236, 102, 8, 0.1);
    color: var(--clr-orange);
}

.status-badge.upcoming {
    background-color: rgba(52, 41, 43, 0.1);
    color: #34292B;
}

.details-desc {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.08rem;
    color: var(--clr-text-grey);
    line-height: 1.7;
    margin-bottom: 1.8rem;
    font-weight: 300;
}

.close-details-btn {
    background: none;
    border: none;
    color: var(--clr-orange);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    transition: color 0.2s ease;
}

.close-details-btn:hover {
    color: #d15600;
}

/* Map Box - Leaflet LATAM Map */
.latam-map-box {
    background-color: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
    height: 770px;
    overflow: hidden;
    box-shadow: none;
    position: relative;
}

#latam-map {
    width: 100%;
    height: 800px;
    background: transparent;
    border-radius: 0;
}

@media (max-width: 991px) {
    .map-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .map-info-col {
        padding-right: 0;
        text-align: center;
    }

    .legend-item {
        justify-content: flex-start;
        text-align: left;
    }

    .latam-map-box,
    #latam-map {
        height: 550px;
    }
}

@media (max-width: 480px) {

    .latam-map-box,
    #latam-map {
        height: 400px;
    }
}

/* Eliminar marco negro de enfoque (outline) y highlight al hacer clic en el mapa o países */
.leaflet-container,
.leaflet-container:focus,
.leaflet-container:focus-visible,
.leaflet-container:active,
.leaflet-pane,
.leaflet-pane:focus,
.leaflet-pane:focus-visible,
.leaflet-pane:active,
.leaflet-zoom-animated,
.leaflet-zoom-animated:focus,
.leaflet-zoom-animated:focus-visible,
.leaflet-zoom-animated:active,
.leaflet-interactive,
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible,
.leaflet-interactive:active,
#latam-map,
#latam-map:focus,
#latam-map:focus-visible,
#latam-map:active,
#latam-map *,
#latam-map *:focus,
#latam-map *:focus-visible,
#latam-map *:active,
path,
path:focus,
path:focus-visible,
path:active,
svg,
svg:focus,
svg:focus-visible,
svg:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Tooltip estilos - Leaflet */
.latam-custom-tooltip {
    background: rgba(34, 34, 34, 0.95) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    white-space: normal !important;
    width: 280px !important;
    max-width: 350px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.latam-custom-tooltip::before {
    border-top-color: rgba(34, 34, 34, 0.95) !important;
}

.latam-tooltip-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    padding-bottom: 4px;
    color: #EC6608;
}

/* Pillars Dashboard Section */
.pillars-dashboard-section {
    background-color: var(--clr-black);
    color: var(--clr-white);
    padding: 4rem 0 4rem 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.dashboard-container {
    display: flex;
    gap: 4rem;
    align-items: stretch;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 500px;
}

/* Left side Title block */
.dashboard-title-col {

    flex: 0 0 30%;
    max-width: 450px;
    align-self: flex-end;
    margin-bottom: 2rem;
}

.dashboard-main-title {
    font-family: 'Cocogoose Semilight', sans-serif;
    font-size: clamp(3.5rem, 4vw, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--clr-white);
}

.dashboard-year-line {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.dashboard-year {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--clr-white);
}

.dashboard-line {
    flex-grow: 1;
    height: 2px;
    background-color: var(--clr-white);
    opacity: 0.8;
}

/* Right side 3x2 Grid block */
.dashboard-grid-col {
    flex: 1;
}

.dashboard-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    position: relative;

    z-index: 5;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: -7rem;
}

/* Asegura que las tarjetas tengan altura uniforme y tamaño reducido */
.dashboard-card {
    background-color: var(--clr-orange);

    padding: 0.3rem 1.8rem 2.2rem 2rem;

    min-height: 440px;

    color: var(--clr-white);

    display: flex;

    flex-direction: column;
}

.dashboard-kpi-block {
    margin-top: 30px;
}

.dashboard-card:hover {
    background-color: #d15600;
}

/* El grupo que unifica Título y Descripción */
/* TEXT GROUP */
.dashboard-text-group {
    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-self: start;
}

/* Card details - Tamaños reducidos y escalados */
.dashboard-kpi {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 5rem;

    font-weight: 700;

    line-height: 0.88;

    letter-spacing: -4px;

    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.dashboard-kpi-plus {
    font-family: Helvetica, Arial, sans-serif;
}

.dashboard-kpi-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 1rem;

    font-weight: 300;

    line-height: 1.25;

    color: rgba(255, 255, 255, 0.96);

    max-width: 220px;
}

.dashboard-info-block {
    margin-top: 15px;
}

.dashboard-pillar-title {
    font-family: 'Cocogoose Semilight', sans-serif;

    font-size: 1.111rem;

    line-height: 1.1;

    letter-spacing: 0.3px;

    color: #fff;
    max-width: 220px;

    margin-bottom: 1rem;
}

.dashboard-pillar-desc {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 1rem;

    font-weight: 100;

    line-height: 1.3;

    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0.5px;

    max-width: 200px;
}

.dashboard-card:hover {
    background-color: #d15600;

    transition: background-color 0.3s ease;
}

/* Final Message Section */
.final-message-section {
    background-color: var(--clr-white);
    padding: 10rem 0 6rem 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.final-message-box {
    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-top: -170px;

    background-color: var(--clr-light-bg);

    padding: 7rem 2rem;
    border-radius: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.final-message-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(2.3rem, 3vw, 2.2rem);
    color: var(--clr-black);
    line-height: 1.4;
    font-weight: 100;
}

/* Responsive adjustments for Pillars Dashboard */
@media (max-width: 1200px) {
    .dashboard-container {
        gap: 4rem;
    }

    .dashboard-main-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 991px) {
    .dashboard-container {
        flex-direction: column;
        gap: 3.5rem;
        padding: 0 1.5rem;
        align-items: stretch;
    }

    .dashboard-title-col {
        flex: 1 1 100%;
        max-width: 100%;
        position: static;
        margin-bottom: 1rem;
        padding-top: 0;
        align-self: flex-start;
    }

    .dashboard-year-line {
        max-width: 400px;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: -6rem;
    }

    .dashboard-card {
        padding: 3rem 2rem;
    }
}

@media (max-width: 768px) {
    .pillars-dashboard-section {
        padding: 3.5rem 0 2rem 0;
    }

    .dashboard-main-title {
        font-size: 2.8rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        margin-bottom: -4rem;
    }

    .dashboard-kpi-label {
        min-height: auto;
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   BRAND LOOP CAROUSEL (Infinite Marquee)
   ========================================================================== */
.brand-carousel-section {
    background-color: transparent;
    padding: 1.5em 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Subtle top and bottom shadow/gradient just like the image */
.brand-carousel-section::before,
.brand-carousel-section::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 15px;
    z-index: 2;
    pointer-events: none;
}

.brand-carousel-section::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), transparent);
}

.brand-carousel-section::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
}

.brand-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.brand-carousel-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: scroll-right 9s linear infinite;
}

.brand-carousel-slide {
    flex: 0 0 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}

.brand-carousel-slide img {
    height: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
}

/* Specific heights to match visual balance */
.brand-img-cw {
    max-height: 48px;
}

.brand-img-mt {
    max-height: 43px;
}

.brand-img-il {
    max-height: 42px;
}

.brand-img-wang {
    max-height: 44px;
}

.brand-img-arqons {
    max-height: 20px;
}

@keyframes scroll-right {
    0% {
        transform: translateX(-33.3333%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .brand-carousel-section {
        padding: 2rem 0;
    }

    .brand-carousel-slide {
        flex: 0 0 180px;
        padding: 0 1.2rem;
    }

    .brand-carousel-container::before,
    .brand-carousel-container::after {
        width: 60px;
    }

    .brand-img-cw {
        max-height: 38px;
    }

    .brand-img-mt {
        max-height: 38px;
    }

    .brand-img-il {
        max-height: 33px;
    }

    .brand-img-wang {
        max-height: 35px;
    }

    .brand-img-arqons {
        max-height: 18px;
    }
}