/* ===================== Culto — estilos ===================== */
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
:root {
  /* Paleta de marca (Adrian): 70% hueso, 20% negro, 10% vino */
  --bg: #F1EEE7;        /* hueso: fondo principal */
  --surface: #FFFFFF;   /* blanco: tarjetas de producto */
  --surface-2: #E6E1D8;
  --piedra: #B5ADA2;    /* fondos secundarios */
  --ink: #111110;
  --muted: #57514b;
  --vino: #852D3A;      /* detalles, precios destacados y hover */
  --vino-2: #852D3A;
  --perla: #F1EEE7;
  --negro: #131212;
  --melange: #9a9892;

  --f-texto: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-firma: "Pinyon Script", "Snell Roundhand", cursive;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-hero: clamp(2.75rem, 1.4rem + 4.6vw, 6rem);

  --margen: clamp(20px, 3vw, 40px);
  --gap-sec: clamp(96px, 12vw, 200px);
  --radio: 0px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-texto); font-size: var(--step-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 0.95; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figcaption, li { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--vino); color: var(--perla); }
:focus-visible { outline: 3px solid var(--vino-2); outline-offset: 3px; }
[hidden] { display: none !important; }

.saltar { position: fixed; left: var(--margen); top: 12px; z-index: 100; background: var(--ink); color: var(--perla); padding: 10px 16px; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.saltar:focus { clip-path: none; width: auto; height: auto; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--radio);
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.boton:active { transform: scale(0.97); }
.boton-claro { background: var(--surface); color: var(--ink); }
.boton-vino { background: var(--ink); color: var(--perla); }
@media (hover: hover) and (pointer: fine) {
  .boton-claro:hover { background: var(--surface-2); }
  .boton-vino:hover { background: var(--vino); }
}
.boton-ancho { width: 100%; }
.boton[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Barra ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 32px;
  padding: 14px var(--margen); color: var(--ink); background: var(--piedra);
  transition: background-color 240ms ease, color 240ms ease;
}
.barra.sobre-claro { background: var(--bg); color: var(--ink); }
.marca { display: block; color: inherit; line-height: 0; }
.marca-svg { display: block; height: 22px; width: auto; }
.barra-links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 500; }
.barra-links a { text-decoration: none; padding: 8px 0; }
@media (hover: hover) { .barra-links a:hover { text-decoration: underline; } }
.bolsa-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  background: var(--ink); color: var(--perla); border: 0; border-radius: var(--radio);
  font-weight: 600; font-size: 15px; cursor: pointer; transition: transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .bolsa-btn:hover { background: var(--vino); } }
.bolsa-btn:active { transform: scale(0.96); }
.bolsa-num { min-width: 1.6em; padding: 1px 6px; text-align: center; background: var(--perla); color: var(--ink); }
.bolsa-btn.late { animation: late 420ms var(--ease-out); }
@keyframes late { 30% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; min-height: 100svh; align-content: end;
  background: var(--piedra); color: var(--ink);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px;
  padding: 0 var(--margen) clamp(32px, 5vw, 64px);
}
.hero-firma {
  position: absolute; left: 50%; top: 40%; translate: -50% -50%;
  width: 118vw; max-width: none; pointer-events: none; user-select: none;
}
.hero-prendas { position: absolute; inset: 0; pointer-events: none; }
.hero-prendas img { position: absolute; width: auto; will-change: transform; }
.hero-perla { width: min(44vw, 900px) !important; right: 18vw; top: 9svh; rotate: -4deg; }
.hero-negro { width: min(44vw, 900px) !important; right: -10vw; top: 36svh; rotate: 6deg; }
.hero-texto {
  position: relative; z-index: 2; grid-column: 1 / span 6; align-self: end;
  display: grid; gap: 28px; justify-items: start; padding-top: 40svh;
}
.hero h1 { font-size: var(--step-hero); }
@media (max-width: 1100px) { .hero-texto { grid-column: 1 / span 10; } }
.hero-sub { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.hero-sub strong { font-weight: 600; }

@media (max-width: 760px) {
  .hero { min-height: 100svh; padding-top: 0; }
  .hero-firma { top: 30%; width: 170vw; }
  .hero-perla { width: 100vw !important; right: auto; left: -22vw; top: 15svh; }
  .hero-negro { width: 86vw !important; right: -26vw; top: 32svh; }
  .hero-texto { grid-column: 1 / -1; padding-top: 0; gap: 20px; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .hero-sub { font-size: 1.125rem; }
  .barra-links { display: none; }
  .bolsa-btn { margin-left: auto; }
}

/* ---------- Secciones (marco común) ---------- */
main > section:not(.hero) { padding: var(--gap-sec) var(--margen) 0; }
h2 { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.3; }

/* ---------- Arma tu conjunto ---------- */
.conjunto { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: start; }
/* El set entero siempre entra en pantalla: las fotos se ajustan por alto */
.conjunto-escena {
  grid-column: 1 / span 7; background: var(--surface); position: sticky; top: 96px;
  height: min(calc(100svh - 120px), 880px); min-height: 460px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1%;
  padding: clamp(20px, 3vw, 40px); overflow: hidden;
}
.conjunto-escena figure { margin: 0; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 0; }
.escena-top { height: 53%; }
.escena-bottom { height: 45%; }
.conjunto-escena figure img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.conjunto-escena img { transition: opacity 160ms ease, transform 220ms var(--ease-out); }
.conjunto-escena img.cambiando, .piezas-foto img.cambiando { opacity: 0; transform: translateY(8px) scale(0.98); }
.melange {
  width: min(62%, 380px); aspect-ratio: 398 / 364; display: grid; place-content: center; text-align: center; gap: 6px;
  background-color: var(--melange); color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.melange span { font-weight: 600; font-size: 1.25rem; }
.melange small { font-size: 15px; }
.conjunto-panel { grid-column: 9 / span 4; display: grid; gap: 32px; padding-top: 8px; }
.opcion { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; }
.opcion legend { font-weight: 600; font-size: 1.25rem; margin-bottom: 14px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span, .chip-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  background: var(--surface); color: var(--ink); border: 0; border-radius: var(--radio);
  font-weight: 500; font-size: 1rem; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.tallas .chip span, .tallas .chip-btn { min-width: 56px; justify-content: center; }
.chip input:checked + span { background: var(--ink); color: var(--perla); }
.chip input:focus-visible + span { outline: 3px solid var(--vino-2); outline-offset: 2px; }
.chip input:disabled + span, .chip-btn:disabled { color: var(--muted); text-decoration: line-through; cursor: not-allowed; }
.chip:active span, .chip-btn:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .chip input:not(:checked):not(:disabled):hover + span, .chip-btn:not(:disabled):hover { background: var(--surface-2); }
}
.punto { width: 22px; height: 22px; border-radius: 50%; border: 6px solid var(--c); background: var(--l, var(--c)); flex: none; }
.chip input:checked + span .punto { outline: 2px solid var(--perla); }
.punto-melange { --c: var(--melange); }
.precio { display: grid; gap: 6px; }
.precio-total { color: var(--vino); font-size: var(--step-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.precio-nota, .nota-tallas { color: var(--muted); font-size: 1rem; }
.nota-tallas a { color: var(--ink); }

@media (max-width: 900px) {
  /* En celular la foto del set queda fija arriba mientras eliges colores y tallas */
  .conjunto-escena { grid-column: 1 / -1; position: sticky; top: 72px; z-index: 3; height: 40svh; min-height: 260px; aspect-ratio: auto; padding: 14px; }
  .conjunto-panel { grid-column: 1 / -1; padding-top: 40px; }
}

/* ---------- Piezas ---------- */
.piezas { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: start; }
.piezas-foto {
  grid-column: 1 / span 5; position: sticky; top: 12vh; aspect-ratio: 4 / 5;
  display: grid; place-items: center; background: var(--surface); overflow: hidden;
}
.piezas-foto img { width: 128%; max-width: none; transition: opacity 150ms ease, transform 220ms var(--ease-out); }
.melange-grande { width: 80%; }
.piezas-lista { grid-column: 7 / span 6; display: grid; gap: 48px; }
.piezas-lista ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pieza-cab {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  min-height: 72px; padding: 16px 0; background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--muted); transition: color 200ms ease;
}
.pieza.activa .pieza-cab { color: var(--ink); }
.pieza-nombre { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.pieza-precio { font-size: 1.125rem; white-space: nowrap; }
.pieza-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-out); }
.pieza-cuerpo > div { overflow: hidden; min-height: 0; }
.pieza.activa .pieza-cuerpo { grid-template-rows: 1fr; }
.pieza-cuerpo { gap: 0; }
.pieza-cuerpo p { max-width: 40ch; color: var(--ink); }
.pieza.activa .pieza-cuerpo .chips { padding: 18px 0 24px; }
.pieza:not(.activa) .pieza-cuerpo { visibility: hidden; }
.pieza.activa .pieza-cuerpo { visibility: visible; }
.pieza-cuerpo .chips { min-height: 0; }
@media (max-width: 900px) {
  /* En celular la foto va dentro de cada prenda, así se ve al tocarla */
  .piezas-foto { display: none; }
  .piezas-lista { grid-column: 1 / -1; gap: 24px; }
}

/* ---------- Detalles ---------- */
.detalles h2 { max-width: 14ch; margin-bottom: 56px; }
.detalles-fila { display: grid; grid-template-columns: 3fr 3.4fr 3fr 4.4fr; gap: 16px; align-items: end; }
.detalles figure { margin: 0; display: grid; gap: 14px; }
.detalles img { width: 100%; object-fit: cover; background: var(--surface); }
.d1 img { aspect-ratio: 562 / 1125; }
.d2 img { aspect-ratio: 582 / 692; }
.d3 img { aspect-ratio: 563 / 1126; }
.d4 img { aspect-ratio: 1739 / 515; }
.detalles figcaption { font-size: 1rem; color: var(--ink); max-width: 30ch; }
@media (max-width: 760px) {
  .detalles-fila { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .d4 { grid-column: 1 / -1; }
}

/* ---------- Pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 10px; position: relative; }
.pasos h2 { grid-column: 1 / span 7; grid-row: 1; align-self: start; z-index: 1; }
.pasos-fila { grid-column: 1 / -1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 3fr 4fr 5fr; gap: 10px; align-items: end; }
.paso { display: grid; gap: 12px; align-content: end; }
.paso-tile { display: grid; place-items: center; overflow: hidden; }
.p1 .paso-tile { height: 30vh; min-height: 220px; background: var(--surface); }
.p2 .paso-tile { height: 44vh; min-height: 300px; background: var(--ink); color: var(--perla); }
.p3 .paso-tile { height: 60vh; min-height: 380px; background: var(--ink); }
.p1 .paso-tile img { width: 62%; mix-blend-mode: multiply; }
.p3 .paso-tile img { width: 100%; height: 100%; object-fit: cover; }
.paso-dato { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; text-align: center; }
.paso-dato span { }
.paso h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 10px; }
.paso p { max-width: 44ch; }
@media (min-width: 901px) { .pasos-fila { padding-top: 0; } .pasos h2 { padding-top: 0; } .pasos-fila { margin-top: 0; } }
@media (min-width: 901px) { .pasos .p1, .pasos .p2 { padding-top: 0; } }
@media (max-width: 900px) {
  .pasos h2 { grid-column: 1 / -1; margin-bottom: 32px; }
  .pasos-fila { grid-row: 2; grid-template-columns: 1fr; gap: 40px; }
  .p1 .paso-tile { height: 52vw; min-height: 0; }
  .p2 .paso-tile { height: 62vw; min-height: 0; }
  .p3 .paso-tile { height: 80vw; min-height: 0; }
}

/* ---------- Tallas ---------- */
.tallas-sec { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; }
.tallas-intro { grid-column: 1 / span 4; display: grid; gap: 24px; align-content: start; }
.tallas-intro p { max-width: 34ch; }
.tablas { grid-column: 6 / span 7; display: grid; gap: 48px; }
.tablas table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tablas caption { text-align: left; font-weight: 600; font-size: 1.375rem; padding-bottom: 12px; }
.tablas th, .tablas td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--surface-2); }
.tablas thead th { font-weight: 500; color: var(--muted); font-size: 1rem; }
.tablas tbody th { font-weight: 700; }
@media (max-width: 900px) {
  .tallas-intro, .tablas { grid-column: 1 / -1; }
  .tablas { margin-top: 40px; overflow-x: auto; }
  .tablas th, .tablas td { font-size: 15px; padding-right: 8px; }
}

/* ---------- Preguntas ---------- */
.preguntas {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px;
  margin-top: var(--gap-sec); padding-bottom: 80px !important; background: var(--piedra);
}
.preguntas-texto { grid-column: 1 / span 5; display: grid; gap: 32px; align-content: start; justify-items: start; }
.hechos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 1.125rem; font-weight: 500; }
.acordeon { display: grid; gap: 4px; width: 100%; }
.acordeon details { padding: 12px 0; }
.acordeon summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px; font-size: 1.25rem; font-weight: 500;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -3px; transition: rotate 200ms var(--ease-out);
}
.acordeon details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.acordeon details p { padding-top: 10px; max-width: 52ch; }
.acordeon details p a { color: var(--ink); }
.preguntas-fotos { grid-column: 7 / span 6; position: relative; margin-top: calc(var(--gap-sec) * -1 - 40px); }
.pf-alta { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink); }
.pf-chica { position: absolute; left: -40px; bottom: -40px; width: 36%; aspect-ratio: 1; object-fit: contain; background: var(--bg); padding: 16px; }
@media (max-width: 900px) {
  .preguntas-fotos { grid-column: 1 / -1; grid-row: 1; margin: 0 0 80px; }
  .pf-alta { aspect-ratio: 4 / 5; }
  .pf-chica { left: auto; right: -8px; bottom: -40px; width: 40%; }
  .preguntas-texto { grid-column: 1 / -1; }
  .preguntas-texto .boton { width: 100%; }
}

/* ---------- Pie ---------- */
.pie { background: var(--ink); color: var(--perla); padding: 40px var(--margen) 24px; overflow: hidden; }
.pie-arriba { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.pie nav, .pie-contacto { display: grid; gap: 10px; font-size: 1rem; }
.pie-contacto { text-align: right; justify-items: end; }
.pie a { text-decoration: none; }
@media (hover: hover) { .pie a:hover { text-decoration: underline; } }
.pie .libro { font-weight: 600; }
.pie-marca { margin: 72px 0 8px; color: var(--perla); }
.pie-logo { display: block; width: 100%; height: auto; }
.pie-marca-chica { max-width: 420px; margin-top: 48px; }
.pie-legal { font-size: var(--step-small); padding-top: 12px; }
@media (max-width: 760px) {
  .pie-contacto { text-align: left; justify-items: start; }
  .pie-marca { margin-top: 48px; }
}

/* ---------- Bolsa (cajón) ---------- */
.bolsa {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100vw); max-width: 100vw;
  border: 0; padding: 0; background: var(--bg); color: var(--ink);
  transition: transform 340ms var(--ease-drawer);
}
.bolsa[open] { display: flex; flex-direction: column; }
.bolsa::backdrop { background: rgb(19 18 18 / 0.5); }
@starting-style { .bolsa[open] { transform: translateX(100%); } }
.bolsa.saliendo { transform: translateX(100%); transition-duration: 200ms; }
.bolsa-cab { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: var(--surface); }
.bolsa-cab h2 { font-size: 1.75rem; }
.cerrar, .volver { background: none; border: 0; cursor: pointer; font-weight: 500; min-height: 44px; padding: 0 4px; text-decoration: underline; text-underline-offset: 0.2em; }
.volver { justify-self: start; }
.bolsa-paso { padding: 24px; display: grid; gap: 20px; align-content: start; overflow-y: auto; flex: 1; }
.bolsa-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bolsa-items li { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; }
.bolsa-items img, .mini-melange { width: 72px; aspect-ratio: 1; object-fit: contain; background: var(--surface); }
.mini-melange { display: block; background: var(--melange); }
.bi-nombre { font-weight: 600; }
.bi-meta { color: var(--muted); font-size: 15px; }
.cant { display: flex; align-items: center; background: var(--surface-2); }
.cant button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 1.125rem; transition: transform 120ms var(--ease-out); }
.cant button:active { transform: scale(0.9); }
.cant span { min-width: 22px; text-align: center; }
.bolsa-totales { display: grid; gap: 8px; padding-top: 8px; }
.bolsa-totales p { display: flex; justify-content: space-between; }
.bolsa-totales .ahorro { color: var(--vino-2); font-weight: 500; }
.bolsa-totales .total { font-size: 1.375rem; font-weight: 700; }
.bolsa-totales .total span:last-child { color: var(--vino); }
.pequeno { font-size: 15px !important; color: var(--muted); justify-content: flex-start !important; }
.checkout label { display: grid; gap: 6px; font-weight: 500; font-size: 1rem; }
.checkout input:not([type=radio]):not([type=checkbox]) {
  min-height: 50px; padding: 0 14px; border: 1px solid #b9b1a4; border-radius: var(--radio); background: #fff; font-size: 1rem;
}
.checkout input:focus-visible { outline: 3px solid var(--vino-2); outline-offset: 0; }
.checkout fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.checkout legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.checkout .radio { display: flex !important; align-items: center; gap: 10px; font-weight: 400; min-height: 40px; }
.checkout .radio input { width: 20px; height: 20px; accent-color: var(--vino); flex: none; }
.acepto { font-size: 15px !important; }
.error { color: #9b1020; font-weight: 500; min-height: 1.5em; }
.error:empty { display: none; }
.listo h3 { font-size: 1.75rem; }
.yape-num { display: flex; align-items: center; gap: 14px; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.copiar { min-height: 40px; padding: 0 14px; background: var(--ink); color: var(--perla); border: 0; font-size: 15px; font-weight: 600; cursor: pointer; }
.copiar:active { transform: scale(0.96); }

/* ---------- Aviso ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; translate: -50% 0;
  background: var(--ink); color: var(--perla); padding: 14px 22px; font-weight: 500;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 200ms ease, transform 300ms var(--ease-out);
  max-width: calc(100vw - 32px);
}
.aviso.visible { opacity: 1; transform: none; }

/* ---------- Movimiento de entrada ---------- */
.anima main section:not(.hero) :is(h2, .lead, .opcion, .precio, .pieza, figure, .paso, table, .hechos, details, .tallas-intro p, .pf-alta, .pf-chica, .conjunto-escena) {
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}
.anima main section.dentro :is(h2, .lead, .opcion, .precio, .pieza, figure, .paso, table, .hechos, details, .tallas-intro p, .pf-alta, .pf-chica, .conjunto-escena) { opacity: 1; transform: none; }
.anima section.dentro :nth-child(2) { transition-delay: 70ms; }
.anima section.dentro :nth-child(3) { transition-delay: 140ms; }
.anima section.dentro :nth-child(4) { transition-delay: 210ms; }
.anima section.dentro :nth-child(5) { transition-delay: 280ms; }

/* Hero: entrada y una deriva lenta de las prendas */
@media (prefers-reduced-motion: no-preference) {
  .hero-perla { animation: entraPerla 1100ms var(--ease-out) both, derivaPerla 9s ease-in-out 1100ms infinite alternate; }
  .hero-negro { animation: entraNegro 1100ms var(--ease-out) 120ms both, derivaNegro 11s ease-in-out 1200ms infinite alternate; }
  .hero-texto > * { animation: sube 800ms var(--ease-out) both; }
  .hero-texto > :nth-child(2) { animation-delay: 90ms; }
  .hero-texto > :nth-child(3) { animation-delay: 180ms; }
  .hero-firma { animation: firma 1400ms var(--ease-out) both; }
}
@keyframes entraPerla { from { opacity: 0; transform: translate(-6vw, 4vh) rotate(-3deg); } }
@keyframes entraNegro { from { opacity: 0; transform: translate(8vw, 6vh) rotate(4deg); } }
@keyframes derivaPerla { to { transform: translate(0, -1.6vh) rotate(-0.8deg); } }
@keyframes derivaNegro { to { transform: translate(-1vw, 1.2vh) rotate(0.8deg); } }
@keyframes sube { from { opacity: 0; transform: translateY(24px); } }
@keyframes firma { from { opacity: 0; transform: scale(0.94); } }

/* ---------- Páginas interiores ---------- */
.interior { padding: 120px var(--margen) 120px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; }
.interior > * { grid-column: 1 / span 8; }
.interior h1 { font-size: var(--step-head); margin-bottom: 32px; }
.interior h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); margin: 72px 0 18px; line-height: 1.05; }
.interior p, .interior li { max-width: 68ch; }
.interior p + p { margin-top: 14px; }
.interior ul { padding-left: 1.2em; display: grid; gap: 8px; }
.interior .barra-fija { background: var(--bg); color: var(--ink); }
@media (max-width: 900px) { .interior > * { grid-column: 1 / -1; } }

/* ---------- Libro de Reclamaciones y páginas internas ---------- */
.proveedor { background: var(--surface); padding: 20px 24px; margin-top: 32px; display: grid; gap: 4px; }
.reclamo { display: grid; gap: 18px; margin-top: 16px; }
.reclamo h2 { margin: 48px 0 0; }
.reclamo textarea { padding: 12px 14px; border: 1px solid #b9b1a4; border-radius: 0; background: #fff; font: inherit; font-size: 1rem; resize: vertical; }
.reclamo .boton { justify-self: start; }
.hoja { margin-top: 40px; display: grid; gap: 20px; }
.hoja-txt { white-space: pre-wrap; background: #fff; padding: 24px; font-size: 1rem; line-height: 1.55; }
.hoja-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.interior .boton-claro { background: var(--surface); color: var(--ink); }
.interior + .pie .pie-arriba { padding-bottom: 16px; }
@media print {
  .barra, .pie, .hoja-acciones, .reclamo, .interior > p.pequeno { display: none !important; }
  .interior { padding: 0; }
  .hoja-txt { padding: 0; }
}
.punto-perla { --c: #efe9df; --l: #852D3A; }
.punto-negro { --c: #151414; --l: #efe7da; }
.punto-jort { --c: #151414; }
.piezas-foto img.es-jort { width: 84%; }

.pieza-accion { display: grid; gap: 10px; justify-items: start; padding-bottom: 28px; }
.pieza.activa .pieza-cuerpo .chips { padding: 18px 0 16px; }
.pieza-accion .boton[disabled] { cursor: not-allowed; opacity: 0.45; }
.pieza-accion .boton.ok { background: var(--vino); opacity: 1; cursor: default; }
.pieza-en-bolsa { font-size: 15px; color: var(--muted); min-height: 1.4em; }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; font: inherit; }
.conjunto-panel .boton.ok { background: var(--vino); }

.checkout select {
  min-height: 50px; padding: 0 40px 0 14px; border: 1px solid #b9b1a4; border-radius: var(--radio); background: #fff; font-size: 1rem;
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111110' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.checkout select:focus-visible { outline: 3px solid var(--vino); outline-offset: 0; }
.ubicacion { gap: 14px !important; }
.campos-envio { display: grid; gap: 20px; }
.campos-envio[hidden] { display: none; }
.envio-tipo { font-size: 15px; color: var(--muted); }
.envio-tipo:empty { display: none; }
.opcional { font-weight: 400; color: var(--muted); }

.bolsa-aviso { color: #9b1020; font-weight: 500; font-size: 15px; }
.bolsa-aviso:empty { display: none; }
.bolsa-items li.sin-stock .bi-meta strong { color: #9b1020; }
.ubicar { display: grid; gap: 8px; justify-items: start; }
.ubicar .boton { min-height: 44px; padding: 0 18px; font-size: 15px; background: var(--surface-2); }
.ubicar a { color: var(--ink); }
[data-ir-checkout][disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Doble vida ---------- */
main > section.manifiesto {
  margin-top: var(--gap-sec); padding: 0 var(--margen);
  background: #000; color: var(--perla);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; align-items: center;
}
.manifiesto-texto { grid-column: 1 / span 6; display: grid; gap: 28px; padding: clamp(64px, 8vw, 120px) 0; }
.manifiesto h2 { font-size: var(--step-hero); }
.manifiesto-frase { font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem); line-height: 1.25; max-width: 30ch; letter-spacing: -0.01em; }
.manifiesto-pie { font-size: 1rem; color: #B5ADA2; }
.manifiesto-img { grid-column: 7 / -1; width: 100%; max-width: 640px; justify-self: end; }
@media (max-width: 760px) {
  .manifiesto-texto, .manifiesto-img { grid-column: 1 / -1; }
  .manifiesto-texto { padding-bottom: 0; }
  .manifiesto-img { justify-self: center; max-width: 92%; }
}
.tallas-sec.sin-tabla .tallas-intro { grid-column: 1 / span 6; }
.tallas-sec.sin-tabla .tablas { display: none; }
.tallas-intro .boton { justify-self: start; }

.tallas-foto { grid-column: 8 / -1; margin: 0; background: var(--surface); display: grid; place-items: center; gap: 0; padding: clamp(24px, 3vw, 48px); }
.tallas-foto img:first-child { width: 88%; }
.tallas-foto img:last-child { width: 52%; margin-top: -4%; }
@media (max-width: 900px) { .tallas-foto { grid-column: 1 / -1; margin-top: 40px; } }

/* ---------- El set, puesto ---------- */
.look { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; row-gap: 40px; align-items: start; }
.look figure { margin: 0; display: grid; gap: 12px; }
.look img { width: 100%; height: auto; display: block; background: #6b6b6b; }
.look figcaption { font-size: 15px; color: var(--muted); }
.look-banner { grid-column: 1 / -1; margin: 0 calc(var(--margen) * -1) !important; }
.look-cab { grid-column: 1 / span 4; display: grid; gap: 24px; justify-items: start; position: sticky; top: 104px; }
.look-cab p { max-width: 32ch; }
.look-a { grid-column: 5 / span 4; }
.look-b { grid-column: 9 / span 4; margin-top: 120px !important; }
@media (max-width: 900px) {
  .look-cab { grid-column: 1 / -1; position: static; }
  .look-cab .boton { width: 100%; }
  .look-a { grid-column: 1 / span 6; }
  .look-b { grid-column: 7 / span 6; margin-top: 48px !important; }
}

.pieza-img { display: none; }
@media (max-width: 900px) {
  .pieza-img { display: grid; place-items: center; background: var(--surface); aspect-ratio: 4 / 3; margin: 4px 0 18px; padding: 16px; }
  .pieza-img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
  .pieza-img.jort img { max-width: 82%; }
}
.manifiesto-autor { font-size: 1rem; color: var(--perla); }
.manifiesto-autor a { color: var(--perla); }
@media (max-width: 900px) {
  .tallas-sec.sin-tabla .tallas-intro { grid-column: 1 / -1; }
  .tallas-intro .boton { width: 100%; white-space: nowrap; }
  .pf-chica { right: 0 !important; }
}