.caja-autor {
--lb-accent: #1763c6; --lb-accent-dark: #0d4a9c;
--lb-ink: #15181d;
--lb-muted: #5b6470;
--lb-line: #e6eaf0;
--lb-surface: #ffffff;
position: relative;
display: flex;
gap: 28px;
align-items: center;
margin: 56px 0 28px;
padding: 32px 34px 32px 38px;
background:
radial-gradient(120% 140% at 0% 0%, #eef5ff 0%, rgba(238,245,255,0) 55%),
var(--lb-surface);
border: 1px solid var(--lb-line);
border-radius: 20px;
box-shadow:
0 1px 2px rgba(21, 24, 29, 0.04),
0 18px 40px -24px rgba(21, 24, 29, 0.25);
overflow: hidden;
} .caja-autor::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(180deg, var(--lb-accent), var(--lb-accent-dark));
} .caja-autor__media {
position: relative;
flex: 0 0 auto;
width: 104px;
height: 104px;
}
.caja-autor__anillo {
position: absolute;
inset: -5px;
border-radius: 50%;
background: conic-gradient(from 200deg, var(--lb-accent), #5aa0f0, var(--lb-accent-dark), var(--lb-accent));
opacity: 0.95;
}
.caja-autor__foto-link {
position: absolute;
inset: 0;
display: block;
border-radius: 50%;
padding: 4px; background: var(--lb-surface);
box-sizing: border-box;
overflow: hidden; } .caja-autor .caja-autor__media .caja-autor__foto {
width: 100%;
height: 100%;
border-radius: 50% !important;
object-fit: cover;
object-position: center top; aspect-ratio: 1 / 1;
display: block;
max-width: none;
} .caja-autor__texto {
flex: 1 1 auto;
min-width: 0;
}
.caja-autor__eyebrow {
margin: 0 0 3px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--lb-accent);
}
.caja-autor__nombre {
margin: 0 0 8px;
font-size: 24px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -0.01em;
}
.caja-autor__nombre a {
color: var(--lb-ink);
text-decoration: none;
background-image: linear-gradient(var(--lb-accent), var(--lb-accent));
background-size: 0% 2px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s ease;
}
.caja-autor__nombre a:hover {
background-size: 100% 2px;
} .caja-autor__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 13px;
color: var(--lb-muted);
}
.caja-autor__badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
color: var(--lb-accent-dark);
background: #e3eefc;
}
.caja-autor__badge svg { color: var(--lb-accent); }
.caja-autor__bio {
margin: 0 0 18px;
font-size: 15.5px;
line-height: 1.65;
color: #3a4048;
max-width: 62ch;
} .caja-autor__pie {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 20px;
}
.caja-autor__redes {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.caja-autor__red {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--lb-muted);
background: #f4f2f6;
border: 1px solid var(--lb-line);
border-radius: 50%;
transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.caja-autor__red:hover {
transform: translateY(-3px);
color: #fff;
background: var(--lb-accent);
border-color: var(--lb-accent);
box-shadow: 0 8px 16px -6px rgba(23, 99, 198, 0.6);
} @media (max-width: 640px) {
.caja-autor {
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 22px;
gap: 18px;
}
.caja-autor__meta,
.caja-autor__redes,
.caja-autor__pie {
justify-content: center;
}
.caja-autor__bio { max-width: none; }
} .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
} .breadcrumbs {
font-size: 14px;
color: #6b7280;
margin: 0 0 18px;
line-height: 1.6;
}
.breadcrumbs a {
color: #6b7280;
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs__sep {
margin: 0 4px;
color: #b6bcc4;
}
.breadcrumbs__current {
color: #1d2125;
font-weight: 600;
} .tiempo-lectura {
display: inline-block;
font-size: 14px;
color: #6b7280;
}