/* ══════════════════════════════════════════════════════════════
   URBANSKIN — Estilos compartidos de las lead-magnet apps
   Cacheado 1 año. Usa las variables de marca; incluye modo claro/oscuro.
   ══════════════════════════════════════════════════════════════ */
:root{
  --wine:#8B2635;--wine-d:#6B1C27;--wine-l:#A33A4B;--gold:#C9A43D;
  --bg:#FFFFFF;--bg2:#FAF8F4;--surface2:#F9F4EF;--border:#E8DFE1;
  --text:#1A0E10;--text2:#3D2F31;--text3:#8A7A7C;--card:#FFFFFF;
  --sh:0 4px 24px rgba(139,38,53,.08);--sh-lg:0 16px 56px rgba(26,14,16,.12);
  --fs:"Cormorant Garamond",Georgia,serif;--fn:"Inter",-apple-system,sans-serif;
  --fc:"Dancing Script",cursive;--tr:all .3s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:#0F0A0B;--bg2:#1A0E10;--surface2:#2D1F21;--border:#3D2F31;
  --text:#FAF8F4;--text2:#E8DFE1;--text3:#8A7A7C;--card:#1A0E10;
  --sh:0 4px 24px rgba(0,0,0,.3);--sh-lg:0 16px 56px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box;}
*::selection{background:var(--wine);color:#fff;}
body{font-family:var(--fn);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;transition:background .4s,color .4s;}
h1,h2,h3,h4{font-family:var(--fs);font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1.15;}
img{max-width:100%;display:block;}a{text-decoration:none;color:inherit;}

/* Cabecera mínima */
.app-top{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:50;}
.app-top img{height:44px;width:auto;}
.app-top a.back{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text3);}
.app-top a.back:hover{color:var(--wine);}

/* Contenedor */
.app-wrap{max-width:720px;margin:0 auto;padding:32px 22px 90px;}
.app-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:10px;}
.app-title{font-size:clamp(28px,6vw,44px);text-align:center;margin-bottom:10px;}
.app-title em{font-family:var(--fc);font-style:normal;color:var(--wine);font-weight:700;}
.app-sub{text-align:center;color:var(--text3);font-size:15px;max-width:540px;margin:0 auto 28px;}

/* Progreso */
.prog{height:6px;background:var(--surface2);border-radius:100px;overflow:hidden;margin-bottom:6px;}
.prog-fill{height:100%;width:0;background:linear-gradient(90deg,var(--wine),var(--gold));border-radius:100px;transition:width .4s cubic-bezier(.4,0,.2,1);}
.prog-txt{font-size:11px;color:var(--text3);text-align:right;margin-bottom:22px;letter-spacing:1px;}

/* Tarjeta de paso */
.step{display:none;animation:fadeUp .45s cubic-bezier(.16,1,.3,1);}
.step.on{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.q{font-size:clamp(21px,4.4vw,28px);text-align:center;margin-bottom:6px;}
.q-help{text-align:center;color:var(--text3);font-size:13.5px;margin-bottom:22px;}

/* Opciones */
.opts{display:grid;gap:12px;}
.opts.two{grid-template-columns:1fr 1fr;}
@media(max-width:560px){.opts.two{grid-template-columns:1fr;}}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;cursor:pointer;font-family:var(--fn);font-size:15px;color:var(--text);transition:var(--tr);}
.opt:hover{border-color:var(--wine);transform:translateY(-2px);box-shadow:var(--sh);}
.opt.sel{border-color:var(--wine);background:linear-gradient(135deg,rgba(139,38,53,.07),rgba(201,164,61,.05));box-shadow:var(--sh);}
.opt .ico{font-size:24px;flex-shrink:0;}
.opt .lbl{font-weight:600;}
.opt .desc{display:block;font-size:12.5px;color:var(--text3);font-weight:400;margin-top:2px;}
.opt .chk{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;}
.opt.sel .chk{background:var(--wine);border-color:var(--wine);}

/* Botones */
.btn-row{display:flex;gap:12px;margin-top:26px;}
.btn{flex:1;border:none;cursor:pointer;font-family:var(--fn);font-weight:700;font-size:15px;padding:15px 22px;border-radius:100px;transition:var(--tr);letter-spacing:.3px;}
.btn-primary{background:var(--wine);color:#fff;box-shadow:0 8px 24px rgba(139,38,53,.28);}
.btn-primary:hover{background:var(--wine-d);transform:translateY(-2px);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text2);flex:0 0 auto;padding:15px 20px;}
.btn-ghost:hover{border-color:var(--wine);color:var(--wine);}
.btn-gold{background:var(--gold);color:#1A0E10;}
.btn-gold:hover{filter:brightness(1.05);transform:translateY(-2px);}
.btn-wa{background:#25D366;color:#fff;}

/* Formulario de captura */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text2);margin-bottom:6px;letter-spacing:.3px;}
.field input{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:12px;font-family:var(--fn);font-size:15px;background:var(--bg);color:var(--text);transition:var(--tr);}
.field input:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(139,38,53,.12);}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;}
.consent{font-size:11.5px;color:var(--text3);line-height:1.5;margin-top:8px;}
.consent a{color:var(--wine);text-decoration:underline;}

/* Tarjetas de resultado */
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:var(--sh);margin-bottom:16px;}
.card.hi{border:1.5px solid var(--gold);background:linear-gradient(160deg,rgba(201,164,61,.10),rgba(139,38,53,.05));}
.card .tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.card h3{font-size:24px;margin-bottom:6px;}
.card .price{font-size:15px;color:var(--wine);font-weight:700;}
.big-num{font-size:clamp(34px,9vw,54px);font-family:var(--fs);font-weight:700;color:var(--wine);line-height:1;}
.pill{display:inline-block;background:var(--surface2);border:1px solid var(--border);border-radius:100px;padding:6px 14px;font-size:12.5px;font-weight:600;margin:4px 6px 4px 0;}
.disclaimer{font-size:11.5px;color:var(--text3);line-height:1.55;background:var(--surface2);border-radius:10px;padding:12px 14px;margin-top:14px;}
.spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--wine);border-radius:50%;animation:spin .8s linear infinite;margin:14px auto;}
@keyframes spin{to{transform:rotate(360deg)}}
.trust{text-align:center;color:var(--text3);font-size:12.5px;margin-top:20px;}
.trust b{color:var(--text2);}