/* Importar fuente Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Configuración Base */
html {
    scroll-behavior: smooth;
    font-family: 'Inter', system-ui, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* DEGRADADOS PERSONALIZADOS */

/* Degradado Hero: Más profundo para mejor contraste con texto blanco */
.gradient-bg {
    background: linear-gradient(145deg, #112244 0%, #1a3c6e 40%, #236c3d 100%);
}

/* Degradado Calculadora: Suave y claro */
.calculator-section-bg {
    background: linear-gradient(to bottom right, #ffffff, #f0f4f8);
}


/* ANIMACIONES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-right {
    animation: fadeInRight 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
    opacity: 0;
}

/* Component classes moved from inline styles */
.logo-nav {
    height: 8.64rem; /* increased 20% from 7.2rem */
    width: auto;
}

.logo-footer {
    height: 6.912rem; /* increased 20% from 5.76rem */
    width: auto;
}

/* Button helper (example reusable class for primary CTA) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
}

/* Color palette variables (match Tailwind autogen colors) */
:root {
    --autogen-blue: #1a3c6e;
    --autogen-green: #236c3d;
    --autogen-gold: #ebb726;
    --autogen-cream: #f9f7f2;
    --autogen-light: #e2e8f0;
    --autogen-dark: #111827;
}

/* Hero gradient tuned to highlight logo and text */
.gradient-bg {
    background: linear-gradient(150deg, #08304f 0%, #1a3c6e 35%, #236c3d 100%);
    color: white;
    position: relative;
}

/* Alias/compatibility for indexorg hero class */
.hero-gradient {
    background: linear-gradient(150deg, #08304f 0%, #1a3c6e 35%, #236c3d 100%);
    color: white;
    position: relative;
}

/* Diagonal overlay to match mockup visual (subtle darker stripe) */
.gradient-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 50%);
    transform: skewX(-12deg) translateX(-6%);
    pointer-events: none;
}

/* Ensure hero text stands out */
.gradient-bg h1,
.gradient-bg h2,
.gradient-bg p,
.gradient-bg span {
    color: white !important;
    text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Calculator background: soft, keeps legibility */
.calculator-section-bg {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 50%, #f0f4f8 100%);
    color: var(--autogen-dark);
}

/* Prevent a flat white seam between soluciones and beneficios by adding a subtle gradient */
#servicios {
    background: linear-gradient(180deg, #ffffff 0%, rgba(249,247,242,0.6) 40%, var(--autogen-cream) 100%);
}

/* CTA primary: gold -> cream gradient that preserves gold accent */
.btn-primary--gold {
    background: linear-gradient(90deg, var(--autogen-gold), #ffe89e);
    color: var(--autogen-blue);
    box-shadow: 0 10px 30px rgba(26,60,110,0.12);
}
.btn-primary--gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(26,60,110,0.16);
}

/* Nav links hover consistency */
nav a:hover {
    color: var(--autogen-gold) !important;
    transition: color 180ms ease;
}

/* Top bar cream tone with subtle tint of brand blue/green */
.site-navbar {
    background: linear-gradient(180deg, rgba(250,248,244,0.98), rgba(243,246,242,0.98));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(26,60,110,0.06);
    /* Increase top bar height by 10% relative to inner h-24 (6rem) */
    --navbar-inner-height: calc(6rem * 1.1);
}

/* Force the inner h-24 element to use the increased navbar height */
.site-navbar .h-24 { height: var(--navbar-inner-height) !important; }

/* Mobile menu panel tweaks (keeps menu readable on tablets/phones) */
.mobile-menu-panel {
    box-shadow: 0 8px 30px rgba(17,24,39,0.06);
    z-index: 49;
}
.mobile-menu-panel a { display: block; }
.mobile-menu-panel .bg-autogen-green { align-self: flex-start; }

/* Ensure navbar inner height is slightly larger on tablet widths to avoid cut buttons */
@media (min-width: 640px) and (max-width: 1024px) {
    .site-navbar .h-24 { height: calc(var(--navbar-inner-height) + 0.6rem) !important; }
}


/* Make nav links darker for contrast on cream bar */
.site-navbar .text-autogen-cream {
    color: var(--autogen-blue) !important;
}

/* Image accents: slightly boost contrast/saturation so brand colors pop */
.rounded-2xl img,
.rounded-full img {
    filter: saturate(1.05) contrast(1.02);
}

/* Cards: subtle border using gold tint for hover */
.card-hover:hover {
    box-shadow: 0 12px 30px rgba(17,24,39,0.08);
    border-color: rgba(235,183,38,0.14) !important;
}

/* Small responsive tweak for logo sizing via classes */
@media (max-width: 768px) {
    .logo-nav { height: 6.048rem; }
    .logo-footer { height: 5.5296rem; }
}

/** removed temporary benefit-flex and section-contrast styles (reverted) **/

/* Tab content show/hide used by calculator */
.tab-content { display: none; animation: fadeInUp 0.35s ease-in-out; }
.tab-content.active { display: block; }

/* Benefit card styling to match aesthetic */
.benefit-card {
    background: var(--autogen-cream);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    border: 1px solid rgba(0,0,0,0.02);
}
.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(17,24,39,0.08);
    border-color: rgba(235,183,38,0.12);
}

.icon-circle {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 6px 18px rgba(17,24,39,0.06);
}

.icon-circle svg,
.icon-circle i {
    width: 2.4rem;
    height: 2.4rem;
}

/* Icon color variants */
.icon-blue { background: rgba(26, 60, 110, 0.803); color: var(--autogen-gold); }
.icon-green { background: rgba(30, 94, 53, 0.877); color: #ffffff; }
.icon-gold { background: rgba(232, 180, 38, 0.804); color: var(--autogen-blue); }

/* Mobile adjustments for calculator and small screens */
@media (max-width: 768px) {
    /* Stack the two-column calculator layout */
    #calculadora .lg\:grid-cols-2, #calculadora .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Reduce paddings inside the calculator panels */
    #calculadora .p-10, #calculadora .p-16, #calculadora .p-6 {
        padding: 1rem !important;
    }

    /* Scale down headings and large text to avoid overflow */
    #calculadora .text-4xl, #calculadora h2 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    #calculadora .text-2xl {
        font-size: 1.125rem !important;
    }
    #calculadora .text-3xl {
        font-size: 1.25rem !important;
    }

    /* Result numbers sizing */
    #calculadora #res-panels {
        font-size: 3rem !important;
        line-height: 1 !important;
    }

    /* Inputs: reduce font + padding so values fit */
    #calculadora input[type="number"], #calculadora .kwh-input {
        font-size: 1rem !important;
        padding: .65rem .75rem !important;
    }

    /* Ensure left-border copy fits */
    #calculadora .border-l-4 {
        padding-left: .75rem !important;
    }

    /* Prevent long text from overflowing cards */
    #calculadora p, #calculadora .leading-relaxed {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Reduce blue result panel padding */
    #calculadora .bg-autogen-blue {
        padding: 1rem !important;
    }

    /* Adjust expansion badge sizing */
    #calculadora #expansion-badge { font-size: 0.9rem !important; padding: .5rem !important; }
}

/* Currency icon positioning for invoice input (prevents overlap on small screens) */
.currency-icon {
    left: 1.25rem; /* matches Tailwind left-5 */
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    pointer-events: none;
}

.input-with-currency {
    /* ensures the input leaves space for the currency symbol */
    padding-left: 4rem; /* increased to avoid overlap with placeholder on small screens */
}

@media (max-width: 640px) {
    .currency-icon {
        font-size: 0.95rem; /* slightly smaller on phones */
        left: 1.2rem; /* push the Q a bit right so it doesn't crowd the edge */
        z-index: 10;
    }
    .input-with-currency {
        padding-left: 5rem !important; /* move placeholder/text further right on small screens */
    }
}

/* Stronger specificity to override other mobile padding rules */
@media (max-width: 768px) {
    #calculadora .input-with-currency {
        padding-left: 5rem !important;
        padding-right: 0.75rem !important;
        padding-top: .65rem !important;
        padding-bottom: .65rem !important;
        box-sizing: border-box;
    }
    #calculadora .currency-icon {
        left: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Styles for calculator informational notes */
.calc-notes p { margin: 0; }
.calc-notes ul { margin: 0; }
.calc-notes .font-semibold { font-weight: 700; }

@media (max-width: 640px) {
    .calc-notes { font-size: 0.95rem; padding: 0.75rem; }
}