/* ============================================================
   Appliance Parts Professional — site.css
   Brand: Navy #0F2C45 · Azul #1763A6 · Naranja #F47B20 · Acero #5B6B7A
   Type: Archivo (display) + Hanken Grotesk (texto)
   Mobile-first.
   ============================================================ */

:root{
  --navy:#0f2c45; --navy-2:#15395a;
  --blue:#1763a6; --blue-700:#12568f; --blue-50:#eaf2fb;
  --orange:#f47b20; --orange-700:#d9670f; --orange-50:#fdf0e6;
  --steel:#5b6b7a; --steel-2:#7d8b98; --steel-300:#9aa8b5;
  --ink:#16202b; --muted:#5b6b7a;
  --bg:#f4f6f8; --surface:#ffffff; --tint:#f1f5f9;
  --line:#e2e8ef; --line-2:#d3dde6;
  --green:#1f8a52; --green-50:#e8f4ec;
  --amber:#c8791a; --amber-50:#fbf1e2;
  --wa:#25d366; --wa-700:#1da851;

  --radius-sm:8px; --radius:11px; --radius-lg:16px;
  --maxw:1280px;
  --shadow-sm:0 1px 2px rgba(15,44,69,.06);
  --shadow:0 2px 6px rgba(15,44,69,.05), 0 14px 30px rgba(15,44,69,.07);
  --shadow-lg:0 20px 50px rgba(15,44,69,.16);

  --sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Archivo", var(--sans);
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--bg); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; color:var(--navy); line-height:1.08; letter-spacing:-.5px; margin:0;}
p{margin:0;}
:focus-visible{outline:3px solid rgba(23,99,166,.45); outline-offset:2px; border-radius:4px;}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px;}
@media(min-width:760px){ .container{padding:0 28px;} }
@media(min-width:1100px){ .container{padding:0 40px;} }
.section{padding:46px 0;}
@media(min-width:760px){ .section{padding:68px 0;} }
.section--tint{background:var(--tint);}
.section--navy{background:var(--navy); color:#cdd9e4;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap;}
.section-head .h{max-width:640px;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--blue); font-weight:500; margin-bottom:12px; display:block;}
.section--navy .eyebrow{color:#74b3e6;}
.title-xl{font-size:clamp(30px,5vw,52px); letter-spacing:-1px;}
.title-lg{font-size:clamp(25px,3.4vw,38px);}
.title-md{font-size:clamp(21px,2.4vw,27px);}
.lede{font-size:clamp(16px,1.6vw,19px); color:var(--muted); line-height:1.55;}
.section--navy .lede{color:#9fb6c9;}
.muted{color:var(--muted);} .nowrap{white-space:nowrap;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.1px;
  min-height:48px; padding:0 22px; border-radius:var(--radius-sm);
  border:1.5px solid transparent; cursor:pointer; transition:.16s ease;
  white-space:nowrap; text-align:center;
}
.btn .ic{width:19px; height:19px;}
.btn-lg{min-height:56px; padding:0 30px; font-size:17px;}
.btn-sm{min-height:40px; padding:0 15px; font-size:14px; gap:7px;}
.btn-block{width:100%;}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:var(--orange-700);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:#0a2034;}
.btn-blue{background:var(--blue); color:#fff;}
.btn-blue:hover{background:var(--blue-700);}
.btn-outline{background:transparent; border-color:var(--line-2); color:var(--navy);}
.btn-outline:hover{border-color:var(--navy); background:#fff;}
.btn-wa{background:var(--wa); color:#06351b;}
.btn-wa:hover{background:var(--wa-700); color:#fff;}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--navy);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue);}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------- Brand logo (header) ---------- */
.brand-logo{display:inline-flex; align-items:center; gap:9px; font-family:var(--display); line-height:1; white-space:nowrap;}
.brand-logo .bl-wm{font-weight:800; font-size:21px; letter-spacing:-.5px;}
.brand-logo .bl-a{color:var(--navy);} .brand-logo .bl-p{color:var(--orange);}
.brand-logo .bl-tag{font-weight:700; font-size:10px; letter-spacing:1.5px; color:var(--steel); background:var(--blue-50); padding:3px 6px; border-radius:5px;}
.brand-logo--white .bl-a{color:#fff;} .brand-logo--white .bl-p{color:var(--orange);}
.brand-logo--white .bl-tag{color:#cdd9e4; background:rgba(255,255,255,.12);}
.brand-logo--lg .bl-wm{font-size:27px;}
@media(min-width:760px){ .brand-logo .bl-wm{font-size:23px;} }

/* ---------- Icons ---------- */
.ic{width:20px; height:20px; flex:none; stroke-width:1.7;}
.ic-sm{width:17px; height:17px;}

/* ============================================================
   HEADER — full-width, prominent, 3 tiers
   ============================================================ */
.site-header{background:#fff;}
.utilbar{background:var(--navy); color:#b9c9d6; font-size:13px;}
.utilbar a{color:#cdd9e4;}
.utilbar__in{display:flex; align-items:center; justify-content:space-between; min-height:38px; gap:14px;}
.utilbar__left,.utilbar__right{display:flex; align-items:center; gap:18px;}
.util-item{display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.util-item .ic{width:16px; height:16px; color:var(--orange);}
.util-wa:hover{color:#fff;}
.util-hide-sm{display:none;}
@media(min-width:640px){ .util-hide-sm{display:inline-flex;} }

.navwrap{position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 1px 0 var(--line);}
.navwrap.is-stuck{box-shadow:0 6px 20px rgba(15,44,69,.10);}
.mainnav__in{display:flex; align-items:center; gap:16px; min-height:70px;}
@media(min-width:1024px){ .mainnav__in{min-height:84px; gap:26px;} }
.brand{flex:none;}
.mainnav__links{display:none; align-items:center; gap:4px; margin-left:8px;}
@media(min-width:1024px){ .mainnav__links{display:flex;} }
.navlink{
  font-family:var(--display); font-weight:600; font-size:16px; color:var(--navy);
  padding:0 16px; height:84px; display:inline-flex; align-items:center; position:relative;
  transition:color .15s;
}
.navlink:hover{color:var(--blue);}
.navlink.is-active{color:var(--blue);}
.navlink.is-active::after{content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px; background:var(--orange); border-radius:3px 3px 0 0;}

.mainnav__actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
.iconbtn{
  width:46px; height:46px; border-radius:var(--radius-sm); display:inline-flex;
  align-items:center; justify-content:center; color:var(--navy); position:relative;
  border:1.5px solid var(--line); background:#fff; transition:.15s;
}
.iconbtn:hover{border-color:var(--blue); color:var(--blue);}
.iconbtn--cart{}
.cart-badge{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px;
  background:var(--orange); color:#fff; border-radius:11px; font-family:var(--display);
  font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.cart-badge.is-empty{display:none;}
.nav-wa{display:none;}
@media(min-width:760px){ .nav-wa{display:inline-flex;} .iconbtn--search{display:inline-flex;} }
.iconbtn--search{display:none;}
.hamburger{
  width:46px; height:46px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:#fff; color:var(--navy); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
@media(min-width:1024px){ .hamburger{display:none;} }

/* Category bar */
.catbar{background:#fff; border-top:1px solid var(--line);}
.catbar__in{display:flex; align-items:stretch; gap:2px; overflow-x:auto; scrollbar-width:none;}
.catbar__in::-webkit-scrollbar{display:none;}
.catlink{
  font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--navy);
  padding:14px 16px; white-space:nowrap; border-bottom:3px solid transparent; transition:.15s;
}
.catlink:hover{color:var(--blue); border-bottom-color:var(--blue);}
.catlink--all{color:var(--orange-700); margin-left:auto;}
.catlink.is-active{color:var(--blue); border-bottom-color:var(--orange);}

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:200; background:rgba(10,24,38,.55);
  opacity:0; visibility:hidden; transition:opacity .2s; backdrop-filter:blur(2px);
}
.mobile-menu.is-open{opacity:1; visibility:visible;}
.mobile-menu__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86%,360px); background:#fff;
  transform:translateX(100%); transition:transform .24s ease; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); overflow-y:auto;
}
.mobile-menu.is-open .mobile-menu__panel{transform:none;}
.mm__head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);}
.mm__close{width:42px; height:42px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy);}
.mm__links{padding:10px 12px; display:flex; flex-direction:column;}
.mm__links a{font-family:var(--display); font-weight:600; font-size:18px; color:var(--navy); padding:14px 12px; border-radius:8px;}
.mm__links a:hover{background:var(--tint);}
.mm__section{padding:14px 24px; border-top:1px solid var(--line);}
.mm__label{font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--steel-2); margin-bottom:10px;}
.mm__cats{display:flex; flex-wrap:wrap; gap:8px;}
.mm__cats a{font-size:14px; font-weight:600; color:var(--navy); background:var(--tint); padding:8px 12px; border-radius:7px;}
.mm__contact{padding:18px 24px 28px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px;}

/* ============================================================
   PLACEHOLDERS (imagery slots)
   ============================================================ */
.ph{
  position:relative; background-color:#e9eef3;
  background-image:repeating-linear-gradient(135deg,#e4ebf1 0 11px,#eef3f7 11px 22px);
  border:1px solid var(--line); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden; color:#8a98a6;
}
.ph::after{
  content:attr(data-label); font-family:var(--mono); font-size:11px; letter-spacing:.5px;
  color:#7f8e9c; text-transform:uppercase; padding:7px 11px; text-align:center; line-height:1.4;
  background:rgba(255,255,255,.66); border-radius:6px; border:1px solid rgba(120,140,160,.18);
}
.ph--navy{background-color:#163a57; background-image:repeating-linear-gradient(135deg,#143a5c 0 11px,#19405f 11px 22px);}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.hero__grid{display:grid; grid-template-columns:1fr; gap:30px; align-items:center; padding:44px 0 50px;}
@media(min-width:980px){ .hero__grid{grid-template-columns:1.05fr .95fr; gap:54px; padding:66px 0 74px;} }
.hero h1{color:#fff; font-size:clamp(32px,5.2vw,56px); letter-spacing:-1.4px; line-height:1.04;}
.hero h1 em{font-style:normal; color:var(--orange);}
.hero__sub{margin-top:18px; font-size:clamp(16px,1.8vw,20px); color:#a9c0d2; max-width:540px; line-height:1.55;}
.hero__trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px;}
.hero__trust span{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:#cdd9e4; font-weight:500;}
.hero__trust .ic{width:18px; height:18px; color:var(--orange);}
.hero__media{position:relative;}
.hero__art{width:100%;height:auto;display:block;background:#f4f7fb;border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:16px;box-shadow:0 22px 54px rgba(0,0,0,.24);}
.hero__media .ph{aspect-ratio:4/3; border:1px solid rgba(255,255,255,.14); background-color:#163a57; background-image:repeating-linear-gradient(135deg,#143a5c 0 12px,#19405f 12px 24px);}
.hero__media .ph::after{background:rgba(15,44,69,.6); color:#bcd0e0; border-color:rgba(255,255,255,.16);}

/* Model lookup box */
.lookup{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px; color:var(--ink);}
.lookup__t{font-family:var(--display); font-weight:700; font-size:16px; color:var(--navy); display:flex; align-items:center; gap:9px; margin-bottom:5px;}
.lookup__t .ic{color:var(--blue);}
.lookup__d{font-size:13.5px; color:var(--muted); margin-bottom:14px;}
.lookup__row{display:flex; gap:10px; flex-direction:column;}
@media(min-width:520px){ .lookup__row{flex-direction:row;} }
.lookup__row .input{flex:1;}
.lookup__ex{margin-top:12px; font-size:12.5px; color:var(--steel-2); display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
.lookup__ex b{font-weight:600; color:var(--steel);}
.lookup__ex button{font-family:var(--mono); font-size:12px; color:var(--blue); background:var(--blue-50); border:none; border-radius:6px; padding:4px 9px; cursor:pointer;}
.lookup__ex button:hover{background:#dcebf9;}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.input,.select,.textarea{
  width:100%; font-family:var(--sans); font-size:15.5px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  padding:12px 14px; min-height:48px; transition:border-color .15s, box-shadow .15s;
}
.textarea{min-height:120px; resize:vertical; line-height:1.5;}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b6b7a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:38px; cursor:pointer;}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(23,99,166,.14);}
.input::placeholder,.textarea::placeholder{color:#9aa8b5;}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.label{font-family:var(--display); font-weight:600; font-size:14px; color:var(--navy);}
.label .req{color:var(--orange-700);}
.help{font-size:12.5px; color:var(--muted);}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:#c2382f; box-shadow:0 0 0 3px rgba(194,56,47,.12);}
.err-msg{font-size:12.5px; color:#c2382f; display:none;}
.field.has-error .err-msg{display:block;}
.form-grid{display:grid; grid-template-columns:1fr; gap:0 18px;}
@media(min-width:620px){ .form-grid.cols-2{grid-template-columns:1fr 1fr;} }
.input-group{display:flex; gap:10px; flex-direction:column;}
@media(min-width:520px){ .input-group{flex-direction:row;} }

/* ============================================================
   CARDS, TAGS, BADGES
   ============================================================ */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);}
.tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.3px; color:var(--blue-700); background:var(--blue-50); padding:4px 9px; border-radius:6px; text-transform:uppercase;}
.chip{display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color:var(--steel); background:var(--tint); border:1px solid var(--line); padding:4px 9px; border-radius:6px;}

.stk{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:12.5px; padding:4px 10px 4px 8px; border-radius:20px;}
.stk::before{content:""; width:8px; height:8px; border-radius:50%; flex:none;}
.stk-in{color:var(--green); background:var(--green-50);} .stk-in::before{background:var(--green);}
.stk-low{color:var(--amber); background:var(--amber-50);} .stk-low::before{background:var(--amber);}
.stk-order{color:var(--blue-700); background:var(--blue-50);} .stk-order::before{background:var(--blue);}

/* ============================================================
   PRODUCT CARDS / GRID
   ============================================================ */
.prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px;}
@media(max-width:520px){ .prod-grid{grid-template-columns:1fr 1fr; gap:12px;} }
.prod-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:.16s; box-shadow:var(--shadow-sm);}
.prod-card:hover{box-shadow:var(--shadow); border-color:var(--line-2); transform:translateY(-2px);}
.prod-card__media{position:relative; aspect-ratio:4/3; background:#fff; border-bottom:1px solid var(--line);}
.prod-card__media .ph{position:absolute; inset:0; border:none; border-radius:0;}
.prod-card__stk{position:absolute; top:10px; left:10px;}
.prod-card__body{padding:14px 15px 16px; display:flex; flex-direction:column; flex:1; gap:8px;}
.prod-card__cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--steel-2);}
.prod-card__name{font-family:var(--display); font-weight:700; font-size:15.5px; color:var(--navy); line-height:1.25; letter-spacing:-.2px;}
.prod-card__sku{font-family:var(--mono); font-size:11.5px; color:var(--steel-2);}
.prod-card__brands{display:flex; flex-wrap:wrap; gap:5px; margin-top:1px;}
.prod-card__brands .bchip{font-size:11px; font-weight:600; color:var(--steel); background:var(--tint); border:1px solid var(--line); padding:2px 7px; border-radius:5px;}
.prod-card__foot{margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.price{font-family:var(--display); font-weight:800; font-size:19px; color:var(--navy); letter-spacing:-.3px;}
.price small{font-weight:600; font-size:12px; color:var(--steel-2);}
.add-btn{width:44px; height:44px; flex:none; border-radius:var(--radius-sm); background:var(--navy); color:#fff; border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s;}
.add-btn:hover{background:var(--orange);}
.add-btn.is-added{background:var(--green);}

/* ============================================================
   CATALOG layout (piezas)
   ============================================================ */
.catalog{display:grid; grid-template-columns:1fr; gap:26px;}
@media(min-width:980px){ .catalog{grid-template-columns:268px 1fr; gap:34px; align-items:start;} }
.filters{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:6px 18px 18px;}
@media(min-width:980px){ .filters{position:sticky; top:188px;} }
.filter-group{padding:16px 0; border-bottom:1px solid var(--line);}
.filter-group:last-child{border-bottom:none;}
.filter-group h4{font-family:var(--display); font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:var(--navy); margin-bottom:12px;}
.opt{display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:14.5px; color:var(--ink);}
.opt input{width:18px; height:18px; accent-color:var(--blue); cursor:pointer;}
.opt .cnt{margin-left:auto; font-size:12px; color:var(--steel-2); font-family:var(--mono);}
.opt:hover{color:var(--blue);}

.catalog-tools{display:flex; flex-direction:column; gap:14px; margin-bottom:20px;}
.searchbar{position:relative;}
.searchbar .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--steel-2);}
.searchbar .input{padding-left:42px;}
.toolrow{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.result-count{font-size:14px; color:var(--muted);}
.result-count b{color:var(--navy); font-family:var(--display);}
.sortsel{display:flex; align-items:center; gap:8px;}
.sortsel .select{min-height:42px; min-width:180px;}
.filter-toggle{display:inline-flex;}
@media(min-width:980px){ .filter-toggle{display:none;} }

.active-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.active-filters:empty{display:none;}
.fchip{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--navy); background:#fff; border:1.5px solid var(--line-2); padding:6px 8px 6px 12px; border-radius:20px;}
.fchip button{width:20px; height:20px; border:none; background:var(--tint); border-radius:50%; cursor:pointer; color:var(--steel); display:inline-flex; align-items:center; justify-content:center;}
.fchip button:hover{background:#e6604f; color:#fff;}
.fclear{font-size:13px; font-weight:600; color:var(--orange-700); background:none; border:none; cursor:pointer; padding:6px;}

.empty-state{text-align:center; padding:60px 20px; background:#fff; border:1px dashed var(--line-2); border-radius:var(--radius-lg);}
.empty-state h3{font-size:20px; margin-bottom:8px;}
.empty-state p{color:var(--muted); margin-bottom:18px;}

/* mobile filter drawer */
@media(max-width:979px){
  .filters{position:fixed; top:0; right:0; height:100%; width:min(88%,340px); z-index:200; border-radius:0; overflow-y:auto; transform:translateX(100%); transition:transform .24s; box-shadow:var(--shadow-lg);}
  .filters.is-open{transform:none;}
  .filters__backdrop{position:fixed; inset:0; background:rgba(10,24,38,.5); z-index:199; opacity:0; visibility:hidden; transition:.2s;}
  .filters__backdrop.is-open{opacity:1; visibility:visible;}
  .filters__head{display:flex; align-items:center; justify-content:space-between; padding:14px 0 4px; position:sticky; top:0; background:#fff;}
}
.filters__head{display:none;}
@media(max-width:979px){ .filters__head{display:flex;} }

/* ============================================================
   CATEGORY TILES (home)
   ============================================================ */
.cat-tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media(min-width:680px){ .cat-tiles{grid-template-columns:repeat(3,1fr); gap:18px;} }
@media(min-width:1040px){ .cat-tiles{grid-template-columns:repeat(4,1fr);} }
.cat-tile{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:.16s; box-shadow:var(--shadow-sm); min-height:150px;}
.cat-tile:hover{box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--blue);}
.cat-tile__media{aspect-ratio:16/10; position:relative;}
.cat-tile__media .ph{position:absolute; inset:0; border:none; border-radius:0;}
.cat-tile__body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:3px; flex:1;}
.cat-tile__name{font-family:var(--display); font-weight:800; font-size:16.5px; color:var(--navy); letter-spacing:-.3px;}
.cat-tile__cnt{font-size:13px; color:var(--muted);}
.cat-tile__arrow{position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.92); color:var(--navy); display:flex; align-items:center; justify-content:center; transition:.15s;}
.cat-tile:hover .cat-tile__arrow{background:var(--orange); color:#fff;}

/* ============================================================
   VALUE PROPS / STEPS / FEATURE BANDS
   ============================================================ */
.feature-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:620px){ .feature-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1024px){ .feature-grid{grid-template-columns:repeat(4,1fr);} }
.feature{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 22px; box-shadow:var(--shadow-sm);}
.feature__ic{width:48px; height:48px; border-radius:12px; background:var(--blue-50); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.feature__ic .ic{width:24px; height:24px;}
.feature h3{font-size:18px; margin-bottom:7px;}
.feature p{font-size:14.5px; color:var(--muted); line-height:1.5;}

.steps{display:grid; grid-template-columns:1fr; gap:16px; counter-reset:step;}
@media(min-width:620px){ .steps{grid-template-columns:1fr 1fr;} }
@media(min-width:1024px){ .steps{grid-template-columns:repeat(4,1fr);} }
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 22px; box-shadow:var(--shadow-sm);}
.step__n{font-family:var(--display); font-weight:800; font-size:15px; width:38px; height:38px; border-radius:10px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:15px;}
.step h3{font-size:17px; margin-bottom:6px;}
.step p{font-size:14px; color:var(--muted); line-height:1.5;}

/* Brand strip / grid */
.brand-strip{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.brand-pill{display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.3px; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 22px; min-width:130px; box-shadow:var(--shadow-sm); transition:.15s;}
.brand-pill:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}
.section--navy .brand-pill{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#dce7f0;}
.section--navy .brand-pill:hover{background:rgba(255,255,255,.12); color:#fff;}

.brand-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media(min-width:680px){ .brand-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1040px){ .brand-grid{grid-template-columns:repeat(4,1fr);} }
.brand-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm); transition:.16s; min-height:170px;}
.brand-card:hover{box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--blue);}
.brand-card__logo{height:54px; display:flex; align-items:center; font-family:var(--display); font-weight:800; font-size:24px; color:var(--navy); letter-spacing:-.5px;}
.brand-card__cnt{margin-top:auto; font-size:13.5px; color:var(--muted);}
.brand-card__cnt b{color:var(--navy); font-family:var(--display);}
.brand-card__arrow{font-size:13px; font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:6px; margin-top:10px;}

/* ============================================================
   SOLICITUD (cart)
   ============================================================ */
.cart-layout{display:grid; grid-template-columns:1fr; gap:26px;}
@media(min-width:920px){ .cart-layout{grid-template-columns:1fr 380px; gap:34px; align-items:start;} }
.cart-items{display:flex; flex-direction:column; gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.cart-row{display:flex; gap:14px; padding:16px; border-bottom:1px solid var(--line); align-items:flex-start;}
.cart-row:last-child{border-bottom:none;}
.cart-row__media{width:84px; height:84px; flex:none; border-radius:var(--radius-sm); overflow:hidden; position:relative;}
.cart-row__media .ph{position:absolute; inset:0; border:none; border-radius:0;}
.cart-row__info{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.cart-row__name{font-family:var(--display); font-weight:700; font-size:15px; color:var(--navy); line-height:1.25;}
.cart-row__sku{font-family:var(--mono); font-size:11.5px; color:var(--steel-2);}
.cart-row__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px;}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:8px; overflow:hidden;}
.qty button{width:34px; height:36px; border:none; background:#fff; color:var(--navy); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.qty button:hover{background:var(--tint);}
.qty input{width:40px; height:36px; border:none; text-align:center; font-family:var(--display); font-weight:700; font-size:15px; color:var(--navy); -moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;}
.cart-row__price{font-family:var(--display); font-weight:800; font-size:16px; color:var(--navy);}
.cart-row__rm{font-size:12.5px; color:var(--steel-2); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;}
.cart-row__rm:hover{color:#c2382f;}

.summary{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);}
@media(min-width:920px){ .summary{position:sticky; top:188px;} }
.summary h3{font-size:19px; margin-bottom:6px;}
.summary__note{font-size:13px; color:var(--muted); margin-bottom:16px; line-height:1.5;}
.summary__line{display:flex; justify-content:space-between; padding:9px 0; font-size:14.5px; color:var(--ink); border-bottom:1px solid var(--line);}
.summary__line.total{border-bottom:none; padding-top:14px; font-family:var(--display); font-weight:800; font-size:18px; color:var(--navy);}
.summary__line .est{font-family:var(--mono); font-size:11px; color:var(--steel-2); background:var(--tint); padding:2px 7px; border-radius:5px;}

/* Info cards (contact / about) */
.info-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:640px){ .info-grid{grid-template-columns:1fr 1fr;} }
.info-card{display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm);}
.info-card__ic{width:46px; height:46px; flex:none; border-radius:11px; background:var(--blue-50); color:var(--blue); display:flex; align-items:center; justify-content:center;}
.info-card h4{font-size:16px; margin-bottom:3px;}
.info-card p,.info-card a{font-size:14.5px; color:var(--muted); line-height:1.5;}
.info-card a.linky{color:var(--blue); font-weight:600;}

/* Stats row (about) */
.stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
@media(min-width:760px){ .stats{grid-template-columns:repeat(4,1fr);} }
.stat{background:#fff; padding:26px 22px; text-align:center;}
.stat b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(28px,4vw,40px); color:var(--navy); letter-spacing:-1px;}
.stat span{font-size:13.5px; color:var(--muted);}

/* Generic prose */
.prose{max-width:720px;}
.prose p{margin-bottom:16px; font-size:16.5px; line-height:1.65; color:#33414f;}
.prose h2{margin:34px 0 14px;}

/* CTA band */
.cta-band{background:var(--navy); border-radius:var(--radius-lg); padding:38px 30px; color:#fff; display:flex; flex-direction:column; gap:20px; align-items:flex-start;}
@media(min-width:820px){ .cta-band{flex-direction:row; align-items:center; justify-content:space-between; padding:44px 48px;} }
.cta-band h2{color:#fff; font-size:clamp(23px,3vw,32px);}
.cta-band p{color:#a9c0d2; margin-top:8px; font-size:16px;}
.cta-band__actions{display:flex; gap:12px; flex-wrap:wrap; flex:none;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy); color:#9fb6c9; padding:52px 0 26px; margin-top:8px;}
.footer-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px 24px;}
@media(min-width:760px){ .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr;} }
.footer-brand{grid-column:1 / -1;}
@media(min-width:760px){ .footer-brand{grid-column:auto;} }
.footer-brand p{margin-top:16px; font-size:14px; line-height:1.6; max-width:300px; color:#8ba5ba;}
.footer-col h4{font-family:var(--display); font-size:13px; letter-spacing:.6px; text-transform:uppercase; color:#fff; margin-bottom:14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.footer-col a{font-size:14.5px; color:#a9c0d2;}
.footer-col a:hover{color:#fff;}
.footer-contact li{display:flex; align-items:flex-start; gap:9px; font-size:14.5px; color:#a9c0d2;}
.footer-contact .ic{width:17px; height:17px; color:var(--orange); margin-top:2px;}
.footer-bottom{display:flex; flex-direction:column; gap:12px; margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:#7f99ad;}
@media(min-width:680px){ .footer-bottom{flex-direction:row; align-items:center; justify-content:space-between;} }
.footer-bottom__links{display:flex; gap:18px; flex-wrap:wrap;}
.footer-bottom a:hover{color:#fff;}

/* ============================================================
   TOAST / CONFIRMATION
   ============================================================ */
.toast{position:fixed; left:50%; bottom:26px; background:var(--navy); color:#fff; padding:13px 20px; border-radius:10px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px; z-index:300; opacity:0; visibility:hidden; transition:.22s; transform:translateX(-50%) translateY(20px);}
.toast.is-show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.toast .ic{color:var(--wa); width:20px; height:20px;}

.confirm-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 28px; text-align:center; box-shadow:var(--shadow);}
.confirm-panel__ic{width:64px; height:64px; border-radius:50%; background:var(--green-50); color:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.confirm-panel h2{font-size:24px; margin-bottom:10px;}
.confirm-panel p{color:var(--muted); max-width:440px; margin:0 auto 8px; line-height:1.55;}
.confirm-panel .ref{font-family:var(--mono); font-size:14px; color:var(--navy); background:var(--tint); display:inline-block; padding:6px 14px; border-radius:8px; margin:12px 0 22px;}

/* about intro (nosotros) */
.about-intro{display:grid; grid-template-columns:1fr; gap:28px; align-items:center;}
@media(min-width:860px){ .about-intro{grid-template-columns:1.04fr 0.96fr; gap:46px;} }
.about-intro__art{width:100%; height:auto; display:block; max-width:540px; margin:0 auto;}
.about-intro--noart{grid-template-columns:1fr;}
.about-intro--noart .prose{max-width:780px;}

/* page intro / breadcrumb */
.page-head{background:var(--tint); border-bottom:1px solid var(--line); padding:30px 0;}
.crumbs{font-size:13px; color:var(--steel-2); margin-bottom:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.crumbs a:hover{color:var(--blue);}
.crumbs .sep{color:var(--line-2);}
.page-head h1{font-size:clamp(26px,3.4vw,38px);}
.page-head p{margin-top:10px; color:var(--muted); max-width:620px; font-size:16px;}

/* helpers */
.hide{display:none !important;}
.flow > * + *{margin-top:16px;}
.center{text-align:center;}
.mt-0{margin-top:0;} .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.divider{height:1px; background:var(--line); border:none; margin:0;}

/* product photos (integration) */
.prod-card__media{position:relative}
.prod-card__media .prod-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.cart-row__media .prod-card__img{width:100%;height:100%;object-fit:contain;background:#fff;display:block;border-radius:inherit}