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

/* ============================================
   VARIABLES Y RESET
============================================ */

:root{

  --rosa-claro:#fdecef;
  --rosa:#e6a4b4;
  --rosa-oscuro:#c97b92;
  --beige:#fff8f3;
  --dorado:#d4a373;
  --verde:#8fb996;

  --fondo:#fffaf7;
  --fondo-card:#ffffff;
  --fondo-nav:#fff1f4;

  --texto:#473535;
  --texto-suave:#7f6b6b;
  --texto-dim:#b6a5a5;

  --sombra:0 4px 18px rgba(0,0,0,0.06);
  --sombra-hover:0 10px 28px rgba(0,0,0,0.10);

  --radio:20px;
  --transicion:0.3s ease;
}

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

body{
  background:var(--fondo);
  font-family:'Poppins',sans-serif;
  color:var(--texto);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* ============================================
   HEADER
============================================ */

header{
  background:linear-gradient(135deg,#fff0f3,#fffaf7);
  padding:50px 30px 40px;
  border-bottom:1px solid #f1d7de;
}

/* CONTENEDOR HEADER */

.header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1400px;
  margin:auto;
  gap:30px;
}

/* LOGO IZQUIERDA */

.logo-container{
  flex:1;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

/* TEXTO CENTRO */

.header-info{
  flex:1;
  text-align:center;
}

/* IMAGEN DERECHA */

.img-container{
  flex:1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

/* LOGO */

.logo{
  width:220px;
  height:220px;
  object-fit:contain;
  border-radius:50%;
  border:4px solid #f3d8df;
  background:white;
  padding:10px;
  box-shadow:var(--sombra);
  transition:var(--transicion);
}

.logo:hover{
  transform:scale(1.05);
}

/* IMAGEN DERECHA */

.img{
  width:220px;
  height:220px;
  object-fit:contain;
  transition:var(--transicion);
}

/* TITULO */

header h1{
  font-size:clamp(2.4rem,5vw,4.8rem);
  color:var(--rosa-oscuro);
  font-weight:700;
  line-height:1;
}

header h1 span{
  color:var(--dorado);
}

/* SUBTITULO */

header p{
  margin-top:18px;
  color:var(--texto-suave);
  font-size:1.1rem;
  letter-spacing:1px;
}

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

.buscador-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:35px;
}

.buscador-wrap input{
  width:min(90%,550px);
  padding:18px 60px 18px 24px;
  border-radius:50px;
  border:1px solid #ecd6dc;
  background:white;
  color:var(--texto);
  font-family:'Poppins',sans-serif;
  font-size:1rem;
  transition:var(--transicion);
  box-shadow:0 4px 18px rgba(0,0,0,0.04);
}

.buscador-wrap input:focus{
  outline:none;
  border-color:var(--rosa);
  box-shadow:0 0 0 4px rgba(230,164,180,0.15);
}

.buscador-wrap input::placeholder{
  color:var(--texto-dim);
}

/* BOTON LIMPIAR */

.btn-limpiar{
  position:absolute;
  right:calc(50% - 275px + 15px);
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#f8d7da;
  color:var(--rosa-oscuro);
  font-size:1.5rem;
  cursor:pointer;
  display:none;
  transition:var(--transicion);
}

.btn-limpiar:hover{
  background:var(--rosa);
  color:white;
}

/* ============================================
   NAV
============================================ */

nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  background:var(--fondo-nav);
  padding:0 20px 20px;
  border-bottom:1px solid #f1d7de;
}

nav a{
  text-decoration:none;
  color:var(--texto-suave);
  background:white;
  border:1px solid #edd6dc;
  padding:11px 22px;
  border-radius:100px;
  font-size:0.9rem;
  font-weight:600;
  transition:var(--transicion);
}

nav a:hover,
nav a.activo{
  background:linear-gradient(135deg,var(--rosa),var(--dorado));
  color:white;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(230,164,180,0.25);
}

/* ============================================
   MAIN
============================================ */

main{
  max-width:1200px;
  width:100%;
  margin:auto;
  padding:50px 24px 60px;
}

.seccion-titulo{
  font-size:1.8rem;
  color:var(--rosa-oscuro);
  font-weight:700;
  margin-bottom:35px;
  display:flex;
  align-items:center;
  gap:12px;
}

.seccion-titulo::after{
  content:'';
  flex:1;
  height:2px;
  background:linear-gradient(to right,var(--rosa),transparent);
}

/* ============================================
   GRID PRODUCTOS
============================================ */

.productos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:28px;
}

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

.card{
  background:var(--fondo-card);
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
  display:flex;
  flex-direction:column;
  transition:var(--transicion);
  border:1px solid #f1d7de;
  position:relative;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-hover);
}

.card-badge{
  position:absolute;
  top:16px;
  left:16px;
  background:linear-gradient(135deg,var(--dorado),var(--rosa));
  color:white;
  padding:6px 14px;
  border-radius:100px;
  font-size:0.75rem;
  font-weight:600;
  z-index:2;
}

.card-img-wrap{
  height:220px;
  overflow:hidden;
  background:#fff;
  position:relative;
}

.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.5s;
}

.card:hover img{
  transform:scale(1.06);
}

.card-body{
  padding:22px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.card h3{
  font-size:1.15rem;
  margin-bottom:8px;
  color:var(--texto);
}

.card p{
  font-size:0.95rem;
  color:var(--texto-suave);
  line-height:1.6;
  flex:1;
}

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

.precio-container{
  margin:16px 0 6px;
}

.precio-original{
  color:#c97b92;
  text-decoration:line-through;
  font-size:1rem;
}

.precio-rebajado{
  font-size:1.8rem;
  color:var(--verde);
  font-weight:700;
}

.precio{
  font-size:1.7rem;
  color:var(--rosa-oscuro);
  font-weight:700;
  margin-top:16px;
}

.badge-descuento{
  position:absolute;
  top:16px;
  right:16px;
  background:#e6a4b4;
  color:white;
  padding:8px 14px;
  border-radius:100px;
  font-size:0.8rem;
  font-weight:700;
}

/* ============================================
   BOTON COMPRAR
============================================ */

.btn-comprar{
  margin-top:18px;
  text-decoration:none;
  text-align:center;
  padding:14px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--rosa),var(--dorado));
  color:white;
  font-weight:600;
  transition:var(--transicion);
  box-shadow:0 6px 18px rgba(230,164,180,0.22);
}

.btn-comprar:hover{
  transform:translateY(-2px);
  opacity:0.95;
}

/* ============================================
   ESTADOS
============================================ */

.estado-vacio,
.estado-cargando,
.estado-error{
  grid-column:1/-1;
  background:white;
  border-radius:20px;
  padding:50px 30px;
  text-align:center;
  box-shadow:var(--sombra);
  border:1px solid #f1d7de;
}

.estado-vacio strong,
.estado-cargando strong,
.estado-error strong{
  display:block;
  color:var(--rosa-oscuro);
  font-size:1.3rem;
  margin-bottom:12px;
}

.estado-vacio p,
.estado-cargando p,
.estado-error p{
  color:var(--texto-suave);
  line-height:1.6;
}

/* ============================================
   FOOTER
============================================ */

footer{
  background:linear-gradient(135deg,#fff0f3,#fffaf7);
  padding:35px 20px;
  text-align:center;
  color:var(--texto-suave);
  margin-top:auto;
  border-top:1px solid #f1d7de;
}

footer strong{
  color:var(--rosa-oscuro);
}

/* ============================================
   REDES
============================================ */

.redes-sociales{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.redes-sociales a{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--rosa),var(--dorado));
  color:white;
  transition:var(--transicion);
  text-decoration:none;
}

.redes-sociales a:hover{
  transform:translateY(-4px) scale(1.05);
}

.redes-sociales svg{
  width:24px;
  height:24px;
}

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

@media(max-width:900px){

  .header-content{
    flex-direction:column;
    text-align:center;
    gap:25px;
  }

  .logo-container,
  .img-container{
    justify-content:center;
  }

  .logo{
    width:170px;
    height:170px;
  }

  .img{
    width:180px;
    height:180px;
  }

  header h1{
    font-size:2.5rem;
  }

  header p{
    font-size:1rem;
  }

  .btn-limpiar{
    right:20px;
  }

}

@media(max-width:600px){

  main{
    padding:35px 16px 45px;
  }

  header{
    padding:35px 18px;
  }

  .logo{
    width:140px;
    height:140px;
  }

  .img{
    width:150px;
    height:150px;
  }

  header h1{
    font-size:2rem;
  }

  header p{
    font-size:0.95rem;
  }

  .buscador-wrap input{
    width:100%;
    font-size:0.95rem;
    padding:16px 55px 16px 20px;
  }

  .productos{
    grid-template-columns:1fr;
    gap:20px;
  }

  .card-img-wrap{
    height:200px;
  }

  .precio{
    font-size:1.4rem;
  }

  .precio-rebajado{
    font-size:1.5rem;
  }

  nav{
    gap:8px;
    padding:0 12px 16px;
  }

  nav a{
    font-size:0.8rem;
    padding:9px 16px;
  }

  .seccion-titulo{
    font-size:1.4rem;
    flex-direction:column;
    align-items:flex-start;
  }

  .seccion-titulo::after{
    width:100%;
  }

}

@media(min-width:601px) and (max-width:900px){

  .productos{
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  }

}

@media(min-width:901px) and (max-width:1200px){

  .logo{
    width:180px;
    height:180px;
  }

}

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

.subir-imagen-section{
  grid-column:1 / -1;
}

.drop-area{
  border:2px dashed #d98ca3;
  border-radius:18px;
  padding:36px 20px;
  text-align:center;
  cursor:pointer;
  transition:var(--transicion);
  background:#fff7f9;
  margin-bottom:16px;
  user-select:none;
}

.drop-area:hover,
.drop-area.drag-over{
  background:#fceef1;
}

.drop-icono{
  font-size:2.5rem;
  margin-bottom:10px;
}

.drop-texto{
  color:var(--texto);
  font-weight:500;
  margin-bottom:6px;
}

.drop-sub{
  color:var(--texto-dim);
  font-size:0.85rem;
}

#previewContainer{
  margin-bottom:14px;
  text-align:center;
}

#previewImg{
  max-width:100%;
  max-height:220px;
  border-radius:14px;
  border:1px solid #f0d7dd;
  object-fit:contain;
}

.url-box{
  display:flex;
  gap:10px;
  align-items:center;
}

.url-box input{
  flex:1;
  margin-bottom:0;
  font-size:0.85rem;
  color:var(--texto-suave);
}

.btn-copiar{
  width:auto;
  padding:12px 18px;
  white-space:nowrap;
  font-size:0.9rem;
}

#resultadoUrl label{
  display:block;
  font-weight:600;
  margin-bottom:10px;
}

.status-loading{
  color:var(--dorado);
  font-weight:500;
  margin-top:10px;
}

.status-ok{
  color:#2e7d32;
  font-weight:500;
  margin-top:10px;
}

.status-error{
  color:#c0392b;
  font-weight:500;
  margin-top:10px;
}

/* CAMPO IMAGEN */

.imagen-field{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-bottom:14px;
}

.imagen-field input{
  flex:1;
  margin-bottom:0;
}

.btn-pegar-url{
  width:auto;
  padding:13px 14px;
  font-size:0.85rem;
  white-space:nowrap;
  background:linear-gradient(135deg,#f3a8be,#d98ca3);
}