/* ============================================================
   KAZZO TATTOO — style.css
   Design system: Motion-Driven · Bodoni Moda + DM Sans
   Colors: Studio wall blue #252B3F · Gold #C9A030
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Syne:wght@600;700;800&display=swap');

/* ── CSS Variables ── */
:root {
  /* Brand colors */
  --hero-bg:       #252B3F;
  --hero-bg-2:     #1D2133;
  --gold:          #C9A030;
  --gold-light:    #E2BB55;
  --gold-dim:      rgba(201,160,48,.14);
  --gold-glow:     rgba(201,160,48,.22);

  /* Light palette */
  --bg:            #FAFAF8;
  --bg-alt:        #F3F1EC;
  --surface:       #FFFFFF;
  --border:        #E5E2DB;
  --border-dark:   #D4CECC;

  /* Text */
  --txt-100:       #1C1917;
  --txt-70:        #44403C;
  --txt-40:        #A8A29E;
  --white:         #FFFFFF;
  --white-90:      rgba(255,255,255,.9);
  --white-60:      rgba(255,255,255,.6);
  --white-20:      rgba(255,255,255,.15);

  /* Radius */
  --r-sm:          6px;
  --r-md:          12px;
  --r-lg:          20px;
  --r-xl:          28px;
  --r-pill:        999px;

  /* Shadows */
  --shadow-sm:     0 1px 4px rgba(0,0,0,.07);
  --shadow-md:     0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.14);
  --shadow-gold:   0 8px 32px rgba(201,160,48,.25);

  /* Typography */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-label:    'Syne', sans-serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  /* Motion */
  --ease:          cubic-bezier(.23,1,.32,1);
  --ease-out:      cubic-bezier(0,0,.2,1);
  --dur-fast:      150ms;
  --dur-base:      260ms;
  --dur-slow:      400ms;
  --dur-reveal:    600ms;

  /* Layout */
  --nav-h:         72px;
  --max-w:         1360px;
  --gutter:        clamp(16px,4vw,56px);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  font-size:16px;
  overflow-x:hidden; /* prevents iOS body-overflow bypass */
}
body {
  font-family: var(--font-body);
  color: var(--txt-100);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width:100vw;
}
img { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none }
button { cursor:pointer; font:inherit; border:none; background:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:600; line-height:1.15 }

/* ── Scroll reveals ── */
[data-reveal] {
  opacity:0;
  transform:translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].anim--in { opacity:1; transform:translateY(0) }
.no-js [data-reveal] { opacity:1; transform:none }
@media (prefers-reduced-motion:reduce) {
  [data-reveal] { transition:none }
  * { animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ── Utility ── */
.container {
  width:100%;
  max-width: var(--max-w);
  margin-inline:auto;
  padding-inline: var(--gutter);
  min-width:0;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.text-gold { color: var(--gold) }
.section-label {
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content:'';
  display:block;
  width:24px; height:1.5px;
  background:var(--gold);
  flex-shrink:0;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: all var(--dur-base) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--gold);
  color: var(--hero-bg-2);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { background: var(--gold-light); transform:translateY(-2px); box-shadow:0 12px 40px rgba(201,160,48,.35) }
.btn-primary:active { transform:translateY(0) }

.btn-outline-white {
  border: 1.5px solid var(--white-60);
  color: var(--white);
  background: transparent;
}
.btn-outline-white:hover { border-color:var(--white); background:var(--white-20) }

.btn-outline-dark {
  border: 1.5px solid var(--border-dark);
  color: var(--txt-70);
  background: transparent;
}
.btn-outline-dark:hover { border-color:var(--txt-100); color:var(--txt-100) }

/* ── Pill badges (generic, used in style pages) ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--txt-70);
}
.pill-dot {
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}

/* ── Hero credential tags (editorial / slash style) ── */
.hero-creds {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeUp .55s var(--ease) .65s forwards;
}
.hero-cred {
  font-family: var(--font-label);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white-60);
  padding: 0 18px;
  position: relative;
  white-space: nowrap;
  transition: color .2s;
}
.hero-cred::before {
  content: '/';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  opacity: .75;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .9rem;
  font-weight: 400;
}
.hero-cred:first-child {
  padding-left: 0;
}
.hero-cred:first-child::before { display: none }

/* ── Hero pill — gold italic with soft ember glow ── */
.hero-cred--underline {
  color: var(--gold);
  font-style: italic;
  animation: pillEmber 4s ease-in-out infinite alternate;
}

/* Stagger each pill so they pulse independently */
.hero-creds .hero-cred--underline:nth-child(1) { animation-delay: 0s }
.hero-creds .hero-cred--underline:nth-child(2) { animation-delay: 1.3s }
.hero-creds .hero-cred--underline:nth-child(3) { animation-delay: 2.6s }

@keyframes pillEmber {
  from {
    color: var(--gold);
    text-shadow: none;
  }
  to {
    color: var(--gold-light);
    text-shadow: 0 0 10px rgba(201,160,48,.45), 0 0 20px rgba(201,160,48,.18);
  }
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
/* Container must fill the full nav height for vertical centering to work */
.nav .container {
  height: 100%;
}
.nav.scrolled {
  background: rgba(25,27,40,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.nav-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: .01em;
  transition: opacity var(--dur-fast);
  flex-shrink:0;
}
.nav-logo span { color:var(--gold) }
.nav-logo:hover { opacity:.85 }

.nav-links {
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-links a {
  font-size:.875rem;
  font-weight:500;
  color:var(--white-60);
  padding:8px 14px;
  border-radius:var(--r-sm);
  transition:color var(--dur-fast), background var(--dur-fast);
}
.nav-links a:hover { color:var(--white); background:var(--white-20) }
.nav-links a.active { color:var(--gold) }

.nav-cta { flex-shrink:0 }
.nav-cta .btn { padding:10px 22px; font-size:.875rem }

/* Mobile nav */
.nav-burger {
  display:none;
  flex-direction:column;
  gap:5px;
  width:32px; height:32px;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm);
  transition:background var(--dur-fast);
}
.nav-burger:hover { background:var(--white-20) }
.nav-burger span {
  display:block;
  width:20px; height:1.5px;
  background:var(--white);
  border-radius:4px;
  transition:transform var(--dur-base) var(--ease), opacity var(--dur-base);
}
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.nav-burger.open span:nth-child(2) { opacity:0 }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

.nav-mobile {
  position:fixed;
  inset:var(--nav-h) 0 0 0;
  background: rgba(25,27,40,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:32px var(--gutter);
  flex-direction:column;
  gap:8px;
  z-index:99;
  overflow-y:auto;
  /* Slide-in animation */
  display:flex;
  opacity:0;
  transform:translateY(-12px);
  pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.nav-mobile.open {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
/* Stagger each menu link */
.nav-mobile a,
.nav-mobile .btn {
  opacity:0;
  transform:translateX(-10px);
  transition:color var(--dur-fast), background var(--dur-fast),
             opacity .22s var(--ease), transform .22s var(--ease);
}
.nav-mobile.open a:nth-child(1) { opacity:1; transform:none; transition-delay:.06s }
.nav-mobile.open a:nth-child(2) { opacity:1; transform:none; transition-delay:.10s }
.nav-mobile.open a:nth-child(3) { opacity:1; transform:none; transition-delay:.14s }
.nav-mobile.open a:nth-child(4) { opacity:1; transform:none; transition-delay:.18s }
.nav-mobile.open a:nth-child(5) { opacity:1; transform:none; transition-delay:.22s }
.nav-mobile.open .btn            { opacity:1; transform:none; transition-delay:.28s }
.nav-mobile a:hover { color:var(--white); background:var(--white-20) }
.nav-mobile a {
  font-size:1.125rem;
  font-weight:500;
  color:var(--white-60);
  padding:14px 16px;
  border-radius:var(--r-md);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav-mobile .btn { margin-top:16px; justify-content:center }

/* ── HERO ── */
.hero {
  position:relative;
  min-height:100svh;
  background: var(--hero-bg);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top: var(--nav-h);
}

/* Cursor glow */
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(
    600px circle at var(--cx, 50%) var(--cy, 40%),
    rgba(201,160,48,.09) 0%,
    transparent 65%
  );
  pointer-events:none;
  transition: background 0.15s;
}

/* Subtle noise grain overlay */
.hero::after {
  content:'';
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:256px;
  pointer-events:none;
  opacity:.6;
}

/* (hero-fade removed — trust bar is now dark, transition is seamless) */

.hero-inner {
  position:relative;
  z-index:3;
  width:100%;
  min-width:0; /* prevents flex children from overflowing */
  padding:80px 0 100px;
}

/* Hero grid: text left, image right */
.hero-grid {
  display:grid;
  grid-template-columns: 1fr min(480px, 40vw);
  gap:80px;
  align-items:center;
  min-width:0;
}

.hero-text { min-width:0; overflow:hidden }

.hero-overline {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  opacity:0;
  transform:translateY(12px);
  animation: heroFadeUp .6s var(--ease) .1s forwards;
  text-decoration:none;
  cursor:pointer;
}
.hero-overline-pin {
  width:14px; height:14px;
  color:var(--gold);
  flex-shrink:0;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100%{ filter:drop-shadow(0 0 0 rgba(201,160,48,.4)) }
  50%{ filter:drop-shadow(0 0 5px rgba(201,160,48,.6)) }
}
.hero-overline-text {
  font-family:var(--font-label);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  transition:color .15s;
}
.hero-overline:hover .hero-overline-text { color:var(--gold-light) }

.hero-h1 {
  font-family:var(--font-display);
  font-size:clamp(3rem,5.5vw,5.5rem);
  font-weight:700;
  line-height:1.05;
  color:var(--white);
  margin-bottom:24px;
  letter-spacing:-.02em;
}
.hero-h1 .word {
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  animation:heroFadeUp .65s var(--ease) forwards;
}
.hero-h1 .line-break { display:block }
.hero-h1 em {
  font-style:italic;
  color:var(--gold-light);
}

/* Cycling word in headline */
.hero-morph-wrap {
  display:inline-block;
  position:relative;
  overflow:visible;
  min-width:min(220px, 60vw); /* clamp to 60vw on tiny screens */
  vertical-align:bottom;
}
.hero-morph {
  display:inline-block;
  color:var(--gold-light);
  font-style:italic;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.hero-morph.out {
  opacity:0;
  transform:translateY(-20px);
}
.hero-morph.in-from {
  opacity:0;
  transform:translateY(20px);
}

@keyframes heroFadeUp {
  to { opacity:1; transform:translateY(0) }
}

.hero-sub {
  font-size:clamp(1rem,1.5vw,1.125rem);
  color:var(--white-60);
  max-width:520px;
  line-height:1.7;
  margin-bottom:36px;
  opacity:0;
  transform:translateY(16px);
  animation:heroFadeUp .65s var(--ease) .5s forwards;
}

/* (hero-pills replaced by .hero-creds above) */

/* CTA row */
.hero-cta {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  opacity:0;
  transform:translateY(12px);
  animation:heroFadeUp .55s var(--ease) .8s forwards;
}

/* Trust micro-text */
.hero-trust {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  font-size:.8125rem;
  color:var(--white-60);
  opacity:0;
  animation:heroFadeUp .45s var(--ease) 1s forwards;
}
.hero-stars { color:var(--gold); font-size:.875rem }

/* Hero right image */
.hero-visual {
  position:relative;
  height:580px;
  opacity:0;
  animation:heroFadeUp .8s var(--ease) .3s forwards;
}
.hero-img-main {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--r-xl);
  filter:brightness(.92) saturate(1.05);
}
.hero-img-frame {
  position:absolute;
  inset:-12px -12px 12px 12px;
  border-radius:var(--r-xl);
  border:1px solid var(--gold-dim);
  pointer-events:none;
  z-index:-1;
}
/* Floating badge on image */
.hero-float-badge {
  position:absolute;
  bottom:28px;
  left:-16px;
  background:rgba(18,21,34,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(201,160,48,.35);
  border-radius:var(--r-pill);
  padding:9px 16px 9px 13px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  animation:floatBadge 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floatBadge {
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-5px) }
}
.hero-float-badge-flag {
  font-size:1.15rem;
  line-height:1;
  flex-shrink:0;
}
.hero-float-badge-label {
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.95);
  white-space:nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ── STATS / TRUST BAR ── */
.trust-bar {
  position: relative;
  background: var(--hero-bg-2);
  padding: 0;
  overflow: hidden;
}
/* Thin gold top accent line */
.trust-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 1px;
  background: var(--gold);
  opacity: .5;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px;
  position: relative;
}
/* Vertical divider between items */
.trust-item + .trust-item::before {
  content: '';
  position: absolute;
  left: 0; top: 28%; bottom: 28%;
  width: 1px;
  background: rgba(255,255,255,.1);
}
.trust-num {
  font-family: var(--font-display);
  font-size: clamp(2rem,3.5vw,3rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -.03em;
}
.trust-num span { color: var(--gold) }
/* Bottom fade to white section */
.trust-bar-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0; /* no fade — crisp edge into next section is cleaner */
}
.trust-label {
  font-family: var(--font-label);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ── SECTION COMMON ── */
.section {
  padding:clamp(64px,8vw,120px) 0;
}
.section-dark {
  background:var(--hero-bg);
  color:var(--white);
}
.section-alt { background:var(--bg-alt) }

.section-head {
  margin-bottom:clamp(40px,5vw,64px);
  position:relative;
}
/* Brand "K" watermark — decorative mark near section titles */
.section-head::after {
  content:'K';
  position:absolute;
  top:-16px;
  right:-8px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:clamp(5rem,8vw,8rem);
  line-height:1;
  color:var(--gold);
  opacity:.055;
  pointer-events:none;
  user-select:none;
  letter-spacing:-.04em;
  z-index:0;
}
/* On centered section heads, shift the K slightly */
.section-head.centered::after {
  right:auto;
  left:50%;
  transform:translateX(120%);
}
/* On dark sections, increase opacity slightly (gold is harder to see on dark) */
.section-dark .section-head::after {
  opacity:.08;
}
.section-head h2 {
  font-size:clamp(2rem,4vw,3rem);
  font-weight:600;
  line-height:1.1;
  margin-top:12px;
  letter-spacing:-.015em;
}
.section-head p {
  font-size:clamp(.9375rem,1.5vw,1.0625rem);
  color:var(--txt-70);
  max-width:600px;
  margin-top:16px;
  line-height:1.7;
}
.section-head.centered {
  text-align:center;
}
.section-head.centered p {
  margin-inline:auto;
}
.section-dark .section-head p { color:var(--white-60) }
.section-dark .section-head h2 { color:var(--white) }

/* ── INTRO / ABOUT ── */
.about-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:96px;
  align-items:center;
}
.about-text {}
.about-text h2 {
  font-size:clamp(1.875rem,3.5vw,2.75rem);
  font-weight:600;
  line-height:1.15;
  margin-bottom:24px;
  letter-spacing:-.015em;
}
.about-text h2 em {
  font-style:italic;
  color:var(--gold);
}
.about-body {
  font-size:clamp(.9375rem,1.5vw,1.0625rem);
  color:var(--txt-70);
  line-height:1.75;
}
.about-body p { margin-bottom:16px }
.about-body p:last-child { margin-bottom:0 }
.about-cta { margin-top:32px }

.about-img-wrap {
  position:relative;
}
.about-img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r-xl);
}
.about-img-accent {
  position:absolute;
  bottom:-16px;
  right:-16px;
  width:80%;
  height:80%;
  border-radius:var(--r-xl);
  border:1.5px solid var(--gold-dim);
  pointer-events:none;
}

/* ── ARTISTS ── */
.artists-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.artist-card {
  background:var(--surface);
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--border);
  transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  cursor:pointer;
}
.artist-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.artist-card-img-wrap {
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.artist-card-img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.artist-card:hover .artist-card-img { transform:scale(1.04) }
.artist-card-specialty {
  position:absolute;
  top:16px; left:16px;
}
.artist-card-body {
  padding:24px 28px;
}
.artist-card-name {
  font-family:var(--font-display);
  font-size:1.625rem;
  font-weight:600;
  margin-bottom:4px;
  letter-spacing:-.01em;
}
.artist-card-role {
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
  font-family:var(--font-label);
}
.artist-card-desc {
  font-size:.9375rem;
  color:var(--txt-70);
  line-height:1.65;
  margin-bottom:20px;
}
.artist-card-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.875rem;
  font-weight:600;
  color:var(--txt-100);
  transition:gap var(--dur-fast), color var(--dur-fast);
}
.artist-card-link:hover { gap:10px; color:var(--gold) }
.artist-card-link svg { transition:transform var(--dur-fast) }
.artist-card-link:hover svg { transform:translateX(3px) }

/* ── GALLERY SLIDER ── */
.gallery-section { background:var(--hero-bg) }

.gallery-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gallery-slider {
  display: flex;
  gap: 14px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  padding-bottom: 2px; /* prevent clip on hover scale */
}
.gallery-slider::-webkit-scrollbar { display: none }

.gallery-slide {
  flex: 0 0 calc(33.333% - 9.5px);
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
  cursor: pointer;
}
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
  display: block;
}
.gallery-slide:hover img { transform: scale(1.05) }

.gallery-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(25,27,40,.88) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px;
}
.gallery-slide:hover .gallery-slide-overlay { opacity: 1 }

.gallery-slide-tag {
  font-family: var(--font-label);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
}
.gallery-zoom-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.gallery-zoom-btn:hover { background: rgba(255,255,255,.28) }

.gallery-arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
}
.gallery-arrow:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--hero-bg-2);
}
.gallery-arrow:disabled { opacity: .3; cursor: not-allowed }

.gallery-cta-row {
  text-align: center;
  margin-top: 40px;
}

/* ── GALLERY GRID (static grid used on realismo.html + linea-fina.html) ── */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.gallery-item {
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:3/4;
  cursor:pointer;
  background:var(--bg-alt);
}
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease) }
.gallery-item:hover img { transform:scale(1.06) }
.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(25,27,40,.82) 0%,transparent 55%);
  opacity:0; transition:opacity var(--dur-slow) var(--ease);
  display:flex; align-items:flex-end; padding:16px;
}
.gallery-item:hover .gallery-overlay { opacity:1 }
.gallery-overlay span {
  font-family:var(--font-label); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--white);
}
@media (max-width:768px) { .gallery-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px) { .gallery-grid { grid-template-columns:1fr 1fr } }

/* ── GALLERY LIGHTBOX ── */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.gallery-lightbox.active {
  opacity: 1;
  visibility: visible;
}
.gallery-lightbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 90vh;
}
.gallery-lightbox-img {
  max-width: min(75vw, 900px);
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--r-md);
  display: block;
  user-select: none;
}
.gallery-lightbox-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.gallery-lightbox-close:hover { background: rgba(255,255,255,.22) }
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
  z-index: 2;
}
.gallery-lightbox-prev { left: -68px }
.gallery-lightbox-next { right: -68px }
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover { background: var(--gold); border-color: var(--gold); color: var(--hero-bg-2) }
.gallery-lightbox-prev:disabled,
.gallery-lightbox-next:disabled { opacity: .25; cursor: default }
.gallery-lightbox-counter {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-label);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
}

/* ── REVIEWS ── */
.reviews-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.review-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:28px;
  transition:box-shadow var(--dur-slow) var(--ease);
}
.review-card:hover { box-shadow:var(--shadow-md) }
.review-stars { font-size:1rem; color:var(--gold); margin-bottom:12px; letter-spacing:2px }
.review-text {
  font-size:.9375rem;
  color:var(--txt-70);
  line-height:1.7;
  margin-bottom:20px;
  font-style:italic;
}
.review-text::before { content:'"'; font-family:var(--font-display); font-size:1.5rem; color:var(--gold); line-height:0; vertical-align:-.25em; margin-right:2px }
.review-author {
  display:flex;
  align-items:center;
  gap:12px;
}
.review-avatar {
  width:40px; height:40px;
  border-radius:50%;
  background:var(--bg-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  color:var(--gold);
  flex-shrink:0;
}
.review-author-name {
  font-size:.9375rem;
  font-weight:600;
  color:var(--txt-100);
}
.review-author-sub {
  font-size:.75rem;
  color:var(--txt-40);
}
.reviews-total {
  text-align:center;
  margin-top:48px;
}
/* Google Reviews clickable badge */
.reviews-google-badge {
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-pill);
  padding:14px 28px;
  text-decoration:none;
  transition:box-shadow var(--dur-base) var(--ease), border-color var(--dur-base);
  cursor:pointer;
}
.reviews-google-badge:hover {
  box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.reviews-badge-logo {
  width:22px; height:22px;
  flex-shrink:0;
}
.reviews-badge-body {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.reviews-badge-stars {
  font-size:1rem;
  color:var(--gold);
  letter-spacing:2px;
  line-height:1.1;
  margin-bottom:2px;
}
.reviews-badge-label {
  font-size:.8125rem;
  color:var(--txt-70);
  font-weight:500;
}
.reviews-badge-label strong {
  font-size:.9375rem;
  font-weight:700;
  color:var(--txt-100);
}
.reviews-badge-arrow {
  color:var(--txt-40);
  display:flex;
  align-items:center;
  transition:transform var(--dur-fast), color var(--dur-fast);
}
.reviews-google-badge:hover .reviews-badge-arrow {
  transform:translate(3px,-3px);
  color:var(--gold);
}

/* ── STYLES / ESTILOS ── */
.styles-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.style-card {
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.style-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.style-card-img-wrap {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.style-card-img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.style-card:hover .style-card-img { transform:scale(1.05) }
.style-card-body { padding:28px 32px 32px; flex:1; display:flex; flex-direction:column }
.style-card-tag {
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.style-card-title {
  font-size:1.625rem;
  font-weight:600;
  margin-bottom:12px;
  letter-spacing:-.01em;
}
.style-card-desc {
  font-size:.9375rem;
  color:var(--txt-70);
  line-height:1.7;
  flex:1;
  margin-bottom:24px;
}
.style-card-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.875rem;
  font-weight:600;
  color:var(--gold);
  transition:gap var(--dur-fast);
}
.style-card-link:hover { gap:12px }

/* ── PRICING PHILOSOPHY ── */
.pricing-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.pricing-text h2 { font-size:clamp(1.875rem,3vw,2.5rem); margin-bottom:20px; letter-spacing:-.015em }
.pricing-text h2 em { font-style:italic; color:var(--gold) }
.pricing-text p { font-size:1rem; color:var(--txt-70); line-height:1.75; margin-bottom:14px }
.pricing-text p:last-of-type { margin-bottom:0 }
.pricing-cta { margin-top:32px }

.pricing-card {
  background:var(--hero-bg);
  border-radius:var(--r-xl);
  padding:48px 40px;
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.pricing-card::before {
  content:'';
  position:absolute;
  top:-60px; right:-60px;
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,160,48,.15),transparent 70%);
  pointer-events:none;
}
.pricing-card-label {
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.pricing-card-title {
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.5vw,2rem);
  font-weight:600;
  line-height:1.15;
  margin-bottom:20px;
  letter-spacing:-.01em;
}
.pricing-card-desc {
  font-size:.9375rem;
  color:var(--white-60);
  line-height:1.7;
  margin-bottom:28px;
}
.pricing-features {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pricing-feature {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.9375rem;
  color:var(--white-90);
}
.pricing-feature-icon {
  width:20px; height:20px;
  border-radius:50%;
  background:var(--gold-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.pricing-feature-icon svg { color:var(--gold); width:12px; height:12px }

/* ── WHY US ── */
.why-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.why-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:32px 28px;
  transition:box-shadow var(--dur-slow), border-color var(--dur-slow);
}
.why-card:hover { box-shadow:var(--shadow-md); border-color:var(--gold-dim) }
.why-icon {
  width:52px; height:52px;
  border-radius:var(--r-md);
  background:var(--gold-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.why-icon svg { width:24px; height:24px; color:var(--gold) }
.why-card h3 {
  font-size:1.125rem;
  font-weight:600;
  margin-bottom:10px;
  letter-spacing:-.01em;
}
.why-card p {
  font-size:.9375rem;
  color:var(--txt-70);
  line-height:1.65;
}

/* ── CTA FINAL ── */
.cta-final {
  background:var(--hero-bg);
  text-align:center;
  padding:clamp(72px,10vw,120px) 0;
  position:relative;
  overflow:hidden;
}
.cta-final::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(201,160,48,.07),transparent);
  pointer-events:none;
}
.cta-final-inner { position:relative; z-index:1 }
.cta-final-overline {
  font-family:var(--font-label);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.cta-final h2 {
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:600;
  color:var(--white);
  line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:20px;
}
.cta-final h2 em { font-style:italic; color:var(--gold-light) }
.cta-final p {
  font-size:clamp(.9375rem,1.5vw,1.0625rem);
  color:var(--white-60);
  max-width:520px;
  margin:0 auto 40px;
  line-height:1.7;
}
.cta-final-btns {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.cta-final-note {
  margin-top:52px;
  font-size:.8125rem;
  color:var(--white-60);
  letter-spacing:.01em;
  opacity: .8;
}
.cta-final-note::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,.2);
  margin: 0 auto 16px;
}

/* ══ WHATSAPP WIDGET (sistema Tatuoria) ════════════════════════ */
.wa-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  font-family: var(--font-body);
}

/* Floating button */
.wa-btn {
  position: relative;
  width: 58px; height: 58px;
  background: #25D366;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(37,211,102,.4), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform 220ms cubic-bezier(.23,1,.32,1), box-shadow 220ms ease;
  padding: 0; line-height: 0;
}
.wa-btn:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37,211,102,.55) }
.wa-btn:active { transform: scale(.97) }
.wa-btn svg { width: 28px; height: 28px; position: relative; z-index: 1; display: block; flex-shrink: 0 }

/* Pulse ring */
.wa-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0;
  animation: waPulse 2.2s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: .5 }
  70%  { transform: scale(1.45); opacity: 0 }
  100% { transform: scale(1.45); opacity: 0 }
}

/* Teaser popup */
.wa-teaser {
  position: absolute;
  bottom: 70px; right: 0;
  width: 250px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 32px rgba(0,0,0,.18);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.96);
  transition: opacity 280ms ease, transform 280ms ease;
  cursor: pointer;
}
.wa-teaser.show { opacity: 1; pointer-events: all; transform: translateY(0) scale(1) }
.wa-teaser-av {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%; overflow: hidden;
  background: #25D366; border: 2px solid rgba(0,0,0,.06);
}
.wa-teaser-av img { width: 100%; height: 100%; object-fit: cover }
.wa-teaser-av-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: #25D366; border: 2px solid #fff; border-radius: 50%;
}
.wa-teaser-body { flex: 1; min-width: 0 }
.wa-teaser-name { margin: 0; font-size: 12px; font-weight: 700; color: #111; line-height: 1.2 }
.wa-teaser-text { margin: 4px 0 2px; font-size: 13px; color: #222; line-height: 1.35 }
.wa-teaser-sub  { margin: 0; font-size: 11px; color: #888 }
.wa-teaser-x {
  position: absolute; top: 7px; right: 9px;
  background: none; border: none; font-size: 14px;
  color: #ccc; cursor: pointer; padding: 2px; line-height: 1;
}
.wa-teaser-x:hover { color: #999 }

/* Chat panel */
.wa-chat {
  position: absolute;
  bottom: 68px; right: 0;
  width: 320px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.97);
  transition: opacity 220ms ease, transform 220ms ease;
}
.wa-chat.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1) }

/* Header */
.wa-header {
  background: linear-gradient(135deg, #128C7E, #075E54);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px 14px 0 0;
  color: #fff;
}
.wa-avatar {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.25);
  background: #0d1424;
}
.wa-avatar img { width: 100%; height: 100%; object-fit: cover }
.wa-online {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px;
  background: #a5f3be; border: 2px solid #25D366; border-radius: 50%;
}
.wa-info { flex: 1; min-width: 0 }
.wa-name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.2; color: #fff }
.wa-status { font-size: 11px; color: rgba(255,255,255,.8) }
.wa-close {
  background: transparent; border: none; color: #fff;
  cursor: pointer; padding: 4px;
  display: flex; border-radius: 50%;
  transition: background 150ms;
}
.wa-close:hover { background: rgba(255,255,255,.15) }
.wa-close svg { width: 16px; height: 16px }

/* Body */
.wa-body {
  padding: 16px;
  background: #ECE5DD;
  min-height: 100px;
}
.wa-bubble {
  background: #fff;
  padding: 10px 13px;
  border-radius: 0 8px 8px 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.wa-bubble::before {
  content: '';
  position: absolute;
  left: -7px; top: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #fff transparent transparent;
}
.wa-bubble p { margin: 0; font-size: 14px; line-height: 1.5; color: #303030 }
.wa-bubble p + p { margin-top: 5px }

/* Footer + input */
.wa-footer {
  padding: 10px 12px;
  background: #f0f0f0;
  border-radius: 0 0 14px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.wa-input {
  flex: 1;
  padding: 9px 13px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms;
  background: #fff;
  color: #111;
}
.wa-input:focus { border-color: #25D366 }
.wa-input::placeholder { color: #aaa }
.wa-send {
  width: 38px; height: 38px;
  background: #25D366; border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms, transform 150ms;
  flex-shrink: 0;
}
.wa-send:hover { background: #1daa55 }
.wa-send:active { transform: scale(.94) }
.wa-send svg { width: 16px; height: 16px }

/* Mobile */
@media (max-width:640px) {
  .wa-widget { bottom: 16px; right: 16px }
  .wa-chat {
    position: absolute;
    right: 0; bottom: 68px;
    width: calc(100vw - 32px);
    max-width: 320px;
  }
  .wa-teaser { width: calc(100vw - 32px); max-width: 250px }
}

/* ── FOOTER ── */
.footer {
  background:var(--hero-bg-2);
  color:var(--white);
  padding:64px 0 0;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand {}
.footer-logo {
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:600;
  margin-bottom:12px;
}
.footer-logo span { color:var(--gold) }
.footer-desc {
  font-size:.875rem;
  color:var(--white-60);
  line-height:1.7;
  max-width:260px;
  margin-bottom:20px;
}
.footer-social {
  display:flex;
  gap:10px;
}
.footer-social a {
  width:38px; height:38px;
  border-radius:var(--r-sm);
  background:var(--white-20);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur-fast);
}
.footer-social a:hover { background:var(--gold) }
.footer-social svg { width:18px; height:18px; color:var(--white) }

.footer-col-title {
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.footer-links { display:flex; flex-direction:column; gap:10px }
.footer-links a {
  font-size:.875rem;
  color:var(--white-60);
  transition:color var(--dur-fast);
}
.footer-links a:hover { color:var(--white) }

.footer-contact-item {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
.footer-contact-item svg { width:16px; height:16px; color:var(--gold); margin-top:2px; flex-shrink:0 }
.footer-contact-item span {
  font-size:.875rem;
  color:var(--white-60);
  line-height:1.5;
}
.footer-contact-item a:hover { color:var(--white) }

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  gap:16px;
}
.footer-bottom-text {
  font-size:.8125rem;
  color:rgba(255,255,255,.3);
}
.footer-bottom-links {
  display:flex;
  gap:20px;
}
.footer-bottom-links a {
  font-size:.8125rem;
  color:rgba(255,255,255,.35);
  transition:color var(--dur-fast);
}
.footer-bottom-links a:hover { color:var(--white-60) }

/* ── PAGE HEROES (inner pages) ── */
.page-hero {
  background:var(--hero-bg);
  padding:clamp(80px,12vw,140px) 0 clamp(60px,8vw,100px);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(201,160,48,.07),transparent);
  pointer-events:none;
}
.page-hero-inner { position:relative; z-index:1 }
.page-hero h1 {
  font-size:clamp(2.25rem,5vw,4rem);
  font-weight:600;
  color:var(--white);
  letter-spacing:-.02em;
  line-height:1.08;
  margin-bottom:16px;
}
.page-hero h1 em { font-style:italic; color:var(--gold-light) }
.page-hero p {
  font-size:clamp(.9375rem,1.5vw,1.125rem);
  color:var(--white-60);
  max-width:560px;
  margin-inline:auto;
  line-height:1.7;
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  margin-bottom:20px;
  font-size:.8125rem;
  color:var(--white-60);
}
.breadcrumb a { transition:color var(--dur-fast) }
.breadcrumb a:hover { color:var(--white) }
.breadcrumb-sep { color:rgba(255,255,255,.25) }

/* ── PROSE (rich text sections) ── */
.prose {
  font-size:clamp(.9375rem,1.4vw,1.0625rem);
  color:var(--txt-70);
  line-height:1.8;
  max-width:720px;
}
.prose p { margin-bottom:1.2em }
.prose h2 { font-size:clamp(1.5rem,2.5vw,2rem); color:var(--txt-100); margin:2em 0 .75em; font-weight:600; letter-spacing:-.01em }
.prose h3 { font-size:1.25rem; color:var(--txt-100); margin:1.5em 0 .5em; font-weight:600 }
.prose strong { color:var(--txt-100); font-weight:600 }
.prose em { font-style:italic; color:var(--gold) }
.prose ul { margin-bottom:1.2em }
.prose ul li { position:relative; padding-left:20px; margin-bottom:.5em }
.prose ul li::before { content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--gold) }

/* ── FAQ ── */
.faq-list { max-width:760px; margin:0 auto }
.faq-item {
  border-bottom:1px solid var(--border);
}
.faq-item:first-child { border-top:1px solid var(--border) }
.faq-btn {
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 0;
  font-size:1rem;
  font-weight:600;
  color:var(--txt-100);
  cursor:pointer;
  transition:color var(--dur-fast);
}
.faq-btn:hover { color:var(--gold) }
.faq-btn[aria-expanded="true"] { color:var(--gold) }
.faq-icon {
  width:24px; height:24px;
  flex-shrink:0;
  border-radius:50%;
  border:1.5px solid var(--border-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--dur-base) var(--ease), border-color var(--dur-fast), background var(--dur-fast);
}
.faq-btn[aria-expanded="true"] .faq-icon {
  transform:rotate(45deg);
  border-color:var(--gold);
  background:var(--gold-dim);
}
.faq-icon svg { width:14px; height:14px; color:var(--txt-100) }
.faq-btn[aria-expanded="true"] .faq-icon svg { color:var(--gold) }
.faq-body {
  overflow:hidden;
  max-height:0;
  transition:max-height .4s var(--ease);
}
.faq-body-inner {
  padding:0 0 22px;
  font-size:.9375rem;
  color:var(--txt-70);
  line-height:1.75;
}
.faq-body-inner p { margin-bottom:10px }
.faq-body-inner p:last-child { margin-bottom:0 }

/* ── FAQ alias classes used in inner pages (faq-q / faq-a) ── */
.faq-q {
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 0;
  font-size:1rem;
  font-weight:600;
  color:var(--txt-100);
  cursor:pointer;
  transition:color var(--dur-fast);
}
.faq-q:hover { color:var(--gold) }
.faq-q[aria-expanded="true"] { color:var(--gold) }
/* Chevron icon inside .faq-q — the SVG with class .faq-icon */
.faq-q svg.faq-icon {
  width:20px; height:20px;
  flex-shrink:0;
  color:var(--txt-40);
  transition:transform var(--dur-base) var(--ease), color var(--dur-fast);
}
.faq-q[aria-expanded="true"] svg.faq-icon {
  transform:rotate(180deg);
  color:var(--gold);
}
/* Collapse container */
.faq-a {
  overflow:hidden;
  max-height:0;
  transition:max-height .4s var(--ease);
}
.faq-a p {
  padding:0 0 22px;
  font-size:.9375rem;
  color:var(--txt-70);
  line-height:1.75;
  margin:0;
}

/* faq-page-grid → see Contact Page section below */

/* contact-grid → see Contact Page section below */
.contact-info {}
.contact-info h2 { font-size:clamp(1.5rem,2.5vw,2rem); margin-bottom:16px; letter-spacing:-.01em }
.contact-info p { font-size:.9375rem; color:var(--txt-70); line-height:1.7; margin-bottom:28px }
.contact-item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:20px;
}
.contact-item-icon {
  width:44px; height:44px;
  border-radius:var(--r-md);
  background:var(--gold-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.contact-item-icon svg { width:20px; height:20px; color:var(--gold) }
.contact-item-text strong { display:block; font-size:.9375rem; font-weight:600; color:var(--txt-100); margin-bottom:2px }
.contact-item-text span, .contact-item-text a { font-size:.9375rem; color:var(--txt-70) }
.contact-item-text a:hover { color:var(--gold) }
.contact-hours {}
.contact-hours-title { font-weight:600; font-size:.9375rem; margin-bottom:8px }
.contact-hours-row { display:flex; justify-content:space-between; font-size:.875rem; color:var(--txt-70); padding:4px 0; border-bottom:1px solid var(--border) }
.contact-hours-row:last-child { border-bottom:none }

.contact-form-wrap {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:40px;
}
/* Booking card (replaces iframe) */
.booking-card {
  background:var(--hero-bg);
  border-radius:var(--r-xl);
  padding:32px;
  position:relative;
  overflow:hidden;
}
.booking-card::before {
  content:'';
  position:absolute;
  top:-40px; right:-40px;
  width:180px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,160,48,.12),transparent 70%);
  pointer-events:none;
}
.booking-card-tag {
  font-family:var(--font-label);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}
.booking-features {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:32px;
}
.booking-features li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9375rem;
  color:var(--white-90);
}
.booking-features li svg { color:var(--gold); flex-shrink:0 }
.booking-card-top { margin-bottom:28px }
.booking-btn {
  width:100%;
  justify-content:center;
  font-size:1rem;
  padding:16px 28px;
}
.booking-alt {
  text-align:center;
  font-size:.8125rem;
  color:var(--white-60);
  margin-top:14px;
}
.booking-alt a {
  color:var(--gold);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* contact-form-title → see below (clamp version) */
.contact-form-sub { font-size:.9375rem; color:var(--txt-70); margin-bottom:28px }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-group { margin-bottom:16px }
.form-label { display:block; font-size:.8125rem; font-weight:600; color:var(--txt-100); margin-bottom:6px }
.form-input, .form-textarea, .form-select {
  width:100%;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  padding:13px 16px;
  font-family:var(--font-body);
  font-size:.9375rem;
  color:var(--txt-100);
  background:var(--bg);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline:none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,160,48,.12);
}
.form-textarea { resize:vertical; min-height:120px }
.form-select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center }
.form-label-hint { font-size:.75rem; font-weight:400; color:var(--txt-40); margin-left:4px }
.form-file-label {
  display:flex; align-items:center; gap:10px;
  border:1.5px dashed var(--border-dark);
  border-radius:var(--r-md);
  padding:14px 18px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  background:var(--bg-alt);
}
.form-file-label:hover { border-color:var(--gold); background:var(--bg) }
.form-file-text { font-size:.875rem; color:var(--txt-70) }
.form-file-input { display:none }
.contact-submit-btn { width:100%; justify-content:center; margin-top:8px; padding:16px 28px; font-size:1rem }
.form-privacy-note { font-size:.78rem; color:var(--txt-40); text-align:center; margin-top:12px }
.form-privacy-note a { color:var(--txt-40); text-decoration:underline }
.form-privacy-note a:hover { color:var(--gold) }
.contact-form-title { font-family:var(--font-display); font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; letter-spacing:-.02em; margin-bottom:12px }
.contact-form-sub { font-size:.9375rem; color:var(--txt-70); line-height:1.7; margin-bottom:28px }

/* ── ARTIST PROFILE ── */
.artist-profile-grid {
  display:grid;
  grid-template-columns:400px 1fr;
  gap:80px;
  align-items:flex-start;
}
.artist-profile-img {
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:3/4;
}
.artist-profile-img img { width:100%; height:100%; object-fit:cover }
.artist-profile-info {}
.artist-profile-info h1 { font-size:clamp(2rem,3.5vw,2.75rem); margin-bottom:8px; letter-spacing:-.02em }
.artist-profile-role {
  font-family:var(--font-label);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}
.artist-profile-body { font-size:.9375rem; color:var(--txt-70); line-height:1.75; margin-bottom:24px }
.artist-profile-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:32px;
}
.artist-stat {
  background:var(--bg-alt);
  border-radius:var(--r-md);
  padding:16px 20px;
  text-align:center;
}
.artist-stat-num {
  font-family:var(--font-display);
  font-size:1.75rem;
  font-weight:700;
  color:var(--txt-100);
  line-height:1;
  margin-bottom:4px;
}
.artist-stat-num span { color:var(--gold) }
.artist-stat-label { font-size:.8125rem; color:var(--txt-40) }

.method-list {
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:32px;
}
.method-item {
  display:flex;
  gap:16px;
  background:var(--bg-alt);
  border-radius:var(--r-lg);
  padding:20px 22px;
  border:1px solid var(--border);
}
.method-item-num {
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--gold);
  flex-shrink:0;
  line-height:1;
  margin-top:2px;
}
.method-item-content h4 { font-size:1rem; font-weight:600; margin-bottom:4px }
.method-item-content p { font-size:.9rem; color:var(--txt-70); line-height:1.65 }

/* ── NOSOTROS / ABOUT PAGE ── */
.story-section { padding:clamp(64px,8vw,100px) 0 }
.story-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.story-img-wrap { position:relative }
.story-img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r-xl);
}
.story-img-accent {
  position:absolute;
  top:-16px;
  left:-16px;
  width:80%;
  height:80%;
  border-radius:var(--r-xl);
  border:1.5px solid var(--gold-dim);
  pointer-events:none;
  z-index:-1;
}
.story-text {}
.story-text h2 { font-size:clamp(1.75rem,3vw,2.5rem); margin-bottom:20px; letter-spacing:-.015em }
.story-text h2 em { font-style:italic; color:var(--gold) }
.story-body { font-size:.9375rem; color:var(--txt-70); line-height:1.8 }
.story-body p { margin-bottom:16px }
.story-body p:last-child { margin-bottom:0 }
.story-quote {
  background:var(--hero-bg);
  color:var(--white);
  border-radius:var(--r-xl);
  padding:clamp(40px,6vw,72px);
  text-align:center;
  margin:64px 0;
  position:relative;
  overflow:hidden;
}
.story-quote::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(201,160,48,.07),transparent);
  pointer-events:none;
}
.story-quote blockquote {
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.5vw,1.875rem);
  font-weight:600;
  font-style:italic;
  line-height:1.4;
  color:var(--white);
  max-width:640px;
  margin:0 auto;
  letter-spacing:-.01em;
}
.story-quote blockquote span { color:var(--gold-light) }

/* ── REALISMO / LINEA FINA PAGES ── */
.style-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding:clamp(64px,8vw,100px) 0;
}
.style-intro-text {}
.style-intro-text h2 { font-size:clamp(1.75rem,3vw,2.5rem); letter-spacing:-.015em; margin-bottom:20px }
.style-intro-img {
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:4/3;
}
.style-intro-img img { width:100%; height:100%; object-fit:cover }

/* ── STYLE PAGE INTRO GRID ── */
.style-intro-grid {
  display:grid;
  grid-template-columns:1fr 480px;
  gap:80px;
  align-items:center;
}
.style-intro-grid--reverse { grid-template-columns:480px 1fr }
.style-intro-content {}
.style-intro-content h2 {
  font-size:clamp(1.75rem,3vw,2.5rem);
  letter-spacing:-.015em;
  margin-bottom:20px;
  font-family:var(--font-display);
  font-weight:700;
}
.style-intro-content h2 em { font-style:italic; color:var(--gold) }
.style-intro-content p { font-size:.9375rem; color:var(--txt-70); line-height:1.8; margin-bottom:16px }
.style-intro-img {
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:4/5;
}
.style-intro-img img { width:100%; height:100%; object-fit:cover }

/* ── FEARS GRID ── */
.fears-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:40px 0 0;
}
.fear-card {
  background:var(--bg-alt);
  border-radius:var(--r-lg);
  padding:28px 24px;
  text-align:center;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.fear-icon {
  width:56px; height:56px;
  border-radius:50%;
  background:var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  flex-shrink:0;
}
.fear-card p { font-size:.9375rem; color:var(--txt-70); font-weight:500; margin:0 }

/* ── STYLE CALLOUT ── */
.style-callout {
  background:var(--hero-bg);
  color:var(--white);
  border-radius:var(--r-xl);
  padding:clamp(32px,5vw,56px);
  margin-top:40px;
  position:relative;
  overflow:hidden;
}
.style-callout::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 30% 50%,rgba(201,160,48,.09),transparent);
  pointer-events:none;
}
.style-callout h3 {
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.5vw,1.625rem);
  font-weight:700;
  color:var(--gold-light);
  margin-bottom:16px;
}
.style-callout p {
  position:relative;
  font-size:.9375rem;
  color:var(--white-90);
  line-height:1.8;
  margin-bottom:12px;
}
.style-callout p:last-child { margin-bottom:0 }

/* ── FEELINGS GRID ── */
.feelings-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px;
}
.feeling-item {
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:24px;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.feeling-num {
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  color:var(--gold);
  line-height:1;
}
.feeling-item p { font-size:.9rem; color:var(--txt-70); line-height:1.65; margin:0 }

/* ── FINE LINE REASONS ── */
.fineline-reasons {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:40px;
}
.fineline-reason {
  text-align:center;
  padding:28px 20px;
}
.fineline-reason-icon {
  width:56px; height:56px;
  border-radius:50%;
  background:var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  margin:0 auto 16px;
}
.fineline-reason h4 {
  font-size:1rem;
  font-weight:700;
  margin-bottom:8px;
  color:var(--txt-100);
}
.fineline-reason p { font-size:.9rem; color:var(--txt-70); line-height:1.65; margin:0 }

/* ── LOCATION BLOCK ── */
.location-block {
  background:var(--bg-alt);
  border-radius:var(--r-xl);
  padding:clamp(32px,4vw,48px);
  border:1px solid var(--border);
}
.location-block .section-label { margin-bottom:16px }
.location-block p { font-size:.9375rem; color:var(--txt-70); line-height:1.8; max-width:700px }

/* ── FAQ PAGE LAYOUT ── */
.faq-page-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.faq-page-col h2 {
  font-family:var(--font-display);
  font-size:clamp(1.375rem,2vw,1.75rem);
  font-weight:700;
  margin-bottom:24px;
  letter-spacing:-.02em;
}

/* ── CONTACT PAGE ── */
.contact-grid {
  display:grid;
  grid-template-columns:400px 1fr;
  gap:80px;
  align-items:start;
}
.contact-info { display:flex; flex-direction:column; gap:40px }
.contact-info-block {}
.contact-info-block .section-label { margin-bottom:12px }

/* Hours */
.contact-hours { list-style:none; display:flex; flex-direction:column; gap:10px }
.contact-hours li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  font-size:.9375rem;
}
.contact-hours-day { font-weight:500; color:var(--txt-100) }
.contact-hours-time { color:var(--txt-70) }
.contact-hours-closed { color:var(--txt-40) }

/* Address */
.contact-address {
  font-style:normal;
  font-size:.9375rem;
  color:var(--txt-70);
  line-height:1.8;
}
.contact-address strong { color:var(--txt-100); font-weight:600 }

/* Direct links */
.contact-direct-links { display:flex; flex-direction:column; gap:12px }
.contact-direct-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface);
  text-decoration:none;
  color:var(--txt-100);
  transition:border-color var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease);
}
.contact-direct-item:hover {
  border-color:var(--gold);
  box-shadow:0 4px 16px rgba(201,160,48,.15);
}
.contact-direct-wa { background:var(--gold-dim); border-color:rgba(201,160,48,.4) }
.contact-direct-wa:hover { background:rgba(201,160,48,.12) }
.contact-direct-icon {
  width:40px; height:40px;
  border-radius:var(--r-md);
  background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  flex-shrink:0;
}
.contact-direct-wa .contact-direct-icon { background:rgba(37,211,102,.12); color:#25D366 }
.contact-direct-label { font-size:.8rem; color:var(--txt-40); margin-bottom:2px }
.contact-direct-value { font-size:.9375rem; font-weight:600; color:var(--txt-100) }

/* Artist quick-select */
.contact-artists { }
.contact-artists .section-label { margin-bottom:12px }
.contact-artist-cards { display:flex; gap:12px }
.contact-artist-card {
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  padding:14px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface);
  text-decoration:none;
  color:var(--txt-100);
  transition:border-color var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease);
}
.contact-artist-card:hover {
  border-color:var(--gold);
  box-shadow:0 4px 16px rgba(201,160,48,.15);
}
.contact-artist-card img {
  width:48px; height:48px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.contact-artist-card strong { display:block; font-weight:600; font-size:.9375rem; margin-bottom:2px }
.contact-artist-card span { display:block; font-size:.8125rem; color:var(--txt-40) }

/* Contact form wrap */
.contact-form-wrap {}
.contact-form-wrap .section-label { margin-bottom:8px }
.contact-form-wrap h2 { margin-bottom:28px; letter-spacing:-.02em }

/* Contact form */
.contact-form { display:flex; flex-direction:column; gap:16px }
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-group { display:flex; flex-direction:column; gap:6px }
.form-group label {
  font-size:.875rem;
  font-weight:500;
  color:var(--txt-70);
}
.form-group label span { color:var(--gold); margin-left:2px }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  font-family:var(--font-body);
  font-size:.9375rem;
  color:var(--txt-100);
  transition:border-color var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease);
  outline:none;
  appearance:none;
}
.form-group select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:44px;
  cursor:pointer;
}
.form-group textarea { resize:vertical; min-height:130px; line-height:1.65 }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,160,48,.12);
}
.btn-form-submit {
  align-self:flex-start;
  padding:14px 36px;
  font-size:1rem;
}

/* Map wrapper */
.map-wrap { border-radius:var(--r-xl); overflow:hidden; margin-top:40px }

/* ── BTN SECONDARY ── */
.btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 28px;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:.9375rem;
  font-weight:600;
  cursor:pointer;
  border:1.5px solid var(--border-dark);
  background:var(--surface);
  color:var(--txt-100);
  text-decoration:none;
  transition:border-color var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease);
}
.btn-secondary:hover {
  border-color:var(--gold);
  color:var(--gold);
  box-shadow:0 4px 16px rgba(201,160,48,.12);
}

/* ═══════════════════════════════════════
   PREMIUM ENHANCEMENTS
═══════════════════════════════════════ */

/* Custom text selection */
::selection { background:var(--gold); color:var(--hero-bg-2) }
::-moz-selection { background:var(--gold); color:var(--hero-bg-2) }

/* Premium scrollbar (desktop) */
@media (min-width:769px) {
  ::-webkit-scrollbar { width:6px }
  ::-webkit-scrollbar-track { background:var(--bg-alt) }
  ::-webkit-scrollbar-thumb { background:var(--border-dark); border-radius:3px }
  ::-webkit-scrollbar-thumb:hover { background:var(--gold) }
}

/* Button shimmer sweep */
.btn-primary { position:relative; overflow:hidden }
.btn-primary::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform 0s;
}
.btn-primary:hover::after {
  transform:translateX(110%);
  transition:transform .55s var(--ease);
}

/* Nav link hover underline */
.nav-links a { position:relative }
.nav-links a::before {
  content:'';
  position:absolute;
  bottom:4px;
  left:14px; right:14px;
  height:1.5px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--dur-base) var(--ease);
  border-radius:2px;
}
.nav-links a:hover::before,
.nav-links a.active::before { transform:scaleX(1) }

/* Focus ring improvements */
:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ── MARQUEE STRIP ── */
.marquee-strip {
  background:var(--hero-bg-2);
  border-top:1px solid rgba(201,160,48,.18);
  border-bottom:1px solid rgba(255,255,255,.04);
  padding:13px 0;
  overflow:hidden;
  position:relative;
  /* Contain the marquee so it never bleeds into page width */
  max-width:100vw;
  contain:layout;
}
.marquee-strip::before,
.marquee-strip::after {
  content:'';
  position:absolute;
  top:0; bottom:0;
  width:72px;
  z-index:1;
  pointer-events:none;
}
.marquee-strip::before { left:0; background:linear-gradient(to right, var(--hero-bg-2), transparent) }
.marquee-strip::after  { right:0; background:linear-gradient(to left, var(--hero-bg-2), transparent) }
.marquee-track {
  display:flex;
  align-items:center;
  width:max-content;
  animation:marqueeScroll 32s linear infinite;
  /* No will-change here — avoid stacking context that breaks overflow:hidden on Safari */
  transform:translateZ(0);
}
.marquee-track:hover { animation-play-state:paused }
@keyframes marqueeScroll {
  from { transform:translateX(0) }
  to   { transform:translateX(-50%) }
}
.marquee-item {
  font-family:var(--font-label);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  padding:0 28px;
  white-space:nowrap;
}
.marquee-item em {
  font-style:normal;
  color:var(--gold);
  opacity:.85;
}
.marquee-sep {
  color:var(--gold);
  font-size:.875rem;
  opacity:.5;
  flex-shrink:0;
  line-height:1;
}

/* ── PREMIUM CARD HOVER (enhanced depth) ── */
.artist-card,
.why-card,
.style-card,
.review-card {
  will-change:transform;
  transform-style:preserve-3d;
  transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

/* ── HERO PARALLAX TARGET ── */
.hero-visual { will-change:transform }

/* ── SECTION GOLD ACCENT LINE ── */
.section-gold-rule {
  display:block;
  width:48px;
  height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius:2px;
  margin:0 auto 40px;
}

/* ── GRACIAS PAGE ── */
.gracias-section {
  min-height:calc(100vh - var(--nav-h));
  display:flex;
  align-items:center;
  padding:clamp(60px,8vw,100px) 0;
  background:var(--bg);
}
.gracias-inner {
  max-width:560px;
  margin:0 auto;
  text-align:center;
}
.gracias-icon {
  width:80px; height:80px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 28px;
  font-size:2rem;
  color:var(--hero-bg-2);
  font-weight:700;
  box-shadow:0 10px 40px rgba(201,160,48,.4);
  animation:heroFadeUp .6s var(--ease) forwards;
}
.gracias-title {
  font-family:var(--font-display);
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:700;
  color:var(--txt-100);
  letter-spacing:-.02em;
  margin-bottom:16px;
}
.gracias-sub {
  font-size:1.0625rem;
  color:var(--txt-70);
  line-height:1.75;
  margin-bottom:36px;
  max-width:460px;
  margin-inline:auto;
}
.gracias-sub strong { color:var(--txt-100) }
.gracias-btns {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:24px;
}
.gracias-redirect {
  font-size:.8125rem;
  color:var(--txt-40);
}

/* ═══════════════════════════════════════
   RESPONSIVE — COMPREHENSIVE
═══════════════════════════════════════ */

/* ── Tablet landscape (≤ 1100px) ── */
@media (max-width:1100px) {
  .hero-grid { grid-template-columns:1fr; gap:40px }
  .hero-visual { height:400px; max-width:560px; margin:0 auto }
  .hero-float-badge { left:-8px }
  .about-grid { grid-template-columns:1fr; gap:40px }
  .about-img-wrap { max-width:500px; margin:0 auto }
  .pricing-inner { grid-template-columns:1fr; gap:48px }
  .footer-grid { grid-template-columns:1fr 1fr }
  .contact-grid { grid-template-columns:1fr; gap:40px }
  .artist-profile-grid { grid-template-columns:1fr; gap:40px }
  .artist-profile-img { max-width:420px; margin:0 auto }
  .story-grid { grid-template-columns:1fr; gap:48px }
  .story-img-wrap { max-width:560px; margin:0 auto }
  .style-intro { grid-template-columns:1fr; gap:40px }
  .style-intro-grid { grid-template-columns:1fr; gap:40px }
  .style-intro-grid--reverse { grid-template-columns:1fr }
  .style-intro-grid--reverse .style-intro-img { order:-1 }
  .fineline-reasons { grid-template-columns:repeat(2,1fr) }
  .fears-grid { grid-template-columns:1fr 1fr }
  .feelings-grid { grid-template-columns:repeat(2,1fr) }
  .faq-page-grid { grid-template-columns:1fr; gap:40px }
  .gallery-slide { flex:0 0 calc(50% - 7px) }
}

/* ── Tablet portrait / large phone (≤ 768px) ── */
@media (max-width:768px) {
  :root { --nav-h:60px }

  /* Nav */
  .nav-links, .nav-cta { display:none }
  .nav-burger { display:flex }

  /* ── HERO: stacked — BIG text, image below ── */

  /* Reset any previous attempts */
  .hero { min-height:auto; align-items:center }
  .hero-inner { position:relative; z-index:3; padding:40px 0 0 }
  .hero-inner::before { display:none }
  .hero .container { min-height:auto; display:block; padding-bottom:0; align-self:auto }
  .hero-grid { grid-template-columns:1fr; gap:0; align-items:start }
  .hero-text { position:static; z-index:auto; overflow:hidden; min-width:0; padding-bottom:36px }

  /* Big impactful text */
  .hero-overline { margin-bottom:14px }
  .hero-h1 { font-size:clamp(3rem,13.5vw,5.5rem); margin-bottom:10px }
  .hero-morph-wrap { min-width:min(180px,60vw) }
  .hero-sub { font-size:.9rem; margin-bottom:20px; max-width:100% }
  .hero-creds { margin-bottom:20px }
  .hero-cred { font-size:.66rem; padding:0 10px }
  .hero-trust { display:none }
  .hero-cta { flex-wrap:wrap; gap:10px }

  /* Image: full-bleed below text, rounded top corners */
  .hero-visual {
    position:static;
    z-index:auto;
    height:clamp(260px,68vw,360px);
    aspect-ratio:auto;
    max-width:none;
    width:calc(100% + 2 * var(--gutter));
    margin:0 calc(-1 * var(--gutter));
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    overflow:hidden;
  }
  .hero-img-main {
    border-radius:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:65% 15%;
    filter:brightness(.92) saturate(1.05);
  }
  .hero-img-frame { display:none }
  .hero-float-badge { display:none }

  /* Trust bar */
  .trust-grid { grid-template-columns:repeat(2,1fr) }
  .trust-item { padding:28px 16px }
  .trust-item:nth-child(3)::before,
  .trust-item:nth-child(4)::before {
    top:0; bottom:auto;
    width:100%; height:1px;
    left:0;
    background:rgba(255,255,255,.08);
  }
  .trust-item:nth-child(4) { border-top:none }

  /* Artists */
  .artists-grid { grid-template-columns:1fr }

  /* Gallery slider */
  .gallery-slide { flex:0 0 min(80%, 280px) }
  .gallery-arrow { width:38px; height:38px }
  .gallery-lightbox-prev { left:-48px }
  .gallery-lightbox-next { right:-48px }
  .gallery-lightbox-img { max-width:90vw }

  /* Reviews */
  .reviews-grid { grid-template-columns:1fr }

  /* Styles */
  .styles-grid { grid-template-columns:1fr }

  /* Why */
  .why-grid { grid-template-columns:1fr 1fr }

  /* Form */
  .form-row { grid-template-columns:1fr }
  .contact-form-wrap { padding:28px 24px }

  /* Footer — 2 col on mobile: brand full width, menu+artists side by side */
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px 24px }
  .footer-brand { grid-column:1 / -1 }  /* brand spans both cols */
  /* menu (2nd child) and artistas (3rd child) sit side by side in cols 1-2 */
  /* contacto (4th child) spans both */
  .footer-grid > div:last-child { grid-column:1 / -1 }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center }
  .footer-bottom-links { flex-wrap:wrap; justify-content:center; gap:16px }

  /* Artist profile */
  .artist-profile-stats { grid-template-columns:repeat(3,1fr) }

  /* Inner page grids */
  .fears-grid { grid-template-columns:1fr }
  .feelings-grid { grid-template-columns:1fr }
  .fineline-reasons { grid-template-columns:1fr 1fr }
  .contact-artist-cards { flex-direction:column }

  /* About */
  .about-grid { gap:32px }
  .about-img-accent { display:none }

  /* Story */
  .story-img-accent { display:none }

  /* Hero frame (prevents horizontal overflow on iOS) */
  .hero-img-frame { display:none }

  /* Pricing */
  .pricing-card { padding:32px 24px }

  /* Gracias */
  .gracias-btns { flex-direction:column; align-items:center }
  .gracias-btns .btn { width:100%; justify-content:center; max-width:320px }

  /* Marquee */
  .marquee-item { padding:0 18px; font-size:.65rem }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width:480px) {
  /* Hero — small phone adjustments */
  .hero-h1 { font-size:clamp(2.6rem,12.5vw,4.5rem) }
  .hero-sub { display:none }
  .hero-morph-wrap { min-width:min(155px,56vw) }
  .hero-cred { font-size:.6rem; padding:0 7px }
  .hero-visual { height:clamp(220px,60vw,300px) }

  /* Hero CTA */
  .hero-cta { flex-direction:column }
  .hero-cta .btn { justify-content:center; width:100% }

  /* Trust */
  .trust-item { padding:22px 12px }
  .trust-num { font-size:1.75rem }

  /* Why */
  .why-grid { grid-template-columns:1fr }

  /* Artist stats */
  .artist-profile-stats { grid-template-columns:1fr 1fr }

  /* CTA final */
  .cta-final-btns { flex-direction:column; align-items:center }
  .cta-final-btns .btn { width:100%; justify-content:center; max-width:320px }

  /* WhatsApp widget — mobile handled within its own @media block */

  /* Form */
  .contact-form-wrap { padding:20px 16px }

  /* Footer */
  .footer-social { flex-wrap:wrap }
  .footer-desc { max-width:100% }

  /* Lightbox on tiny screens */
  .gallery-lightbox-prev { left:-38px }
  .gallery-lightbox-next { right:-38px }
  .gallery-lightbox-img { max-width:94vw }

  /* Review card */
  .review-card { padding:22px 20px }

  /* Style card body */
  .style-card-body { padding:22px 24px 24px }

}

/* ── LEGAL PAGES ── */
.legal-hero {
  background: var(--hero-bg);
  padding: calc(var(--nav-h) + 48px) 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.legal-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.02em;
  margin: 8px 0 12px;
}
.legal-meta {
  font-size: .875rem;
  color: var(--white-60);
}
.legal-main {
  padding: 60px 0 80px;
}
.legal-content {
  max-width: 780px;
}
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--txt-100);
  margin: 40px 0 12px;
  letter-spacing: -.01em;
}
.legal-content h2:first-child { margin-top: 0 }
.legal-content h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt-100);
  margin: 24px 0 8px;
}
.legal-content p {
  font-size: .9375rem;
  color: var(--txt-70);
  line-height: 1.8;
  margin-bottom: 16px;
}
.legal-content a { color: var(--gold); text-decoration: underline }
.legal-content a:hover { color: var(--gold-light) }
.legal-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.legal-list li {
  font-size: .9375rem;
  color: var(--txt-70);
  line-height: 1.7;
  padding: 6px 0 6px 20px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.legal-list li:last-child { border-bottom: none }
.legal-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.legal-list a { color: var(--gold); text-decoration: underline }
.legal-table-wrap { overflow-x: auto; margin: 16px 0 24px }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.legal-table th {
  text-align: left;
  background: var(--bg-alt);
  color: var(--txt-100);
  font-weight: 700;
  padding: 12px 16px;
  border: 1px solid var(--border);
}
.legal-table td {
  padding: 11px 16px;
  border: 1px solid var(--border);
  color: var(--txt-70);
  line-height: 1.6;
  vertical-align: top;
}
.legal-table tr:nth-child(even) td { background: var(--bg-alt) }