.odv2 {
  --odv2-ink: #f8f2e4;
  --odv2-muted: #cbc6bc;
  --odv2-gold: #d9b967;
  --odv2-gold-soft: #f2dda1;
  --odv2-cyan: #75d6e5;
  --odv2-night: #07101d;
  --odv2-panel: rgba(5, 12, 24, .83);
  width: 100%;
  color: var(--odv2-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
}

.odv2 *, .odv2 *::before, .odv2 *::after { box-sizing: border-box; }
.odv2 [hidden] { display: none !important; }

.odv2-scene {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border: 1px solid rgba(217, 185, 103, .45);
  border-radius: 26px;
  background: #07101d;
  box-shadow: 0 32px 80px rgba(1, 5, 12, .45), inset 0 0 80px rgba(4, 11, 24, .4);
}

.odv2-background,
.odv2-vignette,
.odv2-light,
.odv2-mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.odv2-background { object-fit: cover; object-position: center 43%; }
.odv2-vignette {
  background:
    linear-gradient(180deg, rgba(3, 8, 16, .18) 0%, rgba(3, 8, 16, .32) 48%, rgba(3, 8, 16, .88) 100%),
    radial-gradient(circle at 50% 40%, transparent 0 22%, rgba(3, 8, 16, .34) 66%, rgba(3, 8, 16, .82) 100%);
}
.odv2-light {
  left: 50%;
  width: 74%;
  transform: translateX(-50%);
  background: conic-gradient(from 174deg at 50% 0%, transparent 0 44%, rgba(244, 214, 142, .16) 47%, transparent 50% 57%, rgba(244, 214, 142, .11) 60%, transparent 63%);
  filter: blur(9px);
  opacity: .7;
  animation: odv2-breathe 8s ease-in-out infinite alternate;
}
.odv2-mist {
  top: auto;
  bottom: -24%;
  height: 54%;
  background: radial-gradient(ellipse at center, rgba(121, 216, 231, .18), rgba(80, 95, 135, .08) 48%, transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}
.odv2-mist-a { animation: odv2-mist 14s ease-in-out infinite alternate; }
.odv2-mist-b { transform: translateX(-36%); opacity: .5; animation: odv2-mist-b 18s ease-in-out infinite alternate; }

.odv2-start,
.odv2-choosing,
.odv2-result {
  position: relative;
  z-index: 2;
}

.odv2-start {
  min-height: 690px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 32px;
  padding: 70px clamp(20px, 6vw, 88px) 58px;
  text-align: center;
  transition: opacity .32s ease, transform .32s ease;
}
.odv2-start.is-leaving { opacity: 0; transform: translateY(-12px); }
.odv2-start-copy { width: min(760px, 100%); text-shadow: 0 3px 24px rgba(0, 0, 0, .75); }

.odv2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 13px;
  color: var(--odv2-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1.3;
  text-transform: uppercase;
}
.odv2-kicker::before,
.odv2-kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .72; }

.odv2 h2,
.odv2 h3,
.odv2 p { margin-top: 0; }
.odv2 h2,
.odv2 h3 {
  color: var(--odv2-ink);
  font-family: Georgia, "Times New Roman", serif;
  text-wrap: balance;
}
.odv2-start h2 {
  margin-bottom: 18px;
  font-size: clamp(36px, 5.2vw, 66px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
}
.odv2-start-copy > p {
  max-width: 690px;
  margin: 0 auto;
  color: #ede8dc;
  font-size: clamp(16px, 1.65vw, 20px);
  line-height: 1.62;
}

.odv2-form {
  width: min(760px, 100%);
  padding: clamp(18px, 3vw, 29px);
  border: 1px solid rgba(217, 185, 103, .46);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(5, 12, 25, .9), rgba(9, 18, 32, .78));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .38), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  text-align: left;
}
.odv2-form label {
  display: block;
  margin-bottom: 9px;
  color: var(--odv2-gold-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.odv2-input {
  display: block;
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 16px 18px;
  border: 1px solid rgba(217, 185, 103, .32);
  border-radius: 12px;
  outline: 0;
  background: rgba(1, 7, 16, .7);
  color: #fff;
  caret-color: var(--odv2-cyan);
  font: 500 16px/1.5 inherit;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.4);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.odv2-input::placeholder { color: rgba(238, 234, 222, .54); }
.odv2-input:focus { border-color: var(--odv2-cyan); box-shadow: 0 0 0 3px rgba(117, 214, 229, .15), inset 0 1px 8px rgba(0,0,0,.4); }
.odv2-input[aria-invalid="true"] { border-color: #ef9f91; }
.odv2-form-foot { display: flex; justify-content: space-between; gap: 20px; padding: 8px 3px 0; color: rgba(238, 234, 222, .63); }
.odv2-form-foot small { font-size: 11px; line-height: 1.45; }
.odv2-error { margin: 7px 2px 0; color: #ffb3a7; font-size: 13px; font-weight: 650; }

.odv2-submit,
.odv2-share,
.odv2-again {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 49px;
  border-radius: 999px;
  font: 800 12px/1 inherit;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.odv2-submit {
  width: min(310px, 100%);
  margin: 20px auto 0;
  border: 1px solid #f3d98f;
  background: linear-gradient(135deg, #e8c76f, #b88632);
  color: #11101b;
  box-shadow: 0 10px 28px rgba(206, 164, 69, .26), inset 0 1px rgba(255,255,255,.55);
}
.odv2-submit span { font-size: 20px; line-height: 0; }
.odv2-submit:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(206, 164, 69, .36); }
.odv2 button:focus-visible { outline: 3px solid var(--odv2-cyan); outline-offset: 4px; }

.odv2-choosing {
  min-height: 690px;
  padding: 56px clamp(15px, 4vw, 60px) 48px;
  opacity: 0;
  transform: translateY(13px);
  transition: opacity .5s ease, transform .5s ease;
}
.odv2-choosing.is-ready { opacity: 1; transform: none; }
.odv2-choosing-copy {
  width: min(790px, 100%);
  margin: 0 auto 31px;
  text-align: center;
  text-shadow: 0 2px 24px rgba(0,0,0,.8);
}
.odv2-choosing h2 { margin-bottom: 12px; font-size: clamp(31px, 4vw, 51px); font-weight: 400; line-height: 1.05; }
.odv2-choosing-copy > p:not(.odv2-question) { max-width: 680px; margin: 0 auto 20px; color: #e5e1d7; font-size: 16px; line-height: 1.58; }
.odv2-question {
  display: inline-flex;
  align-items: baseline;
  max-width: 720px;
  margin: 0;
  padding: 10px 17px;
  border: 1px solid rgba(117,214,229,.23);
  border-radius: 999px;
  background: rgba(4,11,23,.62);
  color: #ece7da;
  font-size: 13px;
  line-height: 1.4;
}
.odv2-question span { flex: 0 0 auto; margin-right: 8px; color: var(--odv2-cyan); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.odv2-question q { quotes: "“" "”"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.odv2-tablet-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 138px));
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.7vw, 22px);
  min-height: 347px;
  perspective: 1200px;
}
.odv2-tablet {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 17px 14px rgba(0,0,0,.42));
  opacity: 1;
  transform: translateY(0) rotate(0);
  transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .38s ease, filter .3s ease;
}
.odv2-tablet:nth-child(1) { transform: translateY(12px) rotate(-4deg); }
.odv2-tablet:nth-child(2) { transform: translateY(3px) rotate(-2deg); }
.odv2-tablet:nth-child(4) { transform: translateY(3px) rotate(2deg); }
.odv2-tablet:nth-child(5) { transform: translateY(12px) rotate(4deg); }
.odv2-tablet > span {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(217,185,103,.44);
  border-radius: 12px;
  background: #080d1b;
  box-shadow: inset 0 0 0 3px rgba(5,10,21,.7), inset 0 0 0 4px rgba(217,185,103,.14);
}
.odv2-tablet > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 28%, rgba(255,255,255,.2) 46%, transparent 63%);
  transform: translateX(-140%);
  transition: transform .62s ease;
}
.odv2-tablet img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.odv2-tablet:hover { transform: translateY(-12px) rotate(0) scale(1.045); filter: drop-shadow(0 23px 24px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(217,185,103,.22)); }
.odv2-tablet:hover > span::after { transform: translateX(140%); }
.odv2-tablet.is-chosen { z-index: 3; transform: translateY(-31px) rotate(0) scale(1.1); filter: drop-shadow(0 28px 28px rgba(0,0,0,.55)) drop-shadow(0 0 23px rgba(117,214,229,.38)); }
.odv2-tablet.is-chosen > span { border-color: var(--odv2-gold-soft); }
.odv2-tablet.is-dismissed { opacity: 0; transform: translateY(25px) scale(.84); pointer-events: none; }

.odv2-result {
  display: grid;
  grid-template-columns: minmax(245px, 350px) minmax(0, 650px);
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 68px);
  min-height: 690px;
  padding: 48px clamp(22px, 5vw, 70px);
  outline: 0;
}
.odv2-result.is-arriving .odv2-result-card { animation: odv2-card-in .72s cubic-bezier(.2,.78,.18,1) both; }
.odv2-result.is-arriving .odv2-result-copy { animation: odv2-copy-in .68s .14s ease both; }
.odv2-result-card { width: min(100%, 330px); justify-self: end; }
.odv2-reveal-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(217,185,103,.66);
  border-radius: 18px;
  background: #070d19;
  box-shadow: 0 28px 55px rgba(0,0,0,.55), 0 0 34px rgba(117,214,229,.14), inset 0 0 0 5px rgba(6,12,24,.86);
}
.odv2-reveal-frame::after { content: ""; position: absolute; inset: 0; border: 6px solid rgba(8,14,26,.72); border-radius: inherit; pointer-events: none; }
.odv2-reveal-image { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }

.odv2-result-copy {
  padding: clamp(23px, 3vw, 36px);
  border: 1px solid rgba(217,185,103,.35);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(4,10,22,.92), rgba(8,16,29,.82));
  box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(13px);
}
.odv2-result-copy > .odv2-kicker { margin-bottom: 10px; }
.odv2-family {
  display: block;
  margin-bottom: 9px;
  color: var(--odv2-family, var(--odv2-gold));
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.odv2-result[data-family="apertura"] { --odv2-family: #edc86f; }
.odv2-result[data-family="espera"] { --odv2-family: #7ed8e5; }
.odv2-result[data-family="cambio"] { --odv2-family: #c8a0ee; }
.odv2-result[data-family="advertencia"] { --odv2-family: #efa58d; }
.odv2-reading-title { margin-bottom: 8px; font-size: clamp(34px, 4vw, 51px); font-weight: 400; line-height: 1.02; }
.odv2-sentence { margin-bottom: 24px; color: var(--odv2-gold-soft); font: italic 18px/1.5 Georgia, "Times New Roman", serif; }
.odv2-reading-section { padding-top: 16px; border-top: 1px solid rgba(217,185,103,.21); }
.odv2-reading-section + .odv2-reading-section { margin-top: 16px; }
.odv2-reading-section > span,
.odv2-action p > span {
  display: block;
  margin-bottom: 6px;
  color: var(--odv2-family, var(--odv2-cyan));
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.odv2-reading-section p { margin-bottom: 0; color: #e3dfd5; font-size: 14.5px; line-height: 1.64; }
.odv2-reading-condition p { color: #c7c4bd; }
.odv2-action {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 21px;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--odv2-family, var(--odv2-gold)) 40%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--odv2-family, var(--odv2-gold)) 10%, transparent);
}
.odv2-action > b { color: var(--odv2-family, var(--odv2-gold)); font-size: 24px; font-weight: 400; line-height: 1; }
.odv2-action p { margin: 0; }
.odv2-action strong { display: block; color: #fff8e7; font-size: 14px; font-weight: 650; line-height: 1.53; }
.odv2-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.odv2-share,
.odv2-again { min-height: 45px; padding: 0 19px; }
.odv2-share { border: 1px solid var(--odv2-gold-soft); background: linear-gradient(135deg, #e0be64, #b88431); color: #11101a; }
.odv2-again { border: 1px solid rgba(117,214,229,.42); background: rgba(5,14,27,.78); color: #eefaff; }
.odv2-share:hover,
.odv2-again:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(0,0,0,.28); }
.odv2-share:disabled { cursor: wait; opacity: .66; }
.odv2-share-status { min-height: 18px; margin: 9px 2px 0; color: #bce9e7; font-size: 12px; }

.odv2-tips {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.7fr);
  gap: clamp(30px, 5vw, 75px);
  margin-top: 22px;
  padding: clamp(28px, 4vw, 45px);
  border: 1px solid rgba(217,185,103,.24);
  border-radius: 22px;
  background: linear-gradient(135deg, #0c1421, #111a28);
  box-shadow: 0 20px 50px rgba(2,6,13,.2);
}
.odv2-tips h3 { margin-bottom: 13px; font-size: clamp(25px, 3vw, 36px); font-weight: 400; line-height: 1.08; }
.odv2-tips-intro > p { margin-bottom: 0; color: #bbbcb8; font-size: 14px; line-height: 1.65; }
.odv2-tip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.odv2-tip { display: flex; align-items: flex-start; gap: 11px; padding: 16px; border: 1px solid rgba(217,185,103,.17); border-radius: 14px; background: rgba(255,255,255,.025); }
.odv2-tip > span { color: var(--odv2-cyan); font: 700 12px/1.4 Georgia, serif; }
.odv2-tip p { margin: 0; }
.odv2-tip b { display: block; margin-bottom: 7px; color: #f0e3bd; font-size: 13px; line-height: 1.3; }
.odv2-tip small { display: block; color: #aeb2b3; font-size: 11.5px; line-height: 1.5; }

@keyframes odv2-breathe { to { opacity: .95; transform: translateX(-50%) scale(1.06); } }
@keyframes odv2-mist { to { transform: translateX(14%) scale(1.12); opacity: .7; } }
@keyframes odv2-mist-b { to { transform: translateX(26%) scale(.92); opacity: .35; } }
@keyframes odv2-card-in { from { opacity: 0; transform: translateY(30px) rotateY(-18deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes odv2-copy-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

@media (max-width: 850px) {
  .odv2-scene,
  .odv2-start,
  .odv2-choosing,
  .odv2-result { min-height: 640px; }
  .odv2-result { grid-template-columns: minmax(180px, 245px) minmax(0, 1fr); gap: 24px; padding: 34px 24px; }
  .odv2-result-copy { padding: 23px; }
  .odv2-reading-title { font-size: 36px; }
  .odv2-tip-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .odv2-scene { min-height: 620px; border-radius: 19px; }
  .odv2-background { object-position: 50% 50%; }
  .odv2-start { min-height: 620px; gap: 23px; padding: 43px 14px 29px; }
  .odv2-kicker { font-size: 10px; letter-spacing: .17em; }
  .odv2-kicker::before,
  .odv2-kicker::after { width: 18px; }
  .odv2-start h2 { font-size: clamp(35px, 12vw, 47px); }
  .odv2-start-copy > p { font-size: 15px; line-height: 1.53; }
  .odv2-form { padding: 16px; border-radius: 16px; }
  .odv2-input { min-height: 76px; font-size: 15px; }
  .odv2-form-foot { gap: 8px; }
  .odv2-form-foot small:first-child { max-width: 76%; }
  .odv2-submit { margin-top: 16px; font-size: 11px; }

  .odv2-choosing { min-height: 620px; padding: 39px 8px 33px; }
  .odv2-choosing-copy { margin-bottom: 22px; padding: 0 7px; }
  .odv2-choosing h2 { font-size: 34px; }
  .odv2-choosing-copy > p:not(.odv2-question) { font-size: 14px; line-height: 1.52; }
  .odv2-question { max-width: 100%; padding: 8px 12px; font-size: 11px; }
  .odv2-question span { display: none; }
  .odv2-tablet-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; min-height: 258px; padding: 0 2px; }
  .odv2-tablet > span { border-radius: 7px; }
  .odv2-tablet:nth-child(1) { transform: translateY(7px) rotate(-3deg); }
  .odv2-tablet:nth-child(2) { transform: translateY(2px) rotate(-1.5deg); }
  .odv2-tablet:nth-child(4) { transform: translateY(2px) rotate(1.5deg); }
  .odv2-tablet:nth-child(5) { transform: translateY(7px) rotate(3deg); }
  .odv2-tablet:hover { transform: translateY(-8px) rotate(0) scale(1.04); }
  .odv2-tablet.is-chosen { transform: translateY(-20px) rotate(0) scale(1.08); }

  .odv2-result { grid-template-columns: 1fr; align-items: start; gap: 20px; min-height: 620px; padding: 31px 12px; }
  .odv2-result-card { width: min(57vw, 225px); justify-self: center; }
  .odv2-reveal-frame { border-radius: 13px; }
  .odv2-result-copy { padding: 20px 16px; border-radius: 17px; }
  .odv2-reading-title { font-size: 36px; }
  .odv2-sentence { margin-bottom: 20px; font-size: 17px; }
  .odv2-reading-section p { font-size: 14px; }
  .odv2-actions { flex-direction: column; }
  .odv2-share,
  .odv2-again { width: 100%; }

  .odv2-tips { grid-template-columns: 1fr; gap: 24px; margin-top: 16px; padding: 25px 18px; border-radius: 18px; }
  .odv2-tips h3 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .odv2 *, .odv2 *::before, .odv2 *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}