/* ========================================================================== ViBa Clínica del Dolor — design tokens & shared styles Shared by index.html and tratamientos.html (Tailwind Play CDN + this file) ========================================================================== */ :root { --color-primary: #5B21B6; /* violet-800 — brand purple */ --color-primary-light: #7C3AED; /* violet-600 — hover / links */ --color-primary-soft: #8B5CF6; /* violet-500 — icon accents */ --color-primary-dark: #3B0764; /* violet-950 — gradients on dark */ --color-lavender-50: #F5F3FF; /* tinted section background */ --color-beige-50: #FBF7F0; /* warm alternate section background */ --color-beige-100: #F3EAD8; /* deeper beige for cards / borders */ --color-ink: #1C1425; /* near-black, purple-tinted — headings, footer */ --color-ink-soft: #4B4155; /* muted purple-tinted body copy */ --color-gold: #B7862C; /* sparing premium accent */ --color-border: #E7DFF5; } body { font-family: 'Inter', sans-serif; color: var(--color-ink-soft); } h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem); /* 28px móvil → 36px escritorio */ font-weight: 700; line-height: 1.15; color: var(--color-ink); text-wrap: balance; } .section-subtitle { font-family: 'Playfair Display', serif; font-size: 0.875rem; letter-spacing: 0.1em; color: var(--color-primary-light); font-weight: 600; } /* Header: subtle elevation once the page has scrolled past the hero */ #header.is-scrolled { box-shadow: 0 4px 20px -4px rgba(28, 20, 37, 0.15); } /* Scroll-reveal: elements start hidden and animate in once visible. Hidden state is gated on html.js (set by an inline script in ) so that with JavaScript disabled or failed, all content stays visible. */ html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > * { transition-delay: calc(var(--reveal-index, 0) * 90ms); } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } } /* Visible keyboard focus outside the form fields (nav links, buttons, cards) */ :where(a, button):focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; border-radius: 4px; } /* Skip-to-content link: visually hidden until keyboard focus */ .skip-link { position: absolute; top: -3rem; left: 1rem; z-index: 60; background: var(--color-primary); color: #fff; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 0.5rem; transition: top 0.2s ease; } .skip-link:focus { top: 1rem; } /* Trust badge chip used in the hero and treatment teasers */ .trust-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 0.8125rem; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: 999px; } /* Floating WhatsApp button: persistent shortcut to the main booking channel */ .whatsapp-float { position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: #25D366; color: #fff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .whatsapp-float:hover { transform: scale(1.06); box-shadow: 0 14px 30px -5px rgba(0, 0, 0, 0.4); } .whatsapp-float svg { width: 1.9rem; height: 1.9rem; fill: currentColor; } @media (prefers-reduced-motion: reduce) { .whatsapp-float, .whatsapp-float:hover { transition: none; transform: none; } } /* 16:9 frame for embedded videos (replaces the aspect-w/aspect-h plugin classes) */ .video-frame { aspect-ratio: 16 / 9; width: 100%; } .video-frame iframe { width: 100%; height: 100%; border: 0; } /* Gold divider rule under eyebrow labels */ .eyebrow-rule { display: block; width: 2.5rem; height: 2px; background: var(--color-gold); margin: 0.5rem auto 0; } .eyebrow-rule.align-left { margin: 0.5rem 0 0; } /* Contact form: submit feedback */ .submit-spinner { display: none; width: 1.1rem; height: 1.1rem; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } #contact-submit-button.is-loading .submit-spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .submit-spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.4); } } .form-status { display: none; font-size: 0.9rem; font-weight: 600; padding: 0.75rem 1rem; border-radius: 0.75rem; margin-bottom: 1rem; } .form-status.is-visible { display: block; } .form-status.is-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; } .form-status.is-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }