/*
Resetealo Pattern Library — utilidades CSS puras (sin JS) para efectos modernos:
tilt 3D, hover lift, flip cards, glow, reveal al scroll.
Todo se apoya en las variables de color de cada theme.json (var(--wp--preset--color--*)),
así los mismos componentes se ven "vestidos" con la paleta de cada sitio automáticamente.
Cargado site-wide desde el mu-plugin resetealo-pattern-library — no depende del theme activo.
*/

/* ---- Tilt 3D (hero, tarjetas destacadas) ---- */
.rp-tilt-wrap {
    perspective: 1200px;
}
.rp-tilt {
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
    will-change: transform;
    box-shadow: 0 20px 45px -20px rgba(0,0,0,.25);
}
.rp-tilt:hover, .rp-tilt:focus-within {
    transform: rotateX(6deg) rotateY(-8deg) translateY(-6px) scale(1.02);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}

/* ---- Hover lift (grillas de features/servicios) ---- */
.rp-hover-lift {
    transition: transform .35s ease, box-shadow .35s ease;
}
.rp-hover-lift:hover, .rp-hover-lift:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,.25);
}

/* ---- Flip card 3D (frente/dorso, sin JS) ---- */
.rp-flip-scene {
    perspective: 1600px;
}
.rp-flip-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
.rp-flip-scene:hover .rp-flip-card,
.rp-flip-scene:focus-within .rp-flip-card {
    transform: rotateY(180deg);
}
.rp-flip-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 1.5rem;
    text-align: center;
}
.rp-flip-face--front {
    position: relative;
}
.rp-flip-face--back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

/* ---- Glow (borde degradado animado al hover) ---- */
@property --rp-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.rp-glow {
    position: relative;
    isolation: isolate;
}
.rp-glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    z-index: -1;
    background: conic-gradient(from var(--rp-angle, 0deg),
        var(--wp--preset--color--accent, #999), transparent 30%,
        var(--wp--preset--color--primary, #333), transparent 70%,
        var(--wp--preset--color--accent, #999));
    opacity: 0;
    transition: opacity .4s ease;
}
.rp-glow:hover::before, .rp-glow:focus-within::before {
    opacity: 1;
    animation: rp-spin 3s linear infinite;
}
@keyframes rp-spin {
    to { --rp-angle: 360deg; }
}

/* ---- Reveal al scroll (progressive enhancement — sin soporte, el contenido queda visible normal) ---- */
@supports (animation-timeline: view()) {
    .rp-reveal {
        animation: rp-reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
    .rp-reveal-stagger > * {
        animation: rp-reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
    }
    .rp-reveal-stagger > *:nth-child(2) { animation-delay: .08s; }
    .rp-reveal-stagger > *:nth-child(3) { animation-delay: .16s; }
    .rp-reveal-stagger > *:nth-child(4) { animation-delay: .24s; }
    .rp-reveal-stagger > *:nth-child(5) { animation-delay: .32s; }
    .rp-reveal-stagger > *:nth-child(6) { animation-delay: .4s; }
}
@keyframes rp-reveal-in {
    from { opacity: 0; transform: translateY(28px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ---- Texto atenuado (evita usar "opacity" inline, que no tiene atributo de bloque que lo respalde) ---- */
.rp-muted {
    opacity: .85;
}
.rp-placeholder-text {
    opacity: .6;
}

/* ---- Link con subrayado animado ---- */
.rp-link-sweep {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .35s ease;
}
.rp-link-sweep:hover, .rp-link-sweep:focus-visible {
    background-size: 100% 2px;
}

/* ---- Botón con "pop" al hover/click ---- */
.rp-btn-pop {
    transition: transform .2s ease, box-shadow .2s ease;
}
.rp-btn-pop:hover, .rp-btn-pop:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -8px rgba(0,0,0,.3);
}
.rp-btn-pop:active {
    transform: translateY(0) scale(.97);
}

/* Respeta prefers-reduced-motion: desactiva transform/animation en todos los efectos */
@media (prefers-reduced-motion: reduce) {
    .rp-tilt, .rp-hover-lift, .rp-flip-card, .rp-glow::before, .rp-reveal, .rp-reveal-stagger > *, .rp-link-sweep, .rp-btn-pop {
        transition: none !important;
        animation: none !important;
    }
    .rp-tilt:hover, .rp-hover-lift:hover, .rp-btn-pop:hover {
        transform: none !important;
    }
}