/* ============================================================
   HI & ASOCIADOS — style.css
   Hoja de estilos única, sin dependencias de Bootstrap.
   ============================================================ */

/* ---------- Variables ---------- */
:root{
  --navy: #000000;
  --navy-2: #1A1A1A;
  --navy-3: #2B2B2B;
  --gold: #D4A017;
  --gold-light: #F5B041;
  --ink: #1A1A1A;
  --text-muted: #6C757D;
  --gray-100: #F8F9FA;
  --gray-300: #E7E9EC;
  --white: #FFFFFF;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.08);
  --shadow-lift: 0 20px 45px rgba(0,0,0,.16);
  --container-w: 1160px;
}

/* ---------- Reset base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
/* Importante: usamos overflow-x:clip (no "hidden") y solo en html, nunca en body.
   "hidden" crea un contenedor de scroll propio y en Safari/iOS eso rompe
   position:sticky en cualquier descendiente (el header deja de pegarse arriba).
   Declaramos "hidden" primero como respaldo: los navegadores que no entienden
   "clip" (un valor más nuevo) ignoran esa línea y se quedan con "hidden", que
   al menos recorta el desborde aunque no arregle el sticky en esos casos. */
html{
  width:100%;
  overflow-x:hidden;
  overflow-x:clip;
}
/* scrollbar-gutter:stable reserva el espacio de la barra de scroll de escritorio
   para que el contenido no salte al aparecer. Solo aplica en pantallas grandes:
   en celular el scroll es flotante (no ocupa espacio) y algunos navegadores
   móviles interpretan mal esta propiedad, dejando una franja en blanco. */
@media (min-width:993px){
  html{ scrollbar-gutter:stable; }
}
body{
  width:100%;
  margin:0;
  font-family:'Open Sans', sans-serif;
  font-size:1rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
}
h1,h2,h3,h4,h5,h6{
  font-family:'Jost', sans-serif;
  font-weight:700;
  line-height:1.2;
  margin:0 0 .75rem;
  color:var(--ink);
}
p{ margin:0 0 1rem; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

.h1{ font-size:2.5rem; } .h2{ font-size:2rem; } .h3{ font-size:1.5rem; }
.h4{ font-size:1.25rem; } .h5{ font-size:1.1rem; } .h6{ font-size:1rem; }
.display-3{ font-size:clamp(2.5rem,5vw,4.5rem); font-weight:700; }
.display-4{ font-size:clamp(2.2rem,4.5vw,3.5rem); font-weight:700; }
.display-5{ font-size:clamp(1.9rem,4vw,3rem); font-weight:700; }
.display-6{ font-size:clamp(1.5rem,3vw,2.25rem); font-weight:700; }
.lead{ font-size:1.2rem; font-weight:400; }
.fst-italic{ font-style:italic; }
.fw-bold{ font-weight:700; } .fw-medium{ font-weight:600; }
.small{ font-size:.875rem; }

/* ---------- Layout ---------- */
/* min-width:0 es crítico acá: .container vive dentro de secciones con
   display:flex (.hero-v2, .page-hero-v2). Un hijo flex tiene min-width:auto
   por defecto, así que si el contenido de adentro no se puede achicar del
   todo, .container se estira más ancho que la pantalla y, al estar
   centrado con margin:auto, recorta texto parejo a los dos lados y deja
   una franja en blanco — esto es lo que desplazaba toda la página. */
.container{ width:100%; max-width:var(--container-w); margin:0 auto; padding:0 20px; min-width:0; }
.section-pad{ padding:5.5rem 0; }
@media (max-width:768px){ .section-pad{ padding:3.5rem 0; } }

/* Flex helpers */
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.w-100{ width:100%; }
.h-100{ height:100%; }

.gap-1{ gap:.5rem; } .gap-2{ gap:.75rem; } .gap-3{ gap:1rem; } .gap-4{ gap:1.5rem; } .gap-5{ gap:2rem; }

/* Spacing scale */
.mb-1{margin-bottom:.5rem;} .mb-2{margin-bottom:.75rem;} .mb-3{margin-bottom:1rem;}
.mb-4{margin-bottom:1.5rem;} .mb-5{margin-bottom:2.5rem;} .mb-0{margin-bottom:0;}
.mt-1{margin-top:.5rem;} .mt-3{margin-top:1rem;} .mt-4{margin-top:1.5rem;} .mt-5{margin-top:2.5rem;}
.my-4{margin-top:1.5rem;margin-bottom:1.5rem;} .my-5{margin-top:2.5rem;margin-bottom:2.5rem;}
.py-3{padding-top:1rem;padding-bottom:1rem;} .py-4{padding-top:1.5rem;padding-bottom:1.5rem;} .py-5{padding-top:2.5rem;padding-bottom:2.5rem;}
.p-4{padding:1.5rem;} .p-5{padding:2.5rem;}

/* Simple responsive grids */
.grid{ display:grid; gap:1.5rem; }
/* Los hijos de un grid tienen min-width:auto por defecto: si adentro hay
   texto que no puede partirse (mayúsculas con letter-spacing, palabras
   largas, etc.) empujan la columna más ancha que la pantalla y desbordan
   horizontalmente toda la página (afecta a elementos "fixed" como el botón
   de WhatsApp). min-width:0 permite que la columna se achique con normalidad. */
.grid > *,
.flex > *,
.navbar-inner > *,
.service-category-header > *,
.footer-item > *,
.footer-bottom > *,
.contact-info-card .item > *{ min-width:0; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5-7{ grid-template-columns:5fr 7fr; }
.grid-7-5{ grid-template-columns:7fr 5fr; }
.grid-6-6{ grid-template-columns:6fr 6fr; }
.grid-4-8{ grid-template-columns:4fr 8fr; }
.grid-leadership{ grid-template-columns:3fr 5fr 4fr; }
.grid-services{ grid-template-columns:repeat(4,1fr); }

@media (max-width:992px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-services{ grid-template-columns:repeat(3,1fr); }
  .grid-5-7,.grid-7-5,.grid-6-6,.grid-4-8{ grid-template-columns:1fr; }
  .grid-leadership{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .grid-services{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .grid-services{ grid-template-columns:1fr; }
}

.leadership-values{ order:1; }
.leadership-main{ order:2; }
.leadership-photo{ order:3; }
@media (min-width:993px){
  .leadership-values{ order:1; } .leadership-main{ order:2; } .leadership-photo{ order:3; }
}

/* ---------- Utilities de color ---------- */
.text-white{ color:#fff; }
.text-white p, .text-white span, .text-white li{ color:#fff; }
.text-gold{ color:var(--gold); }
.text-navy{ color:var(--navy); }
.text-muted{ color:var(--text-muted); }
.bg-white{ background:var(--white); }
.bg-light{ background:var(--gray-100); }
.bg-navy{ background:var(--navy); }
.bg-navy-2{ background:var(--navy-2); }
.bg-navy-3{ background:var(--navy-3); }
.bg-gold-10{ background:rgba(212,160,23,.10); }

/* Fuerza texto claro dentro de contenedores oscuros
   (evitamos depender de la herencia: cada elemento se referencia directo) */
.hero-v2 h1, .hero-v2 h2, .hero-v2 h3, .hero-v2 p, .hero-v2 span, .hero-v2 li,
.page-hero-v2 h1, .page-hero-v2 h2, .page-hero-v2 h3, .page-hero-v2 p, .page-hero-v2 span,
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy p, .bg-navy span, .bg-navy li,
.bg-navy-2 h1, .bg-navy-2 h2, .bg-navy-2 h3, .bg-navy-2 p,
.bg-navy-3 h1, .bg-navy-3 h2, .bg-navy-3 h3, .bg-navy-3 p,
.cta-dark h1, .cta-dark h2, .cta-dark h3, .cta-dark p, .cta-dark span,
.contact-info-card h1, .contact-info-card h2, .contact-info-card h3, .contact-info-card span,
.stat-chip, .stat-chip span,
.footer h5, .footer span, .footer li, .footer p{
  color:#fff;
}
.footer h5{ color:var(--gold-light); }

/* Las tarjetas (.card) siempre tienen fondo blanco, incluso dentro de
   secciones oscuras (bg-navy/2/3) — su texto debe quedar oscuro, nunca
   blanco, o quedaría invisible (letra blanca sobre tarjeta blanca). */
.bg-navy .card h1, .bg-navy .card h2, .bg-navy .card h3, .bg-navy .card h4, .bg-navy .card p,
.bg-navy-2 .card h1, .bg-navy-2 .card h2, .bg-navy-2 .card h3, .bg-navy-2 .card p,
.bg-navy-3 .card h1, .bg-navy-3 .card h2, .bg-navy-3 .card h3, .bg-navy-3 .card p{
  color:var(--ink);
}
.bg-navy .card .text-gold, .bg-navy-2 .card .text-gold, .bg-navy-3 .card .text-gold{
  color:var(--gold);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.5rem;
  border:none;
  border-radius:50px;
  padding:.85rem 2rem;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-sm{ padding:.5rem 1.15rem; font-size:.85rem; font-weight:600; }
.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--ink);
  box-shadow:0 10px 24px rgba(212,160,23,.30);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(212,160,23,.4); }
.btn-outline{
  border:2px solid rgba(255,255,255,.55);
  color:#fff;
  background:transparent;
}
.btn-outline:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn-outline-navy{
  border:2px solid var(--navy);
  color:var(--navy);
  background:transparent;
}
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }
.btn-whatsapp{
  background:#25D366;
  color:#fff;
  box-shadow:0 10px 24px rgba(37,211,102,.3);
}
.btn-whatsapp:hover{ transform:translateY(-2px); color:#fff; }

/* ---------- Navbar ---------- */
.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:rgba(0,0,0,.94);
  backdrop-filter:saturate(150%) blur(8px);
  padding:1rem 0;
  transition:padding .25s ease, background .25s ease, box-shadow .25s ease;
}
.navbar.scrolled{
  padding:.55rem 0;
  background:rgba(0,0,0,.98);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; }
.navbar-brand{
  color:#fff;
  font-family:'Jost', sans-serif;
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:.5px;
  white-space:nowrap;
}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--gold);
  font-size:1.5rem;
  cursor:pointer;
  padding:.25rem .5rem;
}
.nav-menu{ display:flex; }
.nav-list{
  display:flex;
  align-items:center;
  gap:.25rem;
  margin:0;
}
.nav-item{ position:relative; }
.nav-link{
  display:inline-block;
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  padding:.65rem 1rem;
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:1rem; right:1rem; bottom:6px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:230px;
  background:var(--navy-2);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);
  padding:.5rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:20;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown.open .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu li a{
  display:block;
  padding:.6rem .8rem;
  color:#fff;
  opacity:.85;
  border-radius:8px;
  font-size:.9rem;
}
.dropdown-menu li a:hover{ background:rgba(212,160,23,.15); color:var(--gold-light); opacity:1; }

.lang-switch{ display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; padding:0 .5rem; }
.lang-switch a{ color:rgba(255,255,255,.55); }
.lang-switch a:hover{ color:var(--gold-light); }
.lang-switch .active{ color:var(--gold-light); }
.lang-switch span.sep{ color:rgba(255,255,255,.35); }

@media (max-width:992px){
  .nav-toggle{ display:block; }
  .nav-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    background:var(--navy-3);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-menu.open{ max-height:80vh; overflow-y:auto; }
  .nav-list{ flex-direction:column; align-items:stretch; padding:1rem 1.25rem 1.5rem; gap:.25rem; }
  .nav-item{ width:100%; }
  .nav-link{ width:100%; padding:.75rem .25rem; }
  .dropdown-menu{
    position:static;
    opacity:1; visibility:visible; transform:none;
    display:none;
    background:rgba(255,255,255,.05);
    box-shadow:none;
    margin-top:.25rem;
  }
  .has-dropdown.open .dropdown-menu{ display:block; }
  .lang-switch{ padding:.75rem .25rem; }
  .nav-cta{ margin-top:.5rem; }
}

/* ---------- Hero ---------- */
.hero-v2{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:130px 0 80px;
}
.hero-bg-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(0,0,0,.94) 25%, rgba(0,0,0,.55) 100%); }
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-v2 h1{ font-weight:700; }

.page-hero-v2{
  position:relative;
  min-height:42vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:140px 0 60px;
}
.page-hero-v2 .hero-bg-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero-v2 .hero-overlay{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(0,0,0,.92) 20%, rgba(0,0,0,.65) 100%); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.75rem;
}
.eyebrow::before{ content:''; width:28px; height:2px; background:var(--gold); display:inline-block; }

.section-title{ position:relative; font-weight:700; }
.section-title::after{
  content:'';
  display:block;
  width:64px; height:4px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));
  margin-top:16px;
  border-radius:4px;
}
.section-title.center{ text-align:center; }
.section-title.center::after{ margin-left:auto; margin-right:auto; }

.hero-stats{ position:relative; z-index:2; margin-top:3rem; }
.stat-chip{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  padding:1.25rem 1rem;
  text-align:center;
  height:100%;
}
.stat-chip .num{ font-family:'Jost',sans-serif; font-size:2rem; font-weight:700; color:var(--gold-light); display:block; line-height:1; margin-bottom:.35rem; }
.stat-chip .label{ font-size:.8rem; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.5px; }

/* ---------- Cards ---------- */
.card{
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-soft);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); }
.card-body{ padding:2.5rem; }

.icon-badge{
  width:64px; height:64px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:1.4rem; flex-shrink:0;
}
.icon-badge-outline{
  width:52px; height:52px;
  border-radius:14px;
  background:rgba(212,160,23,.12);
  border:1px solid rgba(212,160,23,.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:1.15rem; flex-shrink:0;
}

.quote-card{
  background:var(--gray-100);
  border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:2rem;
}

.ratio-16x9{ position:relative; width:100%; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; }
.ratio-16x9 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.rounded{ border-radius:var(--radius); overflow:hidden; }
.shadow{ box-shadow:var(--shadow-soft); }

/* ---------- Servicios ---------- */
.services-nav{
  position:sticky;
  top:70px;
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:center;
  padding:1.25rem 20px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.services-nav a{
  border:1.5px solid var(--gray-300);
  border-radius:50px;
  padding:.55rem 1.25rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--navy);
  background:#fff;
  transition:all .25s ease;
  white-space:nowrap;
}
.services-nav a:hover, .services-nav a.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

@media (max-width:768px){
  .services-nav{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    top:64px;
    padding:.85rem 16px;
    gap:.5rem;
  }
  .services-nav::-webkit-scrollbar{ display:none; }
  .services-nav a{
    flex-shrink:0;
    padding:.4rem .9rem;
    font-size:.78rem;
  }
}

.service-category{ scroll-margin-top:170px; }
.service-category-header{ display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; }
.service-item{
  display:flex; align-items:center;
  height:100%;
  padding:1rem;
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  border-left:3px solid transparent;
  transition:all .25s ease;
}
.service-item:hover{ border-left-color:var(--gold); background:var(--gray-100); transform:translateX(4px); }
.service-item i{ margin-right:.75rem; color:var(--gold); }

/* ---------- Footer ---------- */
.footer{ background:#000; color:rgba(255,255,255,.85); padding:2.5rem 0 1.25rem; font-size:.875rem; }
.footer a{ color:rgba(255,255,255,.85); }
.footer a:hover{ color:var(--gold-light); }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; align-items:start; }
@media (max-width:992px){
  .footer-grid{ grid-template-columns:1fr; gap:2rem; text-align:left; }
}
.footer-logo-col{ display:flex; justify-content:center; align-items:flex-start; }
@media (max-width:992px){ .footer-logo-col{ margin-bottom:.5rem; } }
.footer-brand-logo{ max-height:150px; width:auto; }
.footer h5{ font-size:1rem; margin-bottom:1.1rem; }
.footer-item{ display:flex; align-items:flex-start; gap:.65rem; margin-bottom:.85rem; opacity:.9; }
.footer-item i{ margin-top:.15rem; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem;
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:1.5rem;
  padding-top:1.1rem;
  font-size:.85rem;
  opacity:.85;
}
@media (max-width:768px){ .footer-bottom{ justify-content:center; text-align:center; } }

/* ---------- CTA sections ---------- */
.cta-dark{ padding:5.5rem 0; color:#fff; background-size:cover; background-position:center; }

/* ---------- Formulario de contacto ---------- */
.form-group{ margin-bottom:1.25rem; }
.form-label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.form-control, .form-select{
  width:100%;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--gray-300);
  padding:.85rem 1rem;
  font-family:inherit;
  font-size:1rem;
}
.form-control:focus, .form-select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,160,23,.18);
}
textarea.form-control{ resize:vertical; }

.contact-info-card{ background:var(--navy); color:#fff; border-radius:var(--radius); padding:2.5rem; }
.contact-info-card .item{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.contact-info-card .item:last-child{ margin-bottom:0; }

.map-frame{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); }
.map-frame iframe{ display:block; width:100%; border:0; }

/* ---------- Animaciones ---------- */
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes slideRight{ from{opacity:0; transform:translateX(-30px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
.animate-slide-right{ animation:slideRight .8s ease-out forwards; opacity:0; }
.animate-slide-up{ animation:slideUp .8s ease-out forwards; opacity:0; }
.delay-1{ animation-delay:.2s; } .delay-2{ animation-delay:.4s; } .delay-3{ animation-delay:.6s; }

/* ---------- 404 ---------- */
.error-page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; }