/* Archivo, SIL OFL, self hosted alongside the display face.

   Served from this domain rather than Google so the site makes no external
   request at all. On a page whose whole argument is that nothing leaves and
   nobody reaches in, calling a third party on every visit was the one thing
   contradicting it. */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Libre Caslon Condensed, SIL OFL 1.1, self hosted.
   Licence travels with the file at assets/fonts/LibreCaslonCondensed-OFL.txt.

   Two sources on purpose. The variable file is 64 KB and covers every
   heading weight, but it is only offered to engines that understand
   tech(variations). Anything older skips that line and takes the static
   Medium instead, so it still gets Libre Caslon rather than dropping to a
   different typeface. Plain "woff2" as the container keyword, never
   "woff2-variations", which only Chrome accepts. */
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("../assets/fonts/LibreCaslonCondensed-var.woff2") format("woff2") tech(variations),
       url("../assets/fonts/LibreCaslonCondensed-Medium.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   ENAIAX / RESTYLE: "Aqui no llega nadie"
   Cobalt sky in the hero, then a descent through greens sampled from
   the hill, with paper sections for relief. Colours come from
   assets/hero-1920.avif so page and image agree.
   ============================================================ */

:root {
  /* Field */
  --cobalt: #1d3e7e;
  --cobalt-deep: #16305f;
  --cobalt-lift: #2a5199;

  /* Ground. land-join is sampled from the bottom row of the hero image so
     the photo can dissolve into flat colour with no visible seam. The rest
     step down from there: scrolling reads as going further into the earth. */
  --land-join: #061305;
  --land-2: #141d16;
  --land-3: #101710;
  --land-deep: #0a0f0a;

  /* Night. The blue comes back for the closing sections, so the page ends
     under the same sky it opened with. */
  --night: #16305f;
  --night-2: #0e2044;
  --night-deep: #081530;

  /* Paper, taken from the wall of the house */
  /* ink-3 and white-3 are the smallest text on the page, so both are set
     at the lightest value that still clears 4.5:1. Do not lighten them. */
  --paper: #ebe4d4;
  --paper-2: #ded5c1;
  --ink: #17202b;
  --ink-2: #4a5560;
  --ink-3: #5a646e;
  --rule-ink: rgba(23, 32, 43, 0.15);

  /* Warm accent: the only call to action colour.
     Redder than the mountain orange (#dd6824) so a button never reads
     as scenery, and dark enough to clear 4.5:1 with white text. */
  --ember: #d43a1d;
  --ember-hover: #b52c12;
  --dawn: #dd6824;

  /* Alert. Deeper and less orange than ember, so a validation message never
     reads as a call to action. alert-deep is the same hue darkened enough to
     clear 4.5:1 against its own tint, which ember cannot do. */
  --alert: #a6231a;
  --alert-deep: #8f1e16;

  /* Ink on the field */
  --white: #ffffff;
  --white-2: rgba(255, 255, 255, 0.74);
  --white-3: rgba(255, 255, 255, 0.58);
  --hairline: rgba(255, 255, 255, 0.18);

  --font: "Archivo", system-ui, sans-serif;
  --display: "Libre Caslon Condensed", "Libre Caslon Text", Georgia, "Times New Roman", serif;

  /* Grain strength, tunable live from the console. mid carries the
     midtones, dark lifts the shadows where overlay cannot reach. */
  --grain-mid: 0.42;
  --grain-dark: 0.07;

  --radius: 4px;
  --pad-x: clamp(1.25rem, 4vw, 2.75rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--night-deep);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Film grain over the whole document.

   Two layers because no single blend mode puts grain everywhere. Overlay
   carries the midtones but leaves blacks untouched, which is exactly why
   the shadows looked like a smooth wash. Screen lifts the dark areas, and
   because screen acts hardest where the base is darkest, it lands the grain
   precisely where it was missing.

   numOctaves is 1 on purpose. Three octaves adds low frequency components
   and turns fine grain into soft cloudy blotches, which reads as bad photo
   noise rather than print. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}

body::after {
  z-index: 300;
  opacity: var(--grain-mid, 0.62);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='1' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

body::before {
  z-index: 299;
  opacity: var(--grain-dark, 0.16);
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.869' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g2)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

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

a {
  color: inherit;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

/* Serif only at display sizes. Its stroke contrast goes thin and fragile
   on the small headings, which stay on the grotesque. */
h1,
h2,
.cta h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.06;
}

p {
  text-wrap: pretty;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.container-narrow {
  max-width: 880px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Contact form honeypot. Unlike .visually-hidden this is meant to be hidden
   from everybody, including screen readers, so display: none is correct here.
   A bot reading the markup fills it in and gives itself away. */
.hp {
  display: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--white);
  color: var(--land-deep);
  padding: 12px 20px;
  font-weight: 600;
  border-radius: var(--radius);
}

.skip-link:focus {
  left: var(--pad-x);
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* ============================ NAV ============================ */

.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 22px 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-brand {
  flex: 0 0 auto;
  line-height: 0;
}

.brand-lockup {
  width: 122px;
  height: auto;
  /* The supplied logo carries a violet gradient that muddies against both
     the sky and the hill, so it is forced to flat white. */
  filter: brightness(0) invert(1);
}

.nav-links {
  display: flex;
  gap: 30px;
  margin: 0 auto;
}

.nav-link {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--white-2);
  transition: color 0.18s var(--ease-out);
}

.nav-link:hover {
  color: var(--white);
}

.nav-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Language switcher. Quieter than the section links, because somebody who
   already reads the page they landed on should not be drawn to it. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lang-link {
  padding: 4px 7px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--white-3);
  border-radius: 3px;
  transition: color 0.18s var(--ease-out);
}

.lang-link:hover {
  color: var(--white);
}

/* The language you are already reading. Marked rather than hidden, so the set
   always shows four and the current one is simply the lit one. */
.lang-link[aria-current] {
  color: var(--white);
  background: var(--hairline);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
}

/* ============================ BUTTONS ============================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out);
}

.btn-ember {
  background: var(--ember);
  color: var(--white);
  padding: 13px 22px;
}

.btn-ember:hover {
  background: var(--ember-hover);
}

.btn-quiet {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--hairline);
}

.btn-quiet:hover {
  background: rgba(255, 255, 255, 0.09);
}

.btn-lg {
  padding: 16px 28px;
  font-size: 1.0625rem;
}

.btn-sm {
  padding: 9px 16px;
  font-size: 0.9375rem;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn .arrow {
  transition: transform 0.18s var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* ============================ HERO ============================ */

.hero {
  position: relative;
  background: var(--land-join);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased left so the house survives the crop on narrow viewports.
     It sits at 31% of the image width. */
  object-position: 35% bottom;
  /* Dialled in by eye with the grain panel. Slightly less contrast and
     noticeably more saturation, so the illustration keeps the punch of the
     reference without the sky going pale under the white headline. */
  filter: contrast(0.96) saturate(1.26);
  /* The bottom of the hill fades out onto land-join, which is the colour of
     that same hill. Photo and flat colour meet without an edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

.hero-inner {
  padding-top: 96px;
  padding-bottom: clamp(18rem, 42vw, 30rem);
}

.hero-headline {
  max-width: 17ch;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.hero-sub {
  margin: 26px 0 0;
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--white-2);
}

.hero-ctas {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ============================ SECTIONS ============================ */

.section {
  position: relative;
  padding: var(--section-y) 0;
}

.section-join {
  background: var(--land-join);
}

.section-deep {
  background: var(--land-2);
}

.section-field {
  background: var(--night);
}

.section-paper {
  background: var(--paper);
  color: var(--ink);
}

.section-land {
  background: var(--night-2);
}

/* Who the page is for, kept high up and set apart from the section
   heading so it answers "is this me?" before anything else is read. */
.sectors {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  max-width: 74ch;
  font-size: 0.9375rem;
  color: var(--white-3);
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head h2 {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
}

.section-head p {
  margin: 18px 0 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--white-2);
}

.section-paper .section-head p {
  color: var(--ink-2);
}

/* ============================ CAPACIDADES ============================ */

/* Hairline rules instead of cards. Cards would fight the flatness of
   the poster and add borders the palette does not need. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.cap {
  padding: 34px 30px 34px 0;
  border-bottom: 1px solid var(--hairline);
}

.cap h3 {
  font-size: 1.1875rem;
}

.cap p {
  margin: 12px 0 0;
  color: var(--white-2);
}

.cap-tag {
  display: block;
  margin-top: 18px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--white-3);
}

/* ============================ COMPARATIVA ============================ */

.compare-scroll {
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 620px;
}

.compare th,
.compare td {
  padding: 20px 22px 20px 0;
  border-bottom: 1px solid var(--rule-ink);
  vertical-align: top;
}

.compare thead th {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.compare tbody th {
  font-weight: 600;
  width: 24%;
}

.compare td {
  color: var(--ink-2);
}

.compare .us {
  color: var(--ink);
  font-weight: 500;
}

.compare-close {
  margin: 40px 0 0;
  max-width: 60ch;
  font-size: 1.125rem;
}

/* ============================ PASOS ============================ */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.step {
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: 8px 48px;
  align-items: baseline;
}

.step h3 {
  font-size: 1.25rem;
}

.step p {
  margin: 0;
  color: var(--white-2);
  max-width: 62ch;
}

/* ============================ SERVICIO ============================ */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px 48px;
}

.service h3 {
  font-size: 1.0625rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.service p {
  margin: 14px 0 0;
  color: var(--white-2);
}

/* ============================ PROCESO ============================ */

.phases {
  list-style: none;
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.phase {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}

.phase h3 {
  font-size: 1.25rem;
}

.phase p {
  margin: 12px 0 0;
  color: var(--ink-2);
}

.honesty {
  border-top: 1px solid var(--rule-ink);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.honesty h3 {
  font-size: 1.375rem;
  margin-bottom: 28px;
}

.honesty-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 48px;
}

.honesty-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.honesty-list li {
  position: relative;
  padding: 10px 0 10px 30px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-ink);
}

.honesty-list li::before {
  position: absolute;
  left: 0;
  top: 10px;
  font-weight: 700;
}

.honesty-yes li::before {
  content: "Sí";
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  top: 13px;
}

.honesty-no li::before {
  content: "No";
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ember);
  top: 13px;
}

/* ============================ PILARES ============================ */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 48px;
}

.pillar h3 {
  font-size: 1.125rem;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.pillar p {
  margin: 16px 0 0;
  color: var(--white-2);
}

/* The source credits are the smallest links on the page, and at 11px they
   came out 22px tall, under the 24px minimum target size. The extra height is
   taken above the text so the underline stays tight to the words. */
.pillar-src {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--white-3);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-top: 6px;
  padding-bottom: 3px;
}

.pillar-src:hover {
  color: var(--white);
}

.pillar-law {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
  max-width: 78ch;
}

.pillar-law h3 {
  font-size: 1.375rem;
}

.pillar-law p {
  margin: 18px 0 0;
  color: var(--white-2);
}

/* ============================ CTA ============================ */

.cta {
  text-align: center;
}

.cta h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  max-width: 20ch;
  margin: 0 auto;
}

.cta p {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: 1.0625rem;
  color: var(--white-2);
}

.cta-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ============================ CONTACTO ============================ */

.contact-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-info h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
}

.contact-info > p {
  margin: 18px 0 0;
  color: var(--ink-2);
  max-width: 46ch;
}

/* The two ways past the form. They sit where the single email link used to,
   so the column is no taller than it was, and they are deliberately quieter
   than the submit button: this is the door for somebody who already knows
   what they want, not a competing call to action. */
.contact-routes {
  margin-top: 28px;
  display: grid;
  gap: 10px;
}

.contact-route {
  display: block;
  padding: 15px 17px;
  border: 1px solid var(--rule-ink);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}

.contact-route:hover {
  border-color: var(--ink-2);
  background: var(--paper-2);
}

.contact-route-h {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.contact-route-p {
  display: block;
  margin-top: 3px;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.contact-next {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-ink);
}

.contact-next h3 {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-next ol {
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--ink-2);
}

.contact-next li {
  margin-bottom: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--ember);
  outline-offset: 1px;
}

.form-group textarea {
  resize: vertical;
}

.req {
  color: var(--ember);
}

.form-error {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--alert);
}

.form-note {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* The note carries two very different messages and used to render both in the
   same grey. Failure now reads as failure, sat on a tinted panel with the
   address to write to instead. */
.form-note.is-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--alert) 28%, transparent);
  background: color-mix(in srgb, var(--alert) 7%, transparent);
  color: var(--alert-deep);
}

.form-note.is-error svg {
  flex: none;
  margin-top: 1px;
}

.form-note.is-error a {
  color: inherit;
  font-weight: 600;
}

/* Confirmation, shown where the form was. A visitor who has just handed over
   their name and their problem deserves more than a line of grey text under a
   form that still looks like it needs filling in. */
.form-done {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--rule-ink);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.form-done:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.form-done-mark {
  display: block;
  color: var(--ember);
  margin-bottom: 14px;
}

.form-done h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  letter-spacing: -0.005em;
}

.form-done p {
  margin: 10px 0 0;
  color: var(--ink-2);
}

/* ============================ FOOTER ============================ */

.footer {
  background: var(--night-deep);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
}

.footer-tagline {
  margin: 18px 0 0;
  color: var(--white-3);
  max-width: 28ch;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--white-3);
}

.footer-col a {
  color: var(--white-2);
  text-decoration: none;
  padding: 4px 0;
}

.footer-col a:hover {
  color: var(--white);
}

/* The language currently being read, in the footer list. */
.footer-col a[aria-current] {
  color: var(--white);
}

.footer-bottom {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--white-3);
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .nav-links.open {
    display: flex;
    position: absolute;
    inset: 100% var(--pad-x) auto;
    flex-direction: column;
    gap: 0;
    margin: 8px 0 0;
    padding: 8px 0;
    background: var(--land-2);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
  }

  .nav-links.open .nav-link {
    padding: 13px 18px;
  }

  /* In the phone menu the switcher becomes its own row, under a rule, so the
     four codes do not read as a fifth section link. */
  .nav-links.open .lang-switch {
    padding: 10px 12px;
    margin-top: 4px;
    border-top: 1px solid var(--hairline);
  }

  .nav-links.open .lang-link {
    padding: 9px 10px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-inner {
    justify-content: space-between;
  }

  .nav-actions .btn {
    display: none;
  }

  .hero-inner {
    padding-bottom: clamp(14rem, 60vw, 22rem);
  }

  /* A phone gets its own portrait render, composed with the horizon below
     the buttons, so the crop no longer has to be nudged sideways. Its
     bottom row is a different green from the wide one, and the flat colour
     has to match whichever image is actually on screen or the seam shows. */
  .hero-scene {
    object-position: center bottom;
  }

  .hero,
  .section-join {
    background: #040704;
  }

  .step {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Sideways scrolling put the "Aquí dentro" column off screen, so a phone
     only ever saw the cloud column. Stacked instead, our side last, which
     is the one that should close the argument. */
  .compare-scroll {
    overflow-x: visible;
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
    min-width: 0;
  }

  .compare thead {
    display: none;
  }

  .compare tr {
    padding: 22px 0;
    border-bottom: 1px solid var(--rule-ink);
  }

  .compare tbody th {
    width: auto;
    padding: 0 0 12px;
    border: 0;
    font-size: 1.0625rem;
  }

  .compare td {
    padding: 0 0 0 14px;
    border: 0;
    border-left: 2px solid var(--rule-ink);
    margin-bottom: 12px;
  }

  .compare td:last-child {
    margin-bottom: 0;
    border-left-color: var(--ember);
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

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

/* ============================ PÁGINAS LEGALES ============================ */

/* Long dense text, so these run on the paper ground the rest of the site
   uses for reading sections. Ink on cream is far easier on a wall of
   clauses than light type on a dark field. */

.legal-page {
  background: var(--paper);
  color: var(--ink);
}

.legal-page .nav {
  position: static;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule-ink);
}

/* The logo is forced white over the hero photo. On paper it goes solid ink
   instead, which also keeps the violet out of a palette that dropped it. */
.legal-page .brand-lockup {
  filter: brightness(0);
}

.legal-main {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--pad-x) clamp(4rem, 8vw, 6rem);
}

.legal-main h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  letter-spacing: -0.005em;
  line-height: 1.06;
}

.legal-updated {
  display: block;
  margin-top: 16px;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.legal-main h2 {
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-ink);
}

.legal-main p,
.legal-main li {
  color: var(--ink-2);
  margin: 16px 0 0;
}

.legal-main ul {
  margin: 16px 0 0;
  padding-left: 20px;
}

/* Naming a cookie exactly is the point of a cookie policy, so the name is set
   apart from the text around it. System monospace on purpose: a third typeface
   would be a third font to download, on the one page that promises we do not
   do that. */
.legal-main code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--paper-2);
}

.legal-main a {
  color: var(--ink);
  text-decoration-color: var(--ember);
  text-underline-offset: 3px;
}

.legal-main a:hover {
  color: var(--ember);
}

/* An unfinished document says so plainly rather than hiding it in the run
   of text, because someone has to notice it before the site goes out. */
.legal-pending {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 18px 20px;
  border-left: 2px solid var(--ember);
  background: var(--paper-2);
  font-size: 0.9375rem;
}

.legal-back {
  display: inline-block;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.legal-back:hover {
  color: var(--ember);
}