@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wdth,wght@75..100,400..700&family=Instrument+Serif:ital@0;1&display=swap');
/* Hero "costa" de wehost.you · referencia de diseño 1440×960; --u escala todo a una pantalla. */
.coast{--u:min(calc(100vw / 1440),calc(100svh / 960));--ink:#151615;--soft:#696C64;--mute:#C3C4C1;--coral:#FE8A70;--cta:#FA7F62;--neg:#E5714D;--dark:#2C3426;--chip:#EFF2E9;--paper:#FAF9F5;--ground:#F8E6DD;margin:0;background:var(--paper);color:var(--ink);font-family:'Instrument Sans',Arial,sans-serif;font-stretch:95%;-webkit-font-smoothing:antialiased}
.coast em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-stretch:100%}
.coast-page{display:flex;width:100%;height:100svh;min-height:560px;overflow:hidden}
.coast-panel{position:relative;flex:0 0 46%;margin:0;border-radius:0;overflow:hidden;isolation:isolate;background:#d9a46a}
.coast-photo,.coast-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.coast-video{opacity:0;transition:opacity .8s ease}.coast-video.ready{opacity:1}
.coast-dust{position:absolute;left:0;right:0;top:3%;width:100%;height:24%;fill:#fff;opacity:.75;pointer-events:none}
.coast-cards{position:absolute;inset:0;pointer-events:none}
.card{position:absolute;border-radius:calc(22 * var(--u));box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) #2b1a0e33,0 calc(4 * var(--u)) calc(12 * var(--u)) #2b1a0e1f}
.card-coral{left:calc(46 * var(--u));top:calc(86 * var(--u));width:calc(278 * var(--u));padding:calc(22 * var(--u));background:var(--coral);color:var(--ink);z-index:2}
.card-label{margin:0;font-size:max(8px,calc(11 * var(--u)));letter-spacing:.12em;font-weight:600}
.card-amount{margin:calc(10 * var(--u)) 0 calc(14 * var(--u));font-size:calc(36 * var(--u));font-weight:600;letter-spacing:-.03em}
.card-row{display:flex;align-items:center;justify-content:space-between}
.chip{display:inline-block;border-radius:99px;padding:calc(5 * var(--u)) calc(11 * var(--u));font-size:max(9px,calc(12 * var(--u)));font-weight:600}
.chip-white{background:#fff}.chip-neg{background:var(--chip);color:var(--neg)}
.dot{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:var(--ink)}
.card-link{margin:calc(16 * var(--u)) 0 0;font-size:max(8px,calc(11 * var(--u)));letter-spacing:.12em;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.card-glass{left:calc(300 * var(--u));top:calc(226 * var(--u));width:calc(326 * var(--u));padding:calc(16 * var(--u));background:#ffffff38;border:1px solid #ffffff70;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);color:#fff;z-index:1}
.glass-row{display:flex;align-items:center;justify-content:space-between;padding:calc(11 * var(--u)) calc(4 * var(--u));font-size:max(10px,calc(14 * var(--u)));font-weight:500;border-bottom:1px solid #ffffff40}
.glass-row strong{font-weight:600}
.glass-note{margin-top:calc(104 * var(--u));background:#fff;color:var(--ink);border-radius:calc(14 * var(--u));padding:calc(13 * var(--u)) calc(14 * var(--u));display:grid;gap:calc(6 * var(--u));font-size:max(10px,calc(13 * var(--u)));font-weight:500}
.glass-note b{font-size:max(8px,calc(10.5 * var(--u)));letter-spacing:.1em;font-weight:600;color:var(--soft)}
.card-dark{left:calc(70 * var(--u));top:calc(290 * var(--u));width:calc(300 * var(--u));aspect-ratio:1.58;padding:calc(20 * var(--u));background:var(--dark);color:#f3f1e8;z-index:3;display:flex;flex-direction:column;justify-content:space-between}
.dark-top{display:flex;justify-content:space-between;font-size:max(9px,calc(12 * var(--u)));color:#c9cdbd}
.dark-mark{margin:0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:calc(52 * var(--u));line-height:1;letter-spacing:-.02em}
.coast-hello{position:absolute;left:calc(40 * var(--u));bottom:calc(34 * var(--u));margin:0;color:#fff;font-size:calc(78 * var(--u));line-height:.95;letter-spacing:-.035em;font-weight:500;text-shadow:0 2px 30px #0003}
.coast-hello span,.coast-hello em{display:block}
.coast-copy{flex:1;position:relative;background:var(--paper);display:flex;flex-direction:column;padding:calc(32 * var(--u)) calc(40 * var(--u)) calc(34 * var(--u))}
.coast-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.sq{width:calc(46 * var(--u));height:calc(46 * var(--u));min-width:38px;min-height:38px;border-radius:calc(12 * var(--u));display:grid;place-items:center}
.sq-light{background:#efede6;align-content:center;gap:4px}.sq-light span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px}
.sq-dark{background:var(--ink)}.sq-dark svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round}
.coast-word{justify-self:center;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:calc(34 * var(--u));line-height:1;display:flex;align-items:baseline;gap:8px}
.coast-word small{font-family:'Instrument Sans',Arial,sans-serif;font-style:normal;font-size:max(10px,calc(11 * var(--u)));letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.coast-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.coast h1{margin:0;font-size:calc(64 * var(--u));line-height:1.02;letter-spacing:-.035em;font-weight:500}
.coast h1 .line{display:block;overflow:hidden;padding-bottom:.06em}.coast h1 .line>*{display:block}
.coast h1 em{font-size:1.08em;letter-spacing:-.015em}
.coast-lede{margin:calc(28 * var(--u)) 0 0;font-size:calc(17 * var(--u));line-height:1.5;color:var(--soft)}
.coast-cta-wrap{position:relative;width:100%;height:calc(45 * var(--u));min-height:42px;margin-top:calc(34 * var(--u))}
.coast-cta{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;display:flex;align-items:center;gap:calc(14 * var(--u));white-space:nowrap;padding:0 calc(6 * var(--u)) 0 calc(20 * var(--u));border-radius:99px;background:var(--cta);color:var(--ink);font-size:max(13px,calc(15 * var(--u)));font-weight:600;transition:transform .25s ease,box-shadow .25s ease}
.coast-cta:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 10px 24px #fa7f6252}
.cta-arrow{width:calc(33 * var(--u));height:calc(33 * var(--u));min-width:30px;min-height:30px;border-radius:calc(9 * var(--u));background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px}
.coast-facts{margin:0;text-align:center;font-size:max(11px,calc(13 * var(--u)));color:var(--mute);letter-spacing:.02em}
@media (max-width:1100px) and (min-width:761px){.coast-video,.coast-photo{object-position:50% 32%}}
@media (max-width:760px){
  .coast{--u:calc(100vw / 600)}
  .coast-page{flex-direction:column;height:auto;overflow:visible}
  .coast-copy{order:-1;padding:20px 18px 34px;min-height:auto}
  .coast-main{padding:56px 0 40px}
  .coast h1{font-size:clamp(38px,10.5vw,58px)}.coast-lede{font-size:16px}.coast-lede br{display:none}
  .coast-word{font-size:30px}
  .coast-panel{--u:calc(100vw / 662);flex:none;margin:0;height:150vw;max-height:900px;border-radius:0}
  .coast-hello{font-size:clamp(46px,12vw,70px);left:22px;bottom:22px}
}
@media (prefers-reduced-motion:reduce){.coast-video{display:none}.coast-cta{transition:none}}

/* Login aligned with the coast homepage palette. */
.coast .login-dialog{background:var(--paper);color:var(--ink);font-family:'Instrument Sans',Arial,sans-serif;box-shadow:0 30px 100px #2c342640}
.coast .login-dialog::backdrop{background:#2c342666;backdrop-filter:blur(8px)}
.coast .login-dialog .wordmark{color:var(--dark);font-style:italic}
.coast .login-dialog .wordmark span{font-style:normal}
.coast .login-dialog .eyebrow,.coast .login-dialog label{color:var(--dark)}
.coast .login-dialog .muted,.coast .login-foot,.coast .login-dialog .close,.coast .password-wrap button{color:var(--soft)}
.coast .login-dialog input{background:#fff;color:var(--ink);border:1px solid #d9ddd2;caret-color:var(--dark)}
.coast .login-dialog input:focus-visible{border-color:var(--dark);outline:2px solid var(--dark);outline-offset:2px}
.coast .login-dialog input:-webkit-autofill,.coast .login-dialog input:-webkit-autofill:hover,.coast .login-dialog input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--chip) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--dark)}
.coast .login-dialog .primary{background:var(--cta);color:var(--ink);border-radius:999px;font-weight:600;transition:background .2s,box-shadow .2s}
.coast .login-dialog .primary:hover{background:var(--coral);box-shadow:0 5px 18px #fa7f6233}
.coast .login-dialog button:focus-visible{outline:2px solid var(--dark);outline-offset:3px}
.coast .login-dialog .form-error{color:#9d3e25}
@media(prefers-reduced-motion:reduce){.coast .login-dialog .primary{transition:none}}

/* Three illustrative operation cards, approved 2026-10-28. */
.coast .card-coral{width:calc(300 * var(--u))}.coast .card-coral .card-amount{font-size:calc(34 * var(--u))}
.coast .revenue-card{left:calc(40 * var(--u));top:calc(310 * var(--u));width:calc(320 * var(--u));aspect-ratio:auto;padding:calc(20 * var(--u));gap:calc(12 * var(--u))}
.revenue-title{margin:0;font-size:max(11px,calc(16 * var(--u)));font-weight:500}.revenue-chart{display:block;width:100%;height:auto;overflow:visible}.chart-guide{stroke:#faf9f51a;stroke-width:1;fill:none}.chart-line{fill:none;stroke:#FAF9F5;stroke-width:2.5;stroke-linecap:round}.chart-peak,.chart-callout{fill:#FE8A70}.chart-peak{stroke:#FAF9F5;stroke-width:1.5}.chart-label{fill:#151615;font-size:12px;font-family:'Instrument Sans',Arial,sans-serif;font-weight:600}.chart-month{fill:#c9cdbd;font-size:10px;font-family:'Instrument Sans',Arial,sans-serif}.revenue-note{margin:0;color:#c9cdbd;font-size:max(9px,calc(11 * var(--u)));line-height:1.4}
.coast .support-card{left:calc(350 * var(--u));top:calc(200 * var(--u));width:calc(286 * var(--u));padding:calc(18 * var(--u));background:#ffffff30;backdrop-filter:blur(16px) saturate(1.15)}
.support-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:max(9px,calc(12 * var(--u)));padding-bottom:calc(16 * var(--u));border-bottom:1px solid #ffffff45}.support-resolved{border-radius:99px;background:#EFF2E9;color:#2C3426;padding:5px 7px;font-size:max(8px,calc(10 * var(--u)));white-space:nowrap}.support-chat{display:flex;flex-direction:column;gap:calc(14 * var(--u));padding-top:calc(20 * var(--u))}.support-chat p{margin:0;max-width:94%;border-radius:calc(13 * var(--u));padding:calc(12 * var(--u));font-size:max(10px,calc(13 * var(--u)));line-height:1.4;color:#151615}.chat-guest{align-self:flex-start;background:#FAF9F5}.chat-team{align-self:flex-end;background:#F8E6DD}.chat-guest span{color:#b84b30}.support-foot{font-size:max(8px,calc(10 * var(--u)));color:#fff;margin:calc(18 * var(--u)) 0 0}