/* Amora Insurance bilingual ID.me guide. */
:root {
  color-scheme: light;
  --hero: #F6F4F3;
  --hero-soft: #3A6672;
  --blue: #0CC0DF;
  --blue-deep: #6BD4E6;
  --pink: #F1C6D6;
  --pink-deep: #A64D74;
  --ink: #183F4A;
  --muted: #566D73;
  --subtle: #ABC5CB;
  --paper: #F6F4F3;
  --surface: #FFFFFF;
  --tint: #F3EDE9;
  --ring: #DBE6E8;
  --ok: #7ED957;
  --purple: #BB72B3;
  --gold: #F2B10C;
  --warn-bg: #FFF6DD;
  --warn-ink: #7A5200;
  --shadow: 0 10px 24px rgba(24, 63, 74, .06);
  --shadow-btn: 0 8px 20px rgba(12, 192, 223, .16);
  --shadow-pink: 0 5px 14px rgba(166, 77, 116, .12);
  --mock: #FFFFFF;
  --mock-line: #DBE6E8;
  --mock-ink: #183F4A;

  --font-display: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", -apple-system, "Segoe UI", system-ui, sans-serif;
  accent-color: var(--blue);
}

* { box-sizing: border-box; }
body {
  margin: 0; background-color: var(--paper); color: var(--ink);
  font: 400 1rem/1.5 var(--font-body);
  background-image:
    radial-gradient(ellipse 58% 340px at 0% 540px, rgba(12,192,223,.13), transparent 100%),
    radial-gradient(ellipse 58% 390px at 100% 1000px, rgba(239,171,201,.20), transparent 100%),
    radial-gradient(ellipse 52% 280px at 5% 1430px, rgba(187,114,179,.10), transparent 100%);
  background-size: 100% 1700px;
  background-repeat: repeat-y;
}
::selection { background: var(--pink); color: var(--ink); }
.wrap { max-width: 760px; margin-inline: auto; padding-inline: 16px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--hero); color: var(--ink); padding-block: 28px 104px; }

.hero .wrap { position: relative; display: grid; gap: 14px; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 800 1.05rem/1 var(--font-display); }
.eyebrow { margin: 14px 0 0; font: 800 .74rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hero-soft); }
h1 { margin: 0; font: 800 clamp(2.3rem, 1.6rem + 3.4vw, 3.4rem)/1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.lede { margin: 0; max-width: 56ch; color: var(--hero-soft); font-size: 1.08rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.chips li { font: 700 .82rem/1 var(--font-body); padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); }

/* ---------- Pasos ---------- */
.main { display: grid; gap: 16px; padding-block: 0 44px; }
.intro {
  margin-block-start: -76px; display: grid; gap: 14px; padding: 22px;
  background: var(--surface); border: 1px solid var(--tint); border-radius: 28px; box-shadow: var(--shadow);
}
.intro p { margin: 0; color: var(--muted); }
.intro-title { margin: 0; font: 800 1.35rem/1.1 var(--font-display); }
.choices { display: grid; gap: 10px; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; align-items: center; gap: 14px; min-block-size: 76px; padding: 14px 16px; inline-size: 100%;
  border-radius: 20px; border: 1.5px solid var(--ring); background: var(--surface); color: var(--ink);
  font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: border-color .15s ease, transform .15s ease;
}
.choice:hover { border-color: var(--blue); }
.choice:active { transform: scale(.99); }
.choice-ico { flex: none; display: grid; place-items: center; inline-size: 46px; aspect-ratio: 1; border-radius: 50%; background: var(--tint); color: var(--blue); }
.choice-ico svg { inline-size: 22px; block-size: 22px; }
.choice-video { background: var(--surface); color: var(--ink); }
.choice-video .choice-ico { background: var(--tint); color: var(--blue); }
.choice-guide { background: var(--blue); border-color: var(--blue); color: #FFFFFF; box-shadow: var(--shadow-btn); }
.choice-guide:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.choice-guide .choice-ico { background: rgba(255,255,255,.18); color: #FFFFFF; }
.choice-guide .choice-text small { opacity: 1; }
.choice-text { display: grid; gap: 2px; min-width: 0; }
.intro .choice-text strong { font: 800 1.05rem/1.2 var(--font-display); color: inherit; }
.choice-text small { font-size: .86rem; opacity: .82; }
.tutorial[hidden] { display: none; }
.tutorial { display: grid; justify-items: center; gap: 10px; padding: 12px; border-radius: 20px; background: var(--hero); }
.tutorial video { display: block; inline-size: auto; max-inline-size: 100%; block-size: min(72dvh, 620px); aspect-ratio: 652 / 1412; border-radius: 14px; background: #000; }
.tutorial-close { min-block-size: 40px; padding-inline: 18px; border-radius: 999px; border: 1.5px solid var(--ring); background: var(--surface); color: var(--ink); font: 800 .9rem/1 var(--font-body); cursor: pointer; }
.intro-note { font-size: .93rem; }
.btn-sm { margin-block-start: 12px; min-block-size: 44px; padding-inline: 18px; font-size: .92rem; }
.step { scroll-margin-block-start: 16px; }
button:focus-visible, .choice:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; }
.intro strong { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-block-size: 52px; padding-inline: 22px; border-radius: 999px; font: 800 1rem/1 var(--font-body); text-decoration: none; transition: transform .15s ease, background .15s ease; }
.btn svg { inline-size: 20px; block-size: 20px; flex: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--blue); color: #FFFFFF; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--blue-deep); }
.btn-outline { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ring); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 200px; }

.step {
  display: grid; gap: 16px; padding: 20px;
  background: var(--surface); border: 1px solid var(--tint); border-radius: 24px; box-shadow: var(--shadow);
}
.step-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; min-width: 0; }
.num {
  display: grid; place-items: center; inline-size: 44px; aspect-ratio: 1; border-radius: 50%;
  background: var(--pink); color: var(--ink); font: 800 1.35rem/1 var(--font-display); box-shadow: var(--shadow-pink);
}
.step h2 { margin: 2px 0 6px; font: 800 1.3rem/1.15 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.step p { margin: 0; color: var(--muted); }
.step ol { margin: 8px 0 0; padding-inline-start: 1.2em; color: var(--muted); display: grid; gap: 6px; }
.step ol li::marker { color: var(--pink-deep); font-weight: 800; }
.note { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 10px; padding: 12px 14px; border-radius: 14px; background: var(--tint); color: var(--ink); font-size: .93rem; }
.note svg { flex: none; inline-size: 20px; block-size: 20px; color: var(--blue); margin-block-start: 1px; }
.note.warn { background: var(--warn-bg); color: var(--warn-ink); }
.note.warn svg { color: currentColor; }

@media (min-width: 680px) {
  .step { grid-template-columns: 1fr 1fr; align-items: center; gap: 22px; padding: 24px; }
  .step.wide { grid-template-columns: 1fr; }
}

/* ---------- Mini pantallas (ilustraciones de la interfaz) ---------- */
.mock {
  min-width: 0; padding: 14px; border-radius: 16px; background: var(--mock); color: var(--mock-ink);
  border: 1px solid var(--mock-line); font: 600 .82rem/1.3 var(--font-body);
}
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-block-end: 12px; border-radius: 10px; background: var(--tint); color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.mock-bar svg { inline-size: 14px; block-size: 14px; flex: none; }
.mock-logo { font: 800 1.5rem/1 var(--font-body); letter-spacing: -.02em; }
.mock-logo span { font-style: italic; font-weight: 700; }
.mock-title { margin: 0 0 8px; font-weight: 800; }
.mock-label { display: block; margin: 8px 0 4px; color: var(--muted); font-size: .74rem; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--mock-line); background: var(--surface); font-weight: 700; overflow-wrap: anywhere; }
.field svg { inline-size: 16px; block-size: 16px; color: var(--muted); flex: none; }
.mbtn { display: block; margin-block-start: 10px; padding: 9px 12px; border-radius: 9px; background: var(--blue); color: #FFFFFF; text-align: center; font-weight: 800; }
.mbtn.ghost { background: #E2F7FB; color: var(--mock-ink); border: 1px solid #A2E4EF; }
.mbtn.hl { outline: 3px solid var(--gold); outline-offset: 2px; }
.mock-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mock-row .mbtn { margin: 0; flex: 1 1 110px; }
.meter { block-size: 6px; margin-block-start: 8px; border-radius: 99px; background: var(--mock-line); overflow: hidden; }
.meter span { display: block; inline-size: 82%; block-size: 100%; background: var(--ok); }
.meter-label { margin-block-start: 4px; color: var(--ink); font-weight: 800; font-size: .76rem; }
.checks { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.checks li { display: flex; gap: 8px; align-items: center; }
.checks svg { inline-size: 15px; block-size: 15px; color: var(--ok); flex: none; }
.mail-from { display: flex; gap: 10px; align-items: center; margin-block-end: 10px; }
.avatar-dot { display: grid; place-items: center; inline-size: 34px; aspect-ratio: 1; border-radius: 50%; background: var(--purple); color: #fff; font-weight: 800; flex: none; }
.mail-from small { display: block; color: var(--muted); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border-radius: 12px; border: 1px solid var(--mock-line); background: var(--surface); text-align: center; font-weight: 800; }
.tile svg { inline-size: 22px; block-size: 22px; color: var(--blue); }
.tile small { display: block; color: var(--muted); font-weight: 600; }
.mock-foot { margin: 10px 0 0; color: var(--muted); font-size: .74rem; text-align: center; }

.flow { display: grid; gap: 10px; align-items: stretch; }
.flow .mock { display: grid; align-content: start; }
.flow .field { font-size: .74rem; overflow-wrap: normal; word-break: keep-all; }
.flow-arrow { display: grid; place-items: center; color: var(--blue); }
.flow-arrow svg { inline-size: 22px; block-size: 22px; transform: rotate(90deg); }
.opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-block-start: 6px; border-radius: 9px; border: 1px solid var(--mock-line); background: var(--surface); font-weight: 800; }
.opt.sel { border: 2px solid var(--ok); }
.opt .ck { margin-inline-start: auto; color: var(--ok); }
.opt svg { inline-size: 16px; block-size: 16px; flex: none; }
.irs-word { font: 800 1.15rem/1 Georgia, "Times New Roman", serif; letter-spacing: .02em; }
@media (min-width: 680px) {
  .flow { grid-template-columns: 1fr auto 1fr auto 1fr; }
  .flow-arrow svg { transform: none; }
}

.phones { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.phone-step { display: grid; gap: 8px; justify-items: center; text-align: center; }
.phone-step b { font-weight: 800; color: var(--ink); }
.phone {
  inline-size: 132px; aspect-ratio: 9 / 16; max-width: 100%; padding: 10px 8px; border-radius: 22px; background: var(--ink); display: grid;
}
.screen { border-radius: 14px; background: var(--paper); color: var(--ink); display: grid; align-content: center; justify-items: center; gap: 8px; padding: 10px; font: 800 .72rem/1.2 var(--font-body); text-align: center; }
.idcard { inline-size: 88%; aspect-ratio: 1.58; border-radius: 8px; background: linear-gradient(135deg, #F9E3EC, #FFFFFF); border: 2px dashed var(--blue); display: grid; grid-template-columns: 34% 1fr; gap: 6px; padding: 6px; }
.idcard i { border-radius: 4px; background: var(--pink); }
.idcard u { display: grid; gap: 4px; align-content: center; text-decoration: none; }
.idcard u::before, .idcard u::after { content: ""; block-size: 5px; border-radius: 3px; background: var(--pink); }
.face { inline-size: 66px; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ok); background: radial-gradient(circle at 50% 38%, #F2C9A8 0 30%, transparent 31%), radial-gradient(ellipse at 50% 100%, var(--blue) 0 46%, transparent 47%), var(--tint); }
.okmark { display: grid; place-items: center; inline-size: 44px; aspect-ratio: 1; border-radius: 50%; background: var(--ok); color: #fff; }
.okmark svg { inline-size: 24px; block-size: 24px; }
.phone-step small { color: var(--muted); font-size: .82rem; }

/* ---------- Consejos + ayuda ---------- */
.tips { display: grid; gap: 12px; padding: 22px; border-radius: 24px; background: var(--tint); }
.tips h2 { margin: 0; font: 800 1.3rem/1.1 var(--font-display); }
.tips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tips li { display: flex; gap: 12px; align-items: flex-start; }
.tips .ico { flex: none; display: grid; place-items: center; inline-size: 38px; aspect-ratio: 1; border-radius: 12px; background: var(--surface); color: var(--blue); }
.tips .ico svg { inline-size: 20px; block-size: 20px; }
.tips li span:last-child { padding-block-start: 7px; }

.help { display: grid; gap: 14px; padding: 24px 22px; border-radius: 28px; background: var(--hero); color: var(--ink); text-align: center; justify-items: center; }
.help h2 { margin: 0; font: 800 1.55rem/1.1 var(--font-display); text-wrap: balance; }
.help p { margin: 0; color: var(--hero-soft); max-width: 44ch; }
.help .btn-row { inline-size: 100%; }
.help .btn-outline { background: rgba(255,255,255,.65); color: var(--ink); border-color: var(--subtle); }

footer { display: grid; gap: 4px; justify-items: center; padding-block: 4px 8px; color: var(--muted); font-size: .86rem; text-align: center; }
footer a { color: var(--muted); font-weight: 800; text-decoration: none; }
.disclaimer { max-width: 60ch; font-size: .78rem; }

a:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; border-radius: 16px; }
.btn:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .intro, .step, .tips, .help { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
}
@media (forced-colors: active) { .step, .intro, .mock, .tips, .help, .btn { border: 1px solid CanvasText; } }

.brand-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.language-switch { display:flex; flex:none; gap:3px; padding:4px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.5); }
.language-switch a { color:#fff; text-decoration:none; font:800 .82rem/1 var(--font-body); padding:10px 12px; border-radius:999px; }
.language-switch a[aria-current="page"] { color:var(--hero); background:#fff; }
.language-switch a:hover { box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.language-switch a:focus-visible { outline:3px solid #F2B10C; outline-offset:2px; }
@media(max-width:380px) { .brand-row { flex-wrap:wrap; } .brand-row .language-switch { margin-inline-start:auto; } }


/* Pastel header fading into the greige page and repeating soft clouds. */
.hero {
  color: #164B60;
  background: linear-gradient(to bottom, transparent 38%, var(--paper) 100%),
    radial-gradient(ellipse at 4% 15%, #B5E9F2, transparent 68%),
    radial-gradient(ellipse at 95% 15%, #F3C9DE, transparent 68%), var(--paper);
}
.eyebrow { color: #0D6474; }
.hero .wrap { gap: 14px; }
.brand { display: block; inline-size: max-content; }
.brand-logo { position: relative; display: block; overflow: hidden; inline-size: 96px; block-size: 96px; border-radius: 50%; background: var(--paper); box-shadow: 0 8px 22px rgba(24,63,74,.08), 0 0 0 4px rgba(255,255,255,.6); }
.brand-logo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.brand-fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.25rem/1 var(--font-display); color: var(--pink-deep); }
.chips li { color: #1C5C6D; background: rgba(255,255,255,.65); border-color: var(--ring); }
.language-switch { background: rgba(255,255,255,.65); border-color: var(--ring); }
.language-switch a { color: var(--muted); }
.language-switch a[aria-current="page"] { color: var(--ink); background: var(--pink); }
.language-switch a:hover { box-shadow: inset 0 0 0 1px var(--subtle); }
.language-switch a:focus-visible { outline-color: var(--pink-deep); }
.help { background: linear-gradient(125deg, #F9E3EC, var(--paper)); border: 1px solid #EFD4DF; padding-block: 30px; }
.brand-logo.help-logo { inline-size: 220px; block-size: 100px; border-radius: 999px; box-shadow: 0 0 0 4px rgba(255,255,255,.65); }
.help-logo img { object-fit: cover; object-position: center; }
@media (max-width: 420px) {
  .brand-logo { inline-size: 80px; block-size: 80px; }
  .language-switch a { padding: 10px 9px; font-size: .76rem; }
  .brand-row { gap: 8px; }
}