/* =========================================================
   Centro Médico Austral — Design tokens
   ========================================================= */
:root{
  --navy: #0F3653;
  --navy-deep: #0A2740;
  --teal: #2BB3C0;
  --teal-deep: #1C8A96;
  --teal-soft: #E4F4F5;
  --ink: #16232E;
  --ink-soft: #4B5C68;
  --bg: #FFFFFF;
  --bg-soft: #F4F8F9;
  --bg-soft-2: #EEF4F5;
  --line: #E2EAEC;
  --whatsapp: #25D366;
  --whatsapp-deep: #1DA851;
  --warm: #E2536E;
  --gold: #D9A441;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(15,54,83,0.06);
  --shadow-md: 0 12px 32px rgba(15,54,83,0.10);
  --shadow-lg: 0 24px 60px rgba(15,54,83,0.16);
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); margin:0; line-height:1.12; letter-spacing:-0.01em; }
p{ margin:0; }
section{ position:relative; }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding:0 24px; }
@media(min-width:768px){ .container{ padding:0 40px; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--teal-deep);
}
.eyebrow::before{ content:''; width:22px; height:2px; background: var(--teal); border-radius:2px; }

.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.75rem); margin-top:14px; }
.section-head p{ margin-top:16px; font-size:1.08rem; color: var(--ink-soft); }

.section-pad{ padding: 88px 0; }
@media(min-width:1024px){ .section-pad{ padding: 128px 0; } }
.bg-soft{ background: var(--bg-soft); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 30px; border-radius: 100px; font-weight:700; font-size:0.98rem;
  border:1.5px solid transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--whatsapp); color:#fff; box-shadow: 0 10px 24px rgba(37,211,102,0.30); }
.btn-primary:hover{ background: var(--whatsapp-deep); box-shadow: 0 14px 30px rgba(37,211,102,0.38); transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,0.55); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,0.12); border-color:#fff; transform: translateY(-2px); }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--navy); }
.btn-ghost:hover{ border-color: var(--teal); color: var(--teal-deep); background: var(--teal-soft); }
.btn-dark{ background: var(--navy); color:#fff; }
.btn-dark:hover{ background: var(--navy-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-sm{ padding:10px 18px; font-size:0.85rem; white-space:nowrap; }

/* Focus states for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px;
}

/* =========================================================
   Navbar
   ========================================================= */
.navbar{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 22px 0;
  transition: padding .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:10px; max-width: 1320px; }
.navbar.scrolled{
  padding: 12px 0;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 6px 24px rgba(15,54,83,0.08);
}
.brand{ display:flex; align-items:center; gap:10px; z-index:2; }
.brand img{ height:44px; width:auto; transition: height .4s var(--ease); }
.navbar.scrolled .brand img{ height:38px; }
.brand-word{ font-family: var(--font-display); font-weight:600; font-size:1.18rem; color:#fff; transition: color .4s var(--ease); line-height:1.05; }
.brand-word small{ display:block; font-family: var(--font-body); font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: rgba(255,255,255,0.75); }
.navbar.scrolled .brand-word{ color: var(--navy); }
.navbar.scrolled .brand-word small{ color: var(--teal-deep); }

.nav-links{ display:none; align-items:center; gap:0; }
.nav-links a{
  padding:9px 11px; border-radius:100px; font-size:0.85rem; font-weight:600; white-space:nowrap;
  color: rgba(255,255,255,0.92); transition: background-color .3s, color .3s;
}
.navbar.scrolled .nav-links a{ color: var(--ink); }
.nav-links a:hover{ background: rgba(255,255,255,0.16); }
.navbar.scrolled .nav-links a:hover{ background: var(--teal-soft); color: var(--teal-deep); }
.nav-cta{ display:none; align-items:center; gap:10px; }
.nav-actions{ display:flex; align-items:center; gap:14px; }

.burger{
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.5); background: transparent; z-index: 1200;
  transition: border-color .3s, background-color .3s;
}
.navbar.scrolled .burger{ border-color: var(--line); }
.burger span{ width:18px; height:2px; background:#fff; border-radius:2px; transition: all .35s var(--ease); }
.navbar.scrolled .burger span{ background: var(--navy); }
.burger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; z-index:1100;
  background: var(--navy);
  display:flex; flex-direction:column; justify-content:center;
  padding: 100px 32px 48px;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{
  font-family: var(--font-display); font-size:1.7rem; color:#fff; padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-menu .mm-cta{ margin-top: 30px; display:flex; flex-direction:column; gap:14px; }
.mobile-menu .mm-cta .btn{ width:100%; }

@media(min-width:1080px){
  .nav-links{ display:flex; }
  .nav-cta{ display:flex; }
  .burger{ display:none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position: relative; min-height: 100svh; display:flex; align-items:flex-end;
  overflow:hidden; background: var(--navy-deep);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center 30%; transform: scale(1.08); animation: heroZoom 18s ease-out forwards; }
@keyframes heroZoom{ to{ transform: scale(1); } }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(8,26,41,0.92) 0%, rgba(9,30,47,0.62) 42%, rgba(10,35,54,0.35) 68%, rgba(10,35,54,0.55) 100%);
}
.hero-content{ position:relative; z-index:1; width:100%; padding-bottom: 96px; padding-top: 170px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; color: #EAF9FA;
  font-size:0.8rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22);
  padding:8px 16px; border-radius:100px;
}
.hero h1{
  color:#fff; font-size: clamp(2.6rem, 6.4vw, 4.6rem); margin-top:22px; max-width: 15ch;
  text-wrap: balance;
}
.hero-sub{ color: rgba(255,255,255,0.94); font-size: clamp(1.08rem,2vw,1.32rem); max-width:46ch; margin-top:20px; font-weight:500; }
.hero-sub2{ color: rgba(255,255,255,0.72); font-size:1rem; max-width:44ch; margin-top:10px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }
.hero-scroll{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: rgba(255,255,255,0.85); font-size:0.78rem; font-weight:600; letter-spacing:0.04em;
  z-index:1; animation: floaty 2.6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }
.hero-scroll svg{ width:20px; height:20px; }

@media(prefers-reduced-motion: reduce){
  .hero-media img{ animation:none; transform:none; }
  .hero-scroll{ animation:none; }
}

/* =========================================================
   Reveal animations
   ========================================================= */
/* Reveal-on-scroll uses dedicated `animation` (not `transition`) so it can never
   be silently overridden by a component's own hover `transition` shorthand. */
@keyframes revealFadeUp{ from{ opacity:0; transform: translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes revealFadeScale{ from{ opacity:0; transform: scale(0.94); } to{ opacity:1; transform:none; } }
@keyframes revealFadeLeft{ from{ opacity:0; transform: translateX(-32px); } to{ opacity:1; transform:none; } }
@keyframes revealFadeRight{ from{ opacity:0; transform: translateX(32px); } to{ opacity:1; transform:none; } }

.reveal, .reveal-scale, .reveal-left, .reveal-right{ opacity:0; }
.reveal.in{ animation: revealFadeUp .8s var(--ease) forwards; }
.reveal-scale.in{ animation: revealFadeScale .8s var(--ease) forwards; }
.reveal-left.in{ animation: revealFadeLeft .8s var(--ease) forwards; }
.reveal-right.in{ animation: revealFadeRight .8s var(--ease) forwards; }
.stagger > *{ animation-delay: calc(var(--i,0) * 90ms) !important; }
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale,.reveal-left,.reveal-right{ opacity:1; animation:none; }
}

/* Curtain / mask reveal for headings — clip-path doesn't collide with any
   component's own `transition` shorthand, so a plain transition is safe here. */
.reveal-mask{ clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
.reveal-mask.in{ clip-path: inset(0 0 0% 0); }
@media (prefers-reduced-motion: reduce){
  .reveal-mask{ clip-path:none; transition:none; }
}

/* Scroll progress bar */
.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:0%; z-index:1050;
  background: linear-gradient(90deg, var(--teal), var(--navy));
  transition: width .1s linear;
}

/* Lightweight scroll parallax (translateY applied via JS transform).
   Oversized + absolutely positioned within an overflow:hidden frame so the
   shift never reveals an edge; the parent frame must be position:relative.
   Selectors are scoped to specific frame contexts and kept at higher
   specificity than each frame's own `img`/`video` sizing rule so they can't
   be silently overridden by cascade order (the exact bug fixed earlier for
   the reveal-on-scroll transitions). */
[data-parallax]{ will-change: transform; }
.media-frame img[data-parallax],
.reel-frame video[data-parallax],
.box-video-wrap video[data-parallax]{
  position: absolute; inset: -8% 0; width:100%; height:116%; object-fit:cover;
}

/* =========================================================
   Services grid (destacados)
   ========================================================= */
.services-grid{ display:grid; grid-template-columns: 1fr; gap:22px; }
@media(min-width:680px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media(min-width:1080px){ .services-grid{ grid-template-columns: repeat(4,1fr); } }

.service-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio: 3/4; background: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease), filter .5s; }
.service-card:hover img{ transform: scale(1.08); filter: brightness(0.9); }
.service-card::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(9,30,47,0.92) 0%, rgba(9,30,47,0.5) 45%, rgba(9,30,47,0.05) 70%);
}
.service-card-body{ position:absolute; left:0; right:0; bottom:0; padding: 26px; z-index:1; color:#fff; }
.service-num{ font-family: var(--font-display); font-size:0.85rem; color: rgba(255,255,255,0.6); }
.service-card-body h3{ color:#fff; font-size:1.5rem; margin-top:6px; }
.service-card-body p{
  color: rgba(255,255,255,0.82); font-size:0.92rem; margin-top:8px;
  max-height:0; opacity:0; overflow:hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease);
}
.service-card:hover .service-card-body p{ max-height:70px; opacity:1; margin-top:10px; }
.service-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-weight:700; font-size:0.88rem;
  color:#fff; border-bottom:1.5px solid var(--teal);
  transform: translateY(4px); opacity:0.85; transition: transform .4s var(--ease);
}
.service-card:hover .service-link{ transform: translateY(0); }
.service-link svg{ width:15px; height:15px; transition: transform .35s var(--ease); }
.service-card:hover .service-link svg{ transform: translateX(4px); }

/* =========================================================
   Feature sections (Odontología / Kinesiología / Lipedema / Estética)
   ========================================================= */
.feature{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
@media(min-width:980px){
  .feature{ grid-template-columns: 1fr 1fr; gap:64px; }
  .feature.reverse .feature-media{ order:2; }
  .feature.reverse .feature-text{ order:1; }
}
.feature-text h2{ font-size: clamp(2rem,3.6vw,2.9rem); margin-top:14px; }
.feature-text > p.lead{ margin-top:18px; font-size:1.12rem; color: var(--ink-soft); max-width:52ch; }

.pill-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pill{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:100px; background:#fff; border:1px solid var(--line);
  font-size:0.88rem; font-weight:600; color: var(--navy); box-shadow: var(--shadow-sm);
  transition: border-color .3s, transform .3s;
}
.pill:hover{ border-color: var(--teal); transform: translateY(-2px); }
.pill svg{ width:15px; height:15px; color: var(--teal-deep); flex-shrink:0; }

.feature-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.feature-media{ position:relative; }
.media-frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}
.media-frame img, .media-frame video{ width:100%; height:100%; object-fit:cover; }
.media-frame-sub{
  position:absolute; width:44%; aspect-ratio:4/5; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-lg); border:5px solid var(--bg);
  bottom:-32px; right:-28px;
}
.media-frame-sub img, .media-frame-sub video{ width:100%; height:100%; object-fit:cover; }
@media(max-width:640px){ .media-frame-sub{ width:40%; right:-14px; bottom:-24px; } }

.reel-frame{
  position:relative; width:min(300px, 78%); margin-inline:auto; aspect-ratio:9/16;
  border-radius: 28px; overflow:hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--navy);
  background: var(--navy);
}
.reel-frame video{ width:100%; height:100%; object-fit:cover; }
.reel-frame .reel-badge{
  position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:6px;
  background: rgba(9,30,47,0.55); color:#fff;
  padding:6px 12px; border-radius:100px; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
}
.reel-badge .dot{ width:7px; height:7px; border-radius:50%; background:#ff4d5e; box-shadow:0 0 0 3px rgba(255,77,94,0.25); }

/* Lipedema info list */
.info-steps{ margin-top:28px; display:grid; gap:16px; }
.info-step{ display:flex; gap:16px; padding:18px; background:#fff; border-radius: var(--radius-md); border:1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
.info-step:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.info-step .num{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; background: var(--teal-soft); color: var(--teal-deep);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:1.05rem;
}
.info-step h4{ font-size:1.05rem; color: var(--navy); }
.info-step p{ margin-top:4px; font-size:0.94rem; color: var(--ink-soft); }

.note-card{
  margin-top:26px; padding:18px 20px; border-radius: var(--radius-md); background: var(--teal-soft);
  border:1px solid rgba(43,179,192,0.25); font-size:0.94rem; color: var(--teal-deep); font-weight:600;
}

/* =========================================================
   Estética grid
   ========================================================= */
.estetica-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:680px){ .estetica-grid{ grid-template-columns: repeat(2,1fr); } }
.estetica-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:4/5;
  box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.estetica-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.estetica-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.estetica-card:hover img{ transform: scale(1.06); }
.estetica-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(10,35,54,0.85), rgba(10,35,54,0.05) 60%); }
.estetica-tag{
  position:absolute; left:20px; bottom:20px; z-index:1; color:#fff;
}
.estetica-tag h4{ color:#fff; font-family: var(--font-display); font-size:1.3rem; }
.estetica-tag p{ color: rgba(255,255,255,0.78); font-size:0.86rem; margin-top:4px; }
.estetica-list{ margin-top:36px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* =========================================================
   Por qué / trust
   ========================================================= */
.trust-grid{ display:grid; grid-template-columns: 1fr; gap:2px; background: var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); }
@media(min-width:640px){ .trust-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1080px){ .trust-grid{ grid-template-columns: repeat(5,1fr); } }
.trust-item{ background:#fff; padding: 36px 26px; text-align:center; transition: background-color .35s; }
.trust-item:hover{ background: var(--teal-soft); }
.trust-icon{
  width:56px; height:56px; margin:0 auto; border-radius:50%; background: var(--navy);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition: transform .4s var(--ease), background-color .4s;
}
.trust-item:hover .trust-icon{ transform: scale(1.08) rotate(-4deg); background: var(--teal-deep); }
.trust-icon svg{ width:24px; height:24px; }
.trust-item h4{ margin-top:18px; font-size:1.02rem; color: var(--navy); }
.trust-item p{ margin-top:8px; font-size:0.86rem; color: var(--ink-soft); }

/* =========================================================
   Arriendo de Box
   ========================================================= */
.box-section{ background: var(--navy-deep); color:#fff; position:relative; overflow:hidden; }
.box-section .eyebrow{ color: #7FE0E6; }
.box-section .eyebrow::before{ background:#7FE0E6; }
.box-section .section-head h2{ color:#fff; }
.box-section .section-head p{ color: rgba(255,255,255,0.72); }
.box-video-wrap{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 16/10; box-shadow: var(--shadow-lg);
}
.box-video-wrap video, .box-video-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.box-video-wrap::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(6,20,32,0.55), transparent 55%); }

.box-benefits{ margin-top:28px; display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:560px){ .box-benefits{ grid-template-columns: 1fr 1fr; } }
.box-benefit{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius: var(--radius-md); background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); }
.box-benefit svg{ width:19px; height:19px; color:#7FE0E6; flex-shrink:0; margin-top:2px; }
.box-benefit span{ font-size:0.94rem; color: rgba(255,255,255,0.88); }

.box-audience{ margin-top:26px; }
.box-audience p.label{ font-size:0.86rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color: rgba(255,255,255,0.55); margin-bottom:12px; }
.audience-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.audience-tags span{ padding:9px 16px; border-radius:100px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); font-size:0.86rem; color:#fff; }

.box-gallery{ margin-top:64px; display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
@media(min-width:768px){ .box-gallery{ grid-template-columns: repeat(4,1fr); } }
.box-gallery a{ position:relative; display:block; border-radius: var(--radius-md); overflow:hidden; aspect-ratio:4/5; }
.box-gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.box-gallery a:hover img{ transform: scale(1.08); }

.box-cta-card{
  margin-top:64px; border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(43,179,192,0.16), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.14); padding: 40px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
.box-cta-card h3{ color:#fff; font-size:1.5rem; max-width:26ch; }
.box-cta-card p{ color: rgba(255,255,255,0.7); margin-top:8px; max-width:40ch; }

/* =========================================================
   Gallery / Experience
   ========================================================= */
.masonry{
  columns: 2; column-gap:14px;
}
@media(min-width:768px){ .masonry{ columns:3; column-gap:18px; } }
.masonry figure{ margin:0 0 14px; break-inside: avoid; border-radius: var(--radius-md); overflow:hidden; position:relative; box-shadow: var(--shadow-sm); }
@media(min-width:768px){ .masonry figure{ margin-bottom:18px; } }
.masonry img, .masonry video{ width:100%; display:block; transition: transform .7s var(--ease); }
.masonry figure:hover img, .masonry figure:hover video{ transform: scale(1.05); }
.masonry figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px; color:#fff; font-size:0.86rem; font-weight:600;
  background: linear-gradient(0deg, rgba(9,30,47,0.85), transparent);
  opacity:0; transform: translateY(6px); transition: opacity .4s, transform .4s;
}
.masonry figure:hover figcaption{ opacity:1; transform:none; }

/* =========================================================
   Final CTA
   ========================================================= */
.final-cta{
  position:relative; background: var(--navy); color:#fff; overflow:hidden;
  padding: 100px 0;
}
.final-cta::before{
  content:''; position:absolute; width:640px; height:640px; border-radius:50%;
  background: radial-gradient(circle, rgba(43,179,192,0.35), transparent 70%);
  top:-260px; right:-180px; pointer-events:none;
}
.final-cta::after{
  content:''; position:absolute; width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle, rgba(226,83,110,0.18), transparent 70%);
  bottom:-220px; left:-160px; pointer-events:none;
}
.final-cta-inner{ position:relative; text-align:center; max-width:680px; margin:0 auto; }
.final-cta h2{ color:#fff; font-size: clamp(2.1rem,4.4vw,3.2rem); }
.final-cta p{ color: rgba(255,255,255,0.76); margin-top:18px; font-size:1.12rem; }
.final-cta .ctas{ margin-top:38px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* =========================================================
   Footer
   ========================================================= */
footer{ background: var(--navy-deep); color: rgba(255,255,255,0.7); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:40px; }
@media(min-width:768px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:24px; } }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ height:42px; }
.footer-word{ font-family: var(--font-display); color:#fff; font-size:1.1rem; }
.footer-word small{ display:block; font-family: var(--font-body); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.footer p.desc{ margin-top:16px; font-size:0.92rem; max-width:34ch; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; transition: background-color .3s, border-color .3s; }
.footer-social a:hover{ background: var(--teal); border-color: var(--teal); }
.footer-social svg{ width:16px; height:16px; color:#fff; }
.footer h5{ color:#fff; font-family: var(--font-body); font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:18px; }
.footer-links li{ margin-bottom:11px; }
.footer-links a{ font-size:0.92rem; transition: color .3s, padding-left .3s; }
.footer-links a:hover{ color:#fff; padding-left:4px; }
.footer-contact li{ margin-bottom:13px; display:flex; gap:10px; font-size:0.92rem; align-items:flex-start; }
.footer-contact svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color: var(--teal); }
.footer-bottom{ margin-top:52px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:0.82rem; }

/* =========================================================
   WhatsApp Floating Button
   ========================================================= */
.wa-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width:60px; height:60px; border-radius:50%; background: var(--whatsapp);
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 28px rgba(37,211,102,0.42);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float:hover{ transform: scale(1.07); box-shadow: 0 14px 34px rgba(37,211,102,0.5); }
.wa-float svg{ width:30px; height:30px; color:#fff; }
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:50%; background: var(--whatsapp);
  animation: pulse 2.6s ease-out infinite; z-index:-1;
}
@keyframes pulse{
  0%{ transform: scale(1); opacity:0.55; }
  100%{ transform: scale(1.9); opacity:0; }
}
@media(prefers-reduced-motion: reduce){ .wa-float::before{ animation:none; } }
@media(max-width:640px){
  .wa-float{ width:54px; height:54px; right:16px; bottom:16px; }
  .wa-float svg{ width:26px; height:26px; }
}

/* Skip link */
.skip-link{
  position:absolute; left:12px; top:-60px; background:#fff; color:var(--navy); padding:12px 18px;
  border-radius:8px; z-index:2000; font-weight:700; transition: top .3s;
}
.skip-link:focus{ top:12px; }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* =========================================================
   Armonización Orofacial (Bótox & Mesoterapia) — sub-section of Estética
   ========================================================= */
.orofacial-wrap{ margin-top:76px; padding-top:56px; border-top:1px solid var(--line); }
.orofacial-grid{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:8px; max-width:920px; margin-left:auto; margin-right:auto; }
@media(min-width:720px){ .orofacial-grid{ grid-template-columns:1fr 1fr; } }

.oro-card{
  display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; box-shadow:var(--shadow-sm); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.oro-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.oro-media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.oro-media img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; transition:transform .8s var(--ease); }
.oro-card:hover .oro-media img{ transform:scale(1.06); }
.oro-body{ padding:26px 26px 28px; }
.oro-body h4{ font-size:1.4rem; color:var(--navy); }
.oro-desc{ margin-top:8px; font-size:0.92rem; color:var(--ink-soft); }

.oro-price-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:18px; padding:14px 18px; border-radius:var(--radius-md); background:var(--bg-soft);
  border:1px solid var(--line);
}
.oro-price-row + .oro-price-row{ margin-top:10px; }
.oro-price-row.oro-highlight{ background:var(--teal-soft); border-color:rgba(43,179,192,0.28); }
.oro-name{ font-weight:700; color:var(--navy); font-size:0.96rem; }
.oro-sessions{ display:block; font-size:0.8rem; color:var(--ink-soft); font-weight:500; margin-top:2px; }
.oro-price{ font-family:var(--font-display); font-size:1.28rem; color:var(--teal-deep); white-space:nowrap; }

.oro-note{
  margin-top:14px; display:flex; align-items:center; gap:8px;
  font-size:0.84rem; color:var(--teal-deep); font-weight:600;
}
.oro-note svg{ width:16px; height:16px; flex-shrink:0; }