/* =========================================================
   FINDO LANDING — CLEAN CSS
   Ordenado por secciones. Reemplaza css/styles.css completo.
   ========================================================= */

/* =========================================================
   01. VARIABLES / CONTROLES GENERALES
   ========================================================= */
:root {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Poppins", "Inter", sans-serif;

  --brand: #006d37;
  --brand-strong: #0d3d24;
  --brand-soft: #78b295;
  --bg-page: #e8ece9;
  --bg-soft: #f0f5f2;
  --bg-soft-strong: #dbe9e1;
  --surface: #ffffff;
  --surface-accent: #ecf7f0;
  --ink-900: #12221a;
  --ink-700: #3e4d45;
  --line: rgba(17, 34, 26, 0.12);
  --line-strong: rgba(0, 109, 55, 0.2);

  --shadow-card: 0 1.1rem 2.6rem rgba(21, 35, 28, 0.12);
  --shadow-soft: 0 0.7rem 1.4rem rgba(18, 34, 26, 0.08);
  --shadow-text: 0 2px 8px rgba(18, 34, 26, 0.16);

  --radius-lg: 1.5rem;
  --radius-xl: 1.9rem;
  --radius-pill: 999px;

  --container-max: 74rem;
  --container-wide: 80rem;

  /* ===== CONTROLES HEADER ===== */
  --header-height: 5.25rem;
  --header-logo-size: 3.1rem;
  --header-nav-font: 1.3rem;
  --header-nav-gap: 1rem;

  /* ===== CONTROLES MAIN BANNER ===== */
  --main-banner-width: 100rem;
  --main-banner-padding-card: clamp(10px, 1.5vw, 20px);

  /* ===== CONTROLES HERO ===== */
  --hero-card-min-height: clamp(380px, 43vw, 610px);
  --hero-card-radius: 18px;

  --hero-phone-x: 145px;
  --hero-phone-y: 10px;
  --hero-phone-size: 283px;

  --hero-plant-x: -50px;
  --hero-plant-y: -15px;
  --hero-plant-size: 170px;

  --hero-person-x: 30px;
  --hero-person-y: -182px;
  --hero-person-size: 150px;

  --hero-cloud-one-x: -30px;
  --hero-cloud-one-y: -30px;
  --hero-cloud-one-size: 280px;

  --hero-cloud-two-x: 560px;
  --hero-cloud-two-y: -45px;
  --hero-cloud-two-size: 250px;

  --hero-cloud-three-x: 350px;
  --hero-cloud-three-y: 30px;
  --hero-cloud-three-size: 170px;

  /* ===== CONTROLES STEPS ===== */
  --steps-max-width: 1400px;
  --steps-gap: clamp(16px, 1.5vw, 24px);
  --steps-padding-x: clamp(40px, 6vw, 100px);
  --steps-padding-top: 5rem;
  --step-card-height: 390px;
  --step-card-padding: 10px;
  --step-title-size: clamp(2.4rem, 3vw, 4.2rem);
  --step-image-box-height: 275px;

  --busca-h: 240px;
  --busca-x: 0px;
  --busca-y: 8px;

  --encuentra-h: 260px;
  --encuentra-x: 0px;
  --encuentra-y: 0px;

  --compara-h: 255px;
  --compara-x: 0px;
  --compara-y: -8px;

  --conecta-h: 250px;
  --conecta-x: 0px;
  --conecta-y: 4px;

  --findo-logo-size: 145px;
  --findo-logo-x: 40px;
  --findo-logo-y: 70px;
  --findo-word-x: 0px;
  --findo-word-y: -60px;

  /* ===== CONTROLES ABOUT ===== */
  --about-max-width: 1400px;
  --about-card-height: 440px;
  --about-gap: 24px;
  --about-card-padding: 28px;
  --about-title-size: 2.8em;

  /* ===== CONTROLES DOWNLOAD ===== */
  --download-width: 75vw;
  --download-max-width: 1700px;
  --download-card-height: 500px;
  --download-card-padding: 45px;
  --download-copy-x: 70px;
  --download-copy-y: 60px;
  --download-copy-width: 520px;
  --download-badges-x: 35px;
  --download-badges-y: 280px;
  --download-google-x: 0px;
  --download-google-y: 2px;
  --download-appstore-x: 250px;
  --download-appstore-y: 2px;
  --download-phone-x: 180px;
  --download-phone-y: 20px;
  --download-phone-size: 220px;
  --download-letters-x: -90px;
  --download-letters-y: 90px;
  --download-letters-size: 200px;
}

/* =========================================================
   02. BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 85%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background:
    radial-gradient(circle at top right, rgba(207, 176, 44, 0.14), transparent 24rem),
    radial-gradient(circle at left 20%, rgba(0, 109, 55, 0.12), transparent 28rem),
    linear-gradient(180deg, #eef2ef 0%, var(--bg-page) 100%);
}
body.is-modal-open, body.is-nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a, button { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p, h1, h2, h3, h4 { margin: 0; }
.page { overflow-x: clip; }
.container { width: min(100% - 2rem, var(--container-max)); margin-inline: auto; }
.container--feature { width: min(100% - 1rem, 96rem); }
.surface-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.section--tinted {
  background:
    radial-gradient(circle at right top, rgba(129, 183, 156, 0.28), transparent 22rem),
    linear-gradient(180deg, var(--bg-page) 0%, var(--bg-soft-strong) 100%);
}
.display-title, .section-title, .section-subtitle, .brand__name, .modal__title, .store-link__caption, .info-card__title {
  text-shadow: var(--shadow-text);
}
.display-title {
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.8rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.display-title__accent, .display-title__tm { color: var(--brand); }
.display-title__tm { font-size: 0.34em; vertical-align: top; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.section-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.05;
}
.body-copy {
  color: var(--ink-700);
  line-height: 1.72;
  font-size: clamp(0.99rem, 1.25vw, 1.07rem);
}
.body-copy--lead {
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
}
:target { scroll-margin-top: 90px; }

/* =========================================================
   03. HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: rgba(0, 109, 55, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 0.85rem 1.8rem rgba(8, 27, 16, 0.2);
}
.site-header .container {
  width: 100%;
  max-width: none;
  padding-inline: 4vw;
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--header-height);
  padding-block: 0.7rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__logo {
  width: var(--header-logo-size);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 0.75rem 1.4rem rgba(0, 0, 0, 0.18);
}
.brand__wordmark { display: inline-flex; align-items: flex-start; gap: 0.24rem; color: #fff; }
.brand__name { font-family: var(--font-display); font-size: clamp(1.65rem, 2vw, 2rem); font-weight: 600; line-height: 1; }
.brand__tm { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; line-height: 1; padding-top: 0.25rem; }
.site-nav {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--header-nav-gap);
}
.site-nav__link, .site-nav__button, .footer-nav__link {
  border: 0;
  background: transparent;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-pill);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.site-nav__link, .site-nav__button { font-size: var(--header-nav-font); white-space: nowrap; }
.site-nav__link:hover, .site-nav__link:focus-visible, .footer-nav__link:hover, .footer-nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
}
.nav-toggle { display: none; }

/* =========================================================
   04. BANNER PRINCIPAL
   ========================================================= */
.main-banner { padding: 1.2rem 0 1.8rem; overflow: visible; }
.main-banner .container { width: min(100% - 1rem, var(--main-banner-width)); overflow: visible; }
.main-banner__card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding: var(--main-banner-padding-card);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.main-banner__card img { width: 100%; height: auto; }
.btn-scroll-top {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #00753d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
  z-index: 999;
}
.btn-scroll-top:hover { transform: translateX(-50%) scale(1.1); }

/* =========================================================
   05. HERO SHOWCASE
   ========================================================= */
.hero-showcase {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: 0;
  overflow: visible;
}
.hero-showcase .container { overflow: visible; }
.hero-showcase__card {
  position: relative;
  z-index: 10;
  min-height: var(--hero-card-min-height);
  display: grid;
  grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(2rem, 4.2vw, 4rem);
  border-radius: var(--hero-card-radius);
  background: #fff;
  overflow: visible;
  isolation: auto;
}
.hero-showcase__cloud, .hero-showcase__plant, .hero-showcase__phone, .hero-showcase__person {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.hero-showcase__cloud { z-index: 8; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.24)); }
.hero-showcase__cloud--one { top: var(--hero-cloud-one-y); left: var(--hero-cloud-one-x); width: var(--hero-cloud-one-size); }
.hero-showcase__cloud--two { top: var(--hero-cloud-two-y); left: var(--hero-cloud-two-x); width: var(--hero-cloud-two-size); }
.hero-showcase__cloud--three { top: var(--hero-cloud-three-y); left: var(--hero-cloud-three-x); width: var(--hero-cloud-three-size); }

.hero-showcase__phone {
  z-index: 5;
  left: var(--hero-phone-x);
  top: var(--hero-phone-y);
  width: var(--hero-phone-size);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.24));
}
.hero-showcase__plant {
  z-index: 7;
  left: var(--hero-plant-x);
  bottom: var(--hero-plant-y);
  width: var(--hero-plant-size);
  filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.22));
}
.hero-showcase__person {
  z-index: 9999;
  right: var(--hero-person-x);
  bottom: var(--hero-person-y);
  width: var(--hero-person-size);
  filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.22));
}
.hero-showcase__copy { position: relative; z-index: 4; grid-column: 2; }
.hero-showcase__title {
  margin: 0;
  max-width: 920px;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5.15vw, 5.95rem);
  line-height: 0.96;
  font-weight: 600;
  letter-spacing: -0.065em;
  color: #505050;
  text-shadow: 0 4px 5px rgba(0, 0, 0, 0.28);
}
.hero-showcase__title span { display: inline-block; color: #00753d; }

/* =========================================================
   06. CÓMO FUNCIONA / STEPS
   ========================================================= */
#como-funciona { margin-top: 0; }
.steps-band {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--steps-padding-top) var(--steps-padding-x) 1rem;
}
.steps-band .steps-grid {
  width: 100%;
  max-width: var(--steps-max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--steps-gap);
}
.info-card, .about-card, .legal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.steps-band .info-card {
  position: relative;
  overflow: visible;
  height: var(--step-card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--step-card-padding);
  text-align: center;
}
.steps-band .info-card__title {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: var(--step-title-size);
  line-height: 1;
}
.info-card__title--green { color: rgb(0, 109, 55); }
.steps-band .info-card__image-box {
  position: relative;
  width: 100%;
  height: var(--step-image-box-height);
  overflow: visible;
}
.steps-band .info-card__image {
  position: absolute;
  left: 50%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}
.steps-band .info-card__image--busca { height: var(--busca-h); bottom: var(--busca-y); margin-left: var(--busca-x); }
.steps-band .info-card__image--encuentra { height: var(--encuentra-h); bottom: var(--encuentra-y); margin-left: var(--encuentra-x); }
.steps-band .info-card__image--compara { height: var(--compara-h); bottom: var(--compara-y); margin-left: var(--compara-x); }
.steps-band .info-card__image--conecta { height: var(--conecta-h); bottom: var(--conecta-y); margin-left: var(--conecta-x); }
.steps-band .info-card--brand {
  position: relative;
  justify-content: center;
  place-items: center;
  gap: 0.8rem;
  background: linear-gradient(180deg, var(--surface-accent) 0%, var(--surface) 100%);
}
.steps-band .info-card--brand .info-card__logo {
  width: var(--findo-logo-size);
  transform: translate(var(--findo-logo-x), var(--findo-logo-y));
  border-radius: 1rem;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.2));
}
.steps-band .info-card--brand .info-card__brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.2rem;
  color: var(--brand);
  transform: translate(var(--findo-word-x), var(--findo-word-y));
}
.info-card__brand-name { font-family: var(--font-display); font-size: clamp(1.55rem, 2vw, 1.85rem); font-weight: 600; }
.info-card__brand-tm { font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; padding-top: 0.25rem; }

/* =========================================================
   07. QUÉ ES FINDO
   ========================================================= */
#que-es-findo {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}
#que-es-findo .container {
  width: min(100% - 2rem, var(--about-max-width));
}
#que-es-findo .about-grid {
  max-width: 1800px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: var(--about-gap);
}
#que-es-findo .about-card {
  width: 100%;
  height: var(--about-card-height);
  padding: var(--about-card-padding);
  overflow: hidden;
  display: grid;
  gap: 1rem;
}
#que-es-findo .about-card--intro {
  background: linear-gradient(180deg, var(--surface-accent) 0%, var(--surface) 100%);
  border-color: var(--line-strong);
}
#que-es-findo .about-stack { display: contents; }
#que-es-findo .about-card h2, #que-es-findo .about-card h3 {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--about-title-size);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 5px;
}
#que-es-findo .about-card p { text-align: justify; margin-top: 0; }
#que-es-findo .about-card p + p { margin-top: -10px; }
#que-es-findo .about-stack .about-card:nth-child(1) .section-subtitle { color: var(--ink-900); }
#que-es-findo .about-stack .about-card:nth-child(2) .section-subtitle { color: rgb(0, 109, 55); }
#que-es-findo .about-phone {
  margin: 0;
  height: var(--about-card-height);
  display: flex;
  align-items: center;
  justify-content: center;
}
#que-es-findo .about-phone img {
  height: var(--about-card-height);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1.1rem 1.8rem rgba(19, 31, 25, 0.16));
}

/* =========================================================
   08. DESCARGA
   ========================================================= */
#descargar { padding-top: 3rem; padding-bottom: 3rem; }
#descargar .container { width: var(--download-width); max-width: var(--download-max-width); }
#descargar .download-card {
  position: relative;
  min-height: var(--download-card-height);
  overflow: visible;
  padding: var(--download-card-padding);
  display: block;
}
.download-card__copy {
  position: absolute;
  left: var(--download-copy-x);
  top: var(--download-copy-y);
  width: var(--download-copy-width);
  z-index: 5;
  display: grid;
  gap: 1rem;
}
#descargar .display-title { line-height: 1.1; }
#descargar .body-copy--lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.8em;
}
.download-badges {
  position: absolute;
  left: var(--download-badges-x);
  top: var(--download-badges-y);
  width: 520px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
}
.store-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0.35rem 0.6rem;
  border-radius: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  width: 240px;
  height: 85px;
}
.store-link img { width: 220px; }
.store-link--disabled { opacity: 0.76; height: 110px; }
.store-link__caption { color: var(--brand); font-family: var(--font-display); font-weight: 600; text-align: center; }
.download-badges .store-link:nth-child(1) { position: absolute; left: var(--download-google-x); top: var(--download-google-y); }
.download-badges .store-link:nth-child(2) { position: absolute; left: var(--download-appstore-x); top: var(--download-appstore-y); }
.download-card__visual { position: absolute; inset: 0; min-height: 0; display: block; }
.download-card__accent { display: none; }
.download-card__phone { position: absolute; filter: drop-shadow(0 1rem 1.75rem rgba(19, 31, 25, 0.16)); }
.download-card__phone--primary {
  right: var(--download-phone-x);
  top: var(--download-phone-y);
  width: var(--download-phone-size);
  z-index: 4;
}
.download-card__phone--secondary {
  right: var(--download-letters-x);
  top: var(--download-letters-y);
  width: var(--download-letters-size);
  z-index: 5;
}

/* =========================================================
   09. FOOTER
   ========================================================= */
.site-footer { padding-block: 2rem 3rem; background: #fff; border-top: 1px solid var(--line); }
.site-footer .container { width: 100%; max-width: none; padding-inline: 60px; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer .brand { transform: scale(1.6); transform-origin: left center; gap: 0.5rem; }
.brand--footer .brand__name, .brand--footer .brand__tm { color: var(--brand); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; transform: scale(1.4); transform-origin: right center; }
.footer-nav__link { color: var(--brand); }
.footer-nav__link:hover, .footer-nav__link:focus-visible { background: rgba(0, 109, 55, 0.08); color: var(--brand); }

/* =========================================================
   10. MODALES
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 2000; padding: clamp(1rem, 3vw, 2rem); overflow-y: auto; }
.modal[hidden] { display: none; }
.modal__backdrop { position: fixed; inset: 0; background: rgba(6, 18, 12, 0.72); backdrop-filter: blur(10px); }
.modal__dialog { position: relative; width: min(100%, 68rem); margin: auto; border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 1.6rem 4rem rgba(6, 18, 12, 0.3); overflow: hidden; }
.modal__dialog--compact { width: min(100%, 38rem); }
.modal__close {
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 1rem;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-strong);
  box-shadow: var(--shadow-soft);
  font-size: 1.65rem;
  line-height: 1;
}
.modal__close span { display: block; line-height: 1; transform: translateY(-1px); }
.modal__hero { display: flex; align-items: center; gap: 1rem; padding: 1.5rem clamp(1.35rem, 3vw, 2rem); background: linear-gradient(135deg, var(--brand) 0%, #0b8a49 100%); color: #fff; }
.modal__hero-logo { width: 4rem; aspect-ratio: 1; border-radius: 1rem; box-shadow: 0 0.85rem 1.6rem rgba(0, 0, 0, 0.2); }
.modal__title { display: inline-flex; align-items: flex-start; gap: 0.25rem; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.2rem); font-weight: 600; line-height: 1; }
.modal__title span { font-size: 0.4em; padding-top: 0.25rem; }
.modal__subtitle { color: rgba(255, 255, 255, 0.92); line-height: 1.5; margin-top: 0.35rem; }
.modal__body { display: grid; gap: 1rem; padding: clamp(1.35rem, 3vw, 2rem); }
.modal-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.modal-card { display: grid; gap: 0.6rem; align-content: start; padding: 1.1rem; border-radius: 1.15rem; border: 1px solid var(--line); background: #f6f8f7; }
.modal-card--contact { max-width: 26rem; }
.modal-card__title { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--ink-900); }
.modal-card__title img { width: 1rem; height: 1rem; }
.contact-link { color: var(--brand); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }

/* =========================================================
   11. LEGAL PAGES
   ========================================================= */
.page--legal .legal-hero { padding-top: 2.5rem; padding-bottom: 2rem; }
.page--legal .legal-hero__layout { grid-template-columns: 1fr; gap: 1.2rem; }
.page--legal .display-title { max-width: none; white-space: nowrap; font-size: clamp(3.2rem, 6vw, 5.8rem); }
.page--legal .section--soft { padding-top: 3rem; padding-bottom: 4rem; }
.page--legal .legal-stack { gap: 2rem; }
.legal-card { padding: clamp(1.3rem, 3vw, 2rem); }
.legal-card__head { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.legal-body { margin: 0; color: var(--ink-700); font-size: 1rem; line-height: 1.78; overflow-wrap: anywhere; }
.legal-body b { color: var(--ink-900); }

/* =========================================================
   12. MÓVIL: MAQUETA DESKTOP ESCALADA
   ========================================================= */
@media (max-width: 700px) {
  body { overflow-x: hidden; }
  .page--home main {
    width: 1440px;
    transform: scale(calc(100vw / 1440));
    transform-origin: top left;
  }
  .page--home { min-height: calc(100vh / (100vw / 1440)); }
  .site-header, .site-footer { width: 100vw; min-width: 0; }
}

/* ===== MODALES SOBRE HEADER ===== */

.modal {
  z-index: 30000;
  padding-top: 5rem;
}

.modal__backdrop {
  z-index: 0;
}

.modal__dialog {
  z-index: 1;
}
/* ===== FIX CLICK BOTÓN X MODAL ===== */

.modal__close {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 2.6rem;
  height: 2.6rem;

  cursor: pointer;
}

/* La X ocupa todo el botón */
.modal__close span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  pointer-events: none; /* ← clave */
}