/* ==========================================================================
   BENVOLENTIERI — adaptación a pantallas
   No se trata de encoger: varias composiciones se rehacen.
   ========================================================================== */

/* ==========================================================================
   ≤ 1180 px — portátiles pequeños y tabletas apaisadas
   ========================================================================== */

@media (max-width: 1180px) {
  .cucina-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* El escalón de la fila de cuatro no tiene sentido con dos: en dos columnas
     dejaba un hueco raro arriba a la derecha. */
  .cucina-rejilla > :nth-child(odd) { --desfase: 0px; }
  .cucina-rejilla > :nth-child(4n+1),
  .cucina-rejilla > :nth-child(4n+2) { --desfase: -20px; }

  .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-marca { grid-column: 1 / -1; }
}

/* ==========================================================================
   ≤ 980 px — tableta y móvil grande: la barra pasa a hamburguesa
   ========================================================================== */

@media (max-width: 980px) {
  .menu { display: none; }
  .hamburguesa { display: block; }
  /* «Reservar» se queda en la barra: es la acción que da dinero. */
  .barra-acc .btn-linea { display: none; }

  .passione-rejilla,
  .aperitivo-rejilla,
  .storia-rejilla,
  .reservar-rejilla,
  .dove-rejilla { grid-template-columns: minmax(0, 1fr); }

  /* La foto va DESPUÉS del texto en las secciones editoriales: en una
     columna, abrir con una foto sin contexto no dice nada. */
  .passione-foto, .storia-foto { order: 2; max-width: 520px; }
  .aperitivo-foto { order: 2; max-width: 520px; }

  /* En una columna, un elemento pegajoso se queda clavado tapando lo que
     viene detrás. Solo tiene sentido cuando hay dos columnas. */
  .dove-rejilla > :last-child { position: static; }

  .carta-panel { grid-template-columns: minmax(0, 1fr); }
  .carta-lado {
    position: static;
    grid-row: 1;                       /* la foto encabeza la categoría */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.4rem;
  }
  .carta-lado-foto { aspect-ratio: 1; }

  .mosaico { columns: 2; }

  .vino { min-height: clamp(460px, 70vh, 620px); }
  .vino-fondo::after {
    background: linear-gradient(to top,
      rgba(11,13,10,.95) 6%, rgba(11,13,10,.72) 48%, rgba(107,31,43,.3) 100%);
  }
}

/* ==========================================================================
   ≤ 720 px — móvil
   ========================================================================== */

@media (max-width: 720px) {
  :root {
    --ancho: min(100% - 2rem, 1280px);
    --aire: clamp(3.6rem, 13vw, 5.5rem);
  }

  /* -- Hero: el texto manda, la foto acompaña. */
  .hero { align-items: end; }
  .hero-cuerpo { padding-block: 7rem 5.5rem; }
  .hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .hero-sub { font-size: 1rem; }
  .hero-acc { display: grid; }
  .hero-acc .btn { width: 100%; }
  .hero-chips { gap: .8rem 1.2rem; font-size: .68rem; }
  /* Los puntos estorban al pulgar justo donde están los botones. */
  .hero-puntos { display: none; }
  .hero-scroll { display: none; }
  /* Velo más cerrado: en vertical la foto se recorta y el texto pierde base. */
  .hero-velo {
    background: linear-gradient(to top,
      var(--carbon) 3%, rgba(11,13,10,.82) 40%, rgba(11,13,10,.35) 100%);
  }

  .cucina-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cucina-rejilla > * { --desfase: 0px; }
  /* En una sola columna la tarjeta 4:5 sale altísima. */
  .tarjeta { aspect-ratio: 3 / 2.2; }
  /* Sin hover en táctil, la descripción tiene que estar visible siempre. */
  .tarjeta p { max-height: none; opacity: 1; }
  .tarjeta::after { opacity: .92; }

  .carta-lado { grid-template-columns: minmax(0, 1fr); }
  .carta-lado-foto { aspect-ratio: 16 / 10; }
  .solapas { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .solapas::-webkit-scrollbar { display: none; }
  .solapa { flex: 0 0 auto; }

  /* La fila mantiene sus cuatro columnas (dibujo · texto · precio · añadir);
     lo que se encoge es el dibujo, no la estructura. Antes esta regla la
     dejaba en dos y el botón de añadir se salía de la rejilla. */
  .plato { column-gap: .65rem; }
  .plato-mini { width: 40px; }

  .mosaico { columns: 1; }
  /* Sin hover: el pie de foto va siempre puesto. */
  .pieza-pie { opacity: 1; transform: none; }
  .pieza::after { opacity: 1; }
  .mosaico:hover .pieza { filter: none; }

  .cifras { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; text-align: left; }
  .servicios { grid-template-columns: minmax(0, 1fr); }
  .form-fila { grid-template-columns: minmax(0, 1fr); }

  .pie-rejilla { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pie-fondo { justify-content: center; text-align: center; }

  .ruta { flex-wrap: wrap; gap: .8rem 1rem; }
  .ruta-flecha { flex: 1 0 40px; }

  /* El globo del flotante tapa media pantalla en móvil. */
  .flota-globo { display: none; }
}

/* ==========================================================================
   ≤ 620 px — la barra deja de caber
   ========================================================================== */

@media (max-width: 620px) {
  /* En la barra conviven la marca, el selector de tres idiomas, «Reservar» y
   * la hamburguesa. A 390 px eso sumaba unos 486 px: «Reservar» salía cortado
   * y la hamburguesa se iba fuera de la pantalla.
   *
   * El nombre se queda: es la marca. Lo que se encoge es el selector de
   * idioma, que en movil muestra SOLO el activo y despliega los otros dos al
   * tocarlo. Con eso se liberan unos 65 px y entra todo: insignia, nombre,
   * idioma, «Reservar» y la hamburguesa. */
  .marca-txt { font-size: .66rem; letter-spacing: .1em; }
  .marca { gap: .5rem; }
  .marca svg { width: 34px; }

  .barra .idioma { --compacto: 1; }
  .barra .idioma button { min-width: 30px; padding: .42rem .38rem; font-size: .6rem; }
  .barra .idioma button:not(.viva) { display: none; }
  .barra .idioma.abierto button { display: block; }
  .barra-acc { gap: .5rem; }
  .barra .btn { --relleno: .7rem .95rem; font-size: .6rem; letter-spacing: .12em; }
}

/* ==========================================================================
   ≤ 400 px — móviles estrechos
   ========================================================================== */

@media (max-width: 400px) {
  .barra { padding-inline: 1rem; }
  .marca-sub { display: none; }
  .barra .btn { --relleno: .7rem 1rem; font-size: .62rem; letter-spacing: .14em; }
  .hero h1 { font-size: clamp(2.6rem, 14vw, 3.6rem); }
  .visor-nav { width: 44px; height: 44px; }
}

/* ==========================================================================
   Pantallas anchas
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --ancho: min(100% - 5rem, 1440px); }
  .hero-cuerpo { max-width: 1440px; }
}

/* ==========================================================================
   Apaisado y poca altura (móvil de lado)
   ========================================================================== */

@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 620px; }
  .hero-cuerpo { padding-block: 6rem 3rem; }
  .hero h1 { font-size: clamp(2.4rem, 8vh, 4rem); }
  .hero-scroll, .hero-puntos { display: none; }
  .panel { align-content: start; padding-top: 5rem; }
  .panel a { font-size: 1.6rem; }
}

/* ==========================================================================
   Impresión — que la carta salga legible en papel
   ========================================================================== */

@media print {
  .barra, .panel, .flota, .visor, .intro, .grano, .vineta,
  .hero-scroll, .hero-puntos, .carril-mandos, .mapa { display: none !important; }

  body { background: #fff; color: #000; }
  .seccion { padding-block: 1.5rem; page-break-inside: avoid; }
  .carta-panel[hidden] { display: grid !important; }   /* todas las categorías */
  .plato-p, .plato-n { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .7em; }
}