/* ==========================================================================
   INGSA · Ingeniería y Saneamiento de Agua
   Hoja de estilos del front  ·  Tema "Agua + Plano técnico"
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Paleta corporativa */
    --primary:        #0A192F;   /* Azul marino profundo */
    --primary-2:      #112240;
    --primary-3:      #0d2444;
    --aqua:           #00D2FF;   /* Cyan vibrante */
    --aqua-dark:      #00A3CC;
    --teal:           #00FFD1;   /* Acento técnico */
    --blueprint:      #EAF4F8;   /* Fondo claro azulado */

    --bg:             #FFFFFF;
    --bg-soft:        #F5F9FB;
    --bg-gray:        #EDF2F7;
    --ink:            #14202E;
    --muted:          #5B6B7C;
    --line:           #E2EAF0;
    --light:          #E2E8F0;

    --wa:             #25D366;

    /* Tipografía */
    --f-display: 'Poppins', sans-serif;
    --f-body:    'Inter', sans-serif;
    --f-mono:    'Space Mono', 'JetBrains Mono', monospace;

    /* Sombras */
    --sh-sm: 0 1px 2px rgba(10,25,47,.06);
    --sh-md: 0 8px 24px -8px rgba(10,25,47,.18);
    --sh-lg: 0 24px 48px -16px rgba(10,25,47,.28);
    --sh-aqua: 0 12px 30px -8px rgba(0,163,204,.45);

    /* Radios */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-full: 9999px;

    --ease: cubic-bezier(.4,0,.2,1);
    --container: 1200px;
    --header-h: 78px;
    --topbar-h: 42px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }

body {
    font-family:var(--f-body);
    color:var(--ink);
    background:var(--bg);
    line-height:1.65;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6 { font-family:var(--f-display); font-weight:700; line-height:1.15; color:var(--primary); }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; height:auto; display:block; }
button { font-family:inherit; }

.container {
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 1.5rem;
}

/* Rótulo técnico (eyebrow monoespaciado) — elemento de identidad */
.eyebrow {
    font-family:var(--f-mono);
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--aqua-dark);
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    font-weight:700;
}
.eyebrow::before {
    content:'';
    width:26px; height:2px;
    background:linear-gradient(90deg,var(--aqua),var(--teal));
    display:inline-block;
}

/* Botones */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    padding:.9rem 1.9rem;
    font-family:var(--f-display); font-weight:600; font-size:.98rem;
    border-radius:var(--r-full); cursor:pointer; border:none;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
    white-space:nowrap;
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:linear-gradient(120deg,var(--aqua),var(--aqua-dark)); color:#04121f; box-shadow:var(--sh-aqua); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 36px -10px rgba(0,163,204,.6); color:#04121f; }
.btn-outline { background:transparent; color:var(--aqua); border:2px solid rgba(0,210,255,.55); }
.btn-outline:hover { background:var(--aqua); color:#04121f; transform:translateY(-3px); }
.btn-ghost { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); }
.btn-ghost:hover { background:rgba(255,255,255,.16); transform:translateY(-3px); }
.btn-lg { padding:1.05rem 2.3rem; font-size:1.05rem; }

/* Encabezado de sección */
.sec-head { text-align:center; max-width:680px; margin:0 auto 3.2rem; }
.sec-head .eyebrow { justify-content:center; margin-bottom:1rem; }
.sec-head h2 { font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; letter-spacing:-.02em; }
.sec-head p { color:var(--muted); font-size:1.08rem; margin-top:1rem; }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* Retícula blueprint reutilizable */
.blueprint-grid {
    background-image:
        linear-gradient(rgba(0,210,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,210,255,.06) 1px, transparent 1px);
    background-size:40px 40px;
}

/* --------------------------------------------------------------------------
   3. TOP BAR
   -------------------------------------------------------------------------- */
.topbar {
    background:var(--primary-2);
    color:var(--light);
    font-size:.85rem;
    height:var(--topbar-h);
    display:flex; align-items:center;
    position:fixed; top:0; left:0; width:100%; z-index:1001;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar-left { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.topbar-left a { display:inline-flex; align-items:center; gap:.45rem; color:var(--light); transition:color .2s; }
.topbar-left a:hover { color:var(--teal); }
.topbar-left svg { width:15px; height:15px; fill:var(--aqua); flex:none; }
.topbar-right { display:flex; align-items:center; gap:.5rem; }
.topbar-social { display:flex; gap:.35rem; }
.topbar-social a {
    width:28px; height:28px; border-radius:var(--r-full);
    display:grid; place-items:center;
    background:rgba(255,255,255,.07); transition:background .25s, transform .25s;
}
.topbar-social a:hover { background:var(--aqua); transform:translateY(-2px); }
.topbar-social svg { width:14px; height:14px; fill:#fff; }
.btn-admin {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.35rem .85rem; border-radius:var(--r-full);
    background:linear-gradient(120deg,var(--aqua),var(--teal));
    color:#04121f; font-weight:700; font-size:.78rem;
    transition:transform .25s, box-shadow .25s;
}
.btn-admin:hover { transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(0,210,255,.6); }
.btn-admin svg { width:13px; height:13px; fill:currentColor; }

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
header {
    position:fixed; top:var(--topbar-h); left:0; width:100%;
    height:var(--header-h); z-index:1000;
    background:rgba(10,25,47,.82);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:height .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
header.scrolled { height:66px; background:rgba(10,25,47,.96); box-shadow:var(--sh-md); }
.nav { display:flex; align-items:center; justify-content:space-between; height:100%; }
.logo { display:flex; align-items:center; }
.logo img { max-height:46px; width:auto; object-fit:contain; transition:transform .25s; }
.logo:hover img { transform:scale(1.03); }

.nav-menu { display:flex; gap:2.2rem; align-items:center; }
.nav-link {
    color:var(--light); font-size:.94rem; font-weight:500; position:relative; padding:6px 0;
    transition:color .2s;
}
.nav-link::after {
    content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
    background:linear-gradient(90deg,var(--aqua),var(--teal)); transition:width .3s var(--ease);
}
.nav-link:hover, .nav-link.active { color:var(--teal); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-cta { display:flex; align-items:center; }

.hamburger { display:none; width:30px; height:22px; position:relative; background:transparent; border:none; cursor:pointer; z-index:1002; }
.hamburger span { display:block; position:absolute; left:0; width:100%; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease); }
.hamburger span:nth-child(1){ top:0; } .hamburger span:nth-child(2){ top:10px; } .hamburger span:nth-child(3){ top:20px; }
.hamburger.active span:nth-child(1){ top:10px; transform:rotate(45deg); background:var(--teal); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ top:10px; transform:rotate(-45deg); background:var(--teal); }

/* Espaciador para el contenido fijo */
.page-top-space { height:calc(var(--topbar-h) + var(--header-h)); }

/* --------------------------------------------------------------------------
   5. HERO SLIDER
   -------------------------------------------------------------------------- */
.hero {
    position:relative; min-height:calc(100vh - var(--topbar-h) - var(--header-h));
    display:flex; align-items:center; overflow:hidden;
    background:var(--primary);
}
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transform:scale(1.08);
    transition:opacity 1.2s var(--ease), transform 7s linear;
}
.hero-slide.active { opacity:1; transform:scale(1); }
.hero-overlay {
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(10,25,47,.94) 0%, rgba(10,25,47,.78) 45%, rgba(10,25,47,.35) 100%);
}
.hero-overlay::after { /* retícula blueprint sutil */
    content:''; position:absolute; inset:0; opacity:.5;
    background-image:
        linear-gradient(rgba(0,210,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,210,255,.05) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);
            mask-image:linear-gradient(90deg,#000,transparent 70%);
}
.hero .container { position:relative; z-index:2; }
.hero-content { max-width:760px; color:#fff; padding:2rem 0; }
.hero-content .eyebrow { color:var(--teal); margin-bottom:1.2rem; }
.hero-title {
    font-size:clamp(2.4rem,6vw,4.6rem); font-weight:800; color:#fff;
    letter-spacing:-.02em; text-shadow:0 6px 24px rgba(0,0,0,.35); margin-bottom:1.3rem;
}
.hero-title .accent { background:linear-gradient(120deg,var(--aqua),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-desc { font-size:1.18rem; color:var(--light); max-width:600px; margin-bottom:2.2rem; }
.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; }

/* Controles del slider */
.hero-dots { position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.6rem; }
.hero-dots button { width:34px; height:5px; border-radius:var(--r-full); border:none; background:rgba(255,255,255,.3); cursor:pointer; transition:background .3s, width .3s; }
.hero-dots button.active { background:linear-gradient(90deg,var(--aqua),var(--teal)); width:52px; }
.hero-arrow {
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:52px; height:52px; border-radius:var(--r-full); display:grid; place-items:center;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(6px); cursor:pointer; transition:background .25s, transform .25s; color:#fff;
}
.hero-arrow:hover { background:rgba(255,255,255,.2); }
.hero-arrow.prev { left:1.5rem; } .hero-arrow.next { right:1.5rem; }
.hero-arrow svg { width:22px; height:22px; }

/* Onda divisoria (elemento firma) */
.wave-divider { position:relative; line-height:0; margin-top:-2px; }
.wave-divider svg { width:100%; height:auto; display:block; }

/* --------------------------------------------------------------------------
   6. SECCIONES
   -------------------------------------------------------------------------- */
.section { padding:6.5rem 0; position:relative; }
.section--soft { background:var(--bg-soft); }
.section--dark { background:var(--primary); color:#fff; }
.section--dark h2, .section--dark h3 { color:#fff; }

/* SERVICIOS */
.services-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.6rem;
}
.service-card {
    position:relative; background:#fff; border:1px solid var(--line);
    border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    display:flex; flex-direction:column;
}
.service-card:hover { transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:transparent; }
.service-media { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--primary-2); }
.service-media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-media img { transform:scale(1.08); }
.service-media.noimg {
    display:grid; place-items:center;
    background:linear-gradient(135deg,var(--primary-2),var(--primary));
}
.service-media.noimg svg { width:64px; height:64px; fill:var(--aqua); opacity:.85; }
.service-num {
    position:absolute; top:.9rem; left:.9rem; z-index:2;
    font-family:var(--f-mono); font-size:.72rem; font-weight:700; letter-spacing:.1em;
    color:#04121f; background:var(--teal); padding:.28rem .6rem; border-radius:var(--r-full);
}
.service-body { padding:1.5rem 1.6rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.service-body h3 { font-size:1.22rem; margin-bottom:.6rem; letter-spacing:-.01em; }
.service-body p { color:var(--muted); font-size:.96rem; flex:1; }
.service-more {
    margin-top:1.1rem; display:inline-flex; align-items:center; gap:.45rem;
    font-family:var(--f-display); font-weight:600; font-size:.9rem; color:var(--aqua-dark);
    transition:gap .25s;
}
.service-card:hover .service-more { gap:.75rem; }
.service-more svg { width:16px; height:16px; }

/* PROYECTOS */
.projects-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem;
}
.project-card {
    position:relative; border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
    aspect-ratio:4/3; background:var(--primary-2); box-shadow:var(--sh-sm);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.project-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.project-card img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.project-card:hover img { transform:scale(1.1); }
.project-overlay {
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(to top, rgba(10,25,47,.92) 0%, rgba(10,25,47,.25) 55%, transparent 100%);
    display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem;
    opacity:1;
}
.project-cat {
    align-self:flex-start;
    font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    color:#04121f; background:var(--teal); padding:.25rem .6rem; border-radius:var(--r-full); margin-bottom:.7rem;
}
.project-overlay h3 { color:#fff; font-size:1.15rem; transform:translateY(6px); transition:transform .35s var(--ease); }
.project-overlay p {
    color:var(--light); font-size:.9rem; margin-top:.4rem; max-height:0; opacity:0; overflow:hidden;
    transition:max-height .4s var(--ease), opacity .35s var(--ease), margin .35s var(--ease);
}
.project-card:hover .project-overlay h3 { transform:none; }
.project-card:hover .project-overlay p { max-height:6rem; opacity:1; }
.project-plus {
    position:absolute; top:1rem; right:1rem; z-index:3;
    width:40px; height:40px; border-radius:var(--r-full); display:grid; place-items:center;
    background:rgba(255,255,255,.14); backdrop-filter:blur(4px); color:#fff;
    opacity:0; transform:scale(.7); transition:opacity .3s, transform .3s;
}
.project-card:hover .project-plus { opacity:1; transform:none; }
.project-plus svg { width:20px; height:20px; }
.projects-cta { text-align:center; margin-top:3rem; }

/* NOSOTROS */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.about-visual { position:relative; }
.about-visual img { border-radius:var(--r-lg); box-shadow:var(--sh-lg); width:100%; aspect-ratio:4/5; object-fit:cover; }
.about-badge {
    position:absolute; bottom:-1.6rem; right:-1rem;
    background:linear-gradient(135deg,var(--aqua),var(--aqua-dark)); color:#04121f;
    padding:1.4rem 1.6rem; border-radius:var(--r-md); box-shadow:var(--sh-lg); text-align:center;
}
.about-badge .num { font-family:var(--f-display); font-size:2.6rem; font-weight:800; line-height:1; }
.about-badge .lbl { font-size:.82rem; font-weight:600; margin-top:.3rem; }
.about-content h2 { font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:800; letter-spacing:-.02em; margin-bottom:1.2rem; }
.about-content > p { color:var(--muted); font-size:1.05rem; margin-bottom:2rem; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.stat {
    background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:1.3rem 1.4rem;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stat:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.stat .stat-num { font-family:var(--f-display); font-size:2.2rem; font-weight:800; color:var(--primary); display:flex; align-items:baseline; }
.stat .stat-num span.suf { color:var(--aqua-dark); font-size:1.4rem; margin-left:2px; }
.stat .stat-lbl { color:var(--muted); font-size:.9rem; margin-top:.2rem; }

/* CONTACTO */
.contact-wrap { display:grid; grid-template-columns:1fr 1.2fr; gap:2.5rem; align-items:stretch; }
.contact-info {
    background:var(--primary); color:#fff; border-radius:var(--r-lg); padding:2.6rem 2.2rem;
    position:relative; overflow:hidden;
}
.contact-info::after {
    content:''; position:absolute; right:-40px; bottom:-40px; width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,210,255,.25), transparent 70%);
}
.contact-info h3 { color:#fff; font-size:1.4rem; margin-bottom:.5rem; }
.contact-info > p { color:var(--light); margin-bottom:2rem; font-size:.98rem; }
.info-item { display:flex; gap:1rem; margin-bottom:1.6rem; position:relative; z-index:2; }
.info-icon { flex:none; width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center; background:rgba(0,210,255,.14); }
.info-icon svg { width:22px; height:22px; fill:var(--teal); }
.info-item h4 { color:#fff; font-size:.98rem; margin-bottom:.15rem; }
.info-item p { color:var(--light); font-size:.94rem; word-break:break-word; }
.info-item a { color:var(--light); }
.info-item a:hover { color:var(--teal); }

.contact-form { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:2.4rem 2.2rem; box-shadow:var(--sh-sm); }
.contact-form h3 { font-size:1.4rem; margin-bottom:1.4rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group.full { grid-column:1/-1; }
.form-input {
    width:100%; padding:.9rem 1rem; font-family:var(--f-body); font-size:.96rem;
    border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--bg-soft);
    color:var(--ink); transition:border-color .2s, box-shadow .2s, background .2s;
}
.form-input:focus { outline:none; border-color:var(--aqua); background:#fff; box-shadow:0 0 0 4px rgba(0,210,255,.12); }
textarea.form-input { min-height:130px; resize:vertical; }
.form-note { font-size:.82rem; color:var(--muted); margin-top:.9rem; display:flex; align-items:center; gap:.45rem; }
.form-note svg { width:15px; height:15px; fill:var(--wa); flex:none; }
.form-alert { padding:.85rem 1rem; border-radius:var(--r-sm); font-size:.92rem; margin-bottom:1.2rem; }
.form-alert.ok { background:#e7f9f0; color:#0a7d4b; border:1px solid #b7ebd3; }
.form-alert.err { background:#fdecec; color:#b42323; border:1px solid #f6c9c9; }

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
footer { background:var(--primary); color:var(--light); padding:4.5rem 0 0; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; }
.footer-brand img { max-height:56px; margin-bottom:1.2rem; }
.footer-brand p { font-size:.94rem; color:#9db0c4; max-width:340px; }
.footer-social { display:flex; gap:.6rem; margin-top:1.4rem; }
.footer-social a { width:38px; height:38px; border-radius:var(--r-full); display:grid; place-items:center; background:rgba(255,255,255,.07); transition:background .25s, transform .25s; }
.footer-social a:hover { background:var(--aqua); transform:translateY(-3px); }
.footer-social svg { width:17px; height:17px; fill:#fff; }
.footer-title { color:#fff; font-size:1.02rem; margin-bottom:1.2rem; font-family:var(--f-display); }
.footer-links li { margin-bottom:.7rem; }
.footer-links a { color:#9db0c4; font-size:.93rem; transition:color .2s, padding .2s; }
.footer-links a:hover { color:var(--teal); padding-left:5px; }
.footer-contact li { display:flex; gap:.6rem; margin-bottom:.9rem; font-size:.92rem; color:#9db0c4; }
.footer-contact svg { width:16px; height:16px; fill:var(--aqua); flex:none; margin-top:3px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; text-align:center; font-size:.86rem; color:#8397ac; }

/* --------------------------------------------------------------------------
   8. WHATSAPP FLOTANTE
   -------------------------------------------------------------------------- */
.fab-wa {
    position:fixed; bottom:26px; right:26px; z-index:900;
    width:60px; height:60px; border-radius:var(--r-full); background:var(--wa);
    display:grid; place-items:center; box-shadow:0 10px 30px -6px rgba(37,211,102,.6);
    animation:pulse-wa 2.4s infinite; transition:transform .25s;
}
.fab-wa:hover { transform:scale(1.08); }
.fab-wa svg { width:34px; height:34px; fill:#fff; }
@keyframes pulse-wa {
    0%   { box-shadow:0 0 0 0 rgba(37,211,102,.45); }
    70%  { box-shadow:0 0 0 18px rgba(37,211,102,0); }
    100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* --------------------------------------------------------------------------
   9. MODAL (servicios / proyectos)
   -------------------------------------------------------------------------- */
.modal {
    position:fixed; inset:0; z-index:1200; display:none;
    align-items:center; justify-content:center; padding:1.2rem;
    background:rgba(10,25,47,.72); backdrop-filter:blur(6px);
}
.modal.open { display:flex; animation:fade .25s var(--ease); }
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal-box {
    background:#fff; border-radius:var(--r-lg); max-width:860px; width:100%;
    max-height:90vh; overflow:auto; position:relative; box-shadow:var(--sh-lg);
    animation:pop .3s var(--ease);
}
@keyframes pop { from{transform:translateY(20px) scale(.98);opacity:0} to{transform:none;opacity:1} }
.modal-close {
    position:absolute; top:1rem; right:1rem; z-index:5;
    width:40px; height:40px; border-radius:var(--r-full); border:none; cursor:pointer;
    background:rgba(10,25,47,.6); color:#fff; display:grid; place-items:center; transition:background .2s;
}
.modal-close:hover { background:var(--primary); }
.modal-close svg { width:20px; height:20px; }
.modal-hero { aspect-ratio:16/8; overflow:hidden; background:var(--primary-2); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.modal-hero img { width:100%; height:100%; object-fit:cover; }
.modal-content { padding:2rem 2.2rem 2.4rem; }
.modal-content .eyebrow { margin-bottom:.8rem; }
.modal-content h2 { font-size:1.7rem; margin-bottom:1rem; letter-spacing:-.01em; }
.modal-content p { color:var(--muted); font-size:1rem; margin-bottom:1rem; line-height:1.75; }
.modal-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.7rem; margin-top:1.4rem; }
.modal-gallery img { border-radius:var(--r-sm); aspect-ratio:1; object-fit:cover; cursor:pointer; transition:transform .25s; }
.modal-gallery img:hover { transform:scale(1.04); }
.modal-actions { margin-top:1.8rem; display:flex; gap:.8rem; flex-wrap:wrap; }

/* Lightbox simple */
.lightbox { position:fixed; inset:0; z-index:1400; display:none; align-items:center; justify-content:center; background:rgba(4,12,20,.92); padding:1.5rem; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:var(--r-sm); box-shadow:var(--sh-lg); }
.lightbox-close { position:absolute; top:1.4rem; right:1.6rem; color:#fff; background:none; border:none; cursor:pointer; }
.lightbox-close svg { width:34px; height:34px; }

/* Página "todos los proyectos" */
.page-hero {
    background:var(--primary); color:#fff; padding:5rem 0 6.5rem; position:relative; overflow:hidden;
}
.page-hero::before {
    content:''; position:absolute; inset:0; opacity:.5;
    background-image:
        linear-gradient(rgba(0,210,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,210,255,.05) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(circle at 70% 40%, #000, transparent 70%);
            mask-image:radial-gradient(circle at 70% 40%, #000, transparent 70%);
}
.page-hero .container { position:relative; z-index:2; }
.page-hero .eyebrow { color:var(--teal); margin-bottom:1rem; }
.page-hero h1 { color:#fff; font-size:clamp(2.2rem,5vw,3.4rem); font-weight:800; letter-spacing:-.02em; }
.page-hero p { color:var(--light); max-width:600px; margin-top:1rem; font-size:1.1rem; }
.breadcrumb { font-family:var(--f-mono); font-size:.8rem; color:#8fb8cc; margin-bottom:1.4rem; letter-spacing:.05em; }
.breadcrumb a:hover { color:var(--teal); }

.filters { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.6rem; }
.filter-btn {
    padding:.55rem 1.2rem; border-radius:var(--r-full); border:1.5px solid var(--line);
    background:#fff; color:var(--muted); font-family:var(--f-display); font-weight:600; font-size:.88rem;
    cursor:pointer; transition:all .25s var(--ease);
}
.filter-btn:hover { border-color:var(--aqua); color:var(--aqua-dark); }
.filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

.empty-state { text-align:center; padding:4rem 1rem; color:var(--muted); }
.empty-state svg { width:56px; height:56px; fill:var(--line); margin:0 auto 1rem; }

/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width:993px) {
    .nav-cta { display:flex; }
}
@media (max-width:992px) {
    .about-grid { grid-template-columns:1fr; gap:2.5rem; }
    .about-visual { max-width:440px; margin:0 auto; }
    .about-badge { right:1rem; }
    .contact-wrap { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
    .nav-cta { display:none; }
    .hamburger { display:block; }

    .nav-menu {
        position:fixed; top:0; right:-100%; width:min(78%,320px); height:100vh;
        background:var(--primary-2); flex-direction:column; justify-content:center;
        gap:2rem; padding:2rem; transition:right .4s var(--ease); box-shadow:-10px 0 40px rgba(0,0,0,.3);
    }
    .nav-menu.open { right:0; }
    .nav-link { font-size:1.15rem; }
    .nav-menu .btn-primary { margin-top:1rem; }
}
@media (max-width:640px) {
    :root {
        --topbar-h: 84px; /* Magia: Altura dinámica para acomodar dos filas sin colisionar */
    }
    
    .topbar { font-size:.78rem; height: var(--topbar-h); padding: 8px 0; }
    .topbar .container { flex-direction: column; justify-content: center; gap: 8px; }
    .topbar-left, .topbar-right { justify-content: center; width: 100%; }
    
    .section { padding:4.5rem 0; }
    .topbar-left .tb-hide { display:none; }
    .topbar-left { gap:.9rem; }
    .footer-grid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .contact-info, .contact-form { padding:1.8rem 1.4rem; }
    .form-grid { grid-template-columns:1fr; }
    .about-badge { position:static; margin-top:1rem; display:inline-flex; gap:1rem; align-items:center; }
    .about-badge .num { font-size:2rem; }
    .hero-arrow { display:none; }
    .fab-wa { width:54px; height:54px; bottom:18px; right:18px; }
    .fab-wa svg { width:30px; height:30px; }
    .modal-content { padding:1.4rem 1.3rem 1.8rem; }
}

@media (prefers-reduced-motion:reduce) {
    * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .reveal { opacity:1; transform:none; }
}