:root{
  --brand:#0f5c8f;
  --brand-dark:#0b3f65;
  --accent:#d7e6f2;
  --ink:#1d2735;
  --muted:#5b6a7d;
  --bg:#ffffff;
  --panel:#ffffff;
  --soft:#e7edf3;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial}
a{color:var(--brand);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:24px}
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.04)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:10px;background:var(--brand-dark);display:grid;place-items:center;color:#fff;font-weight:800}
.brand-name{font-weight:800}
.tagline{color:var(--muted);font-size:14px}
nav a{color:var(--ink);opacity:.85}
nav a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
  background:var(--brand);color:#fff;font-weight:700;box-shadow:var(--shadow)}
h1,h2,h3{font-family:'Montserrat',system-ui,Segoe UI,Roboto,Helvetica,Arial}
h1{font-size:clamp(28px,6vw,48px);letter-spacing:.5px}
h2{font-size:clamp(22px,4.5vw,34px)}
h3{font-size:20px}
section{padding:32px 0}
.card{background:var(--panel);border:1px solid var(--soft);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width: 980px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero .panel{background:linear-gradient(180deg,var(--brand-dark),var(--brand));color:#fff;border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.hero .panel h1{color:#fff;margin:0 0 8px}
.hero .panel p{opacity:.95}
.hero .figure{position:relative}
.badge{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--brand-dark);border-radius:999px;padding:8px 12px;font-weight:700;border:1px solid var(--soft)}
.shape{position:absolute;inset:auto;opacity:.5}
.shape.sq{width:90px;height:90px;border-radius:18px;background:var(--accent);top:0;left:0}
.shape.ring{width:130px;height:130px;border:8px solid var(--accent);border-radius:999px;bottom:0;right:30px}
.pill{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--soft);font-weight:700;color:var(--brand-dark)}
.list{display:grid;gap:6px}
.row{display:flex;gap:8px;align-items:flex-start}
.dot{width:12px;height:12px;border-radius:50%;background:var(--brand)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.kpi .item{background:#fff;border:1px solid var(--soft);border-radius:12px;padding:12px;text-align:center}
.kpi .n{font-weight:900;color:var(--brand-dark)}
.timeline{background:var(--brand-dark);color:#fff;border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.timeline .items{display:flex;gap:10px;flex-wrap:wrap}
.step{background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;border:1px solid var(--soft);
  min-width:120px;position:relative}
.step .yr{display:block;font-weight:800;color:var(--brand-dark)}
.step::after{content:"";position:absolute;right:-18px;top:50%;transform:translateY(-50%);border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.step:last-child::after{display:none}
.section-head{background:var(--brand-dark);color:#fff;border-radius:10px 10px 0 0;padding:14px 16px;font-weight:800;letter-spacing:.5px}
.section{border:1px solid var(--soft);border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.section .content{padding:18px}
.hr{height:1px;background:var(--soft);margin:8px 0}
.icon{width:36px;height:36px;border-radius:999px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:800}
footer{padding:40px 0 24px;color:#5b6a7d}
/* Logo image */
.logo{width:46px;height:46px;border-radius:8px;overflow:hidden;background:#0000;display:grid;place-items:center}
.logo img{width:100%;height:100%;object-fit:contain;display:block}

/* Interactive timeline */
.timeline{background:#fff;color:var(--ink);border:1px solid var(--soft);border-radius:14px;padding:0;box-shadow:var(--shadow)}
.tnav{display:flex;gap:8px;overflow:auto;padding:10px;background:var(--brand-dark);border-radius:14px 14px 0 0}
.tnav button{appearance:none;border:0;border-radius:999px;padding:8px 12px;font-weight:800;color:#fff;background:transparent;opacity:.75;white-space:nowrap;cursor:pointer}
.tnav button[aria-current="true"]{background:#fff;color:var(--brand-dark);opacity:1}
.tpanel{padding:16px 18px}
.tpanel h4{margin:6px 0 6px;font-size:18px}
.tpanel .meta{color:var(--brand-dark);font-weight:800}
.tcontrols{display:flex;justify-content:space-between;align-items:center;padding:10px;border-top:1px solid var(--soft);border-radius:0 0 14px 14px;background:#fff}
.tcontrols .prev,.tcontrols .next{appearance:none;border:0;border-radius:10px;padding:8px 12px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer}
.tcontrols .prev[disabled],.tcontrols .next[disabled]{opacity:.4;cursor:not-allowed}

/* Mobile scroll-snap for timeline nav */
@media (max-width: 768px){
  .tnav{scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
  .tnav::-webkit-scrollbar{display:none}
  .tnav button{scroll-snap-align:center}
}

/* === Contact Footer (slide style) === */
.contact-footer{padding:0; margin-top:24px}
.contact-wrap{max-width:1120px;margin:0 auto;padding:24px}
.contact-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center;padding:24px 24px 0 24px}
.contact-hero h2{font-family:'Montserrat'; font-size:clamp(26px,5vw,42px); margin:0 0 8px}
.contact-hero .lead{color:var(--muted)}
.contact-hero .media{border-radius:18px; overflow:hidden; position:relative}
.contact-hero .media img{width:100%; height:auto; display:block}
.contact-hero .sq{position:absolute; width:90px; height:90px; background:var(--accent); border-radius:18px; top:16px; left:16px; opacity:.6}

.contact-card{background:#f1f3f6;border-top:1px solid var(--soft); padding:16px 24px 22px 24px}
.c-list{display:grid;gap:10px}
.c-row{display:flex;align-items:center;gap:10px}
.cicon{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--brand);color:#fff;flex:0 0 auto}
.cicon svg{width:20px;height:20px;display:block; fill:#fff}
.c-text a{color:inherit}
@media (max-width: 900px){
  .contact-hero{grid-template-columns:1fr}
}

/* Objetivos - íconos */
.obj-icon{width:84px;height:84px;display:block;margin-bottom:10px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
@media (max-width: 980px){ .obj-icon{width:72px;height:72px} }

/* Servicios - imágenes */
.svc-thumb{border-radius:14px; overflow:hidden; margin-bottom:10px; border:1px solid var(--soft); box-shadow: var(--shadow)}
.svc-thumb img{width:100%; height:auto; display:block}

/* === Animations & Transitions === */
html{scroll-behavior:smooth}
/* Hover lift for cards & buttons */
.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.10)}
.btn{transition:transform .18s ease, box-shadow .18s ease, background .25s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.12)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}
/* Optional delay via inline style: --d: .1s */
.reveal{transition-delay:var(--d,0s)}

/* Hero decorative shapes */
@keyframes floatY{from{transform:translateY(0)} to{transform:translateY(10px)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.shape.sq{animation: floatY 6s ease-in-out infinite alternate}
.shape.ring{animation: spinSlow 38s linear infinite; opacity:.4}

/* Timeline panel entrance */
.tpanel{opacity:0; transform:translateY(8px); transition:opacity .28s ease, transform .28s ease}
.tpanel.enter{opacity:1; transform:none}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}


/* Timeline: panel visible por defecto */
.timeline .tpanel {
  opacity: 1 !important;
  transform: none !important;
}
.timeline .tpanel.enter {
  transition: opacity .28s ease, transform .28s ease;
}