/*
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: #e8bd2c;

}

.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: 1.0rem;
  background: -webkit-linear-gradient(#8876FE, #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: 50%;
  max-width: 1800px;
}

.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(215, 53, 164, 1), 0 0 30px rgb(215, 53, 164), 0 0 40px #ff0055, 0 0 70px #ff0033, 0 0 80px #ff0055, 0 0 100px #ff0055;
  -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;
}





/* ESTOS SON LOS ESTILOS DE PHONEXPRESS */


.marca-celulares2 {

  background: #353535;
  max-height: 60px;
  max-width: 140px;

}


.marca-celulares2 {

  border: none;
  border-radius: 0.3125rem;
  transition: background-color 2s ease-out 100ms;
  margin: 0 0.5rem 0 0.5rem;

}


.marca-celulares2 {

  transition: color 1s ease-out 100ms
}


.marca-celulares2:hover {

  background: #ffc7b2;
}


.contenedor-titulo-cel2

 {
    background: -webkit-linear-gradient(#ff1b1b, #770f0f87);
    border-radius: 1.0rem;
}


.titulo-cel2 {


  background: #ffffff00;
  color: #fff;
  font-size: 1.1em;


}



.precio2 {

  -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 #00bfff,   /* azul cielo brillante */
  0 0 30px #0074e4,   /* azul profundo */
  0 0 40px #c8001e,   /* rojo intenso (corbata) */
  0 0 70px #ff4c4c,   /* rojo suave difuso */
  0 0 80px #005eea,   /* azul royal vibrante */
  0 0 100px #ffffff;  /* blanco luminoso */;
 
  -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);
}

.precio2:hover {
  text-shadow: 0 0 10px rgba(255, 234, 0), 0 0 20px rgba(255, 234, 0), 0 0 30px rgb(255, 234, 0), 0 0 40px #ffd900, 0 0 70px #ffd900, 0 0 80px #ffd900, 0 0 100px #ffd900;
}


.lineal2 {
  width: 100%;

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



.fondo-actualizado2 {
    max-height: 20vh;
    font-size: .9rem;
    color: #ff2317;

}

.fecha-actualizado2 {
  color: #030303;

}

.fondo-cel2 {

  width: 80%;
  max-width: 1100px;
}


.bloque-fondo-cel {

  width: 100%;

  margin-left: 0px;
  background: #000000;
}



   
   .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: -35%;
            width: 100%; /* Ajusta el tamaño */
             animation: rebote 2s infinite ease-in-out;
      
  }
  
  
  .imagen-superpuesta2 {
            position: absolute;
            top: -30%; /* Ajusta la posición */
            left: 25%;
            width: 100%; /* Ajusta el tamaño */
       animation: latido 1.5s infinite ease-in-out;
  }
  
  .imagen-superpuesta3 {
            position: absolute;
            top: -30%; /* Ajusta la posición */
            left: -5%;
            width: 100%; /* Ajusta el tamaño */
              animation: rebote 2s 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 */
  }
}














//////////////////////////////////////

/* FONDO BLANCO SÓLIDO */
body {
  padding-bottom: 0px;
  background: #ffffff !important;
}

.lineal,
.lineal2 {
  width: 100%;
  margin-left: 0px;
  background: #ffffff !important;
}

.bloque-fondo-cel {
  width: 100%;
  margin-left: 0px;
  background: #ffffff !important;
}

/* TABLA - RECTANGULO NEGRO FLOTANTE CON SOMBRA */
.tablas,
.tabla-cel {
  background: #0a0a0a !important;
  border-radius: 20px !important;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.3),
    0 10px 25px rgba(0, 0, 0, 0.2),
    0 5px 15px rgba(255, 0, 0, 0.1) !important;
  overflow: hidden !important;
  border: 3px solid #ff0000 !important;
  margin-top: 30px !important;
  margin-bottom: 50px !important;
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover en tabla para más efecto flotante */
.tabla-cel:hover {
  transform: translateY(-5px) !important;
  box-shadow: 
    0 35px 60px rgba(0, 0, 0, 0.4),
    0 15px 30px rgba(0, 0, 0, 0.3),
    0 8px 20px rgba(255, 0, 0, 0.2) !important;
}


/* Celdas de tabla */
.tabla-cel td {
  color: #ffffff !important;
  background: transparent !important;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(255, 255, 255, 0.1);
  padding: 0.5rem;
}


/* Hover en filas */
.tabla-cel tbody tr:hover {
  background: rgba(255, 0, 0, 0.1) !important;
}



/* BOTONES DE MARCAS - CON EFECTO FLOTANTE */
.marca-celulares2 {
  background: #0a0a0a !important;
  border: 2px solid #ff0000 !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.15),
    0 2px 5px rgba(255, 0, 0, 0.1) !important;
  max-height: 60px;
  max-width: 140px;
  margin: 0 0.5rem 0 0.5rem;
  transform: translateY(0);
}

.marca-celulares2:hover {
  background: #ff0000 !important;
  transform: translateY(-5px) !important;
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.3),
    0 8px 15px rgba(0, 0, 0, 0.2),
    0 4px 10px rgba(255, 0, 0, 0.25) !important;
}



/* Texto de botones de marca */
.titulo-cel2 {
  background: transparent !important;
  color: #ffffff !important;
  font-size: 1.1em;
  
}






/* 11. SCROLLBAR (opcional pero queda bien) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff0000, #cc0000);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff0000;
}


/* FONDO BLANCO CON AURORAS ROJAS */
body {
  padding-bottom: 0px;
  background: #ffffff !important;
  position: relative;
  overflow-x: hidden;
}

/* Auroras de fondo */
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.15;
}

/* Aurora superior derecha */
body::before {
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: url('https://phonexpress.com.do/wp/wp-content/uploads/auroras/aurora.png') no-repeat center center;
  background-size: contain;
  animation: float1 15s ease-in-out infinite;
}

/* Aurora inferior izquierda */
body::after {
  bottom: -15%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: url('https://phonexpress.com.do/wp/wp-content/uploads/auroras/aurora.png') no-repeat center center;
  background-size: contain;
  animation: float2 20s ease-in-out infinite;
}

/* Animaciones suaves de flotación */
@keyframes float1 {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.1;
  }
  50% { 
    transform: translate(30px, -30px) rotate(5deg);
    opacity: 0.15;
  }
}

@keyframes float2 {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.12;
  }
  50% { 
    transform: translate(-30px, 30px) rotate(-5deg);
    opacity: 0.18;
  }
}

/* Asegurar que el contenido esté sobre las auroras */
.lineal,
.lineal2,
#primary {
  position: relative;
  z-index: 1;
  background: transparent !important;
}



/* QUITAR PADDING DE IMAGEN DE PORTADA */
.contenedor-imagen {
  padding: 0 !important;
  margin: 0 !important;
}

.contenedor-imagen img {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  display: block;
}

/* Asegurar que el row tampoco tenga padding */
.contenedor-imagen.col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Si hay un row padre */
.row .contenedor-imagen {
  padding: 0 !important;
}
 
}
////////////////////////////////////