/** Shopify CDN: Minification failed

Line 377:23 Expected identifier but found "/"
Line 1109:0 Unexpected "<"

**/
/* IR A THEME y antes de </head> pegar:  <link href="{{ 'estilos-landing.css' | asset_url }}" rel="stylesheet" type="text/css" />   */

/* 1.1 ======= ESTILO CREADO PARA LISTA CON ICONOS SUBIDOS EN MISMO EDITOR PRODUCT   
SE PUEDE FORMAR VARIOS ICONOS PERSONALIZADOS Y SUBIR POR CADA LÍNEA =======  */

.landing-contenedor-lista1 { /* Contenedor Global Ancho total de su contenedor shopify*/
  display: flex;
  /*max-width: 70rem; /*Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
  margin: 0 auto; /*centra automatico en horizontal, margen es para espacios exteriores*/
  /*margin-top: 1rem;  /* Espacio de su margen superior */
  /*margin-bottom: 1rem; /* Espacio de su margen inferior */
  /*margin-left: 0rem;  Espacio de su margen izquierdo */
  /*margin-right: 1rem;  Espacio de su margen derecho */
  /*padding: 12px; Averiguar centra parte espacio interno dentr de contenedor*/
  /*justify-content: space-between; Distribuye elementos con separación uniformes a lo largo de eje X, uso en flex*/
  /*ajustify-content: center;  /*Centrea o Distribuye uniforme su contenido en eje "X", o sea izquierda y derecha, uso en flex*/
  /*align-items: center;  /*centrea sus contenidos en el "Y" arriba abajo, uso en flex*/
  /*flex-wrap: wrap;   Envuelve los elementos en una sola linea ya sea X o Y, uso en flex */
  flex-direction: column; /* Pone los elementos apicados en vertical */
  /*text-align: center;  Centrea su contenido o texto en eje "X" mas usado en bloques con texto, no flex*/
  /*letter-spacing: 0.08rem; /*Espacio entre letras*/
  background-color: #fff;  /*Prueba de color blanco */
  
}

.icono-contenedor {  /* Es contenedor completo de cada caracteristica con su icono */
  display: flex; 
  max-width: 60rem; /*Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
  margin-top: 1rem;  /* Espacio de su margen superior */
  margin-bottom: 1rem; /* Espacio de su margen inferior */
  align-items: center;  /*centrea sus contenidos en el "Y" arriba abajo, uso en flex*/
  background-color: #ff00ff; /* color rosado */
  
}

.icono-contenedor img { /* Contenedor de imagen icono */
  width: 3rem;
  height: 3rem;
   /* margin-bottom: 1rem;   Agregar espacio en borde inferior o superior del siguiente imagen */
  /*background-color: #ffff00;  /*color blanco amarillo */
}


.icono-contenedor p { /*Contenedor de cada parrafo */
  font-size: 2rem; /*Tamaño letra */
  font-weight: bold; /* Hace que el texto sea negrita */
  line-height: 1.3; /* ajusta interlineado del mismo parrafo */
  /*text-align: justify;  Justificar dentro de cada parrafo */
  margin-top: 0rem;  /* Espacio de su margen superior */
  margin-bottom: 0rem; /* Espacio de su margen inferior */
  margin-left: 1.5rem; /* Espacio de su margen izquierdo, o sea del icono */
  /* margin-right: 1rem;  Espacio de su margen derecho */
  font-family: Arial, sans-serif; /* Establece la fuente del texto */
  color: #77787C; /* Color de texto */
  /*background-color: #c3e8f7; /* color prueba celeste */
  
    @media (max-width: 767px) {
    .XXX {
     height: 3.5rem;
        }
    }
  
}
/* EJEMPLO APLICACION 
<div class="landing-contenedor-lista1">
  <div class="icono-contenedor">
    <img src="https://cdn.shopify.com/s/files/1/0742/4334/2652/files/Iconos1.png?v=1680993082" alt="Icono 1">
    <p>Característica 111 Texto de varias líneas línea de texto tercera línea de texto Texto de varias líneas segunda línea de texto tercera línea de texto</p>
  </div>
  <div class="icono-contenedor">
    <img src="https://cdn.shopify.com/s/files/1/0742/4334/2652/files/Iconos1.png?v=1680993082" alt="Icono 1">
    <p>Característica 1 </p>
  </div>
  <div class="icono-contenedor">
    <img src="https://cdn.shopify.com/s/files/1/0742/4334/2652/files/Iconos1.png?v=1680993082" alt="Icono 2">
    <p>Text</p>
  </div>
</div>
 ========== */


/* 1.2 ======= ESTILO CREADO PARA ICONOS A APARTIR DE IMAGEN QUE SE DEFINE DESDE EL ESTILO =======  */

.landing-contenedor-imagen1 { 
  display: flex;
  margin: 0 auto; /*centra automatico en horizontal, margin es para espacios exteriores*/
  background-color: #ffffff;  /*Prueba de color blanco */

}

.landing-lista-imagen1 { /*Contenedor de las filas icono con descrpcion */
   display: flex;
   max-width: 540px; /*Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
   flex-direction: column; /* Pone los elementos apicados en vertical */
   background-color: #9900cc;  /*Prueba de color morado */
   margin: 0 auto;
}

  .landing-lista-imagen1 ul {
    list-style-type: none; 

    
  } 
  
  .landing-lista-imagen1 ul li {
    position: relative;
    padding-left: 3rem;  /* Ajusta el espacio del icono a texto */
    background-color: #ffff00;   /*Prueba de color amarillo */
  }
  

  .landing-lista-imagen1 ul li:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 2.0rem;
    height: 2.0rem;
    background: url('https://cdn.shopify.com/s/files/1/0742/4334/2652/files/Iconos1.png?v=1680993082') no-repeat center center;
    background-size: contain;
    transform: translateY(0%);
    background-color: #9900cc;   /*Prueba de color amarillo */
    align-items: center;
  }

 
  .landing-lista-imagen1 ul li span {

  font-size: 22px; /*Tamaño letra */
  font-weight: bold; /* Hace que el texto sea negrita */
  line-height: 1.5; /* ajusta interlineado del mismo parrafo */
  /*text-align: justify;  Justificar dentro de cada parrafo */
  /*margin-top: 2rem;  /* Espacio de su margen superior desplaza texto */
  /* margin-bottom: 0rem; /* Espacio de su margen inferior */
  /* margin-left: 1rem; /* Espacio de su margen izquierdo, o sea del icono */
  /* margin-right: 1rem;  Espacio de su margen derecho */
  font-family: Arial, sans-serif; /* Establece la fuente del texto */
  color: #77787C; /* Color de texto */
  /*background-color: #c3e8f7; /* color prueba celeste */
   
    /*display: inline-block; /* Convierte el span en un bloque en línea para que el ancho sea igual al 100% */
    
   /* width: 100%; /* Ajusta el ancho del texto para evitar que se superponga con el ícono */
    
   
    /*text-align: left;   /* alinea el texto a segun configuración  */

  }

    @media (max-width: 767px) {
    .XXX {
     height: 3.5rem;
        }
    }

/*  ==== EJEMPLO DE USO
<div class="landing-contenedor-imagen1">
<div class="landing-lista-imagen1">
<ul class="landing-lista-imagen1">
<li><span>Texto de varias líneas línea de texto tercera línea de texto Texto de varias líneas segunda línea de texto tercera línea de texto</span></li>
<li><span>Texto de varias líneas</span></li>
<li><span>Texto de varias líneas segunda línea de texto tercera línea de texto</span></li>
</ul>
</div>
</div>
===*/


/* 2.1 ======= ESTILOS VECTORIALES=======  */

.landing-contenedor-sgv1,
.landing-contenedor-sgv2,
.landing-contenedor-sgv3 { 
  display: flex;
  /*max-width: 72rem; /*Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
  /*flex-direction: column; /* Pone los elementos apicados en vertical */
  margin: auto; /*centra automatico en horizontal, margin es para espacios exteriores*/
}
.landing-lista-sgv1,
.landing-lista-sgv2,
.landing-lista-sgv3 { /* DEL CONTENEDOR TEXTO  */
  display: flex;
  max-width: 600px; /*Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
  margin: 0px auto 0px;     /* Define espacio externo arriba y abajo  */
  padding-top: 10px; /* añadir un espacio arriba del contenido interno*/
  padding-bottom: 10px; /* añadir un espacio alrededor del contenido interno*/
  flex-direction: column; /* Pone los elementos apilados en vertical */
  /*align-items: left;  /*centrea sus contenidos en el "Y" arriba abajo, uso en flex*/
  /*text-align: left;  /*centrea sus contenidos en el "Y" arriba abajo, uso en flex*/
  /*justify-content: center;  /* left  center  */  
   }

  .landing-lista-sgv1 ul, 
  .landing-lista-sgv2 ul,
  .landing-lista-sgv3 ul  {
    list-style-type: none;
    text-align: left;  /*Justificar dentro de cada parrafo */ 
    /*background-color: #ff00ff; /* color rosado */
     }
  
  .landing-lista-sgv1 ul li,
  .landing-lista-sgv2 ul li,
  .landing-lista-sgv3 ul li {
    position: relative;
    padding-left: 60px;  /* Ajusta el espacio del icono a texto */
    margin-bottom: 20px ; /* Ajusta el espacio entre los párrafos */
    margin-left: -5px; /* Espacio de su margen izquierdo, o sea del contenedor */
    
  }
  

  .landing-lista-sgv1 ul li:before,
  .landing-lista-sgv2 ul li:before,
  .landing-lista-sgv3 ul li:before { /* Define el ícono */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    /*background: url('..') Se define en cada variacion;*/
    transform: translateY(-20%);
  }
/*SECCION DE PERSONALIZACION DE ÍCONOS*/
  .landing-lista-sgv1 ul li:before { /* Define el ícono 1 = Redondo con check*/
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8466.66 8466.66"%3E%3Ccircle fill="%23009400" transform="matrix(1.30478 -1.58033 1.58033 1.30478 4180.27 4239.53)" r="1930.4"/%3E%3Cpath fill="%23FFFFFF" d="M3666.18 4358.46l812.75 -984.39 340.34 -412.21 573.36 -694.45c120.41,-145.84 338.21,-166.64 484.05,-46.23l660.23 545.1c145.84,120.41 166.64,338.21 46.23,484.05l-573.37 694.45 -340.34 412.21 -1576.76 1909.76c-120.41,145.84 -338.21,166.64 -484.05,46.23l-421.63 -348.11 -238.59 -197 -1364.12 -1126.26c-145.84,-120.41 -166.64,-338.21 -46.23,-484.05l545.11 -660.22c120.41,-145.84 338.21,-166.64 484.05,-46.23l1098.97 907.35z"/%3E%3C/svg%3E') no-repeat center center;
  }

  .landing-lista-sgv2 ul li:before { /* Define el ícono 2 = solo check*/
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8466.66 8466.66"><path fill="%23009400" d="M3915.1 4379.27l1057.77 -1281.16 442.94 -536.47 746.22 -903.81c156.71,-189.81 440.16,-216.88 629.97,-60.17l859.26 709.44c189.81,156.71 216.88,440.16 60.17,629.97l-746.22 903.81 -442.94 536.48 -2052.11 2485.48c-156.71,189.81 -440.16,216.88 -629.97,60.17l-548.73 -453.05 -310.53 -256.39 -1775.35 -1465.79c-189.81,-156.71 -216.88,-440.17 -60.17,-629.97l709.44 -859.27c156.71,-189.8 440.17,-216.87 629.97,-60.16l1430.28 1180.89z"/></svg>') no-repeat center center;
  }
  .landing-lista-sgv3 ul li:before { /* Define el ícono 3 = solo Redondo*/
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 8466.67 8466.67"><circle class="fill-primary" cx="4233.33" cy="4233.33" r="3386.68" fill="%23009400"/></svg>') no-repeat center center;
  }


  .landing-lista-sgv1 ul li span, 
  .landing-lista-sgv2 ul li span,
  .landing-lista-sgv3 ul li span  { /*DEL TEXTO */
  font-size: 35px; /*Tamaño letra */
  /* font-weight: bold; /* Hace que el texto sea negrita */
  line-height: 28px; /* ajusta interlineado del mismo parrafo */
  text-align: justify;  /* Justificar dentro de cada parrafo EVALUAR */
  margin-top: 0rem;  /* Espacio de su margen superior */
  margin-bottom: 0rem; /* Espacio de su margen inferior */
  margin-left: 0px; /* Espacio de su margen izquierdo, o sea del icono */
  /* margin-right: 1rem;  Espacio de su margen derecho */
  font-family: Arial, sans-serif; /* Establece la fuente del texto */
  color: #333333; /* Color de texto */
  /*background-color: #c3e8f7; /* color prueba celeste */
   word-wrap: break-word; /* Para que texto largo no se salga se su contenedor */
    
  }

    @media (max-width: 767px) {
      .landing-lista-sgv1, 
      .landing-lista-sgv2,
      .landing-lista-sgv3 {
       padding-top: 5px; /* añadir un espacio arriba del contenido interno*/
       padding-bottom: 5px; /* añadir un espacio alrededor del contenido interno*/
        }
      .landing-lista-sgv1 ul li,
      .landing-lista-sgv2 ul li, 
      .landing-lista-sgv3 ul li {
      padding-left: 40px;  /* Ajusta el espacio del icono a texto */
      margin-bottom: 12px ; /* Ajusta el espacio entre los párrafos */
      }
      
    .landing-lista-sgv1 ul li:before, 
    .landing-lista-sgv2 ul li:before, 
    .landing-lista-sgv3 ul li:before {
      width: 30px;
      height: 30px;
        }
    .landing-lista-sgv1 ul li span,
    .landing-lista-sgv2 ul li span,
    .landing-lista-sgv3 ul li span {
      font-size: 25px;
        }     
    }


/*  ==== EJEMPLO DE USO 2.1 Quitando la clase externa tambien funciona
- En caso de poner estilo especifico, ejemplo que sea negrita todos agregar style="font-weight: bold;" dentro de Ul
- En caso de necesitar negrita solo partes especificas agregar <strong> esa parte de tetxo

<div class="landing-contenedor-sgv1">
<div class="landing-lista-sgv1">
<ul class="landing-lista-sgv1" style="font-weight: bold;">
<li><span><strong>Texto de varias líneas línea de texto tercera </strong>línea de texto Texto de varias líneas segunda línea de texto tercera línea de texto</span></li>
<li><span>frrr línea de texto </span></li>
<li><span>Texto de varias líneas segunda  </span></li>
</ul>
</div>
</div>
===*/



/* Por terminar 2.31 Clase para el contenedor general lista con varios iconos */
.landing-container {
  display: flex;
  margin: auto;
  max-width: 640px; 

}

/* Clase para los íconos */
.landing-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-size: contain;
  transform: translateY(0%);
}

/* Clase para el ícono 1 */
.landing-icon1 {
  background: url('https://cdn.shopify.com/s/files/1/0742/4334/2652/files/Iconos1.png?v=1680993082') no-repeat center center;
}

/* Clase para el ícono 2 */
.landing-icon2 {
  background: url('https://cdn.shopify.com/s/files/1/0742/4334/2652/files/LandingShopify.jpg?v=1680702190') no-repeat center center;
}

/* Clase para el ícono 3 */
.landing-icon3 {
  background: url('https://cdn.shopify.com/s/files/1/0742/4334/2652/files/Iconos3.png?v=1680993082') no-repeat center center;
}

/* Clase para los textos */
.landing-text1 {
  display: inline-block;
  margin-left: 20px;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  color: #77787C;
}

.landing-container ul {
   margin-left: -5px; /* Espacio de su margen izquierdo, o sea del icono */
    }  

.landing-container li {  /*  */
  display: flex;
  align-items: center; 
  margin-bottom: 10px;
}


.landing-container li img {  /* 
  height: 8rem;
  width: 8rem;*/
 }


    @media (max-width: 767px) {
    .landing-container li img {  /*  */
       height: 5rem;
       width: 5rem; 
      }
  }

.landing-container i { /Descubrir su uso, no afecta actualmente/
  font-size: 24px;
  margin-right: 50px;
  color: #555;
}

/*  ============ EJEMPLO DE USO
<div class="landing-container">
  <ul>
    <li>
      <div class="landing-icon landing-icon1"></div>
      <span class="landing-text1">Texto del elemento 1</span>
    </li>
    <li>
      <div class="landing-icon landing-icon2"></div>
      <span class="landing-text1">Texto del elemento 2</span>
    </li>
    <li>
      <div class="landing-icon landing-icon3"></div>
      <span class="landing-text1">Texto del elemento 3</span>
    </li>
  </ul>
</div>
=================*/

/* 3.1 ESTILO TÍTULO PRINCIPAL SIN FONDO*/

.landing-titulo1 {
    display: block;
    width: 100%;       /* Se ajusta al ancho maximo de su contenedor */
    max-width: 1200px;        /* Ya es solo como un parametro maximo */
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 4.2rem;
    text-align: center;
    font-family: Arial, sans-serif; /* Establece la fuente del texto */
    color: #0074B4;    /* Color celeste #0074b4; Color naranja #d67b60; */
    /*background-color: #fff; /* Fondo Blanco #fff; transparent; */
    padding: 0.5rem ; /* Define espacio interno arriba y abajo dentro de cuadro*/
    margin: 1.5rem auto 0.5rem; /* Espacio externo top - auto centrea - bottom  */
    border-radius: 5px;
    text-decoration: none;
    word-wrap: break-word; /* Para que texto largo no se salga se su contenedor */
  }
/* Media query para dispositivos móviles */
@media (max-width: 767px) {
  .landing-titulo1 {
    font-size: 2.5rem;
    line-height: 3.0rem;
  }
}


/* Ejemplo de aplicación
<div class="landing-titulo1"><span><div class="landing-subtitulo1"><span>🔥 HIDROLAVADORA DE ALTA PRESIÓN 48V + MALETÍN 🔥</span></div></span></div>
<h2 class="landing-titulo1">PRODUCTO DE CALIDAD</h2>    */

/*  ============3.2  ESTILO DE SUBTITULO O SEA titulo mas pequeño =================*/

.landing-subtitulo1 {
    display: block;
    width: 100%;       /* Se ajusta al ancho maximo de su contenedor */
    max-width: 1200px;        /* Ya es solo como un parametro maximo */
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 3.0rem;
    text-align: center;
    font-family: Arial, sans-serif; /* Establece la fuente del texto */
    color: #333333;    /* Color celeste #0074b4; Color naranja #d67b60; */
    /*background-color: #fff; /* Fondo Blanco #fff; transparent; */
  /*padding: 0.2rem ; /* Define espacio libre arriba y abajo dentro de cuadro*/
    margin: 1.0rem auto 2.0rem; /* Espacio externo top - auto centrea - bottom  */
    border-radius: 5px;
    text-decoration: none;
    word-wrap: break-word; /* Para que texto largo no se salga se su contenedor */
  }
   @media (max-width: 767px) {
    .landing-subtitulo1 {
    font-size: 2rem;
    line-height: 2.2rem;
       }
    }  

/* Ejemplo de aplicación
<div class="landing-subtitulo1"><span>¡AHORRA TIEMPO Y DINERO EN EL LAVADO!!</span></div>
<h2 class="landing-subtitulo1">¡AHORRA TIEMPO Y DINERO EN EL LAVADO!!</h2>    */

/*  ============3.4  ESTILO DE SUBTITULO SIN BORDE NI RELLENO =================*/
.landing-subtitulo2 {
  display: block;
  /*width: 100%;       /* Se ajusta al ancho maximo de su contenedor */
  max-width: 78rem;   /* Define el ancho  */
  font-size: 3.0rem; /* Define tamaño del texto */
  font-weight: bold; /* Hace que el texto sea negrita */
  text-align: center;
  line-height: 3.0rem;
  /*color: #d67b60; /* Color de texto: naranja #d67b60; celeste #0074b4;  */
  /*background-color: transparent; /* Color fondo: Blanco #fff; transparent; */
  padding: 0.5rem ; /* Define espacio interno arriba y abajo dentro de cuadro*/
  margin: 2.5rem auto 0.5rem; /* Espacio externo top - auto centrea - bottom  */
  text-decoration: none; 
  /*border-radius: 5px; /* Define el radio de borde  */
  /*border: 2px solid #d67b60; /* Añadir borde de 2px de grosor en color negro */
  word-wrap: break-word; /* Para que texto largo no se salga se su contenedor */
  }
   @media (max-width: 767px) {
    .landing-subtitulo2 {
    font-size: 1.8rem;
    line-height: 1.8rem;
    margin: 2.0rem auto 0.5rem; /* Espacio externo top - auto centrea - bottom  */
       }
    }  
/* Ejemplos de aplicacion se recomienda el primero es mas negrita
<h2 style="color: #1886F1;" class="landing-subtitulo2">RECOMENDACIONES:</h2>
<div class="landing-subtitulo2">APLICACIÓN MULTIFUNCIONAL Y AMPLIA</div>
<div class="landing-subtitulo2"><span>APLICACIÓN MULTIFUNCIONAL Y AMPLIA</span></div>    */


/*  ============3.3  ESTILO DE SUBTITULO EN CUADRO CON RELLENO =================*/
.landing-cuadro-texto1 {
  display: block;
  max-width: 65rem;   /* Define el ancho  */
  font-size: 50px; /* Define tamaño del texto */
  font-weight: bold; /* Hace que el texto sea negrita */
  text-align: center;
  line-height: 45px;
  color: #fff; /* Color de texto */
  background-color: rgb(var(--color-codigo-01));  /* Color de fondo  */
  padding: 10px; /* Define espacio interno arriba y abajo dentro de cuadro*/
  margin: 2.5rem auto 0.5rem; /* Espacio externo top - auto centrea - bottom  */
  text-decoration: none; 
  border-radius: 5px;     /* Define el radio de borde  */ 
  /*border: 2px solid #d67b60; /* Añadir borde de 2px de grosor en color negro */
  word-wrap: break-word; /* Para que texto largo no se salga se su contenedor */
  }
   @media (max-width: 767px) {  
    .landing-cuadro-texto1 {
    font-size: 30px;
    line-height: 30px;
       }
    }  
/* Ejemplo de aplicación
<div class="landing-cuadro-texto1"><span>PRINCIPALES USOS</span></div>     */


/*  ============3.4  ESTILO DE SUBTITULO EN CUADRO CON MARCO SIN RELLENO =================*/
.landing-cuadro-texto2 {
  display: block;
  max-width: 65rem;   /* Define el ancho  */
  font-size: 50px; /* Define tamaño del texto */
  font-weight: bold; /* Hace que el texto sea negrita */
  text-align: center;
  line-height: 45px;
  color: rgb(var(--color-codigo-01)); /* Color de texto: naranja #d67b60; celeste #0074b4;  */
   /*background-color: #d67b60;  /* Color de fondo  */
  padding: 10px; /* Define espacio interno arriba y abajo dentro de cuadro*/
  margin: 2.5rem auto 0.5rem; /* Espacio externo top - auto centrea - bottom  */
  text-decoration: none; 
  border-radius: 5px;     /* Define el radio de borde  */ 
  border: 2px solid rgb(var(--color-codigo-01)); /* Añadir borde de 2px de grosor en color negro */
  word-wrap: break-word; /* Para que texto largo no se salga se su contenedor */
  }
   @media (max-width: 767px) {  
    .landing-cuadro-texto2 {
    font-size: 30px;
    line-height: 30px;
       }
    }  
/* Ejemplos de aplicacion se recomienda el primero es mas negrita
<h2 class="landing-cuadro-texto2">¡AHORRA TIEMPO Y DINERO EN EL LAVADO!!</h2>
<div class="landing-cuadro-texto2">APLICACIÓN MULTIFUNCIONAL Y AMPLIA</div>
<div class="landing-cuadro-texto2"><span>APLICACIÓN MULTIFUNCIONAL Y AMPLIA</span></div>    */



/*  4.1 ============ ESTILO IMÁGENES SIN RADIO Y SIN SOMBRA =================*/

.imagen-sin-radio-sin-sombra { /* Contenedor Global Ancho total de su contenedor shopify*/
  display: flex;
  /*max-width: 530px; /* 1080 / Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
  margin: 0px auto 0px; /* Espacio externo top - auto centrea - bottom  */
  /*margin-top: 1rem;  /* Espacio de su margen superior */
  /*margin-bottom: 1rem; /* Espacio de su margen inferior */
  /*margin-left: 0rem;  Espacio de su margen izquierdo */
  /*margin-right: 1rem;  Espacio de su margen derecho */
  /*padding: 12px; Averiguar centra parte espacio interno dentr de contenedor*/
  /*justify-content: space-between; Distribuye elementos con separación uniformes a lo largo de eje X, uso en flex*/
  /*justify-content: center;  /*Centrea o Distribuye uniforme su contenido en eje "X", o sea izquierda y derecha, uso en flex*/
  /*align-items: center;  /*centrea sus contenidos en el "Y" arriba abajo, uso en flex*/
  /*flex-wrap: wrap;   Envuelve los elementos en una sola linea ya sea X o Y, uso en flex */
  /*flex-direction: column; /* Pone los elementos apicados en vertical */
  /*text-align: center;  Centrea su contenido o texto en eje "X" mas usado en bloques con texto, no flex*/
  /*background-color: transparent;  /*Prueba de color blanco fff*; transparent; rojo #FF0000; */
  /*border: 2px solid #d67b60; /* Añadir borde de 2px de grosor en color negro */
  /*border-radius: 10px; /* Para redondear los bordes */
  /*overflow: hidden; /* Para recortar la imagen a los bordes redondeados */
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);*/
}

.imagen-sin-radio-sin-sombra img {
  display: block;
  width: 100%;
  margin: 0rem auto 0rem; /* Espacio externo top - auto centrea - bottom  */
}
/* Ejemplo de uso Imagen 2 es programable su ancho (TAMBIEN NO TIENE ESPACIO ENTRE IMAGEN)
<div class="imagen-sin-radio-sin-sombra">
  <img src="https://cdn.shopify.com/s/files/1/0554/2995/5747/files/pistola7_1_480x480.gif" alt="hidrolavadora">
</div>
*/

/*  4.2 ============ ESTILO IMÁGENES CON RADIO Y SIN SOMBRA =================*/
.imagen-con-radio-sin-sombra { /* Contenedor Global Ancho total de su contenedor shopify*/
  display: flex;
  max-width: 530; /*Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
  margin: 2.0rem auto 1.5rem; /* Espacio externo top - auto centrea - bottom  */
  background-color: transparent;  /*Prueba de color blanco fff*; transparent; rojo #FF0000; */
  border-radius: 10px; /* Para redondear los bordes */
  overflow: hidden; /* Para recortar la imagen a los bordes redondeados */
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);*/
}

.imagen-con-radio-sin-sombra img {
  display: block;
  width: 100%;
}
/* Ejemplo de uso Imagen 2 es programable su ancho
<div class="imagen-con-radio-sin-sombra">
  <img src="https://cdn.shopify.com/s/files/1/0554/2995/5747/files/pistola7_1_480x480.gif" alt="hidrolavadora">
</div>
*/


/*  4.3 ============ ESTILO IMÁGENES  ==   */

.contenedor-sin-borde-imagen1 { /* Contenedor Global Ancho total de su contenedor shopify*/
  display: flex;
  max-width: 530px; /*Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
  margin: 2.0rem auto 1.5rem; /* Espacio externo top - auto centrea - bottom  */


}
.contenedor-con-borde-imagen1 { /* Contenedor Global Ancho total de su contenedor shopify*/
  display: flex;
  max-width: 50rem; /*Ancho maximo del contenedor, al desactivar se ajusta al ancho se su contenedor */
  margin: 2.0rem auto 1.5rem; /* Espacio externo top - auto centrea - bottom  */
  border-radius: 10px; /* Para redondear los bordes */
  overflow: hidden; /* Para recortar la imagen a los bordes redondeados */
  box-shadow: 0 0 10px rgba(77, 77, 77, 0.8); /* Para agregar una sombra */
  /*background-color: transparent; /*Prueba de color blanco fff*; transparent; */
  /*justify-content: center;  /*Centrea o Distribuye uniforme su contenido en eje "X", o sea izquierda y derecha, uso en flex*/
  /*align-items: center;  /*centrea sus contenidos en el "Y" arriba abajo, uso en flex*/
   
}

.landing-imagen1 {
  display: block; 
  /*margin-left: 5px;  */
  /*margin-right: 5px;  */
  width: 100%; /* Al 100% de su contenedor, sin superar el ancho maximo  */
  /*max-width: 50rem;  */
  /*margin-top: 4rem;   /* Espacio libre superior externo  */
  /*margin-bottom: 0rem;  /* Espacio libre inferior externo  */
  /* left: 0;  o right: 0 si deseas que la imagen esté a la derecha */
}

/*== Ejemplo de uso Imagen 1 sin borde (TIENE ESPACIO ENTRE IMAGEN Y CASI CENTRADO)
<div class="contenedor-sin-borde-imagen1">
<img alt="Hidrolavadora 48 V tecnipo" class="landing-imagen1" src="https://cdn.shopify.com/s/files/1/0554/2995/5747/files/pistola7_1_480x480.gif">
</div>
=== Ejemplo de uso Imagen 2 con borde
<div class="contenedor-con-borde-imagen1">
<img alt="Hidrolavadora 48 V tecnipo" class="landing-imagen1" src="https://cdn.shopify.com/s/files/1/0554/2995/5747/files/pistola7_1_480x480.gif">
</div>


*/

/*  ============ OTRO ESTILO IMÁGENES 2 Tamaño personalizable al editar=================*/
.landing-imagen2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;  /* Al 100% de su contenedor, sin superar el ancho maximo  */
  
}

/* Ejemplo de uso Imagen 2 es programable su ancho
<img class="landing-imagen2" src="https://cdn.shopify.com/s/files/1/0554/2995/5747/files/pistola7_1_480x480.gif"  alt="Hidrolavadora 48 V tecnipo" style="max-width: 500px; height: auto;">
<img class="landing-imagen2" src="https://cdn.shopify.com/s/files/1/0554/2995/5747/files/pistola7_1_480x480.gif"  alt="Hidrolavadora 48 V tecnipo" style="max-width: {{ ancho }}; height: auto;">


*/

/*  ============ 5.1 ESTILOS BOTON COMPRAR INSERTAR DIRECTO=================*/

/* Una vez instalado releasid poner directo su ejemplo de aplicacion por que ya viene configurado:
<div class="_rsi-cod-form-pagefly-button-hook-v2">hola</div><div id="_rsi-cod-form-embed-custom-hook"></div>
*/


/*  ============ 5.2 ESTILOS BOTON COMPRAR INSERTAR EN IMAGEN EXISTENTE=================
id="_rsi-buy-now-button"            ID Es indispensable
class="_rsi-buy-now-button          ESTILO de boton Releasid, necesario para ver manito click
       _rsi-buy-now-button-shaker   SACUDE, necesario pero no indispesable
       _rsi-buy-now-button-product" ENLAZA EL PRODUCTO, Es Indispensable  */


/*  ============ 5.3 ESTILOS BOTON CRUDO NATIVO=================*/

/* Una vez instalado releasid PEGAR EN DESCRIPCION:
<div id="_rsi-buy-now-button" class="imagen-sin-radio-sin-sombra _rsi-buy-now-button _rsi-buy-now-button-shaker _rsi-buy-now-button-product">
  <img src="https://cdn.shopify.com/s/files/1/0554/2995/5747/files/pistola7_1_480x480.gif" alt="hidrolavadora">
</div>


<div id="_rsi-buy-now-button" style="background: #24d022 !important; color: #ffffff !important; border-radius: 9px !important; border: 0px solid #000000 !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 7px 0px !important; font-size: calc(16px) !important; display: block;" class="_rsi-buy-now-button _rsi-buy-now-button-shaker _rsi-buy-now-button-product" data-animation-type="shake" data-mce-style="background: #24d022 !important; color: #ffffff !important; border-radius: 9px !important; border: 0px solid #000000 !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 7px 0px !important; font-size: calc(16px) !important; display: block;">
<span>Realizar Pedido / Pago Contra Entrega</span><svg xmlns="http://www.w3.org/2000/svg" width="23px" viewbox="0 0 24 24" class="_rsi-button-icon _rsi-button-icon-left" fill="rgba(255,255,255,1)"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</div>
*/

/* 7.0 ========Otra class creado por ChatGPT clase .landing-bloque1 ======= */

.landing-bloque5 {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  padding: 10px;
}

/* 8.0 ========CAJA PARA COLOCAR PRECIOS ======= */
    .fila-contenedores {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px auto 20px; /* Espacio externo top - auto centrea - bottom  */
    }
    .caja {
      display: flex;
      height: 8rem;
      /* width: calc(33.33% - 10px); /* Desactivar en caso de personalizar cada caja  */
      /*background-color: #f7f7f7; /* Color de caja */
      justify-content: center;
      align-items: center;
      text-align: center;
      /*border: 2px solid #ccc; /* Bordes de caja */
      
    }
    .caja:nth-child(1) {
      width: 28%;
      color: black; /* Colores: red blue green */
      font-size: 30px;
      line-height: 30px;
      
    }
    .caja:nth-child(2) { 
      width: 40%;
      color: rgb(var(--color-codigo-01)); /* Colores personalizado celeste #0074B4; tipo naranja #d67b60 */
      font-size: 50px;
      font-weight: bold; /* Hace que el texto sea negrita */
      line-height: 50px;
     
      }
        .caja:nth-child(3) {
      width: 29%;     /*width: calc((100% - 40% - 30%) / 3); */
      color: #0074B4;
      font-size: 30px;
      font-weight: bold; /* Hace que el texto sea negrita */
      line-height: 30px;
      word-wrap: break-word; /* Para que texto largo no se salga se su contenedor */
    }
    @media (max-width: 767px) {
    .caja {
     height: 3.5rem;
        }
     .caja:nth-child(1) {
     font-size: 16px;
     line-height: 16px;
        }
     .caja:nth-child(2) {
     font-size: 25px;
     line-height: 25px;
        }
     .caja:nth-child(3) {
     font-size: 17px;
     line-height: 17px;
        }
     } 

/* EJEMPLO DE APLICACION DEL cuadro para precios:
<div class="fila-contenedores">
    <div class="caja">
      <p>ANTES<br> <s>S/. 260.00</s></p>
    </div>
    <div class="caja">
      <p>AHORA<br>S/. 219.00</p>
    </div>
    <div class="caja">
      <p>DESCUENTO<br> S/. 31.00</p>
    </div>
</div>

Cerra ejemplo */

/*  ============xx  ESTILO DE PARRAFO =================*/

.landing-parrafo1 {
    display: block;
    width: 100%;       /* Se ajusta al ancho maximo de su contenedor */
    max-width: 660px;        /* Ya es solo como un parametro maximo */
    font-family: Arial, sans-serif; 
    line-height: 40px;
    text-align: justify;
    font-size: 30px;
    font-weight: bold;
    color: #333333;    /* Color azulado #626AD1; Color naranja #d67b60; */
    /*border-radius: 5px;
    text-decoration: none;
   
    
    /*background-color: #fff; /* Fondo Blanco #fff; transparent; */
  /*padding: 0.2rem ; /* Define espacio libre arriba y abajo dentro de cuadro*/
    margin: 1.5rem auto 2.5rem; /* Espacio externo top - auto centrea - bottom  */
    
    word-wrap: break-word; /* Para que texto largo no se salga se su contenedor */
  }
   @media (max-width: 767px) {
    .landing-parrafo1 {
  font-size: 22px;
       }
    }  

/* EJEMPLO APLICACIÓN
<h2 style="color: #1886F1;" class="landing-parrafo1">RECOMENDACIONES:</h2>
<div class="landing-parrafo1">APLICACIÓN MULTIFUNCIONAL Y AMPLIA</div>
                      */

/* ---- Preguntas Frecuentes (FAQs) ---- */

/* Contenedor general de cada entrada FAQ */
.faq-entry {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  cursor: pointer;
}

/* Encabezado de cada FAQ: pregunta + icono */
.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Título de la pregunta */
.faq-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #444;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icono de checkbox (Google Material Symbols) */
.faq-check {
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  font-weight: normal;
  color: #000;
}

/* Icono de expansión ( + o – ) */
.faq-icon {
  font-size: 1.5em;
  font-weight: bold;
  color: #666;
  transition: transform 0.3s ease;
}

.faq-icon::before {
  content: "+";
}

.faq-entry.active .faq-icon::before {
  content: "–";
}

/* Contenido de la respuesta */
.faq-answer {
  display: none;
  margin-top: 8px;
  color: #555;
  font-size: 1em;
  line-height: 1.5;
}

.faq-entry.active .faq-answer {
  display: block;
}

/* --- Estilos para imagen con tres puntos (Hotspots interactivos) --- */
.hotspot-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.hotspot-image {
  width: 100%;
  display: block;
}

/* Círculo principal */
.hotspot {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.85); /* Color negro con transparencia */
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Ícono + */
.hotspot-icon {
  color: white;
  font-size: 36px;
  font-weight: 500;
  z-index: 6;
  transition: transform 0.3s ease;
  display: block;
  line-height: 1;
}

.hotspot.active .hotspot-icon {
  transform: rotate(45deg); /* Gira + para parecer X */
}

/* Efecto pulsante */
.pulse {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 1;
}

.pulse::before,
.pulse::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  top: 0;
  left: 0;
  animation: pulseOutline 1.8s linear infinite;
}

.pulse::after {
  animation-delay: 0.6s;
}

@keyframes pulseOutline {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Tooltip */
.hotspot-tooltip {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  color: #333;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  display: none;
  z-index: 10;
}
/* --- aqui termina Estilos para imagen con tres puntos --- */

/* --- aqui inicia Estilos para imagen comparativo --- */
.before-after-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  user-select: none;
  aspect-ratio: 1 / 1;
}

.before-after-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-image {
  z-index: 1;
  clip-path: inset(0 50% 0 0);
}

/* Barra negra */
.slider-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: black;
  cursor: ew-resize;
  z-index: 3;
}

/* Círculo */
.slider-handle {
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
  background: black;
  color: white;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 50%;
}

/* Etiquetas */
.label-before, .label-after {
  position: absolute;
  top: 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  z-index: 4;
}

.label-before { left: 10px; }
.label-after { right: 10px; }
/* --- aqui termina Estilos para imagen comparativo --- */


/* --- aqui inicia estilos para tabla --- */
.table-general {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #ffffff; /* Fondo blanco */
  border: 1px solid #000000; /* Borde negro */
  font-family: Arial, sans-serif; /* Fuente fija */
  font-size: 15px; /* Tamaño constante */
  line-height: 1.3; /* Interlineado compacto */
  color: #000000; /* Texto negro puro */
  table-layout: auto; /* Ajuste flexible */
  word-break: normal; /* No partir palabras */
  white-space: normal; /* Permite salto de línea natural */
}

/* Encabezados */
.table-general thead th {
  border: 1px solid #000000;
  padding: 8px;
  font-size: 15px;
  font-weight: 700; /* Negrita solo títulos */
  text-align: center;
  vertical-align: middle;
  background-color: #ffffff;
  color: #000000;
}

/* Celdas */
.table-general tbody td {
  border: 1px solid #000000;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  color: #000000;
  font-weight: 400; /* Texto normal */
  line-height: 1.3;
  word-break: normal;
  white-space: normal;
}

/* Ajuste equilibrado de columnas */
.table-general thead th:first-child,
.table-general tbody td:first-child {
  width: 40%; /* Primera columna un poco más angosta */
}
.table-general thead th:last-child,
.table-general tbody td:last-child {
  width: 60%; /* Segunda columna un poco más amplia */
}

/* Responsivo */
@media (max-width: 640px) {
  .table-general {
    font-size: 15px;
    table-layout: auto;
  }

  .table-general th,
  .table-general td {
    padding: 8px;
  }
}

/* --- aqui termina Estilos para tabla --- */

/* --- aqui inicia ejemplo para tabla --- */
<table class="table-general">
<thead>
<tr>
<th>👤 CLIENTE</th>
<th>💬 TESTIMONIO</th>
</tr>
</thead>
<tbody>
<tr>
<td>👤 Rosa Quispe - San Juan de Lurigancho, Lima ⭐⭐⭐⭐⭐</td>
<td>"Pensé que era otro producto más, pero me cambió la cocina. Tengo todo a la vista y limpio. Lo amo."</td>
</tr>
<tr>
<td>👤 Carmen Huamán - Cusco, Wanchaq ⭐⭐⭐⭐⭐</td>
<td>"Vivo en departamento pequeño y EscurriMaster me ha salvado. Ahora sí tengo espacio libre. 100% recomendable."</td>
</tr>
<tr>
<td>👤 Patricia Ramos - Arequipa, Cerro Colorado ⭐⭐⭐⭐⭐</td>
<td>"La encimera ya no está llena de cosas mojadas. Se ve ordenado y hasta decora."</td>
</tr>
<tr>
<td>👤 Juana Cárdenas - Chiclayo, La Victoria ⭐⭐⭐⭐⭐</td>
<td>"Muy fácil de armar y práctico para el día a día. Mis amigas ya lo quieren."</td>
</tr>
<tr>
<td>👤 Teresa Ayala - Trujillo, El Porvenir ⭐⭐⭐⭐⭐</td>
<td>"Lo compré con dudas, pero superó mis expectativas. Todo queda organizado y bonito."</td>
</tr>
</tbody>
</table>
/* --- aqui termina EJEMPLO para tabla --- */


/* === Estilos tipográficos personalizados César === */

/* === Estilo tipográfico CESI refinado === */

/* Título personalizado */
.titulo-cesi, h1.titulo-cesi, h2.titulo-cesi, h3.titulo-cesi, h4.titulo-cesi {
  font-family: Arial, sans-serif;
  font-weight: 800;
  color: rgb(255, 5, 5) !important; /* Rojo de prueba */
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
  margin: 12px 0 8px 0;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* Párrafo personalizado */
.parrafo-cesi {
  font-family: Arial, sans-serif;
  font-weight: 400;
  color:rgb(10, 2, 254) !important;     /* Igual negro puro */
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  margin: 6px 0 10px 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Responsivo === */
@media (max-width: 640px) {
  .titulo-cesi {
    font-size: 19px;
  }
  .parrafo-cesi {
    font-size: 15px;
  }
}