/* характер: cenicienta — из design/characters.json */
:root{
  --bg:#050506;
  --surface:#ffffff;
  --ink:#ffffff;
  --ink-2:#d9d9de;
  --muted:#a8a8b0;
  --muted-2:#a8a8b0;
  --line:#2a2a2e;
  --line-2:#3a3a40;
  --line-dot:#3a3a40;
  --brand:#d50871;
  --brand-soft:#ffaecf;
  --accent:#ffaecf;
  --action:#d50871;
  --action-hover:#b0055d;
  --action-ink:#ffffff;
  --status:#ffaecf;
  --dark:#050506;
  --paper:#ffffff;
  --paper-ink:#050506;
  --paper-muted:#5a4650;
  --paper-line:#e6c4d4;
  --fucsia-oscuro:#b0055d;
  --r-btn:999px;
  --r-img:18px;
  --pad-x:20px;
  --pad-x-d:64px;
  --display:'Bodoni Moda', Didot, 'Times New Roman', serif;
  --body:Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =========================================================================
   core.css — общее для всех характеров: сброс, кнопки, ссылки, карта,
   липкая панель, анимация. Композиция каждого характера — в своём файле.
   Токены приходят из design/characters.json.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{display:block;max-width:100%}
/* height:auto обязателен: иначе атрибут height у <img> перебивает aspect-ratio
   и кадр растягивается. Правила с явной высотой перебивают это по специфичности. */
img{height:auto}
h1,h2,h3{margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
/* у figure браузерный отступ 40px по бокам — из-за него фото не занимали свою ячейку */
figure{margin:0}
ul{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--bg);padding:10px 16px}

/* -------------------------------------------------------------- кнопки -- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 24px;border-radius:var(--r-btn);
  font:700 16px/1 var(--body);text-decoration:none;border:0;cursor:pointer;
  transition:background .15s ease,transform .1s ease;
}
.btn--action{background:var(--action);color:var(--action-ink)}
.btn--action:hover{background:var(--action-hover)}
.btn--invert{background:var(--bg);color:var(--ink)}
.btn--invert:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:46px;padding:0 20px;font-size:15px;display:inline-flex}
.wa{flex:0 0 auto}


/* Фирменный знак клиента. Если в content.json есть business.logo — в шапке
   и подвале выводится он вместо словесного знака. Высота фиксирована,
   ширина свободная: подходит и квадратной эмблеме, и вытянутому логотипу. */
.brand__logo{height:var(--logo-h,34px);width:auto;max-width:var(--logo-max,180px);object-fit:contain;flex:0 0 auto;mix-blend-mode:var(--logo-blend,normal);border-radius:var(--logo-r,0)}
@media (min-width:880px){.brand__logo{height:var(--logo-h-d,42px);max-width:var(--logo-max-d,240px)}}

/* ------------------------------------------------------- мелкие детали -- */
.status{display:inline-flex;align-items:center;gap:9px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--status);flex:0 0 auto}

.ulink{
  display:inline-block;font-size:14px;text-decoration:none;
  border-bottom:1px solid var(--line-dot);padding-bottom:3px;
}
.ulink:hover{border-bottom-color:var(--brand);color:var(--brand)}
.ulink--muted{color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}

.note{margin-top:14px;font-size:13px;line-height:1.6;color:var(--muted-2)}

/* ---------------------------------------------------------------- карта -- */
.map{border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden;background:var(--surface)}
.map iframe{width:100%;height:220px;border:0}

/* ------------------------------------------------------ липкая панель -- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--bg);border-top:1px solid var(--line);
}
.sticky__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sticky__lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sticky__val{font:600 15px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{margin-left:auto;flex:0 0 auto}

/* ------------------------------------------- полоска «это пример» -------- */
/* Цвета берём из главной пары характера (ink/bg) — контраст гарантирован
   в любой палитре, в том числе у тёмного barber, где ink светлый. */
.ejemplo{
  display:flex;align-items:center;justify-content:center;gap:6px 12px;flex-wrap:wrap;
  padding:8px 16px;background:var(--ink);color:var(--bg);
  font:600 12px/1.35 var(--body);text-align:center;text-decoration:none;
}
.ejemplo__q{
  flex:0 0 auto;border:1px solid currentColor;border-radius:999px;
  padding:2px 9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.ejemplo__t{display:none}
.ejemplo__c{flex:0 0 auto;text-decoration:underline;text-underline-offset:3px}
.ejemplo:hover .ejemplo__c{text-decoration-thickness:2px}
@media (min-width:600px){
  .ejemplo{font-size:13px;padding:9px 20px}
  .ejemplo__t{display:inline}
}

/* ------------------------------------------------------------ анимация -- */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{opacity:0}
.rise.in{animation:riseIn .6s ease both}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1}
  html{scroll-behavior:auto}
}

@media (min-width:880px){
  html{scroll-padding-top:80px}
  .map iframe{height:380px}
  .sticky{display:none}
}

/* =========================================================================
   cenicienta.css — прокат платьев как сказка по главам.
   Телефон повторяет макет 390 px, компьютер — макет 1440 px (от 1080 px),
   между ними — телефонная раскладка по центру. Все переходы — на ключевых
   кадрах: одно нажатие меняет классы, остальное доигрывает CSS; пары -a/-b
   нужны, чтобы анимация запускалась заново при каждой смене.
   ========================================================================= */

body{background:var(--bg);color:#fff;font-family:var(--body)}
.ec{position:relative;overflow-x:clip}
/* на широких экранах содержимое держим в 1440, а лента идёт во всю ширину */
.hdr,.hero,.cap,.fin,.pie{max-width:1440px;margin-left:auto;margin-right:auto}
@supports not (overflow:clip){.ec{overflow-x:hidden}}

.marca{font-family:Nunito,sans-serif;font-weight:900;color:var(--brand);-webkit-text-stroke:1.4px #fff;paint-order:stroke fill;letter-spacing:-.01em}
.bod{font-family:var(--display);font-weight:900;letter-spacing:-.01em}
.bodi{font-family:var(--display);font-weight:400;font-style:italic}
.guion{font-family:'Great Vibes',cursive;font-weight:400}
.k{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-soft)}
.solo-d{display:none}
.nota{margin-top:22px;font-size:14px;line-height:1.6;color:var(--muted)}
.estrella{position:absolute;fill:var(--brand-soft);pointer-events:none}

/* кнопки */
.btn-f,.btn-l{display:flex;align-items:center;justify-content:center;border-radius:999px;font-weight:700;text-decoration:none;transition:background .2s ease,transform .1s ease}
.btn-f{min-height:58px;padding:0 30px;background:var(--brand);color:#fff;font-size:16px}
.btn-f:hover{background:var(--fucsia-oscuro)}
.btn-l{min-height:48px;padding:0 22px;border:1.5px solid var(--paper-ink);color:var(--paper-ink);font-size:14px;font-weight:600}
.btn-l:hover{background:var(--paper-ink);color:#fff}
.btn-f:active,.btn-l:active{transform:translateY(1px)}
.chip{height:40px;padding:0 11px;display:flex;align-items:center;border:1.5px solid var(--line-2);background:transparent;border-radius:999px;color:#fff;font:600 12px var(--body);white-space:nowrap;cursor:pointer;transition:background .35s ease,border-color .35s ease}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand)}

/* прокрутка названия салона: столбик сдвигается на номер салона */
.roll{display:block;overflow:hidden;height:1.2em;line-height:1.2em}
.roll__col{display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform:translateY(calc(var(--salon,1) * -1.2em))}
.roll__col>span{display:block;height:1.2em;white-space:nowrap}

/* искорки при смене салона */
@keyframes chispa-a{0%{transform:scale(0) rotate(0deg);opacity:0}30%{transform:scale(1.15) rotate(40deg);opacity:1}100%{transform:scale(0) rotate(90deg);opacity:0}}
@keyframes chispa-b{0%{transform:scale(0) rotate(0deg);opacity:0}30%{transform:scale(1.15) rotate(40deg);opacity:1}100%{transform:scale(0) rotate(90deg);opacity:0}}
.chispas{position:absolute;pointer-events:none}
.chispas svg{position:absolute;opacity:0}
.chispas.on-a svg{animation:chispa-a .9s ease-out both}
.chispas.on-b svg{animation:chispa-b .9s ease-out both}
.chispas svg:nth-child(2){animation-delay:.08s}
.chispas svg:nth-child(3){animation-delay:.16s}
.chispas svg:nth-child(4){animation-delay:.05s}
.chispas svg:nth-child(5){animation-delay:.22s}
.chispas svg:nth-child(6){animation-delay:.12s}
.chispas svg:nth-child(7){animation-delay:.3s}

/* ------------------------------------------------------------- шапка -- */
.hdr{position:relative;z-index:20;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.hdr__marca{display:flex;flex-direction:column;line-height:.92;text-decoration:none;font-size:21px}
.hdr__salones,.hdr__cta{display:none}
.hdr__sel{display:flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 14px;background:var(--brand);color:#fff;border:0;border-radius:999px;font:600 14px var(--body);cursor:pointer}
.hdr__sel-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.hdr__sel-k{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#ffe3ef}
.roll--sel{font-size:14px;height:17px;line-height:17px}
.roll--sel .roll__col{transform:translateY(calc(var(--salon,1) * -17px))}
.roll--sel .roll__col>span{height:17px}
.hdr__sel-i{width:34px;height:34px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:transform .3s ease}
.hdr__sel-i svg{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round}
.hdr__sel[aria-expanded="true"] .hdr__sel-i{transform:rotate(180deg)}
.chispas--movil{right:8px;top:0;width:200px;height:68px}
.chispas--movil .ch1{left:10px;top:6px;width:22px;height:22px;fill:var(--brand-soft)}
.chispas--movil .ch2{left:150px;top:46px;width:14px;height:14px;fill:#fff}
.chispas--movil .ch3{left:176px;top:2px;width:18px;height:18px;fill:var(--brand)}
.menu-salon{position:absolute;z-index:30;top:72px;left:16px;right:16px;padding:14px;background:#fff;color:var(--paper-ink);border-radius:22px;display:flex;flex-direction:column;gap:6px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.menu-salon[hidden]{display:none}
.menu-salon p{margin:4px 6px 8px;font-size:22px}
.menu-salon__op{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 14px;background:#fff7fa;color:var(--paper-ink);border:0;border-radius:14px;font:600 16px var(--body);text-align:left;cursor:pointer}
.menu-salon__op small{font-size:12px;font-weight:500;opacity:.75}
.menu-salon__op[aria-pressed="true"]{background:var(--paper-ink);color:#fff}

/* -------------------------------------------------------- первый экран -- */
.hero{position:relative;padding-top:26px;background:radial-gradient(70% 45% at 50% 52%,rgba(213,8,113,.42),rgba(5,5,6,0) 70%)}
.hero__k{margin:0 20px}
.hero__tit{position:relative;z-index:2;margin:14px 20px 0}
.hero__tit h1{font-size:min(92px,23.6vw);line-height:.86;text-transform:uppercase}
.hero__guion{position:absolute;left:32.8vw;top:2px;font-size:min(52px,13.3vw);line-height:1;color:var(--brand);transform:rotate(-6deg);white-space:nowrap}
.hero__foto{position:relative;z-index:1;margin:-22px 20px 0}
.hero__arco{aspect-ratio:350/470;border-radius:50% 50% 24px 24px/37.23% 37.23% 24px 24px;overflow:hidden}
/* арку режем ещё и у самих слоёв: во время анимации браузер теряет скругление
   родителя, и дымка была видна прямоугольником */
.hero__arco>*{clip-path:inset(0 round 50% 50% 24px 24px/37.23% 37.23% 24px 24px)}
.hero__arco img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero__foto .e1{left:-8px;top:25%;width:34px;height:34px}
.hero__foto .e2{right:6px;top:8%;width:20px;height:20px;fill:#fff}
.insignia{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--bg);border-radius:999px;font-size:12px;font-weight:600}
.insignia>i{width:8px;height:8px;border-radius:50%;background:var(--brand-soft);flex:0 0 auto}
.roll--insignia{height:16px;line-height:16px}
.roll--insignia .roll__col{transform:translateY(calc(var(--salon,1) * -16px))}
.roll--insignia .roll__col>span{height:16px}
.hero__pie{padding:22px 20px 0;display:flex;flex-direction:column;gap:12px}
.hero__pie p{font-size:16px;line-height:1.55;color:var(--ink-2)}

/* бегущая лента: полоса шире экрана и повёрнута, углы прячет .cinta */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cinta{overflow:hidden;padding:18px 0}
.cinta__banda{margin:12px -20px 0;padding:12px 0;background:var(--brand);transform:rotate(-2deg)}
.cinta__mov{display:flex;width:max-content;animation:marquee 30s linear infinite}
.cinta__mov span{font-size:22px;padding:0 18px;white-space:nowrap}

/* ------------------------------------------------------------- главы -- */
.cap{padding:54px 20px 30px}
.cap h2.guion{margin-top:2px;font-size:56px;line-height:1}
.cap__sub{margin-top:6px;font-size:22px;color:var(--ink-2)}

/* глава 1: карточки-приглашения */
.invit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;margin-top:24px;align-items:start}
.invit__c{display:flex;flex-direction:column;gap:10px;transform:rotate(var(--giro));text-decoration:none;color:#fff;transition:transform .3s ease}
.invit__c img{width:100%;aspect-ratio:163/236;object-fit:cover;object-position:50% 0;border:6px solid #fff}
.invit__c .guion{font-size:30px;line-height:1}
.invit__c:hover{transform:rotate(0) translateY(-4px)}

/* глава 2: волшебные зеркала */
.colores{display:flex;gap:14px;margin-top:18px}
.color{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;color:#fff;font:600 12px var(--body);cursor:pointer;padding:0}
.color span{display:block;width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 3px var(--bg),0 0 0 5px transparent;transition:box-shadow .3s ease}
.color[aria-pressed="true"] span{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--brand)}
.espejos{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.espejo{display:flex;flex-direction:column;align-items:center;--off:7px;--estrella:18px}
.espejo__marco{position:relative;width:100%;margin-top:calc(var(--off) + var(--estrella) / 2)}
/* рамка — кольцо тени вокруг арки: радиус повторяет арку с отступом */
.espejo__luna{position:relative;width:100%;aspect-ratio:163/228;overflow:hidden;isolation:isolate;background:#e8ebee;
  border-radius:50% 50% 14px 14px/35.75% 35.75% 14px 14px;
  box-shadow:0 0 0 calc(var(--off) - 1.5px) var(--bg),0 0 0 var(--off) var(--brand-soft),0 0 0 var(--off) rgba(255,174,207,0)}
.espejo__estrella{position:absolute;z-index:5;left:50%;top:calc(-1 * (var(--off) + var(--estrella) / 2));width:var(--estrella);height:var(--estrella);margin-left:calc(var(--estrella) / -2);fill:var(--brand-soft);background:var(--bg);border-radius:50%}
.espejo__pie{display:grid;width:100%;margin-top:calc(var(--off) + 12px);font-size:16px;line-height:1.3;color:var(--ink-2);text-align:center;white-space:nowrap}
.espejo__pie span{grid-area:1/1;opacity:0}
.es-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0}
.es-quieta,.es-in-a,.es-in-b{opacity:1;z-index:2}
@keyframes es-out-a{0%{opacity:1;filter:blur(0) brightness(1)}100%{opacity:0;filter:blur(8px) brightness(1.3)}}
@keyframes es-out-b{0%{opacity:1;filter:blur(0) brightness(1)}100%{opacity:0;filter:blur(8px) brightness(1.3)}}
@keyframes es-in-a{0%{opacity:0;filter:blur(10px) brightness(1.35);transform:scale(1.03)}100%{opacity:1;filter:blur(0) brightness(1);transform:scale(1)}}
@keyframes es-in-b{0%{opacity:0;filter:blur(10px) brightness(1.35);transform:scale(1.03)}100%{opacity:1;filter:blur(0) brightness(1);transform:scale(1)}}
.es-out-a{animation:es-out-a .7s cubic-bezier(.45,0,.55,1) both;z-index:1}
.es-out-b{animation:es-out-b .7s cubic-bezier(.45,0,.55,1) both;z-index:1}
.es-in-a{animation:es-in-a 1.05s cubic-bezier(.33,0,.2,1) .45s both}
.es-in-b{animation:es-in-b 1.05s cubic-bezier(.33,0,.2,1) .45s both}
.es-niebla{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(120% 85% at 50% 38%,rgba(212,208,226,.9),rgba(178,172,198,.82) 55%,rgba(138,130,160,.78))}
@keyframes es-niebla-a{0%{opacity:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}38%{opacity:.85;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{opacity:0}}
@keyframes es-niebla-b{0%{opacity:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}38%{opacity:.85;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{opacity:0}}
.es-niebla-a{animation:es-niebla-a 1.5s both}
.es-niebla-b{animation:es-niebla-b 1.5s both}
@keyframes es-marco-a{0%,100%{box-shadow:0 0 0 calc(var(--off) - 1.5px) var(--bg),0 0 0 var(--off) #ffaecf,0 0 0 var(--off) rgba(255,174,207,0)}40%{box-shadow:0 0 0 calc(var(--off) - 1.5px) var(--bg),0 0 0 var(--off) #ffffff,0 0 22px var(--off) rgba(255,174,207,.45)}}
@keyframes es-marco-b{0%,100%{box-shadow:0 0 0 calc(var(--off) - 1.5px) var(--bg),0 0 0 var(--off) #ffaecf,0 0 0 var(--off) rgba(255,174,207,0)}40%{box-shadow:0 0 0 calc(var(--off) - 1.5px) var(--bg),0 0 0 var(--off) #ffffff,0 0 22px var(--off) rgba(255,174,207,.45)}}
.es-marco-a .espejo__luna{animation:es-marco-a 1.5s ease-in-out both}
.es-marco-b .espejo__luna{animation:es-marco-b 1.5s ease-in-out both}
/* пыльца: полёт (span) и мерцание (точка) — две отдельные плавные анимации */
.es-polvo{position:absolute;left:50%;top:42%;width:0;height:0;z-index:6;pointer-events:none}
.es-chispa{position:absolute}
.es-chispa>*{display:block;opacity:0}
.es-mota{border-radius:50%}
@keyframes es-vuela-a{from{transform:translate(0,0)}to{transform:translate(var(--x),var(--y))}}
@keyframes es-vuela-b{from{transform:translate(0,0)}to{transform:translate(var(--x),var(--y))}}
@keyframes es-titila-a{0%{opacity:0;transform:scale(.4);animation-timing-function:cubic-bezier(.33,0,.2,1)}16%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}32%{opacity:.3;transform:scale(.7);animation-timing-function:cubic-bezier(.45,0,.55,1)}48%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}64%{opacity:.35;transform:scale(.75);animation-timing-function:cubic-bezier(.45,0,.55,1)}80%{opacity:.85;transform:scale(.9);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{opacity:0;transform:scale(.4)}}
@keyframes es-titila-b{0%{opacity:0;transform:scale(.4);animation-timing-function:cubic-bezier(.33,0,.2,1)}16%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}32%{opacity:.3;transform:scale(.7);animation-timing-function:cubic-bezier(.45,0,.55,1)}48%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}64%{opacity:.35;transform:scale(.75);animation-timing-function:cubic-bezier(.45,0,.55,1)}80%{opacity:.85;transform:scale(.9);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{opacity:0;transform:scale(.4)}}
.es-brillo-a .es-chispa{animation:es-vuela-a cubic-bezier(.2,.6,.3,1) both}
.es-brillo-b .es-chispa{animation:es-vuela-b cubic-bezier(.2,.6,.3,1) both}
.es-brillo-a .es-chispa>*{animation:es-titila-a both}
.es-brillo-b .es-chispa>*{animation:es-titila-b both}
/* подписи: старая гаснет, новая проявляется */
.es-cap,.es-capin-a,.es-capin-b{opacity:1}
@keyframes es-capin-a{0%{opacity:0;filter:blur(3px)}100%{opacity:1;filter:blur(0)}}
@keyframes es-capin-b{0%{opacity:0;filter:blur(3px)}100%{opacity:1;filter:blur(0)}}
@keyframes es-capout-a{0%{opacity:1}100%{opacity:0}}
@keyframes es-capout-b{0%{opacity:1}100%{opacity:0}}
.espejo__pie .es-capin-a{animation:es-capin-a .85s cubic-bezier(.33,0,.2,1) .65s both}
.espejo__pie .es-capin-b{animation:es-capin-b .85s cubic-bezier(.33,0,.2,1) .65s both}
.espejo__pie .es-capout-a{animation:es-capout-a .5s ease-in-out both}
.espejo__pie .es-capout-b{animation:es-capout-b .5s ease-in-out both}
.espejo__pie .es-cap,.espejo__pie .es-capin-a,.espejo__pie .es-capin-b{opacity:1}

/* глава 3: салон-билет */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.chips .chip{padding:0 min(11px,2.4vw)}
.boleto{position:relative;margin-top:22px;background:var(--paper);color:var(--paper-ink);border-radius:22px;padding:22px 22px 24px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "mapa" "btns"}
.boleto__muesca{position:absolute;top:90px;width:28px;height:28px;border-radius:50%;background:var(--bg)}
.boleto__muesca--i{left:-14px}
.boleto__muesca--d{right:-14px}
.chispas--boleto{inset:0;z-index:2}
.chispas--boleto svg{fill:var(--brand)}
.chispas--boleto .b1{left:9%;top:38px;width:30px;height:30px}
.chispas--boleto .b2{left:40%;top:22px;width:18px;height:18px;fill:var(--brand-soft)}
.chispas--boleto .b3{left:72%;top:50px;width:40px;height:40px}
.chispas--boleto .b4{left:57%;top:110px;width:22px;height:22px;fill:var(--paper-ink)}
.chispas--boleto .b5{left:17%;top:170px;width:26px;height:26px;fill:var(--brand-soft)}
.chispas--boleto .b6{left:83%;top:200px;width:34px;height:34px}
.chispas--boleto .b7{left:34%;top:300px;width:16px;height:16px}
.boleto__capas{grid-area:txt;display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.boleto__capa{grid-area:1/1;opacity:0;pointer-events:none}
.boleto__capa.actual,.boleto__capa.ap-a,.boleto__capa.ap-b{opacity:1;pointer-events:auto}
@keyframes aparecer-a{from{opacity:0}to{opacity:1}}
@keyframes aparecer-b{from{opacity:0}to{opacity:1}}
@keyframes desvanecer-a{from{opacity:1}to{opacity:0}}
@keyframes desvanecer-b{from{opacity:1}to{opacity:0}}
.boleto__capa.ap-a{animation:aparecer-a .9s ease-out .2s both}
.boleto__capa.ap-b{animation:aparecer-b .9s ease-out .2s both}
.boleto__capa.dv-a{animation:desvanecer-a .45s ease-in both}
.boleto__capa.dv-b{animation:desvanecer-b .45s ease-in both}
.boleto__k{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fucsia-oscuro)}
.boleto__capa h3{margin-top:6px;font-size:min(40px,9.8vw);line-height:1;text-transform:uppercase;white-space:nowrap}
.boleto__corte{margin-top:22px;border-top:2px dashed var(--paper-line);padding-top:16px}
.boleto__dir{font-size:16px;font-weight:700;line-height:1.4}
.boleto__ref{margin-top:6px;font-size:14px;line-height:1.55;color:var(--paper-muted)}
.boleto__horas{margin-top:10px;font-size:13px;color:var(--paper-muted)}
.boleto__mapa{grid-area:mapa;position:relative;margin-top:16px;aspect-ratio:720/520;border-radius:14px;overflow:hidden;background:#000}
.mapa{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.mapa.mapa-quieto,.mapa.mapa-viejo,.mapa.mapa-nuevo-a,.mapa.mapa-nuevo-b{opacity:1}
.mapa-viejo{z-index:1}
@keyframes mapaIn-a{from{opacity:0}to{opacity:1}}
@keyframes mapaIn-b{from{opacity:0}to{opacity:1}}
.mapa-nuevo-a{animation:mapaIn-a 1.1s ease .2s both;z-index:2}
.mapa-nuevo-b{animation:mapaIn-b 1.1s ease .2s both;z-index:2}
.boleto__btns{grid-area:btns;display:flex;gap:10px;margin-top:16px}
.boleto__btns a{flex:1;min-height:48px;font-size:14px;padding:0 12px}

/* глава 4: 48 часов */
.noche__num{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.noche__num .bod{font-size:150px;line-height:.8;color:var(--brand)}
.noche__num .bodi{font-size:26px;line-height:1.1;padding-bottom:10px;white-space:nowrap}
.noche__txt{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pasos{list-style:none;margin:26px 0 0;padding:0 0 0 22px;border-left:2px solid var(--brand)}
.pasos li{position:relative;padding-bottom:22px}
.pasos li:last-child{padding-bottom:0}
.pasos li::before{content:"";position:absolute;left:-31px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--brand);border:3px solid var(--bg)}
.pasos li.ultimo::before{background:#fff}
.pasos .bodi{font-size:22px}
.pasos p+p{margin-top:4px;font-size:14px;line-height:1.55;color:var(--muted)}

/* глава 5: фея-крёстная — сетка с именованными областями, текст раскладывается вокруг фото */
.cap--hada{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;
  grid-template-areas:"k k" "h2 h2" "foto num" "nombre nombre" "cita cita" "datos datos"}
.hada__txt{display:contents}
.hada__txt>.k{grid-area:k}
.hada__txt>h2{grid-area:h2;margin-top:2px;font-size:56px;line-height:1}
.hada__foto{grid-area:foto;position:relative;margin-top:18px;width:200px;height:272px;border-radius:50%;border:3px solid var(--brand);padding:7px;transform:rotate(-4deg)}
.hada__ovalo{width:100%;height:100%;border-radius:50%;overflow:hidden;border:1px solid var(--brand-soft)}
.hada__ovalo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hada__foto .h1s{right:-44px;top:92px;width:26px;height:26px}
.hada__foto .h2s{left:6px;bottom:40px;width:18px;height:18px;fill:var(--brand)}
.hada__num{grid-area:num;align-self:end;padding-bottom:14px}
.hada__num .bod{display:block;font-size:64px;line-height:.9;color:var(--brand)}
.hada__num .bodi{display:block;margin-top:4px;max-width:150px;font-size:20px;line-height:1.1;color:var(--brand-soft)}
.hada__nombre{grid-area:nombre;margin-top:22px;font-size:44px;line-height:1;color:var(--brand)}
.hada__cita{grid-area:cita;margin-top:10px;font-size:26px;line-height:1.25}
.hada__datos{grid-area:datos;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.hada__datos li{display:flex;gap:12px;align-items:baseline}
.hada__datos li>span:first-child{flex:0 0 auto;font-size:22px;color:var(--brand)}
.hada__datos li>span.bodi{font-size:20px}
.hada__datos li>span+span{font-size:14px;line-height:1.5;color:var(--ink-2)}

/* пресса, финал, подвал */
.prensa{margin:0 20px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.prensa .k{color:var(--muted)}
.prensa .bodi{font-size:19px;line-height:1.5}
.fin{padding:64px 28px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.fin__raya{width:56px;height:2px;background:var(--brand)}
.fin .k{letter-spacing:.34em}
.fin__tit{font-size:27px;line-height:1.3}
.fin__txt{margin-top:6px;font-size:15px;line-height:1.6;color:var(--muted)}
.fin .btn-f{margin-top:6px;min-height:56px}
.pie{padding:30px 20px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.pie__marca{font-size:22px}
.pie p{font-size:12px;line-height:1.8;color:var(--muted);text-align:right}
.pie .nw{white-space:nowrap}
.pie a{color:inherit;text-decoration:none}
.pie a:hover{color:#fff}

/* ---------------------------------- планшет: телефонная раскладка по центру -- */
@media (min-width:700px) and (max-width:1079px){
  .hero,.cap,.fin{max-width:640px;margin-left:auto;margin-right:auto}
  .prensa{max-width:600px;margin-left:auto;margin-right:auto}
  .hero__guion{left:210px;font-size:52px}
  .hero__tit h1{font-size:92px}
  .cinta__banda{margin-left:-40px;margin-right:-40px}
}

/* --------------------------------------------------------- компьютер -- */
@media (min-width:1080px){
  .solo-d{display:inline}
  .solo-m{display:none}
  .k{font-size:12px;letter-spacing:.24em}
  .hdr{height:92px;padding:0 64px}
  .hdr__marca{font-size:26px;line-height:.9}
  .hdr__sel,.menu-salon,.chispas--movil{display:none}
  .hdr__salones{position:relative;display:flex;align-items:center;gap:8px}
  .hdr__salones .chispas{left:-30px;top:-26px;width:560px;height:92px}
  .hdr__salones .ch1{left:60px;top:4px;width:24px;height:24px;fill:var(--brand-soft)}
  .hdr__salones .ch2{left:300px;top:70px;width:16px;height:16px;fill:#fff}
  .hdr__salones .ch3{left:520px;top:10px;width:20px;height:20px;fill:var(--brand)}
  .hdr__lbl{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-soft);margin-right:6px}
  .hdr__salones .chip{height:42px;padding:0 18px;font-size:14px}
  .hdr__cta{display:flex;align-items:center;height:50px;padding:0 26px;background:#fff;border-radius:999px;color:var(--bg);font-weight:700;font-size:15px;text-decoration:none;transition:background .2s ease}
  .hdr__cta:hover{background:var(--brand-soft)}

  /* первый экран — композиция макета, масштаб от ширины окна до 1440 */
  .hero{height:calc(min(33.34vw,480px) * 1.4584 + min(8.34vw,120px));padding:0;background:radial-gradient(38% 55% at 68% 50%,rgba(213,8,113,.45),rgba(5,5,6,0) 70%)}
  .hero__k{position:absolute;left:64px;top:min(2.8vw,40px);margin:0}
  .hero__tit{position:absolute;left:56px;top:min(6.67vw,96px);margin:0}
  .hero__tit h1{font-size:min(13.34vw,192px);line-height:.8}
  .hero__guion{left:min(19vw,274px);top:min(.84vw,12px);font-size:min(8.2vw,118px)}
  .hero__foto{position:absolute;right:64px;top:min(2.8vw,40px);margin:0;width:min(33.34vw,480px);transform:rotate(2deg)}
  .hero__arco{aspect-ratio:480/700;border-radius:50% 50% 28px 28px/34.29% 34.29% 28px 28px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
  .hero__arco>*{clip-path:inset(0 round 50% 50% 28px 28px/34.29% 34.29% 28px 28px)}
  .hero__foto .e1{left:max(-6.3vw,-90px);top:min(5.5vw,80px);width:52px;height:52px}
  .hero__foto .e2{right:6px;top:min(3.5vw,50px);width:26px;height:26px}
  .insignia{left:auto;right:56px;bottom:min(1.4vw,20px);height:38px;padding:0 14px;font-size:13px;transform:rotate(-2deg)}
  .roll--insignia{height:18px;line-height:18px}
  .roll--insignia .roll__col{transform:translateY(calc(var(--salon,1) * -18px))}
  .roll--insignia .roll__col>span{height:18px}
  .hero__pie{position:absolute;left:64px;top:min(34.7vw,500px);width:min(34vw,460px);padding:0;gap:18px}
  .hero__pie p{font-size:min(1.25vw,18px);line-height:1.6}
  .hero__pie .btn-f{align-self:flex-start;min-height:60px;padding:0 34px;font-size:17px}

  .cinta{padding:30px 0}
  .cinta__banda{margin:0 -80px;padding:14px 0;transform:rotate(-1.5deg)}
  .cinta__mov span{font-size:28px;padding:0 24px}

  .cap{padding:90px 64px 40px}
  .cap__head{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:28px}
  .cap h2.guion{font-size:84px}
  .cap__head h2.guion{margin:0}
  .cap__sub{margin:0;font-size:28px}

  .invit{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:34px}
  .invit__c{gap:12px}
  .invit__c img{border-width:8px}
  .invit__c .guion{font-size:42px}
  .cap .nota{margin-top:34px;max-width:560px;font-size:15px}

  #vestido{padding-left:0;padding-right:0}
  #vestido .cap__head,#vestido .colores,#vestido .nota{margin-left:64px;margin-right:64px}
  .colores{gap:18px;margin-top:20px}
  .color{gap:8px;font-size:13px}
  .espejos{margin-top:30px;padding:0 64px;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px}
  .espejo{--off:10px;--estrella:24px}
  .espejo__luna{aspect-ratio:292/440;border-radius:50% 50% 16px 16px/33.18% 33.18% 16px 16px}
  .espejo__pie{margin-top:calc(var(--off) + 16px);font-size:20px}

  .cap--salon{padding-top:80px;display:grid;grid-template-columns:460px minmax(0,1fr);gap:64px;align-items:start}
  .cap--salon .cap__head{display:block}
  .cap--salon .cap__head h2{margin-top:2px}
  .cap--salon .cap__sub{margin-top:8px}
  .chips{flex-wrap:wrap;gap:8px;margin-top:24px}
  .chips .chip{height:42px;padding:0 16px;font-size:14px}
  .boleto{margin-top:0;border-radius:26px;padding:30px 34px 34px;column-gap:34px;transform:rotate(-1deg);
    grid-template-columns:minmax(0,1fr) min(23vw,330px);grid-template-areas:"txt mapa" "btns mapa"}
  .boleto__muesca{top:122px;width:32px;height:32px}
  .boleto__muesca--i{left:-16px}
  .boleto__muesca--d{right:-16px}
  .chispas--boleto .b1{left:6%;top:40px;width:34px;height:34px}
  .chispas--boleto .b3{left:53%;top:90px;width:46px;height:46px}
  .chispas--boleto .b4{left:41%;top:200px;width:24px;height:24px}
  .chispas--boleto .b5{left:15%;top:260px;width:28px;height:28px}
  .chispas--boleto .b6{left:88%;top:60px;width:38px;height:38px}
  .chispas--boleto .b7{left:80%;top:300px;width:18px;height:18px}
  .boleto__k{font-size:11px}
  .boleto__capa h3{margin-top:8px;font-size:46px}
  .boleto__corte{margin-top:26px;padding-top:18px}
  .boleto__dir{font-size:19px}
  .boleto__ref{margin-top:8px;font-size:16px;line-height:1.6}
  .boleto__horas{margin-top:12px;font-size:14px}
  .boleto__mapa{margin-top:0;align-self:end;border-radius:18px}
  .boleto__btns{margin-top:26px}
  .boleto__btns a{flex:0 0 auto;min-height:50px;padding:0 22px}

  .cap--noche{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .noche__num{gap:16px;margin-top:10px}
  .noche__num .bod{font-size:min(300px,20.8vw);line-height:.78}
  .noche__num .bodi{font-size:min(40px,2.8vw);padding-bottom:14px}
  .noche__txt{margin-top:22px;max-width:520px;font-size:17px}
  .pasos{margin:0;padding-left:34px}
  .pasos li{padding-bottom:34px}
  .pasos li::before{left:-44px;top:6px;width:18px;height:18px}
  .pasos .bodi{font-size:30px}
  .pasos p+p{margin-top:6px;font-size:16px;line-height:1.6}

  .cap--hada{padding-top:90px;grid-template-columns:420px minmax(0,1fr);column-gap:80px;align-content:center;
    grid-template-areas:"foto k" "foto h2" "foto num" "foto nombre" "foto cita" "foto datos"}
  .hada__foto{align-self:center;margin:0;width:400px;height:560px;border-width:4px;padding:14px}
  .hada__foto .h1s{right:-6px;top:40px;width:40px;height:40px}
  .hada__foto .h2s{left:10px;bottom:60px;width:22px;height:22px}
  .hada__txt>h2{font-size:84px}
  .hada__num{align-self:auto;padding:0;display:flex;align-items:baseline;gap:14px;margin-top:18px}
  .hada__num .bod{display:inline;font-size:96px}
  .hada__num .bodi{display:inline;max-width:none;margin:0;font-size:30px}
  .hada__nombre{margin-top:22px;font-size:60px}
  .hada__cita{margin-top:12px;max-width:620px;font-size:34px}
  .hada__datos{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:760px}
  .hada__datos li{display:block}
  .hada__datos li>span{display:block}
  .hada__datos li>span:first-child{font-size:30px}
  .hada__datos li>span.bodi{font-size:28px}
  .hada__datos li>span+span{margin-top:4px}

  .prensa{margin:70px max(64px,calc(50% - 656px)) 0;padding:26px 0;flex-direction:row;align-items:baseline;gap:28px}
  .prensa .bodi{font-size:24px}
  .fin{padding:110px 64px 70px;gap:18px}
  .fin__raya{width:72px}
  .fin .k{font-size:12px;letter-spacing:.36em}
  .fin__tit{font-size:40px}
  .fin__txt{max-width:560px;font-size:17px}
  .fin .btn-f{min-height:60px;padding:0 38px;font-size:17px}
  .pie{padding:20px 64px 56px;border-top:0}
  .pie__marca{font-size:36px;line-height:.9}
  .pie p{font-size:15px;line-height:1.9}
}

/* узкий компьютер: колонке с билетом не хватает места рядом с заголовком — ставим его под заголовок */
@media (min-width:1080px) and (max-width:1299px){
  .cap--salon{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .boleto{transform:rotate(-.6deg)}
  .boleto__capa h3{font-size:54px}
}

/* ------------------------------------------------ появление сайта --
   Как смена платья в зеркале: фото первого экрана проявляется из серебристой
   дымки, из него поднимается золотая пыльца, текст проступает из размытия.
   Работает только при классе ec-abre (его ставит скрипт в начале страницы). */
.hero__niebla{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(120% 85% at 50% 38%,rgba(212,208,226,.92),rgba(178,172,198,.85) 55%,rgba(138,130,160,.8))}
.hero__polvo{top:45%}
@keyframes ab-niebla{0%{opacity:.9;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{opacity:0}}
@keyframes ab-foto{0%{opacity:0;filter:blur(12px) brightness(1.35);transform:scale(1.04)}100%{opacity:1;filter:blur(0) brightness(1);transform:scale(1)}}
@keyframes ab-texto{0%{opacity:0;filter:blur(6px);transform:translateY(12px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes ab-guion{0%{opacity:0;filter:blur(6px);transform:rotate(-6deg) translateY(10px)}100%{opacity:1;filter:blur(0);transform:rotate(-6deg)}}
@keyframes ab-suave{0%{opacity:0}100%{opacity:1}}
.ec-abre .hero__niebla{animation:ab-niebla 1.4s .2s both}
.ec-abre .hero__arco img{animation:ab-foto 1.3s cubic-bezier(.33,0,.2,1) .25s both}
.ec-abre .hdr{animation:ab-suave .9s ease-out both}
.ec-abre .hero__k{animation:ab-texto .9s cubic-bezier(.33,0,.2,1) .1s both}
.ec-abre .hero__tit h1{animation:ab-texto 1.1s cubic-bezier(.33,0,.2,1) .2s both}
.ec-abre .hero__guion{animation:ab-guion 1s cubic-bezier(.33,0,.2,1) .7s both}
.ec-abre .hero__pie p{animation:ab-texto .9s cubic-bezier(.33,0,.2,1) .85s both}
.ec-abre .hero__pie .btn-f{animation:ab-texto .9s cubic-bezier(.33,0,.2,1) 1s both}
.ec-abre .hero__foto .estrella,.ec-abre .insignia{animation:ab-suave .8s ease-out 1.2s both}

@media (prefers-reduced-motion:reduce){
  .roll__col{transition:none}
  .es-polvo,.chispas{display:none}
}