/* ==========================================================================
   VIVANZA — estilos de la tienda
   ========================================================================== */

:root {
    --bg: #0b0a09;
    --bg-2: #11100e;
    --surface: #171614;
    --surface-2: #1f1d1a;
    --line: #2a2824;
    --line-2: #3a3731;
    --text: #f4f0e8;
    --muted: #a8a297;
    --faint: #7a746a;
    --gold: #dfb129;
    --gold-2: #f2d27a;
    --gold-soft: rgba(223, 177, 41, .12);
    --gold-ink: #1b1505;
    --wa: #25d366;
    --card: #3b82f6;
    --danger: #ff6b5b;

    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --r-sm: 10px;
    --r: 16px;
    --r-lg: 24px;
    --sombra: 0 30px 80px -30px rgba(0, 0, 0, .75);
    --ease: cubic-bezier(.22, 1, .36, 1);       /* movimiento: ease-out fuerte */
    --t-press: 120ms;                         /* respuesta al pulsar */
    --t-hover: 220ms;                         /* hover frecuente: < 300ms */
    --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Barras de desplazamiento finas y oscuras en toda la tienda (sin la barra blanca de Windows) */
:root { color-scheme: dark; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: rgba(223, 177, 41, .38) transparent; } } /* Firefox; Chrome y Safari usan las reglas de abajo */
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(223, 177, 41, .32); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(223, 177, 41, .55); }
::-webkit-scrollbar-corner { background: transparent; }
/* En ventanas con bordes redondeados, la barra no toca las esquinas */
.pago::-webkit-scrollbar-track, .hoja::-webkit-scrollbar-track { margin-block: 20px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 600; }
p { margin: 0; }
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--texto { max-width: 820px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 8px 14px; border-radius: 8px; }
.saltar:focus { left: 8px; }
.muted { color: var(--muted); }
.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* ---------- Tipografía ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.titulo-xl { font: 600 clamp(34px, 5vw, 56px)/1.05 var(--serif); letter-spacing: -.02em; }
.titulo-lg { font: 600 clamp(26px, 3.2vw, 38px)/1.1 var(--serif); letter-spacing: -.015em; }
.titulo-md { font: 600 clamp(21px, 2.4vw, 26px)/1.2 var(--serif); }

/* ---------- Botones ---------- */
.btn {
    --h: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--h); padding: 0 20px; border-radius: 999px;
    border: 1px solid var(--line-2); background: var(--surface);
    font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
    transition: transform var(--t-press) var(--ease), background-color var(--t-hover) ease, border-color var(--t-hover) ease, box-shadow var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:hover { border-color: var(--faint); }
.btn:active { transform: scale(.97); }
.btn--sm { --h: 38px; padding: 0 14px; font-size: 14px; }
.btn--lg { --h: 54px; padding: 0 28px; font-size: 16px; }
.btn--bloque { width: 100%; }
/* Dorado plano: sin degradado ni resplandor en reposo */
.btn--oro { background: var(--gold); border-color: transparent; color: var(--gold-ink); }
.btn--oro:hover { background: var(--gold-2); border-color: transparent; }
[hidden] { display: none !important; }
.btn--fantasma { background: transparent; }
.btn--fantasma:hover { background: var(--surface); }
.btn--wa { background: var(--wa); border-color: transparent; color: #06240f; }
.btn--wa:hover { border-color: transparent; box-shadow: 0 10px 30px -10px rgba(37, 211, 102, .6); }
.btn--tarjeta { background: #fff; color: #111; border-color: transparent; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Barra superior ---------- */
.topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(11, 10, 9, .78);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--line);
}
.topbar__in {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; min-height: 72px;
}
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca__logo { display: block; height: clamp(40px, 4vw, 54px); width: auto; }
.marca__logo--pie { height: 58px; }
.marca__v {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
    font: 700 19px/1 var(--serif);
}
.marca__txt { font: 700 20px/1 var(--serif); letter-spacing: .14em; color: var(--gold); }
.topbar__in { grid-template-columns: auto 1fr; grid-template-areas: "marca acciones" "nav nav"; row-gap: 0; }
.topbar__in > .marca { grid-area: marca; }
.topbar__acciones { grid-area: acciones; justify-self: end; }
/* El menú va en su propia fila, centrado: con muchas secciones ninguna queda oculta */
.nav { grid-area: nav; display: flex; justify-content: safe center; gap: 4px; overflow-x: auto; scrollbar-width: none;
       border-top: 1px solid var(--line); padding: 6px 0; }
.nav::-webkit-scrollbar { display: none; }
.nav__link {
    position: relative; padding: 9px 14px; border-radius: 999px;
    color: var(--muted); font-size: 15px; font-weight: 500; white-space: nowrap;
    transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link.is-activo { color: var(--text); background: var(--surface-2); }
/* Pestaña del ERP: con el degradado de la marca ERP+FARMACÉUTICO (lavanda → índigo → turquesa) */
.nav__grad { background: linear-gradient(90deg, #c9bdfd 0%, #9fb2f7 45%, #5fe3d3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.nav__link--estrella::after {
    content: ''; position: absolute; top: 7px; right: 6px; width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #ab96fa, #6c63f0 50%, #2aa3b8); box-shadow: 0 0 0 3px rgba(124, 116, 244, .2);
}
.topbar__acciones { display: flex; align-items: center; gap: 10px; }
.buscador {
    display: flex; align-items: center; height: 40px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line); padding-left: 14px;
    transition: border-color .2s;
}
.buscador:focus-within { border-color: var(--gold); }
.buscador input { width: 150px; background: none; border: 0; outline: 0; font-size: 14px; }
.buscador input::placeholder { color: var(--faint); }
.buscador button { display: grid; place-items: center; width: 40px; height: 38px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.buscador--grande { height: 58px; max-width: 620px; margin-top: 28px; padding: 6px 6px 6px 22px; }
.buscador--grande input { width: 100%; font-size: 17px; }
.buscador--grande .btn { width: auto; height: 46px; padding: 0 24px; color: var(--gold-ink); }

/* ---------- Hero ---------- */
.hero, .erp-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 7vw, 90px); }
.hero__luz {
    position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
    background: radial-gradient(closest-side, rgba(223, 177, 41, .22), transparent 70%);
    pointer-events: none; filter: blur(10px);
}
.hero__luz--erp { background: radial-gradient(closest-side, rgba(56, 189, 248, .14), transparent 70%), radial-gradient(closest-side, rgba(223, 177, 41, .14), transparent 70%); }
.hero__grid, .erp-hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__grid > *, .erp-hero__grid > *, .banda-erp > *, .ficha > *, .detalle > *, .topbar__in > * { min-width: 0; }
.hero__titulo { font: 600 clamp(40px, 6.4vw, 78px)/1.02 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.hero__sub { margin: 22px 0 32px; max-width: 34em; font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); }
.hero__puntos { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 34px 0 0; padding: 0; color: var(--muted); font-size: 14px; }
.hero__puntos li { display: inline-flex; align-items: center; gap: 8px; }
.hero__puntos .ico { color: var(--gold); }

.hero__portadas { position: relative; height: clamp(360px, 42vw, 520px); perspective: 1400px; }
.hero__libro {
    position: absolute; top: 50%; left: 50%; width: 52%; aspect-ratio: 2 / 3;
    border-radius: 6px 14px 14px 6px; overflow: hidden; background: var(--surface);
    box-shadow: var(--sombra), 0 0 0 1px rgba(255, 255, 255, .06);
    transition: transform 500ms var(--ease);
}
.hero__libro img { width: 100%; height: 100%; object-fit: cover; }
.hero__libro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 8%, transparent 92%, rgba(255,255,255,.06)); }
.hero__libro--1 { z-index: 3; transform: translate(-50%, -50%) rotateY(-14deg) rotateZ(1deg); }
.hero__libro--2 { z-index: 2; transform: translate(-108%, -46%) rotateY(-22deg) rotateZ(-6deg) scale(.86); opacity: .9; }
.hero__libro--3 { z-index: 1; transform: translate(8%, -44%) rotateY(-8deg) rotateZ(7deg) scale(.84); opacity: .85; }

/* ---------- Franja de confianza ---------- */
.confianza { border-block: 1px solid var(--line); background: var(--bg-2); }
.confianza__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.confianza__grid > div { display: flex; gap: 14px; padding: 26px 22px; }
.confianza__grid > div + div { border-left: 1px solid var(--line); }
.confianza .ico { width: 22px; height: 22px; color: var(--gold); margin-top: 2px; }
.confianza strong { display: block; font-size: 15px; margin-bottom: 2px; }
.confianza span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(56px, 7vw, 96px); }
.seccion--pegada { padding-top: 8px; }
.seccion__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.seccion__cab .muted { margin-top: 8px; max-width: 40em; }
.seccion__cab--centro { justify-content: center; text-align: center; }
.seccion__cab--centro .eyebrow::before { display: none; }
.enlace-ver { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 600; font-size: 15px; white-space: nowrap; }
.enlace-ver .ico { transition: transform var(--t-hover) var(--ease); }

.cab-pagina { padding-block: clamp(48px, 6vw, 80px) 36px; }
.cab-pagina__sub { margin-top: 16px; max-width: 42em; font-size: 18px; color: var(--muted); }

/* ---------- Tarjetas ---------- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.carrusel {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.carrusel > * { scroll-snap-align: start; }

.tarjeta {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid transparent; border-radius: var(--r);
    overflow: hidden; transition: transform 250ms var(--ease), border-color var(--t-hover) ease, box-shadow 250ms var(--ease);
}
.tarjeta:hover { border-color: var(--line-2); }
/* Superficies separadas por tono, no por líneas */
.tarjeta__media {
    position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 22px;
    background: var(--surface-2);
}
.tarjeta__media img {
    position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55));
    transition: transform 300ms var(--ease);
}
/* Foco de luz cálida detrás del libro: lo presenta como objeto de vitrina */
.tarjeta__foco {
    position: absolute; left: 12%; right: 12%; top: 14%; bottom: 10%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(223, 177, 41, .22), rgba(223, 177, 41, .06) 60%, transparent);
    opacity: .7; transition: opacity 250ms ease;
}
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.tarjeta__autor { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(223, 177, 41, .8); margin-bottom: 8px; }
.tarjeta__titulo { font: 600 19px/1.25 var(--serif); text-wrap: balance; }
.tarjeta__titulo a::after { content: ''; position: absolute; inset: 0; }
.tarjeta__pie { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; }

/* Precio: el dato decisivo, en dorado y con más peso que el título */
.precio-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.precio-t__actual { font: 700 26px/1 var(--sans); letter-spacing: -.02em; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.precio-t__actual small { font-size: .55em; font-weight: 600; margin-right: 3px; color: var(--gold); letter-spacing: 0; }
.precio-t__actual--texto { font-size: 18px; }
.precio-t__antes { color: var(--faint); font-size: 14px; }
.precio-t__ahorro {
    justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    color: #7ee2a8; background: rgba(37, 211, 102, .1); border: 1px solid rgba(37, 211, 102, .28);
}
.precio-t__ahorro--vacio { visibility: hidden; }
.tarjeta__btn {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: 4px;
    border-radius: 999px; border: 1px solid rgba(223, 177, 41, .45); color: var(--gold-2); font-weight: 600; font-size: 14.5px;
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease);
}
.tarjeta__btn .ico { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease); }
.tarjeta__btn:active { transform: scale(.97); }

.sello {
    position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 999px;
    background: rgba(11, 10, 9, .8); border: 1px solid var(--line-2); backdrop-filter: blur(6px);
    font-size: 12px; font-weight: 600; color: var(--text);
}
.sello--oferta { background: var(--gold); color: var(--gold-ink); border-color: transparent; font-weight: 700; }
/* Cinta diagonal en la esquina opuesta al descuento (la tarjeta recorta lo que sobresale) */
.cinta {
    position: absolute; top: 24px; right: -46px; z-index: 2; width: 180px; padding: 6px 0; transform: rotate(45deg);
    text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; padding-inline: 34px;
    color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, #b98d1b);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.sello--lg { top: 20px; left: 20px; font-size: 15px; padding: 7px 14px; }

.precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.precio__actual { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.precio__antes { color: var(--faint); font-size: 14px; }
.precio--grande .precio__actual { font: 600 clamp(34px, 4vw, 44px)/1 var(--serif); }
.precio--grande .precio__antes { font-size: 18px; }
.precio__ahorro { flex-basis: 100%; color: var(--gold); font-size: 14px; font-weight: 600; margin-top: 4px; }

/* ---------- Banda ERP ---------- */
.banda-erp {
    position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
    padding: clamp(28px, 5vw, 56px); border-radius: var(--r-lg); overflow: hidden;
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(223, 177, 41, .16), transparent 60%),
        linear-gradient(135deg, var(--surface-2), var(--bg-2));
    border: 1px solid var(--line-2);
    transition: border-color .3s, transform .45s var(--ease);
}
.banda-erp {
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(108, 79, 220, .38), transparent 65%),
        radial-gradient(50% 80% at 0% 100%, rgba(18, 120, 120, .3), transparent 65%),
        #0a0f1e;
    border-color: #2d3a5e;
}
.banda-erp:hover { border-color: rgba(171, 150, 250, .55); }
.banda-erp .eyebrow { color: #b3b8fb; }
.banda-erp__marca { display: flex; align-items: center; gap: 14px; font: 800 clamp(26px, 3.4vw, 42px)/1 'Sora', var(--sans); letter-spacing: -.04em; }
.banda-erp__logo { width: 1.3em; height: 1.3em; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(124, 116, 244, .6)); }
.banda-erp__logo path { stroke: #fff; }
.banda-erp__marca b { color: #5eead4; }
.banda-erp__marca em { font-style: normal; background: linear-gradient(90deg, #c9bdfd, #9fb2f7 45%, #5fe3d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.banda-erp__btn {
    background: linear-gradient(135deg, #ab96fa, #6c63f0 50%, #2aa3b8); border-color: transparent; color: #fff;
    box-shadow: 0 12px 30px -12px rgba(108, 99, 240, .8);
}
.banda-erp__visual img { border: 1px solid rgba(171, 150, 250, .25); }
.banda-erp__texto p:not(.eyebrow) { color: var(--muted); margin: 14px 0 26px; max-width: 32em; }
.banda-erp__visual img { border-radius: var(--r); box-shadow: var(--sombra); }

/* Maqueta decorativa del sistema (cuando aún no hay captura) */
.mock { border-radius: var(--r); background: var(--bg); border: 1px solid var(--line-2); padding: 16px; box-shadow: var(--sombra); transform: rotate(-2deg); }
.mock__barra { display: flex; gap: 6px; margin-bottom: 18px; }
.mock__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.mock__kpis b { height: 54px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.mock__kpis b:first-child { background: var(--gold-soft); border-color: rgba(223, 177, 41, .3); }
.mock__barras { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 12px; border-radius: 10px; background: var(--surface); }
.mock__barras span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--gold), rgba(223, 177, 41, .25)); }
.mock--grande .mock__barras { height: 220px; }

/* ---------- CTA ---------- */
.cta-busqueda {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    margin-block: clamp(40px, 6vw, 80px); padding: clamp(28px, 4vw, 44px);
    border-radius: var(--r-lg); border: 1px dashed var(--line-2); background: var(--bg-2);
}
.cta-busqueda .muted { margin-top: 8px; max-width: 40em; }
.cta-busqueda--erp { border-style: solid; background: linear-gradient(135deg, var(--surface-2), var(--bg-2)); }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.filtros__buscar {
    flex: 1 1 260px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.filtros__buscar:focus-within { border-color: var(--gold); }
.areas { display: flex; gap: 8px; flex-wrap: wrap; margin: -12px 0 24px; }
.areas__chip {
    height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
    color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.areas__chip:hover { color: var(--text); border-color: var(--line-2); }
.areas__chip[aria-pressed="true"] { background: rgba(223, 177, 41, .12); border-color: var(--gold); color: var(--gold); }
.filtros__buscar input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); }
.filtros__orden select {
    height: 48px; padding: 0 40px 0 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a297' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}

/* ---------- Ficha de producto ---------- */
.migas { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 28px; font-size: 14px; color: var(--faint); }
.migas a:hover { color: var(--text); }
.migas [aria-current] { color: var(--muted); }
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); padding-block: 28px clamp(48px, 6vw, 80px); align-items: start; }
.ficha__galeria { position: sticky; top: 100px; }
.ficha__app { display: grid; grid-template-columns: 52px 1fr; gap: 14px 16px; align-items: center; margin-top: 18px; padding: 18px 20px;
    border-radius: 18px; background: linear-gradient(135deg, rgba(223, 177, 41, .1), var(--surface)); border: 1px solid rgba(223, 177, 41, .3); }
.ficha__app img { width: 52px; height: 52px; border-radius: 13px; }
.ficha__app-titulo { font-weight: 700; color: var(--text); }
.ficha__app-texto { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ficha__app .insignias { grid-column: 1 / -1; }
.ficha__principal {
    position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: clamp(24px, 5vw, 56px);
    border-radius: var(--r-lg); border: 1px solid var(--line);
    background: radial-gradient(90% 70% at 50% 10%, var(--surface-2), var(--bg-2));
}
.ficha__principal img { transition: opacity 180ms ease, filter 180ms ease;  position: absolute; inset: clamp(24px, 5vw, 56px); width: calc(100% - 2 * clamp(24px, 5vw, 56px)); height: calc(100% - 2 * clamp(24px, 5vw, 56px)); object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.ficha__principal img.is-cambiando { opacity: 0; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) blur(2px); }
.ficha__miniaturas { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; }
.ficha__miniaturas button {
    flex: 0 0 72px; height: 72px; padding: 6px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--surface); cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s;
}
.ficha__miniaturas button.is-activa, .ficha__miniaturas button:hover { opacity: 1; border-color: var(--gold); }
.ficha__miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.ficha__etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.chip--oro { border-color: rgba(223, 177, 41, .4); color: var(--gold); background: var(--gold-soft); }
.ficha__titulo { font: 600 clamp(34px, 5vw, 66px)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.ficha__autor { margin-top: 10px; color: var(--muted); font-size: 17px; }
.ficha__resumen { margin-top: 20px; font-size: 17px; color: #d7d1c6; }
.ficha__compra { margin-top: 30px; padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.oferta-fin { margin-top: 10px; font-size: 14px; color: var(--muted); }
.oferta-fin strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.ficha__botones { display: grid; gap: 10px; margin-top: 22px; }
/* Acciones secundarias como enlaces: el pago es lo único que destaca */
.ficha__secundarios { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-top: 4px; }
.ficha__secundarios--centro { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ficha__secundarios .btn { --h: 40px; padding: 0 4px; border-color: transparent; background: none; color: var(--muted); font-weight: 500; }
.ficha__secundarios .btn:hover { color: var(--text); background: none; }
.ficha__secundarios .ficha__wa { color: #7ee2a8; }
.garantias { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: 14px; color: var(--muted); }
.garantias li { display: flex; gap: 10px; align-items: flex-start; }
.garantias .ico { color: var(--gold); margin-top: 2px; }
.enlace-comprobante { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--gold); }
.enlace-comprobante:hover { text-decoration: underline; }
.aviso-admin { margin-top: 16px; padding: 12px 18px; border-radius: var(--r-sm); background: rgba(255, 107, 91, .12); border: 1px solid rgba(255, 107, 91, .35); font-size: 14px; }
.aviso-admin a { color: var(--gold); text-decoration: underline; }

.detalle { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 72px); padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.detalle .titulo-md { margin-bottom: 22px; }
/* Sin descripción larga: la lista ocupa todo el ancho en dos columnas (no deja media pantalla vacía) */
.detalle--solo { grid-template-columns: 1fr; }
@media (min-width: 900px) { .detalle--solo .lista-check { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); } }
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check .ico { flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); margin-top: 1px; }
.prosa { color: #d7d1c6; font-size: 17px; line-height: 1.75; }
.prosa > * + * { margin-top: 1em; }
.prosa h3 { font: 600 22px/1.3 var(--serif); color: var(--text); margin-top: 1.6em; }
.prosa ul { padding-left: 1.2em; }
.prosa li + li { margin-top: .4em; }
.prosa strong { color: var(--text); }
@media (min-width: 700px) { .prosa p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }
.tarjeta__contador { margin-top: 4px; font-size: 13px; color: var(--muted); }
.ficha__contador { margin-top: 6px; font-size: 15px; color: var(--muted); }

.barra-compra {
    position: fixed; inset: auto 0 0 0; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(17, 16, 14, .94);
    backdrop-filter: blur(14px); border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform 200ms var(--ease);
}
.barra-compra.is-visible { transform: none; transition-duration: 300ms; }

/* ---------- ERP ---------- */
.erp-hero__visual img { border-radius: var(--r-lg); box-shadow: var(--sombra); border: 1px solid var(--line-2); }
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.modulo { padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color var(--t-hover) ease, transform 250ms var(--ease); }
.modulo:hover { border-color: var(--line-2); }
.modulo__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--gold-soft); color: var(--gold); margin-bottom: 18px; }
.modulo__ico .ico { width: 22px; height: 22px; }
.modulo h3 { font: 600 20px/1.25 var(--serif); }
.modulo p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.video { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--sombra); margin-bottom: 24px; }
.video iframe { width: 100%; height: 100%; border: 0; }
.capturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.capturas img { border-radius: var(--r); border: 1px solid var(--line); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; transition: transform 250ms var(--ease); }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.plan--destacado { border-color: rgba(223, 177, 41, .55); background: linear-gradient(180deg, rgba(223, 177, 41, .08), var(--surface) 40%); box-shadow: 0 30px 80px -40px rgba(223, 177, 41, .45); }
.plan__sello { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.plan__nombre { font: 600 24px/1.2 var(--serif); }
.plan__periodo { color: var(--muted); font-size: 14px; margin-top: -8px; }
.plan .lista-check { flex: 1; font-size: 15px; margin: 8px 0 10px; }

/* ---------- Vacío / 404 ---------- */
.vacio { text-align: center; padding-block: clamp(56px, 8vw, 110px); display: grid; justify-items: center; gap: 14px; }
.vacio .eyebrow::before { display: none; }
.vacio .btn { margin-top: 12px; }
.vacio--mini { padding-block: 40px; color: var(--muted); }

/* ---------- Pie ---------- */
.pie { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); background: var(--bg-2); }
.pie__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-block: 56px 40px; }
.pie__marca p { margin: 18px 0 22px; max-width: 30em; color: var(--muted); font-size: 14px; }
.pie__marca .pie__app { margin: 26px 0 10px; color: var(--text); font-weight: 600; }
.insignias { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.insignia { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px; border-radius: 10px;
    background: #000; border: 1px solid #5f5f5f; color: #fff; text-decoration: none; transition: border-color .2s; }
.insignia:hover { border-color: var(--gold); }
.insignia svg { width: 26px; height: 26px; flex: none; }
.insignia span { display: grid; font-size: 17px; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.insignia small { font-size: 10px; font-weight: 500; letter-spacing: .04em; opacity: .85; }
.insignias__pronto { flex-basis: 100%; margin: 2px 0 0 !important; font-size: 12px !important; color: var(--faint) !important; }
.insignias--grandes .insignia { height: 56px; }
.app-pag__tiendas { margin-top: 14px; }
.franja-app { display: grid; grid-template-columns: 88px 1fr auto; gap: 24px; align-items: center; padding: 26px 30px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(223, 177, 41, .1), var(--surface)); border: 1px solid rgba(223, 177, 41, .3); }
.franja-app img { width: 88px; height: 88px; border-radius: 20px; }
.franja-app .muted { margin-top: 6px; }
.franja-app .insignias { max-width: 380px; }
@media (max-width: 900px) { .franja-app { grid-template-columns: 64px 1fr; } .franja-app img { width: 64px; height: 64px; } .franja-app .insignias { grid-column: 1 / -1; } }
.pie__titulo { font: 600 15px/1 var(--sans); color: var(--text); margin-bottom: 18px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--muted); }
.pie ul a:hover { color: var(--gold); }
.redes { display: flex; gap: 10px; }
.redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease; }
.redes a:hover { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.pie__legal { padding-block: 24px 32px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); display: grid; gap: 8px; }
.pie__legal > * { max-width: 75ch; }
.pie__aviso { color: var(--muted); }

.wa-flotante {
    position: fixed; right: 20px; bottom: 20px; z-index: 35; display: grid; place-items: center;
    width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff;
    box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .6); transition: transform var(--t-hover) var(--ease);
}
.wa-flotante:active { transform: scale(.95); }
.wa-flotante .ico { width: 28px; height: 28px; }

/* ---------- Formas de pago según el país (tienda.js marca data-pais) ---------- */
.ficha__botones > * { order: 8; }
.ficha__botones > .pais-pago { order: 0; }
.ficha__botones > [data-pago="pe"] { order: 1; }
.ficha__botones > [data-pago="tarjeta"] { order: 2; }
.ficha__botones > [data-pago="local"] { order: 3; }
.ficha__botones > [data-pago="usdt"] { order: 4; }
.ficha__botones > .ficha__secundarios { order: 9; }
[data-pais="MX"] > [data-pago="local"], [data-pais="AR"] > [data-pago="local"] { order: 1; }
[data-pais="CU"] > [data-pago="usdt"] { order: 1; }
.ficha__tarjeta { display: grid; gap: 10px; }
.ficha__nota-pago { margin-top: -4px; text-align: center; font-size: 12.5px; color: var(--muted); }
.pais-pago { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.pais-pago select {
    height: 38px; padding: 0 34px 0 12px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--text); font: inherit; font-weight: 600;
    background: var(--bg-2) 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='%23a8a29a' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none; cursor: pointer;
}
.pais-pago select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.precio__usd { font-size: 16px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.precio-t__usd { flex-basis: 100%; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.btn--mp, .btn--usdt { color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn--mp { background: linear-gradient(135deg, #00a6e8, #0067c8); }
/* PayPal con su estilo oficial: amarillo, logo en sus azules y marcas de tarjeta */
.btn--paypal { gap: 10px; background: #ffc439; color: #1f1f1f; border-color: transparent; font-weight: 600; white-space: nowrap; }
.btn--paypal:hover { background: #f5b72e; border-color: transparent; box-shadow: 0 12px 30px -12px rgba(255, 196, 57, .7); }
.btn--paypal .btn__extra { opacity: .75; color: #1f1f1f; font-weight: 600; }
.marca-pago--paypal { height: 22px; }
.marca-pago--tarjeta { height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.btn-paypal__tarjetas { display: inline-flex; gap: 4px; }
@media (max-width: 380px) { .btn-paypal__tarjetas { display: none; } }
/* Pago local (Hotmart) con los colores de cada marca */
.pago-local { display: grid; gap: 10px; }
.pago-local__fila { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.pago-local .btn { gap: 10px; color: #fff; border-color: transparent; font-weight: 700; padding: 0 14px; }
.pago-mp { background: #009ee3; box-shadow: inset 0 -3px 0 #ffe600; }   /* azul Mercado Pago, filo amarillo Mercado Libre */
.pago-mp:hover { border-color: transparent; box-shadow: 0 12px 30px -12px rgba(0, 158, 227, .8), inset 0 -3px 0 #ffe600; }
.pago-oxxo { background: #b30016; }
.pago-oxxo:hover { border-color: transparent; box-shadow: 0 12px 30px -12px rgba(227, 0, 27, .7); }
.marca-pago { height: 26px; width: auto; flex: none; }
.marca-pago--oxxo { height: 24px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); border-radius: 4px; }
.precio-t__mon { font-size: .5em; font-weight: 600; color: var(--muted); margin-left: 2px; }
.btn--mp:hover { border-color: transparent; box-shadow: 0 12px 30px -12px rgba(0, 120, 220, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn--usdt { background: linear-gradient(135deg, #26a17b, #157a5b); }
.btn--usdt:hover { border-color: transparent; box-shadow: 0 12px 30px -12px rgba(38, 161, 123, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn--usdt .btn__extra { opacity: .8; }
.btn__simbolo { font-weight: 700; font-size: 1.15em; line-height: 1; }

/* ---------- Pago con QR (Yape / Plin) ---------- */
.ficha__qr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn--yape, .btn--plin { color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn--yape { background: linear-gradient(135deg, #9a34ad, #6a1b7d); }
.btn--plin { background: linear-gradient(135deg, #0aa9b0, #1d5fd6); }
.btn--yape:hover { border-color: transparent; box-shadow: 0 12px 30px -12px rgba(154, 52, 173, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn--plin:hover { border-color: transparent; box-shadow: 0 12px 30px -12px rgba(29, 95, 214, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn--wa-borde { background: transparent; border-color: rgba(37, 211, 102, .45); color: #7ee2a8; }
.btn--wa-borde:hover { border-color: var(--wa); background: rgba(37, 211, 102, .08); }
.barra-compra__botones { display: flex; gap: 8px; }
.barra-compra__botones .btn { padding: 0 16px; }

.pago {
    width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px 24px 24px;
    scrollbar-gutter: stable; overscroll-behavior: contain;
    border: 1px solid var(--line-2); border-radius: 24px; color: var(--text);
    background: radial-gradient(120% 60% at 50% 0%, var(--pago-tono), transparent 60%), var(--surface);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8);
    opacity: 1; transform: none;
    transition: opacity 220ms ease-out, transform 220ms var(--ease), overlay 220ms allow-discrete, display 220ms allow-discrete;
}
.pago--yape { --pago-tono: rgba(154, 52, 173, .28); --pago-acento: #d38be0; }
.pago--plin { --pago-tono: rgba(10, 169, 176, .26); --pago-acento: #5fd6dc; }
.pago:not([open]) { opacity: 0; transform: scale(.96) translateY(8px); transition-duration: 150ms; }
@starting-style { .pago[open] { opacity: 0; transform: scale(.96) translateY(8px); } }
.pago::backdrop { background: rgba(5, 5, 5, .72); backdrop-filter: blur(6px); transition: opacity 220ms ease-out, overlay 220ms allow-discrete, display 220ms allow-discrete; }
.pago:not([open])::backdrop { opacity: 0; }
@starting-style { .pago[open]::backdrop { opacity: 0; } }

.pago__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pago__marca {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: #fff;
    font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.pago--yape .pago__marca { background: linear-gradient(135deg, #9a34ad, #6a1b7d); }
.pago--plin .pago__marca { background: linear-gradient(135deg, #0aa9b0, #1d5fd6); }
.pago--usdt { --pago-tono: rgba(38, 161, 123, .26); --pago-acento: #5fd3ad; }
.pago--usdt .pago__marca { background: linear-gradient(135deg, #26a17b, #157a5b); }
.pago__moneda { font: 600 .45em/1 var(--sans); letter-spacing: .08em; color: var(--muted); }
.pago__qr--chico { width: min(200px, 100%); margin-top: 12px; padding: 10px; }
.cripto { margin-top: 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); display: grid; gap: 8px; }
.cripto__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; font-size: 15px; }
.cripto__chip { padding: 3px 9px; border-radius: 999px; background: rgba(38, 161, 123, .16); color: #7fe0bf; font-size: 11.5px; font-weight: 600; }
.cripto__ayuda { font-size: 13.5px; color: var(--muted); }
.cripto__dato {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left;
    border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
    transition: border-color var(--t-hover) ease, transform var(--t-press) var(--ease);
}
.cripto__dato:hover { border-color: var(--pago-acento); }
.cripto__dato:active { transform: scale(.98); }
.cripto__dato > span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cripto__dato code { font: 600 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--text); }
.cripto__dato .ico { width: 16px; height: 16px; color: var(--muted); }
.btn--binance { background: #f0b90b; color: #181a20; border-color: transparent; font-weight: 700; }
.btn--binance:hover { border-color: transparent; box-shadow: 0 12px 30px -12px rgba(240, 185, 11, .7); }
.cripto__ayuda--centro { text-align: center; }
.cripto__alerta { font-size: 12.5px; color: #f3c58b; }
.pago__cerrar {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2);
    background: transparent; color: var(--muted); cursor: pointer; transition: color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease);
}
.pago__cerrar:hover { color: var(--text); border-color: var(--faint); }
.pago__cerrar:active { transform: scale(.94); }
.pago__etiqueta { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pago__monto { text-align: center; font: 600 44px/1.1 var(--serif); letter-spacing: -.02em; margin-top: 4px; }
.pago__producto { text-align: center; color: var(--muted); font-size: 14px; margin-top: 2px; }
.pago__qr {
    margin: 20px auto 0; width: min(280px, 100%); padding: 14px; border-radius: 20px; background: #fff;
    box-shadow: 0 0 0 1px rgba(223, 177, 41, .35), 0 0 0 7px rgba(223, 177, 41, .07), 0 24px 50px -20px rgba(0, 0, 0, .7);
}
.pago__qr img { width: 100%; height: auto; border-radius: 6px; }
.pago__titular { display: grid; justify-items: center; gap: 2px; margin-top: 18px; text-align: center; }
.pago__titular span { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.pago__titular strong { font: 600 19px/1.3 var(--serif); letter-spacing: .14em; color: var(--gold-2); }
.pago__numero {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--line-2); background: none; color: var(--text); font-size: 14px; cursor: pointer;
}
.pago__numero .ico { width: 15px; height: 15px; color: var(--muted); }
.pago__pasos { margin: 20px 0 0; padding: 16px 18px 16px 38px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; color: #d7d1c6; }
.pago__pasos li::marker { color: var(--pago-acento); font-weight: 700; }
.pago:focus, .pago:focus-visible { outline: none; }
.pago__registro { display: grid; gap: 10px; margin-top: 16px; }
.pago__registro[hidden], .pago__listo[hidden], .pago__error[hidden] { display: none; }
.pago__registro label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pago__registro label small { font-weight: 400; color: var(--faint); }
.pago__registro input {
    height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2);
    color: var(--text); font-size: 15px; outline: 0; transition: border-color var(--t-hover) ease;
}
.pago__registro input:focus { border-color: var(--pago-acento); }
.pago__registro .pago__acciones { margin-top: 4px; }
.pago__registro .btn[disabled] { opacity: .6; pointer-events: none; }
.pago__error { padding: 10px 12px; border-radius: 10px; background: rgba(255, 107, 91, .12); border: 1px solid rgba(255, 107, 91, .35); color: #ffb4aa; font-size: 14px; }
.pago__listo { display: grid; gap: 12px; margin-top: 16px; padding: 18px; border-radius: 16px; text-align: center; font-size: 14.5px; color: #d7d1c6;
    background: rgba(37, 211, 102, .08); border: 1px solid rgba(37, 211, 102, .35); }
.pago__listo-titulo { font: 600 20px/1.3 var(--serif); color: #7ee2a8; }
.descarga { display: grid; place-items: center; min-height: 60vh; }
.descarga__caja { width: 100%; max-width: 560px; display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(28px, 5vw, 48px);
    border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.descarga__caja--error { border-color: rgba(255, 107, 91, .35); }
.descarga__caja .eyebrow::before { display: none; }
.descarga__portada { width: 140px; height: auto; border-radius: 6px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); margin-bottom: 6px; }
.descarga__datos { list-style: none; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; color: var(--muted); width: 100%; }
.descarga__datos strong { color: var(--text); }
.pago__acciones { display: grid; gap: 8px; margin-top: 16px; }
.pago__acciones .btn { padding: 0 14px; font-size: 14.5px; white-space: normal; }
.pago__nota { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--faint); }
body:has(.pago[open]) { overflow: hidden; }

/* ---------- Pago con tarjeta / PayPal integrado ---------- */
.btn__extra { margin-left: 4px; font-weight: 500; opacity: .6; }
.paypal-pago {
    padding: 18px 18px 14px; border-radius: 18px; background: #fff; color: #1d1d1f;
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7);
}
@media (prefers-reduced-motion: no-preference) {
    .paypal-pago:not([hidden]) { animation: pp-entra 220ms var(--ease); }
    @keyframes pp-entra { from { opacity: 0; transform: translateY(-6px); } }
}
.paypal-pago__monto { text-align: center; font-size: 15px; margin-bottom: 14px; }
.paypal-pago__monto small { color: #6b6b70; }
.paypal-pago__correo { display: grid; gap: 6px; margin-bottom: 16px; text-align: left; font-size: 14px; font-weight: 600; color: #1d1d1f; }
.paypal-pago__correo input {
    height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #d2d2d7; background: #fff; color: #1d1d1f; font-size: 16px; outline: 0;
    transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.paypal-pago__correo input:focus { border-color: #b8901f; box-shadow: 0 0 0 3px rgba(223, 177, 41, .25); }
.paypal-pago__correo input.is-ok { border-color: #1a7f4b; }
.paypal-pago__correo small { font-weight: 400; font-size: 12.5px; color: #6b6b70; }
.paypal-pago__botones { min-height: 110px; }
.paypal-pago__cargando { text-align: center; color: #6b6b70; font-size: 14px; padding-top: 40px; }
.paypal-pago__error { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #8e271c; font-size: 14px; }
.paypal-pago__seguro { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 10px; font-size: 12.5px; color: #6b6b70; text-align: center; }
.paypal-pago__seguro .ico { color: #1a7f4b; }
.paypal-ok {
    display: grid; gap: 12px; padding: 22px; border-radius: 18px; text-align: center;
    background: linear-gradient(180deg, rgba(37, 211, 102, .1), transparent), var(--bg-2); border: 1px solid rgba(37, 211, 102, .4);
}
.paypal-ok[hidden], .paypal-pago[hidden], .paypal-pago__error[hidden], .btn[hidden] { display: none; }
.paypal-ok__titulo { font: 600 26px/1.2 var(--serif); color: #7ee2a8; }
.paypal-ok__nota { font-size: 14px; color: var(--muted); }

/* ---------- Vitrina 3D de la categoría ---------- */
.vitrina { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.vitrina__luz {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(42% 70% at 70% 46%, rgba(223, 177, 41, .17), transparent 70%),
        radial-gradient(30% 50% at 8% 100%, rgba(223, 177, 41, .06), transparent 70%);
}
.vitrina__grid { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.vitrina__grid > * { min-width: 0; }
.vitrina__titulo { font: 600 clamp(44px, 6vw, 76px)/1 var(--serif); letter-spacing: -.03em; }
.vitrina__sub { margin-top: 18px; max-width: 30em; font-size: 19px; line-height: 1.5; color: #e6e0d4; }
.vitrina__puntos { list-style: none; margin: 26px 0 28px; padding: 0; display: grid; gap: 10px; font-size: 15px; color: #d7d1c6; }
.vitrina__puntos li { display: flex; align-items: center; gap: 10px; }
.vitrina__puntos .ico { color: var(--gold); }

.vitrina__escena { position: relative; height: clamp(440px, 40vw, 540px); outline: none; touch-action: pan-y; user-select: none; }
/* Los libros lejanos se desvanecen hacia los bordes: no invaden el texto */
.vitrina__pista { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.vitrina + .seccion--pegada { padding-top: 32px; }
.vitrina__escena:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: var(--r); }
.vitrina__foco {
    position: absolute; left: 50%; top: 38%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(242, 210, 122, .28), rgba(223, 177, 41, .08) 55%, transparent);
}
.vitrina__pista { position: absolute; left: 0; right: 0; top: 0; height: 76%; }
.vitrina__libro {
    position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 4 / 5; margin: 0;
    transform: translate(-50%, -50%); transform-origin: 50% 60%;
    /* Movimiento en pantalla: ease-in-out suave (arranca y frena sin tirones) */
    transition: transform 850ms cubic-bezier(.45, 0, .2, 1), opacity 700ms cubic-bezier(.45, 0, .2, 1);
    mix-blend-mode: lighten; /* el fondo oscuro de la imagen se funde con la escena */
    will-change: transform, opacity;
}
.vitrina__libro img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.vitrina__piso {
    position: absolute; left: 50%; top: 70%; width: 46%; height: 34px; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent); filter: blur(6px); pointer-events: none;
}
.vitrina__flecha {
    position: absolute; top: 38%; right: 0; z-index: 20; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--line-2); background: rgba(11, 10, 9, .7); color: var(--text); cursor: pointer; backdrop-filter: blur(6px);
    transition: border-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease);
}
.vitrina__flecha--prev { left: 0; right: auto; }
.vitrina__flecha--prev .ico { transform: rotate(180deg); }
.vitrina__flecha:active { transform: scale(.94); }

.vitrina__info { position: absolute; left: 0; right: 0; bottom: 34px; display: grid; justify-items: center; gap: 6px; text-align: center; z-index: 15;
    transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease; }
.vitrina__info.is-cambiando { opacity: 0; transform: translateY(4px); filter: blur(2px); }
.vitrina__etiqueta { padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.vitrina__etiqueta[hidden] { display: none; }
.vitrina__nombre { font: 600 clamp(20px, 2vw, 24px)/1.2 var(--serif); }
.vitrina__compra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vitrina__compra .precio-t__actual { font-size: 24px; }
.vitrina__compra .btn { color: var(--gold-ink); }
.vitrina__puntos-nav { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 8px; z-index: 15; }
.vitrina__puntos-nav button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line-2); cursor: pointer;
    transition: width 300ms var(--ease), background-color 300ms ease;
}
.vitrina__puntos-nav button[aria-selected="true"] { width: 26px; background: var(--gold); }
@media (hover: hover) and (pointer: fine) {
    .vitrina__flecha:hover { border-color: var(--gold); color: var(--gold); }
}
/* Reducir movimiento: sin desplazamiento 3D, solo fundido entre libros */
@media (prefers-reduced-motion: reduce) {
    .vitrina__libro { transition: opacity 600ms ease !important; }
    .vitrina__info { transition: opacity 250ms ease !important; }
}
@media (max-width: 900px) {
    .vitrina__grid { grid-template-columns: 1fr; }
    .vitrina__texto .btn, .vitrina__puntos { display: none; }
    .vitrina__escena { height: 470px; }
    .vitrina__libro { width: 52%; }
    .vitrina__flecha { display: none; }
}

/* ---------- Mis compras ---------- */
.topbar__compras.is-activo { border-color: var(--gold); color: var(--gold); }
.aviso { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 15px; border: 1px solid var(--line-2); background: var(--surface); }
.aviso--error { border-color: rgba(255, 107, 91, .4); color: #ffb4aa; background: rgba(255, 107, 91, .08); }
.aviso--ok { border-color: rgba(37, 211, 102, .4); color: #7ee2a8; }
.compras-acceso { display: grid; gap: 14px; max-width: 480px; padding: clamp(22px, 4vw, 34px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.compras-acceso__campo { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.compras-acceso__campo input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-size: 16px; outline: 0; }
.compras-acceso__campo input:focus { border-color: var(--gold); }
.compras-acceso__nota { font-size: 13px; color: var(--faint); }
.compras-acceso--enviado { justify-items: start; }
.compras-acceso__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gold-soft); color: var(--gold); }
.compras { display: grid; gap: 14px; }
.compra { display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.compra__portada img { width: 76px; height: 100px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.compra__meta { font-size: 12.5px; color: var(--faint); letter-spacing: .02em; }
.compra__titulo { font: 600 19px/1.25 var(--serif); margin-top: 3px; }
.compra__estado { margin-top: 6px; font-size: 14px; color: var(--muted); }
.compra__estado--ok { color: #7ee2a8; }
.compras-salir { margin-top: 22px; text-align: center; }
.compra__accion { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.compras-app { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: 16px;
    background: rgba(223, 177, 41, .08); border: 1px solid rgba(223, 177, 41, .35); color: var(--text); text-decoration: none; }
.compras-app span { flex: 1; display: grid; gap: 2px; }
.compras-app small { color: var(--muted); font-size: 13px; }
.compras-app .ico { color: var(--gold); }
.app-pag { max-width: 820px; }
.app-pag__cab { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: center; margin-bottom: 26px; }
.app-pag__icono { width: 96px; height: 96px; border-radius: 22px; }
.app-pag__pasos { margin: 30px 0 18px; padding-left: 22px; display: grid; gap: 14px; line-height: 1.6; color: var(--muted); }
.app-pag__pasos strong { color: var(--text); }
.app-pag__nota a, .app-pag a:not(.btn) { color: var(--gold); }
@media (max-width: 560px) { .app-pag__cab { grid-template-columns: 1fr; } }
.compras-salir .enlace-boton { background: none; border: 0; color: var(--faint); text-decoration: underline; cursor: pointer; font-size: 14px; }
.paypal-ok__enlace { color: var(--gold); font-size: 14px; }
.paypal-ok__nota a { color: var(--gold); }
@media (max-width: 560px) {
    .compra { grid-template-columns: 60px 1fr; }
    .compra__portada img { width: 60px; height: 80px; }
    .compra__accion { grid-column: 1 / -1; }
    .compra__accion .btn { width: 100%; }
}

/* ---------- Animación de entrada ----------
   Usa la propiedad `translate` (independiente de `transform`) y la clase se retira al terminar,
   así no pisa las transiciones ni el hover de cada componente. */
@media (prefers-reduced-motion: no-preference) {
    .js .aparece { opacity: 0; translate: 0 16px; transition: opacity 500ms var(--ease), translate 500ms var(--ease); }
    .js .aparece.is-visible { opacity: 1; translate: 0 0; }
}

/* ---------- Hover con movimiento: solo con mouse (en táctil el toque dejaría el estado "pegado") ---------- */
@media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-1px); }
    .btn:hover:active { transform: translateY(-1px) scale(.97); }
    .hero__portadas:hover .hero__libro--1 { transform: translate(-50%, -53%) rotateY(-6deg) rotateZ(0); }
    .hero__portadas:hover .hero__libro--2 { transform: translate(-118%, -46%) rotateY(-18deg) rotateZ(-9deg) scale(.86); }
    .hero__portadas:hover .hero__libro--3 { transform: translate(18%, -44%) rotateY(-4deg) rotateZ(10deg) scale(.84); }
    .enlace-ver:hover .ico { transform: translateX(4px); }
    .tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
    .tarjeta:hover .tarjeta__media img { transform: scale(1.04) rotate(-1deg); }
    .tarjeta:hover .tarjeta__foco { opacity: 1; }
    .tarjeta:hover .tarjeta__btn { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
    .tarjeta:hover .tarjeta__btn .ico { transform: translateX(3px); }
    .modulo:hover { transform: translateY(-4px); }
    .capturas a:hover img { transform: scale(1.02); }
    .wa-flotante:hover { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
/* WhatsApp en la barra: siempre solo ícono (también hay botón flotante) */
.topbar__acciones .btn--wa { width: 40px; padding: 0; }
.topbar__panel { width: 40px; padding: 0; color: var(--gold); border-color: rgba(223, 177, 41, .45); }
.topbar__panel:hover { border-color: var(--gold); }
.topbar__acciones .btn--wa span { display: none; }
/* La barra superior puede ser más ancha que el contenido para que el menú no se corte */
.topbar__in.wrap { max-width: 1400px; }
.buscador input { width: 130px; }
@media (max-width: 760px) {
    /* En celular «Mis compras» queda solo con el icono */
    .topbar__compras span { display: none; }
    .topbar__compras { width: 40px; padding: 0; }
}
@media (max-width: 640px) {
    .topbar__acciones .btn span { display: none; }
    .topbar__acciones .btn { width: 40px; padding: 0; }
}
@media (max-width: 1240px) {
    .topbar__in { gap: 18px; }
    .buscador input { width: 100px; }
}
@media (max-width: 1080px) {
    .buscador input { width: 84px; }
}
@media (max-width: 900px) {
    .topbar__in { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding-top: 10px; }
    .nav { grid-column: 1 / -1; order: 3; margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter) 10px; }
    .buscador { display: none; }
    .hero__grid, .erp-hero__grid, .banda-erp, .ficha, .detalle { grid-template-columns: 1fr; }
    .hero__portadas { order: -1; height: 340px; }
    .hero__libro { width: 44%; }
    .confianza__grid { grid-template-columns: 1fr 1fr; }
    .confianza__grid > div:nth-child(3) { border-left: 0; }
    .confianza__grid > div:nth-child(n+3) { border-top: 1px solid var(--line); }
    .ficha__galeria { position: static; }
    .ficha__principal { aspect-ratio: 4 / 3.4; }
    .pie__grid { grid-template-columns: 1fr 1fr; }
    .pie__marca { grid-column: 1 / -1; }
    .barra-compra { display: flex; }
    .wa-flotante { bottom: 86px; }
    body:not(:has(.barra-compra)) .wa-flotante { bottom: 20px; }
}
@media (max-width: 560px) {
    .marca__txt { font-size: 18px; }
    .hero__portadas { height: 280px; }
    .confianza__grid { grid-template-columns: 1fr; }
    .confianza__grid > div { border-left: 0 !important; border-top: 1px solid var(--line); padding: 18px 4px; }
    .confianza__grid > div:first-child { border-top: 0; }
    .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .tarjeta__media { padding: 14px; }
    .tarjeta__cuerpo { padding: 14px; }
    .tarjeta__titulo { font-size: 16px; }
    .precio-t__actual { font-size: 21px; }
    .tarjeta__btn { height: 38px; font-size: 13.5px; }
    .tarjeta__autor { font-size: 10.5px; }
    .pago__monto { font-size: 38px; }
    .precio__actual { font-size: 17px; }
    .carrusel { grid-auto-columns: 62%; gap: 12px; }
    .seccion__cab { flex-direction: column; align-items: flex-start; }
    .fila-botones .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
    .pie__grid { grid-template-columns: 1fr; }
    .btn--lg { --h: 52px; padding: 0 20px; }
}

/* ---------- Audiolibros ---------- */
/* Portada cuadrada (formato estándar de audiolibro) */
.tarjeta--audio .tarjeta__media { aspect-ratio: 1; }
.tarjeta__audio { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.tarjeta__audio .ico { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }

/* Botón de muestra sobre la portada de la tarjeta */
.muestra-mini {
    position: absolute; z-index: 2; top: 0; right: 14px; translate: 0 -60px; /* esquina inferior derecha de la portada */
    width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
    background: var(--gold); color: var(--gold-ink);
    transition: transform var(--t-press) var(--ease), background-color var(--t-hover) ease;
}
.tarjeta--audio { container-type: inline-size; }
.tarjeta--audio .muestra-mini { top: 100cqw; }
.muestra-mini .ico { width: 18px; height: 18px; grid-area: 1 / 1; }
.muestra-mini .ico--pausa, .is-sonando > .ico--play, .is-sonando .ico--play { display: none; }
.is-sonando > .ico--pausa, .is-sonando .ico--pausa { display: block; }
.muestra-mini:active { transform: scale(.94); }
.muestra-mini:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.muestra-mini__anillo { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); rotate: -90deg; pointer-events: none; }
.muestra-mini__anillo circle { fill: none; stroke: var(--gold-2); stroke-width: 2; stroke-dasharray: 128.8; stroke-dashoffset: var(--avance, 128.8); opacity: 0; transition: opacity 200ms ease; }
.muestra-mini.is-sonando .muestra-mini__anillo circle { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .muestra-mini:hover { background: var(--gold-2); } }

/* Ficha: datos y reproductor */
.ficha--audio .ficha__principal { aspect-ratio: 1; }
.audio-meta { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: #d7d1c6; }
.audio-meta li { display: flex; align-items: center; gap: 8px; }
.audio-meta .ico { width: 17px; height: 17px; color: var(--gold); }
.reproductor { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); }
.reproductor__boton {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
    background: var(--gold); color: var(--gold-ink); transition: transform var(--t-press) var(--ease), background-color var(--t-hover) ease;
}
.reproductor__boton .ico { width: 22px; height: 22px; grid-area: 1 / 1; }
.reproductor__boton .ico--pausa { display: none; }
.reproductor.is-sonando .reproductor__boton .ico--pausa { display: block; }
.reproductor.is-sonando .reproductor__boton .ico--play { display: none; }
.reproductor__boton:active { transform: scale(.94); }
.reproductor__cuerpo { flex: 1; min-width: 0; }
.reproductor__titulo { font-weight: 600; font-size: 15.5px; }
.reproductor__titulo span { font-weight: 400; color: var(--muted); }
.reproductor__pista { position: relative; height: 22px; margin-top: 6px; cursor: pointer; touch-action: none; }
.reproductor__pista::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 999px; background: var(--surface-2); }
.reproductor__avance { position: absolute; left: 0; top: 9px; height: 4px; width: 0; border-radius: 999px; background: var(--gold); }
.reproductor__pista:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.reproductor__tiempos { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .reproductor__boton:hover { background: var(--gold-2); } }

/* Lista de capítulos */
.capitulos { padding-block: clamp(40px, 5vw, 64px) 0; }
.capitulos .titulo-md { margin-bottom: 20px; }
.capitulos__lista { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 0 clamp(32px, 5vw, 72px); color: #e6e0d4; }
.capitulos__lista li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.capitulos__lista li::marker { color: var(--gold); font-variant-numeric: tabular-nums; }
.capitulos__lista li > span:first-child { display: inline; }
.capitulos__dur { float: right; margin-left: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .capitulos__lista { grid-template-columns: 1fr 1fr; } }

/* Audiolibros: «próximamente» */
.pronto { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(48px, 7vw, 96px); }
.pronto__titulo { font: 600 clamp(40px, 5.6vw, 72px)/1.02 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.pronto__sub { margin-top: 18px; max-width: 30em; font-size: 19px; line-height: 1.5; color: #e6e0d4; }
.pronto__lista { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 14px; font-size: 16px; color: #e6e0d4; }
.pronto__lista li { display: flex; gap: 12px; align-items: flex-start; }
.pronto__lista .ico { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.pronto__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.pronto__escena { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; border-radius: var(--r-lg); background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.pronto__onda { display: flex; align-items: center; gap: 6px; height: 46%; }
.pronto__onda span { width: 8px; border-radius: 999px; background: var(--gold); height: var(--h); opacity: .9; animation: onda 1.6s var(--ease) infinite alternate; animation-delay: var(--d); transform-origin: center; }
.pronto__icono { position: absolute; bottom: 9%; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.pronto__icono .ico { width: 20px; height: 20px; color: var(--gold); }
@keyframes onda { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .pronto__onda span { animation: none; } }
@media (max-width: 900px) { .pronto { grid-template-columns: 1fr; } .pronto__escena { max-width: 360px; } }

/* ---------- Escuchar un audiolibro comprado ---------- */
.oyente { max-width: 820px; }
.oyente__cab { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; }
.oyente__portada { width: 120px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.oyente__portada img { width: 100%; height: 100%; object-fit: cover; }
.oyente__reproductor {
    position: sticky; top: 84px; z-index: 5; margin-top: 26px; padding: 16px 18px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(223, 177, 41, .14), rgba(223, 177, 41, .04)), var(--surface); border: 1px solid rgba(223, 177, 41, .3);
}
.oyente__sonando { font-weight: 600; color: var(--gold-2); margin-bottom: 10px; }
.oyente__reproductor audio { width: 100%; color-scheme: dark; }
.oyente__lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 4px; }
.oyente__cap { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background .15s; }
.oyente__cap:hover { background: var(--surface); }
.oyente__cap.is-actual { background: rgba(223, 177, 41, .1); }
.oyente__cap.is-actual .oyente__nombre, .oyente__cap.is-actual .oyente__num { color: var(--gold-2); }
.oyente__num { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.oyente__dur { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.oyente__nota { display: flex; gap: 12px; margin-top: 26px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.oyente__nota p + p { margin-top: 6px; }
.oyente__nota strong { color: var(--text); }
.oyente__velocidad { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.oyente__velocidad span { margin-right: 4px; }
.oyente__velocidad button { min-width: 54px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text); font: 600 13px/1 var(--sans); cursor: pointer; font-variant-numeric: tabular-nums; }
.oyente__velocidad button.is-activa { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.descarga__legal { margin-top: 18px; color: var(--faint); font-size: 12.5px; line-height: 1.6; }

/* ---------- Preventa ---------- */
.ficha__principal { position: relative; }
.preventa-sello {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 7px 13px; border-radius: 999px; background: rgba(12, 11, 9, .82); border: 1px solid rgba(223, 177, 41, .55); backdrop-filter: blur(6px);
    color: var(--gold-2); font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.preventa-sello .ico { width: 15px; height: 15px; }
.preventa-sello small { font: 600 12px/1 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--text); }
.preventa-sello--grande { bottom: 22px; padding: 10px 18px; font-size: 13px; }
.preventa-sello--grande .ico { width: 18px; height: 18px; }
.preventa-sello--grande small { font-size: 14px; }
.tarjeta__lanzamiento { color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.tarjeta__lanzamiento strong { color: var(--gold-2); }
.ficha__preventa { text-align: center; }
.preventa__eti { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.preventa__eti .ico { width: 18px; height: 18px; }
.preventa__titulo { margin-top: 10px; font: 600 clamp(26px, 3vw, 32px)/1.2 var(--serif); }
.preventa__titulo strong { color: var(--gold-2); font-weight: 600; }
.preventa__cuenta { display: flex; justify-content: center; gap: 12px; margin: 18px 0 6px; }
.preventa__cuenta span { display: grid; gap: 2px; min-width: 78px; padding: 12px 8px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.preventa__cuenta b { font: 600 30px/1 var(--serif); color: var(--text); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.preventa__texto { color: var(--muted); margin: 10px 0 16px; }
.preventa__form { display: grid; gap: 10px; }
.preventa__form input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; text-align: center; outline: 0; }
.preventa__form input:focus { border-color: var(--gold); }
.preventa__ok { margin-top: 6px; padding: 16px; border-radius: 14px; background: rgba(223, 177, 41, .1); border: 1px solid rgba(223, 177, 41, .35); color: var(--text); }
.preventa__nota { margin-top: 12px; font-size: 13px; color: var(--faint); }
.oyente__nota .ico { flex: none; width: 18px; color: var(--gold); }
@media (max-width: 560px) { .oyente__cab { grid-template-columns: 84px 1fr; gap: 14px; } .oyente__portada { width: 84px; } .oyente__reproductor { top: 64px; } }

/* ---------- Favoritos ---------- */
.tarjeta__cuerpo { position: relative; }
.tarjeta__autor { padding-right: 40px; }
.fav .ico { transition: fill .2s ease, transform .2s ease; }
.fav[aria-pressed="true"] { color: #ff5d73; border-color: rgba(255, 93, 115, .5); }
.fav[aria-pressed="true"] .ico { fill: currentColor; }
.fav.is-latido .ico { animation: latido .45s ease; }
@keyframes latido { 40% { transform: scale(1.3); } }
.fav--mini {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; z-index: 2;
    border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); cursor: pointer;
}
.fav--mini .ico { width: 17px; height: 17px; }
.fav--mini:hover { color: #ff5d73; border-color: rgba(255, 93, 115, .5); }
.topbar__favs { position: relative; width: 40px; padding: 0; color: #ff5d73; }
.topbar__favs .ico { width: 18px; height: 18px; fill: currentColor; }
.topbar__favs-n {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #ff5d73; color: #fff; font: 700 11px/18px var(--sans); text-align: center;
}
.topbar__favs.is-activo { border-color: #ff5d73; }
.favs-vacio { text-align: center; padding: 48px 0; color: var(--muted); }
.favs-vacio .ico { width: 42px; height: 42px; color: #ff5d73; margin-bottom: 12px; }
[data-favs-pagina] .tarjeta:not(.is-fav) { display: none; }