@font-face {
font-family: "Archivo";
src: url("../fuentes/archivo-latin.woff2") format("woff2");
font-weight: 400 700;
font-stretch: 62% 125%;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo";
src: url("../fuentes/archivo-latin-ext.woff2") format("woff2");
font-weight: 400 700;
font-stretch: 62% 125%;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--fondo:        #FFFFFF;
--superficie:   #F4F9FD;
--superficie-2: #EAF3FA;
--superficie-3: #DDEAF4;
--borde:        #D5E3EE;
--borde-suave:  #E8EFF6;
--titulo:       #04141F;
--texto:        #16303F;
--texto-2:      #4A6072;
--texto-3:      #506374;
--azul:       #00A8EC;
--azul-claro: #56C6F7;
--azul-osc:   #0077AB;
--azul-texto: #006C99;
--azul-hondo: #005880;
--marino:     #052B42;
--marino-2:   #073E5F;
--ambar:      #F0A32A;
--facebook:  #1877F2;
--instagram: #E1306C;
--radio:    14px;
--radio-sm: 10px;
--radio-xs: 7px;
--ancho:    1280px;
--gutter:   clamp(16px, 4vw, 22px);
--fuente: "Archivo", "Segoe UI", Roboto, system-ui, sans-serif;
--ancho-display: 87%;
--t-1:  clamp(2rem, 4.8vw, 3.1rem);
--t-2:  clamp(1.6rem, 3.5vw, 2.3rem);
--t-3:  clamp(1.15rem, 2.2vw, 1.35rem);
--t-4:  1.0625rem;
--t-cuerpo: 1.0625rem;
--t-menor:  .9375rem;
--t-min:    .8125rem;
--t-xs:     .75rem;
--medida:   68ch;
--sombra:    0 18px 40px rgba(5, 43, 66, .13);
--sombra-sm: 0 2px 10px rgba(5, 43, 66, .07);
--tap: 44px;
--dur-rapida: .16s;
--dur-media:  .28s;
--dur-lenta:  .6s;
--curva: cubic-bezier(.2, .7, .3, 1);
}
.tema-oscuro,
.hero--interno {
--fondo:        #052B42;
--superficie:   rgba(255, 255, 255, .07);
--superficie-2: rgba(255, 255, 255, .11);
--superficie-3: rgba(255, 255, 255, .15);
--borde:        rgba(255, 255, 255, .17);
--borde-suave:  rgba(255, 255, 255, .1);
--titulo:       #FFFFFF;
--texto:        #E6F2FA;
--texto-2:      #B2CEE2;
--texto-3:      #8FB0C7;
--azul-osc:     #6FD0F8;
--azul-texto:   #6FD0F8;
--sombra:       0 18px 40px rgba(0, 0, 0, .35);
color: var(--texto);
}
.tema-claro {
--fondo:        #FFFFFF;
--superficie:   #F4F9FD;
--superficie-2: #EAF3FA;
--superficie-3: #DDEAF4;
--borde:        #D5E3EE;
--borde-suave:  #E8EFF6;
--titulo:       #04141F;
--texto:        #16303F;
--texto-2:      #4A6072;
--texto-3:      #506374;
--azul-osc:     #0077AB;
--azul-texto:   #006C99;
color: var(--texto);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
scroll-padding-top: 130px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--fondo);
color: var(--texto);
font-family: var(--fuente);
font-size: var(--t-cuerpo);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
font-variant-numeric: tabular-nums;
}
p { max-width: var(--medida); margin: 0 0 1em; overflow-wrap: break-word; text-wrap: pretty; }
small { font-size: var(--t-min); line-height: 1.45; }
img { max-width: 100%; height: auto; display: block; }
svg:not(.lienzo) {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
svg[data-relleno] { fill: currentColor; stroke: none; }
a { color: var(--azul-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--azul-texto);
outline-offset: 2px;
border-radius: 4px;
}
h1, h2, h3, h4 {
margin: 0 0 .6em;
font-stretch: var(--ancho-display);
font-weight: 700;
color: var(--titulo);
text-wrap: balance;
overflow-wrap: break-word;
}
h1 { font-size: var(--t-1); letter-spacing: -.022em; line-height: 1.04; }
h2 { font-size: var(--t-2); letter-spacing: -.018em; line-height: 1.08; }
h3 { font-size: var(--t-3); letter-spacing: -.01em;  line-height: 1.22; }
h4 { font-size: var(--t-4); letter-spacing: -.005em; line-height: 1.3; }
::selection { background: var(--azul-osc); color: #fff; }
:root { accent-color: var(--azul-texto); }
input, textarea, select { caret-color: var(--azul-texto); }
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }
.saltar {
position: absolute;
left: -999px;
top: 0;
z-index: 200;
background: var(--azul-osc);
color: #fff;
padding: 10px 18px;
border-radius: 0 0 8px 0;
font-weight: 700;
}
.saltar:focus { left: 0; text-decoration: none; }
.contenedor {
width: 100%;
max-width: var(--ancho);
margin: 0 auto;
padding: 0 var(--gutter);
}
.seccion { padding: clamp(46px, 8vw, 84px) 0; }
.seccion--compacta { padding: clamp(28px, 4.4vw, 46px) 0; }
.seccion--ficha { padding-top: clamp(22px, 4vw, 34px); }
.seccion--panel { background: var(--superficie); border-block: 1px solid var(--borde-suave); }
.encabezado-seccion { margin-bottom: clamp(22px, 4vw, 34px); }
.encabezado-seccion p { color: var(--texto-2); margin: 0; max-width: 70ch; }
.encabezado-seccion--centro { text-align: center; margin-inline: auto; max-width: 760px; }
.rotulo-tira {
margin: 0 0 6px;
font-size: var(--t-min);
font-weight: 600;
color: var(--texto-3);
}
#marcas { padding-block: clamp(22px, 3vw, 32px) clamp(6px, 1.2vw, 12px); }
.fila-titulo {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px 16px;
flex-wrap: wrap;
margin-bottom: clamp(18px, 3vw, 26px);
}
.fila-titulo h2 { margin: 0; }
.enlace-mas {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: var(--t-menor);
font-weight: 700;
white-space: nowrap;
color: var(--azul-texto);
}
.enlace-mas:hover { text-decoration: none; }
.enlace-mas svg { width: 15px; height: 15px; stroke-width: 2; transition: transform var(--dur-rapida) var(--curva); }
.enlace-mas:hover svg { transform: translateX(4px); }
.titulo-bloque { font-size: clamp(1.15rem, 3vw, 1.3rem); }
.barra-superior {
background: var(--marino);
border-bottom: 1px solid rgba(255, 255, 255, .08);
font-size: var(--t-min);
color: var(--texto-3);
}
.barra-superior .contenedor {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 18px;
min-height: 38px;
}
.barra-superior a { color: var(--texto-2); }
.barra-superior a:hover { color: var(--titulo); text-decoration: none; }
.barra-ciudades { display: inline-flex; align-items: center; gap: 6px; }
.barra-ciudades svg { width: 14px; height: 14px; stroke: var(--azul); fill: none; stroke-width: 1.8; }
.barra-superior .redes-enlaces { margin-left: auto; }
.redes-enlaces { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.redes-enlaces a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 38px;
height: 38px;
border-radius: var(--radio-sm);
background: var(--superficie-2);
border: 1px solid var(--borde);
color: var(--texto-2);
transition: color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva);
}
.redes-enlaces a:hover { color: var(--titulo); border-color: var(--azul); text-decoration: none; }
.redes-enlaces svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.redes-enlaces--mini a { width: 30px; height: 30px; border-radius: var(--radio-xs); background: none; border-color: transparent; }
.redes-enlaces--mini svg { width: 15px; height: 15px; }
.redes-enlaces--texto a { width: auto; min-height: var(--tap); padding: 0 16px; font-weight: 600; font-size: var(--t-menor); }
.cabecera {
position: sticky;
top: 0;
z-index: 60;
background: rgba(255, 255, 255, .9);
-webkit-backdrop-filter: saturate(150%) blur(12px);
backdrop-filter: saturate(150%) blur(12px);
border-bottom: 1px solid var(--borde);
}
.cabecera-principal {
display: flex;
align-items: center;
gap: clamp(10px, 2vw, 22px);
min-height: 66px;
}
.logo { flex: 0 0 auto; }
.logo img { height: clamp(20px, 4.25vw, 25.5px); width: auto; }
.logo:hover { text-decoration: none; }
.buscador { flex: 1 1 auto; max-width: 520px; position: relative; }
.buscador input {
width: 100%;
background: var(--superficie-2);
border: 1px solid var(--borde);
border-radius: 999px;
color: var(--texto);
font: inherit;
font-size: 16px;
padding: 11px 18px 11px 44px;
min-height: var(--tap);
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador input:focus {
outline: none;
border-color: var(--azul);
box-shadow: 0 0 0 3px rgba(0, 168, 236, .18);
}
.buscador > svg {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
stroke: var(--texto-3);
fill: none;
stroke-width: 2;
pointer-events: none;
}
.buscador-resultados {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--superficie-2);
border: 1px solid var(--borde);
border-radius: var(--radio-sm);
box-shadow: var(--sombra);
padding: 6px;
max-height: 60vh;
overflow-y: auto;
display: none;
z-index: 70;
}
.buscador-resultados.abierto { display: block; }
.buscador-resultados a {
display: flex;
gap: 12px;
align-items: center;
padding: 10px;
border-radius: var(--radio-sm);
color: var(--texto);
min-height: var(--tap);
}
.buscador-resultados a:hover { background: var(--superficie-3); text-decoration: none; }
.buscador-resultados img {
width: 36px; height: 36px; flex: 0 0 auto;
object-fit: contain; background: #fff; border-radius: var(--radio-xs); padding: 3px;
}
.buscador-resultados .r-nombre { font-weight: 600; font-size: var(--t-menor); }
.buscador-resultados .r-marca { font-size: var(--t-xs); color: var(--texto-3); }
.buscador-vacio { padding: 14px; color: var(--texto-3); font-size: var(--t-menor); margin: 0; }
.acciones-cabecera { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-categorias { border-top: 1px solid var(--borde-suave); }
.nav-lista {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
min-height: 46px;
overflow-x: auto;
scrollbar-width: none;
}
.nav-lista::-webkit-scrollbar { display: none; }
.nav-lista a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 13px;
border-radius: var(--radio-sm);
color: var(--texto-2);
font-weight: 600;
font-size: var(--t-menor);
white-space: nowrap;
}
.nav-lista a:hover { background: var(--superficie-2); color: var(--azul-texto); text-decoration: none; }
.nav-lista a.activo { color: var(--azul-texto); background: rgba(0, 168, 236, .12); }
.nav-lista svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.nav-boton {
display: none;
background: var(--superficie-2);
border: 1px solid var(--borde);
border-radius: var(--radio-sm);
width: var(--tap);
height: var(--tap);
cursor: pointer;
padding: 0;
}
.nav-boton span {
display: block;
width: 18px;
height: 2px;
background: var(--texto);
margin: 4px auto;
border-radius: 2px;
}
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 20px;
min-height: var(--tap);
border-radius: 10px;
font-weight: 700;
font-size: var(--t-menor);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.boton:hover { text-decoration: none; }
@media (hover: hover) {
.boton:hover { transform: translateY(-1px); }
}
.boton:active { transform: scale(.97); transition-duration: 80ms; }
.boton svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex: 0 0 auto; }
.boton--marca {
background: var(--azul-osc);
color: #fff;
box-shadow: 0 6px 18px rgba(0, 119, 171, .26);
}
.boton--marca:hover { background: var(--azul-hondo); color: #fff; }
.boton--linea { border-color: var(--borde); color: var(--texto); background: var(--fondo); }
.boton--linea:hover { border-color: var(--azul); color: var(--azul-texto); }
.tema-oscuro .boton--marca,
.hero--interno .boton--marca { background: #fff; color: var(--marino); box-shadow: none; }
.tema-oscuro .boton--marca:hover,
.hero--interno .boton--marca:hover { background: #D8ECF8; color: var(--marino); }
.tema-oscuro .boton--linea { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); color: #fff; }
.tema-oscuro .boton--linea:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.tema-claro .boton--marca { background: var(--azul-osc); color: #fff; }
.tema-claro .boton--marca:hover { background: var(--azul-hondo); color: #fff; }
.tema-claro .boton--linea { background: var(--fondo); border-color: var(--borde); color: var(--texto); }
.boton--bloque { width: 100%; }
.boton--sm { padding: 8px 14px; font-size: var(--t-min); min-height: 38px; }
.boton--lg { padding: 14px 26px; font-size: var(--t-cuerpo); min-height: 52px; border-radius: 12px; }
.boton--cristal {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .24);
color: #fff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.boton--cristal:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.portada {
position: relative;
isolation: isolate;
overflow: hidden;
border-bottom: 1px solid var(--borde);
background: var(--marino);
padding-block: clamp(44px, 8vw, 96px) clamp(0px, 2vw, 18px);
min-height: min(86vh, 760px);
display: flex;
flex-direction: column;
justify-content: center;
}
.portada-fondo { position: absolute; inset: 0; z-index: -2; }
.portada-fondo > picture { display: contents; }
.portada-fondo > img, .portada-fondo > picture > img,
.portada-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
display: block;
filter: brightness(.62) saturate(.9);
transform: scale(1.04);
animation: portada-acerca 26s ease-in-out infinite alternate;
}
@keyframes portada-acerca {
from { transform: scale(1.04); }
to   { transform: scale(1.12); }
}
.portada-video { filter: none; transform: none; animation: none; }
.portada-velo {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(4, 26, 40, .5) 0%, rgba(4, 26, 40, 0) 22%, rgba(4, 26, 40, 0) 60%, rgba(4, 26, 40, .92) 100%),
linear-gradient(95deg, rgba(4, 26, 40, .9) 6%, rgba(4, 26, 40, .66) 36%, rgba(4, 26, 40, .12) 62%, rgba(4, 26, 40, 0) 82%);
}
@media (max-width: 1240px) {
.portada-velo {
background:
linear-gradient(180deg, rgba(4, 26, 40, .5) 0%, rgba(4, 26, 40, 0) 22%, rgba(4, 26, 40, 0) 60%, rgba(4, 26, 40, .92) 100%),
linear-gradient(95deg, rgba(4, 26, 40, .9) 6%, rgba(4, 26, 40, .76) 40%, rgba(4, 26, 40, .68) 56%, rgba(4, 26, 40, .15) 76%, rgba(4, 26, 40, 0) 92%);
}
}
@media (max-width: 1080px) {
.portada-velo {
background:
linear-gradient(180deg, rgba(4, 26, 40, .45) 0%, rgba(4, 26, 40, 0) 26%, rgba(4, 26, 40, 0) 60%, rgba(4, 26, 40, .92) 100%),
linear-gradient(90deg, rgba(4, 26, 40, .9) 0, rgba(4, 26, 40, .76) 700px, rgba(4, 26, 40, .3) 100%);
}
}
.portada-rejilla {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 54px 54px;
-webkit-mask-image: radial-gradient(130% 95% at 22% 12%, #000 18%, transparent 72%);
mask-image: radial-gradient(130% 95% at 22% 12%, #000 18%, transparent 72%);
}
.portada::after,
.cta::after,
.pie::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 160px;
opacity: .1;
mix-blend-mode: overlay;
}
.portada-cuerpo {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
align-items: center;
gap: clamp(28px, 4vw, 64px);
}
.red-equipos {
position: relative;
aspect-ratio: 1;
width: 100%;
max-width: 520px;
justify-self: end;
}
.red-equipos::before {
content: "";
position: absolute;
inset: 8%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(0, 168, 236, .2), rgba(0, 168, 236, 0));
}
.red-equipos-trazos {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.red-equipos .red-enlace {
stroke: rgba(86, 198, 247, .42);
stroke-width: 1.5px;
vector-effect: non-scaling-stroke;
fill: none;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: red-traza .9s cubic-bezier(.25, .46, .45, .94) forwards;
animation-delay: calc(var(--i, 0) * 60ms);
}
.red-equipos .red-pulso {
stroke: rgba(255, 255, 255, .8);
stroke-width: 2.4px;
vector-effect: non-scaling-stroke;
stroke-linecap: round;
fill: none;
stroke-dasharray: .12 1;
stroke-dashoffset: 1;
animation: red-pulso 3.2s linear infinite;
animation-delay: calc(1.6s + var(--i, 0) * 1.1s);
}
.red-equipos .red-punto {
fill: #56C6F7;
opacity: 0;
transform: scale(0);
transform-box: fill-box;
transform-origin: center;
animation: red-nodo .62s var(--curva) forwards;
animation-delay: calc(500ms + var(--i, 0) * 60ms);
}
.red-estacion {
position: absolute;
left: calc(var(--x) - var(--d) / 2);
top: calc(var(--y) - var(--d) / 2);
width: var(--d);
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F1F7FC 52%, #D9E8F3 100%);
box-shadow:
0 0 0 6px rgba(86, 198, 247, .14),
0 26px 50px -18px rgba(1, 12, 22, .75);
opacity: 0;
animation: estacion-entra var(--dur-lenta) var(--curva) forwards;
animation-delay: calc(260ms + var(--i, 0) * 110ms);
}
.red-estacion--mayor {
box-shadow:
0 0 0 6px rgba(86, 198, 247, .16),
0 0 0 13px rgba(86, 198, 247, .08),
0 30px 60px -18px rgba(1, 12, 22, .8);
}
.red-estacion img {
width: 70%;
height: 70%;
min-height: 0;
object-fit: contain;
mix-blend-mode: multiply;
}
@keyframes red-traza { to { stroke-dashoffset: 0; } }
@keyframes red-nodo { to { opacity: .7; transform: scale(1); } }
@keyframes red-pulso { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -.12; } }
@keyframes estacion-entra {
from { opacity: 0; transform: scale(.88); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.red-equipos .red-enlace { animation: none; stroke-dashoffset: 0; }
.red-equipos .red-punto { animation: none; opacity: .7; transform: none; }
.red-equipos .red-pulso { display: none; }
.red-estacion { animation: none; opacity: 1; }
}
@media (max-width: 1080px) {
.portada-cuerpo { grid-template-columns: minmax(0, 1fr); }
.red-equipos { display: none; }
}
.portada-contenido { position: relative; z-index: 1; max-width: 640px; }
.portada-contenido > * { animation: portada-entra .7s cubic-bezier(.2, .7, .3, 1) both; }
.portada-contenido > :nth-child(2) { animation-delay: .07s; }
.portada-contenido > :nth-child(3) { animation-delay: .14s; }
.portada-contenido > :nth-child(4) { animation-delay: .21s; }
.portada-contenido > :nth-child(5) { animation-delay: .28s; }
@keyframes portada-entra {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: none; }
}
.portada h1 {
font-size: clamp(2rem, 5.8vw, 3.35rem);
margin-bottom: .45em;
text-shadow: 0 2px 34px rgba(0, 0, 0, .55);
}
.portada h1 span { color: var(--azul-texto); }
.portada-contenido > p {
color: #D2E7F5;
font-size: clamp(1rem, 2.3vw, 1.12rem);
max-width: 58ch;
margin-bottom: 26px;
}
.portada .hero-acciones { margin-top: 0; }
.portada-sedes {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 24px;
padding: 9px 16px 9px 13px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(13, 15, 19, .55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--texto-2);
font-size: var(--t-menor);
transition: border-color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.portada-sedes strong { color: #fff; font-weight: 700; }
.portada-sedes:hover { text-decoration: none; border-color: var(--azul); transform: translateY(-1px); }
.portada-sedes svg { width: 16px; height: 16px; stroke: var(--azul-texto); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.portada-sedes svg:last-child { stroke: var(--texto-3); width: 14px; height: 14px; }
.disciplinas {
list-style: none;
margin: 26px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 clamp(14px, 2.2vw, 22px);
font-size: var(--t-menor);
font-weight: 600;
color: #CDE7F7;
}
.disciplinas li { position: relative; padding: 5px 0; }
.disciplinas li + li::before {
content: "";
position: absolute;
left: calc(clamp(14px, 2.2vw, 22px) / -2);
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--azul);
transform: translate(-50%, -50%);
}
.promesa {
position: relative;
z-index: 1;
list-style: none;
margin: clamp(30px, 5.5vw, 56px) 0 0;
padding: clamp(22px, 3vw, 30px) 0 0;
border-top: 1px solid rgba(255, 255, 255, .22);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 3vw, 44px);
}
.promesa li + li { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: clamp(20px, 3vw, 44px); }
.promesa strong {
display: block;
font-stretch: var(--ancho-display);
font-size: clamp(1.05rem, 1.9vw, 1.28rem);
font-weight: 700;
letter-spacing: -.012em;
color: #fff;
margin-bottom: 7px;
}
.promesa span { display: block; font-size: var(--t-menor); line-height: 1.5; color: #B6D4E8; }
.portada-video-boton {
position: absolute;
z-index: 2;
right: var(--gutter);
top: clamp(16px, 3vw, 28px);
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 40px;
padding: 8px 16px 8px 13px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .2);
background: rgba(13, 15, 19, .6);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #fff;
font: inherit;
font-size: var(--t-min);
font-weight: 700;
cursor: pointer;
}
.portada-video-boton:hover { border-color: #fff; }
.portada-video-icono {
width: 11px;
height: 13px;
border-left: 3.5px solid currentColor;
border-right: 3.5px solid currentColor;
}
.portada-video-boton.esta-pausado .portada-video-icono {
width: 0;
height: 0;
border: 7px solid transparent;
border-left: 11px solid currentColor;
border-right: 0;
}
@media (prefers-reduced-motion: reduce) {
.portada-fondo > img, .portada-fondo > picture > img, .portada-video { animation: none; transform: none; }
.portada-contenido > * { animation: none; }
}
.revelar-listo .revelar {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--dur-lenta) var(--curva), transform var(--dur-lenta) var(--curva);
}
.revelar-listo .revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.revelar-listo .revelar { opacity: 1; transform: none; transition: none; }
}
.hero {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--borde);
background:
radial-gradient(900px 420px at 78% 12%, rgba(0, 168, 236, .16), transparent 62%),
radial-gradient(700px 380px at 12% 92%, rgba(0, 119, 171, .1), transparent 60%),
var(--superficie);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(5, 43, 66, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(5, 43, 66, .045) 1px, transparent 1px);
background-size: 52px 52px;
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
pointer-events: none;
}
.hero .contenedor {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(28px, 5vw, 46px);
align-items: center;
padding-block: clamp(38px, 7vw, 68px);
}
.hero h1 span { color: var(--azul-texto); }
.hero-texto p { color: var(--texto-2); font-size: clamp(.98rem, 2.4vw, 1.05rem); max-width: 54ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
:root {
--red-racimo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 280' fill='none'%3E%3Cpath d='M90 60L210 30L330 90L460 40L580 110M210 30L250 190M330 90L250 190M330 90L400 220M250 190L400 220L530 240M580 110L530 240M250 190L150 250M90 60L250 190' stroke='%2356C6F7' stroke-opacity='.38' stroke-width='1.4'/%3E%3Cg fill='%2356C6F7' fill-opacity='.75'%3E%3Ccircle cx='90' cy='60' r='4'/%3E%3Ccircle cx='210' cy='30' r='5'/%3E%3Ccircle cx='460' cy='40' r='4'/%3E%3Ccircle cx='580' cy='110' r='5'/%3E%3Ccircle cx='250' cy='190' r='5'/%3E%3Ccircle cx='400' cy='220' r='4'/%3E%3Ccircle cx='150' cy='250' r='3.5'/%3E%3C/g%3E%3Cg stroke='%2356C6F7' stroke-width='1.6'%3E%3Ccircle cx='330' cy='90' r='22' stroke-opacity='.6'/%3E%3Ccircle cx='330' cy='90' r='34' stroke-opacity='.2'/%3E%3Ccircle cx='530' cy='240' r='15' stroke-opacity='.5'/%3E%3C/g%3E%3Ccircle cx='330' cy='90' r='7' fill='%2356C6F7'/%3E%3Ccircle cx='530' cy='240' r='5' fill='%2356C6F7'/%3E%3C/svg%3E");
}
.hero--interno {
border-bottom: 0;
background:
radial-gradient(640px 300px at 82% 18%, rgba(0, 168, 236, .26), transparent 64%),
linear-gradient(135deg, var(--marino) 0%, var(--marino-2) 100%);
}
.hero--interno::after {
background-image:
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}
.hero--interno::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: max(0px, calc((100% - var(--ancho)) / 2));
width: min(52%, 640px);
background: var(--red-racimo) right center / contain no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
mask-image: linear-gradient(90deg, transparent, #000 38%);
pointer-events: none;
}
.hero--interno .contenedor {
grid-template-columns: 1fr;
padding-block: clamp(34px, 5.5vw, 56px);
}
.hero--interno h1 { margin-bottom: .35em; }
.hero--interno p { margin-bottom: 0; }
@media (max-width: 760px) {
.hero--interno::before { display: none; }
}
.miga { font-size: var(--t-min); color: var(--texto-3); margin-bottom: 12px; }
.miga a { color: var(--texto-2); }
.miga span { margin: 0 6px; opacity: .5; }
.slider-logos {
position: relative;
overflow: hidden;
padding: 18px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.slider-pista {
display: flex;
width: max-content;
gap: 0;
animation: desliza calc(var(--piezas, 7) * 4.9s) linear infinite;
}
.slider-logos:hover .slider-pista { animation-play-state: paused; }
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.slider-pista { animation: none; }
.slider-logos { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.logo-tarjeta {
flex: 0 0 auto;
width: clamp(160px, 42vw, 210px);
height: clamp(64px, 16vw, 76px);
display: grid;
place-items: center;
padding: 10px 22px;
border-inline-end: 1px solid var(--borde);
}
.logo-tarjeta img { width: 100%; max-width: 150px; height: auto; }
.logo-marca {
font-weight: 700;
font-stretch: var(--ancho-display);
font-size: clamp(1rem, 2.4vw, 1.18rem);
letter-spacing: -.01em;
color: var(--titulo);
text-align: center;
line-height: 1.2;
}
.logo-marca small {
display: block;
font-size: var(--t-xs);
font-stretch: normal;
letter-spacing: 0;
color: var(--texto-3);
font-weight: 600;
margin-top: 4px;
}
.rejilla { display: grid; gap: clamp(12px, 2.2vw, 18px); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tarjeta {
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: clamp(16px, 3vw, 22px);
color: var(--texto);
transition: border-color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.tarjeta:hover { border-color: var(--azul); box-shadow: var(--sombra-sm); transform: translateY(-2px); text-decoration: none; }
.tarjeta h3 { margin-bottom: .4em; }
.tarjeta p { color: var(--texto-2); font-size: var(--t-menor); margin: 0; }
.icono {
width: 42px;
height: 42px;
flex: 0 0 auto;
border-radius: 10px;
background: rgba(0, 168, 236, .12);
color: var(--azul-texto);
display: grid;
place-items: center;
margin-bottom: 14px;
}
.icono svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.servicio-texto p { color: var(--texto-2); font-size: clamp(.96rem, 2.3vw, 1.02rem); }
.servicio-texto p:first-child {
color: var(--texto);
font-size: clamp(1.02rem, 2.6vw, 1.12rem);
}
.servicio-lateral {
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: clamp(20px, 3.4vw, 28px);
position: sticky;
top: 132px;
}
.servicio-lateral .titulo-bloque { margin-bottom: 14px; }
.servicio-lateral .chips { margin: 16px 0 18px; }
.lista-incluye { list-style: none; margin: 0; padding: 0; }
.lista-incluye li {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 9px 0;
border-bottom: 1px solid var(--borde-suave);
font-size: var(--t-menor);
color: var(--texto-2);
}
.lista-incluye li:last-child { border-bottom: 0; }
.lista-incluye svg { width: 14px; height: 14px; margin-top: 4px; stroke: var(--azul); stroke-width: 2.2; }
@media (max-width: 680px) {
.rejilla.rejilla--servicios { grid-template-columns: minmax(0, 1fr); }
}
.servicio-enlace { display: flex; flex-direction: column; color: var(--texto); }
.servicio-enlace:hover { text-decoration: none; }
.servicio-enlace p { flex: 1 1 auto; }
.continuidad {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(22px, 4vw, 44px);
align-items: center;
background:
radial-gradient(520px 280px at 92% 8%, rgba(0, 168, 236, .14), transparent 62%),
var(--fondo);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: clamp(22px, 4vw, 40px);
}
.continuidad h2 { margin-bottom: .35em; }
.continuidad-texto > p { color: var(--texto-2); max-width: 54ch; }
.continuidad-nota {
font-size: var(--t-menor);
color: var(--texto-3);
border-left: 1px solid var(--borde);
padding-left: 14px;
margin-bottom: 22px;
}
.continuidad-lista {
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: clamp(18px, 3vw, 26px);
}
.continuidad-lista .titulo-bloque { margin-bottom: 12px; }
@media (max-width: 900px) {
.continuidad { grid-template-columns: minmax(0, 1fr); }
}
.evidencia-obra {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
align-items: center;
gap: clamp(22px, 4vw, 56px);
margin: 0 0 clamp(34px, 5vw, 60px);
}
.evidencia-obra--vertical {
grid-template-columns: minmax(0, 340px) minmax(0, 440px);
justify-content: center;
}
.evidencia-obra-vista {
position: relative;
display: block;
border-radius: var(--radio);
overflow: hidden;
background: #03141F;
box-shadow: 0 0 0 1px var(--borde);
}
.evidencia-obra-vista:hover { text-decoration: none; }
.evidencia-obra-vista img { display: block; width: 100%; height: auto; }
.evidencia-reproducir {
position: absolute;
left: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--tap);
padding: 0 16px 0 12px;
border-radius: 999px;
background: rgba(3, 20, 31, .8);
color: #fff;
font-size: var(--t-min);
font-weight: 700;
line-height: 1;
pointer-events: none;
transition: background var(--dur-rapida) var(--curva);
}
.evidencia-reproducir svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.evidencia-duracion {
padding-left: 9px;
border-left: 1px solid rgba(255, 255, 255, .3);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, .8);
}
.evidencia-obra-vista:hover .evidencia-reproducir,
.evidencia-obra-vista:focus-visible .evidencia-reproducir { background: var(--azul-osc); }
.evidencia-obra-texto h3 {
margin: 0 0 12px;
font-size: var(--t-3);
line-height: 1.25;
color: var(--titulo);
text-wrap: balance;
}
.evidencia-obra-texto p { margin: 0 0 14px; color: var(--texto-2); max-width: 44ch; }
.evidencia-obra-texto p:last-child { margin-bottom: 0; }
.evidencia-muro {
--alto-fila: 300px;
display: flex;
flex-wrap: wrap;
gap: clamp(20px, 2.4vw, 30px) clamp(14px, 1.8vw, 22px);
}
.evidencia-muro::after { content: ""; flex: 7 1 0; }
@media (min-width: 1080px) {
.evidencia-muro--fila { max-width: var(--ancho-fila); margin-inline: auto; }
.evidencia-muro--fila::after { content: none; }
}
.evidencia-foto {
flex: var(--r) 1 calc(var(--r) * var(--alto-fila));
min-width: 0;
margin: 0;
}
.evidencia-foto img {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--r);
border-radius: var(--radio-sm);
background: var(--superficie-2);
box-shadow: 0 0 0 1px var(--borde-suave);
}
@media (hover: hover) {
.evidencia-vista:hover img { box-shadow: 0 0 0 1px var(--azul); }
}
.evidencia-pie {
padding: 11px 2px 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.evidencia-pie strong { color: var(--titulo); font-size: var(--t-menor); font-weight: 600; line-height: 1.35; }
.evidencia-nota { font-size: var(--t-min); color: var(--texto-3); line-height: 1.4; }
.evidencia-nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.evidencia-nota a:hover { color: var(--azul-texto); }
@media (max-width: 1079px) {
.evidencia-muro { --alto-fila: 230px; }
}
@media (max-width: 760px) {
.evidencia-obra,
.evidencia-obra--vertical { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.evidencia-obra--vertical .evidencia-obra-vista { width: min(100%, 340px); margin-inline: auto; }
.evidencia-obra--vertical .evidencia-obra-texto { text-align: center; }
.evidencia-obra--vertical .evidencia-obra-texto p { margin-inline: auto; }
}
@media (max-width: 599px) {
.evidencia-muro { --alto-fila: 160px; }
.evidencia-muro::after { content: none; }
.evidencia-reproducir { left: 10px; bottom: 10px; }
}
.evidencia-datos {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: var(--t-min);
color: var(--texto-3);
}
.evidencia-lugar { display: inline-flex; align-items: center; gap: 5px; }
.evidencia-lugar svg { width: 13px; height: 13px; stroke: var(--azul); }
.evidencia-pendiente {
max-width: 620px;
margin-inline: auto;
text-align: center;
background: var(--fondo);
border: 1px dashed var(--borde);
border-radius: var(--radio);
padding: clamp(26px, 4.4vw, 40px) clamp(20px, 4vw, 34px);
}
.evidencia-pendiente .icono { margin-inline: auto; }
.evidencia-pendiente p { color: var(--texto-2); margin: 0 auto 20px; max-width: 46ch; }
.evidencia-acciones {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.evidencia-acciones .boton svg { fill: currentColor; stroke: none; }
@media (max-width: 900px) {
.servicio-lateral { position: static; }
}
.catalogo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(18px, 3vw, 26px); align-items: start; }
.panel-filtros {
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: 20px;
position: sticky;
top: 128px;
}
.filtro-lista { list-style: none; margin: 0; padding: 0; }
.filtro-lista li { margin-bottom: 2px; }
.filtro {
width: 100%;
text-align: left;
background: none;
border: 1px solid transparent;
color: var(--texto-2);
font: inherit;
font-size: var(--t-menor);
padding: 9px 10px;
min-height: 40px;
border-radius: var(--radio-sm);
cursor: pointer;
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
}
.filtro:hover:not(:disabled) { background: var(--superficie-2); color: var(--azul-texto); }
.filtro:disabled { color: var(--texto-3); opacity: .55; cursor: default; }
.filtro.activo { background: rgba(0, 168, 236, .12); color: var(--azul-texto); font-weight: 700; }
.filtro .n { font-size: var(--t-xs); color: var(--texto-3); }
.filtro.activo .n { color: var(--azul-texto); }
.barra-resultados {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px 14px;
flex-wrap: wrap;
margin-bottom: 18px;
color: var(--texto-3);
font-size: var(--t-min);
}
.barra-resultados a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding-inline: 8px;
margin-inline: -8px;
border-radius: var(--radio-xs);
}
.barra-resultados a:hover { background: var(--superficie-2); text-decoration: none; }
.grupo-categoria { margin-bottom: clamp(30px, 5vw, 44px); }
.grupo-categoria:last-of-type { margin-bottom: 0; }
.grupo-cabecera {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 12px;
margin-bottom: 18px;
border-bottom: 1px solid var(--borde);
}
.grupo-cabecera .icono { margin-bottom: 0; }
.grupo-titulo { min-width: 0; }
.grupo-cabecera h2 { margin: 0; font-size: clamp(1.4rem, 2.7vw, 1.74rem); line-height: 1.1; }
.grupo-cabecera p { margin: 0; color: var(--texto-3); font-size: var(--t-min); }
.grupo-cabecera .cuenta {
margin-left: auto;
flex: 0 0 auto;
font-size: var(--t-xs);
font-weight: 700;
color: var(--texto-3);
background: var(--superficie-2);
border: 1px solid var(--borde);
border-radius: 999px;
padding: 3px 10px;
}
.producto {
position: relative;
display: flex;
flex-direction: column;
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
color: var(--texto);
transition: border-color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.producto::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
box-shadow: var(--sombra);
opacity: 0;
transition: opacity var(--dur-media) var(--curva);
pointer-events: none;
}
.producto:hover { text-decoration: none; }
@media (hover: hover) {
.producto:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--azul) 40%, var(--borde));
}
.producto:hover::after { opacity: 1; }
.producto:hover .producto-figura img { transform: scale(1.04); }
}
.producto:active { transform: scale(.985); transition-duration: 80ms; }
.producto-figura {
position: relative;
overflow: hidden;
border-radius: calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
background: var(--superficie);
aspect-ratio: 4 / 3;
min-height: 0;
display: grid;
place-items: center;
padding: 14px;
}
.producto-figura img,
.tecnologia-figura img,
.galeria-vista img,
.miniatura img {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain;
}
.producto-figura img {
mix-blend-mode: multiply;
transition: transform var(--dur-media) var(--curva);
}
.producto-cuerpo { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.producto-origen {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 2px 10px;
margin: 0;
}
.producto-marca {
font-size: var(--t-min);
font-weight: 600;
color: var(--azul-texto);
}
.producto-cat {
font-size: var(--t-xs);
font-weight: 600;
color: var(--texto-3);
}
.producto h3 { margin: 0; font-size: clamp(.94rem, 2.6vw, 1rem); }
.producto-resumen {
font-size: var(--t-min);
color: var(--texto-2);
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 12px; }
.tecnologia { display: flex; flex-direction: column; padding-top: 0; overflow: hidden; }
.tecnologia-figura {
margin: 0 calc(clamp(16px, 3vw, 22px) * -1) clamp(14px, 2.4vw, 18px);
background: var(--superficie);
border-bottom: 1px solid var(--borde);
aspect-ratio: 16 / 10;
min-height: 0;
display: grid;
place-items: center;
overflow: hidden;
}
.tecnologia-figura img { padding: 10px; }
.tarjeta > .icono {
width: auto;
height: auto;
background: none;
border-radius: 0;
justify-items: start;
}
.tarjeta > .icono svg { width: 24px; height: 24px; }
.tecnologia h3 { font-size: var(--t-cuerpo); }
.tecnologia p { flex: 1 1 auto; }
.tecnologia-donde {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 14px 0 0;
padding-top: 12px;
border-top: 1px solid var(--borde-suave);
font-size: var(--t-min);
font-weight: 600;
color: var(--azul-texto);
flex: 0 0 auto;
}
.tecnologia-donde svg { width: 14px; height: 14px; stroke-width: 2; margin-top: 3px; }
.etiqueta {
font-size: var(--t-xs);
font-weight: 600;
background: var(--superficie-3);
border: 1px solid var(--borde);
color: var(--texto-2);
border-radius: 999px;
padding: 3px 9px;
}
.etiqueta--linea {
background: rgba(0, 168, 236, .1);
border-color: rgba(0, 168, 236, .34);
color: var(--azul-texto);
font-weight: 700;
}
.producto-pie {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--borde-suave);
font-size: var(--t-min);
font-weight: 700;
color: var(--azul-texto);
}
.producto-pie svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.sin-resultados {
border: 1px dashed var(--borde);
border-radius: var(--radio);
padding: 46px 20px;
text-align: center;
color: var(--texto-3);
}
.aviso { font-size: var(--t-min); color: var(--texto-3); margin: 24px 0 0; }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 40px); align-items: start; }
.galeria-marco {
position: relative;
background: radial-gradient(72% 62% at 50% 40%, #FFFFFF 0%, var(--superficie) 62%, var(--superficie-2) 100%);
border: 1px solid var(--borde-suave);
border-radius: var(--radio);
aspect-ratio: 1 / 1;
min-height: 0;
overflow: hidden;
}
.galeria-vista {
display: grid;
place-items: center;
width: 100%;
height: 100%;
min-height: 0;
padding: clamp(18px, 4vw, 30px);
cursor: zoom-in;
}
.galeria-vista:hover { text-decoration: none; }
.galeria-lupa {
position: absolute;
left: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px 6px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, .9);
border: 1px solid var(--borde);
color: var(--texto-2);
font-size: var(--t-xs);
font-weight: 700;
line-height: 1;
pointer-events: none;
transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}
.galeria-lupa svg { width: 15px; height: 15px; }
.galeria-vista:hover .galeria-lupa,
.galeria-vista:focus-visible .galeria-lupa,
.evidencia-vista:hover .galeria-lupa,
.evidencia-vista:focus-visible .galeria-lupa {
background: var(--azul-osc);
border-color: var(--azul-osc);
color: #fff;
}
.galeria-paso {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--tap);
height: var(--tap);
display: grid;
place-items: center;
border-radius: 999px;
border: 1px solid var(--borde);
background: rgba(255, 255, 255, .94);
color: var(--texto);
cursor: pointer;
box-shadow: var(--sombra-sm);
transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}
.galeria-paso svg { width: 19px; height: 19px; stroke-width: 2.1; }
.galeria-paso:hover { background: var(--azul-osc); border-color: var(--azul-osc); color: #fff; }
.galeria-paso--antes { left: 10px; }
.galeria-paso--antes svg { transform: rotate(180deg); }
.galeria-paso--sig { right: 10px; }
.galeria-cuenta {
position: absolute;
right: 12px;
bottom: 12px;
margin: 0;
padding: 5px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, .9);
border: 1px solid var(--borde);
color: var(--texto-2);
font-size: var(--t-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.galeria-cuenta strong { color: var(--titulo); }
.galeria-miniaturas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
gap: 8px;
margin-top: 10px;
}
.galeria-vista img,
.miniatura img { mix-blend-mode: multiply; }
.miniatura {
background: var(--superficie);
border: 1px solid var(--borde-suave);
border-radius: var(--radio-sm);
aspect-ratio: 1 / 1;
padding: 6px;
cursor: pointer;
display: grid;
place-items: center;
transition: border-color var(--dur-rapida) var(--curva);
}
.miniatura:hover { border-color: var(--azul-texto); }
.miniatura.activa { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(0, 168, 236, .3); }
.evidencia-vista {
position: relative;
display: block;
cursor: zoom-in;
}
.evidencia-vista:hover { text-decoration: none; }
.visor {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
border: 0;
background: rgba(3, 20, 31, .93);
overflow: hidden;
color: #fff;
}
.visor::backdrop { background: rgba(3, 20, 31, .93); }
.visor-caja {
margin: 0;
height: 100%;
display: grid;
grid-template-rows: auto auto;
align-content: center;
justify-items: center;
gap: 14px;
padding: clamp(14px, 4vw, 30px) clamp(14px, 9vw, 96px) clamp(18px, 3vw, 26px);
}
.visor-img {
max-width: 100%;
max-height: calc(100vh - 150px);
max-height: calc(100dvh - 150px);
min-width: 0;
min-height: 0;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radio-sm);
background: #fff;
}
.visor-video {
display: block;
max-width: 100%;
max-height: calc(100vh - 150px);
max-height: calc(100dvh - 150px);
width: auto;
height: auto;
border-radius: var(--radio-sm);
background: #000;
}
.visor-pie {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 6px 14px;
text-align: center;
}
.visor-titulo { font-size: var(--t-menor); font-weight: 700; }
.visor-cuenta {
font-size: var(--t-xs);
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, .72);
}
.visor-cerrar,
.visor-paso {
position: absolute;
display: grid;
place-items: center;
width: var(--tap);
height: var(--tap);
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .26);
background: rgba(255, 255, 255, .1);
color: #fff;
cursor: pointer;
transition: background var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}
.visor-cerrar:hover,
.visor-paso:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }
.visor-cerrar { top: clamp(12px, 3vw, 22px); right: clamp(12px, 3vw, 22px); }
.visor-cerrar svg { width: 20px; height: 20px; }
.visor-paso { top: 50%; transform: translateY(-50%); }
.visor-paso svg { width: 21px; height: 21px; stroke-width: 2.1; }
.visor-paso--antes { left: clamp(8px, 2.5vw, 22px); }
.visor-paso--antes svg { transform: rotate(180deg); }
.visor-paso--sig { right: clamp(8px, 2.5vw, 22px); }
.visor--sola .visor-paso { display: none; }
.visor--sola .visor-caja { padding-inline: clamp(14px, 4vw, 30px); }
@media (max-width: 620px) {
.visor-caja { padding: 58px 10px 80px; }
.visor-img,
.visor-video { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
.visor-paso { top: auto; bottom: 16px; transform: none; }
.visor-paso--antes { left: 16px; }
.visor-paso--sig { right: 16px; }
.visor-pie { padding-inline: 62px; }
.visor--sola .visor-caja { padding-bottom: 26px; }
}
.ficha-marca {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--t-min);
font-weight: 600;
color: var(--azul-texto);
margin-bottom: 10px;
}
.ficha h1 { font-size: clamp(1.5rem, 5vw, 2.3rem); margin-bottom: .3em; }
.ficha-resumen { font-size: clamp(.98rem, 2.6vw, 1.05rem); color: var(--texto-2); max-width: 72ch; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.ficha-aplicaciones { margin-top: 22px; }
.ficha-aplicaciones :is(h2, h3) { font-size: var(--t-menor); }
.tabla-ficha { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: var(--t-menor); }
.tabla-ficha th, .tabla-ficha td {
text-align: left;
padding: 11px 0;
border-bottom: 1px solid var(--borde-suave);
vertical-align: top;
}
.tabla-ficha th { color: var(--texto-3); font-weight: 600; width: 42%; }
.tabla-ficha td { color: var(--texto); }
.lista-check { list-style: none; margin: 0; padding: 0; }
.lista-check li {
position: relative;
padding-left: 26px;
margin-bottom: 9px;
color: var(--texto-2);
font-size: var(--t-menor);
}
.lista-check li::before {
content: "";
position: absolute;
left: 0;
top: .5em;
width: 13px;
height: 7px;
border-left: 2px solid var(--azul);
border-bottom: 2px solid var(--azul);
transform: rotate(-45deg);
}
.lista-datos { list-style: none; margin: 0; padding: 0; }
.lista-datos li {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 9px 0;
color: var(--texto-2);
font-size: var(--t-menor);
border-bottom: 1px solid var(--borde-suave);
}
.lista-datos li:last-child { border-bottom: 0; }
.lista-datos svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; stroke: var(--azul); fill: none; stroke-width: 1.8; }
.lista-datos--dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
font-size: var(--t-min);
background: var(--superficie-2);
border: 1px solid var(--borde);
color: var(--texto-2);
border-radius: 999px;
padding: 5px 12px;
}
.bloque {
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: clamp(18px, 3.5vw, 24px);
}
.bloque h3 { font-size: var(--t-cuerpo); margin-bottom: 14px; }
.columna-lateral { display: grid; gap: 18px; align-content: start; }
.contacto-directo {
position: relative;
isolation: isolate;
overflow: hidden;
border: 0;
background:
radial-gradient(420px 260px at 100% 0%, rgba(0, 168, 236, .3), transparent 66%),
linear-gradient(150deg, var(--marino) 0%, var(--marino-2) 100%);
box-shadow: var(--sombra);
}
.contacto-directo::before {
content: "";
position: absolute;
top: -10px;
right: -40px;
width: 78%;
height: 46%;
z-index: -1;
background: var(--red-racimo) right top / contain no-repeat;
opacity: .55;
-webkit-mask-image: linear-gradient(200deg, #000 30%, transparent 85%);
mask-image: linear-gradient(200deg, #000 30%, transparent 85%);
pointer-events: none;
}
.contacto-vias { list-style: none; margin: 4px 0 18px; padding: 0; }
.contacto-vias li + li { border-top: 1px solid var(--borde-suave); }
.contacto-vias a {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 0;
color: var(--titulo);
text-decoration: none;
}
.contacto-via-icono {
flex: 0 0 auto;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: var(--radio-sm);
background: rgba(86, 198, 247, .14);
box-shadow: inset 0 0 0 1px rgba(86, 198, 247, .28);
transition: background var(--dur-rapida) var(--curva);
}
.contacto-via-icono svg { width: 20px; height: 20px; stroke: var(--azul-claro); fill: none; stroke-width: 1.8; }
.contacto-via-texto { min-width: 0; display: grid; gap: 1px; }
.contacto-via-texto small { font-size: var(--t-xs); font-weight: 600; color: var(--texto-3); }
.contacto-via-texto strong {
font-stretch: var(--ancho-display);
font-size: clamp(1.2rem, 2.6vw, 1.4rem);
font-weight: 700;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.contacto-vias li:last-child .contacto-via-texto strong { font-size: var(--t-cuerpo); }
@media (hover: hover) {
.contacto-vias a:hover .contacto-via-icono { background: rgba(86, 198, 247, .26); }
.contacto-vias a:hover strong { color: var(--azul-claro); }
}
.contacto-sucursales { list-style: none; margin: 0; padding: 0; }
.contacto-sucursales li + li { border-top: 1px solid var(--borde-suave); }
.contacto-sucursales a {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 0;
color: var(--texto);
text-decoration: none;
}
.contacto-sucursales svg { width: 18px; height: 18px; stroke: var(--azul); fill: none; stroke-width: 1.8; }
.contacto-sucursales svg:last-child {
stroke: var(--texto-3);
width: 15px;
height: 15px;
transition: transform var(--dur-rapida) var(--curva);
}
.contacto-sucursales strong { display: block; color: var(--titulo); font-size: var(--t-menor); }
.contacto-sucursales small { display: block; color: var(--texto-3); font-size: var(--t-min); }
@media (hover: hover) {
.contacto-sucursales a:hover svg:last-child { transform: translateX(3px); stroke: var(--azul-texto); }
}
.caso-tarjeta {
position: relative;
display: flex;
flex-direction: column;
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
color: var(--texto);
transition: border-color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.caso-tarjeta::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
box-shadow: var(--sombra);
opacity: 0;
transition: opacity var(--dur-media) var(--curva);
pointer-events: none;
}
.caso-tarjeta:hover { text-decoration: none; }
@media (hover: hover) {
.caso-tarjeta:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--azul) 40%, var(--borde));
}
.caso-tarjeta:hover::after { opacity: 1; }
.caso-tarjeta:hover .caso-portada img { transform: scale(1.04); }
}
.caso-tarjeta:active { transform: scale(.985); transition-duration: 80ms; }
.caso-portada {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
}
.caso-portada img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-media) var(--curva); }
.caso-portada > picture, .caso-hero > picture { display: contents; }
.caso-cuerpo { padding: 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.caso-lugar { font-size: var(--t-min); color: var(--texto-3); font-weight: 600; }
.caso-tarjeta h3 { margin: 0; font-size: clamp(1.02rem, 3vw, 1.15rem); }
.caso-tarjeta p { margin: 0; font-size: var(--t-menor); color: var(--texto-2); }
.caso-propiedades {
font-size: var(--t-xs);
font-weight: 700;
color: color-mix(in srgb, var(--ambar) 55%, var(--titulo));
}
.caso-hero {
border-radius: var(--radio);
overflow: hidden;
border: 1px solid var(--borde);
margin-bottom: clamp(20px, 3vw, 28px);
aspect-ratio: 16 / 9;
max-height: 460px;
background: var(--superficie-2);
}
.caso-hero img {
width: 100%;
height: 100%;
min-height: 0;
display: block;
object-fit: cover;
}
.caso-encabezado { max-width: var(--medida); }
.caso-encabezado h1 { margin: 0 0 10px; }
.caso-encabezado-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0 0 10px;
}
.caso-encabezado-meta:empty { display: none; }
.expansion {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(24px, 4vw, 44px);
align-items: center;
background:
radial-gradient(520px 280px at 92% 8%, rgba(0, 168, 236, .14), transparent 62%),
var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: clamp(22px, 4vw, 40px);
}
.expansion h2 { margin-bottom: .4em; }
.expansion p { color: var(--texto-2); max-width: 58ch; }
.expansion .lista-datos { margin: 18px 0; }
.expansion-mapa {
background: var(--marino);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: clamp(14px, 2.6vw, 24px);
}
@keyframes pulso {
0%   { box-shadow: 0 0 0 0 currentColor; }
70%  { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.mapa-svg { display: block; width: 100%; }
.mapa-cielo { fill: #03172A; }
.mapa-cielo-trama { opacity: 1; }
.mapa-lienzo::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(70% 60% at 24% 10%, rgba(255, 255, 255, .13), transparent 62%),
radial-gradient(60% 55% at 92% 100%, rgba(0, 0, 0, .28), transparent 70%);
mix-blend-mode: overlay;
z-index: 0;
}
.mapa-encimera,
.mapa-aviso,
.mapa-globo { z-index: 1; }
.mapa-estado {
fill: #21415A;
stroke: #4C7295;
stroke-width: .9;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
transition: fill var(--dur-rapida) var(--curva), stroke var(--dur-rapida) var(--curva);
}
.mapa-estado:hover { fill: #2B506C; stroke: var(--azul-claro); }
.mapa-estado--cubierto { fill: url(#mx-cubierto); stroke: #4CC3EE; }
.mapa-estado--cubierto:hover { stroke: #B8E6FA; }
.mapa-tierra {
filter:
drop-shadow(0 0 1.2px rgba(127, 203, 238, .55))
drop-shadow(0 4px 0 #0A2A42)
drop-shadow(0 3px 0 #061B2C)
drop-shadow(0 10px 12px rgba(0, 0, 0, .5));
}
.mapa-reticula line {
stroke: #7FCBEE;
stroke-opacity: .09;
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.mapa-reticula text {
fill: #7FCBEE;
fill-opacity: .45;
font-family: var(--fuente);
font-size: 6.5px;
font-weight: 600;
transition: opacity var(--dur-media) var(--curva);
}
.mapa-geo text {
font-family: var(--fuente);
font-size: 8.5px;
fill: #A8DCF5;
letter-spacing: .03em;
pointer-events: none;
transition: opacity var(--dur-media) var(--curva);
}
.mapa-geo-agua { font-style: italic; fill-opacity: .5; }
.mapa-geo-pais { font-weight: 600; fill-opacity: .3; }
.mapa-sucursales--elegida .mapa-geo text,
.mapa-sucursales--elegida .mapa-reticula text { opacity: 0; }
.mapa-arco {
fill: none;
stroke: var(--ambar);
stroke-width: 1.6;
stroke-linecap: round;
stroke-dasharray: 3 11;
opacity: .72;
vector-effect: non-scaling-stroke;
animation: mapa-corre 22s linear infinite;
}
@keyframes mapa-corre { to { stroke-dashoffset: -280; } }
.mapa-arco-halo {
fill: none;
stroke: var(--ambar);
stroke-width: 9;
stroke-opacity: .12;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.mapa-arco-luz { pointer-events: none; }
.mapa-arco-luz-halo { fill: var(--ambar); fill-opacity: .28; }
.mapa-arco-luz-nucleo { fill: #FFE7B5; }
.mapa-pin-cobertura {
fill: none;
stroke: #56C6F7;
stroke-opacity: .3;
stroke-width: 1;
stroke-dasharray: 2 6;
vector-effect: non-scaling-stroke;
pointer-events: none;
}
.mapa-pin-cobertura--cerca { stroke-opacity: .42; }
.mapa-pin--sucursal .mapa-pin-cobertura { stroke: var(--ambar); }
.mapa-pin-alcance { fill: url(#mx-alcance-matriz); pointer-events: none; }
.mapa-pin--sucursal .mapa-pin-alcance { fill: url(#mx-alcance-sucursal); }
.mapa-pin-barrido { pointer-events: none; }
.mapa-pin-barrido path { fill: url(#mx-haz-matriz); }
.mapa-pin-barrido line {
stroke: #8FD8F8;
stroke-opacity: .65;
stroke-width: 1.2;
vector-effect: non-scaling-stroke;
}
.mapa-pin--sucursal .mapa-pin-barrido path { fill: url(#mx-haz-sucursal); }
.mapa-pin--sucursal .mapa-pin-barrido line { stroke: #F6C46E; }
.mapa-pin { cursor: pointer; }
.mapa-pin--fijo { cursor: default; }
.mapa-pin-escala { transition: transform var(--dur-rapida) linear; }
.mapa-pin-disco { fill: var(--azul); opacity: .28; }
.mapa-pin-nucleo { fill: #fff; }
.mapa-pin-onda {
fill: none;
stroke: var(--azul);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: mapa-onda 3.2s ease-out infinite;
}
.mapa-pin-onda--b { animation-delay: 1.6s; }
@keyframes mapa-onda {
0%   { transform: scale(.28); opacity: .75; }
80%  { transform: scale(1); opacity: 0; }
100% { transform: scale(1); opacity: 0; }
}
.mapa-pin--sucursal .mapa-pin-disco { fill: var(--ambar); }
.mapa-pin--sucursal .mapa-pin-onda { stroke: var(--ambar); }
.mapa-pin-texto {
fill: #fff;
font-family: var(--fuente);
font-stretch: var(--ancho-display);
font-size: 15px;
font-weight: 700;
letter-spacing: -.005em;
pointer-events: none;
}
.mapa-rotulo { pointer-events: none; }
.mapa-rotulo-placa {
fill: rgba(3, 22, 35, .88);
stroke: rgba(120, 190, 225, .38);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.mapa-pin.activo .mapa-rotulo-placa { stroke: var(--azul-claro); }
.mapa-pin:hover .mapa-pin-disco,
.mapa-pin.activo .mapa-pin-disco { opacity: .55; }
.mapa-pin.activo .mapa-pin-nucleo { fill: var(--ambar); }
.mapa-pin--sucursal.activo .mapa-pin-nucleo { fill: var(--azul-texto); }
.mapa-pin:focus { outline: none; }
.mapa-pin:focus-visible .mapa-pin-disco { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
.mapa-pin-onda { animation: none; }
.mapa-arco { animation: none; }
}
.seccion--mapa { padding-bottom: clamp(30px, 5vw, 48px); }
.mapa-sucursales { display: grid; gap: clamp(12px, 2vw, 18px); }
.mapa-lienzo {
position: relative;
width: min(100%, 1000px);
margin-inline: auto;
aspect-ratio: var(--razon-mapa, 1.55);
border: 1px solid var(--borde);
border-radius: var(--radio);
overflow: hidden;
background:
radial-gradient(760px 420px at 68% 22%, rgba(0, 168, 236, .11), transparent 66%),
#03172A;
}
.mapa-lienzo .mapa-svg { height: 100%; transition: none; }
@media (max-width: 700px) {
.mapa-lienzo { aspect-ratio: auto; height: clamp(300px, 52vh, 430px); }
}
.mapa-encimera {
position: absolute;
inset: clamp(12px, 2vw, 18px) clamp(12px, 2vw, 18px) auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
pointer-events: none;
}
.mapa-encimera > * { pointer-events: auto; }
.mapa-volver {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 8px 15px;
border-radius: 999px;
border: 1px solid var(--borde);
background: rgba(4, 26, 40, .84);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--texto);
font: inherit;
font-size: var(--t-min);
font-weight: 700;
cursor: pointer;
transition: border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}
.mapa-volver:hover { border-color: var(--azul); color: #fff; }
.mapa-volver svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(180deg); }
.mapa-aviso {
position: absolute;
left: clamp(12px, 2vw, 18px);
bottom: clamp(12px, 2vw, 18px);
margin: 0;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border-radius: 999px;
border: 1px solid var(--borde);
background: rgba(4, 26, 40, .8);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--texto-2);
font-size: var(--t-min);
font-weight: 600;
transition: opacity var(--dur-media) var(--curva), transform var(--dur-media) var(--curva);
}
.mapa-aviso[hidden] { display: none; }
.mapa-leyenda {
position: absolute;
right: clamp(12px, 2vw, 18px);
bottom: clamp(12px, 2vw, 18px);
z-index: 1;
margin: 0;
padding: 11px 15px;
list-style: none;
display: grid;
gap: 7px;
border-radius: var(--radio-sm);
border: 1px solid var(--borde);
background: rgba(4, 26, 40, .8);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--texto-2);
font-size: var(--t-xs);
line-height: 1.2;
}
.mapa-leyenda[hidden] { display: none; }
.mapa-leyenda li { display: flex; align-items: center; gap: 10px; }
.mapa-leyenda-marca { flex: 0 0 16px; display: grid; place-items: center; height: 12px; }
.mapa-leyenda-marca::before { content: ""; display: block; }
.mapa-leyenda-marca--matriz::before,
.mapa-leyenda-marca--sucursal::before {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--azul);
box-shadow: 0 0 0 3px rgba(0, 168, 236, .28);
}
.mapa-leyenda-marca--sucursal::before {
background: var(--ambar);
box-shadow: 0 0 0 3px rgba(240, 163, 42, .28);
}
.mapa-leyenda-marca--estado::before {
width: 16px;
height: 11px;
border-radius: 2px;
border: 1px solid #4CC3EE;
background: linear-gradient(170deg, #2BB5EC, #08608D);
}
.mapa-leyenda-marca--enlace::before {
width: 16px;
border-top: 2px dashed var(--ambar);
}
@media (max-width: 700px) {
.mapa-leyenda,
.mapa-geo,
.mapa-reticula text { display: none; }
}
.mapa-globo {
position: absolute;
z-index: 2;
transform: translate(-50%, -140%);
padding: 5px 11px;
border-radius: 999px;
background: rgba(4, 26, 40, .92);
border: 1px solid rgba(255, 255, 255, .18);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #fff;
font-size: var(--t-xs);
font-weight: 600;
white-space: nowrap;
pointer-events: none;
}
.mapa-globo[hidden] { display: none; }
.mapa-aviso-punto {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ambar);
box-shadow: 0 0 0 0 rgba(255, 196, 61, .6);
}
.mapa-fichas {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 2vw, 16px);
padding: clamp(12px, 2vw, 16px);
border-top: 1px solid var(--borde);
}
.mapa-ficha {
background: #fff;
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: clamp(16px, 2.6vw, 22px);
box-shadow: var(--sombra-sm);
}
.mapa-ficha-cabeza { position: relative; margin-bottom: 4px; }
.mapa-ficha h3 { margin: 0 0 2px; font-size: clamp(1.2rem, 3.2vw, 1.5rem); }
.mapa-ficha-estado {
margin: 0;
color: var(--texto-3);
font-size: var(--t-min);
font-weight: 600;
}
.mapa-ficha-coords {
display: flex;
align-items: center;
gap: 7px;
margin: 8px 0 0;
font-size: var(--t-xs);
color: var(--azul-texto);
font-variant-numeric: tabular-nums;
}
.mapa-ficha-coords svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.mapa-ficha .lista-datos { margin: 14px 0; }
.chips--cobertura { margin-bottom: 16px; }
.chip--mapa { font-size: var(--t-xs); padding: 4px 10px; }
.mapa-ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.mapa-sucursales--js .mapa-fichas {
position: absolute;
top: clamp(58px, 9vw, 70px);
right: clamp(12px, 2vw, 18px);
bottom: clamp(12px, 2vw, 18px);
width: min(370px, 40%);
display: block;
padding: 0;
border-top: 0;
pointer-events: none;
}
.mapa-sucursales--js .mapa-ficha {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: auto;
max-height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
background: rgba(255, 255, 255, .96);
border-color: rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: var(--sombra);
opacity: 0;
visibility: hidden;
transform: translateX(26px) scale(.98);
transition: opacity var(--dur-media) var(--curva), transform var(--dur-media) var(--curva), visibility var(--dur-media);
}
.mapa-sucursales--js .mapa-ficha .lista-datos li { padding: 7px 0; font-size: var(--t-menor); }
.mapa-sucursales--js .mapa-ficha .lista-datos { margin: 12px 0; }
.mapa-sucursales--js .chips--cobertura { margin-bottom: 13px; }
.mapa-sucursales--js .mapa-ficha.activa {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
transition-delay: .18s;
}
.mapa-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(10px, 1.6vw, 14px);
}
.mapa-opcion {
display: flex;
align-items: center;
gap: 13px;
text-align: left;
padding: 14px 16px;
min-height: 62px;
border-radius: var(--radio);
border: 1px solid var(--borde);
background: var(--superficie);
color: var(--texto);
font: inherit;
cursor: pointer;
transition: border-color var(--dur-rapida) var(--curva), background var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.mapa-opcion:hover { border-color: var(--azul); transform: translateY(-2px); }
.mapa-opcion[aria-selected="true"] {
border-color: var(--azul);
background:
linear-gradient(90deg, rgba(0, 168, 236, .14), transparent 70%),
var(--fondo);
}
.mapa-opcion-marca {
flex: 0 0 auto;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--azul);
box-shadow: 0 0 0 4px rgba(0, 168, 236, .16);
}
.mapa-opcion--sucursal .mapa-opcion-marca { background: var(--ambar); box-shadow: 0 0 0 4px rgba(255, 196, 61, .16); }
.mapa-opcion-texto { display: block; min-width: 0; flex: 1 1 auto; }
.mapa-opcion-texto strong { display: block; color: var(--titulo); font-size: var(--t-cuerpo); line-height: 1.25; }
.mapa-opcion-texto small { display: block; color: var(--texto-3); font-size: var(--t-xs); }
.mapa-opcion-cobertura {
display: block;
margin-top: 5px;
color: var(--texto-2);
font-size: var(--t-min);
line-height: 1.35;
}
.mapa-opcion-flecha {
width: 17px;
height: 17px;
flex: 0 0 auto;
stroke: var(--texto-3);
fill: none;
stroke-width: 2;
transition: transform var(--dur-rapida) var(--curva), stroke var(--dur-rapida) var(--curva);
}
.mapa-opcion:hover .mapa-opcion-flecha,
.mapa-opcion[aria-selected="true"] .mapa-opcion-flecha { stroke: var(--azul-texto); transform: translateX(3px); }
.mapa-svg--mini { height: auto; aspect-ratio: 608 / 393; }
.mapa-svg--mini .mapa-pin-texto { font-size: 26px; }
.expansion-mapa-pie {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 18px;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid var(--borde-suave);
font-size: var(--t-xs);
color: var(--texto-3);
}
.expansion-mapa-pie span { display: inline-flex; align-items: center; gap: 6px; }
.expansion-mapa-pie svg { width: 14px; height: 14px; stroke: var(--azul-texto); fill: none; stroke-width: 1.8; }
.expansion-mapa-pie span:last-child svg { stroke: var(--ambar); }
.sucursal-etiqueta {
display: inline-block;
margin-bottom: 10px;
font-size: var(--t-xs);
font-weight: 700;
color: var(--azul-texto);
background: rgba(0, 168, 236, .12);
border-radius: 999px;
padding: 4px 11px;
}
.red-equipo {
--trazo: 2px;
--color-trazo: #C3D8E8;
--salto: clamp(20px, 3.2vw, 34px);
--orilla: clamp(26px, 4.6vw, 48px);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--orilla) clamp(14px, 3vw, 34px);
border: 1px solid var(--borde);
border-radius: var(--radio);
background: #FBFDFE;
}
.red-trazos {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.red-trazos path {
fill: none;
stroke: var(--color-trazo);
stroke-width: var(--trazo);
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.red-trazos path.trazo-vivo { stroke: var(--color-rama, var(--color-trazo)); opacity: .85; }
.red-equipo::before {
content: "";
position: absolute;
top: var(--orilla);
bottom: var(--orilla);
left: 50%;
width: var(--trazo);
background: var(--color-trazo);
transform: translateX(-50%);
}
.red-equipo--js::before { display: none; }
.nodo {
position: relative;
z-index: 1;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 9px;
width: clamp(100px, 13vw, 126px);
}
.nodo-punto {
width: 46px;
height: 46px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--color-nodo, var(--azul));
color: #fff;
font-size: var(--t-min);
font-weight: 700;
letter-spacing: .01em;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-nodo, var(--azul)) 14%, transparent);
transition: transform var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
}
.nodo-punto svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.9; }
.nodo-pie { display: flex; flex-direction: column; gap: 2px; }
.nodo-pie strong {
color: var(--titulo);
font-size: var(--t-min);
font-weight: 600;
line-height: 1.3;
overflow-wrap: anywhere;
}
.nodo-pie small { color: var(--texto-3); font-size: var(--t-xs); line-height: 1.35; }
.nodo-codigo { font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.nodo--direccion { width: clamp(126px, 17vw, 168px); }
.nodo--direccion .nodo-punto { width: 68px; height: 68px; font-size: 1.12rem; }
.nodo--direccion .nodo-pie strong { font-size: var(--t-cuerpo); font-weight: 700; }
.nodo--direccion .nodo-pie small { font-size: var(--t-min); }
.nodo--area { width: clamp(124px, 16vw, 158px); }
.nodo--area .nodo-punto { width: 56px; height: 56px; }
.nodo--area .nodo-pie strong { font-size: var(--t-menor); font-weight: 700; }
.nodo--jefatura .nodo-punto {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-nodo, var(--azul)) 16%, transparent),
0 0 0 7px color-mix(in srgb, var(--color-nodo, var(--azul)) 16%, transparent);
}
.red-fila {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(12px, 2.4vw, 26px);
}
.red-fila--cima { gap: clamp(20px, 4vw, 48px); }
.red-areas {
width: 100%;
display: grid;
grid-template-columns: repeat(var(--areas, 3), minmax(0, auto));
justify-content: center;
justify-items: center;
gap: clamp(12px, 2.4vw, 26px);
}
.rama-bloque { display: contents; }
.red-areas > .rama-bloque > .rama { grid-row: 1; }
.red-areas > .rama-bloque > .rama-detalle { grid-row: 2; grid-column: 1 / -1; }
.red-areas, .rama-nivel .red-fila { margin-top: var(--salto); }
.rama {
border: 0;
background: none;
padding: 0;
font: inherit;
cursor: pointer;
}
.rama .nodo-punto {
background: color-mix(in srgb, var(--color-nodo) 13%, var(--fondo));
color: var(--color-nodo);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-nodo) 62%, transparent);
}
.rama .nodo-punto svg { stroke-width: 2.1; }
.rama:hover .nodo-punto {
transform: translateY(-3px);
background: color-mix(in srgb, var(--color-nodo) 22%, var(--fondo));
}
.rama[aria-expanded="true"] .nodo-punto {
background: var(--color-nodo);
color: #fff;
box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-nodo) 18%, transparent);
}
.rama[aria-expanded="true"] .nodo-pie strong {
color: color-mix(in srgb, var(--color-nodo) 60%, var(--titulo));
}
.rama:focus-visible { outline: none; }
.rama:focus-visible .nodo-punto { box-shadow: 0 0 0 4px var(--azul-claro); }
.rama-detalle {
position: relative;
width: 100%;
margin-top: var(--salto);
padding-top: var(--salto);
}
.rama-detalle-niveles {
display: grid;
grid-template-columns: repeat(var(--niveles, 3), minmax(0, 1fr));
gap: clamp(16px, 2.4vw, 34px);
align-items: start;
margin-top: var(--salto);
}
@media (max-width: 760px) {
.rama-detalle-niveles { grid-template-columns: minmax(0, 1fr); }
}
.rama-nivel {
display: flex;
flex-direction: column;
align-items: center;
}
.junta {
position: relative;
z-index: 1;
margin: 0;
padding: 4px 13px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-nodo, var(--azul)) 10%, var(--fondo));
color: color-mix(in srgb, var(--color-nodo, var(--azul)) 70%, var(--titulo));
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .01em;
}
.rama-nivel .red-fila { margin-top: var(--salto); }
.red-equipo--js .rama-detalle { display: none; }
.red-equipo--js .rama-detalle.abierta { display: block; animation: rama-abre .32s ease both; }
@keyframes rama-abre {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nodo-punto { transition: none; }
.red-equipo--js .rama-detalle.abierta { animation: none; }
}
@media (max-width: 860px) {
.red-equipo { padding-inline: clamp(12px, 3vw, 20px); }
.rama-detalle { padding-top: 0; }
}
@media (max-width: 700px) {
.red-areas { display: flex; flex-direction: column; align-items: center; }
.rama-bloque {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: clamp(12px, 2.4vw, 26px);
}
}
@media (max-width: 520px) {
.nodo { width: clamp(92px, 27vw, 108px); }
.nodo-punto { width: 42px; height: 42px; font-size: var(--t-xs); }
.nodo--direccion { width: clamp(116px, 40vw, 148px); }
.nodo--direccion .nodo-punto { width: 58px; height: 58px; font-size: var(--t-cuerpo); }
.nodo--area { width: clamp(108px, 40vw, 148px); }
}
.rejilla--redes { gap: 14px; }
.red-tarjeta {
display: flex;
align-items: center;
gap: 16px;
background: var(--superficie-2);
border: 1px solid var(--borde);
border-radius: var(--radio);
padding: 18px 20px;
color: var(--texto);
transition: border-color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.red-tarjeta:hover { transform: translateY(-2px); text-decoration: none; }
.red-tarjeta--facebook:hover { border-color: var(--facebook); }
.red-tarjeta--instagram:hover { border-color: var(--instagram); }
.red-icono {
width: 48px;
height: 48px;
flex: 0 0 auto;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--superficie-3);
}
.red-icono svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.red-tarjeta--facebook .red-icono { color: var(--facebook); }
.red-tarjeta--instagram .red-icono { color: var(--instagram); }
.red-texto { display: flex; flex-direction: column; min-width: 0; }
.red-texto strong { color: var(--titulo); font-size: var(--t-cuerpo); }
.red-texto > span { color: var(--texto-2); font-size: var(--t-min); }
.red-texto small { color: var(--texto-3); font-size: var(--t-min); }
.red-flecha { width: 18px; height: 18px; margin-left: auto; flex: 0 0 auto; stroke: var(--texto-3); fill: none; stroke-width: 2; }
.muro-clientes {
background: var(--superficie);
border-block: 1px solid var(--borde-suave);
overflow: hidden;
}
.muro-titulo {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 20px;
margin-bottom: clamp(18px, 3vw, 26px);
}
.muro-titulo h2 {
margin: 0;
font-size: clamp(1.1rem, 3vw, 1.5rem);
max-width: 28ch;
}
.placa {
flex: 0 0 auto;
width: clamp(186px, 22vw, 230px);
height: clamp(84px, 11vw, 104px);
display: grid;
place-items: center;
padding: 14px 18px;
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--radio);
position: relative;
transition: border-color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
}
.placa::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
box-shadow: var(--sombra-sm);
opacity: 0;
transition: opacity var(--dur-rapida) var(--curva);
pointer-events: none;
}
.placa:hover::after,
.placa:focus-visible::after { opacity: 1; }
.placa img {
width: min(100%, 132px);
height: clamp(44px, 5.6vw, 58px);
object-fit: contain;
object-position: center;
display: block;
}
.placa:hover,
.placa:focus-visible {
border-color: var(--azul);
transform: translateY(-3px);
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.placa { transition: none; }
}
@media (max-width: 560px) {
.muro-titulo h2 { max-width: none; }
}
.muro-redes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: clamp(14px, 2.4vw, 22px);
align-items: stretch;
}
.muro-redes .red-vivo { display: flex; flex-direction: column; }
.muro-redes .red-marco,
.muro-redes .red-invitacion { flex: 1 1 auto; }
.red-vivo {
background: var(--fondo);
border: 1px solid var(--borde);
border-radius: var(--radio);
overflow: hidden;
box-shadow: var(--sombra-sm);
}
.red-vivo-cabeza {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 15px;
border-bottom: 1px solid var(--borde-suave);
}
.red-vivo-cabeza .boton { margin-left: auto; }
.red-vivo-nombre { min-width: 0; }
.red-vivo-nombre strong { display: block; color: var(--titulo); font-size: var(--t-cuerpo); line-height: 1.25; }
.red-vivo-nombre small { color: var(--texto-3); font-size: var(--t-min); }
.red-vivo .red-icono { width: 42px; height: 42px; border-radius: var(--radio-sm); }
.red-vivo .red-icono svg { width: 21px; height: 21px; }
.red-vivo--facebook .red-icono { background: rgba(24, 119, 242, .12); color: var(--facebook); }
.red-vivo--instagram .red-icono { background: rgba(225, 48, 108, .12); color: var(--instagram); }
.red-marco {
position: relative;
display: grid;
place-items: center;
min-height: var(--alto-embebido, 260px);
background: var(--superficie);
}
.red-marco > * { grid-area: 1 / 1; }
.red-marco iframe {
position: relative;
z-index: 1;
width: 100%;
height: var(--alto-embebido, 100%);
border: 0;
display: block;
background: var(--fondo);
}
.red-publicaciones {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--borde-suave);
}
.red-invitacion {
padding: clamp(20px, 3.4vw, 30px);
text-align: center;
color: var(--texto-2);
}
.red-invitacion p { font-size: var(--t-menor); max-width: 42ch; margin: 0 auto 16px; }
.red-invitacion .boton svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
@media (max-width: 560px) {
.red-publicaciones { grid-template-columns: minmax(0, 1fr); }
.red-vivo-cabeza { flex-wrap: wrap; }
.red-vivo-cabeza .boton { margin-left: 0; flex: 1 1 100%; }
}
.cta {
position: relative;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(700px 320px at 88% 0%, rgba(0, 168, 236, .38), transparent 62%),
linear-gradient(135deg, var(--marino) 0%, var(--marino-2) 100%);
border: 0;
border-radius: var(--radio);
box-shadow: var(--sombra);
padding: clamp(26px, 4.4vw, 44px);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.cta h2 { margin-bottom: .25em; }
.cta p { color: var(--texto-2); margin: 0; max-width: 58ch; }
.cta-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.form-campo { margin-bottom: 15px; }
.form-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.bloque > form { container-type: inline-size; }
@container (max-width: 460px) {
.form-fila { grid-template-columns: minmax(0, 1fr); }
}
.form-campo label { display: block; font-size: var(--t-min); font-weight: 600; margin-bottom: 6px; color: var(--texto-2); }
.form-campo input,
.form-campo select,
.form-campo textarea {
width: 100%;
background: var(--superficie-2);
border: 1px solid var(--borde);
border-radius: var(--radio-sm);
color: var(--texto);
font: inherit;
font-size: 16px;
padding: 11px 13px;
min-height: var(--tap);
}
.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
outline: none;
border-color: var(--azul);
box-shadow: 0 0 0 3px rgba(0, 168, 236, .16);
}
.form-campo textarea { min-height: 130px; resize: vertical; }
.pie {
position: relative;
isolation: isolate;
background: var(--marino);
border-top: 0;
padding: clamp(40px, 6vw, 60px) 0 24px;
font-size: var(--t-menor);
color: var(--texto-3);
}
.pie :is(h2, h3) {
color: var(--texto-3);
font-size: var(--t-min);
letter-spacing: .04em;
font-weight: 700;
margin-bottom: 14px;
}
.pie a { color: var(--texto-2); }
.pie a:hover { color: var(--titulo); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 8px; }
.pie-rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: clamp(20px, 3vw, 30px); }
.pie-marca .redes-enlaces { margin-top: 16px; }
.pie-logo img { height: 22px; width: auto; margin-bottom: 16px; }
.pie-sucursales li { margin-bottom: 12px; }
.pie-sucursales strong { display: block; color: var(--texto-2); font-size: var(--t-min); }
.pie-sucursales span { display: block; font-size: var(--t-min); }
.pie-legal {
margin-top: 32px;
padding-top: 18px;
border-top: 1px solid var(--borde-suave);
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
font-size: var(--t-min);
color: var(--texto-3);
}
.barra-movil {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
background: rgba(255, 255, 255, .97);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-top: 1px solid var(--borde);
box-shadow: 0 -2px 18px rgba(5, 43, 66, .1);
padding-bottom: env(safe-area-inset-bottom);
}
.barra-movil-boton {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 58px;
color: var(--texto-2);
font-size: var(--t-xs);
font-weight: 700;
}
.barra-movil-boton:hover, .barra-movil-boton:focus { text-decoration: none; color: var(--azul-texto); }
.barra-movil-boton svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.barra-movil-boton--destacado { color: var(--azul-texto); }
.aviso-cookies {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 90;
width: min(400px, calc(100% - 32px));
padding: 16px 18px;
background: var(--fondo);
border: 1px solid var(--borde);
border-radius: var(--radio);
box-shadow: var(--sombra);
color: var(--texto-2);
font-size: var(--t-menor);
line-height: 1.5;
}
.aviso-cookies p { margin: 0 0 12px; }
.aviso-cookies strong { color: var(--titulo); }
.aviso-cookies a { color: var(--azul-texto); font-weight: 600; }
.aviso-cookies .aviso-cookies-actual { font-size: var(--t-min); color: var(--texto-3); }
.aviso-cookies-acciones { display: flex; gap: 8px; }
.aviso-cookies-acciones .boton { flex: 1 1 0; }
@media (max-width: 760px) {
.aviso-cookies {
left: 12px;
right: 12px;
width: auto;
bottom: calc(58px + env(safe-area-inset-bottom) + 10px);
padding: 12px 14px;
font-size: var(--t-min);
}
.aviso-cookies p { margin-bottom: 10px; }
}
.legal-boton,
.pie-legal-boton {
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--azul-texto);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.pie-legal-boton { color: inherit; }
.pie-legal-boton:hover { color: var(--titulo); }
@media (max-width: 1140px) {
.pie-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
.catalogo { grid-template-columns: minmax(0, 1fr); }
.panel-filtros {
position: static;
padding: 14px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
}
.filtro-lista--chips {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
flex: 1 1 100%;
}
.filtro-lista--chips::-webkit-scrollbar { display: none; }
.filtro-lista--chips li { margin: 0; }
.filtro {
width: auto;
white-space: nowrap;
border-color: var(--borde);
border-radius: 999px;
padding: 8px 15px;
}
.rejilla--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.hero .contenedor { grid-template-columns: minmax(0, 1fr); }
.ficha { grid-template-columns: minmax(0, 1fr); }
.expansion { grid-template-columns: minmax(0, 1fr); }
.rejilla--4, .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista-datos--dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
html { scroll-padding-top: 124px; }
body { padding-bottom: 58px; }
.barra-movil { display: flex; }
.oculta-movil { display: none !important; }
.barra-superior { font-size: var(--t-xs); }
.barra-superior .contenedor { min-height: 34px; justify-content: space-between; }
.barra-superior .redes-enlaces { margin-left: 0; }
.redes-enlaces--mini a { width: 36px; height: 36px; }
.nav-boton { display: block; }
.cabecera-principal { flex-wrap: wrap; row-gap: 10px; padding-bottom: 12px; }
.buscador { order: 3; flex: 1 1 100%; max-width: none; }
.nav-categorias { display: none; border-top: 1px solid var(--borde); }
.nav-categorias.abierta { display: block; }
.nav-lista {
flex-direction: column;
align-items: stretch;
overflow: visible;
padding: 8px 0 14px;
max-height: 60vh;
overflow-y: auto;
}
.nav-lista a { padding: 12px 10px; min-height: var(--tap); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-fila { grid-template-columns: minmax(0, 1fr); }
.cta { padding: 24px; }
.cta-acciones { width: 100%; }
.cta-acciones .boton { flex: 1 1 auto; }
.pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie-legal { flex-direction: column; gap: 6px; }
.caso-hero img { max-height: 200px; }
.galeria-miniaturas { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
}
@media (max-width: 560px) {
.rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--2 { grid-template-columns: minmax(0, 1fr); }
.producto-resumen, .etiquetas { display: none; }
.producto-cuerpo { padding: 12px 13px 13px; }
.producto-pie { margin-top: 10px; padding-top: 10px; font-size: var(--t-xs); }
.tabla-ficha th, .tabla-ficha td { display: block; width: auto; }
.tabla-ficha th { padding-bottom: 0; border-bottom: 0; }
.tabla-ficha td { padding-top: 2px; }
.ficha-acciones .boton { flex: 1 1 100%; }
.pie-rejilla { grid-template-columns: minmax(0, 1fr); }
.grupo-cabecera { flex-wrap: wrap; gap: 8px 12px; }
.grupo-cabecera .icono { width: 36px; height: 36px; order: 1; }
.grupo-cabecera .cuenta { order: 2; }
.grupo-titulo { order: 3; flex: 1 1 100%; }
}
@media (max-width: 359px) {
.rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); }
.producto-resumen { display: block; }
.etiquetas { display: flex; }
}
@media (max-width: 1080px) {
.mapa-sucursales--js .mapa-fichas { width: min(330px, 46%); }
}
@media (max-width: 900px) {
.portada-video-boton { top: auto; bottom: clamp(12px, 3vw, 20px); }
.mapa-sucursales--js .mapa-fichas {
position: static;
width: auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: clamp(12px, 2vw, 16px);
border-top: 1px solid var(--borde);
pointer-events: auto;
}
.mapa-sucursales--js:not(.mapa-sucursales--elegida) .mapa-fichas { display: none; }
.mapa-sucursales--js .mapa-ficha {
position: static;
inset: auto;
display: none;
opacity: 1;
visibility: visible;
transform: none;
overflow: visible;
transition: none;
}
.mapa-sucursales--js .mapa-ficha.activa { display: block; animation: ficha-entra var(--dur-media) var(--curva) both; }
@keyframes ficha-entra {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: none; }
}
.mapa-fichas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.portada { padding-block: clamp(34px, 9vw, 60px) 0; min-height: 0; }
.portada-velo {
background: linear-gradient(180deg, rgba(4, 26, 40, .8) 0%, rgba(4, 26, 40, .6) 45%, rgba(4, 26, 40, .96) 100%);
}
.portada-fondo > img, .portada-fondo > picture > img { filter: brightness(.5) saturate(.85); }
.portada-video { filter: brightness(.8); }
.portada-contenido > p { margin-bottom: 20px; }
.portada .hero-acciones .boton { flex: 1 1 100%; }
.portada-sedes { width: 100%; justify-content: flex-start; }
.mapa-encimera { inset: 10px 10px auto; }
.mapa-aviso { left: 10px; right: 10px; bottom: 10px; justify-content: center; }
.mapa-ficha-acciones .boton { flex: 1 1 100%; }
.expansion-mapa { padding: clamp(12px, 3vw, 18px); }
}
@media (max-width: 560px) {
.portada-video-boton .portada-video-texto { display: none; }
.portada-video-boton { padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
.mapa-sucursales--js .mapa-ficha { transition: none; }
}
@media print {
.barra-superior, .cabecera, .barra-movil, .cta, .slider-logos, .aviso-cookies { display: none !important; }
body { background: #fff; color: #000; }
}
@media (max-width: 860px) {
.promesa { grid-template-columns: 1fr; gap: 0; }
.promesa li + li {
border-left: 0;
padding-left: 0;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, .14);
}
}
.directorio { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.directorio li { border-bottom: 1px solid var(--borde); }
.directorio a {
display: grid;
grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr) auto auto;
align-items: center;
gap: clamp(14px, 2.4vw, 30px);
padding: clamp(16px, 2.4vw, 22px) 6px;
color: inherit;
text-decoration: none;
transition: background-color var(--dur-rapida) var(--curva);
}
.directorio a:hover,
.directorio a:focus-visible { background: var(--superficie); outline: none; }
.directorio a:focus-visible { box-shadow: inset 3px 0 0 var(--azul); }
.dir-icono {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--radio-sm);
background: var(--superficie-2);
color: var(--azul-texto);
}
.dir-icono svg { width: 20px; height: 20px; stroke-width: 1.7; }
.dir-nombre {
font-stretch: var(--ancho-display);
font-size: clamp(1.1rem, 2.1vw, 1.4rem);
font-weight: 700;
letter-spacing: -.015em;
color: var(--titulo);
line-height: 1.15;
}
.dir-que { color: var(--texto-2); font-size: var(--t-menor); line-height: 1.45; }
.dir-n { color: var(--texto-3); font-size: var(--t-min); white-space: nowrap; }
.dir-n b { color: var(--titulo); font-size: var(--t-cuerpo); font-weight: 700; }
.dir-flecha svg { width: 20px; height: 20px; stroke: var(--texto-3); fill: none; stroke-width: 2; transition: transform var(--dur-rapida) var(--curva), stroke var(--dur-rapida) var(--curva); }
.directorio a:hover .dir-flecha svg,
.directorio a:focus-visible .dir-flecha svg { stroke: var(--azul-texto); transform: translateX(4px); }
@media (max-width: 860px) {
.directorio a {
grid-template-columns: auto minmax(0, 1fr) auto;
row-gap: 6px;
}
.dir-que { grid-column: 2 / -1; }
.dir-flecha { display: none; }
}
.ciclo {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(26px, 5vw, 72px);
align-items: start;
}
.ciclo-tesis h2 { margin: 0 0 14px; }
.ciclo-tesis p { color: var(--texto-2); margin: 0 0 18px; }
.ciclo-lineas { list-style: none; margin: 0; padding: 0; }
.ciclo-lineas li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 4px clamp(14px, 2vw, 20px);
padding: clamp(16px, 2.2vw, 22px) 0;
border-top: 1px solid var(--borde);
}
.ciclo-lineas li:last-child { border-bottom: 1px solid var(--borde); }
.linea-icono {
grid-row: span 2;
display: grid;
place-items: start center;
width: 26px;
padding-top: 3px;
color: var(--azul-texto);
}
.linea-icono svg { width: 22px; height: 22px; stroke-width: 1.6; }
.ciclo-lineas h3 { margin: 0; align-self: center; }
.ciclo-lineas p { margin: 0; color: var(--texto-2); font-size: var(--t-menor); line-height: 1.5; }
.ciclo-lineas--enlaces li {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(14px, 2vw, 20px);
}
.ciclo-lineas--enlaces .linea-icono { grid-row: auto; align-self: center; padding-top: 0; }
.linea-enlace { display: block; min-width: 0; color: inherit; }
.linea-enlace:hover { text-decoration: none; }
.linea-enlace h3 { transition: color var(--dur-rapida) var(--curva); }
.linea-enlace:hover h3,
.linea-enlace:focus-visible h3 { color: var(--azul-texto); }
.ciclo-lineas--enlaces .serv-flecha { color: var(--texto-3); transition: transform var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva); }
.ciclo-lineas--enlaces .serv-flecha svg { width: 17px; height: 17px; }
.ciclo-lineas--enlaces li:hover .serv-flecha { color: var(--azul-texto); transform: translateX(3px); }
@media (max-width: 860px) {
.ciclo { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
}
.linea-servicio {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: clamp(24px, 5vw, 64px);
align-items: start;
}
.linea-cabeza { position: sticky; top: calc(var(--alto-cabecera, 64px) + 24px); }
.linea-cabeza h2 { margin: 0 0 12px; }
.linea-cabeza p { color: var(--texto-2); margin: 0; font-size: var(--t-menor); }
.linea-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.linea-lista li { border-bottom: 1px solid var(--borde); }
.linea-lista a {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 2px clamp(14px, 2vw, 22px);
padding: clamp(15px, 2vw, 20px) 4px;
color: inherit;
text-decoration: none;
transition: background-color var(--dur-rapida) var(--curva);
}
.linea-lista a:hover,
.linea-lista a:focus-visible { background: var(--superficie); outline: none; }
.serv-nombre {
font-stretch: var(--ancho-display);
font-size: clamp(1.02rem, 1.7vw, 1.16rem);
font-weight: 700;
letter-spacing: -.012em;
color: var(--titulo);
line-height: 1.2;
}
.serv-que { grid-column: 1; color: var(--texto-2); font-size: var(--t-menor); line-height: 1.5; }
.serv-flecha { grid-row: span 2; align-self: center; }
.serv-flecha svg { width: 19px; height: 19px; stroke: var(--texto-3); fill: none; stroke-width: 2; transition: transform var(--dur-rapida) var(--curva), stroke var(--dur-rapida) var(--curva); }
.linea-lista a:hover .serv-flecha svg,
.linea-lista a:focus-visible .serv-flecha svg { stroke: var(--azul-texto); transform: translateX(4px); }
@media (max-width: 860px) {
.linea-servicio { grid-template-columns: 1fr; gap: clamp(16px, 3vw, 24px); }
.linea-cabeza { position: static; }
}
.linea-visual {
position: relative;
aspect-ratio: 4 / 3;
margin-top: clamp(20px, 3vw, 28px);
border: 1px solid var(--borde);
border-radius: var(--radio);
overflow: hidden;
isolation: isolate;
background:
radial-gradient(62% 56% at 50% 66%, rgba(0, 168, 236, .15), transparent 72%),
linear-gradient(180deg, var(--superficie-2), var(--superficie));
}
.linea-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(0, 119, 171, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 119, 171, .07) 1px, transparent 1px);
background-size: 26px 26px;
}
.linea-visual::after {
content: "";
position: absolute;
left: 16%;
right: 16%;
bottom: 4%;
height: 10%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(5, 43, 66, .24), transparent);
}
.linea-visual--fibra::after { display: none; }
.linea-visual .pieza {
position: absolute;
width: auto;
max-width: none;
object-fit: contain;
transition:
opacity var(--dur-lenta) var(--curva),
transform var(--dur-lenta) var(--curva);
transition-delay: calc(var(--i, 0) * 90ms);
}
.pieza--frente { z-index: 2; }
.pieza--funde { mix-blend-mode: multiply; }
.linea-visual .pieza--diagrama { inset: 4% 3% 2%; width: 94%; height: 94%; }
.revelar-listo .linea-visual.revelar { opacity: 1; transform: none; }
.revelar-listo .linea-visual:not(.visible) .pieza { opacity: 0; transform: translateY(16px) scale(.97); }
.dg-suelo { fill: none; stroke: rgba(5, 43, 66, .28); stroke-width: 1.5; }
.dg-edificio { fill: #fff; stroke: rgba(5, 43, 66, .34); stroke-width: 1.4; stroke-linejoin: round; }
.dg-azotea { fill: var(--superficie-2); stroke: rgba(5, 43, 66, .3); stroke-width: 1.2; stroke-linejoin: round; }
.dg-costado { fill: var(--superficie-3); stroke: rgba(5, 43, 66, .3); stroke-width: 1.2; stroke-linejoin: round; }
.dg-ventana { fill: rgba(0, 119, 171, .15); }
.dg-puerta { fill: rgba(5, 43, 66, .12); }
.dg-terreno { fill: rgba(5, 43, 66, .04); }
.dg-registro { fill: #fff; stroke: rgba(5, 43, 66, .4); stroke-width: 1.2; }
.dg-ancla { fill: rgba(5, 43, 66, .45); }
.dg-torre { fill: none; stroke: rgba(5, 43, 66, .5); stroke-width: 1.5; stroke-linejoin: round; }
.dg-celosia { stroke-width: 1; }
.dg-retenida { fill: none; stroke: rgba(5, 43, 66, .22); stroke-width: 1; }
.dg-antena { fill: #fff; stroke: rgba(5, 43, 66, .5); stroke-width: 1.5; }
.dg-subterranea {
fill: none;
stroke: var(--azul-texto);
stroke-width: 1.6;
stroke-dasharray: 4 5;
opacity: .65;
}
.dg-troncal {
fill: none;
stroke: var(--azul);
stroke-width: 2.4;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 0;
transition: stroke-dashoffset .9s var(--curva);
transition-delay: calc(var(--i, 0) * 150ms + 180ms);
}
.dg-nodo {
fill: var(--azul);
stroke: #fff;
stroke-width: 2.5;
transform-box: fill-box;
transform-origin: center;
transition:
transform var(--dur-media) var(--curva),
opacity var(--dur-media) var(--curva);
transition-delay: calc(var(--i, 0) * 150ms + 260ms);
}
.revelar-listo .linea-visual:not(.visible) .dg-troncal { stroke-dashoffset: 1; }
.revelar-listo .linea-visual:not(.visible) .dg-nodo { opacity: 0; transform: scale(.35); }
@media (max-width: 860px) {
.linea-visual { aspect-ratio: 16 / 10; margin-top: 18px; }
}
.rejilla--fichas {
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
@media (max-width: 760px) {
.rejilla--fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
.rejilla--fichas { grid-template-columns: minmax(0, 1fr); }
}
.titulo-filtros {
font-size: var(--t-min);
font-weight: 700;
letter-spacing: .04em;
color: var(--texto-3);
margin-bottom: 12px;
padding: 0;
}
.grupo-filtros {
border: 0;
margin: 0;
padding: 0;
min-inline-size: 0;
}
.grupo-filtros + .grupo-filtros { margin-top: 18px; }
.rejilla--pocas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.rejilla--pocas .producto { flex-direction: row; align-items: stretch; }
.rejilla--pocas .producto-figura {
aspect-ratio: auto;
flex: 0 0 clamp(130px, 22%, 190px);
border-right: 1px solid var(--borde);
}
.rejilla--pocas .producto-cuerpo { flex: 1 1 auto; }
.rejilla--pocas .producto-resumen { -webkit-line-clamp: 2; line-clamp: 2; }
@media (max-width: 560px) {
.rejilla--pocas .producto { flex-direction: column; }
.rejilla--pocas .producto-figura {
aspect-ratio: 4 / 3;
flex: 0 0 auto;
border-right: 0;
}
}
.red-respaldo {
display: grid;
justify-items: center;
align-content: center;
gap: 14px;
padding: 24px 22px;
text-align: center;
}
.red-respaldo p {
margin: 0;
max-width: 30ch;
color: var(--texto-2);
font-size: var(--t-menor);
line-height: 1.55;
}
.form-nota {
margin: 0 0 14px;
padding: 12px 14px;
border-radius: var(--radio-sm);
background: var(--superficie-2);
color: var(--texto-2);
font-size: var(--t-menor);
line-height: 1.5;
}
.form-nota a { color: var(--azul-texto); font-weight: 600; }
.form-alterno {
display: block;
min-height: var(--tap);
margin: 6px auto 0;
padding: 0 8px;
border: 0;
background: none;
font: inherit;
font-size: var(--t-menor);
font-weight: 600;
color: var(--azul-texto);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.red-permiso {
display: grid;
justify-items: center;
gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--borde-suave);
}
.red-respaldo .red-permiso p { font-size: var(--t-min); }
.muro-placas {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(10px, 1.6vw, 16px);
}
@media (max-width: 860px) { .muro-placas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .muro-placas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.muro-placas .placa { width: auto; height: clamp(76px, 9vw, 96px); }
.rejilla--pocas .caso-tarjeta { display: flex; flex-direction: row; align-items: stretch; }
.rejilla--pocas .caso-portada {
flex: 0 0 clamp(150px, 30%, 280px);
border-radius: calc(var(--radio) - 1px) 0 0 calc(var(--radio) - 1px);
}
.rejilla--pocas .caso-portada img { width: 100%; height: 100%; object-fit: cover; }
.rejilla--pocas .caso-cuerpo { flex: 1 1 auto; }
@media (max-width: 560px) {
.rejilla--pocas .caso-tarjeta { flex-direction: column; }
.rejilla--pocas .caso-portada {
flex: 0 0 auto;
border-radius: calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
}
}
.tecnologias { list-style: none; margin: 0; padding: 0; }
.tecnologias .tecnologia {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(20px, 4vw, 52px);
padding: clamp(22px, 3.4vw, 38px) 0;
border-top: 1px solid var(--borde);
background: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.tecnologias .tecnologia:last-child { border-bottom: 1px solid var(--borde); }
.tecnologias .tecnologia:nth-child(even) .tecnologia-figura { order: 2; }
.tecnologias .tecnologia--sin-figura { grid-template-columns: minmax(0, 1fr); }
.tecnologias .tecnologia-figura {
margin: 0;
aspect-ratio: 16 / 10;
min-height: 0;
border: 1px solid var(--borde);
border-bottom: 1px solid var(--borde);
border-radius: var(--radio);
overflow: hidden;
background: var(--fondo);
}
.tecnologias .tecnologia-figura img { padding: clamp(14px, 2vw, 22px); }
.tecnologias .tecnologia-texto { min-width: 0; }
.tecnologias .tecnologia h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.tecnologias .tecnologia p { margin: 0; color: var(--texto-2); }
.tecnologias .tecnologia-donde { margin-top: 14px; }
@media (max-width: 760px) {
.tecnologias .tecnologia { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tecnologias .tecnologia:nth-child(even) .tecnologia-figura { order: 0; }
}
.rama-detalle-niveles .nodo { width: clamp(84px, 8.4vw, 106px); }
.rama-detalle-niveles .red-fila { gap: clamp(8px, 1.2vw, 14px); }
.legal {
max-width: 74ch;
margin-inline: auto;
}
.legal-fecha {
color: var(--texto-3);
font-size: var(--t-menor);
margin: 0 0 8px;
}
.legal-clausula {
padding-block: clamp(22px, 3vw, 30px);
border-top: 1px solid var(--borde-suave);
}
.legal-clausula:first-of-type { border-top: 0; padding-top: 4px; }
.legal-clausula h2 {
display: flex;
align-items: baseline;
gap: 14px;
font-size: var(--t-3);
margin: 0 0 12px;
scroll-margin-top: 90px;
}
.legal-numero {
flex: 0 0 auto;
min-width: 1.6em;
color: var(--azul-texto);
font-size: var(--t-menor);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.legal-clausula p {
margin: 0 0 12px;
color: var(--texto);
}
.legal-clausula p:last-child { margin-bottom: 0; }
.legal-clausula .ficha-acciones { margin-top: 18px; }
.legal-pendiente {
font-style: normal;
font-weight: 700;
color: #8A5300;
background: rgba(240, 163, 42, .16);
border-bottom: 1px dashed rgba(138, 83, 0, .5);
padding: 1px 3px 1px 4px;
border-radius: var(--radio-xs);
}
.legal-aviso {
border: 1px solid rgba(240, 163, 42, .45);
background: rgba(240, 163, 42, .08);
border-radius: var(--radio-sm);
padding: clamp(14px, 2.4vw, 20px);
margin-bottom: 8px;
}
.legal-aviso strong {
display: flex;
align-items: baseline;
gap: 9px;
color: var(--titulo);
margin-bottom: 6px;
}
.legal-aviso strong::before {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ambar);
transform: translateY(-1px);
}
.legal-aviso p { margin: 0; color: var(--texto-2); font-size: var(--t-menor); }
.legal-aviso code {
background: var(--superficie-2);
border-radius: var(--radio-xs);
padding: 1px 5px;
font-size: .95em;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
.no-encontrada { max-width: 62ch; margin-inline: auto; }
.no-encontrada h1 { margin: 0 0 12px; }
.no-encontrada > p { color: var(--texto-2); margin: 0 0 24px; }
.no-encontrada-destinos { margin-bottom: 28px; }
.portada-pendiente {
position: absolute;
inset: 0;
display: grid;
place-items: end start;
padding: clamp(16px, 3vw, 24px);
background:
linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 26px 26px,
linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 26px 26px,
linear-gradient(135deg, var(--marino-2), var(--marino));
color: #fff;
font-stretch: var(--ancho-display);
font-size: var(--t-3);
font-weight: 700;
line-height: 1.1;
}
.placa-nombre {
font-stretch: var(--ancho-display);
font-size: var(--t-menor);
font-weight: 700;
color: var(--titulo);
text-align: center;
line-height: 1.2;
}