/* ═══════════════════════════════════════════════════════════════════
   RAM REFRIGERACIÓN — ANIMATION SYSTEM v2.0
   Sin WOW.js, sin flicker. Pure CSS + IntersectionObserver.
   ═══════════════════════════════════════════════════════════════════

   CÓMO FUNCIONA:
   1. Un <script> inline en <head> agrega "anim-js" al <html>
   2. Si no hay JS: elementos siempre visibles (sin anim-js = sin ocultar)
   3. Con JS: elementos se ocultan y se revelan al hacer scroll
   ═══════════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ─────────────────────────────────────────────────── */
@keyframes ram-fadeUp {
    from { opacity: 0; transform: translateY(44px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ram-fadeDown {
    from { opacity: 0; transform: translateY(-36px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ram-fadeLeft {
    from { opacity: 0; transform: translateX(-52px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ram-fadeRight {
    from { opacity: 0; transform: translateX(52px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ram-zoomIn {
    from { opacity: 0; transform: scale(0.84); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes ram-zoomInUp {
    from { opacity: 0; transform: scale(0.88) translateY(30px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ram-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ram-slideDown {
    from { opacity: 0; transform: translateY(-60px); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: translateY(0);     clip-path: inset(0 0 0 0); }
}

/* ── HERO: Animaciones de carga de página (sin scroll trigger) ─── */
/* Estas se disparan automáticamente al cargar */
.hero-title {
    animation: ram-fadeDown 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-subtitle {
    animation: ram-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.25s;
}
.hero-buttons {
    animation: ram-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.45s;
}

/* ── PAGE HEADER (páginas internas) ────────────────────────────── */
.page-header h1 {
    animation: ram-fadeDown 0.8s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.1s;
}
.page-header .breadcrumb {
    animation: ram-fadeUp 0.6s ease both;
    animation-delay: 0.3s;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL-TRIGGERED ANIMATIONS
   Requieren .anim-js en <html> + atributo data-anim en el elemento

   ANTI-FOUC: Los elementos NO se ocultan hasta que JS los marca como
   "listos para animar" (anim-ready). Esto evita el parpadeo/flash en
   los elementos que ya están visibles al cargar la página.
   ═══════════════════════════════════════════════════════════════════ */

/* Estado inicial — SOLO en elementos que el observer ya registró (off-screen) */
.anim-js [data-anim].anim-ready {
    opacity: 0;
}

/* Tipos de entrada — solo para elementos fuera del viewport inicial */
.anim-js [data-anim="up"].anim-ready       { transform: translateY(44px); }
.anim-js [data-anim="down"].anim-ready     { transform: translateY(-36px); }
.anim-js [data-anim="left"].anim-ready     { transform: translateX(-52px); }
.anim-js [data-anim="right"].anim-ready    { transform: translateX(52px); }
.anim-js [data-anim="zoom"].anim-ready     { transform: scale(0.84); }
.anim-js [data-anim="zoom-up"].anim-ready  { transform: scale(0.88) translateY(30px); }
.anim-js [data-anim="fade"].anim-ready     { transform: none; }

/* Estado final — cuando entra al viewport */
.anim-js [data-anim].anim-ready.anim-in {
    opacity: 1 !important;
    transform: none !important;
    transition:
        opacity  0.72s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Elementos en viewport al cargar: animación suave de entrada */
.anim-js [data-anim].anim-in:not(.anim-ready) {
    opacity: 1;
    transform: none;
}

/* ── Delays de stagger ──────────────────────────────────────────── */
.anim-js [data-anim].anim-ready[data-delay="1"].anim-in { transition-delay: 0.08s; }
.anim-js [data-anim].anim-ready[data-delay="2"].anim-in { transition-delay: 0.16s; }
.anim-js [data-anim].anim-ready[data-delay="3"].anim-in { transition-delay: 0.24s; }
.anim-js [data-anim].anim-ready[data-delay="4"].anim-in { transition-delay: 0.32s; }
.anim-js [data-anim].anim-ready[data-delay="5"].anim-in { transition-delay: 0.40s; }
.anim-js [data-anim].anim-ready[data-delay="6"].anim-in { transition-delay: 0.48s; }
.anim-js [data-anim].anim-ready[data-delay="7"].anim-in { transition-delay: 0.56s; }
.anim-js [data-anim].anim-ready[data-delay="8"].anim-in { transition-delay: 0.64s; }
.anim-js [data-anim].anim-ready[data-delay="9"].anim-in { transition-delay: 0.72s; }

/* ── Duraciones alternativas ─────────────────────────────────────── */
.anim-js [data-anim].anim-ready[data-dur="fast"].anim-in  { transition-duration: 0.45s; }
.anim-js [data-anim].anim-ready[data-dur="slow"].anim-in  { transition-duration: 1.1s; }

/* ── Stagger automático en grupos ─────────────────────────────── */
/* Aplica data-stagger al padre → hijos se animan en cascada */
/* ANTI-FOUC: solo se ocultan cuando el grupo está fuera del viewport */
.anim-js [data-stagger].anim-ready > * {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(1)  { transition-delay: 0.00s; }
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(2)  { transition-delay: 0.09s; }
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(3)  { transition-delay: 0.18s; }
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(4)  { transition-delay: 0.27s; }
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(5)  { transition-delay: 0.36s; }
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(6)  { transition-delay: 0.45s; }
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(7)  { transition-delay: 0.54s; }
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(8)  { transition-delay: 0.63s; }
.anim-js [data-stagger].anim-ready.anim-in > *:nth-child(9)  { transition-delay: 0.72s; }
.anim-js [data-stagger].anim-ready.anim-in > * {
    opacity: 1;
    transform: none;
}

/* ── Parallax containers ─────────────────────────────────────────── */
.parallax-container {
    overflow: hidden;
    position: relative;
}
.parallax-bg {
    position: absolute;
    inset: -15% 0;
    background-attachment: scroll;
    background-position: center;
    background-size: cover;
    transition: transform 0.05s linear;
    will-change: transform;
}

/* ── Typewriter cursor ─────────────────────────────────────────── */
.typewriter-cursor::after {
    content: '|';
    animation: blink 0.75s step-end infinite;
    color: #00B4D8;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Reveal line (decorative underline que crece) ─────────────── */
.reveal-line {
    position: relative;
    display: inline-block;
}
.reveal-line::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #0077B6, #00B4D8);
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.3s;
}
.anim-in .reveal-line::after,
.reveal-line.anim-in::after {
    width: 100%;
}

/* ── Floating badge ────────────────────────────────────────────── */
@keyframes float-badge {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-8px) rotate(-2deg); }
}
.floating-badge {
    animation: float-badge 3.5s ease-in-out infinite;
}

/* ── Pulse ring (para íconos de servicio) ──────────────────────── */
@keyframes pulse-ring {
    0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,119,182,.45); }
    70%  { transform: scale(1.03);box-shadow: 0 0 0 12px rgba(0,119,182,0); }
    100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,119,182,0); }
}
.pulse-icon { animation: pulse-ring 2.6s ease infinite; }

/* ── Image reveal (máscara que se abre) ────────────────────────── */
@keyframes mask-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}
.anim-js [data-anim="mask"].anim-ready {
    opacity: 1 !important;
    clip-path: inset(0 100% 0 0);
    transform: none !important;
    transition: none !important;
}
.anim-js [data-anim="mask"].anim-ready.anim-in {
    animation: mask-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition: none !important;
}

/* ── Count-up número highlight ─────────────────────────────────── */
@keyframes number-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); color: #00B4D8; }
    100% { transform: scale(1); }
}
.counter-pop {
    animation: number-pop 0.4s ease;
}

/* ── Shimmer hover en tarjetas ─────────────────────────────────── */
.shimmer-card {
    position: relative;
    overflow: hidden;
}
.shimmer-card::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.15) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: left 0.65s ease;
    pointer-events: none;
    z-index: 1;
}
.shimmer-card:hover::before {
    left: 125%;
}

/* ── Underline nav hover ────────────────────────────────────────── */
@keyframes nav-underline-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ── Section divider animated ──────────────────────────────────── */
.animated-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #0077B6, #00B4D8);
    border-radius: 2px;
    margin: 0 auto 1.5rem;
    position: relative;
    overflow: hidden;
}
.animated-divider::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.5);
    animation: divider-shine 2.5s ease infinite 1s;
}
@keyframes divider-shine {
    0%   { left: -100%; }
    50%, 100% { left: 100%; }
}

/* ─────────────────────────────────────────────────────────────────
   REDUCE MOTION — Accessibility
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .anim-js [data-anim].anim-ready,
    .anim-js [data-stagger].anim-ready > *,
    .hero-title, .hero-subtitle, .hero-buttons,
    .page-header h1, .page-header .breadcrumb {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .parallax-bg { background-attachment: scroll; }
}
