/* =====================================================
   PANEL360 — ESCALA TIPOGRAFICA UNIFICADA
   Creado 03/08/2026

   PROBLEMA QUE RESUELVE:
   Los <h2> de la pagina estaban gobernados por CUATRO reglas
   distintas, con cuatro tamaños y cuatro interlineados:

     .section-title h2   52/36px   sin line-height -> heredaba 1.7 del body
     .author-content h2  46/34px   line-height 1.15
     .cta-center h2      72/54/40  line-height 1.05
     .demo-copy h2       46/38/30  line-height 1.15

   Ahora todos comparten el mismo tratamiento que el titular
   del hero: peso 900, interlineado apretado (1.06) y el mismo
   ajuste optico de letra.

   IMPORTANTE: este archivo TIENE QUE cargarse ULTIMO en
   header.php. Las reglas viejas siguen vivas en style.css,
   autor.css, cta.css y demo.css; esta hoja las pisa por orden
   de carga (misma especificidad, gana la ultima).
   Si algun dia se limpian esas reglas, este archivo pasa a ser
   la unica fuente de verdad de los titulos.
===================================================== */


/* =====================================================
   H1 — TITULAR DEL HERO
   Es la referencia visual de la que salen todos los demas.
===================================================== */

.hero-left h1{

font-size:clamp(42px, 5.4vw, 74px);

line-height:1.05;

font-weight:900;

letter-spacing:-1.5px;

}


/* =====================================================
   H2 — TODOS LOS TITULOS DE SECCION
   Mismo peso y mismo interlineado que el h1.
   Un escalon abajo en tamaño para que el hero siga mandando.
   Si los querés IDENTICOS al hero, subi el 58px a 74px.
===================================================== */

.section-title h2,
.author-content h2,
.cta-center h2,
.demo-copy h2{

font-size:clamp(34px, 4.6vw, 58px);

line-height:1.06;

font-weight:900;

letter-spacing:-1.2px;

text-wrap:balance;

}


/* ---------- Margenes propios de cada seccion ----------
   El tamaño se unifica; el aire de arriba y abajo no,
   porque cada seccion tiene su propia caja.
--------------------------------------------------------*/

.section-title h2{

margin:20px 0;

}

.author-content h2{

margin:20px 0 28px;

}

.cta-center h2{

margin-bottom:30px;

}

.demo-copy h2{

margin-bottom:26px;

}


/* ---------- Colores propios de cada seccion ----------
   El cierre y la demo van sobre fondo oscuro.
--------------------------------------------------------*/

.cta-center h2{

color:#14213d;

}

.demo-copy h2{

color:var(--surface);

}


/* =====================================================
   H3 — SUBTITULOS DE PESO
   (bajada del cierre y titulo de la solucion en Problema)
===================================================== */

.cta-center h3,
.solution h3{

line-height:1.15;

letter-spacing:-.6px;

}


/* =====================================================
   RESPONSIVE
   El clamp ya escala solo. Estas reglas existen unicamente
   para NEUTRALIZAR los font-size fijos que las hojas viejas
   declaran dentro de sus propios media queries.
===================================================== */

@media(max-width:1100px){

.section-title h2,
.author-content h2,
.cta-center h2,
.demo-copy h2{

font-size:clamp(34px, 5.2vw, 58px);

letter-spacing:-1px;

}

}


@media(max-width:700px){

.hero-left h1{

font-size:clamp(38px, 10vw, 52px);

letter-spacing:-1px;

}

.section-title h2,
.author-content h2,
.cta-center h2,
.demo-copy h2{

font-size:clamp(30px, 8.2vw, 44px);

letter-spacing:-.8px;

}

}


@media(max-width:600px){

.cta-center h2,
.demo-copy h2{

font-size:clamp(30px, 8.2vw, 44px);

}

}