@font-face{font-family:Quicksand;src:url('/assets/Quicksand-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Quicksand;src:url('/assets/Quicksand-Medium.ttf') format('truetype');font-style:normal;font-weight:500 700;font-display:swap}
/* ─── tokens ─────────────────────────────────────────────────── */
:root{--ink:#182b4d;--blue:#2e47d1;--navy:#142b54;--amber:#f0a92c;--muted:#596778;--line:#dce4ef;--soft:#f5f8fc;--r:16px}
/* ─── reset & base ───────────────────────────────────────────── */
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:#fff;color:var(--ink);font-family:Quicksand,sans-serif;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,summary{cursor:pointer}button{color:inherit}button:disabled{cursor:default;opacity:.6}button,a,input,summary{touch-action:manipulation}:focus-visible{outline:3px solid #b47c17;outline-offset:4px}h1,h2,h3,p{margin-top:0}
/* ─── typography ──────────────────────────────────────────────── */
h1,h2,h3{font-weight:500;line-height:1.1;text-wrap:balance}h1{font-size:clamp(44px,6vw,80px);letter-spacing:-.03em;margin-bottom:28px}h2{font-size:clamp(30px,3vw,44px);letter-spacing:-.025em;margin-bottom:22px}h3{font-size:22px;letter-spacing:-.02em;margin-bottom:13px}p{font-size:17px;line-height:1.8;color:var(--muted);margin-bottom:20px}strong,b{font-weight:500}em{font-style:normal;color:var(--blue)}
/* ─── utilities ───────────────────────────────────────────────── */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:32px}.section{padding-block:100px}.soft{background:var(--soft)}.eyebrow{display:block;font-size:10px;letter-spacing:.15em;font-weight:500;margin-bottom:20px;color:var(--blue)}.small,.caption{font-size:12px;line-height:1.65;color:var(--muted)}.caption{margin:18px 0 0}.text-link{display:inline-flex;align-items:center;gap:20px;font-size:14px;font-weight:500;padding-block:12px}.text-link span{font-size:18px}.text-link:hover{text-decoration:underline;text-underline-offset:6px}
/* ─── button ──────────────────────────────────────────────────── */
.button{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:48px;border:1.5px solid var(--blue);background:var(--blue);border-radius:8px;color:#fff;padding:12px 22px;font-size:14px;font-weight:500;transition:background .15s,transform .15s}.button:hover{background:#2339b8}.button:active{transform:translateY(1px)}.button span{font-size:18px}
/* ─── skip & nav ──────────────────────────────────────────────── */
.skip{position:fixed;left:12px;top:-100px;z-index:30;background:#fff;padding:12px;border:2px solid var(--blue)}.skip:focus{top:10px}header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,228,239,.75)}.header{height:80px;display:flex;justify-content:space-between;align-items:center}.logo{display:inline-flex;width:96px;flex-shrink:0}.logo svg{width:100%;height:auto;overflow:hidden}.header nav{display:flex;align-items:center;gap:26px;font-size:13px}.header nav a{padding-block:14px;transition:color .15s}.header nav a:hover{color:var(--blue)}.header nav a[aria-current]{color:var(--blue);text-decoration:underline;text-underline-offset:9px}.nav-demo{margin-left:14px;border-bottom:1px solid var(--blue);color:var(--blue)}.nav-demo span{margin-left:16px}.menu-toggle{display:none}
/* ─── hero ─────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-block:60px 70px;align-items:center}.hero-copy>p{max-width:400px}.hero-actions{display:flex;align-items:center;gap:24px;margin-block:28px}.hero-sub{font-size:12px;color:var(--muted);margin:0;letter-spacing:.01em}.hero-visual{background:#f3f6fd;border:1px solid #d8e3f2;border-radius:20px;padding:28px 28px 18px;min-width:0;position:relative}
.visual-label{font-size:9px;letter-spacing:.12em;display:flex;align-items:center;gap:8px;color:#4e6386}.dot{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.orbit-map{padding:30px 0 22px}.map-node{display:flex;align-items:center;gap:13px}.map-node small{font-size:8px;letter-spacing:.13em;display:block;color:#607599}.map-node strong{font-size:17px;font-weight:500;display:block}.map-node div>span{font-size:11px;color:var(--muted);display:block}
.visit{border:1px solid #d5e2f0;background:#fff;padding:18px;border-radius:12px;margin-right:38px}.node-icon{width:40px;height:40px;background:#eaf0fc;color:var(--blue);display:grid;place-items:center;border-radius:10px;font-size:18px;flex-shrink:0}
.branch{border-left:1px solid #c6d6ea;margin:0 0 0 38px;padding:24px 0 0 24px;display:grid;gap:20px}.branch>.map-node{position:relative}.branch>.map-node:before{content:'';position:absolute;width:24px;height:1px;background:#c6d6ea;left:-24px;top:20px}.branch>.map-node:last-child:after{content:'';position:absolute;left:-25px;top:21px;width:2px;height:20px;background:#f3f6fd}
.blue{border:1px solid #a8bff0;border-radius:50%;background:#e5ecfd}.amber{color:#855a0a;background:#f7e7c3;border-radius:50%}
.return-path{display:flex;gap:14px;margin-top:20px;align-items:center;font-size:12px;color:#7a5a18;padding-left:38px}.return-path>span{font-size:24px}
.visual-foot{display:flex;justify-content:space-between;border-top:1px solid #d2dff0;padding-top:15px;font-size:8px;letter-spacing:.13em;color:#5c7398}
/* ─── statement / people ──────────────────────────────────────── */
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-heading{max-width:640px;margin-bottom:52px}.section-heading>p{max-width:520px}
/* ─── topic list ──────────────────────────────────────────────── */
.topic-list{border-top:1px solid var(--line)}.topic-list>a{display:grid;grid-template-columns:56px 1fr 40px;gap:18px;padding:28px 0;border-bottom:1px solid var(--line);align-items:center;transition:background .18s,padding-left .18s}.topic-list>a:hover{background:#f7f9fd;padding-left:6px}.topic-list>a>span:first-child{font-size:12px;color:var(--blue);align-self:start;margin-top:5px}.topic-list h3{font-size:24px;margin-bottom:5px}.topic-list p{font-size:14px;margin:0}.topic-list>a>span:last-child{font-size:28px;color:var(--blue)}
/* ─── split sections ──────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start}.section-copy{max-width:420px}.section-copy p{font-size:16px}
/* ─── steps ────────────────────────────────────────────────────── */
.plain-steps{list-style:none;padding:0;margin:26px 0;counter-reset:step}.plain-steps li{counter-increment:step;font-size:14px;margin:12px 0;display:flex;gap:16px;align-items:center}.plain-steps li:before{content:'0' counter(step);font-size:10px;color:var(--blue);border:1px solid #c0d0ef;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}
/* ─── club demo ───────────────────────────────────────────────── */
.club-demo{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;min-width:0}
/* Chrome de app: specimen-head se convierte en barra de título del componente */
.specimen-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-28px -28px 28px;padding:11px 22px;background:linear-gradient(to bottom,#f7f9fc,#f2f5fa);border-bottom:1px solid #dde6f0;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.specimen-head .eyebrow{font-size:9px;margin:0}.badge{font-size:9px;color:var(--muted);padding:3px 9px;border:1px solid var(--line);border-radius:20px;white-space:nowrap;background:#fff}.club-demo h3{font-size:26px}.club-demo>p:not(.caption):not(.state-note){font-size:13px}
.stamps{display:flex;gap:12px;margin:28px 0}.stamp{width:58px;height:58px;display:grid;place-items:center;font-size:12px;border:1px dashed #b5c8eb;color:#617394;border-radius:12px;transform:rotate(-8deg);background:#f8faff}.stamp.filled{color:var(--blue);background:#dfe9fc;border:1px solid #9bb9f1}.stamp.filled:nth-child(2){background:#cbdcfb}.stamp.filled:nth-child(3){background:#b6cef8}.stamp.filled:nth-child(4){background:#f6e1ae;border-color:#d9ae58;color:#77540d}
.club-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:18px}.club-bottom strong{font-size:23px;display:block}.club-bottom div>span{font-size:12px;color:var(--muted);display:block}.reward-symbol{font-size:48px;color:#a27114;line-height:1}.state-note{font-size:12px;min-height:38px;color:var(--ink);margin:18px 0}.demo-actions{display:flex;gap:14px;align-items:center}.reset{background:transparent;border:0;border-bottom:1px solid #a6b4cb;font-size:11px;padding:10px 0;min-height:44px;white-space:nowrap;color:var(--muted)}.reset:hover{color:var(--ink);border-color:var(--ink)}.club-demo .button{font-size:12px;gap:12px}.club-demo .caption{font-size:10px}
/* ─── analytics demo ──────────────────────────────────────────── */
.analytics-demo{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff;min-width:0}
/* Operation: chrome diferenciado para la tarjeta dentro de navy */
.operation .specimen-head{margin:-32px -32px 28px;padding:11px 26px}
.switch{display:flex;border-bottom:1px solid var(--line);gap:16px;margin-bottom:28px;flex-wrap:wrap}.switch button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;min-height:44px;font-size:11px;color:var(--muted);transition:color .15s,border-color .15s;margin-bottom:-1px}.switch button[aria-pressed=true]{color:var(--blue);border-bottom-color:var(--blue);font-weight:500}
.analytics-demo h3{font-size:20px;margin-bottom:8px}.chart-context{font-size:11px;margin:0 0 22px}.segmented-bar{display:flex;overflow:hidden;border-radius:6px;height:50px;margin:26px 0 16px}.segmented-bar span{display:grid;place-items:center;font-size:13px;color:#fff}.new-segment{width:60%;background:var(--blue)}.returning-segment{width:40%;background:var(--navy)}.legend{display:flex;gap:22px;flex-wrap:wrap;font-size:11px}.legend span:before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--blue);border-radius:2px}.legend span:last-child:before{background:var(--navy)}.chart-insight{font-size:13px;line-height:1.75;margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);min-height:60px}
.bars{display:grid;gap:16px;margin:22px 0}.bar-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.bar-track{background:#eef2f9;height:11px;border-radius:4px;overflow:hidden}.bar-fill{height:100%;background:var(--blue);width:var(--value,100%);border-radius:4px}
.bars:not(.week-bars) .bar:nth-child(1) .bar-fill{width:100%}.bars:not(.week-bars) .bar:nth-child(2) .bar-fill{width:70.8%;background:#789eea}.bars:not(.week-bars) .bar:nth-child(3) .bar-fill{width:50%;background:#b5ccf7}
.week-bars .bar-fill{width:var(--value);background:var(--blue)}.week-bars .bar:nth-child(5) .bar-fill,.week-bars .bar:nth-child(6) .bar-fill{background:#2339b8}
.metric-set{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0}.metric-set>div{border-left:1px solid var(--line);padding-left:14px}.metric-set strong{font-size:30px;display:block;color:var(--blue)}.metric-set span{font-size:11px;color:var(--muted)}.metric-set,.bar-label{font-variant-numeric:tabular-nums}
/* ─── navy / experience ───────────────────────────────────────── */
.navy{background:var(--navy);color:#fff}.navy h2,.navy h3{color:#fff}.navy p{color:#c8d5ed}.navy .eyebrow,.navy .text-link{color:#b9cdf8}
/* operation es tarjeta blanca dentro de navy — necesita reestablecer colores oscuros */
.operation{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:32px;color:var(--ink)}
.operation h3{color:var(--ink)}.operation p{color:var(--muted)}.operation strong{color:var(--ink)}.operation .eyebrow{color:var(--blue)}.operation .badge{color:var(--muted)}.operation .switch button{color:var(--muted)}.operation .switch button[aria-pressed=true]{color:var(--blue)}.journey{display:grid;grid-template-columns:1fr 38px 1fr 38px 1fr;align-items:center;gap:14px;padding:22px 0 38px}.journey>span{border:1px solid #d0ddf2;padding:20px;border-radius:10px;font-size:11px;background:#f8faff}.journey strong{display:block;font-size:16px;margin-top:5px}.journey i{font-style:normal;text-align:center;color:var(--blue);font-size:24px}.role-detail{max-width:680px;padding:12px 0}.role-detail h3{font-size:21px}.role-detail p{font-size:15px;min-height:52px}.roles.switch{margin-top:0}
/* ─── communications ──────────────────────────────────────────── */
.message-sheet{background:#eaf1fd;padding:36px;border-radius:4px 20px 4px 4px;position:relative;overflow:hidden}.message-sheet .eyebrow{font-size:9px;margin-bottom:32px}.message-mark{display:block;color:#b68120;font-size:68px;line-height:1;margin-bottom:24px}.message-sheet h3{font-size:28px}.message-sheet p{font-size:14px}.sample-cta{padding:11px 0;font-size:13px;display:flex;justify-content:space-between;border-top:1px solid #c0cfe8;color:var(--blue);font-weight:500;margin-top:24px}
.comms-inline{display:flex;justify-content:space-between;gap:18px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}.comms-inline span{font-size:10px;color:var(--muted)}.comms-inline strong{display:block;font-size:30px;line-height:1.3;color:var(--blue)}.comms-inline span:last-child strong{color:#8b6318}
.interest-state{font-size:13px;border-left:2px solid var(--blue);margin:22px 0 10px;padding:12px 15px;min-height:65px}.communication-demo>.reset{margin-left:16px}
/* ─── theme comparison ────────────────────────────────────────── */
.theme-comparison{min-width:0}.theme-sample{padding:28px;background:#edf3fb;color:#12223b;border-radius:18px;border:1px solid #d5e0f2}.theme-brand{font-size:10px;letter-spacing:.1em;display:flex;justify-content:space-between;border-bottom:1px solid #c7d5eb;padding-bottom:18px;margin-bottom:28px}.theme-brand>span{font-size:9px;letter-spacing:0}.theme-sample>p{font-size:8px;letter-spacing:.12em;margin-bottom:12px}.theme-sample h3{font-size:28px}.menu-line{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-top:1px solid #c7d5eb;font-size:12px}.menu-line small{display:block;font-size:10px;color:inherit;opacity:.7}.menu-line strong{white-space:nowrap;font-size:11px}.theme-sample.editorial{background:#f8f5ee;color:#34412f;border-color:#d9dbce;border-radius:2px}.editorial h3{font-family:Georgia,serif;font-weight:400}.editorial .sample-cta{color:#34412f}.theme-sample.bold{background:#fff2df;color:#111;border:2px solid #111;border-radius:0}.bold h3{font-family:Arial,sans-serif;font-weight:700;letter-spacing:-.05em}.bold .sample-cta{background:#111;color:#fff;padding:13px}
/* ─── faq ──────────────────────────────────────────────────────── */
.faq{display:block}.faq-heading{margin-bottom:36px}.faq-heading h2{max-width:560px;font-size:clamp(26px,2.6vw,36px)!important}
.faq-questions{display:grid;grid-template-columns:1fr 1fr;gap:0 52px}
.faq-questions details{border-bottom:1px solid var(--line)}
.faq-questions summary{font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:14px;min-height:27px;padding:17px 0;cursor:pointer}.faq-questions summary::-webkit-details-marker{display:none}.faq-questions summary:after{content:'↓';font-size:16px;color:var(--blue);transition:transform .22s;flex-shrink:0;line-height:1}.faq-questions details[open] summary:after{transform:rotate(180deg)}.faq-questions details p{font-size:14px;margin:4px 0 18px}
@media(max-width:760px){.faq-questions{grid-template-columns:1fr}.faq-heading{margin-bottom:30px}}
/* ─── demo / form ──────────────────────────────────────────────── */
.demo{background:#eef3fd;border-top:1px solid #d2dcea}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px}.demo h2{font-size:33px}.demo-grid>div>p{font-size:15px}.demo-grid>div>p.small{font-size:12px;max-width:320px}
.demo-expect{list-style:none;padding:0;margin:26px 0 0}.demo-expect li{font-size:14px;padding:10px 0;border-top:1px solid #d0ddf0;color:var(--muted);display:flex;gap:13px;align-items:flex-start}.demo-expect li:before{content:'→';color:var(--blue);flex-shrink:0;margin-top:1px}
.form-notice{font-size:11px;border-left:2px solid #a5bce8;padding-left:12px;margin-bottom:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-bottom:22px}label{font-size:11px;font-weight:500;display:block}label>span{font-weight:400;color:var(--muted)}input{display:block;width:100%;margin-top:5px;background:#fff;border:1px solid #c4d0e4;border-radius:6px;min-height:44px;padding:9px 12px;color:var(--ink);font-size:16px;transition:border-color .15s,box-shadow .15s}input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,71,209,.1)}input{scroll-margin-top:110px}#form-result{font-size:13px;margin:16px 0 0}
/* ─── footer ───────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding-block:48px}.footer{display:grid;grid-template-columns:100px 1fr 1fr 1fr;gap:32px;align-items:start}.footer p{font-size:12px;margin:0;line-height:1.8}.footer>div{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:11px}.footer>.small{font-size:10px;text-align:right}.footer-legal{display:flex;flex-direction:column;gap:8px;font-size:11px}.footer-legal a{color:var(--muted);text-decoration:none}.footer-legal a:hover{color:var(--ink)}@media(max-width:760px){.footer{grid-template-columns:1fr 1fr;gap:22px}.footer-legal{flex-direction:row;flex-wrap:wrap;gap:6px 16px}}
/* ─── people section ───────────────────────────────────────────── */
.statement-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:start}.statement-grid h2{margin-bottom:0}.statement-grid p{font-size:16px}
/* ─── responsive 1000px ────────────────────────────────────────── */
@media(min-width:1500px){.wrap{max-width:1270px}.hero{padding-block:100px 110px}}
@media(max-width:1000px){.header nav{gap:16px;font-size:12px}.nav-demo{margin-left:0}.hero{gap:32px}.wrap{padding-inline:24px}.split,.faq,.demo-grid,.statement-grid{gap:48px}.hero h1{font-size:42px}.hero-actions{gap:14px;flex-wrap:wrap}.hero-visual{padding:22px 20px}.map-node strong{font-size:16px}.visit{margin-right:0}.branch{margin-left:24px;padding-left:22px}.branch>.map-node:before{width:22px;left:-22px}.branch>.map-node:last-child:after{left:-23px}.club-demo,.analytics-demo{padding:22px}.stamp{width:50px;height:50px}.stamps{gap:10px}.demo-actions{flex-wrap:wrap}.footer{gap:18px}.section{padding-block:80px}.specimen-head{margin:-22px -22px 22px;padding:10px 18px}}
@media(max-width:760px){html{scroll-padding-top:80px}.wrap{padding-inline:22px}.header{height:70px}.logo{width:85px}.menu-toggle{display:flex;gap:18px;align-items:center;background:none;border:0;padding:10px 0;min-height:44px;font-size:13px}.menu-toggle span{font-size:21px}.header nav{display:none;position:absolute;left:0;right:0;top:70px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:18px 22px;align-items:stretch;gap:0}.header nav.open{display:flex;flex-direction:column}.header nav a{font-size:15px;padding-block:12px}.nav-demo{margin-top:8px;align-self:start}.hero{grid-template-columns:1fr;gap:44px;padding-block:46px 60px}.hero h1{font-size:42px;letter-spacing:-.025em}.hero-copy>p{font-size:16px;max-width:none}.hero-actions{margin-block:24px}.hero-sub{margin-top:6px}.hero-visual{max-width:460px;width:100%;justify-self:center;padding:24px}.orbit-map{padding-top:28px}.map-node strong{font-size:18px}.visit{margin-right:12px}.branch{margin-left:28px;padding-left:24px}.branch>.map-node:before{width:24px;left:-24px}.branch>.map-node:last-child:after{left:-25px}.section{padding-block:60px}.split,.faq,.demo-grid,.statement-grid{grid-template-columns:1fr;gap:36px}.section-heading{margin-bottom:32px}.section-copy{max-width:none}.topic-list>a{grid-template-columns:24px 1fr 24px;gap:12px;padding-block:22px}.topic-list h3{font-size:21px}.topic-list p{font-size:12px}.communications-teaser>.section-copy{grid-row:1}.message-sheet{padding:28px}.message-sheet h3{font-size:26px}.theme-sample{padding:24px}.faq{gap:18px}.demo h2{font-size:28px}.form-grid{gap:16px 12px}.footer{grid-template-columns:1fr 1fr;gap:22px}.footer>.small{text-align:left}.operation{padding:22px}.journey{grid-template-columns:1fr;gap:8px;padding:0 0 22px}.journey>span{padding:16px}.journey i{transform:rotate(90deg);font-size:20px;height:28px}.journey strong{font-size:16px}.role-detail p{min-height:0}.switch{gap:12px}.caption{font-size:11px}.comms-inline strong{font-size:26px}.operation .specimen-head{margin:-22px -22px 22px;padding:10px 18px}.cta-mid{padding-block:40px}.noapp-note{font-size:13px}.pp-row{gap:8px}}
@media(max-width:360px){.wrap{padding-inline:18px}.hero h1{font-size:32px}.hero-visual{padding:20px 16px}.hero-actions{gap:8px}.hero-actions .button{font-size:12px;padding-inline:14px}.club-demo,.analytics-demo{padding:18px}.stamp{width:44px;height:44px}.stamps{gap:8px}.switch{gap:10px}.switch button{font-size:10px}.form-grid{grid-template-columns:1fr}.metric-set>div{padding-left:10px}.metric-set strong{font-size:26px}.specimen-head{margin:-18px -18px 18px;padding:8px 14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* ─── inline detail / product detail ──────────────────────────── */
.inline-detail{border-top:1px solid var(--line);margin-top:22px;padding-top:14px}.inline-detail summary,.product-detail>summary{font-size:13px;color:var(--blue);min-height:44px;padding-block:10px}.inline-detail p{font-size:13px;margin:14px 0}.product-detail{margin-top:22px}.product-detail .product-shot{padding:10px}.product-detail .switch{gap:16px}.product-shot{margin:0;padding:16px;background:#e9eef6;border:1px solid var(--line);border-radius:12px}.product-shot img{display:block;width:100%;height:auto;border-radius:5px}.product-shot figcaption{font-size:11px;line-height:1.65;margin-top:14px;color:var(--muted)}.product-detail .product-shot img{max-height:680px;object-fit:contain;object-position:top;background:#242728}.product-detail .product-shot figcaption{padding-inline:6px}.product-shot .switch{padding:0 10px;margin-bottom:14px}
/* ─── formats ─────────────────────────────────────────────────── */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;align-items:start}.formats article{display:grid;grid-template-rows:190px auto auto}.format-shape{border:1px solid #9bb7ed;background:#edf3fd;display:grid;place-items:center;color:var(--blue);font-size:14px;border-radius:8px;align-self:center;justify-self:start}.format-shape.popup{width:180px;aspect-ratio:4/3}.format-shape.immersive{height:165px;aspect-ratio:9/16}.format-shape.banner{width:190px;aspect-ratio:3/2}.formats h3{font-size:21px;margin-top:22px}.formats p{font-size:13px}
@media(max-width:760px){.formats{grid-template-columns:1fr;gap:28px}.formats article{grid-template-columns:100px 1fr;grid-template-rows:auto auto;gap:0 20px}.format-shape{grid-row:1/3;max-width:100px!important;max-height:135px}.formats h3{margin-top:18px}.formats p{font-size:12px}}
/* ─── CTA intermedio — cobalt, asertivo ───────────────────────── */
.cta-mid{padding-block:56px;background:var(--blue)}
.cta-mid-inner{display:flex;align-items:center;justify-content:space-between;gap:36px}
.cta-mid-inner>p{font-size:22px;font-weight:500;color:#fff;margin:0;max-width:560px;letter-spacing:-.02em}
.cta-mid .button{background:#fff;color:var(--blue);border-color:rgba(255,255,255,.6)}.cta-mid .button:hover{background:#f0f5ff}
@media(max-width:760px){.cta-mid-inner{flex-direction:column;align-items:flex-start;gap:22px}.cta-mid-inner>p{font-size:18px}}

/* ─── Fondos seccionales con identidad propia ─────────────────── */
/* Club: cálido / ámbar — el corazón de la propuesta de loyaltad */
section#club{background:#fef6e4}
section#club .inline-detail{border-color:rgba(180,130,20,.2)}
/* Analytics: cobalt oscuro — precisión, datos, profundidad */
section#analisis{background:linear-gradient(155deg,#152848 0%,#1e3d90 100%)}
section#analisis h2{color:#fff}
section#analisis .section-copy>p{color:#c8d5ed}
section#analisis .section-copy .small{color:#8aaac8}
section#analisis .section-copy>.eyebrow{color:#b9cdf8}
section#analisis .section-copy>.eyebrow::before{background:var(--amber)}
section#analisis .character-analyst{filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));float:none;display:none}
section#analisis .inline-detail>summary{color:#9ab8d8}
section#analisis .product-detail>summary{color:#9ab8d8}
section#analisis .product-shot{background:#0e2040;border-color:#243d60}
section#analisis .product-shot figcaption{color:#7a9ec0}
section#analisis .analytics-demo{border-color:#d8e4f4}
section#analisis .analytics-demo .chart-insight{color:var(--muted)}
/* product-shot en fondo oscuro: switch y textos legibles */
section#analisis .product-shot .switch{border-color:rgba(200,220,255,.2)}
section#analisis .product-shot .switch button{color:#8aaac8}
section#analisis .product-shot .switch button[aria-pressed=true]{color:#c5daf0;border-bottom-color:#c5daf0}
section#analisis .product-shot figcaption{color:#7a9ec0;padding-inline:6px}

/* ─── No-app callout (Experiencia) ────────────────────────────── */
.noapp-note{font-size:14px;color:#c8d5ed;border-left:2px solid rgba(185,205,248,.45);padding-left:14px;margin-top:18px;line-height:1.7}.noapp-note strong{color:#fff}

/* ─── Stakeholders (Experiencia) ──────────────────────────────── */
.stakeholders-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;margin-top:32px}
.stakeholder{padding:26px;border-right:1px solid rgba(255,255,255,.1)}.stakeholder:last-child{border-right:none}
.stakeholder .eyebrow{color:#b9cdf8;margin-bottom:10px;font-size:9px}
.stakeholder p{font-size:13px;color:#c8d5ed;margin:0;line-height:1.7}
@media(max-width:760px){.stakeholders-row{grid-template-columns:1fr}.stakeholder{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}.stakeholder:last-child{border-bottom:none}.stakeholder{padding:20px}}

/* ─── Diamante geométrico en el hero — motivo de marca ────────── */
/* Dos rombos flotantes encima del panel: uno ámbar, uno azul outline */
.hero-visual{overflow:visible}
.hero-visual::before{content:'';position:absolute;top:-16px;right:52px;width:32px;height:32px;border:1.5px solid rgba(240,169,44,.55);border-radius:4px;transform:rotate(45deg);pointer-events:none;z-index:0}
.hero-visual::after{content:'';position:absolute;top:-6px;right:30px;width:16px;height:16px;background:rgba(240,169,44,.25);border-radius:2px;transform:rotate(45deg);pointer-events:none;z-index:0}
/* Diamante ámbar pequeño antes de los eyebrows de módulo */
.section-copy>.eyebrow::before,.section-heading>.eyebrow::before{content:'';display:inline-block;width:5px;height:5px;background:var(--amber);border-radius:1px;transform:rotate(45deg);margin-right:9px;vertical-align:2px}

/* ─── product preview (hero) ──────────────────────────────────── */
.product-preview{display:grid;gap:10px;padding-top:14px}
/* pp-club: cálido/ámbar — el Club es el corazón de la propuesta */
.pp-card{background:#fff;border:1px solid #d4dff2;border-radius:14px;padding:18px}
.pp-club{background:#fef8ec;border-color:#e8c46a}
.pp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pp-brand{font-size:9px;letter-spacing:.13em;color:#4e6386;font-weight:500}
.pp-badge{font-size:9px;color:#7a5100;background:#fdecc5;padding:2px 9px;border-radius:10px;border:1px solid #e8c46a}
.pp-stamps{display:flex;gap:8px;margin-bottom:12px}
.pps{width:42px;height:42px;border-radius:10px;font-size:11px;display:grid;place-items:center;border:1px dashed #b5c8eb;color:#8aa0c2;background:#f8faff;transform:rotate(-6deg)}
.pps--done{background:#dfe9fc;border-style:solid;border-color:#9bb9f1;color:var(--blue)}.pps--done:nth-child(2){background:#cbdcfb;transform:rotate(-3deg)}.pps--done:nth-child(3){background:#b6cef8;transform:rotate(-7deg)}
.pp-status{font-size:12px;color:var(--muted);margin:0}.pp-status strong{color:var(--ink);font-weight:500}
.pp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp-metric{display:flex;flex-direction:column;gap:5px}
.pp-number{font-size:30px;font-weight:500;color:var(--blue);letter-spacing:-.04em;line-height:1;display:block}.pp-number small{font-size:17px}
.pp-label{font-size:11px;color:var(--muted);line-height:1.5}
.pp-metric--amber .pp-number{color:#9a6b10}
@media(max-width:1000px){.pp-number{font-size:26px}}
@media(max-width:760px){.pp-number{font-size:28px}}

/* ─── module grid ──────────────────────────────────────────────── */
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:0}
.module-card{background:#fff;padding:36px;display:flex;flex-direction:column;gap:8px;text-decoration:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .18s;min-height:200px}
.module-card:nth-child(2),.module-card:nth-child(4){border-right:0}
.module-card:nth-child(3),.module-card:nth-child(4){border-bottom:0}
.module-card:hover{background:#f7f9fd}
.module-num{font-size:10px;color:var(--blue);letter-spacing:.12em;font-weight:500}
.module-card h3{font-size:22px;margin:6px 0 0;color:var(--ink)}
.module-card p{font-size:14px;margin:0;color:var(--muted);flex:1;line-height:1.7}
.module-card>span:last-child{font-size:22px;color:var(--blue);margin-top:10px}
@media(max-width:760px){.module-grid{border-radius:14px;grid-template-columns:1fr}.module-card:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.module-card:nth-child(3){border-bottom:1px solid var(--line)}.module-card:nth-child(4){border-bottom:0}.module-card{padding:26px;min-height:0}.module-card h3{font-size:20px}}

/* ─── reading progress ────────────────────────────────────────── */
.reading-progress{position:absolute;top:0;left:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;pointer-events:none}
/* ─── motion toggle ───────────────────────────────────────────── */
.motion-tools{display:flex;gap:18px;align-items:center;justify-content:flex-end;margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}.motion-toggle{font-size:11px;min-height:44px;background:none;color:var(--blue);border:0;padding:10px 0;text-decoration:underline;text-underline-offset:5px}.motion-tools>span{font-size:10px;color:var(--muted)}
.replay{display:flex;gap:16px;align-items:center;font-size:10px;padding:10px 0 0;min-height:38px;border:0;color:var(--blue);background:transparent;margin-top:4px}.replay span{font-size:18px;line-height:1}.replay:hover{text-decoration:underline;text-underline-offset:4px}
/* ─── Logo en color; fondo retirado en el SVG de presentación ─── */
/* ─── people grid ─────────────────────────────────────────────── */
:root{--blue:#2e47d1;--amber:#f0a92c;--motion-ease:cubic-bezier(.22,1,.36,1)}
.people-heading{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:26px}.people-heading h2{margin-bottom:0}.people-heading>p{font-size:15px;max-width:400px;margin-bottom:0}
.people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}.person{margin:0;min-width:0}.person>svg{display:block;width:100%;height:auto;aspect-ratio:1;overflow:hidden;background:white}
.person figcaption{padding:10px 18px 0;border-top:1px solid var(--line)}.person-number{font-size:9px;letter-spacing:.12em;color:var(--blue);display:block;margin:11px 0}.person h3{font-size:20px;margin:0 0 8px}.person p{font-size:13px;margin:0;max-width:280px}
.people-section>.wrap>.caption{font-size:10px;margin-top:28px}
/* ─── reward / message ────────────────────────────────────────── */
.reward-symbol svg{display:block;width:52px;height:52px}.message-mark svg{display:block;width:72px;height:72px}
/* ─── hover motion ────────────────────────────────────────────── */
.bar-fill{transform-origin:left center}.reward-symbol{transform-origin:center}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.topic-list>a>span:last-child,.button>span{transition:transform 180ms var(--motion-ease)}.topic-list>a:hover>span:last-child,.button:hover>span{transform:translate(3px,-3px)}.person>svg{transition:transform 280ms var(--motion-ease)}.person:hover>svg{transform:translateY(-4px)}}
html[data-motion=off] *{scroll-behavior:auto!important;animation:none!important;transition:none!important}html[data-motion=off] .person:hover>svg,html[data-motion=off] .button:hover>span,html[data-motion=off] .topic-list>a:hover>span:last-child{transform:none}
@media(max-width:760px){.people-heading{grid-template-columns:1fr;gap:14px}.people-heading h2{font-size:28px}.people-heading>p{font-size:14px}.people-grid{gap:10px;margin-inline:-6px}.person figcaption{padding:8px 4px 0}.person-number{font-size:8px}.person h3{font-size:16px;line-height:1.3;letter-spacing:-.03em}.person p{font-size:11px;line-height:1.6}.motion-tools{justify-content:flex-start;flex-wrap:wrap;gap:5px 18px}.motion-tools>span{font-size:9px}.replay{font-size:10px}.message-mark svg{width:62px;height:62px}}
/* ─── personas mobile ─────────────────────────────────────────── */
@media(max-width:760px){.hero-actions{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px;margin-block:20px 6px}.hero-actions .button{font-size:12px;padding:12px;gap:12px;white-space:nowrap}.hero-actions .button span{font-size:16px}.hero-actions .text-link{font-size:11px;gap:9px;justify-content:center;min-width:0}.people-grid{grid-template-columns:1fr;gap:20px;margin-inline:0}.person{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center}.person figcaption{padding:0;border:0}.person-number{font-size:9px;margin:0 0 7px}.person h3{font-size:18px;margin-bottom:7px}.person p{font-size:12px;line-height:1.65}}
@media(max-width:360px){.person{grid-template-columns:100px minmax(0,1fr);gap:13px}.person h3{font-size:17px}.hero-actions .button{font-size:11px;padding-inline:10px}.hero-actions .text-link{font-size:10px}}
/* ─── personajes en section-copy: integración y animación ─────── */
/* Float derecho que cruza hacia la zona del demo card.            */
/* El margen negativo derecho (la mitad del gap 88px) hace que el  */
/* personaje "se asoma" entre la columna de texto y el demo.       */
.section-copy .character-analyst,
.section-copy .character-reward{
  float:right;
  clear:none;
  width:240px;
  margin:0 -44px 20px 22px;
  position:relative;
  z-index:2;
  /* Parallax scroll vía JS → --px */
  transform:translateY(var(--px, 0px));
  will-change:transform;
  /* Sombra que sigue la silueta real (alpha-aware) */
  filter:drop-shadow(0 16px 32px rgba(18,43,77,.13));
}
/* Ocultar figcaption: ilustración pura, sin texto flotante */
.section-copy .character-analyst figcaption,
.section-copy .character-reward figcaption{display:none}
/* Clearfix para contener floats */
.section-copy:after{content:'';display:table;clear:both}
@media(max-width:1000px){
  .section-copy .character-analyst,
  .section-copy .character-reward{width:210px;margin-right:-16px}
}
@media(max-width:760px){
  .section-copy .character-analyst,
  .section-copy .character-reward{float:none;display:block;width:155px;margin:18px auto 22px;filter:none;transform:none}
}

/* ─── personajes (alpha real, sin placa) ──────────────────────── */
.character{margin:22px 0 0;min-width:0;width:230px;max-width:100%;background:transparent;border-radius:0}.character>svg{display:block;width:100%;height:auto;aspect-ratio:320/285;overflow:hidden}.character figcaption{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:0 6px 4px}.character figcaption>span{font-size:10px;line-height:1.6;color:var(--muted);max-width:150px}.character button{display:none}
.character-section{margin-top:22px;margin-inline:auto}
/* ─── hero visual (sobrescritura final) ───────────────────────── */
.hero-visual{background:#f3f6fd;border:1px solid #d8e3f2;border-radius:20px}
.hero-human{display:grid;grid-template-columns:1fr 165px;align-items:center;gap:12px;margin-top:-14px;margin-bottom:-12px}.hero-human .visual-label{max-width:155px;line-height:1.8;align-items:flex-start}.hero-human .dot{margin-top:5px;flex-shrink:0}
.character-hero{margin:0;width:165px}.character-hero figcaption{justify-content:flex-end;padding-right:18px}.character-hero figcaption>span{display:none}.hero-visual .orbit-map{padding-top:14px}.branch>.map-node:last-child:after{background:#f3f6fd}
/* ─── experience heading ──────────────────────────────────────── */
.experience-heading{display:grid;grid-template-columns:1fr 220px;gap:60px;align-items:end;margin-bottom:10px}.experience-heading .section-heading{margin-bottom:0}
/* Chef: desciende más allá del heading para pisar la tarjeta desde el margen del personaje.
   El margen negativo no afecta el layout del heading (no tira la tarjeta hacia arriba). */
.character-operation{position:relative;z-index:3;margin-bottom:-95px}
/* Figcaption del chef oculto: el personaje habla por sí solo */
.character-operation figcaption{display:none}
/* Mobile: el chef pasa a bloque centrado con overlap suave (la grilla no funciona sin figcaption) */
@media(max-width:760px){
  .experience-heading .character-operation{display:block;width:150px;margin-bottom:-28px;margin-inline:auto;padding:0}
}
@media(max-width:360px){
  .experience-heading .character-operation{width:130px;margin-bottom:-20px}
}
.character-operation{margin:0;width:220px;padding:10px 8px 4px;border-radius:13px}.character-message{margin:0 0 14px;width:240px}.character-message figcaption{justify-content:flex-end}.character-message figcaption>span{display:none}
/* ─── character animation ─────────────────────────────────────── */
.character [class^=char-]{transform-box:view-box;animation-play-state:paused}.char-breathe{animation:character-breathe 4s ease-in-out infinite paused;transform-origin:50% 92%}html[data-motion=on] .character.is-moving [class^=char-]{animation-play-state:running}
/* Breathe: torso que se expande y eleva, con leve scaleY para simular cuerpo real */
@keyframes character-breathe{
  0%,100%{transform:translateY(0) scaleY(1)}
  25%{transform:translateY(-4px) scaleY(1.01)}
  55%{transform:translateY(-10px) scaleY(1.02)}
  80%{transform:translateY(-5px) scaleY(1.01)}
}
.char-art{animation:character-sway 5s ease-in-out infinite paused;transform-box:view-box;transform-origin:50% 95%}
/* Sway: cambio de peso con componente horizontal — no solo rotación sino traslado lateral */
@keyframes character-sway{
  0%   {transform:rotate(-2deg) translateX(-3px)}
  22%  {transform:rotate(0.2deg) translateX(0px)}
  50%  {transform:rotate(1.8deg) translateX(3px)}
  78%  {transform:rotate(0.4deg) translateX(1px)}
  100% {transform:rotate(-2deg) translateX(-3px)}
}
/* Timing distinto por personaje → cada uno se siente como individuo */
.character-chef    .char-breathe{animation-duration:5.5s}
.character-chef    .char-art    {animation-duration:7s}   /* Chef: calmo, profesional */
.character-analyst .char-breathe{animation-duration:3.6s}
.character-analyst .char-art    {animation-duration:4.8s} /* Analista: concentrada, alerta */
.character-reward  .char-breathe{animation-duration:3s}
.character-reward  .char-art    {animation-duration:4.2s} /* Barista: energía de servicio */
.character-welcome .char-breathe{animation-duration:4.5s}
.character-welcome .char-art    {animation-duration:6s}   /* Bienvenida: cálida y serena */
@media(max-width:1000px){.experience-heading{grid-template-columns:1fr 180px;gap:32px}.character-operation{width:180px}.hero-human{grid-template-columns:1fr 145px}.character-hero{width:145px}.hero-human .visual-label{font-size:8px}}
@media(max-width:760px){.hero-human{grid-template-columns:1fr 138px;margin-top:-8px;margin-bottom:-4px}.character-hero{width:138px}.hero-human .visual-label{font-size:8px;max-width:115px}.character-hero figcaption{padding-right:7px}.hero-visual .orbit-map{padding-top:14px}.character-section{display:grid;grid-template-columns:135px 1fr;gap:14px;align-items:center;width:100%;margin-top:20px;border-top:1px solid var(--line);padding-top:10px}.character-section figcaption{flex-direction:column;align-items:flex-start;gap:2px;padding:0}.character-section figcaption>span{font-size:11px;max-width:155px}.experience-heading{grid-template-columns:1fr;gap:24px;margin-bottom:26px}.character-operation{display:grid;grid-template-columns:145px 1fr;gap:14px;width:100%;padding:4px 12px}.character-operation figcaption{flex-direction:column;align-items:flex-start;padding:0}.character-operation figcaption>span{font-size:11px}.character-message{width:185px;margin-inline:auto;margin-bottom:14px}.character-message button{font-size:10px}}
@media(max-width:360px){.hero-human{grid-template-columns:1fr 120px;gap:5px}.character-hero{width:120px}.character-section{grid-template-columns:115px 1fr;gap:10px}.character-operation{grid-template-columns:125px 1fr;gap:10px;padding-inline:8px}}
/* ─── sin placa (ilustraciones con alfa) ─────────────────────── */
.character,.person>svg,.character-operation,.character-message{background:transparent;border:0;border-radius:0;box-shadow:none}.character>svg{aspect-ratio:1;overflow:hidden}.character-operation{padding:0}.navy .character-operation figcaption>span{color:#d5e0f4}.navy .character-operation button{color:#c5d6ff;border-color:#7e96bf}
/* ─── communications section layout ──────────────────────────── */
.communications-teaser{gap:48px}.section.wrap.split.communications-teaser{padding-bottom:60px;padding-top:70px}@media(max-width:760px){.communications-teaser .communication-demo{grid-row:2}.communications-teaser>.section-copy{grid-row:1}}

/* ─── páginas legales ─────────────────────────────────────────── */
.legal-wrap h1{font-size:clamp(28px,3.2vw,44px)!important;letter-spacing:-.025em!important;margin-bottom:8px!important;line-height:1.1!important}
.legal-wrap h2{font-size:17px!important;margin-top:38px!important;margin-bottom:11px!important;letter-spacing:-.01em!important;color:var(--ink)!important;font-weight:500!important}
.legal-breadcrumb{font-size:11px;color:var(--muted);margin-bottom:24px;letter-spacing:.01em}
.legal-breadcrumb a{color:var(--muted);text-decoration:none}.legal-breadcrumb a:hover{color:var(--ink)}
.legal-breadcrumb span{color:var(--ink);font-weight:500}
.legal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:44px!important;border-bottom:none!important;padding-bottom:0!important}
.legal-nav a{font-size:12px;color:var(--blue);text-decoration:none;padding:6px 14px;border:1px solid #d0dcf0;border-radius:20px;background:#fff;transition:background .15s,border-color .15s;white-space:nowrap}
.legal-nav a:hover{background:#eef2ff;border-color:var(--blue)}
.legal-nav a[aria-current]{background:#eef2ff;border-color:var(--blue);font-weight:500}
.legal-body{max-width:700px}
.legal-meta{font-size:12px;color:var(--muted);margin-bottom:44px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.legal-body p,.legal-body li{font-size:15px;line-height:1.85;color:#3a4d62}
.legal-body ul,.legal-body ol{padding-left:20px;margin-bottom:20px}
.legal-body li{margin-bottom:8px}
.legal-body table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.legal-body th{text-align:left;padding:9px 14px;background:var(--soft);border-bottom:1px solid var(--line);font-weight:500;font-size:10px;letter-spacing:.07em;color:var(--muted)}
.legal-body td{padding:10px 14px;border-bottom:1px solid var(--line);color:#3a4d62;vertical-align:top;line-height:1.6}
.legal-body tr:last-child td{border-bottom:none}
.legal-body a{color:var(--blue)}
.legal-wrap .section{padding-top:52px!important}
@media(max-width:760px){.legal-wrap h1{font-size:26px!important}.legal-wrap h2{font-size:15px!important}.legal-body table{font-size:12px}.legal-body th,.legal-body td{padding:8px 10px}.legal-nav a{font-size:11px;padding:5px 11px}}

/* ─── feature cards (estilo aqryl) ────────────────────────────── */
.fc-section{background:#f0f4fb}
.fc-heading{max-width:560px;margin-bottom:52px}
.fc-heading h2{margin-bottom:12px}
.fc-heading p{font-size:16px}
.fc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Card base */
.fc-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e0e8f4;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
.fc-card:hover{border-color:#b8cdf0;box-shadow:0 4px 24px rgba(18,43,77,.08)}

/* Visual area — gran área superior del card */
.fc-visual{background:#eef2f9;padding:28px 22px;min-height:180px;display:flex;align-items:center;justify-content:center;position:relative}
.fc-visual--dark{background:linear-gradient(135deg,#152848,#1e3d90)}
.fc-visual--warm{background:#fef6e4}

/* Stamps preview (Club) */
.fc-stamps-preview{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.fc-stamps-row{display:flex;gap:6px;justify-content:center}
.fc-stamp{width:36px;height:36px;border-radius:8px;font-size:11px;display:grid;place-items:center;border:1px dashed #b5c8eb;color:#8aa0c2;background:#f8faff;transform:rotate(-5deg)}
.fc-done{background:#dfe9fc;border-style:solid;border-color:#9bb9f1;color:var(--blue)}
.fc-done:nth-child(2){transform:rotate(-2deg);background:#cbdcfb}
.fc-done:nth-child(3){transform:rotate(-7deg);background:#b6cef8}
.fc-progress{font-size:11px;color:var(--muted);margin:10px 0 0;text-align:center;width:100%}

/* Metric preview (Analytics) */
.fc-metric-preview{width:100%;display:flex;flex-direction:column;gap:8px}
.fc-metric-label{font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.fc-metric-val{font-size:18px;font-weight:500;color:#fff;letter-spacing:-.02em}
.fc-amber{color:#f0a92c!important}
.fc-metric-row{display:flex;justify-content:space-between;align-items:center}
.fc-metric-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:2px}
.fc-bar-new{background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff}
.fc-bar-ret{background:#0a1a3a;display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,.7)}

/* Journey preview (Experiencia) */
.fc-journey-preview{display:flex;align-items:center;gap:8px;width:100%;justify-content:center}
.fc-step{display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--muted);background:#f0f4f9;border:1px solid #d8e3f2;border-radius:8px;padding:10px 10px;gap:4px;text-align:center;flex:1}
.fc-step strong{font-size:13px;font-weight:500;color:var(--ink);display:block}
.fc-arrow{font-size:16px;color:var(--blue);flex-shrink:0}

/* Comms preview (Comunicaciones) */
.fc-comms-preview{width:100%;display:flex;flex-direction:column;gap:8px}
.fc-comms-label{font-size:9px;letter-spacing:.12em;color:#9a7510}
.fc-comms-title{font-size:15px;font-weight:500;color:#5a3a00;margin:0;line-height:1.35}
.fc-comms-metrics{display:flex;gap:12px;margin-top:4px}
.fc-comms-metrics span{font-size:11px;color:#9a7510}.fc-comms-metrics strong{color:#5a3a00;font-weight:500}

/* Card body */
.fc-body{padding:22px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.fc-body h3{font-size:16px;font-weight:500;color:var(--ink);margin:0;letter-spacing:-.015em}
.fc-body>p{font-size:13px;color:var(--muted);margin:0;line-height:1.65}
.fc-fns{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.fc-fns li{font-size:12px;color:var(--muted);padding-left:14px;position:relative;line-height:1.5}
.fc-fns li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:1px;background:var(--blue)}
.fc-link{font-size:12px;color:var(--blue);margin-top:auto;padding-top:14px;font-weight:500}
.fc-card:hover .fc-link{text-decoration:underline;text-underline-offset:4px}

/* Responsive */
@media(max-width:1100px){.fc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.fc-grid{grid-template-columns:1fr;gap:12px}.fc-visual{min-height:140px}.fc-heading{margin-bottom:32px}.fc-body{padding:18px 16px}.fc-section{padding-block:60px!important}}
@media(max-width:360px){.fc-grid{gap:10px}}

/* ─── feature card: formatos de comunicación ──────────────────── */
.fc-formats-preview{display:flex;gap:10px;align-items:flex-end;width:100%;justify-content:center;padding-bottom:4px}
.fc-fmt{display:flex;flex-direction:column;justify-content:space-between;border:1.5px solid #c8d8f0;border-radius:8px;background:#fff;overflow:hidden;padding:10px 8px}
.fc-fmt--popup{width:90px;aspect-ratio:4/3;flex-shrink:0}
.fc-fmt--immersive{width:58px;aspect-ratio:9/16;flex-shrink:0}
.fc-fmt--banner{width:110px;aspect-ratio:3/2;flex-shrink:0}
.fc-fmt-label{font-size:9px;color:var(--blue);letter-spacing:.05em;font-weight:500;line-height:1.4}
.fc-fmt-metric{display:flex;flex-direction:column;align-items:flex-end}
.fc-fmt-metric strong{font-size:14px;font-weight:500;color:var(--ink);line-height:1}
.fc-fmt-metric span{font-size:9px;color:var(--muted);letter-spacing:.03em}

/* ─── feature card: temas visuales (wide card) ────────────────── */
.fc-card--wide{grid-column:span 1}
.fc-visual--themes{background:#f7f9fd;align-items:stretch;padding:20px 16px}
.fc-themes-preview{display:flex;gap:8px;width:100%;align-items:stretch}

/* Mini card de tema */
.fc-theme{display:flex;flex-direction:column;gap:6px;border-radius:10px;padding:12px 10px;flex:1;position:relative;overflow:hidden}
.fc-theme--modern{background:#edf3fb;color:#12223b;border:1px solid #d5e0f2}
.fc-theme--editorial{background:#f8f5ee;color:#34412f;border:1px solid #d9dbce;border-radius:2px}
.fc-theme--bold{background:#fff2df;color:#111;border:2px solid #111;border-radius:0}
.fc-theme-brand{font-size:8px;letter-spacing:.1em;font-weight:500;opacity:.7}
.fc-theme-title{font-size:12px;font-weight:500;line-height:1.3;margin:0}
.fc-theme--editorial .fc-theme-title{font-family:Georgia,serif;font-weight:400}
.fc-theme--bold .fc-theme-title{font-family:Arial,sans-serif;font-weight:700;letter-spacing:-.03em}
.fc-theme-item{display:flex;justify-content:space-between;align-items:center;font-size:9px;padding:5px 0;border-top:1px solid rgba(0,0,0,.1);margin-top:2px}
.fc-theme--modern .fc-theme-item{border-color:#c7d5eb}
.fc-theme--editorial .fc-theme-item{border-color:#c5c9bb}
.fc-theme-item strong{font-size:9px;font-weight:500}
.fc-theme-cta{font-size:9px;color:var(--blue);font-weight:500;margin-top:auto;padding-top:6px}
.fc-theme--bold .fc-theme-cta{color:#111;border-top:1px solid #111;display:block}
.fc-theme-name{position:absolute;bottom:6px;right:8px;font-size:8px;letter-spacing:.06em;opacity:.45}

/* ─── grid con 5 cards: última fila centrada ──────────────────── */
.fc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* En desktop: 4 + 1 → la 5ta ocupa 1 col del centro, usamos subgrid trick */
/* Mejor: dejar que el 5to card sea más ancho */
.fc-card--wide{grid-column:span 1}

@media(min-width:1101px){
  /* 5 cards: primera fila 4, segunda fila 1 centrada → usar grid 4 cols con el 5to centrado */
  .fc-grid{grid-template-columns:repeat(4,1fr)}
  .fc-card--wide{grid-column:2/4;min-height:0}
}
@media(max-width:1100px){
  .fc-grid{grid-template-columns:repeat(2,1fr)}
  .fc-card--wide{grid-column:span 2}
  .fc-themes-preview{gap:6px}
  .fc-theme-title{font-size:11px}
}
@media(max-width:760px){
  .fc-grid{grid-template-columns:1fr}
  .fc-card--wide{grid-column:span 1}
  .fc-themes-preview{gap:5px}
  .fc-fmt--popup{width:70px}
  .fc-fmt--immersive{width:46px}
  .fc-fmt--banner{width:86px}
}

/* ─── theme showcase interactivo ──────────────────────────────── */
.fc-themes-card{cursor:default}
.fc-visual--themes{flex-direction:column;align-items:stretch;padding:16px 14px 12px;gap:10px}

/* Tabs de nombres */
.fc-themes-tabs{display:flex;flex-wrap:wrap;gap:4px}
.fc-themes-tabs button{background:none;border:1px solid transparent;border-radius:20px;font-size:10px;padding:4px 10px;color:var(--muted);min-height:28px;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s}
.fc-themes-tabs button[aria-pressed=true]{background:#fff;border-color:#c8d8f0;color:var(--blue);font-weight:500}
.fc-themes-tabs button:hover:not([aria-pressed=true]){color:var(--ink)}

/* Trio de previews */
.fct-trio{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:8px;align-items:center}
.fct-card{padding:12px 10px;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;transition:opacity .25s}
.fct-brand{font-size:7px;letter-spacing:.1em;font-weight:600;opacity:.6}
.fct-title{font-size:12px;line-height:1.3;margin:0}
.fct-item{display:flex;justify-content:space-between;font-size:9px;padding:5px 0;border-top-width:1px;border-top-style:solid;margin-top:2px}
.fct-item strong{font-weight:500;font-size:9px}
.fct-cta{font-size:9px;margin-top:auto}
.fct-name{position:absolute;bottom:5px;right:7px;font-size:7px;letter-spacing:.05em}

/* Descripción del tema */
.fct-desc{font-size:10px;color:var(--muted);margin:0;text-align:center;letter-spacing:.02em}

@media(max-width:760px){
  .fct-trio{grid-template-columns:1fr 1.1fr 1fr;gap:5px}
  .fct-title{font-size:11px}
  .fc-themes-tabs button{font-size:9px;padding:3px 8px}
}