/* ============================================================ byclinics — 3 direcciones de diseño Conmutables con [data-dir="a|b|c"] en A · Clínico Claro (por defecto en :root) B · Tecnológico Profundo C · Humano Cálido ============================================================ */ /* ---------- Fondo del hero (base, dir A) ---------- */ .hero-bg{ background: radial-gradient(60% 80% at 88% -10%, var(--teal-100), transparent 60%), radial-gradient(40% 60% at 0% 100%, var(--coral-50), transparent 55%); } .hero-bg::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(currentColor 1px, transparent 1px); background-size:26px 26px;color:var(--teal-200);opacity:.4; -webkit-mask-image:radial-gradient(60% 60% at 70% 20%, #000, transparent 75%); mask-image:radial-gradient(60% 60% at 70% 20%, #000, transparent 75%); } /* ============================================================ DIRECCIÓN A — Clínico Claro (refinos sobre el default) ============================================================ */ [data-dir="a"]{ --bg:#f5fbfc; --r:16px; --r-lg:22px; --r-xl:30px; } [data-dir="a"] .section:nth-of-type(even){background:var(--surface)} /* ============================================================ DIRECCIÓN B — Tecnológico Profundo Hero oscuro, tipografía grande, energía coral, cristal ============================================================ */ [data-dir="b"]{ --bg:#f3f8fa; --ink:#0a1f27; --r:14px; --r-lg:20px; --r-xl:26px; --shadow-lg:0 40px 80px -30px rgba(3,40,48,.45), 0 12px 30px -14px rgba(13,38,48,.18); } [data-dir="b"] .hero{ background: radial-gradient(80% 120% at 80% -20%, #0a8aa0 0%, transparent 55%), linear-gradient(160deg, #052e38 0%, #07414f 55%, #045063 100%); color:#eaf7fa; } [data-dir="b"] .hero-bg{ background:none; } [data-dir="b"] .hero-bg::before{ color:rgba(122,219,231,.5);opacity:.18; -webkit-mask-image:radial-gradient(70% 70% at 30% 30%, #000, transparent 70%); mask-image:radial-gradient(70% 70% at 30% 30%, #000, transparent 70%); } [data-dir="b"] .hero-bg::after{ content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle, rgba(240,88,56,.45), transparent 65%);filter:blur(10px); } [data-dir="b"] .hero h1{color:#fff} [data-dir="b"] .hero h1 .hl{color:var(--teal-300)} [data-dir="b"] .hero h1 .hl-coral{color:var(--coral-300)} [data-dir="b"] .hero-sub{color:rgba(234,247,250,.82)} [data-dir="b"] .hero-badge{ background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#eaf7fa; backdrop-filter:blur(6px); } [data-dir="b"] .hero-badge b{color:#fff} [data-dir="b"] .hero-trust small{color:rgba(234,247,250,.72)} [data-dir="b"] .hero-trust .pts b{color:#fff} [data-dir="b"] .hero-trust .divider{background:rgba(255,255,255,.22)} [data-dir="b"] .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)} [data-dir="b"] .hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff} [data-dir="b"] .eh-lbl{color:#fff} /* glassy floating cards */ [data-dir="b"] .float-card{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.6)} [data-dir="b"] .mock{border-color:rgba(255,255,255,.5)} [data-dir="b"] .hero h1{font-size:clamp(2.6rem,5.8vw,4.5rem);font-weight:800} [data-dir="b"] .eyebrow{color:var(--teal-700)} [data-dir="b"] .section-head h2{font-size:clamp(2rem,4vw,3.2rem)} [data-dir="b"] .scard{border-radius:var(--r-lg)} [data-dir="b"] .btn-primary{box-shadow:0 14px 30px -10px rgba(240,88,56,.6)} /* ============================================================ DIRECCIÓN C — Humano Cálido Cálido, muy redondeado, formas orgánicas, teal+coral ============================================================ */ [data-dir="c"]{ --bg:#fbf7f3; --surface:#ffffff; --line:#efe6dd; --line-soft:#f6f0ea; --muted:#6b5d54; --ink:#2a2018; --ink-soft:#4a3d34; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --teal-50:#eafafc; --coral-50:#fff3ef; } [data-dir="c"] .hero-bg{ background:none; } [data-dir="c"] .hero-bg::before{ background-image:none; } /* organic blobs */ [data-dir="c"] .hero-bg::after{ content:"";position:absolute;inset:0; background: radial-gradient(38% 50% at 82% 18%, var(--coral-100), transparent 62%), radial-gradient(46% 56% at 8% 78%, var(--teal-100), transparent 60%), radial-gradient(30% 40% at 60% 90%, var(--coral-50), transparent 60%); } [data-dir="c"] .btn{font-weight:700} [data-dir="c"] .hero-badge{border-radius:999px;background:#fff} [data-dir="c"] .scard,[data-dir="c"] .spec,[data-dir="c"] .why-card,[data-dir="c"] .case,[data-dir="c"] .plan{ border-radius:var(--r-xl); } [data-dir="c"] .scard .s-ic,[data-dir="c"] .spec .sp-ic,[data-dir="c"] .why-card .w-ic,[data-dir="c"] .feat-point .fp-ic{ border-radius:50%; } [data-dir="c"] .mock{border-radius:var(--r-xl)} [data-dir="c"] .media-frame{border-radius:var(--r-xl)} [data-dir="c"] .section:nth-of-type(even){background:#fff} [data-dir="c"] .hero h1 .hl{color:var(--coral)} [data-dir="c"] .hero h1 .hl-coral{color:var(--teal)} [data-dir="c"] .eyebrow::before{background:var(--teal)} /* alternar acentos cálidos en tarjetas de servicio */ [data-dir="c"] .scard:nth-child(2) .s-ic,[data-dir="c"] .scard:nth-child(3) .s-ic{background:var(--coral-100);color:var(--coral-700)} /* ============================================================ Barra de control de direcciones (solo revisión de diseño) ============================================================ */ .dir-switch{display:none}