*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior: smooth;
}

/*---UTILIDADES*/
.w100{
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 0px 10px;
}

section{
    padding: 60px 0px;
}


a{text-decoration:none;color:var(--color-black);}


.subtitleReu{
    display:flex;
    justify-content:center;
    align-content:center;
    gap:15px;
    margin-bottom:30px;
}

.subtitleReu .img{
    width:50px;
    height:auto;
    margin-top:-10px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.subtitleReu .img img{
    width:100%;
}


.subtitleReu h2{
    color:var(--color-secondary);
    font-weight:600;
    line-height:1;
    font-size:30px;
}


.btnAll{
    display:flex;
    justify-content:center;
    align-content:center;
}

.btnAll a{
    background-color:var(--color-primary);
    color:var(--color-white);
    padding:5px 20px;
    border-radius:25px;
    font-size:20px;
    margin-top:-20px;
    transition:all ease .3s;
}

.btnAll a:hover{
    background-color:var(--color-primary-hover);
}

.swiper-slide{
    text-align:left;
}



.navegacion-link{
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0px;
    color: var(--color-black);
    flex-wrap: wrap;
    margin-top:10px;

}
.navegacion-link .navegacion-active{
    color: var(--color-primary);
}
.navegacion-link a{
    color: var(--color-black);
}

.navegacion-link a:hover {
  color: var(--color-primary);
}

.separatorNaveLink{
    height:0.5px;
    background-color:var(--color-gray-light);
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
}



/*servicios*/
.servicios-flex{
    display:flex;
    justify-content:center;
    gap:35px;
    flex-wrap:wrap;
    margin-top:60px;
}

.servicio-item{
    background-color:var(--color-primary-soft);
    padding:25px;
    border-radius:25px;
    display:flex;
    justify-content: space-between;
    gap:25px;
    width:600px;
    align-items:center;
}

.imageServicio{
    width:30%;
}

.imageServicio img{
    width:100%;
    display:block;
}

.infoServicio .servicio-titulo{
    color:var(--color-black);
    font-size:25px;
    font-weight:600;
}

.infoServicio{
    width:68%;
}


.servicio-descripcion{
    font-size:17px;
    margin-top:10px;
    line-height:1.2;
}


.infoServicio a button{
    width:100%;
    background-color:var(--color-primary);
    padding:8px;
    color:var(--color-white);
    border:none;
    font-size:16px;
    border-radius:25px;
    margin-top:20px;
    cursor: pointer;
    transition:all ease .3s;
}


.infoServicio a button:hover{
    background-color:var(--color-primary-hover);
}




        /* Accordion styles */
        .accordion {
            margin: 20px 0;
            margin-bottom:0px;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .accordion-item {
            border-bottom: 1px solid #dfdfdf;
        }

        .accordion-item:last-child {
            border-bottom: none;
        }

        .accordion-header {
            background-color: #f4f4f4;
            padding: 15px 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            transition: all 0.3s;
            border-bottom: 1px solid #dfdfdf;
        }

        .accordion-header:hover {
            background-color: var(--color-primary-soft);
        }

        .accordion-header.active {
            background-color: var(--color-primary);
            color: var(--color-white);
        }

        .accordion-header::after {
            content: '+';
            font-size: 20px;
            transition: transform 0.3s;
        }

        .accordion-header.active::after {
            content: '-';
        }

        .containerTextInfoTextEditor ul li{
        list-style:disc;
    }
    .containerTextInfoTextEditor ol li{
         list-style:decimal;
    }

        .accordion-content {
            padding: 0px 20px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

          .accordion-content ul li,  .accordion-content ol li{
            margin-left:15px;
          }

        .accordion-content ul li{
            list-style:disc;
        }

         .accordion-content ol li{
            list-style:decimal;
        }

        .accordion-content.active {
            padding: 15px 20px;
            max-height: 1000px;
            overflow-x: auto;
        }

        .accordion-content ul {
            margin-left: 18px;
        }

        .accordion-content li {
            margin-bottom: 8px;
            color: var(--dark-gray);
        }


.flexServicioDetail{
    display:flex;
    justify-content:center;
    gap:30px;
}

.ServiceDetailP h1{
    color:var(--color-primary);
    font-size:25px;
    font-weight:600;
    margin-bottom:10px;
}


.flexBtnCenteredTW{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:90px 0px;
    margin-top:60px;
}

.flexBtnCenteredTW a button{
    background-color:#27A11A;
    color:var(--color-white);
    padding:12px 130px;
    border: none;
    border-radius:25px;
    font-size:18px;
    transition: all ease .3s;
    cursor: pointer;
}

.flexBtnCenteredTW a button:hover{
    background-color:#169b08;
}

.ServiceDetailP{
    width:60%;
}

.containerTextInfoTextEditor ul, .containerTextInfoTextEditor ol{
    margin-left:30px;
}

.ServiceDetailPiMGbTNwhP{
    width:40%;
}

.ServiceDetailPiMGbTNwhP .controlImgDetImg{
    width:100%;
}

.ServiceDetailPiMGbTNwhP .controlImgDetImg img{
    width:100%;
}

.ServiceDetailPiMGbTNwhP a button{
    padding:12px;
    width: 100%;
    border: none;
    border-radius:25px;
    font-size:18px;
    transition: all ease .3s;
    cursor: pointer;
    background-color:#27A11A;
    color:var(--color-white);
    margin-top:20px;
}

.ServiceDetailPiMGbTNwhP a button:hover{
    background-color:#169b08;
}

.h2Service{
    margin-top:50px;
     color:var(--color-primary);
    font-size:25px;
    font-weight:600;
    margin-bottom:10px;
}
.videosServicio{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:50px;
}

.videosServicio .controlIframeYt{
    width:580px;
    height:350px;
    border-radius:10px;
    border:5px solid var(--color-primary);
}

.controlIframeYt iframe{
    width:100% !important;
    height:100% !important;
}



/*Login y Registro*/
.flexLogin{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    max-width:1000px;
    margin:auto;
}

.loginRegisterDesign{
    width:55%;
    background-color: var(--color-secondary);
    padding:50px 25px;
    padding-bottom:20px;
    border-radius:30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    color:var(--color-white);
}

    .loginRegisterDesign h1{
        font-size:30px;
        font-weight:700;
        margin-bottom:35px;
    }

    .loginRegisterDesign .p{
        color:var(--color-white);
        font-size:16px;
        font-weight:300;
        margin-bottom:40px;
        text-align:center;
    }

    .loginRegisterDesign .p a{
        color:var(--color-white);
        text-decoration: underline;
    }

    .formLoginRegister{
        width:100%;
    }

    .labelInputLoginRegister{
        display:flex;
        flex-direction: column;
        width:100%;
        margin-bottom:20px;
    }

    .labelInputLoginRegister label{
        font-size:18px;
        font-weight:300;
        padding-bottom:5px;
    }

    .labelInputLoginRegister input{
        padding:15px;
        text-align:center;
        background-color:rgba(255, 255, 255, 0.572);
        border-radius: 25px;
        border:none;
        font-size:18px;
        outline:none;
        color:var(--color-black);
        transition: all ease .3s;
    }

    .labelInputLoginRegister input:hover{
        background-color: rgba(255, 255, 255, 0.719);
    }

    .labelInputLoginRegister input::selection{
        background-color: rgba(255, 255, 255, 0.719);
    }

    .labelInputLoginRegister div{
        display:flex;
        justify-content: space-between;
        position:relative;
    }

    .labelInputLoginRegister div i{
        color:var(--color-white);
        cursor: pointer;
        margin-right:15px;
        position:absolute;
        top:48px;
        right:10px;
    }

    .formLoginRegister .submitBtn{
        padding:15px;
        text-align:center;
        background-color:var(--color-white);
        color:var(--color-secondary);
        width:100%;
        border-radius: 25px;
        border:none;
        font-size:18px;
        outline:none;
        font-weight:700;
        transition: all ease .3s;
        margin-top:20px;
        margin-bottom:10px;
        cursor: pointer;
    }

    .formLoginRegister .submitBtn:hover{
          background-color:var(--color-primary);
        color:var(--color-white);
    }

    .forgotPass{
        text-align:center;
        color:var(--color-white);
        margin-top:45px;
    }


.imgLoginRegisterForm{
    width:37%;
}

.imgLoginRegisterForm img{
    width:100%;
}



/*Libro de reclamaciones*/

.container-icono-info{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0px;
}
.container-icono-info h3{
    color: var(--color-black);
    font-size: 16px;
    font-weight:600;
}
.container-icono{
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    border-radius: 50%;
    color: var(--color-white);
}

.container-icono i{
    font-size:13px;
}


.container-form-inputs{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.container-form-inputs .grupo-input{
    width: 30.2%;
}

#document_type{
     width: 100%;
    border: 1px solid var(--color-gray-light);
    outline: none;
    padding: 10px;
    border-radius: 5px;
    margin-top: 4px;
}

.container-form-inputs .grupo-input input{
    width: 100%;
    border: 1px solid var(--color-gray-light);
    outline: none;
    padding: 10px;
    border-radius: 5px;
    margin-top: 4px;
}
.container-form-inputs .grupo-textarea{
    width: 65%;
}
.container-form-inputs .grupo-input textarea{
    width: 100%;
    border: 1px solid var(--color-gray-light);
    outline: none;
    padding: 8px 10px;
    border-radius: 5px;
    margin-top: 4px;

  height: 90px;
  overflow: auto;  /* scroll automático */
  resize: none;
}
.grupo-input label{
    color: var( --color-black);
}
.grupo-input label span{
    color: tomato;
}
.container-form-inputs .grupo-file{
    width: 100%;
}

.container-form-inputs .grupo-file input{
    border: none;
    padding: 10px 0px;
}
.btn-enviar-form{
    width: 400px;
    padding: 15px 60px;
    border: none;
    border-radius: 25px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 18px;
    margin-top:25px ;
    cursor: pointer;
    font-weight:500;
    transition: all ease .3s;
}
.btn-enviar-form:hover{
    background-color: var(--color-primary-hover);
}

.container-form-inputs .detalle-producto-position{
    position: relative;
}
.container-form-inputs .detalle-producto-position .position-absolute-detalle{
    position: absolute;
        top: -85px;
}
.container-form-inputs .detalle-producto-position .position-absolute-detalle h3{
    font-size: 15px;
}

.flexCenteredBtnLibro{
    display:flex;
    justify-content:center;
}








 /*LAYOUT PERFIL*/
    .contenedor-perfil {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 24px;
      align-items: start;
      padding: 20px 0;
      margin-bottom:30px;
    }



    /* ===== MENÚ LATERAL ===== */
    .menu-lateral {
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow: hidden;
      background-color:#FAFAFA;
      height: 100%;
    }

    .menu-lateral-nombre {
      background: var(--color-primary);
      color: var(--color-white);
      font-weight: 500;
      font-size: 15px;
      text-align: center;
      padding: 14px 16px;
      margin-bottom: 20px;
      border-radius: 10px;
    }

    .menu-lateral-nombre-profesional{
      background-color: var(--color-tertiary);
    }

    .menu-lateral-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 16px;
      font-size: 14px;
      font-weight: 400;
      color: var(--color-black);

      border: none;
      border-top: 1px solid #f0f0f0;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s;
    }

    .menu-lateral-item:hover {
      background: var(--color-primary);
      color: var(--color-white);
    }

    .menu-lateral-item.activo {
      background: var(--color-primary);
      color: var(--color-white);
    }

    .menu-lateral-item .icono-menu.activo-icon {
      font-size: 12px;
      /**/
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: var(--color-white);
          display: flex;
          align-items: center;
          justify-content: center;
    }
    .menu-lateral-item .icono-menu.activo-icon i {
      color: var(--color-primary);font-size: 10px;
    }

    .menu-lateral-item:hover .icono-menu{
          background: var(--color-white);
    }
     .menu-lateral-item:hover .icono-menu i{
          color: var(--color-primary);
    }


    .menu-lateral-item .icono-menu {
      font-size: 12px;
      /**/
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: var(--color-black);
          display: flex;
          align-items: center;
          justify-content: center;
    }

    .menu-lateral-item .icono-menu i{
      color: var(--color-white);font-size: 10px;
    }


    /* ===== CONTENIDO PERFIL ===== */
    .contenido-perfil {
      background: var(--color-white);
      border: 1px solid var(--color-gray-light);
      border-radius: 10px;
      padding: 28px;
    }

    /* ===== SECCIÓN CONTRASEÑA ===== */
    .campo-contrasena-contenedor {
      position: relative;
    }

    .campo-contrasena-contenedor .campo-entrada {
      padding-right: 40px;
    }

    .boton-ver-contrasena {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #aaa;
      font-size: 16px;
      padding: 0;
      line-height: 1;
    }
    .boton-ver-contrasena i{
      font-weight: 900;
    }

    .boton-ver-contrasena:hover {
      color: var(--color-primary);
    }
/*fin*/



.contenedor-carrito {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 24px;
      align-items: start;
      margin-top:-50px;
    }




/*SECCIÓN FORMULARIO */
.seccion-formulario {
  margin: 16px 0px;
}

.seccion-encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.icono-seccion {
  font-size: 18px;
  line-height: 1;
}

.icono-naranja {
  background: var(--color-primary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.icono-naranja i{
    color: var(--color-white);
}

.seccion-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black);
}

.seccion-descripcion {
  font-size: 15px;
  color: var(--color-black);
  margin-bottom: 25px;
  line-height: 1.5;
}

.enlace-accion {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}


.flexFlex{
  display:flex;
  flex-direction: column;
}







/*CAMPOS DE FORMULARIO*/
.grupo-campo {
  margin-bottom: 14px;
}
.grupo-campo-file{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0px;
}

.etiqueta-campo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 5px;
  font-weight: 400;
}

.campo-requerido {
  color: var(--color-primary);
}

.campo-entrada {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-gray-light);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--color-black);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  font-weight: 400;
}
.campo-entrada-file{
  color: var(--color-black);
}
.grupo-campo-file p{
  color: var(--color-black);
  font-size: 12px;
  opacity: 0.5;
}

.campo-entrada:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 121, 58, 0.12);
}

.campo-deshabilitado {
  color: #999;
  cursor: default;
}

/* SELECT PERSONALIZADO */
.contenedor-select {
  position: relative;
}

.campo-select {
  width: 100%;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--color-gray-light);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: var(--fuente-principal);
  color: var(--color-black);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.campo-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 121, 58, 0.12);
}

.flecha-select {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 13px;
  color: #999;
}

/* FILA DE DOS CAMPOS */
.fila-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 540px) {
  .fila-campos {
    grid-template-columns: 1fr;
  }
}

/*OPCIONES DE ENVÍO*/
.opcion-envio {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
  background-color: #f4f4f4;
}

.opcion-envio.activa {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  opacity:1;
}

.opcion-envio-encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
}

.radio-oculto {
  display: none;
}

.radio-custom {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid #ccc;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}

.radio-custom.activo {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-white);
}

.opcion-envio-nombre {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-black);
}

.opcion-envio.activa .opcion-envio-nombre {
  color: var(--color-primary);
}

.opcion-envio-contenido {
  padding: 0 16px 16px;
}

.opcion-envio-descripcion {
  padding: 0 16px 13px 42px;
  font-size: 13px;
  color: var(--color-black);
  line-height: 1.6;
}

.nota-entrega {
  font-size: 13px;
  color:#7C7B7B;
  font-style: italic;
  margin-top: 6px;
}


/*CHECKBOX*/
.fila-politica {
  margin: 14px 0 18px;
}

.contenedor-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.checkbox-campo {
  display: none;
}

.checkbox-custom {
  width: 16px;
  height: 16px;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.checkbox-campo:checked + .checkbox-custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-campo:checked + .checkbox-custom::after {
  content: '✓'; /*IMPORTANTE SE LE AÑADIO ESTO PARA QUE APAREZCA EL CHECK CUANDO LE DEAMOS CLICK*/
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
}

.texto-politica {
  font-size: 12.5px;
  color: var(--color-black);
}



/*ESTILOS CARRITO DE COMPRAS OJO*/
/* ===== LAYOUT PRINCIPAL ===== */
  .contenedor-lista-carrito {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 24px;
    align-items: start;
    padding-bottom: 40px;
    margin-top:-70px;
  }

  /* ===== LÍNEA SEPARADORA BAJO MIGA ===== */
  .separador-linea {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin-bottom: 24px;
  }

  /* ===== TABLA FLEX ===== */
  .tabla-flex {
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
  }

  /* ENCABEZADO */
  .tabla-flex-header {
    display: flex;
    align-items: center;
    background: var(--color-primary);
    border-radius: 20px;
    padding: 15px 20px;
    gap: 8px;
  }

  .tabla-flex-header span {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing:2;
    color: var(--color-white);
    white-space: nowrap;
    text-align: center;
  }

  /* DISTRIBUCIÓN DE COLUMNAS */
  .col-producto  { flex: 0 0 44%; text-align: left; }
  .col-precio    { flex: 0 0 18%; text-align: center; }
  .col-cantidad  { flex: 0 0 20%; text-align: center; }
  .col-subtotal  { flex: 0 0 16%; text-align: center; }

  /* FILAS */
  .tabla-flex-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px;
    border-bottom: 1px solid #f2f2f2;
  }

  .tabla-flex-row:last-child {
    border-bottom: none;
  }

  /* CELDA PRODUCTO */
  .celda-producto {
    flex: 0 0 44%;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .boton-eliminar {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--gris-claro);
    background: var(--gris-claro);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
  }

  .boton-eliminar:hover {
     background: var(--color-primary);
    color: var(--color-white);
  }

  .producto-imagen {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 1px solid var(--gris-claro);
    padding: 6px;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .producto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .producto-datos {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .producto-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.3;
  }

  .producto-marca {
    display: inline-block;
    background: #817f7f;
    opacity: 0.5;
    color: var(--color-white);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    width: fit-content;
  }

  /* CELDA PRECIO */
  .celda-precio {
    flex: 0 0 18%;
    text-align: center;
  }

  .precio-actual {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-black);
  }

  .precio-tachado {
    font-size: 13px;
    color: var(--color-black);
    text-decoration: line-through;
    margin-top: 2px;
    font-weight: 500;
    opacity: 0.8;
  }

  /* CELDA CANTIDAD */
  .celda-cantidad {
    flex: 0 0 22%;
    display: flex;
    justify-content: center;
  }

  .control-cantidad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .boton-cantidad {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--gris-claro);
    border-radius: 6px;
    background: var(--gris-claro);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
  }

  .boton-cantidad:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
  }

  .numero-cantidad {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black);
    min-width: 20px;
    text-align: center;
  }

  /* CELDA SUBTOTAL */
  .celda-subtotal {
    flex: 0 0 16%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
  }

  /* ===== ACCIONES INFERIORES ===== */
  .acciones-carrito {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    margin-top: 28px;
  }

  .boton-secundario-oscuro {
    background: var(--color-tertiary-hover);
    color: var(--color-white);
    border: none;
    border-radius: 50px;
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }

  .boton-secundario-oscuro:hover { background: var(--color-primary); }

  .boton-texto-plano {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color:var(--color-black);
    cursor: pointer;
    transition: color 0.2s;
  }

  .boton-texto-plano:hover { color: var(--color-tertiary-hover); }

  /* ===== RESPONSIVE TABLET (≤960px): 1 columna, tabla sigue visible ===== */
  @media (max-width: 960px) {

    .contenedor-lista-carrito {
      grid-template-columns: 1fr;
    }

    .resumen-compra {
      order: -1;
      position: relative;
      top: auto;
    }

    .acciones-carrito {
      flex-direction: column;
      gap: 12px;
      margin-top: 50px;
    }

    .boton-secundario-oscuro {
      width: 100%;
      text-align: center;
    }
    .contenedor-lista-carrito{
      gap: 0px;
    }

     /*estilos de shopin cart pre hmtl*/
   .contenedor-carrito {
        grid-template-columns: 1fr;
        margin-top:0px;
      }
      .resumen-compra {
        order: -1;
        position: static !important ;/*con esto funciona muy bien en response ya que teniamos problemas*/
      }
  /*fin*/
  }


/*FIN CARRITO DE COMPRAS*/



    /* ===== RESUMEN DE COMPRA ===== */
    .resumen-compra {
      background-color:#F6F6F6;
      border: 1px solid #e8e8e8;
      border-radius: 15px;
      padding: 20px;
      position: sticky;
      top: 20px;
      margin:30px 0px;
    }

    .resumen-titulo {
      font-size: 15px;
      font-weight: 600;
      color:var(--color-black);
      padding-bottom: 10px;
      /*border-bottom: 1px solid #f0f0f0;*/
    }


    .resumen-items-count {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #888;
    }

    .resumen-producto {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      align-items: flex-start;
    }

    .resumen-producto-img {
      width: 48px;
      height: auto;
      border: 1px solid var(--color-gray-light);
      border-radius: 4px;
      padding: 5px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: var(--color-white);
    }

    .resumen-producto-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .resumen-producto-img .icono-producto {
      font-size: 18px;
    }

    .resumen-producto-info {
      flex: 1;
    }

    .resumen-producto-nombre {
      font-size: 12px;
      font-weight: 500;
      color:var(--color-black);
      line-height: 1.3;
    }

    .resumen-producto-cantidad {
      font-size: 11px;
      color: var(--color-black);
      margin-top: 2px;
      font-weight:400;
    }

    .separatorCart{
      height:0.5px;
      width:100%;
      background-color: var(--color-gray-light);
      margin-bottom:10px;
    }
    .separatorCart-top{
      margin-bottom: 30px;
    }

    .resumen-producto-precio {
      font-size: 13px;
      font-weight: 600;
       color: var( --color-black);
      white-space: nowrap;
    }

    .resumen-divisor {
      border: none;
      border-top: 1px solid #f0f0f0;
      margin: 14px 0;
    }

    /*ESTILO CUPÓN */
     .cupon-container{
            width: 100%;
            position: relative;
            margin-top: 20px;
            margin-bottom: 20px;
          }
          .cupon-container input{
            width: 100%;
            padding: 7px 10px;
            border-radius: 15px;
            font-size:12px;
            border: 1px solid var(--color-tertiary-hover);
            outline: none;
            color: var(--color-black);
          }
          .cupon-container button{
            position: absolute;
            top: 0;
            right: 0;
            padding: 7px 10px;
            font-size:15.7px;
            border-radius: 15px;
            background-color: var(--color-tertiary-hover);
            border: 1px solid var(--color-tertiary-hover);
            cursor: pointer;
            color: var(--color-white);
            font-weight: 600;
            transition: all ease .3s;
          }
          .cupon-container button:hover{
            background-color: var(--color-primary);
          }
    /*FIN*/

     .resumen-fila {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
       color: var( --color-black);
      margin-bottom: 8px;
    }

    .resumen-total {
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 600;
       color: var( --color-black);
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #f0f0f0;
    }

    .boton-procesar-resumen {
      width: 100%;
      margin-top: 16px;
    }



.boton-ancho-completo {
  width: 100%;
  text-align: center;
}


.boton-primario {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 25px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}


.boton-primario:hover {
  background: var(--color-primary-hover);
  transition: all ease .3s;
}
 .boton-procesar-resumen {
      width: 100%;
      margin-top: 16px;
    }

/*Ubicanos*/
.flexUbicacion{
    display:flex;
    justify-content:center;
    gap:30px;
    align-items:center;
    padding:20px;
    border-radius:15px;
    border:1px solid var(--color-gray-light);
    margin-bottom:40px;
}


.controlubicacionframe{
    width:55%;
    height:300px;
}

    .controlubicacionframe iframe{
        width:100%;
        height:100%;
    }



.infoUbicacion{
    width:43%;
}
    .infoUbicacion h2{
        font-weight:500;
        font-size:30px;
        color:var(--color-black);
        padding-bottom:20px;
    }

    .infoUbicacion p{
     padding-bottom:15px;
     font-size:20px;
    }

    .infoUbicacion p span{
        font-weight:500;
    }


    .infoUbicacion p i{
        color:var(--color-primary);
    }

    .infoUbicacion a button{
        padding:10px 20px;
        background-color:var(--color-primary);
        color:var(--color-white);
        border:none;
        border-radius:20px;
        font-size:16px;
    }







@media (max-width:900px ) {
 .container-form-inputs{
    flex-direction: column;
 }
 .container-form-inputs .grupo-input{
    width: 100%;
    }

    .btn-enviar-form{
        width: 100%;
    }
    .padding-bottom-monto{
        margin-bottom: 65px;
}

 .resumen-compra {
    margin-top:-50px;
 }

 .contenedor-lista-carrito{
    margin-top:0px;
 }
}









@media(max-width:1270px){
    .servicio-item{
        width:500px;
    }
}

@media(max-width:1070px){
    .servicio-item{
        width:450px;
    }
    .servicios-flex{
        gap:20px;
    }
}



@media(max-width:970px){
    .servicio-item{
        width:400px;
    }
    .infoServicio .servicio-titulo{
        font-size:22px;
    }
    .servicio-descripcion{
        font-size:15px;
    }
}



@media(max-width:900px){
    .flexServicioDetail{flex-wrap:wrap;}

    .flexUbicacion{
        flex-wrap:wrap-reverse;
    }

    .controlubicacionframe,.infoUbicacion{
        width:100%;
        height:300px;
    }

        .infoUbicacion h2{
            font-size:25px;
        }

        .infoUbicacion p{
            font-size:14px;
        }

        .infoUbicacion a button{
            font-size:14px;
        }
}


@media(max-width:850px){
    .servicio-item{
        width:350px;
    }
    .infoServicio .servicio-titulo{
        font-size:20px;
    }
    .servicio-descripcion{
        font-size:14px;
    }
}



@media(max-width:750px){
    .servicio-item{
        width:100%;
    }
    .infoServicio .servicio-titulo{
        font-size:20px;
    }
    .servicio-descripcion{
        font-size:14px;
    }


    .ServiceDetailPiMGbTNwhP, .ServiceDetailP{
        width:100%;
    }

    .loginRegisterDesign,.imgLoginRegisterForm{
        width:100%;
    }



  /*ESTILOS DE SHOPIN CART PERFIL*/
  .contenedor-perfil {
        grid-template-columns: 1fr;
      }
      .menu-lateral {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .menu-lateral-item {
        flex: 1;
        text-align: center;
        border-radius: 0;
      }


  .flexFlex{
   flex-direction: row;
  }
  .menu-lateral-item{
    display:flex;
    flex-direction: column;
    line-height:1;
  }
.seccion-descripcion {
    font-size: 12px;
  }

  .contenido-perfil{
    padding:12px;
  }

}


/*ESTILOS CARRITOS DE COMPRAS MOVILE*/
/* ===== RESPONSIVE MOBILE (≤600px): cards por producto ===== */
  @media (max-width: 600px) {

    /* Ocultar encabezado de columnas */
    .tabla-flex-header {
      display: none !important;
    }

    /* Quitar borde y sombra del contenedor en mobile */
    .tabla-flex {
      border: none;
      box-shadow: none;
      background: transparent;
    }

    /* Cada fila = card individual */
    .tabla-flex-row {
      flex-direction: column !important;
      align-items: flex-start !important;
      padding: 16px !important;
      margin-bottom: 10px;
      gap: 0 !important;
      background: var(--color-white);
      border: 1px solid #e8e8e8 !important;
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .tabla-flex-row:last-child {
      margin-bottom: 0;
      border-bottom: 1px solid #e8e8e8 !important;
    }

    /* Celda producto: ancho completo */
    .celda-producto {
      flex: none !important;
      width: 100% !important;
      padding-bottom: 12px;
    }

    /* Imagen ajustada */
    .producto-imagen {
      width: 68px;
      height: 68px;
    }

    /* Nombre más grande */
    .producto-nombre {
      font-size: 15px;
    }

    /* Celdas precio / cantidad / subtotal: fila con etiqueta */
    .celda-precio,
    .celda-cantidad,
    .celda-subtotal {
      flex: none !important;
      width: 100% !important;
      display: flex !important;
      align-items: center;
      text-align: left !important;
      justify-content: flex-start;
      padding: 8px 0;
      /*border-top: 1px solid #f2f2f2;*/
    }

    .celda-precio::before {
      content: "Precio:";
      font-size: 12px;
      font-weight: 600;
      color: #aaa;
      width: 90px;
      flex-shrink: 0;
    }

    .precio-tachado{
      margin-left:10px;
    }

    .celda-cantidad::before {
      content: "Cantidad:";
      font-size: 12px;
      font-weight: 600;
      color: #aaa;
      width: 90px;
      flex-shrink: 0;
    }

    .celda-subtotal::before {
      content: "Sub Total:";
      font-size: 12px;
      font-weight: 600;
      color: #aaa;
      width: 90px;
      flex-shrink: 0;
    }

    /* Sub Total resaltado */
    .celda-subtotal {
      font-size: 15px !important;
    }

    /* Acciones en columna */
    .acciones-carrito {
      flex-direction: column;
      gap: 10px;
     /* margin-top: 50px;*/
    }

    .boton-secundario-oscuro,
    .boton-texto-plano {
      width: 100%;
      text-align: center;
    }

    .boton-texto-plano {

      border-radius: 50px;
      padding: 10px 0;
    }

    .navegacion-link a{
        font-size:12px;
    }
  }

@media(max-width:576px){
    .subtitleReu{
        gap:5px;
    }
    .subtitleReu .img{
        width:30px;
        margin-top:0px;
    }
    .subtitleReu h2{
        font-size:25px;
    }


    .navegacion-link{
      font-size:14px;
    }

    .loginRegisterDesign{
        padding: 50px 20px;
        padding-bottom: 20px;border-radius:20px;
    }
    .labelInputLoginRegister label{
        font-size:16px;
    }
    .labelInputLoginRegister input{
        font-size:16px;
    }

    .controlubicacionframe{
        height:250px;
    }
}





@media(max-width:450px){
    .infoServicio .servicio-titulo{
        font-size:18px;
    }
    .servicio-descripcion{
        font-size:14px;
    }
    .servicio-item{
        gap:15px;
    }
    .infoServicio a button{
        font-size:14px;margin-top:15px;
    }
}