/* Bloqueo de scroll propio. Va en y no en el body a proposito:
Bootstrap se guarda body.style.overflow al abrir un modal y lo
restaura al cerrarlo, y con eso la pagina se quedaba trabada. */
html.gcb-sin-scroll { overflow: hidden !important; }
/* ==========================================================================
Gladius Custom Bajio - capa premium (agosto 2026)
Portada: presentacion con logo, pase cinematografico de las motos y
acomodo final en zigzag a dos columnas.
Se monta ENCIMA de lo existente: no se toca el HTML del catalogo, asi que
el filtro de precio, el buscador y los videos al pasar el mouse siguen
funcionando igual. Los enganches que usa el JS del sitio y que aqui se
respetan son .moto-card-wrapper[data-precio], .moto-hover-wrap[data-vid]
y #botonesContactoGrid.
========================================================================== */
:root {
--gcb-ambar: #ff8c00;
--gcb-ambar-claro: #ffb347;
--gcb-negro: #000;
--gcb-carta: #121212;
--gcb-carta-alta: #191919;
--gcb-linea: #262626;
--gcb-texto: #c9c9c9;
--gcb-apagado: #8a8a8a;
}
/* ==========================================================================
1. Presentacion inicial con el logo
========================================================================== */
#gcbIntro {
position: fixed;
inset: 0;
z-index: 99999;
background: radial-gradient(ellipse at 50% 45%, #141414 0%, #000 70%);
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity .75s ease;
}
#gcbIntro.gcb-fuera {
opacity: 0;
pointer-events: none;
}
.gcb-intro-in {
text-align: center;
padding: 0 24px;
transform: scale(.94);
opacity: 0;
animation: gcbEntraLogo 1.1s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes gcbEntraLogo {
to { transform: scale(1); opacity: 1; }
}
.gcb-intro-logo {
width: clamp(150px, 26vw, 260px);
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 12px 40px rgba(255, 140, 0, .18));
}
/* El logo de la marca ya trae su propio texto: el nuestro solo se muestra
cuando se cae al respaldo del casco suelto. */
.gcb-intro-wordmark { display: none; }
#gcbIntro.gcb-respaldo .gcb-intro-wordmark {
display: block;
margin-top: 18px;
}
#gcbIntro.gcb-respaldo .gcb-intro-logo {
filter: brightness(0) invert(1) drop-shadow(0 12px 40px rgba(255, 140, 0, .2));
}
.gcb-intro-wordmark span {
display: block;
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: clamp(1.9rem, 6vw, 3.2rem);
letter-spacing: .22em;
color: #fff;
line-height: 1;
text-indent: .22em;
}
.gcb-intro-wordmark em {
display: block;
margin-top: 6px;
font-style: normal;
font-family: 'Rajdhani', sans-serif;
font-weight: 600;
font-size: clamp(.72rem, 2.2vw, 1rem);
letter-spacing: .46em;
color: var(--gcb-ambar);
text-indent: .46em;
}
.gcb-intro-barra {
width: min(210px, 52vw);
height: 2px;
margin: 26px auto 0;
background: rgba(255, 255, 255, .12);
overflow: hidden;
}
.gcb-intro-barra i {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, transparent, var(--gcb-ambar), transparent);
animation: gcbBarra 1.5s ease-in-out forwards;
}
@keyframes gcbBarra {
to { width: 100%; }
}
/* ==========================================================================
2. Pase cinematografico de las motos
========================================================================== */
#gcbPase {
position: relative;
display: none;
min-height: min(74vh, 640px);
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 140, 0, .07) 0%, transparent 62%),
var(--gcb-negro);
overflow: hidden;
border-bottom: 1px solid var(--gcb-linea);
}
#gcbPase.gcb-activo { display: block; }
.gcb-pase-lienzo {
position: relative;
max-width: 1240px;
margin: 0 auto;
padding: 34px 22px 70px;
min-height: min(74vh, 640px);
}
.gcb-toma {
position: absolute;
inset: 34px 22px 70px;
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 38px;
align-items: center;
opacity: 0;
transform: translateY(16px) scale(.985);
transition: opacity .85s ease, transform .85s cubic-bezier(.2, .8, .3, 1);
pointer-events: none;
}
.gcb-toma.gcb-visible {
opacity: 1;
transform: none;
}
.gcb-toma-foto {
position: relative;
border-radius: 4px;
overflow: hidden;
background: #0a0a0a;
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95);
}
.gcb-toma-foto::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.gcb-toma-foto img {
width: 100%;
height: clamp(260px, 44vh, 430px);
object-fit: cover;
display: block;
transform: scale(1.06);
transition: transform 3.4s ease-out;
}
.gcb-toma.gcb-visible .gcb-toma-foto img { transform: scale(1); }
.gcb-toma-datos { text-align: left; }
.gcb-toma-eyebrow {
font-family: 'Rajdhani', sans-serif;
font-size: .68rem;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--gcb-ambar);
margin-bottom: 10px;
}
.gcb-toma-titulo {
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: clamp(1.5rem, 3.4vw, 2.55rem);
line-height: 1.1;
color: #fff;
margin: 0 0 14px;
letter-spacing: .01em;
}
.gcb-toma-precio {
display: inline-block;
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: clamp(1.05rem, 2.2vw, 1.5rem);
color: #000;
background: linear-gradient(135deg, var(--gcb-ambar-claro), var(--gcb-ambar));
padding: .3rem 1.15rem;
margin-bottom: 18px;
}
.gcb-toma-specs {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-bottom: 6px;
}
.gcb-toma-specs span {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .84rem;
color: var(--gcb-texto);
}
.gcb-toma-specs i { color: var(--gcb-ambar); font-size: .78rem; }
/* Marcadores de progreso y salida */
.gcb-pase-pie {
position: absolute;
left: 22px;
right: 22px;
bottom: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.gcb-puntos { display: flex; gap: 6px; flex-wrap: wrap; }
.gcb-puntos b {
width: 22px;
height: 2px;
background: rgba(255, 255, 255, .16);
display: block;
transition: background .3s ease;
}
.gcb-puntos b.gcb-on { background: var(--gcb-ambar); }
.gcb-saltar {
font-family: 'Rajdhani', sans-serif;
font-weight: 600;
font-size: .74rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gcb-apagado);
background: transparent;
border: 1px solid var(--gcb-linea);
padding: .48rem 1.1rem;
cursor: pointer;
transition: color .25s, border-color .25s;
white-space: nowrap;
}
.gcb-saltar:hover { color: var(--gcb-ambar); border-color: var(--gcb-ambar); }
@media (max-width: 860px) {
.gcb-toma {
grid-template-columns: 1fr;
gap: 18px;
align-content: start;
}
.gcb-toma-foto img { height: clamp(190px, 30vh, 260px); }
#gcbPase, .gcb-pase-lienzo { min-height: 0; }
.gcb-toma { position: relative; inset: auto; }
.gcb-toma:not(.gcb-visible) { display: none; }
.gcb-pase-pie { position: static; margin-top: 20px; }
}
/* ==========================================================================
2.5 Interruptor de vista (editorial <-> baraja)
========================================================================== */
#gcbVistaBarra {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
max-width: 1760px;
margin: 0 auto;
padding: 18px 20px 0;
}
.gcb-switch {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
margin: 0;
}
.gcb-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.gcb-switch-pista {
position: relative;
width: 50px;
height: 26px;
border-radius: 999px;
background: #191919;
border: 1px solid var(--gcb-linea);
transition: background .3s ease, border-color .3s ease;
flex-shrink: 0;
}
.gcb-switch-pista i {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #6b6b6b;
transition: transform .3s cubic-bezier(.2, .8, .3, 1), background .3s ease;
}
.gcb-switch input:checked + .gcb-switch-pista {
background: rgba(255, 140, 0, .18);
border-color: var(--gcb-ambar);
}
.gcb-switch input:checked + .gcb-switch-pista i {
transform: translateX(24px);
background: var(--gcb-ambar);
}
.gcb-switch input:focus-visible + .gcb-switch-pista {
outline: 2px solid var(--gcb-ambar);
outline-offset: 3px;
}
.gcb-switch-txt {
font-family: 'Rajdhani', sans-serif;
font-weight: 600;
font-size: .82rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gcb-apagado);
transition: color .25s ease;
}
.gcb-switch:hover .gcb-switch-txt,
.gcb-switch input:checked ~ .gcb-switch-txt { color: var(--gcb-ambar); }
.gcb-switch-conteo {
font-family: 'Rajdhani', sans-serif;
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: #5f5f5f;
}
@media (max-width: 575.98px) {
#gcbVistaBarra { padding: 14px 12px 0; gap: 10px; }
.gcb-switch-txt { font-size: .72rem; letter-spacing: .1em; }
.gcb-switch-conteo { display: none; }
}
/* ==========================================================================
2.6 Vista de baraja: cartas en abanico, mismo estilo que motos vendidas
Las cartas salen del interruptor y se acomodan en arco. Todas miden
igual a proposito: con alturas distintas el agrupado por filas se
vuelve inestable y el arco sale torcido (leccion de motos vendidas).
========================================================================== */
.moto-grid.gcb-baraja {
--porFila: 6;
--solape: 44px;
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
max-width: 1760px;
margin: 0 auto !important;
padding: 46px 20px 30px calc(20px + var(--solape)) !important;
row-gap: 34px;
}
.moto-grid.gcb-baraja > [class*="col-"] {
max-width: none !important;
padding: 0 !important;
}
.moto-grid.gcb-baraja > .moto-card-wrapper {
--rot: 0deg;
--dy: 0px;
flex: 0 0 calc((100% + (var(--porFila) - 1) * var(--solape)) / var(--porFila)) !important;
width: auto !important;
height: 336px;
margin: 0 0 0 calc(-1 * var(--solape)) !important;
opacity: 1;
transform: rotate(var(--rot)) translateY(var(--dy));
transform-origin: 50% 100%;
transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .4s ease;
will-change: transform;
}
/* Punto de partida: la carta sale del interruptor.
transition:none la coloca ahi sin animar; al quitarle la clase, la
transicion normal la lleva a su sitio del abanico. */
.moto-grid.gcb-baraja > .moto-card-wrapper.gcb-desde-boton {
transform: translate(var(--bx, 0), var(--by, -160px)) rotate(-14deg) scale(.8);
opacity: 0;
transition: none;
}
/* Al apagar el interruptor las cartas se juntan y regresan al boton.
Misma posicion final que la de partida, pero SI se anima. */
.moto-grid.gcb-baraja > .moto-card-wrapper.gcb-recoger {
transform: translate(var(--bx, 0), var(--by, -160px)) rotate(-14deg) scale(.78);
opacity: 0;
z-index: 300 !important;
}
/* Al pasar el mouse se endereza, sube y pasa al frente */
.moto-grid.gcb-baraja > .moto-card-wrapper:hover,
.moto-grid.gcb-baraja > .moto-card-wrapper:focus-within {
transform: rotate(0deg) translateY(-38px) scale(1.06);
z-index: 200 !important;
}
.moto-grid.gcb-baraja .card {
height: 100% !important;
display: flex !important;
flex-direction: column;
background: linear-gradient(165deg, var(--gcb-carta-alta), var(--gcb-carta)) !important;
border: 1px solid var(--gcb-linea) !important;
border-radius: 8px !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
transition: border-color .3s ease, box-shadow .3s ease;
}
.moto-grid.gcb-baraja > .moto-card-wrapper:hover .card,
.moto-grid.gcb-baraja > .moto-card-wrapper:focus-within .card {
border-color: var(--gcb-ambar) !important;
box-shadow: 0 26px 52px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 140, 0, .3);
}
.moto-grid.gcb-baraja .moto-card-img { height: 150px !important; }
.moto-grid.gcb-baraja .card > .px-2 { padding: .55rem .7rem .1rem !important; }
.moto-grid.gcb-baraja .moto-card-title {
font-family: 'Rajdhani', sans-serif;
font-size: .92rem !important;
line-height: 1.25;
color: var(--gcb-ambar) !important;
text-shadow: none !important;
margin-bottom: 0 !important;
/* Recortado a 2 lineas para que todas las cartas midan igual */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.5em;
}
.moto-grid.gcb-baraja .moto-card-body {
padding: .55rem .7rem .7rem !important;
flex: 1;
display: flex;
flex-direction: column;
}
.moto-grid.gcb-baraja .moto-card-body > div[style*="text-align:right"] { margin-top: auto; }
.moto-grid.gcb-baraja .precio-liston {
font-family: 'Rajdhani', sans-serif;
font-size: .88rem !important;
padding: .2rem 1rem .2rem .7rem !important;
box-shadow: none;
}
.moto-grid.gcb-baraja .moto-specs-row { gap: 4px !important; margin-bottom: .5rem !important; }
.moto-grid.gcb-baraja .moto-specs-row span { font-size: .62rem !important; }
.moto-grid.gcb-baraja .moto-card-body a[href^="../moto/"] {
font-family: 'Rajdhani', sans-serif;
font-size: .7rem !important;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: .34rem 1rem !important;
border-radius: 2px !important;
background: linear-gradient(135deg, var(--gcb-ambar-claro), var(--gcb-ambar)) !important;
}
/* Los botones de contacto salen del abanico y van como franja aparte */
.moto-grid.gcb-baraja > #botonesContactoGrid {
flex: 0 0 100% !important;
height: auto;
margin: 26px 0 0 calc(-1 * var(--solape)) !important;
padding: 0 !important;
}
.moto-grid.gcb-baraja > #botonesContactoGrid > .h-100 {
flex-direction: row !important;
gap: 14px !important;
max-width: 760px;
margin: 0 auto;
}
.moto-grid.gcb-baraja > #botonesContactoGrid a { min-height: 92px; }
/* Tablet: menos cartas por fila */
@media (min-width: 768px) and (max-width: 1199.98px) {
.moto-grid.gcb-baraja { --porFila: 4; --solape: 36px; }
}
/* Celular: sin abanico, dos columnas planas */
@media (max-width: 767.98px) {
.moto-grid.gcb-baraja {
--solape: 0px;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 14px 12px 18px !important;
}
.moto-grid.gcb-baraja > .moto-card-wrapper {
flex: none !important;
width: auto !important;
height: 296px;
margin: 0 !important;
transform: none !important;
}
.moto-grid.gcb-baraja > .moto-card-wrapper:hover { transform: translateY(-4px) !important; }
.moto-grid.gcb-baraja .moto-card-img { height: 112px !important; }
.moto-grid.gcb-baraja .moto-card-title { font-size: .78rem !important; }
.moto-grid.gcb-baraja > #botonesContactoGrid {
grid-column: 1 / -1;
margin: 14px 0 0 !important;
}
.moto-grid.gcb-baraja > #botonesContactoGrid > .h-100 { flex-direction: column !important; }
}
/* ==========================================================================
3. Acomodo final: reticula editorial
Dos motos por fila y, cada cinco, una a pagina completa. Ese ritmo
(una grande, dos pares, otra grande) es el de una revista y evita la
monotonia de que todas midan igual. La informacion va SOBRE la foto.
========================================================================== */
.moto-grid.gcb-vitrina {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
max-width: 1760px;
margin: 0 auto !important;
padding: 22px 20px !important;
}
/* Neutralizar las columnas de Bootstrap sin tocar el HTML */
.moto-grid.gcb-vitrina > [class*="col-"] {
width: auto !important;
max-width: none !important;
flex: none !important;
padding: 0 !important;
}
.moto-grid.gcb-vitrina > .moto-card-wrapper {
display: block;
margin: 0 !important;
opacity: 0;
transform: translateY(26px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .3, 1);
}
/* La destacada de cada bloque de cinco abarca las dos columnas */
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) {
grid-column: 1 / -1;
}
.moto-grid.gcb-vitrina > .moto-card-wrapper.gcb-puesta {
opacity: 1;
transform: none;
}
/* Los botones de contacto quedan como una franja al final */
.moto-grid.gcb-vitrina > #botonesContactoGrid {
grid-column: 1 / -1;
padding: 26px 0 10px !important;
background: transparent;
}
.moto-grid.gcb-vitrina > #botonesContactoGrid > .h-100 {
flex-direction: row !important;
gap: 22px !important;
max-width: 1100px;
margin: 0 auto;
}
.moto-grid.gcb-vitrina > #botonesContactoGrid a { min-height: 118px; }
/* ==========================================================================
4. La tarjeta convertida en panel editorial
========================================================================== */
.moto-grid.gcb-vitrina .card {
position: relative;
display: flex !important;
flex-direction: column;
justify-content: flex-end; /* el texto se apoya abajo */
/* !important obligatorio: la tarjeta lleva la clase h-100 de Bootstrap,
que define height:100% !important. */
height: min(56vh, 500px) !important;
background: #000 !important;
border: 0 !important;
border-radius: 3px !important;
overflow: hidden;
}
/* La destacada respira mas */
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) .card {
height: min(74vh, 660px) !important;
}
/* La fotografia ocupa todo el panel, por detras del texto */
.moto-grid.gcb-vitrina .moto-hover-wrap {
/* !important obligatorio: el div trae position-relative de Bootstrap. */
position: absolute !important;
inset: 0;
overflow: hidden;
}
.moto-grid.gcb-vitrina .moto-card-img {
width: 100%;
height: 100% !important;
object-fit: cover;
transition: transform 1.1s cubic-bezier(.2, .8, .3, 1);
}
.moto-grid.gcb-vitrina .card:hover .moto-card-img { transform: scale(1.04); }
.moto-grid.gcb-vitrina .moto-vid-overlay { inset: 0; }
/* Velo oscuro para que el texto siempre se lea sobre la foto.
Va en z-index 2: encima de la imagen y debajo del texto (3) y de las
cintas de OFERTA/APARTADA, que conservan su z-index 10. */
.moto-grid.gcb-vitrina .card::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 22%, rgba(0,0,0,.15) 52%, transparent 72%),
linear-gradient(to right, rgba(0,0,0,.55) 0%, transparent 48%);
}
/* Titulo y cuerpo se montan sobre la foto */
.moto-grid.gcb-vitrina .card > .px-2,
.moto-grid.gcb-vitrina .moto-card-body {
position: relative;
z-index: 3;
background: transparent !important;
}
.moto-grid.gcb-vitrina .card > .px-2 {
padding: 0 30px !important;
max-width: none;
width: 100%;
margin: 0;
}
/* La destacada, con margenes de pagina */
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) .card > .px-2 {
padding: 0 4vw !important;
}
.moto-grid.gcb-vitrina .moto-card-title {
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: clamp(1.15rem, 1.7vw, 1.65rem) !important;
line-height: 1.08;
letter-spacing: .01em;
color: #fff !important;
text-shadow: 0 4px 26px rgba(0, 0, 0, .9) !important;
margin-bottom: .45rem !important;
}
/* En la destacada el titulo es el de portada */
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) .moto-card-title {
font-size: clamp(1.7rem, 3.2vw, 2.9rem) !important;
line-height: 1.03;
}
.moto-grid.gcb-vitrina .moto-card-body {
padding: 0 30px 26px !important;
max-width: none;
width: 100%;
margin: 0;
/* Bootstrap le pone flex:1 1 auto al .card-body, que lo haria crecer y
empujaria el titulo hasta arriba del panel. */
flex: 0 0 auto !important;
}
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) .moto-card-body {
padding: 0 4vw 3.4vh !important;
}
/* Precio y especificaciones, en linea y con aire */
.moto-grid.gcb-vitrina .moto-specs-row {
align-items: center !important;
gap: 12px 30px !important;
flex-wrap: wrap;
margin-bottom: 1.4rem !important;
}
.moto-grid.gcb-vitrina .precio-liston {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(1.15rem, 2.1vw, 1.7rem) !important;
font-weight: 700;
padding: .34rem 1.5rem .34rem 1.1rem !important;
box-shadow: 0 10px 30px -10px rgba(255, 140, 0, .55);
}
.moto-grid.gcb-vitrina .moto-specs-row > div:last-child {
flex-direction: row !important;
flex-wrap: wrap;
gap: 10px 26px !important;
padding-left: 0 !important;
}
.moto-grid.gcb-vitrina .moto-specs-row span {
font-size: clamp(.78rem, 1.1vw, .95rem) !important;
gap: 8px !important;
}
.moto-grid.gcb-vitrina .moto-specs-row span span { color: #ddd !important; }
.moto-grid.gcb-vitrina .moto-specs-row i { color: var(--gcb-ambar) !important; font-size: .85rem !important; }
/* Precio tachado de las ofertas */
.moto-grid.gcb-vitrina .moto-specs-row span[style*="line-through"] { font-size: .8rem !important; }
/* Boton */
.moto-grid.gcb-vitrina .moto-card-body > div[style*="text-align:right"] { text-align: left !important; }
.moto-grid.gcb-vitrina .moto-card-body a[href^="../moto/"] {
font-family: 'Rajdhani', sans-serif;
font-size: .9rem !important;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
padding: .8rem 2.4rem !important;
border-radius: 2px !important;
background: linear-gradient(135deg, var(--gcb-ambar-claro), var(--gcb-ambar)) !important;
box-shadow: 0 14px 40px -14px rgba(255, 140, 0, .7);
transition: filter .25s ease, transform .25s ease;
}
.moto-grid.gcb-vitrina .moto-card-body a[href^="../moto/"]:hover {
filter: brightness(1.12);
transform: translateY(-2px);
}
/* Cintas de OFERTA / APARTADA un poco mas grandes en pantalla completa */
.moto-grid.gcb-vitrina .moto-hover-wrap > .position-absolute {
font-size: .82rem !important;
padding: 6px 46px !important;
top: 26px !important;
}
/* ==========================================================================
4. Tarjeta premium
========================================================================== */
.moto-grid.gcb-zigzag .card {
background: linear-gradient(165deg, var(--gcb-carta-alta) 0%, var(--gcb-carta) 55%, #0b0b0b 100%) !important;
border: 1px solid var(--gcb-linea) !important;
border-radius: 6px !important;
box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .95);
transition: border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .3, 1);
}
.moto-grid.gcb-zigzag .card:hover {
border-color: var(--gcb-ambar) !important;
box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .98),
0 0 0 1px rgba(255, 140, 0, .28);
transform: translateY(-6px);
}
/* Titulo sobre la imagen */
.moto-grid.gcb-zigzag .moto-card-title {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(1rem, 1.7vw, 1.3rem) !important;
letter-spacing: .02em;
text-shadow: none !important;
padding: .35rem 0 .1rem;
}
.moto-grid.gcb-zigzag .card > .px-2 { padding: .9rem 1.1rem .25rem !important; }
/* Imagen grande, con acercamiento suave al pasar el mouse */
.moto-grid.gcb-zigzag .moto-card-img {
height: clamp(230px, 26vw, 340px) !important;
transition: transform .7s cubic-bezier(.2, .8, .3, 1);
}
.moto-grid.gcb-zigzag .card:hover .moto-card-img { transform: scale(1.045); }
.moto-grid.gcb-zigzag .moto-hover-wrap { overflow: hidden; }
/* Cuerpo */
.moto-grid.gcb-zigzag .moto-card-body { padding: 1rem 1.1rem 1.15rem !important; }
.moto-grid.gcb-zigzag .precio-liston {
font-family: 'Rajdhani', sans-serif;
font-size: 1.12rem !important;
font-weight: 700;
letter-spacing: .01em;
}
.moto-grid.gcb-zigzag .moto-specs-row { gap: 18px !important; }
.moto-grid.gcb-zigzag .moto-specs-row span { font-size: .78rem !important; }
.moto-grid.gcb-zigzag .moto-specs-row i { font-size: .72rem !important; }
/* Boton de informacion */
.moto-grid.gcb-zigzag .moto-card-body a[href^="../moto/"] {
font-family: 'Rajdhani', sans-serif;
font-size: .84rem !important;
letter-spacing: .12em;
text-transform: uppercase;
padding: .55rem 1.5rem !important;
border-radius: 2px !important;
background: linear-gradient(135deg, var(--gcb-ambar-claro), var(--gcb-ambar)) !important;
transition: filter .25s ease;
}
.moto-grid.gcb-zigzag .moto-card-body a[href^="../moto/"]:hover { filter: brightness(1.12); }
/* En el celular: una sola columna, sin destacadas, paneles mas cortos */
@media (max-width: 767.98px) {
.moto-grid.gcb-vitrina {
grid-template-columns: 1fr;
gap: 14px;
padding: 14px 12px !important;
}
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) { grid-column: auto; }
.moto-grid.gcb-vitrina .card,
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) .card {
height: min(58vh, 430px) !important;
}
.moto-grid.gcb-vitrina .card > .px-2,
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) .card > .px-2 { padding: 0 20px !important; }
.moto-grid.gcb-vitrina .moto-card-body,
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) .moto-card-body { padding: 0 20px 22px !important; }
.moto-grid.gcb-vitrina .moto-card-title,
.moto-grid.gcb-vitrina > .moto-card-wrapper:nth-child(5n+1) .moto-card-title { font-size: 1.35rem !important; }
/* La tarjeta es vertical (351x430) pero el 56% de las fotos son apaisadas
de 4:3. Con cover se recortaba el 39% del ancho y las motos se veian
mochas. Con contain se ve la foto entera; anclada arriba, el texto de
abajo cae sobre la zona libre en vez de tapar la moto. */
.moto-grid.gcb-vitrina .moto-card-img {
object-fit: contain !important;
object-position: center top !important;
background: #000;
}
.moto-grid.gcb-vitrina .moto-specs-row { gap: 8px 16px !important; margin-bottom: 1rem !important; }
.moto-grid.gcb-vitrina .moto-specs-row > div:last-child { gap: 6px 16px !important; }
.moto-grid.gcb-vitrina .moto-card-body a[href^="../moto/"] { padding: .7rem 1.8rem !important; }
.moto-grid.gcb-vitrina > #botonesContactoGrid { padding: 22px 18px 28px !important; }
.moto-grid.gcb-vitrina > #botonesContactoGrid > .h-100 { flex-direction: column !important; }
}
@media (prefers-reduced-motion: reduce) {
.gcb-intro-in, .gcb-intro-barra i { animation: none; opacity: 1; transform: none; }
.gcb-toma, .moto-grid.gcb-vitrina > .moto-card-wrapper,
.moto-grid.gcb-vitrina .card, .moto-grid.gcb-vitrina .moto-card-img {
transition: none;
}
}
/* ==========================================================================
5. Panel de contacto con captcha visual de motos
========================================================================== */
#gcbContacto {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 140, 0, .06) 0%, transparent 60%),
#000;
border-top: 1px solid var(--gcb-linea);
padding: 60px 20px 70px;
}
.gcb-cont-caja { max-width: 980px; margin: 0 auto; }
.gcb-cont-intro { text-align: center; margin-bottom: 34px; }
.gcb-cont-eyebrow {
font-family: 'Rajdhani', sans-serif;
font-size: .7rem;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--gcb-ambar);
}
.gcb-cont-titulo {
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: clamp(1.6rem, 3.4vw, 2.5rem);
color: #fff;
margin: 10px 0 12px;
}
.gcb-cont-bajada {
color: var(--gcb-apagado);
max-width: 62ch;
margin: 0 auto;
line-height: 1.65;
font-size: .95rem;
}
.gcb-cont-aviso {
border-radius: 3px;
padding: .9rem 1.15rem;
margin-bottom: 22px;
font-weight: 600;
font-size: .92rem;
}
.gcb-cont-aviso.es-ok { background: rgba(40, 167, 69, .14); border: 1px solid #28a745; color: #7fd894; }
.gcb-cont-aviso.es-err { background: rgba(220, 53, 69, .12); border: 1px solid #b3261e; color: #ff9e97; }
.gcb-cont-form {
background: linear-gradient(165deg, var(--gcb-carta-alta), var(--gcb-carta));
border: 1px solid var(--gcb-linea);
border-radius: 6px;
padding: 30px;
position: relative;
}
.gcb-cont-campos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.gcb-cont-form label { display: block; }
.gcb-cont-form label > span {
display: block;
font-family: 'Rajdhani', sans-serif;
font-size: .74rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gcb-apagado);
margin-bottom: 7px;
}
.gcb-cont-form input[type="text"],
.gcb-cont-form input[type="tel"],
.gcb-cont-form input[type="email"],
.gcb-cont-form textarea {
width: 100%;
background: #0b0b0b;
border: 1px solid var(--gcb-linea);
border-radius: 3px;
color: #eee;
padding: .7rem .85rem;
font-size: .95rem;
font-family: inherit;
transition: border-color .25s ease;
}
.gcb-cont-form input:focus,
.gcb-cont-form textarea:focus {
outline: none;
border-color: var(--gcb-ambar);
}
.gcb-cont-mensaje { margin-bottom: 22px; }
.gcb-cont-form textarea { resize: vertical; }
/* --- Captcha --- */
.gcb-captcha {
border: 1px solid var(--gcb-linea);
border-radius: 4px;
padding: 20px;
margin-bottom: 22px;
background: #0b0b0b;
}
.gcb-captcha-titulo {
font-family: 'Rajdhani', sans-serif;
font-size: .95rem;
color: #ddd;
margin: 0 0 14px;
letter-spacing: .02em;
}
.gcb-captcha-titulo strong { color: var(--gcb-ambar); }
.gcb-captcha-rejilla {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-width: 420px;
}
.gcb-captcha-casilla {
position: relative;
display: block;
cursor: pointer;
border-radius: 3px;
overflow: hidden;
aspect-ratio: 1 / 1;
border: 2px solid transparent;
transition: border-color .2s ease, transform .2s ease;
}
.gcb-captcha-casilla:hover { transform: scale(1.03); }
.gcb-captcha-casilla input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.gcb-captcha-casilla img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter .2s ease;
user-select: none;
}
.gcb-captcha-casilla i {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gcb-ambar);
color: #000;
font-size: .68rem;
display: grid;
place-items: center;
opacity: 0;
transform: scale(.6);
transition: opacity .2s ease, transform .2s ease;
}
.gcb-captcha-casilla:has(input:checked) { border-color: var(--gcb-ambar); }
.gcb-captcha-casilla:has(input:checked) img { filter: brightness(.62); }
.gcb-captcha-casilla:has(input:checked) i { opacity: 1; transform: scale(1); }
.gcb-captcha-casilla:focus-within { border-color: var(--gcb-ambar-claro); }
.gcb-captcha-pie {
margin: 12px 0 0;
font-size: .76rem;
color: #5f5f5f;
}
.gcb-cont-enviar {
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: .92rem;
letter-spacing: .16em;
text-transform: uppercase;
color: #000;
background: linear-gradient(135deg, var(--gcb-ambar-claro), var(--gcb-ambar));
border: 0;
border-radius: 2px;
padding: .85rem 2.6rem;
cursor: pointer;
box-shadow: 0 14px 40px -16px rgba(255, 140, 0, .7);
transition: filter .25s ease, transform .25s ease;
}
.gcb-cont-enviar:hover { filter: brightness(1.1); transform: translateY(-2px); }
@media (max-width: 700px) {
#gcbContacto { padding: 44px 14px 52px; }
.gcb-cont-form { padding: 20px; }
.gcb-cont-campos { grid-template-columns: 1fr; gap: 12px; }
.gcb-captcha { padding: 14px; }
.gcb-captcha-rejilla { max-width: none; }
.gcb-cont-enviar { width: 100%; }
}
/* ==========================================================================
6. Galeria de motos entregadas (mosaico tipo revista)
Las fotos vienen mezcladas: ~48% horizontales y ~52% verticales. Por eso
se usa un mosaico de columnas y no una cuadricula: asi cada foto conserva
su proporcion y no hay que recortarle la cabeza a nadie.
========================================================================== */
#gcbGaleria {
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 140, 0, .05) 0%, transparent 58%),
#000;
border-top: 1px solid var(--gcb-linea);
padding: 58px 20px 64px;
}
.gal-cabecera { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.gal-eyebrow {
font-family: 'Rajdhani', sans-serif;
font-size: .7rem;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--gcb-ambar);
}
/* "Nuestra historia" es el titulo dominante de la seccion */
.gal-titulo {
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: clamp(2.6rem, 7vw, 5.2rem);
line-height: 1.02;
color: #fff;
margin: 0 0 14px;
letter-spacing: .015em;
text-transform: uppercase;
}
.gal-unidades {
display: inline-block;
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: clamp(.82rem, 1.6vw, 1.05rem);
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gcb-ambar);
border-top: 1px solid rgba(255, 140, 0, .35);
border-bottom: 1px solid rgba(255, 140, 0, .35);
padding: .5rem 0;
}
/* Agradecimiento al pie de la galeria */
.gal-cierre {
max-width: 760px;
margin: 52px auto 0;
text-align: center;
}
.gal-cierre-linea {
display: block;
width: 64px;
height: 1px;
margin: 0 auto 26px;
background: linear-gradient(90deg, transparent, var(--gcb-ambar), transparent);
}
.gal-cierre p {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(1.02rem, 2vw, 1.35rem);
line-height: 1.6;
color: var(--gcb-texto);
margin: 0;
letter-spacing: .02em;
}
.gal-cierre strong {
display: block;
margin-top: 8px;
color: var(--gcb-ambar);
font-weight: 700;
}
/* --- El mosaico --- */
.gal-mosaico {
column-count: 4;
column-gap: 12px;
max-width: 1600px;
margin: 0 auto;
}
.gal-pieza {
break-inside: avoid; /* que una foto no se parta entre columnas */
margin: 0 0 12px;
position: relative;
overflow: hidden;
border-radius: 3px;
background: #0d0d0d;
cursor: zoom-in;
display: block;
}
.gal-pieza.gal-oculta { display: none; }
.gal-pieza img {
width: 100%;
height: auto;
display: block;
transition: transform .55s cubic-bezier(.2, .8, .3, 1), filter .35s ease;
}
.gal-pieza::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid transparent;
transition: border-color .3s ease;
pointer-events: none;
}
.gal-pieza:hover img { transform: scale(1.055); filter: brightness(1.06); }
.gal-pieza:hover::after { border-color: rgba(255, 140, 0, .55); }
.gal-lupa {
position: absolute;
right: 10px;
bottom: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0, 0, 0, .72);
color: var(--gcb-ambar);
display: grid;
place-items: center;
font-size: .72rem;
opacity: 0;
transform: translateY(6px);
transition: opacity .3s ease, transform .3s ease;
}
.gal-pieza:hover .gal-lupa { opacity: 1; transform: none; }
/* --- Boton de ver mas --- */
.gal-mas-caja { text-align: center; margin-top: 30px; }
.gal-mas {
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: .88rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gcb-ambar);
background: transparent;
border: 1px solid var(--gcb-ambar);
padding: .82rem 2.4rem;
cursor: pointer;
transition: background .25s ease, color .25s ease;
}
.gal-mas span {
display: block;
font-size: .66rem;
letter-spacing: .12em;
color: var(--gcb-apagado);
margin-top: 3px;
text-transform: none;
}
.gal-mas:hover { background: var(--gcb-ambar); color: #000; }
.gal-mas:hover span { color: rgba(0, 0, 0, .65); }
/* --- Visor a pantalla completa --- */
#galVisor {
position: fixed;
inset: 0;
z-index: 99998;
background: rgba(0, 0, 0, .96);
display: none;
align-items: center;
justify-content: center;
padding: 40px 62px;
}
#galVisor.gal-abierto { display: flex; }
.gal-visor-in {
margin: 0;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.gal-visor-in img {
max-width: 100%;
max-height: calc(100vh - 130px);
object-fit: contain;
display: block;
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95);
opacity: 0;
transition: opacity .35s ease;
}
.gal-visor-in img.gal-lista { opacity: 1; }
.gal-visor-pie {
font-family: 'Rajdhani', sans-serif;
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gcb-apagado);
}
.gal-cerrar, .gal-nav {
position: absolute;
background: rgba(255, 255, 255, .06);
border: 1px solid var(--gcb-linea);
color: #fff;
cursor: pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.gal-cerrar {
top: 18px; right: 20px;
width: 42px; height: 42px;
font-size: 1.6rem; line-height: 1;
border-radius: 50%;
}
.gal-nav {
top: 50%;
transform: translateY(-50%);
width: 46px; height: 74px;
font-size: 1.3rem;
}
.gal-prev { left: 14px; }
.gal-sig { right: 14px; }
.gal-cerrar:hover, .gal-nav:hover {
background: var(--gcb-ambar);
color: #000;
border-color: var(--gcb-ambar);
}
/* --- Adaptable --- */
@media (max-width: 1200px) { .gal-mosaico { column-count: 3; } }
@media (max-width: 767.98px) {
#gcbGaleria { padding: 40px 12px 46px; }
.gal-mosaico { column-count: 2; column-gap: 8px; }
.gal-pieza { margin-bottom: 8px; }
.gal-lupa { display: none; }
#galVisor { padding: 54px 10px 40px; }
.gal-nav { width: 40px; height: 60px; }
.gal-prev { left: 4px; }
.gal-sig { right: 4px; }
}
@media (max-width: 420px) { .gal-mosaico { column-count: 2; } }
@media (prefers-reduced-motion: reduce) {
.gal-pieza img, .gal-lupa, .gal-visor-in img { transition: none; }
}