/* ==========================================================================
   1. CONFIGURACIÓN GLOBAL Y ESTRUCTURA (FLEXBOX)
   ========================================================================== */

/* Centrado vertical en bloques de 2 y 3 columnas */
.columns66 .grid-row,
.columns444 .grid-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.columns66 .col-6, 
.columns444 .col-4 {
    display: block;
    float: none; 
}

/* Espaciado superior general para secciones Japan */
#container > div.freeEditorial.freeEditorialParsys.parsys > div.column.columns3333ForJapan.columns.section {
    margin-top: 30px;
}

/* ==========================================================================
   2. COMPONENTE DE ESPECIFICACIONES (MOTOR, POTENCIA, TORQUE)
   Soporta estructuras de 3 y 4 columnas sin romper otros elementos
   ========================================================================== */

/* Contenedor de etiquetas: Pone el nombre arriba y el valor abajo */
.columns444ForJapan .c_001 .heading-group,
.columns3333ForJapan .c_001 .heading-group,
.grid-row .col-4 .heliostext .c_001.center .heading-group {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

/* El Valor (Ej: 2.0L, 145 HP) */
.columns444ForJapan .c_001 .heading span,
.columns3333ForJapan .c_001 .heading span,
.grid-row .col-4 .heliostext .c_001.center .heading span {
    font-size: clamp(32px, 3.2vw, 56px) !important; 
    font-weight: 900 !important;
    color: #000 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
    display: block;
    margin-top: 5px;
}

/* La Etiqueta (Ej: MOTOR, POTENCIA) */
.columns444ForJapan .c_001 .strapline span,
.columns3333ForJapan .c_001 .strapline span,
.grid-row .col-4 .heliostext .c_001.center .strapline span {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #666 !important;
    letter-spacing: 2px !important;
    display: block;
}

/* ==========================================================================
   3. ESTILOS DE ELEMENTOS ESPECÍFICOS (IMÁGENES, BOTONES, SOMBRAS)
   ========================================================================== */

/* Imágenes redondeadas */
.c_029 img {
    border-radius: 20px;
    overflow: hidden;
}

/* Legales de precios */
div.price-item.primary-price > p {
    font-size: 8px !important;
}

/* Estilo de botones específicos */
#container > div.freeEditorial.freeEditorialParsys.parsys > div > div > div > div.columns.parsys > div > div > div > div > div.column.columns12bleed.columns.section > div > div > div > div > div > div > div > ul > li > a {
    background: #000;
    border-radius: 100px;
}

/* Sombras en texto sobre imágenes */
.wrapper.position-left-top .heading-group h1,
.wrapper.position-left-top .heading-group p,
.wrapper.position-left-top .content {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.wrapper.position-left-top h1 span {
    text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.2);
}

/* Espacio del Formulario */
#mas-info > div > div.columns.parsys > div > div > div > div > div > div > form > fieldset > div > div > div {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ==========================================================================
   4. MEDIA QUERIES (TABLET Y DESKTOP)
   ========================================================================== */

@media (min-width: 768px) {
    /* Mostrar/Ocultar por ID */
    [id^="mobile"] { display: none !important; }

    /* Padding para texto en 2 columnas */
    .col-6 .parsys { padding: 0 20px; }
}

/* ==========================================================================
   5. MEDIA QUERIES (MOBILE)
   ========================================================================== */

@media (max-width: 767px) {
    /* Mostrar/Ocultar por ID */
    [id^="desktop"] { display: none !important; }

    /* --- DEGRADADO (Overlay) en c_243 --- */
    .c_243 .image-container { position: relative !important; z-index: 1; }
    .c_243 .image-container::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 45%) !important;
        pointer-events: none;
        mix-blend-mode: multiply;
    }
    .c_243 .wrapper { position: absolute; z-index: 10; }

    /* --- GRID DE ESPECIFICACIONES (2 arriba, 1 abajo) --- */
    /* Solo afecta si el col-4 contiene una spec (.c_001) */
    .grid-row > .col-4:has(.c_001) {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 30px;
        padding: 0 10px;
    }
    .grid-row > .col-4:has(.c_001):last-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Ocultar spec vacía en Japan */
    #container > div.freeEditorial.freeEditorialParsys.parsys > div.column.columns3333ForJapan.columns.section > div > div:nth-child(1) {
        display: none;
    }

    /* Botones Mobile */
    .c_012 ul li a, .c_012 ul li a:after {
        color: #fff;
        padding-inline: 25px;
    }
}

/* --- ALINEACIÓN SUPERIOR EN CARRUSEL --- */
/* Forzamos que las tarjetas del carrusel se alineen arriba, no al centro */
.c_024 .grid-row {
    align-items: flex-start !important; /* Cambia el centrado por alineación superior */
    display: flex !important;
}

/* Aseguramos que las columnas mantengan una altura consistente */
.c_024 .col-4, 
.c_024 .col-6 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Ajuste para el componente de imagen dentro del carrusel */
.c_024 .image.parbase.section {
    width: 100%;
    margin-bottom: 15px; /* Espacio constante entre imagen y texto */
}

/* Opcional: Si quieres que los textos tengan una altura mínima para 
   que los párrafos empiecen en el mismo lugar aunque el título sea largo */
.c_024 .c_001 .heading-group {
    min-height: 60px; /* Ajusta según el texto más largo que tengas */
    justify-content: flex-end; /* Mantiene la etiqueta (BSW, etc) pegada al título */
}