/* JM RinoLuxe premium enhancement layer — shared, non-destructive */
:root{--premium-ease:cubic-bezier(.22,1,.36,1);--premium-gold:#f0d08a;--premium-navy:#030b14}
html{scroll-behavior:smooth}
body{transition:opacity .16s ease;background-color:var(--premium-navy)}
body.page-leaving{opacity:.01}

/* Header refinement */
.header{transition:padding .28s var(--premium-ease),background .28s ease,box-shadow .28s ease,border-color .28s ease}
.header .logo{transition:width .28s var(--premium-ease),transform .28s var(--premium-ease)}
@media(min-width:1025px){
  .header.is-scrolled{padding-top:10px!important;padding-bottom:10px!important;background:rgba(3,11,20,.86)!important;backdrop-filter:blur(18px) saturate(118%)!important;-webkit-backdrop-filter:blur(18px) saturate(118%)!important;box-shadow:0 14px 35px rgba(0,0,0,.18);border-bottom:1px solid rgba(240,208,138,.13)}
  .header.is-scrolled .logo{width:min(255px,19vw)!important}
}

/* Navigation active/hover indicator */
.header .nav>a,.header .nav>.dropdown>.dropdown-trigger{position:relative}
.header .nav>a:not(.cta):not(.phone-link)::after,.header .nav>.dropdown>.dropdown-trigger::after{content:"";position:absolute;left:50%;right:50%;bottom:-7px;height:1px;background:linear-gradient(90deg,transparent,var(--premium-gold),transparent);transition:left .25s var(--premium-ease),right .25s var(--premium-ease),opacity .25s;opacity:0}
.header .nav>a:hover::after,.header .nav>a[aria-current="page"]::after,.header .nav>.dropdown>.dropdown-trigger:hover::after,.header .nav>.dropdown>.dropdown-trigger.is-current::after{left:8%;right:8%;opacity:1}

/* Premium CTA microinteraction */
.cta,.phone-link,.btn-outline,.doctor-more-btn,.faq-more-btn,.treatment-tabs button,.hero-socials a,.socials a{transition:transform .22s var(--premium-ease),box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease!important}
@media(hover:hover){
  .cta:hover,.phone-link:hover{transform:translateY(-2px) scale(1.025)!important;box-shadow:0 10px 35px rgba(201,154,69,.32)!important}
  .btn-outline:hover,.doctor-more-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
  .hero-socials a:hover,.socials a:hover{transform:translateY(-2px) scale(1.06);border-color:rgba(240,208,138,.9)!important}
}
.cta.premium-tap,.phone-link.premium-tap{transform:scale(.975)!important}

/* Hero video/poster handoff */
.hero-media{background:#030b14}
.hero-video{opacity:0;transition:opacity .65s ease!important;will-change:opacity}
.hero-video.is-ready{opacity:1}

/* Service navigation / accordion polish */
.service-panel-stack>.active,.mobile-inline-panel.active{animation:premiumPanelIn .34s var(--premium-ease)}
@keyframes premiumPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.service-nav-shell>.treatment-tabs button{position:relative;overflow:hidden}
@media(min-width:1025px){
  .service-nav-shell>.treatment-tabs button.active::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:3px;border-radius:4px;background:var(--premium-gold);box-shadow:0 0 14px rgba(240,208,138,.3)}
  .service-nav-shell>.treatment-tabs{scrollbar-width:thin;scrollbar-color:rgba(240,208,138,.38) transparent}
}
@media(max-width:1024px){
  .service-nav-shell>.treatment-tabs button[aria-expanded="true"]{box-shadow:0 10px 26px rgba(201,154,69,.12)}
}

/* Doctor refinement */
.doctor-flags{padding-bottom:3px}
.doctor-flag{transition:transform .2s var(--premium-ease),box-shadow .2s ease}
@media(hover:hover){.doctor-flag:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(201,154,69,.18)}}
.doctor-meta{position:relative;padding-bottom:17px!important}
.doctor-meta::after{content:"";position:absolute;left:0;bottom:4px;width:70px;height:1px;background:linear-gradient(90deg,var(--premium-gold),transparent)}
.doctor-more{overflow:hidden}
.doctor-more:not([hidden]){animation:premiumPanelIn .3s var(--premium-ease)}
@media(max-width:1024px){.doctor-meta::after{left:50%;transform:translateX(-50%)}}

/* Footer refinement */
.footer-main,footer{position:relative}
.footer-main::before,footer::before{content:"";position:absolute;left:7%;right:7%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(240,208,138,.22),transparent);pointer-events:none}
.footer-col a{transition:color .2s ease,transform .2s var(--premium-ease)}
@media(hover:hover){.footer-col a:hover{color:var(--premium-gold)!important;transform:translateX(3px)}}

/* WhatsApp: delayed, subtle label on pointer devices */
a.float{opacity:1;transform:none;transition:opacity .35s ease,transform .35s var(--premium-ease),box-shadow .2s ease!important}
.premium-enhanced a.float:not(.float-visible){opacity:0;transform:translateY(8px) scale(.96)}
a.float.float-visible{opacity:1;transform:none}
@media(hover:hover) and (min-width:1025px){
  a.float::before{content:"Agenda por WhatsApp";position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;background:rgba(3,11,20,.94);border:1px solid rgba(240,208,138,.28);color:#fff;padding:8px 11px;border-radius:999px;font-size:11px;font-weight:700;opacity:0;pointer-events:none;transition:.2s ease}
  a.float:hover::before{opacity:1;transform:translateY(-50%) translateX(0)}
}

/* Image motion is applied by JS only when in view; preserve layout */
.imgbox img,.doctor-photo img,.service-card img,.accordion-card img{backface-visibility:hidden}

/* Better keyboard focus without changing visual language */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--premium-gold)!important;outline-offset:4px!important}

/* Smooth FAQ and disclosure state */
.faq-item,.faq-answer,.doctor-more{transition:grid-template-rows .3s var(--premium-ease),opacity .3s ease}

/* Mobile/tablet: keep touch targets comfortable */
@media(max-width:1024px){
  .treatment-tabs button,.mobile-menu-btn,.doctor-more-btn{min-height:44px}
  .header{transition:background .25s ease,border-color .25s ease}
  .header.is-scrolled{background:rgba(3,11,20,.94)!important;border-bottom:1px solid rgba(240,208,138,.12)}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  body.page-leaving{opacity:1!important}
  .hero-video{opacity:1!important}
}
/* Modern image delivery: WebP source with original fallback, layout unchanged. */
picture.premium-picture{display:contents}

/* =========================================================
   JM RinoLuxe — V29 visual luxury layer
   Cosmetic-only enhancements: geometry/content remain intact.
   ========================================================= */
:root{
  --lux-gold:#e5b85c;
  --lux-gold-soft:#f3d58e;
  --lux-ink:#020810;
  --lux-panel:rgba(16,30,43,.76);
  --lux-line:rgba(229,184,92,.22);
  --lux-line-strong:rgba(243,213,142,.42);
  --lux-ease:cubic-bezier(.22,1,.36,1);
}

/* 1. Depth without changing the brand palette */
body{
  background:
    radial-gradient(900px 520px at 8% 18%,rgba(229,184,92,.045),transparent 67%),
    radial-gradient(820px 540px at 92% 52%,rgba(80,118,151,.055),transparent 70%),
    linear-gradient(180deg,#020911 0%,#030b14 48%,#020810 100%);
}
main{position:relative;isolation:isolate}
main::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(560px 420px at 22% 35%,rgba(229,184,92,.035),transparent 72%),
    radial-gradient(700px 500px at 77% 68%,rgba(89,130,160,.04),transparent 75%);
}

/* 2. Restrained glass treatment on information surfaces */
.card,.content-card,.doctor-card,.trust-badge,.faq-item,
.service-nav-shell>.treatment-tabs,
.service-panel-stack .card,.service-panel-stack .content-card{
  border-color:var(--lux-line)!important;
  background:linear-gradient(145deg,rgba(25,42,57,.78),rgba(7,18,30,.68))!important;
  box-shadow:0 24px 64px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(16px) saturate(112%);
  -webkit-backdrop-filter:blur(16px) saturate(112%);
}

/* 3 + 12. Editorial title accents and controlled dividers */
.faq-header,.doctor-card,.service-panel-stack>.active{position:relative}
.faq-header::after,.doctor-card::before{
  content:"";display:block;width:72px;height:1px;margin-top:20px;
  background:linear-gradient(90deg,var(--lux-gold-soft),rgba(229,184,92,0));
}
.doctor-card::before{position:absolute;top:30px;right:32px;margin:0;width:54px;opacity:.55}
.service-panel-stack>.active::before{
  content:"";display:block;width:64px;height:1px;margin:0 0 26px 2px;
  background:linear-gradient(90deg,var(--lux-gold-soft),transparent);opacity:.72;
}
.contact-strip::after{
  content:"";position:absolute;left:7%;right:7%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,213,142,.54),transparent);
}

/* 4. More breathing room and a calmer reading measure */
@media(min-width:1025px){
  .service-nav-shell{margin-top:62px!important;margin-bottom:88px!important;gap:48px!important}
  .service-panel-stack .card,.service-panel-stack .content-card{padding:48px!important}
  .service-panel-stack p,.service-panel-stack li{max-width:72ch}
  .doctor-section,.faq-section{padding-top:106px!important;padding-bottom:106px!important}
}

/* 5 + 6. Premium image frames and restrained hover motion */
.imgbox,.doctor-photo{
  position:relative;
  border-color:var(--lux-line-strong)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.32),0 0 0 1px rgba(243,213,142,.045)!important;
}
.imgbox::after,.doctor-photo::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(243,213,142,.13);
  border-radius:inherit;pointer-events:none;z-index:3;
}
.imgbox img,.doctor-photo img,.service-card img,.accordion-card img{
  transition:transform .75s var(--lux-ease),filter .55s ease!important;
  will-change:transform;
}
@media(hover:hover) and (min-width:1025px){
  .imgbox:hover img,.doctor-photo:hover img{transform:scale(1.025)}
  .imgbox:hover,.doctor-photo:hover{border-color:rgba(243,213,142,.48)!important}
}

/* 7. Desktop service rail feels designed, not merely functional */
@media(min-width:1025px){
  .service-nav-shell>.treatment-tabs{
    background:linear-gradient(180deg,rgba(13,28,42,.91),rgba(4,13,22,.88))!important;
    box-shadow:0 24px 58px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  .service-nav-shell>.treatment-tabs button{
    position:relative!important;padding-left:20px!important;
    transition:transform .28s var(--lux-ease),background .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease!important;
  }
  .service-nav-shell>.treatment-tabs button::after{
    content:"";position:absolute;left:10px;top:50%;width:4px;height:4px;border-radius:50%;
    background:var(--lux-gold-soft);transform:translateY(-50%) scale(0);opacity:0;transition:.25s var(--lux-ease);
  }
  .service-nav-shell>.treatment-tabs button.active::after{transform:translateY(-50%) scale(1);opacity:.95}
  .service-nav-shell>.treatment-tabs button.active{padding-left:25px!important}
  .service-nav-shell>.treatment-tabs button:not(.active):hover{transform:translateX(4px);border-color:rgba(243,213,142,.42)!important;background:rgba(255,255,255,.075)!important}
}

/* 8. Content swap has a soft cinematic entrance */
.service-panel-stack>.active{animation:luxPanelIn .42s var(--lux-ease)!important;transform-origin:50% 0}
@keyframes luxPanelIn{
  from{opacity:0;transform:translateY(9px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@media(max-width:1024px){
  .service-nav-shell .mobile-inline-panel.active{animation:luxPanelIn .36s var(--lux-ease)!important}
}

/* 9. Closing CTA becomes a deliberate final moment */
.contact-strip{
  position:relative;overflow:hidden!important;
  background:
    radial-gradient(520px 170px at 78% 50%,rgba(229,184,92,.11),transparent 68%),
    linear-gradient(100deg,#040b12 0%,#111008 52%,#040b12 100%)!important;
  border-color:rgba(229,184,92,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 -18px 60px rgba(0,0,0,.16);
}
.contact-strip h2{max-width:980px;letter-spacing:-.018em}
.contact-strip .cta{position:relative;z-index:1}
.contact-strip .cta::after{
  content:"";position:absolute;inset:-12px;border-radius:999px;z-index:-1;
  background:radial-gradient(circle,rgba(229,184,92,.18),transparent 68%);filter:blur(10px);opacity:.8;
}

/* 10. Doctor section: editorial specialist profile */
.doctor-grid{position:relative}
.doctor-photo{overflow:hidden}
.doctor-card h2{letter-spacing:-.028em}
.doctor-name-main,.doctor-name-surname{display:block}
.doctor-flags{gap:8px!important;margin-bottom:15px!important}
.doctor-flag{
  width:34px!important;height:23px!important;padding:2px!important;border-radius:6px!important;
  border:1px solid rgba(243,213,142,.26)!important;background:rgba(255,255,255,.035)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}
.doctor-more-btn{position:relative;overflow:hidden}
.doctor-more-btn::after{
  content:"";position:absolute;left:18%;right:18%;bottom:7px;height:1px;
  background:linear-gradient(90deg,transparent,var(--lux-gold-soft),transparent);opacity:.42;
}

/* 11. Social groups feel intentional */
.hero-socials{flex-wrap:wrap!important;position:relative}
.hero-socials::before{
  content:"Síguenos";flex:0 0 100%;text-align:center;color:rgba(243,213,142,.72);
  font-size:9px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;margin:0 0 1px;
}
.footer-bottom .socials{position:relative;padding-top:17px}
.footer-bottom .socials::before{
  content:"Síguenos";position:absolute;top:0;left:0;right:0;text-align:center;
  font-size:8px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,213,142,.6);
}

/* 13. Service numbering: quieter, editorial */
#servicesAccordion .accordion-number{
  font-size:16px!important;font-weight:700!important;letter-spacing:.18em!important;opacity:.84!important;
  text-shadow:0 2px 10px rgba(0,0,0,.35)!important;
}

/* 14. Metallic-gold highlight, not neon glow */
.hero h1 span,.hero-copy h1 span,.contact-strip h2 span,.doctor-name-surname,.faq-kicker,
.service-panel-stack [class*="kicker"],.service-panel-stack .eyebrow{
  text-shadow:0 0 18px rgba(229,184,92,.075);
}
.cta{background-size:160% 100%!important;background-position:0 0!important;transition:background-position .6s var(--lux-ease),transform .22s var(--lux-ease),box-shadow .22s ease!important}
@media(hover:hover){.cta:hover{background-position:100% 0!important}}

/* 15. Desktop scrollbar aligned with the brand */
@media(min-width:1025px){
  html{scrollbar-width:thin;scrollbar-color:rgba(201,154,69,.66) #050b11}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-track{background:#050b11}
  ::-webkit-scrollbar-thumb{background:linear-gradient(#c99a45,#8d692e);border:2px solid #050b11;border-radius:999px}
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(#e2bd70,#a77b35)}
}

/* 16. Initial content arrival — actual motion is triggered safely in JS */
.header,main,footer{transform-origin:50% 0}

/* 17. FAQ luxury treatment */
.faq-list{gap:14px!important}
.faq-item{
  overflow:hidden;border-radius:22px!important;
  background:linear-gradient(145deg,rgba(19,34,48,.82),rgba(6,16,26,.76))!important;
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s var(--lux-ease)!important;
}
.faq-item.open{border-color:rgba(243,213,142,.43)!important;box-shadow:0 20px 48px rgba(0,0,0,.22),inset 3px 0 0 rgba(229,184,92,.55)!important}
@media(hover:hover){.faq-item:not(.open):hover{transform:translateY(-2px);border-color:rgba(243,213,142,.31)!important}}
.faq-question span:last-child{
  transition:transform .32s var(--lux-ease),background .25s ease,border-color .25s ease!important;
}
.faq-item.open .faq-question span:last-child{transform:rotate(45deg)!important;background:rgba(229,184,92,.1)!important;border-color:rgba(243,213,142,.45)!important}

/* 18. More legible active state in the main navigation */
.header .nav>a[aria-current="page"]:not(.cta):not(.phone-link),
.header .nav>.dropdown>.dropdown-trigger.is-current{color:var(--lux-gold-soft)!important}
.header .nav>a:not(.cta):not(.phone-link)::after,.header .nav>.dropdown>.dropdown-trigger::after{height:2px!important;bottom:-9px!important;border-radius:3px}

/* Mobile/tablet tuning: same luxury language, no desktop-only hover assumptions */
@media(max-width:1024px){
  .doctor-flag{width:31px!important;height:21px!important}
  .service-panel-stack>.active::before{margin-top:12px;margin-bottom:20px}
  .contact-strip{text-align:center!important;justify-content:center!important}
  .contact-strip h2{width:100%}
  .hero-socials::before{font-size:8px;margin-top:2px}
  .imgbox::after,.doctor-photo::after{inset:7px}
  .faq-item{border-radius:19px!important}
}
@media(max-width:600px){
  .contact-strip{padding-top:42px!important;padding-bottom:42px!important}
  .doctor-card::before{right:22px;top:22px;width:40px}
  .doctor-flags{justify-content:center!important}
}

/* Keep all enhancements accessible for people who prefer less movement. */
@media(prefers-reduced-motion:reduce){
  .service-panel-stack>.active,.mobile-inline-panel.active{animation:none!important}
  .imgbox img,.doctor-photo img{transform:none!important}
}

/* V29 final visual calibration — make the premium layer perceptible, still restrained. */
.services{
  background-image:
    radial-gradient(720px 420px at 10% 18%,rgba(229,184,92,.075),transparent 68%),
    radial-gradient(680px 420px at 88% 72%,rgba(73,110,140,.08),transparent 70%),
    linear-gradient(rgba(3,11,20,.955),rgba(3,11,20,.975)),
    url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=1600&auto=format&fit=crop')!important;
}
.doctor-section{
  background:
    radial-gradient(600px 440px at 13% 18%,rgba(229,184,92,.09),transparent 68%),
    radial-gradient(720px 460px at 90% 80%,rgba(64,98,126,.08),transparent 70%),
    linear-gradient(120deg,#071827,#06121f 55%,#030b14)!important;
}
.faq-section{
  background:
    radial-gradient(620px 360px at 84% 12%,rgba(229,184,92,.055),transparent 70%),
    linear-gradient(180deg,rgba(3,11,20,.98),rgba(4,13,22,.98))!important;
}
.services>.title{position:relative;display:inline-block;margin-bottom:58px!important;text-shadow:0 8px 34px rgba(0,0,0,.22)}
.services>.title::after{
  content:"";display:block;width:74px;height:2px;margin-top:16px;
  background:linear-gradient(90deg,var(--lux-gold-soft),rgba(229,184,92,0));border-radius:2px;
}
.service-panel-stack .title,.service-panel-stack h2{letter-spacing:-.035em;text-wrap:balance}
.service-panel-stack .kicker{letter-spacing:.22em!important;color:var(--lux-gold-soft)!important}
@media(max-width:1024px){
  .services>.title{margin-bottom:42px!important}
  .services>.title::after{width:58px;margin-top:12px}
}

/* =========================================================
   JM RinoLuxe — V30 final art-direction pass
   Visible cosmetic enhancements only. No content or UX logic changed.
   ========================================================= */
:root{
  --v30-gold:#e9bd67;
  --v30-gold-pale:#f4d995;
  --v30-blue:#071726;
  --v30-ink:#02070d;
  --v30-ease:cubic-bezier(.2,.8,.2,1);
}

/* Clean photography: remove decorative frames, preserve micro-zoom. */
.imgbox,.doctor-photo{
  border-color:transparent!important;
  box-shadow:0 24px 70px rgba(0,0,0,.22)!important;
  background:transparent!important;
}
.imgbox::after,.doctor-photo::after{content:none!important;display:none!important}
@media(hover:hover) and (min-width:1025px){
  .imgbox:hover img,.doctor-photo:hover img{transform:scale(1.028)!important;filter:saturate(1.02) contrast(1.015)}
}

/* Stronger editorial rhythm: deep alternating zones without changing markup. */
.services,.doctor-section,.faq-section,.contact{position:relative;isolation:isolate;overflow:hidden}
.services::before,.doctor-section::after,.faq-section::after,.contact::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(2px);
}
.services::before{width:760px;height:760px;left:-360px;top:8%;background:radial-gradient(circle,rgba(233,189,103,.11),rgba(233,189,103,.025) 42%,transparent 70%)}
.doctor-section::after{width:840px;height:840px;right:-380px;top:-180px;background:radial-gradient(circle,rgba(104,151,190,.11),rgba(233,189,103,.035) 44%,transparent 72%)}
.faq-section::after{width:680px;height:680px;left:58%;bottom:-430px;background:radial-gradient(circle,rgba(233,189,103,.08),transparent 68%)}
.contact::after{width:760px;height:760px;right:-300px;bottom:-380px;background:radial-gradient(circle,rgba(233,189,103,.085),transparent 70%)}

/* Editorial section headings: more deliberate hierarchy. */
.services>.title,.faq-title,.results-heading{
  letter-spacing:-.035em!important;
  text-wrap:balance;
}
.faq-header::before,.results-heading::after{
  content:"JM RINOLUXE";display:block;color:var(--v30-gold);font-family:Inter,sans-serif;
  font-size:10px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;margin-bottom:12px;
}
.results-heading::after{content:"EXPERIENCIA · PRECISIÓN · ARMONÍA";margin-top:18px;margin-bottom:0;opacity:.78}

/* Service desktop navigation: confident selector with a strong selected state. */
@media(min-width:1025px){
  .service-nav-shell{grid-template-columns:minmax(230px,280px) minmax(0,1fr)!important;align-items:start!important}
  .service-nav-shell>.treatment-tabs{
    padding:14px!important;border-radius:26px!important;
    background:rgba(5,15,25,.78)!important;
    border:1px solid rgba(233,189,103,.22)!important;
    box-shadow:0 24px 60px rgba(0,0,0,.25)!important;
  }
  .service-nav-shell>.treatment-tabs button{
    min-height:52px!important;border-radius:15px!important;
    background:transparent!important;border:1px solid rgba(233,189,103,.22)!important;
    color:#f4d995!important;
  }
  .service-nav-shell>.treatment-tabs button.active{
    background:linear-gradient(135deg,#f0cb78,#c9943d)!important;color:#07111c!important;
    border-color:transparent!important;box-shadow:0 12px 30px rgba(201,148,61,.22)!important;
    transform:translateX(5px);
  }
  .service-nav-shell>.treatment-tabs button.active::before{width:0!important;box-shadow:none!important}
  .service-nav-shell>.treatment-tabs button.active::after{background:#07111c!important;left:12px!important}

  .service-panel-stack>.active{
    border-left:1px solid rgba(233,189,103,.18);
    padding-left:44px!important;
  }
}

/* Service panel headings get a recognisable white/gold editorial split when spans exist. */
.service-panel-stack .title,.service-panel-stack h2{
  text-shadow:0 16px 38px rgba(0,0,0,.2);
}
.service-panel-stack .kicker,.service-panel-stack .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
}
.service-panel-stack .kicker::before,.service-panel-stack .eyebrow::before{
  content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--v30-gold),transparent);
}

/* Doctor becomes a true hero profile; photo is clean and more protagonist. */
@media(min-width:1025px){
  .doctor-grid{grid-template-columns:1.08fr .92fr!important;gap:72px!important}
  .doctor-photo{min-height:650px!important;border-radius:30px!important}
  .doctor-card{padding:56px 54px!important;border-radius:30px!important}
  .doctor-card h2{font-size:clamp(58px,5.3vw,86px)!important;line-height:.9!important;margin-bottom:24px!important}
}
.doctor-card{
  background:linear-gradient(145deg,rgba(18,34,48,.88),rgba(6,16,27,.72))!important;
  border:1px solid rgba(233,189,103,.18)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.28)!important;
}
.doctor-card::before{display:none!important}
.doctor-flags{position:relative;padding-left:42px!important}
.doctor-flags::before{content:"FORMACIÓN INTERNACIONAL";position:absolute;left:0;top:-22px;color:rgba(244,217,149,.72);font-size:8px;font-weight:800;letter-spacing:.24em;white-space:nowrap}

/* Final CTAs: stronger, more cinematic closing moment. */
.contact-strip{
  min-height:210px!important;padding:58px 7%!important;
  background:
    radial-gradient(520px 220px at 78% 50%,rgba(233,189,103,.16),transparent 70%),
    linear-gradient(110deg,#02070d 0%,#100e08 50%,#02070d 100%)!important;
}
.contact-strip h2{font-size:clamp(42px,4.6vw,76px)!important;max-width:1000px!important}
.contact-strip .cta{padding:17px 28px!important;box-shadow:0 14px 38px rgba(201,148,61,.2)!important}

/* Socials deliberately belong to the CTA composition. */
.hero-socials{margin-top:13px!important;gap:10px!important}
.hero-socials::before{content:"SÍGUENOS"!important;margin-bottom:5px!important;color:rgba(244,217,149,.82)!important}
.hero-socials a{background:rgba(255,255,255,.02)!important;border-color:rgba(233,189,103,.42)!important}

/* FAQ: larger editorial accordions with visible hierarchy. */
.faq-wrap{max-width:1180px!important}
.faq-item{border:1px solid rgba(233,189,103,.18)!important;background:rgba(10,24,36,.76)!important}
.faq-question{padding-top:24px!important;padding-bottom:24px!important}
.faq-item.open{background:linear-gradient(135deg,rgba(20,37,51,.9),rgba(8,20,31,.84))!important}

/* Footer closes the brand with more authority. */
footer,.footer-main{background:linear-gradient(180deg,#02070d,#010407)!important}
.footer-main{padding-top:84px!important;padding-bottom:62px!important}
.footer-brand img{filter:drop-shadow(0 14px 32px rgba(0,0,0,.28))}
@media(min-width:1025px){.footer-brand img{transform:scale(1.08);transform-origin:left center}}

/* CTAs and links: visible but restrained premium response. */
@media(hover:hover){
  .cta:hover,.phone-link:hover{transform:translateY(-3px) scale(1.018)!important;filter:brightness(1.045)}
  .header .nav>a:not(.cta):not(.phone-link):hover{color:var(--v30-gold-pale)!important}
}

/* Branded watermark: subtle, decorative, never competes with content. */
.service-panel-stack,.doctor-grid,.faq-wrap{position:relative;isolation:isolate}
.service-panel-stack::after,.doctor-grid::after,.faq-wrap::after{
  content:"JM";position:absolute;z-index:-1;pointer-events:none;
  font-family:'Cormorant Garamond',serif;font-size:clamp(180px,18vw,360px);font-weight:300;line-height:1;
  color:rgba(233,189,103,.018);letter-spacing:-.08em;
}
.service-panel-stack::after{right:-4%;bottom:8%}
.doctor-grid::after{left:44%;bottom:-9%}
.faq-wrap::after{right:-5%;top:8%}

/* Section contrast creates visible rhythm. */
.results-section{background:linear-gradient(180deg,#071522 0%,#040d16 100%)!important}
.trust-badges{background:linear-gradient(180deg,#040b12,#07131f)!important}

/* Hero arrival: typography/CTA stagger is orchestrated in JS. */
.hero-copy h1,.hero-copy p,.hero-copy .hero-actions,.hero-copy .hero-socials,
.hero-text h1,.hero-text p,.hero-text .hero-actions,.hero-text .hero-socials{will-change:transform,opacity}

/* Mobile/tablet: keep the art direction, simplify geometry. */
@media(max-width:1024px){
  .service-panel-stack>.active{border-left:0!important;padding-left:0!important}
  .doctor-flags{padding-left:0!important;padding-top:18px!important}
  .doctor-flags::before{left:50%;top:0;transform:translateX(-50%)}
  .doctor-photo{box-shadow:0 20px 48px rgba(0,0,0,.2)!important}
  .doctor-card{box-shadow:0 20px 48px rgba(0,0,0,.2)!important}
  .contact-strip{min-height:auto!important;padding:46px 6%!important}
  .contact-strip h2{font-size:clamp(36px,8vw,54px)!important}
  .service-panel-stack::after,.doctor-grid::after,.faq-wrap::after{font-size:190px;opacity:.75}
  .services::before{width:520px;height:520px;left:-320px}
}
@media(max-width:600px){
  .doctor-card{padding:30px 24px!important}
  .doctor-card h2{font-size:clamp(43px,13vw,58px)!important}
  .contact-strip{padding:40px 5%!important}
  .contact-strip h2{font-size:36px!important;line-height:.98!important}
  .footer-main{padding-top:58px!important;padding-bottom:44px!important}
  .faq-header::before,.results-heading::after{font-size:8px;letter-spacing:.24em}
}

@media(prefers-reduced-motion:reduce){
  .imgbox img,.doctor-photo img{transition:none!important;transform:none!important}
  .service-nav-shell>.treatment-tabs button{transition:none!important}
}


/* =========================================================
   V32 final responsive stability pass
   Fixes horizontal overflow, ORL mobile hero, mobile/tablet
   full-frame video presentation, bfcache visual restoration,
   and removes redundant FAQ brand eyebrow.
   ========================================================= */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip!important;
}
@supports not (overflow-x:clip){html,body{overflow-x:hidden!important}}
body,main,header,footer,section{min-width:0;max-width:100%}
img,video,picture,svg{max-width:100%}

/* Redundant eyebrow above FAQ title is intentionally removed. */
.faq-header::before{content:none!important;display:none!important}

/* Mobile/tablet hero video: always preserve the complete 16:9 frame.
   A blurred poster fills unused vertical space so the hero still feels immersive. */
@media(max-width:1024px){
  .hero-media{
    position:relative!important;
    isolation:isolate;
    background:#02070d!important;
    overflow:hidden!important;
  }
  .hero-media::before{
    content:"";
    position:absolute;
    inset:-28px;
    z-index:0;
    background:
      linear-gradient(rgba(2,7,13,.38),rgba(2,7,13,.38)),
      url('hero-home-poster.jpg') center center/cover no-repeat;
    filter:blur(18px) saturate(.92);
    transform:scale(1.08);
    opacity:.88;
    pointer-events:none;
  }
  .hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(2,7,13,.08),rgba(2,7,13,.02) 58%,rgba(2,7,13,.16));
    pointer-events:none;
  }
  .hero-media>.hero-video{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:transparent!important;
  }
}
@media(max-width:600px){
  .page-home .hero{grid-template-rows:minmax(290px,44svh) auto!important}
  .page-home .hero-media{min-height:290px!important}
}

/* ORL has the longest service title. Keep it entirely inside the mobile viewport
   while preserving its two-line editorial hierarchy. */
@media(max-width:1024px){
  .page-orl .hero,
  .page-orl .hero-content,
  .page-orl .service-nav-shell,
  .page-orl .service-panel-stack,
  .page-orl .treatment,
  .page-orl .content-card{min-width:0!important;width:100%!important;max-width:100%!important}
  .page-orl .hero-content{overflow:hidden!important}
  .page-orl .hero h1{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:clamp(48px,9.2vw,72px)!important;
    line-height:.92!important;
    letter-spacing:-.045em!important;
    text-align:center!important;
  }
  .page-orl .hero h1 span{
    display:block!important;
    font-size:.74em!important;
    line-height:.96!important;
    letter-spacing:-.035em!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .page-orl .hero-lead{
    width:100%!important;
    max-width:680px!important;
    padding-inline:2px!important;
    margin-inline:auto!important;
    font-size:clamp(15px,2.6vw,17px)!important;
    line-height:1.65!important;
    overflow-wrap:anywhere;
  }
}
@media(max-width:600px){
  .page-orl .hero h1{font-size:clamp(44px,13vw,58px)!important}
  .page-orl .hero h1 span{font-size:.68em!important}
  .page-orl .hero-content{padding:30px 5% 34px!important}
  .page-orl .hero-lead{font-size:15px!important;line-height:1.58!important}
}

/* Defensive responsive containment. This does not mask desktop layout issues;
   it prevents transforms/long labels from creating a horizontal gesture surface. */
@media(max-width:1024px){
  .header,.nav,.hero,.hero-copy,.hero-content,.services,.services-accordion,
  .accordion-card,.doctor-section,.doctor-grid,.faq-section,.faq-wrap,
  .contact,.contact-strip,.footer-main,.footer-grid,.footer-bottom,
  .service-nav-shell,.service-panel-stack,.mobile-inline-panel,
  .content-card,.block,.organ-grid{
    max-width:100%!important;
  }
  .hero h1,.title,.subtitle,.faq-title,.doctor-card h2,.contact-strip h2{
    max-width:100%!important;
  }
}

@media(max-width:1024px){
  /* Decorative oversized JM watermarks were the main cross-viewport overflow risk. */
  .service-panel-stack::after,.doctor-grid::after,.faq-wrap::after{display:none!important;content:none!important}
}


/* V33 — Hero móvil/tablet 1:1 dedicado.
   Desktop permanece sin cambios. El video cuadrado ocupa todo el ancho y
   conserva el frame completo, incluida la marca de agua del master móvil. */
@media (max-width:1024px){
  .page-home .hero{
    grid-template-rows:auto auto!important;
    min-height:0!important;
  }
  .page-home .hero-media{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1 / 1!important;
    background:#02070d!important;
    overflow:hidden!important;
  }
  .page-home .hero-media::before,
  .page-home .hero-media::after{
    display:none!important;
    content:none!important;
  }
  .page-home .hero-media>.hero-video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    background:#02070d!important;
  }
}

/* Final UX adjustment: on tablet/mobile the dedicated phone CTA in the header menu
   is intentionally hidden; WhatsApp + 'Agenda una cita' remain available. */
@media (max-width: 1100px){
  .header .nav .phone-link,
  .header .nav.mobile-open .phone-link{
    display:none !important;
  }
}

/* V33 final mobile/tablet service accordion affordance.
   A consistent hand-pointer (not an emoji) signals that each service label is tappable. */
@media(max-width:1024px){
  .service-nav-shell>.treatment-tabs button{
    position:relative!important;
    padding-left:42px!important;
    padding-right:42px!important;
  }
  .service-nav-shell>.treatment-tabs button::before{
    content:"\f25a"!important;
    font-family:"Font Awesome 6 Free"!important;
    font-weight:400!important;
    position:absolute!important;
    right:16px!important;
    left:auto!important;
    top:50%!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    transform:translateY(-50%)!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    color:#f0d08a!important;
    opacity:.88!important;
    font-size:15px!important;
    line-height:1!important;
    pointer-events:none!important;
  }
  .service-nav-shell>.treatment-tabs button.active::before{
    color:#07111b!important;
    opacity:.9!important;
  }
}


/* V35 final physician-observation polish */
/* Service-page spacing after removing hero CTAs: deliberate but compact. */
@media(min-width:1025px){
  body:not(.page-home) .service-nav-shell{margin-top:30px!important}
}
@media(max-width:1024px){
  body:not(.page-home) .service-nav-shell{margin-top:20px!important}
}

/* Mobile/tablet services dropdown: simple centered text, no nested-card appearance. */
@media(max-width:1024px){
  .header .nav.mobile-open .dropdown.open .dropdown-menu{
    width:100%!important; min-width:0!important; padding:6px 0 0!important; margin:0!important;
    border:0!important; border-radius:0!important; background:transparent!important;
    box-shadow:none!important; backdrop-filter:none!important; transform:none!important;
    opacity:1!important; pointer-events:auto!important; align-items:center!important; gap:4px!important;
  }
  .header .nav.mobile-open .dropdown-menu a{
    width:auto!important; display:block!important; padding:7px 10px!important; margin:0!important;
    border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important;
    color:rgba(255,255,255,.78)!important; text-align:center!important; font-size:13px!important;
    font-weight:500!important; line-height:1.3!important; white-space:normal!important;
  }
  .header .nav.mobile-open .dropdown-menu a:hover,
  .header .nav.mobile-open .dropdown-menu a:focus-visible{color:#f0d08a!important;background:transparent!important}
  .page-home .hero-copy .buttons{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}
  .page-home .hero-copy .buttons .cta{width:auto!important;min-width:190px!important;margin-inline:auto!important}
}

/* Home service accordion desktop: title stays centered in every visual state. */
@media(min-width:1101px){
  #servicesAccordion .accordion-card .accordion-content,
  #servicesAccordion .accordion-card.active .accordion-content,
  #servicesAccordion .accordion-card:hover .accordion-content{
    left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:90%!important;text-align:center!important;
  }
  #servicesAccordion .accordion-card .accordion-content h3,
  #servicesAccordion .accordion-card.active .accordion-content h3,
  #servicesAccordion .accordion-card:hover .accordion-content h3{
    width:100%!important;max-width:100%!important;text-align:center!important;margin-inline:auto!important;
  }
}

/* Rinoplasty: dedicated art direction. Desktop uses horizontal artwork; tablet/mobile shows full vertical artwork. */
.page-rinoplastia .rinoplasty-hero-picture{display:block;width:100%;height:100%}
@media(min-width:1025px){
  .page-rinoplastia .hero{grid-template-rows:minmax(430px,70vh) auto!important}
  .page-rinoplastia .rinoplasty-hero-picture{height:100%!important;overflow:hidden!important}
  .page-rinoplastia .rinoplasty-hero-picture .hero-bg{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;background:#050d16!important}
}
@media(max-width:1024px){
  .page-rinoplastia .hero{grid-template-rows:auto auto!important;min-height:0!important}
  .page-rinoplastia .rinoplasty-hero-picture{height:auto!important;background:#050d16!important}
  .page-rinoplastia .rinoplasty-hero-picture .hero-bg{position:relative!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;display:block!important}
}

/* Final mobile/tablet rhinoplasty service card framing */
@media (max-width:700px){
  .services-accordion .accordion-card:first-child img{
    object-fit:contain!important;
    object-position:center center!important;
    background:#fff!important;
  }
}
@media (min-width:701px) and (max-width:1024px){
  .services-accordion .accordion-card:first-child img{
    object-fit:contain!important;
    object-position:center center!important;
    background:#fff!important;
  }
}

/* FINAL FIX: Rinoplastia service card - no image zoom */
@media (hover:hover) and (min-width:1025px){
  #servicesAccordion .accordion-card:first-child img,
  #servicesAccordion .accordion-card:first-child:hover img,
  .service-card.rinoplastia img,
  .service-card.rinoplastia:hover img{
    transform:none!important;
    scale:1!important;
  }
}

/* CHANGE 02 — Galería clínica de rinoplastia, home only */
.surgical-gallery{
  position:relative;
  overflow:hidden;
  padding:54px 0 68px;
  background:
    radial-gradient(circle at 50% 0%,rgba(213,165,74,.055),transparent 42%),
    #030b14;
  border-top:1px solid rgba(213,165,74,.13);
  border-bottom:1px solid rgba(213,165,74,.10);
}
.surgical-gallery::before,
.surgical-gallery::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:min(9vw,140px);
  pointer-events:none;
}
.surgical-gallery::before{left:0;background:linear-gradient(90deg,#030b14 8%,rgba(3,11,20,0));}
.surgical-gallery::after{right:0;background:linear-gradient(270deg,#030b14 8%,rgba(3,11,20,0));}
.surgical-gallery-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.surgical-gallery-viewport.is-dragging{cursor:grabbing;}
.surgical-gallery-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  will-change:transform;
}
.surgical-gallery-card{
  position:relative;
  flex:0 0 clamp(230px,20vw,310px);
  width:clamp(230px,20vw,310px);
  aspect-ratio:1/1;
  padding:0;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(213,165,74,.18);
  background:#07121e;
  box-shadow:0 16px 38px rgba(0,0,0,.24);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
}
.surgical-gallery-card::after,
.surgical-lightbox-image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:transparent;
}
.surgical-gallery-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
  transition:transform .42s ease,filter .42s ease;
}
@media (hover:hover) and (pointer:fine){
  .surgical-gallery-card:hover{
    transform:translateY(-4px);
    border-color:rgba(225,186,104,.46);
    box-shadow:0 22px 50px rgba(0,0,0,.33);
  }
  .surgical-gallery-card:hover img{transform:scale(1.025);filter:brightness(1.035);}
}
.surgical-lightbox{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  place-items:center;
  padding:28px;
  overscroll-behavior:contain;
}
.surgical-lightbox.is-open{display:grid;}
.surgical-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,11,.93);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.surgical-lightbox-stage{
  position:relative;
  z-index:1;
  display:inline-grid;
  place-items:center;
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:90vh;
}
.surgical-lightbox-image-wrap{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:90vh;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(213,165,74,.26);
  background:#020810;
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  -webkit-touch-callout:none;
  user-select:none;
  touch-action:pan-y;
}
.surgical-lightbox-image{
  display:block;
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:90vh;
  object-fit:contain;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
.surgical-lightbox-close,
.surgical-lightbox-nav{
  position:absolute;
  z-index:5;
  display:grid;
  place-items:center;
  border:1px solid rgba(225,186,104,.38);
  background:rgba(3,11,20,.82);
  color:#e1ba68;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:.22s ease;
  -webkit-tap-highlight-color:transparent;
}
.surgical-lightbox-close{
  top:16px;
  right:16px;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:32px;
  line-height:1;
}
.surgical-lightbox-nav{
  top:50%;
  width:48px;
  height:48px;
  border-radius:50%;
  transform:translateY(-50%);
  font-size:17px;
}
.surgical-lightbox-prev{left:16px;}
.surgical-lightbox-next{right:16px;}
.surgical-lightbox-close:hover,
.surgical-lightbox-nav:hover{background:#d5a54a;color:#06101a;border-color:#d5a54a;}
body.surgical-lightbox-open{overflow:hidden;}
@media (max-width:1024px){
  .surgical-gallery{padding:44px 0 56px;}
  .surgical-gallery-track{gap:14px;}
  .surgical-gallery-card{flex-basis:34vw;width:34vw;min-width:230px;max-width:300px;border-radius:16px;}
  .surgical-lightbox{padding:18px;}
  .surgical-lightbox-stage{width:auto;height:auto;max-width:94vw;max-height:86vh;}
  .surgical-lightbox-image-wrap{max-width:94vw;max-height:86vh;}
  .surgical-lightbox-image{max-width:94vw;max-height:86vh;}
  .surgical-lightbox-close{top:12px;right:12px;width:46px;height:46px;}
  .surgical-lightbox-nav{width:46px;height:46px;}
}
@media (max-width:600px){
  .surgical-gallery{padding:34px 0 46px;}
  .surgical-gallery::before,.surgical-gallery::after{width:8vw;}
  .surgical-gallery-track{gap:12px;}
  .surgical-gallery-card{flex-basis:78vw;width:78vw;min-width:0;max-width:340px;border-radius:15px;}
  .surgical-lightbox{padding:10px;}
  .surgical-lightbox-stage{width:auto;height:auto;max-width:calc(100vw - 20px);max-height:92dvh;}
  .surgical-lightbox-image-wrap{max-width:calc(100vw - 20px);max-height:92dvh;}
  .surgical-lightbox-image{max-width:calc(100vw - 20px);max-height:92dvh;}
  .surgical-lightbox-image-wrap{border-radius:15px;border-color:rgba(213,165,74,.22);}
  .surgical-lightbox-close{top:10px;right:10px;width:48px;height:48px;background:rgba(3,11,20,.9);}
  .surgical-lightbox-nav{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .surgical-gallery-card,.surgical-gallery-card img{transition:none;}
}

/* CHANGE 04 — Galería “Conoce nuestro trabajo” (Rinoplastia) */
.rinoplasty-work-gallery{padding-top:58px;}
.rinoplasty-work-title{
  position:relative;z-index:4;margin:0 auto 38px;padding:0 5%;text-align:center;
  color:#f7f4ee;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(42px,4.3vw,68px);line-height:1.02;letter-spacing:-.015em;
}
.rinoplasty-work-gallery .surgical-gallery-card{
  flex-basis:clamp(205px,17vw,270px);width:clamp(205px,17vw,270px);
  aspect-ratio:9/16;border-radius:18px;
}
.rinoplasty-work-gallery + .surgical-lightbox .surgical-lightbox-stage{width:auto;height:auto;max-width:92vw;max-height:92vh;}
.rinoplasty-work-gallery + .surgical-lightbox .surgical-lightbox-image-wrap{max-width:92vw;max-height:92vh;}
.rinoplasty-work-gallery + .surgical-lightbox .surgical-lightbox-image{max-width:92vw;max-height:92vh;}
@media(max-width:1024px){
  .rinoplasty-work-gallery{padding-top:48px;}
  .rinoplasty-work-title{margin-bottom:30px;font-size:clamp(40px,6vw,58px);}
  .rinoplasty-work-gallery .surgical-gallery-card{flex-basis:30vw;width:30vw;min-width:210px;max-width:270px;}
}
@media(max-width:600px){
  .rinoplasty-work-gallery{padding-top:38px;}
  .rinoplasty-work-title{margin-bottom:24px;font-size:42px;}
  .rinoplasty-work-gallery .surgical-gallery-card{flex-basis:66vw;width:66vw;min-width:0;max-width:285px;}
}

/* CHANGE 05 — Encabezado de la galería en la página principal */
.home-gallery-title{
  position:relative;z-index:4;margin:0 auto 38px;padding:0 5%;text-align:center;
  color:#f7f4ee;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  font-size:clamp(42px,4.3vw,68px);line-height:1.02;letter-spacing:-.015em;
}
@media(max-width:1024px){.home-gallery-title{margin-bottom:30px;font-size:clamp(40px,6vw,58px);}}
@media(max-width:600px){.home-gallery-title{margin-bottom:24px;font-size:42px;}}

/* FINAL RESPONSIVE HARDENING — galerías home + rinoplastia */
@media (max-width:1024px){
  .surgical-gallery .surgical-gallery-viewport{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
    min-width:0!important;
  }
  .surgical-gallery .surgical-gallery-track{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
  }
  .surgical-gallery .surgical-gallery-card{
    display:block!important;
    flex-grow:0!important;
    flex-shrink:0!important;
    align-self:center!important;
    margin:0!important;
  }
  .surgical-gallery .surgical-gallery-card img{
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
}
@media (max-width:600px){
  .home-gallery .surgical-gallery-card{
    flex:0 0 78vw!important;
    width:78vw!important;
    min-width:78vw!important;
    max-width:340px!important;
  }
  .rinoplasty-work-gallery .surgical-gallery-card{
    flex:0 0 66vw!important;
    width:66vw!important;
    min-width:66vw!important;
    max-width:285px!important;
  }
  .surgical-lightbox-stage,
  .surgical-lightbox-image-wrap,
  .surgical-lightbox-image{
    max-height:92vh;
    max-height:92dvh;
  }
}

/* FINAL CHANGE — Home Rinoplastia service card, tablet/mobile only */
@media (max-width:1100px){
  #servicesAccordion .accordion-card:first-child .rinoplastia-card-picture,
  #servicesAccordion .accordion-card:first-child .rinoplastia-card-picture img{
    width:100%!important;
    height:100%!important;
  }
  #servicesAccordion .accordion-card:first-child .rinoplastia-card-picture img{
    object-fit:cover!important;
    object-position:57% 50%!important;
    background:#fff!important;
  }
}

/* FINAL CHANGE — Home Rinoplastia service card, desktop only */
@media (min-width:1101px){
  #servicesAccordion .accordion-card:first-child .rinoplastia-card-picture,
  #servicesAccordion .accordion-card:first-child .rinoplastia-card-picture img{
    width:100%!important;
    height:100%!important;
  }
  #servicesAccordion .accordion-card:first-child .rinoplastia-card-picture img{
    object-fit:cover!important;
    object-position:55% 58%!important;
    background:#fff!important;
  }
  #servicesAccordion .accordion-card:first-child:is(.active,:hover) .rinoplastia-card-picture img{
    /* Expanded desktop state only: fill the card completely, with no letterboxing. */
    object-fit:cover!important;
    object-position:48% 58%!important;
    background:#091626!important;
  }
}

/* FINAL HOME GALLERY — preview 3:4 + slightly larger cards.
   Lightbox remains untouched and displays each original file at its real ratio. */
.home-gallery .surgical-gallery-card{
  flex:0 0 clamp(250px,21.5vw,340px);
  width:clamp(250px,21.5vw,340px);
  aspect-ratio:3/4;
}
@media (max-width:1024px){
  .home-gallery .surgical-gallery-card{
    flex-basis:36vw;
    width:36vw;
    min-width:240px;
    max-width:320px;
    aspect-ratio:3/4;
  }
}
@media (max-width:600px){
  .home-gallery .surgical-gallery-card{
    flex:0 0 80vw!important;
    width:80vw!important;
    min-width:80vw!important;
    max-width:350px!important;
    aspect-ratio:3/4!important;
  }
}

/* 2026-09-09 — approved mobile/tablet Rinoplastia card crop: 1.28x, nasal focus only. */
@media (max-width:1100px){
  #servicesAccordion .accordion-card:first-child .rinoplastia-card-picture img,
  #servicesAccordion .accordion-card:first-child:is(.active,:hover) .rinoplastia-card-picture img{
    object-fit:cover!important;
    object-position:56% 50%!important;
    transform:scale(1.28)!important;
    transform-origin:56% 50%!important;
  }
}

/* 2026-09-11 — Home gallery video cards: same 3:4 preview, full horizontal playback in lightbox. */
.surgical-gallery-video-card .surgical-gallery-play{
  position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  color:#f1cc7a;background:rgba(3,11,20,.76);border:1px solid rgba(225,186,104,.55);
  box-shadow:0 10px 28px rgba(0,0,0,.34);pointer-events:none;
}
.surgical-gallery-video-card .surgical-gallery-play i{margin-left:3px;font-size:19px;}
.surgical-lightbox-video{
  display:block;width:auto;height:auto;max-width:92vw;max-height:90vh;object-fit:contain;background:#000;
}
.surgical-lightbox-video[hidden]{display:none!important;}
@media(max-width:1024px){.surgical-lightbox-video{max-width:94vw;max-height:86vh;}}
@media(max-width:600px){.surgical-lightbox-video{max-width:calc(100vw - 20px);max-height:92dvh;}}

/* 2026-09-11 FINAL FIX — video controls in gallery lightbox must remain interactive. */
.surgical-lightbox-image-wrap::after{pointer-events:none!important;}
.surgical-lightbox-video{position:relative;z-index:3;pointer-events:auto!important;touch-action:auto;}