/* ================================================================
   REFORMAS JULIO — ANIMATION SYSTEM v4
   Logo · Hero · Imágenes en scroll · Parallax · Hover
   ================================================================ */

/* ── Keyframes globales ── */
@keyframes rjv-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes rjv-glow    { 0%,100%{opacity:.42} 50%{opacity:.70} }
@keyframes rjv-pulse   { 0%{box-shadow:0 0 0 0 rgba(92,29,71,.4)} 70%{box-shadow:0 0 0 12px rgba(92,29,71,0)} 100%{box-shadow:0 0 0 0 rgba(92,29,71,0)} }
@keyframes rjv-shimmer { 0%{transform:translateX(-120%) skewX(-15deg)} 100%{transform:translateX(220%) skewX(-15deg)} }
@keyframes rjv-spin    { to{transform:rotate(360deg)} }

/* ================================================================
   1. LOGOTIPO — animación de entrada + loop suave
   ================================================================ */

/* Estado inicial: oculto */
.brand-logo {
  transform-origin: center center;
  animation: rjv-logo-enter 1.0s cubic-bezier(.22,1,.36,1) both;
}

@keyframes rjv-logo-enter {
  0%   { opacity: 0; transform: scale(0) rotate(-180deg); filter: blur(4px) }
  60%  { opacity: 1; transform: scale(1.12) rotate(8deg); filter: blur(0) }
  80%  { transform: scale(.95) rotate(-3deg) }
  100% { opacity: 1; transform: scale(1) rotate(0deg) }
}

/* Loop suave de respiración en el logo */
.brand-logo {
  animation:
    rjv-logo-enter 1.0s cubic-bezier(.22,1,.36,1) both,
    rjv-logo-breathe 5s ease-in-out 1.2s infinite;
}

@keyframes rjv-logo-breathe {
  0%,100% { transform: scale(1) }
  50%     { transform: scale(1.04) }
}

/* Hover del logo: destello */
.brand:hover .brand-logo {
  animation: rjv-logo-spin-hover .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rjv-logo-spin-hover {
  0%   { transform: scale(1) rotate(0deg) }
  40%  { transform: scale(1.15) rotate(-12deg) }
  70%  { transform: scale(1.08) rotate(6deg) }
  100% { transform: scale(1.05) rotate(0deg) }
}

/* Anillo de brillo detrás del logo */
.brand { position: relative }
.brand::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
  animation: rjv-logo-halo 5s ease-in-out 1.2s infinite;
  pointer-events: none;
  z-index: 0;
}
.brand-logo { position: relative; z-index: 1 }
@keyframes rjv-logo-halo {
  0%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.9) }
  50%     { opacity: 1; transform: translate(-50%,-50%) scale(1.15) }
}

/* ================================================================
   2. SCROLL REVEAL — sistema .rv
   ================================================================ */
.rv {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1);
}
.rv.rv-up    { transform: translateY(32px) }
.rv.rv-left  { transform: translateX(36px) }
.rv.rv-right { transform: translateX(-36px) }
.rv.rv-scale { transform: scale(.93) }
.rv.rv-fade  { transform: none }

/* Imágenes en scroll: giran desde arriba-izquierda y se colocan */
.rv.rv-img-enter {
  transform: translateX(-60px) translateY(-40px) rotate(-12deg) scale(.82);
  transform-origin: top left;
  filter: blur(2px);
}
.rv.rv-img-enter.visible {
  transform: translateX(0) translateY(0) rotate(0deg) scale(1) !important;
  filter: blur(0) !important;
}

.rv[data-d="1"] { transition-delay: .07s }
.rv[data-d="2"] { transition-delay: .14s }
.rv[data-d="3"] { transition-delay: .22s }
.rv[data-d="4"] { transition-delay: .30s }
.rv[data-d="5"] { transition-delay: .38s }
.rv[data-d="6"] { transition-delay: .46s }

.rv.visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ================================================================
   3. HERO — foto del encabezado:
      sale de la esquina superior derecha muy pequeña
      y crece hasta ocupar su sitio
   ================================================================ */
.hero { overflow: hidden; position: relative }

.hero-bg {
  transform-origin: top right;
  transform: scale(0.05) translate(80%, -80%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero-bg.rjv-in {
  transition:
    transform 1.1s cubic-bezier(.22,1,.36,1),
    opacity   .55s ease;
  transform: translateY(0) scale(1.08);
  opacity: 1;
}
.hero-bg.rjv-par { will-change: transform }

/* Parallax suave al scroll */
/* (manejado por JS) */

/* Brillo ambiental */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 55% 65% at 18% 50%, rgba(92,29,71,.2) 0%, transparent 68%);
  animation: rjv-glow 6s ease-in-out infinite;
  pointer-events: none;
}

/* Partículas flotantes */
.rjv-pt {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  pointer-events: none; z-index: 1;
  animation: rjv-float var(--dur,4s) ease-in-out infinite var(--del,0s);
}

/* Stagger contenido hero */
.hero-card > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .58s cubic-bezier(.22,1,.36,1),
    transform .58s cubic-bezier(.22,1,.36,1);
}
.hero-card.rjv-ready > *:nth-child(1) { opacity:1; transform:none; transition-delay:.30s }
.hero-card.rjv-ready > *:nth-child(2) { opacity:1; transform:none; transition-delay:.42s }
.hero-card.rjv-ready > *:nth-child(3) { opacity:1; transform:none; transition-delay:.54s }
.hero-card.rjv-ready > *:nth-child(4) { opacity:1; transform:none; transition-delay:.64s }
.hero-card.rjv-ready > *:nth-child(5) { opacity:1; transform:none; transition-delay:.72s }
.hero-card.rjv-ready > *:nth-child(6) { opacity:1; transform:none; transition-delay:.80s }

/* Línea bajo h1 */
.hero-card h1 { position: relative }
.hero-card h1::after {
  content: '';
  position: absolute; left: 0; bottom: -7px;
  height: 2px; width: 0;
  background: rgba(255,255,255,.45);
  border-radius: 1px;
  transition: width .85s cubic-bezier(.22,1,.36,1) 1.2s;
}
.hero-card.rjv-ready h1::after { width: 54px }

/* ================================================================
   4. IMÁGENES EN CONTENIDO — efecto "giro desde arriba-izquierda"
      Aplicado automáticamente por JS al entrar en viewport
   ================================================================ */

/* Imágenes en split (columna izquierda foto) */
.split-img {
  overflow: hidden;
  transition: box-shadow .4s ease;
}
.split-img img {
  will-change: transform, filter;
  transition:
    transform .65s cubic-bezier(.22,1,.36,1),
    filter .5s ease;
}
.split-img:hover img   { transform: scale(1.05); filter: brightness(1.04) }
.split-img:hover {
  box-shadow: 0 24px 64px rgba(92,29,71,.2),
              0 0 0 2px #fff,
              0 0 0 4px var(--purple) !important;
}

/* Project / blog images */
.project-card { position:relative; overflow:hidden }
.project-card .project-img { overflow: hidden }
.project-card .project-img img {
  transition: transform .65s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.project-card:hover .project-img img { transform: scale(1.08) }
.project-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(92,29,71,.48) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none; z-index: 1;
}
.project-card:hover::after { opacity: 1 }

.blog-post .post-img { overflow: hidden }
.blog-post .post-img img { transition: transform .6s cubic-bezier(.22,1,.36,1) }
.blog-post:hover .post-img img { transform: scale(1.06) }

.two-img-grid img {
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.two-img-grid img:hover { transform: scale(1.04) }

/* ================================================================
   5. CARDS — hover profesional con tilt
   ================================================================ */
.icon-card,
.service-card,
.value-card {
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s ease,
    border-color .25s ease;
}
.icon-card:hover,
.service-card:hover,
.value-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 48px rgba(92,29,71,.15);
  border-color: var(--purple);
}
.icon-card:hover .icon-wrap svg,
.service-card:hover .icon-wrap svg {
  animation: rjv-pulse .65s ease forwards;
}

.testimonial-card,
.testimonial,
.comment {
  transition: transform .32s ease, box-shadow .32s ease;
}
.testimonial-card:hover,
.testimonial:hover,
.comment:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 38px rgba(92,29,71,.12);
}

.blog-post {
  transition: transform .3s ease, box-shadow .3s ease;
}
.blog-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(92,29,71,.1);
}

/* ================================================================
   6. BOTONES — destello de luz
   ================================================================ */
.btn { position: relative; overflow: hidden }
.btn::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
  transform: skewX(-15deg);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::after {
  opacity: 1;
  animation: rjv-shimmer .52s ease forwards;
}

/* ================================================================
   7. NAV — subrayado deslizante desde centro
   ================================================================ */
.nav-links a { position: relative; border-bottom: none !important }
.nav-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 50%;
  transform: translateX(-50%);
  height: 2px; width: 0;
  background: rgba(255,255,255,.75);
  border-radius: 1px;
  transition: width .28s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100% }

/* ================================================================
   8. SECTION HEAD — línea al entrar en viewport
   ================================================================ */
.section-head h2 { position: relative; display: inline-block }
.section-head h2::after {
  content: '';
  position: absolute; left: 50%; bottom: -10px;
  transform: translateX(-50%);
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--purple), var(--purple-light,#a060a0));
  border-radius: 2px;
  transition: width .78s cubic-bezier(.22,1,.36,1);
}
.section-head.rv.visible h2::after { width: 52px }

/* ================================================================
   9. FEATURES BAR
   ================================================================ */
.feature-item { transition: transform .28s ease }
.feature-item:hover { transform: translateY(-4px) }
.feature-item:hover .ficon { background: rgba(255,255,255,.14) }

/* ================================================================
   10. PROCESS STEPS
   ================================================================ */
.process-step .step-icon {
  transition: transform .3s ease, box-shadow .3s ease;
}
.process-step:hover .step-icon {
  transform: scale(1.14);
  box-shadow: 0 0 0 7px rgba(92,29,71,.1);
  animation: rjv-pulse .65s ease;
}

/* ================================================================
   11. FOOTER STATS
   ================================================================ */
.stat-counter { transition: transform .28s ease }
.stat-counter:hover { transform: translateY(-3px) }

/* ================================================================
   13. CURSOR GLOW — solo desktop con ratón
   ================================================================ */
#rjv-cursor {
  position: fixed; width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92,29,71,.055) 0%, transparent 68%);
  pointer-events: none; z-index: 9000;
  transform: translate(-50%,-50%);
  transition: left .055s linear, top .055s linear;
  display: none;
}
@media (hover:hover) and (pointer:fine) { #rjv-cursor { display:block } }

/* ================================================================
   TRANSICIÓN DE PÁGINA — fade out/in al navegar
   ================================================================ */
.page-transition-out {
  animation: rjv-page-out .18s ease forwards !important;
}
@keyframes rjv-page-out {
  to { opacity: 0; }
}

/* ================================================================
   ACCESIBILIDAD — respeta prefers-reduced-motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv           { opacity:1 !important; transform:none !important; filter:none !important }
  .hero-card > * { opacity:1 !important; transform:none !important }
  .hero-bg      { transform:translateY(0) scale(1.08) !important; opacity:1 !important }
  .brand-logo   { animation: none !important }
  .brand::before{ animation: none !important }
}

/* ═══════════════════════════════════════════════
   MEJORAS DE ANIMACIÓN — v10
═══════════════════════════════════════════════ */

/* Entrada suave en la página (fade-in del body) */
@keyframes rjv-page-in {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: none }
}
body {
  animation: rjv-page-in .28s cubic-bezier(.22,1,.36,1) both;
}


/* Feature items — entrada en abanico */
.features-bar .feature-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.features-bar .feature-item.visible,
.features-bar.visible .feature-item {
  opacity: 1; transform: none;
}

/* Stagger de tarjetas */
.card-grid > *:nth-child(1){transition-delay:.05s}
.card-grid > *:nth-child(2){transition-delay:.12s}
.card-grid > *:nth-child(3){transition-delay:.19s}
.card-grid > *:nth-child(4){transition-delay:.26s}
.card-grid > *:nth-child(5){transition-delay:.33s}
.card-grid > *:nth-child(6){transition-delay:.40s}

/* Hover premium en cards */
.icon-card:hover, .service-card:hover, .value-card:hover {
  transform: translateY(-7px) scale(1.01);
  box-shadow: 0 20px 50px rgba(92,29,71,.14), 0 0 0 1.5px rgba(92,29,71,.08);
}

/* Stats números — counter up */
.stat-num, .hero-stat strong {
  display: inline-block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
}

/* Scroll snapping suave en sliders */
.scrollable-row {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.scrollable-row > * {
  scroll-snap-align: start;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  body { animation: none }
  .hero-tag, .hero-badges span { transition: none }
}