/* ============ Tokens ============ */
:root{
  --ground:#F7F9F6; --surface:#FFFFFF; --surface-2:#EEF2ED;
  --ink:#1F2725; --muted:#5B6663;
  --border:rgba(31,39,37,.12); --border-strong:rgba(31,39,37,.22);
  --lime:#7FB400; --lime-ink:#26340A; --mint:#0FA97E; --accent-soft:rgba(127,180,0,.12);
  --brand-lime:#A3E635; /* diéresis del logo, fija en ambos temas */
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 30px -18px rgba(0,0,0,.35);
  --maxw:1140px;
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1F2725; --surface:#262F2C; --surface-2:#2E3A36;
    --ink:#F7F9F6; --muted:#8E9995;
    --border:rgba(209,213,219,.14); --border-strong:rgba(209,213,219,.26);
    --lime:#A3E635; --lime-ink:#1A2200; --mint:#6EE7B7; --accent-soft:rgba(163,230,53,.12);
    --shadow:0 1px 2px rgba(0,0,0,.2), 0 20px 44px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#1F2725; --surface:#262F2C; --surface-2:#2E3A36;
  --ink:#F7F9F6; --muted:#8E9995;
  --border:rgba(209,213,219,.14); --border-strong:rgba(209,213,219,.26);
  --lime:#A3E635; --lime-ink:#1A2200; --mint:#6EE7B7; --accent-soft:rgba(163,230,53,.12);
  --shadow:0 1px 2px rgba(0,0,0,.2), 0 20px 44px -22px rgba(0,0,0,.7);
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:75px}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.05; margin:0; text-wrap:balance; letter-spacing:-.02em}
h2{font-size:clamp(28px,4.4vw,44px)}
h3{font-size:clamp(19px,2.4vw,23px); font-weight:700; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
section{padding-block:clamp(56px,8vw,104px)}
.eyebrow{font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint); margin:0 0 14px}
.lead{color:var(--muted); font-size:clamp(16px,1.9vw,19px); max-width:56ch}
.sec-head .lead{margin-top:14px}
*:focus-visible{outline:2px solid var(--mint); outline-offset:2px; border-radius:4px}

/* ============ Buttons (lima = accionable) ============ */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--body); font-weight:700; font-size:15px;
  padding:.72em 1.25em; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .16s ease, background .16s ease, border-color .16s ease; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--lime); color:var(--lime-ink)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:.9em 1.5em; font-size:16px}

/* ============ Nav ============ */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; background:var(--ground);
  border-bottom:1px solid transparent; transition:background-color .2s, border-color .2s}
.nav.scrolled{border-color:var(--border)}
.nav.over-hero-photo{background:transparent; border-color:transparent}
.nav.over-hero-photo .nav-links{color:#26312E; font-size:15.5px; font-weight:600; text-shadow:0 1px 3px rgba(247,249,246,.75)}
.nav.over-hero-photo .nav-links a:hover{color:#111A17}
.nav.over-hero-photo .toggle,.nav.over-hero-photo .mobile-menu{color:#1F2725; border-color:rgba(31,39,37,.28)}
:root .nav.over-hero-photo .logo-light{display:block}
:root .nav.over-hero-photo .logo-dark{display:none}
:root[data-theme="dark"] .nav.over-hero-photo .logo-light{display:none}
:root[data-theme="dark"] .nav.over-hero-photo .logo-dark{display:block}
:root[data-theme="dark"] .nav.over-hero-photo .nav-links{color:rgba(247,249,246,.88); text-shadow:0 1px 3px rgba(0,0,0,.5)}
:root[data-theme="dark"] .nav.over-hero-photo .nav-links a:hover{color:#fff}
:root[data-theme="dark"] .nav.over-hero-photo .toggle,:root[data-theme="dark"] .nav.over-hero-photo .mobile-menu{color:#F7F9F6; border-color:rgba(247,249,246,.4)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px}
.brand{display:inline-flex; align-items:center}
.logo{width:170px; height:46px; object-fit:contain; object-position:left top; display:block}
.logo-dark{display:none}
/* swap logo por tema */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="light"] .logo-light{display:block}
:root[data-theme="light"] .logo-dark{display:none}
.nav-links{display:flex; align-items:center; gap:26px; white-space:nowrap; font-size:15px; font-weight:500; color:var(--muted)}
.nav-links a{transition:color .15s} .nav-links a:hover{color:var(--ink)}
.nav-right{display:flex; align-items:center; gap:12px}
.mobile-menu{display:none; width:38px; height:38px; place-items:center; align-content:center; gap:4px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--ink); cursor:pointer}
.mobile-menu span{display:block; width:15px; height:1.5px; border-radius:2px; background:currentColor; transition:transform .16s ease, opacity .16s ease}
.nav.menu-open .mobile-menu span:first-child{transform:translateY(5.5px) rotate(45deg)}
.nav.menu-open .mobile-menu span:nth-child(2){opacity:0}
.nav.menu-open .mobile-menu span:last-child{transform:translateY(-5.5px) rotate(-45deg)}
.toggle{width:38px; height:38px; padding:0; display:grid; place-items:center; border-radius:999px; border:1px solid var(--border-strong);
  background:transparent; color:var(--ink); cursor:pointer; font-size:17px; transition:border-color .15s}
.toggle:hover{border-color:var(--ink)}
.toggle svg{display:block}

/* ============ Hero ============ */
.hero{padding:0}
.hero>.wrap{max-width:none; padding:0}
.hero-panel{
  position:relative; isolation:isolate; display:flex; align-items:center; overflow:hidden;
  min-height:620px; height:100svh;
  background:var(--surface)
}
.hero-panel::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(247,249,246,.84) 0%,rgba(247,249,246,.66) 35%,rgba(247,249,246,.08) 62%,transparent 76%)
}
/* Independent of the text overlay: only the foot of the landscape dissolves. */
.hero-panel::before{
  content:""; position:absolute; inset:auto 0 0; height:176px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ground) 0%,transparent) 0%,
    color-mix(in srgb,var(--ground) 4%,transparent) 18%,
    color-mix(in srgb,var(--ground) 12%,transparent) 32%,
    color-mix(in srgb,var(--ground) 30%,transparent) 49%,
    color-mix(in srgb,var(--ground) 56%,transparent) 65%,
    color-mix(in srgb,var(--ground) 80%,transparent) 80%,
    color-mix(in srgb,var(--ground) 96%,transparent) 93%,
    var(--ground) 100%)
}
:root[data-theme="dark"] .hero-panel::before{
  height:160px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ground) 0%,transparent) 0%,
    color-mix(in srgb,var(--ground) 7%,transparent) 18%,
    color-mix(in srgb,var(--ground) 20%,transparent) 34%,
    color-mix(in srgb,var(--ground) 42%,transparent) 51%,
    color-mix(in srgb,var(--ground) 65%,transparent) 68%,
    color-mix(in srgb,var(--ground) 86%,transparent) 83%,
    color-mix(in srgb,var(--ground) 97%,transparent) 94%,
    var(--ground) 100%)
}
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% center; z-index:0}
.hero-photo-night{display:none}
:root[data-theme="dark"] .hero-photo-day{display:none}
:root[data-theme="dark"] .hero-photo-night{display:block}
:root[data-theme="dark"] .hero-panel::after{background:linear-gradient(90deg,rgba(13,24,44,.82) 0%,rgba(13,24,44,.6) 35%,rgba(13,24,44,.08) 62%,transparent 76%)}
:root[data-theme="dark"] .hero-copy{color:#F7F9F6}
:root[data-theme="dark"] .hero .eyebrow{color:#6EE7B7}
:root[data-theme="dark"] .hero-accent{color:var(--brand-lime)}
:root[data-theme="dark"] .hero .lead{color:rgba(247,249,246,.8)}
:root[data-theme="dark"] .hero .btn-ghost{color:#F7F9F6; border-color:rgba(247,249,246,.35); background:rgba(13,24,44,.25)}
.hero-copy{position:relative; z-index:3; width:min(68%,calc(max(24px,50vw - 546px) + 620px)); padding:48px 24px 48px max(24px,50vw - 546px); color:#1F2725}
.hero .eyebrow{color:#476c54; font-size:12px; margin-bottom:18px}
.hero h1{font-size:clamp(38px,3.7vw,52px); font-weight:800; line-height:1.04; letter-spacing:-.045em}
.hero-accent{color:#5F8800}
.hero .lead{margin-top:26px; font-size:18px; line-height:1.55; max-width:45ch; color:#34413c}
.hero-support-mobile{display:none}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero .hero-cta{margin-top:32px}
.hero .btn-primary{background:var(--brand-lime); color:#1F2725}
.hero .btn-ghost{color:#1F2725; border-color:rgba(31,39,37,.25); background:rgba(247,249,246,.28)}
.hero .btn:hover{transform:translateY(-2px)}

/* ============ Generic grid + cards ============ */
.sec-head{max-width:62ch; margin-bottom:clamp(32px,5vw,52px)}
/* Services pick up the hero's text axis with a compact editorial opening. */
#servicios{padding-top:clamp(48px,4.5vw,64px)}
#servicios .services-intro{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:18px clamp(32px,4.5vw,64px); max-width:none; margin-bottom:36px
}
.services-intro .eyebrow{
  grid-column:1 / -1; display:flex; align-items:center; gap:12px; margin:0;
  color:color-mix(in srgb,var(--mint) 55%,var(--ink))
}
.services-intro .eyebrow::before{content:""; width:26px; height:2px; flex:none; background:var(--mint)}
:root[data-theme="dark"] .services-intro .eyebrow{color:var(--mint)}
#servicios .services-intro .lead{align-self:end; margin:0; max-width:44ch}
.grid{display:grid; gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--shadow)}
.glyph{width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--lime); font-size:20px; margin-bottom:16px; border:1px solid var(--border)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted); font-size:15.5px}
.card .tags{margin-top:14px; display:flex; flex-wrap:wrap; gap:7px}
.tag{font-size:12px; font-weight:600; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:4px 10px}

/* Servicios feature card (span) */
.svc-feature{grid-column:span 2; display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center}
@media(max-width:900px){.svc-feature{grid-column:span 1; grid-template-columns:1fr}}
.svc-feature .mini-win{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; font-size:13px; color:var(--muted); font-weight:600}
.svc-feature .mini-win .ln{height:9px; border-radius:5px; background:var(--border-strong); opacity:.5; margin:9px 0}
.svc-feature .mini-win .ln.g{background:var(--mint); opacity:1; width:55%}
.svc-feature .mini-win .ln.w75{width:75%}

/* Proceso */
.process-steps{--process-progress-x:0%; --process-progress-y:0px; --process-line-y:0px; position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:44px}
.process-steps::before,.process-steps::after{content:""; position:absolute; top:21px; left:12.5%; height:2px; pointer-events:none}
.process-steps::before{width:75%; background:var(--border-strong)}
.process-steps::after{width:var(--process-progress-x); background:var(--lime); transition:width .25s ease, height .25s ease}
.process-step{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:15px; min-width:0; padding:0 12px; border:0; background:none; color:var(--muted); font:inherit; text-align:center; cursor:pointer}
.process-node{display:grid; place-items:center; flex:none; width:44px; height:44px; border:1px solid var(--border-strong); border-radius:50%; background:var(--ground); color:var(--muted); font-family:var(--display); font-size:13px; font-weight:800; transition:background-color .2s, border-color .2s, color .2s}
.process-step:hover .process-node,.process-step:focus-visible .process-node{border-color:var(--lime)}
.process-step.is-complete .process-node{border-color:var(--lime); color:var(--lime)}
.process-step.is-active .process-node{background:var(--lime); border-color:var(--lime); color:var(--lime-ink)}
.process-step-title{display:block; color:var(--muted); font-family:var(--display); font-size:17px; font-weight:700; line-height:1.2; transition:color .2s}
.process-step.is-active .process-step-title,.process-step:hover .process-step-title{color:var(--ink)}
.process-step-summary{display:none}
.process-detail{display:grid; grid-template-columns:110px minmax(0,640px); gap:24px; margin-top:34px; padding-top:24px; border-top:1px solid var(--border); min-height:128px}
.process-detail-count{color:var(--lime); font-family:var(--display); font-size:14px; font-weight:800; letter-spacing:.08em}
.process-detail-title{font-size:22px; margin-bottom:6px}
.process-detail-copy{color:var(--muted); font-size:16px; line-height:1.55}

.chk{color:var(--lime); font-weight:800; flex:none}

/* Products: Clubia keeps its orange / graphite identity inside Terü's surface. */
#producto{--clubia-orange:#FF5A1F; --clubia-text:#B7380B}
:root[data-theme="dark"] #producto{--clubia-text:#FF9975}
#producto [hidden]{display:none!important}
.products-head{max-width:none; margin-bottom:32px}
.products-head .eyebrow{color:var(--ink)}
.clubia-feature{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:0 clamp(28px,4vw,48px);
  padding:clamp(24px,3.4vw,40px); border:1px solid var(--border-strong); border-radius:22px;
  background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--clubia-orange) 7%,transparent),transparent 56%),var(--ground)
}
.clubia-brand{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-bottom:26px}
.clubia-copy{grid-area:1 / 1}
.clubia-outro{grid-area:2 / 1; align-self:start}
.clubia-wordmark{display:block; width:124px; flex:none}
.clubia-wordmark img{width:100%; height:auto}
.clubia-logo-dark{display:none}
:root[data-theme="dark"] .clubia-logo-light{display:none}
:root[data-theme="dark"] .clubia-logo-dark{display:block}
.product-status{color:var(--muted); font-size:11px; font-weight:600; white-space:nowrap}
.clubia-copy h3{font-size:clamp(34px,3.4vw,46px); font-weight:800; line-height:1.03; letter-spacing:-.035em}
.clubia-description{color:var(--muted); font-size:16px; line-height:1.55; margin-top:16px; max-width:36ch}
.clubia-tabs{display:grid; gap:6px; margin:26px 0 24px}
.clubia-tab{display:flex; align-items:center; gap:12px; width:100%; min-width:0; padding:12px 10px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer}
.clubia-tab:hover{background:var(--surface)}
.clubia-tab[aria-selected="true"]{border-color:color-mix(in srgb,var(--clubia-orange) 38%,var(--border)); background:color-mix(in srgb,var(--clubia-orange) 8%,var(--ground))}
.clubia-tab-time{color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.03em; flex:none}
.clubia-tab strong{display:block; font-size:14px; font-weight:700; line-height:1.35}
.clubia-tab small{display:block; color:var(--muted); font-size:12px; line-height:1.4; margin-top:3px}
.clubia-tab-arrow{margin-left:auto; color:var(--clubia-text); opacity:0; font-size:19px; flex:none}
.clubia-tab[aria-selected="true"] .clubia-tab-arrow{opacity:1}
.clubia-link{background:var(--clubia-orange); color:#0B0B0B}
.clubia-offline{font-size:12px; color:var(--muted); margin-top:12px}
.clubia-preview{grid-area:1 / 2 / 3; min-width:0; align-self:center}
.clubia-demo{--demo-bg:#FAF9F7; --demo-surface:#FFFFFF; --demo-ink:#0B0B0B; --demo-muted:#5B5B63; --demo-line:#E5E5EA;
  color:var(--demo-ink); background:var(--demo-bg); border:1px solid var(--border-strong); border-radius:14px; overflow:hidden; box-shadow:0 24px 56px -30px rgba(0,0,0,.3); font-size:13px; line-height:1.5}
:root[data-theme="dark"] .clubia-demo{--demo-bg:#161616; --demo-surface:#222222; --demo-ink:#FAF9F7; --demo-muted:#ABABB3; --demo-line:#393939}
.clubia-windowbar{display:flex; align-items:center; gap:10px; height:38px; padding:0 16px; color:var(--demo-muted); background:var(--demo-surface); border-bottom:1px solid var(--demo-line); font-size:11px}
.clubia-window-dots{display:flex; gap:4px}
.clubia-window-dots i{width:5px; height:5px; border-radius:50%; background:var(--demo-muted); opacity:.5}
.clubia-demo-label{margin-left:auto; color:var(--clubia-text); font-size:9px; font-weight:700; letter-spacing:.12em}
.clubia-screen{display:grid; grid-template-columns:minmax(0,1fr); padding:22px}
.clubia-screen-top{grid-area:1 / 1; display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--demo-line)}
.clubia-gym{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700}
.clubia-gym>span{display:grid; place-items:center; width:25px; height:25px; background:var(--clubia-orange); color:#0B0B0B; border-radius:7px; font-family:var(--display); font-weight:800}
.clubia-screen-date{font-size:10px; color:var(--demo-muted)}
.clubia-panel{grid-area:2 / 1; min-height:332px}
/* Keep all three views in one grid cell to reserve the tallest view's space. */
#producto .clubia-panel[hidden]{display:block!important; visibility:hidden; pointer-events:none}
.clubia-panel-heading{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
.clubia-kicker{font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--demo-muted); margin-bottom:4px}
.clubia-panel h4{font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.1; margin:0}
.clubia-count{color:var(--demo-muted); border:1px solid var(--demo-line); border-radius:6px; font-size:11px; padding:3px 8px; flex:none}
.clubia-registration{background:var(--demo-surface); border:1px solid var(--demo-line); border-radius:10px; padding:14px; margin-bottom:18px}
.clubia-field-label{display:block; color:var(--demo-muted); font-size:10px; margin-bottom:7px}
.clubia-register-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.clubia-demo-input{background:var(--demo-bg); border:1px solid var(--demo-line); border-radius:6px; padding:8px 12px; flex:1; font-size:13px; letter-spacing:.04em; white-space:nowrap}
.clubia-action{display:inline-flex; justify-content:center; align-items:center; gap:10px; border:0; border-radius:6px; background:var(--clubia-orange); color:#0B0B0B; padding:10px 12px; font-family:var(--body); font-size:12px; line-height:1.3; font-weight:700; cursor:pointer; min-height:38px}
.clubia-action:hover{background:#FF7A45}
.clubia-action.is-done{background:var(--demo-surface); color:var(--demo-ink); box-shadow:inset 0 0 0 1px var(--demo-line)}
.clubia-list-label{color:var(--demo-muted); font-size:10px; margin-bottom:6px}
.clubia-student{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--demo-line)}
.clubia-avatar{display:grid; place-items:center; width:30px; height:30px; flex:none; background:var(--demo-surface); border:1px solid var(--demo-line); border-radius:50%; color:var(--demo-muted); font-size:10px; font-weight:700}
.clubia-student strong{display:block; font-size:12px; font-weight:600}
.clubia-student small{display:block; font-size:10px; color:var(--demo-muted); margin-top:2px}
.clubia-pill{margin-left:auto; white-space:nowrap; border-radius:5px; padding:3px 7px; font-size:9px; font-weight:700}
.clubia-pill-ok{background:#E2F4EB; color:#11613F}
.clubia-pill-warn{background:#FFF0D8; color:#77500C}
:root[data-theme="dark"] .clubia-pill-ok{background:#183B2D; color:#8DE1B7}
:root[data-theme="dark"] .clubia-pill-warn{background:#3F301B; color:#F2CC83}
.clubia-feedback{display:flex; align-items:flex-start; gap:9px; min-height:80px; margin-top:18px; padding:12px; border:1px solid var(--demo-line); border-radius:8px; font-size:11px; color:var(--demo-muted); background:var(--demo-surface)}
.clubia-feedback-icon{color:var(--clubia-text); font-size:16px; line-height:1.2}
.clubia-feedback.is-done{border-color:color-mix(in srgb,var(--clubia-orange) 35%,var(--demo-line)); color:var(--demo-ink)}
.clubia-payment{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:18px; align-items:start}
.clubia-readonly-field{border-bottom:1px solid var(--demo-line); padding:0 0 12px; margin-bottom:12px}
.clubia-readonly-field strong{font-size:12px; font-weight:600}
.clubia-amount{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:14px 0 16px; color:var(--demo-muted); font-size:11px}
.clubia-amount strong{font-family:var(--display); font-size:20px; color:var(--demo-ink); white-space:nowrap}
.clubia-receipt{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px 28px; background:var(--demo-surface); border:1px solid var(--demo-line); border-radius:4px 4px 0 0; box-shadow:0 6px 12px -8px rgba(0,0,0,.2); text-align:center; font-size:10px}
.clubia-receipt::after{content:""; position:absolute; bottom:-5px; left:-1px; right:-1px; height:6px; background:linear-gradient(135deg,var(--demo-surface) 25%,transparent 25%) -4px 0/8px 8px,linear-gradient(225deg,var(--demo-surface) 25%,transparent 25%) -4px 0/8px 8px}
.clubia-receipt-mark{display:grid; place-items:center; width:22px; height:22px; color:var(--demo-ink); border:1px solid var(--demo-line); border-radius:50%; font-family:var(--display); font-weight:800}
.clubia-receipt>strong{font-family:var(--display); font-size:15px}
.clubia-receipt small{font-size:8px; color:var(--demo-muted)}
.clubia-receipt-rule{border-top:1px dashed var(--demo-line); width:100%; margin:4px 0}
.clubia-receipt>b{font-family:var(--display); font-size:20px; margin:8px 0 3px}
.clubia-receipt-seal{position:absolute; bottom:7px; color:var(--clubia-text); font-size:9px; font-weight:700}
.clubia-reminder-summary{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px}
.clubia-reminder-summary>div{padding:12px 14px; border:1px solid var(--demo-line); border-radius:8px; background:var(--demo-surface)}
.clubia-reminder-summary span{display:block; color:var(--demo-muted); font-size:10px}
.clubia-reminder-summary strong{font-family:var(--display); font-size:26px; line-height:1.4}
.clubia-reminder-summary small{font-family:var(--body); font-size:10px; font-weight:500; color:var(--demo-muted)}
.clubia-reminder-action{margin-top:16px}
.clubia-demo-footer{display:flex; align-items:center; justify-content:center; gap:6px; border-top:1px solid var(--demo-line); padding:11px; font-size:10px; color:var(--demo-muted)}
.clubia-demo-dot{width:4px; height:4px; border-radius:50%; background:var(--clubia-orange)}
.clubia-preview-hint{color:var(--muted); font-size:12px; text-align:center; margin-top:14px}
.clubia-feature :focus-visible{outline-color:var(--clubia-text)}

/* Bruma is an abstract, static teaser; no private product imagery is loaded. */
.bruma-feature{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; margin-top:24px; padding:30px 40px; border:1px solid var(--border); border-radius:18px; background:var(--ground)}
.bruma-copy .eyebrow{font-size:10px; letter-spacing:.1em; color:var(--ink); margin-bottom:12px}
.bruma-copy .eyebrow span{color:var(--muted); letter-spacing:0; text-transform:none; margin-left:8px}
.bruma-copy h3{font-size:clamp(26px,2.6vw,34px); font-weight:800; line-height:1.06}
.bruma-copy>p:last-child{font-size:14px; line-height:1.55; color:var(--muted); max-width:42ch; margin-top:12px}
.bruma-preview{position:relative; height:190px; overflow:hidden; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); isolation:isolate}
.bruma-abstract{position:absolute; inset:16px 22px; filter:blur(7px); opacity:.6; transform:scale(1.06); user-select:none}
.bruma-abstract-nav{height:12px; width:36%; background:var(--mint); border-radius:4px; margin-bottom:22px}
.bruma-abstract-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.bruma-abstract-grid i{height:45px; border-radius:6px; background:var(--border-strong)}
.bruma-abstract-grid i:nth-child(2){background:color-mix(in srgb,var(--mint) 40%,var(--surface-2))}
.bruma-abstract-lines{display:grid; gap:10px; margin-top:18px}
.bruma-abstract-lines i{height:8px; width:80%; background:var(--border-strong); border-radius:3px}
.bruma-abstract-lines i:nth-child(2){width:60%}
.bruma-band{position:absolute; inset:50% 0 auto; transform:translateY(-50%); display:flex; justify-content:center; align-items:center; gap:10px; padding:14px; border-block:1px solid var(--border-strong); background:color-mix(in srgb,var(--ground) 95%,transparent); color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.bruma-band svg{color:var(--mint); flex:none}

/* Comparativa */
.cmp{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.cmp-row{display:grid; grid-template-columns:1.4fr 1fr 1fr; border-top:1px solid var(--border)}
.cmp-row:first-child{border-top:0}
.cmp-row>div{padding:16px 20px; font-size:15px}
.cmp-row.head>div{font-family:var(--display); font-weight:700; font-size:15px; background:var(--surface-2)}
.cmp-row.head .teru{color:var(--ink)}
.cmp-row .teru{background:var(--accent-soft); font-weight:600}
.cmp-row .lbl{color:var(--muted); font-weight:600}
.cmp .yes{color:var(--mint); font-weight:700}
.cmp .no{color:var(--muted)}

/* Precios */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:6px}
.plan.feat{border-color:var(--lime); box-shadow:var(--shadow)}
.plan .flag{align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--lime-ink); background:var(--lime); padding:4px 10px; border-radius:999px; margin-bottom:6px}
.plan h3{margin-bottom:2px}
.plan .who{color:var(--muted); font-size:14px; min-height:40px}
.plan .amt{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-.02em; margin:10px 0 2px}
.plan .amt small{font-size:15px; font-weight:600; color:var(--muted)}
.price-grid .plan .amt small{display:block; line-height:1.4; margin-top:4px}
.plan .from{color:var(--muted); font-size:13px; font-weight:600}
.plan ul{list-style:none; padding:0; margin:18px 0; display:grid; gap:10px; font-size:14.5px; color:var(--muted)}
.plan li{display:flex; gap:9px} .plan li .chk{font-size:14px}
.plan .btn{margin-top:auto; justify-content:center}
.plan.custom{border-style:dashed; background:transparent; margin-top:20px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px}
.plan.custom h3{margin-bottom:4px}
.plan.custom .who{min-height:0}

/* Equipo */
.team{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.member{display:flex; gap:18px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.avatar{width:64px; height:64px; border-radius:16px; flex:none; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--border); font-family:var(--display); font-weight:800; font-size:24px; color:var(--mint)}
.member h3{font-size:19px} .member p{color:var(--muted); font-size:14px}

/* FAQ */
.faq{max-width:800px; margin-inline:auto}
.faq-head{text-align:center; margin-inline:auto}
details{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); margin-bottom:12px; overflow:hidden}
details[open]{border-color:var(--border-strong)}
summary{list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--display); font-weight:700; font-size:17px; display:flex; justify-content:space-between; align-items:center; gap:16px}
summary::-webkit-details-marker{display:none}
summary .faq-question{display:flex; flex:1 1 auto; align-items:baseline; flex-wrap:wrap; column-gap:6px}
summary .faq-question small{color:var(--muted); font-size:calc(1em - 1px); font-weight:500}
summary .pm{color:var(--lime); font-size:22px; font-weight:700; transition:transform .2s; flex:none}
details[open] summary .pm{transform:rotate(45deg)}
details .ans{padding:0 24px 20px; color:var(--muted); font-size:15.5px}

/* CTA final + form */
.cta{background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--radius) + 8px); padding:clamp(30px,5vw,56px); box-shadow:var(--shadow)}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center}
.cta h2{margin-bottom:14px}
.cta .contacts{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.chip{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--border-strong); border-radius:999px; padding:9px 15px; font-size:14px; font-weight:600; transition:border-color .15s}
.chip:hover{border-color:var(--ink)}
form{display:grid; gap:12px}
.field{display:grid; gap:6px}
label{font-size:13px; font-weight:600; color:var(--muted)}
input,select,textarea{font-family:var(--body); font-size:15px; color:var(--ink); background:var(--ground); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:12px 14px; width:100%}
textarea{resize:vertical; min-height:92px}
input::placeholder,textarea::placeholder{color:var(--muted)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
form .btn{justify-content:center; margin-top:4px}
.form-note{font-size:12.5px; color:var(--muted); text-align:center}
.form-note a{text-decoration:underline; text-underline-offset:3px}

/* Footer */
.footer{border-top:1px solid var(--border); padding-block:44px 40px; margin-top:20px}
.surface-section{background:var(--surface-2)}
.foot-grid{display:grid; grid-template-columns:minmax(230px,1.5fr) repeat(4,minmax(0,1fr)); gap:24px}
.foot-brand{max-width:320px}
.foot-brand p{color:var(--muted); font-size:14px; margin-top:12px}
.foot-col h4{font-family:var(--display); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:700}
.foot-col a{display:block; color:var(--muted); font-size:14.5px; padding:4px 0; transition:color .15s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:36px; padding-top:22px; border-top:1px solid var(--border); color:var(--muted); font-size:13px}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ============ Responsive ============ */
@media(max-width:1024px){
  .nav-links{display:none}
  .mobile-menu{display:grid}
  .nav.menu-open{background:var(--ground); border-color:var(--border)}
  .nav.menu-open .nav-links{position:absolute; top:100%; left:0; right:0; display:grid; gap:0; padding:8px 24px 14px; background:var(--ground); border-bottom:1px solid var(--border); box-shadow:var(--shadow)}
  .nav.menu-open .nav-links a{padding:10px 0}
}
@media(max-width:900px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}
  .foot-brand{grid-column:1 / -1}
  /* Misma foto y difuminado que en desktop: texto arriba sobre el cielo, tero abajo. */
  .hero-panel{display:block; height:100svh; min-height:640px; max-height:1100px; background:#DAE1E6}
  .hero-panel::before{height:120px}
  :root[data-theme="dark"] .hero-panel::before{height:110px}
  .hero-panel::after{inset:0 0 auto; height:62%; background:linear-gradient(180deg,rgba(247,249,246,.86) 0%,rgba(247,249,246,.7) 40%,rgba(247,249,246,0) 100%)}
  .hero-photo{inset:auto 0 0; height:76%; object-position:70% center; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%); mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
  .hero-copy{width:100%; max-width:640px; padding:calc(75px + 32px) 24px 0}
  .hero h1{font-size:clamp(34px,6.4vw,46px)}
  .hero-desktop-break{display:none}
  .hero .lead{margin-top:18px}
  .hero .hero-cta{margin-top:24px}
  :root[data-theme="dark"] .hero-panel{background:#152746}
  :root[data-theme="dark"] .hero-panel::after{background:linear-gradient(180deg,rgba(21,39,70,.85) 0%,rgba(21,39,70,.6) 40%,rgba(21,39,70,0) 100%)}
  #servicios{padding-top:40px}
  #servicios .services-intro{grid-template-columns:minmax(0,1fr); gap:16px; max-width:62ch; margin-bottom:32px}
  #servicios .services-intro .lead{max-width:56ch}
  .process-steps{grid-template-columns:1fr; margin-top:32px}
  .process-steps::before,.process-steps::after{top:22px; left:21px; width:2px}
  .process-steps::before{height:var(--process-line-y)}
  .process-steps::after{height:var(--process-progress-y); width:2px}
  .process-step{flex-direction:row; align-items:flex-start; gap:18px; min-height:104px; padding:0 0 24px; text-align:left}
  .process-step-text{padding-top:2px}
  .process-step-title{font-size:18px}
  .process-step-summary{display:block; margin-top:5px; color:var(--muted); font-size:14.5px; line-height:1.4}
  .process-detail{display:none}
  .g3,.g4,.g2,.price-grid,.team{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
  .clubia-feature{grid-template-columns:1fr; gap:28px; padding:28px}
  .clubia-copy{grid-area:1 / 1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:32px}
  .clubia-brand{grid-column:1 / -1; margin-bottom:20px}
  .clubia-copy h3{grid-column:1; grid-row:2}
  .clubia-description{grid-column:1; grid-row:3; margin-top:12px}
  .clubia-tabs{grid-column:2; grid-row:2 / 6; margin:0; align-self:center}
  .clubia-preview{grid-area:2 / 1}
  .clubia-outro{grid-area:3 / 1}
  .clubia-demo{max-width:620px; margin-inline:auto}
  .bruma-feature{gap:24px; padding:28px}
  .cmp-row{grid-template-columns:1fr}
  .cmp-row.head{display:none}
  .cmp{display:grid; gap:12px; border:0; border-radius:0; overflow:visible; background:transparent}
  .cmp-row:not(.head){border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
  .cmp-row>div{font-size:14px; line-height:1.45}
  .cmp-row .lbl{padding:18px 20px 9px; font-family:var(--display); font-size:18px; font-weight:700; color:var(--ink)}
  .cmp-row .teru{margin:0 12px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--accent-soft); font-weight:600}
  .cmp-row .teru::before{content:"TERÜ  "; display:block; margin-bottom:3px; color:var(--lime); font-size:11px; font-weight:800; letter-spacing:.12em}
  .cmp-row .other{padding:12px 24px 17px; color:var(--muted)}
  .cmp-row .other::before{content:"OTROS  "; display:block; margin-bottom:2px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.12em}
}
@media(max-width:520px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  .nav-right>.btn{display:none}
  .hero-copy{padding:calc(75px + 24px) 18px 0}
  #servicios{padding-top:36px}
  .hero .eyebrow{font-size:10px; letter-spacing:.1em; line-height:1.3; margin-bottom:16px; max-width:31ch}
  .hero h1{font-size:clamp(29px,7.8vw,34px); line-height:1.06}
  .hero-desktop-break{display:block}
  .hero-support-desktop{display:none}
  .hero-support-mobile{display:inline}
  .hero .lead{font-size:16px; line-height:1.45; max-width:30ch}
  .hero .hero-cta{margin-top:20px}
  .hero .hero-cta .btn-primary{min-width:220px; justify-content:center; font-size:14px; padding:.9em 1.25em}
  .hero-cta-secondary{display:none}
  .clubia-feature{padding:22px 16px; border-radius:16px; gap:14px}
  .clubia-copy{display:contents}
  .clubia-brand{grid-area:1 / 1; gap:10px; justify-content:space-between; margin-bottom:8px}
  .clubia-wordmark{width:110px}
  .product-status{font-size:10px}
  .clubia-copy h3{grid-area:2 / 1; font-size:36px}
  .clubia-description{grid-area:3 / 1; font-size:15px; max-width:34ch; margin-top:0}
  .clubia-tabs{grid-area:4 / 1; grid-template-columns:repeat(3,minmax(0,1fr)); margin:8px 0 4px; align-items:stretch}
  .clubia-tab{display:block; padding:10px 7px; text-align:left}
  .clubia-tab-time{display:block; font-size:10px; margin-bottom:6px}
  .clubia-tab strong{font-size:12px; line-height:1.3}
  .clubia-tab small,.clubia-tab-arrow{display:none}
  .clubia-preview{grid-area:5 / 1}
  .clubia-outro{grid-area:6 / 1; margin-top:6px}
  .clubia-screen{padding:16px 12px}
  .clubia-screen-top{padding-bottom:14px; margin-bottom:18px}
  .clubia-screen-date{display:none}
  .clubia-panel{min-height:350px}
  .clubia-panel h4{font-size:20px}
  .clubia-registration{padding:10px}
  .clubia-register-row .clubia-action{width:100%}
  .clubia-payment{gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .clubia-amount{display:block}
  .clubia-amount strong{display:block; margin-top:3px}
  .clubia-receipt{padding-inline:6px}
  .clubia-preview-hint{font-size:11px; max-width:26ch; margin-inline:auto}
  .bruma-feature{grid-template-columns:1fr; padding:24px; gap:20px; margin-top:18px}
  .bruma-preview{height:150px}
  .plan.custom{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
}
@media(max-width:380px){.hero-desktop-break{display:none}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}