/*==================================================
        BOTICA EMANUEL FARMA
              BLOQUE 1
==================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*=========================
      VARIABLES
==========================*/

:root{

    --rojo:#d62828;
    --rojo-oscuro:#a4133c;
    --naranja:#f77f00;
    --amarillo:#fcbf49;
    --crema:#fff8ef;
    --blanco:#ffffff;
    --gris:#5c5c5c;
    --gris-claro:#f4f4f4;
    --negro:#222222;

    --radio:18px;

    --sombra:0 8px 25px rgba(0,0,0,.10);

    --transicion:.35s ease;

}

/*=========================
      CONFIGURACIÓN
==========================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(
      180deg,
      #fffdfb 0%,
      #fff8ef 20%,
      #fff3e6 45%,
      #ffe9d6 70%,
      #ffd8c2 100%
      );

    color:var(--negro);

    overflow-x:hidden;

}

/*=========================
      CONTENEDOR
==========================*/

.container{

    width:92%;

    max-width:1400px;

    margin:auto;

}

/*=========================
      ENLACES
==========================*/

a{

    text-decoration:none;

    color:inherit;

}

/*=========================
      IMÁGENES
==========================*/

img{

    width:100%;

    display:block;

}

/*=========================
      BOTONES
==========================*/

button{

    border:none;

    cursor:pointer;

    font-family:'Poppins',sans-serif;

    transition:var(--transicion);

}

/*=========================
      TITULOS
==========================*/

h1{

    font-size:2.6rem;

    font-weight:800;

}

h2{

    font-size:2rem;

    font-weight:700;

}

h3{

    font-size:1.25rem;

    font-weight:600;

}

p{

    color:var(--gris);

    line-height:1.7;

}

/*=========================
    TÍTULOS DE SECCIÓN
==========================*/

.titulo-seccion{

    text-align:center;

    margin:70px 0 45px;

}

.titulo-seccion h2{

    color:var(--rojo-oscuro);

    margin-bottom:12px;

}

.titulo-seccion p{

    font-size:1rem;

}

/*=========================
      SCROLL
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#fff4e7;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    var(--naranja),
    var(--rojo)
    );

    border-radius:20px;

}

/*==================================================
                BLOQUE 2 - HEADER
==================================================*/

.header{

  position:sticky;

  top:0;

  width:100%;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(12px);

  box-shadow:0 4px 20px rgba(0,0,0,.08);

  z-index:1000;

}

.contenedor-header{

  width:92%;

  max-width:1400px;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

  padding:10px 0;

}

/*=========================*
* LOGO *
*==========================*/
.logo{
  display:flex;
  align-items:center;
  gap:15px;
}

.logo img{
  width:70px;
  height:70px;
  object-fit:contain;
}

.logo-info h1{
  font-size:1.45rem;
  color:var(--rojo-oscuro);
  margin-bottom:2px;
}

.logo-info p{
  font-size:.92rem;
  color:var(--gris);
}

/*=========================
    BUSCADOR SUPERIOR
==========================*/

.buscador-header{

  flex:1;

  max-width:520px;

  position:relative;

}

.buscador-header i{

  position:absolute;

  left:18px;

  top:50%;

  transform:translateY(-50%);

  color:var(--rojo);

  font-size:1rem;

}

.buscador-header input{

  width:100%;

  height:52px;

  border:2px solid #ffe2c5;

  border-radius:40px;

  padding-left:48px;

  padding-right:20px;

  background:#fffdfb;

  font-size:1rem;

  transition:.35s;

}

.buscador-header input:focus{

  outline:none;

  border-color:var(--naranja);

  box-shadow:0 0 15px rgba(247,127,0,.25);

}

/*=========================
       MENÚ
==========================*/
.menu{

  display:flex;

  justify-content:center;

  gap:28px;

  padding:10px 0;

  background:linear-gradient(90deg,#fff8f0,#fff3e6,#ffe9da);

  border-top:1px solid #ffe5cf;

  border-bottom:1px solid #ffe5cf;

  font-size:.95rem;

}
.menu a{

  font-weight:600;

  color:var(--gris);

  position:relative;

  transition:.3s;

}

.menu a:hover{

  color:var(--rojo);

}

.menu a::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-8px;

  width:0;

  height:3px;

  background:linear-gradient(90deg,var(--naranja),var(--rojo));

  border-radius:10px;

  transition:.35s;

}

.menu a:hover::after{

  width:100%;

}

/*=========================
    BOTONES DERECHA
==========================*/

.acciones-header{

  display:flex;

  align-items:center;

  gap:15px;

}

/* Iniciar sesión */

.btn-login{

  background:linear-gradient(135deg,var(--naranja),var(--rojo));

  color:white;

  border-radius:30px;

  padding:13px 22px;

  font-size:.95rem;

  font-weight:600;

  display:flex;

  align-items:center;

  gap:8px;

  box-shadow:var(--sombra);

}

.btn-login:hover{

  transform:translateY(-3px);

  box-shadow:0 12px 25px rgba(214,40,40,.30);

}

/* Carrito */

.btn-carrito{

  width:56px;

  height:56px;

  border-radius:50%;

  background:white;

  box-shadow:var(--sombra);

  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:1.35rem;

  color:var(--rojo);

}

.btn-carrito:hover{

  transform:scale(1.08);

  background:#fff7f2;

}

/* Contador */

#contador-carrito{

  position:absolute;

  top:-5px;

  right:-5px;

  width:22px;

  height:22px;

  border-radius:50%;

  background:var(--rojo);

  color:white;

  font-size:.75rem;

  font-weight:700;

  display:flex;

  justify-content:center;

  align-items:center;

  border:2px solid white;

}
/*==================================================
              BLOQUE 3 - HERO
==================================================*/

.hero{

  width:92%;

  max-width:1400px;

  margin:50px auto;

  display:grid;

  grid-template-columns:1.1fr .9fr;

  align-items:center;

  gap:50px;

}

/*=========================
    TEXTO PRINCIPAL
==========================*/

.hero-texto .etiqueta{

  display:inline-block;

  padding:10px 20px;

  background:linear-gradient(90deg,#fff0dc,#ffe2c5);

  color:var(--rojo);

  border-radius:30px;

  font-weight:600;

  margin-bottom:20px;

}

.hero-texto h2{

  font-size:3rem;

  color:var(--rojo-oscuro);

  line-height:1.2;

  margin-bottom:20px;

}

.hero-texto p{

  font-size:1.1rem;

  margin-bottom:35px;

  max-width:620px;

}

/*=========================
   BUSCADOR PRINCIPAL
==========================*/

.buscador-principal{

  display:flex;

  align-items:center;

  background:white;

  border-radius:60px;

  padding:10px;

  box-shadow:var(--sombra);

  max-width:650px;

}

.buscador-principal input{

  flex:1;

  border:none;

  outline:none;

  padding:18px 20px;

  font-size:1rem;

  font-family:'Poppins',sans-serif;

}

.buscador-principal button{

  padding:18px 35px;

  border-radius:50px;

  background:linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja),
      var(--rojo)
  );

  color:white;

  font-size:1rem;

  font-weight:700;

  display:flex;

  align-items:center;

  gap:10px;

  transition:.35s;

}

.buscador-principal button:hover{

  transform:translateY(-3px);

  box-shadow:0 15px 30px rgba(214,40,40,.30);

}

/*=========================
    PANEL DERECHO
==========================*/

.hero-imagen{

  background:linear-gradient(
      145deg,
      #ffffff,
      #fff8ef
  );

  border-radius:30px;

  padding:35px;

  min-height:480px;

  display:flex;

  justify-content:center;

  align-items:center;

  box-shadow:var(--sombra);

  transition:.4s;

}

.hero-imagen:hover{

  transform:translateY(-8px);

}

.hero-imagen img{

  width:100%;

  max-width:420px;

  object-fit:contain;

}

/*=========================
  EFECTO DE ENTRADA
==========================*/

.hero-texto{

  animation:aparecerIzquierda .8s ease;

}

.hero-imagen{

  animation:aparecerDerecha .8s ease;

}

@keyframes aparecerIzquierda{

  from{

      opacity:0;

      transform:translateX(-40px);

  }

  to{

      opacity:1;

      transform:translateX(0);

  }

}

@keyframes aparecerDerecha{

  from{

      opacity:0;

      transform:translateX(40px);

  }

  to{

      opacity:1;

      transform:translateX(0);

  }

}
/*=========================
    CATEGORÍAS RÁPIDAS
==========================*/

.categorias-rapidas{

  position:sticky;

  top:92px;

  z-index:999;

  display:flex;

  justify-content:center;

  gap:12px;

  flex-wrap:wrap;

  padding:8px 15px;

  background:rgba(255,255,255,.97);

  backdrop-filter:blur(10px);

  box-shadow:0 4px 10px rgba(0,0,0,.05);

}

.categoria-rapida{

  display:flex;

  align-items:center;

  gap:8px;

  padding:12px 20px;

  border-radius:30px;

  background:linear-gradient(135deg,#fff7ef,#ffe7d0);

  color:var(--rojo-oscuro);

  font-weight:600;

  transition:.35s;

}

.categoria-rapida:hover{

  background:linear-gradient(
      135deg,
      var(--naranja),
      var(--rojo)
  );

  color:white;

  transform:translateY(-3px);

  box-shadow:0 12px 25px rgba(214,40,40,.30);

}

.categoria-rapida i{

  font-size:1.1rem;

}
/* Cuando el usuario baja la página */
.categorias-rapidas.compacta{

  top:70px;

  padding:4px 15px;

  gap:8px;

}

.categorias-rapidas.compacta .categoria-rapida{

  padding:6px 12px;

  font-size:.82rem;

}

/*==================================================
        BLOQUE 4 - CATEGORÍAS
==================================================*/

/*=========================
    CATEGORÍAS RÁPIDAS
==========================*/

.categorias-rapidas{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:14px;

  flex-wrap:wrap;

  padding:10px 20px;

  background:linear-gradient(
      90deg,
      #fff9f2,
      #fff2e6,
      #ffe8d6
  );

  border-top:1px solid #ffe2cc;

  border-bottom:1px solid #ffe2cc;

}

.categoria-rapida{

  display:flex;

  align-items:center;

  gap:8px;

  padding:10px 18px;

  border-radius:30px;

  background:white;

  color:var(--rojo-oscuro);

  font-weight:600;

  box-shadow:0 4px 12px rgba(0,0,0,.08);

  transition:all .35s ease;

}

.categoria-rapida:hover{

  background:linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja),
      var(--rojo)
  );

  color:white;

  transform:translateY(-4px);

  box-shadow:0 12px 25px rgba(214,40,40,.30);

}

.categoria-rapida i{

  font-size:1.05rem;

}

/*=========================*
*CATEGORÍAS PRINCIPALES*
*==========================*/

.contenedor-categorias {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 35px;
}

.categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 140px;
  height: 140px;

  border-radius: 22px;
  background: white;
  box-shadow: var(--sombra);

  transition: all .35s ease;
  cursor: pointer;

  overflow: hidden;
}

/* IMAGEN DE CADA CATEGORÍA */

.categoria img {
  width: 85px;
  height: 85px;

  object-fit: contain;

  display: block;

  margin-bottom: 8px;

  transition: transform .35s ease;
}

/* TEXTO */

.categoria span {
  font-weight: 600;
  color: var(--gris);
  text-align: center;
  font-size: .95rem;

  transition: color .35s ease;
}

/* EFECTO AL PASAR EL MOUSE */

.categoria:hover {
  transform: translateY(-8px);

  background: linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja),
      var(--rojo)
  );
}

/* La imagen crece suavemente */

.categoria:hover img {
  transform: scale(1.05);
}

/* Texto blanco */

.categoria:hover span {
  color: white;
}

/* CATEGORÍA ACTIVA */

.categoria.activa {
  background: linear-gradient(
      135deg,
      var(--naranja),
      var(--rojo)
  );
}

.categoria.activa span {
  color: white;
}


/*=================================================
            BLOQUE 5 - PRODUCTOS
==================================================*/

.productos{

  padding:80px 0;

  background:linear-gradient(
      180deg,
      #fffdf9,
      #fff6ec,
      #fff0e2
  );

}

.contenedor-productos{

  width:92%;

  max-width:1400px;

  margin:auto;

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

  gap:30px;

}

/*=========================
    TARJETA
==========================*/

.producto{

  position:relative;

  background:#ffffff;

  border-radius:22px;

  overflow:hidden;

  box-shadow:0 10px 25px rgba(0,0,0,.08);

  transition:.4s;

}

.producto:hover{

  transform:translateY(-10px);

  box-shadow:0 20px 40px rgba(214,40,40,.20);

}

/*=========================
   ETIQUETA
==========================*/

.etiqueta-producto{

  position:absolute;

  top:15px;

  left:15px;

  padding:8px 15px;

  border-radius:30px;

  background:linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja),
      var(--rojo)
  );

  color:white;

  font-size:.8rem;

  font-weight:700;

  z-index:2;

}

/*=========================
   FAVORITO
==========================*/

.btn-favorito{

  position:absolute;

  top:15px;

  right:15px;

  width:42px;

  height:42px;

  border-radius:50%;

  background:white;

  display:flex;

  justify-content:center;

  align-items:center;

  box-shadow:0 5px 15px rgba(0,0,0,.15);

  cursor:pointer;

  transition:.35s;

  z-index:2;

}

.btn-favorito:hover{

  background:var(--rojo);

  color:white;

  transform:scale(1.1);

}

/*=========================
     IMAGEN
==========================*/

.imagen-producto{

  height:220px;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:20px;

  background:#fff9f4;

  overflow:hidden;

}

.imagen-producto img{

  max-width:180px;

  transition:.4s;

}

.producto:hover .imagen-producto img{

  transform:scale(1.08);

}

/*=========================
    INFORMACIÓN
==========================*/

.info-producto{

  padding:22px;

}

.info-producto h3{

  color:var(--rojo-oscuro);

  margin-bottom:8px;

}

.marca{

  color:var(--gris);

  font-size:.9rem;

  margin-bottom:10px;

}

.estrellas{

  color:#fcbf49;

  margin-bottom:15px;

}

.precio{

  font-size:1.7rem;

  font-weight:700;

  color:var(--rojo);

  margin-bottom:18px;

}

/*=========================
    BOTONES
==========================*/

.botones-producto{

  display:flex;

  gap:10px;

}

.btn-agregar{

  flex:1;

  padding:14px;

  border-radius:35px;

  background:linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja),
      var(--rojo)
  );

  color:white;

  font-weight:700;

  transition:.35s;

}

.btn-agregar:hover{

  transform:translateY(-3px);

  box-shadow:0 15px 25px rgba(214,40,40,.30);

}

.btn-detalles{

  padding:14px 18px;

  border-radius:35px;

  border:2px solid var(--naranja);

  background:white;

  color:var(--rojo);

  font-weight:600;

  transition:.35s;

}

.btn-detalles:hover{

  background:var(--naranja);

  color:white;

}

/*==================================================
      BUSCADOR Y FILTROS DE PRODUCTOS
==================================================*/

.barra-productos{

  width:92%;
  max-width:1200px;

  margin:0 auto 25px;

  display:flex;
  align-items:center;
  gap:15px;

}

/* BUSCADOR */

.buscador-productos{

  flex:1;

  display:flex;
  align-items:center;

  background:#ffffff;

  border:2px solid #ffe0c7;

  border-radius:35px;

  padding:5px 18px;

  box-shadow:0 6px 18px rgba(0,0,0,.07);

  transition:.35s;

}

.buscador-productos i{

  color:var(--naranja);

  font-size:1.1rem;

  margin-right:10px;

}

.buscador-productos input{

  width:100%;

  border:none;

  outline:none;

  background:transparent;

  padding:13px 5px;

  font-family:'Poppins',sans-serif;

  font-size:.95rem;

  color:var(--rojo-oscuro);

}

.buscador-productos input::placeholder{

  color:#999;

}

/* EFECTO AL SELECCIONAR EL BUSCADOR */

.buscador-productos:focus-within{

  border-color:var(--naranja);

  box-shadow:0 8px 25px rgba(255,140,0,.18);

  transform:translateY(-2px);

}


/* ORDENAR */

#ordenarProductos{

  min-width:210px;

  padding:14px 18px;

  border:2px solid #ffe0c7;

  border-radius:35px;

  background:#ffffff;

  color:var(--rojo-oscuro);

  font-family:'Poppins',sans-serif;

  font-size:.9rem;

  font-weight:600;

  outline:none;

  cursor:pointer;

  box-shadow:0 6px 18px rgba(0,0,0,.07);

  transition:.35s;

}

#ordenarProductos:hover{

  border-color:var(--naranja);

  transform:translateY(-2px);

}

#ordenarProductos:focus{

  border-color:var(--rojo);

  box-shadow:0 8px 22px rgba(214,40,40,.15);

}


/*=========================
     PESTAÑAS
==========================*/

.menu-productos{

  width:92%;
  max-width:1200px;

  margin:0 auto 35px;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:12px;

  flex-wrap:wrap;

}

.tab-producto{

  border:none;

  padding:11px 22px;

  border-radius:30px;

  background:#ffffff;

  color:var(--rojo-oscuro);

  font-family:'Poppins',sans-serif;

  font-size:.9rem;

  font-weight:600;

  cursor:pointer;

  box-shadow:0 5px 15px rgba(0,0,0,.07);

  transition:.35s;

}

.tab-producto:hover{

  transform:translateY(-3px);

  background:linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja)
  );

  color:white;

}

.tab-producto.activa{

  background:linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja),
      var(--rojo)
  );

  color:white;

  box-shadow:0 8px 20px rgba(214,40,40,.20);

}


/*=========================
     CELULARES
==========================*/

@media (max-width:700px){

  .barra-productos{

      flex-direction:column;

      align-items:stretch;

  }

  #ordenarProductos{

      width:100%;

  }

  .menu-productos{

      gap:8px;

  }

  .tab-producto{

      padding:9px 14px;

      font-size:.82rem;

  }

}
/*==================================================
        BLOQUE 6 - ¿POR QUÉ ELEGIRNOS?
==================================================*/

.porque-elegirnos{

  width:92%;
  max-width:1400px;

  margin:70px auto;

  padding:55px 30px;

  background:linear-gradient(
      135deg,
      #fffaf3,
      #fff0df,
      #ffe6d5
  );

  border-radius:30px;

  box-shadow:0 12px 30px rgba(0,0,0,.07);

}

/*=========================
     TÍTULO
==========================*/

.porque-elegirnos .titulo-seccion{

  text-align:center;

  margin-bottom:40px;

}

.porque-elegirnos .titulo-seccion h2{

  color:var(--rojo-oscuro);

  font-size:2.1rem;

  margin-bottom:10px;

}

.porque-elegirnos .titulo-seccion p{

  color:var(--gris);

  font-size:.98rem;

}


/*=========================
    CONTENEDOR
==========================*/

.contenedor-beneficios{

  display:grid;

  grid-template-columns:
      repeat(4,1fr);

  gap:22px;

}


/*=========================
     TARJETA
==========================*/

.beneficio{

  position:relative;

  text-align:center;

  padding:30px 20px;

  background:rgba(255,255,255,.90);

  border:1px solid rgba(255,180,120,.25);

  border-radius:22px;

  box-shadow:0 8px 20px rgba(0,0,0,.06);

  transition:all .4s ease;

  overflow:hidden;

}


/* Brillo */

.beneficio::before{

  content:"";

  position:absolute;

  width:100px;

  height:100px;

  top:-50px;

  right:-50px;

  background:rgba(255,170,70,.18);

  border-radius:50%;

  transition:.4s;

}


/*=========================
     ICONO
==========================*/

.icono-beneficio{

  width:65px;

  height:65px;

  margin:0 auto 18px;

  display:flex;

  justify-content:center;

  align-items:center;

  border-radius:50%;

  background:linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja)
  );

  color:white;

  font-size:1.6rem;

  box-shadow:0 8px 18px rgba(255,140,0,.25);

  transition:.4s;

}


/*=========================
     TEXTO
==========================*/

.beneficio h3{

  color:var(--rojo-oscuro);

  font-size:1.05rem;

  margin-bottom:10px;

}

.beneficio p{

  color:var(--gris);

  font-size:.88rem;

  line-height:1.6;

}


/*=========================
     HOVER
==========================*/

.beneficio:hover{

  transform:translateY(-9px);

  background:linear-gradient(
      145deg,
      #ffffff,
      #fff1e3
  );

  border-color:var(--naranja);

  box-shadow:
      0 18px 35px rgba(214,40,40,.16);

}

.beneficio:hover::before{

  transform:scale(2.5);

}

.beneficio:hover .icono-beneficio{

  transform:scale(1.1) rotate(5deg);

  background:linear-gradient(
      135deg,
      var(--naranja),
      var(--rojo)
  );

}


/*=========================
     RESPONSIVE
==========================*/

@media (max-width:1000px){

  .contenedor-beneficios{

      grid-template-columns:
          repeat(2,1fr);

  }

}

@media (max-width:600px){

  .porque-elegirnos{

      padding:40px 18px;

  }

  .contenedor-beneficios{

      grid-template-columns:1fr;

  }

  .porque-elegirnos .titulo-seccion h2{

      font-size:1.7rem;

  }

}
/*==================================================*
* BLOQUE 7 - MARCAS DISPONIBLES
*==================================================*/

.marcas{

  width:92%;
  max-width:1400px;

  margin:70px auto;

  padding:60px 35px;

  text-align:center;

  background:linear-gradient(
      135deg,
      #fffdf8,
      #fff4df,
      #ffe9cc
  );

  border-radius:30px;

  box-shadow:0 12px 30px rgba(0,0,0,.07);

}

.marcas .titulo-seccion{

  margin-bottom:40px;

}

.marcas .titulo-seccion h2{

  color:var(--rojo-oscuro);

  font-size:2.3rem;

  margin-bottom:10px;

}

.marcas .titulo-seccion p{

  color:var(--gris);

}


/* CONTENEDOR */

.contenedor-marcas{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(190px,1fr));

  gap:24px;

  align-items:center;

}


/* TARJETA DE MARCA */

.marca-card{

  min-height:135px;

  padding:22px;

  display:flex;

  justify-content:center;

  align-items:center;

  background:white;

  border:2px solid transparent;

  border-radius:22px;

  cursor:pointer;

  box-shadow:0 7px 18px rgba(0,0,0,.07);

  transition:all .35s ease;

}
/* IMAGEN */

.marca-card img{

  width:280px;

  height:150px;

  max-width:100%;

  max-height:100%;

  object-fit:contain;

  transition:.35s;

}
/* AL PASAR EL MOUSE */

.marca-card:hover{

  transform:translateY(-7px);

  border-color:var(--amarillo);

  background:linear-gradient(
      135deg,
      #fffdf2,
      #fff3bd
  );

  box-shadow:
  0 12px 30px rgba(255,190,0,.30);

}

.marca-card:hover img{

  transform:scale(1.08);

}


/* MARCA SELECCIONADA */

.marca-card.activa{

  border-color:var(--naranja);

  background:linear-gradient(
      135deg,
      #fff4b8,
      #ffd36b
  );

  box-shadow:
  0 10px 25px rgba(255,170,0,.35);

}


/* CELULAR */

@media(max-width:600px){

  .marcas{

      padding:45px 18px;

  }

  .marcas .titulo-seccion h2{

      font-size:1.9rem;

  }

  .contenedor-marcas{

      grid-template-columns:
      repeat(2,1fr);

      gap:14px;

  }

  .marca-card{

      min-height:105px;

      padding:15px;

  }

  .marca-card img{

      max-width:120px;

      max-height:65px;

  }

}
/*==================================================
        BLOQUE 8 - OPINIONES DE NUESTROS CLIENTES
==================================================*/

.opiniones{

  width:92%;
  max-width:1400px;

  margin:70px auto;

  padding:60px 30px;

  text-align:center;

  background:linear-gradient(
      135deg,
      #fffdf9,
      #fff3e5,
      #ffe8d4
  );

  border-radius:30px;

  box-shadow:0 12px 30px rgba(0,0,0,.07);

}


/*=========================
        TÍTULO
==========================*/

.opiniones .titulo-seccion{

  margin-bottom:40px;

}

.opiniones .titulo-seccion h2{

  color:var(--rojo-oscuro);

  font-size:2.1rem;

  margin-bottom:10px;

}

.opiniones .titulo-seccion p{

  color:var(--gris);

  font-size:.95rem;

}


/*=========================
     CONTENEDOR
==========================*/

.contenedor-opiniones{

  display:grid;

  grid-template-columns:
      repeat(3,1fr);

  gap:25px;

}


/*=========================
     TARJETA
==========================*/

.opinion-card{

  position:relative;

  padding:30px 25px;

  background:#ffffff;

  border-radius:24px;

  border:2px solid transparent;

  box-shadow:0 8px 20px rgba(0,0,0,.07);

  text-align:left;

  transition:all .4s ease;

  overflow:hidden;

}


/* Detalle decorativo */

.opinion-card::before{

  content:"“";

  position:absolute;

  top:-20px;

  right:20px;

  font-size:7rem;

  font-family:Georgia,serif;

  color:#ffe3a3;

  line-height:1;

}


/*=========================
        ESTRELLAS
==========================*/

.estrellas-opinion{

  color:#f5b400;

  font-size:1.1rem;

  letter-spacing:2px;

  margin-bottom:18px;

}


/*=========================
        TEXTO
==========================*/

.opinion-card p{

  position:relative;

  color:#666;

  font-size:.92rem;

  line-height:1.7;

  margin-bottom:22px;

}


/*=========================
       CLIENTE
==========================*/

.cliente-opinion{

  display:flex;

  align-items:center;

  gap:13px;

}


/* Círculo con inicial */

.avatar-cliente{

  width:48px;

  height:48px;

  flex-shrink:0;

  display:flex;

  justify-content:center;

  align-items:center;

  border-radius:50%;

  background:linear-gradient(
      135deg,
      var(--amarillo),
      var(--naranja),
      var(--rojo)
  );

  color:white;

  font-size:1.1rem;

  font-weight:700;

}


/* Nombre */

.cliente-opinion h4{

  margin:0;

  color:var(--rojo-oscuro);

  font-size:.95rem;

}


/* Pequeño texto */

.cliente-opinion span{

  display:block;

  margin-top:3px;

  color:#999;

  font-size:.78rem;

}


/*=========================
        HOVER
==========================*/

.opinion-card:hover{

  transform:translateY(-9px);

  border-color:#ffd166;

  box-shadow:
      0 18px 35px rgba(255,180,0,.18);

  background:linear-gradient(
      145deg,
      #ffffff,
      #fff9ed
  );

}

.opinion-card:hover .avatar-cliente{

  transform:scale(1.08);

}


/*=========================
     RESPONSIVE
==========================*/

@media(max-width:900px){

  .contenedor-opiniones{

      grid-template-columns:
          repeat(2,1fr);

  }

}


@media(max-width:600px){

  .opiniones{

      padding:45px 18px;

  }

  .contenedor-opiniones{

      grid-template-columns:1fr;

  }

  .opiniones .titulo-seccion h2{

      font-size:1.7rem;

  }

}

/*==================================================
              PIE DE PÁGINA
==================================================*/

footer{

  background:linear-gradient(
      135deg,
      #4a0707,
      #680909,
      #850d0d
  );

  color:#ffffff;

  padding:55px 6% 20px;

  margin-top:70px;

  box-shadow:
      0 -10px 30px rgba(80,0,0,.18);

}


/* CONTENEDOR */

.footer-contenedor{

  max-width:1400px;

  margin:auto;

  display:grid;

  grid-template-columns:
      1.5fr 1fr 1fr 1fr;

  gap:40px;

}


/* TÍTULOS */

footer h3{

  color:#ffd166;

  font-size:1.1rem;

  margin-bottom:18px;

}


/* TEXTOS */

footer p{

  color:#f8dddd;

  line-height:1.7;

  font-size:.9rem;

}


/* ENLACES */

footer a{

  display:block;

  color:#f8dddd;

  text-decoration:none;

  margin-bottom:10px;

  transition:.3s;

}

footer a:hover{

  color:#ffd166;

  transform:translateX(5px);

}


/* LOGO / NOMBRE */

.footer-logo{

  color:#ffffff;

  font-size:1.5rem;

  font-weight:800;

  margin-bottom:15px;

}


/* REDES SOCIALES */

.footer-redes{

  display:flex;

  gap:10px;

  margin-top:20px;

}

.footer-redes a{

  width:40px;

  height:40px;

  display:flex;

  justify-content:center;

  align-items:center;

  border-radius:50%;

  background:#850d0d;

  color:#ffffff;

  border:1px solid rgba(255,209,102,.35);

  transition:.35s;

}

.footer-redes a:hover{

  background:#ffd166;

  color:#4a0707;

  transform:
      translateY(-4px)
      scale(1.05);

}


/* LÍNEA INFERIOR */

.footer-bottom{

  max-width:1400px;

  margin:40px auto 0;

  padding-top:20px;

  border-top:1px solid rgba(255,255,255,.15);

  text-align:center;

}

.footer-bottom p{

  color:#e9caca;

  font-size:.8rem;

}


/* RESPONSIVE */

@media(max-width:900px){

  .footer-contenedor{

      grid-template-columns:
          repeat(2,1fr);

  }

}

@media(max-width:600px){

  footer{

      padding:45px 7% 20px;

  }

  .footer-contenedor{

      grid-template-columns:1fr;

      gap:25px;

  }

}

/* =========================================
   PANTALLA COMPLETA DEL CARRITO
========================================= */

.panel-carrito {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: #fffaf0;
  z-index: 9999;
  overflow-y: auto;
}

.panel-carrito.abierto {
  display: block;
}


/* ENCABEZADO */

.encabezado-carrito {
  width: 100%;
  background: linear-gradient(135deg, #e63900, #ff7a00);
  color: white;

  padding: 20px 5%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
}

.encabezado-carrito h2 {
  margin: 0;
  font-size: 28px;
}


/* BOTÓN CERRAR */

.cerrar-carrito {
  border: none;
  background: white;
  color: #d93600;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  font-size: 20px;
  font-weight: bold;

  cursor: pointer;
}

.cerrar-carrito:hover {
  background: #ffe1d2;
}


/* PRODUCTOS */

.productos-carrito {
  width: 90%;
  max-width: 1100px;

  margin: 30px auto;
}


/* CARRITO VACÍO */

.carrito-vacio {
  text-align: center;
  color: #777;
  font-size: 20px;
  padding: 60px 20px;
}


/* RESUMEN */

.resumen-carrito {
  width: 90%;
  max-width: 1100px;

  margin: 30px auto 60px;

  background: white;

  padding: 25px;

  border-radius: 18px;

  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.total-carrito {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 22px;

  margin-bottom: 20px;
}

.total-carrito strong {
  color: #e63900;
  font-size: 28px;
}


/* BOTÓN CONTINUAR */

.btn-continuar-compra {
  width: 100%;

  padding: 15px;

  border: none;
  border-radius: 12px;

  background: linear-gradient(
      135deg,
      #ffb000,
      #ff7200
  );

  color: white;

  font-size: 18px;
  font-weight: bold;

  cursor: pointer;
}

.btn-continuar-compra:hover {
  transform: translateY(-2px);
}

/* =========================================
   RECOMENDACIONES - SECUNDARIAS
========================================= */

.recomendaciones-carrito {
  width: 90%;
  max-width: 1100px;
  margin: 25px auto;
  padding: 18px 0;
}

.titulo-recomendaciones {
  margin-bottom: 12px;
}

.titulo-recomendaciones h2 {
  font-size: 18px;
  color: #555;
  margin: 0;
}

.titulo-recomendaciones p {
  font-size: 13px;
  color: #888;
  margin: 4px 0 0;
}

.lista-recomendaciones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.recomendacion-producto {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.imagen-recomendacion {
  height: 70px;
}

.imagen-recomendacion img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.recomendacion-producto h3 {
  font-size: 13px;
  margin: 5px 0;
  color: #333;
}

.recomendacion-producto .marca {
  font-size: 11px;
  margin: 3px 0;
  color: #777;
}

.recomendacion-producto strong {
  display: block;
  font-size: 13px;
  color: #e84916;
  margin: 5px 0;
}

.btn-recomendacion {
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  background: #ffb000;
  color: white;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

/* =========================================
   RESUMEN Y FINALIZAR COMPRA
========================================= */

.resumen-carrito {
  width: 90%;
  max-width: 1100px;
  margin: 30px auto 60px;

  background: white;
  padding: 25px;

  border-radius: 18px;

  border: 2px solid #ffe0c2;

  box-shadow: 0 6px 25px rgba(0,0,0,0.08);
}

.resumen-carrito h2 {
  margin-top: 0;
  color: #d9410b;
  font-size: 21px;
}

.detalle-resumen div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  color: #555;
}

.total-carrito {
  margin-top: 15px;
  padding-top: 15px;

  border-top: 1px solid #ddd;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 20px;
}

.total-carrito strong {
  color: #e63900;
  font-size: 27px;
}

.btn-continuar-compra {
  width: 100%;
  margin-top: 20px;

  padding: 16px;

  border: none;
  border-radius: 12px;

  background: linear-gradient(
      135deg,
      #ffb000,
      #ff7200
  );

  color: white;

  font-size: 18px;
  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;
}

.btn-continuar-compra:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255,114,0,0.25);
}

/* =========================================
   PANTALLA FINALIZAR COMPRA
========================================= */

.pantalla-compra {
  display: none;

  position: fixed;
  inset: 0;

  width: 100%;
  height: 100vh;

  background: #fffaf0;

  z-index: 10000;

  overflow-y: auto;
}

.pantalla-compra.abierta {
  display: block;
}


/* ENCABEZADO */

.encabezado-compra {

  background: linear-gradient(
      135deg,
      #d93600,
      #ff7200
  );

  color: white;

  padding: 20px 5%;

  display: flex;
  align-items: center;
  gap: 25px;
}

.encabezado-compra h1 {
  margin: 0;
  font-size: 28px;
}


/* VOLVER */

.btn-volver {

  background: white;
  color: #d93600;

  border: none;

  padding: 10px 16px;

  border-radius: 10px;

  font-weight: bold;

  cursor: pointer;
}


/* CONTENIDO */

.contenido-compra {

  width: 90%;
  max-width: 1100px;

  margin: 35px auto;

  display: grid;

  grid-template-columns:
      1.4fr 0.8fr;

  gap: 30px;
}


/* FORMULARIO */

.formulario-compra,
.resumen-final {

  background: white;

  padding: 25px;

  border-radius: 18px;

  box-shadow:
      0 5px 20px rgba(0,0,0,0.07);
}

.formulario-compra h2,
.resumen-final h2 {

  margin-top: 0;

  color: #d93600;
}


.texto-ayuda {

  color: #777;

  margin-bottom: 25px;
}


/* CAMPOS */

.formulario-compra label {

  display: block;

  margin-top: 16px;
  margin-bottom: 7px;

  font-weight: bold;

  color: #444;
}

.formulario-compra input[type="text"],
.formulario-compra input[type="tel"] {

  width: 100%;

  box-sizing: border-box;

  padding: 13px;

  border: 1px solid #ddd;

  border-radius: 10px;

  font-size: 15px;

  outline: none;
}

.formulario-compra input:focus {

  border-color: #ff8a00;

  box-shadow:
      0 0 0 3px rgba(255,138,0,0.12);
}


/* MÉTODOS DE PAGO */

.metodos-pago {

  display: flex;

  gap: 12px;

  margin-top: 10px;
}

.opcion-pago {

  flex: 1;

  background: #fff8e6;

  border: 1px solid #ffd37a;

  padding: 13px;

  border-radius: 10px;

  cursor: pointer;
}

.opcion-pago input {

  margin-right: 7px;
}


/* RECOJO */

.datos-recojo {

  margin-top: 25px;

  padding: 18px;

  background: #fff5d6;

  border-left: 5px solid #ffb000;

  border-radius: 10px;
}

.datos-recojo h3 {

  margin-top: 0;

  color: #c95c00;
}

.datos-recojo p {

  margin: 7px 0;

  color: #555;
}


/* RESUMEN */

.resumen-final {

  height: fit-content;
}

.total-final {

  border-top: 1px solid #ddd;

  margin-top: 20px;

  padding-top: 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.total-final strong {

  color: #e63900;

  font-size: 25px;
}


/* CONFIRMAR */

.btn-confirmar-pedido {

  width: 100%;

  margin-top: 25px;

  padding: 16px;

  border: none;

  border-radius: 12px;

  background: linear-gradient(
      135deg,
      #ffb000,
      #ff7200
  );

  color: white;

  font-size: 17px;

  font-weight: bold;

  cursor: pointer;
}

.btn-confirmar-pedido:hover {

  transform: translateY(-2px);

  box-shadow:
      0 5px 15px rgba(255,114,0,0.25);
}


/* MÓVIL */

@media (max-width: 700px) {

  .contenido-compra {

      grid-template-columns: 1fr;

  }

  .encabezado-compra {

      flex-wrap: wrap;

  }

}

/* =========================================
   PRODUCTOS DENTRO DEL CARRITO
========================================= */

.producto-en-carrito {
  width: 100%;
  box-sizing: border-box;

  background: #ffffff;

  border: 1px solid #eeeeee;
  border-left: 5px solid #ff9d00;

  border-radius: 16px;

  padding: 18px 20px;

  margin-bottom: 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.06);

  transition: 0.2s ease;
}


/* EFECTO AL PASAR EL MOUSE */

.producto-en-carrito:hover {

  transform: translateY(-2px);

  box-shadow:
      0 7px 20px rgba(0, 0, 0, 0.09);

  border-left-color: #e84b00;
}


/* INFORMACIÓN */

.info-producto-carrito {

  flex: 1;
}

.info-producto-carrito h3 {

  margin: 0 0 5px;

  color: #333;

  font-size: 18px;
}

.info-producto-carrito p {

  margin: 0 0 7px;

  color: #777;

  font-size: 14px;
}

.info-producto-carrito strong {

  color: #e84916;

  font-size: 17px;
}


/* CONTROLES */

.controles-carrito {

  display: flex;

  align-items: center;

  gap: 8px;
}


/* + Y - */

.btn-menos,
.btn-mas {

  width: 34px;
  height: 34px;

  border: none;

  border-radius: 9px;

  background: #fff1d6;

  color: #e65c00;

  font-size: 20px;

  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;
}

.btn-menos:hover,
.btn-mas:hover {

  background: #ffb000;

  color: white;
}


/* NÚMERO */

.controles-carrito span {

  min-width: 28px;

  text-align: center;

  font-size: 16px;

  font-weight: bold;

  color: #333;
}


/* ELIMINAR */

.btn-eliminar {

  width: 38px;
  height: 38px;

  margin-left: 8px;

  border: none;

  border-radius: 10px;

  background: #fff0ee;

  color: #e53935;

  font-size: 17px;

  cursor: pointer;

  transition: 0.2s;
}

.btn-eliminar:hover {

  background: #e53935;

  color: white;

  transform: scale(1.05);
}


/* CARRITO VACÍO */

.carrito-vacio {

  text-align: center;

  padding: 60px 20px;

  color: #888;

  font-size: 19px;
}


/* =========================================
 CELULAR
========================================= */

@media (max-width: 600px) {

  .producto-en-carrito {

      align-items: flex-start;

      flex-direction: column;

  }

  .controles-carrito {

      width: 100%;

      justify-content: flex-end;

  }

}

```css
/* ============================= */
/* CARRUSEL DE PRODUCTOS */
/* ============================= */

.hero-imagen {
    position: relative;
    width: 55%;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTENEDOR PRINCIPAL */

.carrusel-productos {
    position: relative;

    width: 100%;
    max-width: 760px;
    min-height: 430px;

    background:
        radial-gradient(circle at 85% 20%, rgba(255, 193, 7, 0.20), transparent 30%),
        linear-gradient(135deg, #fff8e1 0%, #ffffff 55%, #fff3cd 100%);

    border-radius: 30px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.13),
        0 5px 15px rgba(255, 152, 0, 0.10);

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 152, 0, 0.12);
}

/* DECORACIONES DEL BANNER */

.carrusel-productos::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    background: rgba(255, 193, 7, 0.13);

    border-radius: 50%;

    right: -100px;
    top: -100px;
}

.carrusel-productos::after {
    content: "";
    position: absolute;

    width: 220px;
    height: 220px;

    background: rgba(255, 87, 34, 0.07);

    border-radius: 50%;

    left: -100px;
    bottom: -110px;
}

/* ============================= */
/* PRODUCTO */
/* ============================= */

.producto-carrusel {

    position: relative;
    z-index: 2;

    width: 88%;
    min-height: 350px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    animation: aparecerProducto 0.5s ease;
}

@keyframes aparecerProducto {

    from {
        opacity: 0;
        transform: translateX(35px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}

/* ============================= */
/* INFORMACIÓN */
/* ============================= */

.producto-info {

    flex: 1;
    max-width: 370px;
    padding-left: 15px;
}

.producto-etiqueta {

    display: inline-block;

    background: linear-gradient(
        135deg,
        #ff9800,
        #f4511e
    );

    color: white;

    padding: 8px 16px;

    border-radius: 25px;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 14px;

    box-shadow:
        0 5px 12px rgba(255, 152, 0, 0.25);
}

.producto-info h3 {

    font-size: 36px;

    line-height: 1.1;

    color: #c62828;

    margin: 5px 0 10px;

    font-weight: 800;
}

.producto-info p {

    color: #555;

    font-size: 17px;

    line-height: 1.5;

    margin-bottom: 18px;
}

/* ============================= */
/* PRECIOS */
/* ============================= */

.precios {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 8px;
}

.precio-anterior {

    color: #999;

    text-decoration: line-through;

    font-size: 17px;
}

.precio-actual {

    color: #e53935;

    font-size: 30px;

    font-weight: 800;
}

.producto-promocion {

    color: #2e7d32;

    font-size: 14px;

    font-weight: 700;

    display: inline-block;

    background: rgba(46, 125, 50, 0.08);

    padding: 5px 10px;

    border-radius: 10px;
}

/* ============================= */
/* IMAGEN DEL PRODUCTO */
/* ============================= */

.producto-imagen {

    position: relative;

    width: 330px;
    height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
}

/* CÍRCULO DETRÁS DEL PRODUCTO */

.producto-imagen::before {

    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    background: rgba(255, 255, 255, 0.85);

    border-radius: 50%;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.08);

    z-index: -1;
}

.producto-imagen img {

    width: auto;

    max-width: 100%;

    height: 320px;

    max-height: 330px;

    object-fit: contain;

    filter:
        drop-shadow(0 15px 12px rgba(0, 0, 0, 0.16));

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.producto-imagen img:hover {

    transform: scale(1.08) translateY(-5px);

    filter:
        drop-shadow(0 20px 18px rgba(0, 0, 0, 0.20));
}

/* ============================= */
/* FLECHAS */
/* ============================= */

.flecha-carrusel {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;

    height: 48px;

    border: none;

    border-radius: 50%;

    background: white;

    color: #f57c00;

    cursor: pointer;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: bold;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.15);

    transition: all 0.3s ease;
}

.flecha-carrusel:hover {

    background: #ff9800;

    color: white;

    transform:
        translateY(-50%)
        scale(1.12);

    box-shadow:
        0 8px 20px rgba(255, 152, 0, 0.35);
}

.flecha-carrusel.anterior {

    left: 15px;
}

.flecha-carrusel.siguiente {

    right: 15px;
}

/* ============================= */
/* INDICADORES */
/* ============================= */

.indicadores {

    position: absolute;

    bottom: 18px;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    z-index: 10;
}

.indicador {

    width: 9px;

    height: 9px;

    background: #d0d0d0;

    border-radius: 20px;

    cursor: pointer;

    transition: all 0.3s ease;
}

.indicador:hover {

    background: #ffb300;
}

.indicador.activo {

    width: 28px;

    background: #ff9800;

    box-shadow:
        0 3px 8px rgba(255, 152, 0, 0.35);
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 900px) {

    .hero-imagen {
        width: 100%;
        min-height: 400px;
    }

    .carrusel-productos {
        max-width: 100%;
    }

    .producto-carrusel {
        width: 85%;
    }

    .producto-imagen {
        width: 280px;
    }

}

@media (max-width: 700px) {

    .carrusel-productos {
        min-height: 600px;
    }

    .producto-carrusel {

        flex-direction: column-reverse;

        justify-content: center;

        gap: 5px;

        padding-top: 20px;
    }

    .producto-info {

        text-align: center;

        max-width: 90%;

        padding-left: 0;
    }

    .producto-info h3 {
        font-size: 29px;
    }

    .producto-info p {
        font-size: 15px;
    }

    .producto-imagen {

        width: 260px;
        height: 280px;
    }

    .producto-imagen img {

        height: 250px;
    }

}

```css
/* ============================= */
/* ANIMACIÓN DEL CARRUSEL */
/* ============================= */

.producto-carrusel {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Entra desde la derecha */

.producto-carrusel.deslizar-derecha {
    animation: deslizarDesdeDerecha 0.5s ease;
}

@keyframes deslizarDesdeDerecha {

    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Entra desde la izquierda */

.producto-carrusel.deslizar-izquierda {
    animation: deslizarDesdeIzquierda 0.5s ease;
}

@keyframes deslizarDesdeIzquierda {

    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*==================================================
    PANTALLA PEDIDO CONFIRMADO
==================================================*/

.pantalla-pedido-confirmado {

  position: fixed;

  inset: 0;

  z-index: 99999;

  background:
      linear-gradient(
          135deg,
          #fffaf2,
          #ffffff
      );

  overflow-y: auto;

  padding: 30px 20px;

  box-sizing: border-box;

}


.contenido-pedido-confirmado {

  max-width: 650px;

  margin: 40px auto;

  background: white;

  border-radius: 25px;

  padding: 40px;

  text-align: center;

  box-shadow:
      0 15px 45px
      rgba(0, 0, 0, 0.12);

}


/* ICONO VERDE */

.icono-exito {

  width: 80px;
  height: 80px;

  margin: 0 auto 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #e8f8ed;

  color: #20a44b;

  font-size: 45px;

  font-weight: bold;

}


.contenido-pedido-confirmado h1 {

  margin: 10px 0;

  color: #a51d1d;

  font-size: 32px;

}


.mensaje-exito {

  color: #666;

  font-size: 17px;

}


/* NÚMERO DE PEDIDO */

.numero-pedido {

  margin: 25px 0;

  padding: 15px;

  border-radius: 15px;

  background: #fff6df;

}


.numero-pedido span {

  display: block;

  color: #777;

  font-size: 13px;

}


.numero-pedido strong {

  display: block;

  margin-top: 5px;

  color: #e65c00;

  font-size: 20px;

}


/* DATOS */

.datos-pedido-confirmado {

  text-align: left;

  padding: 20px;

  border-radius: 15px;

  background: #fafafa;

}


.datos-pedido-confirmado p {

  margin: 10px 0;

  color: #444;

}


/* RECOJO */

.mensaje-recojo {

  margin-top: 20px;

  padding: 22px;

  border-radius: 17px;

  background: #fff1e8;

  border-left: 5px solid #e84b00;

}


.mensaje-recojo h2 {

  margin-top: 0;

  color: #b52a16;

  font-size: 20px;

}


.mensaje-recojo p {

  color: #555;

}


.mensaje-recojo strong {

  color: #9d1b1b;

  font-size: 18px;

}


/* BOTÓN */

.btn-volver-inicio {

  margin-top: 25px;

  border: none;

  padding: 14px 28px;

  border-radius: 12px;

  background:
      linear-gradient(
          135deg,
          #e84b16,
          #b51d1d
      );

  color: white;

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

  transition: 0.2s;

}


.btn-volver-inicio:hover {

  transform: translateY(-2px);

  box-shadow:
      0 6px 15px
      rgba(180, 30, 30, 0.25);

}


/* CELULAR */

@media (max-width: 600px) {

  .contenido-pedido-confirmado {

      padding: 25px 18px;

      margin: 15px auto;

  }


  .contenido-pedido-confirmado h1 {

      font-size: 25px;

  }

}

/*==================================================
    BUSCADOR INTELIGENTE
    SUGERENCIAS MIENTRAS ESCRIBES
==================================================*/

/* Contenedor del buscador */

.buscador-productos,
.buscador-principal,
.buscador-superior {
    position: relative;
}


/*==================================================
    CAJA DE SUGERENCIAS
==================================================*/

.sugerencias-buscador {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    width: 100%;

    max-height: 420px;

    overflow-y: auto;

    background: #ffffff;

    border-radius: 18px;

    border: 1px solid #eeeeee;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.16);

    z-index: 99999;

    padding: 6px;

    box-sizing: border-box;

    animation:
        aparecerSugerencias
        0.2s ease;
}


/*==================================================
    ANIMACIÓN
==================================================*/

@keyframes aparecerSugerencias {

    from {

        opacity: 0;

        transform:
            translateY(-8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/*==================================================
    CADA PRODUCTO SUGERIDO
==================================================*/

.sugerencia-producto {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 12px;

    border: none;

    border-radius: 13px;

    background: transparent;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

    box-sizing: border-box;
}


/* Al pasar el mouse */

.sugerencia-producto:hover {

    background:
        linear-gradient(
            90deg,
            #fff7ed,
            #fffdf9
        );

    transform:
        translateX(4px);
}


/*==================================================
    IMAGEN DEL PRODUCTO
==================================================*/

.sugerencia-imagen {

    width: 58px;

    height: 58px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff8ef;

    border-radius: 12px;

    overflow: hidden;

}


/* Imagen */

.sugerencia-imagen img {

    width: 48px;

    height: 48px;

    object-fit: contain;

}


/* Si no tiene imagen */

.sugerencia-imagen span {

    font-size: 27px;

}


/*==================================================
    INFORMACIÓN
==================================================*/

.sugerencia-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


/* Nombre */

.sugerencia-info strong {

    color: #333333;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* Marca */

.sugerencia-info small {

    color: #777777;

    font-size: 12px;

}


/* Primera información */

.sugerencia-info small:first-of-type {

    color: #e85d04;

    font-weight: 600;

}


/*==================================================
    PRECIO
==================================================*/

.sugerencia-precio {

    color: #d62828;

    font-size: 15px;

    font-weight: 800;

    white-space: nowrap;

    padding-right: 5px;

}


/*==================================================
    BOTÓN VER TODOS
==================================================*/

.ver-todos-sugerencias {

    width: 100%;

    border: none;

    border-top: 1px solid #eeeeee;

    background: #fffaf3;

    color: #e85d04;

    padding: 14px;

    border-radius: 0 0 12px 12px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.ver-todos-sugerencias:hover {

    background: #fff0dc;

    color: #c24100;

}


/*==================================================
    SIN RESULTADOS
==================================================*/

.sin-sugerencias {

    padding: 22px;

    text-align: center;

}


.sin-sugerencias strong {

    display: block;

    color: #555555;

    font-size: 14px;

    margin-bottom: 5px;

}


.sin-sugerencias span {

    color: #999999;

    font-size: 12px;

}


/*==================================================
    BARRA DE SCROLL
==================================================*/

.sugerencias-buscador::-webkit-scrollbar {

    width: 6px;

}


.sugerencias-buscador::-webkit-scrollbar-thumb {

    background: #f5a623;

    border-radius: 10px;

}


/*==================================================
    CELULAR
==================================================*/

@media (max-width: 600px) {

    .sugerencias-buscador {

        max-height: 350px;

        border-radius: 14px;

    }


    .sugerencia-producto {

        gap: 10px;

        padding: 10px;

    }


    .sugerencia-imagen {

        width: 48px;

        height: 48px;

    }


    .sugerencia-imagen img {

        width: 40px;

        height: 40px;

    }


    .sugerencia-info strong {

        font-size: 13px;

    }


    .sugerencia-info small {

        font-size: 11px;

    }


    .sugerencia-precio {

        font-size: 13px;

    }

}

/*==================================================
    PANTALLA DE RESULTADOS DE BÚSQUEDA
==================================================*/

.resultados-busqueda {

  display: none;

  position: fixed;

  inset: 0;

  width: 100%;
  height: 100vh;

  background: #fffaf3;

  z-index: 99998;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 30px 5%;

  box-sizing: border-box;
}


/* CUANDO SE ABRE */

.resultados-busqueda.abierto {

  display: block;

}

/*==================================================
  ENCABEZADO DE RESULTADOS
==================================================*/

/*==================================================
    ENCABEZADO DE RESULTADOS
==================================================*/

.encabezado-resultados {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 30px;

  margin-bottom: 30px;

}


/*==================================================
  BUSCADOR DE RESULTADOS
==================================================*/

.buscador-resultados {

  width: min(700px, 70%);

  height: 62px;

  display: flex;

  align-items: center;

  background: white;

  border: 2px solid #ffe0c7;

  border-radius: 40px;

  padding: 0 22px;

  box-shadow:
      0 7px 20px rgba(0,0,0,.08);

}


.buscador-resultados i {

  color: var(--naranja);

  font-size: 20px;

  margin-right: 12px;

}


.buscador-resultados input {

  width: 100%;

  border: none;

  outline: none;

  background: transparent;

  font-family: "Poppins", sans-serif;

  font-size: 16px;

}


/*==================================================
  CARRITO GRANDE
==================================================*/

.btn-carrito-resultados {

  position: relative;

  width: 65px;

  height: 65px;

  flex-shrink: 0;

  border: none;

  border-radius: 50%;

  background:
      linear-gradient(
          135deg,
          var(--amarillo),
          var(--naranja),
          var(--rojo)
      );

  color: white;

  font-size: 26px;

  cursor: pointer;

  box-shadow:
      0 8px 22px rgba(214,40,40,.25);

  transition: .3s;

}


.btn-carrito-resultados:hover {

  transform:
      scale(1.08)
      translateY(-2px);

}


/* BUSCADOR */

.buscador-resultados {
  flex: 1;
  max-width: 750px;
  height: 55px;

  display: flex;
  align-items: center;

  background: white;

  border: 2px solid #eeeeee;

  border-radius: 18px;

  padding: 0 20px;

  box-shadow:
      0 5px 18px rgba(0,0,0,0.07);
}

.buscador-resultados i {
  color: #f57c00;
  font-size: 20px;
  margin-right: 12px;
}

.buscador-resultados input {
  width: 100%;
  border: none;
  outline: none;

  font-family: "Poppins", sans-serif;

  font-size: 16px;

  background: transparent;
}


/* CARRITO */

.btn-carrito-resultados {

  position: relative;

  width: 55px;
  height: 55px;

  border: none;

  border-radius: 16px;

  background:
      linear-gradient(
          135deg,
          #ff9800,
          #e65100
      );

  color: white;

  font-size: 21px;

  cursor: pointer;

  box-shadow:
      0 7px 18px
      rgba(245,124,0,0.25);

  transition: 0.25s;
}

.btn-carrito-resultados:hover {

  transform: translateY(-3px) scale(1.04);

}


/* CONTADOR */

#contadorCarritoResultados {

  position: absolute;

  top: -7px;
  right: -7px;

  min-width: 21px;
  height: 21px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #d62828;

  color: white;

  border-radius: 50%;

  font-size: 11px;

  font-weight: 700;

  border: 2px solid white;
}

/*==================================================
    CONTENIDO PRINCIPAL DE RESULTADOS
==================================================*/

.contenido-resultados {

  display: flex;

  align-items: stretch;

  width: 100%;

  gap: 30px;

  min-height: calc(100vh - 170px);

}


/*==================================================
    CATEGORÍAS LATERALES
==================================================*/

.categorias-resultados {

  width: 280px;

  flex: 0 0 280px;

  align-self: stretch;

  min-height: calc(100vh - 170px);

  background: white;

  border-radius: 0 22px 22px 0;

  padding: 25px 18px;

  box-sizing: border-box;

  box-shadow:
      5px 0 25px rgba(0,0,0,.08);

}


/* TÍTULO */

.categorias-resultados h2,

.categorias-resultados h3 {

  margin: 0 0 20px;

  color: var(--rojo-oscuro);

  font-size: 21px;

}


/* BOTONES */

.categorias-resultados button {

  width: 100%;

  min-height: 48px;

  border: none;

  background: transparent;

  text-align: left;

  padding: 12px 14px;

  margin-bottom: 6px;

  border-radius: 12px;

  color: #555;

  font-family: "Poppins", sans-serif;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: .25s;

}


/* HOVER */

.categorias-resultados button:hover {

  background:
      linear-gradient(
          135deg,
          #fff1dc,
          #ffe2c2
      );

  color: var(--rojo);

  transform: translateX(4px);

}

.categorias-resultados h2 {

  margin: 0 0 18px;

  font-size: 21px;

  color: #a51d1d;
}


.categorias-resultados button {

  width: 100%;

  border: none;

  background: transparent;

  text-align: left;

  padding: 12px 10px;

  margin-bottom: 5px;

  border-radius: 12px;

  color: #555;

  font-family: "Poppins", sans-serif;

  font-size: 14px;

  cursor: pointer;

  transition: 0.2s;
}


.categorias-resultados button:hover {

  background:
      linear-gradient(
          135deg,
          #fff1dc,
          #ffe4c2
      );

  color: #d84315;

  transform: translateX(4px);

}


/*==================================================
  ZONA DE PRODUCTOS
==================================================*/

.zona-productos-resultados {

  flex: 1;

  min-width: 0;
}


.titulo-resultados {

  margin-bottom: 25px;
}


.titulo-resultados h2 {

  margin: 0;

  color: #a51d1d;

  font-size: 28px;

  font-weight: 800;
}


.titulo-resultados p {

  margin-top: 5px;

  color: #777;

  font-size: 14px;
}


/*==================================================
  CUADRÍCULA
==================================================*/

.grid-resultados {

  display: grid;

  grid-template-columns:
      repeat(
          auto-fill,
          minmax(210px, 1fr)
      );

  gap: 22px;

  width: 100%;
}


/*==================================================
  TARJETA DEL PRODUCTO
==================================================*/

.producto-resultado {

  position: relative;

  background: white;

  border-radius: 20px;

  padding: 18px;

  box-sizing: border-box;

  box-shadow:
      0 7px 22px
      rgba(0,0,0,0.07);

  transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;

  animation:
      aparecerResultado 0.4s ease both;
}


.producto-resultado:hover {

  transform:
      translateY(-6px);

  box-shadow:
      0 14px 30px
      rgba(0,0,0,0.12);
}


/*==================================================
  IMAGEN
==================================================*/

.imagen-resultado {

  width: 100%;

  height: 190px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #fffaf3;

  border-radius: 15px;

  margin-bottom: 15px;

  overflow: hidden;
}


.imagen-resultado img {

  width: 100%;

  height: 170px;

  object-fit: contain;

  transition: 0.3s;
}


.producto-resultado:hover
.imagen-resultado img {

  transform:
      scale(1.07)
      translateY(-3px);
}


/*==================================================
  INFORMACIÓN
==================================================*/

.info-resultado h3 {

  margin: 0 0 5px;

  color: #333;

  font-size: 17px;

  line-height: 1.3;
}


.marca-resultado {

  margin: 0;

  color: #e65100;

  font-size: 13px;

  font-weight: 600;
}


.categoria-resultado {

  margin: 4px 0;

  color: #888;

  font-size: 12px;
}


.precio-resultado {

  display: block;

  margin-top: 10px;

  color: #d62828;

  font-size: 21px;

  font-weight: 800;
}


/*==================================================
  BOTONES
==================================================*/

.acciones-resultado {

  display: flex;

  gap: 8px;

  margin-top: 14px;
}


.acciones-resultado button {

  flex: 1;

  border: none;

  border-radius: 10px;

  padding: 9px;

  font-family: "Poppins", sans-serif;

  font-weight: 600;

  cursor: pointer;

  transition: 0.2s;
}


.acciones-resultado .btn-agregar {

  background:
      linear-gradient(
          135deg,
          #ff9800,
          #f4511e
      );

  color: white;
}


.acciones-resultado .btn-detalles {

  background: #f3f3f3;

  color: #555;
}


.acciones-resultado button:hover {

  transform: translateY(-2px);
}


/*==================================================
  SIN RESULTADOS
==================================================*/

.sin-resultados {

  grid-column: 1 / -1;

  text-align: center;

  padding: 70px 20px;

  background: white;

  border-radius: 20px;

  box-shadow:
      0 8px 25px
      rgba(0,0,0,0.06);
}


.icono-sin-resultados {

  font-size: 50px;

  margin-bottom: 10px;
}


.sin-resultados h3 {

  color: #a51d1d;

  margin-bottom: 5px;
}


.sin-resultados p {

  color: #777;
}


/*==================================================
  ANIMACIÓN
==================================================*/

@keyframes aparecerResultado {

  from {

      opacity: 0;

      transform:
          translateY(15px)
          scale(0.98);

  }

  to {

      opacity: 1;

      transform:
          translateY(0)
          scale(1);

  }

}


/*==================================================
  CELULAR
==================================================*/

@media (max-width: 850px) {

  .contenido-resultados {

      flex-direction: column;

  }

  .categorias-resultados {

      width: 100%;

      display: grid;

      grid-template-columns:
          repeat(2, 1fr);

      gap: 5px;

  }

  .categorias-resultados h2 {

      grid-column: 1 / -1;

  }

}


@media (max-width: 550px) {

  .resultados-busqueda {

      padding: 25px 15px;

  }

  /*==================================================
    ENCABEZADO DE RESULTADOS
==================================================*/

.encabezado-resultados {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    margin-bottom: 30px;

}


/*==================================================
    BUSCADOR DE RESULTADOS
==================================================*/

.buscador-resultados {

    width: min(700px, 70%);

    height: 62px;

    display: flex;

    align-items: center;

    background: white;

    border: 2px solid #ffe0c7;

    border-radius: 40px;

    padding: 0 22px;

    box-shadow:
        0 7px 20px rgba(0,0,0,.08);

}


.buscador-resultados i {

    color: var(--naranja);

    font-size: 20px;

    margin-right: 12px;

}


.buscador-resultados input {

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

}


/*==================================================
    CARRITO GRANDE
==================================================*/

.btn-carrito-resultados {

    position: relative;

    width: 65px;

    height: 65px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--amarillo),
            var(--naranja),
            var(--rojo)
        );

    color: white;

    font-size: 26px;

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(214,40,40,.25);

    transition: .3s;

}


.btn-carrito-resultados:hover {

    transform:
        scale(1.08)
        translateY(-2px);

}

  .grid-resultados {

      grid-template-columns:
          repeat(2, 1fr);

      gap: 12px;

  }

  .producto-resultado {

      padding: 12px;

  }

  .imagen-resultado {

      height: 145px;

  }

  .imagen-resultado img {

      height: 130px;

  }

  .info-resultado h3 {

      font-size: 14px;

  }

}

/*==================================================
    BLOQUEAR SCROLL DE LA PÁGINA PRINCIPAL
    MIENTRAS ESTÁN ABIERTOS LOS RESULTADOS
==================================================*/

body.resultados-abiertos {
  overflow: hidden;
}

/*==================================================
    FICHA DEL PRODUCTO
==================================================*/

.detalle-producto {

  display: none;

  position: fixed;

  inset: 0;

  width: 100%;
  height: 100vh;

  background: #fffaf3;

  z-index: 100000;

  overflow-y: auto;

  padding: 25px 5%;

  box-sizing: border-box;
}


.detalle-producto.abierto {
  display: block;
}


.detalle-encabezado {

  max-width: 1200px;

  margin: auto auto 25px;

}


.cerrar-detalle-producto {

  padding: 11px 20px;

  border-radius: 25px;

  background: white;

  color: var(--rojo);

  font-weight: 700;

  box-shadow:
      0 5px 15px rgba(0,0,0,.08);

}


.detalle-contenido {

  max-width: 1200px;

  margin: auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  align-items: center;

}


.detalle-imagen {

  min-height: 400px;

  background: white;

  border-radius: 25px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow:
      0 8px 25px rgba(0,0,0,.08);

}


.detalle-imagen img {

  width: auto;

  max-width: 80%;

  height: 350px;

  object-fit: contain;

}


.detalle-categoria {

  display: inline-block;

  padding: 7px 14px;

  border-radius: 20px;

  background: #fff0dc;

  color: var(--naranja);

  font-weight: 700;

  font-size: 13px;

}


.detalle-informacion h1 {

  margin: 15px 0 8px;

  color: var(--rojo-oscuro);

  font-size: 38px;

}


.detalle-marca {

  color: #777;

}


.detalle-estrellas {

  color: #fcbf49;

  font-size: 22px;

  margin: 15px 0;

}


.detalle-precio {

  display: block;

  color: var(--rojo);

  font-size: 34px;

}


.detalle-descripcion {

  margin-top: 18px;

}


.detalle-stock {

  margin-top: 12px;

  color: #2e7d32;

  font-weight: 700;

}


.btn-agregar-detalle {

  margin-top: 22px;

  padding: 15px 28px;

  border-radius: 30px;

  background:
      linear-gradient(
          135deg,
          var(--amarillo),
          var(--naranja),
          var(--rojo)
      );

  color: white;

  font-weight: 700;

  font-size: 16px;

}


.detalle-recomendaciones {

  max-width: 1400px;

  margin: 60px auto 30px;

}


.grid-recomendaciones-detalle {

  display: grid;

  grid-template-columns:
      repeat(
          auto-fill,
          minmax(190px, 1fr)
      );

  gap: 20px;

  margin-top: 20px;

}


.recomendacion-detalle {

  background: white;

  padding: 15px;

  border-radius: 18px;

  box-shadow:
      0 7px 20px rgba(0,0,0,.07);

}


.recomendacion-detalle-imagen {

  height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #fff9f4;

  border-radius: 14px;

  margin-bottom: 12px;

}


.recomendacion-detalle-imagen img {

  width: 120px;

  height: 120px;

  object-fit: contain;

}


.recomendacion-detalle h3 {

  font-size: 15px;

}


.recomendacion-detalle strong {

  display: block;

  color: var(--rojo);

  font-size: 18px;

  margin: 8px 0;

}


.recomendacion-detalle .btn-agregar {

  width: 100%;

  padding: 10px;

}


@media (max-width: 750px) {

  .detalle-contenido {

      grid-template-columns: 1fr;

  }

}

/*==================================================
    SUGERENCIAS DEL BUSCADOR DE RESULTADOS
==================================================*/

.buscador-resultados {
  position: relative;
}

.sugerencias-resultados {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;

  background: white;

  border-radius: 18px;

  border: 1px solid #eeeeee;

  box-shadow:
      0 15px 35px rgba(0,0,0,.16);

  padding: 6px;

  z-index: 999999;

  max-height: 420px;
  overflow-y: auto;
}

/*==================================================
    BOTÓN VOLVER AL INICIO - RESULTADOS
==================================================*/

.btn-volver-inicio-resultados {

  flex-shrink: 0;

  padding: 13px 20px;

  border: none;

  border-radius: 14px;

  background: linear-gradient(
      135deg,
      #ffb000,
      #e84b16
  );

  color: white;

  font-family: "Poppins", sans-serif;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
      0 6px 18px
      rgba(232, 75, 22, 0.22);

  transition: 0.25s;
}

.btn-volver-inicio-resultados:hover {

  transform: translateY(-2px);

  box-shadow:
      0 9px 22px
      rgba(232, 75, 22, 0.30);
}


@media (max-width: 700px) {

  .encabezado-resultados {

      flex-wrap: wrap;

  }

  .btn-volver-inicio-resultados {

      width: 100%;

      order: 3;

  }

}

/*==================================================
    ADMINISTRADOR DE IMÁGENES
==================================================*/

#adminImagenes {
  width: 92%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(0,0,0,.08);
  box-sizing: border-box;
}

#adminImagenes h2 {
  margin: 0 0 8px;
  font-size: 26px;
  color: #a4133c;
}

#adminImagenes p {
  margin: 0 0 20px;
  color: #666;
}

#buscarImagenAdmin {
  width: 100%;
  padding: 15px 18px;
  margin-bottom: 20px;
  border: 2px solid #fcbf49;
  border-radius: 14px;
  outline: none;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  box-sizing: border-box;
}

#buscarImagenAdmin:focus {
  border-color: #f77f00;
}

#listaImagenesAdmin {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#listaImagenesAdmin > div {
  background: #fffaf3;
  border: 1px solid #f3e4d2;
  border-radius: 16px;
  padding: 15px;
  transition: .2s;
}

#listaImagenesAdmin > div:hover {
  transform: translateY(-2px);
}

#listaImagenesAdmin strong {
  font-size: 16px;
  color: #333;
}

#listaImagenesAdmin small {
  color: #777;
}

#listaImagenesAdmin img {
  border: 1px solid #eee;
}

#listaImagenesAdmin input {
  font-family: Poppins, sans-serif;
  outline: none;
}

#listaImagenesAdmin input:focus {
  border-color: #f77f00 !important;
}

#listaImagenesAdmin button {
  font-family: Poppins, sans-serif;
  border: none;
  transition: .2s;
}

#listaImagenesAdmin button:hover {
  transform: translateY(-1px);
  opacity: .92;
}

@media (max-width: 800px) {

  #listaImagenesAdmin > div {
      grid-template-columns: 1fr !important;
  }

  #listaImagenesAdmin img {
      width: 100px !important;
      height: 100px !important;
  }

}

/*==================================================
    ADMINISTRADOR COMPARTIDO DE IMÁGENES
==================================================*/

#panelImagenesCompartido {
  width: 94%;
  max-width: 1150px;
  margin: 40px auto;
  padding: 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  box-sizing: border-box;
}

.panel-imagenes-cabeza h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.panel-imagenes-cabeza p {
  margin: 0 0 16px;
  font-size: 13px;
  color: #666;
}

.buscador-imagenes input {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 2px solid #fcbf49;
  border-radius: 10px;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
}

.buscador-imagenes input:focus {
  border-color: #f77f00;
}

#resultadoImagenes {
  margin-top: 16px;
}

.tarjeta-imagen {
  display: grid;
  grid-template-columns: 1.5fr 85px 2fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background: #fffaf3;
  border: 1px solid #eee0cf;
  border-radius: 12px;
}

.id-producto {
  display: inline-block;
  margin-bottom: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #fcbf49;
  font-size: 10px;
  font-weight: 700;
}

.datos-producto h3 {
  margin: 2px 0 5px;
  font-size: 14px;
}

.datos-producto p {
  margin: 2px 0;
  font-size: 11px;
  color: #666;
}

.vista-producto {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
}

.vista-producto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vista-producto span {
  font-size: 28px;
  opacity: .5;
}

.editor-imagen {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.url-producto {
  width: 100%;
  height: 36px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 11px;
  box-sizing: border-box;
}

.botones-imagen {
  display: flex;
  gap: 7px;
}

.btn-preview,
.btn-copiar {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.btn-preview {
  background: #fcbf49;
}

.btn-copiar {
  background: #f77f00;
  color: white;
}

.mensaje-imagen {
  min-height: 14px;
  font-size: 10px;
  color: #16803c;
}

.mensaje-inicial-imagenes,
.sin-resultados-imagenes {
  padding: 22px;
  text-align: center;
  background: #fffaf3;
  border-radius: 10px;
  color: #777;
}

@media (max-width: 800px) {

  .tarjeta-imagen {
      grid-template-columns: 1fr 80px;
  }

  .editor-imagen {
      grid-column: 1 / -1;
  }

}

#editorProductos {
  width: 94%;
  max-width: 1000px;
  margin: 35px auto;
  padding: 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

#editorProductos h2 {
  margin: 0 0 5px;
  font-size: 22px;
}

#editorProductos > p {
  margin: 0 0 15px;
  color: #666;
  font-size: 13px;
}

#buscarEditorProducto {
  width: 100%;
  height: 42px;
  padding: 10px 14px;
  border: 2px solid #fcbf49;
  border-radius: 10px;
  box-sizing: border-box;
}

.editor-card {
  margin-top: 15px;
  padding: 15px;
  background: #fffaf3;
  border: 1px solid #eadcc9;
  border-radius: 14px;
}

.editor-id {
  display: inline-block;
  padding: 4px 7px;
  margin-bottom: 10px;
  background: #fcbf49;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}

.editor-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
}

.editor-imagen {
  width: 95px;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.editor-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editor-imagen span {
  font-size: 28px;
}

.editor-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.editor-form label {
  font-size: 10px;
  font-weight: 700;
  color: #666;
}

.editor-form input {
  width: 100%;
  height: 34px;
  padding: 7px 9px;
  border: 1px solid #ddd;
  border-radius: 7px;
  box-sizing: border-box;
}

#editorImagen {
  grid-column: 1 / -1;
}

.editor-botones {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.editor-botones button {
  flex: 1;
  height: 36px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

#editorVista {
  background: #fcbf49;
}

#editorGuardar {
  background: #f77f00;
  color: white;
}

#editorMensaje {
  grid-column: 1 / -1;
  color: #16803c;
}

.editor-mensaje {
  margin-top: 15px;
  padding: 20px;
  text-align: center;
  background: #fffaf3;
  border-radius: 10px;
  color: #777;
}

/*==================================================
    ADMINISTRADOR DEFINITIVO
==================================================*/

#administradorDefinitivo {
  width: 94%;
  max-width: 1100px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  box-sizing: border-box;
}

.admin-def-titulo h2 {
  margin: 0 0 5px;
  font-size: 22px;
}

.admin-def-titulo p {
  margin: 0 0 16px;
  color: #666;
  font-size: 13px;
}

#adminDefBuscador {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 2px solid #fcbf49;
  border-radius: 10px;
  box-sizing: border-box;
  outline: none;
}

.admin-def-card {
  margin-top: 16px;
  padding: 15px;
  background: #fffaf3;
  border: 1px solid #eadcc9;
  border-radius: 14px;
}

.admin-def-id {
  display: inline-block;
  padding: 4px 8px;
  background: #fcbf49;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}

.admin-def-card h3 {
  margin: 7px 0 14px;
  font-size: 15px;
}

.admin-def-grid {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 17px;
}

.admin-def-imagen {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.admin-def-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-def-imagen span {
  font-size: 30px;
  opacity: .45;
}

.admin-def-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.admin-def-form label {
  font-size: 10px;
  font-weight: 700;
  color: #666;
}

.admin-def-form input {
  width: 100%;
  height: 35px;
  padding: 7px 9px;
  border: 1px solid #ddd;
  border-radius: 7px;
  box-sizing: border-box;
  font-family: Poppins, sans-serif;
  font-size: 11px;
}

#adminImagenDef {
  grid-column: 1 / -1;
}

.admin-def-botones {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
}

.admin-def-botones button {
  flex: 1;
  height: 35px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

#adminVistaDef {
  background: #fcbf49;
}

#adminGuardarDef {
  background: #f77f00;
  color: #fff;
}

#adminCodigoDef {
  background: #2e7d32;
  color: #fff;
}

#adminEliminarDef {
  background: #c62828;
  color: #fff;
}

.admin-def-mensaje-estado {
  grid-column: 1 / -1;
  min-height: 14px;
  color: #16803c;
  font-size: 10px;
}

.admin-def-codigo {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 55px;
  padding: 8px;
  resize: vertical;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 10px;
  font-family: monospace;
}

.admin-def-mensaje {
  margin-top: 15px;
  padding: 22px;
  text-align: center;
  background: #fffaf3;
  border-radius: 10px;
  color: #777;
}

@media (max-width: 700px) {

  .admin-def-grid {
      grid-template-columns: 1fr;
  }

  .admin-def-form {
      grid-template-columns: 1fr;
  }

  #adminImagenDef,
  .admin-def-botones,
  .admin-def-mensaje-estado,
  .admin-def-codigo {
      grid-column: 1;
  }

}

/*==================================================
    INICIAR SESIÓN
==================================================*/

.login-contenido {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card {
  width: 100%;
  max-width: 430px;
  margin: 40px auto;
  padding: 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 35px rgba(0,0,0,.1);
  text-align: center;
}

.login-icono {
  font-size: 48px;
  margin-bottom: 10px;
}

.login-card h1 {
  margin: 0 0 8px;
  color: #a4133c;
}

.login-card > p {
  color: #777;
  margin-bottom: 25px;
}

#formularioLogin {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 7px;
}

#formularioLogin label {
  font-size: 12px;
  font-weight: 700;
}

#formularioLogin input {
  height: 42px;
  padding: 8px 11px;
  border: 1px solid #ddd;
  border-radius: 9px;
  box-sizing: border-box;
}

.btn-login {
  margin-top: 10px;
  height: 43px;
  border: none;
  border-radius: 9px;
  background: #f77f00;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.btn-crear-cuenta {
  margin-top: 15px;
  border: none;
  background: transparent;
  color: #a4133c;
  font-weight: 700;
  cursor: pointer;
}

.mensaje-login {
  min-height: 18px;
  color: #16803c;
  font-size: 12px;
  text-align: center;
}
/*==================================================
    PANTALLA INICIAR SESIÓN
==================================================*/

#pantallaLogin {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  overflow-y: auto;
  background: #fff8ef;
}

#pantallaLogin.abierta {
  display: flex;
  justify-content: center;
  align-items: center;
}

body.login-abierto {
  overflow: hidden;
}

.login-contenedor {
  position: relative;
  width: 100%;
  max-width: 450px;
  padding: 20px;
  box-sizing: border-box;
}

.login-card {
  padding: 35px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  text-align: center;
}

.login-icono {
  font-size: 52px;
  margin-bottom: 10px;
}

.login-card h1 {
  margin: 0 0 8px;
  color: #a4133c;
  font-size: 30px;
}

.login-card p {
  color: #777;
}

#formLogin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 25px;
  text-align: left;
}

#formLogin label {
  font-size: 12px;
  font-weight: 700;
}

#formLogin input {
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 9px;
  box-sizing: border-box;
  outline: none;
}

#formLogin input:focus {
  border-color: #f77f00;
}

.btn-login {
  margin-top: 12px;
  height: 45px;
  border: none;
  border-radius: 9px;
  background: #f77f00;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.crear-cuenta-login {
  margin-top: 18px;
  border: none;
  background: transparent;
  color: #a4133c;
  font-weight: 700;
  cursor: pointer;
}

.cerrar-login {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #d62828;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.mensaje-login {
  min-height: 20px;
  margin-top: 8px;
  color: #16803c;
  text-align: center;
}

/*==================================================
    OCULTAR ADMINISTRADOR DE PRODUCTOS
==================================================*/

#administradorDefinitivo {
  display: none !important;
}

/*==================================================
    MENSAJE DE BIENVENIDA
    APARECE ARRIBA Y DESAPARECE SOLO
==================================================*/

#mensajeBienvenidaUsuario {

  position: fixed !important;

  top: 90px !important;
  left: 50% !important;

  width: min(850px, 92%) !important;

  transform: translate(-50%, -20px) !important;

  display: flex !important;
  align-items: center !important;

  gap: 14px !important;

  padding: 14px 18px !important;

  background: #fff8ef !important;

  border: 2px solid #fcbf49 !important;

  border-radius: 15px !important;

  box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.15) !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition:
      opacity 0.35s ease,
      transform 0.35s ease,
      visibility 0.35s ease !important;

  z-index: 999999 !important;

  box-sizing: border-box !important;

}


/*==================================================
  MENSAJE VISIBLE
==================================================*/

#mensajeBienvenidaUsuario.mostrar {

  opacity: 1 !important;

  visibility: visible !important;

  transform:
      translate(-50%, 0) !important;

}


/*==================================================
  ICONO
==================================================*/

#mensajeBienvenidaUsuario .bienvenida-icono {

  width: 45px;
  height: 45px;

  min-width: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #fcbf49;

  border-radius: 50%;

  font-size: 23px;

}


/*==================================================
  TEXTO
==================================================*/

#mensajeBienvenidaUsuario .bienvenida-contenido {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 2px;

}


#mensajeBienvenidaUsuario
.bienvenida-contenido strong {

  color: #a4133c;

  font-size: 18px;

  font-weight: 700;

}


#mensajeBienvenidaUsuario
.bienvenida-contenido span {

  color: #555;

  font-size: 13px;

}


#mensajeBienvenidaUsuario
.bienvenida-contenido small {

  color: #777;

  font-size: 12px;

}


#mensajeBienvenidaUsuario
.bienvenida-contenido b {

  color: #d62828;

}


/*==================================================
  BOTÓN X
==================================================*/

#mensajeBienvenidaUsuario
.cerrar-bienvenida {

  width: 30px;

  height: 30px;

  border: none;

  border-radius: 50%;

  background: transparent;

  color: #777;

  font-size: 17px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.2s ease;

}


#mensajeBienvenidaUsuario
.cerrar-bienvenida:hover {

  background: #d62828;

  color: white;

}


/*==================================================
  CELULARES
==================================================*/

@media (max-width: 600px) {

  #mensajeBienvenidaUsuario {

      top: 75px !important;

      width: 94% !important;

      padding: 12px !important;

      gap: 9px !important;

  }


  #mensajeBienvenidaUsuario
  .bienvenida-icono {

      width: 40px;

      height: 40px;

      min-width: 40px;

      font-size: 21px;

  }


  #mensajeBienvenidaUsuario
  .bienvenida-contenido strong {

      font-size: 15px;

  }


  #mensajeBienvenidaUsuario
  .bienvenida-contenido span {

      font-size: 12px;

  }


  #mensajeBienvenidaUsuario
  .bienvenida-contenido small {

      font-size: 11px;

  }

}