/* ───────────── Tipografía (servida desde la propia web) ───────────── */
@font-face { font-family: 'Caslon Display'; src: url('../fonts/caslon-display.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Caslon'; src: url('../fonts/caslon-text.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Caslon'; src: url('../fonts/caslon-text-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Caslon'; src: url('../fonts/caslon-text-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ───────────── Tokens ───────────── */
:root {
  /* color */
  --paper: #ece9e1;      /* lino */
  --paper-2: #e2ddd0;    /* beige, un tono más */
  --paper-3: #d8d1bf;
  --ink: #1d2a21;        /* verde caza casi negro */
  --muted: #4b5347;
  --hunter: #233629;     /* verde caza */
  --hunter-ink: #ece6d6;
  --hunter-muted: #b9b9a2;
  --olive: #565836;      /* verde oliva */
  --tobacco: #6b4226;    /* marrón tabaco: acción y precio */
  --tobacco-press: #573519;
  --on-tobacco: #f4efe4;

  /* tipo: cinco tamaños */
  --font-display: 'Caslon Display', 'Libre Caslon Display', Georgia, serif;
  --font-text: 'Caslon', 'Libre Caslon Text', Georgia, serif;
  --step-small: 0.9375rem;                                   /* 15px */
  --step-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); /* 17–19px */
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);     /* 20–26px */
  --step-sub: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);      /* 28–36px subtítulos */
  --step-head: clamp(2.125rem, 1.5rem + 2.6vw, 3.75rem);     /* 34–60px */
  --step-display: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);      /* 44–96px */

  /* espacio */
  --m: clamp(16px, 2vw, 28px);          /* el único par de márgenes */
  --gap: 12px;
  --section: clamp(96px, 12vw, 200px);  /* entre secciones */
  --header-h: 72px;

  /* movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ───────────── Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; margin: 0; text-wrap: balance; }
h3 { font-family: var(--font-text); font-weight: 700; letter-spacing: 0; line-height: 1.25; font-size: var(--step-lead); }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--olive); color: var(--paper); }
:focus-visible { outline: 2px solid var(--tobacco); outline-offset: 3px; }
.hunter :focus-visible, .on-dark :focus-visible { outline-color: var(--hunter-ink); }
html { scrollbar-color: var(--paper-3) var(--paper); }
.price, .num { font-variant-numeric: lining-nums tabular-nums; }

.skip { position: absolute; left: var(--m); top: -100px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; }
.skip:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lead { font-size: var(--step-lead); line-height: 1.38; }
.small { font-size: var(--step-small); }
.muted { color: var(--muted); }
.measure { max-width: 34em; }

/* ───────────── Botones ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
  min-height: 56px; padding: 0 28px;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--tobacco); color: var(--on-tobacco);
  font-family: var(--font-text); font-size: var(--step-body); text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-quiet { background: var(--paper-3); color: var(--ink); }
.btn-block { width: 100%; }
.btn .price { opacity: 0.9; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--tobacco-press); }
  .btn-ink:hover { background: #2c3c31; }
  .btn-quiet:hover { background: #cec6b2; }
}
.btn[aria-busy='true'] { opacity: 0.7; pointer-events: none; }

.link-arrow { display: inline-flex; gap: 0.5em; align-items: baseline; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.link-arrow svg { width: 0.9em; height: 0.9em; transition: transform 200ms var(--ease-out); align-self: center; }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover svg { transform: translateX(4px); } }

/* ───────────── Cabecera ───────────── */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--m);
  background: var(--paper);
}
.wordmark {
  font-family: var(--font-display); font-size: 1.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; line-height: 1; padding-left: 0.16em; white-space: nowrap;
}
.nav { display: flex; gap: 32px; font-size: var(--step-small); }
.nav a { text-decoration: none; padding: 8px 0; position: relative; }
.nav a[aria-current='page'] { text-decoration: underline; }
.nav-right { justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { text-decoration: underline; } }
.menu-btn { display: none; }
.mobile-menu { display: none; }

@media (max-width: 860px) {
  :root { --header-h: 60px; }
  .site-header { grid-template-columns: 1fr auto; }
  .wordmark { font-size: 1.375rem; }
  .nav { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; justify-self: end;
    min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font-size: var(--step-small);
  }
  .menu-btn .bars { width: 22px; height: 10px; position: relative; }
  .menu-btn .bars::before, .menu-btn .bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 240ms var(--ease-out); }
  .menu-btn .bars::before { top: 0; } .menu-btn .bars::after { bottom: 0; }
  .menu-btn[aria-expanded='true'] .bars::before { transform: translateY(4.25px) rotate(45deg); }
  .menu-btn[aria-expanded='true'] .bars::after { transform: translateY(-4.25px) rotate(-45deg); }
  .mobile-menu {
    display: block; position: fixed; inset: var(--header-h) 0 auto 0; z-index: 999;
    background: var(--paper); padding: 8px var(--m) 32px;
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
    box-shadow: 0 24px 40px -24px rgb(29 42 33 / 0.35); /* taste-skill-ignore: menú desplegado, flota */
  }
  .mobile-menu.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .mobile-menu a { display: block; font-family: var(--font-display); font-size: var(--step-head); line-height: 1.2; padding: 10px 0; text-decoration: none; }
  .mobile-menu .small { font-family: var(--font-text); font-size: var(--step-small); padding: 6px 0; }
}

/* ───────────── Portada: carta + foto fija ───────────── */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  padding: 0 var(--m) var(--m);
  min-height: calc(100svh - var(--header-h));
}
.hero-card {
  background: var(--paper-2);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(40px, 9vh, 120px) clamp(24px, 4vw, 72px) clamp(32px, 6vh, 64px);
}
.hero-card h1 { font-size: var(--step-display); max-width: 11ch; }
.hero-card .lead { margin: 36px auto 0; max-width: 27em; font-size: var(--step-body); line-height: 1.55; }
.hero-card .btn { margin-top: 36px; }
.carta { margin-top: auto; width: 100%; max-width: 420px; padding-top: 48px; }
.carta a { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 8px 0; text-decoration: none; text-align: left; }
.carta .name { font-size: var(--step-body); }
.carta .price { color: var(--tobacco); }
@media (hover: hover) and (pointer: fine) { .carta a:hover .name { text-decoration: underline; } }

.hero-photo { position: relative; overflow: hidden; background: var(--olive); min-height: 420px; }
.hero-photo .frames { position: absolute; inset: 0; }
.hero-photo .frames img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1600ms ease;
}
.hero-photo .frames img.on { opacity: 1; }
.hero-photo .frames img.on { animation: drift 14s linear both; }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.photo-bar {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 20px; background: var(--paper-2); font-size: var(--step-small);
}
.photo-bar [data-caption] { transition: opacity 400ms ease; text-align: right; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 0 var(--m) var(--m); gap: 0; }
  .hero-photo { order: -1; height: 56svh; min-height: 340px; position: sticky; top: var(--header-h); }
  .hero-card { position: relative; z-index: 2; padding: 48px 20px 32px; }
  .hero-card h1 { font-size: clamp(2.5rem, 10.5vw, 3.5rem); }
  .photo-bar > span:first-child { display: none; }
  .hero-card .btn { width: 100%; }
  .photo-bar { padding: 10px 14px; }
}

/* ───────────── Secciones genéricas ───────────── */
.section { padding: var(--section) var(--m); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.sec-title { font-size: var(--step-head); }

/* ───────────── Las tres piezas: expositor giratorio ───────────── */
.expo { background: var(--paper-2); padding: clamp(80px, 9vw, 140px) var(--m); overflow: hidden; }
.piezas-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(24px, 3vw, 48px); }
.piezas-head p { max-width: 26em; margin: 0; }
.expo-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
.expo-stage { display: flex; flex-direction: column; min-width: 0; }
.expo-floor {
  position: relative; height: clamp(340px, 50svh, 560px);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  isolation: isolate;
}
.expo-floor.dragging { cursor: grabbing; }
.expo-plinth { position: absolute; left: 6%; right: 6%; bottom: 2%; height: 26%; border-radius: 50%; background: var(--paper-3); }
.expo-item {
  --w: min(58%, 500px, 44svh);
  position: absolute; left: 50%; bottom: 9%; width: var(--w); aspect-ratio: 1;
  margin-left: calc(var(--w) / -2);
  padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%; will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
/* posición antes de que cargue el script (y sin script) */
.expo-item[data-i='1'] { transform: translate3d(36%, -12%, 0) scale(0.62); opacity: 0.6; }
.expo-item[data-i='2'] { transform: translate3d(-36%, -12%, 0) scale(0.62); opacity: 0.6; }
.expo-item[data-i='0'] { z-index: 2; }
.expo-fig { position: absolute; inset: 0; transform: scale(var(--s, 1)); transform-origin: 50% 100%; }
.expo-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; transition: opacity 420ms ease; pointer-events: none; }
.expo-fig img.on { opacity: 1; }
.expo-nav {
  position: absolute; bottom: 4%; z-index: 300; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.expo-nav svg { width: 18px; height: 18px; }
.expo-prev { left: 0; } .expo-next { right: 0; }
.expo-nav:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .expo-nav:hover { background: var(--ink); color: var(--paper); } }
.expo-word { position: relative; height: clamp(4rem, 9vw, 8.5rem); overflow: hidden; margin-top: 4px; }
.expo-word span {
  position: absolute; inset: 0; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(4rem, 9vw, 8.5rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--olive); opacity: 0; visibility: hidden;
}
.expo-word span.on { opacity: 1; visibility: visible; }
.expo-info { display: flex; flex-direction: column; min-height: clamp(440px, 56svh, 600px); }
.expo-panels { position: relative; flex: 1; display: grid; }
.expo-panels .panel { grid-area: 1 / 1; }
.kind { font-size: var(--step-body); margin: 12px 0 0; }
.tabs { display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.tab {
  background: none; border: 0; padding: 10px 0; cursor: pointer; color: var(--muted);
  font-size: var(--step-body); position: relative;
}
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.tab[aria-selected='true'] { color: var(--ink); }
.tab[aria-selected='true']::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--ink); } }
.panel { display: flex; flex-direction: column; flex: 1; padding-top: clamp(32px, 6vh, 72px); }
.panel h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-head); letter-spacing: -0.02em; line-height: 1.02; }
.panel .price-line { font-size: var(--step-lead); color: var(--tobacco); margin: 18px 0 22px; }
.panel .colors { margin-top: 8px; }
.panel .desc { max-width: 30em; }
.panel .actions { margin-top: auto; padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.panel .actions .btn { min-height: 72px; }
.js .panel[hidden] { display: none; }
.no-js .panel + .panel { margin-top: 64px; }

/* selector de color */
.colors { border: 0; margin: 0; padding: 0; }
.colors legend { padding: 0; margin-bottom: 12px; font-size: var(--step-small); color: var(--muted); }
.colors legend strong { color: var(--ink); font-weight: 400; }
.swatches { display: flex; gap: 14px; flex-wrap: wrap; }
.swatch { position: relative; width: 44px; height: 44px; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span {
  position: absolute; inset: 6px; background: var(--c); border-radius: 50%;
  outline: 1.5px solid transparent; outline-offset: 3px;
  transition: outline-color 200ms ease, outline-offset 240ms var(--ease-out), transform 160ms var(--ease-out);
}
.swatch input:checked + span { outline-color: var(--ink); outline-offset: 4px; }
.swatch input:focus-visible + span { outline: 2px solid var(--tobacco); outline-offset: 6px; }
.swatch:active span { transform: scale(0.94); }

@media (max-width: 860px) {
  .piezas-head { flex-direction: column; align-items: start; }
  .expo-grid { grid-template-columns: 1fr; gap: 16px; }
  .expo-floor { height: clamp(300px, 46svh, 440px); }
  .expo-item { --w: min(74%, clamp(270px, 40svh, 400px)); }
  .expo-nav { width: 46px; height: 46px; bottom: 0; }
  .expo-word { height: 22vw; }
  .expo-word span { font-size: 22vw; }
  .expo-info { min-height: 0; }
  .tabs { gap: 20px; }
  .panel { padding-top: 24px; }
  .panel .actions { grid-template-columns: 1fr; }
  .panel .actions .btn { min-height: 60px; }
}

/* ───────────── La lona encerada (título fijo, filas que pasan) ───────────── */
.hunter { background: var(--hunter); color: var(--hunter-ink); }
.hunter .muted { color: var(--hunter-muted); }
.lona { padding: var(--section) var(--m); }
.lona-title { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.lona-title h2 { font-size: var(--step-display); line-height: 0.98; }
.lona-title p { margin-top: 32px; max-width: 22em; }
.lona-rows { grid-column: 7 / span 6; display: grid; gap: clamp(72px, 7vw, 112px); }
.row h3 { font-size: var(--step-head); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; margin-bottom: 28px; }
.row-body { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: clamp(20px, 2.5vw, 36px); align-items: start; }
.row:nth-child(even) .row-body { grid-template-columns: 1fr minmax(160px, 220px); }
.row:nth-child(even) .row-body figure { order: 2; }
.row figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.row figure img { width: 100%; height: 100%; object-fit: cover; }
.row figure.object img { mix-blend-mode: multiply; transform: scale(var(--zoom, 1.9)); transform-origin: var(--origin, 50% 50%); }
.row li { padding: 6px 0; line-height: 1.45; }
.almanaque { margin-top: 24px; padding: 20px 22px; background: rgb(236 230 214 / 0.08); }
.almanaque .when { font-family: var(--font-display); font-size: var(--step-lead); display: block; margin-bottom: 6px; }
.almanaque p { margin: 0; }

@media (max-width: 860px) {
  .lona .grid12 { display: block; }
  .lona-title { position: sticky; top: var(--header-h); z-index: 3; background: var(--hunter); padding: 12px 0; margin: 0 calc(var(--m) * -1); padding-inline: var(--m); }
  .lona-title h2 { font-size: 2.25rem; }
  .lona-title p { display: none; }
  .lona-intro-m { display: block !important; margin: 24px 0 56px; }
  .lona-rows { gap: 96px; }
  .row-body, .row:nth-child(even) .row-body { grid-template-columns: 1fr; }
  .row:nth-child(even) .row-body figure { order: 0; }
  .row figure { aspect-ratio: 4 / 3; }
}
.lona-intro-m { display: none; }

/* ───────────── Confianza (nombres en columnas) ───────────── */
.confianza .grid12 { row-gap: 40px; }
.confianza h2 { grid-column: 1 / span 3; font-size: var(--step-sub); font-family: var(--font-display); line-height: 1.15; }
.confianza .cols { grid-column: 5 / span 8; columns: 4; column-gap: 32px; }
.confianza .cols ul { break-inside: avoid; margin-bottom: 32px; }
.confianza .cols li { font-size: var(--step-body); line-height: 1.5; padding: 2px 0; }
.confianza .cols li:first-child { color: var(--muted); }
@media (max-width: 1100px) { .confianza .cols { columns: 2; } }
@media (max-width: 860px) {
  .confianza h2 { grid-column: 1 / -1; }
  .confianza .cols { grid-column: 1 / -1; column-gap: 20px; }
}
@media (max-width: 420px) { .confianza .cols { columns: 1; } }

/* ───────────── La casa (foto a todo el ancho) ───────────── */
.casa { padding: 0 var(--m) var(--section); }
.casa figure { margin: 0; }
.casa .wide { width: 100%; height: clamp(320px, 72svh, 820px); object-fit: cover; }
.casa figcaption { font-size: var(--step-small); color: var(--muted); padding-top: 12px; }
.casa .grid12 { margin-top: clamp(64px, 6vw, 96px); row-gap: 28px; }
.casa h2 { grid-column: 1 / span 5; font-size: var(--step-head); }
.casa .text { grid-column: 7 / span 6; }
@media (max-width: 860px) { .casa h2, .casa .text { grid-column: 1 / -1; } .casa figcaption { display: none; } }

/* ───────────── Pie ───────────── */
.site-footer { padding: clamp(80px, 10vw, 160px) var(--m) 28px; font-size: var(--step-small); }
.footer-name { font-family: var(--font-display); font-size: clamp(3.5rem, 15.5vw, 15rem); letter-spacing: 0.06em; text-transform: uppercase; line-height: 0.85; margin: 0 0 clamp(40px, 5vw, 64px); white-space: nowrap; color: var(--olive); }
.footer-line { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: baseline; }
.footer-line nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.footer-line nav a { text-decoration: none; padding: 6px 0; }
@media (hover: hover) and (pointer: fine) { .footer-line nav a:hover { text-decoration: underline; } }
.footer-line .end { text-align: right; color: var(--muted); }
.footer-line .start { color: var(--muted); }
.credits { margin-top: 28px; color: var(--muted); font-size: var(--step-small); line-height: 1.5; max-width: 46em; }
.credits a { color: inherit; }
@media (max-width: 860px) {
  .footer-line { grid-template-columns: 1fr; gap: 8px; }
  .footer-line nav { justify-content: flex-start; gap: 4px 20px; }
  .footer-line .end { text-align: left; }
}

/* ───────────── Ficha de producto ───────────── */
.product { display: grid; grid-template-columns: 55fr 45fr; gap: var(--gap); padding: 0 var(--m); align-items: start; }
.gallery { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h) - var(--m)); display: grid; grid-template-rows: 1fr auto; gap: var(--gap); }
.stage { position: relative; background: var(--paper-2); overflow: hidden; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5%; mix-blend-mode: multiply; transition: opacity 360ms ease, transform 700ms var(--ease-out); }
.stage img.scene { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.stage img:not(.on) { opacity: 0; transform: scale(0.985); }
.thumbs { display: flex; gap: var(--gap); overflow-x: auto; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: 0 0 auto; width: 84px; height: 84px; padding: 0; border: 0; background: var(--paper-2); cursor: pointer; position: relative; transition: transform 160ms var(--ease-out); }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.thumb.scene img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.thumb::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); transform: scaleX(0); transition: transform 260ms var(--ease-out); transform-origin: left; }
.thumb[aria-pressed='true']::after { transform: scaleX(1); }
.thumb:active { transform: scale(0.96); }

.info { padding: clamp(32px, 5vw, 72px) clamp(8px, 3vw, 56px) var(--section); background: var(--paper); position: relative; z-index: 2; }
.info > * { max-width: 34em; }
.info h1 { font-size: var(--step-head); }
.info .price-big { font-size: var(--step-lead); color: var(--tobacco); margin: 20px 0 24px; }
.info .lead { margin-bottom: 40px; }
.buy-box { display: grid; gap: 24px; margin-bottom: 20px; }
.buy-notes { font-size: var(--step-small); color: var(--muted); display: grid; gap: 4px; margin-bottom: clamp(56px, 7vw, 96px); }
.info section { padding-top: clamp(40px, 5vw, 64px); }
.info h2 { font-size: var(--step-sub); margin-bottom: 14px; }
.ticks li { padding: 6px 0 6px 30px; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 6px; border-left: 1.5px solid var(--olive); border-bottom: 1.5px solid var(--olive); transform: rotate(-45deg); }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; margin-top: 24px; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; }
.cuidados li { padding: 6px 0; }
.cuidados strong { font-weight: 700; }
.no { color: var(--tobacco); }

.scene-break { margin: 0 var(--m); position: relative; }
.scene-break img { width: 100%; height: clamp(320px, 80svh, 900px); object-fit: cover; }
.scene-break figcaption { font-size: var(--step-small); color: var(--muted); padding-top: 12px; }

.otras { padding: var(--section) var(--m); }
.otras h2 { font-size: var(--step-head); margin-bottom: clamp(32px, 4vw, 56px); }
.otras-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.otra { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); text-decoration: none; min-height: 280px; transition: transform 160ms var(--ease-out); }
.otra figure { margin: 0; position: relative; }
.otra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform 600ms var(--ease-out); }
.otra div { padding: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; }
.otra h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-lead); line-height: 1.05; letter-spacing: -0.02em; }
.otra p { margin: 12px 0 0; }
.otra .price { margin-top: auto; padding-top: 20px; color: var(--tobacco); font-size: var(--step-lead); }
.otra:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .otra:hover img { transform: scale(1.04); } .otra:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } }

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; gap: 0; }
  .gallery { height: auto; top: var(--header-h); grid-template-rows: auto; }
  .stage { height: 58svh; min-height: 320px; }
  .thumbs { padding: var(--gap) 0; background: var(--paper); }
  .thumb { width: 64px; height: 64px; }
  .info { padding: 32px 4px var(--section); margin-top: -1px; }
  .otras-list { grid-template-columns: 1fr; }
  .otra { min-height: 200px; }
}

/* ───────────── Páginas de lectura ───────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 var(--m); align-items: start; }
.split .fixed { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h) - var(--m)); margin: 0; overflow: hidden; background: var(--olive); }
.split .fixed img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: opacity 1200ms ease; }
.split .fixed img:not(.on) { opacity: 0; }
.split .fixed figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper-2); padding: 14px 20px; font-size: var(--step-small); transition: opacity 300ms ease; }
.reading { padding: clamp(40px, 6vw, 96px) clamp(8px, 4vw, 72px) var(--section); }
.reading > * { max-width: 34em; }
.reading h1 { font-size: var(--step-display); margin-bottom: 36px; }
.reading h2 { font-size: var(--step-head); margin: clamp(56px, 7vw, 96px) 0 20px; }
.reading .figure-inline { margin: 40px 0 0; }
.reading .figure-inline img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.reading .figure-inline figcaption { font-size: var(--step-small); color: var(--muted); padding-top: 10px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 0; }
  .split .fixed { height: 50svh; min-height: 300px; position: relative; top: 0; }
  .split .fixed figcaption { display: none; }
  .reading { padding: 40px 4px var(--section); }
  .reading h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
}

/* Preguntas: respuestas como texto corrido */
.faq-page { padding: clamp(40px, 6vw, 96px) var(--m) var(--section); }
.faq-page h1 { font-size: var(--step-display); max-width: 12ch; }
.faq-page .intro { max-width: 30em; margin: 32px 0 0; }
.faq-group { margin-top: clamp(72px, 9vw, 144px); row-gap: 24px; }
.faq-group h2 { grid-column: 1 / span 3; font-size: var(--step-sub); line-height: 1.15; }
.faq-group .answers { grid-column: 5 / span 8; columns: 2; column-gap: 56px; }
.faq-group .answers p { break-inside: avoid; margin: 0 0 22px; font-size: var(--step-body); line-height: 1.55; }
.faq-group .answers p b { font-weight: 700; }
@media (max-width: 1100px) { .faq-group .answers { columns: 1; max-width: 40em; } }
@media (max-width: 860px) { .faq-group h2, .faq-group .answers { grid-column: 1 / -1; } .faq-page h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); } }

/* Contacto */
.contact-ways { display: grid; gap: 4px; margin: 0 0 8px; }
.contact-ways a { font-size: var(--step-lead); }
.form { display: grid; gap: 20px; margin-top: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--step-body); }
.field input, .field textarea, .field select {
  width: 100%; border: 0; border-radius: 0; background: var(--paper-2); padding: 14px 16px; font-size: max(16px, var(--step-body));
  border-bottom: 2px solid var(--paper-3); transition: border-color 200ms ease, background-color 200ms ease;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); background: #e9e5da; }
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: #8a2a1a; }
.form-note { font-size: var(--step-small); color: var(--muted); margin: 0; }

/* Legales */
.legal { padding: clamp(40px, 6vw, 96px) var(--m) var(--section); row-gap: 40px; align-items: start; }
.legal-head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); }
.legal-head h1 { font-size: var(--step-display); }
.draft { background: var(--paper-2); padding: 18px 22px; margin: 32px 0 0; max-width: 26em; }
.legal-body { grid-column: 7 / span 6; }
.legal-body > :first-child { margin-top: 0; }
.legal h2 { font-size: var(--step-sub); margin: 48px 0 14px; }
.legal p, .legal li { max-width: 36em; }
.legal ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
@media (max-width: 860px) { .legal-head, .legal-body { grid-column: 1 / -1; position: static; } .legal-head h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); } }

.faq-band { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); margin-top: clamp(72px, 9vw, 144px); }
.faq-band figure { margin: 0; }
.faq-band img { width: 100%; height: clamp(260px, 52vh, 560px); object-fit: cover; }
.faq-band figcaption { font-size: var(--step-small); color: var(--muted); padding-top: 10px; }
@media (max-width: 860px) { .faq-band { grid-template-columns: 1fr; } .faq-band figure + figure { display: none; } }

/* ───────────── Diálogo de compra ───────────── */
.buy-dialog {
  border: 0; padding: 0; max-width: min(520px, calc(100vw - 32px)); width: 100%;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgb(20 30 22 / 0.45); /* taste-skill-ignore: diálogo, flota */
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out), overlay 300ms allow-discrete, display 300ms allow-discrete;
}
.buy-dialog[open] { opacity: 1; transform: none; }
@starting-style { .buy-dialog[open] { opacity: 0; transform: translateY(12px) scale(0.98); } }
.buy-dialog::backdrop { background: rgb(20 30 22 / 0); transition: background-color 300ms ease, overlay 300ms allow-discrete, display 300ms allow-discrete; }
.buy-dialog[open]::backdrop { background: rgb(20 30 22 / 0.5); }
@starting-style { .buy-dialog[open]::backdrop { background: rgb(20 30 22 / 0); } }
.buy-dialog .inner { display: grid; grid-template-columns: 140px 1fr; }
.buy-dialog figure { margin: 0; background: var(--paper-2); }
.buy-dialog figure img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 10px; }
.buy-dialog .body { padding: 28px 28px 24px; }
.buy-dialog h2 { font-size: var(--step-lead); margin-bottom: 8px; }
.buy-dialog .meta { color: var(--muted); margin: 0 0 18px; }
.buy-dialog .notice { background: var(--paper-2); padding: 14px 16px; font-size: var(--step-small); margin: 0 0 20px; }
.buy-dialog .btns { display: grid; gap: 10px; }
@media (max-width: 520px) { .buy-dialog .inner { grid-template-columns: 1fr; } .buy-dialog figure { height: 160px; } }

/* ───────────── Entradas al hacer scroll ───────────── */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].in > * { opacity: 1; transform: none; }
.js .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out); }
.js .reveal-img.in { clip-path: inset(0 0 0 0); }
.js .hero-card > * { animation: rise 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js [data-reveal] > * { transform: none; transition: opacity 400ms ease; }
  .js .reveal-img { clip-path: none; }
  .hero-photo .frames img.on { animation: none; }
  .stage img:not(.on) { transform: none; }
}

/* ───────────── Escena: el nombre es una ventana a la sierra ─────────────
   Una capa color papel con las letras recortadas cubre la foto. Al crecer
   las letras, la misma foto queda a la vista: letras y paisaje son uno. */
.hero-scene .scene-stage {
  position: relative; min-height: calc(100svh - var(--header-h)); overflow: hidden;
  display: grid; align-content: end; justify-items: center;
}
.hero-scene.is-live .scene-stage { min-height: 0; }
.hs-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hs-veil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.hs-paper { fill: var(--paper); }
.hs-letters { font-family: var(--font-text); font-weight: 700; font-size: 15vw; letter-spacing: 0; }
.hs-copy {
  position: relative; z-index: 2; display: grid; justify-items: center; text-align: center;
  padding: 0 var(--m) clamp(40px, 8vh, 96px); width: 100%;
}
.hs-copy h1 { font-size: var(--step-head); max-width: 14ch; }
.hs-copy .lead { margin: 22px 0 0; max-width: 30em; font-size: var(--step-body); line-height: 1.55; }
.hs-actions { margin-top: 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.hs-cap { position: absolute; z-index: 2; left: var(--m); bottom: var(--m); margin: 0; background: var(--paper); padding: 10px 16px; font-size: var(--step-small); opacity: 0; visibility: hidden; }
@media (max-width: 767px) {
  .hs-letters { font-size: 16vw; }
  .hs-actions { flex-direction: column; gap: 14px; width: 100%; }
  .hs-actions .btn { width: 100%; }
}

/* ───────────── Escena: las piezas en el campo ───────────── */
/* composición final (sin animación): tres fotos con su nombre */
.campo-scene { background: var(--paper-2); }
.campo-scene .scene-stage { padding: var(--section) var(--m); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) var(--gap); }
.cp-title { grid-column: 1 / -1; font-size: var(--step-head); }
.cp-word, .cp-cut { display: none; }
.cp-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--olive); }
.cp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cp-text h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-sub); margin: 18px 0 8px; }
.cp-text p { margin: 0 0 14px; max-width: 30em; }
@media (max-width: 767px) { .campo-scene .scene-stage { grid-template-columns: 1fr; } }

/* en vivo */
.campo-scene.is-live .scene-stage { display: block; padding: 0; }
.campo-scene.is-live .cp-title { position: absolute; z-index: 6; left: var(--m); top: calc(var(--header-h) + 20px); font-size: var(--step-sub); }
.campo-scene.is-live .cp { position: absolute; inset: 0; visibility: hidden; }
.campo-scene.is-live .cp:first-of-type { visibility: visible; }
.campo-scene.is-live .cp-word {
  display: block; position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%);
  text-align: center; white-space: nowrap; font-family: var(--font-display); font-size: clamp(7rem, 27vw, 30rem);
  line-height: 0.8; letter-spacing: -0.03em; color: var(--paper-3);
}
.campo-scene.is-live .cp-photo { position: absolute; z-index: 2; right: var(--m); top: calc(var(--header-h) + var(--m)); bottom: var(--m); width: min(40vw, calc((100svh - var(--header-h)) * 0.78)); aspect-ratio: auto; }
.campo-scene.is-live .cp-cut { display: block; position: absolute; z-index: 3; left: 22%; top: 42%; width: min(30vw, 500px); height: auto; margin-top: calc(min(30vw, 500px) * -0.47); pointer-events: none; }
.campo-scene.is-live .cp-text { position: absolute; z-index: 4; left: var(--m); bottom: clamp(28px, 6vh, 64px); max-width: 26em; }
.campo-scene.is-live .cp-text h3 { font-size: var(--step-head); margin: 0 0 12px; }
@media (max-width: 767px) {
  .campo-scene.is-live .cp-word { top: 30%; font-size: 30vw; }
  .campo-scene.is-live .cp-photo { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 50svh; }
  .campo-scene.is-live .cp-cut { left: 50%; top: 32%; width: 64vw; margin: -30vw 0 0 -32vw; }
  .campo-scene.is-live .cp-text { z-index: 5; left: var(--m); right: var(--m); bottom: 20px; color: var(--paper); }
  .campo-scene.is-live .cp-text a { color: var(--paper); }
  .campo-scene.is-live .cp-photo::after { content: ''; position: absolute; inset: 0; background: rgb(14 22 16 / 0.38); }
}

/* ───────────── Escena: los cuatro capítulos de la lona ───────────── */
/* composición final (sin animación): rejilla de fotos con su palabra */
.lona-scene .scene-stage { padding: var(--section) var(--m); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) var(--gap); }
.ls-intro { grid-column: 1 / -1; max-width: 40em; }
.ls-intro h2 { font-size: var(--step-display); line-height: 0.98; }
.ls-intro .lead { margin: 28px 0 0; }
.ch { margin: 0; }
.ch-pic { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--olive); }
.ch-pic img { width: 100%; height: 100%; object-fit: cover; }
.ch-word { font-family: var(--font-display); font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; margin: 20px 0 10px; }
.ch-line { margin: 0; max-width: 30em; color: var(--hunter-ink); }
@media (max-width: 767px) { .lona-scene .scene-stage { grid-template-columns: 1fr; } }

/* en vivo: escenario a pantalla completa */
.lona-scene.is-live .scene-stage { display: block; padding: 0; }
.lona-scene.is-live .ls-intro { position: absolute; z-index: 5; left: var(--m); top: 50%; transform: translateY(-50%); width: min(44%, 36em); }
.lona-scene.is-live .ch { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.lona-scene.is-live .ch-pic { position: absolute; inset: 0; aspect-ratio: auto; }
.lona-scene.is-live .ch-pic::after { content: ''; position: absolute; inset: 0; background: rgb(14 22 16 / 0.4); }
.lona-scene.is-live .ch-text { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(28px, 6vh, 64px); color: var(--paper); }
.lona-scene.is-live .ch-word { font-size: clamp(5rem, 15vw, 15rem); line-height: 0.86; margin: 0 0 18px; color: var(--paper); }
.lona-scene.is-live .ch-line { font-size: var(--step-lead); line-height: 1.35; max-width: 24em; color: var(--paper); }
@media (max-width: 767px) {
  .lona-scene.is-live .ls-intro { top: calc(var(--header-h) + 28px); transform: none; width: auto; right: var(--m); }
  .lona-scene.is-live .ls-intro h2 { font-size: 2.75rem; }
  .lona-scene.is-live .ls-intro .almanaque { display: none; }
  .lona-scene.is-live .ch-word { font-size: 24vw; }
}

/* ───────────── Paisaje a todo el ancho tras el expositor ───────────── */
.paisaje { position: relative; overflow: hidden; background: var(--hunter); }
.pz-fig { margin: 0; height: clamp(440px, 94svh, 1040px); overflow: hidden; position: relative; }
.pz-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform-origin: 50% 60%; }
.pz-fig::after { content: ''; position: absolute; inset: 0; background: rgb(14 22 16 / 0.22); }
.pz-text { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(36px, 8vh, 88px); color: var(--paper); }
.pz-text h2 { font-size: var(--step-display); line-height: 0.95; }
.pz-text p { font-size: var(--step-lead); line-height: 1.35; margin: 18px 0 0; max-width: 22em; }
@media (max-width: 767px) { .pz-fig { height: 78svh; } .pz-text h2 { font-size: clamp(2.75rem, 13vw, 4rem); } }

/* En la ficha, la escena de la pieza en el campo ocupa una sola pieza */
.campo-solo .scene-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 767px) { .campo-solo .scene-stage { grid-template-columns: 1fr; } }

/* ───────────── Ficha: la pieza gira delante de su nombre, la compra al lado ───────────── */
.ph {
  display: grid; grid-template-columns: 56fr 44fr; gap: var(--gap);
  min-height: calc(100svh - var(--header-h)); padding: 0 var(--m) var(--m);
  background: var(--paper-2);
}
.ph-stage { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 420px; }
.ph-word {
  position: absolute; left: -2%; right: -2%; top: 50%; margin: 0; transform: translateY(-50%);
  text-align: center; white-space: nowrap; font-family: var(--font-display);
  font-size: min(calc(118vw / var(--len, 6)), 34rem); line-height: 0.8; letter-spacing: -0.03em; color: var(--paper-3);
  animation: ph-word 1.4s var(--ease-out) both;
}
.ph-float { position: relative; width: min(82%, 640px); aspect-ratio: 900 / 840; perspective: 1100px; animation: ph-rise 1.2s var(--ease-out) both 0.12s; }
.ph-cut {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  opacity: 0; transition: opacity 450ms ease; transform-origin: 50% 85%;
  animation: ph-turn 8s ease-in-out infinite;
  -webkit-user-select: none; user-select: none;
}
.ph-cut.on { opacity: 1; }
@keyframes ph-turn {
  0%, 100% { transform: translateY(0) rotateY(-12deg) rotate(-2deg); }
  50% { transform: translateY(-16px) rotateY(12deg) rotate(2deg); }
}
@keyframes ph-rise { from { opacity: 0; transform: translateY(60px) rotate(-6deg) scale(0.94); } }
@keyframes ph-word { from { opacity: 0; transform: translateY(-50%) translateX(6%); } }
.ph-info { align-self: center; padding: clamp(32px, 6vh, 72px) clamp(8px, 3vw, 56px); max-width: 36em; }
.ph-info h1 { font-size: var(--step-head); }
.ph-info .price-big { font-size: var(--step-lead); color: var(--tobacco); margin: 20px 0 24px; }
.ph-info .lead { margin-bottom: 36px; }
.ph-info .buy-notes { margin-bottom: 0; }
@media (max-width: 860px) {
  .ph { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .ph-stage { min-height: 0; height: 54svh; }
  .ph-word { font-size: calc(200vw / var(--len, 6)); }
  .ph-float { width: min(78vw, 440px); }
  .ph-info { padding: 28px 4px 40px; }
}
@media (prefers-reduced-motion: reduce) { .ph-cut, .ph-float, .ph-word { animation: none; } }

/* En el campo: una foto por color */
.pf { padding: var(--section) var(--m) 0; }
.pf h2 { font-size: var(--step-head); margin-bottom: clamp(28px, 4vw, 56px); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap); }
.pf-grid figure { margin: 0; }
.pf-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--olive); }
.pf-grid figcaption { font-size: var(--step-small); color: var(--muted); padding-top: 10px; }

/* El bloque de detalles empieza tras la galería */
.ph ~ .product { margin-top: var(--section); }

/* ───────────── Aviso de cookies ───────────── */
.cookie {
  position: fixed; z-index: 1100; left: var(--m); right: var(--m); bottom: var(--m);
  max-width: 560px; margin-left: auto; padding: 24px; background: var(--paper); color: var(--ink);
  box-shadow: 0 20px 60px -20px rgb(20 30 22 / 0.45); /* taste-skill-ignore: aviso flotante */
}
.cookie h2 { font-size: var(--step-lead); margin-bottom: 8px; }
.cookie-text { margin: 0 0 16px; font-size: var(--step-small); line-height: 1.5; }
.cookie-panel { display: grid; gap: 10px; margin: 0 0 16px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--step-small); line-height: 1.45; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.cookie-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cookie-btns .btn { min-height: 48px; padding: 0 22px; flex: 1 1 140px; }
.linklike { background: none; border: 0; padding: 6px 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
.footer-line nav .linklike { padding: 6px 0; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-line nav .linklike:hover { text-decoration: underline; } }

/* ───────────── Textos legales ───────────── */
.legal-intro { margin: 20px 0 8px; font-size: var(--step-body); }
.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: var(--step-small); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--paper-3); }
.legal-table th { font-weight: 700; }
.legal-form { margin: 16px 0 24px; padding: 20px 22px; background: var(--paper-2); }
.legal-form p { margin: 0 0 8px; }
.legal ol { padding-left: 1.3em; margin-bottom: 1em; }
.legal li { margin-bottom: 6px; }
.table-wrap { overflow-x: auto; margin: 8px 0 20px; }
.table-wrap .legal-table { margin: 0; min-width: 560px; }
.privacy-box { background: var(--paper-2); padding: 14px 16px; font-size: var(--step-small); line-height: 1.5; }
.privacy-box p { margin: 0; }
.cookie [hidden], .cookie[hidden] { display: none !important; }

/* ───────────── Logotipo ───────────── */
.wordmark { display: inline-flex; align-items: center; gap: 14px; }
.wordmark .logo-mark { height: 36px; width: auto; flex: 0 0 auto; color: var(--ink); }
.footer-brand { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); margin: 0 0 clamp(40px, 5vw, 64px); color: var(--olive); }
.footer-brand .footer-name { margin: 0; }
.logo-foot { height: clamp(3.2rem, 13vw, 13rem); width: auto; flex: 0 0 auto; }
@media (max-width: 860px) { .wordmark { gap: 10px; } .wordmark .logo-mark { height: 30px; } }
.footer-brand .footer-name { font-size: clamp(2.6rem, 11.5vw, 12rem); }
.logo-foot { height: clamp(2.6rem, 9.5vw, 10rem); }

/* ───────────── Carrito ───────────── */
.head-right { display: flex; justify-content: flex-end; align-items: center; gap: 28px; }
.cart-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer; font-size: var(--step-small); color: var(--ink);
}
.cart-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: var(--ink); color: var(--paper); font-size: 0.8125rem; font-variant-numeric: lining-nums tabular-nums;
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .cart-btn:hover { text-decoration: underline; text-underline-offset: 0.22em; } }
@media (max-width: 860px) {
  .head-right { gap: 18px; }
}

.cart-drawer {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(460px, 100vw); max-width: 100vw;
  border: 0; padding: 0; background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 320ms var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)), overlay 320ms allow-discrete, display 320ms allow-discrete;
  box-shadow: -20px 0 60px -30px rgb(20 30 22 / 0.5); /* taste-skill-ignore: panel flotante */
}
.cart-drawer:not([open]) { display: none; }
.cart-drawer[open] { transform: none; }
@starting-style { .cart-drawer[open] { transform: translateX(100%); } }
.cart-drawer::backdrop { background: rgb(20 30 22 / 0); transition: background-color 320ms ease, overlay 320ms allow-discrete, display 320ms allow-discrete; }
.cart-drawer[open]::backdrop { background: rgb(20 30 22 / 0.45); }
@starting-style { .cart-drawer[open]::backdrop { background: rgb(20 30 22 / 0); } }
.cart-head { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 24px 12px; }
.cart-head h2 { font-size: var(--step-sub); }
.cart-empty { padding: 12px 24px; margin: 0; }
.cart-lines { flex: 1; overflow-y: auto; padding: 0 24px; }
.cart-line { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; }
.cart-line + .cart-line { margin-top: 4px; }
.cart-line img { width: 90px; height: 84px; object-fit: contain; background: var(--paper-2); padding: 6px; }
.cart-name { margin: 0; font-weight: 700; line-height: 1.3; }
.cart-meta { margin: 2px 0 10px; color: var(--muted); font-size: var(--step-small); }
.qty { display: inline-flex; align-items: center; gap: 4px; background: var(--paper-2); }
.qty button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 1.25rem; color: var(--ink); }
.qty button:active { transform: scale(0.94); }
.qty span { min-width: 22px; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.cart-right { display: grid; justify-items: end; gap: 8px; }
.cart-price { margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.cart-right .linklike { font-size: var(--step-small); }
.cart-foot { padding: 16px 24px 24px; background: var(--paper-2); display: grid; gap: 10px; }
.cart-foot p { margin: 0; }
.cart-sub { display: flex; justify-content: space-between; font-size: var(--step-lead); }
.cart-demo { background: var(--paper); padding: 12px 14px; font-size: var(--step-small); }
.cart-demo:focus { outline: 2px solid var(--tobacco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cart-drawer { transition: none; } }

/* Colores agotados */
.swatch.is-soldout { cursor: not-allowed; }
.swatch.is-soldout span:not(.visually-hidden) { opacity: 0.35; }
.swatch.is-soldout::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--ink); transform: rotate(-45deg); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cart-ico { width: 20px; height: 20px; display: none; }
@media (max-width: 860px) {
  .cart-ico { display: block; }
  .cart-word { display: none; }
  .head-right { gap: 14px; }
  .cart-btn { gap: 4px; }
}
@media (max-width: 400px) { .wordmark span { letter-spacing: 0.12em; } .wordmark { gap: 8px; } }