/* Estilos generales */
* {
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
}

/* Contenedor y filas */
.contenedor, .fila {
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
}

.fila {
    clear: both;
    display: table;
}

/* Sistema de columnas base */
[class*="col-"] {
    float: left;
    padding: 20px;
}

/* Clases para ocultar elementos */
.col-lg-0, .col-md-0, .col-sm-0, .col-xs-0 {
    display: none;
}

/* Pantallas grandes (lg) - ≥1200px */
@media (min-width: 1200px) {
    .col-lg-1 { width: 8.33333%; }
    .col-lg-2 { width: 16.66667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.33333%; }
    .col-lg-5 { width: 41.66667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.33333%; }
    .col-lg-8 { width: 66.66667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.33333%; }
    .col-lg-11 { width: 91.66667%; }
    .col-lg-12 { width: 100%; }
    
    /* Offset para lg */
    .col-lg-offset-1 { margin-left: 8.33333%; }
    .col-lg-offset-2 { margin-left: 16.66667%; }
    .col-lg-offset-3 { margin-left: 25%; }
    .col-lg-offset-4 { margin-left: 33.33333%; }
    .col-lg-offset-5 { margin-left: 41.66667%; }
    .col-lg-offset-6 { margin-left: 50%; }
    .col-lg-offset-7 { margin-left: 58.33333%; }
    .col-lg-offset-8 { margin-left: 66.66667%; }
    .col-lg-offset-9 { margin-left: 75%; }
    .col-lg-offset-10 { margin-left: 83.33333%; }
    .col-lg-offset-11 { margin-left: 91.66667%; }
    
    /* Media query específica para imagen del artículo */
    #seccion4 article p img {
        width: 50%;
    }
}

/* Pantallas medianas (md) - 992px a 1199px */
@media (max-width: 1199px) and (min-width: 992px) {
    .col-md-1 { width: 8.33333%; }
    .col-md-2 { width: 16.66667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.33333%; }
    .col-md-5 { width: 41.66667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.33333%; }
    .col-md-8 { width: 66.66667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.33333%; }
    .col-md-11 { width: 91.66667%; }
    .col-md-12 { width: 100%; }
    
    /* Offset para md */
    .col-md-offset-1 { margin-left: 8.33333%; }
    .col-md-offset-2 { margin-left: 16.66667%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.33333%; }
    .col-md-offset-5 { margin-left: 41.66667%; }
    .col-md-offset-6 { margin-left: 50%; }
    .col-md-offset-7 { margin-left: 58.33333%; }
    .col-md-offset-8 { margin-left: 66.66667%; }
    .col-md-offset-9 { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.33333%; }
    .col-md-offset-11 { margin-left: 91.66667%; }
    
    /* Media query específica para imagen del artículo */
    #seccion4 article p img {
        width: 60%;
    }
}

/* Pantallas pequeñas (sm) - 768px a 991px */
@media (max-width: 991px) and (min-width: 768px) {
    .col-sm-1 { width: 8.33333%; }
    .col-sm-2 { width: 16.66667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.33333%; }
    .col-sm-5 { width: 41.66667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.33333%; }
    .col-sm-8 { width: 66.66667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.33333%; }
    .col-sm-11 { width: 91.66667%; }
    .col-sm-12 { width: 100%; }
    
    /* Offset para sm */
    .col-sm-offset-1 { margin-left: 8.33333%; }
    .col-sm-offset-2 { margin-left: 16.66667%; }
    .col-sm-offset-3 { margin-left: 25%; }
    .col-sm-offset-4 { margin-left: 33.33333%; }
    .col-sm-offset-5 { margin-left: 41.66667%; }
    .col-sm-offset-6 { margin-left: 50%; }
    .col-sm-offset-7 { margin-left: 58.33333%; }
    .col-sm-offset-8 { margin-left: 66.66667%; }
    .col-sm-offset-9 { margin-left: 75%; }
    .col-sm-offset-10 { margin-left: 83.33333%; }
    .col-sm-offset-11 { margin-left: 91.66667%; }
    
    /* Media query específica para imagen del artículo */
    #seccion4 article p img {
        width: 100%;
    }
}

/* Pantallas móviles (xs) - <768px */
@media (max-width: 767px) {
    .col-xs-1 { width: 8.33333%; }
    .col-xs-2 { width: 16.66667%; }
    .col-xs-3 { width: 25%; }
    .col-xs-4 { width: 33.33333%; }
    .col-xs-5 { width: 41.66667%; }
    .col-xs-6 { width: 50%; }
    .col-xs-7 { width: 58.33333%; }
    .col-xs-8 { width: 66.66667%; }
    .col-xs-9 { width: 75%; }
    .col-xs-10 { width: 83.33333%; }
    .col-xs-11 { width: 91.66667%; }
    .col-xs-12 { width: 100%; }
    
    /* Media query específica para imagen del artículo */
    #seccion4 article p img {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* ESTILOS DEL HEADER */
header #logo {
    font-family: "Kaushan Script", cursive;
    font-size: 50px;
    text-align: center;
    line-height: 60px;
}

header #logo img {
    max-width: 100%;
    height: auto;
    max-height: 60px;
    display: block;
    margin: 0 auto;
}

header p {
    width: 42px;
    line-height: 42px;
    border-radius: 100%;
    background: #ccc;
    color: white;
    text-align: center;
    margin: 0 auto;
}

header p#icono1 {
    background: blue;
}

header p#icono2 {
    background: green;
}

header p#icono3 {
    background: red;
}

/* ESTILOS DE NAVEGACIÓN */
nav ul li {
    padding: 10px;
    text-align: center;
}

nav ul li a {
    display: block;
    background: rgb(104, 22, 104);
    font-family: "Kaushan Script", cursive;
    color: white;
    line-height: 48px;
}

nav ul li a:hover {
    background: rosybrown;
}

nav ul li a:active {
    background: rgb(224, 22, 224);
}

/* ESTILOS SECCIÓN 3 - IMÁGENES */
#seccion3 div {
    padding: 20px;
    text-align: center;
}

#seccion3 img {
    border-radius: 100%;
    width: 200px;
    height: 200px;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

#seccion3 h1 {
    font-family: "Kaushan Script", cursive;
    font-size: 40px;
    padding: 10px;
}

#seccion3 p {
    padding: 10px;
}

/* ESTILOS SECCIÓN 4 - CONTENIDO Y FORMULARIO */
#seccion4 aside ul li {
    background: violet;
    padding: 10px;
    margin: 2px 10px;
    list-style: square;
}

#seccion4 article h1 {
    font-family: "Kaushan Script", cursive;
    font-size: 40px;
    margin: 20px;
}

#seccion4 article p img {
    float: left;
    margin-right: 20px;
}

#seccion4 article p {
    margin: 5px 20px;
    font-size: 14px;
    text-align: justify;
}

#seccion4 aside#der h1 {
    line-height: 50px;
    text-align: center;
}

#seccion4 aside#der input {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
}

/* ESTILOS DEL FOOTER */
footer {
    padding: 20px 10px;
}

footer div {
    background: rgb(156, 14, 156);
    text-align: center;
    line-height: 50px;
    color: white;
}