: the header, disclaimer and footer are the frozen dark chrome (ruling: same as the homepage) and keep site.css as-is. Collision guard: site.css's dark-theme tokens mean the opposite of V4's (--ink is LIGHT text there). Inside .v4-main they are re-pointed to light- theme values, so any site.css rule that still reaches into

resolves to readable colours instead of dark-mode ones; every component used in

is then styled explicitly below. Contrast: reading text and links here meet WCAG AA (4.5:1). Where the homepage card palette falls short on white (#2d7df4 links 3.9:1, the grey meta lines ~4.1:1) inner pages use AA shades of the same hues. */ .v4-main{ --ink:var(--v4-ink); --ink-soft:#3b5165; --muted:#56697a; --faint:#5d7081; --line:rgba(14,46,91,.14); --line-2:rgba(14,46,91,.24); --paper:#f7f9fe; --paper-2:#eef4fc; --paper-3:#e8f1fb; --card:#fff; --ink-deep:#fff; --blue:#1f63d0; --accent:#1f63d0; --accent-dark:#174fa8; --accent-light:#d9e8ff; --serif:var(--v4-serif); --sans:var(--v4-sans); --v4-link:#1f63d0; /* AA link blue on white / light tints */ --v4-meta:#56697a; /* AA grey for small meta lines */ display:flow-root; /* contain child margins, so the dark never shows through a collapsed margin */ color:var(--v4-ink); background:#f7f9fe; font-family:var(--v4-sans); } .v4-main a:focus-visible,.v4-main button:focus-visible,.v4-main summary:focus-visible{outline-color:var(--v4-link)} /* ---------- page hero (every inner page) ---------- */ .v4-main .page-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(64px,8vw,96px) 0 clamp(52px,6vw,72px);border-bottom:0;color:#fff;background:linear-gradient(135deg,#0a2759 0%,#10448f 100%)} .v4-main .page-hero::before{content:"";position:absolute;z-index:-1;left:-12%;top:-60%;width:70%;height:190%;border-radius:50%;background:radial-gradient(circle,rgba(49,132,255,.2),transparent 62%);pointer-events:none} .v4-main .page-hero::after{content:"";position:absolute;z-index:-1;right:-110px;top:-170px;width:380px;height:380px;border:1px solid rgba(139,207,255,.26);border-radius:50%;box-shadow:0 0 0 40px rgba(139,207,255,.08),0 0 0 81px rgba(139,207,255,.05);pointer-events:none} .v4-main .page-hero .crumbs{margin-bottom:18px;color:#aeecea;font-family:var(--v4-sans);font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1.5;text-transform:uppercase} .v4-main .page-hero .crumbs a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px} .v4-main .page-hero h1{max-width:22ch;color:#fff;font-family:var(--v4-serif);font-size:var(--v4-display-3);font-weight:500;line-height:1.02;letter-spacing:-.045em;text-transform:none;overflow-wrap:break-word;hyphens:auto} .v4-main .page-hero p.lead{max-width:62ch;margin-top:18px;color:#dbeaff;font-size:17px;line-height:1.6} .v4-main .page-hero p.lead a{color:#fff;text-decoration:underline;text-underline-offset:3px} /* ---------- shared bits inside V4 inner pages ---------- */ .v4-main .note{margin:24px 0;padding:16px 20px;border:1.5px solid rgba(120,181,239,.34);border-left:3px solid var(--v4-blue);border-radius:14px;background:#fff;color:var(--ink-soft);font-size:14.5px;line-height:1.6;box-shadow:var(--v4-shadow-soft)} .v4-main .note b,.v4-main .note strong{color:var(--v4-navy)} .v4-main .note a{color:var(--v4-link);text-decoration:underline;text-underline-offset:2px} .v4-main .note.warn{border-left-color:#c77a1e;background:#fffaf2} /* ---------- /productos ---------- */ .v4-main .treatments-section{padding:clamp(40px,6vw,64px) 0 clamp(72px,9vw,104px)} /* checkout-terms disclosures (native

; text unchanged, styling only) */ .v4-main .chk-note{padding:14px 18px} .v4-main .chk-note .chk-summary{color:var(--v4-ink);font-size:14px} .v4-main .chk-note .chk-toggle,.v4-main .chk-note .chk-caret{color:var(--v4-link)} .v4-main .chk-note .chk-detail{border-top-color:var(--v4-line);color:var(--ink-soft)} .v4-main .chk-note .chk-detail li{margin:6px 0} .v4-catalog-cat{padding:56px 0 44px;border-top:1px solid var(--v4-line)} .v4-catalog-cat:first-of-type{margin-top:48px} .v4-main .v4-catalog-cat .cat-label{display:flex;align-items:center;gap:14px;margin:0 0 12px;scroll-margin-top:100px;color:var(--v4-navy);font-family:var(--v4-serif);font-size:clamp(1.9rem,3.1vw,2.6rem);font-weight:500;line-height:1.04;letter-spacing:-.045em} /* the homepage's own category glyphs, as decoration (not part of the text) */ .v4-main .v4-catalog-cat .cat-label::before{content:attr(data-icon);content:attr(data-icon) / "";flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border:1.5px solid rgba(120,181,239,.4);border-radius:50%;background:radial-gradient(circle at 33% 27%,#fff 0 12%,#e3f6f8 45%,#cfe9f5 100%);color:#1b7f86;font-family:Georgia,serif;font-size:21px;font-weight:400;letter-spacing:0;line-height:1} .v4-catalog-cat__body{max-width:70ch;margin:0 0 26px;color:var(--ink-soft);font-size:16px;line-height:1.6} .v4-catalog-cat__note{max-width:80ch;margin:18px 0 0;color:var(--v4-meta);font-size:12.5px;line-height:1.55} /* card system on light pages: AA shades for the small meta text and links */ .v4-main .v4-card__format,.v4-main .v4-card-grid .treatment-card .card-name-en, .v4-main .v4-card__req,.v4-main .v4-card-grid .treatment-card .rx-disclaimer, .v4-main .v4-card-grid .treatment-card .card-renew{color:var(--v4-meta)} .v4-main .v4-card__desc,.v4-main .v4-card-grid .treatment-card .card-desc{color:#50687a} .v4-main .v4-text-link,.v4-main .v4-refund-link, .v4-main .v4-card-grid .treatment-card .btn-card-primary, .v4-main .v4-card-grid .treatment-card .btn-card-secondary{color:var(--v4-link)} .v4-main .v4-card-grid .treatment-card .btn-card-primary:hover{color:var(--accent-dark)} .v4-main .v4-card-grid .treatment-card .btn-card-secondary{text-decoration:underline;text-underline-offset:2px} .v4-main .v4-card-grid .treatment-card .card-renew{letter-spacing:0} .v4-main .v4-eyebrow--blue{color:var(--v4-link)} .v4-main .v4-hair-summary{margin-top:4px} /* ---------- eyebrows + buttons inside

---------- */ .v4-main .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--v4-link);font-family:var(--v4-sans);font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase} .v4-main .page-hero .eyebrow{margin-bottom:12px;color:#aeecea} .v4-main .btn{gap:8px;padding:15px 24px;border-radius:100px;font-family:var(--v4-sans);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;transition:transform 160ms var(--v4-ease),box-shadow 160ms var(--v4-ease),background 160ms var(--v4-ease)} .v4-main .btn-lg{padding:16px 28px;font-size:15px} .v4-main .btn-primary{color:#fff;background:var(--v4-link)} .v4-main .btn-primary:hover{background:#174fa8;transform:translateY(-2px);box-shadow:0 10px 24px rgba(4,24,58,.22)} .v4-main .btn .arrow{width:16px;height:16px} /* ---------- reading scale (articles, FAQ, legal, safety) ---------- */ .v4-main .prose{color:#34495c} .v4-main .prose h2{margin:46px 0 12px;color:var(--v4-navy);font-family:var(--v4-serif);font-size:var(--v4-reading-h2);font-weight:500;line-height:1.14;letter-spacing:-.03em} .v4-main .prose h3{margin:30px 0 8px;color:var(--v4-navy);font-family:var(--v4-sans);font-size:var(--v4-reading-h3);font-weight:700;line-height:1.3;letter-spacing:-.01em} .v4-main .prose p,.v4-main .prose ul,.v4-main .prose ol{color:#34495c;font-size:var(--v4-text-reading);line-height:1.72} .v4-main .prose li{margin:8px 0} .v4-main .prose li::marker{color:var(--v4-blue)} .v4-main .prose a{color:var(--v4-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere} /* long URLs used as link text (HIPAA notice) wrap on phones */ .v4-main .prose a:hover{color:#174fa8} .v4-main .prose strong,.v4-main .prose b{color:var(--v4-navy)} .v4-main .prose .updated{margin-bottom:10px;color:var(--v4-meta);font-family:var(--v4-sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .v4-main .prose .updated a{color:var(--v4-link)} .v4-main .prose .muted{color:var(--v4-meta)} .v4-main .prose table{font-size:15px} .v4-main .prose th,.v4-main .prose td{border-color:var(--v4-line);color:#34495c} .v4-main .prose th{color:var(--v4-navy);font-family:var(--v4-sans);font-weight:700;background:#eef4fc} /* ---------- FAQ (ES + EN): 25 question h2s as a compact Q&A list ---------- */ .v4-faq .prose h2{margin:30px 0 0;padding-top:28px;border-top:1px solid var(--v4-line);font-size:clamp(1.28rem,1.9vw,1.5rem);line-height:1.22;letter-spacing:-.02em} .v4-faq .prose .updated+h2{margin-top:18px;padding-top:0;border-top:0} .v4-faq .prose h2+p{margin-top:10px} /* ---------- hub cards (Aprende / Education, Safety) ---------- */ .v4-main .cats{gap:16px} .v4-main .cat{position:relative;overflow:hidden;min-height:0;padding:26px 28px;border:var(--v4-border-card);border-radius:var(--v4-radius);background:#fff;color:var(--v4-ink);box-shadow:var(--v4-shadow-card);transition:transform 180ms var(--v4-ease),box-shadow 180ms var(--v4-ease),border-color 180ms var(--v4-ease)} .v4-main .cat:hover{transform:translateY(-4px);border-color:rgba(45,125,244,.73);box-shadow:0 20px 37px rgba(3,23,59,.24),inset 0 1px 0 #fff} .v4-main .cat::after{content:"";position:absolute;z-index:0;right:-36px;bottom:-39px;width:108px;height:108px;border-radius:50%;background:#cdeaff;opacity:.72;pointer-events:none} .v4-main .cat:nth-child(4n+2)::after{background:#c9f0eb} .v4-main .cat>*{position:relative;z-index:1} .v4-main .cat .tag,.v4-main .cat.weight .tag{align-self:flex-start;padding:6px 9px;border-radius:100px;color:#147273;background:#d9f5f1;font-family:var(--v4-sans);font-size:9.5px;font-weight:700;letter-spacing:.09em;line-height:1.3;text-transform:uppercase} .v4-main .cat h3{margin-top:14px;color:var(--v4-navy);font-family:var(--v4-serif);font-size:24px;font-weight:500;line-height:1.1;letter-spacing:-.035em;text-transform:none} .v4-main .cat p{max-width:60ch;margin-top:10px;color:#50687a;font-size:15px;line-height:1.55} .v4-main .cat .more{margin-top:auto;padding-top:18px;color:var(--v4-link);font-family:var(--v4-sans);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none} /* ---------- long-form article / advertorial (.adv) ---------- */ .v4-main .adv{padding:64px 0 72px} .v4-main .adv .eyebrow{margin-bottom:16px} .v4-main .adv h1{color:var(--v4-navy);font-family:var(--v4-serif);font-size:var(--v4-display-3);font-weight:500;line-height:1.04;letter-spacing:-.045em;text-transform:none} .v4-main .adv .deck{margin-top:18px;color:#34495c;font-size:19px;line-height:1.55} .v4-main .adv .byline{margin-top:20px;padding-bottom:22px;border-bottom:1px solid var(--v4-line);color:var(--v4-meta);font-family:var(--v4-sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .v4-main .adv .lede{color:#34495c;font-size:18.5px;line-height:1.78} .v4-main .adv .lede::first-letter{color:var(--v4-link);font-family:var(--v4-serif);font-weight:600;font-size:64px;line-height:.8} .v4-main .adv p{color:#34495c;font-size:var(--v4-text-reading);line-height:1.8} .v4-main .adv h2{margin:44px 0 6px;color:var(--v4-navy);font-family:var(--v4-serif);font-size:var(--v4-reading-h2);font-weight:500;line-height:1.14;letter-spacing:-.03em;text-transform:none} .v4-main .adv strong{color:var(--v4-navy)} .v4-main .adv a{color:var(--v4-link)} .v4-main .adv ul li{color:#34495c} .v4-main .adv .pull{border-left-color:var(--v4-blue);color:var(--v4-navy);font-family:var(--v4-serif);font-size:24px;font-weight:500;line-height:1.35;letter-spacing:-.02em} .v4-main .adv .offerbox{position:relative;overflow:hidden;padding:40px 34px;border:1px solid rgba(104,178,255,.42);border-radius:var(--v4-radius-lg);background:linear-gradient(130deg,#0b285d,#0d438e);box-shadow:0 19px 38px rgba(3,25,64,.2)} .v4-main .adv .offerbox::after{content:"";position:absolute;right:-85px;bottom:-160px;width:330px;height:330px;border:1px solid rgba(139,207,255,.28);border-radius:50%;box-shadow:0 0 0 36px rgba(139,207,255,.1),0 0 0 72px rgba(139,207,255,.06);pointer-events:none} .v4-main .adv .offerbox>*{position:relative;z-index:1} .v4-main .adv .offerbox h3{color:#fff;font-family:var(--v4-serif);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:500;line-height:1.1;letter-spacing:-.035em;text-transform:none} .v4-main .adv .offerbox p{color:#d8e9ff} .v4-main .adv .offerbox .btn-primary{background:#fff;color:var(--v4-navy)} .v4-main .adv .offerbox .btn-primary:hover{background:#e7f1ff} .v4-main .adv .disc{border-top-color:var(--v4-line);color:var(--v4-meta);font-size:12.5px} .v4-main .adv .disc a{color:var(--v4-link)} /* ---------- stat line + compare (licensed vs gray market) ---------- */ .v4-main .statline{border:1.5px solid rgba(120,181,239,.34);border-radius:14px;background:#fff;color:#34495c;box-shadow:var(--v4-shadow-soft)} .v4-main .statline b{color:var(--v4-navy)} .v4-main .compare .col{border-radius:14px;background:#fff;border:1.5px solid var(--v4-line)} .v4-main .compare .col.bad{background:#fff6f3;border-color:#f0cdc2} .v4-main .compare .col.good{background:#f3faf0;border-color:#cfe3c4} .v4-main .compare .col h4{font-family:var(--v4-sans);font-size:13px;letter-spacing:.06em} .v4-main .compare .col.bad h4,.v4-main .compare .col.bad li::before{color:#a8401f} .v4-main .compare .col.good h4,.v4-main .compare .col.good li::before{color:#3b6f25} .v4-main .compare li{color:#34495c} /* the article list's check-circle ::before also matched these items, stacking a check under every x/check */ .v4-main .adv .compare li::before{width:auto;height:auto;border-radius:0;background:none} /* ---------- safety: boxed warning (regulated text -- the most prominent block on the page) ---------- */ .v4-main .boxed-warning{margin:28px 0 36px;padding:20px 24px;border:1.5px solid #efc3ba;border-left:5px solid #c4352b;border-radius:14px;background:#fff5f3;color:#3f2a26;font-size:15px;line-height:1.65;box-shadow:var(--v4-shadow-soft)} .v4-main .boxed-warning b{color:#a3261c;font-family:var(--v4-sans);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* ---------- section heads + bands (pharmacies) ---------- */ .v4-main .head{max-width:760px} .v4-main .head h2{margin-top:12px;color:var(--v4-navy);font-family:var(--v4-serif);font-size:clamp(2rem,3.4vw,3rem);font-weight:500;line-height:1.03;letter-spacing:-.045em;text-transform:none} .v4-main .head p{color:#50687a;font-size:16px} .v4-main .head p strong{color:var(--v4-navy)} .v4-main .how{background:#eef4fc;border-top:1px solid var(--v4-line);border-bottom:1px solid var(--v4-line)} /* ---------- pharmacy + credential + contact cards ---------- */ .v4-main .pharm-card,.v4-main .contact-card{position:relative;overflow:hidden;padding:28px;border:var(--v4-border-card);border-radius:var(--v4-radius);background:#fff;color:var(--v4-ink);box-shadow:var(--v4-shadow-card);transition:transform 180ms var(--v4-ease),box-shadow 180ms var(--v4-ease),border-color 180ms var(--v4-ease)} .v4-main .pharm-card:hover,.v4-main .contact-card:hover{transform:translateY(-4px);border-color:rgba(45,125,244,.73);box-shadow:0 20px 37px rgba(3,23,59,.24),inset 0 1px 0 #fff} .v4-main .pharm-card .pname{color:var(--v4-navy);font-family:var(--v4-serif);font-size:25px;font-weight:500;line-height:1.1;letter-spacing:-.035em;text-transform:none} .v4-main .pharm-card .pname a{color:var(--v4-navy);text-decoration:underline;text-decoration-color:rgba(31,99,208,.45);text-underline-offset:4px} .v4-main .pharm-card .ploc{color:var(--v4-meta)} .v4-main .pharm-card .ploc svg{color:var(--v4-blue)} .v4-main .pharm-card .pdesc{color:#50687a} .v4-main .chip{padding:6px 10px;border:0;border-radius:100px;color:#147273;background:#d9f5f1;font-family:var(--v4-sans);font-size:10px;font-weight:700;letter-spacing:.08em} .v4-main .cred{padding:22px 24px;border:1.5px solid rgba(45,125,244,.18);border-top:3px solid var(--v4-blue);border-radius:14px;background:#fff} .v4-main .cred h4{color:var(--v4-navy);font-family:var(--v4-serif);font-size:20px;font-weight:500;letter-spacing:-.02em;text-transform:none} .v4-main .cred p{color:#50687a} .v4-main .contact-card .ci{border:1.5px solid rgba(120,181,239,.4);border-radius:50%;background:radial-gradient(circle at 33% 27%,#fff 0 12%,#e7f3ff 50%,#d5e8fb 100%);color:var(--v4-link)} .v4-main .contact-card h3{color:var(--v4-navy);font-family:var(--v4-serif);font-size:24px;font-weight:500;letter-spacing:-.035em;text-transform:none} .v4-main .contact-card p{color:#50687a} .v4-main .contact-card a.big{color:var(--v4-link);font-family:var(--v4-sans);font-weight:700} /* ---------- final CTA box (navy statement card) ---------- */ .v4-main .final{border:1px solid rgba(104,178,255,.42);border-radius:var(--v4-radius-xl);background:linear-gradient(130deg,#0b285d,#0d438e);color:#fff;box-shadow:0 19px 38px rgba(3,25,64,.2)} .v4-main .final::after{content:"";position:absolute;right:-85px;bottom:-160px;width:370px;height:370px;border:1px solid rgba(139,207,255,.28);border-radius:50%;box-shadow:0 0 0 39px rgba(139,207,255,.12),0 0 0 79px rgba(139,207,255,.07);pointer-events:none} .v4-main .final-inner{position:relative;z-index:1} .v4-main .final h2{color:#fff;font-family:var(--v4-serif);font-size:clamp(2rem,3.6vw,3.2rem);font-weight:500;line-height:1.03;letter-spacing:-.045em;text-transform:none} .v4-main .final p{color:#d8e9ff} .v4-main .final .btn-primary{background:#fff;color:var(--v4-navy)} .v4-main .final .btn-primary:hover{background:#e7f1ff} /* ---------- a page's own disclaimer band inside

(pharmacies) ---------- */ .v4-main .disclaimer{background:#eef4fc;border-top:1px solid var(--v4-line)} .v4-main .disclaimer p{color:var(--v4-meta)} .v4-main .disclaimer a{color:var(--v4-link)} /* ================= responsive ================= */ @media (max-width:760px){ /* the safety hub's card grid carries an inline 2-column template that beat site.css's mobile rule (two squeezed cards on phones); only !important can override an inline style */ .v4-main .cats{grid-template-columns:1fr!important} } @media (max-width:560px){ .v4-main .page-hero h1{font-size:2.15rem} .v4-main .page-hero p.lead{font-size:16px} .v4-main .adv h1{font-size:2.15rem} .v4-main .adv .offerbox{padding:30px 22px} .v4-main .btn{white-space:normal;text-align:center} .v4-catalog-cat{padding-top:44px} .v4-main .v4-catalog-cat .cat-label{font-size:1.85rem;gap:12px} .v4-main .v4-catalog-cat .cat-label::before{width:40px;height:40px;font-size:19px} }