:root{
    --bg:#edf8f4;
    --card:#edf8f4;
    --panel:#edf8f4;
    --line:#303030;
    --text:#6ac3c2;
    --muted:#a0a8ba;
    --brand:#6ac3c2;
    --ok:#19c37d;
    --danger:#ffb4b4;
  
    --r:18px;
    --pad:16px;
  
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
  }
  
  .blob{
    position: fixed;
    width: 500px;
    height: 500px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
  }
  .blob--tl{ top: -120px; left: -120px; }
  .blob--br{ bottom: -120px; right: -120px; }

  .shell{ position: relative; z-index: 1; }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background-color: var(--bg);
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  }
  
  .shell{
    max-width: 400px;
    margin: 0 auto;
    padding: calc(16px + var(--safe-t)) 14px calc(20px + var(--safe-b));
  }
  
  .top{ margin-bottom: 12px; }
  .brand{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom: 10px;
  }
  .logo{
    width:40px; height:40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), #7c4dff);
  }
  .h1{
    font-size: 22px;
    margin:0;
    line-height:1.2;
  }
  .sub{
    margin:4px 0 0;
    color:var(--muted);
    font-size: 13px;
  }
  
  .progress{
    height: 4px;
    background: #ffffff;
    border: none;
    border-radius: 999px;
    overflow:hidden;
  }
  .progress__bar{
    height:100%;
    width:0%;
    background: var(--brand);
    transition: width .25s ease;
  }
  .progress__meta{
    margin-top: 8px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size: 12px;
    gap: 10px;
  }
  
  .step{ display:none; }
  .step.is-active{ display:block; }
  
  .h2{
    margin: 6px 0 10px;
    font-size: 18px;
  }
  .muted{
    margin: 0 0 12px;
    color:var(--muted);
    font-size: 14px;
    line-height:1.35;
  }
  
  .choices{
    display:grid;
    gap: 10px;
  }
  .choices.two{
    grid-template-columns: 1fr 1fr;
  }
  .choice{
    text-align:left;
    padding: 14px 14px;
    border-radius: 14px;
    border:1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    min-height: 56px; /* tap target */
  }
  .choice:active{ transform: scale(.99); }
  .choice.is-selected{
    border-color: var(--brand);
    outline: 2px solid rgba(42,127,255,.25);
  }
  .choice__title{ display:block; font-weight: 700; font-size: 15px; }
  .choice__desc{ display:block; color:var(--muted); font-size: 13px; margin-top: 4px; }
  
  .field{ display:block; margin: 10px 0; }
  .field span{ display:block; color:var(--muted); font-size: 12px; margin-bottom: 6px; }
  .field input{
    width:100%;
    padding: 14px 14px;
    border-radius: 14px;
    border:1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-size: 16px; /* evita zoom en iOS */
    outline:none;
  }
  .field input:focus{
    border-color: var(--brand);
    outline: 2px solid rgba(42,127,255,.2);
  }
  
  .row{
    display:grid;
    gap: 10px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 560px){
    .row{ grid-template-columns: 1fr 1fr; }
  }
  
  .consent{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
  }
  .consent a{ color: var(--text); text-decoration: underline; }
  
  .hp{ position:absolute; left:-9999px; top:-9999px; opacity:0; }
  
  .result{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    margin: 10px 0 14px;
  }
  .result p{ margin: 8px 0; color: var(--muted); }
  .result strong{ color: var(--text); }
  
  .cta{
    display:block;
    width:100%;
    padding: 14px;
    border-radius: 14px;
    background: var(--ok);
    color: #06120b;
    text-decoration:none;
    font-weight: 800;
    text-align:center;
    margin-bottom: 10px;
  }
  
  .sticky{
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    padding-bottom: calc(10px + var(--safe-b));
    background: var(--bg);
    margin-top: 16px;
  }
  
  .error{
    min-height: 18px;
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 8px;
  }
  
  .nav{
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
  }
  .btn.primary{
    background: var(--brand);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 14px 28px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    min-height: 52px;
  }
  .btn.ghost{
    background: none;
    border: none;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  
  .btn:disabled{
    opacity: .65;
    cursor:not-allowed;
  }
  
  .bf-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .bf-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bf-card:active{ transform: scale(.98); }
  .bf-card.is-selected{
    border-color: var(--brand);
    outline: 2px solid rgba(106,195,194,.25);
  }
  .bf-img-placeholder{
    width: 100%;
    aspect-ratio: 2/3;
    background: var(--line);
    opacity: 0.3;
  }
  .bf-label{
    display: block;
    width: 100%;
    padding: 6px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
  }

  .footnote{
    margin: 12px 4px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
  }