:root{ --blue:#0A3A5A; --blue-700:#0D4A73; --white:#FFFFFF; --accent:#129bb0; --accent-700:#0d7d8f; --ink:#0C1116; --muted:#5f6b79; --line:#E1E6EE; --shadow:0 12px 28px rgba(10,58,90,.08); --shadow-sm:0 6px 16px rgba(10,58,90,.10); --shadow-lg:0 18px 44px rgba(10,58,90,.18);}
*{box-sizing:border-box}
html{font-size:62.5%}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--ink);background:var(--white)}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}
/* ================= NAVBAR PRO ================= */

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px) saturate(180%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, background .25s ease, backdrop-filter .25s ease;
}

/* Efecto al hacer scroll */
.header.scrolled{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(200%);
  box-shadow:0 10px 28px rgba(10,17,22,.10);
}

/* Contenedor */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 0;
}

/* Marca */
.brand{
  display:flex;
  align-items:center;
  gap:.9rem;
  text-decoration:none;
}

.brand img{
  height:60px;
  transition:transform .25s ease;
}

.brand:hover img{
  transform:scale(1.06);
}

.brand .name{
  font-weight:800;
  color:var(--blue);
  font-size:1.7rem;
  letter-spacing:-.3px;
}

/* Links principales */
.nav{
  display:flex;
  gap:2.2rem;
  align-items:center;
}

.nav a{
  color:#0f141b;
  text-decoration:none;
  font-weight:600;
  font-size:1.55rem;
  position:relative;
  transition:color .2s ease;
}

/* Subrayado elegante */
.nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--blue);
  border-radius:2px;
  transform:translateX(-50%);
  transition:width .25s ease;
}

.nav a:hover{
  color:var(--blue);
}

.nav a:hover::after{
  width:60%;
}

/* Botón Contacto dentro del nav */
.nav .btn.ghost{
  border:1.5px solid var(--blue);
  padding:.7rem 1.3rem;
  border-radius:8px;
  font-size:1.45rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  transition:background .22s ease, color .22s ease, transform .22s ease;
}

.nav .btn.ghost:hover{
  background:var(--blue);
  color:#fff;
  transform:translateY(-1px);
}

/* Ícono */
.nav .btn.ghost i{
  font-size:1.45rem;
}

/* Botón menú móvil */
.menu{
  display:none;
  border:0;
  background:none;
  font-size:2.8rem;
  color:#0c1a27;
  cursor:pointer;
  transition:color .2s ease, transform .15s ease;
}

.menu:hover{
  color:var(--blue);
}

.menu:active{
  transform:scale(.92);
}

@media (max-width:980px){
  .menu{ display:inline-flex }
  .nav{ display:none }
}

/* ================= SIDEBAR PRO ================= */

.sidebar{
  position:fixed;
  inset:0 0 0 auto;
  width:min(360px,92%);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px) saturate(180%);
  border-left:1px solid var(--line);
  box-shadow:-14px 0 28px rgba(0,0,0,.16);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
  z-index:50;
  display:flex;
  flex-direction:column;
}

.sidebar.open{
  transform:translateX(0);
}

.sidebar .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 1.6rem;
  border-bottom:1px solid var(--line);
}

.sidebar .list{
  padding:1.4rem;
  display:grid;
  gap:1rem;
}

.sidebar a{
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:1.15rem 1.3rem;
  border-radius:.9rem;
  color:#161d26;
  text-decoration:none;
  border:1px solid var(--line);
  font-size:1.5rem;
  font-weight:600;
  transition:background .18s ease, transform .08s ease, box-shadow .18s ease;
}

.sidebar a:hover{
  background:rgba(13,74,115,.08);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.sidebar a:active{
  transform:translateY(0);
}

.sidebar .bi{
  font-size:1.7rem;
  color:var(--blue);
}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(10,17,22,.40);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
  z-index:40;
}

.overlay.show{
  opacity:1;
  visibility:visible;
}
/* ===== Centrado vertical de enlaces y botón ===== */

.nav {
  display: flex;
  align-items: center;        /* Centra verticalmente */
  gap: 2.4rem;
  height: 56px;               /* Altura uniforme */
}

.nav a {
  display: flex;              /* Alinea el texto verticalmente */
  align-items: center;
  height: 100%;               /* Igual altura que el nav */
  padding-bottom: 2px;        /* Optimizado para óptico */
}

.nav .btn.ghost {
  height: 44px;               /* Ajuste óptico */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.4rem;
  margin-left: .6rem;
  border-radius: 8px;
}

/* Hover sigue funcionando igual */
.nav a::after {
  bottom: -6px;               /* Ajuste visual al usar altura fija */
}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1.1rem 1.5rem;border-radius:.9rem;text-decoration:none;font-weight:800;font-size:1.6rem;border:2px solid transparent;cursor:pointer;transition:background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease, box-shadow .2s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn.primary:hover{background:var(--accent-700);box-shadow:var(--shadow)}
.btn.ghost{border-color:var(--blue);color:var(--blue);background:#fff}
.btn.ghost:hover{background:#f1f7f9}
.btn.dark{background:#0A1621;color:#E8EEF5}

/* ===== Hero PRO (tu CSS original, se mantiene) ===== */
.hero{position:relative;color:#fff;background:linear-gradient(135deg,#0A3A5A 0%, #0D4A73 45%, #118aa0 100%)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 400px at 20% 20%, rgba(255,255,255,.08), transparent 50%), linear-gradient( to right, rgba(255,255,255,.08), rgba(255,255,255,0) );pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;padding:7rem 0}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr}}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.6rem;background:#ffffff1a;border:1px solid #ffffff33;color:#fff;padding:.6rem 1rem;border-radius:999px;font-weight:800}
.hero h1{font-size:clamp(3.2rem,5.2vw,6.2rem);line-height:1.04;margin:.4rem 0;text-wrap:balance;text-shadow:0 6px 18px rgba(0,0,0,.22)}
.hero p{font-size:1.95rem;opacity:.98;max-width:64ch}
.hero .cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}

/* ====== HERO CARD (tu CSS original, se mantiene) ====== */
.hero-visual{ display:grid; gap:1.4rem }
.hero-card{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; padding:1.2rem; border-radius:14px; background: color-mix(in oklab, #0A3A5A 20%, transparent); border:1px solid rgba(13,74,115,.50); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.hero-metric{ position:relative; background:#0A1621; border:1px solid #13293D; border-radius:14px; padding:1.4rem 1.2rem 1.1rem; color:#E8EEF5; text-align:center; box-shadow: 0 6px 18px rgba(0,0,0,.28); isolation:isolate; }
.hero-metric::after{ content:""; position:absolute; inset:0; border-radius:12px; background: radial-gradient(60% 80% at 50% 0%, rgba(18,155,176,.18), transparent 70%); pointer-events:none; z-index:-1; }
.hero-metric .counter{ font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight:800; color:#fff; letter-spacing:.5px }
.hero-metric .unit{ font-size:1.5rem; margin-left:.12rem; color:#BFE8EE }
.hero-metric p{ margin:.4rem 0 0; color:#C8D2DE; font-size: clamp(1.3rem, 1.6vw, 1.5rem) }
@media (max-width:980px){ .hero-card{ grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) ); } }
@media (max-width:640px){ .hero-card{ grid-template-columns: repeat(2, minmax(0,1fr)); padding:1rem; gap:.9rem } }
@media (max-width:400px){ .hero-card{ grid-template-columns: 1fr; padding:.9rem; gap:.8rem } .hero-metric{ padding:1.2rem 1rem } }
@media (prefers-reduced-motion: no-preference){
  .hero-metric{ transform: translateY(6px); opacity:.96; transition: transform .35s ease, opacity .35s ease, box-shadow .25s ease }
  .hero-metric:hover{ transform: translateY(0); box-shadow:0 12px 30px rgba(0,0,0,.32) }
}

/* ===== Fondo con carrusel (nuevo) ===== */
.hero .hero-bg{
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
.hero .hero-bg::after{
  /* Oscurecedor para mejorar contraste del texto */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,22,33,.65) 0%, rgba(7,22,33,.35) 40%, rgba(7,22,33,.65) 100%);
  pointer-events:none;
}

.hero .bg-slides{
  display:flex; height:100%; width:100%;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.hero .bg-slide{ min-width:100%; height:100% }
.hero .bg-slide img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05) contrast(1.05);  /* un poco más vivas */
}

/* Dots sobre el fondo */
.hero .bg-dots{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:.5rem; z-index:2;
}
.hero .bg-dot{
  width:9px; height:9px; border-radius:999px;
  background:#ffffff66; border:1px solid #ffffffaa;
  display:inline-block; cursor:pointer;
}
.hero .bg-dot.active{ background:#fff }

/* Asegura que el contenido quede por encima del fondo */
.hero .wrap{ position:relative; z-index:1 }

/* Eliminamos el carrusel lateral anterior si existía */
.hero-carousel{ display:none !important; }

/* Trust points */
.trust-points{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.4rem;padding:0;list-style:none}
.trust-points li{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;background:#ffffff1a;border:1px solid #ffffff2e;color:#fff;padding:.6rem 1rem;border-radius:999px}

/* ===== Features ===== */
.features-alt{background:#F7FAFD;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.features-alt .heading-title{font-size:3.1rem;margin:.5rem 0 2rem;text-align:center;color:#14181d}
.features-alt .box-container{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem}
@media (max-width:1100px){.features-alt .box-container{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.features-alt .box-container{grid-template-columns:repeat(2,1fr)}}
.features-alt .box{padding:2rem 1rem;text-align:center;background:#0f4a63;border:1px solid #155e7c;border-radius:1rem;cursor:pointer;box-shadow:0 10px 26px rgba(17,90,102,.12);transition:transform .08s ease, box-shadow .2s ease}
.features-alt .box:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(10,58,90,.18)}
.features-alt .box img{height:56px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12))}

/* ===== Diferenciadores ===== */
.diff .diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:980px){.diff .diff-grid{grid-template-columns:1fr}}
.diff-item{background:#fff;border:1px solid var(--line);border-radius:1.2rem;padding:1.6rem;box-shadow:var(--shadow-sm);transition:transform .12s ease, box-shadow .2s ease}
.diff-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.diff-item i{font-size:2.2rem;color:var(--blue)}
.diff-item h3{margin:.8rem 0 .4rem;font-size:1.9rem}
.diff-item p{margin:0;color:#5f6b79}

/* ===== Servicios destacados ===== */
.section{padding:6rem 0}
.kicker{color:var(--accent);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:1.2rem}
.h2{font-size:3rem;margin:.4rem 0 1.2rem}
.featured{background:#fff}
.featured .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media (max-width:1100px){.featured .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.featured .grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:1.2rem;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .12s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card .img{height:200px;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .body{padding:1.6rem;display:grid;gap:.8rem}
.card h3{margin:0;font-size:2rem;color:#14181d}
.card p{margin:0;color:#5f6b79;font-size:1.5rem}
.center-actions{display:grid;place-items:center;margin-top:1.6rem}

/* ===== Testimonials ===== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:980px){.testi-grid{grid-template-columns:1fr}}
.testi{background:#fff;border:1px solid var(--line);border-radius:1.2rem;padding:1.6rem;box-shadow:var(--shadow-sm)}
.testi blockquote{margin:0 0 .8rem;font-size:1.6rem;color:#14181d}
.testi figcaption{color:#5f6b79;font-size:1.4rem}

/* ===== CTA Final ===== */
.cta-final .cta-box{background:linear-gradient(135deg,#0A3A5A,#0D4A73);color:#fff;border:1px solid #0d4a73;border-radius:1.2rem;padding:2.2rem;display:grid;gap:.6rem;box-shadow:var(--shadow)}
.cta-final .cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.4rem}

/* ===== Insights ===== */
.insights .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media (max-width:1040px){.insights .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.insights .grid{grid-template-columns:1fr}}
.post{background:#fff;border:1px solid var(--line);border-radius:1.0rem;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:140px auto;transition:box-shadow .2s ease, transform .06s ease}
.post:hover{box-shadow:0 18px 44px rgba(10,58,90,.12);transform:translateY(-2px)}
.post .thumb{height:140px;overflow:hidden}
.post .thumb img{width:auto;height:auto;object-fit:cover;}
.post .meta{display:flex;gap:.6rem;align-items:center;color:#728296;font-size:1.2rem;padding:1.0rem 1.2rem 0}
.post h3{margin:.2rem 1.2rem;font-size:1.85rem;color:#14181d}
.post p{margin:0 1.2rem 1.2rem;color:#5f6b79}
.tag{display:inline-block;font-size:1.1rem;background:#EAF6F8;color:#0B5A66;border:1px solid #BFE8EE;padding:.2rem .6rem;border-radius:999px}

/* =======================
   FOOTER PRO ULTRA
  ======================= */

.footer {
  background: linear-gradient(180deg, #071119 0%, #0c2131 100%);
  color: #C8D2DE;
  margin-top: 4rem;
  border-top: 1px solid #12212f;
  position: relative;
  overflow: hidden;
}

/* Glow suave superior */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 80%;
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at top,
    rgba(17, 138, 160, 0.22),
    transparent 70%
  );
  pointer-events: none;
}

.footer .wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.8rem;
  padding: 4rem 0 3rem;
}

@media (max-width:1100px) {
  .footer .wrap {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

@media (max-width:680px) {
  .footer .wrap {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
}

/* Marca */
.footer .brand-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer .brand-inline img {
  height: 100px;
  position: relative;
  filter: drop-shadow(0px 2px 6px rgba(0,0,0,.35));
}

.footer .brand-inline .name {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.3px;
}

/* Títulos */
.footer h4 {
  margin: 0 0 1.2rem;
  font-size: 1.7rem;
  font-weight: 700;
  color: #E8EEF5;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Links */
.footer .links {
  display: grid;
  gap: .9rem;
}

.footer .links a,
.footer .links span {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: #C8D2DE;
  font-size: 1.45rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .20s ease;
  padding: .2rem 0;
}

.footer .links a:hover {
  color: #fff;
  transform: translateX(2px);
}

/* Iconos */
.footer .links a i,
.footer .links span i {
  width: 32px;
  height: 32px;
  display: grid;
  place-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg,#0E2233,#173d57);
  border: 1px solid #1e2d3d;
  color: #d3e0ea;
  font-size: 1.55rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
  transition: all .25s ease;
}

.footer .links a:hover i {
  background: linear-gradient(135deg,#1193ac,#14acc4);
  border-color: #1193ac;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* Redes sociales */
.footer .socials {
  display: flex;
  gap: .9rem;
  margin-top: 1.3rem;
}

.footer .socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  border-radius: 12px;
  background: #13293D;
  border: 1px solid #203243;
  color: #E8EEF5;
  font-size: 1.6rem;
  transition: all .25s ease;
}

.footer .socials a:hover {
  background: #14506e;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}

/* Línea inferior */
.footer .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0 2rem;
  border-top: 1px solid #162a39;
  font-size: 1.4rem;
  color: #9FB3C8;
}

@media (max-width:680px){
  .footer .bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}
/* Bottom sheet */
.sheet-overlay{position:fixed; inset:0; background:rgba(10,17,22,.45); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:.25s ease; z-index:60}
.sheet-overlay.show{opacity:1; visibility:visible}
.sheet{position:fixed; left:0; right:0; bottom:0; transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); z-index:61; background:#fff; border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:0 -18px 40px rgba(10,58,90,.15); max-height:88vh; display:grid; grid-template-rows:auto 1fr; will-change:transform}
.sheet.open{transform:translateY(0)}
.sheet-bar{display:flex; justify-content:flex-end; align-items:center; padding:.6rem .8rem} /* <-- FIX aplicado (antes sin punto) */
.sheet-close{background:#0A1621; color:#E8EEF5; border:0; padding:.6rem .8rem; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:.6rem}
.sheet-hero{width:100%; height:auto; object-fit:cover; display:block; border-top-left-radius:16px; border-top-right-radius:16px}
.sheet-content{padding:1.2rem 1.4rem 1.4rem; overflow:auto}
.sheet-heading h3{margin:0 0 .8rem; font-size:2rem; color:#14181d}

/* Utilities */
.fade-up{opacity:0;transform:translateY(14px);transition:opacity .42s ease, transform .42s ease}
.fade-up.appear{opacity:1;transform:none}

/* ===========================================
   CONTACT / HERO + FORM — CONSOLIDADO PRO
   =========================================== */

/* ---------- HERO CONTACT PRO ULTRA ---------- */

.hero-contact {
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg,
    #082a40 0%,
    #0A3A5A 22%,
    #0D4A73 55%,
    #129bb0 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

/* Glow sutil superior */
.hero-contact::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 180px;
  background: radial-gradient(
    ellipse at top,
    rgba(255, 255, 255, .16),
    transparent 70%
  );
  pointer-events: none;
}

/* Glow sutil lateral */
.hero-contact::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 40%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(17, 155, 176, .28),
    transparent 70%
  );
  filter: blur(20px);
  opacity: .55;
  pointer-events: none;
}

/* Layout del hero */
.hero-contact .wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4.2rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 980px) {
  .hero-contact .wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Eyebrow / chip */
.hero-contact .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.4rem;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 1.35rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  color: #E2EDF5;
}

/* Título */
.hero-contact h1 {
  font-size: clamp(3.4rem, 5vw, 6rem);
  margin: 1rem 0 1.6rem;
  line-height: 1.05;
  font-weight: 800;
  text-shadow: 0 8px 28px rgba(0,0,0,.28);
}

/* Descripción */
.hero-contact p {
  font-size: 2rem;
  max-width: 62ch;
  opacity: .96;
  line-height: 1.55;
}

/* Visual (imagen) */
.hero-contact .visual img {
  width: 100%;
  border-radius: 20px;
  opacity: .98;
  box-shadow:
    0 20px 50px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.12);
  transition: transform .4s ease, box-shadow .35s ease;
}

.hero-contact .visual img:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 70px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.22);
}

@media(max-width:980px) {
  .hero-contact .visual img { margin-top: 2.4rem; }
}

/* ---------- GRID DE CONTACTO (cuerpo) ---------- */

.contact-pro {
  padding: 5rem 0 6rem;
  background: linear-gradient(180deg, #f4f7fa 0%, #eef3f8 100%);
  position: relative;
}

.contact-pro::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 120px;
  background: radial-gradient(
    ellipse at top,
    rgba(17, 138, 160, .16),
    transparent 70%
  );
  pointer-events: none;
}

.contact-grid, .contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: flex-start;
}

@media (max-width: 980px) {
  .contact-grid, .contact-wrap {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Columna izquierda (texto) */
.contact-info .h2 {
  font-size: clamp(2.8rem, 3.8vw, 3.6rem);
  font-weight: 800;
  color: #0A1621;
  margin-bottom: 1.4rem;
}

.contact-desc {
  font-size: 1.6rem;
  color: #3b4a56;
  line-height: 1.55;
  max-width: 52ch;
  margin-bottom: 1.8rem;
}

.contact-points {
  display: grid;
  gap: 1rem;
  font-size: 1.5rem;
  color: #18242f;
  padding-left: 0;
  list-style: none;
}

.contact-points li {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.contact-points i {
  color: #118aa0;
  font-size: 1.7rem;
  background: #e8f7fa;
  padding: .6rem;
  border-radius: 8px;
}

/* ---------- FORMULARIO COMPACT PRO ---------- */

.contact-form {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(17, 55, 77, .14);
  border-radius: 14px;
  padding: 2.2rem 2.2rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  display: grid;
  gap: 1.2rem; /* Compacto */
}

/* Grid 2 columnas en desktop */
@media (min-width: 860px) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
  }
  .contact-form .textarea-field { grid-column: 1 / -1; }
  .contact-form .btn.w-100     { grid-column: 1 / -1; }
}

/* Field */
.field {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fbfe;
  border: 1px solid #d7e4ee;
  border-radius: 10px;
  padding: .55rem 1.1rem;      /* Altura reducida */
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field:hover { border-color: #118aa0; }

.field:focus-within {
  border-color: #1193ac;
  background: #f2fbfe;
  box-shadow: 0 0 0 3px rgba(17,147,172,.10);
}

/* Ícono */
.field > i {
  font-size: 1.5rem;
  color: #1193ac;
  margin-right: .8rem;
  flex: 0 0 auto;
  opacity: .9;
  transform: translateY(1px);
}

/* Inputs */
.input,
.textarea,
select.input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1.25;
  padding: .35rem 0;
  outline: none;
  color: #0E2233;
}

/* Placeholders invisibles para floating label */
.input::placeholder,
.textarea::placeholder { color: transparent; }

/* Textarea */
.textarea {
  height: 110px;
  resize: vertical;
  min-height: 96px;
  max-height: 280px;
}

.textarea-field {
  align-items: flex-start;
  padding-top: .8rem;
}

/* Label flotante */
.floating {
  position: absolute;
  left: 3.2rem; /* espacio por el icono */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  color: #7a8a9d;
  pointer-events: none;
  transition: transform .18s ease, top .18s ease, font-size .18s ease, color .18s ease;
}

/* Estados flotantes */
.input:focus ~ .floating,
.input:not(:placeholder-shown) ~ .floating,
.textarea:focus ~ .floating,
.textarea:not(:placeholder-shown) ~ .floating,
select.input:valid ~ .floating {
  top: .35rem;
  transform: none;
  font-size: 1.15rem;
  color: #1193ac;
}

/* Select */
select.input { appearance: none; padding-right: 2rem; }

/* Estados de validación al intentar enviar (usa .attempt en <form>) */
.contact-form.attempt .field:has(.input:invalid),
.contact-form.attempt .field:has(select.input:invalid) {
  border-color: #e6b1b1;
  background: #fff6f6;
  box-shadow: 0 0 0 3px rgba(201,65,65,.08);
}

.contact-form.attempt .input:invalid ~ .floating,
.contact-form.attempt select.input:invalid ~ .floating {
  color: #c94141;
}

/* Botón principal */
.contact-form .btn.primary {
  background: linear-gradient(135deg,#1193ac,#14b6cd);
  padding: .95rem 1.4rem;
  border-radius: 10px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: .1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease;
}

.contact-form .btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,147,172,.28);
}

.contact-form .btn.primary:active { transform: translateY(0); }
.contact-form .btn.primary i { font-size: 1.6rem; }

/* Accesibilidad: foco claro */
.input:focus,
.textarea:focus,
select.input:focus { outline: none; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-contact .visual img,
  .floating,
  .field,
  .contact-form .btn.primary { transition: none !important; }
}
.pro-card{background:#0A1621;padding:2.4rem;border-radius:1.4rem;color:#E8EEF5;box-shadow:0 18px 38px rgba(0,0,0,.22);border:1px solid #13293D;position:sticky;top:104px}
@media(max-width:980px){.pro-card{position:static}}
.pro-card .header h3{margin:0 0 1.2rem;font-size:2.2rem;color:#fff}
.pro-card .content{display:grid;gap:1rem}
.pro-card .item{display:flex;gap:1rem;align-items:center;font-size:1.55rem}
.pro-card .item i{font-size:1.9rem;color:#129bb0}
.pro-card a{color:#E8EEF5;text-decoration:none}
.pro-card a:hover{text-decoration:underline}
.pro-card hr{border:0;border-top:1px solid #203243;margin:1rem 0;opacity:.8}
.form{background:#fff;padding:3rem 2.4rem;border-radius:1.4rem;box-shadow:0 12px 32px rgba(0,0,0,.12);border:1px solid var(--line);position:relative;overflow:hidden}
.form::before{content:"";position:absolute;inset:-2px;border-radius:1.6rem;background:linear-gradient(135deg, rgba(18,155,176,.18), transparent 60%);pointer-events:none}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:780px){.form .row{grid-template-columns:1fr}}
.field{position:relative}
.input,.textarea,.form select{width:100%;height:54px;padding-left:3.4rem;font-size:1.6rem;border:1px solid var(--line);border-radius:.9rem;background:#fff;color:#0C1116;outline:none;transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease}
.textarea{min-height:120px;padding:1.2rem 1.2rem 1.2rem 3.4rem;resize:vertical}
.input:focus,.textarea:focus,.form select:focus{border-color:#0D4A73;box-shadow:0 0 0 4px rgba(13,74,115,.12);transform:translateY(-1px)}
.form i{position:absolute;top:50%;left:1rem;transform:translateY(-50%);font-size:1.8rem;color:var(--blue);pointer-events:none}
.floating{position:absolute;left:3.4rem;top:50%;transform:translateY(-50%);color:#6b7280;background:#fff;padding:0 .4rem;pointer-events:none;transition: all .14s ease}
.input:not(:placeholder-shown) ~ .floating,.textarea:not(:placeholder-shown) ~ .floating,.input:focus ~ .floating,.textarea:focus ~ .floating,.form select:focus ~ .floating{top:-.7rem;transform:none;font-size:1.2rem;color:#0D4A73}
.hint{font-size:1.2rem;color:#6b7280;margin-top:.4rem}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
form.attempt:has(:invalid){animation: shakeX .36s ease}
.btn.primary.sending{pointer-events:none;background:linear-gradient(135deg,var(--accent-700),var(--accent))}
.btn.primary.sending .bi{animation:spin .8s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}}
/* Sub-hero (páginas internas) */
.page-hero{
  background:linear-gradient(135deg,#0A3A5A,#0D4A73);
  color:#fff;
  border-bottom:1px solid #0D3D5C;
}
.page-hero .inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center;
  padding:2.4rem 0;
}
@media (max-width:980px){
  .page-hero .inner{ grid-template-columns:1fr }
}
.page-hero h1{
  margin:0;
  font-size:clamp(2.4rem,3.2vw,3.2rem);
}
.page-hero p{
  margin:.4rem 0 0;
  opacity:.95;
}

/* Contenedor visual del hero */
.page-hero .thumb{
  position:relative;            /* necesario para el overlay */
  height:200px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* Imagen dentro del hero */
.page-hero .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.85;                  /* << mitad/transparencia suave */
}

/* Overlay azul por encima de la imagen */
.page-hero .thumb::after{
  content:"";
  position:absolute;            /* << debe ser absolute */
  inset:0;
  background:rgba(10,58,90,.35);/* azul con opacidad */
  mix-blend-mode:multiply;      /* mezcla profesional */
  pointer-events:none;
  border-radius:inherit;
}

/* Packages grid */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:1040px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid-cards{grid-template-columns:1fr}}


/* ========= Responsive Addons (no cambia tu diseño base) ========= */
/* ——— Tappable targets (sin cambiar colores/tipografías) ——— */
.menu{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center }
.sidebar a, .btn, .nav a{ min-height:44px }

/* ——— Grillas y hero en pantallas chicas ——— */
@media (max-width:480px){
  .hero .wrap{ padding:4rem 0; gap:2rem }
  .features-alt .box-container{ grid-template-columns:repeat(2,1fr) }
  .cta .btn{ flex:1 1 auto; justify-content:center }
}

/* ——— Carrusel: altura fluida, sin tocar tipografías ——— */
.hero-carousel{ height:clamp(220px, 36vh, 360px) }

/* ——— Sheet: scroll suave en iOS ——— */
.sheet{ max-height:92vh }
.sheet-content{ -webkit-overflow-scrolling: touch }
/* Base: en desktop, mostrar nav y ocultar hamburguesa */
.nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.menu {
  display: none;
}

/* En mobile: ocultar el nav y mostrar el botón hamburguesa */
@media (max-width:980px) {
  .nav {
    display: none !important;   /* fuerza ocultar nav en mobile */
  }
  .menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}
.post.skel .thumb{ background: none; }
.post.skel .thumb::before{ content:none; }
.post.skel .thumb,
.post.skel h3,
.post.skel p{
  position: relative; color: transparent;
}
.post.skel .thumb::after,
.post.skel h3::after,
.post.skel p::after{
  content:""; display:block; border-radius:10px;
  background: linear-gradient(90deg,#edf3f8 0%,#f5f9fd 40%,#edf3f8 80%);
  background-size: 200% 100%; animation: skshine 1.2s linear infinite;
}
.post.skel .thumb{ height:172px; }
.post.skel .thumb::after{ position:absolute; inset:0; }
.post.skel h3::after{ height:20px; width:80%; margin:.45rem 1.4rem .75rem; }
.post.skel p::after{ height:12px; width:92%; margin:0 1.4rem 1rem; }
@keyframes skshine{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

/* ============================================
   INSIGHTS CARD — PRO CORPORATE ULTRA
   ============================================ */

.post{
  --radius: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  grid-template-rows: auto 1fr; /* antes: 140px auto */


  /* Borde + máscara por si la imagen hace zoom */
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--line) 86%, #0D4A73 14%);
  background: #fff;

  /* Sombra base más limpia */
  box-shadow: 0 10px 26px rgba(10,58,90,.08);

  /* Transiciones pro */
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
}

/* Borde luminoso discreto al hover (gradiente) */
.post::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(18,155,176,.15), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
}

.post:hover{
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(10,58,90,.18);
  border-color: color-mix(in oklab, var(--line) 60%, #0D4A73 40%);
}
.post:hover::after{ opacity: 1; }

/* ----- Thumb con zoom suave + máscara redondeada ----- */
.post .thumb{
  height: 220px;                     /* más presencia editorial */
  position: relative;
  overflow: hidden;
  isolation: isolate;                 /* asegura el overlay sin bleed */
  border-bottom: 1px solid var(--line);
  
}

.post .thumb img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.0001);           /* mejora subpixel */
  transition: transform .6s ease, filter .35s ease;
}

.post:hover .thumb img{
  transform: scale(1.06);
  filter: brightness(1.05) contrast(1.05);
}

/* Overlay sutil para legibilidad si el thumb es claro */
.post .thumb::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.02));
  mix-blend-mode: multiply;
  opacity: .8;
  pointer-events:none;
}


/* Tablets */
@media (max-width: 1040px){
  .post .thumb{ height: 200px; }
}

/* Mobile */
@media (max-width: 680px){
  .post .thumb{ height: 180px; }
}

/* Mantener el crop profesional */
.post .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Meta / Etiquetas ----- */
.post .meta{
  display:flex; gap:.6rem; align-items:center;
  color:#6b7a8a;
  font-size:1.25rem;
  padding: 1.1rem 1.4rem .2rem;
}

/* Tag por defecto */
.tag{
  display:inline-block;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.02em;
  background:#EAF6F8;
  color:#0B5A66;
  border:1px solid #BFE8EE;
  padding:.28rem .75rem;
  border-radius:999px;
}

/* (Opcional) Colorear tag por categoría si agregas data-category */
.post[data-category="guia"]      .tag{ background:#eaf6ff; color:#0b4a66; border-color:#bfe0ff; }
.post[data-category="checklist"] .tag{ background:#eafaf0; color:#0b6641; border-color:#bfead1; }
.post[data-category="gestiones"] .tag{ background:#fff5ea; color:#66460b; border-color:#ffe0b9; }

/* Separador puntito */
.post .meta span[aria-hidden="true"]{ opacity:.6 }

/* ----- Título y descripción ----- */
.post h3{
  margin:.45rem 1.4rem .75rem;
  font-size: 2rem;                 /* un poco más robusto */
  line-height:1.25;
  font-weight: 850;
  color: #0A1621;
  text-wrap: balance;
  transition: color .25s ease;
}
.post:hover h3{ color: var(--blue-700); }

.post p{
  margin: 0 1.4rem 1.6rem;
  font-size: 1.45rem;
  color: #5f6b79;
  line-height: 1.5;
}

/* ----- Área clickable accesible ----- */
.post a{
  display:block; color:inherit; text-decoration:none;
  outline: none;
}
.post a:focus-visible{
  box-shadow: 0 0 0 3px rgba(18,155,176,.28);
  border-radius: inherit;
}

/* ----- Animación de entrada (mantiene tu fade-up) ----- */
.fade-up{
  opacity:0; transform:translateY(14px);
  transition: opacity .42s ease, transform .42s ease;
}
.fade-up.appear{ opacity:1; transform:none; }

/* ----- Reduce motion para accesibilidad ----- */
@media (prefers-reduced-motion: reduce){
  .post, .post .thumb img, .fade-up{ transition:none !important; }
}

/* =====================================================
   HERO CONTACT como BANNER de imagen (sin carrusel)
   ===================================================== */
.hero-banner{
  position: relative;
  overflow: hidden;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);

  /* Altura del hero en desktop */
  min-height: clamp(420px, 56vh, 640px);
  display: grid;
  place-items: center;
}

/* Contenedor del fondo (imagen de banner) */
.hero-banner .hero-banner-bg{
  position: absolute; inset: 0;
  z-index: 0;

  /* ⬇️ Cambiá la ruta del banner acá */
  --banner-url: url("assets/img/contact_hero.svg");

  background-image:
    linear-gradient(180deg, rgba(7,22,33,.62) 0%, rgba(7,22,33,.3) 40%, rgba(7,22,33,.65) 100%),
    var(--banner-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right; /* foco de la imagen */
  filter: saturate(1.04) contrast(1.04);
  transition: transform .6s ease, filter .35s ease;
  will-change: transform, filter;
}

/* Sutil parallax en hover (opcional, se desactiva con reduce-motion) */
.hero-banner:hover .hero-banner-bg{
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.06);
}

/* Contenido */
.hero-banner .wrap{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr; /* texto / (espacio virtual imagen) */
  gap: 4rem;
  align-items: center;
  padding: 7rem 0; /* aire vertical */
}

@media (max-width: 980px){
  .hero-banner{ min-height: auto; }
  .hero-banner .wrap{ grid-template-columns: 1fr; text-align: center; padding: 5.2rem 0; }
}

/* Eyebrow */
.hero-banner .eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.65rem 1.3rem;
  font-weight:800; font-size:1.35rem; letter-spacing:.08em;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px; backdrop-filter: blur(6px);
  color:#EAF2F8;
}

/* Título */
.hero-banner h1{
  font-size: clamp(3.2rem, 5.2vw, 5.8rem);
  line-height: 1.06; font-weight: 800;
  margin: 1rem 0 1.4rem;
  text-shadow: 0 8px 26px rgba(0,0,0,.30);
}

/* Descripción */
.hero-banner p{
  font-size: 2rem;
  max-width: 62ch;
  opacity: .98;
  line-height: 1.55;
}

/* CTA */
.hero-banner .cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.4rem; }
@media (max-width: 980px){ .hero-banner .cta{ justify-content:center } }

/* Reduce motion: desactiva el parallax/hover */
@media (prefers-reduced-motion: reduce){
  .hero-banner .hero-banner-bg{ transition: none !important; }
  .hero-banner:hover .hero-banner-bg{ transform: none !important; }
}
/* ============================================================
   SUB-HERO PRO ANIMATION (igual al hero principal)
   ============================================================ */

/* Animación inicial fade-up + slide */
.page-hero .inner,
.page-hero .thumb,
.page-hero h1,
.page-hero p {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.8,.2,1);
}

/* Cuando entra en pantalla */
.page-hero.appear .inner,
.page-hero.appear .thumb,
.page-hero.appear h1,
.page-hero.appear p {
  opacity: 1;
  transform: translateY(0);
}

/* Imagen con animación de elevación (igual que hero principal) */
.page-hero .thumb img {
  transition: transform .45s ease, box-shadow .35s ease;
}

.page-hero .thumb:hover img {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

/* Sombra viva como en el hero PRO */
.page-hero .thumb {
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  transition: box-shadow .35s ease, transform .35s ease;
}

.page-hero .thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
/* ============= ABOUT PRO ============= */

.about-pro .about-lead{
  font-size:1.7rem; line-height:1.6; max-width:68ch; margin-bottom:2.2rem;
}
.about-title{ font-size:2.2rem; font-weight:800; margin:.2rem 0 .8rem; color:#0A1621 }

/* Grid utilitario */
.grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1.6rem;
}
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr } }

/* Cards PRO (misión/visión/valores) */
.about-card{
  background:#fff; border:1px solid var(--line); border-radius:1.2rem;
  padding:1.6rem; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .25s ease;
}
.about-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.about-card i{ font-size:2.2rem; color:var(--blue) }
.about-card h4{ margin:.6rem 0 .2rem; font-size:1.7rem; color:#14181d }
.about-card p{ margin:0; color:#5f6b79 }

/* Beliefs */
.about-beliefs{ margin-top:2.2rem }
.beliefs{ list-style:none; padding:0; display:grid; gap:.8rem; max-width:74ch }
.beliefs li{ display:flex; align-items:center; gap:.7rem; font-weight:700;
  background:#f3f8fb; border:1px solid #e1edf5; color:#0E2233; padding:.8rem 1rem; border-radius:.9rem }
.beliefs i{ color:#129bb0 }

/* Timeline */
.about-timeline{ margin-top:2.4rem }
.timeline{ border-left:3px solid var(--line); margin-left:1.2rem; padding-left:2rem; display:grid; gap:1.6rem }
.timeline-item{ position:relative; padding-left:1rem }
.timeline-item::before{
  content:""; position:absolute; left:-2.24rem; top:.35rem; width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:2px solid #fff; box-shadow:0 0 0 3px rgba(18,155,176,.25)
}
.year{ font-weight:800; color:var(--blue-700); font-size:1.6rem }

/* Team */
.about-team{ margin-top:3rem }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1.2rem }
@media (max-width:980px){ .team-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .team-grid{ grid-template-columns:1fr } }
.team-card{
  background:#fff; border:1px solid var(--line); border-radius:1.2rem; padding:1.4rem;
  box-shadow:var(--shadow-sm); text-align:center; transition:transform .18s ease, box-shadow .25s ease
}
.team-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.team-thumb{ width:100%; height:232px; border-radius:1rem; overflow:hidden; margin-bottom:1rem }
.team-thumb img{ width:100%; height:100%; object-fit:cover }
.team-name{ font-size:1.7rem; font-weight:800; color:#0A1621; margin:.2rem 0 0 }
.team-role{ color:#5f6b79; font-size:1.45rem; margin:.2rem 0 0 }

/* CTA final */
.about-cta{ margin-top:3rem }
.about-cta .cta-card{
  background:linear-gradient(135deg,#0A3A5A,#0D4A73); color:#fff;
  border:1px solid #0d4a73; border-radius:1.2rem; padding:2.2rem; box-shadow:var(--shadow)
}
.about-cta .cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.6rem }
@media (max-width:780px){ .about-cta .cta{ justify-content:center } }

/* Animaciones (igual que tu hero: fade + slide + stagger) */
.reveal{ opacity:0; transform:translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1) }
.reveal.in{ opacity:1; transform:none }

.stagger > *{
  opacity:0; transform:translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1)
}
.stagger.in > *{ opacity:1; transform:none }
.stagger.in > *:nth-child(1){ transition-delay:.04s }
.stagger.in > *:nth-child(2){ transition-delay:.12s }
.stagger.in > *:nth-child(3){ transition-delay:.20s }
.stagger.in > *:nth-child(4){ transition-delay:.28s }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .stagger > *{ transition:none !important; transform:none !important; opacity:1 !important }
}
/* ===========================
      FAQ PRO · Focus Advisers
   =========================== */

.faq-pro .faq-list {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.6rem;
}

/* Contenedor general */
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease;
}

/* Hover */
.faq-item:hover {
  border-color: rgba(13,74,115,.35);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Summary */
.faq-item summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 1.6rem;
  color: #0A1621;
  display: flex;
  align-items: center;
  gap: .8rem;
  list-style: none;
}

/* Remover triángulo nativo */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Iconos */
.faq-item summary i {
  font-size: 1.65rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform .25s ease;
}

/* Rotación al abrir */
.faq-item[open] summary i {
  transform: rotate(180deg);
}

/* Cuerpo */
.faq-body {
  margin-top: 1rem;
  color: #5f6b79;
  font-size: 1.45rem;
  line-height: 1.55;
  animation: faqFade .35s ease;
}

/* Animación */
@keyframes faqFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fade-up base */
.faq-pro .fade-up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.faq-pro .fade-up.appear {
  opacity: 1;
  transform: none;
}

/* Responsive */
@media (max-width: 600px) {
  .faq-item summary { font-size: 1.45rem; }
  .faq-body { font-size: 1.35rem; }
}
/* ===== Scroll lock robusto (sidebar/sheet) ===== */
html, body { overscroll-behavior: contain; }
body.is-locked {
  position: fixed;           /* congela el body */
  width: 100%;
  overflow: hidden;          /* oculta scroll */
}

/* Evita scroll debajo del overlay en touch */
.overlay.show,
.sheet-overlay.show { touch-action: none; }

/* Banner: desactiva parallax en dispositivos sin hover */
@media (hover: none) {
  .hero-banner:hover .hero-banner-bg {
    transform: none !important;
    filter: saturate(1.04) contrast(1.04) !important;
  }
}
/* Crossfade suave del copy al cambiar de slide */
.hero .hero-copy h1,
.hero .hero-copy h1 + p,
.hero .hero-copy .eyebrow {
  transition: opacity .28s ease, transform .28s ease;
}

.hero .hero-copy .swap {
  opacity: 0;
  transform: translateY(8px);
}
/* Reserva dinámica del bloque de copy (se fijará desde JS) */
.hero .hero-copy {
  min-height: var(--copy-h, 20rem); /* fallback 20rem si JS no corre */
  display: grid;
  align-content: start;
}

.hero.hero-pro {
  min-height: clamp(520px, 62vh, 680px);
}
@media (max-width: 680px){
  .hero.hero-pro { min-height: clamp(480px, 62vh, 560px); }
}
/* ✅ Hero con altura estable (no salta) */
.hero.hero-pro {
  min-height: clamp(520px, 62vh, 680px); /* reserva global de alto */
}

/* El grid interior ocupa esa altura estable */
.hero.hero-pro .wrap {
  min-height: inherit;
  align-items: center;  /* centra verticalmente */
  padding: 7rem 0;      /* ya lo tenías; lo mantenemos */
}

/* ✅ Reservamos altura para el bloque de texto (h1 + p + eyebrow) */
/* Ajustá 17–22rem según lo más alto que te quede con tus textos reales */
.hero .hero-copy {
  min-height: 20rem;    /* reserva para evitar reflujo cuando cambia */
  display: grid;
  align-content: start;
}

/* Crossfade suave ya incluido; reforzamos para evitar reflow notable */
.hero .hero-copy h1,
.hero .hero-copy h1 + p,
.hero .hero-copy .eyebrow {
  transition: opacity .28s ease, transform .28s ease;
}
.hero .hero-copy .swap {
  opacity: 0;
  transform: translateY(8px);
}

/* En mobile, un poco menos de reserva */
@media (max-width: 680px){
  .hero.hero-pro { min-height: clamp(480px, 62vh, 560px); }
  .hero .hero-copy { min-height: 18rem; }
}
/* ============================
   SHEET PRO · Mejor tipografía
   ============================ */
.sheet-content {
  padding: 2rem 1.8rem 3rem;
  line-height: 1.55;
}

.sheet-heading h3 {
  font-size: 2.2rem !important;
  font-weight: 800;
  color: #0A1621;
  margin-bottom: 1.2rem;
  letter-spacing: -0.3px;
}

.sheet-inner p {
  font-size: 1.55rem;
  color: #2b3a44;
  margin: 0 0 1rem;
}

.sheet-inner strong {
  color: #0A3A5A;
  font-weight: 800;
}

/* Mejor estilo para listas */
.sheet-inner .list {
  margin-top: .8rem;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}

.sheet-inner .list li {
  font-size: 1.5rem;
  color: #2b3a44;
  display: flex;
  gap: .6rem;
  line-height: 1.45;
}

.sheet-inner .list li::before {
  content: "▹";
  color: #1193ac;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  margin-top: .2rem;
}

/* Responsive: desplazar contenido suavemente */
.sheet {
  max-height: 88vh;
  overflow: hidden;
}

.sheet-content {
  overflow-y: auto;
  max-height: calc(88vh - 160px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Scrollbar fino y elegante */
.sheet-content::-webkit-scrollbar {
  width: 6px;
}

.sheet-content::-webkit-scrollbar-thumb {
  background: #c5d3dd;
  border-radius: 20px;
}

/* Móviles: espaciado más cómodo */
@media (max-width: 480px) {
  .sheet-heading h3 {
    font-size: 1.9rem !important;
  }
  .sheet-inner p,
  .sheet-inner .list li {
    font-size: 1.45rem;
  }
}
/* =========================================
   SHEET PRO — Layout flexible y legible
   ========================================= */

/* Estructura general del sheet: encabezado + body scrollable */
.sheet {
  /* ya la tenés position:fixed y animation. Mejoramos: */
  display: grid;
  grid-template-rows: auto 1fr;        /* barra arriba, contenido ocupa el resto */
  max-height: calc(100dvh - 8px);      /* usa viewport dinámico (móvil) */
  width: 100%;
  overscroll-behavior: contain;
}

/* Barra superior del sheet (ya la tenés) */
.sheet-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #e6edf4;
}

/* El contenedor general del contenido scrollea */
.sheet-content {
  display: flex;
  flex-direction: column;
  min-height: 0;                        /* clave para que el hijo pueda scrollear */
  overflow: hidden;                     /* el scroll va en el inner */
  padding-bottom: env(safe-area-inset-bottom, 0); /* soporte iPhone notch */
}

/* Hero del sheet más liviano y responsivo */
.sheet-hero {
  flex: 0 0 auto;
  height: 180px;                        /* desktop */
  background-size: cover;
  background-position: center;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

@media (max-width: 780px){
  .sheet-hero { height: 140px; }        /* tablets */
}
@media (max-width: 480px){
  .sheet-hero { height: 120px; }        /* móviles chicos */
}

/* Zona de texto scrolleable dentro del sheet */
.sheet-inner {
  flex: 1 1 auto;
  min-height: 0;                        /* habilita scroll interior */
  overflow: auto;
  padding: 1.2rem 1.6rem 1.8rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Encabezado del contenido */
.sheet-heading {
  flex: 0 0 auto;
  padding: 1.2rem 1.6rem .4rem;
  border-bottom: 1px solid #eef3f8;
}
.sheet-heading h3 {
  margin: 0;
  font-size: clamp(1.9rem, 2.2vw, 2.2rem);
  font-weight: 800;
  color: #0A1621;
  letter-spacing: -.2px;
}

/* Tipografía general legible */
.sheet-inner p {
  font-size: 1.55rem;
  line-height: 1.6;
  color: #2b3a44;
  margin: 0 0 1rem;
}
.sheet-inner strong { color:#0A3A5A; font-weight:800; }

/* Listas corporativas */
.sheet-inner .list{
  list-style:none; padding:0; margin:.6rem 0 0;
  display:grid; gap:.7rem;
}
.sheet-inner .list li{
  font-size:1.5rem; color:#2b3a44;
  display:flex; gap:.6rem; line-height:1.45;
}
.sheet-inner .list li::before{
  content:"▹"; color:#1193ac; font-weight:900; font-size:1.6rem;
  line-height:1; margin-top:.15rem;
}

/* CTA al final (no fija, deja scroll natural) */
.sheet .cta{
  flex: 0 0 auto;
  padding: 0 1.6rem 1.2rem;
}

/* ---------- “Ver más” para textos largos ---------- */
.sheet-inner .clamp {
  position: relative;
  max-height: var(--clamp-h, 260px);           /* altura colapsada */
  overflow: hidden;
}
.sheet-inner .clamp::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:68px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 60%);
  pointer-events:none;
}
.sheet-inner .clamp.is-open{
  max-height: none;
}
.sheet-inner .clamp.is-open::after{
  display:none;
}
.sheet-inner .clamp-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:.6rem 0 0;
  background:#0A1621; color:#E8EEF5;
  border:1px solid #13293D;
  border-radius:10px; padding:.45rem .85rem;
  font-size:1.35rem; font-weight:800;
  cursor:pointer;
}
.sheet-inner .clamp-toggle:hover{
  background:#0d2333;
}

/* Scrollbar fino */
.sheet-inner::-webkit-scrollbar{ width: 7px; }
.sheet-inner::-webkit-scrollbar-thumb{ background:#c5d3dd; border-radius:20px; }

/* Ajustes extra mobile */
@media (max-width:480px){
  .sheet-inner p, .sheet-inner .list li{ font-size:1.45rem; }
}