/* Sitio web público (tienda/marca) — tokens de marca dinámicos vía --brand (color-mix
   deriva las variantes claras/oscuras en tiempo de uso, no hace falta que el backend
   las calcule). Compartido por structures/tienda.ejs, structures/marca.ejs y product.ejs.
   TEMA por negocio sobre la estructura compartida — no usa tokens.css a propósito
   (la paleta la elige el comercio). --radius-lg vive como --web-radius-lg (22px, valor
   propio de este tema) para no colisionar de nombre con --radius-lg de tokens.css (16px). */
:root {
    --brand: #1e3a8a;
    --brand-dark: color-mix(in srgb, var(--brand) 82%, black);
    --brand-darker: color-mix(in srgb, var(--brand) 66%, black);
    --brand-light: color-mix(in srgb, var(--brand) 14%, white);
    --brand-lighter: color-mix(in srgb, var(--brand) 7%, white);
    --brand-ink: color-mix(in srgb, var(--brand) 90%, black);

    --ink: #1a1f24;
    --ink-soft: #4c5661;
    --ink-faint: #7c8894;
    --bg: #f6f7f8;
    --surface: #ffffff;
    --border: #e3e6ea;
    --border-soft: #edeff2;
    --amber: #b3720f;
    --amber-bg: #fbedd1;
    --terracotta: #ad3f27;
    --terracotta-bg: #f6ded6;

    --radius-sm: 8px;
    --radius: 14px;
    --web-radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(20, 24, 30, .06), 0 1px 1px rgba(20, 24, 30, .04);
    --shadow-md: 0 8px 24px -8px rgba(20, 24, 30, .18);
    --shadow-lg: 0 24px 60px -20px rgba(20, 24, 30, .28);

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-display: var(--font-body);
    --header-h: 68px;
}
body[data-font="serif"] { --font-body: Georgia, 'Times New Roman', serif; --font-display: 'Fraunces', Georgia, serif; }
body[data-font="redondeada"] { --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif; --font-display: 'Nunito', 'Segoe UI', system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; color: var(--ink); }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; border-radius: 4px; }

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--brand-darker); color: #fff;
    padding: .75rem 1.25rem; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Oculto visual pero accesible (labels de inputs, etc.). NO usar .skip-link para esto:
   su left:-999px es relativo al contenedor posicionado y puede asomar en pantalla. */
.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;
}

.draft-banner {
    position: sticky; top: 0; z-index: 200; background: #f59e0b; color: #1f2937;
    text-align: center; padding: 6px 12px; font: 600 13px var(--font-body);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header / Nav ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(246, 247, 248, .92); backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: var(--header-h); display: flex; align-items: center; gap: 18px; }
/* min-width:0 (NO flex-shrink:0): con nombres largos en pantallas angostas el logo
   cede espacio y el nombre se corta con "…" — sin esto empujaba el carrito y el
   hamburguesa fuera del viewport ("el menú se tapa", reporte del dueño 2026-07-12). */
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.logo-mark {
    width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(150deg, var(--brand) 0%, var(--brand-darker) 100%);
    color: var(--on-brand, #fff); display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
    font-weight: 700; font-size: 1.05rem; box-shadow: 0 3px 8px -2px rgba(10, 20, 40, .5); flex-shrink: 0;
    overflow: hidden;
}
.logo-word { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; letter-spacing: .01em; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-word span { display: block; font-family: var(--font-body); font-weight: 600; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Logo subido: imagen completa, sin recorte ni fondo — reemplaza monograma + nombre entero. */
.logo-img { height: 42px; width: auto; max-width: min(180px, 45vw); object-fit: contain; flex-shrink: 0; display: block; }

.nav-links { display: none; gap: 2px; margin-left: 4px; }
.nav-link { background: none; border: none; padding: 9px 13px; border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: background .15s, color .15s; }
@media (hover: hover) { .nav-link:hover { background: var(--brand-light); color: var(--brand-darker); } }

/* Submenú de categorías del nav (data-nav-dd): "Catálogo" despliega los grupos del
   catálogo; el ítem activo queda marcado (is-active, sincronizado con sidebar/chips). */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.dd-caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform .18s ease; }
.nav-dd.open .dd-caret, .mm-cat.open .dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 1px; z-index: 130;
}
.nav-dd.open .nav-dd-menu { display: flex; }
.nav-dd-item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 12px; border-radius: 9px; font-size: .9rem; font-weight: 600;
    color: var(--ink-soft); white-space: nowrap; transition: background .15s, color .15s;
}
@media (hover: hover) { .nav-dd-item:hover { background: var(--brand-light); color: var(--brand-darker); } }
.nav-dd-item .count, .mm-cat-link .count { font-size: .74rem; font-weight: 700; color: var(--ink-faint); background: var(--bg); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }
.nav-dd-item.is-active, .mm-cat-link.is-active { background: var(--brand-light); color: var(--brand-darker); }
.nav-dd-item.is-active .count, .mm-cat-link.is-active .count { color: var(--brand-darker); }

.nav-search { flex: 1; max-width: 300px; display: none; position: relative; margin-left: auto; }
.nav-search input { width: 100%; padding: 9px 14px 9px 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .88rem; color: var(--ink); }
.nav-search input:focus { border-color: var(--brand); }
.nav-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; opacity: .55; pointer-events: none; }
.nav-search-mobile { display: block; margin-left: 0; padding: 0 0 14px; }
.nav-search-mobile .nav-search { display: flex; max-width: none; }

.nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background .15s; }
@media (hover: hover) { .icon-btn:hover { background: var(--brand-light); } }
.icon-btn svg { width: 20px; height: 20px; }
.cart-badge {
    position: absolute; top: -1px; right: -1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
    background: var(--terracotta); color: #fff; font-size: .64rem; font-weight: 700; display: flex; align-items: center;
    justify-content: center; border: 2px solid var(--bg);
}
.cart-badge[hidden] { display: none; }
.hamburger { display: flex; }

/* ---------- Overlay / mobile menu / cart drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(15, 20, 25, .42); z-index: 110; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.overlay.open { opacity: 1; pointer-events: auto; }

.mobile-menu, .cart-drawer {
    position: fixed; top: 0; right: 0; height: 100%; background: var(--surface);
    z-index: 120; transform: translateX(100%); transition: transform .28s ease; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow-y: auto;
}
.mobile-menu { width: min(320px, 88vw); }
.cart-drawer { width: min(400px, 92vw); }
.mobile-menu.open, .cart-drawer.open { transform: translateX(0); }
.mobile-menu { padding: 20px; gap: 18px; }
.mobile-menu-head, .drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--border-soft); }
.drawer-head h2, .mobile-menu-head h2 { font-size: 1.1rem; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu .nav-link { text-align: left; padding: 13px 14px; font-size: 1.02rem; }
/* Acordeón "Catálogo" del menú móvil: tocar el toggle despliega las categorías. */
.mm-cat { display: flex; flex-direction: column; }
.mobile-menu .mm-cat .nav-dd-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; }
.mm-cat-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 4px 14px; padding-left: 10px; border-left: 2px solid var(--border-soft); }
.mm-cat.open .mm-cat-sub { display: flex; }
.mobile-menu .mm-cat-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; font-size: .95rem; }
.mobile-menu-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: .82rem; color: var(--ink-faint); line-height: 1.6; }

/* El atributo hidden SIEMPRE gana (fix 2026-07-14): cualquier regla de display del
   autor (.checkout-form label { display:flex }, .btn { display:inline-flex }…) pisa el
   display:none del UA para [hidden] — por eso "Dirección de entrega" y el botón de
   WhatsApp de la nota se veían aunque el JS los ocultara. Regla global > parches
   caso a caso (.cart-badge[hidden] etc. quedan redundantes pero inofensivos). */
[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 1px solid transparent;
    padding: 11px 22px; font-weight: 700; font-size: .93rem; transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.btn-primary { background: var(--brand); color: var(--on-brand, #fff); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 60%, transparent); }
@media (hover: hover) { .btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); } }
.btn-primary:disabled { background: #c1c7cd; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--brand); color: var(--brand-darker); background: var(--brand-lighter); } }
.btn-whatsapp { background: #2fa352; color: #fff; }
@media (hover: hover) { .btn-whatsapp:hover { background: #268a44; transform: translateY(-1px); } }
.btn-whatsapp:disabled { background: #c1c7cd; cursor: not-allowed; transform: none; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-cta { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border: none; border-radius: 999px; background: var(--brand-light); color: var(--brand-darker); font-weight: 700; font-size: .82rem; white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .btn-cta:hover { background: var(--brand); color: var(--on-brand, #fff); } }
.link-more { background: none; border: none; color: var(--brand-dark); font-weight: 700; font-size: .88rem; }
@media (hover: hover) { .link-more:hover { text-decoration: underline; } }

/* ---------- Placeholder media ---------- */
.ph { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--brand-light) 0%, var(--brand) 100%); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--on-brand, #fff); }
.ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .3), transparent 55%); }
.ph span { position: relative; z-index: 1; font-size: 2.4rem; opacity: .92; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .16)); }

/* ---------- Hero ---------- */
.hero {
    position: relative; max-width: 1280px; margin: 0 auto; padding: 44px 20px 56px; display: flex; flex-direction: column; gap: 28px;
    scroll-margin-top: var(--header-h); color: #fff;
}
.hero-cover { position: absolute; inset: 0; background-size: cover; z-index: -2; }
.hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 20, .35), rgba(10, 14, 20, .72)); }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand), var(--brand-darker)); z-index: -2; }
/* Sin portada, el hero cae al degradado de marca (arriba) en vez de quedar en blanco — por eso
   estas reglas ya no dependen de `.has-cover`: el hero siempre tiene fondo oscuro (foto+overlay
   o degradado), así que el texto/botones siempre necesitan tratamiento claro. */
.hero .hero-text p, .hero .hero-meta { color: rgba(255, 255, 255, .88); }
.hero h1 { color: #fff; }
.hero .eyebrow { background: rgba(255, 255, 255, .18); color: #fff; }
.hero .btn-primary { background: #fff; color: var(--brand-dark); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
@media (hover: hover) { .hero .btn-primary:hover { background: #fff; color: var(--brand-darker); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .4); } }
.hero .btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); }
@media (hover: hover) { .hero .btn-ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; border-color: rgba(255, 255, 255, .7); } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-dark); background: var(--brand-light); padding: 6px 14px; border-radius: 999px; }
.hero-text h1 { font-size: 2.25rem; margin: 14px 0 14px; letter-spacing: -.01em; }
.hero-sub { font-size: 1.02rem; max-width: 52ch; margin-bottom: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Sections ---------- */
.section { max-width: 1280px; margin: 0 auto; padding: 36px 20px; scroll-margin-top: var(--header-h); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head h2 { font-size: 1.5rem; }
.grid-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ---------- Product card ---------- */
.product-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: box-shadow .18s ease, transform .18s ease; }
@media (hover: hover) { .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } }
.card-media-btn { border: none; background: none; padding: 0; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.card-media-btn .ph, .card-media-btn img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.card-media-btn .ph span { font-size: 3rem; }
.card-body { padding: 13px 13px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-name { font-size: .96rem; font-weight: 700; }
.card-name a { color: var(--ink); }
@media (hover: hover) { .card-name a:hover { color: var(--brand-dark); text-decoration: underline; } }
.card-desc { font-size: .8rem; color: var(--ink-faint); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* margin-top:auto ancla el pie (precio+CTA) al fondo: las cards con y sin descripción
   alinean su fila de precio en la misma línea dentro de la grilla. */
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.card-price { font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Todas las acciones de la card (Agregar / Reservar / Pedir presupuesto) van debajo del precio, a
   ancho completo: al costado se cortan en pantallas angostas (iPhone). Progresivo: navegadores sin
   :has() mantienen el layout en fila (solo precio, sin corte). */
.card-foot:has(.btn-cta) { flex-direction: column; align-items: stretch; gap: 10px; }
.card-foot:has(.btn-cta) .btn-cta { width: 100%; white-space: normal; }
.pill { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: .66rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.pill-low { background: var(--amber-bg); color: var(--amber); }
.pill-out { background: var(--terracotta-bg); color: var(--terracotta); }
.product-card.is-out .card-media-btn { opacity: .55; }
.product-card.is-out .card-price { color: var(--ink-faint); }

/* ---------- Catálogo por grupos ----------
   Sin sidebar de categorías (decisión del dueño 2026-07-11): en escritorio el filtro
   vive en el submenú "Catálogo" del nav; en móvil quedan los chips. */
.catalog-wrap { max-width: 1280px; margin: 0 auto; padding: 20px; display: flex; gap: 28px; align-items: flex-start; scroll-margin-top: var(--header-h); }
.chips-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: thin; }
.chip { flex-shrink: 0; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .84rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
@media (hover: hover) { .chip:hover { border-color: var(--brand); color: var(--brand-dark); } }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
.catalog-main { flex: 1; min-width: 0; }
.group-section { margin-bottom: 34px; scroll-margin-top: var(--header-h); }
.group-section h3 { font-size: 1.15rem; margin-bottom: 14px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.empty-state { padding: 50px 20px; text-align: center; color: var(--ink-faint); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.empty-state .emoji { font-size: 2.2rem; }
/* La sección hidden nativa (atributo `hidden`) empata en especificidad con `.empty-state`
   (display:flex) — sin este override, el estado vacío del buscador queda visible siempre. */
.empty-state[hidden] { display: none; }

.catalog-header { max-width: 1280px; margin: 0 auto; padding: 32px 20px 4px; scroll-margin-top: var(--header-h); }
.catalog-header h2 { font-size: 1.7rem; }

/* ---------- Nosotros / Galería ---------- */
.nosotros-body { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; max-width: 68ch; white-space: pre-line; }
.galeria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.galeria-grid img { aspect-ratio: 4/3; width: 100%; object-fit: cover; border-radius: var(--radius); }

/* ---------- Contacto ---------- */
.contacto-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
.map-ph {
    aspect-ratio: 16/9; border-radius: var(--web-radius-lg); position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--brand-light), var(--brand)); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.map-pin { text-align: center; color: var(--on-brand, #fff); }
.map-pin svg { width: 34px; height: 34px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.map-pin p { font-weight: 700; background: rgba(255, 255, 255, .92); color: var(--ink); padding: 6px 14px; border-radius: 999px; margin-top: 8px; font-size: .82rem; }
.info-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.info-card h2 { font-size: 1.02rem; margin-bottom: 12px; }
.info-row { display: flex; justify-content: space-between; font-size: .87rem; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.info-row:last-child { border-bottom: none; }
.info-row span:first-child { color: var(--ink-faint); }
.contact-links { display: flex; flex-direction: column; gap: 2px; }
.contact-link { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: .89rem; font-weight: 600; border-bottom: 1px solid var(--border-soft); }
.contact-link:last-child { border-bottom: none; }
@media (hover: hover) { .contact-link:hover { color: var(--brand-dark); } }
.contact-link svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Cart drawer ---------- */
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 14px; }
.cart-item { display: flex; gap: 12px; }
.cart-item-media { width: 62px; height: 62px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; }
.cart-item-media img, .cart-item-media .ph { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.cart-item-media .ph span { font-size: 1.3rem; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h3 { font-size: .89rem; font-weight: 700; margin-bottom: 2px; }
.cart-item-price { font-size: .8rem; color: var(--ink-faint); margin-bottom: 8px; }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; }
.stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.stepper button { width: 30px; height: 30px; background: var(--surface); border: none; font-size: 1rem; color: var(--ink); }
@media (hover: hover) { .stepper button:hover { background: var(--brand-light); } }
.stepper span { width: 28px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .86rem; }
.remove-btn { background: none; border: none; color: var(--ink-faint); font-size: .76rem; font-weight: 700; text-decoration: underline; }
@media (hover: hover) { .remove-btn:hover { color: var(--terracotta); } }
.drawer-footer { border-top: 1px solid var(--border-soft); padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.drawer-footer label { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.drawer-footer textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: .85rem; resize: vertical; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: center; font-size: .98rem; padding: 4px 0; }
.cart-subtotal strong { font-size: 1.18rem; font-variant-numeric: tabular-nums; }

/* ---------- Ficha de producto ---------- */
.producto-view { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-faint); margin-bottom: 22px; }
.breadcrumb a { color: var(--ink-faint); font-weight: 600; }
@media (hover: hover) { .breadcrumb a:hover { color: var(--brand-dark); text-decoration: underline; } }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700; }
.producto-layout { display: grid; grid-template-columns: 1fr; gap: 30px; }
.producto-media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); }
.producto-media img, .producto-media .ph { width: 100%; height: 100%; border-radius: var(--radius); object-fit: cover; }
.producto-media .ph span { font-size: 4rem; }
.producto-cat { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-dark); margin-bottom: 8px; }
.producto-info h1 { font-size: 1.8rem; margin-bottom: 12px; }
.producto-price { font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.stock-badge { display: inline-block; font-size: .74rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .03em; }
.stock-ok { background: var(--brand-light); color: var(--brand-darker); }
.stock-low { background: var(--amber-bg); color: var(--amber); }
.stock-out { background: var(--terracotta-bg); color: var(--terracotta); }
.producto-desc { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; margin-bottom: 22px; max-width: 56ch; white-space: pre-line; }
.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; font-weight: 700; font-size: .89rem; }
.related { max-width: 1180px; margin: 0 auto; padding-top: 48px; }
.related h2 { font-size: 1.25rem; margin-bottom: 16px; }

/* ---------- Estructura "marca": nav overlay transparente→sólida sobre el hero ----------
   Activado por body[data-structure="marca"] (ver views/web/index.ejs); la clase .is-solid la
   togglea site.js al hacer scroll (hook activado por el mismo data-attribute, ver site.js). */
body[data-structure="marca"] .site-header {
    position: fixed; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none;
    border-bottom-color: transparent; box-shadow: none;
    transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body[data-structure="marca"] .site-header .logo-word,
body[data-structure="marca"] .site-header .logo-word span,
body[data-structure="marca"] .site-header .nav-link,
body[data-structure="marca"] .site-header .icon-btn { color: #fff; }
body[data-structure="marca"] .site-header .nav-search input { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; }
body[data-structure="marca"] .site-header .nav-search input::placeholder { color: rgba(255, 255, 255, .75); }
body[data-structure="marca"] .site-header .nav-search svg { color: #fff; opacity: .85; }
@media (hover: hover) { body[data-structure="marca"] .site-header .nav-link:hover { background: rgba(255, 255, 255, .16); color: #fff; } }
@media (hover: hover) { body[data-structure="marca"] .site-header .icon-btn:hover { background: rgba(255, 255, 255, .16); } }
body[data-structure="marca"] .site-header.is-solid {
    background: rgba(246, 247, 248, .94); backdrop-filter: blur(10px) saturate(1.2);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
body[data-structure="marca"] .site-header.is-solid .logo-word,
body[data-structure="marca"] .site-header.is-solid .logo-word span,
body[data-structure="marca"] .site-header.is-solid .nav-link,
body[data-structure="marca"] .site-header.is-solid .icon-btn { color: var(--ink); }
body[data-structure="marca"] .site-header.is-solid .nav-search input { background: var(--surface); border-color: var(--border); color: var(--ink); }
body[data-structure="marca"] .site-header.is-solid .nav-search input::placeholder { color: var(--ink-faint); }
body[data-structure="marca"] .site-header.is-solid .nav-search svg { color: var(--ink); opacity: .55; }
@media (hover: hover) { body[data-structure="marca"] .site-header.is-solid .nav-link:hover { background: var(--brand-light); color: var(--brand-darker); } }
@media (hover: hover) { body[data-structure="marca"] .site-header.is-solid .icon-btn:hover { background: var(--brand-light); } }
/* El header queda fuera del flujo (fixed): `main` reserva su alto para que ninguna sección
   quede tapada; el hero lo recupera (margin-top negativo) para el efecto full-bleed. */
body[data-structure="marca"] main { padding-top: var(--header-h); }

/* ---------- Estructura "marca": hero inmersivo full-bleed ----------
   Sin portada, el hero es más bajo (60vh/68vh) para que el contenido quede centrado de
   verdad y no flote en un bloque enorme casi vacío; con foto de portada mantiene el alto
   inmersivo original (78vh/88vh) — ver `.mk-hero.has-cover` más abajo. */
.mk-hero {
    position: relative; min-height: 60vh; display: flex; align-items: center; overflow: hidden;
    margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 40px) 20px 56px; color: #fff;
}
.mk-hero.has-cover { min-height: 78vh; padding: calc(var(--header-h) + 64px) 20px 72px; }
.mk-hero-media { position: absolute; inset: 0; z-index: -2; background-size: cover; }
.mk-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 20, .32) 0%, rgba(10, 14, 20, .74) 100%); }
.mk-hero-gradient { position: absolute; inset: 0; z-index: -2; background: linear-gradient(150deg, var(--brand-darker) 0%, var(--brand) 55%, var(--brand-dark) 100%); }
.mk-hero-content { position: relative; z-index: 1; max-width: 640px; }
.mk-hero .btn-primary { background: #fff; color: var(--brand-dark); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
@media (hover: hover) { .mk-hero .btn-primary:hover { background: #fff; color: var(--brand-darker); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .4); } }
.mk-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .88); margin-bottom: 18px; }
.mk-hero-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; flex-shrink: 0; }
.mk-hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.06; color: #fff; letter-spacing: -.01em; }
.mk-hero-tagline { font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, .92); margin: 18px 0 30px; max-width: 46ch; line-height: 1.6; }
.mk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mk-btn-ghost-light { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); }
@media (hover: hover) { .mk-btn-ghost-light:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); } }
.mk-hero-scroll {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255, 255, 255, .78);
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.mk-hero-scroll .chevron { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

/* ---------- Estructura "marca": encabezados editoriales centrados ---------- */
.mk-section-head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.mk-section-head .eyebrow { margin-bottom: 10px; }
.mk-section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- Estructura "marca": categorías como bloques grandes ---------- */
.mk-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
button.mk-cat-block { border: none; cursor: pointer; font: inherit; width: 100%; }
.mk-cat-block {
    position: relative; border-radius: var(--web-radius-lg); overflow: hidden; text-align: left;
    padding: 22px; min-height: 148px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; color: var(--on-brand, #fff);
    background: linear-gradient(150deg, var(--brand) 0%, var(--brand-darker) 100%);
    transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) { .mk-cat-block:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
/* Estas 4 variantes siempre terminan oscuras (mix con negro / con --brand-darker), sin
   importar qué tan claro sea --brand: fijan texto blanco en vez de heredar --on-brand. */
.mk-cat-block:nth-child(5n+2) { background: linear-gradient(150deg, var(--terracotta) 0%, color-mix(in srgb, var(--terracotta) 65%, black) 100%); color: #fff; }
.mk-cat-block:nth-child(5n+3) { background: linear-gradient(150deg, var(--amber) 0%, color-mix(in srgb, var(--amber) 65%, black) 100%); color: #fff; }
.mk-cat-block:nth-child(5n+4) { background: linear-gradient(150deg, var(--brand-dark) 0%, var(--brand-darker) 100%); color: #fff; }
.mk-cat-block:nth-child(5n+5) { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 55%, var(--terracotta)) 0%, var(--brand-darker) 100%); color: #fff; }
.mk-cat-block .icon { position: absolute; top: 16px; right: 16px; opacity: .8; }
.mk-cat-block .icon svg { width: 24px; height: 24px; }
.mk-cat-block strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; }
.mk-cat-block span { font-size: .78rem; opacity: .88; }
.mk-cat-block:first-child { grid-column: 1 / -1; min-height: 180px; }

/* ---------- Estructura "marca": Nosotros editorial ---------- */
.mk-about { max-width: 760px; margin: 0 auto; text-align: center; }
.mk-about-quote { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.65; color: var(--ink); white-space: pre-line; margin-top: 14px; }
.mk-about-quote::before { content: "\201C"; color: var(--brand); font-size: 1.3em; line-height: 0; vertical-align: -.28em; margin-right: .05em; }
.mk-about-signoff { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.mk-about-monogram { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-brand, #fff); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .86rem; flex-shrink: 0; }
.mk-about-signoff span { font-size: .84rem; color: var(--ink-soft); }

@media (min-width: 640px) {
    .mk-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .mk-cat-block:first-child { grid-column: span 2; }
}
@media (min-width: 860px) {
    .mk-hero { min-height: 68vh; }
    .mk-hero.has-cover { min-height: 88vh; }
}

/* ---------- Checkout overlay (drawer → datos + resumen + confirmación) ---------- */
body.no-scroll { overflow: hidden; }
.checkout-overlay {
    position: fixed; inset: 0; z-index: 130; background: var(--bg); overflow-y: auto;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.checkout-overlay.open { opacity: 1; pointer-events: auto; }
.checkout-topbar { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--border-soft); padding: 13px 20px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; font-weight: 700; font-size: .92rem; color: var(--ink); }
.back-link svg { width: 18px; height: 18px; }
@media (hover: hover) { .back-link:hover { color: var(--brand-dark); } }
.checkout-body { max-width: 1000px; margin: 0 auto; padding: 26px 20px 60px; }
.checkout-step { display: grid; grid-template-columns: 1fr; gap: 22px; }
/* La confirmación es una sola columna centrada; el atributo hidden (más específico) gana. */
.checkout-step--confirm { display: block; }
.checkout-step[hidden] { display: none; }
.checkout-form { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 13px; box-shadow: var(--shadow-sm); }
.checkout-form h2 { font-size: 1.1rem; }
.checkout-form label { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.checkout-form input { padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: .92rem; font-weight: 500; color: var(--ink); }
.checkout-form input:focus { border-color: var(--brand); outline: none; }
.checkout-form input[aria-invalid="true"] { border-color: var(--terracotta); }

/* ---------- Método de entrega (checkout) ---------- */
.delivery-select { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.delivery-select legend { padding: 0; margin-bottom: 2px; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.delivery-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.delivery-option {
    position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-size: .86rem; font-weight: 600; color: var(--ink-soft); background: var(--surface); cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.delivery-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.delivery-option.is-selected { border-color: var(--brand); background: var(--brand-lighter); color: var(--brand-darker); }
.delivery-option:focus-within { outline: 3px solid var(--brand-dark); outline-offset: 2px; }
.delivery-option-icon { font-size: 1.15rem; line-height: 1; }
.delivery-note {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius-sm); background: var(--brand-lighter);
    border: 1px solid var(--border-soft); font-size: .84rem; color: var(--ink-soft);
}
.delivery-note[hidden] { display: none; }

.checkout-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.checkout-hint { font-size: .8rem; color: var(--ink-faint); }
.checkout-hint:empty { display: none; }
.checkout-summary { background: var(--brand-lighter); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px; height: fit-content; }
.checkout-summary h2 { font-size: 1.02rem; margin-bottom: 12px; }
.co-line { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.co-line span { color: var(--ink-soft); }
.co-line strong { font-variant-numeric: tabular-nums; }
.checkout-summary .cart-subtotal { margin-top: 12px; }
/* ---------- Línea de envío del resumen (estado de Uber) ---------- */
.co-shipping strong { font-variant-numeric: tabular-nums; }
.co-shipping--muted strong { color: var(--ink-faint); font-weight: 600; }
.co-shipping--ok strong { color: var(--ink); font-weight: 800; }
.co-shipping--alert strong { color: var(--terracotta); font-weight: 700; }
.co-shipping--info strong { color: var(--ink-soft); font-weight: 700; }
.co-shipping-notice { font-size: .8rem; color: var(--terracotta); margin-top: 6px; line-height: 1.4; }
.co-shipping-notice[hidden] { display: none; }
/* Total del resumen: más protagonismo. */
.checkout-summary .cart-subtotal { border-top: 1px solid var(--border); padding-top: 12px; }
.checkout-summary .cart-subtotal strong { font-size: 1.4rem; font-weight: 800; }
.confirm-box { max-width: 520px; margin: 36px auto; text-align: center; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--web-radius-lg); padding: 44px 28px; box-shadow: var(--shadow-md); }
.confirm-emoji { font-size: 3.2rem; margin-bottom: 12px; }
.confirm-box h2 { font-size: 1.5rem; margin-bottom: 10px; }
.confirm-box p { color: var(--ink-soft); margin-bottom: 22px; }
@media (min-width: 720px) {
    .checkout-step { grid-template-columns: 1.3fr .9fr; align-items: start; }
    .checkout-summary { position: sticky; top: 80px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-darker); color: color-mix(in srgb, var(--brand-lighter) 70%, #fff); margin-top: 40px; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 44px 20px 22px; display: grid; grid-template-columns: 1fr; gap: 28px; }
.footer-brand .logo-mark { box-shadow: none; }
.footer-brand .logo-img { height: 48px; max-width: 200px; }
.footer-brand p { margin-top: 12px; color: color-mix(in srgb, var(--brand-lighter) 55%, #fff); font-size: .87rem; max-width: 38ch; line-height: 1.6; }
.footer-col h3 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: color-mix(in srgb, var(--brand-lighter) 60%, #fff); font-size: .89rem; }
@media (hover: hover) { .footer-col a:hover { color: #fff; text-decoration: underline; } }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); max-width: 1280px; margin: 0 auto; padding: 16px 20px 26px; font-size: .77rem; color: color-mix(in srgb, var(--brand-lighter) 45%, #fff); }

/* ---------- Pantalla de agradecimiento post-pago (?pay=ok) ---------- */
/* Mismas clases .pay-thanks-* que catalog/css/base.css (main.js/panel.js) — nunca
   conviven en la misma página, así que no hay colisión. Ver catalog/js/actions.js. */
@keyframes pay-thanks-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.pay-thanks-overlay {
    position: fixed; inset: 0; z-index: 300; background: rgba(20, 24, 30, .55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pay-thanks-card {
    max-width: 400px; width: 100%; background: var(--surface); border-radius: var(--web-radius-lg);
    box-shadow: var(--shadow-lg); padding: 40px 28px 28px; text-align: center;
    animation: pay-thanks-in 260ms ease-out both;
}
.pay-thanks-icon { font-size: 3.4rem; line-height: 1; margin-bottom: 12px; }
.pay-thanks-title { font-size: 1.4rem; margin-bottom: 8px; }
.pay-thanks-biz { color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.pay-thanks-mail { font-size: .85rem; color: var(--ink-faint); margin-bottom: 22px; }
.pay-thanks-social { margin-bottom: 22px; }
.pay-thanks-social-label { font-size: .84rem; color: var(--ink-faint); margin-bottom: 12px; }
.pay-thanks-social-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pay-thanks-social-link {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 50%; background: var(--brand-lighter); font-size: 1.3rem; text-decoration: none;
}
@media (hover: hover) { .pay-thanks-social-link:hover { background: var(--brand-light); } }
.pay-thanks-close {
    width: 100%; min-height: 44px; border: none; border-radius: 999px; background: var(--brand);
    color: var(--on-brand, #fff); padding: 13px 22px; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .pay-thanks-close:hover { background: var(--brand-dark); } }

/* ---------- Toast ---------- */
.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff;
    padding: 13px 22px; border-radius: 999px; font-size: .87rem; font-weight: 600; box-shadow: var(--shadow-lg); z-index: 200;
    opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; max-width: 88vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================= Responsive ================= */
@media (min-width: 640px) {
    /* Grillas de producto fluidas y SIEMPRE centradas: auto-fit colapsa las columnas
       vacías (con pocos productos no queda el bloque corrido a la izquierda) y el máximo
       por track evita cards gigantes cuando hay 1-2 productos. */
    .grid-row { grid-template-columns: repeat(auto-fit, minmax(215px, 320px)); justify-content: center; }
    .catalog-grid { grid-template-columns: repeat(auto-fit, minmax(215px, 320px)); justify-content: center; }
    .galeria-grid { grid-template-columns: repeat(3, 1fr); }
    .producto-layout { grid-template-columns: 1fr 1fr; }
    .contacto-layout { grid-template-columns: 1.1fr 1fr; }
    .hero-text h1 { font-size: 2.8rem; }
}
@media (min-width: 860px) {
    .nav-links { display: flex; }
    .nav-search { display: flex; }
    .nav-search-mobile { display: none; }
    .hamburger { display: none; }
    /* En escritorio el filtro de categorías vive en el submenú del nav — sin chips. */
    .chips-row { display: none; }
    .hero { padding-top: 60px; padding-bottom: 76px; min-height: 380px; justify-content: center; }
    .footer-inner { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
@media (max-width: 859px) {
    .cart-drawer, .mobile-menu { width: 100%; }

    /* Touch targets ≥44px en móvil/tablet: iconos de nav (carrito/menú), botón de acción de las
       cards y el stepper +/- de cantidad (drawer de carrito y ficha de producto). */
    .icon-btn { width: 44px; height: 44px; }
    .card-foot .btn-cta { min-height: 44px; }
    .stepper button { width: 44px; height: 44px; }
}

/* ---------- Membresías (P2 mejoras-membresias) ----------
   Tarjetas de los planes de socio públicos (partials/membership-section.ejs).
   Mismo lenguaje visual que .product-card (surface + border-soft + radius). */
.mem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 320px)); gap: 16px; justify-content: center; }
.mem-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; text-align: center; transition: box-shadow .18s ease; }
.mem-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.mem-name { font-size: 1.05rem; margin: 0; }
.mem-price { font-size: 1.7rem; font-weight: 800; color: var(--brand-ink); margin: 0; }
.mem-per { font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-left: 2px; }
.mem-kind { color: var(--ink-soft); font-size: .92rem; margin: 0 0 12px; }
.mem-card .btn { margin-top: auto; }

/* ─── Accesibilidad: respetar 'reducir movimiento' ───────────────────────
   site.css no importa tokens.css a propósito (ver nota al inicio del
   archivo: el tema es el propio del comercio), así que lleva su propia
   copia del bloque centralizado (Task 8) en vez de duplicar de otro CSS
   de plataforma. Mismo contenido exacto que tokens.css / catalog/base.css. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Iconos Material Symbols (migración emoji → .ms, plan iconos-material-symbols) ───
 * Contenedores que ya definen el tamaño del ícono: el .ms hereda 1em (el default
 * 1.25em de icons.css es para íconos junto a texto). `.ph span` ya dimensiona el
 * placeholder de producto (el .ms ES ese span, no hace falta regla extra). */
.empty-state .emoji .ms,
.delivery-option-icon .ms,
.confirm-emoji .ms { font-size: 1em; vertical-align: baseline; }
/* Logos SVG de redes (brand-icons / nav.ejs): asentados sobre la línea del texto. */
.brand-ic { vertical-align: -0.15em; }

/* Picker de dirección del checkout (Google) */
.co-map { width: 100%; height: 180px; border-radius: 12px; margin-top: 8px; }
#co-address-suggest.reg-suggest { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
#co-address-suggest .reg-suggest__item { padding: 10px 12px; cursor: pointer; }
#co-address-suggest .reg-suggest__item:hover { background: #f3f4f6; }
.co-address-hint { font-size: 12px; color: #6b7280; margin: 6px 0 0; }

/* ---------- Teléfono con selector de país (combobox propio) ---------- */
.phone-input { position: relative; }
.phone-input__field { display: flex; gap: 8px; align-items: stretch; }
.phone-input__country {
    display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 44px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
    font-weight: 600; font-size: .9rem; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.phone-input__country:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-lighter); }
.phone-flag { width: 22px; height: 15px; flex: none; display: inline-block; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.phone-flag svg { display: block; width: 100%; height: 100%; }
.phone-input__dial { font-variant-numeric: tabular-nums; }
.phone-input__caret { font-size: .7rem; color: var(--ink-faint); margin-left: 1px; }
.phone-input__number { flex: 1; min-width: 0; }
.phone-input__menu {
    position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; min-width: 250px;
    max-height: 264px; overflow-y: auto; list-style: none; margin: 0; padding: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.phone-input__menu[hidden] { display: none; }
.phone-input__opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .88rem; font-weight: 500; }
.phone-input__opt[aria-selected="true"] { background: var(--brand-lighter); }
.phone-input__opt.is-active { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (hover: hover) { .phone-input__opt:hover { background: var(--brand-lighter); } }
.phone-input__optname { flex: 1; color: var(--ink); }
.phone-input__optdial { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- Banner "pedido en curso" (delivery Uber) ----------
   Sticky arriba de todo, por ENCIMA del header (z-index 70 > 60). En la estructura "marca" el
   header es fixed y transparente en el tope, así que sin esto el banner quedaba pisado por el nav
   (superposición reportada). Cuando el banner está presente (body.has-pedido-banner, lo agrega
   site.js), el header se corre hacia abajo por --pedido-banner-h (site.js mide su alto real).
   Reglas al final del archivo a propósito: mismo peso de especificidad que las reglas del header
   de "marca"/"tienda", el orden de cascada las hace ganar. */
.pl-pedido-banner {
    position: sticky; top: 0; z-index: 70;
    display: block; background: #111827; color: #fff; text-align: center;
    padding: 10px; text-decoration: none; font-weight: 600;
}
body.has-pedido-banner .site-header { top: var(--pedido-banner-h, 0px); }