:root { --cafe: #3b2a1d; --crema: #ddc8b5; --fondo: #faf6f2; --texto: #2a1f17; --rojo: #9b1c1c; --suave: #5c4a3c; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--texto); background: var(--fondo); line-height: 1.5; }
h1, h2, h3, .nombre { font-family: Georgia, "Times New Roman", serif; color: var(--cafe); }
a { color: var(--cafe); }
:focus-visible { outline: 3px solid var(--cafe); outline-offset: 2px; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; }

.marca { display: flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem; background: var(--crema); }
.marca img { border-radius: 50%; display: block; }
.marca .nombre { margin: 0; font-size: 1.3rem; }
.marca .datos { margin: 0; font-size: .85rem; color: var(--suave); }

.contenido { max-width: 46rem; margin: 0 auto; padding: 1rem 1.1rem 6rem; }
.aviso { padding: .75rem 1rem; border-radius: 8px; background: #fff7ec; border: 1px solid #e6c9a3; }
.aviso.error { background: #fdecec; color: var(--rojo); border-color: #e3a3a3; }
.vacio { padding: 1.5rem; text-align: center; background: #fff; border: 1px dashed #8a7462; border-radius: 10px; }
.ayuda, .req { font-size: .85rem; color: var(--suave); font-weight: 400; }

.categorias { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 0 .75rem; position: sticky; top: 0; background: var(--fondo); z-index: 2; }
.categorias a { white-space: nowrap; padding: .45rem .9rem; border: 1px solid var(--crema); border-radius: 999px; text-decoration: none; background: #fff; font-weight: 600; }

.productos { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.producto form { background: #fff; border: 1px solid var(--crema); border-radius: 12px; padding: .9rem 1rem; }
.producto-cabeza { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.producto h3 { margin: 0; font-size: 1.1rem; }
.precio { font-weight: 700; white-space: nowrap; }
.desc { margin: .3rem 0 0; color: var(--suave); }
.opciones { border: 0; padding: 0; margin: .7rem 0 0; }
.opciones legend { font-weight: 600; padding: 0; }
.opcion { display: inline-flex; align-items: center; gap: .35rem; margin: .3rem .9rem .1rem 0; min-height: 32px; }
.extra { color: var(--suave); font-size: .9rem; }
.producto-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: .8rem; }
.cantidad { font-size: .9rem; }
.cantidad input { width: 4.5rem; display: block; }
.error-campo { color: var(--rojo); margin: .4rem 0 0; min-height: 1.2em; font-size: .9rem; }

input, select, textarea { font: inherit; padding: .55rem .65rem; border: 1px solid #8a7462; border-radius: 8px; background: #fff; color: var(--texto); }
#checkout input:not([type=radio]), #checkout textarea { width: 100%; margin-top: .25rem; }
label { display: block; margin-top: .7rem; font-weight: 600; }
.opcion, .propina label, .pago label { font-weight: 400; }
button { min-height: 44px; padding: .55rem 1.3rem; font: inherit; font-weight: 700; color: #fff; background: var(--cafe); border: 0; border-radius: 8px; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.quitar { min-height: 36px; padding: .3rem .7rem; background: transparent; color: var(--rojo); border: 1px solid #e3a3a3; font-weight: 600; }

.carrito { margin-top: 2rem; background: #fff; border: 2px solid var(--cafe); border-radius: 12px; padding: 1rem 1.1rem; }
.lineas { list-style: none; padding: 0; margin: 0; }
.lineas li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid #efe6dd; }
.lineas li span:first-child { flex: 1; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.propina, .pago { border: 1px solid var(--crema); border-radius: 8px; margin-top: 1rem; padding: .3rem 1rem .8rem; }
.propina legend, .pago legend { font-weight: 700; }
.propina > label { display: inline-flex; gap: .3rem; margin-right: 1rem; min-height: 32px; align-items: center; }
.propina-otra { display: block !important; }
.totales { margin: 1rem 0 0; }
.totales div { display: flex; justify-content: space-between; padding: .15rem 0; }
.totales dt, .totales dd { margin: 0; }
.gran-total { font-weight: 800; font-size: 1.15rem; border-top: 1px solid var(--crema); margin-top: .3rem; padding-top: .4rem !important; }
#checkout button[type=submit] { width: 100%; margin-top: 1rem; }

.barra-carrito { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 44rem; margin: 0 auto; background: var(--cafe); color: #fff; text-align: center; padding: .85rem 1rem; border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 5; }
[hidden] { display: none !important; }

.codigo { letter-spacing: .12em; }
.estado { font-size: 1.25rem; font-weight: 800; margin: .2rem 0 1rem; }
.estado-listo { color: #1d5e33; } .estado-cancelado { color: var(--rojo); }
.pasos { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.pasos li { flex: 1; text-align: center; padding: .5rem; border-radius: 8px; background: #efe6dd; color: var(--suave); font-weight: 600; font-size: .9rem; }
.pasos li.hecho { background: var(--cafe); color: #fff; }
.tarjeta { background: #fff; border: 1px solid var(--crema); border-radius: 12px; padding: 1rem 1.1rem; }

.pie { text-align: center; font-size: .82rem; color: var(--suave); padding: 2rem 1rem 3rem; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }