* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

:root{
  --color-primario: #7B2FFF;
  --color-primario-oscuro: #5A1FD9;
  --color-exito: #28a745;
  --color-exito-oscuro: #1e7e34;
  --color-peligro: #dc3545;
  --color-oscuro: #111;
  --radio-borde: 10px;
  --sombra-suave: 0 4px 14px rgba(0,0,0,.08);
  --sombra-media: 0 8px 24px rgba(0,0,0,.12);
}

#bienvenida{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  display: flex;
  flex-direction: column;

  z-index: 9999;
  animation: fadeOut 1s 2.5s forwards;
}

/* TEXTO ARRIBA */
.texto-bienvenida{
  background: rgba(0,0,0,0.6);
  color: white;
  text-align: center;
  padding: 20px;
}

.texto-bienvenida h1{
  font-size: 50px;
  margin: 0;
}

.texto-bienvenida p{
  font-size: 20px;
  margin-top: 10px;
}

/* IMAGEN ABAJO */
.img-bienvenida{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* animación salida */
@keyframes fadeOut{
  to{
    opacity: 0;
    visibility: hidden;
  }
}
#bienvenida h1 { font-size: 80px; animation: bounce 1s ease-in-out; }
#bienvenida p { font-size: 20px; margin-top: 10px; opacity: 0.9; }
@keyframes bounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

header {
  background: #111; color: white; padding: 15px 20px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  border-bottom: 3px solid var(--color-primario);
}
.header-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap; gap: 10px;
}
header h2 { color: var(--color-primario); letter-spacing: .5px; }
#carritoBtn { background: var(--color-primario); color: white; border: none; 
  padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 16px;
  transition: background .2s, transform .2s; }
#carritoBtn:hover { background: var(--color-primario-oscuro); transform: translateY(-2px); }

#btnRegistrarse{
    background: var(--color-exito);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 10px rgba(40,167,69,.5);
    transition: transform .2s, background .2s;
}

#btnRegistrarse:hover{
    background: var(--color-exito-oscuro);
    transform: translateY(-2px);
}
nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding-top: 4px; }
nav button {
  background: none; border: none; color: white; font-size: 15px;
  cursor: pointer; padding: 8px 14px; border-radius: 20px;
  transition: background 0.25s, transform .2s;
}
nav button:hover { background: rgba(123,47,255,.35); }
nav button.active { background: var(--color-primario); font-weight: bold; }

#banner {
  background-image: url('../imagenes/principal.png');
  background-size: cover;        /* llena todo el espacio */
  background-position: top center; /* pegada arriba y centrada */
  background-repeat: no-repeat;

  width: 100%;
  height: 500px;

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

  color: rgb(196, 199, 185);
  text-align: center;
}
#banner div { background: rgba(0,0,0,0.6); padding: 40px; border-radius: 15px; }
#banner h1 { font-size: 50px; margin-bottom: 10px; }
#banner p { font-size: 22px; opacity: 0.9; }

.container {
  max-width: 1200px; margin: 40px auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}
.producto {
  background: white; border-radius: 15px; padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  opacity: 0; transform: translateY(40px);
  animation: slideUp 0.6s forwards;
  transition: transform 0.3s;
}
.producto:hover { transform: translateY(-5px); }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

.producto img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto 15px;
  display: block;
}
.producto button {
  width: 100%; background: var(--color-primario); color: white; border: none;
  padding: 12px; border-radius: 8px; cursor: pointer; font-size: 16px; margin-top: 5px;
}
.producto button:hover { background: var(--color-primario-oscuro); }

.producto .btn-comprar {
  background: #1e8e3e;
  margin-top: 6px;
}
.producto .btn-comprar:hover { background: #166d2e; }
.precio-oferta { color: #0009b3 !important; font-weight: bold; font-size: 1.3em; }
.precio-tachado { text-decoration: line-through; color: #e30000; font-size: 16px; }

#modalYape, #modalCarrito, #modalContacto, #modalOfertas, #modalDatos {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); align-items: center; justify-content: center; z-index: 2000;
}

/* Modal de Ofertas: más grande, centrado y con las tarjetas
   del mismo tamaño que en el catálogo principal */
#modalOfertas .modal-content,
#modalDeportes .modal-content {
  width: 90%;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
}

#modalOfertas .producto,
#modalDeportes .producto {
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#modalOfertas .producto img,
#modalDeportes .producto img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}
.modal-content {
  background: white; padding: 35px; border-radius: 20px; max-width: 450px;
  text-align: center; animation: scaleIn 0.3s; max-height: 90vh; overflow-y: auto;
}
@keyframes scaleIn { from { transform: scale(0.8); } to { transform: scale(1); } }
.modal-content img { width: 220px; margin: 20px 0; border-radius: 15px; }

.sobre-nosotros-galeria{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:15px;
}

.sobre-nosotros-galeria img{
  width:100px !important;
  height:100px;
  object-fit:cover;
  margin:0 !important;
  border-radius:10px;
}

.pantalla-completa{
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:linear-gradient(160deg, #2c0d66 0%, var(--color-primario) 45%, #f2ecff 100%);
    z-index:5000;
    overflow-y:auto;
}

.cerrar-pantalla-completa{
    position:fixed;
    top:20px; right:25px;
    font-size:36px;
    color:white;
    cursor:pointer;
    z-index:5001;
    text-shadow:0 2px 6px rgba(0,0,0,.4);
}

.sn-contenido{
    max-width:1000px;
    margin:auto;
    padding:60px 25px 80px;
    color:white;
}

.sn-hero{
    text-align:center;
    margin-bottom:50px;
}

.sn-hero img{
    width:130px;
    margin-bottom:15px;
}

.sn-hero h1{
    font-size:38px;
    letter-spacing:2px;
    margin:0 0 15px;
}

.sn-hero .frase-bonita{
    color:#fff;
    font-size:18px;
    max-width:600px;
    margin:auto;
}

.sn-seccion{
    background:rgba(255,255,255,.08);
    border-radius:18px;
    padding:30px;
    margin-bottom:25px;
    backdrop-filter:blur(3px);
}

.sn-seccion h2{
    margin-top:0;
    margin-bottom:15px;
}

.sn-seccion p{
    line-height:1.7;
    color:#f2ecff;
}

.sn-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:25px;
}

.sn-tarjeta{
    background:rgba(255,255,255,.1);
    border-radius:18px;
    padding:25px;
}

.sn-tarjeta h3{ margin-top:0; }
.sn-tarjeta p{ color:#f2ecff; line-height:1.6; }

.sn-marcas{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.sn-marcas span{
    background:white;
    color:var(--color-primario);
    font-weight:bold;
    padding:8px 18px;
    border-radius:20px;
}

.sn-galeria-grande{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr);
    gap:15px;
}

.sn-galeria-grande img{
    width:100% !important;
    height:150px !important;
    border-radius:14px;
}

.sn-contacto p{ margin:8px 0; }

@media (max-width:700px){
    .sn-grid-2, .sn-galeria-grande{ grid-template-columns:1fr 1fr; }
}
.modal-content button {
  background: var(--color-primario); color: white; border: none; padding: 12px 25px;
  border-radius: 8px; cursor: pointer; margin: 5px; font-size: 16px;
}
.modal-content input, .modal-content textarea {
  width: 100%; padding: 12px; margin: 8px 0; border-radius: 8px; border: 1px solid #ddd; font-size: 16px;
}
#listaCarrito { text-align: left; margin: 20px 0; max-height: 300px; overflow-y: auto; }
.item-carrito { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
.total { font-size: 24px; font-weight: bold; color: var(--color-primario); margin: 15px 0; }

.contacto-info { text-align: left; line-height: 2; margin: 20px 0; }
.contacto-info strong { color: var(--color-primario); }
.frase-bonita { font-style: italic; color: #555; margin-top: 20px; font-size: 18px; }

footer { text-align: center; padding: 30px; background: #111; color: #777; margin-top: 50px; }

.img-bienvenida{
    width:500px;
    max-width:90%;
    margin-top:20px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.4);
}
#modalDeportes{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    align-items:center;
    justify-content:center;
    z-index:2000;
}

body {
  margin: 0;
  font-family: Arial;
  background: linear-gradient(180deg, #f2ecff 0%, #f7f4ff 300px, #ffffff 600px);
  min-height: 100vh;
}

.screen {
  display: none;
  width: 100%;
  height: 100vh;
  position: relative;
}

.screen.active {
  display: block;
  animation: fade 0.8s ease-in-out;
}

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

/* Botón centrado abajo */
.btn {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 18px 40px;
  font-size: 20px;
  background: black;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.btn:hover {
  background: #ff6600;
}

.img-yape{
  width: 200px;
  height: auto;
  max-width: 100%;
  border-radius: 15px;
  display: block;
  margin: 15px auto;
  background: #ffffff;
  padding: 10px;
}

.img-contacto{
    width: 180px !important;
    height: auto !important;
    display: block !important;
    margin: 15px auto !important;
}


.redes-flotantes {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

/* estilo general */
.redes-flotantes a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: 0.3s;
}

/* colores por red */
.redes-flotantes .fb {
  background: #1877f2;
}

.redes-flotantes .ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.redes-flotantes .wa {
  background: #25d366;
}

/* efecto hover */
.redes-flotantes a:hover {
  transform: scale(1.15) rotate(10deg);
}

.contenedor-buscador{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:15px auto;
}

#buscador{
    width:500px;
    max-width:80%;
    padding:12px;
    border:2px solid #ccc;
    border-radius:8px;
    font-size:16px;
}

.contenedor-buscador button{
    padding:12px 20px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:#28a745;
    color:white;
    font-size:16px;
}

.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-pago{
    background:#fff;
    width:380px;
    max-width:90%;
    max-height:90vh;
    overflow-y:auto;
    padding:30px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.modal-pago h2{ margin-top:0; }

.qr-pago{
    width:220px;
    max-width:100%;
    height:auto;
    display:block;
    margin:20px auto;
    background:#ffffff;
    padding:10px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

.modal-pago .btn-confirmar{
    background:#28a745;
    color:#fff;
    border:none;
    padding:12px 20px;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    width:100%;
    margin-top:10px;
}

.modal-pago .btn-confirmar:hover{ background:#1e7e34; }

.modal-pago .btn-cancelar{
    background:#555;
    color:#fff;
    border:none;
    padding:12px 20px;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    width:100%;
    margin-top:10px;
}

.modal-pago .btn-cancelar:hover{ background:#333; }

.modal-registro{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
    z-index:99999;
    justify-content:center;
    align-items:center;
}

.contenido-registro{
    background:white;
    width:400px;
    max-width:90%;
    padding:25px;
    border-radius:12px;
    text-align:center;
}

.contenido-registro input{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:8px;
}

.campo-password{
    position:relative;
}

.campo-password input{
    padding-right:40px !important;
}

.toggle-password{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    font-size:18px;
    user-select:none;
    opacity:.6;
}

.toggle-password:hover{
    opacity:1;
}

.contenido-registro button{
    width:100%;
    padding:12px;
    background:var(--color-primario);
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

.container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

.producto{
    display:flex;
    flex-direction:column;
    border:1px solid #f0f0f0;
}

.producto:hover{
    box-shadow:0 12px 28px rgba(0,0,0,.15);
}

.producto .fila-oferta{
    min-height:10px;
    margin-bottom:6px;
}

.producto .empujar-abajo{
    flex-grow:1;
}

.imagen-wrap{
    position:relative;
}

.cinta-agotado{
    position:absolute;
    top:12px;
    left:-8px;
    background:#dc3545;
    color:white;
    font-weight:bold;
    font-size:12px;
    padding:4px 14px;
    border-radius:4px;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    letter-spacing:0.5px;
}

/*==========================
      CARRITO MODERNO
===========================*/

.carrito-container{
    width:95%;
    max-width:1300px;
    height:85vh;
    background:#fff;
    border-radius:18px;
    display:flex;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.carrito-productos{
    flex:2;
    padding:30px;
    overflow-y:auto;
}

.carrito-resumen{
    width:360px;
    background:#fafafa;
    border-left:1px solid #ddd;
    padding:30px;
}

.carrito-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.carrito-header h2{
    font-size:34px;
}

.btn-vaciar-carrito{
    background:none;
    border:1px solid var(--color-peligro);
    color:var(--color-peligro);
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
    margin-bottom:15px;
    transition:background .2s, color .2s;
}

.btn-vaciar-carrito:hover{
    background:var(--color-peligro);
    color:white;
}

.carrito-footer-marca{
    margin-top:30px;
    padding:25px;
    text-align:center;
    background:linear-gradient(135deg, #f2ecff, #ffffff);
    border-radius:16px;
    border:1px dashed #d9c8ff;
}

.carrito-footer-marca img{
    width:60px;
    margin-bottom:10px;
    opacity:.85;
}

.carrito-footer-marca p{
    color:#555;
    margin:4px 0;
    font-size:14px;
}

.carrito-footer-extra{
    font-size:13px !important;
    color:#888 !important;
}

.cerrar-modal{
    background:none;
    border:none;
    font-size:32px;
    cursor:pointer;
}

.item-carrito{

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

    border:1px solid #e5e5e5;

    border-radius:15px;

    padding:20px;

    margin-bottom:18px;

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

}

.item-info{

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

}

.item-info img{

    width:120px;
    height:120px;

    object-fit:cover;

    border-radius:12px;

}

.item-detalle h3{

    font-size:24px;
    margin-bottom:8px;

}

.item-detalle p{

    color:#666;
    margin:5px 0;

}

.cantidad{

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

    margin-top:15px;

}

.cantidad button{

    width:38px;
    height:38px;

    border:none;

    border-radius:50%;

    background:var(--color-primario);

    color:white;

    font-size:20px;

    cursor:pointer;

}

.precio{

    text-align:right;
}

.precio h2{

    color:var(--color-primario);

}

.btn-eliminar{

    background:#ff3b3b;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:8px;

    cursor:pointer;

    margin-top:10px;

}

.resumen-linea{

    display:flex;

    justify-content:space-between;

    margin:18px 0;

    font-size:18px;

}

.resumen-total{

    display:flex;

    justify-content:space-between;

    font-size:28px;

    font-weight:bold;

    color:var(--color-primario);

    margin:30px 0;

}

.btn-finalizar{

    width:100%;

    padding:16px;

    border:none;

    background:#111;

    color:white;

    border-radius:12px;

    font-size:18px;

    cursor:pointer;

    margin-top:20px;

}

.btn-finalizar:hover{

    background:var(--color-primario);

}

.btn-seguir{

    width:100%;

    padding:16px;

    margin-top:15px;

    border:none;

    background:#ddd;

    border-radius:12px;

    cursor:pointer;

}



/* ===== MODAL FINALIZAR COMPRA (pantalla completa) ===== */

#modalDatos{
    background:linear-gradient(160deg, #2c0d66 0%, #7B2FFF 45%, #f2ecff 100%) !important;
    padding:30px 15px;
}

.modal-pedido{
    background:#fff;
    width:600px;
    max-width:95%;
    max-height:90vh;
    overflow-y:auto;

    border-radius:18px;
    padding:30px;
    box-shadow:0 25px 60px rgba(0,0,0,.45);
    animation:scaleIn .3s;
}



.modal-pedido h2{
    text-align:center;
    margin-bottom:25px;
    font-size:32px;
    color:#222;
}

.grupo-input{
    margin-bottom:18px;
}

.grupo-input label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:#444;
}

.grupo-input input,
.grupo-input textarea{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
    transition:.3s;
}

.grupo-input input:focus,
.grupo-input textarea:focus{
    outline:none;
    border-color:var(--color-primario);
    box-shadow:0 0 8px rgba(123,47,255,.2);
}

.metodos-pago{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:10px;
}

.metodos-pago label{
    border:1px solid #ddd;
    padding:12px;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
}

.metodos-pago label:hover{
    border-color:var(--color-primario);
    background:#f7f2ff;
}

.botones-pedido{
    display:flex;
    justify-content:flex-end;
    gap:15px;
    margin-top:25px;
}

.btn-cancelar{
    background:#777;
    color:#fff;
    border:none;
    padding:12px 22px;
    border-radius:10px;
    cursor:pointer;
}

.btn-confirmar{
    background:var(--color-primario);
    color:#fff;
    border:none;
    padding:12px 22px;
    border-radius:10px;
    cursor:pointer;
}

.btn-confirmar:hover{
    background:#6220e6;
}



/* ===== MÉTODOS DE PAGO ===== */

.metodos-pago{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:15px;
}

.metodo{
    border:2px solid #ddd;
    border-radius:15px;
    padding:20px;
    text-align:center;
    cursor:pointer;
    transition:.3s;
    background:#fff;
}

.metodo:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.metodo.activo{
    border-color:var(--color-primario);
    background:#f6f1ff;
    box-shadow:0 0 15px rgba(123,47,255,.25);
}

.metodo .icono{
    font-size:42px;
    margin-bottom:10px;
}

.logo-metodo{
    width:100%;
    max-width:120px;
    height:60px;
    object-fit:contain;
    margin-bottom:10px;
}

.metodo h3{
    margin:5px 0;
    font-size:20px;
    color:#222;
}

.metodo p{
    color:#666;
    font-size:14px;
}