:root{
--bg:#FBF3E9; --surface:#FFFBF5; --surface-2:#EDDCC2;
--text-primary:#322820; --text-secondary:#655A4B; --text-tertiary:#5E5346;
--accent:#9C4A30; --accent-tint:#D98F72;
--accent-2:#C99A1F; --accent-2-bg:#FDF3D6; --accent-2-border:#F0D98A;
--success:#2E9E6B; --error:#B3453A;
--radius-card:20px; --radius-button:14px;
--font:'DM Sans','Segoe UI',sans-serif;
--chip-bg:rgba(156,74,48,.14);
--track-bg:rgba(101,90,75,.15);
--border-neutral:rgba(101,90,75,.22);
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
font-family:var(--font); background:var(--bg); color:var(--text-primary);
min-height:100dvh; -webkit-font-smoothing:antialiased;
}
a:focus-visible, button:focus-visible, input:focus-visible{
outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}
.chip:focus-visible{
outline:2px dashed var(--text-secondary); outline-offset:3px;
}
.app{
max-width:480px; margin:0 auto; min-height:100dvh;
display:flex; flex-direction:column;
background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 45%, var(--surface-2) 130%);
}
.topbar{
display:flex; align-items:center; gap:12px;
padding:12px 16px 0 16px;
}
.back-btn{
width:44px; height:44px; flex:none; align-items:center; justify-content:center;
background:none; border:none; cursor:pointer; color:var(--text-secondary);
display:none;
}
.back-btn.show{display:flex;}
.progress-track{
flex:1; height:3px; border-radius:999px; background:var(--track-bg); overflow:hidden;
}
.progress-fill{
height:100%; width:8%; border-radius:999px; background:var(--accent);
transition:width 300ms cubic-bezier(0.16,1,0.3,1);
}
.brand{
display:flex; align-items:center; gap:8px; padding:16px 16px 4px 16px; color:var(--text-primary);
background:none; border:none; cursor:pointer; font-family:var(--font);
}
.brand-logo{height:22px; width:auto; display:block;}
.modal-overlay{
position:fixed; inset:0; background:rgba(50,40,32,.45); display:flex;
align-items:center; justify-content:center; padding:24px; z-index:50;
opacity:0; pointer-events:none; transition:opacity 220ms ease-out;
}
.modal-overlay.show{opacity:1; pointer-events:auto;}
.modal-card{
background:var(--surface); border-radius:var(--radius-card); padding:24px;
max-width:340px; width:100%; box-shadow:0 20px 40px -12px rgba(50,40,32,.35);
transform:scale(0.94) translateY(8px); transition:transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.modal-overlay.show .modal-card{transform:scale(1) translateY(0);}
.modal-card h3{font-size:19px; font-weight:700; margin:0 0 8px 0;}
.modal-card p{font-size:14px; color:var(--text-secondary); margin:0 0 20px 0; line-height:1.5;}
.modal-card .cta{margin-bottom:10px;}
main{flex:1; position:relative; overflow:hidden;}
.step{
position:absolute; inset:0; padding:24px 16px 24px 16px;
display:flex; flex-direction:column;
opacity:0; transform:translateX(40px);
transition:opacity 300ms cubic-bezier(0.16,1,0.3,1), transform 300ms cubic-bezier(0.16,1,0.3,1);
pointer-events:none; z-index:0;
overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.step.active{
opacity:1; transform:translateX(0); pointer-events:auto; z-index:1;
}
.step.leaving{
opacity:0; transform:translateX(-24px); transition:opacity 200ms ease-in, transform 200ms ease-in;
}
.step.leaving-back{
transform:translateX(24px);
}
.step.entering-back{
transform:translateX(-40px);
}
.q-title{
font-size:28px; font-weight:700; line-height:1.15; letter-spacing:-0.02em;
margin:0 0 8px 0; max-width:320px;
}
.accent{color:var(--accent);}
.q-sub{
font-size:14px; color:var(--text-secondary); margin:0 0 24px 0; line-height:1.4;
}
.q-footnote{
margin:auto 0 0 0; padding-top:20px; text-align:center; font-size:13px; color:var(--text-tertiary);
line-height:1.4; position:relative; opacity:0; animation:chipIn 300ms ease-out 260ms forwards;
}
.q-footnote::before{
content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:44px; height:1.5px; background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.tacha-cita{
font-style:normal; color:var(--text-tertiary);
text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:2px;
text-underline-offset:2px; text-decoration-skip-ink:none;
}
.tachado-mini{position:relative; color:var(--text-tertiary);}
.tachado-mini::after{
content:''; position:absolute; left:-2px; right:-2px; top:50%; height:2px;
background:var(--accent); border-radius:2px; transform:translateY(-50%) rotate(-1.5deg);
}
.chips{display:flex; flex-direction:column; gap:12px;}
.chip{
display:flex; align-items:center; gap:12px; width:100%;
min-height:60px; padding:14px 18px; border-radius:var(--radius-button);
border:1px solid var(--border-neutral); background:var(--surface-2);
font-family:var(--font); font-size:16px; font-weight:500; color:var(--text-primary);
text-align:left; cursor:pointer; opacity:0; transform:translateY(8px);
animation:chipIn 300ms ease-out forwards;
box-shadow:0 6px 18px -6px rgba(156,74,48,.22), inset 0 1px 0 rgba(255,255,255,.5);
}
.chip .icon-chip{
width:36px; height:36px; flex:none; border-radius:10px; background:var(--chip-bg);
display:flex; align-items:center; justify-content:center;
}
.chip .icon-chip svg{width:18px; height:18px;}
.chip .check{
margin-left:auto; width:20px; height:20px; flex:none; opacity:0; transform:scale(0.5);
transition:opacity 200ms, transform 200ms;
}
.chip.selected{
border-color:var(--accent); border-width:1.5px; background:var(--chip-bg);
box-shadow:0 6px 16px -6px rgba(156,74,48,.30);
}
.chip.selected .check{opacity:1; transform:scale(1);}
.chip:active{transform:scale(0.98);}
@keyframes chipIn{ to{opacity:1; transform:translateY(0);} }
.escape-input{
margin-top:8px; display:none; flex-direction:column; gap:12px;
}
.escape-input.show{display:flex;}
textarea, input[type=text], input[type=email]{
font-family:var(--font); font-size:16px; color:var(--text-primary);
border:1px solid var(--border-neutral); border-radius:var(--radius-button);
background:var(--surface); padding:14px 16px; resize:none; width:100%;
}
textarea:focus-visible, input[type=text]:focus-visible, input[type=email]:focus-visible, .code-input:focus-visible{
outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
input[type=email].invalid{border-color:var(--error);}
.spacer{flex:1;}
.cta{
width:100%; min-height:54px; border:none; border-radius:var(--radius-button);
background:var(--accent); color:#fff; font-family:var(--font);
font-size:16px; font-weight:600; cursor:pointer;
}
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.cta:disabled{opacity:.45 !important; cursor:not-allowed;}
.cta.text-loading:disabled{opacity:1 !important; cursor:wait;}
.cta:active:not(:disabled){transform:scale(0.98);}
.cta{position:relative;}
.cta .cta-spinner{display:none;}
.cta.loading{opacity:1; cursor:wait;}
.cta.loading .cta-label{visibility:hidden;}
.cta.loading .cta-spinner{
display:block; position:absolute; top:50%; left:50%; margin:-10px 0 0 -10px;
width:20px; height:20px; border-radius:50%;
border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
animation:ctaSpin 700ms linear infinite;
}
@keyframes ctaSpin{ to{transform:rotate(360deg);} }
.cta-outline{
width:100%; min-height:48px; border:1px solid var(--border-neutral); border-radius:var(--radius-button);
background:transparent; color:var(--text-secondary); font-family:var(--font);
font-size:14px; font-weight:500; cursor:pointer; margin-top:12px;
transition:transform 120ms ease;
}
.cta-outline:active:not(:disabled){transform:scale(0.98);}
.cta-text{
display:block; width:100%; text-align:center; border:none; background:none; margin-top:12px;
color:var(--text-tertiary); font-family:var(--font); font-size:13px; font-weight:500; cursor:pointer;
padding:6px; text-decoration:underline; transition:transform 120ms ease;
}
.cta-text:active{transform:scale(0.98);}
.brand-lockup{width:88px; height:auto; display:block; margin:0 auto;}
.rec-icon{
width:72px; height:72px; border-radius:20px; background:var(--chip-bg);
display:flex; align-items:center; justify-content:center; margin:16px auto 24px auto;
box-shadow:0 10px 22px -10px rgba(156,74,48,.30), inset 0 1px 0 rgba(255,255,255,.5);
position:relative;
}
.rec-icon::after{
content:''; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
width:32px; height:1.5px; background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.rec-icon svg{width:34px; height:34px;}
.rec-icon.celebrate{animation:celebratePop 550ms cubic-bezier(0.34,1.56,0.64,1) both;}
.rec-icon.celebrate::before{
content:''; position:absolute; inset:-8px; border-radius:26px; border:2px solid var(--accent);
opacity:0; animation:celebrateRing 700ms ease-out 80ms both;
}
@keyframes celebratePop{0%{transform:scale(0.4); opacity:0;} 60%{transform:scale(1.08); opacity:1;} 100%{transform:scale(1); opacity:1;}}
@keyframes celebrateRing{0%{opacity:.6; transform:scale(0.85);} 100%{opacity:0; transform:scale(1.35);}}
.rec-title{
font-size:26px; font-weight:700; text-align:center; line-height:1.2; margin:0 0 16px 0;
}
.rec-body{
font-size:15px; line-height:1.55; color:var(--text-secondary); text-align:center; max-width:320px;
margin:0 auto;
}
.rec-body strong{color:var(--text-primary); font-weight:600;}
.suggest-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.suggest-chip{
padding:8px 14px; border-radius:999px; border:1px solid var(--border-neutral);
background:var(--surface-2); font-family:var(--font); font-size:13px; color:var(--text-secondary);
cursor:pointer;
}
.suggest-note{font-size:12px; color:var(--text-tertiary); margin:8px 0 0 0;}
.suggest-chip.suggest-chip-match{border-color:var(--accent-tint); background:var(--chip-bg); color:var(--accent); font-weight:600;}
.suggest-chip-match .chip-badge{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; opacity:.85;}
.puente-card{
position:relative; border:1px solid rgba(101,90,75,.18); border-radius:var(--radius-card);
background:var(--surface); padding:24px 20px 20px 20px; margin:8px 0 16px 0;
box-shadow:0 12px 28px -12px rgba(156,74,48,.28);
}
.puente-card::before{
content:''; position:absolute; top:0; left:20px; right:20px; height:2px; border-radius:2px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.puente-hoy{font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--text-tertiary); text-transform:uppercase; margin:0 0 12px 0;}
.puente-tachado{
position:relative; display:inline-block;
font-size:16px; color:var(--text-tertiary);
margin:0 0 14px 0; font-style:italic;
opacity:0; transform:translateY(6px); animation:puenteIn 400ms ease-out forwards;
animation-delay:var(--puente-delay-tachado, 0ms);
}
.puente-tachado::after{
content:''; position:absolute; left:-2px; right:-2px; top:52%; height:2px;
background:var(--accent); border-radius:2px; transform:translateY(-50%) rotate(-1.2deg);
transform-origin:left center; opacity:0; animation:tachadoIn 350ms ease-out forwards;
animation-delay:var(--puente-delay-raya, 550ms);
}
@keyframes tachadoIn{ from{opacity:0; transform:translateY(-50%) rotate(-1.2deg) scaleX(0);} to{opacity:1; transform:translateY(-50%) rotate(-1.2deg) scaleX(1);} }
.puente-frase{
border:1px solid var(--accent-tint); border-radius:var(--radius-button); background:var(--chip-bg);
padding:14px 16px; font-size:var(--puente-frase-size, 16px); line-height:1.3; font-weight:600; color:var(--text-primary); margin:0;
opacity:0; transform:translateY(6px) scale(0.97); animation:puenteIn 450ms ease-out forwards;
animation-delay:var(--puente-delay-frase, 400ms);
}
@keyframes puenteIn{ to{opacity:1; transform:translateY(0) scale(1);} }
.puente-glow{
position:absolute; top:-60px; left:50%; transform:translateX(-50%);
width:340px; height:280px; pointer-events:none; z-index:0;
background:radial-gradient(closest-side, rgba(156,74,48,.16), rgba(156,74,48,0) 70%);
}
.slider-value{font-size:44px; font-weight:700; text-align:center; margin:8px 0 0 0; font-variant-numeric:tabular-nums;}
.slider-label{font-size:14px; color:var(--text-secondary); text-align:center; margin:0 0 24px 0;}
input[type=range]{
width:100%; -webkit-appearance:none; height:8px; border-radius:999px; background:var(--track-bg); margin:0 0 8px 0;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:var(--accent);
box-shadow:0 2px 8px rgba(156,74,48,.35); cursor:pointer;
}
.slider-minmax{display:flex; justify-content:space-between; font-size:12px; color:var(--text-tertiary); margin-bottom:20px;}
.slider-feedback{
display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-secondary);
background:var(--surface-2); border-radius:var(--radius-button); padding:12px 14px; margin-bottom:24px;
}
.loading-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1;}
.ring-wrap{position:relative; width:104px; height:104px; margin-bottom:24px;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-pct{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:22px; font-weight:700; font-variant-numeric:tabular-nums;
}
.loading-title{font-size:20px; font-weight:700; margin:0 0 24px 0; text-align:center;}
.loading-lines{display:flex; flex-direction:column; gap:14px; width:100%; max-width:300px;}
.loading-line{display:flex; align-items:flex-start; gap:10px; font-size:15px; opacity:.4;}
.loading-line.active, .loading-line.done{opacity:1;}
.l-icon{width:20px; height:20px; flex:none; margin-top:1px;}
.l-icon .dot-pulse{width:10px; height:10px; border-radius:50%; background:var(--accent); margin:5px; animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:.4;} 50%{opacity:1;}}
.recap-card{
border-radius:var(--radius-card); background:var(--surface-2); padding:20px; margin:20px 0;
}
.recap-row{display:flex; align-items:center; gap:10px; font-size:15px; padding:8px 0; border-bottom:1px solid rgba(101,90,75,.15);}
.recap-row:last-child{border-bottom:none;}
.recap-row svg{width:18px; height:18px; flex:none;}
.sunk-pill{
display:inline-flex; align-self:flex-start; align-items:center; gap:6px;
font-size:12px; font-weight:700; color:var(--accent); background:var(--chip-bg);
padding:6px 12px 6px 10px; border-radius:999px; margin:0 0 14px 0;
opacity:0; transform:translateY(6px); animation:chipIn 300ms ease-out forwards;
}
.sunk-pill svg{width:14px; height:14px; flex:none;}
.pw-body{
flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:2px; position:relative;
background:linear-gradient(165deg, var(--surface) 0%, var(--bg) 55%, rgba(156,74,48,.07) 130%);
margin:0 -16px; padding-left:16px; padding-right:18px; border-radius:0 0 var(--radius-card) var(--radius-card);
}
.pw-body::after{
content:''; position:absolute; left:0; right:2px; bottom:0; height:26px;
background:linear-gradient(180deg, transparent, var(--bg));
pointer-events:none; opacity:1; transition:opacity 200ms ease;
}
.pw-body.at-bottom::after{ opacity:0; }
.pw-sticky{
flex:none; padding-top:12px; position:relative;
}
.pw-sticky::before{
content:''; position:absolute; top:0; left:-16px; right:-16px; height:14px;
background:linear-gradient(180deg, rgba(251,243,233,0), var(--bg));
pointer-events:none;
}
.pw-fixed-price{
text-align:center; font-size:13px; font-weight:600; color:var(--text-secondary); margin:0 0 2px 0;
transition:opacity 180ms ease;
}
.pw-fixed-price.swap{opacity:0;}
.pw-fixed-price .accent{font-weight:700;}
.pw-cost-compare{
text-align:center; font-size:13px; color:var(--text-tertiary); margin:0 0 12px 0; line-height:1.4;
}
.pw-error{
display:none; text-align:center; font-size:12.5px; color:var(--error);
background:rgba(179,69,58,.08); border-radius:10px; padding:8px 12px; margin:0 0 10px 0;
}
.pw-error.show{display:block;}
.mini-puente{
position:relative; border-radius:var(--radius-card); background:var(--surface);
border:1px solid rgba(101,90,75,.18); padding:8px 12px; margin:0 0 8px 0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 22px -12px rgba(156,74,48,.28);
opacity:0; transform:translateY(6px); animation:chipIn 320ms ease-out forwards;
}
.mini-puente::before{
content:''; position:absolute; top:0; left:16px; right:16px; height:2px; border-radius:2px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.mini-puente .mp-cita{
font-style:normal; font-size:13px; color:var(--text-tertiary);
text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:2px;
text-underline-offset:2px; text-decoration-skip-ink:none;
}
.mini-puente .mp-frase{font-size:16px; font-weight:700; color:var(--text-primary); margin-top:7px; line-height:1.3;}
.mp-was{
font-style:normal; color:var(--text-tertiary); font-weight:400;
text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:1.5px;
margin-right:6px; display:inline-block;
}
.pw-benefit-line{
display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.3; color:var(--text-secondary);
margin:0 0 10px 0; opacity:0; transform:translateY(6px); animation:chipIn 300ms ease-out 60ms forwards;
}
.benefit-check{
width:22px; height:22px; border-radius:50%; background:rgba(156,74,48,.22);
border:1px solid rgba(156,74,48,.55);
display:flex; align-items:center; justify-content:center; flex:none;
}
.benefit-check svg{width:12px; height:12px;}
.plan-list{display:flex; flex-direction:column; gap:6px; margin:0 0 6px 0;}
.plan-card{
position:relative; display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left;
padding:9px 14px; border-radius:var(--radius-card); border:1.5px solid var(--border-neutral);
background:var(--surface); cursor:pointer; font-family:var(--font);
box-shadow:0 4px 12px -8px rgba(101,90,75,.35);
opacity:0; transform:translateY(6px); animation:chipIn 300ms ease-out forwards;
transition:border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.plan-card:active{transform:scale(0.98);}
.plan-card.selected{
border-color:var(--accent); background:var(--chip-bg);
box-shadow:0 10px 24px -12px rgba(156,74,48,.32);
}
.plan-radio{
width:20px; height:20px; border-radius:50%; border:2px solid var(--border-neutral);
flex:none; position:relative; margin-top:1px;
}
.plan-card.selected .plan-radio{border-color:var(--accent);}
.plan-card.selected .plan-radio::after{
content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent);
}
.plan-main{flex:1; min-width:0;}
.plan-name{font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--text-primary);}
.plan-badge{
font-size:11px; font-weight:700; color:#fff; background:var(--accent);
padding:3px 9px; border-radius:999px; letter-spacing:.01em;
}
.plan-price{font-size:13px; color:var(--text-secondary); margin-top:3px; display:block; line-height:1.35;}
.revers-line{text-align:center; font-size:13px; color:var(--text-tertiary); margin:10px 0 0 0; line-height:1.4;}
.pay-secure-line{
display:flex; align-items:center; justify-content:center; gap:6px;
text-align:center; font-size:13px; color:var(--text-tertiary); margin:8px 0 0 0;
}
.pay-secure-line svg{width:13px; height:13px; flex:none; stroke:var(--text-tertiary);}
.pay-secure-line strong{color:var(--accent);}
.cta.loading.text-loading .cta-label{visibility:visible; font-size:14px;}
.cta.loading.text-loading .cta-spinner{display:none;}
.exit-link{
display:block; text-align:center; width:100%; background:none; border:none;
font-family:var(--font); font-size:13px; color:var(--text-tertiary); text-decoration:underline;
padding:16px 0 0 0; cursor:pointer;
}
.tl-wrap{position:relative; padding-left:38px; margin:20px 0 8px 0;}
.tl-line{position:absolute; left:11px; top:4px; bottom:4px; width:2px; background:var(--track-bg); border-radius:2px; overflow:hidden;}
.tl-line-fill{position:absolute; left:0; top:0; width:100%; height:0; background:var(--accent); border-radius:2px; transition:height 550ms cubic-bezier(0.16,1,0.3,1);}
.tl-node{position:relative; padding-bottom:26px;}
.tl-node:last-child{padding-bottom:0;}
.tl-dot{
position:absolute; left:-38px; top:0; width:24px; height:24px; border-radius:50%;
background:var(--surface); border:2px solid var(--border-neutral); flex:none;
display:flex; align-items:center; justify-content:center; transition:border-color 300ms, background 300ms;
}
.tl-dot svg{width:12px; height:12px;}
.tl-node.done .tl-dot{border-color:var(--accent); background:var(--accent);}
.tl-node.done .tl-dot svg{stroke:#fff;}
.tl-title{font-size:15px; font-weight:700; margin:0 0 3px 0;}
.tl-body{font-size:13.5px; color:var(--text-secondary); line-height:1.45; margin:0;}
.fade-in{opacity:0; transform:translateY(6px); animation:chipIn 300ms ease-out forwards;}
.elevated-shadow{box-shadow:0 6px 18px -6px rgba(156,74,48,.22), inset 0 1px 0 rgba(255,255,255,.5);}
.btn-google{
width:100%; min-height:48px; border:1.5px solid var(--border-neutral); border-radius:var(--radius-button);
background:transparent; color:var(--text-secondary); font-family:var(--font);
font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center;
justify-content:center; gap:10px; transition:background-color 150ms ease;
}
.btn-google:active:not(:disabled){transform:scale(0.98);}
.btn-google:disabled{opacity:.6 !important; cursor:wait;}
.btn-google svg{width:18px; height:18px; flex:none;}
.btn-google{position:relative;}
.btn-google .btn-google-spinner{display:none;}
.btn-google.loading > span:not(.btn-google-spinner){visibility:hidden;}
.btn-google.loading svg{visibility:hidden;}
.btn-google.loading .btn-google-spinner{
display:block; visibility:visible; position:absolute; top:50%; left:50%; margin:-10px 0 0 -10px;
width:20px; height:20px; border-radius:50%;
border:2.5px solid var(--border-neutral); border-top-color:var(--accent);
animation:ctaSpin 700ms linear infinite;
}
.divider-or{
display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-tertiary); font-size:13px;
}
.divider-or::before, .divider-or::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--border-neutral), transparent);}
.field-label{font-size:13px; font-weight:600; color:var(--text-secondary); margin:0 0 6px 0; display:block;}
.field-error{
font-size:13px; color:var(--error); margin:6px 0 0 0; display:none;
}
.field-error.show{display:block;}
.trust-note{
display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding-top:16px;
position:relative; font-size:13px; color:var(--text-tertiary); line-height:1.45;
}
.trust-note::before{
content:''; position:absolute; top:0; left:0; width:44px; height:1.5px;
background:linear-gradient(90deg, var(--accent), transparent);
}
.trust-note svg{width:18px; height:18px; flex:none; margin-top:1px; color:var(--accent);}
.rescue-line{
text-align:center; font-size:13px; color:var(--text-tertiary); margin-top:16px; line-height:1.4;
}
.rescue-line a, .rescue-line button{
background:none; border:none; padding:0; font:inherit; color:var(--accent); text-decoration:underline; cursor:pointer;
}
.code-input{
width:100%; min-height:60px; border:1.5px solid var(--border-neutral); border-radius:var(--radius-button);
background:var(--surface); font-family:var(--font); text-align:center;
font-size:26px; font-weight:700; letter-spacing:.35em; color:var(--text-primary);
padding:14px 10px 14px 18px;
}
.code-input.invalid{border-color:var(--error);}
.email-chip{
display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
color:var(--accent); background:var(--chip-bg); padding:6px 12px; border-radius:999px; margin:0 0 4px 0;
}
.email-chip svg{width:16px; height:16px; flex:none;}
.resend-row{
display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; font-size:13px; color:var(--text-tertiary);
}
.resend-row button{
background:none; border:none; padding:0; font:inherit; color:var(--accent); font-weight:600;
text-decoration:underline; cursor:pointer;
}
.resend-row button:disabled{color:var(--text-tertiary); text-decoration:none; cursor:not-allowed;}
.appshell{
max-width:480px; margin:0 auto; min-height:100dvh; display:none;
flex-direction:column;
background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 45%, var(--surface-2) 130%);
}
.appshell.show{display:flex;}
.app-header{
padding:22px 16px 4px 16px; display:flex; flex-direction:column; gap:2px; flex:none;
}
.app-header .greeting{font-size:17px; font-weight:600; color:var(--text-primary); letter-spacing:-0.01em;}
.app-header .fecha{font-size:12px; color:var(--text-tertiary); font-weight:500;}
.app-main{flex:1; position:relative; overflow:hidden;}
.app-tab{
position:absolute; inset:0; padding:16px 16px 64px 16px;
display:flex; flex-direction:column; gap:16px;
opacity:0; transform:translateY(6px); pointer-events:none; z-index:0;
transition:opacity 220ms ease-out, transform 220ms ease-out;
overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.app-tab.active{opacity:1; transform:translateY(0); pointer-events:auto; z-index:1;}
.hero-card{
position:relative; background:var(--surface); border-radius:var(--radius-card); padding:20px;
box-shadow:0 8px 24px -10px rgba(156,74,48,.20), inset 0 1px 0 rgba(255,255,255,.5);
display:flex; flex-direction:column; gap:14px; opacity:0; transform:translateY(8px);
animation:chipIn 320ms ease-out forwards;
}
.hero-card.hc-accent{
background:linear-gradient(165deg, var(--surface) 0%, rgba(156,74,48,.06) 100%);
}
.hero-card.hc-accent::before{
content:''; position:absolute; top:0; left:20px; right:20px; height:2px; border-radius:2px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.hero-card .hc-label{font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em;}
.hero-card .hc-title{font-size:19px; font-weight:700; line-height:1.28; margin:0;}
.hero-card .hc-sub{font-size:14px; color:var(--text-secondary); line-height:1.45; margin:0;}
.hero-frase{
background:var(--chip-bg); border-radius:14px; padding:16px 18px; font-size:16px; font-weight:600;
color:var(--text-primary); line-height:1.42;
}
.hero-loading{display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 0;}
.hero-loading .spin{
width:28px; height:28px; border-radius:50%; border:2.5px solid var(--border-neutral);
border-top-color:var(--accent); animation:ctaSpin 700ms linear infinite;
}
.hero-loading span{font-size:13px; color:var(--text-tertiary);}
.streak-row{
display:flex; align-items:center; gap:10px; padding:13px 16px; background:var(--surface);
border-radius:var(--radius-card); font-size:13px; color:var(--text-secondary); font-weight:500;
opacity:0; transform:translateY(6px); animation:chipIn 300ms ease-out 40ms forwards;
}
.streak-row svg{width:19px; height:19px; flex:none; color:var(--accent);}
.streak-row .freezes{margin-left:auto; display:flex; gap:6px; align-items:center;}
.streak-row .freeze-dot{width:8px; height:8px; border-radius:50%; background:var(--accent-tint);}
.streak-row .freeze-dot.used{background:var(--track-bg);}
.streak-row .freezes-label{font-size:12px; font-weight:500; color:var(--text-tertiary);}
.streak-hint{font-size:12px; color:var(--text-tertiary); margin:-4px 2px 0 2px; line-height:1.4;}
.insight-card{
background:none; border:none; border-radius:0;
padding:2px 4px 0 4px; font-size:14px; color:var(--text-tertiary); line-height:1.5;
display:flex; gap:8px; align-items:flex-start; opacity:0; transform:translateY(6px);
animation:chipIn 300ms ease-out 90ms forwards;
}
.insight-card svg{width:15px; height:15px; flex:none; margin-top:2px; color:var(--text-tertiary);}
.section-label{font-size:12px; font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.05em; margin:0 0 -4px 2px;}
.next-list{display:flex; flex-direction:column; gap:10px;}
.next-item{
display:flex; align-items:center; gap:12px; width:100%; text-align:left;
padding:14px; border-radius:var(--radius-card); border:1px solid var(--border-neutral); background:var(--surface);
font-family:var(--font); cursor:pointer; transition:transform 120ms ease;
opacity:0; transform:translateY(6px); animation:chipIn 300ms ease-out forwards;
}
.next-item:active{transform:scale(0.98);}
.next-item .ni-icon{width:38px; height:38px; flex:none; border-radius:11px; background:var(--chip-bg); display:flex; align-items:center; justify-content:center;}
.next-item .ni-icon svg{width:19px; height:19px; color:var(--accent);}
.next-item .ni-body{flex:1; min-width:0;}
.next-item .ni-title{font-size:14px; font-weight:600; color:var(--text-primary); margin:0 0 2px 0;}
.next-item .ni-sub{font-size:12px; color:var(--text-tertiary); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.next-item .ni-chevron{width:18px; height:18px; flex:none; color:var(--text-tertiary);}
.footer-note{text-align:center; font-size:12px; color:var(--text-tertiary); padding:6px 8px 2px 8px; line-height:1.4;}
.bottom-nav{
display:flex; align-items:center; justify-content:space-around;
padding:6px 8px calc(6px + env(safe-area-inset-bottom)) 8px; background:var(--surface);
border-top:1px solid var(--border-neutral); flex:none;
}
.nav-btn{
display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none;
cursor:pointer; padding:6px 16px; min-width:64px; min-height:48px; color:var(--text-tertiary);
font-family:var(--font); font-size:11px; font-weight:600; border-radius:12px; transition:background-color 150ms ease, color 150ms ease;
}
.nav-btn svg{width:22px; height:22px;}
.nav-btn.active{color:var(--accent); background:var(--chip-bg);}
.diario-datenav{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.diario-datenav button{
width:36px; height:36px; border-radius:10px; border:1px solid var(--border-neutral); background:var(--surface);
display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); flex:none;
}
.diario-datenav button:disabled{opacity:.35; cursor:not-allowed;}
.diario-datenav .dn-fecha{font-size:14px; font-weight:600; color:var(--text-primary); text-align:center; flex:1;}
.gratitud-item{
display:flex; align-items:flex-start; gap:10px;
opacity:0; transform:translateY(6px); animation:chipIn 280ms ease-out forwards;
}
.gratitud-item .gi-num{
width:26px; height:26px; border-radius:50%; background:var(--chip-bg); color:var(--accent); font-weight:700; font-size:12.5px;
display:flex; align-items:center; justify-content:center; flex:none; margin-top:3px;
}
.gratitud-item input{flex:1; background:var(--surface-2); border-color:transparent;}
.gratitud-item input:focus-visible{background:var(--surface);}
.empty-block{
display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:32px 20px;
background:var(--surface); border-radius:var(--radius-card); box-shadow:0 8px 24px -10px rgba(156,74,48,.16);
}
.empty-block .eb-icon{width:52px; height:52px; border-radius:16px; background:var(--chip-bg); display:flex; align-items:center; justify-content:center; color:var(--accent);}
.empty-block .eb-icon svg{width:26px; height:26px;}
.empty-block h3{font-size:16px; font-weight:700; margin:0;}
.empty-block p{font-size:13.5px; color:var(--text-secondary); line-height:1.45; margin:0;}
.perdon-hist-item{
display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left;
padding:14px; border-radius:var(--radius-card); border:1px solid var(--border-neutral); background:var(--surface);
opacity:0; transform:translateY(6px); animation:chipIn 300ms ease-out forwards;
}
.perdon-hist-item .ph-icon{width:36px; height:36px; flex:none; border-radius:11px; background:var(--chip-bg); display:flex; align-items:center; justify-content:center; color:var(--accent);}
.perdon-hist-item .ph-icon svg{width:17px; height:17px;}
.perdon-hist-item .ph-body{flex:1; min-width:0;}
.perdon-hist-item .ph-fecha{font-size:11.5px; font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.03em; margin:0 0 3px 0;}
.perdon-hist-item .ph-texto{font-size:13.5px; color:var(--text-primary); margin:0; font-style:italic; line-height:1.4;}
.lista-perdon-item{
display:flex; align-items:center; gap:12px; width:100%; text-align:left;
padding:12px 14px; border-radius:var(--radius-card); border:1px solid var(--border-neutral); background:var(--surface);
opacity:0; transform:translateY(6px); animation:chipIn 300ms ease-out forwards;
}
.lista-perdon-item .lp-intensidad{
width:38px; height:38px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:16px; font-weight:700; color:#fff; background:var(--lp-color, var(--accent));
box-shadow:0 3px 8px -3px rgba(50,40,32,.35);
}
.lista-perdon-item .lp-body{flex:1; min-width:0;}
.lista-perdon-item .lp-nombre{font-size:15.5px; font-weight:700; color:var(--text-primary); margin:0;}
.lista-perdon-item .lp-meta{font-size:12px; color:var(--text-tertiary); margin:2px 0 0 0; display:flex; align-items:center;}
.lista-perdon-item .lp-meta-error{color:var(--error); font-weight:600;}
.lp-saving-dots{display:inline-flex; gap:3px; margin-right:6px;}
.lp-saving-dots span{
width:4px; height:4px; border-radius:50%; background:var(--text-tertiary);
animation:lpSavingBounce 1s ease-in-out infinite;
}
.lp-saving-dots span:nth-child(2){animation-delay:.15s;}
.lp-saving-dots span:nth-child(3){animation-delay:.3s;}
@keyframes lpSavingBounce{0%,80%,100%{opacity:.3; transform:translateY(0);} 40%{opacity:1; transform:translateY(-2px);}}
.lista-perdon-item .lp-actions{display:flex; flex-direction:column; align-items:stretch; gap:4px; flex:none; width:84px;}
.lista-perdon-item .lp-cta{
width:100%; border:none; background:var(--chip-bg); color:var(--accent); font-weight:700; font-size:12.5px;
padding:8px 10px; border-radius:var(--radius-button); cursor:pointer; min-height:44px; text-align:center;
}
.lista-perdon-item .lp-cta:active{transform:scale(0.97);}
.lista-perdon-item .lp-cta[disabled]{opacity:.5; cursor:not-allowed;}
.lista-perdon-item .lp-retry{background:rgba(179,69,58,.14); color:var(--error); border:1.5px solid rgba(179,69,58,.4);}
.lista-perdon-item .lp-remove{
display:flex; align-items:center; justify-content:center; width:100%;
border:none; background:transparent; color:var(--text-tertiary); font-size:11.5px; font-weight:600;
cursor:pointer; min-height:44px; padding:4px 10px; text-decoration:underline;
}
.lista-perdon-item .lp-remove[disabled]{opacity:.5; cursor:not-allowed;}
.lista-perdon-item.lp-error-item{border-color:rgba(179,69,58,.35); background:rgba(179,69,58,.05);}
.lista-perdon-item.lp-confirm{
flex-direction:column; align-items:stretch; gap:8px; text-align:center;
}
.lp-confirm-text{font-size:14.5px; font-weight:600; color:var(--text-primary); margin:0 0 2px 0;}
.lista-perdon-add{
display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
border:1.5px dashed var(--border-neutral); background:transparent; color:var(--accent); font-weight:700; font-size:13.5px;
padding:13px; border-radius:var(--radius-card); cursor:pointer; min-height:44px;
}
.lista-perdon-add:active{transform:scale(0.98);}
.lista-perdon-form{display:flex; flex-direction:column; gap:12px;}
.lista-perdon-form input[type="text"]{
width:100%; padding:13px 14px; border-radius:var(--radius-button); border:1.5px solid var(--border-neutral);
background:var(--bg); color:var(--text-primary); font-family:var(--font); font-size:15px; min-height:44px;
box-shadow:inset 0 2px 5px rgba(50,40,32,.16), inset 0 1px 2px rgba(50,40,32,.10);
}
.lista-perdon-form input[type="text"]:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.lp-intensidad-row{display:flex; flex-wrap:wrap; gap:6px;}
.chip-num{
min-width:42px; height:42px; padding:0 4px; border-radius:50%; border:1.5px solid var(--border-neutral);
background:var(--bg); color:var(--text-secondary); font-family:var(--font); font-size:13.5px; font-weight:700;
cursor:pointer; display:flex; align-items:center; justify-content:center;
box-shadow:inset 0 2px 4px rgba(50,40,32,.15), inset 0 1px 1px rgba(50,40,32,.08);
}
.chip-num.selected{ border-color:var(--accent); background:var(--accent); color:#fff; box-shadow:0 3px 8px -3px rgba(156,74,48,.45); }
.chip-num:active{transform:scale(0.95);}
.paso-track{display:flex; gap:6px;}
.paso-track .pt-dot{flex:1; height:4px; border-radius:999px; background:var(--track-bg); transition:background-color 250ms ease;}
.paso-track .pt-dot.done{background:var(--accent);}
.celebra-toast{
position:fixed; left:50%; bottom:calc(78px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(10px);
max-width:340px; width:calc(100% - 32px); background:var(--accent-2-bg); border:1px solid var(--accent-2-border);
color:var(--text-primary); border-radius:var(--radius-button); padding:12px 16px; font-size:14px; font-weight:600;
display:flex; align-items:center; gap:10px; box-shadow:0 12px 28px -10px rgba(50,40,32,.30);
opacity:0; z-index:60; pointer-events:none; transition:opacity 260ms ease-out, transform 260ms cubic-bezier(0.16,1,0.3,1);
}
.celebra-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.celebra-toast .toast-icon{
position:relative; width:30px; height:30px; flex:none; border-radius:50%;
background:rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center;
transform:scale(0.4); opacity:0;
}
.celebra-toast.show .toast-icon{ animation:toastIconPop 480ms cubic-bezier(0.34,1.56,0.64,1) 40ms forwards; }
.celebra-toast .toast-icon::before{
content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--accent-2); opacity:0;
}
.celebra-toast.show .toast-icon::before{ animation:toastRing 700ms ease-out 120ms both; }
@keyframes toastIconPop{ 0%{transform:scale(0.4); opacity:0;} 60%{transform:scale(1.18); opacity:1;} 100%{transform:scale(1); opacity:1;} }
@keyframes toastRing{ 0%{opacity:.65; transform:scale(0.75);} 100%{opacity:0; transform:scale(1.7);} }
.celebra-toast svg{width:17px; height:17px; flex:none; color:var(--accent-2);}
.celebra-toast .toast-dot{
position:absolute; width:5px; height:5px; border-radius:50%; background:var(--accent-2);
top:50%; left:50%; opacity:0; pointer-events:none;
}
.celebra-toast.show .toast-dot{ animation:toastDot 620ms ease-out both; }
@keyframes toastDot{
0%{opacity:0; transform:translate(-50%,-50%) scale(0.7);}
25%{opacity:1;}
100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4);}
}
.celebra-toast.aviso-neutro{background:var(--surface-2); border-color:var(--border-neutral);}
.celebra-toast.aviso-neutro svg{color:var(--text-tertiary);}
.celebra-toast.aviso-neutro .toast-icon{background:rgba(101,90,75,.10);}
.celebra-toast.deshacer-toast{ pointer-events:auto; max-width:360px; overflow:hidden; padding-bottom:14px; }
.celebra-toast.deshacer-toast .deshacer-msg{flex:1; min-width:0;}
.deshacer-btn{
flex:none; border:none; background:transparent; color:var(--accent); font-weight:700; font-size:13px;
padding:8px 4px; cursor:pointer; text-decoration:underline; min-height:44px;
}
.deshacer-progress{
position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(101,90,75,.15); overflow:hidden;
}
.deshacer-progress-fill{
display:block; height:100%; width:100%; background:var(--accent); transform-origin:left center;
animation-name:deshacerCountdown; animation-timing-function:linear; animation-fill-mode:forwards;
}
@keyframes deshacerCountdown{ from{transform:scaleX(1);} to{transform:scaleX(0);} }
.hc-label-icon{display:inline-flex; width:16px; height:16px; margin-right:6px; vertical-align:-3px;}
.hc-label-icon svg{width:16px; height:16px;}
@media (prefers-reduced-motion: reduce){
.step, .chip, .cta, .cta-outline, .cta-text, .puente-tachado, .puente-tachado::after, .puente-frase, .modal-overlay, .modal-card,
.rec-icon, .rec-title, .rec-body, .q-title, .q-sub, .q-footnote, .sunk-pill, .tl-line-fill,
.plan-card, .pw-benefit-line, .mini-puente, .rec-icon.celebrate,
.fade-in, .btn-google, .trust-note, .divider-or, .rescue-line, .code-input, .email-chip,
.app-tab, .hero-card, .streak-row, .insight-card, .next-item, .hero-loading .spin,
.gratitud-item, .perdon-hist-item, .empty-block, .lista-perdon-item, .lista-perdon-add, .chip-num{
transition:opacity 150ms linear !important; animation:none !important; transform:none !important;
opacity:1 !important; height:100% !important;
}
.rec-icon.celebrate::before{ display:none !important; }
.celebra-toast{ transition:opacity 150ms linear !important; animation:none !important; transform:translateX(-50%) !important; }
.celebra-toast .toast-icon{ transform:none !important; opacity:1 !important; animation:none !important; }
.celebra-toast .toast-icon::before{ display:none !important; }
.celebra-toast .toast-dot{ display:none !important; }
.deshacer-progress-fill{ animation:none !important; transform:scaleX(1) !important; }
.lp-saving-dots span{ animation:none !important; opacity:1 !important; transform:none !important; }
}