/* Estilos del sitio. La referencia de UI es docs/prototipo.html.
Sin build step: esto se edita a mano y se sube. */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--marble);color:var(--ink);
font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--noir);color:var(--paper);
padding:12px 18px;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* ---------- estructura ---------- */
.site-main,.wrap{max-width:520px;margin:0 auto}
@media(min-width:900px){.site-main,.wrap{max-width:900px}}
.site-main{background:var(--paper);min-height:70vh;box-shadow:0 0 60px rgba(0,0,0,.06)}
.wrap{padding:var(--sp-4) var(--sp-3) 0}
.site-head{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--sp-2);
padding:var(--sp-3);background:var(--paper);border-bottom:1px solid var(--rule);
max-width:520px;margin:0 auto}
@media(min-width:900px){.site-head{max-width:900px}}
.head-spacer{flex:1}
.mark{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.mark-word{font-family:var(--display);font-size:23px;color:var(--noir);text-decoration:none}
/* Logotipo. Alto fijo y ancho automático: el archivo puede cambiar de
proporción sin romper la altura del header. El alt del ![]()
ya dice la
marca, así que el texto de al lado no lo repite.
El alto sale de una variable para poder ajustarlo en UN solo lugar: es lo
único que se toca si el logo se ve grande o chico. */
:root{--logo-h:30px;--logo-h-foot:40px}
@media(min-width:1040px){:root{--logo-h:36px}}
.mark-logo{height:var(--logo-h);width:auto;display:block}
.foot-logo{height:var(--logo-h-foot);width:auto;display:block}
.mark-desc{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-dk);
font-weight:700;margin-top:4px}
/* ---------- switch de idioma ----------
Misma escala que .mark-desc y .hc-l: es una etiqueta del header, no un
control. 9px con letter-spacing lee como versalita y no compite con la
marca. El activo va en brass-dk y NO en brass: a este tamaño brass da
3.5:1 sobre paper y no pasa AA (ver tokens.css). */
.lang-sw{display:flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.2em;
text-transform:uppercase;font-weight:700;margin-right:var(--sp-2)}
.lang-sw a{text-decoration:none;color:var(--soft);padding:5px 2px;
border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.lang-sw a:hover{color:var(--noir)}
.lang-sw a.on{color:var(--brass-dk);border-bottom-color:var(--brass)}
.lang-sw .sep{color:var(--rule)}
.cart-btn{display:none;align-items:center;gap:8px;text-decoration:none;
border:1px solid var(--noir);background:var(--noir);color:#F1EDE6;
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:10px 13px}
.cart-btn.on{display:flex}
.cart-btn .n{background:var(--brass);border-radius:9px;padding:1px 7px;font-size:10px}
/* ---------- tipografía ---------- */
.kicker{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-dk);
font-weight:700;margin:0}
h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,7vw,42px);line-height:1.05;
margin:.1em 0 .35em;color:var(--noir)}
h2{font-family:var(--display);font-weight:400;font-size:24px;margin:var(--sp-5) 0 var(--sp-2);color:var(--noir)}
p{margin:0 0 var(--sp-2);font-size:15px}
.muted{color:var(--soft);font-size:13.5px}
.lead{font-size:15px;margin-top:var(--sp-2)}
.note{font-size:11.5px;color:var(--soft);line-height:1.5;margin-top:var(--sp-2)}
.opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--soft)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
/* ---------- puertas del home ---------- */
.doors{display:grid;gap:10px;margin-top:var(--sp-4)}
@media(min-width:700px){.doors{grid-template-columns:1fr 1fr}}
.door{display:flex;align-items:center;gap:14px;text-decoration:none;
background:#fff;border:1px solid var(--rule);padding:17px 16px;transition:border-color .15s}
.door:hover{border-color:var(--noir)}
.door-tx{flex:1}
.door-t1{display:block;font-family:var(--display);font-size:19px;color:var(--noir);line-height:1.1}
.door-t2{display:block;font-size:11.5px;color:var(--soft);margin-top:3px}
.door-ar{color:var(--brass);font-size:18px}
/* ---------- filtros y búsqueda ---------- */
.filters{display:flex;gap:7px;overflow-x:auto;margin:var(--sp-3) 0 0;scrollbar-width:none;
padding-bottom:4px}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;text-decoration:none;background:none;border:1px solid var(--rule);color:var(--soft);
font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:9px 13px;
white-space:nowrap}
.chip[aria-current="true"]{background:var(--noir);border-color:var(--noir);color:var(--paper)}
.searchform{display:flex;gap:7px;margin-top:10px}
.search{flex:1;padding:12px 13px;border:1px solid var(--rule);background:#fff;font-size:14.5px}
.search:focus{outline:2px solid var(--brass);outline-offset:-2px}
.search-go{border:1px solid var(--rule);background:#fff;cursor:pointer;padding:0 14px;
font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--soft)}
/* ---------- grilla de producto ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:var(--sp-3)}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--rule);text-decoration:none;display:flex;flex-direction:column;
transition:border-color .15s}
.card:hover{border-color:var(--noir)}
.card-thumb{height:112px;background:linear-gradient(#FCFCFB,#F2F1ED);border-bottom:1px solid var(--rule);
display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-thumb img{height:100%;width:100%;object-fit:cover}
.thumb-placeholder{width:26px;height:56px;background:var(--brass-lt);border-radius:2px 2px 1px 1px;
position:relative}
.thumb-placeholder::before{content:"";position:absolute;top:-8px;left:8px;width:10px;height:8px;
background:#B4A98F;border-radius:1px}
.thumb-placeholder.big{width:44px;height:96px}
.card-body{padding:12px;display:flex;flex-direction:column;flex:1}
.card-name{font-family:var(--display);font-size:16px;line-height:1.15;color:var(--noir);text-decoration:none}
.card-benefit{font-size:11.5px;color:var(--soft);margin-top:5px;flex:1}
.card-price{font-family:var(--display);font-size:21px;color:var(--noir);margin-top:10px}
.card-price small{display:block;font-family:var(--body);font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--brass-dk);font-weight:700;margin-bottom:2px}
.card-out{font-size:11px;color:var(--soft);margin:10px 0 0}
.badge{font-size:9px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-top:8px;
display:inline-block}
.badge.in{color:var(--ok)}.badge.low{color:var(--warn)}.badge.out{color:var(--soft)}
/* ---------- ficha ---------- */
.hero{background:linear-gradient(#FCFCFB,#EEEDE9);border:1px solid var(--rule);min-height:190px;
display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:var(--sp-3)}
.hero img{max-height:320px;width:auto}
.pricebox{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
border-top:1px solid var(--noir);border-bottom:1px solid var(--rule);padding:16px 0;margin:var(--sp-4) 0}
.pricebox-big{font-family:var(--display);font-size:40px;line-height:1;color:var(--noir)}
.pricebox-lb{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-dk);font-weight:700}
.pricebox-alt{font-size:11.5px;color:var(--soft);margin-top:6px}
.use{background:var(--brass-wash);border-left:2px solid var(--brass);padding:15px 17px;
font-size:14px;margin:var(--sp-3) 0}
.use b{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--brass-dk);margin-bottom:6px}
.use.ok{background:#EDF3EE;border-left-color:var(--ok)}
.use.ok b{color:var(--ok)}
.warn-block{background:var(--brass-wash);border-left:2px solid var(--brass);padding:12px 14px;
font-size:12.5px;margin-top:var(--sp-3)}
.notice{background:var(--brass-wash);border-left:2px solid var(--brass);padding:12px 14px;
font-size:13px;margin:var(--sp-3) 0}
/* ---------- botones ---------- */
.btn{display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;
border:1px solid var(--noir);background:var(--noir);color:var(--paper);
font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
padding:16px 18px;margin-top:var(--sp-2);transition:background .15s}
.btn:hover{background:#000}
.btn.ghost{background:none;color:var(--noir)}
.btn.ghost:hover{background:var(--marble)}
.btn.gold{background:var(--brass);border-color:var(--brass);color:#fff}
.btn.gold:hover{background:var(--brass-dk)}
.btn:disabled{opacity:.4;cursor:default}
.btn.small{width:auto;display:inline-block;padding:11px 16px;margin:0}
.mini{display:inline-block;cursor:pointer;border:1px solid var(--brass);background:none;
color:var(--brass-dk);text-decoration:none;font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;font-weight:700;padding:9px 12px}
.mini:hover{background:var(--brass-wash)}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--soft);
font-size:11.5px;text-decoration:underline}
.linkbtn:hover{color:var(--noir)}
.danger-link{color:var(--red)}
.leave{margin-top:var(--sp-5);text-align:center}
/* ---------- listas de servicios ---------- */
.list{border-top:1px solid var(--rule);margin-top:var(--sp-3)}
.row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
padding:14px 0;border-bottom:1px solid var(--rule)}
.row-n1{font-size:15px;color:var(--noir);font-weight:500}
.row-n2{font-size:11.5px;color:var(--soft);margin-top:2px}
.row-pz{font-family:var(--display);font-size:19px;color:var(--brass-dk);white-space:nowrap}
.row-pz.small{font-size:14px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--sp-3)}
@media(min-width:700px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0}
.gallery figcaption{font-size:11px;color:var(--soft);margin-top:5px}
/* ---------- clases ---------- */
.clase{background:#fff;border:1px solid var(--rule);padding:20px 18px;margin-top:var(--sp-3)}
.clase-dt{font-family:var(--display);font-size:22px;color:var(--noir);line-height:1.15;margin:0}
.clase-mt{font-size:11.5px;color:var(--soft);margin-top:7px}
.seats{display:inline-block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
border:1px solid var(--brass);color:var(--brass-dk);padding:5px 10px;margin-top:var(--sp-2)}
.seats.full{border-color:var(--red);color:var(--red)}
/* ---------- formularios ---------- */
.form{margin-top:var(--sp-3)}
.field{margin-top:13px}
.field label,.field legend{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--soft);font-weight:700;margin-bottom:5px;padding:0}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--rule);
background:#fff;font-size:15px}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:-2px}
.field input[readonly]{background:var(--marble);color:var(--soft)}
.field.err input,.field.err select{border-color:var(--red)}
.msg{font-size:11.5px;color:var(--red);margin-top:5px}
.msg.block{background:#FBEDED;border-left:2px solid var(--red);padding:11px 13px;margin-bottom:var(--sp-3)}
fieldset.field{border:0;margin-left:0;margin-right:0;padding:0}
.radio,.check{display:block;font-size:14px;color:var(--ink);margin-top:8px;font-weight:400;
letter-spacing:0;text-transform:none}
.radio input,.check input{width:auto;margin-right:8px}
.checks{margin-top:var(--sp-3)}
/* ---------- carrito ---------- */
.last-order{margin-top:8px}
.gate{background:var(--noir);color:#DDD6CA;padding:18px;margin-bottom:var(--sp-3)}
.gate-g1{font-family:var(--display);font-size:20px;color:#F1EDE6}
.gate-g2{font-size:12px;color:#9E958A;margin-top:6px}
.gate-g3{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt);
font-weight:700;margin-top:12px}
.qty-add{display:flex;align-items:center;gap:9px;margin-top:11px;flex-wrap:wrap}
.step{display:flex;border:1px solid var(--rule);background:#fff}
.step button{background:none;border:0;cursor:pointer;width:34px;height:34px;font-size:17px;color:var(--noir)}
.step button:disabled{opacity:.3;cursor:default}
.step .q{width:44px;text-align:center;border:0;border-left:1px solid var(--rule);
border-right:1px solid var(--rule);font-weight:600;font-size:14px;padding:0;
-moz-appearance:textfield;appearance:textfield}
.step .q::-webkit-outer-spin-button,.step .q::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
span.q{display:flex;align-items:center;justify-content:center;height:34px}
.cart-list{margin-top:var(--sp-3)}
.ci{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
padding:13px 0;border-bottom:1px solid var(--rule)}
.ci-main{flex:1}
.ci-name{font-size:14px;color:var(--noir);font-weight:500;text-decoration:none}
.ci-price{font-size:11.5px;color:var(--soft);margin-top:2px}
.qtyrow{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
.ci-total{font-family:var(--display);font-size:17px;color:var(--noir);white-space:nowrap}
.total{display:flex;justify-content:space-between;align-items:baseline;
padding:16px 0 4px;border-top:1px solid var(--noir);margin-top:6px}
.total-l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);font-weight:700}
.total-v{font-family:var(--display);font-size:32px;color:var(--noir)}
.wa-preview{background:#fff;border:1px solid var(--rule);padding:15px 16px;font-size:13px;
white-space:pre-wrap;line-height:1.55;margin:var(--sp-3) 0}
/* ---------- estados vacíos y CTA ---------- */
.empty{padding:var(--sp-4) 0}
.cta-block{border-top:1px solid var(--rule);margin-top:var(--sp-5);padding-top:var(--sp-4)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:var(--sp-4)}
.pager-n{font-size:11.5px;color:var(--soft)}
/* ---------- barra inferior ---------- */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1fr;
max-width:520px;margin:0 auto;border-top:1px solid var(--rule);background:var(--paper)}
@media(min-width:900px){.bottom-bar{max-width:900px}}
.bottom-bar a{text-decoration:none;text-align:center;padding:17px 10px;border-right:1px solid var(--rule);
font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--noir)}
.bottom-bar a:last-child{border-right:0}
.bottom-bar a span{display:block;font-family:var(--display);font-size:15px;letter-spacing:0;
text-transform:none;color:var(--brass-dk);margin-top:3px;font-weight:400}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:95;
background:var(--noir);color:#F1EDE6;padding:13px 20px;font-size:12.5px;opacity:0;
transition:opacity .22s,transform .22s;pointer-events:none;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* =============================================================
Portada, fotografía y bloque local — pasada mobile
Base 390px. Techo 768px: acá no hay reglas de desktop.
============================================================= */
/* ---------- banda de portada ---------- */
.band{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
min-height:420px;height:62vh;padding:var(--sp-5) var(--sp-3) var(--sp-4);
background:var(--noir);overflow:hidden}
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* El degradado va siempre, con foto o sin ella: el contraste del texto no
puede depender de qué imagen se termine cargando. */
.band-veil{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(22,19,15,.30) 0%,rgba(22,19,15,.62) 46%,rgba(22,19,15,.94) 100%)}
.band-plain .band-veil{background:none}
.band-tx{position:relative}
.band-eyebrow{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
color:var(--brass-lt);margin:0 0 var(--sp-2)}
.band-h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,9vw,46px);line-height:1.02;
color:var(--paper);margin:0}
.band-sub{color:#DDD6CA;font-size:14.5px;margin:var(--sp-2) 0 0;max-width:32ch}
.band-cta{margin-top:var(--sp-3);background:var(--paper);border-color:var(--paper);color:var(--noir)}
.band-cta:hover{background:#fff;border-color:#fff}
.band-cta.ghost-on-dark{background:none;color:var(--paper)}
.band-cta.ghost-on-dark:hover{background:rgba(250,250,248,.12)}
.band-pending{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
color:var(--brass-lt);margin:var(--sp-3) 0 0;opacity:.85}
/* ---------- imagen con proporción reservada ---------- */
.media{position:relative;display:block;width:100%;background:var(--marble);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;display:block}
/* Placeholder explícito. Nunca banco de imágenes: si falta la foto, se dice. */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-3);
background:repeating-linear-gradient(45deg,#EDEEEB,#EDEEEB 9px,#E5E6E2 9px,#E5E6E2 18px)}
.ph b{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
color:var(--brass-dp);font-weight:700;margin-bottom:5px}
.ph span{font-size:11.5px;line-height:1.45;color:var(--soft);max-width:26ch}
/* Version compacta para la tarjeta del catalogo, donde no entra el brief. */
.ph-sm{width:100%;height:100%}
.ph-sm b{font-size:8px;letter-spacing:.16em;margin:0}
/* ---------- puertas del home con foto ---------- */
@media(max-width:767px){.doors{grid-template-columns:1fr}}
.door{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.door .media{border-bottom:1px solid var(--rule)}
.door-body{display:flex;align-items:center;gap:14px;padding:15px 16px}
.door-tx{flex:1}
/* ---------- prueba social ---------- */
.proof{margin-top:var(--sp-5);border-top:1px solid var(--rule);padding-top:var(--sp-4)}
.proof-t{font-family:var(--display);font-size:22px;color:var(--noir);margin:0 0 var(--sp-2)}
.proof-empty{font-size:12.5px;color:var(--soft);line-height:1.5}
/* ---------- dónde estamos ---------- */
.local{margin-top:var(--sp-5);border-top:1px solid var(--noir);padding-top:var(--sp-4)}
.local-t{font-family:var(--display);font-size:22px;color:var(--noir);margin:0 0 var(--sp-3)}
.local-rows{display:grid;gap:var(--sp-3)}
.local-row{border-bottom:1px solid var(--rule);padding-bottom:var(--sp-3)}
.local-row:last-child{border-bottom:0;padding-bottom:0}
.local-lb{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
color:var(--brass-dk);margin:0 0 6px}
.local-v{font-size:14.5px;color:var(--ink);margin:0}
.local-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;
font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--brass-dk);text-decoration:none}
.local-a:hover{color:var(--noir)}
.local-tel{font-family:var(--display);font-size:24px;color:var(--noir);text-decoration:none;
display:inline-flex;align-items:center;min-height:44px}
.local-n{font-size:11.5px;color:var(--soft);margin:4px 0 0}
.local-hours{margin:0;display:grid;gap:5px}
.local-hours div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.local-hours dt{color:var(--soft)}
.local-hours dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
/* ---------- filas de servicio ---------- */
.row-pz{font-variant-numeric:tabular-nums}
.row-meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
color:var(--soft);margin-top:3px}
.row-cta{display:inline-flex;align-items:center;min-height:44px;
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--brass-dk);text-decoration:none}
.row-cta:hover{color:var(--noir)}
/* ---------- disponibilidad (barber) ---------- */
.avail{background:var(--noir);color:#DDD6CA;padding:16px 17px;margin-top:var(--sp-3)}
.avail-t{font-family:var(--display);font-size:21px;color:#F1EDE6;margin:0}
.avail-n{font-size:12.5px;color:#9E958A;margin:6px 0 0}
.avail-h{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
color:var(--brass-lt);margin:var(--sp-2) 0 0}
/* ---------- mosaico (nails) ---------- */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--sp-3)}
.mosaic figure{margin:0}
.mosaic figcaption{font-size:11px;color:var(--soft);margin-top:5px}
/* ---------- antes / después (salon) ---------- */
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--sp-3)}
.beforeafter figure{margin:0}
.beforeafter figcaption{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
font-weight:700;color:var(--brass-dk);margin-top:6px}
/* ---------- marcas distribuidas ---------- */
.seal{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brass);
color:var(--brass-dk);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
font-weight:700;padding:8px 12px;margin-top:var(--sp-3)}
.brands{display:flex;gap:10px;overflow-x:auto;margin-top:var(--sp-3);padding-bottom:6px;
scrollbar-width:none}
.brands::-webkit-scrollbar{display:none}
.brand{flex:none;display:flex;align-items:center;justify-content:center;text-align:center;
min-width:118px;min-height:64px;padding:10px 14px;background:#fff;border:1px solid var(--rule);
font-family:var(--display);font-size:16px;color:var(--noir);line-height:1.15}
.brand img{max-height:38px;width:auto}
.brand-x{border-color:var(--brass)}
.brands-empty{font-size:12.5px;color:var(--soft);margin-top:var(--sp-2)}
/* ---------- franja de mayoreo ---------- */
.wholesale-strip{background:var(--noir);color:#DDD6CA;padding:20px 18px;margin:var(--sp-5) 0}
.wholesale-strip .kicker{color:var(--brass-lt)}
.wholesale-strip h2{font-family:var(--display);font-size:23px;color:#F1EDE6;
margin:var(--sp-2) 0 var(--sp-2)}
.wholesale-strip p{font-size:13.5px;color:#9E958A;margin:0}
.wholesale-strip .btn{margin-top:var(--sp-3);background:var(--paper);border-color:var(--paper);
color:var(--noir)}
/* ---------- próxima clase ---------- */
.next{background:#fff;border:1px solid var(--noir);padding:20px 18px;margin-top:var(--sp-3)}
.next-lb{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
color:var(--brass-dk);margin:0}
.next-dt{font-family:var(--display);font-size:30px;line-height:1.05;color:var(--noir);
margin:var(--sp-2) 0 0}
.next-ti{font-size:14.5px;color:var(--ink);margin:8px 0 0}
.next-mt{font-size:12px;color:var(--soft);margin:6px 0 0}
/* El agotado no se distingue solo por el texto: cambia fondo, borde y color. */
.seats{background:var(--brass-wash);color:var(--brass-dp);border-color:var(--brass-dp)}
.seats.full{background:#F7EDED;border-color:var(--red);color:var(--red)}
/* ---------- retrato de Roxy ---------- */
.portrait{margin-top:var(--sp-3);border:1px solid var(--rule)}
/* ---------- barra fija: que no tape contenido ---------- */
/* La altura vive en una variable y el main reserva exactamente eso. Antes era
un 130px puesto a ojo, que se desincronizaba al tocar la barra. */
:root{--bar-h:74px}
.bottom-bar{padding-bottom:env(safe-area-inset-bottom,0px)}
.wrap{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + var(--sp-5))}
.band + .wrap{padding-top:var(--sp-4)}
.toast{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + var(--sp-3))}
/* ---------- áreas táctiles de 44px ---------- */
.chip,.search-go{min-height:44px;display:inline-flex;align-items:center}
.pager a{min-height:44px;display:inline-flex;align-items:center}
/* ---------- movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important}
}
/* =============================================================
Carrusel de portadas (Prompt 2 — banners)
Sin librería: el desplazamiento lo hace scroll-snap.
============================================================= */
.carousel{position:relative}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.carousel-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.carousel-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;
display:flex;justify-content:center;gap:9px}
.carousel-dot{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.carousel-dot::before{content:"";width:8px;height:8px;border-radius:50%;
background:rgba(250,250,248,.45);transition:background .18s,transform .18s}
.carousel-dot[aria-selected="true"]::before{background:var(--brass-lt);transform:scale(1.35)}
.carousel-dot:focus-visible{outline:2px solid var(--brass-lt);outline-offset:-8px}
/* Las flechas son ayuda, no el único camino: el track se scrollea con el dedo
y con el teclado. En pantalla chica ocupan poco y no tapan el texto. */
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:44px;height:44px;border:0;cursor:pointer;color:var(--paper);
background:rgba(22,19,15,.42);font-size:26px;line-height:1;
display:flex;align-items:center;justify-content:center}
.carousel-arrow:hover{background:rgba(22,19,15,.68)}
.carousel-arrow:focus-visible{outline:2px solid var(--brass-lt);outline-offset:-2px}
.carousel-arrow.prev{left:0}
.carousel-arrow.next{right:0}
/* Preview del panel: la banda al ancho real de un telefono, que es por
donde entra el trafico. Sirve para ver el recorte antes de guardar. */
.preview-phone{width:390px;max-width:100%;border:1px solid var(--rule);
margin-top:var(--sp-3);overflow:hidden}
.preview-phone .band{min-height:340px;height:auto}
/* =============================================================
Agenda del panel
============================================================= */
.agenda-head{display:flex;align-items:center;justify-content:space-between;
gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.agenda-nav{display:flex;align-items:center;gap:6px}
.agenda-nav a,.agenda-nav button{min-height:44px;min-width:44px;display:inline-flex;
align-items:center;justify-content:center;border:1px solid var(--rule);background:#fff;
color:var(--noir);text-decoration:none;cursor:pointer;padding:0 12px;
font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.agenda-nav a[aria-current="true"]{background:var(--noir);border-color:var(--noir);color:var(--paper)}
.agenda-day{font-family:var(--display);font-size:22px;color:var(--noir);margin:0}
/* Lo primero que tiene que ver al abrir: cuántas solicitudes esperan respuesta. */
.pending-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--brass-wash);border-left:3px solid var(--brass);padding:13px 15px;
margin-top:var(--sp-3)}
.pending-n{font-family:var(--display);font-size:28px;line-height:1;color:var(--noir)}
.pending-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--brass-dp)}
.pending-bar.none{background:var(--marble);border-left-color:var(--rule)}
.agenda-cols{display:grid;gap:11px;margin-top:var(--sp-3)}
.agenda-col{background:#fff;border:1px solid var(--rule);padding:12px}
.agenda-col-h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
color:var(--soft);margin:0 0 var(--sp-2);padding-bottom:8px;border-bottom:1px solid var(--rule)}
.agenda-empty{font-size:12.5px;color:var(--soft);margin:0}
.appt{border-left:3px solid var(--rule);background:var(--paper);padding:11px 12px;
margin-bottom:9px}
.appt:last-child{margin-bottom:0}
.appt-t{font-family:var(--display);font-size:19px;color:var(--noir);line-height:1;
font-variant-numeric:tabular-nums}
.appt-n{font-size:14px;color:var(--ink);font-weight:500;margin:5px 0 0}
.appt-s{font-size:12px;color:var(--soft);margin:2px 0 0}
.appt-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.appt-acts form{margin:0}
.appt-acts button,.appt-acts a{min-height:36px;display:inline-flex;align-items:center;
border:1px solid var(--rule);background:#fff;cursor:pointer;text-decoration:none;
padding:0 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
font-weight:700;color:var(--soft)}
.appt-acts button:hover,.appt-acts a:hover{border-color:var(--noir);color:var(--noir)}
/* Las solicitudes se ven distintas: es lo que hay que responder. */
.appt.st-requested{border-left-color:var(--brass);background:var(--brass-wash)}
.appt.st-confirmed{border-left-color:var(--ok)}
.appt.st-done{border-left-color:var(--rule);opacity:.62}
.appt.st-no_show{border-left-color:var(--red)}
.appt.st-cancelled{border-left-color:var(--rule);opacity:.45}
.appt.st-cancelled .appt-n{text-decoration:line-through}
.st-lb{display:inline-block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;margin-top:7px}
.st-lb.requested{color:var(--brass-dp)}
.st-lb.confirmed{color:var(--ok)}
.st-lb.done{color:var(--soft)}
.st-lb.no_show{color:var(--red)}
.st-lb.cancelled{color:var(--soft)}
.overlap{background:#FBEDED;border-left:2px solid var(--red);padding:10px 12px;
font-size:12.5px;margin-top:var(--sp-2)}
/* Vista semana: entra recién en desktop. En mobile manda el día. */
@media(min-width:900px){
.agenda-cols.week{grid-template-columns:repeat(7,1fr)}
.agenda-cols.day{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
/* =============================================================
Formulario público de solicitud de cita
============================================================= */
.slotpick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.slotpick label{display:flex;align-items:center;justify-content:center;min-height:52px;
border:1px solid var(--rule);background:#fff;cursor:pointer;font-size:14px;
text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);margin:0}
.slotpick input{position:absolute;opacity:0;width:1px;height:1px}
.slotpick input:checked + span{font-weight:700}
.slotpick label:has(input:checked){border-color:var(--noir);background:var(--marble)}
.slotpick input:focus-visible + span{outline:2px solid var(--brass);outline-offset:4px}
/* Honeypot: invisible para la persona, visible para el bot que llena todo. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent-box{background:var(--brass-wash);border-left:3px solid var(--brass);
padding:17px 18px;margin-top:var(--sp-3)}
.sent-t{font-family:var(--display);font-size:24px;color:var(--noir);margin:0}
.sent-p{font-size:14px;color:var(--ink);margin:var(--sp-2) 0 0}
.sent-warn{font-size:12.5px;color:var(--brass-dp);font-weight:700;margin:var(--sp-2) 0 0}
/* ---------- agenda: mover una cita ---------- */
.appt-move{margin-top:8px}
.appt-move summary{display:inline-flex;align-items:center;min-height:36px;cursor:pointer;
font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--soft)}
.appt-move summary:hover{color:var(--noir)}
.appt-move form{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.appt-move input{flex:1;min-width:170px;padding:8px 9px;border:1px solid var(--rule);
background:#fff;font-size:13px}
.appt-move button{min-height:36px;border:1px solid var(--noir);background:var(--noir);
color:var(--paper);cursor:pointer;padding:0 12px;font-size:10px;letter-spacing:.1em;
text-transform:uppercase;font-weight:700}
.appt[draggable="true"]{cursor:grab}
.appt.is-dragging{opacity:.45;cursor:grabbing}
.agenda-col.is-over{outline:2px dashed var(--brass);outline-offset:-4px;background:var(--brass-wash)}
.agenda-filters{margin-top:var(--sp-3)}
/* =============================================================
Cierre de bugs — pasada de correcciones
============================================================= */
/* A4 — El header es sticky y tapaba el H1 al saltar a un ancla.
La altura vive en una variable y `scroll-padding-top` le dice al navegador
dónde termina la zona fija, para que ningún destino quede debajo. */
:root{--head-h:70px}
html{scroll-padding-top:calc(var(--head-h) + var(--sp-3))}
.site-head{min-height:var(--head-h)}
/* A9 — La fila de chips se cortaba sin avisar que seguía.
Un degradado en el borde derecho indica que hay más; desaparece solo cuando
se llega al final gracias a `animation-timeline: scroll()` donde exista, y
donde no, queda un degradado fijo que igual comunica el corte. */
.filters{position:relative;scroll-snap-type:x proximity}
.filters > *{scroll-snap-align:start}
.filters-wrap{position:relative}
.filters-wrap::after{content:"";position:absolute;top:0;right:0;bottom:6px;width:34px;
pointer-events:none;background:linear-gradient(90deg,rgba(250,250,248,0),var(--paper))}
@media(min-width:1040px){
/* En la barra lateral de desktop los chips van en columna: no hay corte. */
.filters-wrap::after{display:none}
}
/* A9 — La fila entera del servicio es el link. Antes había un
"Consultar por este servicio →" repetido en cada fila, que decía tres veces
lo mismo y dejaba el resto de la fila muerto. */
.row-link{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
transition:background .15s}
.row-link:last-child{border-bottom:0}
/* Eran ; ahora son
dentro del , asi que necesitan apilarse. */
.row-link .row-n1,.row-link .row-n2,.row-link .row-meta{display:block}
.row-link > span:first-child{min-width:0}
.row-link .row-pz{white-space:nowrap}
.row-link .row-go{color:var(--brass-dk);font-size:16px;line-height:1;margin-left:4px}
@media(hover:hover) and (pointer:fine){
.row-link:hover{background:var(--marble)}
.row-link:hover .row-n1{color:var(--noir)}
}
.row-link:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* =============================================================
Catálogo real — filtro por necesidad, familias, variantes
============================================================= */
/* La fila de necesidades va ARRIBA de la de categorías: es como compra la
gente en un beauty supply. Etiquetas más grandes que las de tipo, a
propósito — la jerarquía tiene que decir cuál se mira primero. */
.needs-bar{margin-top:var(--sp-4)}
.needs-lb{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
color:var(--brass-dk);margin:0 0 8px}
.chip-need{display:inline-flex;align-items:center;gap:7px;font-size:12px;
letter-spacing:.04em;text-transform:none;padding:11px 14px;
border-color:var(--rule);color:var(--ink)}
.chip-need[aria-current="true"]{background:var(--noir);border-color:var(--noir);color:var(--paper)}
.chip-n{font-size:10px;font-weight:700;color:var(--soft);
font-variant-numeric:tabular-nums}
.chip-need[aria-current="true"] .chip-n{color:var(--brass-lt)}
/* Las etiquetas de necesidad en la ficha: mismo componente, sin conteo. */
.need-tags{display:flex;flex-wrap:wrap;gap:7px;margin:var(--sp-3) 0 0}
/* Presentaciones del kit. */
.variants{margin-top:var(--sp-3)}
.variants-pick{grid-template-columns:1fr 1fr}
@media(min-width:520px){.variants-pick{grid-template-columns:repeat(4,1fr)}}
/* =============================================================
Panel — aviso de precios de mayoreo faltantes
============================================================= */
.gap-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
flex-wrap:wrap;background:var(--brass-wash);border-left:3px solid var(--brass);
padding:14px 16px;margin-top:var(--sp-3)}
.gap-n{font-family:var(--display);font-size:30px;line-height:1;color:var(--noir)}
.gap-t{font-size:12.5px;color:var(--ink);margin:0}
.gap-t b{color:var(--brass-dp)}
/* Carga en lote: una fila por producto, el precio de mostrador al lado para
tener la referencia sin abrir otra pestaña. */
.bulk{width:100%;border-collapse:collapse;margin-top:var(--sp-3);font-size:14px;background:#fff}
.bulk th,.bulk td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--rule)}
.bulk thead th{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--soft);font-weight:700;background:var(--marble)}
.bulk td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bulk input{width:110px;padding:8px 9px;border:1px solid var(--rule);background:#fff;
font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.bulk input:focus{outline:2px solid var(--brass);outline-offset:-2px}
.bulk tr.done{opacity:.55}
.bulk-sku{font-size:11px;color:var(--soft)}
/* =============================================================
Ritmo de bandas
=============================================================
El sitio era una columna de texto centrada sobre blanco hueso: se leía
como un documento. Y el negro de marca casi no se usaba, así que el latón
nunca llegaba a destacar.
La regla: el FONDO de cada sección llega a los bordes de la pantalla, el
CONTENIDO respeta el ancho máximo. La alternancia claro/oscuro es lo que
da el ritmo — sin eso son bloques blancos en fila.
============================================================= */
/* El contenedor deja de encerrar: los gutters grises de los costados en
desktop eran justamente esta caja. El ancho lo maneja cada banda adentro. */
.site-main{max-width:none;box-shadow:none}
.band-sec{width:100%}
.band-inner{max-width:1200px;margin:0 auto;padding:var(--sp-5) var(--sp-3)}
@media(min-width:1040px){
.band-inner{padding:var(--sp-6) var(--sp-5)}
}
.band-sec.claro{background:var(--paper);color:var(--ink)}
.band-sec.oscuro{background:var(--noir);color:#DDD6CA}
/* En oscuro invierte todo lo que toca texto. El latón sube a su variante
clara: --brass-dk sobre negro no llega ni a 2:1. */
.band-sec.oscuro .sec-h2,
.band-sec.oscuro h2,
.band-sec.oscuro h3{color:var(--paper)}
.band-sec.oscuro .sec-eyebrow{color:var(--brass-lt)}
.band-sec.oscuro .muted,
.band-sec.oscuro .note{color:#9E958A}
.band-sec.oscuro .btn{background:var(--paper);border-color:var(--paper);color:var(--noir)}
.band-sec.oscuro .btn.ghost{background:none;color:var(--paper)}
.band-sec.oscuro .btn.ghost:hover{background:rgba(250,250,248,.12)}
.band-sec.oscuro .chip{border-color:#4A423A;color:#B9B0A4}
.band-sec.oscuro .chip[aria-current="true"]{background:var(--paper);border-color:var(--paper);color:var(--noir)}
.band-sec.oscuro a{color:inherit}
/* ---------- encabezado de sección ---------- */
.sec-head{margin-bottom:var(--sp-4)}
.sec-eyebrow{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
color:var(--brass-dk);margin:0}
.sec-h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,5vw,38px);
line-height:1.06;color:var(--noir);margin:8px 0 0}
/* ---------- precios de un vistazo ---------- */
.pricelist{display:grid;gap:0 var(--sp-5)}
@media(min-width:768px){.pricelist{grid-template-columns:1fr 1fr}}
.pl-row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
padding:13px 0;border-bottom:1px solid var(--rule)}
.band-sec.oscuro .pl-row{border-bottom-color:#3A332C}
.pl-row > span:first-child{min-width:0}
.pl-n,.pl-d,.pl-dur{display:block}
.pl-n{font-size:15px;font-weight:500;color:var(--noir)}
.band-sec.oscuro .pl-n{color:#F1EDE6}
.pl-d{font-size:11.5px;color:var(--soft);margin-top:2px}
.band-sec.oscuro .pl-d{color:#9E958A}
.pl-dur{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
color:var(--soft);margin-top:3px}
.pl-p{font-family:var(--display);font-size:20px;color:var(--brass-dk);white-space:nowrap;
font-variant-numeric:tabular-nums}
.band-sec.oscuro .pl-p{color:var(--brass-lt)}
.pl-area{grid-column:1/-1;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
font-weight:700;color:var(--brass-dk);margin:var(--sp-4) 0 6px}
.band-sec.oscuro .pl-area{color:var(--brass-lt)}
.pl-area:first-child{margin-top:0}
/* ---------- banda de cita ---------- */
/* Segundo punto de conversión a mitad de página, para no tener que volver
arriba. El teléfono en grande porque en un salón la mitad llama. */
.cita{display:grid;gap:var(--sp-3);text-align:center}
@media(min-width:768px){
.cita{grid-template-columns:1fr auto;text-align:left;align-items:center;
column-gap:var(--sp-5)}
}
.cita-l{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
color:var(--brass-lt);margin:0}
.cita-tel{display:inline-block;font-family:var(--display);font-size:clamp(34px,6vw,52px);
line-height:1;color:var(--paper);text-decoration:none;margin-top:10px;
font-variant-numeric:tabular-nums}
.cita-tel:hover{color:var(--brass-lt)}
.cita-n{font-size:13px;color:#9E958A;margin:10px 0 0}
.cita-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(min-width:768px){.cita-acts{justify-content:flex-end}}
.cita-acts .btn{width:auto;padding:14px var(--sp-4);margin:0}
/* ---------- mosaico del trabajo ---------- */
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:768px){.mosaico{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.mosaico{grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}}
.mosaico figure{margin:0}
.mosaico figcaption{font-size:11px;color:#9E958A;margin-top:6px}
/* ---------- reseñas ---------- */
.reviews{display:grid;gap:var(--sp-3)}
@media(min-width:768px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:#fff;border:1px solid var(--rule);padding:18px 17px}
.review-stars{color:var(--brass-dk);font-size:13px;letter-spacing:.14em}
.review-body{font-size:14px;color:var(--ink);margin:10px 0 0;line-height:1.6}
.review-who{font-size:12px;color:var(--soft);margin:12px 0 0;font-weight:700}
.review-src{font-size:10.5px;color:var(--soft);font-weight:400}
/* ---------- pie grande ---------- */
.site-foot{background:var(--noir);color:#B9B0A4}
.foot-inner{max-width:1200px;margin:0 auto;padding:var(--sp-5) var(--sp-3);
display:grid;gap:var(--sp-4)}
@media(min-width:768px){.foot-inner{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1040px){.foot-inner{padding:var(--sp-6) var(--sp-5)}}
.foot-mark{font-family:var(--display);font-size:26px;color:var(--paper);
text-decoration:none;display:block}
.foot-desc{font-size:9px;letter-spacing:.3em;text-transform:uppercase;
color:var(--brass-lt);font-weight:700;margin-top:5px}
.foot-h{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
color:var(--brass-lt);margin:0 0 10px}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot-list a{color:#B9B0A4;text-decoration:none;font-size:14px}
.foot-list a:hover{color:var(--paper)}
.foot-p{font-size:14px;color:#B9B0A4;margin:0 0 6px;line-height:1.6}
.foot-tel{font-family:var(--display);font-size:22px;color:var(--paper);text-decoration:none}
.foot-tel:hover{color:var(--brass-lt)}
.foot-legal{border-top:1px solid #3A332C;margin-top:var(--sp-4);padding-top:var(--sp-3);
font-size:11.5px;color:#8E857A;grid-column:1/-1}
/* La barra fija de mobile queda por ENCIMA del pie, no lo tapa. */
.site-foot{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
@media(min-width:1040px){.site-foot{padding-bottom:0}}
/* =============================================================
Desktop — de 1040px para arriba
=============================================================
NO es un rediseño: es la misma página con más aire y más información
visible a la vez. Misma paleta, misma tipografía, mismo orden de
secciones, misma copy. Lo único que cambia es cómo se acomoda.
El orden del HTML sigue siendo el de mobile. Donde desktop necesita otro
acomodo se resuelve colocando en la grilla, no reordenando el marcado:
así una sola plantilla sirve a los dos y no hay dos sitios que mantener.
============================================================= */
/* Hover solo donde hay puntero de verdad. En una pantalla táctil el hover
se queda pegado después de tocar y parece un bug. */
@media(hover:hover) and (pointer:fine){
.door:hover{border-color:var(--noir);box-shadow:0 2px 18px rgba(22,19,15,.09)}
.card:hover{border-color:var(--noir);box-shadow:0 2px 18px rgba(22,19,15,.09)}
.row:hover .row-cta{color:var(--noir)}
.brand:hover{border-color:var(--noir)}
.chip:hover{border-color:var(--noir);color:var(--noir)}
.clase:hover,.next:hover{box-shadow:0 2px 18px rgba(22,19,15,.09)}
.local-a:hover,.row-cta:hover{color:var(--noir)}
.head-contact a:hover .hc-v{color:var(--noir)}
.appt:hover{box-shadow:0 1px 10px rgba(22,19,15,.10)}
.mini:hover{background:var(--brass-wash);border-color:var(--brass-dk)}
.table tbody tr:hover{background:var(--paper)}
}
/* Contacto en el header: escondido hasta desktop. */
.head-contact{display:none}
@media(min-width:1040px){
/* ---------- caja general ---------- */
/* 1200px de tope: el contenido no se estira al infinito. En 1920 queda
centrado con aire a los costados, no nadando de punta a punta. */
.site-main,.wrap,.site-head,.bottom-bar{max-width:1200px}
.wrap{padding:var(--sp-5) var(--sp-5) var(--sp-6)}
.band + .wrap{padding-top:var(--sp-5)}
/* La barra fija se va: en PC se lee como un banner de cookies. El teléfono
y el WhatsApp pasan al header, siempre visibles. */
.bottom-bar{display:none}
:root{--bar-h:0px}
.toast{bottom:var(--sp-4)}
.site-head{padding:var(--sp-3) var(--sp-5)}
.head-contact{display:flex;gap:var(--sp-4);align-items:center}
.head-contact a{text-decoration:none;display:flex;flex-direction:column;line-height:1.1}
.hc-l{font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
color:var(--soft)}
.hc-v{font-family:var(--display);font-size:17px;color:var(--brass-dk);margin-top:3px;
transition:color .15s}
/* ---------- banda de portada ---------- */
/* Alto fijo y grilla de 12: el texto ocupa la mitad izquierda y la foto
respira a la derecha. Por eso el degradado pasa a ser horizontal. */
.band{height:520px;min-height:520px;display:grid;
grid-template-columns:repeat(12,1fr);align-items:center;
padding:0 var(--sp-5);column-gap:var(--sp-4)}
.band-veil{background:linear-gradient(90deg,
rgba(22,19,15,.94) 0%,rgba(22,19,15,.88) 34%,rgba(22,19,15,.55) 62%,rgba(22,19,15,.22) 100%)}
.band-tx{grid-column:1 / span 6;align-self:center}
.band-h1{font-size:clamp(46px,4.4vw,62px)}
.band-sub{font-size:16px;max-width:38ch}
.band-cta{display:inline-block;width:auto;padding-left:var(--sp-5);padding-right:var(--sp-5)}
.carousel-slide{position:relative}
.carousel-dots{bottom:20px;justify-content:flex-start;padding-left:var(--sp-5)}
.carousel-arrow{width:52px;height:52px}
/* ---------- home: tres columnas ---------- */
.doors{grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
/* Beauty Supply a ancho doble: es la línea de mayor margen y la jerarquía
tiene que decirlo. */
.proof{margin-top:var(--sp-6)}
.local-rows{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.local-row{border-bottom:0;border-left:1px solid var(--rule);padding:0 0 0 var(--sp-3)}
.local-row:first-child{border-left:0;padding-left:0}
/* ---------- áreas de servicio: dos columnas ---------- */
/* El marcado sigue en orden mobile — módulo, servicios, galería. Acá se
colocan por grilla: módulo y galería a la izquierda, precios a la
derecha acompañando el scroll. */
.area-grid{display:grid;grid-template-columns:1fr 380px;
column-gap:var(--sp-5);align-items:start}
.a-module{grid-column:1;grid-row:1}
.a-services{grid-column:2;grid-row:1 / span 3;position:sticky;top:96px}
.a-gallery{grid-column:1;grid-row:2}
.a-cta{grid-column:1;grid-row:3}
.a-services h2{margin-top:0}
.mosaic{grid-template-columns:repeat(3,1fr)}
.beforeafter{max-width:640px}
/* ---------- catálogo: filtros al costado, 4 columnas ---------- */
.catalog-grid{display:grid;grid-template-columns:220px 1fr;
column-gap:var(--sp-5);align-items:start;margin-top:var(--sp-4)}
.catalog-side{position:sticky;top:96px}
/* La fila scrolleable pasa a lista vertical: en desktop no hay por qué
esconder categorías detrás de un scroll horizontal. */
.catalog-side .filters{flex-direction:column;overflow:visible;gap:2px;margin-top:0}
.catalog-side .chip{width:100%;justify-content:flex-start;border:0;
border-left:2px solid transparent;padding:11px 12px}
.catalog-side .chip[aria-current="true"]{background:none;color:var(--noir);
border-left-color:var(--brass)}
.catalog-side .searchform{margin-top:var(--sp-3)}
.grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.card-thumb{height:180px}
.brands{overflow:visible;flex-wrap:wrap}
.wholesale-strip{display:grid;grid-template-columns:1fr auto;align-items:center;
column-gap:var(--sp-5);padding:24px var(--sp-5)}
.wholesale-strip h2{margin:var(--sp-1) 0 0}
.wholesale-strip .btn{margin-top:0;width:auto;padding:14px var(--sp-5);grid-row:1 / span 3;
grid-column:2;align-self:center}
/* ---------- clases: destacada a ancho completo, el resto en dos ---------- */
.next{display:grid;grid-template-columns:1fr auto;align-items:center;
column-gap:var(--sp-5);padding:28px var(--sp-5)}
.next-dt{font-size:38px}
.next .btn{width:auto;padding:14px var(--sp-5);grid-column:2;grid-row:1 / span 5;
align-self:center;margin-top:0}
.clases-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.clases-grid .clase{margin-top:0}
/* ---------- /roxy ---------- */
.roxy-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-5);
align-items:start}
/* ---------- agenda: semana por defecto ---------- */
/* Siete columnas en 1200px dan 155px cada una: alcanza para la tarjeta.
Si no entran, la grilla scrollea en horizontal en vez de aplastarse. */
.agenda-cols.week{grid-template-columns:repeat(7,minmax(150px,1fr));overflow-x:auto}
.agenda-col{padding:10px}
.agenda-col-h{position:sticky;top:0;background:#fff;z-index:1;margin-top:-10px;
padding-top:10px}
.appt{padding:9px 10px}
.appt-move input{min-width:0}
/* ---------- formularios ---------- */
.booking-form{max-width:560px}
.cols{grid-template-columns:1fr 1fr}
}
/* De 1440 para arriba el tope de 1200 ya manda: lo único que se agranda es
el aire lateral, y eso lo hace el margin:auto. Nada que ajustar acá. */
/* =============================================================
Panel
============================================================= */
.panel-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);
background:var(--noir);color:var(--paper);flex-wrap:wrap}
.panel-head nav{display:flex;gap:var(--sp-3);flex:1;flex-wrap:wrap}
.panel-head a{color:#B9B0A4;text-decoration:none;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;font-weight:600}
.panel-head a:hover,.panel-head a[aria-current]{color:var(--brass-lt)}
.panel-head .mark-word{color:var(--paper)}
.panel-head .logout{display:flex;align-items:center;gap:10px}
.panel-head .who{font-size:11px;color:#8E857A}
.panel-head .logout button{background:none;border:1px solid #4A423A;color:#B9B0A4;cursor:pointer;
font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:7px 11px}
.panel-main{max-width:1040px;margin:0 auto;padding:var(--sp-4) var(--sp-3) var(--sp-6)}
body.panel{background:var(--marble)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.block{margin-top:var(--sp-5)}
.inline-form{display:flex;gap:7px;align-items:center;margin:var(--sp-3) 0;flex-wrap:wrap}
.inline-form .search{max-width:320px}
.cols{display:grid;gap:var(--sp-3)}
@media(min-width:760px){.cols{grid-template-columns:1fr 1fr}}
.form-wide{max-width:900px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--sp-2)}
.danger{margin-top:var(--sp-5);border-top:1px solid var(--rule);padding-top:var(--sp-3)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:var(--sp-3)}
.stat{background:#fff;border:1px solid var(--rule);padding:16px}
.stat.alert{border-color:var(--brass);background:var(--brass-wash)}
.stat.warn{border-left:3px solid var(--red)}
.stat-n{display:block;font-family:var(--display);font-size:34px;line-height:1;color:var(--noir)}
.stat-l{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--soft);font-weight:700;margin-top:7px}
.stat-s{display:block;font-size:12px;color:var(--brass-dk);margin-top:4px}
.table{width:100%;border-collapse:collapse;background:#fff;margin-top:var(--sp-3);font-size:14px;
display:block;overflow-x:auto;white-space:nowrap}
@media(min-width:900px){.table{display:table;white-space:normal}}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.table thead th{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
font-weight:700;background:var(--marble)}
.table tfoot th{font-weight:700;background:var(--marble)}
.table tr.off{opacity:.5}
.table a{color:var(--brass-dk)}
/* ---------- fotos del panel ---------- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:var(--sp-3);margin-top:var(--sp-3)}
.media-item{background:#fff;border:1px solid var(--rule);padding:12px}
.media-item img{display:block;width:100%;height:180px;object-fit:cover;background:var(--marble)}
.media-item figcaption{font-size:11.5px;color:var(--soft);margin-top:7px}
.media-item .form{margin-top:10px}
.media-item .inline-form{margin-bottom:0}
.pick-preview{margin:0 0 9px}
.pick-preview img{display:block;width:150px;height:150px;object-fit:cover;border:1px solid var(--rule)}
fieldset.field select{margin-bottom:8px}
.tabs{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-3);
border-bottom:1px solid var(--rule);padding-bottom:9px}
.tabs a{text-decoration:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
font-weight:600;color:var(--soft)}
.tabs a[aria-current]{color:var(--noir);border-bottom:2px solid var(--brass);padding-bottom:8px}
.pill{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
padding:4px 8px;border:1px solid var(--rule);color:var(--soft)}
.pill.sent,.pill.pending,.pill.open{border-color:var(--brass);color:var(--brass-dk)}
.pill.confirmed,.pill.approved,.pill.ready{border-color:var(--ok);color:var(--ok)}
.pill.delivered,.pill.done{border-color:var(--rule);color:var(--soft)}
.pill.cancelled,.pill.rejected,.pill.full{border-color:var(--red);color:var(--red)}
.pill.lead{border-color:var(--brass);color:var(--brass-dk);margin-left:6px}
.dl{margin:var(--sp-3) 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.dl dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
font-weight:700;padding-top:3px}
.dl dd{margin:0}
.copyable{display:block;background:#fff;border:1px solid var(--rule);padding:11px 13px;
word-break:break-all;font-size:12.5px;margin-top:8px;cursor:pointer}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--sp-3)}
.login-box{background:var(--paper);border:1px solid var(--rule);padding:var(--sp-5) var(--sp-4);
width:100%;max-width:380px}
.login-box .mark{margin-bottom:var(--sp-4)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* =============================================================
Seccion de area — mejoras
============================================================= */
/* Placeholder publicado: bloque de marca, sin notas de produccion.
El hueco se sigue viendo como hueco, que es lo honesto mientras no haya
foto propia, pero sin instrucciones internas encima. */
/* Con textura visible, no negro liso. Al lado de tarjetas con foto real un
bloque plano se lee como imagen que no cargo; la trama diagonal dice
"acá va una foto" sin necesidad de ponerle texto encima. */
.ph-limpio{background:
repeating-linear-gradient(45deg,rgba(201,169,97,.055) 0 10px,transparent 10px 20px),
linear-gradient(150deg,#231E18 0%,#16130F 58%,#0F0D0A 100%)}
.ph-mark{font-family:var(--display);font-size:clamp(38px,9vw,64px);line-height:1;
color:var(--brass-lt);opacity:.28;letter-spacing:.02em}
/* Estado vacio de servicios: la persona tiene donde tocar. */
.empty-cta{padding:var(--sp-3) 0 0}
.empty-acts{display:grid;gap:9px;margin-top:var(--sp-3)}
@media(min-width:520px){.empty-acts{grid-template-columns:1fr 1fr}}
.empty-acts .btn{width:100%;margin:0}
/* La banda de cita rompe la columna dentro de la pagina de area. */
.sec-cita .band-inner{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
/* =============================================================
Area sin fotos — que no queden huecos
============================================================= */
/* La banda sin foto no necesita 520px de alto: eran 520px de negro vacio
con el titulo arriba a la izquierda y nada mas. Con alto automatico y
padding generoso el bloque se sostiene solo por la tipografia. */
.band-plain{height:auto;min-height:0;padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
@media(min-width:1040px){
.band-plain{height:auto;min-height:0;
padding-top:calc(var(--sp-6) * 1.4);padding-bottom:calc(var(--sp-6) * 1.4)}
/* Sin foto no hay nada que "respire a la derecha": el texto usa mas ancho. */
.band-plain .band-tx{grid-column:1 / span 9}
}
/* Sin columna izquierda, la de precios ocupa todo el ancho en vez de dejar
media pantalla vacia con un boton flotando en el medio. */
@media(min-width:1040px){
.area-grid--solo{grid-template-columns:1fr}
.area-grid--solo .a-services{grid-column:1;grid-row:auto;position:static;max-width:720px}
}
/* ---------- panel: cifras y acciones ----------
Va al final a proposito: pisa las reglas de arriba sin tener que editarlas
una por una, y deja en un solo lugar el criterio del panel.
La display es una Bodoni: hermosa para titulares, mala para numeros que se
comparan de un vistazo. Sus cifras tienen ancho distinto y el contraste
fino/grueso las vuelve dificiles de leer chicas. Toda cifra del panel pasa
a la sans con tabular-nums, que alinea las columnas. La display queda para
titulos con PALABRAS. */
.stat-n,
.pending-n,
.appt-t,
.gap-n{
font-family:var(--body);
font-variant-numeric:tabular-nums;
font-weight:600;
letter-spacing:-.01em;
}
/* Sin la serif el mismo px se ve mas grande: se compensa un escalon. */
.stat-n{font-size:30px}
.pending-n{font-size:25px}
.gap-n{font-size:27px}
.appt-t{font-size:17px;font-weight:500}
/* --- acciones de la card de cita --- */
.appt-acts .act{
font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
font-weight:700;cursor:pointer;padding:9px 13px;min-height:38px;
border:1px solid var(--rule);background:none;color:var(--ink);
}
.appt-acts .act:hover{border-color:var(--noir)}
.act-pri{background:var(--noir);border-color:var(--noir);color:var(--paper)}
.act-pri:hover{background:#000;border-color:#000;color:var(--paper)}
/* Terciario: sin caja, para que cancelar no pese lo mismo que confirmar. */
.act-ter{border-color:transparent;color:var(--red)}
.act-ter:hover{border-color:var(--red)}
/* con aspecto de boton: sin el triangulito y con el mismo alto. */
.appt-move > summary.act{display:inline-flex;align-items:center;list-style:none}
.appt-move > summary.act::-webkit-details-marker{display:none}
/* ---------- panel: solicitudes sin hora ----------
Bloque propio, arriba de la grilla. Es lo unico de la pantalla que espera
una decision; la grilla es consulta. */
.block-req{border-left:3px solid var(--brass);padding-left:var(--sp-3)}
.req-list{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
@media(min-width:768px){.req-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
.req{border:1px solid var(--rule);background:var(--paper);padding:var(--sp-3)}
/* El dia y la franja como los escribio la persona, no una hora inventada. */
.req-when{font-family:var(--body);font-size:15px;font-weight:600;color:var(--noir);margin:0}
.req-slot{color:var(--brass-dk);font-weight:500}
.req-n{font-size:14px;font-weight:500;color:var(--ink);margin:6px 0 0}
.req-s{font-size:13px;color:var(--soft);margin:2px 0 0}
.req-tel{font-family:var(--body);font-variant-numeric:tabular-nums;font-size:13px;
color:var(--ink);margin:4px 0 0}
.req-note{font-size:12.5px;color:var(--soft);margin:6px 0 0;font-style:italic}
.req-acts{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:var(--sp-3)}
.req-acts form{margin:0}
.req-confirm > summary.act{display:inline-flex;align-items:center;list-style:none;cursor:pointer}
.req-confirm > summary.act::-webkit-details-marker{display:none}
.req-form{display:grid;gap:8px;margin-top:9px;padding:var(--sp-2);
border:1px solid var(--rule);background:var(--marble)}
/* Chip al pie de la columna del dia pedido. Punteado: no es una cita. */
.chip-sinhora{
display:block;margin-top:var(--sp-2);padding:8px 10px;text-align:center;
border:1px dashed var(--brass);color:var(--brass-dk);text-decoration:none;
font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}
.chip-sinhora:hover{background:var(--brass-wash)}
/* ---------- panel: menu agrupado ----------
Cinco grupos en vez de trece items planos. Mismo marcado en las dos
pantallas: desplegable arriba de 768px, acordeon abajo. */
.pnav ul{list-style:none;margin:0;padding:0}
.pnav-l1{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.pnav-g{position:relative}
.pnav-g > a,
.pnav-t{
display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 2px;
font:inherit;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
font-weight:700;color:var(--ink);text-decoration:none;
background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
}
.pnav-g > a:hover,.pnav-t:hover{color:var(--brass-dk)}
/* Activo a nivel grupo: la regla dorada. El color solo no alcanza. */
.pnav-g.on > a,.pnav-g.on > .pnav-t{color:var(--brass-dk);border-bottom-color:var(--brass)}
.pnav-ar{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px}
.pnav-t[aria-expanded="true"] .pnav-ar{transform:rotate(180deg);margin-top:-3px}
/* El contador solo se renderiza si es > 0; el CSS no lo esconde, no existe. */
.pnav-b{
display:inline-flex;align-items:center;justify-content:center;
min-width:19px;height:19px;padding:0 5px;border-radius:10px;
background:var(--brass);color:var(--noir);
font-size:11px;font-weight:700;letter-spacing:0;
font-variant-numeric:tabular-nums;
}
.pnav-l2 a{
display:block;padding:10px 14px;min-height:44px;box-sizing:border-box;
font-size:13px;color:var(--ink);text-decoration:none;letter-spacing:0;
text-transform:none;font-weight:500;
}
.pnav-l2 a:hover{background:var(--marble);color:var(--noir)}
/* Activo a nivel hijo, ademas del grupo. */
.pnav-l2 a[aria-current="page"]{color:var(--brass-dk);font-weight:700;background:var(--brass-wash)}
.pnav-toggle{display:none;background:none;border:1px solid var(--rule);cursor:pointer;
width:44px;height:44px;align-items:center;justify-content:center;padding:0}
@media(min-width:768px){
/* Desplegable. Sin JS queda abierto: se ve feo pero se usa. */
.con-js .pnav-l2{
display:none;position:absolute;top:100%;left:0;z-index:60;min-width:190px;
background:var(--paper);border:1px solid var(--rule);
box-shadow:0 10px 26px rgba(22,19,15,.12);padding:5px 0;
}
.con-js .pnav-g.abierto .pnav-l2{display:block}
}
@media(max-width:767px){
.pnav-toggle{display:inline-flex}
.con-js .pnav{
display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
background:var(--paper);border-bottom:1px solid var(--rule);
padding:var(--sp-2) var(--sp-3);box-shadow:0 12px 24px rgba(22,19,15,.10);
}
.con-js .pnav.abierto{display:block}
.panel-head{position:relative;flex-wrap:wrap}
.pnav-l1{flex-direction:column;align-items:stretch;gap:0}
.pnav-g{border-bottom:1px solid var(--rule)}
.pnav-g > a,.pnav-t{width:100%;justify-content:flex-start;border-bottom:0}
.pnav-t{justify-content:space-between}
/* Acordeon: aca si pueden convivir varios abiertos. */
.con-js .pnav-l2{display:none;padding-bottom:6px}
.con-js .pnav-g.abierto .pnav-l2{display:block}
.pnav-l2 a{padding-left:var(--sp-3)}
}
/* ---------- panel: home "Hoy" ----------
Los KPI bajan al final y se achican: son para mirar de vez en cuando, no
para arrancar el dia. */
.stats-sm{margin-top:var(--sp-5)}
.stats-sm .stat-n{font-size:22px}
.stats-sm .stat-l{font-size:10.5px}
.sub-h{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
color:var(--soft);margin:var(--sp-4) 0 var(--sp-2)}
/* Citas de hoy: lista, no tabla. En un celular una tabla de 5 columnas se
lee de costado o no se lee. */
.hoy-list{list-style:none;margin:var(--sp-3) 0 0;padding:0}
.hoy{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:baseline;
padding:var(--sp-2) 0;border-bottom:1px solid var(--rule)}
.hoy:last-child{border-bottom:0}
.hoy-h{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;
font-size:16px;color:var(--noir);min-width:52px}
.hoy-tx{flex:1;min-width:150px}
.hoy-n{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.hoy-s{display:block;font-size:12.5px;color:var(--soft);margin-top:2px}
.hoy-acts{display:flex;gap:7px}
/* ---------- panel: tabla de productos ---------- */
.td-thumb{width:52px}
.th-40{width:40px;height:40px;object-fit:cover;display:block;border:1px solid var(--rule)}
.th-vacia{display:block;background:var(--marble);border:1px solid var(--rule)}
/* La fila entera lleva a la ficha (lo hace products.js). El cursor lo
anuncia; el nombre sigue siendo el link real para teclado y lectores. */
.table-prod tbody tr[data-fila]{cursor:pointer}
.table-prod tbody tr[data-fila]:hover{background:var(--marble)}
/* Celda del precio de mayoreo: editable al click, texto sin JS. */
.td-wp{white-space:nowrap}
.con-js .td-wp{cursor:text}
.con-js .td-wp:hover .wp-v{box-shadow:inset 0 -1px 0 var(--brass)}
.wp-form{margin:0}
.wp-i{width:96px;padding:5px 7px;font:inherit;font-size:13px;
font-variant-numeric:tabular-nums;border:1px solid var(--brass);background:var(--paper)}