body {
  margin: 0;
}
/* Desktop */

#inicio{
  position: absolute;
}

.banner {
position: relative;
right: 390px;
width: 210%;
} 

.zoo{
    overflow: hidden;
}
/*------------MENU------------*/

.menu-icon {
    position: absolute;
    padding: 10px;
    bottom: 860px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1;
}

.menu {
  background-color: rgba(255,237,255,.8);
  position: absolute;
  display: none;
  flex-wrap: wrap;
  width: 200px;
  padding: 10px;
  top: 1px;
  z-index: 9;
border-radius: 0 0 20px;
}

.mn{
  padding: 40px;
  margin: 2px 3px 0 34px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-weight: bold;
  color: saddlebrown;
}

.close {
  background-color: hotpink;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  margin-left: 150px;
  position: relative;
  cursor: pointer;
  border: none;
}
/*------------IMAGENES------------*/

h1{
    position: relative;
    top: 10px;
    text-align: center;
    color: saddlebrown;
    font-size: 20px;
}
p {
  font-size: 12px;
  text-align: center;
  color: saddlebrown;
}
#pp {
 position: relative;
    top: 20px;
    font-size: 15px;
  }

.btn_redi {
  display: none;
}
/*-----------FOOTER--------------*/
/* ==========================
   FOOTER PREMIUM CHOCO CLICK
========================== */

.footer {
    background: linear-gradient(
        180deg,
        #fff7fa 0%,
        #ffffff 100%
    );

    padding: 80px 8%;
    margin-top: 5px;

    border-top: 1px solid #f2dbe4;
}

.footer-container {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1.5fr;

    gap: 50px;

    max-width: 1400px;

    margin: auto;
}

/* LOGO */

.footer-logo h2 {
    font-size: 42px;

    color: #4b240f;

    margin-bottom: 15px;
}

.footer-logo p {
    color: #7a5c4d;

    line-height: 1.8;

    font-size: 16px;
}

/* TITULOS */

.footer-column h3 {
    color: #4b240f;

    margin-bottom: 25px;

    font-size: 24px;

    position: relative;
}

.footer-column h3::after {
    content: "";

    width: 50px;

    height: 3px;

    background: #ff4f8b;

    position: absolute;

    left: 0;
    bottom: -10px;

    border-radius: 20px;
}

/* LINKS */

.footer-links {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.footer-links a {
    color: #7a5c4d;

    text-decoration: none;

    transition: .3s;
}

.footer-links a:hover {
    color: #ff4f8b;

    transform: translateX(6px);
}

/* REDES */

.social-icons {
    display: flex;

    gap: 15px;

    margin-top: 20px;
}

.social-icons a {
    width: 50px;
    height: 50px;

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

    background: white;

    border-radius: 50%;

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);

    transition: .3s;
}

.social-icons a:hover {
    transform:
        translateY(-5px)
        scale(1.1);

    background: #ff4f8b;

    color: white;
}

/* CONTACTO */
#contacto {
    display: none;
}

    .conti {
        position: relative;
        width: 200%;
        left: -40px;
    }
    
    .zoo4 {
        overflow: hidden;
    }

/* FORMULARIO */

.footer-form {
    display: flex;

    flex-direction: column;

    gap: 15px;
}

.footer-form input,
.footer-form textarea {
    padding: 15px;

    border: 1px solid #f0d8e1;

    border-radius: 15px;

    background: white;

    font-size: 15px;

    resize: none;

    outline: none;
}

.footer-form input:focus,
.footer-form textarea:focus {
    border-color: #ff4f8b;
}

/* BOTON */

.footer-btn {
    background: linear-gradient(
        135deg,
        #ff4f8b,
        #ff7ea8
    );

    color: white;

    border: none;

    padding: 15px;

    border-radius: 50px;

    font-weight: bold;

    cursor: pointer;

    transition: .3s;
}

.footer-btn:hover {
    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 12px 25px rgba(255,79,139,.35);
}

/* COPYRIGHT */

.footer-bottom {
    text-align: center;

    margin-top: 60px;

    padding-top: 30px;

    border-top: 1px solid #f0d8e1;

    color: #7a5c4d;
}

/* =========================
NOSOTROS
========================= */

#nosotros {
    background-color: pink;
    position: relative;
    top: -20px;
    display: none;
}

#Noso {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 40px;
    position: relative;
}

 .sotro {
    position: relative;
    width: 230%;
     left: 1px;
    }
    
    .zoo3 {
        overflow: hidden;
    }
    
    .n1 {color: white; 
        position: relative; 
        top: 50px;}
        
/* RESPONSIVE */

@media(max-width: 800px){

    .footer-container{

        grid-template-columns:1fr;

        gap:40px;
    }

    .footer-logo h2{

        font-size:32px;
    }
    
    .menu-icon {
    position: absolute;
    padding: 10px;
    bottom: 670px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1;
}

    .banner {
        position: relative;
        right: 368px;
        width: 190%;
    }

}



.whatsapp-float{

    position: fixed;

    bottom: 25px;

    left: 25px;

    z-index: 9999;

    background: #25D366;

    color: white;

    text-decoration: none;

    padding: 14px 22px;

    border-radius: 40px;

    font-size: 15px;

    font-weight: bold;

    box-shadow: 0 8px 25px rgba(0,0,0,.15);

    transition: .3s ease;

}



/* Hover */
.whatsapp-float:hover{

    transform: scale(1.05);

}

/* Hover */
.menu button:hover{

    color: #ff4f87;

    transform: translateY(-2px);

}
/* =========================
CATEGORIA
========================= */
#categoria {
  display: none;
}

.cate {
    position: relative;
 width: 200%;
}

.zoo2 {
    overflow: hidden;
}

.categ {
  background-color: pink;
  border: none;
  border-radius: 5px;
}

/* =========================
NOSOTROS
========================= */
 .sotro {
        position: relative;
        right: 1px;
        width: 190%;
    }
    
    .zoo3 {
        overflow: hidden;
    }
    
/* =========================
   GRID CATEGORIAS PREMIUM
========================= */

.categories-grid{

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px,1fr));

    gap: 30px;

    padding: 40px 20px;

}


/* =========================
   CARD PREMIUM
========================= */

.category-card{

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.08);

    transition: 0.4s ease;

    cursor: pointer;

    text-align: center;

    padding-bottom: 30px;

}


/* EFECTO HOVER */
.category-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 50px rgba(0,0,0,0.15);

}


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

.category-card img{

    width: 100%;

    height: 250px;

    object-fit: cover;

    transition: 0.5s ease;

}


/* ZOOM IMAGEN */
.category-card:hover img{

    transform: scale(1.08);

}

.arrow-btn{

  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #ff4f8b;
  border: none;
  padding: 5px;
  border-radius: 0 20px;
  width: 150px;
  color: white;
  font-weight: 2px;
  cursor: pointer;
}


.arrow-btn span{

    transition: 0.3s;
}


.arrow-btn:hover span{

    transform: translateX(6px);

}

/* =========================
   TITULO
========================= */

.category-card h3{

    font-size: 28px;

    font-weight: 700;

    color: #2b1206;

    margin-top: 25px;

    margin-bottom: 20px;

    font-family: 'Poppins', sans-serif;

}


/* =========================
   BOTON PREMIUM
========================= */

.categ{

    border: none;

    outline: none;

    padding: 16px 32px;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 700;

    color: white;

    cursor: pointer;

    transition: 0.3s ease;

    font-family: 'Poppins', sans-serif;

    box-shadow:
        0 10px 25px rgba(255,79,147,0.35);

}


/* HOVER BOTON */
.categ:hover{

    transform:
        translateY(-3px)
        scale(1.03);

}


/* =========================
   COLORES PERSONALIZADOS
========================= */

/* DESAYUNOS */
#yuno{

    background: linear-gradient(
        135deg,
        #ff4f93,
        #ff7bb0
    );

}


/* CUMPLEAÑOS */
#cora{

    background: linear-gradient(
        135deg,
        #ff9966,
        #ff5e62
    );

}


/* ANIVERSARIOS */
#cak{

    background: linear-gradient(
        135deg,
        #7f7fd5,
        #86a8e7,
        #91eae4
    );

}


/* AMOR */
#deco{

    background: linear-gradient(
        135deg,
        #ff416c,
        #ff4b2b
    );

}


/* DETALLES */
#clien{

    background: linear-gradient(
        135deg,
        #43cea2,
        #185a9d
    );

}


/* =========================
   EFECTO BRILLO PREMIUM
========================= */

.category-card::before{

    content: "";

    position: absolute;

    top: -100%;

    left: -100%;

    width: 250%;

    height: 250%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,0.25),

            transparent

        );

    transform: rotate(25deg);

    transition: 0.8s;

}


.category-card:hover::before{

    top: 100%;

    left: 100%;

}

#desayunos {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
        z-index: 999;
     justify-content: center;
    }
    
    .products-grid{
      position: relative;
        width: 340px;
        gap:25px;
        padding:20px 20px;
      margin: 29px;
    }

    .product-card{
        width: 100%;
        border-radius:28px;
        border: 1px solid pink;
        padding:28px 22px;
        box-shadow: 10px 10px 30px pink;

    }

    .product-card img{

        width: 250px;
        border-radius: 20px;
        height:320px;

    }

    .product-card h3{

       font-size: 28px;
    color: saddlebrown;
    margin-bottom: 10px;
    text-align: center;
    }

    .product-card p{

      font-size: 15px;
    margin-bottom: 10px;

    }

    .product-card button{
      position: relative;
      border: none;
      background-color: hotpink;
      padding: 20px;
      border-radius: 20px;
      width:100%;
      color: white;
      font-size: 16px;
      margin: 5px;
      bottom: -20px;
      box-shadow: 10px 10px 12px pink;
      cursor: pointer;
      transition: width 1s ;
    } 

.product-card button:hover{
  width: 101%;
  
}

.hero-effects{
  position: absolute;
  inset:0;
    bottom: 2000px;
  pointer-events:none;
  overflow:hidden;
  z-index:2;
}

/* =========================
   CTA GLOW
========================= */

.cta-glow{
  position:absolute;
  left:70px;
  bottom:120px;

  width:420px;
  height:85px;

  border-radius:30px;

  background:rgba(255, 70, 130, 0.35);

  filter:blur(20px);

  animation:pulseGlow 2.5s infinite ease-in-out;
}

@keyframes pulseGlow{

  0%,100%{
    transform:scale(1);
    opacity:0.6;
  }

  50%{
    transform:scale(1.08);
    opacity:1;
  }
}

/* =========================
   SPARKLES
========================= */

.sparkle{
  position:absolute;

  width:10px;
  height:10px;

  border-radius:50%;

  background:white;

  box-shadow:
    0 0 10px white,
    0 0 20px rgba(255,255,255,0.8);

  animation:sparkleFloat 4s infinite ease-in-out;
}

.sparkle::before,
.sparkle::after{
  content:'';

  position:absolute;

  background:white;
}

.sparkle::before{
  width:2px;
  height:18px;
  left:4px;
  top:-4px;
}

.sparkle::after{
  width:18px;
  height:2px;
  left:-4px;
  top:4px;
}

@keyframes sparkleFloat{

  0%{
    transform:
      translateY(1px)
      scale(0.4)
      rotate(0deg);

    opacity:0;
  }

  50%{
    opacity:1;
  }

  100%{
    transform:
      translateY(-40px)
      scale(1.3)
      rotate(180deg);

    opacity:0;
  }
}

/* POSICIONES */

.s1{
  top:15%;
  left:18%;
  animation-delay:0s;
}

.s2{
  top:28%;
  left:70%;
  animation-delay:1s;
}

.s3{
  top:60%;
  left:82%;
  animation-delay:2s;
}

.s4{
  top:75%;
  left:55%;
  animation-delay:3s;
}

.s5{
  top:40%;
  left:45%;
  animation-delay:4s;
}

/* =========================
   HEARTS
========================= */

.heart{
  position:absolute;

  color:#ff5b9c;

  font-size:28px;

  text-shadow:
    0 0 10px rgba(255,80,150,0.7);

  animation:heartFloat 6s infinite ease-in-out;
}

@keyframes heartFloat{

  0%{
    transform:
      translateY(1px)
      scale(0.8);

    opacity:0;
  }

  25%{
    opacity:1;
  }

  100%{
    transform:
      translateY(-120px)
      scale(1.4);

    opacity:0;
  }
}

/* POSICIONES */

.h1{
  bottom:18%;
  left:72%;
  animation-delay:0s;
}

.h2{
  bottom:12%;
  left:80%;
  animation-delay:2s;
}

.h3{
  bottom:25%;
  left:65%;
  animation-delay:4s;
}

.h4{
  bottom:15%;
  left:58%;
  animation-delay:1s;
}


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

@media(min-width:1024px){
  .menu-icon{
    display: none;
  }
  
    #desayunos {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
        z-index: 999;
        
    }
    
 .banner {
position: relative;
width: 100%;
left: 0;
} 
    
.zoo{
    overflow: visible;
    border: none;
    position: relative;
    bottom: 80px;
}
  
.menu {
 background-color: transparent;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 600px;
        padding: 10px;
        top: 20px;
        right: -500px;
        z-index: 9;
    }
  
  .mn{
  padding: 1px;
  margin: 2px 3px 0 34px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-weight: bold;
  color: saddlebrown;
  font-size: 20px;
}

.close {
 display: none;
}
  h1 {
    display: inline-block;
    position: relative;
    left: 400px;
    z-index: 6;
    font-size: 50px;
    top: -90px;
  }
  #pp {
   position: relative;
        top: -60px;
        font-size: 30px;
        left: 10px;
  }
  

  /* =========================
   SECCIÓN PREMIUM CHOCO CLICK
========================= */

.products-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:40px;

    padding: 1px 5px;

    min-width:160px;

    margin:auto;

}


/* CARD */

.product-card{

    position:relative;

    background:#fff;

    border-radius: 38px;

    overflow:hidden;

    padding: 35px 28px;
margin: 5px;
    text-align:center;

    transition:.45s ease;

    border:1px solid rgba(255,78,140,.18);

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);

}


/* EFECTO PREMIUM */

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.5),
            transparent
        );

    pointer-events:none;

}


/* HOVER */

.product-card:hover{

    transform:
        translateY(-12px);

    box-shadow:
        0 20px 45px rgba(255,78,140,.18);

    border:
        1px solid rgba(255,78,140,.35);

}


/* IMAGEN */

.product-card img{

    width:100%;

    max-width:260px;

    height:260px;

    object-fit:contain;

    transition:.45s ease;

    margin-bottom:25px;

    filter:
        drop-shadow(
            0 12px 20px rgba(0,0,0,.10)
        );

}


/* ZOOM */

.product-card:hover img{

    transform:
        scale(1.06);

}


/* TITULO */

.product-card h3{

    font-size:34px;

    color:#5a2d13;

    margin-bottom:18px;

    font-weight:800;

    line-height:1.2;

    letter-spacing:-1px;

}


/* DESCRIPCION */

.product-card p{

    font-size:17px;

    line-height:1.7;

    color:#7b5d4d;

    margin-bottom:28px;

    min-height:80px;

}


/* PRECIO */

.product-price{

    font-size:34px;

    font-weight:900;

    color:#ff4e8c;

    margin-bottom:28px;

}


/* BOTON PREMIUM */

.product-card button{

    border:none;

    padding:18px 34px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #ff4e8c,
            #ff6fa5
        );

    color:white;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:
        0 10px 25px rgba(255,78,140,.28);

}


/* HOVER BOTON */

.product-card button:hover{

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 18px 35px rgba(255,78,140,.35);

}


/* FLECHA */

.product-card button::after{

    content:" →";

    transition:.3s ease;

}




  
        .btn_redi {
        display: block;
        position: relative;
        top: -360px;
        left: 94px;
        width: 380px;
        height: 50px;
        font-size: 30px;
        border: none;
        background-color: #F34970;
        color: white;
        cursor: pointer;
        animation-name: an;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }
  
  @keyframes an {

  0%{
    transform: scale(1);
  }

  25%{
    transform: scale(1.05);
  }

  50%{
    transform: scale(1);
  }

  75%{
    transform: scale(1.05);
  }

  100%{
    transform: scale(1);
  }
}
  /* =========================
CATEGORIA
========================= */
.cate {
  width: 100%;
  position: relative;
  top: -70px;
  margin: -3px;
}

 .zoo2 {
    overflow: visible;
    border: none;
}
      /* =========================
CONTACTO
========================= */
    
    #contacto {
        border: 1px solid purple;
        display: none;
        flex-wrap: wrap;
        position: relative;
        top: -46px;
    }
     .conti {
        position: relative;
        width: 103%;
    }
    
    .zoo4 {
        overflow: hidden;
    }
    
    .footer {
        position: relative;
        bottom: 10px;
    }
    
    /* =========================
NOSOTROS
========================= */
.sotro {
        position: relative;
        top: -30px;
        width: 100%;
    }
    
    .zoo3 {
        overflow: visible;
        border: none;
    }
    .n1 {color: white; 
        position: relative; 
        top: 10px;}
}



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

    :root{

    --blanco:#fffaf7;
    --rosa:#f8d7da;
    --rosa-suave:#ffecef;
    --cafe:#6b3e26;
    --cafe-claro:#b98973;
    --crema:#fff3eb;

}

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

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    color:var(--cafe);
}

/* ===== SECCION ===== */

.nosotros{

    min-height:100vh;
    padding:100px 8%;
    display:flex;
    justify-content:center;
    align-items:center;

}

.container{

    width:100%;
    max-width:1500px;

}

/* ===== TITULO ===== */

.encabezado{

    text-align:center;
    margin-bottom:70px;

}

.encabezado span{

    color:var(--cafe-claro);
    letter-spacing:4px;
    font-size:14px;
    font-weight:600;

}

.encabezado h1{

    margin-top:15px;
    font-size:60px;
    color:var(--cafe);
    line-height:1.1;

}

.encabezado p{

    max-width:800px;
    margin:25px auto 0;
    color:#8d6b5b;
    font-size:18px;
    line-height:1.9;

}

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

.grid{

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:50px;
    align-items:center;

}

/* ===== CARRUSEL PREMIUM ===== */

.slider{

    position:relative;
    width:100%;
    height:750px;
    border-radius:35px;
    overflow:hidden;
    background:white;
    box-shadow:
    0 25px 60px rgba(185,137,115,.25);

}

.slide{

    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.08);
    animation:slider 40s infinite;

}

.slide img{

    width:100%;
    height:100%;
    object-fit:cover;

}

/* DELAY IMAGENES */

.slide:nth-child(1){ animation-delay:0s; }
.slide:nth-child(2){ animation-delay:5s; }
.slide:nth-child(3){ animation-delay:10s; }
.slide:nth-child(4){ animation-delay:15s; }
.slide:nth-child(5){ animation-delay:20s; }
.slide:nth-child(6){ animation-delay:25s; }
.slide:nth-child(7){ animation-delay:30s; }
.slide:nth-child(8){ animation-delay:35s; }

@keyframes slider{

    0%{
        opacity:0;
        transform:scale(1.08);
    }

    5%{
        opacity:1;
    }

    15%{
        opacity:1;
        transform:scale(1);
    }

    20%{
        opacity:0;
    }

    100%{
        opacity:0;
    }

}

/* ===== OVERLAY ===== 

.overlay{

    position:absolute;
    inset:0;
    background:linear-gradient(
    to top,
    rgba(44,20,10,.6),
    rgba(44,20,10,.05)
    );

}

/* ===== CONTENIDO ===== */

.info{

    animation:entrada 1s ease;

}

.info h2{

    font-size:50px;
    line-height:1.2;
    margin-bottom:30px;
    color:var(--cafe);

}

.info p{

    color:#8d6b5b;
    font-size:18px;
    line-height:1.9;
    margin-bottom:22px;

}

/* ===== BENEFICIOS ===== */

.cards{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:40px;

}

.card{

    background:rgba(255,255,255,.65);
    border:1px solid rgba(255,255,255,.8);
    padding:28px;
    border-radius:25px;
    backdrop-filter:blur(15px);
    transition:.4s;
    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.card:hover{

    transform:translateY(-8px);
    background:var(--rosa);
    box-shadow:0 18px 35px rgba(248,215,218,.5);

}

.card h3{

    color:var(--cafe);
    margin-bottom:12px;
    font-size:22px;

}

.card p{

    margin:0;
    font-size:15px;
    line-height:1.8;

}

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

.btn{

    display:inline-block;
    margin-top:45px;
    padding:18px 45px;
    border-radius:60px;
    text-decoration:none;
    color:white;
    font-weight:600;
    background:linear-gradient(
    45deg,
    var(--cafe),
    var(--cafe-claro)
    );

    transition:.4s;
    box-shadow:0 15px 30px rgba(107,62,38,.25);

}

.btn:hover{

    transform:translateY(-4px) scale(1.03);

}

/* ===== ANIMACION ===== */

@keyframes entrada{

    from{
        opacity:0;
        transform:translateX(50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

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

@media(max-width:1100px){

    .grid{

        grid-template-columns:1fr;

    }

    .slider{

        height:600px;

    }

}

@media(max-width:740px){

    .encabezado h1{

        font-size:42px;

    }

    .info h2{

        font-size:38px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .slider{

        height:500px;

    }
    
    .menu-icon {
    position: absolute;
    padding: 10px;
    bottom: 840px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1;
}

}


@media (max-width: 360px) {
    .menu-icon {
        position: absolute;
        padding: 10px;
        bottom: 670px;
        width: 50px;
        height: 50px;
        cursor: pointer;
        z-index: 1;
    }
    
    .banner {
        position: relative;
        right: 350px;
        width: 190%;
    }
}