/* Pisica Pix, prototip de Home (20.10.2026)
   Tokenii vin din desenele Ralucăi (SVG-urile exportate din copertă), nu sunt inventați.
   Regula de bază: portocaliul lui Pix e doar pentru Pix și acțiunea principală. */

:root {
  /* culori, cu rolurile din docs/Design_System_Notes.md */
  --galben: #FBDD09;        /* coperta */
  --hartie: #FDFDF9;        /* valul alb de pe copertă, fundalul paginilor */
  --alb: #FFFFFF;
  --pix: #D25A2F;           /* ancora: Pix și acțiunea principală */
  --pix-adanc: #B4461F;
  --indigo: #2C2950;        /* structură: conturul bulelor, text pe galben */
  --indigo-2: #473B66;      /* accentele lui Pix: ochelari, coadă */
  --text: #222221;
  --text-2: #4A4858;
  --roz: #F15B7E;           /* titlurile din carte */
  --mov: #725FA4;
  --albastru: #536CA6;
  --mov-2: #945FA1;
  --verde-harta: #D6E0CE;
  --cer: #C9DFF3;
  --cer-pal: color-mix(in srgb, var(--cer) 45%, var(--alb));   /* fundalul secțiunii Orașul și valul de deasupra ei */
  --coral: #E86A4B;         /* contururile punctate „aici faci ceva” */

  /* tipografie: fonturile reale primele, înlocuitorii după */
  /* Corsair PE vine din Adobe Fonts (kit yjq7yeo) cu numele „corsairpe”; „Corsair PE” e numele local, pentru calculatoarele cu Creative Cloud.
     FF Tisa Sans vine din același kit ca „ff-tisa-sans-web-pro” (400, 700, italice), Collector Comic ca „collector-comic” (400, 700, italice). Fonturile cărții, toate trei, din 23.10.2026. */
  --f-display: "corsairpe", "Corsair PE", "Arial Narrow", sans-serif;
  --w-display: 400;   /* Corsair PE are o singură greutate; bold sintetizat îl strică */
  --f-body: "ff-tisa-sans-web-pro", "Tisa Sans Pro", system-ui, sans-serif;  /* ABeeZee nu are ă, ș, ț */
  --f-bubble: "collector-comic", "Collector Comic", "Comic Sans MS", cursive;   /* bulele sunt mereu cu majuscule (regulă, Ina 22.10) */

  --r: 18px;
  --umbra: 4px 4px 0 var(--indigo);
  --bar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
/* nimic nu iese în lateral: pe iOS, overflow-x pe body singur nu oprește glisarea, trebuie și pe html;
   clip (nu hidden) ca să nu se strice sticky-ul cărții */
html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); overflow-x: hidden; overflow-x: clip; background: var(--hartie); }   /* galbenul din <head> ține doar până vine foaia asta */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--hartie);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
/* regulă (Ina, 26.10): fără cuvinte orfane pe ultimul rând; browserul mută un cuvânt în plus pe rândul de jos */
p, li, dd, figcaption, summary, h1, h2, h3, blockquote { text-wrap: pretty; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* text doar pentru cititoare de ecran și motoare de căutare (titlul complet al cărții în H2) */
.nobr { white-space: nowrap; }   /* ISBN-urile nu se rup pe două rânduri; tot cu .nobr stau împreună propozițiile scurte de final (Ina, 27.10: nu „Ca | niște detectivi.”, ci toată propoziția pe rândul de jos) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--alb); padding: .5rem 1rem; border: 2px solid var(--indigo); border-radius: 999px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }

.h2 {
  font: var(--w-display) clamp(2.4rem, 6vw, 4rem)/1 var(--f-display);
  letter-spacing: .01em;
  color: var(--roz);
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.h3 {
  font: var(--w-display) clamp(1.6rem, 3.4vw, 2.2rem)/1.05 var(--f-display);
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 .75rem;
}

/* butoane */
.btn[hidden] { display: none; }   /* butoanele ascunse rămân ascunse (ex.: harta pe 404, până la lansare) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.4rem;
  border-radius: 999px; border: 2px solid var(--indigo);
  font: 400 1.2rem/1 var(--f-bubble); text-transform: uppercase; letter-spacing: .03em;   /* probă (Ina, 23.10): textul butoanelor în Collector Comic, majuscule, fără bold */
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--pix { background: var(--indigo-2); color: var(--alb); box-shadow: var(--umbra); }   /* culoarea urechilor lui Pix (Ina, 23.10); portocaliul rămâne doar pentru Pix */
.btn--pix:hover { background: var(--indigo); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--indigo); }
.btn--pix:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--indigo); }
.btn--quiet { background: transparent; color: var(--indigo); min-height: 40px; padding: .45rem 1rem; font-size: .95rem; }
.btn--quiet:hover { background: var(--indigo); color: var(--alb); }

/* bula de dialog, ca în carte */
.bubble {
  position: relative;
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .55rem 1rem .5rem;
  background: #FCFCF8;
  border: 2px solid var(--indigo);
  border-radius: 26px / 22px;
  font: 400 1.2rem/1.15 var(--f-bubble);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text);
}
.bubble::after {
  content: ""; position: absolute; left: 22px; bottom: -9px;
  width: 14px; height: 14px; background: #FCFCF8;
  border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo);
  transform: skewX(-18deg) rotate(45deg);
}

/* bara de sus */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--bar-h);
  display: flex; align-items: center; gap: 1rem; padding: 0 1rem;
  background: color-mix(in srgb, var(--hartie) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--indigo) 12%, transparent);
}
.bar__brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; font: var(--w-display) 1.5rem/1 var(--f-display); color: var(--indigo); letter-spacing: .02em; }
/* logo: titlul din carte; la hover, punctele de pe cei trei „i” sar pe rând (ca literele de la essntl.ai) */
.bar__logo { display: block; height: 26px; width: auto; fill: var(--indigo); overflow: visible; }
.logo-i { transform-box: fill-box; transform-origin: 50% 100%; }
.bar__brand:hover .logo-i, .bar__brand:focus-visible .logo-i { animation: punct-sare .55s cubic-bezier(.3, 0, .4, 1) both; }
.bar__brand:hover .logo-i:nth-of-type(2), .bar__brand:focus-visible .logo-i:nth-of-type(2) { animation-delay: .09s; }
.bar__brand:hover .logo-i:nth-of-type(3), .bar__brand:focus-visible .logo-i:nth-of-type(3) { animation-delay: .18s; }
@keyframes punct-sare {
  0% { transform: none; }
  35% { transform: translateY(-150%) scale(.9, 1.1); }
  62% { transform: translateY(10%) scale(1.2, .8); }
  80% { transform: translateY(-35%); }
  100% { transform: none; }
}
.bar__nav { display: flex; gap: 1.25rem; margin-left: auto; }
.bar__nav a { text-decoration: none; color: var(--text-2); font-size: .95rem; }
.bar__nav a:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: 4px; }
/* limba (Ina, 27.10): în bară, steagul limbii curente cu o săgeată, fără text; la clic, cealaltă limbă. Stă în afara meniului, ca să se vadă și pe telefon */
.lang { position: relative; flex: none; }
.lang summary { display: flex; align-items: center; gap: .3rem; padding: .35rem .15rem; cursor: pointer; list-style: none; border-radius: 6px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.lang__flag { display: block; width: 20px; height: 13px; border-radius: 3px; overflow: hidden; }   /* steaguri minimale, fără contur (Ina, 27.10) */
.lang__arr { display: block; width: 9px; height: 6px; fill: none; stroke: var(--indigo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.lang[open] .lang__arr { transform: rotate(180deg); }
.lang__menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 25; padding: .35rem; background: var(--alb); border: 1.5px solid var(--indigo); border-radius: 10px; box-shadow: var(--umbra); }
.lang__menu a { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: 6px; text-decoration: none; color: var(--indigo); font-size: .95rem; white-space: nowrap; }
.lang__menu a:hover { background: var(--cer-pal); }
@media (max-width: 420px) {   /* pe telefon, cu steagul în bară: butonul și golurile se strâng, ca să încapă și cele trei linii */
  .bar:has(.lang) { gap: .4rem; }
  .bar:has(.lang) .btn--quiet { font-size: .8rem; padding: .4rem .65rem; }
}
/* pe telefon și tabletă: cele trei linii deschid meniul, care cade sub bară; de la 860 px în sus încap toate patru (meniul cu Despre carte, Evenimente, Comandă, Despre noi, 26.10) */
.bar__meniu { display: none; }
.bar__nav a { white-space: nowrap; }
@media (max-width: 860px) {
  .bar { gap: .5rem; padding: 0 .75rem; }
  .bar .btn--quiet { margin-left: auto; white-space: nowrap; padding: .45rem .8rem; font-size: .9rem; }
  .bar__meniu { display: block; flex: none; width: 40px; height: 40px; margin-right: -.4rem; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
  .bar__meniu span, .bar__meniu::before, .bar__meniu::after { content: ""; position: absolute; left: 9px; width: 22px; height: 2px; border-radius: 2px; background: var(--indigo); transition: transform .25s ease, opacity .2s ease; }
  .bar__meniu::before { top: 12px; } .bar__meniu span { top: 19px; } .bar__meniu::after { top: 26px; }
  .bar__meniu[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
  .bar__meniu[aria-expanded="true"] span { opacity: 0; }
  .bar__meniu[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }
  .bar__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: .5rem 1rem 1rem; flex-direction: column; gap: 0;
    background: var(--hartie); border-bottom: 1px solid color-mix(in srgb, var(--indigo) 12%, transparent); box-shadow: 0 12px 24px rgba(44, 41, 80, .08); }
  .bar.is-open .bar__nav { display: flex; }
  .bar__nav a { padding: .8rem 0; font: var(--w-display) 1.15rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--indigo); border-top: 1px solid color-mix(in srgb, var(--indigo) 10%, transparent); }
  .bar__nav a:first-child { border-top: 0; }
}

/* 1. HERO */
.hero {
  position: relative; overflow: hidden;
  background: var(--galben);
  padding: calc(var(--bar-h) + 2rem) 0 0;
}
.hero__inner {
  position: relative; z-index: 2; padding-top: 1.5rem;
  width: min(1180px, 100% - 2rem); margin-inline: auto;
  display: grid; gap: 1rem; align-items: center;
}
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.15fr 1fr; min-height: calc(100vh - var(--bar-h) - 4rem); padding-bottom: 6rem; } }
/* hero-ul începe cu câștigul, nu cu titlul cărții (titlul complet e în secțiunea Cartea) */
.hero__kicker { margin: 0 0 .8rem; font: 400 clamp(1.05rem, 1.7vw, 1.25rem)/1 var(--f-bubble); text-transform: uppercase; letter-spacing: .04em; color: var(--indigo); }   /* Collector Comic, ca titlul de sub el, mai mic: ierarhia de pe copertă, PISICA PIX / ÎN VIZITĂ LA (Ina, 27.10); între 23.10 și 27.10 a fost Tisa Sans */
/* „Carte de activități” apare cu un fade-in scurt, puțin după titlu, ca să fie observat (Ina, 27.10); fără mișcare la prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .hero__kicker { animation: kicker-in .9s ease-out .35s both; }
}
@keyframes kicker-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero__title { max-width: 18ch; margin: 0; font: 400 clamp(2.6rem, 4.8vw, 3.8rem)/1.15 var(--f-bubble); text-transform: uppercase; letter-spacing: .01em; color: var(--text); }   /* Collector Comic, 400 (probă, Ina 23.10); două rânduri, „Ghidul orașului” întreg pe primul, rând 1.15 (Ina, 24.10) */
.hero__title .nowrap { white-space: nowrap; }
.hero__lead { max-width: 30rem; margin: 1.5rem 0 1.5rem; font-size: 1.0625rem; line-height: 1.45; color: var(--indigo); }   /* 17px, rând 1.45 (probă, Ina 23.10) */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.link-down { color: var(--indigo); font-weight: 400; text-underline-offset: 5px; }   /* fără bold (probă, Ina 23.10) */
.link-down::after { content: " ↓"; }
.link-lansare { color: var(--indigo); font-weight: 400; text-underline-offset: 5px; }   /* pe EN, lansarea (în română) e linkul de lângă butonul principal (Ina, 27.10) */
.hero .btn--pix, .btn--portocaliu { font-size: .875rem; background: #C8481E; }   /* 14px, portocaliu ales din paletă (probă, Ina 23.10); doar în hero până la preluare */
.hero__pret { margin: .9rem 0 0; font: 400 1.05rem/1.2 var(--f-bubble); text-transform: uppercase; letter-spacing: .02em; color: var(--indigo); }
.hero__lansare { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }   /* „Te invităm la lansare”, la nivelul butonului (Ina, 26.10) */
.hero__note { font-size: .9rem; color: var(--indigo); }   /* data lansării sub buton (Ina, 27.10) */
/* compoziția de pe copertă, din măsurătorile desenelor: săgeata cât Pix de lată, stâlpul (la 36,5% din lățimea semnului)
   cade la 40% din lățimea lui Pix, adică pe lângă urechea stângă, și se termină în spatele hărții */
.hero__art { position: relative; aspect-ratio: 1 / 1.43; width: min(480px, 100%); justify-self: center; }
.hero__sign { position: absolute; width: 95%; left: 5.3%; top: 0; }
.hero__pix { position: absolute; width: 100%; left: 0; bottom: 0; }
.hero__pix img, .hero__pix svg { display: block; width: 100%; height: auto; transform-origin: 50% 92%; }
.pix-pupila, .pix-spranceana { transition: transform .18s ease-out; }
.pix-corp { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s ease-out; }

.hero__cloud, .hero__bird { position: absolute; z-index: 1; pointer-events: none; }
.hero__cloud--a { width: 44vw; max-width: 600px; right: -8vw; top: 22%; opacity: .9; }   /* nor_03_lung în ocru, întreg (26.10): nor_01_mare era tăiat drept pe stânga */
.hero__cloud--b { width: 30vw; max-width: 380px; left: -4vw; top: 62%; opacity: .9; }
/* norii plutesc foarte încet, cel din dreapta spre stânga, cel din stânga spre dreapta, și se întorc (Ina, 26.10) */
@media (prefers-reduced-motion: no-preference) {
  .hero__cloud--a { animation: nor-spre-stanga 40s ease-in-out infinite alternate; }
  .hero__cloud--b { animation: nor-spre-dreapta 46s ease-in-out infinite alternate; }
}
@keyframes nor-spre-stanga  { from { transform: none; } to { transform: translateX(-7vw); } }
@keyframes nor-spre-dreapta { from { transform: none; } to { transform: translateX(6vw); } }
.hero__bird--a { width: 64px; left: 46%; top: 16%; }
.hero__bird--b { width: 56px; right: 7%; top: 30%; }
.hero__bird--c { width: 48px; left: 40%; top: 66%; }
@media (max-width: 899px) {
  .hero__bird--a { left: 74%; top: 7%; width: 48px; }
  .hero__bird--b { right: 4%; top: 46%; width: 40px; }
  .hero__bird--c, .hero__cloud--b { display: none; }
  /* pe telefon (Ina, 24.10): titlul centrat, apoi Pix, apoi descrierea, apoi butonul; în primul ecran doar titlul și Pix */
  .hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__text { display: contents; }
  .hero__kicker { order: 0; text-align: center; }
  .hero__title { order: 1; max-width: none; text-align: center; font-size: 9vw; line-height: 1.2; }   /* 9vw: „Ghidul orașului” încape pe un rând la orice lățime de telefon (Ina, 24.10) */
  .hero__art { order: 2; width: min(380px, 88%); margin: 1.25rem auto 0; }
  .hero__lead { order: 3; max-width: 32rem; margin: 1.75rem auto 0; text-align: center; text-wrap: pretty; }   /* centrat pe telefon, la stânga pe desktop (Ina, 25.10) */
  .hero__actions { order: 4; justify-content: center; margin: 1.5rem 0 4.5rem; }   /* aer sub buton, iar valul (margin-top -2rem) nu intră peste el (Ina, 25.10) */
  .hero__actions { flex-direction: column; align-items: center; gap: 1rem; }
  .hero__lansare { align-items: center; }   /* pe telefon, butonul de lansare cu data sub el, apoi linkul (Ina, 27.10) */
}
}
.ancora { display: block; height: 0; scroll-margin-top: calc(var(--bar-h) + 1rem); }
.hero__wave { position: relative; z-index: 3; width: calc(100% + 6px); max-width: none; height: auto; margin: -2rem -3px -3px; }

/* 2. HARTA: fundal pe toată lățimea, banda albă de sub hero se estompează peste ea;
   textul stă într-un card simplu; Pix face câțiva pași pe o stradă (home.js) */
.mapscroll { position: relative; overflow: hidden; background: var(--hartie); min-height: min(100vh, 860px); display: grid; align-items: center; }
.mapscroll__layer { position: absolute; left: 50%; top: 50%; width: max(100%, calc(min(100vh, 860px) * 1.32)); aspect-ratio: 858.9 / 680.3; transform: translate(-50%, -50%); will-change: transform; }
/* fundal discret: harta din carte estompată; la scroll se îndepărtează încet (zoom + derivă, home.js) */
.mapscroll__map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; filter: saturate(.8); }
.mapscroll__pix { position: absolute; width: 5.2%; transform: translate(-50%, -94%); pointer-events: none; }
.mapscroll__pix.is-left { transform: translate(-50%, -94%) scaleX(-1); }
.mapscroll__fade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 62% at 24% 50%, var(--hartie) 0%, color-mix(in srgb, var(--hartie) 85%, transparent) 45%, transparent 75%),
    linear-gradient(180deg, var(--hartie) 0%, transparent 18%, transparent 82%, var(--hartie) 100%); }
.mapscroll__inner { position: relative; z-index: 2; padding: 6rem 0; }
.mapscroll__card { max-width: 26rem; }
.mapscroll__card .h2 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
.mapscroll__card p { color: var(--text-2); margin: 0 0 1.5rem; }
@media (max-width: 760px) {
  .mapscroll { display: block; min-height: 0; padding-top: 3rem; }
  .mapscroll__inner { padding: 0 0 1.5rem; }
  .mapscroll__layer { position: relative; left: auto; top: auto; width: 170%; margin-left: -55%; transform: none; }
  .mapscroll__pix { width: 8%; }
}

/* 3. CARTEA */
.book { background: var(--hartie); padding: 5rem 0 4rem; overflow-x: clip; }   /* albul copertei, același ca valul de deasupra (Ina, 22.10); norii intră din lateral */
/* titlul complet, ca pe copertă: PISICA PIX, dedesubt ÎN VIZITĂ LA și săgeata BUCUREȘTI, alături bula cu subtitlul */
.book__kicker { margin: 0 0 1rem; font: 400 1.05rem/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); text-align: center; }
/* titlul centrat, pe trei rânduri: PISICA PIX / ÎN VIZITĂ LA / săgeata BUCUREȘTI, apoi subtitlul ca text simplu */
.book__head { width: fit-content; max-width: 100%; margin: 0 auto; }
.book__title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.book__title-pix { display: block; width: min(520px, calc(100vw - 2.5rem)); height: auto; fill: #000; overflow: visible; }
/* punctele de pe „i” sar ca la logo: o dată când titlul intră în ecran, apoi la hover (clasa o pune home.js) */
.book__title-pix.is-jump .logo-i { animation: punct-sare .55s cubic-bezier(.3, 0, .4, 1) both; }
.book__title-pix.is-jump .logo-i:nth-of-type(2) { animation-delay: .09s; }
.book__title-pix.is-jump .logo-i:nth-of-type(3) { animation-delay: .18s; }
.book__title-in { width: min(260px, 60vw); }
/* titlul ca text (Ina, 26.10): același font și aceeași mărime ca titlul din hero */
.book__title--text { display: block; max-width: 16ch; margin: 0 auto; text-align: center; font: 400 clamp(2.6rem, 4.8vw, 3.8rem)/1.15 var(--f-bubble); text-transform: uppercase; letter-spacing: .01em; color: var(--text); text-wrap: balance; }
.book__title--text .nowrap { white-space: nowrap; }
@media (max-width: 899px) { .book__title--text { font-size: 9vw; line-height: 1.2; } }   /* ca titlul din hero pe telefon */
.book__title--text + .book__sub { margin-top: 1.25rem; }
.book__title-buc { width: min(300px, 70vw); }
.book__sub { margin: 2.75rem 0 0; font: 400 clamp(1.05rem, 2vw, 1.2rem)/1.3 var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--indigo); text-align: center; }   /* fontul de paragraf, cu majuscule (Ina, 26.10) */
.book__fisa { margin: 1rem 0 0; font: 400 1.05rem/1.4 var(--f-bubble); text-transform: uppercase; letter-spacing: .02em; color: var(--indigo); text-align: center; text-wrap: balance; }   /* fișa: preț · vârstă · De unde o cumperi (Ina, 24.10) */
.book__fisa .link-down { text-transform: none; font: 400 1rem/1.4 var(--f-body); letter-spacing: 0; }
.book__lead { max-width: 40rem; font-size: 1.15rem; color: var(--text-2); margin: 2.5rem auto; text-align: center; }
/* rânduri alternante: nor mare într-o parte, textul în cealaltă; norii plutesc puțin la scroll (home.js) */
.book__kicker--list { margin-top: clamp(9rem, 20vw, 14rem); }   /* spațiu dublu înainte de nori (Ina, 21.10) */
/* regula titlurilor (feedback Tudor, Ina 27.10): roz pentru secțiunile despre carte și „de ce”, navy pentru acțiune (lansare, Anunță-mă);
   Collector Comic doar pentru titlul hero-ului și al cărții, Corsair pentru toate titlurile de secțiune */
.book__h2 { margin: clamp(9rem, 20vw, 14rem) 0 1.5rem; text-align: center; color: var(--indigo-2); }   /* indigo-ul ochelarilor, celelalte titluri de secțiune rămân roz (Ina, 27.10); „Ce e în carte” ca titlu de secțiune, albastrul primului nor (probă, Ina 26.10): același font și aceeași mărime ca toate titlurile de după hero */
@media (min-width: 900px) {
  .book__fisa { display: none; }                       /* pe desktop fără „De unde o cumperi?” sub titlu (Ina, 25.10) */
  .book__kicker--list { margin-top: 6rem; }
  .book__h2 { margin-top: 10rem; }   /* aer cât deasupra titlului cărții, ca „Ce e în carte” să vină după ce ai citit descrierea (Ina, 26.10) */            /* și mai puțin aer până la „Ce e în carte” */
}
/* lista și datele stau pe aceeași coloană ca descrierea (40rem), ca secțiunea să nu se lățească treptat (Ina, 21.10) */
.book__list { list-style: none; padding: 0; width: min(40rem, 100%); margin: 2.5rem auto clamp(4rem, 9vw, 6rem); display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.book__list li { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; }
.book__list li > p { order: 1; justify-self: end; }
.book__list li > .book__nor { order: 2; justify-self: start; }
.book__list li:nth-child(even) > p { order: 2; justify-self: start; }
.book__list li:nth-child(even) > .book__nor { order: 1; justify-self: end; }
/* norul: forma din exportul Ralucăi (symbol #nor-a / #nor-m), colorat din CSS, titlul alb pe el ca pe copertă */
.book__nor { position: relative; width: 100%; will-change: transform, opacity; }
.book__nor svg { display: block; width: 100%; height: auto; }
.book__nor--oglinda svg { transform: scaleX(-1); }
.book__nor--albastru svg { fill: var(--albastru); } .book__nor--mov svg { fill: var(--mov); } .book__nor--mov2 svg { fill: var(--mov-2); } .book__nor--indigo svg { fill: var(--indigo-2); } .book__nor--roz svg { fill: var(--roz); }
.book__nor h3 { position: absolute; inset: 0; margin: 0; padding: 20% 20% 9%; display: flex; align-items: center; justify-content: center; text-align: center; font: var(--w-display) clamp(.95rem, 1.9vw, 1.2rem)/1 var(--f-display); text-transform: uppercase; color: var(--alb); text-wrap: balance; }   /* norii sunt lați și joși, textul stă în bulbul din mijloc */
/* textul desenat în nor, în SVG (Ina, 25.10): pe două rânduri unde e lung; mărimea e în unitățile norului, deci crește cu el; norii oglindiți întorc doar <use>, nu și textul */
.book__nor-text { font: var(--w-display) 10.5px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; fill: var(--alb); text-anchor: middle; }
.book__nor svg[viewBox^="0 0 165"] .book__nor-text { font-size: 11.2px; }   /* norul lat are viewBox mai mare (165,7 față de 155,2): 10,5 × 165,7 / 155,2, ca textul să iasă la fel de mare pe toți norii (Ina, 25.10) */
.book__list p { margin: 0; color: var(--text-2); font-size: 1.02rem; }
.book__list p strong { color: var(--indigo-2); }   /* primul cuvânt, ca un titlu, în indigo-ul ochelarilor (Ina, 27.10) */
@media (max-width: 639px) {
  .book__list li { grid-template-columns: 1fr; gap: .75rem; }
  .book__list li > .book__nor, .book__list li:nth-child(even) > .book__nor { order: 1; width: 78%; justify-self: center; }
  .book__list li > p, .book__list li:nth-child(even) > p { order: 2; justify-self: center; text-align: center; }
  .book__nor h3 { font-size: 1.1rem; }
}
.book__facts { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); width: min(40rem, 100%); margin: 0 auto; padding: 1.25rem 0 0; border-top: 2px dashed color-mix(in srgb, var(--indigo) 25%, transparent); }
.book__facts dt { font: var(--w-display) 1rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: .3rem; }
.book__facts dd { margin: 0; }.book__facts small { display: block; margin-top: .3rem; font-size: .9rem; line-height: 1.45; color: var(--text-2); max-width: 22rem; }

/* răsfoirea la atingere */
.rasfoire { position: relative; width: min(100% - 4.5rem, 880px); margin: clamp(3rem, 8vw, 5rem) auto 0; }   /* margini de 1,5x, cartea nițel mai mare (Ina, 24.10); săgețile stau în aerul ăsta */
.rasfoire__carte { width: 100%; }
.pagina { background: var(--alb); overflow: hidden; border: 1px solid rgba(44, 41, 80, .12); }
.pagina img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pagina--hard { box-shadow: 0 10px 24px rgba(44, 41, 80, .14); }
/* până compune page-flip cartea, paginile nu se arată crude, mari, una sub alta: stă un loader de mărimea spread-ului (Ina, 27.10); stf__parent îl pune page-flip */
.rasfoire__carte:not(.stf__parent) { position: relative; aspect-ratio: 1200 / 920; max-height: 660px; }
.rasfoire__carte:not(.stf__parent) > .pagina { display: none; }
.rasfoire__carte:not(.stf__parent)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--indigo) 15%, transparent); border-top-color: var(--indigo-2); animation: rasfoire-loader .9s linear infinite; }
@keyframes rasfoire-loader { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rasfoire__carte:not(.stf__parent)::after { animation: none; } }
/* pe desktop cu mouse merge cartea 3D, răsfoirea nu apare deloc, nici cât se încarcă JS-ul (aceeași regulă ca în home.js) */
@media (pointer: fine) and (min-width: 900px) { .js .rasfoire { display: none; } }
/* săgeți discrete, trase de mână, în stânga și în dreapta cărții */
.rasfoire__btn { position: absolute; top: 50%; width: 30px; height: 48px; margin-top: -24px; padding: 12px 8px; border: 0; background: none; cursor: pointer; opacity: .45; transition: opacity .2s; }
.rasfoire__btn--prev { right: calc(100% + .6rem); } .rasfoire__btn--next { left: calc(100% + .6rem); }
.rasfoire__btn svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--indigo); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rasfoire__btn:hover, .rasfoire__btn:active { opacity: .8; }
.rasfoire__btn:disabled { opacity: .15; cursor: default; }
/* pe telefon (prototip, Ina 27.10): săgețile nu mai stau în aerul de lângă carte, ci sub ea, două butoane rotunde portocalii; cartea câștigă lățimea */
@media (max-width: 639px) {
  .rasfoire { width: min(100% - 2rem, 880px); display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.25rem; }
  .rasfoire__carte { flex: 0 0 100%; }
  .rasfoire__btn { position: static; margin: 0; width: 40px; height: 40px; padding: 10px 12px; border-radius: 50%; background: #C8481E; opacity: 1; box-shadow: var(--umbra); }   /* 52 px erau uriașe (Ina, 27.10) */
  .rasfoire__btn svg { stroke: var(--alb); }
  .rasfoire__btn:disabled { opacity: .35; }
}
.rasfoire__cta { text-align: center; margin-bottom: 1.5rem; }
.carte__cta { text-align: center; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: 0 1rem; }
.carte__pret { margin: .8rem 0 0; font: 700 1rem/1.3 var(--f-body); color: var(--indigo); }   /* prețul sub „Unde găsești cartea” (Ina, 27.10) */   /* „Vreau cartea”, la finalul lui Găsești în carte, înainte de Orașul (Ina, 26.10) */
/* lupa: spread-ul mare, pe tot ecranul; scara și poziția le pune home.js pe .lupa__spread */
.lupa { position: fixed; inset: 0; z-index: 60; background: rgba(44, 41, 80, .92); display: flex; flex-direction: column; touch-action: none; }
.lupa[hidden] { display: none; }
.lupa__zona { flex: 1; overflow: hidden; position: relative; }
.lupa__spread { position: absolute; left: 0; top: 0; display: flex; gap: 2px; transform-origin: 0 0; will-change: transform; }
.lupa__spread img { display: block; width: 50vw; max-width: 440px; height: auto; background: var(--alb); -webkit-user-drag: none; user-select: none; }
.lupa__inchide { position: absolute; top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--alb); color: var(--indigo); font: 400 1.8rem/1 var(--f-body); cursor: pointer; }
.lupa__hint { margin: 0; padding: .6rem 1rem calc(.8rem + env(safe-area-inset-bottom)); text-align: center; font-size: .85rem; color: var(--alb); opacity: .8; }
.peek { margin-top: 4rem; }
.peek .h3 { margin-inline: auto; }   /* .h3 pune margin 0 și bate .wrap; titlul rămâne în coloană */
.peek__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 760px); gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: .5rem max(1rem, (100vw - 1120px) / 2) 1.5rem;
  scrollbar-width: thin;
}
.peek__item { margin: 0; scroll-snap-align: center; }
.peek__item img { border-radius: 10px; border: 2px solid var(--indigo); box-shadow: var(--umbra); background: var(--hartie); }
.peek__item figcaption { margin-top: .7rem; font-size: .92rem; color: var(--text-2); }
.book--rasfoire .peek .h3 { text-align: center; }   /* „A peek inside” pe EN, pe mijloc ca titlurile de secțiune (27.10) */


/* CARTEA CARE SE RĂSFOIEȘTE (doar cu JS și fără „reduce motion”; altfel rămâne rândul static)
   O pagină = --p. Cartea deschisă cu o clapetă desfăcută are trei pagini lățime, de aceea e mică. */
.flip { display: none; }
.js .flip { display: block; margin-top: clamp(5rem, 11vw, 9rem); }
.js .peek--static { display: none; }
.flip--off { display: none !important; }
.flip--off + .peek--static:not([hidden]) { display: block !important; }
.no-js .peek--static { display: block !important; } .no-js .rasfoire { display: none; }   /* fără JS: nici 3D, nici răsfoire, rămâne rândul static */
.flip__track { position: relative; height: 500vh; }
/* secvența de cadre: cartea 3D nu se randează pe dispozitiv, se arată cadrul potrivit momentului din pistă */
.flip--cadre .flip__book { display: none; }
.flip__cadru { display: none; position: relative; z-index: 2; width: min(92vw, 696px, calc((100svh - 13rem) * 696 / 598)); height: auto; }
.flip--cadre .flip__cadru { display: block; }
.flip--cadre .flip__track { height: 260vh; }   /* prototip: doar deschiderea copertei și clapeta; se lungește când intră toate cadrele */
.cadru .flip__book { display: block !important; } .cadru .flip__cadru { display: none !important; }
@media (max-width: 639px) { .flip__track { height: 450vh; } }
.flip__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem;
  perspective: 2600px;
}
.flip__book {
  --p: min(26vw, 290px, calc((100svh - 14rem) * 150 / 230));
  position: relative; z-index: 2;
  width: calc(var(--p) * 2); height: calc(var(--p) * 230 / 150);
  transform-style: preserve-3d;
  will-change: transform;
}
@media (max-width: 639px) { .flip__book { --p: 30vw; transform-origin: 50% 100%; } }
.leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
.flap { position: absolute; top: 0; left: 100%; width: calc(100% * 148 / 150); height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
.face {
  position: absolute; inset: 0;
  background: var(--alb) var(--img) center / cover no-repeat;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face--back { transform: rotateY(180deg); }
/* de la al treilea spread încolo, paginile vin din imagini mici (ff/), ușor estompate: se vede că e cartea, dar nu se citește.
   Nu mai stau albe când sunt întinse (Ina, 25.10: pe desktop nu trebuie să apară pagini albe; pe telefon se văd și ele) */
.face--ascuns { background: var(--alb); }
.face--ascuns::before { content: ""; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; filter: blur(1.2px); }
@media (pointer: coarse) { .face--ascuns::before { filter: none; } }   /* pe telefon, fără blur pe fiecare cadru (scump pe GPU) */
.leaf--back > .face--front { box-shadow: 0 14px 30px rgba(44, 41, 80, .14); }
/* umbra foii care se întoarce, din JS prin --umbra-pagina */
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--umbra-pagina, 0);
  background: linear-gradient(90deg, rgba(44, 41, 80, .22), rgba(44, 41, 80, 0) 55%); }
.face--back::after { background: linear-gradient(270deg, rgba(44, 41, 80, .22), rgba(44, 41, 80, 0) 55%); }
/* caption-urile stau în aceeași celulă de grilă, deci zona e cât cel mai lung și nu iese peste ce urmează;
   cel vechi dispare repede, cel nou apare abia după, ca să nu se vadă două unul peste altul (feedback Tudor, Ina 27.10) */
.flip__captions { list-style: none; margin: 0; padding: 0 1.25rem; position: relative; z-index: 2; width: min(36rem, 100%); display: grid; align-items: end; text-align: center; }   /* zona e cât cel mai lung text; textul vizibil stă jos, lipit de „Unde găsești cartea” (Ina, 27.10) */
.flip__captions li { grid-area: 1 / 1; color: var(--text-2); font-size: 1.05rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.flip__captions li.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .18s, transform .35s ease .18s, visibility 0s; }
.flip__captions b { color: var(--indigo); }
/* scurtătura pentru cine n-are răbdare: stă discret sus, în dreapta, și dispare când cartea s-a închis */
.flip__skip { position: absolute; z-index: 3; right: 1rem; top: calc(var(--bar-h) + 1rem); font-size: .92rem; color: var(--text-2); text-underline-offset: 4px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.flip.is-started .flip__skip { opacity: 1; pointer-events: auto; }
.flip__skip:hover { color: var(--indigo); }
/* la final, pe coperta din spate, acțiunea principală apare chiar sub carte */
.flip__cta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; padding: 0 1.25rem; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.flip.is-end .flip__cta { opacity: 1; transform: none; pointer-events: auto; }
.flip__cta { margin-top: -2.75rem; }   /* „De unde o cumperi?” imediat sub textul de sub carte, nu la 3rem (Ina, 25.10) */
.flip.is-end .flip__skip { opacity: 0; pointer-events: none; }

/* cerul din spate: nori care trec încet și, din când în când, o pasăre, cu ciocul înainte */
.flip__sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sky-cloud { position: absolute; left: 0; opacity: .9; animation: nor 110s linear infinite; }
.sky-cloud--a { width: 22vw; max-width: 300px; top: 6%;  animation-duration: 120s; animation-delay: -30s; }   /* nor_05_mediu (26.10), mai înalt decât nor_02 tăiat, deci mai îngust */
.sky-cloud--b { width: 26vw; max-width: 360px; top: 74%; animation-duration: 95s;  animation-delay: -70s; }
.sky-cloud--c { width: 16vw; max-width: 220px; top: 22%; animation-duration: 80s;  animation-delay: -10s; }
@keyframes nor { from { transform: translateX(-40vw); } to { transform: translateX(110vw); } }
.sky-bird { position: absolute; left: 0; width: 58px; opacity: 0; }
.sky-bird img { width: 100%; }   /* fără bătaie din aripi: păsările doar alunecă (Ina, 22.10) */
/* pasărea verde are ciocul spre dreapta, deci zboară spre dreapta; cea galbenă invers */
.sky-bird--spre-dreapta { top: 16%; animation: zbor-dreapta 26s linear infinite; animation-delay: 4s; }
.sky-bird--spre-stanga  { top: 60%; width: 50px; animation: zbor-stanga 31s linear infinite; animation-delay: 17s; }
@keyframes zbor-dreapta {
  0% { opacity: 0; transform: translate(-10vw, 0); } 3% { opacity: 1; }
  25% { transform: translate(30vw, -3vh); } 50% { transform: translate(70vw, 1vh); opacity: 1; }
  62% { transform: translate(112vw, -2vh); opacity: 0; } 100% { opacity: 0; transform: translate(112vw, -2vh); }
}
@keyframes zbor-stanga {
  0% { opacity: 0; transform: translate(105vw, 0); } 3% { opacity: 1; }
  30% { transform: translate(60vw, 2vh); } 55% { transform: translate(-12vw, -2vh); opacity: 1; }
  57% { opacity: 0; } 100% { opacity: 0; transform: translate(-12vw, -2vh); }
}
.flip:not(.is-visible) .sky-cloud, .flip:not(.is-visible) .sky-bird { animation-play-state: paused; }

/* Pix pe trotinetă: o singură traversare, legată de scroll */
.scooter { position: relative; z-index: 3; height: 150px; overflow: hidden; overflow-x: clip; overflow-y: visible; background: linear-gradient(transparent var(--sub-carte, 100%), var(--hartie) 0); }
/* trotineta urcă în spațiul gol de sub carte, ca să nu rămână un gol mare între ele */
.js .scooter { margin-top: -30vh; margin-top: -30svh; }
.js .book--rasfoire { padding-bottom: 0; }
.book--rasfoire { padding-top: clamp(3rem, 7vw, 5rem); }   /* răsfoitul, după build-up (26.10): „Ce e în carte” stă sus, imediat după hero */
.scooter img { position: absolute; bottom: 16px; left: 0; width: 86px; height: auto; transform: translateX(-140px); }
.no-js .scooter { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js .flip { display: none; }
  .js .peek--static { display: block; }
  .sky-cloud, .sky-bird { animation: none !important; }
  .scooter { display: none; }
}

/* 4. ECHIPA */
/* de ce contează: o pagină din carte, cer pal cu nori, Pix cu harta și trei bule de dialog */
.why { position: relative; background: var(--cer-pal); }
/* scena are un ecran și nu mai stă pe loc la derulare: bulele apar singure, pe rând, când scena e pe ecran (Laura, 26.10: pagina părea blocată, pe telefon se oprea scrollul) */
.js .why__stage { position: relative; min-height: 100svh; padding-top: var(--bar-h); overflow: hidden; display: flex; align-items: center; }   /* padding-top: titlul nu intră sub bara fixă */
.why__stage > .wrap { position: relative; width: min(1120px, 100% - 2rem); }
.why .h2 { text-align: center; position: relative; }
.why__lead { position: relative; max-width: 40rem; margin: .75rem auto 0; text-align: center; color: var(--text-2); font-size: 1.05rem; line-height: 1.55; }
.why__cloud { position: absolute; pointer-events: none; opacity: .9; }
.why__cloud--a { width: clamp(110px, 13vw, 180px); top: 2.5rem; left: -1rem; }   /* nor_05_mediu, întreg (26.10) */
.why__cloud--b { width: clamp(120px, 14vw, 190px); bottom: 3rem; right: -1.5rem; }
.why__bird { position: absolute; width: 54px; top: 1.25rem; right: 7%; }
/* ca în hero (Ina, 26.10): norii plutesc foarte încet unul spre altul și se întorc; pasărea galbenă zboară din colțul din dreapta-sus în cel din stânga-jos, apoi o ia de la capăt */
@media (prefers-reduced-motion: no-preference) {
  .why__cloud--a { animation: nor-spre-dreapta 44s ease-in-out infinite alternate; }
  .why__cloud--b { animation: nor-spre-stanga 38s ease-in-out infinite alternate; }
  .why__bird { animation: why-zbor 30s linear infinite; }
}
@keyframes why-zbor {
  0% { opacity: 0; transform: translate(0, 0); } 3% { opacity: 1; }
  25% { transform: translate(-22vw, 24svh); } 50% { transform: translate(-48vw, 44svh); }
  70% { opacity: 1; transform: translate(-82vw, 78svh); } 74% { opacity: 0; transform: translate(-86vw, 82svh); }
  100% { opacity: 0; transform: translate(-86vw, 82svh); }
}
/* scena: Pix în mijloc, bulele strânse în jurul capului ei (Ina, 23.10); pozițiile sunt față de Pix (.why__fig), nu față de scenă */
.why__scene { position: relative; height: min(470px, calc(100svh - 21.5rem)); min-height: 240px; margin: 1rem auto 0; }
.why__fig { position: absolute; left: 50%; bottom: 0; width: min(180px, 34%, calc((100svh - 22.5rem) / 1.8)); transform: translateX(-50%); }   /* pe laptopuri scunde Pix se micșorează ca să încapă sub text (1.8 = cât e de înaltă față de lățime) */
.why__pix { display: block; width: 100%; height: auto; }
.why__bule { list-style: none; margin: 0; padding: 0; }
.bula { position: absolute; margin: 0; width: 170px; }
.bula img { display: block; width: 100%; height: auto; }
.bula--timpul { left: 46%; bottom: 102%; width: 170px; }          /* deasupra capului, centru-dreapta, coada jos-stânga spre cap (Ina, 25.10) */
.bula--joaca { right: 102%; top: -4%; width: 170px; }               /* stânga capului, coada spre dreapta (Ina, 25.10) */
.bula--drumul { left: 86%; top: -2%; width: 175px; }               /* dreapta capului */
.bula--relatia { right: 84%; top: 16%; width: 165px; }             /* stânga, la nivelul ochelarilor */
.bula--orasul { left: 84%; top: 14%; width: 165px; }               /* dreapta, coada sus-stânga spre ureche (bula nu mai e în pagină) */
.bula--ia { left: 94%; top: 29%; width: 170px; }                   /* dreapta capului, întoarsă pe verticală; pe desktop coada urcă spre gură, nu spre ureche (Ina, 25.10) */
.bula--ia .bula__forma { transform: scale(1, -1); transform-box: fill-box; transform-origin: center; }
.bula--ia .bula__text { transform: translateY(18px); }
.bula--joaca .bula__text { font-size: 12px; }
.bula--timpul .bula__text, .bula--ia .bula__text { font-size: 9.5px; }   /* bula de pe copertă e mai îngustă: 16 litere pe rând încap cu aer la 9,5 */             /* corpul bulei întoarse stă mai jos în desen */
.bula svg { display: block; width: 100%; height: auto; overflow: visible; }
.bula__forma { fill: #FCFCF8; stroke: #2C2950; stroke-width: .8; stroke-miterlimit: 10; }   /* ca în exportul bulelor */
.bula__text { font: 400 10.5px/1 var(--f-bubble); fill: #2C2950; text-anchor: middle; }   /* textul scris cu majuscule în pagină: Safari nu aplică text-transform în SVG */
.js .why:not(.why--static) .bula { opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .35s ease, transform .35s ease; }
.js .why:not(.why--static) .bula.is-on { opacity: 1; transform: none; }
.why__src { position: relative; max-width: 40rem; margin: .6rem auto 0; font-size: .78rem; color: var(--text-2); text-align: center; opacity: .85; }   /* sub descriere, discret (Ina, 23.10) */
/* laptopuri scunde: deasupra capului bula ar intra peste text, așa că Timpul stă în dreapta capului (bulele apar pe rând) */
@media (min-width: 721px) and (max-height: 760px) { .bula--timpul { left: 92%; bottom: 66%; } }
@media (max-width: 720px) {
  /* pe telefon scena umple ce rămâne sub text, iar Pix stă ridicată deasupra barei de jos din Safari (Ina, 23.10: picioarele erau tăiate) */
  .js .why__stage { align-items: stretch; }
  .js .why__stage > .wrap { display: flex; flex-direction: column; min-height: calc(100svh - var(--bar-h)); padding: 1rem 0 3.5rem; }
  .why__scene { flex: 1; height: auto; min-height: 250px; margin-top: .5rem; }
  .why__fig { width: 112px; }
  .bula { width: 148px !important; }                 /* 148: lângă Pix (112) sunt ~130 px pe fiecare parte; mai mari ar ieși din ecran sau ar intra peste pisică (Ina, 25.10) */
  /* pe telefon bulele stau deasupra lui Pix, nu lângă: lateral sunt doar ~130 px și ajungeau peste ochelari și urechi (Ina, 25.10) */
  .bula--timpul { left: 52%; bottom: 102%; }         /* dreapta-sus, coada jos-stânga spre cap */
  .bula--joaca { right: 48%; top: auto; bottom: 100%; }    /* stânga-sus, coada spre dreapta, aproape de cap (Ina, 25.10) */
  .bula--ia { left: 30%; top: auto; bottom: 102%; }       /* deasupra, coada jos-stânga spre cap: pe telefon bula nu e întoarsă */
  .bula--ia .bula__forma, .bula--ia .bula__text { transform: none; }
  .bula--orasul { left: 74%; bottom: 72%; }          /* dreapta, coada spre ureche */
  .why__cloud--a { top: .5rem; } .why__bird { display: none; }
}
/* telefoane scunde (iPhone SE și altele): deasupra lui Pix nu e loc de bule, așa că stau lângă cap, iar Pix e puțin mai mică (Ina, 25.10) */
@media (max-width: 720px) and (max-height: 760px) {
  .why__fig { width: 92px; }
  .bula { width: 132px !important; }
  .bula--timpul { left: 22%; bottom: 102%; }       /* deasupra capului, centrat (Ina, 25.10) */
  .bula--joaca { right: 96%; bottom: 70%; }
  .bula--ia { left: 92%; top: auto; bottom: 24%; }   /* coada în dreptul gurii (Ina, 25.10) */
  .bula--ia .bula__forma { transform: scale(1, -1); } .bula--ia .bula__text { transform: translateY(16px); }   /* lângă cap, întoarsă, coada sus-stânga */
}
/* telefoane foarte scunde (iPhone SE, Safari cu bare): Pix mai mică, bulele lângă cap. Titlul și textul rămân la mărimea din celelalte secțiuni (Ina, 26.10): scena nu mai stă pe loc, deci poate fi mai înaltă decât ecranul */
@media (max-width: 720px) and (max-height: 680px) {
  .js .why__stage > .wrap { padding-bottom: 2.25rem; }
  .why__scene { margin-top: .25rem; }
  .why__fig { width: 80px; }
  .bula { width: 124px !important; }
  .bula--timpul { left: 88%; bottom: 64%; }   /* deasupra capului ar intra peste surse; bulele apar pe rând, așa că poate sta în dreapta, ca Jocurile mele */
}
/* fără JS: toate bulele, scena nu stă pe loc (cu „reduce motion” rămân una câte una, doar fără tranziție) */
.why--static .why__track { height: auto; } .why--static .why__stage { position: static; height: auto; padding: clamp(4rem, 9vw, 6rem) 0; overflow: visible; }

/* ---------- Locurile din carte: bulinele din buletin, bandă care alunecă la scroll ---------- */
.locuri { padding: clamp(4rem, 9vw, 6rem) 0 clamp(3rem, 6vw, 4rem); background: color-mix(in srgb, var(--verde-harta) 45%, var(--alb)); overflow: hidden; }   /* verdele hărții din carte, deschis */
.locuri .h2 { text-align: center; }
.locuri__lead { max-width: 40rem; margin: .75rem auto 0; text-align: center; color: var(--text-2); font-size: 1.05rem; line-height: 1.55; }
.locuri__src { max-width: 40rem; margin: .6rem auto 0; text-align: center; font-size: .78rem; color: var(--text-2); opacity: .85; }   /* sub descriere, doar sursele (Ina, 23.10) */
.locuri__src a { color: inherit; text-underline-offset: 3px; }
/* traseul lui Pix: banda e mai lată decât ecranul și se derulează după Pix (scrollLeft, din JS); după ce s-a desenat, se poate derula cu degetul */
.ruta { margin-top: 2rem; }
.ruta__clip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ruta__clip::-webkit-scrollbar { display: none; }
.ruta__clip.is-done { scrollbar-width: thin; scrollbar-color: var(--indigo-2) transparent; }
.ruta__band { position: relative; width: 2935px; height: 300px; }   /* 2750 = capătul liniei, la cățel; 12 locuri, ca pe buletin (Ina, 25.10) */
.ruta__svg { position: absolute; inset: 0; display: block; overflow: visible; }
.ruta__urma { fill: none; stroke: var(--indigo); stroke-opacity: .07; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 15; }   /* urma abia vizibilă a traseului, ca să se ghicească drumul */
.ruta__linie { fill: none; stroke: var(--coral); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 15; }   /* punctat coral, ca pe harta din carte */
.ruta__scena img { position: absolute; height: auto; pointer-events: none; }   /* decorul din pagina cu tramvaiul: pete, tufe, copaci, blocuri, case */
.ruta__pins { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }   /* pinurile și etichetele peste linia punctată */
.pin { position: absolute; left: var(--x); top: var(--y); width: 160px; margin-left: -80px; display: flex; flex-direction: column; align-items: center; gap: .2rem; transform: translateY(-100%); }
.pin--jos { flex-direction: column-reverse; transform: translateY(-44px); }   /* pinurile de jos au eticheta sub vârf; 44px = înălțimea pinului */
/* pinul Ralucăi: vârful e la 35% din lățime (umbra e în dreapta), de aceea e deplasat spre dreapta ca vârful să cadă pe linie */
.pin__ac { width: 47px; height: 44px; flex: none; margin-left: 14px; transform: scale(0); transform-origin: 35% 93%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.pin__ac--rosu { width: 35px; margin-left: 12px; transform-origin: 47% 93%; }
.pin__ac--catel { width: 64px; height: 59px; margin-left: 0; transform-origin: 50% 100%; }   /* cățelul, ultimul punct, cu labele pe linie */
.pin--catel { transform: translateY(-59px); }   /* 59px = înălțimea cățelului */
.pin__nume { font: var(--w-display) 1.05rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--indigo); text-align: center; text-wrap: balance;
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease .2s, transform .4s ease .2s; }
/* eticheta stă pe un petic de hârtie în culoarea secțiunii, ca punctele traseului să treacă pe sub ea, nu prin litere (Ina, 25.10) */
.pin__nume { padding: .1rem .4rem; border-radius: .5rem; background: color-mix(in srgb, var(--verde-harta) 45%, var(--alb)); }
.pin.is-up .pin__ac { transform: scale(1); }
.pin.is-up .pin__nume { opacity: 1; transform: none; }
.no-js .ruta__reveal { width: 2935px; }
.no-js .pin .pin__ac, .no-js .pin .pin__nume { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pin__ac, .pin__nume { transition: none; } }
@media (max-width: 640px) { .ruta__band { height: 280px; } .pin { width: 140px; margin-left: -70px; } .pin__nume { font-size: .95rem; } }

/* ÎNTREBĂRI (AEO): o listă aerisită, fiecare întrebare se deschide; fără carduri, doar linii */
.faq { padding: clamp(4rem, 9vw, 6rem) 0; background: var(--hartie); }
.faq__inner { max-width: 44rem; }
.faq .h2 { margin-bottom: 2.5rem; }   /* titlu → listă: 2.5rem, ca la nori și la echipă (27.10) */
.faq__list { border-top: 2px solid var(--indigo); }
.faq__item { border-bottom: 2px solid color-mix(in srgb, var(--indigo) 25%, transparent); }
.faq__item summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative; font: var(--w-display) clamp(1.2rem, 2vw, 1.45rem)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--indigo); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: .7rem; height: .7rem; border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__item summary:hover { color: var(--pix-adanc); }
.faq__item p { margin: 0 0 1.25rem; max-width: 40rem; color: var(--text); }
.faq__item a { color: var(--indigo); font-weight: 700; text-underline-offset: 4px; }

.team { padding: clamp(4rem, 9vw, 6rem) 0; background: var(--hartie); }
.team .h2 { text-align: center; }   /* pe mijloc, ca „Orașul”, „Ce află copilul” și „De unde o iei” (Ina, 27.10) */
.team__grid { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 2.5rem; }
.person__head { margin-bottom: 1rem; text-align: center; }   /* tot cardul pe mijloc: portret, nume, paragraf (Ina, 27.10) */
.person__head img { width: 190px; height: auto; margin-inline: auto; }
.person h3 { font: var(--w-display) 2rem/1 var(--f-display); text-transform: uppercase; color: var(--indigo); margin: 0 0 .75rem; text-align: center; }
.person h3 span { display: block; font: 400 .95rem/1.4 var(--f-body); text-transform: none; color: var(--text-2); margin-top: .3rem; }
.person p { margin: 0; color: var(--text); text-align: center; }   /* și paragraful pe mijloc, sub nume (Ina, 27.10) */
.person p + p { margin-top: .75rem; }
/* textul lung stă ascuns până la „Citește mai mult” (fără JS se vede tot) */
.person__toggle { margin-top: .6rem; padding: .3rem 0; background: none; border: 0; font: 700 1rem/1.4 var(--f-body); color: var(--indigo); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.person__toggle:hover { color: var(--pix-adanc); }



/* PLANȘE DE COLORAT (lead magnet) */
.magnet { padding: clamp(4rem, 9vw, 6rem) 0; background: var(--galben); }
.magnet__inner { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .magnet__inner { grid-template-columns: 1fr 1.1fr; } }
.magnet .h2 { color: var(--indigo); }
.magnet__text > p { font-size: 1.12rem; color: var(--indigo); max-width: 32rem; margin: 0 0 1.5rem; }
.magnet__sheets { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1rem 0; }
.sheet { margin: 0; aspect-ratio: 210 / 297; background: var(--alb); border-radius: 4px; box-shadow: 6px 8px 0 rgba(44, 41, 80, .16); display: grid; place-items: center; padding: 12%; }
.sheet img { width: 100%; height: 100%; object-fit: contain; }
.sheet:nth-child(1) { transform: rotate(-4deg) translateY(10px); }
.sheet:nth-child(2) { transform: rotate(2deg); z-index: 1; }
.sheet:nth-child(3) { transform: rotate(5deg) translateY(16px); }
.form__check { display: flex !important; gap: .6rem; align-items: flex-start; margin: .9rem 0 0 !important; font-weight: 400 !important; font-size: .93rem; color: var(--indigo); max-width: 34rem; }
.form__check input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--indigo); flex: 0 0 auto; }
/* acordul nebifat la trimitere (Ina, 25.10): contur roșu pe căsuță, textul în roșu, o tresărire scurtă */
.form__check.is-missing { color: #8C1D18; }
.form__check.is-missing input { outline: 2px solid #C0392B; outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .form__check.is-missing input { animation: tresare .4s ease; } }
@keyframes tresare { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.form__download { margin-top: .6rem; background: var(--alb); }
.form__download[hidden] { display: none; }
.magnet[hidden] { display: none; }

/* 3. 7 NOIEMBRIE: lansarea (Luma) în stânga, anunțul pe email într-un card în dreapta; galben, se termină cu valul de pe copertă */
.launch { position: relative; overflow: hidden; padding: clamp(5rem, 11vw, 9rem) 0 0; background: var(--galben); }
.launch__inner { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; padding-bottom: clamp(5rem, 10vw, 8rem); }
@media (min-width: 820px) { .launch__inner { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); } }
.launch .h2 { color: var(--indigo); max-width: none; }   /* rândurile sunt puse cu <br> */
.launch__kicker { margin: 0 0 .6rem; font: var(--w-display) 1.05rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--indigo-2); }
.launch__h3 { margin: 1.5rem 0 .9rem; color: var(--indigo); }
.launch__facts { margin: 0 0 1.5rem; display: grid; gap: .6rem; }
.launch__facts div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline; }
.launch__facts dt { font: var(--w-display) 1rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-2); }
.launch__facts dd { margin: 0; font-size: 1.1rem; color: var(--indigo); }
.launch__facts div:first-child dd { font-weight: 700; }   /* doar data e îngroșată (Ina, 22.10: prea mult bold) */
.launch__facts dd a { color: inherit; text-underline-offset: 4px; }
.launch__unde { margin: 1rem 0 1.25rem; font-size: 1.15rem; line-height: 1.45; color: var(--indigo); }
.launch__unde a { color: inherit; text-underline-offset: 4px; }
.launch__text > p { color: var(--indigo); max-width: 30rem; margin: 0 0 1.75rem; }
.launch__ce { margin: 0 0 1rem; padding: 0 0 0 1.2rem; color: var(--indigo); font-size: 1.1rem; line-height: 1.5; }
.launch__ce li::marker { color: var(--pix); }
.launch__cumperi { margin: 2rem 0 0 !important; font-size: .95rem; opacity: .85; }
.launch__luma[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* popup-ul Luma vine cu 600 px înălțime și coperta pătrată împinge „Register” sub margine: îl facem cât ecranul, ca butonul să se vadă fără scroll (Ina, 26.10) */
.luma-checkout--modal { height: min(800px, calc(100vh - 32px)) !important; max-height: min(800px, calc(100vh - 32px)) !important; }
@supports (height: 100dvh) { .luma-checkout--modal { height: min(800px, calc(100dvh - 32px)) !important; max-height: min(800px, calc(100dvh - 32px)) !important; } }   /* pe telefon, fără bara browserului */
.launch__soon { margin: .8rem 0 0 !important; font-size: .95rem; }
.launch__card { padding: 1.8rem 1.9rem 2rem; background: var(--alb); border: 2px solid var(--indigo); border-radius: var(--r); box-shadow: var(--umbra); }
.launch__card .h3 { margin-bottom: .6rem; }
.launch__card > p { margin: 0 0 1.5rem; color: var(--text-2); }
.launch__contact { margin: 1.25rem 0 0; font-size: .9rem; color: var(--indigo); text-align: center; }   /* sub Anunță-mă (Ina, 25.10) */
.launch__contact a { color: inherit; text-underline-offset: 4px; }
@media (min-width: 820px) { .launch__contact { grid-column: 2; margin-top: calc(1.25rem - clamp(2.5rem, 6vw, 6rem)); } }   /* lipit de card, nu la un rând nou de grilă */
.launch__wave { position: relative; z-index: 1; width: calc(100% + 6px); max-width: none; height: auto; margin: -2rem -3px -3px; }
@media (min-width: 820px) { .launch__inner--singur { grid-template-columns: minmax(0, 40rem); } }   /* Evenimente fără cardul Anunță-mă (26.10) */

/* COMANDĂ: doar de unde o iei (Laura, 26.10): titlul, o frază și cardul Anunță-mă, centrate */
.comanda { padding: clamp(4rem, 9vw, 6rem) 0 clamp(4rem, 9vw, 6rem); background: var(--hartie); }
.comanda__inner { max-width: 34rem; }
.comanda .h2 { text-align: center; color: var(--indigo); }
.comanda__lead { margin: 0 auto 2rem; text-align: center; color: var(--text-2); font-size: 1.05rem; line-height: 1.55; }
.comanda .launch__contact { grid-column: auto; margin-top: 1.25rem; }

.form label { display: block; font-weight: 700; color: var(--indigo); margin-bottom: .45rem; }
.form__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.form input[type=email], .form__text {
  flex: 1 1 240px; min-height: 52px; padding: .7rem 1rem;
  font: inherit; color: var(--text);
  background: var(--alb); border: 2px solid var(--indigo); border-radius: 999px;
}
.form input[type=email][aria-invalid="true"], .form__text[aria-invalid="true"] { border-color: #B3261E; }
.form__who { margin: 0 0 .35rem !important; font-size: .95rem; }
.form__select, .form__text { margin-bottom: 1rem; }
.form__text { display: block; width: 100%; min-height: 46px; padding: .5rem 1rem; }
.form__mesaj { min-height: 72px; padding-top: .7rem; font: inherit; line-height: 1.35; resize: vertical; border-radius: 18px; }   /* alte detalii, opțional (Ina, 25.10) */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__who span { font-weight: 400; color: var(--text-2); }
.form__doua { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }   /* două câmpuri pe un rând (precomanda, arhivată 26.10); pe verticală distanța o dau câmpurile (margin-bottom 1rem), ca peste tot */
#anunta .form label:not(.form__check) { font-size: .95rem; margin-bottom: .4rem; }   /* toate etichetele la fel, distanțe egale (Ina, 24.10) */
#anunta .form__row .btn { margin-top: .5rem; min-height: 52px; padding-inline: 2rem; }   /* butonul cu aer, nu lipit de câmp (Ina, 24.10) */
#anunta .form__check { margin-top: 1.25rem !important; }
@media (max-width: 520px) { #anunta .form__row .btn { width: 100%; padding-inline: 1rem; } }   /* butonul pe un rând (Ina, 25.10) */
@media (max-width: 389px) { #anunta .form__row .btn { font-size: 1.05rem; padding-inline: .75rem; } }   /* telefoanele de 375 px; sub 340 px textul trece pe două rânduri */
@media (max-width: 420px) { .form__doua { grid-template-columns: 1fr; } }
.form__select {
  width: 100%; min-height: 46px; padding: .5rem 2.4rem .5rem 1rem;
  font: inherit; color: var(--text); background: var(--alb); border: 2px solid var(--indigo); border-radius: 999px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%232C2950' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.form__msg { min-height: 1.6em; margin: .75rem 0 0; font-size: .98rem; }
.form__msg:empty { display: none; }
.form__msg.is-error { color: #8C1D18; }
.form__msg.is-ok { color: var(--indigo); font-weight: 700; }

/* subsol */
/* pagini de text (confidențialitate): o coloană de citit, titlurile din sistem */
.legal { padding: clamp(7rem, 14vw, 9rem) 0 clamp(4rem, 9vw, 6rem); }
.legal__inner { max-width: 40rem; }
.legal__lead { font-size: 1.2rem; color: var(--text-2); margin: 0 0 .5rem; }
.legal__date { font-size: .9rem; color: var(--text-2); margin: 0 0 2.5rem; }
.legal .h3 { margin-top: 2.5rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }
.legal mark { background: var(--galben, #FBDD09); padding: 0 .2em; }

/* 404: harta estompată, iar Pix cu ochelari de soare iese pe vârfuri de pe marginea ei */
.lost { padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(4rem, 9vw, 6rem); background: var(--hartie); overflow: hidden; }
.lost__inner { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 60rem; }
.lost__art { position: relative; padding: 2rem 0 0; }
.lost__map { width: 82%; opacity: .35; border-radius: var(--r); transform: rotate(-3deg); }
.lost__pix { position: absolute; width: 62%; right: -6%; bottom: -8%; }
.lost__bubble { position: absolute; z-index: 1; top: 14%; left: 8%; }
@media (prefers-reduced-motion: no-preference) {
  .lost__pix { animation: lost-tiptoe 2.4s ease-in-out infinite; }
  @keyframes lost-tiptoe { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -4px) rotate(2deg); } }
}
.lost__text p { color: var(--text-2); font-size: 1.15rem; margin: 0 0 1.75rem; }
.lost__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-bottom: 2rem; }
.lost__text .lost__en { font-size: .9rem; margin: 0; }
@media (max-width: 720px) {
  .lost__inner { grid-template-columns: 1fr; text-align: center; }
  .lost__art { width: min(320px, 85vw); margin-inline: auto; }
  .lost__actions { justify-content: center; }
}

.foot { background: var(--hartie); padding: 2.5rem 0 3rem; font-size: .9rem; color: var(--text-2); }
.foot__facts { margin: 0 0 2rem; padding: 0 0 1.5rem; border-bottom: 2px dashed color-mix(in srgb, var(--indigo) 25%, transparent); font-size: .9rem; line-height: 1.6; color: var(--text-2); }   /* un singur rând, discret (Ina, 24.10) */
.foot__inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 720px) { .foot__inner { grid-template-columns: auto 1fr; gap: 2.5rem; } }
.foot__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }
.foot__logo { width: 236px; height: auto; }
.foot__logo--arta { width: 190px; }
.foot__logo--urbaneye { width: auto; height: 64px; }
.foot p { margin: 0 0 .35rem; }

/* apariții discrete, o singură dată */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* mod „cadru” (randarea cadrelor pentru telefon): doar scena cărții, pe tot ecranul, fără bară, nori, legende */
.cadru .flip__stage { position: fixed; inset: 0; z-index: 1000; height: 100vh; background: var(--hartie); }
.cadru .flip__sky, .cadru .flip__captions, .cadru .flip__skip, .cadru .flip__cta, .cadru .bar { display: none !important; }
.cadru .flip__book { --p: 290px; }

/* EN (26.10): pe ecran îngust, „for curious kids” nu mai stă pe un rând; rândurile se echilibrează, ca „kids” să nu rămână singur */
@media (max-width: 899px) { .hero__title--en .nowrap { white-space: normal; } .hero__title--en { text-wrap: balance; } }