/*
 * Whydonna — hoja única de la tienda y del panel.
 *
 * Prefijo `wd-`. No usa `css/estilo.css` (la identidad bordo de Estilo
 * Madera), ni `gastro.css`, ni `dogma.css`: compartir hoja entre marcas
 * termina en un `!important` por pantalla. Y **no se escriben `style=""`
 * inline** en las plantillas, mismo criterio que el resto del proyecto.
 *
 * ── Los colores ──────────────────────────────────────────────────────
 *
 * Los tokens `--wd-*` de superficie, acento, texto y borde los escribe
 * `whydonna/apariencia.py` en un `<style>` del `<head>`, derivados de los
 * cuatro colores que eligió la tienda. Acá NO se define ninguno de esos:
 * si se definieran, el `:root` del head y este pelearían por especificidad
 * y ganaría el que esté más abajo, que no es el que la tienda eligió.
 *
 * ⚠️ **Nunca escribir un color de texto a mano sobre un fondo elegible.**
 * Sale de `--wd-sobre-primario` / `--wd-sobre-panel`. Un `color:` fijo sobre
 * el acento es el bug que desaparece la letra de un botón cuando alguien
 * cambia la paleta.
 *
 * ⚠️ **Toda regla de base sobre un `<a>` va en `:where()`.** `.wd a` pesa
 * (0,1,1) y le gana a `.wd-btn--primario` (0,1,0): sin eso, un
 * `<a class="wd-btn wd-btn--primario">` queda con la letra del color de su
 * propio fondo mientras que el mismo botón hecho con `<button>` se ve bien.
 *
 * ⚠️ **Los colores de estado NO los elige la tienda** y por eso están acá,
 * fijos: verde es correcto y rojo es error en los seis sitios del proyecto.
 * Con el rojo de una marca en `--wd-ok`, un aviso de error y uno de éxito se
 * verían igual.
 *
 * ── El responsive ────────────────────────────────────────────────────
 *
 * Esta hoja es **mobile-first**: las reglas base son las del celular y las
 * media queries agrandan. Es al revés que `gastro.css` y `dogma.css`, que
 * son de escritorio con colapsos — funcionan en celular pero no están
 * pensadas para el pulgar. Acá la mitad de las visitas van a ser desde un
 * teléfono, así que:
 *
 *   · Los botones y los targets tienen 44px de alto mínimo.
 *   · Hay barra inferior fija, con `env(safe-area-inset-bottom)` para que
 *     no quede debajo de la barra del iPhone.
 *   · Las tablas del panel se vuelven tarjetas en celular (con
 *     `data-etiqueta`), en vez de un scroll horizontal que nadie descubre.
 *   · Las solapas del panel scrollean en horizontal con scroll-snap, no se
 *     apilan en tres filas de botones.
 */

/* =====================================================================
   Tokens que NO dependen de la paleta
   ===================================================================== */

:root {
    /* Estados. Fijos a propósito — ver el encabezado. */
    --wd-ok: #1c7c48;
    --wd-ok-suave: rgba(28, 124, 72, .12);
    --wd-error: #c02b2b;
    --wd-error-suave: rgba(192, 43, 43, .12);
    --wd-espera: #a86a00;
    --wd-espera-suave: rgba(168, 106, 0, .12);
    --wd-info: #1f5f9e;
    --wd-info-suave: rgba(31, 95, 158, .12);

    /* Escala de espaciado */
    --wd-e1: 4px;
    --wd-e2: 8px;
    --wd-e3: 12px;
    --wd-e4: 16px;
    --wd-e5: 24px;
    --wd-e6: 32px;
    --wd-e7: 48px;

    /* Forma */
    --wd-r-sm: 6px;
    --wd-r: 12px;
    --wd-r-lg: 20px;
    --wd-r-full: 999px;

    --wd-sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .05);
    --wd-sombra-alta: 0 8px 32px rgba(0, 0, 0, .14);

    --wd-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wd-titular: "Playfair Display", Georgia, "Times New Roman", serif;

    /* Alto de la barra inferior, para el padding del cuerpo. */
    --wd-barra: 60px;

    --wd-transicion: .18s ease;
}

/* =====================================================================
   Base
   ===================================================================== */

.wd *,
.wd *::before,
.wd *::after { box-sizing: border-box; }

body.wd {
    margin: 0;
    font-family: var(--wd-fuente);
    font-size: 15px;
    line-height: 1.55;
    color: var(--wd-texto);
    background: var(--wd-fondo);
    -webkit-font-smoothing: antialiased;
    /* Evita el zoom raro de iOS al rotar. */
    -webkit-text-size-adjust: 100%;
}

.wd :where(a) {
    color: inherit;
    text-decoration: none;
}

.wd :where(a:hover) { color: var(--wd-primario); }

.wd img { max-width: 100%; display: block; }

.wd-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.wd-cuerpo {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--wd-e4) var(--wd-e4) var(--wd-e7);
    flex: 1;
}

.wd-cuerpo--angosto { max-width: 620px; }
.wd-cuerpo--medio { max-width: 900px; }
.wd-cuerpo--ancho { max-width: 1560px; }
.wd-cuerpo--pegado { padding-top: 0; }

/* Deja lugar para la barra inferior del celular. */
.wd-con-barra .wd-cuerpo {
    padding-bottom: calc(var(--wd-barra) + var(--wd-e6) + env(safe-area-inset-bottom));
}

/* =====================================================================
   Tipografía y utilidades
   ===================================================================== */

.wd-titulo {
    font-family: var(--wd-titular);
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 var(--wd-e3);
    font-weight: 600;
}

.wd-titulo--grande { font-size: 2rem; }

.wd-seccion-titulo {
    font-family: var(--wd-titular);
    font-size: 1.25rem;
    margin: 0 0 var(--wd-e4);
    letter-spacing: .02em;
}

.wd-subtitulo {
    font-size: .95rem;
    color: var(--wd-tenue);
    margin: 0 0 var(--wd-e4);
}

.wd-tenue { color: var(--wd-tenue); }
.wd-apagado { color: var(--wd-apagado); font-size: .85rem; }
.wd-chico { font-size: .85rem; }
.wd-fuerte { font-weight: 600; }
.wd-centro { text-align: center; }
.wd-der { text-align: right; }
.wd-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.wd-crece { flex: 1; }
.wd-nowrap { white-space: nowrap; }

.wd-fila {
    display: flex;
    gap: var(--wd-e2);
    align-items: center;
    flex-wrap: wrap;
}

.wd-fila--entre { justify-content: space-between; }
.wd-fila--fin { justify-content: flex-end; }
.wd-fila--centro { justify-content: center; }

.wd-mt-2 { margin-top: var(--wd-e2); }
.wd-mt-3 { margin-top: var(--wd-e3); }
.wd-mt-4 { margin-top: var(--wd-e4); }
.wd-mt-5 { margin-top: var(--wd-e5); }
.wd-mt-6 { margin-top: var(--wd-e6); }
.wd-mb-2 { margin-bottom: var(--wd-e2); }
.wd-mb-3 { margin-bottom: var(--wd-e3); }
.wd-mb-4 { margin-bottom: var(--wd-e4); }
.wd-mb-5 { margin-bottom: var(--wd-e5); }
.wd-mb-6 { margin-bottom: var(--wd-e6); }

.wd-oculto { display: none !important; }
.wd-separador {
    border: 0;
    border-top: 1px solid var(--wd-borde);
    margin: var(--wd-e5) 0;
}

/* Solo para lectores de pantalla. */
.wd-invisible {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =====================================================================
   Barra de anuncios
   ===================================================================== */

.wd-anuncio {
    background: var(--wd-primario);
    color: var(--wd-sobre-primario);
    text-align: center;
    padding: var(--wd-e2) var(--wd-e4);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}

.wd-anuncio :where(a) { color: inherit; text-decoration: underline; }

/* =====================================================================
   Cabecera
   ===================================================================== */

.wd-cabecera {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--wd-fondo);
    border-bottom: 1px solid var(--wd-borde);
}

.wd-cabecera__fila {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--wd-e3) var(--wd-e4);
    display: flex;
    align-items: center;
    gap: var(--wd-e3);
}

.wd-marca {
    font-family: var(--wd-titular);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wd-marca__logo { height: 30px; width: auto; }

.wd-cabecera__acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--wd-e1);
}

/* Botón de ícono. 44px: el mínimo cómodo para un dedo. */
.wd-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--wd-r-sm);
    font-size: 1.1rem;
    position: relative;
    transition: background var(--wd-transicion);
}

.wd-icono:hover { background: var(--wd-panel-hover); }

.wd-icono__globo {
    position: absolute;
    top: 4px; right: 2px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: var(--wd-r-full);
    background: var(--wd-primario);
    color: var(--wd-sobre-primario);
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navegación de escritorio: escondida en celular. */
.wd-nav { display: none; }

/* =====================================================================
   Menú desplegable del celular
   ===================================================================== */

.wd-menu {
    border-top: 1px solid var(--wd-borde);
    background: var(--wd-panel);
    padding: var(--wd-e2) var(--wd-e4) var(--wd-e4);
    max-height: 70dvh;
    overflow-y: auto;
}

.wd-menu__link {
    display: block;
    padding: var(--wd-e3) 0;
    border-bottom: 1px solid var(--wd-borde);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .85rem;
}

.wd-menu__sub {
    display: block;
    padding: var(--wd-e2) 0 var(--wd-e2) var(--wd-e4);
    font-size: .9rem;
    color: var(--wd-tenue);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    border: 0;
}

/* =====================================================================
   Buscador
   ===================================================================== */

.wd-buscador {
    display: flex;
    gap: var(--wd-e2);
    width: 100%;
    padding: 0 var(--wd-e4) var(--wd-e3);
    max-width: 1240px;
    margin: 0 auto;
}

.wd-buscador .wd-input { flex: 1; }

/* =====================================================================
   Barra inferior — solo celular
   ===================================================================== */

.wd-barra-inferior {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex;
    background: var(--wd-panel);
    border-top: 1px solid var(--wd-borde);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .07);
}

.wd-barra-inferior__item {
    flex: 1;
    min-height: var(--wd-barra);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: .65rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wd-apagado);
    position: relative;
    padding: var(--wd-e1);
}

.wd-barra-inferior__item--activo { color: var(--wd-primario); }

.wd-barra-inferior__icono { font-size: 1.15rem; line-height: 1; }

.wd-barra-inferior__globo {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 4px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: var(--wd-r-full);
    background: var(--wd-primario);
    color: var(--wd-sobre-primario);
    font-size: .62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================================
   Botones
   ===================================================================== */

.wd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wd-e2);
    /* 44px de alto: el mínimo cómodo para el pulgar. */
    min-height: 44px;
    padding: var(--wd-e2) var(--wd-e5);
    border: 1px solid var(--wd-borde-alto);
    border-radius: var(--wd-r-full);
    background: transparent;
    color: var(--wd-texto);
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    letter-spacing: .04em;
    cursor: pointer;
    text-align: center;
    transition: background var(--wd-transicion), border-color var(--wd-transicion),
                transform var(--wd-transicion), opacity var(--wd-transicion);
}

.wd-btn:hover { background: var(--wd-panel-hover); }
.wd-btn:active { transform: scale(.98); }

.wd-btn:disabled,
.wd-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* ⚠️ La letra sale de --wd-sobre-primario, jamás de un color fijo. */
.wd-btn--primario {
    background: var(--wd-primario);
    border-color: var(--wd-primario);
    color: var(--wd-sobre-primario);
}

.wd-btn--primario:hover {
    background: var(--wd-primario-claro);
    border-color: var(--wd-primario-claro);
    color: var(--wd-sobre-primario);
}

.wd-btn--secundario {
    background: var(--wd-secundario);
    border-color: var(--wd-secundario);
    color: var(--wd-sobre-secundario);
}

.wd-btn--suave {
    background: var(--wd-panel-alto);
    border-color: transparent;
}

.wd-btn--peligro { color: var(--wd-error); border-color: var(--wd-error); }
.wd-btn--peligro:hover { background: var(--wd-error-suave); color: var(--wd-error); }

.wd-btn--exito { color: var(--wd-ok); border-color: var(--wd-ok); }
.wd-btn--exito:hover { background: var(--wd-ok-suave); color: var(--wd-ok); }

.wd-btn--fantasma { border-color: transparent; }

.wd-btn--sm {
    min-height: 36px;
    padding: var(--wd-e1) var(--wd-e3);
    font-size: .78rem;
}

.wd-btn--bloque { width: 100%; }

.wd-btn--grande {
    min-height: 52px;
    font-size: .95rem;
    letter-spacing: .08em;
}

.wd-btn-grupo { display: flex; gap: var(--wd-e2); flex-wrap: wrap; }

/* =====================================================================
   Paneles, avisos, badges
   ===================================================================== */

.wd-panel {
    background: var(--wd-panel);
    border: 1px solid var(--wd-borde);
    border-radius: var(--wd-r);
    padding: var(--wd-e4);
    margin-bottom: var(--wd-e4);
}

.wd-panel--alto { background: var(--wd-panel-alto); }
.wd-panel--limpio { border: 0; background: transparent; padding: 0; }

.wd-panel__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wd-e3);
    margin-bottom: var(--wd-e3);
    flex-wrap: wrap;
}

.wd-panel__titulo {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
}

.wd-aviso {
    border-radius: var(--wd-r-sm);
    padding: var(--wd-e3) var(--wd-e4);
    margin-bottom: var(--wd-e3);
    border-left: 3px solid var(--wd-info);
    background: var(--wd-info-suave);
    font-size: .9rem;
}

.wd-aviso--ok { border-color: var(--wd-ok); background: var(--wd-ok-suave); }
.wd-aviso--error { border-color: var(--wd-error); background: var(--wd-error-suave); }
.wd-aviso--espera { border-color: var(--wd-espera); background: var(--wd-espera-suave); }

.wd-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wd-e1);
    padding: 3px var(--wd-e2);
    border-radius: var(--wd-r-sm);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--wd-panel-alto);
    color: var(--wd-tenue);
    white-space: nowrap;
}

.wd-badge--ok { background: var(--wd-ok-suave); color: var(--wd-ok); }
.wd-badge--error { background: var(--wd-error-suave); color: var(--wd-error); }
.wd-badge--espera { background: var(--wd-espera-suave); color: var(--wd-espera); }
.wd-badge--info { background: var(--wd-info-suave); color: var(--wd-info); }
.wd-badge--oferta {
    background: var(--wd-primario);
    color: var(--wd-sobre-primario);
}
.wd-badge--nuevo {
    background: var(--wd-secundario);
    color: var(--wd-sobre-secundario);
}

/* =====================================================================
   Formularios
   ===================================================================== */

.wd-form { display: grid; gap: var(--wd-e3); }

.wd-form--fila {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
}

.wd-campo { display: grid; gap: var(--wd-e1); min-width: 0; }

.wd-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wd-tenue);
}

.wd-input,
.wd-select,
.wd-textarea {
    width: 100%;
    /* ⚠️ 16px exactos: por debajo de eso, Safari en iPhone hace zoom al
       enfocar el campo y la pantalla queda corrida. Es la diferencia entre
       un checkout que se completa y uno que se abandona. */
    font-size: 16px;
    font-family: inherit;
    color: var(--wd-texto);
    background: var(--wd-hondo);
    border: 1px solid var(--wd-borde-alto);
    border-radius: var(--wd-r-sm);
    padding: var(--wd-e3);
    min-height: 46px;
}

.wd-textarea { min-height: 90px; resize: vertical; }

.wd-input:focus,
.wd-select:focus,
.wd-textarea:focus {
    outline: 2px solid var(--wd-primario);
    outline-offset: 1px;
    border-color: var(--wd-primario);
}

.wd-input--corto { max-width: 130px; }
.wd-input--color { padding: 2px; height: 46px; cursor: pointer; }

.wd-select--multi { min-height: 130px; }

.wd-ayuda { font-size: .78rem; color: var(--wd-apagado); }

.wd-error {
    font-size: .8rem;
    color: var(--wd-error);
    font-weight: 600;
}

.wd-error ul { margin: 0; padding-left: var(--wd-e4); }

.wd-check,
.wd-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--wd-e2);
    /* 44px de alto de target aunque la cajita mida 18. */
    min-height: 44px;
    padding: var(--wd-e2) 0;
    cursor: pointer;
    font-size: .92rem;
}

.wd-check__caja,
.wd-radio__caja {
    width: 20px; height: 20px;
    margin: 2px 0 0;
    accent-color: var(--wd-primario);
    flex: none;
    cursor: pointer;
}

/* Tarjeta seleccionable: la forma cómoda de elegir en un celular. */
.wd-opcion-caja {
    display: flex;
    gap: var(--wd-e3);
    align-items: flex-start;
    border: 1px solid var(--wd-borde-alto);
    border-radius: var(--wd-r);
    padding: var(--wd-e3);
    cursor: pointer;
    transition: border-color var(--wd-transicion), background var(--wd-transicion);
}

.wd-opcion-caja:has(input:checked) {
    border-color: var(--wd-primario);
    background: var(--wd-primario-velo);
}

/* =====================================================================
   Grilla de productos
   ===================================================================== */

.wd-grilla {
    display: grid;
    /* Dos columnas justas en un celular de 360px. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--wd-e3);
}

.wd-grilla--ancha { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.wd-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wd-tarjeta__foto {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--wd-r-sm);
    background: var(--wd-panel-alto);
}

.wd-tarjeta__foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.wd-tarjeta:hover .wd-tarjeta__foto img { transform: scale(1.04); }

.wd-tarjeta__vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--wd-apagado);
    font-size: 1.6rem;
}

.wd-tarjeta__etiquetas {
    position: absolute;
    top: var(--wd-e2);
    left: var(--wd-e2);
    display: flex;
    flex-direction: column;
    gap: var(--wd-e1);
    align-items: flex-start;
}

.wd-tarjeta__cuerpo { padding: var(--wd-e2) 0; }

.wd-tarjeta__nombre {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 2px;
}

.wd-tarjeta__detalle {
    font-size: .75rem;
    color: var(--wd-apagado);
    margin: 0 0 var(--wd-e1);
}

.wd-tarjeta--agotada .wd-tarjeta__foto img { opacity: .5; }

.wd-precio { display: flex; align-items: baseline; gap: var(--wd-e2); flex-wrap: wrap; }

.wd-precio__actual { font-weight: 700; font-size: .95rem; }

.wd-precio__lista {
    font-size: .8rem;
    color: var(--wd-apagado);
    text-decoration: line-through;
}

.wd-precio__off {
    font-size: .72rem;
    font-weight: 700;
    color: var(--wd-primario);
}

.wd-precio--grande .wd-precio__actual { font-size: 1.5rem; }
.wd-precio--grande .wd-precio__lista { font-size: 1rem; }

/* =====================================================================
   Portada
   ===================================================================== */

.wd-hero {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--wd-panel-alto);
}

.wd-hero img { width: 100%; height: 100%; object-fit: cover; }

.wd-hero__texto {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--wd-e5) var(--wd-e4);
    background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
    color: #fff;
}

.wd-hero__titulo {
    font-family: var(--wd-titular);
    font-size: 1.7rem;
    margin: 0 0 var(--wd-e2);
    line-height: 1.15;
}

.wd-hero__bajada { margin: 0 0 var(--wd-e3); font-size: .95rem; opacity: .92; }

/* La franja de colecciones: scroll horizontal con snap, como una app. */
.wd-carrusel {
    display: flex;
    gap: var(--wd-e3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--wd-e2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.wd-carrusel > * {
    flex: 0 0 62%;
    scroll-snap-align: start;
    max-width: 260px;
}

.wd-coleccion {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--wd-r);
    overflow: hidden;
    background: var(--wd-panel-alto);
}

.wd-coleccion img { width: 100%; height: 100%; object-fit: cover; }

.wd-coleccion__nombre {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--wd-e4) var(--wd-e3) var(--wd-e3);
    background: linear-gradient(to top, rgba(0, 0, 0, .68), transparent);
    color: #fff;
    font-family: var(--wd-titular);
    font-size: 1.05rem;
}

/* =====================================================================
   Ficha del producto
   ===================================================================== */

.wd-ficha { display: grid; gap: var(--wd-e5); }

.wd-galeria { display: grid; gap: var(--wd-e2); }

.wd-galeria__principal {
    aspect-ratio: 3 / 4;
    border-radius: var(--wd-r);
    overflow: hidden;
    background: var(--wd-panel-alto);
}

.wd-galeria__principal img { width: 100%; height: 100%; object-fit: cover; }

.wd-galeria__tiras {
    display: flex;
    gap: var(--wd-e2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--wd-e1);
}

.wd-galeria__mini {
    flex: 0 0 64px;
    aspect-ratio: 3 / 4;
    border-radius: var(--wd-r-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--wd-panel-alto);
    padding: 0;
    scroll-snap-align: start;
}

.wd-galeria__mini--activa { border-color: var(--wd-primario); }
.wd-galeria__mini img { width: 100%; height: 100%; object-fit: cover; }

/* Selector de talle y color */
.wd-opciones {
    display: flex;
    gap: var(--wd-e2);
    flex-wrap: wrap;
}

.wd-opcion {
    min-width: 46px;
    min-height: 46px;
    padding: var(--wd-e2) var(--wd-e3);
    border: 1px solid var(--wd-borde-alto);
    border-radius: var(--wd-r-sm);
    background: transparent;
    color: var(--wd-texto);
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wd-e2);
    transition: all var(--wd-transicion);
}

.wd-opcion:hover { border-color: var(--wd-primario); }

.wd-opcion--elegida {
    background: var(--wd-primario);
    border-color: var(--wd-primario);
    color: var(--wd-sobre-primario);
}

/* Agotado: tachado y apagado, pero clickeable — al tocarlo se ofrece el
   «avisame cuando vuelva», que es el motivo por el que no se esconde. */
.wd-opcion--sin-stock {
    opacity: .4;
    text-decoration: line-through;
}

.wd-opcion__punto {
    width: 18px; height: 18px;
    border-radius: var(--wd-r-full);
    border: 1px solid var(--wd-borde-alto);
    flex: none;
    background-size: cover;
    background-position: center;
}

.wd-guia-talles {
    border: 1px solid var(--wd-borde);
    border-radius: var(--wd-r-sm);
    padding: var(--wd-e3);
    font-size: .85rem;
}

.wd-guia-talles summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.wd-guia-talles summary::-webkit-details-marker { display: none; }

.wd-datos { display: grid; gap: var(--wd-e2); }

.wd-dato {
    display: flex;
    justify-content: space-between;
    gap: var(--wd-e3);
    padding: var(--wd-e2) 0;
    border-bottom: 1px solid var(--wd-borde);
    font-size: .88rem;
}

.wd-dato__label { color: var(--wd-tenue); }
.wd-dato__valor { font-weight: 600; text-align: right; }

/* Barra fija de compra en celular: el botón siempre a mano. */
.wd-comprar-fijo {
    position: sticky;
    bottom: calc(var(--wd-barra) + env(safe-area-inset-bottom));
    z-index: 20;
    background: var(--wd-fondo);
    border-top: 1px solid var(--wd-borde);
    padding: var(--wd-e3) 0;
    margin: 0 calc(-1 * var(--wd-e4));
    padding-left: var(--wd-e4);
    padding-right: var(--wd-e4);
}

/* =====================================================================
   Carrito y checkout
   ===================================================================== */

.wd-linea {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: var(--wd-e3);
    padding: var(--wd-e3) 0;
    border-bottom: 1px solid var(--wd-borde);
    align-items: start;
}

.wd-linea__foto {
    aspect-ratio: 3 / 4;
    border-radius: var(--wd-r-sm);
    overflow: hidden;
    background: var(--wd-panel-alto);
}

.wd-linea__foto img { width: 100%; height: 100%; object-fit: cover; }
.wd-linea__cuerpo { min-width: 0; }
.wd-linea__nombre { font-weight: 600; font-size: .9rem; margin: 0 0 2px; }

.wd-cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--wd-borde-alto);
    border-radius: var(--wd-r-full);
    overflow: hidden;
}

.wd-cantidad button {
    width: 40px; height: 40px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}

.wd-cantidad button:hover { background: var(--wd-panel-hover); }
.wd-cantidad__valor { min-width: 34px; text-align: center; font-weight: 600; }

.wd-resumen { display: grid; gap: var(--wd-e2); }

.wd-resumen__fila {
    display: flex;
    justify-content: space-between;
    gap: var(--wd-e3);
    font-size: .92rem;
}

.wd-resumen__fila--total {
    border-top: 1px solid var(--wd-borde-alto);
    padding-top: var(--wd-e3);
    margin-top: var(--wd-e2);
    font-size: 1.15rem;
    font-weight: 700;
}

.wd-resumen__fila--ahorro { color: var(--wd-ok); font-weight: 600; }

.wd-pasos {
    display: flex;
    gap: var(--wd-e2);
    margin-bottom: var(--wd-e5);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wd-apagado);
    flex-wrap: wrap;
}

.wd-pasos__paso--activo { color: var(--wd-primario); font-weight: 700; }

.wd-copiable {
    display: flex;
    align-items: center;
    gap: var(--wd-e2);
    background: var(--wd-hondo);
    border: 1px dashed var(--wd-borde-alto);
    border-radius: var(--wd-r-sm);
    padding: var(--wd-e2) var(--wd-e3);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9rem;
    word-break: break-all;
}

/* =====================================================================
   El panel
   ===================================================================== */

.wd-panel-shell { display: block; }

.wd-panel-nav {
    display: flex;
    gap: var(--wd-e1);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: var(--wd-e2) var(--wd-e4);
    border-bottom: 1px solid var(--wd-borde);
    background: var(--wd-panel);
    position: sticky;
    top: 0;
    z-index: 30;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.wd-panel-nav::-webkit-scrollbar { display: none; }

.wd-panel-nav__link {
    flex: none;
    scroll-snap-align: start;
    padding: var(--wd-e2) var(--wd-e3);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: var(--wd-e1);
    border-radius: var(--wd-r-full);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--wd-tenue);
}

.wd-panel-nav__link--activo {
    background: var(--wd-primario);
    color: var(--wd-sobre-primario);
}

.wd-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--wd-e3);
    margin-bottom: var(--wd-e5);
}

.wd-metrica {
    background: var(--wd-panel);
    border: 1px solid var(--wd-borde);
    border-radius: var(--wd-r);
    padding: var(--wd-e3);
}

.wd-metrica__valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-family: var(--wd-titular);
}

.wd-metrica__label {
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wd-apagado);
    margin-top: 2px;
}

.wd-metrica--alerta .wd-metrica__valor { color: var(--wd-error); }

/* ── Tablas ──────────────────────────────────────────────────────────
   En celular se vuelven tarjetas: cada `<td>` muestra su etiqueta desde
   `data-etiqueta`. Es mejor que el scroll horizontal, que nadie descubre
   y que en una tabla de pedidos esconde justo la columna del total. */

.wd-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }

.wd-tabla thead { display: none; }

.wd-tabla tbody tr {
    display: block;
    background: var(--wd-panel);
    border: 1px solid var(--wd-borde);
    border-radius: var(--wd-r);
    padding: var(--wd-e3);
    margin-bottom: var(--wd-e3);
}

.wd-tabla td {
    display: flex;
    justify-content: space-between;
    gap: var(--wd-e3);
    padding: var(--wd-e1) 0;
    border: 0;
    text-align: right;
}

.wd-tabla td::before {
    content: attr(data-etiqueta);
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--wd-apagado);
    font-weight: 700;
    text-align: left;
    flex: none;
}

/* Una celda sin etiqueta (la de acciones) ocupa la fila entera. */
.wd-tabla td[data-etiqueta=""]::before { content: none; }
.wd-tabla td[data-etiqueta=""] { justify-content: flex-end; padding-top: var(--wd-e2); }

.wd-vacio {
    text-align: center;
    color: var(--wd-apagado);
    padding: var(--wd-e6) var(--wd-e4);
}

/* Curva de talles: la grilla color × talle. Scroll horizontal a propósito
   —es una matriz, no una lista— dentro de su propia tarjeta. */
.wd-curva { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.wd-curva table { border-collapse: collapse; font-size: .82rem; min-width: 100%; }

.wd-curva th,
.wd-curva td {
    border: 1px solid var(--wd-borde);
    padding: var(--wd-e2);
    text-align: center;
    min-width: 52px;
    white-space: nowrap;
}

.wd-curva th { background: var(--wd-panel-alto); font-weight: 700; }
.wd-curva th:first-child { text-align: left; position: sticky; left: 0; z-index: 1; }
.wd-curva td:first-child {
    text-align: left;
    font-weight: 600;
    background: var(--wd-panel);
    position: sticky; left: 0; z-index: 1;
}

.wd-curva__celda--cero { color: var(--wd-error); font-weight: 700; }
.wd-curva__celda--bajo { color: var(--wd-espera); font-weight: 700; }
.wd-curva__celda--vacia { color: var(--wd-apagado); }

/* Solapas del panel de catálogos */
.wd-solapas {
    display: flex;
    gap: var(--wd-e1);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-bottom: var(--wd-e4);
    border-bottom: 1px solid var(--wd-borde);
    scrollbar-width: none;
}

.wd-solapas::-webkit-scrollbar { display: none; }

.wd-solapa {
    flex: none;
    scroll-snap-align: start;
    padding: var(--wd-e3);
    min-height: 44px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--wd-tenue);
    font: inherit;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
}

.wd-solapa--activa { color: var(--wd-primario); border-bottom-color: var(--wd-primario); }

/* ⚠️ Las secciones se esconden SOLO con `.wd-con-js` en el body. Al revés,
   un error de red dejaría el panel en blanco. Sin JavaScript se ven todas,
   una debajo de otra, y todo sigue funcionando. */
.wd-con-js .wd-hoja { display: none; }
.wd-con-js .wd-hoja--activa { display: block; }

/* ⚠️ El par que sostiene «la tienda vende sin JavaScript».
   `.wd-solo-con-js` arranca escondido y aparece cuando el script marcó el
   body; `.wd-solo-sin-js` al revés. Así el selector de talle por botones
   (que necesita JS) y el `<select>` de respaldo nunca se ven los dos, y si
   el script no carga queda el que funciona.
   Nota: un control con `display:none` SÍ viaja en el submit, así que el
   `<select>` escondido sigue siendo el campo que manda la variante. */
.wd-solo-con-js { display: none; }
.wd-con-js .wd-solo-con-js { display: block; }
.wd-con-js .wd-solo-sin-js { display: none; }

/* Muestras de tema en la pantalla de apariencia */
.wd-temas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--wd-e3);
}

.wd-tema {
    border: 2px solid var(--wd-borde);
    border-radius: var(--wd-r);
    padding: var(--wd-e3);
    cursor: pointer;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
}

.wd-tema--actual { border-color: var(--wd-primario); }

.wd-tema__muestras { display: flex; gap: var(--wd-e1); margin-bottom: var(--wd-e2); }

.wd-tema__muestra {
    width: 26px; height: 26px;
    border-radius: var(--wd-r-sm);
    border: 1px solid var(--wd-borde);
}

/* La vista previa NO escribe en :root: probar un tema claro dejaría la
   pantalla en blanco sobre blanco, con el botón de guardar adentro. */
.wd-vista-previa {
    border: 1px solid var(--wd-borde);
    border-radius: var(--wd-r);
    padding: var(--wd-e4);
    background: var(--wd-vp-fondo, var(--wd-fondo));
    color: var(--wd-vp-texto, var(--wd-texto));
}

.wd-mapa {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: var(--wd-r-sm);
    display: block;
}

/* =====================================================================
   Pie
   ===================================================================== */

.wd-pie {
    border-top: 1px solid var(--wd-borde);
    background: var(--wd-panel);
    padding: var(--wd-e6) var(--wd-e4);
    margin-top: auto;
}

.wd-pie__grilla {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--wd-e5);
}

.wd-pie__titulo {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 var(--wd-e3);
    color: var(--wd-tenue);
}

.wd-pie__link { display: block; padding: var(--wd-e1) 0; font-size: .9rem; }

.wd-pie__legal {
    max-width: 1240px;
    margin: var(--wd-e5) auto 0;
    padding-top: var(--wd-e4);
    border-top: 1px solid var(--wd-borde);
    font-size: .78rem;
    color: var(--wd-apagado);
    display: flex;
    justify-content: space-between;
    gap: var(--wd-e3);
    flex-wrap: wrap;
}

/* Botón flotante de WhatsApp */
.wd-whatsapp {
    position: fixed;
    right: var(--wd-e4);
    bottom: calc(var(--wd-barra) + var(--wd-e3) + env(safe-area-inset-bottom));
    z-index: 45;
    width: 50px; height: 50px;
    border-radius: var(--wd-r-full);
    background: #25d366;
    color: #06301a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: var(--wd-sombra-alta);
}

/* =====================================================================
   Escritorio
   ===================================================================== */

@media (min-width: 760px) {
    body.wd { font-size: 15.5px; }

    .wd-titulo { font-size: 2rem; }
    .wd-titulo--grande { font-size: 2.6rem; }

    /* En escritorio manda el menú de arriba: la barra inferior y el botón
       de hamburguesa son cosa del celular. */
    .wd-barra-inferior,
    .wd-icono--menu { display: none; }

    .wd-con-barra .wd-cuerpo { padding-bottom: var(--wd-e7); }

    .wd-whatsapp { bottom: var(--wd-e5); }

    .wd-nav {
        display: flex;
        align-items: center;
        gap: var(--wd-e4);
        margin-left: var(--wd-e5);
    }

    .wd-nav__link {
        font-size: .8rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: var(--wd-e2) 0;
        position: relative;
    }

    .wd-nav__link--activo { color: var(--wd-primario); }

    /* Submenú al pasar el mouse. En celular no existe: ahí está el drawer. */
    .wd-nav__item { position: relative; }

    .wd-nav__sub {
        position: absolute;
        top: 100%; left: 0;
        min-width: 190px;
        background: var(--wd-panel);
        border: 1px solid var(--wd-borde);
        border-radius: var(--wd-r-sm);
        box-shadow: var(--wd-sombra-alta);
        padding: var(--wd-e2);
        display: none;
        z-index: 50;
    }

    .wd-nav__item:hover .wd-nav__sub,
    .wd-nav__item:focus-within .wd-nav__sub { display: block; }

    .wd-nav__sub a { display: block; padding: var(--wd-e2) var(--wd-e3); font-size: .88rem; }
    .wd-nav__sub a:hover { background: var(--wd-panel-hover); border-radius: var(--wd-r-sm); }

    .wd-menu { display: none; }

    .wd-grilla { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--wd-e4); }

    .wd-hero { aspect-ratio: 21 / 9; }
    .wd-hero__titulo { font-size: 3rem; }
    .wd-hero__texto { padding: var(--wd-e7) var(--wd-e6); }

    .wd-carrusel > * { flex: 0 0 240px; }

    /* Ficha en dos columnas, con la información pegada al scroll. */
    .wd-ficha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--wd-e6); }
    .wd-ficha__datos { position: sticky; top: 90px; align-self: start; }

    .wd-galeria { grid-template-columns: 76px minmax(0, 1fr); gap: var(--wd-e3); }
    .wd-galeria__principal { grid-column: 2; grid-row: 1; }
    .wd-galeria__tiras {
        grid-column: 1; grid-row: 1;
        flex-direction: column;
        overflow-x: visible;
        overflow-y: auto;
        max-height: 100%;
    }

    .wd-comprar-fijo {
        position: static;
        border: 0;
        margin: 0;
        padding: 0;
    }

    .wd-linea { grid-template-columns: 96px 1fr auto; align-items: center; }

    /* El carrito y el checkout: contenido + resumen al costado. */
    .wd-dos-columnas {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--wd-e5);
        align-items: start;
    }

    .wd-lateral { position: sticky; top: 90px; }

    /* Tablas de verdad a partir de acá. */
    .wd-tabla thead { display: table-header-group; }

    .wd-tabla thead th {
        text-align: left;
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--wd-apagado);
        padding: var(--wd-e2) var(--wd-e3);
        border-bottom: 1px solid var(--wd-borde-alto);
        white-space: nowrap;
    }

    .wd-tabla tbody tr {
        display: table-row;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--wd-borde);
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

    .wd-tabla td {
        display: table-cell;
        text-align: left;
        padding: var(--wd-e3);
        vertical-align: middle;
    }

    .wd-tabla td::before { content: none; }
    .wd-tabla td[data-etiqueta=""] { text-align: right; }
    .wd-tabla .wd-der { text-align: right; }

    .wd-panel { padding: var(--wd-e5); }

    /* El panel pasa a barra lateral. */
    .wd-panel-shell {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: var(--wd-e5);
        max-width: 1560px;
        margin: 0 auto;
        padding: var(--wd-e5) var(--wd-e4);
    }

    .wd-panel-nav {
        flex-direction: column;
        overflow: visible;
        border: 0;
        border-right: 1px solid var(--wd-borde);
        background: transparent;
        padding: 0 var(--wd-e3) 0 0;
        top: 90px;
        align-self: start;
    }

    .wd-panel-nav__link { width: 100%; }
}

@media (min-width: 1100px) {
    .wd-grilla { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    .wd-hero { aspect-ratio: 24 / 9; }
}

/* Quien pidió menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .wd *,
    .wd *::before,
    .wd *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }

    .wd-tarjeta:hover .wd-tarjeta__foto img { transform: none; }
}

@media print {
    .wd-cabecera, .wd-barra-inferior, .wd-whatsapp,
    .wd-pie, .wd-panel-nav { display: none !important; }
}
