/* ============================================================
   INVITASTE · Sistema visual "lamina tecnica + libro europeo"
   v3 — Pliego design system
============================================================ */

/* ---- reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   VARIABLES
============================================================ */
:root {
  /* Paleta nueva */
  --desk:    #F0EBE0;
  --paper:   #FDFAF5;
  --paper-2: #F9F4ED;
  --ink:     #1A1815;
  --terra:   #B14A2F;
  --teal:    #3A596D;

  --line:    rgba(26,24,21,0.12);
  --line2:   rgba(26,24,21,0.30);
  --faint:   rgba(26,24,21,0.46);

  --mostaza: #B8902A;
  --menta:   #4A8860;
  --pizarra: #5A789A;
  --violeta: #8870A4;
  --coral:   #BC5850;
  --tape:    rgba(184,144,42,0.22);

  --lift:    inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(26,24,21,0.05), 0 16px 34px -16px rgba(26,24,21,0.30);
  --lift-hi: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(26,24,21,0.06), 0 26px 46px -18px rgba(26,24,21,0.38);

  /* Tipografia */
  --ff-disp: "Fraunces", Georgia, serif;
  --ff-body: "Source Serif 4", Georgia, serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Aliases de compatibilidad (customizer.css usa estos) */
  --bg:           #F0EBE0;
  --accent:       #B14A2F;
  --accent-light: #d4c99a;
  --hair:         rgba(26,24,21,0.12);
  --hair-dark:    rgba(26,24,21,0.30);
  --ink-mid:      rgba(26,24,21,0.55);
  --ink-soft:     rgba(26,24,21,0.46);
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Source Serif 4", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --mx:        clamp(20px, 5vw, 88px);
  --masthead-h: 56px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html[data-theme="dark"] {
  --desk:    #120F0B;
  --paper:   #221D16;
  --paper-2: #1B1712;
  --ink:     #EDE7DA;
  --terra:   #D86949;
  --teal:    #7FA0B3;
  --line:    rgba(237,231,218,0.14);
  --line2:   rgba(237,231,218,0.32);
  --faint:   rgba(237,231,218,0.48);
  --mostaza: #D4AA46;
  --menta:   #6AAE80;
  --pizarra: #7A9EC0;
  --violeta: #AA90CC;
  --coral:   #D07870;
  --tape:    rgba(212,170,70,0.18);
  --lift:    inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.35), 0 18px 38px -16px rgba(0,0,0,0.66);
  --lift-hi: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.4), 0 28px 50px -18px rgba(0,0,0,0.74);
  /* aliases */
  --bg:        #120F0B;
  --accent:    #D86949;
  --hair:      rgba(237,231,218,0.14);
  --hair-dark: rgba(237,231,218,0.32);
  --ink-mid:   rgba(237,231,218,0.55);
  --ink-soft:  rgba(237,231,218,0.48);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   BASE
============================================================ */
body {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(150% 90% at 50% -20%, rgba(255,254,252,0.68), transparent 55%),
    radial-gradient(120% 70% at 88% 8%, rgba(177,74,47,0.04), transparent 50%),
    var(--desk);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Grano + fibra de papel */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(rgba(26,24,21,0.05) 0.6px, transparent 0.7px),
    repeating-linear-gradient(94deg, rgba(26,24,21,0.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(26,24,21,0.015) 0 1px, transparent 1px 7px);
  background-size: 7px 7px, auto, auto;
  opacity: .9;
}

h1,h2,h3,h4 { font-family: var(--ff-disp); font-weight: 300; margin: 0; line-height: 1.02; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--terra); color: var(--paper); }

/* Mono utility */
.mono {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Instrument box */
.instrument {
  position: relative;
  border: 1px solid var(--line2);
  background: var(--paper);
  box-shadow: var(--lift);
}
/* Corner marks (inyectadas por addCorners en app.js o inline) */
.cm { position: absolute; width: 9px; height: 9px; border: 0 solid var(--line2); pointer-events: none; z-index: 2; }
.cm-tl { top:-1px; left:-1px;   border-top-width:1px; border-left-width:1px; }
.cm-tr { top:-1px; right:-1px;  border-top-width:1px; border-right-width:1px; }
.cm-bl { bottom:-1px; left:-1px;  border-bottom-width:1px; border-left-width:1px; }
.cm-br { bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }
.instrument--accent { border-color: var(--terra); }
.instrument--accent .cm { border-color: var(--terra); }

/* Btn mono (nuevo sistema) */
.btn-mono {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; background: transparent; color: var(--ink);
  border: 1px solid var(--line2); cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.btn-mono:hover { border-color: var(--terra); color: var(--terra); }
.btn-mono .arr { transition: transform .25s; }
.btn-mono:hover .arr { transform: translateX(4px); }
.btn-mono--solid { background: var(--terra); color: var(--paper); border-color: var(--terra); }
.btn-mono--solid:hover { background: transparent; color: var(--terra); }

/* Chips de filtro */
.chip {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--line2); color: var(--faint);
  background: transparent; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Eyebrow */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  color: var(--faint); margin-bottom: 22px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--line2); }

/* Seccion layout */
.sec { padding: clamp(56px,8vw,104px) 0; }
.wrap { padding-inline: var(--mx); }
section { position: relative; z-index: 2; }
.band { background: var(--paper-2); }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ============================================================
   MASTHEAD
============================================================ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--masthead-h);
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--mx);
  gap: 16px;
  transition: background 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease;
}
.masthead.scrolled {
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  border-bottom-color: var(--line2);
  box-shadow: 0 14px 36px -22px rgba(26,24,21,0.14);
}

/* Logo wordmark — tipografia mixta */
.brand-mark {
  justify-self: center;
  font-family: var(--ff-disp);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: opacity 0.2s;
}
.brand-mark:hover { opacity: 0.6; }

.logo-wordmark {
  display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1;
  text-transform: none; letter-spacing: 0;
  --logo-ink: var(--ink);
  --logo-serif: var(--terra);
}
.logo-invita {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--ink);
  text-transform: uppercase;
}
.logo-shion {
  font-family: var(--ff-disp);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--terra);
  margin-left: 0.04em;
}

/* Nav links */
.nav-left, .nav-right { display: flex; gap: 26px; align-items: center; }
.nav-right { justify-content: flex-end; }
.nav-link {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); transition: color .2s;
}
.nav-link:hover { color: var(--ink); }
.nav-cta {
  padding: 9px 14px; border: 1px solid var(--line2);
  transition: border-color .2s, color .2s;
}
.nav-cta:hover { border-color: var(--terra); color: var(--terra); }

.nav-cart {
  position: relative; display: flex; align-items: center;
  color: var(--ink); text-decoration: none;
  padding: 6px 8px; border-radius: 6px;
  transition: background .15s;
}
.nav-cart:hover { background: rgba(0,0,0,.06); }
.nav-cart-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--wine); color: #fff;
  font-family: var(--ff-mono); font-size: 9px; font-weight: 600;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  transition: transform .2s;
}
.nav-cart-badge.pulse { animation: badge-pop .35s ease; }
@keyframes badge-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Theme toggle — botón en el header */
.theme-toggle {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line2); background: transparent; color: var(--ink);
  padding: 9px 13px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--terra); color: var(--terra); }
.theme-toggle .ind { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; }
html[data-theme="dark"] .theme-toggle .ind { background: currentColor; }

/* Hamburguesa mobile */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; padding: 4px; justify-self: end;
}
.nav-hamburger span {
  display: block; width: 20px; height: 1px; background: var(--ink);
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ============================================================
   HERO DEFINITIVO  |  Mesa de trabajo: claridad primero
   Fusion del ganador (claridad + jerarquia + iconos) con:
   ficha tecnica de oficio, cutting mat confinada a la stage,
   marcas de portada, sello de estudio, spine editorial y
   mesa de trabajo con rotulo.
   Bloque AUTONOMO. NO redefine .hero-stage / .hero-fan /
   .fan-card / .phone*  (esos viven en style.css y no se tocan).
   Solo controla .hero (layout) + copia + figuras de taller.
   Todos los colores via variables: el modo oscuro funciona solo.
============================================================ */

/* ------------------------------------------------------------
   GRID BASE: 2 columnas (copia | stage).
   La celda de la stage se mantiene >= 520px (piso probado) para
   que el abanico (cards a +414 / -250px) nunca se recorte.
------------------------------------------------------------ */
.hero {
  min-height: 100svh;
  padding: calc(var(--masthead-h) + clamp(20px, 3vw, 44px)) var(--mx) clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(480px, 600px);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------
   FONDO AMBIENTE: tinte tenue con color-mix sobre variables,
   para que el modo oscuro herede el tono (no rgba hardcodeado).
   Fallback solido por si color-mix no esta disponible.
------------------------------------------------------------ */
.hero-ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* Fallback: tinte muy sutil */
  background:
    radial-gradient(560px 440px at 72% 42%, rgba(177,74,47,0.06), transparent 64%),
    radial-gradient(700px 560px at 88% 78%, rgba(184,144,42,0.06), transparent 70%);
}
@supports (background: color-mix(in oklab, red, blue)) {
  .hero-ambient {
    background:
      radial-gradient(560px 440px at 72% 42%, color-mix(in oklab, var(--terra) 7%, transparent), transparent 64%),
      radial-gradient(700px 560px at 88% 78%, color-mix(in oklab, var(--mostaza) 7%, transparent), transparent 70%);
  }
}
.hero-ambient::before {
  content: ""; position: absolute;
  width: clamp(280px, 34vw, 460px); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--terra); opacity: .1;
  top: -9%; right: 22%;
}
.hero-ambient::after {
  content: ""; position: absolute;
  width: clamp(220px, 26vw, 360px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--teal);
  border-right-color: transparent; border-bottom-color: transparent;
  opacity: .12; bottom: -18%; left: -6%; transform: rotate(18deg);
}

/* ------------------------------------------------------------
   CUTTING MAT: cuadricula fina, confinada al lado de la stage
   y enmascarada para no tocar el texto. Lineas en variables.
------------------------------------------------------------ */
.hero-mat {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,   var(--line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg,  var(--line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg,   var(--line2) 0 1px, transparent 1px 160px),
    repeating-linear-gradient(90deg,  var(--line2) 0 1px, transparent 1px 160px);
  opacity: .42;
  -webkit-mask: radial-gradient(120% 100% at 100% 50%, #000 32%, transparent 66%);
  mask: radial-gradient(120% 100% at 100% 50%, #000 32%, transparent 66%);
}

/* ------------------------------------------------------------
   SPINE EDITORIAL: folio vertical al borde izquierdo (desktop).
------------------------------------------------------------ */
.hero-spine {
  position: absolute; z-index: 1; pointer-events: none;
  left: clamp(10px, 1.4vw, 22px); top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--faint);
}
.hero-spine .spine-dot { color: var(--terra); font-size: 6px; }

/* ------------------------------------------------------------
   COLUMNA LATERAL DE FIGURAS (margen de taller).
------------------------------------------------------------ */
.hero-rail {
  position: absolute; z-index: 1; pointer-events: none;
  left: clamp(34px, 4vw, 58px);
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  opacity: .9;
}

/* ------------------------------------------------------------
   COPIA: heroe del mensaje.
   min-width:0 + overflow-wrap para blindar overflow en 1 columna.
------------------------------------------------------------ */
.hero-copy {
  position: relative; z-index: 2;
  min-width: 0;
  max-width: 660px;
  overflow-wrap: break-word;
  /* aire a la izquierda para spine + columna de figuras en desktop */
  margin-left: clamp(0px, 4vw, 60px);
}

/* Kicker / ficha tecnica */
.hero-kicker {
  display: flex; align-items: center; gap: 16px; margin-bottom: 14px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint);
}
.hero-kicker::before { content: ""; width: 34px; height: 1px; background: var(--line2); flex: none; }
.kicker-rule { width: 1px; height: 14px; background: var(--line2); flex: none; }

/* Regla editorial con ticks (linea de medida) */
.hero-measure {
  display: block; width: clamp(160px, 22vw, 220px); height: 9px;
  margin-bottom: clamp(18px, 2.6vw, 28px);
  color: var(--line2);
}

/* H1: dice QUE es */
.hero-heading {
  font-family: var(--ff-disp);
  font-size: clamp(37px, 4.9vw, 62px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-optical-sizing: auto;
  max-width: 15ch;
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.hero-heading .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-heading .line-inner { display: inline-block; transform: translateY(115%); transition: transform 1.1s var(--ease-out) var(--d, 0s); }
body.is-loaded .hero-heading .line-inner { transform: none; }
.hero-heading em { font-style: italic; font-weight: 300; color: var(--terra); }

/* Deck: POR QUE conviene. En --ink para legibilidad (no --faint). */
.hero-body {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.56;
  max-width: 48ch;
  margin-bottom: clamp(16px, 1.8vw, 20px);
}

/* Linea de ficha: para quien */
.hero-spec {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: clamp(14px, 2vw, 20px);
}
.hero-spec .spec-dot { color: var(--terra); font-size: 7px; }

/* ------------------------------------------------------------
   QUE INCLUYE: micro fila escaneable con iconos de trazo fino.
------------------------------------------------------------ */
.hero-includes {
  list-style: none; margin: 0 0 clamp(16px, 2vw, 22px); padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 24px;
  max-width: 480px;
  border-top: 1px solid var(--line);
  padding-top: clamp(14px, 1.8vw, 18px);
}
.hero-includes li {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink); line-height: 1.3;
  min-width: 0;
}
.hero-includes .inc-ico { flex: none; color: var(--terra); width: 22px; height: 22px; }

/* ------------------------------------------------------------
   FICHA TECNICA: que recibes (Formato / Incluye / Entrega).
   Tono de oficio. Texto en --ink/--terra (no --faint) para que
   EXPLIQUE el producto con contraste suficiente.
------------------------------------------------------------ */
.hero-ficha {
  margin: 0 0 clamp(16px, 2vw, 24px);
  max-width: 480px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-ficha .ficha-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
}
.hero-ficha .ficha-row + .ficha-row { border-top: 1px solid var(--line); }
.hero-ficha dt {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terra);
}
.hero-ficha dd {
  margin: 0;
  font-family: var(--ff-body); font-size: 13.5px; line-height: 1.4;
  color: var(--ink);
}

/* ------------------------------------------------------------
   ACCIONES: jerarquia fuerte de CTA.
------------------------------------------------------------ */
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(22px, 2.6vw, 32px); }
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper); background: var(--terra); border: 1px solid var(--terra);
  padding: 15px 26px;
  transition: background .25s, color .25s;
}
.hero-cta:hover { background: transparent; color: var(--terra); }
.cta-arrow { font-size: 13px; transition: transform .25s; }
.hero-cta:hover .cta-arrow { transform: translateY(4px); }
.hero-cta-ghost {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); padding: 14px 2px;
  border-bottom: 1px solid var(--line2);
  transition: color .2s, border-color .2s;
}
.hero-cta-ghost:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ------------------------------------------------------------
   SENALES DE CONFIANZA.
------------------------------------------------------------ */
.hero-trust {
  list-style: none; display: flex; flex-wrap: wrap; row-gap: 10px; padding: 0; margin: 0;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero-trust li { color: var(--faint); padding: 0 18px; border-left: 1px solid var(--line2); white-space: nowrap; }
.hero-trust li:first-child { padding-left: 0; border-left: none; }

/* ============================================================
   FIGURAS DE TALLER  (acento, nunca protagonistas)
============================================================ */
.bau-figs { align-items: flex-end; }

/* Muestras de color (columna lateral) */
.fig-swatch { width: 26px; height: 26px; border-radius: 3px; flex: none; box-shadow: var(--lift); }

/* Piezas geometricas */
.b-circle { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.b-square { width: 34px; height: 34px; flex: none; }
.b-tall   { width: 13px; height: 52px; flex: none; }
.b-tri    { width: 0; height: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; flex: none; }
.b-semi   { width: 48px; height: 24px; border-radius: 48px 48px 0 0; flex: none; }
.b-diam   { width: 30px; height: 30px; transform: rotate(45deg); flex: none; }
.b-ring   { width: 42px; height: 42px; border-radius: 50%; background: transparent; border: 4.5px solid var(--menta); flex: none; }

.bau-figs .fig-svg { flex: none; display: block; }

/* ------------------------------------------------------------
   MESA DE TRABAJO: firma contenida bajo la copia.
------------------------------------------------------------ */
.hero-bench {
  position: relative;
  margin-top: clamp(28px, 3.6vw, 42px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-bench .bench-label {
  position: absolute; top: -7px; left: 0;
  padding-right: 12px; background: var(--paper);
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
}
.hero-bau {
  display: flex; align-items: flex-end; gap: 11px;
  height: 60px;
  opacity: .94;
}
.hero-bau .fig-svg { align-self: flex-end; }
.fig-rule { margin-bottom: 2px; }

/* Tira de swatches en la mesa */
.fig-swatchbar { display: inline-flex; gap: 0; align-self: flex-end; flex: none; box-shadow: var(--lift); }
.fig-swatchbar span { width: 16px; height: 30px; display: block; }

/* ------------------------------------------------------------
   STAGE COVER: marca de portada superpuesta a la celda de la
   stage. NO encoge la celda: es overlay con pointer-events none.
------------------------------------------------------------ */
.hero-cover {
  position: relative;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  align-self: stretch;
}
.cover-tag {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  z-index: 3; pointer-events: none;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--faint);
}
/* Marcas de esquina tipo lamina tecnica (enmarcan, no recortan) */
.cover-tick {
  position: absolute; width: 16px; height: 16px; z-index: 3; pointer-events: none;
  border: 0 solid var(--line2);
}
.cover-tick.tl { top: 0; left: 6px;  border-top-width: 1px; border-left-width: 1px; }
.cover-tick.tr { top: 0; right: 6px; border-top-width: 1px; border-right-width: 1px; }
.cover-tick.bl { bottom: 0; left: 6px;  border-bottom-width: 1px; border-left-width: 1px; }
.cover-tick.br { bottom: 0; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }

/* Sello redondo de estudio sobre el abanico */
.cover-seal {
  position: absolute; z-index: 4; pointer-events: none;
  right: 8px; bottom: 24px;
  width: 96px; height: 96px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12));
  transform: rotate(-8deg);
  opacity: .92;
}
.cover-seal svg { display: block; width: 100%; height: 100%; }

/* La stage inyectada ocupa todo el ancho de su celda.
   Unico toque permitido: NO redefine reglas internas de la stage. */
.hero-cover .hero-stage { width: 100%; }

/* ============================================================
   MICRO-STAGGER de la mesa de trabajo al cargar.
   Sutil; se desactiva con prefers-reduced-motion mas abajo.
============================================================ */
.hero-bau .tool {
  opacity: 0;
  transform: translateY(14px) rotate(-3deg);
  transition: opacity .6s var(--ease-out) var(--bd, 0s), transform .6s var(--ease-out) var(--bd, 0s);
}
.hero-bau .b-diam.tool { transform: translateY(14px) rotate(45deg); }
body.is-loaded .hero-bau .tool { opacity: .94; transform: translateY(0) rotate(0deg); }
body.is-loaded .hero-bau .b-diam.tool { transform: translateY(0) rotate(45deg); }

/* ============================================================
   RESPONSIVE: TABLET (681 a 1024px)
   El abanico se vuelve fila deslizable por su propio CSS.
============================================================ */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 48px;
    align-items: start;
  }
  /* Spine y columna lateral se ocultan: aire para la copia */
  .hero-rail { display: none; }
  .hero-spine {
    position: static; transform: none; writing-mode: horizontal-tb;
    margin-bottom: 6px; justify-content: flex-start;
  }
  .hero-mat {
    -webkit-mask: radial-gradient(140% 90% at 100% 100%, #000 10%, transparent 60%);
    mask: radial-gradient(140% 90% at 100% 100%, #000 10%, transparent 60%);
    opacity: .3;
  }
  .hero-copy { margin-left: 0; max-width: 760px; }
  .hero-includes, .hero-ficha { max-width: 600px; }
  .hero-bau { height: 56px; gap: 10px; }
  .cover-seal { right: 4vw; bottom: 8px; }
}

/* ============================================================
   RESPONSIVE: MOVIL (max 680px)
   Copia primero, abanico despues (orden natural del DOM).
============================================================ */
@media (max-width: 680px) {
  .hero {
    padding: calc(var(--masthead-h) + 40px) 20px 48px;
    gap: 18px;
  }
  .hero-spine { font-size: 9px; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .hero-kicker { margin-bottom: 12px; gap: 12px; }
  .hero-kicker::before { width: 22px; }
  .hero-measure { margin-bottom: 18px; }
  .hero-heading { font-size: clamp(36px, 11.5vw, 62px); max-width: 18ch; margin-bottom: 18px; }
  .hero-body { font-size: 16px; max-width: 100%; margin-bottom: 14px; }
  .hero-spec { font-size: 10px; gap: 10px; margin-bottom: 20px; }

  /* Que incluye: una columna, full ancho, sigue escaneable */
  .hero-includes { grid-template-columns: 1fr; gap: 12px; max-width: 100%; padding-top: 18px; }
  .hero-includes li { font-size: 12px; }

  /* Ficha tecnica: etiqueta arriba, valor debajo (mas legible) */
  .hero-ficha { max-width: 100%; }
  .hero-ficha .ficha-row { grid-template-columns: 1fr; gap: 4px; padding: 11px 0; }
  .hero-ficha dd { font-size: 13.5px; }

  /* CTAs comodos al tacto: primario full, fantasma debajo */
  .hero-actions { gap: 16px; margin-bottom: 26px; }
  .hero-cta { width: 100%; justify-content: center; padding: 16px 24px; }
  .hero-cta-ghost { padding: 8px 2px; }

  /* Confianza apilada */
  .hero-trust { flex-direction: column; row-gap: 8px; }
  .hero-trust li { padding: 0; border-left: none; }

  /* Mesa de trabajo: compacta, sin overflow */
  .hero-bench { margin-top: 30px; padding-top: 22px; }
  .hero-bau {
    height: 46px; gap: 9px;
    flex-wrap: nowrap; overflow: hidden;
  }
  .b-circle { width: 32px; height: 32px; }
  .b-tall   { width: 11px; height: 40px; }
  .b-semi   { width: 38px; height: 19px; }
  .b-ring   { width: 32px; height: 32px; border-width: 4px; }
  .b-square { width: 26px; height: 26px; }
  .b-diam   { width: 22px; height: 22px; }
  /* Oculta piezas extra POR CLASE (no por nth-of-type): robusto */
  .hero-bau .tool-extra,
  .hero-bau .fig-rule { display: none; }

  /* Sello de portada mas chico y arriba para no tapar el frente */
  .cover-seal { width: 72px; height: 72px; right: 8px; bottom: auto; top: 6px; }
  .cover-tag { font-size: 8px; }
}

/* Pantallas muy angostas: deja solo unas pocas figuras base */
@media (max-width: 380px) {
  .hero-bau > .tool:nth-child(n+8) { display: none; }
}

/* ============================================================
   MOVIMIENTO REDUCIDO: figuras y reveals quietos.
   El diamante conserva su rotate(45deg) en reposo.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-heading .line-inner { transition: none; transform: none; }
  .hero .h-rise { transition: none; }
  .hero-bau .tool { transition: none; opacity: .94; transform: none; }
  .hero-bau .b-diam.tool { transform: rotate(45deg); }
}

/* ============================================================
   HERO STAGE: abanico de celulares
============================================================ */
.hero-stage {
  position: relative; height: 600px; z-index: 1;
  display: flex; align-items: center; min-width: 0;
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s var(--ease-out) 0.3s, transform 1s var(--ease-out) 0.3s;
}
body.is-loaded .hero-stage { opacity: 1; transform: none; }

/* Fila deslizable (mobile/tablet) */
.hero-fan {
  --phoneW: 244px;
  display: flex; gap: 20px; align-items: center;
  width: 100%; min-width: 0; max-width: 100%; height: 100%;
  padding-block: 12px;
  padding-inline: max(0px, calc(50% - var(--phoneW) / 2));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; touch-action: pan-y;
}
.hero-fan::-webkit-scrollbar { display: none; }

/* Orden del abanico (central = front) */
.fan-card:nth-child(1)  { order: 0; }
.fan-card:nth-child(2)  { order: 1; }
.fan-card:nth-child(3)  { order: -1; }
.fan-card:nth-child(4)  { order: 2; }
.fan-card:nth-child(5)  { order: -2; }
.fan-card:nth-child(6)  { order: 3; }
.fan-card:nth-child(7)  { order: -3; }
.fan-card:nth-child(8)  { order: 4; }
.fan-card:nth-child(9)  { order: -4; }
.fan-card:nth-child(10) { order: 5; }
.fan-card:nth-child(11) { order: -5; }
.fan-card:nth-child(12) { order: 6; }

.fan-card {
  flex: 0 0 var(--phoneW); width: var(--phoneW);
  transform: scale(0.82); opacity: 0.5;
  transition: transform 0.5s var(--ease-out), opacity 0.5s ease;
  cursor: pointer;
}
.fan-card.is-front { transform: scale(1); opacity: 1; }
.fan-inner { width: 100%; }

/* Celular del fan (lámina técnica) */
.fan-card .phone {
  width: 100%; height: auto; max-height: none;
  aspect-ratio: 390 / 844;
  border: 1.5px solid var(--ink); border-radius: 38px;
  background: var(--paper); padding: 9px;
  box-shadow: var(--lift);
  transition: border-color .25s, box-shadow .35s ease;
}
.fan-card .phone-island { display: none; }
.fan-card .phone-screen { border-radius: 30px; background: var(--paper); }
.fan-card .phone-screen iframe {
  width: 390px; height: 844px; border: 0; display: block;
  transform-origin: top left; pointer-events: none;
}
.fan-card.is-front .phone { border-color: var(--terra); box-shadow: var(--lift-hi); }

.hero-fan-hint {
  position: absolute; left: 0; right: 0; bottom: -2px;
  text-align: center;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--faint); pointer-events: none;
}

/* Desktop: abanico fijo */
@media (min-width: 1025px) {
  .hero-fan {
    display: block; position: relative; width: 100%; height: 100%;
    padding: 0; overflow: visible; scroll-snap-type: none;
  }
  .fan-card.fan-extra { display: none; }
  .fan-card {
    position: absolute; left: 50%; top: 50%; width: 206px; opacity: 0;
    transform: translate(-50%, -42%) rotate(0deg) scale(0.9);
    transition: transform 1.15s var(--ease-out) var(--fd, 0s), opacity 0.9s ease var(--fd, 0s);
  }
  .fan-card:nth-child(1) { z-index: 7; }
  .fan-card:nth-child(2), .fan-card:nth-child(3) { z-index: 6; }
  .fan-card:nth-child(4), .fan-card:nth-child(5) { z-index: 5; }
  .fan-card:nth-child(6), .fan-card:nth-child(7) { z-index: 4; }
  .fan-card:hover { z-index: 9; }
  body.is-loaded .fan-card { opacity: 1; }
  body.is-loaded .fan-card:nth-child(1) { transform: translate(calc(-50% + 40px), -50%) rotate(0deg) scale(1.06);          --fd: 0.40s; }
  body.is-loaded .fan-card:nth-child(2) { transform: translate(calc(-50% + 172px), -45%) rotate(9deg) scale(0.9);   --fd: 0.50s; }
  body.is-loaded .fan-card:nth-child(3) { transform: translate(calc(-50% - 96px),  -46%) rotate(-7deg) scale(0.88);  --fd: 0.50s; }
  body.is-loaded .fan-card:nth-child(4) { transform: translate(calc(-50% + 300px), -37%) rotate(16deg) scale(0.82);  --fd: 0.60s; }
  body.is-loaded .fan-card:nth-child(5) { transform: translate(calc(-50% - 184px), -39%) rotate(-13deg) scale(0.8);  --fd: 0.60s; }
  body.is-loaded .fan-card:nth-child(6) { transform: translate(calc(-50% + 414px), -26%) rotate(22deg) scale(0.74);  --fd: 0.68s; }
  body.is-loaded .fan-card:nth-child(7) { transform: translate(calc(-50% - 250px), -30%) rotate(-18deg) scale(0.72); --fd: 0.68s; }
  .hero-stage {
    -webkit-mask: linear-gradient(to right, transparent 0, #000 64px);
    mask: linear-gradient(to right, transparent 0, #000 64px);
  }
  .fan-card .phone { border-radius: 30px; padding: 8px; }
  .fan-card .phone-screen { border-radius: 24px; }
  .hero-fan-hint { display: none; }
}


/* ============================================================
   FRISO GEOMÉTRICO
============================================================ */
.geom-frieze {
  position: relative;
  overflow: hidden;
  height: 88px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.gf-shape {
  position: absolute;
  opacity: 0.14;
  pointer-events: none;
}


/* ============================================================
   FILTROS
============================================================ */
.filter-section {
  position: sticky; top: var(--masthead-h); z-index: 100;
  background: color-mix(in oklab, var(--desk) 94%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line2);
  padding: 0 var(--mx);
}

.filter-row { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }

.filter-btn {
  padding: 18px 20px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active { color: var(--terra); border-bottom-color: var(--terra); }
.filter-count {
  font-family: var(--ff-mono); font-size: 9px; opacity: 0.55; margin-left: 4px;
}

.filter-row-styles { border-top: 1px solid var(--line); }
.filter-row-styles[hidden] { display: none; }
.filter-row-styles .filter-btn { padding: 12px 18px; font-size: 9px; }


/* ============================================================
   GRID DEL CATALOGO
============================================================ */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px var(--mx) 96px;
}

/* Tarjeta catalog (instrumento) */
.card {
  cursor: pointer; position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line2);
  background: var(--paper);
  box-shadow: var(--lift);
  transition: border-color .25s, transform .3s var(--ease-out), box-shadow .3s ease;
  will-change: transform;
}
.card:hover {
  border-color: var(--terra);
  transform: translateY(-5px) rotate(-0.3deg);
  box-shadow: var(--lift-hi);
}
.card.hidden { display: none; }
.card.fade-in { animation: cardIn .35s var(--ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Thumbnail con iframe */
.card-thumb {
  position: relative; width: 100%; aspect-ratio: 3/4;
  overflow: hidden; background: var(--paper-2); flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}
.card-thumb iframe {
  position: absolute; top: 0; left: 0;
  width: 390px; height: 693px; border: none; pointer-events: none;
  transform-origin: top left;
}

/* Overlay hover */
.card-overlay {
  position: absolute; inset: 0;
  background: rgba(26,24,21,0); display: flex; align-items: center; justify-content: center;
  transition: background .25s;
}
.card:hover .card-overlay { background: rgba(26,24,21,0.14); }

.card-preview-label {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper); background: var(--terra); padding: 10px 18px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  pointer-events: none;
}
.card:hover .card-preview-label { opacity: 1; transform: translateY(0); }

/* Meta de tarjeta */
.card-meta { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 5px; }

.card-meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.card-num {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--faint);
}

.card-badge {
  font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid currentColor;
}
.card-badge.coloridas   { color: var(--terra); }
.card-badge.editoriales { color: var(--ink); }
.card-badge.minimalistas{ color: var(--teal); }

.card-name {
  font-family: var(--ff-disp); font-size: 20px; font-weight: 300;
  letter-spacing: -0.01em; line-height: 1.08; margin-top: 2px;
}

.card-hook {
  font-family: var(--ff-body); font-size: 14px; color: var(--faint); line-height: 1.5; flex: 1;
}

/* Paleta de colores bajo la tarjeta */
.card-palette { display: flex; gap: 5px; margin-top: 8px; }
.swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(26,24,21,0.1); flex-shrink: 0;
}


/* ============================================================
   SECCION "QUE INCLUYE" (oscura)
============================================================ */
.incluye {
  position: relative; height: auto;
  background: var(--ink); color: var(--paper);
}

.incluye-pin {
  position: static; height: auto; overflow: visible;
  padding: clamp(72px,9vh,120px) var(--mx);
}

.incluye-head {
  width: 100%; max-width: 1180px;
  margin: 0 auto clamp(20px,4.5vh,52px);
}
.incluye-kicker {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent-light); margin-bottom: 16px; display: block;
}
.incluye-title {
  font-family: var(--ff-disp); font-weight: 300;
  font-size: clamp(30px,min(4vw,6.2vh),60px);
  line-height: 1.02; letter-spacing: -0.02em;
}
.incluye-title em { font-style: italic; color: var(--accent-light); }

.incluye-grid {
  position: relative; width: 100%; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr); column-gap: 40px; align-items: start;
}

.feature {
  padding: 24px 0 0; border-top: 1px solid rgba(237,231,218,0.16); opacity: 1;
}
.f-num {
  display: block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--accent-light); opacity: 0.75; margin-bottom: 10px;
}
.feature h3 {
  font-family: var(--ff-disp); font-weight: 300;
  font-size: clamp(22px,min(2.2vw,3.6vh),32px); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 10px;
}
.feature h3 em { font-style: italic; color: var(--accent-light); }
.feature p { font-family: var(--ff-body); font-size: 14px; line-height: 1.6; color: rgba(237,231,218,0.62); margin: 0; }
.f-vis { margin-top: 22px; }

/* Feature cards */
.iv {
  background: rgba(237,231,218,0.04); border: 1px solid rgba(237,231,218,0.13);
  border-radius: 4px; padding: 26px 24px;
}
.iv-label {
  display: block; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent-light); margin-bottom: 16px;
}
.iv-divider { height: 1px; background: rgba(237,231,218,0.12); margin: 28px 0; }

/* Visual 1: personalización */
.iv-mini {
  background: var(--paper); color: var(--ink); border-radius: 2px;
  padding: 30px 26px 26px; text-align: center;
  box-shadow: 0 22px 50px -18px rgba(0,0,0,0.55);
}
.iv-mini-kicker {
  display: block; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 12px;
}
.iv-mini-names {
  display: block; font-family: var(--ff-disp); font-weight: 300;
  font-size: clamp(26px,2.6vw,36px); letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 10px;
}
.iv-mini-names em { font-style: italic; color: var(--terra); }
.iv-mini-date {
  display: block; font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 0.3em; color: var(--faint); margin-bottom: 18px;
}
.iv-mini-bar { display: block; width: 56px; height: 2px; margin: 0 auto; background: var(--terra); }
@keyframes ivAccentBg  { 0%,21%{background:#B14A2F} 25%,46%{background:#BC5850} 50%,71%{background:#4A8860} 75%,96%{background:#5A789A} 100%{background:#B14A2F} }
@keyframes ivAccentText{ 0%,21%{color:#B14A2F}     25%,46%{color:#BC5850}     50%,71%{color:#4A8860}     75%,96%{color:#5A789A}     100%{color:#B14A2F}     }
.iv-mini-bar { animation: ivAccentBg 9s linear infinite; }
.iv-mini-names em { animation: ivAccentText 9s linear infinite; }

.iv-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.iv-swatches { position: relative; display: flex; gap: 12px; padding: 4px; }
.iv-sw { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(237,231,218,0.25); }
.sw-a { background: #B14A2F; } .sw-b { background: #BC5850; }
.sw-c { background: #4A8860; } .sw-d { background: #5A789A; }
.iv-sw-ring { position: absolute; top: 0; left: 0; width: 30px; height: 30px; border: 1px solid var(--paper); border-radius: 50%; }
@keyframes ivRing { 0%,21%{transform:translateX(0)} 25%,46%{transform:translateX(34px)} 50%,71%{transform:translateX(68px)} 75%,96%{transform:translateX(102px)} 100%{transform:translateX(0)} }
.iv-sw-ring { animation: ivRing 9s linear infinite; }

.iv-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-body); font-size: 12px; line-height: 1;
  color: rgba(237,231,218,0.78); border: 1px solid rgba(237,231,218,0.2);
  border-radius: 999px; padding: 9px 16px; white-space: nowrap;
}
.iv-chip svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Visual 2: cuenta regresiva */
.iv-count { display: flex; gap: 36px; }
.iv-count > div { text-align: left; }
.iv-count strong {
  display: block; font-family: var(--ff-disp); font-weight: 300;
  font-size: clamp(40px,4vw,58px); line-height: 1; color: var(--accent-light);
  font-variant-numeric: tabular-nums;
}
.iv-count span { display: block; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(237,231,218,0.5); margin-top: 8px; }
.iv-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.iv-pill {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(237,231,218,0.65); border: 1px solid rgba(237,231,218,0.22);
  border-radius: 999px; padding: 10px 20px;
}
.iv-pill.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.iv-note { margin-top: 22px; font-family: var(--ff-disp); font-style: italic; font-size: 13px; color: rgba(237,231,218,0.66); margin-bottom: 0; }

/* Visual 3: mapa */
.iv-map {
  position: relative; height: 170px; border-radius: 4px;
  border: 1px solid rgba(237,231,218,0.14); background: rgba(237,231,218,0.05);
  overflow: hidden; margin-bottom: 18px;
}
.iv-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.iv-map-label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237,231,218,0.75); background: rgba(26,24,21,0.72);
  border: 1px solid rgba(237,231,218,0.16); border-radius: 999px;
  padding: 7px 14px; backdrop-filter: blur(4px);
}
@keyframes ivPinPulse { 0%{transform:scale(0.6);opacity:0.9} 70%{transform:scale(2.4);opacity:0} 100%{transform:scale(2.4);opacity:0} }
.iv-pin-pulse { transform-origin: center; transform-box: fill-box; animation: ivPinPulse 2.4s ease-out infinite; }
.iv-row { display: flex; flex-wrap: wrap; gap: 10px; }
.iv-extras .iv-chip { opacity: 1; }


/* ============================================================
   PROCESO
============================================================ */
.process-section {
  padding: clamp(72px,9vw,120px) var(--mx);
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.process-container { max-width: 1200px; margin: 0 auto; }

.section-label {
  display: inline-block;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 22px;
}

.process-header { margin-bottom: 64px; }
.process-title {
  font-family: var(--ff-disp); font-size: clamp(36px,5vw,72px); font-weight: 300;
  line-height: 0.98; letter-spacing: -0.025em;
}
.process-title em { font-style: italic; color: var(--terra); }

.process-steps {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top: 1px solid var(--line2);
}
.process-step {
  padding: 36px 32px 36px 0; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.process-step:last-child { border-right: none; padding-right: 0; }
.process-step:first-child { padding-left: 0; }
.step-num {
  font-family: var(--ff-mono); font-size: 11px; color: var(--terra); letter-spacing: 0.1em;
}
.step-name {
  font-family: var(--ff-disp); font-size: 19px; font-weight: 300; line-height: 1.12; letter-spacing: -0.01em;
}
.step-desc { font-family: var(--ff-body); font-size: 14px; color: var(--faint); line-height: 1.62; max-width: 240px; margin: 0; }


/* ============================================================
   CONTACTO
============================================================ */
.contact-section {
  padding: clamp(72px,9vw,120px) var(--mx);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.contact-container { max-width: 640px; }

.contact-title {
  font-family: var(--ff-disp); font-size: clamp(40px,6vw,88px); font-weight: 300;
  line-height: 0.94; letter-spacing: -0.03em; margin-bottom: 24px; margin-top: 10px;
}
.contact-title em { font-style: italic; color: var(--terra); }

.contact-body {
  font-family: var(--ff-body); font-size: 16px; color: var(--faint); line-height: 1.7; margin-bottom: 44px;
}

.contact-actions { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--terra); color: var(--paper);
  padding: 14px 24px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--terra);
  transition: background .22s, color .22s;
}
.btn-whatsapp:hover { background: transparent; color: var(--terra); }
.wa-icon { width: 18px; height: 18px; flex-shrink: 0; }

.contact-links { display: flex; align-items: center; gap: 10px; }
.contact-link {
  font-family: var(--ff-body); font-size: 14px; color: var(--faint);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.contact-link:hover { color: var(--ink); border-bottom-color: var(--line2); }
.contact-dot { color: var(--line2); font-size: 14px; }


/* ============================================================
   PIE DE PAGINA
============================================================ */
.site-footer {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 26px var(--mx);
  border-top: 1px solid var(--line);
  background: var(--desk);
}
.footer-brand { font-family: var(--ff-disp); font-weight: 300; font-size: 13px; letter-spacing: -0.01em; }
.footer-sep { color: var(--line2); font-size: 12px; }
.footer-loc, .footer-year {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}


/* ============================================================
   MODAL
============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(26,24,21,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-in-out);
}
.modal-backdrop.visible { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column;
  background: var(--paper); opacity: 0; pointer-events: none;
  transform: translateY(16px);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
.modal.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Barra superior del modal */
.modal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 24px;
  border-bottom: 1px solid var(--line2); background: var(--paper);
  flex-shrink: 0; gap: 16px;
}
.modal-topbar-info { display: flex; align-items: center; gap: 12px; overflow: hidden; }
.modal-num-label { font-family: var(--ff-mono); font-size: 10px; color: var(--faint); white-space: nowrap; }
.modal-name-label {
  font-family: var(--ff-disp); font-size: 16px; font-weight: 300; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.modal-swatches { display: flex; gap: 4px; }
.modal-swatches .swatch { width: 12px; height: 12px; }
.modal-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.modal-nav, .modal-close-btn {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); padding: 8px 14px; border: 1px solid var(--line2);
  transition: background .2s, color .2s, border-color .2s; white-space: nowrap;
}
.modal-nav:hover, .modal-close-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Fondo del marco del celular en modal */
.modal-frame {
  flex: 1; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--paper-2) 0%, var(--desk) 60%, color-mix(in oklab, var(--desk) 85%, var(--ink)) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px; min-height: 0;
}

/* Celular principal (modal) — lámina técnica */
.phone {
  position: relative;
  height: 100%; max-height: 860px;
  aspect-ratio: 390 / 844;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 46px;
  padding: 11px;
  box-shadow: var(--lift-hi);
  flex-shrink: 0;
  transition: border-color .25s;
}
/* Pastilla (altavoz) */
.phone::before {
  content: "";
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 3px;
  background: var(--ink); opacity: .45; z-index: 6;
}
/* Ocultar la isla dinámica anterior */
.phone-island { display: none; }

.phone-screen {
  width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden;
  background: var(--paper); position: relative;
}
.phone-screen iframe { width: 100%; height: 100%; border: none; display: block; }

/* CTA inferior modal */
.modal-bottombar {
  padding: 12px 24px 13px;
  border-top: 1px solid var(--line2);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  background: var(--paper); flex-shrink: 0;
}
.modal-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper); background: var(--terra);
  padding: 11px 34px; border: 1px solid var(--terra);
  transition: background .2s, color .2s; white-space: nowrap;
}
.modal-cta-btn:hover { background: transparent; color: var(--terra); }
.cta-fig { width: 12px; height: 12px; flex-shrink: 0; }

/* Acciones secundarias: fila minimalista de botones-icono color-codificados */
.cz-actions {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 2px;
}
.cz-act {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); background: transparent; border: 1px solid transparent;
  padding: 7px 12px; transition: color .2s, background .2s;
}
.cz-act:hover { color: var(--ink); background: var(--hair); }
.cz-act:disabled { opacity: .4; cursor: not-allowed; }
.cz-act:disabled:hover { background: transparent; color: var(--ink-soft); }
.cz-act-fig { width: 15px; height: 15px; flex-shrink: 0; color: var(--fig, var(--ink-mid)); }
.cz-act--wa    { --fig: var(--menta); }
.cz-act--save  { --fig: var(--mostaza); }
.cz-act--undo  { --fig: var(--pizarra); }
.cz-act--reset { --fig: var(--coral); }


/* ============================================================
   BARRA INFERIOR FIJA
============================================================ */
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  height: 52px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform .4s var(--ease-out);
}
.bottom-bar.visible { transform: translateY(0); }
.bottom-brand { font-family: var(--ff-disp); font-size: 15px; font-weight: 300; }

.bottom-menu-btn {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); padding: 8px 0;
}
.bottom-menu-label { }
.bottom-menu-icon { display: flex; flex-direction: column; gap: 4px; }
.bottom-menu-icon span { display: block; width: 18px; height: 1px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .3s; }
.bottom-menu-btn.open .bottom-menu-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.bottom-menu-btn.open .bottom-menu-icon span:nth-child(2) { opacity: 0; }


/* ============================================================
   MENU PANTALLA COMPLETA
============================================================ */
.fs-menu {
  position: fixed; inset: 0; z-index: 500;
  background: var(--paper); display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
.fs-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.fs-close {
  position: absolute; top: 20px; right: 22px;
  font-size: 20px; color: var(--faint); transition: color .2s;
}
.fs-close:hover { color: var(--ink); }

.fs-menu-inner {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 60px var(--mx);
}
.fs-links { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fs-link-item { opacity: 0; transform: translateY(16px); }
.fs-menu.open .fs-link-item { opacity: 1; transform: translateY(0); transition: opacity .4s var(--ease-out) calc(0.04s * var(--i)), transform .4s var(--ease-out) calc(0.04s * var(--i)); }
.fs-link {
  font-family: var(--ff-disp); font-size: clamp(32px,7vw,62px); font-weight: 300;
  letter-spacing: -0.02em; color: var(--ink); display: flex; align-items: baseline; gap: 16px;
  transition: color .2s;
}
.fs-link:hover { color: var(--terra); }
.fs-index { font-family: var(--ff-mono); font-size: 11px; color: var(--faint); letter-spacing: 0.12em; }

.fs-foot {
  display: flex; gap: 24px; flex-wrap: wrap; margin-top: 48px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.fs-foot-link {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); transition: color .2s;
}
.fs-foot-link:hover { color: var(--terra); }
.fs-foot-loc {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
}


/* ============================================================
   RESPONSIVE: TABLET (max 1024px)
============================================================ */
@media (max-width: 1024px) {
  .catalog-grid { grid-template-columns: repeat(2,1fr); gap: 32px 24px; padding: 48px var(--mx) 72px; }
  .process-steps { grid-template-columns: repeat(2,1fr); }
  .process-step { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 24px; }
  .process-step:nth-child(2n) { border-right: none; }
  .process-step:nth-child(n+3) { border-bottom: none; }
  .process-step:last-child { border-right: none; padding-right: 24px; }
  .process-step:first-child { padding-left: 0; }
  .hero-stage { height: 580px; }
}


/* ============================================================
   RESPONSIVE: MOBILE (max 680px)
============================================================ */
@media (max-width: 680px) {
  :root { --masthead-h: 52px; }

  .masthead { grid-template-columns: 1fr auto; padding: 0 20px; }
  .nav-left, .nav-right { display: none; }
  .nav-hamburger { display: flex; }
  .brand-mark { justify-self: start; }

  .hero-fan { --phoneW: 232px; gap: 16px; }
  .hero-stage { height: 540px; }

  .filter-section { padding: 0 16px; }
  .filter-btn { padding: 16px 12px; font-size: 9px; }

  .catalog-grid { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 64px; }

  .process-section { padding: 64px 20px; }
  .process-steps { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid var(--line); padding: 24px 0; }
  .process-step:last-child { border-bottom: none; }
  .step-desc { max-width: 100%; }

  .contact-section { padding: 64px 20px; }
  .btn-whatsapp { font-size: 10px; padding: 13px 18px; }

  .modal-topbar { padding: 8px 16px; height: auto; min-height: 52px; flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
  .modal-topbar-info { display: none; }
  .modal-nav .btn-text, .modal-close-btn .btn-text { display: none; }
  .modal-nav, .modal-close-btn { padding: 8px 11px; font-size: 12px; }
  .modal-bottombar { padding: 10px 16px 12px; }
  .modal-cta-btn { font-size: 10px; padding: 9px 16px; }
  /* Acciones en rejilla 2x2 balanceada en movil */
  .cz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; width: 100%; max-width: 300px; }
  .cz-act { justify-content: center; padding: 8px 6px; }

  /* En movil: celular ocupa toda la pantalla */
  .modal-frame { padding: 0; background: var(--desk); }
  .phone {
    width: 100%; height: 100%; max-height: none;
    aspect-ratio: auto; border-radius: 0; padding: 0;
    box-shadow: none; border: none;
  }
  .phone::before { display: none; }
  .phone-screen { border-radius: 0; }

  .site-footer { flex-wrap: wrap; gap: 8px; padding: 18px 20px; }
  .incluye-pin { padding: 72px 20px; }
  .incluye-grid { grid-template-columns: 1fr; }
  .feature { padding: 32px 0 0; }
  .iv-count { gap: 22px; }
}


/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .iv-mini-bar, .iv-mini-names em, .iv-sw-ring, .iv-pin-pulse { animation: none !important; }
  .hero-stage { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fan-card { transition: none !important; opacity: 1 !important; }
  html { scroll-behavior: auto !important; }
  .masthead { transition: none; }
}