/* Alma — dirección "El cuarto oscuro". Un solo fondo grafito; las prendas son lo único iluminado.
   Una letra (Sentient, serif liviana), una tinta clara, un acento de lino que solo vive en la acción. */
:root {
  --fondo: #2a2a2b;
  --superficie: #333335;
  --tinta: #ecebe7;
  --suave: #b3b1ab;
  --acento: #e3d5bd;
  --acento-tinta: #1d1d1e;
  --letra-titulo: "Sentient", Georgia, serif;
  --letra-texto: "Sentient", Georgia, serif;
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --radio-foto: 0;
  --radio-boton: 0;
  --margen: clamp(20px, 2.4vw, 36px);
  --seccion: clamp(112px, 14vw, 220px);
  --foto-luz: brightness(0.82);
  --ground: var(--fondo); --ink: var(--tinta); --muted: var(--suave); --accent: var(--acento);
  --font-display: var(--letra-titulo); --font-text: var(--letra-texto);
}
body { line-height: 1.55; }
h1, h2, h3 { font-weight: 300; letter-spacing: -0.015em; line-height: 1; }
h2 { font-size: var(--step-head); }
.aviso-demo { background: var(--acento); color: var(--acento-tinta); }

/* ---------- Barra ---------- */
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 32px; min-height: 64px; padding: 0 var(--margen); background: var(--fondo); }
.marca { font: 400 var(--step-body)/1 var(--letra-titulo); letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; margin-right: auto; }
.barra__nav { display: flex; gap: 28px; font-size: var(--step-small); }
.barra__nav a { text-decoration: none; color: var(--suave); }
.barra__nav a:hover { color: var(--tinta); }
.btn-pedido { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--suave); font-weight: 400; }
.contador { background: var(--acento); color: var(--acento-tinta); }
.boton { min-height: 52px; padding: 0 28px; font-weight: 400; font-size: var(--step-small); letter-spacing: 0.04em; }
.boton:hover { background: #ffffff; }

/* ---------- Portada: el mostrador ---------- */
.hero { display: flex; flex-direction: column; align-items: center; min-height: calc(100svh - 64px); padding: clamp(24px, 5svh, 56px) var(--margen) clamp(48px, 9svh, 96px); text-align: center; }
.hero__objeto { position: relative; margin: 0; width: min(30vw, 44svh * 0.8, 520px); aspect-ratio: 4 / 5; }
.hero__objeto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--foto-luz); transition: opacity 1600ms ease; }
.hero__objeto img + img { opacity: 0; }
.hero__objeto img.visible { opacity: 1; }
.hero__marca { width: fit-content; margin: clamp(24px, 4svh, 44px) auto 0; }
.hero__nombre { font-size: clamp(3rem, 7.4vw, 8rem); font-weight: 300; letter-spacing: 0.34em; margin-right: -0.34em; text-transform: uppercase; line-height: 1; }
.hero__frase { margin: 18px 0 0; max-width: 34ch; font-size: var(--step-lead); font-weight: 300; line-height: 1.15; }
.hero__fila { display: flex; align-items: center; justify-content: center; gap: 48px; margin-top: 28px; font-size: var(--step-small); color: var(--suave); }
.hero .estado { justify-content: center; margin-top: 18px; color: var(--suave); }

/* ---------- Escena: capítulos, una prenda por pantalla ---------- */
.capitulos__stage { display: grid; gap: var(--seccion); padding: var(--seccion) 0 0; }
.capitulo { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 506px) 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 24px var(--margen); padding: var(--margen); background: var(--campo, var(--fondo)); min-height: 100svh; align-items: start; }
.capitulo__titulo { grid-column: 1 / -1; grid-row: 1; font-size: var(--step-head); font-weight: 300; }
.capitulo__foto { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; width: auto; aspect-ratio: 3 / 4; height: 100%; max-height: 70svh; max-width: 100%; object-fit: cover; filter: var(--foto-luz); }
.capitulo__frase { grid-column: 1; grid-row: 3; align-self: end; max-width: 32ch; margin: 0; font-size: var(--step-body); }
.capitulo__link { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; color: var(--tinta); text-underline-offset: 6px; font-size: var(--step-body); }
.capitulo__link:hover { color: var(--acento); }
html.js .capitulos.is-live .capitulos__stage { display: block; padding: 0; }
html.js .capitulos.is-live .capitulo { position: absolute; inset: 0; min-height: 0; height: 100svh; padding-top: calc(64px + 12px); }

/* ---------- Lista a un solo tamaño ---------- */
.lista { padding: var(--seccion) var(--margen) 0; }
.lista__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; }
.talla { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.talla legend { float: left; margin-right: 14px; }
.talla label { display: grid; place-items: center; min-width: 52px; min-height: 52px; padding: 0 12px; cursor: pointer; box-shadow: inset 0 0 0 1px #5a5a5c; font-size: var(--step-body); transition: background-color 180ms ease, color 180ms ease; }
.talla input { position: absolute; opacity: 0; pointer-events: none; }
.talla label:has(input:checked) { background: var(--acento); color: var(--acento-tinta); box-shadow: none; }
.talla label:has(input:focus-visible) { outline: 3px solid var(--acento); outline-offset: 3px; }
.talla label:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
.talla__respuesta { margin: 20px 0 40px; font-size: var(--step-body); color: var(--suave); }
.filtros { flex-wrap: wrap; overflow: visible; margin-bottom: 40px; }
.filtro { background: transparent; font-weight: 400; font-size: var(--step-body); color: var(--suave); padding: 0 14px 0 0; }
.filtro[aria-pressed="true"] { background: transparent; color: var(--tinta); text-decoration: underline; text-underline-offset: 8px; }

.lista__filas { display: block; }
.lista__filas .producto, .lista__filas .producto--estrella { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; align-items: center; padding: 18px 0; }
.lista__filas .producto + .producto { margin-top: 6px; }
.lista__filas .foto, .lista__filas .producto--estrella .foto { width: 96px; min-height: 0; aspect-ratio: 3 / 4; flex: none; background: var(--superficie); }
.lista__filas .foto img { filter: var(--foto-luz); }
.lista__filas .cuerpo, .lista__filas .producto--estrella .cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 0; flex: none; }
.lista__filas .producto h3 { grid-column: 1; font-size: var(--step-lead); font-weight: 300; line-height: 1.2; }
.lista__filas .producto p { grid-column: 1; margin: 2px 0 0; font-size: var(--step-small); color: var(--suave); }
.lista__filas .pie-producto { grid-column: 2; grid-row: 1 / span 2; flex-direction: row; align-items: center; gap: 28px; margin: 0; padding: 0; }
.lista__filas .pie-producto strong { font: 300 var(--step-lead)/1 var(--letra-titulo); }
.btn-agregar { min-height: 46px; padding: 0 22px; font-weight: 400; font-size: var(--step-small); }
.btn-agregar:hover { background: #ffffff; }
.cantidad { background: var(--superficie); }
.cantidad button { background: var(--fondo); color: var(--tinta); }
.lista__vista { display: none; margin: 0; }
@media (min-width: 900px) {
  .lista { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .lista > :not(.lista__vista) { grid-column: 1; }
  .lista__vista { display: block; grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 96px; aspect-ratio: 4 / 5; max-height: calc(100svh - 128px); background: var(--superficie); }
  .lista__vista img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-luz); transition: opacity 220ms ease; }
  .lista__vista img.cambia { opacity: 0.2; }
  .lista__filas .producto { cursor: default; transition: opacity 180ms ease; }
  .lista__filas:hover .producto:not(:hover) { opacity: 0.55; }
}

/* ---------- Panel ---------- */
.panel-casa { position: relative; display: grid; gap: 48px; margin: var(--seccion) 20px 0; padding: 56px; overflow: hidden; background: var(--superficie); }
.panel-casa__titulo { max-width: 12ch; font-size: var(--step-head); }
.panel-casa__foto { margin: 0 0 -8vw; width: min(40vw, 620px); aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
.panel-casa__foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-luz); }
.panel-casa__izq { display: flex; flex-direction: column; gap: 56px; }
.panel-casa__der { display: flex; flex-direction: column; gap: 56px; align-self: start; max-width: 340px; }
.bloque h3 { font-size: var(--step-lead); margin-bottom: 12px; }
.bloque p { margin: 0; }
@media (min-width: 900px) { .panel-casa { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 64px; } .panel-casa__der { padding-top: 12px; } }

/* ---------- Cómo separar: diagonal ---------- */
.diagonal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: var(--seccion) var(--margen) 0; }
.diagonal__titulo { grid-column: 7 / 13; grid-row: 1; align-self: start; font-size: var(--step-head); }
.paso { margin: 0; }
.paso img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-luz); }
.paso--1 { grid-column: 1 / 5; grid-row: 1 / 3; aspect-ratio: 3 / 4; }
.paso__texto { margin: 0; max-width: 36ch; font-size: var(--step-body); }
.paso__texto strong { font-weight: 500; }
.paso__texto--1 { grid-column: 5 / 9; grid-row: 2; align-self: start; padding-left: 8px; }
.paso--2 { grid-column: 6 / 9; grid-row: 3; aspect-ratio: 1; margin-top: 220px; }
.paso__texto--2 { grid-column: 9 / 13; grid-row: 3; align-self: start; margin-top: 220px; }
.paso--3 { grid-column: 8 / 13; grid-row: 4; aspect-ratio: 16 / 10; margin-top: 180px; }
.paso__texto--3 { grid-column: 3 / 8; grid-row: 4; align-self: start; justify-self: end; margin-top: 180px; text-align: right; }
.diagonal__titulo { margin-bottom: 0; }

/* ---------- Pie: el nombre sobre la última foto ---------- */
.pie-foto { position: relative; margin-top: var(--seccion); height: 100svh; min-height: 560px; overflow: hidden; color: var(--tinta); }
.pie-foto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62); }
.pie-foto__arriba { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; padding: 32px var(--margen); }
.pie-foto__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 32px; margin: 0; }
.pie-foto__datos dt { font-size: var(--step-small); color: var(--suave); }
.pie-foto__datos dd { margin: 4px 0 0; font-size: var(--step-small); }
.pie-foto__links { display: flex; gap: 24px; margin: 0; font-size: var(--step-body); }
.pie-foto__links a { color: inherit; }
.pie-foto__abajo { position: absolute; left: var(--margen); right: var(--margen); bottom: 40px; }
.pie-foto__marca { margin: 0; font: 300 19vw/0.8 var(--letra-titulo); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.pie-foto__legal { margin: 18px 0 0; font-size: var(--step-small); color: var(--suave); max-width: 90ch; }

/* ---------- Pedido ---------- */
.panel { background: var(--fondo); }
.panel-cabecera { background: var(--superficie); }
.form-pedido input:not([type="radio"]), .form-pedido textarea { border-color: #4a4a4c; border-radius: 0; background: var(--superficie); }
.opcion { border-radius: 0; }
.barra-carrito { background: var(--acento); color: var(--acento-tinta); }
.error { color: #ff8a80; }

/* ---------- Entradas ---------- */
.sube { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 700ms cubic-bezier(0.23, 1, 0.32, 1); }
.sube.a-la-vista { opacity: 1; transform: none; }

/* ---------- Celular ---------- */
@media (max-width: 759px) {
  .barra { min-height: 58px; gap: 16px; }
  .barra__nav { display: none; }
  .hero { min-height: calc(100svh - 58px); padding-top: 9svh; }
  .hero__objeto { width: 70vw; }
  .hero__marca { width: 100%; }
  .hero__nombre { font-size: 11vw; }

  .hero__fila { flex-direction: column; gap: 10px; width: 100%; }
  .hero__fila .boton { width: 100%; order: 1; }
  .hero__fila span:last-child { order: 2; }
  .capitulo { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 16px; padding: 24px 20px 32px; }
  .capitulo__titulo, .capitulo__foto, .capitulo__frase, .capitulo__link { grid-column: 1; grid-row: auto; justify-self: start; }
  .capitulo__titulo { font-size: 8.5vw; }
  .capitulo__foto { height: auto; }
  html.js .capitulos.is-live .capitulo { padding-top: calc(58px + 12px); }
  .capitulo__foto { width: 80%; justify-self: center; max-height: 58svh; }
  .lista__filas .cuerpo { grid-template-columns: 1fr; }
  .lista__filas .pie-producto { grid-column: 1; grid-row: auto; justify-content: space-between; margin-top: 10px; }
  .panel-casa { margin: var(--seccion) 10px 0; padding: 40px 22px; }
  .panel-casa__izq { display: contents; }
  .panel-casa__der { order: 1; max-width: none; }
  .panel-casa__foto { order: 2; width: 86vw; max-width: 100%; margin: 0 auto -22vw; }
  .panel-casa__titulo { font-size: 9.5vw; }
  .diagonal { display: flex; flex-direction: column; gap: 18px; }
  .diagonal__titulo { margin-bottom: 18px; font-size: 9vw; }
  .paso, .paso--2, .paso--3 { margin-top: 0; }
  .paso--1 { width: 100%; }
  .paso--2 { width: 62%; align-self: flex-end; }
  .paso--3 { width: 78%; align-self: flex-start; }
  .paso__texto, .paso__texto--2, .paso__texto--3 { margin: 0 0 40px; text-align: left; align-self: auto; }
  .paso__texto--2 { width: 62%; align-self: flex-end; }
  .pie-foto { height: 88svh; }
  .pie-foto__datos { grid-template-columns: 1fr; gap: 14px; }
  .pie-foto__img { object-position: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__objeto img { transition: none; }
  .sube { opacity: 1; transform: none; transition: none; }
}