@font-face{
    font-family: Narrow;
    src: url('Narrow/owners-narrow-black.ttf');
}

@font-face{
    font-family: Lato;
    src: url('LatoRegular/Lato-Regular.ttf');
}

@font-face{
    font-family: LatoBold;
    src: url('LatoRegular/Lato-Bold.ttf');
}

.header{
    position:fixed;
    height: 70px;
    width: 30vw;
    top: 0;
    left:0;
    border-radius: 0px 0px 10px 0px;
    z-index: 10;
}

#bodyBack{
    background-size: cover!important;
    background-position: 30% 60%!important;
    background-repeat: no-repeat;
    background-color: #000000!important;
}

#capaColor{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 30% 60%!important;
    pointer-events: none;
    z-index: 98;
    opacity: 0;
    transition: opacity 3s ease;
}

.capaColor{
  opacity: 0;
}

.btn-filtro-tipo-auto-activo{
    background-color: #3275bb;
    color: white;
    padding: 4px;
    /* border-radius: 10px; */
    font-size: 1em;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.btn-filtro-tipo-auto-activo:hover{
    background-color: #0d60b9;
    color: white;
}

.btn-filtro-tipo-auto-inactivo{
    text-align: center;
    background-color: #c0c0c0;
    color: white;
    padding: 4px;
    /* border-radius: 10px; */
    font-size: 1em;
    cursor: pointer;
    width: 100%;
}

.btn-filtro-tipo-auto-inactivo:hover{
    background-color: #468fdd;
}

.btnVerSeminuevos{
    text-align: center;
    font-family: LatoBold;
    font-size: 0.7em!important;
    position: fixed;
    right: 10px;
    width: 15vw;
    border: 1px solid white;
    background-color: rgb(0 0 0 / 0.1);
    color: white;
    padding: 4px;
    border-radius: 20px;
    cursor: pointer;
    margin-right: 0;
    z-index: 9;
    transition: opacity .2s ease;
}

.btnVerMedia{
    text-align: center;
    font-family: LatoBold;
    font-size: 3em!important;
    width: auto;
    background-color: #3275bb;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    z-index: 9;
    transition: opacity .2s ease;
}

.scrolled {
  opacity: 0;
}

.rowCentral{
    z-index: 4;
}

.titleCHEVROLET{
    color: white;
    text-shadow: 1px 1px 15px black;
    font-family: Lato;
    text-align: center;
    font-size: 2.5em;
    z-index: 4;
    animation: EntrarDesdeArr .9s ease;
}

.titleModelo{
    color: white;
    text-shadow: 1px 1px 15px black;
    font-family: LatoBold;
    font-size: 3em;
    z-index: 4;
    animation: EntrarDesdeArr .9s ease;
}

.titleAno{
    color: white;
    text-shadow: 1px 1px 15px black;
    font-family: Lato;
    font-size: 2em;
    margin-top: -25px;
    margin-bottom: 0px;
    z-index: 4;
    animation: EntrarDesdeArr .9s ease;
}

.modeloAnoSelect{
    text-align: right;
    right: 2.5rem;
    position: absolute;
    top: 12%;
}

/* CHAT GPT MODAL */

.panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 400px;
    background: rgba(17, 24, 39, 0.9); /* bg-gray-900/90 */
    backdrop-filter: blur(6px);
    color: white;
    padding: 2rem;
    box-shadow: -4px 0 15px rgba(0,0,0,0.5);
    overflow-y: auto;

    /* Estado inicial oculto */
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    animation: EntrarDesdeDer .4s;
}

.panel.open {
  transform: translateX(0);
  opacity: 1;
}

#specsPanelOpen{
    position: fixed;
    inset: 0px;
    z-index: 100;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: #9ca3af; /* gray-400 */
  cursor: pointer;
  background: none;
  border: none;
}
.close-btn:hover {
  color: white;
}

.title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #d6d6d6; /* blue-400 */
  margin-bottom: 1.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #374151; /* gray-700 */
  padding-bottom: 1.5rem;
}
.label { font-size: 0.85rem; color: #9ca3af; }
.value { font-weight: bold; font-size: 1.2rem; }
.highlight { color: #10b981; } /* green-400 */

.features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  color: #d1d5db;
}
.features li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.features li i {
  margin-right: 0.75rem;
  color: #3b82f6; /* blue-400 */
}

.subtitle {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  color: white;
}

.cta-btn {
  width: 100%;
  margin-top: 2rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #2563eb;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}
.cta-btn:hover {
  background: #1d4ed8;
}

#divBotonesPropiedad{
    position: absolute;
    top: calc(20% + 90px) !important;
    right: 2.5rem;
    z-index: 99;
}

.properties{
    display:flex;
    gap: 1rem;
    align-items: flex-end;
    flex-direction: row-reverse;
}

    #exploraUnidades{
        color: white;
        display: none!important;
    }

    #vehicle-selector-tray{
        transition-duration: 500ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        width: 100%;
        /* max-height: 11rem; */
        transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 5px;
        border-radius: 10px;
        backdrop-filter: blur(5px);
        background-color: rgb(0 0 0 / 68%);
        overflow-x: auto;
        display: flex;
        justify-content: center;
    }

    #tiraTipos{
        padding: 1rem;
        border-radius: 0.75rem;
        overflow-x: auto;
        gap: 1rem;
        display: inline-flex;
        color: white;
    }

    .tipoCuadroUnidad{
        position: relative;
        width: 160px;
        transition-duration: 300ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        text-align: center;
        padding: 0.75rem;
        background-color: rgb(31 41 55 / 0.6);
        border-color: rgb(255 255 255 / 0.1);
        border-width: 1px;
        border-radius: 0.5rem;
        cursor: pointer;
        flex-shrink: 0;
        animation: EntrarDesdeIzq .4s;
    }

    .imgUnidadTipo{
        object-fit: contain;
        width: 100%;
        height: 3rem;
        margin-bottom: 0.25rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        display: block;
        vertical-align: middle;

    }

    .headerMain{
        padding: 1.5rem;
        background-color: transparent;
        position: absolute;
        justify-content: space-between;
        align-items: center;
        display: flex;
        z-index: 100;
        top: 0px;
        right: 0px;
        left: 0px;
        background: transparent;
        position: sticky;
    }
/* CHAT GPT MODAL */

.titleSeminuevos{
    font-family: LatoBold;
    font-size: 1.2em;
    color: white;
    margin: 0;
    text-align: center;
}

.barrasSeminuevos{
    font-size: 1em;
    color: rgb(255, 255, 255);
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.barrasNuevos{
    font-size: 1em;
    color: rgb(0, 0, 0);
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.topSeminuevo{
    font-family: Lato;
    font-size: 1em;
    color: white;
    margin-bottom: 0;
    text-align: center;
}

.topNuevo{
    font-family: Lato;
    font-size: 1em;
    color: rgb(241, 245, 35);
    margin-bottom: 0;
    text-align: center;
}

.colorCuadro{
    height: 20px;
    width: 20px;
    padding: 1px;
    border: 1px solid white;
}

.colorCuadroMD{
    height: 30px;
    width: 30px;
    padding: 1px;
    border: 1px solid rgb(87, 87, 87);
    --escala: 1.1;
    cursor: pointer;
}
.colorCuadroMD:hover{
    transform: scale(var(--escala, 1));
    transition: transform 0.25s;
}

.btn-solicitar{
    width: 100%;
    height: 25px!important;
    font-size: 1em;
    padding: 0px;
    background-color: #0961b4!important;
    font-family: LatoBold;
}

.resultadosDivSeminuevos{
    animation: EntrarDesdeDer .5s;
}

.divFiltro{
    animation: EntrarDesdeIzq .4s;
}

.columnaFiltro{
    margin-top: 10px;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 1px 1px 15px #aaa;
    background-color: white;
    position:fixed;
    overflow: auto;
    height: 90vh;
}

.botonVersionMD{
    --escala: 1.1;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
    font-family: 'LatoBold';
    color: white;
    background-color: #3275bb;
    padding-top: 10px;
    padding-bottom: 10px;
    animation: EntrarDesdeArr .8s;
    text-align: center;
}

.botonVersionMD:hover{
    transform: scale(var(--escala, 1));
    transition: transform 0.25s;
    background-color: #0c4e96;
}

.botonSucursalMD{
    --escala: 1.1;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
    font-family: 'LatoBold';
    color: white;
    background-color: #ff7728;
    padding-top: 10px;
    padding-bottom: 10px;
    animation: EntrarDesdeArr .8s;
    text-align: center;
}

.botonSucursalMD:hover{
    transform: scale(var(--escala, 1));
    transition: transform 0.25s;
    background-color: #e45604;
}

.filaCaracteristicas {
    align-items: center;
    color: #656d78;
    font-size: 15px;
    justify-content: flex-start;
    margin-top: 7px !important;
    margin: 0;
    padding: 5px;
    width: 100%;
    list-style: none;
}

.cuadroCotizacion{
    background-color: #e2e2e2de;
    box-shadow: 1px 1px 15px #666666;
    border-radius: 25px;
    z-index: 19;
    /* max-width: 350px; */
}

.cuadroEnganche{
    font-family: Lato;
    font-size: 1.4em;
}

.cuadroPlazo{
    font-family: Lato;
    font-size: 1.4em;
}

.cuadroMensualidad{
    font-family: Lato;
    font-size: 1.4em;
}

.resEnganche{
    font-family: LatoBold;
    font-size: 1.8em;
}

.resPlazo{
    font-family: LatoBold;
    font-size: 1.8em;
}

.resMensualidad{
    font-family: LatoBold;
    font-size: 1.8em;
}

.colorStock{
    color: white;
    text-shadow: 1px 1px 2px black;
    font-family: LatoBold;
    font-size: 1em;
}

.selectVersion{
    text-align: center;
    font-family: 'LATOBOLD';
    color: white;
    background-color: rgb(0 0 0 / 0.3);
    backdrop-filter: blur(5px);
    border-width: 0;
    appearance: none;        /* Quitar estilo nativo */
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filtrin{
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 1px 1px 15px #000000;
}

.labelDorado{
    background-color: #f0ba17d1!important;
}

.divMenuFiltro{
    position: absolute;
    gap: 1rem;right: 0px;left: 0px;bottom: 0px;
    align-items: center;
    flex-direction: column;
    display: flex;top:65vh;
    z-index: 98;
}

.cintilla {
    border-radius: 15px 12px 12px 3px;
    position: absolute;
    top: 0px;
    right: -15px;
    background-color: rgb(218, 61, 92);
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 5px 10px;
    transform: rotate(45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 12px;
}

 /* Esto es IA */

    .color-container {
      display: flex;
      gap: 5px;
      z-index: 1;
    }

    .color-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      border: 2px solid #ccc;
      padding: 2px;
      background-color: #ddd;
    }

/*     .color-swatch {
      width: 40px;
      height: 30px;
      border: 1px solid #999;
    } */

    .color-label {
      font-size: 20px;
      font-weight: bold;
    }

    .top-labels {
        position: absolute;
        top: 40px;
        right: 0px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .label {
        background: rgba(99, 99, 99, 0.6);
        padding: 4px 8px;
        font-weight: bold;
        font-size: 14px;
        color: white;
        text-shadow: black 1px 2px;
    }

    .label.price {
        background: #333;
        color: white;
    }

    .car-name {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: white;
    }


/*     #tipo_1:hover {
        content: url("images/iconos/autos_activo.png");
        cursor: pointer;
    }

    #tipo_2:hover {
        content: url("images/iconos/suvs_activo.png");
        cursor: pointer;
    }
    #tipo_3:hover {
        content: url("images/iconos/pickups_activo.png");
        cursor: pointer;
    }
    #tipo_4:hover {
        content: url("images/iconos/deportivos_activo.png");
        cursor: pointer;
    } */

    #tipo_1{
        animation: fadeIn .7s ease forwards;
    }

    #tipo_2{
        animation: fadeIn 1s ease forwards;
    }

    #tipo_3{
        animation: fadeIn 1.8s ease forwards;
    }

    #tipo_4{
        animation: fadeIn 2.3s ease forwards;
    }

    #divSimilares {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        height: 200px;
        gap: 10px;
        padding: 10px 0;
    }
    
    .similarDiv{
        flex: 0 0 auto;
        margin-right: 10px;
        width: 300px; /* ajusta según lo que necesites */
        height: 100%;
        transition: transform 0.3s;
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        box-shadow: 1px 1px 15px #aaa;
        animation: EntrarDesdeIzq .4s;
    }

    .similarDiv:hover {
        transform: scale(1.02);
    }

    #contenedor-video {
      width: 640px;
      margin: 20px auto;
      border: 2px solid #ccc;
      padding: 10px;
      background-color: #f9f9f9;
      text-align: center;
    }

    video {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }

    /* Esto es lo de Edgar */

    .model-types-menu {
        display: flex;
        justify-content: center; /* O space-around, dependiendo de tu diseño */
        gap: 15px; /* Espacio entre los elementos del menú */
        padding: 20px 0;
        border-radius: 10px; /* Bordes ligeramente redondeados */
    }

    .model-type-item {
        display: flex; flex-direction: column; align-items: center; padding: 10px 15px;
        background-color: rgba(30, 30, 30, 0.8); backdrop-filter: blur(5px);
        border-radius: 8px; cursor: pointer; transition: all 0.3s ease;
        color: #fff; font-size: 12px; font-weight: bold; text-decoration: none;
    }

    .model-type-item img {

        height: 40px;
        margin-bottom: 8px; /* Espacio entre el icono y el texto */
        filter: brightness(0) invert(1); /* Para iconos blancos si son negros */
    }

    /* Estado al pasar el ratón */
    .model-type-item:hover {
        background-color: #333;
        transform: translateY(-3px); /* Efecto ligero de elevación */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    }

    /* Estado activo/seleccionado */
    .model-type-item.active {
        background-color: #007bff; /* Color de realce, puedes usar el azul de Chevrolet */
        color: #fff;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.5);
        transform: scale(1.05); /* Ligeramente más grande */
    }

    .coloresDisponibles{
        border-radius: 0.75rem;
        display: flex;gap: 0.75rem;justify-content: flex-end;margin-top: 0.5rem;
    }

    .color-swatch {
        transition: all 0.2s ease-in-out; border: 2px solid transparent; height: 2rem;
        border-radius: 9999px;
        width: 2rem;
        background-color: #7e7e7e;
        cursor: pointer;
    }

    .color-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
    .color-swatch.active { border-color: #3b82f6; box-shadow: 0 0 0 2px #3b82f6; }

    .color-stock{
        background-color: #007bff;
        color: white;
        font-size: 0.75rem;
        line-height: 1rem;
        border-radius: 9999px;
        justify-content: center;
        align-items: center;
        width: 1.25rem;height: 1.25rem;display: flex;top: -0.25rem;right: -0.25rem;position: absolute;pointer-events: none;
    }
    /* Esto es lo de Edgar */

    @media (max-width: 991px) {

        #bodyBack{
            background-size: contain!important;
            background-repeat: no-repeat!important;
            background-position: 0% 0%!important;
        }

        #capaColor{
            background-size: contain!important;
            background-repeat: no-repeat!important;
            background-position: 0% 0%!important;
        }

        .rowCentral{
            background: linear-gradient(to bottom, transparent 0%, #020202 10%);
        }

        .titleCHEVROLET{
            font-size: 1em;
        }

        .titleModelo{
            font-size: 1.4em;
        }

        .titleAno{
            font-size: 1.3em;
            margin-top: -10px;
        }

        .cuadroEnganche,.cuadroPlazo,.cuadroMensualidad{
            font-size: 1em;
        }

        .resEnganche, .resMensualidad, .resPlazo{
            font-size: 1.2em;
        }

        .btnVerSeminuevos{
            font-size: 0.6em!important;
        }

        .btnVerMedia{
            text-align: center;
            font-family: LatoBold;
            font-size: 3em!important;
            width: 100%;
            color: #3275bb;
            background-color: white;
        }

        .divMenuFiltro{
            top:55vh;
            background-color: #000000;
        }

    }

    @media (max-width: 767px) {
        .priority-banner {
            border: transparent;
            box-shadow: none !important;
        }
        #bar-razones{
            background-color: #1d232a !important;
            padding-top: 0px !important;
        }
        #bar-razones h5{
            /* color: black !important; */
        }
        #coloresDisponibles {
            width: 400px;
        }
        .headerMain img {
            width: 150px !important;
        }

        #exploraUnidades{
            font-weight: 700;
            font-size: 1.5rem;
            line-height: 2rem;
            text-align: center;
            margin-bottom: 1rem;
            display: block!important;
        }

        .columnaFiltro{
            height: 20vh;
            width: 95%;
        }

        .columnaResultados{
            margin-top: 23vh;
        }

        #carrosResult{
            position: fixed!important;;
            overflow: auto;
            height: 69vh;
        }

        .resultadosDivSeminuevos{
            padding: 0!important;
        }

        .header{
            height: 70px;
            width: 100vw;
            top: 0;
            left:0;
            border-radius: 0px;
        }

        .btnVerSeminuevos{
            text-align: center;
            font-family: LatoBold;
            font-size: 0.6em!important;
            position: fixed;
            margin-top: 0px;
            width: 140px;
            color: white;
            padding: 4px;
        }

        .cuadroEnganche,.cuadroPlazo,.cuadroMensualidad{
            font-size: .7em;
        }

        .resEnganche, .resMensualidad, .resPlazo{
            font-size: 1em;
        }

        #bodyBack{
            background-position: 0% 10%!important;
            background-color: #000000!important;
            background: linear-gradient(to bottom, transparent 0%, #3275bb 10%);
        }

        #capaColor{
            background-position: 0% 10%!important;
        }

        .selectVersion{
            font-size: .7em;
        }

        .color-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            border: 2px solid #ccc;
            padding: 2px;
            background-color: #ddd;
        }

        .color-swatch {
            width: 30px;
            height: 30px;
        }

        .color-label {
            font-size: 15px;
        }

        .top-labels {
            position: absolute;
            top: 40px;
            right: 0px;
            gap: 5px;
        }

        .titleModelo{
            font-size: 1.2em;
        }
        
        .titleAno{
            font-size: 0.9em;
        }

        .model-types-menu {
            display: flex;
            justify-content: flex-center; /* O space-around, dependiendo de tu diseño */
            gap: 12px; /* Espacio entre los elementos del menú */
            padding: 8px 16px;
            border-radius: 10px; /* Bordes ligeramente redondeados */
            overflow-x: auto;
        }

        .headerMain{
            background-color: #000000;
        }

        .properties{
            align-items: flex;
            flex-direction:row;
        }

        .modeloAnoSelect{
            text-align: right;
            right: 1rem;
            position: absolute;
            top: 12%;
        }

        #divBotonesPropiedad{
            top: calc(20% + 50px) !important;
            right: 1rem;
        }

        .divMenuFiltro{
            top:50vh;
        }

        .imgFiltro{
            height: 30px!important;
        }

    }

    @media (max-width: 575px) {
        #coloresDisponibles {
            width: 250px;
        }
        #bodyBack{
            background-position: 0% 13%!important;
            background: linear-gradient(to bottom, transparent 0%, #3275bb 10%);
        }

        #capaColor{
            background-position: 0% 13%!important;
        }

        .rowCentral{
            margin-top: 25vh;
        }

        .imgFiltro{
            height: 20px!important;
        }
    }

    @media (max-width: 430px) {
         #coloresDisponibles {
            width: 200px;
        }
        #bodyBack{
            background-position: 0% 10%!important;
            background: linear-gradient(to bottom, transparent 0%, #3275bb 10%);
            
        }

        #capaColor{
            background-position: 0% 10%!important;
        }

        .rowCentral{
            margin-top: 20vh;
        }

        #divBotonesPropiedad{
            top: calc(20% + 40px) !important;
            right: 1rem;
        }

        .titleModelo{
            font-size: 1.3em;
        }

        .imgFiltro{
            height: 15px!important;
        }
    }
    @media ( max-width: 330px) {
        #coloresDisponibles {
            width: 180px;
        }

    }

    @media (max-height: 770px) {
        #divBotonesPropiedad{
            top: calc(20% + 10px) !important;
            right: 1rem;
        }
    }

    @keyframes EntrarDesdeIzq {
        from{
            transform: translateX(-90%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 5;
        }
    }

    @keyframes EntrarDesdeDer {
        from{
            transform: translateX(90%)
        }
        to {
            transform: translateX(0);
        }
    }

    @keyframes EntrarDesdeArr {
        from{
            transform: translateY(-90%)
        }
        to {
            transform: translateY(0);
        }
    }

    .fade-in {
        animation: fadeIn 1s ease forwards;
    }

    @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
    }



    /* <style> */
        /* --- Variables CSS para un fácil mantenimiento (Moderno) --- */
        :root {
            --color-fondo: #1d232a;        /* Un carbón profundo, más elegante que el negro puro */
            --color-borde: #3a4149;
            --color-texto-principal: #f0f4f8; /* Un blanco suave, fácil de leer */
            --color-texto-secundario: #9b9b9b;
            --color-primario: #007aff;       /* Un azul vibrante */
            --color-primario-hover: #0056b3;
            --sombra-componente: 0 10px 30px rgba(0, 0, 0, 0.4);
            --sombra-boton-glow: 0 6px 20px rgba(0, 122, 255, 0.4);
        }

        /* --- Contenedor Principal (El "Porqué" del Diseño) --- */
        /*
          El objetivo es crear un "escenario" para el mensaje.
          Usamos Flexbox para alinear el contenido y la imagen.
          La sombra y el borde le dan profundidad y un sentido de "calidad".
        */
        .priority-banner {
            display: flex;
            justify-content: space-between; /* Separa el texto de la imagen */
            align-items: center;
            background-color: var(--color-fondo);
            color: var(--color-texto-principal);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            border-radius: 16px; /* Más redondeado = más moderno */
            padding: 2.5rem 3rem;
            max-width: 800px;
            margin: 2rem auto;
            /* border: 1px solid var(--color-borde); */
            box-shadow: var(--sombra-componente);
            overflow: hidden; /* Asegura que nada se salga del borde redondeado */
        }

        /* --- Contenido: Jerarquía Visual Clara --- */
        /*
          Separamos el titular del tagline para dar más peso al mensaje
          de "TÚ eres nuestra prioridad".
        */
        .banner-content {
            flex: 1; /* Permite que el contenido ocupe el espacio disponible */
            padding-right: 2rem;
        }

        .banner-content h2 {
            font-size: 1.75rem; /* 28px */
            font-weight: 600;
            margin: 0 0 0.5rem 0;
            line-height: 1.3;
        }

        .banner-content p {
            font-size: 1.125rem; /* 18px */
            color: var(--color-texto-secundario);
            margin: 0 0 1.5rem 0;
        }
       
        .banner-content p strong {
            color: var(--color-texto-principal); /* Destaca el "TÚ" */
        }

        /* --- Imagen de Marca (El "Sello" de Confianza) --- */
        /*
          La imagen ahora está integrada en el flujo, no flotando.
          El borde azul la conecta visualmente con el botón (CTA).
        */
        .banner-image img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--color-primario);
            box-shadow: 0 0 15px rgba(0, 122, 255, 0.3);
        }

        /* --- El CTA: Optimizado para la Conversión (El "Hook") --- */
        /*
          Este es el elemento más importante. Debe invitar al clic.
          Usamos una micro-interacción (hover) para darle "vida".
        */
        .cta-video {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem; /* Espacio entre el ícono y el texto */
            background: linear-gradient(90deg, var(--color-primario), var(--color-primario-hover));
            color: #ffffff;
            padding: 14px 28px;
            border-radius: 50px; /* Forma de píldora moderna */
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
        }

        .cta-video svg {
            width: 20px;
            height: 20px;
        }

        /* La micro-interacción que aumenta el CTR */
        .cta-video:hover {
            transform: translateY(-3px); /* "Eleva" el botón */
            box-shadow: var(--sombra-boton-glow);
        }

        /* --- Adaptación para Móviles (Responsive) --- */
        @media (max-width: 600px) {
            .priority-banner {
                flex-direction: column; /* Apila los elementos */
                text-align: center;
                padding: 2rem;
            }

            .banner-content {
                padding-right: 0;
                order: 2; /* Mueve el contenido debajo de la imagen */
            }
           
            .banner-image {
                order: 1; /* Mueve la imagen arriba */
                margin-bottom: 1.5rem;
            }

            .banner-image img {
                width: 90px;
                height: 90px;
            }

            .banner-content h2 {
                font-size: 1.5rem; /* Ajusta el tamaño para pantallas pequeñas */
            }
        }
    /* </style> */





    .div-imagen-unidad {
        position: relative;
        overflow: hidden;
        transition: background-image 0.5s ease-in-out; /* Para transición suave */
    }
    /* .div-imagen-unidad:hover{
        cursor: wait; */
        /* cursor: url('https://cdn-icons-png.flaticon.com/32/64/64673.png') 16 16, auto; */
        /* cursor: url('https://cdn-icons-png.flaticon.com/32/3039/3039387.png') 16 16, grab; */
        /* cursor: url('https://cdn-icons-png.flaticon.com/32/1358/1358633.png') 16 16, grab; */
        /* border: 1px solid #ffffff !important; */
    /* }         */
    /* .div-imagen-unidad:active {
        cursor: grabbing;
    } */