/*
  Valeria Soto, maquillaje y estética
  Harmony: split-complementary. Base hue berry/aubergine (about 318 deg), split complements jade-mint (about 162 deg)
  and lime (about 72 deg), echoing the green eyeshadow, berry lips and golden skin in the photo shoot.
  60  --blush      #F7ECEC  page background (dominant)
  30  --aubergine  #3B1433  cover shade, calendar, footer, headings
      --petal      #EFDDE0  secondary surface
      --ink        #2A1024  body text   | --plum #6B4A60 secondary text
  10  --mint       #8FE0C6  accent on dark (buttons, marks) | --jade #0E6E5A accent on light
      --lime       #D4E86A  second split complement, used only for the "pocas horas" calendar state
  Contrast (WCAG): ink on blush 15.16, plum on blush 6.55, blush on aubergine 13.62, mint on aubergine 10.23,
  aubergine on mint (button text) 10.23, lime on aubergine 11.66, jade on blush 5.35, white on jade 6.18,
  #C9AFC0 on aubergine 7.78, jade on petal 4.74.
*/
:root {
  --blush: #F7ECEC;
  --petal: #EFDDE0;
  --aubergine: #3B1433;
  --ink: #2A1024;
  --plum: #6B4A60;
  --mauve: #C9AFC0;
  --mint: #8FE0C6;
  --jade: #0E6E5A;
  --lime: #D4E86A;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 80px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blush); color: var(--ink); font: 400 17px/1.65 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--jade); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }
.hidden { display: none; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--aubergine); color: var(--blush); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* top bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); color: var(--blush); transition: background .3s, padding .3s; }
.bar.is-solid { background: rgba(59, 20, 51, .96); padding-block: 12px; }
.bar__logo { font: italic 400 26px/1 var(--serif); color: var(--blush); text-decoration: none; opacity: 0; transition: opacity .3s; }
.bar.is-solid .bar__logo { opacity: 1; }
.bar__nav { display: flex; align-items: center; gap: 32px; }
.bar__nav a { color: var(--blush); text-decoration: none; font-weight: 600; font-size: 15px; }
.bar__nav a:hover { color: var(--mint); }
.bar__nav .bar__cta { background: var(--mint); color: var(--aubergine); padding: 11px 20px; border-radius: 999px; }
.bar__nav .bar__cta:hover { background: var(--blush); color: var(--aubergine); }
.bar__menu { display: none; }

/* cover */
.cover { position: relative; min-height: max(100svh, 700px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: 96px var(--pad) 56px; color: var(--blush); overflow: hidden; isolation: isolate; }
.cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%; z-index: -2; animation: settle 1.8s cubic-bezier(.2,.7,.2,1) both; }
.cover__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(59,20,51,.94) 0%, rgba(59,20,51,.82) 30%, rgba(59,20,51,.15) 62%, rgba(59,20,51,0) 80%), linear-gradient(0deg, rgba(59,20,51,.7), rgba(59,20,51,0) 35%); }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
.cover__issue { grid-column: 1 / -1; margin: 0; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 14px; }
.cover__issue::after { content: ""; height: 1px; width: 120px; background: var(--mauve); }
.cover__mast { grid-column: 1 / -1; align-self: center; font-style: italic; font-weight: 400; font-size: clamp(88px, 15.5vw, 250px); line-height: .82; letter-spacing: -.035em; color: var(--blush); margin: 12px 0 24px; text-shadow: 0 2px 30px rgba(59,20,51,.25); }
.cover__lines { grid-column: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 460px; }
.cover__lines a { display: block; color: var(--blush); text-decoration: none; font-size: 16px; line-height: 1.45; border-left: 2px solid var(--mint); padding-left: 16px; }
.cover__lines span { display: block; font: italic 500 27px/1.1 var(--serif); color: var(--mint); margin-bottom: 4px; }
.cover__lines a:hover span { color: var(--lime); }
.cover__cta { grid-column: 2; justify-self: end; align-self: end; display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--mint); color: var(--aubergine); font-weight: 700; text-decoration: none; }
.cover__cta:hover { background: var(--blush); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; }
.btn--jade { background: var(--jade); color: #fff; }
.btn--jade:hover { background: var(--aubergine); }
.btn--mint { background: var(--mint); color: var(--aubergine); }
.btn--mint:hover { background: var(--blush); }

/* carta */
.carta { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 100px); padding: clamp(80px, 10vw, 140px) var(--pad); }
.carta h2, .novias h2, .looks h2, .agenda h2 { font-size: clamp(52px, 7vw, 104px); color: var(--aubergine); letter-spacing: -.02em; font-style: italic; }
.carta__intro p { color: var(--plum); max-width: 40ch; margin: 24px 0 36px; }
.carta__intro img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 4px 120px 4px 4px; }
.carta__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px; align-content: start; padding-top: 24px; }
.menu-list h3 { font-size: 34px; color: var(--aubergine); padding-bottom: 14px; border-bottom: 2px solid var(--aubergine); }
.menu-list dl { margin: 0; }
.menu-list dl div { display: flex; align-items: baseline; gap: 12px; padding: 18px 0; border-bottom: 1px solid #DCC4CB; }
.menu-list dt { flex: 1; font-weight: 700; color: var(--ink); }
.menu-list dt small { display: block; font-weight: 400; font-size: 14px; color: var(--plum); }
.menu-list dd { margin: 0; font: 400 24px/1 var(--serif); color: var(--jade); }
.carta__note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--plum); }

/* novias */
.novias { display: grid; grid-template-columns: .85fr 1.15fr; background: var(--petal); }
.novias__photo img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.novias__body { padding: clamp(56px, 7vw, 110px) var(--pad); }
.novias__lede { color: var(--plum); max-width: 52ch; margin: 22px 0 40px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--aubergine); }
.pack { padding: 28px 24px 28px 0; position: relative; }
.pack + .pack { padding-left: 24px; border-left: 1px solid #D5B9C1; }
.pack h3 { font-size: 30px; font-style: italic; color: var(--aubergine); }
.pack__price { font: 400 40px/1 var(--serif); color: var(--jade); margin: 12px 0 18px; }
.pack ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--ink); }
.pack li { padding-left: 20px; position: relative; }
.pack li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--jade) inset; }
.pack--star { background: var(--aubergine); color: var(--blush); padding-right: 24px; }
.pack--star h3 { color: var(--blush); }
.pack--star .pack__price { color: var(--mint); }
.pack--star ul { color: var(--blush); }
.pack__tag { position: absolute; top: -14px; left: 24px; margin: 0; background: var(--lime); color: var(--aubergine); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.novias__pay { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.novias__pay p { margin: 0; max-width: 40ch; color: var(--plum); }

/* looks */
.looks { padding: clamp(80px, 10vw, 130px) 0 clamp(80px, 10vw, 130px) var(--pad); }
.looks__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; padding-right: var(--pad); margin-bottom: 40px; }
.looks__head p { margin: 0; max-width: 38ch; color: var(--plum); }
.looks__strip { list-style: none; margin: 0; padding: 0 var(--pad) 12px 0; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 24vw, 340px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--aubergine) transparent; }
.looks__strip li { scroll-snap-align: start; }
.looks__strip li:nth-child(even) { margin-top: 48px; }
.looks__strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 6px 6px; }
.looks__strip p { margin: 14px 0 0; font: italic 400 22px/1.2 var(--serif); color: var(--aubergine); }

/* agenda */
.agenda { background: var(--aubergine); color: var(--blush); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); padding: clamp(80px, 10vw, 130px) var(--pad); }
.agenda h2 { color: var(--blush); }
.agenda__hint { color: var(--mauve); max-width: 44ch; margin: 18px 0 32px; }
.cal { background: rgba(247, 236, 236, .06); border: 1px solid rgba(201, 175, 192, .3); border-radius: 24px; padding: 24px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal__month { margin: 0; font: italic 400 32px/1 var(--serif); text-transform: lowercase; }
.cal__month::first-letter { text-transform: uppercase; }
.cal__nav { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--mauve); background: transparent; color: var(--blush); font-size: 26px; line-height: 1; cursor: pointer; }
.cal__nav:hover { background: var(--mint); color: var(--aubergine); border-color: var(--mint); }
.cal__nav:disabled { opacity: .3; cursor: default; background: transparent; color: var(--blush); }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__dow span { text-align: center; font-size: 13px; color: var(--mauve); padding-bottom: 6px; }
.day { aspect-ratio: 1; min-height: 44px; border-radius: 14px; border: 0; font: 600 16px/1 var(--sans); cursor: pointer; position: relative; color: var(--aubergine); }
.day--free { background: var(--mint); }
.day--few { background: var(--lime); }
.day--full { background: transparent; color: var(--mauve); text-decoration: line-through; cursor: not-allowed; border: 1px dashed rgba(201,175,192,.4); }
.day--past { background: transparent; color: rgba(201,175,192,.45); cursor: default; }
.day--blank { visibility: hidden; }
.day.is-picked { outline: 3px solid var(--blush); outline-offset: 2px; }
.day--free:hover, .day--few:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cal__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0 0; padding: 0; font-size: 14px; color: var(--mauve); }
.cal__legend li { display: flex; align-items: center; gap: 8px; }
.k { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.k--free { background: var(--mint); } .k--few { background: var(--lime); } .k--full { border: 1px dashed var(--mauve); }
.cal__pick { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(201,175,192,.3); font: italic 400 22px/1.3 var(--serif); color: var(--blush); }
.book { background: var(--blush); color: var(--ink); border-radius: 28px; padding: clamp(24px, 3.5vw, 44px); display: grid; gap: 18px; align-self: start; }
.book h3 { font-size: 40px; font-style: italic; color: var(--aubergine); margin-bottom: 4px; }
.book label { display: grid; gap: 7px; font-size: 14px; font-weight: 700; color: var(--aubergine); }
.book .opt { font-weight: 400; color: var(--plum); }
.book input, .book select, .book textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #D6BDC6; background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.book input[readonly] { background: var(--petal); font-weight: 700; }
.book input:focus, .book select:focus, .book textarea:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(14,110,90,.2); }
.book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.book .btn--mint { background: var(--aubergine); color: var(--blush); justify-self: start; }
.book .btn--mint:hover { background: var(--jade); }
.book__ok { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--jade); color: #fff; }

/* footer */
.foot { background: var(--blush); padding: 64px var(--pad) 40px; text-align: center; }
.foot__logo { font: italic 400 clamp(56px, 9vw, 120px)/1 var(--serif); color: var(--aubergine); margin: 0 0 18px; letter-spacing: -.02em; }
.foot p { max-width: 60ch; margin: 0 auto 14px; color: var(--plum); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.foot__links a { color: var(--aubergine); font-weight: 700; }
.foot__credit { font-size: 14px; margin-top: 28px !important; }

@media (max-width: 1000px) {
  .carta, .novias, .agenda { grid-template-columns: 1fr; }
  .novias__photo img { min-height: 0; aspect-ratio: 4 / 3; height: auto; object-position: 50% 30%; }
  .packs { grid-template-columns: 1fr; }
  .pack, .pack + .pack { padding: 26px 22px; border-left: 0; border-bottom: 1px solid #D5B9C1; }
  .pack--star { border-radius: 0; }
}
@media (max-width: 760px) {
  .bar { background: rgba(59, 20, 51, .96); padding-block: 12px; }
  .bar__logo { opacity: 1; }
  .bar__menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--mauve); background: transparent; color: var(--blush); font: 700 15px/1 var(--sans); cursor: pointer; }
  .bar__nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--aubergine); padding: 8px var(--pad) 24px; display: none; }
  .bar__nav.is-open { display: flex; }
  .bar__nav a { padding: 15px 0; font-size: 18px; border-bottom: 1px solid rgba(201,175,192,.25); }
  .bar__nav .bar__cta { margin-top: 16px; text-align: center; border: 0; }
  .cover { grid-template-columns: 1fr; min-height: 780px; padding-top: 96px; }
  .cover__img { object-position: 64% 50%; }
  .cover__shade { background: linear-gradient(180deg, rgba(59,20,51,.55) 0%, rgba(59,20,51,.2) 35%, rgba(59,20,51,.85) 62%, rgba(59,20,51,.96) 100%); }
  .cover__mast { font-size: 25vw; align-self: start; margin-top: 24px; }
  .cover__lines { gap: 14px; }
  .cover__lines span { font-size: 23px; }
  .cover__cta { grid-column: 1; justify-self: stretch; justify-content: center; margin-top: 26px; }
  .carta__lists { grid-template-columns: 1fr; }
  .book__row { grid-template-columns: 1fr; }
  .looks__strip li:nth-child(even) { margin-top: 0; }
  .cal { padding: 16px; }
  .day { border-radius: 10px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}