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

html { height: 100%; background: var(--bn-bg); }
body {
  /* min-height (NO height:100%): el body debe crecer con el contenido. Con
     height:100% el body queda del alto del viewport y el position:sticky del
     header (acotado por su bloque contenedor = body) se despegaba al scrollear
     más de un viewport — los botones del header "desaparecían". */
  min-height: 100%;
  background: var(--bn-bg);
  color: var(--bn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* NOTA: NO poner overflow-x: clip/hidden aquí — en Safari rompe el
     position:sticky del header (los botones desaparecían al scrollear).
     El desbordamiento horizontal se contiene en origen (overscroll-behavior
     en carruseles + max-width en medios). */
}

/* Ningún medio puede exceder su contenedor */
img, video { max-width: 100%; }

/* Carruseles horizontales: el swipe no encadena al viewport (anti-shift iOS) */
.chip-row,
.catalog-tabs,
.wine-grid.view-carousel,
.related-strip,
.checkbox-group {
  overscroll-behavior-x: contain;
}

a { color: var(--bn-accent); text-decoration: none; }
a:hover { color: var(--bn-accent-bright); }

button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  /* Remove iOS gray flash on tap; we'll use :active for explicit feedback. */
  -webkit-tap-highlight-color: transparent;
  /* Disable double-tap-to-zoom on touch devices for buttons. */
  touch-action: manipulation;
}
/* === Estandarización cross-device (iOS Safari / Android WebView) ===
   Las tarjetas/slots NO son <button>: sin touch-action sufren double-tap-zoom y
   delay de 300ms. Los backdrops necesitan cursor:pointer para que iOS sintetice
   el click de tap-para-cerrar. Momentum scroll para inercia en iOS<13. */
.wine-card, .cava-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.modal-overlay, .filters-modal-overlay { cursor: pointer; }
.modal-panel { cursor: default; }
.range-input, .range-dual-input { touch-action: pan-y; }
.modal-body, .related-strip, .checkbox-group, .search-suggestions { -webkit-overflow-scrolling: touch; }
/* Tactile feedback on touch — sutil scale + opacity dip. */
@media (hover: none) and (pointer: coarse) {
  button:active:not(:disabled),
  .wine-card:active,
  .cava-card:active,
  .related-card:active,
  .picker-item:active,
  .lang-option:active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform 60ms ease, opacity 60ms ease;
  }
}

img { display: block; max-width: 100%; height: auto; }

.serif { font-family: var(--font-serif); }
.muted { color: var(--bn-muted); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-4);
}

/* Hide [x-cloak] until Alpine initializes */
[x-cloak] { display: none !important; }

/* Accesibilidad — skip-to-content para teclado y screen readers (WCAG 2.4.1) */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bn-fg);
  color: var(--bn-bg);
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  z-index: 9999;
  text-decoration: none;
}
.skip-to-content:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
}

/* Focus visible global — solo al navegar por teclado (no por mouse). */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--bn-fg);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Quitar outline default en click mouse para no manchar el diseño */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

.app-header {
  position: -webkit-sticky; /* iOS 12 / Safari <13 */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bn-bg);
  border-bottom: 1px solid var(--bn-border);
  padding-top: env(safe-area-inset-top, 0px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand { display: inline-flex; align-items: center; }
.brand-home {
  padding: 4px 8px 4px 0;
  margin-left: -8px;
  border-radius: var(--r-sm);
  transition: opacity var(--t-fast);
  cursor: pointer;
}
.brand-home:hover { opacity: 0.8; }
.brand-logo { height: 32px; width: auto; max-width: 120px; flex-shrink: 0; object-fit: contain; object-position: left center; }
@media (min-width: 640px) { .brand-logo { height: 44px; max-width: 200px; } }
.header-actions { display: flex; align-items: center; gap: var(--s-2); }
@media (min-width: 640px) { .header-actions { gap: var(--s-3); } }
/* Fallback de 'gap' en FLEX para iOS<14.1 (gap en flex llegó en Safari 14.1):
   cero-gap + margin, acotado a las 2 filas diner-facing. Se usa @supports not
   (inset: 0) como proxy de Safari<14.1 — NO @supports(gap), que da falso positivo
   por gap-en-grid. En navegadores con gap real este bloque no aplica (sin doble
   espaciado). */
@supports not (inset: 0) {
  .header-actions { gap: 0; }
  .header-actions > * + * { margin-left: var(--s-2); }
  .detail-actions { gap: 0; }
  .detail-actions > * + * { margin-left: var(--s-3); }
  .tab-row { gap: 0; }
  .tab-row > * + * { margin-left: var(--s-2); }
}
.lang-toggle, .cava-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  background: transparent;
  min-height: 36px;
}
@media (min-width: 640px) {
  .lang-toggle, .cava-button { min-height: 44px; }
}
.lang-toggle { min-width: 40px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; font-size: 12px; gap: 4px; }
.lang-caret { transition: transform var(--t-fast); opacity: 0.7; }
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

/* Language picker dropdown */
.lang-picker { position: relative; display: inline-flex; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm, 8px);
  color: var(--bn-fg);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--t-fast);
}
.lang-option:hover { background: rgba(255, 255, 255, 0.06); }
.lang-option.active { background: rgba(255, 255, 255, 0.08); }
.lang-option .lang-code {
  flex: 0 0 28px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--bn-muted);
}
.lang-option.active .lang-code { color: var(--bn-fg); }
.lang-option .lang-name {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 15px;
}
.lang-option .lang-check {
  flex: 0 0 auto;
  color: var(--bn-fg);
  font-size: 14px;
}
.btn-icon { flex-shrink: 0; }
/* Mobile: collapse header buttons to icon-only (with avatar/initial when profile exists). */
@media (max-width: 639px) {
  .header-actions { overflow: visible; } /* permite que el badge se asome */
  .header-actions .btn-label { display: none; }
  .cava-button.icon-btn,
  .profile-button.icon-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 44px;
    position: relative;
    overflow: visible;
  }
  /* Chip-count inside icon-only buttons → corner badge */
  .cava-button.icon-btn .chip-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 14px;
    font-weight: var(--fw-bold);
    background: var(--bn-fg);
    color: var(--bn-bg);
    border: 2px solid var(--bn-bg);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  /* The lang toggle keeps its 2-letter label even on mobile. */
  .lang-toggle { padding: 0 10px; }
}
.lang-toggle:hover, .cava-button:hover {
  border-color: var(--bn-fg);
  color: var(--bn-fg);
  background: rgba(255,255,255,0.04);
}
.compare-button.active {
  border-color: var(--bn-fg);
  background: rgba(255,255,255,0.06);
}
.app-main {
  padding: 0 0 var(--s-3);
  min-height: calc(100vh - 65px);  /* fallback iOS<15.4 / WebView viejo (sin dvh) */
  min-height: calc(100dvh - 65px); /* header inner 64 + border-bottom 1 = 65 */
  position: relative;
  isolation: isolate;
}
@media (min-width: 640px) {
  .app-main { padding: var(--s-2) 0; }
}
.app-main::before {
  content: '';
  position: fixed; inset: 0;
  top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 / iOS <14.5 (sin 'inset') */
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.68) 50%, rgba(10, 10, 10, 0.80) 100%),
    url('assets/brasa-negra-salon.jpg') center / cover no-repeat fixed;
  filter: saturate(1.05) contrast(1.05) brightness(0.7);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}
/* Mobile: mismo brillo que desktop (saturate + contrast + brightness al alza).
   Mantenemos background-attachment scroll (no fixed) para evitar stutter en iOS Safari. */
@media (max-width: 639px) {
  .app-main::before {
    background:
      linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.68) 50%, rgba(10, 10, 10, 0.80) 100%),
      url('assets/brasa-negra-salon.jpg') center / cover no-repeat;
    filter: saturate(1.05) contrast(1.05) brightness(0.7);
  }
}

/* Search bar — needs high z-index so the autocomplete sits above maridaje CTA + chips. */
/* Search + pestañas como una sola unidad sticky en móvil (evita el solape
   de dos elementos sticky compitiendo por top:64). */
.catalog-sticky { position: relative; z-index: 50; }
@media (max-width: 639px) {
  .catalog-sticky {
    position: -webkit-sticky; /* iOS 12 / Safari <13 */
    position: sticky;
    top: calc(64px + env(safe-area-inset-top, 0px)); /* debajo del header (incluye notch en PWA) */
    z-index: 50;
    background: var(--bn-bg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
    margin-bottom: var(--s-2);
  }
}

.search-bar {
  position: relative;
  margin-bottom: var(--s-4);
  z-index: 50;
}
/* Mobile: el sticky lo maneja .catalog-sticky; aquí solo el ritmo vertical. */
@media (max-width: 639px) {
  .search-bar {
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
    margin-bottom: var(--s-1);
  }
  .search-input {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
  }
}

/* Autocomplete dropdown */
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  z-index: 30;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
}
.search-suggestion {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--bn-fg);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
.search-suggestion + .search-suggestion { margin-top: 2px; }
.search-suggestion:hover, .search-suggestion:focus { background: rgba(255,255,255,0.06); }
.search-suggestion-img {
  width: 32px; height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}
.search-suggestion-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.search-suggestion-name {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--bn-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggestion-meta {
  font-size: 12px;
  color: var(--bn-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Search autocomplete: secciones (filters arriba, wines abajo). */
.search-section {
  display: flex;
  flex-direction: column;
}
.search-section + .search-section {
  border-top: 1px solid var(--bn-border);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
}
.search-section-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bn-muted);
  margin: 0;
}
.search-suggestion-category .search-suggestion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--bn-fg);
  flex-shrink: 0;
}
.search-suggestion mark {
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-weight: var(--fw-semibold);
  border-radius: 2px;
  padding: 0 2px;
}
.search-input {
  width: 100%;
  padding: var(--s-3) var(--s-7) var(--s-3) calc(var(--s-4) + 22px);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  color: var(--bn-fg);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.search-input:focus {
  outline: none;
  border-color: var(--bn-accent);
  background: var(--bn-surface-hover);
}
.search-input::placeholder { color: var(--bn-muted); }
/* Magnifying glass icon dentro del search-input (affordance visual). */
.search-icon {
  position: absolute;
  left: calc(var(--s-3) + 2px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--bn-muted);
  pointer-events: none;
  z-index: 1;
  transition: color var(--t-fast);
}
.search-input:focus ~ .search-icon,
.search-bar:focus-within .search-icon { color: var(--bn-fg); }
.search-clear {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bn-border);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.search-clear:hover { background: var(--bn-fg); color: var(--bn-bg); }

/* Chip row */
.chip-row {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--s-2) 0;
  margin-bottom: var(--s-3);
}
/* Mobile: 5 type chips caben sin scroll — distribución uniforme. */
@media (max-width: 639px) {
  .chip-row {
    overflow-x: auto;            /* scroll horizontal: con 'visible'+space-between el último chip (p.ej. Rosados) quedaba cortado e inalcanzable a <=375px */
    -webkit-overflow-scrolling: touch;
    padding: var(--s-1) 0;
    margin-bottom: var(--s-1);
    gap: 6px;
  }
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;            /* tap target táctil (a11y) */
  padding: var(--s-2) var(--s-4);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: all var(--t-fast);
}
/* Mobile: chips más compactos para minimizar el número de filas (2 filas máx). */
@media (max-width: 639px) {
  .chip {
    padding: 5px 8px;
    font-size: 12px;
  }
}
.chip:hover { border-color: var(--bn-fg); }
.chip.active {
  background: var(--bn-fg);
  border-color: var(--bn-fg);
  color: var(--bn-bg);
}
.chip.sommelier { color: var(--bn-fg); border-color: var(--bn-fg); font-weight: var(--fw-semibold); }
.chip.sommelier.active { background: var(--bn-fg); color: var(--bn-bg); }

/* Result row */
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
  gap: var(--s-3);
}
@media (max-width: 639px) {
  .result-row { margin-bottom: 0; font-size: 11px; padding: 2px 0; }
}
.result-row .muted {
  transition: color var(--t-fast);
  display: inline-block;
}
.result-row .muted.is-bumped {
  animation: resultCountBump 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--bn-fg);
}
@keyframes resultCountBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .result-row .muted.is-bumped { animation: none; }
}

/* Grid wrap (for carousel arrows) */
.grid-wrap { position: relative; }
.carousel-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 20, 20, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--bn-fg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: all var(--t-fast);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.carousel-arrow:hover { background: var(--bn-fg); color: var(--bn-bg); border-color: var(--bn-fg); transform: translateY(-50%) scale(1.06); }
.carousel-arrow-prev { left: var(--s-2); }
.carousel-arrow-next { right: var(--s-2); }
/* En móvil el carrusel se navega con swipe/scroll nativo; ocultar las flechas
   evita que (48px, position:absolute) intercepten taps en el borde de las
   tarjetas y parezca que "el botón no responde". */
@media (max-width: 639px) {
  .carousel-arrow { display: none; }
}

/* Clear-all link en applied filters bar — pill prominente al final del row. */
.clear-all-link {
  margin-left: auto;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.clear-all-link:hover {
  border-color: var(--bn-fg);
  background: rgba(255, 255, 255, 0.06);
}

/* Sommelier-pick card upgrade */
.wine-card.is-sommelier {
  border-color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, var(--bn-surface) 50%);
}
.wine-card.is-sommelier .wine-card-sommelier-glyph {
  /* Marcador discreto: sin glow (antes destellaba) y algo más tenue. */
  opacity: 0.6;
}

.empty-state .btn-outline { margin-top: var(--s-4); }

/* View switcher (top-right of catalog) */
.view-switcher {
  display: inline-flex; gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-pill);
  padding: 3px;
  position: relative;
}
.view-switcher button {
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  color: var(--bn-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--t-fast);
  min-width: 64px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.view-switcher button:hover { color: var(--bn-fg); }
.view-switcher button.active {
  background: var(--bn-fg);
  color: var(--bn-bg);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
@media (max-width: 480px) {
  .view-switcher button { min-width: 56px; padding: 6px 10px; font-size: 13px; }
}

/* Wine grid — default GRID variant */
.wine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
/* Grid view: 2 columns on mobile (image-on-top cards), more cols on larger. */
.wine-grid.view-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (min-width: 640px)  { .wine-grid.view-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .wine-grid.view-grid { grid-template-columns: repeat(4, 1fr); } }

/* Grid mode card: stack vertically, image at top, centered. */
.wine-grid.view-grid .wine-card {
  flex-direction: column;
  text-align: left;
  padding: var(--s-3);
}
.wine-grid.view-grid .wine-card-img-wrap {
  align-self: center;
  margin-bottom: var(--s-2);
}
.wine-grid.view-grid .wine-card-img {
  width: 100%;
  max-width: 110px;
  height: 140px;
  object-fit: contain;
}
.wine-grid.view-grid .wine-card-name { font-size: var(--fs-md); margin-bottom: 2px; }
.wine-grid.view-grid .wine-card-origin { font-size: 11px; }
.wine-grid.view-grid .wine-card-bodega { font-size: 12px; }
.wine-grid.view-grid .wine-card-price { font-size: 14px; }

/* LIST view — single column, wide horizontal cards (compacto, default en mobile). */
.wine-grid.view-list { grid-template-columns: 1fr; gap: var(--s-2); }
.wine-grid.view-list .wine-card {
  padding: var(--s-2) var(--s-3);
  align-items: center;
  gap: var(--s-3);
}
.wine-grid.view-list .wine-card-img { width: 48px; height: 64px; }
.wine-grid.view-list .wine-card-name {
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 2px;
}
.wine-grid.view-list .wine-card-bodega { font-size: 12px; margin-bottom: 0; }
/* En lista, origen + año en una sola línea pequeña (no 2 párrafos) */
.wine-grid.view-list .wine-card-origin {
  font-size: 11px;
  margin-bottom: 0;
  line-height: 1.3;
}
.wine-grid.view-list .wine-card-price {
  font-size: 13px;
  margin-top: 2px;
}
.wine-grid.view-list .wine-card-sommelier-glyph {
  font-size: 0.85em;
}
/* En lista, en desktop subir un poco las medidas para no verse mini */
@media (min-width: 640px) {
  .wine-grid.view-list .wine-card-img { width: 64px; height: 88px; }
  .wine-grid.view-list .wine-card-name { font-size: var(--fs-md); }
  .wine-grid.view-list .wine-card-bodega, .wine-grid.view-list .wine-card-origin { font-size: var(--fs-sm); }
}

/* CAROUSEL view — full cover-flow 3D */
.wine-grid.view-carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 50%;
  gap: var(--s-4);
  padding-block: var(--s-1);
  padding-inline: max(var(--s-4), calc(50% - 110px));
  border-radius: var(--r-lg);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  perspective: 1600px;
  perspective-origin: center center;
  transform-style: preserve-3d;
}
.wine-grid.view-carousel::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 768px) {
  .wine-grid.view-carousel { padding-inline: max(var(--s-4), calc(50% - 130px)); }
}
.wine-grid.view-carousel .wine-card {
  flex: 0 0 220px;
  flex-direction: column;
  text-align: center;
  scroll-snap-align: center;
  padding: var(--s-4);
  /* SOLO box-shadow con transición. transform/opacity los escribe el cover-flow JS
     cada frame; con transición de 360ms cada cambio arrancaba una animación nueva y
     las tarjetas se quedaban ~360ms atrás del scroll -> sensación lenta/mushy. */
  transition: box-shadow 240ms ease;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  background: transparent;
  border: none;
  box-shadow: none;
}
@media (min-width: 768px) { .wine-grid.view-carousel .wine-card { flex: 0 0 260px; } }
.wine-grid.view-carousel .wine-card:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--bn-accent);
}
.wine-grid.view-carousel .wine-card-img {
  width: auto;
  height: min(240px, 38vh);
  object-fit: contain;
  background: transparent;
  margin: 0 auto var(--s-2);
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.7));
}
/* Mobile: bottle más chica y wine info compacto. */
@media (max-width: 639px) {
  .wine-grid.view-carousel .wine-card-img {
    height: min(240px, 28vh);
    margin-bottom: var(--s-1);
  }
  .wine-grid.view-carousel .wine-card-name { font-size: var(--fs-md); line-height: 1.15; }
  .wine-grid.view-carousel { padding-block: var(--s-1); }
  .wine-grid.view-carousel .wine-card-body { padding: 0; }
  .wine-grid.view-carousel .wine-card-bodega,
  .wine-grid.view-carousel .wine-card-origin { font-size: 11px; line-height: 1.2; margin: 0; }
  .wine-grid.view-carousel .wine-card-price { font-size: 13px; margin-top: var(--s-1); }
}
.wine-grid.view-carousel .wine-card-body { width: 100%; }
.wine-grid.view-carousel .wine-card-name { font-size: var(--fs-lg); }

/* Wine card */
.wine-card {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
/* :hover sólo bajo punteros con hover real — en touch el estado se quedaba
   "pegado" tras el primer tap (borde resaltado) y daba sensación de tap perdido. */
@media (hover: hover) {
  .wine-card:hover {
    border-color: var(--bn-accent);
    transform: translateY(-1px);
  }
}
.wine-card-img-wrap {
  position: relative;
  flex-shrink: 0;
}
.wine-card-img {
  width: 80px;
  height: 110px;
  object-fit: contain;
  background: transparent;
  border-radius: var(--r-sm);
  /* Soft fade-in as the image bytes arrive (especially on slower connections). */
  animation: imgFadeIn 320ms ease both;
}
@keyframes imgFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wine-card-img { animation: none; }
}
.ribbon-novedad {
  position: absolute;
  top: 6px; left: -10px;
  background: var(--bn-fg);
  color: var(--bn-bg);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 18px;
  transform: rotate(-22deg);
  transform-origin: top left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 640px) {
  .ribbon-novedad { font-size: 10px; padding: 3px 22px; }
}
.ribbon-detail {
  top: 24px; left: -8px;
  font-size: 13px;
  padding: 4px 30px;
}
.detail-image-wrap {
  position: relative;
  display: inline-block;
  padding: var(--s-4);
  transform-style: preserve-3d;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
  background: transparent;
}
/* Botellas con halo + drop-shadow para separarlas del backdrop. */
.detail-image-wrap img {
  filter:
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.75))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}
.wine-card-body { flex: 1; min-width: 0; }
.wine-card-name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.2;
  margin-bottom: var(--s-1);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.wine-card-name-text {
  /* Truncate long names a 2 líneas para mantener altura uniforme en grid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-width: 0;
  flex: 1 1 auto;
}
.wine-card-sommelier-glyph {
  flex: 0 0 auto;
  color: var(--bn-fg);
  font-size: 0.78em;
  line-height: 1;
  opacity: 0.85;
  letter-spacing: 0;
  transform: translateY(-1px);
}
.wine-card-bodega, .wine-card-origin {
  font-size: var(--fs-sm);
  margin-bottom: var(--s-1);
}
.wine-card-price {
  font-size: var(--fs-md);
  margin-top: var(--s-2);
}
/* .badge-sommelier deprecated → reemplazado por .wine-card-sommelier-glyph inline */

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--s-7) var(--s-4);
}
.empty-state h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  margin-bottom: var(--s-2);
}

/* Empty state cuando filtros no devuelven resultados: ilustración + chips removibles + CTA principal. */
.empty-state-no-results {
  max-width: 480px;
  margin: 0 auto;
}
/* Variante "rica" para cava/favoritos vacíos: misma estructura visual sin chips. */
.empty-state-rich {
  max-width: 480px;
  margin: 0 auto;
  padding-block: var(--s-5);
}
.empty-state-rich h3 {
  margin-bottom: var(--s-2);
}
.empty-state-rich p {
  margin-bottom: var(--s-5);
  line-height: 1.5;
}
.empty-state-illustration {
  width: 96px;
  height: 96px;
  color: var(--bn-muted);
  opacity: 0.55;
  margin: 0 auto var(--s-4);
  display: block;
  filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.04));
}
.empty-state-no-results h3 { margin-bottom: var(--s-2); }
.empty-state-no-results p { margin-bottom: var(--s-4); }

/* Empty state favorites: corazón Lucide grande con halo + pulse sutil. */
.empty-state-favorites .empty-state-heart {
  width: 88px;
  height: 88px;
  color: var(--bn-fg);
  opacity: 0.7;
  margin-bottom: var(--s-4);
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.12))
    drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
  animation: heartIdlePulse 3.6s ease-in-out infinite;
}
@keyframes heartIdlePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.04); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .empty-state-favorites .empty-state-heart { animation: none; }
}

.empty-state-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin: 0 auto var(--s-4);
  max-width: 100%;
}
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.active-filter-chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.active-filter-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--bn-fg);
}
.active-filter-chip-x {
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
  font-weight: var(--fw-regular);
}
.active-filter-chip:hover .active-filter-chip-x { opacity: 1; }

.empty-state-cta {
  margin-top: 0;
  min-width: 200px;
}

/* Filters row */
.filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
@media (max-width: 639px) {
  .filters-row {
    margin-bottom: var(--s-1);
    gap: 6px;
  }
  .filter-toggle {
    padding: 6px 8px;
    font-size: 11px;
    flex: 0 1 auto;
    white-space: nowrap;
    gap: 4px;
    min-height: 44px;
  }
  .filter-toggle-icon {
    width: 13px;
    height: 13px;
  }
  .filter-count {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    padding: 0 4px;
  }
  .sort-toggle {
    padding: 6px 8px;
    font-size: 11px;
    white-space: nowrap;
    gap: 4px;
    min-height: 44px;
  }
  /* En mobile el caret ya indica dropdown — esconder el ícono ahorra ~17px. */
  .sort-toggle-icon { display: none; }
  .sort-toggle-label { font-size: 11px; }
}
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  color: var(--bn-fg);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  min-height: 36px;
}
.filter-toggle:hover { border-color: var(--bn-fg); }
/* Estado activo cuando hay filtros aplicados — border blanco + bg sutil. */
.filter-toggle.has-active {
  border-color: var(--bn-fg);
  background: rgba(255, 255, 255, 0.06);
}
.filter-toggle-icon { flex-shrink: 0; }
/* Badge real (chip) en vez de "(N)" texto — más visual + más app-like. */
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  background: var(--bn-fg);
  color: var(--bn-bg);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Filter FAB — flotante bottom-right, aparece al scrollear lejos del filters-row.
   Combina acceso rápido a "Más filtros" + indicador visual de filtros activos (badge). */
.filter-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  background: var(--bn-fg);
  color: var(--bn-bg);
  border: none;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.35);
  /* Estado oculto: deslizado fuera de la pantalla. */
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 220ms ease,
    box-shadow 220ms ease;
}
.filter-fab.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.filter-fab:hover {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.65),
    0 4px 10px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.filter-fab:active { transform: translateY(0); }
.filter-fab-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.filter-fab-label {
  white-space: nowrap;
}
/* Badge con número de filtros activos. */
.filter-fab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 4px;
  background: var(--bn-bg);
  color: var(--bn-fg);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.filter-fab.has-active {
  /* Hairline accent cuando hay filtros — confirma estado activo. */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.15),
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.35);
}
/* Bounce sutil al cambiar el contador de filtros (feedback de acción). */
@keyframes filterBadgeBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.filter-fab-badge.is-bumped {
  animation: filterBadgeBump 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* En mobile, el FAB es más compacto (solo ícono + badge) para no tapar contenido. */
@media (max-width: 480px) {
  .filter-fab {
    padding: 12px 14px;
    right: 14px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .filter-fab-label { display: none; }
  .filter-fab-icon { width: 20px; height: 20px; }
}
.select {
  padding: var(--s-2) var(--s-3);
  background: var(--bn-surface);
  color: var(--bn-fg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  font-size: 16px; /* 16px to prevent iOS Safari auto-zoom on focus */
}
@media (min-width: 640px) {
  .select { font-size: var(--fs-sm); }
}

/* Sort picker custom — reemplaza <select> nativo para mantener theme B&W consistente.
   Misma estructura que lang-picker. */
.sort-picker {
  position: relative;
  display: inline-flex;
}
.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  color: var(--bn-fg);
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast);
  min-height: 36px;
}
.sort-toggle:hover { border-color: var(--bn-fg); }
.sort-toggle-icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.sort-toggle:hover .sort-toggle-icon { opacity: 1; }
.sort-toggle .sort-caret {
  transition: transform var(--t-fast);
  opacity: 0.7;
}
.sort-toggle[aria-expanded="true"] .sort-caret { transform: rotate(180deg); }
.sort-toggle-label {
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}
.sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm, 8px);
  color: var(--bn-fg);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--t-fast);
}
.sort-option:hover { background: rgba(255, 255, 255, 0.06); }
.sort-option.active { background: rgba(255, 255, 255, 0.08); }
.sort-check {
  color: var(--bn-fg);
  font-size: 14px;
  flex: 0 0 auto;
}
/* Belt-and-suspenders: any focusable input/select/textarea ≥ 16px on mobile */
@media (max-width: 639px) {
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select { font-size: 16px !important; }
}
.advanced-filters {
  background: var(--bn-surface);
  padding: var(--s-4);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 768px) {
  .advanced-filters { grid-template-columns: 1fr 1fr; }
}
.filter-group { display: flex; flex-direction: column; gap: var(--s-2); }
/* Sección "Filtros rápidos" al tope del drawer — chips wrap multi-row. */
.filter-group-quick {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--bn-border);
}
.quick-filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.quick-filters-grid .chip {
  flex: 0 0 auto;
}
.label {
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--bn-muted);
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  max-height: 160px;
  overflow-y: auto;
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  background: var(--bn-bg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.checkbox input { margin: 0; accent-color: var(--bn-accent); }
/* Custom price range slider — overrides browser default */
.range-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 12px 0;
  cursor: pointer;
}
.range-input::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.range-input::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  background: var(--bn-fg);
  border: 2px solid var(--bn-bg);
  border-radius: 50%;
  margin-top: -8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  cursor: grab;
  transition: transform 120ms ease;
}
.range-input::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.range-input::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--bn-fg);
  border: 2px solid var(--bn-bg);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  cursor: grab;
}
/* Dual-thumb range (min + max): dos inputs superpuestos; el track de cada input
   no captura punteros — solo los thumbs — para poder arrastrar ambos. */
.range-dual {
  position: relative;
  height: 24px;
  margin: 12px 0;
}
.range-dual-track,
.range-dual-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  pointer-events: none;
}
.range-dual-track { left: 0; right: 0; background: rgba(255, 255, 255, 0.12); }
.range-dual-fill { background: var(--bn-fg); }
.range-dual .range-dual-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
}
.range-dual .range-dual-input::-webkit-slider-runnable-track { background: transparent; height: 24px; }
.range-dual .range-dual-input::-moz-range-track { background: transparent; height: 24px; }
.range-dual .range-dual-input::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 2; margin-top: 2px; }
.range-dual .range-dual-input::-moz-range-thumb { pointer-events: auto; }
.filter-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.btn-secondary {
  padding: var(--s-2) var(--s-4);
  background: transparent;
  color: var(--bn-fg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.btn-secondary:hover { border-color: var(--bn-accent); color: var(--bn-accent); }

/* ─── Detail View ─────────────────────────────────────────── */
.detail-view { max-width: 720px; padding-bottom: var(--s-8); }
.detail-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.detail-header > .cava-title,
.detail-header > .compare-title,
.detail-header > h1 {
  text-align: center;
  margin: 0;
}
.detail-header-actions { justify-self: end; }
.detail-header .back-link { justify-self: start; }
.detail-header-actions { display: flex; gap: var(--s-2); }
/* Compare header tiene 3 elementos (atrás + título + compartir): en móvil el
   título central exprime los lados. Colapsar el label del back-link (deja la
   flecha) para que el botón Compartir no se corte. */
@media (max-width: 639px) {
  .compare-view .detail-header .back-link-label { display: none; }
}
.icon-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-lg);
  color: var(--bn-fg);
  transition: all var(--t-fast);
  position: relative;
}
.icon-button:hover { border-color: var(--bn-fg); color: var(--bn-fg); }
/* Heart-filled active state: solid white pill, dark heart on top — clear "favorited". */
.icon-button.active {
  color: var(--bn-bg);
  border-color: var(--bn-fg);
  background: var(--bn-fg);
}

/* Back link — subtle pill with arrow + label, replaces icon-only back button */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-4) 0 var(--s-3);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  color: var(--bn-muted);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--t-fast);
}
.back-link:hover {
  border-color: var(--bn-fg);
  color: var(--bn-fg);
  background: rgba(255,255,255,0.04);
  transform: translateX(-2px);
}
.back-link-arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform var(--t-fast);
}
.back-link:hover .back-link-arrow {
  transform: translateX(-3px);
}
.back-link-label {
  white-space: nowrap;
}

/* Floating back-to-catalog button — appears on long pages when scrolled */
.back-floating {
  position: fixed;
  left: var(--s-4);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: all var(--t-fast);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.back-floating.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-floating:hover {
  background: rgba(20, 20, 20, 0.95);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}
.back-floating .back-link-arrow {
  font-size: 16px;
}
.text-button {
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--bn-border);
  color: var(--bn-fg);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.text-button:hover { border-color: var(--bn-fg); }
.detail-image {
  display: flex;
  justify-content: center;
  margin: var(--s-5) 0;
}
.detail-image {
  position: relative;
}
.detail-image img {
  max-width: 240px;
  max-height: 420px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.7));
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
/* Mobile: botella un poco más chica para no comer todo el viewport vertical. */
@media (max-width: 639px) {
  .detail-image { margin: 0; flex-shrink: 0; }
  .detail-image img { max-width: 130px; max-height: 220px; }
}

/* Detail hero: botella + info side-by-side en mobile, stacked en desktop. */
.detail-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.detail-hero-info { width: 100%; }
@media (max-width: 639px) {
  .detail-hero {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
  }
  .detail-hero-info { flex: 1; min-width: 0; }
  .detail-hero .sommelier-banner { margin-bottom: var(--s-2); padding: 2px 8px; font-size: 11px; }
  .detail-hero .detail-headline { flex-direction: column; gap: var(--s-2); margin-bottom: 0; }
  .detail-hero .detail-name { font-size: var(--fs-xl); line-height: 1.15; }
  .detail-hero .detail-bodega {
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
    /* Bodegas largas tipo "Pesquera (Familia Fernández Rivera)" wrapean a 3+ líneas
       y rompen la altura del hero compact. Limitar a 2 líneas con ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .detail-hero .detail-meta { font-size: 12px; line-height: 1.3; }
  .detail-hero .detail-price-block { align-items: flex-start; }
  .detail-hero .price-pill { padding: 4px 10px; font-size: 13px; }
  .detail-hero .detail-nav-arrow { display: none; } /* En mobile usamos swipe nativo */
}
.detail-nav-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 20, 20, 0.7);
  color: var(--bn-fg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xl);
  cursor: pointer;
  transition: all var(--t-fast);
  z-index: 2;
}
.detail-nav-arrow:hover { background: var(--bn-fg); color: var(--bn-bg); border-color: var(--bn-fg); }
.detail-nav-prev { left: var(--s-3); }
.detail-nav-next { right: var(--s-3); }

/* Related wines horizontal strip */
.related-wines { margin-top: var(--s-6); }
.related-strip {
  display: flex; gap: var(--s-3);
  overflow-x: auto;
  padding: var(--s-2) 0;
  scrollbar-width: thin;
}
.related-card {
  flex: 0 0 140px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  cursor: pointer;
  text-align: left;
  color: var(--bn-fg);
  transition: border-color var(--t-fast);
}
@media (hover: hover) { .related-card:hover { border-color: var(--bn-accent); } }
.related-img {
  width: 100%;
  height: 150px;
  object-fit: contain;   /* botella COMPLETA (era 'cover' -> recortaba la botella con zoom) */
  border-radius: var(--r-sm);
  background: transparent;
  margin-bottom: var(--s-2);
}
.related-name {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.related-meta { font-size: var(--fs-xs); }
.sommelier-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: rgba(255, 255, 255, 0.15);
  color: var(--bn-accent);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-3);
}
.detail-name {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: 1.1;
  margin-bottom: var(--s-1);
}
.detail-bodega { font-size: var(--fs-lg); color: var(--bn-muted); margin-bottom: var(--s-1); }
.detail-meta, .detail-origin { color: var(--bn-muted); font-size: var(--fs-sm); margin-bottom: var(--s-1); }
.bn-divider {
  margin: var(--s-6) 0;
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bn-accent), transparent);
}
.detail-section { margin-bottom: var(--s-5); }
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  margin-bottom: var(--s-3);
  position: relative;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--bn-border);
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--bn-accent);
}
.pairing-brasa .section-title { color: var(--bn-accent); }
.pairing-brasa p { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-5);
  row-gap: var(--s-2);
}
.detail-grid dt { color: var(--bn-muted); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.08em; align-self: center; }
.detail-grid dd { }
.sommelier-note { background: var(--bn-surface); padding: var(--s-4); border-left: 3px solid var(--bn-accent); border-radius: var(--r-sm); }
.sommelier-note p.serif { font-size: var(--fs-lg); font-style: italic; margin-bottom: var(--s-2); }
.detail-actions {
  position: -webkit-sticky; /* iOS 12 / Safari <13 */
  position: sticky;
  bottom: 0;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  margin: var(--s-6) calc(-1 * var(--s-4)) 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  z-index: 5;
}
.action-primary { flex: 1; }
.action-consumed-tag {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-md);
  color: var(--bn-fg);
  font-size: 14px;
}
.action-secondary-row {
  display: flex;
  gap: var(--s-2);
  flex-shrink: 0;
}
.action-icon-btn {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--bn-border);
  border-radius: 50%;
  color: var(--bn-fg);
  cursor: pointer;
  transition: all var(--t-fast);
}
.action-icon-btn:hover { border-color: var(--bn-fg); background: rgba(255,255,255,0.04); }
.action-icon-btn.active {
  background: var(--bn-fg);
  color: var(--bn-bg);
  border-color: var(--bn-fg);
}
.detail-view { padding-bottom: var(--s-2); }
/* En mobile el action bar sticky ocupa ~120px abajo — damos padding extra
   al .detail-view para que el contenido scrolleable no quede oculto. */
@media (max-width: 639px) {
  .detail-view { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 640px) {
  .detail-actions {
    padding-left: var(--s-5);
    padding-right: var(--s-5);
    margin-left: calc(-1 * var(--s-5));
    margin-right: calc(-1 * var(--s-5));
  }
}
.detail-actions .action-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
}

/* Headline block: name + price side by side on desktop */
.detail-headline {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
@media (min-width: 720px) {
  .detail-headline { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .detail-name-block { flex: 1; }
  .detail-price-block { flex: 0 0 auto; align-items: flex-end; }
}
.detail-name-block .detail-name { margin-bottom: var(--s-1); }
.detail-name-block .detail-bodega { font-size: var(--fs-lg); color: var(--bn-muted); margin-bottom: var(--s-1); }
.detail-name-block .detail-meta { color: var(--bn-muted); font-size: var(--fs-sm); }
.detail-price-block {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.price-pill {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: var(--s-2) var(--s-4);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  min-width: 140px;
}
.price-pill-primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border-color: var(--bn-accent);
}
.price-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bn-muted);
}
.price-pill-primary .price-label { color: var(--bn-accent); }
.price-amount {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--bn-fg);
  line-height: 1;
  margin-top: 2px;
}
.price-pill-primary .price-amount { color: var(--bn-accent); }
.btn-primary {
  padding: var(--s-3) var(--s-5);
  background: var(--bn-fg);
  color: var(--bn-bg);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.btn-primary,
.btn-primary * { color: var(--bn-bg); }
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-outline {
  padding: var(--s-3) var(--s-5);
  background: transparent;
  color: var(--bn-fg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
}
.btn-outline:hover, .btn-outline.active { border-color: var(--bn-accent); color: var(--bn-accent); }
.btn-danger { color: var(--bn-danger); background: transparent; border: 1px solid var(--bn-border); padding: var(--s-2) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); }
.your-experience { background: var(--bn-surface); padding: var(--s-4); border-radius: var(--r-md); margin-top: var(--s-5); }
.seal-row { display: flex; gap: var(--s-3); align-items: center; }
.seal { width: 56px; height: 56px; opacity: 0.85; }
.rating { color: var(--bn-accent); font-size: var(--fs-lg); margin: var(--s-1) 0; letter-spacing: 0.1em; }
.note { font-style: italic; color: var(--bn-fg); }
.exp-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.consumed-editor { background: var(--bn-surface); padding: var(--s-4); border-radius: var(--r-md); margin-top: var(--s-5); }
.star-input { display: flex; gap: var(--s-1); font-size: var(--fs-2xl); color: var(--bn-muted); margin-bottom: var(--s-3); }
.star-input button { color: inherit; }
.star-input button.filled { color: var(--bn-accent); }
.textarea {
  width: 100%;
  padding: var(--s-3);
  background: var(--bn-bg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-sm);
  color: var(--bn-fg);
  font-family: inherit;
  font-size: var(--fs-md);
  resize: vertical;
  margin-bottom: var(--s-3);
}

.cava-view { max-width: 720px; padding-bottom: var(--s-8); }
.cava-title { font-family: var(--font-serif); font-size: var(--fs-xl); }
.local-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--bn-accent);
  border-radius: var(--r-sm);
  color: var(--bn-fg);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
}
.local-warning-text { flex: 1; margin: 0; }
.local-warning-close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--bn-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.local-warning-close:hover { color: var(--bn-fg); background: rgba(255,255,255,0.06); }
.tab-row { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); border-bottom: 1px solid var(--bn-border); }
.tab {
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: none;
  color: var(--bn-muted);
  font-size: var(--fs-md);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab.active { color: var(--bn-accent); border-bottom-color: var(--bn-accent); }
.tab-count { font-size: var(--fs-sm); }
.cava-actions { margin-bottom: var(--s-3); display: flex; justify-content: flex-end; }
.cava-list { display: flex; flex-direction: column; gap: var(--s-3); }
.cava-card {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  cursor: pointer;
  position: relative;
}
@media (hover: hover) { .cava-card:hover { border-color: var(--bn-accent); } }

/* Rating line dentro del cava-card: spacing limpio con flex + tracking. */
.cava-card .rating {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.cava-card .rating > span:first-child {
  letter-spacing: 1.5px;
  color: var(--bn-fg);
  flex-shrink: 0;
}
.cava-card .rating .muted { white-space: nowrap; }

/* Botón × para eliminar wine desde la cava (tanto consumidos como favoritos). */
.cava-card-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
  /* Desktop: visible solo al hover de la card para limpiar el visual */
  opacity: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cava-card:hover .cava-card-remove,
.cava-card-remove:focus-visible {
  opacity: 1;
}
.cava-card-remove:hover {
  background: var(--bn-danger);
  border-color: var(--bn-danger);
  color: var(--bn-fg);
}
/* Expande hit area a 44×44 sin agrandar el visual (Apple HIG). */
.cava-card-remove::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--r-pill);
}
/* Touch devices (incl. tablets con hover híbrido): siempre visible. */
@media (hover: none), (pointer: coarse) {
  .cava-card-remove { opacity: 0.7; }
}

/* === 3D ANIMATIONS === */

/* Splash entry: stagger fade-up with subtle Z lift */
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(20px) translateZ(-60px); }
  to   { opacity: 1; transform: translateY(0) translateZ(0); }
}
.splash-inner > * { animation: splashFadeUp 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.splash-inner > *:nth-child(1) { animation-delay: 100ms; }
.splash-inner > *:nth-child(2) { animation-delay: 200ms; }
.splash-inner > *:nth-child(3) { animation-delay: 300ms; }
.splash-inner > *:nth-child(4) { animation-delay: 400ms; }
.splash-inner > *:nth-child(5) { animation-delay: 500ms; }
.splash-inner > *:nth-child(6) { animation-delay: 600ms; }
.splash-inner > *:nth-child(7) { animation-delay: 700ms; }
.splash-logo {
  transform-style: preserve-3d;
  animation: logoFloat 6s ease-in-out infinite alternate;
}
@keyframes logoFloat {
  from { transform: perspective(800px) rotateY(-6deg) translateY(0); }
  to   { transform: perspective(800px) rotateY(6deg) translateY(-6px); }
}
.splash-cta {
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
}
.splash-cta:hover {
  transform: perspective(600px) translateZ(8px) scale(1.02);
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.5);
}

/* REMOVED: viewEnter 3D animation (rompía position:fixed para descendientes:
   modal-overlay, back-floating, toasts). El pageSlideIn de pageTransitions ya
   cubre la transición sin causar containing-block issues. */

/* Wine card grid: subtle 3D hover lift */
.wine-grid.view-grid .wine-card {
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color var(--t-fast), box-shadow 220ms ease;
}
.wine-grid.view-grid .wine-card:hover {
  transform: perspective(900px) translateZ(8px) rotateX(-2deg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* Splash welcome screen */
.splash {
  position: fixed; inset: 0;
  top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 / iOS <14.5 (sin 'inset') */
  z-index: 50;
  display: flex;
  /* SIN align-items/justify-content:center — con contenido más alto que el
     viewport (iPhone con notch + barra de Safari) el centrado flex empuja el
     logo ARRIBA del área scrolleable y lo recorta. El centrado lo hace ahora
     .splash-inner con margin:auto (centra si cabe; scroll desde arriba si no). */
  background: var(--bn-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.splash-backdrop {
  position: absolute; inset: 0;
  top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 / iOS <14.5 */
  overflow: hidden;
  pointer-events: none;
}
.splash-backdrop::before {
  content: '';
  position: absolute;
  inset: -4%;
  background: url('assets/cava-wall.jpg') center 30% / cover no-repeat;
  filter: saturate(1.10) contrast(1.18) brightness(1.10);
  animation: splashPan 24s ease-in-out infinite alternate;
  transform-origin: center;
}
.splash-backdrop::after {
  content: '';
  position: absolute; inset: 0;
  top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 / iOS <14.5 */
  background:
    radial-gradient(ellipse 100% 90% at 50% 45%, transparent 0%, rgba(10, 10, 10, 0.20) 50%, rgba(10, 10, 10, 0.67) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.11) 0%, rgba(10, 10, 10, 0.27) 50%, rgba(10, 10, 10, 0.77) 100%);
}
/* Drop-shadow detrás del copy. Blur corto para no desaturar las letras
   (un blur grande hace que el texto se vea gris aunque la color sea #FFF puro). */
.splash-title {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.splash-tagline,
.splash-pick {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.stat-num {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
}
.stat-label,
.splash-type {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
@keyframes splashPan {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-backdrop::before { animation: none; transform: scale(1.04); }
}
.splash-lang {
  position: absolute; top: var(--s-4); right: var(--s-4);
  z-index: 2;
}
.splash-inner {
  position: relative; z-index: 1;
  margin: auto;   /* centra vertical+horizontal cuando cabe; colapsa a 0 y deja
                     scroll desde el tope cuando el contenido desborda (no recorta el logo) */
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: calc(var(--s-6) + env(safe-area-inset-top, 0px)) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
}
.splash-logo {
  width: 180px; height: 180px;
  margin-bottom: var(--s-4);
  object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(255, 255, 255, 0.35));
}
.splash-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  margin-bottom: var(--s-3);
  color: var(--bn-fg);
}
.splash-tagline {
  font-size: var(--fs-md);
  color: var(--bn-fg);
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-6);
  max-width: 520px;
  line-height: 1.5;
}
.splash-stats {
  display: flex; gap: var(--s-6); justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.stat-num {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--bn-fg);
}
.stat-label {
  font-size: var(--fs-xs);
  color: var(--bn-fg);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-semibold);
}
.splash-pick {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  margin-bottom: var(--s-4);
  color: var(--bn-fg);
}
.splash-types {
  display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center;
  margin-bottom: var(--s-6);
}
.splash-type {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}
.splash-type:hover { border-color: var(--bn-accent); color: var(--bn-accent); }
.splash-type-num { font-weight: var(--fw-bold); color: var(--bn-accent); }
.splash-cta {
  font-size: var(--fs-lg);
  padding: var(--s-4) var(--s-7);
  min-width: 240px;
  max-width: 320px;
  width: auto;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Compactar el splash en móvil para que quepa sin scroll (el usuario reportó "algo de scroll"):
   logo más chico + márgenes verticales reducidos. El margin:auto de .splash-inner mantiene
   el centrado y deja scroll de respaldo si aun así no cabe en una pantalla muy corta. */
@media (max-width: 639px) {
  .splash-logo { width: 116px; height: 116px; margin-bottom: var(--s-3); }
  .splash-title { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
  .splash-tagline { margin-bottom: var(--s-4); }
  .splash-stats { margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); gap: var(--s-5); }
  .splash-pick { margin-bottom: var(--s-3); }
  .splash-types { margin-bottom: var(--s-4); }
  .splash-inner {
    padding-top: calc(var(--s-4) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  }
}

.chip-count {
  background: currentColor;
  color: var(--bn-bg);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  min-width: 18px;
  text-align: center;
}
.chip.active .chip-count { background: var(--bn-bg); color: var(--bn-fg); }
.modal-overlay {
  position: fixed; inset: 0;
  top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 / iOS <14.5 (sin 'inset' el backdrop colapsa) */
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: var(--s-3);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
}

/* Mobile: modales como bottom-sheet (slide from bottom, full width, redondeado arriba). */
@media (max-width: 639px) {
  .modal-overlay {
    /* Flex centrado se rompe si algún ancestor tiene transform → usamos pos absolute en el panel. */
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
    padding-bottom: 0;
  }
  .modal-overlay .modal-panel {
    /* Anclar al bottom del overlay con position absolute para que no dependa de flex/parent transforms */
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;   /* fallback sin dvh */
    max-height: 90dvh;  /* sigue el viewport dinámico (barra URL) en iOS 15.4+ */
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: bottomSheetIn 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  /* Handle visual (la "barra" que indica que es swipeable) */
  .modal-overlay .modal-panel::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }
}
@keyframes bottomSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay .modal-panel { animation: none; }
}
.modal-panel {
  background: var(--bn-bg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--s-5);
  border-bottom: 1px solid var(--bn-border);
}
.modal-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  margin-bottom: var(--s-1);
}
.modal-subtitle {
  font-size: var(--fs-sm);
  color: var(--bn-accent);
}
.modal-body {
  padding: var(--s-4) var(--s-5);
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  display: flex; gap: var(--s-3); justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--bn-border);
}
.dish-category { margin-bottom: var(--s-5); }
.dish-category-title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--bn-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--s-3) 0 var(--s-2);
}
.dish-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--bn-border);
}
.dish-row:hover { color: var(--bn-accent); }
.dish-row input[type=checkbox] { accent-color: var(--bn-accent); width: 22px; height: 22px; flex-shrink: 0; }
.dish-name { flex: 1; font-size: var(--fs-md); }
.dish-count { font-size: var(--fs-sm); }
/* Estado SELECCIONADO claro (no depende solo del checkbox): fila resaltada + nombre
   en color de acento. Vía :class de Alpine -> funciona en todo navegador (sin :has). */
.dish-row.is-selected {
  background: rgba(255, 255, 255, 0.07);
  margin-left: calc(-1 * var(--s-2)); margin-right: calc(-1 * var(--s-2));
  padding-left: var(--s-2); padding-right: var(--s-2);
  border-radius: var(--r-sm);
}
.dish-row.is-selected .dish-name { color: var(--bn-accent); font-weight: var(--fw-semibold); }
.applied-maridaje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  margin: 0 0 var(--s-2);
}
@media (max-width: 639px) {
  .applied-maridaje { margin-bottom: var(--s-1); }
}
.maridaje-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--bn-fg);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: 12px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.maridaje-tag-remove {
  background: transparent; color: inherit; cursor: pointer;
  font-size: var(--fs-sm); line-height: 1;
}

/* Catalog tabs (Recomendados / Selección / Favoritos) */
.catalog-tabs-wrap {
  position: relative;
  margin-bottom: var(--s-3);
}
/* Mobile: el sticky lo maneja .catalog-sticky (search + pestañas juntos). */
@media (max-width: 639px) {
  .catalog-tabs-wrap {
    margin-bottom: var(--s-2);
  }
}
.catalog-tabs {
  display: flex;
  gap: var(--s-4);
  border-bottom: 1px solid var(--bn-border);
  position: relative;
}
/* En mobile: distribuir tabs equitativamente y compactar para que entren los 4
   sin scroll horizontal. */
@media (max-width: 639px) {
  .catalog-tabs {
    gap: var(--s-2);
    justify-content: space-between;
  }
}
.catalog-tabs::-webkit-scrollbar { display: none; }
/* Chevron deprecado: los tabs ya no scrollean, no se necesita pista. */
.catalog-tabs-chevron { display: none !important; }
.cat-tab {
  padding: var(--s-3) var(--s-1);
  background: transparent;
  border: none;
  color: var(--bn-muted);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}
/* Mobile: tipografía más compacta para que entren los 4 tabs. */
@media (max-width: 639px) {
  .cat-tab {
    font-size: 15px;
    padding: var(--s-3) 2px;
    letter-spacing: -0.01em;
  }
}
/* En pantallas muy pequeñas (≤360px) bajar un punto más. */
@media (max-width: 360px) {
  .cat-tab { font-size: 14px; }
}
.cat-tab:hover { color: var(--bn-fg); }
.cat-tab.active { color: var(--bn-accent); border-bottom-color: var(--bn-accent); }

/* Comparator view */
.compare-view { max-width: 1100px; padding-bottom: var(--s-8); }
.compare-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "left right"
    "radar radar";
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.compare-slot-left { grid-area: left; }
.compare-slot-right { grid-area: right; }
.compare-radar-wrap { grid-area: radar; }

@media (min-width: 900px) {
  .compare-slots {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "left radar right";
    align-items: start;
    gap: var(--s-4);
  }
}
.compare-slot {
  background: var(--bn-surface);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-align: center;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* Mobile: slots más compactos para que entren 2 side-by-side cómodo. */
@media (max-width: 639px) {
  .compare-slot {
    min-height: 240px;
    padding: var(--s-3);
  }
  .compare-bottle-img {
    max-width: 90px;
    max-height: 130px;
  }
  .compare-wine-name {
    font-size: var(--fs-md);
  }
  .compare-empty-glyph {
    width: 44px;
    height: 88px;
  }
  .compare-empty {
    padding: var(--s-3);
    font-size: var(--fs-sm);
  }
}
.compare-slot-left { border-top: 3px solid var(--bn-fg); }
.compare-slot-right { border-top: 3px solid var(--bn-fg); }
.compare-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  background: transparent; cursor: pointer;
  color: var(--bn-muted); font-size: var(--fs-md); padding: var(--s-5);
}
/* Silueta SVG de botella en slot vacío del comparador. */
.compare-empty-glyph {
  width: 56px;
  height: 112px;
  color: var(--bn-muted);
  opacity: 0.55;
  margin: 0 auto var(--s-3);
  display: block;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.compare-empty:hover .compare-empty-glyph {
  opacity: 0.9;
  color: var(--bn-fg);
}
.compare-empty:hover { color: var(--bn-accent); }
.compare-filled { position: relative; width: 100%; }
.compare-remove {
  position: absolute; top: 0; right: 0; cursor: pointer;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bn-bg); border: 1px solid var(--bn-border); border-radius: var(--r-pill);
  color: var(--bn-fg);
}
/* Expandir hit area a 44×44 sin agrandar el visual (Apple HIG). */
.compare-remove::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--r-pill);
}
.compare-remove:hover { color: var(--bn-danger); border-color: var(--bn-danger); }
.compare-bottle-img {
  max-width: 120px; max-height: 180px;
  margin: 0 auto var(--s-3);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}
.compare-wine-name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  margin-bottom: var(--s-1);
}
.compare-price {
  margin-top: var(--s-3);
  font-size: var(--fs-md);
  color: var(--bn-accent);
}
.compare-radar-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
  padding: var(--s-5);
}
.compare-hint { text-align: center; max-width: 220px; }
.compare-radar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  color: var(--bn-muted);
}
.compare-radar-empty-svg {
  width: 160px;
  height: 160px;
  opacity: 0.65;
}
@media (max-width: 639px) {
  .compare-radar-empty-svg {
    width: 120px;
    height: 120px;
  }
}
.compare-radar { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1/1; overflow: visible; }
.compare-attrs { margin-top: var(--s-6); }
.compare-attr-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--bn-border);
}
.compare-attr-label {
  text-align: center;
  font-weight: var(--fw-semibold);
}
.compare-dots { display: flex; gap: var(--s-2); justify-content: center; }
.compare-dots-left { justify-content: flex-end; }
.compare-dots-right { justify-content: flex-start; }
/* Diferenciación visual left/right en compare-attrs (espejo del radar):
   left = solid white (default .profile-dot.filled),
   right = outline white (solo border, sin fill) — ver Task 8. */
.compare-dots-right .profile-dot.filled {
  background: transparent;
  border: 2px solid var(--bn-fg);
  /* Inset shadow refuerza el "hollow" — más distinción visual vs el solid del left. */
  box-shadow: inset 0 0 0 2px var(--bn-bg);
}

/* Origen (país·región·añada) en cada slot del comparador */
.compare-origin { font-size: var(--fs-xs); }

/* Leyenda del radar: mapea línea sólida = vino A (izq), punteada = vino B (der) */
.compare-legend {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
}
.compare-legend-item { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.compare-legend-swatch { display: inline-block; width: 26px; height: 0; flex-shrink: 0; border-top: 3px solid var(--bn-fg); }
.compare-legend-swatch.dashed { border-top-style: dashed; }
.compare-legend-vs { color: var(--bn-muted); font-style: italic; }

/* Flecha que apunta al vino con mayor valor en cada atributo */
.compare-attr-label { display: inline-flex; align-items: center; gap: var(--s-1); justify-content: center; }
.compare-attr-label .cmp-win { color: var(--bn-accent); font-weight: var(--fw-bold); }

/* Mobile small (iPhone SE-class, ≤720px alto): compactar para fit above-the-fold.
   .compare-view ancestor bumps specificity para ganar cascade contra reglas base posteriores. */
@media (max-width: 639px) and (max-height: 720px) {
  .compare-view .compare-slot {
    min-height: 160px;
    padding: var(--s-2);
  }
  .compare-view .compare-bottle-img {
    max-width: 56px;
    max-height: 80px;
    margin-bottom: var(--s-1);
  }
  .compare-view .compare-wine-name {
    font-size: var(--fs-sm);
    line-height: 1.15;
    margin-bottom: 2px;
  }
  .compare-view .compare-filled .muted {
    font-size: 10px;
    line-height: 1.2;
    margin: 0;
  }
  .compare-view .compare-price {
    font-size: 12px;
    margin-top: var(--s-1);
  }
  .compare-view .compare-empty-glyph {
    width: 36px;
    height: 72px;
  }
  .compare-view .compare-radar-wrap {
    min-height: 160px;
    padding: var(--s-1);
  }
  .compare-view .compare-radar.radar-chart { max-width: 180px; }
  .compare-view .compare-radar-empty-svg { width: 100px; height: 100px; }
  /* En pantallas chicas, las dots de attrs son redundantes con el radar.
     Ocultar para ahorrar ~185px y caber sin scroll. */
  .compare-view .compare-attrs { display: none; }
}

/* Wine picker (used by comparator) */
.picker-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.picker-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2);
  background: var(--bn-bg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
}
@media (hover: hover) { .picker-item:hover { border-color: var(--bn-accent); } }
/* Botella completa (no recortada): contain + fondo transparente, igual que el
   thumbnail del buscador. object-fit: cover deformaba/clipeaba la botella. */
.picker-img { width: 40px; height: 58px; object-fit: contain; object-position: center; background: transparent; border-radius: var(--r-sm); flex-shrink: 0; }
.picker-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
/* Estado "ya está en el comparador": el item se marca para que el tap dé feedback claro. */
.picker-item--selected { border-color: var(--bn-accent); background: rgba(255,255,255,0.05); }
.picker-item--selected .picker-img { opacity: 0.55; }
.picker-badge {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--bn-accent); border: 1px solid var(--bn-accent);
  white-space: nowrap;
}
/* Pill del header del picker: indica qué lado se está llenando (Vino 1 / Vino 2). */
.picker-slot-pill {
  display: inline-flex; align-items: center;
  margin-left: var(--s-2);
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--bn-fg); color: var(--bn-bg);
  vertical-align: middle;
}

/* Radar chart (organoleptic 5-axis) */
.radar-wrap {
  display: flex;
  justify-content: center;
  margin: var(--s-3) 0 var(--s-5);
  padding: 0 var(--s-6);
}
.radar-chart {
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
}
.radar-chart text { paint-order: stroke; }
/* Fallback de altura para iOS<15 / WebView<88 sin 'aspect-ratio': con height:auto
   el SVG inline podría colapsar; fija alto explícito SÓLO donde no hay soporte
   (preserveAspectRatio del viewBox evita deformación). */
@supports not (aspect-ratio: 1 / 1) {
  .radar-chart { height: 280px; }
  .compare-radar { height: 320px; }
}

/* Organoleptic tasting profile (5-dot scale) */
.tasting-profile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.profile-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: var(--s-4);
}
.profile-label {
  font-size: var(--fs-md);
  color: var(--bn-fg);
  cursor: help;
}
.profile-dots {
  display: flex;
  gap: var(--s-2);
}
.profile-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--bn-muted);
  background: transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.profile-dot.filled {
  background: var(--bn-accent);
  border-color: var(--bn-accent);
}

/* ===== Favorite note block (detail view) ===== */
.fav-note-block {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--bn-line);
}
.btn-block {
  width: 100%;
  justify-content: center;
}
.fav-note-display {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bn-line);
  border-radius: var(--r-md);
}
.fav-note-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bn-muted);
  margin: 0;
}
.fav-note-text {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--bn-fg);
  margin: 0;
}
.fav-note-editor {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fav-note-editor .textarea {
  width: 100%;
}

/* ===== Profile (registro local) ===== */
.profile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  min-height: 36px;
  background: transparent;
  color: var(--bn-fg);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
@media (min-width: 640px) {
  .profile-button { min-height: 40px; }
}
.profile-button:hover {
  border-color: var(--bn-fg);
  background: rgba(255, 255, 255, 0.04);
}
.profile-button.has-profile {
  border-color: var(--bn-fg);
  background: var(--bn-fg);
  color: var(--bn-bg);
}
.profile-button.has-profile:hover {
  background: rgba(255, 255, 255, 0.92);
}
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bn-fg);
  color: var(--bn-bg);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
.profile-button.has-profile .profile-avatar {
  background: var(--bn-bg);
  color: var(--bn-fg);
}

/* Profile modal — max-width solo en desktop. En mobile mantiene el bottom-sheet full-width. */
@media (min-width: 640px) {
  .profile-modal .modal-panel {
    max-width: 440px;
  }
}
.profile-welcome {
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.4;
  color: var(--bn-fg);
  margin: 0 0 var(--s-3) 0;
}
.profile-welcome strong { font-weight: var(--fw-medium); }
.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.profile-field .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bn-muted);
}
.profile-field input {
  width: 100%;
  padding: var(--s-3);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--bn-line);
  border-radius: var(--r-md);
  color: var(--bn-fg);
  font-family: 'Inter', sans-serif;
  font-size: 16px;  /* >=16px evita el zoom automático de iOS al enfocar (también iPad/landscape >=640px) */
  transition: border-color var(--t-fast);
}
.profile-field input:focus {
  outline: none;
  border-color: var(--bn-fg);
}
.profile-help {
  font-size: 12px;
  color: var(--bn-muted);
  line-height: 1.5;
  margin: 0;
}

/* ===== Filter counts (Más filtros) ===== */
.filter-count-inline {
  font-size: 11px;
  color: var(--bn-muted);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-left: 4px;
}
.filter-opt-count {
  margin-left: auto;
  padding-left: 6px;
  font-size: 11px;
  color: var(--bn-muted);
  font-variant-numeric: tabular-nums;
}
.checkbox { display: inline-flex; align-items: center; }

/* ===== Pairing results (maridaje active) ===== */
.pairing-results-header {
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
}
.pairing-results-header .section-title {
  margin-bottom: 6px;
  font-size: var(--fs-xl);
}
.pairing-results-header p { font-size: 14px; margin: 0; }
.pairing-reason {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.pairing-reason-eyebrow {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bn-muted);
  margin-bottom: 4px;
}
.pairing-reason-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bn-fg);
  margin: 0;
}

/* ===== PWA install banner ===== */
.pwa-banner {
  position: fixed;
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  left: var(--s-3); right: var(--s-3);
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: rgba(20, 20, 20, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  z-index: 90;
  animation: pwaBannerIn 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes pwaBannerIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.pwa-banner-icon { width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0; }
.pwa-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-banner-title { font-size: 14px; font-weight: var(--fw-semibold); color: var(--bn-fg); margin: 0; }
.pwa-banner-sub { font-size: 12px; color: var(--bn-muted); margin: 0; line-height: 1.35; }
.pwa-banner-cta {
  padding: 8px 14px;
  background: var(--bn-fg);
  color: var(--bn-bg);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  flex-shrink: 0;
}
.pwa-banner-close {
  position: absolute;
  top: 6px; right: 8px;
  width: 22px; height: 22px;
  color: var(--bn-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* ===== Cava summary + recomendaciones ===== */
.cava-summary {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--bn-border);
}
.cava-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.cava-summary-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s-3) var(--s-2);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bn-border);
  border-radius: var(--r-md);
  text-align: center;
}
.cava-summary-num {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--bn-fg);
}
.cava-summary-num-suffix { font-size: 14px; margin-left: 2px; opacity: 0.7; }
.cava-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bn-muted);
}
.cava-summary-line {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bn-fg);
}
.cava-summary-line strong { font-weight: var(--fw-semibold); }

.cava-recommendations {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--bn-border);
}
.cava-recommendations-sub {
  font-size: 13px;
  margin-bottom: var(--s-3);
  margin-top: calc(var(--s-2) * -1);
}

/* ===== Detail page tabs (Cata · Maridaje · Mi experiencia) ===== */
.detail-tabs {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--bn-border);
  overflow-x: auto;
  scrollbar-width: none;
  /* Sticky bajo el header en mobile, para que al cambiar de tab no se pierda contexto. */
  position: -webkit-sticky; /* iOS 12 / Safari <13 */
  position: sticky;
  top: calc(64px + env(safe-area-inset-top, 0px));
  background: var(--bn-bg);
  z-index: 20;
  padding-top: var(--s-2);
}
@media (min-width: 640px) {
  /* En desktop no es necesario sticky (hay más espacio) */
  .detail-tabs { position: relative; top: auto; background: transparent; padding-top: 0; }
}
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab {
  padding: var(--s-3) var(--s-2);
  background: transparent;
  border: none;
  color: var(--bn-muted);
  font-family: var(--font-serif);
  font-size: 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}
/* Mobile: tabs flexibles que distribuyen el ancho disponible sin scroll. */
@media (max-width: 639px) {
  .detail-tabs {
    overflow-x: visible;
    gap: 0;
    justify-content: space-between;
  }
  .detail-tab {
    padding: var(--s-3) 2px;
    font-size: 14px;
    letter-spacing: -0.01em;
  }
}
.detail-tab:hover { color: var(--bn-fg); }
.detail-tab.active {
  color: var(--bn-fg);
  border-bottom-color: var(--bn-fg);
  font-weight: var(--fw-medium);
}

/* ===== Toast notifications stack ===== */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  pointer-events: none;
}
@media (min-width: 640px) {
  .toast-stack { bottom: var(--s-6); }
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 18px;
  background: rgba(20, 20, 20, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  color: var(--bn-fg);
  font-size: 14px;
  letter-spacing: 0.02em;
  max-width: min(90vw, 380px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  animation: toastSlideIn 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.toast-success { border-color: rgba(80, 200, 120, 0.45); }
.toast-error   { border-color: rgba(255, 100, 100, 0.45); }
.toast-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  font-size: 14px;
  line-height: 1;
}
@keyframes toastSlideIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ===== Heart burst animation (favorito) ===== */
.icon-button.active.fav-burst {
  animation: favBurst 480ms cubic-bezier(0.5, -0.5, 0.3, 1.5);
}
@keyframes favBurst {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.32); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.icon-button.fav-burst::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 60%);
  animation: favBurstRing 480ms ease-out;
  pointer-events: none;
}
@keyframes favBurstRing {
  0%   { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ===== Page transitions (slide-in for detail / cava / compare) ===== */
@keyframes pageSlideIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.app-main > [x-show="view === 'detail'"],
.app-main > [x-show="view === 'cava'"],
.app-main > [x-show="view === 'compare'"] {
  animation: pageSlideIn 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .toast, .icon-button.active.fav-burst, .app-main > [x-show] { animation: none; }
}

@media print {
  .app-header, .detail-actions, .cava-actions, .tab-row, .chip-row, .filters-row { display: none !important; }
  body { background: white; color: black; }
  .wine-card-img { max-width: 60px; }
  .profile-dot.filled { background: black; border-color: black; }
}

/* === Export PDF de "Mi Cava" (botón Exportar PDF, via html2pdf/html2canvas) ===
   html2canvas IGNORA object-fit -> las botellas salían APLASTADAS (estiradas al
   tamaño de la caja). Y el fondo salía blanco con números blancos invisibles.
   .exporting (se añade en exportPdf; media screen, gana a @media print) fuerza
   fondo oscuro + texto claro y dimensiona las imágenes por su RATIO NATURAL
   (width/height:auto + max-height) — esto es layout, que html2canvas sí respeta. */
#export-target.exporting { background: #0A0A0A !important; padding: 6px; }
#export-target.exporting * { color: var(--bn-fg) !important; }
#export-target.exporting .muted,
#export-target.exporting [class*="muted"],
#export-target.exporting .cava-summary-label { color: var(--bn-muted) !important; }
.exporting .wine-card-img,
.exporting .related-img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: transparent !important;
}
.exporting .wine-card-img { max-height: 96px !important; }
.exporting .related-img { max-height: 128px !important; }

/* Filters drawer → bottom-sheet modal en mobile.
   En desktop el overlay se oculta y el drawer queda in-place. */
.filters-modal-overlay { display: none; }

@media (max-width: 639px) {
  body.filters-modal-open { overflow: hidden; }

  body.filters-modal-open .filters-modal-overlay {
    display: block;
    position: fixed;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 / iOS <14.5 */
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99;
    animation: fadeIn 220ms ease;
  }

  body.filters-modal-open .advanced-filters {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: var(--bn-bg);
    border-top: 1px solid var(--bn-border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow-y: auto;
    z-index: 100;
    padding: var(--s-4);
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    animation: filtersSlideUp 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  /* Handle visual indicador swipeable */
  body.filters-modal-open .advanced-filters::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    margin: 0 auto var(--s-3);
    flex-shrink: 0;
  }
}

@keyframes filtersSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.filters-modal-open .advanced-filters,
  body.filters-modal-open .filters-modal-overlay {
    animation: none;
  }
}

/* --- Auditoría: área táctil mínima (uso por QR en móvil) --- */
.wine-card { min-height: 44px; }
.search-clear,
.maridaje-tag-remove,
.cava-card-remove { padding: 6px; margin: -6px; }

/* --- Auditoría: foco de teclado visible en tarjetas (operables por teclado) --- */
.wine-card:focus-visible,
.cava-card:focus-visible { outline: 2px solid var(--bn-fg); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Pilar 5 — micro-feedback de "press" táctil (solo transform: compositor, 0 reflow) --- */
.wine-card, .cava-card, .related-card,
.chip, .cat-tab, .filter-toggle, .sort-toggle,
.btn-primary, .btn-outline, .btn-secondary, .icon-btn, .action-icon-btn {
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.wine-card:active, .cava-card:active, .related-card:active,
.chip:active, .cat-tab:active, .filter-toggle:active, .sort-toggle:active,
.btn-primary:active, .btn-outline:active, .btn-secondary:active, .icon-btn:active, .action-icon-btn:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .wine-card:active, .cava-card:active, .related-card:active,
  .chip:active, .cat-tab:active, .filter-toggle:active, .sort-toggle:active,
  .btn-primary:active, .btn-outline:active, .btn-secondary:active, .icon-btn:active, .action-icon-btn:active {
    transform: none;
  }
}