/* 24Bajamar · PWA de reserva y recogida
   Móvil primero; a partir de 900px se reorganiza para escritorio. */

:root {
  --rojo: #D7141A;
  --rojo-osc: #A80F14;
  --rojo-suave: #FCE9E7;
  --rojo-texto: #8F1014;
  --tinta: #17171A;
  --gris: #5C5C66;
  --gris-claro: #8A8A94;
  --arena: #F6F4F1;
  --arena-2: #F1EEEA;
  --linea: #E7E3DE;
  --blanco: #FFFFFF;
  --verde: #1F7A4D;
  --verde-suave: #EAF4EE;
  --vino: #6E1D2E;
  --vino-suave: #F3E3E6;
  --vino-fondo: #F7F1EC;

  --radio: 20px;
  --tab-h: 76px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--arena);
  -webkit-font-smoothing: antialiased;
}
body.tema-vino { background: var(--vino-fondo); }
a { color: var(--rojo); }
a:hover { color: var(--rojo-osc); }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid #2E5E8C; outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  /* Fondo sólido: un backdrop-filter aquí convertiría la cabecera en el
     contenedor de la barra de pestañas fija y la subiría arriba en móvil. */
  background: var(--arena);
}
body.tema-vino .topbar { background: var(--vino-fondo); }
.topbar__in {
  max-width: 1180px; margin: 0 auto;
  padding: 12px 20px; padding-top: max(12px, env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca { display: flex; align-items: center; gap: 12px; color: var(--tinta); text-decoration: none; }
.marca:hover { color: var(--tinta); }
.marca__icono {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--rojo); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-style: italic; font-size: 23px; letter-spacing: -1.5px;
  padding-right: 2px;
}
.marca__txt { display: flex; flex-direction: column; gap: 1px; }
.marca__nombre { font-size: 18px; font-weight: 900; font-style: italic; line-height: 1; }
.estado { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gris); }
.estado::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--gris-claro); }
.estado.abierto { color: var(--verde); }
.estado.abierto::before { background: var(--verde); }

.btn-redondo {
  width: 44px; height: 44px; border-radius: 22px; flex: none;
  background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  text-decoration: none;
}
.btn-redondo:hover { color: var(--tinta); border-color: #CFC9C2; }

/* ---------- Barra de pestañas (abajo en móvil) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tab-h) + var(--safe-b));
  padding: 8px 8px var(--safe-b);
  background: var(--blanco); border-top: 1px solid var(--linea);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start;
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0; text-decoration: none; color: var(--gris);
  font-size: 11px; font-weight: 500;
}
.tabbar a[aria-current="page"] { color: var(--rojo); font-weight: 700; }
body.tema-vino .tabbar a[aria-current="page"] { color: var(--vino); }
.tabbar__ico { display: flex; }
.tabbar__cesta {
  justify-self: center; margin-top: -26px;
  width: 60px; height: 60px; border-radius: 30px;
  background: var(--rojo); color: #fff !important;
  justify-content: center; box-shadow: 0 8px 20px rgba(215,20,26,.35);
  position: relative; padding: 0 !important;
}
.tabbar__cesta .tabbar__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--tinta); color: #fff; border: 2px solid #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.badge.pop { animation: pop .3s ease; }
@keyframes pop { 50% { transform: scale(1.3); } }

/* ---------- Vista ---------- */
.vista {
  max-width: 1180px; margin: 0 auto;
  padding: 4px 0 calc(var(--tab-h) + var(--safe-b) + 28px);
  display: flex; flex-direction: column; gap: 22px;
  outline: none;
}
.pad { padding-left: 20px; padding-right: 20px; }
.sec { display: flex; flex-direction: column; gap: 12px; }
.sec__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec__cab h2 { font-size: 19px; font-weight: 800; }
.sec__cab a { font-size: 14px; font-weight: 600; text-decoration: none; }

.cab-vista { display: flex; align-items: center; gap: 14px; }
.cab-vista h1 { font-size: 22px; font-weight: 800; flex: 1; }
.cab-vista .sub { font-size: 13px; color: var(--gris); }

/* Buscador */
.buscador {
  height: 52px; border-radius: 26px; background: var(--blanco); border: 1px solid var(--linea);
  display: flex; align-items: center; gap: 10px; padding: 0 8px 0 18px; color: var(--gris);
}
.buscador input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; color: var(--tinta); }
.buscador:focus-within { border-color: var(--tinta); }

/* Hero */
.hero {
  margin: 0 20px; border-radius: 24px; background: var(--rojo); color: #fff;
  padding: 22px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden;
}
.hero__olas { position: absolute; right: -20px; bottom: 8px; opacity: .18; pointer-events: none; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.hero h1 { font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -.5px; }
.hero p { color: #FFE1DF; max-width: 460px; }
.pasos { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; }
.pasos span { padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.16); }

/* Botones */
.btn {
  height: 52px; padding: 0 22px; border-radius: 26px; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.btn--rojo { background: var(--rojo); color: #fff; }
.btn--rojo:hover { background: var(--rojo-osc); color: #fff; }
.btn--blanco { background: #fff; color: var(--tinta); }
.btn--blanco:hover { color: var(--tinta); background: #F4F4F4; }
.btn--negro { background: var(--tinta); color: #fff; }
.btn--negro:hover { color: #fff; background: #000; }
.btn--borde { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }
.btn--borde:hover { color: var(--tinta); border-color: #CFC9C2; }
.btn--vino { background: var(--vino); color: #fff; }
.btn--vino:hover { background: #4F1420; color: #fff; }
.btn--sm { height: 44px; padding: 0 18px; font-size: 15px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-txt { border: 0; background: none; color: var(--gris); font-weight: 600; text-decoration: underline; padding: 10px; }

.btn-ico {
  width: 36px; height: 36px; border-radius: 18px; border: 0; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tinta); color: #fff;
}
.btn-ico--rojo { background: var(--rojo); }
.btn-ico--gris { background: var(--arena-2); color: var(--tinta); }
.btn-ico--sm { width: 32px; height: 32px; border-radius: 16px; }
.btn-ico--nada { background: transparent; color: var(--gris-claro); }
.btn-ico--nada:hover { color: var(--rojo); }

/* Servicios */
.servicios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.servicio { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); font-size: 12px; font-weight: 600; position: relative; text-align: center; }
.servicio:hover { color: var(--tinta); }
.servicio__ico {
  width: 64px; height: 64px; border-radius: 20px; background: #fff; border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center; color: var(--rojo);
}
.servicio__ico--vino { background: var(--vino); border-color: var(--vino); color: #fff; }
.servicio__ico--txt { color: var(--tinta); font-size: 13px; font-weight: 800; letter-spacing: .5px; }
.etiqueta-pronto { position: absolute; top: -6px; right: 0; padding: 2px 6px; border-radius: 8px; background: var(--tinta); color: #fff; font-size: 10px; font-weight: 700; }

/* Chips */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 40px; padding: 0 16px; border-radius: 20px;
  background: #fff; border: 1px solid var(--linea); color: var(--tinta);
  display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; text-decoration: none;
}
.chip:hover { color: var(--tinta); border-color: #CFC9C2; }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 700; }
.tema-vino .chip[aria-pressed="true"] { background: var(--vino); border-color: var(--vino); }

/* Aviso */
.aviso {
  padding: 12px 14px; border-radius: 14px; background: var(--rojo-suave); color: var(--rojo-texto);
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
}
.aviso svg { flex: none; }
.aviso > span { flex: 1; min-width: 0; line-height: 1.4; }
.aviso--neutro { background: #fff; border: 1px solid var(--linea); color: #3D3D45; font-weight: 500; align-items: flex-start; line-height: 1.45; }
.aviso--error { background: #FDECEC; color: #8F1014; }

/* Tarjetas de producto */
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card {
  background: #fff; border-radius: var(--radio); padding: 10px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
}
.card__img {
  height: 116px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.card__link { color: var(--tinta); text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.card__link:hover { color: var(--tinta); }
.card__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radio); }
.card__nombre { padding: 0 4px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.card__fmt { padding: 0 4px; font-size: 12px; color: var(--gris); margin-top: -4px; }
.card__pie { padding: 0 4px 4px; display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.card__pie .btn-ico { position: relative; z-index: 1; }
.precio { font-size: 16px; font-weight: 800; color: var(--rojo); }
.tag-dom { align-self: flex-start; margin-left: 4px; padding: 3px 8px; border-radius: 8px; background: var(--verde-suave); color: #1F6B44; font-size: 11px; font-weight: 700; }
.card__en-cesta { position: absolute; top: 16px; right: 16px; z-index: 1; padding: 3px 8px; border-radius: 10px; background: var(--tinta); color: #fff; font-size: 11px; font-weight: 700; }

/* Tonos por categoría */
.t-bebidas  { background: #E3EEF8; color: #2E5E8C; }
.t-snacks   { background: #FDEBD8; color: #A3561B; }
.t-lacteos  { background: #EEF0F3; color: #4A5361; }
.t-panaderia{ background: #F6E7CF; color: #8A5A1C; }
.t-limpieza { background: #E2F1EA; color: #1F6B44; }
.t-vinos    { background: #F3E3E6; color: #6E1D2E; }
.t-despensa { background: #EDE4DC; color: #5B3A26; }

/* Banda oscura */
.banda {
  margin: 0 20px; border-radius: 20px; background: var(--tinta); color: #fff;
  padding: 18px; display: flex; align-items: center; gap: 14px; text-decoration: none;
}
.banda:hover { color: #fff; }
.banda--clara { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }
.banda--clara:hover { color: var(--tinta); }
.banda--clara .banda__ico { background: var(--rojo-suave); color: var(--rojo-osc); }
.banda--clara .banda__txt span { color: var(--gris); }
.banda__ico { width: 48px; height: 48px; flex: none; border-radius: 14px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.banda__txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.banda__txt b { font-size: 15px; }
.banda__txt span { font-size: 13px; color: #C9C6C1; }

.ultima {
  margin: 0 20px; border-radius: 20px; background: #fff; border: 1px solid var(--linea);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px; color: var(--tinta); text-decoration: none;
}
.ultima:hover { color: var(--tinta); }
.ultima__cod { font-weight: 900; font-style: italic; color: var(--rojo); font-size: 18px; }

.llegar {
  margin: 0 20px; background: #fff; border-radius: 20px; padding: 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left;
}
.llegar__pin {
  width: 48px; height: 48px; border-radius: 16px; background: var(--rojo-suave); color: var(--rojo-osc);
  display: flex; align-items: center; justify-content: center;
}
.llegar h2 { font-size: 22px; font-weight: 800; }
.llegar p { color: var(--gris); line-height: 1.45; }
.llegar__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ficha de producto */
.ficha__img {
  height: 300px; margin: 0 20px; border-radius: 32px;
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.ficha__img img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.ficha__volver { position: absolute; top: 14px; left: 14px; background: #fff; border: 0; }
.ficha__cuerpo { display: flex; flex-direction: column; gap: 14px; }
.ficha__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ficha__cat { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); }
.ficha h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; margin: 4px 0; }
.ficha__precio { font-size: 18px; font-weight: 800; color: var(--rojo); }
.ficha__desc { color: var(--gris); font-size: 15px; line-height: 1.5; }
.paso { display: flex; align-items: center; gap: 12px; }
.paso__n { min-width: 22px; text-align: center; font-size: 18px; font-weight: 800; }
.paso .btn-ico { width: 44px; height: 44px; border-radius: 22px; }

.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dato { border: 1px solid var(--linea); background: #fff; border-radius: 16px; padding: 12px; display: flex; gap: 10px; align-items: center; }
.dato--pronto { border-style: dashed; border-color: #CFC9C2; background: transparent; }
.dato__ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.dato b { display: block; font-size: 14px; }
.dato span { display: block; font-size: 12px; color: var(--gris); }

.barra-cta {
  position: sticky; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); z-index: 5;
  margin: 0 12px; padding: 12px 12px 12px 20px; border-radius: 28px;
  background: #fff; border: 1px solid var(--linea); box-shadow: 0 10px 30px rgba(23,23,26,.10);
  display: flex; align-items: center; gap: 14px;
}
.barra-cta__total { display: flex; flex-direction: column; }
.barra-cta__total span { font-size: 12px; color: var(--gris); }
.barra-cta__total b { font-size: 20px; font-weight: 800; }
.barra-cta .btn { flex: 1; }

/* Cesta */
.lista { background: #fff; border-radius: 20px; padding: 4px 14px; }
.linea { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EFEBE6; }
.linea:last-child { border-bottom: 0; }
.linea__img { width: 56px; height: 56px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.linea__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.linea__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.linea__info b { font-size: 15px; line-height: 1.2; }
.linea__info small { font-size: 12px; color: var(--gris); }
.linea__cant { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.linea__cant output { min-width: 18px; text-align: center; font-weight: 800; }
.linea__dcha { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.linea__dcha b { font-size: 15px; }

.carrusel { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.mini { flex: none; width: 140px; background: #fff; border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mini .card__img { height: 72px; border-radius: 12px; }
.mini b { font-size: 13px; line-height: 1.2; }
.mini__pie { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

.resumen {
  position: sticky; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); z-index: 5;
  margin: 0 12px; padding: 16px 18px; border-radius: 24px;
  background: #fff; border: 1px solid var(--linea); box-shadow: 0 10px 30px rgba(23,23,26,.10);
  display: flex; flex-direction: column; gap: 6px;
}
.resumen__fila { display: flex; justify-content: space-between; font-size: 14px; color: var(--gris); }
.resumen__total { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 8px; }
.resumen__total span { font-weight: 700; }
.resumen__total b { font-size: 22px; font-weight: 800; }
.gratis { color: var(--verde); font-weight: 700; }

.vacio { padding: 48px 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.vacio__ico { width: 96px; height: 96px; border-radius: 48px; background: #fff; border: 1px solid var(--linea); color: var(--rojo); display: flex; align-items: center; justify-content: center; }
.vacio h2 { font-size: 22px; font-weight: 800; }
.vacio p { color: var(--gris); max-width: 320px; }

/* Formularios */
.form { display: flex; flex-direction: column; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gris); }
.campo input, .campo textarea {
  height: 50px; border-radius: 14px; border: 1px solid var(--linea); background: #fff;
  padding: 0 14px; font-size: 16px; color: var(--tinta); font-weight: 400; width: 100%;
}
.campo textarea { height: 84px; padding: 12px 14px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); }
.campo small { font-weight: 400; color: var(--gris); }
.en-linea { display: flex; gap: 8px; }
.en-linea input { flex: 1; min-width: 0; }
.h2 { font-size: 16px; font-weight: 800; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 10px; }

.franjas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.franja { position: relative; }
.franja input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.franja span {
  height: 56px; border-radius: 16px; border: 2px solid var(--linea); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.franja small { font-size: 12px; color: var(--gris); font-weight: 600; }
.franja b { font-size: 15px; }
.franja input:checked + span { border-color: var(--rojo); background: var(--rojo-suave); }
.franja input:focus-visible + span { outline: 3px solid #2E5E8C; outline-offset: 2px; }

/* Confirmación */
.ok { padding: 32px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ok__check { width: 76px; height: 76px; border-radius: 38px; background: var(--verde-suave); color: #1F6B44; display: flex; align-items: center; justify-content: center; }
.ok h1 { font-size: 26px; font-weight: 800; }
.ok p { color: var(--gris); max-width: 340px; }
.codigo { width: 100%; max-width: 380px; background: #fff; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.codigo--revista { margin: 0 auto 8px; border: 1px solid var(--linea, #ece7e2); text-align: center; }
.codigo--revista span { text-align: center; line-height: 1.4; }
.codigo small { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); }
.codigo b { font-size: 40px; font-weight: 900; font-style: italic; letter-spacing: 3px; color: var(--rojo); }
.codigo span { font-size: 13px; color: var(--gris); }
.ok__btns { width: 100%; max-width: 380px; display: flex; gap: 10px; }
.ok__btns .btn { flex: 1; }

/* Paquetería */
.cab-oscura { background: var(--tinta); color: #fff; padding: 22px 20px 26px; margin-top: -4px; border-radius: 0 0 32px 32px; display: flex; flex-direction: column; gap: 14px; }
.cab-oscura .kicker { color: #C9C6C1; display: flex; align-items: center; gap: 8px; }
.cab-oscura h1 { font-size: 26px; line-height: 1.1; font-weight: 800; }
.cab-oscura p { color: #D9D6D1; }
.cab-oscura .campo { color: #D9D6D1; }
.cab-oscura .campo input { border: 0; }
.operadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.operador { height: 52px; border-radius: 14px; background: #fff; border: 1px solid var(--linea); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 6px; font-size: 13px; font-weight: 700; }
.pasos-lista { background: #fff; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.pasos-lista li { display: flex; gap: 12px; align-items: flex-start; }
.pasos-lista ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: p; }
.pasos-lista li::before { counter-increment: p; content: counter(p); width: 28px; height: 28px; flex: none; border-radius: 14px; background: var(--rojo-suave); color: var(--rojo-osc); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }

/* Vinoteca */
.cab-vino { background: var(--vino); color: #fff; padding: 22px 20px 28px; margin-top: -4px; border-radius: 0 0 32px 32px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.cab-vino__copa { position: absolute; right: -30px; top: 10px; opacity: .1; }
.cab-vino h1 { font-family: var(--serif); font-size: 34px; line-height: 1.05; font-weight: 600; }
.cab-vino p { color: #F1DDE1; max-width: 460px; }
.pastilla { align-self: flex-start; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.vinos { display: flex; flex-direction: column; gap: 10px; }
.vino { background: #fff; border-radius: 20px; padding: 12px; display: flex; gap: 14px; align-items: center; position: relative; }
.revistas { display: flex; flex-direction: column; gap: 12px; }
.revista { background: #fff; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.revista__foto { width: 100%; height: 240px; object-fit: contain; background: #f6f3ef; border-radius: 14px; }
.revista__cab { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.revista__cab b { font-size: 18px; line-height: 1.25; }
.revista__regalo { padding: 4px 10px; border-radius: 10px; background: var(--rojo-suave); color: var(--rojo-osc); font-size: 13px; font-weight: 700; }
.revista .form { width: 100%; }
.revista .btn { align-self: stretch; }

.recetas { display: flex; flex-direction: column; gap: 10px; }
.receta {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 20px; padding: 14px; text-decoration: none; color: var(--tinta);
}
.receta:hover { color: var(--tinta); }
.receta__ico {
  width: 56px; height: 56px; flex: none; border-radius: 16px;
  background: var(--rojo-suave); color: var(--rojo-osc);
  display: flex; align-items: center; justify-content: center;
}
.receta__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.receta__txt b { font-size: 16px; line-height: 1.2; }
.receta__meta { font-size: 12px; font-weight: 700; color: var(--gris); }
.receta__res, .receta__ings { font-size: 13px; color: var(--gris); line-height: 1.35; }
.receta-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.receta-pasos li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 12px 14px; }
.receta-pasos span {
  width: 28px; height: 28px; flex: none; border-radius: 14px;
  background: var(--rojo-suave); color: var(--rojo-osc); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.receta-pasos p { margin: 2px 0 0; line-height: 1.45; }

.vino__img { width: 72px; height: 92px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vino__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.vino__info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vino__do { font-size: 12px; font-weight: 700; color: var(--vino); text-transform: uppercase; letter-spacing: .8px; }
.vino__info b { font-size: 16px; }
.vino__info small { font-size: 13px; color: var(--gris); }
.vino .precio { color: var(--vino); }
.caja { background: #fff; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.letra-pequena { font-size: 12px; color: var(--gris); }
.letra-pequena a { font-weight: 700; }

.pie { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; text-align: center; }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.pie a { color: var(--gris); font-size: 12px; font-weight: 700; text-decoration: none; }
.pie a:hover { color: var(--rojo); }
.pie p { font-size: 12px; color: var(--gris-claro); }

/* Toast */
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 76px); z-index: 40;
  transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: 12px 16px; border-radius: 16px;
  font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100% - 32px);
}
.toast a { color: #FFB3AF; font-weight: 700; }

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  :root { --tab-h: 0px; }
  body { font-size: 16px; }
  .topbar { background: #fff; border-bottom: 1px solid var(--linea); }
  body.tema-vino .topbar { background: #fff; }
  .topbar__in { padding: 14px 24px; }
  .marca__icono { width: 48px; height: 48px; font-size: 26px; }
  .marca__nombre { font-size: 22px; }

  .tabbar {
    position: static; height: auto; padding: 0; border: 0; background: none;
    display: flex; gap: 4px; margin-left: auto;
  }
  .tabbar a { flex-direction: row; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--tinta); }
  .tabbar a:hover { background: var(--arena); color: var(--tinta); }
  .tabbar a[aria-current="page"] { background: var(--rojo-suave); color: var(--rojo-osc); }
  .tabbar__ico svg { width: 20px; height: 20px; }
  .tabbar__cesta {
    margin: 0 0 0 8px; width: auto; height: 44px; border-radius: 22px;
    padding: 0 18px !important; box-shadow: none; order: 9;
  }
  .tabbar__cesta:hover { background: var(--rojo-osc) !important; color: #fff !important; }
  .tabbar__cesta[aria-current="page"] { background: var(--rojo-osc) !important; color: #fff !important; }
  .tabbar__cesta .tabbar__lbl { position: static; width: auto; height: auto; clip: auto; }
  .badge { position: static; border: 0; background: #fff; color: var(--rojo); margin-left: 2px; }

  .vista { padding: 28px 24px 64px; gap: 32px; }
  .pad { padding-left: 0; padding-right: 0; }
  .hero, .banda, .ultima, .llegar { margin-left: 0; margin-right: 0; }
  .hero { padding: 48px; border-radius: 32px; }
  .hero h1 { font-size: 52px; letter-spacing: -1.5px; }
  .hero p { font-size: 18px; }
  .servicios { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .servicio { flex-direction: row; justify-content: flex-start; background: #fff; border-radius: 20px; padding: 14px; font-size: 15px; text-align: left; }
  .servicio__ico { width: 52px; height: 52px; border-radius: 16px; }
  .etiqueta-pronto { position: static; margin-left: auto; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
  .recetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .revistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
  .card__img { height: 150px; }
  .sec__cab h2 { font-size: 26px; }
  .cab-oscura, .cab-vino { border-radius: 32px; margin-top: 0; padding: 40px; }
  .ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .ficha__img { margin: 0; height: 460px; }
  .barra-cta, .resumen { position: static; margin: 0; box-shadow: none; }
  .cesta-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .cesta-grid .resumen { position: sticky; top: 100px; }
  .reserva-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .reserva-grid .resumen { position: sticky; top: 100px; }
  .franjas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .toast { top: auto; bottom: 24px; }
}

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