/* ==========================================
   SmartConstructIA - Main Stylesheet
   Extracted from inline <style> in index.html
   ========================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

/* Offset para navegación precisa */
section[id] {
    scroll-margin-top: 70px;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    /* Sharper rendering optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
 * FIX: Eliminado `* { backface-visibility: hidden; }` que estaba aquí.
 * Causaba problemas de rendering en iframes (Google Maps), videos y ciertos elementos.
 */

/* Crisp text during transforms */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li {
    transform: translateZ(0);
}

/* --- FONDO ESPACIAL --- */
.space-bg {
    background-color: #050505;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    position: relative;
    overflow: hidden;
}

/* Estrellas (Capa 1, 2 y 3) */
.stars,
.stars2,
.stars3 {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.stars {
    width: 1px;
    height: 1px;
    box-shadow: 1744px 122px #FFF, 134px 1321px #FFF, 92px 859px #FFF, 1600px 300px #FFF, 400px 600px #FFF, 800px 100px #FFF, 1200px 900px #FFF, 450px 1200px #FFF, 900px 200px #FFF, 200px 1800px #FFF, 1500px 1400px #FFF, 144px 1122px #FFF, 534px 221px #FFF, 392px 459px #FFF, 1100px 800px #FFF, 700px 1600px #FFF, 200px 100px #FFF, 1500px 1900px #FFF, 1450px 200px #FFF, 1900px 1200px #FFF, 1200px 800px #FFF, 500px 400px #FFF, 174px 12px #FFF, 13px 131px #FFF, 920px 85px #FFF, 16px 30px #FFF, 40px 60px #FFF, 80px 10px #FFF, 120px 90px #FFF, 45px 120px #FFF, 90px 20px #FFF, 20px 180px #FFF, 150px 140px #FFF, 874px 522px #FFF, 1134px 221px #FFF, 992px 159px #FFF, 600px 1300px #FFF, 1400px 1600px #FFF, 1800px 1100px #FFF, 200px 1900px #FFF, 1450px 1200px #FFF, 1900px 1200px #FFF, 200px 800px #FFF, 500px 1400px #FFF, 324px 622px #FFF, 534px 721px #FFF, 692px 459px #FFF, 900px 900px #FFF, 1100px 300px #FFF, 1300px 700px #FFF, 1600px 400px #FFF, 1850px 900px #FFF, 200px 500px #FFF, 400px 200px #FFF, 700px 1100px #FFF;
    animation: animStar 150s linear infinite;
}

.stars::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1744px 122px #FFF, 134px 1321px #FFF, 92px 859px #FFF, 1600px 300px #FFF, 400px 600px #FFF, 800px 100px #FFF, 1200px 900px #FFF, 450px 1200px #FFF, 900px 200px #FFF, 200px 1800px #FFF, 1500px 1400px #FFF, 144px 1122px #FFF, 534px 221px #FFF, 392px 459px #FFF, 1100px 800px #FFF, 700px 1600px #FFF, 200px 100px #FFF, 1500px 1900px #FFF, 1450px 200px #FFF, 1900px 1200px #FFF, 1200px 800px #FFF, 500px 400px #FFF, 174px 12px #FFF, 13px 131px #FFF, 920px 85px #FFF, 16px 30px #FFF, 40px 60px #FFF, 80px 10px #FFF, 120px 90px #FFF, 45px 120px #FFF, 90px 20px #FFF, 20px 180px #FFF, 150px 140px #FFF, 874px 522px #FFF, 1134px 221px #FFF, 992px 159px #FFF, 600px 1300px #FFF, 1400px 1600px #FFF, 1800px 1100px #FFF, 200px 1900px #FFF, 1450px 1200px #FFF, 1900px 1200px #FFF, 200px 800px #FFF, 500px 1400px #FFF, 324px 622px #FFF, 534px 721px #FFF, 692px 459px #FFF, 900px 900px #FFF, 1100px 300px #FFF, 1300px 700px #FFF, 1600px 400px #FFF, 1850px 900px #FFF, 200px 500px #FFF, 400px 200px #FFF, 700px 1100px #FFF;
}

.stars2 {
    width: 2px;
    height: 2px;
    box-shadow: 500px 200px #FFF, 1000px 600px #FFF, 200px 800px #FFF, 1500px 1200px #FFF, 800px 1600px #FFF, 300px 400px #FFF, 1534px 343px #FFF, 343px 123px #FFF, 1834px 563px #FFF, 123px 1673px #FFF, 934px 234px #FFF, 500px 200px #FFF, 1000px 600px #FFF, 200px 800px #FFF, 1500px 1200px #FFF, 800px 1600px #FFF, 300px 400px #FFF, 1200px 1500px #FFF, 600px 300px #FFF, 1800px 100px #FFF, 400px 1100px #FFF, 1300px 500px #FFF, 900px 1400px #FFF, 250px 650px #FFF, 1650px 950px #FFF, 750px 1250px #FFF, 1150px 250px #FFF, 50px 1750px #FFF, 1450px 450px #FFF, 350px 850px #FFF, 1750px 1350px #FFF, 550px 150px #FFF, 950px 1050px #FFF, 150px 550px #FFF, 1250px 1850px #FFF;
    animation: animStar 150s linear infinite;
}

.stars2::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 500px 200px #FFF, 1000px 600px #FFF, 200px 800px #FFF, 1500px 1200px #FFF, 800px 1600px #FFF, 300px 400px #FFF, 1534px 343px #FFF, 343px 123px #FFF, 1834px 563px #FFF, 123px 1673px #FFF, 934px 234px #FFF, 500px 200px #FFF, 1000px 600px #FFF, 200px 800px #FFF, 1500px 1200px #FFF, 800px 1600px #FFF, 300px 400px #FFF, 1200px 1500px #FFF, 600px 300px #FFF, 1800px 100px #FFF, 400px 1100px #FFF, 1300px 500px #FFF, 900px 1400px #FFF, 250px 650px #FFF, 1650px 950px #FFF, 750px 1250px #FFF, 1150px 250px #FFF, 50px 1750px #FFF, 1450px 450px #FFF, 350px 850px #FFF, 1750px 1350px #FFF, 550px 150px #FFF, 950px 1050px #FFF, 150px 550px #FFF, 1250px 1850px #FFF;
}

.stars3 {
    width: 1px;
    height: 1px;
    box-shadow: 100px 100px #FFF, 300px 300px #FFF, 500px 500px #FFF, 1432px 234px #FFF, 234px 1234px #FFF, 873px 453px #FFF, 1723px 134px #FFF, 100px 100px #FFF, 300px 300px #FFF, 500px 500px #FFF, 700px 700px #FFF, 900px 900px #FFF, 1100px 1100px #FFF, 1300px 1300px #FFF, 1500px 1500px #FFF, 1700px 1700px #FFF, 1900px 1900px #FFF, 200px 1800px #FFF, 400px 1600px #FFF, 600px 1400px #FFF, 800px 1200px #FFF, 1000px 1000px #FFF, 1200px 800px #FFF, 1400px 600px #FFF, 1600px 400px #FFF;
    animation: animStar 200s linear infinite;
    opacity: 0.6;
}

.stars3::after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 100px 100px #FFF, 300px 300px #FFF, 500px 500px #FFF, 1432px 234px #FFF, 234px 1234px #FFF, 873px 453px #FFF, 1723px 134px #FFF, 100px 100px #FFF, 300px 300px #FFF, 500px 500px #FFF, 700px 700px #FFF, 900px 900px #FFF, 1100px 1100px #FFF, 1300px 1300px #FFF, 1500px 1500px #FFF, 1700px 1700px #FFF, 1900px 1900px #FFF, 200px 1800px #FFF, 400px 1600px #FFF, 600px 1400px #FFF, 800px 1200px #FFF, 1000px 1000px #FFF, 1200px 800px #FFF, 1400px 600px #FFF, 1600px 400px #FFF;
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}

/* --- ROCKET --- */
.rocket-container {
    position: absolute;
    bottom: -150px;
    z-index: 5;
    pointer-events: none;
}

@keyframes rocketFlyUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-120vh);
        opacity: 1;
    }
}

.rocket-svg {
    width: 80px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
}

/* --- UI COMPONENTS --- */
.glass-nav {
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-gradient {
    background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
    background-size: 200% auto;
    transition: 0.5s;
}

.btn-gradient:hover {
    background-position: right center;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #10b981;
}

.typed-cursor {
    color: #10b981;
    font-weight: 300;
}

.loader {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top: 3px solid #10b981;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #10b981;
}

/* AI List Styling */
.ai-strategy-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.ai-strategy-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    color: #e5e7eb;
}

.ai-strategy-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: cover;
}

.prose h3 {
    font-weight: bold;
    margin-top: 1rem;
    color: #fff;
}

.prose p {
    margin-bottom: 0.75rem;
    color: #e5e7eb;
    font-size: 0.95rem;
    line-height: 1.5;
}

.prose strong {
    color: #10b981;
}

/* Carousel Animations */
@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-30px);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(30px);
        opacity: 0;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

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

@keyframes slideInFromLeft {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }

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

.anim-out-left {
    animation: slideOutLeft 0.3s forwards ease-in;
}

.anim-out-right {
    animation: slideOutRight 0.3s forwards ease-in;
}

.anim-in-right {
    animation: slideInFromRight 0.3s forwards ease-out;
}

.anim-in-left {
    animation: slideInFromLeft 0.3s forwards ease-out;
}

/* Scroll to Top Button */
#scrollTopBtn {
    opacity: 0;
    transition: opacity 0.4s, transform 0.4s;
    pointer-events: none;
}

#scrollTopBtn.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Hero title - always large and prominent */
.hero-title {
    font-size: 2.5rem !important;
    line-height: 1.15 !important;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 5rem !important;
    }
}

/* ===== COMPACT LAYOUT OVERRIDES =====
 *
 * FIX: Todas las sobreescrituras de clases de Tailwind están ahora bajo
 * el selector `.compact-layout` para que no afecten globalmente.
 * Para desactivar el modo compacto, quitar la clase `compact-layout` del <body>.
 */

/* Global compact styles - much smaller sections */
.compact-layout .py-24 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.compact-layout .py-32 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.compact-layout .mb-16 {
    margin-bottom: 1rem !important;
}

.compact-layout .mb-12 {
    margin-bottom: 0.75rem !important;
}

.compact-layout .mb-8 {
    margin-bottom: 0.5rem !important;
}

.compact-layout .gap-12 {
    gap: 0.75rem !important;
}

.compact-layout .gap-8 {
    gap: 0.5rem !important;
}

/* Much smaller cards and panels */
.compact-layout .p-8 {
    padding: 0.875rem !important;
}

.compact-layout .p-10 {
    padding: 1rem !important;
}

.compact-layout .p-6 {
    padding: 0.75rem !important;
}

/* Much smaller text globally */
.compact-layout .text-2xl {
    font-size: 1.1rem !important;
}

.compact-layout .text-3xl {
    font-size: 1.2rem !important;
}

.compact-layout .text-4xl {
    font-size: 1.35rem !important;
}

.compact-layout .text-5xl {
    font-size: 1.5rem !important;
}

.compact-layout .text-lg {
    font-size: 0.85rem !important;
}

.compact-layout .text-xl {
    font-size: 0.95rem !important;
}

.compact-layout .text-base {
    font-size: 0.8rem !important;
}

/* Smaller icons */
.compact-layout .w-12 {
    width: 2.25rem !important;
}

.compact-layout .h-12 {
    height: 2.25rem !important;
}

.compact-layout .w-14 {
    width: 2.75rem !important;
}

.compact-layout .h-14 {
    height: 2.75rem !important;
}

/* Smaller team avatars */
.compact-layout .w-24 {
    width: 4rem !important;
}

.compact-layout .h-24 {
    height: 4rem !important;
}

/* Compact Diagnóstico section */
#diagnostico {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

#diagnostico .rounded-2xl {
    padding: 1rem !important;
}

#diagnostico input,
#diagnostico select,
#diagnostico button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
}

#diagnostico h2 {
    font-size: 1.25rem !important;
}

#diagnostico h3 {
    font-size: 1rem !important;
}

#diagnostico .mb-6 {
    margin-bottom: 0.5rem !important;
}

/* Calendly widget smaller */
.calendly-inline-widget {
    height: 300px !important;
    min-height: 300px !important;
}

/* Compact Contacto section */
#contacto {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Form placeholder styling - larger text */
input::placeholder,
textarea::placeholder {
    font-size: 0.95rem !important;
    color: #9ca3af !important;
}

#contacto input,
#contacto textarea {
    font-size: 1rem !important;
}

#diagnostico input::placeholder {
    font-size: 0.9rem !important;
}

/* Small laptops (1024px - 1366px) */
@media (max-width: 1366px) {
    .compact-layout .max-w-7xl {
        max-width: 95% !important;
    }

    .compact-layout section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .compact-layout h1 {
        font-size: 1.75rem !important;
    }

    .compact-layout h2 {
        font-size: 1.4rem !important;
    }
}

/* Tablets and medium screens */
@media (max-width: 1024px) {
    .compact-layout .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .compact-layout .py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .compact-layout .text-5xl {
        font-size: 2rem !important;
    }

    .compact-layout .text-4xl {
        font-size: 1.75rem !important;
    }

    .compact-layout .text-3xl {
        font-size: 1.5rem !important;
    }

    .compact-layout .gap-12 {
        gap: 1.5rem !important;
    }

    /* Fix Calendly widget height on smaller screens */
    .calendly-inline-widget {
        height: 350px !important;
        min-height: 350px !important;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .compact-layout .py-24 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .compact-layout .py-32 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .compact-layout .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .compact-layout .text-5xl {
        font-size: 1.75rem !important;
    }

    .compact-layout .mb-16 {
        margin-bottom: 2rem !important;
    }

    .compact-layout .gap-8 {
        gap: 1rem !important;
    }

    /* Quiz section - stack on mobile */
    #diagnostico .grid {
        gap: 1.5rem !important;
    }

    /* Team grid - 2 columns on mobile */
    #equipo .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stars animation - reduce for performance */
    .stars,
    .stars2,
    .stars3 {
        animation-duration: 100s;
    }

    /* Hero section - more top padding on mobile to prevent badge cutoff */
    #inicio {
        padding-top: 6rem !important;
    }

    /* Hero title - reserve space for 2 lines to prevent layout jump */
    .hero-title {
        min-height: 10rem !important;
        display: block;
    }

    /* Hero description - extra margin-top on mobile for spacing below title */
    .hero-description {
        margin-top: 2rem !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .compact-layout .text-5xl {
        font-size: 1.5rem !important;
    }

    .compact-layout .text-xl {
        font-size: 1rem !important;
    }

    /* Team grid - single column */
    #equipo .grid {
        grid-template-columns: 1fr !important;
    }

    /* Quiz options - single column */
    #quiz-step-1 .grid {
        grid-template-columns: 1fr !important;
    }

    /* Hero title - even more space on small mobile */
    .hero-title {
        min-height: 12rem !important;
    }

    /* Tech grid: 4 items visible per row on mobile, all same size */
    #tech-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #tech-grid::-webkit-scrollbar {
        display: none;
    }

    #tech-grid>div {
        min-width: calc(25% - 12px);
        max-width: calc(25% - 12px);
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 0.5rem;
        height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #tech-grid>div h4 {
        font-size: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #tech-grid>div p {
        font-size: 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #tech-grid>div>div:first-child {
        width: 3rem;
        height: 3rem;
        margin-bottom: 0.35rem;
    }

    #tech-grid>div>div:first-child i {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Service cards smaller on mobile */
    .service-card {
        height: 340px !important;
    }
}