@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap');
:root {
  /* Core Colors */
  --color-primary: #4fE68f; /* VerdantBase40[cite: 2] */
  --color-primary-container: #C6F58F; /* LimeContainerLight[cite: 2] */
  --color-link: #00803C; /* Original brand green, kept for link color */
  
  /* Neutrals & Surfaces */
  --color-bg-main: #F5F7FA; /* CleanLightBg[cite: 2] */
  --color-bg-surface: #FFFFFF; /* CleanLightSurface[cite: 2] */
  
  /* Typography & Lines */
  --color-text-main: #101418; /* CleanText[cite: 2] */
  --color-text-muted: #48525C; /* CleanTextVariant[cite: 2] */
  --color-outline: #6B7480; /* CleanOutline[cite: 2] */
  --color-divider: #DBE1E8; /* CleanDivider[cite: 2] */

  /* Borders */
  /* Width (not the full border shorthand) of .header's bottom divider. Also
     folded into --header-height below, so anchor scroll-margin stays in
     step with the bar's actual rendered height. */
  --header-border: 1px;

  /* Height of the tallest item in .nav, which is what sets .header's content
     box. Currently a dead tie at 2.6rem: .nav__brand-mark is 1.5rem x the
     body's 1.6 line-height + 0.1rem padding top and bottom, and
     .nav__action-link is 1rem x 1.6 + --space-sm padding. (.nav__toggle,
     mobile only, is a 24px Material Symbols glyph at line-height 1 +
     --space-sm = 2.5rem, just under both.) Because it is a tie, shrinking the
     brand mark alone no longer shortens the bar — .nav__action-link pins it
     here. */
  --nav-content-height: 2.6rem;

  /* Vertical padding on .header, derived so the bar comes out the same height
     as .footer rather than ~21px taller. The footer is --space-md above and
     below a 1.6rem line box (1rem text x the body's 1.6 line-height); the
     header is --nav-content-height. Both bars carry one --header-border
     divider, so matching the content boxes matches the bars. Clamped at 0 so
     a much smaller --space-md yields a flat bar instead of an invalid
     negative padding. Keep --nav-content-height current and this follows. */
  --header-padding-y: max(0rem, calc((var(--space-md) * 2 + 1.6rem - var(--nav-content-height)) / 2));

  /* What .header actually occupies, assembled from the three parts above.
     Anchor targets clear this much so a jump from the index does not park the
     heading underneath the sticky bar. */
  --header-height: calc(var(--nav-content-height) + var(--header-padding-y) * 2 + var(--header-border));

  /* Side padding on .main-content, and therefore the width of the text
     column. Named because .notice breaks out of that column on mobile and has
     to negate exactly this much; the mobile query overrides it in one place
     and both stay in step. */
  --content-padding-x: var(--space-md);

  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
    position: sticky;
    top: 0;
    background-color: var(--color-bg-surface);
    border-bottom: var(--header-border) solid var(--color-divider);
    padding: var(--header-padding-y) var(--space-lg);
}

.main-content {
  flex: 1;
  margin: 0 auto;
  max-width: 800px;
  padding: var(--space-xl) var(--content-padding-x);
  width: 100%;
}

.footer {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background-color: var(--color-bg-surface);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  padding: var(--space-md) var(--space-lg);
  text-align: center;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Wordmark box replacing the old app icon image; same dark background the
   icon used, square corners, sized by its own padding. */
.nav__brand-mark {
    background-color: #0E1317;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.1rem var(--space-sm);
}

/* Right-hand cluster in the top bar: the desktop entry points plus the
   mobile drawer toggle. Wrapping them keeps .nav a two-child flex row, so
   justify-content: space-between still pins the brand left and this group
   right however many entry points get added here later. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Desktop-only entry points (Ayuda, Legal): plain links to their own hub
   pages, so there is nothing to drop down. 1rem text + --space-sm padding
   sets --nav-content-height. */
.nav__action-link {
  color: var(--color-text-main);
  font-weight: 500;
  padding: var(--space-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav__action-link:hover,
.nav__action-link--active {
  color: var(--color-link);
}

/* The drawer only exists for the mobile layout; on desktop the same links
   live in .nav__actions instead, so this stays hidden until the
   mobile media query below turns it into the sliding drawer panel. */
.nav__list {
  display: none;
  list-style: none;
}

.nav__link {
  color: var(--color-text-main);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav__link:hover,
.nav__link:active,
.nav__link--active {
  color: var(--color-link);
}

.nav__items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
}

.nav__toggle {
  display: none; /* Hidden on desktop */
  background: transparent;
  border: none;
  color: var(--color-text-main);
  cursor: pointer;
  padding: var(--space-sm);
}

/* Close button lives inside the drawer; hidden until the mobile drawer applies */
.nav__item--close {
  display: none;
}

.nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-main);
  cursor: pointer;
  padding: var(--space-sm);
}

/* Document Article */
.document {
/*
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: var(--space-lg);
*/
    padding: 0;
}

.document__title {
  color: var(--color-text-main);
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.document__meta {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-lg);
}

/* A document header can carry more than one meta line (what the document is,
   then when it was last updated). They read as one block, so only the last
   one holds the gap down to the body and the ones above it sit tight. Scoped
   by :last-of-type within the header, where meta lines are the only <p>. */
.document__meta:not(:last-of-type) {
  margin-bottom: var(--space-sm);
}

.document__section-title {
  color: var(--color-text-main);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Second level inside a long legal document (clauses like "2.4"). Sits below
   .document__section-title in weight and above body text, so a numbered
   clause and its sub-clauses stay distinguishable at a glance. */
.document__subsection-title {
  color: var(--color-text-main);
  font-size: 1.0625rem;
  margin-bottom: var(--space-sm);
  margin-top: var(--space-md);
}

.document__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

ul.document__text {
  list-style: disc;
  padding-left: var(--space-lg);
}

ol.document__text {
  list-style: decimal;
  padding-left: var(--space-lg);
}

.document__text li {
  margin-bottom: var(--space-sm);
}

.document__link {
  color: var(--color-link);
  font-weight: 500;
}

/* Pulled-out condition inside a document. Left bar rather than a filled box,
   so it reads as emphasis within the flow of the page and not as a card that
   has been dropped into it. */
.notice {
  --notice-bar: 4px;

  background-color: var(--color-bg-surface);
  border-left: var(--notice-bar) solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
}

.notice__title {
  color: var(--color-text-main);
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

/* A notice can hold several paragraphs and a list. The global reset zeroes
   <p> margins, so space the blocks after the first and drop the trailing gap
   that the shared .document__text margin would leave inside the box. */
.notice > * + * {
  margin-top: var(--space-sm);
}

.notice > :last-child {
  margin-bottom: 0;
}

/* Always-visible clause index for a long legal document. columns: 2 320px
   lets the browser pick one or two columns itself, based on how much of the
   800px document width is actually available, instead of a manual
   breakpoint — it already collapses to one column on a phone. */
.toc {
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-lg);
  padding: var(--space-md) 0;
}

.toc__title {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
}

.toc__list {
  columns: 2 320px;
  column-gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc__list li {
  break-inside: avoid-column;
}

.toc__link {
  color: var(--color-text-muted);
  display: block;
  padding: 0.25rem 0;
  text-decoration: none;
}

.toc__link:hover,
.toc__link:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
}

/* Landing room for the index's anchors, under the sticky header. */
.document section[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

/* Trail back up the help hierarchy (Help > Account > article), sitting above
   the document title on nested pages. */
.breadcrumb {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: var(--space-sm);
  list-style: none;
  margin-bottom: var(--space-md);
}

.breadcrumb__link {
  color: var(--color-text-muted);
  text-decoration: none;
}

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

.breadcrumb__separator {
  color: var(--color-outline);
}

/* Hub list for the section landing pages (Help, Account): one row per
   destination, chevron on the right. Each row is a full-width link, so
   growing a hub is just another <li>; the border-top/border-bottom pairing
   draws a single rule between adjacent rows instead of a double line. */
.directory {
  border-top: 1px solid var(--color-divider);
  list-style: none;
  margin-top: var(--space-lg);
}

.directory__link {
  align-items: center;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-main);
  display: flex;
  font-weight: 700;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.directory__link:hover,
.directory__link:focus-visible {
  color: var(--color-link);
}

.directory__title {
  flex: 1;
  min-width: 0;
}

.directory__chevron {
  color: var(--color-outline);
  flex-shrink: 0;
}

/* Label above a second (or later) .directory group on the same hub page
   (e.g. legal.html's "Para conductores"). Styled as a small eyebrow label,
   like .toc__title, rather than a heading the same weight as the row titles
   below it — .document__subsection-title reads as just another bold row at
   this size, so the group and its one item blur together. */
.directory__group-title {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: var(--space-lg) 0 var(--space-sm);
  text-transform: uppercase;
}

/* Home page intro block: centred headline with supporting copy under it.
   The copy is width-capped so centred lines stay comfortable to read on
   wide viewports. */
.intro {
  text-align: center;
}

.intro__title {
  color: var(--color-text-main);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.intro__text {
  color: var(--color-text-muted);
  margin: 0 auto var(--space-md);
  max-width: 60ch;
}

/* Navigation drawer scrim (backdrop behind the drawer) */
.nav__scrim {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(16, 20, 24, 0.4);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.nav__scrim--open {
  display: block;
  opacity: 1;
}

@media screen and (max-width: 768px) {

    .nav {
    flex-wrap: wrap;
  }

  /* Show the toggle button */
  .nav__toggle {
    display: block;
  }

  /* Mobile has its own drawer for these; the desktop links stay hidden. */
  .nav__action-link {
    display: none;
  }

  /* Material 3 style navigation drawer: fixed panel, full screen height,
     anchored to the right edge, slid off-screen until toggled open. */
  .nav__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(80vw, 320px);
    background-color: var(--color-bg-surface);
    border-left: 1px solid var(--color-divider);
    padding: var(--space-lg);
    gap: var(--space-lg);
    margin: 0;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 16px rgba(16, 20, 24, 0.15);
  }

  /* This class is added by JS to show the menu */
  .nav__list--open {
    transform: translateX(0);
  }

  /* Show the in-drawer close button, aligned to the top-right. Pinned
     (flex-shrink: 0) so it stays put while .nav__items scrolls below it. */
  .nav__item--close {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-bottom: var(--space-sm);
  }

  /* Scrollable area holding the drawer's links, so more can be added later
     without the close button being pushed off-screen. Scrolls independently
     of the page; system scrollbar hidden cross-browser. */
  .nav__items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav__items::-webkit-scrollbar {
    display: none;
  }

  /* Divider line between menu items, inset by the drawer's own padding */
  .nav__item:not(.nav__item--close):not(:last-child) {
    border-bottom: 1px solid var(--color-text-muted);
    padding-bottom: var(--space-md);
  }

  /* Shrink header/footer padding to maximize screen real estate. The header
     keeps its derived vertical padding so the two bars stay the same height;
     only the side padding tightens. */
  .header {
    padding: var(--header-padding-y) var(--space-md);
  }

  .footer {
    padding: var(--space-md);
  }

  /* The side padding is fluid because this breakpoint covers 320px to 768px,
     a 2.4x spread that no single value serves: what fits a 320px phone leaves
     ~90 characters per line near 768px. 6vw tracks the viewport between a
     --space-md floor (never tighter than desktop) and a --space-lg ceiling
     (so wide phones and small tablets do not over-pad), holding body copy
     at roughly 35-47 characters throughout. It widened the sides, which this
     query used to halve to --space-sm, leaving mobile with less side padding
     than desktop. */
  :root {
    --content-padding-x: clamp(var(--space-md), 6vw, var(--space-lg));
  }

  /* Trim the desktop rule's --space-xl top/bottom, since the sticky header
     already claims vertical space. */
  .main-content {
    padding: var(--space-lg) var(--content-padding-x);
  }

  /* Narrow-column typography. The measure here is roughly 40 characters, and
     Spanish legal vocabulary is long enough ("responsabilidad",
     "geolocalización", "confidencialidad") that a ragged right tears open
     holes several words wide. Hyphenation closes them; the pages are
     lang="es", so the browser loads the right dictionary. break-word is the
     backstop for what cannot be hyphenated, such as an email address. */
  .document__text,
  .document__text li,
  .notice {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Bullets cost the measure their whole indent, and this document nests
     lists inside callouts. 1.25rem is the width the marker actually needs
     rather than a step off the spacing scale, which is why it is not a
     --space token. */
  ul.document__text,
  ol.document__text {
    padding-left: 1.25rem;
  }

  /* Break the callout out to the screen edges so its contents get the same
     measure as body copy instead of a column narrower by twice its padding.
     Negating --content-padding-x and then re-applying it as padding lines the
     text back up with the paragraphs above and below; the left bar is
     subtracted so the alignment is exact. Square corners because a full-bleed
     band has no outer edge left to round. */
  .notice {
    border-radius: 0;
    margin-inline: calc(-1 * var(--content-padding-x));
    padding: var(--space-md) var(--content-padding-x);
    padding-left: calc(var(--content-padding-x) - var(--notice-bar));
  }
  
  /*
  .document {
    padding: var(--space-md);
  }
*/

  /* Scale down typography for smaller viewports */
  .document__title,
  .intro__title {
    font-size: 1.5rem;
  }
  
  .document__section-title {
    font-size: 1.125rem;
  }

  .document__subsection-title {
    font-size: 1rem;
  }
}