/* Pura · movimiento. Solo transform / opacity / stroke-dashoffset.
   Todo lo que se oculta depende de html.mo, que pone un script mínimo en el <head>
   solo si hay IntersectionObserver y la persona no pidió menos movimiento.
   Sin JS (o si motion.js no carga) el contenido se ve normal. */
:root{--ease-out:cubic-bezier(.22,.61,.36,1);--ease-soft:cubic-bezier(.33,0,.15,1)}

/* Hover sutil en tarjetas y botones pill (solo con mouse) */
@media (hover:hover) and (pointer:fine){
  .btn,.mini,nav.main .btn{transition:transform .45s var(--ease-out),background-color .3s ease,color .3s ease,opacity .25s ease,visibility .25s}
  .btn:hover,.mini:hover{transform:translate3d(0,-2px,0)}
  .btn:active,.mini:active{transform:translate3d(0,0,0) scale(.98);transition-duration:.12s}
  .ent,.loc,.pair,.plan,.promo-card,.grid3>.card,.grid2>.card{transition:transform .6s var(--ease-out)}
  .ent:hover,.loc:hover,.pair:hover,.plan:hover,.promo-card:hover,.grid3>.card:hover,.grid2>.card:hover{transform:translate3d(0,-4px,0)}
  .ent .ph2,.pair img{transition:transform 1.2s var(--ease-out)}
  .ent:hover .ph2,.pair:hover img{transform:scale(1.03)}
}

/* La animación vieja de entrada por sección se reemplaza por revelado al hacer scroll */
.mo [data-reveal]{animation:none}

/* Revelado: títulos (mariposa, etiqueta, título, línea) y tarjetas escalonadas */
.mo .mo-rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);will-change:opacity,transform}
.mo .mo-rv.mo-in{opacity:1;transform:none}
.mo .thin.mo-rv{opacity:.28;transform:scaleX(0);transform-origin:var(--to,left);transition:transform 1.2s var(--ease-soft)}
.mo .thin.mo-rv.mo-in{transform:none}
.mo .mo-img>img,.mo .ent.mo-rv .ph2{transform:scale(1.07);transition:transform 1.6s var(--ease-out)}
.mo .mo-img.mo-in>img,.mo .ent.mo-rv.mo-in .ph2{transform:none}

/* Mariposa: se dibuja la línea y después aparece el relleno, con un aleteo suave */
.bf-svg{display:block;color:#2E2D2E;overflow:visible}
.bf-svg .bf-line path{stroke-dasharray:1 1;stroke-dashoffset:0}
.mo .bf-svg .bf-line path{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-soft)}
.mo .bf-svg .bf-line{opacity:1;transition:opacity .6s ease 1.5s}
.mo .bf-svg .bf-fill{opacity:0;transition:opacity .7s ease 1.05s}
.mo .bf-svg.mo-in .bf-line path{stroke-dashoffset:0}
.mo .bf-svg.mo-in .bf-line{opacity:0}
.mo .bf-svg.mo-in .bf-fill{opacity:1}
.mo .bf-svg.mo-in .bf-wing{animation:bf-flutter 2.4s var(--ease-soft) 1.2s 1 both}
.bf-wing{transform-origin:72% 62%;transform-box:view-box}
@keyframes bf-flutter{0%{transform:none}22%{transform:rotate(-7deg) scale(.96,1)}45%{transform:rotate(3deg)}70%{transform:rotate(-2deg)}100%{transform:none}}
.mo .bf-svg.mo-rv{opacity:0;transform:translate3d(-8px,10px,0) rotate(-8deg)}
.mo .bf-svg.mo-rv.mo-in{opacity:.7;transform:none}

/* Antes / después atado al scroll (cortina que baja, como en la web anterior).
   La capa "después" baja con translateY y su contenido sube lo mismo: el efecto
   de recorte sin clip-path, todo en el compositor. */
.cur-line,.cur-bar{display:none}
.compare .ba-in{position:absolute;inset:0}
.mo .is-scrub{padding:0}
.mo .is-scrub .ba-track{height:250vh;position:relative}
.mo .is-scrub .ba-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:calc(var(--hdr,84px) + 12px);padding-bottom:20px;overflow:hidden}
.mo .is-scrub .ba-stage>.wrap{width:100%}
.mo .is-scrub .compare{display:block;position:relative;aspect-ratio:4/5;height:min(calc(100svh - var(--hdr,84px) - 72px),640px);width:auto;margin:0;border-radius:26px;overflow:hidden;box-shadow:0 18px 50px rgba(43,43,43,.08);background:#ECEBE8;transform:translateZ(0)}
.mo .is-scrub .compare figure{position:absolute;inset:0;aspect-ratio:auto;margin:0;overflow:hidden;background:transparent}
.mo .is-scrub .ba-desp{z-index:1;transform:translate3d(0,-100%,0);will-change:transform}
.mo .is-scrub .ba-desp .ba-in{transform:translate3d(0,100%,0);will-change:transform}
.mo .is-scrub .ba-desp .tag{left:50%;bottom:auto;top:18px;transform:translateX(-50%)}
.mo .is-scrub .cur-line{display:block;position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;transform:translate3d(0,0,0);will-change:transform;z-index:2}
.mo .is-scrub .cur-line::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#fff;box-shadow:0 0 0 1px rgba(43,43,43,.08)}
.mo .is-scrub .cur-bar{display:block;height:1px;width:180px;background:#E2E0DD;overflow:hidden;margin:18px 0 0}
.mo .is-scrub .cur-bar span{display:block;height:100%;background:#2B2B2B;transform-origin:left;transform:scaleX(0);will-change:transform}
@media(min-width:861px){
  .mo .is-scrub .ba-stage>.wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr repeat(6,auto) 1fr;column-gap:72px;align-items:start}
  .mo .is-scrub .ba-stage>.wrap>*{grid-column:1}
  .mo .is-scrub .ba-stage>.wrap>:nth-child(1){grid-row:2}
  .mo .is-scrub .ba-stage>.wrap>:nth-child(2){grid-row:3}
  .mo .is-scrub .ba-stage>.wrap>:nth-child(3){grid-row:4}
  .mo .is-scrub .ba-stage>.wrap>:nth-child(4){grid-row:5}
  .mo .is-scrub .ba-stage>.wrap>:nth-child(5){grid-row:6}
  .mo .is-scrub .ba-stage>.wrap>:nth-child(6){grid-row:7}
  .mo .is-scrub .ba-stage>.wrap>.compare{grid-column:2;grid-row:1 / -1}
}
@media(max-width:860px){
  .mo .is-scrub .ba-stage .thin{margin:14px 0 16px}
  .mo .is-scrub .ba-stage .cap{margin:0}
  .mo .is-scrub .compare{height:min(46svh,calc(100svh - var(--hdr,72px) - 330px),520px);min-height:260px;margin:18px auto 0}
  .mo .is-scrub .cur-bar{display:none}
}

/* Páginas tipo app (turnero, panel, login): entrada sin ocultar de antemano */
.mo .mo-enter{animation:mo-enter .5s var(--ease-out) var(--mo-d,0ms) backwards}
@keyframes mo-enter{from{opacity:0;transform:translate3d(0,12px,0)}}
.mo .mo-sel{animation:mo-sel .4s var(--ease-out)}
@keyframes mo-sel{0%{transform:scale(.965)}60%{transform:scale(1.012)}100%{transform:none}}
.svc,.day,.time,.choice,.pay-card,.sede,.primary,.tab,.back,.copiar{transition:transform .35s var(--ease-out),background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.svc:active,.day:active,.time:active,.choice:active,.pay-card:active,.sede:active,.primary:active,.tab:active,.copiar:active{transform:scale(.98);transition-duration:.1s}
@media (hover:hover) and (pointer:fine){
  .svc:hover,.choice:hover,.pay-card:hover,.day:hover{transform:translate3d(0,-2px,0)}
  .time:hover,.sede:hover,.primary:hover,.tab:hover{transform:translate3d(0,-1px,0)}
  .primary[disabled]:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .mo-rv,.mo-img>img,.bf-svg *,.mo-enter,.mo-sel{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
}

/* Fotos: difícil de guardar (sin menú de mantener presionado, sin arrastrar) */
img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
img{pointer-events:none}
.visor img{pointer-events:auto}
/* Marca de agua sutil sobre fotos de resultados (las fotos originales no se tocan) */
:where(.wm){position:relative}
.wm::after{content:"";position:absolute;right:10px;bottom:10px;width:clamp(46px,22%,96px);aspect-ratio:360/182;background:url(/img/logo.png) center/contain no-repeat;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.45));opacity:.55;pointer-events:none;z-index:2}
.vwm{position:relative;display:block;max-width:100%;line-height:0}
.vwm img{max-height:calc(100svh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}