/* ============================================================
   La carta de Ayulem — diseño nuevo (estructura del menú de ZUK, con los colores y las letras de Ayulem)
   Banner con el título grande · fila de categorías redondas · una fila de tarjetas por categoría · ficha del producto
   ============================================================ */
body { background: var(--papel); }
.carta2 { --pad: 56px; --max: 1360px; padding-top: 74px; color: var(--tinta); font-family: var(--texto); }

/* ---------- banner ---------- */
.mb { position: relative; width: 100%; height: clamp(200px, 30vw, 420px); overflow: hidden; background: #2E2A25; margin-top: 18px; }
.mb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; opacity: .55; transform: scale(1.14); transition: transform 2.2s cubic-bezier(.22,.61,.36,1), opacity 1.4s; }
.mb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(46,42,37,.78), rgba(46,42,37,0) 70%); pointer-events: none; }
.mb-t { position: absolute; left: var(--pad); top: 50%; z-index: 2; margin: 0; color: #fff; font: 800 clamp(44px, 9vw, 120px)/1 var(--texto); letter-spacing: .14em; opacity: 0; transform: translate3d(0, -50%, 0); transition: opacity 1.2s ease .3s, letter-spacing 1.6s cubic-bezier(.22,.61,.36,1) .3s; }
.mb.visible img { transform: scale(1); opacity: .8; }
.mb.visible .mb-t { opacity: 1; letter-spacing: .22em; }

/* ---------- categorías ---------- */
.rail-cats { max-width: var(--max); margin: 0 auto; padding: 22px 0 6px; }
.sec-t { margin: 0 0 12px; padding: 0 var(--pad); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.rail-wrap { position: relative; padding: 0 var(--pad); }
.rail-wrap + .rail-wrap { margin-top: 12px; }          /* categorías con dos filas */
.cat-rail { display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; padding: 0 0 4px; scroll-behavior: smooth; }
.cat-rail::-webkit-scrollbar, .prod-rail::-webkit-scrollbar { display: none; }
.cat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; cursor: pointer; width: clamp(72px, 7vw, 96px); background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.cat-thumb { width: clamp(64px, 6.4vw, 84px); height: clamp(64px, 6.4vw, 84px); border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(46,42,37,.2); transition: border-color .2s; background: #fff; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-item:hover .cat-thumb, .cat-item:focus-visible .cat-thumb { border-color: var(--coral); }
.cat-item.on .cat-thumb { border-color: var(--coral); border-width: 2.5px; }
.cat-label { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; color: var(--tinta); }
.cat-item.on .cat-label { color: #7A2F33; }
.rail-arrow { position: absolute; top: 40%; transform: translateY(-50%); z-index: 4; width: clamp(28px, 3vw, 36px); height: clamp(28px, 3vw, 36px); border-radius: 50%; background: #fff; border: 1px solid rgba(46,42,37,.18); color: var(--tinta); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(46,42,37,.14); }
.rail-arrow:hover { border-color: var(--coral); }
.rail-arrow.izq { left: calc(var(--pad) - 50px); }
.rail-arrow.der { right: calc(var(--pad) - 50px); }
@media (hover: none), (max-width: 900px) { .rail-arrow { display: none; } }
@media (max-width: 900px) { .carta2 { --pad: clamp(18px, 4vw, 40px); } }

/* ---------- una categoría = un título y una fila de tarjetas ---------- */
.cat2 { max-width: var(--max); margin: 0 auto; padding: 26px 0 8px; scroll-margin-top: 80px; }
.cat2-cab { padding: 0 var(--pad); margin-bottom: 14px; }
.cat2-t { margin: 0; font-family: var(--titulo); font-size: 19px; font-weight: 700; }
.cat2-nota { margin: 4px 0 0; font-size: 13px; color: #5A5348; }
.grupo2-t { margin: 16px var(--pad) 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7A2F33; }
.grupo2-nota { margin: -4px var(--pad) 8px; font-size: 12.5px; color: #5A5348; }
.prod-rail { display: flex; gap: 14px; overflow-x: auto; padding: 0 0 6px; scroll-behavior: smooth; }
.prod-card { background: #fff; border: 1px solid rgba(46,42,37,.14); border-radius: 22px; overflow: hidden; cursor: pointer; flex: none; width: clamp(150px, 15vw, 200px); display: flex; flex-direction: column; text-align: left; padding: 0; font: inherit; color: inherit; transition: transform .2s, border-color .2s; }
.prod-card:hover, .prod-card:focus-visible { transform: translateY(-3px); border-color: var(--coral); }
.prod-thumb { width: 100%; aspect-ratio: 1 / 1; background: #F3E4CE; overflow: hidden; }
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.prod-card:hover .prod-thumb img { transform: scale(1.08); }
.prod-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; }
.prod-nombre { font-size: 14px; font-weight: 600; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-precio { font-size: 14px; font-weight: 700; color: #7A2F33; }
.carta-pie { max-width: var(--max); margin: 30px auto 50px; padding: 0 var(--pad); font-size: 12.5px; color: #5A5348; }

/* ---------- ficha del producto ---------- */
.det[hidden] { display: none; }
.det { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.det-fondo { position: absolute; inset: 0; background: rgba(46,42,37,.55); }
.det-caja { position: relative; width: min(1100px, 100%); max-height: 92vh; overflow: auto; background: var(--durazno); border-radius: 32px; padding: 56px clamp(18px, 3vw, 40px) 30px; scrollbar-width: none; -ms-overflow-style: none; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.det-volver { position: absolute; left: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid rgba(46,42,37,.18); font-size: 18px; cursor: pointer; }
.det-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.det-foto { aspect-ratio: 1 / 1; background: #F3E4CE; overflow: hidden; border-radius: 26px; }
.det-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.det-nombre { margin: 0 0 8px; font-family: var(--titulo); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; }
.det-precio { font-size: 22px; font-weight: 700; color: #7A2F33; margin-bottom: 12px; }
.det-desc { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: #5A5348; }
.rel-t { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rel-grid .prod-card { width: auto; }
@media (max-width: 760px) { .det-cuerpo { grid-template-columns: 1fr; } .det-caja { padding-top: 60px; } .det { padding: 0; align-items: flex-end; } .det-caja { max-height: 94vh; border-radius: 14px 14px 0 0; } }
@media (prefers-reduced-motion: reduce) { .mb img, .mb-t { transition: none; } }

/* la ficha se desplaza pero sin mostrar la barra */
.det-caja::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- una categoría a la vez ---------- */
.sec-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: var(--pad); }
.sec-fila .sec-t { margin-bottom: 12px; }
.ver-todas { border: 1px solid rgba(46,42,37,.2); background: #fff; color: #7A2F33; font: 700 12px var(--texto); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.ver-todas:hover { background: #8A3A3C; color: #fff; border-color: #8A3A3C; }

/* ---------- cada categoría: la tarjeta translúcida de siempre; solo su encabezado lleva el color del PDF ---------- */
.carta2 .cat2 { padding: 0 0 22px; }
.cat2-cab { background: rgba(197,185,156,.5); background: color-mix(in srgb, var(--cat, #C5B99C) 55%, transparent); border-radius: 28px 28px 0 0; padding: 24px var(--pad) 18px; margin-bottom: 20px; }
.cat2-t { font-family: var(--texto); font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta); }
.cat2-nota { color: #3A342C; font-size: 14px; }
.prod-card { border-color: rgba(46,42,37,.08); box-shadow: 0 10px 24px -16px rgba(46,42,37,.5); }
.cat-item.on .cat-thumb, .cat-item:hover .cat-thumb { border-color: var(--cat, var(--coral)); }
.cat-item.on .cat-label { color: var(--tinta); font-weight: 800; }

/* mini Lemi en el encabezado de cada categoría */
.cat2-cab { position: relative; min-height: 84px; padding-right: calc(var(--pad) + 96px); }
.cat2-lemi { position: absolute; right: calc(var(--pad) + 6px); bottom: 0; height: 104px; width: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(46,42,37,.25)); }
@media (max-width: 700px) { .cat2-cab { min-height: 72px; padding-right: 84px; } .cat2-lemi { height: 82px; right: 12px; } }

/* Aviso de la carta (copia guardada o sin conexión) */
.carta-aviso{margin:0 0 1rem;padding:.6rem .9rem;border-radius:.6rem;background:#fff3c4;color:#5a4300;font-size:.9rem;text-align:center}