/* Estilos exclusivos de la home. Los colores salen de los tokens de `public-theme.css`. */

/* ---------------------------------------------------------------- 1 · hero */

.home-hero {
    background: var(--tb-tint);
    /* La navbar es fija y taparía el sticker. */
    padding: 8rem 0 0;
}

.home-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

.home-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
}

/* `body.tb-public` adelante: el tema fija el letter-spacing de h1-h4 con dos elementos en el
   selector, así que una regla de una clase pierde. */
body.tb-public .home-hero__title {
    font-size: 3.125rem;
    letter-spacing: -0.025em;
    line-height: 1.06;
    margin: 0;
    max-width: 14ch;
}

.home-hero__sub {
    font-size: 1.09rem;
    line-height: 1.6;
    max-width: 44ch;
    margin: 0;
}

/* `body.tb-public` adelante: el tema define `.tb-btn` con dos clases, así que una regla de una
   sola clase NO le gana. Vale para todo lo que pise a `.tb-btn`. */
body.tb-public .home-hero__cta {
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.9375rem 1.75rem;
    box-shadow: 0 14px 28px -12px rgba(91, 79, 214, 0.5);
}

.home-hero__trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    font-size: 0.845rem;
    color: var(--tb-gray);
}

.home-hero__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tb-violet-dim);
}

.home-hero__rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4375rem;
    color: var(--tb-text);
}

/* El azul de Google, un escalón más oscuro que el #4285F4 del logo: ése da 3,25:1 sobre el
   tinte y no llega a AA en 14px. Éste da 4,89:1. */
.home-hero__g {
    color: #1567D3;
    font-weight: 700;
}

.home-hero__stars {
    color: var(--tb-gold);
    letter-spacing: -0.05em;
}

body.tb-public .home-hero__more {
    white-space: nowrap;
}

/* `body.tb-public` adelante: el tema apaga el subrayado de TODOS los `<a>` con una clase y un
   elemento, así que una regla de una sola clase pierde y el link quedaba sin subrayar. */
body.tb-public .home-hero__reviews {
    color: var(--tb-violet-deep);
    text-decoration: underline;
}

.home-hero__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
}

.home-hero__chat {
    transform: rotate(-1.5deg);
}

/* ---------------------------------------------------------------- 1b · franja de datos */

.home-band {
    margin-top: 2.75rem;
    padding: 1.625rem 0 1.5rem;
    border-top: 1px solid var(--tb-line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.home-band__item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.home-band__item + .home-band__item {
    border-left: 1px solid var(--tb-line);
    padding-left: 1.75rem;
}

/* `body.tb-public` adelante: el tema declara `body.tb-public strong { color: ink }` con dos
   elementos, y sin esto los números salen NEGROS en vez de violeta. */
body.tb-public .home-band__item strong {
    font-family: var(--tb-font-display);
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--tb-violet);
}

.home-band__item span {
    font-size: 0.845rem;
    line-height: 1.5;
    color: var(--tb-text);
    padding-top: 3px;
}

.home-band__foot {
    grid-column: 1 / -1;
    margin: -6px 0 0;
    font-size: 0.72rem;
    color: var(--tb-gray);
}

/* ---------------------------------------------------------------- 2 · diferenciales */

.home-diff {
    max-width: 62.5rem;
    margin: 2.25rem auto 0;
}

/* El borde va en TODAS las filas: la primera también lleva línea arriba. Con el selector `+`
   esa primera línea no existía. */
.home-diff__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding: 2.625rem 0;
    border-top: 1px solid var(--tb-line);
}

/* Invierte las columnas sin tocar el orden del HTML, que es el que lee un lector de pantalla. */
.home-diff__row--flip .home-diff__text { order: 2; }

/* Las mayúsculas van por CSS y no escritas en el HTML: así el lector de pantalla lee
   "Bot oficial de WhatsApp" y no letra por letra. */
.home-diff__num {
    display: block;
    font-family: var(--tb-font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--tb-violet);
    margin-bottom: 0.75rem;
}

.home-diff__text h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.home-diff__kicker {
    margin: 0;
    font-weight: 600;
    color: var(--tb-violet-deep);
}

.home-diff__visual {
    display: flex;
    justify-content: center;
}

/* La captura del bot no tiene que robarle protagonismo al texto. */
.home-diff__shot {
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: var(--tb-radius-card);
    border: 1px solid var(--tb-line);
}

/* Mock del panel de la clienta (diferencial 02) */
.home-pack {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-card);
    padding: 1.5rem;
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.home-pack__name {
    font-weight: 600;
    color: var(--tb-ink);
    margin-bottom: 1rem;
}

/* 30% = las 3 sesiones usadas de 10 del mock. Va acá y no en un `style=` del template, que el
   CLAUDE.md del proyecto prohíbe: es un valor fijo de la ilustración, no un dato. */
.home-pack__meta {
    display: flex;
    justify-content: space-between;
    margin: 0.6rem 0 1.25rem;
    font-size: 0.85rem;
    color: var(--tb-gray);
}

body.tb-public .home-pack__cta {
    display: block;
    cursor: default;
}

.home-pack__note {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--tb-gray);
}

/* Lista de recupero (diferencial 03) */
.home-recall {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 340px;
}

.home-recall li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-btn);
    padding: 0.85rem 1rem;
}

.home-recall li + li { margin-top: 0.6rem; }

.home-recall strong {
    display: block;
    font-size: 0.95rem;
}

.home-recall em {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    color: var(--tb-gray);
}

.home-recall__wa {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-wa-strong);
    color: #fff;
    border-radius: 50%;
}

/* Grilla de huecos (diferencial 04) */
.home-slots {
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-card);
    padding: 1.5rem;
    width: 100%;
    max-width: 320px;
}

.home-slots__day {
    font-family: var(--tb-font-display);
    font-weight: 700;
    color: var(--tb-ink);
    margin-bottom: 1rem;
}

.home-slots__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.home-slots__slot {
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.home-slots__slot.is-taken {
    background: var(--tb-tint);
    color: var(--tb-gray);
    text-decoration: line-through;
}

.home-slots__slot.is-free {
    background: var(--tb-violet);
    color: #fff;
}

.home-slots__pill {
    margin: 1.25rem 0 0;
    padding: 0.5rem 0.75rem;
    background: var(--tb-violet-soft);
    border-radius: var(--tb-radius-btn);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tb-violet-deep);
    text-align: center;
}

/* ---------------------------------------------------------------- 3 · pasos */

.home-step__num {
    display: block;
    font-family: var(--tb-font-display);
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--tb-violet);
    margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- 4 · lo básico

   Dos columnas de 960px, cada ítem con el ícono en cajita a la izquierda y una línea que lo
   separa del siguiente. Valores del prototipo. */

.home-basics {
    max-width: 60rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
}

.home-basics__item {
    display: flex;
    gap: 1rem;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--tb-line);
}

.home-basics__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--tb-radius-btn);
    background: var(--tb-icon-bg);
    color: var(--tb-violet-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

body.tb-public .home-basics__item h3 {
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
}

.home-basics__item p {
    margin: 0;
    font-size: 0.845rem;
    line-height: 1.5;
    color: var(--tb-text);
}

/* Le gana a `.home-basics__item p`, que es su regla hermana y tiene una clase más. */
.home-basics__item .home-basics__proof {
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tb-violet);
}

.home-basics__more {
    margin: 1.75rem 0 0;
    text-align: center;
}

/* ---------------------------------------------------------------- 5 · precios */

#preguntas {
    scroll-margin-top: 90px;
}

/* ---------------------------------------------------------------- 6 · también lo usan */

.home-also {
    padding: 0 0 4.5rem;
    text-align: center;
}

.home-also__lead {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tb-gray);
}

.home-also__list {
    margin: 0;
    font-size: 1.05rem;
    color: var(--tb-gray);
}

/* ---------------------------------------------------------------- 7 · CTA final

   El panel violeta del prototipo: 1000px de ancho, respiro grande y el título acotado a 22ch
   para que rompa en tres líneas parejas. */

#cta .tb-panel {
    max-width: 62.5rem;
    margin: 0 auto;
    padding: 4rem 3rem;
}

body.tb-public #cta .tb-panel h2 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.14;
    margin: 0 auto;
    max-width: 22ch;
}

body.tb-public #cta .tb-panel p {
    margin: 1rem auto 0;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 54ch;
    color: #EFE9FB;
}

.home-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    justify-content: center;
    margin-top: 1.75rem;
}

/* El selector repite `#cta .tb-panel` porque la regla de los párrafos del panel lleva un id y
   le gana a cualquier cosa con una sola clase. El `auto` va porque esa regla también le pone
   `max-width`: con margen lateral 0 la línea quedaba corrida a la izquierda del panel. */
body.tb-public #cta .tb-panel .home-cta__foot {
    margin: 1rem auto 0;
    font-size: 0.8125rem;
    color: #CFC5EF;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 991.98px) {
    .home-hero__grid {
        grid-template-columns: 1fr;
    }

    .home-diff__row {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* En una columna, el `order` de desktop dejaría la imagen arriba del texto. */
    .home-diff__row--flip .home-diff__text { order: 0; }
}

@media (max-width: 767.98px) {
    .home-hero {
        /* El CTA tiene que entrar sobre el fold: el hero se acorta y el chat baja. */
        padding: 6.5rem 0 0;
    }

    /* 31px, el valor mobile del prototipo.
       `body.tb-public` adelante NO es decorativo: la regla de arriba lleva el prefijo (para
       ganarle al `letter-spacing` del tema) y vale dos clases, así que esta, con una sola,
       perdía SIEMPRE y el título salía a 50px en el celular. El `max-width` en caracteres
       también se apaga: a 31px son 238px de los 366 disponibles y partía el título de más. */
    body.tb-public .home-hero__title {
        font-size: 1.9375rem;
        max-width: none;
    }

    .home-hero__sub {
        font-size: 1.02rem;
    }

    /* El separador entre la promesa y el rating es un flex item más: cuando la línea se parte
       en dos queda colgado al final de la primera, separando nada. En mobile no va. */
    .home-hero__dot {
        display: none;
    }

    /* `align-self` y no `display:block`: la columna del hero es un flex con
       `align-items:flex-start`, así que el botón se encoge a su contenido y `display:block` no
       lo estira. Con esto toma el ancho de la columna, que es lo que pide el prototipo mobile. */
    body.tb-public .home-hero__cta {
        align-self: stretch;
        text-align: center;
    }

    .home-hero__visual {
        padding: 0.5rem 0 0;
        align-items: stretch;
    }

    /* El chat derecho no puede quedar rotado a ancho completo: se le ven los bordes cortados. */
    .home-hero__chat {
        transform: none;
    }

    .home-band {
        grid-template-columns: 1fr;
        gap: 1.125rem;
    }

    /* En una columna el separador vertical no tiene sentido: pasa a ser una línea arriba. */
    .home-band__item + .home-band__item {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--tb-line);
        padding-top: 1.125rem;
    }

    body.tb-public .home-band__item strong {
        font-size: 1.625rem;
    }

    /* Los cuatro diferenciales pasan a ser tarjetas apiladas con su mini-visual adentro. */
    /* Acá son tarjetas, así que el borde de separación de desktop se apaga en TODAS —incluida la
       primera, que ahora también lo lleva—; si no, la tarjeta queda con una línea suelta arriba. */
    .home-diff__row {
        background: var(--tb-tint);
        border-radius: var(--tb-radius-card);
        padding: 1.75rem;
        margin-bottom: 1rem;
        border-top: 0;
    }

    .home-basics {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }


    .home-cta__actions .tb-btn {
        width: 100%;
        text-align: center;
    }
}