/* ============================================================================
   La Patrulla Espacial — main stylesheet v0.3 (Phase 3 sprint 8)
   Migrado al tool kit TDMM: paleta rojo/negro/crema, Avant Garde + Roobert.
   Mismo lenguaje que la landing (website/coming-soon/).
   ============================================================================ */

/* ---------- Tipografías del tool kit --------------------------------- */
/* Avant Garde solo tiene Book y Medium, Roobert Light y SemiBold. Los
   rangos de font-weight hacen que cualquier peso pedido caiga en el
   archivo más cercano en vez de que el browser sintetice un bold falso. */
@font-face {
    font-family: 'Avant Garde LPE';
    src: url('../fonts/avantgarde-bk.woff2') format('woff2');
    font-weight: 100 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Avant Garde LPE';
    src: url('../fonts/avantgarde-md.woff2') format('woff2');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roobert LPE';
    src: url('../fonts/roobert-light.woff2') format('woff2');
    font-weight: 100 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roobert LPE';
    src: url('../fonts/roobert-semibold.woff2') format('woff2');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------------------------------------------------- */
:root {
    /* Paleta principal del tool kit */
    --rojo:  #E21A1C;
    --negro: #191919;
    --crema: #F0D7B7;

    /* Backgrounds */
    --color-bg:           var(--negro);
    --color-bg-elev:      #141414;
    --color-surface:      #202020;
    --color-surface-2:    #262626;
    --color-surface-hover:#2C2C2C;

    /* Foreground: todo en crema, en distintas opacidades */
    --color-text:         rgba(240, 215, 183, 0.88);
    --color-text-muted:   rgba(240, 215, 183, 0.55);
    --color-text-soft:    rgba(240, 215, 183, 0.72);
    --color-text-strong:  var(--crema);

    /* Rojo de marca. Sobre el negro no llega a 4.5:1 en texto chico:
       se usa para fondos, estados activos y detalles, no para labels. */
    --color-primary:        var(--rojo);
    --color-primary-hover:  #F23436;
    --color-primary-soft:   #2A0C0C;
    --color-primary-glow:   rgba(226, 26, 28, 0.45);

    /* System */
    --color-error:        #F0645F;
    --color-success:      #7BC48A;
    --color-warning:      #F5A524;
    --color-border:       rgba(240, 215, 183, 0.12);
    --color-border-mid:   rgba(240, 215, 183, 0.18);
    --color-border-strong:rgba(240, 215, 183, 0.28);

    /* Type */
    --font-heading: 'Avant Garde LPE', 'Century Gothic', system-ui, sans-serif;
    --font-body:    'Roobert LPE', system-ui, -apple-system, sans-serif;

    /* Type scale (mobile-first, scales up via clamp) */
    --fs-xs:        0.8125rem;
    --fs-sm:        0.9375rem;
    --fs-base:      1rem;
    --fs-lg:        1.125rem;
    --fs-xl:        1.375rem;
    --fs-h3:        clamp(1.625rem, 2.4vw, 2.25rem);
    --fs-h2:        clamp(2.25rem, 4vw, 3.5rem);
    --fs-h1:        clamp(3rem, 6vw, 5.5rem);
    --fs-display:   clamp(3.5rem, 9vw, 8rem);
    --fs-eyebrow:   0.75rem;

    --lh-tight:  1.02;
    --lh-snug:   1.18;
    --lh-base:   1.55;
    --lh-loose:  1.7;

    --ls-display:   0.04em;
    --ls-headline:  0.1em;
    --ls-eyebrow:   0.22em;

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semi:     600;
    --fw-bold:     700;

    /* Layout */
    --container-max: 1280px;
    --container-narrow: 880px;
    --gutter:    clamp(1.25rem, 3.5vw, 2.5rem);
    --section-py:    clamp(5rem, 10vw, 9rem);
    --section-py-sm: clamp(3rem, 6vw, 5rem);

    /* Effects */
    --transition-fast: 150ms cubic-bezier(.2,.7,.2,1);
    --transition-base: 320ms cubic-bezier(.2,.7,.2,1);
    --transition-slow: 600ms cubic-bezier(.2,.7,.2,1);
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.55);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.65);
    --shadow-glow: 0 0 64px var(--color-primary-glow);
}

/* ---------- Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--fw-light);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg, video, canvas, picture { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover, a:focus { color: var(--color-primary); }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-headline);
    text-transform: uppercase;
    margin: 0;
    color: var(--color-text-strong);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; line-height: var(--lh-base); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--color-primary); color: #FFFFFF; }

/* ---------- Layout helpers ------------------------------------------- */
.lpe-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.lpe-container--narrow {
    max-width: var(--container-narrow);
}

.lpe-skip-link {
    position: absolute;
    inset-inline-start: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.lpe-skip-link:focus {
    position: fixed;
    top: 1rem;
    inset-inline-start: 1rem;
    width: auto;
    height: auto;
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--color-text-strong);
    z-index: 9999;
}

.lpe-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin: 0 0 1rem;
}

.lpe-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-border-mid) 30%, var(--color-border-mid) 70%, transparent 100%);
    border: 0;
    margin: 0;
}

/* ---------- Site header ---------------------------------------------- */
.lpe-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(25, 25, 25, 0.88);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--color-border);
}
.lpe-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 72px;
}
/* Logo horizontal del kit (crema con sombra), no texto. */
.lpe-wordmark {
    display: block;
    width: clamp(150px, 16vw, 210px);
}
.lpe-wordmark img { width: 100%; height: auto; }

.lpe-site-nav .lpe-menu {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lpe-menu a {
    color: var(--color-text-soft);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: var(--fw-semi);
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    position: relative;
}
.lpe-menu a::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -6px;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}
.lpe-menu a:hover, .lpe-menu a:focus {
    color: var(--color-text-strong);
}
.lpe-menu a:hover::after, .lpe-menu a:focus::after { width: 100%; }

.lpe-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.lpe-cart-link:hover, .lpe-cart-link:focus {
    border-color: var(--color-primary);
    color: var(--color-text-strong);
    background: rgba(226, 26, 28, 0.08);
}
.lpe-cart-link__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-family: var(--font-body);
    font-weight: var(--fw-semi);
}

/* ---------- Buttons -------------------------------------------------- */
.lpe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.875rem;
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    line-height: 1;
    white-space: nowrap;
}
/* Mismo botón que la landing: crema con texto negro, rojo al hover. */
.lpe-btn--primary {
    background: var(--crema);
    color: var(--negro);
    border-color: var(--crema);
}
.lpe-btn--primary:hover, .lpe-btn--primary:focus {
    background: var(--rojo);
    border-color: var(--rojo);
    color: #FFFFFF;
}
.lpe-btn--primary:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }
.lpe-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.lpe-btn--ghost:hover, .lpe-btn--ghost:focus {
    border-color: var(--color-primary);
    color: var(--color-text-strong);
    background: rgba(226, 26, 28, 0.06);
}
.lpe-btn--lg {
    padding: 1.25rem 2.5rem;
    font-size: 1.0625rem;
}

/* ---------- Hero (home) — minimalista cinematic ---------------------- */
.lpe-hero {
    position: relative;
    min-height: clamp(560px, 92vh, 880px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}
.lpe-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

/* hero-banda.jpg es _3279 (1920×1920 cuadrada). En la foto, las
   cabezas están aprox al 10-25% vertical de la imagen original.
   Para mostrarlas arriba en el hero ancho, anclamos el focal
   point al 15% — el visible window arranca cerca del top de la
   imagen, mostrando cabezas → torsos → headline en la franja
   media-baja. */
/* Sin esto el <picture> es inline y el img toma su alto natural: en
   mobile la foto terminaba antes que el hero, con un corte recto. */
.lpe-hero__media picture { display: block; height: 100%; }
.lpe-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

/* Mobile: igual que la landing, la foto va en el flujo (1:1, entra la
   banda completa) y el logo + CTA debajo, montados sobre el degradé.
   Como fondo full-height el cover recortaba a dos integrantes. */
@media (max-width: 720px) {
    .lpe-hero {
        display: block;
        min-height: 0;
    }
    .lpe-hero::before { display: none; }
    .lpe-hero__media {
        position: relative;
        inset: auto;
        z-index: 0;
        aspect-ratio: 1 / 1;
    }
    .lpe-hero__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(25,25,25,0) 45%, rgba(25,25,25,0.85) 85%, var(--negro) 100%);
        pointer-events: none;
    }
    .lpe-hero__media img {
        object-position: center 42%;
    }
    .lpe-hero__inner {
        position: relative;
        z-index: 1;
        margin-top: -4.5rem;
        padding: 0 var(--gutter) var(--section-py-sm);
    }
    .lpe-hero__inner::before { display: none; }
}
.lpe-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Overlay más liviano arriba para que la foto respire, leve
       refuerzo abajo solo para asegurar legibilidad del título. */
    background:
        linear-gradient(180deg, rgba(25,25,25,0.10) 0%, rgba(25,25,25,0.22) 45%, rgba(25,25,25,0.85) 92%, var(--negro) 100%);
}
/* Vignette sutil del título, no del fondo entero, para que el
   headline blanco se lea contra cualquier zona de la foto. */
.lpe-hero__inner {
    position: relative;
}
.lpe-hero__inner::before {
    content: '';
    position: absolute;
    inset: -2rem -10% -2rem -10%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(25,25,25,0.45) 0%, transparent 70%);
    pointer-events: none;
}
.lpe-hero__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--section-py) var(--gutter);
    text-align: center;
}
/* El título es el logo del kit: horizontal en desktop, vertical en mobile. */
.lpe-hero__title {
    margin: 0 0 2.5rem;
    line-height: 0;
}
/* El PNG ya trae la sombra del kit: sin drop-shadow extra, que en mobile
   dejaba un halo negro alrededor del logo. */
.lpe-hero__logo { margin-inline: auto; }
.lpe-hero__logo--h { width: min(760px, 62vw); }
.lpe-hero__logo--v { display: none; width: min(260px, 64vw); }
@media (max-width: 720px) {
    .lpe-hero__logo--h { display: none; }
    .lpe-hero__logo--v { display: block; }
}
.lpe-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ---------- Hero: variantes "roja" y "niceto" ------------------------
   Ver lpe_hero_variant(). Desktop (≥1024): foto en la columna izquierda,
   sin nada encima, y la marca + CTA a la derecha sobre negro: el logo ya
   no tapa las caras (feedback del diseñador, 2026-10-20). Tablet y mobile:
   foto arriba y logo vertical abajo, como en mobile de la variante fondo. */
@media (min-width: 721px) and (max-width: 1023px) {
    .lpe-hero--roja,
    .lpe-hero--niceto { display: block; min-height: 0; }
    .lpe-hero--roja::before,
    .lpe-hero--niceto::before { display: none; }
    .lpe-hero--roja .lpe-hero__media,
    .lpe-hero--niceto .lpe-hero__media {
        position: relative;
        inset: auto;
        z-index: 0;
        aspect-ratio: 1 / 1;
    }
    .lpe-hero--roja .lpe-hero__media::after,
    .lpe-hero--niceto .lpe-hero__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(25,25,25,0) 45%, rgba(25,25,25,0.85) 85%, var(--negro) 100%);
        pointer-events: none;
    }
    .lpe-hero--roja .lpe-hero__inner,
    .lpe-hero--niceto .lpe-hero__inner {
        margin-top: -4.5rem;
        padding: 0 var(--gutter) var(--section-py-sm);
    }
    .lpe-hero--roja .lpe-hero__inner::before,
    .lpe-hero--niceto .lpe-hero__inner::before { display: none; }
    .lpe-hero--roja .lpe-hero__logo--h,
    .lpe-hero--niceto .lpe-hero__logo--h { display: none; }
    .lpe-hero--roja .lpe-hero__logo--v,
    .lpe-hero--niceto .lpe-hero__logo--v { display: block; }
}
@media (min-width: 1024px) {
    .lpe-hero--roja,
    .lpe-hero--niceto {
        display: grid;
        align-items: center;
        min-height: 0;
        /* Misma caja que el header: la foto arranca donde arranca el logo
           (feedback del diseñador, 2026-10-21). */
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }
    .lpe-hero--roja::before,
    .lpe-hero--niceto::before { display: none; }
    .lpe-hero--roja .lpe-hero__media,
    .lpe-hero--niceto .lpe-hero__media {
        position: relative;
        inset: auto;
        z-index: 0;
    }
    /* Funde los bordes izquierdo, derecho e inferior de la foto con el
       negro: dentro de la caja, el izquierdo quedaba como un corte recto. */
    .lpe-hero--roja .lpe-hero__media::after,
    .lpe-hero--niceto .lpe-hero__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, var(--negro) 0%, rgba(25,25,25,0) 8%, rgba(25,25,25,0) 78%, var(--negro) 100%),
            linear-gradient(180deg, rgba(25,25,25,0) 72%, var(--negro) 100%);
        pointer-events: none;
    }
    .lpe-hero--roja .lpe-hero__inner::before,
    .lpe-hero--niceto .lpe-hero__inner::before { display: none; }

    /* Roja: foto cuadrada recortada a lo ancho, logo vertical. */
    .lpe-hero--roja { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
    .lpe-hero--roja .lpe-hero__media { height: clamp(520px, 78vh, 820px); }
    .lpe-hero--roja .lpe-hero__media img { object-position: center 30%; }
    .lpe-hero--roja .lpe-hero__logo--h { display: none; }
    .lpe-hero--roja .lpe-hero__logo--v { display: block; width: min(300px, 22vw); }

    /* Niceto: la foto es 3:4, en media pantalla entra de cabeza a cintura.
       Logo vertical como la roja: el horizontal se salía de la columna
       (feedback del diseñador, 2026-10-21). */
    .lpe-hero--niceto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .lpe-hero--niceto .lpe-hero__media { height: clamp(560px, 86vh, 900px); }
    .lpe-hero--niceto .lpe-hero__media img { object-position: center 40%; }
    .lpe-hero--niceto .lpe-hero__logo--h { display: none; }
    .lpe-hero--niceto .lpe-hero__logo--v { display: block; width: min(400px, 30vw); }
}
/* Niceto en mobile y tablet: recorte 4:3 de cabeza a cintura (la del landing). */
@media (max-width: 1023px) {
    .lpe-hero--niceto .lpe-hero__media { aspect-ratio: 4 / 3; }
    .lpe-hero--niceto .lpe-hero__media img { object-position: center 34%; }
}

/* ---------- Section header (reusable) -------------------------------- */
.lpe-section-header {
    margin: 0 auto var(--section-py-sm);
    max-width: 720px;
    text-align: center;
}
.lpe-section-header--start {
    text-align: start;
    margin-inline: 0;
}
.lpe-section-header__eyebrow {
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin: 0 0 1rem;
}
.lpe-section-header__title { margin: 0 0 0.75rem; }
.lpe-section-header__lede {
    color: var(--color-text-soft);
    font-size: var(--fs-lg);
    margin: 0;
    line-height: var(--lh-base);
}

/* ---------- Sections base -------------------------------------------- */
.lpe-section {
    padding-block: var(--section-py);
}
.lpe-section--surface {
    background: var(--color-bg-elev);
}
.lpe-section--narrow {
    padding-block: var(--section-py-sm);
}

/* ---------- Featured catalog cards (home + tienda) ------------------- */
.lpe-catalog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 720px) {
    .lpe-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 4 productos (3 vinilos + remera): 2×2 en tablet, una fila de 4 en desktop. */
@media (min-width: 1080px) {
    .lpe-catalog-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.lpe-product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    isolation: isolate;
}
.lpe-product-card:hover, .lpe-product-card:focus-within {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    color: inherit;
}
.lpe-product-card__art {
    aspect-ratio: 1 / 1;
    background: var(--color-bg);
    overflow: hidden;
    position: relative;
}
.lpe-product-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.lpe-product-card:hover .lpe-product-card__art img {
    transform: scale(1.04);
}
/* Etiqueta LP horizontal, esquina superior izquierda. Antes era una cinta
   diagonal: el recorte contra la esquina y los pliegues se leían como un error
   (feedback del diseñador, 2026-10-20). Mismo formato que la de stock. */
.lpe-product-card__ribbon-wrap {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    pointer-events: none;
}
.lpe-product-card__ribbon {
    display: block;
    padding: 0.4rem 0.65rem;
    background: var(--crema);
    color: var(--negro);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.24em;
    text-indent: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.lpe-product-card__body {
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}
.lpe-product-card__year {
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}
.lpe-product-card__title {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-strong);
    line-height: var(--lh-snug);
    margin: 0;
}
.lpe-product-card__hits {
    color: var(--color-text-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    margin: 0;
}
.lpe-product-card__hits strong {
    color: var(--color-text-strong);
    font-weight: var(--fw-medium);
}
.lpe-product-card__footer {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--color-border);
}
.lpe-product-card__price {
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: 1.5rem;
    color: var(--color-text-strong);
    letter-spacing: 0.02em;
}
.lpe-product-card__cuotas {
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
}
.lpe-product-card__stock {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 2;
    padding: 0.4rem 0.65rem;
    background: rgba(226, 26, 28, 0.92);
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}
.lpe-product-card__sold-out {
    background: var(--color-text-muted);
    color: var(--color-bg);
}

/* ---------- Band strip (home v0.3) — foto fullbleed + título + CTA --- */
.lpe-band-strip {
    position: relative;
    min-height: clamp(440px, 70vh, 680px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    border-block: 1px solid var(--color-border);
}
.lpe-band-strip__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.lpe-band-strip__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.lpe-band-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(25,25,25,0.55) 0%, rgba(25,25,25,0.55) 50%, rgba(25,25,25,0.85) 100%);
}
.lpe-band-strip__inner {
    text-align: center;
    padding: var(--section-py) var(--gutter);
    max-width: var(--container-narrow);
    width: 100%;
}
.lpe-band-strip__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-headline);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--color-text-strong);
    margin: 0 0 2rem;
    text-shadow: 0 4px 32px rgba(0,0,0,0.55);
}

/* ---------- Reunion strip (home, legacy v0.2 — kept for /sobre/) ---- */
.lpe-reunion {
    background:
        linear-gradient(135deg, rgba(226, 26, 28, 0.08) 0%, transparent 50%),
        var(--color-bg);
    border-block: 1px solid var(--color-border);
}
.lpe-reunion__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 880px) {
    .lpe-reunion__grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 4rem;
    }
}
.lpe-reunion__photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-mid);
}
.lpe-reunion__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lpe-reunion__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    margin: 0 0 1.5rem;
}
.lpe-reunion__copy {
    color: var(--color-text-soft);
    font-size: var(--fs-lg);
    line-height: var(--lh-loose);
    margin-bottom: 1.5rem;
}
.lpe-reunion__lineup {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.lpe-reunion__member {
    color: var(--color-text);
    font-size: var(--fs-sm);
}
.lpe-reunion__member strong {
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.15rem;
    font-size: 1rem;
}
.lpe-reunion__member em {
    color: var(--color-text-muted);
    font-style: normal;
    font-size: 0.8125rem;
}

/* ---------- Single product (woocommerce override) ------------------- */
.lpe-single-product {
    padding-block: var(--section-py);
}
.lpe-single-product__grid {
    display: grid;
    gap: 3rem;
}
@media (min-width: 960px) {
    .lpe-single-product__grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 4rem;
        align-items: start;
    }
}
.lpe-single-product__art {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.lpe-single-product__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 960px) {
    .lpe-single-product__media {
        position: sticky;
        top: 96px;
    }
}
.lpe-single-product__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 4.5rem));
    gap: 0.625rem;
    margin-top: 0.75rem;
}
.lpe-single-product__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.lpe-single-product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpe-single-product__thumb:hover,
.lpe-single-product__thumb.is-active { opacity: 1; border-color: var(--crema); }

/* Remera: talles como botones (el select de WC queda oculto y es la fuente). */
/* form.cart es flex (cantidad + botón en fila); en la remera el selector de talle va arriba. */
.lpe-single-product__cta form.cart.variations_form { display: block; }
.lpe-single-product__cta table.variations { width: 100%; border: 0; margin: 0 0 1.25rem; }
.lpe-single-product__cta table.variations tr { display: block; }
.lpe-single-product__cta table.variations th,
.lpe-single-product__cta table.variations td { display: block; padding: 0; text-align: start; border: 0; }
.lpe-single-product__cta table.variations th.label label {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-strong);
}
.lpe-single-product__cta .reset_variations { display: none !important; }
.lpe-size-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.lpe-size-chip {
    min-width: 3.25rem;
    padding: 0.75rem 0.875rem;
    background: var(--color-surface);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.lpe-size-chip:hover { border-color: var(--crema); }
.lpe-size-chip.is-active { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.lpe-size-chip.is-out { opacity: 0.4; text-decoration: line-through; }
.lpe-size-chip.is-out.is-active { opacity: 0.75; background: var(--color-surface-2); color: var(--color-text-strong); border-color: var(--color-border-strong); }

/* Talle sin stock elegido: en lugar del carrito, el aviso "avisame cuando vuelva". */
.lpe-single-product__cta form.lpe-is-notify .woocommerce-variation-add-to-cart { display: none; }
.lpe-stock-notify {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-inline-start: 3px solid var(--rojo);
    border-radius: var(--radius-sm);
}
.lpe-stock-notify[hidden] { display: none; }
.lpe-stock-notify__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    letter-spacing: 0.04em;
    color: var(--color-text-strong);
}
.lpe-stock-notify__text { margin: 0.375rem 0 1rem; color: var(--color-text-soft); font-size: var(--fs-sm); }
.lpe-stock-notify__form { display: flex; gap: 0.5rem; }
.lpe-stock-notify__form input {
    flex: 1;
    min-width: 0;
    padding: 0.8rem 0.875rem;
    background: var(--color-surface-2);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}
.lpe-stock-notify__form input:focus { outline: none; border-color: var(--crema); }
.lpe-stock-notify__btn {
    padding: 0.8rem 1.25rem;
    background: var(--crema);
    color: var(--negro);
    border: 1px solid var(--crema);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.lpe-stock-notify__btn:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.lpe-stock-notify__btn:disabled { opacity: 0.6; cursor: wait; }
.lpe-stock-notify__msg { margin: 0.625rem 0 0; font-size: var(--fs-sm); }
.lpe-stock-notify__msg:empty { display: none; }
.lpe-stock-notify__msg[data-kind="ok"] { color: var(--color-text-strong); }
.lpe-stock-notify__msg[data-kind="err"] { color: var(--rojo); }
.lpe-stock-notify.is-done .lpe-stock-notify__form,
.lpe-stock-notify.is-done .lpe-stock-notify__text { display: none; }
.lpe-single-product__cta .woocommerce-variation-add-to-cart { display: flex; gap: 0.625rem; align-items: stretch; }
.lpe-single-product__cta .woocommerce-variation-price { display: none; }
.lpe-single-product__cta .single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }

/* Guía de talles */
.lpe-size-guide {
    padding: 1.5rem 0;
    border-block: 1px solid var(--color-border);
}
.lpe-size-guide__title {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-strong);
    margin: 0 0 1rem;
}
.lpe-size-guide__title span { color: var(--color-text-muted); margin-inline-start: 0.5rem; }
.lpe-size-guide__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.lpe-size-guide__table th,
.lpe-size-guide__table td {
    padding: 0.55rem 0.5rem;
    text-align: start;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-weight: normal;
}
.lpe-size-guide__table thead th {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.lpe-size-guide__table tbody th {
    color: var(--color-text-strong);
    font-weight: var(--fw-semi);
    /* La fuente convierte "(2)" en un número en círculo. */
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0, "calt" 0;
}
.lpe-size-guide__note { color: var(--color-text-muted); font-size: 0.8125rem; margin: 0.75rem 0 0; }
.lpe-single-product__info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.lpe-single-product__eyebrow {
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin: 0;
}
.lpe-single-product__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    margin: 0;
}
.lpe-single-product__year {
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.5rem;
}
.lpe-single-product__price-block {
    margin-block: 1rem;
    padding: 1.5rem 0;
    border-block: 1px solid var(--color-border);
}
.lpe-single-product__price {
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: 2.5rem;
    color: var(--color-text-strong);
    line-height: 1;
    margin: 0 0 0.5rem;
}
.lpe-single-product__cuotas {
    color: var(--color-text-soft);
    font-size: var(--fs-sm);
    margin: 0;
}
.lpe-single-product__cuotas strong { color: var(--color-text-strong); }
.lpe-single-product__cta {
    margin-top: 1.5rem;
}
/* Ficha técnica. Títulos (Avant Garde, crema pleno) bien separados de los
   datos (Roobert liviano, tono suave): antes eran casi del mismo tamaño y
   costaba leer (feedback del diseñador, 2026-10-20). */
.lpe-single-product__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
    margin-top: 0.5rem;
    padding: 1.75rem 0;
    border-block: 1px solid var(--color-border);
    font-size: var(--fs-sm);
}
.lpe-single-product__meta dt {
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.875rem;
    margin: 0;
}
.lpe-single-product__meta dd {
    color: var(--color-text-soft);
    margin: 0.4rem 0 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* Tracklist */
.lpe-tracklist {
    margin-top: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}
.lpe-tracklist__header {
    padding: 1rem 1.25rem;
    background: var(--color-surface-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}
.lpe-tracklist__header-side {
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--color-text-soft);
}
.lpe-tracklist__header-runtime {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}
.lpe-tracklist__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lpe-tracklist__item {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: baseline;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}
.lpe-tracklist__item:last-child { border-bottom: 0; }
.lpe-tracklist__item:hover { background: var(--color-surface-hover); }
.lpe-tracklist__num {
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: 0.875rem;
}
.lpe-tracklist__title {
    color: var(--color-text-strong);
    font-weight: var(--fw-medium);
    font-size: 0.9375rem;
}
.lpe-tracklist__title.is-hit::after {
    content: '★';
    color: var(--color-primary);
    margin-inline-start: 0.5rem;
    font-size: 0.875rem;
}
.lpe-tracklist__duration {
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

.lpe-credits {
    margin-top: 2rem;
}
.lpe-credits__title {
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--color-text-soft);
    margin: 0 0 1rem;
}
.lpe-credits__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 720px) {
    .lpe-credits__list {
        grid-template-columns: repeat(2, 1fr);
    }
}
.lpe-credits__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}
.lpe-credits__role {
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    flex-shrink: 0;
    min-width: 6rem;
}
.lpe-credits__name {
    color: var(--color-text);
    flex: 1;
}

/* WooCommerce add-to-cart hijack — make it ours */
.lpe-shop .single_add_to_cart_button,
.woocommerce-page .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
    background: var(--crema) !important;
    color: var(--negro) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--crema) !important;
    padding: 1rem 2rem !important;
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-semi) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    transition: all var(--transition-fast) !important;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:focus {
    background: var(--rojo) !important;
    border-color: var(--rojo) !important;
    color: #FFFFFF !important;
}
/* Cantidad + botón en una fila, a la misma altura. */
.lpe-single-product__cta form.cart {
    display: flex;
    gap: 0.625rem;
    align-items: stretch;
}
.lpe-single-product__cta .quantity { display: flex; }
.woocommerce .quantity input.qty {
    background: var(--color-surface) !important;
    color: var(--color-text-strong) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.875rem !important;
    width: 4.5rem !important;
}

/* ---------- Tienda archive (woocommerce) ---------------------------- */
.lpe-shop {
    padding-block: var(--section-py);
}
.lpe-shop ul.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 720px) {
    .lpe-shop ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
    .lpe-shop ul.products { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.lpe-shop ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}

/* ---------- About section -------------------------------------------- */
.lpe-about {
    padding-block: var(--section-py);
}
.lpe-about__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 880px) {
    .lpe-about__grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
}
.lpe-about__copy {
    font-size: var(--fs-lg);
    color: var(--color-text-soft);
    line-height: var(--lh-loose);
}
.lpe-about__copy p { margin-bottom: 1em; }
.lpe-about__copy strong { color: var(--color-text-strong); }
.lpe-about__photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.lpe-about__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 404 ------------------------------------------------------ */
.lpe-404 { padding-block: var(--section-py); }
.lpe-404__inner {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
}
.lpe-404__code {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: clamp(6rem, 18vw, 14rem);
    line-height: 1;
    color: var(--color-primary);
    margin: 0 0 1rem;
    letter-spacing: 0.04em;
}
.lpe-404__lede { color: var(--color-text-muted); margin-block: 1rem 2rem; }
.lpe-404__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Page generic --------------------------------------------- */
.lpe-page { padding-block: var(--section-py); }
.lpe-page__article { max-width: var(--container-narrow); margin-inline: auto; }
.lpe-page__content {
    color: var(--color-text-soft);
    font-size: var(--fs-lg);
    line-height: var(--lh-loose);
}
/* Contenido largo (páginas legales): subtítulos chicos, ancho de lectura
   acotado y links subrayados para que se distingan del texto. El ancho va
   en rem y no en ch: con ch cada elemento medía distinto según su
   font-size y los subtítulos quedaban corridos respecto del texto. */
.lpe-page__content > * { max-width: 42rem; margin-inline: auto; }
/* El CSS de los bloques de WC (carga después) les pone margin: 0 y quedaban corridos a la izquierda. */
.lpe-page__content > .wp-block-woocommerce-checkout,
.lpe-page__content > .wp-block-woocommerce-cart { margin-inline: auto; }
/* Títulos largos ("Términos y condiciones") tienen que entrar en 360px. */
.lpe-page .lpe-section-header__title { font-size: clamp(2rem, 7.5vw, 4.5rem); }
.lpe-page__content h2 {
    font-size: var(--fs-xl);
    letter-spacing: var(--ls-headline);
    margin-top: 2.75rem;
    margin-bottom: 0.875rem;
}
.lpe-page__content ul { padding-inline-start: 1.25rem; margin: 0 auto 1em; }
.lpe-page__content li { margin-bottom: 0.5em; }
.lpe-page__content li::marker { color: var(--color-text-muted); }
.lpe-page__content strong { color: var(--color-text-strong); font-weight: var(--fw-semi); }
.lpe-page__content a {
    color: var(--color-text-strong);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--color-border-strong);
}
.lpe-page__content a:hover, .lpe-page__content a:focus { text-decoration-color: currentColor; }
.lpe-legal__vigencia {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* ---------- Ya estás en la lista (post opt-in) ------------------------
   Mismo contenido que /ya-estas-en-la-lista/ de la landing: pasos
   numerados con separadores, como las filas de la agenda. */
.lpe-listo__lede { text-align: center; }
.lpe-page__content .lpe-listo__pasos {
    list-style: none;
    counter-reset: paso;
    padding: 0;
    margin-block: 2rem 2.5rem;
}
.lpe-page__content .lpe-listo__pasos li {
    counter-increment: paso;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: 1rem;
    margin: 0;
    padding-block: 1.125rem;
    border-top: 1px solid var(--color-border);
}
.lpe-page__content .lpe-listo__pasos li:last-child { border-bottom: 1px solid var(--color-border); }
.lpe-page__content .lpe-listo__pasos li::before {
    content: counter(paso);
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-text-muted);
}
.lpe-listo__mail { display: block; margin-top: 0.35em; color: var(--color-text-strong); font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.lpe-listo__acciones { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
/* Los links de .lpe-page__content son crema subrayados: el botón vuelve a
   sus colores, y con el tamaño del CTA de la landing para entrar en 360px. */
.lpe-page__content .lpe-listo__acciones .lpe-btn {
    color: var(--negro);
    text-decoration: none;
    font-size: 0.8125rem;
    white-space: normal;
    text-align: center;
}
.lpe-page__content .lpe-listo__acciones .lpe-btn:hover,
.lpe-page__content .lpe-listo__acciones .lpe-btn:focus { color: #FFFFFF; }
.lpe-listo__volver { font-size: var(--fs-sm); }

/* ---------- Search form ---------------------------------------------- */
.lpe-searchform { display: flex; gap: 0.5rem; align-items: stretch; }
.lpe-searchform__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.lpe-searchform__input {
    flex: 1;
    padding: 0.875rem 1.125rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
}
.lpe-searchform__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(226, 26, 28, 0.18);
}

/* ---------- Site footer ---------------------------------------------- */
.lpe-site-footer {
    border-top: 1px solid var(--color-border);
    padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
    background: var(--color-bg-elev);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
/* Optin section — bloque prominente arriba del footer */
.lpe-footer-optin {
    padding-bottom: clamp(3rem, 5vw, 4rem);
    margin-bottom: clamp(3rem, 5vw, 4rem);
    border-bottom: 1px solid var(--color-border);
}
.lpe-footer-optin__headline {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--fw-semi);
    color: var(--color-text-strong);
    letter-spacing: var(--ls-headline);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 0.625rem;
}
.lpe-footer-optin__lede {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
    max-width: 40ch;
}
.lpe-footer-optin .lpe-optin {
    max-width: 560px;
    gap: 0.625rem;
}
.lpe-footer-optin .lpe-optin__input {
    padding: 1rem 1.125rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    background: var(--color-surface);
    border-color: var(--color-border-mid);
}
.lpe-footer-optin .lpe-optin__btn {
    padding: 1rem 1.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    letter-spacing: 0.18em;
}
.lpe-footer-optin .lpe-optin__msg {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Bottom row del footer — brand + social */
.lpe-site-footer__columns {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 720px) {
    .lpe-site-footer__columns {
        grid-template-columns: 1fr auto;
        gap: 3rem;
    }
}
.lpe-site-footer__inner { /* legacy single-column wrapper */
    display: block;
}
.lpe-site-footer__brand-name {
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-text-strong);
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
}
.lpe-site-footer__brand-tag {
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}
.lpe-site-footer__sello {
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    line-height: var(--lh-base);
}
.lpe-site-footer__col-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: 0.75rem;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 1rem;
}
.lpe-site-footer__nav .lpe-menu {
    flex-direction: column;
    gap: 0.625rem;
}
.lpe-site-footer__nav .lpe-menu a {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: none;
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
}
.lpe-site-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.lpe-site-footer__legal a {
    color: var(--color-text-muted);
    margin-inline-end: 1rem;
}
.lpe-site-footer__legal a:hover { color: var(--color-primary); }

/* ---------- Footer optin (v0.9) -------------------------------------- */
.lpe-site-footer__optin-lede {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: var(--lh-base);
    margin: 0 0 0.875rem;
    max-width: 36ch;
}
.lpe-optin {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.lpe-optin__input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 0.7rem 0.875rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.lpe-optin__input::placeholder { color: var(--color-text-muted); }
.lpe-optin__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(226, 26, 28, 0.18);
}
.lpe-optin__btn {
    padding: 0.7rem 1.25rem;
    background: var(--crema);
    color: var(--negro);
    border: 1px solid var(--crema);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
    white-space: nowrap;
}
.lpe-optin__btn:hover:not(:disabled), .lpe-optin__btn:focus:not(:disabled) {
    background: var(--rojo);
    border-color: var(--rojo);
    color: #FFFFFF;
}
.lpe-optin__btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.lpe-optin__msg {
    flex: 1 0 100%;
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    min-height: 1em;
}
.lpe-optin__msg[data-state="ok"]  { color: var(--color-success); }
.lpe-optin__msg[data-state="err"] { color: var(--color-error); }

/* ---------- Social icons (footer v0.3) ------------------------------- */
.lpe-social-list {
    display: flex;
    gap: 0.875rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
.lpe-social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border-mid);
    color: var(--color-text-soft);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.lpe-social-list a:hover, .lpe-social-list a:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(226, 26, 28, 0.08);
    transform: translateY(-2px);
}
.lpe-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Mobile nav fallback -------------------------------------- */
@media (max-width: 720px) {
    .lpe-site-nav { display: none; }
    .lpe-site-header__inner { gap: 1rem; }
    .lpe-hero__meta { gap: 1rem 2rem; }
    .lpe-single-product__title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
}

/* ---------- Reduce motion respect ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   Checkout de bloques: selector Enviar / Retiro en show
   WC pinta la opción elegida con fondo blanco y el theme deja el texto en
   crema: quedaba ilegible. La elegida va en superficie con borde rojo. El `body` le gana
   al CSS del bloque, que carga después que main.css.
   ========================================================================= */
body .wc-block-checkout__shipping-method-option {
    color: var(--color-text-soft);
    border-color: var(--color-border-mid);
}
body .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
    background: var(--color-surface);
    color: var(--color-text-strong);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
body .wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-title,
body .wc-block-checkout__shipping-method-option--selected svg {
    color: var(--color-text-strong);
    fill: currentColor;
}

/* =========================================================================
   Checkout de bloques: campos, checkbox y botón de compra en modo oscuro
   WC los pinta blancos y el theme deja etiquetas y placeholders en crema:
   no se leían. Campos sobre superficie oscura, texto crema, foco rojo.
   WC usa `.wc-block-components-form … input[type=email]` y, fuera del form (cupón del
   carrito), `.wc-block-components-text-input input[type=text]`: el :not() le gana a los dos.
   ========================================================================= */
body .wc-block-components-text-input input:not([type=checkbox]),
body .wc-block-components-form .wc-block-components-text-input input:not([type=checkbox]),
body .wc-block-components-textarea,
body .wc-blocks-components-select .wc-blocks-components-select__container,
body .wc-blocks-components-select .wc-blocks-components-select__select {
    background: var(--color-surface);
    color: var(--color-text-strong);
    border-color: var(--color-border-strong);
    font-family: inherit;
}
body .wc-blocks-components-select .wc-blocks-components-select__select {
    background: transparent;
    border-color: transparent;
}
body .wc-blocks-components-select .wc-blocks-components-select__container {
    border: 1px solid var(--color-border-strong);
}
body .wc-block-components-text-input label,
body .wc-block-components-form .wc-block-components-text-input label,
body .wc-blocks-components-select .wc-blocks-components-select__label,
body .wc-block-components-text-input input::placeholder,
body .wc-block-components-textarea::placeholder {
    color: var(--color-text-muted);
}
body .wc-blocks-components-select .wc-blocks-components-select__expand {
    fill: var(--color-text-soft);
}
body .wc-block-components-text-input input:not([type=checkbox]):focus,
body .wc-block-components-form .wc-block-components-text-input input:not([type=checkbox]):focus,
body .wc-block-components-textarea:focus,
body .wc-blocks-components-select .wc-blocks-components-select__container:focus-within {
    /* WC vuelve el campo blanco al enfocar: el fondo y el texto se fijan acá también. */
    background: var(--color-surface);
    color: var(--color-text-strong);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
    outline: none;
}

/* Cupón (carrito y checkout): "Aplicar" quedaba como botón nativo del navegador.
   Mismo lenguaje que el resto: contorno crema, mayúsculas, rojo al pasar. */
body .wc-block-components-totals-coupon__button {
    background: transparent;
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: 2px;
    font-family: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-height: 50px;
}
body .wc-block-components-totals-coupon__button .wc-block-components-button__text {
    color: inherit;
}
body .wc-block-components-totals-coupon__button:hover:not(:disabled) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
body .wc-block-components-totals-coupon__button:focus-visible {
    outline: 2px solid var(--color-text-strong);
    outline-offset: 2px;
}
body .wc-block-components-totals-coupon__button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
body .wc-block-components-text-input.has-error input:not([type=checkbox]),
body .wc-block-components-form .wc-block-components-text-input.has-error input:not([type=checkbox]),
body .wc-blocks-components-select.has-error .wc-blocks-components-select__container {
    border-color: var(--color-error);
}
/* Autocompletado de Chrome: sin esto vuelve el fondo claro. */
body .wc-block-components-text-input input:not([type=checkbox]):-webkit-autofill,
body .wc-block-components-form .wc-block-components-text-input input:not([type=checkbox]):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
    -webkit-text-fill-color: var(--color-text-strong);
    caret-color: var(--color-text-strong);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
}
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
    fill: #fff;
}

body .wc-block-components-checkout-place-order-button {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: 2px;
    font-family: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
    color: #fff;
}
body .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
    background: var(--color-primary-hover);
}
body .wc-block-components-checkout-place-order-button:focus-visible {
    outline: 2px solid var(--color-text-strong);
    outline-offset: 2px;
}
body .wc-block-components-checkout-place-order-button:disabled {
    opacity: 0.5;
}

/* =========================================================================
   Mercado Pago: formulario de tarjeta (Checkout API) en el tono de la tienda
   El plugin lo pinta blanco con texto negro, todo con !important y bajo
   #mp-checkout-custom-root. Textos: se redefinen sus variables --andes-*
   (solo las usa para color). Fondos y bordes: misma especificidad + body,
   también !important. Los campos seguros (número, vencimiento, código) son
   iframes de MP: acá va su contenedor; el texto de adentro lo pinta
   inc/mercadopago.php.
   ========================================================================= */
body #mp-checkout-custom-root {
    --andes-gray-900: var(--color-text-strong);
    --andes-text-color-primary: var(--color-text-strong);
    --andes-gray-550: var(--color-text-muted);
    --andes-text-color-secondary: var(--color-text-muted);
    --andes-accent-color: var(--crema);
    --andes-error-red: var(--color-error);
}
body #mp-checkout-custom-root .mp-checkout-custom-container {
    background: var(--color-bg-elev) !important;
    color: var(--color-text) !important;
}
body #mp-checkout-custom-root .mp-input-label b {
    color: var(--color-primary) !important;
}

/* "Cargando" mientras MP monta los campos seguros (gris claro y círculo azul de fábrica). Vive afuera de #mp-checkout-custom-root. */
body .mp-checkout-custom-load.mp-checkout-custom-load {
    background-color: var(--color-bg-elev) !important;
}
body .mp-checkout-custom-load .spinner-card-form .spinner-path {
    stroke: var(--color-primary) !important;
}

/* Campos: contenedores de los iframes + inputs y selects propios del plugin. */
body #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-form .mp-checkout-custom-card-input,
body #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-column .mp-checkout-custom-security-code-container .mp-checkout-custom-security-code-input,
body #mp-checkout-custom-root #mp-custom-checkout-form-container input[type=text],
body #mp-checkout-custom-root #mp-custom-checkout-form-container input[type=tel],
body #mp-checkout-custom-root #mp-custom-checkout-form-container select {
    background: var(--color-surface) !important;
    color: var(--color-text-strong) !important;
    border: 1px solid var(--color-border-strong) !important;
}
body #mp-checkout-custom-root #mp-custom-checkout-form-container input::placeholder {
    color: var(--color-text-muted) !important;
}
body #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-form-focus,
body #mp-checkout-custom-root #mp-custom-checkout-form-container input:focus,
body #mp-checkout-custom-root #mp-custom-checkout-form-container select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary) !important;
    outline: none !important;
}
body #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-error {
    border-color: var(--color-error) !important;
}
/* El "?" del código de seguridad. */
body #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-column .mp-checkout-custom-security-code-container .mp-checkout-custom-security-code-tooltip {
    background: var(--color-surface-2) !important;
    color: var(--color-text-soft) !important;
    border-color: var(--color-border-strong) !important;
}
/* DNI, banco y cuotas: aparecen después de cargar el número de tarjeta. */
body #mp-checkout-custom-root .mp-input-document,
body #mp-checkout-custom-root .mp-input-document *,
body #mp-checkout-custom-root [class*="mp-input-select"],
body #mp-checkout-custom-root [class*="mp-input-table"],
body #mp-checkout-custom-root [class*="mp-input-radio"] {
    background-color: var(--color-surface) !important;
    color: var(--color-text-strong) !important;
    border-color: var(--color-border-strong) !important;
}

/* =========================================================================
   Mercado Pago: panel de Checkout Pro ("Te llevaremos a Mercado Pago")
   Mismos selectores que el plugin (#mp-checkout-pro-root…) + body.
   Los íconos son imágenes de línea oscura: se invierten para el fondo oscuro.
   ========================================================================= */
body #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content {
    background: var(--color-bg-elev);
}
body #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-benefits-title {
    color: var(--color-text-strong);
}
body #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-benefits .mp-checkout-pro-benefit .mp-checkout-pro-benefit-description,
body #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-benefits .mp-checkout-pro-benefit .mp-checkout-pro-benefit-description b {
    color: var(--color-text-soft);
}
body #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-benefits .mp-checkout-pro-benefit .mp-checkout-pro-benefit-description b {
    color: var(--color-text-strong);
}
body #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-redirect {
    background: var(--color-surface);
    border: 1px solid var(--color-border-mid);
}
body #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-redirect .mp-checkout-pro-redirect-title {
    color: var(--color-text-strong);
}
body #mp-checkout-pro-root.mp-checkout-pro-container .mp-checkout-pro-content .mp-checkout-pro-redirect .mp-checkout-pro-redirect-description {
    color: var(--color-text-muted);
}
body #mp-checkout-pro-root .mp-checkout-pro-benefit-icon,
body #mp-checkout-pro-root .mp-checkout-pro-redirect-icon {
    filter: invert(1) opacity(0.8);
}

/* Sugerencia de email mal escrito (assets/js/lpe-email-guard.js). */
.lpe-email-fix {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-strong);
}
.lpe-email-fix a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
}

/* Aviso de retiro en show arriba del carrito (inc/pickup.php). */
.lpe-cart-pickup {
    margin-block: 0 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.45;
}
.lpe-cart-pickup strong { color: var(--color-text-strong); }