/* Additive-only effects. Existing colors, booking form and widget stay intact. */
.yudi-card-more{display:inline-flex;margin-top:16px;padding-top:12px;font-size:12px;font-weight:800;letter-spacing:.07em;color:#936723;border-top:1px solid #e8d4ad;transition:letter-spacing .25s,transform .25s}
.service-card:hover .yudi-card-more,.service-card:focus-visible .yudi-card-more{letter-spacing:.11em;transform:translateX(4px)}
.service-card:focus-visible{outline:3px solid #bd9353;outline-offset:4px}
.yudi-mobile-ticker{display:none}
.yudi-swirl-gateway{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at center,#fff9ef 0%,#d0aa65 50%,#4d3319 100%);animation:yudiGatewayIn .68s cubic-bezier(.22,1,.36,1) both;pointer-events:all}
.yudi-swirl-gateway::before{content:"";position:absolute;inset:-80%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff6dc00 0deg,#fff6dc55 11deg,#8b632b55 20deg,#fff7e100 31deg);filter:blur(18px);animation:yudiSpin .7s ease-in both}
.yudi-swirl-gateway span{position:relative;color:#3d2a18;font:500 clamp(24px,5vw,58px)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.03em;text-align:center;padding:20px;text-shadow:0 2px 20px #ffffffaa;animation:yudiGatewayTitle .7s both}
.yudi-is-transitioning{overflow:hidden}
@keyframes yudiSpin{from{transform:rotate(-90deg) scale(.1);filter:blur(50px)}to{transform:rotate(250deg) scale(1.5);filter:blur(12px)}}
@keyframes yudiGatewayIn{from{opacity:0;clip-path:circle(0% at 50% 50%)}to{opacity:1;clip-path:circle(95% at 50% 50%)}}
@keyframes yudiGatewayTitle{from{opacity:0;transform:rotate(-8deg) scale(.85)}to{opacity:1;transform:rotate(0deg) scale(1)}}
@media(max-width:768px){
 .announcement{overflow:hidden;white-space:nowrap;position:relative;min-height:34px;font-size:0!important;padding:8px 0!important}
 .announcement>span{display:none}
 .announcement .yudi-mobile-ticker{display:flex;width:max-content;animation:yudiTicker 20s linear infinite;font-size:10px;letter-spacing:.13em;font-weight:800;text-transform:uppercase}
 .yudi-mobile-ticker span{flex:0 0 auto;padding:0 30px 0 0;color:#fff7e7}
 @keyframes yudiTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
 .hero-content h1,.feature-copy h2,.booking-left h2,.section-top h2{will-change:transform;animation:yudiHeadingSway 6s ease-in-out infinite alternate;transform-origin:center left;padding-right:12px}
 .service-card{border-radius:17px!important;box-shadow:0 12px 30px #5d412018}
 .yudi-card-more{background:linear-gradient(110deg,#f9ead1,#e5c48f);padding:13px 16px;border:1px solid #d6b078;border-radius:12px;justify-content:center;width:100%;box-shadow:0 5px 17px #b58b4825}
 @keyframes yudiHeadingSway{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
}
@media(prefers-reduced-motion:reduce){.yudi-mobile-ticker,.hero-content h1,.feature-copy h2,.booking-left h2,.section-top h2,.yudi-swirl-gateway,.yudi-swirl-gateway::before,.yudi-swirl-gateway span{animation:none!important;transform:none!important}}


/* ============================================================
   SKINCARE BY YUDI | Explore options animated-letter CTA
   This file changes only the Explore options labels.
   Does not override card photos, WhatsApp links or page routes.
   ============================================================ */
.services .service-card .yudi-card-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  width: 100%;
  min-height: 46px;
  margin-top: 17px;
  padding: 12px 15px;
  border: 1px solid #dec08c;
  border-radius: 11px;
  background: linear-gradient(112deg, #fffaf0 0%, #f0deb9 48%, #fff7e6 100%);
  box-shadow: inset 0 1px 0 #fff9e9, 0 5px 15px rgba(120,81,35,.10);
  color: #78501f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition: box-shadow .25s ease, border-color .25s ease,
              transform .25s ease, background .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.services .service-card .yudi-card-more::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  transform: translateX(-150%);
  animation: yudiExploreGleam 7s ease-in-out infinite;
}
.services .service-card .yudi-explore-wording {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}
.services .service-card .yudi-explore-letter {
  display: inline-block;
  transform: translateY(0);
  transform-origin: center bottom;
  animation: yudiExploreWave 3.5s ease-in-out infinite;
  animation-delay: calc(var(--yudi-letter-index, 0) * 65ms);
  will-change: transform;
}
.services .service-card .yudi-explore-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transform: translateX(0);
  animation: yudiExplorePoint 2.6s ease-in-out infinite;
}
.services .service-card:hover .yudi-card-more,
.services .service-card:focus-visible .yudi-card-more,
.services .service-card:focus-within .yudi-card-more {
  transform: translateY(-2px);
  border-color: #bb8b48;
  box-shadow: inset 0 1px 0 #fffbf0, 0 10px 22px rgba(113,75,30,.20);
  background: linear-gradient(110deg, #f8e4b6, #fff5db 55%, #ecd19a);
  letter-spacing: .02em; /* avoid horizontal layout jumps */
}
.services .service-card:hover .yudi-explore-arrow,
.services .service-card:focus-visible .yudi-explore-arrow {
  animation-duration: 1.5s;
}
@keyframes yudiExploreWave {
  0%, 8%, 34%, 100% { transform: translateY(0); }
  15% { transform: translateY(-4px); }
  23% { transform: translateY(1px); }
}
@keyframes yudiExplorePoint {
  0%, 65%, 100% { transform: translate(0, 0); }
  78% { transform: translate(4px, -3px); }
  89% { transform: translate(1px, -1px); }
}
@keyframes yudiExploreGleam {
  0%, 75%, 100% { transform: translateX(-150%); }
  89% { transform: translateX(150%); }
}
@media (max-width: 768px) {
  .services .service-card .yudi-card-more {
    min-height: 52px;
    font-size: 12px;
    padding: 14px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .services .service-card .yudi-card-more::before,
  .services .service-card .yudi-explore-letter,
  .services .service-card .yudi-explore-arrow {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}



/* Yudi Gold Services Carousel — additive and scoped to the public services grid. */
.services .yudi-service-carousel-controls{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:-12px 0 24px;position:relative;z-index:2;
}
.services .yudi-carousel-hint{
  display:inline-flex;align-items:center;gap:9px;color:#8c6a39;font-family:'Manrope',sans-serif;
  font-size:10px;font-weight:800;letter-spacing:.15em;
}
.services .yudi-carousel-hint:before{content:'✧';font-size:18px;color:#d9b36c;animation:yudiCarouselShimmer 3.6s ease-in-out infinite}
.services .yudi-carousel-buttons{display:flex;gap:12px;align-items:center}
.services button.yudi-carousel-arrow{
  display:grid;place-items:center;width:53px;height:53px;border-radius:50%;
  border:1px solid #d3af6d;color:#8c5b17;font-size:25px;line-height:1;
  background:linear-gradient(135deg,#fffefa 4%,#fcf0d6 53%,#ead1a0 100%);
  box-shadow:0 7px 20px rgba(133,83,18,.14),inset 0 1px 0 #fff;
  transition:transform .3s,box-shadow .3s,background .3s,color .3s;
}
.services button.yudi-carousel-arrow:hover,.services button.yudi-carousel-arrow:focus-visible{
  transform:scale(1.09);color:#fff;border-color:#ad7c35;
  background:linear-gradient(125deg,#be9047,#835b29);
  box-shadow:0 10px 26px rgba(174,111,27,.34),0 0 0 4px rgba(218,171,95,.12);
}
.services button.yudi-carousel-arrow:active{transform:scale(.93)}
.services .service-grid.yudi-service-carousel-ready{
  display:flex!important;flex-wrap:nowrap!important;align-items:stretch;gap:18px!important;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:auto!important;overscroll-behavior-x:contain;
  padding:11px 1px 33px;scroll-snap-type:none!important;
  -webkit-overflow-scrolling:touch;
}
.services .service-grid.yudi-service-carousel-ready::-webkit-scrollbar{display:none}
.services .service-grid.yudi-service-carousel-ready .service-card{
  flex:0 0 clamp(274px,28vw,375px)!important;width:clamp(274px,28vw,375px);
  min-width:0;align-self:stretch;display:flex;flex-direction:column;
}
.services .service-grid.yudi-service-carousel-ready .service-image{
  height:258px;flex:0 0 258px;
}
.services .service-grid.yudi-service-carousel-ready .service-content{flex:1}
.services .service-grid.yudi-service-carousel-ready .service-content .yudi-card-more{margin-top:auto}
.services .service-grid.yudi-service-carousel-ready .service-content .luxury-card-book{margin-top:18px}
.services .service-grid.yudi-service-carousel-ready .service-card:focus-visible{
  outline:3px solid #be954c;outline-offset:-4px;
}
@keyframes yudiCarouselShimmer{0%,100%{opacity:.6;transform:scale(.95)}55%{opacity:1;transform:scale(1.16)}}
@media(max-width:680px){
 .services .yudi-service-carousel-controls{margin:-7px 0 16px;gap:8px}
 .services .yudi-carousel-hint{font-size:9px;letter-spacing:.075em}
 .services button.yudi-carousel-arrow{width:46px;height:46px;font-size:23px}
 .services .service-grid.yudi-service-carousel-ready{gap:14px!important;padding:7px 3px 25px}
 .services .service-grid.yudi-service-carousel-ready .service-card{
   flex-basis:min(83vw,352px)!important;width:min(83vw,352px);
 }
 .services .service-grid.yudi-service-carousel-ready .service-image{
   height:250px;flex-basis:250px;
 }
}
@media(prefers-reduced-motion:reduce){
 .services .yudi-carousel-hint:before{animation:none!important}
 .services button.yudi-carousel-arrow{transition:none!important}
}


/* ============================================================
   SKINCARE BY YUDI | Mobile swipe invitation and luxury frame
   Compatible with the existing service carousel, fixed header,
   language switcher, WhatsApp widget and centered card images.
   ============================================================ */
body.yudi-frame-active {
  padding-bottom: calc(25px + env(safe-area-inset-bottom, 0px));
}
.yudi-page-perimeter {
  pointer-events: none !important;
  position: fixed;
  inset: 0;
  z-index: 940; /* lower than existing sticky header, modals and WhatsApp */
  overflow: hidden;
  contain: layout style;
}
.yudi-frame-edge { position:absolute;display:block;pointer-events:none; }
.yudi-frame-top {
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#6f471d,#f8d894 26%,#ad7735 50%,#f7e2a9 77%,#6c471f);
  box-shadow:0 0 10px rgba(211,167,85,.4);
}
.yudi-frame-left,.yudi-frame-right {
  top:3px;bottom:0;width:5px;
  background:linear-gradient(180deg,#704b25,#f4d99f 24%,#bb8840 52%,#f4d99f 78%,#704b25);
  background-size:100% 260%;
  animation:yudiFrameShine 13s linear infinite;
  box-shadow:0 0 8px rgba(179,123,44,.15);
}
.yudi-frame-left{left:0}.yudi-frame-right{right:0;animation-delay:-6s}
.yudi-frame-bottom {
  position:absolute;left:0;right:0;bottom:0;
  height:calc(25px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(90deg,#4b3317,#87612a 52%,#4b3317);
  border-top:1px solid #ecd4a1;
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding-top:4px;
  overflow:hidden;white-space:nowrap;
  box-shadow:0 -4px 18px #53320c29;
}
.yudi-frame-track {
  display:flex;align-items:center;flex:0 0 max-content;
  width:max-content;white-space:nowrap;
  animation:yudiFrameMarquee 36s linear infinite;
  color:#fff0d3;letter-spacing:.18em;font-size:10px;font-weight:800;
  font-family:Manrope,Arial,sans-serif;
}
.yudi-frame-run{display:flex;flex:0 0 max-content;white-space:nowrap}
.yudi-frame-run > span{display:block;flex:0 0 auto;padding-right:38px}
@keyframes yudiFrameMarquee{to{transform:translateX(-50%)}}
@keyframes yudiFrameShine{to{background-position:0 260%}}

/* The guide is visible only near the mobile service carousel. It does NOT
   intercept swipes or touches, and hides once the user interacts. */
.yudi-swipe-guide{display:none}
@media(max-width:820px){
  body.yudi-frame-active {padding-bottom:calc(21px + env(safe-area-inset-bottom, 0px))}
  .yudi-frame-left,.yudi-frame-right{width:3px}
  .yudi-frame-bottom{height:calc(21px + env(safe-area-inset-bottom, 0px));padding-top:3px}
  .yudi-frame-track{font-size:8px;letter-spacing:.11em;animation-duration:27s}
  .yudi-swipe-guide{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:max-content;max-width:calc(100% - 14px);
    margin:-7px auto 12px;padding:11px 18px;
    border:1px solid rgba(206,158,76,.8);border-radius:999px;
    background:linear-gradient(118deg,#fffdf6,#f6e4bb 45%,#fffaf0 100%);
    box-shadow:0 7px 24px rgba(144,96,30,.17),inset 0 1px 0 rgba(255,255,255,.9);
    color:#765020;font:800 11px/1.2 Manrope,Arial,sans-serif;
    letter-spacing:.085em;white-space:nowrap;
    pointer-events:none;
    opacity:0;transform:translateY(8px) scale(.94);
    transition:opacity .55s ease,transform .55s ease,visibility .55s;
    visibility:hidden;
    position:relative;overflow:hidden;z-index:3;
  }
  .yudi-swipe-guide.yudi-swipe-visible{
    opacity:1;transform:translateY(0) scale(1);visibility:visible;
    animation:yudiSwipeSoftPulse 2.7s ease-in-out infinite;
  }
  .yudi-swipe-guide.yudi-swipe-dismissed{
    opacity:0;transform:translateY(-4px) scale(.95);visibility:hidden;
  }
  .yudi-swipe-guide::after{
    content:'';position:absolute;top:0;bottom:0;width:44%;left:0;
    background:linear-gradient(90deg,transparent,#ffffffa8,transparent);
    transform:translateX(-150%);animation:yudiSwipeShimmer 3.8s ease-in-out infinite;
  }
  .yudi-swipe-guide-hand{
    display:inline-block;font-size:27px;line-height:1;
    color:#b98635;text-shadow:0 1px #fff,0 0 9px #e2b6576b;
    animation:yudiSwipeFinger 2s ease-in-out infinite;
  }
  .yudi-swipe-guide-spark,.yudi-swipe-guide-arrows{
    color:#c08c35;font-size:19px;text-shadow:0 0 9px #e6b95780;
    animation:yudiSwipeTwinkle 2.5s ease-in-out infinite;
  }
  .yudi-swipe-guide-text{position:relative;z-index:1;}
  @keyframes yudiSwipeFinger{
    0%,100%{transform:translateX(-5px) rotate(-9deg)}
    50%{transform:translateX(8px) rotate(8deg)}
  }
  @keyframes yudiSwipeSoftPulse{
    0%,100%{box-shadow:0 7px 22px #94602030,inset 0 1px 0 #fff}
    50%{box-shadow:0 9px 31px #b1813890,0 0 17px #ebc98888,inset 0 1px 0 #fff}
  }
  @keyframes yudiSwipeShimmer{
    0%,26%,100%{transform:translateX(-150%)}
    52%{transform:translateX(370%)}
  }
  @keyframes yudiSwipeTwinkle{50%{opacity:.48;transform:scale(.84)}}
}
@media (prefers-reduced-motion:reduce) {
 .yudi-frame-track,.yudi-frame-left,.yudi-frame-right,
 .yudi-swipe-guide,.yudi-swipe-guide::after,.yudi-swipe-guide-hand,
 .yudi-swipe-guide-spark,.yudi-swipe-guide-arrows {animation:none!important}
 .yudi-swipe-guide{transition:none!important}
}

/* ==============================================================
   SKINCARE BY YUDI | Banner movil fijo y letras sin recorte
   Ajusta el contenedor y el texto a una sola altura REAL.
   Se mantienen intactos el ticker, el marco dorado y el menu.
   ============================================================= */
@media screen and (max-width: 768px) {
  body > .announcement {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1004 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    background: linear-gradient(90deg, #4b3317, #87612a 52%, #4b3317) !important;
    box-shadow: 0 1px 0 rgba(201, 166, 108, .4);
  }

  /* El div animado se centra verticalmente, sin offsets negativos. */
  body > .announcement > .yudi-mobile-ticker {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 max-content !important;
    align-self: center !important;
    box-sizing: border-box !important;
    width: max-content !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    bottom: auto !important;
    font: 800 11px/1.3 Manrope, Arial, sans-serif !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    white-space: nowrap !important;
    color: #fff7e7 !important;
    /* Conserva la animacion yudiTicker definida anteriormente */
  }

  body > .announcement > .yudi-mobile-ticker > span {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 30px 0 0 !important;
    line-height: 1.3 !important;
    color: #fff7e7 !important;
  }

  body > .header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 44px !important;
    z-index: 1003 !important;
  }
  html { scroll-padding-top: 145px; }
}