/* ===============================
   ACORDEÓN DE SERVICIOS
   =============================== */

/* 🔹 Contenedor principal del acordeón */
.acordeon-container {
    width: 90%;
    /* Ocupa el 90% del ancho del contenedor padre */
    max-width: 800px;
    /* Evita que se haga demasiado ancho en pantallas grandes */
    margin: 30px auto;
    /* Centra el acordeón y deja espacio arriba/abajo */
    font-family: 'Poppins', sans-serif;
    /* Fuente moderna para el texto */
}

/* 🔹 Texto pequeño de instrucción (“Haz clic para ver más detalles”) */
.indicacion {
    font-style: italic;
    /* Texto en cursiva */
    font-size: 14px;
    /* Tamaño pequeño */
    text-align: right;
    /* Alineado a la derecha */
    color: #555;
    /* Color gris suave */
    margin-bottom: 10px;
    /* Espacio debajo del texto */
}

/* 🔹 Cada bloque del acordeón (botón + contenido) */
.acordeon-item {
    margin-bottom: 10px;
    /* Espacio entre cada bloque */
    border: 1px solid #d00;
    /* Borde rojo del contenedor */
    border-radius: 6px;
    /* Esquinas redondeadas */
    overflow: hidden;
    /* Oculta el contenido que se desborda */
}

/* 🔹 Botón que se puede hacer clic (título del bloque) */
.acordeon-btn {
    width: 100%;
    /* Ocupa todo el ancho del bloque */
    background-color: #222;
    /* Fondo negro/gris oscuro */
    color: white;
    /* Texto blanco */
    text-align: left;
    /* Alinea el texto a la izquierda */
    padding: 14px 18px;
    /* Espaciado interno */
    font-weight: 600;
    /* Texto en negrita */
    border: none;
    /* Quita el borde por defecto */
    outline: none;
    /* Quita el contorno azul al hacer clic */
    cursor: pointer;
    /* Cambia el cursor al pasar por encima */
    position: relative;
    /* Permite colocar el símbolo “+” a la derecha */
    transition: background 0.3s ease;
    /* Suaviza el cambio de color al abrir */
}

/* 🔹 Agrega el símbolo “+” al lado derecho del botón */
.acordeon-btn::after {
    content: '+';
    /* Ícono por defecto (cuando está cerrado) */
    position: absolute;
    /* Posiciona en relación al botón */
    right: 20px;
    /* Separado 20px del borde derecho */
    font-size: 20px;
    /* Tamaño del símbolo */
    transition: transform 0.3s ease;
    /* Suaviza el efecto al rotar */
}

/* 🔹 Estado del botón cuando está activo (abierto) */
.acordeon-btn.active {
    background-color: #d00;
    /* Cambia el fondo a rojo */
}

/* 🔹 Cambia el símbolo “+” a “−” cuando el bloque está abierto */
.acordeon-btn.active::after {
    content: '−';
    /* Reemplaza el signo + por un − */
    transform: rotate(180deg);
    /* Le da una ligera animación */
}

/* 🔹 Contenedor oculto del contenido del acordeón */
.acordeon-content {
    background: #f8f8f8;
    /* Fondo gris claro */
    max-height: 0;
    /* Altura inicial: 0 (oculto) */
    overflow: hidden;
    /* Oculta el texto hasta que se abra */
    transition: max-height 0.4s ease, padding 0.3s ease;
    /* Suaviza la apertura */
    padding: 0 18px;
    /* Espaciado lateral, pero sin padding vertical (0px arriba/abajo) */
}

/* 🔹 Estilo de la lista dentro del acordeón */
.acordeon-content ul {
    margin: 15px 0;
    /* Margen arriba y abajo */
    padding-left: 20px;
    /* Sangría para las viñetas */
}

/* 🔹 Espaciado entre los elementos de la lista */
.acordeon-content li {
    margin-bottom: 5px;
    /* Espacio entre líneas */
}

/* 🔹 Cuando el contenido está abierto */
.acordeon-content.open {
    padding: 15px 18px;
    /* Añade padding vertical al mostrarse */
}

/* =======================================================
   🚀 RESPONSIVE PRO - ACORDEÓN DE SERVICIOS
   ======================================================= */

/* 📱 Teléfonos pequeños (hasta 480px) */
@media (max-width: 480px) {
    .acordeon-container {
        width: 94%;
        margin: 20px auto;
        gap: 0.8rem;
    }

    .acordeon-btn {
        font-size: 0.95rem;
        padding: 13px 14px;
        border-radius: 8px;
        transition: background 0.3s ease, transform 0.2s ease;
    }

    .acordeon-btn:hover {
        transform: scale(1.02);
        background-color: #b30000;
    }

    .acordeon-content {
        font-size: 0.9rem;
        line-height: 1.6;
        padding: 10px 16px;
    }
}

/* 📱 Móviles medianos (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .acordeon-container {
        width: 90%;
    }

    .acordeon-btn {
        font-size: 1rem;
        padding: 14px 16px;
    }

    .acordeon-content {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* 💻 Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .acordeon-container {
        width: 85%;
        margin: 40px auto;
    }

    .acordeon-btn {
        font-size: 1.05rem;
        letter-spacing: 0.3px;
    }

    .acordeon-content {
        font-size: 1.05rem;
        line-height: 1.8;
        padding: 15px 20px;
    }
}

/* 🖥️ Laptops (1025px - 1399px) */
@media (min-width: 1025px) and (max-width: 1399px) {
    .acordeon-container {
        width: 80%;
    }

    .acordeon-btn {
        font-size: 1.1rem;
        padding: 16px 22px;
        border-radius: 10px;
    }

    .acordeon-content {
        font-size: 1.05rem;
        line-height: 1.9;
    }
}

/* 🖥️💎 Ultra Wide / 4K (1400px o más) */
@media (min-width: 1400px) {
    .acordeon-container {
        width: 70%;
        margin: 50px auto;
    }

    .acordeon-btn {
        font-size: 1.2rem;
        padding: 18px 24px;
        border-radius: 12px;
        letter-spacing: 0.5px;
    }

    .acordeon-content {
        font-size: 1.15rem;
        line-height: 2;
        padding: 18px 24px;
    }
}