/* Landing Cyber Monday 2026 · Fun Patagonia
   En escritorio cada sección es un lienzo de 1920 px de diseño: --u es 1 px de diseño y escala con el ancho (también por encima de 1920).
   Debajo de 901 px las secciones pasan a una columna con la foto aparte. */
:root {
  --azul: #4097FE;
  --lima: #B8FF00;
  --violeta: #B412FF;
  --rosa: #FF84FF;
  --negro: #0C0B1C;
  --noche: #090D1F;
  --blanco: #FFFFFF;
  --u: calc(100vw / 1920);
  --titulos: 'Barlow Condensed', 'Oswald', sans-serif;
  --condensada: 'Oswald', 'Barlow Condensed', sans-serif;
  --redonda: 'Jost', 'Futura', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--condensada); color: var(--negro); background: var(--blanco); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--negro); outline-offset: 4px; }

/* Botones: paralelogramo con sombra corrida, como en el diseño */
.btn {
  white-space: nowrap; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font-family: var(--condensada); font-weight: 500; text-transform: uppercase; text-decoration: none; line-height: 1;
  color: var(--violeta); min-height: 44px; transition: transform .15s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lima);
  transform: skewX(-8deg); box-shadow: calc(9 * var(--u)) calc(9 * var(--u)) 0 var(--violeta);
}
.btn--violeta { color: var(--lima); }
.btn--violeta::before { background: var(--violeta); box-shadow: calc(9 * var(--u)) calc(9 * var(--u)) 0 var(--lima); }
/* Flecha hacia abajo o arriba: el botón lleva a las promos de esta misma página */
.btn__baja { height: .78em; width: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 3; }
.btn__baja--arriba { transform: rotate(180deg); }
.btn--flecha::after {
  content: ""; width: 2.1em; height: .5em; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 20'%3E%3Cpath d='M0 10h80M71 3l9 7-9 7' fill='none' stroke='%23B412FF' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn:hover { transform: translateY(-3px) rotate(var(--giro, 0deg)); }
.btn:active { transform: translateY(1px) rotate(var(--giro, 0deg)); }

/* Títulos compartidos */
.lugar { display: flex; align-items: center; gap: .14em; font-family: var(--titulos); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: .01em; color: var(--negro); }
.lugar svg { height: .82em; width: auto; fill: currentColor; }
.lugar--blanco { color: var(--blanco); }
.frase { font-family: var(--condensada); font-weight: 400; text-transform: uppercase; line-height: 1.12; color: var(--negro); }
.frase span { color: var(--rosa); }
.frase--blanca { color: var(--blanco); }
.bajada { font-family: var(--condensada); font-weight: 400; line-height: 1.32; color: var(--negro); }
.bajada--blanca { color: var(--blanco); }

/* ---------- Escritorio: lienzos con medidas del diseño ---------- */
@media (min-width: 901px) {
  .s { position: relative; height: calc(700 * var(--u)); background: center / cover no-repeat; overflow: hidden; }
  .s > *, .s__abs { position: absolute; }
  .s::before { content: none; }

  /* Portada */
  .hero { background-image: url(img/hero.webp); background-color: var(--azul); }
  .hero__marca { left: calc(1652 * var(--u)); top: 0; width: calc(268 * var(--u)); }
  .hero__bandera, .hero__cyber { opacity: 0; } /* ya vienen en la foto de fondo, quedan para lectores de pantalla */
  .hero__cyber { left: calc(1664 * var(--u)); top: calc(454 * var(--u)); width: calc(230 * var(--u)); }
  .hero__todoeso { left: calc(58 * var(--u)); top: calc(68 * var(--u)); width: calc(806 * var(--u)); }
  .hero__valija { left: calc(852 * var(--u)); top: calc(86 * var(--u)); width: calc(136 * var(--u)); }
  .hero__titulo { left: calc(56 * var(--u)); top: calc(322 * var(--u)); font-family: var(--titulos); font-weight: 800; text-transform: uppercase; color: var(--blanco); font-size: calc(103 * var(--u)); line-height: 1; letter-spacing: .005em; }
  .hero__titulo span { display: block; font-family: var(--condensada); font-weight: 400; color: var(--lima); font-size: .54em; margin-top: calc(18 * var(--u)); }
  .hero__btn { left: calc(570 * var(--u)); top: calc(474 * var(--u)); padding: 0 calc(30 * var(--u)); height: calc(82 * var(--u)); font-size: calc(46 * var(--u)); --giro: -3deg; transform: rotate(-3deg); }
  .hero__pill { left: calc(58 * var(--u)); top: calc(618 * var(--u)); background: var(--rosa); color: var(--violeta); font-size: calc(27 * var(--u)); line-height: calc(42 * var(--u)); padding: 0 calc(12 * var(--u)); }

  /* Perito Moreno */
  .moreno { background-image: url(img/fondo-moreno.webp); }
  .moreno__lupa { left: calc(840 * var(--u)); top: calc(112 * var(--u)); width: calc(166 * var(--u)); }
  .moreno__texto { left: calc(1034 * var(--u)); top: calc(104 * var(--u)); }
  .moreno .lugar, .sky .lugar { font-size: calc(98 * var(--u)); letter-spacing: .02em; }
  .moreno .frase { font-size: calc(51 * var(--u)); line-height: 1.14; margin: calc(22 * var(--u)) 0 0 calc(54 * var(--u)); }
  .moreno .bajada { font-size: calc(28 * var(--u)); margin: calc(14 * var(--u)) 0 0 calc(60 * var(--u)); width: calc(520 * var(--u)); }
  .moreno .btn { margin: calc(34 * var(--u)) 0 0 calc(56 * var(--u)); width: calc(306 * var(--u)); height: calc(52 * var(--u)); font-size: calc(36 * var(--u)); }
  .moreno__logo { left: calc(1570 * var(--u)); top: calc(282 * var(--u)); width: calc(218 * var(--u)); }
  .moreno__esquina { width: calc(70 * var(--u)); height: calc(70 * var(--u)); border: 0 solid var(--negro); }
  .moreno__esquina--arriba { left: calc(1782 * var(--u)); top: calc(48 * var(--u)); border-width: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; }
  .moreno__esquina--abajo { left: calc(1768 * var(--u)); top: calc(580 * var(--u)); border-width: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0; }

  /* Sky Over Moreno */
  .sky { background-image: url(img/fondo-sky.webp); background-color: var(--noche); }
  .sky__texto { left: calc(56 * var(--u)); top: calc(102 * var(--u)); }
  .sky .frase { font-size: calc(51 * var(--u)); line-height: 1.14; margin: calc(58 * var(--u)) 0 0 calc(60 * var(--u)); }
  .sky .bajada { font-size: calc(28 * var(--u)); margin: calc(12 * var(--u)) 0 0 calc(66 * var(--u)); width: calc(400 * var(--u)); }
  .sky .btn { margin: calc(26 * var(--u)) 0 0 calc(62 * var(--u)); width: calc(306 * var(--u)); height: calc(52 * var(--u)); font-size: calc(36 * var(--u)); }

  /* La pista */
  .pista { height: calc(516 * var(--u)); background: none; }
  .pista__foto { left: 0; top: 0; width: 100%; height: 100%; background: url(img/fondo-pista.webp) center / cover no-repeat; }
  .pista__cartel { position: absolute; left: calc(1140 * var(--u)); top: calc(158 * var(--u)); width: calc(532 * var(--u)); }
  .pista__btn { position: absolute; left: calc(1362 * var(--u)); top: calc(362 * var(--u)); padding: 0 calc(24 * var(--u)); height: calc(64 * var(--u)); font-size: calc(36 * var(--u)); white-space: nowrap; --giro: -3deg; transform: rotate(-3deg); }

  /* Tu próxima aventura */
  .aventura { background-image: url(img/fondo-aventura.webp); background-color: var(--azul); }
  .aventura__texto { left: calc(78 * var(--u)); top: calc(96 * var(--u)); }
  .aventura__titulo { font-family: var(--redonda); font-weight: 800; text-transform: uppercase; color: var(--blanco); font-size: calc(72 * var(--u)); line-height: 1.32; }
  .aventura__titulo span { color: var(--lima); }
  .aventura .tag-fecha { margin-top: calc(40 * var(--u)); font-size: calc(50 * var(--u)); width: calc(500 * var(--u)); height: calc(112 * var(--u)); }
  .aventura .btn { margin: calc(38 * var(--u)) 0 0 calc(16 * var(--u)); padding: 0 calc(24 * var(--u)); height: calc(52 * var(--u)); font-size: calc(34 * var(--u)); color: var(--blanco); }
  .aventura__valija { left: calc(630 * var(--u)); top: calc(310 * var(--u)); width: calc(306 * var(--u)); }
  .aventura__cyber { left: calc(1680 * var(--u)); top: calc(454 * var(--u)); width: calc(230 * var(--u)); }
}

/* Etiqueta de fecha (lima con sombra violeta) */
.tag-fecha { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; font-family: var(--condensada); font-weight: 500; text-transform: uppercase; color: var(--violeta); line-height: 1; transform: rotate(-2.5deg); }
.tag-fecha::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lima); transform: skewX(-6deg); box-shadow: calc(12 * var(--u)) calc(12 * var(--u)) 0 var(--violeta); }
.tag-fecha small { font-size: .62em; margin: 0 .2em; }


/* Promos: debajo de la portada, la puerta de entrada a las 8 ofertas. Flujo normal (no lienzo), medidas fluidas. */
.promos { background: var(--blanco); padding: clamp(44px, 5vw, 96px) clamp(16px, 4vw, 96px) clamp(48px, 5vw, 96px); text-align: center; }
.promos__titulo { font-family: var(--titulos); font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 5vw, 95px); line-height: 1; }
.promos__titulo span { color: var(--rosa); }
.promos__bajada { font-size: clamp(18px, 1.5vw, 28px); margin-top: 10px; }
.promos__grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; max-width: 1640px; margin: clamp(28px, 3vw, 56px) auto 0; text-align: left; }
.promos__logo { display: block; width: 34%; max-width: 150px; margin: clamp(36px, 4vw, 64px) auto 0; }

.promo { position: relative; display: flex; flex-direction: column; transition: transform .2s ease; }
.promo__foto { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 6px 6px 0 var(--lima); }
.promo--lima .promo__foto { box-shadow: 6px 6px 0 var(--violeta); }
.promo__cuerpo { display: flex; flex-direction: column; flex: 1; padding-top: 18px; }
.promo__oferta { align-self: flex-start; font-family: var(--titulos); font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.25vw, 24px); line-height: 1; padding: .3em .5em .25em; background: var(--violeta); color: var(--lima); transform: skewX(-8deg); }
.promo--lima .promo__oferta { background: var(--lima); color: var(--violeta); }
.promo__nombre { font-family: var(--titulos); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 1.75vw, 34px); line-height: 1; margin-top: 10px; }
.promo__nombre a { text-decoration: none; }
.promo__nombre a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toda la tarjeta es el link */
.promo__nombre a:focus-visible { outline: none; }
.promo:focus-within { outline: 3px solid var(--negro); outline-offset: 8px; }
.promo__detalle { font-size: clamp(15px, 1.1vw, 20px); line-height: 1.25; margin-top: 6px; color: #3B3A50; }
.promo__precio { margin-top: auto; padding-top: 12px; font-family: var(--titulos); font-weight: 800; font-size: clamp(24px, 2vw, 40px); line-height: 1; color: var(--violeta); }
.promo__precio s { font-family: var(--condensada); font-weight: 400; font-size: .5em; color: #6B6A80; margin-right: .25em; }
.promo__por { font-family: var(--condensada); font-weight: 500; font-size: .45em; color: #6B6A80; white-space: nowrap; }
.promo__precio--nota { font-family: var(--condensada); font-weight: 500; text-transform: uppercase; font-size: clamp(16px, 1.25vw, 24px); color: #6B6A80; }
.promo .promo__btn { align-self: stretch; margin: 14px 6px 0 0; padding: 0 12px; height: clamp(42px, 3vw, 58px); font-size: clamp(18px, 1.5vw, 28px); }
.promo .promo__btn::before { box-shadow: 5px 5px 0 var(--violeta); }
.promo:hover { transform: translateY(-6px); }
.promo:hover .promo__btn { transform: translateY(-2px); }

/* 2 columnas: 4 filas parejas */
/* Tablet: 3 + 3 + 2 centradas */
@media (min-width: 700px) {
  .promos__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px 28px; }
  .promo { grid-column: auto / span 2; }
  .promo:nth-child(7) { grid-column: 2 / span 2; }
}
/* Escritorio: 4 arriba y 4 abajo */
@media (min-width: 1100px) {
  .promos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px clamp(28px, 2.4vw, 48px); }
  .promo, .promo:nth-child(7) { grid-column: auto; }
}

/* Pie */
.pie { background: var(--noche); color: #C9CEE6; text-align: center; font-size: 15px; padding: 22px 16px 26px; }

/* WhatsApp flotante */
.wsp { position: fixed; right: 18px; bottom: 18px; z-index: 10; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.wsp svg { width: 32px; fill: #fff; }

/* ---------- Celular y tablet ---------- */
@media (max-width: 900px) {
  .s { position: relative; display: flex; flex-direction: column; }
  .s::after { content: ""; display: block; width: 100%; background: center / cover no-repeat; }
  .lugar { font-size: clamp(38px, 11vw, 64px); }
  .frase { font-size: clamp(30px, 8.4vw, 46px); margin-top: 14px; }
  .bajada { font-size: 18px; margin-top: 10px; max-width: 30ch; }
  .btn { align-self: flex-start; font-size: 22px; height: 48px; padding: 0 22px; margin-top: 22px; }
  .btn::before { box-shadow: 5px 5px 0 var(--violeta); }
  .btn--violeta::before { box-shadow: 5px 5px 0 var(--lima); }

  .hero { background: var(--azul); padding: 18px 16px 0; overflow: hidden; }
  /* Foto más baja que en el diseño (recorta cielo y agua) para que las promos asomen en el primer pantallazo */
  .hero::after { aspect-ratio: 900 / 560; margin: 22px -16px 0; width: calc(100% + 32px); background-image: url(img/hero-movil.webp); background-position: center 70%; }
  .hero__marca { position: absolute; right: 0; top: 0; width: 28vw; max-width: 170px; }
  .hero__todoeso { width: 72vw; max-width: 460px; margin-top: 4px; }
  .hero__valija { display: none; }
  .hero__titulo { font-family: var(--titulos); font-weight: 800; text-transform: uppercase; color: var(--blanco); font-size: clamp(46px, 14vw, 84px); line-height: .95; margin-top: 26px; }
  .hero__titulo span { display: block; font-family: var(--condensada); font-weight: 400; color: var(--lima); font-size: .62em; margin-top: 8px; }
  .hero__btn { transform: rotate(-3deg); --giro: -3deg; }
  .hero__pill { align-self: flex-start; background: var(--rosa); color: var(--violeta); font-size: 17px; padding: 5px 10px; margin-top: 22px; }
  .hero__cyber { position: absolute; right: 10px; bottom: 12px; width: 26vw; max-width: 150px; }

  .moreno { background: var(--blanco); padding: 0 16px 48px; }
  .moreno::after { order: -1; aspect-ratio: 950 / 610; margin: 0 -16px 28px; width: calc(100% + 32px); background-image: url(img/moreno-movil.webp); }
  .moreno__lupa { position: absolute; right: 10px; top: 8px; width: 16vw; max-width: 90px; }
  .moreno__logo { position: absolute; right: 16px; bottom: 40px; width: 22vw; max-width: 120px; }
  .moreno__esquina { display: none; }
  .moreno__texto .frase, .moreno__texto .bajada, .moreno__texto .btn { margin-left: 4px; }

  .sky { background: var(--noche); padding: 44px 16px 0; }
  .sky::after { aspect-ratio: 845 / 700; margin: 30px -16px 0; width: calc(100% + 32px); background-image: url(img/sky-movil.webp); }
  .sky__texto { display: flex; flex-direction: column; }

  .pista { background: var(--blanco); }
  .pista::after { content: none; }
  .pista__foto { position: relative; background: url(img/pista-movil.webp) center / cover no-repeat; aspect-ratio: 880 / 516; }
  .pista__cartel { position: absolute; right: 4%; bottom: 22%; width: 62%; }
  .pista__btn { position: absolute; right: 7%; bottom: 6%; font-size: 17px; height: 40px; min-height: 40px; padding: 0 14px; margin: 0; transform: rotate(-3deg); --giro: -3deg; }
  .aventura { background: var(--azul); padding: 44px 16px 0; }
  .aventura::after { aspect-ratio: 1080 / 700; margin: 34px -16px 0; width: calc(100% + 32px); background-image: url(img/aventura-movil.webp); }
  .aventura__texto { display: flex; flex-direction: column; }
  .aventura__titulo { font-family: var(--redonda); font-weight: 800; text-transform: uppercase; color: var(--blanco); font-size: clamp(34px, 10vw, 56px); line-height: 1.2; }
  .aventura__titulo span { color: var(--lima); }
  .aventura .tag-fecha { align-self: flex-start; font-size: clamp(26px, 7.4vw, 40px); padding: 14px 22px 12px; margin-top: 24px; }
  .aventura .tag-fecha::before { box-shadow: 6px 6px 0 var(--violeta); }
  .aventura .btn { color: var(--blanco); }
  .aventura__valija { position: absolute; right: 12px; top: 40px; width: 24vw; max-width: 140px; }
  .aventura__cyber { position: absolute; right: 10px; bottom: 12px; width: 26vw; max-width: 150px; }

  html { scroll-padding-bottom: 80px; }
  .wsp { width: 50px; height: 50px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .wsp svg { width: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .promo { transition: none; }
}