/* ═══════════════════════════════════════════════════════════
   AGO BEAUTY — style.css
   Design: Warm Editorial Luxury
   Fonts: Cormorant Garamond + Plus Jakarta Sans
   ═══════════════════════════════════════════════════════════ */

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  /* Brand palette */
  --brand:         #e2b59e;
  --brand-light:   #f0d5c8;
  --brand-lighter: #fdf0e8;
  --brand-dark:    #c49280;

  /* Neutrals */
  --espresso:      #2a1a14;
  --espresso-mid:  #5c3a2c;
  --rust:          #a8725a;
  --cream:         #faf5f0;
  --blush:         #f5ede6;
  --white:         #ffffff;

  /* Typography */
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Scale */
  --text-xs:   clamp(0.72rem,  0.68rem + 0.2vw,  0.82rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.27vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem   + 0.6vw,  1.4rem);
  --text-xl:   clamp(1.5rem,   1.2rem + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2.25rem,  1.6rem + 3.2vw,  4rem);
  --text-hero: clamp(2.75rem,  1.8rem + 4.7vw,  5.5rem);

  /* Spacing */
  --gap-sm:      1rem;
  --gap-md:      2rem;
  --gap-lg:      3.5rem;
  --section-pad: clamp(5rem, 3.5rem + 7vw, 9rem);
  --page-pad:    clamp(1.25rem, 4vw, 2.5rem);
  --max-w:       1160px;

  /* Effects */
  --shadow-sm:   0 2px 12px rgba(42,26,20,.07);
  --shadow-md:   0 6px 28px rgba(42,26,20,.11);
  --shadow-lg:   0 14px 48px rgba(42,26,20,.16);
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-full: 9999px;

  /* Motion */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  150ms;
  --dur-mid:   280ms;
  --dur-slow:  560ms;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--espresso);
  background: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ─── Scroll-Reveal System ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  0.72s var(--ease-expo),
    transform 0.72s var(--ease-expo);
}
.reveal[data-delay="1"] { transition-delay: 120ms; }
.reveal[data-delay="2"] { transition-delay: 220ms; }
.reveal[data-delay="3"] { transition-delay: 320ms; }
.reveal.in-view { opacity: 1; transform: none; }

/* ─── Navigation ─────────────────────────────────────────── */
#site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  transition: background var(--dur-mid), box-shadow var(--dur-mid), backdrop-filter var(--dur-mid);
}
#site-header.scrolled {
  background: rgba(250, 245, 240, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(42,26,20,.09);
}

.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.2rem var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo img {
  width: 36px;
  height: auto;
  /* Invert white transparent PNG → dark mark on light backgrounds */
  filter: brightness(0) saturate(1);
  transition: opacity var(--dur-mid);
}
.nav-logo:hover img { opacity: 0.7; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--espresso);
  letter-spacing: .02em;
  transition: color var(--dur-fast);
}
.nav-links a:hover { color: var(--rust); }
.nav-links a.active { color: var(--rust); }

.nav-cta {
  background: var(--espresso);
  color: var(--cream) !important;
  padding: .58rem 1.5rem;
  border-radius: var(--radius-full);
  transition: background var(--dur-mid) var(--ease-expo), transform var(--dur-fast) !important;
}
.nav-cta:hover {
  background: var(--rust) !important;
  transform: translateY(-1px) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 201;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--espresso);
  border-radius: 2px;
  transition: transform var(--dur-mid), opacity var(--dur-fast);
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: translateX(6px); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ─── Hero ────────────────────────────────────────────────── */
#hero {
  min-height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
}

.hero-bg-shape {
  position: absolute;
  top: 0; right: 0;
  width: 52%;
  height: 100%;
  background: var(--brand-lighter);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  flex: 1;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem var(--page-pad) 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Hero Text */
.hero-content { padding-right: 1.5rem; }

.hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .6s var(--ease-expo) .15s forwards;
}

#hero h1 {
  font-family: var(--serif);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 0.78;
  letter-spacing: -0.01em;
  color: var(--espresso);
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp .8s var(--ease-expo) .28s forwards;
}
#hero h1 em { font-style: italic; color: var(--rust); }

.hero-sub {
  font-size: var(--text-base);
  color: var(--espresso-mid);
  max-width: 44ch;
  margin-bottom: 2.25rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .6s var(--ease-expo) .44s forwards;
}

.hero-actions {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
  opacity: 0;
  animation: fadeUp .6s var(--ease-expo) .56s forwards;
}

.hero-contact-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .6s var(--ease-expo) .7s forwards;
}
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--espresso);
  transition: color var(--dur-fast);
}
.hero-link:hover { color: var(--rust); }

/* Hero Visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  animation: fadeUp 1s var(--ease-expo) .36s forwards;
}

/* Wrapper hosts the decorative outer rings (can't use ::before on overflow:hidden frame) */
.hero-photo-wrap {
  position: relative;
  display: inline-block;
  z-index: 0;
}

/* Decorative outer circular rings */
.hero-photo-wrap::before,
.hero-photo-wrap::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hero-photo-wrap::before {
  width: 408px;
  height: 408px;
  border: 1.5px solid var(--brand);
  opacity: 0.55;
}
.hero-photo-wrap::after {
  width: 444px;
  height: 444px;
  border: 1px dashed var(--brand-light);
  opacity: 0.4;
}

/* Circular frame — clips photo into a perfect circle */
.hero-photo-frame {
  position: relative;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  /* White gap + brand ring + shadow */
  box-shadow:
    0 0 0 5px var(--cream),
    0 0 0 12px var(--brand),
    0 28px 56px rgba(42, 26, 20, 0.22);
  z-index: 1;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  display: block;
}

.hero-float-card {
  position: absolute;
  bottom: 2.5rem;
  right: -2rem;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-md);
  text-align: center;
  min-width: 130px;
  z-index: 2;
}
.float-stars {
  display: block;
  font-size: .8rem;
  color: var(--brand-dark);
  letter-spacing: .08em;
  margin-bottom: .3rem;
}
.float-label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--espresso-mid);
  line-height: 1.4;
}

.hero-float-tag {
  position: absolute;
  top: 2rem;
  left: -1.5rem;
  background: var(--brand);
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  z-index: 2;
}
.hero-float-tag span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: .75;
}
.hero-float-tag strong {
  font-size: .78rem;
  font-weight: 700;
  color: var(--espresso);
}

/* Scroll Hint */
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 2;
  opacity: 0;
  animation: fadeIn .6s var(--ease-expo) 1.2s forwards;
}
.scroll-hint-text {
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rust);
}
.scroll-hint-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--rust), transparent);
  animation: pulseY 2.2s ease-in-out infinite;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  padding: .82rem 1.9rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .03em;
  transition: all var(--dur-mid) var(--ease-expo);
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--espresso);
  color: var(--cream);
  border-color: var(--espresso);
}
.btn-primary:hover {
  background: var(--rust);
  border-color: var(--rust);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(42,26,20,.24);
}
.btn-ghost {
  background: transparent;
  color: var(--espresso);
  border-color: var(--espresso);
}
.btn-ghost:hover {
  background: var(--espresso);
  color: var(--cream);
  transform: translateY(-2px);
}
.btn-dark {
  background: var(--espresso);
  color: var(--cream);
}
.btn-dark:hover {
  background: var(--rust);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(42,26,20,.3);
}

/* ─── Services Strip ─────────────────────────────────────── */
.services-strip {
  background: var(--espresso);
  padding: 1.1rem 0;
  overflow: hidden;
}
.strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.strip-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--cream);
  white-space: nowrap;
}
.strip-item .dot { color: var(--brand); font-size: .7rem; }
.strip-sep { color: var(--brand); opacity: .45; font-size: .75rem; }

/* ─── Section Shared ─────────────────────────────────────── */
section { padding: var(--section-pad) 0; }
.bg-blush { background: var(--blush); }

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.section-header {
  text-align: center;
  margin-bottom: var(--gap-lg);
}
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: .65rem;
}
.section-header h2 {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--espresso);
  line-height: 1.12;
  margin-bottom: .9rem;
}
.section-lead {
  font-size: var(--text-base);
  color: var(--espresso-mid);
  max-width: 56ch;
  margin: 0 auto;
}

/* ─── Facial Cards ────────────────────────────────────────── */
#faciales { background: var(--cream); }

.faciales-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.facial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-mid) var(--ease-expo),
    box-shadow var(--dur-mid);
}
.facial-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}

.card-pill {
  position: absolute;
  top: -0.8rem;
  left: 1.5rem;
  background: var(--brand);
  color: var(--espresso);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .28rem .9rem;
  border-radius: var(--radius-full);
}
.card-pill-dark {
  background: var(--espresso);
  color: var(--cream);
}

.card-hero {
  border: 2px solid var(--brand);
}

.card-body { flex: 1; }
.card-body h3 {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--espresso);
  margin-bottom: .6rem;
  line-height: 1.2;
}
.card-body > p {
  font-size: var(--text-sm);
  color: var(--espresso-mid);
  margin-bottom: 1.1rem;
  line-height: 1.65;
}

.card-list {
  list-style: none;
  margin-bottom: .9rem;
}
.card-list li {
  font-size: var(--text-sm);
  color: var(--espresso);
  padding: .3rem 0 .3rem 1.4rem;
  border-bottom: 1px solid var(--brand-lighter);
  position: relative;
}
.card-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand-dark);
  font-size: .75rem;
  font-weight: 700;
}

.card-result-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rust);
  margin-top: .9rem;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--blush);
}
.card-price {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1;
}
.card-cta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--espresso);
  transition: color var(--dur-fast), letter-spacing var(--dur-mid);
}
.card-cta:hover {
  color: var(--rust);
  letter-spacing: .14em;
}

/* ─── Treatment Cards ────────────────────────────────────── */
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.treatment-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-mid) var(--ease-expo),
    box-shadow var(--dur-mid);
}
.treatment-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.treatment-tag {
  display: inline-block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: .65rem;
}
.treatment-card h3 {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--espresso);
  margin-bottom: .6rem;
  line-height: 1.2;
}
.treatment-card > p {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--espresso-mid);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.treatment-card > p em { color: var(--rust); font-style: italic; }

.treatment-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--blush);
}
.treatment-price {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--espresso);
}
.treatment-cta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--espresso);
  transition: color var(--dur-fast);
}
.treatment-cta:hover { color: var(--rust); }

/* ─── Especialidades ─────────────────────────────────────── */
#especialidades { background: var(--cream); }

/* HydraLips block */
.hydralips-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3.5rem;
  align-items: center;
  background: var(--brand);
  border-radius: var(--radius-xl);
  padding: 3rem 3.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}
.hydralips-block::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}

.hl-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--espresso-mid);
  margin-bottom: .5rem;
  opacity: .8;
}
.hydralips-left h3 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--espresso);
  line-height: 1.05;
  margin-bottom: .6rem;
}
.hydralips-left > p {
  font-size: var(--text-base);
  color: var(--espresso);
  max-width: 46ch;
  margin-bottom: 1rem;
  line-height: 1.65;
}

.hl-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  list-style: none;
}
.hl-list li {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--espresso);
  background: rgba(255,255,255,.3);
  padding: .3rem .8rem;
  border-radius: var(--radius-full);
}

.hydralips-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.hl-price-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.hl-price {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1;
}
.hl-sub {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--espresso-mid);
}

.promo-badge {
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--radius-md);
  padding: .75rem 1.25rem;
  text-align: center;
}
.promo-pct {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--brand-light);
  line-height: 1;
}
.promo-copy {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  margin-top: .2rem;
  opacity: .8;
}

/* Specialty duo */
.specialties-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.specialty-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease-expo), box-shadow var(--dur-mid);
}
.specialty-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.specialty-icon {
  font-size: 1.6rem;
  color: var(--brand-dark);
  line-height: 1;
  flex-shrink: 0;
  margin-top: .2rem;
}
.specialty-card h3 {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--espresso);
  margin-bottom: .5rem;
}
.specialty-card > div > p {
  font-size: var(--text-sm);
  color: var(--espresso-mid);
  line-height: 1.65;
}
.specialty-price {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--espresso);
  line-height: 1;
  align-self: flex-end;
}

/* ─── Add-ons ─────────────────────────────────────────────── */
.addons-section {}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.addon-item {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform var(--dur-mid) var(--ease-expo), box-shadow var(--dur-mid);
}
.addon-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.addon-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--espresso);
}
.addon-price {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--rust);
  line-height: 1;
}

/* ─── About ───────────────────────────────────────────────── */
#sobre-mi { background: var(--cream); }

.about-inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 5rem;
  align-items: center;
}

.about-photo-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Decorative outer square rings — drawn on the column wrapper */
.about-photo-col::before,
.about-photo-col::after {
  content: '';
  position: absolute;
  border-radius: 20px;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about-photo-col::before {
  width: 352px;
  height: 492px;
  border: 1.5px solid var(--brand);
  opacity: 0.55;
}
.about-photo-col::after {
  width: 380px;
  height: 520px;
  border: 1px dashed var(--brand-light);
  opacity: 0.4;
}

/* Square frame — clips photo into a rounded rectangle */
.about-photo-frame {
  position: relative;
  width: 320px;
  max-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  border-radius: 12px;
  flex-shrink: 0;
  /* White gap + brand ring + soft shadow */
  box-shadow:
    0 0 0 5px var(--cream),
    0 0 0 12px var(--brand),
    0 28px 56px rgba(42, 26, 20, 0.22);
  z-index: 1;
}

.about-photo {
  width: 100%;
  height: auto;
  display: block;
  filter: none;
}

.about-accent-box {
  position: absolute;
  bottom: calc(50% - 280px - 1rem); /* align to bottom edge of rectangle */
  right: calc(50% - 160px - 4rem);
  background: var(--brand);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.4;
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.about-text-col h2 {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--espresso);
  margin-bottom: .3rem;
}
.about-subtitle {
  font-family: var(--serif);
  font-size: var(--text-lg);
  color: var(--rust);
  font-style: italic;
  margin-bottom: 1.5rem;
}
.about-text-col > p {
  font-size: var(--text-base);
  color: var(--espresso-mid);
  margin-bottom: 1rem;
}

.about-quote {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--espresso);
  padding-left: 1.5rem;
  border-left: 3px solid var(--brand);
  margin: 1.75rem 0;
  line-height: 1.5;
}

.about-stats {
  display: flex;
  gap: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--brand-light);
  flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; gap: .2rem; }
.stat strong {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--espresso);
  line-height: 1;
}
.stat span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--espresso-mid);
}

/* ─── CTA Section ─────────────────────────────────────────── */
.cta-section {
  background: var(--espresso);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-noise {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(226,181,158,.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(226,181,158,.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  position: relative;
  z-index: 1;
}

.cta-logo-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* White PNG on dark bg — shows naturally; add soft glow */
.cta-logo-badge img {
  width: 100%;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 2px 8px rgba(226, 181, 158, 0.4));
}

.cta-eyebrow { color: var(--brand); }

.cta-inner h2 {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.cta-sub {
  font-size: var(--text-base);
  color: rgba(250,245,240,.65);
  margin-bottom: 2.5rem;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--brand);
  color: var(--espresso);
  padding: 1rem 2.25rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: .02em;
  transition: all var(--dur-mid) var(--ease-expo);
}
.cta-btn:hover {
  background: var(--brand-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(226,181,158,.4);
}
.cta-btn-outline {
  background: transparent;
  color: var(--cream);
  border: 2px solid rgba(250,245,240,.25);
}
.cta-btn-outline:hover {
  background: rgba(250,245,240,.1);
  border-color: var(--brand);
  color: var(--brand-light);
  box-shadow: none;
}

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--espresso);
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.footer-logo {
  margin: 0 auto .85rem;
  height: 28px;
  width: auto;
  opacity: 0.75;
  /* White PNG on espresso bg — shows naturally */
}
.footer-tagline {
  font-family: var(--serif);
  font-size: var(--text-base);
  color: rgba(250,245,240,.5);
  margin-bottom: 1.1rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.1rem;
  font-size: var(--text-sm);
}
.footer-links a {
  color: var(--brand);
  font-weight: 500;
  transition: color var(--dur-fast);
}
.footer-links a:hover { color: var(--brand-light); }
.footer-links span { color: rgba(250,245,240,.3); }
.footer-copy {
  font-size: var(--text-xs);
  color: rgba(250,245,240,.28);
  letter-spacing: .04em;
}

/* ─── Keyframes ───────────────────────────────────────────── */
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes pulseY {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%       { transform: scaleY(.4); opacity: .4; }
}

/* ─── Responsive — 1024px ────────────────────────────────── */
@media (max-width: 1080px) {
  .faciales-grid { grid-template-columns: 1fr 1fr; }
  .faciales-grid > :last-child { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; width: 100%; }
  .treatments-grid { grid-template-columns: 1fr 1fr; }
  .addons-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-photo-wrap::before { width: 368px; height: 368px; }
  .hero-photo-wrap::after  { width: 400px; height: 400px; }
  .hero-photo-frame { width: 300px; height: 300px; }
  .hero-float-card { right: -1rem; }
  .hero-float-tag { left: -.75rem; }
}

/* ─── Responsive — 768px ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Nav mobile */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(250,245,240,.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 190;
  }
  #site-header { z-index: 200; }
  .nav-toggle { position: relative; z-index: 201; }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: var(--text-xl); }
  .nav-cta { padding: .8rem 2.5rem; }

  /* Hero */
  .hero-bg-shape {
    width: 100%;
    clip-path: none;
    height: 45%;
    top: auto;
    bottom: 0;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 6.5rem;
    padding-bottom: 3rem;
    gap: 2.5rem;
    text-align: center;
  }
  .hero-content { padding-right: 0; order: 2; }
  .hero-visual { order: 1; justify-content: center; }
  .hero-sub { margin-inline: auto; }
  .hero-actions, .hero-contact-row { justify-content: center; }
  .hero-photo-wrap::before { width: 302px; height: 302px; }
  .hero-photo-wrap::after  { width: 328px; height: 328px; }
  .hero-photo-frame { width: 250px; height: 250px; }
  .hero-float-card { right: 0; bottom: 1.25rem; }
  .hero-float-tag { left: 0; top: 1.25rem; }

  /* Sections */
  .faciales-grid { grid-template-columns: 1fr; }
  .faciales-grid > :last-child { max-width: 100%; }
  .treatments-grid { grid-template-columns: 1fr; }

  .hydralips-block {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
    text-align: center;
  }
  .hydralips-left > p { margin-inline: auto; }
  .hl-list { justify-content: center; }

  .specialties-duo { grid-template-columns: 1fr; }
  .specialty-card { flex-direction: column; }
  .specialty-price { align-self: flex-start; }

  .about-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-photo-col { max-width: 100%; margin: 0 auto; }
  .about-photo-col::before { width: 292px; height: 392px; }
  .about-photo-col::after  { width: 320px; height: 420px; }
  .about-photo-frame { width: 260px; max-height: 460px; }
  .about-accent-box {
    bottom: calc(50% - 230px - 0.5rem);
    right: calc(50% - 130px - 3rem);
    font-size: var(--text-xs);
  }

  .strip-sep { display: none; }
}

/* ─── Responsive — 480px ─────────────────────────────────── */
@media (max-width: 480px) {
  .hero-photo-frame { width: 200px; height: 200px; }
  .addons-grid { grid-template-columns: 1fr 1fr; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-btn { width: 100%; justify-content: center; max-width: 320px; }
  .about-stats { gap: 1.25rem; }
  .hero-float-card, .hero-float-tag { display: none; }
}

/* ─── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-eyebrow, #hero h1, .hero-sub,
  .hero-actions, .hero-contact-row, .hero-visual,
  .scroll-hint {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-hint-line { animation: none; }
  html { scroll-behavior: auto; }
}