/* =====================================================================
   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:center}
.menu-logo{width:min(100%,360px);height:auto}
.menu-portada .antetitulo{color:var(--ambar)}
.menu-portada .aviso-precios{display:inline-block;margin-top:14px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--ambar);color:var(--sobre-marino);font-weight:700;font-size:15px}
.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:grid;gap:8px;padding-block:10px}
.tabs,.filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar,.filtros::-webkit-scrollbar{display:none}
.filtros button{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:1.5px dashed var(--linea);background:transparent;color:var(--tinta-suave);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.filtros button:hover{border-color:var(--enfasis);color:var(--tinta)}
.filtros button[aria-pressed="true"]{border-style:solid;border-color:var(--enfasis);color:var(--tinta);background:color-mix(in srgb,var(--enfasis) 12%,transparent)}
.btn-inicio{min-height:42px;padding:0 18px;font-size:15px;color:var(--sobre-marino)}
.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(--enfasis)}
.pestanas a[aria-current="true"]{background:var(--boton);border-color:var(--boton);color:var(--sobre-boton)}

/* ---------- 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) + 120px)}
.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(--enfasis);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%,440px),1fr));gap:14px}
.producto[hidden]{display:none}
.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(40,43,79,.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(--enfasis);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.visual img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(40,43,79,.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)}
/* doble carga: segunda línea de precio (capuccino, mocha) */
.doble{display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:600;color:var(--tinta-suave);margin-top:2px}
.doble .puntos{flex:1;border-bottom:2px dotted var(--linea);transform:translateY(-4px);min-width:12px}
.doble b{font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums}
/* nota musical de los favoritos de la casa */
.fila h3 .fav{color:var(--ambar);margin-right:6px;font-size:.95em}

/* ---------- 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}

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

/* En pantallas angostas el nombre puede bajar de línea; el precio nunca se corta */
.fila h3{min-width:0;flex:0 1 auto}
.fila .precio,.doble b{flex:none}
@media (max-width:420px){
  .producto{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 14px 12px 10px}
  .visual{width:64px;height:64px}
  .visual::before{inset:6px}
  .visual svg{width:42px;height:42px}
  .fila h3{font-size:16px}
  .precio{font-size:17px}
}

/* Barra de la carta en celular: botones cortos para que no se monten */
@media (max-width:520px){
  .pagina-menu .solo-ancho{display:none}
  .pagina-menu .nav{gap:8px}
  .pagina-menu .nav .btn{padding:0 14px}
}
@media (max-width:360px){.pagina-menu .marca span{display:none}}