html[data-intro-version="v3"] { overflow: hidden; }
html[data-intro-version="v3"] #app { display: none; }
html:not([data-intro-version="v3"]) .experience-v3 { display: none; }

.experience-v3 {
  --v3-line: rgba(151, 201, 220, .13); --v3-muted: rgba(149, 178, 189, .6); --v3-blue: #4bb9e4;
  position: fixed; inset: 0; z-index: 2; overflow: hidden; padding: 0 clamp(22px, 3vw, 54px) 24px;
  background: radial-gradient(circle at 35% 45%, rgba(6, 79, 108, .13), transparent 34%), #000304;
  opacity: 0; transform: translateY(14px) scale(.992); pointer-events: none;
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.experience-v3.is-entered { opacity: 1; transform: none; pointer-events: auto; }
.experience-v3.is-handoff-target { transform: none; transition: none; }
.experience-v3.is-handoff-target:not(.is-handoff-hidden) { opacity: 1; }
.v3-header { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v3-line); }
.v3-brand img { display: block; width: auto; height: 56px; }
.v3-header-actions { display: flex; align-items: center; gap: 24px; }
.v3-header-actions button, .v3-decision-footer button, .v3-link-action {
  border: 0; background: transparent; color: rgba(189, 211, 219, .6); font-size: 8px; font-weight: 750; letter-spacing: .18em; cursor: pointer;
}
.v3-header-actions button:first-child { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid var(--v3-line); border-radius: 999px; }
.v3-header-actions b { color: #dcebf0; font-size: 10px; }
.v3-progress { height: 1px; background: rgba(132, 183, 204, .08); }
.v3-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #1d8fbe, #81d6f3); box-shadow: 0 0 14px rgba(69,179,221,.55); transition: width .55s cubic-bezier(.16,1,.3,1); }
.v3-workspace { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(360px, .72fr); height: calc(100svh - 110px); }
.v3-stage { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--v3-line); }
.v3-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 12%, rgba(50,137,173,.035), transparent 52%); }
.v3-stage-index, .v3-product-name { position: absolute; z-index: 4; top: 22px; color: rgba(126,162,176,.38); font-size: 7px; letter-spacing: .23em; }
.v3-stage-index { left: 2px; } .v3-product-name { right: 24px; }
.v3-visual { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1), visibility .45s; }
.v3-visual > img:not(.v3-light-pass) { width: 95%; max-height: 78%; object-fit: contain; mix-blend-mode: screen; filter: brightness(.9) contrast(1.04); }
.v3-fins > img { transform:rotate(-7deg) scale(.91);transform-origin:50% 50% }
.v3-fins > img:not(.v3-light-pass):not(.v3-fin-line-reveal) { width:96% }
.experience-v3[data-product="speargun"] .v3-speargun, .experience-v3[data-product="fins"] .v3-fins { opacity: 1; visibility: visible; transform: none; }
.experience-v3[data-product="fins"] .v3-speargun, .experience-v3[data-product="speargun"] .v3-fins { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97); }
.v3-light-pass { position: absolute; width: 95%; max-height: 78%; object-fit: contain; opacity: 0; mix-blend-mode: screen; filter: brightness(1.6) drop-shadow(0 0 10px rgba(83,193,231,.35)); mask-image: linear-gradient(105deg, transparent 32%, #000 48%, transparent 63%); mask-size: 300% 100%; }
.v3-fin-line-reveal { position:absolute;width:96%;max-height:78%;object-fit:contain;opacity:0;mix-blend-mode:screen;pointer-events:none;filter:brightness(2.05) contrast(1.16) drop-shadow(0 0 8px rgba(100,207,243,.72));-webkit-mask-image:linear-gradient(96deg,transparent 0%,transparent 38%,#000 47%,#000 53%,transparent 62%,transparent 100%);mask-image:linear-gradient(96deg,transparent 0%,transparent 38%,#000 47%,#000 53%,transparent 62%,transparent 100%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:150% 0;mask-position:150% 0 }
.v3-fins.is-line-intro>img:first-child { animation:v3FinSettle 1.05s cubic-bezier(.16,1,.3,1) both }
.v3-fins.is-line-intro .v3-fin-line-reveal { animation:v3FinLineReveal 1.08s cubic-bezier(.22,.72,.18,1) both }
@keyframes v3FinSettle { 0% { opacity:.18;filter:brightness(.55) contrast(1.06);transform:rotate(-7deg) scale(.885) translateX(-1.2%) } 58% { opacity:.72 } 100% { opacity:1;filter:brightness(.9) contrast(1.04);transform:rotate(-7deg) scale(.91) translateX(0) } }
@keyframes v3FinLineReveal { 0% { opacity:0;-webkit-mask-position:150% 0;mask-position:150% 0 } 14% { opacity:.94 } 75% { opacity:.72 } 100% { opacity:0;-webkit-mask-position:-45% 0;mask-position:-45% 0 } }
.v3-stage:hover .v3-light-pass { animation: v3Scan 1.15s cubic-bezier(.16,1,.3,1); }
@keyframes v3Scan { 0% { opacity: 0; mask-position: 130% 0; } 18%,72% { opacity: .5; } 100% { opacity: 0; mask-position: -30% 0; } }
.v3-stage-caption { position: absolute; z-index: 4; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 9px; transform: translateX(-50%); color: rgba(159,190,201,.5); font-size: 7px; letter-spacing: .24em; }
.v3-stage-caption i { width: 4px; height: 4px; border-radius: 50%; background: #5bc3e9; box-shadow: 0 0 12px #2a9cca; }
.v3-decision { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(48px, 7vh, 80px) clamp(28px, 3vw, 54px) 24px; transition: opacity .22s ease, transform .22s ease; }
.v3-decision.is-leaving { opacity: 0; transform: translateY(-8px); } .v3-decision.is-entering { opacity: 0; transform: translateY(10px); }
.v3-eyebrow { color: #4caed4; font-size: 8px; font-weight: 800; letter-spacing: .28em; }
.v3-question { max-width: 570px; margin: 15px 0 15px; color: #eff5f7; font-size: clamp(44px, 4.3vw, 72px); line-height: .9; letter-spacing: -.055em; outline: none; }
.v3-copy > p { max-width: 480px; margin: 0; color: var(--v3-muted); font-size: 12px; line-height: 1.65; }
.v3-options { margin-top: clamp(28px, 5vh, 54px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(87,162,191,.3) transparent; }
.v3-option { position: relative; display: grid; grid-template-columns: 28px 1fr auto 22px; gap: 14px; align-items: center; width: 100%; min-height: 76px; padding: 14px 4px; border: 0; border-top: 1px solid var(--v3-line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.v3-option:last-child { border-bottom: 1px solid var(--v3-line); }
.v3-option::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,131,176,.11), transparent); opacity: 0; transition: opacity .3s; }
.v3-option:hover::before, .v3-option:focus-visible::before { opacity: 1; }
.v3-option.is-selected::before { opacity: 1; background: linear-gradient(90deg, rgba(27,145,191,.18), transparent); }
.v3-option.is-selected strong { color: #f2f7f8; }.v3-option.is-selected i { transform: translateX(4px); color:#9fe0f6; }
.v3-option > * { position: relative; }.v3-option > span { color: rgba(107,151,168,.38); font-size: 8px; }.v3-option div { display: grid; gap: 5px; }
.v3-option strong { color: rgba(229,240,244,.82); font-size: 17px; }.v3-option small { color: rgba(128,158,170,.55); font-size: 9px; line-height: 1.45; }
.v3-option b { color: rgba(110,187,217,.58); font-size: 8px; letter-spacing: .1em; white-space: nowrap; }.v3-option i { color: #70c7e7; font-style: normal; font-size: 17px; transition: transform .3s; }.v3-option:hover i { transform: translateX(4px); }
.v3-product-confirm { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; width:min(100%,390px); min-height:54px; margin:22px auto 0; padding:5px; border:2px solid rgba(139,207,232,.48); border-radius:999px; background:rgba(11,76,102,.08); color:#eff7f9; font-size:11px;font-weight:800;letter-spacing:.15em;cursor:pointer }.v3-product-confirm span { grid-column:2;text-align:center }.v3-product-confirm i { grid-column:3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e9f5f8;color:#061015;font-size:22px;font-style:normal }
.v3-product-confirm[hidden] { display:none }
.experience-v3.is-guide-question:not(.is-guide-options) .v3-options { opacity:0; transform:translateY(12px); pointer-events:none }.experience-v3.is-guide-question .v3-options { transition:opacity .42s ease,transform .52s cubic-bezier(.16,1,.3,1) }
.v3-decision-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--v3-line); }
.v3-decision-footer button:disabled { opacity: .2; }.v3-decision-footer span { color: rgba(114,148,161,.36); font-size: 7px; letter-spacing: .2em; }.v3-decision-footer i { display: inline-block; width: 4px; height: 4px; margin-left: 6px; border-radius: 50%; background: #48bce7; }
.v3-summary { position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(410px, 92vw); padding: 80px 36px 32px; background: rgba(2,9,12,.98); border-left: 1px solid rgba(135,194,217,.18); transform: translateX(102%); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.experience-v3.is-summary-open .v3-summary { transform: none; }.v3-summary > button { position: absolute; top: 22px; right: 24px; border: 0; background: none; color: #b9d0d9; font-size: 25px; cursor: pointer; }.v3-summary > span { color: #4db4dc; font-size: 8px; letter-spacing: .22em; }.v3-summary h2 { margin: 15px 0 30px; font-size: 32px; line-height: 1; }
.v3-summary-items > div { display: grid; gap: 4px; padding: 13px 0; border-top: 1px solid var(--v3-line); }.v3-summary-items span { color: rgba(128,159,171,.5); font-size: 8px; text-transform: uppercase; letter-spacing: .15em; }.v3-summary-items b { color: rgba(224,237,241,.8); font-size: 12px; }.v3-summary-empty,.v3-summary>p { color: var(--v3-muted); font-size: 10px; line-height: 1.55; }
.v3-summary-total { display:flex; justify-content:space-between; align-items:end; margin-top:24px; padding-top:20px; border-top:1px solid var(--v3-line); }.v3-summary-total small { color:var(--v3-muted);font-size:8px;letter-spacing:.16em}.v3-summary-total b { font-size:24px; }
.v3-whatsapp { display:grid;gap:16px;margin-top:28px }.v3-contact-fields,.v3-quote-actions { display:grid;gap:10px }.v3-whatsapp label,.v3-quote-actions>span { color:#58b9de;font-size:8px;font-weight:800;letter-spacing:.2em }.v3-whatsapp input { width:100%;min-width:0;padding:12px 0;border:0;border-bottom:1px solid rgba(137,202,226,.35);background:transparent;color:white;font-size:18px;outline:0 }.v3-whatsapp input:focus { border-color:#77cbe9 }.v3-phone-field { display:grid;grid-template-columns:48px 1fr;align-items:center;border-bottom:1px solid rgba(137,202,226,.35) }.v3-phone-field span { color:#9fc4d2;font-size:16px }.v3-phone-field input { border:0 }.v3-contact-fields>small,.v3-quote-actions small { color:var(--v3-muted);font-size:9px;line-height:1.45 }.v3-contact-fields>#v3WhatsappError { color:#e49090 }.v3-save-quote,.v3-action-primary,.v3-action-secondary,.v3-complete { display:flex;align-items:center;justify-content:space-between;min-height:52px;margin-top:8px;padding:0 18px;border:1.5px solid rgba(111,194,225,.5);border-radius:999px;background:rgba(18,121,164,.13);color:#eaf4f7;font-size:10px;font-weight:800;letter-spacing:.13em;cursor:pointer }.v3-save-quote i,.v3-action-primary i,.v3-action-secondary i { font-size:18px;font-style:normal }.v3-action-primary { background:#dcecf2;color:#061015;border-color:#dcecf2 }.v3-action-secondary.is-done { border-color:#68c4a2;color:#9de0c6 }.v3-link-action { justify-self:start;padding:8px 0 }.v3-quote-actions p { margin:0 0 6px;color:var(--v3-muted);font-size:10px }.v3-quote-actions strong { color:#dcecf2 }.v3-final { margin-top:36px }.v3-final p,.v3-final small { display:block;color:var(--v3-muted);font-size:10px;line-height:1.55 }.v3-final strong { color:#dcecf2 }

@media (max-width: 900px) {
  .experience-v3 { padding: 0 14px 12px; overflow: hidden; }
  .v3-header { height: 60px; }.v3-brand img { height: 44px; }.v3-header-actions { gap: 10px; }.v3-header-actions button { font-size: 7px; }.v3-header-actions button:nth-child(2) { display:none; }.v3-header-actions button:first-child { padding:7px 10px; }
  .v3-workspace { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:clamp(220px,31svh,280px) minmax(0,1fr); height:calc(100svh - 74px); min-height:0 }.v3-stage { position:relative; z-index:5; top:auto; height:auto; min-height:0; border-right:0;border-bottom:1px solid var(--v3-line);background:rgba(0,5,7,.96) }.v3-stage-index { top:12px }.v3-product-name { display:none }.v3-visual > img:not(.v3-light-pass),.v3-light-pass { width:108%;max-height:88% }.v3-fins > img:not(.v3-light-pass) { width:108% }.v3-fins>img { transform:rotate(-7deg) scale(.9) }.v3-fin-line-reveal { max-height:88% }.v3-stage-caption { bottom:11px;font-size:6px }
  .v3-decision { min-height:0;height:100%;padding:22px 2px 10px;overflow:hidden }.v3-copy { flex:none }.v3-question { max-width:95%;margin:9px 0 10px;font-size:clamp(36px,10.5vw,50px) }.v3-copy>p { font-size:10.5px;line-height:1.45 }.v3-options { margin-top:17px;overflow-y:auto;min-height:0 }.v3-option { min-height:62px;grid-template-columns:24px 1fr 18px;padding:9px 3px }.v3-option b { display:none }.v3-option strong { font-size:15px }.v3-option small { font-size:9px }.v3-product-confirm { flex:none;min-height:48px;margin-top:12px;font-size:10px }.v3-product-confirm i { width:36px;height:36px }.v3-decision-footer { flex:none;position:relative;bottom:auto;padding:12px 4px max(8px,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,3,4,.98) 28%) }.v3-whatsapp { margin-top:16px;overflow-y:auto }.v3-whatsapp input { font-size:17px }.v3-save-quote,.v3-action-primary,.v3-action-secondary { min-height:48px;font-size:9px }
}
@media (prefers-reduced-motion: reduce) { .experience-v3,.v3-decision,.v3-visual,.v3-summary,.v3-progress i { transition-duration:.12s!important }.v3-light-pass { display:none } }