.blx-globo-caja {
display: grid;
gap: var(--blx-esp-4);
}
.blx-globo {
position: relative;
order: 2;
aspect-ratio: 1 / 1;
max-width: 30rem;
width: 100%;
margin-inline: auto;
display: grid;
place-items: center;
}
.blx-globo__lienzo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease;
}
.blx-globo--listo .blx-globo__lienzo {
opacity: 1;
cursor: grab;
touch-action: pan-y;
}
.blx-globo__respaldo {
position: absolute;
inset: 0;
pointer-events: none;
}
.blx-globo__respaldo picture,
.blx-globo__respaldo-img {
display: block;
width: 100%;
height: 100%;
}
.blx-globo__aro {
width: 62%;
aspect-ratio: 1 / 1;
border: 1px solid var(--blx-divisor);
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgb(47 199 181 / 18%), 0 0 60px rgb(35 145 147 / 10%);
transition: opacity 0.4s ease;
}
.blx-globo--listo .blx-globo__aro {
opacity: 0;
}
.blx-globo-lista {
order: 1;
display: grid;
gap: var(--blx-esp-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.blx-oficina {
position: relative;
padding: var(--blx-esp-3);
background: var(--blx-blanco);
border: 1px solid var(--blx-divisor);
border-radius: var(--blx-radio);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.blx-oficina--principal {
border-color: var(--blx-marca);
}
.blx-oficina--activa {
border-color: var(--blx-marca);
box-shadow: 0 10px 26px rgb(23 96 97 / 14%);
}
.blx-oficina__insignia {
display: inline-block;
margin-block-end: var(--blx-esp-1);
padding: 0.15em 0.6em;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--blx-blanco);
background: var(--blx-marca);
border-radius: 999px;
}
.blx-oficina__insignia--apertura {
color: var(--blx-marca-oscuro);
background: transparent;
border: 1px solid var(--blx-divisor);
}
.blx-oficina__ciudad {
margin: 0 0 var(--blx-esp-1);
font-size: 1.05rem;
color: var(--blx-marca-oscuro);
}
.blx-oficina__dir {
margin: 0;
font-size: 0.9rem;
font-style: normal;
line-height: 1.45;
}
.blx-oficina__pais {
display: block;
margin-block-start: var(--blx-esp-1);
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--blx-tinta-suave);
}
.blx-globo__correo {
margin-block-start: var(--blx-esp-4);
text-align: center;
font-size: 1.05rem;
}
.blx-globo__correo a {
font-weight: 700;
color: var(--blx-marca-oscuro);
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 0.5em;
}
@media (min-width: 900px) {
.blx-globo-caja {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: var(--blx-esp-5);
align-items: center;
}
.blx-globo {
order: 1;
max-width: none;
}
.blx-globo-lista {
order: 2;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blx-oficina--principal {
grid-column: 1 / -1;
}
}
@media (prefers-reduced-motion: reduce) {
.blx-globo__lienzo,
.blx-globo__aro,
.blx-oficina {
transition: none;
}
}
.blx-globo__rotulos {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.blx-globo__rotulo {
position: absolute;
top: 0;
left: 0;
padding: 0.2em 0.55em;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
color: var(--blx-blanco);
background: rgb(11 24 17 / 72%);
border: 1px solid rgb(47 199 181 / 30%);
border-radius: 999px;
opacity: 0;
transition: opacity 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.blx-globo__rotulo--principal {
font-size: 0.78rem;
border-color: rgb(47 199 181 / 55%);
}
.blx-globo__rotulo.is-activo {
background: var(--blx-marca);
border-color: var(--blx-blanco);
}
.blx-globo__rotulo--continente {
padding: 0;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgb(255 255 255 / 62%);
background: none;
border: 0;
text-shadow:
0 0 3px rgb(11 24 17 / 95%),
0 0 8px rgb(11 24 17 / 80%);
transition: none;
}
.blx-oficina__hora {
display: flex;
align-items: center;
gap: 0.4em;
margin-block-start: var(--blx-esp-2);
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
color: var(--blx-tinta-suave);
}
.blx-oficina__hora time {
font-weight: 700;
color: var(--blx-marca-oscuro);
}
.blx-oficina__punto {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--blx-menta-linx, #2fc7b5);
animation: blx-latir 2.4s ease-in-out infinite;
}
@keyframes blx-latir {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.82); }
}
.blx-oficina {
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.blx-globo__rotulo {
transition: none;
}
.blx-oficina__punto {
animation: none;
}
}
.blx-pagina--contacto .blx-hero-interna__figura {
mix-blend-mode: multiply;
}
.blx-pagina--contacto .blx-hero-interna__figura::after {
background: linear-gradient(to top, rgb(11 24 17 / 45%), transparent 55%);
}
.blx-pagina--contacto .blx-hero-interna {
isolation: isolate;
}