/* Movimiento de la página pública. Todo se apaga con prefers-reduced-motion. */
:root{--t-rapido:160ms;--t-medio:300ms;--t-lento:700ms;--salida:cubic-bezier(.23,1,.32,1);--entra-sale:cubic-bezier(.77,0,.175,1);interpolate-size:allow-keywords}

/* Aparición al hacer scroll: solo se oculta si hay JavaScript */
.rev{opacity:1;transform:none;transition:none}
.js .rev{opacity:0;transform:translateY(28px);transition:opacity var(--t-lento) var(--salida),transform var(--t-lento) var(--salida);transition-delay:var(--d,0ms)}
.js .rev.vis{opacity:1;transform:none}

/* Portada */
.portada h1 .linea{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.portada h1 .linea>span{display:block;transform:translateY(110%);animation:sube .95s var(--salida) .15s forwards}
.portada h1 .linea:nth-child(2)>span{animation-delay:.27s}
@keyframes sube{to{transform:none}}
.portada .lead,.portada .acciones,.portada .estado{opacity:0;animation:aparece .8s var(--salida) forwards}
.portada .lead{animation-delay:.45s}
.portada .acciones{animation-delay:.58s}
.portada .estado{animation-delay:.7s}
@keyframes aparece{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.portada .foto img{clip-path:inset(0 0 0 100%);transform:scale(1.14);animation:abre 1.25s var(--entra-sale) .05s forwards,acerca 2.6s var(--salida) .05s forwards}
@keyframes abre{to{clip-path:inset(0 0 0 0)}}
@keyframes acerca{to{transform:scale(1)}}
.estado i{position:relative}
.estado:not(.cerrado) i::after{content:'';position:absolute;inset:0;border-radius:50%;background:#2f9e78;animation:latido 2.4s ease-out 3}
@keyframes latido{from{transform:scale(1);opacity:.6}to{transform:scale(2.6);opacity:0}}

/* Encabezado que se esconde al bajar y regresa al subir */
.cab{transition:transform var(--t-medio) var(--salida),background-color var(--t-medio)}
.cab.oculta{transform:translateY(-100%)}
.cab.fija{background:rgba(246,243,242,.97)}

/* Enlaces del menú: línea que crece */
.menu a{position:relative}
.menu a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--t-medio) var(--salida)}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* Botones */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background-color var(--t-medio) var(--salida),color var(--t-medio) var(--salida),border-color var(--t-medio),transform var(--t-rapido) var(--salida)}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--violeta-osc);transform:translateY(101%);transition:transform .45s var(--salida)}
.btn:hover::before{transform:none}
.btn.sec::before{background:var(--violeta)}
.btn:active{transform:scale(.97)}
.btn[disabled]::before{display:none}
.btn[disabled]:active{transform:none}
.btn:hover{background:var(--violeta)}
.btn.sec:hover{background:transparent;color:#fff}

/* Enlaces subrayados: la línea sale por la derecha y entra por la izquierda */
.liga{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;background-origin:content-box;background-clip:content-box;transition:color var(--t-rapido)}
.liga:hover{animation:subraya .65s var(--salida)}
@keyframes subraya{0%{background-size:100% 1px;background-position:100% 100%}45%{background-size:0 1px;background-position:100% 100%}46%{background-size:0 1px;background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}

/* Pestañas de servicios */
[role=tabpanel]:not([hidden]) .lista-serv>li{animation:aparece .6s var(--salida) both;animation-delay:calc(var(--i,0) * 70ms)}
.tabs button{transition:color var(--t-medio)}
.tabs button:hover{color:var(--negro)}

/* Looks */
.look .ph img{transition:transform 1s var(--salida)}
.look:hover .ph img{transform:scale(1.06)}
.look .precio strong{transition:color var(--t-medio)}
.look:hover .precio strong{color:var(--violeta)}

/* Banda de fotos: cortina de abajo hacia arriba */
.js .banda figure{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--entra-sale)}
.js .banda.vis figure{clip-path:inset(0 0 0 0)}
.banda figure:nth-child(2){transition-delay:.1s}
.banda figure:nth-child(3){transition-delay:.2s}
.banda figure:nth-child(4){transition-delay:.3s}
.banda img{transition:transform 1.2s var(--salida)}
.banda figure:hover img{transform:scale(1.05)}

/* Preguntas: abre y cierra con altura animada */
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--salida),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq summary{transition:color var(--t-rapido)}
.faq summary:hover{color:var(--violeta)}

/* Agenda */
.panel-paso{animation:none}
.panel-paso.adelante{animation:desdeDer .45s var(--salida)}
.panel-paso.atras{animation:desdeIzq .45s var(--salida)}
@keyframes desdeDer{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes desdeIzq{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.pasos-ag li{transition:color var(--t-medio),border-color var(--t-medio)}
.opcion{transition:border-color var(--t-rapido),background-color var(--t-medio),transform var(--t-rapido) var(--salida)}
.opcion:active{transform:scale(.99)}
.opcion input{transition:transform var(--t-rapido) var(--salida)}
.opcion input:checked{animation:marca .3s var(--salida)}
@keyframes marca{40%{transform:scale(1.25)}}
.chip,.dia,.hora{transition:background-color var(--t-medio) var(--salida),color var(--t-medio),border-color var(--t-medio),transform var(--t-rapido) var(--salida)}
.chip:hover,.dia:not(:disabled):hover,.hora:hover{border-color:var(--violeta)}
.chip:active,.dia:not(:disabled):active,.hora:active{transform:scale(.95)}
.hora{animation:aparece .4s var(--salida) both;animation-delay:calc(var(--i,0) * 22ms)}
.dias .dia{animation:aparece .45s var(--salida) both;animation-delay:calc(var(--i,0) * 25ms)}
#total{display:inline-block}
#total.pop{animation:pop .45s var(--salida)}
@keyframes pop{35%{transform:scale(1.14);color:var(--violeta)}}
.resumen dd{transition:color var(--t-medio)}
.resumen dd.cambio{animation:destello .8s var(--salida)}
@keyframes destello{0%{color:var(--violeta)}100%{color:var(--negro)}}
.error[role=alert]:not(:empty),label.campo input[aria-invalid=true]{animation:sacude .4s var(--salida)}
@keyframes sacude{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.confirmacion{animation:aparece .6s var(--salida)}

/* Diálogos y menú móvil */
dialog[open]{animation:dialogo .35s var(--salida)}
dialog[open]::backdrop{animation:fondo .35s ease}
@keyframes dialogo{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fondo{from{opacity:0}to{opacity:1}}
.menu.abierto{animation:baja .35s var(--salida)}
.menu.abierto li{animation:aparece .4s var(--salida) both}
.menu.abierto li:nth-child(2){animation-delay:.05s}
.menu.abierto li:nth-child(3){animation-delay:.1s}
.menu.abierto li:nth-child(4){animation-delay:.15s}
@keyframes baja{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.barra-movil{transition:transform var(--t-medio) var(--salida)}
.barra-movil.oculta{transform:translateY(110%)}

@media (prefers-reduced-motion:reduce){
  .js .rev,.portada .lead,.portada .acciones,.portada .estado,.portada h1 .linea>span{opacity:1!important;transform:none!important}
  .portada .foto img{clip-path:none!important;transform:none!important}
  .js .banda figure{clip-path:none!important}
  .cab.oculta,.barra-movil.oculta{transform:none!important}
  .btn::before{display:none}
  .faq details::details-content{transition:none}
}