/* ============================================================
   SavaSpin — hoja de estilos
   ============================================================ */

/* ---- tokens ---- */
:root {
  --k-root: #011313;
  --k-spot: #53f8f2;
  --k-accent-pressed: #25f0f3;
  --k-surface: #011414;
  --k-raised: #072120;
  --k-copy: #FFFFFF;
  --k-soft-text: #bfbfbf;
  --k-rule: #123c3a;
  --k-line-strong: #1d5f5b;
  --k-blend-a: #c3fcfa;
  --k-fade-bottom: #7bf9f5;
  --k-rg-banner: #a71e34;

  --s-step-0: 4px;
  --s-step-1: 7px;
  --s-step-2: 11px;
  --s-step-3: 17px;
  --s-step-4: 26px;
  --s-step-5: 40px;
  --s-step-6: 60px;
  --s-step-7: 90px;

  --r-stadium: 9999px;
  --r-dot: 50%;
  --r-step-0: 2px;
  --r-step-1: 4px;
  --r-step-2: 8px;
  --r-step-3: 12px;
  --r-step-4: 20px;
  --r-step-5: 26px;
  --r-step-6: 34px;
  --r-step-7: 44px;

  --f-head: 'Syne', 'Trebuchet MS', sans-serif;
  --f-prose: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --z-display-1: clamp(31px, 4.4vw, 60px);
  --z-display-2: clamp(24px, 2.6vw, 34px);
  --z-lg-2: 24px;
  --z-md-2: 19px;
  --z-sm-2: 16px;
  --z-xs-2: 14px;
  --z-reading: 16px;
  --z-petite: 13px;
  --z-legal: 10px;

  --l-compact: 1.15;
  --l-even: 1.5;
  --l-relaxed: 1.65;

  --w-regular: 400;
  --w-demi: 600;
  --w-thick: 800;

  --e-packed: -0.02em;
  --e-regular: 0;
  --e-wide: 0.06em;

  --d-step-0: 0 1px 1px rgba(0, 0, 0, 0.18);
  --d-step-1: 0 1px 2px rgba(0, 0, 0, 0.24);
  --d-step-2: 0 2px 6px rgba(0, 0, 0, 0.3);
  --d-step-3: 0 6px 18px rgba(0, 0, 0, 0.38);
  --d-step-4: 0 12px 32px rgba(0, 0, 0, 0.46);
  --d-step-5: 0 18px 44px rgba(0, 0, 0, 0.5);
  --d-step-6: 0 24px 60px rgba(0, 0, 0, 0.55);
  --d-step-7: 0 32px 80px rgba(0, 0, 0, 0.6);

  --t-fast: 197ms;
  --t-steady: 350ms;
  --t-slow: 661ms;
  --x-settle: cubic-bezier(0.16, 0.71, 0.43, 0.95);
  --x-start: cubic-bezier(0.47, 0.05, 0.71, 0.44);
  --x-both: cubic-bezier(0.53, 0.07, 0.53, 0.92);
  --x-spring: cubic-bezier(0.43, 1.65, 0.72, 1.2);

  --v-full: 1300px;
  --v-inner: 500px;
  --v-inset-desktop: 48px;
  --v-pad-md: 32px;
  --v-edge-narrow: 16px;

  --b-slim: 1px;
  --b-regular: 2px;
  --b-bold: 3px;

  --h-height-desktop: 84px;
  --h-h-sm: 66px;
  --belt-h: 54px;
}

/* ---- fuentes propias ---- */
@font-face {
  font-family: 'Syne';
  src: url('/media/syne-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('/media/syne-800.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/media/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/media/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/media/inter-600.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ---- base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--k-surface);
  color: var(--k-copy);
  font-family: var(--f-prose);
  font-size: var(--z-reading);
  font-weight: var(--w-regular);
  line-height: var(--l-even);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
  margin: 0 0 var(--s-step-3);
}

h1 {
  font-family: var(--f-head);
  font-size: var(--z-display-1);
  font-weight: var(--w-thick);
  letter-spacing: var(--e-packed);
  line-height: var(--l-compact);
  text-transform: uppercase;
}

h2 {
  font-family: var(--f-head);
  font-size: var(--z-display-2);
  font-weight: var(--w-demi);
  letter-spacing: var(--e-regular);
  line-height: var(--l-compact);
  margin-block-start: var(--s-step-4);
}

h3 {
  font-family: var(--f-prose);
  font-size: var(--z-lg-2);
  font-weight: var(--w-demi);
  line-height: var(--l-compact);
}

h4 {
  font-family: var(--f-prose);
  font-size: var(--z-md-2);
  font-weight: var(--w-demi);
}

h5, h6 {
  font-family: var(--f-prose);
  font-size: var(--z-sm-2);
  font-weight: var(--w-demi);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
}

h6 { font-size: var(--z-xs-2); }

p { margin: 0 0 var(--s-step-3); }

img { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 var(--s-step-3); padding-inline-start: var(--s-step-4); }

li { margin-block-end: var(--s-step-1); }

a { color: var(--k-spot); }

strong { font-weight: var(--w-demi); color: var(--k-copy); }

table { border-collapse: collapse; }

/* ---- accesibilidad ---- */
.skip-hop {
  position: absolute;
  left: var(--s-step-2);
  z-index: 200;
  padding: var(--s-step-2) var(--s-step-3);
  background: var(--k-spot);
  color: var(--k-root);
  border-radius: var(--r-step-2);
  font-weight: var(--w-demi);
  text-decoration: none;
}

.skip-hop:not(:focus) { top: -200px !important; }

.skip-hop:focus { top: var(--s-step-2); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: var(--b-regular) solid var(--k-spot);
  outline-offset: 2px;
}

/* ---- contenedor único de todas las secciones ---- */
.reel-plus-wrap,
.buttress-fine-wrap,
.gangway-fresh-wrap,
.credenza-bright-wrap,
.belfry-core-wrap,
.coffre-bold-wrap,
.cresset-apex-wrap,
.tableau-bold-wrap,
.marque-raw-wrap,
.tile-solid-wrap,
.cartouche-fresh-wrap,
.alcove-neat-wrap,
.lozenge-signal-wrap,
.parapet-fine-wrap,
.carnet-modern-wrap,
.spandrel-light-wrap {
  width: 100%;
  max-width: calc(var(--v-full) + 2 * var(--v-inset-desktop));
  margin-inline: auto;
  padding-inline: var(--v-inset-desktop);
}

/* ---- cabecera: fila principal + franja de secciones ---- */
.reel-plus {
  position: relative;
  z-index: 60;
  background: var(--k-root);
  box-shadow: var(--d-step-2);
}

.reel-plus-crown {
  display: flex;
  align-items: center;
  gap: var(--s-step-4);
  min-height: var(--h-height-desktop);
  padding-block: var(--s-step-2);
}

.reel-plus-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--s-step-1) var(--s-step-4);
  background: var(--k-raised);
  border: var(--b-slim) solid var(--k-rule);
  border-radius: var(--r-dot);
}

.reel-plus-shot {
  flex-shrink: 0;
  display: block;
  width: auto;
  height: 44px;
  object-fit: contain;
}

.reel-plus-routes { margin-inline-start: auto; }

.reel-plus-series {
  display: flex;
  align-items: center;
  gap: var(--s-step-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reel-plus-node { margin: 0; }

.reel-plus-hop {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-step-2);
  color: var(--k-copy);
  font-size: 13px;
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: var(--e-wide);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast) var(--x-settle);
}

.reel-plus-hop::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 10px;
  height: var(--b-regular);
  background: var(--k-spot);
  transition: left var(--t-fast) var(--x-settle), right var(--t-fast) var(--x-settle);
}

.reel-plus-hop:hover,
.reel-plus-hop:focus-visible { color: var(--k-spot); }

.reel-plus-hop:hover::after,
.reel-plus-hop:focus-visible::after,
.reel-plus-hop[aria-current='page']::after {
  left: var(--s-step-2);
  right: var(--s-step-2);
}

.reel-plus-hop[aria-current='page'] { color: var(--k-spot); }

.reel-plus-belt {
  border-block-start: var(--b-slim) solid var(--k-rule);
  background: var(--k-surface);
}

.reel-plus-belt .reel-plus-series {
  height: 54px;
  gap: var(--s-step-4);
  justify-content: flex-start;
  overflow: hidden;
}

.reel-plus-belt .reel-plus-hop {
  min-height: 40px;
  padding-inline: 0;
  color: var(--k-soft-text);
}

.reel-plus-belt .reel-plus-hop::after { bottom: 6px; }

.reel-plus-belt .reel-plus-hop:hover,
.reel-plus-belt .reel-plus-hop:focus-visible,
.reel-plus-belt .reel-plus-hop[aria-current='page'] { color: var(--k-spot); }

.reel-plus-opener {
  display: none;
  align-items: center;
  gap: var(--s-step-1);
  margin-left: auto !important;
  min-height: 44px;
  padding: var(--s-step-1) var(--s-step-2);
  background: none;
  border: 0;
  color: var(--k-copy);
  font-family: var(--f-prose);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.reel-plus-opener span { white-space: nowrap; }

.reel-plus-opener svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.reel-plus-pane {
  display: none;
  border-block-start: var(--b-slim) solid var(--k-rule);
  background: var(--k-root);
}

.reel-plus-pane.is-open { display: block; }

.reel-plus-pane .reel-plus-series {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: auto;
  max-height: 68vh;
  overflow-y: auto;
  padding-block: var(--s-step-2);
}

.reel-plus-pane .reel-plus-hop {
  width: 100%;
  padding-block: var(--s-step-2);
  padding-inline: 0;
  border-block-end: var(--b-slim) solid var(--k-rule);
}

.reel-plus-pane .reel-plus-hop::after { display: none; }

/* ---- franja 18+ ---- */
.rg-banner {
  margin: 0;
  padding: var(--s-step-1) var(--v-edge-narrow);
  background: var(--k-rg-banner);
  color: var(--k-copy);
  font-size: var(--z-petite);
  line-height: 1.4;
  text-align: center;
}

.rg-banner a {
  color: var(--k-copy);
  text-underline-offset: 3px;
}

.rg-mark {
  display: inline-block;
  margin-inline-end: var(--s-step-1);
  padding: 1px 6px;
  border: var(--b-slim) solid currentColor;
  border-radius: var(--r-stadium);
  font-weight: var(--w-demi);
  font-size: var(--z-legal);
  letter-spacing: var(--e-wide);
}

/* ---- botones base ---- */
.pv-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-step-1);
  min-height: 48px;
  padding: var(--s-step-2) var(--s-step-4);
  background: var(--k-spot);
  color: var(--k-root);
  border: var(--b-regular) solid var(--k-spot);
  border-radius: var(--r-step-3);
  font-family: var(--f-head);
  font-size: var(--z-sm-2);
  font-weight: var(--w-thick);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--x-settle), color var(--t-fast) var(--x-settle);
}

.pv-key:hover,
.pv-key:focus-visible {
  background: var(--k-accent-pressed);
  color: var(--k-root);
}

.pv-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-step-2) var(--s-step-4);
  background: transparent;
  color: var(--k-spot);
  border: var(--b-regular) solid var(--k-line-strong);
  border-radius: var(--r-step-3);
  font-family: var(--f-head);
  font-size: var(--z-sm-2);
  font-weight: var(--w-thick);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--x-settle), color var(--t-fast) var(--x-settle);
}

.pv-ghost:hover,
.pv-ghost:focus-visible {
  background: var(--k-raised);
  color: var(--k-blend-a);
}

.pv-terms {
  display: block;
  margin-block-start: var(--s-step-2);
  color: var(--k-soft-text);
  font-size: var(--z-petite);
  line-height: 1.45;
}

.pv-push {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-step-1);
  margin-block: var(--s-step-5);
  text-align: center;
}

/* ---- primer pliegue ---- */
.gangway-fresh {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--k-root) 0%, var(--k-surface) 68%);
  border-block-end: var(--b-slim) solid var(--k-rule);
}

.gangway-fresh-wrap {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding-block: var(--s-step-6) var(--s-step-5);
}

.gangway-fresh-matter {
  position: relative;
  z-index: 2;
  width: 46%;
}

.gangway-fresh-matter h1 {
  font-size: clamp(28px, 3.1vw, 44px);
  margin-block-end: var(--s-step-4);
}

.gangway-fresh-subtitle {
  max-width: var(--v-inner);
  margin-block-end: var(--s-step-4);
  color: var(--k-soft-text);
  font-size: var(--z-sm-2);
  line-height: var(--l-relaxed);
}

.gangway-fresh-plate {
  position: absolute;
  top: -40px;
  right: 0;
  z-index: 1;
  width: 52%;
  height: calc(100% + 80px);
  margin: 0;
  border-radius: var(--r-step-4);
  overflow: hidden;
  box-shadow: var(--d-step-4);
  transform: rotate(2deg);
  transition: transform var(--t-slow) var(--x-settle);
}

.gangway-fresh:hover .gangway-fresh-plate { transform: rotate(0deg) scale(1.02); }

.gangway-fresh-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- cabecera de página interior ---- */
.credenza-bright {
  background: var(--k-root);
  border-block-end: var(--b-slim) solid var(--k-rule);
}

.credenza-bright-wrap { padding-block: var(--s-step-5); }

.credenza-bright-series {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-step-1);
  margin: 0 0 var(--s-step-3);
  padding: 0;
  list-style: none;
}

.credenza-bright-chip {
  display: inline-block;
  margin: 0;
  padding: var(--s-step-0) var(--s-step-2);
  background: var(--k-raised);
  color: var(--k-copy);
  border: var(--b-slim) solid var(--k-rule);
  border-radius: var(--r-stadium);
  font-size: var(--z-legal);
  font-weight: var(--w-demi);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
}

.credenza-bright-prose {
  margin: 0;
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

/* ---- texto corrido, centrado ---- */
.marque-raw { background: var(--k-surface); }

.marque-raw-wrap {
  padding-block: var(--s-step-5);
  text-align: center;
}

.marque-raw-wrap h2 {
  font-size: var(--z-lg-2);
  font-weight: var(--w-demi);
  margin-block-start: 0;
  margin-block-end: var(--s-step-3);
}

.marque-raw-wrap p {
  margin-block-end: var(--s-step-4);
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

.marque-raw-wrap p:last-child { margin-block-end: 0; }

.marque-raw-wrap a {
  color: var(--k-spot);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% var(--b-slim);
  background-position: 50% 100%;
  transition: background-size var(--t-fast) var(--x-settle);
}

.marque-raw-wrap a:hover,
.marque-raw-wrap a:focus-visible { background-size: 100% var(--b-slim); }

.marque-raw-wrap ul,
.marque-raw-wrap ol {
  display: inline-block;
  margin-block-end: var(--s-step-4);
  color: var(--k-soft-text);
  text-align: left;
}

.marque-raw-plate {
  margin: 0 0 var(--s-step-4);
  border-radius: var(--r-step-4);
  overflow: hidden;
  border: var(--b-slim) solid var(--k-rule);
}

.marque-raw-shot {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
}

/* ---- tarjetas en carril horizontal ---- */
.belfry-core { background: var(--k-root); }

.belfry-core-wrap { padding-block: var(--s-step-5); }

.belfry-core-rail {
  display: flex;
  gap: var(--s-step-3);
  margin: 0;
  padding: var(--s-step-1) 0 var(--s-step-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--k-line-strong) transparent;
}

.belfry-core-slab {
  flex: 0 0 320px;
  min-height: 200px;
  margin: 0;
  padding: var(--s-step-3);
  background: var(--k-raised);
  border: var(--b-slim) solid var(--k-rule);
  border-radius: var(--r-step-3);
  scroll-snap-align: start;
  transition: border-color var(--t-fast) var(--x-settle);
}

.belfry-core-slab:hover { border-color: var(--k-spot); }

.belfry-core-glyph {
  display: block;
  width: 30px;
  height: 30px;
  margin-block-end: var(--s-step-2);
  fill: none;
  stroke: var(--k-spot);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.belfry-core-banner {
  font-size: var(--z-md-2);
  margin-block-end: var(--s-step-2);
}

.belfry-core-prose {
  margin: 0;
  color: var(--k-soft-text);
  font-size: var(--z-petite);
  line-height: var(--l-relaxed);
}

.belfry-core-dots {
  display: flex;
  gap: var(--s-step-1);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.belfry-core-dot {
  width: 7px;
  height: 7px;
  margin: 0;
  background: var(--k-line-strong);
  border-radius: var(--r-dot);
}

/* ---- tabla ---- */
.tile-solid { background: var(--k-surface); }

.tile-solid-wrap { padding-block: var(--s-step-5); }

.tile-solid-frame {
  border-radius: var(--r-step-3);
  border: var(--b-slim) solid var(--k-rule);
  overflow-x: auto;
  background: var(--k-raised);
}

.tile-solid-frame table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.tile-solid-frame th {
  padding: var(--s-step-3);
  background: var(--k-root);
  color: var(--k-spot);
  font-family: var(--f-prose);
  font-size: var(--z-xs-2);
  font-weight: var(--w-demi);
  letter-spacing: var(--e-wide);
  text-align: left;
  text-transform: uppercase;
}

.tile-solid-frame td {
  padding: var(--s-step-3);
  color: var(--k-soft-text);
  font-size: var(--z-petite);
  vertical-align: top;
}

.tile-solid-frame td:first-child {
  color: var(--k-copy);
  font-weight: var(--w-demi);
}

.tile-solid-frame tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

.tile-solid-frame tbody tr { transition: background-color var(--t-fast) var(--x-settle); }

.tile-solid-frame tbody tr:hover { background: rgba(255, 255, 255, 0.05); }

.tile-solid-note {
  margin: var(--s-step-2) 0 0;
  color: var(--k-soft-text);
  font-size: var(--z-petite);
}

/* ---- preguntas ---- */
.coffre-bold { background: var(--k-root); }

.coffre-bold-wrap { padding-block: var(--s-step-5); }

.coffre-bold-box {
  padding: var(--s-step-4);
  background: var(--k-raised);
  border: var(--b-slim) solid var(--k-rule);
  border-radius: var(--r-step-4);
}

.coffre-bold-series {
  margin: 0;
  padding: 0;
  list-style: none;
}

.coffre-bold-node {
  margin: 0;
  padding-inline-start: var(--s-step-3);
  border-block-end: var(--b-slim) solid var(--k-rule);
  box-shadow: inset 4px 0 0 var(--k-spot);
}

.coffre-bold-node:last-child { border-block-end: 0; }

.coffre-bold-ask {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-step-3);
  padding-block: var(--s-step-3);
  cursor: pointer;
  list-style: none;
}

.coffre-bold-ask::-webkit-details-marker { display: none; }

.coffre-bold-ask h3 {
  margin: 0;
  font-size: var(--z-sm-2);
  font-weight: var(--w-demi);
}

.coffre-bold-ask::after {
  content: '+';
  flex-shrink: 0;
  color: var(--k-spot);
  font-family: var(--f-head);
  font-size: var(--z-lg-2);
  line-height: 1;
}

.coffre-bold-node[open] .coffre-bold-ask::after { content: '–'; }

.coffre-bold-reply {
  margin: 0;
  padding-block-end: var(--s-step-3);
  padding-inline-end: var(--s-step-4);
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

/* ---- opiniones ---- */
.cresset-apex { background: var(--k-surface); }

.cresset-apex-wrap { padding-block: var(--s-step-5); }

.cresset-apex-series {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cresset-apex-node {
  margin: 0;
  padding-block: var(--s-step-3);
  border-block-end: var(--b-slim) dotted var(--k-line-strong);
}

.cresset-apex-bar {
  margin: 0 0 var(--s-step-1);
  color: var(--k-copy);
  font-size: var(--z-reading);
  font-weight: var(--w-demi);
}

.cresset-apex-score {
  color: var(--k-soft-text);
  font-weight: var(--w-regular);
}

.cresset-apex-prose {
  margin: 0;
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

.cresset-apex-sum {
  margin: 0 0 var(--s-step-4);
  color: var(--k-spot);
  font-family: var(--f-head);
  font-size: var(--z-md-2);
  font-weight: var(--w-demi);
}

/* ---- llamada final ---- */
.tableau-bold { background: var(--k-root); }

.tableau-bold-wrap {
  padding-block: var(--s-step-6);
  text-align: center;
}

.tableau-bold-statement {
  position: relative;
  max-width: calc(var(--v-inner) * 1.8);
  margin: 0 auto var(--s-step-4);
  padding-block-start: var(--s-step-4);
}

.tableau-bold-statement::before {
  content: '“';
  display: block;
  color: var(--k-spot);
  font-family: var(--f-head);
  font-size: 72px;
  line-height: 0.6;
}

.tableau-bold-statement p {
  margin: 0;
  font-family: var(--f-head);
  font-size: var(--z-display-1);
  font-style: italic;
  font-weight: var(--w-demi);
  line-height: var(--l-compact);
}

.tableau-bold-subtitle {
  max-width: var(--v-inner);
  margin: 0 auto var(--s-step-4);
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

.tableau-bold-hop {
  display: inline-flex;
  align-items: center;
  gap: var(--s-step-1);
  min-height: 48px;
  color: var(--k-spot);
  font-family: var(--f-head);
  font-size: var(--z-sm-2);
  font-weight: var(--w-thick);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: color var(--t-fast) var(--x-settle);
}

.tableau-bold-hop:hover,
.tableau-bold-hop:focus-visible { color: var(--k-blend-a); }

/* ---- páginas legales ---- */
.cartouche-fresh { background: var(--k-surface); }

.cartouche-fresh-wrap { padding-block: var(--s-step-5); }

.cartouche-fresh-chip {
  display: block;
  margin-block-end: var(--s-step-2);
  color: var(--k-spot);
  font-size: var(--z-legal);
  font-weight: var(--w-demi);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
}

.cartouche-fresh-lede {
  margin-block-end: var(--s-step-5);
  color: var(--k-copy);
  font-family: var(--f-head);
  font-size: var(--z-md-2);
  font-style: italic;
  line-height: var(--l-even);
}

.cartouche-fresh-part { margin-block-end: var(--s-step-5); }

.cartouche-fresh-part h3 {
  margin-block-end: var(--s-step-2);
  font-family: var(--f-head);
  font-size: var(--z-lg-2);
  font-style: italic;
}

.cartouche-fresh-line {
  width: 80px;
  height: 0;
  margin: 0 0 var(--s-step-3);
  border: 0;
  border-block-start: var(--b-regular) solid var(--k-spot);
}

.cartouche-fresh-part p {
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

.cartouche-fresh-part p:first-of-type::first-letter {
  float: left;
  margin-inline-end: var(--s-step-1);
  color: var(--k-spot);
  font-family: var(--f-head);
  font-size: 3em;
  font-weight: var(--w-thick);
  line-height: 0.86;
}

.cartouche-fresh-series {
  margin: 0 0 var(--s-step-4);
  padding-inline-start: var(--s-step-4);
  color: var(--k-soft-text);
}

.cartouche-fresh-note {
  padding: var(--s-step-3);
  background: var(--k-raised);
  border-inline-start: var(--b-bold) solid var(--k-rg-banner);
  border-radius: var(--r-step-2);
  color: var(--k-soft-text);
  font-size: var(--z-petite);
}

/* ---- formulario ---- */
.alcove-neat { background: var(--k-root); }

.alcove-neat-wrap { padding-block: var(--s-step-5); }

.alcove-neat-box {
  padding: var(--s-step-5);
  border: var(--b-regular) solid var(--k-spot);
  border-radius: var(--r-step-3);
}

.alcove-neat-prose {
  margin-block-end: var(--s-step-4);
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

.alcove-neat-cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-step-0);
  margin-block-end: var(--s-step-4);
}

.alcove-neat-chip {
  color: var(--k-soft-text);
  font-size: var(--z-petite);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
}

.alcove-neat-cell input,
.alcove-neat-cell textarea {
  padding: var(--s-step-2) 0;
  background: transparent;
  border: 0;
  border-block-end: var(--b-slim) solid var(--k-line-strong);
  color: var(--k-copy);
  font-family: var(--f-prose);
  font-size: var(--z-md-2);
}

.alcove-neat-cell textarea { min-height: 130px; resize: vertical; }

.alcove-neat-cell input:focus,
.alcove-neat-cell textarea:focus {
  outline: none;
  border-block-end-color: var(--k-spot);
}

.alcove-neat-line {
  display: none;
  margin-block-start: var(--s-step-3);
  padding: var(--s-step-2) var(--s-step-3);
  background: var(--k-raised);
  border-radius: var(--r-step-2);
  color: var(--k-copy);
}

.alcove-neat-line.is-open { display: block; }

.alcove-neat-mails {
  margin: var(--s-step-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--k-soft-text);
  font-size: var(--z-petite);
}

/* ---- ficha de autora ---- */
.lozenge-signal { background: var(--k-surface); }

.lozenge-signal-wrap {
  padding-block: var(--s-step-5);
  text-align: center;
}

.lozenge-signal-slab {
  max-width: calc(var(--v-inner) * 1.2);
  margin-inline: auto;
}

.lozenge-signal-headshot {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto var(--s-step-4);
  border-radius: var(--r-dot);
  object-fit: cover;
  object-position: center top;
}

.lozenge-signal-job {
  margin: 0 0 var(--s-step-1);
  color: var(--k-spot);
  font-size: var(--z-petite);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
}

.lozenge-signal-handle {
  margin: 0 0 var(--s-step-3);
  font-size: var(--z-display-2);
}

.lozenge-signal-bio {
  margin: 0 0 var(--s-step-3);
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

.lozenge-signal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-step-1);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lozenge-signal-chip {
  margin: 0;
  padding: var(--s-step-0) var(--s-step-2);
  background: var(--k-raised);
  border: var(--b-slim) solid var(--k-rule);
  border-radius: var(--r-stadium);
  color: var(--k-soft-text);
  font-size: var(--z-petite);
}

.lozenge-signal-articles {
  max-width: calc(var(--v-inner) * 1.44);
  margin: var(--s-step-6) auto 0;
  text-align: left;
}

.lozenge-signal-head {
  margin-block-start: 0;
  font-size: var(--z-lg-2);
}

.lozenge-signal-series {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lozenge-signal-node {
  margin: 0;
  border-block-end: var(--b-slim) solid var(--k-rule);
}

.lozenge-signal-node a {
  display: block;
  padding-block: var(--s-step-2);
  color: var(--k-copy);
  text-decoration: none;
  transition: color var(--t-fast) var(--x-settle);
}

.lozenge-signal-node a:hover,
.lozenge-signal-node a:focus-visible { color: var(--k-spot); }

.lozenge-signal-star {
  display: inline-block;
  margin-inline-end: var(--s-step-1);
  color: var(--k-spot);
}

/* ---- firma al final del artículo ---- */
.parapet-fine {
  background: var(--k-root);
  border-block-start: var(--b-slim) solid var(--k-rule);
}

.parapet-fine-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-step-2);
  padding-block: var(--s-step-3);
}

.parapet-fine-headshot {
  flex-shrink: 0;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--r-dot);
  overflow: hidden;
}

.parapet-fine-headshot img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: center top;
}

.parapet-fine-credit {
  margin: 0;
  color: var(--k-soft-text);
  font-size: var(--z-reading);
}

.parapet-fine-handle {
  color: var(--k-spot);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.parapet-fine-job {
  margin: var(--s-step-0) 0 0;
  color: var(--k-soft-text);
  font-size: var(--z-petite);
  font-style: italic;
}

/* ---- error 404 ---- */
.carnet-modern { background: var(--k-surface); }

.carnet-modern-wrap { padding-block: var(--s-step-6); }

.carnet-modern-slab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-step-3);
  max-width: var(--v-inner);
  margin-inline: auto;
  padding: var(--s-step-5);
  background: var(--k-raised);
  border: var(--b-regular) solid var(--k-spot);
  border-radius: var(--r-step-4);
  box-shadow: var(--d-step-3);
  text-align: center;
}

.carnet-modern-banner {
  margin: 0;
  font-size: var(--z-display-2);
}

.carnet-modern-prose {
  margin: 0;
  color: var(--k-soft-text);
  line-height: var(--l-relaxed);
}

/* ---- pie ---- */
.buttress-fine {
  background: var(--k-root);
  border-block-start: var(--b-slim) solid var(--k-rule);
}

.buttress-fine-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-step-5);
  padding-block: var(--s-step-6);
}

.buttress-fine-strip { min-width: 0; }

.buttress-fine-mark {
  display: inline-flex;
  margin-block-end: var(--s-step-3);
}

.buttress-fine-shot {
  display: block;
  width: auto;
  height: 46px;
}

.buttress-fine-prose {
  margin: 0;
  color: var(--k-soft-text);
  font-size: var(--z-petite);
  line-height: var(--l-relaxed);
}

.buttress-fine-head {
  margin-block-end: var(--s-step-3);
  color: var(--k-copy);
  font-family: var(--f-head);
  font-size: var(--z-xs-2);
  font-weight: var(--w-thick);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
}

.buttress-fine-series {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-step-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.buttress-fine-series-solo { grid-template-columns: 1fr; }

.buttress-fine-node { margin: 0; }

.buttress-fine-hop {
  color: var(--k-soft-text);
  font-size: var(--z-petite);
  text-decoration: none;
  transition: color var(--t-fast) var(--x-settle);
}

.buttress-fine-hop:hover,
.buttress-fine-hop:focus-visible { color: var(--k-spot); }

.buttress-fine-bottom {
  border-block-start: var(--b-slim) solid var(--k-rule);
}

.buttress-fine-bottom .buttress-fine-wrap {
  display: block;
  padding-block: var(--s-step-3);
  text-align: center;
}

.buttress-fine-bottom small {
  color: var(--k-soft-text);
  font-size: var(--z-legal);
  letter-spacing: var(--e-wide);
  text-transform: uppercase;
}

/* ---- aviso de cookies ---- */
.spandrel-light {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  background: var(--k-raised);
  border-block-start: var(--b-regular) solid var(--k-spot);
  box-shadow: var(--d-step-5);
  animation: spandrel-rise var(--t-steady) var(--x-settle) both;
}

@keyframes spandrel-rise {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.spandrel-light.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.spandrel-light-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-step-3);
  padding-block: var(--s-step-3);
}

.spandrel-light-line {
  margin: 0;
  color: var(--k-soft-text);
  font-size: var(--z-petite);
  line-height: var(--l-even);
}

.spandrel-light-actions {
  display: flex;
  align-items: center;
  gap: var(--s-step-2);
  margin-inline-start: auto;
  flex-shrink: 0;
}

.spandrel-light-hop {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--s-step-1);
  color: var(--k-spot);
  font-size: var(--z-petite);
  white-space: nowrap;
}

.spandrel-light-reject {
  min-width: 64px;
  min-height: 40px;
  padding: var(--s-step-1) var(--s-step-3);
  background: transparent;
  border: var(--b-slim) solid var(--k-line-strong);
  border-radius: var(--r-step-2);
  color: var(--k-copy);
  font-family: var(--f-prose);
  font-size: var(--z-petite);
  cursor: pointer;
}

.spandrel-light-confirm {
  min-width: 64px;
  min-height: 40px;
  padding: var(--s-step-1) var(--s-step-3);
  background: var(--k-spot);
  border: var(--b-slim) solid var(--k-spot);
  border-radius: var(--r-step-2);
  color: var(--k-root);
  font-family: var(--f-prose);
  font-size: var(--z-petite);
  font-weight: var(--w-demi);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--x-settle), color var(--t-fast) var(--x-settle);
}

.spandrel-light-confirm:hover,
.spandrel-light-confirm:focus-visible {
  background: var(--k-accent-pressed);
  color: var(--k-root);
}

/* ---- pantallas medianas ---- */
@media (max-width: 799px) {
  .reel-plus-routes,
  .reel-plus-belt { display: none; }

  .reel-plus-opener { display: inline-flex; }

  .reel-plus-crown { min-height: var(--h-h-sm); }
}

@media (max-width: 1099px) {
  .gangway-fresh-wrap {
    display: block;
    min-height: 0;
    padding-block: var(--s-step-5);
  }

  .gangway-fresh-matter { width: 100%; }

  .gangway-fresh-plate {
    position: static;
    width: 100%;
    height: auto;
    margin-block-start: var(--s-step-4);
    transform: none;
  }

  .gangway-fresh:hover .gangway-fresh-plate { transform: none; }

  .gangway-fresh-shot { height: clamp(220px, 42vw, 360px); }

  .buttress-fine-wrap {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-step-4);
  }

  .buttress-fine-strip-brand { grid-column: 1 / -1; }
}

@media (max-width: 1099px) and (min-width: 801px) {
  .reel-plus-wrap,
  .buttress-fine-wrap,
  .gangway-fresh-wrap,
  .credenza-bright-wrap,
  .belfry-core-wrap,
  .coffre-bold-wrap,
  .cresset-apex-wrap,
  .tableau-bold-wrap,
  .marque-raw-wrap,
  .tile-solid-wrap,
  .cartouche-fresh-wrap,
  .alcove-neat-wrap,
  .lozenge-signal-wrap,
  .parapet-fine-wrap,
  .carnet-modern-wrap,
  .spandrel-light-wrap { padding-inline: var(--v-pad-md); }
}

/* ---- pantallas estrechas ---- */
@media (max-width: 800px) {
  :root {
    --z-lg-2: 20px;
    --z-md-2: 17px;
    --z-sm-2: 14px;
    --z-xs-2: 12px;
    --z-reading: 15px;
    --z-petite: 12px;
    --z-legal: 9px;
  }

  .reel-plus-wrap,
  .buttress-fine-wrap,
  .gangway-fresh-wrap,
  .credenza-bright-wrap,
  .belfry-core-wrap,
  .coffre-bold-wrap,
  .cresset-apex-wrap,
  .tableau-bold-wrap,
  .marque-raw-wrap,
  .tile-solid-wrap,
  .cartouche-fresh-wrap,
  .alcove-neat-wrap,
  .lozenge-signal-wrap,
  .parapet-fine-wrap,
  .carnet-modern-wrap,
  .spandrel-light-wrap { padding-inline: var(--v-edge-narrow); }

  .reel-plus-mark { padding: var(--s-step-0) var(--s-step-3); }

  .reel-plus-shot { height: 26px; }

  .reel-plus-opener {
    gap: var(--s-step-0);
    padding-inline: var(--s-step-0);
    font-size: 11px;
  }

  .reel-plus-opener svg { width: 20px; height: 20px; }

  .belfry-core-slab { flex-basis: 260px; }

  .coffre-bold-box { padding: var(--s-step-3); }

  .tableau-bold-statement::before { font-size: 54px; }

  .alcove-neat-box { padding: var(--s-step-4); }

  .buttress-fine-wrap {
    grid-template-columns: 1fr;
    padding-block: var(--s-step-5);
  }

  .buttress-fine-shot { height: 38px; }

  .carnet-modern-wrap { padding-block: var(--s-step-6); }

  .lozenge-signal-headshot { width: 120px; height: 120px; }
}

@media (max-width: 720px) {
  .spandrel-light,
  .spandrel-light-wrap {
    padding: 12px 14px !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .spandrel-light-wrap {
    display: block;
    padding-inline: var(--v-edge-narrow) !important;
  }

  .spandrel-light-line { margin-block-end: 10px; }

  .spandrel-light-actions {
    margin-inline-start: 0;
    flex-wrap: wrap;
  }

  .spandrel-light-reject,
  .spandrel-light-confirm {
    flex: 1 1 auto;
    justify-content: center;
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }

  .spandrel-light-hop { flex: 1 1 100%; }
}

@media (max-width: 500px) {
  .gangway-fresh-wrap { padding-block: var(--s-step-4); }

  .marque-raw-wrap,
  .belfry-core-wrap,
  .coffre-bold-wrap,
  .cresset-apex-wrap,
  .tile-solid-wrap,
  .cartouche-fresh-wrap,
  .alcove-neat-wrap,
  .lozenge-signal-wrap { padding-block: var(--s-step-4); }

  .tableau-bold-wrap { padding-block: var(--s-step-5); }

  .belfry-core-slab { flex-basis: 236px; }
}

/* ---- movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- botón de oferta ---- */
.arch-pick{display:inline-flex;align-items:center;justify-content:center;padding:var(--s-step-2) var(--s-step-4);min-height:48px;border-radius:var(--r-step-3);border:var(--b-regular) solid var(--k-spot);font-size:var(--z-sm-2);font-weight:var(--w-thick);letter-spacing:var(--e-wide)}
.arch-pick{
  background:#F59E0B;color:#011313;text-decoration:none;text-transform:uppercase;
  transition:background var(--t-fast) var(--x-settle),border-color var(--t-fast) var(--x-settle);}
.arch-pick.arch-pick{color:#011313;text-decoration:none;}
.arch-pick:hover{background:#B45309;color:#FFFFFF;animation:none}
.arch-pick.arch-pick:hover{color:#FFFFFF;text-decoration:none}
.arch-pick:hover::after{animation:none}
.arch-pick:active{background:#92400E;color:#FFFFFF}
.arch-pick:focus-visible{outline:3px solid #011313;outline-offset:3px}
.arch-pick{animation:arch-sway 1.5s ease-in-out infinite}
@keyframes arch-sway{0%{transform:translate(0,0)}12.000%{transform:translate(4px,4px)}33.333%,100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.arch-pick,.arch-pick::after{animation:none!important;transition:none!important}}

/* ---- pantallas muy estrechas ---- */
@media (max-width: 360px) {
  .reel-plus-mark { padding: 3px var(--s-step-2); }

  .reel-plus-shot { height: 22px; }

  .reel-plus-crown { gap: var(--s-step-2); }

  .reel-plus-opener {
    font-size: 10px;
    letter-spacing: var(--e-regular);
  }

  .reel-plus-opener svg { width: 18px; height: 18px; }
}

@media (max-width: 831px) {
  .reel-plus-routes,
  .reel-plus-belt { display: none !important; }
  .reel-plus-opener { display: flex !important; }
}