/* GENERAL */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    scroll-behavior: smooth;
}

body{
    background-image: url(../img/fondo.jpg);
}

/* VARIABLES */
:root{
    --azul-oscuro: #042a83;
    --verde-wsp: #026e02;

    --navy: #1a237e;
      --navy-dark: #0d1257;
      --blue-btn: #1e2fa3;
      --blue-btn-hover: #16228a;
      --gray-bg: #d0d0d0;
      --modal-bg: #e8e8e8;
      --input-bg: #ffffff;
      --input-border: #c0c0c0;
      --label-color: #111;
      --placeholder: #aaa;
      --shadow: 0 8px 40px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.18);
      --radius: 18px;
}

/* BOTÓN DE WHATSAPP */
.btn-wspp {
    position: fixed;
    bottom: 8rem;
    right: 1rem;

    width: 4rem;
    height: 4rem;

    padding: .3rem;

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

    border-radius: 100%;

    background-color: var(--verde-wsp);
    color: #fff;

    z-index: 10;
}

/* LOGO */
.btn-wspp img {
    width: 100%;
    height: 100%;

    filter: invert(1);

    position: relative;
    z-index: 2;
}

/* MENSAJE */
.btn-wspp-mensaje {
    position: absolute;

    right: 3.5rem;

    white-space: nowrap;

    background-color: #fff;
    color: #222;

    padding: .7rem 1rem;

    border-radius: 8px;

    box-shadow: 0 3px 12px #00000026;

    font-size: .9rem;
    font-weight: 600;

    pointer-events: none;

    opacity: 0;

    transform: translateX(20px);

    z-index: 1;
}

/* ANIMACIÓN */
.btn-wspp-mensaje.mostrar {
    animation: mostrarMensajeWspp 5s ease-in-out forwards;
}

@keyframes mostrarMensajeWspp {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

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

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

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

}


/* Modal iniciar sesion */
 /* ── OVERLAY ── */
.modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.55);
      display: flex; align-items: center; justify-content: center;
      z-index: 1000;
      opacity: 0; pointer-events: none;
      transition: opacity .22s ease;
}
.modal-overlay.active {
    opacity: 1; pointer-events: all;
}
 
/* ── MODAL-USER ── */
.modal-user {
    display: flex;
    flex-direction: column;
      background: var(--modal-bg);
      border-radius: var(--radius);
      padding: 36px 32px 30px;
      width: 100%;
      max-width: 390px;
      box-shadow: var(--shadow);
      position: relative;
      transform: translateY(28px) scale(.97);
      transition: transform .25s cubic-bezier(.22,.8,.36,1);
}
.modal-overlay.active .modal-user {
      transform: translateY(0) scale(1);
}
 
/* ── CLOSE BTN ── */
.modal-close {
  position: absolute;
      top: 16px; right: 16px;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      border: none;
      font-size: 18px;
      font-weight: 800;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      line-height: 1;
      transition: background .15s;
}
.modal-close:hover { 
    background: var(--navy-dark); 
}
 
/* ── TITLE ── */
.modal-title {
      font-size: 28px;
      font-weight: 800;
      color: #111;
      text-align: center;
      margin-bottom: 24px;
      letter-spacing: -.3px;
      /* text-wrap: nowrap; */
}
 
/* ── FIELD ── */
.field {
    margin-bottom: 16px;
}
.field label {
      display: block;
      font-size: 15px;
      font-weight: 700;
      color: var(--label-color);
      margin-bottom: 7px;
}
.field input {
      width: 100%;
      padding: 14px 16px;
      border-radius: 10px;
      border: 1.5px solid var(--input-border);
      background: var(--input-bg);
      font-family: 'Barlow', sans-serif;
      font-size: 15px;
      color: #222;
      outline: none;
      transition: border-color .18s, box-shadow .18s;
}
.field input::placeholder {
    color: var(--placeholder); 
}
.field input:focus {
      border-color: var(--navy);
      box-shadow: 0 0 0 3px rgba(26,35,126,.13);
}
 
/* ── PHONE ROW ── */
.phone-row {
      display: flex; gap: 8px; align-items: stretch;
}
.phone-selector {
      display: flex; align-items: center; gap: 6px;
      background: #fff;
      border: 1.5px solid var(--input-border);
      border-radius: 10px;
      padding: 0 12px;
      font-family: 'Barlow', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #222;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color .18s;
}
.phone-selector:hover {
    border-color: var(--navy); 
}
.phone-selector .flag {
    font-size: 18px; 
}
.phone-selector .chevron {
    font-size: 11px; color: #555; 
}
.phone-row .field-input {
    flex: 1; 
}
.phone-row .field-input input {
    width: 100%; 
}
 
/* ── SUBMIT BTN ── */
.btn-submit {
      width: 100%;
      padding: 15px;
      border-radius: 10px;
      border: none;
      background: var(--blue-btn);
      color: #fff;
      font-family: 'Barlow', sans-serif;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .3px;
      cursor: pointer;
      margin-top: 8px;
      transition: background .16s, transform .12s;
}
.btn-submit:hover { 
    background: var(--blue-btn-hover); 
}
.btn-submit:active { 
    transform: scale(.98); 
}

.usuario-noRegistrado{
    margin-top: 1rem;
    display: none;
}

.usuario-noRegistrado-active{
    display: block;
}
 
/* ── FOOTER LINK ── */
.modal-footer {
      text-align: center;
      margin-top: 18px;
      font-size: 14px;
      color: #444;
}
.modal-footer a {
      color: #222;
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
}
.modal-footer a:hover { 
    color: var(--navy); 
}
 
/* ── ERROR ── */
.field-error {
      font-size: 12px;
      color: #c62828;
      margin-top: 4px;
      display: none;
}
.field.has-error input { 
    border-color: #c62828; 
}
.field.has-error .field-error { 
    display: block; 
}
 
/* ── SUCCESS TOAST ── */
.toast {
      position: fixed;
      bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
      background: #1b5e20;
      color: #fff;
      padding: 14px 28px;
      border-radius: 40px;
      font-weight: 700;
      font-size: 15px;
      box-shadow: 0 4px 20px rgba(0,0,0,.28);
      z-index: 9999;
      transition: transform .3s cubic-bezier(.22,.8,.36,1);
      pointer-events: none;
}
.toast.show {
    transform: translateX(-50%) translateY(0);
}
 
/* ── DEMO BUTTONS ── */
.demo-btns {
      display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}

.demo-btn{
      padding: 14px 32px;
      border-radius: 10px;
      border: none;
      background: var(--blue-btn);
      color: #fff;
      font-family: 'Barlow', sans-serif;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0,0,0,.25);
      transition: background .15s, transform .12s;
}

.demo-btn:hover {
    background: var(--blue-btn-hover); transform: translateY(-2px);
}

.demo-btn.outline{
      background: transparent;
      border: 2px solid #fff;
      color: #fff;
}

.demo-btn.outline:hover { 
    background: rgba(255,255,255,.12); 
}

.modal-bienvenida-content {
  background-color: white;
  padding: 1.8rem 2.8rem;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  font-size: 1.5rem;
  text-align: center;
  margin: 0 1rem;
}

.modal-bienvenida-content h2{
  text-wrap: balance;
}

.modal-bienvenida-active{
    display: flex;
}

/* Animaciones */
.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Select de país */
.phone-selector {
  border: 1.5px solid var(--input-border);
  border-radius: 10px;
  padding: 0 10px;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s;
}
.phone-selector:hover {
     border-color: var(--navy); 
}

/* Texto centrado en modal de éxito */
.modal-body {
  font-size: 15px;
  color: #444;
  text-align: center;
  margin-top: 8px;
}

/* Modal compacto para éxito */
.modal-user--compact {
  text-align: center;
  padding: 40px 32px;
}

.modal-success-icon {
  font-size: 48px;
  color: #1b5e20;
  margin-top: 16px;
}

/* Icono de logout */
.user-btn{
    cursor: pointer;
}

.user-btn svg {
  transition: fill 0.2s ease;
}

/* Modal: imagen cuando se abre la pestaña */
.modalImg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
 
.modalImg-overlay.active {
  opacity: 1;
  pointer-events: all;
}
 
.modalImg {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  transform: translateY(28px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.22, 0.8, 0.36, 1);
}
 
.modalImg-overlay.active .modalImg {
  transform: translateY(0) scale(1);
}
 
.modalImg-imagen {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    object-fit: contain;

}
 
.modalImg-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a237e;
    color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: background 0.15s;
}
 
.modalImg-close:hover {
  background: #0d1257;
}

/* Seccion modal de carrito */
.sectionCarrito{
    position:fixed;
    top:0px;
    right:-100%;
    width:100%;
    height:100dvh;
    background-image:url(../img/fondo.jpg);
    background-size: contain;   
    transition:right .4s ease;
    overflow-y:auto;
    z-index:99999;
    padding-bottom: 1rem;
}

.sectionCarrito-abierto{
    right: 0px;
    width: 100dvw;
}

.header-carrito{
    display: flex;
    background: #042a836e;
    align-items: center;
}

.header-carrito h3{
    margin: auto;
    font-size: 1.5rem;
    padding: 1rem 0;
    color: #fff;
}

.header-carrito button{
    width: 2rem;
    height: 2rem;
    margin-right: .3rem;
    color: #fff;
    background: var(--azul-oscuro);
    border: none;
    padding: .25rem;
    border-radius: 3px;
    cursor: pointer;
}

.header-carrito button:hover{
    background: #00007b63;
}

.productos-carrito{
    text-align: center;
}

.productoCarrito{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 21px;
    text-align: start;
    padding: .5rem;
}

.productoCarrito img{
    height: 230px;
    grid-column: span 2 / span 2;
    grid-row: span 5 / span 5;
}

.cajaNombre,.cajaCodigo,.cajaCantidad{
    text-align: center;
}

.cajaNombre{
    max-width: 400px;
    text-wrap: wrap;

    grid-column: span 3 / span 3;
    grid-column-start: 4;
}

.cajaCodigo{
    max-width: 200px;
    text-wrap: wrap;
    grid-column: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 2;
}

.cajaCantidad{
    grid-column: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 3;
}

.cajaOperadores{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.operadores{
    font-weight: 900;
    border: 1px solid var(--azul-oscuro);
    background: transparent;
    color: var(--azul-oscuro);
    font-size: 1.5rem;
    padding: 0 .5rem;
    transition: background .2s linear;
}

.operadores:hover{
    background: #042a8341;
}

.operadores,.cajaEliminar{
    cursor: pointer;
}

.cajaOperadores h4{
    margin: 0 .5rem;
}

.cajaEliminar{
    width: 24px;
    height: 24px;

    grid-column-start: 5;
    grid-row-start: 4;
    color: var(--azul-oscuro);
    transition: color .2s linear;
}

.cajaEliminar:hover{
    color: #fff;
}

.cajaNombre, .cajaCodigo, .cajaCantidad, .cajaEliminar{
    margin: auto;
}

#carritoVacio{
    text-align: center;
    margin: 1rem;
}

.btnEnviarCarrito{
    display: none;
    margin: auto;
    cursor: pointer;
    padding: .8rem;
    background: var(--azul-oscuro);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    transition: background .2s;
    font-size: 1rem;
}

.btnEnviarCarrito:hover{
    background: #00007b63;
}

.btnEnviarCarrito-mostrar{
    display: flex;
}

/* Modal de articulo agregado al carrito */
/* .articuloAgregado{
    display: flex;
    align-items: center;
    background: #54ff82a6;
    padding: .5rem;
    position: fixed;
    bottom: 8rem;
    left: 1rem;
    transition: left .5s ease-in-out;
    z-index: 200;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .15), 0 8px 20px rgb(34 139 34 / 45%);
} */
/* 
.articuloAgregado-ocultar{
    left: -100%;
}

.articuloAgregado-check{
    width: 35px;
}

.articuloAgregado p{
    margin-left: .5rem;
} */

/* Modal consulta enviada */
.consultaEnviada {
    display: flex;
    align-items: center;
    gap: .7rem;

    width: 320px;

    background: #54ff82e6;

    padding: .8rem 1rem;

    position: fixed;
    top: 100px;
    left: 40px;

    z-index: 1000;

    border-radius: 6px;

    box-shadow:
        0 4px 15px #54ff8266,
        0 8px 30px #00000026;

    transition:
        left .5s ease-in-out,
        opacity .3s ease;
}

.consultaEnviada-ocultar {
    left: -100%;
    opacity: 0;
}


/* Icono check */
.consultaEnviada-check {
    width: 35px;
    min-width: 35px;
}


/* Texto */
.consultaEnviada-texto {
    flex: 1;
}

.consultaEnviada-texto strong {
    display: block;
    font-size: 1rem;
}

.consultaEnviada-texto p {
    margin: .2rem 0 0;
    font-size: .9rem;
}


/* Botón cerrar */
#cerrarConsultaEnviada {
    width: 22px;
    height: 22px;

    padding: 0;

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

    border: none;
    background: transparent;

    cursor: pointer;
}

#cerrarConsultaEnviada svg {
    width: 18px;
    height: 18px;
}


/* BOTON DE VOLVER ARRIBA */
.btn-backtop{
    position: fixed;
    top: 8rem;
    right: 1rem;
    padding: 1.2rem;
    border-radius: 100%;
    background-color: #00017B;
    color: #fff;
    z-index: 2;
    display: none;
    text-decoration: none;
    justify-content: center;
    align-items: center;
}

.btn-backtop svg{
    filter: invert(1);
    width: 18px;
    height: 18px;
}

/* HEADER */
.header{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header-redes{
    padding: 1rem;

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

/* Header: boton de wspp */
.header-redes a{
    font-size: 1.2rem;
    background-color: var(--verde-wsp);
    color: #fff;
    padding: .3rem;
    border: var(--verde-wsp) solid .2rem;
    text-decoration: none;
    border-radius: 1rem;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .5rem;
}

.header-redes a .caja-img{
    display: flex;
    padding: .4rem;
    border: 1px solid #fff;
    border-radius: 100%;
}

.header-redes a .caja-img .i-wsp{
    width: 24px;
    filter: invert(1);
}

/* Header: boton de idiomas */
.header-redes-idiomas{
    height: 50px;
    transition: overflow 3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
}

.header-redes-idiomas .idioma{
    background-color: var(--azul-oscuro);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .5rem;
    color: #fff;
    height: 50px;
}

.header-redes-idiomas img{
    width: 60px;
    object-fit: contain;
    border-radius: 4px;
}

.header-redes-idiomas p{
    margin: .5rem;
}

.idioma-activo {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.btnIdioma {
    width: 35px;
    color: #fff;
    transition: transform 0.3s ease;
    background-color: var(--azul-oscuro);
    padding: 0 8px;
    display: flex;
    align-items: center;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.idiomas-opciones{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: height 0.4s ease;
    z-index: 999;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.idiomas-opciones.abierto-opciones {
    height: 150px;
}

/* Rotar la flecha al abrir */
.header-redes-idiomas.abierto-idiomas .btnIdioma {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 6px;
}

.header-redes-idiomas.abierto-idiomas .idioma-activo{
    border-bottom-left-radius: 0px; 
}

/* Boton de usuario */
.user-btn{
    padding: .7rem;
    border: none;
    border-radius: 6px;
    color: #fff;
    background-color: var(--azul-oscuro);
}

.header-logo-clubtnt{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header-logo-clubtnt a{
    background-color: var(--azul-oscuro);
    color: #fff;
    padding: 1rem;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header-logo img{
    width: 12rem;
    object-fit: contain;
}

.header-nav{
    display: flex;
    margin: 2rem 0;
    transform: rotate(0deg) scale(1.003) skew(-25deg) translate(0px);
    transform-style: flat;
}

.header-nav-ul{
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    transition: top .7s linear;
}

.header-nav-ul-li a{
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    padding: .6rem;
    border: 2px solid #fff;
    border-radius: .4rem;
    background-color: #9D9D9D;
}

.header-nav-ul-li a:active, .header-nav-ul-li a:hover{
    background-color: #042a8371;
}

.header-nav-ul-li-a-active{
    border: 2px solid #fff;
    background-color: #042a8371 !important;
}

/* Boton de carrito */
.carrito-btn{
    padding: .7rem;
    border: none;
    border-radius: 6px;
    color: #fff;
    background-color: var(--azul-oscuro);
    cursor: pointer;
    position: relative;
}

.carrito-btn-flotar{
    position: fixed;
    top: 8rem;
    left: 1rem;
    z-index: 9999;
}

.carrito-btn svg{
    width: 1.5rem;
    height: 1.5rem;
}

.carritoCantidad{
    width: 34px;
    height: 34px;
    text-align: center;
    position: absolute;
    right: -14px;
    font-size: 1rem;
    padding: .5rem;
    background: var(--azul-oscuro);
    border-radius: 100%;
}


/* Ruta hacia el producto */
.rutaProducto{
    margin: 1.5rem;
}

.rutaProducto p{
    line-height: 24px;
}

.rutaProducto p span.productoNombre{
    font-weight: 700;
}

/* Informacion del producto */
.contenedorMain{
    margin: 1.5rem;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, auto);
    gap: 8px;
}

.caja-nombre{
    grid-column: span 2 / span 2;
}

.caja-nombre h2{
    font-size: 2rem;
}

.contenedorMain .caja-img{
    margin: 1rem 0 2rem 0;

    grid-column: span 2 / span 2;
    grid-row-start: 2;
}

.contenedorMain .caja-img img{
    width: 100%;
    max-width: 480px;
    object-fit: contain;
    border-radius: 8px;
}

.caja-agregarCarrito{
    grid-row-start: 3;
}

.caja-agregarCarrito .agregarCarrito-btn{
    font-size: 1rem;
    font-weight: 600;
    color: var(--azul-oscuro);
    cursor: pointer;
    padding: .9rem 1.5rem;;
    border: 2px solid var(--azul-oscuro);
    border-radius: 7px;
}

.caja-agregarCarrito .agregarCarrito-btn:hover{
    background-color: #f0f0ffc4;
}

.caja-cantidad{
    grid-row-start: 3;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -28px;
    margin-left: auto;
}

.caja-cantidad h4{
    color: #00017B;
}

.caja-cantidad .caja-botonesCantidad {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto 10px 0;
    background: rgb(255, 255, 255);
    border-width: 2px;
    border-style: solid;
    border-color: rgb(0, 1, 123);
    border-image: none;
    border-radius: 8px;
}

.caja-botonesCantidad .btnCantidad-menos {
    padding: 1rem 1.5rem;
    background: #fff;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border: none;
    border-right: 2px solid #00017B;
}

.caja-botonesCantidad .montoCantidad{
    display: block;
    cursor: auto;
    padding: 14.5px 1.5rem;
}

.caja-botonesCantidad .btnCantidad-mas {
    padding: 1rem 1.5rem;
    background: #fff;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: none;
    border-left: 2px solid rgb(0, 1, 123);
}

.caja-botonesCantidad .btnCantidad-menos:hover, .caja-botonesCantidad .btnCantidad-mas:hover{
    background-color: #042a8325;
}

.caja-equivalencia{
    grid-column: span 2 / span 2;
    margin-bottom: 1.5rem;
}

.caja-equivalencia h4, .caja-marca h4, .caja-descripcion h4 , .caja-fichaTecnica h4{
    color: #00017B;
    margin-bottom: .5rem;
}

.caja-equivalencia span, .caja-marca span, .caja-descripcion span , .caja-fichaTecnica span{
    font-weight: 600;
}

.caja-marca{
    grid-column: span 2 / span 2;
    grid-row-start: 5;
    margin-bottom: 1.5rem;
}

.caja-marca p{
    font-weight: 600;
}

.caja-descripcion{
    grid-column: span 2 / span 2;
    grid-row-start: 6;
    margin-bottom: 1.5rem;
}

.caja-fichaTecnica{
    grid-column: span 2 / span 2;
    grid-row-start: 7;
    margin-bottom: 1.5rem;
}

.caja-fichaTecnica svg{
    width: 120px;
    height: 120px;
    cursor: pointer;
}


/* Productos relacionados */
.productos-relacionados-titulo{
    text-align: center;
    color: #00017B;;
    font-size: 1.5rem;
}

.container-productos-relacionados{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.caja-producto{
	border-radius: 15px;
	text-align: center;
	overflow: visible;
    isolation: isolate;
	flex-shrink: 0;
	margin: auto;
	width: 340px;
	background-color: #E1E1E1;
    cursor: pointer;
    transition: all .2s ease-out;
    position: relative;
    margin-top: 0px;
}  

.caja-producto:hover{
    transform: scale(1.02);
}

.caja-producto .stock{
    position: absolute;
    right: .7rem;
    top: .7rem;
    color: #fff;
    background: var(--swiper-theme-color);
    padding: .5rem;
    border-radius: 3px;
    font-weight: 700;
}

.caja-producto img{
	width: 100%;
	height: 100%;
    object-fit: contain;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.caja-producto h4{
    font-size: 1.1rem;
	margin: 10px;
}

.caja-producto h3{
    font-size: 1rem;
	margin: 10px;
}

.caja-producto .agregarCarrito-btn{
    margin-bottom: 15px;
    padding: .7rem;
    border: 2px solid var(--azul-oscuro);
    border-radius: 7px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--azul-oscuro);
    cursor: pointer;
}

.caja-producto .agregarCarrito-btn:hover{
    background-color: #042a8325;
}

.producto-precio{
    margin: 10px 0;
}

.filtro{
    display: none;
}

.mostrar{
    display: list-item;
    list-style: none;
}






/* Notificación de producto de la pestaña agregado */
.articuloAgregado {
    /* position: absolute;
    top: 100%;
    left: 50%; */

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    width: max-content;
    max-width: 100%;
    padding: 1rem .75rem;

    background: #ffff00;
    color: #000;
    border-radius: 4px;

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

    /* El aviso queda detrás de la tarjeta */
    z-index: -1;
    pointer-events: none;

    opacity: 0;
    /* transform: translate(-50%, -100%); */

    transition:
        transform .4s ease-in-out,
        opacity .4s ease-in-out;
}

/* Notificación de producto agregado de la seccion productos relacionados */
.articuloAgregado-productosRelacionados {
    position: absolute;
    top: 100%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    width: max-content;
    max-width: 100%;
    padding: 1rem .75rem;

    background: #ffff00;
    color: #000;
    border-radius: 4px;

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

    /* El aviso queda detrás de la tarjeta */
    z-index: -1;
    pointer-events: none;

    opacity: 0;
    transform: translate(-50%, -100%);

    transition:
        transform .4s ease-in-out,
        opacity .4s ease-in-out;
}

/* Aviso visible debajo de la tarjeta */
.articuloAgregado-visible {
    opacity: 1;
    transform: translateY(8px);
}

.articuloAgregadoProductosRelacionados-visible {
    opacity: 1;
    transform: translate(-50%, 8px);
}

.articuloAgregado-check {
    width: 24px;
    flex-shrink: 0;
}

.articuloAgregado p, .articuloAgregado-productosRelacionados p {
    margin: 0;
    font-size: .8rem;
    font-weight: 900;
}



/* Contenedor de productos */
.container-productos{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* ========================= */
/* MODOS DE VISUALIZACIÓN: Modo lista celu(hasta 563px) */
/* ========================= */
.container-productos-modoLista{
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    gap: 2rem;
}

.container-productos-modoLista .caja-producto{
    width: 100%;
    display: flex;
}

.container-productos-modoLista .stock{
    font-size: .65rem;
    right: initial;
    left: 5.4rem;
    top: 1rem;
}

.container-productos-modoLista .caja-producto img{
    width: 150px;
    margin: 10px;
    border-radius: 10px;
}

.container-productos-modoLista .producto-infoGrid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr auto auto auto;
    gap: 10px;
    margin: 5px 10px 5px 0;
}

.container-productos-modoLista .producto-div-nombre{
    grid-column: span 2 / span 2;
    text-align: start;
}

.container-productos-modoLista .producto-div-nombre p{
    display: none;
}

.container-productos-modoLista .producto-div-nombre h4{
    margin: 5px 0 0 0;
}

.container-productos-modoLista .producto-div-codigo{
    grid-column: span 2 / span 2;
    grid-row-start: 2;
    text-align: start;
}

.container-productos-modoLista .producto-div-codigo p{
    display: none;
}

.container-productos-modoLista .producto-div-codigo h3{
    margin: 0;
}

/*a este puedo cambiar producto-modoGrid-marca a producto-div-marca, pero si lo hago tengo que cambiarlo en los otros lados*/
.container-productos-modoLista .producto-modoGrid-marca{
    display: block;
    grid-row-start: 3;
    text-align: start;
    height: 20px;
}

.container-productos-modoLista .producto-modoGrid-marca p{
    display: none;
}

.container-productos-modoLista .producto-modoGrid-marca h3{
    margin: 0;
}

/*a este puedo cambiar producto-modoGrid-cantidad a producto-div-cantidad, pero si lo hago tengo que cambiarlo en los otros lados*/
.container-productos-modoLista .producto-modoGrid-cantidad{
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column-start: 1;
    grid-row-start: 4;
    margin-right: auto;
}

.container-productos-modoLista .producto-modoGrid-cantidad p{
    display: none; 
}

.container-productos-modoLista .caja-botonesCantidad{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    background: #fff;
    border: 2px solid #00017B;
    border-radius: 8px;
}

.container-productos-modoLista .btnCantidad-menos, .container-productos-modoLista .btnCantidad-mas{
    background: #fff;
    /* border: 2px solid #00017B; */
    padding: 1rem;
    cursor: pointer;
}

.btnCantidad-menos{
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border: none;
    border-right: 2px solid #00017B;
    cursor: pointer;
}

.container-productos-modoLista .producto-modoGrid-cantidad .montoCantidad{
    display: block;
    padding: 14.5px;
    cursor: auto;
}

.btnCantidad-mas{
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: none;
    border-left: 2px solid #00017B;
    cursor: pointer;
}

.container-productos-modoLista .producto-precio{
    text-align: center;
    grid-column-start: 2;
    grid-row-start: 3;
    display: block;
    margin: 0 10px;
    height: 20px;
}

.container-productos-modoLista .agregarCarrito-btn{
    width: 150px;
    height: 50px;
    margin: auto;
    grid-row-start: 4;
}





/* SECTION 3 */
.section3{
    width: 100%;
    position: relative;
}

.section3-div2{
    width: 90%;
    margin: 1rem auto;
    position: relative;
    overflow: hidden;
}

.section3-div2-img{
    position: absolute;
    z-index: -15;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section3-div2-sombra{
    position: absolute;
    z-index: -12;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, .5) 0, rgba(0, 40, 80, .5) 100%);
}

.section3-div2-titulo{
    padding: 2rem .5rem 1rem .5rem;
    color: #fff;
}

.section3-division{
    width: 80%;
    height: .1rem;
    background-color: #fff;
    margin-left: .5rem;
}

.section3-div2-texto{
    color: #fff;
    padding: 1rem .5rem 2rem .5rem;
}

/* SECTION 5 */
.section5{
    width: 100%;
    text-align: center;
    background-image: linear-gradient(45deg, rgba(5, 172, 235, 1) 37%, rgba(4, 42, 131, 1) 100%);
    padding:  1rem 0;;
}

.section5 i{
    padding: 1rem;
    border-radius: 100%;
    color: #fff;
    background-color: #002850;
    text-align: center;
    font-size: 2.3rem;
    margin: 1rem 0;
}

.section5 h3, .section5 h2{
    color: #fff;
}

.section5 h2{
    margin-top: .6rem ;
    font-size: 2rem;
}

/* FOOTER */
.footer{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.footer .footer-logo{
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    margin-left: 1rem;
}

.footer-contacto{
    margin-left: .8rem;
}

.footer-contacto{
    margin-left: .8rem;
}

.footer-contacto h3{
    margin-bottom: .4rem;
    color: var(--azul-oscuro);
}

.footer-contacto ul{
    list-style: none;
}

.footer-contacto ul li{
    line-height: 1.4rem;
    display: flex;
    align-items: center;
}

.footer-contacto ul li svg{
    width: 20px;
    color: var(--azul-oscuro);
    margin-right: 4px;
}

.footer-redes{
    margin-left: .8rem;
}

.footer-redes h3{
    margin-bottom: .4rem;
    color: var(--azul-oscuro);
}

.footer-redes a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    color: var(--azul-oscuro);
    border: .1rem solid var(--azul-oscuro);
    margin: 0 .5rem 0 0;
    border-radius: 100%;
    width: 2.8rem;
    height: 2.8rem;
}

.footer-redes a svg{
    width: 1.5rem;
    height: 1.5rem;
    transform: translateX(.5px);
}

.footer-redes a:last-child svg {
    transform: translateX(-.1px);
}

.footer-redes a:active, .footer-redes a:hover{
    background-color: var(--azul-oscuro);
    color: #fff;
}

.footer-horarios{
    margin-left: .8rem;
}

.footer-horarios h3{
    margin-bottom: .4rem;
    color: var(--azul-oscuro);
}

.footer-horarios p{
    line-height: 1.4rem;
}

.footer-division{
    width: 85%;
    height: .1rem;
    background-color: var(--azul-oscuro);
    margin: 2rem .8rem;
}

.footer-final{
    margin:  0 .8rem 1rem .8rem;
}

.creditos{
    margin: .5rem auto .8rem 1rem;
}

.creditos a{
    text-decoration: none;
    font-weight: 700;
    color: #00017B;
    padding: .8rem;
    border: 1px solid #00017B;
    border-radius: .4rem;
}

.creditos a:active, .creditos a:hover{
    background-color: var(--azul-oscuro);
    color: #fff;
}

/* RESPONSIVE */
@media screen and (min-width:425px){
    /* HEADER */
    .header-logo h2{
        font-size: 2.7rem;
    }

    /* SUBHEADER */
    .subheader-li a{
        padding: 1.5rem .9rem;
    }

    /* FOOTER */
    .footer-contacto ul li:nth-child(4){
        margin-bottom: 0;
    }
}

@media screen and (min-width:549px){
    /* FOOTER */
    .footer-direccion h3{
        margin: 0 0 .4rem 0;
    }
}

@media screen and (min-width:622px){
    /* GENERAL */
    body{
        background-size: contain;
    }
}

@media screen and (min-width:646px){
    /* FOOTER */
    .creditos{
        margin: .5rem 1rem .8rem auto;
    }
}

@media screen and (min-width:729px){
    /* FOOTER */
    .footer-redes h3{
        margin: 0 0 .4rem 0;
    }
}

@media screen and (min-width:973px){
    /* FOOTER */
    .footer-horarios h3{
        margin-top: 0;
    }
}

@media screen and (min-width:980px){
/* SUBHEADER */
    .subheader-li a{
        padding: 1.8rem 1.2rem;
    }
}

@media screen and (min-width:1024px){
    /* HEADER */
    .header{
        position: relative;
        flex-direction: row;
        justify-content: space-between;
    }

    .header-redes{
        flex-shrink: 0;
        margin: auto 0 auto 0;
        padding: .5rem;
    }

    .header-redes a{
        padding: .6rem;
        font-size: 1rem;
    }

    .header-redes-idiomas{
        position: absolute;
        right: 60px;
        top: 8px;
        height: 35px;
        z-index: 10;
    }

    .header-redes-idiomas.abierto{
        height: 140px;
    }

    .header-redes-idiomas .idioma{
        padding: .25rem;
        height: 35px;
    }

    .header-redes-idiomas img{
        width: 40px;
    }

    .header-redes-idiomas .btnIdioma{
        top: 9.5px
    }

    .header-logo-clubtnt {
        gap: 1rem;
        padding: 1rem;
    }

    .header-nav{
        margin: auto 0 auto 0;
    }

    .header-nav-ul-li {
        margin: 0 1rem 0 1rem;
    }

    .carrito-btn-flotar{
        z-index: 120;
    }

    /* Header: btn usuario*/
    .user-btn{
        position: absolute;
        top: 8px;
        right: 10px;
        padding: .4rem;
    }

    .filtros-aviso {
        display: none;
    }

    /* Seccion modal de carrito */
    .productoCarrito{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 1rem;
    }

    .productoCarrito img{
    height: 250px;
    object-fit: contain;
    padding: .5rem;
    }

    /* PROPAGANDA DE MARCAS */
    #caja-logo-trw img{
        padding: 20px;
    }

    /*  */
    .container-productos-relacionados{
        flex-direction: row;
        flex-wrap: wrap;
    }

    
    /* Informacion del producto */
    .contenedorMain{
        grid-template-columns: auto 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        column-gap: 1rem;
    }

    .caja-nombre{
        grid-column-start: 2;
        grid-row-start: 1;
    }

    .contenedorMain .caja-img{
        grid-row: span 4 / span 4;
        /* grid-column-start: 1; */
        grid-row-start: 1;
        grid-column: initial;
        margin-top: 0;
    }

    .contenedorMain .caja-img img{
        max-width: 400px;
    }

    .caja-agregarCarrito{
        grid-column-start: 2;
        grid-row-start: 4;
    }

    .caja-cantidad{
        grid-column-start: 3;
        grid-row-start: 4;
        margin-right: auto;
    }

    .caja-equivalencia{
        grid-column-start: 2;
        grid-row-start: 2;
        margin-bottom: 0;
    }

    .caja-marca{
        grid-column-start: 2;
        grid-row-start: 3;
    }

    .caja-descripcion{
        grid-row-start: 5;
    }

    .caja-fichaTecnica{
        grid-column-start: 3;
        grid-row-start: 5;
    }
    

    

    
    /* SECTION 3 */
    .section3-div2{
        height: 20rem;
        width: 70%;
    }
}

@media screen and (min-width:1101px){
    /* HEADER */
    .header-redes{
        margin: auto 0 auto 2rem;
    }

    .header-nav{
        margin: auto 2rem auto 0;
    }
}

@media screen and (min-width:1115px){
    /* HEADER */
    .header-nav-ul-li {
        margin: 0 1.5rem 0 1.5rem;
    } 

    /* FOOTER */
    .footer-contacto,.footer-contacto,.footer-direccion, .footer-redes, .footer-horarios{
        margin-left: 3rem;
    } 
}

@media screen and (min-width:1365px){
    /* HEADER */
     .header-nav-ul-li {
        margin: 0 2rem 0 2rem;
    } 

    /* FOOTER */
    .footer-contacto,.footer-contacto,.footer-direccion, .footer-redes, .footer-horarios{
        margin-left: 5rem;
    } 
}

@media screen and (min-width:1440px){
    .header-logo-clubtnt{
        gap: 4rem;
    }

    /**************/
    .contenedorMain{
        grid-template-rows: auto auto auto 1fr 1fr;
        row-gap: 0;
    }

    .caja-nombre{
        margin-bottom: 2rem;
    }

    .contenedorMain .caja-img img{
        max-width: 480px;
    }

    .caja-cantidad{
        left: -150px;
    }

    .caja-equivalencia{
        margin-bottom: 2rem;
    }

    .caja-marca{
        margin-bottom: 5rem;
    }

    

    
}

@media screen and (min-width:1600px){
    /***********************************************************************************************************************************************************************/
    .container-productos:not(.container-productos-modoLista)  {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    /***********************************************************************************************************************************************************************/
}

/* ========================= */
/* MODOS DE VISUALIZACIÓN: Modo lista para pc a partir de 1210px */
/* ========================= */
/* Productos modo: grid apagado */
.producto-modoGrid p, .producto-modoGrid-marca, .producto-modoGrid-cantidad{
    display: none;
}

.container-productos-modoGrid .producto-modoGrid p, .container-productos-modoGrid .producto-modoGrid-marca,.container-productos-modoGrid .producto-modoGrid-cantidad{
    display: block;
}


/* Animación del contenedor */
.container-productos {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.container-productos.cambiando-vista {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

/* Desactivar las transiciones internas durante el cambio */
.container-productos.cambiando-vista *,
.container-productos.sin-transiciones * {
    transition: none !important;
    animation: none !important;
}