/*
Theme Name:        Cartzilla Child
Theme URI:         https://demo2.madrasthemes.com/cartzilla-demos/fashion-store/
Author:            MadrasThemes
Author URI:        https://themeforest.net/user/madrasthemes/
Description:       Digital Marketplace & Electronics Store WooCommerce Theme
Requires at least: WordPress 5.0
Template:          cartzilla
Version:           1.0.9
License:           GNU General Public License v2 or later
License URI:       LICENSE
Text Domain:       cartzilla-child
Tags:              two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options
*/


/*=============================================
=                   ESTILOS PERSONALIZADOS                   =
=============================================*/


html {

  scroll-behavior: smooth;
  scroll-padding-top: 15vh;
}

body {
  padding-bottom: 0px;
  background: -webkit-linear-gradient(left, #000000, #212320);
}




/*Una vez alcance los 444px realizas el cambio*/
@media screen and (max-width: 444px) {

  .tabla-cel th,
  .tabla-cel td {


    font-size: 0.8em;
  }

  .precio {


    font-size: 1em !important;
  }
}




/*Una vez alcance los 444px realizas el cambio*/
@media screen and (min-width: 444px) {
  html {


    scroll-padding-top: 10rem;
  }
}

@media screen and (min-width: 500px) {
  html {


    scroll-padding-top: 11rem;
  }
}




@media screen and (min-width: 1200px) {
  html {


    scroll-padding-top: 14rem;
  }
}


a.navbar-brand {
  width: 150px !important;
}

.site-header,
.cz-handheld-toolbar {


  display: none;


}


@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }

  30% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }

  65% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  80% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes swing {
  15% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }

  30% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }

  65% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  80% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.custom-logo:hover {
  -webkit-animation: swing 1s ease;
  animation: swing 1s ease;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


.marca-celulares {

  background: #353535;
  max-height: 110px;
  max-width: 110px;

}


.fondo-actualizado {


  max-height: 20vh;
  font-size: 0.9rem;

  color: #65a1ff;

}

.fecha-actualizado {
  color: #ffffff;

}

.marca-celulares,
.marca-reparaciones,
.modelo-reparaciones,
.servicio-reparaciones {

  border: 1px solid #999c9e;
  border-radius: 0.3125rem;
  transition: background-color 2s ease-out 100ms;
  margin: 0 0.5rem 0 0.5rem;

}

.marca-celulares,
.marca-reparaciones,
.modelo-reparaciones h2 {

  transition: color 1s ease-out 100ms
}


.marca-celulares:hover,
.marca-reparaciones:hover,
.modelo-reparaciones:hover,
.servicio-reparaciones:hover {
  border: 1px solid #dae1e7;
  background: #65596D;
}

/* .marca-reparaciones:hover h2, .modelo-reparaciones:hover h2   {
    
    color: white !important;  
  } */

#marcas-reparaciones {
  border: 1px solid #dae1e7;
  border-radius: 0.6125rem;



}


.texto-modelos,
.texto-reparaciones {

  font-size: 0.9rem;
  font-weight: 200;

}

.texto-reparaciones {

  color: white;


}

.precio-reparaciones {
  position: relative;
  bottom: 90px;
}


.contenedor {
  margin: auto;
  display: table;
}

h3 {
  position: relative;
  float: left;
  background: #fff;
  color: #373f50;
  font-size: 2.5em;
}

h3 span {
  position: absolute;
  right: 0;
  width: 0;
  background: #fff;
  border-left: 1px solid #000;
  animation: escribir 4s steps(30) infinite alternate;
}

.bolita {

  /* filter: brightness(1.4); */
  border: 1px solid #ffffff;
}

.contenedor-bolita {

  margin-right: 2px !important;

}



.lineal {
  width: 100%;

  margin-left: 0px;
  background: -webkit-linear-gradient(left, #000000, #212320);
}




.footer-bottom-bar,
.footer-v3 {

  background: #000000 !important;
}


.contenedor-titulo-cel {

  /* background: -webkit-linear-gradient(#E997F3, #3131312d); */
  border-radius: 0.3125rem;
  background: -webkit-linear-gradient(#19a1ff, #3131312d);

}


.titulo-cel {

  position: relative;
  float: left;
  background: #ffffff00;
  color: #fff;
  font-size: 2.5em;


}

.tabla-cel th {

  color: #fff !important;
  /* font-size: 1em; */
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(227, 233, 239, 0);

  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: rgba(227, 233, 239, 0.237) !important;
  padding: 0.5rem;



}


.tabla-cel td {

  color: #fff !important;
  /* font-size: 1em; */
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(227, 233, 239, 0.196);
  padding: 0.5rem;


}


.fondo-cel {

  width: 100%;
  padding:0 !important;
}

.fondo-texto {


  max-width: 900px;
}


@keyframes escribir {
  from {
    width: 100%
  }

  to {
    width: 0
  }
}

.precio {

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  border: none;

  color: rgba(255, 255, 255, 1);
  text-decoration: normal;

  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff00de, 0 0 70px #2c3fff, 0 0 80px #5c469a, 0 0 100px #ff00de;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.precio:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff;
}


   
   .contenedor-imagen {
          position: relative;
          
   }
  
   .imagen-base {
            width: 100%; /* Ajusta el tamaño */
            display: block;
        }
  
  .imagen-superpuesta1 {
            position: absolute;
            top: 20%; /* Ajusta la posición */
            left: 50%;
            width: 100%; /* Ajusta el tamaño */
             animation: rebote 2s infinite ease-in-out;
      
  }
  
  
  .imagen-superpuesta2 {
            position: absolute;
            top: -40%; /* Ajusta la posición */
            left: -50%;
            width: 100%; /* Ajusta el tamaño */
       animation: rotar 9s infinite linear;
  }
  
  .imagen-superpuesta3 {
            position: absolute;
            top: 20%; /* Ajusta la posición */
            left: -40%;
            width: 100%; /* Ajusta el tamaño */
              animation: latido 1.5s infinite ease-in-out;
      
  }
  
  .imagen-superpuesta4 {
            position: absolute;
            top: -30%; /* Ajusta la posición */
            left: 20%;
            width: 100%; /* Ajusta el tamaño */
               animation: rebote 2s infinite ease-in-out;
      
  }
  
  /*EFECTOS */
  
  @keyframes rebote {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}



@keyframes rotar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@keyframes latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}




/* Aplica solo en pantallas con un ancho máximo de 768px */
@media (max-width: 768px) {
    
     .contenedor-imagen {
       
    width: 100%; /* Ajusta el ancho del contenedor */
    height: auto; /* Ajusta la altura para que no distorsione la imagen */
    overflow: hidden; /* Oculta los bordes de la imagen que se salen */
  }
  

  
  .imagen-agrandar {
    transform: scale(1.3); /* Escala la imagen al 150% al cargar */
    transform-origin: center; /* Escala desde el centro de la imagen */
  }
  
  
    .imagen-agrandar:hover,
  .imagen-agrandar:active {
    transform: scale(1.5); /* Escala la imagen al 150% */
}