/* Yeah Market website. Built only on the design-system variables in
   tokens.css. Phone layout below 768 px, desktop from 768 px. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-background);
  background-image: url(img/fondo-plaid-rosado.png);
  background-size: 36px 36px;
}
img { display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font: inherit; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-pressed); }
a:focus-visible { outline: var(--border-width-thick) solid var(--color-focus); outline-offset: var(--space-2); border-radius: var(--radius-4); }

.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--space-24); padding-right: var(--space-24); }

/* Header */
.site-header { padding-top: var(--space-20); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-24); }
.site-header--home { position: relative; z-index: 1; }
.site-header--home .wrap { justify-content: flex-end; }
.wordmark-small {
  font-size: var(--font-size-15); line-height: var(--line-height-20); font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-wordmark); white-space: nowrap; color: var(--color-text); text-decoration: none;
}
.nav { display: flex; align-items: center; gap: var(--space-24); }
.nav__link { font-size: var(--font-size-15); line-height: var(--line-height-20); font-weight: var(--font-weight-semibold); }
.nav__link--desktop { display: none; }
.nav__pill {
  display: none;
  padding: var(--space-4) var(--space-12); border-radius: var(--radius-full);
  background: var(--color-surface); border: var(--border-width-thin) solid var(--color-primary);
  text-decoration: none; font-size: var(--font-size-15); line-height: var(--line-height-20); font-weight: var(--font-weight-semibold);
}
.lang {
  display: flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-full);
  background: var(--color-surface); border: var(--border-width-thin) solid var(--color-primary);
}
.lang__current, .lang__other { padding: var(--space-2) var(--space-10); font-size: var(--font-size-13); line-height: var(--line-height-18); border-radius: var(--radius-full); }
.lang__current { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--font-weight-bold); }
.lang__other { color: var(--color-text); font-weight: var(--font-weight-semibold); text-decoration: none; }

/* Home: hero */
.hero__art { width: 100%; max-width: 390px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: left top; margin: calc(-1 * var(--space-32)) auto 0; }
.hero__text { display: flex; flex-direction: column; gap: var(--space-16); padding-bottom: var(--space-32); }
.wordmark-big {
  font-size: var(--font-size-52); line-height: var(--line-height-52); font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-wordmark); white-space: nowrap; margin: 0 calc(-1 * var(--space-10));
}
.tagline { font-size: var(--font-size-20); line-height: var(--line-height-26); text-wrap: pretty; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; justify-content: center; margin-top: var(--space-8); }
.badge { display: flex; flex: none; }
.badge img { height: 48px; width: auto; }

/* Home: «Cómo funciona» */
.how { display: flex; flex-direction: column; gap: var(--space-16); padding-bottom: var(--space-32); }
.how .wrap { padding-left: var(--space-16); padding-right: var(--space-16); display: flex; flex-direction: column; gap: var(--space-16); }
.how__title { font-size: var(--font-size-28); line-height: var(--line-height-34); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); }
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); list-style: none; margin: 0; padding: 0; }
.card {
  background: var(--color-surface); border: var(--border-width-thin) solid var(--color-primary); border-radius: var(--radius-24);
  padding: var(--space-28) var(--space-24); /* Provisional card shadow: no design-system token matches it yet. */
  box-shadow: 0 4px 14px rgba(32, 33, 42, 0.10);
  display: flex; flex-direction: column; gap: var(--space-12); align-items: center; text-align: center;
}
.card__n { font-size: var(--font-size-15); line-height: var(--line-height-19); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.card__title { font-size: var(--font-size-28); line-height: var(--line-height-34); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); text-wrap: balance; }
.card__body { font-size: var(--font-size-17); line-height: var(--line-height-25); color: var(--color-text-secondary); text-wrap: pretty; max-width: 310px; }

/* Inner pages: privacy and support. Phone: 24px above the title, 16px at the sides. */
.inner { padding: var(--space-24) var(--space-16) var(--space-32); display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.inner__title { font-size: var(--font-size-28); line-height: var(--line-height-34); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight); align-self: stretch; }
.panel { width: 100%; background: var(--color-surface); border: var(--border-width-thin) solid var(--color-primary); border-radius: var(--radius-24); display: flex; flex-direction: column; overflow: hidden; }
.panel--privacy { max-width: 760px; }
.panel__head { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-8); }
.panel__row { padding: var(--space-16) var(--space-20); border-top: var(--border-width-thin) solid var(--color-primary); display: flex; flex-direction: column; gap: var(--space-6); }
.panel--privacy .panel__row { padding: var(--space-20); gap: var(--space-8); }
.panel:not(.panel--privacy) .panel__head { padding: var(--space-20) var(--space-20) var(--space-8); }
.panel__head .muted { line-height: var(--line-height-20); }
.panel__heading { font-size: var(--font-size-17); line-height: var(--line-height-22); font-weight: var(--font-weight-bold); }
.panel__title { font-size: var(--font-size-22); line-height: var(--line-height-28); font-weight: var(--font-weight-extrabold); }
.pending { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.chip { padding: var(--space-2) var(--space-8); border-radius: var(--radius-full); background: var(--color-notice-info); font-size: var(--font-size-13); line-height: var(--line-height-18); font-weight: var(--font-weight-semibold); }
.muted { font-size: var(--font-size-15); line-height: var(--line-height-22); color: var(--color-text-secondary); text-wrap: pretty; }
/* FAQ answers keep the browser's default wrapping. */
.panel__row .muted { text-wrap: wrap; }
.support-grid { width: 100%; max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.contact { padding: var(--space-20); gap: var(--space-12); }
.button {
  min-height: var(--size-button); padding: 0 var(--space-24); border-radius: var(--radius-full); background: var(--color-primary);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  color: var(--color-on-primary); font-size: var(--font-size-17); line-height: var(--line-height-22); font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere; text-align: center;
}
.button:hover { background: var(--color-primary-pressed); color: var(--color-on-primary); }

/* 404 */
.not-found { padding-top: var(--space-40); padding-bottom: var(--space-40); display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.not-found .inner__title { align-self: flex-start; max-width: none; }

/* Footer */
.site-footer { margin-top: auto; background: var(--color-surface); border-top: var(--border-width-thin) solid var(--color-primary); }
.site-footer .wrap { padding-top: var(--space-24); padding-bottom: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.site-footer__links a { font-size: var(--font-size-15); line-height: var(--line-height-20); font-weight: var(--font-weight-semibold); }
.site-footer__copy { font-size: var(--font-size-13); line-height: var(--line-height-18); color: var(--color-text-secondary); }

/* Narrow-phone fallback, not in the design: the 52px wordmark is 357px wide, so
   below 390px it scales with the viewport (exactly 52px at 390px and up). */
@media (max-width: 389px) {
  .wordmark-big { font-size: 13vw; line-height: 13vw; }
}

/* Desktop */
@media (min-width: 768px) {
  .wrap { padding-left: 80px; padding-right: 80px; }
  .site-header { padding-top: var(--space-24); padding-bottom: var(--space-24); }
  .site-header--home { position: absolute; top: 0; left: 0; right: 0; }
  .nav__link--desktop, .nav__pill { display: inline-block; }
  .hero picture { display: block; }
  .hero__art { display: block; max-width: none; margin: 0; width: 100%; height: auto; aspect-ratio: 2172 / 525; object-fit: cover; object-position: center bottom; mix-blend-mode: multiply; opacity: var(--opacity-80); }
  .hero__text { padding-top: var(--space-32); padding-bottom: 96px; align-items: flex-start; gap: var(--space-24); }
  /* Provisional display size: its token is pending in the design system. */
  /* Between 768 and 871px the 101px wordmark plus 80px sides overflows, so it
     scales with the viewport there (exactly 101px from about 871px up). */
  .wordmark-big { font-size: min(101px, 11.6vw); line-height: min(100px, 11.5vw); margin: 0; }
  .tagline { font-size: var(--font-size-22); line-height: var(--line-height-28); font-weight: var(--font-weight-medium); max-width: 480px; }
  .badges { justify-content: flex-start; margin-top: 0; }
  .how { padding-bottom: 80px; gap: var(--space-24); }
  .how .wrap { padding-left: 80px; padding-right: 80px; gap: var(--space-24); }
  .how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); align-items: stretch; }
  .inner { padding-top: var(--space-32); padding-bottom: 80px; padding-left: 80px; padding-right: 80px; }
  .inner__title { font-size: var(--font-size-52); line-height: var(--line-height-52); max-width: 1040px; width: 100%; align-self: center; }
  .panel--privacy .panel__head { padding: var(--space-32); }
  .panel--privacy .panel__row { padding: var(--space-20) var(--space-32); }
  .support-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .site-footer .wrap { flex-direction: row; justify-content: space-between; align-items: center; padding-top: var(--space-32); padding-bottom: var(--space-32); }
}

@media (min-width: 1100px) {
  .how__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}