/* =====================================================================
   BOCATITOS · AJUSTES DE MÓVIL
   Hoja aparte para no tocar assets/styles.css (la plantilla de Manu).
   Se carga la última, así que gana por orden a igualdad de especificidad.
   ===================================================================== */

@media (max-width:560px){

  /* -------------------------------------------------------------------
     Carta · de tarjeta vertical a lista horizontal
     A ancho completo la foto en 4/3 se comía la pantalla y solo cabía un
     plato por vista. Pasa a una franja fija de 112px a la izquierda, con
     el texto al lado: entran 4-5 platos por pantalla.
     ------------------------------------------------------------------- */

  .cat-grid{gap:12px;margin-bottom:28px}

  .dish{flex-direction:row;align-items:stretch;border-radius:14px}

  .dish-photo{
    flex:0 0 112px;width:112px;
    aspect-ratio:auto;align-self:stretch;min-height:112px;
  }
  /* El velo oscuro venía de la foto grande; a este tamaño solo la apaga. */
  .dish-photo::after{display:none}

  .dish-body{padding:12px 14px;gap:3px;min-width:0}

  .dish-head{margin-bottom:2px}
  .dish .dot{width:24px;height:24px;font-size:10px}
  .dish .price{font-size:15px}
  .dish h4{font-size:14.5px;line-height:1.15}

  /* Los ingredientes van largos: se acotan a 3 líneas para que ninguna
     tarjeta se dispare de alto y la lista mantenga su ritmo. */
  .dish p{
    font-size:12px;line-height:1.45;flex:initial;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* Salvo las tarjetas de bebidas con precios por variante o lista de marcas
     (café, zumos, batidos, refrescos): el recorte escondería precios y
     opciones tras los «…». */
  .dish.dish-sin-recorte p{display:block;-webkit-line-clamp:unset;overflow:visible}

  /* Placeholder de «foto real pendiente»: no cabe entero en 112px. */
  .dish-photo-pending .ph-inner{padding:0 6px;gap:4px;font-size:9px;letter-spacing:.08em}
  .dish-photo-pending .ph-inner svg{width:22px;height:22px}
  .dish-photo-pending .ph-inner small{display:none}

  /* En táctil el :hover se queda pegado tras tocar la tarjeta. */
  .dish:hover{transform:none;border-color:var(--line);box-shadow:none}
  .dish:hover .dish-photo img{transform:none;filter:saturate(.92)}
}

/* -------------------------------------------------------------------
   Redes · las tarjetas de «Síguenos» desbordaban 26px a 390px
   (el ancho del texto empujaba la rejilla). Columnas con minmax(0,1fr)
   y el texto largo se parte en vez de ensanchar la tarjeta.
   ------------------------------------------------------------------- */
@media (max-width:780px){
  .socials-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sr-card{min-width:0;overflow-wrap:break-word}
  .sr-card b{font-size:12.5px;letter-spacing:.02em}
}