/*
 * TreeTone Music Online — Cierre de jornada v7 (2026-08-11)
 * Encabezados apilados en escritorio y animación común de conversión.
 */

/* Hero: controles más livianos y prueba social sin ornamento. */
.treetone-landing .hero-btns {
    gap: .75rem;
    margin-bottom: 1.55rem;
}

.treetone-landing .btn-primary,
.treetone-landing .btn-secondary {
    height: 3.1rem !important;
    padding-right: 1.55rem !important;
    padding-left: 1.55rem !important;
    font-size: .76rem !important;
    letter-spacing: .075em;
}

.treetone-landing .tt2-hero-proof {
    display: block;
    max-width: none;
    margin-top: .15rem;
    color: rgba(255, 255, 255, .68);
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .045em;
    text-align: center;
    text-transform: none;
}

.treetone-landing .tt2-hero-proof > span {
    display: none !important;
}

.treetone-landing .tt2-hero-proof-break {
    display: none;
}

/* Jerarquía editorial: títulos fuertes, pero con una escala más contenida. */
.treetone-landing .tt2-section-head h2,
.treetone-landing .tt2-method-intro h2,
.treetone-landing .tt2-faq-heading h2 {
    font-size: clamp(3rem, 4.7vw, 4.7rem);
    line-height: .94;
}

.treetone-landing .tt2-about-head .tt2-eyebrow {
    margin-bottom: 1.65rem;
}

.treetone-landing .tt2-method-intro {
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr);
}

.treetone-landing .tt2-method-intro h2 span {
    display: block;
}

/* Historia: cita discreta y orden adaptable sin duplicar contenido. */
.treetone-landing .tt2-founder-story {
    display: flex;
    flex-direction: column;
}

.treetone-landing .tt2-founder-bio {
    order: 1;
}

.treetone-landing .tt2-founder-bio p {
    margin: 0 0 1.4rem;
    color: var(--tt-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.treetone-landing .tt2-founder-story blockquote {
    order: 2;
    max-width: 47rem;
    margin: 1.35rem 0 0;
    padding: .2rem 0 .2rem 1.25rem;
    border-left-width: 2px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: clamp(1.12rem, 1.55vw, 1.34rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.58;
    letter-spacing: -.01em;
    text-transform: none;
}

/* Equipo: siete perfiles compactos en escritorio y cuatro por fila en móvil. */
.treetone-landing .tt2-team-heading h3 {
    font-size: clamp(2.55rem, 3.6vw, 3.55rem);
    line-height: .96;
}

.treetone-landing .tt2-team-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1.2rem .8rem;
}

.treetone-landing .tt2-teacher-photo {
    margin-bottom: .7rem;
}

.treetone-landing .tt2-teacher h4 {
    font-size: 1.02rem;
}

.treetone-landing .tt2-teacher p {
    font-size: .5rem;
    line-height: 1.45;
    letter-spacing: .065em;
}

.treetone-landing .tt2-teacher:last-child img {
    object-position: center 36%;
}

/* Testimonios: nombre y llamada comparten una línea; instrumento y ciudad, otra. */
.treetone-landing .tt2-testimonial-meta {
    display: block;
    min-height: 76px;
    padding-top: 1rem;
}

.treetone-landing .tt2-testimonial-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    align-items: baseline;
    gap: .75rem;
}

.treetone-landing .tt2-testimonial-top strong {
    grid-column: 1;
}

.treetone-landing .tt2-testimonial-top b {
    grid-column: 2;
    justify-self: end;
}

.treetone-landing .tt2-testimonial-meta strong {
    margin: 0;
    font-size: 1.42rem;
    line-height: 1;
}

.treetone-landing .tt2-testimonial-details {
    display: flex;
    min-width: 0;
    gap: .35rem;
    align-items: baseline;
    margin-top: .42rem;
    color: rgba(255, 255, 255, .48);
    font-size: .61rem;
    line-height: 1.4;
    text-align: left;
}

.treetone-landing .tt2-testimonial-meta small {
    display: block;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: .61rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.treetone-landing .tt2-testimonial-meta b {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    margin: 0;
    font-size: .63rem;
    line-height: 1.25;
    white-space: nowrap;
}

/* Íconos sociales: geometría simple y trazos consistentes. */
.treetone-landing .tt2-socials svg {
    width: 17px;
    height: 17px;
}

.treetone-landing .tt2-socials a[aria-label="Instagram"] svg {
    fill: none !important;
    stroke: currentColor;
}

.treetone-landing .tt2-socials a[aria-label="Facebook"] svg,
.treetone-landing .tt2-socials a[aria-label="YouTube"] svg {
    fill: currentColor;
}

/* Formulario: código nacional más contenido, pero aún legible. */
.treetone-landing .tt-popup-modal.tt2-lead-modal .phone-grid-container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap: .6rem;
}

.treetone-landing .tt-popup-modal.tt2-lead-modal input[type="tel"] {
    font-size: .72rem !important;
}

/* El encabezado de preguntas permanece en el flujo normal de la página. */
.treetone-landing .tt2-faq-heading {
    position: static;
    top: auto;
}

/* Llamada final: movimiento mínimo, con alternativa accesible más abajo. */
@keyframes tt2-cta-breathe {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 8px rgba(10, 10, 10, .08), 0 0 0 0 rgba(236, 167, 44, 0);
    }
    50% {
        transform: translateY(-3px) scale(1.012);
        box-shadow: 0 12px 26px rgba(10, 10, 10, .22), 0 0 0 3px rgba(236, 167, 44, .12);
    }
}

.treetone-landing .tt2-free-class-cta {
    animation: tt2-cta-breathe 2.4s ease-in-out infinite;
}

.treetone-landing .tt2-free-class-cta:disabled {
    animation: none;
}

.treetone-landing .tt2-prefooter-button span {
    transition: transform .2s ease;
}

.treetone-landing .tt2-prefooter-button:hover span {
    transform: translateX(3px);
}

@media (min-width: 1025px) {
    /* En escritorio, cada bajada continúa el eje vertical de su título. */
    .treetone-landing .tt2-instruments .tt2-section-head,
    .treetone-landing .tt2-testimonials .tt2-section-head,
    .treetone-landing .tt2-method-intro,
    .treetone-landing .tt2-team-heading {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 0;
        align-items: start;
    }

    .treetone-landing .tt2-instruments .tt2-section-head > div,
    .treetone-landing .tt2-testimonials .tt2-section-head > div,
    .treetone-landing .tt2-method-intro > div {
        display: block;
    }

    .treetone-landing .tt2-instruments .tt2-section-intro,
    .treetone-landing .tt2-testimonials .tt2-section-intro,
    .treetone-landing .tt2-method-copy,
    .treetone-landing .tt2-team-heading > p {
        grid-column: 1;
        grid-row: auto;
        align-self: start;
        max-width: 680px;
        margin-top: 1.35rem;
        margin-bottom: 0;
    }

    .treetone-landing .tt2-section-head h2 {
        white-space: nowrap;
    }

    .treetone-landing .tt2-method-intro h2 {
        font-size: clamp(3.15rem, 3.65vw, 3.7rem);
        letter-spacing: -.025em;
        white-space: nowrap;
    }

    .treetone-landing .tt2-about-head h2 {
        font-size: clamp(3.7rem, 4.55vw, 4.55rem);
    }

    .treetone-landing .tt2-founder {
        grid-template-columns: 330px minmax(0, 1fr);
        gap: 4rem;
    }

    .treetone-landing .tt2-founder-photo {
        max-width: 330px;
    }

    .treetone-landing .tt2-testimonials .tt2-section-head h2 {
        font-size: clamp(3.15rem, 3.75vw, 3.8rem);
    }

    .treetone-landing .tt2-team-heading h3 {
        white-space: nowrap;
    }

    .treetone-landing .tt2-faq-heading h2 {
        font-size: clamp(3rem, 3.8vw, 3.85rem);
    }

    .treetone-landing .tt2-prefooter h2 {
        font-size: clamp(2.65rem, 4.05vw, 4.1rem);
        line-height: .95;
    }

    .treetone-landing .tt2-prefooter-layout {
        align-items: center;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .treetone-landing .tt2-team-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.6rem .8rem;
    }

    .treetone-landing .tt2-method-intro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .treetone-landing .tt2-method-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .treetone-landing .tt2-section-head h2,
    .treetone-landing .tt2-method-intro h2,
    .treetone-landing .tt2-faq-heading h2 {
        font-size: clamp(2.35rem, 11vw, 3rem);
        line-height: .96;
    }

    .treetone-landing .tt2-method-intro h2 {
        font-size: clamp(2.25rem, 10.4vw, 2.85rem);
    }

    .treetone-landing .tt2-about-head .tt2-eyebrow {
        margin-bottom: 1.35rem;
    }

    .treetone-landing .tt2-team-heading h3 {
        font-size: clamp(2.15rem, 9.8vw, 2.7rem);
    }

    .treetone-landing .tt2-prefooter h2 {
        font-size: clamp(2.2rem, 10.5vw, 2.85rem);
        line-height: .96;
    }

    .treetone-landing .hero-btns {
        max-width: 258px;
        gap: .65rem;
        margin-bottom: 1.35rem;
    }

    .treetone-landing .btn-primary,
    .treetone-landing .btn-secondary {
        height: 2.9rem !important;
        padding-right: 1.25rem !important;
        padding-left: 1.25rem !important;
        font-size: .7rem !important;
    }

    .treetone-landing .tt2-hero-proof {
        max-width: 300px;
        font-size: .58rem;
        line-height: 1.55;
        text-align: center;
    }

    .treetone-landing .tt2-hero-proof-break {
        display: block;
    }

    .treetone-landing .tt2-founder-story blockquote {
        order: 1;
        margin: 0 0 1.35rem;
        padding-left: 1rem;
        font-size: 1.08rem;
        line-height: 1.52;
    }

    .treetone-landing .tt2-founder-bio {
        order: 2;
    }

    .treetone-landing .tt2-founder-bio p {
        font-size: .92rem;
        line-height: 1.7;
    }

    .treetone-landing .tt2-team-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem .45rem;
    }

    .treetone-landing .tt2-teacher-photo {
        margin-bottom: .48rem;
    }

    .treetone-landing .tt2-teacher h4 {
        font-size: .75rem;
        line-height: 1.1;
    }

    .treetone-landing .tt2-teacher p {
        margin-top: .22rem;
        font-size: .35rem;
        line-height: 1.35;
        letter-spacing: .025em;
    }

    .treetone-landing .tt2-testimonial-meta {
        min-height: 70px;
    }

    .treetone-landing .tt2-testimonial-top {
        gap: .45rem;
    }

    .treetone-landing .tt2-testimonial-meta strong {
        font-size: 1.2rem;
    }

    .treetone-landing .tt2-testimonial-meta small {
        font-size: .53rem;
    }

    .treetone-landing .tt2-testimonial-meta b {
        font-size: .56rem;
    }

    /* El formulario comienza antes: beneficios resumidos en una sola franja. */
    .treetone-landing .tt-popup-modal.tt2-lead-modal {
        margin-top: .25rem;
    }

    .treetone-landing .tt2-popup-intro {
        padding: 2.15rem 1.2rem 1.15rem;
    }

    .treetone-landing .tt2-popup-intro .tt2-eyebrow {
        margin-bottom: .65rem;
    }

    .treetone-landing .tt2-popup-intro h3 {
        margin-bottom: .85rem;
        font-size: clamp(1.95rem, 9vw, 2.25rem);
        line-height: .88;
        letter-spacing: -.04em;
        white-space: nowrap;
    }

    .treetone-landing .tt2-popup-intro h3 span {
        display: inline;
    }

    .treetone-landing .tt2-popup-intro .tt-description {
        padding: .7rem .75rem;
        font-size: .73rem;
        line-height: 1.5;
    }

    .treetone-landing .tt2-popup-benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: .85rem;
        border-bottom: 1px solid var(--tt-line-light);
    }

    .treetone-landing .tt2-popup-benefits li {
        display: flex;
        min-width: 0;
        min-height: 58px;
        padding: .55rem .35rem;
        flex-direction: column;
        gap: .3rem;
        border-right: 1px solid var(--tt-line-light);
        border-bottom: 0;
        font-size: .56rem;
        line-height: 1.35;
    }

    .treetone-landing .tt2-popup-benefits li:last-child {
        border-right: 0;
    }

    .treetone-landing .tt2-popup-benefits li span {
        font-size: .48rem;
    }

    .treetone-landing .tt2-popup-form-panel {
        padding: 1.5rem 1.15rem 1.65rem;
        align-items: flex-start;
    }

    .treetone-landing .tt-popup-form > h4 {
        font-size: 1.55rem;
    }

    .treetone-landing .tt-popup-modal.tt2-lead-modal .phone-grid-container {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
        gap: .5rem;
    }

    .treetone-landing .tt-popup-modal.tt2-lead-modal .country-select {
        font-size: .72rem !important;
    }
}

@media (max-width: 420px) {
    .treetone-landing .tt2-team-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .treetone-landing .tt-popup-modal.tt2-lead-modal .phone-grid-container {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    }

    .treetone-landing .tt-popup-modal.tt2-lead-modal input[type="tel"] {
        padding-right: .55rem;
        padding-left: .55rem;
        font-size: .68rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .treetone-landing .tt2-free-class-cta {
        animation: none;
    }
}