/* ==========================================================================
   LUXE SMILE — Luxury Redesign
   Design tokens
   ========================================================================== */

/* ==========================================================================
   TIPOGRAFIA AUTO-HOSPEDADA
   Jost y Cormorant Garamond servidas desde assets/fonts/ en lugar del CDN
   externo de fuentes. El CSP del sitio solo permite fuentes del propio
   origen (font-src 'self'), asi que la version externa nunca cargaba.
   Generado por _ops/build-fonts.js a partir del CSS oficial de la familia.
   Subsets incluidos: latin, latin-ext.
   ========================================================================== */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5rDD-htM8Efs.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5rDD-iNM8.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73ord4iYl.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73oTd4g.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73ord4iYl.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73oTd4g.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73ord4iYl.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73oTd4g.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73ord4iYl.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73oTd4g.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73ord4iYl.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/92zatBhPNqw73oTd4g.woff2?v=a83dcc78) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* ---- color ---- */
  --bg:            #050505;
  --bg-secondary:  #111111;
  --gold:          #C8A46A;
  --gold-dim:      #8f7850;
  --white:         #F8F8F8;
  --gray:          #BEBEBE;
  --border:        #252525;

  /* ---- type ---- */
  --font-sans: 'Futura PT', 'Jost', 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Futura PT', serif; /* used once, as the signature accent — see .signature-word */

  --fs-hero: clamp(48px, 7.4vw, 96px);
  --fs-section: clamp(34px, 4.6vw, 60px);
  --fs-subtitle: clamp(19px, 2.2vw, 30px);
  --fs-body: 19px;
  --fs-button: 16px;
  --fs-eyebrow: 13px;

  /* ---- grid ---- */
  --content-width: 1450px;
  --max-width: 1680px;
  --side-padding: 120px;
  --side-padding-tab: 64px;
  --side-padding-mob: 24px;
  --v-space: 120px;
  --v-space-tab: 90px;
  --v-space-mob: 72px;

  /* ---- motion ---- */
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.7s;
  --dur-slow: 1.1s;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; }

/* ==========================================================================
   The Luxe Moment — fires once, the first time a visitor drags the
   before/after slider far enough to reveal the transformed smile.
   Very subtle: a touch of warmth and brightness across the whole page.
   See script.js: maybeTriggerLuxeMoment().
   ========================================================================== */
html{ transition: filter 2.6s var(--ease-lux); }
html.luxe-revealed{ filter: saturate(1.06) brightness(1.018) contrast(1.01); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

button{ font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }

ul{ list-style: none; }

input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; }

::selection{ background: var(--gold); color: var(--bg); }

:focus-visible{ outline: 1px solid var(--gold); outline-offset: 4px; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
@media (max-width: 1400px){ .wrap{ padding: 0 var(--side-padding-tab); } }
@media (max-width: 640px){ .wrap{ padding: 0 var(--side-padding-mob); } }

.content{
  max-width: var(--content-width);
  margin: 0 auto;
}

section{
  padding-top: var(--v-space);
  padding-bottom: var(--v-space);
  position: relative;
}
@media (max-width: 1400px){
  section{ padding-top: var(--v-space-tab); padding-bottom: var(--v-space-tab); }
}
@media (max-width: 640px){
  section{ padding-top: var(--v-space-mob); padding-bottom: var(--v-space-mob); }
}

.eyebrow{
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  display: block;
  margin-bottom: 36px;
}

h1, h2, h3{
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.section-title{
  font-size: var(--fs-section);
  font-weight: 300;
  color: var(--white);
}

.section-subtitle{
  font-size: var(--fs-subtitle);
  font-weight: 200;
  color: var(--gray);
  margin-top: 34px;
  max-width: 520px;
  line-height: 1.65;
}

.signature-word{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

p{ color: var(--gray); font-weight: 300; }

.divider{
  height: 1px;
  width: 100%;
  background: var(--border);
  border: none;
}

/* ==========================================================================
   Reveal-on-scroll (Apple-style fade + rise)
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-lux), transform var(--dur-slow) var(--ease-lux);
  will-change: opacity, transform;
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
[data-reveal="scale"]{ transform: scale(1.04); }
[data-reveal="scale"].is-visible{ transform: scale(1); }

[data-reveal-group] > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-button);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 16px 34px;
  transition: transform var(--dur-slow) var(--ease-lux), background var(--dur-slow) var(--ease-lux), border-color var(--dur-slow) var(--ease-lux), color var(--dur-slow) var(--ease-lux);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }

.btn-primary{
  background: var(--gold);
  color: var(--bg);
}
.btn-primary:hover{ background: #d6b787; }

.btn-outline{
  border: 1px solid rgba(248,248,248,0.35);
  color: var(--white);
}
.btn-outline:hover{ border-color: var(--gold); color: var(--gold); }

.btn-text{
  color: var(--white);
  border-bottom: 1px solid var(--gold);
  padding: 4px 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 14px;
}
.btn-text:hover{ color: var(--gold); transform: translateY(-2px); }

.btn-arrow{
  transition: transform var(--dur-slow) var(--ease-lux);
}
.btn:hover .btn-arrow{ transform: translateX(3px); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 32px 0;
  transition: padding var(--dur) var(--ease-lux), background var(--dur) var(--ease-lux), border-color var(--dur) var(--ease-lux);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding: 18px 0;
  background: rgba(5,5,5,0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-slot{
  width: auto;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.15em;
}
.logo-image{
  height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.logo-wordmark{
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.24em;
  font-size: 15px;
  color: var(--white);
  white-space: nowrap;
}
.logo-wordmark span{ color: var(--gold); }
.logo-fallback-text{ display: none; }
/* If a logo image ever fails to load, script.js adds this class to the
   nearest .logo-slot so the text fallback reads clearly instead. */
.logo-slot.logo-img-failed .logo-image{ display: none; }
.logo-slot.logo-img-failed .logo-fallback-text{ display: inline; }

.main-nav{ display: flex; align-items: center; gap: 52px; }
.main-nav a{
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color var(--dur) var(--ease-lux);
  position: relative;
}
.main-nav a:hover{ color: var(--white); }
.main-nav a::after{
  content: '';
  position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--gold);
  transition: width var(--dur) var(--ease-lux);
}
.main-nav a:hover::after{ width: 100%; }

.header-cta{ display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.header-cta .btn{ padding: 13px 28px; font-size: 12px; }

.nav-toggle{
  display: none;
  width: 28px; height: 18px;
  position: relative;
  flex-shrink: 0;
  z-index: 600;
}
.nav-toggle span{
  position: absolute; left: 0; width: 100%; height: 1px; background: var(--white);
  transition: transform var(--dur) var(--ease-lux), opacity var(--dur) var(--ease-lux), top var(--dur) var(--ease-lux);
}
.nav-toggle span:nth-child(1){ top: 0; }
.nav-toggle span:nth-child(2){ top: 8px; }
.nav-toggle span:nth-child(3){ top: 16px; }
.nav-toggle.is-open span:nth-child(1){ top: 8px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ top: 8px; transform: rotate(-45deg); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero{
  height: 100vh;
  min-height: 640px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 100px;
  padding-top: 0;
  overflow: hidden;
}
.hero-media{
  position: absolute; inset: 0;
  z-index: 1;
}
/* <picture> es un envoltorio transparente. Sin esto seria inline y romperia
   el width/height:100% que .media-slot img necesita para llenar el hueco. */
picture{ display: contents; }

.media-slot{
  width: 100%; height: 100%;
  position: relative;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  overflow: hidden;
}
.media-slot video, .media-slot img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.9s var(--ease-lux);
  -webkit-user-drag: none;
  user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
}
.craft-media:hover .media-slot video,
.craft-media:hover .media-slot img,
.facility-card:hover .media-slot video,
.facility-card:hover .media-slot img,
.review-card:hover .media-slot video,
.review-card:hover .media-slot img{
  transform: scale(1.03);
}
.media-slot-img{ display: block; }
.media-fallback{ display: none; }
.media-slot.video-failed .media-video{ display: none; }
.media-slot.video-failed .media-fallback{ display: block; }

.hero-media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.25) 46%, rgba(5,5,5,0.55) 100%);
  z-index: 2;
}
.hero-content{
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-headline{
  font-size: var(--fs-hero);
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-transform: uppercase;
  max-width: 920px;
  transition-delay: 1s;
}
.hero-headline em{
  font-style: normal;
  color: var(--gold);
}
.hero-sub{
  margin-top: 40px;
  max-width: 400px;
  font-size: 18px;
  color: var(--gray);
  font-weight: 300;
  transition-delay: 1.35s;
}
.hero-actions{
  margin-top: 64px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  transition-delay: 1.7s;
}
.hero-scroll{
  position: absolute;
  right: var(--side-padding);
  bottom: 48px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gray);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll::after{
  content: '';
  display: block;
  width: 1px; height: 60px;
  background: linear-gradient(180deg, var(--gold), transparent);
  writing-mode: horizontal-tb;
}
@media (max-width: 900px){ .hero-scroll{ display: none; } }

/* ==========================================================================
   2. BENEFITS BAR
   ========================================================================== */
.benefits-bar{
  padding: 64px 0;
  background: var(--bg);
}
.benefits-list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.benefit-item{
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gray);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.benefit-item svg{
  width: 20px; height: 20px;
  stroke: var(--gold);
  flex-shrink: 0;
}

/* ==========================================================================
   3. CRAFT SECTION
   ========================================================================== */
.craft{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  padding-top: 0; padding-bottom: 0;
  overflow: hidden;
}
.craft-text{ padding: var(--v-space) var(--side-padding) var(--v-space) var(--side-padding); min-width: 0; }
.craft-text .section-title{ text-transform: uppercase; }
.craft-media{ min-width: 0; position: relative; }
.craft-media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.15) 0%, rgba(5,5,5,0.45) 100%);
  pointer-events: none;
}
.craft-media .media-slot video,
.craft-media .media-slot img{ filter: brightness(0.72) saturate(0.92); }
.craft-media .media-slot{ aspect-ratio: 4/5; }
@media (max-width: 1400px){ .craft-text{ padding: var(--v-space-tab) var(--side-padding-tab); } }
@media (max-width: 960px){
  .craft{ grid-template-columns: 1fr; }
  .craft-text{ padding: var(--v-space-mob) var(--side-padding-mob) 40px; order: 2; }
  .craft-media{ order: 1; }
  .craft-media .media-slot{ aspect-ratio: 16/10; }
}

/* ==========================================================================
   4. TRANSFORMATIONS — fullscreen signature moment
   ========================================================================== */


.ba-compare{
  position: relative;
  height: auto;
  aspect-ratio: 16/9;
  max-height: 760px;
  min-height: 420px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
}
.ba-compare .media-slot{ position: absolute; inset: 0; }
.ba-compare .ba-after{
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 50%);
  transition: clip-path 0.9s var(--ease-lux);
}
.ba-compare.is-dragging .ba-after{ transition: none; }
.ba-scrim-bottom{
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0) 26%, rgba(5,5,5,0) 68%, rgba(5,5,5,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}
.ba-handle{
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--gold);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 3;
  transition: left 0.9s var(--ease-lux);
}
.ba-compare.is-dragging .ba-handle{ transition: none; }
.ba-handle::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: rgba(5,5,5,0.7);
  backdrop-filter: blur(6px);
}
.ba-handle::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%,-50%) rotate(45deg);
  border-right: 1px solid var(--gold);
  border-top: 1px solid var(--gold);
  box-shadow: -20px 0 0 -8px var(--gold);
}

.ba-heading{
  position: absolute;
  top: 40px; left: 0; right: 0;
  z-index: 3;
  pointer-events: none;
}
.ba-heading .eyebrow{ margin-bottom: 14px; }
.ba-heading .section-title{ font-size: clamp(28px, 3.4vw, 46px); }

.ba-tag{
  position: absolute; bottom: 68px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(248,248,248,0.4);
  pointer-events: none;
  z-index: 3;
}
.ba-tag.before-tag{ left: var(--side-padding); }
.ba-tag.after-tag{ right: var(--side-padding); }

.ba-case-switch{
  position: absolute;
  bottom: 24px; left: 0; right: 0;
  z-index: 4;
  display: flex;
  gap: 40px;
  align-items: baseline;
}
.ba-thumb{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  cursor: pointer;
}
/* Cada caso se identifica solo por su numero: los nombres no correspondian
   con las fotografias. El subrayado dorado que tenia el nombre pasa al numero
   para no perder la senal de cual esta activo. */
.ba-thumb .num{
  font-size: 13px;
  color: rgba(248,248,248,0.4);
  letter-spacing: 0.1em;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-slow) var(--ease-lux), border-color var(--dur-slow) var(--ease-lux);
}
.ba-thumb.is-active .num{ color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 900px){
  .ba-compare{ max-height: 520px; min-height: 360px; }
  .ba-case-switch{ overflow-x: auto; padding-right: var(--side-padding-mob); }
}
@media (max-width: 560px){
  .ba-compare{ aspect-ratio: 4/3; max-height: 380px; min-height: 280px; }
  .ba-heading{ top: 24px; }
  .ba-heading .eyebrow{ margin-bottom: 8px; }
  .ba-tag{ bottom: 52px; }
  .ba-case-switch{ bottom: 16px; gap: 20px; }
}

/* ==========================================================================
   5. PATIENT STORIES (Google Reviews)
   ========================================================================== */
.reviews{ background: var(--bg-secondary); }
.reviews-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.rating-block{ display: flex; align-items: center; gap: 28px; }
.rating-number{ font-size: 88px; font-weight: 200; color: var(--white); line-height: 1; }
.rating-meta{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray); letter-spacing: 0.03em; margin-top: 14px; }
.google-g{ width: 16px; height: 16px; }
.stars{ color: var(--gold); font-size: 24px; letter-spacing: 5px; }

.reviews-track-wrap{ overflow: hidden; }
.reviews-track{
  display: flex;
  gap: 56px;
  transition: transform var(--dur) var(--ease-lux);
}
.review-card{
  position: relative;
  flex: 0 0 clamp(320px, 36%, 500px);
  height: 76vh;
  min-height: 540px;
  overflow: hidden;
}
.review-card .media-slot{ position: absolute; inset: 0; }
.review-overlay{
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 40px 32px;
  background: linear-gradient(0deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.15) 70%, rgba(5,5,5,0) 100%);
}
.review-quote{ font-size: 16px; color: var(--white); font-weight: 300; line-height: 1.6; margin-bottom: 18px; max-width: 34ch; }
.review-name{ font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.review-source{ color: rgba(248,248,248,0.5); text-transform: none; letter-spacing: 0.02em; }

/* Live Google reviews: Google only provides the reviewer's small round
   account avatar (not a full photo), so it's shown contained + centered
   on a solid panel rather than stretched full-bleed like the manually
   uploaded patient cards. */
.review-card--live .media-slot{ background: var(--bg-secondary); display: flex; align-items: flex-start; justify-content: center; padding-top: 64px; }
.review-card--live .media-slot-img{
  position: static;
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.review-card--live .review-overlay{ background: linear-gradient(0deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.9) 55%, rgba(5,5,5,0) 100%); top: 0; }
.review-card--live .review-quote{ margin-top: 190px; }

/* Text-only cards: real, curated Google reviews with no attached photo.
   Compact panel instead of the tall full-bleed photo treatment. */
.review-card--text{
  flex-basis: clamp(300px, 28%, 380px);
  height: auto;
  min-height: 320px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.review-card--text .stars-row{ color: var(--gold); font-size: 16px; letter-spacing: 3px; margin-bottom: 22px; }
.review-card--text .review-quote{ position: static; max-width: none; margin: 0; }
.review-card--text .review-name{ display: block; margin-top: 24px; }

.review-card--interstitial{
  background: var(--bg-secondary);
  border-color: var(--gold);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
}
.review-card--interstitial .interstitial-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.review-card--interstitial .eyebrow{ margin-bottom: 24px; }
.interstitial-heading{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.35;
  color: var(--white);
  max-width: 26ch;
}
.review-cta{ margin-top: 32px; align-self: center; padding: 14px 28px; font-size: 14px; }

.reviews-nav{ display: flex; gap: 24px; }
.reviews-nav button{
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(190,190,190,0.55);
  transition: color var(--dur-slow) var(--ease-lux);
}
.reviews-nav button:hover{ color: var(--gold); }
.reviews-nav svg{ width: 14px; height: 14px; stroke: currentColor; }

.reviews-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 64px;
}
.reviews-dots{ display: flex; flex-wrap: wrap; gap: 8px; max-width: 200px; }
.reviews-dots button{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--dur) var(--ease-lux), transform var(--dur) var(--ease-lux);
}
.reviews-dots button.is-active{ background: var(--gold); transform: scale(1.4); }

@media (max-width: 640px){
  .review-card{ height: 52vh; min-height: 380px; }
  .review-card--text{ height: auto; min-height: 260px; flex-basis: 82vw; padding: 32px 26px; }
}

/* ==========================================================================
   6. OUR HOUSE (Facilities) — editorial collage
   ========================================================================== */
.facilities-collage{
  display: grid;
  /* minmax(0,1fr) por el mismo motivo que en las marcas: el minimo 'auto'
     incluiria el ancho intrinseco de las fotos. Aqui ya habia min-width:0 en
     las celdas, pero explicitarlo evita que el problema vuelva. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
  margin-top: 90px;
}
/* Re-planificado a 2 + 2 + 1, todo horizontal. Las cinco fotografias son
   8:5 (1920x1200), asi que los antiguos huecos verticales 3/4 obligaban a
   recortar el 53% del ancho de cada foto. */
.facility-1{ grid-column: span 3; }
.facility-2{ grid-column: span 3; }
.facility-3{ grid-column: span 3; }
.facility-4{ grid-column: span 3; }
.facility-5{ grid-column: span 6; }
.facility-1, .facility-2, .facility-3, .facility-4, .facility-5{ min-width: 0; }

.facility-1 .media-slot,
.facility-2 .media-slot,
.facility-3 .media-slot,
.facility-4 .media-slot{ aspect-ratio: 4/3; }
/* Banda panoramica: conserva todo el ancho y recorta alto. El 15% mantiene
   los tres rostros completos; validado con _ops/preview-crop.js. */
.facility-5 .media-slot{ aspect-ratio: 21/7; }
.facility-5 .media-slot-img{ object-position: center 15%; }

/* El titulo de la zona va SOBRE la fotografia. La tarjeta es el contexto de
   posicionamiento y el caption sale del flujo, de modo que la altura de la
   tarjeta pasa a ser exactamente la de la imagen. */
.facility-card{ position: relative; }

/* Overlay suave: degradado hacia el color de fondo del sitio para que el texto
   se lea sobre cualquier fotografia sin oscurecerla entera. */
.facility-card .media-slot::after{
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5,5,5,0)    36%,
    rgba(5,5,5,0.20) 58%,
    rgba(5,5,5,0.56) 80%,
    rgba(5,5,5,0.88) 100%
  );
}

.facility-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 30px 30px 26px;
  pointer-events: none;
}
/* Tipografia del propio sitio (Jost, var(--font-sans)): el numero en el estilo
   del .eyebrow, el nombre en el peso ligero de los titulares. */
.facility-caption .num{
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Remate editorial: linea dorada fina sobre el numero, que se alarga al pasar
   el cursor. */
.facility-caption .num::before{
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin-bottom: 13px;
  background: var(--gold);
  opacity: 0.9;
  transition: width 0.8s var(--ease-lux);
}
.facility-card:hover .facility-caption .num::before{ width: 46px; }
.facility-caption .name{
  font-family: var(--font-sans);
  font-size: 25px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--white);
  text-shadow: 0 1px 28px rgba(5,5,5,0.6);
}

@media (max-width: 900px){
  .facilities-collage{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
  .facility-1, .facility-2, .facility-3, .facility-4{ grid-column: span 1; }
  .facility-5{ grid-column: span 2; }
  .facility-1 .media-slot, .facility-2 .media-slot,
  .facility-3 .media-slot, .facility-4 .media-slot{ aspect-ratio: 4/3; }
  /* 16:10 coincide con el 8:5 original: aqui no hay recorte alguno. */
  .facility-5 .media-slot{ aspect-ratio: 16/10; }
  .facility-caption{ padding: 22px 22px 20px; }
  .facility-caption .name{ font-size: 20px; }
}
@media (max-width: 560px){
  /* 2x2 de tarjetas + banda panoramica a todo el ancho: con 5 elementos,
     dejar un hueco span 1 suelto crearia una celda vacia en la rejilla. */
  .facilities-collage{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
  .facility-1, .facility-2, .facility-3, .facility-4{ grid-column: span 1; }
  .facility-5{ grid-column: span 2; }
  .facility-1 .media-slot, .facility-2 .media-slot,
  .facility-3 .media-slot, .facility-4 .media-slot{ aspect-ratio: 1/1; }
  .facility-5 .media-slot{ aspect-ratio: 16/9; }
  .facility-caption{ padding: 16px 16px 14px; gap: 5px; }
  .facility-caption .num{ font-size: 9px; letter-spacing: 0.22em; }
  .facility-caption .num::before{ width: 18px; margin-bottom: 9px; }
  .facility-caption .name{ font-size: 15px; }
}

/* ==========================================================================
   7. MEDELLÍN EXPERIENCE
   ========================================================================== */
.medellin{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.medellin-media{ min-width: 0; }
.medellin-media .media-slot{ height: 100%; min-height: 620px; }
.medellin-panel{ padding: var(--v-space) var(--side-padding); min-width: 0; }
.map-slot{
  margin-top: 72px;
  max-width: 460px;
  position: relative;
  aspect-ratio: 4/3;
  background:
    linear-gradient(rgba(37,37,37,0.6) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, rgba(37,37,37,0.6) 1px, transparent 1px) 0 0/48px 48px,
    var(--bg-secondary);
}
.medellin-cta{ margin-top: 44px; }
.map-point{
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  transform: translate(-50%,-50%);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.map-point .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(200,164,106,0.14);
}
.map-point.is-primary{ color: var(--white); }
.map-point.is-primary .dot{ width: 9px; height: 9px; box-shadow: 0 0 0 8px rgba(200,164,106,0.22); }
@media (max-width: 1400px){ .medellin-panel{ padding: var(--v-space-tab) var(--side-padding-tab); } }
@media (max-width: 960px){
  .medellin{ grid-template-columns: 1fr; }
  .medellin-media .media-slot{ min-height: 380px; }
  .medellin-panel{ padding: var(--v-space-mob) var(--side-padding-mob); }
}

/* ==========================================================================
   8. THE JOURNEY (Process)
   ========================================================================== */
.process-list{ margin-top: 80px; }
.process-row{
  display: grid;
  grid-template-columns: 110px 1fr 2fr;
  gap: 48px;
  align-items: baseline;
  padding: 64px 0;
}
.process-num{ font-size: 14px; color: var(--gold); letter-spacing: 0.14em; }
.process-name{ font-size: clamp(28px,3.6vw,46px); font-weight: 300; }
.process-desc{ font-size: 17px; color: var(--gray); max-width: 380px; line-height: 1.55; }
@media (max-width: 800px){
  .process-row{ grid-template-columns: 56px 1fr; padding: 44px 0; }
  .process-desc{ grid-column: 2; margin-top: 10px; }
}
@media (max-width: 640px){
  .process-list{ margin-top: 40px; }
  .process-row{ padding: 14px 0; gap: 18px; }
  .process-desc{ margin-top: 6px; }
}

/* ==========================================================================
   9. Shared timer styles (used by the confirmation modal's offer countdown)
   ========================================================================== */
.timer{
  display: flex;
  justify-content: center;
  gap: 44px;
  margin: 64px 0;
}
.timer-unit{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.timer-value{ font-size: clamp(40px,5vw,64px); font-weight: 200; color: var(--gold); font-variant-numeric: tabular-nums; }
.timer-label{ font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.reservation-offer{ font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 8px; }
.reservation-offer strong{ color: var(--gold); font-weight: 400; }

/* ==========================================================================
   9. PRIORITY RESERVATIONS
   ========================================================================== */
.priority{ text-align: center; background: var(--bg-secondary); padding-top: var(--v-space); padding-bottom: var(--v-space); }
.priority-inner{ max-width: 720px; margin: 0 auto; }
.priority .section-title{ font-size: clamp(38px, 5.2vw, 68px); }
.priority .section-subtitle{ margin-top: 36px; margin-left: auto; margin-right: auto; }
@media (max-width: 1400px){ .priority{ padding-top: var(--v-space-tab); padding-bottom: var(--v-space-tab); } }
@media (max-width: 640px){ .priority{ padding-top: var(--v-space-mob); padding-bottom: var(--v-space-mob); } }

/* ==========================================================================
   10. CONSULTATION FORM
   ========================================================================== */
.consult{ background: var(--white); color: var(--bg); }
.consult .eyebrow{ color: var(--gold-dim); }
.consult .section-title{ color: var(--bg); }
.consult .section-subtitle{ color: #555; }
.consult-emotion{
  text-align: center;
  margin: 0 auto 100px;
}
.consult-emotion-line{
  font-family: var(--font-sans);
  font-weight: 200;
  text-transform: uppercase;
  font-size: clamp(44px, 7.4vw, 108px);
  color: var(--bg);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.consult-emotion-line .signature-word{ font-family: var(--font-serif); font-style: italic; font-weight: 300; text-transform: none; color: var(--gold-dim); }
.consult-layout{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
  margin-top: 64px;
}
.consult-layout > *{ min-width: 0; }
.consult-aside{ display: flex; flex-direction: column; gap: 48px; }
.consult-aside-item{ padding: 0; }
.consult-aside-item .k{ font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; display:block; }
.consult-aside-item .v{ font-size: 17px; color: #333; font-weight: 300; line-height: 1.5; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.field{ margin-bottom: 48px; }
.field.full{ grid-column: 1 / -1; }
.field label{
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 16px;
}
.field label .req{ color: var(--gold-dim); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field textarea{
  width: 100%;
  background: rgba(5,5,5,0.045);
  border: 1px solid rgba(5,5,5,0.16);
  border-radius: 2px;
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 300;
  color: var(--bg);
  transition: border-color var(--dur-slow) var(--ease-lux), background var(--dur-slow) var(--ease-lux);
}
.field input::placeholder, .field textarea::placeholder{ color: #999; }
.field input:focus, .field textarea:focus{ border-color: var(--gold-dim); background: rgba(5,5,5,0.07); }
.field textarea{ resize: vertical; min-height: 96px; }

.check-group{ display: flex; flex-wrap: wrap; gap: 14px 28px; }
.check-item{ display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check-item input{ appearance: none; width: 17px; height: 17px; border: 1px solid rgba(5,5,5,0.3); flex-shrink: 0; position: relative; cursor: pointer; }
.check-item input:checked{ border-color: var(--gold-dim); background: var(--gold-dim); }
.check-item input:checked::after{ content:''; position:absolute; left:5px; top:1px; width:4px; height:9px; border-right:1.5px solid #fff; border-bottom:1.5px solid #fff; transform: rotate(45deg); }
.check-item span{ font-size: 15px; color: #444; }

.radio-item input{ border-radius: 50%; }
.radio-item input:checked::after{ border: none; width: 7px; height: 7px; background: #fff; border-radius: 50%; left: 4px; top: 4px; transform: none; }

/* Cada campo muestra la fotografia de referencia del angulo que se pide, para
   que el paciente sepa exactamente que capturar. Va a TRES columnas: con seis,
   cada campo quedaba en ~105px y el angulo no se distinguia. Las referencias
   son apaisadas, asi que la caja tambien lo es (antes era vertical 3/4 y
   recortaba justo los dedos y retractores que identifican cada toma). */
/* Mismo arreglo que en las marcas. Las guias miden 363px de ancho: sin
   minmax(0,1fr) y min-width:0, Safari no dejaba encoger la columna por debajo
   de ese ancho y la rejilla de fotos se desbordaba en iPhone/iPad. */
.upload-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.upload-slot{
  display: block;
  border: 1px dashed rgba(5,5,5,0.28);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  min-width: 0;
  color: #8a8a8a;
  transition: border-color var(--dur-slow) var(--ease-lux);
}
.upload-slot:hover{ border-color: var(--gold-dim); }
.upload-slot input{ position:absolute; inset:0; opacity:0; cursor:pointer; z-index: 2; }
.upload-ref{
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: #111;
  transition: opacity var(--dur) var(--ease-lux);
}
.upload-cap{
  display: flex; align-items: baseline; gap: 7px;
  padding: 9px 11px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  transition: color var(--dur) var(--ease-lux);
}
.upload-cap .upload-num{ color: var(--gold-dim); font-weight: 500; }
.upload-cap em{ font-style: normal; opacity: 0.6; font-size: 9px; }
.upload-slot:hover .upload-cap{ color: var(--gold-dim); }
/* Con una foto ya elegida, la guia se atenua para no competir con la suya y
   aparece una marca de confirmacion en el pie. */
.upload-slot.has-file{ border-style: solid; border-color: var(--gold-dim); }
.upload-slot.has-file .upload-ref{ opacity: 0.3; }
.upload-slot.has-file .upload-cap::after{
  content: '\2713';
  margin-left: auto;
  font-size: 12px;
  color: var(--gold-dim);
}
@media (max-width: 640px){ .upload-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.form-note{ font-size: 13px; color: #888; margin-top: -10px; margin-bottom: 32px; }
.form-submit-error{ margin-top: 20px; font-size: 14px; color: #a23b2e; max-width: 440px; }
/* Estado del envio: progreso mientras se suben las fotos. El aviso de error
   ya existia (.form-submit-error) y se conserva tal cual. */
.form-progress{ margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gold-dim); }
.form-progress::before{ content:''; width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(143,120,80,0.25); border-top-color: var(--gold-dim); animation: formSpin .8s linear infinite; }
@keyframes formSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .form-progress::before{ animation: none; } }
/* El formulario de influencers vive sobre fondo oscuro: ahi el dorado claro se
   lee mejor que el apagado. */
.influencer-form-inner .form-progress{ color: var(--gold); }
.influencer-form-inner .form-progress::before{ border-color: rgba(200,164,106,0.25); border-top-color: var(--gold); }
/* Consentimiento: el texto es largo, asi que se alinea arriba. Se sube la
   especificidad (.check-item.consent-item) para no depender del orden. */
.check-item.consent-item{ align-items: flex-start; }
.check-item.consent-item input{ margin-top: 3px; }
.check-item.consent-item span{ font-size: 14px; line-height: 1.65; }
.consult .btn-primary{ margin-top: 8px; }

@media (max-width: 1100px){
  .consult-layout{ grid-template-columns: 1fr; gap: 60px; }
  .consult-aside{ position: static; display: flex; flex-wrap: wrap; gap: 24px 60px; order: 2; }
  .consult-aside-item{ border: none; padding: 0; flex: 1 1 200px; }
  .consult-form{ order: 1; }
}
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; gap: 0; }
  .field{ margin-bottom: 22px; }
  .field label{ margin-bottom: 8px; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="date"],
  .field textarea{ padding: 11px 14px; font-size: 16px; }
  .field textarea{ min-height: 76px; }
  .check-group{ gap: 10px 20px; }
  .upload-grid{ gap: 8px; margin-top: 4px; }
  .form-note{ margin-bottom: 20px; }
  .consult-emotion{ margin-bottom: 64px; }
  .consult-layout{ margin-top: 48px; gap: 36px; }
  .consult-aside{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-bottom: 8px;
  }
  .consult-aside-item .k{ margin-bottom: 5px; }
  .consult-aside-item .v{ font-size: 14px; line-height: 1.4; }
}

/* ==========================================================================
   11. INFLUENCER PROGRAM
   ========================================================================== */
.influencer{ position: relative; }
.influencer-media{ position: absolute; inset: 0; z-index: 1; }
.influencer-media .media-slot{ height: 100%; }
.influencer-media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,5,5,0.94) 0%, rgba(5,5,5,0.55) 60%, rgba(5,5,5,0.15) 100%);
  z-index: 2;
}
.influencer-content{ position: relative; z-index: 3; max-width: 620px; }
.influencer-content .section-subtitle{ color: var(--gray); }
.influencer-actions{ margin-top: 48px; display: flex; gap: 24px; flex-wrap: wrap; }

.influencer-form-wrap{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.9s var(--ease-lux);
  position: relative; z-index: 3;
}
.influencer-form-wrap.is-open{ max-height: 2400px; }
.influencer-form-inner{
  margin-top: 70px;
  padding-top: 8px;
  max-width: 900px;
}
.influencer-form-inner .field label{ color: var(--gray); }
.influencer-form-inner .field input, .influencer-form-inner .field textarea{
  color: var(--white);
  background: rgba(248,248,248,0.045);
  border: 1px solid rgba(248,248,248,0.18);
}
.influencer-form-inner .field input:focus, .influencer-form-inner .field textarea:focus{ border-color: var(--gold); background: rgba(248,248,248,0.07); }
.influencer-form-inner .check-item span{ color: var(--gray); }
.influencer-form-inner .check-item input{ border-color: rgba(248,248,248,0.3); }
.influencer-form-inner .check-item input:checked{ border-color: var(--gold); background: var(--gold); }
.influencer-form-inner .upload-slot{ border-color: rgba(248,248,248,0.22); color: var(--gray); }
.influencer-form-inner .upload-slot:hover{ border-color: var(--gold); color: var(--gold); }
.influencer-form-inner .form-note{ color: #777; }
.influencer-form-inner .form-submit-error{ color: #e08a7d; }

/* ==========================================================================
   BRANDS WE WORK WITH
   ========================================================================== */
.brands{ padding-bottom: 48px; }
/* Cuatro logos reales. Antes eran SEIS marcadores de posicion que decian
   literalmente "REPLACE WITH LOGO" y estaban en produccion. */
/* minmax(0, 1fr) en lugar de 1fr. '1fr' equivale a 'minmax(auto, 1fr)', y ese
   'auto' incluye el ANCHO INTRINSECO del logo. Safari lo aplica al pie de la
   letra, asi que las columnas no podian encogerse por debajo del ancho natural
   de cada imagen y la rejilla se desbordaba del ancho de pantalla; Chrome lo
   toleraba y por eso en Android se veia bien. Con el minimo en 0, las columnas
   siempre caben. */
.brands-grid{
  margin-top: 90px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.brand-logo{
  background: var(--bg);
  aspect-ratio: 16/10;
  padding: 32px;
  min-width: 0;              /* la celda puede encoger por debajo del logo */
  overflow: hidden;
}
/* El <picture> se declara explicitamente como bloque que llena la celda, en vez
   de depender de display:contents, que Safari ha tratado de forma irregular. */
.brand-logo picture{
  display: block;
  width: 100%;
  height: 100%;
}
/* El tamaño sale del contenedor, no del tamaño intrinseco de la imagen: asi el
   calculo es el mismo en todos los motores. */
.brand-logo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.6) contrast(0.9);
  opacity: 0.7;
  transition: opacity var(--dur-slow) var(--ease-lux), filter var(--dur-slow) var(--ease-lux);
  -webkit-user-drag: none;
}
/* Safari anterior a 15 no soporta aspect-ratio: la celda se quedaria sin alto y,
   con height:100% en la imagen, los logos se verian como huecos vacios. */
@supports not (aspect-ratio: 16/10){
  .brand-logo{ height: 150px; }
}
.brand-logo:hover img{
  opacity: 1;
  filter: grayscale(0) brightness(1) contrast(1);
}
@media (max-width: 900px){
  /* Con 4 logos, 3 columnas dejarian uno huerfano en la segunda fila: 2x2. */
  .brands-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .brands-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; }
  .brand-logo{ padding: 16px; }
  @supports not (aspect-ratio: 16/10){
    .brand-logo{ height: 88px; }
  }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer{ padding-top: 64px; padding-bottom: 0; }
.footer-minimal{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 64px;
}
.footer-minimal .logo-slot{ margin-bottom: 32px; }
.footer-minimal .logo-wordmark{ font-size: 20px; }

.footer-tagline{
  font-size: 15px;
  font-weight: 300;
  color: var(--gray);
  max-width: 360px;
  margin-bottom: 56px;
}

.footer-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
  margin-bottom: 80px;
}
.footer-links a{
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color var(--dur-slow) var(--ease-lux);
}
.footer-links a:hover{ color: var(--gold); }

.footer-bottom{
  font-size: 12px;
  color: #555;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.footer-disclaimer{ color: #444; }

@media (max-width: 900px){
  .site-footer{ padding-top: 48px; }
}
@media (max-width: 560px){
  .site-footer{ padding-top: 40px; }
  .footer-links{ gap: 18px 28px; margin-bottom: 64px; }
}

/* ==========================================================================
   Confirmation modal — post-submission Priority Reservation popup
   ========================================================================== */
.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5,5,5,0.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-lux), visibility 0s linear var(--dur);
}
.modal-overlay.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-lux), visibility 0s linear 0s;
}
.modal-panel{
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 72px 56px 56px;
  text-align: center;
  transform: translateY(24px) scale(0.98);
  transition: transform var(--dur) var(--ease-lux);
}
.modal-overlay.is-open .modal-panel{ transform: translateY(0) scale(1); }

.modal-close{
  position: absolute;
  top: 24px; right: 24px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray);
  transition: color var(--dur) var(--ease-lux);
}
.modal-close:hover{ color: var(--gold); }
.modal-close svg{ width: 16px; height: 16px; }

.modal-check{
  display: inline-flex;
  width: 56px; height: 56px;
  align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  margin-bottom: 28px;
}
.modal-check svg{ width: 26px; height: 26px; }

.modal-panel .eyebrow{ margin-bottom: 14px; }
.modal-heading{
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 20px;
  text-transform: uppercase;
}
.modal-body{
  font-size: 16px;
  color: var(--gray);
  max-width: 420px;
  margin: 0 auto 44px;
}
.modal-offer{
  padding: 8px 0 8px;
  margin-bottom: 40px;
}
.modal-offer .reservation-offer{ display: block; margin-bottom: 4px; }
.modal-timer{ gap: 30px; margin: 28px 0 20px; }
.modal-timer .timer-value{ font-size: clamp(32px, 4vw, 44px); }
.modal-fine{ font-size: 13px; color: #888; }
.modal-dismiss{ width: 100%; justify-content: center; }

@media (max-width: 560px){
  .modal-panel{ padding: 60px 28px 40px; }
  .modal-timer{ gap: 16px; }
}

/* ==========================================================================
   Sticky mobile bar
   ========================================================================== */
.sticky-bar{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  display: none;
  border-top: 1px solid var(--border);
  background: rgba(5,5,5,0.94);
  backdrop-filter: blur(16px);
}
.sticky-bar-inner{ display: flex; }
.sticky-bar a{
  flex: 1;
  text-align: center;
  padding: 18px 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sticky-bar .sticky-apply{ background: var(--gold); color: var(--bg); }
.sticky-bar .sticky-whatsapp{ display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--white); }
.sticky-bar .sticky-whatsapp svg{ width: 16px; height: 16px; }

@media (max-width: 900px){
  .sticky-bar{ display: block; }
  body{ padding-bottom: 58px; }
  /* La burbuja flotante ya cubre WhatsApp en movil: se oculta el acceso
     duplicado de la barra para no tener dos CTA de WhatsApp a la vez.
     Para recuperarlo, borra esta linea. */
  .sticky-bar .sticky-whatsapp{ display: none; }
}

/* ==========================================================================
   Burbuja flotante de WhatsApp
   Visible en todos los tamanos. En movil se eleva por encima de la barra fija
   (58px) para no taparla.
   ========================================================================== */
.wa-bubble{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 450;                     /* por encima de la barra fija (400) */
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;              /* verde oficial de WhatsApp */
  color: #fff;
  animation: wa-pulse 2.8s var(--ease-lux) infinite;
  transition: transform var(--dur-slow) var(--ease-lux);
}
.wa-bubble svg{ width: 30px; height: 30px; }
.wa-bubble:hover{ transform: translateY(-3px) scale(1.06); }
.wa-bubble:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

/* Halo que se expande y se desvanece: llama la atencion sin ser invasivo. */
@keyframes wa-pulse{
  0%   { box-shadow: 0 8px 26px rgba(0,0,0,0.45), 0 0 0 0    rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 8px 26px rgba(0,0,0,0.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 8px 26px rgba(0,0,0,0.45), 0 0 0 0    rgba(37,211,102,0); }
}

@media (max-width: 900px){
  .wa-bubble{ right: 16px; bottom: 74px; width: 52px; height: 52px; }
  .wa-bubble svg{ width: 27px; height: 27px; }
}

/* Respetar a quien pide menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce){
  .wa-bubble{ animation: none; box-shadow: 0 8px 26px rgba(0,0,0,0.45); }
}

/* ==========================================================================
   Mobile nav / responsive header
   ========================================================================== */
@media (max-width: 900px){
  .main-nav{
    position: fixed; inset: 0 0 0 auto;
    width: min(86vw, 380px);
    height: 100vh;
    background: var(--bg-secondary);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 120px 40px 40px;
    gap: 0;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease-lux);
    border-left: 1px solid var(--border);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav a{
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
  }
  .header-cta .btn-outline{ display: none; }
  .header-cta .btn-primary{ padding: 11px 20px; font-size: 11px; }
  .nav-toggle{ display: block; margin-left: 20px; }
}

/* ==========================================================================
   Misc responsive type
   ========================================================================== */
@media (max-width: 640px){
  .rating-number{ font-size: 48px; }
  .timer{ gap: 22px; }
  .review-card{ padding: 28px; }
  .benefits-bar{ padding: 40px 0; }
  .reviews-head{ margin-bottom: 56px; }
}

/* ==========================================================================
   Mobile letter-spacing correction — the wide desktop tracking values
   (tuned for large display type) read as too sparse/hard to scan at
   small mobile font sizes, so they're tightened here.
   ========================================================================== */
@media (max-width: 640px){
  .eyebrow{ letter-spacing: 0.18em; }
  .btn{ letter-spacing: 0.08em; }
  .btn-text{ letter-spacing: 0.06em; }
  .logo-wordmark{ letter-spacing: 0.14em; }
  .main-nav a{ letter-spacing: 0.08em; }
  .header-cta .btn{ letter-spacing: 0.06em; }
  .ba-tag{ letter-spacing: 0.14em; }
  .ba-thumb .num{ letter-spacing: 0.04em; }
  .rating-meta{ letter-spacing: 0.02em; }
  .review-name{ letter-spacing: 0.08em; }
  .facility-caption .num{ letter-spacing: 0.04em; }
  .process-num{ letter-spacing: 0.08em; }
  .timer-label{ letter-spacing: 0.12em; }
  .reservation-offer{ letter-spacing: 0.06em; }
  .consult-aside-item .k{ letter-spacing: 0.08em; }
  .field label{ letter-spacing: 0.06em; }
  .footer-links a{ letter-spacing: 0.08em; }
  .footer-bottom{ letter-spacing: 0.02em; }
  .modal-panel .eyebrow{ letter-spacing: 0.18em; }
}

/* ==========================================================================
   Mobile vertical rhythm — desktop's generous negative space between
   eyebrow / title / subtitle feels excessive on small screens, so it's
   tightened here (Journey and Online Consultation were the most visible
   cases, but this benefits every section using these same tokens).
   ========================================================================== */
@media (max-width: 640px){
  .eyebrow{ margin-bottom: 16px; }
  .section-subtitle{ margin-top: 18px; }
  .consult-emotion{ margin-bottom: 56px; }
  .consult-emotion-line{ line-height: 1.05; }
}