/* =====================================================================
   DA CAPO COFFEE · CARTA (menu.html)
   Usa los colores y botones de estilos.css. Aquí va solo lo propio de
   la carta: portada, pestañas fijas, tarjetas de productos y extras.
   Pensada primero para el celular, porque se abre con el QR del carrito.
   ===================================================================== */

/* ---------- portada de la carta ---------- */
.menu-portada{background:var(--marino);color:var(--sobre-marino);padding-block:clamp(32px,6vw,72px) clamp(28px,4vw,48px)}
.menu-portada .marco{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:end}
.menu-logo{width:min(100%,360px);height:auto}
.menu-portada .antetitulo{color:var(--ambar)}
.menu-titulo{font-size:clamp(56px,10vw,128px);line-height:.85}
.menu-portada .lead{margin-top:16px;color:var(--sobre-marino-suave)}
@media (max-width:760px){.menu-portada .marco{grid-template-columns:minmax(0,1fr)}.menu-logo{width:min(70%,240px)}}

/* ---------- pestañas fijas (Calientes / Frías / Extras) ---------- */
.pestanas{position:sticky;top:calc(var(--barra) + env(safe-area-inset-top,0px));z-index:30;background:var(--crema);border-bottom:1px solid var(--linea)}
.pestanas .marco{display:flex;gap:8px;padding-block:10px;overflow-x:auto;scrollbar-width:none}
.pestanas .marco::-webkit-scrollbar{display:none}
.pestanas a{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:999px;text-decoration:none;font-weight:700;font-size:16px;color:var(--tinta);border:1.5px solid var(--linea);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.pestanas a:hover{border-color:var(--marino)}
.pestanas a[aria-current="true"]{background:var(--marino);border-color:var(--marino);color:var(--sobre-marino)}
:root[data-theme="dark"] .pestanas a[aria-current="true"]{background:var(--ambar);border-color:var(--ambar);color:var(--sobre-ambar)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pestanas a[aria-current="true"]{background:var(--ambar);border-color:var(--ambar);color:var(--sobre-ambar)}}

/* ---------- secciones y título de categoría con marca de agua ---------- */
.menu-seccion{padding-block:clamp(40px,6vw,72px);scroll-margin-top:calc(var(--barra) + 70px)}
.menu-seccion.fria{background:var(--crema-2)}
.menu-cat{position:relative;font-size:clamp(34px,5vw,60px);margin-bottom:clamp(20px,3vw,32px)}
.menu-cat::after{content:attr(data-marca);position:absolute;left:0;top:-.42em;font-size:2.2em;font-stretch:125%;font-weight:900;color:var(--marino);opacity:.07;pointer-events:none;white-space:nowrap}

/* ---------- productos ---------- */
.productos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.producto{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;background:var(--crema);border:1px solid var(--linea);border-radius:20px;padding:14px 18px 14px 14px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.fria .producto{background:var(--crema)}
.producto:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(29,39,102,.12);border-color:transparent}
/* visual: foto sin fondo sobre un "plato" ámbar, o el ícono de línea */
.visual{position:relative;width:92px;height:92px;display:grid;place-items:center}
.visual::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--ambar);opacity:.22;transition:transform .35s ease,opacity .35s ease}
.producto:hover .visual::before{transform:scale(1.12);opacity:.35}
.visual svg{position:relative;width:58px;height:58px;fill:none;stroke:var(--marino);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .visual svg{stroke:var(--ambar)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .visual svg{stroke:var(--ambar)}}
.visual img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(29,39,102,.28));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.producto:hover .visual img{transform:translateY(-4px) rotate(-4deg) scale(1.06)}
.info{min-width:0;display:grid;gap:4px}
.fila{display:flex;align-items:baseline;gap:10px}
.fila h3{font-size:20px;text-transform:uppercase;line-height:1.1}
.fila .puntos{flex:1;border-bottom:2px dotted var(--linea);transform:translateY(-4px);min-width:12px}
.precio{font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.info p{font-size:15px;color:var(--tinta-suave)}
.ml{justify-self:start;font-size:12px;font-weight:700;letter-spacing:.06em;padding:3px 10px;border-radius:999px;background:var(--crema-2);color:var(--tinta-suave)}
.fria .ml{background:var(--crema-2)}

/* ---------- extras y preparación especial ---------- */
.extras{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:640px}
.extras li{display:flex;align-items:baseline;gap:12px;background:var(--crema-2);border-radius:16px;padding:14px 18px}
.extras b{font-size:18px}
.extras .puntos{flex:1;border-bottom:2px dotted var(--linea);min-width:12px}
.extras small{display:block;font-size:14px;color:var(--tinta-suave)}
.especial{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--marino);color:var(--sobre-marino);border-radius:24px;padding:22px 24px;max-width:640px}
.especial .btn-marino{background:var(--ambar);color:var(--sobre-ambar)}

@media (prefers-reduced-motion: reduce){.producto,.visual img,.visual::before{transition:none}}