/* ===========================================================
Rosselot — sistema visual de la maqueta (PROVISIONAL)
Deriva del moodboard de Vivie Design. Hex aproximados.
=========================================================== */
:root{
--cacao:#382A26;
--cafe:#6E3B21;
--salmon:#D9A5A2;
--blush:#F6E1D9;
--crema:#F5F1E8;
--beige:#EEE4D6;
--dorado:#CBA46A;
--olivo:#585C51;
--serif:"Zodiak", Georgia, "Times New Roman", serif;
--sans:"General Sans", system-ui, -apple-system, Segoe UI, sans-serif;
--wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
font-family:var(--sans);color:var(--cacao);background:var(--crema);
line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* ---------- header ---------- */
.site-header{
border-bottom:1px solid rgba(68,40,35,.10);
position:sticky;top:0;z-index:20;
background:rgba(246,238,225,.86);backdrop-filter:saturate(1.1) blur(8px);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.wordmark{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:.02em;color:var(--cacao);line-height:1}
.nav{display:flex;align-items:center;gap:22px}
.nav a{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--olivo)}
.nav a:hover{color:var(--cacao)}
.cart{display:inline-flex;align-items:center;gap:7px;color:var(--cacao);font-weight:500}
.cart .count{font-size:.7rem;background:var(--salmon);color:var(--cacao);min-width:18px;height:18px;border-radius:999px;display:inline-grid;place-items:center;padding:0 5px}
/* ---------- shared bits ---------- */
.eyebrow{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cafe);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::after{content:"";height:1px;width:34px;background:var(--salmon)}
.crumb{font-size:.8rem;color:var(--olivo);padding:22px 0 4px;letter-spacing:.02em}
.crumb a:hover{color:var(--cacao)}
.crumb .sep{margin:0 8px;opacity:.5}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:999px;font-family:var(--sans);font-weight:500;font-size:1rem;letter-spacing:.02em;min-height:52px;padding:0 28px;transition:transform .12s ease, background .2s, border-color .2s, color .2s}
.btn--primary{background:var(--cacao);color:var(--crema)}
.btn--primary:hover{background:#2c211d}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--cacao);border:1px solid rgba(68,40,35,.28)}
.btn--ghost:hover{border-color:var(--cacao);background:rgba(68,40,35,.04)}
/* placeholder photo frame + seal (reusable) */
.frame{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%, #FBEDE6 0%, var(--blush) 45%, #EBCFC6 100%)}
.frame .texture{position:absolute;inset:0;opacity:.10;background-image:repeating-linear-gradient(135deg, var(--cafe) 0 1px, transparent 1px 13px)}
.frame .ph-label{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--cafe);opacity:.62;gap:6px}
.ph-label .k{font-family:var(--serif);font-size:2rem;line-height:1}
.ph-label .s{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.seal{position:absolute;top:16px;left:16px;width:74px;height:74px;border-radius:999px;border:1px solid rgba(68,40,35,.35);display:grid;place-content:center;text-align:center;color:var(--cacao);background:rgba(246,238,225,.55);backdrop-filter:blur(2px)}
.seal b{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:.9}
.seal span{font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olivo);display:block;margin-top:2px}
/* section heading */
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin-bottom:6px}
.sec-head .lead{color:var(--olivo);font-size:.92rem;margin-bottom:26px}
/* product cards (reusable) */
.cards{display:grid;grid-template-columns:1fr;gap:20px}
.card .img{aspect-ratio:4/3;border-radius:6px;position:relative;overflow:hidden;background:linear-gradient(160deg,#FBEDE6,var(--beige))}
.card .img .t{position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(135deg,var(--cafe) 0 1px,transparent 1px 12px)}
.card .img .badge{position:absolute;left:12px;top:12px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(246,238,225,.9);color:var(--cafe);padding:5px 9px;border-radius:999px}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;gap:12px}
.card .name{font-family:var(--serif);font-size:1.15rem}
.card .p{color:var(--cacao);font-size:.95rem;white-space:nowrap}
.card .add-min{margin-top:10px;width:100%;background:transparent;border:1px solid rgba(68,40,35,.25);color:var(--cacao);border-radius:999px;padding:10px;cursor:pointer;font-family:var(--sans);font-size:.85rem;transition:background .18s,border-color .18s}
.card .add-min:hover{background:var(--cacao);color:var(--crema);border-color:var(--cacao)}
/* story band (reusable) */
.story{background:var(--blush);border-radius:8px}
.story .inner{padding:56px 40px;max-width:720px;margin:0 auto;text-align:center}
.story .eyebrow{justify-content:center}
.story .eyebrow::after{display:none}
.story p{font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:1.45;color:var(--cacao)}
/* ---------- footer ---------- */
footer{background:var(--cacao);color:var(--crema);margin-top:64px}
footer .inner{padding:44px 0 38px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
footer .wordmark{color:var(--crema)}
footer .tag{font-size:.84rem;color:#d9c9c2;margin-top:10px;max-width:32ch}
footer nav{display:flex;gap:30px;flex-wrap:wrap}
footer nav a{font-size:.85rem;color:#e7dcd6}
footer nav a:hover{color:#fff}
footer .fine{width:100%;border-top:1px solid rgba(246,238,225,.14);margin-top:12px;padding-top:16px;font-size:.75rem;color:#c9b8b1;letter-spacing:.02em}
/* =================== HOME =================== */
.hero{padding:48px 0 10px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,9vw,4.6rem);line-height:1.0;letter-spacing:-.015em;margin:6px 0 18px}
.hero .sub{max-width:44ch;color:#4a3a34;font-size:1.05rem;margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-media .frame{aspect-ratio:4/5}
.lanes{padding:60px 0 8px}
.lanes-grid{display:grid;grid-template-columns:1fr;gap:20px}
.lane{border-radius:10px;overflow:hidden;background:var(--beige);border:1px solid rgba(68,40,35,.06);display:flex;flex-direction:column}
.lane .img{aspect-ratio:16/10;position:relative;background:radial-gradient(120% 120% at 70% 10%, #FBEDE6, var(--blush) 55%, #E7CCC4)}
.lane .img .t{position:absolute;inset:0;opacity:.09;background-image:repeating-linear-gradient(135deg,var(--cafe) 0 1px,transparent 1px 13px)}
.lane .img .tag{position:absolute;left:16px;top:16px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cafe);background:rgba(246,238,225,.9);padding:6px 11px;border-radius:999px}
.lane .body{padding:26px 26px 30px}
.lane h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:8px}
.lane p{color:var(--olivo);font-size:.95rem;margin-bottom:18px;max-width:42ch}
.lane .go{font-size:.9rem;font-weight:500;color:var(--cacao);border-bottom:1px solid var(--linea);padding-bottom:2px}
.lane .go:hover{border-color:var(--cacao)}
.occasions{padding:56px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid rgba(68,40,35,.20);border-radius:999px;padding:11px 17px;font-size:.92rem;color:var(--cacao);background:transparent;cursor:pointer;transition:background .18s,border-color .18s}
.chip:hover{background:var(--blush);border-color:transparent}
.favorites{padding:56px 0 8px}
.fav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.home-story{padding:60px 0 4px}
/* =================== CATALOG =================== */
.cat-head{padding:44px 0 6px}
.cat-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,7vw,3.4rem);line-height:1.02;margin:6px 0 10px}
.cat-head .lead{color:var(--olivo);max-width:54ch}
.cat-head .lead a{color:var(--cafe);border-bottom:1px solid var(--linea)}
.filters{position:sticky;top:67px;z-index:10;background:rgba(246,238,225,.92);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid rgba(68,40,35,.10);margin-top:20px}
.filters .row{display:flex;gap:10px;overflow-x:auto;padding:14px 0;scrollbar-width:none;-ms-overflow-style:none}
.filters .row::-webkit-scrollbar{display:none}
.filters .chip{white-space:nowrap;flex:none}
.filters .chip[aria-pressed="true"]{background:var(--cacao);color:var(--crema);border-color:var(--cacao)}
.catalog{padding:26px 0 10px}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card.sold .img{filter:grayscale(.45) opacity(.75)}
.card.sold .badge{background:rgba(88,89,85,.16);color:var(--olivo)}
.card .add-min.is-disabled{opacity:.55;cursor:not-allowed}
.card .pres{font-size:.74rem;color:var(--olivo);margin-top:6px;line-height:1.4}
.card .add-min.is-disabled:hover{background:transparent;color:var(--cacao);border-color:rgba(68,40,35,.25)}
@media (min-width:560px){.cat-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media (min-width:900px){.cat-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
/* focus + motion */
:focus-visible{outline:2px solid var(--cafe);outline-offset:2px;border-radius:4px}
.rise{opacity:0;transform:translateY(10px);animation:rise .6s ease forwards}
.rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.18s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}}
/* ---------- desktop ---------- */
@media (min-width:768px){
.cards{grid-template-columns:repeat(3,1fr);gap:26px}
.hero{padding:70px 0 20px}
.hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}
.lanes-grid{grid-template-columns:1fr 1fr;gap:26px}
.fav-grid{grid-template-columns:repeat(4,1fr);gap:24px}
}
/* =================== FORM CONTROLS (compartido: producto · encargo · checkout) =================== */
.field-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--olivo);margin-bottom:10px}
.options{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.pill{font-family:var(--sans);font-size:.9rem;padding:10px 16px;border-radius:999px;cursor:pointer;background:transparent;border:1px solid rgba(68,40,35,.22);color:var(--cacao);transition:border-color .18s,background .18s}
.pill:hover{border-color:var(--cacao)}
.pill[aria-pressed="true"]{background:var(--cacao);color:var(--crema);border-color:var(--cacao)}
.pill .px{color:var(--olivo);margin-left:5px;font-size:.86em}
.pill[aria-pressed="true"] .px{color:inherit;opacity:.9}
.buy{display:flex;gap:12px;align-items:stretch;margin-bottom:26px}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(68,40,35,.22);border-radius:999px;overflow:hidden}
.qty button{width:44px;height:52px;border:0;background:transparent;cursor:pointer;font-size:1.2rem;color:var(--cacao);font-family:var(--sans)}
.qty button:hover{background:var(--beige)}
.qty span{min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.add{flex:1;border:0;cursor:pointer;border-radius:999px;background:var(--cacao);color:var(--crema);font-family:var(--sans);font-weight:500;font-size:1rem;letter-spacing:.02em;padding:0 28px;min-height:52px;transition:transform .12s ease, background .2s}
.add:hover{background:#2c211d}
.add:active{transform:translateY(1px)}
/* text inputs / selects */
.field{margin-bottom:18px}
.field > label{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--olivo);margin-bottom:8px}
.input{width:100%;font-family:var(--sans);font-size:1rem;color:var(--cacao);background:#fff;border:1px solid var(--linea);border-radius:12px;padding:14px 16px;transition:border-color .18s,box-shadow .18s}
.input::placeholder{color:#6F5F57}
.input:focus{outline:0;border-color:var(--linea);box-shadow:0 0 0 3px rgba(169,112,79,.30)}
textarea.input{min-height:96px;resize:vertical;line-height:1.5}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.hint{font-size:.8rem;color:var(--olivo);margin-top:7px}
.grid-2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.grid-2{grid-template-columns:1fr 1fr}}
/* =================== PRODUCT DETAIL (index) =================== */
.product{padding-top:8px;padding-bottom:12px}
.product-grid{display:grid;grid-template-columns:1fr;gap:34px}
.media .frame{aspect-ratio:1/1}
.thumbs{display:flex;gap:10px;margin-top:12px}
.thumbs div{flex:1;aspect-ratio:1;border-radius:5px;background:linear-gradient(160deg,var(--blush),var(--beige));border:1px solid rgba(68,40,35,.06)}
.thumbs div:first-child{outline:1.5px solid var(--linea);outline-offset:2px}
.info h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,9vw,4.1rem);line-height:.98;letter-spacing:-.01em;margin-bottom:14px}
.price{font-size:1.35rem;color:var(--cacao);margin-bottom:20px}
.price .u{font-size:.82rem;color:var(--olivo);letter-spacing:.02em}
.desc{max-width:46ch;color:#4a3a34;margin-bottom:28px}
.assurances{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(68,40,35,.12);border-bottom:1px solid rgba(68,40,35,.12)}
.assurances li{list-style:none;padding:14px 0;flex:1;min-width:120px;font-size:.82rem;color:var(--olivo);display:flex;align-items:center;gap:8px}
.assurances li + li{border-left:1px solid rgba(68,40,35,.12);padding-left:16px}
.assurances .dot{width:5px;height:5px;border-radius:999px;background:var(--salmon);flex:none}
.fulfil{margin-top:18px;font-size:.9rem;color:var(--cacao)}
.fulfil .muted{color:var(--olivo)}
.fulfil a{color:var(--cafe);border-bottom:1px solid var(--linea)}
.product-story{padding-top:56px}
.related{padding-top:60px;padding-bottom:20px}
.related h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin-bottom:6px}
.related .lead{color:var(--olivo);font-size:.92rem;margin-bottom:26px}
.ph-note{max-width:var(--wrap);margin:14px auto 0;padding:0 24px;font-size:.72rem;color:var(--olivo)}
@media (min-width:768px){
.product-grid{grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.media{position:sticky;top:92px}
.media .frame{aspect-ratio:4/5}
.product{padding-top:14px;padding-bottom:20px}
.info h1{margin-bottom:18px}
}
/* =================== ENCARGO (torta a la medida) =================== */
.encargo-head{padding:30px 0 4px}
.encargo-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,7vw,3.4rem);line-height:1.03;margin:6px 0 10px}
.encargo-head .lead{color:var(--olivo);max-width:none} /* 17 sep 2026, Tomás: el texto del encabezado va a todo el ancho del wrap, no tirado a la izquierda */
.encargo{padding:8px 0 132px}
.encargo-grid{display:grid;grid-template-columns:1fr;gap:34px}
.fieldset{padding:26px 0;border-top:1px solid rgba(68,40,35,.12)}
.fieldset:first-child{border-top:0;padding-top:8px}
.fieldset > h2{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-bottom:3px}
.fieldset > .note{font-size:.85rem;color:var(--olivo);margin-bottom:16px}
.fieldset .options:last-child{margin-bottom:0}
.lead-badge{display:inline-flex;align-items:center;gap:9px;background:var(--beige);border-radius:999px;padding:9px 16px;font-size:.85rem;color:var(--cacao);margin-bottom:16px}
.lead-badge .d{width:6px;height:6px;border-radius:999px;background:var(--dorado);flex:none}
.date-row{display:flex;flex-wrap:wrap;gap:16px}
.date-row .field{flex:1;min-width:190px;margin-bottom:0}
/* summary / "tu encargo" */
.summary{background:var(--blush);border-radius:12px;padding:24px}
.summary h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:16px}
.summary .frame{aspect-ratio:4/3;margin-bottom:18px}
.sum-line{display:flex;justify-content:space-between;gap:14px;padding:10px 0;font-size:.92rem;border-top:1px solid rgba(68,40,35,.10)}
.sum-line:first-of-type{border-top:0}
.sum-line .k{color:var(--olivo)}
.sum-line .v{text-align:right;color:var(--cacao)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:16px;border-top:1px solid rgba(68,40,35,.22)}
.sum-total .k{font-size:.9rem;color:var(--olivo)}
.sum-total .v{font-family:var(--serif);font-size:2rem;color:var(--cacao);line-height:1}
.summary .btn{width:100%;margin-top:18px;display:none}
.summary .wa{display:block;text-align:center;margin-top:14px;font-size:.86rem;color:var(--cafe)}
.summary .wa a{border-bottom:1px solid var(--linea)}
.summary .fineprint{font-size:.78rem;color:var(--olivo);margin-top:14px;line-height:1.5}
/* barra fija de precio (móvil) */
.encargo-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(246,238,225,.95);backdrop-filter:blur(8px);border-top:1px solid rgba(68,40,35,.14);padding:12px 0}
.encargo-bar .in{display:flex;align-items:center;justify-content:space-between;gap:14px}
.encargo-bar .pz b{font-family:var(--serif);font-size:1.5rem;line-height:1}
.encargo-bar .pz span{display:block;font-size:.74rem;color:var(--olivo);margin-top:2px}
.encargo-bar .btn{min-height:48px;padding:0 22px}
@media (min-width:900px){
.encargo-grid{grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.summary{position:sticky;top:92px}
.summary .btn{display:flex}
.encargo{padding-bottom:48px}
.encargo-bar{display:none}
}
/* =================== CHECKOUT =================== */
.co-header{border-bottom:1px solid rgba(68,40,35,.10);background:var(--crema);position:sticky;top:0;z-index:20}
.co-header .bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.co-header .back{font-size:.85rem;color:var(--olivo)}
.co-header .back:hover{color:var(--cacao)}
@media(max-width:560px){.co-header .back{display:none}}
.co-header .secure{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--olivo);letter-spacing:.02em}
.checkout{padding:26px 0 64px}
.checkout > .lead{color:var(--olivo);margin:2px 0 24px;max-width:52ch}
.checkout h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,6vw,2.9rem);margin:8px 0 2px}
.co-grid{display:grid;grid-template-columns:1fr;gap:38px}
.co-step{margin-bottom:32px}
.co-step > h2{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:4px;display:flex;align-items:center;gap:12px}
.co-step .n{width:27px;height:27px;border-radius:999px;border:1px solid rgba(68,40,35,.3);display:inline-grid;place-content:center;font-family:var(--sans);font-size:.82rem;color:var(--cafe);flex:none}
.co-step .note{font-size:.85rem;color:var(--olivo);margin:0 0 16px 39px}
.co-body{padding-left:39px}
@media(max-width:520px){.co-step .note,.co-body{margin-left:0;padding-left:0}}
/* option cards (retiro/domicilio · pago) */
.segment{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.opt-card{border:1px solid rgba(68,40,35,.22);border-radius:12px;padding:15px 16px;cursor:pointer;transition:border-color .18s,background .18s;background:#fff;text-align:left;font-family:var(--sans)}
.opt-card:hover{border-color:var(--cacao)}
.opt-card[aria-pressed="true"]{border-color:var(--cacao);background:var(--blush)}
.opt-card .t{font-weight:500;color:var(--cacao);display:flex;align-items:center;justify-content:space-between;gap:8px}
.opt-card .d{font-size:.83rem;color:var(--olivo);margin-top:4px}
.opt-card .tick{width:18px;height:18px;border-radius:999px;border:1px solid rgba(68,40,35,.3);flex:none}
.opt-card[aria-pressed="true"] .tick{background:var(--cacao);border-color:var(--cacao);box-shadow:inset 0 0 0 3px var(--crema)}
.pay-list{display:flex;flex-direction:column;gap:10px}
.pay-card{width:100%}
.pay-card .t .yappy{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cafe);border:1px solid var(--linea);border-radius:999px;padding:3px 9px}
.reveal{margin-top:14px}
.reveal[hidden]{display:none}
/* order summary */
.osum{background:var(--blush);border-radius:12px;padding:24px}
.osum h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-bottom:14px}
.oitem{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid rgba(68,40,35,.10)}
.oitem:first-of-type{border-top:0;padding-top:2px}
.oitem .th{width:54px;height:54px;border-radius:8px;flex:none;background:linear-gradient(160deg,#FBEDE6,var(--beige));position:relative;overflow:hidden}
.oitem .th .t{position:absolute;inset:0;opacity:.10;background-image:repeating-linear-gradient(135deg,var(--cafe) 0 1px,transparent 1px 10px)}
.oitem .oi-name{font-size:.95rem;color:var(--cacao)}
.oitem .oi-sub{font-size:.8rem;color:var(--olivo);margin-top:2px}
.oitem .oi-p{margin-left:auto;font-size:.92rem;white-space:nowrap;color:var(--cacao)}
.totals{margin-top:16px;border-top:1px solid rgba(68,40,35,.16);padding-top:14px}
.trow{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;padding:6px 0;color:var(--olivo)}
.trow .v{color:var(--cacao)}
.trow.tax{color:var(--cafe)}
.grand{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:14px;border-top:1px solid rgba(68,40,35,.22)}
.grand .k{font-size:.9rem;color:var(--olivo)}
.grand .v{font-family:var(--serif);font-size:1.8rem;color:var(--cacao);line-height:1}
.osum .btn{width:100%;margin-top:20px}
.osum .yappy-note{font-size:.8rem;color:var(--olivo);text-align:center;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:7px}
@media (min-width:900px){
.co-grid{grid-template-columns:1.2fr .8fr;gap:52px;align-items:start}
.osum{position:sticky;top:92px;order:2}
}
/* =================== CONFIRMACIÓN (pedido recibido) =================== */
.confirm{padding:52px 0 6px;text-align:center}
.confirm .seal-lg{width:96px;height:96px;border-radius:999px;border:1px solid rgba(68,40,35,.30);display:grid;place-content:center;margin:0 auto 22px;background:rgba(252,230,220,.55)}
.confirm .seal-lg svg{width:38px;height:38px;color:var(--cafe)}
.confirm .eyebrow{justify-content:center}
.confirm .eyebrow::after{display:none}
.confirm h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1.05;margin:4px 0 14px}
.confirm .sub{color:#4a3a34;max-width:48ch;margin:0 auto 20px;font-size:1.05rem}
.confirm .order-id{display:inline-flex;align-items:center;gap:10px;background:var(--beige);border-radius:999px;padding:10px 18px;font-size:.9rem;color:var(--cacao)}
.confirm .order-id b{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.after{padding:20px 0 8px}
.after-grid{display:grid;grid-template-columns:1fr;gap:34px}
.after h2.blk{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:8px}
.steps{list-style:none}
.steps li{display:flex;gap:16px;padding:18px 0;border-top:1px solid rgba(68,40,35,.12)}
.steps li:first-child{border-top:0;padding-top:4px}
.steps .n{width:30px;height:30px;border-radius:999px;border:1px solid rgba(68,40,35,.3);display:grid;place-content:center;font-size:.85rem;color:var(--cafe);flex:none}
.steps h3{font-family:var(--serif);font-weight:400;font-size:1.18rem;margin-bottom:3px}
.steps p{color:var(--olivo);font-size:.92rem;max-width:44ch}
.confirm-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:30px 0 4px}
.recap-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:2px 0 10px}
.recap-head .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--olivo)}
.recap-head .v{font-size:.9rem;color:var(--cacao);text-align:right}
@media(min-width:900px){
.after-grid{grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
}
/* =================== SUCURSALES =================== */
.branches{padding:20px 0 10px}
.branch-grid{display:grid;grid-template-columns:1fr;gap:24px}
.branch{background:var(--beige);border:1px solid rgba(68,40,35,.06);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.branch .map{aspect-ratio:16/9;position:relative;background:radial-gradient(120% 120% at 70% 10%,#FBEDE6,var(--blush) 55%,#E7CCC4)}
.branch .map .t{position:absolute;inset:0;opacity:.12;background-image:repeating-linear-gradient(135deg,var(--cafe) 0 1px,transparent 1px 14px)}
.branch .map .pin{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:999px;border:1px solid rgba(68,40,35,.32);background:rgba(246,238,225,.6);backdrop-filter:blur(2px);display:grid;place-content:center}
.branch .map .pin b{font-family:var(--serif);font-size:1.35rem;color:var(--cacao);line-height:1}
.branch .body{padding:26px 26px 28px}
.branch h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin-bottom:12px}
.branch .row{display:flex;gap:11px;font-size:.92rem;color:var(--cacao);padding:7px 0;align-items:flex-start;line-height:1.5}
.branch .row svg{width:17px;height:17px;color:var(--cafe);flex:none;margin-top:2px}
.branch .row .muted{color:var(--olivo)}
.branch-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.branch-actions .btn{min-height:46px;padding:0 20px;font-size:.92rem}
.branches-note{margin-top:26px;background:var(--blush);border-radius:12px;padding:22px 24px;font-size:.92rem;color:var(--cacao)}
.branches-note strong{font-weight:600}
@media(min-width:768px){.branch-grid{grid-template-columns:1fr 1fr;gap:26px}}
/* ============ FOTOS REALES (sesión 2024, img/) ============ */
.card .img img.ph, .frame img.ph, .oitem .th img.ph, .lane .img img.ph{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.card.sold .img img.ph{filter:grayscale(.7); opacity:.55}
/* =================== CARRITO (drawer lateral) =================== */
.cart .count{visibility:hidden}
.cart-overlay{position:fixed;inset:0;background:rgba(68,40,35,.34);z-index:60;opacity:0;transition:opacity .24s ease}
.cart-overlay:not([hidden]){opacity:1}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:var(--crema);z-index:61;
display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s ease;box-shadow:-18px 0 50px rgba(68,40,35,.16)}
.cart-drawer.open{transform:none}
.cd-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid rgba(68,40,35,.12)}
.cd-head h3{font-family:var(--serif);font-weight:400;font-size:1.5rem}
.cd-close{border:0;background:transparent;font-size:1.1rem;color:var(--olivo);cursor:pointer;width:34px;height:34px;border-radius:999px}
.cd-close:hover{background:var(--beige);color:var(--cacao)}
.cd-body{flex:1;overflow-y:auto;padding:8px 24px}
.cd-empty{text-align:center;padding:56px 10px;color:var(--olivo)}
.cd-empty p{margin-bottom:18px}
.cd-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid rgba(68,40,35,.10)}
.cd-th{width:60px;height:60px;border-radius:8px;flex:none;overflow:hidden;background:linear-gradient(160deg,#FBEDE6,var(--beige))}
.cd-th img{width:100%;height:100%;object-fit:cover}
.cd-info{flex:1;min-width:0}
.cd-nom{font-size:.98rem;color:var(--cacao);line-height:1.3}
.cd-sub{font-size:.8rem;color:var(--olivo);margin-top:2px}
.cd-tag{display:inline-block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cafe);background:var(--blush);padding:3px 8px;border-radius:999px;margin-top:6px}
.cd-qty{display:flex;align-items:center;gap:6px;margin-top:10px}
.cd-qty button{width:30px;height:30px;border:1px solid rgba(68,40,35,.22);background:transparent;border-radius:999px;cursor:pointer;color:var(--cacao);font-size:1rem;line-height:1}
.cd-qty button:hover{background:var(--beige)}
.cd-qty span{min-width:26px;text-align:center;font-variant-numeric:tabular-nums;font-size:.9rem}
.cd-qty .cd-del{width:auto;padding:0 12px;font-size:.78rem;color:var(--olivo);border-color:transparent;margin-left:auto}
.cd-qty .cd-del:hover{color:var(--cafe);background:transparent;text-decoration:underline}
.cd-p{font-size:.95rem;color:var(--cacao);white-space:nowrap}
.cd-foot{padding:20px 24px 24px;border-top:1px solid rgba(68,40,35,.14);background:var(--blush)}
.cd-sub-row{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem;margin-bottom:4px}
.cd-sub-row b{font-family:var(--serif);font-size:1.5rem}
.cd-note{font-size:.78rem;color:var(--olivo);margin-bottom:16px}
.cd-foot .btn{width:100%}
/* toast al agregar */
.cart-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:70;
background:var(--cacao);color:var(--crema);border-radius:999px;padding:12px 20px;display:flex;align-items:center;gap:9px;
font-size:.9rem;box-shadow:0 12px 30px rgba(68,40,35,.28);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:88vw}
.cart-toast.show{opacity:1;transform:translate(-50%,0)}
.cart-toast svg{width:17px;height:17px;color:var(--salmon);flex:none}
/* estado vacío del checkout */
.co-empty{text-align:center;padding:60px 20px 40px;max-width:440px;margin:0 auto}
.co-empty .seal-lg{width:78px;height:78px;border-radius:999px;border:1px solid rgba(68,40,35,.28);display:grid;place-content:center;margin:0 auto 20px;background:rgba(252,230,220,.5)}
.co-empty h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin-bottom:8px}
.co-empty p{color:var(--olivo);margin-bottom:22px}
/* =================== PANEL DE OPERACIÓN (interno · Kimberly) =================== */
.ops-header{background:var(--cacao);color:var(--crema);position:sticky;top:0;z-index:20}
.ops-header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.ops-header .brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.ops-header .wordmark{font-family:var(--serif);font-size:1.4rem;color:var(--crema)}
.ops-header .tagi{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#c9b4ac;white-space:nowrap}
.ops-header .who{font-size:.82rem;color:#d9c9c2;display:flex;align-items:center;gap:8px}
.ops-header .who .av{width:26px;height:26px;border-radius:999px;background:var(--salmon);color:var(--cacao);display:grid;place-content:center;font-size:.8rem;font-weight:600}
.ops-note{background:var(--blush);border-bottom:1px solid rgba(68,40,35,.10)}
.ops-note .in{padding:11px 0;font-size:.82rem;color:var(--cafe);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ops-note .in b{font-weight:600}
.ops-note .demo-actions{margin-left:auto;display:flex;gap:8px}
.ops-note .lnk{font-size:.8rem;color:var(--cafe);background:transparent;border:1px solid rgba(101,50,21,.3);border-radius:999px;padding:6px 14px;cursor:pointer}
.ops-note .lnk:hover{background:#fff}
.ops{padding:26px 0 60px}
.ops-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:26px}
.metric{background:var(--beige);border:1px solid rgba(68,40,35,.07);border-radius:12px;padding:16px 18px}
.metric .n{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--cacao)}
.metric .l{font-size:.78rem;color:var(--olivo);margin-top:6px;letter-spacing:.02em}
.ops-grid{display:grid;grid-template-columns:1fr;gap:24px}
.ops-col h2{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-bottom:4px}
.ops-col .sub{font-size:.86rem;color:var(--olivo);margin-bottom:18px}
/* tarjeta de pedido */
.ops-order{background:#fff;border:1px solid rgba(68,40,35,.12);border-radius:14px;padding:18px 18px 16px;margin-bottom:16px}
.ops-order.is-done{opacity:.62}
.oo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.oo-id{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.03em;color:var(--cacao)}
.oo-when{font-size:.78rem;color:var(--olivo);margin-top:2px}
.oo-cli{font-size:.9rem;color:var(--cacao);margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 14px}
.oo-cli .muted{color:var(--olivo)}
.est{font-size:.72rem;letter-spacing:.05em;padding:6px 12px;border-radius:999px;white-space:nowrap;font-weight:500}
.est--nuevo{background:#F6DDD9;color:#9B3B34}
.est--confirmado{background:#EFE0C4;color:#8A6A1E}
.est--produccion{background:#EAD9CE;color:var(--cafe)}
.est--listo{background:#DBE2D3;color:#4C5A3C}
.est--entregado{background:#E4DACF;color:var(--olivo)}
.oo-lines{border-top:1px solid rgba(68,40,35,.10);border-bottom:1px solid rgba(68,40,35,.10);padding:12px 0;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.oo-line{display:flex;gap:11px;align-items:center;font-size:.9rem}
.oo-line .th{width:38px;height:38px;border-radius:7px;flex:none;overflow:hidden;background:linear-gradient(160deg,#FBEDE6,var(--beige))}
.oo-line .th img{width:100%;height:100%;object-fit:cover}
.oo-line .q{color:var(--cafe);font-variant-numeric:tabular-nums;font-weight:600;min-width:26px}
.oo-line .nm{color:var(--cacao);flex:1;min-width:0}
.oo-line .enc{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cafe);background:var(--blush);padding:2px 7px;border-radius:999px}
.oo-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;color:var(--cacao);margin-bottom:14px}
.oo-meta .k{color:var(--olivo)}
.oo-meta .pill-pay{font-size:.72rem;padding:3px 9px;border-radius:999px;background:var(--beige);color:var(--cafe)}
.oo-meta .pill-pay.pagado{background:#DBE2D3;color:#4C5A3C}
.oo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.oo-total{font-size:.95rem;color:var(--cacao)}
.oo-total b{font-family:var(--serif);font-size:1.2rem}
.oo-act{border:0;cursor:pointer;border-radius:999px;background:var(--cacao);color:var(--crema);font-family:var(--sans);font-size:.84rem;padding:9px 16px;transition:background .2s}
.oo-act:hover{background:#2c211d}
.oo-act.done{background:transparent;color:var(--olivo);border:1px solid rgba(68,40,35,.2);cursor:default}
/* panel de producción (la costura) */
.prod-panel{background:var(--beige);border:1px solid rgba(68,40,35,.08);border-radius:14px;padding:22px}
.prod-panel h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:3px}
.prod-panel .ph-sub{font-size:.82rem;color:var(--olivo);margin-bottom:18px;line-height:1.5}
.prod-group{margin-bottom:18px}
.prod-group .gh{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cafe);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.prod-group .gh::after{content:"";flex:1;height:1px;background:rgba(101,50,21,.18)}
.prod-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;font-size:.9rem;border-bottom:1px dotted rgba(68,40,35,.16)}
.prod-row:last-child{border-bottom:0}
.prod-row .nm{color:var(--cacao)}
.prod-row .q{font-variant-numeric:tabular-nums;color:var(--cafe);font-weight:600;white-space:nowrap}
.prod-empty{font-size:.86rem;color:var(--olivo);padding:6px 0}
.prod-foot{margin-top:14px;padding-top:14px;border-top:1px solid rgba(68,40,35,.2);font-size:.82rem;color:var(--olivo);line-height:1.5}
.prod-foot b{color:var(--cacao)}
@media (min-width:560px){ .ops-metrics{grid-template-columns:repeat(4,1fr)} }
@media (min-width:960px){
.ops-grid{grid-template-columns:1.5fr .95fr;gap:34px;align-items:start}
.prod-panel{position:sticky;top:90px}
}
@media (max-width:640px){
.ops-header .tagi{display:none}
.ops-header .who{font-size:.76rem;line-height:1.2;text-align:right}
.ops-note .in{font-size:.8rem}
.ops-note .demo-actions{margin-left:0;width:100%}
}
/* ==========================================================
CAPA MARCA VIVIE — aplicada sobre la maqueta (añadida, no destructiva)
Logo PRIMARIO = wordmark ROSSELOT (manual Vivie), hex oficiales
(#fee5db / #58595b), pinceladas y tagline. Quitar este bloque
devuelve la maqueta a su estado anterior.
========================================================== */
/* ---------------------------------------------------------------------------
ENTREGA FINAL DE VIVIE, 9 sep 2026. Los hex ya no se muestrean del deck:
salen de la hoja de paleta oficial (PALETA-ROSSELOT.pdf), con su Pantone.
Respaldo del estado anterior: styles.css.bak_20260909_pre_entrega_vivie
El cuerpo pasa a Geist, que es la tipografía de párrafo de la marca y es
libre (SIL OFL), así que se puede autohospedar sin licencia.
Los TÍTULOS siguen en Zodiak hasta que se vote el muro de tipografía:
Marca_diseno/MURO_marca_final_260909/muro.html
--------------------------------------------------------------------------- */
/* Vivie especifica Geist LIGHT para párrafos, así que el peso normal (400) tiene
que resolver a Light, no a Medium. Sin este rango el texto corrido sale en
Medium, porque 400 elige el más cercano y solo existiría el 500. */
@font-face{font-family:'Geist';src:url('fonts/Geist-Light.woff2') format('woff2');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('fonts/Geist-Medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
:root{
/* --- Paleta oficial. Hex, Pantone y rol. --- */
--blush:#FCE6DC; /* Rosa Salmón · PANTONE 9240 C · fondo firma */
--salmon:#E7B9B9; /* Rosa · PANTONE 4064 C · acentos suaves */
--cacao:#442823; /* Marrón · PANTONE 4975 C · texto y footer */
--cafe:#653215; /* Caramelo · PANTONE 732 C · acción y precio */
--dorado:#CDA776; /* Dorado · PANTONE 466 C · badges y bordes */
--crema:#F6EEE1; /* Crema · PANTONE 9224 C · fondo de página */
--beige:#FBF9EF; /* Blanco Hueso · superficies */
--papel:#FCFBF5; /* Blanco · superficie alterna */
--olivo:#585955; /* Gris · PANTONE 425 C · metadatos y wordmark */
/* --- Derivados. La paleta no trae estados ni hover; se sacan del caramelo
clonando su claridad y saturación y girando solo el tono. --- */
--cafe-hover:#552506;
--exito:#2F5F36;
--error:#9B2C30;
--linea:#A9704F; /* borde y foco. Es el más claro de la familia que llega a 3:1
contra los cuatro fondos: crema 3.56, hueso 3.89, salmón 3.42.
El rosa se queda en 1.51 y el dorado en 1.86, así que ninguno
de los dos sirve como línea que hay que ver. */
--hueso:#FBF9EF; /* alias: historia.html lo pedía y no existía */
--sans:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Logo PRIMARIO (wordmark) en el header — reemplaza el texto.
Desde el 9 sep sale del vectorial oficial, no del PNG recortado a mano.
Proporción real del archivo: 874.32 x 162.3 = 5.386:1 */
.site-header .wordmark,
.co-header .wordmark{
width:146px;height:27.1px;padding:0;
background:url('img/marca/oficial/wordmark-gris.svg') left center/contain no-repeat;
text-indent:-9999px;overflow:hidden;white-space:nowrap;
}
/* Wordmark claro en el footer (sobre el cacao oscuro) */
footer .wordmark{
width:162px;height:30.1px;
background:url('img/marca/oficial/wordmark-hueso.svg') left center/contain no-repeat;
text-indent:-9999px;overflow:hidden;
}
/* Sello del hero = logo SECUNDARIO oficial, el óvalo con el apellido.
Votado por Tomás el 9 sep 2026 sobre el muro, contra la R sola.
Lo que había antes era un PNG recortado a mano, circular, con PASTELERIA y
CAFETERIA SIN tildes y fondo #FDE2DB, que no está en la paleta.
El tamaño no es libre: el óvalo tiene su trazo más fino en 0.52% del alto y
por debajo de ~96 px de ancho las palabras se cierran. Va a 126 px.
Proporción real del archivo: 946.57 x 742.45 = 1.275:1 */
.seal{
border:none;box-shadow:none;border-radius:0;
background:url('img/marca/oficial/sello-sobre-salmon.svg') center/contain no-repeat;
width:126px;height:98.8px;
}
.seal b,.seal span{display:none}
/* Banda de historia: salmón + las TEXTURAS DE PRODUCTO de la marca como filigrana.
Votado por Tomás el 9 sep 2026: entran los dibujos de los productos, NO la
retícula de flores. Las pinceladas viejas siguen fuera (decisión del 9 jul).
Son máscaras con alfa, así que el color sale del token y no del archivo: una
sola imagen sirve para cualquier color de la paleta. */
.home-story .story{
background:var(--blush);position:relative;overflow:hidden;
}
.home-story .story::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:var(--salmon);opacity:.32;
-webkit-mask-image:url('img/texturas/milhojas.png'),url('img/texturas/alfajor.png');
mask-image:url('img/texturas/milhojas.png'),url('img/texturas/alfajor.png');
-webkit-mask-repeat:no-repeat,no-repeat;
mask-repeat:no-repeat,no-repeat;
-webkit-mask-position:-70px 60%, right -50px top 6%;
mask-position:-70px 60%, right -50px top 6%;
-webkit-mask-size:360px auto, 220px auto;
mask-size:360px auto, 220px auto;
}
@media (max-width:700px){
/* en móvil la banda es angosta: un solo motivo, más chico, o se come el texto */
.home-story .story::before{
-webkit-mask-image:url('img/texturas/milhojas.png');
mask-image:url('img/texturas/milhojas.png');
-webkit-mask-position:-50px bottom -20px;
mask-position:-50px bottom -20px;
-webkit-mask-size:240px auto;
mask-size:240px auto;
opacity:.26;
}
}
.home-story .inner{position:relative;z-index:1}
.home-story .inner .eyebrow{color:var(--olivo)}
.home-story .inner p{color:#4a3a34}
.home-story .inner::after{ /* tagline oficial */
content:"Tradición que se comparte.";
display:block;margin-top:22px;
font-family:var(--serif);font-style:italic;font-size:1.15rem;
letter-spacing:.01em;color:var(--olivo);
}
/* Botón "Ver producto" de las fichas: centrado + flecha (decisión de Tomás 9 jul) */
.card .add-min{display:flex;align-items:center;justify-content:center;gap:7px}
.card .add-min .arw{transition:transform .18s}
.card:hover .add-min .arw{transform:translateX(3px)}
/* Header en móvil: con 5 enlaces (Vitrina/Pedidos/Historia/Buscar/Carrito) el
nav aplastaba el wordmark; ahora el header envuelve en dos filas: logo
arriba, nav abajo a lo ancho. */
@media(max-width:560px){
.site-header .bar{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:12px;gap:10px 12px}
.site-header .wordmark{width:132px;height:24px;flex:0 0 auto}
.nav{width:100%;justify-content:space-between;gap:10px}
.nav a{font-size:.72rem;letter-spacing:.03em}
}
@media(max-width:380px){
.nav{gap:8px}
.nav a{font-size:.66rem}
}
/* ==========================================================
PALETA — Camino B (aprobado 9 jul): base salmón/neutros,
caramelo en la acción y el precio, dorado en badges y bordes.
Solo redirige roles de color; no cambia la estructura.
========================================================== */
/* Acción → caramelo */
.btn--primary{background:var(--cafe)}
.btn--primary:hover{background:#5A3019}
.add{background:var(--cafe)}
.add:hover{background:#5A3019}
.pill[aria-pressed="true"]{background:var(--cafe);border-color:var(--cafe)}
.filters .chip[aria-pressed="true"]{background:var(--cafe);border-color:var(--cafe)}
/* Ficha "Ver producto": borde dorado, hover caramelo */
.card .add-min{border-color:var(--linea)}
.card .add-min:hover{background:var(--cafe);border-color:var(--cafe);color:var(--crema)}
/* Precio → caramelo */
.card .p{color:var(--cafe)}
.price{color:var(--cafe)}
/* Badges → dorado sólido con texto marrón (el de "agotado" se queda gris) */
.card .img .badge,.lane .img .tag{background:var(--dorado);color:#442823}
.card.sold .img .badge{background:rgba(88,89,85,.18);color:var(--olivo)}
/* FIX móvil (ROS-QR1, 16 jul): varias secciones (.cat-head, .hero, .catalog,
footer .inner, etc.) pisan con su shorthand el padding lateral de .wrap y
el contenido quedaba pegado al borde de la pantalla en móvil. Esta regla,
al ir al final, devuelve los 24px laterales a TODO .wrap sin tocar los
paddings verticales de cada sección. Respaldo: styles.css.bak_ros-qr1 */
.wrap, footer .inner{padding-left:24px;padding-right:24px}
/* MERGE ROS-MERGE1 (16 jul): las cards de torta del catálogo enlazan a su ficha
(torta.html?id=…). La imagen pasa de a
: como anchor es inline y
aspect-ratio no aplicaría, se fuerza display:block. El nombre-enlace subraya
al pasar el mouse para que se note que hay ficha. */
.card a.img{display:block}
.card a.name:hover{text-decoration:underline;text-underline-offset:3px}
/* RONDA 260716 · n04: el botón "Ver producto"/"Agregar" quedaba a alturas
distintas según cuántas líneas ocupara el nombre (y pegado al borde en los
de dos líneas). La card pasa a columna flex y el botón se ancla abajo,
con 10px mínimos de respiro sobre él. */
.card{display:flex;flex-direction:column}
.card .add-min{margin-top:auto}
.card > :nth-last-child(2){margin-bottom:10px}
/* RONDA 260716 · n01: el encabezado de La vitrina quedaba arrinconado contra
la esquina (intro angosta + buscador a todo lo ancho). Más aire arriba y
un ancho de lectura mayor para que la intro respire. */
.cat-head{padding:64px 0 18px}
.cat-head .lead{max-width:68ch}
/* ===== ROS-TDC · pago con tarjeta (16 sep 2026, hallazgos de la auditoría) =====
El estado del cobro era .hint (12.8px) y vivía DEBAJO del iframe de 480px del
banco: el cliente no lo veía en el momento de más ansiedad de la compra. Ahora
es una caja propia, arriba del widget, y una región aria-live. */
#cs-estado{
margin:0 0 14px;
padding:14px 16px;
border:2px solid var(--cafe);
border-radius:12px;
background:var(--crema);
color:var(--cacao);
font:500 1.0625rem/1.45 var(--sans);
text-align:left;
overflow-wrap:anywhere;
}
/* vacío no ocupa espacio, pero sigue en el árbol para que se anuncie */
#cs-estado:empty{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
overflow:hidden;clip-path:inset(50%);
}
#tarjeta-wrap{
padding:14px;
border:1px solid var(--salmon);
border-radius:12px;
background:var(--beige);
}
.cs-heading{
margin:0 0 10px;
color:var(--cacao);
font:500 1.0625rem/1.4 var(--sans);
}
/* marcas escritas, no logos: no inventamos sellos que no tenemos licencia de usar */
.cs-brands{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cs-brands > span{
padding:2px 9px;
border:1px solid var(--salmon);
border-radius:6px;
background:var(--beige);
color:var(--cacao);
font:500 .8125rem/1.5 var(--sans);
letter-spacing:.01em;
}
/* foco visible en los campos propios del checkout: el salmón sobre blanco
daba ~2:1 de contraste y no se veía */
.checkout .input:focus-visible{
outline:2px solid var(--cafe);
outline-offset:3px;
border-color:var(--cafe);
box-shadow:none;
}
/* El botón de Yappy (web component con encapsulado emulado, DOM claro) trae un