/* =========================================================
   RESPONSIVE — 430 · 768 · 1024 · 1440
   ========================================================= */


@media (min-width: 768px) {
  :root { --gutter: 2rem; --header-h: 72px; --marco: 12px; }
  .marca-etiqueta img { height: 26px; }
  .marca-producto { font-size: .64rem; max-width: none; }
  .hero-copy { padding-top: calc(var(--header-h) + var(--space-lg)); }
  .hero-bajada { font-size: 1.2rem; }
  .mapa { --alto-mapa: 58vh; }
  .puertas { width: min(100%, 720px); gap: .6rem 1.4rem; }
  .puerta { width: 104px; }
  .categorias { justify-content: safe center; flex-wrap: wrap; overflow: visible; margin-inline: 0; }
}

/* Escritorio (o tablet apaisado): la foto ocupa todo y el texto va a la
   derecha, sobre el cielo, para que el volcán quede libre. */
@media (min-width: 1024px) {
  :root { --marco: 16px; }
  .nav { display: flex; align-items: center; gap: 1.8rem; }
  .nav a {
    display: inline-block; padding: 14px 0; line-height: 16px; min-width: 44px; text-align: center;   /* 44px táctiles */
    font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    text-decoration: none; border-bottom: 1.5px solid transparent;
    transition: border-color var(--transition-fast);
  }
  .nav a:hover { border-bottom-color: currentColor; }
  .nav .nav-coin { padding: 13px 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-hand); }
  .menu-boton { display: none; }

  .hero { min-height: 100vh; min-height: 100svh; }
  /* escritorio: la cordillera completa (los dos volcanes), anclada abajo */
  .hero-foto {
    top: auto; height: auto; aspect-ratio: 2057 / 764;
    bottom: calc(clamp(130px, 26vw, 240px) * .3);   /* la loma solo cubre el bosque del pie; sin franja verde plana */
    /* el cielo de la ilustración se funde con el cielo prolongado (sin corte horizontal) */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
            mask-image: linear-gradient(180deg, transparent 0, #000 16%);
  }
  /* bajo la imagen (detrás de la transición) continúa el verde del bosque */
  .hero { background: linear-gradient(0deg, #5B7E64 0, #5B7E64 calc(clamp(130px, 26vw, 240px) * .3 + 2px), var(--color-sky-photo) calc(clamp(130px, 26vw, 240px) * .3 + 2px)); }
  .hero-foto img { object-position: 50% 100%; }
  .hero-velo { background: linear-gradient(0deg, rgba(250, 250, 247, .2) 0%, rgba(250, 250, 247, 0) 20%); }
  .hero-copy h1 { font-size: clamp(3rem, 5vw, 5.4rem); }
  .hero-copy {
    margin-left: auto;
    width: min(640px, 50vw);
    padding: calc(var(--header-h) + 12vh) clamp(2rem, 6vw, 6rem) 0 0;
  }

  /* Explora Pucón: el mapa protagonista, centrado y ancho */
  .mapa { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }
  .mapa-viewport {
    height: auto; overflow: hidden;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 1.4%, #000 7%, #000 95%, transparent 98.6%),
      linear-gradient(180deg, transparent 2.2%, #000 8%, #000 94%, transparent 97.8%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, transparent 1.4%, #000 7%, #000 95%, transparent 98.6%),
      linear-gradient(180deg, transparent 2.2%, #000 8%, #000 94%, transparent 97.8%);
            mask-composite: intersect;
  }
  .mapa-arte { width: 100%; height: auto; }
  .mapa-pista { display: none; }                 /* en escritorio el mapa se ve completo */
}

@media (min-width: 1440px) {
  .marca-etiqueta img { height: 28px; }
  .hero-copy { width: min(680px, 46vw); }
  .hero-bajada { font-size: 1.3rem; }
}