/* =============================================================================
   ESTILOS ESPECÍFICOS POR PÁGINA
   ============================================================================= */

/* ========================================================================
   HOME · Shopfront (sin hero) — entrada directa a tienda
   ======================================================================== */
.shopfront {
    padding-block: var(--sp-8) 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.shopfront__head .container {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
    padding-bottom: var(--sp-6);
}
.shopfront__intro h1 {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 0.95;
    margin-top: var(--sp-2);
    letter-spacing: -0.02em;
}
.shopfront__intro h1 em {
    font-style: normal;
    color: var(--color-accent);
}

.shopfront__mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, 22vh);
    gap: 4px;
    padding-inline: 4px;
    padding-bottom: 4px;
}
/* Layout dinámico:
   - Tile 0: 2x2 (gran panel destacado, izquierda)
   - Tile 1: 2x1
   - Tile 2: 2x1
   - Tile 3: 2x1
   - Tile 4: 2x1
   - Tile 5: 2x2
*/
.shop-tile { position: relative; display: block; overflow: hidden; background: var(--color-surface-2); }
.shop-tile--0 { grid-column: span 2; grid-row: span 2; }
.shop-tile--1 { grid-column: span 2; }
.shop-tile--2 { grid-column: span 2; }
.shop-tile--3 { grid-column: span 2; }
.shop-tile--4 { grid-column: span 2; }
.shop-tile--5 { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) {
    .shopfront__mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; }
    .shop-tile--0, .shop-tile--5 { grid-column: span 2; grid-row: span 2; }
    .shop-tile--1, .shop-tile--2, .shop-tile--3, .shop-tile--4 { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 540px) {
    .shopfront__mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
    .shop-tile--n, .shop-tile--0, .shop-tile--5 { grid-column: auto; grid-row: auto; }
    .shop-tile { grid-column: span 1; grid-row: span 1; }
    .shop-tile--0 { grid-column: span 2; }
}

.shop-tile img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.55) saturate(0.9) contrast(1.05);
    transition: transform var(--t-slow) var(--ease), filter var(--t) var(--ease);
}
.shop-tile:hover img { transform: scale(1.06); filter: brightness(0.4) saturate(1.1) contrast(1.1); }

.shop-tile__overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(225,29,46,0) 0%, rgba(225,29,46,0) 60%, rgba(225,29,46,0.35) 100%),
        linear-gradient(to top, rgba(10,10,11,0.95) 0%, rgba(10,10,11,0.2) 70%);
    pointer-events: none;
    transition: opacity var(--t) var(--ease);
}
.shop-tile:hover .shop-tile__overlay { opacity: 0.85; }

.shop-tile__content {
    position: absolute;
    inset: var(--sp-5);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-3);
    z-index: 2;
}
.shop-tile__num {
    position: absolute;
    top: 0; left: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-13);
    letter-spacing: 0.18em;
    color: var(--color-accent);
}
.shop-tile__content h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(var(--fs-20), 2.4vw, var(--fs-36));
    text-transform: uppercase;
    line-height: 0.95;
    color: #fff;
    letter-spacing: -0.01em;
}
.shop-tile__content small {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: var(--fs-12);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-family: var(--font-display);
    font-weight: 600;
}
.shop-tile__arrow {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.shop-tile:hover .shop-tile__arrow { background: var(--color-accent); border-color: var(--color-accent); transform: translate(2px, -2px); }

/* ---- Trust bar compacta ---- */
.trust-bar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
    padding-block: var(--sp-4);
}
.trust-bar ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
}
@media (max-width: 900px) { .trust-bar ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trust-bar ul { grid-template-columns: 1fr; } }
.trust-bar li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fs-13);
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
}
.trust-bar li span { color: var(--color-accent); display: inline-flex; }

/* ---- Rails horizontales por disciplina ---- */
.rail-section { padding-block: var(--sp-12) var(--sp-12); }
.rail-section--alt { background: var(--color-surface); border-block: 1px solid var(--color-border-soft); }

.rail {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-3);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
.rail::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

.rail__track {
    display: flex;
    gap: var(--sp-4);
    padding-inline: max((100vw - var(--container)) / 2, var(--sp-5));
}
.rail__item {
    flex: 0 0 280px;
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .rail__item { flex: 0 0 320px; }
}

/* ---- Quote band + newsletter ---- */
.quote-band {
    background:
        linear-gradient(135deg, rgba(225,29,46,0.08) 0%, transparent 50%),
        var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    padding: clamp(var(--sp-8), 6vw, var(--sp-16));
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-10);
    align-items: center;
    position: relative;
    overflow: hidden;
}
.quote-band::before {
    content: '';
    position: absolute;
    left: -10%;
    top: -10%;
    width: 30%;
    height: 6px;
    background: var(--color-accent);
    transform: rotate(35deg);
}
@media (max-width: 900px) { .quote-band { grid-template-columns: 1fr; } }
.quote-band blockquote {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(var(--fs-24), 3vw, var(--fs-36));
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--color-text);
    letter-spacing: -0.01em;
    margin-top: var(--sp-3);
}
.quote-band blockquote em { font-style: normal; color: var(--color-accent); }
.quote-band__author {
    margin-top: var(--sp-4);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fs-12);
    letter-spacing: 0.18em;
    color: var(--color-text-dim);
}
.quote-band__form .field__label { display: block; margin-bottom: var(--sp-3); }
.quote-band__row { display: flex; gap: var(--sp-2); }
.quote-band__row .input { flex: 1; }



/* ========================================================================
   HOME · Hero
   ======================================================================== */
.hero {
    position: relative;
    min-height: clamp(560px, 78vh, 800px);
    overflow: hidden;
    display: flex;
    align-items: end;
}
.hero__bg {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(10,10,11,0.65) 0%, rgba(10,10,11,0.4) 40%, rgba(10,10,11,0.95) 100%),
        url('https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
    z-index: -1;
    animation: hero-zoom 18s ease-out infinite alternate;
}
@keyframes hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}
.hero__diagonal {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
}
.hero__diagonal::before {
    content: '';
    position: absolute;
    left: -10%;
    bottom: -2px;
    width: 65%;
    height: 6px;
    background: var(--color-accent);
    transform: skewX(-25deg);
}

.hero__content {
    position: relative;
    z-index: 1;
    padding-block: var(--sp-16) var(--sp-20);
    max-width: 680px;
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: var(--fs-13);
    color: var(--color-accent);
    margin-bottom: var(--sp-4);
}
.hero__eyebrow::before {
    content: ''; width: 32px; height: 2px; background: var(--color-accent);
}
.hero h1 {
    font-size: clamp(2.5rem, 8vw, 6rem);
    line-height: 0.92;
    margin-bottom: var(--sp-6);
}
.hero h1 em {
    font-style: normal;
    color: var(--color-accent);
    display: block;
}
.hero__lead {
    font-size: clamp(var(--fs-16), 1.6vw, var(--fs-18));
    color: var(--color-text-dim);
    margin-bottom: var(--sp-8);
    max-width: 540px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__metrics {
    position: absolute;
    right: var(--sp-6);
    bottom: var(--sp-8);
    display: grid;
    gap: var(--sp-4);
    z-index: 1;
}
@media (max-width: 1024px) { .hero__metrics { display: none; } }
.hero__metric {
    text-align: right;
}
.hero__metric strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-48);
    line-height: 1;
    color: #fff;
}
.hero__metric span {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--fs-12);
    color: var(--color-text-dim);
}

/* Featured categories grid */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}
@media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }
.cat-grid--featured .cat-card:nth-child(1),
.cat-grid--featured .cat-card:nth-child(6) { grid-column: span 2; }
@media (max-width: 768px) { .cat-grid--featured .cat-card:nth-child(n) { grid-column: auto; } }

/* Productos destacados grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}
@media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }
@media (max-width: 420px)  { .products-grid { grid-template-columns: 1fr; } }

/* Banner promo doble */
.promo-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 768px) { .promo-strip { grid-template-columns: 1fr; } }
.promo-card {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: end;
    background: var(--color-surface-2);
}
.promo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); filter: brightness(0.5); }
.promo-card:hover img { transform: scale(1.05); filter: brightness(0.7); }
.promo-card__inner {
    position: relative;
    padding: var(--sp-8);
    color: #fff;
    width: 100%;
}
.promo-card__inner h3 {
    font-size: clamp(var(--fs-24), 3vw, var(--fs-48));
    margin-bottom: var(--sp-2);
    line-height: 0.95;
}
.promo-card__inner p { color: rgba(255,255,255,0.85); margin-bottom: var(--sp-4); font-size: var(--fs-15); }

/* Testimonios */
.testimonials {
    background: var(--color-surface);
    border-block: 1px solid var(--color-border-soft);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card {
    padding: var(--sp-6);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
}
.testimonial-card .stars { margin-bottom: var(--sp-3); }
.testimonial-card blockquote {
    font-size: var(--fs-16);
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: var(--sp-4);
    flex: 1;
}
.testimonial-card__author {
    display: flex; align-items: center; gap: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border-soft);
}
.testimonial-card__author img {
    width: 44px; height: 44px;
    border-radius: var(--radius-full);
    object-fit: cover;
}
.testimonial-card__author strong { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-14); }
.testimonial-card__author small { color: var(--color-text-muted); font-size: var(--fs-12); }

/* Newsletter section grande */
.newsletter-section {
    background:
        linear-gradient(90deg, rgba(10,10,11,0.92), rgba(10,10,11,0.6)),
        url('https://images.unsplash.com/photo-1574680096145-d05b474e2155?auto=format&fit=crop&w=2000&q=80') center/cover;
    border-radius: var(--radius);
    padding: clamp(var(--sp-10), 6vw, var(--sp-16));
    position: relative;
    overflow: hidden;
}
.newsletter-section__inner {
    max-width: 540px;
}
.newsletter-section h2 { margin-bottom: var(--sp-3); }
.newsletter-section p { margin-bottom: var(--sp-6); }
.newsletter-section__form {
    display: flex; gap: var(--sp-2);
    flex-wrap: wrap;
}
.newsletter-section__form input {
    flex: 1; min-width: 220px;
    padding: var(--sp-4) var(--sp-5);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius);
    color: #fff;
}
.newsletter-section__form input::placeholder { color: rgba(255,255,255,0.55); }
.newsletter-section__form input:focus { outline: none; border-color: var(--color-accent); background: rgba(255,255,255,0.1); }

/* ========================================================================
   CATEGORÍA · subcategorías
   ======================================================================== */
.page-head {
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--color-border-soft);
}
.page-head h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.95; margin-bottom: var(--sp-3); }
.page-head p { max-width: 640px; }

.subcat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}
@media (max-width: 1024px) { .subcat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .subcat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }

/* ========================================================================
   LISTADO PRODUCTOS · Filtros + grid
   ======================================================================== */
.listing {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-8);
    padding-top: var(--sp-8);
}
@media (max-width: 1024px) { .listing { grid-template-columns: 1fr; } }

.filters {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}
@media (max-width: 1024px) {
    .filters { position: static; }
}
.filters h3 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-18);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border-soft);
}
.filter-group { padding-block: var(--sp-4); border-bottom: 1px solid var(--color-border-soft); }
.filter-group:last-child { border-bottom: none; }
.filter-group h4 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-13);
    letter-spacing: 0.14em;
    color: var(--color-text-dim);
    margin-bottom: var(--sp-3);
}
.filter-group ul { display: grid; gap: var(--sp-2); }
.filter-group li { font-size: var(--fs-14); color: var(--color-text); }

.listing-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-5);
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.listing-head__count { color: var(--color-text-dim); font-size: var(--fs-14); }
.listing-head__count strong { color: var(--color-text); font-family: var(--font-display); }
.listing-head__sort { display: inline-flex; align-items: center; gap: var(--sp-3); }
.listing-head__sort label { font-size: var(--fs-13); color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-display); font-weight: 600; }
.listing-head__sort select { min-width: 200px; }

/* ========================================================================
   PRODUCTO · REDISEÑO MMA · Cartel de combate
   ======================================================================== */

/* ---- Hero superior del producto ---- */
.prod-hero {
    padding-block: var(--sp-5) var(--sp-3);
    border-bottom: 1px solid var(--color-border-soft);
    background: linear-gradient(to bottom, var(--color-surface), transparent);
}
.prod-hero__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-block: var(--sp-2) var(--sp-3);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--fs-12);
}
.prod-hero__cat { color: var(--color-accent); }
.prod-hero__id { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---- Core layout ---- */
.prod-core { padding-block: var(--sp-8) var(--sp-12); }
.prod-core__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(var(--sp-6), 4vw, var(--sp-10));
    align-items: start;
}
@media (max-width: 1024px) { .prod-core__grid { grid-template-columns: 1fr; } }

/* ---- Galería rediseñada ---- */
.prod-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.prod-gallery__main {
    aspect-ratio: 4/5;
    background: var(--color-surface-2);
    overflow: hidden;
    position: relative;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.prod-gallery__main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out-soft), opacity var(--t) var(--ease);
    cursor: zoom-in;
}
.prod-gallery__main:hover img { transform: scale(1.04); }

.prod-gallery__tag {
    position: absolute;
    top: var(--sp-4); left: 0;
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--fs-13);
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    padding-right: var(--sp-6);
    z-index: 2;
}

.prod-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--sp-2);
}
.prod-gallery__thumbs .gallery__thumb {
    background: transparent;
    padding: 0;
}

/* ---- Side info ---- */
.prod-side__sticky {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
    display: flex;
    flex-direction: column;
}
@media (max-width: 1024px) { .prod-side__sticky { position: static; } }

.prod-side__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}
.prod-side__brand > span:first-child {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: var(--fs-13);
    color: var(--color-accent);
}
.prod-side__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--fs-12);
}
.prod-side__stock span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
    animation: blink 1.6s ease-in-out infinite;
}
.prod-side__stock--ok { color: var(--color-success); }
.prod-side__stock--low { color: var(--color-warning); }
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.prod-side__title {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.95;
    font-size: clamp(var(--fs-30), 3.6vw, var(--fs-60));
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-4);
}

.prod-side__rating {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--color-border-soft);
}
.prod-side__rating > span {
    font-size: var(--fs-13);
    color: var(--color-text-dim);
}
.prod-side__rating strong { color: var(--color-text); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.prod-side__rating a { text-decoration: underline; text-underline-offset: 3px; color: var(--color-text-dim); }
.prod-side__rating a:hover { color: var(--color-accent); }

.prod-side__price-block {
    background: linear-gradient(135deg, rgba(225,29,46,0.08), transparent 60%);
    border: 1px solid var(--color-border-soft);
    border-left: 3px solid var(--color-accent);
    padding: var(--sp-5);
    border-radius: var(--radius);
    margin-bottom: var(--sp-5);
    position: relative;
}
.prod-side__price-block .price-main {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(var(--fs-36), 4vw, var(--fs-60));
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-2);
}
.prod-side__savings {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.prod-side__tax {
    display: block;
    margin-top: var(--sp-3);
    color: var(--color-text-muted);
    font-size: var(--fs-12);
}

.prod-side__short {
    color: var(--color-text-dim);
    font-size: var(--fs-15);
    line-height: 1.65;
    margin-bottom: var(--sp-5);
}

.prod-side__group { margin-bottom: var(--sp-5); }
.prod-side__group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
    gap: var(--sp-3);
}
.prod-side__group-label > span:first-child {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--fs-12);
    color: var(--color-text-dim);
}
.prod-side__group-label .selected-name { color: var(--color-text); font-weight: 700; }
.prod-side__group-label a {
    color: var(--color-accent);
    font-size: var(--fs-13);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.prod-side__hint {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-12);
    color: var(--color-text-muted);
}
.prod-side__hint--ok { color: var(--color-success); }

.prod-side__qty-row {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    align-items: stretch;
}
.prod-side__icon-btn {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.prod-side__icon-btn:hover { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-surface-2); }
.prod-side__icon-btn[aria-pressed="true"] { color: var(--color-accent); border-color: var(--color-accent); }
.prod-side__icon-btn[aria-pressed="true"] svg { fill: var(--color-accent); }
.prod-side__icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.prod-side__actions {
    display: grid;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.prod-side__trust {
    display: grid;
    gap: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border-soft);
}
.prod-side__trust li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-13);
    color: var(--color-text-dim);
}
.prod-side__trust li svg { color: var(--color-accent); flex-shrink: 0; }
.prod-side__trust li span { line-height: 1.4; }

/* ====================================================================
   TALE OF THE TAPE
==================================================================== */
.tape {
    background:
        radial-gradient(ellipse at top right, rgba(225,29,46,0.06), transparent 60%),
        var(--color-surface);
    border-block: 1px solid var(--color-border-soft);
    padding-block: clamp(var(--sp-12), 8vw, var(--sp-20));
    position: relative;
    overflow: hidden;
}
.tape::before {
    content: 'TALE OF THE TAPE';
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(60px, 9vw, 140px);
    color: rgba(255,255,255,0.025);
    letter-spacing: 0.04em;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}

.tape__head { max-width: 720px; margin-bottom: var(--sp-10); }
.tape__head h2 { margin-top: var(--sp-3); font-size: clamp(2rem, 4vw, var(--fs-48)); line-height: 1; }
.tape__head h2 em { font-style: normal; color: var(--color-accent); }
.tape__lead { margin-top: var(--sp-4); color: var(--color-text-dim); font-size: var(--fs-15); }

.tape__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}
@media (max-width: 900px) { .tape__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tape__grid { grid-template-columns: 1fr; } }

.tape-stat {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    padding: var(--sp-5);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.tape-stat:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.tape-stat__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    color: var(--color-text-dim);
}
.tape-stat__icon {
    color: var(--color-accent);
    display: inline-flex;
}
.tape-stat__icon svg { width: 18px; height: 18px; }
.tape-stat__label {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--fs-12);
}
.tape-stat__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(var(--fs-48), 5vw, var(--fs-72));
    line-height: 0.9;
    color: var(--color-text);
    margin-bottom: var(--sp-3);
    font-variant-numeric: tabular-nums;
}
.tape-stat__value small {
    font-size: var(--fs-18);
    color: var(--color-text-muted);
    font-weight: 600;
    margin-left: 4px;
}
.tape-stat__bar {
    height: 6px;
    background: var(--color-surface-3);
    border-radius: 3px;
    overflow: hidden;
}
.tape-stat__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hot));
    border-radius: 3px;
    animation: bar-grow 1100ms 200ms forwards var(--ease-out-soft);
}
@keyframes bar-grow {
    from { width: 0; }
    to { width: var(--w, 0); }
}

.tape__specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--color-border-soft);
    border: 1px solid var(--color-border-soft);
}
@media (max-width: 768px) { .tape__specs { grid-template-columns: 1fr 1fr; } }

.tape-row {
    background: var(--color-bg);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tape-row span {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    color: var(--color-text-muted);
}
.tape-row strong {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-18);
    color: var(--color-text);
    line-height: 1.1;
}

/* ====================================================================
   ROUNDS (tabs estilo round)
==================================================================== */
.rounds-section { padding-block: clamp(var(--sp-12), 7vw, var(--sp-16)); }
.rounds__list {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--sp-8);
}
.rounds__list::-webkit-scrollbar { display: none; }
.rounds__tab {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-4) var(--sp-6);
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid var(--color-border-soft);
    flex-shrink: 0;
}
.rounds__tab:last-child { border-right: none; }
.rounds__tab:hover { color: var(--color-text); }
.rounds__tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.rounds__num {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: inherit;
    opacity: 0.7;
}
.rounds__name {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-15);
    color: inherit;
}
.rounds__tab.is-active .rounds__num { opacity: 1; }

/* ---- Ship cards ---- */
.ship-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}
@media (max-width: 768px) { .ship-grid { grid-template-columns: 1fr; } }
.ship-card {
    padding: var(--sp-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    transition: border-color var(--t) var(--ease);
}
.ship-card:hover { border-color: var(--color-accent); }
.ship-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(225,29,46,0.1);
    color: var(--color-accent);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
}
.ship-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-16);
    margin-bottom: var(--sp-2);
    line-height: 1.1;
}
.ship-card p { font-size: var(--fs-14); color: var(--color-text-dim); line-height: 1.5; }

/* ========================================================================
   PRODUCTO · ficha (legacy classes mantenidas)
   ======================================================================== */
.product-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-10);
    padding-top: var(--sp-6);
}
@media (max-width: 1024px) { .product-layout { grid-template-columns: 1fr; } }

.gallery {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--sp-3);
}
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

.gallery__thumbs { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 640px) { .gallery__thumbs { flex-direction: row; overflow-x: auto; } }
.gallery__thumb {
    aspect-ratio: 1/1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface-2);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--color-accent); }
.gallery__main {
    aspect-ratio: 4/5;
    background: var(--color-surface-2);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}
.gallery__main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
    cursor: zoom-in;
}
.gallery__main:hover img { transform: scale(1.08); }

.product-info { display: flex; flex-direction: column; }
.product-info__brand {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-13);
    letter-spacing: 0.18em;
    color: var(--color-accent);
    margin-bottom: var(--sp-3);
}
.product-info h1 {
    font-size: clamp(var(--fs-30), 4vw, var(--fs-48));
    line-height: 1;
    margin-bottom: var(--sp-3);
}
.product-info__rating {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--color-border-soft);
}
.product-info__rating a { color: var(--color-text-dim); font-size: var(--fs-13); text-decoration: underline; text-underline-offset: 3px; }

.product-info__price {
    display: flex; align-items: baseline; gap: var(--sp-3);
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
}
.price-main {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(var(--fs-30), 4vw, var(--fs-48));
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.price-strike {
    font-family: var(--font-body);
    font-size: var(--fs-18);
    color: var(--color-text-muted);
    text-decoration: line-through;
}
.price-save {
    background: var(--color-accent);
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-12);
    letter-spacing: 0.08em;
}
.product-info__tax { color: var(--color-text-muted); font-size: var(--fs-12); margin-bottom: var(--sp-5); }

.product-info__short { color: var(--color-text-dim); font-size: var(--fs-15); margin-bottom: var(--sp-6); line-height: 1.65; }

.product-info__group {
    margin-bottom: var(--sp-5);
}
.product-info__group-label {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fs-13);
    letter-spacing: 0.14em;
    color: var(--color-text-dim);
    margin-bottom: var(--sp-3);
}
.product-info__group-label a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.product-info__group-label .selected-name { color: var(--color-text); }

.product-info__qty-row {
    display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4);
    align-items: stretch;
}
.product-info__actions { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.product-info__actions .btn { padding-block: var(--sp-5); }

.product-info__sec-actions {
    display: flex; gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.product-info__sec-actions button {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-13);
    color: var(--color-text-dim);
    transition: color var(--t-fast) var(--ease);
}
.product-info__sec-actions button:hover { color: var(--color-accent); }
.product-info__sec-actions svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Tabs */
.tabs { margin-top: var(--sp-16); }
.tabs__list {
    display: flex; gap: var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
    padding: var(--sp-4) var(--sp-2);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-15);
    color: var(--color-text-dim);
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    white-space: nowrap;
}
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.tabs__panel { padding-top: var(--sp-8); display: none; }
.tabs__panel.is-active { display: block; animation: fade-up 400ms var(--ease); }
@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.tab-body { max-width: 820px; }
.tab-body p { margin-bottom: var(--sp-4); }
.spec-table { width: 100%; }
.spec-table td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border-soft); }
.spec-table td:first-child { color: var(--color-text-dim); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-13); width: 200px; }

/* Reseñas */
.reviews-head {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-10);
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--color-border-soft);
}
@media (max-width: 768px) { .reviews-head { grid-template-columns: 1fr; } }
.reviews-summary { text-align: center; padding: var(--sp-6); background: var(--color-surface); border-radius: var(--radius); }
.reviews-summary strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-72); line-height: 1; color: var(--color-text); }
.reviews-summary .stars { justify-content: center; margin: var(--sp-2) 0; }
.reviews-summary span { color: var(--color-text-dim); font-size: var(--fs-13); }
.reviews-bars { display: flex; flex-direction: column; gap: var(--sp-2); justify-content: center; }
.review-bar {
    display: grid;
    grid-template-columns: 24px 1fr 32px;
    gap: var(--sp-3);
    align-items: center;
    font-size: var(--fs-13);
    color: var(--color-text-dim);
}
.review-bar__track { height: 6px; background: var(--color-surface-2); border-radius: 3px; overflow: hidden; }
.review-bar__fill { height: 100%; background: var(--color-accent); border-radius: 3px; }

.review {
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--color-border-soft);
}
.review__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.review__head strong { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-15); }
.review__head small { color: var(--color-text-muted); font-size: var(--fs-12); }
.review h5 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-16); margin: var(--sp-2) 0; }
.review p { font-size: var(--fs-15); color: var(--color-text-dim); }

/* Sticky bar móvil */
.product-sticky {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--sp-3) var(--sp-4);
    display: none;
    align-items: center;
    gap: var(--sp-3);
    z-index: var(--z-header);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
}
@media (max-width: 768px) {
    .product-sticky { display: flex; }
    body { padding-bottom: 80px; }
}
.product-sticky__price strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-18); color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1; }
.product-sticky__price small { color: var(--color-text-muted); font-size: var(--fs-12); }
.product-sticky .btn { flex: 1; padding: var(--sp-3) var(--sp-4); }

/* ========================================================================
   CARRITO
   ======================================================================== */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sp-8);
    align-items: start;
    padding-top: var(--sp-6);
}
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-list { display: grid; }

.cart-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--color-border-soft);
}
@media (max-width: 600px) {
    .cart-item { grid-template-columns: 90px 1fr; }
    .cart-item__price { grid-column: 1 / -1; text-align: right; }
}
.cart-item__img { aspect-ratio: 4/5; background: var(--color-surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.cart-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.cart-item__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-18); line-height: 1.15; }
.cart-item__title a { color: var(--color-text); transition: color var(--t-fast) var(--ease); }
.cart-item__title a:hover { color: var(--color-accent); }
.cart-item__brand { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); font-family: var(--font-display); font-weight: 600; }
.cart-item__variant { color: var(--color-text-dim); font-size: var(--fs-13); }
.cart-item__variant span { color: var(--color-text); }
.cart-item__actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: auto; }
.cart-item__remove {
    color: var(--color-text-muted);
    font-size: var(--fs-13);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-fast) var(--ease);
}
.cart-item__remove:hover { color: var(--color-accent); }
.cart-item__price {
    text-align: right;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-20);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    align-self: start;
}

.cart-coupon {
    display: flex; gap: var(--sp-2);
    margin-top: var(--sp-6);
    max-width: 420px;
}

.cart-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
}
.cart-summary h3 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-20);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--color-border-soft);
}
.summary-row { display: flex; justify-content: space-between; padding-block: var(--sp-2); font-size: var(--fs-14); color: var(--color-text-dim); }
.summary-row strong { color: var(--color-text); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-row--total {
    border-top: 1px solid var(--color-border);
    margin-top: var(--sp-3);
    padding-top: var(--sp-4);
    font-size: var(--fs-16);
    color: var(--color-text);
}
.summary-row--total strong { font-size: var(--fs-24); }

.cart-empty {
    text-align: center;
    padding: var(--sp-16) var(--sp-6);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}
.cart-empty svg { width: 60px; height: 60px; color: var(--color-text-muted); margin-inline: auto; margin-bottom: var(--sp-4); }
.cart-empty h2 { margin-bottom: var(--sp-3); }
.cart-empty p { margin-bottom: var(--sp-6); }

/* ========================================================================
   CHECKOUT
   ======================================================================== */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--sp-10);
    padding-top: var(--sp-6);
    align-items: start;
}
@media (max-width: 1024px) { .checkout-layout { grid-template-columns: 1fr; } }

.stepper {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--color-border-soft);
}
.stepper__item {
    display: flex; align-items: center; gap: var(--sp-3);
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fs-14);
    letter-spacing: 0.06em;
}
.stepper__num {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-13);
    color: var(--color-text-muted);
}
.stepper__item.is-active { color: var(--color-text); }
.stepper__item.is-active .stepper__num { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.stepper__item.is-done .stepper__num { background: var(--color-surface-3); border-color: var(--color-border); color: var(--color-success); }

.checkout-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
}
.checkout-section__head {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.checkout-section__head h3 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-20);
}
.checkout-section__num {
    width: 32px; height: 32px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-16);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3-1 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .grid-3-1 { grid-template-columns: 1fr 1fr; } }

.shipping-options, .payment-options { display: grid; gap: var(--sp-3); }
.option-card {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.option-card:hover { border-color: var(--color-accent); }
.option-card.is-selected { border-color: var(--color-accent); background: rgba(225,29,46,0.04); }
.option-card__body { flex: 1; }
.option-card__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-16); }
.option-card__desc { font-size: var(--fs-13); color: var(--color-text-dim); margin-top: 2px; }
.option-card__price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); font-variant-numeric: tabular-nums; }

.order-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
}
.order-summary h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-18); margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border-soft); }
.order-summary__list { max-height: 300px; overflow-y: auto; margin-bottom: var(--sp-4); padding-right: var(--sp-2); }
.order-line {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
    align-items: center;
}
.order-line__img {
    width: 56px; height: 70px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    object-fit: cover;
    position: relative;
}
.order-line__qty {
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-12);
    font-weight: 700;
    border: 2px solid var(--color-surface);
}
.order-line__title { font-size: var(--fs-13); color: var(--color-text); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; line-height: 1.2; }
.order-line__meta { font-size: var(--fs-12); color: var(--color-text-muted); }
.order-line__price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14); font-variant-numeric: tabular-nums; align-self: start; }

/* ========================================================================
   GRACIAS
   ======================================================================== */
.thanks {
    text-align: center;
    padding-block: var(--sp-16) var(--sp-12);
    max-width: 640px;
    margin-inline: auto;
}
.thanks__check {
    width: 96px; height: 96px;
    margin-inline: auto;
    margin-bottom: var(--sp-6);
    border-radius: var(--radius-full);
    background: rgba(22, 163, 74, 0.12);
    color: var(--color-success);
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-success);
    animation: pop 600ms var(--ease-out-soft);
}
@keyframes pop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
.thanks__check svg { width: 48px; height: 48px; stroke: currentColor; fill: none; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 600ms 400ms forwards var(--ease-out-soft); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.thanks h1 { font-size: clamp(2rem, 5vw, var(--fs-72)); margin-bottom: var(--sp-3); line-height: 1; }
.thanks h1 em { font-style: normal; color: var(--color-accent); }
.thanks__order {
    display: inline-block;
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-text);
}
.thanks__order span { color: var(--color-text-dim); font-weight: 500; margin-right: var(--sp-2); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--fs-12); }
.thanks__lead { margin-top: var(--sp-4); margin-bottom: var(--sp-8); font-size: var(--fs-16); }

.thanks-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-10);
    text-align: left;
}
@media (max-width: 768px) { .thanks-steps { grid-template-columns: 1fr; } }
.thanks-step {
    padding: var(--sp-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}
.thanks-step__icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(225,29,46,0.1);
    color: var(--color-accent);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
}
.thanks-step h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-16); margin-bottom: var(--sp-2); }
.thanks-step p { font-size: var(--fs-13); color: var(--color-text-dim); }

.thanks-confetti {
    position: fixed; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: var(--z-toast);
}
.thanks-confetti span {
    position: absolute;
    top: -10vh;
    width: 8px; height: 12px;
    background: var(--color-accent);
    opacity: 0.9;
    animation: confetti 2.2s ease-in forwards;
}

@keyframes confetti {
    0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
    100% { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(720deg); opacity: 0; }
}