.blx-panel {
display: grid;
gap: var(--blx-esp-3);
align-items: center;
}
.blx-panel__figura {
margin: 0;
order: -1;
overflow: hidden;
border-radius: var(--blx-radio);
}
.blx-panel__img {
display: block;
width: 100%;
height: auto;
}
.blx-panel__rotulo {
margin: 0 0 var(--blx-esp-2);
font-family: var(--blx-fuente-display);
font-weight: var(--blx-peso-semibold);
letter-spacing: var(--blx-track-titulo);
color: var(--blx-marca-oscuro);
}
.blx-panel__parrafo {
margin: 0 0 var(--blx-esp-2);
}
.blx-panel__parrafo:last-child {
margin-bottom: 0;
}
.blx-panel--lado .blx-panel__parrafo:last-of-type:not(:only-of-type) {
font-weight: var(--blx-peso-semibold);
color: var(--blx-marca-oscuro);
}
.blx-panel--encaje-foto .blx-panel__img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.blx-panel--encaje-logo .blx-panel__figura {
display: flex;
align-items: center;
justify-content: center;
padding: var(--blx-esp-3);
}
.blx-panel--encaje-logo .blx-panel__img {
width: auto;
max-width: min(100%, 16rem);
height: auto;
object-fit: contain;
}
.blx-panel--fondo .blx-panel {
position: relative;
isolation: isolate;
display: block;
overflow: hidden;
border-radius: var(--blx-radio);
}
.blx-panel--fondo .blx-panel__figura {
position: absolute;
inset: 0;
margin: 0;
border-radius: 0;
}
.blx-panel--fondo .blx-panel__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blx-panel--fondo .blx-panel__cuerpo {
position: relative;
z-index: 1;
padding: var(--blx-esp-4) var(--blx-esp-3);
background: rgb(11 24 17 / 88%);
color: var(--blx-blanco);
}
.blx-panel--fondo .blx-panel__rotulo {
color: var(--blx-blanco);
}
.blx-panel--fondo .blx-panel__rotulo::after {
content: "";
display: block;
width: 2.5rem;
height: 3px;
margin-top: var(--blx-esp-2);
background: var(--blx-menta-linx);
border-radius: 2px;
}
.blx-panel__lista {
display: grid;
gap: var(--blx-esp-2);
margin: var(--blx-esp-3) 0 0;
padding: 0;
list-style: none;
}
.blx-panel__valor {
position: relative;
padding-left: 1.6rem;
line-height: var(--blx-alto-linea);
}
.blx-panel__valor::before {
content: "";
position: absolute;
top: 0.62em;
left: 0;
width: 0.5rem;
height: 0.5rem;
background: var(--blx-menta-linx);
border-radius: 50%;
}
.blx-panel__valor-detalle {
display: block;
opacity: 0.8;
font-size: 0.9375rem;
}
@media (min-width: 48rem) {
.blx-panel--lado .blx-panel {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--blx-esp-4);
}
.blx-panel--lado .blx-panel__figura {
order: 0;
}
.blx-panel--fondo .blx-panel__cuerpo {
width: min(100%, 38rem);
padding: var(--blx-esp-5) var(--blx-esp-4);
}
.blx-panel__lista {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--blx-esp-2) var(--blx-esp-3);
}
}
.blx-unidades {
display: grid;
gap: var(--blx-esp-3);
grid-template-columns: 1fr;
}
@media (min-width: 560px) {
.blx-unidades {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1000px) {
.blx-unidades {
grid-template-columns: repeat(4, 1fr);
}
.blx-unidad {
padding-inline: var(--blx-esp-2);
}
}
.blx-unidad {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--blx-esp-2);
padding: var(--blx-esp-4) var(--blx-esp-3);
background: var(--blx-blanco);
border: 1px solid var(--blx-divisor);
border-radius: var(--blx-radio);
color: inherit;
text-align: center;
text-decoration: none;
}
.blx-seccion--alt .blx-unidad {
background: var(--blx-blanco);
}
.blx-unidad__logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 4.5rem;
}
.blx-unidad__img {
max-width: min(100%, 11rem);
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.blx-unidad__titulo {
margin: 0;
font-size: 1.0625rem;
font-weight: var(--blx-peso-bold);
color: var(--blx-marca-oscuro);
}
.blx-unidad__texto {
margin: 0;
color: var(--blx-tinta-suave);
font-size: 0.9375rem;
line-height: var(--blx-alto-linea);
}
.blx-unidad__cta {
display: inline-flex;
align-items: center;
gap: var(--blx-esp-1);
margin-top: auto;
padding-top: var(--blx-esp-2);
font-family: var(--blx-fuente-display);
font-weight: var(--blx-peso-semibold);
font-size: 0.9375rem;
color: var(--blx-marca);
}
.blx-unidad__flecha {
display: inline-flex;
transition: transform 0.18s ease;
}
a.blx-unidad {
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.blx-unidad:hover,
a.blx-unidad:focus-visible {
border-color: var(--blx-marca);
box-shadow: 0 8px 24px rgb(11 24 17 / 10%);
transform: translateY(-3px);
}
a.blx-unidad:hover .blx-unidad__flecha,
a.blx-unidad:focus-visible .blx-unidad__flecha {
transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
a.blx-unidad,
.blx-unidad__flecha {
transition: none;
}
a.blx-unidad:hover,
a.blx-unidad:focus-visible {
transform: none;
}
a.blx-unidad:hover .blx-unidad__flecha,
a.blx-unidad:focus-visible .blx-unidad__flecha {
transform: none;
}
}
.blx-seccion--tiempo {
padding-block: var(--blx-esp-6);
background: var(--blx-negro-verde);
background: linear-gradient(168deg, #0B1811 0%, #0F5953 52%, #176061 100%);
}
.blx-seccion--tiempo .blx-seccion__cabecera {
margin-bottom: var(--blx-esp-5);
}
.blx-seccion--tiempo .blx-seccion__titulo {
color: var(--blx-blanco);
}
.blx-seccion--tiempo .blx-seccion__bajada {
color: rgb(255 255 255 / 78%);
}
.blx-tiempo {
position: relative;
display: grid;
gap: var(--blx-esp-5);
margin: 0;
padding: 0;
list-style: none;
}
.blx-tiempo::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0.5rem;
width: 2px;
background: linear-gradient(
to bottom,
transparent 0%,
rgb(47 199 181 / 55%) 6%,
rgb(47 199 181 / 55%) 94%,
transparent 100%
);
}
.blx-tiempo__hito {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--blx-esp-3);
align-items: start;
padding-left: 0;
}
.blx-tiempo__marca {
position: relative;
display: flex;
align-items: center;
min-height: 2.25rem;
padding-left: 2rem;
}
.blx-tiempo__marca::before {
content: "";
position: absolute;
left: 0.5rem;
width: 10px;
height: 10px;
background: var(--blx-menta-linx);
border-radius: 50%;
transform: translateX(-4px);
box-shadow: 0 0 0 5px #0d2b25;
}
.blx-tiempo__anio {
font-family: var(--blx-fuente-display);
font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
font-weight: var(--blx-peso-bold);
letter-spacing: var(--blx-track-display);
font-variant-numeric: tabular-nums;
color: var(--blx-menta-linx);
line-height: 1;
}
.blx-tiempo__tarjeta {
padding: var(--blx-esp-3);
background: var(--blx-blanco);
border-radius: var(--blx-radio);
box-shadow:
0 1px 2px rgb(11 24 17 / 24%),
0 12px 28px -8px rgb(11 24 17 / 38%);
}
.blx-tiempo__cabecera {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 1.4rem;
margin-bottom: var(--blx-esp-1);
}
.blx-tiempo__bandera {
display: inline-flex;
border: 1px solid var(--blx-divisor);
border-radius: 2px;
overflow: hidden;
line-height: 0;
}
.blx-tiempo__eyebrow {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blx-verde-linx);
}
.blx-tiempo__logo {
display: flex;
align-items: center;
height: 3rem;
margin-bottom: var(--blx-esp-2);
}
.blx-tiempo__logo-img {
width: auto;
max-width: 12rem;
max-height: 100%;
object-fit: contain;
object-position: left center;
}
.blx-tiempo__pin {
display: inline-flex;
align-items: center;
color: var(--blx-icono);
line-height: 0;
}
.blx-tiempo__titulo {
margin: 0 0 var(--blx-esp-1);
font-size: 1.125rem;
color: var(--blx-marca-oscuro);
}
.blx-tiempo__texto {
margin: 0;
color: var(--blx-tinta-suave);
line-height: var(--blx-alto-linea);
}
@media (min-width: 60rem) {
.blx-tiempo {
gap: var(--blx-esp-4);
}
.blx-tiempo::before {
left: 50%;
transform: translateX(-1px);
}
.blx-tiempo__hito {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
align-items: center;
}
.blx-tiempo__hito .blx-tiempo__marca {
justify-content: flex-end;
padding-right: var(--blx-esp-4);
padding-left: 0;
}
.blx-tiempo__hito .blx-tiempo__marca::before {
left: auto;
right: 0;
transform: translateX(50%);
}
.blx-tiempo__hito .blx-tiempo__tarjeta {
margin-left: var(--blx-esp-4);
padding: var(--blx-esp-4);
}
.blx-tiempo__hito:nth-child(even) .blx-tiempo__marca {
order: 2;
justify-content: flex-start;
padding-right: 0;
padding-left: var(--blx-esp-4);
}
.blx-tiempo__hito:nth-child(even) .blx-tiempo__marca::before {
right: auto;
left: 0;
transform: translateX(-50%);
}
.blx-tiempo__hito:nth-child(even) .blx-tiempo__tarjeta {
order: 1;
margin-right: var(--blx-esp-4);
margin-left: 0;
}
}
.blx-pagina--quienes .blx-alternada__numero {
display: none;
}
.blx-tiempo__tarjeta {
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.blx-tiempo__anio {
transition: transform 0.25s ease, color 0.25s ease;
}
.blx-tiempo__logo-img {
filter: grayscale(1);
opacity: 0.75;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.blx-tiempo__tarjeta {
position: relative;
overflow: hidden;
isolation: isolate;
}
.blx-tiempo__tarjeta::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
z-index: -1;
width: 3px;
background: var(--blx-gradiente-linx);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.35s ease;
}
.blx-tiempo__tarjeta::after {
content: "";
position: absolute;
inset-block: -50%;
inset-inline-start: -60%;
z-index: -1;
width: 45%;
background: linear-gradient(
100deg,
rgb(47 199 181 / 0%) 0%,
rgb(47 199 181 / 22%) 45%,
rgb(255 255 255 / 45%) 55%,
rgb(47 199 181 / 0%) 100%
);
transform: rotate(8deg);
opacity: 0;
pointer-events: none;
}
@media (hover: hover) {
.blx-tiempo__hito:hover .blx-tiempo__tarjeta {
transform: translateY(-4px);
border-color: var(--blx-marca);
box-shadow:
0 2px 4px rgb(11 24 17 / 18%),
0 18px 36px -14px rgb(11 24 17 / 34%);
}
.blx-tiempo__hito:hover .blx-tiempo__tarjeta::before {
transform: scaleY(1);
}
.blx-tiempo__hito:hover .blx-tiempo__tarjeta::after {
opacity: 1;
animation: blx-destello 0.75s ease-out;
}
.blx-tiempo__hito:hover .blx-tiempo__anio {
transform: scale(1.08);
color: var(--blx-menta-linx, #2fc7b5);
}
.blx-tiempo__hito:hover .blx-tiempo__logo-img {
filter: grayscale(0);
opacity: 1;
}
}
@keyframes blx-destello {
from { inset-inline-start: -60%; }
to   { inset-inline-start: 130%; }
}
@media (prefers-reduced-motion: reduce) {
.blx-tiempo__tarjeta,
.blx-tiempo__anio,
.blx-tiempo__logo-img {
transition: none;
}
.blx-tiempo__tarjeta::after {
display: none;
}
.blx-tiempo__tarjeta::before {
transition: none;
}
.blx-tiempo__hito:hover .blx-tiempo__tarjeta,
.blx-tiempo__hito:hover .blx-tiempo__anio {
transform: none;
}
.blx-tiempo__logo-img {
filter: none;
opacity: 1;
}
}
.blx-seccion--panel:not(.blx-panel--fondo) .blx-panel--encaje-foto .blx-panel__figura {
position: relative;
overflow: hidden;
border-radius: var(--blx-radio);
box-shadow:
0 2px 4px rgb(11 24 17 / 10%),
0 18px 40px -18px rgb(11 24 17 / 28%);
}
.blx-seccion--panel:not(.blx-panel--fondo) .blx-panel--encaje-foto .blx-panel__figura::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgb(23 96 97 / 26%) 0%,
rgb(11 24 17 / 10%) 55%,
transparent 100%
);
transition: opacity 0.5s ease;
pointer-events: none;
}
.blx-seccion--panel:not(.blx-panel--fondo) .blx-panel--encaje-foto .blx-panel__img {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.blx-seccion--panel:not(.blx-panel--fondo) .blx-panel--encaje-foto:hover .blx-panel__img {
transform: scale(1.04);
}
.blx-seccion--panel:not(.blx-panel--fondo) .blx-panel--encaje-foto:hover .blx-panel__figura::after {
opacity: 0.35;
}
}
@media (prefers-reduced-motion: reduce) {
.blx-seccion--panel:not(.blx-panel--fondo) .blx-panel--encaje-foto .blx-panel__img,
.blx-seccion--panel:not(.blx-panel--fondo) .blx-panel--encaje-foto .blx-panel__figura::after {
transition: none;
}
.blx-seccion--panel:not(.blx-panel--fondo) .blx-panel--encaje-foto:hover .blx-panel__img {
transform: none;
}
}