/* ===============================================
   MEJORAS DE LAYOUT - VERSIÓN CONSERVADORA
   Corrige problemas específicos sin romper el diseño existente
   =============================================== */

/* ===== CORRECCIONES ESPECÍFICAS PARA CONTENEDOR ===== */

/* Hacer el contenedor más flexible pero mantener compatibilidad */
.holder960 {
    max-width: 1200px;
    min-width: 960px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== CORRECCIONES PARA SECCIONES DE CARACTERÍSTICAS ===== */

/* Centrar correctamente las secciones */
.features {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mejorar espaciado entre grupos de características */
.featureHolder {
    margin-bottom: 30px;
    margin-top: 50px;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    width: 100%;
}

/* Ajustar ancho de características individuales */
.featureSingle {
    margin-right: 0 !important;
    width: 285px;
    float: none !important;
    display: inline-block;
    text-align: left;
}

.featureSingle:last-child {
    margin-right: 0;
}

/* Ajustar descripción para mejor ajuste */
.desc {
    width: 200px;
    overflow: hidden;
}

/* ===== CORRECCIONES PARA TABLAS DE PRECIOS ===== */

/* Contenedor de precios más flexible y centrado */
#pricingContainer {
    overflow: hidden;
    margin-top: 50px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* Ajustar ancho de tablas de precios */
.pricingtbl ul {
    width: 290px;
    margin-right: 0 !important;
    float: none !important;
    display: inline-block;
}

.pricingtbl ul:last-child {
    margin-right: 0;
}

/* ===== CORRECCIONES PARA SECCIONES DE CONTENIDO ===== */

/* Mejorar contenedores de introducción */
.aboutIntro,
.galleryIntro,
.pricingIntro {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    width: 100% !important;
}

/* ===== CORRECCIONES RESPONSIVE SUAVES ===== */

/* Tablets - ajustes menores */
@media only screen and (max-width: 1024px) {
    .holder960 {
        min-width: 900px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .featureSingle {
        width: 270px;
        margin-right: 0;
    }
    
    .pricingtbl ul {
        width: 280px;
        margin-right: 0;
    }
}

/* Tablets medianas */
@media only screen and (max-width: 900px) {
    .holder960 {
        min-width: 800px;
    }
    
    .featureSingle {
        width: 250px;
        margin-right: 0;
    }
    
    .pricingtbl ul {
        width: 260px;
        margin-right: 0;
    }
}

/* ===== CORRECCIONES ESPECÍFICAS PARA ELEMENTOS ===== */

/* Mejorar botones */
.signupBtn a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Mejorar texto */
.desc h2,
.desc p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ===== CORRECCIONES PARA CLEARFIX ===== */

/* Asegurar que clearfix funcione correctamente */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* ===== CORRECCIONES PARA OVERFLOW ===== */

/* Prevenir desbordamiento horizontal */
body {
    overflow-x: hidden;
}

#wrapper {
    overflow-x: hidden;
}

/* ===== CORRECCIONES PARA ESPACIADO ===== */

/* Mejorar espaciado general */
.section {
    overflow: hidden;
}

/* Ajustar padding de secciones */
#about.section {
    padding-bottom: 70px;
}

#pricing.section {
    padding-bottom: 70px;
}