/* ===================================================
   ESTILOS PERSONALIZADOS - PIDIENDOTE WEB
   Corrección de botones verdes hover
   =================================================== */

/* Botones Element Plus de tipo success en la sección join-us */
.join-sections .el-button--success {
    background-color: #3ecf8e !important;
    border-color: #3ecf8e !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.join-sections .el-button--success:hover,
.join-sections .el-button--success:focus {
    background-color: #2eb76b !important;
    border-color: #2eb76b !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(62, 207, 142, 0.3) !important;
}

/* Botones Element Plus success en general para consistencia */
.el-button--success.is-plain {
    background-color: #3ecf8e !important;
    border-color: #3ecf8e !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.el-button--success.is-plain:hover,
.el-button--success.is-plain:focus {
    background-color: #2eb76b !important;
    border-color: #2eb76b !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(62, 207, 142, 0.3) !important;
}

/* Botones Element Plus redondos (round) */
.el-button--success.is-round {
    background-color: #3ecf8e !important;
    border-color: #3ecf8e !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.el-button--success.is-round:hover,
.el-button--success.is-round:focus {
    background-color: #2eb76b !important;
    border-color: #2eb76b !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(62, 207, 142, 0.3) !important;
}

/* Asegurar que el texto se mantenga blanco */
.el-button--success span,
.el-button--success.is-plain span,
.el-button--success.is-round span {
    color: #fff !important;
}

.el-button--success:hover span,
.el-button--success:focus span,
.el-button--success.is-plain:hover span,
.el-button--success.is-plain:focus span,
.el-button--success.is-round:hover span,
.el-button--success.is-round:focus span {
    color: #fff !important;
}

/* ===================================================
   CORRECCIÓN DE COLOR ROJO EN TÍTULO "PIDIENDOTE.COM"
   Cambio de rojo claro a rojo más fuerte
   =================================================== */

/* Sobrescribir color warm-pink para un rojo más fuerte */
.warm-pink {
    color: #dc2626 !important; /* Rojo fuerte y vibrante */
}

/* ===================================================
   CENTRADO DE CONTENIDO EN PÁGINAS ESTÁTICAS
   Mejora visual para páginas de contenido
   =================================================== */

/* Centrar contenido en páginas estáticas (Política, Términos, etc.) */
.container .row .col-md-8 .text-left {
    text-align: center !important;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Mejorar legibilidad del texto centrado */
.container .row .col-md-8 .text-left p,
.container .row .col-md-8 .text-left div {
    text-align: justify !important;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Mantener títulos centrados */
.container .row .col-md-8 .text-left h1,
.container .row .col-md-8 .text-left h2,
.container .row .col-md-8 .text-left h3,
.container .row .col-md-8 .text-left h4,
.container .row .col-md-8 .text-left h5,
.container .row .col-md-8 .text-left h6 {
    text-align: center !important;
    margin-top: 25px;
    margin-bottom: 15px;
}

/* Centrar listas también */
.container .row .col-md-8 .text-left ul,
.container .row .col-md-8 .text-left ol {
    text-align: left !important;
    max-width: 600px;
    margin: 15px auto;
}