:root {
  --paper: #faf7f2;
  --surface: #f2ede3;
  --surface-strong: #efe8da;
  --terracotta: #c25b3f;
  --terracotta-dark: #8b3a1f;
  --terracotta-soft: #e89b82;
  --gold: #d4a857;
  --ink: #2b211b;
  --muted: #6f6258;
  --line: #decfbe;
  --white: #fffaf4;
  --shadow: 0 18px 50px rgba(85, 46, 28, 0.12);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(194, 91, 63, 0.08), rgba(250, 247, 242, 0) 320px),
    var(--paper);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  line-height: 1.62;
}

a {
  color: var(--terracotta-dark);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  touch-action: manipulation;
}

a:hover {
  color: var(--terracotta);
}

a:focus-visible,
summary:focus-visible,
.theme-carousel:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--white);
  background: var(--terracotta-dark);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus-visible {
  color: var(--white);
  transform: translateY(0);
}

.site-shell {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand-wordmark {
  display: block;
  height: 34px;
  width: auto;
  max-width: 150px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(139, 58, 31, 0.22);
  border-radius: 10px;
  color: var(--terracotta-dark);
  background: var(--white);
  box-shadow: 0 8px 18px rgba(139, 58, 31, 0.08);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.brand-text {
  display: grid;
  gap: 1px;
}

.brand-name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
}

.brand-subtitle {
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}

.top-nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(139, 58, 31, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.72);
  color: var(--terracotta-dark);
  text-decoration: none;
}

.top-nav a[aria-current="page"] {
  background: var(--terracotta-dark);
  color: var(--white);
}

.hero {
  padding: 54px 0 30px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--terracotta-dark);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 0.94;
  letter-spacing: 0;
}

.lede {
  max-width: 720px;
  margin: 22px 0 0;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
}

.updated {
  display: inline-flex;
  margin-top: 24px;
  padding: 7px 12px;
  border: 1px solid rgba(139, 58, 31, 0.18);
  border-radius: 999px;
  color: var(--terracotta-dark);
  background: rgba(255, 250, 244, 0.76);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
}

.content-layout {
  padding: 26px 0 72px;
}

.legal-card,
.language-menu {
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 8px;
  background: rgba(255, 250, 244, 0.92);
  box-shadow: var(--shadow);
}

.legal-card {
  max-width: 820px;
  padding: clamp(24px, 4vw, 48px);
}

.legal-card section + section {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

h2 {
  margin: 0 0 12px;
  color: var(--terracotta-dark);
  font-size: 1.45rem;
  line-height: 1.18;
  letter-spacing: 0;
}

p {
  margin: 0;
}

p + p {
  margin-top: 12px;
}

ul {
  margin: 12px 0 0;
  padding-left: 1.25rem;
}

li + li {
  margin-top: 7px;
}

.language-picker {
  position: relative;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}

.language-picker summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(139, 58, 31, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.72);
  color: var(--terracotta-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.language-picker summary::-webkit-details-marker {
  display: none;
}

.language-picker summary:hover {
  color: var(--terracotta);
}

.language-picker[open] summary {
  background: var(--terracotta-dark);
  color: var(--white);
}

.picker-chevron {
  font-size: 0.72rem;
  transition: transform 0.15s ease;
}

.language-picker[open] .picker-chevron {
  transform: rotate(180deg);
}

.language-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  min-width: 230px;
  padding: 10px;
  background: var(--white);
}

.language-list {
  display: grid;
  gap: 8px;
}

.language-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
}

.language-list a:hover {
  background: var(--surface);
}

.language-list a[aria-current="true"] {
  background: var(--terracotta-dark);
  color: var(--white);
}

.language-code {
  color: inherit;
  font-size: 0.78rem;
  opacity: 0.72;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 36px;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
}

.site-footer a:hover {
  color: var(--terracotta-dark);
}

.not-found {
  min-height: 62vh;
  padding: clamp(72px, 12vw, 144px) 0;
}

.not-found h1 {
  max-width: 760px;
}

.not-found .landing-discover {
  margin-top: 28px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 28px 0 72px;
}

.home-link {
  min-height: 190px;
  padding: 26px;
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 8px;
  background: rgba(255, 250, 244, 0.92);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}

.home-link span {
  color: var(--terracotta-dark);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-link strong {
  display: block;
  margin-top: 28px;
  font-size: 2rem;
  line-height: 1.05;
}

@media (max-width: 760px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-nav {
    justify-content: flex-start;
  }

  .hero {
    padding-top: 36px;
  }

  .header-actions {
    position: relative;
    justify-content: flex-start;
  }

  .language-picker {
    position: static;
  }

  .language-menu {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .site-shell {
    width: min(100% - 22px, 1040px);
  }

  .legal-card {
    padding: 20px;
  }
}

.landing-main {
  padding: 22px 0 72px;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  align-items: center;
  gap: clamp(32px, 7vw, 88px);
  min-height: min(680px, calc(100vh - 160px));
  padding: clamp(32px, 7vw, 92px) 0;
}

.landing-copy h1 {
  max-width: 640px;
}

.landing-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
}

.landing-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(139, 58, 31, 0.16);
}

.landing-wordmark {
  display: block;
  width: min(180px, 45vw);
  height: auto;
  margin: 0;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
}

.landing-status,
.landing-support {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.landing-status {
  border: 1px solid var(--terracotta-dark);
  background: var(--terracotta-dark);
  color: var(--white);
  cursor: default;
}

/* Cuando el App Store esta vivo el aviso pasa a ser enlace (site.appStore.live). */
.landing-status-link,
.closing-status-link {
  cursor: pointer;
  text-decoration: none;
}

.landing-support {
  border: 1px solid rgba(139, 58, 31, 0.22);
  color: var(--terracotta-dark);
  background: rgba(255, 250, 244, 0.72);
}

.landing-support:hover {
  border-color: var(--terracotta-dark);
  background: var(--surface-strong);
  color: var(--terracotta-dark);
}

.letter-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 390px);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 58px 28px 28px;
  border: 1px solid rgba(139, 58, 31, 0.2);
  border-radius: 30px;
  background: linear-gradient(145deg, var(--surface), var(--white));
  box-shadow: 0 28px 60px rgba(85, 46, 28, 0.16);
  transform: rotate(3deg);
}

.board-ribbon {
  position: absolute;
  top: 22px;
  left: 24px;
  color: var(--terracotta-dark);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.letter-tile {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 10px 20px rgba(85, 46, 28, 0.1);
  color: var(--terracotta-dark);
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
}

.tile-i,
.tile-o {
  background: var(--terracotta);
  color: var(--white);
}

.thread-line {
  position: absolute;
  right: -28px;
  bottom: 42px;
  width: 42%;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
  transform: rotate(-20deg);
}

.how-to-play {
  padding: 88px 0 20px;
  border-top: 1px solid var(--line);
}

.how-to-play h2 {
  max-width: 560px;
  margin-bottom: 30px;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-step {
  min-height: 220px;
  padding: 26px;
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.92);
  box-shadow: var(--shadow);
}

.step-number {
  color: var(--terracotta-dark);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.landing-step h3 {
  margin: 22px 0 10px;
  color: var(--terracotta-dark);
  font-size: 1.55rem;
  line-height: 1.08;
}

.landing-step p {
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.site-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  .landing-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 30px 0 64px;
  }

  .letter-board {
    width: min(100%, 340px);
    transform: none;
  }

  .thread-line {
    right: -12px;
  }

  .landing-steps {
    grid-template-columns: 1fr;
  }

  .landing-step {
    min-height: 0;
  }
}

/* Landing page — editorial direction based on the approved visual concept. */
.landing-shell {
  width: 100%;
  max-width: none;
  overflow: hidden;
  background: var(--paper);
}

.landing-header,
.landing-hero-inner,
.landing-section-inner,
.reveal-inner,
.pro-inner,
.values-grid,
.closing-inner,
.landing-shell > .site-footer {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 96px;
  padding-block: 20px;
}

.landing-header-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--terracotta-dark);
  text-decoration: none;
}

.landing-header-brand img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 190px;
}

.landing-header-actions,
.landing-nav {
  display: flex;
  align-items: center;
}

.landing-header-actions {
  gap: 18px;
}

.landing-nav {
  gap: 20px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}

.landing-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.landing-nav a:hover {
  color: var(--terracotta-dark);
}

.landing-header .language-picker summary {
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

.landing-header .language-picker {
  position: relative;
}

.landing-header .language-menu {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 230px;
}

.landing-shell .language-list a,
.landing-shell .site-footer a {
  min-height: 44px;
  align-items: center;
}

.landing-shell .site-footer a {
  display: inline-flex;
}

.landing-header .language-picker summary:hover {
  border-color: rgba(139, 58, 31, 0.18);
  color: var(--terracotta-dark);
}

.landing-header .language-picker[open] summary {
  border-color: var(--terracotta-dark);
  background: var(--terracotta-dark);
  color: var(--white);
}

.landing-main {
  padding: 0;
}

.landing-hero {
  display: block;
  min-height: 0;
  padding: 58px 0 0;
  overflow: hidden;
}

.landing-hero-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.landing-copy {
  position: relative;
  z-index: 1;
  max-width: 940px;
}

.landing-copy .eyebrow {
  margin-bottom: 16px;
  letter-spacing: 0.18em;
}

.landing-copy h1 {
  max-width: 940px;
  font-size: clamp(3.25rem, 6.2vw, 5.8rem);
  line-height: 0.94;
}

.landing-copy .lede {
  max-width: 590px;
  margin: 24px auto 0;
  color: #51473f;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.55;
}

.landing-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 30px;
}

.landing-status,
.landing-discover,
.closing-status {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 999px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.landing-status,
.landing-discover {
  width: min(100%, 340px);
}

.landing-status {
  border: 1px solid var(--terracotta-dark);
  background: var(--terracotta-dark);
  color: var(--white);
}

.landing-discover {
  border: 1px solid var(--terracotta);
  background: transparent;
  color: var(--terracotta-dark);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.landing-discover:hover {
  background: var(--terracotta-dark);
  color: var(--white);
}

/* Only margin lives here: <figure> carries a UA margin and it must stay ahead of the
   per-instance margins below. Everything else about the frame is set at the end of the
   file, in the ".screenshot-frame" block that paints the iPhone bezel. */
.screenshot-frame {
  margin: 0;
}

.hero-shot {
  width: min(372px, calc(100vw - 48px));
  height: 650px;
  margin-top: 36px;
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 28px 65px rgba(55, 28, 17, 0.22);
}

.hero-shot img {
  height: auto;
  min-height: 100%;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.landing-story {
  padding: 72px 0 0;
  color: var(--white);
  background: #b94d31;
}

.landing-story h2 {
  max-width: 820px;
  margin: 0 auto 44px;
  color: var(--white);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1;
  text-align: center;
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-step {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.step-copy {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 0 14px;
  width: 100%;
  min-height: 152px;
  align-content: start;
}

.step-number {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--terracotta-dark);
  background: var(--white);
  font-size: 0.88rem;
  letter-spacing: 0;
}

.landing-step h3 {
  margin: 2px 0 8px;
  color: var(--white);
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
}

.landing-step p {
  color: var(--white);
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
}

.story-shot {
  width: min(100%, 290px);
  aspect-ratio: 0.57;
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.story-shot img {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.landing-reveal {
  padding: clamp(72px, 10vw, 132px) 0;
  background: var(--white);
}

.reveal-inner {
  display: grid;
  grid-template-columns: minmax(270px, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(48px, 9vw, 120px);
}

.reveal-shot {
  width: min(100%, 420px);
  height: 690px;
  justify-self: end;
}

.reveal-copy {
  max-width: 560px;
}

.reveal-copy h2 {
  margin: 0 0 24px;
  color: var(--ink);
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.95;
}

.reveal-copy > p:last-child {
  max-width: 460px;
  color: #51473f;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
}

.landing-features {
  padding: clamp(76px, 10vw, 132px) 0;
  background: var(--paper);
}

.features-heading {
  max-width: 780px;
  margin: 0 0 52px;
}

.features-heading h2 {
  max-width: 720px;
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(2.7rem, 5.4vw, 5rem);
  line-height: 0.98;
}

.features-heading > p:last-child {
  max-width: 620px;
  color: #51473f;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

.feature-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.feature-copy {
  min-height: 236px;
  padding: 28px 28px 24px;
}

.feature-number {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--terracotta-dark);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.feature-copy h3 {
  margin: 0 0 10px;
  color: var(--terracotta-dark);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  line-height: 1.06;
}

.feature-copy p {
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
}

.feature-shot {
  width: calc(100% - 30px);
  height: 520px;
  margin: auto 15px 0;
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.feature-shot img {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.landing-themes {
  padding: clamp(72px, 9vw, 116px) 0;
  border-top: 1px solid var(--line);
  background: #f4ede4;
}

.themes-heading {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

.themes-heading h2 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(2.6rem, 5vw, 4.7rem);
  line-height: 0.98;
}

.themes-heading > p:last-child {
  color: #51473f;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
}

.theme-gallery {
  display: grid;
  grid-auto-columns: clamp(280px, 31vw, 350px);
  grid-auto-flow: column;
  gap: clamp(20px, 3vw, 34px);
  width: max-content;
  padding: 4px 4px 24px;
}

.theme-carousel {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 4px;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--terracotta) rgba(139, 58, 31, 0.12);
  scrollbar-width: thin;
}

/* Las clases las pone src/carousel.js: is-draggable al arrancar, is-dragging
   mientras dura el gesto. Sin JS no se aplica ninguna y el carrusel se comporta
   como siempre. scroll-behavior: auto es obligatorio, no cosmetico: la regla de
   arriba pone smooth y con eso cada asignacion de scrollLeft se anima, asi que
   el carrusel iria por detras del raton. Quitar el snap evita que el navegador
   tire de vuelta a la tarjeta mas cercana en mitad del arrastre; al soltar
   vuelve y encaja solo. */
.theme-carousel.is-draggable {
  cursor: grab;
}

.theme-carousel.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

/* Solo mientras el riel encaja al soltar: el snap ya esta de vuelta y el ajuste
   tiene que ser seco, no animado. */
.theme-carousel.is-settling {
  scroll-behavior: auto;
}

.theme-card {
  min-width: 0;
  margin: 0;
  scroll-margin-inline: 4px;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.theme-shot {
  width: 100%;
  aspect-ratio: 0.58;
}

.theme-card figcaption {
  display: grid;
  gap: 4px;
  padding: 18px 6px 0;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.theme-card figcaption strong {
  color: var(--terracotta-dark);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
}

.theme-card figcaption span {
  color: var(--muted);
}

.theme-continuity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 0;
  color: var(--terracotta-dark);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.theme-continuity span {
  font-size: 1.15rem;
}

.theme-pagination {
  display: grid;
  grid-template-columns: repeat(8, minmax(36px, 44px));
  justify-content: center;
  margin-top: 8px;
}

.theme-pagination a {
  display: grid;
  min-height: 44px;
  place-items: center;
  border-radius: 999px;
  text-decoration: none;
}

.theme-pagination a span {
  width: 9px;
  height: 9px;
  border: 1px solid var(--terracotta-dark);
  border-radius: 50%;
  background: transparent;
  transition: background-color 160ms ease, transform 160ms ease;
}

.theme-pagination a:hover span,
.theme-pagination a:focus-visible span {
  background: var(--terracotta-dark);
  transform: scale(1.3);
}

.landing-pro {
  padding: clamp(68px, 9vw, 108px) 0;
  color: var(--white);
  background: var(--terracotta-dark);
}

/* La pista del telefono se mide en pixeles con maximo, asi que se dimensiona
   antes que el 1fr: la columna de copy se queda con el resto de forma
   determinista y el titular no puede desbordarla. */
.pro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
  gap: clamp(48px, 7vw, 104px);
}

.pro-copy {
  min-width: 0;
}

/* Sobre el terracota profundo, --terracotta-soft se queda en 3,5:1 y no llega
   al minimo de texto pequeno: la marca de seccion va en crema. */
.pro-copy .eyebrow {
  color: var(--white);
}

.pro-copy h2 {
  margin: 0 0 18px;
  color: var(--white);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1.02;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.pro-lede {
  max-width: 560px;
  margin: 0 0 30px;
  color: #e7ddd3;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.06rem;
  line-height: 1.55;
}

.pro-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pro-benefits li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin: 0;
  padding: 14px 0;
}

.pro-benefits li:first-child {
  padding-top: 0;
}

.pro-benefits li + li {
  border-top: 1px solid rgba(255, 250, 244, 0.18);
}

.pro-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  color: var(--terracotta-dark);
  background: var(--white);
  font-weight: 900;
}

.pro-benefit-copy h3 {
  margin: 0 0 3px;
  color: var(--white);
  font-size: 1.12rem;
  line-height: 1.2;
}

.pro-benefit-copy p {
  margin: 0;
  color: #e7ddd3;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
}

.pro-trial {
  margin: 26px 0 0;
  color: var(--white);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
}

.pro-shot {
  width: min(100%, 380px);
}

.landing-values {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.values-grid li {
  min-width: 0;
  padding: 6px clamp(20px, 4vw, 48px);
}

.values-grid li + li {
  margin-top: 0;
  border-left: 1px solid var(--line);
}

.values-grid h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  line-height: 1.05;
}

.values-grid p {
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
}

.landing-closing {
  padding: 42px 0;
  color: var(--white);
  background: #b94d31;
}

.closing-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.closing-inner h2 {
  margin: 0 0 4px;
  color: var(--white);
  font-size: clamp(2.5rem, 5vw, 4.1rem);
}

.closing-inner p {
  color: var(--white);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.closing-status {
  max-width: 320px;
  border: 1px solid var(--white);
  color: var(--terracotta-dark);
  background: var(--white);
}

.landing-shell > .site-footer {
  padding-top: 28px;
}

@media (max-width: 900px) {
  .landing-header,
  .landing-hero-inner,
  .landing-section-inner,
  .reveal-inner,
  .pro-inner,
  .values-grid,
  .closing-inner,
  .landing-shell > .site-footer {
    width: min(100% - 36px, 1180px);
  }

  .landing-header {
    align-items: flex-start;
  }

  .landing-header-actions {
    gap: 8px;
  }

  .landing-nav {
    gap: 10px;
  }

  .landing-steps {
    gap: 20px;
  }

  .step-copy {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 10px;
    min-height: 178px;
  }

  .step-number {
    width: 32px;
    height: 32px;
  }

  .reveal-inner {
    grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.1fr);
    gap: 46px;
  }

  .reveal-shot {
    height: 590px;
  }

  .pro-inner {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 40px;
  }

  .features-grid {
    gap: 18px;
  }

  .feature-copy {
    min-height: 260px;
    padding-inline: 22px;
  }

  .feature-shot {
    height: 450px;
  }
}

@media (max-width: 700px) {
  .landing-header {
    min-height: 82px;
  }

  .landing-header-brand img {
    height: 36px;
    max-width: 150px;
  }

  .landing-nav {
    display: none;
  }

  .landing-hero {
    padding-top: 38px;
  }

  .landing-copy h1 {
    font-size: clamp(3.2rem, 15vw, 4.8rem);
  }

  .hero-shot {
    height: 560px;
  }

  .landing-story {
    padding-top: 62px;
  }

  .landing-story h2 {
    margin-bottom: 38px;
  }

  .landing-steps,
  .features-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .landing-steps {
    gap: 54px;
  }

  .landing-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.72fr);
    align-items: end;
    gap: 20px;
  }

  .step-copy {
    align-self: start;
    min-height: 0;
  }

  .story-shot {
    width: 100%;
  }

  .reveal-inner {
    grid-template-columns: 1fr;
  }

  .reveal-shot {
    width: min(100%, 340px);
    height: 560px;
    justify-self: center;
  }

  .reveal-copy {
    max-width: 520px;
    text-align: center;
  }

  .reveal-copy > p:last-child {
    margin-inline: auto;
  }

  .features-heading {
    text-align: center;
  }

  .features-heading > p:last-child {
    margin-inline: auto;
  }

  .features-grid {
    width: min(100%, 390px);
    gap: 38px;
    margin-inline: auto;
  }

  .feature-copy {
    min-height: 0;
  }

  .feature-shot {
    height: 540px;
  }

  .theme-gallery {
    grid-auto-columns: min(76vw, 330px);
    gap: 20px;
    width: max-content;
    margin: 0;
  }

  .values-grid li {
    padding: 24px 4px;
  }

  .values-grid li + li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .closing-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .pro-inner {
    grid-template-columns: 1fr;
  }

  .pro-shot {
    width: min(100%, 340px);
    justify-self: center;
    margin-top: 6px;
  }
}

@media (max-width: 430px) {
  .landing-header,
  .landing-hero-inner,
  .landing-section-inner,
  .reveal-inner,
  .pro-inner,
  .values-grid,
  .closing-inner,
  .landing-shell > .site-footer {
    width: min(100% - 24px, 1180px);
  }

  .landing-copy .eyebrow {
    font-size: 0.7rem;
  }

  .landing-copy h1 {
    font-size: clamp(3rem, 15vw, 4rem);
  }

  .landing-copy .lede {
    font-size: 1rem;
  }

  .landing-status,
  .landing-discover {
    width: 100%;
  }

  .hero-shot {
    width: min(316px, calc(100vw - 36px));
    height: 530px;
  }

  .landing-step {
    grid-template-columns: 1fr;
  }

  .step-copy {
    padding-inline: 8px;
  }

  .story-shot {
    width: min(100%, 270px);
    justify-self: center;
  }

  .reveal-shot {
    height: 520px;
  }

  .feature-shot {
    height: 500px;
  }

  .pro-benefits li {
    padding: 12px 0;
  }

  .pro-shot {
    width: min(300px, calc(100vw - 48px));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Authentic iPhone 17 Pro Max frame. The screen inset values come from the
   source bezel asset used by Hilo's App Store artwork. */
.screenshot-frame {
  position: relative;
  height: auto !important;
  aspect-ratio: 1470 / 3000 !important;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 24px 26px rgba(55, 28, 17, 0.18))
    drop-shadow(0 7px 10px rgba(34, 17, 12, 0.16));
}

.screenshot-frame::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("/assets/iphone-17-pro-max-silver-frame.webp") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

/* Sized to the frame's transparent screen hole (measured from the alpha channel of
   iphone-17-pro-max-silver-frame.webp: left 4.0816%, top 1.7%, width 91.8367%,
   height 96.6%, corner radius 206/1470) plus a bleed that tucks under the opaque
   bezel ring, so no page background shows through around the screenshot.
   The top bleed is capped: there is a transparent speaker slit just above the hole. */
.screenshot-frame > img {
  position: absolute;
  top: 1.6%;
  left: 3.6735%;
  z-index: 1;
  width: 92.6531%;
  height: 96.9%;
  min-height: 0;
  border-radius: 15.125% / 7.086%;
  object-fit: cover;
  object-position: top;
}

/* Contraste de los CTA solidos cuando son <a> ------------------------------
   Con site.appStore.live estos botones pasan de <span> a <a>, y entonces gana
   `a:hover { color: var(--terracotta) }` (0,1,1) sobre el color propio de la
   clase (0,1,0). Resultado medido: .landing-status pasa de blanco sobre
   terracota oscuro (8,1:1) a terracota claro sobre terracota oscuro (1,7:1) con
   solo pasar el raton, es decir el texto casi desaparece. Afecta al CTA
   principal de la landing, al del 404 y al del dossier de prensa. */
.landing-status:hover {
  color: var(--white);
}

.closing-status:hover {
  color: var(--terracotta-dark);
}

/* ── Dossier de prensa ───────────────────────────────────────────────────────
   El dossier usa el chasis documental (.site-shell, .site-header, .hero) igual
   que privacidad y terminos, pero NO su .legal-card: esa tarjeta de 820 px
   envolvia el dossier entero y era lo que estrangulaba la parrilla de capturas.
   Sin ella las secciones disponen de los 1040 px de .site-shell.

   Antes de esto, las cinco clases que emitia renderPress (.press-facts,
   .press-fact, .press-assets, .press-asset-list, .press-meta) no tenian NI UNA
   regla: el dossier salia con los valores por defecto del navegador dentro de un
   contenedor bonito. De ahi que la ficha se leyera como una lista indentada.

   Reglas de este bloque, que existen por un motivo concreto:
   - Va al FINAL del fichero: styles.css lleva dos landings superpuestas (el corte
     esta en el comentario "Landing page — editorial direction") y .screenshot-frame
     usa !important. Solo aqui abajo se gana limpiamente.
   - TODO selector empieza por .press-. Nada de .brand-card ni .asset-grid:
     .brand, .brand-mark, .brand-text, .brand-wordmark y .brand-subtitle ya
     existen en la cabecera de las 38 paginas del sitio.
   - Cero selectores de elemento desnudos (dl, dt, dd, h3, img, li...). Como el
     bloque va el ultimo, cualquiera de ellos ganaria por orden de cascada y se
     colaria en el resto del sitio. Siempre descendientes.
   - Breakpoints 760 y 430, los del chasis documental. Los de 900/700 son
     .landing-*-scoped y no tocan esta pagina: usarlos crearia una zona muerta
     entre 760 y 900 donde el contenido colapsa pero la cabecera sigue en fila.
   - El fondo de las capturas es #faf7f2, exactamente --paper: una miniatura
     suelta sobre el fondo de pagina se disolveria. Por eso la seccion de
     material va tintada y cada miniatura lleva borde de 1 px. */

.press-main {
  padding-bottom: clamp(48px, 6vw, 84px);
}

.press-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* .updated es inline-flex, asi que el <time> del dossier se vuelve un item flex
   y el navegador se come el espacio del "Actualizado: ". En las paginas legales
   no pasa porque ahi la fecha es texto suelto, sin elemento propio. */
.press-main .updated {
  gap: 0.32em;
}

.press-section {
  padding-top: clamp(40px, 5vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.press-section h2 {
  margin: 0 0 18px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.05;
}

/* Una sola anchura de prosa en toda la pagina: si cada seccion eligiera la suya
   se perderia la columna comun y cantaria mas que el bug que esto arregla. */
.press-prose,
.press-statement {
  max-width: 720px;
}

.press-statement {
  margin: 0 0 24px;
  color: var(--ink);
  font-size: clamp(1.18rem, 2.2vw, 1.5rem);
  line-height: 1.35;
}

.press-footnote {
  margin-top: clamp(26px, 3vw, 38px);
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.95rem;
}

/* Ficha tecnica ------------------------------------------------------------ */

.press-fact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 52px);
  margin: 0;
  padding: clamp(8px, 1.4vw, 16px) clamp(22px, 3vw, 38px) clamp(16px, 2.2vw, 26px);
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.press-fact-row {
  display: grid;
  gap: 3px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

/* Las dos primeras filas abren columna: sin esto la de la derecha luce un filete
   suelto encima de nada. */
.press-fact-row:nth-child(-n + 2) {
  border-top: 0;
}

.press-fact-row dt {
  color: var(--terracotta-dark);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.press-fact-row dd {
  margin: 0;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Que trae ----------------------------------------------------------------- */

.press-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.press-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 16px;
  color: var(--ink);
  background: var(--white);
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.35;
}

.press-tick {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--gold);
  font-size: 0.85rem;
  font-weight: 900;
}

/* Material grafico --------------------------------------------------------- */

.press-section-assets {
  padding: clamp(28px, 3.6vw, 44px) clamp(22px, 3vw, 40px) clamp(32px, 4vw, 48px);
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 28px;
  background: #f4ede4;
}

.press-zip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 26px 0 0;
}

.press-asset-group {
  margin-top: clamp(32px, 4vw, 48px);
}

.press-asset-group h3 {
  margin: 0 0 18px;
  color: var(--terracotta-dark);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.15;
}

.press-asset-grid,
.press-brand-grid {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.press-asset-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.press-brand-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.press-asset-grid li,
.press-brand-grid li {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
}

.press-asset-card,
.press-brand-card {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.press-asset-card img,
.press-story-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(85, 46, 28, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.press-asset-card:hover img {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(85, 46, 28, 0.2);
}

.press-brand-card {
  padding: 22px;
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(85, 46, 28, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.press-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(85, 46, 28, 0.2);
}

.press-brand-media {
  display: grid;
  min-height: 92px;
  place-items: center;
  margin-bottom: 16px;
}

.press-brand-media img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 64px;
}

.press-asset-label {
  display: block;
  margin-top: 12px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.35;
}

.press-brand-card .press-asset-label {
  margin-top: 0;
}

.press-asset-card:hover .press-asset-label,
.press-brand-card:hover .press-asset-label {
  color: var(--terracotta-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.press-asset-meta {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
}

.press-zip .press-asset-meta {
  margin-top: 0;
}

/* Permiso de uso ----------------------------------------------------------- */

.press-note {
  max-width: 820px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(139, 58, 31, 0.16);
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.press-note p {
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.55;
}

/* Por que existe ----------------------------------------------------------- */

.press-section-story {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(200px, 0.75fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.press-story-copy {
  max-width: 720px;
}

.press-story-shot {
  width: min(100%, 240px);
  margin: 0;
  justify-self: end;
}

/* Contacto ----------------------------------------------------------------- */

.press-contact-mail {
  margin-top: 14px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
}

@media (max-width: 760px) {
  .press-fact-list,
  .press-checklist {
    grid-template-columns: 1fr;
  }

  /* En una sola columna vuelve a haber un unico inicio de lista. */
  .press-fact-row:nth-child(-n + 2) {
    border-top: 1px solid var(--line);
  }

  .press-fact-row:first-child {
    border-top: 0;
  }

  .press-asset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .press-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .press-section-story {
    grid-template-columns: 1fr;
  }

  .press-story-shot {
    width: min(100%, 220px);
    justify-self: center;
  }
}

@media (max-width: 430px) {
  .press-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .press-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .press-brand-grid {
    grid-template-columns: 1fr;
  }

  .press-section-assets {
    padding-right: 16px;
    padding-left: 16px;
  }

  .press-asset-label {
    font-size: 0.86rem;
  }
}