/* Ajustes para plegables (Galaxy Z Fold y similares) y tamaños intermedios.
   Pantalla exterior: muy angosta y alta (~344×882). Interior: casi cuadrada (~690×830 vertical, ~830×690 horizontal) */

/* Exterior del Fold y celulares muy angostos: menos aire muerto bajo el busto */
@media (max-width: 380px) {
  .hero .brand__name { letter-spacing: 0.34em; margin-right: -0.34em; }
  .stage { height: min(64svh, 142vw); }
  .perk__value { font-size: 1.6rem; }
  .perk__label { font-size: 0.56rem; letter-spacing: 0.06em; }
  .rail--right { flex-wrap: wrap; }
  .foot__motto { letter-spacing: 0.1em; font-size: 0.78rem; }
}

/* Interior del Fold en vertical (y tablets chicas): mismo orden que celular, pero con tipografía a su escala */
@media (min-width: 561px) and (max-width: 760px) {
  .hero { padding: var(--sp-6) var(--sp-6) var(--sp-7); }
  .hero .brand__logo { width: 120px; }
  .hero .brand__name { font-size: clamp(2.6rem, 8.4vw, 3.8rem); }
  .hero .brand__tagline { font-size: 0.9rem; }
  .stage { height: min(66svh, 104vw); }
  .perks { gap: var(--sp-5); max-width: 620px; margin-inline: auto; }
  .perk__value { font-size: 2.6rem; }
  .perk__label { font-size: 0.74rem; }
  .rail__date { font-size: 1.6rem; }
  .rail__meta { font-size: 0.8rem; }
  .admins { font-size: 0.95rem; }
  .foot__motto { font-size: 1rem; }
  .cta { padding: var(--sp-4) var(--sp-7); font-size: 0.9rem; }
}

/* Interior del Fold en horizontal (pantallas anchas pero bajas): todo cabe en la primera pantalla */
@media (min-width: 761px) and (max-height: 760px) {
  .hero { padding: var(--sp-4) var(--sp-5); grid-template-columns: minmax(130px, 1fr) minmax(0, 2.2fr) minmax(130px, 1fr); }
  .hero .brand__logo { width: 76px; margin-bottom: 2px; }
  .hero .brand__name { font-size: clamp(2rem, 5.4vw, 3.4rem); }
  .hero .brand__tagline { margin-top: var(--sp-2); }
  .stage { min-height: 0; height: calc(100svh - 150px); }
  .perk__value { font-size: clamp(1.4rem, 2.6vw, 2rem); }
  .perks { gap: var(--sp-4); }
  .rail__date { font-size: clamp(1rem, 1.8vw, 1.3rem); }
}

/* ---------- Tienda ---------- */

/* La galería nunca más alta que la pantalla (en el interior del Fold una foto 3:4 a todo el ancho medía 900px+) */
.st-gallery__main { max-height: 78svh; margin-inline: auto; }

/* Desde 700px de ancho ya caben dos columnas (galería + compra): interior del Fold abierto */
@media (min-width: 700px) and (max-width: 900px) {
  .st-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-5); }
  .st-gallery { position: sticky; top: 60px; }
  .st-gallery__main { aspect-ratio: 3 / 4; }
  .st-title { font-size: 1.5rem; }
  .st-tier { padding: 12px; }
  .st-tier__price { font-size: 1.25rem; }
  .st-trust { grid-template-columns: 1fr; }
  .st-trust li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 10px; }
  .st-trust li .icon { grid-row: span 2; }
  .st-pas__item, .st-pas__item.is-flip { grid-template-columns: 1fr 1fr; }
  .st-pas__item.is-flip .st-pas__art { order: 2; }
  .st-bento { grid-template-columns: repeat(4, 1fr); }
  .st-videos { grid-template-columns: repeat(3, 1fr); }
  .st-chars { grid-auto-columns: 34%; }
}

/* Exterior del Fold: tarjetas de precio y sellos más compactos */
@media (max-width: 380px) {
  .st-tier { padding: 12px; }
  .st-tier__name { font-size: 0.9rem; }
  .st-tier__price { font-size: 1.2rem; }
  .st-tier__meta, .st-tier__left { padding-left: 0; grid-column: 1 / -1; }
  .st-header__date { display: none; }
  .st-header { grid-template-columns: auto 1fr; gap: 10px; }
  .st-header__brand { justify-self: end; }
  .st-buy { font-size: 0.8rem; letter-spacing: 0.1em; }
}
