/* =========================================================
   Soulgrave — página única (index.html)
   Estructura: hero, intro, tira horizontal (el mundo), productos, banda de
   arte, cómo se juega en cards, qué trae el manual + compra, novedades.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@1&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Germania+One&family=Special+Gothic:wght@400;500;700&display=swap');

:root {
  --bg: #08090a;
  --bg-alt: #121016;
  --bg-footer: #0b0812;
  --white: #ffffff;
  --cell-line: rgba(255, 255, 255, 0.22);
  --cream: #f3eedb;
  --muted: rgba(255, 255, 255, 0.78);
  --faint: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.14);
  --ember: #d9622b;
  --ember-hover: #e8713a;
  --violet: #372659;
  --violet-hover: #47317a;
  --accent: #7c5cc4;
  --font-display: 'Germania One', 'Cinzel', serif;
  --font-hand: 'IM Fell English', Garamond, Georgia, serif;
  --font-serif: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-body: 'Special Gothic', 'Helvetica Neue', Arial, sans-serif;
  --max: 1584px;
  --gutter: 72px;
  /* Margen lateral común: todo el contenido cae en la misma columna de
     var(--max) centrada (o a var(--gutter) del borde si la pantalla es chica).
     El % se resuelve contra el ancho del contenedor de quien lo use. */
  --pad-x: max(var(--gutter), calc((100% - var(--max)) / 2));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Nada puede ensanchar la página más que la pantalla (en mobile haría que se
   pueda arrastrar hacia los costados). clip, a diferencia de hidden, no rompe
   el sticky de las polaroids. */
html,
body {
  overflow-x: clip;
}

/* Scroll suave (Lenis, js/vendor): el navegador no debe sumar su propio
   smooth encima. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Barra de scroll oscura y discreta. */
html {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: #2a2730 #08090a;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #08090a;
}

::-webkit-scrollbar-thumb {
  background: #2a2730;
  border: 2px solid #08090a;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3d3946;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ---------- Botones ---------- */
/* Un solo estilo de botón, el de "Crear personaje" del header: esquinas
   rectas, mayúsculas en Special Gothic. .btn-ember es el primary;
   .btn-ghost, el secundario (contorno fino). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-ember {
  background: var(--ember);
  border-color: var(--ember);
}

.btn-ember:hover {
  background: var(--ember-hover);
  border-color: var(--ember-hover);
}

.btn-ghost {
  background: var(--bg);
  border-color: var(--cell-line);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Barra superior ---------- */
/* Barra compacta flotando arriba a la izquierda: celdas pegadas con borde fino,
   el logo en una celda ember y "Comprar" al final. */

.topbar {
  position: fixed;
  top: 36px;
  left: var(--pad-x);
  z-index: 50;
  display: flex;
  background: var(--bg);
  border: 1px solid var(--cell-line);
}

.topbar-nav {
  display: flex;
}

.topbar-logo,
.topbar-nav a,
.topbar-ig,
.topbar-buy {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  border-left: 1px solid var(--cell-line);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.topbar-nav a:hover,
.topbar-ig:hover { background: rgba(255, 255, 255, 0.08); }

/* Instagram: celda cuadrada solo con el ícono. */
.topbar-ig { padding: 0 14px; }

.topbar-logo {
  padding: 0 12px;
  border-left: 0;
  background: var(--ember);
}

.topbar-logo:hover { background: var(--ember-hover); }

.topbar-buy { color: var(--ember); }

.topbar-buy:hover {
  background: var(--ember);
  color: var(--white);
}

/* "Crear personaje": celda suelta arriba a la derecha, a la altura del header. */
.topbar-cta {
  position: fixed;
  top: 36px;
  right: var(--pad-x);
  z-index: 50;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  background: var(--ember);
  border: 1px solid var(--ember);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.topbar-cta:hover { background: var(--ember-hover); }

.logo {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--white);
  text-decoration: none;
}

.footer .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer .logo img {
  width: 32px;
  height: 32px;
}

/* ---------- Hero ---------- */
/* Escena de fondo a toda la card con la figura al centro, abajo. El título va
   abajo a la izquierda y una columna corta abajo a la derecha. */

.hero {
  padding: 8px;
  height: 80vh;
  height: 80svh;
  min-height: 560px;
  display: flex;
}

.hero-frame {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 40px;
  /* Compensa los 8px de margen del hero para alinear con la columna. */
  padding: 48px max(calc(var(--gutter) - 8px), calc((100% - var(--max)) / 2)) 52px;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
}

/* Escena arriba: ocupa la parte superior de la card y se funde a negro, así
   la parte de abajo (donde va el texto) queda negra. */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 68%;
  /* Recorta la foto mientras se achica en la entrada, así no asoma por debajo
     del fundido a negro. */
  overflow: hidden;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 92%;
}

.hero-bg::after {
  content: "";
  position: absolute;
  /* 2px de más abajo para tapar cualquier borde de redondeo. */
  inset: 0 0 -2px;
  background:
    linear-gradient(180deg, rgba(8, 9, 10, 0) 55%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8, 9, 10, 0.35) 0%, rgba(8, 9, 10, 0) 25%, rgba(8, 9, 10, 0) 75%, rgba(8, 9, 10, 0.35) 100%);
}

.hero-main {
  position: relative;
  z-index: 1;
}

.hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.hero-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

/* El tamaño sale del menor entre el ancho y el alto de la pantalla: en
   pantallas anchas y bajas manda el alto, en las angostas manda el ancho. */
.hero h1 {
  font-size: clamp(48px, min(8.4vw, 14vh), 160px);
  font-size: clamp(48px, min(8.4vw, 14svh), 160px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  max-width: 7.5em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}

/* Entrada al cargar: la escena aparece y después entra el texto. */
@keyframes hero-fade-in {
  from { opacity: 0; }
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-bg { animation: hero-fade-in 1.4s ease-out both; }

/* Ciclo de 12s: la escena se acerca despacio y, al final, un solo parpadeo
   a negro (como una vela que se apaga un instante); en ese negro vuelve a su
   tamaño y la luz regresa enseguida. */
.hero-bg img { animation: hero-candle 12s 0.4s infinite linear; }

@keyframes hero-candle {
  0%        { transform: scale(1);   filter: brightness(1); animation-timing-function: ease-in-out; }
  90%       { transform: scale(1.1); filter: brightness(1); animation-timing-function: ease-in; }
  91.5%     { transform: scale(1.1); filter: brightness(0.03); animation-timing-function: steps(1, end); }
  92%       { transform: scale(1);   filter: brightness(0.03); animation-timing-function: ease-out; }
  94%, 100% { transform: scale(1);   filter: brightness(1); }
}

.hero-main > * {
  animation: hero-fade-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-main > :nth-child(1) { animation-delay: 0.5s; }
.hero-main > :nth-child(2) { animation-delay: 0.65s; }

/* ---------- Intro ---------- */
/* Fondo liso, una etiqueta chica entre llaves y el texto grande, alineado a la
   izquierda, en un solo peso, con un cursor de escritura al final. */

.intro {
  padding: 140px var(--pad-x) 160px;
}

.intro-label {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cream);
}

.intro h2 {
  font-size: clamp(44px, 5vw, 80px);
  line-height: 0.95;
  color: var(--cream);
  margin-bottom: 32px;
}

.intro-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--cream);
}

.intro-caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 4px;
  vertical-align: -0.15em;
  background: var(--cream);
  animation: intro-caret 1.1s steps(1) infinite;
}

@keyframes intro-caret {
  50% { opacity: 0; }
}

/* ---------- Polaroids ---------- */
/* Sección alta: el título queda fijo (sticky) en el centro de la pantalla y
   las polaroids, repartidas a lo alto de la sección, pasan por encima a medida
   que se scrollea. Sin JS: es el scroll normal de la página. */

.polaroids {
  position: relative;
  min-height: 170vh;
}

.polaroids-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 var(--pad-x);
}

.polaroids-stage h2 {
  font-size: clamp(40px, min(6.4vw, 12vh), 124px);
  line-height: 0.9;
  text-align: center;
  text-wrap: balance;
  text-transform: uppercase;
}

.polaroids-stage h2 span { display: block; }

.polaroids-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.polaroid {
  position: absolute;
  width: clamp(200px, 20vw, 330px);
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  transform: rotate(var(--rot, 0deg));
  /* Suaviza el borde girado en Chrome/Safari. */
  backface-visibility: hidden;
}

/* Algunas imágenes traen las esquinas redondeadas en el archivo: se agrandan
   apenas para que el recorte las deje rectas. */
.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transform: scale(1.08);
}

/* Degradé negro desde abajo para que el texto se lea sobre la foto. Se pasa
   2px de cada lado (el figure lo recorta) para que el borde girado no deje
   asomar una línea clara de la imagen. */
.polaroid::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0) 45%, rgba(8, 9, 10, 0.85) 85%, var(--bg) 100%);
}

.polaroid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 16px 14px;
  font-family: var(--font-hand);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.15;
  color: var(--cream);
  text-align: center;
}

/* Posición y giro de cada una, repartidas a lo alto de la sección. */
.pol-1 { left: 8%;   top: 5%;  --rot: -8deg; }
.pol-2 { left: 40%;  top: 2%;  --rot: 9deg; }
.pol-3 { right: 9%;  top: 8%;  --rot: 4deg; }
.pol-4 { left: 12%;  top: 32%; --rot: 5deg; }
.pol-5 { left: 40%;  top: 37%; --rot: -11deg; }
.pol-6 { right: 12%; top: 40%; --rot: -6deg; }
.pol-7 { left: 9%;   top: 62%; --rot: -4deg; }
.pol-8 { left: 42%;  top: 67%; --rot: 8deg; }
.pol-9 { right: 10%; top: 71%; --rot: 6deg; }

/* ---------- Secciones ---------- */

.section {
  padding: 96px var(--pad-x);
}

.section-title {
  font-size: 48px;
  margin-bottom: 40px;
}

/* ---------- Productos ---------- */

.products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.product-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 8px;
}

.product-art .art-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}

.product-art .art-front {
  position: relative;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
  transition: transform 0.4s ease;
}

.product-art:hover .art-bg { transform: scale(1.05); }
.product-art:hover .art-front { transform: scale(1.04); }

.product h2 {
  font-size: 40px;
}

.product p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 8px;
}

/* En la home y en la tienda cada producto va dentro de una card, como las de "El sistema":
   imagen arriba a todo el ancho y el texto con margen interno. */
.products-home .product,
.shop-grid .product {
  gap: 0;
  padding-bottom: 28px;
  background: var(--bg-alt);
  border-radius: 8px;
  overflow: hidden;
}

.products-home .product-art,
.shop-grid .product-art {
  border-radius: 0;
  margin-bottom: 24px;
}

.products-home .product h2,
.shop-grid .product h2,
.products-home .product p,
.shop-grid .product p,
.products-home .product .btn,
.shop-grid .product .btn {
  margin-left: 28px;
  margin-right: 28px;
}

.products-home .product h2,
.shop-grid .product h2 { margin-bottom: 12px; }

.products-home .product p,
.shop-grid .product p { margin-bottom: 24px; }

.products-home .product .btn,
.shop-grid .product .btn { margin-top: auto; }

/* En la home la card del manual ocupa todo el ancho y va en horizontal:
   la portada a la izquierda y el texto a la derecha, centrado en altura. */
.products-home { grid-template-columns: 1fr; }

.products-home .product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  column-gap: 24px;
  padding-bottom: 0;
}

/* Más apaisada que cuadrada para que la card no quede tan alta. */
.products-home .product-art {
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
}

.products-home .product-art .art-front { height: 86%; }

.products-home .product h2,
.products-home .product p,
.products-home .product .btn {
  grid-column: 2;
  margin-right: 48px;
}

.products-home .product h2 { grid-row: 2; }
.products-home .product p { grid-row: 3; max-width: 52ch; }
.products-home .product .btn { grid-row: 5; justify-self: start; margin-top: 0; }

/* Los mismos datos rápidos que en la página del manual. */
.products-home .product .facts {
  grid-column: 2;
  grid-row: 4;
  width: auto;
  margin: 0 48px 24px 28px;
}

.product strong {
  color: var(--white);
}

.product h2 a {
  color: inherit;
  text-decoration: none;
}

.product h2 a:hover { color: var(--ember); }

/* ---------- Preguntas frecuentes (manual.html) ---------- */
/* Lista desplegable con líneas finas entre preguntas; el + gira a × al abrir. */

.faq { padding-top: 0; }

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ember);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
  max-width: 60em;
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.faq details a { color: var(--ember); }

/* ---------- Manual (manual.html) ---------- */

.manual-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 64px;
  padding: 180px var(--pad-x) 120px;
}

.manual-intro-text {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* En una sola línea: el tamaño sale del ancho de la columna (cqw) dividido
   el largo del título en em (~10). */
.manual-intro h1 {
  font-size: min(calc(100cqw / 10.2), 104px);
  line-height: 0.92;
  white-space: nowrap;
}

.manual-intro-text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

.manual-intro-text .manual-dek {
  font-size: 22px;
  line-height: 1.5;
  color: var(--cream);
}

.manual-intro-text .manual-motto {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--white);
}

/* Compra del manual dentro de una card, igual que la del newsletter. */
.buy-card {
  grid-column: 1 / -1;
  padding: 28px 32px 20px;
  background: var(--bg-alt);
  border-radius: 8px;
}

.buy-card .buy-card-title {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--cream);
}

.buy-card-title strong { color: var(--white); }

.manual-buy .input { flex: 1 1 320px; }

/* Nota de pago con el logo de Mercado Pago en su celeste. */
.buy-card .buy-card-note,
.mp-note {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-logo {
  flex: none;
  color: #00b1ea;
}

.buy-card-note strong,
.mp-note strong { color: var(--white); font-weight: 500; }

.buy-card .buy-card-note {
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--faint);
}

/* Datos rápidos: cuatro pares en una fila. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 8px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.facts dd {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--white);
}

/* ---------- Tienda (tienda.html) ---------- */

.shop-head {
  padding: 180px var(--pad-x) 24px;
}

.shop-head h1 {
  font-size: clamp(48px, min(6vw, 10vh), 96px);
  line-height: 0.9;
}

.shop-head p {
  margin: 16px 0 0;
  font-size: 20px;
  color: var(--muted);
}

.shop-section { padding-top: 48px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* Productos que todavía no salen: imagen apagada, cartel y texto atenuado,
   sin botón. */
.product.is-soon .art-bg { filter: grayscale(0.7) brightness(0.55); }

.product.is-soon h2,
.product.is-soon p { opacity: 0.45; }

/* "Próximamente" ocupa el lugar del botón: misma forma, pero apagado y sin
   acción. */
.shop-badge {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: auto 28px 0;
  padding: 0 22px;
  border: 1px solid var(--cell-line);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0.7;
  cursor: default;
}

/* ---------- Newsletter ---------- */
/* Una sola línea: texto, email y botón. */

.newsletter {
  padding: 24px var(--pad-x) 80px;
}

.newsletter-card {
  padding: 32px 36px 24px;
  background: var(--bg-alt);
  border-radius: 8px;
}

.newsletter-social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--faint);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-decoration: none;
  transition: color 0.15s ease;
}

.social-link:hover { color: var(--ember); }

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.newsletter-text {
  flex: 1 1 360px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  color: var(--cream);
}

.newsletter-form .input { flex: 0 1 320px; }

.newsletter-form .form-status { text-align: right; }

/* ---------- Bandas de arte ---------- */

.band {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.band-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 24px;
}

.band h2 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
}

.band-short {
  min-height: 380px;
}

.band-short h2 {
  font-size: clamp(34px, 4.5vw, 52px);
}

.band-short .btn {
  margin-top: 12px;
}

/* ---------- Cómo se juega: cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--bg-alt);
  border-radius: 8px;
  overflow: hidden;
}

.card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-img-contain {
  object-fit: contain;
  padding: 16px;
}

.card h3 {
  font-size: 28px;
  line-height: 1.1;
  margin: 24px 24px 12px;
}

.card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 24px 24px;
}

.card strong { color: var(--white); }

.card .btn {
  margin: auto 24px 24px;
}

/* ---------- Qué trae + compra ---------- */

.buy {
  border-top: 1px solid var(--line);
}

.buy-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 64px;
  align-items: center;
}

.buy-art {
  background: var(--bg-alt);
  border-radius: 6px;
  padding: 40px;
}

.buy-art img {
  width: 100%;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

.buy-list {
  margin: 0 0 24px;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.9;
  color: var(--muted);
}

.price {
  font-family: var(--font-display);
  font-size: 56px;
  margin: 0 0 20px;
}

.price span {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--faint);
  letter-spacing: 0.04em;
}

.buy-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.input {
  flex: 1 1 260px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--cell-line);
  border-radius: 0;
  min-height: 48px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder { color: var(--faint); }

.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 92, 196, 0.25);
}

.input:disabled { opacity: 0.6; }

.form-status {
  flex-basis: 100%;
  min-height: 1em;
  margin: 0;
  font-size: 14px;
}

.form-status.error { color: #f87171; }

.fine-print {
  font-size: 14px;
  color: var(--faint);
  margin: 12px 0 0;
}

/* ---------- Aviso de compra ---------- */

.purchase-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  width: min(640px, calc(100% - 32px));
  transform: translateX(-50%);
}

.purchase-notice[hidden] { display: none; }

.purchase-notice-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: #15121b;
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.purchase-notice p {
  flex: 1;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

.purchase-notice p[hidden] { display: none; }

.purchase-notice strong { color: var(--white); }

.purchase-notice-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 64px;
  padding: 36px var(--pad-x) 40px;
  background: var(--bg-footer);
  border-top: 1px solid var(--line);
}

.footer-brand {
  flex: 1 1 260px;
}

.footer-brand p {
  color: var(--faint);
  font-size: 15px;
  margin: 6px 0 0;
}

/* Los links van en una fila para que el footer quede bajo. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.footer-links a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ---------- Apariciones al scrollear ---------- */
/* js/index.js marca con .reveal los elementos desde el tercer módulo y les
   suma .is-visible cuando entran en pantalla. Sin JS se ven normalmente. */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s ease var(--reveal-delay, 0s),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Transición entre páginas ---------- */
/* View Transitions entre documentos (Chrome/Edge/Safari recientes): la página
   que se va se desvanece hacia arriba y la nueva entra desde abajo. El header
   y "Crear personaje" quedan fijos. En navegadores sin soporte, se ignora. */

@view-transition {
  navigation: auto;
}

.topbar { view-transition-name: topbar; }
.topbar-cta { view-transition-name: topbar-cta; }

::view-transition-old(root) {
  animation: page-out 0.35s ease both;
}

::view-transition-new(root) {
  animation: page-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-16px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(24px); }
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  :root { --gutter: 40px; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-intro { grid-template-columns: 1fr; padding-top: 140px; }
  .manual-cover { order: -1; max-width: 520px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }

  .topbar { top: 20px; }
  .topbar-cta { top: 20px; height: 44px; padding: 0 16px; }
  .topbar-nav,
  .topbar-ig { display: none; }
  .topbar-logo,
  .topbar-buy { height: 42px; }
  .logo { font-size: 26px; }
  .footer .logo img { width: 26px; height: 26px; }

  /* En mobile la card va de borde a borde para que el texto caiga en la misma columna. */
  .hero { padding: 0; height: auto; min-height: 0; }
  .hero-frame {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
    padding: 340px var(--gutter) 28px;
    border-radius: 0;
  }
  .hero-main { gap: 16px; }
  .hero-bg { height: 380px; }
  .hero-bg img { object-position: 62% 85%; }


  .intro { padding-top: 88px; padding-bottom: 96px; }

  .polaroids { min-height: 150vh; }
  .polaroid { width: 46vw; }
  .polaroid figcaption { font-size: 20px; padding: 0 8px 8px; }

  .section { padding-top: 64px; padding-bottom: 64px; }
  .section-title { font-size: 36px; margin-bottom: 28px; }

  .products { grid-template-columns: 1fr; gap: 56px; }
  .shop-head { padding-top: 120px; }
  .manual-intro { padding-top: 96px; gap: 32px; }
  .buy-card { padding: 22px 20px 16px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .shop-grid { grid-template-columns: 1fr; gap: 56px; }
  .product h2 { font-size: 34px; }
  /* Estira el botón dentro de los márgenes de la card (width: 100% sumaba
     los 28px de margen y lo sacaba por la derecha). */
  .product .btn { align-self: stretch; }

  /* En celular la card del manual vuelve a apilarse: portada arriba, texto abajo. */
  .products-home .product {
    display: flex;
    padding-bottom: 28px;
  }
  .products-home .product-art { aspect-ratio: 1 / 1; margin-bottom: 24px; }
  .products-home .product-art .art-front { height: 78%; }
  .products-home .product h2,
  .products-home .product p,
  .products-home .product .btn { margin-right: 28px; }
  .products-home .product .facts { align-self: stretch; margin-right: 28px; }

  .band { min-height: 340px; }


  .buy-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cards { grid-template-columns: 1fr; gap: 16px; }
  .newsletter-card { padding: 24px 20px 20px; }
  .newsletter-form .input { flex: 1 1 100%; }
  .newsletter-form .btn { width: 100%; }
  .newsletter-form .form-status { text-align: left; }

  .buy-form .btn { width: 100%; }
  .price { font-size: 44px; }

  /* Footer compacto: menos aire y los links en dos columnas. */
  .footer { gap: 20px; padding-top: 32px; padding-bottom: 36px; }
  .footer-brand { flex-basis: 100%; }
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .intro-caret,
  .hero-bg,
  .hero-bg img,
  .hero-main > * {
    animation: none;
  }

}