.bold{
        font-family: 'Mansfield Black' !important;
    }

    .nobold{
        font-family: 'Mansfield Light';
    }

    .naranjagarantias{
        background-color: #f92e00;
    }

    /* 🟢 Estilos generales de la tarjeta */
    .uno{
        background-color: #008f39; /* Mantiene el color verde */
    }
    .dos{
        background-color: #ff1300; /* Mantiene el color verde */
    }
    .tres{
        background-color: #ffa300; /* Mantiene el color verde */
    }
    .cuatro{
        background-color: #00b1ff; /* Mantiene el color verde */
    }

    .card {
        border-radius: 35px;
        overflow: hidden;
        color: white;
        transition: all 0.3s ease-in-out;
        position: relative;
        padding: 20px;
        padding-bottom: 0;
    }

    /* Cabecera de la tarjeta */
    .card-header {
        text-align: center;
        padding: 15px;
        cursor: pointer;
        position: relative;
        font-size: 18px;
        font-weight: bold;
        border: none;
        padding-bottom: 0;
    }

    .card-content {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.6s ease;
    }

    /* Cuando se abre */
    .card.open .card-content {
        max-height: 1000px; /* grande, pero NO fijo (solo para animar) */
    }
    
    .card-header p{
        text-align: center;
        margin-top: 2vh;
        font-size: 3.5vw;
    }

    /* Tamaño e imagen por defecto (abajo) */
    .arrow-icon {
        width: 30px;
        height: auto;
        transition: transform 0.3s ease;
        content: url('/images/garantias/abajo.png');
    }

    /* Cuando la tarjeta está abierta, cambia la imagen */
    .card.open .arrow-icon {
        content: url('/images/garantias/arriba.png');
    }

    /* Imagen base: centrada y responsiva */
    .tia-merco {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 240px;
        height: auto;
        transition: opacity 0.5s ease;
    }

    /* Imagen visible solo cuando la tarjeta está cerrada */
    .card .tia1 {
        opacity: 1;
    }
    .card.open .tia1 {
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }

    /* Imagen visible solo cuando la tarjeta está abierta */
    .card .tia1-content {
        opacity: 0;
    }
    .card.open .tia1-content {
        opacity: 1;
    }
    
    @media (min-width: 1200px){

        .parte1 {
            background-image: url('/images/garantias/patron.png'); /* usa tu ruta */
            background-size: cover;
            background-repeat: no-repeat;
        }
        .Headgarantias {
            background-image: url('/images/garantias/Slideweb2.png'); /* Aquí colocarás la nueva imagen */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            min-height: 130vh; /* Ajustar para que no sea tan grande */
        }

        .centrar img{
            width: 100% !important;
        }

        .textoambiente1 img{
            width: 60% !important;
        }

        .centrar{
            display: grid;
            justify-content: center;
            align-items: center;
        }

        .card p{
            font-size: .85vw;
        }

        .card-content p{
            font-size: 1vw;
        }

        .aux{
            display: none;
        }

        .card{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            padding: 2vh;
            padding-bottom: 0;
        }

        /* Para que todas las columnas tengan la misma altura en fila */
        .row {
            display: flex;
            align-items: stretch;
        }

        /* Aseguramos que las imágenes estén abajo */
        .tia1,
        .tia1-content {
            display: block;
            margin-top: auto;
            align-self: center;
            max-height: 225px; /* Ajusta según tu diseño */
            width: auto;
        }

        .textoambiente1 {
            margin-top: 8vh;
        }

        .textoambiente1 h1{
            font-size: 2vw;
            padding: 1vw;
            padding-bottom: 0;
            padding-top: 0;
            font-family: 'Mansfield Light';
        }

        .textoambiente1 h2{
            font-size: 2vw;
            color: #fff;
            padding: 1vw;
            font-family: 'Mansfield Bold';
            width: 80%;
        }
 
        .bold{
            font-size: 1vw;
        }

        .nobold{
            font-size: 1vw;
        }

        .parte1web{
            margin-bottom: 7vh;
        }

    }


    @media (min-width: 768px) and (max-width: 1199px) {
        .textoambiente1 h1 {
            font-size: 5vw;
            padding: 12vw;
            font-family: 'Mansfield Light';
            text-align: center;
            padding-bottom: 2vw;
            padding-top: 2vw;
        }

        .textoambiente1 h2{
            font-size: 5vw;
            color: #fff;
            padding: 4vw;
            font-family: 'Mansfield Bold';
            text-align: center;
        }

        .bold{
            font-size: 3vw;
        }

        .nobold{
            font-size: 3vw;
        }

    }

    @media (max-width: 767px) {

        .textoambiente1 h1{
            font-size: 8vw;
            padding: 4vw;
            font-family: 'Mansfield Light';
            text-align: center;
            padding-bottom: 2vw;
            padding-top: 2vw;
        }

        .textoambiente1 h2{
            font-size: 7vw;
            color: #fff;
            padding: 4vw;
            font-family: 'Mansfield Bold';
            text-align: center;
        }
    }

    /* iPhone y móviles similares */
    @media (max-width: 430px) and (max-height: 932px) {
        .Headgarantias {
            background-image: url('/images/garantias/Slide.png');
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            width: 100%;
            min-height: 100vh;
            margin-top: 10vh;
        }
    }

    /* Galaxy Z Fold 5 y móviles muy altos */
    @media (max-width: 430px) and (min-height: 933px) {
        .Headgarantias {
            background-image: url('/images/garantias/Slide.png');
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            width: 100%;
            min-height: 80vh;
            margin-top: 10vh;
        }
    }

    /* Asus Zenbook Fold y tablets plegables */
    @media (min-width: 1024px) and (max-width: 1366px) and (min-height: 1800px) {
        .Headgarantias {
            background-image: url('/images/garantias/Slide.png');
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            width: 100%;
            min-height: 120vh;
            margin-top: 10vh;
        }
    }

    /* Tablets normales */
    @media (min-width: 768px) and (max-width: 1023px) {
        .Headgarantias {
            background-image: url('/images/garantias/Slide.png');
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            width: 100%;
            min-height: 90vh;
            margin-top: 10vh;
        }
    }

    /* Móviles generales - fallback */
    @media (max-width: 767px) {
        .Headgarantias {
            background-image: url('/images/garantias/Slide.png');
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            width: 100%;
            min-height: 90vh;
            margin-top: 10vh;
        }
    }

    /* Estilos generales para todos los dispositivos menores a 1200px */
    @media (max-width: 1199px) {
        .backgroundgeneralambiente {
            background: url('/images/medioambiente/fondogenerallargo.png') center center / cover repeat;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            min-height: 100%;
            padding-bottom: 5vh;
            margin-bottom: 2vh;
        }

        .textoambiente1 img{
            width: 100%;
        }
    }

    .garantias-txt{
        object-fit: cover;
        object-position: center;
        width: 95%;
    }