:root{
  --color-primario:#f5a61c;
  --color-secundario:#231f20;
  --color-terciario:#00265a;
  --negro:#0b0b0b;
  --gris-600:#6b7280;
  --gris-200:#e5e7eb;
  --maxw:1280px;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
}

html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:#1f2937;
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6,.btn,.navbar-brand,.nav-link{
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}

.navbar-brand img{width: 200px;}

h1{font-size:clamp(2rem,3.5vw+1rem,3.25rem);font-weight:800}
h2{font-size:clamp(1.5rem,2.4vw+1rem,2.25rem);font-weight:800}
h3{font-size:clamp(1.25rem,1.4vw+1rem,1.5rem);font-weight:700}
small, .text-xs{font-size:.875rem}

.container-custom{max-width:var(--maxw);margin-inline:auto;padding-inline:1rem}
.section{padding-block:clamp(2.5rem,6vw,5rem)}

.navbar{box-shadow:0 2px 20px rgba(0,0,0,.06)}
.navbar .btn-cta{background:var(--color-primario);color:#000;font-weight:700;border:none}
.navbar .btn-cta:hover{filter:brightness(.95);transform:translateY(-1px)}
.nav-link.active{color:var(--color-primario)!important}

.hero{position:relative;isolation:isolate;min-height:70svh;display:grid;place-items:center;color:#fff}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.1)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.55))}
.hero .lead{max-width:100%;}
.hero .actions .btn{padding:.9rem 1.25rem;font-weight:800}
.btn-primary-brand{background:var(--color-primario);color:#000;border:none}
.btn-outline-light-brand{border:2px solid #fff;color:#fff}
.btn-outline-light-brand:hover{background:#fff;color:#000}

.kpi{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.kpi .value{font-size:clamp(2rem,6vw,3rem);font-weight:900;line-height:1}
.kpi .label{color:var(--gris-600)}

.card-service{border:none;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.card-service .media{aspect-ratio:16/10;overflow:hidden}
.card-service .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card-service:hover .media img{transform:scale(1.06)}
.card-service .badge{background:var(--color-terciario)}

.split{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media(min-width:992px){.split{grid-template-columns:1.1fr .9fr}}
.split .split-media{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.split .split-media img{width:100%;height:100%;object-fit:cover}

.accordion-button:focus{box-shadow:0 0 0 .25rem rgba(245,166,28,.35)}

footer{background:var(--color-secundario);color:#e5e7eb}
footer a{color:#fff}

.sticky-actions{position:fixed;bottom:0;left:0;right:0;z-index:1030;display:flex;gap:.5rem;padding:.5rem .75rem;background:rgba(35,31,32,.92);backdrop-filter:saturate(140%) blur(6px)}
.sticky-actions .btn{flex:1;font-weight:800}
@media(min-width:992px){.sticky-actions{display:none}}

.fab-whatsapp{position:fixed;right:18px;bottom:18px;z-index:1030}
.fab-whatsapp .btn{border-radius:999px;box-shadow:var(--shadow);font-weight:800}

.reveal{opacity:1;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

.text-brand{color:var(--color-primario)}
.bg-terciario{background:var(--color-terciario);color:#fff}
.bg-secundario{background:var(--color-secundario);color:#fff}
.badge-brand{background:var(--color-primario);color:#000}

.hero-fallback{background:radial-gradient(1200px 600px at 10% 10%, rgba(245,166,28,.25), transparent 60%),radial-gradient(900px 500px at 90% 30%, rgba(0,38,90,.35), transparent 60%),linear-gradient(180deg, #0d141f, #0b0b0b)}

.breadcrumb-item+.breadcrumb-item::before{content:"/"}

:focus-visible{outline:3px solid rgba(245,166,28,.8);outline-offset:2px}

img{height:auto}

.heading-underline{position:relative;display:inline-block}
.heading-underline::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:4px;background:linear-gradient(90deg,var(--color-primario),#ffd36e)}

/* === Mobile Menu & Hero Fixes (added by ChatGPT) === */
:root { --nav-h: 64px; }
@media (min-width: 992px) { :root { --nav-h: 80px; } }

/* Prevent content from sliding under the fixed navbar */
body { padding-top: var(--nav-h); }

/* Brand logo sizing: rely on height to avoid distortion when offcanvas opens */
.navbar-brand img {
  height: 36px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 992px) {
  .navbar-brand img { height: 44px; }
}

/* Toggler: remove borders/shadows on mobile */
.navbar-toggler { border: none; box-shadow: none !important; }

/* Offcanvas styling for cleaner mobile menu */
.offcanvas .nav-link {
  font-weight: 600;
  padding: .75rem 0;
}
.offcanvas .nav-link:hover { color: var(--color-primario); }

/* Slightly reduce hero height on very small screens */
@media (max-width: 575.98px) {
  .hero { min-height: 60svh; }
}

/* Ensure offcanvas doesn't affect header layout */
.offcanvas { max-width: 85vw; }


/* === Fix navegación & responsive (by ChatGPT) === */
:root { --nav-h: 64px; }
@media (min-width: 992px) { :root { --nav-h: 80px; } }

/* Evita que el hero quede tapado por el header fijo */
body { padding-top: var(--nav-h); }

/* Logo por altura para no deformar al abrir el offcanvas */
.navbar-brand img {
  height: 36px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 992px) {
  .navbar-brand img { height: 44px; }
}

/* Toggler limpio */
.navbar-toggler { border: none; box-shadow: none !important; }

/* Offcanvas más cómodo en móvil */
.offcanvas { max-width: 85vw; }
.offcanvas .nav-link { font-weight: 600; padding: .75rem 0; }
.offcanvas .nav-link:hover { color: var(--color-primario); }

/* Hero un poco más compacto en pantallas muy pequeñas */
@media (max-width: 575.98px) {
  .hero { min-height: 60svh; }
}


/* === Hard fix: ensure mobile offcanvas never shows on desktop === */
@media (min-width: 992px){
  #navMobile { display: none !important; visibility: hidden !important; }
}

