/* TIENDA PUBLICA - componentes (rediseño marketplace 2026-09-29). Tokens y base en app.css; todo CSS nuevo consume la
   capa semantica (--surface-*, --text-*, --border-*, --space-*, --radius-*, --shadow-*, --fs-*). El color de marca es acento
   (CTA, activo, badges, franjas), nunca relleno de pantalla. Documentacion: docs/design/tienda-publica.md.

   Lenguaje: lienzo --surface-soft con paneles blancos (--surface-card, borde sutil, --radius-lg), grillas compactas,
   precio protagonista, badges con dato real, encabezados de vitrina claros. Todo el contenido publico usa el mismo ancho
   (--maxw) para que header, vitrinas, catalogo y footer compartan bordes.

   Orden: 0 neutralizar Bootstrap | 1 utilidades | 2 botones/campos | 3 announcement + header | 4 marco publico y vitrinas
          5 tarjeta/grilla de producto | 6 home | 7 catalogo | 8 ficha | 9 carrito | 9b checkout | 10 avisos/estados
          11 footer | 12 politicas y pedido | 13 puntero fino y movimiento reducido
   Cada seccion trae sus propios breakpoints (mobile-first: 40rem, 48rem, 60rem, 75rem). */

/* 0. Bootstrap (cargado antes) trae .container con max-width fijo, .card, .badge, .lead, legend y hovers de .btn */
.container { max-width: none; padding-inline: 0; }
.card { display: grid; border: 0; background: none; border-radius: 0; min-width: 0; }
.lead { font-size: 1.0625rem; font-weight: 400; }
legend { float: none; padding: 0; font-size: 1rem; }
a:is(.brand, .card-link, .tile, .cart-link, .cart-title a, .pill, .chip, .pagination a, .breadcrumbs a, .trust-item, .notice a) { color: inherit; }
a:is(.brand, .card-link, .tile, .cart-link, .cart-title a, .pagination a, .breadcrumbs a, .shelf-more, .trust-item) { text-decoration: none; }

/* 1. Utilidades */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plain { list-style: none; margin: 0; padding: 0; }
.skip-link { position: absolute; left: var(--space-2); top: -4rem; z-index: var(--z-skip); padding: var(--space-3) var(--space-4); background: var(--surface-elevated); color: var(--text-primary);
             border-radius: var(--control-radius); box-shadow: var(--shadow-md); transition: top var(--t); }
.skip-link:focus { top: var(--space-2); }
main:focus { outline: none; }
.eyebrow { margin: 0 0 var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-link); }
.hint { color: var(--text-muted); font-size: var(--fs-body-sm); margin: var(--space-1) 0; }
.prewrap { white-space: pre-line; max-width: 65ch; }

/* 2. Botones y campos (los :hover/:focus-visible pisan a Bootstrap, que deja variables --bs-btn-* sin definir).
      Sistema: .btn (primario, acento) | .btn-outline (secundario) | .btn-link (terciario) | .btn-danger | .btn-onbrand /
      .btn-ghost-onbrand (sobre franjas de marca) | tamano .btn-lg (56px). El panel admin redefine .btn bajo .adm-shell. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-decoration: none; text-align: center;
       background: var(--brand-accent); color: var(--text-on-accent); border: 1px solid var(--brand-accent);
       transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t); }
.btn:hover:not(:disabled), .btn:focus-visible { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: var(--text-on-accent); }
.btn:active:not(:disabled) { translate: 0 1px; background: var(--brand-accent-hover); color: var(--text-on-accent); }
.btn:focus-visible { outline: 3px solid var(--text-link); outline-offset: 3px; box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: auto; }
.btn-lg { min-height: var(--control-height-xl); padding-inline: var(--space-6); font-size: var(--fs-body); }
.btn-outline, .btn-outline:hover:not(:disabled), .btn-outline:focus-visible, .btn-outline:active:not(:disabled) { color: var(--text-primary); }
.btn-outline { background: var(--surface-card); border-color: var(--border-strong); }
.btn-outline:hover:not(:disabled), .btn-outline:focus-visible, .btn-outline:active:not(:disabled) { background: var(--surface-hover); border-color: var(--text-primary); }
.btn-onbrand { background: var(--text-on-brand); border-color: var(--text-on-brand); color: var(--surface-brand); }
.btn-onbrand:hover:not(:disabled), .btn-onbrand:focus-visible, .btn-onbrand:active:not(:disabled) { background: color-mix(in srgb, var(--text-on-brand) 88%, var(--surface-brand)); border-color: transparent; color: var(--surface-brand); }
.btn-ghost-onbrand { background: transparent; border-color: color-mix(in srgb, var(--text-on-brand) 55%, transparent); color: var(--text-on-brand); }
.btn-ghost-onbrand:hover:not(:disabled), .btn-ghost-onbrand:focus-visible, .btn-ghost-onbrand:active:not(:disabled) { background: color-mix(in srgb, var(--text-on-brand) 14%, transparent); border-color: var(--text-on-brand); color: var(--text-on-brand); }
.btn-link { background: transparent; border-color: transparent; color: var(--text-link); }
.btn-link:hover:not(:disabled), .btn-link:focus-visible { background: transparent; color: var(--brand-accent-strong); border-color: transparent; }
/* Destructivo (confirmar quitar/vaciar). --danger es configurable (--brand-danger); texto sobre el mismo par que .badge-sale. */
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--surface-page); }
.btn-danger:hover:not(:disabled), .btn-danger:focus-visible, .btn-danger:active:not(:disabled) { background: color-mix(in srgb, var(--danger) 86%, var(--brand-text)); border-color: transparent; color: var(--surface-page); }

select, textarea, input[type=number], input[type=search], input[type=text], input[type=email], input[type=tel], input[type=password], input[type=file] {
    min-height: var(--control-height); padding: .5rem var(--control-padding-x); border: 1px solid var(--control-border); border-radius: var(--control-radius);
    font: inherit; background: var(--control-bg); color: var(--text-primary); transition: border-color var(--t), box-shadow var(--t);
}
textarea { width: 100%; }
.form-field :is(input, select, textarea):not([type=checkbox]):not([type=radio]) { width: 100%; }
:is(select, textarea, input):focus-visible { outline: 0; border-color: var(--text-link); box-shadow: var(--focus-ring); }
[aria-invalid=true] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field-error { color: var(--danger); margin: var(--space-1) 0 0; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.form-field label, .form-field legend { font-weight: var(--fw-semibold); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.check { display: flex; align-items: center; gap: .625rem; min-height: var(--control-height); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand-accent); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-accent); }

/* 3. Announcement bar + header. Alturas en tokens (app.css): --announcement-h, --header-row-h, --header-search-h,
      --header-nav-h, --header-h (parte sticky) y --sticky-top.
   Movil:      [menu][marca .......][pedido][carrito] + buscador SIEMPRE visible en su fila (protagonista); categorias en drawer.
   Tableta:    [menu][marca][buscador ..........][pedido][carrito]
   Escritorio: [marca][....buscador central....][Seguir pedido][Carrito] + franja de categorias --surface-dark a todo el ancho.
   Header invertido (--surface-dark): buscador claro dominante y logo protegido sobre una base neutra cuando es imagen.
   El acento aparece en Buscar, el badge del carrito y la categoria activa. Sin backdrop-filter/transform/filter: crearian
   un bloque contenedor para el drawer position:fixed. */

/* Announcement bar: franja de marca fina; no es sticky. En movil solo el primer item. */
.announce { background: var(--surface-brand); color: var(--text-on-brand); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .04em; line-height: var(--lh-snug); }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: var(--announcement-h); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.announce-item { display: flex; min-width: 0; }
.announce-item > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--space-2) var(--space-1); }
.announce-item + .announce-item { padding-left: var(--space-4); border-left: 1px solid color-mix(in srgb, var(--text-on-brand) 30%, transparent); }
.announce-item:not(:first-child) { display: none; }
.announce a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text-on-brand) 45%, transparent); text-underline-offset: .25em; }
.announce a:hover { text-decoration-color: currentColor; }
.announce a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: var(--radius-xs); }

.site-header { position: sticky; top: 0; z-index: var(--z-header); display: block; padding: 0; background: var(--surface-dark); color: var(--text-on-dark);
               box-shadow: 0 1px 0 color-mix(in srgb, var(--text-on-dark) 14%, transparent), var(--shadow-sm); }
.site-header a { color: inherit; text-decoration: none; }
/* El padding lateral descuenta el aire interno de los botones de icono (44px con icono de 24px = .625rem por lado)
   para que el icono, no su area tactil, quede alineado con el contenido de la pagina. */
.site-header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: var(--header-row-h) var(--header-search-h);
                     grid-template-areas: "menu brand pedido cart" "search search search search"; align-items: center; column-gap: var(--space-1);
                     max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--space-2), calc(var(--gutter) - .625rem)); }

/* Botones de icono (menu): mismo tamano que un control */
.icon-btn { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-md); color: var(--text-on-dark);
            list-style: none; cursor: pointer; transition: background-color var(--t), color var(--t); }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { background: color-mix(in srgb, var(--text-on-dark) 10%, transparent); }
.nav-menu { grid-area: menu; width: var(--control-height); height: var(--control-height); }
.nav-toggle .i-close, .nav-menu[open] .nav-toggle .i-open { display: none; }
.nav-menu[open] .nav-toggle .i-close { display: inline; }

/* Marca: el logo configurado se protege sobre una base neutra en el header oscuro; el nombre textual usa contraste invertido. */
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); min-width: 0; max-width: 100%; justify-self: start;
         padding-inline: var(--space-1); border-radius: var(--radius-md); }
.brand picture { display: flex; min-width: 0; padding: var(--space-1); border-radius: var(--radius-sm); background: var(--surface-card); }
.brand img { display: block; height: 2.25rem; width: auto; max-width: min(100%, 11rem); object-fit: contain; object-position: left center; }
.brand > .brand-iso { flex: none; padding: var(--space-1); border-radius: var(--radius-sm); background: var(--surface-card); }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--brand-font-heading); font-size: clamp(1.05rem, .9rem + .8vw, 1.45rem);
              font-weight: var(--fw-black); letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark); }
.brand-full { display: none; }
.brand:focus-visible { outline-offset: 2px; }

/* Buscador protagonista: campo + boton de acento pegado a la derecha (lupa; "Buscar" con texto desde escritorio). */
.site-search { grid-area: search; position: relative; align-self: start; min-width: 0; }
.site-search input[type=search] { display: block; width: 100%; height: var(--control-height); min-height: 0; padding: 0 calc(var(--control-height) + var(--space-3)) 0 var(--space-4);
                                  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-soft); color: var(--text-primary);
                                  -webkit-appearance: none; appearance: none; }
.site-search input[type=search]::placeholder { color: var(--text-muted); opacity: 1; }
.site-search input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.site-search input[type=search]:hover { border-color: var(--border-strong); }
.site-search input[type=search]:focus-visible { background: var(--surface-card); border-color: var(--text-link); box-shadow: var(--focus-ring); }
.site-search-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
                   min-width: calc(var(--control-height) + var(--space-2)); height: 100%; padding-inline: var(--space-3);
                   border: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--brand-accent); color: var(--text-on-accent);
                   font: inherit; font-size: var(--fs-label); font-weight: var(--fw-bold); cursor: pointer; transition: background-color var(--t); }
.site-search-btn:hover { background: var(--brand-accent-hover); }
.site-search-btn:focus-visible { outline: 3px solid var(--text-link); outline-offset: 2px; }
.site-search-btn-text, .hdr-action-text, .cart-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Acciones: seguir pedido y carrito. Alto de control; en escritorio muestran texto. */
.hdr-action, .cart-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--control-height); height: var(--control-height);
                          border-radius: var(--radius-md); font-size: var(--fs-label); font-weight: var(--fw-semibold); white-space: nowrap; transition: background-color var(--t), color var(--t); }
.hdr-action:hover, .cart-link:hover { background: color-mix(in srgb, var(--text-on-dark) 10%, transparent); }
.hdr-action[aria-current=page] { color: var(--brand-accent); }
.hdr-action { grid-area: pedido; }
.cart-link { grid-area: cart; }
.cart-ico { position: relative; display: grid; place-items: center; }
.cart-icon { flex: none; }
.cart-count { position: absolute; top: -.375rem; right: -.625rem; display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: var(--radius-pill);
              font-size: .7rem; font-weight: var(--fw-black); line-height: 1; letter-spacing: 0; background: var(--brand-accent); color: var(--text-on-accent);
              border: 2px solid var(--surface-dark); box-sizing: content-box; }

/* Categorias. Movil/tableta: drawer lateral. El <nav> es hermano del details: [open] lo muestra con ~ (sin JS). */
.nav-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--surface-overlay); animation: fade-in .2s var(--ease); }
.site-nav { display: none; }
.nav-head { display: none; }
.nav-all a { gap: var(--space-2); }
.nav-all-ico { flex: none; }
@media (max-width: 59.99rem) {
    .nav-menu[open] > summary { position: fixed; z-index: calc(var(--z-drawer) + 1); top: calc((var(--header-row-h) - var(--control-height)) / 2); left: max(var(--space-2), calc(var(--gutter) - .625rem)); }
    .nav-menu[open] ~ .site-nav { position: fixed; z-index: var(--z-drawer); inset: 0 auto 0 0; display: flex; flex-direction: column; width: min(22rem, 88vw);
                                  overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
                                  background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-lg); animation: drawer-in .25s var(--ease); }
    .nav-head { display: flex; align-items: center; flex: none; min-height: var(--header-row-h); margin: 0;
                padding-left: calc(max(var(--space-2), calc(var(--gutter) - .625rem)) + var(--control-height) + var(--space-3));
                border-bottom: 1px solid var(--border-subtle); font-family: var(--brand-font-heading); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
    .nav-list { padding-block: var(--space-2); }
    .nav-list a { display: flex; align-items: center; min-height: var(--control-height-lg); padding-inline: var(--gutter); transition: background-color var(--t), color var(--t); }
    .nav-list > li > a { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
    .nav-list a:hover { background: var(--surface-hover); }
    .nav-list a[aria-current=page] { color: var(--text-link); box-shadow: inset 3px 0 0 var(--brand-accent); }
    .nav-all-ico { color: var(--text-link); }
    .nav-sub { padding-bottom: var(--space-2); }
    .nav-sub a { min-height: var(--control-height); padding-left: calc(var(--gutter) + var(--space-4)); font-size: var(--fs-body-sm); color: var(--text-secondary); }
    .nav-extra { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
    .nav-extra a { display: flex; align-items: center; min-height: var(--control-height); padding-inline: var(--gutter); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }
    .nav-extra a:hover { background: var(--surface-hover); color: var(--text-primary); }
    .nav-menu[open] > summary:focus-visible, .nav-menu[open] ~ .site-nav a:focus-visible { outline-color: var(--text-link); outline-offset: -3px; }
}
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } }
@keyframes drawer-in { from { transform: translateX(-100%); } }
@keyframes fade-in { from { opacity: 0; } }

/* Tableta: el buscador pasa a la fila principal (sin fila propia: --header-search-h = 0). */
@media (min-width: 48rem) {
    .announce-item:not(:first-child) { display: flex; }
    .site-header-inner { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-rows: var(--header-row-h); grid-template-areas: "menu brand search pedido cart"; column-gap: var(--space-2); }
    .site-search { align-self: center; margin-inline: var(--space-3); }
    .brand { max-width: 14rem; }
    .brand img { height: 2.5rem; max-width: 13rem; }
    .brand-full { display: inline; }
    .brand-short { display: none; }
}
/* Escritorio: marca | buscador central amplio | acciones con texto; franja de categorias oscura a todo el ancho
   (el fondo sale del propio <nav> con una sombra de 100vmax recortada en vertical: sin contenedores extra). */
@media (min-width: 60rem) {
    .site-header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: var(--header-row-h) var(--header-nav-h);
                         grid-template-areas: "brand search pedido cart" "nav nav nav nav"; column-gap: var(--space-3); padding-inline: var(--gutter); }
    .nav-menu, .nav-backdrop, .nav-sub, .nav-extra { display: none; }
    .brand { max-width: 18rem; padding-inline: 0; margin-right: var(--space-5); }
    .brand img { height: 3rem; max-width: 16rem; }
    .site-search { justify-self: center; width: 100%; max-width: 46rem; margin-inline: 0; }
    .site-search input[type=search] { height: var(--control-height-lg); padding-right: 8.5rem; }
    .site-search-btn { padding-inline: var(--space-5); }
    .site-search-btn-text, .hdr-action-text, .cart-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .hdr-action, .cart-link { padding-inline: var(--space-3); }
    .hdr-action { margin-left: var(--space-3); }
    .cart-link { gap: var(--space-3); padding-right: var(--space-4); }
    .site-nav { grid-area: nav; display: flex; align-items: stretch; min-width: 0; height: var(--header-nav-h); margin-left: calc(var(--space-3) * -1); overflow-x: auto; scrollbar-width: none;
                background: var(--surface-dark); color: var(--text-on-dark);
                box-shadow: 0 0 0 100vmax var(--surface-dark); clip-path: inset(0 -100vmax); }
    .site-nav::-webkit-scrollbar { display: none; }
    .nav-list { display: flex; gap: var(--space-1); }
    .nav-list > li { display: flex; }
    .nav-list > li > a { position: relative; display: flex; align-items: center; padding-inline: var(--space-3); white-space: nowrap; font-size: var(--fs-label); font-weight: var(--fw-semibold);
                         color: color-mix(in srgb, var(--text-on-dark) 78%, transparent); transition: color var(--t), background-color var(--t); }
    .nav-list > li > a::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
                                background: var(--brand-accent); transform: scaleX(0); transition: transform var(--t-slow); }
    .nav-list > li > a:hover { color: var(--text-on-dark); background: color-mix(in srgb, var(--text-on-dark) 8%, transparent); }
    .nav-list > li > a[aria-current=page] { color: var(--text-on-dark); }
    .nav-list > li > a[aria-current=page]::after { transform: scaleX(1); }
    .nav-list > li > a:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: -4px; }
    .nav-all > a { font-weight: var(--fw-bold); color: var(--text-on-dark); }
}

/* 4. Marco publico: lienzo suave con paneles blancos. Migas, cabecera de pagina y VITRINAS (.shelf, componente Seccion):
      panel con encabezado [icono | eyebrow + titulo + bajada | Ver todo] y la grilla compartida de tarjetas. */
.public-main { min-height: 62vh; padding-bottom: var(--space-6); overflow-x: clip; background: var(--surface-soft); }

.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .375rem; margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--fs-body-sm); }
.breadcrumbs li { min-width: 0; overflow-wrap: anywhere; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: .375rem; opacity: .7; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.breadcrumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.breadcrumbs [aria-current=page] { color: var(--text-secondary); }
.public-main .container > .breadcrumbs:first-child { margin-top: calc(var(--space-3) * -1); }

.page-head { margin-block: 0 var(--space-4); }
.page-head .eyebrow { margin-bottom: var(--space-1); }
.page-head h1 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); overflow-wrap: anywhere; }
.page-head .lead { margin: var(--space-2) 0 0; max-width: 60ch; color: var(--text-secondary); font-size: var(--fs-body); }
.catalog-page { width: min(100% - 2 * var(--gutter), var(--maxw-wide)); }
.catalog-head { display: grid; gap: var(--space-1); max-width: var(--maxw-text); margin-bottom: var(--space-5); }
.catalog-head .eyebrow { margin: 0; }

.shelf { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.shelf-titles { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.shelf-ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--surface-accent-soft); color: var(--text-link); }
.shelf-text { display: grid; gap: .125rem; min-width: 0; }
.shelf-text .eyebrow { margin: 0; color: var(--text-muted); }
.shelf h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); overflow-wrap: anywhere; }
.shelf-lead { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.shelf-more { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height); padding-inline: var(--space-4);
              border-radius: var(--control-radius); background: var(--brand-accent); color: var(--text-on-accent); font-size: var(--fs-label); font-weight: var(--fw-bold);
              white-space: nowrap; transition: background-color var(--t), box-shadow var(--t); }
.shelf-more:hover { background: var(--brand-accent-hover); color: var(--text-on-accent); box-shadow: var(--shadow-xs); }
.shelf-more span[aria-hidden] { transition: translate var(--t); }
.shelf-more:hover span[aria-hidden] { translate: 3px 0; }
.shelf-foot { display: flex; justify-content: center; margin-top: var(--space-5); }
/* Ofertas: filete superior e icono en --danger (mismo tono que el badge de oferta). Destacados: icono relleno de acento. */
.shelf--sale { box-shadow: inset 0 3px 0 var(--danger), var(--shadow-xs); }
.shelf--sale .shelf-ico { background: var(--danger-soft); color: var(--danger); }
.shelf--featured .shelf-ico { background: var(--brand-accent); color: var(--text-on-accent); }
/* Banda con tinte de marca: rompe la monotonia de paneles blancos entre vitrinas. */
.shelf--tint { background: var(--surface-tint); border-color: var(--border-default); }
.shelf--tint .shelf-ico { background: var(--surface-card); }
@media (min-width: 48rem) {
    .shelf { padding: var(--space-5); }
    .shelf-ico { width: 2.75rem; height: 2.75rem; }
}

/* 5. Grilla y tarjeta de producto (compartida: Home, catalogo, relacionados). Tarjeta editorial sin caja exterior:
      foto 4:5 sobre superficie clara (contain: nunca se recorta ni deforma) con badges de dato real (Agotado | Oferta | Destacado)
      y contenido con aire debajo: categoria opcional, nombre con dos lineas reservadas y precio anclado al pie:
      precio anterior tachado arriba, precio actual grande y "N% OFF" (--success, estilo marketplace). Sin "nuevo", stock
      bajo, envio gratis ni cuotas: no hay dato. */
/* Mas aire vertical que horizontal: el precio de una fila no se pega a la foto de la siguiente (ritmo editorial). */
.grid-products { display: grid; gap: var(--space-5) var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-products > li { display: grid; min-width: 0; }
.card { display: grid; gap: 0; align-content: stretch; min-width: 0; height: 100%; background: transparent; border: 0; border-radius: var(--radius-lg);
        box-shadow: none; transition: translate var(--t); }
.card-link { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; border-radius: var(--radius-lg); }
.card-link:focus-visible { outline-offset: 2px; }
.card-media { position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 5; overflow: hidden;
              background: linear-gradient(145deg, var(--surface-card), var(--surface-soft));
              border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: border-color var(--t), box-shadow var(--t); }
.card-media img { width: 100%; height: 100%; padding: var(--space-2); object-fit: contain; display: block; transition: scale var(--t-slow), opacity var(--t); }
.card-badges { position: absolute; z-index: 1; top: var(--space-2); left: var(--space-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); pointer-events: none; }
.card-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-1) var(--space-2); }
.card-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .06em;
            line-height: var(--lh-snug); text-transform: uppercase; color: var(--text-muted); }
.card-title { margin: 0; min-height: calc(var(--lh-snug) * 2em); font-family: var(--brand-font-body); font-size: var(--fs-card-title); font-weight: var(--fw-semibold);
              letter-spacing: 0; line-height: var(--lh-snug); text-wrap: pretty; color: var(--text-primary);
              display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card-commerce { display: grid; align-content: end; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.card .price { margin-top: 0; }
.card .price-now { font-size: var(--fs-price); }
/* Senal de "entrar": boton outline de 44px; con hover/foco de la tarjeta toma el acento. Decorativo (aria-hidden): el enlace es toda la tarjeta. */
.card-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); margin-top: var(--space-1);
            border: 1px solid var(--border-strong); border-radius: var(--control-radius); background: var(--surface-card); color: var(--text-primary);
            font-size: var(--fs-label); font-weight: var(--fw-semibold); transition: background-color var(--t), border-color var(--t), color var(--t); }
.card-link:focus-visible .card-cta { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--text-on-accent); }
.is-soldout .card-cta { color: var(--text-secondary); }
.card-availability { color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.is-soldout .card-media img { filter: grayscale(.6); opacity: .65; }
.is-soldout .card-title { color: var(--text-secondary); }
.is-soldout .price-now { color: var(--text-muted); }
.card-noimg { display: grid; place-items: center; width: 100%; height: 100%;
              background: repeating-linear-gradient(135deg, var(--surface-soft) 0 12px, var(--surface-strong) 12px 13px); color: var(--text-muted); }
.ph-mark { font-family: var(--brand-font-heading); font-size: clamp(2rem, 9vw, 3.75rem); font-weight: var(--fw-black); letter-spacing: .06em; opacity: .55; }

/* Badges: rotulos cortos en mayusculas, siempre con texto (nunca solo color). */
.badge { display: inline-flex; align-items: center; min-height: 1.375rem; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-size: var(--fs-caption); font-weight: var(--fw-bold);
         letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.badge-sale { background: var(--danger); color: var(--surface-page); }
.badge-featured { background: var(--brand-accent); color: var(--text-on-accent); }
.badge-soldout { background: var(--surface-dark); color: var(--text-on-dark); }
.badge-ok { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); }
.badge-off { background: var(--surface-card); color: var(--text-muted); border: 1px solid var(--border-strong); }

/* Precio (PriceDisplay): el anterior va arriba en su propia linea (order), el actual grande y el % OFF a su lado. */
.price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-variant-numeric: tabular-nums; line-height: var(--lh-snug); }
.price-now { font-size: 1.125rem; font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); color: var(--text-primary); overflow-wrap: anywhere; }
.price-from { color: var(--text-muted); font-size: var(--fs-body-sm); }
.price-old { order: -1; flex-basis: 100%; color: var(--text-muted); font-size: var(--fs-body-sm); text-decoration: line-through; }
.price-off { color: var(--success); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); white-space: nowrap; }

@media (min-width: 40rem) { .grid-products { gap: var(--space-5) var(--space-3); } }
@media (min-width: 48rem) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); } }
/* Carriles (vitrinas de la Home): carrusel horizontal con scroll-snap (sin JS) hasta escritorio; asoma la tarjeta siguiente.
   El carril sangra hasta el borde del panel (margen negativo = padding de .shelf) para aprovechar el ancho. */
@media (max-width: 59.99rem) {
    .grid-products.is-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 44%); overflow-x: auto; overscroll-behavior-x: contain;
                             scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); scrollbar-width: thin;
                             margin-inline: calc(var(--space-4) * -1); padding: 0 var(--space-4) var(--space-3); }
    .grid-products.is-rail > li { scroll-snap-align: start; }
}
@media (min-width: 48rem) and (max-width: 59.99rem) {
    .grid-products.is-rail { grid-auto-columns: minmax(11rem, 30%); scroll-padding-inline: var(--space-5); margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); }
}
/* Las vitrinas siguen siendo carriles en escritorio: las tarjetas conservan escala comercial y el catálogo completo queda
   como destino para la exploración exhaustiva. */
@media (min-width: 60rem) {
    .grid-products.is-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(13rem, calc(25% - var(--space-3)));
                             gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
                             scroll-padding-inline: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-3); scrollbar-width: thin; }
    .grid-products.is-rail > li { scroll-snap-align: start; }
}
@media (min-width: 75rem) {
    .grid-products.is-rail { grid-auto-columns: minmax(13rem, calc(20% - var(--space-3))); }
}

/* Controles progresivos compartidos por categorías y vitrinas. Sin JS no aparecen: cada track mantiene scroll nativo,
   scroll-snap, foco y teclado del navegador. */
.shelf-rail { position: relative; min-width: 0; }
[data-rail-track] { scroll-behavior: smooth; }
[data-rail-track]:focus-visible { outline: 3px solid var(--text-link); outline-offset: var(--space-1); border-radius: var(--radius-md); }
/* Cuando todas las tarjetas entran, el carril deja de comportarse visualmente como tal y centra el conjunto. `is-ready`
   evita un salto inicial antes de que JS mida el overflow. Al cambiar el viewport, estadoRail recalcula ambas clases. */
.js .shelf-rail.is-ready:not(.is-overflowing) > [data-rail-track] { justify-content: center; }
.rail-controls { display: none; position: absolute; z-index: 3; inset: 50% calc(var(--space-2) * -1) auto; align-items: center; justify-content: space-between;
                 pointer-events: none; translate: 0 -50%; }
.js .shelf-rail.is-overflowing > .rail-controls { display: flex; }
.rail-arrow { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0; border: 0; border-radius: 50%;
              background: var(--brand-accent); color: var(--text-on-accent); box-shadow: var(--shadow-md); cursor: pointer; pointer-events: auto;
              transition: background-color var(--t), opacity var(--t), scale var(--t); }
.rail-arrow svg { width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-arrow:hover:not(:disabled) { background: var(--brand-accent-hover); scale: 1.05; }
.rail-arrow:focus-visible { outline: 3px solid var(--text-link); outline-offset: 3px; }
.rail-arrow:disabled { opacity: .3; cursor: default; }
@media (min-width: 48rem) {
    .rail-controls { inset-inline: calc(var(--space-5) * -1); }
    .rail-arrow { width: var(--control-height-lg); height: var(--control-height-lg); }
}

/* 6. Home marketplace: hero -> categorias visuales -> franja de confianza -> vitrinas -> banda de marca.
      Todo en el ancho --maxw. En movil (< 40rem) las piezas van a sangre y sin radio (lenguaje de app). */
.home { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; padding-top: 0; }

/* Hero con banners: carrusel scroll-snap; flechas/puntos #hero-slide-N (tienda.js desplaza el carril y hace autoplay).
   overflow-x debe seguir siendo "auto" en .hero-track: "hidden" bloquearia el scroll-snap. Banner con contain: nunca se recorta. */
.hero { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.hero-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
              border-radius: var(--radius-lg); background: var(--surface-strong); box-shadow: var(--shadow-sm); }
.hero-track::-webkit-scrollbar { display: none; }
.hero-track:focus-visible { outline-offset: 3px; }
.hero-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; background: var(--surface-strong); scroll-margin-top: calc(var(--header-h) + var(--space-3)); }
/* Las franjas que deja la imagen completa (contain) se rellenan con la misma foto desenfocada, no con gris liso. */
.hero-slide { overflow: hidden; isolation: isolate; }
.hero-slide::before { content: ""; position: absolute; inset: -2rem; z-index: -1; background: var(--hero-bg, none) center / cover no-repeat; filter: blur(28px) saturate(1.15); scale: 1.1; opacity: .85; }
/* El marco reserva espacio antes de cargar la imagen (evita saltos de layout). En móvil, el texto vive debajo de la pieza:
   no tapa la creatividad ni se recorta si el comercio carga un título largo. Desde tableta vuelve a superponerse. */
.hero-slide { display: grid; grid-template-rows: auto auto; align-content: start; }
.hero-visual { position: relative; width: 100%; }
.hero-slide picture { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
@media (max-width: 47.99rem) { .hero-visual:not(.has-mobile) picture { aspect-ratio: 16 / 9; } }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-visual.has-mobile img { object-fit: cover; }
.hero-text { position: relative; display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5);
             background: var(--surface-card); color: var(--text-primary); }
.hero-index { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .2em; font-variant-numeric: tabular-nums; opacity: .85; }
.hero-text h2 { margin: 0; max-width: 18ch; font-size: clamp(1.5rem, 1.1rem + 3.2vw, 3.5rem); font-weight: var(--fw-black); letter-spacing: -.03em; line-height: 1; color: inherit; }
.hero-text p { margin: 0; max-width: 42ch; color: var(--text-secondary); font-size: var(--fs-lead); }
.hero-text .btn { min-height: var(--control-height-lg); padding-inline: var(--space-5); }
.hero-text :focus-visible { outline-color: var(--text-link); }
.hero-arrows { position: absolute; z-index: 2; inset: 50% var(--space-2) auto; display: flex; justify-content: space-between; pointer-events: none; translate: 0 -50%; }
.hero-arrow { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border: 1px solid var(--border-subtle); border-radius: 50%;
              background: color-mix(in srgb, var(--surface-elevated) 92%, transparent); color: var(--text-primary); box-shadow: var(--shadow-md); pointer-events: auto;
              transition: background-color var(--t), color var(--t); }
.hero-arrow svg { width: var(--space-5); height: var(--space-5); }
.hero-arrow:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--text-on-accent); }
.hero-arrow:focus-visible { outline: 3px solid var(--text-link); outline-offset: 2px; }
.hero-pages { display: flex; justify-content: center; align-items: center; gap: 0; min-height: var(--control-height); }
.hero-pages a { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border-radius: 50%; }
.hero-pages a::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--border-strong); transition: width var(--t), background-color var(--t); }
.hero-pages a:hover::before, .hero-pages a:focus-visible::before, .hero-pages a[aria-current]::before { width: var(--space-5); background: var(--brand-accent); }
.hero-pause { display: none; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0; border: 0; border-radius: 50%;
              background: transparent; color: var(--text-secondary); cursor: pointer; }
.js .hero-pause { display: grid; }
.hero-pause:hover { background: var(--surface-hover); color: var(--text-primary); }
.hero-pause-icon { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-pause .is-play { display: none; }
.hero-pause[aria-pressed="true"] .is-pause { display: none; }
.hero-pause[aria-pressed="true"] .is-play { display: block; }

/* Hero sin banners: franja de marca (--surface-brand) con nombre, eslogan y CTA; collage decorativo con fotos reales si hay. */
.hero-plain { position: relative; overflow: hidden; border-radius: var(--radius-lg); color: var(--text-on-brand); box-shadow: var(--shadow-sm);
              background: radial-gradient(70% 90% at 88% 10%, color-mix(in srgb, var(--brand-accent) 30%, transparent), transparent 70%),
                          radial-gradient(55% 70% at 0% 100%, color-mix(in srgb, var(--brand-secondary) 35%, transparent), transparent 70%),
                          var(--surface-brand); }
.hero-plain-inner { display: grid; gap: var(--space-6); align-items: center; padding: clamp(2.25rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem); }
.hero-copy { display: grid; justify-items: start; gap: var(--space-4); min-width: 0; }
.hero-plain .eyebrow { margin: 0; color: color-mix(in srgb, var(--text-on-brand) 80%, var(--surface-brand)); }
.hero-plain h1 { margin: 0; max-width: 14ch; font-size: var(--fs-display); font-weight: var(--fw-black); letter-spacing: -.035em; line-height: .98; overflow-wrap: anywhere; }
.hero-lead { margin: 0; max-width: 40ch; font-size: var(--fs-lead); color: color-mix(in srgb, var(--text-on-brand) 88%, var(--surface-brand)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero-plain :focus-visible { outline-color: var(--text-on-brand); }
.hero-collage { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.hero-collage.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-collage.n1 { grid-template-columns: minmax(0, 16rem); }
.hero-collage-item { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-3); }
.hero-collage-item:nth-child(2) { margin-top: var(--space-5); }
.hero-collage-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Franja de confianza: carril con scroll en movil/tableta; una fila de columnas iguales en escritorio. Items con enlace
   (seguimiento, politica de cambios, WhatsApp) son toda la celda. */
.trust { margin-top: var(--space-4); overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.trust-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 80%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.trust-list::-webkit-scrollbar { display: none; }
.trust-list > li { display: flex; min-width: 0; scroll-snap-align: start; }
.trust-list > li + li { border-left: 1px solid var(--border-subtle); }
.trust-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 4.5rem; padding: var(--space-3) var(--space-4); transition: background-color var(--t); }
a.trust-item:hover { background: var(--surface-hover); }
a.trust-item:focus-visible { outline-offset: -3px; }
.trust-icon { flex: none; display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border-radius: 50%; background: var(--surface-accent-soft); color: var(--text-link); }
.trust-text { display: grid; gap: .125rem; min-width: 0; }
.trust-text strong { color: var(--text-primary); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.trust-text > span:not(.visually-hidden) { color: var(--text-secondary); font-size: .8125rem; line-height: var(--lh-snug); }
a.trust-item strong { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .2em; }
a.trust-item:hover strong { text-decoration-color: currentColor; }

/* Categorias visuales: foto propia (.tile--foto, contain: se ve completa) o inicial sobre tinte de acento. El cuadro de
   imagen es un hijo con aspect-ratio y ancho 100%: NUNCA min-height ni aspect-ratio en el propio item de la grilla
   (antes se solapaban en escritorio porque el alto minimo forzaba un ancho mayor que la columna). */
.shelf--cats { box-shadow: inset 0 3px 0 var(--brand-accent), var(--shadow-xs); }
.tiles { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(5.5rem, calc(25% - var(--space-2))); gap: var(--space-2);
         overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-1); padding: var(--space-1); scrollbar-width: thin; }
.tiles > li { min-width: 0; scroll-snap-align: start; }
.tile { display: grid; justify-items: center; align-content: start; gap: var(--space-2); min-width: 0; height: 100%; padding: var(--space-2); border-radius: var(--radius-md);
        background: var(--surface-brand); color: var(--text-on-brand); text-align: center; box-shadow: var(--shadow-xs); }
.tile-media { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid color-mix(in srgb, var(--text-on-brand) 24%, transparent); border-radius: var(--radius-lg);
              background: color-mix(in srgb, var(--text-on-brand) 9%, transparent); transition: border-color var(--t), box-shadow var(--t); }
.tile-foto { display: block; width: 100%; height: 100%; padding: var(--space-1); object-fit: contain; background: var(--surface-card); transition: scale .4s var(--ease); }
.tile-art { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-on-brand); background: transparent; }
.tile-initial { font-family: var(--brand-font-heading); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); font-weight: var(--fw-black); line-height: 1; }
.tile-copy { display: grid; gap: .125rem; width: 100%; min-width: 0; }
.tile-name { color: var(--text-on-brand); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug); overflow-wrap: anywhere;
             display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-count { color: color-mix(in srgb, var(--text-on-brand) 76%, transparent); font-size: var(--fs-caption); }
.tile:hover .tile-media { border-color: color-mix(in srgb, var(--text-on-brand) 55%, transparent); box-shadow: var(--shadow-sm); }
.tile:hover .tile-name { color: var(--text-on-brand); }
.tile--foto:hover .tile-foto { scale: 1.05; }
.tile:focus-visible { outline: 3px solid var(--text-on-brand); outline-offset: 3px; }

/* Banda de marca: franja --surface-brand con nombre/eslogan y canales reales (WhatsApp, redes). */
.brand-band { display: grid; gap: var(--space-5); align-items: center; margin-top: var(--space-4); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-lg);
              background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 70%), var(--surface-brand); color: var(--text-on-brand); }
.brand-band .eyebrow { margin: 0 0 var(--space-2); color: color-mix(in srgb, var(--text-on-brand) 78%, var(--surface-brand)); }
.brand-band h2 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); color: var(--text-on-brand); }
.brand-band-lead { margin: var(--space-2) 0 0; max-width: 48ch; color: color-mix(in srgb, var(--text-on-brand) 86%, var(--surface-brand)); }
.brand-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.brand-band :focus-visible { outline-color: var(--text-on-brand); }
.social-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
        background: var(--surface-card); font-weight: var(--fw-semibold); text-decoration: none; transition: background-color var(--t), color var(--t), border-color var(--t); }
.pill:hover { background: var(--text-primary); color: var(--surface-card); border-color: var(--text-primary); }
.brand-band .pill { background: transparent; border-color: color-mix(in srgb, var(--text-on-brand) 45%, transparent); color: var(--text-on-brand); }
.brand-band .pill:hover { background: var(--text-on-brand); border-color: var(--text-on-brand); color: var(--surface-brand); }
.home > .state { margin-top: var(--space-4); }

@media (max-width: 39.99rem) {
    .home > :is(.trust, .shelf, .brand-band) { margin-inline: calc(var(--gutter) * -1); }
    .home > :is(.trust, .shelf, .brand-band) { border-radius: 0; border-inline: 0; }
    .home > .shelf { box-shadow: none; }
    .home > .shelf--sale { box-shadow: inset 0 3px 0 var(--danger); }
    .home { padding-top: 0; }
    .home .hero-track, .home .hero-plain { border-radius: 0; box-shadow: none; }
    .home > :is(.trust, .shelf, .brand-band) { margin-top: var(--space-2); }
    .shelf-head .eyebrow { display: none; }            /* movil: encabezado de una linea (titulo + Ver todo) */
}
@media (min-width: 40rem) {
    .hero-arrows { inset-inline: var(--space-3); }
    .hero-arrow { width: var(--control-height-lg); height: var(--control-height-lg); }
}
@media (min-width: 48rem) {
    .tiles { grid-auto-columns: minmax(8rem, calc(16.667% - var(--space-3))); gap: var(--space-3); }
    .hero-slide { display: grid; grid-template-rows: 1fr; align-items: stretch; }
    .hero-visual { grid-area: 1 / 1; }
    .hero-slide picture { aspect-ratio: 8 / 3; }
    .hero-slide img { object-fit: cover; }
    .hero-text { position: absolute; inset: auto 0 0 0; padding: var(--space-6) clamp(var(--space-5), 5vw, 4rem) clamp(var(--space-5), 4vw, 3rem);
                 background: linear-gradient(to top, color-mix(in srgb, var(--brand-text) 86%, transparent), color-mix(in srgb, var(--brand-text) 34%, transparent) 62%, transparent);
                 color: var(--brand-background); }
    .hero-text p { color: color-mix(in srgb, var(--brand-background) 90%, transparent); }
    .hero-text :focus-visible { outline-color: var(--brand-background); }
    .brand-band { grid-template-columns: minmax(0, 1fr) auto; }
    .brand-band-actions { justify-content: flex-end; }
}
@media (min-width: 60rem) {
    .trust-list { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
    .tiles { gap: var(--space-4); }
    .hero-plain-inner.has-collage { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .hero-collage { margin: var(--space-4) var(--space-4) var(--space-4) 0; }
    .hero-collage.n3 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .hero-collage.n3 .hero-collage-item:first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
    .hero-collage.n3 .hero-collage-item:not(:first-child) { aspect-ratio: 1; margin-top: 0; }
    .hero-collage.n2 .hero-collage-item:nth-child(2) { margin-top: var(--space-6); }
    .hero-collage.n1 { grid-template-columns: minmax(0, 20rem); justify-content: end; }
}

/* 7. Catalogo. Movil: [Filtrar][Ordenar] / conteo + chips / grilla (2 columnas). Filtrar = drawer lateral derecho, Ordenar = hoja inferior.
      Tableta (40rem): los dos botones compactos a la izquierda y el conteo al lado. Escritorio (60rem): sidebar sticky en panel
      blanco (16rem), barra [conteo + chips | Ordenar] y grilla auto-fill (minimo 12rem: 3 columnas a 1024px, 4 desde ~1200px).
      Todo con <details>, formularios GET y enlaces (sin JS); tienda.js agrega velo/Escape/bloqueo de scroll. */
.catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "filters sort" "bar bar" "results results"; gap: var(--space-3); align-items: start; }
.filters { grid-area: filters; min-width: 0; --filters-w: min(24rem, 92vw); }
.sort { grid-area: sort; position: relative; min-width: 0; }
.result-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; min-height: var(--control-height);
              padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--control-radius); background: var(--surface-card); box-shadow: var(--shadow-xs); }
.catalog-results { grid-area: results; min-width: 0; }

/* Botones de la barra (summary de Filtrar y Ordenar): mismo sistema que un control */
.catalog-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-4);
               border: 1px solid var(--border-default); border-radius: var(--control-radius); background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs);
               font-size: var(--fs-label); font-weight: var(--fw-semibold); line-height: 1.2; white-space: nowrap; list-style: none; cursor: pointer; user-select: none;
               transition: background-color var(--t), border-color var(--t), color var(--t); }
.catalog-btn::-webkit-details-marker { display: none; }
.catalog-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.catalog-btn .ico { flex: none; }
.ft-open { display: inline-flex; align-items: center; gap: var(--space-2); }
.ft-close { display: none; }
.filters-count { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem; border-radius: var(--radius-pill);
                  background: var(--brand-accent); color: var(--text-on-accent); font-size: var(--fs-caption); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.filters.has-active > .filters-toggle { border-color: var(--brand-accent); background: var(--surface-accent-soft); box-shadow: inset 0 0 0 1px var(--brand-accent); }
.sort-by, .sort-colon, .sort-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sort-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand-accent); }
.sort-chev { display: none; flex: none; color: var(--text-muted); transition: transform var(--t); }
.sort[open] .sort-chev { transform: rotate(180deg); }
.drawer-backdrop { display: none; }

/* Menu de orden: lista de enlaces (cada orden es una URL). Movil = hoja inferior; escritorio = popover. */
.sort[open] .sort-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--surface-overlay); pointer-events: none; animation: fade-in .2s var(--ease); }
.js .sort[open] .sort-backdrop { pointer-events: auto; }
.sort[open] .sort-menu { position: fixed; z-index: var(--z-drawer); inset: auto 0 0 0; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain;
                         padding: var(--space-3) 0 calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--surface-elevated);
                         border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); animation: sheet-in .25s var(--ease); }
.sort-menu::before { content: ""; display: block; width: 2.5rem; height: 4px; margin: 0 auto var(--space-2); border-radius: var(--radius-pill); background: var(--border-default); }
.sort-title { margin: 0; padding: var(--space-2) var(--gutter) var(--space-3); font-family: var(--brand-font-heading); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.sort-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-height-lg); padding-inline: var(--gutter);
            color: var(--text-primary); text-decoration: none; font-weight: var(--fw-medium); transition: background-color var(--t); }
a.sort-opt { color: var(--text-primary); }
.sort-opt:hover { background: var(--surface-hover); }
.sort-opt:focus-visible { outline-offset: -3px; }
.sort-opt[aria-current] { font-weight: var(--fw-bold); }
.sort-check { flex: none; visibility: hidden; color: var(--text-link); }
.sort-opt[aria-current] .sort-check { visibility: visible; }

/* Panel de filtros: grupos separados por filetes, sin cajas internas (no compite con los productos) */
.filters-panel { display: grid; min-width: 0; }
.filters-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3) var(--space-4); }
.filters-head-copy { display: grid; gap: var(--space-1); min-width: 0; }
.filters-kicker { color: var(--text-link); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); line-height: var(--lh-snug); text-transform: uppercase; }
.filters-heading { margin: 0; font-family: var(--brand-font-heading); font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.filters-active-label { color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.filters-reset { display: inline-flex; align-items: center; min-height: var(--control-height); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-link); text-underline-offset: .2em; }
.filters-form { display: grid; min-width: 0; }
.fgroup { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding-block: var(--space-4); border-top: 1px solid var(--border-subtle); }
.fgroup-title { float: none; margin: 0; padding: 0; font-family: var(--brand-font-body); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
                line-height: var(--lh-snug); text-transform: uppercase; color: var(--text-primary); }
/* Leyenda flotante a lo ancho: no se dibuja sobre el filete superior del fieldset y pasa a ser un item mas de la grilla (gap). */
legend.fgroup-title { float: left; width: 100%; }
.cat-nav ul { display: grid; }
.cat-nav ul { gap: var(--space-1); }
.cat-nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-height); padding-inline: var(--space-3) var(--space-2);
             border: 1px solid transparent; border-radius: var(--control-radius); color: var(--text-secondary); font-size: var(--fs-body-sm); text-decoration: none; transition: color var(--t), border-color var(--t), background-color var(--t); }
.cat-nav a:hover { color: var(--text-primary); border-color: var(--border-subtle); background: var(--surface-hover); }
.cat-nav a:focus-visible { outline-offset: -3px; }
.cat-nav a[aria-current=page] { color: var(--text-primary); font-weight: var(--fw-bold); border-color: var(--brand-accent); background: var(--surface-accent-soft); box-shadow: inset 3px 0 0 var(--brand-accent); }
.cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count { flex: none; color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
/* Opciones de talle/color: radio real (invisible, encima) + caja visible. Mismo lenguaje que las opciones de la ficha. */
.fopts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fopt { position: relative; display: inline-flex; min-width: 0; }
.fopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fopt-box { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--control-height); min-height: var(--control-height); padding: 0 var(--space-3);
            border: 1px solid var(--border-default); border-radius: var(--control-radius); background: var(--surface-card); color: var(--text-primary);
            font-size: var(--fs-label); font-weight: var(--fw-medium); line-height: 1.2; overflow-wrap: anywhere; transition: border-color var(--t), background-color var(--t), color var(--t), box-shadow var(--t); }
.fopt:hover .fopt-box { border-color: var(--border-strong); }
.fopt input:checked + .fopt-box { border-color: var(--brand-accent); background: var(--surface-accent-soft); color: var(--text-primary); font-weight: var(--fw-bold);
                                  box-shadow: inset 0 0 0 1px var(--brand-accent); }
.fopt input:focus-visible + .fopt-box { outline: 3px solid var(--text-link); outline-offset: 2px; }
.fopt-check { display: none; color: var(--text-link); font-size: var(--fs-label); font-weight: var(--fw-black); line-height: 1; }
.fopt input:checked + .fopt-box .fopt-check { display: inline; }
.fopt-color .fopt-box { border-radius: var(--radius-pill); padding-inline: var(--space-3) var(--space-4); }
.fopt-box .swatch { flex: none; width: 1rem; height: 1rem; }
.price-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--space-2); }
.price-input { display: grid; gap: var(--space-1); min-width: 0; }
.price-input label { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--text-muted); }
.price-input input { width: 100%; height: var(--control-height); min-height: 0; }
.price-input input:focus { border-color: var(--brand-accent); box-shadow: var(--focus-ring); }
.price-sep { display: grid; place-items: center; height: var(--control-height); color: var(--text-muted); }
.price-range .hint { margin: 0; font-size: var(--fs-caption); }
.stock-filter { position: relative; display: grid; grid-template-columns: var(--control-height) minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: calc(var(--control-height) + var(--space-3));
                padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--control-radius); background: var(--surface-card); cursor: pointer;
                transition: border-color var(--t), background-color var(--t), box-shadow var(--t); }
.stock-filter:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.stock-filter > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.stock-check { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; justify-self: center; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface-card); color: transparent; transition: background-color var(--t), border-color var(--t), color var(--t); }
.stock-copy { display: grid; gap: var(--space-1); line-height: var(--lh-snug); }
.stock-copy strong { font-size: var(--fs-label); }
.stock-copy small { color: var(--text-muted); font-size: var(--fs-caption); }
.stock-filter:has(input:checked) { border-color: var(--brand-accent); background: var(--surface-accent-soft); box-shadow: inset 0 0 0 1px var(--brand-accent); }
.stock-filter input:checked + .stock-check { border-color: var(--brand-accent); background: var(--brand-accent); color: var(--text-on-accent); }
.stock-filter input:focus-visible + .stock-check { outline: 3px solid var(--text-link); outline-offset: 2px; }
.filters-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-4); border-top: 1px solid var(--border-subtle); }
.filters-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: 1 1 8rem; min-height: var(--control-height-lg); }
.filters-actions .btn svg { flex: none; transition: transform var(--t); }
.filters-actions .btn:hover svg { transform: translateX(var(--space-1)); }

/* Conteo (role=status) y chips de filtros activos: visual de 32px con area tactil de 44px */
.result-count { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); }
.result-count strong { color: var(--text-primary); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-2); }
.chip, .chips-clear { position: relative; display: inline-flex; align-items: center; min-height: 2rem; font-size: var(--fs-body-sm); text-decoration: none; }
.chip::after, .chips-clear::after { content: ""; position: absolute; inset: -.375rem 0; }
.chip { gap: var(--space-2); padding: 0 var(--space-1) 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-card);
        color: var(--text-primary); font-weight: var(--fw-medium); transition: background-color var(--t), color var(--t), border-color var(--t); }
.chip-x { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 1.1rem; line-height: 1; color: var(--text-muted); }
.chip:hover { background: var(--surface-dark); border-color: var(--surface-dark); color: var(--text-on-dark); }
.chip:hover .chip-x { color: inherit; }
a.chips-clear { padding-inline: var(--space-1); color: var(--text-link); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: .2em; }

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-block: var(--space-6) 0; padding: 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height); min-height: var(--control-height); padding: 0 var(--space-4);
                                  border: 1px solid var(--border-default); border-radius: var(--control-radius); background: var(--surface-card); font-weight: var(--fw-semibold);
                                  transition: background-color var(--t), color var(--t); }
.pagination a:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.pagination .is-current { background: var(--brand-accent); color: var(--text-on-accent); border-color: var(--brand-accent); }

@keyframes drawer-in-right { from { transform: translateX(100%); } }
@keyframes sheet-in { from { transform: translateY(100%); } }

/* Movil y tableta: Filtrar abre un drawer lateral derecho. El summary se fija arriba como cabecera del drawer ("Filtros" + cerrar). */
@media (max-width: 59.99rem) {
    .filters[open] > summary { position: fixed; z-index: calc(var(--z-drawer) + 1); top: 0; right: 0; width: var(--filters-w); height: var(--header-row-h);
                               justify-content: stretch; padding: 0 max(var(--space-2), calc(var(--gutter) - .625rem)) 0 var(--gutter);
                               border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: var(--surface-elevated); box-shadow: none; animation: drawer-in-right .25s var(--ease); }
    .filters[open] > summary:hover { background: var(--surface-elevated); }
    .filters[open] .ft-open { display: none; }
    .filters[open] .ft-close { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
    .ft-title { font-family: var(--brand-font-heading); font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
    .ft-x { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-pill); transition: background-color var(--t); }
    .filters[open] > summary:hover .ft-x { background: var(--surface-hover); }
    .filters[open] .filters-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--surface-overlay); animation: fade-in .2s var(--ease); }
    .filters[open] .filters-panel { position: fixed; z-index: var(--z-drawer); inset: 0 0 0 auto; width: var(--filters-w); overflow-y: auto; overscroll-behavior: contain;
                                    align-content: start; padding: var(--header-row-h) var(--gutter) 0; background: var(--surface-elevated); box-shadow: var(--shadow-lg);
                                    animation: drawer-in-right .25s var(--ease); }
    .filters-head { display: none; }
    .filters-head + .fgroup, .filters-head + .filters-form > .fgroup:first-of-type { border-top: 0; }
    .filters-actions { position: sticky; bottom: 0; margin-inline: calc(var(--gutter) * -1); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
                       background: var(--surface-elevated); box-shadow: 0 -1px 0 var(--border-subtle); border-top: 0; }
}
@media (min-width: 40rem) {
    .catalog { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "filters sort bar" "results results results"; column-gap: var(--space-2); row-gap: var(--space-4); }
    .result-bar { margin-left: var(--space-3); }
    .sort-chev { display: block; }
    .grid-products.catalog-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
}
@media (min-width: 60rem) {
    @supports selector(::details-content) {
        .filters::details-content { content-visibility: visible; }
        .filters > summary { display: none; }
    }
    /* Sidebar en panel blanco sticky (ocupa las dos filas) | barra [conteo + chips | Ordenar] | grilla. */
    .catalog { grid-template-columns: 16rem minmax(0, 1fr) auto; grid-template-areas: "filters bar sort" "filters results results"; column-gap: var(--space-5); row-gap: var(--space-3); }
    .result-bar { margin-left: 0; padding-block: var(--space-1); border-color: transparent; background: transparent; box-shadow: none; }
    .filters { position: sticky; top: var(--sticky-top); max-height: calc(100vh - var(--sticky-top) - var(--space-4)); overflow-y: auto; overscroll-behavior: contain;
               padding: 0 var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
               box-shadow: var(--shadow-xs); scrollbar-width: thin; }
    .js .filters > summary { display: none; }
    .filters-actions { position: sticky; bottom: 0; background: var(--surface-card); }
    .filters-actions .btn-outline { display: none; }
    .filters-actions .btn { flex-basis: 100%; }
    /* Ordenar: boton liviano "Ordenar por: X" + popover (sin velo) */
    .sort-toggle { border-color: transparent; background: transparent; box-shadow: none; padding-inline: var(--space-3); font-weight: var(--fw-medium); color: var(--text-secondary); }
    .sort-toggle:hover, .sort[open] .sort-toggle { background: var(--surface-card); border-color: var(--border-subtle); }
    .sort-toggle .ico, .sort-dot { display: none; }
    .sort-by, .sort-colon, .sort-current { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .sort-current { color: var(--text-primary); font-weight: var(--fw-semibold); }
    .sort-label { color: var(--text-muted); }
    .sort[open] .sort-backdrop { display: none; }
    .sort[open] .sort-menu { position: absolute; z-index: var(--z-sticky); inset: calc(100% + var(--space-2)) 0 auto auto; width: max-content; min-width: 15rem; max-height: none;
                             padding: var(--space-2) 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: rise .15s var(--ease); }
    .sort-menu::before { display: none; }
    .sort-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
    .sort-opt { min-height: var(--control-height); padding-inline: var(--space-4); font-size: var(--fs-body-sm); }
}

/* 8. Ficha de producto (composicion marketplace). Movil: galeria + informacion forman una hoja blanca a sangre (foto activa +
      flechas + contador, miniaturas horizontales, categoria/titulo/precio y compra apilada con barra fija abajo).
      Tableta (48rem): galeria en panel | columna de compra sticky con tarjeta propia (.pdp-buybox). Escritorio (60rem):
      miniaturas verticales | foto (7fr) · compra (5fr). Opciones de talle/color = mismo radio con caja visible que los
      filtros del catalogo (.fopt), en tamano de compra (48px). Solo datos reales de la API. */
.swatch { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--border-strong); box-shadow: 0 0 0 2px var(--surface-page); }
.pdp { display: grid; gap: 0; margin-top: var(--space-2); }

/* Galeria: banda/panel claro con la foto en object-fit: contain y aire alrededor (padding del <img>). Una foto activa por vez
   (.is-active lo ponen Blazor y, como respaldo inmediato, tienda.js). Sin fondo desenfocado: fondo liso y neutro. */
.pdp-gallery { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "thumbs"; gap: var(--space-3); min-width: 0;
               margin-inline: calc(var(--gutter) * -1); padding: var(--space-3) var(--gutter) var(--space-4);
               border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.pdp-stage { grid-area: stage; position: relative; min-width: 0; touch-action: pan-y pinch-zoom; }
.pdp-track { display: block; margin: 0; padding: 0; }
.pdp-slide { display: block; min-width: 0; }
.pdp-slide:not(.is-active) { display: none; }
/* Marco cuadrado en movil para acercar precio y compra al primer recorrido; 4:5 desde tableta. El tope evita que fotos
   altas empujen toda la compra fuera de pantalla y object-fit conserva la imagen completa sin deformarla. */
.pdp-frame { position: relative; aspect-ratio: 1; max-height: min(60svh, 30rem); overflow: hidden; border-radius: var(--radius-md);
             background: linear-gradient(145deg, var(--surface-card), var(--surface-soft)); }
.pdp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--space-3); object-fit: contain; object-position: center; display: block;
                 transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .25s var(--ease); }
.pdp-stage.is-empty .pdp-frame { background: var(--surface-soft); }
.pdp-media-badge { position: absolute; z-index: 2; top: var(--space-3); left: var(--space-3); display: inline-flex; align-items: center; min-height: 1.75rem;
                   padding-inline: var(--space-3); border-radius: var(--radius-pill); background: var(--danger); color: var(--surface-page);
                   font-size: var(--fs-caption); font-weight: var(--fw-black); letter-spacing: .05em; box-shadow: var(--shadow-xs); }
.pdp-gallery-arrow { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0;
                     border: 1px solid var(--brand-accent); border-radius: 50%; background: var(--brand-accent); color: var(--text-on-accent); box-shadow: var(--shadow-sm);
                     cursor: pointer; translate: 0 -50%; transition: background-color var(--t), color var(--t), border-color var(--t); }
.pdp-gallery-arrow.is-prev { left: var(--space-2); }
.pdp-gallery-arrow.is-next { right: var(--space-2); }
.pdp-gallery-arrow svg { width: var(--space-5); height: var(--space-5); }
.pdp-gallery-arrow:hover { border-color: var(--brand-accent-hover); background: var(--brand-accent-hover); }
.pdp-gallery-arrow:focus-visible { outline: 3px solid var(--text-link); outline-offset: 2px; box-shadow: var(--shadow-sm); }
.pdp-count { position: absolute; right: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center; min-height: var(--control-height-sm); padding: 0 var(--space-3);
             border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-dark) 86%, transparent); color: var(--text-on-dark); box-shadow: var(--shadow-xs);
             font-size: var(--fs-caption); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; pointer-events: none; }
/* Miniaturas cuadradas: fila con scroll propio (< 60rem) o columna a la izquierda de la foto (>= 60rem). El padding de la
   lista deja lugar al anillo de foco (fuera de la miniatura, no se confunde con el de la seleccionada). */
.pdp-thumbs { grid-area: thumbs; display: flex; gap: var(--space-2); min-width: 0; margin: calc(var(--space-2) * -1); padding: var(--space-2);
              overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.pdp-thumbs li { flex: none; }
.pdp-thumb { position: relative; display: block; width: 3.5rem; aspect-ratio: 1; padding: var(--space-1); border: 0; border-radius: var(--radius-md); background: var(--surface-card); cursor: pointer; }
.pdp-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border-subtle); pointer-events: none; transition: box-shadow var(--t); }
.pdp-thumb:hover::after { box-shadow: inset 0 0 0 1px var(--border-strong); }
.pdp-thumb[aria-pressed=true]::after { box-shadow: inset 0 0 0 2px var(--brand-accent-ink); }
.pdp-thumb:focus-visible { outline: 3px solid var(--text-link); outline-offset: 2px; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

/* Columna de compra: categoria + titulo | precio + estado (aria-live) | tarjeta de compra [opciones | precios por cantidad |
   aviso | cantidad + CTA | envio y politicas]. En movil la tarjeta es display: contents (compra apilada, barra fija) y la
   columna continua la hoja blanca de la galeria. */
.pdp-info { display: grid; gap: var(--space-5); align-content: start; min-width: 0;
            margin-inline: calc(var(--gutter) * -1); padding: var(--space-4) var(--gutter) var(--space-5); background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.pdp-buybox { display: contents; }
.pdp-summary { display: grid; gap: var(--space-4); min-width: 0; }
.pdp-head { display: grid; gap: var(--space-2); min-width: 0; }
.pdp-cat { justify-self: start; display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-bold);
           letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none; transition: color var(--t); }
a.pdp-cat { color: var(--text-link); }
a.pdp-cat:hover { text-decoration: underline; }
/* Titulo sobrio (h3 en escala, peso bold): el protagonista de la columna es el precio. */
.pdp-title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; text-wrap: pretty; }
.pdp-buyline { display: grid; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.pdp-buyline .price { gap: 0 var(--space-3); }
.pdp-buyline .price-now { font-size: var(--fs-price-lg); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); }
.pdp-buyline .price-old, .pdp-buyline .price-from { font-size: var(--fs-body); }
.pdp-buyline .price-off { font-size: var(--fs-body); }
/* Oferta real (hay precio anterior mayor): el precio actual toma el tono de oferta, igual que el badge de la foto. */
.pdp-buyline.is-sale .price-now { color: var(--danger); }
.pdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 1.5rem; }
.pdp-stock { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--success); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.pdp-buyline .pdp-stock { min-height: 2rem; padding-inline: var(--space-3); border-radius: var(--radius-pill); background: var(--success-soft); }
.pdp-stock-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.pdp-stock.is-out { color: var(--text-muted); }
.pdp-buyline .pdp-stock.is-out { background: var(--surface-soft); }
.pdp-stock.is-out .pdp-stock-dot { background: var(--text-muted); box-shadow: 0 0 0 3px var(--surface-soft); }

.pdp-options { display: grid; gap: var(--space-5); }
.pdp-options-title { margin: 0 0 calc(var(--space-2) * -1); font-family: var(--brand-font-body); font-size: var(--fs-card-title); font-weight: var(--fw-bold); letter-spacing: 0; }
.pdp-opt-group { display: grid; gap: var(--space-3); min-width: 0; }
legend.pdp-opt-legend { float: left; width: 100%; margin: 0; padding: 0; color: var(--text-primary); font-size: var(--fs-caption); font-weight: var(--fw-bold);
                        letter-spacing: var(--tracking-caps); line-height: var(--lh-snug); text-transform: uppercase; }
.pdp-opt-sel { color: var(--text-secondary); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; }
.pdp-opt .fopt-box { min-width: var(--control-height-lg); min-height: var(--control-height-lg); padding-inline: var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-body-sm); }
.pdp-opt.fopt-color .fopt-box { border-radius: var(--radius-pill); }
.pdp-opt.fopt-color .fopt-box { padding-inline: var(--space-3) var(--space-4); }
.pdp-opt .swatch { width: 1.125rem; height: 1.125rem; }
/* Sin stock en ninguna combinacion: deshabilitado. Sin stock solo en la combinacion actual (.is-off): tachado pero elegible. */
.pdp-opt input:disabled { cursor: not-allowed; }
.pdp-opt input:disabled + .fopt-box, .pdp-opt.is-off .fopt-box {
    border-style: dashed; color: var(--text-muted); box-shadow: none;
    background: linear-gradient(to top right, transparent calc(50% - .5px), var(--border-strong) 50%, transparent calc(50% + .5px)), var(--surface-soft); }
.pdp-opt.is-off input:checked + .fopt-box { border: 2px solid var(--text-primary); color: var(--text-primary); font-weight: var(--fw-semibold); }

.pdp-status { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.pdp-status:empty { margin-top: calc(var(--space-5) * -1); }       /* region viva siempre presente; vacia no suma separacion */
.pdp-status.is-info { padding-left: var(--space-3); border-left: 2px solid var(--brand-accent); }
.pdp-status.is-warn { padding: var(--space-3) var(--space-4); border: 1px solid var(--warning-border); border-radius: var(--radius-md); background: var(--warning-soft); color: var(--text-primary); }

.add-form { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: end; gap: var(--space-3); }
.add-qty { display: grid; gap: var(--space-1); min-width: 0; }
.add-qty label { color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.pdp-qty-control { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; height: var(--control-height-xl);
                   overflow: hidden; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--surface-card); transition: border-color var(--t), box-shadow var(--t); }
.js .pdp-qty-control { grid-template-columns: var(--control-height) minmax(2.5rem, 1fr) var(--control-height); }
.pdp-qty-control:focus-within { border-color: var(--brand-accent); box-shadow: var(--focus-ring); }
.pdp-qty-control button { display: none; place-items: center; min-width: var(--control-height); min-height: 100%; padding: 0; border: 0; background: var(--surface-soft); color: var(--text-primary); cursor: pointer; }
.js .pdp-qty-control button { display: grid; }
.pdp-qty-control button:first-child { border-right: 1px solid var(--border-subtle); }
.pdp-qty-control button:last-child { border-left: 1px solid var(--border-subtle); }
.pdp-qty-control button:hover:not(:disabled) { background: var(--surface-hover); }
.pdp-qty-control button:focus-visible { outline: 3px solid var(--text-link); outline-offset: -3px; }
.pdp-qty-control button:disabled { color: var(--text-muted); cursor: not-allowed; opacity: .55; }
.pdp-qty-control button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.add-form .pdp-qty-control input[type=number] { width: 100%; height: 100%; min-height: 0; padding-inline: var(--space-1); border: 0; border-radius: 0; box-shadow: none;
                                                   text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.js .add-form .pdp-qty-control input[type=number] { appearance: textfield; }
.add-form .pdp-qty-control input[type=number]:focus { outline: 0; box-shadow: none; }
.js .add-form .pdp-qty-control input[type=number]::-webkit-inner-spin-button,
.js .add-form .pdp-qty-control input[type=number]::-webkit-outer-spin-button { margin: 0; appearance: none; }
.pdp-cta { width: 100%; min-height: var(--control-height-xl); padding-inline: var(--space-5); font-size: var(--fs-body); box-shadow: var(--shadow-sm); }
.pdp-cta-ico { flex: none; }
.pdp-cta:disabled { opacity: 1; background: var(--surface-strong); border-color: var(--surface-strong); color: var(--text-muted); box-shadow: none; }
.pdp-cta-spin { display: none; flex: none; width: 1.1rem; height: 1.1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.pdp-cta.is-loading { cursor: progress; }
.pdp-cta.is-loading .pdp-cta-spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.pdp-perks { display: grid; gap: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.pdp-perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.pdp-perks li { padding-block: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.pdp-perk-ico { flex: none; box-sizing: content-box; padding: var(--space-1); border-radius: 50%; background: var(--surface-accent-soft); color: var(--text-link); }
.pdp-perks li > div { display: grid; gap: .125rem; min-width: 0; }
.pdp-perks strong { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.pdp-perks span { color: var(--text-muted); font-size: var(--fs-body-sm); }
.pdp-perks a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--text-link); font-weight: var(--fw-semibold); text-underline-offset: .2em; }

/* Precios por cantidad (venta por mayor, ProductoEscalas): tarjeta compacta. Solo datos de la API; el carrito aplica la
   escala solo. Tramo "precio regular" sin importe (el precio por unidad depende de la variante). */
.pdp-tiers { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.pdp-tiers-flag { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
                  background: var(--surface-accent-soft); color: var(--text-primary); font-size: var(--fs-body-sm); }
.pdp-tiers-flag svg { flex: none; margin-top: .1rem; color: var(--brand-accent-ink); }
.pdp-tiers-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; }
.pdp-tiers-title { caption-side: top; padding: 0 0 var(--space-2); text-align: left; color: var(--text-primary); font-size: var(--fs-caption); font-weight: var(--fw-bold);
                   letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.pdp-tiers-table thead th { padding: 0 0 var(--space-2); border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium); text-align: left; }
.pdp-tiers-table thead th:last-child, .pdp-tiers-table td { text-align: right; }
.pdp-tiers-table tbody th, .pdp-tiers-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.pdp-tiers-table tbody tr:last-child > * { padding-bottom: 0; border-bottom: 0; }
.pdp-tiers-table tbody th { color: var(--text-secondary); font-weight: var(--fw-medium); text-align: left; }
.pdp-tiers-table td { padding-left: var(--space-3); color: var(--text-primary); font-weight: var(--fw-bold); white-space: nowrap; }
.pdp-tiers-table td.is-regular { color: var(--text-muted); font-weight: var(--fw-regular); }
.pdp-tiers-unit { color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-regular); }
.pdp-tiers-note { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); line-height: var(--lh-snug); }

/* Descripcion y venta por curva (SSR, fuera del componente interactivo): paneles blancos bajo la columna de la galeria. */
.pdp-more { margin-top: var(--space-4); }
.pdp-desc, .pdp-curvas { padding: var(--space-5) var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.pdp-desc-title { margin: 0 0 var(--space-3); font-size: var(--fs-h3); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); }
.pdp-desc .prewrap { margin: 0; max-width: var(--maxw-text); color: var(--text-secondary); line-height: var(--lh-body); }

/* Venta por curva (ProductoCurvas, informativa): tarjetas por curva con talles x cantidad y, por color, precio de la curva
   completa + disponibilidad (texto + punto, no solo color). */
.pdp-curvas { display: grid; gap: var(--space-4); min-width: 0; }
.pdp-curvas-head { display: grid; gap: var(--space-1); }
.pdp-curvas-head .pdp-desc-title { margin: 0; }
.pdp-curvas-head p { margin: 0; color: var(--text-secondary); }
.pdp-curvas-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
                     border: 1px solid var(--info-border); border-radius: var(--radius-md); background: var(--info-soft); color: var(--text-primary); font-size: var(--fs-body-sm); }
.pdp-curvas-notice svg { margin-top: .1rem; color: var(--info); }
.pdp-curvas-notice p { margin: 0; }
.pdp-curvas-cta { grid-column: 2; justify-self: start; min-height: var(--control-height); padding-inline: var(--space-4); background: var(--surface-card); font-size: var(--fs-body-sm); }
.pdp-curvas-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
.pdp-curva { display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.pdp-curva-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.pdp-curva-name { margin: 0; font-size: var(--fs-card-title); font-weight: var(--fw-bold); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.pdp-curva-total { flex: none; padding: .125rem var(--space-2); border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--text-secondary);
                   font-size: var(--fs-caption); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.pdp-curva-desc { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); }
.pdp-curva-label { margin: 0; color: var(--text-primary); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.pdp-curva-talles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(var(--space-2) - var(--space-3)); }
.pdp-curva-talles li { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2rem; padding: 0 var(--space-3); border: 1px solid var(--border-subtle);
                       border-radius: var(--radius-pill); font-size: var(--fs-body-sm); }
.pdp-curva-talle { color: var(--text-primary); font-weight: var(--fw-semibold); }
.pdp-curva-qty { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pdp-curva-colors { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.pdp-curva-colors caption.pdp-curva-label { caption-side: top; padding: var(--space-1) 0 var(--space-2); text-align: left; }
.pdp-curva-colors tbody th, .pdp-curva-colors td { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); vertical-align: middle; }
.pdp-curva-colors tbody th { color: var(--text-primary); font-weight: var(--fw-medium); text-align: left; overflow-wrap: anywhere; }
.pdp-curva-colors .swatch { display: inline-block; width: .875rem; height: .875rem; margin-right: var(--space-2); vertical-align: -.1em; box-shadow: none; }
.pdp-curva-colors .pdp-curva-price { padding-left: var(--space-3); text-align: right; font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdp-curva-colors .pdp-curva-state { width: 1%; padding-left: var(--space-3); text-align: right; white-space: nowrap; }
.pdp-curva-state .pdp-stock { font-size: var(--fs-caption); }
.pdp-curva-colors tr.is-out th, .pdp-curva-colors tr.is-out .pdp-curva-price { color: var(--text-muted); }

@media (min-width: 40rem) {
    /* Ficha, venta por curva: aviso en una fila [icono | texto | Consultar por WhatsApp] */
    .pdp-curvas-notice { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .pdp-curvas-notice svg { margin-top: 0; }
    .pdp-curvas-cta { grid-column: auto; }
    .pdp-desc, .pdp-curvas { padding: var(--space-5); }
}
@media (max-width: 47.99rem) {
    /* Ficha en movil: barra de compra fija abajo (cantidad + CTA); el rotulo "Cantidad" queda solo para lectores de pantalla */
    .pdp-actions { position: sticky; bottom: 0; z-index: var(--z-sticky); margin-inline: calc(var(--gutter) * -1);
                   padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface-elevated);
                   box-shadow: 0 -1px 0 var(--border-subtle), 0 -8px 20px -12px color-mix(in srgb, var(--brand-text) 22%, transparent); }
    .add-form { grid-template-columns: 8.25rem minmax(0, 1fr); gap: var(--space-2); }
    .add-qty label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pdp-cta { padding-inline: var(--space-3); }
    .pdp-page .shelf { margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; box-shadow: none; }
    .pdp-more > :is(.pdp-desc, .pdp-curvas) { margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; box-shadow: none; }
}
@media (min-width: 48rem) {
    /* Ficha desde tableta: galeria en panel propio | columna de compra sticky sobre una unica superficie; resumen, opciones,
       CTA y beneficios se separan por ritmo/filetes en vez de acumular cajas. */
    .pdp { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; }
    .pdp-gallery { margin-inline: 0; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
    .pdp-frame { aspect-ratio: 4 / 5; max-height: 75svh; }
    .pdp-frame img { padding: var(--space-4); }
    .pdp-gallery-arrow { width: var(--control-height-lg); height: var(--control-height-lg); }
    .pdp-gallery-arrow.is-prev { left: var(--space-3); }
    .pdp-gallery-arrow.is-next { right: var(--space-3); }
    .pdp-count { right: var(--space-3); bottom: var(--space-3); }
    .pdp-info { position: sticky; top: var(--sticky-top); gap: var(--space-5); margin-inline: 0; padding: var(--space-5); background: var(--surface-card);
                border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
    .pdp-summary { gap: var(--space-4); padding: 0 0 var(--space-5); border-bottom: 1px solid var(--border-subtle); }
    .pdp-buyline { padding-bottom: 0; border-bottom: 0; }
    .pdp-buybox { display: grid; gap: var(--space-5); align-content: start; min-width: 0; padding: 0; background: transparent; }
    /* Dentro de la tarjeta, los precios por cantidad no son otra caja con borde: bloque tenue sin contorno. */
    .pdp-buybox .pdp-tiers { border-color: transparent; background: var(--surface-soft); }
    /* A 768px la tarjeta es angosta: cantidad y CTA se apilan para sostener targets y texto sin overflow. */
    .pdp-buybox .add-form { grid-template-columns: minmax(0, 1fr); }
    .pdp-buybox .pdp-qty-control { width: 8.25rem; }
    .pdp-buybox .pdp-cta { padding-inline: var(--space-4); }
}
@media (min-width: 60rem) {
    /* [miniaturas verticales | foto] · compra sticky. Las miniaturas no estiran la fila (height 0 + min-height: toman el alto
       de la foto y scrollean si son muchas). El marco se topa al alto util de la ventana (piso 24rem). */
    .pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
    .pdp-gallery.has-thumbs { grid-template-columns: 4rem minmax(0, 1fr); grid-template-areas: "thumbs stage"; column-gap: var(--space-4); }
    .pdp-thumb { width: 4rem; }
    .pdp-buybox .add-form { grid-template-columns: 8.25rem minmax(0, 1fr); }
    .pdp-frame { max-height: max(24rem, calc(100svh - var(--sticky-top) - var(--space-6) - 2 * var(--space-4))); }
    .pdp-frame img { padding: var(--space-5); }
    .pdp-count { display: none; }
    .pdp-thumbs { flex-direction: column; height: 0; min-height: calc(100% + 2 * var(--space-2)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
    .pdp-more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
}

/* 9. Carrito. Movil: lineas en panel blanco [foto | nombre, variante, c/u | quitar] + [cantidad ... subtotal], resumen al
      final y barra fija abajo con total + "Finalizar compra" (mismo patron que la barra de compra de la ficha). Tableta: lineas
      en una fila [foto | info | cantidad + subtotal | quitar]. Escritorio (60rem): lineas | tarjeta sticky (--sticky-top) con
      resumen, total y CTA; en 60-75rem la columna de lineas es angosta y vuelve al layout apilado.
      Importes y avisos siempre de la API. Quitar / Vaciar confirman con un popover (details), sin alert(). */
.cart-page h1, .checkout-page h1, .pedido-page h1 { margin-block: var(--space-2) var(--space-5); }
.cart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-block: var(--space-2) var(--space-4); }
.cart-page .cart-head h1 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); }
.cart-head-count { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.cart-layout { display: grid; gap: var(--space-4); align-items: start; }
.cart-main { display: grid; gap: var(--space-4); min-width: 0; }
.cart-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin: 0; }
.cart-notice p { flex: 1 1 18rem; margin: 0; }
.cart-notice .btn { min-height: var(--control-height); padding-inline: var(--space-4); font-size: var(--fs-body-sm); }

/* Linea */
.cart-lines { display: grid; padding-inline: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.cart-line { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-areas: "media info remove" "foot foot foot";
             column-gap: var(--space-4); row-gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--border-subtle); transition: opacity var(--t); }
.cart-line:last-child { border-bottom: 0; }
.cart-line.has-alerts { grid-template-areas: "media info remove" "media alerts alerts" "foot foot foot"; }
.cart-line.is-busy { opacity: .55; pointer-events: none; }
.cart-media { grid-area: media; align-self: start; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.cart-media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: scale .4s var(--ease); }
.cart-media .ph-mark { font-size: 1.5rem; }
.cart-line.is-off .cart-media { opacity: .5; }
.cart-info { grid-area: info; display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.cart-title { margin: 0; font-family: var(--brand-font-body); font-size: var(--fs-card-title); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: 0; overflow-wrap: anywhere; }
.cart-title a { text-decoration: none; }
.cart-title a:hover { text-decoration: underline; text-underline-offset: .2em; }
.cart-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-snug); }
.cart-meta-item { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.cart-meta .swatch { flex: none; width: .875rem; height: .875rem; box-shadow: none; }
.cart-meta-sep { color: var(--text-muted); }
.cart-unit { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; }
.cart-wholesale { display: inline-flex; align-items: center; margin-left: var(--space-2); padding: .15rem var(--space-2); border-radius: var(--radius-pill);
                  background: var(--surface-accent-soft); color: var(--text-link); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.cart-line.is-off .cart-title, .cart-line.is-off .cart-meta { color: var(--text-muted); }

/* Avisos de la linea: --danger (no suma al total) o --warning (precio cambiado, informativo) */
.cart-alerts { grid-area: alerts; display: grid; gap: var(--space-2); min-width: 0; }
.cart-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--danger-border); border-radius: var(--radius-md);
              background: var(--danger-soft); color: var(--text-primary); font-size: var(--fs-body-sm); line-height: var(--lh-snug); }
.cart-alert .ico { flex: none; margin-top: .1em; color: var(--danger); }
.cart-alert.is-warn { border-color: var(--warning-border); background: var(--warning-soft); }
.cart-alert.is-warn .ico { color: var(--warning); }

/* Cantidad (stepper del sistema de controles: 44px) + subtotal */
.cart-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); min-width: 0; }
.cart-qty { display: grid; gap: var(--space-2); justify-items: stretch; }
.qty { display: inline-grid; grid-template-columns: var(--control-height) 3rem var(--control-height); height: var(--control-height); margin: 0;
       border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--control-bg); transition: border-color var(--t), box-shadow var(--t); }
.qty:has(input:focus-visible) { border-color: var(--text-link); box-shadow: var(--focus-ring); }
.qty-btn { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer;
           transition: background-color var(--t), color var(--t); }
.qty-btn:first-of-type { border-radius: var(--control-radius) 0 0 var(--control-radius); }
.qty-btn:last-of-type { border-radius: 0 var(--control-radius) var(--control-radius) 0; }
.qty-btn:hover:not(:disabled) { background: var(--surface-hover); }
.qty-btn:focus-visible { outline: 3px solid var(--text-link); outline-offset: -3px; }
.qty-btn:disabled { color: var(--text-muted); opacity: .45; cursor: not-allowed; }
.qty input[type=number] { width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-inline: 1px solid var(--border-subtle); border-radius: 0; background: transparent;
                          text-align: center; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.qty input[type=number]:focus-visible { border-color: var(--border-subtle); box-shadow: none; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-set { margin: 0; }
.cart-qty .qty-apply { width: 100%; min-height: var(--control-height); padding: 0 var(--space-3); font-size: var(--fs-body-sm); }
.js .cart-qty:not(.is-dirty) .qty-set { display: none; }   /* con JS "Actualizar" aparece solo al escribir otra cantidad */
.cart-qty-fixed { display: inline-flex; align-items: center; min-height: var(--control-height); margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.cart-sub { display: grid; justify-items: end; margin: 0 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; line-height: var(--lh-snug); }
.cart-sub-label { color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.cart-sub-value { font-size: var(--fs-price); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.cart-sub-value.is-off { color: var(--text-muted); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.cart-remove { grid-area: remove; justify-self: end; align-self: start; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; }

/* Confirmacion en popover (details): Quitar linea y Vaciar carrito. Sin JS: el disparador vuelve a cerrarlo.
   Con JS (tienda.js): foco al boton de confirmar, Cancelar, Escape y clic fuera cierran. */
.cpop { position: relative; }
.cpop > summary { list-style: none; cursor: pointer; }
.cpop > summary::-webkit-details-marker { display: none; }
.cpop-x { color: var(--text-muted); }
.cpop-x:hover, .cpop[open] > .cpop-x { background: var(--surface-hover); color: var(--text-primary); }
.cpop-x:focus-visible { outline-offset: 0; }
.cpop-panel { position: absolute; z-index: calc(var(--z-sticky) + 1); top: calc(100% + var(--space-2)); right: 0; display: grid; gap: var(--space-3);
              width: min(18rem, calc(100vw - 2 * var(--gutter))); padding: var(--space-4); background: var(--surface-elevated); border: 1px solid var(--border-subtle);
              border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: rise .15s var(--ease); }
.cpop-panel p { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.cpop-panel strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.cpop-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }
.cpop-actions form { display: grid; margin: 0; }
.cpop-actions .btn { width: 100%; min-height: var(--control-height); padding-inline: var(--space-3); font-size: var(--fs-body-sm); }
html:not(.js) .cpop-cancel { display: none; }

/* Pie de la lista: seguir comprando | vaciar */
.cart-main-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.cart-continue { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); color: var(--text-link); font-size: var(--fs-body-sm);
                 font-weight: var(--fw-semibold); text-decoration: none; }
.cart-continue:hover { text-decoration: underline; text-underline-offset: .2em; }
.cart-clear-btn { display: inline-flex; align-items: center; min-height: var(--control-height); padding-inline: var(--space-2); border-radius: var(--control-radius);
                  color: var(--text-secondary); font-size: var(--fs-body-sm); text-decoration: underline; text-underline-offset: .2em; transition: color var(--t), background-color var(--t); }
.cart-clear-btn:hover, .cart-clear[open] > .cart-clear-btn { color: var(--danger); }

/* Resumen COMPARTIDO (carrito, checkout y seguimiento de pedido usan .cart-summary / .cart-totals / .cart-total): panel blanco. */
.cart-summary { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-subtle);
                border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.cart-summary h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.cart-summary > .btn { width: 100%; }
.cart-totals { display: grid; gap: var(--space-3); margin: 0; font-variant-numeric: tabular-nums; }
.cart-totals div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.cart-totals dt { color: var(--text-secondary); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); }
.cart-totals dd { margin: 0 0 0 auto; text-align: right; color: var(--text-primary); font-weight: var(--fw-semibold); }
.cart-totals dd.is-pending { max-width: 14rem; color: var(--text-muted); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); }
.cart-totals .cart-total { padding-top: var(--space-3); margin-top: var(--space-1); border-top: 1px solid var(--border-default); }
.cart-totals .cart-total dt { color: var(--text-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.cart-totals .cart-total dd { font-size: var(--fs-h3); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); }

/* Carrito: total + CTA. Movil y tableta: barra fija abajo; escritorio: al pie de la tarjeta sticky. */
.cart-checkout { display: grid; gap: var(--space-3); }
.cart-grand { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); margin: 0; font-variant-numeric: tabular-nums; }
.cart-grand dt { color: var(--text-primary); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.cart-grand dd { margin: 0; color: var(--text-primary); font-size: var(--fs-h3); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); overflow-wrap: anywhere; }
.cart-cta { width: 100%; min-height: var(--control-height-xl); padding-inline: var(--space-4); font-size: var(--fs-body); box-shadow: var(--shadow-sm); }
.cart-cta span[aria-hidden] { transition: translate var(--t); }
.cart-cta:hover span[aria-hidden] { translate: 3px 0; }
.cart-cta:disabled { opacity: 1; background: var(--surface-strong); border-color: var(--surface-strong); color: var(--text-muted); box-shadow: none; }
.cart-checkout-hint { grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-snug); }

@media (max-width: 59.99rem) {
    .cart-side { display: contents; }     /* resumen y barra pasan a ser hijos de la grilla: la barra queda sticky en todo el carrito */
    html:has(.cart-checkout) { scroll-padding-bottom: 7rem; }   /* el foco por teclado no queda tapado por la barra fija */
    .cart-checkout { position: sticky; bottom: 0; z-index: var(--z-sticky); grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-4);
                     margin-inline: calc(var(--gutter) * -1); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
                     background: var(--surface-elevated); box-shadow: 0 -1px 0 var(--border-subtle), 0 -8px 20px -12px color-mix(in srgb, var(--brand-text) 22%, transparent); }
    .cart-grand { display: grid; gap: 0; }
    .cart-grand dt { color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
    .cart-grand dd { font-size: var(--fs-price); }
}
@media (max-width: 39.99rem) {
    .cart-lines, .cart-page .cart-summary { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-radius: 0; border-inline: 0; box-shadow: none; }
}
/* Linea en una fila: tableta (columna unica ancha) y escritorio amplio (la columna de lineas supera ~45rem). */
@media (min-width: 48rem) and (max-width: 59.99rem), (min-width: 75rem) {
    .cart-line { grid-template-columns: 7rem minmax(0, 1fr) auto auto; grid-template-areas: "media info foot remove"; column-gap: var(--space-5); }
    .cart-line.has-alerts { grid-template-areas: "media info foot remove" "media alerts alerts alerts"; }
    .cart-foot { flex-wrap: nowrap; gap: var(--space-5); }
    .cart-sub { min-width: 7.5rem; }
    .cart-remove { margin: 0 calc(var(--space-2) * -1) 0 0; }
}
@media (min-width: 48rem) { .cart-lines { padding-inline: var(--space-5); } }
@media (min-width: 60rem) {
    .cart-layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-5); }
    .cart-side { position: sticky; top: var(--sticky-top); display: grid; gap: var(--space-5); padding: var(--space-5); background: var(--surface-card);
                 border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
    .cart-summary { position: sticky; top: var(--sticky-top); }                   /* checkout (columna lateral) */
    .cart-side .cart-summary { position: static; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }   /* carrito: lo pinta .cart-side */
    .cart-grand { padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
}

/* 9b. Checkout (capa 3). Un paso por vez (SSR, POST + antiforgery). Movil: resumen plegable arriba (.co-peek, total a la
       vista) | barra de progreso segmentada + "Paso N de 5" | tarjeta del paso | Continuar (56px) y Volver debajo.
       Tableta (40rem): progreso con circulos numerados y lineas; campos en grilla de 6 columnas (mitades / tercios).
       Escritorio (60rem): [progreso + tarjeta] | resumen sticky (--sticky-top) con miniaturas, totales de la API y nota
       de transferencia. Pago: solo los medios que informa la API (hoy Transferencia); sin datos bancarios aca: la API
       los entrega recien en el seguimiento del pedido. Reusa .cart-summary/.cart-totals (seccion 9) y .notice (10). */
.checkout-page .co-head h1 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); }
.co-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-block: var(--space-2) var(--space-4); }
.checkout-layout { display: grid; gap: var(--space-5); align-items: start; }
.co-main { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.co-main > .notice { margin: 0; }
.co-main .cart-notice a.btn { margin-left: 0; text-decoration: none; }     /* .notice a subraya y separa los enlaces de texto */
.checkout-form { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }

/* Progreso. Movil: 5 segmentos (hecho = acento; actual = mitad) + leyenda visible. Desde 40rem: circulos + etiquetas. */
.co-progress { display: grid; gap: var(--space-3); }
.co-progress-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.co-progress-count { color: var(--text-muted); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.co-progress-now { color: var(--text-primary); font-weight: var(--fw-bold); }
.co-progress-next { margin-left: auto; color: var(--text-muted); }
.co-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.co-step { position: relative; min-width: 0; height: .375rem; border-radius: var(--radius-pill); background: var(--border-default); }
.co-step.is-done { background: var(--brand-accent); }
.co-step.is-current { background: linear-gradient(90deg, var(--brand-accent) 50%, var(--border-default) 50%); }
.co-step-dot, .co-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tarjeta del paso */
.co-card { display: grid; gap: var(--space-5); min-width: 0; padding: var(--space-5) var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle);
           border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.co-card > fieldset { display: grid; gap: var(--space-4); }
.co-legend { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin: 0 0 var(--space-1); padding: 0; float: none; font-family: var(--brand-font-heading);
             font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); color: var(--text-primary); }
.co-legend h2 { margin: 0; font: inherit; letter-spacing: inherit; }
.co-legend .co-ico { flex: none; box-sizing: content-box; width: 1.25rem; height: 1.25rem; padding: .5rem; border-radius: 50%; background: var(--surface-accent-soft); color: var(--text-link); }
.co-card-desc { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.co-req-note { color: var(--text-muted); }
.checkout-page .req { color: var(--text-muted); font-weight: var(--fw-bold); }

/* Campos: sistema de controles (44px, --control-radius). Label arriba, error pegado al control, ayuda debajo. */
.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.co-grid > .form-field { grid-column: 1 / -1; }
.co-grid > .co-f-pair { grid-column: auto; }               /* movil: altura | piso en la misma fila */
.checkout-form .form-field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; margin: 0; }
.checkout-form .form-field label { font-size: var(--fs-label); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-primary); }
.checkout-form .form-field :is(input, select) { height: var(--control-height); min-height: var(--control-height); padding: 0 var(--control-padding-x);
                                                border-color: var(--control-border); border-radius: var(--control-radius); background-color: var(--control-bg); }
.checkout-form .form-field textarea { min-height: 6rem; padding: .625rem var(--control-padding-x); border-color: var(--control-border); border-radius: var(--control-radius); resize: vertical; }
.checkout-form .form-field :is(.hint, .field-error, .notice) { margin: 0; }
.checkout-form .form-field .hint { line-height: var(--lh-snug); }

/* Resumen de errores (enlaces a los campos, sin JS) */
.checkout-error-summary { margin: 0; }
.checkout-error-summary ul { display: grid; gap: var(--space-1); margin: 0; padding-left: 1.25rem; }
.checkout-error-summary a { display: inline; min-height: 0; margin-left: 0; color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.checkout-error-summary:focus { outline: 3px solid var(--danger); outline-offset: 2px; }

/* Pago: opcion = radio real + tarjeta (mismo criterio que .fopt: el radio se ve y lleva el foco) */
.co-pay-list { display: grid; gap: var(--space-3); }
.co-pay-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); min-height: 4.5rem; padding: var(--space-4);
              border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); cursor: pointer;
              transition: border-color var(--t), background-color var(--t), box-shadow var(--t); }
.co-pay-opt:hover { border-color: var(--text-secondary); }
.co-pay-opt:has(input:checked) { border-color: var(--brand-accent); background: var(--surface-accent-soft); box-shadow: inset 0 0 0 1px var(--brand-accent); }
.co-pay-opt:has(input:focus-visible) { outline: 3px solid var(--text-link); outline-offset: 2px; }
.co-pay-opt:has(input[aria-invalid=true]) { border-color: var(--danger); }
.co-pay-opt input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--brand-accent); }
.co-pay-opt input:focus-visible { box-shadow: none; }
.co-pay-text { display: grid; gap: var(--space-1); min-width: 0; }
.co-pay-name { color: var(--text-primary); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.co-pay-desc { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-snug); }
.co-pay-icon { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-md); background: var(--surface-soft); color: var(--text-link); }
.co-pay-opt:has(input:checked) .co-pay-icon { background: var(--surface-card); }
.co-howto { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-soft); }
.co-howto h3 { margin: 0; font-family: var(--brand-font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); letter-spacing: 0; line-height: var(--lh-snug); color: var(--text-primary); }
.co-howto ol { display: grid; gap: var(--space-3); }
.co-howto li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-snug); }
.co-howto-n { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--border-default); border-radius: 50%; background: var(--surface-card);
              color: var(--text-primary); font-size: var(--fs-caption); font-weight: var(--fw-bold); line-height: 1; }
.co-card-extra { padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }

/* Revision: filas [rotulo | datos | Editar]; en movil rotulo + Editar arriba y datos debajo */
.co-review { display: grid; margin: 0; border-top: 1px solid var(--border-subtle); }
.co-review-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t e" "d d"; gap: var(--space-1) var(--space-4); align-items: center;
                  padding-block: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.co-review-item dt { grid-area: t; color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.co-review-item dd { grid-area: d; display: grid; gap: .125rem; margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.co-review-item dd.co-review-edit { grid-area: e; display: block; }
.co-review-strong { color: var(--text-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.co-review-muted { color: var(--text-muted); }
.co-edit-btn { display: inline-flex; align-items: center; min-height: var(--control-height); margin-right: calc(var(--space-2) * -1); padding: 0 var(--space-2); border: 0; border-radius: var(--control-radius);
               background: none; color: var(--text-link); font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
               transition: background-color var(--t); }
.co-edit-btn:hover { background: var(--surface-hover); }
.co-edit-btn:focus-visible { outline: 3px solid var(--text-link); outline-offset: 0; }
.co-confirm { display: grid; gap: var(--space-2); }
.co-confirm .hint { margin: 0; }
.co-confirm-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-2);
                    padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-soft); font-variant-numeric: tabular-nums; }
.co-confirm-total dt { color: var(--text-primary); font-weight: var(--fw-bold); }
.co-confirm-total dd { margin: 0; color: var(--text-primary); font-size: var(--fs-h3); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); overflow-wrap: anywhere; }

/* Navegacion: Continuar/Confirmar primero en el DOM (accion por defecto de Enter); Volver como boton terciario */
.checkout-nav { display: flex; flex-direction: column; gap: var(--space-2); }
.checkout-nav .co-next { width: 100%; min-height: var(--control-height-xl); padding-inline: var(--space-5); font-size: var(--fs-body); box-shadow: var(--shadow-sm); }
.checkout-nav .co-next:disabled { opacity: 1; background: var(--surface-strong); border-color: var(--surface-strong); color: var(--text-muted); box-shadow: none; }
.co-back { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); align-self: center; min-height: var(--control-height); padding: 0 var(--space-3);
           border: 0; border-radius: var(--control-radius); background: none; color: var(--text-secondary); font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); cursor: pointer;
           transition: background-color var(--t), color var(--t); }
.co-back:hover { background: var(--surface-hover); color: var(--text-primary); }
.co-back:focus-visible { outline: 3px solid var(--text-link); outline-offset: 2px; }
.co-spin { display: none; flex: none; width: 1.1rem; height: 1.1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.co-confirm-btn.is-loading { cursor: progress; }
.co-confirm-btn.is-loading .co-spin { display: inline-block; }
.co-confirm-block { margin: 0; text-align: center; }

/* Resumen: desplegable movil (.co-peek) y columna lateral de escritorio (.co-summary = .cart-summary) */
.co-summary { display: none; }
.co-peek { margin: calc(var(--space-2) * -1) calc(var(--gutter) * -1) var(--space-4); border-block: 1px solid var(--border-subtle); background: var(--surface-card); }
.co-peek-bar { display: flex; align-items: center; gap: var(--space-3); min-height: 3.5rem; padding: var(--space-2) var(--gutter); list-style: none; cursor: pointer; }
.co-peek-bar::-webkit-details-marker { display: none; }
.co-peek-bar:focus-visible { outline: 3px solid var(--text-link); outline-offset: -3px; }
.co-peek-label { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text-link); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.co-peek-label .co-ico { flex: none; }
.co-peek-hide, .co-peek[open] .co-peek-show { display: none; }
.co-peek[open] .co-peek-hide { display: inline; }
.co-peek-total { margin-left: auto; color: var(--text-primary); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-peek-chev { flex: none; color: var(--text-muted); transition: transform var(--t); }
.co-peek[open] .co-peek-chev { transform: rotate(180deg); }
.co-peek-body { display: grid; gap: var(--space-4); padding: var(--space-2) var(--gutter) var(--space-5); }
.co-sum-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.co-sum-count { color: var(--text-muted); font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; }
.co-items { display: grid; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); }
.co-item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.co-item-media { position: relative; display: block; aspect-ratio: 4 / 5; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); }
.co-item-media img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.co-item-media .card-noimg { border-radius: inherit; }
.co-item-media .ph-mark { font-size: 1rem; }
.co-item-qty { position: absolute; top: -.375rem; right: -.375rem; display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .3rem; border-radius: var(--radius-pill);
               background: var(--surface-dark); color: var(--text-on-dark); font-size: var(--fs-caption); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums;
               box-shadow: 0 0 0 2px var(--surface-card); }
.co-item-info { display: grid; gap: .125rem; min-width: 0; }
.co-item-name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
                color: var(--text-primary); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.co-item-var { color: var(--text-muted); font-size: var(--fs-caption); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.co-item-price { color: var(--text-primary); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.co-sum-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--border-default);
               color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-snug); }
.co-sum-note .co-ico { flex: none; color: var(--text-link); }

@media (min-width: 40rem) {
    .co-progress-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .co-steps { gap: 0; }
    .co-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: auto; background: none; color: var(--text-muted); font-size: var(--fs-caption); text-align: center; }
    .co-step.is-done, .co-step.is-current { background: none; }
    .co-step:not(:first-child)::before { content: ""; position: absolute; top: calc(1rem - 1px); left: calc(-50% + 1.375rem); right: calc(50% + 1.375rem); height: 2px;
                                         border-radius: var(--radius-pill); background: var(--border-default); }
    .co-step.is-done::before, .co-step.is-current::before { background: var(--brand-accent); }
    .co-step-dot { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; overflow: visible; clip: auto; white-space: normal;
                   border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface-card); color: var(--text-muted); font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
                   font-variant-numeric: tabular-nums; line-height: 1; }
    .co-step-label { position: static; width: auto; height: auto; max-width: 100%; overflow: visible; clip: auto; white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-snug); }
    .co-step.is-done { color: var(--text-secondary); }
    .co-step.is-done .co-step-dot { border-color: var(--brand-accent); background: var(--surface-accent-soft); color: var(--text-link); }
    .co-step.is-current { color: var(--text-primary); font-weight: var(--fw-bold); }
    .co-step.is-current .co-step-dot { border-color: var(--brand-accent); background: var(--brand-accent); color: var(--text-on-accent); box-shadow: 0 0 0 4px var(--surface-accent-soft); }

    .co-card { padding: var(--space-5); }
    .co-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .co-grid > .co-f-half { grid-column: span 3; }
    .co-grid > .co-f-third { grid-column: span 2; }

    .co-review-item { grid-template-columns: 7rem minmax(0, 1fr) auto; grid-template-areas: "t d e"; align-items: start; padding-block: var(--space-4); }
    .co-review-item dt { padding-top: .2rem; }
    .co-edit-btn { margin-block: calc(var(--space-2) * -1); }

    .checkout-nav { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .checkout-nav .co-next { width: auto; min-width: 14rem; margin-left: auto; }
    .co-back { order: -1; margin-left: calc(var(--space-3) * -1); }
    .co-confirm-block { text-align: right; }
}
@media (min-width: 60rem) {
    .co-peek { display: none; }
    .checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); gap: var(--space-6); }
    .co-summary { display: grid; max-height: calc(100vh - var(--sticky-top) - var(--space-4)); overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 75rem) {
    .co-step { font-size: var(--fs-body-sm); }
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 26rem; }
}

/* 10. Avisos y estados (vacio / error / carga) */
/* Avisos: borde de 1px + filete izquierdo del estado + fondo -soft. Texto en --text-primary (legible sobre -soft);
   el error conserva el texto en --danger por compatibilidad con .alert-error. */
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); border-left-width: 4px; background: var(--surface-card);
          color: var(--text-primary); font-size: var(--fs-body-sm); line-height: var(--lh-body); margin-block: 0 var(--space-4); }
.notice p { margin: 0 0 var(--space-2); }
.notice p:last-child { margin-bottom: 0; }
.notice a { display: inline-flex; align-items: center; min-height: var(--control-height); margin-left: .5rem; font-weight: var(--fw-bold); text-decoration: underline; }
.notice-ok { border-color: var(--success-border); border-left-color: var(--success); background: var(--success-soft); }
.notice-warn { border-color: var(--warning-border); border-left-color: var(--warning); background: var(--warning-soft); }
.notice-error, .alert-error { border-color: var(--danger-border); border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
/* Estado vacio/error: bloque centrado con icono, titulo, explicacion y CTA. En la tienda es un panel blanco de ancho acotado
   (el panel admin lo redefine bajo .adm-main). */
.state { display: grid; justify-items: center; gap: var(--space-3); max-width: 34rem; margin-inline: auto; padding-block: var(--section); text-align: center; }
.state h1, .state h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-black); }
.state p { margin: 0; max-width: 42ch; color: var(--text-secondary); }
.state .btn { margin-top: var(--space-2); }
.state-icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--surface-accent-soft); color: var(--text-link); }
.state-error .state-icon { background: var(--danger-soft); color: var(--danger); }
.state-error h2, .state-error h1 { color: var(--danger); }
.state-code { font-family: var(--brand-font-heading); font-size: clamp(4rem, 16vw, 7rem); font-weight: var(--fw-black); letter-spacing: -.05em; line-height: 1; color: var(--surface-strong) !important; }
.public-main .state { width: 100%; margin-block: var(--space-4); padding: clamp(2.5rem, 7vw, 4rem) var(--space-5); background: var(--surface-card); border: 1px solid var(--border-subtle);
                      border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.public-main .state .btn { min-width: 12rem; }
.public-main .catalog-results .state { max-width: none; margin-block: 0; }
.loading .skeleton-card { display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.skeleton { display: block; background: linear-gradient(90deg, var(--surface-soft) 25%, var(--surface-strong) 37%, var(--surface-soft) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-xs); }
.skeleton-media { aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
.skeleton-line { height: .9rem; }
.skeleton-short { width: 55%; }
/* Variante en filas (LoadingState Lista=true): misma silueta que una linea del carrito, dentro del mismo panel blanco */
.skeleton-rows { display: grid; padding-inline: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.skeleton-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.skeleton-row:last-child { border-bottom: 0; }
.skeleton-row .skeleton-media { border-radius: var(--radius-md); }
.skeleton-row-text { display: grid; gap: var(--space-2); align-content: start; }
.skeleton-row .skeleton-line { width: min(100%, 18rem); }
.skeleton-row .skeleton-short { width: min(55%, 8rem); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* 11. Footer: columnas Marca (+ redes) | Comprar | Ayuda | Contacto, cada una solo con datos reales; pie con copyright y acceso
       admin. Superficie invertida --surface-dark con filete de acento. Movil: marca a lo ancho, Comprar | Ayuda, Contacto a lo ancho. */
.whatsapp-floating-button { position: fixed; z-index: calc(var(--z-sticky) + 10); right: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), env(safe-area-inset-bottom));
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding: 0; border: 1px solid color-mix(in srgb, #25d366 68%, #0b2b17); border-radius: 50%;
    background: #25d366; color: #0b2b17; box-shadow: 0 .5rem 1.5rem color-mix(in srgb, #0b2b17 24%, transparent); line-height: 1; text-decoration: none;
    transition: translate var(--t), box-shadow var(--t), filter var(--t); }
.whatsapp-floating-button:hover { color: #0b2b17; filter: brightness(.97); box-shadow: 0 .75rem 1.75rem color-mix(in srgb, #0b2b17 30%, transparent); translate: 0 -2px; }
.whatsapp-floating-button:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 4px; }
.whatsapp-floating-button svg { display: block; }
.whatsapp-floating-tooltip { position: absolute; right: calc(100% + var(--space-3)); top: 50%; width: max-content; max-width: min(22rem, calc(100vw - 6rem)); padding: .65rem .9rem;
    border-radius: var(--radius-md); background: var(--surface-dark); color: var(--text-on-dark); box-shadow: var(--shadow-2); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
    line-height: var(--lh-snug); opacity: 0; pointer-events: none; translate: .35rem -50%; transition: opacity var(--t), translate var(--t); }
@media (hover: hover) and (min-width: 48rem) {
    .whatsapp-floating-button:hover .whatsapp-floating-tooltip,
    .whatsapp-floating-button:focus-visible .whatsapp-floating-tooltip { opacity: 1; translate: 0 -50%; }
}
@media (hover: none), (max-width: 47.99rem) {
    .whatsapp-floating-tooltip { display: none; }
}
@media (max-width: 47.99rem) {
    .whatsapp-floating-button.avoid-bottom-ui { bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

.pdp-whatsapp-cta { width: 100%; gap: var(--space-2); }
.pdp-whatsapp-cta svg { flex: none; color: #128c4a; }

.site-footer { background: var(--surface-dark); color: var(--text-on-dark); border-top: 3px solid var(--brand-accent); }
.site-footer :focus-visible { outline-color: var(--text-on-dark); }
.footer-inner { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); padding-block: clamp(2.25rem, 6vw, 3.5rem) var(--space-5); }
.footer-brand, section.footer-col { grid-column: 1 / -1; }
.footer-name { margin: 0 0 var(--space-2); font-family: var(--brand-font-heading); font-size: var(--fs-h3); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); color: var(--text-on-dark); overflow-wrap: anywhere; }
.footer-slogan { margin: 0; max-width: 34ch; color: color-mix(in srgb, var(--text-on-dark) 80%, var(--surface-dark)); font-size: var(--fs-body-sm); }
.footer-title { margin: 0 0 var(--space-2); font-family: var(--brand-font-body); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
                color: color-mix(in srgb, var(--text-on-dark) 70%, var(--surface-dark)); }
.footer-links a, .footer-contact a { display: inline-flex; align-items: center; min-height: var(--control-height); color: color-mix(in srgb, var(--text-on-dark) 88%, var(--surface-dark));
                                     font-size: var(--fs-body-sm); text-decoration: none; overflow-wrap: anywhere; }
.footer-links a:hover, .footer-contact a:hover { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: .2em; }
.footer-contact li { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); min-width: 0; color: color-mix(in srgb, var(--text-on-dark) 88%, var(--surface-dark));
                     font-size: var(--fs-body-sm); overflow-wrap: anywhere; }
.footer-contact li > span { padding-block: var(--space-2); }
.footer-contact svg { flex: none; opacity: .7; }
.footer-contact li > a { min-width: 0; }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.footer-pill { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-4); border: 1px solid color-mix(in srgb, var(--text-on-dark) 30%, transparent);
               border-radius: var(--radius-pill); color: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: background-color var(--t), color var(--t); }
a.footer-pill:hover { background: var(--text-on-dark); color: var(--surface-dark); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); padding-block: var(--space-3) var(--space-4);
                 border-top: 1px solid color-mix(in srgb, var(--text-on-dark) 16%, transparent); color: color-mix(in srgb, var(--text-on-dark) 72%, var(--surface-dark)); font-size: var(--fs-body-sm); }
.copy { margin: 0; padding-block: var(--space-2); }
a.footer-admin { display: inline-flex; align-items: center; min-height: var(--control-height); color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .2em; }
a.footer-admin:hover { color: var(--text-on-dark); text-decoration-color: currentColor; }
@media (min-width: 48rem) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    section.footer-col { grid-column: auto; }
}
@media (min-width: 60rem) {
    .footer-grid { grid-template-columns: minmax(0, 1.4fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .footer-brand { grid-column: auto; padding-right: var(--space-5); }
}
@media (hover: hover) and (pointer: fine) {
    .footer-links a, .footer-contact a, .footer-contact li { min-height: 2.25rem; }
}

/* 12. Politicas, pedido y seguimiento (el seguimiento tiene ademas su CSS aislado: PedidoSeguimientoPage.razor.css) */
.politica { max-width: calc(var(--maxw-text) + 2 * var(--space-6)); padding: clamp(1.5rem, 5vw, 3rem); background: var(--surface-card); border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.politica h1 { margin: 0 0 var(--space-5); font-size: var(--fs-h2); font-weight: var(--fw-black); }
.politica p { margin-block: 0 var(--space-4); overflow-wrap: anywhere; line-height: 1.7; color: var(--text-secondary); }
.politica p:last-child { margin-bottom: 0; }
@media (max-width: 39.99rem) { .politica { margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; box-shadow: none; } }
/* Confirmacion (cierre del checkout): icono de exito en --success-soft + titulo + que sigue */
.pedido-ok { display: grid; justify-items: start; gap: var(--space-3); margin-block: var(--space-2) var(--space-5); }
.pedido-page .pedido-ok h1 { margin: 0; }
.pedido-ok p { margin: 0; max-width: 60ch; color: var(--text-secondary); font-size: var(--fs-lead); line-height: var(--lh-snug); }
.pedido-ok-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--success-border); border-radius: 50%; background: var(--success-soft); color: var(--success); }
.codigo-seguimiento { margin: var(--space-2) 0; }
.codigo-seguimiento code { display: block; padding: var(--space-3) var(--space-4); background: var(--surface-card); color: var(--text-primary); border: 1px dashed var(--border-strong);
                           border-radius: var(--control-radius); font-size: 1rem; overflow-wrap: anywhere; user-select: all; }
.pedido-historial { position: relative; margin: var(--space-4) 0; padding: 0 0 0 1.5rem; list-style: none; border-left: 2px solid var(--border-default); display: grid; gap: var(--space-4); }
.pedido-historial li { position: relative; display: grid; gap: .125rem; }
.pedido-historial li::before { content: ""; position: absolute; left: calc(-1.5rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong);
                               box-shadow: 0 0 0 3px var(--surface-card); }
.pedido-historial li:first-child::before { background: var(--brand-accent); }
.pedido-olvidar { margin-top: var(--space-5); }
.checkout-data { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); }
.checkout-data dt { font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--text-muted); }
.checkout-data dd { margin: 0; overflow-wrap: anywhere; }
.checkout-items { display: grid; gap: var(--space-2); margin: 0; font-variant-numeric: tabular-nums; }
.checkout-items li { display: flex; justify-content: space-between; gap: var(--space-4); }
@media (min-width: 40rem) { .checkout-data { grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); } }

/* 13. Puntero fino (hover real) y movimiento reducido. El zoom de la ficha sigue al puntero (tienda.js), solo en escritorio. */
@media (hover: hover) and (pointer: fine) {
    .card:hover { translate: 0 -2px; }
    .card:hover .card-media { border-color: var(--border-default); box-shadow: var(--shadow-md); }
    .card-link:hover .card-media img { scale: 1.04; }
    .card-link:hover .card-title { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
    .card-link:hover .card-cta { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--text-on-accent); }
    a.cart-media:hover img { scale: 1.04; }
}
/* Tactil: respuesta al toque en la tarjeta (en puntero fino ya existe el hover). */
@media (hover: none) {
    .card-link:active .card-media { border-color: var(--border-strong); }
    .card-link:active .card-media img { scale: .97; }
    .card-link:active .card-cta { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--text-on-accent); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 60rem) {
    .pdp-frame[data-zoom] { cursor: zoom-in; }
    .pdp-frame[data-zoom]:hover img { transform: scale(1.9); }
}
@media (prefers-reduced-motion: reduce) {
    .card, .card-media img, .card-cta, .tile-foto, .shelf-more span, .btn, .skip-link, .nav-list a::after, .nav-backdrop, .pdp-frame img, .filters-panel, .filters > summary,
    .sort-menu, .sort-chev, .fopt-box, .chip, .cpop-panel, .cart-media img, .cart-line, .qty-btn, .hero-arrow, .hero-pages a::before, .hero-pause, .rail-arrow, .pdp-thumb::after, .pdp-gallery-arrow {
        transition: none !important; animation: none !important; }
    .card:hover, .btn:active:not(:disabled) { translate: none; }
    .card-link:hover .card-media img, .tile--foto:hover .tile-foto, a.cart-media:hover img { scale: 1; }
    .shelf-more:hover span[aria-hidden], .cart-cta:hover span[aria-hidden] { translate: none; }
    .pdp-frame[data-zoom]:hover img { transform: none !important; }
    .hero-track, [data-rail-track] { scroll-behavior: auto; }
}

/* Pieza de página sin datos (API caída): conserva el lugar con un contenedor discreto. */
.section-off { margin-block: var(--space-4); }
.section-off-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface-card); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); color: var(--text-secondary); text-align: center; }
.section-off-body p { margin: 0; }
.section-off-ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface-accent-soft); color: var(--text-link); }
.section-off-retry { display: inline-flex; align-items: center; min-height: var(--control-height); font-weight: var(--fw-bold, 700); color: var(--text-link); text-decoration: underline; }