/* ===== FOOTER MÍNIMO — Jennifer =====
   Banda negra (#111111) con texto hueso, cuatro niveles separados por líneas finas:
   1. Invitación a reservar (Times) + botón · 2. Logo, contacto y navegación ·
   3. Índice de localidades (enlazado interno de las landings) · 4. Línea legal.
   Única fuente de las reglas .ft-*; no duplicar en landing.css. */

.ft {
    background: #111111;
    color: #E6DED2;
    font-family: "Host Grotesk", system-ui, sans-serif;
    padding: 4rem 0 2rem;
}
.ft-inner { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.ft a { color: inherit; text-decoration: none; }
.ft a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.ft a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ── 1. Invitación + botón ── */
.ft-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(230, 222, 210, 0.15);
}
.ft-cta-title {
    font-family: "Times New Roman", Times, "Liberation Serif", serif;
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    margin: 0;
}
.ft-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 52px;
    padding: 0 2rem;
    border-radius: 100px;
    background: #8FDCCB;
    color: #0B2F29;
    font-weight: 600;
    font-size: 1.05rem;
    white-space: nowrap;
    transition: background 0.2s ease;
}
.ft-cta-btn:hover { background: #6FCDB8; color: #0B2F29; text-decoration: none; }

/* ── 2. Logo, contacto y navegación ── */
.ft-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 2.5rem 0;
}
.ft-brand { display: flex; flex-direction: column; gap: 1rem; }
.ft-logo { display: inline-flex; color: #FFFFFF; }
.ft-logo:hover { text-decoration: none; }
.ft-logo-img { height: 44px; width: auto; }
.ft-contact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #9A9A9A;
}
.ft-contact a { color: #E6DED2; }
.ft-nav { display: flex; gap: 1.75rem; flex-wrap: wrap; font-size: 0.95rem; padding-top: 0.6rem; }

/* ── 3. Índice de localidades ── */
.ft-places {
    border-top: 1px solid rgba(230, 222, 210, 0.15);
    padding-top: 1.6rem;
    font-size: 0.84rem;
    line-height: 1.9;
    color: #9A9A9A;
}
.ft-places-line { margin: 0 0 0.5rem; }
.ft-places-label { color: #E6DED2; margin-right: 0.5rem; }
.ft-places a { color: #9A9A9A; }
.ft-places a:hover { color: #FFFFFF; }
.ft-more { margin-top: 0.6rem; }
.ft-more summary {
    cursor: pointer;
    color: #E6DED2;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}
.ft-more summary::-webkit-details-marker { display: none; }
.ft-more summary::after { content: "+"; font-size: 1rem; }
.ft-more[open] summary::after { content: "−"; }

/* ── 4. Línea legal ── */
.ft-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(230, 222, 210, 0.15);
    font-size: 0.8rem;
    color: #9A9A9A;
}
.ft-bottom p { margin: 0; }
.ft-bottom a { color: #E6DED2; }

@media (max-width: 768px) {
    .ft { padding: 3rem 0 1.5rem; }
    .ft-cta { padding-bottom: 2.25rem; }
    .ft-cta-btn { width: 100%; justify-content: center; }
    .ft-meta { flex-direction: column; padding: 2rem 0; }
    .ft-nav { flex-direction: column; gap: 0; padding-top: 0; width: 100%; }
    .ft-nav a { display: block; min-height: 44px; line-height: 44px; border-top: 1px solid rgba(230, 222, 210, 0.12); }
    .ft-bottom { flex-direction: column; gap: 0.35rem; }
}

/* ===== BOTÓN FLOTANTE DE WHATSAPP ===== */
.wsp-float {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 64px;
    height: 64px;
    background: #8FDCCB;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    z-index: 950; /* debajo del header (1000) y del menú móvil */
    transition: transform 0.25s ease, background 0.25s ease;
}
.wsp-float:hover { background: #6FCDB8; transform: scale(1.08); color: #fff; }

/* Burbuja de estado sobre el botón */
.wsp-float-bubble {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: #fff;
    color: var(--gris-texto, #1A1A1A);
    font-family: 'Host Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.7rem 1.1rem;
    border-radius: 100px;
    box-shadow: 0 6px 20px rgba(0, 30, 70, 0.16);
    white-space: nowrap;
    animation: wspBubbleIn 0.35s ease backwards;
    animation-delay: 0.9s;
}
.wsp-float-bubble[hidden] { display: none; }
.wsp-float-bubble.oculta {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.wsp-float:hover .wsp-float-bubble.oculta,
.wsp-float:focus-visible .wsp-float-bubble.oculta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.wsp-float-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 22px;
    border: 6px solid transparent;
    border-top-color: #fff;
}
.wsp-bubble-dot { width: 8px; height: 8px; border-radius: 50%; background: #9A9A9A; flex-shrink: 0; }
/* Verde con pulso dentro del horario de atención (9 a 17 h Uruguay, ver footer.php) */
.wsp-float-bubble.online .wsp-bubble-dot { background: #8FDCCB; animation: wspPulse 2s infinite; }

@keyframes wspPulse {
    0%   { box-shadow: 0 0 0 0 rgba(143, 220, 203, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(143, 220, 203, 0); }
    100% { box-shadow: 0 0 0 0 rgba(143, 220, 203, 0); }
}
@keyframes wspBubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (max-width: 768px) {
    .wsp-float { width: 60px; height: 60px; bottom: 18px; right: 18px; font-size: 1.85rem; }
}