:root {
  --azul: #2e3092;
  --azul-hondo: #1d1f66;
  --celeste: #27aae1;
  --tinta: #14164a;
  --papel: #f4f5fc;
  --papel-2: #e7e9f7;
  --carton: #c99a5f;
  --carton-oscuro: #a87a42;
  --linea: rgba(20, 22, 74, .14);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-boing: cubic-bezier(.34, 1.45, .64, 1);

  --f-body: "Montserrat", system-ui, sans-serif;
  --f-marker: "Permanent Marker", "Montserrat", cursive;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
::selection { background: var(--celeste); color: #fff; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--azul); padding: 10px 14px; border-radius: 8px; font-weight: 500; }
.skip:focus { top: 12px; }

h1, h2, h3 { font-weight: 900; letter-spacing: -.03em; line-height: 1; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.2rem + 3.8vw, 4.25rem); }
h2 em { font-style: normal; color: var(--azul); }
h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }

/* ─── Botones ─── */
.btn {
  --h: 58px;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: var(--h); padding: 0 28px;
  border-radius: 999px;
  font: 800 1rem/1 var(--f-body); letter-spacing: .01em;
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn--wa { background: #fff; color: var(--azul); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.btn--wa svg { color: var(--azul); }
@media (hover: hover) {
  .btn--wa:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .55); background: var(--celeste); color: var(--azul-hondo); }
  .btn--wa:hover svg { color: var(--azul-hondo); }
}
.btn--wa:active { transform: scale(.97); }
.btn--xl { --h: 72px; padding: 0 40px; font-size: 1.125rem; }

/* ─── Hero ─── */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--azul);
  color: #fff;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.hero::before { /* grano de cartón: líneas finas de corrugado en el fondo */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, .035) 46px 47px);
}
.hero__top { display: flex; justify-content: space-between; align-items: center; padding: max(20px, env(safe-area-inset-top)) 0 0; max-width: var(--max); width: 100%; margin: 0 auto; }
.hero__logo { width: clamp(128px, 14vw, 170px); height: auto; }
.hero__tel { font-weight: 500; font-size: .95rem; text-decoration: none; padding: 10px 0; opacity: .9; }
.hero__tel:hover { text-decoration: underline; }

.hero__grid {
  flex: 1; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 5vw, 80px);
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) 0 clamp(56px, 9vh, 96px);
}
.hero__where { font-weight: 500; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .85; margin-bottom: 20px; }
.hero__title { font-size: clamp(2.9rem, 1.2rem + 7.6vw, 6rem); letter-spacing: -.04em; line-height: .96; }
.hero__title .line { display: block; overflow: hidden; padding: .04em 0 .12em; margin-bottom: -.1em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); animation: rise .9s var(--ease) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: .09s; }
.hero__title .line:nth-child(3) > span { animation-delay: .18s; color: var(--celeste); }
.dot { font-style: normal; color: #fff; }
@keyframes rise { to { transform: none; } }

.hero__lead { max-width: 34ch; margin-top: 26px; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 300; line-height: 1.5; opacity: 0; animation: fade .8s .5s var(--ease) forwards; }
@keyframes fade { to { opacity: 1; } }

.hero__deal { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 34px; opacity: 0; animation: fade .8s .65s var(--ease) forwards; }

.price {
  position: relative; display: inline-flex; align-items: baseline; gap: 10px;
  background: var(--celeste); color: var(--azul-hondo);
  padding: 14px 24px 14px 22px; transform: rotate(-2deg);
  clip-path: polygon(0 0, 100% 0, 98% 22%, 100% 45%, 98% 70%, 100% 100%, 0 100%, 2% 70%, 0 45%, 2% 22%); /* borde de cinta cortada */
}
.price__cur { font-weight: 800; font-size: .95rem; }
.price__num { font-weight: 900; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.price__per { font-weight: 500; font-size: .95rem; }

/* Escenario: foto + cajas */
.hero__stage { position: relative; justify-self: center; width: min(100%, 420px); padding: 0 0 70px 24px; }
.hero__photo {
  position: relative; margin: 0; aspect-ratio: 3 / 4;
  transform: rotate(3deg); will-change: transform;
  background: #fff; padding: 10px; border-radius: 6px;
  box-shadow: 0 40px 70px -30px rgba(5, 6, 40, .8), 0 8px 18px -8px rgba(5, 6, 40, .5);
  opacity: 0; animation: photoIn 1s .25s var(--ease) forwards;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
@keyframes photoIn { from { opacity: 0; transform: translateY(40px) rotate(8deg); } to { opacity: 1; transform: translateY(0) rotate(3deg); } }
.tape { position: absolute; width: 96px; height: 30px; background: rgba(39, 170, 225, .88); z-index: 2; }
.tape--a { top: -12px; left: 8%; transform: rotate(-32deg); }
.tape--b { top: -10px; right: 4%; transform: rotate(26deg); }

.stack { position: absolute; left: -2%; bottom: 0; width: 76%; height: 190px; pointer-events: none; }
.box {
  position: absolute; background: var(--carton); border-radius: 3px;
  box-shadow: 0 18px 24px -12px rgba(5, 6, 40, .6), inset 0 -10px 0 rgba(0, 0, 0, .06);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(-420px) rotate(-14deg);
  animation: drop .95s var(--ease-boing) forwards;
}
.box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26%; border-bottom: 2px solid rgba(70, 40, 10, .28); background: rgba(255, 255, 255, .05); }
.box::after { content: ""; position: absolute; left: 50%; top: 0; width: 22%; height: 26%; transform: translateX(-50%); background: var(--celeste); opacity: .92; }
.label { position: relative; z-index: 1; margin-top: 22%; font: 1.15rem/1 var(--f-marker); color: var(--tinta); transform: rotate(-3deg); letter-spacing: .02em; }
.box--1 { left: 0; bottom: 0; width: 62%; height: 110px; --r: -2deg; animation-delay: .9s; }
.box--2 { left: 52%; bottom: 0; width: 48%; height: 96px; --r: 3deg; animation-delay: 1.05s; }
.box--3 { left: 12%; bottom: 100px; width: 46%; height: 88px; --r: 4deg; animation-delay: 1.2s; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-420px) rotate(-14deg); } 18% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }

.hero__down { position: absolute; left: 50%; bottom: 20px; width: 44px; height: 44px; transform: translateX(-50%); display: grid; place-items: center; }
.hero__down span { width: 12px; height: 12px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(8px) rotate(45deg); } }

/* ─── Cinta de datos ─── */
.strip { background: var(--celeste); color: var(--azul-hondo); overflow: hidden; border-block: 3px solid var(--azul-hondo); }
.strip__track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__list { display: flex; flex-shrink: 0; }
.strip__list li { font-weight: 900; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); letter-spacing: -.01em; padding: 16px 0; white-space: nowrap; }
.strip__list li::after { content: "✕"; display: inline-block; margin: 0 clamp(18px, 3vw, 36px); font-size: .7em; opacity: .55; transform: translateY(-.08em); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ─── Recorrido ─── */
.tour { padding: clamp(72px, 12vw, 160px) var(--gutter); max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; }
.tour__intro { margin-bottom: clamp(40px, 7vw, 88px); }
.tour__intro h2 { max-width: 16ch; }
.tour__intro p { margin-top: 22px; font-weight: 300; font-size: 1.2rem; max-width: 36ch; }

.tour__body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rail { position: sticky; top: 14vh; align-self: start; }
.rail__box {
  position: relative; aspect-ratio: 1 / .92; background: var(--carton);
  border-radius: 4px; display: grid; place-content: center; text-align: center; gap: 10px;
  box-shadow: 0 30px 40px -24px rgba(20, 22, 74, .6), inset 0 -14px 0 rgba(0, 0, 0, .07);
  transform: rotate(-2deg);
}
.rail__box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 24%; border-bottom: 2px solid rgba(70, 40, 10, .28); }
.rail__tape { position: absolute; top: 0; left: 50%; width: 22%; height: 24%; transform: translateX(-50%); background: var(--celeste); transform-origin: top center; }
.rail__label { font: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem)/1 var(--f-marker); color: var(--tinta); margin-top: 26%; transform: rotate(-3deg); }
.rail__count { font: 1rem/1 var(--f-marker); color: var(--tinta); opacity: .7; }
.rail__box.is-swap .rail__label, .rail__box.is-swap .rail__count { animation: scribble .55s var(--ease); }
.rail__box.is-swap .rail__tape { animation: peel .55s var(--ease); }
@keyframes scribble { from { opacity: 0; transform: translateY(14px) rotate(-8deg) scale(.92); } to { opacity: 1; } }
@keyframes peel { 0% { transform: translateX(-50%) scaleY(0); } 100% { transform: translateX(-50%) scaleY(1); } }

.rooms { display: grid; gap: clamp(72px, 12vw, 150px); }
.room h3 { max-width: 14ch; }
.room > p { margin-top: 14px; max-width: 46ch; font-weight: 300; font-size: 1.12rem; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); margin-top: 30px; }
.shot { margin: 0; border-radius: 10px; overflow: hidden; background: var(--papel-2); aspect-ratio: 3 / 4; cursor: zoom-in; box-shadow: 0 24px 40px -28px rgba(20, 22, 74, .6); }
.shot:nth-child(even) { transform: translateY(clamp(18px, 4vw, 52px)); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) { .shot:hover img { transform: scale(1.05); } }
.shots > .shot:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.shots > .shot:last-child:nth-child(odd):nth-child(even) { transform: none; }

/* ─── Por qué ─── */
.why { background: var(--azul); color: #fff; padding: clamp(72px, 11vw, 150px) var(--gutter); }
.why__list { max-width: var(--max); margin: 0 auto; display: grid; }
.why__list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 40px; padding: clamp(22px, 3.4vw, 40px) 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.why__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .28); }
.why__big { font-weight: 900; font-size: clamp(2.1rem, 1.1rem + 5vw, 5.25rem); letter-spacing: -.045em; line-height: 1; }
.why__txt { max-width: 28ch; font-weight: 300; font-size: 1.1rem; opacity: .92; }

/* ─── Requisitos ─── */
.reqs { padding: clamp(72px, 11vw, 150px) var(--gutter); max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; }
.reqs__head p { margin-top: 20px; font-weight: 300; font-size: 1.2rem; max-width: 40ch; }
.reqs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 6vw, 72px); align-items: start; }
.note { position: relative; background: #fff; border-radius: 4px; padding: 38px 28px 32px; box-shadow: 0 30px 40px -28px rgba(20, 22, 74, .5); }
.note::before { content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: rgba(39, 170, 225, .85); }
.note--a { transform: rotate(-1.2deg); }
.note--b { transform: translateY(24px) rotate(.8deg); }
.note--c { transform: rotate(-.6deg); }
.note h3 { font-size: 1.5rem; margin-bottom: 18px; color: var(--azul); }
.checks { display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 38px; font-size: 1rem; line-height: 1.45; }
.tick { position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border: 2.5px solid var(--azul); border-radius: 5px; }
.tick::after { content: ""; position: absolute; left: 5px; top: 0; width: 8px; height: 14px; border-right: 3.5px solid var(--celeste); border-bottom: 3.5px solid var(--celeste); transform: rotate(40deg) scale(0); transform-origin: 70% 70%; transition: transform .5s var(--ease-boing); }
.is-in .tick::after, .is-in.tick::after { transform: rotate(40deg) scale(1); }
.is-in .checks li:nth-child(2) .tick::after { transition-delay: .15s; }
.is-in .checks li:nth-child(3) .tick::after { transition-delay: .3s; }
.is-in .checks li:nth-child(4) .tick::after { transition-delay: .45s; }

/* ─── Ubicación ─── */
.where { background: var(--papel-2); padding: clamp(64px, 9vw, 120px) var(--gutter); }
.where__in { max-width: var(--max); margin: 0 auto; }
.where h2 { max-width: 18ch; }
.where p { margin-top: 20px; max-width: 46ch; font-weight: 300; font-size: 1.2rem; }

/* ─── Cierre ─── */
.close { background: var(--azul); color: #fff; padding: clamp(80px, 12vw, 160px) var(--gutter) calc(40px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; isolation: isolate; }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, .035) 46px 47px); }
.close__cta { max-width: var(--max); margin: 0 auto; }
.close__cta h2 { font-size: clamp(3rem, 1rem + 9vw, 7rem); max-width: 10ch; letter-spacing: -.045em; }
.close__cta p { margin: 20px 0 36px; font-weight: 300; font-size: 1.3rem; }
.close__info { max-width: var(--max); margin: clamp(64px, 9vw, 120px) auto 0; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .28); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 64px; }
.close__info img { width: 170px; height: auto; }
.close__info address { line-height: 1.8; font-weight: 300; }
.close__social { display: flex; gap: 22px; line-height: 1.8; }
.close a { text-decoration-color: rgba(255, 255, 255, .5); }
.close a:not(.btn):hover { color: var(--celeste); }
.close__legal { max-width: var(--max); margin: 36px auto 0; font-size: .82rem; line-height: 1.6; opacity: .78; font-weight: 300; }

/* ─── WhatsApp flotante ─── */
.fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--celeste); color: var(--azul-hondo); box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .45); text-decoration: none; transform: translateY(120px) scale(.8); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-boing), opacity .3s; }
.fab.is-on { transform: none; opacity: 1; pointer-events: auto; }
.fab:active { transform: scale(.94); }

/* ─── Lightbox ─── */
.lb { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(12, 13, 50, .94); color: #fff; }
.lb[open] { display: grid; place-items: center; animation: fade .25s forwards; opacity: 0; }
.lb img { max-width: min(92vw, 900px); max-height: 88dvh; object-fit: contain; border-radius: 6px; }
.lb button { position: absolute; background: none; border: 0; color: #fff; font: 400 2.8rem/1 var(--f-body); width: 56px; height: 56px; cursor: pointer; border-radius: 50%; }
.lb button:hover { background: rgba(255, 255, 255, .14); }
.lb__x { top: 14px; right: 14px; }
.lb__prev { left: 10px; top: 50%; translate: 0 -50%; }
.lb__next { right: 10px; top: 50%; translate: 0 -50%; }
.lb::backdrop { background: transparent; }

/* ─── Reveal ─── */
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .shot[data-reveal] img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .shot[data-reveal].is-in img { clip-path: inset(0); }
.js .shot[data-reveal].is-in:nth-child(even) { transform: translateY(clamp(18px, 4vw, 52px)); }
.js .shots > .shot[data-reveal].is-in:last-child:nth-child(odd) { transform: none; }
.js .note--a.is-in { transform: rotate(-1.2deg); }
.js .note--b.is-in { transform: translateY(24px) rotate(.8deg); }
.js .note--c.is-in { transform: rotate(-.6deg); }

/* ─── Móvil ─── */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; padding-top: 24px; }
  .hero__stage { width: min(78%, 340px); margin-top: 8px; }
  .hero__title { font-size: clamp(2.5rem, 11.6vw, 4.6rem); }
  .hero__down { display: none; }

  .tour__body { grid-template-columns: 1fr; gap: 0; }
  .rail { position: sticky; top: 0; z-index: 20; margin: 0 calc(var(--gutter) * -1) 28px; padding: max(8px, env(safe-area-inset-top)) var(--gutter) 8px; background: var(--papel); box-shadow: 0 1px 0 var(--linea); }
  .rail__box { aspect-ratio: auto; height: 54px; transform: none; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 70px; box-shadow: none; }
  .rail__box::before { inset: 0 auto 0 0; width: 22%; height: auto; border: 0; border-right: 2px dashed rgba(70, 40, 10, .3); }
  .rail__tape { top: 0; left: 0; width: 46px; height: 100%; transform: none; transform-origin: left center; }
  .rail__box.is-swap .rail__tape { animation: peelX .55s var(--ease); }
  @keyframes peelX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .rail__label { margin: 0; font-size: 1.35rem; }
  .rail__count { font-size: .95rem; }

  .reqs__grid { grid-template-columns: 1fr; gap: 36px; }
  .note--b { transform: rotate(.8deg); }
  .js .note--b.is-in { transform: rotate(.8deg); }
}
@media (max-width: 520px) {
  .shots { gap: 12px; }
  .btn { width: 100%; justify-content: center; }
  .btn--xl { padding: 0 20px; font-size: 1rem; }
  .hero__deal { gap: 22px; }
  .close__info img { width: 140px; }
}

/* ─── Movimiento reducido ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .strip__track { animation: none; flex-wrap: wrap; width: auto; }
  .strip__list[aria-hidden] { display: none; }
  .hero__title .line > span, .hero__lead, .hero__deal, .hero__photo, .box { opacity: 1; transform: none; }
  .hero__photo { transform: rotate(3deg); }
  .js [data-reveal], .js .shot[data-reveal] { opacity: 1; transform: none; }
  .js .shot[data-reveal] img { clip-path: none; }
}