/* ==========================================================================
   SoundsPosters · estilos
   Blanco, negro y Barlow Condensed. La foto pone el color.
   Mobile first: todo se diseña a 375 px y se agranda con min-width.
   ========================================================================== */

@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --negro: #0b0b0b;
  --naranja: #ff5e1a;       /* color de marca: fondos y botones (texto negro encima: 6.9:1) */
  --naranja-oscuro: #c2410c;/* naranja para texto chico sobre blanco: 5.2:1 */
  --naranja-claro: #ffe9dd;
  --blanco: #ffffff;
  --papel: #f4f3f0;        /* fondo cálido para secciones alternas */
  --gris-1: #e7e6e2;       /* bordes */
  --gris-2: #c9c8c3;
  --gris-3: #5f5f5b;       /* texto secundario: 6.4:1 sobre blanco */
  --ok: #0f7a3d;
  --error: #b3261e;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", system-ui, -apple-system, sans-serif;
  --gutter: 16px;
  --max: 1320px;
  --radio: 2px;
  --header-h: 112px;
  --sombra: 0 10px 30px -12px rgba(0,0,0,.28);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font-family: var(--texto); font-size: 16px; line-height: 1.5; color: var(--negro); background: var(--blanco); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: .005em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 999; background: var(--negro); color: var(--blanco); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }
.oscuro :focus-visible, .btn--negro:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--negro); }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { padding: 48px 0; }
.seccion--papel { background: var(--papel); }
.seccion--negra { background: var(--negro); color: var(--blanco); }
.titulo-seccion { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.titulo-seccion h2 { font-size: clamp(32px, 8.5vw, 56px); }
.titulo-seccion a { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; white-space: nowrap; text-underline-offset: 4px; }
.kicker { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--naranja-oscuro); margin-bottom: 8px; display: block; }
.seccion--negra .kicker { color: var(--naranja); }

/* ---------- Botones ---------- */
.btn { --bg: var(--negro); --fg: var(--blanco); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 2px solid var(--negro); background: var(--bg); color: var(--fg); font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.1; padding-block: 8px; border-radius: var(--radio); transition: transform .15s var(--ease), background .2s, color .2s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn--naranja { --bg: var(--naranja); --fg: var(--negro); border-color: var(--naranja); }
.btn--naranja:hover { --bg: #ff7a42; border-color: #ff7a42; }
.btn--claro { --bg: var(--blanco); --fg: var(--negro); }
.btn--claro:hover { --bg: var(--negro); --fg: var(--blanco); }
.btn--invertido { --bg: var(--blanco); --fg: var(--negro); border-color: var(--blanco); }
.btn--borde-claro { --bg: transparent; --fg: var(--blanco); border-color: var(--blanco); }
.btn--ancho { width: 100%; }
.btn--chico { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.link { font-weight: 600; text-underline-offset: 3px; }

/* ---------- Barra de anuncio (marquesina continua) ---------- */
.anuncio { background: var(--naranja); color: var(--negro); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; height: 34px; overflow: hidden; position: relative; display: flex; align-items: center; }
.anuncio__pista { display: flex; width: max-content; animation: marquesina 32s linear infinite; }
.anuncio:hover .anuncio__pista, .anuncio:focus-within .anuncio__pista { animation-play-state: paused; }
.anuncio__grupo { display: flex; align-items: center; flex: none; }
.anuncio__item { white-space: nowrap; padding: 0 22px; display: inline-flex; align-items: center; gap: 22px; }
.anuncio__item::after { content: ""; width: 7px; height: 7px; background: var(--negro); border-radius: 50%; display: inline-block; margin-left: 22px; }
.anuncio__reloj { font-variant-numeric: tabular-nums; background: var(--negro); color: var(--naranja); padding: 1px 6px; margin-left: 8px; }
@keyframes marquesina { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .anuncio__pista { animation: none; } }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--gris-1); transition: box-shadow .2s; }
.header.scrolled { box-shadow: 0 6px 20px -14px rgba(0,0,0,.4); }
.header__fila { display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: 58px auto; align-items: center; column-gap: 8px; }
.logo { font-family: var(--display); font-weight: 900; font-size: 25px; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; justify-self: center; line-height: 1; display: flex; align-items: center; gap: 8px; }
.logo svg { width: 24px; height: 24px; flex: none; color: var(--naranja); }
.logo em { font-style: normal; color: var(--naranja); }
.footer .logo em { color: var(--naranja); }
.icono-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; padding: 0; position: relative; text-decoration: none; }
.icono-btn svg { width: 24px; height: 24px; }
.carrito-btn__n { position: absolute; top: 4px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--negro); color: var(--blanco); font-family: var(--display); font-weight: 800; font-size: 12px; display: grid; place-items: center; line-height: 1; border: 2px solid var(--blanco); }
.carrito-btn__n.pop { animation: pop .4s var(--ease); }
@keyframes pop { 40% { transform: scale(1.45); } }
.header__buscar { grid-column: 1 / -1; padding-bottom: 10px; }
.nav { display: none; }

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
  .header__fila { grid-template-columns: auto minmax(220px, 1fr) auto auto; grid-template-rows: 76px; column-gap: 28px; }
  .header__menu-btn { display: none; }
  .logo { justify-self: start; font-size: 28px; grid-column: 1; grid-row: 1; }
  .header__buscar { padding: 0; grid-column: 2; grid-row: 1; max-width: 520px; width: 100%; }
  .nav { display: flex; grid-column: 3; grid-row: 1; justify-self: end; gap: 22px; align-items: center; }
  .nav > a, .nav__drop > button { font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; background: none; border: 0; padding: 8px 0; display: flex; align-items: center; gap: 4px; position: relative; }
  .nav > a::after, .nav__drop > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .nav > a:hover::after, .nav > a[aria-current="page"]::after, .nav__drop:hover > button::after { transform: scaleX(1); }
  .nav__drop { position: relative; }
  .nav__drop > button svg { width: 14px; height: 14px; transition: transform .2s; }
  .nav__panel { position: absolute; top: 100%; right: -16px; background: var(--blanco); border: 1px solid var(--gris-1); box-shadow: var(--sombra); padding: 10px; min-width: 240px; display: none; }
  .nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel, .nav__drop.open .nav__panel { display: block; }
  .nav__drop:hover > button svg, .nav__drop.open > button svg { transform: rotate(180deg); }
  .nav__panel a { display: flex; justify-content: space-between; gap: 16px; padding: 9px 12px; text-decoration: none; font-weight: 500; }
  .nav__panel a:hover { background: var(--papel); }
  .nav__panel a span { color: var(--gris-3); font-size: 14px; }
  .header__fila > .carrito-btn { grid-column: 4; grid-row: 1; }
}

/* ---------- Buscador ---------- */
.buscador { position: relative; }
.buscador__campo { display: flex; align-items: center; height: 46px; border: 2px solid var(--negro); background: var(--blanco); border-radius: var(--radio); }
.buscador__campo svg { width: 20px; height: 20px; margin: 0 4px 0 12px; flex: none; }
.buscador input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 12px 0 6px; background: transparent; font-size: 16px; }
.buscador input::placeholder { color: var(--gris-3); }
.buscador__limpiar { width: 40px; height: 40px; border: 0; background: none; display: grid; place-items: center; }
.buscador__campo:focus-within { box-shadow: 0 0 0 3px rgba(0,0,0,.15); }
.buscador__lista { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; background: var(--blanco); border: 2px solid var(--negro); box-shadow: var(--sombra); max-height: min(70vh, 520px); overflow: auto; overscroll-behavior: contain; }
.buscador__grupo { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--gris-3); padding: 12px 14px 4px; }
.buscador__op { display: flex; align-items: center; gap: 12px; padding: 8px 14px; text-decoration: none; cursor: pointer; }
.buscador__op[aria-selected="true"], .buscador__op:hover { background: var(--papel); }
.buscador__op img { width: 44px; height: 44px; object-fit: cover; flex: none; background: var(--gris-1); }
.buscador__op img.redonda { border-radius: 50%; }
.buscador__op b { display: block; font-weight: 600; line-height: 1.2; }
.buscador__op small { color: var(--gris-3); font-size: 14px; }
.buscador__op mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.buscador__todos { display: block; padding: 12px 14px; font-weight: 600; border-top: 1px solid var(--gris-1); text-decoration: none; }
.buscador__todos[aria-selected="true"], .buscador__todos:hover { background: var(--papel); }
.buscador__vacio { padding: 16px 14px; color: var(--gris-3); }

/* ---------- Menú mobile ---------- */
.menu-movil { position: fixed; inset: 0; z-index: 90; display: flex; visibility: hidden; }
.menu-movil.open { visibility: visible; }
.menu-movil__fondo { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; }
.menu-movil.open .menu-movil__fondo { opacity: 1; }
.menu-movil__panel { position: relative; width: min(88vw, 380px); height: 100%; background: var(--blanco); overflow: auto; transform: translateX(-100%); transition: transform .3s var(--ease); padding: 12px var(--gutter) 32px; }
.menu-movil.open .menu-movil__panel { transform: none; }
.menu-movil__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.menu-movil nav > a { display: block; font-family: var(--display); font-weight: 900; font-size: 34px; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--gris-1); }
.menu-movil__generos { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.menu-movil small { display: block; margin-top: 22px; font-family: var(--display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-3); }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--negro); border-radius: 999px; background: var(--blanco); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.chip[aria-pressed="true"], .chip.on { background: var(--negro); color: var(--blanco); }
.chip small { font-weight: 500; opacity: .7; }

/* ---------- Precios ---------- */
.precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.precio__final { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .01em; }
.precio__antes { color: var(--gris-3); text-decoration: line-through; font-size: 15px; }
.badge { display: inline-block; white-space: nowrap; background: var(--naranja); color: var(--negro); font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .04em; padding: 3px 7px 2px; line-height: 1.1; }
.badge--claro { background: var(--blanco); color: var(--negro); }

/* ---------- Cards de producto ---------- */
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 720px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; } }
@media (min-width: 1100px) { .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--papel); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease), transform .7s var(--ease); }
.card__media .card__alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .card__media .card__alt { opacity: 1; }
  .card:hover .card__media img { transform: scale(1.03); }
}
.card__badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; z-index: 2; }
.card__cuerpo { padding-top: 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card__artista { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--gris-3); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__titulo { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.02; text-transform: uppercase; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__titulo::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toda la card es clickeable */
.card__pie { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.card .precio__final { font-size: 20px; }
.card .precio__antes { font-size: 14px; }
.card__agregar { position: relative; z-index: 2; flex: none; width: 42px; height: 42px; border: 2px solid var(--negro); background: var(--blanco); display: grid; place-items: center; border-radius: var(--radio); transition: background .2s, color .2s; }
.card__agregar svg { width: 20px; height: 20px; }
.card__agregar:hover { background: var(--naranja); border-color: var(--naranja); }
.card__agregar.ok { background: var(--negro); color: var(--blanco); }
.card__agregar-txt { display: none; }
@media (min-width: 720px) {
  .card__titulo { font-size: 23px; }
  .card__agregar { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; }
  .card__agregar-txt { display: inline; }
  .card__agregar svg { width: 16px; height: 16px; }
}

/* ---------- Carrusel ---------- */
.carrusel { position: relative; }
.carrusel__pista { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 0 var(--gutter) 6px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > * { scroll-snap-align: start; }
@media (min-width: 720px) { .carrusel__pista { grid-auto-columns: calc((100% - 2 * 20px) / 3.3); gap: 20px; } }
@media (min-width: 1100px) { .carrusel__pista { grid-auto-columns: calc((100% - 3 * 20px) / 4.25); } }
@media (min-width: 1352px) { .carrusel__pista { margin: 0; padding: 0 0 6px; scroll-padding: 0; } }
.carrusel__flechas { display: none; gap: 8px; }
@media (min-width: 1024px) { .carrusel__flechas { display: flex; } }
.carrusel__flechas button { width: 44px; height: 44px; border: 2px solid var(--negro); background: var(--blanco); display: grid; place-items: center; border-radius: 50%; }
.carrusel__flechas button:hover { background: var(--negro); color: var(--blanco); }
.carrusel__flechas button[disabled] { opacity: .3; pointer-events: none; }
.carrusel__flechas svg { width: 20px; height: 20px; }

/* ---------- Hero: banner de posters + buscador ---------- */
.hero { position: relative; background: #1a1714; color: var(--blanco); overflow: hidden; isolation: isolate; min-height: 620px; display: flex; align-items: flex-end; }
.hero__fondo, .hero__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,9,8,0) 22%, rgba(10,9,8,.72) 52%, rgba(10,9,8,.95) 100%); }
.hero__contenido { width: 100%; max-width: var(--max); margin: 0 auto; padding: 300px var(--gutter) 28px; }
.hero__oferta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; background: var(--naranja); color: var(--negro); padding: 6px 10px 5px; margin-bottom: 14px; }
.hero__oferta s { opacity: .65; font-weight: 700; }
.hero h1 { font-size: clamp(46px, 13.5vw, 112px); line-height: .86; letter-spacing: -.005em; max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--naranja); }
.hero__sub { font-size: 17px; color: #e4e2dd; margin: 12px 0 18px; max-width: 42ch; }
.hero__sub b { color: var(--blanco); font-weight: 600; }
.hero .buscador--grande { max-width: 640px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.hero__chips span { font-size: 14px; color: #cfcdc8; margin-right: 2px; }
.hero__chips a { font-size: 14px; font-weight: 600; color: var(--blanco); text-decoration: none; border: 1.5px solid rgba(255,255,255,.45); border-radius: 999px; padding: 6px 12px; transition: background .2s, border-color .2s, color .2s; }
.hero__chips a:hover { background: var(--naranja); border-color: var(--naranja); color: var(--negro); }
@media (min-width: 1024px) {
  .hero { min-height: min(720px, calc(100vh - 110px)); align-items: center; }
  .hero::before { background: linear-gradient(90deg, rgba(10,9,8,.94) 0%, rgba(10,9,8,.82) 34%, rgba(10,9,8,.25) 60%, rgba(10,9,8,0) 80%); }
  .hero__contenido { padding: 64px var(--gutter); }
  .hero__sub { font-size: 19px; }
}

/* buscador grande (hero, artistas, configurador) */
.buscador--grande .buscador__campo { height: 60px; border: 0; border-radius: 999px; padding-right: 6px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.buscador--grande .buscador__campo svg { width: 22px; height: 22px; margin-left: 20px; }
.buscador--grande input { font-size: 17px; color: var(--negro); }
.buscador__ir { flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--naranja); color: var(--negro); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; }
.buscador__ir:hover { background: #ff7a42; }
.buscador--grande .buscador__lista { color: var(--negro); border-radius: 14px; border-width: 0; top: calc(100% + 8px); }
@media (max-width: 420px) { .buscador__ir { padding: 0 14px; } .buscador--grande input { font-size: 16px; } }
.buscador__op mark { background: var(--naranja-claro); color: inherit; text-decoration: none; padding: 0 1px; }
.buscador__op i { font-style: normal; font-size: 12px; font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--naranja-oscuro); margin-left: auto; padding-left: 8px; white-space: nowrap; }
.buscador__sugerencia { padding: 10px 14px 0; font-size: 15px; }
.buscador__sugerencia button { background: none; border: 0; padding: 0; font-weight: 700; text-decoration: underline; color: var(--naranja-oscuro); }
/* en el inicio, el buscador del header aparece recién cuando el del hero sale de pantalla */
body.con-buscador-hero .header__buscar { display: none; }
body.con-buscador-hero.buscador-hero-fuera .header__buscar { display: block; }

/* ---------- Confianza ---------- */
.confianza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gris-1); border-bottom: 1px solid var(--gris-1); }
.confianza li { background: var(--blanco); display: flex; align-items: center; gap: 10px; padding: 14px 12px; }
.confianza svg { width: 26px; height: 26px; flex: none; }
.confianza b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 16px; line-height: 1.05; letter-spacing: .02em; }
.confianza span { font-size: 13px; color: var(--gris-3); line-height: 1.25; display: block; }
@media (min-width: 900px) {
  .confianza { grid-template-columns: repeat(4, 1fr); }
  .confianza li { padding: 20px 24px; justify-content: center; }
  .confianza b { font-size: 19px; }
}

/* ---------- Géneros (mosaico de portadas) ---------- */
.generos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.genero { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--negro); color: var(--blanco); text-decoration: none; isolation: isolate; }
.genero__fotos { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; z-index: -1; }
.genero__fotos img { width: 100%; height: 100%; object-fit: cover; transition: filter .5s, transform .7s var(--ease); }
.genero__fotos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 25%, rgba(0,0,0,.88)); }
.genero--grande { grid-column: span 2; aspect-ratio: 2 / 1; }
.genero--grande .genero__fotos { grid-template-columns: repeat(4, 1fr); }
.genero__txt { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.genero h3 { font-size: clamp(26px, 7.4vw, 44px); line-height: .9; }
.genero--grande h3 { font-size: clamp(40px, 12vw, 80px); }
.genero small { font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; opacity: .9; display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.genero small svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
@media (hover: hover) {
  .genero__fotos img { filter: grayscale(1) contrast(1.05); }
  .genero:hover .genero__fotos img, .genero:focus-visible .genero__fotos img { filter: none; transform: scale(1.04); }
  .genero:hover small svg { transform: translateX(4px); }
}
@media (min-width: 720px) { .generos { grid-template-columns: repeat(4, 1fr); gap: 16px; } .genero__txt { left: 18px; bottom: 18px; } }

/* ---------- Artistas (cuadrados con degradé naranja al pasar) ---------- */
.artistas-fila { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 4px var(--gutter) 8px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
.artistas-fila::-webkit-scrollbar { display: none; }
.artistas-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .artistas-fila { grid-auto-columns: 220px; gap: 16px; } .artistas-grilla { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .artistas-grilla { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1352px) { .artistas-fila { margin: 0; padding: 4px 0 8px; } }
.artista-q { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #1d1b19; color: var(--blanco); text-decoration: none; scroll-snap-align: start; isolation: isolate; }
.artista-q img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.artista-q::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.78)); transition: opacity .35s; }
.artista-q::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(200deg, rgba(255,94,26,0) 15%, rgba(255,94,26,.55) 55%, rgba(255,94,26,.97) 100%); opacity: 0; transition: opacity .35s var(--ease); }
.artista-q:hover::after, .artista-q:focus-visible::after { opacity: 1; }
.artista-q:hover img, .artista-q:focus-visible img { transform: scale(1.06); }
.artista-q__txt { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.artista-q b { font-family: var(--display); font-weight: 800; font-size: clamp(19px, 5vw, 26px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.artista-q small { display: block; font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; margin-top: 4px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.artista-q:hover small, .artista-q:focus-visible small { opacity: 1; transform: none; }
.artista-q__flecha { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--blanco); color: var(--negro); display: grid; place-items: center; transform: scale(.6); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
.artista-q__flecha svg { width: 18px; height: 18px; }
.artista-q:hover .artista-q__flecha, .artista-q:focus-visible .artista-q__flecha { transform: none; opacity: 1; }
@media (hover: none) { .artista-q small { opacity: 1; transform: none; } .artista-q__flecha { display: none; } }
.artista-q small { white-space: nowrap; }
.seccion--artistas { background: var(--negro); color: var(--blanco); }
.seccion--artistas .titulo-seccion { flex-direction: column; align-items: center; text-align: center; }
.seccion--artistas .titulo-seccion h2 em { font-style: normal; color: var(--naranja); }
.seccion--artistas .titulo-seccion p { color: #bdbdb8; margin-top: 8px; }
.seccion--artistas .buscador--grande { max-width: 560px; margin: 28px auto 0; }
.seccion--artistas .buscador--grande .buscador__campo { background: #1c1b19; border: 1.5px solid #3a3835; box-shadow: none; }
.seccion--artistas .buscador--grande input { color: var(--blanco); }
.seccion--artistas .buscador--grande input::placeholder { color: #a9a7a2; }
.seccion--artistas .buscador--grande .buscador__campo svg { color: #a9a7a2; }

/* ---------- Comparación de combos (señuelo) ---------- */
.combos { display: grid; gap: 12px; }
.combo { position: relative; border: 2px solid var(--negro); padding: 20px 18px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; background: var(--blanco); color: var(--negro); }
.combo h3 { font-size: 30px; grid-column: 1; }
.combo__unidad { grid-column: 1; font-size: 15px; color: var(--gris-3); }
.combo__unidad b { color: var(--negro); }
.combo .precio { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: end; gap: 0; }
.combo .precio__final { font-size: 32px; }
.combo--top { background: var(--negro); color: var(--blanco); transform: none; border-color: var(--naranja); box-shadow: 0 0 0 2px var(--naranja); }
.combo--top .precio__final { color: var(--naranja); }
.combo--top .combo__unidad, .combo--top .precio__antes { color: #c4c4bf; }
.combo--top .combo__unidad b { color: var(--blanco); }
.combo__cinta { position: absolute; top: -13px; left: 16px; background: var(--blanco); color: var(--negro); border: 2px solid var(--negro);
}
.combo--top .combo__cinta { background: var(--naranja); border-color: var(--naranja); }
.combo__cinta { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; padding: 2px 8px; }
.combo__ahorro--vacio { display: none; }
.combo__ahorro { grid-column: 1 / -1; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; margin-top: 6px; }
@media (min-width: 900px) {
  .combos { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .combo { grid-template-columns: 1fr; text-align: center; padding: 34px 24px 28px; align-content: start; }
  .combo h3, .combo__unidad, .combo .precio { grid-column: 1; grid-row: auto; }
  .combo .precio { align-items: center; margin: 14px 0 4px; }
  .combo .precio__final { font-size: 52px; }
  .combo--top { transform: scale(1.04); }
  .combo__ahorro--vacio { display: block; }
  .combo__cinta { left: 50%; transform: translateX(-50%); white-space: nowrap; }
}

/* ---------- Pasos ---------- */
.pasos { display: grid; gap: 28px; counter-reset: paso; }
.paso { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.paso__n { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: .8; -webkit-text-stroke: 2px var(--naranja); color: transparent; }
.paso h3 { font-size: 30px; margin-bottom: 6px; }
.paso p { color: #cfcfca; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 40px; } .paso { grid-template-columns: 1fr; } .paso__n { font-size: 110px; } }

/* ---------- Bloque personalizados ---------- */
.perso { display: grid; gap: 24px; align-items: center; }
.perso__img { position: relative; aspect-ratio: 4/5; max-width: 420px; width: 100%; margin: 0 auto; }
.perso__img img { position: absolute; width: 74%; aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--sombra); }
.perso__img img:first-child { left: 0; top: 0; }
.perso__img img:last-child { right: 0; bottom: 0; }
.perso h2 { font-size: clamp(40px, 11vw, 76px); }
.perso p { font-size: 18px; margin: 14px 0 22px; max-width: 46ch; }
@media (min-width: 900px) { .perso { grid-template-columns: 1fr 1fr; gap: 64px; } .perso__img { order: 2; } }

/* ---------- Acordeones / FAQ ---------- */
.acordeon { border-top: 2px solid var(--negro); }
.acordeon details { border-bottom: 1px solid var(--gris-2); }
.acordeon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 21px; line-height: 1.1; letter-spacing: .01em; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--naranja-oscuro); background: linear-gradient(currentColor, currentColor) center/100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) center/2.5px 100% no-repeat; transition: transform .25s var(--ease); }
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon .acordeon__cuerpo { padding: 0 0 22px; color: #2a2a28; max-width: 70ch; }
.acordeon .acordeon__cuerpo p + p, .acordeon .acordeon__cuerpo p + ul, .acordeon .acordeon__cuerpo ul + p { margin-top: 10px; }
.lista-check li { position: relative; padding-left: 26px; margin-top: 8px; }
.lista-check li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); }
.faq-layout { display: grid; gap: 24px; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1fr 1.6fr; gap: 64px; } }

/* ---------- Newsletter ---------- */
.news { display: grid; gap: 18px; }
.news h2 { font-size: clamp(40px, 11vw, 72px); }
.news h2 em { font-style: normal; color: var(--naranja); }
.news p { color: #d0d0cb; }
.news form { display: flex; flex-direction: column; gap: 10px; }
.news input { height: 52px; border: 2px solid var(--blanco); background: transparent; color: var(--blanco); padding: 0 14px; border-radius: var(--radio); font-size: 16px; }
.news input::placeholder { color: #a7a7a2; }
.news__ok { border: 2px dashed var(--blanco); padding: 16px; }
.news__ok code { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: .08em; display: block; margin-top: 4px; }
.news small { color: #a7a7a2; font-size: 13px; }
@media (min-width: 900px) { .news { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; } .news form { flex-direction: row; } .news input { flex: 1; } }

/* ---------- Footer ---------- */
.footer { background: var(--negro); color: var(--blanco); padding: 48px 0 28px; border-top: 1px solid #262626; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.footer__marca, .footer__grid > div:last-child { grid-column: 1 / -1; }
.footer h4 { font-size: 15px; letter-spacing: .14em; color: #a7a7a2; margin-bottom: 12px; font-weight: 700; }
.footer li { margin-top: 8px; }
.footer a { text-decoration: none; color: #e9e9e4; }
.footer a:hover { text-decoration: underline; }
.footer__marca .logo { color: var(--blanco); justify-content: flex-start; font-size: 30px; }
.footer__marca p { color: #bdbdb8; margin-top: 10px; max-width: 34ch; }
.pagos { display: flex; flex-wrap: wrap; gap: 6px; }
.pagos span { border: 1px solid #4a4a47; padding: 5px 9px; font-size: 13px; font-weight: 600; color: #e9e9e4; border-radius: 3px; }
.arrepentimiento { display: inline-flex; margin-top: 16px; border: 2px solid var(--blanco); padding: 10px 14px; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; }
.arrepentimiento:hover { background: var(--naranja); border-color: var(--naranja); color: var(--negro) !important; text-decoration: none !important; }
.footer__legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid #2c2c2a; font-size: 13px; color: #a7a7a2; display: grid; gap: 8px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } .footer__marca, .footer__grid > div:last-child { grid-column: auto; } .footer__legal { grid-template-columns: 1fr auto; } }

/* ---------- Cajón del carrito ---------- */
.cajon { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.cajon.open { visibility: visible; }
.cajon__fondo { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; }
.cajon.open .cajon__fondo { opacity: 1; }
.cajon__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(100vw, 440px); background: var(--blanco); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s var(--ease); }
.cajon.open .cajon__panel { transform: none; }
.cajon__top { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px var(--gutter); border-bottom: 1px solid var(--gris-1); }
.cajon__top h2 { font-size: 30px; }
.cajon__progreso { padding: 14px var(--gutter); background: var(--papel); border-bottom: 1px solid var(--gris-1); }
.progreso__txt { font-weight: 600; font-size: 15px; line-height: 1.3; }
.progreso__txt b { font-weight: 700; }
.progreso__barra { position: relative; height: 8px; background: var(--gris-1); margin: 12px 0 6px; border-radius: 4px; }
.progreso__barra > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--naranja); border-radius: 4px; transition: width .5s var(--ease); }
.progreso__hitos { position: relative; height: 20px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--gris-3); }
.progreso__hitos span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.progreso__hitos span:last-child { transform: translateX(-100%); }
.progreso__hitos span.ok { color: var(--negro); }
.progreso__barra .hito { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--gris-2); }
.progreso__barra .hito:last-child { margin-left: -14px; }
.progreso__barra .hito.ok { background: var(--naranja); border-color: var(--negro); }
.cajon__items { flex: 1; overflow: auto; padding: 4px var(--gutter); overscroll-behavior: contain; }
.item { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--gris-1); align-items: start; }
.item img { width: 76px; height: 76px; object-fit: cover; background: var(--papel); }
.item__artista { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--gris-3); }
.item__titulo { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 19px; line-height: 1.05; text-decoration: none; display: block; }
.item__ver { font-size: 14px; color: var(--gris-3); margin-top: 2px; }
.item__ver i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--gris-2); }
.item__der { text-align: right; display: flex; flex-direction: column; align-items: end; gap: 6px; }
.item__der .precio__final { font-size: 18px; }
.item__quitar { border: 0; background: none; font-size: 13px; text-decoration: underline; color: var(--gris-3); padding: 4px 0; }
.item__combo { font-size: 12px; font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--negro); color: var(--blanco); padding: 2px 6px; }
.cajon__vacio { text-align: center; padding: 48px 12px; }
.cajon__vacio h3 { font-size: 30px; margin-bottom: 8px; }
.cajon__vacio p { color: var(--gris-3); margin-bottom: 20px; }
.cajon__sugerencias { padding: 10px 0 16px; }
.cajon__sugerencias h3 { font-size: 18px; letter-spacing: .04em; margin: 8px 0 10px; }
.mini-sug { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-sug > div { position: relative; min-width: 0; }
.mini-sug a { text-decoration: none; display: block; }
.mini-sug img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--papel); }
.mini-sug b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 14px; line-height: 1.05; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-sug button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--blanco); color: var(--negro); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.mini-sug button svg { width: 16px; height: 16px; }
.mini-sug button.ok { background: var(--negro); color: var(--blanco); }
.cajon__pie { border-top: 2px solid var(--negro); padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
.recibis { font-size: 14px; color: #2a2a28; margin-bottom: 12px; display: grid; gap: 3px; }
.recibis span { display: flex; gap: 8px; align-items: center; }
.recibis svg { width: 16px; height: 16px; flex: none; }
.totales { display: grid; gap: 4px; margin-bottom: 12px; }
.totales div { display: flex; justify-content: space-between; font-size: 15px; }
.totales .ahorro { color: var(--ok); font-weight: 600; }
.totales .total { font-family: var(--display); font-weight: 900; font-size: 28px; text-transform: uppercase; margin-top: 4px; align-items: baseline; }
.totales .total small { font-family: var(--texto); font-weight: 500; font-size: 13px; text-transform: none; color: var(--gris-3); }
.cajon__seguro { display: flex; justify-content: center; gap: 6px; align-items: center; font-size: 13px; color: var(--gris-3); margin-top: 10px; }
.cajon__seguro svg { width: 14px; height: 14px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 120; background: var(--negro); color: var(--blanco); padding: 12px 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--sombra); max-width: calc(100vw - 32px); transition: transform .35s var(--ease); font-weight: 500; }
.toast.on { transform: translate(-50%, 0); }
.toast button { background: none; border: 0; color: var(--blanco); text-decoration: underline; font-weight: 600; white-space: nowrap; padding: 4px; }
body.con-barra .toast { bottom: 96px; }

/* ---------- Encabezados de página ---------- */
.migas { font-size: 14px; color: var(--gris-3); padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.cabecera { padding: 24px 0 28px; }
.cabecera h1 { font-size: clamp(48px, 14vw, 120px); line-height: .86; }
.cabecera p { font-size: 18px; color: #2a2a28; margin-top: 12px; max-width: 56ch; }

/* ---------- Catálogo ---------- */
.cat-barra { position: sticky; top: var(--header-h); z-index: 20; background: var(--blanco); border-bottom: 1px solid var(--gris-1); padding: 10px 0; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.cat-barra__n { font-size: 15px; color: var(--gris-3); }
.cat-barra__n b { color: var(--negro); }
.cat-barra .btn { min-height: 42px; font-size: 16px; padding: 0 16px; }
.cat-barra__orden { display: none; }
.cat-activos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.cat-activos .chip { min-height: 34px; font-size: 14px; }
.cat-activos .chip svg { width: 12px; height: 12px; }
.cat-layout { display: grid; gap: 28px; padding: 20px 0 64px; }
.filtros { display: none; }
.filtros h3 { font-size: 20px; letter-spacing: .03em; margin: 22px 0 10px; }
.filtros h3:first-child { margin-top: 0; }
.filtros__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros__lista { max-height: 320px; overflow: auto; display: grid; gap: 2px; padding-right: 6px; }
.filtros__lista label { display: flex; align-items: center; gap: 10px; padding: 7px 4px; cursor: pointer; font-size: 15px; }
.filtros__lista label small { margin-left: auto; color: var(--gris-3); }
.filtros__lista input, .filtros input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--negro); }
.filtros__buscar { width: 100%; height: 40px; border: 1.5px solid var(--gris-2); padding: 0 10px; margin-bottom: 8px; border-radius: var(--radio); }
.select { height: 42px; border: 2px solid var(--negro); background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center/16px no-repeat; padding: 0 36px 0 12px; appearance: none; border-radius: var(--radio); font-weight: 600; font-size: 15px; }
.cat-mas { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; color: var(--gris-3); font-size: 14px; }
.cat-mas__barra { width: 200px; height: 3px; background: var(--gris-1); position: relative; }
.cat-mas__barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--negro); }
.cat-vacio { text-align: center; padding: 60px 0; grid-column: 1 / -1; }
.cat-vacio h2 { font-size: 40px; margin-bottom: 10px; }
.cat-vacio p { color: var(--gris-3); margin-bottom: 20px; }
@media (min-width: 1024px) {
  .cat-layout { grid-template-columns: 250px 1fr; gap: 40px; }
  .filtros { display: block; position: sticky; top: calc(var(--header-h) + 76px); align-self: start; max-height: calc(100vh - var(--header-h) - 96px); overflow: auto; padding-right: 8px; }
  .cat-barra__filtrar { display: none !important; }
  .cat-barra__orden { display: flex; align-items: center; gap: 10px; font-size: 15px; }
}
/* hoja de filtros mobile */
.hoja { position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.hoja.open { visibility: visible; }
.hoja__fondo { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; }
.hoja.open .hoja__fondo { opacity: 1; }
.hoja__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; background: var(--blanco); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .35s var(--ease); border-radius: 14px 14px 0 0; }
.hoja.open .hoja__panel { transform: none; }
.hoja__top { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px var(--gutter); border-bottom: 1px solid var(--gris-1); }
.hoja__top h2 { font-size: 28px; }
.hoja__cuerpo { overflow: auto; padding: 16px var(--gutter) 24px; }
.hoja__cuerpo .filtros { display: block; }
.hoja__pie { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gris-1); }

/* ---------- Ficha de producto ---------- */
.ficha { display: grid; gap: 22px; padding-bottom: 40px; }
.galeria { position: relative; margin: 0 calc(var(--gutter) * -1); }
.galeria__pista { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--papel); }
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__slide { scroll-snap-align: start; aspect-ratio: 1; position: relative; overflow: hidden; border: 0; padding: 0; background: var(--papel); cursor: zoom-in; display: block; width: 100%; }
.galeria__slide img { width: 100%; height: 100%; object-fit: cover; }
.galeria__slide--contain img { object-fit: contain; }
.galeria__puntos { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.galeria__puntos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.25); transition: background .2s, width .2s; }
.galeria__puntos i.on { background: var(--negro); width: 20px; border-radius: 4px; }
.galeria__thumbs { display: none; }
.galeria__zoom-hint { position: absolute; right: 12px; top: 12px; background: rgba(255,255,255,.92); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; pointer-events: none; }
.galeria__zoom-hint svg { width: 18px; height: 18px; }
/* celular con wallpaper */
.telefono { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff, var(--papel) 70%); }
.telefono__cuerpo { height: 84%; aspect-ratio: 1170 / 2532; border-radius: 13% / 6%; background: #111; padding: 2.4%; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), inset 0 0 0 2px #2b2b2b; position: relative; }
.telefono__cuerpo img { width: 100%; height: 100%; object-fit: cover; border-radius: 11% / 5.2%; }
.telefono__cuerpo::before { content: ""; position: absolute; top: 3.6%; left: 50%; width: 30%; height: 3.3%; transform: translateX(-50%); background: #111; border-radius: 20px; z-index: 2; }
.telefono__hora { position: absolute; top: 12%; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--texto); font-weight: 600; font-size: clamp(30px, 9vw, 54px); letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.35); z-index: 2; }
.telefono__tag { position: absolute; bottom: 16px; left: 16px; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .1em; background: var(--negro); color: var(--blanco); padding: 4px 8px; }

.info__artista { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 15px; text-decoration: none; color: var(--gris-3); }
.info__artista:hover { color: var(--negro); text-decoration: underline; }
.info h1 { font-size: clamp(44px, 12.5vw, 76px); line-height: .88; margin: 6px 0 10px; word-break: break-word; }
.info__meta { color: var(--gris-3); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.info__meta a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--negro); }
.info__meta svg { width: 16px; height: 16px; }
.bullets { display: grid; gap: 10px; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--gris-1); border-bottom: 1px solid var(--gris-1); }
.bullets li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.bullets svg { width: 26px; height: 26px; flex: none; }
.bullets b { font-weight: 600; }
.info .precio { gap: 6px 10px; }
.info .precio__final { font-size: 44px; line-height: 1; }
.info .precio__antes { font-size: 19px; }
.precio__nota { font-size: 14px; color: var(--gris-3); margin-top: 4px; }
.precio__nota b { color: var(--negro); }
.version { border: 0; padding: 0; margin: 22px 0 0; }
.version legend { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; margin-bottom: 8px; padding: 0; }
.version legend span { font-family: var(--texto); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--gris-3); }
.version__ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.version__op { position: relative; }
.version__op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.version__op span { display: flex; flex-direction: column; gap: 2px; height: 100%; border: 2px solid var(--gris-2); padding: 12px 12px 10px; border-radius: var(--radio); transition: border-color .15s, box-shadow .15s; }
.version__op b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 20px; line-height: 1; }
.version__op small { color: var(--gris-3); font-size: 14px; line-height: 1.25; }
.version__op em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 17px; margin-top: 4px; }
.version__op input:checked + span { border-color: var(--negro); box-shadow: inset 0 0 0 1px var(--negro); background: var(--naranja-claro); }
.version__op input:focus-visible + span { outline: 3px solid var(--negro); outline-offset: 2px; }
.perso-campo { margin-top: 12px; padding: 14px; background: var(--papel); border-left: 3px solid var(--negro); display: grid; gap: 10px; }
.perso-campo label { font-weight: 600; font-size: 15px; }
.perso-campo__fila { display: flex; gap: 8px; }
.perso-campo input[type="color"] { width: 52px; height: 46px; border: 2px solid var(--negro); padding: 2px; background: var(--blanco); border-radius: var(--radio); flex: none; }
.perso-campo input[type="text"], .campo input, .campo select, .campo textarea { flex: 1; min-width: 0; height: 46px; border: 2px solid var(--negro); padding: 0 12px; border-radius: var(--radio); background: var(--blanco); font-size: 16px; }
.perso-campo__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.perso-campo__swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--blanco); box-shadow: 0 0 0 1.5px var(--gris-2); padding: 0; }
.perso-campo__swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--negro); }
.perso-campo p { font-size: 14px; color: #2a2a28; line-height: 1.4; }
.perso-campo p a { font-weight: 600; }
.comprar { margin-top: 18px; display: grid; gap: 10px; }
.comprar .btn { min-height: 58px; font-size: 21px; }
.comprar__seguro { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; color: var(--gris-3); }
.comprar__seguro span { display: inline-flex; align-items: center; gap: 5px; }
.comprar__seguro svg { width: 15px; height: 15px; }
.barra-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--blanco); border-top: 1px solid var(--gris-1); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; transform: translateY(110%); transition: transform .3s var(--ease); box-shadow: 0 -8px 24px -16px rgba(0,0,0,.4); }
.barra-fija.on { transform: none; }
.barra-fija .precio { flex-direction: column; gap: 0; }
.barra-fija .precio__final { font-size: 24px; line-height: 1; }
.barra-fija .precio__antes { font-size: 13px; }
.barra-fija .btn { min-height: 50px; }
@media (min-width: 1024px) { .barra-fija { display: none; } }

.upsell { margin-top: 26px; border: 2px solid var(--negro); padding: 16px; }
.upsell__top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.upsell h3 { font-size: 24px; line-height: 1; }
.upsell__top p { font-size: 14px; color: var(--gris-3); margin-top: 4px; }
.upsell__lista { display: grid; gap: 10px; margin-top: 14px; }
.upsell__item { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; }
.upsell__item img { width: 60px; height: 60px; object-fit: cover; background: var(--papel); }
.upsell__item a { text-decoration: none; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 18px; line-height: 1.05; display: block; }
.upsell__item a:hover { text-decoration: underline; }
.upsell__item small { color: var(--gris-3); font-size: 13px; }
.upsell__item button { min-height: 40px; padding: 0 12px; border: 2px solid var(--negro); background: var(--blanco); font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radio); }
.upsell__item button svg { width: 14px; height: 14px; }
.upsell__item button.ok { background: var(--negro); color: var(--blanco); }
.upsell__total { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--gris-2); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.upsell__total b { font-family: var(--display); font-weight: 900; font-size: 22px; }
.ficha__acordeon { margin-top: 30px; }
.tabla-tamanos { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 8px; }
.tabla-tamanos th { text-align: left; font-family: var(--display); text-transform: uppercase; font-weight: 800; letter-spacing: .04em; border-bottom: 2px solid var(--negro); padding: 6px 8px 6px 0; }
.tabla-tamanos td { border-bottom: 1px solid var(--gris-1); padding: 8px 8px 8px 0; vertical-align: top; }
.tabla-tamanos td:first-child { font-family: var(--display); font-weight: 900; font-size: 18px; white-space: nowrap; }
.tracklist { list-style: none; padding: 0; columns: 2; column-gap: 24px; font-size: 14px; color: #2a2a28; margin-top: 10px; counter-reset: t; }
.tracklist li { break-inside: avoid; padding: 2px 0; counter-increment: t; }
.tracklist li::before { content: counter(t) ". "; color: var(--gris-3); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .ficha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 12px; }
  .galeria { margin: 0; display: grid; grid-template-columns: 84px 1fr; gap: 14px; position: sticky; top: calc(var(--header-h) + 20px); }
  .galeria__pista { grid-column: 2; }
  .galeria__puntos { display: none; }
  .galeria__thumbs { display: grid; gap: 10px; grid-column: 1; grid-row: 1; align-content: start; }
  .galeria__thumbs button { aspect-ratio: 1; padding: 0; border: 2px solid transparent; background: var(--papel); overflow: hidden; position: relative; }
  .galeria__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
  .galeria__thumbs button[aria-current="true"] { border-color: var(--negro); }
  .galeria__thumbs .thumb-tel { display: grid; place-items: center; }
  .galeria__thumbs .thumb-tel img { width: 42%; height: 84%; border-radius: 5px; box-shadow: 0 0 0 2px #111; }
  .info { padding-top: 8px; }
}
/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 130; background: rgba(10,10,10,.96); display: flex; align-items: center; justify-content: center; }
.lightbox__img { max-width: 100vw; max-height: 100vh; overflow: hidden; cursor: zoom-in; touch-action: pan-x pan-y pinch-zoom; }
.lightbox__img img { max-width: min(100vw, 1200px); max-height: 100vh; width: auto; transition: transform .25s var(--ease); transform-origin: center; }
.lightbox__img.zoom { cursor: zoom-out; }
.lightbox__img.zoom img { transform: scale(2.2); }
.lightbox__cerrar, .lightbox__nav { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--blanco); display: grid; place-items: center; }
.lightbox__cerrar { top: 14px; right: 14px; }
.lightbox__nav { top: 50%; margin-top: -24px; }
.lightbox__nav--ant { left: 14px; }
.lightbox__nav--sig { right: 14px; }
.lightbox svg { width: 22px; height: 22px; }

/* ---------- Artista ---------- */
.artista-cab { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 22px 0 26px; }
.artista-cab__foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--negro); }
.artista-cab h1 { font-size: clamp(44px, 12vw, 120px); line-height: .86; }
.artista-cab p { color: var(--gris-3); margin-top: 6px; font-size: 15px; }
.artista-cab__cta { grid-column: 1 / -1; display: grid; gap: 8px; }
.artista-cab__cta small { color: var(--gris-3); font-size: 14px; }
@media (min-width: 900px) {
  .artista-cab { grid-template-columns: 180px 1fr auto; gap: 36px; padding: 36px 0 44px; }
  .artista-cab__foto { width: 180px; height: 180px; }
  .artista-cab__cta { grid-column: 3; text-align: center; }
}
.cab-genero { position: relative; color: var(--blanco); background: var(--negro); overflow: hidden; isolation: isolate; }
.cab-genero__fotos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); z-index: -1; opacity: .45; }
.cab-genero__fotos img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.cab-genero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.35)); }
.cab-genero .wrap { padding-top: 40px; padding-bottom: 40px; }
.cab-genero h1 { font-size: clamp(56px, 16vw, 150px); line-height: .84; }
.cab-genero p { font-size: 18px; color: #e3e3de; margin-top: 12px; max-width: 46ch; }
.cab-genero .migas { color: #c9c9c4; padding: 0 0 18px; }
@media (min-width: 900px) { .cab-genero__fotos { grid-template-columns: repeat(6, 1fr); } .cab-genero .wrap { padding-top: 64px; padding-bottom: 64px; } }

/* ---------- Páginas de contenido ---------- */
.prosa { max-width: 72ch; font-size: 17px; }
.prosa h2 { font-size: clamp(32px, 8vw, 48px); margin: 40px 0 14px; }
.prosa h3 { font-size: 24px; margin: 26px 0 8px; }
.prosa p + p { margin-top: 12px; }
.prosa ul { margin-top: 10px; }
.prosa .lista-check li { margin-top: 6px; }
.dato { border-left: 4px solid var(--negro); background: var(--papel); padding: 14px 16px; margin: 18px 0; font-size: 17px; }
.dato b { font-weight: 600; }
.tamanos-vis { display: flex; align-items: end; gap: 12px; margin: 18px 0 6px; }
.tamanos-vis div { border: 2px solid var(--negro); display: flex; align-items: end; padding: 6px; font-family: var(--display); font-weight: 900; font-size: 20px; line-height: 1; }
.tamanos-vis div.on { background: var(--negro); color: var(--blanco); }
.tamanos-vis small { display: block; font-family: var(--texto); font-weight: 500; font-size: 12px; }
.pasos-claros { display: grid; gap: 14px; counter-reset: pc; margin: 20px 0; }
.pasos-claros li { counter-increment: pc; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.pasos-claros li::before { content: counter(pc); width: 44px; height: 44px; background: var(--negro); color: var(--blanco); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 24px; }
.pasos-claros b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 21px; line-height: 1.1; margin-bottom: 2px; }
.dos-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 15px; }
.campo small { color: var(--gris-3); font-size: 13px; }
.campo textarea { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .perso-campo input:focus { outline: 3px solid rgba(0,0,0,.2); outline-offset: 0; }
.campo--error input { border-color: var(--error); }
.campo__error { color: var(--error); font-size: 14px; font-weight: 500; }
.opciones-pago { display: grid; gap: 8px; }
.opcion-pago { position: relative; }
.opcion-pago input { position: absolute; opacity: 0; }
.opcion-pago span { display: grid; gap: 2px; border: 2px solid var(--gris-2); padding: 14px; border-radius: var(--radio); cursor: pointer; }
.opcion-pago span b { font-weight: 600; }
.opcion-pago span small { color: var(--gris-3); }
.opcion-pago input:checked + span { border-color: var(--negro); box-shadow: inset 0 0 0 1px var(--negro); }
.opcion-pago input:focus-visible + span { outline: 3px solid var(--negro); outline-offset: 2px; }
.checkout { display: grid; gap: 32px; padding: 24px 0 64px; }
.resumen { background: var(--papel); padding: 18px; align-self: start; }
.resumen h2 { font-size: 28px; margin-bottom: 8px; }
.resumen .item { grid-template-columns: 56px 1fr auto; border-color: var(--gris-2); }
.resumen .item img { width: 56px; height: 56px; }
.cupon { display: flex; gap: 8px; margin: 14px 0; }
.cupon input { flex: 1; min-width: 0; height: 44px; border: 2px solid var(--negro); padding: 0 12px; text-transform: uppercase; border-radius: var(--radio); background: var(--blanco); }
.cupon__msg { font-size: 14px; margin-top: -6px; margin-bottom: 10px; }
.aviso-sim { background: var(--negro); color: var(--blanco); padding: 10px 14px; font-size: 14px; margin-bottom: 18px; }
@media (min-width: 900px) { .checkout { grid-template-columns: 1.3fr 1fr; gap: 56px; } .resumen { position: sticky; top: calc(var(--header-h) + 20px); padding: 26px; } }

/* ---------- Gracias ---------- */
.gracias-top { text-align: center; padding: 40px 0 24px; }
.gracias-top h1 { font-size: clamp(54px, 15vw, 130px); line-height: .84; }
.gracias-top p { font-size: 18px; color: #2a2a28; margin: 14px auto 0; max-width: 46ch; }
.check-grande { width: 72px; height: 72px; border-radius: 50%; background: var(--negro); color: var(--blanco); display: grid; place-items: center; margin: 0 auto 18px; animation: pop .6s var(--ease); }
.check-grande svg { width: 36px; height: 36px; }
.descargas { display: grid; gap: 12px; }
.descarga { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; border: 2px solid var(--negro); padding: 12px; }
.descarga img { width: 72px; height: 72px; object-fit: cover; }
.descarga b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 20px; line-height: 1.05; display: block; }
.descarga small { color: var(--gris-3); font-size: 13px; }
.descarga .btn { grid-column: 1 / -1; min-height: 46px; font-size: 16px; }
@media (min-width: 720px) { .descarga { grid-template-columns: 72px 1fr auto; } .descarga .btn { grid-column: auto; } }
.tutorial { display: grid; gap: 14px; }
.tutorial__paso { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 18px; background: var(--blanco); border: 1px solid var(--gris-1); }
.tutorial__paso i { font-style: normal; font-family: var(--display); font-weight: 900; font-size: 52px; line-height: .8; }
.tutorial__paso h3 { font-size: 22px; margin-bottom: 4px; }
.tutorial__paso p { font-size: 15px; color: #2a2a28; }
@media (min-width: 900px) { .tutorial { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Animación de aparición ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .aparece.visto { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   v2 · componentes nuevos
   ========================================================================== */

/* ---------- Acordeón con emoji ---------- */
.acordeon summary .emoji { font-size: 22px; margin-right: 10px; line-height: 1; filter: saturate(1.1); }
.acordeon summary span:not(.emoji) { flex: 1; }

/* ---------- Visor: celular con el wallpaper (nunca la imagen suelta) ---------- */
.lightbox__tel { height: min(86vh, 760px); aspect-ratio: 1170 / 2532; border-radius: 13% / 6%; background: #111; padding: 2.4%; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), inset 0 0 0 2px #2b2b2b; position: relative; }
.lightbox__tel img { width: 100%; height: 100%; object-fit: cover; border-radius: 11% / 5.2%; pointer-events: none; }
.lightbox__tel::before { content: ""; position: absolute; top: 3.6%; left: 50%; width: 30%; height: 3.3%; transform: translateX(-50%); background: #111; border-radius: 20px; z-index: 2; }
.lightbox__tel span { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); color: #cfcdc8; font-size: 13px; white-space: nowrap; }
.galeria img, .lightbox img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- Testimonios ---------- */
.testimonios { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 4px var(--gutter) 10px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
.testimonios::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .testimonios { grid-auto-columns: calc((100% - 2 * 18px) / 2.4); gap: 18px; } }
@media (min-width: 1100px) { .testimonios { grid-auto-columns: calc((100% - 3 * 20px) / 3.3); gap: 20px; } }
@media (min-width: 1352px) { .testimonios { margin: 0; padding: 4px 0 10px; } }
.testimonio { scroll-snap-align: start; background: var(--blanco); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--gris-1), 0 14px 30px -24px rgba(0,0,0,.5); }
.testimonio__foto { position: relative; aspect-ratio: 1; background: var(--gris-1); overflow: hidden; }
.testimonio__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.testimonio:hover .testimonio__foto img { transform: scale(1.04); }
.testimonio__poster { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.94); color: var(--negro); border-radius: 999px; padding: 5px 10px 5px 5px; display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; text-decoration: none; max-width: calc(100% - 24px); }
.testimonio__poster img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.testimonio__poster span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testimonio__cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.estrellas { color: var(--naranja); letter-spacing: 2px; font-size: 18px; line-height: 1; }
.testimonio__cuerpo p { font-size: 16px; line-height: 1.45; flex: 1; }
.testimonio__autor { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.testimonio__autor b { font-weight: 600; }
.testimonio__autor small { color: var(--ok); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.testimonio__autor small svg { width: 14px; height: 14px; }
.testimonio--ejemplo { outline: 2px dashed var(--naranja); outline-offset: -2px; }
.testimonio--ejemplo .testimonio__cuerpo p { color: var(--gris-3); font-style: italic; }
/* llamado a compartir (mientras no haya reseñas reales) */
.ugc { display: grid; gap: 22px; align-items: center; background: var(--negro); color: var(--blanco); border-radius: 18px; padding: 24px; overflow: hidden; position: relative; }
.ugc h3 { font-size: clamp(34px, 9vw, 58px); line-height: .9; }
.ugc h3 em { font-style: normal; color: var(--naranja); }
.ugc p { color: #d5d3ce; margin: 12px 0 18px; max-width: 44ch; }
.ugc__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ugc__fotos img { aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; width: 100%; }
.ugc__fotos img:nth-child(2) { transform: translateY(14px); }
.ugc__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .ugc { grid-template-columns: 1.1fr 1fr; padding: 44px; gap: 44px; } }

/* ---------- Configurador "Armá tu cuadro" ---------- */
.config { display: grid; gap: 22px; }
@media (min-width: 960px) { .config { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; } .config__vista { position: sticky; top: calc(var(--header-h) + 20px); } }
.config__vista { background: linear-gradient(180deg, #ecebe7, #dedcd6); border-radius: 18px; padding: 36px 20px 30px; display: grid; place-items: center; position: relative; overflow: hidden; }
.config__vista::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(180deg, #c9b79c, #b8a283); }
.config__etiqueta { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--display); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; background: var(--naranja); color: var(--negro); padding: 4px 8px; }
/* Lámina: calcada de los posters reales (A5 1748x2480). Todo en cqw = % del ancho de la lámina. */
.cuadro { position: relative; z-index: 1; width: min(78%, 380px); padding: 3.2%; background: #121212; box-shadow: 0 30px 50px -22px rgba(0,0,0,.65), 0 8px 16px -10px rgba(0,0,0,.4); }
.cuadro__lamina { --fondo: #ffffff; --tinta: #0b0b0b; container-type: inline-size; position: relative; aspect-ratio: 1748 / 2480; background: var(--fondo); color: var(--tinta); overflow: hidden; transition: background .35s, color .35s; }
.cuadro__lamina > * { position: absolute; }
.cuadro__tapa { left: 8.3cqw; top: 6.8cqw; width: 83.4cqw; height: 83.4cqw; object-fit: cover; display: block; background: rgba(0,0,0,.08); }
.cuadro__temas { --filas: 18; --letra: 2cqw; left: 8.3cqw; top: 92.6cqw; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--filas), auto); column-gap: 2.6cqw; justify-content: start; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: var(--letra); line-height: 1.2; letter-spacing: .01em; }
.cuadro__temas li { white-space: nowrap; }
.cuadro [data-codigo] { display: contents; }
.cuadro__codigo { position: absolute; right: 8.3cqw; top: 92.6cqw; width: 35cqw; height: 6.2cqw; }
.cuadro__firma { right: 8.3cqw; bottom: 4.8cqw; width: 46cqw; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cuadro__artista { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 3.7cqw; line-height: 1; margin-bottom: 1.6cqw; }
.cuadro__titulo { --tit: 9.6cqw; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: var(--tit); line-height: .95; overflow-wrap: normal; }
.cuadro__fecha { font-family: var(--display); font-weight: 400; font-size: 2.5cqw; margin-top: 1cqw; }
.config__panel { display: grid; gap: 22px; }
.config__paso h3 { font-size: 22px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.config__paso h3 i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--negro); color: var(--naranja); display: grid; place-items: center; font-size: 17px; flex: none; }
.config__elegido { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; background: var(--papel); border-radius: 10px; }
.config__elegido img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.config__elegido b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 18px; line-height: 1.05; display: block; }
.config__elegido small { color: var(--gris-3); }
.config__colores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.config__colores button { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--blanco); box-shadow: 0 0 0 1.5px var(--gris-2); padding: 0; transition: transform .15s; }
.config__colores button:hover { transform: scale(1.08); }
.config__colores button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--naranja); }
.config__colores label { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px var(--gris-2); cursor: pointer; background: conic-gradient(red, #ff0, lime, cyan, blue, #f0f, red); }
.config__colores label input { position: absolute; inset: -8px; width: 60px; height: 60px; opacity: 0; cursor: pointer; }
.config__sub { font-size: 13px; color: var(--gris-3); margin: 12px 0 8px; font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.config__total { border-top: 2px solid var(--negro); padding-top: 16px; display: grid; gap: 12px; }
.config__total .precio__final { font-size: 40px; }
.config__total ul { font-size: 14px; color: #2a2a28; display: grid; gap: 4px; }
.config .buscador--grande .buscador__campo { border: 2px solid var(--negro); box-shadow: none; height: 54px; }
.config .buscador__lista { z-index: 30; }

/* ---------- Wallpaper de regalo (ficha) ---------- */
.regalo { margin-top: 18px; width: 100%; display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center; text-align: left; padding: 14px 16px; border: 2px solid var(--naranja); border-radius: 14px; background: linear-gradient(120deg, var(--naranja-claro), #fff 70%); position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; }
.regalo:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(255,94,26,.7); }
.regalo::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,94,26,.25), transparent 70%); }
.regalo__tel { width: 74px; aspect-ratio: 1170 / 2532; border-radius: 12px; background: #111; padding: 3px; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); transform: rotate(-6deg); transition: transform .3s var(--ease); }
.regalo:hover .regalo__tel { transform: rotate(0) scale(1.04); }
.regalo__tel img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.regalo__txt { display: grid; gap: 3px; position: relative; z-index: 1; }
.regalo__cinta { justify-self: start; background: var(--naranja); color: var(--negro); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; padding: 2px 8px; border-radius: 4px; }
.regalo b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1; margin-top: 2px; }
.regalo small { font-size: 14px; color: #2a2a28; line-height: 1.35; }
.regalo u { font-size: 14px; font-weight: 700; color: var(--naranja-oscuro); text-underline-offset: 3px; }
.galeria__thumbs .thumb-tel::after { content: "Regalo"; position: absolute; left: 2px; right: 2px; bottom: 2px; background: var(--naranja); color: var(--negro); font-family: var(--display); font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.telefono__tag { background: var(--naranja) !important; color: var(--negro) !important; font-size: 15px !important; }

.card__regalo { font-size: 13px; font-weight: 600; color: var(--naranja-oscuro); margin-top: 2px; }

/* ---------- Pop-up de bienvenida ---------- */
.popup { position: fixed; inset: 0; z-index: 140; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; }
.popup.open { visibility: visible; }
.popup__fondo { position: absolute; inset: 0; background: rgba(10,9,8,.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .4s; }
.popup.open .popup__fondo { opacity: 1; }
.popup__caja { position: relative; width: 100%; max-height: 72vh; overflow: auto; background: var(--negro); color: var(--blanco); border-radius: 20px 20px 0 0; display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .55s cubic-bezier(.2,1.25,.3,1); }
.popup.open .popup__caja { transform: none; }
.popup__x { position: absolute; top: 6px; right: 6px; color: var(--blanco); }
.popup__arte { position: relative; align-self: start; margin-top: 6px; }
.popup__arte img { position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; transform: rotate(-7deg); box-shadow: 0 16px 30px -12px rgba(0,0,0,.8); animation: popupFlota 4s ease-in-out infinite; }
.popup__rayos { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255,94,26,.55) 0 8deg, transparent 8deg 22deg); border-radius: 50%; mask: radial-gradient(circle, #000 30%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%); animation: popupGira 14s linear infinite; }
.popup__cuerpo { min-width: 0; }
.popup__cuerpo .kicker { color: var(--naranja); margin-bottom: 2px; }
.popup__grande { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 54px; line-height: .85; }
.popup__grande span { color: var(--naranja); display: inline-block; font-size: 1.35em; }
.popup.open .popup__grande span { animation: popupPum .9s .35s cubic-bezier(.2,1.6,.4,1) both; }
.popup__txt { color: #d5d3ce; margin: 8px 0 12px; font-size: 15px; }
.popup__form { display: grid; gap: 8px; }
.popup__form input { height: 50px; border: 2px solid #4a4845; background: #1c1b19; color: var(--blanco); border-radius: 10px; padding: 0 14px; font-size: 16px; }
.popup__form input:focus { border-color: var(--naranja); outline: none; }
.popup__form .btn { border-radius: 10px; }
.popup__no { background: none; border: 0; color: #a9a7a2; text-decoration: underline; font-size: 14px; margin-top: 10px; padding: 6px 0; }
.popup__codigo { display: grid; gap: 8px; }
.popup__codigo small { color: #bdbbb6; font-size: 13px; }
.popup__codigo button { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--naranja); color: var(--negro); border: 2px dashed var(--negro); border-radius: 10px; padding: 10px 14px; animation: popupPum .6s cubic-bezier(.2,1.6,.4,1); }
.popup__codigo code { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: .08em; }
.popup__codigo button span { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: .06em; }
@keyframes popupGira { to { transform: rotate(360deg); } }
@keyframes popupFlota { 50% { transform: rotate(-4deg) translateY(-6px); } }
@keyframes popupPum { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (min-width: 720px) {
  .popup { align-items: center; padding: 20px; }
  .popup__caja { width: min(760px, 100%); max-height: none; grid-template-columns: 1fr 1.15fr; gap: 0; padding: 0; border-radius: 22px; transform: translateY(30px) scale(.92); opacity: 0; transition: transform .55s cubic-bezier(.2,1.25,.3,1), opacity .35s; }
  .popup.open .popup__caja { transform: none; opacity: 1; }
  .popup__arte { margin: 0; align-self: stretch; display: grid; place-items: center; background: #171614; overflow: hidden; padding: 40px; }
  .popup__arte img { width: 78%; }
  .popup__rayos { inset: -10%; }
  .popup__cuerpo { padding: 40px 36px 30px; }
  .popup__grande { font-size: 76px; }
  .popup__txt { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .popup__rayos, .popup__arte img { animation: none; } }

/* ---------- "Abrimos muy pronto" (ventas cerradas) ---------- */
.pronto { display: grid; gap: 8px; padding: 14px; border: 2px dashed var(--naranja); border-radius: 12px; background: var(--naranja-claro); position: relative; }
.pronto b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 1; }
.pronto span { font-size: 14px; color: #2a2a28; line-height: 1.4; }
.pronto__fila { display: flex; gap: 8px; }
.pronto__fila input { flex: 1; min-width: 0; height: 48px; border: 2px solid var(--negro); border-radius: var(--radio); padding: 0 12px; font-size: 16px; background: #fff; }
.pronto__fila .btn { min-height: 48px; padding: 0 16px; }
.pronto--ok { border-style: solid; }

/* ---------- Pago por transferencia ---------- */
.pago-transf { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: var(--papel); border-left: 4px solid var(--naranja); }
.pago-transf b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 20px; }
.pago-transf span { font-size: 14px; color: #2a2a28; line-height: 1.4; }
.transf { border: 2px dashed var(--naranja); background: var(--naranja-claro); border-radius: 16px; padding: 18px; display: grid; gap: 12px; max-width: 560px; margin: 0 auto; text-align: left; }
.transf__fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-radius: 10px; }
.transf__fila small { display: block; color: var(--gris-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.transf__fila strong { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.05; word-break: break-all; }
.transf__fila button { flex: none; border: 2px solid var(--negro); background: var(--blanco); border-radius: 8px; padding: 8px 12px; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.transf__fila button.ok { background: var(--negro); color: #fff; }
.transf__estado { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.transf__estado i { width: 12px; height: 12px; border-radius: 50%; background: var(--naranja); flex: none; animation: latido 1.4s infinite; }
@keyframes latido { 50% { opacity: .3; transform: scale(.7); } }

/* ---------- Gracias: pedido a la izquierda, guía a la derecha ---------- */
.gracias-grid { display: grid; gap: 28px; padding: 8px 0 56px; }
.gracias-izq { display: grid; gap: 22px; align-content: start; min-width: 0; }
.gracias-izq .gracias-top { padding: 24px 0 0; }
.gracias-guia { background: var(--papel); border-radius: 16px; padding: 20px; align-self: start; }
.gracias-guia h2 { font-size: 30px; margin: 2px 0 14px; }
.guia-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: g; }
.guia-pasos li { counter-increment: g; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; font-size: 14px; line-height: 1.4; color: #2a2a28; }
.guia-pasos li::before { content: counter(g); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--negro); color: var(--naranja); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 18px; }
.guia-pasos b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 17px; color: var(--negro); }
.guia-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ig-promo { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 14px; border: 2px solid var(--negro); background: #fff; }
.ig-promo .ig { width: 44px; height: 44px; }
.ig-promo b { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 21px; line-height: 1; margin-bottom: 4px; }
.ig-promo span { display: block; font-size: 14px; line-height: 1.45; color: #2a2a28; margin-bottom: 6px; }
@media (min-width: 960px) {
  .gracias-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 40px; padding-top: 24px; }
  .gracias-izq .gracias-top { text-align: left; padding-top: 0; }
  .gracias-izq .gracias-top .check-grande { margin-left: 0; }
  .gracias-izq .gracias-top p { margin-left: 0; }
  .gracias-izq .transf { margin: 0; }
  .gracias-guia { position: sticky; top: calc(var(--header-h) + 16px); }
}