/* Andrés Webinar Funnel · pitch-site additions (loads after styles.css) */

/* ---------- hero: copy above the floating photos ---------- */
.hero__inner { z-index: 2; }
.hero__title { font-size: clamp(1.75rem, 2.9vw, 2.55rem); max-width: 1000px; }
.template-swarm-off .swarm__ph { display: none; }

/* ---------- photo swarm: flies in, then stays floating (desktop + mobile) ---------- */
.swarm { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sw { position: absolute; width: var(--w, clamp(104px, 9.4vw, 150px)); aspect-ratio: 4 / 5; left: var(--x); top: var(--y);
  transform: translate(var(--fx), var(--fy)) rotate(var(--r, 0deg)) scale(0.9); opacity: 0;
  transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s), opacity 0.9s ease var(--d, 0s); will-change: transform; }
.sw i { display: block; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: var(--surface);
  border: 3px solid #fff; box-shadow: 0 24px 50px -22px rgba(17, 22, 19, 0.45), 0 2px 6px rgba(17, 22, 19, 0.08); }
.sw img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.swarm.is-on .sw { transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); opacity: 1; }
.swarm.is-floating .sw i { animation: swFloat var(--t, 7s) ease-in-out var(--fd, 0s) infinite alternate; }
@keyframes swFloat { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(var(--ax, 6px), var(--ay, -10px), 0) rotate(1.2deg); } 100% { transform: translate3d(calc(var(--ax, 6px) * -0.6), calc(var(--ay, -10px) * 0.5), 0) rotate(-1deg); } }

/* desktop: mirrored pairs in the side gutters, framing headline + video */
.sw--1 { --x: 3.5%;  --y: 9%;  --r: -7deg; --fx: -60vw; --fy: -30vh; --d: 0.05s; --t: 7.5s; }
.sw--2 { --x: calc(96.5% - var(--w, clamp(104px, 9.4vw, 150px))); --y: 9%; --r: 6deg; --fx: 60vw; --fy: -30vh; --d: 0.12s; --t: 8.2s; --ax: -6px; }
.sw--3 { --x: 8%;   --y: 37%; --r: 4deg;  --fx: -70vw; --fy: 0; --d: 0.2s; --t: 6.8s; --fd: -2s; }
.sw--4 { --x: calc(92% - var(--w, clamp(104px, 9.4vw, 150px))); --y: 37%; --r: -4deg; --fx: 70vw; --fy: 0; --d: 0.26s; --t: 7.4s; --fd: -1s; }
.sw--5 { --x: 2.5%; --y: 64%; --r: -5deg; --fx: -60vw; --fy: 40vh; --d: 0.32s; --t: 8.6s; --ax: 8px; }
.sw--6 { --x: calc(97.5% - var(--w, clamp(104px, 9.4vw, 150px))); --y: 64%; --r: 5deg; --fx: 60vw; --fy: 40vh; --d: 0.38s; --t: 7.9s; --ax: -8px; }
.sw--7 { --x: 13%;  --y: 82%; --r: 7deg; --fx: -50vw; --fy: 50vh; --d: 0.44s; --t: 6.6s; --w: clamp(84px, 7vw, 116px); }
.sw--8 { --x: calc(87% - clamp(84px, 7vw, 116px)); --y: 82%; --r: -7deg; --fx: 50vw; --fy: 50vh; --d: 0.5s; --t: 7.1s; --w: clamp(84px, 7vw, 116px); }
/* between 761 and 1180px the gutters are narrow: keep the outer six only, smaller */
@media (max-width: 1180px) { .sw { --w: clamp(84px, 8vw, 110px); } .sw--7, .sw--8 { display: none; } }

/* mobile: a floating fan of photos above the copy */
@media (max-width: 760px) {
  .hero { padding-top: 214px; }
  .sw { --w: 72px; top: 64px; }
  .sw--1 { --x: calc(50% - 36px - 136px); --y: 0; top: 94px; --r: -9deg; --fx: -80vw; --fy: 0; }
  .sw--2 { --x: calc(50% - 36px - 68px); --y: 0; top: 76px; --r: -4deg; --fx: -80vw; --fy: -10vh; }
  .sw--3 { --x: calc(50% - 36px); --y: 0; top: 66px; --r: 0deg; --fx: 0; --fy: -40vh; --w: 80px; }
  .sw--4 { --x: calc(50% - 36px + 68px); --y: 0; top: 76px; --r: 4deg; --fx: 80vw; --fy: -10vh; }
  .sw--5 { --x: calc(50% - 36px + 136px); --y: 0; top: 94px; --r: 9deg; --fx: 80vw; --fy: 0; }
  .sw--6, .sw--7, .sw--8 { display: none; }
  .sw--3 { --x: calc(50% - 40px); }
  .sw i { border-width: 2px; border-radius: 12px; }
}
@media (max-width: 360px) { .sw--1, .sw--5 { display: none; } }
@media (prefers-reduced-motion: reduce) { .sw { transition: none; transform: rotate(var(--r, 0deg)); opacity: 1; } .swarm.is-floating .sw i { animation: none; } }
html.reduced .sw { transform: rotate(var(--r, 0deg)); opacity: 1; }

/* ---------- THE MATH ---------- */
.math { padding-top: clamp(40px, 7vh, 80px); }
.math__head { text-align: center; margin-bottom: clamp(40px, 7vh, 64px); }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.vs__col { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 22px; padding: clamp(20px, 3vw, 30px); box-shadow: 0 20px 50px -34px rgba(17, 22, 19, 0.3); }
.vs__col--on { border-color: rgba(13, 107, 78, 0.35); box-shadow: 0 0 0 1px rgba(13, 107, 78, 0.12), 0 30px 70px -34px rgba(13, 107, 78, 0.35); }
.vs__tag { margin: 0 0 16px; text-align: center; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.vs__col--on .vs__tag { color: var(--accent); }
.browser { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); aspect-ratio: 16 / 10; background: #0b0b0c; }
.browser__bar { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--line-soft); }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.browser__bar i:nth-child(2) { background: #febc2e; } .browser__bar i:nth-child(3) { background: #28c840; }
.browser__url { margin-left: 8px; flex: 1; height: 15px; border-radius: 7px; background: rgba(17, 22, 19, 0.06); padding: 0 8px; font: 500 9.5px/15px var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; }
.browser img { position: absolute; inset: 26px 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: 50% 0; }
.flow { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0; }
.flow li { display: flex; flex-direction: column; align-items: center; }
.flow li span { padding: 7px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); font-size: 0.86rem; font-weight: 500; }
.flow li + li::before { content: ""; width: 1.5px; height: 14px; margin: 4px 0; background: var(--text-3); opacity: 0.45; }
.flow--on li span { background: var(--accent-soft); border-color: rgba(13, 107, 78, 0.22); color: var(--accent-deep); }
.vs__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.vs__list li { position: relative; padding: 12px 14px 12px 44px; border-radius: 12px; background: var(--surface-2); font-size: 0.98rem; line-height: 1.45; color: var(--text); }
.vs__list li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 12px; }
.vs__list--bad li::before { background-color: rgba(201, 61, 47, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c93d2f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.vs__list--good li::before { background-color: rgba(13, 107, 78, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d6b4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.simple { max-width: 720px; margin: clamp(36px, 6vh, 56px) auto 0; text-align: center; font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--text-2); text-wrap: balance; }
.simple b { color: var(--text); font-weight: 600; }

/* calculator */
.calc { max-width: 1080px; margin: clamp(40px, 7vh, 64px) auto 0; padding: clamp(22px, 3.4vw, 40px); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 24px; box-shadow: 0 30px 70px -40px rgba(17, 22, 19, 0.35); }
.calc__head { text-align: center; }
.calc__title { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 650; letter-spacing: -0.02em; }
.calc__note { margin: 8px auto 0; max-width: 56ch; font-size: 0.92rem; color: var(--text-3); }
.calc__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0; }
.slider { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); }
.slider__lab { font-size: 0.92rem; color: var(--text-2); }
.slider b { font-family: var(--display); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 44px; cursor: pointer; }
.calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.calc__col { border: 1px solid var(--line-soft); border-radius: 18px; padding: 20px; }
.calc__col--on { border-color: rgba(13, 107, 78, 0.35); background: linear-gradient(180deg, rgba(13, 107, 78, 0.05), transparent 60%); }
.calc__col-tag { margin: 0 0 12px; text-align: center; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.calc__col--on .calc__col-tag { color: var(--accent); }
.assump { display: grid; gap: 6px; }
.assump label { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 4px; font-size: 0.9rem; color: var(--text-2); border-bottom: 1px dashed var(--line-soft); }
.assump span { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 0.86rem; color: var(--text); }
.assump input { width: 62px; padding: 6px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 500 0.88rem var(--mono); text-align: right; color: var(--text); }
.assump input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.res div { padding: 10px 8px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.res span { display: block; font-size: 0.74rem; color: var(--text-3); line-height: 1.3; }
.res b { display: block; margin-top: 4px; font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.res .res__big { grid-column: 1 / -1; background: var(--text); color: var(--bg); }
.res .res__big span { color: rgba(245, 246, 242, 0.7); }
.res .res__big b { font-size: 1.9rem; }
.calc__col--on .res .res__big { background: var(--accent); }
.calc__delta { margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; text-align: center; }
.calc__delta span { font-size: 0.96rem; color: var(--text-2); }
.calc__delta b { font-family: var(--display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.math__cta { margin-top: clamp(36px, 6vh, 56px); text-align: center; }

/* ---------- who built this ---------- */
.who__head { text-align: center; max-width: 760px; margin: 0 auto; }
.who__avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; border: 3px solid #fff; box-shadow: 0 14px 30px -14px rgba(17, 22, 19, 0.4); }
.who__line { margin: 16px auto 0; max-width: 54ch; font-size: 1.08rem; line-height: 1.6; color: var(--text-2); }
.who__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin: clamp(40px, 6vh, 56px) auto 0; }
.who__vid { text-align: center; }
.who__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b0b0c url("assets/img/diego-yt-1.jpg") center / cover; border: 1px solid var(--line-soft); box-shadow: 0 24px 60px -36px rgba(17, 22, 19, 0.45); }
.who__vid:nth-child(2) .who__frame { background-image: url("assets/img/diego-yt-2.jpg"); }
.who__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.who__vname { margin: 16px 0 4px; font-family: var(--display); font-size: 1.15rem; font-weight: 650; }
.who__vdesc { margin: 0; font-size: 0.95rem; color: var(--text-2); }
.who__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(32px, 5vh, 44px); }
.social { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 22px 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: 0 14px 30px -24px rgba(17, 22, 19, 0.35); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); }
.social:hover { transform: translateY(-2px); border-color: var(--accent); }
.social svg { width: 30px; height: 30px; flex: none; }
.social span { display: flex; flex-direction: column; text-align: left; font-size: 0.86rem; color: var(--text-2); line-height: 1.25; }
.social b { font-size: 0.98rem; color: var(--text); }

@media (max-width: 860px) {
  .vs, .calc__grid, .calc__controls, .who__grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res b { font-size: 1.1rem; }
  .assump label { font-size: 0.84rem; }
}