/* Banner principal de la portada.
   Las medidas son las del banner que estaba armado a mano con contenedores:
   columna de texto de 560px, titulo de 76px, cifras de 34px, placa anclada
   abajo a la derecha y oculta bajo 1025px. */

.ams-bn {
    --ams-bn-acento: #F0500A;
    --ams-bn-velo-a: rgba(10, 11, 13, .95);
    --ams-bn-velo-b: rgba(10, 11, 13, .45);
    --ams-bn-velo-a-stop: 34%;
    --ams-bn-velo-b-stop: 78%;
    --ams-bn-velo-ang: 95deg;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ams-bn__pista { position: relative; }

/* ---------- diapositiva ---------- */

.ams-bn__slide {
    position: relative;
    display: flex;
    min-height: 640px;
    background-color: #101114;
}

/* Fundido: todas apiladas y solo la activa visible. La primera queda en el
   flujo para que la caja tenga alto propio sin depender del JS. */
.ams-bn--fade .ams-bn__slide + .ams-bn__slide { position: absolute; inset: 0; }
.ams-bn--fade .ams-bn__slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease;
}
.ams-bn--fade .ams-bn__slide.es-activa { opacity: 1; visibility: visible; }

/* Desplazamiento: en fila y se mueve la pista. */
.ams-bn--slide .ams-bn__pista {
    display: flex;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.ams-bn--slide .ams-bn__slide { flex: 0 0 100%; }

.ams-bn--unica .ams-bn__slide { opacity: 1; visibility: visible; position: relative; }

.ams-bn .ams-bn__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

.ams-bn__velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        var(--ams-bn-velo-ang),
        var(--ams-bn-velo-a) var(--ams-bn-velo-a-stop),
        var(--ams-bn-velo-b) var(--ams-bn-velo-b-stop)
    );
}

.ams-bn__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 32px 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
}

.ams-bn__texto {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---------- distintivo y etiqueta ---------- */

.ams-bn__marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
}

.ams-bn__badge {
    background: var(--ams-bn-acento);
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 9px 12px;
    border-radius: 3px;
    line-height: 1;
}

.ams-bn__etq {
    color: #A7ACB6;
    font-family: "Barlow", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
}

/* ---------- marca, modelo y bajada ---------- */

.ams-bn__marca {
    margin: 0 0 8px;
    color: var(--ams-bn-acento);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.ams-bn__titulo {
    margin: 0;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 76px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: .94;
}

.ams-bn__bajada {
    margin: 22px 0 0;
    max-width: 440px;
    color: #A7ACB6;
    font-family: "Barlow", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
}

/* ---------- cifras ---------- */

.ams-bn__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    padding-top: 32px;
}

.ams-bn__cifra { width: max-content; }

.ams-bn__cifra-num {
    margin: 0;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.ams-bn__cifra-uni { font-size: 18px; }

.ams-bn__cifra-etq {
    margin: 4px 0 0;
    color: #7C818B;
    font-family: "Barlow", sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
}

/* ---------- botones ---------- */

.ams-bn__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 38px;
}

.ams-bn__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 16px 30px;
    border-radius: 4px;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

/* El Kit colorea los enlaces con .elementor-kit-6 a (0,2,0), que le gana a
   .ams-bn__btn (0,1,0) y dejaba el texto naranja sobre el boton naranja.
   Por eso los botones llevan el elemento en el selector. */
.ams-bn a.ams-bn__btn,
.ams-bn a.ams-bn__btn:visited { color: #fff; }

.ams-bn .ams-bn__btn--1 { background: var(--ams-bn-acento); }
.ams-bn a.ams-bn__btn--1:hover,
.ams-bn a.ams-bn__btn--1:focus-visible { background: #fff; color: #16171A; }

.ams-bn .ams-bn__btn--2 { background: #25D366; }
.ams-bn a.ams-bn__btn--2:hover,
.ams-bn a.ams-bn__btn--2:focus-visible { background: #1EA854; color: #fff; }

.ams-bn__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ams-bn__wa { width: 19px; height: 19px; flex: 0 0 auto; }

/* ---------- placa de disponibilidad ---------- */

.ams-bn__placa {
    align-self: flex-end;
    width: max-content;
    max-width: calc(100% - 592px);
    margin-left: auto;
    padding: 18px 22px;
    background: rgba(10, 11, 13, .55);
    border-right: 3px solid var(--ams-bn-acento);
    text-align: right;
}

.ams-bn__placa-t {
    margin: 0;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ams-bn__placa-b {
    margin: 4px 0 0;
    color: var(--ams-bn-acento);
    font-family: "Barlow", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
}

/* ---------- flechas y puntos ---------- */

.ams-bn__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(10, 11, 13, .42);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.ams-bn__nav svg { width: 22px; height: 22px; }
.ams-bn__nav:hover { background: var(--ams-bn-acento); border-color: var(--ams-bn-acento); }
.ams-bn__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ams-bn__nav--prev { left: 18px; }
.ams-bn__nav--next { right: 18px; }

.ams-bn__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 76px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 9px;
}

.ams-bn__punto {
    width: 26px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .34);
    cursor: pointer;
    transition: background-color .2s ease, width .2s ease;
}

.ams-bn__punto.es-activo { background: var(--ams-bn-acento); width: 40px; }
.ams-bn__punto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
    /* La placa se ocultaba en tablet y movil en el banner original. */
    .ams-bn__placa { display: none; }
    .ams-bn__texto { width: 100%; }
    .ams-bn__titulo { font-size: 56px; }
    .ams-bn__nav { width: 40px; height: 40px; }
    .ams-bn__nav--prev { left: 10px; }
    .ams-bn__nav--next { right: 10px; }
}

/* ---------- movil ---------- */

@media (max-width: 767px) {
    .ams-bn__inner { padding: 44px 20px 48px; flex-direction: column; }
    .ams-bn__titulo { font-size: 40px; }
    .ams-bn__marca { font-size: 20px; }
    .ams-bn__bajada { font-size: 16px; max-width: 100%; }
    .ams-bn__cifras { gap: 22px; padding-top: 26px; }
    .ams-bn__cifra-num { font-size: 26px; }
    .ams-bn__cifra-uni { font-size: 15px; }
    .ams-bn__botones { padding-top: 28px; gap: 10px; }
    .ams-bn__btn { width: 100%; justify-content: center; font-size: 17px; padding: 15px 22px; }
    /* Las flechas tapan el texto en pantallas angostas: alli mandan los puntos. */
    .ams-bn__nav { display: none; }
    /* El buscador de la portada monta 24px sobre el banner tambien en movil. */
    .ams-bn__puntos { bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .ams-bn--fade .ams-bn__slide,
    .ams-bn--slide .ams-bn__pista,
    .ams-bn__btn,
    .ams-bn__nav,
    .ams-bn__punto { transition: none; }
}