/* =========================================================
   Utilities replacement layer - Tailwind removed
   Minimal compatibility for existing HTML utility classes
========================================================= */

:root{
  --primary:#000f27;
  --primary-container:#0b2447;
  --on-primary:#ffffff;
  --secondary:#a04100;
  --secondary-container:#fe6b00;
  --secondary-fixed-dim:#ffb693;
  --background:#f7f9fb;
  --surface:#f7f9fb;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f2f4f6;
  --surface-container:#eceef0;
  --surface-container-high:#e6e8ea;
  --on-surface:#191c1e;
  --on-surface-variant:#44474e;
  --outline:#74777f;
  --outline-variant:#c4c6cf;
  --primary-fixed-dim:#b1c7f3;
  --on-primary-container:#d6e3ff;
  --container-max:1280px;
}

/* base compatibility */
.light{color-scheme:light}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{box-sizing:border-box} img,svg{display:block;max-width:100%} a{text-decoration:none;color:inherit}

/* colors */
.bg-background{background-color:var(--background)!important}
.bg-primary{background-color:var(--primary)!important}
.bg-primary-container{background-color:var(--primary-container)!important}
.bg-secondary-container{background-color:var(--secondary-container)!important}
.bg-surface{background-color:var(--surface)!important}
.bg-surface-container-lowest{background-color:var(--surface-container-lowest)!important}
.bg-surface-container-lowest\/95{background-color:rgba(255,255,255,.95)!important}
.bg-surface-container-low{background-color:var(--surface-container-low)!important}
.bg-surface-container{background-color:var(--surface-container)!important}
.bg-\[\#25D366\]{background-color:#25D366!important}
.bg-transparent{background-color:transparent!important}

.text-on-background{color:var(--on-surface)!important}.text-white{color:#fff!important}.text-primary{color:var(--primary)!important}.text-secondary{color:var(--secondary)!important}.text-secondary-fixed-dim{color:var(--secondary-fixed-dim)!important}.text-primary-fixed-dim{color:var(--primary-fixed-dim)!important}.text-on-primary{color:var(--on-primary)!important}.text-on-secondary{color:#fff!important}.text-on-primary-container{color:var(--on-primary-container)!important}.text-on-surface{color:var(--on-surface)!important}.text-on-surface-variant{color:var(--on-surface-variant)!important}
.comm-text-secondary-fixed-dim{color:var(--secondary-fixed-dim)!important}
.comm-text-primary-fixed-dim{color:var(--primary-fixed-dim)!important}
.comm-text-on-primary{color:#fff!important}
.comm-text-on-secondary{color:#fff!important}

/* gradients */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.from-primary-container{
  --tw-gradient-from:var(--primary-container);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(11,36,71,0))}
.via-primary-container\/90{
  --tw-gradient-stops:var(--tw-gradient-from),rgba(11,36,71,.9),var(--tw-gradient-to,rgba(11,36,71,0))}
.to-primary-container\/50{--tw-gradient-to:rgba(11,36,71,.5)}

/* display / position */
.block{display:block}
.inline-block{display:inline-block}
.hidden{display:none}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}
.top-full{top:100%}
.bottom-8{bottom:2rem}.right-8{right:2rem}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[60\]{z-index:60}.overflow-hidden{overflow:hidden}.invisible{visibility:hidden}

/* sizing */
/* sizing */
.h-8{height:2rem}
.h-12{height:3rem}
.h-full{height:100%}
.min-h-screen{min-height:100vh}

.w-auto{width:auto}
.w-56{width:14rem}
.w-64{width:16rem}
.w-72{width:18rem}
.w-\[860px\]{width:860px}

.w-full{width:100%}
.w-fit{width:fit-content}

.max-w-container-max{max-width:var(--container-max)}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-sm{max-width:24rem}

/* layout */
.mx-auto{margin-left:auto;margin-right:auto}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* spacing */
.gap-1\.5{gap:.300rem}
.gap-1{gap:.200rem}
.gap-2{gap:.400rem}
.gap-3{gap:.600rem}
.gap-4{gap:0.80rem}
.gap-6{gap:1.2rem}
.gap-8{gap:1.6rem}
.gap-10{gap:2.0rem}

.gap-stack-md{gap:10px}
.gap-stack-lg{gap:24px}

.p-2{padding:.5rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}

.px-margin-mobile{padding-left:16px;padding-right:16px}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}

.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.py-stack-sm{padding-top:8px;padding-bottom:8px}
.py-stack-md{padding-top:16px;padding-bottom:16px}
.py-stack-lg{padding-top:24px;padding-bottom:24px}

.pt-2{padding-top:.5rem}
.pt-4{padding-top:1rem}

.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-9{margin-bottom:2.25rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}

.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-auto{margin-top:auto}

@media (min-width:768px){.md\:py-32{padding-top:8rem;padding-bottom:8rem}}

/* typography */
.font-body-sm,.font-body-md,.font-body-lg,.font-headline-sm,.font-headline-md{font-family:"Hanken Grotesk",system-ui,sans-serif}
.font-label-caps{font-family:"JetBrains Mono",ui-monospace,monospace}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-extrabold{font-weight:800}
.font-black{font-weight:900}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-md{font-size:1rem;line-height:1.45rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-\[11px\]{font-size:11px}
.text-\[13px\]{font-size:13px}
.text-\[16px\]{font-size:16px}
.text-\[18px\]{font-size:18px}
.text-body-sm{font-size:14px;line-height:20px}
.text-body-md{font-size:16px;line-height:24px}
.text-body-lg{font-size:18px;line-height:28px}
.text-headline-sm{font-size:20px;line-height:28px}
.text-headline-md{font-size:28px;line-height:36px}
.text-label-caps{font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.leading-7{line-height:1.75rem}
.leading-tight{line-height:1.1}
.leading-snug{line-height:1.25}
.leading-normal{line-height:1.5}
.leading-relaxed{line-height:1.75}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-tight{letter-spacing:-.025em}

/* border / radius / shadow */
.border{border-width:1px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-y{border-top-width:1px;border-bottom-width:1px;border-top-style:solid;border-bottom-style:solid}
.border-white{border-color:#fff}
.border-white\/10{border-color:rgba(255,255,255,.10)!important}
.border-outline-variant{border-color:var(--outline-variant)!important}

.rounded{border-radius:.125rem}
.rounded-lg{border-radius:.25rem}
.rounded-full{border-radius:999px}
.rounded-xl{border-radius:.5rem}

.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.10),0 8px 10px -6px rgba(0,0,0,.10)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}

/* effects */
.object-cover{object-fit:cover}
.opacity-0{opacity:0}
.opacity-20{opacity:0.2}
.opacity-50{opacity:0.5}
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s}
.transition-opacity{transition-property:opacity;transition-duration:.15s}
.transition-transform{transition-property:transform;transition-duration:.15s}
.transition-all{transition-property:all;transition-duration:.15s}
.duration-200{transition-duration:.2s}
.duration-300{transition-duration:.3s}

/* hovers / groups */
.hover\:opacity-90:hover{opacity:.9}.hover\:scale-110:hover{transform:scale(1.1)}.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.10)}.hover\:comm-text-primary:hover{color:var(--primary)!important}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:visible{visibility:visible}.group:hover .group-hover\:rotate-180{transform:rotate(180deg)}

/* typography additions */
.font-display-lg-mobile{
  font-family:"Hanken Grotesk",system-ui,sans-serif
}
.text-display-lg-mobile{
  font-size:34px;line-height:42px;letter-spacing:-.02em;font-weight:800
}

/* responsive */
@media (min-width:640px){.sm\:block{display:block}.sm\:hidden{display:none}}
@media (min-width:768px){
  .md\:block{display:block}
  .md\:hidden{display:none}
  .md\:flex{display:flex}
  .md\:grid{display:grid}
  .md\:px-margin-desktop{padding-left:64px;padding-right:64px}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:comm-py-20{padding-top:5rem;padding-bottom:5rem}
  .md\:font-display-lg{font-family:"Hanken Grotesk",system-ui,sans-serif}
  .md\:text-display-lg{font-size:34px;line-height:42px;letter-spacing:-.03em;font-weight:800}
}
@media (min-width:1024px){
  .lg\:block{display:block}
  .lg\:hidden{display:none}
  .lg\:flex{display:flex}
  .lg\:grid{display:grid}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* =========================================================
   Utilities replacement layer - reinforcement for header/footer/index hero
========================================================= */

/* colors and backgrounds */
.bg-white{background-color:#fff!important}
.bg-white\/10{background-color:rgba(255,255,255,.10)!important}
.bg-white\/5{background-color:rgba(255,255,255,.05)!important}
.border-white\/15{border-color:rgba(255,255,255,.15)!important}
.border-white\/25{border-color:rgba(255,255,255,.25)!important}

/* gradient tokens used by index hero */
.from-primary{--tw-gradient-from:var(--primary);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,15,39,0))}
.via-primary\/95{--tw-gradient-stops:var(--tw-gradient-from),rgba(0,15,39,.95),var(--tw-gradient-to,rgba(0,15,39,0))}
.to-primary\/30{--tw-gradient-to:rgba(0,15,39,.30)}

/* positioning */
.left-0{left:0}.right-0{right:0}.left-1\/2{left:50%}.-translate-x-1\/2{transform:translateX(-50%)}

/* display responsive additions */
@media (min-width:640px){.sm\:flex{display:flex}.sm\:inline-block{display:inline-block}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* spacing additions */
.space-y-4>*+*{margin-top:1rem}.space-y-5>*+*{margin-top:1.25rem}

/* effects */
.opacity-25{opacity:.25}.brightness-0{filter:brightness(0)}.invert{filter:invert(1)}

/* hover aliases created during migration */
.hover\:comm-text-secondary-fixed-dim:hover{color:var(--secondary-fixed-dim)!important}

/* Footer copyright hardening */
.footer-copyright,footer .footer-copyright{width:100%;text-align:center;display:block;margin-left:auto;margin-right:auto}


/* =========================================================
   Header width only fix
   Solo controla el ancho del header/menu.
========================================================= */

#main-nav-wrapper .comm-container-max,
#header-container .comm-container-max,
header .comm-container-max,
#main-nav-wrapper .max-w-container-max,
#header-container .max-w-container-max,
header .max-w-container-max {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

#main-nav-wrapper .comm-px-mobile,
#header-container .comm-px-mobile,
header .comm-px-mobile,
#main-nav-wrapper .px-margin-mobile,
#header-container .px-margin-mobile,
header .px-margin-mobile {
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  #main-nav-wrapper .comm-px-desktop,
  #header-container .comm-px-desktop,
  header .comm-px-desktop,
  #main-nav-wrapper .md\:px-margin-desktop,
  #header-container .md\:px-margin-desktop,
  header .md\:px-margin-desktop {
    padding-left: 64px;
    padding-right: 64px;
  }
}


/* =========================================================
   Home sections targeted fixes
========================================================= */
@media (min-width:1024px){
  .home-brands-section .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}
.home-why-section{width:100%}
.home-why-section>.comm-container-max{width:min(1280px,calc(100% - 32px));margin-left:auto;margin-right:auto}
@media (min-width:768px){
  .home-why-section>.comm-container-max{padding-left:64px;padding-right:64px}
}


/* =========================================================
   Why section cards - 3 columns
========================================================= */

.home-why-cards-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .home-why-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .home-why-cards-grid > * {
    min-width: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-why-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .home-why-cards-grid {
    grid-template-columns: 1fr !important;
  }
}