:root{
  color-scheme:light;
  --ground:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7f5f0;
  --ink:#2b1c0f;
  --ink-strong:#1a1108;
  --muted:#83705a;
  --line:#ece7db;
  --line-strong:#ddd4bd;
  --primary:#e2231a;
  --primary-hover:#b81811;
  --on-primary:#ffffff;
  --yellow:#ffd400;
  --yellow-hover:#f0c400;
  --yellow-ink:#b81811;
  --green:#27c16f;
  --green-hover:#1fad62;
  --on-green:#ffffff;
  --price:#c81c12;
  --panel:#201207;
  --on-panel:#fff6e0;
  --on-panel-soft:#e8cfa0;
  --on-panel-dim:#b6976a;
  --r-lg:24px;
  --r:18px;
  --r-sm:12px;
  --r-btn:10px;
  --shadow:0 18px 34px rgba(40,20,5,.10);
  --shadow-sm:0 8px 18px rgba(40,20,5,.09);
  --font:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important;}
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}
button,input,select,textarea{font-family:inherit;}
h1,h2,h3{color:var(--ink-strong);letter-spacing:-.01em;}
img{max-width:100%;}
[hidden]{display:none !important;}
.wrap{max-width:1220px;margin:0 auto;padding-inline:22px;}
@media (max-width:480px){.wrap{padding-inline:16px;}}

/* ---------- menú lateral (☰, estilo Grido) ---------- */
.menu-toggle{
  border:0;background:transparent;color:var(--ink);cursor:pointer;flex:none;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-btn);
}
.menu-toggle:hover{background:var(--surface-2);}
.side-menu-backdrop{
  position:fixed;inset:0;background:rgba(20,10,4,.55);z-index:95;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.side-menu-backdrop.show{opacity:1;pointer-events:auto;}
.side-menu{
  position:fixed;top:0;left:0;bottom:0;z-index:96;width:280px;max-width:82vw;
  background:var(--surface);box-shadow:14px 0 38px rgba(20,10,4,.3);
  transform:translateX(-100%);transition:transform .24s ease;
  display:flex;flex-direction:column;overflow-y:auto;
}
.side-menu.show{transform:translateX(0);}
.side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 4px;}
.side-menu-logo{height:38px;width:auto;}
.side-menu-close{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px;}
.side-menu-close:hover{color:var(--primary);}
.side-menu-greeting{font-size:19px;font-weight:700;color:var(--ink-strong);padding:10px 18px 16px;margin:0;}
.side-menu-nav{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.side-menu-item{
  padding:15px 18px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px;
  border-bottom:1px solid var(--line);
}
.side-menu-item:hover{background:var(--surface-2);color:var(--primary-hover);}

/* ---------- header ---------- */
header.site{background:var(--surface);position:sticky;top:0;z-index:40;box-shadow:0 2px 14px rgba(40,20,5,.08);}
.site-row{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap;}
/* Boceto de Marcos (2026-09-21): el nombre "CORRALÓN" arriba y el logo PMAT
   abajo, apilados y centrados — igual en PC y en celular. La leyenda
   "Materiales de construcción · Salta" queda en el HTML pero oculta, porque
   el boceto no la tiene y apilada quedaba nombre / leyenda / logo. */
.brand{display:flex;flex-direction:column;align-items:stretch;gap:5px;text-decoration:none;}
.brand-text{order:1;text-align:center;}
/* El logo toma el ancho del nombre (el más ancho de los dos manda): width:0 +
   min-width:100% hace que la imagen no ensanche la columna por su tamaño
   propio y se estire justo hasta el borde del texto, con su proporción. */
.brand-badge{order:2;width:0;min-width:100%;height:auto;flex:none;display:block;}
.wordmark{font-weight:800;font-size:20px;line-height:1.05;margin:0;color:var(--ink-strong);text-transform:uppercase;letter-spacing:.01em;}
.site-tag{display:none;}
nav.site-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;}
nav.site-nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink);padding:9px 13px;border-radius:var(--r-btn);}
nav.site-nav a:hover{color:var(--primary-hover);background:var(--surface-2);}
nav.site-nav a[aria-current="page"]{color:var(--primary-hover);background:var(--surface-2);font-weight:700;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:var(--r-btn);font-weight:600;font-size:15px;padding:13px 20px;
  text-decoration:none;cursor:pointer;
  box-shadow:0 2px 2px rgba(0,0,0,.09);transition:background-color .15s ease, box-shadow .15s ease;
}
.btn:hover{box-shadow:0 4px 10px rgba(0,0,0,.15);}
.btn-primary{background:var(--primary);color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-hover);}
.btn-green{background:var(--green);color:var(--on-green);}
.btn-green:hover{background:var(--green-hover);}
.btn-yellow{background:var(--yellow);color:var(--yellow-ink);}
.btn-yellow:hover{background:var(--yellow-hover);}
.btn-dark{background:var(--panel);color:var(--on-panel);}
.btn-dark:hover{filter:brightness(1.3);}
.btn-outline{background:transparent;color:var(--primary);box-shadow:none;border:2px solid var(--line-strong);padding:11px 18px;}
.btn-outline:hover{border-color:var(--primary);color:var(--primary-hover);box-shadow:none;background:var(--surface-2);}
.btn-sm{font-size:14px;padding:10px 15px;}
.btn-block{width:100%;}

.btn-cart-head{
  display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--on-green);border:0;
  border-radius:var(--r-btn);font-weight:600;font-size:14.5px;padding:11px 16px;cursor:pointer;
  box-shadow:0 2px 2px rgba(0,0,0,.09);
}
.btn-cart-head:hover{background:var(--green-hover);}

/* El header (sticky, siempre visible) se armó pensado en desktop: con 5
   links + el botón de carrito, en una pantalla angosta ".site-row" se
   parte en 3 filas (marca / nav en 2 líneas / botón) y terminaba ocupando
   más de la mitad de la pantalla de un celular, tapando casi todo el
   contenido de forma permanente (reportado 2026-09-14, confirmado
   midiendo con Playwright: ~470px de 844px de alto solo de header). Achica
   todo y pasa el nav a una sola fila con scroll horizontal en vez de
   wrappear, como ya hacía .chip-row con los rubros. */
@media (max-width:640px){
  .site-row{padding-block:8px;gap:8px;row-gap:6px;}
  .brand{gap:3px;flex:none;}
  .wordmark{font-size:14px;}
  nav.site-nav{
    order:3;flex-basis:100%;margin-left:0;flex-wrap:nowrap;
    overflow-x:auto;gap:2px;scrollbar-width:none;
  }
  nav.site-nav::-webkit-scrollbar{display:none;}
  nav.site-nav a{padding:5px 9px;font-size:12.5px;white-space:nowrap;flex:none;}
  .btn-cart-head{padding:7px 11px;font-size:12.5px;gap:6px;flex:none;margin-left:auto;}
}

/* ---------- carrusel de marcas ---------- */
.ticker-section{background:var(--surface);border-bottom:1px solid var(--line);padding-block:16px;overflow:hidden;}
.ticker-head{font-size:13.5px;color:var(--muted);margin:0 0 11px;}
.ticker-head strong{color:var(--ink);font-weight:700;}
.ticker-viewport{overflow:hidden;position:relative;}
.ticker-track{display:flex;gap:12px;width:max-content;animation:slide 40s linear infinite;}
.ticker-viewport:hover .ticker-track{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .ticker-viewport{overflow-x:auto;}
  .ticker-track{width:auto;}
}
.ticker-item{
  display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);flex:none;
  font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap;
}

/* ---------- hero ---------- */
.hero{background:var(--ground);padding-block:44px 40px;}
.hero-grid{display:grid;gap:30px;grid-template-columns:1fr;align-items:center;}
@media (min-width:940px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:46px;}}
.eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--primary-hover);margin:0 0 10px;}
.hero h1{font-size:clamp(31px,4.6vw,46px);line-height:1.1;margin:0;font-weight:700;text-wrap:balance;}
.hero-panel{background:var(--panel);border-radius:var(--r-lg);padding:26px;color:var(--on-panel-soft);box-shadow:0 24px 44px rgba(20,10,4,.32);}
.hero-panel h2{color:var(--on-panel);font-size:19px;margin:0 0 16px;font-weight:600;}
.hero-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.hero-panel li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--on-panel-soft);}
.hero-panel li b{display:block;color:var(--on-panel);font-size:16px;font-weight:600;}
.hero-panel .num{
  width:30px;height:30px;flex:none;border-radius:50%;background:rgba(255,255,255,.14);
  color:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}

/* ---------- quick actions ---------- */
.actions{padding-block:30px;}
.action-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));}
.action{
  background:var(--surface);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:9px;text-align:center;align-items:center;
}
.action .ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);margin-bottom:3px;}
.action.a-store .ico{color:var(--primary);}
.action.a-wa .ico{color:var(--green);}
.action.a-price .ico{color:var(--yellow-ink);}
.action.a-contact .ico{color:var(--on-panel);background:var(--panel);}
.action h3{font-size:18px;margin:0;font-weight:700;}
.action p{margin:0;color:var(--muted);font-size:14px;flex:1;}
.action .btn{margin-top:6px;width:100%;}

/* ---------- bands ---------- */
section.band{padding-block:44px;}
section.band.tint{background:var(--surface-2);}
.band-head{margin-bottom:26px;text-align:center;}
.band-head.left{text-align:left;}
.band-head h2{font-size:clamp(25px,3.6vw,34px);margin:0 0 10px;font-weight:700;line-height:1.15;}
.band-head p{margin:0 auto;color:var(--muted);max-width:66ch;font-size:15.5px;}
.band-head.left p{margin-inline:0;}

/* ---------- pegá tu lista ---------- */
.paste-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px;display:grid;gap:16px;}
@media (min-width:840px){.paste-card{grid-template-columns:1.35fr .65fr;gap:24px;align-items:start;}}
.paste-card textarea{
  width:100%;min-height:130px;resize:vertical;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--ground);color:var(--ink);padding:13px 14px;font-size:15px;line-height:1.6;
}
.paste-side{display:flex;flex-direction:column;gap:12px;}
.paste-side p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55;}
.paste-result{font-size:14px;border-radius:var(--r-sm);padding:13px 14px;background:var(--surface-2);border:1px solid var(--line);}
.paste-result b{color:var(--green-hover);}
.paste-result ul{margin:7px 0 0;padding-left:19px;color:var(--muted);font-size:13.5px;}

/* ---------- catálogo ---------- */
.catalog-layout{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;}
/* Sin esto, el ancho automático de una celda de grid es el de su CONTENIDO,
   no el de la celda — y el .chip-row de abajo (8 rubros en una fila que no
   puede partirse) fuerza esta columna a ~1272px en vez de los ~796px que le
   tocan, empujando el carrito afuera de la pantalla (bug real 2026-09-14,
   confirmado midiendo el layout con Playwright). min-width:0 deja que la
   celda respete el ancho del grid y que overflow-x:auto de .chip-row haga
   lo suyo (scroll horizontal interno) en vez de estirar todo lo de afuera. */
.catalog-main{min-width:0;}
.controls{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.search-box{
  display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-btn);padding:13px 16px;box-shadow:var(--shadow-sm);
}
.search-box svg{flex:none;color:var(--muted);}
.search-box input{border:0;background:transparent;outline:0;font-size:16px;color:var(--ink);width:100%;}
.search-box input::placeholder{color:var(--muted);}
.chip-row{display:flex;gap:9px;overflow-x:auto;padding-block:3px 5px;scrollbar-width:thin;}
.chip{
  flex:none;font-weight:500;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:999px;padding:9px 17px;cursor:pointer;white-space:nowrap;
}
.chip:hover{border-color:var(--primary);color:var(--primary-hover);}
.chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}

.cat-section{margin-bottom:32px;}
.cat-section h3{font-size:21px;margin:0 0 15px;font-weight:700;display:flex;align-items:baseline;gap:11px;}
.cat-section h3 small{font-weight:500;font-size:13px;color:var(--muted);}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:16px;}
.empty-state{
  color:var(--muted);background:var(--surface);border-radius:var(--r);
  padding:38px 22px;text-align:center;font-size:15px;box-shadow:var(--shadow-sm);
}

.item{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .14s ease, border-color .14s ease;
}
.item:hover{box-shadow:var(--shadow);}
.item.in-cart{border-color:var(--primary);}
.item-photo{
  aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;color:#d8c6a8;
}
.item-photo img{width:100%;height:100%;object-fit:contain;padding:10px;}
.item-flag{
  position:absolute;top:11px;left:11px;background:var(--primary);color:var(--yellow);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;box-shadow:0 3px 8px rgba(20,10,4,.24);
}
.item-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:5px;flex:1;}
.item-desc{font-weight:600;font-size:14.5px;line-height:1.35;margin:0;color:var(--ink-strong);}
.item-unit{font-size:12.5px;color:var(--muted);margin:0;}
.price{color:var(--price);font-size:20px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;margin-top:4px;}
.item-actions{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:9px;}
.item-actions .stepper{flex:1;}
.item-quit{
  border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;
  text-decoration:underline;padding:0 2px;
}
.item-quit:hover{color:var(--price);}
.stepper{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-btn);overflow:hidden;background:var(--surface);}
.stepper button{flex:none;width:34px;height:36px;border:0;background:var(--surface-2);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;font-weight:600;}
.stepper button:hover{background:var(--primary);color:var(--on-primary);}
.stepper input{
  flex:1;width:100%;min-width:38px;height:36px;border:0;border-inline:1px solid var(--line);text-align:center;
  font-size:14.5px;font-weight:600;background:var(--surface);color:var(--ink);-moz-appearance:textfield;
  font-variant-numeric:tabular-nums;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Catálogo en celular: con minmax(224px,1fr) entraba 1 sola tarjeta por fila
   en casi cualquier teléfono (224*2+gap > cualquier ancho de pantalla real),
   cada una ocupando toda la pantalla — mucho scroll para encontrar algo.
   Fuerza 2 columnas y achica todo proporcional para que entren más de un
   vistazo (2026-09-29, a pedido de Marcos). */
@media (max-width:480px){
  .item-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .item-body{padding:9px 10px 10px;gap:3px;}
  .item-desc{
    font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;min-height:2.2em;
  }
  .item-unit{font-size:10.5px;}
  .price{font-size:16px;margin-top:2px;}
  .item-actions{padding-top:7px;}
  .item-actions .stepper button{width:26px;height:28px;font-size:14px;}
  .item-actions .stepper input{height:28px;font-size:12px;min-width:24px;}
  .item-quit{font-size:11px;}
  .item-flag{font-size:9.5px;padding:3px 7px;top:7px;left:7px;}
}

/* ---------- calculadoras ---------- */
.calc-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.calc{background:var(--surface);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);}
.calc h3{font-size:21px;margin:0;font-weight:700;}
.calc-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.field{display:flex;flex-direction:column;gap:5px;flex:1 1 130px;}
.field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.field input,.field select{
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--ground);
  color:var(--ink);padding:11px 12px;font-size:15px;
}
.calc-out{background:var(--surface-2);border-radius:var(--r-sm);padding:14px;font-size:15px;display:flex;flex-direction:column;gap:5px;}
.calc-out b{font-weight:700;color:var(--ink-strong);font-variant-numeric:tabular-nums;}
.calc-out .sub{color:var(--muted);font-size:13.5px;}
.calc-out .sub b{color:var(--price);font-weight:700;}
.calc small{font-size:12.5px;color:var(--muted);line-height:1.5;}

/* ---------- ubicación ---------- */
.location-card{
  display:grid;grid-template-columns:1fr;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:44px;
}
@media (min-width:760px){.location-card{grid-template-columns:1fr 1.3fr;}}
.location-info{padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.location-info h3{font-size:21px;margin:0;font-weight:700;}
.location-info p{margin:0 0 10px;color:var(--muted);font-size:15px;}
.location-map{display:block;min-height:220px;background:var(--surface-2);position:relative;overflow:hidden;}
.location-map img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block;transition:transform .25s ease;}
.location-map:hover img{transform:scale(1.04);}

/* ---------- info ---------- */
.info-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));}
.info{background:var(--surface);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);}
.info .ico{width:48px;height:48px;border-radius:50%;background:var(--surface-2);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.info h3{font-size:19px;margin:0 0 10px;font-weight:700;}
.info ul{margin:0;padding-left:19px;color:var(--muted);font-size:14.5px;display:flex;flex-direction:column;gap:6px;}

.brands{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.brands span{
  font-size:13.5px;font-weight:600;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;box-shadow:var(--shadow-sm);
}

.faq-wrap{max-width:820px;margin:0 auto;}
details.faq{background:var(--surface);border-radius:var(--r);margin-bottom:11px;box-shadow:var(--shadow-sm);overflow:hidden;}
details.faq summary{
  cursor:pointer;font-weight:600;font-size:16px;list-style:none;padding:17px 20px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--ink-strong);
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";color:var(--primary);font-size:22px;font-weight:600;line-height:1;}
details.faq[open] summary::after{content:"–";}
details.faq p{margin:0;padding:0 20px 18px;color:var(--muted);font-size:14.5px;}

/* ---------- cart (panel lateral derecho, 2026-09-14) ----------
   El carrito no tiene presencia fija en la página — está totalmente afuera
   de la pantalla (a la derecha) hasta que se abre desde "Mi pedido" en el
   header (que sí queda fijo arriba, header.site ya es sticky). Al abrirse
   ocupa toda la altura pegado al borde derecho, con un fondo (.cart-backdrop)
   que bloquea el resto — mismo comportamiento en celular y en desktop. */
#cartPanel{
  background:var(--surface);box-shadow:-14px 0 38px rgba(20,10,4,.3);
  display:flex;flex-direction:column;overflow:hidden;
  position:fixed;top:0;right:0;bottom:0;z-index:60;width:100%;max-width:420px;
  transform:translateX(100%);
  transition:transform .24s ease;
}
#cartPanel.expanded{transform:translateX(0);}
.cart-backdrop{
  position:fixed;inset:0;background:rgba(20,10,4,.55);z-index:55;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.cart-backdrop.show{opacity:1;pointer-events:auto;}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;gap:10px;background:var(--panel);color:var(--on-panel);cursor:pointer;}
.cart-head h2{font-size:19px;margin:0;font-weight:700;color:var(--on-panel);}
.cart-count{font-size:13px;color:var(--on-panel-soft);}
#cartToggle{border:0;background:transparent;color:var(--on-panel);width:32px;height:32px;cursor:pointer;flex:none;}
#cartToggle svg{transition:transform .2s ease;}
.cart-scroll{overflow-y:auto;flex:1;}
.cart-items{list-style:none;margin:0;padding:6px 20px;}
.cart-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);}
.cart-line-main{flex:1;min-width:0;}
.cart-line-stepper{margin-top:8px;max-width:128px;}
.cart-line-stepper button{width:30px;height:32px;font-size:16px;}
.cart-line-stepper input{height:32px;font-size:13.5px;}
.ubicacion-row{display:flex;flex-direction:column;gap:8px;}
.cart-line:last-child{border-bottom:0;}
.cart-line-desc{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink-strong);}
.cart-line-meta{font-size:12.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;}
.cart-line-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;}
.cart-line-total{color:var(--price);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;}
.cart-remove{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12.5px;text-decoration:underline;padding:0;}
.cart-remove:hover{color:var(--price);}
.cart-empty{padding:30px 20px 32px;text-align:center;color:var(--muted);font-size:14.5px;}
.cart-form{padding:15px 20px 6px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);}
.envio-fields{display:flex;flex-direction:column;gap:12px;}
.cart-form .field{flex:none;}
.radio-row{display:flex;gap:9px;}
.radio-pill{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;position:relative;
  border:2px solid var(--line-strong);border-radius:var(--r-btn);padding:10px 8px;
  font-size:14px;font-weight:600;cursor:pointer;color:var(--muted);
}
.radio-pill input{position:absolute;opacity:0;width:0;height:0;}
.radio-pill.sel{background:var(--surface-2);border-color:var(--primary);color:var(--primary-hover);}
.field-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 -4px;}
.pago-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:-4px 0 0;}
.check-row{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;}
.check-row input{width:18px;height:18px;flex:none;accent-color:var(--primary);}
.cart-foot{border-top:1px solid var(--line);padding:10px 20px 12px;display:flex;flex-direction:column;gap:8px;}
.cart-total-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;}
.cart-total-row span{font-size:13px;color:var(--ink-strong);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.cart-total-row strong{color:var(--price);font-size:30px;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums;}
.wa-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:var(--on-green);border:0;
  border-radius:var(--r-btn);font-weight:700;font-size:15px;padding:11px 16px;text-decoration:none;
  cursor:pointer;box-shadow:0 2px 2px rgba(0,0,0,.09);
}
.wa-btn:hover{background:var(--green-hover);box-shadow:0 4px 12px rgba(39,193,111,.34);}
.wa-btn[aria-disabled="true"]{pointer-events:none;opacity:.45;}
.cart-note{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.3;margin:0;}
.cart-validation{font-size:12px;color:var(--price);text-align:center;line-height:1.35;margin:0;font-weight:600;}
.field label .req{color:var(--price);}
.cart-title-row{display:flex;align-items:center;gap:12px;}
.cart-clear{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  border:1.5px solid var(--yellow);background:transparent;color:var(--yellow);
  border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:700;font-family:inherit;
}
.cart-clear[hidden]{display:none;}
.cart-clear:hover{background:var(--yellow);color:var(--panel);}

/* ---------- botón flotante de WhatsApp ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:50;
  width:56px;height:56px;border-radius:50%;
  background:var(--green);color:var(--on-green);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(20,10,4,.28);
  transition:background-color .15s ease, transform .15s ease;
}
.wa-float:hover{background:var(--green-hover);transform:scale(1.06);}
@media (max-width:640px){.wa-float{right:14px;bottom:14px;width:50px;height:50px;}}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(18px);bottom:96px;z-index:70;
  background:var(--panel);color:var(--on-panel);padding:13px 20px;border-radius:var(--r-btn);
  font-size:14.5px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;box-shadow:0 14px 30px rgba(20,10,4,.4);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

footer.site-footer{background:var(--panel);color:var(--on-panel-soft);padding-block:34px 28px;font-size:14px;line-height:1.7;}
footer.site-footer strong{color:var(--on-panel);display:block;margin-bottom:5px;font-size:15px;}
.foot-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.foot-logo{height:40px;width:auto;display:block;margin-bottom:12px;}
.foot-bottom{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);font-size:12.5px;color:var(--on-panel-dim);}

/* ---------- Mi cuenta ---------- */
.cuenta-sub{font-size:15px;font-weight:700;color:var(--ink-strong);margin:30px 0 12px;}
.cuenta-sub:first-of-type{margin-top:0;}
.empty-state{color:var(--muted);font-size:14px;line-height:1.6;padding:4px 0 16px;}
.obra-card,.pedido-card{
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;
}
.obra-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.obra-meta{font-size:12.5px;color:var(--muted);margin-top:2px;}
.obra-form{
  border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:12px;
  display:flex;flex-direction:column;gap:12px;
}
.datos-form{
  border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:12px;background:var(--surface-2);
}
.datos-note{font-size:12px;color:var(--muted);margin:0;line-height:1.5;}
.obra-form-actions{display:flex;gap:10px;}
.cuenta-links{display:flex;flex-direction:column;gap:0;margin-bottom:8px;}
.cuenta-links a{
  padding:13px 2px;border-bottom:1px solid var(--line);color:var(--ink);
  text-decoration:none;font-weight:600;font-size:14.5px;
}
.cuenta-links a:last-child{border-bottom:0;}
.cuenta-links a:hover{color:var(--primary-hover);}
.pedido-card-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-bottom:4px;}
.pedido-estado{
  background:var(--surface-2);color:var(--muted);padding:2px 9px;border-radius:999px;
  font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;flex:none;
}
.pedido-card .btn{margin-top:10px;}

/* ---------- aviso "instalar app" ---------- */
.install-banner{
  position:fixed;left:12px;right:12px;bottom:20px;z-index:45;max-width:480px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
  background:var(--panel);color:var(--on-panel);
  padding:14px 16px;border-radius:var(--r);box-shadow:var(--shadow);
}
.install-banner p{margin:0;flex:1;font-size:13.5px;line-height:1.5;}
.install-banner .btn{flex:none;}
.install-close{
  border:0;background:transparent;color:var(--on-panel-dim);cursor:pointer;flex:none;
  width:24px;height:24px;font-size:20px;line-height:1;padding:0;
}
.install-close:hover{color:var(--on-panel);}

/* ---------- pantalla de bienvenida (solo la primera vez) ---------- */
.welcome-screen{
  position:fixed;inset:0;z-index:100;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:32px;text-align:center;
}
.welcome-logo{width:140px;height:auto;margin-bottom:10px;}
.welcome-screen h1{font-size:26px;margin:0;color:var(--ink-strong);}
.welcome-screen p{font-size:15px;color:var(--muted);margin:0 0 14px;max-width:320px;line-height:1.5;}
.welcome-screen .btn{max-width:280px;}

/* ---------- ficha de producto a pantalla completa ---------- */
.product-sheet{
  position:fixed;inset:0;z-index:90;background:var(--surface);overflow-y:auto;
}
.product-sheet-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:0;background:var(--surface);
  box-shadow:var(--shadow-sm);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.product-sheet-close:hover{color:var(--primary);}
.product-sheet-photo{
  aspect-ratio:1;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;color:#d8c6a8;
}
.product-sheet-photo img{width:100%;height:100%;object-fit:contain;padding:30px;}
.product-sheet-body{padding:22px 20px 32px;max-width:480px;margin:0 auto;}
.product-sheet-desc{font-size:21px;font-weight:700;color:var(--ink-strong);margin:0;line-height:1.3;}
.product-sheet-price{display:block;font-size:30px;margin-top:6px;}
.product-sheet-actions{margin-top:20px;display:flex;align-items:center;gap:12px;}
.product-sheet-actions .stepper{flex:1;}
.product-sheet-actions .stepper button{width:52px;height:54px;font-size:23px;}
.product-sheet-actions .stepper input{font-size:18px;height:54px;}
.product-sheet-actions .btn{flex:1;padding:17px;font-size:16px;}

/* ---------- llevá también (carrito) ---------- */
.sugeridos-wrap{padding:14px 20px 6px;border-top:1px solid var(--line);}
.sug-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px;}
.sug-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin:0 -20px;padding-inline:20px;}
.sug-card{
  flex:0 0 118px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:8px;text-align:left;cursor:pointer;position:relative;
}
.sug-card:hover{border-color:var(--primary);}
.sug-photo{aspect-ratio:1;background:#fff;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#d8c6a8;margin-bottom:7px;}
.sug-photo img{width:100%;height:100%;object-fit:contain;padding:6px;}
.sug-desc{display:block;font-size:12px;font-weight:600;color:var(--ink-strong);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.sug-price{display:block;color:var(--price);font-size:13px;font-weight:700;margin-top:3px;}
.sug-add{
  position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  background:var(--primary);color:var(--on-primary);font-size:15px;font-weight:700;line-height:22px;text-align:center;
}
.chip small{font-size:11.5px;opacity:.7;margin-left:3px;font-weight:500;}