/* Escala de pantalla: el contenido aprovecha todo el ancho disponible. */
:root { --max: 100%; }

/* Mantiene una lectura amplia sin desperdiciar el espacio en escritorio. */
header { padding-inline: clamp(28px, 8vw, 150px); }
.hero { min-height: clamp(500px, 42vw, 690px); height: auto; padding-inline: clamp(42px, 9vw, 170px); }
.hero-foot { left: clamp(42px, 9vw, 170px); right: clamp(42px, 9vw, 170px); }
.collection { padding-inline: clamp(28px, 8vw, 150px); }
.guide > div:first-child { padding-inline: clamp(42px, 9vw, 170px); }
.products { padding-inline: clamp(28px, 8vw, 150px); }
.video { padding-inline: clamp(42px, 9vw, 170px); }
.visit { padding-inline: clamp(42px, 9vw, 170px); }
footer { padding-inline: clamp(28px, 8vw, 150px); }
.bottom { left: clamp(28px, 8vw, 150px); right: clamp(28px, 8vw, 150px); }

@media (min-width: 701px) {
  .guide {
    height: auto;
    min-height: clamp(520px, 36vw, 650px);
    overflow: hidden;
  }
  .guide > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(42px, 4vw, 72px);
  }
  .guide button {
    align-self: flex-start;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 8px 18px #3434342b;
  }
  .guide button:hover { background: var(--olive); }
}

@media (min-width: 1500px) {
  .hero { grid-template-columns: 29% 42% 29%; }
  .hero-bottle img { height: 410px; }
  .hero-bottle span { width: 280px; height: 280px; }
  .hero h1 { font-size: 54px; }
  .collection-row a { height: 170px; }
  .collection-row img { height: 138px; }
  .guide { height: 390px; }
  .guide h2, .products h2 { font-size: 50px; }
  .guide-art img { height: 300px; }
  .products { padding-block: 88px 76px; }
  .cards article { min-height: 345px; }
  .art { height: 205px; }
  .art img { height: 185px; }
  .video { grid-template-columns: minmax(0, 1fr) 360px; min-height: 790px; }
  .tiktok-frame { width:360px; }
  .tiktok-frame .tiktok-embed { width:360px !important; max-width:360px !important; }
  .visit { min-height: 380px; }
  .map { height: 270px; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  header, .collection, .products, footer { padding-inline: 32px; }
  .hero { padding-inline: 55px; grid-template-columns: 28% 44% 28%; }
  .hero-foot { left:55px; right:55px; }
  .guide > div:first-child, .video, .visit { padding-inline: 55px; }
  .video { grid-template-columns: minmax(0, 1fr) 325px; gap:36px; }
  .visit { grid-template-columns: 1fr 1fr; gap:35px; }
}

@media (max-width: 700px) {
  .hero, .collection, .products, .video, .visit, footer { width:100%; }
  .collection-row { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .collection-row a { scroll-snap-align:start; }
  .cards { gap:12px; }
  .video { min-height:0; }
  .tiktok-frame { width:min(325px, calc(100vw - 32px)); max-width:100%; }
  .tiktok-frame .tiktok-embed { width:100% !important; min-width:0 !important; max-width:100% !important; }
}