/**
 * Theme Name:     Avisopolis Theme
 * Author:         Pymeconsultoria.cl
 * Template:       twentytwentyfour
 * Text Domain:    avisopolis-theme
 * Description:    Avisopolis Theme based on Twenty Twenty-Four
 */

/* Variantes de peso de la fuente Rajdhani */
.rajdhani-light { font-weight: 300 !important; }
.rajdhani-regular { font-weight: 400 !important; }
.rajdhani-medium { font-weight: 500 !important; }
.rajdhani-semibold { font-weight: 600 !important; }
.rajdhani-bold { font-weight: 700 !important; }

/* Establecer la vista para dispositivos móviles */
@viewport {
    width: device-width;
    initial-scale: 1;
    maximum-scale: 1;
    user-scalable: no;
}

/* General */
html, body {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 400 !important;    
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Para evitar el desplazamiento horizontal */
}

/* Contenedor principal */
.container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Hacer que las imágenes y videos sean responsivos */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Asegurarse de que los textos no se desborden */
body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Márgenes laterales del 2,5% solo para títulos y párrafos */
h1, h2, h3, h4, h5, h6, p {
    margin-left: 2.5% !important;
    margin-right: 2.5% !important;
}

/* Botones y elementos interactivos */
button, .button {
    padding: 12px 20px;
    font-size: 16px;
    width: 100%;
    max-width: 300px;
    margin: 10px 0;
    box-sizing: border-box;
}

/* Asegurar que los contenedores se ajusten a la pantalla */
.row, .col, .section {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .header, .footer {
        text-align: center;
        padding: 20px;
    }

    /* Ajuste de texto */
    h1 {
        font-size: 1.4m;
        font-weight: 400;
        padding-left: 10% !important;
        padding-right: 10% !important;        
    }    
    
    h2, h3, h4, h5, h6, p {
        font-size: 1.2em;
        padding-left: 10% !important;
        padding-right: 10% !important;       
    }

    /* Formulario y elementos de contenido */
    .form-group, .content, .container {
        width: 100%;
        margin: 0 auto;
    }

    /* Botones y contenedores ajustados */
    .button, .btn {
        font-size: 14px;
        padding: 10px 15px;
    }

    /* Para asegurar que no haya desbordes en el contenido */
    .section, .content {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Media query para pantallas más pequeñas */
@media (max-width: 480px) {
    /* Ajuste de texto */
    h1 {
        font-size: 1.4m;
        font-weight: 400;
        padding-left: 10% !important;
        padding-right: 10% !important;       
    }    
    
    h2, h3, h4, h5, h6, p {
        font-size: 1.2em;
        padding-left: 10% !important;
        padding-right: 10% !important;          
    }

    /* Ajuste de imágenes en dispositivos pequeños */
    img {
        width: 100%;
        height: auto;
    }

    /* Ajustar las filas y columnas */
    .row, .col {
        width: 100%;
    }

    .container, .section {
        padding: 10px;
    }

    /* Reducir márgenes y ajustes para móviles muy pequeños */
    .button, .btn {
        font-size: 14px;
        padding: 8px 12px;
    }
}