/* ============================================================
   INICIO — DISEÑO CORPORATIVO GRUPO ENERGY
============================================================ */

/* ============================================================
   NAVBAR FLOTANTE (solo Inicio) — glass sobre el hero,
   sólido + pegado arriba al pasar el hero (.hero-cleared,
   togglea vía IntersectionObserver en js/inicio.js).
============================================================ */
body.page-inicio .header-reformular {
    background: rgba(2, 23, 28, 0.32) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    transition: background 0.4s ease, backdrop-filter 0.4s ease,
        border-color 0.4s ease, box-shadow 0.4s ease;
}

body.page-inicio .header-reformular .logo img {
    filter: brightness(0) invert(1) !important;
    transition: filter 0.4s ease;
}

body.page-inicio .header-reformular .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Mientras el navbar está en modo glass (todavía no se cruzó el hero), el
   relleno de hover es translúcido con blur propio — se lee como vidrio
   esmerilado, no como "el mismo verde pero un poco más oscuro" (que era
   indistinguible del sólido sobre una foto ya oscura). Una vez que
   .hero-cleared lo vuelve sólido (ver header CSS de más arriba), el hover
   pasa a opaco. */
body.page-inicio .header-reformular:not(.hero-cleared) .nav-link:hover {
    background: rgba(76, 183, 155, 0.45);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #fff !important;
}

body.page-inicio .header-reformular:not(.hero-cleared) .nav-link--netbilling:hover {
    background: rgba(191, 147, 94, 0.5);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #fff !important;
}

body.page-inicio .header-reformular.hero-cleared .nav-link:hover {
    background: var(--brand-green-primary);
    color: var(--abyss) !important;
}

body.page-inicio .header-reformular.hero-cleared .nav-link--netbilling:hover {
    background: var(--gold);
    color: var(--abyss) !important;
}

body.page-inicio .header-reformular .nav-link i {
    opacity: 0.65;
}

body.page-inicio .header-reformular .hamburger-btn span {
    background: #fff;
}

/* Estado sólido: una vez que el scroll pasa el hero */
body.page-inicio .header-reformular.hero-cleared {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

body.page-inicio .header-reformular.hero-cleared .logo img {
    filter: none !important;
}

body.page-inicio .header-reformular.hero-cleared .nav-link {
    color: var(--abyss) !important;
}

body.page-inicio .header-reformular.hero-cleared .hamburger-btn span {
    background: var(--abyss);
}

@media (prefers-reduced-motion: reduce) {
    body.page-inicio .header-reformular {
        transition: none;
    }
}

/* El hero debe empezar en el borde superior real de la página para que el
   navbar flote sobre la foto — sin esto, el margin-top que header.js aplica
   a #main-content (pensado para headers sólidos) deja una franja del fondo
   de página blanca detrás del navbar antes del hero. */
body.page-inicio #main-content {
    margin-top: 0 !important;
}

/* ============================================================
   REVEAL DE TÍTULOS POR PALABRA (js-word-reveal, ver js/inicio.js)
   Cada palabra entra desde abajo, enmascarada, al llegar al scroll —
   no al cargar la página. Sin JS o con reducir-movimiento, el título
   se ve completo desde el primer frame (nunca depende del JS).
============================================================ */
.js-word-reveal .wr-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.js-word-reveal .wr-word-inner {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-word-reveal.wr-revealed .wr-word-inner {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js-word-reveal .wr-word-inner {
        transform: none;
        transition: none;
    }
}

/* Énfasis secuencial: una vez revelado el título, el color recorre las
   palabras reales una por una en loop lento — el texto nunca desaparece,
   solo cambia de color, así se sigue leyendo completo todo el tiempo. */
.js-word-reveal.wr-revealed .wr-cycle {
    animation: titleColorCycle 6s ease-in-out infinite;
}

@keyframes titleColorCycle {

    0%,
    100% {
        color: inherit;
    }

    8%,
    25% {
        color: var(--brand-green-primary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wr-cycle {
        animation: none;
    }
}

/* "Net Billing" en el título: transición única de color al revelarse —
   "aterriza" en dorado y se queda ahí (nunca en loop, nunca gradiente sobre
   texto). Arranca un poco después del reveal por palabra para que se lea
   como un segundo latido, no como parte del mismo movimiento. */
.wr-gold {
    transition: color 0.9s ease 0.35s;
}

.js-word-reveal.wr-revealed .wr-gold {
    color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
    .wr-gold {
        transition: none;
    }
}

/* ============================================================
   HERO CORPORATIVO
============================================================ */
.hero-corp {
    position: relative;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
}

.hero-corp__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: transform, opacity;
    transform: scale(1);
    backface-visibility: hidden;
}

.hero-corp__bg.active {
    opacity: 1;
    animation: heroZoomOut 8s ease-out forwards;
}

@keyframes heroZoomOut {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }
}

.hero-corp__overlay {
    position: absolute;
    inset: 0;
    background:
        /* techo: solo lo justo para separar el navbar glass de la foto */
        linear-gradient(to bottom, rgba(2, 23, 28, 0.4) 0%, transparent 22%),
        /* piso: donde vive el texto, oscurece lo necesario para AA */
        linear-gradient(to top,
            rgba(2, 23, 28, 0.92) 0%,
            rgba(2, 23, 28, 0.55) 32%,
            transparent 62%),
        /* franja diagonal solo detrás del texto (izquierda); el resto de
           la foto queda visible sin lavado */
        linear-gradient(100deg,
            rgba(2, 23, 28, 0.72) 0%,
            rgba(2, 23, 28, 0.38) 34%,
            transparent 58%);
    z-index: 1;
}

@media (max-width: 1023px) {
    .hero-corp__overlay {
        background:
            linear-gradient(to bottom, rgba(2, 23, 28, 0.45) 0%, transparent 22%),
            linear-gradient(to top,
                rgba(2, 23, 28, 0.95) 0%,
                rgba(2, 23, 28, 0.65) 40%,
                transparent 68%);
    }
}

.hero-corp__content {
    position: relative;
    z-index: 2;
    padding: 0 0 4rem;
    text-align: left;
}

.hero-slider {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.hero-slider-panel {
    max-width: 760px;
}

.hero-corp__sub {
    margin: 1rem 0 2rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 46ch;
}

.hero-slider-nav {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.25s ease;
}

.hero-corp:hover .hero-slider-nav,
.hero-corp:focus-within .hero-slider-nav {
    opacity: 1;
}

.hero-slider-btn {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
    pointer-events: auto;
}

.hero-slider-btn {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.37);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.hero-slider-btn:hover {
    transform: scale(1.04);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.65);
}

.hero-slider-btn i {
    font-size: 1rem;
}

/* Dots del carrusel — visibles siempre (no solo en hover como las flechas),
   para que se lea como carrusel desde el primer frame. */
.hero-dots {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 0.55rem;
    margin-top: 1.75rem;
}

.hero-dot {
    width: 1.75rem;
    height: 3px;
    border: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, width 0.3s ease;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.hero-dot.active {
    width: 2.75rem;
    background: var(--brand-green-primary);
}

@media (max-width: 1023px) {
    .hero-dots {
        justify-content: center;
        margin-top: 1.5rem;
    }
}

@media (max-width: 1023px) {

    .hero-corp__content {
        text-align: center;
        padding: 0 1rem 4rem;
    }

    .hero-slider {
        flex-direction: column;
    }

    .hero-slider-nav {
        position: absolute;
        inset: 0;
        justify-content: space-between;
        padding: 0 1rem;
    }

    .hero-slider-btn {
        position: relative;
        width: auto;
        height: auto;
        padding: 0.75rem;
        border-radius: 0;
        border: none;
        background: transparent;
    }

    .hero-slider-btn i {
        font-size: 1.2rem;
    }

    .hero-corp__actions {
        justify-content: center !important;
    }

    .hero-corp__content {
        text-align: center;
        padding: 0 1rem 4rem;
    }

    .hero-eyebrow {
        justify-content: center;
    }

    .hero-corp__sub {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-corp__actions {
        justify-content: center !important;
    }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #4cb79b78;
    border: 1px solid rgb(76 183 155);
    color: #f3f3fbf0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.75rem;
}

.hero-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-green-primary);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

.hero-corp__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.04em;
    max-width: 30ch;
    /* Permite que el texto se extienda más antes de saltar de línea */
    margin: 0 0 1.5rem;
    /* Alineado a la izquierda */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-corp__title em {
    font-style: normal;
    color: var(--gold);
}

.hero-corp__sub {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 50ch;
    margin-left: 0;
    margin-right: 0;
    font-weight: 400;
    line-height: 1.65;
    margin-bottom: 2.5rem;
}

.hero-corp__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    /* Botones alineados a la izquierda */
}

/* Barra de servicios al pie del hero */
.hero-services-bar {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 23, 28, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.25rem 0;
    display: flex;
    overflow: hidden;
}

.hero-track {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    gap: 0;
    animation: marquee 40s linear infinite;
}

.hero-services-bar:hover .hero-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hero-track {
        animation: none;
    }
}

.hero-svc-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 2.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.hero-svc-item:hover {
    background: rgba(76, 183, 155, 0.1);
}

.hero-svc-item:last-child {
    border-right: none;
}

.hero-svc-item i {
    color: var(--brand-green-primary);
    font-size: 1.2rem;
    filter: drop-shadow(0 0 8px rgba(76, 183, 155, 0.4));
}

.hero-svc-item span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================================
   SOLUCIONES — carrusel de proyectos, en movimiento continuo,
   mismo mecanismo que .hero-track/.hero-services-bar (marquee CSS,
   se pausa al pasar el mouse, sin botones — flujo ambiental, no
   "slide a slide").
============================================================ */
.section-industries {
    padding: 6rem 0;
    overflow: hidden;
}

@media (max-width: 1023px) {
    .section-industries {
        padding: 4rem 0;
    }
}

.section-head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.industries-viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--abyss);
    transition: gap 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.industries-viewall i {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.industries-viewall:hover {
    color: var(--brand);
    gap: 0.7rem;
}

.industries-carousel {
    margin-top: 3rem;
    overflow: hidden;
}

.industries-track {
    display: flex;
    width: max-content;
    gap: 1.5rem;
    animation: industriesMarquee 42s linear infinite;
}

.industries-carousel:hover .industries-track {
    animation-play-state: paused;
}

@keyframes industriesMarquee {
    from {
        transform: translateX(0);
    }

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

@media (prefers-reduced-motion: reduce) {
    .industries-track {
        animation: none;
    }
}

.industry-card {
    position: relative;
    display: block;
    width: 260px;
    aspect-ratio: 3 / 4;
    border-radius: 1.25rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .industry-card {
        width: 320px;
    }
}

.industry-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 23, 28, 0.88) 0%, rgba(2, 23, 28, 0.15) 55%, transparent 80%);
    transition: background 0.4s ease;
}

.industry-card:hover .industry-card__overlay {
    background: linear-gradient(to top, rgba(2, 23, 28, 0.94) 0%, rgba(2, 23, 28, 0.3) 60%, transparent 85%);
}

.industry-card__body {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.5rem;
}

.industry-card__label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.industry-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease;
}

.industry-card:hover .industry-card__arrow {
    background: var(--brand-green-primary);
    border-color: var(--brand-green-primary);
    transform: rotate(45deg);
}


.section-head {
    width: 100%;
    text-align: center;
    /* Centrado crucial para hijos inline-block */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centrado para hijos flex */
    justify-content: center;
    margin-bottom: 3.5rem;
    gap: 0.5rem;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    margin-left: auto;
    /* Centra el section-label si es inline-flex */
    margin: 0 auto 1rem;
}

.section-label::before {
    content: '';
    width: 2rem;
    height: 2px;
    background: var(--gold);
    display: block;
}

.section-title-corp {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--abyss);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 auto 1rem;
    position: relative;
    display: inline-block;
}

/* Títulos en secciones oscuras */
.section-title-corp--white {
    color: #fff;
}

.section-desc-corp {
    font-size: 1.05rem;
    color: var(--text2);
    max-width: 55ch;
    line-height: 1.65;
}

/* ============================================================
   PROOFS
============================================================ */
.section-proofs {
    padding: 3rem 0 5rem;
    margin: 2rem 1rem 4rem !important;
    border-radius: 2rem;
}

.proofs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    overflow: hidden;
    margin-top: 1rem;
}

@media (min-width: 1024px) {
    .proofs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.proof-card {
    padding: 4rem 2.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    transition: background 0.3s ease;
}

.proof-icon {
    font-size: 4rem;
    color: var(--gold);
    margin: 0 auto 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: var(--abyss);
    border-radius: 50%;
    border: 2px solid var(--gold);
    transition: transform 0.8s cubic-bezier(.34, 1.56, 0.64, 1), filter 0.3s ease;
    perspective: 1000px;
    transform-style: preserve-3d;
    filter: drop-shadow(0 10px 20px rgba(191, 147, 94, 0.5));
}

.proof-card h3 {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.proof-card p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ============================================================
   QUICK CALC
============================================================ */
.section-quick-calc {
    position: relative;
    padding: 7rem 0;
    margin: 4rem 0 !important;
    background-image: url('https://grupoenergy.cl/wp-content/uploads/2022/06/portada-baja.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.section-quick-calc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--page) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.3) 80%, var(--page) 100%), rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    z-index: 1;
}

.quick-calc-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .quick-calc-layout {
        grid-template-columns: 4.5fr 7.5fr;
        gap: 6rem;
    }
}

.quick-calc-info {
    text-align: left;
}

.quick-calc-info .section-label,
.quick-calc-info .section-title-corp,
.quick-calc-info .section-desc-corp {
    color: var(--abyss) !important;
}

.quick-calc-tool-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2.5rem;
    padding: 5rem 4rem 4rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.4);
}

.calc-input-group label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    color: var(--abyss) !important;
    font-size: 1.05rem;
}

.bill-display {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1.5rem;
    border-radius: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.bill-display input {
    background: transparent;
    border: none;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--brand-green-primary);
    width: 100%;
    outline: none;
}

.calc-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5.5rem 1.5rem;
    padding: 5rem 0 0;
}

@media (min-width: 1024px) {
    .calc-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.result-item {
    padding: 3.5rem 1.25rem 2rem;
    border-radius: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 200px;
}

.result-item:nth-child(1) {
    background: linear-gradient(145deg, var(--gold), var(--gold-light));
    color: #fff;
}

.result-item:nth-child(2) {
    background: rgba(76, 183, 155, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(76, 183, 155, 0.25);
}

.result-icon {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--abyss);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.result-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
}

/* ============================================================
   ERNC / PARTNERS
============================================================ */
.section-ge-ernc {
    position: relative;
    padding: 8rem 0;
    background: var(--abyss);
    margin: 8rem 1rem !important;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.section-ge-ernc .step-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
    transition: all 0.4s ease;
}

.section-ge-ernc .step-item:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--brand-green-primary) !important;
    transform: translateY(-5px) translateX(5px);
}

/* ============================================================
   TESTIMONIALS
============================================================ */
.section-testimonials {
    padding: 8rem 0;
    background: var(--green-bg);
    overflow: hidden;
}

.testimonials-swiper {
    padding: 2rem 1rem 4rem !important;
    overflow: visible !important;
}

.testimonial-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 2rem;
    padding: 3rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    box-shadow: var(--shmd);
}

.testimonial-quote {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text2);
    font-style: italic;
    margin-bottom: 2.5rem;
    position: relative;
}

.testimonial-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--white);
}

/* ============================================================
   STORE
============================================================ */
.section-store {
    padding: 8rem 0;
    background: var(--white);
    margin: 8rem 1rem !important;
    border-radius: 2rem;
    border: 2px solid var(--gold);
}

.store-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .store-grid {
        grid-template-columns: 6.5fr 5.5fr;
    }
}

.store-image {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    height: 520px;
}

.store-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--gold);
    width: 95px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: spin-slow 20s linear infinite;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   PORTFOLIO
============================================================ */
.section-portfolio {
    padding: 7rem 0;
    background: var(--abyss);
    margin: 0 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.portfolio-swiper {
    width: 100%;
    padding: 2rem 0 4rem;
    overflow: visible !important;
}

.portfolio-card {
    width: 520px;
    max-width: 90vw;
    position: relative;
    height: 480px;
    border-radius: 1.5rem;
    overflow: hidden;
}

.portfolio-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* ============================================================
   ABOUT
============================================================ */
.section-about {
    padding: 8rem 0;
    background: transparent;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem;
}

@media (min-width: 1024px) {
    .about-grid {
        grid-template-columns: 5fr 5fr;
        gap: 6rem;
    }
}

.about-img-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    position: relative;
}

.about-img-collage img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 1.25rem;
}

.about-img-collage img:first-child {
    grid-column: span 2;
    height: 280px;
}

/* ============================================================
   DIFFERENTIATORS
============================================================ */
.section-diff {
    padding: 6rem 0;
    background: var(--abyss);
    margin: 0 1rem;
    border-radius: 2rem;
    text-align: center;
}

.diff-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .diff-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .diff-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.diff-item {
    padding: 2.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ============================================================
   INSIGHTS
============================================================ */
.section-insights {
    padding: 6rem 0;
}

.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .insights-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.insight-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    overflow: hidden;
}

/* ============================================================
   SECCIÓN INNOVACIÓN — blueprint de ingeniería (SECCIÓN 2)
   Fondo abyss + grilla fina en teal, como un plano técnico. Rompe con
   el resto de la página (toda clara) a propósito: es el respiro oscuro
   entre el hero y el resto del contenido.
============================================================ */
.section-innovation--blueprint {
    padding: 7rem 0;
    background: var(--abyss);
    border-radius: 0;
    margin: 0;
}

/* El ::cycle del título ya usa color:inherit en su estado "apagado"
   (ver keyframes titleColorCycle más arriba), así que solo con poner el
   h2 en blanco el mismo ciclo se adapta automáticamente al fondo oscuro. */
.section-innovation--blueprint .section-title-corp {
    color: #fff;
}

.innovation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 4rem;
    background: rgba(76, 183, 155, 0.25);
    border: 1px solid rgba(76, 183, 155, 0.25);
}

@media (min-width: 768px) {
    .innovation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .innovation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.innovation-item {
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.4rem 1.75rem;
    background: var(--abyss);
    transition: background 0.3s ease;
}

.innovation-item:hover {
    background: #082227;
}

/* Esquinas tipo visor de cámara — se dibujan al hover, referencia directa
   a planos/documentación técnica de ingeniería. */
.innovation-item::before,
.innovation-item::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--brand-green-primary);
    border-style: solid;
    border-width: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.innovation-item::before {
    top: 10px;
    left: 10px;
    border-top-width: 2px;
    border-left-width: 2px;
}

.innovation-item::after {
    bottom: 10px;
    right: 10px;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

.innovation-item:hover::before,
.innovation-item:hover::after {
    opacity: 1;
}

/* Cascada: cada tarjeta entra un poco después que la anterior en vez de
   todas juntas (mismo fadeInUp de .reveal-anim, solo con delay escalonado). */
.innovation-grid .innovation-item:nth-child(2) { animation-delay: 0.08s; }
.innovation-grid .innovation-item:nth-child(3) { animation-delay: 0.16s; }
.innovation-grid .innovation-item:nth-child(4) { animation-delay: 0.24s; }
.innovation-grid .innovation-item:nth-child(5) { animation-delay: 0.32s; }
.innovation-grid .innovation-item:nth-child(6) { animation-delay: 0.4s; }

.innovation-chip {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: var(--green-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.innovation-chip img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}

.innovation-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--brand-green-primary);
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}

.innovation-item h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.25;
    font-family: 'Bricolage Grotesque', sans-serif;
}

.innovation-item p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    max-width: 32ch;
}

/* ============================================================
   SECCIÓN SOSTENIBILIDAD (SECCIÓN 5)
============================================================ */
.section-sustainability {
    padding: 10rem 0;
    border-radius: 0;
    margin: 0;
}

.sustainability-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .sustainability-grid {
        grid-template-columns: 1.1fr 0.9fr;
        /* Texto más ancho que la imagen */
        gap: 6rem;
    }
}

.section-sustainability .section-label {
    margin: 0 0 1rem;
    justify-content: flex-start;
}

.section-sustainability .section-title-corp {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2rem;
    text-align: left;
}

/* Eliminamos el subrayado específicamente para esta sección */
.section-sustainability .section-title-corp::after {
    display: none;
}

.section-sustainability .section-desc-corp {
    max-width: 100%;
    text-align: left;
}

.sustainability-image {
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: var(--shlg);
}

/* La imagen se reemplazó por un video-trigger (ver global.css); estas
   reglas solo aplican si alguna vez vuelve a usarse una <img> suelta
   dentro de .sustainability-image. */
.sustainability-image > img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.sustainability-image:hover > img {
    transform: scale(1.03);
}

/* ============================================================
   SECCIÓN TERRENOS (SECCIÓN 4)
============================================================ */
.section-land {
    position: relative;
    padding: 12rem 0;
    margin: 4rem 0 !important;
    background-color: var(--abyss);
    /* Color base mientras carga */
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    /* Por defecto scroll para mejor rendimiento */
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-image 0.8s ease-in-out;
}

/* Se activa solo cuando el usuario está cerca de la sección */
.section-land.bg-loaded {
    background-image: url('https://grupoenergy.cl/wp-content/uploads/2026/06/terreno-paisaje-natural-pin-ubicacion-scaled-1.webp');
}

@media (min-width: 1024px) {
    .section-land.bg-loaded {
        background-attachment: fixed;
        /* Parallax solo en computadoras */
    }
}

.section-land__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(2, 23, 28, 0.8) 0%, rgba(2, 23, 28, 0.4) 100%);
    z-index: 1;
}

.section-land .container {
    position: relative;
    z-index: 2;
    max-width: 850px;
    /* Estrecho para mejor lectura del título */
}

.land-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
    /* Sin subrayado por diseño */
}

/* ============================================================
   CTA CORP
============================================================ */
.section-cta-corp {
    padding: 8rem 0;
    background: var(--abyss);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.section-cta-corp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(76, 183, 155, 0.17) 0%, #00000073 70%), url('https://grupoenergy.cl/wp-content/uploads/2024/11/green-business-company-and-solar-energy-environmen-2024-11-01-22-11-49-utc-scaled.jpg') center/cover;
    opacity: 0.25;
    z-index: 0;
}

/* Aurora: gradientes suaves en movimiento lento detrás del texto — sin
   líneas ni brillo, técnica distinta a la textura descartada antes. */
.section-cta-corp::after {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 20% 30%, rgba(76, 183, 155, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(191, 147, 94, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 50% 20%, rgba(76, 183, 155, 0.12) 0%, transparent 40%);
    filter: blur(60px);
    z-index: 0;
    animation: auroraDrift 22s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-4%, 3%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .section-cta-corp::after {
        animation: none;
    }
}

.section-cta-corp .container {
    position: relative;
    z-index: 1;
}

.section-cta-corp .cta-corp__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.section-cta-corp .cta-corp__title em {
    font-style: normal;
    color: var(--gold);
}

/* Máquina de escribir en "Hablemos." — arrancado por JS (.tw-armed) solo si
   hay JS y no hay reducir-movimiento; sin eso, el texto queda visible tal
   cual, nunca depende de la animación para leerse. */
.section-cta-corp .cta-corp__title em.js-typewriter.tw-armed {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    width: 0;
    border-right: 0.09em solid var(--gold);
}

.section-cta-corp .cta-corp__title em.js-typewriter.tw-play {
    animation: ctaTypewriter 0.9s steps(9, end) forwards,
        ctaCaret 0.8s step-end infinite;
}

@keyframes ctaTypewriter {
    to {
        width: 9ch;
    }
}

@keyframes ctaCaret {

    0%,
    100% {
        border-color: var(--gold);
    }

    50% {
        border-color: transparent;
    }
}

.section-cta-corp .cta-corp__sub {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 60ch;
    margin: 0 auto 2.5rem;
    line-height: 1.65;
}

.section-cta-corp .cta-corp__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
}

.section-cta-corp .btn-primary-corp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background-color: var(--brand);
    color: var(--abyss);
    border-radius: 100px;
    font-weight: 700;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 4px 15px rgba(76, 183, 155, 0.25);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.section-cta-corp .btn-primary-corp:hover {
    background-color: var(--brand2);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(76, 183, 155, 0.35);
}

.section-cta-corp .btn-dark-corp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background-color: var(--abyss);
    color: var(--white);
    border-radius: 100px;
    font-weight: 700;
    padding: 1rem 2rem;
    font-size: 1rem;
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .25);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

.section-cta-corp .btn-dark-corp:hover {
    background-color: var(--lagoon);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    border-color: var(--brand);
}

.section-cta-corp .cta-corp__note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2rem;
    letter-spacing: 0.02em;
}

@media (max-width: 767px) {
    .section-cta-corp {
        padding: 5rem 0;
    }
    
    .section-cta-corp .cta-corp__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0 1.5rem;
    }
    
    .section-cta-corp .btn-primary-corp,
    .section-cta-corp .btn-dark-corp {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================
   SECCIÓN QUICK CALC (MINI SIMULADOR)
============================================================ */
.section-quick-calc {
    position: relative;
    padding: 7rem 0;
    margin: 4rem 0 !important;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.quick-calc-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 1023px) {
    .quick-calc-info {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .quick-calc-info .section-label {
        justify-content: center;
        width: 100%;
    }

    .quick-calc-info .section-title-corp {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .quick-calc-info .section-desc-corp {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .quick-calc-cta-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .calc-disclaimer {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1024px) {
    .quick-calc-layout {
        grid-template-columns: 4.5fr 7.5fr;
        gap: 6rem;
    }
}

.quick-calc-info {
    text-align: left;
}


.quick-calc-info .section-title-corp,
.quick-calc-info .section-desc-corp {
    color: var(--abyss) !important;
}

.quick-calc-info .section-label::before {
    background: var(--gold);
}

.quick-calc-cta-wrap {
    margin-top: 2rem;
}

.calc-disclaimer {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--text3);
    font-style: italic;
    line-height: 1.6;
    max-width: 45ch;
}

.calc-input-group--light {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--white);
    border-radius: 1.5rem;
}

.calc-input-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.calc-controls-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .calc-controls-row {
        flex-direction: row;
    }
}

.input-label-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.quick-calc-tool-box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 3rem 2.5rem;
    box-shadow: var(--shlg);
}

.boleta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--border2);
}

.boleta-header h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--abyss);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.boleta-logo {
    height: 1.75rem;
    width: auto;
}

.boleta-header span {
    font-size: 0.9rem;
    color: var(--text3);
    font-weight: 500;
}

.calc-input-group label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    color: var(--white) !important;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-align: left;
}

/* Corrección para el texto dentro del contenedor claro */
.calc-input-group--light label,
.calc-input-group--light .input-hint,
.calc-input-group--light .range-labels {
    color: var(--abyss) !important;
}

.slider-container {
    flex: 1;
    width: 100%;
}

.input-hint {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bill-display {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1.5rem;
    border-radius: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    width: 100%;
}

@media (min-width: 768px) {
    .bill-display {
        width: 220px;
        flex-shrink: 0;
    }
}

.bill-display:focus-within {
    border-color: var(--gold);
    box-shadow: 0 10px 30px -10px rgba(191, 147, 94, 0.2);
}

.bill-display .currency {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--brand-green-primary);
    margin-right: 0.5rem;
    user-select: none;
}

.bill-display input {
    background: transparent;
    border: none;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--brand-green-primary);
    width: 100%;
    outline: none;
}

.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 10px;
    background: linear-gradient(90deg, #2cb490 0%, #008d6f5c 0%);
    outline: none;
    margin-top: 0;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text3);
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 4px solid var(--brand-green-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    border-color: var(--gold);
}

.boleta-results {
    margin-top: 3rem;
}

.boleta-highlight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .boleta-highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.highlight-item {
    background: var(--green-bg);
    padding: 1.5rem;
    border-radius: 1.25rem;
    text-align: center;
}

.highlight-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    display: block;
}

.highlight-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1.2;
    margin-top: 0.25rem;
}

#kit-recommendation {
    font-size: 1.2rem;
    color: var(--abyss);
}

.boleta-main-display {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem 0;
    border-bottom: 1px dashed var(--border2);
    border-top: 1px dashed var(--border2);
}

@media (min-width: 768px) {
    .boleta-main-display {
        grid-template-columns: 2fr 1fr;
    }
}

.new-bill-summary {
    text-align: center;
    padding-left: 2rem;
}

@media (min-width: 768px) {
    .new-bill-summary {
        border-left: 1px dashed var(--border2);
    }
}

.new-bill-summary .new-bill-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    display: block;
}

.new-bill-summary .new-bill-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1.1;
    margin: 0.5rem 0;
}

.boleta-history-chart {
    margin-top: 0;
}

.history-chart-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.5rem;
}

.history-chart-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    /* Aumentamos el gap para hacer las barras más delgadas */
    align-items: flex-end;
    height: 120px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border2);
}

.history-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.history-bar {
    width: 50%;
    /* Hacemos la barra más delgada dentro de su celda */
    background-color: var(--border2);
    border-radius: 3px 3px 0 0;
    transition: height 0.5s ease;
    position: relative;
    cursor: pointer;
}

.history-bar:hover {
    background-color: var(--brand);
}

.history-bar .tooltip {
    display: none;
    /* Se maneja con JS o hover */
}

.history-bar-month {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text3);
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.bar {
    width: 80%;
    background-color: var(--border2);
    border-radius: 6px 6px 0 0;
    transition: height 0.5s ease;
}

.bar--new {
    background-color: var(--brand);
}

.bar-value {
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--abyss);
}

.boleta-summary {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px dashed var(--border2);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .boleta-summary {
        grid-template-columns: 1fr 1fr;
    }
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--green-bg);
    padding: 1.5rem;
    border-radius: 1.25rem;
}

.summary-item i {
    font-size: 1.75rem;
    color: var(--brand);
}

.summary-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
}

.summary-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--abyss);
}

.summary-item:first-child .summary-value {
    color: var(--brand);
}

.boleta-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    text-align: center;
}

.boleta-disclaimer {
    font-size: 0.85rem;
    color: var(--text2);
    line-height: 1.5;
    max-width: 40ch;
    margin: 0 auto 1.5rem;
}

.boleta-disclaimer strong {
    color: var(--gold);
}

/* ============================================================
   SECCIÓN: PROYECTOS REALES — NET BILLING (CARRUSEL)
============================================================ */
.section-real-projects {
    /* Changed to light background */
    padding: 100px 0;
    background: var(--page);
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
}

.real-projects-swiper {
    width: 100%;
    padding: 40px 0 80px !important;
    overflow: visible !important;
}

.real-projects-swiper .swiper-slide {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
    /* Adjusted opacity for light theme stack */
    transform: scale(0.9) translateY(10px);
    /* Adjusted scale and translateY for light theme stack */
    filter: blur(0.5px);
    /* Subtle blur */
    z-index: 1;
    /* Asegura el orden de apilamiento */
}

.real-projects-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1.05);
    /* Slightly less aggressive scale for light theme */
    z-index: 10;
    filter: blur(0);
}

.project-card {
    height: 480px;
    /* Ajustado para coincidir con el carrusel de gran escala */
    border-radius: 0;
    position: relative;
    overflow: hidden;
    background: var(--white);
    /* Changed to white background */
    display: flex;
    flex-direction: column;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
    /* Added box-shadow transition */
    box-shadow: var(--shmd);
    /* Added subtle shadow */
    border: 1px solid var(--border);
    /* Added subtle border */
}

.project-card:hover {
    transform: translateY(-8px);
    /* Lift effect on hover */
    box-shadow: var(--shlg);
    /* More prominent shadow on hover */
    border-color: var(--brand);
    /* Highlight border on hover */
}

.project-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    opacity: 1;
    /* Full opacity for images on light theme */
    transition: all 0.8s ease;
    z-index: 1;
}

.project-card:hover .project-card__image {
    transform: scale(1.05);
    /* Subtle zoom on hover */
    opacity: 1;
}

.project-card__body {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: auto;
    width: calc(100% - 3rem);
    max-width: 420px;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.705);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid var(--border);
    z-index: 2;
    color: var(--abyss);
    text-align: left;
}

.project-card__title {
    font-size: 1.4rem;
    color: var(--abyss);
    margin-bottom: 0.5rem;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.project-card__meta {
    font-size: 0.85rem;
    /* Ajustado para coincidir con el carrusel de gran escala */
    color: var(--text2);
    /* Changed text color to dark */
    font-weight: 400;
    line-height: 1.5;
}

/* Swiper Pagination (Dots) */
.real-projects-pagination {
    bottom: 20px !important;
}

.real-projects-pagination .swiper-pagination-bullet {
    background: var(--abyss);
    /* Changed to dark for contrast on light background */
    opacity: 0.2;
    transition: all 0.3s ease;
}

.real-projects-pagination .swiper-pagination-bullet-active {
    background: var(--brand);
    opacity: 1;
    width: 30px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .project-card__body {
        padding: 2.5rem 1.5rem;
    }

    .project-card__title {
        font-size: 1.8rem;
    }

    .project-card {
        height: 500px;
    }
}


/* ============================================================
   SECCIÓN: BLOG / ACTUALIDADES (HOME)
============================================================ */
.section-home-blog {
    padding: 8rem 0;
    overflow: hidden;
}

.home-blog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

@media (max-width: 767px) {
    .home-blog-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

.home-blog-swiper {
    width: 100%;
    padding: 0.5rem 0 4rem !important;
    overflow: visible !important;
}

/* Entrada en cascada de las tarjetas — opacidad únicamente, nunca transform:
   Swiper ya usa transform en .swiper-slide para posicionar cada tarjeta en
   el carrusel, así que animar transform acá lo rompería. */
@keyframes homeBlogCardIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.home-blog-swiper .home-blog-card.reveal-anim.revealed {
    animation: homeBlogCardIn 0.6s ease forwards;
}

.home-blog-swiper .swiper-slide.home-blog-card:nth-child(2) { animation-delay: 0.1s; }
.home-blog-swiper .swiper-slide.home-blog-card:nth-child(3) { animation-delay: 0.2s; }
.home-blog-swiper .swiper-slide.home-blog-card:nth-child(4) { animation-delay: 0.3s; }

.home-blog-card {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
    box-shadow: var(--shmd);
}

.home-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shlg);
}

.home-blog-card__img-wrap {
    display: block;
    height: 220px;
    overflow: hidden;
}

.home-blog-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.home-blog-card:hover .home-blog-card__img-wrap img {
    transform: scale(1.05);
}

.home-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.75rem;
    flex: 1;
}

.home-blog-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.home-blog-cat {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    background: rgba(76, 183, 155, 0.1);
    border: 1px solid rgba(76, 183, 155, 0.28);
    padding: 0.22rem 0.7rem;
    border-radius: 9999px;
}

.home-blog-date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text3);
    font-weight: 500;
}

.home-blog-date i {
    color: var(--brand);
    font-size: 0.7rem;
}

.home-blog-card__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--abyss);
    line-height: 1.25;
    margin: 0;
}

.home-blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.home-blog-card__title a:hover {
    color: var(--brand);
}

.home-blog-card__excerpt {
    font-size: 0.88rem;
    color: var(--text2);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.home-blog-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    margin-top: auto;
    transition: gap 0.2s ease, color 0.2s ease;
}

.home-blog-readmore i {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}

.home-blog-readmore:hover {
    color: var(--abyss);
    gap: 0.65rem;
}

.home-blog-pagination {
    bottom: 0 !important;
}

.home-blog-pagination .swiper-pagination-bullet {
    background: var(--abyss);
    opacity: 0.2;
    transition: all 0.3s ease;
}

.home-blog-pagination .swiper-pagination-bullet-active {
    background: var(--brand);
    opacity: 1;
    width: 30px;
    border-radius: 4px;
}

.home-blog-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

/* ============================================================
   SECCIÓN NET BILLING (PROTAGONISTA DEL INICIO)
============================================================ */
.section-netbilling-home {
    padding: 7rem 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(76, 183, 155, 0.10) 0%, transparent 45%),
        var(--green-bg);
    border-top: 1px solid var(--border2);
    border-bottom: 1px solid var(--border2);
}

.nbh-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .nbh-grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 5rem;
    }
}

.nbh-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--brand2);
    background: rgba(76, 183, 155, 0.14);
    border: 1px solid rgba(76, 183, 155, 0.30);
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

.nbh-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    color: var(--abyss);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.nbh-desc {
    font-size: 1.1rem;
    color: var(--text2);
    line-height: 1.7;
    max-width: 52ch;
    margin-bottom: 2rem;
}

.nbh-benefits {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 560px) {
    .nbh-benefits {
        grid-template-columns: 1fr 1fr;
    }
}

.nbh-benefits li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--abyss);
}

.nbh-benefits li i {
    color: var(--brand);
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

/* Modo carrusel: JS (js/inicio.js) agrega esta clase solo si hay JS y no
   hay reducir-movimiento. Sin eso, la lista de arriba se queda tal cual —
   los 4 beneficios visibles y quietos, nunca se pierde información. */
.nbh-benefits.nbh-benefits--carousel {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 2.75rem;
    margin-bottom: 0.75rem;
}

.nbh-benefits--carousel li {
    grid-row: 1;
    grid-column: 1;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.nbh-benefits--carousel li.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nbh-benefits-dots {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.nbh-benefits-dots span {
    width: 1.25rem;
    height: 3px;
    border-radius: 2px;
    background: var(--border2);
    transition: background 0.3s ease, width 0.3s ease;
}

.nbh-benefits-dots span.active {
    width: 2rem;
    background: var(--brand-green-primary);
}

.nbh-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

/* Link secundario, demovido a texto para que "Calcula tu ahorro" sea el
   único botón real de la sección (el que promocionamos). */
.nbh-link-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--abyss);
    transition: gap 0.2s ease, color 0.2s ease;
}

.nbh-link-secondary i {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.nbh-link-secondary:hover {
    color: var(--brand);
    gap: 0.7rem;
}

.nbh-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}

/* Boleta eléctrica estilizada — el visual principal de la sección. El monto
   baja rodando (odómetro) hasta el valor con Net Billing al entrar en
   scroll; sin JS o con reducir-movimiento, ya muestra el valor final. */
.nbh-receipt {
    position: relative;
    width: 100%;
    max-width: 22rem;
    background: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: var(--shlg);
    padding: 2rem 2rem 1.75rem;
    transform: rotate(-1.4deg);
    clip-path: polygon(0 0,
            100% 0,
            100% 92%,
            87.5% 100%,
            75% 92%,
            62.5% 100%,
            50% 92%,
            37.5% 100%,
            25% 92%,
            12.5% 100%,
            0 92%);
}

.nbh-receipt__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 1.5rem;
}

.nbh-receipt__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--abyss);
}

.nbh-receipt__brand i {
    color: var(--gold);
}

.nbh-receipt__amount {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    color: var(--abyss);
    line-height: 1;
    margin-bottom: 0.6rem;
}

.nbh-receipt__currency {
    font-size: 1.6rem;
    vertical-align: top;
    position: relative;
    top: 0.5rem;
    margin-right: 0.15rem;
    color: var(--text2);
}

.nbh-receipt__digits {
    font-size: 3.2rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.nbh-receipt__tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand2);
    background: rgba(76, 183, 155, 0.12);
    border-radius: 9999px;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1.5rem;
}

.nbh-receipt__perforation {
    border-top: 1px dashed var(--border2);
    margin-bottom: 1.5rem;
}

.nbh-receipt__savings {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.nbh-receipt__savings-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-green-primary);
}

.nbh-receipt__savings-label {
    font-size: 0.82rem;
    color: var(--text2);
    max-width: 14rem;
}

@media (max-width: 1023px) {
    .nbh-receipt {
        transform: none;
    }
}

@media (max-width: 1023px) {
    .section-netbilling-home {
        padding: 5rem 0;
    }
}