/* Nomads RTW — component and template styles
   Every value comes from tokens.css. If you need a number that is not a token,
   the design is wrong or the token is missing: add it to tokens.css, do not
   inline it here and never inline it on an Elementor widget.

   Class prefix nm- so nothing collides with Elementor or Hello. */

/* ---------------------------------------------------------------- 1. Base */

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

body.nomads {
  margin: 0;
  /* clip, no hidden: hidden rompería el índice pegajoso del artículo. Evita
     el par de píxeles de scroll lateral que deja alguna caja a sangre. */
  overflow-x: clip;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--body);
  line-height: var(--body-lh);
}

.nomads img { max-width: 100%; height: auto; display: block; }

/* Hello Elementor's reset paints every link and every button border in a pink
   of its own. A link takes its colour from the component it lives in. */
:where(.nomads) a { color: inherit; text-decoration: none; }
:where(.nomads) :is(button, [type="button"], [type="submit"]) { border-color: transparent; color: inherit; }

.nomads :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.nm-inverse :focus-visible,
.nm-footer :focus-visible {
  outline-color: var(--focus-inverse);
}

.nm-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* -------------------------------------------------------------- 2. Layout */

.nm-page  { max-width: var(--measure-page);  margin-inline: auto; padding-inline: var(--gutter-desktop); }
.nm-media { max-width: var(--measure-media); margin-inline: auto; }
.nm-text  { max-width: var(--measure-text);  margin-inline: auto; }
.nm-band  { background: var(--surface-sunken); padding-block: var(--space-9); }
.nm-band--inverse { background: var(--surface-inverse); color: var(--ink-inverse); }
.nm-section { margin-top: var(--space-10); }

/* ---------------------------------------------------------------- 3. Type */

.nm-eyebrow {
  font-size: var(--eyebrow); line-height: var(--eyebrow-lh);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 var(--space-2);
}
.nm-eyebrow--accent { color: var(--accent-figure); }
.nm-eyebrow--on-inverse { color: var(--accent-inverse); }

.nm-lede { font-size: var(--lede); line-height: var(--lede-lh); color: var(--ink-muted); margin: 0 0 var(--space-5); }
.nm-meta { font-size: var(--meta); line-height: var(--meta-lh); font-weight: 500; color: var(--ink-faint); margin: 0; }
.nm-meta .nm-readtime { color: var(--accent); font-weight: 600; }
.nm-meta .nm-dot { color: var(--ink-faint); }
.nm-caption { font-size: var(--caption); line-height: var(--caption-lh); font-style: italic; color: var(--ink-faint); margin: var(--space-2) 0 0; }
.nm-fine { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-faint); margin: var(--space-4) 0 0; }

.nm-display-0 { font-family: var(--font-display); font-size: var(--display-0); line-height: var(--display-0-lh); font-weight: 500; letter-spacing: -0.03em; margin: 0; }
.nm-display-1 { font-family: var(--font-display); font-size: var(--display-1); line-height: var(--display-1-lh); font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.nm-display-2 { font-family: var(--font-display); font-size: var(--display-2); line-height: var(--display-2-lh); font-weight: 500; letter-spacing: -0.015em; margin: 0; }
.nm-display-3 { font-family: var(--font-display); font-size: var(--display-3); line-height: var(--display-3-lh); font-weight: 500; letter-spacing: -0.01em; margin: 0; }

/* ------------------------------------------------- 4. Masthead and header */

.nm-masthead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: 10px var(--gutter-desktop);
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--eyebrow); line-height: var(--eyebrow-lh);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}

.nm-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-7);
  padding: var(--space-6) var(--gutter-desktop) var(--space-5);
  border-bottom: 1px solid var(--line-hairline);
  /* The header does not stick. See SiteHeader in the design system. */
}

.nm-wordmark { display: inline-flex; align-items: baseline; gap: var(--space-2); text-decoration: none; }
.nm-wordmark__name { font-family: var(--font-display); font-size: var(--wordmark); line-height: var(--wordmark-lh); font-weight: 600; letter-spacing: 0.2em; color: var(--ink); }
.nm-wordmark__rtw  { font-size: var(--wordmark-rtw); line-height: var(--wordmark-rtw-lh); font-weight: 700; letter-spacing: 0.24em; color: var(--accent-figure); }
.nm-inverse .nm-wordmark__name, .nm-footer .nm-wordmark__name { color: var(--ink-inverse); }
.nm-inverse .nm-wordmark__rtw,  .nm-footer .nm-wordmark__rtw  { color: var(--accent-inverse); }

.nm-nav { display: flex; gap: var(--space-6); align-items: center; }
.nm-nav a {
  font-size: var(--nav); line-height: var(--nav-lh); font-weight: 500;
  color: var(--ink-muted); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.nm-nav a:hover { color: var(--accent); border-bottom-color: var(--accent-bright); }
.nm-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-bright); }

.nm-burger { display: none; width: 44px; height: 44px; background: none; border: 0; padding: 11px; cursor: pointer; }
.nm-burger span { display: block; height: 1.5px; background: var(--ink); margin: 5px 0; }

.nm-wordmark__svg { display: block; width: var(--wordmark-w); color: var(--ink); }
.nm-wordmark__svg svg { display: block; width: 100%; height: auto; }
/* Como la versión en imagen: caja de bloque. En inline-flex con alineación a
   la línea base, el SVG arrastraba el interlineado y la cabecera crecía 10px. */
.nm-wordmark:has(.nm-wordmark__svg) { display: block; line-height: 0; }
.nm-wordmark__img { display: block; width: var(--wordmark-w); height: auto; }
.nm-wordmark--image { display: block; }
.nm-wordmark--image .nm-wordmark__img--inverse { display: none; }
:is(.nm-inverse, .nm-footer) .nm-wordmark--image .nm-wordmark__img--inverse { display: block; }
:is(.nm-inverse, .nm-footer) .nm-wordmark--image .nm-wordmark__img--normal { display: none; }
.nm-inverse .nm-wordmark__svg, .nm-footer .nm-wordmark__svg { color: var(--ink-inverse); }

/* Mobile navigation: a plain list under the bar. Not a drawer, not an overlay. */
.nm-mobilenav { padding-block: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line-hairline); }
.nm-mobilenav[hidden] { display: none; }
.nm-mobilenav a { display: block; padding: var(--space-3) 0; font-size: var(--nav); line-height: var(--nav-lh); font-weight: 500; color: var(--ink); text-decoration: none; }

/* ------------------------------------------------------------- 5. Buttons */

.nm-btn {
  display: inline-block; font-family: var(--font-text);
  font-size: var(--button); line-height: var(--button-lh); font-weight: 600; letter-spacing: 0.01em;
  padding: var(--space-4) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.nm-btn--ink    { background: var(--ink); color: var(--ink-inverse); }
.nm-btn--ink:hover { background: var(--accent); color: var(--on-accent); }
.nm-btn--accent { background: var(--accent-bright); color: var(--on-accent-bright); }
.nm-btn--accent:hover { background: var(--accent); color: var(--on-accent); }
.nm-btn--quiet  { background: transparent; color: var(--ink); border-color: var(--line-control); }
.nm-btn--quiet:hover { border-color: var(--ink); }
.nm-btn--header { padding: 14px var(--space-5); }

.nm-textlink {
  font-size: var(--nav); line-height: var(--nav-lh); font-weight: 500;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-bright);
}
.nm-textlink:hover { color: var(--accent-strong); border-bottom-color: var(--accent-bright); }

.nm-input {
  font-family: var(--font-text); font-size: var(--body-compact); line-height: var(--body-compact-lh);
  color: var(--ink); background: var(--surface-raised);
  border: 1px solid var(--line-control); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.nm-input::placeholder { color: var(--ink-faint); }

/* ---------------------------------------------------------------- 6. Hero */

.nm-hero { position: relative; height: 780px; overflow: hidden; }
.nm-hero__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.nm-hero__scrim { display: none; }
/* Elementor makes every widget a containing block, so a scrim that lives in a
   widget of its own collapses to nothing. It belongs to the hero itself. */
.nm-hero::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--scrim-hero); pointer-events: none; z-index: 0;
}
.nm-hero__img { z-index: 0; }
.nm-hero__body { z-index: 1; }
.nm-hero__body { position: absolute; left: var(--gutter-desktop); right: var(--gutter-desktop); bottom: var(--gutter-desktop); }
.nm-hero__title { color: var(--ink-on-media); margin-bottom: var(--space-5); max-width: 940px; }
.nm-hero__sub { font-size: var(--lede); line-height: var(--lede-lh); color: var(--ink-on-media); margin: 0 0 var(--space-6); max-width: 56ch; }

.nm-coverlines {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6);
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--hairline-on-media);
}
.nm-coverlines a { display: block; text-decoration: none; }
.nm-coverlines a + a { padding-left: var(--space-6); border-left: 1px solid var(--hairline-on-media); }
.nm-coverlines__title {
  font-family: var(--font-display); font-size: var(--lede); line-height: var(--lede-tight-lh); font-weight: 500;
  color: var(--ink-on-media); margin: 0; transition: color var(--t-fast) linear;
}
.nm-coverlines a:hover .nm-coverlines__title { color: var(--accent-inverse); }

/* ------------------------------------------------- 7. Opening statement */

.nm-statement { max-width: 860px; margin: var(--space-9) auto 0; text-align: center; }
.nm-statement__rule { display: inline-block; width: 40px; height: 2px; background: var(--accent-bright); margin-bottom: var(--space-6); }
.nm-statement p {
  font-family: var(--font-display); font-size: var(--statement); line-height: var(--statement-lh);
  font-weight: 400; font-style: italic; color: var(--ink); margin: 0 0 var(--space-4);
}

/* ---------------------------------------------------- 8. Destination row */

.nm-sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.nm-sectionhead--ruled { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-strong); margin-bottom: var(--space-7); }

.nm-destinations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 348px; gap: var(--space-4); }
.nm-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md); text-decoration: none; }
.nm-tile--feature { grid-column: span 2; grid-row: span 2; }
.nm-tile__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.nm-tile__scrim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--scrim-tile); transition: opacity var(--t-med) linear; }
.nm-tile:hover .nm-tile__img { transform: scale(1.04); }
.nm-tile:hover .nm-tile__scrim { background: var(--scrim-tile-hover); }
.nm-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4); }
.nm-tile--feature .nm-tile__body { padding: var(--space-6); }
.nm-tile__name { display: block; font-family: var(--font-display); font-size: var(--h3); line-height: var(--tile-name-lh); font-weight: 600; color: var(--ink-on-media); }
.nm-tile--feature .nm-tile__name { font-size: var(--headline-card); line-height: var(--headline-card-lh); font-weight: 500; letter-spacing: -0.02em; }
.nm-tile__count {
  display: inline-block; margin-top: var(--space-2);
  font-size: var(--eyebrow); line-height: var(--eyebrow-lh); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-on-media); opacity: 0.82;
}
/* radius-pill is only ever used here, on at most one tile, for one word */
.nm-tile__pill {
  position: absolute; top: var(--space-3); left: var(--space-3);
  background: var(--surface-page); color: var(--ink);
  font-size: var(--eyebrow); line-height: var(--eyebrow-lh); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill);
}

/* ----------------------------------------------------- 9. Article cards */

.nm-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.nm-grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.nm-grid-2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.nm-grid-4  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

.nm-card { display: block; text-decoration: none; color: inherit; }
.nm-card__media { overflow: hidden; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.nm-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 500ms var(--ease); }
.nm-card:hover .nm-card__media img { transform: scale(1.04); }
.nm-card__title { font-family: var(--font-display); font-size: var(--h3); line-height: var(--h3-lh); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-2); transition: color var(--t-fast) linear; }
.nm-card:hover .nm-card__title { color: var(--accent); }
.nm-card__excerpt { font-size: var(--body-compact); line-height: var(--body-compact-lh); color: var(--ink-muted); margin: 0 0 var(--space-4); }

.nm-card--boxed { background: var(--surface-raised); border: 1px solid var(--line-hairline); border-radius: var(--radius-md); overflow: hidden; }
.nm-card--boxed .nm-card__media { border-radius: 0; margin-bottom: 0; }
.nm-card--boxed .nm-card__body { padding: var(--space-6); }
.nm-card--boxed .nm-card__title { font-size: var(--card-title); line-height: var(--card-title-lh); font-weight: 500; letter-spacing: -0.01em; margin-bottom: var(--space-3); }

/* The lead article: the copy block steps up over its own photograph */
.nm-card--lead { grid-column: span 8; }
.nm-card--lead .nm-card__media { border-radius: 0; margin-bottom: 0; }
.nm-card--lead .nm-card__body { position: relative; z-index: 1; background: var(--surface-page); margin: -80px var(--space-9) 0 0; padding: var(--space-6) var(--space-6) 0 0; }
.nm-card--lead .nm-card__title { font-size: var(--headline-card); line-height: var(--headline-card-lh); font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.nm-card--lead .nm-card__excerpt { font-size: var(--body); line-height: var(--body-lh); }

.nm-ranked { grid-column: span 4; }
.nm-ranked__label { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-strong); margin-bottom: var(--space-5); }
.nm-ranked__item {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); align-items: start;
  text-decoration: none; color: inherit;
  padding-bottom: var(--space-5); margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-hairline);
}
.nm-ranked__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.nm-ranked__num { font-family: var(--font-display); font-size: var(--ranked-num); line-height: var(--ranked-num-lh); font-weight: 600; color: var(--accent-figure); }
.nm-ranked__title { display: block; font-family: var(--font-display); font-size: var(--lede); line-height: var(--lede-tight-lh); font-weight: 600; color: var(--ink); transition: color var(--t-fast) linear; }
.nm-ranked__item:hover .nm-ranked__title { color: var(--accent); }

/* -------------------------------------------------------- 10. Article */

.nm-article-head { width: var(--measure-text); margin: var(--space-9) auto 0; }
.nm-article-head h1 { font-family: var(--font-display); font-size: var(--display-2); line-height: var(--display-2-lh); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 var(--space-5); }
.nm-article-head .nm-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding-bottom: var(--space-6); border-bottom: 1px solid var(--line-hairline); }

.nm-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6);
  padding: var(--space-6) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.nm-facts b { display: block; font-family: var(--font-display); font-size: var(--display-3); line-height: var(--facts-num-lh); font-weight: 600; color: var(--accent-figure); }
.nm-facts span { font-size: var(--meta); line-height: var(--meta-lh); font-weight: 500; color: var(--ink-faint); }

.nm-article-layout {
  display: grid; grid-template-columns: 240px var(--measure-text); gap: var(--space-8);
  justify-content: center; max-width: var(--measure-media); margin: var(--space-8) auto 0;
}

/* Table of contents — a list of links, never a box */
.nm-toc { position: sticky; top: var(--space-6); align-self: start; }
.nm-toc h4 { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-hairline); }
.nm-toc ol { list-style: none; margin: 0; padding: 0; }
.nm-toc li { margin-bottom: var(--space-3); }
.nm-toc a {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--space-1);
  font-size: var(--nav); line-height: var(--nav-tight-lh); font-weight: 500; color: var(--ink-muted);
  text-decoration: none; transition: color var(--t-fast) linear;
}
.nm-toc a:hover { color: var(--accent); }
.nm-toc__num { font-size: var(--eyebrow); font-weight: 700; letter-spacing: 0.06em; color: var(--ink-faint); }
.nm-toc li.is-current a { color: var(--ink); font-weight: 600; }
.nm-toc li.is-current .nm-toc__num { color: var(--accent-figure); }
.nm-toc__cta { display: block; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line-hairline); font-size: var(--nav); line-height: var(--nav-tight-lh); font-weight: 600; color: var(--accent); text-decoration: none; }

/* Mobile table of contents: the only sheet in the system */
.nm-toc-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--sheet-h); box-sizing: border-box; padding: var(--space-2) var(--gutter-mobile);
  background: var(--surface-raised); border: 0; border-top: 1px solid var(--line-hairline);
  box-shadow: var(--shadow-sheet); font-family: var(--font-text); text-align: left; cursor: pointer;
}
.nm-toc-bar[hidden] { display: none !important; }
.nm-toc-bar__title { display: block; font-size: var(--nav); line-height: var(--nav-lh); font-weight: 600; color: var(--ink); }
.nm-toc-bar__count { display: block; font-size: var(--meta); line-height: var(--meta-lh); color: var(--ink-faint); }
.nm-toc-bar__chev { width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-135deg); margin-right: 4px; }

/* The list the sheet opens. Same links, no second styling. */
.nm-toc-panel {
  position: fixed; left: 0; right: 0; bottom: var(--sheet-h); z-index: 39;
  max-height: 60vh; overflow-y: auto;
  background: var(--surface-raised); border-top: 1px solid var(--line-hairline);
  box-shadow: var(--shadow-sheet); padding: var(--space-5) var(--gutter-mobile);
}
.nm-toc-panel[hidden] { display: none; }
.nm-toc-panel ol { list-style: none; margin: 0; padding: 0; }
.nm-toc-panel li { margin-bottom: var(--space-3); }
.nm-toc-panel a {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--space-1);
  font-size: var(--nav); line-height: var(--nav-tight-lh); font-weight: 500;
  color: var(--ink-muted); text-decoration: none;
}

/* Article body. These selectors apply to the stored post HTML, which is frozen:
   do not add classes to it, style the elements.
   .entry-content is the same body under Hello Elementor's own template. */
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) p { font-size: var(--body); line-height: var(--body-lh); margin: 0 0 var(--space-5); }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) h2 { font-family: var(--font-display); font-size: var(--h2); line-height: var(--h2-lh); font-weight: 500; letter-spacing: -0.01em; margin: var(--space-7) 0 var(--space-4); scroll-margin-top: var(--space-6); }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) h3 { font-family: var(--font-display); font-size: var(--h3); line-height: var(--h3-lh); font-weight: 600; margin: var(--space-6) 0 var(--space-3); }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) ul, :is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) ol { margin: 0 0 var(--space-5); padding-left: var(--space-5); }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) li { font-size: var(--body); line-height: var(--body-lh); margin-bottom: var(--space-2); }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) a:not(.nm-btn) { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-bright); }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) a:not(.nm-btn):hover { color: var(--accent-strong); border-bottom-color: var(--accent-bright); }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-size: var(--dropcap); line-height: var(--dropcap-lh);
  font-weight: 600; padding: 6px 12px 0 0; color: var(--ink);
}

:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) figure { margin: var(--space-7) 0; }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) figure img { width: 100%; height: auto; }
/* El 3:2 del cuerpo es opt-in: una foto cuadrada o un pin vertical perdían medio encuadre. */
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) :is(figure.nm-figure--3x2, figure.nm-figure--bleed) img { aspect-ratio: 3 / 2; object-fit: cover; }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) figcaption { font-size: var(--caption); line-height: var(--caption-lh); font-style: italic; color: var(--ink-faint); margin-top: var(--space-2); }
.nm-figure--breakout { width: var(--measure-media); margin-inline: calc((var(--measure-text) - var(--measure-media)) / 2); }
.nm-figure--bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) blockquote { margin: var(--space-7) 0; padding-top: var(--space-5); border-top: 2px solid var(--accent-bright); }
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content) blockquote p { font-family: var(--font-display); font-size: var(--quote); line-height: var(--quote-lh); font-weight: 400; font-style: italic; margin: 0; }

:is(.nm-note, .fusion-alert) { margin: var(--space-7) 0; padding-left: var(--space-5); border-left: 2px solid var(--line-strong); }
:is(.nm-note, .fusion-alert) p { font-size: var(--body-compact); line-height: var(--body-compact-lh); color: var(--ink-muted); margin: 0; }
:is(.nm-note, .fusion-alert) strong { color: var(--ink); }

.nm-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-5); }
.nm-table caption { text-align: left; font-size: var(--eyebrow); line-height: var(--eyebrow-lh); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: var(--space-3); }
.nm-table tr { border-top: 1px solid var(--line-hairline); }
.nm-table tr:first-child { border-top-color: var(--line-strong); }
.nm-table tr:last-child { border-bottom: 1px solid var(--line-strong); }
.nm-table th { text-align: left; font-size: var(--body-compact); line-height: var(--body-compact-lh); font-weight: 500; color: var(--ink); padding: var(--space-3) 0; }
.nm-table td { text-align: right; padding: var(--space-3) 0; font-size: var(--small); color: var(--ink-faint); }
.nm-table td.nm-figure-cell { font-family: var(--font-display); font-size: var(--lede); font-weight: 600; color: var(--accent-figure); }

/* Quick answers */
.nm-faq { margin: var(--space-7) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--line-strong); }
.nm-faq__item { border-bottom: 1px solid var(--line-hairline); }
.nm-faq__q {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: transparent; border: 0; padding: var(--space-5) var(--space-2); cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--lede); line-height: var(--tile-name-lh); font-weight: 600; color: var(--ink);
  transition: background-color 160ms linear;
}
.nm-faq__q:hover { background: var(--surface-sunken); }
.nm-faq__sign { font-family: var(--font-text); font-size: var(--faq-sign); font-weight: 400; color: var(--accent-figure); transition: transform 220ms var(--ease); }
.nm-faq__q[aria-expanded="true"] .nm-faq__sign { transform: rotate(45deg); }
.nm-faq__a { font-size: var(--body-compact); line-height: var(--body-compact-lh); color: var(--ink-muted); margin: 0 0 var(--space-5); padding: 0 var(--space-2); }
.nm-faq__a[hidden] { display: none; }

.nm-article-hero { margin-top: var(--space-7); }
/* Hello Elementor's own templates until the Elementor ones exist: it wraps the
   post body in .page-content and the title in .page-header. */
.nomads :is(.entry-content, .page-content) { max-width: var(--measure-text); margin-inline: auto; padding-inline: var(--gutter-mobile); }
.nomads .page-header { max-width: var(--measure-text); margin: var(--space-9) auto var(--space-6); padding-inline: var(--gutter-mobile); }
.nomads .page-header .entry-title { font-family: var(--font-display); font-size: var(--display-2); line-height: var(--display-2-lh); font-weight: 500; letter-spacing: -0.015em; margin: 0; }

/* «Show the other N guides». En el diseño aprobado (reference/destino.html) es
   un botón callado con filete alrededor, centrado, con 64px por encima y 128
   por debajo, no un enlace subrayado: es el final del archivo y tiene que
   pesar. Con 16px de relleno arriba y abajo cumple además los 44px de zona
   táctil del §9. */
.nm-more { margin: var(--space-8) 0 var(--space-10); text-align: center; }
.nm-more a {
  display: inline-block;
  font-size: var(--button); line-height: var(--button-lh); font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line-control); border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  transition: color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.nm-more a:hover { color: var(--accent); border-color: var(--accent); }

/* --------------------------------------------- 11. Capture and download */

.nm-capture { background: var(--accent-soft); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-7) 0; }
.nm-capture .nm-eyebrow { color: var(--accent); }
.nm-capture h3 { font-family: var(--font-display); font-size: var(--h3); line-height: var(--h3-lh); font-weight: 600; margin: 0 0 var(--space-2); }
.nm-capture p { font-size: var(--body-compact); line-height: var(--body-compact-lh); color: var(--ink-muted); margin: 0 0 var(--space-5); }
.nm-form { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.nm-form .nm-input { flex: 1 1 220px; }

.nm-download {
  max-width: 860px; margin: var(--space-9) auto 0;
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  display: grid; grid-template-columns: 180px 1fr; gap: var(--space-7); padding: var(--space-7); align-items: center;
}
.nm-download ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.nm-download li { font-size: var(--body-compact); line-height: var(--body-compact-lh); color: var(--ink-muted); padding-left: var(--space-5); position: relative; }
.nm-download li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 2px; background: var(--accent-bright); }
.nm-download .nm-input { background: var(--surface-page); }

.nm-pdfcover {
  aspect-ratio: 3 / 4; background: var(--surface-inverse); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-4);
}
.nm-pdfcover__rule { display: block; height: 2px; width: 36px; background: var(--accent-inverse); margin-bottom: var(--space-3); }
.nm-pdfcover__title { font-family: var(--font-display); font-size: var(--lede); line-height: var(--pdfcover-lh); font-weight: 600; color: var(--ink-inverse); }

/* ---------------------------------------------------- 12. Destination */

.nm-filters { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line-hairline); margin: var(--space-9) 0 var(--space-6); }
.nm-filters a {
  font-size: var(--nav); line-height: var(--nav-lh); font-weight: 500; color: var(--ink-muted);
  text-decoration: none; padding-bottom: var(--space-3); border-bottom: 2px solid transparent;
  transition: color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.nm-filters a:hover { color: var(--accent); border-bottom-color: var(--accent-bright); }
.nm-filters a.is-current { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent-bright); }

.nm-lead-card {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-7); align-items: center;
  background: var(--surface-raised); border: 1px solid var(--line-hairline); border-radius: var(--radius-md);
  overflow: hidden; text-decoration: none; color: inherit; margin-bottom: var(--space-7);
}
.nm-lead-card img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.nm-lead-card__body { padding: var(--space-7) var(--space-7) var(--space-7) 0; }
.nm-lead-card h2 { font-family: var(--font-display); font-size: var(--lead-card); line-height: var(--lead-card-lh); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-4); transition: color var(--t-fast) linear; }
.nm-lead-card:hover h2 { color: var(--accent); }

.nm-statpanel { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.nm-statpanel b { display: block; font-family: var(--font-display); font-size: var(--statpanel-num); line-height: var(--statpanel-num-lh); font-weight: 600; color: var(--accent-figure); }
.nm-statpanel span { font-size: var(--meta); line-height: var(--meta-lh); font-weight: 500; color: var(--ink-faint); }

/* --------------------------------------------------------- 13. About */

.nm-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--line-strong); }
.nm-principles__num { font-family: var(--font-display); font-size: var(--display-3); line-height: var(--display-3-lh); font-weight: 600; color: var(--accent-figure); margin: 0 0 var(--space-2); }
.nm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); background: var(--surface-sunken); padding: var(--space-7); border-radius: var(--radius-md); }
.nm-stats b { display: block; font-family: var(--font-display); font-size: var(--display-3); line-height: var(--display-3-lh); font-weight: 600; color: var(--ink); }
.nm-stats span { font-size: var(--meta); line-height: var(--meta-lh); font-weight: 500; color: var(--ink-faint); }

/* ---------------------------------------------------- 14. Guide landing */

.nm-guidehero { background: var(--surface-inverse); color: var(--ink-inverse); }
.nm-guidehero .nm-hero__body { position: static; }
.nm-guidehero__grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-9); align-items: center; padding: var(--space-8) var(--gutter-desktop) var(--space-10); }
.nm-guidehero h1 { font-family: var(--font-display); font-size: var(--guide-title); line-height: var(--guide-title-lh); font-weight: 500; letter-spacing: -0.03em; margin: 0 0 var(--space-5); }
.nm-guidehero .nm-input { background: var(--surface-page); padding: var(--space-4); }

.nm-coverstack { position: relative; aspect-ratio: 3 / 4; }
.nm-coverstack__cv {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--surface-page); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-5);
}
.nm-coverstack__cv--back  { transform: rotate(-6deg) translateX(-22px); opacity: 0.32; }
.nm-coverstack__cv--mid   { transform: rotate(3.5deg) translateX(12px); opacity: 0.58; }
.nm-coverstack__cv--front { padding: 28px; transition: transform 400ms var(--ease); }
.nm-coverstack:hover .nm-coverstack__cv--front { transform: translateY(-8px) rotate(-1deg); }

.nm-minicover { aspect-ratio: 3 / 4; background: var(--surface-inverse); border: 2px solid transparent; border-radius: var(--radius-sm); display: flex; align-items: flex-end; padding: var(--space-4); margin-bottom: var(--space-3); transition: transform var(--t-med) var(--ease), border-color 160ms linear; }
.nm-minicover span { font-family: var(--font-display); font-size: var(--minicover); line-height: var(--minicover-lh); font-weight: 600; color: var(--ink-inverse); }
a:hover > .nm-minicover { transform: translateY(-6px); }
a.is-current > .nm-minicover { border-color: var(--accent-bright); }

/* --------------------------------------------------------- 15. Footer */

.nm-footer { background: var(--surface-inverse); color: var(--ink-inverse); padding: var(--space-9) var(--gutter-desktop) var(--space-7); }
.nm-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); align-items: start; }
.nm-footer h4 { font-size: var(--eyebrow); line-height: var(--eyebrow-lh); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-inverse); margin: 0 0 var(--space-4); }
.nm-footer ul { list-style: none; margin: 0; padding: 0; }
.nm-footer li { margin-bottom: var(--space-3); }
.nm-footer a { font-size: var(--nav); line-height: var(--small-lh); color: var(--ink-inverse); text-decoration: none; opacity: 0.82; border-bottom: 1px solid transparent; transition: opacity var(--t-fast) linear, border-color var(--t-fast) linear; }
.nm-footer a:hover { opacity: 1; border-bottom-color: var(--focus-inverse); }
.nm-footer__tag { font-size: var(--nav); line-height: var(--small-lh); opacity: 0.72; margin: 0; max-width: 26ch; }
.nm-footer__rule { border: 0; border-top: 1px solid var(--hairline-inverse); margin: var(--space-8) 0 var(--space-5); }
.nm-footer__base { display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; font-size: var(--nav); line-height: var(--small-lh); opacity: 0.6; }

/* -------------------------------------------------------- 16. Motion
   CSS only, transform and opacity only, nothing triggered by scroll position.
   Total cost is this block. */

@keyframes nm-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes nm-kenburns {
  from { transform: scale(1.05) translate3d(-1%, -0.8%, 0); }
  to   { transform: scale(1.18) translate3d(1%, 0.8%, 0); }
}
@keyframes nm-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nm-draw { from { stroke-dashoffset: var(--route-len, 1100); } to { stroke-dashoffset: 0; } }

.nm-rise { animation: nm-rise 0.8s var(--ease) both; }
.nm-rise--1 { animation-delay: 0.08s; }
.nm-rise--2 { animation-delay: 0.16s; }
.nm-rise--3 { animation-delay: 0.24s; }
.nm-rise--4 { animation-delay: 0.32s; }
.nm-hero__img { animation: nm-kenburns 20s ease-in-out infinite alternate; will-change: transform; }
.nm-statement__rule { transform-origin: left center; animation: nm-rule 0.9s 0.25s var(--ease) both; }
.nm-route { fill: none; stroke: var(--accent-figure); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--route-len, 1100); animation: nm-draw 2.6s 0.4s ease-out both; }
.nm-routemap { margin: var(--space-7) 0; }
.nm-routemap svg { display: block; width: 100%; height: auto; }
.nm-routemap .stop { fill: var(--ink); }
.nm-routemap .stoplabel { fill: var(--ink-faint); font-size: var(--meta); font-weight: 600; }

/* Reading progress: one transform on one element, written by nomads.js */
.nm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--accent-bright); transform: scaleX(0); transform-origin: left center; z-index: 50; will-change: transform; }


/* Los teasers del hero entran uno a uno (§6: kicker → titular → subtítulo → teasers,
   80ms entre cada uno). El contenedor los movía como un bloque. */
.nm-coverlines.nm-rise { animation: none; }
.nm-coverlines.nm-rise > * { animation: nm-rise 0.8s var(--ease) both; }
.nm-coverlines.nm-rise > *:nth-child(1) { animation-delay: 0.32s; }
.nm-coverlines.nm-rise > *:nth-child(2) { animation-delay: 0.40s; }
.nm-coverlines.nm-rise > *:nth-child(3) { animation-delay: 0.48s; }

/* Revelado al entrar en pantalla. Decisión de Sergio del 20-sep-2026, que revisa la
   regla «nada disparado por el scroll» del §6. Se hace con scroll-driven animations
   del navegador: CERO JavaScript, cero listeners, cero librerías. Donde no hay
   soporte no pasa nada y el contenido se ve. Nunca toca el hero, que es el LCP. */
@keyframes nm-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nm-statement, .nm-destinations, .nm-grid-12, .nm-band, .nm-ranked__item {
      animation: nm-reveal 0.6s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .nm-ranked__item:nth-child(2) { animation-range: entry 4% entry 59%; }
    .nm-ranked__item:nth-child(3) { animation-range: entry 8% entry 63%; }
    .nm-ranked__item:nth-child(4) { animation-range: entry 12% entry 67%; }
    .nm-ranked__item:nth-child(5) { animation-range: entry 16% entry 71%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nomads *, .nomads *::before, .nomads *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ----------------------------------------------------- 17. Responsive */

@media (max-width: 1024px) {
  .nm-article-layout { grid-template-columns: minmax(0, var(--measure-text)); }
  .nm-toc { display: none; }
  .nm-toc-bar { display: flex; }
  .nm-download { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nm-destinations { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; }
  .nm-grid-3, .nm-grid-2 { grid-template-columns: 1fr; }
  .nm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-card--lead, .nm-ranked { grid-column: span 12; }
  .nm-card--lead .nm-card__body { margin: 0; padding: var(--space-5) 0 0; }
  .nm-lead-card { grid-template-columns: 1fr; }
  .nm-lead-card__body { padding: var(--space-6); }
  .nm-principles, .nm-guidehero__grid { grid-template-columns: 1fr; }
  .nm-statpanel, .nm-facts, .nm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-filters { overflow-x: auto; }   /* the one place horizontal scroll is allowed */
  .nm-routemap { overflow-x: auto; }
  .nm-routemap svg { min-width: 560px; }
}

@media (max-width: 768px) {
  :root {
    --display-0: 42px; --display-0-lh: 42px;
    --display-1: 38px; --display-1-lh: 38px;
    --display-2: 32px; --display-2-lh: 36px;
    --display-3: 27px; --display-3-lh: 32px;
    --h2: 25px; --h2-lh: 32px;
    --h3: 21px; --h3-lh: 28px;
    --lede: 19px; --lede-lh: 30px;
    --body: 17px; --body-lh: 29px;
    --dropcap: 66px; --dropcap-lh: 52px;
    --guide-title: 46px; --guide-title-lh: 48px;
    --statement: 24px; --statement-lh: 36px;
    --headline-card: 30px; --headline-card-lh: 34px;
    --lead-card: 30px; --lead-card-lh: 34px;
  }
  :root { --wordmark-w: 124px; }
  .nm-page, .nm-header, .nm-masthead, .nm-footer,
  .nomads :is(.nm-page, .nm-hero__body) { padding-inline: var(--gutter-mobile); }
  .nomads .nm-masthead { padding: 10px var(--gutter-mobile); }
  .nomads .nm-header { padding: var(--space-5) var(--gutter-mobile); }
  .nomads .nm-footer { padding: var(--space-8) var(--gutter-mobile) var(--space-6); }
  .nm-masthead span + span, .nm-masthead > :nth-child(2) { display: none; }
  .nm-nav, .nm-header .nm-btn { display: none; }
  .nm-burger { display: block; }
  .nm-hero { height: 480px; }
  .nm-hero__body { left: var(--gutter-mobile); right: var(--gutter-mobile); bottom: var(--space-6); }
  .nm-hero .nm-btn { display: block; text-align: center; }
  .nm-coverlines { display: none; }
  /* Rows with a height of their own instead of an aspect ratio: a grid of
     aspect-ratio tiles inside a flex container does not report its height to
     its parent and the band ends up shorter than its own tiles. */
  .nm-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .nm-tile { aspect-ratio: auto; }
  .nm-tile--feature { grid-column: span 2; grid-row: span 2; }
  .nm-section, .nm-band { margin-top: var(--space-8); padding-block: var(--space-8); }
  .nm-article-head, .nm-body figure img { width: auto; }
  .nm-figure--breakout, .nm-figure--bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
  .nm-body > p:first-of-type::first-letter { padding: 5px 10px 0 0; }
  .nm-facts, .nm-stats, .nm-statpanel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nm-footer__cols { grid-template-columns: 1fr; }
  /* Full width controls inside the boxes, and only there */
  .nm-form { display: block; }
  .nm-form .nm-input, .nm-form .nm-btn { display: block; width: 100%; box-sizing: border-box; }
  .nm-form .nm-input { margin-bottom: var(--space-3); }
  .nm-pdfcover { width: 160px; margin: 0 auto var(--space-5); }
}

/* ------------------------------------------------- 18. Elementor bridge
   Elementor wraps every widget in its own markup. These rules make that
   wrapper transparent so a design class on the widget reaches the tag that
   draws: put nm-display-2 on a Heading widget and the h2 inherits it.
   Nothing here introduces a value — it all still comes from tokens.css, and
   nothing is styled on the widget itself. */

.nomads .elementor-widget-container { display: contents; }

/* Elementor draws headings with .elementor-heading-title and colours them from
   the kit. Only that colour and its line-height:1 are neutralised — the design
   rules of this stylesheet keep working on the tag itself. */
.nomads :where(.elementor-heading-title) { color: inherit; line-height: inherit; margin: 0; padding: 0; }

/* A widget wearing a type class: the tag inside wears it too. */
.nomads :is(.nm-display-0, .nm-display-1, .nm-display-2, .nm-display-3, .nm-lede,
            .nm-meta, .nm-eyebrow, .nm-card__title, .nm-footer__tag) :where(h1, h2, h3, h4, h5, h6, p) {
  font: inherit; color: inherit; letter-spacing: inherit; margin: 0;
}

.nomads .elementor-widget-image img { display: block; width: 100%; height: auto; }

/* A Button widget wearing nm-w-btn: the anchor is what gets drawn. */
.nomads .nm-w-btn .elementor-button {
  display: inline-block; font-family: var(--font-text);
  font-size: var(--button); line-height: var(--button-lh); font-weight: 600; letter-spacing: 0.01em;
  padding: var(--space-4) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; background: var(--ink); color: var(--ink-inverse);
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.nomads .nm-w-btn .elementor-button:hover { background: var(--accent); color: var(--on-accent); }
.nomads .nm-w-btn--accent .elementor-button { background: var(--accent-bright); color: var(--on-accent-bright); }
.nomads .nm-w-btn--accent .elementor-button:hover { background: var(--accent); color: var(--on-accent); }
.nomads .nm-w-btn--quiet .elementor-button { background: transparent; color: var(--ink); border-color: var(--line-control); }
.nomads .nm-w-btn--quiet .elementor-button:hover { border-color: var(--ink); }

/* The article body under a Post Content widget. */
.nomads .elementor-widget-theme-post-content > .elementor-widget-container { display: block; }

/* Elementor containers default to flex: the grids of this design say grid, and
   they must win on equal specificity whatever order the stylesheets load in. */
/* Only the ones that are Elementor containers: everything else comes out of a
   shortcode as plain markup and already reads its display from the section
   above — overriding those would beat the responsive rules at the bottom. */
.nomads :is(.nm-article-layout, .nm-grid-2, .nm-grid-3, .nm-grid-12,
            .nm-footer__cols, .nm-guidehero__grid) { display: grid; }
.nomads .nm-w-btn--header .elementor-button { padding: 14px var(--space-5); }

/* Elementor's own container rules (.e-con) set width and max-width. These say
   the same thing the layout section already says, one notch more specific, so
   the three measures of the design win wherever a container carries them. */
.nomads .nm-page { max-width: var(--measure-page); margin-inline: auto; padding-inline: var(--gutter-desktop); }
.nomads .nm-media { width: 100%; max-width: var(--measure-media); margin-inline: auto; }
.nomads .nm-text { width: 100%; max-width: var(--measure-text); margin-inline: auto; }
.nomads .nm-article-head { width: 100%; max-width: var(--measure-text); margin-inline: auto; }
.nomads .nm-article-layout { width: 100%; max-width: var(--measure-media); margin-inline: auto; }
.nomads .nm-download { width: 100%; }
.nomads .nm-band { max-width: none; }

/* An Image widget wearing a design class: the class lands on the widget, the
   picture inside has to fill it. */
.nomads .nm-hero__img img,
.nomads .nm-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.nomads .nm-hero__img { display: block; }

/* On an inverted surface the ink comes from the surface, not from Elementor's
   global colour. */
/* Ojo: aquí NO puede entrar .elementor-widget-text-editor. Ese wrapper es el
   que lleva la clase del diseño (.nm-hero__sub), y ponerle color:inherit con
   esta especificidad le quitaba su propio color: el subtítulo del hero salía
   en tinta oscura sobre la foto, con 1.06 de contraste. */
.nomads :is(.nm-inverse, .nm-footer, .nm-guidehero, .nm-hero__body, .nm-band--inverse)
  :is(.elementor-heading-title, p, h1, h2, h3, h4) { color: inherit; }
.nomads .nm-hero__body { color: var(--ink-on-media); }

/* Elementor gives every container 10px of padding of its own. The spacing of
   this design comes from the layout section and from the component, so the
   container's own padding is zeroed wherever one of these classes is on it.
   Whatever padding a class does want (the page gutter) is set right after. */
.nomads :is(.nm-page, .nm-text, .nm-media, .nm-article-head, .nm-article-layout,
            .nm-hero, .nm-hero__body, .nm-band, .nm-footer, .nm-footer__cols,
            .nm-masthead, .nm-header, .nm-statement, .nm-section,
            .nm-grid-2, .nm-grid-3, .nm-grid-12,
            .nm-guidehero, .nm-guidehero__grid) {
  --padding-block: 0px;
  --padding-inline: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  padding: 0;
}
.nomads :is(.nm-page, .nm-hero__body) { padding-inline: var(--gutter-desktop); }
.nomads .nm-band { padding-block: var(--space-9); }
.nomads .nm-footer { padding: var(--space-9) var(--gutter-desktop) var(--space-7); }
.nomads .nm-masthead { padding: 10px var(--gutter-desktop); }
.nomads .nm-header { padding: var(--space-6) var(--gutter-desktop) var(--space-5); }

/* Elementor zeroes the bottom margin of every widget
   (.elementor-widget:not(:last-child)), so inside a container the vertical
   rhythm has to come from the container's gap. The component margins of the
   sections above still apply wherever the markup is not an Elementor widget. */
.nomads .nm-hero__body { gap: var(--space-5); align-items: flex-start; }
.nomads .nm-article-head { gap: var(--space-4); }
.nomads .nm-statement { gap: var(--space-5); }
.nomads .nm-guidehero__grid > * { gap: var(--space-5); align-items: flex-start; }
.nomads .nm-band .nm-grid-2 > * { gap: var(--space-4); }

/* `.nomads img { height: auto }` in the base section is more specific than the
   component class on the image itself, so a photograph that has to fill its
   frame says so here. */
.nomads :is(img.nm-hero__img, img.nm-tile__img) {
  width: 100%; height: 100%; object-fit: cover;
}

/* The stored HTML carries the odd inline colour from the old editor — a red
   "PIN IT!", a coloured heading. The article body has one accent and nothing
   else, and the markup is frozen, so it is neutralised here. This is the only
   !important in the stylesheet and it exists to beat a style attribute. */
:is(.nm-body, .entry-content, .page-content, .elementor-widget-theme-post-content)
  [style*="color"]:not([style*="background"]) { color: inherit !important; }

/* An Elementor container is a flex column and its widgets shrink by default.
   With a grid of aspect-ratio tiles inside, the browser resolves that as a
   squashed widget and the band ends up shorter than its own content. Nothing
   inside these containers may shrink. */
.nomads :is(.nm-page, .nm-band, .nm-section, .nm-article-head, .nm-article-layout,
            .nm-hero__body, .nm-text, .nm-media, .nm-footer, .nm-guidehero,
            .nm-guidehero__grid, .nm-statement) > * { flex-shrink: 0; min-height: 0; }

/* ----------------------------------------------- 19. Fixes de verificación
   Lo que salió en la auditoría de móvil, portátil y escritorio. */

/* El cuerpo del hero se posiciona con left/right: sin width:auto, Elementor le
   da el 100% del contenedor y se sale por la derecha. */
.nomads .nm-hero__body { width: auto; }

/* Las tres tapas del PDF están giradas y se salen a propósito: el hero las
   recorta en vez de empujar la página. */
.nomads .nm-guidehero { overflow: hidden; }

/* La tapa de delante es clara: su título y su filete no pueden ir en los
   colores de la tapa oscura. */
.nm-coverstack__cv .nm-pdfcover__title { color: var(--ink); }
.nm-coverstack__cv .nm-pdfcover__rule { background: var(--accent-bright); }

/* Zonas táctiles: 44px de alto en cualquier enlace de navegación en pantalla
   táctil, sin tocar el ritmo visual (el relleno va por dentro). */
@media (max-width: 768px) {
  .nomads :is(.nm-nav, .nm-mobilenav, .nm-footer, .nm-filters) a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nomads .nm-footer li { margin-bottom: 0; }
}

/* ------------------------------------------------ 20. Responsive, al final
   Las secciones 18 y 19 vuelven a declarar rellenos con la misma
   especificidad que el bloque de 768px, y al ir después lo pisaban: el
   margen lateral del móvil se quedaba en el de escritorio. Este bloque cierra
   el archivo para que las medidas de móvil sean las últimas en hablar. */

@media (max-width: 768px) {
  /* La columna de texto mide más que la pantalla: sin este margen lateral el
     titular y el cuerpo se pegan al borde del móvil. La foto sigue a sangre. */
  .nomads :is(.nm-page, .nm-hero__body, .nm-article-head, .nm-text,
              .nm-article-layout, .nm-statement) { padding-inline: var(--gutter-mobile); }
  .nomads .nm-masthead { padding: 10px var(--gutter-mobile); }
  .nomads .nm-header { padding: var(--space-5) var(--gutter-mobile); }
  .nomads .nm-footer { padding: var(--space-8) var(--gutter-mobile) var(--space-6); }
  .nomads .nm-band { padding-block: var(--space-8); }
  .nomads .nm-download { padding: var(--space-6); }
}

/* Elementor pone max-width:100% en cada widget y se llevaba por delante la
   medida del subtítulo del hero, que se leía a lo ancho de toda la pantalla. */
.nomads .nm-hero__sub { max-width: 56ch; }
.nomads .nm-hero__title { max-width: 940px; }

/* Por debajo de 1024 el índice se oculta, pero el widget que lo contiene
   seguía ocupando una fila de la rejilla y dejaba 64px de hueco entre la foto
   y el primer párrafo. */
@media (max-width: 1024px) {
  .nomads .elementor-widget:has(.nm-toc) { display: none; }
}

/* ------------------------------------------------------ 21. Cabecera
   El menú hamburguesa vive en un widget propio: en escritorio hay que ocultar
   el widget entero, porque un widget de ancho cero seguía contando en el
   reparto de la fila y empujaba el botón hacia dentro. Con él fuera, el logo
   queda a la izquierda, el menú centrado y el botón pegado al margen. */
.nomads .nm-header .elementor-widget:has(.nm-burger) { display: none; }
.nomads .nm-header .elementor-widget:has(.nm-nav) { flex: 1 1 auto; }
.nomads .nm-header .nm-nav { justify-content: center; }

@media (max-width: 768px) {
  .nomads .nm-header .elementor-widget:has(.nm-burger) { display: block; flex: 0 0 auto; }
  .nomads .nm-header .elementor-widget:has(.nm-nav) { display: none; }
}

/* --------------------------------------------- 22. Landing del PDF
   La pila de tapas vive dentro de un widget: sin ancho propio, la proporción
   3/4 no tiene de dónde agarrarse y la tapa de delante desaparecía dejando
   su título suelto sobre el fondo. */
.nomads .nm-coverstack { width: 100%; max-width: 380px; margin-inline: auto; }
.nomads .nm-guidehero__grid > * { min-width: 0; }

/* El selector: tapas pequeñas, que son un índice, no la portada. */
.nomads .nm-grid-4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.nomads .nm-grid-4 .nm-minicover { max-width: 170px; }
.nomads .nm-grid-4 a { display: block; }

/* La rejilla del hero del PDF sí quiere su relleno: sin él la tapa de delante
   queda pegada al borde de la pantalla y parece que el fondo oscuro se corta. */
.nomads .nm-guidehero__grid {
  padding: var(--space-8) var(--gutter-desktop) var(--space-10);
  align-items: center;
}
@media (max-width: 768px) {
  .nomads .nm-guidehero__grid { padding: var(--space-7) var(--gutter-mobile) var(--space-8); }
}

/* ------------------------------------------------ 23. Cuarta pasada visual
   20 de septiembre de 2026. Lo que Sergio ve en la portada a 2000px y lo que
   sale al repasar TODOS los estados de enlace del sitio. */

/* --- 23.1 Estados de enlace: un solo criterio ------------------------------
   El reset de Hello Elementor se cuela otra vez (§13 fue el rosa de `a`, esto
   es el hover): `a:active,a:hover{color:<azul del reset>}` vale (0,1,1) y
   le gana a `:where(.nomads) a{color:inherit}`, que vale (0,0,1). Resultado:
   cualquier enlace que tome su tinta del componente se volvía azul oscuro al
   pasar el ratón — los tres teasers del hero (el antetítulo salía en el azul
   oscuro del reset sobre la foto), las tarjetas, la lista numerada y el pie.
   La regla de abajo
   empata en especificidad y, al cargar después, manda.

   EL CRITERIO, para todo el sitio:
     reposo          el enlace hereda la tinta de su componente; nunca
                     tiene color de enlace propio.
     :visited        idéntico a reposo. Los visitados no se marcan: es un
                     archivo de guías, no una lista de resultados.
     :hover          navegación, índice, filtros, «ver más» y títulos de
                       tarjeta o ficha .............. --accent
                     enlaces del cuerpo del artículo  --accent-strong
                       + subrayado en --accent-bright
                     sobre fotografía (hero, fichas)  --accent-bright
                     sobre superficie invertida (pie) --accent-inverse
                     botones ...................... relleno --accent,
                       texto --on-accent
                     Nada más cambia de color: el resto del texto del
                     componente conserva su tinta.
     :focus-visible  2px sólido --focus con 2px de offset; --focus-inverse
                     sobre superficie invertida. No se quita nunca. */
:where(.nomads) :is(a:hover, a:active, a:visited) { color: inherit; }

/* Sobre fotografía el aqua tiene que ser el de marca a plena fuerza, que vale
   igual en los dos temas. --accent-inverse se invierte con el tema y en
   oscuro dejaba el título del teaser en verde oscuro sobre la foto. */
.nomads .nm-coverlines a:hover .nm-coverlines__title,
.nomads .nm-tile:hover .nm-tile__name { color: var(--accent-bright); }

/* El pie sí es superficie invertida, y ahí el token que se invierte es el
   correcto. Antes el hover solo subía la opacidad: el verde no aparecía. */
.nomads .nm-footer a:hover { color: var(--accent-inverse); opacity: 1; }

/* El antetítulo sobre foto es aqua en el diseño aprobado (reference/portada).
   La regla «en superficie invertida la tinta viene de la superficie» apunta a
   `p` con (0,3,0) y le ganaba a la clase, así que salía blanco. */
.nomads :is(.nm-hero__body, .nm-tile, .nm-guidehero) .nm-eyebrow--on-inverse {
  color: var(--accent-bright);
}

/* --- 23.2 Cabecera: al margen del contenido, no al de la ventana -----------
   Medido a 2000px: el logo caía a 40px del borde de la ventana y el botón a
   40px del derecho, mientras que el contenido de la página empieza en 313 y
   acaba en 1673 (contenedor de 1440 centrado + 40 de margen). La franja, la
   cabecera y el pie siguen siendo a sangre —el filete cruza la pantalla— pero
   su contenido cae ya sobre la misma columna que el resto. Por debajo de
   1440 el max() se queda con el margen de siempre. */
@media (min-width: 769px) {
  .nomads :is(.nm-masthead, .nm-header, .nm-footer) {
    padding-inline: max(var(--gutter-desktop),
                        calc((100% - var(--measure-page)) / 2 + var(--gutter-desktop)));
  }
}

/* El menú estaba centrado en el hueco que le dejaban el logo (132px) y el
   botón (170px), no en la página: 19px desviado a 1440 y 26 a 2000. Las dos
   columnas de los lados crecen ahora por igual. */
.nomads .nm-header .elementor-widget:has(.nm-wordmark) { flex: 1 1 0; min-width: 0; }
.nomads .nm-header .elementor-widget:has(.nm-nav) { flex: 0 1 auto; }
.nomads .nm-header .nm-w-btn { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }

/* La fila sigue centrada, como en el diseño aprobado: lo que estaba mal no
   era la alineación de la cabecera sino la caja del logotipo, que lleva el
   tipi encima de las letras. --wordmark-rise (tokens.css) sube la imagen
   hasta que el bloque de letras cae en el centro de la fila. Medido después:
   centro de las letras 94,7 · centro del texto del menú 94,3 · centro del
   texto del botón 96,8, y la cabecera conserva sus 112,7px de alto. */
.nomads .nm-header .nm-wordmark--image {
  transform: translateY(calc(var(--wordmark-rise) * -1));
}
/* El SVG no lleva el margen de píxeles del PNG: medido el 21-sep, con 22px las
   letras quedaban 1,8px por encima del menú; con 20px, en su línea. */
.nomads .nm-header .nm-wordmark:has(.nm-wordmark__svg) {
  transform: translateY(calc((var(--wordmark-rise) - 2px) * -1));
}

@media (max-width: 768px) {
  /* En móvil la fila son el logo y la hamburguesa, y no hay menú con el que
     alinearse: la caja del logo se centra tal cual. */
  .nomads .nm-header .elementor-widget:has(.nm-wordmark) { flex: 0 1 auto; }
  /* El diseño móvil aprobado (reference/portada-movil) es logo + hamburguesa y
     nada más. La regla del §17 apuntaba a `.nm-btn`, pero el botón de la
     cabecera es un widget de Elementor y nunca se ocultó: con él dentro la
     fila no cabía y la hamburguesa caía a un segundo renglón. */
  .nomads .nm-header .nm-w-btn { display: none; }
  .nomads .nm-header .nm-wordmark--image,
  .nomads .nm-header .nm-wordmark:has(.nm-wordmark__svg) { transform: none; }
}

/* --- 23.3 Lo que salió al repasar control por control ----------------------

   El reset de Hello vuelve por tercera vez, ahora en los botones:
   `[type=button]:hover, [type=submit]:hover, button:hover, …:focus` pintan
   fondo rosa y texto blanco. Ojo: la hamburguesa lleva `type="button"`, así
   que la regla que manda es la de atributo y vale (0,2,0) — con `button:hover`
   a secas no bastaba. Medido con hover real:
   la hamburguesa y la barra del índice de móvil se teñían de ROSA y la
   pregunta del acordeón salía en blanco sobre fondo claro (1,08 de
   contraste). El color se neutraliza para cualquier botón con la
   especificidad justa del reset; el fondo lo declara cada botón del diseño,
   porque «transparente» no vale para una barra fija que tapa el artículo.
   ⚠️ Un botón nuevo del diseño tiene que declarar aquí su :hover y su :focus. */
:where(.nomads) :is(button, [type="button"], [type="submit"]):not(.nm-btn, .elementor-button):is(:hover, :focus) {
  color: inherit;
}
.nomads .nm-burger:hover,  .nomads .nm-burger:focus  { background: none; }
.nomads .nm-toc-bar:hover, .nomads .nm-toc-bar:focus { background: var(--surface-raised); }
.nomads .nm-faq__q:hover,  .nomads .nm-faq__q:focus  { background: var(--surface-sunken); }

/* Tres enlaces del diseño no tenían :hover propio y con la regla de 23.1 se
   quedaban en la tinta heredada: sin respuesta al ratón. Criterio de 23.1:
   navegación e índice a --accent, el enlace de texto a --accent-strong. */
/* El CTA del índice se pintaba en --ink-muted: `.nm-toc a` (0,1,1) le ganaba
   a su propia clase (0,1,0) y el enlace no se distinguía de la lista. */
.nomads .nm-toc__cta { color: var(--accent); }
.nomads .nm-toc__cta:hover { color: var(--accent-strong); }
.nomads .nm-toc-panel a:hover { color: var(--accent); }
.nomads .nm-mobilenav a:hover { color: var(--accent); }

/* --- 23.4 Recortes del barrido --------------------------------------------
   La barra del índice en móvil escribe el h2 de la sección actual, y algunos
   son largos: «At a Glance | On a Budget | Where to…» medía 639px dentro de
   una barra de 390. Ahora se corta con puntos suspensivos. */
.nm-toc-bar > :first-child { min-width: 0; }
.nm-toc-bar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 23.5 Foco visible -----------------------------------------------------
   El reset pinta su propio anillo con `box-shadow: 0 0 0 4px <blanco>` +
   `outline: 2px solid <negro>` sobre `a/button/input/select/textarea`. El
   anillo del diseño solo declaraba `outline`, así que el halo blanco de 4px
   seguía saliendo alrededor del botón aqua del formulario y de la pregunta
   del acordeón, y en los controles de formulario ni siquiera se veía el
   anillo verde. Aquí se declara entero, con más especificidad que el reset:
   §9, 2px sólido --focus con 2px de offset, --focus-inverse sobre superficie
   invertida, y ningún halo. */
.nomads :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: none;
}
.nomads :is(.nm-inverse, .nm-footer, .nm-guidehero, .nm-hero__body, .nm-band--inverse)
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--focus-inverse);
}

/* El reset le pone `transition: all .3s` a todo botón, así que hasta el anillo
   de foco entraba con un fundido de 300ms y el botón se veía sin anillo
   durante un tercio de segundo. El §6 dice 120ms y solo en color. */
:where(.nomads) :is(button, [type="button"], [type="submit"]) {
  transition: background-color var(--t-fast) linear,
              color var(--t-fast) linear,
              border-color var(--t-fast) linear;
}

/* --- 23.6 El hueco en blanco de la landing del PDF -------------------------
   Los contenedores de Elementor son columnas con `flex-wrap: wrap`. Una
   rejilla con `auto-fill` dentro de una columna que envuelve hace que el
   navegador resuelva la altura intrínseca del widget como si la rejilla
   fuera de una sola columna: en «Pick a guide» el widget medía 1912px para
   un contenido de 1086 y dejaba 826px en blanco antes del pie en móvil.
   Una columna no necesita envolver. (Misma familia que la nota del §13 sobre
   rejillas con proporción dentro de un contenedor flex de Elementor:
   comprobado que con `nowrap` el widget mide exactamente su contenido.) */
.nomads :is(.nm-page, .nm-section, .nm-band, .nm-text, .nm-media,
            .nm-article-head, .nm-article-layout, .nm-hero__body,
            .nm-guidehero, .nm-statement) {
  flex-wrap: nowrap;
}

/* --- 23.7 El texto del hero, al mismo margen que todo lo demás -------------
   `.nm-hero__body` se colocaba con `left/right: <margen>` y además llevaba el
   relleno de `.nm-page`, que es el mismo margen: 40+40. Medido a 1440 el
   titular empezaba en 80 y el logo en 40; en móvil, 40 contra 20. (A 2000 los
   dos daban 320 y por eso no saltó antes: el doble margen se compensa solo
   cuando el contenedor llega a su ancho máximo.) El bloque ocupa ahora el
   hero entero y el margen lo pone su propia clase .nm-page, igual que el
   resto de la página. */
.nomads .nm-hero__body { left: 0; right: 0; }

/* --- 23.8 Tablas del cuerpo y el «+» del acordeón --------------------------

   🪤 `body.nomads` lleva `overflow-x: clip` (sección 1), así que lo que se
   sale del ancho NO da scroll lateral: se recorta en silencio. Estos casos no
   aparecen buscando scroll horizontal — hay que medir el ancho del contenido
   contra el de su contenedor.

   Las tablas del cuerpo vienen del editor viejo y varias tienen cuatro
   columnas. El reset de Hello les pone 15px de relleno por celda, que en
   cuatro columnas son 120px solo de aire, y la tabla se salía de la columna:
   medido en /es/ mochilas, 457px dentro de 350, con la última columna —la de
   los enlaces de afiliado— recortada e inalcanzable en móvil. La inglesa
   cabía por los pelos; la española no, porque el texto es más largo.

   Dos cosas, en este orden:
   1. La tabla se pinta con el ritmo del diseño (mismo criterio que .nm-table)
      en vez de con el relleno del reset, con lo que la mayoría ya cabe.
   2. Y aun así lleva su propio scroll horizontal, para que nunca se recorte
      nada sea cual sea el idioma o el número de columnas. Es la segunda y
      última excepción del sitio al «sin scroll lateral», junto a .nm-filters.
   `display: block` es imprescindible: Chrome ignora `overflow` sobre una caja
   de tabla (comprobado: con `display: table` la tabla seguía saliéndose). */
.nm-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 var(--space-5);
  font-size: var(--body-compact);
  line-height: var(--body-compact-lh);
}
.nm-body table > * { min-width: 100%; }
.nm-body :is(th, td) {
  padding: var(--space-3);
  border: 0;
  border-top: 1px solid var(--line-hairline);
  text-align: left;
  vertical-align: top;
  line-height: var(--body-compact-lh);
}
.nm-body tr:first-child :is(th, td) { border-top-color: var(--line-strong); }
.nm-body th { font-weight: 600; color: var(--ink); }
.nm-body td { color: var(--ink-muted); }
/* El reset raya las filas impares con un gris propio, y el §4 no tiene fondos
   por fila. Lo pinta sobre la celda y con :nth-child, así que hay que igualar
   su especificidad (0,2,3) para quitarlo. */
.nomads :is(.nm-body, .entry-content, .page-content) tbody tr > :is(td, th) {
  background: transparent;
}

/* El acordeón se salía 27px de la columna en móvil y el `clip` del body lo
   recortaba en silencio. La causa no era el «+»: el reset le pone
   `white-space: nowrap` a todo botón, y la pregunta —que es un <span> dentro
   del botón— no podía partirse. Con el texto partiendo y el <span> pudiendo
   encogerse, la pregunta cabe; el «+» gira 45° y una caja girada ocupa más de
   lo que mide, así que se le deja algo más de margen a la derecha. */
.nomads .nm-faq__q { white-space: normal; padding-inline: var(--space-3); }
.nomads .nm-faq__q > :first-child { min-width: 0; }
.nomads .nm-faq__sign { flex: 0 0 auto; }
.nomads .nm-faq__a { padding-inline: var(--space-3); }

/* Lo mismo vale para las plantillas propias de Hello, que envuelven el cuerpo
   en .page-content / .entry-content en vez de .nm-body (la política de
   privacidad, por ejemplo, lleva una tabla). */
:is(.entry-content, .page-content) table {
  display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse;
}
:is(.entry-content, .page-content) table > * { min-width: 100%; }

/* Una palabra o una URL larga tampoco puede sacar la columna de la pantalla:
   con `overflow-x: clip` en el body se recortaría sin avisar. */
.nomads :is(.nm-body, .entry-content, .page-content) { overflow-wrap: break-word; }

/* ------------------------------------ 24. Destino: la tarjeta «Start here»
   El bloque 12 ya traía `.nm-lead-card` (rejilla 1.25fr/1fr, fondo, filete y
   el titular en display-3), pero nada lo pintaba: faltaba el componente. Aquí
   va solo lo que el bloque 12 no dice.

   El recorte de la foto va en su propia caja y no en `.nm-card__media`, que
   trae radio y margen inferior propios y aquí sobran: la foto llega al borde
   de la tarjeta, como en `reference/destino.html`. Como en las tarjetas de la
   rejilla, el zoom es solo `transform` y al pasar el ratón — nada disparado
   por el scroll (§6), y el bloque de `prefers-reduced-motion` de la sección 8
   lo deja quieto. */
.nm-lead-card__media { overflow: hidden; }
.nm-lead-card__media img { transition: transform 500ms var(--ease); }
.nm-lead-card:hover .nm-lead-card__media img { transform: scale(1.04); }
.nm-lead-card__body > :last-child { margin-bottom: 0; }

/* La fila de meta lleva su separador entre aire, como en el diseño. Fuera de
   la cabecera del artículo `.nm-meta` no es flex y el `·` salía pegado a las
   dos palabras. */
.nm-lead-card .nm-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; }

/* La fila de filtros ya tiene su propio scroll lateral en móvil (bloque 17);
   lo que no puede es partir un nombre en dos renglones: «All guides» salía a
   dos líneas a 390 y descuadraba la fila. */
.nm-filters a { white-space: nowrap; }

/* Una guía sin foto que aguante el hueco no deja media columna vacía. */
.nm-lead-card:not(:has(.nm-lead-card__media)) { grid-template-columns: 1fr; }
.nm-lead-card:not(:has(.nm-lead-card__media)) .nm-lead-card__body { padding: var(--space-7); }

/* Por debajo de 768 la tarjeta es una columna (bloque 17) y la foto pasa a ir
   arriba: sin esto conserva el alto completo de la fila de escritorio. */
@media (max-width: 768px) {
  .nm-lead-card img { height: auto; }
}

/* Captación sin proveedor (inc-subscribers.php). La trampa para robots no se
   ve ni se alcanza con el teclado; el aviso de privacidad y el error ocupan su
   propia fila dentro del formulario, que es flex. Al enviar, el formulario se
   cambia por el botón de descarga del PDF. */
.nm-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.nm-form .nm-consent,
.nm-form .nm-form-error { flex: 1 0 100%; margin: 0; font-size: var(--small); line-height: var(--small-lh); }
.nm-form .nm-consent { color: var(--ink-faint); }
.nm-form .nm-consent a { color: inherit; text-decoration: underline; }
.nm-form .nm-form-error { color: var(--ink); font-weight: 600; }
.nm-form-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.nm-form-done__title { font-weight: 600; color: var(--ink); margin: 0; }
.nm-inverse .nm-form-done__title, .nm-inverse .nm-form .nm-consent, .nm-inverse .nm-form .nm-form-error { color: inherit; }

/* Entre 601 y 1024 la caja de descarga ya va en una columna, pero la tapa del
   PDF solo se encogía por debajo de 600: a 977px medía 762x1016 y empujaba el
   formulario fuera de la pantalla. Mismo tamaño que en móvil. */
@media (max-width: 1024px) {
  .nm-download .nm-pdfcover { width: 160px; margin: 0 auto var(--space-5); }
}

/* La columna de marca del pie llevaba el relleno de 10px que Elementor pone por
   defecto a cada contenedor, y el logo quedaba 10px más adentro que los títulos
   y enlaces de debajo. Se quita con sus cuatro variables (ver memoria). */
.nomads .nm-footer .e-con:has(> .elementor-widget .nm-wordmark) {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
}