:root {
      --primary-color: #0b0b0b;
      --bg-dark: #202124;
      --overlay-dark: rgba(0, 0, 0, 0.75);
    }

    

    body,
    html {
      margin: 0;
      padding: 0;
      font-family: 'Winco', 'Britannic Bold', fantasy;
      /*background-color: #F3E9DF;*/
      background-color: #F3EBDD;
      scroll-behavior: smooth; 
    }

    /* Navbar styling */
    header { 
      font-family: 'Playfair Display', Georgia, serif;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      justify-content: space-between;
      /*background: var(--overlay-dark);*/
      /*background: #F3EBDD;*/
      background: #89817295;
      /*background: #f3ebdd6d;*/


    }

    .navbar-brand img {
      height: 60px;
      width: auto;
    }

    .nav-link {
      display: inline-block;
      position: relative;
      text-decoration: black;
      color: var(--primary-color) !important;
      font-size: 1.6rem;
      font-weight: bold;
      transition: color 0.3s ease;
    }
    .nav-link:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #C59A45;
      transform: scaleX(0);
      transform-origin: left;
      /*background-color: #C59A45;*/
      padding-bottom: 5px;
      transition: transform 0.3s ease; /* Animación suave */
    }

    /*.nav-link:hover {color: #C59A45 !important;} */

    .nav-link:hover::after,
    .nav-link.active::after{
      transform: scaleX(1);
      border-radius: 0.25%;
    }
    .btn-metodopedido{
        color: white;
        border-color: #C59A45;
    }
    .btn-metodopedido:hover {
        background-color: #C59A45;
        color: white;
        /*transform: scale(1.05);*/
    }

    .navbar-toggler {
      border-color: black;
    }

    .navbar-toggler-icon {
      filter: invert(64%) sepia(38%) saturate(1000%) hue-rotate(310deg) brightness(103%) contrast(101%);
    }

    /* Hero section */
    .hero {
      background-image: linear-gradient(
            rgba(4, 15, 10, 0.58),
            rgba(4, 15, 10, 0.72)
        ),url('../pics/capilla2.png');
      background-size: cover;
      background-position: center;
      height: 100vh;
      display: flex;
      justify-content: start;
      align-items: center;
      /*color: white;*/
       
      overflow: hidden;
    }
    /* ---------------- HERO TEXT ---------------- */

.hero-content {
    min-height: 100vh;

    display: flex;
    align-items: center;

}

.hero-text {
    max-width: 570px;
}

.hero-text h1 {
    font-family: Georgia, serif;

    font-size: clamp(55px, 6vw, 92px);
    line-height: .95;

    margin-bottom: 30px;

    font-weight: 500;
    color: #F6F3E7;

    padding-left: 9%;

}

.hero h1 em { 
  font-style: italic; color: #C59A45; font-weight: 700; 
}


.hero-text p {

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    max-width: 430px;

    font-size: 16px;
    line-height: 1.6;

    color: #b5c4afc9;

    margin-bottom: 35px;

    padding-left: 4%;

}

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

.quality-strip {
  background-color: #000;
}

.cta {
  display: flexbox; padding: .9rem 2rem;
  padding-left: 7%;
  justify-self: calc();
  background: #C59A45; color: var(--primary-fg);
  font-weight: 600; letter-spacing: .04em;
  transition: transform .3s ease, background .3s ease;
  border-radius: 20px;
}
.cta:hover { background: #c59a45a8; ; transform: translateY(-2px); }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.in-view { animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.pre-view { opacity: 0; transform: translateY(28px); }

 /* Sección de contenido*/
    section {
    padding-bottom: 20px;
    padding-top: 40px;    }

    .section-title {
      font-family: 'Winco';
      text-align: center;
      color: var(--primary-color);
      margin-bottom: 3rem;
      font-size: 3rem;
    }

    /* Grid responsivo */
    .contenedor {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .card-top {
      display: grid;
      place-items: center;
      border: none;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
      height: clamp(140px, 18vw, 220px);
      border-radius: 30px;
      background-color: rgb(1, 1, 1);
    }

    .card-top > .d-flex,
    .card-top-inner {
      width: 100%;
      height: 100%;
    }

    .card-top-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(110px, 0.85fr) minmax(0, 1fr);
      align-items: center;
      height: 100%;
    }

    .card-top-grid > [class*="col"] {
      width: 100%;
      max-width: none;
      flex: none;
    }

    .card-top-side {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      height: 100%;
    }

    .card-top-text {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      color: bisque;
      font-size: clamp(18px, 3vw, 40px);
      line-height: 1.05;
      text-align: center;
    }

    .img-proper,
    .image-proper {
      width: min(100%, 350px);
      max-height: clamp(110px, 16vw, 200px);
      opacity: 0.5;
      object-fit: contain;
    }

    .card {
      /*background: #8B8962;   */
                   
      border: none;
      
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
    }
    .card-container{
      
      background: rgba(255, 255, 255, 0.6);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(7.2px);
-webkit-backdrop-filter: blur(7.2px);
border: 1px solid rgba(255, 255, 255, 0.35);
    }

    /* Glassmorphism Effect */

    .glass-effect {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.1);
    }

    .card:hover {
      transform: translateY(-10px);
      /*background-color: #FF7B93;*/
    }

    .card img {
      width: 500px;
      height: 400px;
      object-fit: cover;
    }

  /* COntenido footer de Inicio Hero */

  .hero-stats {
    position: absolute;

    bottom: 35px;
    left: 48%;

    display: grid;
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    gap: clamp(14px, 10px, 60px);
    width: min(58vw, 680px);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    text-align: center;
    opacity: 0.65;
}

.stat-icon {
    width: clamp(34px, 4.2vw, 64px);
    height: clamp(34px, 4.2vw, 64px);
    margin-bottom: 8px;
    object-fit: contain;
}

.stat span {
    font-size: 15px;
    line-height: 1.25;
    color: rgba(246, 243, 231, 0.671);
}

#ads .ad-title h5 {
        text-transform: uppercase;
        font-size: 18px;
        color: white;
    }

    /* Order Button */
    .btn-pide {
      background-color: var(--primary-color);
      color: white;
      font-size: 1.5rem;
      padding: 1rem 3rem;
      border-radius: 50px;
      border: none;
      transition: all 0.3s;
      margin: 2rem auto;
      display: block;
      
      font-family: 'Playfair Display';
    }

    .btn-pide:hover {
      font-family: 'Playfair Display';
      background-color: #C59A45;
      color: black;
      transform: scale(1.05);
    }
    .btn-navegacion{
      color: #FF7B93;
      transition: all 0.3s;
    }
    .btn-navegacion:hover{
    
      transform: scale(1.05);
    }
    .btn-pide2 {
        background-color: var(--primary-color);
        color: #C59A45; 
        border: 3.5px solid #C59A45;
        font-size: 1rem;
        text-align: center;
        width: 150px;
        padding: 0.5rem 0.5rem;
        border-radius: 50px;
        border: none;
        transition: all 0.3s;
        
        }
    .btn-pide2:hover {
        background-color: #C59A45;
        color: black;
        transform: scale(1.05);
        }
    /* Catalog Section */
    #menu {
      background-color: #000;
      color: white;
    }

    .carousel-item img {
      border-radius: 15px;
    }

    /* Sección Tarjetas*/

    #cuerpo{
      align-items: center;
      display: flex;
      height: 50vh;
      justify-content: center;
      margin: 0px;
      overflow: hidden;

    }

    #tarjetas{
      display: flex;
      gap: 12px;
      overflow: auto;
      max-width: 916px;
      width: calc(100% - 20px);
    }

    .tarjeta{
      background-color: rgba(28, 25, 25, 0.3);
      height: 260px;
      border-radius: 30px;
      width: 33%;
      float: left;
    }
    .tarjeta-vacia{
      justify-content: center;
      height: 260px;
      border-radius: 30px;
      width: 33%;
      float: left;
    }

    

    /* Footer */
    #bottom {
      background: var(--bg-dark);
      color: var(--primary-color);
      padding: 2rem 1rem;
      background: #15211b;
      min-height: 35vh;
      font-style: 'Britannic Bold', fantasy;
      display: grid;
      grid-template-columns: repeat(1, 1fr); /* 3 columnas en escritorio */
      gap: 1rem;
      justify-items: center;
      color: #C59A45;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 3rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-section h2 {
      margin-bottom: 1.5rem;
      font-size: 1.8rem;
    }
    .bg-rosa{
      background-color: #C59A45;
      color : white;
      width: 80px;
      
      font: menu;
    }

    .bg-card{
      background-color: transparent;
      color : rgb(8, 8, 8);
      border: 3px solid #030303;

      width: 80px;
      
      font: menu;
    }

    .letras{
        font:large;
    }
    .btn-rosa{
      background-color: #C59A45;
      color : white;
      padding: 0.375rem 3rem;
    }
    .btn-rosa:hover{
      color: black;
      transform: scale(1.05);
    }
    .btnform{
        font-size: medium;
        color: #C59A45;

    }
   

    .btn-border-rosa {
      background-color: transparent;
      color: #C59A45;
      padding: .25rem .25rem;
      border: 2px solid #C59A45;
      transition: all 0.3s;
    }
    .footer-link {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--primary-color);
      text-decoration: none;
      margin-bottom: 1rem;
      transition: color 0.3s;
    }

    .footer-link:hover {
      color: white;
    }

    .footer-link svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
    }

    /* Offcanvas & Modals */
    .offcanvas-body img {
      max-width: 100%;
      height: auto;
    }
        /* Ingredient Chips Styling */
    .ingredient-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .contenedor-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .ingredient-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #C59A45;
      color: #C59A45;
      background: transparent;
      font-size: 0.85rem;
      cursor: pointer;
      user-select: contain;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .gramaje-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #C59A45;
      color: #C59A45;
      background: transparent;
      font-size: 0.85rem;
      cursor: pointer;
      user-select: contain;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .mini-card {
      display: inline-flex;
      align-items:last baseline;
      justify-content:last baseline;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #000000;
      color: #000000;
      background: transparent;
      font-size: 0.85rem;
      cursor: pointer;
      user-select: contain;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .ingredient-chip.active {
      background-color: var(--primary-color);
      color: white;
    }

    .ingredient-chip:hover {
  background: rgba(255,123,147,0.15);
}

.gramaje-chip.active {
      background-color: var(--primary-color);
      color: white;
    }

    .gramaje-chip:hover {
  background: rgba(255,123,147,0.15);
}


    .ingredient-group {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .ingredient-group.active {
      background:   rgba(255, 123, 147, 0.1);
      border: 1px solid #000000;
      border-radius: 20px;
    }

    .ingredient-group.active .ingredient-chip {
      background-color: #C59A45;
      color: white;
      border: none;
    }

    .ingredient-group.active .gramaje-chip {
      background-color: #C59A45;
      color: white;
      border: none;
    }

    .gramaje-group {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .gramaje-group.active {
      background:   rgba(255, 123, 147, 0.1);
      border: 1px solid #000000;
      border-radius: 20px;
    }

    .gramaje-group.active .ingredient-chip {
      background-color: #C59A45;
      color: white;
      border: none;
    }

    .gramaje-group.active .gramaje-chip {
      background-color: #C59A45;
      color: white;
      border: none;
    }

    .chip-ctrl {
      display: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #C59A45;
      color: white;
      border: none;
      font-size: 1rem;
      line-height: 1;
      padding: 0;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .ingredient-group.active .chip-ctrl {
      display: flex;
    }

    .gramaje-group.active .chip-ctrl {
      display: flex;
    }

    .chip-ctrl:hover {
      background: #000000;
      color: white;
    }

    .gramaje-btn {
      display: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #C59A45;
      color: white;
      border: none;
      font-size: 1rem;
      line-height: 1;
      padding: 0;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .ingredient-group.active .gramaje-btn {
      display: flex;
    }

    .gramaje-group.active .gramaje-btn {
      display: flex;
    }

    .gramaje-btn:hover {
      background: #000000;
      color: white;
    }

    .carne-ctrl {
      display: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #FF7B93;
      color: white;
      border: none;
      font-size: 1rem;
      line-height: 1;
      padding: 0;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .ingredient-group.active .carne-ctrl {
      display: flex;
    }
    .carne-ctrl:hover {
      background: #e06a80;
    }

    .nav-button{
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      text-align: center;
      justify-self: flex-end;
    }

    .qty-input::-webkit-inner-spin-button,
    .qty-input::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .item-extras::-webkit-inner-spin-button,
    .item-extras::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    .total-pedido {
      position: fixed; /* Se queda fijo en la pantalla */ 
      bottom: 0; /* Pegado al borde inferior */ 
      left: 0; /* Alineado al borde izquierdo */
      width: 100%; /* Ocupa todo el ancho */ 
      background: #333; /* Color de fondo */
      z-index: 1000; /* Asegura que esté por encima de otros elementos */
    }

    .precio-aderezo
      {
        position: fixed;
        left: 0;
        right: 0;
        background-color: #FF7B93;
        color : white;
        width: 80px;
        font: menu;

      }
    
      .contenido-adicional{
        padding-bottom: 100px;
      }
    .form-control::placeholder {
      color: white;
      opacity: 1;
    }

    .sub-title {
      padding-left: 120px;
    }
    

    /* 📱 Responsivo para pantallas pequeñas */
    @media (max-width: 768px) {
      /* Sección Hero Contenido Inicio */
       .hero-header {
        padding: 25px;
    }


    .sub-title {
      padding-left: 25px;
    }

    .card-top {
      height: clamp(110px, 28vw, 150px);
      border-radius: 22px;
    }

    .card-top-grid {
      grid-template-columns: minmax(0, 1fr) minmax(84px, 0.9fr) minmax(0, 1fr);
    }

    .card-top-text {
      font-size: clamp(15px, 4.2vw, 24px);
    }

    .img-proper {
      max-height: clamp(88px, 24vw, 130px);
    }

    

    .hero-content {
        padding: 120px 30px 180px;
        align-items: center;
    }

    .hero-text h1 {
        font-family: "Playfair Display", serif;
        font-size: 55px;
    }

    .hero-text p {
        font-size: 14px;
    }

    .hero-stats {
        left: 10px;
        right: 10px;
        
        bottom: 50px;

        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        width: auto;
    }

    .stat {
        min-width: auto;
    }

    .stat-icon {
        width: clamp(228px, 9vw, 42px);
        height: clamp(28px, 9vw, 42px);
        margin-bottom: 6px;
        
    }

    .stat span {
        font-size: 9px;
    }
 

        .hero h1 {
        font-size: 2.5rem;
      }
      .qty-input {
        width: 60px;
      }
      
      .nav-button{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-self: flex-end;
      }
      .nav-button .btn {
        flex: 1 1 45%;
      }

      .section-title {
        font-size: 3rem;
      }

      .btn-pide {
        width: 90%;
        font-size: 1.2rem;
      }
      .contenedor {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
      }
      #btnResp{
        padding: 0rem 8rem ;
      }
      
      .presentacionmenu-container {
    grid-template-columns: 1fr; /* se apilan en una sola columna */
    }
    .cardPromo {
      background: rgb(93, 87, 51);
     
      border: none;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
    }

    .cardPromo:hover {
      transform: translateY(-10px);
      /*background-color: #FF7B93;*/
    }
    

    .btn-border-rosa {
      padding: .25rem .25rem;
    }
    #bottom {
        display: block;
        /*margin-left: 30px;*/
      }
      .btn-navegacion{
        margin-left: 20px;
      }
    }

    @media (max-width: 480px) {
      .contenedor {
        grid-template-columns: 1fr; /* 1 columna en pantallas muy pequeñas */
      }

    

      
      .qty-input {
        padding: .25rem .25rem;
      }
      .btn-navegacion{
        margin-left: 20px;
      }
      .nav-button .btn {
        flex: 1 1 45%;
      }
      #btnResp{
        padding: 0rem 4rem ;
      }
      .btn-border-rosa {
      padding: .25rem .25rem;
    }
      #bottom {
        display:block;
        margin-left: 0;
      }
      
    }
    
     @font-face {
      font-family:'Winco';
      src: url('../fonts/winco-black.woff') format('woff');
      font-weight: bold;
      font-style: normal;
      }


      /* =========================================================
   CORRECCIONES RESPONSIVAS
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* Evita overflow por imágenes */



/* Contenedores */
.container,
.container-fluid {
    max-width: 100%;
}



/* Navbar */
.navbar {
    width: 100%;
    max-width: 100%;
    height: 110px;
}


/* Logo */
.navbar-brand img {
    max-width: 110px;
    height: auto;
}


/* Tarjetas */
.card img {
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* Hero */
.hero,
.hero-content {
    width: 100%;
    max-width: 100%;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 1024px) {

  #navbarNav{
  background-color: #7c796b70;
}

    .hero-text {
        max-width: 100%;
    }

    .hero-text h1 {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .hero-stats {
        left: 10px;
        right: 10px;
        width: auto;
    }

    .stat-icon {
        width: clamp(28px, 9vw, 42px);
        height: clamp(28px, 9vw, 42px);
    }

}


/* =========================================================
   TELÉFONOS
   ========================================================= */

@media (max-width: 480px) {

    .flex-container {
        width: 100%;
        max-width: 100%;
    }

    .navbar-brand img {
        width: 130px;
        max-width: 130px;
    }

    .hero-content {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }



}



/* =========================================
   CARRUSEL VERTICAL HISTÓRICAS
   ========================================= */

.carousel-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* Carrusel vertical */

.vertical-carousel {
    width: 100%;
    max-width: 650px;
    height: 650px;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;

    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.vertical-carousel::-webkit-scrollbar {
    display: none;
}


/* Slides */

.vertical-slide {
    width: 100%;
    min-height: 100%;

    scroll-snap-align: center;
}


/* =========================================
   BLOSSOM DOTS
   ========================================= */

#dots {
    width: 100%;

    display: flex;
    flex-direction: row;

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

    gap: 10px;

    margin-top: 15px;
}