/* =====================================================================
   NOVATI — Hoja de estilos principal
   Paleta: Primario #0F172A | Secundario #2563EB | Acento #06B6D4 | Fondo #FFFFFF
   Tipografía: Inter (texto) / Poppins (títulos)
   ===================================================================== */

:root{
    --navy:        #0F172A;
    --navy-soft:   #1E293B;
    --blue:        #2563EB;
    --blue-dark:   #1D4ED8;
    --cyan:        #06B6D4;
    --slate-50:    #F8FAFC;
    --slate-100:   #F1F5F9;
    --slate-200:   #E2E8F0;
    --slate-500:   #64748B;
    --slate-600:   #475569;
    --white:       #FFFFFF;

    --font-heading: 'Poppins', sans-serif;
    --font-body:    'Inter', sans-serif;

    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-soft: 0 10px 30px -12px rgba(15,23,42,.15);
    --shadow-card: 0 4px 18px rgba(15,23,42,.06);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    font-family:var(--font-body);
    color:var(--navy-soft);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--navy);
    font-weight:700;
}

a{ text-decoration:none; }

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

.bg-light-slate{ background:var(--slate-50); }
.bg-navy{ background:var(--navy); }

.section-eyebrow{
    display:inline-block;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:.75rem;
    position:relative;
    padding-left:1.4rem;
}
.section-eyebrow::before{
    content:"";
    position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:20px; height:2px;
    background:var(--cyan);
}
.section-eyebrow-light{
    display:inline-block;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-bottom:.75rem;
}

.section-title{
    font-size:clamp(1.6rem, 2.6vw, 2.4rem);
    margin-bottom:1rem;
}

.section-text{
    color:var(--slate-500);
    font-size:1.02rem;
    line-height:1.7;
}

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn-novati-primary{
    background:var(--blue);
    color:var(--white);
    border:1px solid var(--blue);
    font-weight:600;
    padding:.75rem 1.6rem;
    border-radius:6px;
    transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-novati-primary:hover{
    background:var(--blue-dark);
    color:var(--white);
    transform:translateY(-2px);
    box-shadow:0 10px 20px -8px rgba(37,99,235,.5);
}
.btn-novati-outline{
    background:transparent;
    color:var(--white);
    border:1px solid rgba(255,255,255,.4);
    font-weight:600;
    padding:.75rem 1.6rem;
    border-radius:6px;
    transition:border-color .2s ease, background .2s ease;
}
.btn-novati-outline:hover{
    border-color:#fff;
    background:rgba(255,255,255,.08);
    color:#fff;
}
.btn-novati-ghost{
    background:transparent;
    border:none;
    color:var(--slate-500);
    font-weight:600;
}
.btn-novati-ghost:hover{ color:var(--navy); }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.navbar-novati{
    padding:1.1rem 0;
    background:transparent;
    transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.navbar-novati.scrolled{
    background:rgba(15,23,42,.94);
    backdrop-filter:blur(10px);
    padding:.6rem 0;
    box-shadow:0 2px 20px rgba(0,0,0,.15);
}
.navbar-novati .navbar-brand{
    font-family:var(--font-heading);
    font-weight:800;
    font-size:1.4rem;
    color:#fff;
}
.navbar-novati .navbar-brand span{ color:var(--cyan); }
.navbar-novati .nav-link{
    color:rgba(255,255,255,.85);
    font-weight:500;
    font-size:.94rem;
    margin:0 .55rem;
}
.navbar-novati .nav-link:hover{ color:#fff; }
.navbar-novati .navbar-toggler{
    border:none; color:#fff; font-size:1.3rem; background:none;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero-section{
    position:relative;
    background:
        linear-gradient(115deg, rgba(15,23,42,.93) 10%, rgba(15,23,42,.75) 55%, rgba(15,23,42,.55) 100%),
        url('../img/hero-datacenter.jpg') center/cover no-repeat;
    overflow:hidden;
}
.hero-overlay{
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:48px 48px;
    pointer-events:none;
}
.badge-eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    font-size:.78rem; font-weight:600; letter-spacing:.04em;
    color:var(--cyan);
    border:1px solid rgba(6,182,212,.35);
    padding:.5rem 1rem;
    border-radius:30px;
    margin-bottom:1.5rem;
}
.hero-title{
    color:#fff;
    font-size:clamp(2.2rem, 4.6vw, 3.6rem);
    line-height:1.14;
    margin-bottom:1.3rem;
}
.hero-text{
    color:rgba(255,255,255,.78);
    font-size:1.12rem;
    max-width:600px;
    line-height:1.7;
}
.hero-scroll-indicator{
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.6);
    animation:bounceDown 2s infinite;
}
@keyframes bounceDown{
    0%,100%{ transform:translate(-50%,0); }
    50%{ transform:translate(-50%,8px); }
}

/* =====================================================================
   NOSOTROS
   ===================================================================== */
.nosotros-image{
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
}
.nosotros-image img{ width:100%; height:100%; object-fit:cover; }

.stat-block{ display:flex; flex-direction:column; }
.stat-number{
    font-family:var(--font-heading);
    font-size:2rem; font-weight:800; color:var(--blue);
    line-height:1;
}
.stat-label{
    font-size:.82rem; color:var(--slate-500); margin-top:.4rem;
}

/* =====================================================================
   SERVICIOS
   ===================================================================== */
.service-card{
    background:#fff;
    border:1px solid var(--slate-200);
    border-radius:var(--radius-lg);
    padding:2.2rem 1.8rem;
    height:100%;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-soft);
    border-color:var(--blue);
}
.service-icon{
    width:52px; height:52px;
    border-radius:12px;
    background:linear-gradient(135deg, var(--blue), var(--cyan));
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.35rem;
    margin-bottom:1.4rem;
}
.service-card h3{
    font-size:1.08rem; margin-bottom:1rem;
}
.service-list{
    list-style:none; padding:0; margin:0;
    font-size:.9rem; color:var(--slate-600);
}
.service-list li{
    padding:.4rem 0;
    border-top:1px solid var(--slate-100);
    display:flex; align-items:center; gap:.5rem;
}
.service-list li:first-child{ border-top:none; }
.service-list li::before{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:.7rem;
    color:var(--cyan);
}

/* =====================================================================
   PROCESO
   ===================================================================== */
.process-track{
    display:flex; align-items:flex-start; justify-content:space-between;
    flex-wrap:wrap; gap:1.5rem;
}
.process-step{
    flex:1 1 150px; text-align:center; min-width:140px;
}
.process-number{
    width:52px; height:52px; margin:0 auto 1rem;
    border-radius:50%;
    background:var(--navy);
    color:var(--cyan);
    font-family:var(--font-heading); font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.process-step h4{ font-size:1rem; margin-bottom:.5rem; }
.process-step p{ font-size:.85rem; color:var(--slate-500); }
.process-arrow{
    color:var(--slate-200); font-size:1.2rem;
    align-self:center; margin-top:1.3rem;
}
@media (max-width:768px){ .process-arrow{ display:none; } }

/* =====================================================================
   SECTORES
   ===================================================================== */
.sector-chip{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-md);
    padding:1.6rem 1rem;
    text-align:center;
    color:rgba(255,255,255,.85);
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.sector-chip:hover{
    border-color:var(--cyan);
    background:rgba(6,182,212,.08);
    transform:translateY(-4px);
}
.sector-chip i{ font-size:1.5rem; color:var(--cyan); display:block; margin-bottom:.7rem; }
.sector-chip span{ font-size:.86rem; font-weight:600; }

/* =====================================================================
   PRODUCTOS
   ===================================================================== */
.product-card{
    background:var(--slate-50);
    border-radius:var(--radius-lg);
    padding:2.2rem 1.8rem;
    height:100%;
    border:1px solid var(--slate-200);
    transition:box-shadow .25s ease, transform .25s ease;
}
.product-card:hover{ box-shadow:var(--shadow-soft); transform:translateY(-5px); }
.product-icon{
    width:52px; height:52px;
    border-radius:12px;
    background:var(--navy);
    color:var(--cyan);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; margin-bottom:1.3rem;
}
.product-card h3{ font-size:1.1rem; margin-bottom:.6rem; }
.product-card p{ font-size:.9rem; color:var(--slate-500); margin-bottom:1rem; }
.product-tag{
    display:inline-block;
    font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--blue);
    background:rgba(37,99,235,.08);
    padding:.3rem .7rem;
    border-radius:20px;
}

/* =====================================================================
   MODAL AGENDA TU VISITA TÉCNICA
   ===================================================================== */
.agenda-modal-content{
    border-radius:var(--radius-lg);
    border:none;
    overflow:hidden;
}
.modal-title{ font-size:1.25rem; }
.modal-subtitle{ font-size:.85rem; color:var(--slate-500); }

.agenda-steps{
    display:flex; align-items:center; gap:.5rem;
    margin-bottom:1.5rem;
}
.agenda-step-indicator{
    display:flex; align-items:center; gap:.5rem;
    opacity:.4;
    transition:opacity .25s ease;
}
.agenda-step-indicator.active,
.agenda-step-indicator.completed{ opacity:1; }
.step-circle{
    width:30px; height:30px; border-radius:50%;
    background:var(--slate-200);
    color:var(--slate-500);
    display:flex; align-items:center; justify-content:center;
    font-size:.85rem; font-weight:700;
    transition:background .25s ease, color .25s ease;
}
.agenda-step-indicator.active .step-circle{ background:var(--blue); color:#fff; }
.agenda-step-indicator.completed .step-circle{ background:var(--cyan); color:#fff; }
.step-label{ font-size:.82rem; font-weight:600; color:var(--slate-600); display:none; }
@media (min-width:576px){ .step-label{ display:inline; } }
.agenda-step-line{
    flex:1; height:2px; background:var(--slate-200);
}

.slots-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:.75rem;
}
@media (max-width:480px){ .slots-grid{ grid-template-columns:repeat(2, 1fr); } }

.slot-btn{
    border:1px solid var(--slate-200);
    background:#fff;
    color:var(--navy);
    padding:.75rem .5rem;
    border-radius:8px;
    font-weight:600;
    font-size:.92rem;
    transition:all .18s ease;
}
.slot-btn:hover:not(:disabled){ border-color:var(--blue); color:var(--blue); }
.slot-btn.selected{
    background:var(--blue); border-color:var(--blue); color:#fff;
}
.slot-btn:disabled{
    background:var(--slate-100); color:var(--slate-500);
    text-decoration:line-through; cursor:not-allowed; opacity:.6;
}

.service-checks{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:.6rem;
}
.service-check{
    display:flex; align-items:center; gap:.5rem;
    border:1px solid var(--slate-200);
    border-radius:8px;
    padding:.55rem .7rem;
    font-size:.87rem;
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease;
}
.service-check:hover{ border-color:var(--blue); }
.service-check input{ accent-color:var(--blue); }
.service-check input:checked ~ span{ color:var(--blue); font-weight:600; }

.invalid-feedback-custom{
    color:#DC2626; font-size:.8rem; margin-top:.3rem; display:none;
}
.is-invalid ~ .invalid-feedback-custom,
.invalid-feedback-custom.show{ display:block; }
.form-control.is-invalid, .form-select.is-invalid{
    border-color:#DC2626;
}

.success-icon{
    width:70px; height:70px; margin:0 auto;
    border-radius:50%;
    background:rgba(16,185,129,.1);
    color:#10B981;
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer-novati{
    background:var(--navy);
    color:rgba(255,255,255,.65);
    padding:4.5rem 0 1.5rem;
}
.footer-brand{
    font-family:var(--font-heading); font-weight:800; font-size:1.5rem; color:#fff;
}
.footer-brand span{ color:var(--cyan); }
.footer-slogan{ font-size:.9rem; margin:.6rem 0 1.3rem; }
.footer-social a{
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
    color:rgba(255,255,255,.75);
    display:inline-flex; align-items:center; justify-content:center;
    margin-right:.5rem;
    transition:border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color:var(--cyan); color:var(--cyan); }
.footer-novati h6{
    color:#fff; font-family:var(--font-heading); font-size:.95rem; margin-bottom:1.1rem;
}
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.footer-links a{ color:rgba(255,255,255,.6); font-size:.88rem; }
.footer-links a:hover{ color:#fff; }
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:3rem; padding-top:1.5rem;
    font-size:.8rem; color:rgba(255,255,255,.4);
}

.whatsapp-float{
    position:fixed; bottom:24px; right:24px; z-index:999;
    width:56px; height:56px; border-radius:50%;
    background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem;
    box-shadow:0 8px 20px rgba(37,211,102,.4);
    transition:transform .2s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); color:#fff; }