/* ==========================================================================
   OPOS Infermeria — capa de disseny v2 de subscripcio.html
   Es carrega DESPRÉS de styles-subscripcio.css. Mateix sistema que la landing.
   ========================================================================== */
:root{
  --bg:#f4f7f6;--surface:#ffffff;--surface-alt:#eef2f1;--border:#dfe7e5;--border-strong:#c9d5d2;
  --text:#0b1a2a;--text-2:#22333f;--text-muted:#4f6270;--text-faint:#8393a5;
  --brand:#0d9488;--brand-dark:#0f766e;--brand-bright:#2dd4bf;--brand-light:#ccfbf1;--brand-tint:#e6f7f4;
  --navy:#0b1c26;--navy-2:#10293a;--on-navy:#b9c8d1;
  --amber:#b45309;--amber-bg:#fff4e5;--amber-border:#f5d9b0;--amber-ink:#7c3a06;
  --sidebar-bg:#0b1c26;--sidebar-bg-alt:#10293a;
  --shadow:0 1px 2px rgba(11,26,42,.04),0 12px 32px rgba(11,26,42,.06);--shadow-lg:0 24px 60px rgba(11,26,42,.14);
  --radius-lg:18px;--radius-md:14px;--radius-sm:10px;
  --font-display:'Poppins',system-ui,sans-serif;--font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body{font-family:var(--font-body);font-size:17px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em}
.wrap{max-width:1120px;padding:0 24px}
.section{padding:80px 0}
.sectionHead{margin-bottom:36px;max-width:720px}
.sectionKicker{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:12px}
.sectionHead h2{font-size:clamp(28px,3.2vw,38px);font-weight:700;line-height:1.1;margin:0 0 10px;color:var(--text)}
.sectionHead p{font-size:18px;line-height:1.5;color:var(--text-muted);margin:0}

/* Hero (compacte) */
.hero{background:var(--navy);color:#fff;padding:0 0 200px;position:relative}
.hero::after{content:none}
.heroTop{height:84px;margin-bottom:40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:14px}
.heroBrand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.heroLogo{width:44px;height:44px;border-radius:13px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 4px rgba(45,212,191,.18),0 10px 26px rgba(13,148,136,.5);font-size:0}
.heroWordmark{display:flex;flex-direction:column;line-height:1}
.heroWordmark b{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.heroWordmark small{font-family:var(--font-display);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7fe3d3;margin-top:3px}
.heroTopRight{display:flex;align-items:center;gap:10px}
.langSwitch{background:transparent;border:1px solid rgba(255,255,255,.22);padding:3px}
.langBtn{color:#c4d2d9;font-size:13px;height:30px;padding:0 12px;font-family:var(--font-body)}
.langBtn.active{background:#fff;color:var(--navy)}
.backLink{color:var(--on-navy);font-size:14px;font-weight:600;text-decoration:none}
.heroNavLogin{background:transparent;border:1px solid rgba(255,255,255,.28);box-shadow:none;height:44px;padding:0 18px;border-radius:12px;font-family:var(--font-display);font-weight:600;font-size:14px;color:#fff;display:inline-flex;align-items:center;text-decoration:none}
.heroNavLogin:hover{background:rgba(255,255,255,.08);transform:none;box-shadow:none}
.heroBody{max-width:680px}
.heroKicker{background:rgba(13,148,136,.18);border:1px solid rgba(45,212,191,.35);color:#7fe3d3;font-size:13px;height:34px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:20px}
.heroBody h1{font-size:clamp(34px,4vw,50px);font-weight:700;line-height:1.08;margin:0 0 18px;letter-spacing:-.025em}
.heroBody p{font-size:19px;line-height:1.55;color:var(--on-navy);margin:0 0 24px}
.heroTrust{display:flex;flex-wrap:wrap;gap:10px 24px}
.heroTrust .trustItem{color:var(--on-navy);font-size:15px;display:inline-flex;align-items:center;gap:8px}
.heroTrust .emIco{color:var(--brand-bright)}
.logoPulse{stroke-dasharray:40;stroke-dashoffset:40;animation:logoDraw 4s ease-out infinite}
@keyframes logoDraw{0%{stroke-dashoffset:40;opacity:.4}20%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-40;opacity:.4}}
.logoRing{transition:stroke-dasharray .35s ease}
.heroBrand:hover .logoRing{stroke-dasharray:60 0}

/* Targeta de compra: puja sobre el hero */
.planWrap{margin-top:-160px;position:relative;z-index:2;padding:0 0 24px}
.planCard{max-width:600px;margin:0 auto;background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:40px;box-shadow:0 30px 70px rgba(11,26,42,.35);display:flex;flex-direction:column;gap:20px}
.planCard::before{content:none}
.planBadge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:32px;padding:0 12px;border-radius:999px;background:var(--amber-bg);color:var(--amber);font-size:13px;font-weight:700;border:none;margin:0}
.planPriceRow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0}
.planPrice{font-family:var(--font-display);font-size:72px;font-weight:700;line-height:1;letter-spacing:-.03em;margin:0;color:#fff}
.planPriceStrike{font-size:28px;font-weight:600;color:#8ea3af;text-decoration:line-through;margin-left:10px}
.planDiscountChip{height:30px;padding:0 12px;border-radius:999px;background:rgba(45,212,191,.16);color:#7fe3d3;font-size:13px;font-weight:700;display:inline-flex;align-items:center}
.planCountdown{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--on-navy);margin:0}
.planPriceNote{font-size:16px;color:var(--on-navy);margin:0}
.planFeatures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;font-size:16px}
.planFeatures li{display:flex;align-items:center;gap:10px;color:#fff}
.pfIcon{width:18px;height:18px;border-radius:999px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.planConsentRow{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.45;color:var(--on-navy);padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer}
.planConsentRow a{color:#7fe3d3;font-weight:700}
.planConsentRow input{width:20px;height:20px;accent-color:var(--brand);flex:none;margin-top:1px}
.planCta{font-family:var(--font-display);font-weight:600;font-size:18px;height:60px;border-radius:14px;background:var(--brand);color:#fff;border:none;cursor:pointer;box-shadow:0 10px 26px rgba(13,148,136,.35);transition:background .15s ease,transform .15s ease}
.planCta:hover{background:var(--brand-dark);transform:translateY(-1px)}
.planCta:disabled{opacity:.5;cursor:not-allowed;transform:none}
.planCtaMsg{font-size:14px;color:#fca5a5;text-align:center}
.planCtaMsg:empty{display:none}
.referralNote{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:var(--amber-ink);background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:12px;padding:14px 16px;margin:0}
.referralNote .emIco{color:var(--amber);flex:none;margin-top:1px}
.referralNote b{color:var(--amber)}

/* Marquesina de mètodes de pagament */
.payMarquee{position:relative;overflow:hidden;height:40px;border-radius:10px;background:rgba(255,255,255,.06);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.payTrack{display:flex;align-items:center;gap:10px;height:40px;padding:0 5px;width:max-content;animation:payScroll 22s linear infinite}
.payMarquee:hover .payTrack{animation-play-state:paused}
.payTrack span{height:28px;padding:0 12px;border-radius:7px;background:#fff;color:var(--text);font-family:var(--font-display);font-size:12px;font-weight:700;display:inline-flex;align-items:center;white-space:nowrap}
@keyframes payScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Valor */
.valueGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.valueCard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease}
.valueCard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.valueIcon{width:44px;height:44px;border-radius:12px;background:var(--brand-tint);color:var(--brand-dark);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.valueCard h3{font-size:19px;font-weight:600;margin:0 0 8px}
.valueCard p{font-size:16px;line-height:1.5;color:var(--text-muted);margin:0}

/* FAQ */
.faqList{border-top:1px solid var(--border)}
.faqItem{background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0;margin:0;box-shadow:none}
.faqItem summary{font-family:var(--font-display);font-size:18px;font-weight:600;padding:20px 40px 20px 0;color:var(--text)}
.faqItem p{font-size:16px;line-height:1.5;color:var(--text-muted);padding:0 0 20px;margin:0}

/* CTA final + footer */
.ctaBand{background:var(--navy);color:#fff;border-radius:28px;padding:56px 64px;margin:0 auto 64px;max-width:1072px;box-shadow:none;text-align:center}
.ctaBand h2{font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.1;margin:0 0 12px}
.ctaBand p{font-size:18px;color:var(--on-navy);max-width:640px;margin:0 auto 24px}
.ctaBandBtn{font-family:var(--font-display);font-weight:600;font-size:17px;height:56px;padding:0 26px;border-radius:14px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;text-decoration:none;box-shadow:0 10px 26px rgba(13,148,136,.32)}
.ctaBandBtn:hover{background:var(--brand-dark)}
.ctaNote{font-size:14px;color:var(--on-navy);margin-top:14px}
footer{border-top:1px solid var(--border);padding:32px 0 40px;font-size:14px;color:var(--text-muted);background:var(--bg);text-align:center;line-height:1.8}
footer a{color:var(--text-muted);font-weight:600}

@media (max-width:900px){.valueGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  body{font-size:16px}.section{padding:48px 0}.wrap{padding:0 20px}
  .heroTop{height:64px;margin-bottom:20px}.heroWordmark small{display:none}.backLink{display:none}
  .hero{padding-bottom:150px}.heroBody h1{font-size:32px}.heroBody p{font-size:17px}
  .planWrap{margin-top:-120px}.planCard{padding:24px;border-radius:20px}.planPrice{font-size:54px}
  .planFeatures{grid-template-columns:minmax(0,1fr)}.valueGrid{grid-template-columns:minmax(0,1fr)}
  .ctaBand{margin:0 16px 40px;padding:40px 24px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){.logoPulse,.payTrack{animation:none}.logoPulse{stroke-dashoffset:0}}

/* ===== v3: mateix llenguatge que la landing ===== */
:root{--navy:#070d12;--navy-2:#0f1b24;--brand-soft:#7fe3d3;--display:'Poppins',system-ui,sans-serif;--body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
.topBar,.hero{background:#070d12;position:relative}
.hero::before,.topBar::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;-webkit-mask:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%);mask:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%);pointer-events:none}
.topBar > *,.hero > *{position:relative}
.topBar{border-bottom:none}
.brand,.heroBrand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brandLogo,.heroLogo{width:44px;height:44px;border-radius:13px;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.4);color:#2dd4bf;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(45,212,191,.25);font-size:0;transition:transform .3s var(--ease)}
.brand:hover .brandLogo,.heroBrand:hover .heroLogo{transform:rotate(-6deg) scale(1.05)}
.brandText{display:flex;flex-direction:column;line-height:1}
.brandText b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;color:#fff}
.brandText small{font-family:var(--display);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7fe3d3;margin-top:3px}
.heroWordmark{display:none}
.logoPulse{stroke-dasharray:40;stroke-dashoffset:40;animation:logoDraw 4s ease-out infinite}
@keyframes logoDraw{0%{stroke-dashoffset:40;opacity:.35}20%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-40;opacity:.35}}
.liveDot{width:8px;height:8px;border-radius:999px;background:#2dd4bf;box-shadow:0 0 0 4px rgba(45,212,191,.3);animation:livePulse 1.8s ease-out infinite;flex:none;display:inline-block}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(45,212,191,.6)}70%{box-shadow:0 0 0 9px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}
.heroKicker{height:auto;min-height:34px;padding:7px 14px;line-height:1.3;white-space:normal;display:inline-flex;align-items:center;gap:10px;border-radius:20px;background:rgba(13,148,136,.18);border:1px solid rgba(45,212,191,.35);color:#7fe3d3;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.btnPrimary,.ctaBtn,.finalCtaBtn,.resultCtaBtn,.quizNextBtn,.planCta,.ctaBandBtn,.fbSubmitBtn,.accessCheckRow button,.leadBtn{position:relative;overflow:hidden;font-family:var(--display);font-weight:600;border-radius:14px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btnPrimary:hover,.ctaBtn:hover,.finalCtaBtn:hover,.resultCtaBtn:hover,.quizNextBtn:hover,.planCta:hover,.ctaBandBtn:hover,.leadBtn:hover{transform:translateY(-2px)}
.hero .btnPrimary,.planCta,.ctaBandBtn{background:#2dd4bf;color:#052e2b;box-shadow:0 0 0 4px rgba(45,212,191,.16),0 16px 40px rgba(45,212,191,.32)}
.planCta:hover,.ctaBandBtn:hover{background:#5eead4;color:#052e2b}
.planCard,.finalCta,.ctaBand,.priceCard{background:#0b1c26}
.ctaBand{background:#070d12}
.langSwitch{display:flex;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.22)}
.langBtn{height:30px;padding:0 12px;border-radius:999px;border:none;background:transparent;color:#c4d2d9;font-family:var(--body);font-weight:700;font-size:13px;cursor:pointer}
.langBtn.active{background:#fff;color:#070d12}
/* Prova: formulari de correu al resultat */
.leadForm{display:flex;flex-direction:column;gap:10px;margin:18px auto 14px;max-width:560px;text-align:left;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.leadTitle{font-family:var(--display);font-size:17px;font-weight:600;color:var(--text)}
.leadRow{display:flex;gap:8px}
.leadRow input[type=email]{flex-grow:1;height:50px;border:1px solid var(--border-strong);border-radius:12px;padding:0 14px;font-family:var(--body);font-size:16px;color:var(--text);background:var(--surface)}
.leadRow input[type=email]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(13,148,136,.15)}
.leadBtn{height:50px;padding:0 18px;border:none;background:var(--brand);color:#fff;font-size:15px;cursor:pointer;white-space:nowrap}
.leadBtn:disabled{opacity:.6;cursor:default;transform:none}
.leadNote{font-size:13px;color:var(--text-muted)}.leadNote.ok{color:#15803d;font-weight:700}
.leadForm.sent .leadRow{display:none}
.srOnly{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.leadRow{flex-direction:column}.brandText small{display:none}}

/* v3 — logos, tiquet, ganxo */
.payTrack span{height:40px;padding:0 16px;background:#fff;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.payTrack img{height:22px;width:auto;display:block}.payTrack span.txt{font-family:var(--display);font-weight:700;font-size:13px;color:#0b1a2a}
.codeTicket{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:14px;background:#fff1f2;border:1.5px dashed #fb7185;color:#9f1239}
.codeTicket > div{display:flex;flex-direction:column;gap:2px}
.codeLbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#e11d48}
.codeTicket b{font-family:var(--display);font-size:14px;font-weight:600;color:#9f1239;line-height:1.3}
.codeChip{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border-radius:10px;border:none;background:#e11d48;color:#fff;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;cursor:pointer;box-shadow:0 8px 20px rgba(225,29,72,.35);transition:transform .2s var(--ease),background .2s;flex:none;animation:codePulse 2.8s ease-in-out infinite}
.codeChip small{height:32px;padding:0 10px;border-radius:7px;background:rgba(255,255,255,.18);font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:0;display:inline-flex;align-items:center}
.codeChip:hover{transform:translateY(-2px);background:#be123c}.codeChip.done{background:#15803d;animation:none}
@keyframes codePulse{0%,100%{box-shadow:0 8px 20px rgba(225,29,72,.35)}50%{box-shadow:0 8px 28px rgba(225,29,72,.6)}}
.hookGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.hook{position:relative;padding:28px 22px 22px;background:var(--surface);border:1px solid var(--border);border-radius:18px;display:flex;flex-direction:column;gap:6px}
.hookNum{position:absolute;top:-14px;left:20px;width:30px;height:30px;border-radius:999px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:14px;box-shadow:0 0 0 5px var(--bg)}
.hook b{font-family:var(--display);font-size:17px;font-weight:600}.hook p{margin:0;font-size:15px;line-height:1.5;color:var(--text-muted)}
.hookQuote{grid-column:1/-1;margin:0;padding:24px 28px;border-radius:18px;background:#0b1c26;color:#fff;display:flex;flex-direction:column;gap:10px}
.hookQuote blockquote{margin:0;font-size:18px;line-height:1.5;color:#e8eef2}.hookQuote figcaption{font-size:14px;color:#9fb1bd;font-weight:600}
@media (max-width:760px){.hookGrid{grid-template-columns:minmax(0,1fr)}.codeTicket{flex-direction:column;align-items:flex-start}.codeChip{width:100%;justify-content:space-between}}
/* v2 (24/09/2026): preu més gran, etiqueta de pagament únic i accés a les proves gratuïtes */
.planPriceRow{flex-direction:column;align-items:center;gap:6px}
.planPrice{font-size:104px}
.planOnce{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7fe3d3}
.planCard .planCta{min-height:62px;font-size:19px}
.freeStrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin:28px auto 8px;max-width:900px}
.freeStripLbl{width:100%;text-align:center;font-size:15px;font-weight:600;color:var(--text-muted)}
.freeStripBtn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:700;font-size:15.5px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.freeStripBtn svg{flex:none;color:var(--brand)}
.freeStripBtn:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,26,42,.08)}
@media (max-width:640px){.planPrice{font-size:80px}.freeStrip{flex-direction:column;align-items:stretch}.freeStripBtn{justify-content:space-between}.freeStripBtn span{flex:1}}

/* «Tot el que tindràs disponible» v2: 8 targetes compactes (4 col · 2 al mòbil) */
.valueGrid2{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.valueGrid2 .valueCard{padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.valueGrid2 .valueIcon{width:40px;height:40px;margin-bottom:6px}
.valueGrid2 .valueCard h3{font-size:16.5px;margin:0}
.valueGrid2 .valueCard p{font-size:14.5px;line-height:1.45}
@media (max-width:900px){.valueGrid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.valueGrid.valueGrid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.valueGrid2 .valueCard{padding:14px 13px;border-radius:14px}.valueGrid2 .valueIcon{width:34px;height:34px;border-radius:10px}.valueGrid2 .valueIcon svg{width:18px;height:18px}.valueGrid2 .valueCard h3{font-size:15px}.valueGrid2 .valueCard p{font-size:13px}}
/* Mòbil (24/09): botó d'accés en una línia i lletra més continguda */
.heroNavLogin{white-space:nowrap}
@media (max-width:560px){
  .heroNavLogin{font-size:13px;padding:0 12px;height:38px}
  .heroBody h1{font-size:28px;line-height:1.12}
  .heroBody p{font-size:15.5px;line-height:1.5}
  .sectionHead h2{font-size:25px;line-height:1.15}
  .sectionHead p{font-size:15.5px}
  .faqItem summary{font-size:16px}
  .faqItem p{font-size:15px}
  .ctaBand h2{font-size:24px}
  .ctaBand p{font-size:15px}
}