/* ==========================================================================
   MundoGaming - "Andean neon arcade"
   A near-black violet night cut by electric cyan, with 360 content framed in
   glowing stereoscopic headset viewports.

   Page theme is locked to dark (no section inverts). One accent (cyan) across
   every page. One radius scale: buttons pill, cards 14px, inputs 10px.
   Reading width lives on containers, never on `p` (guide Golden Rule 20).
   ========================================================================== */

:root {
  --bg: #0a0911;
  --bg-2: #100e1a;
  --surface: #17142a;
  --surface-2: #1e1a33;

  /* Brand tokens, matched to the logo lockup and this domain's landing page
     so the funnel and the portfolio read as one brand. */
  --accent: #22d3ee;
  --accent-ink: #04222a;
  --violet: #a855f7;

  --text: #f3f1f9;
  --muted: #a7a2bd;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --header-h: 70px;

  --font-display: 'Raleway', system-ui, sans-serif;
  --font-body: 'Karla', system-ui, sans-serif;

  --shadow: 0 18px 50px rgba(4, 2, 14, 0.55);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body { overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Layout containers (reading width lives here, never on p) ─────────────── */

.container {
  width: min(1180px, 100% - 2.4rem);
  margin-inline: auto;
}

.container-narrow {
  width: min(760px, 100% - 2.4rem);
  margin-inline: auto;
}

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.section-head { margin-bottom: 2.6rem; max-width: 640px; }
.section-head h2 { margin-bottom: 0.6rem; }
.section-head p { color: var(--muted); margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ── Brand lockup: "Mundogaming by BeyondVR" ──────────────────────────────── */

/* The suffix is sized in `em`, so it always scales against whatever it sits in.
   The ratio tightens as the surrounding text grows: a display h1 gets a very
   small suffix, a section h2 a small one, running text a slightly smaller one.
   Without the per-level ratios a single em value reads far too heavy at 3.4rem
   and too faint at 0.9rem. */
.brand__sub {
  font-weight: 400;
  font-size: 0.72em;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0.78;
}
.brand__sub::before { content: ' '; }

h1 .brand__sub { font-size: 0.34em; }
h2 .brand__sub { font-size: 0.44em; }
h3 .brand__sub { font-size: 0.6em; }

/* ── Buttons (one shape rule: always pill) ────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.78rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 26px rgba(34, 211, 238, 0.22);
}
.btn-primary:hover { background: #4bdcf5; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.88rem; }
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1rem; }

/* ── Header + navigation ──────────────────────────────────────────────────── */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.site-header {
  direction: ltr; /* keeps logo left / nav right in any locale */
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(10, 9, 17, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-header.solid {
  border-bottom-color: var(--border);
  background: rgba(10, 9, 17, 0.96);
}

.header-inner {
  width: min(1180px, 100% - 2.4rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The lockup is a fixed-ratio image (520x137), so it is sized by height and
   lets width follow. Header and footer share it at different scales. */
.logo { display: inline-flex; align-items: center; }
.logo:hover { text-decoration: none; }
/* Sized so the "by BEYOND VR" sub-line in the lockup stays legible; below
   ~44px it degrades into a grey smear. */
.logo-img {
  height: 46px;
  width: auto;
  display: block;
}
.footer-logo .logo-img { height: 54px; }

@media (max-width: 420px) {
  .logo-img { height: 38px; }
}

.site-nav-desktop {
  display: flex;
  align-items: center;
  gap: 1.45rem;
}
.site-nav-desktop a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.18s var(--ease);
}
.site-nav-desktop a:hover { color: var(--text); text-decoration: none; }
.site-nav-desktop a.is-active { color: var(--text); }
.site-nav-desktop a.btn { color: var(--accent-ink); }

/* Language switch: two pills sitting beside the subscribe CTA. Uses the same
   accent and pill radius as the rest of the header so it reads as one control. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
}
.lang-switch__item {
  display: block;
  padding: 0.24rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--muted);
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.lang-switch__item:hover { color: var(--text); text-decoration: none; }
.lang-switch__item.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* The desktop nav already lays this out inline; the mobile cluster pairs it
   with the burger. Only one of the two is ever visible. */
.header-controls-mobile {
  display: none;
  align-items: center;
  gap: 0.6rem;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

/* Mobile nav is a SIBLING of <header>, never a child (guide: Mobile Nav). */
.site-nav { display: none; }

@media (max-width: 900px) {
  .site-nav-desktop { display: none; }
  .nav-burger { display: flex; }
  .header-controls-mobile { display: flex; }

  .site-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 800;
    padding: 1.1rem 1.2rem 1.5rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform 0.25s var(--ease), visibility 0.25s var(--ease);
  }
  .site-nav a:not(.btn) {
    padding: 0.62rem 0;
    color: var(--text);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
  }
  .site-nav .btn { width: 100%; justify-content: center; margin-top: 0.9rem; }
  .nav-toggle:checked ~ .site-nav { transform: translateY(0); visibility: visible; }
  .nav-toggle:checked ~ .site-header .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .site-header .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .site-header .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── Hero: asymmetric split, text left / headset viewport right ───────────── */

.hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -20%;
  height: 90%;
  background:
    radial-gradient(48% 60% at 18% 30%, rgba(168, 85, 247, 0.34), transparent 70%),
    radial-gradient(42% 55% at 78% 18%, rgba(34, 211, 238, 0.22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy h1 { margin-bottom: 1rem; }

/* The tagline always starts on its own line, under the brand lockup, at every
   viewport. Block rather than a <br> so it stays a single wrapping paragraph of
   text on narrow screens. */
.hero-h1-line { display: block; }
.hero-copy > p {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  margin-bottom: 1.8rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Signature element: a stereoscopic headset viewport. Two lenses showing the
   same frame, so the page states "360 content on your phone" in one image. */
.viewport {
  position: relative;
  border-radius: 26px;
  padding: 14px;
  background: linear-gradient(150deg, rgba(34, 211, 238, 0.5), rgba(168, 85, 247, 0.5));
  box-shadow: var(--shadow);
}
.viewport-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: var(--bg);
  border-radius: 16px;
  padding: 10px;
}
.lens {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 3 / 4;
  background: var(--surface);
}
.lens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lens:first-child img { object-position: 38% center; }
.lens:last-child img { object-position: 62% center; }
.viewport-badge {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 1.05rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
}

/* ── Showcase: bento grid, exactly 6 cells for 6 items ────────────────────── */

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  min-height: 190px;
  background: var(--surface);
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.tile:hover img { transform: scale(1.06); }
.tile-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  background: linear-gradient(to top, rgba(8, 6, 16, 0.94) 12%, rgba(8, 6, 16, 0.35) 55%, transparent);
}
.tile-body h3 { margin-bottom: 0.25rem; font-size: 1.08rem; }
.tile-body p { margin: 0; color: #cfcade; font-size: 0.88rem; line-height: 1.5; }

/* Rhythm: two wide tiles lead, four narrower ones follow. 6 items, 6 cells. */
.tile:nth-child(1) { grid-column: span 2; grid-row: span 2; min-height: 400px; }
.tile:nth-child(2) { grid-column: span 2; }
.tile:nth-child(3) { grid-column: span 1; }
.tile:nth-child(4) { grid-column: span 1; }
.tile:nth-child(5) { grid-column: span 2; }
.tile:nth-child(6) { grid-column: span 2; }

@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .tile:nth-child(1) { grid-column: span 2; grid-row: auto; min-height: 260px; }
  .tile:nth-child(n + 2) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .tile, .tile:nth-child(1), .tile:nth-child(n + 2) { grid-column: span 1; min-height: 200px; }
}

/* ── Why us: grouped hairline list, deliberately not cards ────────────────── */

.reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  border-top: 1px solid var(--border);
}
.reason {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.reason-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent);
  padding-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.reason h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.reason p { margin: 0; color: var(--muted); font-size: 0.93rem; }

@media (max-width: 760px) {
  .reasons { grid-template-columns: 1fr; gap: 0; }
}

/* ── Features: icon cards ─────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.feature:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.feature-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.24);
  margin-bottom: 1rem;
}
.feature-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
.feature h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.93rem; }

@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }

/* ── FAQ accordion ────────────────────────────────────────────────────────── */

.faq-list { display: grid; gap: 0.7rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 1.3rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.22s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item[open] summary { color: var(--accent); }
.faq-body {
  padding: 0 1.3rem 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ── Page hero (inner pages) ──────────────────────────────────────────────── */

.page-hero {
  position: relative;
  padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(55% 90% at 12% 0%, rgba(168, 85, 247, 0.2), transparent 70%),
    radial-gradient(45% 80% at 85% 10%, rgba(34, 211, 238, 0.14), transparent 70%);
}
.page-hero h1 { margin-bottom: 0.7rem; }
.page-hero p { color: var(--muted); margin-bottom: 0; }

/* ── Steps (subscribe / unsubscribe flows) ────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.4rem;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.93rem; }

@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* ── Pricing cards ────────────────────────────────────────────────────────── */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  align-items: start;
}
.pricing-card {
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.plan-operator {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.price-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
/* Cadence sits inline after the amount ("S./ 12,90 al mes"), set smaller and
   muted so the number stays the thing you read first. */
.price-cadence {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.price-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.9rem 0 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.plan-features {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.plan-features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
  color: var(--text);
}
.plan-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.pricing-card .btn { margin-top: auto; }

.billing-note { color: var(--muted); font-size: 0.9rem; }

/* ── Unsubscribe boxes ────────────────────────────────────────────────────── */

.optout-box {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  margin-bottom: 1.1rem;
}
.optout-operator {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.optout-line {
  font-size: clamp(1rem, 2.2vw, 1.22rem);
  line-height: 1.6;
  margin: 0;
}
.optout-key,
.optout-dest {
  display: inline-block;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-weight: 700;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.6rem;
  margin: 0 0.15rem;
}
.optout-notes {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
.optout-notes li {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 720px) { .optout-notes { grid-template-columns: 1fr; gap: 0.4rem; } }

.refund-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.refund-list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--muted);
}
.refund-list li::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Forms (contact + sign in) ────────────────────────────────────────────── */

.contact-form,
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
}
.form-card.narrow { max-width: 520px; margin-inline: auto; }

.form-group { margin-bottom: 1.1rem; }
.contact-form h3,
.form-card h3 { margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.signin-card button,
.form-card button { margin-top: 0.5rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.78rem 0.95rem;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #8f8aa6; }
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

.error-msg,
.errorMsg { display: none; color: #ff6b5c; font-size: 0.82rem; margin-top: 0.3rem; }
.form-success,
.successMsg { display: none; color: var(--accent); font-weight: 600; margin-top: 1rem; }
.form-disclaimer { color: var(--muted); font-size: 0.82rem; margin-top: 1rem; margin-bottom: 0; }

.care-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  margin-bottom: 1.6rem;
}
.care-block h2 { font-size: 1.25rem; }
.care-block p { margin-bottom: 0.5rem; }
.care-block p:last-child { margin-bottom: 0; color: var(--muted); font-size: 0.92rem; }

/* ── Legal pages (shared partials render inside .legals) ──────────────────── */

.legals-wrap { padding: 3.5rem 0; }
.legals { padding-top: calc(var(--header-h) + 3rem); padding-bottom: 5rem; }
.legals .container { width: min(840px, 92vw); margin-inline: auto; }
.legals h1 { display: none; } /* terms-dcb.html injects a hardcoded <h1> */
.legals h6 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 2rem 0 0.5rem;
  font-family: var(--font-display);
}
.legals p { margin-bottom: 0.85rem; line-height: 1.75; }
.legals ul { margin: 0.5rem 0 1rem; padding-inline-start: 1.2rem; }
.legals li { margin-bottom: 0.4rem; line-height: 1.7; }
.legals table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.legals th,
.legals td { border: 1px solid var(--border); padding: 0.6rem 0.7rem; text-align: left; }

/* ── 404 ──────────────────────────────────────────────────────────────────── */

.not-found { padding: clamp(4rem, 12vw, 8rem) 0; text-align: center; }
.big-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 9rem);
  line-height: 1;
  margin: 0 0 0.5rem;
  background: linear-gradient(120deg, var(--accent), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.not-found p { color: var(--muted); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: clamp(2.8rem, 6vw, 4rem) 0 1.6rem;
  margin-top: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2rem;
}
.footer-logo { margin-bottom: 0.9rem; }
.footer-blurb { color: var(--muted); font-size: 0.92rem; }
.footer-head {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  margin: 0 0 0.9rem;
}

/* The sibling column headings (EXPLORAR, LEGAL) are tiny uppercase tracked
   labels. At 0.78rem the brand suffix computes to ~8px and is unreadable, and
   uppercase would render it "BY BEYONDVR", so the brand heading opts out of the
   label treatment entirely and is set as a brand line. */
.footer-head--brand {
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: -0.01em;
}
.footer-head--brand .brand__sub { font-size: 0.66em; }
.footer-col { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.footer-col a { color: var(--muted); font-size: 0.9rem; }
.footer-col a:hover { color: var(--accent); }
.footer-entity p { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.entity-name { color: var(--text) !important; font-weight: 600; }
.entity-label { display: block; color: #8f8aa6; font-size: 0.78rem; }
.lang-switcher { display: flex; gap: 0.5rem; }
.lang-switcher a { font-size: 0.82rem; font-weight: 600; }
.lang-switcher a.is-active { color: var(--accent); }

.footer-base {
  margin-top: 2.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
}
.footer-base p { margin: 0; color: #8f8aa6; font-size: 0.82rem; }

@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Motion: reveals are gated on html.js so no-JS keeps everything visible ── */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .tile:hover img { transform: none; }
}

/* ── Utilities ────────────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.mt-lg { margin-top: 2rem; }
.muted { color: var(--muted); }