/* Animaciones cinematográficas (skill animaciones-cinematicas, versión sin framework).
   Pocas animaciones y muy suaves: todo entra desde el desenfoque, nada rebota ni gira.
   Los estados iniciales solo se aplican con html.anim (lo pone el <head> si no hay
   reducción de movimiento), así que sin JS o con reduced-motion todo se ve normal. */

:root { --ease-cine: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- Reveal al hacer scroll (opacity, y 32px, blur 8px, 800ms) ---------- */

.anim .fade-in {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity .55s var(--ease-cine), transform .55s var(--ease-cine), filter .55s var(--ease-cine);
}
.anim .fade-in.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.anim .fade-in.delay-1 { transition-delay: .09s; }
.anim .fade-in.delay-2 { transition-delay: .18s; }
.anim .fade-in.delay-3 { transition-delay: .27s; }

/* ---------- Titulares palabra a palabra ---------- */

.anim [data-blur-text]:not(.troceado) { opacity: 0; }
.blur-text { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(14px); }
.blur-text.shown { animation: blur-text-in .8s var(--ease-cine) both; }

@keyframes blur-text-in {
  0%   { opacity: 0;   filter: blur(10px); transform: translateY(14px); }
  50%  { opacity: 0.6; filter: blur(4px);  transform: translateY(-2px); }
  100% { opacity: 1;   filter: blur(0);    transform: translateY(0); }
}

/* ---------- Entrada al cargar (above the fold) ---------- */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim .animate-fade-in-up { animation: fade-in-up .8s var(--ease-cine) both; }

/* ---------- Fondo mesh-gradient y halos (colores de marca) ---------- */

@keyframes mesh-drift {
  0%   { background-position: 15% 20%, 85% 15%, 50% 90%; }
  50%  { background-position: 35% 40%, 65% 35%, 40% 70%; }
  100% { background-position: 15% 20%, 85% 15%, 50% 90%; }
}
.mesh-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(40% 40% at 50% 50%, color-mix(in srgb, var(--granate) 16%, transparent), transparent 70%),
    radial-gradient(35% 35% at 50% 50%, color-mix(in srgb, var(--gris) 22%, transparent), transparent 70%),
    radial-gradient(45% 45% at 50% 50%, color-mix(in srgb, var(--granate-oscuro) 10%, transparent), transparent 70%);
  background-size: 140% 140%;
  animation: mesh-drift 22s ease-in-out infinite;
  will-change: background-position;
}
.seccion--oscura .mesh-bg, .portada .mesh-bg {
  background-image:
    radial-gradient(40% 40% at 50% 50%, color-mix(in srgb, var(--granate) 45%, transparent), transparent 70%),
    radial-gradient(35% 35% at 50% 50%, color-mix(in srgb, var(--gris) 18%, transparent), transparent 70%),
    radial-gradient(45% 45% at 50% 50%, color-mix(in srgb, var(--granate-oscuro) 35%, transparent), transparent 70%);
}

@keyframes glow-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .55; }
  50%      { transform: translate(6%, 8%) scale(1.12); opacity: .85; }
}
.halo {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 22rem; height: 22rem; filter: blur(64px);
  animation: glow-float 14s ease-in-out infinite;
}
.halo--1 { top: -8rem; left: 8%; background: color-mix(in srgb, var(--granate) 22%, transparent); }
.halo--2 { bottom: -6rem; right: 4%; background: color-mix(in srgb, var(--gris) 30%, transparent); animation-delay: -7s; }
@media (max-width: 767px) { .halo { width: 13rem; height: 13rem; filter: blur(48px); } }
/* Sobre fondo oscuro el halo granate tiene que ser más intenso para notarse */
.portada .halo--1, .seccion--foto .halo--1 { background: color-mix(in srgb, var(--granate) 55%, transparent); }

/* ---------- Insignia que flota ---------- */

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.animate-float-soft { animation: float-soft 4s ease-in-out infinite; }

/* ---------- Brillo que recorre el CTA principal ---------- */

@keyframes shine-sweep {
  0%        { transform: translateX(-120%) skewX(-20deg); }
  60%, 100% { transform: translateX(260%) skewX(-20deg); }
}
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: '';
  position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blanco) 40%, transparent), transparent);
  animation: shine-sweep 3.8s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- Parallax (el wrapper lo crea animations.js) ---------- */

[data-parallax] { overflow: hidden; }
.parallax-inner { width: 100%; height: 100%; transform: scale(1.06); will-change: transform; }

/* ---------- Hovers (tarjetas y botones) ---------- */

.boton { transition: transform .2s var(--ease-cine), background .2s, color .2s, border-color .2s, box-shadow .2s; }
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(.98); }

.tarjeta, .servicio, .razon, .otro, .ba {
  transition: transform .3s var(--ease-cine), box-shadow .3s var(--ease-cine), border-color .3s;
}
.tarjeta:hover, .servicio:hover, .razon:hover, .otro:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta img, .servicio__foto img, .fotos-servicio img { transition: transform .7s var(--ease-cine); }
.tarjeta:hover img, .servicio:hover .servicio__foto img, .fotos-servicio li:hover img { transform: scale(1.05); }

/* Cabecera: sombra al hacer scroll */
.cabecera { transition: box-shadow .3s var(--ease-cine); }
.cabecera--scroll { box-shadow: 0 6px 24px rgb(0 0 0 / .08); }

/* ---------- Transición suave entre páginas (navegadores compatibles) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-salida .25s var(--ease-cine) both; }
  ::view-transition-new(root) { animation: vt-entrada .45s var(--ease-cine) both; }
  .cabecera { view-transition-name: cabecera; }
  .flotante-wa { view-transition-name: flotante-wa; }
}
@keyframes vt-salida { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-entrada { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }

/* ---------- Accesibilidad: no negociable ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in { opacity: 1; transform: none; filter: none; }
  .blur-text { opacity: 1; filter: none; transform: none; }
  .parallax-inner { transform: none; }
  [data-blur-text] { opacity: 1; }
}

/* ---------- Fondo de fotos (portadas y secciones, como en Reformando) ---------- */
/* De 1 a 4 fotos que se funden una en otra (7 s cada una) mientras hacen un zoom lento.
   Cada foto entra ENCIMA de la anterior, que sigue opaca hasta que la nueva ha entrado
   del todo, para que no se transparente el fondo. Tiempos de cada ciclo: entra en 1,7 s,
   se queda hasta los 8,7 s y se va del todo a los 10,4 s (en % según cuántas fotos haya). */

.foto-fondo__slide { animation: foto-fundido 28s linear infinite backwards; }
.foto-fondo--3 .foto-fondo__slide { animation-name: foto-fundido-3; animation-duration: 21s; }
.foto-fondo--2 .foto-fondo__slide { animation-name: foto-fundido-2; animation-duration: 14s; }
.foto-fondo--1 .foto-fondo__slide { animation: none; opacity: 1; }
/* Sin JS las fotos 2 a 4 de la portada no se cargan (las carga app.js): queda fija la primera */
html:not(.js) .foto-fondo__slide { animation: none; }
html:not(.js) .foto-fondo__slide:has(img[data-src]) { display: none; }
.foto-fondo__media { animation: foto-zoom 14s ease-in-out infinite alternate; will-change: transform; }
.foto-fondo__slide:nth-child(even) .foto-fondo__media { animation-direction: alternate-reverse; }
.foto-fondo.pausado .foto-fondo__slide,
.foto-fondo.pausado .foto-fondo__media { animation-play-state: paused; }

@keyframes foto-fundido {
  0%       { opacity: 0; }
  6%, 31%  { opacity: 1; }
  37%, 100% { opacity: 0; }
}
@keyframes foto-fundido-3 {
  0%         { opacity: 0; }
  8%, 41.5%  { opacity: 1; }
  49.5%, 100% { opacity: 0; }
}
@keyframes foto-fundido-2 {
  0%       { opacity: 0; }
  12%, 62% { opacity: 1; }
  74%, 100% { opacity: 0; }
}
@keyframes foto-zoom {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-2%, -1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin pase de fotos ni zoom: se queda fija la primera */
  .foto-fondo__slide, .foto-fondo__media { animation: none !important; }
}