/* Fuentes de la marca, alojadas en assets/fonts (licencia OFL, ver LICENSE-*.txt) */
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(../assets/fonts/figtree-latin-wght-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/poppins-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../assets/fonts/poppins-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../assets/fonts/poppins-latin-700-normal.woff2) format('woff2');
}

/* ============================================================
   Estilos propios. Tailwind cubre casi todo; aquí solo extras.
   ============================================================ */
html { scroll-behavior: smooth; }
body { font-family: 'Figtree', system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3, .font-display {
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Etiqueta de papel (como las de los productos).
   Usar dentro de un padre con clase "relative"; la posicion se da con clases
   de Tailwind (bottom-3, left-3, etc). */
.tag {
  position: absolute;
  background: #fff;
  color: #7D0304;
  padding: .5rem .9rem .5rem 1.7rem;
  border-radius: .25rem;
  box-shadow: 0 6px 18px rgba(43, 34, 32, .22);
  transform: rotate(-2deg);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.25;
}
.tag::before {            /* agujero de la etiqueta */
  content: "";
  position: absolute; left: .6rem; top: 50%;
  width: .6rem; height: .6rem; margin-top: -.3rem;
  border-radius: 50%;
  background: #FAF2E8;
  box-shadow: inset 0 0 0 1px rgba(184, 137, 46, .7);
}

/* Selector "Come vuoi ordinare?" */
.path-option:has(input:checked) {
  background: rgba(125, 3, 4, .05);
  box-shadow: inset 3px 0 0 #7D0304;
}

:focus-visible { outline: 2px solid #7D0304; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Carrusel (hero): desliza con el dedo/mouse, flechas y puntos */
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; scroll-snap-align: center; }
.carousel-dot { position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; } /* área táctil 24px */
.carousel-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem;
  border-radius: 9999px; background: rgba(125, 3, 4, .25);
  transition: background .2s, width .2s, margin .2s;
}
.carousel-dot[aria-current="true"]::before { background: #7D0304; width: 1.25rem; margin-left: -.625rem; }

/* FAQ: indicador + / − en lugar de la flecha por defecto */
.faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: #7D0304; font-size: 1.25rem; line-height: 1.4; }
.faq-item[open] summary::after { content: "\2212"; }

/* Reseñas: carrusel con scroll-snap (lógica de las flechas en js/main.js > setupReviews) */
.reviews-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem; }
.reviews-track::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 88%; scroll-snap-align: start; }
@media (min-width: 768px) { .review-card { flex-basis: calc(50% - .75rem); } }
[data-reviews-controls][hidden] { display: none; } /* "flex" en el HTML anularía el atributo hidden */

/* Ventana "Il nostro negozio" (<dialog>) */
.store-dialog { max-height: 90vh; overflow: auto; }
.store-dialog::backdrop { background: rgba(43, 34, 32, .6); }

/* Cuenta regresiva del hero */
.countdown-box { display: flex; flex-direction: column; align-items: center; min-width: 4.25rem; padding: .5rem .5rem .4rem; background: #fff; border-radius: .6rem; box-shadow: 0 2px 8px rgba(43, 34, 32, .10); }
.countdown-num { font-size: 1.75rem; line-height: 1.1; font-weight: 700; color: #7D0304; font-variant-numeric: tabular-nums; }
.countdown-label { font-size: .75rem; color: rgba(43, 34, 32, .75); }
[data-countdown][hidden], [data-countdown-done][hidden] { display: none; }
@media (min-width: 640px) { .countdown-box { min-width: 5rem; } .countdown-num { font-size: 2rem; } }

/* Cinta navideña: franja fina que separa secciones (pino / crema / vino) */
.cinta {
  height: 10px;
  background: repeating-linear-gradient(135deg,
    #1E4D36 0 14px, #FAF2E8 14px 20px, #7D0304 20px 34px, #FAF2E8 34px 40px);
}

/* Secciones de fondo verde oscuro: puntos del carrusel y foco en color claro */
.on-dark .carousel-dot::before { background: rgba(250, 242, 232, .4); }
.on-dark .carousel-dot[aria-current="true"]::before { background: #FAF2E8; }
.on-dark :focus-visible { outline-color: #FAF2E8; }

/* Burbuja de WhatsApp: icono fijo + mensaje corto que aparece a los segundos (js/main.js > setupWhatsAppBubble) */
.wa-bubble { position: relative; max-width: 15rem; }
.wa-bubble::after {             /* piquito del globo, apunta al icono */
  content: ""; position: absolute; right: 1.1rem; bottom: -.4rem;
  width: .8rem; height: .8rem; background: #fff; transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(43, 34, 32, .08);
}
.wa-bubble { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.wa-bubble.is-visible { opacity: 1; transform: none; }
[data-wa-bubble][hidden] { display: none; }

/* Componi la tua cesta (js/main.js > setupCustomBasket) */
.basket-cat { border: 1px solid rgba(184, 137, 46, .35); border-radius: 1rem; background: #fff; }
.basket-cat > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 1.05rem;
}
.basket-cat > summary::-webkit-details-marker { display: none; }
.basket-cat > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: #7D0304; }
.basket-cat[open] > summary::after { content: "−"; }
.basket-cat-count:not(:empty) {
  margin-left: auto; min-width: 1.6rem; padding: .1rem .5rem; border-radius: 999px;
  background: #1E4D36; color: #fff; font-size: .8rem; text-align: center;
}
.basket-items { display: grid; gap: .25rem; padding: 0 .75rem 1rem; }
@media (min-width: 640px) { .basket-items { grid-template-columns: 1fr 1fr; } }
.basket-item {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: .6rem;
  cursor: pointer; line-height: 1.3;
}
.basket-item:hover { background: #FAF2E8; }
.basket-item input { width: 1.35rem; height: 1.35rem; flex-shrink: 0; accent-color: #7D0304; cursor: pointer; }
.basket-item:has(input:checked) { background: rgba(125, 3, 4, .06); font-weight: 600; }
.basket-send[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
[data-basket-hint][hidden] { display: none; }