@font-face{font-family:'Jost';font-style:normal;font-weight:400 600;font-display:swap;src:url(fuentes/jost.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url(fuentes/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-cursiva.woff2) format('woff2')}
/* Colores generados desde data/temas.json */
:root{--fondo:#FBF3E2;--superficie:#FFFCF5;--panel:#FBF0CD;--borde:#E8DDC7;--borde-fuerte:#D9CBB0;--campo:#CBB99A;--texto:#4A3418;--texto-2:#6B5A48;--titulo:#693B26;--etiqueta:#7A5C0E;--acento:#D6B531;--acento-halo:rgba(214,181,49,.25);--boton:#4A3418;--boton-texto:#FBF3E2;--banda:#693B26;--banda-borde:#693B26;--banda-texto:#FBF3E2;--banda-2:#E9DCC2;--banda-etiqueta:#F3D98A;--banda-boton:#FBF3E2;--banda-boton-texto:#4A3418;--pie:#4A3418;--pie-texto:#FBF3E2;--pie-2:#E9DCC2;--marca-fondo:#FBE3D2;--marca-texto:#8A3B12;--marca-borde:#C9773F;--velo:rgba(43,30,14,.55);--sombra:rgba(43,30,14,.25)}
[data-tema="octubre"]{--fondo:#1A120C;--superficie:#241912;--panel:#36241A;--borde:#3B2B1F;--borde-fuerte:#5E4734;--campo:#8C7259;--texto:#F5EBDD;--texto-2:#CBB79F;--titulo:#F29B52;--etiqueta:#F2B565;--acento:#EE7D2A;--acento-halo:rgba(238,125,42,.3);--boton:#EE7D2A;--boton-texto:#1A120C;--banda:#35193F;--banda-borde:#4E2C5A;--banda-texto:#F5EBDD;--banda-2:#D3C2D6;--banda-etiqueta:#F2B565;--banda-boton:#EE7D2A;--banda-boton-texto:#1A120C;--pie:#100A06;--pie-texto:#F5EBDD;--pie-2:#C3AF97;--marca-fondo:#4A2614;--marca-texto:#FFC9A1;--marca-borde:#D9874B;--velo:rgba(0,0,0,.62);--sombra:rgba(0,0,0,.5)}
/* Estilos de Alba. Los colores (--fondo, --texto…) se generan desde data/temas.json; aquí no se escriben valores de tema. */

*, *::before, *::after { box-sizing: border-box; }
/* --alto-chips: alto de la barra fija de categorías; app.js lo ajusta al tamaño real. */
:root { --alto-chips: 70px; }
@media (min-width: 768px) { :root { --alto-chips: 124px; } }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-chips) + 16px);
  scroll-padding-bottom: 24px;
  background: var(--fondo);
}
html.con-barra { scroll-padding-bottom: 104px; }
html.con-dialogo { overflow: hidden; }
[data-tema="octubre"] { color-scheme: dark; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--texto); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
::selection { background: var(--acento-halo); }
[hidden] { display: none !important; }
.no-js [data-requiere-js] { display: none !important; }
html:not([data-tema="octubre"]) .solo-octubre { display: none !important; }
[data-tema="octubre"] .solo-alba { display: none !important; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.envoltura { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.icono {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icono[data-tono="etiqueta"] { stroke: var(--etiqueta); }

.saltar {
  position: absolute; left: 16px; top: -120px; z-index: 60;
  padding: 12px 18px; border-radius: 12px;
  background: var(--boton); color: var(--boton-texto); font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* Títulos con Cormorant Garamond */
.portada h1, .seccion h2, .temporada h2, .cat-cabeza h3, .pedido-cabeza h2, .enviado h2, .lema, .frase {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
.portada h1, .seccion h2, .temporada h2, .cat-cabeza h3, .pedido-cabeza h2, .enviado h2 {
  font-weight: 600; letter-spacing: -0.01em; color: var(--titulo);
}
.sobretitulo {
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--etiqueta);
}

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.boton:active { transform: scale(.98); }
.boton-grande { min-height: 52px; padding: 0 28px; font-size: 17px; }
.boton-lleno { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.boton-borde { background: transparent; color: var(--texto); border-color: var(--texto); }
@media (hover: hover) {
  .boton-lleno:hover { color: var(--boton-texto); filter: brightness(1.1); }
  .boton-borde:hover { color: var(--texto); background: var(--panel); }
  a:hover { color: var(--titulo); }
  .chip:hover { border-color: var(--texto); color: var(--texto); }
  .agregar:hover { background: var(--panel); color: var(--texto); }
}
.boton-icono {
  width: 44px; height: 44px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--texto);
  cursor: pointer;
}
.boton-icono[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.boton-texto {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px;
  border: 0; background: transparent; color: var(--texto); font-size: 15px; font-weight: 500; cursor: pointer;
}
.boton-texto.centrado { align-self: center; text-decoration: underline; }

.agregar {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; border: 1.5px solid var(--texto); background: transparent; color: var(--texto);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.agregar .icono { width: 16px; height: 16px; stroke-width: 2; }
.agregar .agregar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.agregar-visible { width: auto; min-height: 44px; padding: 0 18px; font-size: 15px; }
.agregar-visible .agregar-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.agregar.agregado { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.agregar:disabled { opacity: .55; cursor: not-allowed; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  background: var(--panel); color: var(--etiqueta); font-size: 12px; font-weight: 600; line-height: 1.5;
}
.por-confirmar {
  display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px;
  border: 1px dashed var(--marca-borde); background: var(--marca-fondo); color: var(--marca-texto);
  font-family: 'Jost', sans-serif; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.5;
  vertical-align: middle;
}
.revision-banda {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  padding: 10px 16px; font-size: 14px;
  background: var(--marca-fondo); color: var(--marca-texto); border-bottom: 1px dashed var(--marca-borde);
}
.revision-banda a { color: var(--marca-texto); font-weight: 600; }
.nota-revision { font-size: 14px; color: var(--texto-2); }

/* Cabecera */
.cabecera { display: flex; align-items: center; gap: 8px; min-height: 64px; padding-block: 8px; }
.logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.logo img { height: 28px; width: auto; }
.nav-secciones { display: flex; align-items: center; gap: 0 4px; }
.nav-secciones a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 16px; font-weight: 500; text-decoration: none;
}
.solo-amplio { display: none !important; }
.boton-pedido {
  position: relative; width: 44px; height: 44px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--texto);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.boton-pedido-texto { display: none; }
.contador {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--boton); color: var(--boton-texto);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Portada */
.portada { display: flex; flex-direction: column; gap: 18px; }
.portada-foto { position: relative; order: -1; }
.foto-portada { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; }
/* Video de portada (generar.mjs → carruselPortada, app.js → conectarVideos). El póster es el fondo de .carrusel
   (las variables --carrusel-* las escribe generar.mjs): el navegador baja solo el del formato y el tema que se ven.
   El video se encima cuando ya se reproduce. Las orillas del video tienen el color de fondo exacto de la página, así
   que no se nota el recuadro. Celular: se ve la franja y = 360…1190 del video de 1080 × 1920 (ahí están las bebidas). */
.carrusel {
  position: relative; aspect-ratio: 1080 / 830; pointer-events: none;
  background: var(--carrusel-movil, none) 50% 33.03% / 100% auto no-repeat;
}
[data-tema="octubre"] .carrusel { background-image: var(--carrusel-movil-octubre, var(--carrusel-movil, none)); }
.carrusel-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 33.03%;
  opacity: 0; transition: opacity .6s ease;
}
.carrusel-video.reproduciendo { opacity: 1; }
.carrusel ~ .emblema-foto { bottom: -40px; }
.portada-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.sol-portada, .emblema-titulo, .hojas-portada { display: none; }
.emblema svg { display: block; width: 100%; height: 100%; }
.emblema-foto { position: absolute; right: 20px; bottom: -24px; width: 64px; height: 64px; }
.estado {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 999px;
  background: var(--panel); font-size: 14px; font-weight: 500;
}
.estado-punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px var(--acento-halo); }
.estado[data-abierto="false"] .estado-punto { background: var(--texto-2); box-shadow: none; }
.portada h1 { font-size: clamp(36px, 10vw, 44px); line-height: 1.02; }
[data-tema="octubre"] .portada h1 { color: var(--texto); }
.portada h1 em { font-style: italic; font-weight: 500; color: var(--titulo); }
.portada-sub { font-size: 16px; line-height: 1.45; color: var(--texto-2); max-width: 30em; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.portada .acciones { margin-top: 4px; }
.portada .acciones .boton { flex: 1 1 auto; padding-inline: 18px; }
.datos-cortos { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--texto-2); }
.datos-cortos li { display: flex; align-items: flex-start; gap: 10px; }
.datos-cortos .icono { margin-top: 2px; }
.nota-pasos { font-size: 13px; line-height: 1.4; color: var(--texto-2); }

/* Secciones */
.seccion { padding-top: 56px; }
.seccion-cabeza { display: flex; flex-direction: column; gap: 8px; max-width: 680px; margin-bottom: 20px; }
.seccion h2 { font-size: clamp(34px, 9vw, 52px); line-height: 1.05; }
.seccion-cabeza p { font-size: 15px; color: var(--texto-2); }
.sin-js { padding: 12px 14px; border-radius: 12px; background: var(--panel); color: var(--texto); }

/* Bebida del mes: tarjeta destacada. En celular la foto (o el video) ocupa todo el ancho; en escritorio va a la izquierda. */
.temporada { display: none; padding-top: 40px; }
.banda {
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px 16px 22px; border-radius: 28px;
  border: 1px solid var(--banda-borde); background: var(--banda); color: var(--banda-texto);
  box-shadow: 0 18px 48px var(--sombra);
}
.banda-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.banda-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-inline: 4px; }
.sol-banda { width: 64px; flex: none; }
.adorno-banda { width: 64px; height: 64px; flex: none; }
.adorno-banda svg { width: 100%; height: 100%; display: block; }
.banda-info > .foto-video { flex: none; }
.banda .foto-video-clip { border-radius: 20px; }
.banda-foto { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px; border: 1px solid var(--banda-borde); }
@media (hover: hover) { .js .banda[data-producto]:hover { border-color: var(--banda-2); } }
.banda .sobretitulo { color: var(--banda-etiqueta); font-size: 14px; }
.temporada h2 { font-size: clamp(34px, 10vw, 44px); line-height: 1.05; color: var(--banda-texto); }
.banda-nota { font-size: 16px; color: var(--banda-2); }
.banda-accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-inline: 4px; }
.banda-precio { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.banda-boton { min-height: 52px; padding: 0 26px; font-size: 17px; border: 0; background: var(--banda-boton); color: var(--banda-boton-texto); }
@media (hover: hover) { .banda-boton:hover { background: var(--banda-boton); color: var(--banda-boton-texto); filter: brightness(1.08); } }

/* Para empezar */
.destacados {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: -16px; padding: 0 16px 8px; scroll-padding-inline: 16px; scrollbar-width: none;
}
.destacados::-webkit-scrollbar { display: none; }
.destacado {
  scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; overflow: hidden;
}
.d-foto { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; }
.d-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }
.destacado .p-nombre { font-size: 19px; }
.destacado .p-precio { font-size: 18px; }
.d-pie { margin-top: auto; padding-top: 6px; }

/* Menú */
.chips {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-inline: -16px; padding: 12px 16px;
  background: var(--fondo); border-bottom: 1px solid var(--borde);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto);
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.chip[aria-current] { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
@media (hover: hover) { .chip[aria-current]:hover { color: var(--boton-texto); border-color: var(--boton); } }
.categorias { display: flex; flex-direction: column; gap: 44px; padding-top: 20px; }
.cat-cabeza {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--borde);
}
.cat-cabeza h3 { font-size: 30px; line-height: 1.1; }
.cat-cabeza p { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.productos { display: grid; gap: 10px; }

.producto {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; align-items: center; gap: 12px;
  padding: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
}
.producto.sin-foto { grid-template-columns: minmax(0, 1fr) 44px; }
.p-foto { width: 72px; height: 72px; object-fit: cover; object-position: center; border-radius: 12px; background: var(--panel); }
.p-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-cabeza { display: flex; flex-direction: column; gap: 2px; }
.p-nombre { font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.p-precio { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-desc { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.producto .etiquetas { margin-top: 2px; }
.p-monograma, .cat-cuenta { display: none; }

/* Celular: cada categoría es una fila que se desliza de lado, en vez de una lista larga hacia abajo. */
@media (max-width: 767.98px) {
  .categorias { gap: 32px; }
  .cat-cabeza { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 12px; }
  .cat-cabeza p { flex-basis: 100%; }
  .cat-cuenta { display: inline; font-size: 13px; color: var(--texto-2); white-space: nowrap; }
  .productos {
    --tarjeta: 152px;
    grid-auto-flow: column; grid-auto-columns: var(--tarjeta); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: -16px; padding: 2px 16px 10px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .productos::-webkit-scrollbar { display: none; }
  .producto, .producto.sin-foto {
    position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch;
    gap: 0; padding: 0; overflow: hidden; scroll-snap-align: start;
  }
  .p-foto, .p-monograma { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; }
  .p-monograma {
    display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--titulo);
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 64px; font-weight: 600; line-height: 1;
  }
  .p-info { padding: 10px 12px 12px; gap: 3px; }
  .p-nombre { font-size: 15px; line-height: 1.25; }
  .p-desc { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .producto .agregar {
    position: absolute; top: calc(var(--tarjeta) - 52px); right: 8px;
    background: var(--fondo); box-shadow: 0 2px 10px var(--sombra);
  }
  .producto .agregar.agregado { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
}

/* Cómo pedir */
.como-pedir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px;
  padding: 24px; border-radius: 28px; background: var(--panel);
}
.como-pedir-texto { flex: 1 1 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.pasos { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.pasos li { display: flex; align-items: flex-start; gap: 16px; }
.pasos h3 { font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.pasos p { color: var(--texto-2); }
.paso-numero {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1.5px solid var(--texto);
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 17px;
}
.aviso { padding: 12px 16px; border-radius: 14px; background: var(--superficie); font-size: 15px; }
.como-pedir-foto { flex: 1 1 240px; max-width: 400px; min-width: 0; }
.foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
/* Foto con video en bucle encima (generar.mjs → conVideo, app.js → conectarVideos): el video aparece
   cuando ya se reproduce; sin JavaScript o con movimiento reducido se queda la foto. */
.foto-video { position: relative; }
.foto-video-clip {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.foto-video-clip.reproduciendo { opacity: 1; }

/* Nosotros */
.nosotros-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 24px; margin-bottom: 24px; }
.nosotros-texto { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.frase { font-style: italic; font-weight: 500; font-size: clamp(21px, 5.6vw, 26px); line-height: 1.4; }
.nosotros-fotos {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: -16px; padding: 0 16px 8px; scroll-padding-inline: 16px; scrollbar-width: none;
}
.nosotros-fotos::-webkit-scrollbar { display: none; }
.nosotros-fotos .foto { scroll-snap-align: start; }

/* Visítanos */
.visitanos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 56px; padding-bottom: 56px; }
.visitanos-foto { flex: 1 1 300px; max-width: 460px; min-width: 0; }
.visitanos-foto .foto { aspect-ratio: 4 / 3; border-radius: 24px; }
.visitanos-texto { flex: 1 1 380px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
address { font-style: normal; font-size: 18px; line-height: 1.55; }
.horario { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.horario-semana { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.horario-semana li {
  display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.horario-semana li.es-hoy { background: var(--panel); font-weight: 600; }
.horario-semana .dia { display: inline-flex; align-items: center; gap: 10px; }
.marca-hoy { padding: 1px 8px; border-radius: 999px; background: var(--boton); color: var(--boton-texto); font-size: 12px; font-weight: 600; }

/* Pie */
.pie { background: var(--pie); color: var(--pie-texto); }
html.con-barra .pie { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.pie-columnas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px; padding-block: 48px 32px; }
.pie-columnas > div { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; }
.pie-marca img { width: auto; height: 40px; align-self: flex-start; }
.pie .lema { font-style: italic; font-size: 22px; }
.pie .sobretitulo { color: var(--pie-2); }
.pie p { font-size: 15px; line-height: 1.6; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pie-texto); font-size: 15px; }
.pie-enlaces { gap: 0 !important; }
.pie-enlaces .sobretitulo { margin-bottom: 4px; }
.pie-legal { border-top: 1px solid var(--borde-fuerte); border-top-color: color-mix(in srgb, var(--pie-texto) 18%, transparent); }
.pie-legal .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px; font-size: 13px; color: var(--pie-2); }

/* Barra inferior del pedido (celular) */
.barra-pedido { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; }
.barra-pedido .boton {
  width: 100%; min-height: 56px; justify-content: space-between; padding: 0 22px;
  box-shadow: 0 10px 28px var(--sombra); font-variant-numeric: tabular-nums;
}
.barra-izq { display: inline-flex; align-items: center; gap: 10px; }
.barra-pedido .boton.pulso { animation: pulso .45s ease; }
@keyframes pulso { 40% { transform: scale(1.04); } }

/* Diálogos */
dialog { padding: 0; border: 0; color: var(--texto); background: var(--fondo); max-width: 100%; max-height: 100%; }
dialog::backdrop { background: var(--velo); }
.hoja[open] { display: flex; flex-direction: column; animation: subir .28s cubic-bezier(.2, .8, .2, 1); }
.hoja { width: 100%; margin: auto 0 0; inset: 0; box-shadow: 0 -12px 32px var(--sombra); }
.hoja-opciones { max-height: 92dvh; border-radius: 24px 24px 0 0; overflow: hidden; }
.hoja-pedido { height: 100dvh; max-height: 100dvh; border-radius: 0; }
/* flex 1 1 auto (no flex: 1): Safari calcula en cero la altura de un hijo con base 0 % cuando el diálogo no tiene
   altura fija (la ficha mide lo que su contenido, hasta 92dvh) y la ficha no se veía en el iPhone. */
.hoja-marco { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hoja-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 22px; padding: 18px 16px;
}
@keyframes subir { from { transform: translateY(32px); opacity: 0; } }
@keyframes deslizar { from { transform: translateX(32px); opacity: 0; } }
/* Ficha del producto: en celular la foto se desplaza con el contenido y «Agregar» queda fijo abajo. */
.op-marco { display: block; overflow-y: auto; overscroll-behavior: contain; }
.op-barra { position: sticky; top: 0; height: 0; z-index: 3; }
.asa {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 999px; background: var(--borde-fuerte);
}
.op-cerrar { position: absolute; top: 12px; right: 12px; background: var(--fondo); box-shadow: 0 2px 10px var(--sombra); }
.op-figura { margin: 0; background: var(--panel); }
.op-imagen { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.op-contenido { display: flex; flex-direction: column; gap: 22px; padding: 22px 16px 18px; }
.op-titulos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hoja-opciones:not(.con-foto) .op-titulos { padding-right: 56px; padding-top: 6px; }
.op-titulos h2 { font-size: 24px; line-height: 1.2; font-weight: 600; }
.hoja-opciones .hoja-pie { position: sticky; bottom: 0; z-index: 2; }
/* cursor: pointer también en celular: Safari de iPhone solo entrega el toque (click) a elementos marcados como tocables,
   y sin esto tocar la foto o el nombre de un producto no abría la ficha. */
.js [data-producto] { cursor: pointer; }
@media (hover: hover) {
  .js [data-producto] { transition: border-color .2s ease; }
  .js [data-producto]:hover { border-color: var(--borde-fuerte); }
}
.op-titulos h2:focus { outline: none; }
.op-precio { font-size: 15px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.op-desc { font-size: 15px; color: var(--texto-2); }
.op-grupos { display: flex; flex-direction: column; gap: 22px; }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo legend {
  width: 100%; padding: 0; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 17px; font-weight: 600;
}
.legend-marca { padding: 1px 8px; border-radius: 999px; background: var(--panel); color: var(--etiqueta); font-size: 12px; font-weight: 600; }
.legend-ayuda { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.grupo .error { margin-top: 8px; }
.grupo[aria-invalid="true"] .pildora span, .grupo[aria-invalid="true"] .fila { border-color: var(--marca-texto); }

.pildoras, .dias { display: flex; flex-wrap: wrap; gap: 10px; }
.pildora { position: relative; flex: 1 1 auto; display: flex; cursor: pointer; }
.pildora input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pildora span {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
  border-radius: 999px; border: 1.5px solid var(--texto); background: var(--superficie);
  font-weight: 600; text-align: center; transition: background-color .15s ease, color .15s ease;
}
.pildora input:checked + span { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.pildora input:focus-visible + span { outline: 2px solid var(--texto); outline-offset: 3px; }

.filas { display: flex; flex-direction: column; gap: 8px; }
.fila {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px;
  border: 1px solid var(--borde-fuerte); border-radius: 14px; background: var(--superficie); cursor: pointer;
}
.fila input[type="radio"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--boton); }
@media (hover: hover) {
  .pildora:hover input:not(:checked) + span { background: var(--panel); }
  .fila:hover { border-color: var(--texto); }
}
.fila:has(input:checked) { border: 1.5px solid var(--boton); background: var(--panel); font-weight: 600; }
.fila-nombre { flex: 1; min-width: 0; }
.fila-precio { font-size: 15px; font-weight: 400; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--texto-2); cursor: pointer;
  transition: background-color .2s ease;
}
.switch::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--superficie); transition: transform .2s ease;
}
.switch:checked { background: var(--boton); }
.switch:checked::before { transform: translateX(18px); }
.interruptor:has(.switch:checked) { border: 1.5px solid var(--boton); background: var(--panel); }

.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-size: 17px; font-weight: 600; }
.opcional { font-weight: 400; color: var(--texto-2); }
.campo input, .campo select, .campo textarea, .copia-manual textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--texto-2); background: var(--superficie); color: var(--texto); font-size: 16px;
}
.campo textarea, .copia-manual textarea { padding: 12px 14px; line-height: 1.4; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-2); opacity: .85; }
.campo [aria-invalid] { border-color: var(--marca-texto); box-shadow: 0 0 0 1px var(--marca-texto); }
.contador-texto { align-self: flex-end; font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.error { font-size: 14px; font-weight: 500; color: var(--marca-texto); }
.error:empty { display: none; }
.ayuda { font-size: 13px; color: var(--texto-2); }

.hoja-pie {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde); background: var(--fondo);
}
.cantidad { flex: none; display: flex; align-items: center; height: 52px; padding: 0 4px; border: 1px solid var(--texto-2); border-radius: 999px; }
.cantidad .boton-icono { border: 0; }
.cantidad output, .cantidad-numero { min-width: 26px; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.op-agregar { flex: 1; font-variant-numeric: tabular-nums; }

.hoja-barra { display: flex; align-items: center; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--borde); flex: none; }
.pedido-cuerpo { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.pedido-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pedido-cabeza h2 { font-size: 38px; line-height: 1.05; }
.pedido-cabeza h2:focus, .enviado h2:focus { outline: none; }
.pedido-conteo { font-size: 15px; color: var(--texto-2); }
.avisos { display: flex; flex-direction: column; gap: 8px; }
.avisos:empty { display: none; }
.avisos p, .linea-alerta {
  padding: 10px 12px; border-radius: 12px; font-size: 14px;
  background: var(--marca-fondo); color: var(--marca-texto); border: 1px dashed var(--marca-borde);
}
.deshacer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 4px 4px 14px; border-radius: 12px; background: var(--panel); font-size: 14px;
}
.deshacer .boton-texto { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pedido-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--texto-2); }
[data-con-productos] { display: flex; flex-direction: column; gap: 22px; }
.lineas { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.linea { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; }
.linea.no-disponible { border-color: var(--marca-borde); }
.linea-arriba { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.linea-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linea-nombre { font-size: 16px; line-height: 1.3; font-weight: 600; }
.linea-detalle, .linea-nota { font-size: 14px; line-height: 1.4; color: var(--texto-2); overflow-wrap: anywhere; }
.linea-nota { font-style: italic; }
.linea-precios { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.linea-importe { font-weight: 600; }
.linea-formula { font-size: 13px; color: var(--texto-2); }
.linea-abajo { display: flex; align-items: center; justify-content: space-between; }
.linea .cantidad { height: 46px; }
.quitar {
  min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--texto-2);
  font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.total { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--borde); }
.total-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.total-fila span { font-size: 17px; font-weight: 600; }
.total-fila strong { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.total p { font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.bloque { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.bloque h3, .bloque legend { padding: 0; font-size: 17px; font-weight: 600; }
.cuando legend { margin-bottom: 10px; }
.cuando .dias { margin-bottom: 14px; }
.cuando .campo label { font-size: 15px; }
.recoger { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--boton); background: var(--panel); }
.recoger > div { display: flex; flex-direction: column; }
.recoger span { font-size: 14px; color: var(--texto-2); }
[data-con-productos] > .aviso { background: var(--panel); padding: 14px 16px; }
.error-envio:empty { display: none; }
.error-envio {
  padding: 12px 14px; border-radius: 12px; font-size: 14px;
  border: 1px solid var(--marca-borde); background: var(--marca-fondo); color: var(--marca-texto);
}
.error-envio ul { margin: 6px 0 0; padding-left: 20px; }
.enviar { display: flex; flex-direction: column; gap: 8px; }
.enviar .boton { width: 100%; min-height: 56px; }
.enviar .boton[aria-disabled="true"] { opacity: .55; }
.enviar p { text-align: center; font-size: 13px; color: var(--texto-2); }

.enviado { gap: 16px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); }
.enviado-icono { width: 64px; height: 64px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; flex: none; }
.enviado-icono .icono { width: 28px; height: 28px; }
.enviado h2 { font-size: 36px; line-height: 1.05; }
.enviado-sub { color: var(--texto-2); }
.enviado .aviso-fuerte { background: var(--panel); padding: 14px 16px; font-weight: 600; }
.enviado-acciones { display: flex; flex-direction: column; gap: 10px; }
.enviado-acciones .boton { width: 100%; }
.copia-estado { font-size: 14px; color: var(--texto-2); }
.copia-estado:empty { display: none; }
.enviado .sobretitulo { margin-top: 8px; }
.mensaje {
  margin: 0; padding: 16px; border-radius: 16px; border: 1px solid var(--borde); background: var(--superficie);
  font-family: inherit; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.copia-manual { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* Tableta y escritorio */
@media (min-width: 768px) {
  .envoltura { padding-inline: 24px; }
  .seccion { padding-top: clamp(64px, 7vw, 96px); }
  .seccion-cabeza { margin-bottom: 24px; }
  .seccion-cabeza p { font-size: 17px; }
  .destacados {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; overflow: visible; margin: 0; padding: 0;
  }
  .d-cuerpo { padding: 18px 18px 20px; }
  .destacado .p-cabeza { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 10px; }
  .categorias { gap: 56px; }
  .cat-cabeza { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-bottom: 12px; margin-bottom: 18px; }
  .cat-cabeza h3 { font-size: 34px; }
  .cat-cabeza p { font-size: 15px; }
  .productos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  .producto { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: start; gap: 10px 14px; padding: 14px; }
  .producto.sin-foto { grid-template-columns: minmax(0, 1fr); }
  .p-foto { width: 88px; height: 88px; grid-row: 1 / 3; }
  .p-cabeza { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .p-precio { font-size: 16px; flex: none; }
  .p-desc { font-size: 14px; line-height: 1.45; }
  .producto .agregar { grid-column: -2 / -1; justify-self: end; width: auto; padding: 0 16px; }
  .producto .agregar-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .banda {
    display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); grid-template-rows: 1fr auto;
    column-gap: clamp(28px, 4vw, 56px); row-gap: 24px; align-items: center; padding: 28px;
  }
  .banda-info { display: contents; }
  .banda-info > .foto-video, .banda-info > .banda-foto, .banda-info > .sol-banda, .banda-info > .adorno-banda { grid-column: 1; grid-row: 1 / 3; }
  .banda-texto { grid-column: 2; grid-row: 1; align-self: end; gap: 10px; padding: 0; }
  .banda-accion { grid-column: 2; grid-row: 2; align-self: start; justify-content: flex-start; gap: 16px 28px; padding: 0; }
  .temporada h2 { font-size: clamp(44px, 5vw, 68px); }
  .banda-nota { font-size: 18px; }
  .banda-precio { font-size: 36px; }
  .como-pedir { padding: clamp(28px, 4vw, 56px); }
  .nosotros-fotos { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; margin: 0; padding: 0; }
  .visitanos { padding-bottom: clamp(64px, 7vw, 96px); }
  .visitanos-foto .foto { aspect-ratio: 4 / 5; }
  address { font-size: 19px; }
  .pie-columnas { padding-block: 56px 40px; }
  .hoja-opciones { width: min(520px, calc(100vw - 48px)); max-height: min(780px, 90dvh); margin: auto; border-radius: 24px; box-shadow: 0 24px 64px var(--sombra); }
  .hoja-opciones .asa { display: none; }
  .hoja-cuerpo, .op-contenido { padding-inline: 24px; }
  .hoja-pie { padding-inline: 24px; padding-bottom: 20px; }
}

@media (min-width: 900px) {
  .cabecera { gap: 24px; min-height: 84px; padding-block: 20px; }
  .logo img { height: 34px; }
  .nav-secciones { gap: 0 8px; }
  .solo-amplio { display: inline-flex !important; }
  .boton-pedido { width: auto; height: 46px; padding: 0 18px; border-color: var(--texto); }
  .boton-pedido-texto { display: inline; }
  .contador { position: static; min-width: 22px; height: 22px; padding: 0 6px; }
  .portada { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 24px; }
  .portada-texto { flex: 1 1 440px; gap: 22px; }
  .portada-foto { order: 0; flex: 1 1 380px; max-width: 540px; }
  .foto-portada { border-radius: 28px; }
  /* Video de portada en escritorio: sale de la columna hacia la izquierda (detrás del texto, donde el video es fondo
     liso) y hacia la orilla derecha de la pantalla; las bebidas, en el 56 % derecho del video, llenan la columna. */
  .portada-texto { position: relative; z-index: 1; }
  .carrusel {
    --sangria: min(140px, calc((100vw - min(100vw, 1200px)) / 2 + 8px));
    width: calc((100% + var(--sangria)) / .57);
    margin-left: calc(100% + var(--sangria) - (100% + var(--sangria)) / .57);
    aspect-ratio: 16 / 9;
    background-image: var(--carrusel-escritorio, none); background-position: 50% 50%; background-size: cover;
  }
  [data-tema="octubre"] .carrusel { background-image: var(--carrusel-escritorio-octubre, var(--carrusel-escritorio, none)); }
  .carrusel-video { object-position: 50% 50%; }
  .sol-portada { display: block; width: 76px; }
  .emblema-titulo { display: block; width: 88px; height: 88px; }
  .emblema-foto, .nota-pasos { display: none; }
  .hojas-portada { display: block; position: absolute; top: -34px; right: -20px; width: 120px; height: 96px; pointer-events: none; }
  .hojas-portada svg { width: 100%; height: 100%; display: block; }
  .estado { padding: 8px 14px; font-size: 15px; }
  .portada h1 { font-size: clamp(46px, 5.4vw, 78px); line-height: 1; max-width: 11ch; }
  [data-tema="octubre"] .portada h1 { max-width: 12ch; }
  .portada-sub { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }
  .acciones { width: auto; gap: 12px; }
  .portada .acciones .boton { flex: none; padding-inline: 28px; }
  .temporada { padding-top: clamp(40px, 5vw, 64px); }
  .barra-pedido { left: auto; right: 24px; bottom: 24px; width: min(380px, calc(100vw - 48px)); }
  .hoja-pedido { width: min(460px, 100vw); margin: 0 0 0 auto; box-shadow: -16px 0 48px var(--sombra); }
  .hoja-pedido[open] { animation-name: deslizar; }
  /* Ficha con foto en escritorio: foto completa a la izquierda, opciones a la derecha. */
  .hoja-opciones.con-foto { --lado: min(480px, 86dvh); width: min(calc(var(--lado) + 440px), calc(100vw - 48px)); height: var(--lado); max-height: none; }
  .hoja-opciones.con-foto .op-marco { display: grid; grid-template-columns: var(--lado) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
  .hoja-opciones.con-foto .op-figura { grid-column: 1; grid-row: 1 / 3; height: 100%; }
  .hoja-opciones.con-foto .op-imagen { height: 100%; }
  .hoja-opciones.con-foto .op-contenido { grid-column: 2; grid-row: 1; overflow-y: auto; overscroll-behavior: contain; }
  .hoja-opciones.con-foto .op-titulos { padding-right: 56px; }
  .hoja-opciones.con-foto .hoja-pie { grid-column: 2; grid-row: 2; position: static; }
  .hoja-opciones.con-foto .op-barra { position: absolute; top: 0; right: 0; height: auto; }
}

@media (min-width: 1240px) {
  .hojas-portada { right: -28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .boton:active { transform: none; }
  .foto-video-clip, .carrusel-video { display: none; }
}

html.ver-pumpkin-chai-latte [data-temporada="pumpkin-chai-latte"]{display:block}