/* ============================================================
   TTENNO · Negro de lujo
   Estilos compartidos por todas las páginas de la tienda (el
   encabezado con el video vive en index.html).
   ============================================================ */
:root {
    color-scheme: dark;
    --gold: #c9a24a;
    --bg: #0c0b09;
    --bg-glow: rgba(201, 162, 74, .10);
    --surface: #15130f;
    --surface-2: #1c1914;
    --line: rgba(201, 162, 74, .22);
    --line-strong: rgba(201, 162, 74, .55);
    --text: #f1e9d6;
    --muted: #a89f8a;
    --gold-text: #d8b562;
    --glass: rgba(12, 11, 9, .72);
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --ok: #6fcf97;
    --warn: #e8c15a;
    --bad: #e07a6a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Dorado metálico compartido (botones, detalles) */
:root {
    --gold-grad: linear-gradient(135deg, #f2d78b 0%, #c9a24a 45%, #a07b2f 100%);
    --on-gold: #15110a;
    --radius: 16px;
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

body {
    font-family: var(--sans);
    background:
        radial-gradient(60rem 30rem at 10% 0%, var(--bg-glow), transparent 60%),
        radial-gradient(50rem 30rem at 100% 40%, var(--bg-glow), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    transition: background-color .4s ease, color .4s ease;
}

::selection { background: #c9a24a; color: #15110a; }

:focus-visible {
    outline: 2px solid #c9a24a;
    outline-offset: 3px;
}

/* ============================================================
   BARRA SUPERIOR FIJA (vidrio): marca, moneda y carrito
   ============================================================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--line);
}

.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    text-decoration: none;
}

.brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.brand span {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--gold-text);
}

/* Interruptor de moneda: la pastilla dorada se desliza a la opción activa */
.currency-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.currency-switch::before {
    content: '';
    position: absolute;
    inset: 4px auto 4px 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: var(--gold-grad);
    box-shadow: 0 2px 10px rgba(201, 162, 74, .4);
    transition: translate .35s cubic-bezier(.3, 1.4, .5, 1);
}

.currency-switch:has([data-currency="USD"].active)::before {
    translate: 100% 0;
}

.currency-btn {
    position: relative;
    z-index: 1;
    border: 0;
    background: none;
    padding: 8px 16px;
    border-radius: 999px;
    font: 700 .85rem var(--sans);
    color: var(--muted);
    cursor: pointer;
    transition: color .3s ease;
    white-space: nowrap;
}

.currency-btn.active { color: var(--on-gold); }
.currency-btn small { font-weight: 500; opacity: .8; }

.cart-fab {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--gold-text);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cart-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(201, 162, 74, .3);
}

.cart-fab svg { width: 22px; height: 22px; }

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold-grad);
    color: var(--on-gold);
    font: 800 .72rem/20px var(--sans);
    text-align: center;
    scale: 0;
    transition: scale .3s cubic-bezier(.3, 1.6, .5, 1);
}

.cart-count.has-items { scale: 1; }
.cart-count.bump { animation: bump .45s ease; }

@keyframes bump {
    40% { transform: scale(1.35); }
}

/* ============================================================
   BUSCADOR
   ============================================================ */
.search-box {
    position: relative;
    max-width: 640px;
    margin: 36px auto 0;
}

.search-box svg {
    position: absolute;
    left: 20px;
    top: 50%;
    translate: 0 -50%;
    width: 20px;
    height: 20px;
    color: var(--gold-text);
    pointer-events: none;
}

.search-box input {
    width: 100%;
    height: 54px;
    padding: 0 52px 0 54px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    font: 500 1rem var(--sans);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.search-box input::placeholder { color: var(--muted); }
.search-box input::-webkit-search-cancel-button { display: none; }

.search-box input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(201, 162, 74, .15);
}

.search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    translate: 0 -50%;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
}

.search-clear:hover { color: var(--gold-text); }

.empty-category a { color: var(--gold-text); }

/* Al buscar, los resultados quedan pegados al buscador */
.search-box:has(+ #categories-section[hidden]) + #categories-section + .section-head { margin-top: 28px; }

/* ============================================================
   SECCIONES
   ============================================================ */
.section-head {
    text-align: center;
    margin: 48px 0 24px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font: 700 .75rem var(--sans);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-text);
}

.eyebrow::before,
.eyebrow::after {
    content: '';
    width: 36px;
    height: 1px;
    background: var(--line-strong);
}

.section-title {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.1;
    margin-top: 6px;
    color: var(--text);
}

/* CATEGORÍAS */
.categories {
    scroll-margin-top: 170px;  /* deja ver el título por debajo de la barra fija */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.category-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 10px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: 700 .9rem var(--sans);
    cursor: pointer;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.category-btn .cat-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.7rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    transition: background .25s ease;
}

.category-btn:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.category-btn.active {
    border-color: #c9a24a;
    box-shadow: 0 0 0 1px #c9a24a, 0 10px 30px rgba(201, 162, 74, .25);
}

.category-btn.active .cat-icon {
    background: var(--gold-grad);
    border-color: transparent;
}

/* Tarjeta con foto de la categoría: la foto va en ::before (para poder
   acercarla al pasar el mouse) y un degradado oscuro deja leer el nombre */
.category-btn.has-photo {
    justify-content: flex-end;
    min-height: 168px;
    padding: 14px 10px 16px;
    isolation: isolate;
    color: #fff;
}

.category-btn.has-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(8, 7, 5, .92) 10%, rgba(8, 7, 5, .35) 60%, rgba(8, 7, 5, .55)),
        var(--cat-photo) center / cover;
    transition: scale .6s ease;
}

.category-btn.has-photo:hover::before { scale: 1.08; }

.category-btn.has-photo .cat-icon {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    background: rgba(12, 11, 9, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.category-btn.has-photo .cat-name {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

.category-btn.has-photo.active .cat-name { color: var(--gold-text); }

/* Destello que cruza la tarjeta activa */
.category-btn.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 200, .18) 50%, transparent 70%);
    translate: -100% 0;
    animation: sweep 3.5s ease-in-out infinite;
}

@keyframes sweep {
    60%, 100% { translate: 100% 0; }
}

/* PRODUCTOS */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
    view-transition-name: productos;
}

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow), 0 0 0 1px rgba(201, 162, 74, .25);
}

.product-image {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 40%, rgba(201, 162, 74, .22), transparent 65%),
        var(--surface-2);
    overflow: hidden;
}

.product-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease, scale .6s ease;
}

.product-image > img.loaded { opacity: 1; }

/* Isotipo dorado (sin fondo) en los avisos: sin foto, producto no encontrado */
.ph-iso {
    width: 64px;
    height: 64px;
    object-fit: contain;
    opacity: .85;
}

.empty-category .ph-iso { display: block; margin: 0 auto 12px; }

.empty-cart svg {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    color: var(--gold-text);
}

/* Si hay foto, el aviso "Foto próximamente" queda oculto (si la foto falla,
   el <img> se borra y el aviso reaparece solo). Mientras carga: brillo dorado. */
.product-image:has(> img) .product-placeholder { visibility: hidden; }

.product-image:has(> img:not(.loaded))::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(201, 162, 74, .12) 50%, transparent 70%);
    background-size: 250% 100%;
    animation: loading-shine 1.4s linear infinite;
}

@keyframes loading-shine {
    from { background-position: 100% 0; }
    to { background-position: -150% 0; }
}

.product-card:hover .product-image > img { scale: 1.06; }

/* Mientras no hay foto: ícono de la categoría + "Foto próximamente" */
.product-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.product-placeholder b {
    font-size: 3.2rem;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}

.stock-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    font: 700 .7rem var(--sans);
    letter-spacing: .5px;
    background: var(--glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--line);
}

.stock-available { color: var(--ok); }
.stock-low { color: var(--warn); }
.stock-unavailable { color: var(--bad); }

.product-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 18px 18px 20px;
}

.product-name {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.15;
}

.product-rating {
    color: #c9a24a;
    font-size: .85rem;
    letter-spacing: 1px;
}

.product-rating span {
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 4px;
}

.product-desc {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--muted);
}

.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-specs span {
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .72rem;
    color: var(--muted);
}

.product-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.price-value {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--gold-text);
    line-height: 1;
}

.price-label {
    display: block;
    font: 600 .68rem var(--sans);
    letter-spacing: 2px;
    color: var(--muted);
    margin-top: 4px;
}

.btn-gold {
    border: 0;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--gold-grad);
    background-size: 150% 150%;
    color: var(--on-gold);
    font: 800 .85rem var(--sans);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(201, 162, 74, .3);
    transition: transform .2s ease, box-shadow .2s ease, background-position .4s ease;
}

.btn-gold:hover:not(:disabled) {
    transform: translateY(-2px);
    background-position: 100% 100%;
    box-shadow: 0 8px 22px rgba(201, 162, 74, .45);
}

.btn-gold:active:not(:disabled) { transform: scale(.97); }

.btn-gold:disabled {
    filter: grayscale(1);
    opacity: .45;
    cursor: not-allowed;
}

.empty-category {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 20px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--muted);
}

/* "Muy pronto" sobre la foto de la categoría */
.empty-category.has-photo {
    padding: 90px 20px;
    border-style: solid;
    border-color: var(--line);
    color: #e8e2d0;
    background:
        linear-gradient(rgba(8, 7, 5, .72), rgba(8, 7, 5, .82)),
        var(--cat-photo) center / cover;
}

.empty-category.has-photo strong { color: var(--gold-text); font-size: 2.2rem; }

.empty-category b {
    display: block;
    font-size: 3rem;
    margin-bottom: 10px;
}

.empty-category strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--text);
    margin-bottom: 6px;
}

/* Las tarjetas suben y aparecen al entrar en pantalla (sin JS) */
@supports (animation-timeline: view()) {
    .product-card {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    @keyframes rise {
        from { opacity: 0; translate: 0 40px; }
    }
}

/* Transición suave entre categorías (View Transitions) */
::view-transition-old(productos) { animation: fade-out .25s ease both; }
::view-transition-new(productos) { animation: fade-in .4s ease both; }

@keyframes fade-out { to { opacity: 0; translate: 0 -10px; } }
@keyframes fade-in { from { opacity: 0; translate: 0 14px; } }

/* ============================================================
   CARRITO: panel que se desliza desde la derecha (<dialog>)
   ============================================================ */
.cart-drawer {
    margin: 0 0 0 auto;
    height: 100dvh;
    max-height: none;
    width: min(420px, 100vw);
    border: 0;
    border-left: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    display: flex;
    flex-direction: column;
    translate: 100% 0;
    transition: translate .4s cubic-bezier(.2, .8, .2, 1), display .4s allow-discrete, overlay .4s allow-discrete;
}

.cart-drawer:not([open]) { display: none; }
.cart-drawer[open] { translate: 0 0; }

@starting-style {
    .cart-drawer[open] { translate: 100% 0; }
}

.cart-drawer::backdrop {
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
}

.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--line);
}

.cart-title {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 600;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: none;
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
}

.icon-btn:hover { border-color: var(--line-strong); color: var(--gold-text); }

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 22px;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}

.cart-item strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.15rem;
}

.cart-item small { color: var(--muted); }

.cart-totals {
    padding: 18px 22px 22px;
    border-top: 1px solid var(--line-strong);
    background: var(--surface-2);
}

.cart-total-line {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
    color: var(--muted);
}

.cart-total-line.total {
    color: var(--text);
    font-weight: 700;
    font-size: 1.1rem;
}

.cart-total-line.total span:last-child {
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--gold-text);
}

.checkout-btn {
    width: 100%;
    margin-top: 14px;
    padding: 15px;
    font-size: 1rem;
}

.empty-cart {
    text-align: center;
    color: var(--muted);
    padding: 60px 20px;
}

.empty-cart b {
    display: block;
    font-size: 2.6rem;
    margin-bottom: 10px;
}

/* AVISOS FLOTANTES */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100;
    translate: -50% 0;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    box-shadow: var(--shadow);
    transition: opacity .3s ease, translate .3s ease;
}

.toast[hidden] {
    display: block;
    opacity: 0;
    translate: -50% 20px;
    pointer-events: none;
}

/* PIE DE PÁGINA */
.footer {
    margin-top: 72px;
    padding: 44px 20px 28px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, .25);
    color: var(--muted);
    font-size: .86rem;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 32px;
}

.footer .brand { margin: 0 0 12px; }
.footer p { margin: 6px 0; line-height: 1.5; }

.footer h3 {
    font: 700 .72rem var(--sans);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-text);
    margin-bottom: 12px;
}

.footer a { color: var(--text); text-decoration: none; }
.footer a:hover { color: var(--gold-text); }

.social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.social-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--gold-text) !important;
    transition: background .2s ease, transform .2s ease;
}

.social-link:hover { background: rgba(201, 162, 74, .12); transform: translateY(-2px); }
.social-link svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
    .social { justify-content: center; }
}

.footer-legal {
    max-width: 1200px;
    margin: 32px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: .75rem;
    line-height: 1.7;
    text-align: center;
}

.footer-legal a { color: var(--muted); text-decoration: underline; }

@media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr; gap: 22px; text-align: center; }
    .footer .brand { justify-content: center; }
}

/* ============================================================
   PÁGINAS LEGALES (términos, privacidad, envíos, devoluciones)
   ============================================================ */
.legal {
    max-width: 780px;
    margin: 0 auto;
    padding-top: 28px;
    line-height: 1.75;
}

.legal h1 {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    margin: 8px 0 6px;
}

.legal .updated { color: var(--muted); font-size: .82rem; margin-bottom: 28px; }

.legal h2 {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold-text);
    margin: 34px 0 10px;
}

.legal p, .legal li { color: #d9d1bd; }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { padding-left: 22px; margin: 10px 0; }
.legal li { margin: 6px 0; }
.legal a { color: var(--gold-text); }
.legal strong { color: var(--text); }

.legal .callout {
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
}

/* Enlaces dentro de las tarjetas (foto y nombre llevan a la página del producto) */
a.product-image { display: grid; color: inherit; text-decoration: none; }
.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { color: var(--gold-text); }
a.btn-gold { display: inline-block; text-decoration: none; text-align: center; }

.btn-outline {
    border: 1px solid var(--line-strong);
    padding: 12px 18px;
    border-radius: 999px;
    background: transparent;
    color: var(--gold-text);
    font: 800 .9rem var(--sans);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.btn-outline:hover:not(:disabled) { background: rgba(201, 162, 74, .1); border-color: var(--gold); }
.btn-outline:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   PÁGINA DE PRODUCTO
   ============================================================ */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 26px;
    font-size: .82rem;
    color: var(--muted);
}

.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-text); }
.breadcrumb [aria-current] { color: var(--text); }

.pdp {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* La galería acompaña al bajar en pantallas grandes */
.pdp-gallery {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdp-main {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    view-transition-name: foto-producto;
}

.pdp-main .ph-iso { width: 110px; height: 110px; }

.pdp-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

.pdp-thumb {
    flex: 0 0 76px;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
    cursor: pointer;
    padding: 0;
}

.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.pdp-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdp-info .eyebrow::before { display: none; }

.pdp-name {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 600;
    line-height: 1.05;
}

.pdp-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.pdp-price .price-value { font-size: 2.6rem; }
.pdp-price .price-label { margin: 0; }

#addi-widget:empty { display: none; }

/* Aviso de precio en dólares (referencia según tasa del día) */
.fx-note {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--muted);
}

.fx-note:empty { display: none; }
.cart-totals .fx-note { margin-top: 10px; }

.checkout-note {
    margin-top: 10px;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}

.checkout-note a { color: var(--gold-text); }

/* "Volver a la tienda" en la barra de las páginas legales */
.topbar a.btn-outline {
    text-decoration: none;
    padding: 9px 16px;
    font-size: .8rem;
}

.fx-credit {
    display: block;
    margin-top: 8px;
    font-size: .7rem;
}

.fx-credit a { color: var(--muted); }

.pdp-desc {
    color: var(--muted);
    line-height: 1.7;
}

/* Selectores de color y talla */
.pdp-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdp-option-label {
    font-size: .85rem;
    color: var(--muted);
}

.pdp-option-label b { color: var(--text); }

.swatches,
.sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--line-strong);
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}

.swatch:hover { transform: scale(1.08); }
.swatch.active { box-shadow: 0 0 0 2px var(--gold); }

.size {
    min-width: 52px;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text);
    font: 700 .9rem var(--sans);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.size:hover { border-color: var(--gold); }

.size.active {
    background: var(--gold-grad);
    border-color: transparent;
    color: var(--on-gold);
}

/* Aviso cuando intentan comprar sin elegir talla */
.sizes.need { animation: shake .4s ease; }
.sizes.need .size { border-color: var(--bad); }

@keyframes shake {
    25% { translate: -6px 0; }
    75% { translate: 6px 0; }
}

.cart-item .cart-options {
    display: block;
    color: var(--gold-text);
    margin: 2px 0;
}

/* Puntos de color en las tarjetas de la portada */
.card-swatches {
    display: flex;
    gap: 6px;
}

.card-swatches span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--line-strong);
}

.pdp-buy {
    display: flex;
    gap: 12px;
}

.qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
}

.qty button {
    width: 44px;
    height: 48px;
    border: 0;
    background: none;
    color: var(--gold-text);
    font-size: 1.3rem;
    cursor: pointer;
}

.qty output {
    min-width: 28px;
    text-align: center;
    font-weight: 800;
}

.pdp-add { flex: 1; font-size: .95rem; }
.pdp-now { width: 100%; }

.pdp-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: .8rem;
    color: var(--muted);
}

.pdp-pay ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}

.pdp-pay li {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text);
}

.pdp-wa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: .85rem;
    color: var(--muted);
}

.pdp-wa a {
    color: var(--gold-text);
    font-weight: 700;
    text-decoration: none;
}

.pdp-wa a:hover { text-decoration: underline; }

.pdp-subtitle {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 8px;
}

.pdp-specs {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.pdp-specs div {
    display: grid;
    grid-template-columns: 40% 1fr;
    padding: 11px 16px;
    font-size: .88rem;
}

.pdp-specs div:nth-child(odd) { background: var(--surface); }
.pdp-specs dt { color: var(--muted); text-transform: capitalize; }
.pdp-specs dd { color: var(--text); }

.pdp-missing { margin: 40px 0; }

@media (max-width: 860px) {
    .pdp { grid-template-columns: 1fr; gap: 24px; }
    .pdp-gallery { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .categories { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    .topbar-inner { padding: 8px 14px; gap: 10px; }
    .brand span { display: none; }
    .currency-btn { padding: 7px 12px; }
    .currency-btn small { display: none; }
    .categories { gap: 10px; }
    .category-btn { padding: 16px 6px 14px; font-size: .78rem; }
    .category-btn.has-photo { min-height: 128px; padding: 10px 6px 12px; }
    .category-btn.has-photo .cat-icon { width: 36px; height: 36px; font-size: 1.05rem; }
    .category-btn.has-photo .cat-name { font-size: .98rem; }
    .category-btn .cat-icon { width: 46px; height: 46px; font-size: 1.4rem; }
    .products-grid { grid-template-columns: 1fr; }
    .section-head { margin: 36px 0 18px; }
}

/* ============================================================
   PÁGINA DE PAGO (/pagar) Y ESTADO DEL PEDIDO (/pedido)
   ============================================================ */
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.checkout-form { display: flex; flex-direction: column; gap: 24px; }

.checkout fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.checkout legend {
    padding: 0 8px;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gold-text);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
}

.field-wide { grid-column: 1 / -1; }

.field input,
.field select {
    height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--bg);
    color: var(--text);
    font: 500 .95rem var(--sans);
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 74, .15);
}

/* Solo se marcan en rojo después de intentar pagar */
.checkout.validated .field :invalid { border-color: var(--bad); }

.checkout-hint { font-size: .78rem; color: var(--muted); }
.checkout-hint a { color: var(--gold-text); }

.checkout-summary {
    position: sticky;
    top: 84px;
    padding: 22px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
}

.checkout-summary h2 {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.summary-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
}

.summary-item img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--surface-2);
}

.summary-item small { display: block; color: var(--muted); }
.summary-item small:first-of-type { color: var(--gold-text); }
.checkout-summary .cart-total-line { margin: 10px 0; }
.checkout-summary .cart-total-line small { color: var(--muted); font-size: .72rem; }

.check {
    display: flex;
    gap: 10px;
    margin: 16px 0 4px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--muted);
    cursor: pointer;
}

.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }
.check a { color: var(--gold-text); }
.checkout.validated .check input:invalid { outline: 2px solid var(--bad); }

.checkout-error {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--bad);
    color: var(--bad);
    font-size: .85rem;
}

.wa-order { width: 100%; margin-top: 10px; font-size: .85rem; }

/* Estado del pedido */
.order-status {
    max-width: 560px;
    margin: 60px auto;
    padding: 40px 28px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.order-status strong { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.order-text { color: var(--muted); line-height: 1.6; }
.order-text b { color: var(--text); }
.order-status .btn-gold, .order-status .btn-outline { text-decoration: none; min-width: 240px; }

.order-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 800;
}

.order-icon.ok { background: var(--gold-grad); color: var(--on-gold); }
.order-icon.error { border: 2px solid var(--bad); color: var(--bad); }
.order-icon.espera { border: 2px solid var(--line-strong); color: var(--gold-text); }

.spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--gold);
    animation: girar 1s linear infinite;
}

@keyframes girar { to { rotate: 360deg; } }

@media (max-width: 860px) {
    .checkout { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
}

@media (max-width: 560px) {
    .checkout fieldset { grid-template-columns: 1fr; padding: 18px; }
}

/* ============================================================
   TEMA DEFINITIVO: MORADO NU Y DORADO (elegido el 7 oct 2026)
   Morado #820AD1 (el de Nu/Nubank) con dorado. Fondos en morado
   profundo derivado de ese tono para que los textos se lean bien;
   el morado vivo va en la barra superior, el encabezado y los detalles.
   ============================================================ */
:root {
    /* Paleta oficial de Nu */
    --nu: #820ad1;            /* Morado principal */
    --nu-dark: #1c0444;       /* Morado oscuro (fondo) */
    --nu-ui: #442c61;         /* Morado oscuro (UI) */
    --nu-lavanda: #bc8ae1;    /* Morado claro / lavanda */
    --nu-lavanda-2: #aa92ec;  /* Lavanda azulada */
    --nu-deep: #5a0791;
    --bg: var(--nu-dark);
    --bg-glow: rgba(130, 10, 209, .4);
    --bg-glow-gold: rgba(201, 162, 74, .12);
    --surface: #2a0f52;
    --surface-2: var(--nu-ui);
    --line: rgba(214, 178, 96, .28);
    --line-strong: rgba(222, 190, 110, .65);
    --text: #f7efe0;
    --muted: var(--nu-lavanda);
    --glass: rgba(130, 10, 209, .86);
    --shadow: 0 10px 30px rgba(10, 0, 30, .6);
}

:root body {
    background:
        radial-gradient(60rem 30rem at 10% 0%, var(--bg-glow), transparent 60%),
        radial-gradient(50rem 30rem at 100% 35%, var(--bg-glow-gold), transparent 60%),
        radial-gradient(60rem 40rem at 50% 100%, var(--bg-glow), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

/* Morado Nu protagonista: encabezado, lados del collage y barra superior */
:root .header { background: linear-gradient(180deg, var(--nu), var(--nu-ui)); }
:root .side { background: rgba(90, 7, 145, .45); }
:root .tile { background: var(--nu-ui); border-color: rgba(170, 146, 236, .45); }
:root .topbar { background: rgba(130, 10, 209, .88); border-bottom-color: rgba(222, 190, 110, .5); }
:root .currency-switch { background: rgba(28, 4, 68, .55); border-color: rgba(188, 138, 225, .45); }
:root .cart-fab { background: rgba(28, 4, 68, .55); }

:root .category-btn.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 10px 34px rgba(130, 10, 209, .6);
}

:root .category-btn.has-photo::before {
    background:
        linear-gradient(to top, rgba(28, 4, 68, .95) 10%, rgba(130, 10, 209, .3) 60%, rgba(28, 4, 68, .5)),
        var(--cat-photo) center / cover;
}

:root .product-card:hover {
    box-shadow: var(--shadow), 0 0 0 1px rgba(214, 178, 96, .35), 0 18px 40px rgba(130, 10, 209, .4);
}

:root .product-image {
    background: radial-gradient(circle at 50% 40%, rgba(170, 146, 236, .3), transparent 65%), var(--surface-2);
}

:root .eyebrow::before,
:root .eyebrow::after { background: linear-gradient(90deg, var(--nu-lavanda-2), var(--gold)); }

:root .product-specs span,
:root .pdp-pay li { border-color: rgba(170, 146, 236, .6); background: rgba(130, 10, 209, .22); }

:root .search-box input { background: var(--surface); }
:root .search-box input:focus { border-color: var(--nu-lavanda-2); box-shadow: 0 0 0 4px rgba(170, 146, 236, .3); }

:root .empty-category.has-photo {
    background: linear-gradient(rgba(28, 4, 68, .72), rgba(130, 10, 209, .65)), var(--cat-photo) center / cover;
}

/* Pie "Ultravioleta": grafito casi negro con destellos violeta, como la tarjeta premium */
:root .footer {
    background:
        radial-gradient(30rem 12rem at 15% 0%, rgba(170, 146, 236, .18), transparent 70%),
        radial-gradient(26rem 12rem at 90% 100%, rgba(130, 10, 209, .25), transparent 70%),
        linear-gradient(180deg, #1b1724, #0e0b14);
    border-top-color: rgba(170, 146, 236, .35);
}
:root .cart-drawer::backdrop { background: rgba(28, 4, 68, .65); }


/* Todos los títulos en dorado (pedido del 7 oct 2026, para un look uniforme) */
.section-title,
.product-name,
.product-name a,
.pdp-name,
.pdp-subtitle,
.cart-title,
.cart-item strong,
.checkout-summary h2,
.legal h1,
.legal h2,
.order-status strong,
.empty-category strong,
.summary-item strong {
    color: var(--gold-text);
}

.product-name a:hover { color: #f2d78b; }

/* ============================================================
   BRILLO DE ORO (7 oct 2026)
   Todo lo dorado luce metálico: degradado con reflejos claros y
   oscuros, y un destello de luz que lo recorre. Si el visitante
   pide "reducir movimiento", los destellos se quedan quietos.
   ============================================================ */
:root {
    /* Oro metálico: sombras cálidas, cuerpo dorado y reflejos casi blancos */
    /* Para textos: nunca más oscuro que #c9a24a, para que se lea sobre el morado */
    --oro-metal: linear-gradient(105deg,
        #c9a24a 0%, #e2bd5e 18%, #f7e08f 30%, #fff6d0 36%, #f2d06b 42%,
        #d4ad55 55%, #c9a24a 68%, #e9c870 82%, #fff3c4 88%, #d9b45a 100%);
    /* Para botones: más contraste metálico (llevan letras oscuras encima) */
    --oro-boton: linear-gradient(105deg,
        #b8892f 0%, #d9b45a 20%, #f7e08f 38%, #fff1c4 46%, #e9c870 58%, #c9a24a 78%, #a98030 100%);
    --oro-brillo: 0 0 18px rgba(242, 208, 107, .35), 0 0 2px rgba(255, 240, 190, .6);
}

/* Textos dorados con reflejo que se desplaza */
.section-title,
.pdp-name,
.pdp-subtitle,
.product-name a,
.price-value,
.cart-title,
.checkout-summary h2,
.legal h1,
.legal h2,
.order-status strong,
.empty-category strong,
.brand span,
.footer h3,
.eyebrow {
    background: var(--oro-metal);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(242, 208, 107, .28));
    animation: oro-destello 6s ease-in-out infinite;
}

.product-name a:hover { filter: drop-shadow(0 0 14px rgba(255, 230, 150, .6)); }

@keyframes oro-destello {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0% 0; }
}

/* Botones dorados: oro metálico + franja de luz que pasa */
.btn-gold,
.currency-switch::before,
.cart-count,
.size.active,
.order-icon.ok {
    background: var(--oro-boton);
    background-size: 220% 100%;
    animation: oro-destello 6s ease-in-out infinite;
}

.btn-gold {
    position: relative;
    overflow: hidden;
    isolation: isolate;   /* el reflejo (::after, z-index -1) pasa detrás del texto */
    box-shadow: 0 4px 18px rgba(201, 162, 74, .45), inset 0 1px 0 rgba(255, 250, 225, .7), inset 0 -2px 4px rgba(120, 80, 10, .35);
}

.btn-gold::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -20% auto -20% -60%;
    width: 45%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: oro-reflejo 3.8s ease-in-out infinite;
    pointer-events: none;
}

.btn-gold:hover:not(:disabled) {
    box-shadow: 0 8px 28px rgba(242, 208, 107, .6), inset 0 1px 0 rgba(255, 250, 225, .8), inset 0 -2px 4px rgba(120, 80, 10, .35);
}

@keyframes oro-reflejo {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}

/* Bordes y detalles con resplandor dorado */
.category-btn.active,
.swatch.active,
.pdp-thumb.active {
    box-shadow: 0 0 0 1px #f2d06b, var(--oro-brillo), 0 10px 34px rgba(130, 10, 209, .5);
}

.product-card:hover { box-shadow: var(--shadow), 0 0 0 1px rgba(242, 208, 107, .55), var(--oro-brillo); }
.social-link, .cart-fab { box-shadow: 0 0 12px rgba(242, 208, 107, .2); }
.brand img { filter: drop-shadow(0 0 8px rgba(242, 208, 107, .55)); }

/* Línea dorada brillante bajo el encabezado */
.header { border-bottom: 3px solid transparent; border-image: var(--oro-metal) 1; }

@media (prefers-reduced-motion: reduce) {
    .btn-gold::after { display: none; }
}

/* Aviso al pasar a dólares (precio de referencia) */
.aviso-usd {
    margin: auto;
    max-width: min(460px, calc(100vw - 32px));
    padding: 26px 24px 22px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow), 0 0 30px rgba(242, 208, 107, .2);
    line-height: 1.55;
    font-size: .92rem;
}

.aviso-usd::backdrop { background: rgba(28, 4, 68, .7); backdrop-filter: blur(4px); }
.aviso-usd h2 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; margin-bottom: 12px; color: var(--gold-text); }
.aviso-usd p { margin: 8px 0; }
.aviso-usd ul { margin: 6px 0 10px 20px; color: var(--muted); }
.aviso-usd li { margin: 4px 0; }
.aviso-usd .aviso-usd-nota { font-size: .8rem; color: var(--muted); }
.aviso-usd .btn-gold { width: 100%; margin-top: 12px; padding: 13px; }
.aviso-usd a.btn-gold { display: block; text-align: center; text-decoration: none; margin-top: 14px; padding: 13px; }
.aviso-usd .btn-outline { width: 100%; margin-top: 10px; }

/* VENTA AL POR MAYOR */
.mayorista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 44px 0 0;
    padding: 22px 26px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background:
        radial-gradient(30rem 10rem at 0% 0%, rgba(242, 208, 107, .14), transparent 70%),
        linear-gradient(120deg, rgba(130, 10, 209, .35), rgba(68, 44, 97, .55));
    box-shadow: var(--shadow), 0 0 24px rgba(242, 208, 107, .12);
}

.mayorista h3 {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    background: var(--oro-metal);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: oro-destello 6s ease-in-out infinite;
}

.mayorista p { color: var(--text); margin-top: 6px; font-size: .92rem; }
.mayorista .btn-gold { text-decoration: none; white-space: nowrap; }

.pdp-mayor {
    font-size: .85rem;
    color: var(--muted);
}

.pdp-mayor a { color: var(--gold-text); font-weight: 700; }

@media (max-width: 560px) {
    .mayorista { padding: 20px; text-align: center; justify-content: center; }
    .mayorista .btn-gold { width: 100%; }
}

/* Tiempos de entrega (página de producto y resumen de pago) */
.pdp-entrega {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    font-size: .85rem;
}

.pdp-entrega strong { color: var(--gold-text); }
.pdp-entrega > span { color: var(--muted); font-size: .78rem; }
.pdp-entrega ul { list-style: none; margin: 8px 0; }

.pdp-entrega li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--line);
    color: var(--muted);
}

.pdp-entrega li b { color: var(--text); white-space: nowrap; }
.pdp-entrega a { color: var(--gold-text); font-size: .78rem; }

.sum-tiempo {
    margin: 2px 0 8px;
    font-size: .8rem;
    color: var(--gold-text);
}