/*html {
font-family: "Montserrat", sans-serif;
color: rgb(34 34 34);
background: linear-gradient(rgb(255, 255, 255), rgb(250, 250, 250));
}*/
body, html {
margin: 0;
min-height: auto;
overflow-x: hidden; /* Evita el desplazamiento horizontal */
max-width: 100%;
}
.container {
border-radius: 30px;
}
.container > * {
padding: 40px 15px;
}
.article {
display: flex;
flex-wrap: wrap;
}
.article > * {
margin: 0 auto;
width: clamp(400px, 40%, 100%);
text-align: center;
}
.dot {
height: 15px;
width: 15px;
background-color: rgb(34 34 34);
border-radius: 50px;
display: inline-block;
margin: 15px;
cursor: pointer;
transition: 0.5s;
}
.carousel {
position: relative;
}
.carousel,
.achats {
width: clamp(200px, 100%, 550px);
margin: 0 auto;
}
.carousel > .img {
position: relative;
width: 100%;
height: calc(100vh - 200px); /* Altura dinámica */
max-height: 700px; /* Altura máxima */
overflow: hidden;
}
.carousel > .img > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0; /* Ocultar todas las imágenes inicialmente */
visibility: hidden; /* Asegurar que solo la imagen activa esté visible */
transition: transform 0.3s ease, opacity 0.3s ease;
}
.carousel > .img > img.active {
opacity: 1; /* Mostrar solo la imagen activa */
visibility: visible; /* Hacerla visible */
z-index: 1; /* Asegurar que esté encima de otras imágenes */
}
.span-cont-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
position: relative;
}
.arrow-left,
.arrow-right {
background: none;
border: none;
font-size: 20px;
color: #d9fe00;
cursor: pointer;
padding: 0 10px;
}
/*Flechas indicativas hotspots*/
.arrow-left2,
.arrow-right2 {
background: none;
border: none;
font-size: 20px;
color: #d9fe00;
cursor: pointer;
padding: 0;
}
.span-cont {
display: flex;
overflow-x: scroll;
gap: 10px;
flex-grow: 1;
scrollbar-width: none; /* Ocultar scrollbar en navegadores compatibles */
}
.span-cont::-webkit-scrollbar {
display: none; /* Ocultar scrollbar en navegadores webkit */
}
.thumbnail {
min-width: 70px;
min-height: 70px;
background-size: cover;
background-position: center;
border: 2px solid rgb(34, 34, 34);
transition: border 0.3s;
cursor: pointer;
}
.zoom-container {
position: absolute; /* Encimado */
top: 80px; /* Ajusta según la posición deseada */
left: 830px; /* Para colocarlo a la derecha del contenido */
width: 700px; /* Ancho del contenedor del zoom */
height: 700px; /* Alto del contenedor del zoom */
overflow: hidden;
border: 2px solid #ccc;
background: #000;
z-index: 1000; /* Asegura que esté encima de todo */
display: none; /* Por defecto, oculto */
}
@media (max-width: 1366px) {
/* Estilos para laptops con resolución 1366px o menor */
.zoom-container{
left: 720px;
width: 600px; /* Ancho del contenedor del zoom */
height: 500px; /* Alto del contenedor del zoom */
}
}
.zoom-view {
width: 100%;
height: 100%;
transform: scale(0);
background-size: 200%;
background-repeat: no-repeat;
transition: transform 0.3s ease;
}
/*Ventana modal con zoom product page*/
.dxt-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 1000;
}
.dxt-modal-content {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
width: 70%;
height: 97%;
}
.modal-zoom-container {
position: relative;
overflow: hidden;
width: 90%;
height: 90%;
}
.modal-img {
transition: transform 0.3s ease;
cursor: zoom-in;
max-width: 90%;
max-height: 90%;
}
.modal-zoom-container.zooming .modal-img {
transform: scale(1.5);
}
.dxt-modal .closedxt {
position: absolute;
top: 10px;
right: 20px;
color: white;
font-size: 24px;
cursor: pointer;
}
.dxt-modal .prev, .dxt-modal .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: 2px solid #d9fe00;
font-size: 24px;
cursor: pointer;
z-index: 1001;
padding: 5px 10px;
color: #d9fe00;
}
.dxt-modal .prev {
left: 10px;
}
.dxt-modal .next {
right: 10px;
}
/* Desactivar hover zoom en móviles */
@media (max-width: 768px) {
.carousel > .img{
height: calc(80vh - 200px);
}
.span-cont-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.span-cont {
display: flex;
overflow-x: scroll;
gap: 5px;
padding: 0 10px;
scrollbar-width: none; /* Ocultar scrollbar */
}
.span-cont::-webkit-scrollbar {
display: none;
}
.thumbnail {
min-width: 60px; /* Reducir tamaño */
min-height: 60px;
}
.arrow-left,
.arrow-right {
font-size: 16px; /* Reducir tamaño */
}
.zoom-container {
display: none !important;
}
.dxt-modal-content{
width: 95%;
}
.modal-zoom-container {
margin: auto 0;
width: 90%;
height: 60%;
}
.dxt-modal .prev, .dxt-modal .next{
top: 65%
}
.container-link{
max-width: 100%;
}
.letterdxt{
margin-top: 22px!important;
font-size: 16px!important;
}
.description{
font-size: 2.8vw!important;
}
.description2{
padding: 0 10px!important;
}
.logo-section{
margin: 0 0 30px!important;
}
.cards1{
margin: 50px auto!important;
}
.sku{
font-size: 16px!important;
}
.letterprice{
font-size: 20px!important;
}
.mobile-only {
display: block!important; /* Mostrar el botón duplicado */
}
.desktop-only {
display: none!important; /* Ocultar el botón original */
}
.btn-pdf > img {
width: 15%!important;
}
.btn-pdf > span{
font-size: 16px;
}
}
/*termina el estilo de la ventana modal*/
.stars > * {
fill: #5397b4;
width: 20px;
}
.sku{
color: #8c8c8c;
text-align: left;
font-size: 20px;
}
.letterprice{
font-size: 32px;
color: white;
text-align: left;
}
button {
padding: 10px 20px;
border: 2px solid #d9fe00;
background: #d9fe00;
color: #000;
font-size: 15px;
transition: 0.5s ease;
margin: 20px 0;
font-weight: 500;
}
button:hover {
transition: 0.5s ease;
background: none;
border: 2px solid #d9fe00;
color: #fff;
}
.tech {
border-top: 1px solid rgb(200 200 200);
display: block;
text-align: center;
}
.tech > .grid > svg {
height: 80px;
width: 80px;
fill: rgb(34 34 34);
}
.tech > .grid {
display: grid;
grid-gap: 30px;
grid: auto auto auto / auto auto auto auto;
width: clamp(100px, 100%, 700px);
margin: auto;
overflow: auto;
}
.tech > .grid > * {
margin: auto;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgb(200, 200, 200);
}
::-webkit-scrollbar-thumb {
background: rgb(60, 60, 60);
border-radius: 360px;
}
.description2{
padding: 0 65px;
}
.description > p {
line-height: 30px;
text-align: justify;
}
.description > h2 {
line-height: 40px;
}
.letterdxt{
color: #d9fe00;
text-align: left;
margin-top: 75px;
font-size: 32px;
}
.letterdxt2{
color: #d9fe00;
text-align: center;
margin: 70px 0;
}
.titlemkp{
width: 100%;
padding: 50px 0;
color: #fff;
text-align: center;
}
.mkp{
width: 100%;
}
.cases {
color: #e4e4e4;
margin: 90px 0;
display: flex;
flex-direction: column; /* Apila las partes en columna */
height: 80vh; /* Ocupa toda la altura de la pantalla */
overflow-y: scroll; /* Permite el desplazamiento vertical */
scroll-snap-type: y mandatory; /* Hace que el scroll se detenga en cada parte */
scroll-behavior: smooth; /* Desplazamiento suave */
}
.slid1, .slid2, .slid3 {
flex: 0 0 100%; /* Cada parte ocupa el 100% del contenedor */
scroll-snap-align: start; /* Alinea al principio de la vista */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.titlecases, .titlecases2 {
font-family: Montserrat;
margin: 0;
color: #e4e4e4;
padding: 50px;
/* Centramos horizontal y verticalmente */
display: flex;
align-items: center;
justify-content: center;
/* Altura completa del contenedor padre */
height: 100%;
text-align: left; /* Opcional: centra el texto dentro del párrafo */
}
.imgcases {
margin: 50px 0;
width: 80%;
}
.btncases1, .btncases2 {
margin: 10px 0;
}
.cases::-webkit-scrollbar {
display: none; /* Oculta la barra de desplazamiento */
}
/* Contenedor Principal */
.image-container {
position: relative;
max-width: 800px; /* Máximo ancho para la imagen */
margin: 0 auto;
width: 100%; /* Se ajusta al contenedor */
opacity: 0; /* Oculta inicialmente */
transform: translateY(20px); /* Desplazamiento inicial */
transition: opacity 0.6s ease, transform 0.6s ease; /* Transición */
}
.image-container.visible {
opacity: 1; /* Visible cuando entra al viewport */
transform: translateY(0); /* Vuelve a la posición original */
}
.pc-image {
width: 100%;
display: block;
height: auto;
}
/* Hotspots (Puntos) */
.hotspot {
position: absolute;
width: 20px;
height: 20px;
background-color: rgba(217, 254, 0, 0.9);
border: 2px solid #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: pulse 2s infinite;
animation-play-state: paused; /* Pausa la animación por defecto */
z-index: 10;
}
.image-container.visible .hotspot {
transform: translate(-50%, -50%) scale(1); /* Escala al tamaño normal */
animation-play-state: running; /* Activa la animación */
}
/* Animación de pulso */
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
/* Flechas */
.hotspot::before {
content: "";
position: absolute;
top: 50%;
height: 2px; /* Grosor de la flecha */
background-color: #d9fe00;
animation: draw-arrow 1.5s ease-out forwards;
animation-play-state: paused; /* Pausa la animación inicial */
}
.image-container.visible .hotspot.arrow-right2::before,
.image-container.visible .hotspot.arrow-left2::before {
animation-play-state: running; /* Activa la animación */
}
/* Flechas hacia la derecha */
.hotspot.arrow-right2::before {
left: 100%; /* Inicia desde la derecha del hotspot */
width: 150px; /* Longitud de la flecha */
transform-origin: left; /* Punto de inicio */
transform: scaleX(0) translateY(-50%);
}
/* Flechas hacia la izquierda */
.hotspot.arrow-left2::before {
right: 100%; /* Inicia desde la izquierda del hotspot */
width: 150px; /* Longitud de la flecha */
transform-origin: right; /* Punto de inicio */
transform: scaleX(0) translateY(-50%);
}
/* Animación de las flechas */
@keyframes draw-arrow {
0% {
transform: scaleX(0) translateY(-50%);
}
100% {
transform: scaleX(1) translateY(-50%);
}
}
/* Texto */
.description {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 4px 4px;
border-radius: 5px;
font-size: 20px;
opacity: 0;
transform: scaleX(0); /* Animación inicial */
transform-origin: left; /* Punto de inicio para la animación */
transition: opacity 0.5s ease, transform 0.8s ease;
z-index: 20;
}
.image-container.visible .description {
opacity: 1; /* Hacerlo visible */
transform: scaleX(1); /* Expandir horizontalmente como las flechas */
transition-delay: 1.5s; /* Aparece después de las flechas */
}
/* Animación para el texto */
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Posiciones de Hotspots */
.hotspot[data-spot="ram"] {
top: 35%;
left: 54%;
}
.hotspot[data-spot="gpu"] {
top: 74%;
left: 40%;
}
.hotspot[data-spot="cpu"] {
top: 46%;
left: 39%;
}
.hotspot[data-spot="ssd"] {
top: 62%;
left: 35%;
}
.hotspot[data-spot="psu"] {
top: 70%;
left: 80%;
}
/* Posiciones del Texto */
.description[data-spot="ram"] {
top: 31%;
left: calc(54% + 160px); /* Texto fuera de la flecha derecha */
}
.description[data-spot="gpu"] {
top: 72%;
left: calc(16% - 329px); /* Texto fuera de la flecha izquierda */
}
.description[data-spot="cpu"] {
top: 44%;
left: calc(17% - 200px); /* Texto fuera de la flecha izquierda */
}
.description[data-spot="ssd"] {
top: 60%;
left: 55%; /* Texto fuera de la flecha derecha */
}
.description[data-spot="psu"] {
top: 63%;
left: calc(100% + 0px); /* Texto fuera de la flecha derecha */
}
@media(max-width: 768px){
.description {
font-size: 10px; /* Texto más pequeño */
max-width: 150px; /* Ajustar ancho */
}
.hotspot {
width: 12px; /* Hotspot más pequeño */
height: 12px;
}
.hotspot::before {
width: 80px!important; /* Flecha más corta */
}
.hotspot[data-spot="gpu"] {
top: 74%;
left: 37%;
}
.hotspot[data-spot="psu"] {
top: 70%;
left: 66%;
}
/* Posiciones del Texto */
.description[data-spot="ram"] {
top: 25%;
left: 55%; /* Texto fuera de la flecha derecha */
}
.description[data-spot="gpu"] {
top: 64%;
left: 1%; /* Texto fuera de la flecha izquierda */
}
.description[data-spot="cpu"] {
top: 40%;
left: 6%; /* Texto fuera de la flecha izquierda */
}
.description[data-spot="ssd"] {
top: 55.7%;
left: 40%; /* Texto fuera de la flecha derecha */
}
.description[data-spot="psu"] {
top: 60%;
left: 67%; /* Texto fuera de la flecha derecha */
}
.aditional{
width: 100%;
gap: 1px!important; /* Espacio entre imágenes (ajústalo a tu gusto) */
}
}
.custom-separator {
width: 100%; /* Ancho completo */
border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Grosor de 1px con menor opacidad */
}
/*Estilo separador 2*/
.custom-separator2 {
width: 100%; /* Ancho completo */
border-top: 1px solid rgba(255, 255, 255, 0.5); /* Grosor de 1px con menor opacidad */
}
/*Imagen comienza efecto parallax*/
/* Contenedor principal */
.scale-img-wrapper {
position: relative;
overflow: hidden; /* Oculta la parte que se desborda de la imagen */
height: 1000px; /* Ajusta la altura del contenedor */
}
/* Imagen */
.scale-img-wrapper img {
position: absolute; /* La imagen se posiciona relativa al contenedor */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Mantiene el aspecto de la imagen */
}
.zoom{
margin: 90px 0 0;
}
.aditional{
width: 100%;
display: flex; /* Activa flexbox */
gap: 80px; /* Espacio entre imágenes (ajústalo a tu gusto) */
align-items: center; /* Centra las imágenes verticalmente */
justify-content: center;
margin-bottom: 70px; /* Espacio arriba y abajo */
}
.title-espec {
font-family: 'Montserrat', sans-serif;
font-weight: 600; /* Semibold */
font-size: 3rem; /* Ajusta el tamaño según lo necesites */
color: #d9fe00; /* Color del texto, ajusta a tu estilo */
text-align: center; /* Opcional: centra el título */
margin: 70px 0; /* Espacio arriba y abajo */
width: 100%;
}
.technical-img{
width: 100%;
margin: 0px 0;
}
.btn-pdf {
/*display: inline-flex;*/
align-items: center;
justify-content: center;
padding: 1px 1px;
background: none;
color: #fff;
text-decoration: none;
font-size: 16px;
/*font-weight: bold;*/
/*border-radius: 5px;*/
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
margin: 3px 13px;
border:none;
text-align: left;
}
.btn-pdf:hover {
background: none; /* Rojo más oscuro al pasar el mouse */
color: #555!important;
}
.btn-pdf i {
margin-right: 8px; /* Espaciado entre el ícono y el texto */
font-size: 20px;
}
.technical-sheet {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columnas */
gap: 20px; /* Espaciado entre elementos */
background-color: #000; /* Fondo oscuro */
padding: 20px;
border-radius: 10px;
color: #ffffff;
margin-top: 16px;
}
.technical-sheet .item {
display: flex; /* Alineación del ícono y texto en fila */
align-items: center;
gap: 10px; /* Espaciado entre ícono y texto */
}
.technical-sheet .item img {
width: 65px; /* Tamaño del ícono */
}
.technical-sheet .item p {
font-size: 20px; /* Tamaño del texto */
line-height: 1.5;
margin: 0;
color: #ffffff;
text-align: left;
}
@media (max-width: 768px) {
.technical-sheet {
grid-template-columns: 1fr; /* 1 columna */
padding: 0!important;
margin-top: 25px!important;
}
.technical-sheet .item > p{
font-size: 16px!important;
}
.technical-sheet .item > img{
max-width: 40px;
}
/*Estilos de las specs moviles (borde no tan pronunciado)*/
.description[data-spot="cpu"] {
border: 0.07px solid #4c4c4c;
}
.description[data-spot="gpu"] {
border: 0.1px solid #4c4c4c;
}
.description[data-spot="ram"] {
border: 0.1px solid #4c4c4c;
}
.description[data-spot="ssd"] {
border: 0.1px solid #4c4c4c;
}
.description[data-spot="psu"] {
border: 0.1px solid #4c4c4c;
}
button:hover{
border: none;
}
}
.prrf2{
color: #fff;
text-align: left;
font-size: 22px;
line-height: 1.3;
font-family: "Montserrat", serif;
font-weight: 300;
}
.filas{
margin: 20px 0 100px;
width: 100%;
}
/* Estilos responsivos */
@media screen and (max-width: 768px) {
.dos:first-child {
order: 2; /* Mueve el texto debajo de la imagen */
}
.uno:last-child {
order: 1; /* Mueve la imagen arriba */
}
.prrf2{
font-size: 18px;
}
}
.txt{
padding: 50px 50px 50px 0;
}
.txt2{
padding: 50px;
}
/*Medidor FPS*/
.meter {
position: relative;
width: 200px;
height: 200px;
margin: 2em auto;
font-size: 10px;
transform: scale(.8);
}
.scale {
position: absolute;
transform-origin: 8em 8em;
animation: needle-ani 2000ms ease-in-out infinite alternate;
}
.scale1, .scale2, .scale3 {
position: absolute;
width: 16em;
height: 16em;
border-radius: 50%;
border: 1em green solid;
transform: rotateZ(-35deg);
}
.scale1 {
animation: gauge-color-ani 2000ms linear infinite alternate;
}
.scale2 {
border-color: transparent;
border-top-color: white;
border-right-color: white;
transform: rotateZ(44deg);
}
.scale3 {
border-color: transparent;
border-top-color: gray;
border-right-color: gray;
transform: rotateZ(48deg);
}
.scale-mask {
position:absolute;
top: 10em;
background: #000;
width: 16em;
height: 7em;
}
.needle {
width: 6em;
margin: 0 auto;
animation: needle-ani 2000ms ease-in-out infinite alternate;
transform-origin: 1em 8.5em;
transform: rotateZ(-85deg);
}
.pointer {
position: absolute;
top: 3em;
left: 0;
width: 2em;
height: 5em;
background: gray;
}
.pointer:after, .pointer:before {
content: "";
display: block;
position: absolute;
top: -0.2em;
width: 1em;
height: 6.2em;
background: #000;
}
.pointer:after {
left: -0.5em;
transform: rotateZ(8deg);
}
.pointer:before {
left: 1.5em;
transform: rotateZ(-8deg);
}
.pivot {
position: relative;
top: 7.5em;
width: 2em;
height: 2em;
border: .6em solid gray;
border-radius: 50%;
}
@keyframes needle-ani {
0% {transform: rotateZ(-60deg);}
45% {transform: rotateZ(20deg);}
70% {transform: rotateZ(50deg);}
100% {transform: rotateZ(40deg);}
}
@keyframes gauge-color-ani {
0% {border-color: #e68a00;}
20% {border-color: #e68a00;}
20.001% {border-color: #cccc00;}
55% {border-color: #cccc00;}
55.001% {border-color: green;}
100% {border-color: green;}
}
/*propuesta 2 de medidor*/
.measurer-container {
margin: 36px auto 0; /* Centrado horizontal */
width: 240px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.measurer {
background: #e0faff;
width: 100%;
height: 100%;
background: linear-gradient(90deg,rgba(0,247,45,1) 0%, rgba(246,251,0,1) 25%, rgba(246,152,0,1) 50%, rgba(204,33,33,1) 100%);
border-style: solid;
border-width: 1px;
border-radius: 250px 250px 0 0;
position: relative;
}
.measurer::after {
content: '';
background: #eefaff;
width: 80%;
height: 80%;
margin-left: -40%;
border-radius: 200px 200px 0 0;
position: absolute;
left: 50%;
bottom: 0;
}
.hand-container {
position: absolute;
bottom: 0;
left: 50%;
width: 5px;
height: 70%;
z-index: 100;
transform-origin: center bottom;
transform: rotate(-40deg);
}
.hand {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 2px solid #000;
border-radius: 100%;
background: #000;
z-index: 1;
transform-origin: center bottom;
}
.slow {
animation: jumping 7s infinite;
}
.medium {
animation: jumping 2.5s infinite;
}
.fast {
animation: jumping 700ms infinite;
}
@keyframes jumping {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(3deg);
}
40% {
transform: rotate(0deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-3deg);
}
100% {
transform: rotate(0deg);
}
}
.led-box {
width: 200px;
height: 30px;
margin: 10px 0;
}
.led {
margin: 0 auto;
width: 24px;
height: 24px;
border-radius: 50%;
}
.green {
background-color: #FF0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #008002 0 -1px 9px, #0F0 0 2px 12px;
animation: blinkGreen 4s infinite;
}
.yellow {
background-color: #FF0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 12px;
animation: blink 1.2s infinite;
}
.red {
background-color: #a00;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #800002 0 -1px 9px, #a00 0 2px 12px;
animation: blinkRed 500ms infinite;
}
@keyframes blink {
from { background-color: #FF0; }
50% { background-color: #cc0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
to { background-color: #FF0; }
}
@keyframes blinkRed {
from { background-color: #f00; }
50% { background-color: #a00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #800002 0 -1px 9px, #f00 0 2px 0; }
to { background-color: #f00; }
}
@keyframes blinkGreen {
from { background-color: #0f0; }
50% { background-color: #0a0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #008002 0 -1px 9px, #0f0 0 2px 0; }
to { background-color: #0f0; }
}
/* Estilo para los valores abajo del medidor */
.measurer-values {
display: flex;
justify-content: space-around;
width: 100%;
color: #fff;
font-size: 14px;
margin: 10px 0 36px;
}
.measurer-values .right {
text-align: right;
}
/* Estilo para la información debajo del medidor */
.measurer-info {
color: #fff;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.measurer-info p {
margin: 0;
}
.greenspark{
color: #d9fe00!important;
}
.intensity{
color: #d9fe00!important;
font-weight: 700;
}
/*Estilos para las garantías*/
.warranty-section {
font-family: 'Montserrat', serif;
color: #fff;
background: none;
padding: 16px 0 0;
border-radius: 8px;
max-width: 100%;
margin: auto;
}
/* Título */
.warranty-title {
margin-bottom: 12px;
font-size: 20px;
text-align: left;
}
/* Contenedor de botones */
.warranty-options {
display: flex;
gap: 8px;
width: 100%;
}
/* Botones */
.warranty-option {
flex-grow: 1; /* Hace que cada botón crezca uniformemente */
text-align: center;
padding: 8px 16px;
border: 1px solid #555;
background-color: transparent;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: none;
position: relative; /* Necesario para ::after */
overflow: hidden;
}
/* Botón seleccionado */
.warranty-option.selected {
background-color: #444;
border-color: #444;
}
/* Hover */
.warranty-option:hover {
background-color: #555;
border: 2px solid #555;
}
/* Hover: Cambia el texto del botón al precio */
.warranty-option:hover::after {
content: attr(data-price); /* Muestra el precio del atributo data-price */
position: absolute;
inset: 0; /* Ocupa todo el botón */
display: flex;
align-items: center;
justify-content: center;
background: #555;
color: #fff;
font-size: 18px;
font-weight: bold;
transition: opacity 0.3s;
}
/*Estilos vídeo debajo del producto*/
.container-link {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin: 30px auto;
border: 2px solid #4c4c4c;
}
/* Fondo animado del enlace */
.animated-link {
display: block;
width: 100%;
height: 100%;
background: url('https://cdn.shopify.com/s/files/1/0254/2144/7246/files/GuBZ-min.gif?v=1736528952') center/cover no-repeat;
position: relative;
text-align: center;
}
.animated-link::before {
content: '';
position: absolute; /* Fijo en la pantalla, no se mueve al hacer scroll */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* Se asegura de que quede encima del fondo pero debajo de cualquier contenido adicional */
pointer-events: none; /* Permite hacer clic en los elementos debajo de este overlay */
}
/* Botón de Play */
.play-btn {
position: absolute;
top: 36%;
left: 13%;
transform: translate(-50%, -50%);
padding: 0;
font-size: 17px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 3;
width: 15%;
}
.play-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
border: none;
}
/* Modal */
.custom-modal {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
}
/* Contenido del Modal */
.custom-modal-content {
position: relative;
width: 80%;
max-width: 600px;
/*background-color: #fff;
border-radius: 10px;*/
overflow: hidden;
margin: auto;
display: flex; /* Activa flexbox */
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
}
.custom-video {
height: 100vh;
}
/* Botón de Cerrar */
.custom-close {
position: absolute;
top: 0px;
right: 0px;
font-size: 24px;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: color 0.3s ease;
z-index: 99;
}
.custom-close:hover {
color: #d9fe00;
}
.productcontainer{
width: clamp(200px, 100%, 550px);
margin: 0 auto;
}
/*Estilos para botones de share*/
.tittleshare{
margin: auto 0;
font-size: 20px;
}
.titlesugerencias{
font-size: 20px;
color: #fff;
font-family: 'Montserrat';
text-align: left;
}
.frame{
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
height: auto;
width: 100%;
position: relative;
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
border-radius: 10px;
padding: 16px 0;
}
.btn1802{
height: 35px;
width: 35px;
border-radius: 3px;
/*background: #e0e5ec;*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
font-size: 16px;
color: #fff!important;
text-decoration: none;
}
.btn1802:active{
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}
/*Empieza estilo sugerencias*/
.cards1{
width: 90%;
position: relative;
margin: 50px auto 0;
}
.card-container {
background: none;
border-radius: 10px;
padding: 0 20px 0 0;
margin: 0 auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 90%;
position: relative;
}
.card {
flex: 0 0 80%;
max-width: 750px;
min-height: 100px;
margin-right: 20px;
border-radius: 10px;
scroll-snap-align: start;
padding: 10px;
text-align: left;
color: white;
font-size: 18px;
background-color: #000;
border: 2px solid #d9fe00;
}
.card-slider {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 10px;
}
/*Estilos de los sliders productos de sugerencias*/
.maybe{
width: 140px;
height: 140px;
margin: auto;
}
.maytitle{
font-size: 20px;
color: #fff;
text-align: left;
margin-bottom: 3px;
/* Nuevas propiedades para limitar a 2 líneas */
display: -webkit-box; /* Necesario para line-clamp */
-webkit-box-orient: vertical; /* Necesario para line-clamp */
-webkit-line-clamp: 2; /* Limita el texto a 2 líneas */
overflow: hidden; /* Oculta el texto que excede */
text-overflow: ellipsis; /* Añade "..." al final del texto truncado */
line-height: 1.5; /* Ajusta el interlineado para que el texto quede bien */
max-height: 3em; /* Asegura que solo se muestren 2 líneas (1.5 * 2) */
}
.mayprice{
font-size: 20px;
color: #fff;
text-align: left;
margin-bottom: 0;
}
.br{
padding: 6px;
color: #000;
background-color: #d9fe00;
border: 2px solid #d9fe00;
font-size: 18px;
font-weight: 500;
margin: 7px 0 0;
}
.arrows {
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #d9fe00;
font-size: 18px;
cursor: pointer;
z-index: 10;
padding: 5px 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.left-arrow {
position: absolute;
left: 22px;
}
.right-arrow {
position: absolute;
right: 32px;
}
.arrow:hover, .arrow:active {
transition: 0.5s ease;
background: none;
border: none;
color: #fff;
}
.buybtn{
padding: 10px 20px;
border: 2px solid #d9fe00;
background: #d9fe00;
color: #000;
font-size: 18px;
transition: 0.5s ease;
margin: 20px 0;
font-weight: 500;
width: 100%;
}
.buybtn:hover {
transition: 0.5s ease;
background: none;
border: 2px solid #d9fe00;
color: #fff;
}
.icon-meters{
font-size: 26px;
}
.ft{
font-size: 18px;
}
/*estilos seccion de los logos*/
.logo-section {
display: grid;
gap: 20px;
width: 100%;
padding: 10px;
box-sizing: border-box;
margin: 30px 0;
}
/* Para las filas de los logos */
.logo-row {
display: grid;
gap: 20px;
justify-items: center; /* Centra los logos dentro de las celdas */
}
/* Para la fila 1 con 5 logos */
.row-1 {
grid-template-columns: repeat(5, 1fr); /* 5 columnas en la fila superior */
}
/* Para la fila 2 con 4 logos */
.row-2 {
grid-template-columns: repeat(4, 1fr); /* 4 columnas en la fila inferior */
width: 80%;
margin: 0 auto;
}
/* Contenedor de cada logo */
.logo-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/* Imagen de los logos */
.logo-container img {
width: 100%; /* Se adapta al contenedor */
max-width: 200px; /* Establece un tamaño máximo */
height: auto;
object-fit: contain;
}
/* Para pantallas grandes (laptop o más grandes) */
@media (min-width: 1024px) {
.logo-section {
grid-template-columns: 1fr; /* Una sola columna para la sección */
}
/* Se asegura que los logos se mantengan centrados */
.row-1, .row-2 {
justify-items: center;
}
/* Ajuste adicional para mantener las filas separadas */
.row-1 {
grid-template-columns: repeat(5, 1fr); /* 5 logos en la primera fila */
}
.row-2 {
grid-template-columns: repeat(4, 1fr); /* 4 logos en la segunda fila */
width: 80%;
margin: 0 auto;
}
}
/* Para pantallas móviles */
@media (max-width: 768px) {
.logo-section {
grid-template-columns: 1fr; /* Una sola columna para la sección */
}
/* Ajuste de filas para dispositivos móviles */
.row-1, .row-2 {
grid-template-columns: repeat(3, 1fr); /* 3 logos por fila */
gap: 10px;
}
/* Mover el primer logo de la segunda fila a la última fila de la primera fila */
.row-2 .logo-container:nth-child(1) {
grid-column: span 1;
}
/* Ajustar tamaño de las imágenes en móviles */
.logo-container img {
max-width: 100px; /* Reducir tamaño en dispositivos móviles */
}
.warranty-title{
font-size: 16px!important;
}
.warranty-options{
gap: 3px;
}
.warranty-option {
font-size: 14px!important;
}
.buybtn{
font-size: 18px!important;
width: 100%;
margin: 10px 0;
}
.icon-meters{
font-size: 18px;
}
.arrows{
top: 100%;
}
.left-arrow{
left: 35%;
}
.right-arrow{
right: 35%;
}
.tittlelogos{
font-size: 18px;
}
.video-container{
margin: 15px auto;
}
.cards1{
margin: 30px auto;
}
.image-container {
margin: 0;
}
}
.tittlelogos{
color: #fff!important;
margin: 30px;
}
.percent{
width: 100%;
}
.mobile-only {
display: none; /* Oculto por defecto */
}
.desktop-only {
display: block; /* Visible por defecto */
}
/*estilos del vídeo en versión mobile*/
/* Estilos del contenedor de vídeo debajo del producto */
.video-container {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin: 30px auto;
border: 2px solid #4c4c4c;
}
/* Fondo animado del enlace */
.video-trigger {
display: block;
width: 100%;
height: 100%;
background: url('https://cdn.shopify.com/s/files/1/0254/2144/7246/files/GuBZ-min.gif?v=1736528952') center/cover no-repeat;
position: relative;
text-align: center;
}
.video-trigger::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
/* Botón de Play */
.video-play-btn {
position: absolute;
top: 36%;
left: 13%;
transform: translate(-50%, -50%);
padding: 0;
font-size: 17px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 3;
width: 15%;
}
.video-play-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
border: none;
}
/* Modal */
.video-modal {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
}
/* Contenido del Modal */
.video-modal-content {
position: relative;
width: 90%;
max-width: 600px;
overflow: hidden;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.video-element {
width: 90%;
}
/* Botón de Cerrar */
.video-close-btn {
position: absolute;
top: 0px;
right: 0px;
font-size: 24px;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: color 0.3s ease;
}
.video-close-btn:hover {
color: #d9fe00;
}
.videoc{
width: 100%;
margin: 0 10px;
}
.intelinfo{
position: relative;
margin-top: 90px; /* El margen que quieres cubrir */
}
.intelinfo::before {
content: ''; /* Generar el pseudo-elemento */
position: absolute;
top: 0; /* -90px del margen + 20px adicionales */
left: 0;
width: 100%;
height: 110px; /* Cubrirá 90px del margen y 20px más */
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(16, 20, 92, 0)); /* Ajusta colores */
z-index: 9999; /* Lo coloca detrás del contenido de la sección */
pointer-events: none; /* No afecta interacciones del usuario */
}
.intelinfo::after {
content: ''; /* Genera el pseudo-elemento */
position: absolute;
bottom: -4px; /* Posiciona el degradado 90px después del final de la sección */
left: 0;
width: 100%; /* Cubre todo el ancho de la sección */
height: 70px; /* La altura del degradado */
background: linear-gradient(to bottom, rgba(16, 20, 92, 0), rgba(0, 0, 0, 1)); /* Degradado del transparente al negro sólido */
z-index: 1; /* Asegura que el degradado esté por encima del fondo */
pointer-events: none; /* Evita interferencias con el contenido debajo */
}
@media (max-width: 768px){
.intelinfo{
margin-top: 0;
}
}
.technical-img::after {
content: ''; /* Genera el pseudo-elemento */
position: absolute;
bottom: 0; /* Asegúrate de posicionarlo al final del contenedor */
left: 0;
width: 100%; /* Cubre todo el ancho del contenedor */
height: 70px; /* La altura del degradado */
background: linear-gradient(to bottom, rgba(217, 254, 0, 0.5), rgba(0, 0, 0, 1)); /* Degradado de transparente a negro sólido */
z-index: 1; /* Asegura que el degradado esté por encima de cualquier fondo */
pointer-events: none; /* Evita interferencias con el contenido clickeable */
}
.nvidiarow{
width: 100%;
position: relative;
margin: 70px 0;
}
.nvidiarow::before,
.nvidiarow::after {
content: ''; /* Genera los pseudo-elementos */
position: absolute;
left: 0;
width: 100%; /* Cubre todo el ancho del contenedor */
height: 70px; /* Altura del degradado */
z-index: 1; /* Asegura que esté por encima del contenido */
pointer-events: none; /* Evita interferencias con el contenido */
}
.nvidiarow::before {
top: 0; /* Coloca el degradado en la parte superior */
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Degradado del negro al transparente */
}
.nvidiarow::after {
bottom: 0; /* Coloca el degradado en la parte inferior */
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Degradado del negro al transparente */
}
.adicional1{
max-width: 225px;
}
.adicional2 , .adicional3{
max-width: 300px;
}
@media (max-width: 768px){
.adicional1{
max-width: 150px;
}
.adicional2 , .adicional3{
max-width: 200px;
}
.iconfps{
font-size: 18px!important;
}
.nvidia-subtitle{
font-size: 20px!important;
}
.nvidiatitle{
font-size: 24px!important;
}
.nvidiatext{
font-size: 18px!important;
}
.txt{
padding: 50px 20px!important;
}
.txt2{
padding: 20px!important;
}
.title-espec{
font-size: 2rem;
margin: 20px 0;
}
}
.iconfps{
color:#fff;
font-size: 22px;
font-weight: 300;
text-align: center;
}
.nvidia-subtitle{
font-family: 'Montserrat';
color: #fff;
text-align: left;
font-size: 26px;
line-height: 1.3;
font-weight: 400;
}
.nvidiatitle{
font-family: 'Montserrat';
color: #fff;
text-align: left;
font-size: 30px;
line-height: 1.3;
font-weight: 500;
}
.nvidiatext{
font-family: 'Montserrat';
color: #fff;
text-align: left;
font-size: 22px;
line-height: 1.3;
font-weight: 300;
}
.upc{
color: #8c8c8c;
text-align: left;
font-size: 20px;
}
@media(max-width: 768px){
.upc{
font-size: 16px!important;
}
.disponibilidad{
font-size: 16px!important;
}
.warning{
font-size: 16px!important;
margin-top: 20px;
}
}
.disponibilidad{
color: #8c8c8c;
text-align: left;
font-size: 20px;
}
.warning{
color: #8c8c8c;
text-align: left;
font-size: 20px;
}