/* ============================================================
   Wö Kàpi Panadería y Repostería (/panaderia), 1 de octubre de 2026.
   Hoja entera del portal (la maqueta del juez, integrada). Carga después de las hojas del
   sistema (SISTEMA.md) y solo usa sus variables, su grilla y sus clases de letra y botón.
   Lee html.js (la marca del sistema), nunca el alias viejo de Webflow.

   Portada (de la maqueta 2): una sola columna de lectura en la línea del logo, el titular, la
   bajada y el acceso, que es el pico; a la derecha, desde 992, una sola foto en el arco de la
   marca, la misma de la puerta «Panadería» del inicio, con el alto exacto de la columna.
   Por debajo de 992 no hay foto: titular, bajada y acceso.
   Catálogo con sesión (de la maqueta 1, con el buscador a lo ancho y el dibujo de la 2): lo
   arma js/panaderia.js, que esta hoja no toca. Una lista de precios: foto chica, nombre en
   Recoleta, ingredientes debajo, precio y acción en columnas fijas. Una lista no deja huecos
   ni piezas solas al final, tenga el catálogo los productos que tenga.

   1. Base del portal          5. Catálogo: cabecera, correo, herramientas
   2. Portada                  6. Catálogo: la lista
   3. Formularios              7. Pedido (columna, barra de abajo y hoja)
   4. Estado de carga          8. Movimiento reducido
   ============================================================ */

/* ============================================================
   1. Base del portal
   ============================================================ */
html { --pan-barra-alto: 64px; }
.pan {
  /* Texto secundario: carbón al 82 % sobre crema (7,6:1). Fotos mientras cargan: tostado al 30 %. */
  --pan-suave: rgba(43, 43, 43, .82);
  --pan-foto-espera: rgba(196, 154, 108, .3);
  color: var(--tinta);
}
.pan [hidden] { display: none !important; }
/* El export de Webflow pone p { display: flex } en todo el sitio */
:where(.pan) p { display: block; }
.pan img { max-width: 100%; height: auto; }
/* Los botones con cara de botón (.boton y .pan-boton) van en Recoleta: no heredan la letra. */
.pan button:not(.boton):not(.pan-boton), .pan input, .pan textarea { font-family: inherit; }
/* Solo para lectores de pantalla. «en el pedido» lo escribe el script junto al − n +: el control
   ya lo dice, a la vista sobra. */
.pan .pan-oculto,
.pan .pan-en-pedido {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* La caja del catálogo y del estado de carga es la de .contenedor: arranca en la línea del logo
   y termina donde termina el botón de la barra. */
.pan-contenedor {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}
/* Botón de texto: Salir, Quitar, Ahora no, Vaciar pedido, Agregar al pedido. 44 px de toque. */
.pan-enlace-boton,
.pan-agregar {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font-size: var(--t-nota);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  cursor: pointer;
}
.pan-enlace-boton:hover, .pan-agregar:hover { text-decoration-thickness: 2px; }
/* Los botones que arma el script (.pan-boton) con la cara del sistema: lleno verde o contorno,
   Recoleta 20/700, radio 8, sin sombra. */
.pan-boton {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--radio);
  font-family: var(--serif);
  font-size: var(--t-pieza);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pan-boton-verde { background-color: var(--verde); color: var(--crema); }
.pan-boton-verde:hover { background-color: var(--verde-hondo); color: var(--crema); }
.pan-boton-borde { background-color: transparent; border-color: var(--carbon); color: var(--tinta); }
.pan-boton-borde:hover { background-color: var(--carbon); color: var(--crema); }
.pan-boton-ancho { display: flex; width: 100%; }
.pan-boton[aria-busy="true"], .pan .boton[aria-busy="true"] { opacity: .7; cursor: progress; }
.pan-boton-verde:focus-visible, .pan .boton:focus-visible { outline: 3px solid var(--carbon); outline-offset: 3px; }

/* ============================================================
   2. Portada
   Desde 992: la columna de lectura en las columnas 1 a 7 (todo a la medida salvo el titular) y
   el arco en las 8 a 12 (9 a 12 entre 992 y 1279). El arco arranca con el titular y termina
   con la última línea de la privacidad: mide lo que mide la columna, nunca deja un hueco.
   Por debajo de 992, una columna y sin foto (el <source> de 1 px evita bajarla).
   ============================================================ */
.pan-portada { padding-bottom: var(--aire-banda); }
.pan-portada .grilla { row-gap: 0; }
.pan-portada-texto { container: pan-texto / inline-size; }
.pan-portada-texto > :not(h1), .pan-campos { max-width: var(--medida); }
/* Entre la entrada y el acceso, el aire entre zonas. */
.pila > .pan-form { margin-top: var(--aire-zona); }

/* La foto, en el arco del inicio: medio círculo arriba (el radio es la mitad del ancho, en
   unidades del contenedor) y 8 px abajo, derecho. Sin el borde crema (sobre crema no se ve),
   sin sombra, sin giro y sin rótulo. */
.pan-vitrina { display: none; margin: 0; }
@media (min-width: 992px) {
  .pan-portada-texto { grid-column: 1 / span 7; }
  .pan-vitrina {
    grid-column: 9 / span 4;
    align-self: stretch;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .pan-vitrina picture { flex: 1 1 auto; display: flex; min-height: 0; }
  .pan .pan-vitrina-foto {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 125cqi;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 50cqi 50cqi var(--radio) var(--radio);
    background-color: var(--pan-foto-espera);
  }
}
@media (min-width: 1280px) {
  .pan-vitrina { grid-column: 8 / span 5; }
}

/* ============================================================
   3. Formularios (acceso, correo de sesiones viejas, nota del pedido)
   ============================================================ */
.pan-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px var(--canal);
}
/* Dos campos por renglón cuando la columna lo permite: nombre y negocio, correo y código.
   La ayuda del código va debajo, a todo el ancho, y nombra el código. */
@container pan-texto (min-width: 520px) {
  .pan-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pan-campo label,
.pan .pan-etiqueta {
  display: block;
  margin: 0 0 8px;
  color: var(--tinta);
  font-size: var(--t-nota);
  font-weight: 700;
  line-height: 1.3;
}
.pan-opcional { font-weight: 400; color: var(--pan-suave); }
.pan-campo input,
.pan-correo-campo input,
.pan-buscar {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--carbon);
  border-radius: var(--radio);
  background-color: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.2;
}
.pan input[aria-invalid="true"] { border-color: var(--cafe); box-shadow: inset 0 0 0 1px var(--cafe); }
#pan-codigo { letter-spacing: .08em; text-transform: uppercase; }
.pan-campo input { scroll-margin-top: calc(var(--barra-alto) + 32px); }
/* Ayuda del código y privacidad: enlaces dentro de una frase. El relleno de 15 px de un enlace
   en línea agranda el toque a 44 px sin mover los renglones (renglones de 29,6 px). */
.pan-ayuda,
.pan-privacidad,
.pan-sin-js {
  max-width: var(--medida);
  margin: 16px 0 0;
  font-size: var(--t-nota);
  line-height: 1.85;
}
.pan-privacidad { color: var(--pan-suave); }
.pan-ayuda a, .pan-privacidad a, .pan-sin-js a { padding: 15px 0; color: var(--tinta); }
.pan-error-campo,
.pan-error-form {
  margin: 8px 0 0;
  color: var(--cafe);
  font-size: var(--t-nota);
  font-weight: 700;
  line-height: 1.4;
}
.pan-error-form { margin: 16px 0 0; }
.pan-error-form a { color: inherit; }
/* Los errores de campo están siempre en el DOM (aria-live): vacíos no ocupan lugar. */
.pan-error-campo:empty { margin: 0; }
/* La casilla de novedades: opcional, desmarcada y aparte. Toda la etiqueta se toca (44 px). */
.pan-casilla {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 44px;
  margin: 16px 0 0;
  padding: 10px 0;
  color: var(--tinta);
  font-size: var(--t-nota);
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.pan-casilla input { width: 24px; height: 24px; margin: 0; accent-color: var(--verde); cursor: pointer; }
.pan-casilla span { max-width: var(--medida); }
.pan-form .boton { margin-top: 24px; cursor: pointer; }
/* Sin JavaScript el formulario no se puede mandar: no muestra campos y queda el aviso. */
html:not(.js) #pan-form .pan-campos,
html:not(.js) #pan-form .pan-ayuda,
html:not(.js) #pan-form .pan-casilla,
html:not(.js) #pan-form button,
html:not(.js) #pan-form .pan-privacidad { display: none; }
.pan-sin-js { margin-top: 0; }
/* Campo trampa: fuera de pantalla para personas y lectores de pantalla */
.pan-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) {
  .pan-campo input, .pan-correo-campo input, .pan-buscar { height: 48px; }
  .pan-form .boton { display: flex; width: 100%; }
}

/* ============================================================
   4. Estado de carga (quien ya entró: nunca ve el formulario mientras se consulta)
   ============================================================ */
.pan-cargando { display: none; }
html.pan-sesion-pendiente #pan-portada { display: none; }
html.pan-sesion-pendiente .pan-cargando {
  display: block;
  min-height: calc(100vh + 80px);
  padding: calc(var(--barra-alto) + var(--aire-lectura)) 0 var(--aire-banda);
}
.pan-cargando-texto { margin: 0; font-size: var(--t-pieza); line-height: 1.45; color: var(--pan-suave); }

/* ============================================================
   5. Catálogo: cabecera, correo, herramientas
   ============================================================ */
.pan-catalogo { padding: calc(var(--barra-alto) + var(--aire-lectura)) 0 var(--aire-banda); }
.pan-cat-principal { container: pan-lista / inline-size; min-width: 0; }
/* El saludo y «Salir» en el mismo renglón; la bajada debajo, a la medida, sin la columna de
   «Salir» comiéndole el ancho en celular. */
.pan-cat-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--aire-bloque);
  align-items: center;
}
.pan-cat-cabecera > div { display: contents; }
.pan .pan-h1-catalogo {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-pagina);
  font-weight: 700;
  line-height: var(--i-titulo);
}
.pan-h1-catalogo:focus { outline: none; }
.pan-cat-cabecera .pan-bajada {
  grid-column: 1 / -1;
  max-width: var(--medida);
  margin: calc(var(--aire-bloque) + 8px) 0 0;
  font-size: var(--t-cuerpo);
  line-height: var(--i-cuerpo);
  text-wrap: pretty;
}
#pan-salir { grid-column: 2; grid-row: 1; }

/* Correo para las sesiones de antes del correo: en el flujo, entre dos filetes. */
.pan-pide-correo {
  margin: var(--aire-zona) 0 0;
  padding: var(--aire-bloque) 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.pan-pide-correo-titulo { margin: 0 0 8px; font-family: var(--serif); font-size: var(--t-pieza); font-weight: 700; line-height: 1.25; }
.pan-pide-correo-texto { max-width: var(--medida); margin: 0 0 16px; font-size: var(--t-cuerpo); line-height: var(--i-cuerpo); }
.pan-correo-campo { max-width: 440px; }
.pan-correo-form .pan-casilla { margin-top: 12px; }
.pan-correo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 16px; font-size: var(--t-nota); }
.pan-correo-acciones a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.pan-correo-listo { margin: 0; font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.45; }
.pan-correo-listo:focus { outline: none; }
.pan-correo-listo:empty { display: none; }

/* Buscador a lo ancho de la lista; debajo, las cuatro categorías como pestañas de texto sobre
   un filete. Los atajos por ingrediente («Probá con…») no se ven: el buscador ya encuentra por
   ingrediente y eran ocho enlaces más en la pantalla. */
.pan-herramientas { margin-top: var(--aire-zona); }
.pan-buscar::placeholder { color: var(--pan-suave); opacity: 1; }
.pan-buscar:focus-visible { outline: 3px solid var(--carbon); outline-offset: 1px; }
.pan-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin-top: 16px;
  border-bottom: 1px solid var(--linea);
}
.pan-filtro {
  min-width: 44px;
  min-height: 48px;
  margin: 0 0 -1px;
  padding: 12px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--pan-suave);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
}
.pan-filtro:hover { color: var(--tinta); }
.pan-filtro[aria-pressed="true"] { color: var(--tinta); border-bottom-color: var(--carbon); }
.pan-filtro:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; }
.pan .pan-atajos { display: none; }
.pan-cuenta { margin: 16px 0 0; font-size: var(--t-nota); color: var(--pan-suave); }
/* Con el catálogo entero la cuenta queda para el lector de pantalla; se ve al buscar. */
.pan-cuenta.pan-cuenta-quieta {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Las cuatro categorías no entran en un renglón en celular: dos por fila, cada una con su
   filete, así ninguna queda colgando sola debajo de las otras. */
@container pan-lista (max-width: 559px) {
  .pan-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; border-bottom: 0; }
  .pan-filtro { margin: 0; padding: 12px 0 13px; border-bottom: 1px solid var(--linea); text-align: left; }
  .pan-filtro[aria-pressed="true"] { padding-bottom: 12px; border-bottom: 2px solid var(--carbon); }
}

/* ============================================================
   6. Catálogo: la lista de precios
   Cada categoría es un título de sección y una lista de renglones entre filetes.
   Columna de 640 o más:  foto 64 | nombre (Recoleta 20) e ingredientes (16) | precio 88 | acción 144
   Más angosta (celular, y la columna de 1024): foto 56 | nombre y precio en el mismo renglón,
   los ingredientes debajo y la acción abajo, siempre en la misma x.
   ============================================================ */
.pan-grupo { margin-top: var(--aire-zona); }
.pan-grupo-titulo {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-size: var(--t-seccion);
  font-weight: 700;
  line-height: 1.15;
}
/* El dibujo de la sección: la medialuna de bigote, la voz de la vitrina en el centro de mesa de
   panadería (MARCA.md §4), pegada al final de «Repostería dulce», que abre con las medialunas.
   Una sola vez en el portal, sin movimiento. El título lo arma el script, así que va por CSS. */
#pan-grupo-reposteria-dulce { display: flex; align-items: center; gap: 20px; }
#pan-grupo-reposteria-dulce::after {
  content: "";
  flex: 0 0 auto;
  width: 93px;
  height: 64px;
  background: url("../images/ilustraciones/medialuna-bigote-cafe.svg") center / contain no-repeat;
}
.pan-grilla { display: block; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--linea); }
.pan-grilla > li { display: block; padding: 16px 0; border-top: 1px solid var(--linea); }
.pan-producto {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas:
    "foto nombre meta"
    "foto ing    ing"
    "foto accion accion";
  column-gap: 16px;
  align-items: start;
}
.pan-producto-info { display: contents; }
.pan .pan-producto-foto {
  grid-area: foto;
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radio);
  background-color: var(--pan-foto-espera);
}
.pan-producto-nombre {
  grid-area: nombre;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-pieza);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: pretty;
}
.pan-producto-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  text-align: right;
}
.pan-precio {
  color: var(--precio);
  font-size: var(--t-cuerpo);
  font-weight: 700;
  line-height: 25px;            /* la misma línea que el nombre (20 × 1,25) */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pan-presentacion { color: var(--pan-suave); font-size: var(--t-nota); line-height: 1.45; white-space: nowrap; }
.pan-producto-ing {
  grid-area: ing;
  max-width: var(--medida);
  margin: 4px 0 0;
  color: var(--pan-suave);
  font-size: var(--t-nota);
  line-height: 1.45;
}
.pan-producto-accion {
  grid-area: accion;
  justify-self: start;
  display: flex;
  align-items: center;
  margin: 4px 0 -10px;
}
@container pan-lista (min-width: 640px) {
  .pan-grilla > li { padding: 20px 0; }
  .pan-producto {
    grid-template-columns: 64px minmax(0, 1fr) 88px 144px;
    grid-template-areas:
      "foto nombre meta accion"
      "foto ing    meta accion";
    column-gap: var(--aire-bloque);
  }
  .pan .pan-producto-foto { width: 64px; height: 64px; }
  /* La acción, centrada con el renglón del nombre (44 de toque contra 25 de renglón). */
  .pan-producto-accion { justify-self: end; margin: -10px 0 0; }
}

/* Cantidad: − [n] +, en la lista y en el pedido. Cada parte mide 44 por dentro del filete. */
.pan-cantidad {
  box-sizing: content-box;
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  border: 1.5px solid var(--carbon);
  border-radius: var(--radio);
  overflow: hidden;
}
.pan-cantidad button {
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-size: var(--t-pieza);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.pan-cantidad button:hover { background-color: var(--carbon); color: var(--crema); }
.pan-cantidad input {
  width: 52px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-nota);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pan-cantidad input::-webkit-outer-spin-button,
.pan-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pan-cantidad :focus-visible { outline: 3px solid var(--carbon); outline-offset: -3px; }

/* Sin resultados */
.pan-vacio { margin-top: var(--aire-zona); }
.pan-vacio h2 { margin: 0 0 12px; font-family: var(--serif); font-size: var(--t-seccion); font-weight: 700; line-height: 1.15; }
.pan-vacio p { max-width: var(--medida); margin: 0 0 16px; font-size: var(--t-cuerpo); line-height: var(--i-cuerpo); }
.pan-vacio .pan-boton { margin-bottom: 16px; }
/* «Preguntanos por WhatsApp» va dentro de la frase: el relleno lleva el toque a 44 sin mover los
   renglones, como en la ayuda del código. */
.pan-vacio p a { padding: 15px 0; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* Una sola nota de cierre. */
.pan-nota-precios {
  max-width: var(--medida);
  margin: var(--aire-bloque) 0 0;
  color: var(--pan-suave);
  font-size: var(--t-nota);
  line-height: 1.45;
}

/* ============================================================
   7. Pedido
   Desde 992 es una columna de la grilla (9 a 12), separada por un filete, sin caja y pegada
   debajo de la barra; la lista de líneas es lo único que se desplaza y el cierre (total, nota
   y envíos) queda siempre a la vista. Por debajo, una barra carbón de 64 abajo que abre una
   hoja entera.
   ============================================================ */
.pan-pedido-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.pan-pedido-titulo { margin: 0; font-family: var(--serif); font-size: var(--t-pieza); font-weight: 700; line-height: 1.25; }
.pan-pedido-vacio { margin: 0; color: var(--pan-suave); font-size: var(--t-nota); line-height: 1.45; }
.pan-pedido-lineas { margin: 0; padding: 0; list-style: none; }
.pan-pedido-mas { margin: 0; padding: 8px 0 12px; border-top: 1px solid var(--linea); color: var(--pan-suave); font-size: var(--t-nota); line-height: 1.4; }
.pan-linea { padding: 12px 0; border-top: 1px solid var(--linea); }
.pan-linea-arriba { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pan-linea-nombre { font-size: var(--t-nota); font-weight: 700; line-height: 1.35; }
.pan-linea-sub { font-size: var(--t-nota); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pan-linea-precio { margin: 2px 0 0; color: var(--pan-suave); font-size: var(--t-nota); font-variant-numeric: tabular-nums; }
.pan-linea-abajo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.pan-linea .pan-enlace-boton { margin-left: auto; }
.pan-pedido-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1.5px solid var(--carbon);
  font-size: var(--t-nota);
  font-weight: 700;
}
.pan-pedido-total strong { color: var(--precio); font-size: var(--t-pieza); font-variant-numeric: tabular-nums; }
.pan-pedido-nota { margin: 4px 0 12px; color: var(--pan-suave); font-size: var(--t-nota); line-height: 1.45; }
.pan-notas-caja { margin: 0 0 16px; }
.pan-notas-caja summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  font-size: var(--t-nota);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  list-style: none;
  cursor: pointer;
}
.pan-notas-caja summary::-webkit-details-marker { display: none; }
.pan-notas-caja[open] summary { margin-bottom: 8px; }
.pan-notas {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid var(--carbon);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font-size: var(--t-nota);
  line-height: 1.45;
  resize: vertical;
}
.pan-notas::placeholder { color: var(--pan-suave); opacity: 1; }
/* Un solo lleno, «Enviar por WhatsApp» (el script lo pone solo con productos); el correo y
   «Vaciar pedido» van debajo, en una fila, como botones de texto. */
#pan-pedido-cierre { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
#pan-pedido-cierre > * { flex: 1 0 100%; }
#pan-pedido-cierre > #pan-enviar-correo,
#pan-pedido-cierre > #pan-vaciar { flex: 0 0 auto; margin-top: 8px; }
#pan-enviar-correo {
  width: auto;
  justify-content: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-nota);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
#pan-enviar-correo:hover { background: none; color: var(--tinta); text-decoration-thickness: 2px; }
#pan-pedido-enviado { margin: 8px 0 0; }
.pan-solo-movil { display: none; }

/* La barra del pedido, por debajo de 992: carbón, 64 px, el resumen a la izquierda y
   «Ver pedido» con la cara del botón de la barra (contorno crema). */
.pan-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  padding: 0 var(--margen) env(safe-area-inset-bottom);
  background-color: var(--carbon);
  color: var(--crema);
}
.pan-barra-boton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--ancho);
  min-height: var(--pan-barra-alto);
  margin: 0 auto;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--crema);
  text-align: left;
  cursor: pointer;
}
.pan-barra-texto { display: flex; flex-direction: column; font-size: var(--t-nota); line-height: 1.3; }
.pan-barra-texto strong { font-weight: 700; }
.pan-barra-accion {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--crema);
  border-radius: var(--radio);
  font-family: var(--serif);
  font-size: var(--t-pieza);
  font-weight: 700;
  line-height: 1.1;
}
.pan-barra-boton:focus-visible { outline: 3px solid var(--crema); outline-offset: -3px; }

@media (max-width: 991px) {
  .pan-pedido { display: none; }
  .pan-pedido.pan-abierto {
    box-sizing: border-box;
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--margen) calc(32px + env(safe-area-inset-bottom));
    background-color: var(--crema);
  }
  .pan-pedido.pan-abierto .pan-pedido-cabecera {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: var(--pan-barra-alto);
    margin: 0 calc(var(--margen) * -1);
    padding: 10px var(--margen);
    border-bottom: 1px solid var(--linea);
    background-color: var(--crema);
  }
  .pan-pedido.pan-abierto .pan-pedido-titulo { font-size: var(--t-seccion); }
  /* El filete de la cabecera pegada es el de arriba de la primera línea. */
  .pan-pedido.pan-abierto .pan-linea:first-child { border-top: 0; }
  .pan-pedido.pan-abierto .pan-pedido-vacio { margin-top: 16px; }
  .pan-solo-movil { display: inline-flex; }
  html.pan-con-barra .pan-catalogo { padding-bottom: calc(var(--pan-barra-alto) + var(--aire-banda)); }
  html.pan-pedido-abierto, html.pan-pedido-abierto body { overflow: hidden; }
  /* el foco de teclado no queda debajo de la barra */
  html.pan-con-barra { scroll-padding-bottom: calc(var(--pan-barra-alto) + 16px + env(safe-area-inset-bottom)); }
}
@media (min-width: 992px) {
  .pan-barra { display: none !important; }
  .pan-cat-cuerpo {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--canal);
    align-items: start;
  }
  .pan-cat-principal { grid-column: 1 / span 8; }
  .pan-pedido {
    grid-column: 9 / span 4;
    position: sticky;
    top: calc(var(--barra-alto) + 24px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--barra-alto) - 48px);
    padding-left: var(--canal);
    border-left: 1px solid var(--linea);
    overscroll-behavior: contain;
  }
  .pan-pedido > * { flex: none; }
  .pan-pedido-lineas {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: -12px;
    padding-right: 12px;
  }
  .pan-pedido-lineas::-webkit-scrollbar { width: 6px; }
  .pan-pedido-lineas::-webkit-scrollbar-track { background: transparent; }
  .pan-pedido-lineas::-webkit-scrollbar-thumb { background: rgba(43, 43, 43, .38); border-radius: 3px; }
}
/* Ventanas bajas (1024 × 768, 1280 × 800): el cierre se compacta y cada línea del pedido queda
   en dos renglones, sin el precio unitario (está en la lista). */
@media (min-width: 992px) and (max-height: 860px) {
  .pan-linea-precio { display: none; }
  .pan-linea { padding: 10px 0; }
  .pan-pedido-cabecera { margin-bottom: 8px; }
  .pan-pedido-total { padding-top: 12px; }
  .pan-pedido-nota { margin: 4px 0 6px; }
  .pan-notas-caja { margin-bottom: 8px; }
  .pan-notas { min-height: 68px; height: 68px; }
}
@media (max-width: 767px) {
  #pan-grupo-reposteria-dulce::after { width: 70px; height: 48px; }
  .pan-correo-acciones .pan-boton { width: 100%; }
}

/* ============================================================
   8. Movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pan *, .pan-barra * { transition: none !important; }
}