/* =====================================================
   PANEL360 — BARRA DE PRUEBA (HERO) + SECCION AUTOR
   Agregado para credibilidad B2B
===================================================== */


/* =====================================================
   BARRA DE PRUEBA DEBAJO DE LOS BOTONES DEL HERO
===================================================== */

.hero-proof{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

margin-top:55px;

max-width:660px;

}

.proof-item{

background:var(--surface);

border:1px solid var(--border);

border-radius:var(--radius-md);

padding:20px 16px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.proof-item:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-md);

}

.proof-item strong{

display:block;

font-size:30px;

font-weight:900;

line-height:1.1;

color:var(--primary);

margin-bottom:6px;

}

.proof-item span{

display:block;

font-size:13px;

font-weight:600;

line-height:1.35;

color:var(--text-soft);

}

.hero-note{

margin-top:18px;

font-size:13px;

color:var(--text-soft);

max-width:660px;

line-height:1.6;

}


/* =====================================================
   SECCION AUTOR
===================================================== */

.author-section{

padding:var(--section) 0;

background:var(--surface-2);

}

.author-grid{

display:grid;

grid-template-columns:0.85fr 1.15fr;

gap:80px;

align-items:center;

}


/* ---------- Foto ---------- */

.author-photo{

position:relative;

}

.author-photo img{

width:100%;

display:block;

border-radius:var(--radius-lg);

box-shadow:var(--shadow-lg);

}

.author-photo .photo-tag{

position:absolute;

left:26px;

bottom:26px;

background:rgba(9,17,30,.86);

backdrop-filter:blur(6px);

color:#fff;

padding:14px 22px;

border-radius:var(--radius-sm);

font-size:14px;

font-weight:700;

line-height:1.4;

}

.author-photo .photo-tag em{

display:block;

font-style:normal;

font-weight:500;

font-size:12.5px;

color:rgba(255,255,255,.72);

margin-top:3px;

}


/* ---------- Texto ---------- */

.author-content span.eyebrow{

font-weight:800;

letter-spacing:2px;

color:var(--primary);

font-size:14px;

}

.author-content h2{

font-size:46px;

line-height:1.15;

margin:20px 0 28px;

}

.author-content p{

font-size:19px;

color:var(--text-soft);

margin-bottom:22px;

}

.author-content p strong{

color:var(--text);

}


/* ---------- Doble credencial ---------- */

.author-creds{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin:36px 0;

}

.cred{

background:var(--surface);

border:1px solid var(--border);

border-left:4px solid var(--primary);

border-radius:var(--radius-sm);

padding:22px 24px;

}

.cred h4{

font-size:17px;

margin-bottom:6px;

}

.cred p{

font-size:14.5px;

margin:0;

line-height:1.55;

}


/* ---------- Cita ---------- */

.author-quote{

border-left:4px solid var(--primary);

padding:6px 0 6px 26px;

margin:36px 0;

font-size:20px;

font-style:italic;

line-height:1.6;

color:var(--text);

}


/* ---------- Barra de prueba dentro de la seccion autor ----------
   Mudada desde el hero el 04/08/2026. Hereda todo el CSS de
   .hero-proof; aca solo se corrige lo que cambia por estar en
   una columna mas angosta y sobre fondo --surface-2. */

.author-proof{

max-width:100%;

margin-top:0;

margin-bottom:8px;

}


/* ---------- Bloque de honestidad ---------- */

/* OJO: .author-content p strong pinta el texto oscuro.
   Acá hace falta más especificidad o el negrita queda
   negro sobre fondo negro (bug detectado 02/08/2026). */

.author-section .author-honesty{

background:var(--secondary);

color:#fff;

border-radius:var(--radius-md);

padding:38px 40px;

margin-top:44px;

box-shadow:var(--shadow-md);

}

.author-section .author-honesty h3{

font-size:26px;

color:#fff;

margin-bottom:16px;

line-height:1.25;

}

.author-section .author-honesty p{

color:rgba(255,255,255,.82);

font-size:17px;

margin-bottom:18px;

}

.author-section .author-honesty p:last-of-type{

margin-bottom:0;

}

.author-section .author-honesty p strong,
.author-section .author-honesty strong{

color:#ffffff;

font-weight:700;

}

.author-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-top:32px;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

.hero-proof{

grid-template-columns:repeat(2,1fr);

margin-left:auto;

margin-right:auto;

}

.hero-note{

margin-left:auto;

margin-right:auto;

text-align:center;

}

.author-grid{

grid-template-columns:1fr;

gap:50px;

}

.author-photo{

max-width:460px;

margin:auto;

}

}


@media(max-width:700px){

.hero-proof{

grid-template-columns:1fr;

gap:14px;

}

.author-content h2{

font-size:34px;

}

.author-creds{

grid-template-columns:1fr;

}

.author-section .author-honesty{

padding:30px 26px;

}

.author-buttons{

justify-content:center;

}

}