
:root{
  --navy:#0A2540;
  --navy-soft:#153A66;
  --cyan:#5BC0EB;
  --cyan-deep:#1A95C2;
  --paper:#FAF8F4;
  --paper-alt:#F2EEE6;
  --ink:#332E27;
  --muted:#7A7468;
  --line:#E6E0D4;
  --white:#FFFFFF;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{ background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,h4{ font-family:'Fraunces',serif; font-weight:500; color:var(--navy); letter-spacing:-0.01em;}
a{ color:inherit; text-decoration:none;}
img{ max-width:100%; display:block;}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 36px;}
.eyebrow{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-deep); font-weight:600; margin-bottom:16px; display:block;}
.btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:40px; font-weight:600; font-size:14.5px; cursor:pointer; transition:.25s; font-family:'Inter';}
.btn-primary{ background:var(--navy); color:var(--white);}
.btn-primary:hover{ background:var(--cyan-deep); transform:translateY(-2px);}
.btn-ghost{ border:1.5px solid var(--navy); color:var(--navy);}
.btn-ghost:hover{ background:var(--navy); color:var(--white);}

/* NAV - sticky always */
header{ position:sticky; top:0; z-index:100; background:rgba(250,248,244,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
nav{ display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:20px 36px;}
.logo-mark{ display:flex; align-items:center; gap:12px;}
.logo-mark img{ height:36px; width:36px; object-fit:contain;}
.logo-text{ font-family:'Fraunces'; font-weight:600; font-size:19px; color:var(--navy);}
.logo-text em{ font-style:italic; color:var(--cyan-deep);}

.nav-links{ display:flex; gap:30px; align-items:center;}
.nav-links a{ position:relative; font-size:14.5px; color:var(--ink); font-weight:500; padding:6px 1px; transition:color .3s ease;}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--cyan-deep); transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.16,1,.3,1);}
.nav-links a:hover{ color:var(--cyan-deep);}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left;}
.nav-links a.active{ color:var(--navy); font-style:italic; font-family:'Fraunces';}
.nav-links a.active::after{ transform:scaleX(1); transform-origin:left; background:var(--navy);}

.nav-cta{ display:flex; align-items:center; gap:18px;}
.burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; z-index:200;}
.burger span{ width:22px; height:2px; background:var(--navy);}

/* HERO */
.hero{ padding:70px 0 100px;}
.hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
.hero h1{ font-size:clamp(2.6rem,5vw,4.4rem); line-height:1.06; margin-bottom:28px; font-weight:500;}
.hero h1 .it{ font-style:italic; color:var(--cyan-deep);}
.hero p.lead{ font-size:18px; color:var(--muted); max-width:480px; margin-bottom:38px; line-height:1.75;}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap;}
.hero-art{ position:relative; display:flex; align-items:center; justify-content:center;}
.hero-art svg{ width:100%; max-width:420px; height:auto;}
.hero-tags{ position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%;}
.hero-tags span{ background:var(--white); border:1px solid var(--line); padding:8px 16px; border-radius:30px; font-size:12.5px; color:var(--navy); font-weight:500; box-shadow:0 8px 20px -10px rgba(10,37,64,.15);}

/* PAGE HERO */
.page-hero{ padding:54px 0 50px; border-bottom:1px solid var(--line);}
.breadcrumb{ font-size:12.5px; color:var(--muted); margin-bottom:18px;}
.breadcrumb a{ color:var(--cyan-deep);}
.breadcrumb a:hover{ text-decoration:underline;}
.page-hero h1{ font-size:clamp(2.1rem,3.6vw,3rem); margin-bottom:14px;}
.page-hero p{ color:var(--muted); font-size:16.5px; max-width:600px;}

/* SECTION GENERIC */
.section{ padding:100px 0;}
.section-tight{ padding:76px 0;}
.alt-bg{ background:var(--paper-alt);}
.navy-bg{ background:var(--navy); color:var(--paper);}
.section-head{ max-width:640px; margin-bottom:56px;}
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.15;}
.section-head p{ color:var(--muted); font-size:16.5px; margin-top:16px; max-width:560px;}

/* ABOUT */
.about-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
.about-quote .qmark{ font-family:'Fraunces'; font-size:90px; color:var(--cyan-deep); line-height:1; opacity:.35; margin-bottom:-10px;}
.about-quote p{ font-family:'Fraunces'; font-style:italic; font-size:24px; color:var(--navy); line-height:1.4;}
.about-quote .src{ margin-top:18px; font-size:13.5px; color:var(--muted); font-style:normal; font-family:'Inter';}
.about-body p{ font-size:16.5px; color:var(--ink); margin-bottom:20px;}
.about-body p:first-of-type::first-letter{ font-family:'Fraunces'; font-size:64px; float:left; line-height:0.8; margin:8px 10px 0 0; color:var(--navy); font-weight:600;}
.about-stats{ display:flex; gap:48px; margin-top:36px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:32px;}
.about-stat .num{ font-family:'Fraunces'; font-size:36px; color:var(--cyan-deep); font-weight:600;}
.about-stat .lbl{ font-size:13px; color:var(--muted); margin-top:4px;}

/* MISSION VISION */
.mv-spread{ display:grid; grid-template-columns:1fr 1fr; gap:0;}
.mv-panel{ padding:80px 60px; position:relative;}
.mv-panel:first-child{ border-right:1px solid rgba(250,248,244,.15);}
.mv-letter{ font-family:'Fraunces'; font-style:italic; font-size:140px; line-height:1; color:rgba(91,192,235,.25); margin-bottom:-30px;}
.mv-panel h3{ color:var(--paper); font-size:28px; margin-bottom:18px;}
.mv-panel p{ color:#B9C6D6; font-size:15.5px; line-height:1.8;}

/* QUALITY */
.qual-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 50px;}
.qual-item{ display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
.qual-badge{ width:40px; height:40px; border-radius:50%; background:var(--white); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-style:italic; color:var(--cyan-deep); font-size:15px; flex-shrink:0;}
.qual-item h4{ font-family:'Inter'; font-size:15.5px; font-weight:600; color:var(--navy); margin-bottom:4px;}
.qual-item p{ font-size:13.8px; color:var(--muted);}

/* SERVICES - asymmetric */
.svc-asym{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px;}
.svc-feature{ background:var(--white); border:1px solid var(--line); border-radius:24px; padding:48px; display:flex; flex-direction:column; justify-content:flex-end; min-height:420px; position:relative; overflow:hidden;}
.svc-feature::before{ content:""; position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(91,192,235,.18), transparent 70%);}
.svc-stack{ display:flex; flex-direction:column; gap:24px;}
.svc-small{ background:var(--white); border:1px solid var(--line); border-radius:24px; padding:34px; flex:1; display:flex; flex-direction:column; justify-content:center;}
.svc-eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-deep); font-weight:600; margin-bottom:14px;}
.svc-feature h3{ font-size:30px; margin-bottom:14px; position:relative;}
.svc-feature p{ font-size:15.5px; color:var(--muted); max-width:420px; position:relative; margin-bottom:18px;}
.svc-small h3{ font-size:19px; margin-bottom:10px;}
.svc-small p{ font-size:14px; color:var(--muted); margin-bottom:14px;}
.svc-link{ font-size:13.5px; color:var(--cyan-deep); font-weight:600; position:relative;}
.svc-link:hover{ text-decoration:underline;}

/* CATALOG - narrative chapters */
.chapter{ background:var(--white); border:1px solid var(--line); border-radius:22px; padding:40px 44px; margin-bottom:22px;}
.chapter-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.chapter-num{ font-family:'Fraunces'; font-style:italic; font-size:30px; color:var(--cyan-deep);}
.chapter-head h3{ font-size:21px;}
.chips{ display:flex; flex-wrap:wrap; gap:10px;}
.chip{ background:var(--paper-alt); border:1px solid var(--line); border-radius:30px; padding:9px 16px; font-size:13.3px; color:var(--ink);}
.chip b{ color:var(--navy); font-weight:600;}

/* SCHOOLS */
.school-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.school-card{ background:var(--white); border:1px solid var(--line); border-radius:24px; padding:40px;}
.school-icon{ width:56px; height:56px; border-radius:50%; background:var(--paper-alt); display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.school-icon svg{ width:26px; height:26px; stroke:var(--navy);}
.school-card .eyebrow{ margin-bottom:6px;}
.school-card h3{ font-size:23px; margin-bottom:20px;}
.school-sub{ margin-bottom:18px;}
.school-sub h5{ font-family:'Inter'; font-weight:600; font-size:14.5px; color:var(--navy); margin-bottom:5px;}
.school-sub p{ font-size:14px; color:var(--muted);}
.modalidades{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}
.modalidades span{ font-size:12.5px; padding:7px 15px; border-radius:30px; background:var(--paper-alt); color:var(--navy); font-weight:500;}

/* ENGINEERING - vertical editorial timeline */
.etimeline{ position:relative; padding-left:50px;}
.etimeline::before{ content:""; position:absolute; left:18px; top:10px; bottom:10px; width:1px; background:var(--line);}
.estep{ position:relative; padding-bottom:50px;}
.estep:last-child{ padding-bottom:0;}
.estep .enum{ position:absolute; left:-50px; top:-6px; width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-style:italic; font-size:15px;}
.estep h4{ font-size:19px; margin-bottom:8px;}
.estep p{ font-size:14.5px; color:var(--muted); max-width:520px;}

/* CASES */
.case-story-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px;}
.case-story{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:24px;}
.case-story .cs-code{ font-size:11.5px; color:var(--cyan-deep); font-weight:600; letter-spacing:.05em; margin-bottom:10px; display:block;}
.case-story h5{ font-family:'Inter'; font-weight:600; font-size:14.5px; color:var(--navy); margin-bottom:6px;}
.case-story .meta{ font-size:12.5px; color:var(--muted);}
.reg-wrap{ background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; overflow-x:auto;}
table.soft-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px;}
table.soft-table thead th{ text-align:left; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:16px 22px; border-bottom:1px solid var(--line); font-weight:600;}
table.soft-table tbody td{ padding:15px 22px; border-bottom:1px solid var(--line); color:var(--ink);}
table.soft-table tbody tr:last-child td{ border-bottom:none;}
table.soft-table .code{ color:var(--cyan-deep); font-weight:600;}

/* VALUE */
.value-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 50px;}
.value-card{ padding-top:26px; border-top:2px solid var(--navy);}
.value-card .vnum{ font-family:'Fraunces'; font-style:italic; font-size:22px; color:var(--cyan-deep); margin-bottom:10px;}
.value-card h4{ font-size:19px; margin-bottom:10px;}
.value-card p{ font-size:15px; color:var(--muted);}

/* CONTACT */
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.contact-info{ background:var(--white); border:1px solid var(--line); border-radius:24px; padding:44px;}
.contact-info .row{ display:flex; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
.contact-info .row:last-child{ border-bottom:none;}
.contact-info .k{ font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.contact-info .v{ font-weight:600; color:var(--navy); text-align:right; max-width:280px; font-size:14.5px;}

/* CTA */
.cta-band{ background:var(--navy); border-radius:32px; padding:90px 60px; text-align:center; position:relative; overflow:hidden;}
.cta-band::before{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(91,192,235,.18), transparent 70%); top:-160px; right:-100px;}
.cta-band h2{ color:var(--paper); font-size:clamp(2rem,4.4vw,3.4rem); margin-bottom:20px; position:relative;}
.cta-band p{ color:#B9C6D6; max-width:480px; margin:0 auto 36px; font-size:16px; position:relative;}
.cta-band .btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative;}
.cta-band .btn-primary{ background:var(--cyan); color:var(--navy);}
.cta-band .btn-ghost{ border-color:#3a5878; color:var(--paper);}

/* FOOTER */
footer{ padding:90px 0 36px;}
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:50px; margin-bottom:56px;}
.foot-brand .logo-text{ font-size:22px; margin-bottom:16px;}
.foot-brand p{ color:var(--muted); font-size:14.5px; max-width:280px;}
footer h5{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin-bottom:18px; font-weight:600;}
footer .flinks{ display:flex; flex-direction:column; gap:12px;}
footer .flinks a, footer .flinks span{ color:var(--muted); font-size:14.5px;}
footer .flinks a:hover{ color:var(--cyan-deep);}
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:30px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); flex-wrap:wrap; gap:14px;}

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{ opacity:1; transform:translateY(0);}

@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr;}
  .hero-art{ order:-1;}
  .about-wrap{ grid-template-columns:1fr;}
  .mv-spread{ grid-template-columns:1fr;}
  .mv-panel:first-child{ border-right:none; border-bottom:1px solid rgba(250,248,244,.15);}
  .qual-grid{ grid-template-columns:1fr;}
  .svc-asym{ grid-template-columns:1fr;}
  .svc-feature{ min-height:300px;}
  .school-grid{ grid-template-columns:1fr;}
  .case-story-grid{ grid-template-columns:repeat(2,1fr);}
  .value-grid{ grid-template-columns:1fr;}
  .foot-grid{ grid-template-columns:1fr 1fr; gap:36px;}
  .contact-split{ grid-template-columns:1fr;}
}
@media (max-width:760px){
  .nav-links{ position:fixed; top:0; right:0; height:100vh; width:80%; max-width:320px; background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:center; padding:40px; gap:26px; transform:translateX(100%); transition:.3s; border-left:1px solid var(--line);}
  .nav-links.open{ transform:translateX(0);}
  .nav-links a{ font-size:18px;}
  .burger{ display:flex;}
  .nav-cta .btn-ghost{ display:none;}
  .wrap{ padding:0 22px;}
  .section{ padding:76px 0;}
  .mv-panel{ padding:56px 30px;}
  .cta-band{ padding:56px 28px; border-radius:24px;}
  .case-story-grid{ grid-template-columns:1fr;}
  .foot-grid{ grid-template-columns:1fr; gap:36px;}
  .chapter{ padding:30px 26px;}
  .about-stats{ gap:32px;}
}
