/* overflow-x must live on BOTH html and body: in standards mode most mobile browsers (Android/MIUI Chrome included) scroll the element, not — overflow-x:hidden on body alone does nothing there, and any decorative element with a negative offset (corner frames, blur circles) was making the whole page horizontally draggable and pushing fixed-position elements (burger, WhatsApp button) off-screen on real devices. */ html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; } /* !important: GeneratePress's own inline customizer CSS loads after this stylesheet and would otherwise win the body/heading/link cascade. */ body { margin: 0 !important; background: #0b0b0d !important; color: #f2f0ea !important; font-family: 'Archivo', sans-serif !important; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } h1, h2, h3, h4, h5, h6 { color: #f2f0ea !important; } p, div, span, li { color: inherit; } a { color: #f2f0ea; text-decoration: none !important; } ::selection { background: #d9b566; color: #0b0b0d; } /* Gradient "gold" text-clip effect used throughout — needs !important on background-clip itself, not just background/color, or the parent theme's CSS wins the cascade and it renders as a solid block instead of clipped text. */ [style*="background-clip: text"] { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } @keyframes yfZoom { from { transform: scale(1); } to { transform: scale(1.12); } } @keyframes yfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes yfPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.65); opacity: 0; } } @keyframes yfScrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(26px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } @keyframes yfShine { from { background-position: 200% center; } to { background-position: -200% center; } } @keyframes yfScan { 0% { top: 8%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 92%; opacity: 0; } } @keyframes yfEcg { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } } @keyframes yfBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes yfPanA { 0%,100% { object-position: 50% 30%; } 50% { object-position: 50% 70%; } } /* Contact form (Contacto page) */ input, select, textarea { font-family: 'Archivo', sans-serif; } input::placeholder, textarea::placeholder { color: rgba(242,240,234,.4); } input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(217,181,102,.8) !important; background: rgba(217,181,102,.06) !important; } select option { background: #141417; color: #f2f0ea; } /* Mobile menu (not part of the source designs — added for real-world usability) */ .yf-mobile-menu { position: fixed; inset: 0; z-index: 200; background: #0b0b0d; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 40px; transform: translateY(-100%); transition: transform .5s cubic-bezier(.22,.61,.36,1); } .yf-mobile-menu.is-open { transform: translateY(0); } .yf-mobile-nav { display: flex; flex-direction: column; align-items: center; gap: 26px; } .yf-mobile-nav a { font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; color: #f2f0ea; } .yf-mobile-nav a:hover { color: #d9b566; } .yf-mobile-close { position: absolute; top: 26px; right: 26px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: transparent; color: #f2f0ea; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .yf-mobile-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #0b0b0d; background: linear-gradient(115deg, #f3dfa3, #d3a84c 55%, #b8863b); } .yf-burger { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); background: transparent; cursor: pointer; align-items: center; justify-content: center; } .yf-burger span, .yf-burger span::before, .yf-burger span::after { content: ''; display: block; width: 18px; height: 2px; background: #f2f0ea; position: relative; } .yf-burger span::before { top: -6px; } .yf-burger span::after { top: 4px; } @media (max-width: 860px) { .yf-nav-desktop, .yf-cta-desktop { display: none !important; } .yf-burger { display: flex !important; } } /* ============================================================ RESPONSIVE — the source designs were built for a fixed desktop preview with no breakpoints. Below, every multi-column layout used across the 5 pages collapses to a single readable column on tablet/mobile. `display: block !important` is used instead of overriding grid-template-columns directly: on this server the inline `grid-template-columns: repeat(3, 1fr)` etc. kept winning over a `grid-template-columns: 1fr !important` media query in testing (children still rendered as 2 uneven tracks), so instead we drop these containers out of grid layout entirely at narrow widths, which reliably stacks every child full-width. ============================================================ */ @media (max-width: 980px) { .yf-cols-2, .yf-cols-3, .yf-cols-4, .yf-cols-4-hero, .yf-cols-2-rev, .yf-footer-grid, .yf-tratamiento-row, .yf-beneficio-row { display: block !important; } .yf-cols-2 > *, .yf-cols-3 > *, .yf-cols-4 > *, .yf-cols-4-hero > *, .yf-cols-2-rev > *, .yf-footer-grid > *, .yf-tratamiento-row > *, .yf-beneficio-row > * { width: 100% !important; grid-column: auto !important; grid-row: auto !important; } .yf-cols-2 > * + *, .yf-cols-3 > * + *, .yf-cols-4 > * + *, .yf-cols-4-hero > * + *, .yf-cols-2-rev > * + *, .yf-footer-grid > * + *, .yf-tratamiento-row > * + *, .yf-beneficio-row > * + * { margin-top: 22px; } /* Beneficios cards (Metodología): the right-aligned cards had a clamp() margin-left indent that no longer makes sense once stacked full-width. */ .yf-beneficio-row { margin-left: 0 !important; } /* "05" method card (Home): title + "Pide tu cita" button sat side by side with no wrap, pushing the button off the right edge on narrow screens. */ .yf-metodo5-card { align-items: flex-start !important; } .yf-metodo5-card > a { width: 100%; justify-content: center; } /* Clinica gallery (Home): the big video/photo cell had grid-row:span 2 at a fixed 280px row height — once stacked, give it (and every cell) a real height. */ .yf-cols-2-rev > * { height: 280px !important; } /* Tratamientos: reset the alternating image/text order once stacked, and let the util-section sticky sidebar (Metodología) behave like a normal block. */ .yf-tratamiento-row [style*="order: 1"], .yf-tratamiento-row [style*="order: 2"] { order: initial !important; } [style*="position: sticky"] { position: static !important; } } @media (max-width: 640px) { .yf-cols-4-hero { display: block !important; } } /* Small phones — the source hero headings use clamp() with a fixed desktop minimum (e.g. 56–118px) that doesn't shrink far enough below ~420px width and starts wrapping into 3+ lines / overflowing horizontally. */ @media (max-width: 480px) { h1 { font-size: clamp(32px, 11vw, 60px) !important; } section, header > div { padding-left: 20px !important; padding-right: 20px !important; } } /* Universal overflow safety net */ img, video, iframe { max-width: 100%; } body { max-width: 100vw; }