/* ==========================================================================
   Landing /constructora sobre el sistema Flow (flow.css).
   Namespace .ct- para el layout; el componente de chats WhatsApp (.chat-*,
   .wa-*) se mantiene tal cual porque replica la app real.
   ========================================================================== */

/* ── HERO + banner antes/después ────────────────────────────────────────── */
.ct-hero h1 {
    max-width: 17ch;
}

.ct-banner {
    margin: 0;
}

.ct-banner img {
    display: block;
    width: 100%;
    height: clamp(260px, 42vw, 660px);
    object-fit: cover;
    object-position: 50% 0%;
}

/* ── Resultados reales (bloque claro) ───────────────────────────────────── */
.ct-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.5rem);
}

.ct-shot {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #31363a;
    box-shadow: 0 24px 48px rgba(10, 8, 24, 0.18);
}

.ct-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.ct-note {
    max-width: 70ch;
    margin-top: clamp(1.4rem, 2.4vw, 2rem);
    color: var(--fl-on-light);
    font-size: 1rem;
    line-height: 1.5;
}

/* ── Chats (bloque oscuro) ──────────────────────────────────────────────── */
.ct-chat-cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

/* Carrusel swipeable de chats */
.chat-carousel {
    display: flex;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 1.5rem;
    scrollbar-color: var(--line-strong) transparent;
}

.chat-carousel::-webkit-scrollbar { height: 8px; }
.chat-carousel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.chat-carousel::-webkit-scrollbar-track { background: transparent; }

.chat-card {
    position: relative;
    display: flex;
    flex: 0 0 clamp(285px, 23vw, 320px);
    flex-direction: column;
    aspect-ratio: 9 / 17.5;
    scroll-snap-align: center;
    overflow: hidden;
    border: 1px solid rgba(134, 150, 160, 0.34);
    border-radius: 17px;
    background: #111b21;
    box-shadow: 0 20px 44px rgba(4, 3, 12, 0.45);
}

.wa-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 27px;
    padding: 0 11px;
    background: #0b141a;
}

.wa-status::before {
    content: attr(data-time);
    color: #e9edef;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.wa-status-icons { display: flex; align-items: center; gap: 6px; color: #e9edef; }
.wa-status-icons svg { display: block; height: 10.5px; width: auto; }
.wa-status-icons .wa-bat { height: 11.5px; }

/* Cabecera del chat: replica el tratamiento oscuro y compacto de WhatsApp. */
.wa-header { display: flex; align-items: center; gap: 10px; padding: 9px 12px 10px; background: #0b141a; }
.wa-back { flex: 0 0 auto; color: #e9edef; }
.wa-back svg { width: 13px; height: 18px; }

.wa-av {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    background-image: none !important;
    box-shadow: none;
}

/* Una sola lámina local para los cuatro perfiles: evita depender de imágenes externas. */
.wa-av--rodrigo,
.wa-av--marce,
.wa-av--diego,
.wa-av--flor {
    background-image: url("../img/whatsapp-avatars.png") !important;
    background-repeat: no-repeat;
    background-size: 200% 200%;
    background-color: #34444d;
}

.wa-av--rodrigo { background-position: left top; }
.wa-av--marce { background-position: right top; }
.wa-av--diego { background-position: left bottom; }
.wa-av--flor { background-position: right bottom; }

.wa-peer { flex: 1; min-width: 0; }
.wa-peer strong { display: block; color: #e9edef; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-peer span { color: #aebac1; font-size: 0.69rem; }
.wa-icons { display: flex; gap: 13px; flex: 0 0 auto; color: #e9edef; }
.wa-icons svg { width: 17px; height: 17px; }

/* Cuerpo — fondo oscuro con el patrón de garabatos de WhatsApp */
.wa {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    padding: 13px 10px 10px;
    overflow: hidden;
    background-color: #0b141a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23c6d7dd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.1'%3E%3Cpath d='M16 22h22a4 4 0 0 1 4 4v11a4 4 0 0 1-4 4h-9l-7 5v-5h-6a4 4 0 0 1-4-4V26a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='104' cy='30' r='11'/%3E%3Cpath d='M104 24v6l4 3'/%3E%3Cpath d='M28 96l6 6 13-15'/%3E%3Cpath d='M94 92c0-5 8-5 8 0 0-5 8-5 8 0 0 6-8 12-8 12s-8-6-8-12z'/%3E%3Cpath d='M58 62h18M58 68h11'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 76px 76px;
}

.wa-day {
    align-self: center;
    margin: 2px 0 6px;
    padding: 3px 11px;
    border-radius: 7px;
    background: #182229;
    color: #d0d9dd;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.wa-msg {
    position: relative;
    max-width: 86%;
    padding: 6px 8px 4px;
    border-radius: 8px;
    color: #e9edef;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.84rem;
    line-height: 1.3;
    box-shadow: 0 1px 0 rgba(0,0,0,.12);
}

.wa-msg.in { align-self: flex-start; background: #202c33; border-top-left-radius: 2px; }
.wa-msg.out { align-self: flex-end; background: #005c4b; border-top-right-radius: 2px; }

/* Colita de la burbuja (como en WhatsApp) */
.wa-msg.in::before {
    content: ""; position: absolute; top: 0; left: -7px;
    border-top: 7px solid #202c33; border-left: 7px solid transparent;
}
.wa-msg.out::before {
    content: ""; position: absolute; top: 0; right: -7px;
    border-top: 7px solid #005c4b; border-right: 7px solid transparent;
}

.wa-msg time { float: right; margin: 5px -1px -1px 12px; color: #8696a0; font-size: 0.56rem; white-space: nowrap; }
.wa-msg.out time { color: #8696a0; }
.wa-msg.out .tk { color: #53bdeb; margin-left: 2px; }

/* Nota de voz */
.wa-voice { display: flex; align-items: center; gap: 8px; min-width: 210px; padding-bottom: 6px; }
.wa-voice .wa-av { width: 32px; height: 32px; font-size: 0.72rem; }
.wa-voice .play { flex: 0 0 auto; color: #8696a0; display: flex; }
.wa-voice .play svg { width: 15px; height: 15px; }
.wa-voice .wave { flex: 1; height: 20px; color: #6a7f8a; }
.wa-voice .dur { flex: 0 0 auto; color: #8696a0; font-size: 0.6rem; }
.wa-voice time { float: none; margin: 0 0 0 2px; }

/* Compositor visual, separado del hilo como en la app móvil. */
.wa-compose {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px 10px;
    background: #0b141a;
    color: #8696a0;
    font-family: "Segoe UI", Arial, sans-serif;
}
/* Pill de entrada: emoji + placeholder adentro, como WhatsApp real. */
.wa-compose-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 8px 11px;
    border-radius: 20px;
    background: #202c33;
}
.wa-compose-smile { flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; color: #8696a0; }
.wa-compose-text { flex: 1; min-width: 0; color: #8696a0; font-size: 0.8rem; }
.wa-compose-icon { display: block; flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: #8696a0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Botón de micrófono: círculo verde WhatsApp con mic blanco. */
.wa-compose-mic { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: #00a884; }
.wa-compose-mic svg { display: block; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .ct-shots {
        grid-template-columns: 1fr;
    }

    .ct-banner img {
        height: clamp(240px, 62vw, 340px);
    }
}