/* ═══════════════════════════════════════════════════════════════════════════
   BRESCA CAKE — HOJA DE ESTILOS GLOBAL
   Versión 2.0 · brescacake.cl
   Usada por: todas las páginas HTML del sitio
   Dependencias: TailwindCSS CDN (cargado en cada HTML), Google Fonts
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. VARIABLES CSS (Design Tokens)
─────────────────────────────────────────────────────────────────────────── */
:root {
  --color-primary:            #b70051;
  --color-primary-hover:      #C2185B;
  --color-cream-bg:           #FFF9F5;
  --color-petal-pink:         #FFD5EF;
  --color-on-surface:         #1b1c1c;
  --color-on-surface-variant: #5b3f45;
  --color-surface-low:        #f5f3f3;
  --color-surface-container:  #f0eded;
  --color-outline-variant:    #e4bdc3;
  --color-secondary-container:#fed4ee;
  --color-whatsapp:           #25D366;
  --color-whatsapp-hover:     #1ebe5d;

  --font-display: 'Playfair Display', serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  --radius-btn:   9999px;
  --radius-card:  16px;
  --radius-input: 12px;
  --radius-sm:    10px;

  --shadow-card:  0 8px 40px rgba(183, 0, 81, 0.06);
  --shadow-btn:   0 8px 24px rgba(183, 0, 81, 0.22);
}


/* ───────────────────────────────────────────────────────────────────────────
   2. GOOGLE MATERIAL ICONS
─────────────────────────────────────────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}


/* ───────────────────────────────────────────────────────────────────────────
   3. TIPOGRAFÍA — Clases de texto reutilizables
─────────────────────────────────────────────────────────────────────────── */
.text-display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-headline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
}

.text-subhead {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
}

.text-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}

.text-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}


/* ───────────────────────────────────────────────────────────────────────────
   4. BOTONES
─────────────────────────────────────────────────────────────────────────── */

/* Botón primario (frambuesa) */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}

/* Botón outline (borde frambuesa) */
.btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-btn);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}
.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Botón WhatsApp */
.btn-whatsapp {
  background: var(--color-whatsapp);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  text-decoration: none;
}
.btn-whatsapp:hover {
  background: var(--color-whatsapp-hover);
  transform: translateY(-1px);
}


/* ───────────────────────────────────────────────────────────────────────────
   5. CARDS
─────────────────────────────────────────────────────────────────────────── */
.card-glow {
  box-shadow: var(--shadow-card);
}


/* ───────────────────────────────────────────────────────────────────────────
   6. NAVEGACIÓN — Menú móvil
─────────────────────────────────────────────────────────────────────────── */
/* Las reglas antiguas de esta sección apuntaban a #mobile-menu, pero el menú móvil
   real siempre se llamó #bresca-mobile-menu: nunca llegaron a aplicar. Los estilos
   del navbar viven ahora en la sección 17, al final de este archivo. */


/* ───────────────────────────────────────────────────────────────────────────
   7. ANIMACIONES DE SCROLL (fade-up)
─────────────────────────────────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ───────────────────────────────────────────────────────────────────────────
   8. HERO
─────────────────────────────────────────────────────────────────────────── */
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(183, 0, 81, 0.15) 100%
  );
}


/* ───────────────────────────────────────────────────────────────────────────
   9. TICKER ANIMADO (inicio)
─────────────────────────────────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  background: var(--color-primary);
}
.ticker {
  display: flex;
  animation: ticker 25s linear infinite;
  width: max-content;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ───────────────────────────────────────────────────────────────────────────
   10. FILTROS DE CATÁLOGO (02_tortas)
─────────────────────────────────────────────────────────────────────────── */
.filter-btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-btn);
  border: 2px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s;
}
.filter-btn.active,
.filter-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}


/* ───────────────────────────────────────────────────────────────────────────
   11. CONFIGURADOR DE PRODUCTO (03_producto)
─────────────────────────────────────────────────────────────────────────── */

/* Select personalizado */
.config-select {
  width: 100%;
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-input);
  padding: 0.85rem 2.5rem 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-on-surface);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b70051' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.config-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(183, 0, 81, 0.08);
}

/* Tarjetas de add-on (cupcakes) */
.addon-card {
  border: 2px solid var(--color-outline-variant);
  border-radius: 14px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
  background: #fff;
  position: relative;
}
.addon-card:hover {
  border-color: var(--color-primary);
  background: var(--color-cream-bg);
}
.addon-card.selected {
  border-color: var(--color-primary);
  background: var(--color-cream-bg);
}
.addon-card.selected .addon-check {
  opacity: 1;
}

.addon-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Precio animado */
.price-display {
  transition: all 0.3s ease;
}
.price-flash {
  animation: flash 0.35s ease;
}
@keyframes flash {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); color: var(--color-primary-hover); }
  100% { transform: scale(1); }
}

/* Galería de miniaturas */
.thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.thumb.active {
  border-color: var(--color-primary);
}

/* Acordeón de detalles */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.accordion-content.open {
  max-height: 400px;
}


/* ───────────────────────────────────────────────────────────────────────────
   12. FORMULARIOS — Contacto y Checkout
─────────────────────────────────────────────────────────────────────────── */
.form-label {
  font-family: var(--font-body);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  display: block;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-input);
  padding: 0.82rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-on-surface);
  background: #fff;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(183, 0, 81, 0.07);
}

.form-select {
  width: 100%;
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-input);
  padding: 0.82rem 2.5rem 0.82rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-on-surface);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b70051' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(183, 0, 81, 0.07);
}


/* ───────────────────────────────────────────────────────────────────────────
   13. CHECKOUT — Pasos, métodos de pago, entrega
─────────────────────────────────────────────────────────────────────────── */

/* Círculos de progreso */
.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.step-active .step-circle,
.step-done .step-circle {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Línea conectora entre pasos */
.step-line {
  flex: 1;
  height: 2px;
  background: var(--color-outline-variant);
  transition: background 0.3s;
}
.step-line.done {
  background: var(--color-primary);
}

/* Tarjetas de método de pago */
.payment-card {
  border: 2px solid var(--color-outline-variant);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
  background: #fff;
  position: relative;
}
.payment-card:hover {
  border-color: var(--color-primary);
  background: var(--color-cream-bg);
}
.payment-card.selected {
  border-color: var(--color-primary);
  background: var(--color-cream-bg);
}
.payment-card.selected .pay-check {
  opacity: 1;
}

.pay-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Tabs de entrega (Delivery / Retiro) */
.delivery-tab {
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.delivery-tab.active {
  background: var(--color-primary);
  color: #fff;
}
.delivery-tab:not(.active) {
  background: #f5f3f3;
  color: var(--color-on-surface-variant);
}

/* Visibilidad de pasos */
#step-1,
#step-2,
#step-3 {
  display: none;
}
#step-1.active,
#step-2.active,
#step-3.active {
  display: block;
}

/* Pantalla de confirmación */
#success-screen {
  display: none;
}
#success-screen.show {
  display: flex;
}


/* ───────────────────────────────────────────────────────────────────────────
   14. CONTACTO — Estados de formulario
─────────────────────────────────────────────────────────────────────────── */
#success-msg {
  display: none;
}
#success-msg.show {
  display: flex;
}


/* ───────────────────────────────────────────────────────────────────────────
   15. RESPONSIVE — Media Queries Globales
   Breakpoints:
     Mobile:  < 640px
     Tablet:  640px – 1023px
     Desktop: ≥ 1024px
─────────────────────────────────────────────────────────────────────────── */

/* ── MOBILE (< 640px) ──────────────────────────────────────────────────── */
@media (max-width: 639px) {

  /* Tipografía escalada para móvil */
  .text-display {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    line-height: 1.15;
  }
  .text-headline {
    font-size: clamp(1.3rem, 5vw, 1.6rem);
    line-height: 1.3;
  }
  .text-subhead {
    font-size: 1.1rem;
  }

  /* Hero: altura cómoda en móvil */
  .hero-min-h {
    min-height: 85vh;
  }

  /* Nav: logo más pequeño */
  .nav-logo {
    font-size: 1.3rem;
  }

  /* Botones: padding compacto en móvil */
  .btn-primary,
  .btn-outline,
  .btn-whatsapp {
    padding: 0.8rem 1.4rem;
    font-size: 0.72rem;
  }

  /* Cards: sin elevación exagerada en móvil (ahorra espacio) */
  .card-glow {
    box-shadow: 0 4px 20px rgba(183, 0, 81, 0.06);
  }

  /* Configurador: selects full-width cómodos */
  .config-select {
    font-size: 0.85rem;
    padding: 0.75rem 2.2rem 0.75rem 0.85rem;
  }

  /* Add-on cards: en móvil apilan en 1 columna */
  .addon-grid-mobile {
    grid-template-columns: 1fr;
  }

  /* Thumbnails de galería: más pequeños */
  .thumb {
    width: 56px;
    height: 56px;
  }

  /* Price display: texto más pequeño */
  .price-display {
    font-size: 2.2rem;
  }

  /* Accordion: padding más compacto */
  .accordion-content.open {
    max-height: 600px;
  }

  /* Form inputs en móvil */
  .form-input,
  .form-select {
    font-size: 0.875rem;
    padding: 0.75rem 0.9rem;
  }

  /* Checkout steps: texto oculto en pasos */
  .step-label-mobile {
    display: none;
  }

  /* Checkout: summary se mueve arriba del form en móvil */
  .checkout-summary-mobile-top {
    order: -1;
  }

  /* Footer: texto más pequeño */
  .footer-brand {
    font-size: 1.5rem;
  }

  /* Ticker más rápido en móvil */
  .ticker {
    animation-duration: 18s;
  }

  /* Payment cards: layout compacto */
  .payment-card {
    padding: 12px;
  }

  /* Delivery tabs */
  .delivery-tab {
    padding: 7px 12px;
    font-size: 0.68rem;
  }

  /* Stat numbers en Sobre Nosotros */
  .stat-number {
    font-size: 2.2rem;
  }
}

/* ── TABLET (640px – 1023px) ───────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

  .text-display {
    font-size: clamp(2.2rem, 5vw, 3rem);
  }

  .text-headline {
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  }

  /* Thumbnails medianos */
  .thumb {
    width: 64px;
    height: 64px;
  }

  /* Checkout: resumen debajo en tablet también */
  .step-label-mobile {
    display: none;
  }

  .stat-number {
    font-size: 2.6rem;
  }
}

/* ── DESKTOP (≥ 1024px) ────────────────────────────────────────────────── */
@media (min-width: 1024px) {

  /* Thumbnails tamaño completo */
  .thumb {
    width: 72px;
    height: 72px;
  }

  /* Steps: mostrar labels */
  .step-label-mobile {
    display: block;
  }

  .stat-number {
    font-size: 3rem;
  }
}

/* ── SAFE TOUCH TARGETS (todos los dispositivos táctiles) ─────────────── */
@media (hover: none) and (pointer: coarse) {

  /* Botones y links: mínimo 44px de área táctil (WCAG 2.5.5) */
  .btn-primary,
  .btn-outline,
  .btn-whatsapp {
    min-height: 44px;
  }

  /* Nav links */
  nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Botones del carrito (+ / -) */
  button[onclick*="updateQty"] {
    min-width: 36px;
    min-height: 36px;
  }

  /* Filtros */
  .filter-btn {
    min-height: 40px;
  }

  /* Add-on cards: área táctil mínima */
  .addon-card {
    padding: 14px;
  }

  /* Payment cards */
  .payment-card {
    padding: 16px;
  }
}

/* ── OVERFLOW Y SCROLL HORIZONTAL (prevención global) ────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevenir que imágenes rompan el layout */
img {
  max-width: 100%;
  height: auto;
}

/* ── MEJORAS DE LEGIBILIDAD EN PANTALLAS PEQUEÑAS ─────────────────────── */
@media (max-width: 480px) {
  /* Hero: texto más compacto en teléfonos muy pequeños */
  .text-display {
    font-size: 1.75rem;
  }

  .text-headline {
    font-size: 1.25rem;
  }

  /* Reducir padding de secciones */
  section, main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Cards con menos sombra */
  .card-glow {
    box-shadow: 0 2px 12px rgba(183, 0, 81, 0.05);
  }

  /* Price: tamaño razonable */
  .price-display {
    font-size: 1.9rem;
  }

  /* Summary total en checkout */
  #sum-total, #summary-total {
    font-size: 1.5rem;
  }
}

/* ── PRINT (básico) ───────────────────────────────────────────────────── */
@media print {
  nav, footer, .btn-primary, .btn-whatsapp, .btn-outline,
  #bresca-cart-panel, #cart-overlay, #bresca-toast {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   16. RESPONSIVE — Reglas específicas por página
─────────────────────────────────────────────────────────────────────────── */

/* ── NAV: altura y espaciado en móvil ─────────────────────────────────── */
@media (max-width: 639px) {
  nav .max-w-site {
    height: 64px;  /* más compacto en móvil (era 80px / h-20) */
  }
  nav .font-playfair.text-2xl {
    font-size: 1.2rem;
  }
}

/* ── HERO: texto legible en móvil ─────────────────────────────────────── */
@media (max-width: 639px) {
  header.hero-min-h {
    min-height: 100svh; /* safe-area viewport height */
    padding-top: 2rem;
  }
  header.hero-min-h .max-w-site {
    padding-bottom: 4rem;
  }
}

/* ── BENTO GRID: tarjetas horizontales en móvil ───────────────────────── */
@media (max-width: 767px) {
  /* Las tarjetas horizontales del best sellers se adaptan */
  .md\:col-span-7,
  .md\:col-span-5 {
    grid-column: span 1;
  }
  /* Tarjetas horizontales (flex row) → stack vertical en móvil */
  .group.cursor-pointer.bg-white.rounded-2xl.overflow-hidden.card-glow.flex {
    flex-direction: column;
  }
  .group.cursor-pointer.bg-white.rounded-2xl.overflow-hidden.card-glow.flex .w-36,
  .group.cursor-pointer.bg-white.rounded-2xl.overflow-hidden.card-glow.flex .w-28 {
    width: 100%;
    height: 160px;
  }
}

/* ── CATÁLOGO: filtros colapsables ────────────────────────────────────── */
#filter-content {
  transition: none;
}
@media (max-width: 767px) {
  #filter-content.hidden {
    display: none;
  }
  #filter-content:not(.hidden) {
    display: block;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e4bdc3;
    margin-bottom: 1rem;
  }
  /* Sidebar sticky solo en desktop */
  .sticky.top-24 {
    position: static;
  }
}

/* ── PRODUCTO: galería de thumbs en móvil ─────────────────────────────── */
@media (max-width: 639px) {
  #gallery-thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  #gallery-thumbs::-webkit-scrollbar {
    display: none;
  }
  #gallery-thumbs img {
    flex-shrink: 0;
  }
  /* Configurador: labels más compactos */
  .config-select {
    font-size: 0.82rem;
  }
  /* Price box: compacto */
  .bg-surface-container-low.rounded-2xl.p-5 {
    padding: 1rem;
  }
}

/* ── CHECKOUT: summary siempre visible en la parte superior móvil ─────── */
@media (max-width: 1023px) {
  /* Summary box: no sticky en móvil/tablet */
  .lg\:sticky {
    position: static !important;
  }
  /* Resumen compacto en móvil */
  #summary-items {
    max-height: 200px;
  }
}

/* ── CHECKOUT: pasos en móvil ─────────────────────────────────────────── */
@media (max-width: 479px) {
  /* Step circles más pequeños */
  .step-circle {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }
  /* Line más delgada */
  .step-line {
    height: 1.5px;
  }
  /* Checkout card: padding reducido */
  #step-1 .bg-white,
  #step-2 .bg-white,
  #step-3 .bg-white {
    padding: 1.25rem;
  }
}

/* ── CONTACTO: form responsive ────────────────────────────────────────── */
@media (max-width: 639px) {
  /* Textarea más alta en móvil para facilitar escritura */
  #f-desc {
    rows: 3;
    min-height: 80px;
  }
  /* aside de contacto: stack */
  .md\:col-span-2 {
    width: 100%;
  }
}

/* ── FOOTER: responsive ───────────────────────────────────────────────── */
@media (max-width: 639px) {
  footer .grid-cols-1 {
    text-align: center;
  }
  footer ul {
    text-align: left;
  }
}

/* ── TICKER: sin corte en móvil ───────────────────────────────────────── */
@media (max-width: 639px) {
  .ticker-wrap {
    padding: 8px 0;
  }
  .ticker span {
    font-size: 0.65rem;
    padding: 0 1.2rem;
  }
}

/* ── TARJETAS DE CATEGORÍAS: grid 2×2 en móvil ────────────────────────── */
@media (max-width: 639px) {
  /* Category grid aspect ratio menor en móvil */
  .grid.grid-cols-2.md\:grid-cols-4 .aspect-square {
    aspect-ratio: 3/2;
  }
}

/* ── FAQ CONTACTO: legible en móvil ───────────────────────────────────── */
@media (max-width: 639px) {
  .faq-trigger {
    padding: 1rem;
    font-size: 0.88rem;
  }
  .faq-body p {
    padding: 0 1rem 1rem;
    font-size: 0.85rem;
  }
}

/* ── PANEL DEL CARRITO: full-width en móvil ───────────────────────────── */
@media (max-width: 479px) {
  #bresca-cart-panel {
    width: 100vw !important;
    min-width: unset !important;
  }
}

/* ── TOAST: centrado en móvil ─────────────────────────────────────────── */
@media (max-width: 639px) {
  #bresca-toast {
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* ── SMOOTH SCROLL GLOBAL ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ── FOCUS VISIBLE (accesibilidad teclado/táctil) ─────────────────────── */
:focus-visible {
  outline: 2px solid #b70051;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── SELECCIÓN DE TEXTO ────────────────────────────────────────────────── */
::selection {
  background: #FFD5EF;
  color: #b70051;
}



/* ───────────────────────────────────────────────────────────────────────────
   17. NAVBAR GLOBAL
   Estilos de template-parts/site-navbar.php.

   Escrito en CSS puro a propósito (sin clases de Tailwind): el navbar ahora
   aparece TAMBIÉN en páginas donde Tailwind no se carga — carrito, checkout,
   mi cuenta y los archivos nativos de WooCommerce.

   Breakpoint: 1140px. Bajo ese ancho se usa el menú hamburguesa; sobre él, el
   menú horizontal con paneles desplegables.

   Estaba en 992px, pero al sumar "Delivery Map" el menú quedó con 8 ítems y a
   992px ocupaba 622px de los 622px disponibles: holgura CERO. Una categoría
   nueva lo habría desbordado encima de los íconos. A 1080px hay margen para un
   ítem más, y bajo ese ancho sale la hamburguesa, que no tiene límite de ancho.
   Se subió otra vez de 1080 a 1140 al renombrar "Delivery Map" como "Envíos y
   Retiros": la etiqueta más larga bajó la holgura de 48px a 24px.
─────────────────────────────────────────────────────────────────────────── */

/* box-sizing propio del navbar.
   Antes lo aportaba el preflight de Tailwind, pero Tailwind no se carga en todas
   las paginas (carrito, checkout, archivos de WooCommerce). Sin esto, el boton
   "Pedir Ahora" del menu movil sumaba su padding al 100% de ancho y se salia de
   la pantalla, dejando scroll horizontal. */
.bresca-nav,
.bresca-nav *,
.bresca-nav *::before,
.bresca-nav *::after {
  box-sizing: border-box;
}

/* Texto solo para lectores de pantalla.
   La define tambien el tema Astra, pero el navbar no puede depender de eso:
   en single-product.php y en algunas paginas el CSS de Astra no llega a tiempo,
   y el texto ("Mostrar subcategorias de...") aparecia escrito en pantalla. */
.bresca-nav .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bresca-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 249, 245, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(228, 189, 195, 0.35);
  font-family: var(--font-body);
}

.bresca-nav__bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── LOGO ─────────────────────────────────────────────────────────────────
   En móvil el logo queda EXACTAMENTE al centro gracias a que los dos bloques
   laterales (.bresca-nav__side) comparten flex: 1 1 0. Al repartirse el espacio
   sobrante en partes iguales, el elemento del medio cae en el centro sin
   importar cuántos íconos haya a cada lado — y sin position:absolute, que es
   frágil frente al CSS de Astra y de los plugins.
─────────────────────────────────────────────────────────────────────────── */
.bresca-nav__logo {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.bresca-nav__logo:hover { color: var(--color-primary-hover); }

.bresca-nav__side {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.bresca-nav__side--right { justify-content: flex-end; }

/* ── ÍCONOS Y BOTONES DE ACCIÓN ───────────────────────────────────────── */
.bresca-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.bresca-nav__icon:hover {
  color: var(--color-primary);
  background: rgba(255, 213, 239, 0.45);
}

.bresca-nav__cta { padding: 0.65rem 1.4rem; font-size: 0.72rem; }

/* Instagram: solo en escritorio, por decisión del cliente. */
.bresca-nav__ig { display: none; }

/* Hamburguesa: se muestra el icono de menu cuando esta cerrado y una X cuando
   esta abierto. Sin esta pista visual no se nota que el mismo boton cierra. */
.bresca-nav__burger-close { display: none; }
.bresca-nav__burger[aria-expanded="true"] .bresca-nav__burger-open { display: none; }
.bresca-nav__burger[aria-expanded="true"] .bresca-nav__burger-close { display: block; }

/* ── MENÚ DE ESCRITORIO ───────────────────────────────────────────────── */
.bresca-nav__menu {
  display: none; /* se activa a partir de 1140px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.bresca-nav__item {
  position: relative;
  /* align-self: stretch hace que el <li> mida toda la altura del bar. Sin esto,
     el <li> medía solo el alto del texto y el panel (top: 100%) empezaba dentro
     del navbar en lugar de debajo. De paso, el área que abre el panel al pasar
     el mouse pasa a ser toda la franja, no solo la línea de texto. */
  align-self: stretch;
  display: flex;
  align-items: center;
}

.bresca-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.bresca-nav__link:hover { color: var(--color-primary); }
.bresca-nav__link.is-active {
  color: var(--color-primary);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.bresca-nav__chevron { transition: transform 0.2s; flex: 0 0 auto; }
[aria-expanded="true"] > .bresca-nav__chevron { transform: rotate(180deg); }

/* ── PANEL DESPLEGABLE (escritorio) ───────────────────────────────────── */
.bresca-nav__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 50px rgba(183, 0, 81, 0.14);
  z-index: 510;
}
.bresca-nav__panel[hidden] { display: none; }

/* Puente invisible entre el botón y el panel: sin esto, el panel se cierra
   cuando el cursor cruza el margen de 0.5rem que los separa. */
.bresca-nav__panel::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.bresca-nav__panel-cols {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.bresca-nav__col { min-width: 150px; }

.bresca-nav__col-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-on-surface);
  text-decoration: none;
  white-space: nowrap;
}
.bresca-nav__col-title:hover { color: var(--color-primary); }

.bresca-nav__col-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bresca-nav__col-list a {
  font-size: 0.85rem;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  white-space: nowrap;
}
.bresca-nav__col-list a:hover { color: var(--color-primary); }

.bresca-nav__panel-all {
  display: block;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-outline-variant);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
}
.bresca-nav__panel-all:hover { color: var(--color-primary-hover); }

/* ── MENÚ MÓVIL (acordeón) ────────────────────────────────────────────── */
.bresca-nav__mobile {
  /* display:block explicito. El JS llego a ponerle la clase .flex de Tailwind
     como "compatibilidad" con el navbar viejo, y en las paginas donde Tailwind
     esta cargado eso lo volvia una fila: la lista se apretaba a la izquierda y
     el boton "Pedir Ahora" se estiraba como un ovalo gigante. */
  display: block;
  background: var(--color-cream-bg);
  border-top: 1px solid rgba(228, 189, 195, 0.35);
  padding: 0.5rem 1rem 1.5rem;
  max-height: calc(100vh - 64px);
  max-height: calc(100svh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bresca-nav__mobile[hidden] { display: none; }

.bresca-nav__m-list,
.bresca-nav__m-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bresca-nav__m-sub[hidden] { display: none; }

/* Cada nivel se indenta y se marca con una guía vertical, para que se note
   a qué categoría pertenece cada subcategoría. */
.bresca-nav__m-sub {
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-outline-variant);
}

.bresca-nav__m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(228, 189, 195, 0.3);
}
.bresca-nav__m-sub .bresca-nav__m-row { border-bottom: none; }

.bresca-nav__m-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 48px; /* área táctil cómoda (WCAG 2.5.5) */
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  text-decoration: none;
}
.bresca-nav__m-link:hover,
.bresca-nav__m-link:focus { color: var(--color-primary); }

/* Las subcategorías se ven más livianas que sus padres. */
.bresca-nav__m-sub .bresca-nav__m-link {
  min-height: 44px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* Zona táctil separada para la flecha: tocar el nombre navega, tocar la
   flecha despliega. Si fuera un solo botón, no se podría entrar al padre. */
.bresca-nav__m-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-on-surface-variant);
  cursor: pointer;
}
.bresca-nav__m-toggle:hover { color: var(--color-primary); }

.bresca-nav__m-cta {
  display: flex;
  width: 100%;
  margin-top: 1rem;
  padding: 0.9rem;
}

/* Evita que la página de atrás haga scroll mientras el menú está abierto. */
html.bresca-menu-open { overflow: hidden; }

/* Botón rosado flotante del carrito (plugin ModernCart).
   Está fijo arriba a la izquierda con z-index 9999, o sea por encima del navbar.
   Con el menú abierto tapaba "Inicio" y parte de "Cakes", y se comía los clics.
   Solo lo ocultamos mientras el menú está abierto; el resto del tiempo queda
   exactamente donde el cliente lo dejó.
   Se listan también los selectores de otros plugins de carrito flotante por si
   algún día se cambia de plugin. */
html.bresca-menu-open #moderncart-floating-cart,
html.bresca-menu-open .moderncart-toggle-slide-out,
html.bresca-menu-open .wcf-cart-icon,
html.bresca-menu-open .xoo-wsc-cart {
  display: none !important;
}

/* ── BUSCADOR DEL NAVBAR (FiboSearch) ─────────────────────────────────────
   La lupa vive en el bloque derecho del bar; el panel va con position:absolute
   colgando del <nav>, o sea FUERA del flujo. Eso importa: si el buscador
   ocupara lugar dentro del bar, en movil desbalancearia los dos lados y el logo
   dejaria de estar centrado.
─────────────────────────────────────────────────────────────────────────── */

/* La lupa se convierte en X cuando el panel esta abierto, igual que la hamburguesa. */
.bresca-nav__search-close { display: none; }
.bresca-nav__search[aria-expanded="true"] .bresca-nav__search-open { display: none; }
.bresca-nav__search[aria-expanded="true"] .bresca-nav__search-close { display: block; }
.bresca-nav__search[aria-expanded="true"] { color: var(--color-primary); }

.bresca-nav__search-panel {
  position: absolute;
  top: 100%;
  right: 1rem;
  left: auto;
  width: min(420px, calc(100vw - 2rem));
  /* Por encima de los paneles de categorias (510) para que, si por alguna razon
     quedan los dos abiertos, el buscador mande. */
  z-index: 520;
  margin-top: 0.5rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 50px rgba(183, 0, 81, 0.16);
  /* visible y no hidden: la lista de sugerencias de FiboSearch se dibuja debajo
     del input y tiene que poder salirse del panel. */
  overflow: visible;
}
.bresca-nav__search-panel[hidden] { display: none; }

@media (max-width: 639px) {
  /* En pantallas angostas el panel ocupa el ancho util completo, con un margen
     parejo a los dos lados. */
  .bresca-nav__search-panel {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    padding: 0.85rem;
  }
}

/* ── Ajustes sobre el HTML que imprime FiboSearch ─────────────────────────
   Se tocan solo dentro del panel, con selectores acotados: fuera de acá el
   plugin sigue mandando en su propia apariencia, y sus ajustes en
   WooCommerce → FiboSearch se siguen respetando.
─────────────────────────────────────────────────────────────────────────── */
.bresca-nav__search-panel .dgwt-wcas-search-wrapp {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* El input ocupa todo el panel. FiboSearch ya hace esto en su propio CSS; lo
   repetimos por si su hoja llega tarde o algun tema la pisa, para que el
   buscador no quede como una cajita angosta dentro de un panel ancho. */
.bresca-nav__search-panel .dgwt-wcas-search-form,
.bresca-nav__search-panel .dgwt-wcas-sf-wrapp {
  width: 100%;
}

/* El input hereda la tipografia del sitio; el plugin trae la del tema. */
.bresca-nav__search-panel .dgwt-wcas-search-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

/* El foco del navegador cae sobre el input, que ya trae su propio borde de
   foco del plugin; evitamos el doble contorno. */
.bresca-nav__search-panel .dgwt-wcas-search-input:focus {
  outline-offset: 0;
}

/* ── ESCRITORIO (>= 1140px) ───────────────────────────────────────────── */
@media (min-width: 1140px) {
  .bresca-nav__bar {
    height: 80px;
    padding: 0 3rem;
    gap: 1.5rem;
  }

  /* El bloque izquierdo solo contiene la hamburguesa, que en escritorio no va. */
  .bresca-nav__side--left { display: none; }
  .bresca-nav__ig { display: inline-flex; }

  .bresca-nav__logo {
    order: 1;
    font-size: 1.5rem;
  }

  .bresca-nav__menu {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    /* El <ul> tiene que medir toda la altura del bar para que sus <li> tambien
       la midan; de eso depende que el panel (top: 100%) caiga justo debajo del
       navbar y no 24px mas arriba, encima del propio bar. */
    align-self: stretch;
  }

  .bresca-nav__side--right {
    order: 3;
    flex: 0 0 auto;
    gap: 0.5rem;
  }

  .bresca-nav__burger { display: none; }
  .bresca-nav__mobile { display: none !important; }
  html.bresca-menu-open { overflow: auto; }
}

/* Bajo 1140px el CTA "Pedir Ahora" del bar se oculta: ya esta dentro del
   menu desplegable, y en el bar dejaria el logo sin espacio para centrarse. */
@media (max-width: 1139px) {
  .bresca-nav__cta { display: none; }
}

/* Menu apretado. El rango llega hasta 1300px a proposito: antes terminaba en
   1180 y justo encima de ese ancho se apagaban los estilos compactos, con lo
   que la holgura CAIA de 88px a 31px. El punto mas apretado no era el minimo
   del rango sino el salto al salir de el. */
@media (min-width: 1140px) and (max-width: 1360px) {
  .bresca-nav__bar { padding: 0 1.5rem; gap: 1rem; }
  .bresca-nav__menu { gap: 1rem; }
  .bresca-nav__link { font-size: 0.7rem; letter-spacing: 0.06em; }
}


/* ───────────────────────────────────────────────────────────────────────────
   18. FOOTER GLOBAL
   Estilos de template-parts/site-footer.php.

   Igual que el navbar: CSS puro, sin clases de Tailwind, porque el footer ahora
   aparece también en la página de producto (que antes no tenía footer) y en las
   páginas de WooCommerce, donde Tailwind no se carga.
─────────────────────────────────────────────────────────────────────────── */

.bresca-footer,
.bresca-footer *,
.bresca-footer *::before,
.bresca-footer *::after {
  box-sizing: border-box;
}

.bresca-footer {
  background: var(--color-on-surface);
  color: #fff;
  font-family: var(--font-body);
  padding: 3.5rem 0 2rem;
  margin-top: 4rem;
}

.bresca-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── COLUMNAS ─────────────────────────────────────────────────────────────
   auto-fit + minmax deja que el footer decida solo cuántas columnas caben:
   4 en escritorio, 2 en tablet, 1 en móvil, sin escribir un breakpoint por
   cada caso. La columna de marca ocupa el doble, como en el footer original.
─────────────────────────────────────────────────────────────────────────── */
.bresca-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.bresca-footer__col--brand { grid-column: span 1; }

/* Cuatro columnas (marca + Compras + Informacion del sitio + Redes sociales) solo
   cuando hay ancho real para ellas. Bajo 1000px vuelve al auto-fit de arriba, que
   las reparte en dos filas o en una sola columna segun quepan. */
@media (min-width: 1000px) {
  .bresca-footer__cols {
    grid-template-columns: 1.7fr 1.2fr 1fr 1fr;
    gap: 2.25rem;
    align-items: start;
  }
  .bresca-footer__col--brand { grid-column: auto; }
}

/* Enlace cuya pagina todavia no esta publicada: se ve, pero apagado y sin enlace.
   Preferimos esto a enlazar a un 404 mientras el cliente escribe las paginas de
   terminos, medios de pago, etc. Cuando publique una pagina con ese slug, el
   item pasa a ser un enlace normal sin tocar el codigo. */
.bresca-footer__list li.is-pendiente span {
  color: rgba(255, 255, 255, 0.32);
  cursor: default;
}

.bresca-footer__logo {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-style: italic;
  color: var(--color-petal-pink);
  margin: 0 0 0.85rem;
}

.bresca-footer__tagline {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1.4rem;
  max-width: 34ch;
}

.bresca-footer__ig {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-petal-pink);
  text-decoration: none;
  transition: color 0.2s;
}
.bresca-footer__ig:hover { color: #fff; }

.bresca-footer__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-petal-pink);
  margin: 0 0 1.1rem;
}

.bresca-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bresca-footer__list a,
.bresca-footer__list span {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.bresca-footer__list a:hover { color: #fff; }

/* Las subcategorías se ven como subordinadas de su padre, igual que en el
   acordeón del menú móvil. */
.bresca-footer__list li.is-child {
  padding-left: 0.85rem;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
}
.bresca-footer__list li.is-child a { font-size: 0.85rem; }

/* ── COLUMNA DE CONTACTO (con íconos) ─────────────────────────────────── */
.bresca-footer__list--icons li,
.bresca-footer__list--icons li > a {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.bresca-footer__list--icons li > a { text-decoration: none; }

.bresca-footer__list--icons svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-petal-pink);
}

.bresca-footer__wa span { transition: color 0.2s; }
.bresca-footer__wa:hover span { color: #fff; }

/* ── FRANJA INFERIOR ──────────────────────────────────────────────────── */
.bresca-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
}

.bresca-footer__copy {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

.bresca-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}
.bresca-footer__legal a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.bresca-footer__legal a:hover {
  color: #fff;
  text-decoration: underline;
}

.bresca-footer__made {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ── MÓVIL ────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .bresca-footer { padding: 2.75rem 0 1.75rem; margin-top: 2.5rem; }
  .bresca-footer__cols { gap: 2rem; margin-bottom: 2.25rem; }
  .bresca-footer__tagline { max-width: none; }

  /* Apilado y centrado: en una columna angosta, tres bloques alineados a los
     bordes se ven desordenados. */
  .bresca-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .bresca-footer__legal { justify-content: center; }
}

/* Áreas táctiles cómodas en pantallas sin mouse (WCAG 2.5.5). */
@media (hover: none) and (pointer: coarse) {
  .bresca-footer__list a,
  .bresca-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .bresca-footer__list { gap: 0.25rem; }
}


/* ───────────────────────────────────────────────────────────────────────────
   19. MAPA DE ZONAS DE DESPACHO
   Estilos de template-parts/mapa-envios.php (shortcode [bresca_mapa_envios]).

   CSS puro, sin Tailwind, por la misma razón que el navbar y el footer: la
   página del mapa puede vivir en cualquier plantilla.
─────────────────────────────────────────────────────────────────────────── */

.bresca-envios,
.bresca-envios *,
.bresca-envios *::before,
.bresca-envios *::after {
  box-sizing: border-box;
}

.bresca-envios {
  font-family: var(--font-body);
  color: var(--color-on-surface);
  max-width: 1100px;
  margin: 0 auto;
}

/* ── BUSCADOR DE COMUNA ───────────────────────────────────────────────── */
.bresca-envios__buscador { margin-bottom: 1.25rem; }

.bresca-envios__buscador-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.bresca-envios__select {
  width: 100%;
  max-width: 380px;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-on-surface);
  background: #fff;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-input);
  cursor: pointer;
}
.bresca-envios__select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.bresca-envios__resultado {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--color-on-surface-variant);
  /* Reservamos el alto aunque esté vacío, para que el mapa no salte hacia
     abajo la primera vez que alguien elige una comuna. */
  min-height: 1.4em;
}
.bresca-envios__resultado.is-visible {
  padding: 0.7rem 0.9rem;
  background: var(--color-secondary-container);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
}

/* ── MAPA + LEYENDA ───────────────────────────────────────────────────── */
.bresca-envios__mapa-wrap {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-card);
}

.bresca-envios__mapa {
  /* Leaflet exige un alto explícito en el contenedor: sin esto el mapa se
     inicializa con altura 0 y no se ve nada. */
  height: 560px;
  width: 100%;
  background: var(--color-surface-low);
}

.bresca-envios__cargando,
.bresca-envios__error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 2rem;
  text-align: center;
  color: var(--color-on-surface-variant);
  font-size: 0.95rem;
}

.bresca-envios__leyenda {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 500; /* sobre las teselas de Leaflet, bajo sus popups (700) */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  box-shadow: 0 6px 20px rgba(183, 0, 81, 0.12);
  max-width: 260px;
}

.bresca-envios__leyenda-titulo {
  margin: 0 0 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.bresca-envios__leyenda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bresca-envios__leyenda-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.bresca-envios__swatch {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 4px;
  border: 1px solid;
}

.bresca-envios__leyenda-texto { display: block; line-height: 1.35; }
.bresca-envios__leyenda-texto strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-on-surface);
}
.bresca-envios__leyenda-texto em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--color-on-surface-variant);
}

.bresca-envios__leyenda-pie {
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-outline-variant);
  font-size: 0.72rem;
  color: var(--color-on-surface-variant);
}

/* El divIcon del marcador trae un fondo y un borde blancos por defecto en
   Leaflet; los quitamos para que se vea solo el SVG del pin. */
.bresca-envios__pin {
  background: none;
  border: none;
}

/* Tooltip de Leaflet con la tipografía del sitio. */
.leaflet-tooltip.bresca-envios__tooltip {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ── LISTADO DE COMUNAS (respaldo si el mapa no carga, y para buscadores) ── */
.bresca-envios__listas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.bresca-envios__lista {
  padding: 1.1rem 1.25rem;
  background: var(--color-surface-low);
  border-radius: var(--radius-card);
}

.bresca-envios__lista-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-on-surface);
}
.bresca-envios__lista-conteo {
  font-weight: 500;
  color: var(--color-on-surface-variant);
}

/* Cada comuna con su valor de despacho al lado. Antes era un parrafo con los
   nombres separados por puntos; ahora que cada una tiene precio propio hace falta
   la pareja nombre-valor, alineada para poder compararlas de un vistazo. */
.bresca-envios__lista-comunas {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bresca-envios__lista-comunas li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--color-outline-variant);
  font-size: 0.88rem;
  color: var(--color-on-surface-variant);
}
.bresca-envios__lista-comunas li:last-child { border-bottom: none; }
.bresca-envios__lista-comunas li span:first-child { flex: 1 1 auto; }

.bresca-envios__lista-precio {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}

/* ── INFORMACION DE RETIRO Y DE ENTREGA ───────────────────────────────────
   Los dos bloques del final de la pagina. Antes de esto habia un recuadro
   suelto con el aviso de tarifas justo bajo el mapa; ese texto se movio al
   bloque de entrega, porque el cliente pidio incluirlo ahi y habria quedado
   dos veces en la misma pagina.
─────────────────────────────────────────────────────────────────────────── */
.bresca-envios__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.bresca-envios__bloque {
  padding: 1.5rem 1.6rem;
  background: #fff;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.bresca-envios__bloque-titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.bresca-envios__bloque-titulo svg { flex: 0 0 auto; }

.bresca-envios__bloque-intro,
.bresca-envios__bloque-texto {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}
.bresca-envios__bloque-intro a,
.bresca-envios__bloque-texto a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}

/* Rotulo de cada dato: "Direccion de recogida", "Horarios de entrega". */
.bresca-envios__etiqueta {
  margin: 1.25rem 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-on-surface);
}

.bresca-envios__dato {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-on-surface);
}

.bresca-envios__maps {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.bresca-envios__maps:hover { text-decoration: underline; }

/* Horarios: dia a la izquierda, hora a la derecha, con una guia punteada al
   medio para que se lean en pareja aunque los nombres midan distinto. */
.bresca-envios__horarios {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bresca-envios__horarios li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--color-outline-variant);
  font-size: 0.9rem;
  color: var(--color-on-surface-variant);
}
.bresca-envios__horarios li:last-child { border-bottom: none; }
.bresca-envios__horarios li span:first-child { flex: 1 1 auto; }
.bresca-envios__horarios li span:last-child {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .bresca-envios__info { gap: 1rem; margin-top: 1.5rem; }
  .bresca-envios__bloque { padding: 1.25rem 1.15rem; }
}

/* ── MÓVIL ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .bresca-envios__mapa { height: 62vh; min-height: 380px; }

  /* En móvil la leyenda flotante taparía media pantalla, así que se saca del
     mapa y se pone debajo, ocupando todo el ancho. */
  .bresca-envios__leyenda {
    position: static;
    max-width: none;
    border: none;
    border-top: 1px solid var(--color-outline-variant);
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }
  .bresca-envios__leyenda-lista { flex-direction: row; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   20. RESUMEN DEL PEDIDO EN EL CHECKOUT (CartFlows, plantilla Instant Checkout)

   El problema: cada producto ocupaba 452px de alto en una columna de 264px, con
   el precio debajo de los datos y todo centrado. Dos causas, ambas de CSS ajeno:

   1. CartFlows convierte cada fila en  display:flex; flex-direction:column,
      así que la celda del precio caía DEBAJO de la del nombre en vez de al lado,
      y la fila usaba 264px de los 496px disponibles.

   2. Hay un CSS personalizado en el sitio con

          .cart_item dl.variation { display:flex !important; flex-direction:column !important; }

      que apila cada etiqueta y cada valor en su propia línea. Ese !important es
      el motivo de los !important de acá: se sobrescribe con más especificidad.
      Si algún día se borra esa regla (suele estar en Apariencia → Personalizar →
      CSS adicional), se pueden quitar los de esta sección.

   Resultado: el resumen pasó de 1140px de alto a ~550px con dos productos.
─────────────────────────────────────────────────────────────────────────── */

body .wcf-embed-checkout-form table.shop_table { width: 100%; }
body .wcf-embed-checkout-form table.shop_table tbody { display: block; width: 100%; }

/* La fila vuelve a ser horizontal: producto a la izquierda, precio a la derecha. */
body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
}

body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item td.product-name {
  display: block;
  flex: 1 1 auto;
  width: auto;
  text-align: left;
  padding: 0 !important;
}

body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item td.product-total {
  display: block;
  flex: 0 0 auto;
  width: auto;
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  padding: 0 !important;
}

/* Miniatura y nombre en una sola línea. */
body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item .wcf-product-image {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  text-align: left;
  margin: 0;
}
body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item .wcf-product-thumbnail {
  flex: 0 0 auto;
}
body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item .wcf-product-name {
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

/* Las opciones elegidas, en dos columnas: etiqueta y valor en la MISMA línea.
   El margen izquierdo las alinea con el nombre del producto, no con la miniatura. */
body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item dl.variation {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  text-align: left;
  margin: 10px 0 0 80px !important;
  font-size: 12.5px;
  line-height: 1.45;
}
body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item dl.variation dt {
  float: none;
  display: block;
  margin: 0;
  padding: 0;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.75;
}
body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item dl.variation dd {
  margin: 0;
  padding: 0;
}
body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item dl.variation dd p {
  margin: 0;
}

/* En pantallas angostas no hay ancho para dos columnas: etiqueta arriba, valor
   abajo, y sin la sangría que las alineaba con el nombre. */
@media (max-width: 600px) {
  body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item dl.variation {
    grid-template-columns: 1fr;
    margin-left: 0 !important;
  }
  body .wcf-embed-checkout-form.wcf-embed-checkout-form-instant-checkout table.shop_table tbody tr.cart_item dl.variation dt {
    margin-top: 4px;
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   21. CARRUSEL DE INSTAGRAM (Smash Balloon gratuito)

   El plugin gratuito solo dibuja una grilla: #sbi_images es un display:grid con
   grid-template-columns: repeat(N, 1fr). El carrusel es de la versión Pro.

   Acá esa MISMA grilla se convierte en un carril horizontal. El movimiento
   continuo —y la duplicación de fotos que lo vuelve infinito— los pone
   js/bresca-instagram.js, al mismo ritmo que la barra rosada del inicio.

   No hay flechas ni puntos: el carrusel nunca se detiene ni llega a un final,
   así que no hay nada que señalar. Se puede arrastrar con el dedo igual.

   Especificidad: el plugin usa dos IDs (#sb_instagram #sbi_images), así que acá
   se repiten esos dos IDs más la clase .bresca-ig. Gana sin !important, salvo
   donde hay que pelear contra estilos en línea (ver la altura fija más abajo).
─────────────────────────────────────────────────────────────────────────── */

.bresca-ig {
  /* Cuántas fotos se ven a la vez.
     El shortcode escribe --bresca-ig-cols-xl en el style= del contenedor, y un
     estilo en línea le gana a cualquier media query. Por eso ese valor es solo
     el de escritorio y las pantallas chicas pisan --bresca-ig-cols, que es otra
     variable: así el atributo columnas="6" sigue mandando en el escritorio sin
     dejar seis fotos de 50px en un celular. */
  --bresca-ig-cols: var(--bresca-ig-cols-xl, 4);
  --bresca-ig-gap: 12px;

  position: relative;
  font-family: var(--font-body);
  margin: 0 auto;
  text-align: left;      /* la sección del Home centra todo; el carril no */
}

.bresca-ig__marco {
  position: relative;
}

/* El feed ocupa el ancho disponible y NADA de alto de más.
   Los !important son contra estilos en línea que escribe el propio plugin:
   trae height y padding-bottom desde el ajuste "Feed Height" del panel, y eso
   dejaba ~270px en blanco debajo de las fotos. En un carrusel de una sola fila
   el alto lo tienen que decidir las fotos, no una cifra fija. */
.bresca-ig #sb_instagram {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Encabezado del plugin (foto de perfil + bio) y pie ("Cargar más" / "Seguir"):
   la sección del sitio ya tiene su propio título y su botón "Ver @bresca.cake",
   así que repetirlos ensucia. Para recuperarlos, borra este bloque. */
.bresca-ig .sb_instagram_header,
.bresca-ig #sb_instagram #sbi_load {
  display: none !important;
}

/* ── El carril ────────────────────────────────────────────────────────────
   De grilla a fila. Sigue siendo una zona desplazable de verdad —por eso el
   dedo y el trackpad funcionan sin código—, pero sin scroll-snap: engancharía
   las fotos y frenaría el movimiento continuo. */
.bresca-ig #sb_instagram #sbi_images {
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap;
  gap: var(--bresca-ig-gap);
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;       /* el desplazamiento suave pelearía con la animación */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge viejo */
}

/* La barra de scroll se esconde: el carrusel se mueve solo. */
.bresca-ig #sb_instagram #sbi_images::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Cada foto: ancho fijo calculado a partir de cuántas se quieren ver. */
.bresca-ig #sb_instagram #sbi_images .sbi_item {
  flex: 0 0 calc(
    (100% - (var(--bresca-ig-cols) - 1) * var(--bresca-ig-gap)) / var(--bresca-ig-cols)
  );
  border-radius: var(--radius-card);
  overflow: hidden;
}

.bresca-ig #sb_instagram .sbi_photo_wrap,
.bresca-ig #sb_instagram .sbi_photo {
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* El plugin le pone al <img> una altura en línea igual a su ancho (cuadrado).
   Acá solo se agrega el acercamiento al pasar el mouse, como en las tarjetas
   de producto del sitio. */
.bresca-ig #sb_instagram .sbi_photo img {
  display: block;
  width: 100%;
  transition: transform 0.55s ease;
}

.bresca-ig #sb_instagram .sbi_item:hover .sbi_photo img {
  transform: scale(1.07);
}

/* ── Responsive ───────────────────────────────────────────────────────────
   En celular se deja media foto asomando: se entiende de inmediato que la fila
   sigue hacia el lado. */
@media (max-width: 1024px) {
  .bresca-ig { --bresca-ig-cols: 3; }
}

@media (max-width: 720px) {
  .bresca-ig {
    --bresca-ig-cols: 2.25;
    --bresca-ig-gap: 10px;
  }
}

@media (max-width: 420px) {
  .bresca-ig { --bresca-ig-cols: 1.6; }
}

/* Quien pidió menos movimiento no recibe ni el acercamiento de las fotos ni el
   desplazamiento automático (eso último se apaga desde el JS): le queda un
   carrusel común, que se mueve arrastrando. */
@media (prefers-reduced-motion: reduce) {
  .bresca-ig #sb_instagram .sbi_photo img { transition: none; }
  .bresca-ig #sb_instagram .sbi_item:hover .sbi_photo img { transform: none; }
}


/* ───────────────────────────────────────────────────────────────────────────
   22. PÁGINA DE PRODUCTO: DESCRIPCIÓN + PREGUNTAS FRECUENTES

   Debajo de la galería y del configurador, en dos columnas: la descripción del
   producto a la izquierda y las preguntas frecuentes a la derecha, igual que en
   amysbakehouse.co.uk. El contenido de cada sección se edita en
   inc/bresca-producto-faq.php.

   Las secciones son <details>/<summary> nativos: se abren y cierran sin
   JavaScript, funcionan con teclado y los lectores de pantalla ya los conocen.
   El acordeón anterior de esta página dependía de JS y de un max-height fijo
   que cortaba el texto largo.
─────────────────────────────────────────────────────────────────────────── */

.bresca-producto__abajo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .bresca-producto__abajo {
    /* La descripción manda; las preguntas van en una columna más angosta y fija,
       que es lo que las hace legibles: líneas cortas y títulos que se barren de
       una pasada. minmax(0,…) evita que un texto largo sin espacios estire la
       columna más allá de la pantalla. */
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.bresca-producto__titulo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 1rem;
}

.bresca-producto__texto {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
}
.bresca-producto__texto p { margin: 0 0 1rem; }
.bresca-producto__texto p:last-child { margin-bottom: 0; }
.bresca-producto__texto ul,
.bresca-producto__texto ol { margin: 0 0 1rem 1.2rem; }
.bresca-producto__texto img { max-width: 100%; height: auto; border-radius: var(--radius-card); }

/* ── Preguntas frecuentes ─────────────────────────────────────────────── */
.bresca-faq {
  font-family: var(--font-body);
}

.bresca-faq__titulo-bloque {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 1rem;
}

.bresca-faq__item {
  border-top: 1px solid var(--color-outline-variant);
}
.bresca-faq__item:last-child {
  border-bottom: 1px solid var(--color-outline-variant);
}

.bresca-faq__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;

  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface);
  cursor: pointer;
  list-style: none;          /* fuera el triangulito del navegador */
  transition: color 0.2s ease;
}
/* Safari usa un pseudo-elemento propio para ese triangulito. */
.bresca-faq__cabecera::-webkit-details-marker { display: none; }

.bresca-faq__cabecera:hover { color: var(--color-primary); }

.bresca-faq__item summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.bresca-faq__flecha {
  flex: 0 0 auto;
  color: var(--color-primary);
  transition: transform 0.25s ease;
}
.bresca-faq__item[open] .bresca-faq__flecha {
  transform: rotate(180deg);
}

.bresca-faq__cuerpo {
  padding: 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-on-surface-variant);
}
.bresca-faq__cuerpo p { margin: 0 0 0.75rem; }
.bresca-faq__cuerpo p:last-child { margin-bottom: 0; }
.bresca-faq__cuerpo a { color: var(--color-primary); text-decoration: underline; }

.bresca-faq__horarios {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}
.bresca-faq__horarios li { margin-bottom: 0.15rem; }

.bresca-faq__destacado {
  font-weight: 700;
}

/* Secciones cuyo texto todavía no está escrito. El aviso se ve distinto del
   contenido real para que no se confunda con información de verdad. */
.bresca-faq__pendiente {
  font-style: italic;
  opacity: 0.75;
}


/* ───────────────────────────────────────────────────────────────────────────
   23. PRODUCTOS RELACIONADOS (final de la página de producto)

   Las tarjetas son las mismas de la tienda —vienen con sus clases de Tailwind—,
   así que acá solo va el envoltorio: el título y la grilla.
─────────────────────────────────────────────────────────────────────────── */

.bresca-relacionados {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-outline-variant);
  font-family: var(--font-body);
}

.bresca-relacionados__titulo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 1.5rem;
}

.bresca-relacionados__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .bresca-relacionados__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .bresca-relacionados__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

/* Las tarjetas traen una animación de entrada desde la tienda (.fade-up). Acá
   llegan ya con la clase .visible, así que se ven de inmediato; esto es por si
   alguna vez se imprime sin ella. */
.bresca-relacionados .product-card { opacity: 1; transform: none; }


/* ───────────────────────────────────────────────────────────────────────────
   24. CAMPO "FECHA DE ENTREGA" DEL CHECKOUT

   Es el campo del plugin Order Delivery Date (Lite). Venía viéndose apagado
   —fondo transparente sobre el rosa de la página, y cursor de texto— mientras
   que el resto de los campos del checkout son blancos. Se ve en el sitio:
   #billing_phone tiene fondo rgb(255,255,255) y #e_deliverydate, rgba(0,0,0,0).

   El estilo en línea que lo causaba se quita desde PHP (ver
   bresca_delivery_limpiar_estilo_campo, en inc/bresca-delivery.php); acá queda
   el aspecto: blanco como los demás, y con la manito, porque al hacer clic se
   abre un calendario.
─────────────────────────────────────────────────────────────────────────── */

#e_deliverydate {
  /* El !important es por si una actualización del plugin vuelve a escribir su
     "background:transparent" en línea: así el blanco igual gana. */
  background-color: #fff !important;
  cursor: pointer;
}

#e_deliverydate:hover {
  border-color: var(--color-primary);
}

#e_deliverydate:focus,
#e_deliverydate:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

/* La etiqueta de arriba también invita a hacer clic: está asociada al campo con
   for="e_deliverydate", así que al tocarla se abre el mismo calendario. */
label[for="e_deliverydate"] {
  cursor: pointer;
}


/* ───────────────────────────────────────────────────────────────────────────
   25. CHECKOUT: QUE LOS DOS BLOQUES DE DIRECCIÓN SEAN IGUALES

   El bloque de "enviar a otra dirección" mostraba el país y el bloque principal
   no. Medido en el checkout del sitio: #billing_country_field sale oculto y
   #shipping_country_field, visible.

   El campo no se puede borrar —WooCommerce necesita el país para calcular el
   envío— así que se esconde, que es exactamente lo que ya pasaba con el otro.
   Se vende solo en la Región Metropolitana, así que no hay nada que elegir.
─────────────────────────────────────────────────────────────────────────── */

#billing_country_field,
#shipping_country_field {
  display: none !important;
}