: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(6, minmax(0, 1fr));
}

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

/* iPhone Duo: la captura del libro es horizontal y ocupa dos columnas, asi que
   las seis caben en una fila de siete. */
.press-duo-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.press-duo-grid .press-asset-landscape {
  grid-column: span 2;
}

/* iPhone Duo interactivo de /duo/ (web/src/duo-fold.js). CSS 3D con las
   capturas reales: la del libro se parte en dos mitades y la exterior va en la
   cara de atras de la mitad derecha, que al cerrarse queda encima de la
   izquierda. Cada mitad es una pieza con grosor: la cara de delante, siete capas
   de metal detras (.duo-body) y, en la derecha, la cara de atras. El acabado
   imita el Star White sin usar la imagen de Apple: sus bezels no se pueden
   animar, girar ni recortar. Sin script se ve el libro abierto.

   Todo el pliegue sale de un solo angulo, --duo-angle, que se anima como
   propiedad registrada: el giro de la hoja, el desplazamiento del libro, la
   sombra de cada cara y el redondeo de la bisagra se calculan de el en cada
   fotograma y no se desincronizan nunca, ni con los botones ni con el dedo. La
   sombra sigue la idea de Fold Carousel (Kareem-AEz, MIT): oscurecer la hoja
   hacia su borde de fuera cuanto mas se inclina. Sin @property (Safari < 16.4)
   el pliegue salta en vez de animarse. */
@property --duo-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --duo-shift {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.duo {
  --duo-stage-h: clamp(300px, 56vw, 540px);
  --duo-t: calc(var(--duo-stage-h) * 0.024);
  --duo-metal-w: 3px;
  --duo-bezel: 6px;
  --duo-radius: 26px;
  --duo-hinge-radius: 0px;
  --duo-glass: #121214;
  --duo-metal: #e6e2da;
  --duo-metal-side: #cfc9bd;
  --duo-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  margin: 8px 0 12px;
}

/* Cerrado, el libro se desplaza un cuarto a la derecha para centrar la mitad
   visible; en un movil esa caja vacia sobresale y la pagina se movia de lado.
   Se recorta solo en horizontal: lo que se ve del aparato cabe siempre. */
.duo-stage {
  position: relative;
  display: grid;
  height: var(--duo-stage-h);
  place-items: center;
  overflow-x: clip;
  perspective: 2200px;
}

/* Sombra en el suelo, fuera del 3D: un filtro dentro aplanaria las piezas. */
.duo-stage::before {
  position: absolute;
  right: 20%;
  bottom: 5%;
  left: 20%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 33, 27, 0.26), transparent);
  content: "";
  filter: blur(6px);
}

/* Safari no aplica la opacidad a un contenedor 3D (preserve-3d): el aparato
   que no toca se oculta tambien con visibility, que cambia al acabar el fundido. */
.duo-book,
.duo-ds {
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--duo-ease), opacity 0.45s ease, visibility 0s;
}

/* El desplazamiento va en `translate` y no en `transform`: `transform` tiene
   su propia transicion (la del paso a DS) y, recalculado en cada fotograma,
   iria siempre por detras del angulo.
   Las esquinas de la bisagra se redondean en los ultimos 10 grados antes de
   cerrar (cos 170 = -0,985); antes, a medio plegar, dejaban una muesca. */
.duo-book {
  --duo-angle: 0deg;
  --duo-shift: 0;
  --duo-hinge-radius: calc(var(--duo-radius) * clamp(0, (-1 * cos(var(--duo-angle)) - 0.985) * 66.7, 1));
  width: min(100%, calc(var(--duo-stage-h) * 1.12));
  aspect-ratio: 951 / 669;
  translate: calc(25% * var(--duo-shift)) 0;
  transition: --duo-angle 0.9s var(--duo-ease), --duo-shift 0.9s var(--duo-ease),
    transform 0.9s var(--duo-ease), opacity 0.45s ease, visibility 0s;
  touch-action: pan-y;
  cursor: grab;
}

.duo-ds {
  width: min(72%, calc(var(--duo-stage-h) * 0.64));
  aspect-ratio: 669 / 951;
  opacity: 0;
  visibility: hidden;
  transform: rotate(90deg) scale(0.85);
  pointer-events: none;
  transition: transform 0.9s var(--duo-ease), opacity 0.45s ease, visibility 0s linear 0.45s;
}

.duo[data-posture="closed"] .duo-book {
  --duo-angle: -180deg;
  --duo-shift: 1;
}

.duo[data-posture="ds"] .duo-book {
  opacity: 0;
  visibility: hidden;
  transform: rotate(-90deg) scale(0.85);
  pointer-events: none;
  transition: --duo-angle 0.9s var(--duo-ease), --duo-shift 0.9s var(--duo-ease),
    transform 0.9s var(--duo-ease), opacity 0.45s ease, visibility 0s linear 0.45s;
}

.duo[data-posture="ds"] .duo-ds {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: transform 0.9s var(--duo-ease), opacity 0.45s ease, visibility 0s;
}

.duo-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
}

/* Silueta de cada mitad: esquinas de fuera redondeadas y las de la bisagra
   rectas, para que abiertas las dos pantallas se toquen sin muesca. */
.duo-half-left {
  --duo-corners: var(--duo-radius) var(--duo-hinge-radius) var(--duo-hinge-radius) var(--duo-radius);
  left: 0;
  transform: translateZ(-1px);
}

.duo-half-right {
  --duo-corners: var(--duo-hinge-radius) var(--duo-radius) var(--duo-radius) var(--duo-hinge-radius);
  left: 50%;
  transform: rotateY(var(--duo-angle));
  transform-origin: left center;
}

.duo-dragging .duo-book {
  transition: none;
  cursor: grabbing;
}

.duo-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.duo-face,
.duo-layer {
  position: absolute;
  inset: 0;
  border-radius: var(--duo-corners);
}

.duo-layer {
  background: var(--duo-metal-side);
}

.duo-layer:nth-child(1) { transform: translateZ(calc(var(--duo-t) * -0.125)); }
.duo-layer:nth-child(2) { transform: translateZ(calc(var(--duo-t) * -0.25)); }
.duo-layer:nth-child(3) { transform: translateZ(calc(var(--duo-t) * -0.375)); }
.duo-layer:nth-child(4) { transform: translateZ(calc(var(--duo-t) * -0.5)); }
.duo-layer:nth-child(5) { transform: translateZ(calc(var(--duo-t) * -0.625)); }
.duo-layer:nth-child(6) { transform: translateZ(calc(var(--duo-t) * -0.75)); }
.duo-layer:nth-child(7) { transform: translateZ(calc(var(--duo-t) * -0.875)); }

/* La cara es el canto de metal visto de frente; dentro, el cristal y la captura. */
.duo-face {
  padding: var(--duo-metal-w);
  background: var(--duo-metal);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Sombra de cada cara, de la bisagra hacia fuera. Sube con la inclinacion de
   la hoja (-sin del angulo: 0 plana, 1 de canto), igual al abrir que al cerrar.
   La mitad fija se oscurece junto a la bisagra a medida que la tapa la otra. */
.duo-face::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.duo-half-right .duo-face::after {
  background: linear-gradient(to right, rgb(0 0 0 / 0) 18%, rgb(0 0 0 / 0.1) 38%, rgb(0 0 0 / 0.26) 58%,
    rgb(0 0 0 / 0.42) 80%, rgb(0 0 0 / 0.55));
  opacity: calc(-1 * sin(var(--duo-angle)));
}

.duo-half-right .duo-face-back::after {
  background: linear-gradient(to left, rgb(0 0 0 / 0) 18%, rgb(0 0 0 / 0.1) 38%, rgb(0 0 0 / 0.26) 58%,
    rgb(0 0 0 / 0.42) 80%, rgb(0 0 0 / 0.55));
}

.duo-half-left .duo-face::after {
  background: linear-gradient(to left, rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.08) 35%, rgb(0 0 0 / 0) 65%);
  opacity: var(--duo-shift);
}

/* En DS la mitad de arriba esta echada 22 grados hacia atras: sombra fija. */
.duo-half-top .duo-face::after {
  background: linear-gradient(to top, rgb(0 0 0 / 0) 18%, rgb(0 0 0 / 0.1) 50%, rgb(0 0 0 / 0.3));
  opacity: 0.6;
}

.duo-face-back {
  --duo-corners: var(--duo-radius) var(--duo-hinge-radius) var(--duo-hinge-radius) var(--duo-radius);
  transform: translateZ(calc(-1 * var(--duo-t))) rotateY(180deg);
}

.duo-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: var(--duo-bezel) solid var(--duo-glass);
  border-radius: inherit;
  background: #000;
}

.duo-screen img {
  display: block;
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Del lado de la bisagra no hay canto ni cristal: abierto se lee como una sola
   pantalla. La cara derecha se monta 1 px sobre la izquierda y tapa la costura;
   cerrada queda de espaldas y no asoma (al reves, el cristal de la izquierda
   sobresalia 1 px por la bisagra del movil cerrado). */
.duo-half-left .duo-face-front {
  padding-right: 0;
}

.duo-half-left .duo-screen {
  border-right-width: 0;
}

.duo-half-right .duo-face-front {
  left: -1px;
  padding-left: 0;
}

.duo-half-right .duo-face-front .duo-screen {
  border-left-width: 0;
}

.duo-half-right .duo-face-front .duo-screen img {
  transform: translateX(-50%);
}

.duo-face-back .duo-screen img {
  width: 100%;
}

.duo-ds .duo-half {
  bottom: auto;
  left: 0;
  width: 100%;
  height: 50%;
}

.duo-half-top {
  --duo-corners: var(--duo-radius) var(--duo-radius) var(--duo-hinge-radius) var(--duo-hinge-radius);
  top: 0;
  transform: rotateX(22deg);
  transform-origin: bottom center;
}

.duo-half-bottom {
  --duo-corners: var(--duo-hinge-radius) var(--duo-hinge-radius) var(--duo-radius) var(--duo-radius);
  top: 50%;
}

.duo-half-top .duo-face-front {
  bottom: -1px;
  padding-bottom: 0;
}

.duo-half-top .duo-screen {
  border-bottom-width: 0;
}

.duo-half-bottom .duo-face-front {
  padding-top: 0;
}

.duo-half-bottom .duo-screen {
  border-top-width: 0;
}

.duo-ds .duo-screen img {
  width: 100%;
  height: 200%;
}

.duo-half-bottom .duo-screen img {
  transform: translateY(-50%);
}

.duo-controls {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.duo-ready .duo-controls {
  display: flex;
}

.duo-controls button {
  padding: 9px 18px;
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  background: transparent;
  color: var(--terracotta-dark);
  font: inherit;
  cursor: pointer;
}

.duo-controls button[aria-pressed="true"] {
  border-color: var(--terracotta-dark);
  background: var(--terracotta-dark);
  color: var(--white);
}

.duo-controls button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.duo-hint {
  display: none;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

.duo-ready .duo-hint {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .duo-book,
  .duo-ds {
    transition: none;
  }
}

/* Video de continuidad de la pagina /duo/ (material de la nominacion). */
.duo-video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border-radius: 12px;
  background: #000;
}

.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,
  .press-duo-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,
  .press-duo-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;
  }
}