/* The site's own CSS, loaded after Webflow's export (docs/plan-ux-2026.md, section 8). charoandmarcos-dev.webflow.css
   stays as Webflow exported it: its classes are shared by many pages, so changes and new components go here, where
   they win at equal specificity. Before changing a class, check which pages use it:
   grep -rlw '<class>' dist/client --include='*.html'. */

/* Design tokens of the UX plan (docs/plan-ux-2026.md, phase 3.1), loaded once for the whole site. The components in
   src/components/ux/ use them and don't import this file. They live next to Webflow's CSS until every template
   migrates, so the colors and radii point at Webflow's variables and keep its values as fallbacks.

   Motion: things move only to answer the reader (a hover, a press, a menu that opens, a saved post), for 120 to 250 ms,
   and only with transform, opacity, colors and shadows, so nothing around them shifts. The durations say how big the
   change is (fast for feedback, base for what appears, slow for a small celebration), the easings how it moves (out to
   arrive, in to leave, in-out to travel, spring for a small overshoot) and lift, press, zoom and nudge how far. Under
   prefers-reduced-motion they are all zero: states still change, nothing travels. */

:root {
  /* Colors */
  --ux-color-bg: var(--white, #fff);
  --ux-color-text: var(--dark, #222020);
  --ux-color-heading: var(--black, #000);
  /* 6.5:1 on white and at least 5.3:1 on every light surface below; Webflow's greys stop at 4.6:1 (#757575). */
  --ux-color-text-muted: #615d5d;
  --ux-color-on-dark: var(--white, #fff);
  /* The lavender of the country tags and the hover of the site's lists. */
  --ux-color-accent: #d9dcff;
  --ux-color-accent-strong: var(--purple, #b9b9ff);
  --ux-color-accent-soft: var(--purple-low, #f2f4ff);
  --ux-color-accent-hover: var(--purple-hover, #e4e7f8);
  --ux-color-surface: var(--white, #fff);
  --ux-color-surface-muted: var(--light-grey, #f4f4f4);
  --ux-color-surface-accent: var(--purple-low, #f2f4ff);
  --ux-color-surface-warning: #fff1ea;
  --ux-color-warning: #ff7448;
  /* Text of form errors: 6.6:1 on white and 6:1 on the lavender and warning surfaces. */
  --ux-color-error: #b42318;
  --ux-color-action: var(--dark, #222020);
  --ux-color-action-hover: var(--black, #000);
  /* Decorative hairlines only: under 3:1, so never the sole outline of a control. */
  --ux-color-border: var(--bg, #dedff0);
  --ux-color-border-strong: var(--black, #000);

  /* Type */
  --ux-font-sans: 'Nb International Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ux-font-alt: 'Neuemontreal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Declared by Webflow's CSS but never downloaded: using it costs a font file. */
  --ux-font-mono: 'Nb International Pro Mono', ui-monospace, Menlo, Consolas, monospace;
  /* The three weights of Nb International Pro that @font-face declares. Long text is regular: Webflow's light 300
     thins out on low-density screens. */
  --ux-weight-light: 300;
  --ux-weight-regular: 400;
  --ux-weight-bold: 700;

  /* Sizes are in px: GlobalStyles makes the root font size fluid (15.3 px at 390, 14.7 px at 820, 20 px at 1920),
     so rem would miss the plan's 16 px text and 44 px targets on phones and tablets. Browser zoom still scales them.
     Text grows fluidly from a 360 px to a 1280 px viewport. */
  --ux-text-xs: 13px;
  --ux-text-sm: clamp(14px, 13.6087px + 0.1087vw, 15px);
  --ux-text-ui: 16px;
  --ux-text-body: clamp(16px, 15.2174px + 0.2174vw, 18px);
  --ux-text-lead: clamp(18px, 16.8261px + 0.3261vw, 21px);
  --ux-text-h6: clamp(18px, 16.8261px + 0.3261vw, 21px);
  --ux-text-h5: clamp(20px, 18.4348px + 0.4348vw, 24px);
  --ux-text-h4: clamp(22px, 19.6522px + 0.6522vw, 28px);
  --ux-text-h3: clamp(24px, 20.8696px + 0.8696vw, 32px);
  --ux-text-h2: clamp(28px, 23.3043px + 1.3043vw, 40px);
  --ux-text-h1: clamp(32px, 25.7391px + 1.7391vw, 48px);
  --ux-leading-tight: 1.15;
  --ux-leading-snug: 1.3;
  --ux-leading-normal: 1.5;
  --ux-leading-relaxed: 1.65;
  --ux-tracking-tight: -0.01em;
  /* About 68 characters per line, the middle of the plan's 65–72 (WCAG 1.4.8 stops at 80), measured at 390, 820 and
     1440 px. In em, not ch: Nb International Pro's zero is a third wider than its average letter, and 68ch gave 90. */
  --ux-measure: 33em;

  /* Spacing: the plan's 4–64 px steps. */
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 24px;
  --ux-space-6: 32px;
  --ux-space-7: 48px;
  --ux-space-8: 64px;

  /* Shapes */
  --ux-radius-sm: var(--inner-radius, 10px);
  --ux-radius-md: var(--outer-radius, 15px);
  --ux-radius-lg: var(--global-radius, 20px);
  --ux-radius-pill: var(--round, 100px);
  --ux-border-width: 1px;
  /* The shadow scale already in Webflow's CSS. */
  --ux-shadow-sm: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
  --ux-shadow-md: 0 4px 8px -2px #0000001a, 0 2px 4px -2px #0000000f;
  --ux-shadow-lg: 0 12px 16px -4px #00000014, 0 4px 6px -2px #00000008;

  /* Touch targets: 44 px is the plan's rule; 24 px is WCAG 2.5.8's minimum. */
  --ux-target-size: 44px;
  --ux-target-min: 24px;

  /* Webflow's sticky navbar (.navbar_component), which in-page anchors and sticky elements have to clear. In rem,
     like the navbar. */
  --ux-header-height: 4.5rem;
  --ux-scroll-offset: calc(var(--ux-header-height) + var(--ux-space-4));
  --ux-sticky-bar-height: 72px;

  /* Layers. The navbar is 1000 (.w-nav): the bottom bar stays under its open menu, the reading progress above it. */
  --ux-z-raised: 1;
  --ux-z-sticky: 10;
  --ux-z-bottom-bar: 900;
  --ux-z-progress: 1001;
  --ux-z-toast: 1100;
  --ux-z-skip-link: 1200;

  /* Focus: the color of the site's focus style (GlobalStyles), 4.5:1 on white. */
  --ux-focus-color: #4d65ff;
  --ux-focus-width: 2px;
  --ux-focus-offset: 2px;
  --ux-focus-outline: var(--ux-focus-width) solid var(--ux-focus-color);

  /* Motion (see the header). Hover and press feedback, what appears, a small celebration. */
  --ux-duration-fast: 120ms;
  --ux-duration-base: 200ms;
  --ux-duration-slow: 250ms;
  --ux-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ux-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ux-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ux-ease-spring: cubic-bezier(0.3, 1.6, 0.6, 1);
  /* How far a card rises on hover, a button sinks when pressed, a card's photo grows and a link's arrow moves ahead. */
  --ux-lift: -2px;
  --ux-press: 1px;
  --ux-press-scale: 0.97;
  --ux-zoom: 1.04;
  --ux-nudge: 4px;
  /* What a lifted card leaves on the page: the hard offset shadow of the old Webflow menu's cards. */
  --ux-shadow-pop: 3px 3px 0 var(--ux-color-heading);
  --ux-shadow-pop-photo: 5px 5px 0 var(--ux-color-accent-strong);
  /* The arrow that slides into links on hover, drawn with mask-image in currentColor. */
  --ux-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h14m-5.5-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Media queries can't read custom properties, so the components write Webflow's breakpoints literally: 479/480,
   767/768 and 991/992 px. */
@media (max-width: 767px) {
  :root {
    --ux-header-height: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ux-duration-fast: 0ms;
    --ux-duration-base: 0ms;
    --ux-duration-slow: 0ms;
    --ux-lift: 0px;
    --ux-press: 0px;
    --ux-press-scale: 1;
    --ux-zoom: 1;
    --ux-nudge: 0px;
  }
}

/* The focus ring closes in on what takes the keyboard's focus. :where() keeps it under any animation of a component's
   own. */
:where(:focus-visible) {
  animation: ux-focus-in var(--ux-duration-fast) var(--ux-ease-out);
}

@keyframes ux-focus-in {
  from {
    outline-color: transparent;
    outline-offset: 6px;
  }
}

/* Touch targets: 44 × 44 px where the layout has room for them, and never under 24 px (WCAG 2.5.8), without changing
   how anything looks. Links with an invisible box grow their padding and give it back with a negative margin, so the
   layout stays put; buttons and chips, whose box shows, get a transparent ::after instead. In px, because the root
   font size shrinks on phones. */

/* The email in Trabajemos juntos, 18 px tall: an inline link, whose padding doesn't move the layout. */
.contact5_item a {
  padding-block: 13px;
}

/* One line of text, 1lh tall: "Ver todos los ebooks" above each ebook. */
.breadcrumb-link {
  padding-block: max(0px, (44px - 1lh) / 2);
  margin-block: min(0px, (1lh - 44px) / 2);
}

/* For their ::after. Webflow already positions .w-tab-link. */
.button.is-small {
  position: relative;
}

.button.is-small::after,
.language-tab::after {
  content: '';
  position: absolute;
  inset: min(0px, (100% - 44px) / 2) 0;
}

/* Hidden on screen and still read by screen readers: a label the design shows another way, a heading a list needs.
   !important because it has to beat the class of the element it hides. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* "Saltar al contenido", the first link of every page (PageLayout): above the top of the screen until it gets the
   keyboard's focus. Moved out rather than clipped to 1 px, which qa-responsive would count as a 1 px touch target. */
.ux-skip-link {
  position: fixed;
  z-index: var(--ux-z-skip-link);
  top: var(--ux-space-2);
  left: var(--ux-space-2);
  padding: var(--ux-space-3) var(--ux-space-5);
  border-radius: var(--ux-radius-pill);
  background-color: var(--ux-color-action);
  color: var(--ux-color-on-dark);
  font-family: var(--ux-font-sans);
  font-size: var(--ux-text-ui);
  font-weight: var(--ux-weight-bold);
  line-height: var(--ux-leading-snug);
  text-decoration: none;
}

.ux-skip-link:not(:focus) {
  transform: translateY(calc(-100% - var(--ux-space-4)));
}

.ux-skip-link:focus-visible {
  outline: var(--ux-focus-outline);
  outline-offset: var(--ux-focus-offset);
}

/* Its target: <main> starts right under the sticky navbar, and only takes focus for the skip link, which needs no ring
   around the whole page (GlobalStyles draws one on anything with a tabindex). */
main.main-wrapper {
  scroll-margin-top: var(--ux-header-height);
}

main.main-wrapper:focus {
  outline: none;
}

/* Fields of the Webflow forms: webflow.css takes their outline off and their focused border is the same black as the
   resting one, so nothing showed which field had the focus. */
.w-input:focus-visible,
.w-select:focus-visible {
  outline: var(--ux-focus-outline);
  outline-offset: var(--ux-focus-offset);
}

/* Validation errors, which FormHandler writes under each field instead of the browser's bubble. */
.ux-field-error {
  margin: var(--ux-space-2) 0 0;
  color: var(--ux-color-error);
  font-family: var(--ux-font-sans);
  font-size: var(--ux-text-sm);
  font-weight: var(--ux-weight-regular);
  line-height: var(--ux-leading-snug);
}

.w-input[aria-invalid='true'],
.w-select[aria-invalid='true'] {
  border-color: var(--ux-color-error);
  box-shadow: 0 0 0 1px var(--ux-color-error);
}

/* The forms' failure message: Webflow's red is 4.3:1. */
.error-text {
  color: var(--ux-color-error);
}

/* A submit button while its form is sent (FormHandler and the checkouts disable it and write "Enviando…"): a sheen
   crosses it until the answer comes. Inputs can't hold a spinner. */
.w-form :is(input, button)[type='submit']:disabled {
  background-image: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.35) 50%, transparent 65%);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  animation: ux-sending calc(var(--ux-duration-base) * 6) var(--ux-ease-in-out) infinite;
}

@keyframes ux-sending {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-form :is(input, button)[type='submit']:disabled {
    animation: none;
  }
}

/* Links in running text keep their underline, and on hover it swells into the lavender of the site's tags, behind the
   words. Not on links around a photo. */
:is(.text-rich-text :is(p, li), .ux-info__body, .ux-accordion__content, .ux-kv__value) a:not(:has(img)) {
  background: linear-gradient(var(--ux-color-accent), var(--ux-color-accent)) 0 100% / 100% 0 no-repeat;
  transition: background-size var(--ux-duration-base) var(--ux-ease-out);
}

@media (hover: hover) {
  :is(.text-rich-text :is(p, li), .ux-info__body, .ux-accordion__content, .ux-kv__value) a:not(:has(img)):hover {
    background-size: 100% 100%;
  }
}

/* The navbar's round icons (search, saved posts) answer the pointer and sink a little when pressed. */
.navbar_component .nav__icon {
  transition:
    background-color var(--ux-duration-fast) var(--ux-ease-out),
    scale var(--ux-duration-fast) var(--ux-ease-out);
}

.navbar_component .nav__icon:active {
  scale: var(--ux-press-scale);
}

/* The count of saved posts pops when it changes (menu.ts marks it). */
.navbar_component [data-saved-count][data-bump] {
  animation: ux-pop var(--ux-duration-slow) var(--ux-ease-out);
}

@keyframes ux-pop {
  40% {
    scale: 1.25;
  }
}

/* "Ver …" links and buttons end in an arrow (Button's `arrow`, or the class on Webflow's .button), which moves ahead
   on hover and with the keyboard's focus, toward where the link goes. Webflow's buttons are inline blocks: as inline
   flex boxes they keep their place in the line and take the arrow beside the label. */
.button.ux-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ux-space-2);
}

.ux-arrow::after {
  content: '';
  flex: none;
  width: 1.125em;
  height: 1.125em;
  background-color: currentColor;
  mask: var(--ux-icon-arrow) center / contain no-repeat;
  transition: translate var(--ux-duration-base) var(--ux-ease-out);
}

.ux-arrow:focus-visible::after {
  translate: var(--ux-nudge) 0;
}

@media (hover: hover) {
  .ux-arrow:hover::after {
    translate: var(--ux-nudge) 0;
  }
}

/* A word or two marked as with a highlighter, in the lavender of the site's tags. Where the browser ties animations
   to scrolling, the marker draws itself as the words come into view. */
.ux-mark {
  background: linear-gradient(var(--ux-color-accent-strong), var(--ux-color-accent-strong)) 0 70% / 100% 0.6em no-repeat;
  color: var(--ux-color-heading);
  font-weight: var(--ux-weight-bold);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ux-mark {
      animation: ux-mark-in linear both;
      animation-timeline: view();
      animation-range: entry 100% cover 40%;
    }
  }
}

@keyframes ux-mark-in {
  from {
    background-size: 0 0.6em;
  }
}

/* Body text of 16 px or more on phones and tablets in the pages no batch has redesigned yet. Their Webflow text is
   1rem and GlobalStyles makes the root font size fluid (15.3 px at 390, 14.7 px at 820), so it stayed under 16 px.
   Only <main> of these pages, picked by the data-wf-page that BaseLayout writes on <html>; in order: /nosotros,
   /asesoramos-tu-viaje and /trabajemos-juntos. Drop a page from both lists when its template is redesigned, as the
   ebook pages were (.ebook-page).
   Text meant to be smaller (.text-size-small, breadcrumbs, the components of src/components/) keeps its size, and so
   does .text-size-medium from 768 px, where it's already bigger. */
@media (max-width: 991px) {
  html:is(
      [data-wf-page='66660eff331c4159e71d6d2c'],
      [data-wf-page='66ad46c1b1e739f1dd0ea2b6'],
      [data-wf-page='66915f3a93cf1d1664dab657']
    )
    :is(.main-wrapper, .main-wrapper .text-size-regular, .main-wrapper .w-input, .main-wrapper .w-select) {
    font-size: max(16px, 1rem);
  }
}

@media (max-width: 767px) {
  html:is(
      [data-wf-page='66660eff331c4159e71d6d2c'],
      [data-wf-page='66ad46c1b1e739f1dd0ea2b6'],
      [data-wf-page='66915f3a93cf1d1664dab657']
    )
    .main-wrapper
    .text-size-medium {
    font-size: max(16px, 1rem);
  }
}

/* The ebook pages (the six landings, /guias and the purchase pages, by PageLayout's mainClass) read like the posts:
   text of 16 to 18 px in regular weight with lines of 1.6, and the site's heading scale. Webflow wrote them in its
   light 300 and in rem, which GlobalStyles makes fluid, so they were thinner and smaller than the rest of the site.
   Its classes keep their roles: .heading-style-h4 and h6 are smaller headings, .text-size-medium a lead and
   .text-size-small a note. Buttons go in sentence case, like the site's own. */
.ebook-page {
  font-size: var(--ux-text-body);
  font-weight: var(--ux-weight-regular);
  line-height: 1.6;
}

.ebook-page :is(h1, h2, h3) {
  letter-spacing: var(--ux-tracking-tight);
  text-wrap: balance;
}

.ebook-page h1 {
  font-size: var(--ux-text-h1);
  line-height: var(--ux-leading-tight);
}

.ebook-page h2 {
  font-size: var(--ux-text-h2);
  line-height: 1.2;
}

.ebook-page h3 {
  font-size: var(--ux-text-h3);
  line-height: 1.2;
}

.ebook-page .heading-style-h4 {
  font-size: var(--ux-text-h4);
}

.ebook-page .heading-style-h6 {
  font-size: var(--ux-text-h6);
  line-height: var(--ux-leading-snug);
}

.ebook-page .text-size-medium {
  font-size: var(--ux-text-lead);
}

.ebook-page .text-size-small {
  font-size: var(--ux-text-sm);
}

/* Long text about 68 characters wide, like the posts: the leads, the letter of the province pages and the answers of
   the questions, whose cards narrow to fit them. Centered where their section centers them. */
.ebook-page :is(p.text-size-medium, .cta51_card-copy p) {
  max-width: var(--ux-measure);
}

.ebook-page .text-align-center :is(p.text-size-medium, .cta51_card-copy p) {
  margin-inline: auto;
}

.ebook-page .faq4_component {
  max-width: calc(var(--ux-measure) + var(--ux-space-7));
  margin-inline: auto;
}

/* Fields of 16 px or more: under that, iOS zooms in when they take the focus. */
.ebook-page :is(.w-input, .w-select) {
  font-size: var(--ux-text-ui);
}

.ebook-page .button {
  text-transform: none;
}