/* ==================================================================
   Pulse × DEKA — campaign landing (static build)
   Tokens live in colors_and_type.css. This file is the page styling,
   ported 1:1 from the original prototype <style> block.
   ================================================================== */
:root{
  --navy: var(--main-piccolo);
  --lime: var(--main-hit);
  --ink: #0c1330;
  --cardisio-red: #E4002B;
  --wrap: 1200px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: var(--navy); text-decoration: none; }
a:hover{ color: var(--navy); text-decoration: underline; }
button{ font-family: inherit; }

h1,h2,h3{ font-family: var(--font-display); margin:0; letter-spacing:-.02em; }
p{ margin:0; }
img{ display:block; max-width:100%; }

/* shared icon glyph */
.ic{ display:inline-block; vertical-align:middle; flex:0 0 auto; }

.wrap{ max-width: var(--wrap); margin:0 auto; padding: 0 32px; }
.sec{ padding: 104px 0; }

/* Eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--font-sans); font-weight:700;
  font-size: 12px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background: var(--lime); box-shadow:0 0 0 4px color-mix(in srgb, var(--lime) 30%, transparent); }

.display-xl{ font-size: clamp(36px, 5vw, 64px); line-height:1.0; font-weight:700; }
.display-lg{ font-size: clamp(32px, 4.6vw, 56px); line-height:1.02; font-weight:700; }
.display-md{ font-size: clamp(26px, 3vw, 40px); line-height:1.05; font-weight:700; }

.lead{ font-size: clamp(17px,1.35vw,21px); line-height:1.55; color: var(--text-secondary); }

/* ---------- Header ---------- */
.lp-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
  color: #141414;
}
/* Pulse wordmark, recolorable via CSS mask (currentColor) */
.pulse-logo{ display:inline-block; width:84px; height:28px; background-color: currentColor;
  -webkit-mask: url(../assets/pulse-logo.png) no-repeat left center/contain;
  mask: url(../assets/pulse-logo.png) no-repeat left center/contain; }
.lp-header-inner{ display:flex; align-items:center; gap:28px; height:74px; }
.brand-lock{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700; }
.brand-lock .x{ opacity:.5; font-weight:400; }
.nav-links{ display:flex; align-items:center; gap:28px; margin-left: 8px; }
.nav-links a{ font-size:15px; font-weight:500; color:inherit; opacity:.9; }
.nav-links a:hover{ opacity:1; text-decoration:none; }
.header-cta{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.link-plain{ font-size:14px; font-weight:600; color:inherit; display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:none; border:none; }
.link-plain:hover{ text-decoration:underline; }
.btn-nav{ height:44px; padding:0 18px; border-radius:10px; background:var(--navy); color:#fff; border:none; cursor:pointer; font-weight:700; font-size:14px; display:inline-flex; align-items:center; }
.btn-nav:hover{ filter:brightness(1.14); }

/* ---------- Hero (overlay) ---------- */
.hero{ position:relative; min-height: 72vh; display:flex; align-items:flex-end; color:#fff; }
.hero-media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center 30%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(9,14,38,.94) 0%, rgba(9,14,38,.72) 38%, rgba(9,14,38,.28) 68%, rgba(9,14,38,.55) 100%),
    linear-gradient(0deg, rgba(9,14,38,.9) 0%, rgba(9,14,38,0) 42%);
}
.hero-content{ position:relative; z-index:1; width:100%; padding-bottom: 46px; }
.hero-inner{ max-width: 720px; }
.hero h1{ margin: 16px 0 0; }
.hero .lead{ color: rgba(255,255,255,.86); max-width: 600px; margin-top: 16px; font-size: clamp(16px,1.2vw,19px); }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top: 26px; }
.hero-micro{ margin-top:16px; font-size:13.5px; color: rgba(255,255,255,.62); display:flex; align-items:center; gap:8px; }
.hero-provider{ display:inline-flex; align-items:center; gap:12px; margin-top:20px; }
.hero-provider .lbl{ letter-spacing:var(--tracking-caps); text-transform:uppercase; font-weight:700; font-size:11px; color:rgba(255,255,255,.5); }
.cardisio-lock{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; cursor:pointer; text-decoration:none; }
.cardisio-lock:hover{ text-decoration:underline; }
.cardisio-lock .cmark{ width:27px; height:22px; }

.price-flag{
  position:absolute; z-index:1; right: 40px; bottom: 72px;
  display:flex; flex-direction:column; gap:2px; align-items:flex-end;
  padding:18px 22px; border-radius:16px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.price-flag .was{ font-size:14px; color:rgba(255,255,255,.6); text-decoration: line-through; }
.price-flag .now{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--lime); line-height:1; }
.price-flag .cap{ font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:4px; }

/* Primary CTA (navy — green is reserved for highlights, not buttons) */
.btn-lime{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 28px; border:none; border-radius:10px;
  background: var(--navy); color:#fff; cursor:pointer;
  font-family:var(--font-sans); font-weight:700; font-size:16px; line-height:1;
  transition: transform .06s ease, filter .15s ease, box-shadow .2s ease;
  box-shadow: 0 12px 30px -12px rgba(11,17,44,.6);
}
.btn-lime:hover{ filter:brightness(1.14); }
.btn-lime:active{ transform: scale(.98); }
.btn-glass{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 24px; border-radius:10px; cursor:pointer;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); color:#fff;
  font-family:var(--font-sans); font-weight:600; font-size:15px;
  transition: background .15s ease;
}
.btn-glass:hover{ background: rgba(27,42,107,.55); border-color:#fff; }
/* outline CTA for light backgrounds */
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 24px; border-radius:10px; cursor:pointer;
  background: transparent; border:1.5px solid var(--navy); color:var(--navy);
  font-family:var(--font-sans); font-weight:600; font-size:15px;
  transition: background .15s ease;
}
.btn-outline:hover{ background: var(--main-jiren); }

/* ---------- Hero (split proposal) ---------- */
.hero-split{ display:grid; grid-template-columns: 1.02fr .98fr; min-height: 72vh; background: var(--surface-page); }
.hs-panel{ display:flex; align-items:center; padding: 72px 0; }
.hs-inner{ width:100%; max-width: 620px; margin:0 auto; padding: 0 52px; }
.hs-inner h1{ color: #141414; margin:16px 0 0; }
.hs-inner .lead{ margin-top:18px; max-width:520px; }
.hs-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:28px; }
.hs-provider{ display:inline-flex; align-items:center; gap:12px; margin-top:26px; }
.hs-provider .lbl{ letter-spacing:var(--tracking-caps); text-transform:uppercase; font-weight:700; font-size:11px; color:var(--text-secondary); }
.hs-lock{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy); cursor:pointer; text-decoration:none; }
.hs-lock:hover{ text-decoration:underline; }
.hs-media{ position:relative; overflow:hidden; min-height: 72vh; }
.hs-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.hs-flag{
  position:absolute; z-index:2; left:32px; bottom:32px;
  display:flex; flex-direction:column; gap:2px;
  padding:16px 20px; border-radius:14px;
  background: rgba(12,19,48,.62); border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); color:#fff;
}
.hs-flag .was{ font-size:13px; color:rgba(255,255,255,.65); text-decoration:line-through; }
.hs-flag .now{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--lime); line-height:1; }
.hs-flag .cap{ font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:3px; }

/* ---------- Trust bar ---------- */
.trust{ background: var(--ink); color:#fff; }
.trust-grid{ display:grid; grid-template-columns: repeat(4, 1fr); }
.trust-cell{ padding: 40px 32px; border-left:1px solid rgba(255,255,255,.1); }
.trust-cell:first-child{ border-left:none; }
.trust-cell .k{ font-family:var(--font-display); font-weight:700; font-size: clamp(28px,3vw,40px); line-height:1; display:flex; align-items:baseline; gap:6px; }
.trust-cell .k .u{ font-size:16px; color:var(--lime); font-weight:600; }
.trust-cell .k .u.strike{ text-decoration:line-through; color:rgba(255,255,255,.5); }
.trust-cell .l{ margin-top:12px; font-size:14.5px; line-height:1.45; color: rgba(255,255,255,.66); }
.trust-cell .ico{ color: var(--lime); margin-bottom:16px; opacity:.95; }

/* ---------- Generic section header ---------- */
.sec-head{ max-width: 760px; }
.sec-head h2{ margin:16px 0 0; }
.sec-head .lead{ margin-top:18px; }
.sec-link{ display:inline-flex; align-items:center; gap:7px; margin-top:22px; font-weight:600; font-size:15px; color:var(--navy); cursor:pointer; }
.sec-link:hover{ text-decoration:underline; }

/* ---------- Reserva / pasos ---------- */
.reserva{ background: var(--surface-page); }
.steps-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px; align-items:start; }
.step-card{ background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow: var(--shadow-md); }
.step-top{ padding: 20px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.step-num{ width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.step-top .st{ font-weight:700; font-size:15px; }
.step-top .ss{ font-size:12.5px; color:var(--text-secondary); }
.step-body{ padding: 22px; }
.mini-label{ font-size:11px; font-weight:700; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-secondary); margin-bottom:10px; }
.day-opt{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.day-opt.sel{ border-color:var(--navy); background: var(--main-jiren); }
.slot-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.slot{ border:1px solid var(--border); border-radius:8px; padding:9px 0; text-align:center; font-size:13px; font-weight:600; color:var(--text-secondary); }
.slot.sel{ border-color:var(--navy); background:var(--navy); color:#fff; }
.field-mock{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:14px; color:var(--text-secondary); background:var(--surface-field); margin-bottom:10px; }
.confirm-check{ width:64px; height:64px; border-radius:50%; background: var(--status-success-bg); color:var(--status-success); display:flex; align-items:center; justify-content:center; margin:6px auto 18px; }
.summary-row{ display:flex; align-items:center; gap:10px; font-size:14px; padding:10px 0; border-bottom:1px dashed var(--border); }
.summary-row .lab{ color:var(--text-secondary); }
.summary-row .val{ margin-left:auto; font-weight:600; }

/* ---------- Alianza (dark) ---------- */
.alianza{ background:
    radial-gradient(1200px 600px at 80% -10%, rgba(212,253,6,.10), transparent 60%),
    linear-gradient(180deg, #0c1330 0%, #10173a 100%);
  color:#fff; }
.alianza .lead{ color: rgba(255,255,255,.72); }
.alianza-top{ display:grid; grid-template-columns: 1.15fr .85fr; gap:56px; align-items:end; }
.alianza-photo{ border-radius:20px; overflow:hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-xl); }
.alianza-photo img{ width:100%; height:100%; object-fit:cover; }
.pract-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; margin-top:56px; }
.pract{ display:flex; gap:16px; padding:24px; border-radius:16px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.pract .pico{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; background: rgba(212,253,6,.14); color:var(--lime); display:flex; align-items:center; justify-content:center; }
.pract h4{ font-family:var(--font-sans); font-weight:700; font-size:16px; margin:0 0 6px; }
.pract p{ font-size:14px; line-height:1.5; color:rgba(255,255,255,.66); }
.quote{ margin-top:64px; border-left:3px solid var(--lime); padding: 6px 0 6px 28px; }
.quote blockquote{ margin:0; font-family:var(--font-display); font-weight:600; font-size: clamp(24px,2.8vw,38px); line-height:1.2; }
.quote cite{ display:block; margin-top:16px; font-style:normal; font-size:14px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:rgba(255,255,255,.6); }
.alianza-close{ margin-top:56px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); font-size:17px; line-height:1.55; color:rgba(255,255,255,.8); max-width:720px; }

/* ---------- Cardisio info ---------- */
.cardisio-info{ background:#fff; }
.ci-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:48px; }
.ci-card{ padding:26px; border:1px solid var(--border); border-radius:16px; background: var(--surface-page); }
.ci-card .cico{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(46,125,50,.12); color: var(--supportive-roshi); margin-bottom:16px; }
.ci-card h4{ font-family:var(--font-sans); font-weight:700; font-size:16px; margin:0 0 6px; color: var(--text-primary); }
.ci-card p{ font-size:14px; line-height:1.5; color: var(--text-secondary); }
.ci-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:40px; padding-top:32px; border-top:1px solid var(--border); }
.ci-foot p{ font-size:15px; line-height:1.55; color:var(--text-secondary); max-width:640px; }
.ci-disclaimer{ margin-top:20px; font-size:12px; color:var(--text-tertiary); }

/* ---------- Sobre Pulse ---------- */
.sobre-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:64px; align-items:center; }
.sobre-media{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap:14px; }
.sobre-media .m{ border-radius:16px; overflow:hidden; box-shadow: var(--shadow-md); }
.sobre-media .m img{ width:100%; height:100%; object-fit:cover; }
.sobre-media .tall{ grid-row: span 2; }
.sobre-body p{ font-size:16.5px; line-height:1.62; color:var(--text-secondary); margin-top:18px; }
.sobre-body p:first-of-type{ margin-top:0; }
.sig{ margin-top:28px; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--navy); }

/* ---------- Cierre ---------- */
.cierre{ position:relative; color:#fff; overflow:hidden; }
.cierre-media{ position:absolute; inset:0; z-index:0; }
.cierre-media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.cierre-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,19,48,.86), rgba(12,19,48,.92)); }
.cierre-inner{ position:relative; z-index:1; text-align:center; max-width:820px; margin:0 auto; }
.cierre-inner h2{ margin: 22px 0 0; }
.cierre-inner .lead{ color:rgba(255,255,255,.82); margin: 20px auto 0; max-width:600px; }
.cierre-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:36px; }

/* ---------- Footer ---------- */
.footer{ background:#070b1c; color:rgba(255,255,255,.6); padding: 56px 0 40px; font-size:14px; }
.footer-top{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer .brand-lock{ color:#fff; }
.footer .pulse-logo{ width:104px; height:35px; }
.cardisio-foot{ display:inline-flex; align-items:center; gap:7px; }
.cardisio-foot:hover{ text-decoration:none; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h5{ color:#fff; font-family:var(--font-sans); font-size:13px; letter-spacing:var(--tracking-caps); text-transform:uppercase; margin:0 0 14px; }
.footer-col a{ display:block; color:rgba(255,255,255,.6); margin-bottom:9px; font-size:14px; }
.footer-col a:hover{ color:#fff; text-decoration:none; }
.footer-bottom{ padding-top:28px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.5px; }

/* ---------- Modal (replaces DS Modal) ---------- */
.modal-scrim{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px;
  background: var(--surface-scrim); backdrop-filter: blur(2px);
}
.modal-scrim.open{ display:flex; }
.modal{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  width:100%; max-width:820px; max-height: 90vh; display:flex; flex-direction:column; overflow:hidden;
}
.modal.sm{ max-width:440px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 22px 24px; border-bottom:1px solid var(--border); }
.modal-head h3{ font-family:var(--font-display); font-weight:700; font-size:20px; }
.modal-close{ width:36px; height:36px; border-radius:50%; border:none; background: var(--main-heles); color: var(--text-secondary); font-size:20px; line-height:1; cursor:pointer; flex:0 0 auto; }
.modal-close:hover{ background: var(--main-jiren); color: var(--navy); }
.modal-body{ padding: 22px 24px; overflow:auto; }
.modal-foot{ padding: 16px 24px; border-top:1px solid var(--border); }
.cal-frame{ width:100%; height:600px; border:none; border-radius:12px; background:var(--surface-page); }
.cal-fallback{ margin-top:12px; font-size:13px; color:var(--text-secondary); text-align:center; }

/* results modal form bits */
.field{ display:block; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.field input{ width:100%; height:48px; border:1px solid var(--border); border-radius:10px; padding:0 14px; font-size:15px; font-family:inherit; background:var(--surface-field); }
.field input:focus{ outline:none; border-color:var(--border-focus); box-shadow:0 0 0 3px var(--main-jiren); }
.code-inputs{ display:flex; gap:10px; justify-content:center; }
.code-inputs input{ width:44px; height:54px; text-align:center; font-size:22px; font-weight:700; border:1.5px solid var(--border); border-radius:10px; background:#fff; font-family:inherit; }
.code-inputs input:focus{ outline:none; border-color:var(--border-focus); box-shadow:0 0 0 3px var(--main-jiren); }
.btn-lime[disabled]{ opacity:.45; cursor:not-allowed; filter:none; }
.link-btn{ display:block; margin:18px auto 0; background:none; border:none; color:var(--text-secondary); font-size:13.5px; font-weight:600; cursor:pointer; }
.modal-error{ margin:14px 0 0; font-size:13.5px; line-height:1.5; color:var(--status-danger); text-align:center; }
.modal-error[hidden]{ display:none; }

/* ---------- Reveal on scroll (only hidden when JS is present) ---------- */
.js .reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* responsive */
@media (max-width: 960px){
  .sec{ padding: 72px 0; }
  .nav-links{ display:none; }
  .trust-grid{ grid-template-columns: repeat(2,1fr); }
  .trust-cell:nth-child(-n+2){ border-top:none; }
  .trust-cell:nth-child(odd){ border-left:none; }
  .trust-cell{ border-top:1px solid rgba(255,255,255,.1); }
  .steps-grid{ grid-template-columns: 1fr; }
  .ci-grid{ grid-template-columns: repeat(2,1fr); }
  .hero-split{ grid-template-columns: 1fr; }
  .hs-media{ min-height: 46vh; order:-1; }
  .hs-panel{ padding: 48px 0; }
  .hs-inner{ padding: 0 28px; }
  .alianza-top{ grid-template-columns: 1fr; gap:40px; }
  .alianza-photo{ max-width:420px; }
  .pract-grid{ grid-template-columns: 1fr; }
  .sobre-grid{ grid-template-columns: 1fr; gap:36px; }
  .price-flag{ display:none; }
}
@media (max-width: 560px){
  .wrap{ padding: 0 20px; }
  .hero{ min-height: 72vh; }
  .trust-grid{ grid-template-columns: 1fr; }
  .ci-grid{ grid-template-columns: 1fr; }
  .trust-cell{ border-left:none; }
  .hero-actions .btn-lime, .hero-actions .btn-glass{ width:100%; }
  .cal-frame{ height:70vh; }
}