/* ══════════════════════════════════════════
   FOOTER — MINIMAL PREMIUM BRANDING
   Khal Calloway Studio · Estilos v2
   
   📌 Copiar al final de tu archivo CSS
   📌 Requiere variables: --ft, --terra, --terra-l,
      --olivo, --olivo-l, --olivo-xl, --oscuro, --ease-out
   
   🛡️ BUG-FREE REVEAL:
   El footer usa .footer-reveal en lugar de data-aos.
   Esto garantiza que SIEMPRE sea visible, incluso cuando
   el usuario hace scroll muy rápido hasta el final.
   Ver footer-branding.js para el observer requerido.
══════════════════════════════════════════ */

footer {
    background: transparent;
    border-top:1px solid rgba(85,107,47,.08);
    text-align:center; padding:70px 20px 50px; position:relative; z-index:1;
}

/* ── Reveal sin AOS — observer propio para garantía de visibilidad ── */
.footer-reveal {
    opacity:0;
    transform:translateY(16px);
    transition: opacity .8s ease var(--fd, 0s), transform .8s var(--ease-out, ease) var(--fd, 0s);
}
.footer-reveal.appeared {
    opacity:1;
    transform:translateY(0);
}

.footer-divider {
    display:flex; align-items:center; justify-content:center;
    gap:15px; margin-bottom:30px;
}
.footer-divider::before,.footer-divider::after {
    content:''; height:1px; width:clamp(80px,22vw,160px);
    background:linear-gradient(to right,transparent,rgba(85,107,47,.3)); opacity:.5;
}
.footer-divider::after {
    background:linear-gradient(to left,transparent,rgba(85,107,47,.3));
}
.footer-divider span {
    color:var(--terra); font-size:1em;
    animation:parpadeo 3s infinite;
}
/* Si tu plantilla no tiene este keyframe: */
@keyframes parpadeo { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ── Sello dedicado — animaciones de respiración ── */
.footer-sello {
    font-size:.65em; letter-spacing:3px;
    text-transform:uppercase; line-height:2.4; margin-bottom:30px;
    animation:selloBreath 6s ease-in-out infinite alternate;
}
@keyframes selloBreath {
    0%   { color:rgba(168,191,150,.35); }
    100% { color:rgba(210,220,190,.65); text-shadow:0 0 20px rgba(151,168,108,.12); }
}
.footer-sello .nombre-dedicado {
    color:var(--olivo-xl); font-weight:500; letter-spacing:4px;
    animation:selloBreath 6s ease-in-out infinite alternate;
}
.footer-sello .lugar-fecha {
    font-size:.9em;
    animation:fechaBreath 5s ease-in-out infinite alternate;
}
@keyframes fechaBreath {
    0%   { color:rgba(168,191,150,.3); }
    100% { color:rgba(210,220,190,.55); }
}

/* ── Link de branding con ícono de Instagram ── */
.footer-brand {
    display:inline-flex; align-items:center; gap:10px;
    text-decoration:none; padding:10px 4px;
    transition: all .4s ease; cursor:pointer;
    position:relative;
}
.footer-brand:hover { transform:none; }

/* Dot pulsante — da la señal sutil "pucha aquí" */
.footer-brand::after {
    content:'';
    position:absolute; right:-10px; top:50%; transform:translateY(-50%);
    width:4px; height:4px; border-radius:50%;
    background:rgba(194,113,79,.6);
    animation: brandDot 4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes brandDot {
    0%,45%,100% { opacity:0; transform:translateY(-50%) scale(.5); }
    55%,85%     { opacity:1; transform:translateY(-50%) scale(1); }
}

.footer-brand .ig-ico {
    width:14px; height:14px; opacity:.35;
    transition:opacity .4s ease, color .4s ease;
    color:var(--olivo-l); flex-shrink:0;
    animation: icoBreath 3.5s ease-in-out infinite alternate;
}
@keyframes icoBreath { 0%{opacity:.25} 100%{opacity:.5} }
.footer-brand:hover .ig-ico { opacity:.9; color:var(--terra-l); animation:none; }

/* ── Texto de branding — v2 más visible ── */
.footer-brand-text {
    font-family:var(--ft); font-style:italic;
    color:rgba(194,113,79,.8); font-size:1em; letter-spacing:3px;
    transition: color .4s ease, text-shadow .4s ease, letter-spacing .4s ease;
    position:relative; overflow:hidden;
}
/* Shimmer sweep — un glint de luz cada 5s */
.footer-brand-text::after {
    content:'';
    position:absolute; top:0; left:-120%; width:55%; height:100%;
    background:linear-gradient(100deg,
        transparent 0%,
        rgba(255,255,255,.08) 45%,
        rgba(255,230,200,.12) 50%,
        rgba(255,255,255,.08) 55%,
        transparent 100%);
    animation: brandShimmer 5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes brandShimmer {
    0%,70%  { left:-120%; }
    100%    { left:160%; }
}
.footer-brand:hover .footer-brand-text {
    color:rgba(194,113,79,.9);
    letter-spacing:4px;
    text-shadow: 0 0 18px rgba(194,113,79,.3);
}