/* =====================================================================
   TIENDA PÚBLICA — Cositas PY  (index.html)
   Hoja autónoma: no depende de estilos.css para evitar choques con el
   sistema del panel. Reusa la paleta de marca.
   ===================================================================== */

:root {
    /* El magenta de marca se queda como fondo: hay controles con tinta oscura
       encima (enlace "saltar al contenido", botón de búsqueda) que lo necesitan.
       Para TEXTO sobre fondos claros está --t-primary-ink. */
    --t-primary: #ea0b80;
    --t-primary-dark: #b90762;
    --t-secondary: #f5459c;
    --t-accent: #f8c3d9;
    --t-ink: #1a0629;
    --t-muted: #7b6b79;
    --t-bg: #fff8fc;
    --t-surface: #fffdfd;
    --t-surface-2: #fff0f7;
    --t-border: #f0dce8;
    --t-success: #4f9e7b;
    --t-danger: #cf6a70;
    --t-shadow: 0 20px 55px rgba(60, 7, 42, 0.12);
    --t-shadow-sm: 0 8px 24px rgba(60, 7, 42, 0.09);
    --t-radius: 24px;
    --t-radius-sm: 15px;
    --t-header-h: 120px;
    --t-nav-bg: #1a0629;
    --t-footer-bg: #1a0629;
    --t-nav-accent: #1a0629;
    /* Magenta legible sobre fondos claros (AA): el de marca queda corto en
       chips y rótulos chicos. En oscuro vuelve al tono claro de marca. */
    --t-primary-ink: #b3085f;
    /* Puente para los componentes que vienen del panel: el centro de avisos
       (css/components/avisos-equipo.css) usa los tokens del panel y en la tienda
       no existen, así que la campanita quedaría transparente y sin contraste.
       Se aliasan al tema de acá: como las referencias se resuelven al usarse,
       estos alias siguen solos el claro y el oscuro. */
    --card-bg: var(--t-surface);
    --border-color: var(--t-border);
    --text-color: var(--t-ink);
    --text-muted: var(--t-muted);
    --hover-bg: var(--t-surface-2);
    --primary-color: var(--t-primary);
    --warn-ink: #8a5a00;
    color-scheme: light;
}

:root[data-theme="dark"] body.tienda,
body.tienda[data-theme="dark"] {
    --t-primary: #ff4fae;
    --t-primary-dark: #e0288e;
    --t-primary-ink: #ff7ab8;
    --t-secondary: #ff7ab8;
    --t-accent: #3d2638;
    --t-ink: #f7f4f8;
    --t-muted: #bbaec0;
    --t-bg: #120919;
    --t-surface: #1d1127;
    --t-surface-2: #281836;
    --t-border: #3c244e;
    --t-shadow: 0 20px 55px rgba(0, 0, 0, 0.5);
    --t-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.4);
    --t-nav-bg: #150722;
    --t-footer-bg: #12061f;
    /* Ámbar legible sobre superficie oscura (AA); en claro es #8a5a00. */
    --warn-ink: #f0c070;
    color-scheme: dark;
}

/* Recorrido real del pedido (línea de tiempo con fechas).
   Los datos vienen de `mi_pedido_historial`, que solo devuelve los pedidos del
   cliente que pregunta y sin las notas internas
   (ver sql/61_historial_pedidos_candidate.sql). */
.t-order__recorrido-caja {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.t-order__recorrido-btn {
    background: none;
    border: 1px solid var(--t-border);
    border-radius: 999px;
    color: var(--t-primary-ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    padding: 6px 14px;
    min-height: 34px;
}

.t-order__recorrido-btn:hover { background: var(--t-surface-2); }

.t-order__recorrido-btn:focus-visible {
    outline: 2px solid var(--t-primary-ink);
    outline-offset: 2px;
}

.t-order__recorrido {
    width: 100%;
    background: var(--t-surface-2);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    padding: 12px 14px;
}

.t-order__recorrido-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.t-order__recorrido-lista li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.88rem;
    color: var(--t-ink);
}

.t-order__recorrido-icono { flex: 0 0 auto; }

.t-order__recorrido-texto {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
}

.t-order__recorrido-fecha { color: var(--t-muted); font-size: 0.8rem; }

.t-order__recorrido-vacio {
    margin: 0;
    color: var(--t-muted);
    font-size: 0.85rem;
}

* { box-sizing: border-box; }

.t-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

body.tienda {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--t-ink);
    background: var(--t-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ----------------------------------------------------------- ICONOS SVG */
.icon-svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.t-icon-btn .icon-svg,
.t-tabbar .icon-svg,
.t-float .icon-svg {
    width: 20px;
    height: 20px;
}
.t-promo__icon.icon-svg {
    width: 22px;
    height: 22px;
}
.t-search__btn .icon-svg {
    width: 18px;
    height: 18px;
}
.t-dept-toggle__icon.icon-svg {
    width: 18px;
    height: 18px;
}
.t-nav__quick .icon-svg,
.t-nav__link .icon-svg {
    width: 18px;
    height: 18px;
}
.t-store-card__rows .icon-svg,
.t-store-card__map .icon-svg {
    width: 16px;
    height: 16px;
}
.t-pdp__perk .icon-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.t-pdp__noimg .icon-svg {
    width: 48px;
    height: 48px;
    opacity: 0.4;
}
.t-pays .icon-svg {
    width: 16px;
    height: 16px;
}
.t-float--top .icon-svg {
    width: 20px;
    height: 20px;
}
.t-float--wa .icon-svg {
    width: 26px;
    height: 26px;
}
.t-login-link__icon .icon-svg {
    width: 20px;
    height: 20px;
}
.t-burger .icon-svg {
    width: 24px;
    height: 24px;
}
.t-footer__col .icon-svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.ico {
    --ico-size: 20px;
    width: var(--ico-size);
    height: var(--ico-size);
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico--xs { --ico-size: 14px; }
.ico--sm { --ico-size: 16px; }
.ico--md { --ico-size: 20px; }
.ico--lg { --ico-size: 24px; }
.ico--xl { --ico-size: 32px; }

/* ---------------------------------------------------------------- LOGO */
.t-logo { display: inline-flex; align-items: center; gap: 10px; }
.t-logo__mark {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--t-nav-accent);
    color: #fff; font-weight: 800; font-size: 1.25rem;
    box-shadow: 0 6px 16px rgba(132, 89, 232, 0.4);
}
.t-logo__text { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.t-logo__text strong { color: var(--t-primary); }
body.tienda[data-theme="dark"] .t-logo__text strong { color: var(--t-secondary); }

/* -------------------------------------------------------------- HEADER */
.t-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-border);
    box-shadow: var(--t-shadow-sm);
}
.t-header__bar {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; gap: 20px;
    padding: 14px 20px;
}
.t-search {
    flex: 1; display: flex; align-items: center;
    background: var(--t-surface-2);
    border: 1.5px solid var(--t-border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.t-search:focus-within { border-color: var(--t-primary); box-shadow: 0 0 0 4px rgba(132,89,232,.15); }
.t-search__input {
    flex: 1; border: 0; background: transparent; outline: none;
    padding: 12px 18px; font-size: 0.98rem; color: var(--t-ink);
}
.t-search__btn {
    border: 0; background: var(--t-primary); color: #fff;
    padding: 0 26px; align-self: stretch; font-weight: 600;
    transition: background .15s;
}
.t-search__btn:hover { background: var(--t-primary-dark); }

.t-header__actions { display: flex; align-items: center; gap: 8px; }
.t-icon-btn {
    position: relative;
    border: 1px solid var(--t-border); background: var(--t-surface);
    color: var(--t-ink); width: 42px; height: 42px; border-radius: 12px;
    font-size: 1.05rem; display: grid; place-items: center;
    transition: background .15s, transform .1s;
}
.t-icon-btn:hover { background: var(--t-surface-2); }
.t-icon-btn:active { transform: scale(.94); }
.t-icon-btn--wish { color: var(--t-secondary); }
.t-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--t-secondary); color: #fff;
    font-size: 0.68rem; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 999px; display: grid; place-items: center; padding: 0 4px;
}
.t-badge[hidden] { display: none; }
.t-login-link { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 12px; transition: background .15s; }
.t-login-link[hidden] { display: none; }
.t-login-link:hover { background: var(--t-surface-2); }
.t-login-link__icon { font-size: 1.4rem; }
.t-login-link__labels { display: flex; flex-direction: column; line-height: 1.15; }
.t-login-link__labels small { font-size: 0.72rem; color: var(--t-muted); }
.t-login-link__labels strong { font-size: 0.9rem; }

.t-burger { display: none; border: 1px solid var(--t-border); background: var(--t-surface); border-radius: 10px; width: 44px; height: 42px; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.t-burger span { width: 20px; height: 2px; background: var(--t-ink); border-radius: 2px; }

/* ----------------------------------------------------------------- NAV */
.t-nav { background: var(--t-nav-accent); }
.t-nav__inner {
    max-width: 1280px; margin: 0 auto; position: relative;
    display: flex; align-items: center; gap: 6px; padding: 0 20px;
}
.t-dept-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    border: 0; background: rgba(0,0,0,.14); color: #fff; font-weight: 600;
    padding: 13px 20px; font-size: 0.95rem;
}
.t-dept-toggle__chev { transition: transform .2s; }
.t-dept-toggle[aria-expanded="true"] .t-dept-toggle__chev { transform: rotate(180deg); }
.t-nav__link { color: rgba(255,255,255,.92); padding: 13px 16px; font-size: 0.92rem; font-weight: 500; transition: background .15s; }
.t-nav__link:hover { background: rgba(255,255,255,.12); }
.t-nav__spacer { flex: 1; }
.t-nav__note { color: rgba(255,255,255,.85); font-size: 0.85rem; padding-right: 4px; }

/* panel departamentos */
.t-dept-panel {
    position: absolute; top: 100%; left: 20px; z-index: 45;
    width: 320px; max-height: 70vh; overflow-y: auto;
    background: var(--t-surface); border: 1px solid var(--t-border);
    border-radius: 0 0 var(--t-radius) var(--t-radius);
    box-shadow: var(--t-shadow); padding: 8px;
}
.t-dept-list { list-style: none; margin: 0; padding: 0; }
.t-dept-list li > button {
    width: 100%; text-align: left; border: 0; background: transparent;
    color: var(--t-ink); padding: 11px 14px; border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 0.94rem; transition: background .12s;
}
.t-dept-list li > button:hover { background: var(--t-surface-2); color: var(--t-primary); }
.t-dept-list .t-dept-count { font-size: 0.76rem; color: var(--t-muted); background: var(--t-surface-2); padding: 2px 8px; border-radius: 999px; }

.t-overlay { position: fixed; inset: 0; background: rgba(10,8,25,.45); z-index: 39; }

/* ---------------------------------------------------------------- MAIN */
.t-main { max-width: 1280px; margin: 0 auto; padding: 22px 20px 40px; }

/* ---------------------------------------------------------------- HERO */
.t-hero {
    position: relative; border-radius: var(--t-radius); overflow: hidden;
    box-shadow: var(--t-shadow); margin-bottom: 22px;
}
.t-hero__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.t-slide {
    min-width: 100%; min-height: 300px;
    display: flex; align-items: center;
    padding: 44px clamp(24px, 6vw, 80px);
    position: relative; overflow: hidden;
}
.t-slide__title { font-size: clamp(1.9rem, 4.5vw, 3.1rem); margin: 8px 0 12px; line-height: 1.05; font-weight: 800; }
.t-slide__title [data-hero-title-highlight] { color: #ffe066; }
.t-slide::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; background: rgba(255,255,255,.12); border-radius: 50%; }

.t-hero__dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 3; }
.t-hero__dots button { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: transparent; }
.t-hero__dots button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.5); transition: background .2s; }
.t-hero__dots button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.t-hero__dots button.is-active { width: 26px; }
.t-hero__dots button.is-active::before { background: rgba(255,255,255,.35); }
.t-hero__dots button.is-active::after { transform: scaleX(var(--hero-progress, 0)); }
.t-hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.85); color: #1c1830; font-size: 1.6rem; line-height: 1;
    display: grid; place-items: center; z-index: 3; box-shadow: var(--t-shadow-sm);
    opacity: 0; transition: opacity .2s;
}
.t-hero:hover .t-hero__arrow { opacity: 1; }
.t-hero__arrow--prev { left: 14px; }
.t-hero__arrow--next { right: 14px; }

/* ------------------------------------------------------- QUICK CATS */
.t-quickcats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px; margin-bottom: 26px;
}
.t-quickcat {
    background: var(--t-surface); border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm); padding: 16px 12px; text-align: center;
    transition: transform .12s, box-shadow .15s, border-color .15s; cursor: pointer;
}
.t-quickcat:hover { transform: translateY(-3px); box-shadow: var(--t-shadow-sm); border-color: var(--t-primary); }
.t-quickcat__emoji { font-size: 1.7rem; }
.t-quickcat__name { font-size: 0.85rem; font-weight: 600; margin-top: 8px; display: block; }
.t-quickcat__count { font-size: 0.72rem; color: var(--t-muted); }

/* --------------------------------------------------------------- STATE */
.t-state { background: var(--t-surface); border: 1px dashed var(--t-border); border-radius: var(--t-radius); padding: 30px; text-align: center; color: var(--t-muted); margin-bottom: 24px; }
.t-state strong { color: var(--t-ink); display: block; font-size: 1.1rem; margin-bottom: 6px; }

/* ----------------------------------------------------------------- ROW */
.t-row { margin-bottom: 30px; }
.t-row__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.t-row__title { font-size: 1.35rem; margin: 0; font-weight: 700; }
.t-carousel { position: relative; }
.t-carousel__track {
    display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
    padding: 4px 2px 12px; scrollbar-width: thin;
}
.t-carousel__track > .t-card { min-width: 210px; max-width: 210px; }
.t-carousel__nav {
    position: absolute; top: 42%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--t-border);
    background: var(--t-surface); color: var(--t-ink); font-size: 1.4rem; z-index: 2;
    box-shadow: var(--t-shadow-sm); display: grid; place-items: center;
}
.t-carousel__nav--prev { left: -8px; }
.t-carousel__nav--next { right: -8px; }

/* -------------------------------------------------------------- PROMOS */
.t-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 34px; }
.t-promo { border-radius: var(--t-radius); padding: 26px; color: #fff; min-height: 120px; display: flex; align-items: center; gap: 16px; box-shadow: var(--t-shadow-sm); }
.t-promo__icon { flex-shrink: 0; font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.t-promo h4 { margin: 0 0 6px; font-size: 1.15rem; }
.t-promo p { margin: 0; opacity: .92; font-size: 0.9rem; }
.t-promo--1 { background: linear-gradient(120deg, #8459e8, #715aff); }
.t-promo--2 { background: linear-gradient(120deg, #2fbf71, #1d9e8a); }
.t-promo--3 { background: linear-gradient(120deg, #ff72bb, #ff5d73); }

/* ------------------------------------------------------------- CATALOG */
.t-catalog__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.t-catalog__title { font-size: 1.5rem; margin: 0; font-weight: 700; }
.t-catalog__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.t-filter {
    border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-ink);
    padding: 8px 16px; border-radius: 999px; font-size: 0.86rem; font-weight: 500; transition: all .12s;
}
.t-filter:hover { border-color: var(--t-primary); color: var(--t-primary); }
.t-filter.is-active { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }

.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.t-grid__empty { text-align: center; color: var(--t-muted); padding: 40px; }

/* ---------------------------------------------------------------- CARD */
.t-card {
    background: var(--t-surface); border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm); overflow: hidden;
    display: flex; flex-direction: column; transition: transform .14s, box-shadow .16s, border-color .16s; cursor: pointer;
}
.t-card:hover { transform: translateY(-4px); box-shadow: var(--t-shadow); border-color: var(--t-primary); }
.t-card__media { position: relative; aspect-ratio: 1/1; background: var(--t-surface-2); display: grid; place-items: center; overflow: hidden; }
.t-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.t-card__noimg { font-size: 2.6rem; opacity: .5; }
.t-card__wish {
    position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.9); color: #c9ccdd; font-size: 1.05rem; display: grid; place-items: center;
    box-shadow: var(--t-shadow-sm); transition: color .12s, transform .1s;
}
.t-card__wish:hover { transform: scale(1.1); }
.t-card__wish.is-on { color: var(--t-secondary); }
.t-card__avail { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff; }
.t-card__avail:not(.t-card__avail--no) { display: none !important; }
.t-card__avail--no { background: #9aa0bd; }
.t-card__discount { position: static; font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: #fff; background: #e0384c; box-shadow: var(--t-shadow-sm); }
.t-card__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.t-chip { align-self: flex-start; font-size: 0.7rem; font-weight: 600; color: var(--t-primary); background: rgba(132,89,232,.1); padding: 2px 9px; border-radius: 999px; }
.t-card__name { font-size: 0.9rem; font-weight: 600; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.t-card__price { font-size: 1.15rem; font-weight: 800; color: var(--t-ink); margin-top: auto; }
.t-card__price small { font-size: 0.7rem; color: var(--t-muted); font-weight: 500; display: block; }
.t-card__price--oferta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.t-card__price--oferta s { font-size: 0.78rem; font-weight: 500; color: var(--t-muted); order: 1; }
.t-card__price--oferta strong { color: #e0384c; order: 0; }
.t-card__price--oferta small { width: 100%; order: 2; }
.t-card__price--none { font-size: 0.9rem; color: var(--t-muted); font-weight: 600; }

/* skeletons */
.t-card--skeleton { pointer-events: none; }
.t-card--skeleton .t-card__media,
.t-card--skeleton .sk { background: linear-gradient(90deg, var(--t-surface-2) 25%, var(--t-border) 37%, var(--t-surface-2) 63%); background-size: 400% 100%; animation: t-shimmer 1.3s infinite; }
.t-card--skeleton .sk { height: 12px; border-radius: 6px; margin: 8px 13px; }
.t-card--skeleton .sk--lg { height: 18px; width: 60%; }
@keyframes t-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --------------------------------------------------------------- BTN */
.t-btn { border: 1px solid transparent; border-radius: 999px; padding: 11px 22px; font-weight: 600; font-size: 0.92rem; transition: all .13s; }
.t-btn--primary { background: var(--t-primary); color: #fff; }
.t-btn--primary:hover { background: var(--t-primary-dark); }
.t-btn--ghost { background: transparent; border-color: var(--t-border); color: var(--t-ink); }
.t-btn--ghost:hover { border-color: var(--t-primary); color: var(--t-primary); }

/* -------------------------------------------------------------- FOOTER */
.t-footer { background: var(--t-surface); border-top: 1px solid var(--t-border); margin-top: 30px; }
.t-footer__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; padding: 40px 20px 26px; }
.t-footer__col h5 { font-size: 0.92rem; margin: 0 0 12px; }
.t-footer__col a { display: block; color: var(--t-muted); font-size: 0.88rem; padding: 4px 0; transition: color .12s; }
.t-footer__col a:hover { color: var(--t-primary); }
.t-footer__tag { color: var(--t-muted); font-size: 0.88rem; margin: 12px 0 0; }

/* ---------------------------------------------------- NEWSLETTER DEL PIE */
.t-footer__news { margin: 16px 0 0; }
.t-footer__news label { display: block; font-size: .74rem; color: rgba(255, 253, 249, .68); margin-bottom: 7px; }
.t-footer__news-row { display: flex; gap: 6px; flex-wrap: wrap; }
.t-footer__news input {
    /* Ancho completo y el botón abajo: en la columna angosta del pie, un input
       y un botón en la misma fila dejaban ~155px para el correo y el
       placeholder se cortaba por los dos lados ("ucorreo@ejemplo.co"). */
    flex: 1 1 100%; min-width: 0; padding: 9px 12px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06); color: #fffdf9; font-size: .8rem;
}
.t-footer__news input::placeholder { color: rgba(255, 253, 249, .45); }
.t-footer__news input:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 2px; }
.t-footer__news .t-btn { flex: 0 0 auto; }
.t-footer__news-msg { margin: 8px 0 0; font-size: .72rem; min-height: 1em; line-height: 1.4; }
.t-footer__news-msg.is-ok { color: #a7f3c9; }
.t-footer__news-msg.is-error { color: #ffb4c8; }

/* =====================================================================
   RESEÑAS DE CLIENTES EN LA FICHA
   ===================================================================== */
.t-resenas-pdp { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--t-border); }
.t-resenas-pdp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.t-resenas-pdp__head h3 { margin: 0; }
.t-resenas-pdp__summary { color: var(--t-muted); font-size: .84rem; }
.t-resenas-pdp__summary b { color: var(--t-ink); }
.t-resenas-pdp__list { display: grid; gap: 12px; margin: 14px 0 0; }
.t-resena-pdp {
    padding: 14px 16px; border: 1px solid var(--t-border); border-radius: 14px;
    background: var(--t-surface-2, var(--t-surface));
}
.t-resena-pdp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-resena-pdp__stars { color: #f3c86e; letter-spacing: 1px; font-size: .9rem; }
.t-resena-pdp__verificada {
    display: inline-block; margin: 6px 0 0;
    font-size: .68rem; font-weight: 700; color: var(--t-success);
}
.t-resena-pdp p { margin: 8px 0 0; font-size: .86rem; line-height: 1.55; }
.t-resena-pdp time { display: block; margin-top: 8px; color: var(--t-muted); font-size: .72rem; }
.t-resena-form {
    margin: 18px 0 0; padding: 16px; border: 1px solid var(--t-border);
    border-radius: 14px; background: var(--t-surface-2, var(--t-surface));
    display: grid; gap: 8px; max-width: 560px;
}
.t-resena-form h4 { margin: 0; }
.t-resena-form label { font-size: .78rem; color: var(--t-muted); }
.t-resena-form select,
.t-resena-form textarea {
    width: 100%; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--t-border); background: var(--t-surface);
    color: var(--t-ink); font: inherit; font-size: .86rem;
}
.t-resena-form textarea { resize: vertical; min-height: 90px; }
.t-resena-form__msg { margin: 0; font-size: .78rem; min-height: 1em; }
.t-resena-form__msg.is-ok { color: var(--t-success); }
.t-resena-form__msg.is-error { color: #d6336c; }
.t-resena-form .t-btn { justify-self: start; }
.t-resenas-pdp__guest { margin: 16px 0 0; color: var(--t-muted); font-size: .84rem; }

.t-pays { display: flex; flex-wrap: wrap; gap: 8px; }
.t-pays span { font-size: 0.76rem; background: var(--t-surface-2); border: 1px solid var(--t-border); padding: 5px 10px; border-radius: 8px; color: var(--t-muted); }
.t-footer__legal { border-top: 1px solid var(--t-border); text-align: center; padding: 18px; color: var(--t-muted); font-size: 0.82rem; }

/* --------------------------------------------------------------- MODAL */
/* Los modales (login, mis datos, T&C) se abren desde el carrito: van por
   encima de él (.t-cart-panel usa z-index 62). */
.t-modal { position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; padding: 20px; }
.t-modal[hidden] { display: none; }
.t-modal__backdrop { position: absolute; inset: 0; background: rgba(10,8,25,.55); backdrop-filter: blur(2px); }
.t-modal__card {
    position: relative; z-index: 2; width: min(760px, 100%); max-height: 90vh; overflow: auto;
    background: var(--t-surface); border-radius: var(--t-radius); box-shadow: var(--t-shadow);
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.t-modal__close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--t-surface-2); color: var(--t-ink); font-size: 1.4rem; }

/* ------------------------------------------------------- MODAL DE CUENTA */
.t-auth-modal .t-modal__card { grid-template-columns: 1fr; width: min(400px, 100%); }
.t-auth-modal__body { padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 14px; }
.t-auth-tabs { display: flex; gap: 6px; background: var(--t-surface-2); border-radius: 10px; padding: 4px; }
.t-auth-tab { flex: 1; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--t-muted); font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.t-auth-tab.is-active { background: var(--t-surface); color: var(--t-ink); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.t-auth-modal__body h4 { margin: 0; font-size: 1.3rem; }
.t-auth-modal__hint { margin: -8px 0 0; color: var(--t-muted); font-size: 0.85rem; }
.t-auth-field { display: flex; flex-direction: column; gap: 5px; }
.t-auth-field[hidden] { display: none; }
.t-auth-field label { font-size: 0.8rem; font-weight: 600; color: var(--t-muted); }
.t-auth-field input, .t-auth-field select, .t-auth-field textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--t-border); background: var(--t-bg); color: var(--t-ink); font-size: 0.92rem; font-family: inherit; }
.t-auth-field textarea { resize: vertical; min-height: 52px; line-height: 1.4; }
.t-auth-field .t-auth-hint { font-weight: 400; font-size: 0.72rem; opacity: 0.8; }
.t-auth-field__radio-label { font-size: 0.8rem; font-weight: 600; color: var(--t-muted); }
.t-profile-readonly input { background: var(--t-surface-2); color: var(--t-muted); cursor: default; }
.t-auth-field + .t-auth-field { margin-top: 10px; }
.t-auth-modal__error { color: #d64545; font-size: 0.82rem; margin: 4px 0 0; }
.t-auth-modal__success { color: var(--t-success); font-size: 0.82rem; margin: 4px 0 0; }
.t-auth-submit { display: block; width: 100%; margin-top: 6px; text-align: center; }
.t-auth-forgot { display: block; width: 100%; margin-top: 10px; text-align: center; }
#t-auth-form { display: flex; flex-direction: column; }

/* --------------------------------------------------------------- TOAST */
.t-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 80; background: var(--t-ink); color: var(--t-bg); padding: 12px 22px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; box-shadow: var(--t-shadow); animation: t-toast-in .25s; cursor: pointer; max-width: min(90vw, 420px); text-align: center; }
.t-toast:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 3px; }
@keyframes t-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
    .t-promos { grid-template-columns: 1fr; }
    .t-footer__grid { grid-template-columns: 1fr 1fr; }
    .t-modal__card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .t-header__bar { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
    .t-search { order: 3; width: 100%; flex-basis: 100%; }
    .t-login-link__labels { display: none; }
    .t-burger { display: flex; }
    .t-nav__inner { flex-wrap: wrap; }
    .t-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 340px; z-index: 50; transform: translateX(-100%); transition: transform .25s; overflow-y: auto; background: var(--t-surface); padding-top: 16px; }
    .t-nav.is-open { transform: translateX(0); }
    .t-nav__inner { flex-direction: column;
 /* En columna, wrap arma varias columnas y desborda: ver fix-flex */
 flex-wrap: nowrap; align-items: stretch; padding: 0; }
    .t-dept-toggle { background: var(--t-surface-2); color: var(--t-ink); justify-content: flex-start; }
    .t-nav__link { color: var(--t-ink); border-bottom: 1px solid var(--t-border); }
    .t-nav__link:hover { background: var(--t-surface-2); }
    .t-nav__spacer, .t-nav__note { display: none; }
    .t-dept-panel { position: static; width: auto; border: 0; box-shadow: none; border-radius: 0; max-height: none; }
    .t-main { padding: 16px 14px 34px; }
    .t-quickcats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); gap: 10px; }
    .t-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
    .t-slide { min-height: 220px; }
}
@media (min-width: 721px) {
    .t-nav__inner { flex-wrap: nowrap; }
}

/* respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .t-hero__track { transition: none; }
    .t-card, .t-quickcat { transition: none; }
    .t-card--skeleton .t-card__media, .t-card--skeleton .sk { animation: none; }
}

/* =====================================================================
   HOME REFRESH — editorial, cálida y enfocada en regalo
   ===================================================================== */
:root {
    --t-primary: #ea0b80;
    --t-primary-dark: #b90762;
    --t-secondary: #f5459c;
    --t-accent: #f8c3d9;
    --t-ink: #1a0629;
    --t-muted: #7b6b79;
    --t-bg: #fff8fc;
    --t-surface: #fffdfd;
    --t-surface-2: #fff0f7;
    --t-border: #f0dce8;
    --t-success: #4f9e7b;
    --t-danger: #cf6a70;
    --t-shadow: 0 20px 55px rgba(60, 7, 42, 0.12);
    --t-shadow-sm: 0 8px 24px rgba(60, 7, 42, 0.09);
    --t-radius: 24px;
    --t-radius-sm: 15px;
    --t-nav-accent: #1a0629;
    --t-primary-ink: #b3085f;
}

body.tienda {
    background:
        radial-gradient(circle at 94% 6%, rgba(245, 69, 156, .10), transparent 22rem),
        radial-gradient(circle at 4% 48%, rgba(234, 11, 128, .06), transparent 24rem),
        var(--t-bg);
    color: var(--t-ink);
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

body.tienda h1,
body.tienda h2,
body.tienda h3,
body.tienda h4 {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.035em;
}

.t-header {
    background: rgba(255, 253, 249, .92);
    border-bottom: 1px solid rgba(32, 37, 51, .08);
    box-shadow: 0 5px 22px rgba(43, 34, 38, .04);
    backdrop-filter: blur(16px);
}

.t-header__bar {
    max-width: 1320px;
    min-height: 78px;
    padding: 14px 28px;
    display: grid;
    grid-template-columns: auto minmax(150px, .52fr) minmax(280px, 1fr) auto;
    gap: 22px;
}

.t-logo { gap: 11px; }
.t-logo__mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #f8d6e1;
    box-shadow: 4px 4px 0 rgba(234, 11, 128, .22);
    font-family: Georgia, serif;
    font-size: 1.4rem;
}
.t-logo__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.t-logo__text { font-size: 1.36rem; letter-spacing: -.055em; }
.t-logo__text strong { color: var(--t-secondary); }
.t-header__occasion {
    align-self: center;
    color: var(--t-muted);
    font-size: .72rem;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.t-header__occasion span { color: var(--t-secondary); padding: 0 4px; }

.t-search {
    min-height: 44px;
    border: 1px solid var(--t-border);
    border-radius: 13px;
    background: var(--t-surface-2);
}
.t-search:focus-within { border-color: var(--t-primary); box-shadow: 0 0 0 4px rgba(101, 88, 201, .11); }
.t-search__input { padding: 12px 16px; font-family: inherit; font-size: .9rem; }
.t-search__btn {
    min-width: 92px;
    padding: 0 17px;
    background: var(--t-primary);
    font-size: .82rem;
    letter-spacing: .02em;
}
.t-search__btn:hover { background: var(--t-primary-dark); }
.t-search__btn > span:last-child { display: none; }

.t-header__actions { gap: 5px; }
.t-icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--t-ink);
    border-radius: 12px;
}
.t-icon-btn:hover { background: var(--t-surface-2); }
.t-icon-btn--wish { color: var(--t-secondary); font-size: 1.25rem; }
.t-login-link { padding: 7px 9px; border-radius: 12px; }
.t-login-link__icon { color: var(--t-primary); font-size: 1.25rem; }
.t-login-link__labels small { letter-spacing: .04em; text-transform: uppercase; font-size: .62rem; }
.t-login-link__labels strong { font-size: .8rem; }

.t-nav { background: var(--t-nav-bg); }
.t-nav__inner { max-width: 1320px; padding: 0 28px; gap: 2px; }
.t-dept-toggle {
    background: var(--t-secondary);
    padding: 13px 19px;
    font-size: .82rem;
    letter-spacing: .015em;
}
.t-dept-toggle:hover { background: #d96167; }
.t-nav__link { padding: 13px 17px; font-size: .79rem; letter-spacing: .02em; }
.t-nav__link:hover { background: rgba(255, 255, 255, .09); }
.t-nav__link--location { color: #f8c3d9; }
.t-nav__link--location span { padding-left: 4px; color: #fff; }
.t-nav__note { font-size: .72rem; letter-spacing: .04em; }

.t-main { max-width: 1320px; padding: 28px 28px 68px; }
.t-hero { border-radius: 30px; margin-bottom: 48px; box-shadow: 0 25px 70px rgba(43, 34, 38, .16); }
.t-slide { min-height: 500px; padding: 62px clamp(28px, 7vw, 96px); }
.t-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .22;
    mask-image: linear-gradient(90deg, #000, transparent 78%);
    pointer-events: none;
}
.t-slide::after { right: -130px; top: -160px; width: 520px; height: 520px; background: rgba(255,255,255,.08); }
.t-slide__title { margin: 17px 0 16px; font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: .93; letter-spacing: -.065em; }
.t-slide__title [data-hero-title-highlight] { color: #ffe1a1; }
.t-hero__arrow {
    opacity: .75;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    color: #271442;
    box-shadow: 0 4px 14px rgba(39, 20, 66, 0.15);
    transition: opacity .2s, transform .15s, background .15s;
}
.t-hero:hover .t-hero__arrow { opacity: 1; }
.t-hero__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }

.t-section-kicker {
    display: block;
    color: var(--t-secondary);
    font: 700 .66rem/1.2 "Trebuchet MS", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.t-intro { margin: 0 8px 32px; }
.t-intro h1 { max-width: 750px; margin: 11px 0 0; font-size: clamp(2.25rem, 4vw, 4rem); line-height: .97; }
.t-intro h1 em, .t-gift-banner h2 em { color: var(--t-primary); font-weight: 400; }

.t-quickcats { grid-template-columns: repeat(8, 1fr); gap: 12px; margin: 0 0 54px; }
.t-quickcat {
    min-height: 112px; padding: 16px 8px 14px;
    border: 1px solid var(--t-border); border-radius: 18px;
    background: var(--t-surface);
    box-shadow: 0 2px 10px rgba(39, 20, 66, 0.03);
    transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, border-color .2s ease;
    cursor: pointer;
}
.t-quickcat:hover {
    border-color: var(--t-primary);
    box-shadow: 0 8px 24px -4px rgba(234, 11, 128, 0.16);
    transform: translateY(-4px);
}
.t-quickcat__emoji {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin: 0 auto;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(234, 11, 128, 0.09) 0%, rgba(105, 41, 148, 0.09) 100%);
    color: var(--t-primary);
    font-size: 1.15rem;
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), background .2s ease, color .2s ease, box-shadow .2s ease;
}
.t-quickcat:hover .t-quickcat__emoji {
    transform: scale(1.08);
    background: linear-gradient(135deg, #ea0b80 0%, #d8006f 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(234, 11, 128, 0.32);
}
.t-quickcat__name { margin-top: 10px; font-size: .78rem; font-weight: 700; line-height: 1.25; color: var(--t-ink); }
.t-quickcat__count { display: block; margin-top: 4px; font-size: .65rem; color: var(--t-muted); font-weight: 500; }

.t-section-heading, .t-row__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.t-section-heading h2 { margin: 8px 0 0; font-size: clamp(1.8rem, 3vw, 2.65rem); }
.t-text-link { border: 0; background: transparent; color: var(--t-primary); padding: 5px 0; font: 700 .75rem "Trebuchet MS", sans-serif; cursor: pointer; }
.t-text-link span { color: var(--t-secondary); padding-left: 6px; font-size: 1rem; }
.t-collection-intro { margin: 0 0 70px; }
.t-collection-grid { display: grid; grid-template-columns: 1.05fr 1fr .95fr 1fr; gap: 13px; margin-top: 23px; }
.t-collection-card { position: relative; min-height: 224px; overflow: hidden; padding: 25px 23px; border: 0; border-radius: 19px; color: var(--t-ink); text-align: left; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.t-collection-card:hover { transform: translateY(-5px); box-shadow: var(--t-shadow); }
.t-collection-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -45px; bottom: -70px; border-radius: 50%; background: rgba(255,255,255,.35); }
.t-collection-card__eyebrow { display: block; position: relative; z-index: 1; margin-bottom: 18px; font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; opacity: .75; }
.t-collection-card strong { position: relative; z-index: 1; font: 700 clamp(1.4rem, 2.2vw, 2rem)/.96 Georgia, serif; letter-spacing: -.06em; }
.t-collection-card__arrow { position: absolute; right: 19px; top: 19px; z-index: 2; font-size: 1.3rem; }
.t-collection-card--plush { background: #f2c5c1; }
.t-collection-card--plush::before { content: "♡"; position: absolute; right: 10px; bottom: -29px; color: rgba(255,253,249,.65); font: 11rem/1 Georgia, serif; transform: rotate(-15deg); }
.t-collection-card--style { background: #e8d8f1; }
.t-collection-card--style::before { content: "✦"; position: absolute; right: 16px; bottom: -30px; color: rgba(234,11,128,.35); font: 10rem/1 Georgia, serif; }
.t-collection-card--play { background: #f3df9e; }
.t-collection-card--play::before { content: "✳"; position: absolute; right: 9px; bottom: -31px; color: rgba(255,253,249,.75); font: 10rem/1 Georgia, serif; }
.t-collection-card--intimate { background: #f4cfdf; }
.t-collection-card--intimate::before { content: "⌁"; position: absolute; right: 12px; bottom: -18px; color: rgba(255,253,249,.7); font: 11rem/1 Georgia, serif; transform: rotate(-20deg); }

.t-row { margin-bottom: 64px; }
.t-row__head { margin-bottom: 18px; }
.t-row__title { margin: 8px 0 0; font-size: clamp(1.75rem, 3vw, 2.4rem); }
.t-carousel__track { gap: 15px; padding: 5px 2px 16px; }
.t-carousel__track > .t-card { min-width: 222px; max-width: 222px; }
.t-carousel__nav { opacity: .9; border: 1px solid var(--t-border); }
.t-row--vistos {
    margin: clamp(48px, 6vw, 76px) 0;
    padding: 26px clamp(16px, 3vw, 28px);
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: 0 4px 20px -2px rgba(39, 20, 66, 0.03);
}

.t-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: clamp(48px, 6vw, 76px) 0; }
.t-promo { min-height: 161px; position: relative; align-items: flex-start; gap: 17px; padding: 24px 23px; border-radius: 18px; box-shadow: none; overflow: hidden; }
.t-promo::after { content: ""; position: absolute; right: -45px; bottom: -80px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.t-promo__icon { font-size: 2.3rem; margin-top: 2px; }
.t-promo__eyebrow { display: block; margin-bottom: 8px; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; opacity: .76; }
.t-promo h4 { margin: 0 0 8px; font-size: 1.23rem; letter-spacing: -.04em; }
.t-promo p { font-size: .75rem; line-height: 1.55; }
.t-promo--1 { background: var(--t-primary); }
.t-promo--2 { background: var(--t-nav-bg); }
.t-promo--3 { background: var(--t-secondary); }

.t-gift-banner {
    display: grid;
    grid-template-columns: 1fr .75fr;
    min-height: 330px;
    margin: clamp(56px, 7vw, 86px) 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    box-shadow: 0 4px 24px -2px rgba(39, 20, 66, 0.04);
}
.t-gift-banner__copy { padding: 48px clamp(28px, 5vw, 68px); }
.t-gift-banner h2 { margin: 12px 0 15px; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: .96; color: var(--t-ink); font-weight: 800; }
.t-gift-banner p { max-width: 400px; color: var(--t-muted); font-size: .92rem; line-height: 1.65; }
.t-btn--light { margin-top: 14px; background: var(--t-primary); color: #fffdf9; border: 0; border-radius: 10px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.t-btn--light:hover { background: var(--t-primary-dark); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(234, 11, 128, 0.35); }
.t-btn--light span + span { color: #fff; padding-left: 8px; }
.t-gift-banner__art { position: relative; display: grid; place-items: center; background: linear-gradient(135deg, rgba(234, 11, 128, 0.06) 0%, rgba(113, 90, 255, 0.07) 100%); overflow: hidden; }
.t-gift-banner__art::before { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.t-gift-banner__art img { position: relative; z-index: 1; width: min(290px, 78%); height: auto; object-fit: contain; filter: drop-shadow(0 14px 10px rgba(60,7,42,.12)); }
.t-gift-banner__art i { position: absolute; z-index: 2; right: 18%; top: 19%; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--t-secondary); color: #fff; text-align: center; font: 700 .7rem/1.15 "Trebuchet MS", sans-serif; text-transform: uppercase; letter-spacing: .1em; transform: rotate(12deg); box-shadow: 0 4px 14px rgba(113, 90, 255, 0.3); }
.t-gift-banner__art b { position: absolute; right: 17%; bottom: 16%; color: var(--t-primary); font: 4rem/1 Georgia, serif; }

.t-catalog {
    padding-top: 10px;
    margin-bottom: clamp(64px, 8vw, 96px);
    padding-bottom: clamp(36px, 5vw, 54px);
    border-bottom: 1px solid var(--t-border);
}
.t-catalog__head { align-items: end; margin-bottom: 21px; padding-top: 10px; border-top: 1px solid var(--t-border); }
.t-catalog__title { margin: 8px 0 0; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.t-filter { padding: 8px 13px; border-radius: 9px; background: transparent; font-size: .73rem; }
.t-filter.is-active { background: var(--t-primary); border-color: var(--t-primary); color: #ffffff; }
.t-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 17px; }
.t-card {
    border-radius: 16px;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    box-shadow: 0 2px 10px rgba(39, 20, 66, 0.03);
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .22s ease, border-color .22s ease;
}
.t-card:hover {
    border-color: rgba(234, 11, 128, 0.35);
    box-shadow: 0 12px 28px -4px rgba(39, 20, 66, 0.1);
    transform: translateY(-4px);
}
.t-card__media {
    background: #f8f4f1;
    position: relative;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}
.t-card__media img {
    padding: 10px;
    mix-blend-mode: multiply;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.t-card:hover .t-card__media img {
    transform: scale(1.06);
}
.t-card__wish { background: rgba(255,253,249,.94); color: #bdb7b3; }
.t-card__wish.is-on { color: var(--t-secondary); }
.t-card__avail { border-radius: 999px; font-size: .66rem; font-weight: 700; padding: 3px 8px; letter-spacing: .02em; }
.t-card__avail:not(.t-card__avail--no) { display: none !important; }
.t-card__avail--no { background: rgba(39, 20, 66, 0.82); color: #fff; backdrop-filter: blur(4px); }
.t-card__body { padding: 14px 14px 16px; gap: 7px; }
.t-chip { color: var(--t-primary); background: #eeeaf8; border-radius: 6px; padding: 3px 8px; font-size: .64rem; font-weight: 600; }
.t-card__name { font-size: .88rem; line-height: 1.35; font-weight: 600; }
.t-card__price { color: var(--t-ink); font: 800 1.08rem "Trebuchet MS", sans-serif; }
.t-card__price small { display: none; }

.t-footer { margin-top: clamp(64px, 8vw, 104px); background: var(--t-footer-bg); border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #fffdf9; }
.t-footer__grid { max-width: 1320px; grid-template-columns: 1.55fr 1fr 1fr 1fr; padding: 57px 28px 43px; }
.t-footer .t-logo__text { color: #fffdf9; }
.t-footer .t-logo__text strong { color: #f3c86e; }
.t-footer .t-logo__mark { background: #f8d6e1; box-shadow: 5px 6px 0 rgba(243,200,110,.35); }
.t-footer__tag { color: rgba(255,253,249,.63); line-height: 1.7; font-size: .8rem; }
.t-footer__col h5 { color: #f3c86e; font: 700 .75rem "Trebuchet MS", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.t-footer__col a { color: rgba(255,253,249,.68); font-size: .78rem; }
.t-footer__col a:hover { color: #fff; }
.t-pays span { color: rgba(255,253,249,.68); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); font-size: .68rem; }
.t-footer__legal { border-color: rgba(255,255,255,.12); color: rgba(255,253,249,.45); font-size: .7rem; }

.t-state { border-radius: 18px; background: var(--t-surface); }
.t-modal__card { border-radius: 20px; }

/* Dark mode block moved to end of file */

@media (max-width: 1080px) {
    .t-header__bar { grid-template-columns: auto minmax(220px, 1fr) auto; }
    .t-header__occasion { display: none; }
    .t-quickcats { grid-template-columns: repeat(4, 1fr); }
    .t-collection-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .t-main { padding: 20px 18px 50px; }
    .t-header__bar { padding: 12px 18px; }
    .t-nav__inner { padding: 0 18px; }
    .t-slide { min-height: 450px; padding-left: 50px; }
    .t-promos { grid-template-columns: 1fr; }
    .t-footer__grid { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 720px) {
    /* El blur del header crea un "containing block" para el #t-nav
       (position: fixed) que vive adentro: en vez de cubrir toda la
       pantalla como panel lateral, quedaba encajonado en la altura del
       header y se superponía con la búsqueda y los íconos. Se apaga
       el blur en este breakpoint (el fondo sigue siendo opaco) para
       que el panel vuelva a posicionarse respecto a la ventana. */
    .t-header { backdrop-filter: none; }

    /* El panel lateral se pensó como fondo claro + texto oscuro (ver el
       primer bloque @media 720 más arriba), pero una regla sin media query
       más abajo en este archivo (pensada para la barra de escritorio)
       vuelve a pintar el fondo oscuro sin tocar el color del texto, y el
       texto queda del mismo color que el fondo. Se reafirma acá, después
       de esa regla en la cascada, para que el panel sea legible en los
       dos temas (var(--t-surface)/var(--t-ink) ya invierten solos). */
    .t-nav { background: var(--t-surface); }
    .t-nav__link { color: var(--t-ink); }
    .t-nav__link:hover { background: var(--t-surface-2); }
    .t-nav__link--location { color: var(--t-primary); }
    .t-nav__link--location span { color: var(--t-ink); }

    .t-header__bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 11px 14px 13px; }
    .t-logo { margin-right: auto; }
    .t-search { order: 4; flex-basis: 100%; width: 100%; }
    .t-search__btn { min-width: 47px; padding: 0 13px; }
    .t-search__btn > span:first-child { display: none; }
    .t-search__btn > span:last-child { display: inline; font-size: 1.3rem; }
    .t-login-link { padding: 6px; }
    .t-nav__inner { padding: 0; }
    .t-main { padding: 14px 14px 42px; }
    .t-hero { border-radius: 21px; margin-bottom: 36px; }
    .t-slide { min-height: 430px; padding: 42px 29px; align-items: flex-start; }
    .t-slide__title { font-size: clamp(2.45rem, 12vw, 4rem); }
    .t-intro { display: block; margin: 0 3px 22px; }
    .t-intro h1 { font-size: 2.6rem; }
    .t-intro p { margin-top: 15px; font-size: .8rem; }
    .t-quickcats { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 47px; }
    .t-quickcat { min-height: 96px; padding: 12px 5px 9px; }
    .t-quickcat__emoji { width: 32px; height: 32px; font-size: 1rem; }
    .t-quickcat__name { font-size: .62rem; }
    .t-quickcat__count { font-size: .56rem; }
    .t-section-heading, .t-row__head { align-items: flex-start; }
    .t-section-heading h2 { font-size: 2rem; }
    .t-text-link { white-space: nowrap; }
    .t-collection-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .t-collection-card { min-height: 170px; padding: 18px 15px; }
    .t-collection-card__eyebrow { margin-bottom: 13px; font-size: .52rem; }
    .t-collection-card strong { font-size: 1.35rem; }
    .t-collection-card::before { font-size: 7rem; }
    .t-row { margin-bottom: 46px; }
    .t-row__title { font-size: 1.85rem; }
    .t-carousel__track > .t-card { min-width: 182px; max-width: 182px; }
    .t-promos { margin-bottom: 48px; }
    .t-promo { min-height: 132px; padding: 20px 18px; }
    .t-promo h4 { font-size: 1.1rem; }
    .t-gift-banner { display: block; min-height: 0; margin-bottom: 48px; }
    .t-gift-banner__copy { padding: 34px 25px 30px; }
    .t-gift-banner h2 { font-size: 3rem; }
    .t-gift-banner__art { min-height: 190px; }
    .t-gift-banner__art img { width: 65%; }
    .t-gift-banner__art i { top: 16%; right: 20%; width: 74px; height: 74px; font-size: .58rem; }
    .t-catalog__head { display: block; }
    .t-catalog__filters { margin-top: 17px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
    .t-filter { flex: 0 0 auto; }
    .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .t-card__body { padding: 11px 10px 13px; }
    .t-card__name { font-size: .78rem; }
    .t-card__price { font-size: .9rem; }
    .t-footer__grid { grid-template-columns: 1fr 1fr; gap: 29px 18px; padding: 42px 18px 28px; }
    .t-footer__col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
    .t-quickcat__name { font-size: .56rem; }
    .t-collection-card strong { font-size: 1.18rem; }
}

/* =====================================================================
   BRAND POLISH — el logo real guía la primera impresión
   ===================================================================== */
.t-header__bar { max-width: 1360px; }
.t-nav__inner { max-width: 1360px; }
.t-main { max-width: 1360px; }
.t-hero {
    border: 1px solid rgba(26, 6, 41, .07);
    box-shadow: 0 25px 70px rgba(60, 7, 42, .14);
}
.t-collection-card { box-shadow: inset 0 0 0 1px rgba(26,6,41,.04); }
.t-collection-card__arrow { color: var(--t-primary); }
.t-gift-banner__art img { position: relative; }

/* =====================================================================
   DARK MODE MASTER SYSTEM — Cositas PY (index.html)
   Sobrescribe de forma limpia, elegante y de alto contraste
   ===================================================================== */
body.tienda[data-theme="dark"] {
    background:
        radial-gradient(circle at 94% 6%, rgba(255, 79, 174, .12), transparent 22rem),
        radial-gradient(circle at 4% 48%, rgba(243, 200, 110, .07), transparent 24rem),
        var(--t-bg) !important;
    color: var(--t-ink) !important;
}

body.tienda[data-theme="dark"] .t-header {
    background: rgba(29, 17, 39, .95) !important;
    border-bottom: 1px solid var(--t-border) !important;
    box-shadow: 0 5px 22px rgba(0, 0, 0, .4) !important;
}
body.tienda[data-theme="dark"] .t-logo__text { color: var(--t-ink); }
body.tienda[data-theme="dark"] .t-logo__text strong { color: #f3c86e; }
body.tienda[data-theme="dark"] .t-header__occasion { color: var(--t-muted); }

body.tienda[data-theme="dark"] .t-search {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-search__input {
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-search__input::placeholder {
    color: var(--t-muted) !important;
    opacity: .75;
}
body.tienda[data-theme="dark"] .t-icon-btn {
    background: var(--t-surface) !important;
    color: var(--t-ink) !important;
    border: 1px solid var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-icon-btn:hover {
    background: var(--t-surface-2) !important;
}
body.tienda[data-theme="dark"] .t-login-link { color: var(--t-ink); }
body.tienda[data-theme="dark"] .t-login-link:hover { background: var(--t-surface-2); }
body.tienda[data-theme="dark"] .t-login-link__labels small { color: var(--t-muted); }
body.tienda[data-theme="dark"] .t-burger {
    background: var(--t-surface);
    border-color: var(--t-border);
}
body.tienda[data-theme="dark"] .t-burger span { background: var(--t-ink); }

/* Navegación */
body.tienda[data-theme="dark"] .t-nav {
    background: var(--t-nav-bg) !important;
    border-bottom: 1px solid var(--t-border);
}
body.tienda[data-theme="dark"] .t-dept-toggle {
    background: var(--t-primary);
    color: #ffffff;
}
body.tienda[data-theme="dark"] .t-dept-panel {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
}
body.tienda[data-theme="dark"] .t-dept-list li > button {
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-dept-list li > button:hover {
    background: var(--t-surface-2) !important;
    color: var(--t-primary) !important;
}
body.tienda[data-theme="dark"] .t-dept-list .t-dept-count {
    background: var(--t-surface-2);
    color: var(--t-muted);
}
@media (max-width: 720px) {
    body.tienda[data-theme="dark"] .t-nav {
        background: var(--t-surface) !important;
    }
    body.tienda[data-theme="dark"] .t-nav__link {
        color: var(--t-ink) !important;
        border-bottom-color: var(--t-border) !important;
    }
}

/* Hero Carousel */
body.tienda[data-theme="dark"] .t-hero {
    border: 1px solid var(--t-border) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .5) !important;
}

/* Garantiza contraste AA en todas las acciones con fondo de acento. */
body.tienda :is(.t-skip, .t-search__btn, .t-dept-toggle, .t-badge, .t-filter.is-active, .t-vista__b.is-activa, .t-pag__n.is-actual, .t-btn--primary, .t-btn--light, .t-btn--buy, .t-btn--checkout, .t-btn--whatsapp, .t-slide__cta, .t-card__add, .t-card__buy, .t-store-card__map) {
    color: #100516 !important;
}
body.tienda #t-nav-map { color: #100516 !important; }
body.tienda[data-theme="dark"] #t-nav-map { color: #ffd7e9 !important; }
body.tienda :is(.t-slide__cta, .t-btn--primary, .t-btn--light) :is(span, strong, small) {
    color: inherit !important;
}

body.tienda[data-theme="dark"] .t-hero__arrow {
    background: var(--t-surface) !important;
    color: var(--t-ink) !important;
    border: 1px solid var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-hero__dots button::before { background: rgba(255, 255, 255, .3) !important; }
body.tienda[data-theme="dark"] .t-hero__dots button.is-active::before { background: rgba(255, 255, 255, .25) !important; }
body.tienda[data-theme="dark"] .t-hero__dots button::after { background: var(--t-primary) !important; }

/* Intro & Section Titles */
body.tienda[data-theme="dark"] .t-section-kicker { color: var(--t-primary) !important; }
body.tienda[data-theme="dark"] .t-intro h1 { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-intro h1 em { color: #f3c86e !important; }
body.tienda[data-theme="dark"] .t-intro p { color: var(--t-muted) !important; }

/* Quickcats */
body.tienda[data-theme="dark"] .t-quickcat {
    background: var(--t-surface) !important;
    border-color: var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-quickcat:hover {
    border-color: var(--t-primary) !important;
}
body.tienda[data-theme="dark"] .t-quickcat__emoji {
    background: rgba(255, 79, 174, 0.12) !important;
    color: #ff4fae !important;
}
body.tienda[data-theme="dark"] .t-quickcat:hover .t-quickcat__emoji {
    background: linear-gradient(135deg, #ff4fae 0%, #ea0b80 100%) !important;
    color: #ffffff !important;
}
body.tienda[data-theme="dark"] .t-quickcat__name { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-quickcat__count { color: var(--t-muted) !important; }

/* Colecciones */
body.tienda[data-theme="dark"] .t-collection-card--plush { background: #321626 !important; color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-collection-card--style { background: #221a36 !important; color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-collection-card--play { background: #2b2512 !important; color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-collection-card--intimate { background: #34172a !important; color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-collection-card strong { color: #ffffff !important; }
body.tienda[data-theme="dark"] .t-collection-card__eyebrow { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-collection-card__arrow { color: var(--t-primary) !important; }

/* Filas & Carruseles & Tarjetas */
body.tienda[data-theme="dark"] .t-section-heading h2,
body.tienda[data-theme="dark"] .t-row__title { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-carousel__nav {
    background: var(--t-surface) !important;
    color: var(--t-ink) !important;
    border-color: var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-card {
    background: var(--t-surface) !important;
    border-color: var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-card:hover {
    border-color: var(--t-primary) !important;
}
body.tienda[data-theme="dark"] .t-card__media {
    background: var(--t-surface-2) !important;
}
body.tienda[data-theme="dark"] .t-card__media img { mix-blend-mode: normal !important; }
body.tienda[data-theme="dark"] .t-card__wish {
    background: rgba(29, 17, 39, .88) !important;
    color: var(--t-muted) !important;
}
body.tienda[data-theme="dark"] .t-chip {
    background: rgba(255, 79, 174, .18) !important;
    color: #ff7ab8 !important;
}
body.tienda[data-theme="dark"] .t-card__name { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-card__price { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-card__price s { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-card__price strong { color: #ff5d73 !important; }

/* Promos, Banner Regalos, Trust & Ubicación */
body.tienda[data-theme="dark"] .t-promo--1 { background: linear-gradient(135deg, #ff4fae, #e0288e) !important; }
body.tienda[data-theme="dark"] .t-promo--2 { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; }
body.tienda[data-theme="dark"] .t-promo--3 { background: linear-gradient(135deg, #ff7ab8, #ff4fae) !important; }
body.tienda[data-theme="dark"] .t-gift-banner {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: none !important;
}
body.tienda[data-theme="dark"] .t-gift-banner h2 { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-gift-banner h2 em { color: #f3c86e !important; }
body.tienda[data-theme="dark"] .t-gift-banner p { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-btn--light {
    background: var(--t-primary) !important;
    color: #ffffff !important;
}
body.tienda[data-theme="dark"] .t-btn--light:hover {
    background: var(--t-primary-dark) !important;
}
body.tienda[data-theme="dark"] .t-gift-banner__art { background: rgba(29, 17, 39, .55) !important; }
body.tienda[data-theme="dark"] .t-gift-banner__art::before { background: rgba(255, 255, 255, 0.04) !important; }

/* Catálogo & Filtros */
body.tienda[data-theme="dark"] .t-catalog__title { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-filter {
    background: var(--t-surface) !important;
    border-color: var(--t-border) !important;
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-filter:hover {
    border-color: var(--t-primary) !important;
    color: var(--t-primary) !important;
}
body.tienda[data-theme="dark"] .t-filter.is-active {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: #ffffff !important;
}
body.tienda[data-theme="dark"] .t-grid__empty { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-btn--ghost {
    background: var(--t-surface) !important;
    border-color: var(--t-border) !important;
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-btn--ghost:hover {
    border-color: var(--t-primary) !important;
    color: var(--t-primary) !important;
}

/* Modales & Autenticación */
body.tienda[data-theme="dark"] .t-modal__backdrop {
    background: rgba(10, 5, 18, .78) !important;
}
body.tienda[data-theme="dark"] .t-modal__card {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-modal__close {
    background: var(--t-surface-2) !important;
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-auth-tabs {
    background: var(--t-surface-2) !important;
}
body.tienda[data-theme="dark"] .t-auth-tab {
    color: var(--t-muted) !important;
}
body.tienda[data-theme="dark"] .t-auth-tab.is-active {
    background: var(--t-surface) !important;
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-auth-modal__body h4 { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-auth-modal__hint { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-auth-field label { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-auth-field__radio-label { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-auth-field input,
body.tienda[data-theme="dark"] .t-auth-field select,
body.tienda[data-theme="dark"] .t-auth-field textarea {
    background: var(--t-bg) !important;
    color: var(--t-ink) !important;
    border-color: var(--t-border) !important;
}

/* Modal "Mis datos": la cabecera, la navegación por secciones y los
   controles también respetan el tema oscuro. */
body.tienda[data-theme="dark"] .t-profile-head {
    background: var(--t-surface) !important;
    border-bottom-color: var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-profile-modal .t-modal__close {
    background: var(--t-surface-2) !important;
    border-color: var(--t-border) !important;
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-profile-layout {
    border-color: var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-profile-tabs {
    background: var(--t-surface-2) !important;
    border-right-color: var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-profile-tab:hover { background: var(--t-surface) !important; }
body.tienda[data-theme="dark"] .t-profile-tab.is-active {
    background: var(--t-surface) !important;
}
body.tienda[data-theme="dark"] .t-profile-tab__icon { background: var(--t-surface-2) !important; }
body.tienda[data-theme="dark"] .t-profile-tab.is-active .t-profile-tab__icon {
    background: var(--t-primary) !important;
}
body.tienda[data-theme="dark"] .t-profile-content { background: var(--t-surface) !important; }
body.tienda[data-theme="dark"] .t-profile-pane__head h5 { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-profile-pane__head p { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-profile-field-note.is-warn { color: #e8b45c !important; }
body.tienda[data-theme="dark"] .t-profile-segmented { background: var(--t-surface-2) !important; }
body.tienda[data-theme="dark"] .t-profile-segmented label:has(input:checked) {
    background: var(--t-surface) !important;
}
body.tienda[data-theme="dark"] .t-profile-actions {
    background: var(--t-surface) !important;
    border-top-color: var(--t-border) !important;
}
body.tienda[data-theme="dark"] .t-password-toggle:hover { background: var(--t-surface-2) !important; }

/* Toast */
body.tienda[data-theme="dark"] .t-toast {
    background: var(--t-surface-2) !important;
    color: var(--t-ink) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
}

/* Footer */
body.tienda[data-theme="dark"] .t-footer {
    background: var(--t-footer-bg) !important;
    border-top: 1px solid var(--t-border) !important;
    color: var(--t-ink) !important;
}
body.tienda[data-theme="dark"] .t-footer .t-logo__text { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-footer .t-logo__text strong { color: #f3c86e !important; }
body.tienda[data-theme="dark"] .t-footer__tag { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-footer__col h5 { color: #f3c86e !important; }
body.tienda[data-theme="dark"] .t-footer__col a { color: var(--t-muted) !important; }
body.tienda[data-theme="dark"] .t-footer__col a:hover { color: var(--t-ink) !important; }
body.tienda[data-theme="dark"] .t-pays span {
    color: var(--t-muted) !important;
    border-color: var(--t-border) !important;
    background: var(--t-surface-2) !important;
}
body.tienda[data-theme="dark"] .t-footer__legal {
    border-color: var(--t-border) !important;
    color: var(--t-muted) !important;
}

/* ============================================
   CARRITO DE COMPRAS
   ============================================ */
.t-icon-btn--cart { color: var(--t-ink); }
.t-icon-btn--cart:hover { background: var(--t-surface-2); }

/* Panel del carrito — ahora es modal flotante */
.t-cart-panel {
    position: fixed; inset: 0; z-index: 62;
    display: grid; place-items: center;
    padding: 16px;
}
.t-cart-panel[hidden] { display: none; }
.t-cart-panel__backdrop { position: absolute; inset: 0; background: rgba(10,8,25,.55); backdrop-filter: blur(2px); }
.t-cart-panel__drawer {
    position: relative; z-index: 2;
    width: min(580px, 100%); max-height: 90vh;
    background: var(--t-surface); border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    display: flex; flex-direction: column; overflow: hidden;
}
.t-cart-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--t-border); flex-shrink: 0;
}
.t-cart-panel__head h3 { margin: 0; font-size: 1.1rem; }
.t-cart-panel__close {
    width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: var(--t-surface-2); color: var(--t-ink);
    font-size: 1.4rem; display: grid; place-items: center; cursor: pointer;
}
/* Un solo contenedor con scroll: productos + datos de entrega.
   Las acciones (total y botones) quedan siempre fijas abajo. */
.t-cart-panel__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
/* position:relative: el <input type=file> oculto (.t-sr-only) es absolute. Sin un ancestro
   posicionado DENTRO del scroll, su caja cuelga del drawer (overflow:hidden) y al enfocarlo
   el navegador desplaza el drawer entero: con «Tus datos» abierto el formulario es largo y el
   carrito quedaba en blanco hasta cerrarlo y volver a abrirlo. */
.t-checkout__comprobante { position: relative; }
.t-cart-panel__body {
    flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
/* Dentro del scroll único el cuerpo no scrollea por su cuenta */
.t-cart-panel__scroll > .t-cart-panel__body { flex: none; overflow: visible; }
.t-cart-panel__empty { text-align: center; color: var(--t-muted); padding: 30px 16px; font-size: .88rem; }
.t-cart-item {
    display: grid; grid-template-columns: 54px 1fr auto;
    gap: 12px; align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--t-border);
}
.t-cart-item:last-child { border-bottom: 0; }
.t-cart-item__img {
    width: 54px; height: 54px; border-radius: 8px;
    object-fit: cover; background: var(--t-surface-2);
}
.t-cart-item__info { min-width: 0; }
.t-cart-item__name {
    font-weight: 600; font-size: .85rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.t-cart-item__price { font-size: .8rem; color: var(--t-muted); margin-top: 2px; }
.t-cart-item__price strong { color: var(--t-primary); font-weight: 700; }
.t-cart-item__qty {
    display: flex; align-items: center; gap: 6px;
}
.t-cart-item__qty button {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--t-border);
    background: var(--t-surface-2); color: var(--t-ink); font-size: .95rem;
    display: grid; place-items: center;
}
.t-cart-item__qty button:hover { border-color: var(--t-primary); color: var(--t-primary); }
.t-cart-item__qty span { font-weight: 600; min-width: 20px; text-align: center; font-size: .88rem; }
.t-cart-item__remove {
    background: none; border: 0; color: var(--t-danger);
    font-size: .72rem; padding: 4px 0; margin-top: 2px; cursor: pointer;
}
.t-cart-item__remove:hover { text-decoration: underline; }
.t-cart-item__noimg {
    width: 54px; height: 54px; border-radius: 8px;
    background: var(--t-surface-2); display: grid; place-items: center;
    font-size: 1.4rem;
}
.t-cart-panel__foot {
    border-top: 1px solid var(--t-border);
    padding: 16px 20px;
}
.t-cart-panel__actions {
    border-top: 1px solid var(--t-border); background: var(--t-surface);
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0; box-shadow: 0 -4px 18px rgba(16, 6, 30, .08);
    position: relative; z-index: 10;
}
.t-cart-panel__actions[hidden] { display: none; }
.t-cart-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
}
.t-cart-bar__info {
    display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex-shrink: 0;
}
.t-cart-bar__label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-muted); line-height: 1; margin-bottom: 2px;
}
.t-cart-bar__total {
    font-size: clamp(1.05rem, 4vw, 1.25rem); font-weight: 800; color: var(--t-primary); line-height: 1.2; white-space: nowrap;
}
.t-cart-bar .t-btn--checkout {
    flex: 1 1 auto; min-width: 0; max-width: 290px;
    padding: 12px 18px; font-size: clamp(0.8rem, 3vw, 0.92rem); font-weight: 700;
    border-radius: 999px; margin: 0; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; justify-content: center;
}
.t-cart-panel__secondary-actions {
    display: flex; gap: 8px; margin-top: 14px; margin-bottom: 6px;
}
.t-cart-panel__secondary-actions .t-btn { flex: 1; margin: 0; font-size: .8rem; padding: 11px; }
.t-cart-panel__note { margin: 0 0 10px; color: var(--t-muted); font-size: .72rem; line-height: 1.45; }
.t-btn--whatsapp {
    width: 100%; padding: 12px 14px; border-radius: 10px; border: 0;
    background: #25d366; color: #fff; font-size: .92rem; font-weight: 700;
    cursor: pointer; margin-bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.t-btn--whatsapp:hover { background: #20ba5a; }
.t-btn--sm { font-size: .78rem; padding: 8px; }

.t-card__media { position: relative; }

/* Con la ficha de producto abierta la guía de contratación se apaga:
   en pantallas chicas le quedaba flotando encima de la foto. */
body.t-con-ficha .t-hiring-guide { display: none; }

/* ============================================
   CARRITO RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    /* En el celular el carrito es una hoja a pantalla completa: cada pixel
       de marco es contenido que deja de verse en un iPhone SE. */
    .t-cart-panel { padding: 0; }
    .t-cart-panel__drawer { width: 100%; height: 100%; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
    .t-cart-panel__head { padding: 10px 14px; }
    .t-cart-panel__foot { padding: 14px 14px; }
    .t-cart-item { grid-template-columns: 44px 1fr auto; gap: 8px; }
    .t-cart-item__img, .t-cart-item__noimg { width: 44px; height: 44px; }
    .t-cart-item__name { font-size: .78rem; }
    .t-card__buy { font-size: .74rem; padding: 8px 10px; margin-top: 8px; }
    /* La barra de acciones es ultra-compacta (~54px) y deja todo el alto para el scroll */
    .t-cart-panel__actions { padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .t-cart-bar .t-btn--checkout { padding: 11px 14px; font-size: .82rem; }
    .t-cart-panel__secondary-actions { flex-direction: column; gap: 6px; }
}

/* =====================================================================
   ETIQUETAS NUEVAS EN LAS TARJETAS
   ===================================================================== */
.t-card__flags {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    pointer-events: none;
}
.t-card__flags > * {
    position: static !important;
    margin: 0 !important;
}
.t-card__flags .t-card__avail:not(.t-card__avail--no) {
    display: none !important;
}
.t-card__discount {
    font-size: .70rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
    color: #fff; background: linear-gradient(135deg, #e0384c 0%, #ff4757 100%);
    box-shadow: 0 3px 10px rgba(224, 56, 76, 0.38); letter-spacing: .02em;
}
.t-card__new {
    font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
    color: #fff; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.38); letter-spacing: .02em;
}
.t-card__photos {
    position: absolute; top: 8px; right: 50px; z-index: 3;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(26, 6, 41, .62); color: #fff;
    font-size: .62rem; font-weight: 700; backdrop-filter: blur(2px);
}
.t-card--out .t-card__media img { opacity: .55; filter: grayscale(.35); }
.t-card__wish { z-index: 4; }

/* =====================================================================
   BARRA DE HERRAMIENTAS DEL CATÁLOGO
   ===================================================================== */
.t-catalog__toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 18px;
    padding: 11px 15px; border: 1px solid var(--t-border); border-radius: 999px;
    background: var(--t-surface);
}
.t-catalog__count { color: var(--t-muted); font-size: .8rem; font-weight: 600; }
.t-catalog__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.t-switch { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--t-ink); cursor: pointer; }
.t-switch input { width: 16px; height: 16px; accent-color: var(--t-primary); cursor: pointer; }
.t-select { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--t-muted); }
.t-select select {
    border: 1px solid var(--t-border); border-radius: 999px;
    padding: 7px 13px; font: inherit; font-size: .82rem;
    background: var(--t-surface-2); color: var(--t-ink); cursor: pointer;
}
.t-select select:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 1px; }
.t-nav__link--hot span { color: #ffd166; font-weight: 800; }

/* =====================================================================
   FICHA DE PRODUCTO (PDP)
   ===================================================================== */
.t-pdp { padding-bottom: 40px; }
.t-pdp[hidden] { display: none; }

.t-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; font-size: .82rem; color: var(--t-muted); }
.t-crumbs button { border: 0; background: none; color: var(--t-primary); font: inherit; padding: 0; }
.t-crumbs button:hover { text-decoration: underline; }
.t-crumbs em { font-style: normal; color: var(--t-ink); font-weight: 600; }

.t-pdp__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 42px; align-items: start; }

/* --- Galería --- */
.t-pdp__gallery { position: sticky; top: calc(var(--t-header-h) + 16px); display: grid; gap: 12px; }
.t-pdp__stage {
    position: relative; aspect-ratio: 1/1; overflow: hidden;
    border: 1px solid var(--t-border); border-radius: var(--t-radius);
    background: var(--t-surface); display: grid; place-items: center;
    cursor: zoom-in;
}
.t-pdp__stage img { width: 100%; height: 100%; object-fit: contain; padding: 28px; transition: transform .25s ease-out; }
.t-pdp__stage:hover img { transform: scale(1.75); }
.t-pdp__noimg { font-size: 5rem; opacity: .35; }
.t-pdp__flag {
    position: absolute; top: 16px; left: 16px; z-index: 3;
    padding: 6px 14px; border-radius: 999px;
    background: #e0384c; color: #fff; font-size: .85rem; font-weight: 800;
    box-shadow: var(--t-shadow-sm);
}
.t-pdp__flag.is-new { background: var(--t-success); }
.t-pdp__stage-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--t-border); background: var(--t-surface);
    color: var(--t-ink); font-size: 1.6rem; line-height: 1;
    display: grid; place-items: center; box-shadow: var(--t-shadow-sm);
}
.t-pdp__stage-nav:hover { background: var(--t-primary); color: #fff; border-color: var(--t-primary); }
.t-pdp__stage-nav--prev { left: 12px; }
.t-pdp__stage-nav--next { right: 12px; }
.t-pdp__zoom-hint {
    position: absolute; bottom: 12px; right: 14px; z-index: 3;
    color: var(--t-muted); font-size: .68rem; opacity: 0; transition: opacity .2s;
}
.t-pdp__stage:hover .t-pdp__zoom-hint { opacity: 1; }

.t-pdp__thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.t-pdp__thumbs[hidden] { display: none; }
.t-pdp__thumb {
    flex: none; width: 74px; height: 74px; padding: 4px;
    border: 2px solid var(--t-border); border-radius: 13px;
    background: var(--t-surface); overflow: hidden; transition: border-color .15s;
}
.t-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.t-pdp__thumb:hover { border-color: var(--t-secondary); }
.t-pdp__thumb.is-active { border-color: var(--t-primary); }

/* --- Info y compra --- */
.t-pdp__info { display: grid; gap: 12px; align-content: start; }
.t-pdp__brand { color: var(--t-primary); font-size: .74rem; font-weight: 800; letter-spacing: .16em; }
.t-pdp__info h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.t-pdp__sku { color: var(--t-muted); font-size: .8rem; }
.t-pdp__sku:empty { display: none; }

.t-pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 6px; }
.t-pdp__price strong { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; color: var(--t-ink); letter-spacing: -.03em; }
.t-pdp__price s { color: var(--t-muted); font-size: 1.05rem; font-weight: 500; }
.t-pdp__price--ask { font-size: 1.5rem !important; color: var(--t-muted) !important; }
.t-pdp__off { padding: 4px 11px; border-radius: 999px; background: #e0384c; color: #fff; font-size: .85rem; font-weight: 800; }
.t-pdp__stock { margin: 0; font-size: .92rem; font-weight: 700; }
.t-pdp__stock.is-yes { color: var(--t-success); }
.t-pdp__stock.is-no { color: var(--t-muted); }

.t-pdp__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.t-qty { display: inline-flex; align-items: center; border: 1px solid var(--t-border); border-radius: 999px; overflow: hidden; background: var(--t-surface); }
.t-qty[hidden] { display: none; }
.t-qty button { width: 40px; height: 44px; border: 0; background: transparent; color: var(--t-ink); font-size: 1.15rem; }
.t-qty button:hover { background: var(--t-surface-2); color: var(--t-primary); }
.t-qty input {
    width: 46px; height: 44px; border: 0; background: transparent;
    color: var(--t-ink); font: inherit; font-weight: 700; text-align: center;
    -moz-appearance: textfield;
}
.t-qty input::-webkit-outer-spin-button, .t-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.t-pdp__add { flex: 1; min-width: 180px; }
.t-pdp__add:disabled { background: var(--t-border); color: var(--t-muted); cursor: not-allowed; }
.t-pdp__wish { width: auto; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.t-pdp__wish.is-on { border-color: var(--t-secondary); color: var(--t-secondary); }
.t-pdp__consult { width: 100%; }

.t-pdp__perks {
    display: grid; gap: 12px; margin-top: 12px;
    padding: 17px 19px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm);
    background: var(--t-surface-2);
}
.t-pdp__perk { display: flex; align-items: flex-start; gap: 12px; }
.t-pdp__perk > span { font-size: 1.25rem; line-height: 1.2; }
.t-pdp__perk strong { display: block; font-size: .88rem; }
.t-pdp__perk small { color: var(--t-muted); font-size: .78rem; }
.t-pdp__perk small a { color: var(--t-primary); font-weight: 600; }

.t-pdp__share { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 4px; font-size: .8rem; color: var(--t-muted); }
.t-pdp__share button {
    border: 1px solid var(--t-border); border-radius: 999px;
    padding: 5px 13px; background: var(--t-surface); color: var(--t-ink); font: inherit; font-size: .78rem;
}
.t-pdp__share button:hover { border-color: var(--t-primary); color: var(--t-primary); }

/* --- Detalles --- */
.t-pdp__details {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px;
    margin: 48px 0 56px; padding-top: 30px; border-top: 1px solid var(--t-border);
}
.t-pdp__details h3 { margin: 0 0 14px; font-size: 1.3rem; font-weight: 700; }
.t-pdp__desc { margin: 0; color: var(--t-ink); font-size: .94rem; line-height: 1.7; white-space: pre-line; }
.t-pdp__desc.is-placeholder { color: var(--t-muted); font-style: italic; }
.t-pdp__specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--t-border); border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); overflow: hidden; }
.t-pdp__specs li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 15px; background: var(--t-surface); font-size: .86rem; }
.t-pdp__specs span { color: var(--t-muted); white-space: nowrap; }
.t-pdp__specs b { text-align: right; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .t-pdp__top { grid-template-columns: 1fr; gap: 28px; }
    .t-pdp__gallery { position: static; }
    .t-pdp__stage { cursor: pointer; }
    .t-pdp__stage:hover img { transform: none; }
    .t-pdp__zoom-hint { display: none; }
}

/* =====================================================================
   VISOR DE FOTOS A PANTALLA COMPLETA
   ===================================================================== */
.t-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 40px 20px; background: rgba(10, 4, 18, .93); }
.t-lightbox[hidden] { display: none; }
.t-lightbox__img { max-width: min(1100px, 92vw); max-height: 84vh; object-fit: contain; border-radius: 12px; }
.t-lightbox__close, .t-lightbox__nav {
    position: absolute; z-index: 2;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1);
    color: #fff; font-size: 1.8rem; line-height: 1; display: grid; place-items: center;
}
.t-lightbox__close:hover, .t-lightbox__nav:hover { background: rgba(255,255,255,.22); }
.t-lightbox__close { top: 20px; right: 20px; font-size: 1.6rem; }
.t-lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.t-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.t-lightbox__counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: .84rem; }

/* =====================================================================
   DATOS DE ENTREGA EN EL CARRITO
   ===================================================================== */
.t-checkout { margin-bottom: 12px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); background: var(--t-surface-2); }
.t-checkout > summary { padding: 11px 14px; font-size: .84rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
.t-checkout > summary::-webkit-details-marker { display: none; }
.t-checkout__chevron { transition: transform .15s; color: var(--t-muted); }
.t-checkout[open] > summary .t-checkout__chevron { transform: rotate(180deg); }
.t-checkout[open] > summary { border-bottom: 1px solid var(--t-border); }
.t-checkout__fields { display: grid; gap: 10px; padding: 13px 14px; }
.t-checkout__fields label { display: grid; gap: 4px; font-size: .76rem; color: var(--t-muted); }
.t-checkout__fields input[type="text"], .t-checkout__fields input[type="tel"] {
    border: 1px solid var(--t-border); border-radius: 10px;
    padding: 9px 12px; font: inherit; font-size: .86rem;
    background: var(--t-surface); color: var(--t-ink);
}
.t-checkout__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 6px;
}
.t-checkout__radios label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    color: var(--t-ink) !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    transition: all .15s ease;
    flex: 1 1 auto;
}
.t-checkout__radios label:hover {
    border-color: var(--t-primary);
}
.t-checkout__radios label:has(input:checked) {
    border-color: var(--t-primary) !important;
    background: rgba(234, 11, 128, 0.08) !important;
    color: var(--t-primary) !important;
    font-weight: 700 !important;
}
.t-checkout__radios label input[type="radio"],
.t-checkout__radios input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    accent-color: var(--t-primary) !important;
}
.t-checkout__radios label span {
    white-space: nowrap !important;
    display: inline !important;
    width: auto !important;
    flex: none !important;
}

/* ---------------------------------------------------- MÉTODO DE PAGO */
/* La opción que todavía no se puede elegir queda visible pero apagada: se
   lee como "en camino", no como un botón roto. */
.t-checkout__pago { margin: 12px 0 4px; }
.t-checkout__pago h4 { margin: 0 0 6px; font-size: .92rem; }
.t-checkout__radios label.is-disabled {
    cursor: not-allowed !important;
    opacity: .55;
}
.t-checkout__radios label.is-disabled:hover { border-color: var(--t-border) !important; }
.t-checkout__radios label.is-disabled input[type="radio"] { cursor: not-allowed !important; }
.t-checkout__proximamente {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--t-surface-2);
    color: var(--t-muted);
    font-size: .62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* =====================================================================
   CHECKOUT POR TRANSFERENCIA
   ===================================================================== */
.t-btn--buy {
    background: linear-gradient(135deg, #ea0b80 0%, #d8006f 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 4px 14px rgba(234, 11, 128, 0.25);
    transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s ease, filter .18s ease;
}
.t-btn--buy:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(234, 11, 128, 0.35);
}
.t-btn--buy:active { transform: scale(.98); }
.t-btn--checkout { width: 100%; padding: 14px; font-size: .95rem; font-weight: 700; margin-bottom: 8px; }
/* Va dentro del cuerpo de la tarjeta, debajo del precio: así no tapa las
   etiquetas de oferta ni el botón redondo de "agregar". */
.t-card__buy {
    width: 100%; margin-top: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, #ea0b80 0%, #d8006f 100%);
    color: #fff;
    border: 0; border-radius: 10px;
    padding: 9px 12px; font-size: .80rem; font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(234, 11, 128, 0.22);
    transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s ease, filter .18s ease;
}
.t-card__buy:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(234, 11, 128, 0.35);
}
.t-card__buy:active { transform: scale(.97) translateY(0); }
.t-card__buy .icon-svg { width: 15px; height: 15px; }
.t-pdp__buy-now { margin-top: 6px; }

/* Campos de dirección: se ocultan cuando el cliente elige "retiro en el local".
   Necesitan display propio, por eso el [hidden] explícito. */
#t-co-dir-fields { display: grid; gap: 10px; }
#t-co-dir-fields[hidden],
.t-checkout__transfer[hidden],
.t-checkout__verify[hidden],
.t-checkout__verify-code[hidden],
.t-checkout__terms[hidden] { display: none; }

/* Confirmar el correo antes de la primera compra (ver tienda.js) */
.t-checkout__verify { display: grid; gap: 8px; margin-bottom: 12px; padding: 13px 14px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); background: var(--t-surface-2); }
.t-checkout__verify h4 { margin: 0; font-size: .84rem; color: var(--t-ink); display: flex; align-items: center; gap: 6px; }
.t-checkout__verify h4 .icon-svg { color: var(--t-primary); }
.t-checkout__verify .t-checkout__hint { margin: 0; }
.t-checkout__verify strong { color: var(--t-ink); overflow-wrap: anywhere; }
.t-checkout__verify > .t-btn { justify-self: start; }
.t-checkout__verify-code { display: grid; gap: 4px; font-size: .76rem; color: var(--t-muted); }
.t-checkout__verify-row { display: flex; gap: 8px; }
.t-checkout__verify-row input {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid var(--t-border); border-radius: 10px;
    padding: 9px 12px; font: inherit; font-size: 1rem; letter-spacing: .18em;
    background: var(--t-surface); color: var(--t-ink);
}
.t-checkout__verify-row input:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 0; }
.t-checkout__verify-msg { margin: 0; font-size: .74rem; color: var(--t-muted); line-height: 1.45; }
.t-checkout__verify-msg:empty { display: none; }
.t-checkout__verify-msg[data-tone="error"] { color: var(--t-danger, #c0392b); }
.t-checkout__verify-msg[data-tone="success"] { color: var(--t-ink); }

/* Transfer bank accounts */
.t-checkout__transfer { margin-bottom: 12px; padding: 13px 14px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); background: var(--t-surface-2); }
.t-checkout__transfer h4 { margin: 0 0 4px; font-size: .84rem; color: var(--t-ink); display: flex; align-items: center; gap: 6px; }
.t-checkout__transfer h4 .icon-svg { color: var(--t-primary); }
.t-checkout__hint { margin: 0 0 10px; font-size: .72rem; color: var(--t-muted); line-height: 1.45; }
.t-checkout__accounts { display: grid; gap: 8px; margin-bottom: 12px; }
.t-checkout__account {
    padding: 10px 12px; border: 1px solid var(--t-border);
    border-radius: 10px; background: var(--t-surface);
    display: grid; gap: 3px; font-size: .78rem; color: var(--t-muted);
}
.t-checkout__account strong { color: var(--t-ink); font-size: .82rem; }
.t-checkout__account-num { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.t-checkout__account-num b { color: var(--t-primary); font-weight: 700; font-size: .92rem; letter-spacing: .02em; user-select: all; }
.t-checkout__copy {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--t-border); background: var(--t-surface-2);
    color: var(--t-ink); font-size: .68rem; font-weight: 600;
}
.t-checkout__copy:hover { border-color: var(--t-primary); color: var(--t-primary); }
/* Monto exacto a transferir, encima de las cuentas (lo crea tienda.js). */
.t-checkout__monto {
    display: grid; gap: 3px; margin-bottom: 8px; padding: 10px 12px;
    border: 1px solid var(--t-primary); border-radius: 10px;
    background: var(--t-surface); font-size: .78rem; color: var(--t-muted);
}
.t-checkout__monto[hidden] { display: none; }
.t-checkout__monto-label { color: var(--t-ink); font-weight: 600; font-size: .8rem; }
.t-checkout__monto .t-checkout__account-num b { font-size: 1.05rem; }
.t-checkout__monto small { font-size: .7rem; line-height: 1.4; }
.t-checkout__copy .icon-svg { width: 12px; height: 12px; }
.t-checkout__loading { color: var(--t-muted); font-size: .78rem; margin: 0; }

/* Comprobante upload */
.t-checkout__comprobante { margin-top: 8px; }
.t-checkout__upload-label {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 14px; border: 2px dashed var(--t-border);
    border-radius: 12px; cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s;
}
.t-checkout__upload-label:hover { border-color: var(--t-primary); background: var(--t-surface-2); }
.t-checkout__upload-label span { font-size: .82rem; font-weight: 600; color: var(--t-ink); }
.t-checkout__upload-label small { font-size: .7rem; color: var(--t-muted); }
.t-checkout__preview {
    position: relative; margin-top: 10px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--t-border);
}
.t-checkout__preview img { width: 100%; max-height: 200px; object-fit: contain; display: block; background: var(--t-surface); }
.t-checkout__preview-remove {
    position: absolute; top: 6px; right: 6px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,.65); color: #fff;
    border: 0; font-size: 1rem; cursor: pointer;
    display: grid; place-items: center;
}
.t-checkout__upload-error { color: var(--t-danger); font-size: .76rem; margin: 6px 0 0; }

/* Terms & conditions */
.t-checkout__terms { margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); background: var(--t-surface-2); }
.t-checkout__terms-label { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; color: var(--t-ink); cursor: pointer; }
.t-checkout__terms-label input { accent-color: var(--t-primary); margin-top: 2px; }
.t-text-link--inline { background: none; border: 0; color: var(--t-primary); font-size: .78rem; text-decoration: underline; cursor: pointer; padding: 0; display: inline-block; margin-top: 4px; }
.t-checkout__terms-note { margin: 6px 0 0; font-size: .7rem; color: var(--t-muted); line-height: 1.4; }

/* Order confirmation */
.t-checkout__success { text-align: center; padding: 24px 16px; }
.t-checkout__success svg { color: var(--t-success); margin-bottom: 12px; }
/* Check animado: el aro se dibuja, el tilde le sigue, y un halo sale hacia afuera. */
.t-checkout__check { position: relative; display: inline-grid; place-items: center; margin-bottom: 4px; }
.t-checkout__check svg { margin-bottom: 0; position: relative; z-index: 1; animation: t-check-pop .55s cubic-bezier(.2, .9, .3, 1.4) both; }
.t-checkout__check::before,
.t-checkout__check::after {
    content: ""; position: absolute; inset: 6px; border-radius: 50%;
    border: 2px solid var(--t-success); opacity: 0;
    animation: t-check-halo 1.1s ease-out .45s both;
}
.t-checkout__check::after { animation-delay: .7s; }
.t-checkout__check-ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-check-draw .6s ease-out .05s forwards; }
.t-checkout__check-tick { stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-check-draw .4s ease-out .5s forwards; }
.t-checkout__success h4,
.t-checkout__success .t-checkout__order-num { animation: t-check-rise .5s ease-out .8s both; }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
@keyframes t-check-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes t-check-halo { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes t-check-rise { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .t-checkout__check svg, .t-checkout__check-ring, .t-checkout__check-tick,
    .t-checkout__success h4, .t-checkout__success .t-checkout__order-num { animation: none; stroke-dashoffset: 0; }
    .t-checkout__check::before, .t-checkout__check::after { display: none; }
}
.t-checkout__success h4 { margin: 0 0 8px; font-size: 1.1rem; color: var(--t-ink); }
.t-checkout__success p { margin: 0 0 8px; font-size: .84rem; color: var(--t-muted); line-height: 1.5; }
.t-checkout__order-num { display: block; font-size: 1.2rem; color: var(--t-primary); margin: 8px 0 16px; user-select: all; }
.t-checkout__order-note { font-size: .78rem; color: var(--t-muted); margin-bottom: 16px; }

/* Terms modal */
.t-terms-modal .t-modal__card--lg { max-width: 640px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; }
.t-terms-modal__body { padding: 24px 24px 18px; overflow-y: auto; min-height: 0; }
.t-terms-modal__body h4 { margin: 0 0 16px; font-size: 1.1rem; color: var(--t-ink); }
.t-terms-modal__content { font-size: .82rem; color: var(--t-muted); line-height: 1.6; }
.t-terms-modal__content h5 { margin: 16px 0 6px; font-size: .88rem; color: var(--t-ink); }
.t-terms-modal__content h5:first-child { margin-top: 0; }
.t-terms-modal__content ul { margin: 6px 0 10px 18px; }
.t-terms-modal__content li { margin-bottom: 4px; }
/* Barra fija: el botón de aceptar no se pierde al final del texto */
.t-terms-modal__actions {
    display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--t-border); background: var(--t-surface);
}
.t-terms-modal__actions .t-btn--primary { min-width: 170px; }

/* Checkout fields (select, new inputs) */
.t-checkout__fields select {
    border: 1px solid var(--t-border); border-radius: 10px;
    padding: 9px 12px; font: inherit; font-size: .86rem;
    background: var(--t-surface); color: var(--t-ink);
}
.t-checkout__fields select:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 0; }

@media (max-width: 720px) {
    .t-checkout__fields select { font-size: .82rem; }
    .t-checkout__upload-label { padding: 14px 10px; }
    .t-checkout__account { font-size: .74rem; }
    .t-checkout__success { padding: 18px 12px; }
    .t-checkout__order-num { font-size: 1rem; }
    .t-terms-modal .t-modal__card--lg { max-height: 90vh; margin: 8px; }
    .t-terms-modal__body { padding: 16px 16px 12px; }
    .t-terms-modal__actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .t-terms-modal__actions .t-btn--primary { min-width: 0; flex: 1; }
    .t-btn--checkout { padding: 12px; font-size: .88rem; }
}

/* Tracker button in header */
.t-icon-btn--track { color: var(--t-primary); }

/* =====================================================================
   SEGUIMIENTO DE PEDIDOS LIGADO A LA CUENTA & ESTILOS DEL CARRITO
   ===================================================================== */
.t-orders-panel__head-info { display: flex; flex-direction: column; gap: 2px; }
.t-orders-panel__security-note { font-size: 0.72rem; color: var(--t-muted); font-weight: 500; }

/* Stepper en la tarjeta de pedido del usuario */
.t-order__stepper {
    /* --pasos: 4 (recorrido corto) o 5 (con «Confirmando transferencia»). */
    display: grid; grid-template-columns: repeat(var(--pasos, 4), minmax(0, 1fr)); gap: 4px;
    position: relative; margin: 12px 0 8px; text-align: center;
}
.t-order__step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: relative; z-index: 1;
}
.t-order__dot {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--t-surface); border: 2px solid var(--t-border);
    color: var(--t-muted); display: grid; place-items: center;
    font-size: 0.68rem; font-weight: 700; transition: all .2s;
}
.t-order__step.is-done .t-order__dot {
    background: var(--t-success); border-color: var(--t-success); color: #fff;
}
.t-order__step.is-current .t-order__dot {
    background: var(--t-primary); border-color: var(--t-primary); color: #fff;
    box-shadow: 0 0 0 3px rgba(234, 11, 128, 0.2);
}
/* Paso con problema (transferencia rechazada): rojo, para que se vea sin leer. */
.t-order__step.is-problem .t-order__dot {
    background: var(--t-danger, #d92d20); border-color: var(--t-danger, #d92d20); color: #fff;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.2);
}
.t-order__step.is-problem .t-order__step-label { color: var(--t-danger, #d92d20); font-weight: 700; }
/* Latido: el punto donde está el pedido «late» (dos golpes y un halo que se apaga), para que se vea a simple vista
   dónde va. El rojo del paso con problema late más lento. */
.t-order__step.is-current .t-order__dot { animation: t-latido 1.7s ease-in-out infinite; }
.t-order__step.is-problem .t-order__dot { animation: t-latido-rojo 2.2s ease-in-out infinite; }
@keyframes t-latido {
    0%   { transform: scale(1);    box-shadow: 0 0 0 3px rgba(234, 11, 128, .20); }
    12%  { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(234, 11, 128, .32); }
    24%  { transform: scale(1);    box-shadow: 0 0 0 3px rgba(234, 11, 128, .20); }
    36%  { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(234, 11, 128, .26); }
    52%  { transform: scale(1);    box-shadow: 0 0 0 11px rgba(234, 11, 128, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 3px rgba(234, 11, 128, .20); }
}
@keyframes t-latido-rojo {
    0%   { transform: scale(1);    box-shadow: 0 0 0 3px rgba(217, 45, 32, .20); }
    15%  { transform: scale(1.16); box-shadow: 0 0 0 6px rgba(217, 45, 32, .30); }
    40%  { transform: scale(1);    box-shadow: 0 0 0 12px rgba(217, 45, 32, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 3px rgba(217, 45, 32, .20); }
}
@media (prefers-reduced-motion: reduce) {
    .t-order__step.is-current .t-order__dot,
    .t-order__step.is-problem .t-order__dot { animation: none; }
}
.t-order__rechazo {
    margin: 4px 0 10px; padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--t-danger, #d92d20) 40%, var(--t-border));
    border-left: 4px solid var(--t-danger, #d92d20);
    border-radius: var(--t-radius-sm);
    background: color-mix(in srgb, var(--t-danger, #d92d20) 7%, var(--t-surface));
    font-size: .8rem; line-height: 1.5; color: var(--t-ink);
}
.t-order__rechazo strong { display: block; margin-bottom: 4px; color: var(--t-danger, #d92d20); }
.t-order__rechazo p { margin: 0 0 4px; }
.t-order__rechazo p:last-child { margin-bottom: 0; color: var(--t-muted); }
.t-order__rechazo q { font-style: normal; font-weight: 600; }
/* Pedido al que lleva el enlace del correo: se resalta unos segundos. */
.t-order.is-enfocado { animation: t-order-enfocado 1.6s ease-in-out 3; border-color: var(--t-primary); }
@keyframes t-order-enfocado {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 11, 128, 0); }
    50% { box-shadow: 0 0 0 5px rgba(234, 11, 128, .28); }
}
@media (prefers-reduced-motion: reduce) { .t-order.is-enfocado { animation: none; box-shadow: 0 0 0 3px rgba(234, 11, 128, .28); } }
.t-order__step-label {
    font-size: 0.65rem; font-weight: 600; color: var(--t-muted); line-height: 1.2;
}
.t-order__step.is-done .t-order__step-label,
.t-order__step.is-current .t-order__step-label {
    color: var(--t-ink); font-weight: 700;
}
.t-order__stepper-line {
    position: absolute; top: 12px; left: calc(50% / var(--pasos, 4)); right: calc(50% / var(--pasos, 4)); height: 2px;
    background: var(--t-border); z-index: 0;
}
.t-order__stepper-prog {
    height: 100%; background: var(--t-success); transition: width .3s;
}

.t-order__actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.t-order__wa-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px; border: 1px solid #25d366;
    background: rgba(37, 211, 102, 0.1); color: #25d366;
    font-size: 0.74rem; font-weight: 700; text-decoration: none;
    transition: background .15s, color .15s;
}
.t-order__wa-btn:hover {
    background: #25d366; color: #fff;
}
.t-order__receipt-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 999px; border: 1px solid var(--t-border);
    background: var(--t-surface-2); color: var(--t-ink);
    font-size: 0.74rem; font-weight: 600; text-decoration: none;
}
.t-order__receipt-link:hover { background: var(--t-surface); }

/* =====================================================================
   MEJORAS EN MI CARRITO: DESGLOSE VISUAL Y SEGURIDAD
   ===================================================================== */
.t-cart-breakdown {
    background: var(--t-surface-2); border: 1px solid var(--t-border);
    border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 12px;
}
.t-cart-breakdown__row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.84rem; color: var(--t-muted);
}
.t-cart-breakdown__row strong { color: var(--t-ink); }
.t-cart-breakdown__badge {
    font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px;
    background: var(--t-surface); border: 1px solid var(--t-border); color: var(--t-primary);
}
.t-cart-breakdown__row--total {
    border-top: 1px dashed var(--t-border); padding-top: 8px; margin-top: 2px;
    font-size: 0.95rem; font-weight: 800; color: var(--t-ink);
}
.t-cart-breakdown__row--total strong {
    font-size: 1.2rem; color: var(--t-primary);
}

.t-cart-security-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 10px;
    background: rgba(79, 158, 123, 0.1); border: 1px solid rgba(79, 158, 123, 0.25);
    color: var(--t-ink); font-size: 0.78rem; margin-bottom: 8px;
}
.t-cart-security-badge svg { color: var(--t-success); flex-shrink: 0; }
.t-cart-security-badge strong { color: var(--t-primary); }

/* Retroalimentación táctil de copiado de cuenta bancaria */
.t-checkout__copy.is-copied {
    background: #22c55e !important; color: #fff !important; border-color: #22c55e !important;
    transform: scale(1.04);
}

/* =====================================================================
   MODAL GUÍA DE COMPRA & ATENCIÓN
   ===================================================================== */
.t-guia-modal .t-modal__card--lg {
    max-width: 720px; max-height: 88vh; overflow: hidden;
    display: flex; flex-direction: column; width: min(720px, 100%);
}
.t-guia-modal__head {
    padding: 24px 24px 0; border-bottom: 1px solid var(--t-border);
    background: var(--t-surface); flex-shrink: 0;
}
.t-guia-modal__top h3 { margin: 0; font-size: 1.3rem; color: var(--t-ink); }
.t-guia-modal__sub { margin: 4px 0 16px; font-size: 0.84rem; color: var(--t-muted); line-height: 1.4; }

.t-guia-tabs {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.t-guia-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-radius: 10px; border: 1px solid var(--t-border); background: var(--t-surface-2);
    color: var(--t-muted); font-size: 0.82rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: all .15s;
}
.t-guia-tab:hover { background: var(--t-surface); color: var(--t-ink); }
.t-guia-tab.is-active {
    background: var(--t-primary); border-color: var(--t-primary); color: #fff;
    box-shadow: 0 4px 12px rgba(234, 11, 128, 0.25);
}

.t-guia-modal__body {
    padding: 22px 24px; overflow-y: auto; flex: 1;
}
.t-guia-pane[hidden] { display: none !important; }
.t-guia-card { display: flex; flex-direction: column; gap: 16px; }
.t-guia-card__title { font-size: 1.05rem; font-weight: 800; color: var(--t-ink); }
.t-guia-highlight {
    padding: 10px 14px; border-radius: 10px; background: var(--t-surface-2);
    border-left: 3px solid var(--t-primary); font-size: 0.84rem; color: var(--t-ink); margin: 0;
}
.t-guia-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.t-guia-box {
    background: var(--t-surface-2); border: 1px solid var(--t-border);
    border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.t-guia-box__head { display: flex; flex-direction: column; gap: 4px; }
.t-guia-box__badge {
    align-self: flex-start; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; padding: 2px 8px; border-radius: 6px;
    background: var(--t-surface); color: var(--t-primary); border: 1px solid var(--t-border);
}
.t-guia-box strong { font-size: 0.92rem; color: var(--t-ink); }
.t-guia-box p { margin: 0; font-size: 0.82rem; color: var(--t-muted); line-height: 1.5; }
.t-guia-list { margin: 4px 0 0 16px; padding: 0; font-size: 0.8rem; color: var(--t-muted); }
.t-guia-list li { margin-bottom: 4px; }

.t-guia-locales-box {
    background: var(--t-surface-2); border: 1px solid var(--t-border);
    border-radius: 14px; padding: 16px; font-size: 0.86rem; color: var(--t-muted);
}
.t-guia-locales-box strong { color: var(--t-ink); display: block; margin-bottom: 6px; }
.t-guia-link { color: var(--t-primary); font-weight: 700; text-decoration: underline; }

.t-guia-modal__foot {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--t-border); background: var(--t-surface); flex-shrink: 0;
}

@keyframes t-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
    .t-guia-modal .t-modal__card--lg {
        max-height: 92vh; margin: 8px; width: calc(100% - 16px);
    }
    .t-guia-modal__head { padding: 16px 16px 12px; }
    .t-guia-modal__body { padding: 16px; }
    .t-guia-grid { grid-template-columns: 1fr; }
    .t-guia-modal__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .t-cart-breakdown { padding: 10px 12px; font-size: 0.8rem; }
    .t-order__stepper { gap: 2px; }
    .t-order__step-label { font-size: 0.58rem; }
}

@media (max-width: 360px) {
    .t-order__stepper-line { top: 10px; }
    .t-order__dot { width: 20px; height: 20px; font-size: 0.6rem; }
    .t-order__step-label { font-size: 0.55rem; }
}

/* =====================================================================
   FLOTANTES Y BARRA INFERIOR MÓVIL
   ===================================================================== */
.t-floats { position: fixed; right: 18px; bottom: 22px; z-index: 55; display: grid; gap: 10px; justify-items: center; }
.t-float {
    width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-ink);
    font-size: 1.3rem; display: grid; place-items: center;
    box-shadow: var(--t-shadow); transition: transform .12s;
}
.t-float:hover { transform: translateY(-2px); }
.t-float[hidden] { display: none; }
.t-float--wa { background: #25d366; border-color: #25d366; color: #fff; font-size: 1.45rem; }
.t-float--wa .whatsapp-icon { fill: #fff; stroke: none; }
.t-btn--whatsapp .whatsapp-icon { fill: #fff; stroke: none; margin-right: 6px; vertical-align: -3px; }
.whatsapp-icon { fill: currentColor; stroke: none; }

.t-tabbar { display: none; }
@media (max-width: 720px) {
    .t-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
        display: grid; grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid var(--t-border); background: var(--t-surface);
        box-shadow: 0 -6px 22px rgba(60, 7, 42, .1);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .t-tabbar button {
        position: relative;
        display: grid; gap: 2px; justify-items: center;
        padding: 9px 4px; border: 0; background: none;
        color: var(--t-muted); font-size: .64rem; font-weight: 600;
    }
    .t-tabbar button span { font-size: 1.15rem; }
    .t-tabbar button:active { color: var(--t-primary); }
    .t-tabbar__dot { position: absolute; top: 7px; right: 24%; width: 8px; height: 8px; border-radius: 50%; background: var(--t-primary); }
    .t-tabbar__dot[hidden] { display: none; }
    .t-floats { bottom: 78px; right: 14px; }
    .t-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .t-main { padding-bottom: 74px; }

    /* El pie también tiene que poder subir por encima de lo flotante.
       `.t-main` reserva 74px para la barra inferior, pero el pie viene
       DESPUÉS y no heredaba nada: en el fondo de la página la línea del
       RUC y los links legales (Términos, Privacidad, Reclamos) quedaban
       debajo de la burbuja de contratación, del "volver arriba" y de
       WhatsApp. Como son `fixed`, no hay forma de esquivarlos scrolleando:
       la holgura tiene que estar acá. 200px cubre la banda flotante más
       alta (burbuja a 84px y los flotantes de la derecha a 78px, apilados). */
    .t-footer { padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }

    .t-catalog__toolbar { border-radius: var(--t-radius-sm); }
    .t-catalog__tools { width: 100%; justify-content: space-between; }
}

/* =====================================================================
   MODO OSCURO — piezas nuevas
   ===================================================================== */
body.tienda[data-theme="dark"] .t-pdp__stage,
body.tienda[data-theme="dark"] .t-pdp__thumb,
body.tienda[data-theme="dark"] .t-pdp__specs li,
body.tienda[data-theme="dark"] .t-catalog__toolbar,
body.tienda[data-theme="dark"] .t-select select,
body.tienda[data-theme="dark"] .t-qty,
body.tienda[data-theme="dark"] .t-float,
body.tienda[data-theme="dark"] .t-tabbar,
body.tienda[data-theme="dark"] .t-checkout__fields input,
body.tienda[data-theme="dark"] .t-checkout__fields select,
body.tienda[data-theme="dark"] .t-pdp__share button,
body.tienda[data-theme="dark"] .t-pdp__stage-nav { background: var(--t-surface); border-color: var(--t-border); color: var(--t-ink); }
body.tienda[data-theme="dark"] .t-pdp__perks,
body.tienda[data-theme="dark"] .t-checkout,
body.tienda[data-theme="dark"] .t-checkout__transfer,
body.tienda[data-theme="dark"] .t-checkout__terms,
body.tienda[data-theme="dark"] .t-checkout__account { background: var(--t-surface-2); border-color: var(--t-border); }
body.tienda[data-theme="dark"] .t-checkout__upload-label { border-color: var(--t-border); background: var(--t-surface); }
body.tienda[data-theme="dark"] .t-checkout__upload-label:hover { border-color: var(--t-primary); background: var(--t-surface-2); }
body.tienda[data-theme="dark"] .t-checkout__preview { border-color: var(--t-border); }
body.tienda[data-theme="dark"] .t-checkout__preview img { background: var(--t-surface); }
body.tienda[data-theme="dark"] .t-checkout__copy { background: var(--t-surface); border-color: var(--t-border); color: var(--t-ink); }
body.tienda[data-theme="dark"] .t-cart-panel__actions { background: var(--t-surface); border-color: var(--t-border); box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
body.tienda[data-theme="dark"] .t-card__wish { background: rgba(29, 17, 39, .9); }
body.tienda[data-theme="dark"] .t-card__media img { mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
    .t-pdp__stage:hover img { transform: none; }
    .t-float:hover { transform: none; }
}

/* =====================================================================
   UBICACIÓN DEL LOCAL EN LA PORTADA
   ===================================================================== */

.t-store-card {
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface);
    box-shadow: var(--t-shadow-sm);
    padding: 17px 19px;
    display: grid;
    gap: 13px;
}
.t-store-card__head { display: flex; align-items: flex-start; gap: 12px; }
.t-store-card__eyebrow {
    display: block; color: var(--t-primary-ink);
    font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.t-store-card__head strong { display: block; font-size: 1.02rem; }
.t-store-card__state {
    margin-left: auto; align-self: center;
    padding: 3px 10px; border-radius: 999px;
    background: var(--t-surface-2); color: var(--t-muted);
    font-size: .66rem; font-weight: 800; white-space: nowrap;
}
.t-store-card__state[hidden] { display: none; }
.t-store-card__state.is-open { background: rgba(79, 158, 123, .16); color: var(--t-success); }

.t-store-card__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t-store-card__rows li { display: flex; align-items: flex-start; gap: 9px; font-size: .85rem; line-height: 1.45; }
.t-store-card__rows li > span:first-child { flex: none; width: 18px; text-align: center; opacity: .8; }
.t-store-card__rows a { color: var(--t-primary); font-weight: 600; }
.t-store-card__rows a:hover { text-decoration: underline; }

.t-store-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.t-store-card__map, .t-store-card__copy {
    border: 1px solid var(--t-border); border-radius: 999px;
    padding: 8px 15px; font-size: .8rem; font-weight: 700;
    background: var(--t-surface-2); color: var(--t-ink);
    font-family: inherit;
}
.t-store-card__map { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
.t-store-card__map:hover { background: var(--t-primary-dark); border-color: var(--t-primary-dark); }
.t-store-card__copy:hover { border-color: var(--t-primary); color: var(--t-primary); }

/* =====================================================================
   MENÚ "MI CUENTA"
   ===================================================================== */
.t-account { position: relative; }
.t-account__chev { margin-left: 4px; font-size: .7rem; opacity: .7; }
#t-account-btn { border: 1px solid transparent; background: none; font: inherit; color: inherit; }

.t-account__menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
    width: min(300px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--t-border); border-radius: var(--t-radius-sm);
    background: var(--t-surface); box-shadow: var(--t-shadow);
    display: grid; gap: 2px;
    max-height: min(72vh, 620px); overflow-y: auto;
}
.t-account__menu[hidden] { display: none; }
.t-account__who {
    padding: 10px 12px 12px; margin-bottom: 4px;
    border-radius: 11px; background: var(--t-surface-2);
}
.t-account__who strong { display: block; font-size: .92rem; }
.t-account__who small { display: block; color: var(--t-muted); font-size: .72rem; line-height: 1.4; word-break: break-word; }
.t-account__role {
    display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
    background: var(--t-primary); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.t-account__item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 12px; border: 0; border-radius: 11px;
    background: none; color: var(--t-ink); font: inherit; text-align: left;
    transition: background .12s;
}
.t-account__item:hover { background: var(--t-surface-2); }
.t-account__icon { flex: none; width: 22px; text-align: center; font-size: 1rem; }
.t-account__labels { min-width: 0; }
.t-account__labels b { display: block; font-size: .85rem; font-weight: 600; }
.t-account__labels small { display: block; color: var(--t-muted); font-size: .7rem; line-height: 1.35; }
.t-account__sep { margin: 5px 12px; border: 0; border-top: 1px solid var(--t-border); }

/* =====================================================================
   MIS DATOS / MIS PEDIDOS
   ===================================================================== */
.t-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.t-profile-grid > .t-auth-field { min-width: 0; }
.t-profile-grid input,
.t-profile-grid select,
.t-profile-grid textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.t-profile-modal .t-modal__card {
    width: min(900px, 100%);
    max-height: min(92vh, 840px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
.t-profile-modal .t-auth-modal__body {
    display: flex; flex-direction: column;
    min-height: 0; max-height: none;
    padding: 16px 20px 0;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
.t-profile-modal .t-profile-content { min-width: 0; }
.t-profile-modal .t-auth-modal__body::-webkit-scrollbar { width: 7px; }
.t-profile-modal .t-auth-modal__body::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: 999px; }
.t-profile-modal .t-auth-modal__body::-webkit-scrollbar-track { background: transparent; }

.t-order {
    padding: 13px 14px; margin-bottom: 10px;
    border: 1px solid var(--t-border); border-radius: var(--t-radius-sm);
    background: var(--t-surface);
}
.t-order__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-order__head strong { font-size: .88rem; letter-spacing: .02em; }
.t-order__state {
    padding: 3px 10px; border-radius: 999px;
    background: var(--t-surface-2); color: var(--t-muted);
    font-size: .68rem; font-weight: 700; white-space: nowrap;
}
.t-order__state--entregado { background: rgba(79, 158, 123, .16); color: var(--t-success); }
.t-order__state--en_camino { background: rgba(234, 11, 128, .12); color: var(--t-primary); }
.t-order__state--cancelado { background: rgba(207, 106, 112, .14); color: var(--t-danger); }
.t-order__state--pago_pendiente { background: rgba(230, 126, 34, .14); color: #e67e22; }
.t-order__state--verificando_pago { background: rgba(243, 156, 18, .14); color: #f39c12; }
.t-order__state--rechazada { background: rgba(207, 106, 112, .16); color: var(--t-danger); }
.t-order__hint { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: .74rem; color: var(--t-muted); line-height: 1.45; }
.t-order__hint .icon-svg { flex-shrink: 0; margin-top: 1px; }
.t-order__upload {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--t-primary); color: #fff; font-size: .76rem; font-weight: 700;
}
.t-order__upload:hover { background: var(--t-primary-dark); }
.t-order__upload:disabled { opacity: .6; cursor: default; }
/* Volver a pedir: misma forma que "Subir comprobante" pero en segundo plano,
   para que la acción principal de la tarjeta siga siendo una sola. */
.t-order__repeat {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--t-primary);
    border: 1px solid var(--t-primary); font-size: .76rem; font-weight: 700;
}
.t-order__repeat:hover { background: rgba(234, 11, 128, .08); }
.t-order__meta { margin-top: 4px; color: var(--t-muted); font-size: .74rem; }
.t-order__items { list-style: none; margin: 9px 0 0; padding: 9px 0 0; border-top: 1px solid var(--t-border); display: grid; gap: 4px; }
.t-order__more { color: var(--t-muted); font-style: italic; }

.t-order__cancel {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--t-muted);
    border: 1px solid var(--t-border); font-size: .76rem; font-weight: 600;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.t-order__cancel:hover {
    color: var(--t-danger);
    border-color: var(--t-danger);
    background: rgba(207, 106, 112, .08);
}
.t-order__cancel:disabled { opacity: .5; cursor: default; }

.t-orders-notifications {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 12px;
}
.t-orders-notifications__title {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    color: var(--t-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.t-orders-notifications__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.t-orders-notifications__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    font-size: .76rem;
}
.t-orders-notifications__item.is-unread {
    border-color: rgba(234, 11, 128, .35);
    background: rgba(234, 11, 128, .04);
}
.t-orders-notifications__bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    background: var(--t-border);
}
.t-orders-notifications__item.is-unread .t-orders-notifications__bullet {
    background: var(--t-primary);
}
.t-orders-notifications__content strong {
    display: block;
    color: var(--t-ink);
    font-size: .78rem;
    margin-bottom: 2px;
}
.t-orders-notifications__content p {
    margin: 0;
    color: var(--t-muted);
    font-size: .73rem;
    line-height: 1.4;
}

/* =====================================================================
   GUÍA DE BIENVENIDA
   ===================================================================== */
.t-tour { position: fixed; inset: 0; z-index: 95; }
.t-tour[hidden] { display: none; }
.t-tour__backdrop { position: absolute; inset: 0; background: rgba(10, 4, 18, .62); }
.t-tour__spot {
    position: fixed; border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(10, 4, 18, .62), 0 0 0 3px var(--t-primary);
    transition: top .22s, left .22s, width .22s, height .22s;
    pointer-events: none;
}
.t-tour__card {
    position: fixed; z-index: 2;
    padding: 17px 19px 15px;
    border-radius: var(--t-radius-sm);
    background: var(--t-surface); color: var(--t-ink);
    box-shadow: var(--t-shadow);
}
.t-tour__step { color: var(--t-primary); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.t-tour__card h4 { margin: 7px 0 6px; font-size: 1.05rem; }
.t-tour__card p { margin: 0 0 14px; color: var(--t-muted); font-size: .84rem; line-height: 1.55; }
.t-tour__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-tour__skip { border: 0; background: none; color: var(--t-muted); font: inherit; font-size: .8rem; text-decoration: underline; }
.t-tour__skip:hover { color: var(--t-ink); }
.t-btn--sm { padding: 8px 18px; font-size: .84rem; }

/* =====================================================================
   LOCALES (FERNANDO + CAPIATÁ)
   ===================================================================== */
.t-stores-section {
    margin: clamp(52px, 6vw, 84px) 8px;
    padding: 30px clamp(18px, 4vw, 34px);
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
}
.t-stores-header {
    margin-bottom: 20px;
}
.t-stores-header h2 {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 4px 0 0;
    color: var(--t-ink);
}
.t-stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}
.t-store-card {
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface-2);
    box-shadow: var(--t-shadow-sm);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.t-store-card:hover {
    box-shadow: var(--t-shadow);
}
.t-store-card__map-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.t-store-card__map-ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Aspect Ratio 16:9 */
}
.t-store-card__map-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =====================================================================
   MODO OSCURO Y RESPONSIVE
   ===================================================================== */
body.tienda[data-theme="dark"] .t-stores-section { background: rgba(29, 17, 39, .45); border-color: var(--t-border); }
body.tienda[data-theme="dark"] .t-store-card,
body.tienda[data-theme="dark"] .t-account__menu,
body.tienda[data-theme="dark"] .t-order,
body.tienda[data-theme="dark"] .t-tour__card { background: var(--t-surface); border-color: var(--t-border); }
body.tienda[data-theme="dark"] .t-account__who,
body.tienda[data-theme="dark"] .t-store-card__copy,
body.tienda[data-theme="dark"] .t-order__state,
body.tienda[data-theme="dark"] .t-store-card__state { background: var(--t-surface-2); }
body.tienda[data-theme="dark"] .t-account__item { color: var(--t-ink); }

@media (max-width: 720px) {
    .t-stores-section { padding: 18px 16px; }
    .t-stores-grid { grid-template-columns: 1fr; }
    .t-account__menu { position: fixed; top: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 12px; left: 12px; width: auto; }
    .t-profile-grid { grid-template-columns: 1fr; }
    .t-profile-modal { padding: 10px; place-items: end center; }
    .t-profile-modal .t-modal__card { width: 100%; max-height: 92vh; border-radius: 18px 18px 12px 12px; }
    .t-store-card__actions .t-store-card__map,
    .t-store-card__actions .t-store-card__copy { flex: 1; text-align: center; }
}

@media (max-width: 900px) {
    .t-profile-grid { grid-template-columns: 1fr; }
}

/* Pantallas estrechas: conservar jerarquía sin permitir que el contenido
   fuerce un ancho mayor al viewport. */
@media (max-width: 480px) {
    .t-header__bar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .t-logo__text {
        font-size: 1.18rem;
    }

    .t-icon-btn {
        width: 36px;
        height: 36px;
    }

    .t-main {
        width: 100%;
        max-width: 100%;
        padding: 10px 10px 78px;
        overflow-x: clip;
    }

    .t-hero {
        margin-bottom: 26px;
        border-radius: 17px;
    }

    .t-slide {
        min-height: 390px;
        padding: 30px 20px;
    }

    .t-slide__title {
        max-width: 230px;
        font-size: clamp(2rem, 11vw, 2.75rem);
    }

    .t-intro h1 {
        font-size: clamp(2rem, 10vw, 2.6rem);
    }

    .t-quickcats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 34px;
    }

    .t-quickcat {
        min-width: 0;
        min-height: 84px;
        padding: 10px 3px 7px;
        border-radius: 12px;
    }

    .t-collection-grid {
        gap: 7px;
    }

    .t-collection-card {
        min-width: 0;
        min-height: 145px;
        padding: 15px 12px;
    }

    .t-collection-card strong {
        font-size: 1.08rem;
    }

    .t-promo {
        min-width: 0;
        padding: 17px 14px;
    }

    .t-promo__icon {
        font-size: 1.7rem;
    }

    .t-promo h4 {
        font-size: 1rem;
    }

    .t-gift-banner__copy {
        padding: 28px 18px 24px;
    }

    .t-gift-banner h2 {
        font-size: clamp(2.2rem, 12vw, 3rem);
    }

    .t-stores-section {
        margin-left: 0;
        margin-right: 0;
    }

    .t-stores-section {
        padding: 15px 12px;
    }

    .t-store-card {
        min-width: 0;
        padding: 14px;
    }

    .t-store-card__head strong,
    .t-store-card__rows li {
        overflow-wrap: anywhere;
    }

    .t-store-card__actions {
        flex-direction: column;
        /* En columna, wrap arma varias columnas y desborda: ver fix-flex */
        flex-wrap: nowrap;
    }

    .t-store-card__actions .t-store-card__map,
    .t-store-card__actions .t-store-card__copy {
        width: 100%;
        flex: none;
    }

    .t-catalog__toolbar {
        align-items: stretch;
        padding: 10px;
    }

    .t-catalog__tools,
    .t-select {
        width: 100%;
    }

    .t-select {
        justify-content: space-between;
    }

    .t-select select {
        min-width: 0;
        max-width: 68%;
    }

    .t-grid {
        gap: 8px;
    }

    .t-card__body {
        min-width: 0;
        padding: 9px 8px 11px;
    }

    .t-card__name {
        font-size: .74rem;
    }

    .t-card__price {
        font-size: .84rem;
    }

    .t-pdp__top {
        gap: 20px;
    }

    .t-pdp__stage {
        border-radius: 17px;
    }

    .t-pdp__stage img {
        padding: 16px;
    }

    /* Cantidad y «Agregar al carrito» ocupan su fila, y «Comprar ahora» con
       favoritos van debajo, lado a lado. Con tres columnas en una fila (390px),
       «Agregar al carrito» se partía en tres renglones y «Comprar ahora» quedaba
       justo bajo la burbuja fija de WhatsApp. Antes sólo pasaba a ≤360px. */
    .t-pdp__buy {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .t-qty {
        width: 100%;
        justify-content: space-between;
    }

    .t-pdp__add {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .t-pdp__buy-now,
    .t-pdp__wish {
        grid-column: auto;
        width: 100%;
        justify-content: center;
    }

    .t-pdp__perks,
    .t-pdp__details {
        margin-top: 18px;
    }

    .t-pdp__details {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 30px;
    }

    .t-modal {
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    }

    .t-modal__card {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 17px;
    }

    .t-auth-modal__body {
        padding: 22px 17px;
    }

    .t-cart-panel__head,
    .t-cart-panel__body,
    .t-cart-panel__foot {
        padding-left: 15px;
        padding-right: 15px;
    }

    .t-footer__grid {
        grid-template-columns: 1fr;
        gap: 23px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .t-footer__col:first-child {
        grid-column: auto;
    }
}

@media (max-width: 360px) {
    .t-header__actions {
        gap: 1px;
    }

    .t-icon-btn {
        width: 33px;
        height: 33px;
    }

    .t-burger {
        width: 38px;
        height: 38px;
    }

    .t-slide {
        min-height: 375px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .t-slide__title {
        font-size: 1.95rem;
    }

    .t-pdp__buy {
        grid-template-columns: 1fr 1fr;
    }

    .t-qty {
        width: 100%;
        justify-content: space-between;
    }

    .t-pdp__add {
        grid-column: 1 / -1;
        width: 100%;
    }

    .t-pdp__buy-now,
    .t-pdp__wish {
        /* Lado a lado, ocupando la fila entre los dos. A lo ancho, "Comprar
           ahora" quedaba justo debajo de la burbuja de WhatsApp (que es fija) y
           la tapaba. Así la burbuja sólo pisa la acción secundaria. */
        grid-column: auto;
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   PANEL LATERAL COMPLETO (pantallas chicas)
   ---------------------------------------------------------------------
   Estos bloques existen solo para el panel: en escritorio la barra sigue
   siendo horizontal y todo esto queda oculto.
   ===================================================================== */
.t-nav__head,
.t-nav__account,
.t-nav__quick,
.t-nav__section-label,
.t-nav__foot { display: none; }

@media (max-width: 720px) {
    /* El panel es una columna scrolleable con el pie siempre al final.
       Se eleva por encima de la barra inferior (z-index 58) y de los
       botones flotantes (55), que además se ocultan mientras está
       abierto para no competir con él. */
    .t-nav { padding-top: 0; display: flex; flex-direction: column; z-index: 60; }
    /* flex-wrap: wrap (heredado de la barra horizontal) + flex-direction:
       column hacen que, cuando el contenido no entra, flexbox lo parta en
       VARIAS COLUMNAS superpuestas en vez de dejar scrollear. Con nowrap
       el panel vuelve a ser una sola columna que desborda y scrollea. */
    .t-nav__inner { min-height: 100%; gap: 0; flex-wrap: nowrap; }
    /* Sin esto flexbox encoge los bloques para que "entren": el panel de
       categorías, que tiene overflow propio, se aplastaba hasta 8px de
       alto. Que nada se comprima y que desborde el panel, que ya scrollea. */
    .t-nav__inner > * { flex-shrink: 0; }
    .t-overlay { z-index: 59 !important; }
    body.t-nav-open .t-header { z-index: 60; }
    body.t-nav-open .t-tabbar,
    body.t-nav-open .t-floats,
    body.t-nav-open .t-hiring-guide,
    body.t-nav-open .le-bar { display: none !important; }

    /* ---- Cabecera ---- */
    .t-nav__head {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--t-border);
        background: var(--t-surface);
        position: sticky; top: 0; z-index: 2;
    }
    .t-logo--drawer .t-logo__text { font-size: 1.15rem; }
    .t-logo--drawer .t-logo__mark { width: 32px; height: 32px; border-radius: 9px; }
    .t-nav__close {
        flex: none; width: 36px; height: 36px; border-radius: 50%;
        border: 1px solid var(--t-border); background: var(--t-surface-2);
        color: var(--t-ink); font-size: 1.5rem; line-height: 1;
        display: grid; place-items: center;
    }
    .t-nav__close:hover { border-color: var(--t-primary); color: var(--t-primary); }

    /* ---- Bloque de cuenta ---- */
    .t-nav__account { display: block; padding: 14px 16px; border-bottom: 1px solid var(--t-border); }
    .t-nav__who { display: flex; align-items: flex-start; gap: 11px; }
    .t-nav__avatar {
        flex: none; width: 40px; height: 40px; border-radius: 13px;
        display: grid; place-items: center;
        background: var(--t-surface-2); font-size: 1.15rem;
    }
    .t-nav__avatar--staff { background: var(--t-primary); color: #fff; }
    .t-nav__who strong { display: block; font-size: .95rem; }
    .t-nav__who small { display: block; color: var(--t-muted); font-size: .72rem; line-height: 1.4; word-break: break-word; }
    .t-nav__role {
        display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
        background: var(--t-primary); color: #fff;
        font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    }
    .t-nav__auth { display: flex; gap: 8px; margin-top: 12px; }
    .t-nav__auth .t-btn { flex: 1; text-align: center; padding: 9px 10px; font-size: .78rem; }

    .t-nav__links { display: grid; gap: 1px; margin-top: 12px; }
    .t-nav__links a,
    .t-nav__links button {
        display: block; width: 100%; text-align: left;
        padding: 9px 11px; border: 0; border-radius: 10px;
        background: none; color: var(--t-ink);
        font: inherit; font-size: .82rem;
    }
    .t-nav__links a:hover,
    .t-nav__links button:hover { background: var(--t-surface-2); }

    /* ---- Accesos rápidos ---- */
    .t-nav__quick {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
        padding: 14px 16px; border-bottom: 1px solid var(--t-border);
    }
    .t-nav__quick button {
        position: relative;
        display: grid; gap: 4px; justify-items: center;
        padding: 11px 6px; border-radius: 13px;
        border: 1px solid var(--t-border); background: var(--t-surface-2);
        color: var(--t-ink); font: inherit; font-size: .68rem; font-weight: 600;
    }
    .t-nav__quick button:hover { border-color: var(--t-primary); color: var(--t-primary); }
    .t-nav__quick button > span:first-child { font-size: 1.2rem; }
    .t-nav__badge {
        position: absolute; top: 5px; right: 8px;
        min-width: 17px; height: 17px; padding: 0 4px;
        display: grid; place-items: center; border-radius: 999px;
        background: var(--t-primary); color: #fff;
        font-size: .58rem; font-weight: 800; font-style: normal; line-height: 1;
    }
    .t-nav__badge[hidden] { display: none; }

    /* ---- Rótulos de sección ---- */
    .t-nav__section-label {
        display: block; padding: 15px 16px 6px;
        color: var(--t-muted);
        font-size: .6rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
    }

    /* ---- Categorías y links ---- */
    .t-dept-toggle { margin: 12px 16px 0; border-radius: 12px; padding: 12px 15px; }
    .t-dept-panel { padding: 4px 8px; background: transparent; }
    .t-dept-list li > button { font-size: .85rem; padding: 10px 12px; }

    .t-nav__link { padding: 12px 16px; font-size: .88rem; border-bottom: 0; }
    .t-nav__link.is-current {
        background: var(--t-surface-2);
        color: var(--t-primary);
        box-shadow: inset 3px 0 0 var(--t-primary);
        font-weight: 700;
    }

    /* ---- Pie ---- */
    .t-nav__foot {
        display: block; margin-top: auto;
        padding: 16px; border-top: 1px solid var(--t-border);
        background: var(--t-surface-2);
    }
    .t-nav__foot .t-nav__section-label { padding: 0 0 6px; }
    .t-nav__store p { margin: 0 0 3px; color: var(--t-muted); font-size: .76rem; line-height: 1.5; }
    .t-nav__store-hours { font-size: .72rem !important; }
    .t-nav__store-actions { display: flex; gap: 8px; margin-top: 11px; }
    .t-nav__store-actions a,
    .t-nav__store-actions button {
        flex: 1; text-align: center;
        padding: 8px 10px; border-radius: 999px;
        border: 1px solid var(--t-border); background: var(--t-surface);
        color: var(--t-ink); font: inherit; font-size: .74rem; font-weight: 700;
    }
    .t-nav__store-actions a { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
    .t-nav__store-actions button:hover { border-color: var(--t-primary); color: var(--t-primary); }

    .t-nav__staff-link {
        display: block; margin-top: 14px; padding-top: 13px;
        border-top: 1px solid var(--t-border);
        color: var(--t-muted); font-size: .74rem;
    }
    .t-nav__staff-link:hover { color: var(--t-primary); }
}

/* =====================================================================
   CORRECCIONES DE PANTALLAS CHICAS
   ===================================================================== */

/* ---- 1. El atributo `hidden` tiene que ganarle a cualquier `display` ----
   Varias reglas de esta hoja fijan display (grid/flex/block) sobre elementos
   que el JS oculta con `el.hidden = true`. Como `display` explícito le gana
   al `display:none` que el navegador aplica por `hidden`, esos elementos
   seguían viéndose: las flechas ‹ › de la ficha en productos de una sola
   foto, la <img> rota cuando el producto no tiene imagen, las flechas del
   visor ampliado y —el más molesto— el campo "Dirección o zona" del carrito,
   que no desaparecía al elegir "Retiro en el local".
   Una sola regla los cubre a todos y evita que el problema vuelva. */
body.tienda [hidden] { display: none !important; }

/* ---- 2. La barra inferior tapaba el final del pie de página ----
   .t-main reserva 74px, pero el footer va DESPUÉS de <main>: al llegar
   abajo del todo, la línea de copyright quedaba escondida bajo la tabbar. */
@media (max-width: 720px) {
    .t-footer__legal {
        padding-bottom: calc(18px + 58px + env(safe-area-inset-bottom, 0px));
    }

    /* El pie del carrito/favoritos termina pegado al borde inferior: en
       iPhone quedaba debajo de la barra de gestos. */
    .t-cart-panel__foot {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---- 3. El encabezado ocupaba tres filas (176px = 22% de la pantalla) ----
   Logo, acciones y buscador caían cada uno en su renglón porque el conjunto
   no entraba a lo ancho. Achicando logo, botones y separaciones entran logo
   + acciones + hamburguesa en una fila y el buscador en la siguiente. */
@media (max-width: 720px) {
    /* El cambio de tema es el único botón del encabezado que ya está
       repetido en el panel lateral ("Modo oscuro", en Accesos rápidos).
       Sacándolo de acá entran logo + acciones + hamburguesa en una fila
       SIN achicar los botones, que en el celular es lo que importa. */
    #t-theme-toggle { display: none; }

    .t-header__bar { gap: 8px; }
    .t-logo__mark { width: 38px; height: 38px; border-radius: 11px; }
    .t-logo__text { font-size: 1.1rem; }
    .t-header__actions { gap: 4px; }
    .t-icon-btn { width: 40px; height: 40px; }
    .t-account__chev { display: none; }
    .t-burger { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
    .t-logo__mark { width: 32px; height: 32px; }
    .t-logo__text { font-size: .98rem; }
    .t-icon-btn { width: 36px; height: 36px; }
    .t-burger { width: 36px; height: 36px; }
}

/* =====================================================================
   FOTOS VERTICALES CORTADAS (tarjetas del catálogo y ficha)
   ---------------------------------------------------------------------
   Los marcos son cuadrados (aspect-ratio: 1/1) con overflow: hidden, y la
   foto tenía width/height al 100%. Pero como el marco es una grilla con
   place-items: center, el alto en porcentaje no se resolvía y el <img>
   terminaba tomando el alto natural de la foto: una foto de 800x1423
   quedaba de 611x1043 dentro de un marco de 613x613, o sea 431px cortados
   abajo (41% de la foto oculta) — y object-fit: contain nunca entraba a
   jugar, porque el elemento ya tenía la proporción de la foto.
   Con position:absolute + inset:0 el alto ya no depende de la grilla, y
   ahí sí `contain` centra la foto entera dentro del cuadrado.
   ===================================================================== */
.t-card__media img,
.t-pdp__stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =====================================================================
   LUPA DE LA FICHA DE PRODUCTO
   ---------------------------------------------------------------------
   Antes la foto entera se agrandaba dentro de su propio marco
   (transform: scale(1.75)): el producto se salía de cuadro y costaba
   mirar un detalle concreto. Ahora funciona como en las tiendas
   grandes: un recuadro marca qué zona estás mirando y el pedacito
   ampliado aparece en un panel al costado, sin tapar la foto original.
   ===================================================================== */
.t-pdp__stage { cursor: crosshair; }
.t-pdp__stage img { transition: none; }
.t-pdp__stage:hover img { transform: none; }

.t-pdp__lens {
    position: absolute; z-index: 4; pointer-events: none;
    border: 1px solid rgba(26, 6, 41, .45);
    background: rgba(255, 255, 255, .3);
    border-radius: 4px;
}

.t-pdp__zoom {
    position: absolute; top: 0; left: calc(100% + 22px); z-index: 30;
    width: 100%; aspect-ratio: 1 / 1;
    border: 1px solid var(--t-border); border-radius: var(--t-radius);
    background-color: var(--t-surface); background-repeat: no-repeat;
    box-shadow: var(--t-shadow);
    pointer-events: none;
}

/* Sin mouse (celular, tablet) o con la galería a una sola columna la lupa
   no tiene dónde ir: ahí se toca la foto y se abre el visor a pantalla
   completa, que ya existía y funciona mejor con el dedo. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
    .t-pdp__stage { cursor: pointer; }
    .t-pdp__lens,
    .t-pdp__zoom { display: none !important; }
}

/* ---- 4. Zonas de toque más generosas ----
   Enlaces de una sola línea (pie de página, teléfono de cada local) que
   quedaban en 20–26px de alto: con el dedo se erran seguido. */
@media (max-width: 720px) {
    .t-footer__col a { padding: 9px 0; }
    .t-store-card__rows li a { display: inline-block; padding: 7px 0; }
}

/* =====================================================================
   BARRA DE AVISO
   ===================================================================== */
.t-announce {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 44px 9px 18px;
    background: var(--t-ink);
    color: var(--t-bg);
    font-size: .8rem;
    line-height: 1.4;
    text-align: center;
}
.t-announce[hidden] { display: none; }
.t-announce a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.t-announce a[hidden] { display: none; }
.t-announce__close {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.1rem; line-height: 1;
    opacity: .65;
    cursor: pointer;
}
.t-announce__close:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* =====================================================================
   CHECKOUT: PASOS, DATOS GUARDADOS Y PENDIENTES
   ===================================================================== */
.t-checkout__steps {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.t-checkout__steps[hidden] { display: none; }
.t-checkout__steps li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background: var(--t-surface);
    font-size: .68rem;
    font-weight: 600;
    color: var(--t-muted);
    min-width: 0;
}
.t-checkout__steps li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t-checkout__steps i {
    flex: none;
    display: grid;
    place-items: center;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: var(--t-surface-2);
    font-style: normal;
    font-size: .66rem;
    font-weight: 800;
}
.t-checkout__steps .is-active {
    border-color: var(--t-primary);
    color: var(--t-ink);
}
.t-checkout__steps .is-active i { background: var(--t-primary); color: #fff; }
.t-checkout__steps .is-done { color: var(--t-success); border-color: rgba(79,158,123,.4); }
.t-checkout__steps .is-done i { background: var(--t-success); color: #fff; }

.t-checkout__saved {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(79,158,123,.35);
    border-radius: 13px;
    background: rgba(79,158,123,.08);
}
.t-checkout__saved[hidden] { display: none; }
.t-checkout__saved-icon { flex: none; color: var(--t-success); display: flex; }
.t-checkout__saved-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.t-checkout__saved-body strong { font-size: .84rem; color: var(--t-ink); }
.t-checkout__saved-body small {
    font-size: .74rem;
    color: var(--t-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t-checkout__pending {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    gap: 5px;
}
.t-checkout__pending[hidden] { display: none; }
.t-checkout__pending li {
    position: relative;
    padding-left: 18px;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--t-muted);
}
.t-checkout__pending li::before {
    content: "";
    position: absolute;
    left: 4px; top: .48em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--t-primary);
}

/* =====================================================================
   MODAL "MIS DATOS": CABECERA, PESTAÑAS Y PANELES
   ===================================================================== */
/* Cabecera fija: el título, el progreso y el cierre quedan a la vista
   aunque el cuerpo scrollee. */
.t-profile-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 14px 24px;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-border);
}
.t-profile-head__copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.t-profile-head__eyebrow { color: var(--t-primary); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.t-profile-head h4 { margin: 0; font-size: 1.34rem; letter-spacing: -.01em; }
.t-profile-head__hint { margin: 0; max-width: 62ch; color: var(--t-muted); font-size: .82rem; line-height: 1.5; }
.t-profile-modal .t-modal__close {
    position: static;
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--t-border);
    border-radius: 12px;
    background: var(--t-surface-2);
    color: var(--t-ink);
    font-size: 1rem;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.t-profile-modal .t-modal__close:hover { border-color: var(--t-primary); color: var(--t-primary); }
.t-profile-modal .t-modal__close:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 2px; }

.t-profile-progress {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    max-width: 440px;
}
.t-profile-progress__bar {
    height: 6px;
    border-radius: 999px;
    background: var(--t-surface-2);
    overflow: hidden;
}
.t-profile-progress__bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--t-primary), var(--t-secondary));
    transition: width .25s ease;
}
.t-profile-progress__text {
    font-size: .73rem;
    color: var(--t-muted);
}

/* La navegación lateral ocupa el alto del cuerpo y el pie de guardado
   queda pegado abajo, siempre en el mismo lugar en todas las secciones.
   `flex: none` + `min-height: 100%`: si el formulario es largo el cuerpo
   scrollea; si es corto, el pie igual queda abajo. */
.t-profile-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    flex: none;
    min-height: 100%;
    border: 1px solid var(--t-border);
    border-radius: 16px;
    /* `clip` recorta las esquinas como `hidden` pero no crea un contenedor
       de scroll: el pie pegajoso sigue anclado al cuerpo del modal. */
    overflow: clip;
}

.t-profile-tabs {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    background: var(--t-surface-2);
    border-right: 1px solid var(--t-border);
}
.t-profile-tabs::-webkit-scrollbar { display: none; }
.t-profile-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 10px 10px 13px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--t-muted);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background .15s ease;
}
/* Sección activa: barra fina a la izquierda, sin contornos pesados. */
.t-profile-tab::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 0;
    border-radius: 999px;
    background: var(--t-primary);
    transition: height .18s ease;
}
.t-profile-tab.is-active::before { height: 24px; }
.t-profile-tab__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--t-surface);
    color: var(--t-muted);
    transition: background .15s, color .15s;
}
.t-profile-tab__labels { min-width: 0; }
.t-profile-tab__labels b {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    color: var(--t-ink);
    line-height: 1.25;
    transition: color .15s;
}
.t-profile-tab__labels small {
    display: block;
    margin-top: 1px;
    font-size: .66rem;
    color: var(--t-muted);
    line-height: 1.3;
}
/* Punto de estado: se enciende cuando la sección ya tiene datos. */
.t-profile-tab__dot {
    flex: none;
    margin-left: auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--t-border);
    transition: background .15s ease, box-shadow .15s ease;
}
.t-profile-tab__dot.is-on { background: var(--t-success); box-shadow: none; }
.t-profile-tab:hover { background: var(--t-surface); }
.t-profile-tab:hover .t-profile-tab__labels b { color: var(--t-primary); }
.t-profile-tab:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 2px; }
.t-profile-tab.is-active { background: var(--t-surface); }
.t-profile-tab.is-active .t-profile-tab__icon { background: var(--t-primary); color: #fff; }
.t-profile-tab.is-active .t-profile-tab__labels b { color: var(--t-primary); }

.t-profile-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 22px 0;
    background: var(--t-surface);
}
#t-profile-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#t-profile-form[hidden] { display: none; }
.t-profile-content > .t-profile-pane { flex: 1; }
#t-password-form { display: flex; flex-direction: column; min-height: 0; }
#t-password-form .t-auth-submit { margin-top: 14px; }
/* Cambio de correo (lo arma tienda.js dentro de la pestaña Seguridad). */
.t-email-change { display: flex; flex-direction: column; gap: 13px; margin-top: 10px; padding: 18px 0 20px; border-top: 1px solid var(--t-border); }
.t-email-change[hidden] { display: none; }
#t-password-nonce { letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.t-profile-pane { display: flex; flex-direction: column; gap: 13px; }
.t-profile-pane[hidden] { display: none; }

.t-profile-pane__head { display: grid; gap: 3px; margin-bottom: 2px; }
.t-profile-pane__head h5 { margin: 0; font-size: 1.05rem; color: var(--t-ink); }
.t-profile-pane__head p { margin: 0; color: var(--t-muted); font-size: .8rem; line-height: 1.5; }

/* Errores y avisos en línea, debajo de su campo. */
.t-profile-field-error { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--t-danger); }
.t-profile-field-note { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--t-muted); }
.t-profile-field-note.is-warn { color: #b07d1f; }
.t-profile-req { color: var(--t-primary); font-weight: 800; }

.t-profile-modal .t-auth-field input:focus-visible,
.t-profile-modal .t-auth-field select:focus-visible,
.t-profile-modal .t-auth-field textarea:focus-visible {
    outline: 2px solid var(--t-primary);
    outline-offset: 1px;
}
.t-profile-modal .t-auth-field input[aria-invalid="true"],
.t-profile-modal .t-auth-field textarea[aria-invalid="true"] {
    border-color: var(--t-danger);
    background: rgba(207, 106, 112, .06);
}

/* Pie de guardado: estado del formulario y acción principal. */
.t-profile-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    gap: 6px;
    margin: auto -22px 0;
    padding: 12px 22px 16px;
    background: var(--t-surface);
    border-top: 1px solid var(--t-border);
}
.t-profile-actions__state { margin: 0; font-size: .76rem; color: var(--t-muted); }
.t-profile-actions__state[hidden] { display: none; }
.t-profile-actions__state.is-busy { color: var(--t-primary); }
.t-profile-actions .t-auth-modal__error,
.t-profile-actions .t-auth-modal__success { margin: 0; }
.t-profile-actions .t-auth-submit { margin-top: 2px; }

/* Botón ocupado: conserva su texto (es lo que identifica la acción) y
   suma un indicador girando al lado. */
.t-btn[aria-busy="true"] { cursor: progress; }
.t-btn[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: t-spin .7s linear infinite;
}
@keyframes t-spin { to { transform: rotate(360deg); } }

/* Visor de contraseña: el texto va dentro del campo. */
.t-password-wrap { position: relative; display: block; }
.t-password-wrap input { width: 100%; padding-right: 82px; box-sizing: border-box; }
.t-password-toggle {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--t-muted);
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
}
.t-password-toggle:hover { color: var(--t-primary); background: var(--t-surface-2); }
.t-password-toggle:focus-visible { outline: 2px solid var(--t-primary); outline-offset: 1px; }

/* Selector segmentado: envío a domicilio / retiro en el local */
.t-profile-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--t-surface-2);
}
.t-profile-segmented label {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--t-muted);
    text-align: center;
    cursor: pointer;
}
.t-profile-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.t-profile-segmented label:has(input:checked) {
    background: var(--t-surface);
    color: var(--t-primary);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
}
.t-profile-segmented label:has(input:focus-visible) { outline: 2px solid var(--t-primary); outline-offset: 1px; }

.t-profile-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--t-ink);
    cursor: pointer;
}
.t-profile-check input {
    margin-top: 2px;
    width: 18px; height: 18px;
    accent-color: var(--t-primary);
    cursor: pointer;
}

/* Enlace de Instagram del pie */
.t-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: .8rem;
    font-weight: 600;
}
.t-footer__social[hidden] { display: none; }

/* En el cajón del carrito en celular no entra "Comprobante" al lado del
   número: se apila y así ningún paso queda cortado con puntos suspensivos. */
@media (max-width: 430px) {
    .t-checkout__steps { gap: 5px; }
    .t-checkout__steps li {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 7px 4px;
        text-align: center;
    }
    .t-checkout__steps li span { white-space: normal; }
}

/* "Mis datos" en pantallas chicas: la navegación lateral pasa a una fila
   de píldoras que se desplaza con el dedo y queda pegada arriba mientras
   se completa el formulario. Va después de las reglas base para que
   estas ganen por orden de aparición. */
@media (max-width: 720px) {
    .t-profile-head { padding: 16px 14px 12px 16px; gap: 10px; }
    .t-profile-head h4 { font-size: 1.2rem; }
    .t-profile-head__hint { font-size: .78rem; }
    .t-profile-modal .t-auth-modal__body { padding: 0 12px 0; }
    .t-profile-layout { grid-template-columns: 1fr; }
    .t-profile-tabs {
        position: sticky;
        top: 0;
        z-index: 4;
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--t-border);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .t-profile-tabs::-webkit-scrollbar { display: none; }
    .t-profile-tab { flex: none; min-width: max-content; width: auto; padding: 9px 12px; }
    .t-profile-tab::before { display: none; }
    .t-profile-tab__icon { width: 28px; height: 28px; }
    .t-profile-tab__labels small { display: none; }
    .t-profile-tab__dot { margin-left: 6px; }
    .t-profile-content { padding: 16px 16px 0; }
    .t-profile-actions { margin: auto -16px 0; padding: 10px 16px 14px; }
    /* 16px: por debajo de eso iOS hace zoom solo al enfocar un campo. */
    .t-profile-modal .t-auth-field input,
    .t-profile-modal .t-auth-field select,
    .t-profile-modal .t-auth-field textarea { font-size: 1rem; }
    .t-password-toggle { font-size: .78rem; }
}

/* Teléfonos bajos: el subtítulo de la cabecera se va para que el
   formulario tenga alto útil. */
@media (max-width: 720px) and (max-height: 620px) {
    .t-profile-head__hint { display: none; }
    .t-profile-head { padding-bottom: 10px; }
}

/* =====================================================================
   RESALTE DE SECCION EN VISTA PREVIA (editor de tienda)
   Cuando el admin toca una pestana, la seccion correspondiente se
   resalta brevemente para que se entienda que esta cambiando.
   ===================================================================== */
.t-preview-flash {
    outline: 3px solid var(--t-primary, #ea0b80) !important;
    outline-offset: 5px;
    border-radius: 14px;
    animation: t-preview-flash-pulse 1.8s ease-out;
}
@keyframes t-preview-flash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(234, 11, 128, .4); }
    60%  { box-shadow: 0 0 0 22px rgba(234, 11, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 11, 128, 0); }
}

/* En vista previa embebida dentro de tienda.html se ocultan flotantes que tapan la portada */
.t-en-preview .t-floats,
.t-en-preview .t-hiring-guide,
.t-en-preview .le-bar {
    display: none !important;
}

/* =====================================================================
   PANTALLAS CHICAS — que la tienda entre entera
   ---------------------------------------------------------------------
   Objetivo: desde 190px de ancho (la mitad de un iPhone SE) hasta el
   escritorio, sin scroll horizontal, sin texto cortado y sin obligar a
   girar el teléfono. Va al final del archivo a propósito: así gana por
   orden de aparición sobre los bloques @media de más arriba sin tener
   que subir la especificidad con !important.
   ===================================================================== */

@media (max-width: 720px) {

    /*
     * El título de sección y el link "Ver todo" estaban en una fila con
     * gap de 20px: en un SE el h2 mide más que la pantalla y empujaba el
     * link fuera de cuadro. Ahora el link baja a su propia línea.
     */
    .t-section-heading,
    .t-row__head {
        flex-wrap: wrap;
        gap: 4px 12px;
        align-items: baseline;
    }

    .t-section-heading h2,
    .t-row__title {
        flex: 1 1 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .t-text-link {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 6px 0;
    }

    /* Los puntos del carrusel eran de 10px: imposible acertarles. El punto
       sigue midiendo lo mismo, pero el área táctil pasa a 28px. */
    .t-hero__dots {
        gap: 4px;
    }

    .t-hero__dots button {
        height: 28px;
        width: 24px;
    }

    .t-hero__dots button::before {
        inset: auto;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 10px;
        transform: translate(-50%, -50%);
        transition: background .2s;
    }

    .t-hero__dots button::after {
        inset: auto;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 10px;
        transform: translate(-50%, -50%) scaleX(0);
    }

    .t-hero__dots button.is-active {
        width: 34px;
    }

    .t-hero__dots button.is-active::before {
        width: 24px;
    }

    .t-hero__dots button.is-active::after {
        width: 24px;
        transform: translate(-50%, -50%) scaleX(var(--hero-progress, 0));
    }

    /* Casilla "solo con stock": el cuadrito mide 16px, el área tocable no */
    .t-switch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
    }

    .t-switch input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .t-tour__skip {
        min-height: 40px;
        padding: 8px 4px;
    }
}

@media (max-width: 430px) {

    /* Con menos de 430px el link ya no entra al lado del título ni cortado */
    .t-text-link {
        white-space: normal;
    }

    .t-section-heading h2 {
        font-size: clamp(1.3rem, 8vw, 2rem);
    }

    .t-row__title {
        font-size: clamp(1.25rem, 7.5vw, 1.85rem);
    }

    /* La ficha del carrusel se ajusta al ancho real en vez de 182px fijos */
    .t-carousel__track > .t-card {
        min-width: min(62vw, 182px);
        max-width: min(62vw, 182px);
    }
}

@media (max-width: 360px) {

    .t-main {
        padding: 10px 8px 34px;
    }

    /* Cuatro accesos rápidos no entran; van de a tres y siguen legibles */
    .t-quickcats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .t-quickcat {
        min-height: 74px;
        padding: 8px 3px 7px;
    }

    .t-quickcat__emoji {
        width: 24px;
        height: 24px;
        font-size: .8rem;
    }

    .t-collection-grid {
        gap: 6px;
    }

    .t-collection-card {
        min-height: 124px;
        padding: 12px 10px;
    }

    .t-collection-card strong {
        font-size: 1rem;
    }

    .t-grid {
        gap: 6px;
    }
}

@media (max-width: 300px) {

    .t-main {
        padding: 8px 5px 28px;
    }

    /* A 190px de ancho una grilla de dos columnas deja fichas de 88px:
       la foto se ve, el precio no. Mejor una columna y todo legible. */
    .t-grid,
    .t-collection-grid {
        grid-template-columns: 1fr;
    }

    .t-quickcats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .t-carousel__track > .t-card {
        min-width: 84%;
        max-width: 84%;
    }

    .t-footer__grid {
        grid-template-columns: 1fr;
        padding: 24px 10px 20px;
        gap: 18px;
    }

    .t-header__bar {
        padding: 8px 8px 10px;
        gap: 6px;
    }

    .t-slide {
        min-height: 320px;
        padding: 22px 14px;
    }

    .t-slide__title {
        font-size: clamp(1.5rem, 11vw, 2.4rem);
    }

}

/* Sucursales: la etiqueta "Abierto/Cerrado" no entra al lado del nombre en un
   teléfono, así que baja a su propia línea en vez de empujar la tarjeta.
   Va desde 430px porque en un iPhone SE (375px) ya no entraba. */
@media (max-width: 430px) {

    .t-store-card__head {
        flex-wrap: wrap;
        gap: 8px;
    }

    .t-store-card__state {
        margin-left: 0;
        white-space: normal;
    }
}

@media (max-width: 360px) {

    .t-store-card {
        padding: 12px;
        gap: 10px;
    }

    .t-store-card__rows li {
        font-size: .78rem;
        gap: 6px;
    }

    .t-store-card__actions > * {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* "Departamentos" en el menú: el texto y la flecha entran o se recortan,
       nunca se salen del panel. Sin `width: 100%`: dentro del cajón el botón
       tiene margen lateral de 16px y el 100% se le sumaba encima. Lo estira
       `align-items: stretch` del contenedor. */
    .t-dept-toggle {
        max-width: 100%;
        padding: 12px 14px;
        font-size: .78rem;
        justify-content: space-between;
        gap: 6px;
    }

    .t-dept-toggle > span:not(.t-dept-toggle__chev) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .t-dept-toggle__chev {
        flex: none;
    }
}

/* ---------------------------------------------------------------------
   Carrito en pantallas chicas y bajas
   ---------------------------------------------------------------------
   Dos problemas distintos:

   1) A lo ancho: la ficha del carrito es una grilla `54px 1fr auto`. Con
      190px de pantalla el `auto` del selector de cantidad (81px) se come
      todo y la columna del nombre queda en 0 — el título salía en vertical,
      una letra por renglón. Abajo de 360px la cantidad baja a su propia
      fila y el nombre recupera el ancho.

   2) A lo alto: el bloque de acciones (total + aclaración + tres botones)
      medía 267px de los 456px del panel, así que del carrito se veía una
      sola ficha. En pantallas bajas se compacta y la lista recupera el
      espacio.
   --------------------------------------------------------------------- */

@media (max-width: 360px) {

    .t-cart-item {
        grid-template-columns: 40px 1fr;
        gap: 8px;
        padding: 10px 0;
    }

    .t-cart-item__img,
    .t-cart-item__noimg {
        width: 40px;
        height: 40px;
    }

    .t-cart-item__qty {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .t-cart-panel__head,
    .t-cart-panel__body,
    .t-cart-panel__foot {
        padding-left: 10px;
        padding-right: 10px;
    }

    .t-cart-panel__actions {
        padding-left: 8px;
        padding-right: 8px;
    }

    .t-cart-bar {
        gap: 8px;
    }

    .t-cart-bar__label {
        font-size: 0.62rem;
    }

    .t-cart-bar__total {
        font-size: 1.05rem;
    }

    .t-cart-bar .t-btn--checkout {
        padding: 10px 12px;
        font-size: 0.78rem;
    }

    .t-cart-panel__head h3 {
        font-size: .95rem;
    }
}

@media (max-width: 300px) {
    .t-cart-bar {
        gap: 6px;
    }

    .t-cart-bar__label {
        font-size: 0.58rem;
    }

    .t-cart-bar__total {
        font-size: 0.95rem;
    }

    .t-cart-bar .t-btn--checkout {
        padding: 9px 8px;
        font-size: 0.72rem;
        border-radius: 8px;
    }

    .t-cart-item {
        grid-template-columns: 36px 1fr;
        gap: 6px;
    }

    .t-cart-item__img,
    .t-cart-item__noimg {
        width: 36px;
        height: 36px;
    }
}

@media (max-height: 700px) {

    .t-cart-panel__drawer {
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        max-height: 100vh;
        border-radius: 0;
    }

    .t-cart-panel__actions {
        padding-top: 7px;
        padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
    }

    .t-cart-bar .t-btn--checkout {
        padding: 10px 14px;
        font-size: .8rem;
    }
}

/* ---------------------------------------------------------------------
   Opciones "Envío a domicilio / Retiro en el local"
   ---------------------------------------------------------------------
   Las etiquetas del formulario de entrega son `display: grid` (una fila
   para el rótulo y otra para el campo). Las dos opciones de entrega
   heredaban esa regla, así que el `<input type="radio">` se estiraba a lo
   ancho de la columna — 92px de ancho por 13 de alto — y el texto caía
   abajo. `flex-direction: row` no alcanzaba: en una grilla no hace nada.
   --------------------------------------------------------------------- */

.t-checkout__radios label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    white-space: nowrap !important;
}

.t-checkout__radios input[type="radio"] {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
}

.t-checkout__radios label span {
    white-space: nowrap !important;
    flex: none !important;
}

/* Controles chicos del carrito: el dedo necesita 36px, el dibujo no cambia */
@media (hover: none) and (max-width: 820px), (pointer: coarse) and (max-width: 820px) {

    .t-cart-item__qty button {
        width: 34px;
        height: 34px;
    }

    .t-cart-item__remove {
        min-height: 32px;
        padding: 6px 0;
    }

    .t-crumbs button {
        min-height: 32px;
        padding: 6px 0;
    }
}

/* ---------------------------------------------------------------------
   Piso táctil de los controles chicos de la tienda
   ---------------------------------------------------------------------
   Con la escala tipográfica reducida en pantallas angostas (ver
   css/ajuste-pantallas.css) estos controles caían a 28px de alto. Se les
   pone un piso de 32px: alcanza para el dedo sin comerse la pantalla, que
   es lo que pasaría con los 44px de manual en un teléfono de 190px.
   --------------------------------------------------------------------- */

@media (hover: none) and (max-width: 820px), (pointer: coarse) and (max-width: 820px) {

    /* Enlaces y botones sueltos de la ficha de producto y del carrito:
       medían entre 12 y 28px de alto. */
    .t-pdp__perk a,
    .t-pdp__share button,
    [data-pdp-share],
    .t-checkout__copy {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
    }

    .t-filter,
    .t-store-card__copy,
    .t-store-card__map,
    .t-nav__staff-link,
    .t-select select,
    #t-sort {
        min-height: 32px;
    }
}

/* =====================================================================
   PRODUCCIÓN: FLUJO DE COMPRA A PRUEBA DE ERRORES
   ---------------------------------------------------------------------
   Todo lo de abajo existe para lo mismo: que nadie transfiera plata por un
   precio viejo, por un producto agotado o con la dirección mal escrita.
   Va al final porque son agregados sobre componentes que ya existen.
   ===================================================================== */

/* ============================================== VISTA DE SECCIÓN */
/* Cabecera de /ofertas, /novedades, /destacados y /regalos. La portada se
   esconde y el catálogo pasa a mostrar solo esa lista. */
.t-seccion-head {
    display: grid;
    gap: 8px;
    justify-items: start;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--t-border);
}
.t-seccion-head[hidden] { display: none; }

.t-seccion-head__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    padding: 7px 13px 7px 10px;
    border: 1px solid var(--t-border);
    border-radius: 999px;
    background: var(--t-surface);
    color: var(--t-muted);
    font-size: .8rem;
    font-weight: 600;
    min-height: 36px;
}
.t-seccion-head__back:hover {
    color: var(--t-primary);
    border-color: var(--t-primary);
}

.t-seccion-head__title {
    margin: 0;
    font: 700 clamp(1.7rem, 4.5vw, 2.7rem)/1.05 Georgia, serif;
    letter-spacing: -.03em;
}
.t-seccion-head__lead {
    margin: 0;
    max-width: 54ch;
    color: var(--t-muted);
    font-size: .92rem;
}

/* Rangos de precio: la primera pregunta real cuando se busca un regalo. */
.t-rangos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.t-rangos[hidden] { display: none; }
.t-rango {
    padding: 8px 15px;
    border: 1px solid var(--t-border);
    border-radius: 999px;
    background: var(--t-surface);
    color: var(--t-ink);
    font-size: .82rem;
    font-weight: 600;
    min-height: 38px;
}
.t-rango:hover { border-color: var(--t-primary); color: var(--t-primary); }
.t-rango.is-active {
    background: var(--t-primary);
    border-color: var(--t-primary);
    color: #fff;
}

@media (max-width: 520px) {
    .t-seccion-head { margin-bottom: 18px; padding-bottom: 16px; }
    .t-rango { padding: 7px 12px; font-size: .78rem; }
}

/* --------------------------------------------------- SALTAR AL CONTENIDO */
/* Invisible hasta que alguien llega con Tab; ahí baja del borde superior. */
.t-skip {
    position: fixed;
    top: -60px; left: 12px;
    z-index: 100;
    padding: 10px 18px;
    border-radius: 0 0 12px 12px;
    background: var(--t-primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--t-shadow-sm);
    transition: top .18s ease;
}
.t-skip:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }

/* El <main> recibe el foco cuando se usa el salto de arriba. Es un destino,
   no un control: mostrarle un recuadro alrededor de media página confunde. */
#t-main:focus { outline: none; }

/* ------------------------------------------------------ SIN CONEXIÓN */
/* Vive dentro de .t-header (que ya es sticky): no necesita posicionarse
   sola ni pelear por el top: 0 con la barra superior. */
.t-neterror {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: #4a2130;
    color: #ffe6f0;
    font-size: .8rem;
    font-weight: 500;
    text-align: center;
}
.t-neterror[hidden] { display: none; }

/* ------------------------------------- REINTENTAR CUANDO NO CARGA NADA */
.t-state__retry { margin-top: 14px; }

/* ============================================ AVISO DE CAMBIOS DEL CARRITO */
/* Franja ámbar arriba de los productos. No es un error del cliente, es una
   diferencia con el catálogo: el tono avisa sin culpar. */
.t-cart-alert {
    margin: 0 0 4px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--t-border);
    background: #fff6e8;
    color: #6b4310;
    display: grid;
    gap: 9px;
}
.t-cart-alert[hidden] { display: none; }
.t-cart-alert__head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #97600f;
}
.t-cart-alert__head strong { font-size: .88rem; }
.t-cart-alert__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
    font-size: .78rem;
    line-height: 1.45;
}
.t-cart-alert__list b { font-weight: 700; }
.t-cart-alert__fix {
    justify-self: start;
    background: #97600f;
    color: #fff;
    border: 0;
}
.t-cart-alert__fix:hover { background: #7d4e08; }

body.tienda[data-theme="dark"] .t-cart-alert { background: #3a2a12; color: #f6dfba; }
body.tienda[data-theme="dark"] .t-cart-alert__head { color: #ffc978; }
body.tienda[data-theme="dark"] .t-cart-alert__fix { background: #c08a2c; color: #2a1c06; }

/* Marca por producto, para saber en cuál cayó el aviso. */
.t-cart-item__tag {
    display: inline-block;
    margin: 3px 0 1px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.t-cart-item__tag--out { background: #fbe3e4; color: #a33b41; }
.t-cart-item__tag--price { background: #fff0d6; color: #8a5a0d; }
.t-cart-item.is-baja,
.t-cart-item.is-sin-stock { opacity: .62; }
.t-cart-item.is-baja .t-cart-item__price strong,
.t-cart-item.is-sin-stock .t-cart-item__price strong { text-decoration: line-through; }

body.tienda[data-theme="dark"] .t-cart-item__tag--out { background: #4a2126; color: #ffb9bd; }
body.tienda[data-theme="dark"] .t-cart-item__tag--price { background: #3f2f13; color: #ffcd85; }

/* ================================================== ERRORES POR CAMPO */
/* Debajo del campo y en rojo: el cliente ve exactamente cuál corregir sin
   tener que leer una lista arriba y buscarlo. */
.t-field-error,
.t-field-hint {
    display: block;
    margin-top: 5px;
    font-size: .72rem;
    line-height: 1.4;
}
.t-field-error { color: var(--t-danger); font-weight: 600; }
.t-field-hint { color: var(--t-muted); }
.t-field-error[hidden],
.t-field-hint[hidden] { display: none; }

.t-checkout__fields input.is-invalid,
.t-checkout__fields select.is-invalid {
    border-color: var(--t-danger);
    background: rgba(207, 106, 112, .06);
}
.t-checkout__fields input.is-invalid:focus {
    outline: 2px solid var(--t-danger);
    outline-offset: 1px;
}

/* Los pendientes pasan a ser botones: se tocan y llevan al campo. */
.t-checkout__pending li button {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    min-height: 24px;
}
.t-checkout__pending li button:hover { color: var(--t-primary); }
.t-checkout__pending li button:focus-visible {
    outline: 2px solid var(--t-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* El label del comprobante se puede alcanzar con Tab: tiene que verse. */
.t-checkout__upload-label:focus-visible {
    outline: 2px solid var(--t-primary);
    outline-offset: 2px;
}

/* ================================================== REVISIÓN FINAL */
.t-review-modal .t-modal__card {
    width: min(520px, 100%);
    grid-template-columns: minmax(0, 1fr);
}
.t-review__body { padding: 26px 26px 6px; }
.t-review__eyebrow {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--t-primary);
    margin-bottom: 6px;
}
.t-review__body h4 { margin: 0 0 6px; font-size: 1.3rem; }
.t-review__lead { margin: 0 0 18px; color: var(--t-muted); font-size: .85rem; }

.t-review__block {
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    padding: 13px 15px;
    margin-bottom: 12px;
    background: var(--t-surface-2);
}
.t-review__block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.t-review__block-head h5 {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.t-review__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    font-size: .84rem;
}
.t-review__items li { display: flex; gap: 9px; align-items: baseline; }
.t-review__item-qty { flex: none; font-weight: 700; color: var(--t-primary); min-width: 26px; }
.t-review__item-name { flex: 1; min-width: 0; }
.t-review__item-price { flex: none; font-weight: 600; }
.t-review__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed var(--t-border);
    font-size: .82rem;
    color: var(--t-muted);
}
.t-review__total strong { font-size: 1.05rem; color: var(--t-primary); }

.t-review__data { margin: 0; display: grid; gap: 7px; }
.t-review__data > div { display: grid; grid-template-columns: 108px 1fr; gap: 10px; align-items: baseline; }
.t-review__data dt { font-size: .74rem; color: var(--t-muted); }
.t-review__data dd { margin: 0; font-size: .85rem; word-break: break-word; }

.t-review__proof { display: flex; align-items: center; gap: 11px; }
.t-review__proof img {
    width: 54px; height: 54px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--t-border);
    flex: none;
}
.t-review__proof span { font-size: .82rem; display: grid; gap: 2px; min-width: 0; }
.t-review__proof small { color: var(--t-muted); font-size: .72rem; }
.t-review__proof-missing { color: var(--t-danger); font-weight: 600; }

.t-review__warn {
    display: flex;
    gap: 8px;
    margin: 0 0 6px;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--t-muted);
}
.t-review__warn .icon-svg { flex: none; margin-top: 2px; }

.t-review__actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 14px 26px 20px;
    background: var(--t-surface);
    border-top: 1px solid var(--t-border);
}
.t-review__actions .t-btn { flex: 1; justify-content: center; }

@media (max-width: 520px) {
    .t-review__body { padding: 22px 18px 6px; }
    .t-review__actions { padding: 12px 18px 16px; flex-direction: column-reverse; }
    .t-review__data > div { grid-template-columns: 94px 1fr; gap: 8px; }
}

/* ---------- Factura (opcional) en la revisión final ---------- */
.t-fact { display: grid; gap: 10px; }
.t-fact__switch {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; padding: 2px 0;
}
/* El input real queda DENTRO del label (position:relative) para que enfocarlo no desplace el modal. */
.t-fact__switch input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.t-fact__track {
    flex: none; position: relative;
    width: 44px; height: 26px; border-radius: 999px;
    background: var(--t-border);
    transition: background .18s ease;
}
.t-fact__track::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    transition: transform .18s ease;
}
.t-fact__switch input:checked + .t-fact__track { background: var(--t-primary); }
.t-fact__switch input:checked + .t-fact__track::after { transform: translateX(18px); }
.t-fact__switch input:focus-visible + .t-fact__track { outline: 2px solid var(--t-primary); outline-offset: 3px; }
.t-fact__text { display: grid; gap: 1px; min-width: 0; }
.t-fact__title { font-size: .92rem; font-weight: 700; color: var(--t-ink); }
.t-fact__text small { font-size: .74rem; color: var(--t-muted); line-height: 1.4; }

.t-fact__card {
    position: relative;
    border: 1px solid var(--t-border);
    border-left: 3px solid var(--t-primary);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface);
    padding: 12px 14px;
}
.t-fact__empty {
    display: grid; justify-items: start; gap: 8px;
    padding: 12px 14px;
    border: 1px dashed var(--t-border); border-radius: var(--t-radius-sm);
    background: var(--t-surface);
}
.t-fact__empty p { margin: 0; font-size: .8rem; color: var(--t-muted); }
.t-fact__notes {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 6px;
    font-size: .74rem; line-height: 1.45; color: var(--t-muted);
}
.t-fact__notes li { display: flex; gap: 8px; align-items: flex-start; }
.t-fact__notes .icon-svg { flex: none; margin-top: 2px; color: var(--t-primary); }

/* En horizontal con poca altura, reserva espacio para leer el resumen. */
@media (orientation: landscape) and (max-height: 520px) {
    .t-review__body { padding: 16px 18px 8px; }
    .t-review__actions {
        flex-direction: row;
        gap: 8px;
        padding: 8px 12px 10px;
    }
    .t-review__actions .t-btn {
        min-height: 36px;
        padding: 8px 10px;
        font-size: .78rem;
    }
}

/* =====================================================================
   SECCIONES CON DIRECCIÓN PROPIA — migas y enlaces
   ---------------------------------------------------------------------
   Los "Ver todos" pasaron de <button> a <a href="…/ofertas"> para que se
   puedan copiar y abrir en otra pestaña. Eso les cambia el display por
   defecto, así que hay que devolverles la caja que tenían.
   ===================================================================== */
a.t-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

a.t-text-link:hover { text-decoration: underline; }

/* El <a> del banner de regalos era un <button>: sin esto pierde el centrado
   del texto y el alto que le daba el botón. */
a.t-btn { text-decoration: none; }

/* Migas de la sección. Reusa .t-crumbs de la ficha de producto, que sólo
   estilaba <button> porque ahí las migas no eran enlaces. */
.t-crumbs a {
    color: var(--t-primary);
    text-decoration: none;
}
.t-crumbs a:hover { text-decoration: underline; }
#t-seccion-crumbs { margin-bottom: 4px; }
#t-seccion-crumbs[hidden] { display: none; }

/* "Nuestros locales" en la portada lleva su enlace a la derecha del título. */
.t-stores-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.t-stores-header__link { flex: none; }

/* Dentro de una sección sobra el enlace que lleva a esa misma sección. */
body.t-en-seccion .t-stores-header__link { display: none; }

@media (max-width: 560px) {
    .t-stores-header { align-items: flex-start; }
}

/* =====================================================================
   CATÁLOGO CON RIEL DE FILTROS
   ---------------------------------------------------------------------
   Dos columnas en escritorio (filtros | grilla). En el celular el riel
   pasa a ser un panel que se abre desde el botón "Filtrar", porque una
   columna de filtros sobre 375px no deja lugar para los productos.
   ===================================================================== */
.t-catalog__cuerpo {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.t-catalog__main { min-width: 0; }

/* ── Riel ─────────────────────────────────────────────────────────── */
.t-riel {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 18px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    /* Explícito, y no por descarte. Con `overflow-y: auto` el eje X computa
       solo a `auto`, así que un nombre largo ("Las Chicas Superpoderosas")
       le metía una barra horizontal al panel. Acá no hay nada que scrollear
       de costado: lo que sea más ancho, que corte. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* El riel manda sobre su ancho de columna: sin esto, el contenido más
       ancho estira la grilla y empuja el catálogo. */
    min-width: 0;
}
.t-riel[hidden] { display: none; }

.t-riel__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.t-riel__cab h3 {
    margin: 0;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--t-muted);
}
.t-riel__limpiar {
    border: 0;
    background: none;
    color: var(--t-primary);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 0;
}
.t-riel__limpiar:hover { text-decoration: underline; }

.t-riel__grupo { display: grid; gap: 7px; }
.t-riel__grupo + .t-riel__grupo {
    padding-top: 16px;
    border-top: 1px solid var(--t-border);
}

.t-riel__titulo {
    margin: 0;
    font-size: .84rem;
    font-weight: 700;
    color: var(--t-ink);
}

.t-riel__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.t-riel__resto[hidden] { display: none; }

.t-riel__op {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--t-ink);
    font: inherit;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}
.t-riel__op:hover { background: rgba(0, 0, 0, .05); }

/* El nombre es lo que se achica. Sin `min-width: 0` un item flex no baja
   del ancho de su contenido, así que "Las Chicas Superpoderosas" empujaba
   el panel entero en vez de cortarse. */
.t-riel__op > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t-riel__op em {
    font-style: normal;
    font-size: .72rem;
    color: var(--t-muted);
    flex: none;
}
.t-riel__op.is-activo {
    background: var(--t-primary);
    color: #fff;
    font-weight: 600;
}
.t-riel__op.is-activo em { color: rgba(255, 255, 255, .82); }

.t-riel__mas {
    justify-self: start;
    border: 0;
    background: none;
    color: var(--t-primary);
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 8px;
}
.t-riel__mas:hover { text-decoration: underline; }

/* Grid y no flex. En flex los dos <input> + el separador + el botón "Ir"
   no entraban en los ~210px útiles de la columna, y el "Hasta" quedaba
   cortado. Con grid las dos casillas comparten la fila y el botón baja a
   la suya: entra siempre, sin importar el ancho de la columna. */
.t-riel__precio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 5px;
    margin-top: 4px;
}
.t-riel__precio input {
    min-width: 0;
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--t-border);
    background: var(--t-bg);
    color: var(--t-ink);
    font: inherit;
    font-size: .78rem;
}
.t-riel__ir {
    /* Fila propia, de punta a punta: es lo único que garantiza que no
       compita por ancho con las dos casillas. */
    grid-column: 1 / -1;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--t-border);
    background: var(--t-bg);
    color: var(--t-ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.t-riel__ir:hover { border-color: var(--t-primary); color: var(--t-primary); }

.t-riel__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    cursor: pointer;
    padding: 4px 0;
}
.t-riel__check em {
    font-style: normal;
    margin-left: auto;
    font-size: .72rem;
    color: var(--t-muted);
}

/* ── Chips de lo filtrado ─────────────────────────────────────────── */
.t-filtros-activos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.t-filtros-activos[hidden] { display: none; }

.t-chip-activo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--t-primary);
    background: rgba(132, 89, 232, .12);
    color: var(--t-primary);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.t-chip-activo:hover { background: rgba(132, 89, 232, .2); }

.t-chip-limpiar {
    border: 0;
    background: none;
    color: var(--t-muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 5px 4px;
}
.t-chip-limpiar:hover { color: var(--t-ink); }

/* ── Barra: vista y compartir ─────────────────────────────────────── */
.t-vista {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 10px;
    border: 1px solid var(--t-border);
    background: var(--t-bg);
}
.t-vista__b {
    display: grid;
    place-items: center;
    width: 32px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--t-muted);
    cursor: pointer;
}
.t-vista__b:hover { color: var(--t-ink); }
.t-vista__b.is-activa { background: var(--t-primary); color: #fff; }

.t-compartir-busqueda {
    width: 34px;
    height: 34px;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background: var(--t-bg);
}

/* El botón "Filtrar" sólo hace falta cuando el riel está plegado. */
.t-btn--filtros { display: none; }

/* ── Vista lista ──────────────────────────────────────────────────── */
/* La tarjeta pasa a fila: foto chica a la izquierda y los datos al lado.
   Sirve para comparar precios cuando ya se sabe qué se busca. */
.t-grid--lista { grid-template-columns: 1fr !important; }
.t-grid--lista .t-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.t-grid--lista .t-card__media { aspect-ratio: 1; }
.t-grid--lista .t-card__body { padding: 10px 12px 10px 0; }

/* ── Paginado ─────────────────────────────────────────────────────── */
.t-pag {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 36px 0 18px;
}
.t-pag[hidden] { display: none; }

.t-pag__n,
.t-pag__flecha {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    border-radius: 9px;
    border: 1px solid var(--t-border);
    background: var(--t-bg);
    color: var(--t-ink);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}
.t-pag__n:hover:not(.is-actual),
.t-pag__flecha:hover:not(:disabled) { border-color: var(--t-primary); color: var(--t-primary); }

.t-pag__n.is-actual {
    background: var(--t-primary);
    border-color: var(--t-primary);
    color: #fff;
    cursor: default;
}
.t-pag__flecha:disabled { opacity: .4; cursor: not-allowed; }
.t-pag__hueco { padding: 0 2px; color: var(--t-muted); }

/* ── Sugerencias del buscador ─────────────────────────────────────── */
.t-search { position: relative; }

.t-search__sugg {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 62vh;
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    box-shadow: 0 20px 46px rgba(16, 12, 38, .22);
    padding: 5px;
}
.t-search__sugg[hidden] { display: none; }

.t-sugg {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--t-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.t-sugg:hover,
.t-sugg.is-marcada { background: rgba(132, 89, 232, .12); }

.t-sugg__ico { flex: none; color: var(--t-muted); display: inline-flex; }
.t-sugg__txt { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.t-sugg__txt strong {
    font-size: .87rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t-sugg__txt em { font-style: normal; font-size: .72rem; color: var(--t-muted); }
.t-sugg__extra { flex: none; font-size: .78rem; color: var(--t-muted); font-weight: 600; }

/* ── Celular: el riel se abre como panel ──────────────────────────── */
@media (max-width: 900px) {
    .t-catalog__cuerpo { grid-template-columns: minmax(0, 1fr); }
    .t-btn--filtros { display: inline-flex; }

    .t-riel {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        z-index: 1200;
        max-height: 82vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(101%);
        transition: transform .22s ease;
        box-shadow: 0 -18px 44px rgba(16, 12, 38, .3);
    }
    body.t-riel-abierto .t-riel { transform: translateY(0); }
    /* Sin esto el panel abierto deja la página scrolleando por detrás. */
    body.t-riel-abierto { overflow: hidden; }

    .t-grid--lista .t-card { grid-template-columns: 92px minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .t-catalog__tools { flex-wrap: wrap; gap: 6px; }
    .t-pag__n, .t-pag__flecha { min-width: 32px; height: 32px; font-size: .78rem; }
}

/* ── "Avisame cuando vuelva" ──────────────────────────────────────
   Sólo aparece con el producto agotado. Backend: sql/avisos_reposicion.sql */
.t-avisame {
    margin: 14px 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px dashed var(--t-border);
    background: var(--t-bg);
}
.t-avisame[hidden] { display: none; }

.t-avisame__txt { margin: 0 0 10px; font-size: .86rem; color: var(--t-ink); }

.t-avisame__form { display: flex; gap: 8px; flex-wrap: wrap; }
.t-avisame__form[hidden] { display: none; }
.t-avisame__form input {
    flex: 1 1 190px;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--t-border);
    background: var(--t-surface);
    color: var(--t-ink);
    font: inherit;
    font-size: .86rem;
}
.t-avisame__form button { flex: none; }

.t-avisame__estado { margin: 8px 0 0; font-size: .8rem; color: var(--t-muted); }
.t-avisame__estado[data-tono="ok"] { color: #2f9e58; font-weight: 600; }
.t-avisame__estado[data-tono="warn"] { color: var(--warn-ink); }
.t-avisame__estado[data-tono="error"] { color: #d14343; }

/* Enlace a la ficha propia de cada local (/locales/centro). */
.t-store-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--t-primary);
    text-decoration: none;
}
.t-store-card__link:hover { text-decoration: underline; }
.t-store-card__link::after { content: "→"; }

/* =====================================================================
   LEGIBILIDAD EN MODO OSCURO
   ---------------------------------------------------------------------
   Estas reglas fijan un color de texto oscuro y NO declaran fondo, asi
   que heredan el del tema. En claro se leen bien; en oscuro quedan casi
   del mismo valor que el fondo y el texto desaparece.

   La contraparte de abajo conserva el tono (el rojo sigue siendo rojo,
   el verde verde) y solo sube la luminosidad hasta que contrasta. Se
   generaron con el barrido de scripts/, revisando uno por uno que el
   elemento no tuviera un fondo propio del contenedor.
   ===================================================================== */
body[data-theme='dark'] .t-card__price--oferta strong { color: #e9909b; }
body[data-theme='dark'] .t-auth-modal__error { color: #e49696; }
body[data-theme='dark'] .t-avisame__estado[data-tono="warn"] { color: #f4b586; }
body[data-theme='dark'] .t-avisame__estado[data-tono="error"] { color: #e29898; }
body[data-theme='dark'] .t-resena-form__msg.is-error { color: #e29898; }

/* =====================================================================
   PIE: IDENTIFICACION DEL PROVEEDOR
   ---------------------------------------------------------------------
   Ley 4868/2013 de Comercio Electronico: quien vende tiene que decir
   quien es, donde esta y como se lo contacta. Y Ley 1334/1998 de Defensa
   del Consumidor: el precio final tiene que ser claro, de ahi el
   "IVA incluido".
   ===================================================================== */
.t-footer__fiscal,
.t-footer__precios {
    margin: 0 0 4px;
    font-size: .78rem;
    opacity: .78;
}

.t-footer__legal a {
    color: inherit;
    text-decoration: none;
    opacity: .85;
}
.t-footer__legal a:hover { text-decoration: underline; opacity: 1; }

/* Las flechitas de <input type=number> comen ~18px de ancho en el riel y
   no sirven: el precio se escribe, no se sube de a uno. */
.t-riel__precio input::-webkit-outer-spin-button,
.t-riel__precio input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.t-riel__precio input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* =====================================================================
   BLOQUES TEMÁTICOS  (.t-tema)
   ---------------------------------------------------------------------
   Un banner ancho y, abajo, ocho productos. El panel va sobre
   --t-surface-2 y las tarjetas sobre --t-surface: ese salto de fondo es
   el que separa el bloque del resto de la portada sin tener que meter
   una línea divisoria ni romper el ancho de .t-main.

   El banner acepta una foto (la pone tienda.js como background-image en
   línea, así pisa el degradado de acá). Sin foto queda el fondo de la
   marca, que es el estado en el que vive mientras nadie cargue nada.
   ===================================================================== */
.t-tema {
    margin: 0 0 64px;
    padding: clamp(16px, 2.2vw, 28px);
    border-radius: var(--t-radius);
    background: var(--t-surface-2);
}
/* La sección se prende y apaga con [hidden]; sin esto cualquier `display`
   que llegue después la volvería a mostrar. */
.t-tema[hidden] { display: none; }

.t-tema__banner {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 210px;
    padding: clamp(24px, 3.2vw, 42px);
    border-radius: 22px;
    background-color: var(--t-accent);
    background-image: linear-gradient(112deg, var(--t-accent) 0%, var(--t-surface) 58%, var(--t-accent) 100%);
    background-size: cover;
    background-position: center;
    color: var(--t-ink);
    transition: transform .18s, box-shadow .18s;
}
.t-tema__banner:hover { transform: translateY(-3px); box-shadow: var(--t-shadow); }

/* Mismo recurso que las tarjetas de colección: un círculo claro que da
   profundidad sin depender de que haya una imagen cargada. */
.t-tema__banner::after {
    content: "";
    position: absolute;
    right: -70px; top: -95px;
    width: 265px; height: 265px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    pointer-events: none;
}

.t-tema__art {
    position: absolute;
    right: -14px; bottom: -26px;
    width: min(230px, 36%);
    opacity: .55;
    transform: rotate(-8deg);
    pointer-events: none;
}
.t-tema__art img {
    width: 100%; height: auto;
    filter: drop-shadow(0 14px 12px rgba(60, 7, 42, .16));
}

.t-tema__copy {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 560px;
}
/* Misma tipografía que .t-section-kicker, pero con color propio: sobre el
   rosa del banner el --t-secondary de aquella clase daba 2.22 de contraste. */
.t-tema__kicker {
    display: block;
    color: var(--t-ink);
    opacity: .68;
    font: 700 .66rem/1.2 "Trebuchet MS", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.t-tema__title {
    margin: 9px 0 11px;
    font-size: clamp(1.95rem, 4.2vw, 3.3rem);
    line-height: .95;
}
.t-tema__text {
    display: block;
    max-width: 430px;
    /* --t-muted está pensado para el fondo de la página; sobre el banner
       daba 3.27. La tinta con opacidad se oscurece o se aclara sola según
       el tema y mantiene el peso de bajada. */
    color: var(--t-ink);
    opacity: .75;
    font-size: .88rem;
    line-height: 1.6;
}
.t-tema__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 19px;
    padding: 11px 21px;
    border-radius: 999px;
    /* Los dos tokens se invierten juntos: en claro queda pastilla oscura
       con texto claro y en oscuro al revés. Fijar uno solo de los dos (que
       es lo que había acá) deja texto blanco sobre pastilla blanca apenas
       se prende el modo oscuro. */
    background-color: var(--t-ink);
    color: var(--t-bg);
    font: 700 .76rem "Trebuchet MS", sans-serif;
    letter-spacing: .05em;
    transition: background-color .16s, transform .16s;
}
.t-tema__banner:hover .t-tema__cta { background-color: var(--t-primary); }

/* --- Con foto cargada -------------------------------------------------
   La foto la elige el negocio y puede ser clara, oscura o un cartel lleno
   de texto: el velo es lo que garantiza que el título se siga leyendo
   arriba de cualquiera de las tres. */
.t-tema__banner--foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(26, 6, 41, .84) 0%, rgba(26, 6, 41, .56) 46%, rgba(26, 6, 41, .14) 100%);
}
.t-tema__banner--foto::after { display: none; }
.t-tema__banner--foto .t-tema__art { display: none; }
.t-tema__banner--foto .t-tema__title { color: #fffdfd; }
.t-tema__banner--foto .t-tema__kicker { color: #fffdfd; opacity: .82; }
.t-tema__banner--foto .t-tema__text { color: #fffdfd; opacity: .87; }
/* Sobre el velo (que es oscuro en los dos temas) la pastilla es siempre
   clara con texto oscuro: acá los colores van fijos a propósito, porque
   seguir a --t-ink la volvería ilegible en modo oscuro. */
.t-tema__banner--foto .t-tema__cta { background-color: #fffdfd; color: #1a0629; }
.t-tema__banner--foto:hover .t-tema__cta { background-color: #fffdfd; color: #1a0629; }

.t-tema__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: clamp(16px, 2.2vw, 26px);
}

@media (max-width: 980px) {
    .t-tema__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .t-tema { margin-bottom: 40px; padding: 13px; }
    .t-tema__banner { min-height: 160px; padding: 21px; border-radius: 17px; }
    .t-tema__art { right: -12px; bottom: -18px; width: min(140px, 38%); }
    .t-tema__text { font-size: .8rem; }
    .t-tema__cta { margin-top: 15px; padding: 10px 17px; }
    .t-tema__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .t-tema__banner, .t-tema__cta { transition: none; }
    .t-tema__banner:hover { transform: none; }
}

/* =====================================================================
   MENÚ — MEJORAS
   ---------------------------------------------------------------------
   Íconos en las secciones, estado abierto/cerrado del local y la
   subsección de ayuda dentro del pie del panel. Todo vive en el mismo
   panel de siempre; no cambia la barra horizontal del escritorio.
   ===================================================================== */
.t-nav__link { display: flex; align-items: center; gap: 10px; }
.t-nav__link__ico { flex: none; opacity: .75; }
.t-nav__link:hover .t-nav__link__ico { opacity: 1; }

/* Ayuda (pie del panel): mismas piezas que una t-nav__link normal,
   pero más discreta porque no es navegación principal. */
.t-nav__link--help { font-size: .8rem; padding: 10px 16px; color: var(--t-muted); }
.t-nav__link--help:hover { color: var(--t-primary); }

/* Punto de estado del local junto al horario */
.t-nav__store-status {
    margin: 4px 0 0;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.t-nav__store-status.is-open { color: #1c9e5f; }
.t-nav__store-status.is-closed { color: var(--t-danger, #d64560); }

/* La grilla de accesos rápidos pasa a 4 botones cuando hay "Pedidos" */
@media (max-width: 720px) {
    .t-nav__quick { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    /* En pantallas muy chicas el rótulo de "Modo oscuro" ya no entra:
       se deja solo el ícono, como los otros tres botones. */
    @media (max-width: 350px) {
        #t-nav-theme-label { display: none; }
    }
}

/* Barra inferior móvil: ahora son 5 accesos */
@media (max-width: 720px) {
    .t-tabbar { grid-template-columns: repeat(5, 1fr); }
    .t-tabbar button { font-size: .58rem; padding: 8px 2px; }
}

/* =====================================================================
   CELULARES CHICOS (320–375px: iPhone SE y similares)
   ---------------------------------------------------------------------
   Ajustes de densidad para que nada se corte ni desborde en la
   pantalla más chica que se usa en la práctica.
   ===================================================================== */
@media (max-width: 380px) {
    /* Explorar: menos aire, tarjetas de una sola línea de texto */
    .t-exp-card { padding: 14px 12px; gap: 10px; }
    .t-exp-card__ico { width: 38px; height: 38px; padding: 9px; }
    .t-exp-card strong { font-size: .92rem; }
    .t-exp-card small { font-size: .72rem; }

    /* Fotos del local: una entera visible, sin media escondida */
    .t-store-card__fotos { grid-auto-columns: 86%; }
}

/* =====================================================================
   APARTADO EXPLORAR (/explorar)
   ---------------------------------------------------------------------
   Menú limpio con los cinco caminos de la tienda. En el celular es una
   sola columna de tarjetas gordas (fáciles de tocar con el pulgar); a
   partir de 480px pasa a dos columnas y en escritorio a tres.
   ===================================================================== */
.t-explorar { padding-top: 6px; }
.t-explorar__head {
    text-align: center;
    margin: 18px auto 26px;
    max-width: 560px;
    display: grid; gap: 8px;
}
.t-explorar__head h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.12; margin: 0; }
.t-explorar__lead { color: var(--t-muted); font-size: .95rem; line-height: 1.55; margin: 0; }

.t-explorar__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto;
}
.t-exp-card {
    display: flex; align-items: center; gap: 14px;
    width: 100%; text-align: left;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface);
    box-shadow: var(--t-shadow-sm);
    padding: 18px 18px;
    font-family: inherit; color: var(--t-ink);
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.t-exp-card:hover { border-color: var(--t-primary); transform: translateY(-2px); box-shadow: var(--t-shadow); }
.t-exp-card:hover .t-exp-card__ico { color: var(--t-primary); }
.t-exp-card__ico {
    flex: none;
    width: 44px; height: 44px; padding: 11px;
    border-radius: 13px;
    background: var(--t-surface-2);
    color: var(--t-ink);
}
.t-exp-card strong { display: block; font-size: 1.02rem; line-height: 1.2; }
.t-exp-card small { display: block; color: var(--t-muted); font-size: .78rem; margin-top: 3px; }
.t-exp-card::after {
    content: '›';
    margin-left: auto;
    font-size: 1.5rem; line-height: 1;
    color: var(--t-muted);
    transition: transform .15s, color .15s;
}
.t-exp-card:hover::after { transform: translateX(3px); color: var(--t-primary); }

/* Acento por tarjeta (borde izquierdo): orienta de un vistazo sin
   necesitar imágenes, que es lo que hace que este apartado cargue
   instantáneo incluso con mala señal. */
.t-exp-card--ofertas { border-left: 4px solid #e2543e; }
.t-exp-card--novedades { border-left: 4px solid #b06be0; }
.t-exp-card--regalos { border-left: 4px solid var(--t-primary); }
.t-exp-card--catalogo { border-left: 4px solid #3e8ee2; }
.t-exp-card--locales { border-left: 4px solid #2ea36f; }
.t-exp-card--colecciones { border-left: 4px solid #e2a53e; }

@media (min-width: 480px) {
    .t-explorar__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .t-explorar__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   BLOQUE "ESTAMOS CONTRATANDO"
   Ventana completa de la búsqueda laboral. Se abre desde la guía
   flotante y su contenido se controla desde el panel (10b).
   ===================================================================== */

/* Cuerpo: tarjetas con lo que pide el puesto. Se apilan en el celular,
   pasan a dos columnas en tablet y a tres en escritorio. */
.t-hiring__grid {
    margin-top: 18px;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
.t-hiring__card {
    border: 1px solid var(--t-border);
    border-radius: 12px;
    background: var(--t-surface-2);
    padding: 14px 16px;
}
.t-hiring__card h4 {
    margin: 0 0 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t-primary);
}
.t-hiring__card p {
    margin: 0;
    color: var(--t-muted);
    font-size: .88rem;
    line-height: 1.5;
}
.t-hiring__lista {
    margin: 0;
    padding-left: 18px;
    color: var(--t-muted);
    font-size: .88rem;
    line-height: 1.5;
}
.t-hiring__lista li + li { margin-top: 4px; }

/* Cómo postularse: la lista numerada que viaja al WhatsApp. */

/* Pie: cierre + botones. En el celular los botones van a lo ancho. */

@media (min-width: 720px) {
    .t-hiring__grid { grid-template-columns: repeat(2, 1fr); }
    /* La lista de la postulación son diez datos: en dos columnas entra sin
       obligar a bajar media página. */
}
@media (min-width: 1100px) {
    .t-hiring__grid { grid-template-columns: repeat(3, 1fr); }
}

.t-hiring__form { display: grid; gap: 12px; }
.t-hiring__field { display: grid; gap: 6px; }
.t-hiring__field span { color: var(--t-ink); font-size: .9rem; font-weight: 650; line-height: 1.4; }
.t-hiring__field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--t-border); border-radius: 10px; background: var(--t-surface-2); color: var(--t-ink); font: inherit; }
.t-hiring__field input:focus { border-color: var(--t-primary); outline: 3px solid rgba(234,11,128,.14); }
.t-hiring__form-error { margin: 14px 0 0; color: var(--t-danger); font-size: .9rem; }
.t-hiring__form-submit { width: 100%; margin-top: 18px; }

.t-hiring-guide {
    position: fixed;
    left: 20px;
    bottom: 22px;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: min(300px, calc(100vw - 92px));
    transition: bottom .2s ease, left .2s ease;
}
body.le-bar-visible #t-hiring-guide,
body.le-bar-visible .t-hiring-guide,
#t-hiring-guide.t-hiring-guide--con-admin,
.t-hiring-guide.t-hiring-guide--con-admin {
    bottom: 22px;
}
.t-hiring-guide[hidden] { display: none; }
.t-hiring-guide__bubble {
    position: relative;
    width: min(280px, calc(100vw - 92px));
    border: 1px solid rgba(234, 11, 128, .28);
    border-radius: 18px 18px 18px 5px;
    background: var(--t-surface);
    box-shadow: 0 16px 42px rgba(43, 7, 45, .2);
    animation: t-hiring-talk .45s ease both;
}
.t-hiring-guide__bubble.is-hidden { display: none; }
.t-hiring-guide__message {
    width: 100%;
    padding: 14px 42px 14px 16px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--t-ink);
    text-align: left;
    cursor: pointer;
}
.t-hiring-guide__message span,
.t-hiring-guide__message strong,
.t-hiring-guide__message small { display: block; }
.t-hiring-guide__message span { color: var(--t-primary); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.t-hiring-guide__message strong { margin-top: 2px; font-size: 1rem; }
.t-hiring-guide__message small { margin-top: 3px; color: var(--t-muted); font-size: .82rem; }
.t-hiring-guide__dismiss {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--t-muted);
    font-size: 1.2rem;
    cursor: pointer;
}
.t-hiring-guide__dismiss:hover { background: var(--t-surface-2); color: var(--t-ink); }
.t-hiring-guide :focus-visible { outline: 3px solid var(--t-primary); outline-offset: 3px; }
@keyframes t-hiring-talk { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes t-hiring-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes t-hiring-ring { 0% { opacity: .65; transform: scale(.85); } 80%, 100% { opacity: 0; transform: scale(1.25); } }

@media (max-width: 720px) {
    .t-hiring-guide { left: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    body.le-bar-visible #t-hiring-guide,
    body.le-bar-visible .t-hiring-guide,
    #t-hiring-guide.t-hiring-guide--con-admin,
    .t-hiring-guide.t-hiring-guide--con-admin {
        bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
        left: 14px;
    }
    .t-hiring-guide__bubble { width: min(240px, calc(100vw - 92px)); }
}
@media (max-width: 380px) {
    .t-hiring-guide__bubble { width: min(210px, calc(100vw - 84px)); }
}
@media (prefers-reduced-motion: reduce) {
    .t-hiring-guide__bubble { animation: none; }
}

/* =====================================================================
   PÁGINA PROPIA DE CONTRATACIÓN
   ===================================================================== */
.t-hiring-page[hidden] { display: none; }
.t-hiring-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 0 56px;
}
.t-hiring-page__hero {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    padding: clamp(36px, 6vw, 76px) clamp(24px, 7vw, 84px);
    border-radius: var(--t-radius);
    background: linear-gradient(135deg, #b90762 0%, #ea0b80 55%, #f5459c 100%);
    color: #fff;
    box-shadow: var(--t-shadow);
}
.t-hiring-page__hero h2 { max-width: 650px; margin: 8px 0 14px; font-size: clamp(2.35rem, 5vw, 4.7rem); line-height: 1.02; letter-spacing: -.05em; }
.t-hiring-page__hero p { max-width: 650px; margin: 0 0 24px; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; color: rgba(255,255,255,.9); }
.t-hiring-page__hero .t-section-kicker { color: #f8c3d9; }
.t-hiring-page__hero .t-btn { position: relative; z-index: 2; background: #fff; color: #1a0629; }
.t-hiring-page__content { margin-top: 28px; }
.t-hiring-page__content .t-hiring__grid { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.t-hiring-page__content .t-hiring__card { min-height: 150px; padding: 22px; background: var(--t-surface); border-radius: var(--t-radius-sm); box-shadow: var(--t-shadow-sm); }
.t-hiring-page__content .t-hiring__card h4 { font-size: .9rem; }
.t-hiring-page__content .t-hiring__card p, .t-hiring-page__content .t-hiring__lista { font-size: .95rem; }
@media (max-width: 800px) {
    .t-hiring-page { padding: 16px 0 40px; }
    .t-hiring-page__content .t-hiring__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .t-hiring-page__hero { border-radius: var(--t-radius-sm); padding: 32px 20px 30px; }
    .t-hiring-page__hero h2 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
    .t-hiring-page__content .t-hiring__grid { grid-template-columns: 1fr; }
}

/* Página de contratación: propuesta y encuesta viven juntas, sin modal. */
.t-hiring-page__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 6vw, 80px);
    min-height: 0;
    background:
        radial-gradient(circle at 78% 15%, rgba(255,255,255,.2), transparent 24%),
        linear-gradient(128deg, #870446 0%, #d40970 54%, #f62c91 100%);
}
.t-hiring-page__hero-copy { position: relative; z-index: 1; }
.t-hiring-page__hero h1 {
    max-width: 680px;
    margin: 8px 0 16px;
    font-size: clamp(2.7rem, 6vw, 5.4rem);
    line-height: .96;
    letter-spacing: -.055em;
}
.t-hiring-page__hero-mark {
    position: relative;
    z-index: 1;
    width: clamp(170px, 20vw, 230px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 38px;
    background: rgba(38, 3, 35, .27);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 26px 60px rgba(45,0,31,.22);
    backdrop-filter: blur(9px);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    transform: rotate(3deg);
}
.t-hiring-page__hero-mark .icon-svg { width: 72px; height: 72px; }
.t-hiring-page__hero-mark span {
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    color: #870446;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.t-hiring-page__layout {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 24px;
    margin-top: 28px;
}
.t-hiring-page__content { margin-top: 0; }
.t-hiring-page__content .t-hiring__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.t-hiring-page__content .t-hiring__card {
    min-height: 0;
    padding: 20px;
    border: 1px solid var(--t-border);
    border-left: 4px solid rgba(234, 11, 128, .55);
    border-radius: 16px;
    background: var(--t-surface);
    box-shadow: var(--t-shadow-sm);
}
.t-hiring-page__content .t-hiring__card h4 {
    margin-bottom: 10px;
    color: var(--t-primary);
    font-size: .82rem;
}
.t-hiring-page__content .t-hiring__card p,
.t-hiring-page__content .t-hiring__lista {
    color: var(--t-ink);
    font-size: .96rem;
    line-height: 1.62;
}
.t-hiring-page__form-card {
    scroll-margin-top: 92px;
    overflow: hidden;
    border: 1px solid var(--t-border);
    border-radius: 22px;
    background: var(--t-surface);
    box-shadow: 0 24px 65px rgba(55, 8, 49, .13);
}
.t-hiring-page__form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--t-border);
    background: linear-gradient(135deg, rgba(234, 11, 128, .09), rgba(139, 77, 232, .055));
}
.t-hiring-page__form-head h2 {
    margin: 5px 0 8px;
    color: var(--t-ink);
    font-size: clamp(1.55rem, 3vw, 2rem);
    letter-spacing: -.025em;
}
.t-hiring-page__form-head p {
    max-width: 62ch;
    margin: 0;
    color: var(--t-muted);
    font-size: 1rem;
    line-height: 1.55;
}
.t-hiring-page__form-count {
    flex: none;
    padding: 8px 12px;
    border: 1px solid rgba(234, 11, 128, .2);
    border-radius: 999px;
    background: var(--t-surface);
    color: var(--t-primary);
    font-size: .82rem;
    font-weight: 750;
    white-space: nowrap;
}
.t-hiring-page__form-card .t-hiring__form {
    gap: 14px;
    padding: 24px 28px 8px;
}
.t-hiring-page__form-card .t-hiring__field {
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--t-border);
    border-radius: 15px;
    background: var(--t-surface-2);
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.t-hiring-page__form-card .t-hiring__field:focus-within {
    border-color: var(--t-primary);
    background: var(--t-surface);
    box-shadow: 0 0 0 4px rgba(234, 11, 128, .1);
}
.t-hiring__question {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    color: var(--t-ink);
    font-size: .98rem;
    font-weight: 680;
    line-height: 1.45;
}
.t-hiring__question b {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(234, 11, 128, .12);
    color: var(--t-primary);
    display: grid;
    place-items: center;
    font-size: .82rem;
}
.t-hiring__question em {
    color: var(--t-muted);
    font-size: .72rem;
    font-style: normal;
    font-weight: 650;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.t-hiring-page__form-card .t-hiring__field input,
.t-hiring-page__form-card .t-hiring__field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--t-border);
    border-radius: 11px;
    outline: 0;
    background: var(--t-surface);
    color: var(--t-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
}
.t-hiring-page__form-card .t-hiring__field textarea {
    min-height: 104px;
    resize: vertical;
}
.t-hiring-page__form-card .t-hiring__field :is(input, textarea):focus {
    border-color: var(--t-primary);
    box-shadow: none;
}
.t-hiring-page__form-card .t-hiring__field :is(input, textarea)::placeholder { color: var(--t-muted); opacity: .78; }
.t-hiring-page__form-card .t-hiring__form-error {
    margin: 14px 28px 0;
    padding: 12px 14px;
    border: 1px solid rgba(196, 42, 65, .25);
    border-radius: 10px;
    background: rgba(196, 42, 65, .08);
    color: var(--t-danger);
    font-weight: 650;
}
.t-hiring-page__submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 28px 26px;
}
.t-hiring-page__privacy,
.t-hiring-page__note { max-width: 54ch; margin: 0; color: var(--t-muted); font-size: .88rem; line-height: 1.45; }
.t-hiring-page__privacy { color: var(--t-ink); font-weight: 650; }
.t-hiring-page__note:not(:empty) { margin-top: 5px; }
.t-hiring-page__form-card .t-hiring__form-submit {
    flex: none;
    width: auto;
    min-height: 50px;
    margin: 0;
    padding-inline: 22px;
    background: #149849;
    box-shadow: 0 10px 24px rgba(20, 152, 73, .22);
}
.t-hiring-page__form-card .t-hiring__form-submit:hover { background: #10843e; }
.t-hiring-page__links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 14px 28px;
    border-top: 1px solid var(--t-border);
    background: var(--t-surface-2);
}
.t-hiring-page__links a { color: var(--t-primary); font-size: .88rem; font-weight: 700; text-decoration: none; }
.t-hiring-page__links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .t-hiring-page__layout { grid-template-columns: minmax(0, 1fr); }
    .t-hiring-page__content .t-hiring__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .t-hiring-page__hero { grid-template-columns: minmax(0, 1fr); padding: 34px 22px; }
    .t-hiring-page__hero h1 { font-size: clamp(2.65rem, 15vw, 4rem); }
    .t-hiring-page__hero-mark { display: none; }
    .t-hiring-page__content .t-hiring__grid { grid-template-columns: minmax(0, 1fr); }
    .t-hiring-page__form-head { display: block; padding: 22px 18px 18px; }
    .t-hiring-page__form-count { display: inline-block; margin-top: 14px; }
    .t-hiring-page__form-card .t-hiring__form { padding: 18px 14px 6px; }
    .t-hiring-page__form-card .t-hiring__field { padding: 14px; }
    .t-hiring__question { grid-template-columns: 30px minmax(0, 1fr); }
    .t-hiring__question em { display: none; }
    .t-hiring-page__submit-row { align-items: stretch; flex-direction: column; padding: 18px; }
    .t-hiring-page__form-card .t-hiring__form-submit { width: 100%; }
    .t-hiring-page__form-card .t-hiring__form-error { margin-inline: 14px; }
    .t-hiring-page__links { padding-inline: 18px; }
}

/* =====================================================================
   FOTOS EN LAS TARJETAS DE SUCURSAL
   Una tira horizontal scrolleable (en el celular se desliza con el
   dedo, como cualquier galería) o una sola foto ancha.
   ===================================================================== */
.t-store-card__fotos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(max(38%, 120px), 180px);
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.t-store-card__fotos--una { grid-auto-columns: 100%; }
.t-store-card__foto {
    position: relative;
    border: 0; padding: 0; cursor: zoom-in;
    border-radius: calc(var(--t-radius-sm) - 4px);
    overflow: hidden;
    background: var(--t-surface-2);
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
}
.t-store-card__foto img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* =====================================================================
   RESEÑAS DE CLIENTES
   Opiniones reales cargadas desde el panel (bloque 08b). Sin contenido
   cargado la sección entera queda con [hidden] — no hay relleno.
   ===================================================================== */
.t-resenas { margin: 52px 0 4px; }
.t-resenas__head { text-align: center; margin-bottom: 22px; }
.t-resenas__head h2 {
    margin: 6px 0 0;
    font-family: Georgia, serif;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    letter-spacing: -.02em;
    line-height: 1.15;
}
.t-resenas__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.t-resena {
    margin: 0;
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--t-border);
    border-left: 4px solid var(--t-primary);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface);
    box-shadow: var(--t-shadow-sm);
}
.t-resena__estrellas { display: inline-flex; gap: 2px; color: #f3c86e; }
.t-resena__estrella { color: var(--t-muted); opacity: .5; }
.t-resena__estrella.is-llena { color: #f3c86e; opacity: 1; }
.t-resena__texto { margin: 0; color: var(--t-ink); font-size: .95rem; line-height: 1.55; }
.t-resena__nombre { color: var(--t-muted); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
@media (min-width: 720px) {
    .t-resenas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .t-resenas__grid { grid-template-columns: repeat(3, 1fr); }
}
body.tienda[data-theme="dark"] .t-resena {
    background: var(--t-surface);
    border-color: var(--t-border);
}

/* Descripción de la tarjeta: solo se pinta en la vista de lista. */
.t-card__desc { margin: 2px 0 0; color: var(--t-muted); font-size: .85rem; line-height: 1.45; }

/* Sello de compra del pie (mismo texto que el badge del carrito). */
.t-footer__seguro {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--t-muted);
    font-size: .85rem;
}
.t-footer__seguro .icon-svg { flex: none; color: var(--t-primary); }

/* =====================================================================
   FIX TABLET 721-1080px: el nav horizontal necesita ~1076px y a este
   ancho no entra, pero el drawer lateral solo existia a max-width:720px
   (mas el candado min-width:721px nowrap). Resultado: overflow
   horizontal del documento. Se colapsa el nav a drawer tambien hasta
   1080px, copiando las reglas del drawer de 720px. Aditivo: no se
   borran las reglas viejas de 720px.
   ===================================================================== */
@media (max-width: 1080px) {
    .t-burger { display: flex; }
    /* El blur se apaga porque crea un containing block para el #t-nav, que es
       position: fixed (ver la nota del bloque de 720px). Pero el fondo base es
       rgba(255,253,249,.92) y en oscuro rgba(29,17,39,.95): sin blur, ese 5-8%
       deja pasar el contenido SIN desenfocar, y el logo y los íconos se mezclan
       con el texto que scrollea por detrás. Con el blur apagado el fondo tiene
       que ser opaco, que es justo lo que el comentario de 720px daba por
       sentado. Mismo color que la base, sin alfa. */
    .t-header { backdrop-filter: none; background: #fffdf9; }
    body.tienda[data-theme="dark"] .t-header { background: #1d1127 !important; }
    .t-nav {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 84%; max-width: 340px;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .25s;
        overflow-y: auto;
        background: var(--t-surface);
        padding-top: 0;
        display: flex; flex-direction: column;
    }
    .t-nav.is-open { transform: translateX(0); }
    .t-nav__inner {
        min-height: 100%; gap: 0;
        flex-direction: column;
        flex-wrap: nowrap; align-items: stretch; padding: 0;
    }
    .t-nav__inner > * { flex-shrink: 0; }
    .t-overlay { z-index: 59 !important; }
    body.t-nav-open .t-header { z-index: 60; }
    body.t-nav-open .t-tabbar,
    body.t-nav-open .t-floats,
    body.t-nav-open .t-hiring-guide,
    body.t-nav-open .le-bar { display: none !important; }
    .t-nav__spacer, .t-nav__note { display: none; }
    .t-dept-toggle {
        background: var(--t-surface-2); color: var(--t-ink); justify-content: flex-start;
        margin: 12px 16px 0; border-radius: 12px; padding: 12px 15px;
    }
    .t-dept-panel {
        position: static; width: auto; border: 0; box-shadow: none;
        border-radius: 0; max-height: none; padding: 4px 8px; background: transparent;
    }
    .t-dept-list li > button { font-size: .85rem; padding: 10px 12px; }
    .t-nav__link { color: var(--t-ink); border-bottom: 0; padding: 12px 16px; font-size: .88rem; }
    .t-nav__link:hover { background: var(--t-surface-2); }
    .t-nav__link--location { color: var(--t-primary); }
    .t-nav__link--location span { color: var(--t-ink); }
    .t-nav__link.is-current {
        background: var(--t-surface-2);
        color: var(--t-primary);
        box-shadow: inset 3px 0 0 var(--t-primary);
        font-weight: 700;
    }
    .t-nav__head {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--t-border);
        background: var(--t-surface);
        position: sticky; top: 0; z-index: 2;
    }
    .t-logo--drawer .t-logo__text { font-size: 1.15rem; }
    .t-logo--drawer .t-logo__mark { width: 32px; height: 32px; border-radius: 9px; }
    .t-nav__close {
        flex: none; width: 36px; height: 36px; border-radius: 50%;
        border: 1px solid var(--t-border); background: var(--t-surface-2);
        color: var(--t-ink); font-size: 1.5rem; line-height: 1;
        display: grid; place-items: center;
    }
    .t-nav__close:hover { border-color: var(--t-primary); color: var(--t-primary); }
    .t-nav__account { display: block; padding: 14px 16px; border-bottom: 1px solid var(--t-border); }
    .t-nav__who { display: flex; align-items: flex-start; gap: 11px; }
    .t-nav__avatar {
        flex: none; width: 40px; height: 40px; border-radius: 13px;
        display: grid; place-items: center;
        background: var(--t-surface-2); font-size: 1.15rem;
    }
    .t-nav__avatar--staff { background: var(--t-primary); color: #fff; }
    .t-nav__who strong { display: block; font-size: .95rem; }
    .t-nav__who small { display: block; color: var(--t-muted); font-size: .72rem; line-height: 1.4; word-break: break-word; }
    .t-nav__role {
        display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
        background: var(--t-primary); color: #fff;
        font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    }
    .t-nav__auth { display: flex; gap: 8px; margin-top: 12px; }
    .t-nav__auth .t-btn { flex: 1; text-align: center; padding: 9px 10px; font-size: .78rem; }
    .t-nav__links { display: grid; gap: 1px; margin-top: 12px; }
    .t-nav__links a,
    .t-nav__links button {
        display: block; width: 100%; text-align: left;
        padding: 9px 11px; border: 0; border-radius: 10px;
        background: none; color: var(--t-ink);
        font: inherit; font-size: .82rem;
    }
    .t-nav__links a:hover,
    .t-nav__links button:hover { background: var(--t-surface-2); }
    .t-nav__quick {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
        padding: 14px 16px; border-bottom: 1px solid var(--t-border);
    }
    .t-nav__quick button {
        position: relative;
        display: grid; gap: 4px; justify-items: center;
        padding: 11px 6px; border-radius: 13px;
        border: 1px solid var(--t-border); background: var(--t-surface-2);
        color: var(--t-ink); font: inherit; font-size: .68rem; font-weight: 600;
    }
    .t-nav__quick button:hover { border-color: var(--t-primary); color: var(--t-primary); }
    .t-nav__quick button > span:first-child { font-size: 1.2rem; }
    .t-nav__badge {
        position: absolute; top: 5px; right: 8px;
        min-width: 17px; height: 17px; padding: 0 4px;
        display: grid; place-items: center; border-radius: 999px;
        background: var(--t-primary); color: #fff;
        font-size: .58rem; font-weight: 800; font-style: normal; line-height: 1;
    }
    .t-nav__badge[hidden] { display: none; }
    .t-nav__section-label {
        display: block; padding: 15px 16px 6px;
        color: var(--t-muted);
        font-size: .6rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
    }
    .t-nav__foot {
        display: block; margin-top: auto;
        padding: 16px; border-top: 1px solid var(--t-border);
        background: var(--t-surface-2);
    }
    .t-nav__foot .t-nav__section-label { padding: 0 0 6px; }
    .t-nav__store p { margin: 0 0 3px; color: var(--t-muted); font-size: .76rem; line-height: 1.5; }
    .t-nav__store-hours { font-size: .72rem !important; }
    .t-nav__store-actions { display: flex; gap: 8px; margin-top: 11px; }
    .t-nav__store-actions a,
    .t-nav__store-actions button {
        flex: 1; text-align: center;
        padding: 8px 10px; border-radius: 999px;
        border: 1px solid var(--t-border); background: var(--t-surface);
        color: var(--t-ink); font: inherit; font-size: .74rem; font-weight: 700;
    }
    .t-nav__store-actions a { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
    .t-nav__store-actions button:hover { border-color: var(--t-primary); color: var(--t-primary); }
    .t-nav__staff-link {
        display: block; margin-top: 14px; padding-top: 13px;
        border-top: 1px solid var(--t-border);
        color: var(--t-muted); font-size: .74rem;
    }
    .t-nav__staff-link:hover { color: var(--t-primary); }
}
@media (max-width: 1080px) {
    body.tienda[data-theme="dark"] .t-nav { background: var(--t-surface) !important; }
    body.tienda[data-theme="dark"] .t-nav__link {
        color: var(--t-ink) !important;
        border-bottom-color: var(--t-border) !important;
    }
    body.tienda[data-theme="dark"] .t-dept-toggle { background: var(--t-surface-2); color: var(--t-ink); }
    body.tienda[data-theme="dark"] .t-dept-panel {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}
@media (min-width: 1081px) {
    .t-nav__inner { flex-wrap: nowrap; }
}

/* Reaplica contraste AA después de las reglas específicas del tema oscuro. */
body.tienda[data-theme="dark"] .t-filter.is-active,
body.tienda[data-theme="dark"] .t-btn--light {
    color: #100516 !important;
}

/* Mejora iconos, enlaces y WhatsApp sobre superficies claras. */
body.tienda:not([data-theme="dark"]) .t-card__wish {
    color: #6b5964 !important;
}
body.tienda:not([data-theme="dark"]) .t-store-card__rows a,
body.tienda:not([data-theme="dark"]) .t-store-card__link {
    color: #b90762 !important;
}
body.tienda:not([data-theme="dark"]) :is(.t-text-link, .t-riel__mas, .t-stores-header__link) {
    color: #b90762 !important;
}

/* =====================================================================
   ESTADO DESHABILITADO — un solo tratamiento en toda la tienda
   ---------------------------------------------------------------------
   Los controles del flujo (aplicar filtros, pagar, enviar el pedido) se
   deshabilitan en varios momentos. Sin regla propia, el control se veía
   igual que el habilitado y el visitante no sabía que la acción estaba en
   pausa. Los casos particulares siguen mandando por especificidad.
   ===================================================================== */
body.tienda :is(button, input, select, textarea)[disabled],
body.tienda :is(a, button)[aria-disabled='true'] {
    opacity: .55;
    cursor: not-allowed;
    filter: saturate(.65);
    pointer-events: none;
}

/* =====================================================================
   ESQUELETOS DE CARGA — la estructura de la portada antes de los datos
   ---------------------------------------------------------------------
   Todo lo que depende del catálogo (filas de ofertas/novedades, categorías
   rápidas, grilla) llegaba en diferido y la portada saltaba de arriba abajo:
   primero el hero, después de golpe todo lo demás. Estos bloques ocupan el
   lugar con la MISMA estructura que el contenido real (reusan .t-row,
   .t-carousel__track y .t-card), así que no hay salto al reemplazarlos.
   El HTML estático está en index.html (#t-esqueleto) y tienda.js lo quita
   en hideState()/showState(). Memoria: elementos con [hidden] + display
   explícito se ven igual, por eso cada bloque lleva su regla [hidden].
   ===================================================================== */
.t-esqueleto { margin: 0; }
.t-esqueleto[hidden] { display: none; }
.t-esqueleto .t-row { margin-bottom: 46px; }
.t-esqueleto .t-carousel__track { overflow: hidden; }

.t-sk-bar,
.t-card--skeleton .t-card__body .sk {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--t-surface-2) 25%, var(--t-border) 37%, var(--t-surface-2) 63%);
    background-size: 400% 100%;
    animation: t-shimmer 1.3s infinite;
}
.t-sk-bar--kicker { width: 112px; height: 12px; }
.t-sk-bar--title { width: 230px; max-width: 62vw; height: clamp(26px, 3vw, 36px); margin-top: 10px; }
.t-sk-bar--link { width: 76px; height: 14px; align-self: flex-end; margin-bottom: 8px; }

/* Cuerpo de la tarjeta esqueleto: mismas proporciones que .t-card__body
   (nombre en dos líneas y precio abajo), para no cambiar de alto al llegar. */
.t-card--skeleton .t-card__body { min-height: 112px; }
.t-card--skeleton .t-card__body .sk { height: 13px; margin: 0; }
.t-card--skeleton .t-card__body .sk--n1 { width: 92%; }
.t-card--skeleton .t-card__body .sk--n2 { width: 66%; }
.t-card--skeleton .t-card__body .sk--p { width: 44%; height: 20px; margin-top: auto; }

/* Categorías rápidas: tiles vacíos hasta que buildQuickCats() los reemplaza. */
.t-quickcat--sk {
    min-height: 121px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm, 14px);
    background: linear-gradient(90deg, var(--t-surface-2) 25%, var(--t-border) 37%, var(--t-surface-2) 63%);
    background-size: 400% 100%;
    animation: t-shimmer 1.3s infinite;
    pointer-events: none;
}
@media (max-width: 560px) { .t-quickcat--sk { min-height: 96px; } .t-quickcat--sk:nth-child(n+5) { display: none; } }

/* Grilla del catálogo mientras carga: no más de lo que entra sin scroll. */
@media (max-width: 900px) { .t-grid > .t-card--skeleton:nth-child(n+9) { display: none; } }
@media (max-width: 560px) { .t-grid > .t-card--skeleton:nth-child(n+7) { display: none; } }

/* Catálogo en escritorio. El riel de filtros llega con el catálogo y mientras
   está oculto (hidden) la grilla subía a la columna angosta de 244px: el
   esqueleto salía en una sola columna a la izquierda y todo el resto en blanco.
   - Cargando: se conservan las dos columnas y el riel se dibuja como bloque
     gris, así la grilla ya está donde va a quedar.
   - Sin riel (no hay nada que filtrar): la grilla ocupa todo el ancho. */
@media (min-width: 901px) {
    .t-catalog__cuerpo.is-cargando::before {
        content: "";
        grid-column: 1;
        grid-row: 1;
        height: 460px;
        border-radius: 16px;
        border: 1px solid var(--t-border);
        background: linear-gradient(90deg, var(--t-surface-2) 25%, var(--t-border) 37%, var(--t-surface-2) 63%);
        background-size: 400% 100%;
        animation: t-shimmer 1.3s infinite;
    }
    .t-catalog__cuerpo.is-cargando > .t-catalog__main { grid-column: 2; grid-row: 1; }
    .t-catalog__cuerpo:not(.is-cargando):has(> .t-riel[hidden]) { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .t-sk-bar, .t-quickcat--sk,
    .t-card--skeleton .t-card__body .sk,
    .t-catalog__cuerpo.is-cargando::before { animation: none; }
}