@charset "UTF-8";
/*
*******************************
©2025 MSD https://ms-ar.com
*******************************
*/

/* Archivo CSS optimizado y organizado */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
/* Variables CSS */ :root {
   --fuente: 'Nunito', sans-serif;
   --cuerpo: 2.5vh;
    --doble: calc(var(--cuerpo) * 2);
   /* Dimensiones */
   --h-vp: 100vh;
   --w-vp: 100vw;
   --refer: 4.5vh;
   --pleno: 100%;
   --tercio: calc(var(--pleno) / 3);
   --propo: 9 / 21;
   --raz: calc(var(--propo));
   --anchor: 90%;
   --altor: calc(100vh - 10vw);
   --cabeza: 20vh;
   --marca: calc(var(--cabeza) * 2 / 5);
   --over: calc(var(--marca) * 5 / 4);
   /* Dado */
   --lado: 10vh;
   --pod: calc(.5 * var(--lado));
   --nod: calc(-.5 * var(--lado));
   --cen: calc(var(--lado) * 2);   
   /* Colores */
   --trans: transparent;
   --hue: 264;
   --oscuro: hsl(var(--hue), var(--pleno), 25%);
   --medio: hsl(var(--hue), 50%, 50%);
   --claro: hsl(var(--hue), var(--pleno), 50%);
   --brillo: #fff;
   --mate: hsl(var(--hue), calc(var(--tercio)*2), var(--tercio));
   --pale: hsl(var(--hue), var(--pleno), 85%);
   --velo: hsla(var(--hue), var(--pleno), 25%, .9);
   --velorio: #000c;
   --volumen: 1px 2px 8px 1px hsla(var(--hue), var(--pleno), 50%, .5);
   --eleva: 0 2px 10px 2px hsla(var(--hue), var(--pleno), 25%, .5);
   --estampa: 0 1px 2px #000a;
   /* Animaciones */
   --lap: 2s;
   --dur: .5s;
   --tim: ease-in-out;
   --incr: .25s;
   --ease: var(--incr) var(--tim);
   /* Background */
   --icono: url('pix/icon.svg');
}
/* Reseteo de estilos base */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html {
   font-size: 10px;
   font-size: 62.5%;
}
body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: var(--h-vp);
   font-family: var(--fuente);
   font-size: var(--cuerpo);
   font-weight: 400;
   line-height: 1.5;
   color: #000;
   background-color: var(--brillo);
   -webkit-text-size-adjust: none;
   transition: var(--ease);
}
/* Listas */
ol, ul, li {
   list-style: none;
   margin: 0;
   padding: 0;
}
/* Enlaces */
a {
   color: gray;
   border-bottom: 1px dotted transparent;
   text-decoration: none;
}
label, .label {
   display: none;
}
/* Secciones principales */
.envoltura {
   position: absolute;
   top: 0;
   left: 0;
   width: var(--w-vp);
   height: var(--h-vp);
}
#contenido {
   height: var(--h-vp);
   width: var(--w-vp);
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}
/* Contenido efectivo */
#caja {
   position: absolute;
   max-width: var(--anchor);
   height: var(--altor);
   aspect-ratio: var(--propo);
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   border-radius: calc(var(--refer) / 3);
   background-image: linear-gradient(#ffffff, #f8f8f8, #efefef, #e0e0e0, #cccccc);
   box-shadow: var(--eleva);
   overflow: hidden;
}
#contenedor {
   position: relative;
   width: 75%;
   height: var(--pleno);
   text-align: center;
   cursor: default;
}
/* Divisiones */
#contenedor section {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: visible;
   transition: var(--ease);
}
/* Marcado */
#marca a {
   position: relative;
   display: flex;
   height: var(--cabeza);
   transition: 1s ease;
}
#marca a:hover .cubo {
   animation: quietud 1s ease forwards;
}

#marca h1 {
   display: none;
}
/* Secciones de elementos (botonera) */
#items {
   position: relative;
}
#items ul {
   display: flex;
   justify-content: center;
   align-items: center;
    overflow: visible;
}
#items .label {
   display: inline;
   font-family: var(--fuente);
   font-size: 80%;
   font-weight: 600;
   overflow: visible;
   transition: var(--ease);
}
/* Elementos (botones) */
#elem {
   align-content: center;
   background-color: var(--trans);
   display: flex;
   flex-wrap: wrap;
}
#elem li {
   flex: 50%;
}
#elem a {
   -webkit-tap-highlight-color: #0000;
   -webkit-touch-callout: none;
}
#elem a:hover {
   color: var(--oscuro);
}
#elem a:before {
   color: var(--brillo);
   background: var(--mate);
   border: 2px solid var(--trans);
   border-radius: var(--pleno);
   display: block;
   font-size: var(--refer);
   width: calc(var(--refer) * 1.8);
   height: calc(var(--refer) * 1.8);
   line-height: 1.8;
   margin: calc(var(--cuerpo)/3) 0;
   position: relative;
   text-align: center;
   transition: var(--ease);
}
#elem a:hover:before {
   color: var(--brillo);
   border-color: var(--brillo);
   box-shadow: var(--volumen);
}
a[class^="fa"]:hover:before {
   text-shadow: var(--estampa);
   z-index: 10;
}
/* Efectos de hover para íconos específicos */
#elem a.fa-share:hover::before {
   background: var(--claro);
}
#elem a.fa-facebook:hover::before {
   background: #06f;
}
#elem a.fa-instagram:hover::before {
   background: linear-gradient(0deg, #fd7, #f72, #d37, #93c, #45d);
}
#elem a.fa-x-twitter:hover::before {
   background: #000;
}
#elem a.fa-whatsapp:hover::before {
   background: #0c4;
}
#elem a.fa-contact-book:hover::before {
   background: #f08;
}
#elem a.fa-phone:hover::before {
   background: green;
}
#elem a.fa-share-nodes:hover::before {
   background: #c00;
}
/* Pie de página */
footer {
   position: absolute;
   bottom: 0;
   width: var(--pleno);
   height: var(--refer);
   font-size: 75%;
   line-height: 120%;
   color: var(--brillo);
   background: var(--mate);
   display: flex;
   justify-content: center;
   align-items: center;
}
footer:hover {
   background: var(--oscuro);
   font-weight: bold;
}
footer a {
   color: var(--brillo);
   outline: 0;
   transition: var(--ease);
}
/* Fondo */
#textura {
   position: fixed;
   z-index: -1;
   width: var(--w-vp);
   height: var(--h-vp);
   top: 0;
   left: 0;
   background-color: var(--medio);
   background-image: var(--icono);
   background-repeat: repeat;
   background-position: center;
   background-size: var(--refer);
   background-blend-mode: multiply;
   opacity: .15;
}