/* =========================================================================
   COMPONENTS  — reconstructed from riangle.com styled-components
   Class names are semantic re-writes of the original ComponentName__Part.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TEXT PRIMITIVES
   ------------------------------------------------------------------------- */

/* mono micro-label: "SELECTED WORK", "SWITZERLAND", dates … */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.14em; /* optical: cancels the trailing tracking on the last glyph */
  color: var(--ink-muted);
}

/* eyebrow = mono-label with a short accent rule before it */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 1px;
  background: var(--refract);
}

/* index numbers: 01 / 02 … in the accent colour, tabular */
.index-number {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--refract);
}
.index-number--muted { color: var(--ink-faint); }

/* section headings */
.h-work {                         /* work titles, studio-panel type */
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.15rem + 2vw, 2.5rem);
  line-height: 1.08;
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.h-story {                        /* stories teaser titles */
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem);
  line-height: 1.2;
  font-variation-settings: "wdth" 100;
  font-weight: 550;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.h-display {                      /* positioning statement + CTA headline */
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.2rem + 5.6vw, 6.5rem);
  line-height: 1;
  font-variation-settings: "wdth" 108;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-left: -0.045em;         /* optical left-align of the cap */
  text-wrap: balance;
}

/* lead paragraph */
.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  word-spacing: 0.04em;
  color: var(--ink-muted);
}
.lead > span { display: block; }
.section-lead { margin-top: 20px; max-width: 48ch; }

/* short body / summary, clamped to 2 lines */
.summary {
  font-size: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 42ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* big stat number */
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 1.3rem + 3vw, 5rem);
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.9;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.14em;
  color: var(--ink-muted);
}

/* -------------------------------------------------------------------------
   2. LINKS + BUTTONS
   ------------------------------------------------------------------------- */

/* text link with an accent underline that wipes in from the left */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--refract);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms var(--ease-out);
}
.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* arrow link: mono caps + a glyph that nudges right on hover */
.arrow-link {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.14em;
  color: var(--ink);
}
.arrow-link .glyph { transition: transform 320ms var(--ease-out); }
.arrow-link:hover .glyph,
.arrow-link:focus-visible .glyph { transform: translateX(3px); }
.glyph--diag { transform: rotate(-45deg); }   /* external-link arrow */
.arrow-link:hover .glyph--diag { transform: rotate(-45deg) translateX(3px); }

/* solid primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  padding: 18px 30px 18px calc(0.14em + 30px);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--on-refract);
  background: var(--refract);
  border: 1px solid var(--refract);
  box-shadow: 0 0 0 0 var(--refract);
  transition: 0.3s;
}
.btn-primary:hover {
  background: var(--refract-strong);
  border-color: var(--refract-strong);
  box-shadow: 0 0 32px -8px color-mix(in srgb, var(--refract) 45%, transparent);
}
.btn-primary:focus-visible { box-shadow: 0 0 0 4px var(--refract-soft); }
.btn-primary:active { box-shadow: 0 0 0 2px var(--refract-soft); }

/* block link: whole card is the hit-target (::after stretched over parent) */
.block-link { display: block; color: inherit; }
.block-link::after { content: ""; position: absolute; inset: 0; }

/* -------------------------------------------------------------------------
   3. SITE HEADER
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: 70px;
  display: flex;
  align-items: center;
  padding-inline: var(--pad-inline);
  color: var(--header-ink);
  transition: transform 320ms var(--ease-inout);
}
.site-header::before {         /* frosted scrim, fades in once scrolled */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: var(--header-scrim);
  border-bottom: 1px solid var(--header-line);
  backdrop-filter: blur(20px) saturate(140%);
  transition: opacity 320ms var(--ease-inout);
}
.site-header[data-scrolled="true"]::before { opacity: 1; }
@supports not (backdrop-filter: blur(1px)) {
  .site-header::before { background: color-mix(in srgb, var(--surface-page) 96%, transparent); }
}

.site-header__bar {
  width: 100%;
  max-width: var(--max-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.site-header__brand svg { color: currentColor; }
.site-header__mark { display: block; flex-shrink: 0; }
.site-header__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  font-stretch: 108%;
  color: currentColor;
}

.site-nav { display: none; align-items: center; gap: 32px; }
.site-header__controls { display: flex; align-items: center; gap: 12px; }

@media (min-width: 992px) {
  .site-nav { display: flex; }
}

/* nav link: index number + a label that rolls up to a duplicate on hover */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 80%, transparent);
}
.nav-link:hover,
.nav-link:focus-visible { color: currentColor; }
.nav-link__index { font-variant-numeric: tabular-nums; opacity: 0.7; }
.nav-link__roll {
  display: flex;
  flex-direction: column;
  height: 1lh;
  overflow: hidden;
}
.nav-link__roll > span { display: block; }

/* animated red underline on hover, same wipe as .text-link */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--refract);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms var(--ease-out);
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* theme toggle: 56×30 pill, thumb slides on [data-theme=dark] */
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 56px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  background: var(--surface-2);
  transition: 0.3s;
}
.theme-toggle:hover { border-color: var(--refract); }
.theme-toggle:focus-visible { border-color: var(--refract); box-shadow: 0 0 0 4px var(--refract-soft); }
.theme-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--refract-soft) 20%, transparent);
  transition: 0.3s;
  z-index: 1;
}
:root[data-theme="dark"] .theme-toggle::after { transform: translateX(26px); }
.theme-toggle svg {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 2;
  stroke: var(--refract);
}
.theme-toggle:hover svg { stroke: var(--refract-strong); }

/* burger (mobile only) — two 1px bars */
.burger {
  position: relative;
  width: 44px;
  height: 44px;
  color: var(--header-ink);
}
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 13px;
  top: calc(50% - 0.5px);
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 320ms var(--ease-out);
}
.burger::before { transform: translateY(-3px); }
.burger::after { transform: translateY(3px); }
@media (min-width: 992px) {
  .burger { display: none; }
}

/* header CTA — visible at every width; shrinks on small screens so it
   still fits next to the theme toggle + burger */
.btn-header-cta {
  display: inline-flex;
  height: 38px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-refract);
  background: var(--refract);
  border: 1px solid var(--refract);
  transition: 0.3s;
}
.btn-header-cta:hover { background: var(--refract-strong); border-color: var(--refract-strong); }
@media (max-width: 480px) {
  .btn-header-cta {
    height: 32px;
    padding: 0 10px;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
  }
}

/* -------------------------------------------------------------------------
   4. MOBILE MENU OVERLAY  (static markup kept; open/close handled in JS)
   ------------------------------------------------------------------------- */
.menu-overlay {
  position: fixed;
  inset: 70px 0 0 0;
  z-index: 999;
  display: none;              /* toggled to flex by js/menu.js */
  flex-direction: column;
}
.menu-overlay[data-open] { display: flex; }
@media (min-width: 992px) { .menu-overlay { display: none !important; } }

.menu-overlay__glass {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface-page) 96%, transparent);
  backdrop-filter: blur(20px);
}
.menu-overlay__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4.5vw, 64px);
  padding: 0 var(--pad-inline) var(--pad-inline);
  overflow-y: auto;
}
.menu-overlay__item { border-bottom: 1px solid var(--line); }
.menu-overlay__item:last-child { border-bottom: 0; }
.menu-overlay__item > a { display: flex; width: 100%; padding-block: 24px; }
.menu-overlay__item--cta { border-bottom: 0; margin-top: 12px; }
.menu-overlay__item--cta > a {
  justify-content: center;
  padding-block: 18px;
  color: var(--on-refract);
  background: var(--refract);
}
.menu-overlay__foot { margin-top: auto; }

/* studio clock readout */
.studio-clock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0.14em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.studio-clock time { font-variant-numeric: tabular-nums; color: var(--ink); }

/* -------------------------------------------------------------------------
   5. SECTION SHELL
   ------------------------------------------------------------------------- */
.section {
  position: relative;
  width: 100%;
  padding-block: var(--pad-block);
  padding-inline: var(--pad-inline);
  /* no background here on purpose: it falls through to body's own
     --surface-page, which lets the fixed .bg-video show through a plain
     .section — .section--alt/--dark below still set their own */
}
.section--tight { padding-block: var(--pad-block-tight); }
.section--alt { background: var(--surface-2); }
.section--dark {
  background: var(--surface-page);
  color: var(--ink);
}
:root:not([data-theme="dark"]) .section--dark {
  /* the CTA band is always dark, even in light mode */
  background: #07080b;
  color: #edeff4;
}
.section__inner {
  width: 100%;
  max-width: var(--max-inner);
  margin-inline: auto;
}

/* full-bleed hairline that "draws" in on reveal */
.draw-rule {
  height: 1px;
  width: 100%;
  transform-origin: left center;
  background: var(--line);
}

/* thin brand-red fading divider (previously a rainbow gradient) */
.spectrum-rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--band-brand) 45%, transparent) 50%,
    transparent 100%
  );
}

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 70px var(--pad-inline) 96px;
  /* no background here on purpose — see .section above */
  color: var(--ink);
  overflow: hidden;
}

/* Hero background layer. Original mounted a WebGL "prism" here; we mount the
   animated red ribbon logo (.hero__logo — styled in animations.css). */
.hero__canvas-slot {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  container-type: size;
}

.hero__content {
  width: 100%;
  max-width: var(--max-wide);
  margin-inline: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* pushes the headline below the centred mark on small screens */
  padding-block-start: calc(35svh + min(32vw, 36svh) * 0.8949 - 70px + min(112px, 14svh));
}
@media (min-width: 768px) {
  .hero__content { padding-block-start: calc(35svh + min(24vw, 27svh) * 0.8949 - 70px + min(112px, 14svh)); }
}
@media (min-width: 992px) {
  .hero__content { align-items: flex-start; padding-block-start: 0; }
}

.hero__headline {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 0.85rem + 5.6vw, 6rem);
  line-height: 0.98;
  font-variation-settings: "wdth" 112;
  font-weight: 500;
  letter-spacing: -0.035em;
  margin-left: -0.045em;
  text-wrap: balance;
}
.hero__headline > span { display: block; }   /* one <span> per line — reveal targets */

.hero__lead {
  margin-top: clamp(20px, 2.4vw, 28px);
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: clamp(28px, 3.4vw, 40px);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--max-wide);
  margin-inline: auto;
  margin-top: clamp(28px, 8vw, 56px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.14em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.hero__meta-sep { color: var(--line-strong); }

/* scroll cue: a 1px track with a 6px accent segment falling through it */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
}
.hero__cue-track {
  position: relative;
  width: 1px;
  height: 40px;
  background: var(--line-strong);
  overflow: hidden;
}
.hero__cue-segment {
  width: 1px;
  height: 6px;
  background: var(--refract);
  animation: cue-fall 2.4s linear infinite;
}
@keyframes cue-fall {
  0%   { transform: translateY(0); }
  100% { transform: translateY(34px); }
}

/* -------------------------------------------------------------------------
   8. SELECTED WORK  (overlapping full-height rows, alternating sides)
   ------------------------------------------------------------------------- */
.selected-work__rows {
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding-top: 48px;
}
.work-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-top: 24px;
}
.work-row__media { grid-column: 1 / -1; }
.work-row__text  { grid-column: 1 / -1; }
@media (min-width: 768px) { .work-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .work-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: center;
    min-height: 76vh;
  }
  .work-row + .work-row { margin-top: -8vh; }        /* rows overlap on scroll */
  .work-row__media { grid-area: 1 / 1 / auto / span 7; }
  .work-row__text  { grid-area: 1 / 8 / auto / span 5; }
  /* even rows: swap sides */
  .work-row--flip .work-row__media { grid-area: 1 / 6 / auto / span 7; }
  .work-row--flip .work-row__text  { grid-area: 1 / 1 / auto / span 4; }
}

.work-row__rule {                 /* accent-tinted top rule, turns full accent on hover */
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 320ms var(--ease-out);
}
.work-row:hover .work-row__rule { background: var(--refract); }

/* PARALLAX HOOK — original translates each layer at a different scroll rate */
.parallax-layer { will-change: transform; }

/* media frame + inner zoom */
.media-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-1);
}
.media-frame > * { display: block; width: 100%; height: 100%; object-fit: cover; }
/* images sit inside .media-zoom <a>, so cover them explicitly too (any source ratio) */
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-zoom {
  width: 100%;
  height: 100%;
  transition: transform 640ms var(--ease-out);
}

/* browser-window chrome wrapped around each portfolio screenshot —
   makes a plain photo read as "a real, live website" without inventing content */
.media-frame--browser {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.browser-chrome {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.browser-chrome__dots { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.browser-chrome__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}
.browser-chrome__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  background: var(--surface-1);
  border: 1px solid var(--line);
}
.media-frame--browser .media-zoom { flex: 1; min-height: 0; }
.media-frame--browser img { width: 100%; height: 100%; object-fit: cover; }
.work-row:hover .media-zoom,
.work-row:focus-within .media-zoom { transform: scale(1.05); }

.work-row__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.work-row__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.work-row__title > a { position: relative; color: inherit; }
.work-row__title > a::after { content: ""; position: absolute; inset: 0; } /* full-row hit target */
.work-row__title svg { color: var(--ink-faint); transition: transform 320ms var(--ease-out); }
.work-row:hover .work-row__title svg,
.work-row:focus-within .work-row__title svg { color: var(--refract); transform: translateX(4px); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row > * { transition: color 320ms var(--ease-standard), border-color 320ms var(--ease-standard); }
.work-row:hover .tag-row > *,
.work-row:focus-within .tag-row > * { color: var(--refract); border-color: var(--refract); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  background: transparent;
}

/* -------------------------------------------------------------------------
   8b. BENEFICIOS
   ------------------------------------------------------------------------- */
.benefits-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0 48px; }
@media (min-width: 768px) { .benefits-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benefit-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-block: 28px 34px;
}
.benefit-item__index { margin-bottom: 2px; }
.benefit-item__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  line-height: 1.1;
  font-stretch: 108%;
}
.benefit-item__note { color: var(--ink-muted); max-width: 46ch; line-height: 1.62; }

/* -------------------------------------------------------------------------
   9. CAPABILITIES  (row list; hover fills a 3px band + widens the type)
   ------------------------------------------------------------------------- */
.capabilities__key { margin-block: 32px 64px; }        /* the spectrum rule */
.capabilities__list { display: flex; flex-direction: column; }

.cap-row { position: relative; }
.cap-row__rule { position: absolute; top: 0; left: 0; }
.cap-row__band {                 /* 3px accent bar that grows from the top on hover */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--refract);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 320ms var(--ease-out);
}
.cap-row:hover .cap-row__band { transform: scaleY(1); }
@media (hover: none) { .cap-row__band { transform: scaleY(1); } }

.cap-row__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 32px 12px 32px 24px;
  color: inherit;
}
.cap-row__link:hover { background: color-mix(in srgb, var(--refract) 6%, transparent); }
@media (min-width: 992px) {
  .cap-row__link {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr) 1.5rem;
    column-gap: 48px;
    align-items: center;
  }
}
.cap-row__index { grid-column: 1; }
.cap-row__name {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.15rem + 2vw, 2.5rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 100;
  transition: font-variation-settings 320ms var(--ease-out);
}
.cap-row:hover .cap-row__name { font-variation-settings: "wdth" 108; }  /* type widens */
.cap-row__note {
  grid-column: 2;
  font-size: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 40ch;
  transition: color 320ms var(--ease-out);
}
.cap-row:hover .cap-row__note { color: var(--ink); }
@media (min-width: 992px) { .cap-row__note { grid-column: 3; } }
.cap-row__glyph {
  display: none;
  color: var(--ink-muted);
}
.cap-row:hover .cap-row__glyph { color: var(--refract); }
@media (min-width: 992px) {
  .cap-row__glyph { display: block; grid-column: 4; justify-self: end; }
}
.work-row.thread-lit .tag-row > * { color: var(--refract); border-color: var(--refract); }

/* -------------------------------------------------------------------------
   10. STUDIO PANEL  (duotone photo + copy + 3 stats)
   ------------------------------------------------------------------------- */
.studio-panel {
  position: relative;
  min-height: clamp(440px, 52vw, 620px);
  background: #07080b;
  border: 1px solid var(--line);
  overflow: hidden;
}

/* the studio photo fills the whole panel; the copy sits on top of it */
.studio-panel__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.studio-panel__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(18px, 5vw, 64px);
}

/* snug black card behind the text — covers as little of the photo as it can
   while keeping every line readable on top of the image */
.studio-panel__copy-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  max-width: 560px;
  padding: clamp(24px, 3.5vw, 44px);
  background: rgba(4, 5, 8, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.studio-panel__paragraphs { display: flex; flex-direction: column; gap: 16px; }
.studio-panel__paragraphs .lead { max-width: 46ch; }

.studio-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
@media (max-width: 560px) {
  .studio-panel__stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* -------------------------------------------------------------------------
   11. STORIES TEASER
   ------------------------------------------------------------------------- */
.stories__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 48px;
}
.stories__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}
@media (min-width: 768px) { .stories__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.story-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.story-item__meta { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 16px; }
.story-item__title span { display: block; }
/* FAQ answers reuse .summary but must not be line-clamped */
.story-item .summary { -webkit-line-clamp: unset; display: block; max-width: 52ch; margin-top: 4px; }

/* -------------------------------------------------------------------------
   PROCESO — numbered steps (index one-pager)
   ------------------------------------------------------------------------- */
.process-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 48px; }
@media (min-width: 768px) { .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .process-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; } }
.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-block: 28px 34px;
}
.process-step__index { margin-bottom: 2px; position: relative; }
@media (min-width: 1180px) {
  /* connecting line running through the index numbers, like a timeline */
  .process-step__index::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    width: calc(48px - 8px);
    height: 1px;
    background: var(--line-strong);
  }
  .process-step:last-child .process-step__index::after { display: none; }
}
.process-step__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.04;
  font-stretch: 108%;
}
.process-step__note { color: var(--ink-muted); max-width: 46ch; line-height: 1.62; }

/* -------------------------------------------------------------------------
   12. CTA BAND
   ------------------------------------------------------------------------- */
.cta { overflow: hidden; }
.cta__middle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  text-align: center;
}
.cta__statement { max-width: 16ch; padding-left: 0.03em; }

/* ANIMATION SLOT — original renders a second WebGL prism in this corner */
.cta__prism-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40vw;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
@media (min-width: 992px) { .cta__prism-corner { width: 22vw; } }

/* MAGNETIC BUTTON HOOK — original translates the visual toward the cursor */
.magnetic { display: inline-block; position: relative; }
.magnetic__visual { display: inline-block; will-change: transform; }

/* CTA email-capture form (replaces the plain "Pide tu presupuesto" mailto) */
[data-cta-form-wrap] { width: 100%; } /* prevents shrink-to-fit under .cta__middle's align-items: center */
.cta-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta-form__input {
  height: 60px;
  min-width: 260px;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  transition: border-color 0.3s;
}
.cta-form__input::placeholder { color: var(--ink-muted); }
.cta-form__input:focus-visible { outline: none; border-color: var(--refract); }
.cta-form--full {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  gap: 16px;
}
.cta-form__row { display: flex; flex-direction: column; gap: 16px; }
.cta-form__row > .cta-form__input { min-width: 0; }
.cta-form--full .cta-form__input { width: 100%; min-width: 0; }
.cta-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2399A1AE' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 44px;
  cursor: pointer;
}
.cta-form__select:invalid { color: var(--ink-muted); }
.cta-form__textarea {
  height: auto;
  min-height: 100px;
  padding: 16px 22px;
  resize: vertical;
  line-height: 1.5;
}
.cta-form--full .magnetic { align-self: center; margin-top: 4px; }
.cta-form__note,
.cta-form__success {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cta-form__success { color: var(--ink); }

/* -------------------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------------------- */
.site-footer { background: var(--surface-page); padding-block: 0 64px; }
.site-footer__gutter { padding-inline: var(--pad-inline); }

.footer-readouts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding-block: 32px;
  border-bottom: 1px solid var(--line);
}
.footer-locations { display: flex; flex-direction: column; gap: 24px; width: 100%; }
@media (min-width: 768px) {
  .footer-locations { flex-flow: row wrap; gap: 32px; width: auto; justify-content: flex-start; }
}
.footer-place { display: flex; flex-direction: column; gap: 4px; }
.footer-place data {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
  padding-block: 64px;
}
@media (min-width: 992px) {
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 320px)); gap: 48px 96px; }
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: var(--ink);
}
.footer-column > span:first-child { margin-bottom: 4px; }
.footer-column .plain { color: var(--ink-muted); }

/* ANIMATION SLOT — original draws an interactive canvas globe here.
   Left as quiet breathing room between the columns and the colophon. */
.footer-globe {
  position: relative;
  width: 100%;
  height: clamp(56px, 9vw, 128px);
  overflow: hidden;
}

.footer-colophon {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer-colophon__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 768px) {
  .footer-colophon__details { flex-direction: row; align-items: center; gap: 24px; }
}
.footer-colophon .copyright { line-height: 1.9; }
.footer-legal { display: flex; gap: 16px; }

.to-top {
  width: 44px;
  height: 44px;
  margin-top: -12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.to-top svg { transition: transform 320ms var(--ease-out); }
.to-top:hover svg { transform: translateY(-3px); }

/* -------------------------------------------------------------------------
   FLOATING WHATSAPP CONTACT
   ------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 400;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: #25d366;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float:hover { transform: none; }
}

/* =========================================================================
   SUBPAGES — page header, pricing calculator, plans, FAQ accordion
   (index.html calculator, faq.html). Additive; no animation code here.
   ========================================================================= */

/* page header ------------------------------------------------------------- */
.page-head { padding-block: calc(var(--pad-block) * 0.62) calc(var(--pad-block) * 0.34); }
.page-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 110%;
  font-size: clamp(2.4rem, 1.4rem + 4.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin-block: 18px 0;
}
.page-head__lead { margin-top: 28px; max-width: 52ch; }

/* 404 page ------------------------------------------------------------- */
.error-404__code {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(4.5rem, 2.4rem + 13vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--refract);
}
.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: clamp(28px, 3.4vw, 40px);
}

/* pricing calculator ----------------------------------------------------- */
.calc { display: grid; gap: 32px; }
@media (min-width: 992px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 56px; align-items: start; } }

.calc__form { display: flex; flex-direction: column; gap: 40px; }
.calc__group { display: flex; flex-direction: column; gap: 16px; border: 0; margin: 0; padding: 0; }
.calc__legend {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  padding-left: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* result card */
.calc__result { border: 1px solid var(--line-strong); background: var(--surface-1); padding: clamp(24px, 3vw, 40px); position: sticky; top: 96px; }
.calc__result-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.calc__spec { margin-top: 14px; line-height: 1.6; color: var(--ink-muted); }
.calc__total { margin-top: 22px; font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); line-height: 1; }
.calc__total span { color: var(--ink-faint); font-size: 0.5em; }
.calc__disclaimer { margin-top: 14px; font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.55; }
.calc__result .btn-primary { margin-top: 26px; width: 100%; }

.calc__compare { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.calc__compare-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 0.875rem; }
.calc__compare-row span:first-child { color: var(--ink-muted); }
.calc__compare-row span:last-child { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }

/* maintenance / plan cards --------------------------------------------------- */
.plan-cards { display: grid; gap: 24px; }
@media (min-width: 768px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-card { border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; background: var(--surface-1); }
.plan-card--featured { border-color: var(--refract); box-shadow: inset 0 0 0 1px var(--refract); }
.plan-card__tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--refract); }
.plan-card__name { font-family: var(--font-display); font-weight: 600; font-stretch: 108%; font-size: 1.5rem; }
.plan-card__price { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--ink-muted); }
.plan-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan-card__list li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-muted); line-height: 1.5; }
.plan-card__list li::before { content: "—"; color: var(--refract); margin-right: 10px; }
.plan-card .btn-primary { margin-top: auto; align-self: flex-start; }

.plan-card__name { margin-top: -8px; }
.plan-card__price { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); color: var(--ink); }
.plan-card__price b { font-weight: 600; font-stretch: 110%; font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem); line-height: 1; }
.plan-card__price span { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   SERVICIOS — foldable rows (index.html #servicios)
   Two <details> that reuse the .cap-row look; each opens a panel (the
   budget calculator / the maintenance plans). Native disclosure, no JS.
   ------------------------------------------------------------------------- */
.cap-row--fold > summary {
  list-style: none;
  cursor: pointer;
}
.cap-row--fold > summary::-webkit-details-marker { display: none; }
.cap-row--fold:not([open]) > .cap-fold__body { display: none; }
.cap-row--fold > summary:focus-visible {
  outline: 2px solid var(--refract);
  outline-offset: -4px;
}

.cap-row__hint {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
}
@media (min-width: 992px) { .cap-row__hint { grid-column: 3; justify-self: start; } }

.cap-row__sign {
  position: absolute;
  top: 38px;
  right: 14px;
  width: 15px;
  height: 15px;
}
@media (min-width: 992px) { .cap-row__sign { top: 50%; translate: 0 -50%; right: 10px; } }
.cap-row__sign::before, .cap-row__sign::after {
  content: "";
  position: absolute;
  background: var(--refract);
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.cap-row__sign::before { top: 6.5px; left: 0; width: 15px; height: 2px; }
.cap-row__sign::after  { top: 0; left: 6.5px; width: 2px; height: 15px; }
.cap-row--fold[open] > summary .cap-row__sign::after { transform: rotate(90deg); opacity: 0; }
.cap-row--fold[open] > summary .cap-row__name { font-variation-settings: "wdth" 108; }

.cap-fold__body { padding: 4px 12px 44px 24px; }
@media (min-width: 992px) { .cap-fold__body { padding: 8px 24px 56px 112px; } }
.cap-fold__intro {
  max-width: 60ch;
  margin: 0 0 32px;
  color: var(--ink-muted);
  line-height: 1.65;
}

/* calculator when embedded in the fold */
.calc--fold .calc__result { position: static; top: auto; border: 0; background: transparent; padding: 0; }
.calc--fold .calc__form { gap: 32px; }

.calc__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--refract) 6%, transparent);
  padding: 15px 18px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--ink);
}
.calc__base-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--refract);
}
.calc__vs { display: flex; flex-direction: column; gap: 12px; }
.calc__vs-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  padding: 16px 18px;
}
.calc__vs-row span { font-size: 0.8125rem; color: var(--ink-muted); }
.calc__vs-row b {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 110%;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-faint);
}
.calc__mmw {
  margin-top: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  padding: clamp(22px, 3vw, 32px);
}
.calc__mmw .calc__total { margin-top: 12px; color: var(--ink); }
.calc__mmw .calc__spec { margin-top: 10px; }
.calc__mmw .btn-primary { margin-top: 20px; width: 100%; }
.calc--fold .calc__disclaimer { margin-top: 16px; }
.calc__total .calc__from {
  margin-right: 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--ink-faint);
}

/* -------------------------------------------------------------------------
   ¿QUÉ TIPO DE NEGOCIO TIENES? — replaces the old budget calculator.
   Radios styled as chips; the checked one shows its panel through :has()
   (no JS needed for the swap). js/business-picker.js keeps the summary
   card on the right in step and pre-fills the contact form.
   ------------------------------------------------------------------------- */
.biz { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.biz__picker { border: 0; margin: 0; padding: 0; min-width: 0; }
.biz__question {
  padding: 0;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 108%;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.15;
  color: var(--ink);
}
.biz__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.biz__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard),
    color 0.2s var(--ease-standard), transform 0.15s var(--ease-out);
}
.biz__chip input { position: absolute; opacity: 0; pointer-events: none; }
.biz__chip:active { transform: scale(0.97); }
.biz__chip:has(input:checked) { background: var(--refract); border-color: var(--refract); color: var(--on-refract); }
.biz__chip:has(input:focus-visible) { outline: 2px solid var(--refract); outline-offset: 2px; }
@media (hover: hover) {
  .biz__chip:not(:has(input:checked)):hover { border-color: var(--ink-faint); color: var(--ink); }
}
@media (max-width: 599px) {
  .biz__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz__chip { padding: 12px 10px; font-size: 0.875rem; text-align: center; }
}

.biz__panel { display: none; }
.biz:has(input[value="restaurante"]:checked) [data-biz-panel="restaurante"],
.biz:has(input[value="peluqueria"]:checked) [data-biz-panel="peluqueria"],
.biz:has(input[value="clinica"]:checked) [data-biz-panel="clinica"],
.biz:has(input[value="tienda"]:checked) [data-biz-panel="tienda"],
.biz:has(input[value="servicios"]:checked) [data-biz-panel="servicios"],
.biz:has(input[value="otro"]:checked) [data-biz-panel="otro"] {
  display: block;
  animation: biz-in 0.4s var(--ease-out);
}
@keyframes biz-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: none; }
}

.biz__lead {
  max-width: 44ch;
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink);
}
.biz__features { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 32px; }
@media (min-width: 640px) { .biz__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.biz__feature {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--line);
}
.biz__feature--key { border-top-color: var(--refract); box-shadow: inset 0 1px 0 var(--refract); }
.biz__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--refract);
}
.biz__feature-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
}
.biz__feature-note { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }
.biz__proof { margin: 16px 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--ink-faint); }
.biz__proof .text-link { color: var(--ink); }

.biz__addon { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.biz__addon-spec {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.biz__addon .calc__disclaimer { margin-top: 8px; }

/* the scroll thread lights the row as its head passes — keep it working
   on the foldable summary too */
.cap-row--fold.thread-lit > summary .cap-row__band { transform: scaleY(1); }
.cap-row--fold.thread-lit > summary .cap-row__name { font-variation-settings: "wdth" 108; }

/* FAQ accordion (faq.html) ------------------------------------------------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.3;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item__q-index { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--ink-faint); padding-top: 0.4em; flex-shrink: 0; }
.faq-item__sign { margin-left: auto; flex-shrink: 0; width: 16px; height: 16px; position: relative; translate: 0 0.35em; }
.faq-item__sign::before, .faq-item__sign::after { content: ""; position: absolute; background: var(--refract); transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
.faq-item__sign::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-item__sign::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-item[open] .faq-item__sign::after { transform: rotate(90deg); opacity: 0; }
.faq-item__a { padding: 0 0 28px 0; max-width: 60ch; color: var(--ink-muted); line-height: 1.65; }
@media (min-width: 768px) { .faq-item__a { padding-left: 40px; } }

/* long-form legal pages (aviso-legal.html, privacidad.html) ---------------- */
.legal { max-width: 70ch; }
.legal__updated {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 44px;
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 108%;
  font-size: clamp(1.2rem, 1.02rem + 0.9vw, 1.55rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 48px;
}
.legal > h2:first-of-type { margin-top: 0; }
.legal p { margin-top: 14px; color: var(--ink-muted); line-height: 1.7; }
.legal ul { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.legal li { position: relative; padding-left: 18px; color: var(--ink-muted); line-height: 1.7; }
.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--refract);
}
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal dl { margin-top: 14px; display: grid; gap: 4px 20px; }
@media (min-width: 620px) { .legal dl { grid-template-columns: max-content 1fr; } }
.legal dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.legal dd { margin: 0 0 12px; color: var(--ink-muted); line-height: 1.7; }
@media (min-width: 620px) { .legal dd { margin-bottom: 4px; } }

/* -------------------------------------------------------------------------
   LOADING SCREEN — brand intro shown until the page's resources are ready.
   Always dark regardless of the light/dark theme toggle (a deliberate brand
   moment, never a white flash). Sits above everything, fixed so it never
   affects document layout/CLS, and removes itself from the DOM once hidden.
   ------------------------------------------------------------------------- */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1001; /* above .site-header (1000) and .menu-overlay (999) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07080b;
  opacity: 1;
  transition: opacity 280ms var(--ease-out);
}
.loading-screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  transition: transform 280ms var(--ease-out);
}
.loading-screen__mark {
  width: min(26vw, 22vh, 200px);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.loading-screen__logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 0 rgba(244, 51, 51, 0));
  transition: filter 560ms ease 60ms;
}
.loading-screen__bar {
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.loading-screen__bar-fill {
  display: block;
  width: 36%;
  height: 100%;
  background: #f43333;
  border-radius: inherit;
  animation: loading-screen-bar 950ms ease-in-out infinite;
}

.loading-screen[data-ready] .loading-screen__mark { opacity: 1; transform: scale(1); }
.loading-screen[data-ready] .loading-screen__logo {
  filter: drop-shadow(0 0 24px rgba(244, 51, 51, 0.38));
  animation: loading-screen-pulse 1500ms ease-in-out 460ms 1;
}

.loading-screen[data-hidden] { opacity: 0; pointer-events: none; }
.loading-screen[data-hidden] .loading-screen__inner { transform: scale(0.97); }

@keyframes loading-screen-pulse {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(244, 51, 51, 0.38)); }
  50%      { filter: drop-shadow(0 0 34px rgba(244, 51, 51, 0.52)); }
}
@keyframes loading-screen-bar {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(290%); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen,
  .loading-screen__inner,
  .loading-screen__mark,
  .loading-screen__logo,
  .loading-screen__bar-fill {
    transition: none !important;
    animation: none !important;
  }
  .loading-screen[data-ready] .loading-screen__mark { opacity: 1; transform: none; }
  .loading-screen[data-ready] .loading-screen__logo { filter: drop-shadow(0 0 18px rgba(244, 51, 51, 0.3)); }
}