/* =============== BASE / GENÉRICO =============== */
/* Variables  */
:root{
  --cdr-orange:#e6543a;
  --cdr-orange-light: #fdefec;
  --cdr-orange-soft:#f0623c;
  --cdr-orange-hard:#cf4a31;
  --cdr-dark:#343a40;
  --cdr-text:#333;
  --cdr-muted:#6c757d;
  --cdr-bdr:#e9ecef;
  --cdr-box-bg: #f3ede4;
  --badge-text: #999;
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --hdr-h: 64px;
}

/* Resets y tipografía */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family: 'Asap', sans-serif;color:var(--cdr-text);background:#fff;line-height:1.45}
a{color:inherit;text-decoration:none}
a:hover{color:var(--cdr-orange)}
img {
  max-width: 100%;
  display: block; /* opcional, pero evita espacios abajo por línea base */
}


.handmade {
  font-family: 'Homemade Apple', cursive;
  font-size: 1.2em; /* opcional */
  letter-spacing: 0.5px; /* opcional */
}

/* top banner */
.top-banner {
  background-color: var(--cdr-orange-light);
  color: #000;
  font-weight: 500;
  height: 40px;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.banner-slider {
  display: flex;
  width: 300%; /* 3 items */
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.banner-item {
  width: 100vw;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  text-align: center;
}

.breadcrumb { font-size: 0.9rem; margin-top: 1rem; }

/* ================== HEADER ================== */
.cdr-header{
  position: sticky; top: 0; z-index: 1030; background:#fff;
  border-bottom:.01px solid transparent; /* evita colapso de márgenes */
}
.cdr-header .container{
  display:flex; align-items:center; flex-wrap:nowrap; gap:.75rem;
  /*padding:.45rem 0; */     /* compacto y consistente */
}
.brand-logo{ height:30px; width:auto; display:block; }
@media (min-width:576px){ .brand-logo{ height:36px; } }
@media (min-width:992px){ .brand-logo{ height:48px; } }


/* Mobile: logo centrado entre hamburguesa e iconos */
@media (max-width: 991.98px) {

  .cdr-header .brand {
    justify-self: center;   /* centra dentro de su columna */
  }

  .cdr-header .icons-group {
    justify-self: end;      /* iconos alineados a la derecha */
    gap: .75rem;
  }

  .cdr-header .btn.icon-btn {
    margin-right: .25rem;   /* pequeño respiro con los demás iconos */
  }
}



/* Buscador (desktop) alineado a la derecha */
.search-desktop{
  flex:0 1 520px; min-width:260px; max-width:520px;
  margin-left:auto;
}
.search-desktop .form-control{ height:calc(1.5em + .5rem + 2px); }

/* Grupo de iconos */
.icons-group{ display:flex; align-items:center; gap:.75rem; flex-wrap:nowrap; }
.icon-link{ position:relative; color:var(--cdr-dark); text-decoration:none; }
.icon-btn{ padding:.375rem .5rem; border:1px solid #dee2e6; border-radius:.5rem; line-height:1; }
.cdr-header .btn:focus{ box-shadow:none; }

/* Badge del carrito: no provoca scroll ni se corta */
.cart-badge{
  position:absolute; top:-20px; right:0px; transform:none;
  min-width:18px; height:18px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.65rem; line-height:1;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.05);
  pointer-events:none;
}
.icons-group, .icon-link{ overflow:visible; }

/* ================== BUSCADOR MÓVIL ================== */
/* Cerrado: sin huecos */
.mobile-search-wrap{ background:#fff; line-height:0; }
.mobile-search-wrap .container{ padding:0 .75rem; } /* respiración lateral */

#mobileSearch:not(.show),
#mobileSearch.collapsing{
  height:0 !important; overflow:hidden !important;
  padding:0 !important; margin:0 !important; border:0 !important;
}

/* Abierto: centrado y sin recortes */
#mobileSearch.show{ width: 100%; line-height:normal; padding:.5rem 0 !important; border-top:1px solid var(--cdr-bdr); }
@media (max-width:991.98px){
  #mobileSearch form{
    display:grid !important;
    grid-template-columns: 1fr 44px;   /* input | botón */
    align-items:center; gap:.5rem; width:100%;
  }
  #mobileSearch .form-control{ min-width:0; width:100%; }
  #mobileSearch .btn{ width:44px; padding:0; margin-left:0 !important; } /* anula .ms-2 */
}

/* Evita salto del primer bloque en móvil */
@media (max-width:991.98px){ main > :first-child{ margin-top:0 !important; } }

/* ================== NAV (línea 2) ================== */
/* Sticky bajo el header; --hdr-h se ajusta por JS (fallback 64px) */
.header-nav{
  position: sticky; top: var(--hdr-h,  - 1px); z-index:1029;
  background:#fff; border-bottom:1px solid #eee;
}
.header-nav .menu-dots{ border-top:2px dotted #aaa; }
.header-nav .nav{ font-weight:700; }
.header-nav .nav-link{ color:#222; padding:.5rem .75rem; }
.header-nav .nav-link:hover{ color:var(--cdr-orange); text-decoration:underline; }

/* Mega menu */
.dropdown-mega{
  position:absolute; left:0; top:100%; width:100%;
  background:#fff; padding:1rem 2rem; box-shadow:0 4px 12px rgba(0,0,0,.1);
  display:none; z-index:1000;
}
.dropdown.position-static:hover > .dropdown-mega{
  display:flex; flex-wrap:nowrap; justify-content:space-between;
}
.dropdown-mega .col-md-2, .dropdown-mega .col-md-4{ padding:0 1rem; border-right:1px solid #ddd; }
.dropdown-mega .col-md-2:last-child, .dropdown-mega .col-md-4:last-child{ border-right:none; }
.dropdown-mega h6{ margin-bottom:1rem; font-size:1rem; font-weight:700; }
.dropdown-mega ul{ list-style:none; padding:0; margin:0; }
.dropdown-mega li{ margin-bottom:.5rem; }
.dropdown-mega a{ color:var(--cdr-dark); font-weight:500; font-size:.95rem; text-decoration:none; }
.dropdown-mega a:hover{ color:var(--cdr-orange); text-decoration:underline; }
.dropdown-mega h6 > a{ color:var(--cdr-dark); text-decoration:none; font-weight:700; display:inline-block; }

.header-nav.no-hover .dropdown-mega{
  pointer-events:none !important;
  opacity:0 !important;
}

/* En móvil ocultamos barra y mega */
@media (max-width:991.98px){
  .header-nav{ display:none !important; }
  .dropdown-mega{ position:static; box-shadow:none; display:none !important; padding:1rem 0; }
}

/* ================== ESTADOS (sombra al hacer stick) ================== */
.cdr-header.is-stuck, .header-nav.is-stuck{ box-shadow:0 6px 14px rgba(0,0,0,.06); }

/* ================== HARD RESET: sin min-height heredados ================== */
.cdr-header, .cdr-header .container, .mobile-search-wrap, .mobile-search-wrap .container, #mobileSearch{
  min-height:0 !important;
}

/* ---- Offcanvas Mobile (look app) ---- */
.offcanvas-cdr{
  --cdr-ink: #222;
  --cdr-muted: #6b7280;
  --cdr-bg: #fff;
  --cdr-soft: #f3ede4; /* tu beige */
  color: var(--cdr-ink);
  font-size: 16px;
}

.offcanvas-cdr .menu-head{
  font-weight: 700;
  color: var(--cdr-muted);
  margin-bottom: .25rem;
}

.offcanvas-cdr .menu-sep{
  margin: .75rem 0;
  opacity: .15;
}

/* Enlaces principales: grandes y tocables */
.offcanvas-cdr .menu-primary .menu-link{
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .25rem;
  color: var(--cdr-ink);
  text-decoration: none;
  border-radius: .5rem;
}
.offcanvas-cdr .menu-primary .menu-link i{
  width: 22px; text-align: center;
}
.offcanvas-cdr .menu-primary .menu-link:hover{
  background: var(--cdr-soft);
  color: var(--cdr-ink);
  text-decoration: none;
}

/* Botón acordeón con chevron animado */
.offcanvas-cdr .acc-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .25rem;
  background: var(--cdr-bg);
  border: 1px solid #eee;
  border-radius: .75rem;
  font-weight: 700;
  color: var(--cdr-ink);
  margin: .35rem 0;
}
.offcanvas-cdr .acc-btn .fa-grid-2,
.offcanvas-cdr .acc-btn .fa-calendar-star,
.offcanvas-cdr .acc-btn .fa-cake-candles{
  width: 22px; text-align: center;
  color: var(--cdr-orange);
}
.offcanvas-cdr .acc-btn .chevron{
  transition: transform .2s ease;
  color: var(--cdr-muted);
}
.offcanvas-cdr .acc-btn[aria-expanded="true"] .chevron{
  transform: rotate(90deg);
  color: var(--cdr-orange);
}

/* Contenido colapsable */
.offcanvas-cdr .acc-list{
  list-style: none; margin: .5rem 0 0; padding-left: .5rem;
  border-left: 3px solid var(--cdr-soft);
}
.offcanvas-cdr .acc-list li{ margin: .15rem 0; }
.offcanvas-cdr .acc-list a{
  display: block;
  padding: .35rem .25rem;
  color: var(--cdr-ink);
  text-decoration: none;
}
.offcanvas-cdr .acc-list a:hover{
  color: var(--cdr-orange);
  text-decoration: underline;
}
.offcanvas-cdr .acc-subtitle{
  font-size: .85rem; font-weight: 800; color: var(--cdr-muted);
  margin-top: .35rem;
}

/* Mejor click-area en toda la Offcanvas */
.offcanvas-cdr a, .offcanvas-cdr button{
  -webkit-tap-highlight-color: transparent;
}

/* Espaciado interior general de la offcanvas */
.offcanvas.offcanvas-start .offcanvas-body{
  padding: 1rem 1rem 1.25rem;
}

.producto-titulo, .producto-precio { text-transform:uppercase; }

/* ==============================
   FLECHAS SWIPER
   ============================== */
.slider-productos .swiper-button-prev,
.slider-productos .swiper-button-next{
  width: 48px; height: 48px; border-radius: 0;
  background-color: var(--cdr-orange-soft);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
}
.slider-productos .swiper-button-prev::after,
.slider-productos .swiper-button-next::after{
  font-size: 16px; font-weight: 700; color: #fff;
}
/* Hover */
.slider-productos .swiper-button-prev:hover,
.slider-productos .swiper-button-next:hover{ background-color: var(--cdr-orange); }
/* Foco accesible */
.slider-productos .swiper-button-prev:focus-visible,
.slider-productos .swiper-button-next:focus-visible{
  outline: 2px solid rgba(0,0,0,.25); outline-offset: 2px;
}
/* Un poco más grandes en pantallas medianas+ */
@media (min-width: 768px){
  .slider-productos .swiper-button-prev,
  .slider-productos .swiper-button-next{
    width: 40px; height: 40px;
  }
  .slider-productos .swiper-button-prev::after,
  .slider-productos .swiper-button-next::after{ font-size: 18px; }
}
/* Ocultar flechas en móviles */
@media (max-width: 767.98px){
  .slider-productos .swiper-button-prev,
  .slider-productos .swiper-button-next{ display: none !important; }
}

/* Botones externos — como cajas normales en la columna */
.slider-productos .productos-prev,
.slider-productos .productos-next{
  position: static; width: 44px; height: 44px; border-radius: 0;
  background: var(--cdr-orange-soft);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
}
.slider-productos .productos-prev::after,
.slider-productos .productos-next::after{
  color:#fff; font-size:18px; font-weight:700;
}
.slider-productos .productos-prev:hover,
.slider-productos .productos-next:hover{ background: var(--cdr-orange); }

/* Ocultar en móvil (refuerzo por si hay cache de CSS) */
@media (max-width: 767.98px){
  .slider-productos .productos-prev,
  .slider-productos .productos-next{ display:none !important; }
}


/* ==============================
   SLIDER PRODUCTOS – ESTILOS
   ============================== */
.slider-productos h2 { font-size: 1.5rem; }
.ver-todos {
  font-size: 0.9rem; font-weight: bold; text-decoration: underline; color: var(--cdr-dark);
}

/* --- Productos --- */
.producto-item { text-align: center; }
.producto-wrapper { position: relative; overflow: hidden; border-radius: .5rem; }
.producto-wrapper img { width: 100%; height: auto; border-radius: 0; }

/* Etiqueta naranja */
.etiqueta{
  position: absolute; top: 0; left: 0;
  background-color: var(--cdr-orange); color: #fff;
  font-size: 0.75rem; padding: 0.1rem 1.3rem; font-weight: bold; z-index: 1;
}

/* Badge */
.badge-cdr{
  background-color: var(--cdr-box-bg); color: var(--badge-text);
  font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 0.375rem;
  display: inline-flex; align-items: center; font-size: 0.775rem; gap: 0.35rem;
}
.badge-cdr i { font-size: 0.8rem; }

/* Slide auto ancho */
.productosSwiper .swiper-slide { width: auto; }

/* Zoom suave */
.producto-img{
  transition: transform .25s ease; transform-origin: center center; display: block;
}
.producto-link:hover .producto-img,
.producto-link:focus .producto-img { transform: scale(1.08); }

/* Textos negros (sobrescribe azul de <a>) */
.producto-link,
.producto-link:visited,
.producto-link:hover,
.producto-link:focus { color: #000; text-decoration: none; }

/* Precio en gris */
.producto-precio { color: #666; }

/* Accesibilidad */
.producto-link { outline: none; }
.producto-link:focus-visible .producto-wrapper{
  box-shadow: 0 0 0 3px rgba(0, 123, 255, .35);
  border-radius: .5rem;
}

.btn-add{
  background:#28a745; color:#fff;
  font-weight:700; text-transform:uppercase;
  border:0; border-radius:.25rem;
  height: 42px;
}
.btn-add:hover,
.btn-add:focus,
.btn-add:active,
.btn-add:disabled,
.btn-add:focus-visible{ background:#218838; color:#fff; }



/* footer */
.btn-cdr { background-color: var(--cdr-orange); border: none; color: white; }
.btn-cdr:hover { background-color: var(--cdr-orange-hard); }
.btn-cdr:focus,
.btn-cdr:focus-visible {
  background-color: var(--cdr-orange) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.15rem rgba(0,0,0,0.2); /* Opcional accesibilidad */
}

#whatsApp {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 1019;
    background-color: #25D366;
    color: #fff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .3s ease, transform .3s ease;
  }
  #whatsApp:hover {
    background-color: #1EBE5D;
    transform: scale(1.1);
  }
  #whatsApp i {
    color: #fff;
  }

label.error {
  color: #dc3545;       /* rojo claro bootstrap */
  font-size: .875rem;   /* tamaño legible */
  margin-top: .25rem;
  display: block;
}
input.error, select.error, textarea.error {
  border-color: #dc3545 !important;
}
.text-naranja {
    color: var(--cdr-orange);
}
.modal-body {
  scroll-behavior: smooth;      /* scroll suave dentro del modal */
}