/*
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);
}

/* ---- Texto con degradado (primario → acento del theme activo) ---- */
.rp-gradient-text {
    background: linear-gradient(100deg,
        var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1a1a1a)) 10%,
        var(--wp--preset--color--accent, #0d9488) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ---- Glassmorphism (tarjetas de vidrio sobre fondos oscuros/con color) ---- */
.rp-glass {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}

/* ---- Fondo "aurora": manchas de color difuminadas que derivan lentamente ---- */
.rp-aurora {
    position: relative;
    overflow: hidden;
}
.rp-aurora::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(40% 50% at 22% 28%, color-mix(in srgb, var(--wp--preset--color--accent, #38bdf8) 50%, transparent), transparent 70%),
        radial-gradient(36% 44% at 78% 18%, color-mix(in srgb, var(--wp--preset--color--primary, #6366f1) 40%, transparent), transparent 70%),
        radial-gradient(46% 55% at 60% 82%, color-mix(in srgb, var(--wp--preset--color--accent, #f472b6) 30%, transparent), transparent 70%);
    filter: blur(60px);
    animation: rp-aurora-drift 16s ease-in-out infinite alternate;
    pointer-events: none;
}
.rp-aurora > * {
    position: relative;
}
@keyframes rp-aurora-drift {
    from { transform: rotate(0deg) scale(1); }
    to   { transform: rotate(8deg) scale(1.18) translate(4%, -3%); }
}

/* ---- Marquee infinito (tira de logos/marcas; el contenido va duplicado 2x para el loop) ---- */
.rp-marquee {
    overflow: hidden;
}
.rp-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4rem;
    width: max-content;
    animation: rp-marquee-scroll 30s linear infinite;
}
.rp-marquee:hover .rp-marquee-track {
    animation-play-state: paused;
}
.rp-marquee-item {
    white-space: nowrap;
    opacity: .45;
    transition: opacity .3s ease;
    margin: 0;
}
.rp-marquee-item:hover {
    opacity: 1;
}
@keyframes rp-marquee-scroll {
    to { transform: translateX(-50%); }
}

/* ---- Tarjeta destacada (plan recomendado en pricing) ---- */
.rp-featured {
    border: 2px solid var(--wp--preset--color--accent, #999) !important;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .28);
    transform: translateY(-10px);
}
@media (max-width: 781px) {
    .rp-featured { transform: none; }
}

/* 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, .rp-aurora::before, .rp-marquee-track {
        transition: none !important;
        animation: none !important;
    }
    .rp-tilt:hover, .rp-hover-lift:hover, .rp-btn-pop:hover {
        transform: none !important;
    }
}