/* =========================================================
   registro.css — estilos de la página web-registro
   Ir a: assets/css/registro.css
   NOTA: body{}, h1,h2{}, a{} de aquí abajo son estilos base
   (font-family, color de links, etc). Si ya los tienes
   definidos globalmente en style.css / theme.json, bórralos
   de este archivo para no duplicar/pelear especificidad.
   ========================================================= */

*{box-sizing:border-box}
body{margin:0;font-family:'Figtree',system-ui,sans-serif;color:#2C2A28;background:#FAF7F2;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}
h1,h2{font-family:'Schibsted Grotesk',system-ui,sans-serif;margin:0;line-height:1.08;letter-spacing:-0.02em}
a{color:#C15F3C;text-decoration:none}
a:hover{color:#A34A2C}
input::placeholder{color:#A79E95}
input:focus{border-color:#C15F3C !important}
button{font-family:inherit}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

main.registro-main{max-width:1100px;margin:0 auto;padding:40px 34px 64px}

.card{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #E7DDD1;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(60,40,30,.12)}
@media (max-width:680px){.card{grid-template-columns:1fr}}

/* left / promo panel */
.panel-left{position:relative;background:linear-gradient(160deg,#C15F3C 0%,#A9472A 100%);color:#FBF3EC;padding:44px 40px;overflow:hidden;display:flex;flex-direction:column}
@media (max-width:680px){.panel-left{padding:34px 28px}}
.blob-svg{position:absolute;inset:0;width:100%;height:100%;opacity:.16}
.blob-svg path:first-child{animation:floaty 13s ease-in-out infinite;transform-origin:220px 260px}
.blob-svg path:last-child{animation:floaty2 15s ease-in-out infinite;transform-origin:190px 380px}
.brand{position:relative;display:flex;align-items:center;gap:11px}
.brand-name{font-family:'Schibsted Grotesk';font-weight:800;font-size:20px;color:#fff}
.brand-name span{color:#FBD9C6}
.promo{position:relative;margin-top:auto;padding-top:40px}
.promo h1{font-size:33px;font-weight:800;color:#fff;max-width:340px}
.promo p{font-size:15.5px;color:#FBE4D8;margin:14px 0 0;max-width:360px}
@media (max-width:680px){.promo h1{font-size:26px}}
.promo-variant{display:none}
.promo-variant.is-active{display:block}
.perks{display:flex;flex-direction:column;gap:13px;margin-top:26px}
.perk{display:flex;align-items:center;gap:11px;font-size:14.5px;color:#FBF3EC}
.perk-icon{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(251,243,236,.18);display:flex;align-items:center;justify-content:center}
.support-line{position:relative;margin-top:34px;padding-top:20px;border-top:1px solid rgba(251,243,236,.22);font-size:13px;color:#FBE4D8}
.support-line b{color:#fff}

/* right / form panel */
.panel-right{padding:40px 44px 44px}
@media (max-width:680px){.panel-right{padding:30px 24px 34px}}

.tabs{display:flex;background:#F4EFE8;border-radius:11px;padding:5px;gap:4px}
.tab{flex:1;text-align:center;font-weight:700;font-size:14.5px;padding:11px;border-radius:8px;cursor:pointer;color:#6E6862;border:none;background:none}
.tab.is-active{background:#fff;color:#2C2A28;box-shadow:0 3px 10px rgba(60,40,30,.08);cursor:default}

.form-view{display:none}
.form-view.is-active{display:block}

h2.form-title{font-size:25px;font-weight:800;margin-top:26px}
.form-sub{font-size:14.5px;color:#6E6862;margin:6px 0 0}

.field{margin-top:14px}
.field:first-of-type{margin-top:22px}
.field label{display:block;font-size:13px;font-weight:700;color:#4A453F;margin-bottom:7px}
.field-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.field-row label{margin-bottom:0}
.field-row a{font-size:12.5px;font-weight:600}
.input{width:100%;font-family:inherit;font-size:15px;color:#2C2A28;background:#fff;border:1px solid #E0D6C9;border-radius:10px;padding:13px 14px;outline:none}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:44px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:none;cursor:pointer;color:#9a9089;display:flex;align-items:center;justify-content:center}

.remember{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13.5px;color:#4A453F;cursor:pointer}
.remember input{width:17px;height:17px;accent-color:#C15F3C}

.account-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
@media (max-width:400px){.account-type-grid{grid-template-columns:1fr}}
.account-type{cursor:pointer;border:1px solid #E0D6C9;background:#fff;border-radius:12px;padding:14px}
.account-type:hover{border-color:#C79B86}
.account-type.is-selected{border:1.5px solid #C15F3C;background:#F4E3DA}
.account-type-head{display:flex;align-items:center;gap:8px;color:#4A453F}
.account-type.is-selected .account-type-head{color:#A34A2C}
.account-type-head span{font-weight:800;font-size:14px}
.account-type-desc{font-size:12px;color:#9a9089;margin-top:5px}
.account-type.is-selected .account-type-desc{color:#8A5230}

.verify-note{display:none;align-items:flex-start;gap:9px;margin-top:16px;background:#E1EDEF;border:1px solid #C7DFE2;border-radius:10px;padding:12px 13px;font-size:12.5px;color:#1C6B75}
.verify-note.is-active{display:flex}
.verify-note svg{flex:none;margin-top:1px}

.terms{display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-size:13px;color:#4A453F;cursor:pointer}
.terms input{width:17px;height:17px;accent-color:#C15F3C;margin-top:1px}
.terms a{font-weight:700}

.btn-primary{cursor:pointer;width:100%;border:none;background:#C15F3C;color:#fff;font-weight:700;font-size:15.5px;padding:14px;border-radius:10px;margin-top:20px}
.btn-primary:hover{background:#A34A2C}

.divider{display:flex;align-items:center;gap:12px;margin:20px 0}
.divider .line{flex:1;height:1px;background:#F0E7DD}
.divider span{font-size:12.5px;color:#9a9089}

.social-row{display:flex;gap:10px}
.btn-social{cursor:pointer;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#fff;border:1px solid #E0D6C9;color:#4A453F;font-weight:700;font-size:14px;padding:12px;border-radius:10px}
.btn-social:hover{border-color:#C79B86}

.switch-line{text-align:center;font-size:13.5px;color:#6E6862;margin-top:22px}
.switch-line span{cursor:pointer;color:#C15F3C;font-weight:700}