/* TU SOCIA v1.1 — capa visual para Selección y páginas legales.
   Se carga después de styles.css / seleccion.css: solo cambia la piel, no la lógica del formulario. */
:root{
  --paper:#f2efe9; --paper2:#e9e3d9; --ink:#131209; --muted:#6f695f; --line:rgba(19,18,9,.14);
  --acid:#c8eb00; --acid-ink:#6f8400; --brand-accent:#c8eb00; --dark:#131209;
  --on-dark:#f4f1ea; --on-dark-muted:#a39d92; --line-dark:rgba(244,241,234,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:var(--font);
}
body{font-family:var(--font)!important;-webkit-font-smoothing:antialiased}
em{font-style:normal}
[hidden]{display:none!important}
a{color:inherit}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:4px}

/* Marca */
.brand strong,.brand .brand-mark{font-family:var(--font)!important;font-size:20px!important;line-height:28px;font-weight:600!important;letter-spacing:.02em!important}
.brand-accent{color:var(--acid-ink)}
.brand>span{font-size:12px!important;line-height:16px!important;color:var(--muted)}

/* Etiquetas */
.eyebrow{font-family:var(--mono);font-size:12px!important;line-height:16px;letter-spacing:.14em!important;font-weight:500!important;display:flex!important;align-items:center;gap:12px;color:var(--muted)}
.eyebrow:after{display:none!important}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--acid);border-radius:2px;flex:none}

/* Botones */
.cta{font-family:var(--font);font-weight:600;font-size:16px;border-radius:999px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)!important}
.cta.acid{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.cta.acid:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(200,235,0,.34)}

/* ---------- Selección ---------- */
.selection-page{background:var(--paper)}
.select-top{height:80px}
.close-link{color:var(--ink);font-weight:500;text-decoration:none;font-size:14px!important}
.close-link span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--on-dark);font-size:20px!important;transition:transform .5s var(--ease)}
.close-link:hover span{transform:rotate(90deg)}
.selector-intro{position:relative;overflow:hidden;background:var(--dark)!important;border-radius:0 24px 24px 0;isolation:isolate}
.selector-intro:before{content:"";position:absolute;inset:0;z-index:-2;background:url(./assets/scenes/00.webp) 40% 50%/cover;transform:scale(1.08);animation:subZoom 14s var(--ease) both}
.selector-intro:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(19,18,9,.72),rgba(19,18,9,.9) 60%,rgba(19,18,9,.96))}
@keyframes subZoom{from{transform:scale(1.18)}to{transform:scale(1.04)}}
.selector-intro .eyebrow{color:var(--on-dark-muted)}
.selector-intro h1{font-family:var(--font);font-weight:600!important;letter-spacing:-.055em!important;line-height:.92!important;font-size:clamp(48px,4.6vw,84px)!important}
.selector-intro h1 em{font-family:var(--font)!important;font-weight:600!important;color:var(--acid)}
.selector-intro>p{color:rgba(244,241,234,.78)!important;font-size:18px!important;line-height:28px!important}
.selector-promise{border-top:1px solid var(--line-dark)!important}
.selector-promise span{font-family:var(--mono);font-size:12px!important}
.selector-promise p{color:var(--on-dark)}
.selector-intro small{color:var(--on-dark-muted)!important;font-family:var(--mono);font-size:12px;letter-spacing:.06em}

.progress:before{height:2px!important;background:rgba(19,18,9,.1)!important}
.progress i{height:2px!important;box-shadow:0 0 12px rgba(200,235,0,.8);transition:width .6s var(--ease)!important}
.progress span{font-family:var(--font)}
.step-kicker{font-family:var(--mono);font-weight:500!important;font-size:12px!important;letter-spacing:.14em!important}
.form-step h2,.form-success h2{font-family:var(--font);font-weight:600!important;letter-spacing:-.05em!important;line-height:.98!important;font-size:clamp(40px,4.4vw,72px)!important}
.form-step{animation:stepIn .6s var(--ease)!important}
.choice-grid span,.priority-grid span{border-radius:16px!important;background:#f7f4ee!important;border-color:rgba(19,18,9,.14)!important;transition:transform .5s var(--ease),background-color .3s,border-color .3s,color .3s!important}
.choice-grid label:hover span,.priority-grid label:hover span{border-color:rgba(19,18,9,.4)!important;transform:translateY(-2px)}
.choice-grid input:checked+span,.priority-grid input:checked+span{background:var(--ink)!important;color:var(--on-dark)!important;box-shadow:inset 0 0 0 1px var(--acid),0 12px 32px rgba(19,18,9,.18)}
.choice-grid input:focus-visible+span,.priority-grid input:focus-visible+span{outline:2px solid var(--acid);outline-offset:3px}
.field-grid input,.contact-row input{font-family:var(--font)!important;border-bottom-color:rgba(19,18,9,.3)!important}
.field-grid input:focus,.contact-row input:focus{border-bottom-color:var(--ink)!important;box-shadow:0 2px 0 var(--acid)!important}
.privacy-layer{border-radius:16px!important;background:#f7f4ee!important;border-color:rgba(19,18,9,.12)!important}
.success-mark{color:var(--ink);box-shadow:0 0 0 12px rgba(200,235,0,.2)}
.back{font-family:var(--font)}
.selector-legal-footer{font-family:var(--mono);letter-spacing:.04em}

/* ---------- Legales ---------- */
.legal-page{background:var(--paper)}
.legal-top{position:sticky;top:0;z-index:5;background:rgba(242,239,233,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.legal-top>a:last-child{font-weight:500;text-decoration:none;font-size:14px;padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--on-dark)}
.legal-main h1{font-family:var(--font);font-weight:600!important;letter-spacing:-.055em!important;line-height:.92!important}
.legal-main h2{font-family:var(--font)!important;font-weight:600!important;letter-spacing:-.03em;font-size:clamp(24px,2.4vw,32px)!important;padding-top:24px;border-top:1px solid var(--line)}
.legal-main p,.legal-main li{color:#3b3830}
.legal-main strong{color:var(--ink)}
.legal-main a{text-decoration-color:var(--acid);text-decoration-thickness:2px;text-underline-offset:3px}
.legal-contact{border-radius:16px}

@media (max-width:980px){.selector-intro{border-radius:0 0 24px 24px}}
@media (prefers-reduced-motion:reduce){.selector-intro:before{animation:none}.form-step{animation:none!important}}

/* Formulario centrado en su columna; intro más corta en móvil para ver el primer campo antes */
@media (min-width:981px){.form-shell{justify-content:center!important}}
@media (max-width:980px){.selector-intro{min-height:0!important;padding-top:40px!important;padding-bottom:40px!important}.selector-intro h1{margin-bottom:24px!important}.selector-promise{margin-top:24px!important}.selector-intro small{margin-top:20px!important}}

/* v1.5 · La intro entra entera sin scroll (hasta «Tiempo estimado…») y se lee mejor; formulario un punto más grande */
@media (min-width:981px){
  .selector{min-height:calc(100svh - 80px)}
  .selector-intro{min-height:0;height:calc(100svh - 80px);padding:clamp(28px,5vh,64px) clamp(40px,5vw,88px)!important;justify-content:center}
  .selector-intro h1{font-size:clamp(44px,min(4.6vw,8.4vh),84px)!important;margin-bottom:clamp(16px,3.4vh,36px)!important}
  .selector-promise{margin-top:clamp(16px,3.4vh,36px)!important;padding-top:clamp(12px,2.4vh,24px)!important}
  .selector-intro small{margin-top:clamp(14px,3vh,32px)!important}
}
.selector-intro>p{font-size:20px!important;line-height:30px!important}
.selector-promise span{font-size:13px!important}
.selector-promise p{font-size:17px!important;line-height:24px}
.selector-intro small{font-size:14px!important}
@media (min-width:981px) and (max-height:760px){
  .selector-intro h1{font-size:clamp(40px,6.4vh,56px)!important}
  .selector-intro .eyebrow{margin-bottom:12px!important}
  .selector-intro>p{font-size:18px!important;line-height:26px!important;margin:0!important}
  .selector-promise p{font-size:16px!important;margin-bottom:2px!important}
}

.step-kicker{font-size:14px!important}
.field-grid label,.contact-row label{font-size:12px}
.field-grid input,.contact-row input,input[type=email],input[type=tel],input[type=number]{font-size:19px}
.field-hint{font-size:12px}
.choice-grid span,.priority-grid span{font-size:17px}
.privacy-layer p{font-size:13px}
.consent{font-size:13px}
.back{font-size:17px}
.next,.submit{font-size:17px}
.form-success>p:not(.step-kicker){font-size:19px;line-height:1.5}
@media (max-width:620px){.step-kicker{font-size:13px!important}}