/* Microinteracciones: un gesto por componente, con la paleta de Wualapp. */
:root { --gesto: 280ms; --curva: cubic-bezier(.2,.75,.25,1); }
.cabecera { transition: box-shadow var(--gesto), background var(--gesto); }
.cabecera.con-recorrido { box-shadow: 0 6px 24px #24102e10; background: #ffffffed; }
.lectura-progreso { position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none; }
.lectura-progreso i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#ff0069,#852c86,#0099ff,#00c7d1); transform:scaleX(var(--lectura,0)); transform-origin:left; }
.menu a, .contacto-datos a, .pie a { position:relative; width:fit-content; }
.menu a::after, .contacto-datos a::after, .pie a::after {
 content:""; position:absolute; bottom:-5px; left:0; width:100%; height:2px;
 background:linear-gradient(90deg,var(--marca-magenta),var(--marca-azul)); transform:scaleX(0); transform-origin:left;
 transition:transform var(--gesto) var(--curva);
}
.menu a:hover::after, .menu a:focus-visible::after, .menu a[aria-current="location"]::after,
.contacto-datos a:hover::after, .contacto-datos a:focus-visible::after, .pie a:hover::after, .pie a:focus-visible::after { transform:scaleX(1); }
.menu a[aria-current="location"] { color:var(--marca-ciruela); }
.marca img { transition:transform 400ms var(--curva),filter 400ms; transform-origin:left center; }
.marca:hover img, .marca:focus-visible img { transform:scale(1.035) rotate(-1deg); filter:drop-shadow(0 4px 7px #852c8622); }
.boton, .cinema-cta { position:relative; overflow:hidden; isolation:isolate; transition:translate 180ms var(--curva),transform var(--gesto),box-shadow var(--gesto),background var(--gesto); }
.boton-principal::after, .cinema-cta::after {
 content:""; display:block; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none;
 background:linear-gradient(110deg,transparent 25%,#ffffff28 48%,transparent 65%); transform:translateX(-130%);
 transition:transform 650ms var(--curva);
}
.boton-principal:hover::after, .cinema-cta:hover::after, .boton-principal:focus-visible::after, .cinema-cta:focus-visible::after { transform:translateX(130%); }
.boton:active, .cinema-cta:active { transform:scale(.975); }
.cinema-cta>span, .cinema-secondary>span { transition:transform var(--gesto) var(--curva); }
.cinema-cta:hover>span, .cinema-cta:focus-visible>span { transform:translate(3px,-3px); }
.cinema-secondary:hover>span { transform:translateY(3px); }
/* Leve luz localizada. No cambia el contraste ni oculta el texto. */
.tacto { position:relative; isolation:isolate; }
.tacto::before {
 content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none;
 background:radial-gradient(240px circle at var(--raton-x,50%) var(--raton-y,50%),#852c860d,transparent 78%);
 opacity:0; transition:opacity 350ms;
}
.tacto:hover::before, .tacto:focus-within::before { opacity:1; }
.precio.destacado::before, .despues::before { background:radial-gradient(240px circle at var(--raton-x,50%) var(--raton-y,50%),#ffffff16,transparent 78%); }
.servicio { transition:transform 450ms var(--curva),border-color var(--gesto); }
.servicio:hover, .servicio:focus-within { border-color:var(--marca-violeta); transform:translateY(-3px); }
.servicio .icono { transition:transform 400ms var(--curva),box-shadow 400ms; }
.servicio:hover .icono, .servicio:focus-within .icono { transform:translateY(-4px) rotate(-4deg); box-shadow:0 12px 24px -16px #852c8699; }
.servicio .icono svg { transition:transform 400ms var(--curva); }
.servicio:hover .icono svg { transform:scale(1.08); }
.servicio a::after { content:"↗"; display:inline-block; margin-left:8px; transition:transform var(--gesto); }
.servicio a:hover::after, .servicio a:focus-visible::after { transform:translate(3px,-3px); }
.precio { transition:transform 400ms var(--curva),box-shadow 400ms; }
.precio:hover, .precio:focus-within { transform:translateY(-6px); box-shadow:0 16px 32px -24px #66006688,0 0 0 1px #852c8638; }
.precio .cifra { transition:color var(--gesto); }
.precio:not(.destacado):hover .cifra { color:var(--marca-ciruela); }
.capa-casa { transition:transform 400ms var(--curva),box-shadow 400ms; }
.capa-casa:hover { transform:translateX(5px); box-shadow:-3px 0 0 var(--marca-violeta); }
.capa-casa .n { transition:transform 400ms var(--curva); }
.capa-casa:hover .n { transform:rotate(-5deg); }
.tambien li { transition:translate var(--gesto); }
.tambien li:hover { translate:4px 0; }
/* El proceso se dibuja al entrar en pantalla, sin falsear un progreso de trabajo. */
.recorrido-proceso { height:2px; background:#ffffff24; margin:0 0 var(--s8); overflow:hidden; }
.recorrido-proceso i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#ff0069,#0099ff,#00e9af); transform:scaleX(var(--recorrido,0)); transform-origin:left; }
.paso .movil { transition:translate 450ms var(--curva),rotate 450ms var(--curva),box-shadow 450ms; }
.paso-num { display:flex; align-items:center; gap:8px; }
.paso-num::after { content:""; width:6px; height:6px; border-radius:50%; background:#65d5fa; opacity:.3; transition:opacity 450ms,box-shadow 450ms; }
.paso.en-recorrido .paso-num::after { opacity:1; box-shadow:0 0 10px #0099ff88; }
.paso:hover .movil, .paso:focus-within .movil { translate:0 -8px; rotate:-1deg; box-shadow:0 0 0 1px #852c86,0 30px 50px -30px #0099ff66; }
.paso:hover .paso-num::after { opacity:1; background:#00e9af; }
.despues .version { transition:translate 450ms var(--curva); }
.despues:hover .version { translate:0 -3px; }
.preguntas details { transition:background var(--gesto),border-color var(--gesto); border-radius:8px; }
.preguntas details:hover, .preguntas details:focus-within { background:#852c8606; border-color:#852c8666; }
.preguntas details[open] { border-top-color:var(--marca-violeta); }
.preguntas summary { transition:color var(--gesto); }
.preguntas summary:hover, .preguntas details[open] summary { color:var(--marca-ciruela); }
/* Un campo enfocado se reconoce por borde, luz y etiqueta, sin depender sólo del color. */
label.campo { transition:color var(--gesto); }
label.campo:focus-within { color:var(--marca-ciruela); }
label.campo input, label.campo textarea { transition:border-color 200ms,box-shadow 200ms,background 200ms; }
label.campo input:hover, label.campo textarea:hover { border-color:var(--marca-violeta); }
label.campo input:focus, label.campo textarea:focus { border-color:var(--marca-ciruela); background:#fdfaff; box-shadow:0 0 0 4px #852c8612; }
.chips-lista span { transition:background var(--gesto),color var(--gesto),box-shadow var(--gesto),translate var(--gesto); }
.chips-lista label:hover span { translate:0 -2px; box-shadow:inset 0 0 0 1.5px var(--marca-violeta); }
.chips-lista input:checked+span { box-shadow:0 4px 12px -8px #66006688; }
.idea { transition:box-shadow 400ms; }
.idea:focus-within { box-shadow:0 0 0 1px #bfa3cd,0 24px 64px -40px #0099ff55; }
.motion-toggle:hover { color:#fff; border-color:#00c7d1; }
.phone-hardware { transform:rotateX(var(--telefono-x,0deg)) rotateY(var(--telefono-y,0deg)); transition:transform 400ms var(--curva); }
.aparicion-suave { transition:opacity 700ms var(--curva),translate 700ms var(--curva); transition-delay:var(--demora,0ms); }
.aparicion-pendiente { opacity:0; translate:0 18px; }
.reveal { transition-delay:var(--demora,0ms); }
@media(hover:none), (pointer:coarse) {
 .tacto::before { display:none; }
 .servicio:hover,.precio:hover,.capa-casa:hover,.marca:hover img,.servicio:hover .icono,.capa-casa:hover .n { transform:none; }
 .paso:hover .movil,.tambien li:hover,.chips-lista label:hover span { translate:none; rotate:none; }
}
/* También responde al control de la portada, no sólo a la preferencia del sistema. */
.interacciones-reducidas { scroll-behavior:auto; }
.interacciones-reducidas *, .interacciones-reducidas *::before, .interacciones-reducidas *::after { transition:none!important; animation:none!important; }
.interacciones-reducidas .aparicion-pendiente { opacity:1; translate:none; }
.interacciones-reducidas :is(.boton,.cinema-cta,.movil,.capa-casa,.precio,.servicio,.icono,.n,.marca img) { translate:none!important; rotate:none!important; }
.interacciones-reducidas :is(.servicio,.precio,.capa-casa,.icono,.n,.marca img,.phone-hardware) { transform:none!important; }
.interacciones-reducidas .tacto::before { display:none; }
@media(prefers-reduced-motion:reduce) {
 *, *::before, *::after { transition:none!important; animation:none!important; }
 .aparicion-pendiente { opacity:1; translate:none; }
 .phone-hardware { transform:none; }
}
.preguntas details[open]>p { animation:respuesta-visible 240ms var(--curva) both; }
@keyframes respuesta-visible { from { opacity:0; translate:0 -4px; } to { opacity:1; translate:0 0; } }
.chips-lista label:active span { scale:.98; }
@media(hover:none), (pointer:coarse) { .boton:hover, .cinema-cta:hover { transform:none; } }
@media(prefers-reduced-motion:reduce) { .preguntas details[open]>p { animation:none; } }