/* /src/styles/barra-pie.css */
:root {
--nb-alto: 64px;
--nb-margen: 10px;
--nb-lado: clamp(12px, 2.2vw, 40px);
--navbar-height: calc(var(--nb-alto) + var(--nb-margen));
--nb-fondo: rgba(10, 14, 24, .88);
--nb-borde: var(--border-strong);
--nb-texto: var(--text-primary);
--nb-texto-2: var(--text-secondary);
--nb-cian: var(--accent-cyan);
--nb-cian-fuerte: var(--accent-cyan);
--nb-rosa: var(--accent-pink);
--nb-panel: var(--bg-elevated);
--nb-letra: var(--font-ui);
--nb-logo: 'Silkscreen', 'Press Start 2P', monospace;
--nb-logo-barra: var(--font-pixel, 'Press Start 2P', monospace);
--nb-logo-cian: var(--accent-cyan);
--nb-logo-rosa: var(--accent-pink);
}
.nb {
position: fixed;
top: var(--nb-margen);
left: var(--nb-lado);
right: var(--nb-lado);
height: var(--nb-alto);
z-index: var(--z-navbar, 500);
background: var(--nb-fondo);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid var(--nb-borde);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
color: var(--nb-texto);
transform: translateY(0);
transition: transform var(--navbar-show-duration, 210ms) var(--navbar-ease, ease), box-shadow .2s;
}
.nb.scrolled { box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
.nb.navbar--oculta:not(:hover):not(:focus-within) {
transform: translateY(calc(-100% - var(--nb-margen) - 6px));
transition: transform var(--navbar-hide-duration, 280ms) var(--navbar-ease, ease);
}
@media (prefers-reduced-motion: reduce) {
.nb, .nb.navbar--oculta:not(:hover):not(:focus-within) { transition-duration: 90ms !important; }
}
.nb :where(a, button, span, p, input, summary) {
font-family: var(--nb-letra);
letter-spacing: normal;
text-transform: none;
}
.nb :focus-visible { outline: 2px solid var(--nb-cian); outline-offset: 3px; box-shadow: none; }
.nb-ico { flex: none; }
.nb-interior {
position: relative;
height: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: 0 clamp(16px, 2.4vw, 40px);
}
.nb .nb-logo {
grid-column: 1;
justify-self: start;
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--nb-logo-barra);
font-weight: 400;
font-size: 22px;
line-height: 1;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
color: var(--nb-logo-cian);
text-shadow: 0 0 8px var(--nb-logo-cian), 0 0 20px rgba(0, 245, 212, .3);
transition: text-shadow .2s;
}
.nb .nb-logo:hover { text-shadow: 0 0 12px var(--nb-logo-cian), 0 0 30px rgba(0, 245, 212, .5); }
.nb .nb-logo span { font-family: inherit; letter-spacing: 0; }
.nb .nb-logo span + span { color: var(--nb-logo-rosa); text-shadow: 0 0 8px var(--nb-logo-rosa), 0 0 20px rgba(247, 37, 133, .3); }
.nb-izquierda {
grid-column: 1;
justify-self: start;
display: flex;
align-items: center;
gap: 12px;
}
.nb .nb-atras {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 0 12px 0 8px;
border: 1px solid var(--nb-borde, rgba(255, 255, 255, .14));
border-radius: 10px;
background: rgba(255, 255, 255, .04);
color: var(--nb-texto-2, #c7cfe0);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.nb .nb-atras[hidden] { display: none; }
.nb .nb-atras:hover { color: #fff; border-color: var(--nb-cian); background: rgba(0, 245, 212, .08); }
.nb-enlaces {
grid-column: 2;
display: flex;
justify-content: center;
align-items: stretch;
gap: clamp(20px, 2.2vw, 44px);
height: 100%;
min-width: 0;
}
.nb .nb-enlace {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
height: 100%;
padding: 0 4px;
background: none;
border: 0;
font-size: 16px;
font-weight: 400;
color: #cbd4e2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color .15s;
}
.nb .nb-enlace:hover { color: #fff; }
.nb .nb-enlace::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
border-radius: 2px;
background: var(--accent-pink);
opacity: 0;
transform: scaleX(.4);
transition: opacity .15s, transform .15s;
}
.nb .nb-enlace.active { color: var(--accent-pink-texto); font-weight: 600; }
.nb .nb-enlace.active::after { opacity: 1; transform: none; }
.nb .nb-enlace:hover::after { opacity: .45; transform: none; }
.nb .nb-grupo-boton .nb-ico { opacity: .6; transition: transform .15s; }
.nb .nb-grupo.abierto .nb-grupo-boton .nb-ico { transform: rotate(180deg); }
.nb .nb-insignia {
position: absolute;
top: 7px;
right: -12px;
display: inline-grid;
place-items: center;
min-width: 18px;
height: 16px;
padding: 0 3px;
border-radius: 0;
background: var(--danger);
color: #1a0508;
font-family: var(--font-pixel);
font-size: 8px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
box-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
pointer-events: none;
}
.nb-grupo, .nb-cuenta { position: relative; display: flex; align-items: stretch; }
.nb-cuenta { align-items: center; }
.nb-desplegable, .nb-cuenta-menu {
position: absolute;
top: calc(100% - 6px);
min-width: 220px;
padding: 8px;
background: var(--nb-panel);
border: 1px solid var(--nb-borde);
border-radius: 10px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
z-index: 10;
}
.nb-desplegable {
left: 50%;
translate: -50% 0;
opacity: 0;
visibility: hidden;
transition: opacity .15s, visibility .15s;
}
.nb-grupo.abierto .nb-desplegable { opacity: 1; visibility: visible; }
.nb-cuenta-menu { right: 0; top: calc(100% + 12px); min-width: 230px; }
.nb-cuenta-menu[hidden] { display: none; }
.nb .nb-opcion {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 0;
border-radius: 6px;
background: none;
color: var(--nb-texto);
font-size: 16px;
font-weight: 500;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.nb .nb-opcion:hover, .nb .nb-opcion:focus-visible { background: rgba(0, 245, 212, .1); color: #fff; }
.nb .nb-opcion.active { color: var(--accent-pink-texto); }
.nb-opcion-icono { display: inline-grid; place-items: center; width: 20px; color: var(--nb-cian); flex: none; }
.nb .nb-salir { color: var(--nb-texto-2); border-top: 1px solid var(--nb-borde); border-radius: 0 0 6px 6px; margin-top: 6px; }
.nb .nb-cuenta-nombre {
margin: 4px 12px 8px;
font-size: 14px;
font-weight: 600;
color: var(--nb-texto-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nb-acciones {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 22px;
}
.nb-buscar { position: relative; width: 44px; height: 44px; flex: none; }
.nb .nb-icono {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 8px;
background: none;
color: var(--nb-texto);
cursor: pointer;
}
.nb .nb-icono:hover:not(:disabled), .nb-buscar.abierto .nb-icono { color: var(--nb-cian); background: rgba(0, 245, 212, .08); }
.nb .nb-icono:disabled { cursor: default; }
.nb-divisor {
flex: none;
width: 1px;
height: 28px;
background: var(--nb-borde);
}
.nb .nb-acceso {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 0 4px;
color: var(--nb-texto);
font-size: 17px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.nb .nb-acceso-icono {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
color: var(--nb-cian);
background: radial-gradient(circle at 50% 35%, #16305c, #0b1636 72%);
box-shadow: 0 0 0 2px #2f63c5;
}
.nb .nb-acceso:hover { color: var(--nb-cian); }
.nb .nb-acceso.active { color: var(--accent-pink-texto); font-weight: 600; }
.nb .nb-acceso.active .nb-acceso-icono { color: var(--accent-pink-texto); box-shadow: 0 0 0 2px var(--accent-pink); }
.nb .nb-saldo { font-weight: 600; }
.nb-buscar-caja {
position: absolute;
top: 0;
right: 0;
z-index: 20;
display: flex;
align-items: center;
width: 44px;
height: 44px;
margin: 0;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
transition: width .34s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nb-buscar.abierto .nb-buscar-caja {
width: var(--nb-buscar-ancho, min(460px, calc(100vw - 48px)));
background: #081122;
border-color: var(--nb-cian);
box-shadow: 0 0 0 3px rgba(0, 245, 212, .16), 0 14px 34px rgba(0, 0, 0, .45);
}
.nb .nb-buscar-lupa { flex: none; transition: color .2s ease, background-color .2s ease; }
.nb-buscar.abierto .nb .nb-buscar-lupa,
.nb .nb-buscar.abierto .nb-buscar-lupa { width: 42px; height: 42px; background: none; color: var(--nb-cian); }
.nb .nb-buscar-campo {
flex: 1;
min-width: 0;
height: 100%;
padding: 0 4px 0 2px;
border: 0;
background: none;
color: var(--nb-texto);
font-size: 16px;
outline: none;
opacity: 0;
visibility: hidden;
transition: opacity .12s ease, visibility 0s linear .34s;
}
.nb-buscar.abierto .nb-buscar-campo { opacity: 1; visibility: visible; transition: opacity .2s ease .14s, visibility 0s; }
.nb .nb-buscar-campo::placeholder { color: #7f8ca3; }
.nb .nb-buscar-caja .nb-buscar-campo,
.nb .nb-buscar-caja .nb-buscar-campo:focus,
.nb .nb-buscar-caja .nb-buscar-campo:focus-visible { border: 0; outline: none; box-shadow: none; background: none; }
.nb .nb-buscar-caja .nb-buscar-campo:focus-visible { outline: none !important; box-shadow: none !important; }
.nb-enlaces { transition: opacity .2s ease; }
.nb-interior:has(.nb-buscar.abierto) .nb-enlaces { opacity: 0; pointer-events: none; }
.nb .nb-buscar-campo::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nb .nb-buscar-cerrar {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin-right: 4px;
border: 0;
border-radius: 8px;
background: none;
color: var(--nb-texto-2);
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity .12s ease, visibility 0s linear .34s;
}
.nb-buscar.abierto .nb-buscar-cerrar { opacity: 1; visibility: visible; transition: opacity .2s ease .14s, visibility 0s; }
.nb .nb-buscar-cerrar:hover { color: var(--nb-cian); background: rgba(0, 245, 212, .08); }
.nb .nb-buscar-cerrar:focus-visible, .nb .nb-buscar-lupa:focus-visible { outline: 2px solid var(--nb-cian); outline-offset: -2px; }
.nb-buscar-panel {
position: absolute;
top: calc(100% + 10px);
left: -1px;
right: -1px;
padding: 8px;
background: var(--nb-panel);
border: 1px solid var(--nb-borde);
border-radius: 10px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
animation: nb-buscar-panel .22s ease .1s both;
}
.nb-buscar-panel[hidden] { display: none; }
@keyframes nb-buscar-panel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nb-buscar-resultados {
max-height: min(62vh, 560px);
overflow-y: auto;
overscroll-behavior: contain;
}
.nb-buscar-resultados[hidden] { display: none; }
.nb-buscar-resultados :where(.nsr-title, .nsr-meta, .nsr-empty, .nsr-grupo) { font-family: var(--nb-letra); }
.nb-buscar-resultados .nsr-title { font-size: 15px; color: var(--nb-texto); }
.nb-buscar-resultados .nsr-row:hover,
.nb-buscar-resultados .nsr-row:focus-visible { background: rgba(0, 245, 212, .1); outline: none; box-shadow: inset 2px 0 0 var(--nb-cian); }
.nb-buscar-resultados .nsr-grupo {
margin: 10px 10px 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--nb-texto-2);
}
.nb-buscar-resultados .nsr-grupo:first-child { margin-top: 4px; }
.nb-buscar-resultados .nsr-ico {
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
border-radius: 6px;
background: rgba(0, 245, 212, .08);
color: var(--nb-cian);
}
.nb-buscar-resultados .nsr-row--mercado .nsr-ico { background: rgba(0, 245, 212, .14); }
.nb-buscar-resultados .nsr-mercado { display: inline-flex; align-items: center; gap: 3px; color: var(--nb-cian); }
.nb-buscar-resultados .nsr-row--todo {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
border-top: 1px solid var(--nb-borde);
font-family: var(--nb-letra);
font-size: 14px;
color: var(--nb-cian);
}
@media (prefers-reduced-motion: reduce) {
.nb-buscar-caja, .nb .nb-buscar-campo, .nb .nb-buscar-cerrar, .nb .nb-buscar-lupa { transition: none !important; }
.nb-buscar-panel { animation: none; }
}
.nb-oculto {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.nb .nb-buscar-pista,
.nb .nb-buscar-aviso {
margin: 8px 4px 2px;
font-family: var(--nb-letra);
font-size: 13px;
line-height: 1.4;
color: var(--nb-texto-2);
}
.nb .nb-buscar-aviso { color: var(--nb-texto); }
.nb .nb-buscar-aviso[hidden] { display: none; }
.nb .nb-buscar-pista kbd {
margin-right: 2px;
padding: 1px 6px;
border: 1px solid var(--nb-borde);
border-radius: 4px;
font-family: inherit;
font-size: 12px;
color: var(--nb-texto);
}
.nb .nb-boton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 26px;
border-radius: 6px;
font-size: 18px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background .15s, color .15s, border-color .15s;
}
.nb .nb-boton--borde { border: 1.5px solid #cfd8e6; color: var(--nb-texto); }
.nb .nb-boton--borde:hover { border-color: var(--nb-cian); color: var(--nb-cian); }
.nb .nb-boton--lleno { background: var(--nb-cian-fuerte); color: #03141c; font-weight: 600; border: 1.5px solid var(--nb-cian-fuerte); }
.nb .nb-boton--lleno:hover { background: #7af0fa; border-color: #7af0fa; }
.nb .nb-monedas {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 0 16px;
border: 1px solid #33425d;
border-radius: 8px;
color: var(--nb-texto);
font-size: 16px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.nb .nb-monedas:hover { border-color: var(--nb-cian); }
.nb .nb-monedas span { font-family: var(--nb-letra); }
.nb .nb-monedas.gano { animation: nb-brillo .9s ease-out; }
@keyframes nb-brillo {
0% { box-shadow: 0 0 0 0 rgba(0, 245, 212, .7); border-color: var(--nb-cian); }
100% { box-shadow: 0 0 0 10px rgba(0, 245, 212, 0); }
}
.nb .nb-cuenta-boton {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 4px;
border: 0;
background: none;
color: var(--nb-texto);
cursor: pointer;
}
.nb .nb-avatar {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 50% 35%, #1c3b8a, #0b1636 72%);
box-shadow: 0 0 0 2px #2f63c5, 0 0 12px rgba(47, 99, 197, .45);
font-size: 18px;
font-weight: 700;
color: #fff;
}
.nb .nb-avatar svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.nb .nb-hamburguesa {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: none;
cursor: pointer;
}
.nb-hamburguesa span {
display: block;
height: 2px;
border-radius: 2px;
background: var(--nb-texto);
transition: transform .2s, opacity .2s;
}
.nb-hamburguesa.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nb-hamburguesa.open span:nth-child(2) { opacity: 0; }
.nb-hamburguesa.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nb-movil {
display: none;
position: absolute;
top: calc(100% + 8px);
left: -1px;
right: -1px;
max-height: calc(100vh - var(--navbar-height) - 24px);
max-height: calc(100dvh - var(--navbar-height) - 24px);
border: 1px solid var(--nb-borde);
border-radius: 16px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
overflow-y: auto;
overscroll-behavior: contain;
padding: 12px 16px 32px;
background: #0a1427;
border-top: 1px solid var(--nb-borde);
}
.nb-movil-bloque { display: flex; flex-direction: column; gap: 2px; }
.nb-movil-cuenta {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--nb-borde);
}
.nb .nb-movil-enlace {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 50px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: none;
color: var(--nb-texto);
font-size: 17px;
font-weight: 500;
text-align: left;
text-decoration: none;
cursor: pointer;
list-style: none;
}
.nb .nb-movil-enlace::-webkit-details-marker { display: none; }
.nb .nb-movil-enlace:hover { background: rgba(0, 245, 212, .08); }
.nb .nb-movil-enlace.active { color: var(--accent-pink-texto); background: rgba(247, 37, 133, .08); }
.nb .nb-movil-grupo summary .nb-ico { margin-left: auto; opacity: .6; transition: transform .15s; }
.nb .nb-movil-grupo[open] summary .nb-ico { transform: rotate(180deg); }
.nb-movil-hijos { padding-left: 34px; }
.nb .nb-movil-cuenta .nb-boton { width: 100%; margin-top: 8px; }
@media (max-width: 1440px) {
.nb .nb-logo { font-size: 20px; }
.nb-enlaces { gap: 22px; }
.nb-acciones { gap: 16px; }
}
@media (max-width: 1360px) {
.nb .nb-logo { font-size: 18px; }
.nb .nb-enlace { font-size: 15px; }
.nb-enlaces { gap: 18px; }
}
@media (max-width: 1260px) {
.nb-enlaces { display: none; }
.nb .nb-hamburguesa { display: flex; }
.nb-movil.open { display: block; }
}
@media (max-width: 640px) {
:root { --nb-alto: 58px; --nb-margen: 8px; --nb-lado: 8px; }
.nb { border-radius: 14px; }
.nb-interior { gap: 6px; }
.nb .nb-logo { font-size: clamp(10px, calc((100vw - 230px) / 9), 16px); }
.nb-izquierda { gap: 6px; }
.nb .nb-atras { min-height: 36px; width: 36px; padding: 0; justify-content: center; }
.nb .nb-atras-texto { display: none; }
.nb-acciones { gap: 2px; }
.nb .nb-icono, .nb-buscar, .nb .nb-hamburguesa { width: 40px; height: 40px; }
.nb .nb-hamburguesa { padding: 0 9px; }
.nb .nb-acceso { padding: 0 1px; }
.nb-izquierda:has(.nb-atras:not([hidden])) .nb-logo { font-size: clamp(10px, calc((100vw - 272px) / 9), 16px); }
.nb-divisor { display: none; }
.nb .nb-acceso-texto { display: none; }
.nb .nb-acceso-icono, .nb .nb-avatar { width: 38px; height: 38px; }
.nb .nb-cuenta-boton .nb-ico { display: none; }
.nb-buscar.abierto .nb-buscar-caja {
position: fixed;
top: 50%;
left: 6px;
right: 6px;
width: auto;
transform: translateY(-50%);
animation: nb-buscar-movil .26s cubic-bezier(.2, .8, .2, 1) backwards;
}
@keyframes nb-buscar-movil { from { clip-path: inset(0 0 0 calc(100% - 52px) round 10px); } to { clip-path: inset(0 0 0 0 round 10px); } }
.nb-buscar.abierto .nb-buscar-panel { position: fixed; top: calc(100% + 14px); left: 0; right: 0; }
}
@media (max-width: 359px) {
.nb-izquierda:has(.nb-atras:not([hidden])) .nb-logo { display: none; }
}
.nb .nb-movil-saldo {
margin-left: auto;
font-size: 14px;
font-weight: 600;
color: var(--nb-texto-2);
}
.pie {
position: relative;
z-index: 2;
margin-top: var(--space-2xl, 48px);
background: var(--bg-sunken);
border-top: 1px solid var(--border);
color: var(--text-secondary);
}
.pie :where(a, p, span, h2, li) { font-family: var(--font-ui); letter-spacing: normal; text-transform: none; }
.pie :focus-visible { outline: 2px solid var(--accent-cyan) !important; outline-offset: 3px !important; box-shadow: none !important; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie-oculto {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.pie-interior {
display: grid;
grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(0, 1fr));
gap: 40px;
max-width: calc(var(--contenedor) + 2 * var(--contenedor-lado));
margin: 0 auto;
padding: 48px var(--contenedor-lado) 36px;
}
.pie .pie-logo {
display: inline-flex;
font-family: var(--font-pixel);
font-size: 20px;
line-height: 1;
color: var(--accent-cyan);
text-decoration: none;
}
.pie .pie-logo span { font-family: inherit; }
.pie .pie-logo span + span { color: var(--accent-pink); }
.pie .pie-lema {
margin: 16px 0 0;
max-width: 32ch;
font-size: 15px;
line-height: 1.5;
color: var(--text-secondary);
}
.pie .pie-discord {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 20px;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-control);
color: var(--text-primary);
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.pie .pie-discord:hover { border-color: var(--accent-cyan); color: var(--text-primary); }
.pie .pie-ico { width: 20px; height: 20px; }
.pie .pie-red .red-ico-instagram { width: 20px; height: 20px; color: var(--accent-pink-texto); }
.pie .pie-red:hover { border-color: var(--accent-pink); }
.pie .pie-titulo {
margin: 4px 0 18px;
font-family: var(--font-pixel);
font-size: 9px;
font-weight: 400;
line-height: 1.6;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-muted);
}
.pie-columna li + li { margin-top: 10px; }
.pie .pie-enlace {
display: inline-block;
font-size: 15px;
color: var(--text-secondary);
text-decoration: none;
}
.pie .pie-enlace:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }
.pie-bajo {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 32px;
max-width: calc(var(--contenedor) + 2 * var(--contenedor-lado));
margin: 0 auto;
padding: 18px max(var(--contenedor-lado), 88px) 22px var(--contenedor-lado);
background: linear-gradient(var(--border), var(--border)) var(--contenedor-lado) 0 / calc(100% - 2 * var(--contenedor-lado)) 1px no-repeat;
}
.pie .pie-copy { margin: 0; font-size: 14px; color: var(--text-secondary); }
.pie-legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pie .pie-legal .pie-enlace { font-size: 14px; }
.pie-barra { color: var(--border-strong); }
.pie .pie-creditos {
margin: 0;
max-width: 600px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
text-align: right;
}
.pie .pie-creditos .pie-enlace { font-size: inherit; color: var(--text-secondary); text-decoration: underline; }
@media (max-width: 1024px) {
.pie-interior { grid-template-columns: 1fr 1fr 1fr; }
.pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.pie-interior { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 36px; }
.pie-bajo { flex-direction: column; align-items: flex-start; }
.pie .pie-creditos { text-align: left; }
}
@media (hover: none) {
.nb .nb-buscar-pista { display: none; }
.nb-buscar-panel:not(:has(.nb-buscar-resultados:not([hidden]), .nb-buscar-aviso:not([hidden]))) { display: none; }
}
/* /src/styles/idioma.css */
.nb-idioma { position: relative; display: flex; align-items: center; }
.nb .nb-idioma-boton {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 12px 0 10px;
border: 1px solid var(--nb-borde);
border-radius: 999px;
background: rgba(255, 255, 255, .04);
color: var(--nb-texto);
font: 500 15px/1 var(--nb-letra);
cursor: pointer;
transition: background .15s, border-color .15s;
}
.nb .nb-idioma-boton:hover,
.nb-idioma.abierto .nb-idioma-boton { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .32); }
.nb-bandera { display: block; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.nb-bandera--redonda { border-radius: 50%; }
.nb-idioma-flecha { color: var(--nb-texto-2); transition: transform .15s; }
.nb-idioma.abierto .nb-idioma-flecha { transform: rotate(180deg); }
.nb-idioma-menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
min-width: 210px;
padding: 6px;
background: var(--nb-panel);
border: 1px solid var(--nb-borde);
border-radius: 12px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
z-index: 10;
}
.nb-idioma-menu[hidden] { display: none; }
.nb .nb-idioma-opcion {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: none;
color: var(--nb-texto);
font: 500 15px/1.2 var(--nb-letra);
text-align: left;
cursor: pointer;
}
.nb .nb-idioma-opcion:hover, .nb .nb-idioma-opcion:focus-visible { background: rgba(255, 255, 255, .07); }
.nb-idioma-nombre { flex: 1; }
.nb-idioma-corto { font-size: 12px; font-weight: 600; color: var(--nb-texto-2); letter-spacing: .06em; }
.nb-idioma-marca { visibility: hidden; color: var(--accent-pink-texto); }
.nb .nb-idioma-opcion[aria-checked="true"] { font-weight: 600; }
.nb .nb-idioma-opcion[aria-checked="true"] .nb-idioma-marca { visibility: visible; }
.nb .nb-idioma-movil { display: flex; flex-direction: row; gap: 8px; margin-top: 8px; }
.nb .nb-idioma-movil-opcion {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-height: 64px;
padding: 10px 4px;
border: 1px solid var(--nb-borde);
border-radius: 10px;
background: rgba(255, 255, 255, .03);
color: var(--nb-texto);
font: 500 14px/1 var(--nb-letra);
cursor: pointer;
}
.nb .nb-idioma-movil-opcion[aria-pressed="true"] { border-color: var(--accent-pink); background: rgba(255, 255, 255, .07); font-weight: 600; }
@media (min-width: 641px) { .nb .nb-idioma-movil { display: none; } }
@media (max-width: 640px) { .nb-idioma { display: none; } }
html.i18n-cargando #page-content, html.i18n-cargando .nb-interior { visibility: hidden; }
html[lang="fr"] .legal-doc-cuerpo::before,
html[lang="en-GB"] .legal-doc-cuerpo::before {
display: block;
margin-bottom: 16px;
padding: 10px 14px;
border: 1px solid var(--border-strong);
border-radius: 8px;
color: var(--text-secondary);
font-size: 14px;
}
html[lang="fr"] .legal-doc-cuerpo::before { content: "Ce texte juridique n’est disponible qu’en espagnol, la version qui fait foi."; }
html[lang="en-GB"] .legal-doc-cuerpo::before { content: "This legal text is only available in Spanish, which is the binding version."; }
@media (max-width: 1680px) {
.nb .nb-idioma-boton { padding: 0 8px; gap: 6px; }
.nb-idioma-codigo { display: none; }
}
@media (min-width: 1261px) and (max-width: 1360px) {
html[lang="fr"] .nb-enlaces { display: none; }
html[lang="fr"] .nb .nb-hamburguesa { display: flex; }
html[lang="fr"] .nb-movil.open { display: block; }
}