body{
    font-family: Arial, sans-serif;
    margin:0;
    background-color:#F1F2F6;
}
/*Propiedades del Banner*/
header{
    color:#6C5CE7;
    text-shadow: #4f5152 2px 4px 4px;
    -webkit-text-stroke: 2px black;
    padding:75px;
    text-align:center;
    font-size: 2.5em;
}
/*Efecto de desenfoque en el banner*/
header::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background-image: url('/imagenes/banner.jpeg');
    z-index: -1;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    filter: blur(2px);
}
/*Propiedades del logo*/
#logo{
    height: 150px;
    vertical-align: middle;
}
/*Propiedades de la caja nav*/
nav{
    background:#2D3436;
    padding:15px;
    text-align:center;
    position: sticky;
    top: 0;
    z-index: 1000;
}
nav a:hover{
    color:#6C5CE7;
}
/*Propiedades del menu de navegacion*/
.menu{
    position: relative;
    display: row;
    align-items: center;
    display:inline-block;
    margin-right: 150px;
}
.menu a{
    color:white;
    margin:40px;
    text-decoration:none;
    font-weight:bold;
    font-size: 1.2em;
}
/*Propiedades del submenu para los servicios*/
.submenu{
    display:inline-block;
    position:relative;
}
.submenu-contenido{
    display:none;
    position:absolute;
    background:white;
    min-width:200px;
    box-shadow:0px 5px 10px rgba(0,0,0,0.2);
    border-radius:5px;
}
.submenu-contenido a{
    color:#2D3436;
    padding:12px;
    display:block;
    text-decoration:none;
}
.submenu-contenido a:hover{
    background:#6C5CE7;
    color:white;
}
.submenu:hover .submenu-contenido{
    display:block;
}

/*Propiedades del saludo y subtitulo de la pagina*/
#titulo{
    color:#6C5CE7;
    text-align:center;
    font-size: 4.5em;
    -webkit-text-stroke: 2px black;
}
#subtitulo{
    text-align: center;
    color:#2D3436;
    font-size: 1.5em;
    margin-top: 20px;
}
/*Propiedades de las descripciones de cada elemento de muestra*/
.descripcion{
    color:#2D3436;
    font-size: 1.4em;
    margin-top: 20px;
}

/*Propiedades de las secciones de cada elemento de muestra*/
section{
    padding:40px;
}
/*Propiedades para las cartas que contienen cada elemento de muestra*/
.carta{
    background:white;
    padding:20px;
    margin:20px;
    border-radius:10px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
}
.portafolio{
    background:white;
    padding:20px;
    margin:20px;
    border-radius:10px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/*Propiedades para cada boton en la pagina*/
.boton{
    background:#6C5CE7;
    color:white;
    border-radius: 20px;
    padding:10px 20px;
    cursor:pointer;
    text-decoration: none;
    display: inline-block;
}
.boton:hover{
    background:#4e41b3;
    transition: 0.3s;
}
/*Propiedades del video publicitario*/
iframe{
    margin-top:20px;
    border-radius:15px;
    margin-left: 25%;
}
/*Propiedades para cada imagen de muestra en los servicios*/
.muestras{
    width: 80%;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 10%;
}

/*Propiedades para el slider que muestra el portafolio de la pagina*/
.carousel {
    position: center;
    width: 80%;
    max-width: 1200px;
    height: 600px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px; /* para ligero efecto 3D */
    margin-bottom: 30px;
}
.carousel img {
    position: absolute;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.4s ease;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    will-change: transform, opacity;
    user-select: none;
    max-width: 80%;
    height: 70%;
    display: block;
    margin-bottom: 2%;
}

/*Propiedades del pie de pagina*/
footer{
    height: 250px;
    background:#2D3436;
    color:white;
    text-align:center;
    padding:15px;
    margin-top:40px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
/*caja para logo y derechos separados en el pie de pagina*/
#footer-izq{
    display: flex;
    flex-direction: column;
    margin-right: 8%;
    margin-left: 3%;
}
#footer-izq #logo{
    height: 220px;
}

/*Propiedades para la seccion de contactos en el pie de pagina*/
#contactos{
    margin-top: 30px;
    margin-bottom: 15px;
    margin-right: 8%;
    display: flex;
    flex-direction: column;
}
#contactos ul li{
    list-style: none;
    height: 5vh;
    flex-direction: row;
    margin-left: 70px;
    margin-right: 40px;
    margin-bottom: 0px;
    font-size: 1.2rem;
    display: flex;
    white-space: nowrap;
}
/*Propiedades para los enlaces de contacto en el pie de pagina*/
.footer-links{
    text-decoration: none;
    color: white;
}
.footer-links:hover{
    color: #6C5CE7;
    transition: 0.3s;
}
.iconos-contacto{
    margin-right: 10px;
}

/*Propiedades para los botones de redes sociales en el pie de pagina*/
.redes-sociales {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}
.btn-red-social {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}
.btn-red-social.facebook { 
    background: #3b5998; 
}
.btn-red-social.instagram { 
    background: #e4405f; 
}
.btn-red-social.whatsapp { 
    background: #25d366; color: #222; 
}
.btn-red-social.correo { 
    background: #444; 
}
.btn-red-social:hover {
    filter: brightness(1.2);
    color: #fff;
}