/* Imports primero — requerido por postcss-import */
/* ============================================================
   TIENDA PIEDRA ANGULAR — CSS Principal
   Variables, reset, tipografía y utilidades globales.
   ============================================================ */
/* ── Variables ─────────────────────────────────────────────── */
:root {
    /* Colores — extraídos de piedra.do */
    --color-primary:        #fdfdfd;   /* header / nav / footer bg */
    --color-primary-hover:  #f0f0f0;
    --color-accent:         #f8b26f;   /* botones, links, detalles */
    --color-accent-hover:   #e09a57;
    --color-secondary:      #1a1a1a;   /* botones secundarios, hero bg */
    --color-bg:             #f0f0f0;   /* fondo general de la página */
    --color-bg-alt:         #ffffff;   /* cards, elementos elevados */
    --color-text:           #000000;   /* texto principal */
    --color-text-muted:     #666666;
    --color-border:         #e0e0e0;

    /* Tipografías — piedra.do usa Poppins para todo */
    --font-heading:         'Poppins', sans-serif;
    --font-body:            'Poppins', sans-serif;
    --font-mono:            'Space Mono', ui-monospace, monospace;  /* precios */

    /* Tamaños de fuente (escala modular 1.25) */
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;

    /* Espaciado */
    --space-1:    0.25rem;
    --space-2:    0.5rem;
    --space-3:    0.75rem;
    --space-4:    1rem;
    --space-6:    1.5rem;
    --space-8:    2rem;
    --space-12:   3rem;
    --space-16:   4rem;
    --space-24:   6rem;

    /* Layout */
    --container-max:  1600px;
    --container-pad:  1.5rem;

    /* Radio de bordes */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-full:  9999px;

    /* Sombras */
    --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:   0 8px 24px rgba(0,0,0,.12);

    /* Transiciones */
    --transition:  0.2s ease;
}
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family:    var(--font-body);
    font-size:      var(--text-base);
    color:          var(--color-text);
    background:     var(--color-bg);
    line-height:    1.6;
    -webkit-font-smoothing: antialiased;
    /* padding-left y padding-top los gestiona header.css */
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
    font-family:  var(--font-heading);
    line-height:  1.2;
    font-weight:  700;
}
/* ── Layout ─────────────────────────────────────────────────── */
.container {
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    0 var(--container-pad);
}
.section {
    padding: var(--space-16) 0;
}
.section__title {
    font-size:     var(--text-3xl);
    margin-bottom: var(--space-8);
    text-align:    center;
}
.section__cta-wrap {
    text-align:  center;
    margin-top:  var(--space-8);
}
/* ── Botones ─────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         10px 24px;
    border-radius:   0;
    font-family:     var(--font-body);
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  0.02em;
    cursor:          pointer;
    border:          1.5px solid transparent;
    transition:      background var(--transition), color var(--transition),
                     border-color var(--transition), opacity var(--transition);
    text-decoration: none;
    line-height:     1;
    white-space:     nowrap;
}
.btn:hover  { opacity: .88; }
.btn:active { opacity: 1; transform: scale(.98); }
/* Acento — naranja (botón primario) */
.btn--accent {
    background:   var(--color-accent);
    color:        #fff;
    border-color: var(--color-accent);
}
.btn--accent:hover {
    background:   var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color:        #fff;
    opacity:      1;
}
/* Ghost — borde blanco, transparente (sobre hero oscuro) */
.btn--ghost {
    background:   transparent;
    color:        #fff;
    border-color: rgba(255,255,255,.7);
}
.btn--ghost:hover {
    border-color: #fff;
    color:        #fff;
    opacity:      1;
}
/* Outline oscuro (sobre fondos claros) */
.btn--outline {
    background:   transparent;
    color:        var(--color-text);
    border-color: var(--color-text);
}
.btn--outline:hover {
    background:   var(--color-text);
    color:        #fff;
    opacity:      1;
}
/* Secundario oscuro */
.btn--secondary {
    background:   var(--color-secondary);
    color:        #fff;
    border-color: var(--color-secondary);
}
/* ══════════════════════════════════════════════════════════════
   HERO — Bento Grid (5 celdas)
   ══════════════════════════════════════════════════════════════ */
/* Sección wrapper — a sangre completa (ocupa todo el ancho del contenido) */
.hero {
    margin: 0 0 70px;
}
/* Grid bento — centrado con el mismo max-width que .container */
.hero__grid {
    display:               grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    grid-template-rows:    1.4fr 1fr;
    gap:                   10px;
    padding:               10px;
    height:                calc(100vh - var(--header-height, 52px));
    min-height:            600px;
    background:            #1a1a1a;
}
/* Base de todas las celdas bento */
.bento-cell {
    overflow: hidden;
    position: relative;
}
/* ── A: Principal (imagen + título) ──────────────────────────── */
.bento-cell--main {
    grid-column:     1;
    grid-row:        1;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         32px;
}
.bento-bg {
    position:   absolute;
    inset:      0;
    background: #111 center/cover no-repeat;
    transition: transform 12s ease;
}
.bento-cell--main:hover .bento-bg { transform: scale(1.04); }
.bento-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top,
        rgba(0,0,0,.90) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.12) 100%);
}
.bento-cell__content { position: relative; z-index: 2; }
.bento-eyebrow {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.36);
    margin:         0 0 18px;
}
.bento-title {
    font-size:      clamp(1.5rem, 4.2vw, 3.5rem);
    font-weight:    900;
    letter-spacing: -0.03em;
    color:          #fff;
    line-height:    1;
    margin:         0;
}
/* ── B: Producto destacado (span 2 filas) ────────────────────── */
.bento-cell--product {
    grid-column:     2;
    grid-row:        1 / 3;
    background:      #1a1a1a;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
}
.bento-prod-img {
    position:   absolute;
    inset:      0;
    background: #1a1a1a center/cover no-repeat;
    transition: transform 0.6s ease;
}
.bento-cell--product:hover .bento-prod-img { transform: scale(1.05); }
.bento-prod-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,.84) 0%, transparent 55%);
}
.bento-prod-info {
    position:        relative;
    z-index:         2;
    padding:         20px;
    display:         flex;
    flex-direction:  column;
    gap:             6px;
}
.bento-prod-badge {
    display:        inline-block;
    align-self:     flex-start;
    background:     #d63638;
    color:          #fff;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding:        3px 9px;
    border-radius:  0;
    line-height:    1;
}
.bento-prod-name {
    font-size:      clamp(1rem, 1.4vw, 1.25rem);
    font-weight:    700;
    letter-spacing: 0.01em;
    color:          #fff;
    line-height:    1.25;
}
.bento-prod-price {
    font-family: var(--font-mono);
    font-size:   13px;
    font-weight: 700;
    color:       rgba(255, 255, 255, .9);
}
.bento-prod-price del {
    font-weight:     400;
    color:           rgba(255,255,255,.38);
    font-size:       11px;
    margin-right:    4px;
    text-decoration: line-through;
}
/* ── C: Segundo producto destacado — Gorra ───────────────────── */
.bento-cell--stats {
    grid-column:     3;
    grid-row:        1;
    background:      #1a1a1a;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
}
.bento-cell--stats:hover .bento-prod-img { transform: scale(1.05); }
/* ── D: CTA (fondo naranja) — moderno / minimalista ──────────── */
.bento-cell--cta {
    grid-column:     1;
    grid-row:        2;
    background:      var(--color-accent);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    gap:             18px;
    padding:         28px 32px;
    position:        relative;
    overflow:        hidden;
}
/* Brillo cálido sutil al hover */
.bento-cell--cta::before {
    content:        "";
    position:       absolute;
    inset:          0;
    background:     radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.30), transparent 55%);
    opacity:        0;
    transition:     opacity .5s ease;
    pointer-events: none;
}
.bento-cell--cta:hover::before { opacity: 1; }
/* Flecha decorativa */
.bento-cta-arrow-deco {
    position:   absolute;
    top:        22px;
    right:      24px;
    color:      #1a1a1a;
    opacity:    .16;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}
.bento-cta-arrow-deco svg { width: 48px; height: 48px; }
.bento-cell--cta:hover .bento-cta-arrow-deco {
    transform: translate(6px, -6px);
    opacity:   .26;
}
.bento-cta-text {
    position:       relative;
    font-size:      clamp(1.1rem, 2.5vw, 1.85rem);
    font-weight:    600;
    color:          #1a1a1a;
    letter-spacing: -0.01em;
    line-height:    1.25;
    margin:         0;
    max-width:      20ch;
}
.bento-cta-btn {
    position:        relative;
    align-self:      flex-start;
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    background:      #1a1a1a;
    color:           #fff;
    font-family:     var(--font-body);
    font-size:       12px;
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    padding:         13px 22px;
    border-radius:   0;
    text-decoration: none;
    transition:      background .25s ease, transform .25s ease;
}
.bento-cta-btn svg {
    width:      15px;
    height:     15px;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.bento-cta-btn:hover     { background: #000; color: #fff; transform: translateY(-1px); }
.bento-cta-btn:hover svg { transform: translateX(4px); }
/* ── E: Evento destacado ─────────────────────────────────────── */
.bento-cell--offers {
    grid-column:     3;
    grid-row:        2;
    background:      #111;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         24px;
}
.bento-ev-bg {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.bento-ev-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.30) 0%,
        rgba(0,0,0,.10) 35%,
        rgba(0,0,0,.75) 100%
    );
}
.bento-ev-top {
    position:        relative;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.bento-ev-tag {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.55);
    background:     rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    padding:        4px 10px;
    border-radius:  var(--radius-sm);
}
.bento-ev-date {
    font-size:      11px;
    font-weight:    800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-accent);
    background:     rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    padding:        4px 10px;
    border-radius:  var(--radius-sm);
}
.bento-ev-bottom {
    position:       relative;
    z-index:        2;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.bento-ev-name {
    position:       absolute;
    right:          20px;
    bottom:         20px;
    z-index:        2;
    writing-mode:   vertical-rl;
    transform:      rotate(180deg);
    text-transform: uppercase;
    font-size:      12px;
    font-weight:    400;
    letter-spacing: 0.1em;
    color:          #fff;
    line-height:    1;
    margin:         0;
}
.bento-ev-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    align-self:      flex-start;
    background:      var(--color-accent);
    color:           #1a1a1a;
    font-family:     var(--font-body);
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    padding:         10px 16px;
    border-radius:   0;
    text-decoration: none;
    margin-top:      4px;
    transition:      opacity .2s ease;
}
.bento-ev-btn:hover { opacity: .82; color: #1a1a1a; }
.bento-ev-btn__price {
    background:     rgba(0,0,0,.18);
    border-radius:  0;
    padding:        2px 7px;
    font-family:    var(--font-mono);
    font-size:      10px;
    font-weight:    700;
}
@media (prefers-reduced-motion: reduce) {
    .bento-bg { transition: none; }
}
/* ══════════════════════════════════════════════════════════════
   SECCIONES GENERALES
   ══════════════════════════════════════════════════════════════ */
.section {
    padding: var(--space-16) 0;
}
.section__header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    margin-bottom:   var(--space-8);
    gap:             var(--space-4);
}
.section__title {
    font-size:   var(--text-2xl);
    font-weight: 700;
    margin:      0;
}
.section__link {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--color-text-muted);
    white-space: nowrap;
    transition:  color var(--transition);
}
.section__link:hover { color: var(--color-accent); }
.section__cta-wrap {
    text-align: center;
    margin-top: var(--space-8);
}
.no-products {
    text-align: center;
    color:      var(--color-text-muted);
    padding:    var(--space-12) 0;
    font-size:  var(--text-sm);
}
/* ══════════════════════════════════════════════════════════════
   CATEGORÍAS GRID
   ══════════════════════════════════════════════════════════════ */
.categories-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-4);
}
.category-card {
    display:         block;
    border-radius:   var(--radius-md);
    overflow:        hidden;
    background:      var(--color-bg-alt);
    box-shadow:      var(--shadow-sm);
    text-decoration: none;
    color:           inherit;
    transition:      box-shadow var(--transition), transform var(--transition);
}
.category-card:hover {
    box-shadow: var(--shadow-lg);
    transform:  translateY(-3px);
    color:      inherit;
}
.category-card__img {
    position:   relative;
    height:     220px;
    background: var(--color-bg-alt) center/cover no-repeat;
    overflow:   hidden;
}
.category-card__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 60%);
    transition: opacity var(--transition);
}
.category-card:hover .category-card__overlay { opacity: .7; }
.category-card__body {
    padding: 14px 16px 16px;
}
.category-card__name {
    font-size:     var(--text-base);
    font-weight:   700;
    margin-bottom: 4px;
}
.category-card__meta {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   var(--text-xs);
    font-weight: 500;
    color:       var(--color-text-muted);
    transition:  color var(--transition);
}
.category-card:hover .category-card__meta { color: var(--color-accent); }
/* ══════════════════════════════════════════════════════════════
   PRODUCTS GRID (WooCommerce loop) → usa el grid del tema
   El <ul class="products"> que abre WC se comporta como
   .product-cards-grid; cada card ya es .product-card.
   ══════════════════════════════════════════════════════════════ */
ul.products {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-12) var(--space-8);
    list-style:            none;
    padding:               0;
    margin:                0;
}
/* Quita el margen/ancho que WC asigna a cada item del loop */
ul.products li.product,
ul.products li.product-card {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}
/* El precio del loop (price_html de WC) hereda el estilo de la card */
.product-card__price .amount { font-family: var(--font-mono); }
/* Paginación de WooCommerce → estilo .shop-pagination */
.woocommerce-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: clamp(3rem, 6vw, 5rem);
}
.woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination ul li { margin: 0; }
.woocommerce-pagination a,
.woocommerce-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 6px;
    border: 1px solid var(--color-border);
    font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.woocommerce-pagination a:hover { border-color: var(--color-secondary); color: var(--color-text); }
.woocommerce-pagination .current {
    background: var(--color-secondary); border-color: var(--color-secondary); color: #fff;
}
@media ( max-width: 1024px ) { ul.products { grid-template-columns: repeat(2, 1fr); } }
@media ( max-width: 399.98px ) { ul.products { grid-template-columns: 1fr; } }
/* ══════════════════════════════════════════════════════════════
   PRODUCTO INDIVIDUAL — "Espécimen en exhibición"
   Escenario oscuro inmersivo · nombre vertical gigante ·
   specs como ficha técnica · barra de compra fija inferior.
   ══════════════════════════════════════════════════════════════ */
.product-stage {
    position:   relative;
    background: #0d0d0d;
    color:      #fff;
    overflow:   hidden;
    isolation:  isolate;
    min-height: calc(100vh - var(--header-height));
}
.product-stage::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60% 60% at 72% 38%, rgba(248,178,111,.16), transparent 60%),
        radial-gradient(50% 50% at 20% 90%, rgba(255,255,255,.05), transparent 60%);
}
.product-stage__watermark {
    position:       absolute;
    top:            50%;
    right:          clamp(-0.5rem, 1vw, 1rem);
    transform:      translateY(-50%) rotate(180deg);
    writing-mode:   vertical-rl;
    font-family:    var(--font-heading);
    font-weight:    800;
    font-size:      clamp(4rem, 13vw, 12rem);
    letter-spacing: -0.03em;
    line-height:    0.8;
    color:          rgba(255,255,255,.04);
    z-index:        0;
    pointer-events: none;
    white-space:    nowrap;
    text-transform: uppercase;
}
.product-stage__inner {
    position:   relative;
    z-index:    2;
    display:    grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap:        clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding:    clamp(5rem, 9vw, 8rem) clamp(1.5rem, 4vw, 4rem) clamp(7rem, 10vw, 9rem);
}
.product-stage__index {
    position:   absolute;
    top:        clamp(1.5rem, 3vw, 2.5rem);
    left:       clamp(1.5rem, 4vw, 4rem);
    z-index:    3;
    font-family: var(--font-mono);
    font-size:  11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:      rgba(255,255,255,.45);
}
.product-stage__index a { color: rgba(255,255,255,.45); }
.product-stage__index a:hover { color: var(--color-accent); }
.product-stage__index span { color: #fff; }
/* ── Escenario de imagen ──────────────────────────────────── */
.specimen {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 18px;
}
.specimen__frame {
    position:      relative;
    width:         min(100%, 540px);
    aspect-ratio:  3 / 4;
    overflow:      hidden;
    background:    rgba(255,255,255,.02);
    border:        1px solid rgba(255,255,255,.08);
    box-shadow:    0 40px 80px -20px rgba(0,0,0,.6);
    cursor:        zoom-in;
}
.specimen__img {
    width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; -webkit-user-drag: none;
}
.specimen__frame:hover .specimen__img { transform: scale(1.04); }
.specimen__tag {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: #0d0d0d; background: var(--color-accent); padding: 6px 11px;
}
/* Pista "ampliar" en la esquina */
.specimen__expand {
    position: absolute; bottom: 16px; right: 16px; z-index: 3;
    display: flex; align-items: center; gap: 7px;
    padding: 8px 12px; background: rgba(13,13,13,.7); backdrop-filter: blur(6px);
    color: #fff; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none;
    transition: opacity var(--transition);
}
.specimen__frame:hover .specimen__expand { background: var(--color-accent); color: #0d0d0d; }
.specimen__expand svg { width: 13px; height: 13px; }
/* Thumbs FUERA del marco (ya no se cortan) */
.specimen__thumbs { display: flex; gap: 10px; justify-content: center; }
.specimen__thumb {
    width: 56px; height: 56px; -o-object-fit: cover; object-fit: cover; background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.15); cursor: pointer; opacity: .5;
    transition: opacity var(--transition), border-color var(--transition);
}
.specimen__thumb:hover { opacity: .85; }
.specimen__thumb.is-active { opacity: 1; border-color: var(--color-accent); }
/* ── Lightbox a pantalla completa ─────────────────────────── */
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,8,8,.94);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
    position: relative; width: 100%; height: 100%;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    cursor: zoom-in;
}
.lightbox__stage.is-zoomed  { cursor: grab; }
.lightbox__stage.is-panning { cursor: grabbing; }
.lightbox__img {
    max-width: 88vw; max-height: 86vh; -o-object-fit: contain; object-fit: contain; display: block;
    transform-origin: center center; transition: transform .2s ease;
    will-change: transform; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none;
}
.lightbox__stage.is-panning .lightbox__img,
.lightbox__stage.is-zoomed  .lightbox__img { transition: none; }
.lightbox__close {
    position: absolute; top: 22px; right: 24px; z-index: 3;
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.lightbox__close:hover { background: #fff; color: #0d0d0d; }
.lightbox__close svg { width: 20px; height: 20px; }
/* Controles de zoom dentro del lightbox */
.lightbox__ctrl {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
    display: flex; gap: 1px; background: rgba(255,255,255,.15);
}
.lightbox__ctrl button {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border: none; background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
    color: #fff; cursor: pointer; transition: background var(--transition), opacity var(--transition);
}
.lightbox__ctrl button:hover    { background: var(--color-accent); color: #0d0d0d; }
.lightbox__ctrl button:disabled { opacity: .3; cursor: not-allowed; }
.lightbox__ctrl button svg { width: 17px; height: 17px; }
/* Flechas de navegación entre imágenes */
.lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.2); background: rgba(13,13,13,.5); color: #fff; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.lightbox__nav:hover { background: var(--color-accent); color: #0d0d0d; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__counter {
    position: absolute; top: 26px; left: 24px; z-index: 3;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,.7);
}
@media ( max-width: 640px ) {
    .lightbox__nav { width: 42px; height: 42px; }
    .lightbox__nav--prev { left: 10px; }
    .lightbox__nav--next { right: 10px; }
}
.product-gallery__badge {
    position:       absolute;
    top:            16px;
    left:           16px;
    background:     var(--color-secondary);
    color:          #fff;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        6px 12px;
}
/* ── Panel de info (derecha, sobre oscuro) ────────────────── */
.specimen-info { max-width: 460px; }
.specimen-info__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--color-accent); margin: 0 0 18px;
    display: flex; align-items: center; gap: 12px;
}
.specimen-info__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--color-accent); }
.specimen-info__title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 800; letter-spacing: -0.03em; line-height: 0.98;
    margin: 0 0 22px; color: #fff;
}
.specimen-info__price {
    font-family: var(--font-mono); font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 700; color: #fff; margin: 0 0 28px;
}
.specimen-info__price del { color: rgba(255,255,255,.4); font-weight: 400; margin-right: 10px; }
.specimen-info__price ins { text-decoration: none; color: var(--color-accent); }
.specimen-info__desc { font-size: 0.95rem; line-height: 1.75; color: rgba(255,255,255,.6); margin: 0 0 32px; }
/* Specs ficha técnica */
.spec-sheet { margin: 0 0 32px; border-top: 1px solid rgba(255,255,255,.12); }
.spec-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12);
    font-family: var(--font-mono); font-size: 12px;
}
.spec-row__key { color: rgba(255,255,255,.45); letter-spacing: 0.08em; text-transform: uppercase; }
.spec-row__val { color: #fff; text-align: right; }
/* Opciones talla / color (oscuro) */
.specimen-option { margin-bottom: 26px; }
.specimen-option__label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: #fff; margin-bottom: 12px;
}
.specimen-option__hint {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400;
    letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.5);
}
a.specimen-option__hint { color: var(--color-accent); }
.spec-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-size {
    min-width: 46px; height: 46px; padding: 0 12px;
    border: 1px solid rgba(255,255,255,.2); background: transparent;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #fff;
    cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.spec-size:hover     { border-color: #fff; }
.spec-size.is-active { background: #fff; border-color: #fff; color: #0d0d0d; }
.spec-size:disabled  { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.spec-swatches { display: flex; gap: 10px; }
.spec-swatch {
    width: 32px; height: 32px; border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,.3); cursor: pointer;
    outline: 2px solid transparent; outline-offset: 2px;
    transition: outline-color var(--transition);
}
.spec-swatch.is-active { outline-color: var(--color-accent); }
/* ── Barra de compra fija (sticky bottom) ─────────────────── */
.buy-bar {
    position: fixed; bottom: 0; left: var(--sidebar-width); right: 0; z-index: 150;
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
    padding: 14px clamp(1.5rem, 4vw, 4rem);
    background: rgba(13,13,13,.82); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.12);
    transform: translateY(0); transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.buy-bar.is-hidden { transform: translateY(110%); }
.buy-bar__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buy-bar__name { font-weight: 600; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar__price { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent); }
.buy-bar__spacer { flex: 1; }
.buy-qty { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.2); flex-shrink: 0; }
.buy-qty button { width: 42px; height: 48px; border: none; background: transparent; color: #fff; font-size: 18px; cursor: pointer; transition: background var(--transition); }
.buy-qty button:hover { background: rgba(255,255,255,.1); }
.buy-qty input {
    width: 40px; height: 48px; border: none;
    border-left: 1px solid rgba(255,255,255,.2); border-right: 1px solid rgba(255,255,255,.2);
    background: transparent; text-align: center;
    font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fff; -moz-appearance: textfield;
}
.buy-qty input::-webkit-outer-spin-button,
.buy-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-bar__add {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 50px; padding: 0 clamp(1.5rem, 4vw, 3rem);
    border: none; background: var(--color-accent); color: #0d0d0d;
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; flex-shrink: 0;
    transition: background var(--transition), transform var(--transition);
}
.buy-bar__add:hover { background: #fff; transform: translateY(-1px); }
.buy-bar__add svg { width: 17px; height: 17px; }
/* ── Detalle inferior (fondo claro) ───────────────────────── */
.product-detail { padding: clamp(3rem, 7vw, 6rem) 0; }
.product-detail__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.product-detail__label {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--color-accent-hover); position: sticky; top: 120px;
}
.product-detail__body { max-width: 60ch; }
.product-detail__body h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 20px; }
.product-detail__body p { line-height: 1.85; color: var(--color-text-muted); margin: 0 0 18px; }
.product-detail__body ul { list-style: none; margin: 24px 0 0; }
.product-detail__body li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 14px 0; border-top: 1px solid var(--color-border);
    font-family: var(--font-mono); font-size: 13px;
}
.product-detail__body li:last-child { border-bottom: 1px solid var(--color-border); }
.product-detail__body li span:first-child { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.product-detail__body li span:last-child  { color: var(--color-text); font-weight: 700; text-align: right; }
/* ── Responsive ───────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .product-stage__inner { grid-template-columns: 1fr; gap: clamp(3rem, 8vw, 4rem); padding-top: 4rem; }
    .specimen__thumbs { position: static; transform: none; margin-top: 36px; justify-content: center; }
    .specimen-info { max-width: none; }
    .product-stage__watermark { display: none; }
    .product-detail__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .product-detail__label { position: static; }
}
@media ( max-width: 640px ) {
    .buy-bar { left: 0; gap: 12px; padding: 10px 14px; }
    .buy-bar__meta { display: none; }
    .buy-bar__add  { flex: 1; }
}
/* ══════════════════════════════════════════════════════════════
   CARRITO (cart)
   ══════════════════════════════════════════════════════════════ */
.cart-page { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.cart-page__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cart-page__eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--color-accent-hover); margin: 0 0 12px;
}
.cart-page__title {
    font-size: clamp(2.5rem, 8vw, 6rem); text-transform: uppercase;
    font-weight: 400; letter-spacing: -0.03em; line-height: 0.9; margin: 0;
}
.cart-page__count {
    font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); margin: 14px 0 0;
}
.cart-layout { /* una sola columna; el resumen va al final */ }
/* ── Lista de ítems ───────────────────────────────────────── */
.cart-items { border-top: 1px solid var(--color-secondary); }
.cart-item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
    align-items: start;
    transition: opacity .35s ease, transform .35s ease;
}
.cart-item.is-removing { opacity: 0; transform: translateX(-16px); }
.cart-item__img {
    width: 96px; aspect-ratio: 3/4; -o-object-fit: cover; object-fit: cover; background: #e8e8e5; display: block;
}
.cart-item__main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cart-item__name {
    font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0;
}
.cart-item__name a { color: var(--color-text); }
.cart-item__name a:hover { color: var(--color-accent-hover); }
.cart-item__variant {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--color-text-muted);
}
.cart-item__remove {
    align-self: flex-start; margin-top: 4px;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-text-muted);
    transition: color var(--transition);
}
.cart-item__remove:hover { color: #c0392b; }
.cart-item__remove svg { width: 13px; height: 13px; }
.cart-item__side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.cart-item__price { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--color-text); }
/* Selector de cantidad (claro) — sin fondo, borde negro */
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--color-secondary); }
.cart-qty button {
    width: 36px; height: 40px; border: none; background: transparent;
    font-size: 16px; color: var(--color-text); cursor: pointer; transition: opacity var(--transition);
}
.cart-qty button:hover { opacity: .55; }
.cart-qty input {
    width: 38px; height: 40px; border: none; background: transparent;
    text-align: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    color: var(--color-text); -moz-appearance: textfield;
}
.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ── Resumen simple (al final, alineado a la derecha) ─────── */
.cart-summary {
    display: flex; flex-direction: column; align-items: flex-end;
    margin-top: clamp(1.5rem, 3vw, 2.5rem); text-align: right;
}
.cart-summary__total-label {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 4px;
}
.cart-summary__total-amount {
    font-family: var(--font-mono); font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700; color: var(--color-text); line-height: 1; margin: 0;
}
.cart-summary__note {
    font-size: 12px; color: var(--color-text-muted); margin: 12px 0 0; max-width: 320px;
}
/* Feedback al recalcular el carrito (AJAX) */
.woocommerce-cart-form.is-updating { opacity: .55; pointer-events: none; transition: opacity .2s ease; }
.cart-summary__total-amount { transition: opacity .2s ease; }
.cart-checkout {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 280px; height: 56px; margin-top: 22px; padding: 0 32px;
    border: none; background: var(--color-secondary); color: #fff;
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; cursor: pointer; transition: background var(--transition), transform var(--transition);
}
.cart-checkout:hover { background: #000; transform: translateY(-1px); }
.cart-checkout svg { width: 16px; height: 16px; }
.cart-summary__cards { display: flex; gap: 8px; margin-top: 18px; }
.cart-summary__cards img { width: 42px; height: 28px; }
.cart-continue {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-text-muted); transition: color var(--transition);
}
.cart-continue:hover { color: var(--color-accent-hover); }
.cart-continue svg { width: 14px; height: 14px; }
/* ── Estado vacío ─────────────────────────────────────────── */
.cart-empty { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.cart-empty svg { width: 56px; height: 56px; color: var(--color-border); margin: 0 auto 24px; }
.cart-empty h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; margin: 0 0 12px; }
.cart-empty p { color: var(--color-text-muted); margin: 0 0 28px; }
/* ── Responsive ───────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .cart-item { grid-template-columns: 72px 1fr; }
    .cart-item__img { width: 72px; }
    .cart-item__side {
        grid-column: 1 / -1; flex-direction: row; align-items: center;
        justify-content: space-between; margin-top: 4px;
    }
    .cart-summary { align-items: stretch; text-align: left; }
    .cart-checkout { width: 100%; min-width: 0; }
    .cart-summary__cards { justify-content: flex-start; }
}
/* ══════════════════════════════════════════════════════════════
   MINI-CART — panel lateral (drawer) global
   ══════════════════════════════════════════════════════════════ */
.cart-drawer-overlay {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.cart-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.cart-drawer {
    position: fixed; top: 0; right: 0; z-index: 999;
    height: 100vh; height: 100dvh; width: min(90vw, 420px);
    background: var(--color-bg-alt); color: var(--color-text);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.4,0,.1,1);
    box-shadow: -16px 0 50px rgba(0,0,0,.18);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px clamp(1.25rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.cart-drawer__title {
    font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0;
}
.cart-drawer__title span { color: var(--color-text-muted); font-family: var(--font-mono); }
.cart-drawer__close {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: none; background: none; cursor: pointer;
    color: var(--color-text); transition: opacity var(--transition);
}
.cart-drawer__close:hover { opacity: .6; }
.cart-drawer__close svg { width: 20px; height: 20px; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: clamp(1.25rem, 3vw, 1.75rem); }
.cd-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.cd-item:first-child { padding-top: 0; }
.cd-item__img { width: 64px; height: 80px; -o-object-fit: cover; object-fit: cover; background: #e8e8e5; }
.cd-item__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cd-item__name { font-size: 13px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--color-text); }
.cd-item__variant { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.cd-qty { display: inline-flex; align-items: center; border: 1px solid var(--color-secondary); align-self: flex-start; }
.cd-qty button { width: 28px; height: 30px; border: none; background: transparent; color: var(--color-text); font-size: 14px; cursor: pointer; transition: opacity var(--transition); }
.cd-qty button:hover { opacity: .55; }
.cd-qty input {
    width: 30px; height: 30px; border: none; background: transparent; text-align: center;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--color-text); -moz-appearance: textfield;
}
.cd-qty input::-webkit-outer-spin-button, .cd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cd-item__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cd-item__price { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.cd-item__remove { background: none; border: none; cursor: pointer; padding: 0; color: var(--color-text-muted); transition: color var(--transition); }
.cd-item__remove:hover { color: #c0392b; }
.cd-item__remove svg { width: 14px; height: 14px; }
.cart-drawer__empty { text-align: center; color: var(--color-text-muted); padding: 40px 0; }
.cart-drawer__empty svg { width: 44px; height: 44px; color: var(--color-border); margin: 0 auto 16px; }
.cart-drawer__foot {
    flex-shrink: 0; padding: clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid var(--color-border);
}
.cart-drawer__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cart-drawer__row span:first-child { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.cart-drawer__row span:last-child { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--color-text); }
.cart-drawer__note { font-size: 11px; color: var(--color-text-muted); margin: 0 0 14px; }
.cart-drawer__checkout {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 54px; border: none; background: var(--color-accent); color: #0d0d0d;
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; cursor: pointer; text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}
.cart-drawer__checkout:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-1px); }
.cart-drawer__checkout svg { width: 16px; height: 16px; }
.cart-drawer__viewcart {
    display: block; text-align: center; margin-top: 14px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-text-muted); transition: color var(--transition);
}
.cart-drawer__viewcart:hover { color: var(--color-accent-hover); }
/* ══════════════════════════════════════════════════════════════
   CHECKOUT — estilo Stripe (resumen izq · formulario der)
   El pago se completa en Azul (redirección): NO se piden datos de tarjeta.
   ══════════════════════════════════════════════════════════════ */
.checkout-split {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: start;
    min-height: calc(100vh - var(--header-height));
}
/* ── Panel resumen (izquierda, oscuro) — fijo al hacer scroll ─ */
.co-summary {
    position: sticky; top: var(--header-height);
    align-self: start;
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    background: var(--color-secondary); color: #fff;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
    display: flex; flex-direction: column; justify-content: center;
}
/* Alinea el contenido a un eje, como Stripe */
.co-summary__inner { max-width: 420px; width: 100%; margin-left: auto; }
.co-summary__back {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(2rem, 4vw, 3rem);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,.6); transition: color var(--transition);
}
.co-summary__back:hover { color: var(--color-accent); }
.co-summary__back svg { width: 15px; height: 15px; }
.co-summary__label {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); margin: 0 0 6px;
}
.co-summary__amount {
    font-family: var(--font-mono); font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700; color: #fff; line-height: 1; margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.co-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
.co-item { display: flex; gap: 16px; align-items: center; }
.co-item__img { width: 56px; height: 70px; background: rgba(255,255,255,.06) center/cover no-repeat; flex-shrink: 0; position: relative; }
.co-item__qty {
    position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent); color: #0d0d0d;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; border-radius: 50%;
}
.co-item__main { flex: 1; min-width: 0; }
.co-item__name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
.co-item__variant { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; }
.co-item__price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.co-row {
    display: flex; justify-content: space-between; padding: 11px 0; font-size: 14px;
    color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.14);
}
.co-row span:last-child { font-family: var(--font-mono); color: #fff; }
.co-row--total { font-size: 16px; font-weight: 700; color: #fff; padding-top: 16px; }
.co-row--total span:last-child { font-size: 18px; color: var(--color-accent); }
.co-promo { display: flex; gap: 0; margin-top: 22px; }
.co-promo input {
    flex: 1; height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.2); background: transparent;
    color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.co-promo input::-moz-placeholder { color: rgba(255,255,255,.4); }
.co-promo input::placeholder { color: rgba(255,255,255,.4); }
.co-promo button {
    height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff;
    font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: background var(--transition), color var(--transition);
}
.co-promo button:hover { background: #fff; color: var(--color-secondary); }
/* ── Panel formulario (derecha, claro) ────────────────────── */
.co-form-pane {
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
    display: flex; flex-direction: column;
}
.co-form { max-width: 420px; width: 100%; }
.co-form__legend {
    font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-text); margin: 0 0 18px;
}
.co-form__legend:not(:first-child) { margin-top: 36px; }
.field { margin-bottom: 14px; }
.field__label {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 7px;
}
.field input, .field select {
    width: 100%; height: 50px; padding: 0 14px;
    border: 1px solid var(--color-border); background: var(--color-bg-alt);
    font-family: var(--font-body); font-size: 14px; color: var(--color-text);
    transition: border-color var(--transition); -moz-appearance: none; appearance: none; -webkit-appearance: none;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--color-secondary); }
.field input::-moz-placeholder { color: var(--color-text-muted); }
.field input::placeholder { color: var(--color-text-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Opciones de entrega (radio-card) */
.opt-cards { display: flex; flex-direction: column; gap: 10px; }
.opt-card {
    display: flex; align-items: center; gap: 14px; padding: 15px;
    border: 1px solid var(--color-border); cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.opt-card:hover { border-color: var(--color-text-muted); }
.opt-card.is-active { border-color: var(--color-secondary); background: var(--color-bg); }
.opt-card__radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--color-secondary); flex-shrink: 0; position: relative; }
.opt-card.is-active .opt-card__radio::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 9px; height: 9px; border-radius: 50%; background: var(--color-secondary);
}
.opt-card__text { flex: 1; }
.opt-card__name { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); }
.opt-card__desc { font-size: 12px; color: var(--color-text-muted); }
.opt-card__price { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--color-text); }
/* Aviso de pago vía Azul (sin pedir tarjeta) */
.co-pay-note {
    display: flex; gap: 14px; align-items: flex-start; margin-top: 18px;
    padding: 16px; border: 1px solid var(--color-border); background: var(--color-bg);
}
.co-pay-note__icon { flex-shrink: 0; }
.co-pay-note__icon img { width: 48px; height: 32px; }
.co-pay-note__txt { font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.co-pay-note__txt strong { color: var(--color-text); display: block; margin-bottom: 2px; }
/* Botón pagar */
.co-pay-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 56px; margin-top: 26px;
    border: none; background: var(--color-accent); color: #0d0d0d;
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; cursor: pointer; transition: background var(--transition), transform var(--transition);
}
.co-pay-btn:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-1px); }
.co-pay-btn svg { width: 16px; height: 16px; }
.co-secure {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--color-text-muted);
}
.co-secure svg { width: 14px; height: 14px; color: var(--color-accent-hover); }
/* ── Puente: campos nativos de WooCommerce → estilo del tema ── */
.co-form .woocommerce-billing-fields > h3,
.co-form .woocommerce-additional-fields > h3,
.co-form #ship-to-different-address > label,
.co-form .woocommerce-shipping-fields h3 {
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-text); margin: 0 0 18px;
}
.co-form .woocommerce-additional-fields { margin-top: 32px; }
/* Filas/columnas de campos */
.co-form .form-row { margin-bottom: 14px; }
.co-form .form-row-first, .co-form .form-row-last {
    display: inline-block; width: calc(50% - 7px); vertical-align: top;
}
.co-form .form-row-first { margin-right: 12px; }
.co-form label {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 7px;
}
.co-form label .required { color: var(--color-accent-hover); border: none; }
.co-form .input-text,
.co-form input[type="text"], .co-form input[type="email"], .co-form input[type="tel"],
.co-form input[type="password"], .co-form textarea, .co-form .select2-container,
.co-form select {
    width: 100%; height: 50px; padding: 0 14px;
    border: 1px solid var(--color-border); background: var(--color-bg-alt);
    font-family: var(--font-body); font-size: 14px; color: var(--color-text);
    transition: border-color var(--transition); box-shadow: none; line-height: normal;
}
.co-form textarea { height: auto; padding: 12px 14px; min-height: 90px; }
.co-form .input-text:focus, .co-form select:focus, .co-form textarea:focus {
    outline: none; border-color: var(--color-secondary);
}
/* Select2 (país/provincia) */
.co-form .select2-container .select2-selection--single {
    height: 50px; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg-alt);
    display: flex; align-items: center;
}
.co-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px; padding-left: 14px; color: var(--color-text);
}
.co-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }
/* Métodos de pago (radio-cards reestilizados) */
.co-form #payment { background: transparent; border-radius: 0; }
.co-form #payment ul.payment_methods {
    list-style: none; margin: 0 0 18px; padding: 0; border: none;
    display: flex; flex-direction: column; gap: 10px;
}
.co-form #payment ul.payment_methods li {
    border: 1px solid var(--color-border); padding: 15px; margin: 0;
    transition: border-color var(--transition), background var(--transition);
}
.co-form #payment ul.payment_methods li:hover { border-color: var(--color-text-muted); }
.co-form #payment ul.payment_methods li input[type="radio"] { display: none; }
.co-form #payment ul.payment_methods li label {
    display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer;
    font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text);
}
.co-form #payment ul.payment_methods li label::before {
    content: ""; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--color-secondary); flex-shrink: 0; position: relative;
}
.co-form #payment ul.payment_methods li.tpa-selected,
.co-form #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--color-secondary); background: var(--color-bg);
}
.co-form #payment ul.payment_methods li.tpa-selected label::before,
.co-form #payment ul.payment_methods li:has(input:checked) label::before {
    box-shadow: inset 0 0 0 4px var(--color-bg-alt), inset 0 0 0 10px var(--color-secondary);
}
.co-form #payment .payment_box {
    background: var(--color-bg); border: none; margin: 10px 0 0; padding: 14px;
    font-size: 13px; line-height: 1.6; color: var(--color-text-muted);
}
.co-form #payment .payment_box::before { display: none; }
.co-form #payment .payment_box p:last-child { margin-bottom: 0; }
/* Botón "Realizar pedido" → botón de pago del diseño */
.co-form #payment #place_order,
.co-form .woocommerce-checkout-payment #place_order {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 56px; margin-top: 8px; float: none;
    border: none; border-radius: 0; background: var(--color-accent); color: #0d0d0d;
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; cursor: pointer; transition: background var(--transition), transform var(--transition);
}
.co-form #payment #place_order:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-1px); }
.co-form #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 12px; color: var(--color-text-muted); }
/* Tabla de revisión del pedido (la ocultamos: ya está el resumen a la izquierda) */
.co-form .woocommerce-checkout-review-order-table { display: none; }
/* Login/cupón superior de WC */
.co-form-wrap .woocommerce-form-login-toggle,
.co-form-wrap .woocommerce-form-coupon-toggle { display: none; }
/* ── Responsive ───────────────────────────────────────────── */
@media ( max-width: 860px ) {
    .checkout-split { grid-template-columns: 1fr; min-height: 0; }
    .co-form .form-row-first, .co-form .form-row-last { width: 100%; margin-right: 0; display: block; }
    .co-summary__inner, .co-form { max-width: 520px; margin: 0 auto; }
    .co-summary {
        order: 2; position: static; height: auto; overflow: visible; justify-content: flex-start;
    }    /* formulario primero, resumen debajo */
    .co-form-pane { order: 1; }
}
/* ══════════════════════════════════════════════════════════════
   PÁGINAS DE SOPORTE — 404 · búsqueda · contenido
   ══════════════════════════════════════════════════════════════ */
/* ── 404 (divergente: número gigante a sangre) ────────────── */
.error404 {
    position: relative; overflow: hidden; isolation: isolate;
    background: #0d0d0d; color: #fff;
    min-height: calc(100vh - var(--header-height));
    display: flex; align-items: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem);
}
.error404::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(60% 60% at 75% 30%, rgba(248,178,111,.16), transparent 60%);
}
.error404__big {
    position: absolute; z-index: 0; right: clamp(-1rem, -1vw, 0rem); bottom: -8%;
    font-family: var(--font-heading); font-weight: 800; font-size: clamp(14rem, 38vw, 34rem);
    line-height: 0.75; letter-spacing: -0.05em; color: rgba(255,255,255,.05); pointer-events: none;
}
.error404__inner { position: relative; z-index: 2; max-width: 560px; }
.error404__eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--color-accent); margin: 0 0 18px;
    display: flex; align-items: center; gap: 12px;
}
.error404__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--color-accent); }
.error404__title {
    font-family: var(--font-heading); font-weight: 800;
    font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.0; letter-spacing: -0.03em; margin: 0 0 18px;
}
.error404__text { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.6); margin: 0 0 32px; max-width: 42ch; }
.error404__search { display: flex; gap: 0; margin-bottom: 28px; max-width: 420px; }
.error404__search input {
    flex: 1; height: 52px; padding: 0 16px; border: 1px solid rgba(255,255,255,.25); background: transparent;
    color: #fff; font-family: var(--font-body); font-size: 14px;
}
.error404__search input::-moz-placeholder { color: rgba(255,255,255,.4); }
.error404__search input::placeholder { color: rgba(255,255,255,.4); }
.error404__search button {
    height: 52px; width: 52px; border: none; background: var(--color-accent); color: #0d0d0d; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background var(--transition);
}
.error404__search button:hover { background: #fff; }
.error404__search button svg { width: 18px; height: 18px; }
.error404__links { display: flex; gap: 24px; flex-wrap: wrap; }
.error404__link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: #fff; transition: color var(--transition);
}
.error404__link:hover { color: var(--color-accent); }
.error404__link svg { width: 15px; height: 15px; }
/* ── Resultados de búsqueda (cabecera) ────────────────────── */
.search-head {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--color-border);
}
.search-head__eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--color-accent-hover); margin: 0 0 12px;
}
.search-head__title {
    font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin: 0;
}
.search-head__title em { font-style: normal; color: var(--color-accent-hover); }
.search-head__count { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); margin: 14px 0 0; }
/* Barra de búsqueda grande */
.search-bar { display: flex; gap: 0; margin-top: clamp(1.5rem, 3vw, 2rem); max-width: 540px; }
.search-bar input {
    flex: 1; height: 52px; padding: 0 16px; border: 1px solid var(--color-secondary); background: var(--color-bg-alt);
    font-family: var(--font-body); font-size: 14px; color: var(--color-text);
}
.search-bar button {
    height: 52px; width: 52px; border: none; background: var(--color-secondary); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: opacity var(--transition);
}
.search-bar button:hover { opacity: .85; }
.search-bar button svg { width: 18px; height: 18px; }
/* Estado sin resultados */
.search-empty { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.search-empty svg { width: 50px; height: 50px; color: var(--color-border); margin: 0 auto 22px; }
.search-empty h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; margin: 0 0 10px; }
.search-empty p { color: var(--color-text-muted); margin: 0; }
/* ── Página de contenido (Sobre nosotros, Términos…) ──────── */
.page-content { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.page-content__shell { max-width: 760px; margin: 0 auto; }
.page-content__breadcrumb {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.page-content__breadcrumb a { color: var(--color-text-muted); }
.page-content__breadcrumb a:hover { color: var(--color-accent-hover); }
.page-content__breadcrumb span { color: var(--color-text); }
.page-content__eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--color-accent-hover); margin: 0 0 14px;
}
.page-content__title {
    font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.0;
    margin: 0 0 clamp(2rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--color-border);
}
.page-prose { font-size: 16px; line-height: 1.85; color: var(--color-text); }
.page-prose > * + * { margin-top: 1.5rem; }
.page-prose h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 600; letter-spacing: -0.01em; margin-top: 2.5rem; }
.page-prose h3 { font-size: 1.2rem; font-weight: 600; margin-top: 2rem; }
.page-prose p { color: var(--color-text-muted); }
.page-prose strong { color: var(--color-text); }
.page-prose a { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.page-prose ul, .page-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--color-text-muted); }
.page-prose ul { list-style: disc; }
.page-prose ol { list-style: decimal; }
.page-prose blockquote {
    border-left: 2px solid var(--color-accent); padding: 4px 0 4px 22px; margin-left: 0;
    font-style: italic; font-size: 1.3rem; color: var(--color-text);
}
.page-prose hr { border: none; border-top: 1px solid var(--color-border); }
/* ══════════════════════════════════════════════════════════════
   CONFIRMACIÓN DE PEDIDO (thank-you / order-received)
   ══════════════════════════════════════════════════════════════ */
.thankyou { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.ty-shell { max-width: 680px; margin: 0 auto; }
.ty-hero { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ty-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--color-accent); color: #0d0d0d; margin-bottom: 24px;
    animation: tyPop .5s cubic-bezier(.2,.9,.3,1.4) both;
}
.ty-check svg { width: 34px; height: 34px; }
@keyframes tyPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.ty-hero__eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--color-accent-hover); margin: 0 0 12px;
}
.ty-hero__title {
    font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.02; margin: 0 0 16px;
}
.ty-hero__sub { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); margin: 0; }
.ty-hero__sub strong { color: var(--color-text); font-family: var(--font-mono); }
/* Bloque genérico */
.ty-block { border: 1px solid var(--color-border); padding: clamp(1.5rem, 3vw, 2rem); margin-bottom: 18px; }
.ty-block__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-text); margin: 0 0 18px;
}
.ty-block__title svg { width: 16px; height: 16px; color: var(--color-accent-hover); }
/* Bloque de datos bancarios (destacado) */
.ty-bank { border: 1px solid var(--color-secondary); background: var(--color-bg); }
.ty-bank__note { font-size: 13px; line-height: 1.6; color: var(--color-text-muted); margin: 0 0 18px; }
.ty-bank__rows { display: flex; flex-direction: column; gap: 0; }
.ty-bank__row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 13px 0; border-top: 1px solid var(--color-border);
}
.ty-bank__row:last-child { border-bottom: 1px solid var(--color-border); }
.ty-bank__key { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.ty-bank__val { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 10px; }
.ty-copy { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 2px; transition: color var(--transition); }
.ty-copy:hover { color: var(--color-accent-hover); }
.ty-copy svg { width: 15px; height: 15px; display: block; }
/* Resumen de ítems */
.ty-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.ty-item { display: flex; gap: 14px; align-items: center; }
.ty-item__img { width: 50px; height: 62px; background: #e8e8e5 center/cover no-repeat; flex-shrink: 0; position: relative; }
.ty-item__qty {
    position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-secondary); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 700; border-radius: 50%;
}
.ty-item__main { flex: 1; min-width: 0; }
.ty-item__name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ty-item__variant { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; }
.ty-item__price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.ty-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.ty-row span:last-child { font-family: var(--font-mono); color: var(--color-text); }
.ty-row--total { font-weight: 700; color: var(--color-text); }
.ty-row--total span:last-child { font-size: 18px; color: var(--color-accent-hover); }
/* Datos en dos columnas (entrega / pago) */
.ty-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ty-meta__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 8px; }
.ty-meta__body { font-size: 14px; line-height: 1.6; color: var(--color-text); }
/* Acciones */
.ty-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.ty-btn {
    flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; border: none; cursor: pointer; text-decoration: none;
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ty-btn--primary { background: var(--color-accent); color: #0d0d0d; }
.ty-btn--primary:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-1px); }
.ty-btn--ghost { background: transparent; color: var(--color-secondary); border: 1px solid var(--color-secondary); }
.ty-btn--ghost:hover { background: var(--color-secondary); color: #fff; }
.ty-btn svg { width: 16px; height: 16px; }
/* Demo toggle */
.ty-demo {
    display: inline-flex; gap: 1px; margin-bottom: 28px; background: var(--color-border);
}
.ty-demo button {
    padding: 8px 16px; border: none; background: var(--color-bg-alt); cursor: pointer;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted);
}
.ty-demo button.is-active { background: var(--color-secondary); color: #fff; }
@media ( max-width: 560px ) {
    .ty-cols { grid-template-columns: 1fr; }
    .ty-actions { flex-direction: column; }
    .ty-btn { min-width: 0; }
}
/* ══════════════════════════════════════════════════════════════
   MI CUENTA (my-account)
   ══════════════════════════════════════════════════════════════ */
.account { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.account__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.account__eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--color-accent-hover); margin: 0 0 12px;
}
.account__title {
    font-size: clamp(2.5rem, 8vw, 6rem); text-transform: uppercase;
    font-weight: 400; letter-spacing: -0.03em; line-height: 0.9; margin: 0;
}
/* ── Estado NO logueado: formulario con tabs (centrado) ───── */
.auth-pane {
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}
.auth-box {
    width: 100%; max-width: 420px;
    border: 1px solid var(--color-border);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
/* Tabs */
.auth-tabs { display: flex; gap: 0; margin-bottom: 32px; border-bottom: 1px solid var(--color-border); }
.auth-tab {
    flex: 1; padding: 14px 8px 16px; border: none; background: none; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--color-text-muted); position: relative; transition: color var(--transition);
}
.auth-tab::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
    background: var(--color-secondary); transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.66,0,.18,1);
}
.auth-tab:hover { color: var(--color-text); }
.auth-tab.is-active { color: var(--color-text); }
.auth-tab.is-active::after { transform: scaleX(1); }
/* Paneles de formulario */
.auth-form { display: none; }
.auth-form.is-active { display: block; animation: stepIn .35s ease; }
.auth-form__lead { font-size: 13px; color: var(--color-text-muted); margin: 0 0 24px; line-height: 1.6; }
.auth-forgot { display: block; margin: -4px 0 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.auth-forgot:hover { color: var(--color-accent-hover); }
.auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 54px; border: none; cursor: pointer; margin-top: 6px;
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--color-secondary); color: #fff;
    transition: background var(--transition), transform var(--transition);
}
.auth-btn:hover { background: #000; transform: translateY(-1px); }
.auth-btn svg { width: 16px; height: 16px; }
.auth-alt { text-align: center; margin-top: 22px; font-size: 13px; color: var(--color-text-muted); }
.auth-alt button { background: none; border: none; cursor: pointer; font: inherit; color: var(--color-accent-hover); font-weight: 600; }
.auth-alt button:hover { text-decoration: underline; }
/* ── Estado LOGUEADO: minimalista, nav horizontal ─────────── */
.account-dash { max-width: 920px; margin: 0 auto; }
/* Cabecera: saludo grande + salir */
.dash-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.dash-head__hi { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-hover); margin: 0 0 10px; }
.dash-head__name { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.dash-logout {
    display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-text-muted); transition: color var(--transition); padding: 0;
}
.dash-logout:hover { color: #c0392b; }
.dash-logout svg { width: 15px; height: 15px; }
/* Navegación horizontal (tabs minimalistas con subrayado) */
.dash-nav {
    display: flex; gap: clamp(1.25rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--color-border); margin-bottom: clamp(2rem, 4vw, 3rem);
    overflow-x: auto;
    scrollbar-width: none;            /* Firefox: oculta la barra */
    -ms-overflow-style: none;         /* IE/Edge antiguo */
}
.dash-nav::-webkit-scrollbar { display: none; }
/* Chrome/Safari */
.dash-nav__item {
    position: relative; padding: 0 0 16px; border: none; background: none; cursor: pointer; white-space: nowrap;
    font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--color-text-muted);
    transition: color var(--transition);
}
.dash-nav__item::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
    background: var(--color-secondary); transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.66,0,.18,1);
}
.dash-nav__item:hover { color: var(--color-text); }
.dash-nav__item.is-active { color: var(--color-text); font-weight: 600; }
.dash-nav__item.is-active::after { transform: scaleX(1); }
.account-panel { display: none; }
.account-panel.is-active { display: block; animation: stepIn .35s ease; }
.account-panel__title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.account-panel__sub { font-size: 13px; color: var(--color-text-muted); margin: 0 0 28px; }
/* Resumen: stats en línea con divisores (sin cajas) */
.acc-stats { display: flex; gap: 0; margin-bottom: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.acc-stat { flex: 1; padding: 24px 4px; cursor: pointer; transition: background var(--transition); }
.acc-stat + .acc-stat { border-left: 1px solid var(--color-border); }
.acc-stat:hover { background: var(--color-bg); }
.acc-stat__num { font-family: var(--font-mono); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1; }
.acc-stat__label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; }
.acc-subhead { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 16px; }
/* Tabla de pedidos — minimalista */
.acc-table { width: 100%; border-collapse: collapse; }
.acc-table th {
    text-align: left; padding: 0 14px 14px; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-secondary); font-weight: 400;
}
.acc-table td { padding: 18px 14px; font-size: 14px; border-bottom: 1px solid var(--color-border); }
.acc-table tr:hover td { background: var(--color-bg); }
.acc-table td:first-child, .acc-table th:first-child { padding-left: 0; }
.acc-table td:last-child, .acc-table th:last-child { padding-right: 0; text-align: right; }
.acc-order-id { font-family: var(--font-mono); font-weight: 700; }
.acc-amount { font-family: var(--font-mono); font-weight: 700; }
.acc-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-text);
}
.acc-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.acc-badge--done::before { background: #1f7a3d; }
.acc-badge--pending::before { background: var(--color-accent); }
.acc-badge--ship::before { background: var(--color-accent-hover); }
.acc-link { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent-hover); }
.acc-link:hover { text-decoration: underline; }
/* Descargas */
.acc-downloads { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--color-border); }
.acc-download { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.acc-download svg.acc-dl-file { width: 22px; height: 22px; color: var(--color-text-muted); flex-shrink: 0; }
.acc-download__main { flex: 1; min-width: 0; }
.acc-download__name { font-size: 14px; font-weight: 600; }
.acc-download__meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; }
.acc-dl-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
    border: 1px solid var(--color-secondary); background: transparent; color: var(--color-secondary);
    font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; transition: background var(--transition), color var(--transition); white-space: nowrap;
}
.acc-dl-btn:hover { background: var(--color-secondary); color: #fff; }
.acc-dl-btn svg { width: 14px; height: 14px; }
/* Formularios de cuenta */
.acc-form { max-width: 460px; }
/* Demo: toggle de estado */
.acc-demo-toggle {
    display: inline-flex; gap: 1px; margin-bottom: 28px; background: var(--color-border);
}
.acc-demo-toggle button {
    padding: 8px 16px; border: none; background: var(--color-bg-alt); cursor: pointer;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted);
}
.acc-demo-toggle button.is-active { background: var(--color-secondary); color: #fff; }
.account-view { display: none; }
.account-view.is-active { display: block; }
/* ── Responsive ───────────────────────────────────────────── */
@media ( max-width: 560px ) {
    .acc-stats { flex-direction: column; }
    .acc-stat + .acc-stat { border-left: none; border-top: 1px solid var(--color-border); }
    .acc-stat { display: flex; align-items: baseline; gap: 14px; padding: 18px 4px; }
    .acc-stat__label { margin-top: 0; }
    .acc-table thead { display: none; }
    .acc-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
    .acc-table td { border: none; padding: 2px 0; }
    .acc-table td:last-child { text-align: left; grid-column: 1 / -1; }
}
/* ══════════════════════════════════════════════════════════════
   CATÁLOGO / TIENDA (archive-product) — cabecera de página
   ══════════════════════════════════════════════════════════════ */
.shop-hero {
    padding:    clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--color-border);
}
.shop-hero__inner { /* usa .container */ }
.shop-breadcrumb {
    font-family:    var(--font-mono);
    font-size:      11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
    margin:         0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.shop-breadcrumb a       { color: var(--color-text-muted); transition: color var(--transition); }
.shop-breadcrumb a:hover { color: var(--color-accent-hover); }
.shop-breadcrumb span    { color: var(--color-text); }
.shop-hero__eyebrow {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          var(--color-accent-hover);
    margin:         0 0 12px;
}
.shop-hero__title {
    font-size:      clamp(3rem, 12vw, 9rem);
    text-transform: uppercase;
    font-weight:    400;
    letter-spacing: -0.03em;
    line-height:    0.9;
    margin:         0;
}
.shop-hero__intro {
    margin:      clamp(1.25rem, 2.5vw, 2rem) 0 0;
    max-width:   46ch;
    font-size:   clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.65;
    color:       var(--color-text-muted);
}
/* Toolbar: conteo + orden + filtrar */
.shop-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-4);
    padding:         var(--space-8) 0 var(--space-6);
}
.shop-toolbar__count {
    font-family:    var(--font-mono);
    font-size:      12px;
    letter-spacing: 0.06em;
    color:          var(--color-text-muted);
    margin:         0;
}
.shop-toolbar__count strong { color: var(--color-text); font-weight: 700; }
.shop-toolbar__right {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
}
.shop-sort {
    -moz-appearance:     none;
         appearance:     none;
    -webkit-appearance: none;
    border:         none;
    border-bottom:  1.5px solid var(--color-secondary);
    background:     transparent;
    padding:        9px 28px 9px 4px;
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--color-secondary);
    cursor:         pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 4px center;
}
/* Paginación cuadrada */
.shop-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-top:      clamp(3rem, 6vw, 5rem);
}
.shop-pagination a,
.shop-pagination span {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       44px;
    height:          44px;
    padding:         0 6px;
    border:          1px solid var(--color-border);
    font-family:     var(--font-mono);
    font-size:       13px;
    color:           var(--color-text-muted);
    transition:      background var(--transition), color var(--transition), border-color var(--transition);
}
.shop-pagination a:hover {
    border-color: var(--color-secondary);
    color:        var(--color-text);
}
.shop-pagination .current {
    background:   var(--color-secondary);
    border-color: var(--color-secondary);
    color:        #fff;
}
@media ( max-width: 600px ) {
    .shop-toolbar { gap: var(--space-3); }
    .shop-toolbar__right { width: 100%; justify-content: space-between; }
}
/* ══════════════════════════════════════════════════════════════
   PRODUCTOS — cabecera + filtros (moderno / minimalista)
   ══════════════════════════════════════════════════════════════ */
.all-products-section .section__header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--space-6);
    flex-wrap:       wrap;
    margin-bottom:   var(--space-8);
}
/* Badges de los filtros activos (debajo del botón Filtrar) */
.product-filters-active {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    justify-content: flex-end;
    margin:          0 0 var(--space-8);
}
.product-filters-active:not(:empty) { margin-top: var(--space-4); }
.product-filters-active:empty { display: none; }
.product-filter-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        6px 11px;
    background:     transparent;
    color:          #1a1a1a;
    border:         1px solid #1a1a1a;
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.product-filter-badge__x {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    margin:          0;
    border:          none;
    background:      none;
    color:           inherit;
    cursor:          pointer;
    opacity:         .7;
    transition:      opacity var(--transition);
}
.product-filter-badge__x:hover { opacity: 1; }
.product-filter-badge__x svg   { width: 12px; height: 12px; }
.section__eyebrow {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          var(--color-accent-hover);
    margin:         0 0 10px;
}
.all-products-section .section__title {
    font-size:      clamp(2.5rem, 9vw, 90px);   /* 90px en desktop, escala en móvil */
    text-transform: uppercase;
    font-weight:    400;
    letter-spacing: -0.025em;
    line-height:    1;
    margin:         0;
    text-align:     left;
}
/* Botón "Filtrar" — abre el drawer (todas las pantallas). Desktop: negro/blanco */
.product-filters-toggle {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        11px 22px;
    border:         none;
    background:     var(--color-secondary);
    color:          #fff;
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     opacity var(--transition);
}
.product-filters-toggle:hover { opacity: .85; }
/* Panel drawer — entra de derecha a izquierda */
.product-filters {
    position:       fixed;
    top:            0;
    right:          0;
    z-index:        1000;
    height:         100vh;
    height:         100dvh;
    width:          min(82vw, 340px);
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
    padding:        24px;
    background:     #fff;
    box-shadow:     -12px 0 40px rgba(0, 0, 0, .18);
    transform:      translateX(100%);
    transition:     transform .38s cubic-bezier(.4, 0, .1, 1);
    overflow-y:     auto;
}
.product-filters.is-open { transform: translateX(0); }
.product-filters__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   12px;
}
.product-filters__label {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
}
.product-filters__close {
    display:    inline-flex;
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--color-secondary);
    padding:    4px;
}
.product-filter {
    display:         inline-flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             12px;
    padding:         15px 10px;
    border:          none;
    border-bottom:   1px solid var(--color-border);
    border-radius:   0;
    background:      transparent;
    color:           var(--color-text-muted);
    font-family:     var(--font-body);
    font-size:       15px;
    font-weight:     500;
    letter-spacing:  0.02em;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      color var(--transition);
}
.product-filter:hover      { color: var(--color-text); }
.product-filter.is-checked { color: var(--color-text); font-weight: 700; }
/* Texto del filtro en la otra fuente (Space Mono) */
.product-filters__label,
.product-filters__group-title,
.product-filter,
.product-filters__apply,
.product-filters__clear { font-family: var(--font-mono); }
.product-filter { font-size: 14px; letter-spacing: 0; }
/* Grupos del panel separados por título + línea */
.product-filters__group + .product-filters__group { margin-top: var(--space-6); }
.product-filters__group-title {
    display:        block;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
    padding-bottom: 10px;
    margin-bottom:  4px;
    border-bottom:  1px solid var(--color-secondary);
}
/* Checkbox de cada opción (mismo estilo que los badges: borde negro) */
.product-filter__check {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           18px;
    height:          18px;
    flex-shrink:     0;
    border:          1.5px solid var(--color-secondary);
    color:           #fff;
}
.product-filter__check svg { width: 11px; height: 11px; opacity: 0; }
.product-filter.is-checked .product-filter__check     { background: var(--color-secondary); }
.product-filter.is-checked .product-filter__check svg { opacity: 1; }
/* Variante radio (grupo "Ordenar por"): círculo con punto */
.product-filter__check--radio {
    position:      relative;
    border-radius: var(--radius-full);
    background:    transparent !important;
}
.product-filter__check--radio svg { display: none; }
.product-filter.is-checked .product-filter__check--radio {
    border-color: var(--color-secondary);
}
.product-filter.is-checked .product-filter__check--radio::after {
    content:       "";
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         8px;
    height:        8px;
    border-radius: var(--radius-full);
    background:    var(--color-secondary);
}
/* Acciones del panel: Aplicar + Remover todo (pegadas al fondo) */
.product-filters__actions {
    margin-top:  auto;
    padding-top: 20px;
    display:     flex;
    gap:         10px;
}
.product-filters__apply {
    flex:           1;
    padding:        13px 18px;
    border:         none;
    background:     var(--color-secondary);
    color:          #fff;
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     opacity var(--transition);
}
.product-filters__apply:hover { opacity: .85; }
.product-filters__clear {
    padding:        13px 18px;
    border:         1px solid var(--color-border);
    background:     transparent;
    color:          var(--color-text-muted);
    font-family:    var(--font-body);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     color var(--transition), border-color var(--transition);
}
.product-filters__clear:hover { color: var(--color-text); border-color: var(--color-text); }
/* Overlay del drawer */
.product-filters-overlay {
    position:   fixed;
    inset:      0;
    z-index:    999;
    background: rgba(0, 0, 0, .45);
    opacity:    0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.product-filters-overlay.is-open { opacity: 1; visibility: visible; }
/* ══════════════════════════════════════════════════════════════
   PRODUCT CARDS GRID — moderno / minimalista
   ══════════════════════════════════════════════════════════════ */
.product-cards-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-12) var(--space-8);
}
.product-card {
    display:        flex;
    flex-direction: column;
    background:     transparent;
    transition:     opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
/* Reveal en scroll — el stagger lo aplica el JS via transition-delay */
.product-cards-grid.is-revealing .product-card:not(.is-in) {
    opacity:   0;
    transform: translateY(26px);
}
/* Estado oculto al filtrar */
.product-card.is-out {
    opacity:        0;
    transform:      scale(.96);
    pointer-events: none;
}
/* Imagen */
.product-card__img-wrap {
    position:      relative;
    display:       block;
    overflow:      hidden;
    border-radius: 0;
    aspect-ratio:  3 / 4;
}
.product-card__img-wrap img {
    width:      100%;
    height:     100%;
    -o-object-fit: cover;
       object-fit: cover;
    display:    block;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.product-card:hover .product-card__img-wrap img {
    transform: scale(1.05);
}
/* Badge oferta — pill minimalista */
.product-card__badge {
    position:       absolute;
    top:            12px;
    left:           12px;
    background:     var(--color-secondary);
    color:          #fff;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        5px 11px;
    border-radius:  0;
    line-height:    1;
    pointer-events: none;
    z-index:        1;
}
/* Botón agregar al carrito — aparece abajo-derecha al hover */
.product-card__cart-btn {
    position:        absolute;
    right:           12px;
    bottom:          12px;
    width:           42px;
    height:          42px;
    border-radius:   0;
    background:      #fff;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-secondary);
    box-shadow:      0 4px 14px rgba(0, 0, 0, .16);
    opacity:         0;
    transform:       translateY(8px) scale(.9);
    transition:      opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1),
                     background .2s ease, color .2s ease;
    z-index:         2;
}
.product-card__cart-btn svg { width: 17px; height: 17px; }
.product-card:hover .product-card__cart-btn {
    opacity:   1;
    transform: translateY(0) scale(1);
}
.product-card__cart-btn:hover {
    background: var(--color-accent);
    color:      #fff;
}
/* Cuerpo — título a la izquierda, precio a la derecha */
.product-card__body {
    padding:               14px 2px 0;
    display:               grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items:           baseline;
    gap:                   12px;
}
/* Título */
.product-card__title {
    flex:           1;
    min-width:      0;
    font-size:      15px;
    font-weight:    500;
    line-height:    1.4;
    letter-spacing: 0;
    text-transform: none;
    margin:         0;
}
.product-card__title a {
    color:           var(--color-text);
    text-decoration: none;
    transition:      color var(--transition);
}
.product-card__title a:hover { color: var(--color-accent-hover); }
/* Precio */
.product-card__price {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size:   13px;
    font-weight: 700;
    color:       var(--color-text);
    margin:      0;
}
.product-card__price .woocommerce-Price-amount { color: var(--color-text); }
.product-card__price del,
.product-card__price del .woocommerce-Price-amount {
    color:        var(--color-text-muted);
    font-weight:  400;
    margin-right: 5px;
}
.product-card__price ins,
.product-card__price ins .woocommerce-Price-amount {
    text-decoration: none;
    color:           var(--color-accent-hover);
}
/* ══════════════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════════════ */
.cta-banner {
    background: var(--color-secondary);
    color:      #fff;
    padding:    var(--space-16) 0;
}
.cta-banner__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-8);
}
.cta-banner__title {
    font-size:     var(--text-2xl);
    font-weight:   700;
    margin-bottom: var(--space-2);
}
.cta-banner__text {
    font-size: var(--text-sm);
    opacity:   .75;
    max-width: 460px;
    margin:    0;
}
/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
/* ── ≤1024px: hero apilado en columna única ─────────────── */
@media ( max-width: 1024px ) {
    .categories-grid                         { grid-template-columns: repeat(2, 1fr); }
    ul.products, .products-grid ul.products  { grid-template-columns: repeat(3, 1fr) !important; }
    .product-cards-grid                      { grid-template-columns: repeat(2, 1fr); }

    .hero         { margin: 0 0 48px; }
    .hero__grid {
        grid-template-columns: 1fr;
        grid-template-rows:    auto;
        height:                auto;
        min-height:            auto;
    }
    /* Las celdas con imagen/video absoluto necesitan altura explícita al apilarse */
    .bento-cell--main    { grid-column: 1; grid-row: 1; min-height: 360px; }
    .bento-cell--product { grid-column: 1; grid-row: 2; min-height: 460px; display: flex; }
    .bento-cell--stats   { grid-column: 1; grid-row: 3; min-height: 460px; }
    .bento-cell--cta     { grid-column: 1; grid-row: 4; min-height: auto; padding: 28px 32px; }
    .bento-cell--offers  { grid-column: 1; grid-row: 5; min-height: 420px; padding: 28px 32px; }
}
/* ── ≤768px ──────────────────────────────────────────────── */
@media ( max-width: 768px ) {
    .bento-cell--main    { min-height: 300px; }
    .bento-cell--product { min-height: 400px; }
    .bento-cell--stats   { min-height: 400px; }
    .bento-cell--offers  { min-height: 340px; }
    .cta-banner__inner   { flex-direction: column; text-align: center; }
    .cta-banner__text    { max-width: 100%; }
    .product-cards-grid  { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); }

    /* En mobile el botón "Filtrar" va sin fondo/padding/borde (solo texto + ícono) */
    .product-filters-toggle {
        padding:    0;
        border:     none;
        background: transparent;
        color:      var(--color-secondary);
    }

    /* Badges alineados a la izquierda en mobile */
    .product-filters-active { justify-content: flex-start; }
}
/* ── ≤640px ──────────────────────────────────────────────── */
@media ( max-width: 640px ) {
    .section__title      { font-size: var(--text-xl); }
    .categories-grid     { grid-template-columns: 1fr; }
    ul.products, .products-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; }
    .product-cards-grid  { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-2); }

    /* Título y precio apilados en mobile */
    .product-card__body  { grid-template-columns: 1fr; gap: 4px; }
}
/* ── ≤480px ──────────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .bento-cell--main    { min-height: 260px; }
    .bento-cell--product { min-height: 340px; }
    .bento-cell--stats   { min-height: 340px; }
    .bento-cell--offers  { min-height: 300px; }
    .bento-cell--cta,
    .bento-cell--offers  { padding: 22px 20px; }
}
/* ── <400px: cards de productos en una sola columna ──────── */
@media ( max-width: 399.98px ) {
    .product-cards-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   SIDEBAR IZQUIERDO FIJO + HEADER FIJO
   Replica el layout de piedra.do
   ============================================================ */
/* ── Variables de layout ─────────────────────────────────── */
:root {
    --sidebar-width: 80px;
    --header-height: 80px;
}
/* ── Body offset ─────────────────────────────────────────── */
body {
    padding-left: var(--sidebar-width);
    padding-top: var(--header-height);
    min-height: 100vh;
}
/* ── Site wrap (contenedor del contenido) ────────────────── */
.site-wrap {
    min-height: calc(100vh - var(--header-height));
}
/* ══════════════════════════════════════════════════════════
   SIDEBAR IZQUIERDO
   ══════════════════════════════════════════════════════════ */
.site-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--color-primary);
    border-right: 1px solid var(--color-border);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 16px;
}
/* Top: isotipo */
.site-sidebar__top {
    flex-shrink: 0;
    width: 100%;
}
.site-sidebar__isotipo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sidebar-width);
    /* 80px — todo el ancho del sidebar */
    height: var(--header-height);
    /* 80px — misma altura que el header */
    border-radius: 0;
    text-decoration: none;
    overflow: hidden;
    background: var(--color-accent);
}
.site-sidebar__isotipo-img {
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
}
/* Middle: texto rotado */
.site-sidebar__middle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.site-sidebar__label {
    display: block;
    font-family: var(--font-body);
    font-size: 16px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
    /* Rota el texto: de abajo hacia arriba (igual que piedra.do) */
    transform: rotate(-90deg);
    transform-origin: center center;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
/* Bottom: iconos sociales */
.site-sidebar__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.site-sidebar__social {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.site-sidebar__social img {
    width: 32px;
    height: 32px;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
}
/* ══════════════════════════════════════════════════════════
   HEADER FIJO
   ══════════════════════════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    z-index: 200;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 16px;
    gap: var(--space-6);
}
/* ── Brand ───────────────────────────────────────────────── */
.site-header__brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
    flex-shrink: 0;
}
.site-header__logo {
    width: auto;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
}
/* ── Nav ─────────────────────────────────────────────────── */
.site-header__nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-menu li a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: 0.01em;
    padding: 4px 0;
    border-bottom: 1.5px solid transparent;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.nav-menu li a:hover,
.nav-menu li.current-menu-item>a {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
/* ── Acciones ────────────────────────────────────────────── */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
/* Botón búsqueda */
.header-search-toggle {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}
.header-search-toggle:hover {
    color: var(--color-accent);
}
/* Mi cuenta */
.header-account {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    line-height: 0;
    padding: 4px;
    transition: color var(--transition);
    text-decoration: none;
}
.header-account:hover {
    color: var(--color-accent);
}
/* Carrito */
.header-cart {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    line-height: 0;
    padding: 4px;
    transition: color var(--transition);
    text-decoration: none;
}
.header-cart:hover {
    color: var(--color-accent);
}
.header-cart__count {
    position: absolute;
    top: -3px;
    right: -5px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
    transition: transform var(--transition);
}
.header-cart__count.is-empty {
    display: none;
}
/* Hamburguesa (solo mobile) */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.hamburger {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--color-text);
    border-radius: var(--radius-full);
    transition: transform var(--transition), opacity var(--transition);
}
/* ── Barra de búsqueda expandible ────────────────────────── */
.header-search-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 24px;
    box-shadow: var(--shadow-md);
}
.header-search-bar__inner {
    max-width: 560px;
    margin: 0 auto;
}
.header-search-bar .search-form {
    display: flex;
    gap: 8px;
}
.header-search-bar .search-field {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--transition);
}
.header-search-bar .search-field::-moz-placeholder {
    color: var(--color-text-muted);
}
.header-search-bar .search-field::placeholder {
    color: var(--color-text-muted);
}
.header-search-bar .search-field:focus {
    border-color: var(--color-accent);
}
.header-search-bar .search-submit {
    padding: 8px 20px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.header-search-bar .search-submit:hover {
    background: var(--color-accent-hover);
}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    :root {
        --sidebar-width: 0px;
        --header-height: 80px;
    }

    body {
        padding-left: 0;
    }

    /* Ocultar sidebar en mobile */
    .site-sidebar {
        display: none;
    }

    /* Header ocupa todo el ancho */
    .site-header {
        left: 0;
    }

    .site-header__inner {
        padding: 0 16px;
    }

    /* Mostrar hamburguesa */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Nav mobile: desplegable vertical */
    .site-header__nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-primary);
        border-top: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        z-index: 199;
        padding: 8px 16px 16px;
    }

    .site-header__nav.is-open {
        display: block;
    }

    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu li a {
        display: block;
        padding: 12px 0;
        font-size: var(--text-base);
        border-bottom: 1px solid var(--color-border);
        border-left: none;
    }

    .nav-menu li:last-child a {
        border-bottom: none;
    }
}
/* ============================================================
   FOOTER — bold, fondo oscuro (#1a1a1a) · estilo editorial
   Estructura inspirada en ref: titular gigante + flecha,
   columnas Menú/Iglesia, labels verticales en los bordes,
   email + sociales, botón volver-arriba y punto decorativo.
   ============================================================ */
.site-footer {
    position:   relative;
    background: var(--color-secondary);   /* #1a1a1a */
    color:      #fff;
    overflow:   hidden;
    isolation:  isolate;
    padding:    clamp(3.5rem, 8vw, 7rem) 0 0;
}
/* Glow cálido sutil arriba-izquierda — atmósfera */
.site-footer::before {
    content:        "";
    position:       absolute;
    inset:          0;
    background:     radial-gradient(80% 70% at 0% 0%, rgba(248, 178, 111, .14), transparent 55%);
    pointer-events: none;
    z-index:        0;
}
/* ── Labels verticales en los bordes ──────────────────────── */
.site-footer__edge {
    position:       absolute;
    z-index:        2;
    writing-mode:   vertical-rl;
    font-family:    var(--font-mono);
    font-size:      11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, .42);
}
.site-footer__edge--left {
    left:      22px;
    top:       clamp(3.5rem, 8vw, 7rem);
    transform: rotate(180deg);
}
.site-footer__edge--right {
    right: 22px;
    top:   clamp(3.5rem, 8vw, 7rem);
}
/* ── Punto decorativo (arriba-derecha) ────────────────────── */
.site-footer__dot {
    position:      absolute;
    top:           28px;
    right:         clamp(70px, 8vw, 110px);
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    var(--color-accent);
    z-index:       2;
}
/* ── Botón volver arriba (abajo-derecha) ──────────────────── */
.site-footer__top {
    position:        absolute;
    bottom:          70px;
    right:           clamp(22px, 4vw, 48px);
    z-index:         3;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           70px;
    height:          70px;
    border:          1px solid rgba(255, 255, 255, .22);
    color:           #fff;
    background:      transparent;
    transition:      background .3s ease, color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.site-footer__top svg { width: 22px; height: 22px; }
.site-footer__top:hover {
    background: var(--color-accent);
    color:      #1a1a1a;
    transform:  translateY(-3px);
}
/* ── Layout principal ─────────────────────────────────────── */
.site-footer__inner {
    position:              relative;
    z-index:               1;
    display:               grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap:                   clamp(2rem, 5vw, 4.5rem);
    padding-left:          clamp(3rem, 6vw, 6rem);   /* deja aire para el label vertical izq */
    padding-right:         clamp(3rem, 6vw, 6rem);
    padding-bottom:        clamp(3rem, 6vw, 5rem);
}
/* ── Bloque principal (titular + flecha + email) ──────────── */
.site-footer__headline {
    font-family:    var(--font-heading);
    font-weight:    800;
    font-size:      clamp(2.4rem, 6vw, 5.5rem);
    line-height:    0.98;
    letter-spacing: -0.03em;
    color:          #fff;
    margin:         0;
    text-wrap:      nowrap;   /* cada línea (separada por <br>) no se parte */
}
/* Fallback: evita que las palabras dentro de cada línea se rompan */
.site-footer__headline { white-space: nowrap; }
@media ( max-width: 360px ) {
    .site-footer__headline { white-space: normal; }  /* en pantallas muy estrechas, permitir ajuste */
}
.site-footer__arrow {
    display:       inline-flex;
    margin-top:    clamp(1.5rem, 3vw, 2.5rem);
    color:         #fff;
    transition:    transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease;
}
.site-footer__arrow svg { width: 52px; height: 52px; }
.site-footer__arrow:hover { transform: translateX(8px); color: var(--color-accent); }
.site-footer__email {
    margin-top:     clamp(2.5rem, 6vw, 5rem);
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.site-footer__email-label {
    font-size:      13px;
    font-weight:    600;
    color:          rgba(255, 255, 255, .5);
}
.site-footer__email a {
    font-family: var(--font-mono);
    font-size:   clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 700;
    color:       #fff;
    transition:  color var(--transition);
}
.site-footer__email a:hover { color: var(--color-accent); }
/* ── Métodos de pago ──────────────────────────────────────── */
.site-footer__pay {
    margin-top:     clamp(2rem, 4vw, 3rem);
    display:        flex;
    flex-direction: column;
    gap:            12px;
}
.site-footer__pay-label {
    font-family:    var(--font-mono);
    font-size:      10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, .42);
}
.site-footer__cards {
    display: flex;
    gap:     10px;
    flex-wrap: wrap;
}
.site-footer__cards img {
    width:      48px;
    height:     32px;
    display:    block;
    transition: transform .25s ease;
}
.site-footer__cards img:hover { transform: translateY(-2px); }
/* ── Columnas (Menú / Iglesia) ────────────────────────────── */
.site-footer__col-title {
    font-size:      13px;
    font-weight:    600;
    color:          rgba(255, 255, 255, .55);
    margin:         0 0 var(--space-6);
}
.site-footer__links {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}
.site-footer__links a,
.site-footer__col .menu li a {
    font-size:   clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 500;
    color:       rgba(255, 255, 255, .85);
    transition:  color var(--transition), padding-left var(--transition);
}
.site-footer__links a:hover,
.site-footer__col .menu li a:hover {
    color:        var(--color-accent);
    padding-left: 6px;
}
.site-footer__address {
    font-style:  normal;
    font-size:   clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.7;
    color:       rgba(255, 255, 255, .6);
}
/* ── Barra inferior ───────────────────────────────────────── */
.site-footer__bottom {
    position:   relative;
    z-index:    1;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding:    var(--space-6) 0;
}
.site-footer__bottom .container {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-4);
    padding-left:    clamp(3rem, 6vw, 6rem);
    padding-right:   clamp(3rem, 6vw, 6rem);
}
/* Menú legal centrado en la barra inferior */
.footer-menu {
    position:  absolute;
    left:      50%;
    transform: translateX(-50%);
}
/* Tarjetas alineadas a la derecha en la barra inferior */
.site-footer__bottom .site-footer__cards {
    margin-left: auto;
    gap:         8px;
}
.site-footer__bottom .site-footer__cards img {
    width:  42px;
    height: 28px;
}
.site-footer__bottom p {
    font-family: var(--font-mono);
    font-size:   12px;
    color:       rgba(255, 255, 255, .45);
    margin:      0;
}
.footer-menu { display: flex; gap: var(--space-6); }
.footer-menu a {
    font-size:  13px;
    color:      rgba(255, 255, 255, .6);
    transition: color var(--transition);
}
.footer-menu a:hover { color: var(--color-accent); }
/* ── Responsive ───────────────────────────────────────────── */
@media ( max-width: 900px ) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-8) var(--space-12);
    }
    .site-footer__lead { grid-column: 1 / -1; }
    .site-footer__top  { width: 56px; height: 56px; bottom: 90px; }
}
@media ( max-width: 600px ) {
    .site-footer__edge,
    .site-footer__dot { display: none; }
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap:                   var(--space-10) var(--space-8);
        padding-left:          var(--space-6);
        padding-right:         var(--space-6);
    }
    .site-footer__col { display: flex; flex-direction: column; }
    .site-footer__top {
        position:   static;
        margin:     var(--space-8) var(--space-6) 0 auto;
    }
    .site-footer__bottom .container {
        flex-direction: column;
        align-items:    flex-start;
        text-align:     left;
        padding-left:   var(--space-6);
        padding-right:  var(--space-6);
    }
    .footer-menu {
        position:  static;
        transform: none;
    }
    .site-footer__bottom .site-footer__cards { margin-left: 0; }
}
@media ( prefers-reduced-motion: reduce ) {
    .site-footer__top:hover,
    .site-footer__arrow:hover,
    .site-footer__social a:hover { transform: none; }
}
*, ::before, ::after {
    --tw-border-spacing-x:        0;
    --tw-border-spacing-y:        0;
    --tw-translate-x:        0;
    --tw-translate-y:        0;
    --tw-rotate:        0;
    --tw-skew-x:        0;
    --tw-skew-y:        0;
    --tw-scale-x:        1;
    --tw-scale-y:        1;
    --tw-pan-x:         ;
    --tw-pan-y:         ;
    --tw-pinch-zoom:         ;
    --tw-scroll-snap-strictness:        proximity;
    --tw-gradient-from-position:         ;
    --tw-gradient-via-position:         ;
    --tw-gradient-to-position:         ;
    --tw-ordinal:         ;
    --tw-slashed-zero:         ;
    --tw-numeric-figure:         ;
    --tw-numeric-spacing:         ;
    --tw-numeric-fraction:         ;
    --tw-ring-inset:         ;
    --tw-ring-offset-width:        0px;
    --tw-ring-offset-color:        #fff;
    --tw-ring-color:        rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow:        0 0 #0000;
    --tw-ring-shadow:        0 0 #0000;
    --tw-shadow:        0 0 #0000;
    --tw-shadow-colored:        0 0 #0000;
    --tw-blur:         ;
    --tw-brightness:         ;
    --tw-contrast:         ;
    --tw-grayscale:         ;
    --tw-hue-rotate:         ;
    --tw-invert:         ;
    --tw-saturate:         ;
    --tw-sepia:         ;
    --tw-drop-shadow:         ;
    --tw-backdrop-blur:         ;
    --tw-backdrop-brightness:         ;
    --tw-backdrop-contrast:         ;
    --tw-backdrop-grayscale:         ;
    --tw-backdrop-hue-rotate:         ;
    --tw-backdrop-invert:         ;
    --tw-backdrop-opacity:         ;
    --tw-backdrop-saturate:         ;
    --tw-backdrop-sepia:         ;
    --tw-contain-size:         ;
    --tw-contain-layout:         ;
    --tw-contain-paint:         ;
    --tw-contain-style:         ;
}
::backdrop {
    --tw-border-spacing-x:        0;
    --tw-border-spacing-y:        0;
    --tw-translate-x:        0;
    --tw-translate-y:        0;
    --tw-rotate:        0;
    --tw-skew-x:        0;
    --tw-skew-y:        0;
    --tw-scale-x:        1;
    --tw-scale-y:        1;
    --tw-pan-x:         ;
    --tw-pan-y:         ;
    --tw-pinch-zoom:         ;
    --tw-scroll-snap-strictness:        proximity;
    --tw-gradient-from-position:         ;
    --tw-gradient-via-position:         ;
    --tw-gradient-to-position:         ;
    --tw-ordinal:         ;
    --tw-slashed-zero:         ;
    --tw-numeric-figure:         ;
    --tw-numeric-spacing:         ;
    --tw-numeric-fraction:         ;
    --tw-ring-inset:         ;
    --tw-ring-offset-width:        0px;
    --tw-ring-offset-color:        #fff;
    --tw-ring-color:        rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow:        0 0 #0000;
    --tw-ring-shadow:        0 0 #0000;
    --tw-shadow:        0 0 #0000;
    --tw-shadow-colored:        0 0 #0000;
    --tw-blur:         ;
    --tw-brightness:         ;
    --tw-contrast:         ;
    --tw-grayscale:         ;
    --tw-hue-rotate:         ;
    --tw-invert:         ;
    --tw-saturate:         ;
    --tw-sepia:         ;
    --tw-drop-shadow:         ;
    --tw-backdrop-blur:         ;
    --tw-backdrop-brightness:         ;
    --tw-backdrop-contrast:         ;
    --tw-backdrop-grayscale:         ;
    --tw-backdrop-hue-rotate:         ;
    --tw-backdrop-invert:         ;
    --tw-backdrop-opacity:         ;
    --tw-backdrop-saturate:         ;
    --tw-backdrop-sepia:         ;
    --tw-contain-size:         ;
    --tw-contain-layout:         ;
    --tw-contain-paint:         ;
    --tw-contain-style:         ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Poppins, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
    width:        100%;
}
@media (min-width: 640px) {
    .container {
        max-width:        640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width:        768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width:        1024px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width:        1280px;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width:        1536px;
    }
}
.visible {
    visibility:        visible;
}
.block {
    display:        block;
}
.table {
    display:        table;
}
.\!grid {
    display:        grid !important;
}
.grid {
    display:        grid;
}
.hidden {
    display:        none;
}
.transform {
    transform:        translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.border {
    border-width:        1px;
}
.bg-accent {
    --tw-bg-opacity:        1;
    background-color:        rgb(248 178 111 / var(--tw-bg-opacity, 1));
}