/* A04: shared navigation, reading order and bounded mobile layout. */
html { scroll-padding-top: 128px; }
.journey-inner { width: min(calc(100% - 36px), var(--container)); margin-inline: auto; }
.journey-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-block: 24px; }
.journey-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.journey-note { max-width: 65ch; font-size: 14px; line-height: 1.6; }
.journey-note a, .journey-faq a { text-decoration: underline; text-underline-offset: 4px; }
.journey-faq { padding-block: var(--space-3xl); background: var(--surface-section); }
.journey-faq h2 { max-width: 24ch; font-family: 'Archivo Black', sans-serif; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; }
.journey-faq details { padding-block: 16px; border-bottom: 1px solid var(--border-default); }
.journey-faq summary { min-height: 44px; font-weight: 700; cursor: pointer; }
.journey-faq p { max-width: 70ch; }
.journey-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.journey-demo h3 { margin: 32px 0 12px; font-size: 24px; }
.journey-demo p { max-width: 65ch; }
.journey-demo figure { margin: 0; }
.journey-demo video { width: 100%; max-height: 460px; object-fit: contain; background: var(--surface-inverse); }
.journey-demo figcaption { margin-top: 12px; font-size: 14px; color: var(--text-secondary); }
.home-page .hero::before { content: none; }
.home-page .hero { min-height: 680px; }
.home-page .hero__inner { min-height: 604px; padding-block: 64px; }
.home-page .hero__headline.journey-headline { width: min(760px, 90%); font-size: clamp(40px, 5.2vw, 72px); line-height: 1.05; letter-spacing: -.03em; }
.home-page .hero__microcopy { max-width: 52ch; font-size: 13px; text-transform: none; letter-spacing: 0; }
.home-page .journey-menu-toggle { display: none; }
.home-page #monedas p { max-width: 70ch; }
.store-page .hero__trustline { margin-top: 20px; color: var(--text-primary); }
.store-page .promo-strip a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.store-page .hero .journey-note { margin-bottom: 0; color: #51483f; }
.store-page .cart-footer .journey-note { font-size: 12px; margin-block: 8px; }
.store-page .cart-footer { flex-shrink: 0; }
.checkout-state__actions > [hidden] { display: none !important; }

/* Keep cart contents and recovery messages reachable in short viewports. */
@media (max-height: 650px) {
  .store-page .cart-drawer { display: block; overflow-y: auto; }
  .store-page .cart-header { position: sticky; top: 0; z-index: 2; background: var(--white, #fffefa); }
  .store-page .cart-items { overflow: visible; }
}
.content-page .journey-note { font-size: 14px; }
.content-page .checkout-state__brand { width: fit-content; text-decoration: none; }
.content-page .legal-hero h1 { font-size: clamp(30px, 7vw, 64px); overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .journey-demo { grid-template-columns: 1fr; gap: 24px; }
  .home-page .topbar__inner { justify-content: space-between; }
  .js-motion .home-page .journey-menu-toggle:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; color: var(--color-ink); background: var(--brand); border: 0; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
  .home-page .nav { width: 100%; }
  .js-motion .home-page .nav[data-collapsed="true"] { display: none; }
  .home-page .nav .nav__link { min-height: 44px; font-size: 13px; }
  .home-page .hero { min-height: 0; padding-block: 40px; }
  .home-page .hero__inner { min-height: 0; padding-block: 0; gap: 24px; }
  .home-page .hero__headline.journey-headline { width: 100%; font-size: clamp(36px, 8vw, 56px); }
  .home-page .hero__lede { font-size: 16px; }
}
@media (max-width: 720px) {
  .store-page .hero { padding-block: 32px; }
  .store-page .hero__title { font-size: clamp(32px, 8vw, 48px); }
  .store-page .hero__subtitle { font-size: 16px; }
  .store-page .modal-content { display: block; }
  .store-page .modal-image-col {
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
    align-content: start;
  }
  .store-page .modal-image-note { margin: 0; }
  .store-page .modal-content .modal-details-col { padding: 24px 20px; }
  .store-page .modal-purchase .btn--primary { position: static; box-shadow: none; }
}

/* A05: espacio para la información que sustituye las medidas sin respaldo. */
.store-page .size-guide__table { padding: 20px; }

/* A06: contexto de las muestras y reserva de espacio para medios. */
.asset-caption, .asset-device figcaption { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.asset-caption a { text-decoration: underline; text-underline-offset: 3px; }
.asset-description { margin-top: 16px; font-size: 14px; line-height: 1.6; }
.asset-description summary { cursor: pointer; min-height: 44px; display: list-item; }
.journey-demo video { aspect-ratio: 1304 / 700; height: auto; }
.home-page .asset-device { flex-direction: column; gap: 16px; margin: 0; padding-top: 0; min-width: 0; width: 100%; }
.home-page .asset-device .download__mockup { height: auto; max-width: 100%; }
.home-page .download__inner > * { min-width: 0; }
.home-page .shop-banner .asset-caption { color: #d5cfc6; }
.home-page .download__note { color: #51483f; }
.asset-device figcaption { max-width: 42ch; }
.store-page .modal-image-col .modal-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.store-page .modal-image-note { margin: 12px 20px; }
.store-page .shop-toast { top: 20px; bottom: auto; pointer-events: none; }
@media (max-width: 720px) {
  .store-page .modal-image-col .modal-image {
    width: min(100%, 300px);
    justify-self: center;
  }
  .store-page .modal-image-note { margin: 0; }
}
@media (max-width: 900px) {
  .home-page .asset-device { order: 0; }
}
@media (max-width: 600px) {
  .home-page .download__headline { font-size: clamp(28px, 8vw, 40px); overflow-wrap: anywhere; }
}

/* A07: lectura, foco y un único desplazamiento en la ficha. */
.home-page .how__header { display: block; margin-bottom: clamp(32px, 5vw, 64px); }
.home-page .how__title { max-width: 20ch; font-size: clamp(36px, 5vw, 64px); line-height: 1.08; letter-spacing: -.03em; }
.store-page .payment__copy .section-subtitle { opacity: 1; }
.store-page .payment__copy .journey-links a { color: var(--text-primary); }
.home-page .asset-device figcaption { color: #51483f; }
.content-page .checkout-state h1 { font-size: clamp(30px, 7vw, 64px); line-height: 1.08; overflow-wrap: anywhere; letter-spacing: -.03em; }
.content-page .legal-nav { position: static; }
:is(.home-page, .store-page, .content-page) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--color-paper);
}
:is(.home-page, .store-page) :is(.topbar, .site-footer, .footer) :is(a, button):focus-visible {
  outline-color: var(--color-gold); box-shadow: 0 0 0 6px var(--color-ink);
}
.store-page .modal-content { grid-template-rows: auto auto; height: auto; align-content: start; }
.store-page .modal-toolbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; padding: 8px 12px; background: var(--color-paper); }
.store-page .modal-toolbar .close-modal { position: static; flex-shrink: 0; }
.store-page .modal-details-col { overflow: visible; min-height: 0; }
.store-page .modal-image-col { min-height: 0; }
/* Los textos y las muestras se ven desde el primer pintado, incluso sin observadores. */
.js-motion [data-reveal], .js-motion [data-reveal].is-in {
  opacity: 1; transform: none; filter: none; clip-path: none; transition: none; will-change: auto;
}
.home-page :is(.hero__lede, .hero__actions, .hero__microcopy) { animation: none; opacity: 1; transform: none; filter: none; }
@media (max-height: 500px) {
  .store-page .modal-image { max-height: 180px; }
  :is(.home-page, .store-page) .topbar { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}