body::after { content: ''; position: fixed; inset: 0; z-index: 4; pointer-events: none; background: url('assets/bsf-nailstudio-watermark.png') center / min(58vw, 760px) auto no-repeat; opacity: .05; mix-blend-mode: multiply; }
.header { z-index: 5; }
.hero-art { padding: 46px; }
.hero-art > img { width: min(92%, 430px); max-height: 360px; object-fit: contain; position: relative; z-index: 1; mix-blend-mode: multiply; }
.hero-art--beatriz { padding: 0; isolation: isolate; background: #d66c91; }
.hero-art--beatriz > img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 42%; mix-blend-mode: normal; filter: saturate(.92) contrast(1.03); }
.hero-art--beatriz::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(145deg, #c9457829, transparent 55%, #8f23421c); pointer-events: none; }
.section .eyebrow { font-size: 13px; letter-spacing: .15em; margin-bottom: 16px; }
.about { grid-template-columns: .9fr 1fr; gap: clamp(46px, 9vw, 160px); background: linear-gradient(110deg, #fff7f8 0%, #fffafb 58%, #fce5ed 100%); }
.about > div:nth-child(2) { align-self: center; max-width: 560px; font-size: 18px; line-height: 1.7; }
.how-it-works { grid-column: 1 / -1; max-width: none !important; margin-top: 18px; padding: 34px; border: 1px solid #efc4d3; border-radius: 8px; background: linear-gradient(135deg, #f8dce6, #fff8fa 65%); box-shadow: 0 15px 35px #7b284614; }
.how-it-works ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; gap: 18px; margin: 22px 0 0; counter-reset: step; }
.how-it-works li { display: flex; flex-direction: column; gap: 10px; min-height: 176px; padding: 21px 18px; color: var(--muted); background: #fffdfd; border: 1px solid #f0d6df; border-radius: 6px; line-height: 1.55; }
.how-it-works li::before { counter-increment: step; content: '0' counter(step); width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: white; font-size: 11px; font-weight: bold; letter-spacing: .05em; }
.how-it-works li b { color: var(--ink); font: 24px/1.1 Georgia, serif; }
.gallery--portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 210px 240px; grid-auto-rows: 210px; gap: 16px; }
.gallery--portfolio figure { position: relative; min-width: 0; margin: 0; overflow: hidden; border-radius: 6px; background: #e7a0b8; }
.gallery--portfolio figure::after { content: ''; position: absolute; top: 12px; right: 12px; z-index: 2; width: 86px; aspect-ratio: 1120 / 650; background: url('assets/bsf-nail-studio-logo-cropped.png') center / contain no-repeat; opacity: .28; mix-blend-mode: multiply; pointer-events: none; }
.gallery--portfolio figure:first-child { grid-row: span 2; }
.gallery--portfolio figure:nth-child(5), .gallery--portfolio figure:nth-child(6) { grid-row: span 2; }
.portfolio-item { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; text-align: left; }
.gallery--portfolio img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.gallery--portfolio figure:first-child img { object-position: 50% 46%; }
.gallery--portfolio figure:hover img, .portfolio-item:focus-visible img { transform: scale(1.045); }
.portfolio-item span { position: absolute; right: 0; bottom: 0; left: 0; padding: 28px 17px 15px; color: #fff; font-size: 12px; font-weight: bold; letter-spacing: .09em; text-transform: uppercase; background: linear-gradient(transparent, #38232ecc); }
.portfolio-item:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; }
.portfolio-lightbox { width: fit-content; max-width: 92vw; max-height: 92vh; margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 8px; background: transparent; color: #fff; }
.portfolio-lightbox::backdrop { background: #24151ee6; backdrop-filter: blur(5px); }
.portfolio-lightbox figure { position: relative; display: grid; gap: 12px; margin: 0; }
.portfolio-lightbox figure::after { content: ''; position: absolute; top: 14px; right: 14px; z-index: 1; width: 110px; aspect-ratio: 1120 / 650; background: url('assets/bsf-nail-studio-logo-cropped.png') center / contain no-repeat; opacity: .34; mix-blend-mode: multiply; pointer-events: none; }
.portfolio-lightbox img { display: block; width: auto; max-width: 92vw; max-height: 78vh; border-radius: 6px; background: #fff; }
.portfolio-lightbox figcaption { padding: 0 8px; color: #fff; font-size: 14px; font-weight: bold; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.portfolio-lightbox__close { position: absolute; top: -13px; right: -13px; z-index: 3; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #ffffffa8; border-radius: 50%; background: #3a2330; color: #fff; font: 28px/1 Arial, sans-serif; cursor: pointer; }
.portfolio-lightbox__close:hover, .portfolio-lightbox__close:focus-visible { background: var(--pink); }
.faq-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 24px; }
.faq > .section-title h2 { font-size: clamp(48px, 5.6vw, 70px); }
.faq h3 { font-size: 31px; margin: 0 0 14px; }
.faq details { border-top: 1px solid var(--line); padding: 15px 0; }
.faq summary { cursor: pointer; font-size: 16px; font-weight: bold; padding-right: 25px; }
.faq details p { color: var(--muted); font-size: 15px; margin: 12px 0 0; }
.whatsapp-cta { grid-column: 2; background: #fff0f5; color: var(--ink); padding: 25px; border-radius: 6px; align-self: start; margin-top: -42px; }
.whatsapp-cta h3 { font-size: 28px; }
.whatsapp-cta p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.contacts { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; background: var(--wash); }
.contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contact-list > * { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: 'icon label' 'icon value'; align-items: center; column-gap: 12px; row-gap: 3px; padding: 22px; background: #fff; color: var(--ink); text-decoration: none; }
.contact-icon { grid-area: icon; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff0f5; color: var(--pink); }
.contact-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-list small { grid-area: label; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.contact-list b { grid-area: value; font: 19px Georgia, serif; }
.mobile-booking-cta { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: 86px; }
  .mobile-booking-cta {
    position: fixed;
    right: 16px;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 16px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 13px 20px;
    border-radius: 99px;
    background: var(--pink);
    box-shadow: 0 10px 24px #7b28465c;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
  }
  .mobile-booking-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}
@media (max-width: 760px) {
  body::after { background-size: min(100vw, 560px) auto; opacity: .025; }
  .about, .contacts { grid-template-columns: 1fr; }
  .how-it-works { padding: 25px 18px; }
  .how-it-works ol, .faq-groups, .contact-list { grid-template-columns: 1fr; }
  .how-it-works li { min-height: 0; }
  .gallery--portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 180px 180px 205px; grid-auto-rows: 180px; gap: 10px; }
  .whatsapp-cta { grid-column: auto; margin-top: -15px; }
  .hero { min-height: 0; }
  .hero > div:first-child { padding: 44px 25px 34px; }
  .hero h1 { font-size: clamp(43px, 12vw, 54px); }
  .hero p { margin: 18px 0 23px; font-size: 16px; }
  .header nav .pill, .hero > div:first-child > .pill { display: none; }
  .hero-art { order: 1; min-height: 290px; }
  .hero-art > img { max-height: 300px; }
  .hero-art--beatriz > img { max-height: none; }
}