/*Box model*/
/*Tipografia*/
/*Visuales*/
/*Otros*/
:root{
    /*Colores*/
    --color_Black: #000000;
    --color_White: #FFFFFF;
    --color_VistaBlue: #23106A;
    --color_SoftVistta: #d3cde9;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
	max-width: 2000px;
	margin: 0 auto;
	background: black;
}

body {
	background: white;
}
	

/*Encabezado*/

header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 370px;
    text-align: center;
    background: linear-gradient(207.8deg, #5794bd 16.69%, #555497 100%);
}

header img {
    width: 150px;
    height: auto;  
    align-self: center;
}

.header--tittle-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 2px;
    text-align: center;
    align-self: center;
}

.header--tittle-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--color_White);
}

.header--tittle-container p {
    margin-top: 5px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--color_SoftVistta);
}

.header--tittle-container .header--button {
    position: absolute;
    left: calc(50% - 150px);
    top: 300px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 300px;
    height: 68px;
    background-color: var(--color_White);
    /* Sombra */
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    align-content: center;
    color: var(--color_Black);
}

.header--tittle-container .header--button span {
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 20px;
    margin-left: 10px;
    background-image: url('../assets/icons/Golden-vista.png');   
    background-size: cover; 
}

/*Contenidos - slider*/

.main-allied_stores-container {
    width: 100%;
    height: auto;
    padding-top: 50px;
    text-align: center;
	overflow: hidden;
}

.main-allied_stores-container--slider {
    width: 1019px;
    height: 100px;    
    background-image: url('../assets/images/Vista-ally.png');
    background-size: cover;
    animation: slider 25s infinite linear;
}

@keyframes slider {
    to {
        background-position: 1019px;
    }
}

/*Contenidos - Titulo*/

.main-allied_stores-container--tittle {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin: 0 auto;
}

.main-allied_stores-container--tittle h2 {
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--color_Black);
}

/*Contenidos - introducción*/

.main-allied_stores-container--tittle p {
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}

/* Enlace Grillas */

.main-allied_stores-container--tittle .link-grillas {
	text-decoration: none;
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.6rem;
    color: #549CFF;
}

.link-grillas .link-grillas--icon {
    cursor: pointer;
    display: inline-block;
    width: 18px;
    height: 14px;
    margin-left: 3px;
    background-image: url('../assets/icons/Golden-vista.png');   
    background-size: cover; 
}


/*Contenidos - Tablas*/

/*Deslizar entre tablas dentro de un contenedor*/

.main-tables--slider-container {
    padding: 0 50px;
    display: flex;
    height: 400px;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.slider-next {
    display: inline-block;
    width: 8px;
    height: 15px;
    padding: 5px;
    margin: 15px;
    background-image: url('../assets/icons/right-arrow.svg');
    background-size: cover;
    align-self: center;
}

.slider-back {   
    display: inline-block;
    width: 8px;
    height: 15px;
    padding: 5px;
    margin: 15px;
    background-image: url('../assets/icons/left-arrow.png');
    background-size: cover;
    align-self: center;
}

/*estilos de las tablas*/

.main-products-table, .main-services-table {
    scroll-snap-align: center;
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 340px;
    margin: 0 auto;    
    font-family: "Inter", sans-serif;
}

.products-table--tittle, .services-table--tittle {
	display: inline-block;
	width: 100%;
	height: 5rem;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--color_VistaBlue)
}

.products-table--container, .services-table--container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 280px;
    margin: 0 auto;
}

.products-table--container table, .services-table--container table {
    width: 100%;
    height: 100%;
}

.products-table--container td, .services-table--container td {
    width: 70%;
    height: 60px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    padding: 0.5rem;
}

.products-table--container td {
    color: #757575;
    background-color: #f1eef8;
}

.services-table--container td {
    color: #535353;
    background-color: #e0e9f7;
}

.products-table--container .table__top-left, .services-table--container .table__top-left {
    border-radius: 15px 0 0 0;
}

.products-table--container .table__top-right, .services-table--container .table__top-right {
    border-radius: 0 15px 0 0;
}

.products-table--container .table__botton-left, .services-table--container .table__botton-left {
    border-radius: 0 0 0 15px;
}

.products-table--container .table__botton-right, .services-table--container .table__botton-right {
    border-radius: 0 0 15px 0;
}

.products-table--container .table__right, .services-table--container .table__right {
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #686868;
}

.internal-link-p1 span, .internal-link-p2 span, .internal-link-p3 span, .internal-link-p4 span, .internal-link-s1 span, .internal-link-s2 span, .internal-link-s3 span, .internal-link-s4 span {
    cursor: pointer;
    display: inline-block;    
}

/* iconos tabla */

.internal-link-p1 span {
    width: 50px;
    height: 50px;
    background-image: url('../assets/icons/POftal-l.png');
    background-size: cover;
}

.internal-link-p2 span {
    width: 50px;
    height: 50px;
    background-image: url('../assets/icons/Lens-l.png');
    background-size: cover;
}

.internal-link-p3 span {
    width: 50px;
    height: 50px;
    background-image: url('../assets/icons/CL-l.png');
    background-size: cover;
}

.internal-link-p4 span {
    width: 50px;
    height: 50px;
    background-image: url('../assets/icons/Liq-l.png');
    background-size: cover;
}

.internal-link-s1 span {
    width: 27px;
    height: 50px;
    background-image: url('../assets/icons/Cal-l.png');
    background-size: cover;
}

.internal-link-s2 span {
    width: 50px;
    height: 50px;
    background-image: url('../assets/icons/Color-l.png');
    background-size: cover;
}

.internal-link-s3 span {
    width: 50px;
    height: 50px;
    background-image: url('../assets/icons/Repa-l.png');
    background-size: cover;
}

.internal-link-s4 span {
    width: 30px;
    height: 20px;
    background-image: url('../assets/icons/V_Logo.png');
    background-size: cover;
}

/*Contenidos 2 - Tarjetas*/

.main-company-details {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: #0f0f0f;    
}

.company-details--vista-logo {
    position: absolute;
    height: 120px;    
    width: 120px;
    top: -60px;
    left: calc(50% - 60px);
    background-image: url('../assets/icons/Vista-web-logo.png');
    background-size: cover;
}

.company-details--tittle-p, .company-details--tittle-s {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}

.company-details--tittle-p h2, .company-details--tittle-s h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--color_White);    
}

.company-details--tittle-p p, .company-details--tittle-s p {
    margin-bottom: 20px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--color_SoftVistta);
}

.company-details--card-p1, .company-details--card-p2, .company-details--card-p3, .company-details--card-p4, .company-details--card-s1, .company-details--card-s2, .company-details--card-s3, .company-details--card-s4 {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    min-height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: #131212;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

/* Iconos de tarjetas */

.company-details--card-p1 .others-p {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    background-image: url(../assets/icons/POftal-d.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-details--card-s4 .others-s {
    display: inline-block;
    width: 47px;
    height: 40px;
    margin-bottom: 10px;
    background-image: url(../assets/icons/Silver-vista.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-details--card-p2 .lens {
    display: inline-block;
    width: 47px;
    height: 40px;
    margin-bottom: 10px;
    background-image: url(../assets/icons/Lens-d.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-details--card-p3 .contact-lens {
    display: inline-block;
    width: 47px;
    height: 40px;
    margin-bottom: 10px;
    background-image: url(../assets/icons/CL-d.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-details--card-p4 .liquids {
    display: inline-block;
    width: 47px;
    height: 40px;
    margin-bottom: 10px;
    background-image: url(../assets/icons/Liq-d.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-details--card-s1 .reshape {
	margin-left: 10px;
    display: inline-block;
    width: 20px;
    height: 40px;
    margin-bottom: 10px;
    background-image: url(../assets/icons/Cal-d.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-details--card-s2 .color {
    display: inline-block;
    width: 47px;
    height: 40px;
    margin-bottom: 10px;
    background-image: url(../assets/icons/Col-d.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-details--card-s3 .repairs {
    display: inline-block;
    width: 47px;
    height: 40px;
    margin-bottom: 10px;
    background-image: url(../assets/icons/Repa-d.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.products--card-tittle-1, .products--card-tittle-2, .products--card-tittle-3, .products--card-tittle-4, .services--card-tittle-1, .services--card-tittle-2, .services--card-tittle-3, .services--card-tittle-4 {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--color_White);
}

.products--card-body-1, .products--card-body-2, .products--card-body-3, .products--card-body-4, .services--card-body-1, .services--card-body-2, .services--card-body-3, .services--card-body-4, .return-link {
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--color_SoftVistta);
}

.products--card-tittle-1 a {
	text-decoration: none;
	color: var(--color_White);
	text-decoration: underline;
}

.return-link {    
    text-decoration: none;
    font-weight: bold;
}

.return-p {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../assets/icons/up-p.png');
    background-size: cover;
}

.return-s {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../assets/icons/up-s.png');
    background-size: cover;
}

/*final*/

footer {
    display: flex;
    width: 100%;
    height: 150px;
    background: linear-gradient(207.8deg, #5794bd 16.69%, #555497 100%);
}

footer section {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
}

footer .left ul {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    list-style: none;
}

.left li {
    margin: 10px 0;
}

.left a {
    text-decoration: none;
    color: var(--color_White);
}

.right img {
    width: 100px;
    height: auto;
}