/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* 80px - espacio para el header fijo */
}

/* CSS Variables - Adobe XD Design System */
:root {
    /* Colors */
    --color-primary: #3A9B43;
    --color-text-dark: #474747;
    --color-bg-dark: #0B1E0B;
    --color-bg-light: #ECF5EC;
    --color-bg-neutral: #F3F3F3;
    --color-white: #FFFFFF;
    --color-bg-darker: #0B1F0D;
    
    /* Fonts */
    --font-noto-sans: 'Noto Sans', sans-serif;
    --font-poppins: 'Poppins', sans-serif;
    
    /* Font Sizes (rem) */
    --font-size-17: 1.0625rem; /* 17px */
    --font-size-18: 1.125rem;  /* 18px */
    --font-size-28: 1.75rem;   /* 28px */
    --font-size-60: 3.75rem;   /* 60px */
    --font-size-78: 4.875rem;  /* 78px */
    --font-size-120: 7.5rem;   /* 120px */
    
    /* Line Heights (rem) */
    --line-height-24: 1.5rem;  /* 24px */
    --line-height-33: 2.0625rem; /* 33px */
    --line-height-63: 3.9375rem; /* 63px */
    --line-height-66: 4.125rem; /* 66px */
    --line-height-88: 5.5rem;  /* 88px */
    
    /* Letter Spacing (rem) */
    --letter-spacing-0: 0;
    --letter-spacing--084: -0.0525rem; /* -0.84px */
    --letter-spacing--24: -0.15rem;   /* -2.4px */
    --letter-spacing--312: -0.195rem; /* -3.12px */
    --letter-spacing--48: -0.3rem;  /* -4.8px */
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-noto-sans);
    line-height: 1.6;
    color: var(--color-text-dark);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.container {
    max-width: 85vw; /* 1200px */
    margin: 0 auto;
    padding: 0 1.25rem; /* 20px */
}
.container-banner { /* 1200px */
    margin: 0 auto;
    padding-left: 10em; /* 20px */
}
/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%);
    height: 120vh; /* 1080px - altura exacta del diseño */
    position: relative;
    overflow: hidden; /* Evitar que el contenido se desborde */
    z-index: 1; /* Z-index menor que about */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.875rem 0; /* 30px */
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.9375rem; /* 15px */
}

.logo-icon {
    position: relative;
    width: 3.125rem; /* 50px */
    height: 3.125rem; /* 50px */
}

.logo-circle {
    width: 3.125rem; /* 50px */
    height: 3.125rem; /* 50px */
    border: 0.125rem solid white; /* 2px */
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    border-right: none;
}

.logo-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
}

.line {
    height: 0.125rem; /* 2px */
    background: white;
    margin: 0.1875rem 0; /* 3px */
    border-radius: 0.0625rem; /* 1px */
}

.line-1 { width: 0.9375rem; } /* 15px */
.line-2 { width: 1.25rem; } /* 20px */
.line-3 { width: 1.125rem; } /* 18px */

.logo-text {
    display: flex;
    flex-direction: column;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: normal;
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.0625rem; /* 1px */
}

.collective {
    line-height: 1;
}

.energy {
    line-height: 1;
    margin-top: -2px;
}

.navigation {
    display: flex;
    gap: 1.875rem; /* 30px */
    padding-right: 10em;
}

.nav-link {
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-noto-sans);
    font-weight: 300;
    font-size: var(--font-size-18);
    line-height: var(--line-height-24);
    letter-spacing: -0.01em; /* -0.18px */
    text-align: center;
    transition: opacity 0.3s ease;
}

.nav-link:hover {
    opacity: 0.8;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.75rem; /* 60px */
    align-items: center;
    padding: 3.75rem 0; /* 60px */
    height: calc(67.5rem - 7.5rem); /* 1080px - 120px (header) = 960px */
}

.hero-text {
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between; /* Distribuir el contenido */
    align-items: flex-start; /* Mantener alineación a la izquierda */
    margin-top: 20em;
}

.hero-title {
    font-family: var(--font-poppins);
    font-size: 4.875rem; /* 78px - tamaño exacto del diseño */
    font-weight: normal;
    line-height: 5.5rem; /* 88px - altura de línea exacta */
    letter-spacing: -0.195rem; /* -3.12px - espaciado exacto */
    color: #F3F3F3; /* Color exacto del diseño */
    margin-bottom: 1.875rem; /* 30px */
    text-align: left;
    opacity: 1;
}

.hero-description {
    font-family: var(--font-noto-sans);
    font-size: 1.125rem; /* 18px - tamaño exacto del diseño */
    font-weight: 300;
    line-height: 1.5rem; /* 24px - altura de línea exacta */
    letter-spacing: 0; /* 0px - espaciado exacto */
    color: #ECF5EC; /* Color exacto del diseño */
    text-align: left;
    opacity: 1;
    
    margin-bottom: 2rem; /* 32px */
    max-width: 32.5625rem; /* 521px - ancho máximo exacto */
    height: 4.5625rem; /* 73px - altura exacta */
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-noto-sans);
    font-size: var(--font-size-17);
    font-weight: 300;
    line-height: var(--line-height-24);
    letter-spacing: var(--letter-spacing-0);
    transition: all 0.4s ease; /* Transición más suave y completa */
    margin-top: auto; /* Empuja hacia abajo */
    margin-bottom: 2rem; /* 32px - espacio desde el borde inferior */
    align-self: flex-start; /* Mantiene alineación a la izquierda */
}

.read-more:hover {
    opacity: 0.8;
}

.chevron-down {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    transition: transform 0.4s ease; /* Transición más suave */
}

.read-more:hover .chevron-down {
    transform: translateY(0.125rem); /* 2px */
}

.nav-arrow {
    width: 0.75rem; /* 12px */
    height: 0.75rem; /* 12px */
    margin-left: 0.25rem; /* 4px */
}

.region-arrow {
    width: 0.75rem; /* 12px */
    height: 0.75rem; /* 12px */
    margin-left: 0.25rem; /* 4px */
}

.partner-logo-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 28rem; /* 240px */
    max-height: auto; /* 192px */
}

.region-map-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: none;
    max-height: none;
}

.hero-image {
    display: flex;
    position: relative;
    overflow: visible;
    height: 100%;
    align-items: center;
}

.energy-unit {
    width: auto; /* 1020px - ancho del diseño */
   
    position: absolute;

}

.unit-render-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.9375rem; /* 15px */

}

.unit-front {
    padding: 1.875rem; /* 30px */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.unit-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.unit-logo-icon {
    position: relative;
    width: 30px;
    height: 30px;
}

.unit-circle {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-bg-dark);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    border-right: none;
}

.unit-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
}

.unit-line {
    height: 1px;
    background: var(--color-bg-dark);
    margin: 2px 0;
    border-radius: 1px;
}

.unit-line-1 { width: 8px; }
.unit-line-2 { width: 12px; }
.unit-line-3 { width: 10px; }

.unit-logo-text {
    display: flex;
    flex-direction: column;
    color: var(--color-bg-dark);
    font-family: var(--font-poppins);
    font-weight: normal;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.unit-logo-img {
    width: 20rem; /* 192px - más grande para la sección hero */
    height: auto;
    object-fit: contain;
    max-width: 100%;
}
.unit-logo-imge {
    width: 12rem; /* 192px - más grande para la sección hero */
    height: auto;
    object-fit: contain;
    max-width: 100%;
}

/* Responsive para el logo del hero */
@media (max-width: 1200px) {
    .unit-logo-img {
        width: 10rem; /* 160px */
    }
}

@media (max-width: 768px) {
    .unit-logo-img {
        width: 8rem; /* 128px */
    }
}

@media (max-width: 480px) {
    .unit-logo-img {
        width: 6rem; /* 96px */
    }
}
.unit-collective {
    line-height: 1;
}

.unit-energy {
    line-height: 1;
    margin-top: -1px;
}

.unit-website {
    color: var(--color-bg-darker);
    font-family: var(--font-noto-sans);
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 30px;
}

.unit-pattern {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.honeycomb-grid {
    width: 80px;
    height: 80px;
    background: repeating-linear-gradient(
        60deg,
        var(--color-bg-dark) 0px,
        var(--color-bg-dark) 2px,
        transparent 2px,
        transparent 8px
    );
    opacity: 0.3;
}

.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--color-bg-dark);
    border-radius: 50%;
}

.unit-button {
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #ff4444;
    border-radius: 50%;
    border: 3px solid #ffdd00;
}

/* About Section */
.about {
    background: var(--color-bg-neutral);
    height: 46rem; /* 736px - altura exacta del diseño */
    padding: 6.25rem 0; /* 100px */
    border-radius: 1.8125rem 1.8125rem 0 0; /* 29px 29px 0 0 */
    margin-top: -3.75rem; /* -60px - margen negativo para superponerse y mostrar el borde redondeado */
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden; /* Asegurar que el border-radius se aplique correctamente */
}

.about-tag-container {
    max-width: 85vw; /* 1200px */
    margin: 0 auto 0.75rem auto; /* 12px de espacio inferior - justo arriba del título */
    padding: 0 1.25rem; /* 20px horizontal */
    position: relative;
    left: -1.25rem; /* -20px - alinearse con las líneas de las features */
    text-align: left; /* Alinear a la izquierda como el título */
    display: flex;
    justify-content: flex-start; /* Alinear el tag a la izquierda */
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem; /* 32px - reducido para que el texto esté más cerca de las features */
    align-items: flex-start; /* Alinear arriba en lugar de centrar */
    justify-content: center;
    height: calc(46rem - 12.5rem); /* 736px - 200px (padding) = 536px */
    padding: 0 1.25rem; /* 20px horizontal, sin padding superior */
    max-width: 85vw; /* 1200px */
    margin: 0 auto;
}

.section-tag {
    display: inline-block;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-poppins);
    font-size: 0.875rem; /* 14px */
    font-weight: normal;
    line-height: var(--line-height-24);
    letter-spacing: -0.0175rem; /* -0.28px */
    text-align: center;
    text-transform: uppercase;

    margin: 0; /* Sin márgenes ya que está en su propio contenedor */
    padding: 0.4375rem; /* 7px */
    border: 0.03125rem solid var(--color-primary); /* 0.5px */
    border-radius: 0.4375rem; /* 7px */
}

.section-title {
    font-family: var(--font-poppins);
    font-size: var(--font-size-60);
    font-weight: normal;
    line-height: var(--line-height-63);
    letter-spacing: var(--letter-spacing--24);
    color: var(--color-bg-dark);
    text-align: left;
    opacity: 1;
    margin-bottom: 1.5625rem; /* 25px */
    position: relative;
    left: -1.25rem; /* -20px - mover hacia la izquierda para alinearse con las features */
}

.section-description {
    font-family: var(--font-noto-sans);
    font-size: var(--font-size-18);
    font-weight: 300;
    line-height: var(--line-height-24);
    letter-spacing: var(--letter-spacing-0);
    color: var(--color-text-dark);
    text-align: left;
    opacity: 1;
    position: relative;
    left: -1.25rem; /* -20px - mover hacia la izquierda para alinearse con las features */
}

.about-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px - espacio entre elementos */
    align-items: flex-start; /* Alinear contenido a la izquierda y arriba */
    justify-content: flex-start; /* Alinear arriba */
    max-width: 37rem; /* 400px - limitar el ancho del texto */
}

.features {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas para desktop */
    gap: 2.5rem 3.75rem; /* 40px vertical, 60px horizontal */
    position: relative;
    justify-content: center;
    align-items: flex-start; /* Alinear features arriba */
    width: 100%;
    max-width: 60rem; /* Limitar ancho */
    margin: 0 auto;
}

/* Eliminamos la línea vertical continua */

.feature {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    position: relative;
    text-align: left; /* Alineación a la izquierda para desktop */
    align-items: flex-start; /* Alinear elementos a la izquierda */
}

/* Línea vertical individual para cada característica */
.feature::before {
    content: '';
    position: absolute;
    left: -1.25rem; /* -20px */
    top: 0;
    height: 100%; /* Se extiende hasta el final del contenido */
    width: 0.0625rem; /* 1px */
    background: var(--color-primary);
}

/* Eliminamos feature-content y feature-text ya que ahora es estructura vertical simple */

/* Tercer elemento (Proven solutions) se posiciona en la columna derecha */
.feature:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
}

.feature-icon {
    width: 3.75rem; /* 60px */
    height: 3.75rem; /* 60px */
    border: 0.0625rem solid var(--color-primary); /* 1px borde verde oscuro */
    border-radius: 0.375rem; /* 6px */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 1; /* Opacidad completa */
    margin-bottom: 1rem; /* 16px - espacio entre icono y título */
}

.feature-icon svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    color: var(--color-primary);
}

.feature-title {
    font-family: var(--font-poppins);
    font-size: var(--font-size-28);
    font-weight: normal;
    line-height: var(--line-height-33);
    letter-spacing: var(--letter-spacing--084);
    color: var(--color-bg-dark);
    text-align: left;
    opacity: 1;
    margin-bottom: 0.5rem; /* 8px */
}

.feature-description {
    font-family: var(--font-noto-sans);
    font-size: var(--font-size-18);
    font-weight: 300;
    line-height: var(--line-height-24);
    letter-spacing: var(--letter-spacing-0);
    color: var(--color-text-dark);
    text-align: left;
}

/* Regions Section */
.regions {
    background: white;
    height: auto; /* 655px - altura exacta del diseño */
    width: 100%;
    max-width: 99.4375rem; /* 1591px - ancho exacto del diseño */
    margin: 0 auto;
    padding: 6.25rem 4vw; /* 100px vertical */
    position: relative;
    box-sizing: border-box;
}

.section-header {
    text-align: center;
    margin-bottom: 3.75rem; /* 60px */
    margin-top: 3em;
}

.section-header .section-title {
    font-family: var(--font-poppins);
    font-size: 2.5rem; /* 40px - tamaño base para móvil */
    font-weight: normal;
    line-height: 3rem; /* 48px */
    letter-spacing: var(--letter-spacing--48);
    color: var(--color-bg-dark);
    text-align: center;
    opacity: 1;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

/* Tamaño grande solo para desktop */
@media (min-width: 1200px) {
    .section-header .section-title {
        font-size: 7.5rem; /* 120px - tamaño exacto del diseño */
        line-height: 4.125rem; /* 66px - altura de línea exacta */
        letter-spacing: -0.3rem; /* -4.8px - espaciado exacto */
    }
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 2.5rem; /* 40px */
    align-items: stretch;
}

.region-card {
    background: var(--color-bg-neutral);
    border: none;
    border-radius: 1.5625rem; /* 25px */
    padding: 2.5rem 1.875rem; /* 40px 30px */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 1;
    height: auto;
}

.region-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(26, 77, 58, 0.1);
}

.region-title {
    font-family: var(--font-poppins);
    font-size: var(--font-size-28);
    font-weight: normal;
    line-height: var(--line-height-33);
    letter-spacing: var(--letter-spacing--084);
    color: var(--color-bg-darker);
    text-align: center;
    opacity: 1;
    margin-bottom: 1.25rem; /* 20px */
}

.region-description {
    font-family: var(--font-noto-sans);
    font-size: var(--font-size-18);
    font-weight: 300;
    line-height: var(--line-height-24);
    letter-spacing: var(--letter-spacing-0);
    color: var(--color-text-dark);
    text-align: center;
    opacity: 1;
    margin-bottom: 1.5625rem; /* 25px */
}

.region-link {
    color: var(--color-bg-dark);
    text-decoration: none;
    font-family: var(--font-noto-sans);
    font-weight: normal;
    font-size: var(--font-size-18);
    line-height: var(--line-height-24);
    letter-spacing: -0.01125rem; /* -0.18px */
    text-align: center;
    opacity: 1;
    transition: color 0.3s ease;
}

.region-link:hover {
    color: var(--color-primary);
}

.region-map {
    width: 20rem; /* 320px - más ancho */
    height: 25rem; /* 400px - más alto */
    margin: 1.875rem auto 0; /* 30px top, centrado horizontalmente */
    position: relative;
    overflow: visible; /* Cambiado para permitir que las imágenes se vean completas */
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para mapas eliminados - ahora usamos SVG */

/* Partnerships Section */
.partnerships {
    background: var(--color-bg-dark); /* #0B1E0B */
    width: 100%; /* 1920px - ancho completo */
    padding-top: 5.625rem ; /* 90px vertical */
    text-align: center;
    border-radius: 1.8125rem 1.8125rem 0 0; /* 29px 29px 0 0 */
    opacity: 1;
    position: relative;
    margin: 0;
    left: 0;
}

.partnerships .section-tag {
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-poppins);
    font-size: 0.875rem; /* 14px */
    
    line-height: var(--line-height-24);
    letter-spacing: 0.125rem; /* 2px - más espaciado */
    text-align: center;
    text-transform: uppercase;
    opacity: 1;
    border: none;
    padding: 0;
    margin-bottom: 1rem; /* Espaciado inferior */
}

.partnerships .section-title {
    color: #ECF5EC; /* Color exacto del diseño */
    font-family: var(--font-poppins);
    font-size: 3.75rem; /* 60px - tamaño exacto del diseño */
    font-weight: normal;
    line-height: 3.9375rem; /* 63px - altura de línea exacta */
    letter-spacing: -0.1125rem; /* -1.8px - espaciado exacto */
    text-align: center;
    opacity: 1;
    margin-bottom: 1.5rem; /* 24px */
    max-width: 56.0625rem; /* 897px - ancho exacto del diseño */
    margin-left: auto;
    margin-right: auto;
}

.partnerships .section-description {
    color: var(--color-bg-light); /* #ECF5EC */
    font-family: var(--font-noto-sans);
    font-size: 1.125rem; /* 18px */
    font-weight: 300;
    line-height: 1.75rem; /* 28px - mejor legibilidad */
    letter-spacing: 0.01em; /* Ligero espaciado */
    text-align: center;
    opacity: 1;
    max-width: 35rem; /* Más ancho para mejor legibilidad */
    margin: 0 auto 3rem auto; /* Centrado con margen inferior */
    padding: 0 1rem; /* Padding lateral para móviles */
}

.partners-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* 24px - menos espacio para logos más grandes */
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    opacity: 1;
    margin: 0 auto;
    max-width: 70vw; /* Más ancho para acomodar logos más grandes */
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-size: 1rem; /* 16px */
    transition: opacity 0.3s ease;
    width: 20rem; /* 320px - mucho más grande */
    height: 18rem; /* 288px - mucho más alto */
    opacity: 1;
}

.partner-logo:hover {
    opacity: 1;
}

/* Estilos para logos de marcas eliminados - ahora usamos SVG */

/* Footer */
.footer {
    background: var(--color-bg-dark);
    padding: 0 0 4rem 0; /* Más padding abajo para separar del fondo */
    position: relative;
    min-height: 15vh; /* 90px */
    opacity: 1;
    width: 100%;
    margin: 0;
    left: 0;
    right: 0;
    margin-top: auto;
    flex-shrink: 0;
}
.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 85vw; /* Más limitado para espacios laterales más grandes */
    width: 100%;
    padding: 0 3rem; /* Más espacios laterales */
    margin: 0 auto; /* Centrar el container */
    position: relative;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    border-top: solid 1px rgba(255, 255, 255, 0.2);
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
    padding: 0 1rem;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 3em; /* 3em de separación entre logo y texto */
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 0.2em;
    
}

.footer-logo-img {
    width: 12rem; /* 128px */
    height: auto;
    object-fit: contain;
    max-width: 100%;
}

/* Responsive para el logo del footer */
@media (max-width: 1200px) {
    .footer-logo-img {
        width: 6rem; /* 96px */
    }
}

@media (max-width: 768px) {
    .footer-logo-img {
        width: 5rem; /* 80px */
    }
    
}

@media (max-width: 480px) {
    .footer-logo-img {
        width: 4rem; /* 64px */
    }
}

/* --- Ajustes específicos para móviles about section --- */
@media (max-width: 768px) {
    .about {
        padding: 6rem 1.25rem 4rem;
        height: auto;
    }

    .about-tag-container {
        left: 0;
        justify-content: center;
        margin: 0 auto 1rem;
    }

    .about-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        padding: 0;
    }

    .about-text {
        align-items: center;
        text-align: center;
        gap: 1.5rem;
        max-width: 22rem;
        margin: 0 auto;
    }

    .about-text .section-title,
    .about-text .section-description {
        left: 0;
        text-align: center;
        margin: 0;
    }

    .features {
        width: 100%;
        max-width: 22rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .feature {
        width: 100%;
        max-width: 18rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
        padding: 0;
    }

    .feature::before {
        display: none;
    }

    .feature-icon {
        margin: 0;
    }
}

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

/* Tablet */
@media (max-width: 1200px) {
    .container {
        max-width: 90vw;
    }
    
    .hero {
        height: 60rem;
    }
    
    .hero-content {
        height: calc(60rem - 7.5rem);
    }
    
    .hero-title {
        font-size: 3.5rem; /* 56px - reducido para tablet */
        line-height: 4rem; /* 64px */
        letter-spacing: -0.15rem; /* -2.4px */
    }
    
    .energy-unit {
        width: 100%;
        max-width: 50rem;
        height: 100%;
        max-height: 50rem;
        right: -15%;
        top: 2rem;
    }
    
    .unit-render-img {
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25);
    }
    
 
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .regions {
        width: 90vw;
  
    }
    
    .regions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    

    
    .partners-logos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .container {
        max-width: 94vw;
        padding: 0 1.25rem;
    }

    .container-banner {
        padding: 0 1.25rem;
    }

    .header {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        padding: 1.25rem 0 0;
    }

    .logo {
        justify-content: center;
    }

    .navigation {
        gap: 1.25rem;
        flex-wrap: wrap;
        justify-content: center;
        padding-right: 0;
    }

    .nav-link {
        font-size: 0.95rem;
        font-weight: 400;
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    .nav-arrow {
        width: 0.65rem;
        height: 0.65rem;
    }

    .hero {
        height: auto;
        min-height: 100vh;
        padding: 5rem 0 3.5rem;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        text-align: center;
        padding: 0;
    }

    .hero-text {
        order: 1;
        text-align: center;
        align-items: center;
        margin-top: 0;
        justify-content: center;
        gap: 1.25rem;
        max-width: 26rem;
    }

    .hero-title {
        font-size: 2.6rem;
        line-height: 3.1rem;
        font-weight: 500;
        letter-spacing: -0.09rem;
        margin-bottom: 0.5rem;
    }

    .hero-description {
        font-size: 1.05rem;
        line-height: 1.7rem;
        max-width: 25rem;
        margin-bottom: 0;
    }

    .hero-image {
        order: 2;
        width: 100%;
        max-width: 20rem;
        height: auto;
    }

    .energy-unit {
        width: 100%;
        max-width: 20rem;
        height: auto;
        position: relative;
        margin: 0 auto;
    }

    .unit-render-img {
        border-radius: 0.75rem;

    }

    .read-more {
        order: 3;
        margin-top: 0;
        gap: 0.35rem;
        font-weight: 400;
    }

    .about {
        height: 100vh;
        padding: 5rem 1.5rem 4rem;
        margin-top: -2.5rem;
        border-radius: 2rem 2rem 0 0;
    }

    .about-tag-container {
        position: relative;
        top: 0;
        left: 0;
        margin: 0 auto 1.5rem auto;
        justify-content: center;
        padding: 0;
    }

    .section-tag {
        padding: 0.4rem 1.25rem;
        border-width: 1px;
        letter-spacing: 0.08em;
    }

    .about-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2.5rem;
        max-width: 100%;
        padding: 0;
    }

    .features {
        width: 100%;
        max-width: 24rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0;
    }

    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 0;
    }

    .feature-icon {
        margin: 0;
    }

    .feature-title,
    .feature-description {
        text-align: center;
    }

    .regions {
        width: 100%;
        padding: 4rem 1.25rem 3.5rem;
    }

    .regions-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.75rem;
    }

    .region-card {
        max-width: 22rem;
        padding: 2.25rem 1.5rem 1.75rem;
    }

    .region-map {
        width: 13rem;
        height: 13rem;
    }

    .partnerships {
        padding: 3.5rem 1.25rem 4rem;
    }

    .partnerships .section-title {
        font-size: 2.3rem;
        line-height: 2.8rem;
        margin-bottom: 1rem;
    }

    .partnerships .section-description {
        font-size: 1rem;
        line-height: 1.6rem;
        margin-bottom: 2.5rem;
        max-width: 26rem;
    }

    .partners-logos {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        max-width: 24rem;
        margin: 0 auto;
    }

    .partner-logo {
        width: 11rem;
        height: 6.5rem;
        padding: 0.75rem;
    }

    .footer {
        padding: 2rem 0 2.5rem;
    }

    .footer-container {
        padding: 0 1.25rem;
    }

    .footer-content {
        gap: 1.15rem;
    }

    .footer-right {
        font-size: 0.95rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container {
        max-width: 95vw;
        padding: 0 0.75rem;
    }
    
    .container-banner {
        padding-left: 0.75rem;
    }
    
    .header {
        padding: 0.75rem 0;
    }
    
    .navigation {
        gap: 1rem;
    }
    
    .nav-link {
        font-size: 0.8rem;
    }
    
    .hero {
        height: 120vh;
        min-height: 500px;
    }
    
    .hero-content {
        height: calc(100vh - 4rem);
        padding: 1.5rem 0;
        gap: 1.5rem;
    }
    
    .hero-text {
        gap: 1rem;
    }
    
    .hero-image {
        height: 20rem;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 2.5rem;
        letter-spacing: -0.08rem;
        margin-bottom: 0.75rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
        line-height: 1.3rem;
        max-width: 90vw;
        height: auto;
        margin-bottom: 0.75rem;
    }
    
    .energy-unit {
        max-width: 20rem;
    }
    
    .about {
        padding: 3rem 0.75rem;
        margin-top: -1rem;
        height: 125vh;
    }
    
    .about-content {
        gap: 2rem;
        padding: 0 0.75rem;
        padding-top: 23em;
    }
    
    .section-title {
        font-size: 2rem;
        line-height: 2.5rem;
        margin-bottom: 0.75rem;
    }
    
    .section-description {
        font-size: 0.9rem;
        line-height: 1.4rem;
        margin-bottom: 1rem;
        max-width: 90vw;
    }
    
    .features {
        max-width: 90vw;
        gap: 1.5rem;
    }
    
    .feature {
        padding: 1.25rem;
        max-width: 18rem;
    }
    
    .feature-title {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }
    
    .feature-description {
        font-size: 0.875rem;
        line-height: 1.4rem;
    }
    
    .feature-icon {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto 0.75rem auto;
    }
    
    .regions {
        padding: 3rem 0.75rem;
        height: auto;
    }
    
    .section-header .section-title {
        font-size: 2rem;
        line-height: 2.5rem;
    }
    
    .region-card {
        height: 55vh;
        padding: 1.5rem 1rem;
    }
    
    .region-title {
        font-size: 1.25rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }
    
    .region-description {
        font-size: 0.9rem;
        line-height: 1.4rem;
        margin-bottom: 1rem;
    }
    
    .region-map {
        width: 12rem;
        height: 15rem;
        margin: 1rem auto 0;
    }
    
    .partnerships {
        padding: 3rem 0.75rem;
    }
    
    .partnerships .section-title {
        font-size: 2rem;
        line-height: 2.5rem;
        margin-bottom: 0.75rem;
    }
    
    .partnerships .section-description {
        font-size: 0.9rem;
        line-height: 1.4rem;
        margin-bottom: 1.5rem;
        max-width: 90vw;
    }
    
    .partners-logos {
        gap: 1.5rem;
    }
    
    .partner-logo {
        width: 12rem;
        height: 10rem;
    }
    
    .footer {
        padding: 1.5rem 0;
    }
    
    .footer-content {
        gap: 1rem;

    }
    
    .footer-left {
        gap: 0.75rem;
    }
    
    .footer-logo-img {
        width: 6rem;
        height: auto;
    }
    
    .footer-company {
        font-size: 1.1rem;
        font-weight: 500;
    }
    
    .footer-copyright {
        font-size: 0.9rem;
        opacity: 0.8;
    }
}

/* Extra Small Mobile */
@media (max-width: 320px) {
    .container {
        padding: 0 0.5rem;
    }
    
    .container-banner {
        padding-left: 0.5rem;
    }
    
    .hero-title {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }
    
    .hero-description {
        font-size: 0.85rem;
        line-height: 1.25rem;
    }
    
    .section-title {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }
    
    .section-description {
        font-size: 0.85rem;
        line-height: 1.3rem;
    }
    
    .feature {
        padding: 1rem;
        max-width: 16rem;
    }
    
    .feature-title {
        font-size: 1rem;
    }
    
    .feature-description {
        font-size: 0.8rem;
        line-height: 1.3rem;
    }
    
    .region-card {
        padding: 1.25rem 0.75rem;
        min-height: 20rem;
    }
    
    .region-title {
        font-size: 1.125rem;
    }
    
    .region-description {
        font-size: 0.85rem;
    }
    
    .region-map {
        width: 10rem;
        height: 12rem;
    }
    
    .partnerships .section-title {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }
    
    .partnerships .section-description {
        font-size: 0.85rem;
        line-height: 1.3rem;
    }
    
    .partner-logo {
        width: 10rem;
        height: 8rem;
    }
    
    .footer-logo-img {
        width: 5rem;
    }
    
    .footer-company {
        font-size: 0.9rem;
    }
    
    .footer-copyright {
        font-size: 0.75rem;
    }
}

.footer-logo-icon {
    position: relative;
    width: 40px;
    height: 40px;
}

.footer-circle {
    width: 40px;
    height: 40px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    border-right: none;
}

.footer-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
}

.footer-line {
    height: 2px;
    background: white;
    margin: 2px 0;
    border-radius: 1px;
}

.footer-line-1 { width: 12px; }
.footer-line-2 { width: 16px; }
.footer-line-3 { width: 14px; }

.footer-logo-text {
    display: flex;
    flex-direction: column;
    color: var(--color-white);
    font-family: var(--font-poppins);
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 1px;
}

.footer-collective {
    line-height: 1;
}

.footer-energy {
    line-height: 1;
    margin-top: -2px;
}

.footer-center {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 500;
}

.footer-right {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-noto-sans);
    font-size: 1rem; /* 16px */
    font-weight: 300;
    line-height: 1.5rem; /* 24px */
    letter-spacing: 0;
    text-align: right;
    opacity: 1;
}