/* ============================================================
   THE APEHANDS — Main stylesheet
   Palette taken from the brand logo & banner artwork
   ============================================================ */

:root {
  --blue: #2277d9;          /* logo blue */
  --blue-dark: #14275c;     /* navy outline */
  --blue-sky: #8ed7f8;      /* sky */
  --blue-sky-soft: #c9ecfd;
  --yellow: #ffd21e;
  --green: #7ec242;         /* grass */
  --green-dark: #5da22c;
  --pink: #f9868c;          /* newsletter */
  --cream: #e9cf9f;         /* hand skin */
  --red: #e4342c;
  --white: #ffffff;
  --off-white: #fdfaf2;
  --text: #2b3a55;

  --font-display: "Gluten", cursive;
  --font-body: "Poppins", sans-serif;

  --radius: 24px;
  --shadow: 0 10px 30px rgba(20, 39, 92, 0.12);
  --shadow-hover: 0 16px 40px rgba(20, 39, 92, 0.2);
}

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

/* Visually hidden but readable by screen readers / search crawlers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--off-white);
  line-height: 1.6;
  overflow-x: hidden;
}

/* height:auto neutralises the width/height ATTRIBUTES (kept for CLS) so CSS keeps
   controlling the rendered size; class rules with explicit heights still win. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: min(1180px, 92%);
  margin-inline: auto;
}

/* ---------- Typography ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  color: var(--blue-dark);
  line-height: 1.1;
}

.section-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-sky-soft);
  padding: 0.3em 1.1em;
  border-radius: 999px;
  margin-bottom: 0.8rem;
}

.section-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 0.4rem;
}

.section-sub {
  font-size: 1.1rem;
  color: #5a6b8c;
  max-width: 560px;
}

.center { text-align: center; }
.center .section-sub { margin-inline: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  padding: 0.65em 1.9em;
  border-radius: 999px;
  border: 3px solid var(--blue-dark);
  box-shadow: 0 5px 0 var(--blue-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  text-align: center;
}

.btn:hover { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-dark); }

.btn-primary { background: var(--yellow); color: var(--blue-dark); }

.btn-sm {
  align-self: center;
  font-size: 0.85rem;
  padding: 0.5em 1.3em;
  border-width: 2px;
  box-shadow: 0 3px 0 var(--blue-dark);
}

.btn-sm:hover { box-shadow: 0 1px 0 var(--blue-dark); }
.btn-blue    { background: var(--blue); color: var(--white); }
.btn-white   { background: var(--white); color: var(--blue-dark); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 4px solid var(--blue-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 0;
}

.brand img { height: 56px; width: auto; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.main-nav a {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--blue-dark);
  position: relative;
  padding: 0.2em 0;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 4px;
  border-radius: 4px;
  background: var(--yellow);
  transition: right 0.25s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after { right: 0; }

/* "Others" trigger — same look as the plain text nav links (Characters, Activities...) */

.others-btn {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--blue-dark);
  background: none;
  border: none;
  padding: 0.2em 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.others-btn::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 4px;
  border-radius: 4px;
  background: var(--yellow);
  transition: right 0.25s ease;
}

.others-btn:hover::after,
.others-btn[aria-expanded="true"]::after { right: 0; }

.others-btn .nav-caret {
  font-size: 0.7em;
  transition: transform 0.2s ease;
}

.others-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* Language switcher (kept as a bordered pill — a control, not a nav link) */

.lang-item, .others-item { position: relative; }

.lang-btn {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--blue-dark);
  background: var(--white);
  border: 3px solid var(--blue-dark);
  border-radius: 999px;
  padding: 0.25em 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  transition: background 0.15s ease;
}

.lang-btn::after {
  content: "▾";
  font-size: 0.8em;
}

.lang-btn:hover { background: var(--yellow); }

.main-nav ul.lang-menu,
.main-nav ul.others-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 210px;
  background: var(--white);
  border: 3px solid var(--blue-dark);
  border-radius: 18px;
  list-style: none;
  padding: 0.4rem;
  display: none;
  box-shadow: var(--shadow);
  z-index: 300;
}

.main-nav ul.lang-menu.open,
.main-nav ul.others-menu.open { display: block; }

.lang-menu li, .others-menu li {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--blue-dark);
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.lang-menu li { padding: 0.5em 0.9em; }

.others-menu li a {
  display: block;
  padding: 0.5em 0.9em;
  color: inherit;
  border-radius: 12px;
}

.lang-menu li:hover, .others-menu li:hover { background: var(--blue-sky-soft); }
.lang-menu li.active { background: var(--yellow); }

.nav-soon {
  font-size: 0.62rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pink);
  color: var(--white);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  margin-left: 0.4em;
  vertical-align: middle;
}

.header-socials {
  display: flex;
  gap: 0.6rem;
}

.header-socials a,
.footer-socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  border: 3px solid var(--blue-dark);
  transition: transform 0.15s ease, background 0.15s ease;
}

.header-socials a:hover,
.footer-socials a:hover { transform: translateY(-3px) rotate(-6deg); background: var(--yellow); color: var(--blue-dark); }

.header-socials svg,
.footer-socials svg { width: 18px; height: 18px; fill: currentColor; }

.nav-toggle {
  display: none;
  background: var(--yellow);
  border: 3px solid var(--blue-dark);
  border-radius: 12px;
  width: 48px; height: 44px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px; height: 3px;
  border-radius: 3px;
  background: var(--blue-dark);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero (full screen) ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* mobile browsers: exclude the collapsing address bar */
  min-height: 560px;
  background: linear-gradient(180deg, var(--blue-sky) 0%, #aee2fb 100%);
  overflow: hidden;
}

.hero-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 6vw;
  text-align: left;
}

.hero-logo {
  width: min(540px, 44vw);
  filter: drop-shadow(0 12px 24px rgba(20, 39, 92, 0.25));
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  color: var(--blue-dark);
  background: var(--white);
  border: 3px solid var(--blue-dark);
  border-radius: 999px;
  padding: 0.35em 1.4em;
  margin-top: 1.4rem;
  box-shadow: 0 6px 0 rgba(20, 39, 92, 0.25);
}

/* ---------- Transparent header over the hero (home only) ---------- */

.site-header.header-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 4px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.site-header.header-overlay.scrolled {
  background: var(--white);
  border-bottom-color: var(--blue-dark);
}

/* ---------- Cloud cover intro (home only) ---------- */

body.clouds-locked { overflow: hidden; }

.cloud-cover {
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow: hidden;
}

/* Set the instant an inline script detects a logo click brought us here — hides the
   cover before it ever gets a chance to paint, so there is zero flash. */
html.skip-clouds .cloud-cover { display: none; }

.cloud-half {
  position: absolute;
  top: 0;
  height: 100%;
  width: 58%;
  background-color: #ffffff;
  /* soft blue blotches so the cover reads as fluffy clouds, not a flat sheet */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(174, 219, 248, 0.5) 0, transparent 170px),
    radial-gradient(circle at 62% 28%, rgba(174, 219, 248, 0.38) 0, transparent 220px),
    radial-gradient(circle at 30% 48%, rgba(174, 219, 248, 0.45) 0, transparent 190px),
    radial-gradient(circle at 75% 66%, rgba(174, 219, 248, 0.4) 0, transparent 230px),
    radial-gradient(circle at 22% 84%, rgba(174, 219, 248, 0.48) 0, transparent 180px),
    radial-gradient(circle at 68% 94%, rgba(174, 219, 248, 0.36) 0, transparent 200px);
  transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.ch-left { left: -4%; }
.ch-right { right: -4%; }

.cloud-half .puff {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
}

.ch-left .puff { right: 0; transform: translateX(50%); }
.ch-right .puff { left: 0; transform: translateX(-50%); }

.puff:nth-child(1) { width: 300px; height: 300px; top: -6%; }
.puff:nth-child(2) { width: 230px; height: 230px; top: 13%; }
.puff:nth-child(3) { width: 330px; height: 330px; top: 30%; }
.puff:nth-child(4) { width: 250px; height: 250px; top: 53%; }
.puff:nth-child(5) { width: 310px; height: 310px; top: 70%; }
.puff:nth-child(6) { width: 220px; height: 220px; top: 90%; }

.ch-right .puff:nth-child(2) { top: 8%; }
.ch-right .puff:nth-child(4) { top: 47%; }
.ch-right .puff:nth-child(6) { top: 86%; }

.cloud-cover.open .ch-left { transform: translateX(-130%); }
.cloud-cover.open .ch-right { transform: translateX(130%); }

.cloud-hint-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  transition: opacity 0.4s ease;
}

.cloud-hint {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--blue-dark);
  background: var(--yellow);
  border: 4px solid var(--blue-dark);
  border-radius: 999px;
  padding: 0.5em 1.6em;
  box-shadow: 0 6px 0 rgba(20, 39, 92, 0.3);
  width: max-content;
  max-width: 86vw;
  text-align: center;
  transition: opacity 0.4s ease;
}

.cloud-hint-arrow {
  width: 2.4rem;
  height: 2.4rem;
  filter: drop-shadow(0 3px 0 rgba(20, 39, 92, 0.25));
  animation: cloud-hint-bounce 1.1s ease-in-out infinite;
}

@keyframes cloud-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.cloud-cover.open .cloud-hint-wrap { opacity: 0; }
.cloud-hint.swap { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cloud-half { transition: none; }
}

/* Wavy divider between sections */
.wave {
  display: block;
  width: 100%;
  height: 70px;
  margin-bottom: -1px;
}

/* ---------- Sections ---------- */

section { padding: 5rem 0; }

.section-head { margin-bottom: 3rem; }

/* Characters */

.characters { background: var(--off-white); }

.char-grid-wrap {
  width: 100%;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

.char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem;
}

.char-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Info panel continues each character's own picture background — exact colour sampled
   from the photo, plus the real "x" print (cropped from the artwork itself, not redrawn)
   tiled at the same scale as it appears in the image, so the seam disappears. */
.char-card:nth-child(1) .char-info { background-color: #c4e3ff; }
.char-card:nth-child(2) .char-info { background-color: #ffc9ce; }
.char-card:nth-child(3) .char-info { background-color: #e4a691; }
.char-card:nth-child(4) .char-info { background-color: #e4c8a1; }

.char-grid .char-card:hover,
.char-grid .char-card:focus-visible {
  transform: scale(1.06);
  box-shadow: var(--shadow-hover);
  z-index: 5;
}

.char-card .char-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.char-card:hover .char-img { transform: scale(1.06); }

.char-info {
  padding: 1.4rem 1rem 1.7rem;
  text-align: center;
  background-repeat: repeat;
  background-image: url("../Imagenes web/patterns/char-card-x-pattern.png");
  background-size: 25% auto;
}

.char-info h3 {
  font-size: 1.9rem;
  margin: 0.5rem 0 0;
  color: var(--blue-dark);
}

.char-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--white);
  background: var(--blue);
  border-radius: 999px;
  padding: 0.15em 0.9em;
  margin-bottom: 0.5rem;
}

.char-card:nth-child(2) .char-tag { background: var(--pink); }
.char-card:nth-child(3) .char-tag { background: var(--green); }
.char-card:nth-child(4) .char-tag { background: var(--red); }

/* Episodes */

.episodes { background: var(--blue-sky-soft); }

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2rem;
}

.episode-card {
  background: var(--white);
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.episode-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }

.episode-thumb { position: relative; }

.episode-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.episode-badge {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  background: var(--yellow);
  color: var(--blue-dark);
  border: 3px solid var(--blue-dark);
  border-radius: 999px;
  padding: 0.15em 0.9em;
}

.episode-soon {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  background: var(--pink);
  color: var(--white);
  border: 3px solid var(--blue-dark);
  border-radius: 999px;
  padding: 0.15em 0.9em;
}

.episode-body {
  padding: 1.4rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.episode-body h3 { font-size: 1.6rem; }

.episode-body p { color: #5a6b8c; flex: 1; }

/* Activities */

.activities { background: var(--off-white); }

.activities-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.activities-art img {
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
}

.activity-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1.5rem 0 2rem;
}

.activity-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 500;
}

.activity-list .dot {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  border: 3px solid var(--blue-dark);
  border-radius: 50%;
  font-family: var(--font-display);
  color: var(--blue-dark);
}

/* Wallpapers */

.wallpapers { background: var(--green); padding-bottom: 6rem; }

.wallpapers .section-kicker { background: rgba(255, 255, 255, 0.35); color: var(--blue-dark); }
.wallpapers .section-sub { color: #23431a; }

.wall-marquee {
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.wall-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  animation: wall-scroll 42s linear infinite;
}

.wall-marquee:hover .wall-track { animation-play-state: paused; }

@keyframes wall-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 0.75rem)); }
}

.wall-item {
  flex: 0 0 auto;
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
  transition: transform 0.25s ease;
}

.wall-item:hover { transform: translateY(-6px) rotate(1deg); }

.wall-item img {
  display: block;
  width: auto;
  max-width: none;
  height: 300px;
}

@media (max-width: 560px) {
  .wall-item img { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; }
}

/* FAQ */

.faq { background: var(--off-white); }

.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--white);
  border: 3px solid var(--blue-dark);
  border-radius: var(--radius);
  padding: 1.1rem 1.5rem;
}

.faq-item summary {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--blue-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--blue);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p {
  margin-top: 0.8rem;
  color: #5a6b8c;
  line-height: 1.6;
}

/* Newsletter */

.newsletter { background: var(--pink); padding: 7.5rem 0; }

.newsletter-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4.5rem;
  align-items: center;
}

.newsletter-art img {
  display: block;
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: rotate(2deg);
  height: 640px;
  width: auto;
  max-width: 100%;
}

.newsletter h2, .newsletter .section-sub { color: var(--white); }
.newsletter .section-sub { color: #fff3f3; font-size: 1.25rem; max-width: none; }
.newsletter h2.section-title { font-size: clamp(2.6rem, 5.5vw, 4rem); }

.newsletter-form {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}

.newsletter-form input {
  flex: 1 1 260px;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85em 1.4em;
  border-radius: 999px;
  border: 3px solid var(--blue-dark);
  outline: none;
}

.newsletter-form input:focus { border-color: var(--blue); }

.form-note { font-size: 0.8rem; color: #ffe9e9; margin-top: 0.8rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--blue-dark);
  color: #c9d6f2;
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand img { height: 60px; width: auto; margin-bottom: 1rem; }

.footer-brand p { font-size: 0.92rem; max-width: 320px; }

.site-footer h4 {
  font-family: var(--font-display);
  color: var(--yellow);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

.footer-links a,
.footer-link-btn { transition: color 0.15s ease; }
.footer-links a:hover,
.footer-link-btn:hover { color: var(--yellow); }

.footer-link-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.footer-socials { margin-top: 0.4rem; }

.footer-socials a { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.footer-copyright {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-studio-logo { height: 28px; width: auto; margin: 0; }

.footer-madewith { display: inline-flex; align-items: center; gap: 0.35rem; }

.footer-heart { color: var(--blue); }

/* ---------- Contact modal ---------- */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.contact-modal[hidden] { display: none; }

.contact-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 39, 92, 0.55);
}

.contact-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--off-white);
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.2rem 2rem 2rem;
}

.contact-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--blue-dark);
  background: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--blue-dark);
}

.contact-modal__kicker {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.2rem;
}

.contact-modal__title { margin: 0 0 1.2rem; font-size: 1.7rem; }

.contact-form { display: flex; flex-direction: column; gap: 0.9rem; }

.contact-form__label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--blue-dark);
  margin-bottom: -0.4rem;
}

.contact-form__input,
.contact-form__textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75em 1.1em;
  border-radius: 16px;
  border: 3px solid var(--blue-dark);
  outline: none;
  background: var(--white);
  resize: vertical;
}

.contact-form__input:focus,
.contact-form__textarea:focus { border-color: var(--blue); }

.contact-form__submit { align-self: center; margin-top: 0.4rem; }

.contact-form__note {
  min-height: 1.2em;
  font-size: 0.85rem;
  text-align: center;
  margin: 0.4rem 0 0;
  color: var(--blue-dark);
}

.contact-form__note.is-success { color: var(--green-dark); }
.contact-form__note.is-error { color: var(--red); }

.contact-form__honeypot { display: none; }

body.modal-open { overflow: hidden; }

/* ---------- Page hero (subpages) ---------- */

.page-hero {
  background: linear-gradient(180deg, var(--blue-sky) 0%, var(--blue-sky-soft) 100%);
  padding: 4.5rem 0 3.5rem;
  text-align: center;
}

.page-hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); overflow-wrap: break-word; }

.page-hero p { max-width: 620px; margin: 0.6rem auto 0; color: #3c4f78; }

/* ---------- Generic content page (About / Web3 / Collaborations / Metaverse) ---------- */

.info-section { padding: 4.5rem 0; }
.info-section + .info-section { padding-top: 0; }

.info-intro {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
  color: #3c4f78;
  font-size: 1.15rem;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.8rem;
}

.info-card {
  background: var(--white);
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.8rem 1.5rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.info-card .info-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: var(--blue-sky-soft);
  border: 3px solid var(--blue-dark);
  border-radius: 50%;
}

.info-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.info-card p { color: #5a6b8c; font-size: 0.95rem; }

.info-cta {
  margin-top: 3.5rem;
  text-align: center;
  background: var(--blue-sky-soft);
  border: 3px dashed var(--blue-dark);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
}

.info-cta h2 { font-size: 1.8rem; margin-bottom: 0.5rem; }
.info-cta p { color: #3c4f78; margin-bottom: 1.4rem; }

/* ---------- About page: Handerson family story ---------- */

.about-story { padding: 1rem 0 2rem; }

.about-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  margin-top: 3.5rem;
}

.about-story__art img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.about-story__copy h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 0.3rem; }

.about-story__lead {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--blue);
  margin-bottom: 1.3rem;
}

.about-story__copy p { color: #3c4f78; margin-bottom: 1rem; line-height: 1.65; }

.about-story__welcome {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--blue-dark) !important;
  margin-top: 1.6rem !important;
}

/* ---------- Web3 page: NFT collection story + carousel ---------- */

.web3-holders {
  margin-top: 1.1rem !important;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--blue-sky-soft);
  font-size: 0.95rem !important;
}

.web3-holders strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--blue);
  margin-right: 0.3rem;
}

.web3-story { padding: 1rem 0 2rem; }

.web3-story__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3.5rem;
  align-items: stretch;
  margin-top: 1rem;
}

.web3-story__art { display: flex; }

.nft-carousel {
  position: relative;
  width: 100%;
  min-height: 320px;
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--blue-sky-soft);
}

.nft-carousel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.nft-carousel__img.is-active { opacity: 1; }

.web3-story__copy h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 0.3rem; }

.web3-story__lead {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--blue);
  margin-bottom: 1.3rem;
}

.web3-story__copy p { color: #3c4f78; margin-bottom: 1rem; line-height: 1.65; }

.web3-story__closing {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--blue-dark) !important;
  margin-top: 1.6rem !important;
}

.info-coming-soon {
  text-align: center;
  background: var(--blue-sky-soft);
  border: 3px dashed var(--blue-dark);
  border-radius: var(--radius);
  padding: 4rem 1.5rem;
  max-width: 640px;
  margin: 0 auto;
}

.info-coming-soon__icon { font-size: 3rem; margin-bottom: 1rem; }
.info-coming-soon h2 { font-size: 1.8rem; margin-bottom: 0.6rem; }
.info-coming-soon p { color: #3c4f78; font-size: 1.05rem; }

/* Placeholder marker — remove this whole rule once the MVP copy has been replaced */
.info-placeholder-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  background: #ffe3e0;
  border-radius: 6px;
  padding: 0.2em 0.6em;
  margin-bottom: 1rem;
}

/* Character detail rows (characters.html) */

.char-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
  border-bottom: 3px dashed rgba(20, 39, 92, 0.15);
}

.char-row:last-child { border-bottom: none; }

.char-row.reverse { direction: rtl; }
.char-row.reverse > * { direction: ltr; }

.char-row img {
  width: 100%;
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--blue-sky-soft);
}

.char-row h2 { font-size: 2.2rem; margin-bottom: 0.6rem; }

.char-row p { color: #5a6b8c; margin-bottom: 1rem; }

/* Wallpaper category tabs */

.wp-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.wp-tab {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--blue-dark);
  background: var(--white);
  border: 3px solid var(--blue-dark);
  border-radius: 999px;
  padding: 0.5em 1.6em;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.wp-tab:hover { transform: translateY(-2px); }

.wp-tab.active {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 5px 0 var(--blue-dark);
}

/* .download-card's own `display: flex` would otherwise beat the [hidden] default */
.download-card[hidden] { display: none; }

.wp-empty {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--blue-dark);
  background: var(--blue-sky-soft);
  border: 3px dashed var(--blue-dark);
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
  margin-bottom: 2rem;
}

/* Download cards (activities / wallpapers pages) */

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.8rem;
}

.download-card {
  background: var(--white);
  border: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.download-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.download-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--blue-sky-soft);
}

/* Activities page: colouring sheets are shown WHOLE (they all share the same
   1055×1491 portrait ratio), never cropped. */
.printables .download-card img {
  aspect-ratio: 1055 / 1491;
  object-fit: contain;
  background: var(--white);
}

/* Wallpapers page: each wallpaper keeps its own natural ratio, shown WHOLE — no crop. */
#wpGrid .download-card img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--white);
}

.download-card .dl-body {
  padding: 1.1rem 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
  flex: 1;
  justify-content: space-between;
}

.download-card h3 { font-size: 1.15rem; }

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-logo { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .activities-inner,
  .newsletter-inner,
  .about-story__grid,
  .web3-story__grid { grid-template-columns: 1fr; }

  .web3-story__grid { align-items: stretch; }
  .nft-carousel { aspect-ratio: 1 / 1; min-height: 0; }

  .newsletter-art { max-width: 320px; margin-inline: auto; }
  .newsletter-art img { height: 420px; }

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

  .char-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .char-row img { max-width: 340px; margin-inline: auto; }

  .char-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nav collapses to the hamburger menu starting at 1024px — below that width the
   full nav + language switcher + social icons no longer fit the header and
   overflow (cut-off social icons on the overlay header, a horizontal
   scrollbar everywhere else). */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }

  .header-socials { display: none; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    border-bottom: 4px solid var(--blue-dark);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  /* Tall enough for the nav links plus the unfolded language list; scrolls if needed */
  .main-nav.open {
    max-height: calc(100vh - 80px);
    max-height: calc(100svh - 80px);
    overflow-y: auto;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.6rem 1.4rem 1.2rem;
  }

  .main-nav li { width: 100%; }

  .main-nav a { display: block; padding: 0.7em 0; font-size: 1.3rem; }

  .others-btn { display: flex; width: 100%; padding: 0.7em 0; font-size: 1.3rem; }

  .others-item { margin-top: 0; }
  .lang-item { margin-top: 0.6rem; }

  .main-nav ul.lang-menu,
  .main-nav ul.others-menu {
    position: static;
    box-shadow: none;
    margin-top: 0.5rem;
    min-width: 0;
  }
}

@media (max-width: 820px) {
  section { padding: 3.5rem 0; }

  .newsletter { padding: 4rem 0; }

  /* Hero: centre the logo + tagline and let them breathe on small screens */
  .hero { min-height: 480px; }

  .hero-content {
    align-items: center;
    justify-content: flex-start;
    padding: 96px 1.2rem 0;
    text-align: center;
  }

  .hero-logo { width: min(400px, 80vw); }

 .hero-banner {
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}

  /* Character detail rows: centre the text under the stacked image */
  .char-row { text-align: center; }
  .char-row h2 { font-size: 1.9rem; }

  .newsletter h2.section-title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .newsletter .section-sub { font-size: 1.05rem; }
}

/* Above mobile (≥821px): the hero text block is vertically centred by
   default, which on some viewport shapes can land right on top of a
   character on the hill — the exact width where that happens shifts with
   every possible window size, so rather than chase it with an upper cutoff,
   nudge it toward the top at every width from here up. This still reads
   fine at large desktop sizes (checked), not just "technically clear". */
@media (min-width: 821px) {
  .hero-content {
    justify-content: flex-start;
    padding-top: 16vh;
  }
}

@media (max-width: 560px) {
  .brand img { height: 44px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { justify-content: center; text-align: center; }

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

  .container { width: 92%; }

  /* Cloud intro: smaller puffs so the fluffy seam fits phone screens */
  .puff:nth-child(1) { width: 180px; height: 180px; }
  .puff:nth-child(2) { width: 140px; height: 140px; }
  .puff:nth-child(3) { width: 200px; height: 200px; }
  .puff:nth-child(4) { width: 150px; height: 150px; }
  .puff:nth-child(5) { width: 190px; height: 190px; }
  .puff:nth-child(6) { width: 130px; height: 130px; }

  .section-kicker { font-size: 0.9rem; }

  /* Episode cards: tighter body on phones */
  .episode-body { padding: 1.1rem 1.1rem 1.4rem; }
  .episode-body h3 { font-size: 1.35rem; }

  /* Newsletter image scales with the screen */
  .newsletter-art { max-width: none; }
  .newsletter-art img { height: auto; width: min(300px, 78vw); margin-inline: auto; }

  .newsletter-form { margin-top: 1.2rem; }
  .newsletter-form .btn { width: 100%; }

  /* Download cards fill the width one per row */
  .download-grid { grid-template-columns: 1fr; }

  .page-hero { padding: 3.2rem 0 2.6rem; }
}