:root{
  --brand:#0ea5e9; --brand-2:#f59e0b;            /* azul + ámbar */
  --bg:#ffffff; --txt:#0f172a; --muted:#64748b;
  --soft:#f8fafc; --line:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--txt)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.small{font-size:13px}
.sp-12{height:12px}
.accent{color:var(--brand-2)}

/* Topbar */
.topbar{background:var(--soft);border-bottom:1px solid var(--line);font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 0;color:var(--muted)}
.topbar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:8px}
.topbar .link{color:var(--muted)} .sep{margin:0 8px}

/* Nav */
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:40}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;border-radius:8px}
.brand .brand-text small{display:block;color:var(--muted)}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:#334155;font-weight:600}
.menu a:hover{color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b1220;border:none;border-radius:999px;padding:10px 18px;font-weight:800;box-shadow:0 10px 22px rgba(14,165,233,.25)}
.btn.mini{padding:8px 14px}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}

/* Hero (parallax alt) */
.hero.hero-alt{background:url('./assets/img/hero.jpg') center/cover no-repeat}
.hero .overlay {
  background: linear-gradient(180deg,rgba(2,6,23,.45),rgba(2,6,23,.55));
  padding: 70px 0; /* antes 110px */
}
.hero-inner{color:#fff;text-align:center}
.hero h1{margin:0 0 6px;font-size:clamp(28px,5vw,54px);text-shadow:0 3px 14px rgba(0,0,0,.3)}
.hero p{color:#e2e8f0;max-width:780px;margin:0 auto 16px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* KPI strip diagonal */
.strip{background:linear-gradient(180deg,#eef2ff 0%, #ffffff 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px 0}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.kpi .num{font-size:28px;font-weight:900;color:var(--brand-2)}
.kpi .txt{color:var(--muted);font-weight:700}


/* Secciones */
.section{padding:64px 0}
.section.gray{background:var(--soft)}
.eyebrow{letter-spacing:.14em;color:var(--brand);font-weight:900;margin:0}
.section h2{margin:6px 0 8px;font-size:30px}
.muted{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 10px 25px rgba(0,0,0,.05)}
.card-img{display:block;width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid var(--line);}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;background:#e0f2fe;color:#082f49;border:1px solid #bae6fd;padding:6px 10px;border-radius:999px}

/* Grids */
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cols-3{grid-template-columns:1fr}}

/* Hover overlay tarjetas */
.card.hover{position:relative;overflow:hidden}
.card.hover .overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(0,0,0,0) 20%, rgba(0,0,0,.65) 100%);
  color:#fff;opacity:0;transition:opacity .25s ease; padding:14px;
}
.card.hover:hover .overlay{opacity:1}
.card.anim{transition:transform .25s ease, box-shadow .25s ease}
.card.anim:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(0,0,0,.08)}

/* Galería */
.gallery{gap:22px;align-items:stretch;}
.gallery img{width:100%;height:260px;object-fit:cover;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 28px rgba(15,23,42,.16);}

/* FAQ acordeón */
.faq{padding:56px 0;background:#fff}
.faq h2{margin:0 0 20px}
.acc{display:grid;gap:12px}
.acc-item{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#1f2937}
.acc-item header{display:flex;align-items:center;gap:12px;cursor:pointer;padding:14px 16px;color:#fff;font-weight:900}
.acc-item header .chev{width:10px;height:10px;border-right:3px solid var(--brand-2);border-bottom:3px solid var(--brand-2);transform:rotate(-45deg)}
.acc-item.open header .chev{transform:rotate(45deg)}
.acc-item .body{background:#f9fafb;color:#111;padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-item.open .body{padding:16px;max-height:240px}

/* CTA final */
.cta-final{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b1220;text-align:center;padding:48px 0}
.cta-final .btn{background:#0b1220;color:#fff}

/* Footer */
.footer{background:#0b1220;color:#cbd5e1;padding:28px 0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
.foot-brand{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.foot-brand img{width:40px;height:40px;border-radius:8px;background:#fff}
.foot-links{list-style:none;padding:0;margin:8px 0 0}
.foot-links li{margin:4px 0}
.foot-links a{color:#cbd5e1}
.foot-links a:hover{color:#fff}

/* Animaciones on-scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1;transform:none}
.reveal[data-reveal="slide-left"]{transform:translateX(-24px)}
.reveal[data-reveal="slide-right"]{transform:translateX(24px)}
.reveal[data-reveal="zoom-in"]{transform:scale(.96)}

/* Wapp */
.wapp-float{position:fixed;right:18px;bottom:18px;background:#25D366;color:#0b1220;padding:12px 14px;border-radius:999px;font-weight:800;box-shadow:0 12px 28px rgba(37,211,102,.25);z-index:60}

/* Parallax fallback */
@media(min-width:900px){ .hero{background-attachment:fixed} }

/* ===== Clientes (mosaico glass + hover) ===== */
.clients-wall{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:18px;
}
.logo{
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.45));
  border:1px solid var(--line);
  border-radius:16px; padding:14px;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 3 / 2;          /* cajas proporcionales */
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, opacity .25s ease;
  filter: grayscale(100%) contrast(1.1) opacity(.85);
}
.logo img{max-width:100%; max-height:64px; object-fit:contain}
.logo:hover{
  filter:none; opacity:1;
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(2,6,23,.12);
}

/* ===== Cinta auto-desplazable ===== */
.clients-tape{overflow:hidden; margin-top:26px; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); padding:12px 0}
.tape-track{
  display:flex; gap:40px; align-items:center;
  animation: tape-move 22s linear infinite;
}
.tape-track img{height:46px; filter:grayscale(100%) opacity(.8); transition:filter .25s}
.tape-track img:hover{filter:none}
@keyframes tape-move{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Contacto pro */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr}}

.contact-card h2,.contact-card h3{margin-top:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .span-2{grid-column:1/-1}
.field label{display:block;margin:6px 0 6px;font-weight:700}
.field input,.field textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.actions .hint{color:var(--muted)}

.contact-list{list-style:none;margin:0 0 14px;padding:0}
.contact-list li{margin:6px 0}
.card-media{width:100%;border:1px solid var(--line);border-radius:12px;aspect-ratio:16/9;object-fit:cover}

/* Pequeños refinamientos */
.btn + .btn{margin-left:8px}

/* ==== anti overflow global ==== */
html,body{max-width:100%;overflow-x:hidden}
*{box-sizing:border-box}
img, .card, .card-img, .gallery img {max-width:100%}

/* ==== topbar en una línea ==== */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar .tb-right{min-width:0;text-align:right}
.topbar .tb-right .link{display:inline-block;max-width:60vw;text-overflow:ellipsis;overflow:hidden}
@media (max-width:480px){ .topbar .tb-right .link[href^="mailto"]{display:none} }

/* ==== nav base (desktop) ==== */
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:60}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:44px;height:44px;border-radius:8px}
.menu{display:flex;align-items:center;gap:16px}

/* botón hamburguesa oculto en desktop */
.nav-toggle{display:none}

/* ====== móvil/tablet (≤1024px): reglas FORZADAS ====== */
@media (max-width:1024px){
  .brand img{width:36px;height:36px}
  .brand .brand-text strong{font-size:15px}

  .nav-toggle{
    display:inline-flex !important; width:40px;height:40px;
    border:1px solid var(--line); border-radius:10px; background:#fff;
    align-items:center; justify-content:center; gap:4px;
  }
  .nav-toggle span{display:block;width:18px;height:2px;background:#0f172a;border-radius:2px}

  /* oculta menú horizontal y usa panel fijo */
  .menu{
    position:fixed !important; left:0; right:0; top:64px;
    background:#fff; border-top:1px solid var(--line);
    display:none !important;   /* <- fuerza oculto por defecto */
    flex-direction:column; gap:16px; padding:16px;
    max-height:calc(100vh - 64px); overflow:auto;
  }
  .menu.open{display:flex !important}
  body.menu-open{overflow:hidden}
}

/* ==== hero tipografía fluida y paddings seguros ==== */
.hero-inner{padding:56px 16px}
.hero h1{font-size:clamp(24px,6.2vw,48px);line-height:1.2;word-wrap:break-word}
.hero p{font-size:clamp(14px,3.6vw,18px);line-height:1.45}
.hero-cta{gap:10px;flex-wrap:wrap}
.btn{font-size:clamp(14px,3.5vw,17px);padding:10px 18px}

/* ==== grids conservadores ==== */
@media (max-width:820px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.grid.cols-3{grid-template-columns:1fr}}

/* ==== FIX: Centrar sección "Quiénes somos" en móviles ==== */
.section.about {
  text-align: center;
  padding: 64px 20px;
}
.section.about .split {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section.about h2, 
.section.about p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section.about img {
  max-width: 90%;
  border-radius: 16px;
  margin: 20px auto;
}

/* ======= FIX DEFINITIVO ======= */

/* 1) HERO más compacto y fluido en todos los tamaños */
.hero .overlay{
  /* en lugar de valores fijos, usa un padding vertical que se adapta */
  padding-block: clamp(56px, 14vh, 88px);
}

/* 2) "QUIÉNES SOMOS" centrado en móviles / tablets */
#about .split{ /* ya es grid; aquí solo ajustamos para mobile */
  align-items: center;
}
@media (max-width: 999px){
  #about .split{
    grid-template-columns: 1fr;   /* 1 columna en móvil */
    text-align: center;            /* centra títulos y párrafos */
  }
  #about h2,
  #about p{ 
    margin-left: auto;
    margin-right: auto;
  }
  #about .chips{                 /* centra los chips */
    justify-content: center;
  }
  #about img{                    /* imagen centrada y con buen ancho */
    margin: 20px auto 0;
    max-width: min(560px, 92%);
    border-radius: 16px;
  }
}

/* 3) Pequeño ajuste del contenedor en pantallas muy angostas
      para que nada se “pegue” al borde izquierdo */
@media (max-width: 420px){
  .container{ padding-left: 18px; padding-right: 18px; }
}

/* ===== NAV: botón hamburguesa visible y animado ===== */
@media (max-width:1024px){
  .nav-toggle{
    display:inline-flex !important;
    position:relative;
    width:44px;height:44px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    align-items:center;justify-content:center;
  }
  .nav-toggle span{
    position:absolute; left:50%; transform:translateX(-50%);
    width:22px; height:2px; background:#0f172a; border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle span:nth-child(1){ top:14px; }
  .nav-toggle span:nth-child(2){ top:21px; }
  .nav-toggle span:nth-child(3){ top:28px; }

  /* animación a “X” cuando el menú abre */
  .nav-toggle.open span:nth-child(1){ transform:translate(-50%,7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translate(-50%,-7px) rotate(-45deg); }

  /* menú móvil como panel */
  .menu{
    position:fixed !important; left:0; right:0; top:64px;
    background:#fff; border-top:1px solid var(--line);
    display:none !important; flex-direction:column; gap:16px; padding:16px;
    max-height:calc(100vh - 64px); overflow:auto;
  }
  .menu.open{ display:flex !important; }
  body.menu-open{ overflow:hidden; }
}

/* ===== TOPBAR: se ve prolijo y no “...” feo ===== */
.topbar{ background:var(--soft); border-bottom:1px solid var(--line); font-size:14px; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; color:var(--muted); }
.topbar .tb-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.topbar .tb-right{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); }

.topbar .link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--muted); white-space:nowrap; max-width:54vw;
  overflow:hidden; text-overflow:ellipsis;
}

/* en pantallas muy angostas, prioriza WhatsApp y oculta el correo */
@media (max-width:520px){
  .topbar .tb-right .sep,
  .topbar .tb-right a[href^="mailto"]{ display:none; }
}

/* opcional: iconitos simples con emoji (rápido y liviano) */


/* ===== TOPBAR pulido ===== */
.topbar{background:var(--soft);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;color:var(--muted);flex-wrap:wrap}
.topbar .tb-left,.topbar .tb-right{display:flex;align-items:center;gap:10px;min-width:0}
.topbar .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.topbar .link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;max-width:52vw;overflow:hidden;text-overflow:ellipsis}


/* en móviles muy angostos: prioriza WhatsApp, oculta email largo */
@media (max-width:520px){
  .topbar .tb-right a[href^="mailto"]{display:none}
}

/* ===== NAV: hamburguesa visible y animada ===== */
@media (min-width:1025px){
  .nav-toggle{display:none}
  .menu{display:flex !important; gap:18px; align-items:center}
}
@media (max-width:1024px){
  .nav .wrap{position:relative}
  .nav-toggle{
    display:inline-flex;
    width:44px;height:44px;border:1px solid var(--line);
    border-radius:10px;background:#fff;justify-content:center;align-items:center;
  }
  .nav-toggle span{
    position:absolute;left:50%;transform:translateX(-50%);
    width:22px;height:2px;background:#0f172a;border-radius:2px;
    transition:transform .2s ease, opacity .2s ease; 
  }
  .nav-toggle span:nth-child(1){top:14px}
  .nav-toggle span:nth-child(2){top:21px}
  .nav-toggle span:nth-child(3){top:28px}
  .nav-toggle.open span:nth-child(1){transform:translate(-50%,7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translate(-50%,-7px) rotate(-45deg)}

  .menu{
    position:fixed; left:0; right:0; top:64px; 
    background:#fff; border-top:1px solid var(--line);
    display:none; flex-direction:column; gap:16px; padding:16px;
    max-height:calc(100vh - 64px); overflow:auto; z-index:50;
  }
  .menu.open{display:flex}
  body.menu-open{overflow:hidden}
}

/* ===== HERO un poco más compacto ===== */
/* HERO compacto y fluido */
.hero .overlay{
  padding-block: clamp(56px, 14vh, 88px);
}



/* ===== Centrar menú en versión desktop (≥1025px) ===== */
@media (min-width:1025px){
  .nav .wrap{
    position: relative;
    justify-content: center;      /* centra el .menu */
    gap: 32px;
    padding-left: 100px;          /* espacio para logo si lo añades */
    padding-right: 100px;
  }
  .brand{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  .menu{ justify-content: center; }
}

/* ===== FIX GLOBAL: centrar #about en TODAS las resoluciones ===== */

/* 0) Acotar el ancho efectivo y centrar */
#about .container{
  max-width: 1100px;
  margin-inline: auto;
}

/* 1) Desktop/Tablet: columnas balanceadas */
#about .split{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 24px;
}

/* 2) “Aire” lateral en rangos intermedios */
@media (min-width: 721px) and (max-width: 1280px){
  #about .split > .col{
    padding-inline: clamp(16px, 4vw, 32px);
  }
}

/* 3) Móvil/Phablet: una sola columna y todo centrado */
@media (max-width: 999px){
  #about .split{ grid-template-columns: 1fr; text-align:center; }
  #about h2, #about p{
    margin-inline: auto;
    max-width: 36ch;
  }
  #about .chips{ justify-content:center; }
  #about img{
    margin: 18px auto 0;
    max-width: min(560px, 92%);
    border-radius: 16px;
  }
}


/* 4) Seguridad: evita que reglas genéricas de .split te sobreescriban */
.section#nosotros .split,
#nosotros.section .split{
  /* la misma grid que arriba, duplicada para subir especificidad */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

/* 5) Pequeño ajuste de tipografías/líneas para que no “empuje” a la izquierda */
#nosotros .section-hd { text-align: left; }           /* se mantiene alineado, pero centramos en mobile */
@media (max-width: 999px){
  #nosotros .section-hd { text-align: center; }
}

/* === 🔹 NAV (mejor diseño hamburguesa) === */
.nav-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: inline-flex !important;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }

  .nav-toggle span {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2.5px;
    background: #fff;
    border-radius: 3px;
    transform: translateX(-50%);
    transition: all 0.25s ease;
  }

  .nav-toggle span:nth-child(1) { top: 14px; }
  .nav-toggle span:nth-child(2) { top: 21px; }
  .nav-toggle span:nth-child(3) { top: 28px; }

  .nav-toggle.open span:nth-child(1) {
    transform: translate(-50%, 7px) rotate(45deg);
  }
  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open span:nth-child(3) {
    transform: translate(-50%, -7px) rotate(-45deg);
  }

  .menu {
    position: fixed;
    left: 0;
    right: 0;
    top: 64px;
    background: #fff;
    border-top: 2px solid var(--brand);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    animation: fadeIn .3s ease forwards;
  }

  .menu.open {
    display: flex !important;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* === 🔹 QUIÉNES SOMOS / #about mejor centrado === */
#about {
  background: var(--soft);
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 0;
}

#about .container {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 40px);
}

#about .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

#about h2 {
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 800;
  margin-bottom: 8px;
}

#about p {
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.5;
  color: var(--muted);
}

#about .chips {
  justify-content: center;
}

#about img {
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
#about img:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0,0,0,.1);
}

/* === MÓVIL: una sola columna centrada === */
@media (max-width: 999px) {
  #about .split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  #about img {
    margin-top: 24px;
    max-width: 90%;
  }
}

/* ===== Centrado y equilibrio de QUIÉNES SOMOS ===== */
#about .container { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }

#about .split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;  /* dos columnas equilibradas en desktop */
  align-items:center;
  gap:32px;
}

#about .col img.card-img{
  display:block;
  max-width:min(640px, 100%);
  margin-inline:auto;
  border-radius:16px;
}

/* texto siempre con buen ancho y centrado cuando toque */
#about h2, 
#about p { max-width: 58ch; }

/* a partir de tablets hacia abajo: apila, centra todo y la imagen cae debajo */
@media (max-width: 1100px){
  #about .split{ 
    grid-template-columns: 1fr;
    place-items: center;           /* centra contenido en ambos ejes */
    text-align: center; 
  }
  #about .chips{ justify-content:center; }
  #about .col:first-child{ order:1; }  /* texto */
  #about .col:last-child{ order:2; }   /* imagen */
  #about h2, #about p{ margin-inline:auto; }
}

/* un empujoncito extra para móviles angostos */
@media (max-width: 420px){
  #about .container{ padding-inline: 18px; }
  #about h2{ font-size: clamp(22px, 6.4vw, 32px); }
}

/* ===== Menú móvil con glass ===== */
@media (max-width: 1024px){
  .nav .wrap{ position:relative; }
  .nav-toggle{ z-index: 110; }

  .menu{
    position: fixed;
    inset: 64px 0 0 0;               /* ocupa todo bajo el header */
    display: none;                   /* por defecto oculto */
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px 28px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 18px 36px rgba(2,6,23,.12);
    z-index: 100;
  }
  .menu.open{ display:flex; }
  .menu a{
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 700;
  }
  .menu a:hover{
    background: #eef2ff;
  }
}

/* ====== FIX: NAV centrado en desktop y hamburguesa bonita en móvil ====== */
@media (min-width:1025px){
  .nav .wrap{
    position: relative;
    justify-content: center;
    gap: 32px;
    padding-left: 100px;
    padding-right: 100px;
  }
  .brand{
    position: absolute; left:20px; top:50%; transform:translateY(-50%);
  }
  .menu{ justify-content:center; }
}

/* Botón hamburguesa con gradiente, animación a “X” y panel glass */
@media (max-width:1024px){
  .nav .wrap{ position:relative; }
  .nav-toggle{
    display:inline-flex !important;
    width:46px; height:46px; border:none; border-radius:12px;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    justify-content:center; align-items:center; position:relative;
    box-shadow:0 4px 12px rgba(0,0,0,.15); transition:.25s;
    z-index:110;
  }
  .nav-toggle span{
    position:absolute; left:50%; width:22px; height:2.5px; background:#fff;
    border-radius:3px; transform:translateX(-50%); transition:.25s;
  }
  .nav-toggle span:nth-child(1){ top:14px }
  .nav-toggle span:nth-child(2){ top:21px }
  .nav-toggle span:nth-child(3){ top:28px }
  .nav-toggle.open span:nth-child(1){ transform:translate(-50%,7px) rotate(45deg) }
  .nav-toggle.open span:nth-child(2){ opacity:0 }
  .nav-toggle.open span:nth-child(3){ transform:translate(-50%,-7px) rotate(-45deg) }

  .menu{
    position:fixed; inset:64px 0 0 0; display:none;
    flex-direction:column; gap:14px; padding:18px 16px 28px;
    background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
    border-top:1px solid var(--line); box-shadow:0 18px 36px rgba(2,6,23,.12);
    z-index:100; animation:fadeIn .3s ease forwards;
  }
  .menu.open{ display:flex !important }
  .menu a{ padding:12px 14px; border-radius:12px; font-weight:700 }
  .menu a:hover{ background:#eef2ff }
  @keyframes fadeIn{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
}

/* ====== FIX DEFINITIVO de “QUIÉNES SOMOS” (sin tocar tu look) ====== */
#about .container{ max-width:1200px; margin-inline:auto; padding-inline:20px }
#about .split{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:32px;
}
#about h2,#about p{ max-width:58ch; margin-inline:auto }
#about .chips{ justify-content:center }
#about .col img.card-img{
  display:block; max-width:min(640px,100%); margin-inline:auto; border-radius:16px;
}
/* En tablets/móvil: apila, centra todo y la imagen va debajo */
@media (max-width:1100px){
  #about .split{ grid-template-columns:1fr; place-items:center; text-align:center }
  #about .col:first-child{ order:1 } /* texto */
  #about .col:last-child{ order:2 }  /* imagen */
}
/* “Subimos” la especificidad para ganar a reglas .split genéricas repetidas */
.section#nosotros .split,
#nosotros.section .split{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}

/* HERO un toque más compacto pero con tu misma animación/parallax */
.hero .overlay{ padding-block:clamp(56px,14vh,88px) }





/* ===== Safeguards adicionales (no rompen tu diseño) ===== */
.container{max-width:1200px;margin-inline:auto;padding-inline:20px}
.hero .overlay{display:block}
.hero-inner{margin-inline:auto}
img{height:auto}


/* ========= Capa extra Vitrina Pro: responsive ultra fino ========= */
@media (max-width: 768px){
  .section{padding:52px 0;}
  .hero .overlay{padding:60px 0;}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 520px){
  .container{padding:0 14px;}
  .section{padding:44px 0;}
  .hero .overlay{padding:46px 0;}
  .hero-inner{padding:40px 8px;}
  .hero h1{font-size:clamp(22px,7vw,30px);}
  .hero p{font-size:14px;}
  .kpi-grid{grid-template-columns:1fr;gap:10px;}
  .grid{gap:14px;}
  .foot-grid{grid-template-columns:1fr;gap:14px;}
  .card, .contact-card{padding:16px;}
  .btn{padding:9px 16px;font-size:14px;}
}

@media (max-width: 360px){
  .container{padding:0 10px;}
  .hero h1{font-size:20px;}
  .btn{padding:8px 14px;font-size:13px;}
  nav .logo span{font-size:14px;}
}