*{ box-sizing:border-box; }

body{ 
  margin:0; 
  padding:0;  
  font-family: "Montserrat", sans-serif; 
}

/* ---------- Top bar ---------- */
.topbar{
  background:#0b0b0b;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 50px;
  gap:12px;
  font-size:14px;
}
.topbar-msg{ margin:0; }
.topbar-actions{ display:flex; gap:8px; }
.topbar select{
  background:#0b0b0b; color:#fff;
  border:1px solid #3a3a3a; border-radius:4px;
  padding:4px 50px;
}

/* NAVEGACION MENU */
nav{
    background: rgb(153, 120, 225);
    width: 100%;            /* evita scroll horizontal que da 100vw */
    display: flex;
    align-items: center;   /* centra verticalmente */
    justify-content: space-between; /* logo a la izq, menú a la der */
    padding: 15px 50px;
}


/* 2) La UL en fila con flex */
.menu{
  list-style: none;       /* quita bullets */
  margin: 0;              /* elimina margen por defecto */
  padding: 0;             /* elimina padding por defecto */
  display: flex;          /* pone los li en una fila */
  gap: 2rem;              /* espacio entre items */
  align-items: center;    /* centra verticalmente */
  /* opcional: justifícalo a la derecha o centro */
 justify-content: flex-end;
  /* justify-content: center; */
}

/* 3) Estilo de los chips */
.chip{
  display: inline-block;      /* que respeten padding y borde */
  text-decoration: none;      /* sin subrayado */
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
}

.chip:hover{ 
    /* border: 2px solid #ffffff; */
    text-decoration: underline;
}
.chip:active{ 
    transform: translateY(1px); 
}

/* logo */
nav .img{
  height: 50px;    
  width: auto;
  display: block;
}

.mainnav{
  box-shadow: 0 3px 8px rgba(0,0,0,.10);
  position: relative;   /* asegura que la sombra quede encima del banner */
  z-index: 1;
}


/* BANNER */
.banner {
  background: linear-gradient(328deg,#9b61f2 0%,#b07bff 50%,#cebae6 100%);
  height: 500px;
  width: 100vw;

  display: flex;
  flex-direction: row;
}
.banner_perrito{
    display: flex;
    justify-content: center;
    width: 50%;
    height: auto;
    padding-top: 1rem;
}

.dogo {
	width: 450px;
  transform: content;
}

.banner:hover .dogo{
  content: url("https://i.postimg.cc/GmCx8RDm/PERRITO-0000-2.png"); /* cambia la imagen */
	width: 540px;
}


.texto-banner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: auto;
}

/* Columna del texto */
.texto-banner {
  flex: 1;                      /* ocupa parte derecha */
  display: flex;
  flex-direction: column;
  align-items: center;          /* centra horizontal */
  justify-content: center;      /* centra vertical */
  gap: 2rem;
  text-align: center;
  color: #fff;
}
.texto-banner h1 {
  font-size: clamp(32px, 4vw, 52px);
  margin: 0;
}
.texto-banner p {
  font-size: 18px;
  margin: 0;
}

/* Botón con imagen PNG de huesito */
.bone-btn {
  width: 240px;                    /* recomendado 220–260 */
  height: 64px;                    /* recomendado 50–70 */
  background: url("https://i.postimg.cc/4NG0HV4k/boton-huesito.png") no-repeat center/contain;
  background-color: transparent;
  border: none;
  color: #4e27c8;
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;            /* centra el texto dentro del huesito */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.13));
  transition: transform .15s ease, filter .2s ease;
}
.bone-btn:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));
}
.bone-btn:active {
  transform: translateY(0);
}

/* DESTACADOS */
.destacados{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0rem;
}

.tag{
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  padding: 5px 20px;
  background: rgb(209, 180, 255);
  border-radius: 1rem;
  margin: 0 20px;
}

.contenedor-destacados{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
}

.card{
  width: 300px;
  height: 450px;
  border-radius: 16px;
  overflow: hidden;           
  box-shadow: 2px 6px 0.75rem rgba(0,0,0,0.15);
  text-align: center;
  background-color: #ffffff;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}

.producto{
  width: 300px;
  height: 300px;
  position: relative;
  top: -30px;
}

.titulo-producto{
  font-weight: 500;
  color: #3a3a3a;
  font-size: 1rem;
}

.precio{
  font-size: 1.5rem;
  color: #b07bff;
  font-weight: 700;
}
/* hover 
https://i.postimg.cc/rw8DrVzQ/1B.png"
https://i.postimg.cc/CMk5rBqc/2B.png
https://i.postimg.cc/SQ6Q7BB5/3B.png
  */


/* FORMULARIO */

/* --- utilidades locales (no afectan tu landing) --- */
.contact * { box-sizing: border-box; }
.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;
}

/* --- layout --- */
.contact {
    padding: 2rem 1rem;
    color: #353535;
    font: 1rem/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.contact__inner {
    width: min(96vw, 70rem);
    margin-inline: auto;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* izquierda */
.contact__info { flex: 1 1 40%; }
.contact__heading {
    margin: 0 0 .75rem;
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
    color: #3c3c3c;
}
.contact__address {
    font-style: normal;
    color: #7a7a7a;
    margin: 0 0 1.5rem;
}
.contact__social { display: flex; gap: .6rem; margin: .5rem 0 1.5rem; }
.contact__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    color: #3c3c3c; background: #f2f2f2; text-decoration: none;
}
.contact__icon:hover { background: #e8e8e8; }
.contact__legal { color: #9a9a9a; }

/* derecha */
.contact__form { flex: 1 1 60%; }
.contact__field { margin-bottom: .75rem; }

.contact input,
.contact textarea {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #e3e3e3;
    border-radius: .25rem;
    background: #efefef;
    color: #333;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    font: inherit;
}
.contact textarea { resize: vertical; }

.contact input::placeholder,
.contact textarea::placeholder { color: #a9a9a9; }

.contact input:focus,
.contact textarea:focus {
    background: #fff;
    border-color: #cbd5e1;
    box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

.contact__btn {
    padding: .6rem 1.25rem;
    border: 1px solid #cfcfcf;
    background: #ae8ae5;
    color: #ffffff;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact__btn:hover{
  transform: scale(1.25);
  background-color: #7b57b0;
}

/* responsive */
@media (max-width: 48rem){
    .contact__inner { flex-direction: column; }
}


/* FOOTER */

footer{
  background-color: #0b0b0b;
  color: rgb(150, 150, 150);
  text-align: center;
  width: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}