:root { --color-bg:#fbfaf8; --color-surface:#fff; --color-text-primary:#292826; --color-text-secondary:#716e69; --color-brand:#9b3f4d; --color-brand-soft:#f3e4e6; --color-positive:#58786b; --color-warning:#9a7954; --color-danger:#875f5a; --color-border:#e5e1dc; --font-family:"General Sans",sans-serif; --radius-control:10px; --radius-content:16px; --motion-fast:140ms; --motion-normal:200ms; --motion-slow:380ms; }
/* C3–C4: directorio de Spots y Date Pass. */
.spots-page,.date-pass-page{margin:0 auto;max-width:540px}.spots-header,.date-pass-header{align-items:center;display:grid;gap:8px;grid-template-columns:44px 1fr;margin-bottom:20px}.spots-header>a,.date-pass-header>a{align-items:center;display:flex;font-size:24px;height:44px;justify-content:center;width:44px}.spots-header .eyebrow,.date-pass-header .eyebrow{margin:0 0 2px}.spots-header h1{font-size:30px;letter-spacing:-.035em;line-height:1.12;margin:0}.spots-intro{color:var(--color-text-secondary);font-size:16px;line-height:1.45;margin:0 0 28px;max-width:34ch}.spots-list,.spot-time{border:0;margin:0;padding:0}.spots-list legend,.spot-time legend{font-size:14px;font-weight:600;margin-bottom:10px}.spots-list{display:grid;gap:8px}.spot-option{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-control);cursor:pointer;display:flex;gap:12px;min-height:82px;padding:12px}.spot-option input{height:1px;opacity:0;position:absolute;width:1px}.spot-option-copy{display:grid;gap:2px}.spot-option-copy small{color:var(--color-text-secondary);font-size:12px}.spot-option-copy strong{font-size:17px;letter-spacing:-.015em}.spot-option-copy em{color:var(--color-brand);font-size:13px;font-style:normal;font-weight:600}.spot-option-mark{border:1px solid var(--color-border);border-radius:50%;height:18px;margin-left:auto;margin-top:2px;width:18px}.spot-option:has(input:checked){background:var(--color-brand-soft);border-color:var(--color-brand)}.spot-option:has(input:checked) .spot-option-mark{background:var(--color-brand);border:4px solid var(--color-brand-soft)}.spot-time{border-top:1px solid var(--color-border);margin-top:24px;padding-top:24px}.spot-time>div{display:grid;gap:10px;grid-template-columns:1fr 1fr}.spot-time label{color:var(--color-text-secondary);display:grid;font-size:12px;gap:5px}.spot-time select{appearance:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-control);color:var(--color-text-primary);font:inherit;font-size:14px;min-height:46px;padding:0 10px}.spots-form>.button{margin-top:28px;width:100%}
.date-pass-card{border-bottom:1px solid var(--color-border);border-top:1px solid var(--color-border)}.date-pass-top{align-items:center;display:flex;justify-content:space-between;padding:12px 0}.date-pass-top p{color:var(--color-text-secondary);font-size:12px;font-weight:600;margin:0}.date-pass-top span{color:var(--color-brand);font-size:12px;font-weight:600}.date-pass-place{padding:30px 0 20px}.date-pass-place>p:first-child,.date-pass-token p{color:var(--color-text-secondary);font-size:12px;margin:0 0 6px}.date-pass-place h1{font-size:clamp(32px,9vw,44px);letter-spacing:-.055em;line-height:1.02;margin:0;max-width:11ch}.date-pass-benefit{color:var(--color-brand);font-size:16px;font-weight:600;line-height:1.35;margin:14px 0 0}.date-pass-moment{border-top:1px solid var(--color-border);font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0;padding:15px 0}.date-pass-moment span{color:var(--color-brand);padding:0 3px}.date-pass-token{align-items:center;border-top:1px solid var(--color-border);display:flex;gap:18px;padding:20px 0 24px}.date-pass-token strong{font-size:15px;letter-spacing:.08em}.qr-placeholder{color:var(--color-text-primary);flex:none;height:92px;width:92px}.qr-placeholder svg{display:block;height:100%;width:100%}.date-pass-copy{border-bottom:1px solid var(--color-border);padding:24px 0}.date-pass-copy h2{font-size:22px;letter-spacing:-.025em;margin:0 0 8px}.date-pass-copy p{color:var(--color-text-secondary);font-size:15px;line-height:1.45;margin:0}.date-pass-copy .date-pass-privacy{color:var(--color-text-primary);font-size:13px;margin-top:16px}.date-pass-canjeado .date-pass-top span{color:var(--color-positive)}.date-pass-canjeado .date-pass-token{color:var(--color-text-secondary)}.date-pass-canjeado .qr-placeholder{opacity:.58}.date-pass-caducado .date-pass-top span{color:var(--color-text-secondary)}.date-pass-caducado .date-pass-token{opacity:.55}.date-pass-states{border-top:1px dashed var(--color-border);margin-top:28px;padding-top:14px}.date-pass-states span{color:var(--color-text-secondary);display:block;font-size:11px;letter-spacing:.04em;margin-bottom:9px;text-transform:uppercase}.date-pass-states div{display:flex;flex-wrap:wrap;gap:7px}.date-pass-states a{border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-secondary);font-size:12px;font-weight:600;padding:5px 9px;transition:border-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out}.date-pass-states a[aria-current="page"]{border-color:var(--color-brand);color:var(--color-brand)}
/* Date Pass QR: lectura inmediata en el móvil y ampliación para el Spot. */
.date-pass-token{align-items:center;display:flex;flex-direction:column;padding:24px 0}.date-pass-token-copy{text-align:center}.date-pass-token-copy p{margin-bottom:7px}.date-pass-token strong,.date-pass-qr-dialog-content strong{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:17px;font-weight:700;letter-spacing:.1em;word-break:break-all;max-width:100%}.date-pass-token .qr-placeholder{height:168px;width:168px}.date-pass-qr-action{background:transparent;border:0;color:var(--color-brand);cursor:pointer;font:inherit;font-size:14px;font-weight:600;margin-top:12px;min-height:44px;padding:10px 12px}.date-pass-qr-action:active{transform:scale(.98)}.date-pass-canjeado .date-pass-qr-action{color:var(--color-positive)}.date-pass-qr-dialog[hidden]{display:none}.date-pass-qr-dialog{align-items:center;background:var(--color-surface);bottom:0;display:flex;justify-content:center;left:0;padding:32px 24px;position:fixed;right:0;top:0;z-index:20}.date-pass-qr-dialog:not([hidden]){animation:date-pass-qr-in var(--motion-normal) ease-out}.date-pass-qr-dialog-content{align-items:center;display:flex;flex-direction:column;text-align:center}.date-pass-qr-dialog-content>p{color:var(--color-text-secondary);font-size:13px;font-weight:600;letter-spacing:.06em;margin:0 0 24px;text-transform:uppercase}.date-pass-qr-large .qr-placeholder{height:min(72vw,360px);width:min(72vw,360px)}.date-pass-qr-dialog-content strong{font-size:19px;margin-top:24px}.date-pass-qr-dialog-content>span{color:var(--color-text-secondary);font-size:14px;line-height:1.4;margin-top:10px;max-width:24ch}.date-pass-qr-close{align-items:center;background:transparent;border:1px solid var(--color-border);border-radius:50%;color:var(--color-text-primary);cursor:pointer;display:flex;font-size:28px;font-weight:300;height:44px;justify-content:center;line-height:1;padding:0;position:absolute;right:16px;top:max(16px,env(safe-area-inset-top));width:44px}.date-pass-qr-open{overflow:hidden}@keyframes date-pass-qr-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}

* { box-sizing:border-box; } body { margin:0; background:var(--color-bg); color:var(--color-text-primary); font-family:var(--font-family); font-size:16px; line-height:1.45; } button,select { font:inherit; } a { color:inherit; text-decoration:none; }
.app-main { min-height:100vh; padding:32px 16px 132px; }.screen { width:min(100%,620px); margin:0 auto; }.tabbar { background:var(--color-surface); border-top:1px solid var(--color-border); bottom:0; display:grid; grid-template-columns:repeat(4,1fr); height:64px; left:0; position:fixed; right:0; z-index:5; }.nav-item { align-items:center; color:var(--color-text-secondary); display:flex; flex-direction:column; font-size:11px; gap:2px; justify-content:center; min-height:56px; transition:color var(--motion-normal) ease-in-out,background-color var(--motion-normal) ease-in-out; }.nav-item i { font-size:21px; font-style:normal; line-height:1; transition:color var(--motion-normal) ease-in-out; }.nav-item.active { color:var(--color-brand); font-weight:700; }.rail { display:none; }
/* Inicio definitivo: Conversation First. */
.inicio-header { margin:3px 0 16px; }.inicio-header p { color:var(--color-text-secondary); font-size:13px; font-weight:500; margin:0; }.inicio-header h1 { font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.12; margin:4px 0 0; }.inicio-security { align-items:center; border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); color:var(--color-text-secondary); display:grid; font-size:13px; gap:8px; grid-template-columns:18px 1fr auto; margin-bottom:18px; padding:10px 0; }.inicio-security>span:first-child { color:var(--color-danger); font-size:16px; }.inicio-security a,.section-heading a { color:var(--color-brand); font-size:13px; font-weight:600; }.inicio-grid { display:grid; gap:12px; grid-template-columns:1fr 1fr; }.inicio-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-content); overflow:hidden; }.inicio-card-1 { grid-column:span 2; }.inicio-card-photo { aspect-ratio:1.7; background-color:#c5c1bd; background-position:center; background-size:cover; }.inicio-card-2 .inicio-card-photo,.inicio-card-3 .inicio-card-photo { aspect-ratio:.83; }.inicio-card-copy { padding:12px; }.inicio-card-copy h2 { font-size:18px; font-weight:700; letter-spacing:-.015em; margin:4px 0 3px; }.inicio-card-copy p { color:var(--color-text-secondary); font-size:15px; font-weight:400; line-height:1.4; margin:0; }.inicio-card-cta { color:var(--color-brand); display:inline-block; font-size:14px; font-weight:600; margin-top:14px; }.connection-state { color:var(--color-text-secondary); font-size:12px; font-weight:600; }.connection-state.state-your-turn,.connection-state.state-new-match,.connection-state.state-decision { color:var(--color-brand); }.connection-state.state-post-reveal { color:var(--color-positive); }.inicio-later { margin-top:28px; }.section-heading,.inicio-later-row,.conexiones-copy>div { align-items:center; display:flex; justify-content:space-between; }.section-heading h2 { font-size:20px; font-weight:700; letter-spacing:-.015em; margin:0; }.inicio-later-row { border-bottom:1px solid var(--color-border); gap:10px; padding:12px 0; }.inicio-later-row>div { background-color:#c5c1bd; background-position:center; background-size:cover; border-radius:50%; height:42px; width:42px; }.inicio-later-row>span { flex:1; min-width:0; }.inicio-later-row strong,.inicio-later-row small { display:block; }.inicio-later-row strong { font-size:16px; font-weight:600; letter-spacing:-.015em; }.inicio-later-row small { color:var(--color-text-secondary); font-size:13px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.inicio-later-row em { color:var(--color-text-secondary); font-size:12px; font-style:normal; font-weight:500; text-align:right; }
/* Conexiones definitivo: Conversation inbox. */
.conexiones-header { margin:4px 0 24px; }.conexiones-header h1 { font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.12; margin:0; }.conexiones-section+.conexiones-section { border-top:1px solid var(--color-border); margin-top:28px; padding-top:20px; }.conexiones-section .section-heading { margin-bottom:8px; }.conexiones-section .section-heading h2 { font-size:18px; }.conexiones-list { border-top:1px solid var(--color-border); }.connection-list-item { border-bottom:1px solid var(--color-border); }.conexiones-thread { align-items:center; display:grid; gap:14px; grid-template-columns:74px 1fr; padding:14px 0 8px; }.connection-list-item.is-selected { background:var(--color-brand-soft); }.connection-profile-link { color:var(--color-brand); display:inline-block; font-size:13px; font-weight:600; margin:0 0 12px 88px; min-height:28px; }.conexiones-photo { background-color:#c5c1bd; background-position:center; background-size:cover; border-radius:var(--radius-content); height:74px; width:74px; }.conexiones-copy { min-width:0; }.conexiones-copy strong { font-size:18px; font-weight:650; letter-spacing:-.015em; }.conexiones-copy time { color:var(--color-text-secondary); font-size:12px; font-weight:500; }.conexiones-copy p { -webkit-box-orient:vertical; -webkit-line-clamp:2; color:var(--color-text-primary); display:-webkit-box; font-size:15px; font-weight:400; line-height:1.4; margin:3px 0 6px; overflow:hidden; }.conexiones-copy .connection-state { background:var(--color-brand-soft); border-radius:var(--radius-control); color:var(--color-brand); display:inline-flex; font-size:12px; font-weight:600; line-height:1; padding:5px 7px; }.conexiones-copy .connection-state.state-post-reveal { background:color-mix(in srgb, var(--color-positive) 14%, var(--color-surface)); color:var(--color-positive); }.conexiones-history-link { color:var(--color-brand); display:inline-block; font-size:13px; font-weight:600; margin-top:20px; }.connection-context { display:none; }
/* Descubrir y Perfil conservan sus componentes existentes. */
.screen-header { margin:8px 4px 28px; }.screen-header h1 { font-size:30px; font-weight:700; line-height:1.2; letter-spacing:-.035em; margin:4px 0 8px; }.screen-header>p:last-child,.profile-placeholder p:last-child { color:var(--color-text-secondary); margin:0; }.eyebrow { color:var(--color-text-secondary); font-size:12px; font-weight:600; letter-spacing:.06em; margin:0; text-transform:uppercase; }.profile-content { overflow:hidden; }.profile-photo { background-color:#c5c1bd; background-position:center; background-size:cover; border-radius:18px; height:min(113vw,600px); position:relative; }.photo-caption { background:linear-gradient(transparent 45%,rgba(23,22,21,.7)); bottom:0; color:#fff; left:0; padding:54px 20px 20px; position:absolute; right:0; }.photo-caption h1 { font-size:26px; letter-spacing:-.03em; margin:0; }.photo-caption p { font-size:14px; margin:2px 0 0; }.profile-block { padding:24px 4px; }.prompt h2 { font-size:20px; letter-spacing:-.025em; line-height:1.38; margin:8px 0 0; }.profile-facts { border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); font-size:14px; margin:0; padding:16px 4px; }.audio-player { align-items:center; border-bottom:1px solid var(--color-border); display:flex; gap:12px; padding:16px 4px 12px; }.audio-player button { background:var(--color-brand); border:0; border-radius:50%; color:#fff; cursor:pointer; height:36px; padding-left:6px; width:36px; }.wave { align-items:center; display:flex; flex:1; gap:3px; height:28px; }.wave i { background:#c5cccf; border-radius:2px; height:8px; width:3px; }.wave i:nth-child(2n) { height:18px; }.wave i:nth-child(3n) { background:var(--color-brand); height:23px; }.audio-player span,.audio-copy { color:var(--color-text-secondary); font-size:13px; }.audio-copy { margin:0; padding:0 4px 20px 52px; }.lifestyle { padding-top:18px; }.lifestyle p:last-child { margin:8px 0 0; }.discovery-header { align-items:center; display:flex; justify-content:space-between; margin-bottom:16px; }.discovery-header h1 { margin:0; }.discovery-header a { color:var(--color-brand); font-size:14px; font-weight:600; padding:10px 4px; }.discovery-actions { background:var(--color-bg); border-top:1px solid var(--color-border); bottom:63px; display:grid; gap:12px; grid-template-columns:1fr 1.35fr; left:0; padding:12px 16px 16px; position:fixed; right:0; z-index:2; }.button { align-items:center; border-radius:11px; cursor:pointer; display:flex; font-size:15px; font-weight:600; gap:8px; height:48px; justify-content:center; }.button-primary { background:var(--color-brand); border:1px solid var(--color-brand); color:#fff; }.button-secondary { background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text-primary); }.face-protection { backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); background:rgba(228,222,216,.18); border-radius:48% 48% 44% 44%; height:25%; left:34%; position:absolute; top:13%; width:32%; }.profile-placeholder { padding-top:64px; }.profile-placeholder h1 { font-size:28px; letter-spacing:-.035em; margin:8px 0; } button:focus-visible,a:focus-visible { outline:2px solid var(--color-brand); outline-offset:3px; }
@media (min-width:768px) and (max-width:1023px) { .app-main { padding-left:48px; padding-right:48px; }.discovery-screen { width:min(100%,560px); } }
@media (min-width:1024px) { .rail { background:var(--color-surface); border-right:1px solid var(--color-border); bottom:0; display:flex; flex-direction:column; left:0; padding:32px 16px; position:fixed; top:0; width:220px; }.wordmark { font-size:21px; font-weight:700; letter-spacing:-.06em; margin:2px 12px 36px; }.rail .nav-item { align-items:center; border-radius:10px; flex-direction:row; font-size:14px; gap:12px; justify-content:flex-start; margin-bottom:4px; padding:0 12px; }.rail .nav-item.active { background:var(--color-brand-soft); }.tabbar { display:none; }.app-main { margin-left:220px; padding:64px; }.inicio-conversaciones { max-width:1120px; width:100%; }.inicio-header { margin-bottom:22px; }.inicio-security { margin-bottom:28px; }.inicio-grid { gap:24px; grid-template-columns:minmax(380px,1.15fr) minmax(300px,.85fr); }.inicio-card-1 { align-items:stretch; display:grid; grid-column:span 2; grid-template-columns:minmax(460px,1.15fr) minmax(280px,.85fr); min-height:360px; }.inicio-card-1 .inicio-card-photo { aspect-ratio:auto; min-height:360px; }.inicio-card-1 .inicio-card-copy { align-items:flex-start; display:flex; flex-direction:column; justify-content:center; padding:32px; }.inicio-card-1 .inicio-card-copy h2 { font-size:20px; margin:8px 0; }.inicio-card-1 .inicio-card-copy p { font-size:16px; max-width:30ch; }.inicio-later { margin-top:40px; }.inicio-later .section-heading { margin-bottom:4px; }.inicio-later-row { display:inline-grid; grid-template-columns:42px minmax(0,1fr) auto; margin-right:36px; width:calc(50% - 22px); }.conexiones-personas { max-width:1240px; width:100%; }.conexiones-workspace { border:1px solid var(--color-border); display:grid; grid-template-columns:minmax(340px,430px) minmax(360px,1fr); min-height:650px; }.conexiones-list { border-top:0; }.conexiones-thread { padding:16px 16px 8px; }.connection-profile-link { margin-left:104px; }.connection-list-item.is-selected { background:var(--color-brand-soft); }.connection-context { background:var(--color-surface); border-left:1px solid var(--color-border); display:flex; flex-direction:column; min-width:0; }.connection-context-photo { background-color:#c5c1bd; background-position:center; background-size:cover; flex:1; min-height:360px; }.connection-context-copy { padding:24px 28px 28px; }.connection-context-copy h2 { font-size:20px; font-weight:700; letter-spacing:-.015em; margin:8px 0; }.connection-context-copy p { font-size:16px; font-weight:400; line-height:1.45; margin:0 0 24px; max-width:38ch; }.connection-context-copy .button { width:100%; }.screen-list { width:min(100%,720px); }.discovery-screen { width:540px; }.discovery-actions { bottom:24px; left:calc(50% + 110px); margin-left:-270px; padding:14px 0 0; right:auto; width:540px; } }

/* Chat pre-Reveal: conversación como contenido principal, sin medios visuales. */
.chat-threads .conexiones-thread.is-selected { background:var(--color-brand-soft); }
.chat-page { background:var(--color-surface); min-height:calc(100vh - 164px); }.chat-threads { display:none; }.chat-conversation { display:flex; flex-direction:column; min-height:calc(100vh - 164px); }.chat-header { border-bottom:1px solid var(--color-border); display:grid; gap:10px 12px; grid-template-columns:48px 1fr 44px; padding:0 16px 12px; }.chat-person-photo { background-color:#c5c1bd; background-position:center; background-size:cover; border-radius:var(--radius-control); height:48px; overflow:hidden; position:relative; width:48px; }.chat-person-copy { align-self:center; }.chat-person-copy h1 { font-size:18px; font-weight:700; letter-spacing:-.015em; line-height:1.12; margin:0 0 3px; }.chat-options { align-self:center; background:transparent; border:0; color:var(--color-text-secondary); cursor:pointer; font-size:22px; height:44px; letter-spacing:2px; padding:0; }.chat-reveal { grid-column:1 / -1; }.chat-reveal>div:first-child { align-items:baseline; display:flex; justify-content:space-between; }.chat-reveal span { color:var(--color-text-primary); font-size:13px; font-weight:600; }.chat-reveal small { color:var(--color-text-secondary); font-size:12px; }.chat-progress { background:var(--color-brand-soft); border-radius:99px; height:4px; margin-top:7px; overflow:hidden; }.chat-progress i { background:var(--color-brand); border-radius:inherit; display:block; height:100%; }.chat-messages { display:flex; flex:1; flex-direction:column; gap:16px; overflow:auto; padding:20px 16px 142px; }.chat-message { display:flex; flex-direction:column; max-width:82%; }.chat-message-them { align-self:flex-start; }.chat-message-me { align-self:flex-end; align-items:flex-end; }.chat-bubble { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-content); font-size:15px; line-height:1.42; padding:10px 12px; }.chat-message-me .chat-bubble { background:var(--color-brand-soft); border-color:var(--color-brand-soft); }.chat-message time { color:var(--color-text-secondary); font-size:11px; margin-top:3px; }.chat-audio.audio-player { border:0; gap:10px; min-width:205px; padding:0; }.chat-audio.audio-player button { height:32px; width:32px; }.chat-audio .wave { height:24px; }.chat-audio .wave i { width:3px; }.chat-inline-actions:empty { display:none; }.chat-inline-actions { display:flex; flex-direction:column; gap:8px; margin:0 16px 158px; }.chat-inline-actions form { display:flex; flex-direction:column; gap:8px; }.chat-composer { background:var(--color-surface); border-top:1px solid var(--color-border); bottom:64px; left:0; padding:8px 16px 12px; position:fixed; right:0; z-index:4; }.chat-turn { align-items:center; display:flex; justify-content:space-between; margin:0 4px 6px; }.chat-turn span { color:var(--color-brand); font-size:12px; font-weight:600; }.chat-turn button { background:transparent; border:0; color:var(--color-text-secondary); cursor:pointer; font-size:12px; padding:4px; }.chat-composer form { align-items:center; display:flex; gap:8px; }.chat-mic,.chat-send { border:0; border-radius:50%; cursor:pointer; height:44px; width:44px; }.chat-mic { background:var(--color-brand-soft); color:var(--color-brand); font-size:22px; }.chat-send { background:var(--color-brand); color:#fff; font-size:20px; }.chat-input { flex:1; }.chat-input input { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); font:inherit; height:44px; outline:0; padding:0 12px; width:100%; }.chat-input input:focus { border-color:var(--color-brand); }.sr-only { clip:rect(0,0,0,0); height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; }
.chat-post-reveal .chat-progress i { background:var(--color-positive); }.chat-media { align-items:center; background:var(--color-brand-soft); border:0; border-radius:50%; color:var(--color-brand); cursor:pointer; display:flex; height:44px; justify-content:center; padding:0; width:44px; }.chat-media svg { height:21px; width:21px; }
/* Chat image containment (PENDING USER VISUAL REVIEW): the old viewport cap could exceed the message column on narrow screens; with overflow:hidden that clipped the image. Size the bubble to the image and constrain both to the message column instead. */.chat-bubble:has(.chat-image-trigger) { max-width:100%; padding:0; width:fit-content; }.chat-image-trigger { background:transparent; border:0; border-radius:inherit; cursor:zoom-in; display:block; max-width:100%; padding:0; }.chat-bubble img { border-radius:inherit; display:block; height:auto; max-height:60vh; max-width:100%; width:auto; }.chat-image-dialog[hidden]{display:none}.chat-image-dialog{align-items:center;background:var(--color-surface);bottom:0;display:flex;justify-content:center;left:0;padding:32px 24px;position:fixed;right:0;top:0;z-index:20}.chat-image-dialog:not([hidden]){animation:date-pass-qr-in var(--motion-normal) ease-out}.chat-image-dialog-content{align-items:center;display:flex;justify-content:center;max-height:100%;max-width:100%}.chat-image-dialog img{display:block;max-height:calc(100vh - 64px);max-width:100%;object-fit:contain}.chat-image-close{align-items:center;background:transparent;border:1px solid var(--color-border);border-radius:50%;color:var(--color-text-primary);cursor:pointer;display:flex;font-size:28px;font-weight:300;height:44px;justify-content:center;line-height:1;padding:0;position:absolute;right:16px;top:max(16px,env(safe-area-inset-top));width:44px}.chat-image-open{overflow:hidden}
/* Menú contextual del chat: las acciones sensibles se explican antes de confirmarse. */
.chat-menu-backdrop { background:rgba(41,40,38,.42); bottom:0; left:0; position:fixed; right:0; top:0; z-index:8; animation:motion-overlay-in var(--motion-slow) ease-out both; }.chat-menu-sheet { z-index:10; }.chat-menu-heading { align-items:flex-start; display:flex; justify-content:space-between; }.chat-menu-heading h1 { margin-top:4px; }.chat-menu-close { align-items:center; background:transparent; border:0; color:var(--color-text-secondary); cursor:pointer; display:flex; font-size:27px; height:44px; justify-content:center; margin:-7px -8px 0 8px; padding:0; width:44px; }.chat-menu-actions { display:grid; margin-top:16px; }.chat-menu-action { background:transparent; border:0; border-bottom:1px solid var(--color-border); color:var(--color-text-primary); cursor:pointer; font:inherit; font-size:16px; min-height:52px; padding:14px 4px; text-align:left; }.chat-menu-action:last-child { border-bottom:0; }.security-flow-action { color:var(--color-danger); }.security-flow-copy { color:var(--color-text-secondary); font-size:15px; line-height:1.42; margin:0; max-width:40ch; }.security-flow-reasons { display:grid; gap:8px; margin:20px 0 16px; }.security-flow-reason { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); cursor:pointer; font:inherit; font-size:14px; min-height:48px; padding:10px 12px; text-align:left; }.security-flow-reason.is-selected { background:var(--color-brand-soft); border-color:var(--color-brand); font-weight:600; }.security-flow-continue,.security-flow-confirm { margin-top:24px; width:100%; }.security-flow-continue:disabled { background:#c9c4bf; border-color:#c9c4bf; cursor:not-allowed; }.chat-menu-back { background:transparent; border:0; color:var(--color-text-secondary); cursor:pointer; display:block; font:inherit; font-size:14px; font-weight:600; margin:8px auto 0; min-height:44px; padding:10px; }.chat-menu-step[hidden] { display:none; }
@media (min-width:1024px) { .chat-page { border:1px solid var(--color-border); display:grid; grid-template-columns:minmax(340px,400px) minmax(420px,1fr); margin:0 auto; max-width:1240px; min-height:650px; }.chat-threads { display:block; }.chat-threads h1 { font-size:30px; font-weight:700; letter-spacing:-.03em; margin:0; padding:0 16px 24px; }.chat-threads .conexiones-thread { padding:16px; }.chat-threads .conexiones-thread.is-selected { background:var(--color-brand-soft); }.chat-conversation { border-left:1px solid var(--color-border); min-height:648px; }.chat-header { padding:16px 24px 12px; }.chat-messages { padding:28px 24px; }.chat-inline-actions { margin:0 24px 16px; }.chat-composer { bottom:auto; left:auto; padding:10px 24px 16px; position:static; right:auto; width:auto; } }

/* Valoración pre-Reveal: un momento privado sobre la conversación, no un formulario. */
.valoracion-backdrop { background:rgba(41,40,38,.42); bottom:0; left:0; padding:32px 16px 160px; position:fixed; right:0; top:0; z-index:8; }.valoracion-context { color:var(--color-text-primary); margin:0 auto; max-width:540px; opacity:.72; }.valoracion-context-header { align-items:center; background:var(--color-surface); border-bottom:1px solid var(--color-border); display:flex; gap:12px; padding:12px; }.valoracion-person-photo { background-color:#c5c1bd; background-position:center; background-size:cover; border-radius:var(--radius-control); height:48px; overflow:hidden; position:relative; width:48px; }.valoracion-context-header strong,.valoracion-context-header small { display:block; }.valoracion-context-header strong { font-size:17px; letter-spacing:-.015em; }.valoracion-context-header small { color:var(--color-text-secondary); font-size:12px; }.valoracion-context-copy { color:var(--color-text-secondary); font-size:13px; margin:20px 4px; }.valoracion-message { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-content); font-size:15px; margin:12px 0; padding:10px 12px; width:min(84%,360px); }.valoracion-message.is-mine { background:var(--color-brand-soft); border-color:var(--color-brand-soft); margin-left:auto; }.sheet { background:var(--color-surface); border-radius:24px 24px 0 0; bottom:0; left:0; padding:10px 20px calc(24px + env(safe-area-inset-bottom)); position:fixed; right:0; z-index:10; }.sheet-handle { background:var(--color-border); border-radius:99px; cursor:grab; height:4px; margin:0 auto 20px; padding:14px 0; touch-action:none; width:38px; background-clip:content-box; }.sheet-step h1 { font-size:26px; font-weight:700; letter-spacing:-.03em; line-height:1.15; margin:6px 0 10px; }.valoracion-intro { color:var(--color-text-secondary); font-size:15px; line-height:1.42; margin:0; max-width:40ch; }.rating-options { display:grid; gap:8px; margin:22px 0 18px; }.rating-option { align-items:center; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); cursor:pointer; display:grid; font:inherit; gap:10px; grid-template-columns:36px 1fr; min-height:48px; padding:7px 10px; text-align:left; }.rating-option b { align-items:center; border:1px solid var(--color-border); border-radius:50%; display:flex; font-size:14px; font-weight:600; height:30px; justify-content:center; width:30px; }.rating-option span { font-size:14px; font-weight:500; line-height:1.2; }.rating-option.is-selected { background:var(--color-brand-soft); border-color:var(--color-brand); }.rating-option.is-selected b { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }.rating-continue { width:100%; }.rating-continue:disabled { background:#c9c4bf; border-color:#c9c4bf; cursor:not-allowed; }.decision-actions { display:grid; gap:10px; margin:28px 0 12px; }.decision-actions .button { width:100%; }.decision-decline { background:transparent; border:0; color:var(--color-text-secondary); cursor:pointer; font:inherit; font-size:14px; font-weight:600; min-height:44px; padding:10px; }.decision-private { color:var(--color-text-secondary); font-size:12px; margin:8px 0 0; text-align:center; }.sheet-step[hidden] { display:none; }.sheet-step h1:focus { outline:none; }
@media (min-width:1024px) { .valoracion-backdrop { left:220px; padding:64px; }.valoracion-context { max-width:620px; }.sheet { border:1px solid var(--color-border); border-radius:var(--radius-content); bottom:auto; left:calc(50% + 110px); max-width:540px; padding:24px 28px 28px; right:auto; top:50%; transform:translate(-50%,-50%); width:calc(100% - 64px); }.sheet-handle { display:none; }.rating-options { gap:9px; }.rating-option { min-height:50px; } }

/* Reveal: un momento sobrio; el vídeo y la persona sostienen la pantalla. */
.reveal-page { margin:0 auto; max-width:640px; }.reveal-lab-switcher { align-items:center; border:1px dashed var(--color-border); display:flex; flex-wrap:wrap; gap:4px 10px; margin:0 0 16px; padding:7px 8px; }.reveal-lab-switcher span { color:var(--color-text-secondary); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }.reveal-lab-switcher a { color:var(--color-text-secondary); font-size:12px; padding:3px 4px; }.reveal-lab-switcher a[aria-current="page"] { color:var(--color-brand); font-weight:700; text-decoration:underline; }.reveal-header { align-items:center; display:grid; grid-template-columns:44px 1fr auto; margin:0 0 28px; }.reveal-header>a { align-items:center; display:flex; font-size:24px; height:44px; justify-content:center; width:44px; }.reveal-header .eyebrow { padding-left:8px; }.reveal-header .connection-state { font-size:12px; white-space:nowrap; }.reveal-page h1 { font-size:30px; font-weight:700; letter-spacing:-.035em; line-height:1.12; margin:0 0 10px; }.reveal-page h1+p { color:var(--color-text-secondary); font-size:16px; line-height:1.45; margin:0; max-width:34ch; }.reveal-intro,.reveal-complete,.reveal-waiting { display:flex; flex-direction:column; gap:24px; }.reveal-video,.reveal-selfie,.reveal-photo { background-color:#c5c1bd; background-position:center; background-size:cover; border-radius:var(--radius-content); overflow:hidden; position:relative; }.reveal-video { aspect-ratio:.78; color:#fff; display:flex; flex-direction:column; justify-content:space-between; min-height:410px; padding:16px; }.reveal-video:after { background:linear-gradient(180deg,rgba(23,22,21,.36),transparent 28%,transparent 70%,rgba(23,22,21,.42)); content:""; inset:0; pointer-events:none; position:absolute; }.reveal-video-label,.reveal-video-time,.reveal-play { position:relative; z-index:1; }.reveal-video-label { font-size:13px; font-weight:600; }.reveal-video-time { align-self:flex-end; font-size:12px; }.reveal-play { align-self:center; background:rgba(255,255,255,.94); border:0; border-radius:50%; color:var(--color-text-primary); cursor:pointer; font-size:18px; height:52px; padding-left:4px; width:52px; }.reveal-play.is-playing { font-size:17px; padding-left:0; }.reveal-action { width:100%; }.reveal-note { color:var(--color-text-secondary); font-size:13px; margin:0; text-align:center; }.reveal-waiting { padding-top:24px; }.reveal-selfie { aspect-ratio:1.35; }.reveal-selfie-muted:after { background:rgba(41,40,38,.25); content:""; inset:0; position:absolute; }.reveal-selfie span,.reveal-photo>span { background:var(--color-surface); border-radius:var(--radius-control); color:var(--color-text-primary); font-size:12px; font-weight:600; left:12px; padding:5px 8px; position:absolute; top:12px; z-index:1; }.reveal-photo { aspect-ratio:.86; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; }.reveal-photo:after { background:linear-gradient(transparent 55%,rgba(23,22,21,.65)); content:""; inset:0; position:absolute; }.reveal-photo>div { position:relative; z-index:1; }.reveal-photo strong,.reveal-photo small { display:block; }.reveal-photo strong { font-size:22px; letter-spacing:-.02em; }.reveal-photo small { font-size:14px; margin-top:2px; }
.discovery-feedback { bottom:calc(100% + 8px); color:var(--color-text-secondary); font-size:13px; grid-column:1 / -1; left:0; margin:0; opacity:0; pointer-events:none; position:absolute; right:0; text-align:center; }.discovery-feedback.is-visible { animation:discovery-feedback var(--motion-slow) ease-in-out both; }
@media (min-width:1024px) { .reveal-page { max-width:820px; padding-top:8px; }.reveal-intro,.reveal-complete { margin:0 auto; max-width:560px; }.reveal-waiting { margin:64px auto 0; max-width:480px; }.reveal-video { min-height:570px; } }

/* Motion: feedback and state changes are intentionally restrained. */
.button,.rating-option,.chat-send,.chat-mic,.chat-media,.audio-player button,.reveal-play { transition:transform var(--motion-fast) ease-out,background-color var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out,opacity var(--motion-fast) ease-out; }
.button:active,.rating-option:active,.chat-send:active,.chat-mic:active,.chat-media:active,.audio-player button:active,.reveal-play:active { transform:scale(.98); }
.rating-option.is-selected { transform:scale(1.01); }
.rating-option.is-selected b { transition:background-color var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out,transform var(--motion-fast) ease-out; transform:scale(1.04); }

/* The static lab shows the open state on load; production opens/closes these classes. */
.valoracion-backdrop { animation:motion-overlay-in var(--motion-slow) ease-out both; }
.sheet { animation:motion-sheet-in var(--motion-slow) ease-out both; }
.sheet-step.is-exiting { animation:motion-step-out var(--motion-normal) ease-in both; }
.sheet-step.is-entering { animation:motion-step-in var(--motion-normal) ease-out both; }

/* Reveal states are server-rendered in the lab, so the entering media carries the transition. */
.reveal-video,.reveal-photo { animation:motion-reveal-media-in var(--motion-slow) ease-in-out both; }
.face-protection { transition:opacity var(--motion-slow) ease-in-out,filter var(--motion-slow) ease-in-out,backdrop-filter var(--motion-slow) ease-in-out,-webkit-backdrop-filter var(--motion-slow) ease-in-out; }
.reveal-complete .reveal-photo { opacity:1; }

@keyframes motion-overlay-in { from { opacity:0; } to { opacity:1; } }
@keyframes motion-sheet-in { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes motion-step-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes motion-step-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-5px); } }
@keyframes motion-reveal-media-in { from { filter:blur(4px); opacity:0; } to { filter:blur(0); opacity:1; } }
@keyframes discovery-feedback { 0% { opacity:0; transform:translateY(4px); } 18%,78% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-2px); } }

@media (min-width:1024px) { .sheet { animation-name:motion-modal-in; } @keyframes motion-modal-in { from { opacity:0; transform:translate(-50%,-50%) scale(.98); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } } }

/* Cierre amistoso: la conversación sigue presente mientras se eligen las palabras. */
.cierre-backdrop { background:rgba(41,40,38,.42); bottom:0; left:0; padding:32px 16px 160px; position:fixed; right:0; top:0; z-index:8; animation:motion-overlay-in var(--motion-slow) ease-out both; }.cierre-context { color:var(--color-text-primary); margin:0 auto; max-width:540px; opacity:.72; }.cierre-threads { display:none; }.cierre-person-context { background:var(--color-surface); padding:12px; }.cierre-person-photo { background-color:#c5c1bd; background-position:center; background-size:cover; border-radius:var(--radius-content); height:180px; margin-bottom:16px; }.cierre-person-context h2 { font-size:20px; letter-spacing:-.015em; margin:5px 0; }.cierre-person-context p { color:var(--color-text-secondary); font-size:14px; margin:0; }.cierre-message { background:var(--color-brand-soft); border-radius:var(--radius-content); font-size:15px; margin-top:18px; padding:10px 12px; }.cierre-reasons { display:grid; gap:8px; margin:20px 0 16px; }.cierre-reason { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); cursor:pointer; font:inherit; font-size:14px; font-weight:500; min-height:48px; padding:10px 12px; text-align:left; transition:transform var(--motion-fast) ease-out,background-color var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out; }.cierre-reason.is-selected { background:var(--color-brand-soft); border-color:var(--color-brand); font-weight:600; }.cierre-reason:active { transform:scale(.98); }.cierre-continue,.cierre-confirm { width:100%; }.cierre-label { display:block; font-size:13px; font-weight:600; margin:20px 0 7px; }.cierre-step textarea { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); font:inherit; line-height:1.42; padding:10px 12px; resize:vertical; width:100%; }.cierre-step textarea:focus { border-color:var(--color-brand); outline:none; }.cierre-back { background:transparent; border:0; color:var(--color-text-secondary); cursor:pointer; display:block; font:inherit; font-size:14px; font-weight:600; margin:8px auto 0; min-height:44px; padding:10px; }.cierre-summary { border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); display:flex; flex-direction:column; gap:3px; margin:24px 0; padding:13px 0; }.cierre-summary span { color:var(--color-text-secondary); font-size:12px; }.cierre-summary strong { font-size:15px; font-weight:600; }.cierre-proposed { align-items:center; border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); display:flex; gap:10px; margin:24px 0; padding:14px 0; }.cierre-proposed span { align-items:center; background:var(--color-positive); border-radius:50%; color:#fff; display:flex; font-size:13px; height:24px; justify-content:center; width:24px; }.cierre-proposed p { font-size:14px; font-weight:600; margin:0; }.cierre-step.is-initially-hidden { display:none; }
.cierre-receiver-heading { align-items:flex-start; display:flex; justify-content:space-between; }.cierre-safety-trigger { background:transparent; border:0; color:var(--color-text-secondary); cursor:pointer; font:inherit; font-size:22px; letter-spacing:2px; line-height:1; margin:-8px -8px 0 8px; min-height:44px; min-width:44px; padding:8px; }.cierre-receiver-timer { border-bottom:1px solid var(--color-border); color:var(--color-text-secondary); display:flex; flex-direction:column; font-size:13px; gap:2px; margin:20px 0 0; padding:0 0 14px; }.cierre-receiver-timer span { color:var(--color-text-primary); font-size:15px; font-weight:600; }.cierre-receiver-summary { margin-top:0; }.cierre-receiver-summary p { color:var(--color-text-secondary); font-size:14px; line-height:1.42; margin:8px 0 0; }.cierre-receiver-actions { display:grid; gap:10px; }.cierre-receiver-actions .button,.cierre-receiver-send { width:100%; }
@media (min-width:1024px) { .cierre-backdrop { left:220px; padding:64px; }.cierre-context { border:1px solid var(--color-border); display:grid; grid-template-columns:minmax(340px,400px) minmax(420px,1fr); max-width:1240px; min-height:650px; }.cierre-threads { background:var(--color-surface); display:block; }.cierre-threads h1 { font-size:30px; font-weight:700; letter-spacing:-.03em; margin:0; padding:0 16px 24px; }.cierre-threads .conexiones-thread { padding:16px; }.cierre-threads .conexiones-thread.is-selected { background:var(--color-brand-soft); }.cierre-person-context { border-left:1px solid var(--color-border); display:grid; grid-template-columns:minmax(260px,.9fr) minmax(220px,.8fr); gap:28px; padding:28px; }.cierre-person-photo { height:auto; margin:0; min-height:440px; }.cierre-person-context>div:last-child { align-self:center; }.cierre-sheet { max-width:540px; } }

/* Seguimiento post-cita: confirmación y progreso demo, sin persistencia. */
.date-pass-follow-up{color:var(--color-brand);display:inline-block;font-size:14px;font-weight:600;margin-top:18px}.date-follow-up-page{margin:0 auto;max-width:540px}.date-follow-up-header{align-items:center;display:grid;gap:8px;grid-template-columns:44px 1fr;margin-bottom:24px}.date-follow-up-header>a{align-items:center;display:flex;font-size:24px;height:44px;justify-content:center;width:44px}.date-follow-up-header .eyebrow{margin:0 0 2px}.date-follow-up-header h1{font-size:28px;letter-spacing:-.035em;line-height:1.12;margin:0}.date-confirmation,.date-progress,.date-pause-option{border-bottom:1px solid var(--color-border);padding:22px 0}.date-confirmation{padding-top:0}.date-confirmation h2,.date-progress h2,.date-pause-option h2{font-size:22px;letter-spacing:-.025em;line-height:1.18;margin:4px 0 8px}.date-confirmation>p,.date-progress>p,.date-pause-option>p{color:var(--color-text-secondary);font-size:15px;line-height:1.45;margin:0;max-width:42ch}.date-confirmation-actions{display:grid;gap:10px;margin-top:20px}.date-confirmation-actions .button{width:100%}.date-demo-link{color:var(--color-brand);display:inline-block;font-size:14px;font-weight:600;margin-top:18px}.date-progress>div{align-items:center;display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between}.date-progress h2{margin:4px 0 0}.connection-state.state-date{background:var(--color-brand-soft);border-radius:var(--radius-control);color:var(--color-brand);display:inline-flex;font-size:12px;font-weight:600;line-height:1;padding:5px 7px}.date-progress>p{margin-top:16px}.date-progress-switcher{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.date-progress-switcher span{color:var(--color-text-secondary);font-size:12px;width:100%}.date-progress-switcher a{border-bottom:1px solid var(--color-border);font-size:13px;font-weight:600;padding-bottom:3px}.date-progress-switcher a[aria-current="page"]{color:var(--color-brand)}.date-pause-toggle{align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-control);cursor:pointer;display:flex;gap:10px;margin-top:20px;min-height:52px;padding:0 12px}.date-pause-toggle input{height:1px;opacity:0;position:absolute;width:1px}.date-pause-toggle span{background:var(--color-border);border-radius:99px;height:22px;position:relative;width:38px}.date-pause-toggle span:after{background:#fff;border-radius:50%;content:"";height:18px;left:2px;position:absolute;top:2px;transition:transform var(--motion-fast) ease-out;width:18px}.date-pause-toggle input:checked+span{background:var(--color-brand)}.date-pause-toggle input:checked+span:after{transform:translateX(16px)}.date-pause-toggle b{font-size:14px}.date-pause-status{font-size:13px!important;margin-top:10px!important}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:1ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:1ms !important; }
  .button:active,.rating-option:active,.chat-send:active,.chat-mic:active,.chat-media:active,.audio-player button:active,.reveal-play:active,.rating-option.is-selected,.rating-option.is-selected b { transform:none; }
}

@media (min-width:1024px) { .chat-menu-backdrop { left:220px; } }

/* OnboardingShell: flujo previo a la app, sin rail ni tab bar. */
.onboarding-page { background:var(--color-bg); }.onboarding-shell { min-height:100vh; padding:0 16px 104px; }.onboarding-header { align-items:center; display:grid; gap:12px; grid-template-columns:44px 1fr 44px; height:64px; margin:0 auto; max-width:1040px; }.onboarding-back,.onboarding-exit { align-items:center; color:var(--color-text-secondary); display:flex; font-size:14px; font-weight:600; height:44px; justify-content:center; }.onboarding-back { font-size:25px; justify-content:flex-start; }.onboarding-exit { font-size:13px; justify-content:flex-end; }.onboarding-progress { background:var(--color-border); border-radius:999px; height:3px; overflow:hidden; }.onboarding-progress span { background:var(--color-brand); display:block; height:100%; transition:width var(--motion-normal) ease-in-out; }.onboarding-layout { margin:0 auto; max-width:1040px; }.onboarding-content { padding:30px 0 24px; }.onboarding-content>h1,.onboarding-welcome h1 { font-size:30px; font-weight:700; letter-spacing:-.035em; line-height:1.12; margin:7px 0 10px; max-width:16ch; }.onboarding-intro,.onboarding-welcome>p:last-child { color:var(--color-text-secondary); font-size:16px; line-height:1.45; margin:0; max-width:35ch; }.onboarding-fields { display:grid; gap:16px; margin-top:30px; }.onboarding-fields label,.onboarding-bio { color:var(--color-text-primary); display:grid; font-size:14px; font-weight:600; gap:7px; }.onboarding-fields input,.onboarding-bio textarea { appearance:none; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); font:inherit; font-size:16px; min-height:50px; padding:12px; width:100%; }.onboarding-bio { margin-top:28px; }.onboarding-bio textarea { line-height:1.4; min-height:112px; resize:vertical; }.onboarding-fields input:focus,.onboarding-bio textarea:focus { border-color:var(--color-brand); outline:2px solid color-mix(in srgb,var(--color-brand) 20%,transparent); outline-offset:1px; }.onboarding-choice-section { margin-top:30px; }.onboarding-choice-section h2,.onboarding-lifestyle legend { font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0 0 10px; padding:0; }.onboarding-choices { display:flex; flex-wrap:wrap; gap:8px; }.onboarding-choices button { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); cursor:pointer; font:inherit; font-size:14px; font-weight:500; min-height:44px; padding:9px 12px; transition:transform var(--motion-fast) ease-out,background-color var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out; }.onboarding-choices button.is-selected { background:var(--color-brand-soft); border-color:var(--color-brand); color:var(--color-brand); font-weight:600; }.onboarding-choices button:active { transform:scale(.98); }.onboarding-ranges { border-top:1px solid var(--color-border); display:grid; gap:22px; margin-top:32px; padding-top:22px; }.onboarding-ranges label { display:grid; font-size:14px; font-weight:600; gap:9px; }.onboarding-ranges output { color:var(--color-text-secondary); font-size:14px; font-weight:500; }.onboarding-ranges input { accent-color:var(--color-brand); width:100%; }.onboarding-ranges label input+input { margin-top:-8px; }.onboarding-lifestyle { display:grid; gap:24px; margin-top:30px; }.onboarding-lifestyle fieldset { border:0; margin:0; padding:0; }.onboarding-footer { background:var(--color-bg); border-top:1px solid var(--color-border); bottom:0; left:0; padding:12px 16px calc(16px + env(safe-area-inset-bottom)); position:fixed; right:0; z-index:3; }.onboarding-footer .button { margin:0 auto; max-width:460px; width:100%; }.onboarding-context { display:none; }.onboarding-welcome { display:flex; flex-direction:column; justify-content:flex-end; min-height:calc(100vh - 142px); padding-bottom:32px; }.onboarding-welcome .wordmark { color:var(--color-brand); font-size:18px; font-weight:700; letter-spacing:-.04em; margin:0 0 auto; padding-top:20px; }.onboarding-welcome h1 { font-size:38px; max-width:11ch; }.onboarding-welcome-footer p { color:var(--color-text-secondary); font-size:13px; margin:9px 0 0; text-align:center; }
.onboarding-welcome-status .wordmark { margin-bottom:0; }.onboarding-welcome-status .eyebrow { margin-top:auto; }.onboarding-welcome-status>*:last-child { margin-bottom:auto; }
@media (min-width:768px) { .onboarding-shell { padding-left:32px; padding-right:32px; }.onboarding-content { max-width:500px; } }
@media (min-width:1024px) { .onboarding-shell { padding:0 64px; }.onboarding-header { height:76px; }.onboarding-layout { align-items:stretch; display:grid; gap:96px; grid-template-columns:minmax(380px,460px) minmax(360px,1fr); min-height:calc(100vh - 76px); }.onboarding-content { align-self:center; padding:48px 0 136px; }.onboarding-context { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:56px 0 136px; }.onboarding-context-photo { background-color:#c5c1bd; background-image:url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=1000&q=85&blur=12'); background-position:center; background-size:cover; border-radius:var(--radius-content); min-height:500px; overflow:hidden; position:relative; }.onboarding-context p { color:var(--color-text-secondary); font-size:15px; line-height:1.4; margin:14px 8px 0; max-width:28ch; }.onboarding-shell-welcome .onboarding-layout { min-height:100vh; }.onboarding-shell-welcome .onboarding-content { padding-bottom:140px; }.onboarding-shell-welcome .onboarding-context { padding-bottom:140px; }.onboarding-shell-welcome .onboarding-context-photo { min-height:680px; }.onboarding-welcome { min-height:0; padding:0; }.onboarding-welcome .wordmark { margin:0 0 88px; padding:0; }.onboarding-welcome h1 { font-size:46px; }.onboarding-footer { padding:16px 64px; }.onboarding-footer .button { margin-left:calc((100% - 1040px) / 2); } }

/* A2: grouped compatibility answers and their integrated importance selector. */
.onboarding-question-list { display:grid; gap:28px; margin-top:30px; }.onboarding-question { border-top:1px solid var(--color-border); padding-top:22px; }.onboarding-question:first-child { border-top:0; padding-top:0; }.onboarding-question h2 { font-size:17px; letter-spacing:-.02em; line-height:1.25; margin:0 0 12px; max-width:28ch; }.onboarding-importance { display:grid; gap:9px; margin-top:14px; max-height:0; opacity:0; overflow:hidden; transform:translateY(-4px); transition:max-height var(--motion-normal) ease-out, opacity var(--motion-normal) ease-out, transform var(--motion-normal) ease-out; }.onboarding-question.has-answer .onboarding-importance { max-height:132px; opacity:1; transform:translateY(0); }.onboarding-importance p { color:var(--color-text-secondary); font-size:13px; font-weight:500; line-height:1.35; margin:0; }.onboarding-importance-options { display:grid; gap:6px; grid-template-columns:repeat(4, minmax(0, 1fr)); }.onboarding-importance-options button { background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; color:var(--color-text-secondary); cursor:pointer; font:inherit; font-size:11px; font-weight:600; min-height:36px; padding:6px 3px; transition:background-color var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out, color var(--motion-fast) ease-out, transform var(--motion-fast) ease-out; }.onboarding-importance-options button.is-selected { background:var(--color-brand-soft); border-color:var(--color-brand); color:var(--color-brand); }.onboarding-importance-options button:active { transform:scale(.98); }.onboarding-imprescindible-intro { color:var(--color-text-secondary); font-size:16px; line-height:1.45; margin:0; max-width:35ch; }.onboarding-imprescindible-note { color:var(--color-text-primary); font-size:14px; font-weight:600; line-height:1.4; margin:22px 0 0; max-width:34ch; }.onboarding-imprescindible .onboarding-choice-section { margin-top:28px; }
@media (prefers-reduced-motion:reduce) { .onboarding-importance,.onboarding-importance-options button { transition-duration:1ms; } }

/* A3.1: audio de presentación simulado, con el reproductor compartido. */
.onboarding-audio .onboarding-choice-section { margin-top:30px; }.onboarding-audio-questions { display:grid; }.onboarding-audio-questions button { text-align:left; }.onboarding-audio-recorder { border-top:1px solid var(--color-border); margin-top:24px; max-height:0; opacity:0; overflow:hidden; padding-top:0; transform:translateY(-6px); transition:max-height var(--motion-normal) ease-out,opacity var(--motion-normal) ease-out,padding-top var(--motion-normal) ease-out,transform var(--motion-normal) ease-out; }.onboarding-audio-recorder.is-visible { max-height:320px; opacity:1; padding-top:22px; transform:translateY(0); }.onboarding-audio-recorder [hidden] { display:none; }.onboarding-audio-ready,.onboarding-audio-recording,.onboarding-audio-preview { animation:onboarding-audio-in var(--motion-normal) ease-out; }.onboarding-audio-ready>p,.onboarding-audio-recording>p,.onboarding-audio-status-copy { color:var(--color-text-secondary); font-size:14px; line-height:1.4; margin:0 0 14px; }.onboarding-audio-record { width:100%; }.onboarding-audio-status { align-items:center; display:flex; gap:8px; min-height:24px; }.onboarding-audio-status span { background:var(--color-brand); border-radius:50%; height:8px; width:8px; animation:onboarding-audio-pulse 1.5s ease-in-out infinite; }.onboarding-audio-status strong { font-size:14px; }.onboarding-audio-status time { color:var(--color-text-secondary); font-size:14px; font-variant-numeric:tabular-nums; margin-left:auto; }.onboarding-audio-preview .audio-player { border-top:1px solid var(--color-border); margin:0 0 4px; padding:12px 4px; }.onboarding-audio-repeat { background:transparent; border:0; color:var(--color-brand); cursor:pointer; font-size:14px; font-weight:600; min-height:44px; padding:8px 4px; }.onboarding-audio-continue.is-disabled { cursor:not-allowed; opacity:.48; }.onboarding-audio-continue.is-disabled:active { transform:none; }@keyframes onboarding-audio-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }@keyframes onboarding-audio-pulse { 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .onboarding-audio-recorder,.onboarding-audio-ready,.onboarding-audio-recording,.onboarding-audio-preview { animation:none; transform:none; } .onboarding-audio-status span { animation:none; } }

/* A3.2: fotos protegidas y vídeo reservado para Reveal. */
.onboarding-photos-list { display:grid; gap:16px; margin-top:28px; }.onboarding-photo-slot { align-items:center; border-bottom:1px solid var(--color-border); display:grid; gap:14px; grid-template-columns:104px 1fr; padding:0 0 16px; }.onboarding-photo-media { align-items:center; background:var(--color-surface); background-position:center; background-size:cover; border:1px dashed var(--color-border); border-radius:var(--radius-content); display:flex; height:132px; justify-content:center; overflow:hidden; position:relative; transition:border-color var(--motion-normal) ease-out,transform var(--motion-normal) ease-out; }.onboarding-photo-slot.is-added .onboarding-photo-media { border-color:transparent; }.onboarding-photo-add { color:var(--color-text-secondary); font-size:30px; font-weight:400; }.onboarding-photo-media .face-protection { z-index:1; }.onboarding-photo-copy strong { font-size:15px; }.onboarding-photo-copy p { color:var(--color-text-secondary); font-size:13px; line-height:1.35; margin:3px 0 7px; }.onboarding-photo-ready { color:var(--color-positive); display:block; font-size:12px; font-weight:600; margin-bottom:3px; }.onboarding-photo-actions { display:flex; flex-wrap:wrap; gap:2px 10px; }.onboarding-photo-actions button,.onboarding-video-repeat { background:transparent; border:0; color:var(--color-brand); cursor:pointer; font:inherit; font-size:13px; font-weight:600; min-height:36px; padding:4px 0; text-align:left; }.onboarding-photo-actions button[data-remove] { color:var(--color-text-secondary); }.onboarding-photos-protection { border-top:1px solid var(--color-border); margin-top:24px; padding-top:20px; }.onboarding-photos-protection h2 { font-size:16px; letter-spacing:-.015em; margin:0 0 7px; }.onboarding-photos-protection p,.onboarding-video-trust { color:var(--color-text-secondary); font-size:14px; line-height:1.42; margin:0; }.onboarding-photos-continue.is-disabled,.onboarding-video-continue.is-disabled { cursor:not-allowed; opacity:.48; }.onboarding-photos-continue.is-disabled:active,.onboarding-video-continue.is-disabled:active { transform:none; }
.onboarding-video-reveal-recorder { border-top:1px solid var(--color-border); margin-top:28px; padding-top:22px; }.onboarding-video-reveal-recorder [hidden] { display:none; }.onboarding-video-reveal-recorder [data-video-ready]>p,.onboarding-video-reveal-recorder [data-video-recording]>p,.onboarding-video-preview-copy { color:var(--color-text-secondary); font-size:14px; line-height:1.4; margin:0 0 14px; }.onboarding-video-reveal-recorder .button { width:100%; }.onboarding-video-reveal-recorder [data-video-preview] { animation:onboarding-audio-in var(--motion-normal) ease-out; }.onboarding-video-reveal-recorder .reveal-video,.onboarding-video-live-preview { aspect-ratio:.92; min-height:0; }.onboarding-video-live-preview { background:var(--color-surface); display:block; object-fit:cover; width:100%; }.onboarding-video-repeat { margin-top:5px; }.onboarding-video-trust { border-top:1px solid var(--color-border); margin-top:24px; padding-top:20px; }
@media (min-width:768px) { .onboarding-photo-slot { grid-template-columns:132px 1fr; }.onboarding-photo-media { height:154px; } }
@media (prefers-reduced-motion:reduce) { .onboarding-photo-media,.onboarding-video-reveal-recorder [data-video-preview],.reveal-video,.reveal-photo { animation:none; transform:none; transition-duration:1ms; } }

/* A4.1–A4.2: revisión humana del perfil y cierre sobrio del onboarding. */
.onboarding-review { animation:onboarding-review-in var(--motion-slow) ease-out; }.onboarding-review>h1,.onboarding-complete h1 { font-size:30px; font-weight:700; letter-spacing:-.035em; line-height:1.12; margin:7px 0 10px; max-width:16ch; }.onboarding-review-visible { border-top:1px solid var(--color-border); margin-top:28px; padding-top:20px; }.onboarding-review-heading,.profile-block-heading { align-items:flex-start; display:flex; gap:12px; justify-content:space-between; }.onboarding-review-heading h2 { font-size:18px; letter-spacing:-.02em; line-height:1.2; margin:4px 0 0; }.profile-edit { color:var(--color-brand); font-size:13px; font-weight:600; min-height:36px; padding:5px 0; transition:color var(--motion-fast) ease-out,transform var(--motion-fast) ease-out; }.profile-edit:active { transform:scale(.97); }.onboarding-review .profile-content { margin-top:18px; }.onboarding-review .profile-photo { height:min(104vw,500px); }.onboarding-review .profile-edit { position:relative; z-index:2; }.onboarding-review .profile-photo>.profile-edit { background:rgba(255,255,255,.9); border-radius:var(--radius-control); padding:7px 9px; position:absolute; right:12px; top:12px; }.profile-block-heading .eyebrow { flex:1; }.profile-interests { color:var(--color-text-secondary); font-size:14px; line-height:1.4; margin:13px 0 0; }.profile-audio .profile-block-heading { justify-content:flex-end; min-height:0; }.profile-audio .audio-player { border-top:1px solid var(--color-border); }.onboarding-review-private,.onboarding-review-reveal { border-top:1px solid var(--color-border); margin-top:8px; padding:22px 0; }.onboarding-review-private { background:var(--color-surface); border-bottom:1px solid var(--color-border); margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; }.onboarding-review-private>p { font-size:17px; font-weight:600; margin:16px 0 4px; }.onboarding-review-private small,.onboarding-review-reveal p { color:var(--color-text-secondary); font-size:14px; line-height:1.42; }.onboarding-review-reveal { align-items:start; display:grid; gap:10px 14px; grid-template-columns:1fr auto; }.onboarding-review-reveal h2 { font-size:18px; letter-spacing:-.02em; margin:4px 0 7px; }.onboarding-review-reveal p { margin:0; max-width:32ch; }.onboarding-review-reveal>span { align-items:center; border:1px solid var(--color-border); border-radius:50%; color:var(--color-text-secondary); display:flex; font-size:25px; height:42px; justify-content:center; width:42px; }.onboarding-review-reveal>.profile-edit { grid-column:1 / -1; }.onboarding-complete { animation:onboarding-review-in var(--motion-slow) ease-out; display:flex; flex-direction:column; justify-content:center; min-height:calc(100vh - 248px); }.onboarding-complete-mark { align-items:center; border:1px solid var(--color-brand); border-radius:50%; color:var(--color-brand); display:flex; font-size:24px; font-weight:600; height:48px; justify-content:center; margin:0 0 22px; width:48px; }.onboarding-complete .eyebrow { margin-bottom:auto; }.onboarding-complete-note { border-top:1px solid var(--color-border); color:var(--color-text-secondary); font-size:14px; line-height:1.42; margin:28px 0 0; max-width:32ch; padding-top:18px; }.onboarding-review .button:active,.onboarding-complete .button:active,[data-review-confirm]:active { transform:scale(.98); }@keyframes onboarding-review-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.own-profile-signals { border-bottom:1px solid var(--color-border); padding:24px 0; }.own-profile-signals-heading h2 { font-size:18px; letter-spacing:-.02em; line-height:1.2; margin:4px 0 0; }.own-profile-signals-intro { color:var(--color-text-secondary); font-size:14px; line-height:1.42; margin:10px 0 16px; max-width:37ch; }.own-profile-signal-list { border-top:1px solid var(--color-border); list-style:none; margin:0; padding:0; }.own-profile-signal-list li { border-bottom:1px solid var(--color-border); padding:12px 0; }.own-profile-signal-list strong,.own-profile-signal-list span { display:block; }.own-profile-signal-list strong { font-size:15px; font-weight:600; }.own-profile-signal-list span,.own-profile-signals-empty span { color:var(--color-text-secondary); font-size:13px; line-height:1.4; margin-top:2px; }.own-profile-signals-empty { background:var(--color-surface); border:1px solid var(--color-border); margin:16px 0 0; padding:12px; }.own-profile-signals-empty strong,.own-profile-signals-empty span { display:block; }.own-profile-signals-empty strong { font-size:14px; font-weight:600; }.own-profile-signals-empty span { margin-top:3px; }
/* A4.3: perfil propio, respuestas y preferencias privadas. */
.own-profile-public { border-top:1px solid var(--color-border); margin-top:28px; padding-top:20px; }.own-profile-section-heading { align-items:flex-start; display:flex; gap:12px; justify-content:space-between; }.own-profile-section-heading h2 { font-size:18px; letter-spacing:-.02em; line-height:1.2; margin:4px 0 0; }.own-profile-public .profile-content { margin-top:18px; }.own-profile-answer { align-items:flex-start; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-control); display:flex; gap:12px; justify-content:space-between; margin:0 0 8px; padding:14px 12px; }.own-profile-answer>div { min-width:0; }.own-profile-answer>div>p:last-child { font-size:16px; line-height:1.4; margin:5px 0 0; }.own-profile-answer .profile-edit { flex:none; margin-top:-5px; }.own-profile-private .own-profile-section-heading { margin-bottom:16px; }.own-profile-preferences { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-control); margin:0; overflow:hidden; }.own-profile-preferences>div { display:grid; gap:4px; padding:12px; }.own-profile-preferences>div+div { border-top:1px solid var(--color-border); }.own-profile-preferences dt { color:var(--color-text-secondary); font-size:12px; font-weight:600; letter-spacing:.02em; }.own-profile-preferences dd { font-size:15px; line-height:1.4; margin:0; }.own-profile-private small { display:block; margin-top:12px; max-width:37ch; }
@media (min-width:768px) { .onboarding-review-private { margin-left:0; margin-right:0; padding-left:18px; padding-right:18px; }.onboarding-review .profile-photo { height:min(560px,64vw); } }
@media (min-width:1024px) { .onboarding-review,.onboarding-complete { max-width:460px; }.onboarding-review .profile-photo { height:420px; }.onboarding-complete { min-height:400px; }.onboarding-footer [data-review-confirm] { transition:transform var(--motion-fast) ease-out,background-color var(--motion-normal) ease-in-out; } }
@media (prefers-reduced-motion:reduce) { .onboarding-review,.onboarding-complete { animation:none; } .profile-edit,[data-review-confirm] { transition-duration:1ms; transform:none; } }

/* B1–B2: estados de Descubrir y match confirmado en espera. */
.connection-state.state-alignment-pending { color:var(--color-warning); }
.conexiones-copy .connection-state.state-alignment-pending { background:color-mix(in srgb,var(--color-warning) 14%,var(--color-surface)); color:var(--color-warning); }
.connection-state.state-at-risk { color:var(--color-warning); }.conexiones-copy .connection-state.state-at-risk { background:color-mix(in srgb,var(--color-warning) 14%,var(--color-surface)); color:var(--color-warning); }.conexiones-copy .connection-state.state-expired { background:var(--color-bg); color:var(--color-text-secondary); }.conexiones-thread-at-risk { align-items:start; }.connection-inactivity-actions { display:flex; gap:12px; margin-top:12px; }.connection-inactivity-actions a { align-items:center; border:1px solid var(--color-border); border-radius:var(--radius-control); display:inline-flex; font-size:13px; font-weight:600; min-height:44px; padding:0 12px; transition:background-color var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out; }.connection-inactivity-actions a:first-child { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }.connection-inactivity-actions a:last-child { color:var(--color-text-primary); }
.discovery-blocked { animation:discovery-blocked-in var(--motion-normal) ease-out; border-top:1px solid var(--color-border); padding-top:20px; }
.discovery-blocked-photo { background-color:#c5c1bd; background-position:center; background-size:cover; border-radius:var(--radius-content); height:176px; margin-bottom:16px; }
.discovery-blocked h2 { font-size:24px; letter-spacing:-.03em; line-height:1.16; margin:7px 0 10px; max-width:16ch; }
.discovery-blocked p { color:var(--color-text-secondary); font-size:16px; line-height:1.45; margin:0; max-width:34ch; }
.discovery-blocked .button { margin-top:28px; width:100%; }
.discovery-radius{border-bottom:1px solid var(--color-border);display:grid;gap:9px;margin:0 0 18px;padding:0 0 16px}.discovery-radius>span{color:var(--color-text-secondary);font-size:13px;font-weight:600}.discovery-radius .onboarding-choices button{border-radius:999px;min-height:38px;padding:6px 11px}.discovery-location-context .button-secondary{margin-top:10px}.discovery-location-feedback{font-size:13px;margin-top:14px!important}
@keyframes discovery-blocked-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .discovery-blocked { animation:none; } }

/* C1–C2: match de cita y elección de ciudad. */
.date-match-confirmation { align-items:center; border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); display:flex; gap:10px; margin:24px 0; padding:14px 0; }.date-match-confirmation span { align-items:center; background:var(--color-positive); border-radius:50%; color:#fff; display:flex; font-size:13px; height:24px; justify-content:center; width:24px; }.date-match-confirmation p { font-size:14px; font-weight:600; margin:0; }.city-choice-page { margin:0 auto; max-width:540px; }.city-choice-header { align-items:center; display:grid; grid-template-columns:44px 1fr; margin-bottom:32px; }.city-choice-header>a { align-items:center; display:flex; font-size:24px; height:44px; justify-content:center; width:44px; }.city-choice-header .eyebrow { margin:0; padding-left:8px; }.city-choice-content h1 { font-size:30px; font-weight:700; letter-spacing:-.035em; line-height:1.12; margin:0 0 10px; }.city-choice-content>p,.city-choice-confirmation>p { color:var(--color-text-secondary); font-size:16px; line-height:1.45; margin:0; max-width:34ch; }.city-options { display:grid; gap:10px; margin-top:28px; }.city-option { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); cursor:pointer; font:inherit; font-size:16px; font-weight:600; min-height:52px; padding:12px 14px; text-align:left; transition:transform var(--motion-fast) ease-out,background-color var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out; }.city-option:active { transform:scale(.98); }.city-option.is-selected { background:var(--color-brand-soft); border-color:var(--color-brand); }.city-choice-confirmation { border-top:1px solid var(--color-border); margin-top:28px; padding-top:24px; }.city-choice-confirmation h2 { font-size:22px; letter-spacing:-.02em; margin:0 0 8px; }.city-choice-confirmation .button { margin-top:24px; width:100%; }

/* Decisión final post-Reveal: misma jerarquía sobria del sheet de valoración. */
.post-reveal-options { display:grid; gap:8px; margin:22px 0 12px; }.post-reveal-option { align-items:center; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); cursor:pointer; display:flex; font:inherit; font-size:15px; font-weight:500; justify-content:space-between; min-height:54px; padding:12px; text-align:left; transition:transform var(--motion-fast) ease-out,background-color var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out; width:100%; }.post-reveal-option::after { color:var(--color-text-secondary); content:'›'; font-size:22px; font-weight:400; line-height:1; }.post-reveal-option:hover,.post-reveal-option:focus-visible { border-color:var(--color-brand); }.post-reveal-option:active { transform:scale(.98); }.post-reveal-option-leave { color:var(--color-text-secondary); }.post-reveal-option-leave::after { display:none; }.post-reveal-confirmation { border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); margin:24px 0; padding:15px 0; }.post-reveal-confirmation span { color:var(--color-text-secondary); display:block; font-size:12px; margin-bottom:3px; }.post-reveal-confirmation strong { font-size:16px; font-weight:600; }.post-reveal-return { width:100%; }

/* Datos de perfil protegidos y solicitud de cambio (Design Lab). */
.protected-profile-field { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-control); display:grid; gap:5px; min-height:96px; padding:12px; }.protected-profile-field>span:first-child { font-size:14px; font-weight:600; }.protected-profile-field strong { font-size:16px; font-weight:500; }.protected-profile-action { color:var(--color-brand); font-size:14px; font-weight:600; min-height:36px; padding:5px 0; width:max-content; }.protected-profile-status { color:var(--color-text-secondary); font-size:13px; font-weight:600; line-height:1.35; }.request-change-form { display:grid; gap:16px; margin-top:24px; }.request-change-form label { color:var(--color-text-primary); display:grid; font-size:14px; font-weight:600; gap:7px; }.request-change-form input,.request-change-form textarea { appearance:none; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); font:inherit; font-size:16px; min-height:50px; padding:12px; width:100%; }.request-change-form textarea { line-height:1.4; min-height:88px; resize:vertical; }.request-change-form input:focus,.request-change-form textarea:focus { border-color:var(--color-brand); outline:2px solid color-mix(in srgb,var(--color-brand) 20%,transparent); outline-offset:1px; }.request-change-form .button,.request-change-confirmation .button { margin-top:8px; width:100%; }

/* Real app screens (/app/): visible error/rate-limit feedback, previously
   unstyled and easy to miss — applies to every screen built on app_base.html
   (auth forms, onboarding, connections, chat), not just the welcome layout. */
[role="alert"], p.error, li.error { background:color-mix(in srgb,var(--color-danger) 10%,transparent); border:1px solid var(--color-danger); border-radius:var(--radius-control); color:var(--color-danger); display:block; font-size:14px; font-weight:600; line-height:1.4; margin:14px 0; padding:10px 12px; }
p.success, li.success { background:color-mix(in srgb,var(--color-positive) 10%,transparent); border:1px solid var(--color-positive); border-radius:var(--radius-control); color:var(--color-positive); display:block; font-size:14px; font-weight:600; line-height:1.4; margin:14px 0; padding:10px 12px; }
.onboarding-fields .errorlist { list-style:none; margin:0; padding:0; }
.onboarding-fields label [role="alert"] { background:none; border:0; display:block; font-size:13px; font-weight:600; margin:2px 0 0; padding:0; }
.onboarding-fields input.is-invalid { border-color:var(--color-danger); }
.onboarding-ranges input[type="range"] { appearance:auto; -webkit-appearance:auto; background:none; border:0; min-height:auto; padding:0; width:100%; }
.chat-conversation [role="alert"], .chat-conversation p.error, .chat-conversation p.success { margin:12px 16px; }

/* Account settings rows and the one irreversible-action button. */
.button-danger { background:var(--color-danger); border:1px solid var(--color-danger); color:#fff; }
.settings-row-group { border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); }
.settings-row { align-items:center; color:var(--color-text-primary); display:flex; gap:12px; justify-content:space-between; min-height:64px; padding:12px 4px; }
.settings-row+.settings-row { border-top:1px solid var(--color-border); }
.settings-row>div { min-width:0; }
.settings-row strong,.settings-row small { display:block; }
.settings-row strong { font-size:15px; font-weight:600; }
.settings-row small { color:var(--color-text-secondary); font-size:13px; line-height:1.35; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-row>span { color:var(--color-text-secondary); font-size:22px; line-height:1; }
.settings-row .protected-profile-status,.settings-row .protected-profile-action { flex:none; text-align:right; }

/* Password strength meter (registration). Client-side feedback only; the
   server-side validator in accounts/forms.py is always the real gate. */
.password-strength { display:grid; gap:6px; margin-top:-4px; }
.password-strength-track { background:var(--color-border); border-radius:999px; height:4px; overflow:hidden; }
.password-strength-track span { background:var(--color-border); display:block; height:100%; transition:width var(--motion-fast) ease-out,background-color var(--motion-fast) ease-out; width:0%; }
.password-strength-label { color:var(--color-text-secondary); font-size:12px; font-weight:600; }
.password-strength.is-weak .password-strength-track span { background:var(--color-danger); width:33%; }
.password-strength.is-weak .password-strength-label { color:var(--color-danger); }
.password-strength.is-fair .password-strength-track span { background:var(--color-warning); width:66%; }
.password-strength.is-fair .password-strength-label { color:var(--color-warning); }
.password-strength.is-strong .password-strength-track span { background:var(--color-positive); width:100%; }
.password-strength.is-strong .password-strength-label { color:var(--color-positive); }

/* Secondary action beneath an onboarding form. */
.form-secondary-link { color:var(--color-text-secondary); font-size:13px; margin:24px 0 0; text-align:right; }.form-secondary-link a { color:var(--color-brand); }

/* Real chat (/app/chat/): who-sent-it label, since the minimal real screen
   has no avatar/name header per bubble like the Design Lab mock does. */
.chat-message-author { color:var(--color-text-secondary); font-size:11px; font-weight:600; margin-bottom:3px; }
.chat-message-me .chat-message-author { text-align:right; }
.connection-avatar { align-items:center; background:var(--color-border); color:var(--color-text-secondary); display:flex; font-size:18px; font-weight:600; justify-content:center; }.connection-avatar span { line-height:1; }.connection-closure-context { color:var(--color-text-secondary)!important; font-size:12px!important; margin:5px 0 0!important; }

/* The choice-button partial is shared across onboarding steps. */
.onboarding-choice-section > label.eyebrow { color:var(--color-text-primary); font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0 0 10px; padding:0; text-transform:none; }

/* Native multi-select controls styled as onboarding choice pills. */
.onboarding-fields .onboarding-choice-pill { align-items:center; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); cursor:pointer; display:inline-flex; font:inherit; font-size:14px; font-weight:500; gap:0; min-height:44px; padding:9px 12px; position:relative; transition:transform var(--motion-fast) ease-out,background-color var(--motion-fast) ease-out,border-color var(--motion-fast) ease-out,color var(--motion-fast) ease-out; }
.onboarding-fields .onboarding-choice-pill input { height:1px; min-height:1px; opacity:0; padding:0; position:absolute; width:1px; }
.onboarding-fields .onboarding-choice-pill:has(input:checked) { background:var(--color-brand-soft); border-color:var(--color-brand); color:var(--color-brand); font-weight:600; }
.onboarding-fields .onboarding-choice-pill:has(input:focus-visible) { outline:2px solid color-mix(in srgb,var(--color-brand) 20%,transparent); outline-offset:1px; }
.onboarding-fields .onboarding-choice-pill:active { transform:scale(.98); }
/* Active reputation signals are conveyed by text for assistive technology too. */
.own-profile-signal-list li.is-active strong { color:var(--color-brand); }

/* Compact profile gallery and fullscreen viewer, following the existing chat media viewer pattern. */
.photo-gallery{aspect-ratio:4/3;display:grid;gap:8px;grid-template-columns:1.25fr .75fr;grid-template-rows:repeat(2,minmax(0,1fr));margin:16px 0;overflow:hidden}.photo-gallery-trigger{background:#c5c1bd;border:0;border-radius:var(--radius-content);cursor:zoom-in;min-height:0;overflow:hidden;padding:0;width:100%}.photo-gallery-trigger:first-child{grid-row:span 2}.photo-gallery-trigger img{display:block;height:100%;object-fit:cover;width:100%}.photo-gallery-count-1{grid-template-columns:1fr;grid-template-rows:1fr}.photo-gallery-count-1 .photo-gallery-trigger:first-child{grid-row:auto}.photo-gallery-count-2{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}.photo-gallery-count-2 .photo-gallery-trigger:first-child{grid-row:auto}.photo-lightbox[hidden]{display:none}.photo-lightbox{align-items:center;background:rgba(41,40,38,.92);bottom:0;display:flex;justify-content:center;left:0;min-height:100dvh;padding:32px 24px;position:fixed;right:0;top:0;z-index:20}.photo-lightbox:not([hidden]){animation:date-pass-qr-in var(--motion-normal) ease-out}.photo-lightbox-content{align-items:center;display:flex;height:100%;justify-content:center;max-height:100%;max-width:100%;width:100%}.photo-lightbox-content img{display:block;max-height:calc(100dvh - 64px);max-width:100%;object-fit:contain}.photo-lightbox-close,.photo-lightbox-nav{align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;color:var(--color-text-primary);cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;position:absolute;width:44px}.photo-lightbox-close{font-size:28px;font-weight:300;line-height:1;right:16px;top:max(16px,env(safe-area-inset-top))}.photo-lightbox-nav{font-size:20px;top:calc(50% - 22px)}.photo-lightbox-previous{left:12px}.photo-lightbox-next{right:12px}.photo-lightbox-open{overflow:hidden}

/* Compact read-only profile details reuse the existing preference row family. */
.profile-bio { margin-top:20px; }.profile-bio .profile-block-heading { align-items:center; }.profile-bio h2,.own-profile-identity h3 { font-size:16px; letter-spacing:-.01em; margin:0; }.profile-interest-pills { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:14px 0 0; padding:0; }.profile-interest-pill { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-text-primary); font-size:14px; font-weight:500; min-height:36px; padding:8px 12px; }.own-profile-lifestyle { margin-top:14px; }.profile-questionnaire { border:1px solid var(--color-border); border-radius:var(--radius-control); margin-top:14px; overflow:hidden; }.profile-questionnaire summary { align-items:center; cursor:pointer; display:flex; gap:12px; justify-content:space-between; list-style:none; min-height:62px; padding:12px; }.profile-questionnaire summary::-webkit-details-marker { display:none; }.profile-questionnaire summary::marker { content:""; }.profile-questionnaire summary strong,.profile-questionnaire summary small { display:block; }.profile-questionnaire summary strong { font-size:15px; font-weight:600; }.profile-questionnaire summary small,.profile-questionnaire dd small { color:var(--color-text-secondary); font-size:13px; line-height:1.35; margin-top:2px; }.profile-questionnaire-indicator { color:var(--color-text-secondary); font-size:22px; line-height:1; transition:transform var(--motion-fast) ease-out; }.profile-questionnaire[open] .profile-questionnaire-indicator { transform:rotate(90deg); }.profile-questionnaire .own-profile-preferences { border:0; border-radius:0; border-top:1px solid var(--color-border); }.profile-questionnaire dd small { display:block; }.own-profile-identity { margin-top:22px; }.own-profile-identity h3 { margin-bottom:10px; }

@media (min-width:1024px){.connection-context-photo{max-height:360px}}
@media (prefers-reduced-motion:reduce){.photo-lightbox{animation:none}}

/* C5: ubicación puntual y zona de encuentro aproximada. */
.location-page{margin:0 auto;max-width:540px}.location-page h1{font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.12;margin:0 0 10px}.location-page>section>p:not(.location-spot-kind):not(.location-spot-benefit):not(.location-spot-distances){color:var(--color-text-secondary);font-size:16px;line-height:1.45;margin:0;max-width:34ch}.location-privacy-note{margin-bottom:28px!important}.location-actions{display:grid;gap:10px}.location-actions .button,.location-page>section>.button{margin-top:24px;width:100%}.location-status{margin-top:20px!important}.location-loading{display:flex;gap:7px;margin-top:16px}.location-loading span{animation:location-pulse 1.1s ease-in-out infinite;background:var(--color-brand);border-radius:50%;height:8px;width:8px}.location-loading span:nth-child(2){animation-delay:.12s}.location-loading span:nth-child(3){animation-delay:.24s}@keyframes location-pulse{0%,100%{opacity:.32;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.location-intro{margin-bottom:20px!important}.location-view-toggle{display:flex;gap:6px;margin-bottom:14px}.location-view-toggle button{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-control);color:var(--color-text-secondary);cursor:pointer;font:inherit;font-size:13px;font-weight:600;min-height:38px;padding:7px 12px}.location-view-toggle button.is-active{border-color:var(--color-brand);color:var(--color-brand)}.location-zone-map{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-content);margin-bottom:12px;overflow:hidden}.location-zone-map svg{display:block;height:auto;width:100%}.location-zone-map svg circle:first-child{fill:var(--color-brand-soft)}.location-zone-map svg circle:not(:first-child){fill:var(--color-brand)}.location-spot-list{display:grid;gap:8px;list-style:none;margin:0 0 20px;padding:0}.location-spot-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-control);padding:12px}.location-spot-kind{color:var(--color-text-secondary);font-size:12px;margin:0 0 2px}.location-spot-card strong{font-size:17px;letter-spacing:-.015em}.location-spot-benefit{color:var(--color-brand);font-size:13px;font-weight:600;margin:2px 0 0}.location-spot-distances,.spot-option-distances{color:var(--color-text-secondary);display:flex;font-size:12px;gap:0;margin:8px 0 0}.location-spot-distances span+span::before,.spot-option-distances span+span::before{content:'·';padding:0 5px}.spot-option-distances{margin-top:4px}.location-states{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.location-loading span{animation:none}}
.chat-mic.is-recording{background:var(--color-brand);color:var(--color-surface);opacity:.72}
.chat-recorder-preview-actions{display:flex;gap:8px;margin:8px 4px 4px}.chat-recorder-preview-actions .button{flex:1;min-height:40px;padding:0 12px}
.chat-turn[hidden]{display:none}
.home-publica-como-funciona{border-top:1px solid var(--color-border);margin:0 0 130px;padding-top:24px}.home-publica-como-funciona h2{font-size:20px;letter-spacing:-.015em;margin:0 0 14px}.home-publica-como-funciona ol{color:var(--color-text-primary);display:grid;font-size:15px;gap:12px;line-height:1.4;margin:0;padding-left:22px}.home-publica-como-funciona li{padding-left:4px}.home-publica-privacidad{color:var(--color-text-secondary);font-size:12px;line-height:1.45;margin:20px 0 0}.home-publica-footer{display:grid;gap:10px}