/* ================================================ 420CreaStack — theme-ui.css v5.0 Header, Footer, Base ================================================ */ /* ── Google Fonts loaded via PHP enqueue ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--cs420-body-font, 'Inter', sans-serif); overflow-x: clip; background: var(--cs420-bg, #f6f8fb); color: var(--cs420-text, #1a1a2e); -webkit-font-smoothing: antialiased; line-height: 1.65; /* overflow-x:hidden en body/html rompe position:sticky — NO ponerlo aquí */ } #page { display: flex; flex-direction: column; min-height: 100vh; width:100%; max-width:100%; overflow-x: clip; } #main { flex: 1; padding: 60px 0; } /* ── Ancho completo para páginas Elementor ──────────────────── */ /* Elementor añade .elementor-page al automáticamente */ .elementor-page #page, .elementor-page #main, .elementor-page .site-main { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .elementor-page .layout-full-width { padding: 0 !important; } /* ── Utilities ── */ .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 40px; } /* ================================================ HEADER BASE ================================================ */ .site-header { width: 100%; /* z-index base — el menú mobile va por encima con z-index propio */ z-index: 9990; } /* ── NORMAL: se desplaza con la página ── */ .site-header.mode-normal { position: relative; } /* ── STICKY: se queda pegado al llegar arriba ── */ .site-header.mode-sticky { position: sticky; top: 0; z-index: 9990; } /* ── FIXED: siempre visible sobre el contenido ── */ .site-header.mode-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; } /* ── TRANSPARENT: fijo, empieza transparente, se vuelve sólido al bajar ── */ .site-header.mode-transparent { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; } /* ── Sombra al hacer scroll (sticky + fixed) ── */ .site-header.mode-sticky.is-scrolled .header-nav, .site-header.mode-fixed.is-scrolled .header-nav { box-shadow: 0 2px 24px rgba(0,0,0,.10); border-color: rgba(0,0,0,.06); } /* ================================================ TOP BAR ================================================ */ .header-bar { background: var(--cs420-primary, #2d1b3d); height: 36px; /* fixed — never grows */ overflow: hidden; } .header-bar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; } .header-bar__contacts { display: flex; align-items: center; gap: 20px; min-width: 0; overflow: hidden; } .header-bar__link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.70); text-decoration: none; white-space: nowrap; transition: color .2s; line-height: 1; } .header-bar__link:hover { color: #fff; } .header-bar__link svg { flex-shrink: 0; } .header-bar__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cs420-primary, #2d1b3d); background: var(--cs420-secondary, #e8a0b4); text-decoration: none; padding: 4px 13px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; transition: opacity .2s; line-height: 1.4; } .header-bar__cta:hover { opacity: .88; } /* ================================================ MAIN NAV BAR ================================================ */ .header-nav { min-height: var(--cs420-header-height, 68px); background: rgba(255,255,255,.96); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(0,0,0,.08); transition: background .3s, box-shadow .3s, border-color .3s; } .header-nav__inner { min-height: var(--cs420-header-height, 68px); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; min-width: 0; width: 100%; } .header-nav, .header-nav__inner, .site-header { max-width: 100%; overflow-x: clip; } /* ── Logo ── */ .site-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; line-height: 1; min-width: 0; max-width: 100%; } .site-logo img, .site-logo .custom-logo { display: block; width: auto; height: auto; max-height: var(--cs420-logo-height, 48px); max-width: 200px; object-fit: contain; } .site-logo__mark { width: 38px; height: 38px; border-radius: 11px; background: var(--cs420-primary, #2d1b3d); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .site-logo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .site-logo__text b { display: block; font-size: 16px; font-weight: 700; color: var(--cs420-primary, #2d1b3d); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-logo__text small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #9baab8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Hamburger — siempre visible ── */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; border: 1px solid rgba(45,27,61,.14); border-radius: 10px; background: transparent; cursor: pointer; flex-shrink: 0; transition: background .15s; } .nav-toggle:hover { background: rgba(45,27,61,.05); } .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--cs420-text, #1a1a2e); border-radius: 2px; transition: transform .25s, opacity .25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── Nav overlay — siempre panel full-screen ── */ .primary-nav { display: none; min-width: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; max-width: 100vw; min-height: 100dvh; background: rgba(253,246,249,.985); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 99999; flex-direction: column; justify-content: center; align-items: stretch; padding: max(80px, env(safe-area-inset-top, 0px) + 56px) 32px max(40px, env(safe-area-inset-bottom, 0px) + 16px); overflow-y: auto; overflow-x: hidden; } .primary-nav.is-open { display: flex !important; animation: navIn .22s ease; } @keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Nav list dentro del overlay */ .nav-list { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 0; list-style: none; width: 100%; max-width: 480px; margin: 0 auto; } .nav-list li { list-style: none; border-bottom: 1px solid rgba(45,27,61,.06); } .nav-list li:last-child { border-bottom: none; } .nav-list a { display: flex; align-items: center; padding: 18px 8px; font-size: 18px; font-weight: 500; color: var(--cs420-text, #1a1a2e); text-decoration: none; transition: color .15s, padding-left .15s; } .nav-list a:hover, .nav-list .current-menu-item > a, .nav-list .current_page_item > a { color: var(--cs420-primary, #2d1b3d); padding-left: 16px; } /* CTA dentro del overlay */ .nav-cta { display: flex !important; align-items: center; justify-content: center; gap: 6px; background: var(--cs420-primary, #2d1b3d); color: #fff !important; text-decoration: none; font-size: 15px; font-weight: 600; padding: 15px 28px; border-radius: 14px; margin: 28px auto 0; width: 100%; max-width: 480px; transition: opacity .2s; box-shadow: 0 3px 12px rgba(45,27,61,.25); } .nav-cta:hover { opacity: .88; } /* ── Spacer ── */ #header-spacer { height: 0; transition: height .1s; } /* ================================================ TRANSPARENT MODE ================================================ */ .mode-transparent .header-bar { background: rgba(0,0,0,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mode-transparent .header-nav { background: transparent; border-color: rgba(255,255,255,.15); backdrop-filter: none; -webkit-backdrop-filter: none; } /* White text when transparent */ .mode-transparent .site-logo__text b { color: #fff; } .mode-transparent .site-logo__text small { color: rgba(255,255,255,.5); } .mode-transparent .site-logo__mark { background: rgba(255,255,255,.15); } .mode-transparent .nav-list a { color: rgba(255,255,255,.85); } .mode-transparent .nav-list a:hover { background: rgba(255,255,255,.12); color: #fff; } .mode-transparent .nav-cta { background: var(--cs420-secondary, #e8a0b4); color: var(--cs420-primary, #2d1b3d) !important; box-shadow: none; } .mode-transparent .nav-toggle { border-color: rgba(255,255,255,.3); } .mode-transparent .nav-toggle span { background: #fff; } /* After scroll: solid */ .mode-transparent.is-scrolled .header-bar { background: var(--cs420-primary, #2d1b3d); backdrop-filter: none; -webkit-backdrop-filter: none; } .mode-transparent.is-scrolled .header-nav { background: rgba(255,255,255,.97); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-color: rgba(0,0,0,.08); box-shadow: 0 2px 24px rgba(0,0,0,.10); } .mode-transparent.is-scrolled .site-logo__text b { color: var(--cs420-primary, #2d1b3d); } .mode-transparent.is-scrolled .site-logo__text small { color: #9baab8; } .mode-transparent.is-scrolled .site-logo__mark { background: var(--cs420-primary, #2d1b3d); } .mode-transparent.is-scrolled .nav-list a { color: var(--cs420-text, #1a1a2e); } .mode-transparent.is-scrolled .nav-list a:hover { background: rgba(45,27,61,.07); color: var(--cs420-primary, #2d1b3d); } .mode-transparent.is-scrolled .nav-cta { background: var(--cs420-primary, #2d1b3d); color: #fff !important; box-shadow: 0 3px 12px rgba(45,27,61,.25); } .mode-transparent.is-scrolled .nav-toggle { border-color: rgba(45,27,61,.14); } .mode-transparent.is-scrolled .nav-toggle span { background: var(--cs420-text, #1a1a2e); } @media (max-width: 480px) { .header-bar__link--email { display: none; } .header-bar__contacts { gap: 10px; } } /* ================================================ FOOTER ================================================ */ .site-footer { background: #0f1520; color: rgba(210,225,245,.7); font-family: var(--cs420-body-font, 'Inter', sans-serif); margin-top: auto; } /* CTA strip */ .footer-cta { background: linear-gradient(135deg, var(--cs420-primary, #2d1b3d), #1a0a28); padding: 48px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .footer-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-cta__title { font-family: var(--cs420-heading-font, 'DM Serif Display', serif); font-size: 24px; font-weight: 400; color: #fff; margin: 0 0 4px; } .footer-cta__sub { font-size: 14px; color: rgba(255,255,255,.5); margin: 0; } .footer-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: center; gap: 7px; background: var(--cs420-secondary, #e8a0b4); color: var(--cs420-primary, #2d1b3d); text-decoration: none; font-size: 14px; font-weight: 700; padding: 12px 24px; border-radius: 999px; white-space: nowrap; transition: opacity .2s; } .btn-primary:hover { opacity: .88; } .btn-outline { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: rgba(255,255,255,.75); text-decoration: none; font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.2); white-space: nowrap; transition: border-color .2s, color .2s; } .btn-outline:hover { border-color: rgba(255,255,255,.5); color: #fff; } /* Footer body */ .footer-body { padding: 60px 0 48px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; align-items: start; } .footer-brand { font-family: var(--cs420-heading-font, 'DM Serif Display', serif); font-size: 20px; font-weight: 400; color: #fff; margin: 0 0 8px; } .footer-doctor { font-size: 14px; color: rgba(210,225,245,.8); margin: 0 0 10px; } .footer-pill { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(210,225,245,.45); border: 1px solid rgba(255,255,255,.1); padding: 3px 10px; border-radius: 999px; } .site-footer .custom-logo, .site-footer img { max-height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .75; margin-bottom: 14px; } .footer-col__title { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(210,225,245,.35); margin: 0 0 16px; } .footer-nav, .footer-legal, .footer-contact { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-nav li, .footer-legal li, .footer-contact li { list-style: none; } .footer-nav a, .footer-legal a, .footer-contact a { font-size: 14px; font-weight: 500; color: rgba(210,225,245,.6); text-decoration: none; transition: color .2s; } .footer-nav a:hover, .footer-legal a:hover, .footer-contact a:hover { color: #fff; } .footer-contact li { font-size: 14px; color: rgba(210,225,245,.55); } /* Bottom bar */ .footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 18px 0; } .footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(210,225,245,.3); } .footer-bottom__inner a { color: rgba(210,225,245,.4); text-decoration: none; transition: color .2s; } .footer-bottom__inner a:hover { color: var(--cs420-secondary, #e8a0b4); } /* Footer responsive */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-cta__inner { flex-direction: column; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } .footer-cta__btns { flex-direction: column; width: 100%; } .btn-primary, .btn-outline { justify-content: center; } .footer-bottom__inner { flex-direction: column; align-items: flex-start; } } .cs420-card { background: var(--cs420-card); border: 1px solid var(--cs420-border); border-radius: 20px; padding: 28px; transition: box-shadow 0.3s, transform 0.3s; } .cs420-card:hover { box-shadow: 0 20px 48px rgba(15,30,55,0.10); transform: translateY(-3px); } .cs420-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } .cs420-page { background: var(--cs420-card); border: 1px solid var(--cs420-border); border-radius: 24px; padding: 40px; box-shadow: 0 4px 24px rgba(15,30,55,0.04); } .cs420-kicker { display: inline-flex; align-items: center; gap: 6px; background: rgba(43,112,226,0.08); color: var(--cs420-primary); padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; } .cs420-pill { display: inline-block; background: rgba(43,112,226,0.08); color: var(--cs420-primary); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; } /* Layout system */ .cs420-layout-full-width .cs420-page { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; } .cs420-content-area { display: block; } .cs420-content-area.has-sidebar { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 32px; align-items: start; } .cs420-content-area.has-sidebar.sidebar-left { grid-template-columns: 320px minmax(0,1fr); } .cs420-content-area.has-sidebar.sidebar-left .cs420-primary { order: 2; } .cs420-content-area.has-sidebar.sidebar-left .cs420-sidebar { order: 1; } .cs420-sidebar { display: flex; flex-direction: column; gap: 20px; } .cs420-widget, .cs420-sidebar .widget { background: var(--cs420-card); border: 1px solid var(--cs420-border); border-radius: 20px; padding: 24px; box-shadow: 0 4px 24px rgba(15,30,55,0.04); } .cs420-layout-sidebar-right .cs420-page, .cs420-layout-sidebar-left .cs420-page, .cs420-layout-boxed-sidebar-right .cs420-page, .cs420-layout-boxed-sidebar-left .cs420-page { height: 100%; } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ /* ══ NAVBAR: never wraps ══ */ .cs420-navbar-inner { flex-wrap: nowrap; overflow: visible; } /* ══ Desktop: nav always flex row ══ */ @media (min-width: 981px) { .cs420-header-cta { display: inline-flex; } .cs420-menu-toggle { display: none; } .cs420-nav { display: flex !important; position: static; background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; } .cs420-nav .cs420-menu, .cs420-nav ul { flex-direction: row; flex-wrap: nowrap; } } /* ══ Tablet / Mobile: hamburger menu ══ */ @media (max-width: 980px) { .cs420-header-cta { display: none; } .cs420-menu-toggle { display: inline-flex; } /* Nav: hidden by default, shown as dropdown when .is-open */ .cs420-nav { display: none; position: absolute; /* sits below the full header (topbar + navbar) */ top: 100%; left: 12px; right: 12px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,0.16); padding: 12px; z-index: 9999; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .cs420-nav.is-open { display: flex; } .cs420-nav .cs420-menu, .cs420-nav ul { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; } .cs420-nav li { width: 100%; } .cs420-nav a { display: flex; padding: 13px 18px; border-radius: 13px; font-size: 15px; font-weight: 500; color: var(--cs420-text); width: 100%; } .cs420-nav a:hover, .cs420-nav .current-menu-item > a, .cs420-nav .current_page_item > a { background: rgba(0,0,0,0.05); color: var(--cs420-primary); } /* Last nav item (CTA) — pill style inside dropdown */ .cs420-nav li:last-child > a { background: var(--cs420-primary); color: #fff; font-weight: 700; margin-top: 6px; border-radius: 13px; justify-content: center; } /* Footer */ .cs420-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .cs420-footer-cta-inner { flex-direction: column; align-items: flex-start; } .cs420-card-grid { grid-template-columns: 1fr; } .cs420-content-area.has-sidebar { grid-template-columns: 1fr; } } /* ══ Small mobile ══ */ @media (max-width: 640px) { .cs420-wrap { padding: 0 16px; } /* Topbar: single compact line, hide email on very small */ .cs420-topbar { height: auto; min-height: 38px; padding: 6px 0; } .cs420-topbar-inner { gap: 10px; } /* Hide email on smallest screens to keep topbar on one line */ .cs420-topbar-contact a:nth-child(3), .cs420-topbar-contact span.cs420-topbar-sep { display: none; } /* Navbar height */ .cs420-navbar { height: 60px; } --cs420-navbar-h: 60px; /* Logo size */ .cs420-brand-logo img, .cs420-brand-logo .custom-logo { max-height: 38px; } .cs420-logo-mark { width: 36px; height: 36px; font-size: 14px; } .cs420-brand-sub { display: none; } .cs420-brand-name { font-size: 17px; } /* Footer */ .cs420-footer-grid { grid-template-columns: 1fr; gap: 24px; } .cs420-footer-body { padding: 44px 0 32px; } .cs420-footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 6px; } .cs420-footer-cta-strip { padding: 36px 0; } .cs420-footer-cta-actions { width: 100%; flex-direction: column; } .cs420-footer-btn-primary, .cs420-footer-btn-secondary { width: 100%; justify-content: center; } .cs420-page { padding: 24px; } .cs420-main { padding: 40px 0; } } .screen-reader-text { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } /* ── Elementor: kill any wrapper constraints ───────────────── */ /* Elementor adds .elementor-page to on every Elementor page */ .elementor-page #main, .elementor-page .site-main { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; } /* Elementor manages its own section widths */ .elementor-page .cs420-wrap, .elementor-page .wrap { max-width: none !important; padding: 0 !important; } /* ── Hero: oculta columna de imagen cuando está vacía ── */ .cs420-hero-img-col, .elementor-element.cs420-hero-img-col { display: none !important; width: 0 !important; min-width: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } /* ── Force mobile menu when header really overflows ── */ body.cs420-force-mobile .nav-toggle { display: inline-flex !important; } body.cs420-force-mobile .primary-nav { display: none !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; min-height: 100dvh !important; z-index: 99999 !important; background: rgba(253,246,249,.985) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; padding: max(80px, env(safe-area-inset-top, 0px) + 56px) 32px max(40px, env(safe-area-inset-bottom, 0px) + 16px) !important; overflow-y: auto !important; overflow-x: hidden !important; } body.cs420-force-mobile .primary-nav.is-open { display: flex !important; } body.cs420-measure-desktop .primary-nav { display: flex !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; max-width: 100% !important; min-height: 0 !important; z-index: auto !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; flex-direction: row !important; justify-content: flex-end !important; align-items: center !important; gap: 6px !important; padding: 0 !important; overflow: visible !important; visibility: hidden !important; pointer-events: none !important; } body.cs420-measure-desktop .nav-list { display: flex !important; flex-direction: row !important; align-items: center !important; width: auto !important; max-width: none !important; margin: 0 !important; } body.cs420-measure-desktop .nav-list li { border-bottom: none !important; } body.cs420-measure-desktop .nav-list a { padding: 8px 10px !important; font-size: 14px !important; white-space: nowrap !important; } body.cs420-measure-desktop .nav-cta { display: inline-flex !important; width: auto !important; max-width: none !important; margin: 0 0 0 10px !important; } body.cs420-force-mobile .nav-list { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } body.cs420-force-mobile .nav-list li { width: 100% !important; border-bottom: 1px solid rgba(45,27,61,.06) !important; } body.cs420-force-mobile .nav-list a { display: flex !important; padding: 18px 8px !important; font-size: 18px !important; } body.cs420-force-mobile .nav-cta { display: flex !important; width: 100% !important; max-width: 480px !important; margin: 28px auto 0 !important; } @media (min-width: 768px) { .header-nav__inner { gap: 12px; } .nav-list a { font-size: 13px; } } /* ============================================================ 420CreaStack Theme v5.1 — Blog Editorial Médico Scoped to posts, archives, Rank Math FAQ and Gutenberg content ============================================================ */ .cs420-blog-shell { width: min(100% - 32px, 1240px); margin-inline: auto; } .cs420-single-post { color: var(--cs420-text, #142033); } .cs420-post-hero, .cs420-post-header-simple { position: relative; isolation: isolate; overflow: hidden; margin: 0 auto 42px; padding: clamp(34px, 5vw, 72px); border: 1px solid rgba(26,86,219,.10); border-radius: 32px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--cs420-secondary, #38d2f7) 22%, transparent), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,251,255,.88)); box-shadow: 0 24px 70px rgba(20,32,51,.08); } .cs420-post-hero::before { content: ""; position: absolute; inset: auto -12% -32% auto; width: 360px; height: 360px; border-radius: 999px; background: color-mix(in srgb, var(--cs420-primary, #1a56db) 12%, transparent); z-index: -1; } .cs420-post-hero__content { max-width: var(--cs420-blog-max, 860px); margin-inline: auto; text-align: center; } .cs420-post-kicker { min-height: 24px; margin-bottom: 14px; } .cs420-post-kicker a, .cs420-post-card__kicker a { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; background: color-mix(in srgb, var(--cs420-primary, #1a56db) 10%, #ffffff); color: var(--cs420-primary, #1a56db); font-size: 12px; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; text-decoration: none; padding: 10px 14px; } .cs420-post-title, .cs420-blog-index__hero h1 { margin: 0; color: var(--cs420-blog-title, #29425f); font-family: var(--cs420-heading-font, serif); font-size: clamp(34px, 5vw, var(--cs420-blog-h1, 46px)); line-height: 1.04; letter-spacing: -.035em; } .cs420-post-excerpt, .cs420-blog-index__hero p { max-width: 780px; margin: 18px auto 0; color: color-mix(in srgb, var(--cs420-text, #142033) 72%, #ffffff); font-size: clamp(17px, 2vw, 21px); line-height: 1.7; } .cs420-post-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px 18px; margin-top: 22px; color: var(--cs420-text-muted, #7a92aa); font-size: 14px; font-weight: 650; } .cs420-post-meta span { display: inline-flex; align-items: center; gap: 8px; } .cs420-post-meta span:not(:last-child)::after { content: ""; width: 5px; height: 5px; margin-left: 10px; border-radius: 999px; background: color-mix(in srgb, var(--cs420-primary, #1a56db) 32%, #ffffff); } .cs420-post-meta a { color: inherit; text-decoration: none; } .cs420-post-meta a:hover { color: var(--cs420-blog-link, #1a70a8); } .cs420-featured-image { max-width: min(100%, 980px); margin: 36px auto 0; overflow: hidden; border-radius: calc(var(--cs420-blog-radius, 18px) + 8px); box-shadow: 0 24px 58px rgba(20,32,51,.16); } .cs420-featured-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8.2; object-fit: cover; } .cs420-post-body-wrap { width: min(100%, calc(var(--cs420-blog-max, 860px) + 180px)); margin-inline: auto; } .cs420-post-content { max-width: var(--cs420-blog-max, 860px); margin-inline: auto; padding: clamp(18px, 3vw, 34px) 0 0; color: color-mix(in srgb, var(--cs420-text, #142033) 92%, #000000); font-size: var(--cs420-blog-font-size, 18px); line-height: 1.82; } .cs420-post-content > * { margin-top: 0; margin-bottom: 1.15em; } .cs420-post-content p { margin-bottom: 1.18em; } .cs420-post-content a { color: var(--cs420-blog-link, #1a70a8); font-weight: 750; text-decoration-thickness: .08em; text-underline-offset: .18em; } .cs420-post-content h2, .cs420-post-content h3, .cs420-post-content h4 { clear: both; color: var(--cs420-blog-title, #29425f); font-family: var(--cs420-heading-font, serif); letter-spacing: -.025em; line-height: 1.14; } .cs420-post-content h2 { margin-top: 1.35em; margin-bottom: .55em; padding-top: .35em; border-top: 1px solid color-mix(in srgb, var(--cs420-primary, #1a56db) 16%, #ffffff); font-size: clamp(28px, 4vw, var(--cs420-blog-h2, 34px)); } .cs420-post-content h3 { margin-top: 1.2em; margin-bottom: .45em; font-size: clamp(22px, 3vw, 27px); } .cs420-post-content h4 { margin-top: 1em; margin-bottom: .35em; font-size: 21px; } .cs420-post-content ul, .cs420-post-content ol { padding-left: 1.2em; } .cs420-post-content li { margin-bottom: .45em; } .cs420-post-content strong, .cs420-post-content b { color: color-mix(in srgb, var(--cs420-blog-title, #29425f) 85%, #000000); } .cs420-post-content img { max-width: 100%; height: auto; border-radius: var(--cs420-blog-radius, 18px); box-shadow: 0 18px 44px rgba(20,32,51,.12); } .cs420-post-content figure { margin: 1.5em 0; } .cs420-post-content figcaption { margin-top: 10px; color: var(--cs420-text-muted, #7a92aa); font-size: 14px; text-align: center; } .cs420-post-content .alignright, .cs420-post-content .img-blog-right, .cs420-post-content .cs420-img-right, .cs420-post-content .blog-img-right, .cs420-post-content .img-right { float: right; max-width: min(42%, 360px); margin: .25em 0 1.1em 2em; } .cs420-post-content .alignleft, .cs420-post-content .img-blog-left, .cs420-post-content .cs420-img-left, .cs420-post-content .blog-img-left, .cs420-post-content .img-left { float: left; max-width: min(42%, 360px); margin: .25em 2em 1.1em 0; } .cs420-post-content .img-blog-wrapper, .cs420-post-content .cs420-image-card, .cs420-post-content .article-image-card { overflow: hidden; border-radius: var(--cs420-blog-radius, 18px); box-shadow: 0 18px 44px rgba(20,32,51,.12); } .cs420-post-content .img-blog-wrapper img, .cs420-post-content .cs420-image-card img, .cs420-post-content .article-image-card img { display: block; width: 100%; box-shadow: none; } .cs420-post-content blockquote, .cs420-post-content .cs420-highlight, .cs420-post-content .article-highlight, .cs420-post-content .ltf-highlight { clear: both; margin: 1.5em 0; padding: 22px 24px; border-left: 5px solid var(--cs420-primary, #1a56db); border-radius: 20px; background: color-mix(in srgb, var(--cs420-primary, #1a56db) 7%, #ffffff); box-shadow: 0 12px 34px rgba(20,32,51,.06); } .cs420-post-content blockquote p:last-child, .cs420-post-content .cs420-highlight p:last-child, .cs420-post-content .article-highlight p:last-child, .cs420-post-content .ltf-highlight p:last-child { margin-bottom: 0; } .cs420-post-content nav, .cs420-post-content .cs420-index, .cs420-post-content .article-index, .cs420-post-content .ltf-index, .cs420-post-content .simpletoc-list, .cs420-post-content .wp-block-simpletoc-toc { clear: both; margin: 1.4em 0 1.8em; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--cs420-primary, #1a56db) 12%, #ffffff); border-radius: 22px; background: #ffffff; box-shadow: 0 14px 38px rgba(20,32,51,.06); } .cs420-post-content details { border-radius: 18px; } .cs420-post-content table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 18px; background: #ffffff; box-shadow: 0 14px 38px rgba(20,32,51,.06); } .cs420-post-content th, .cs420-post-content td { border: 1px solid color-mix(in srgb, var(--cs420-primary, #1a56db) 10%, #ffffff); padding: 14px 16px; vertical-align: top; } .cs420-post-content th { background: color-mix(in srgb, var(--cs420-primary, #1a56db) 10%, #ffffff); color: var(--cs420-blog-title, #29425f); text-align: left; } .cs420-post-content .wp-block-table { overflow-x: auto; } .cs420-post-content .wp-block-rank-math-faq-block { clear: both; margin: 2em 0; } .cs420-post-content .rank-math-list-item, .cs420-post-content .wp-block-rank-math-faq-block .rank-math-list-item { margin-bottom: 14px; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--cs420-primary, #1a56db) 12%, #ffffff); border-radius: 20px; background: #ffffff; box-shadow: 0 14px 34px rgba(20,32,51,.06); } .cs420-post-content .rank-math-question { display: block; margin-bottom: 8px; color: var(--cs420-blog-title, #29425f); font-size: 18px; font-weight: 850; line-height: 1.35; } .cs420-post-content .rank-math-answer p:last-child { margin-bottom: 0; } .cs420-post-content::after { content: ""; display: table; clear: both; } .cs420-blog-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; max-width: var(--cs420-blog-max, 860px); margin: 46px auto; padding: clamp(24px, 4vw, 36px); border-radius: 28px; background: radial-gradient(circle at top right, color-mix(in srgb, var(--cs420-secondary, #38d2f7) 28%, transparent), transparent 38%), linear-gradient(135deg, var(--cs420-primary, #1a56db), color-mix(in srgb, var(--cs420-primary, #1a56db) 68%, #06101c)); color: #ffffff; box-shadow: 0 22px 60px rgba(20,32,51,.18); } .cs420-blog-cta h2 { margin: 0 0 8px; color: #ffffff; font-family: var(--cs420-heading-font, serif); font-size: clamp(25px, 3vw, 34px); line-height: 1.1; } .cs420-blog-cta p { margin: 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.65; } .cs420-blog-cta__button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; border-radius: 999px; background: #ffffff; color: var(--cs420-primary, #1a56db); font-weight: 850; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 30px rgba(0,0,0,.16); } .cs420-related-posts { max-width: 1120px; margin: 54px auto 0; } .cs420-related-posts__head { margin-bottom: 20px; text-align: center; } .cs420-related-posts__head span, .cs420-blog-index__hero span { display: inline-flex; margin-bottom: 10px; color: var(--cs420-primary, #1a56db); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .cs420-related-posts__head h2 { margin: 0; color: var(--cs420-blog-title, #29425f); font-family: var(--cs420-heading-font, serif); font-size: clamp(28px, 4vw, 40px); line-height: 1.1; } .cs420-related-grid, .cs420-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .cs420-blog-index { padding-block: 10px 48px; } .cs420-blog-index__hero { max-width: 980px; margin: 0 auto 38px; padding: clamp(34px, 5vw, 64px); border: 1px solid rgba(26,86,219,.10); border-radius: 32px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--cs420-secondary, #38d2f7) 22%, transparent), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,251,255,.88)); text-align: center; box-shadow: 0 24px 70px rgba(20,32,51,.08); } .cs420-post-card { display: flex; flex-direction: column; min-height: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cs420-primary, #1a56db) 10%, #ffffff); border-radius: 26px; background: var(--cs420-blog-card, #ffffff); box-shadow: 0 18px 48px rgba(20,32,51,.08); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .cs420-post-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cs420-primary, #1a56db) 22%, #ffffff); box-shadow: 0 24px 62px rgba(20,32,51,.12); } .cs420-post-card__media { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg, color-mix(in srgb, var(--cs420-primary, #1a56db) 12%, #ffffff), color-mix(in srgb, var(--cs420-secondary, #38d2f7) 16%, #ffffff)); } .cs420-post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .cs420-post-card:hover .cs420-post-card__media img { transform: scale(1.035); } .cs420-post-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cs420-primary, #1a56db); font-family: var(--cs420-heading-font, serif); font-size: 34px; font-weight: 800; } .cs420-post-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px; } .cs420-post-card__kicker { min-height: 32px; margin-bottom: 12px; } .cs420-post-card__title { margin: 0 0 10px; color: var(--cs420-blog-title, #29425f); font-family: var(--cs420-heading-font, serif); font-size: clamp(23px, 2.2vw, 29px); line-height: 1.12; letter-spacing: -.025em; } .cs420-post-card__title a { color: inherit; text-decoration: none; } .cs420-post-card__title a:hover { color: var(--cs420-blog-link, #1a70a8); } .cs420-post-card__meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 12px; color: var(--cs420-text-muted, #7a92aa); font-size: 13px; font-weight: 700; } .cs420-post-card__body p { margin: 0 0 18px; color: color-mix(in srgb, var(--cs420-text, #142033) 72%, #ffffff); line-height: 1.65; } .cs420-post-card__link { display: inline-flex; width: fit-content; margin-top: auto; color: var(--cs420-blog-link, #1a70a8); font-weight: 850; text-decoration: none; } .cs420-post-card__link::after { content: "→"; margin-left: 8px; transition: transform .2s ease; } .cs420-post-card__link:hover::after { transform: translateX(4px); } .cs420-post-card.is-compact .cs420-post-card__body { padding: 18px; } .cs420-post-card.is-compact .cs420-post-card__title { font-size: 22px; } .cs420-blog-layout-list .cs420-post-grid { grid-template-columns: 1fr; max-width: 980px; margin-inline: auto; } .cs420-blog-layout-list .cs420-post-card { display: grid; grid-template-columns: minmax(220px, 36%) 1fr; } .cs420-blog-layout-list .cs420-post-card__media { aspect-ratio: auto; min-height: 100%; } .cs420-blog-layout-magazine .cs420-post-grid .cs420-post-card:first-child { grid-column: span 2; } .cs420-blog-layout-magazine .cs420-post-grid .cs420-post-card:first-child .cs420-post-card__title { font-size: clamp(29px, 3vw, 40px); } .cs420-pagination { display: flex; justify-content: center; margin-top: 38px; } .cs420-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .cs420-pagination a, .cs420-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 8px 13px; border: 1px solid color-mix(in srgb, var(--cs420-primary, #1a56db) 12%, #ffffff); border-radius: 999px; background: #ffffff; color: var(--cs420-blog-title, #29425f); font-weight: 800; text-decoration: none; } .cs420-pagination .current, .cs420-pagination a:hover { background: var(--cs420-primary, #1a56db); color: #ffffff; } .cs420-blog-empty { max-width: 760px; margin: 0 auto; padding: 34px; border-radius: 24px; background: #ffffff; text-align: center; box-shadow: 0 18px 48px rgba(20,32,51,.08); } .cs420-blog-empty h2 { margin: 0 0 10px; color: var(--cs420-blog-title, #29425f); font-family: var(--cs420-heading-font, serif); font-size: 30px; } .cs420-blog-style-clean .cs420-post-hero, .cs420-blog-style-clean .cs420-blog-index__hero { border-color: transparent; background: transparent; box-shadow: none; } .cs420-blog-style-card .cs420-post-body-wrap { max-width: calc(var(--cs420-blog-max, 860px) + 100px); padding: clamp(18px, 3vw, 34px); border-radius: 30px; background: #ffffff; box-shadow: 0 20px 60px rgba(20,32,51,.08); } .cs420-blog-style-glass .cs420-post-hero, .cs420-blog-style-glass .cs420-blog-index__hero, .cs420-blog-style-glass .cs420-post-card, .cs420-blog-style-glass .cs420-blog-cta { background: rgba(255,255,255,.74); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); } .cs420-blog-style-glass .cs420-blog-cta { color: var(--cs420-text, #142033); } .cs420-blog-style-glass .cs420-blog-cta h2 { color: var(--cs420-blog-title, #29425f); } .cs420-blog-style-glass .cs420-blog-cta p { color: color-mix(in srgb, var(--cs420-text, #142033) 72%, #ffffff); } .cs420-blog-style-glass .cs420-blog-cta__button { background: var(--cs420-primary, #1a56db); color: #ffffff; } @media (max-width: 1024px) { .cs420-related-grid, .cs420-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs420-blog-layout-magazine .cs420-post-grid .cs420-post-card:first-child { grid-column: span 2; } } @media (max-width: 760px) { .cs420-blog-shell { width: min(100% - 24px, 1240px); } .cs420-post-hero, .cs420-post-header-simple, .cs420-blog-index__hero { margin-bottom: 26px; padding: 28px 20px; border-radius: 24px; } .cs420-post-title, .cs420-blog-index__hero h1 { font-size: clamp(31px, 9vw, 42px); } .cs420-post-excerpt, .cs420-blog-index__hero p { font-size: 16px; } .cs420-post-meta { gap: 8px 10px; font-size: 13px; } .cs420-post-meta span:not(:last-child)::after { display: none; } .cs420-featured-image { margin-top: 24px; border-radius: 20px; } .cs420-featured-image img { aspect-ratio: 4 / 3; } .cs420-post-content { font-size: 16px; line-height: 1.76; } .cs420-post-content h2 { font-size: clamp(26px, 8vw, 33px); } .cs420-post-content .alignright, .cs420-post-content .alignleft, .cs420-post-content .img-blog-right, .cs420-post-content .img-blog-left, .cs420-post-content .cs420-img-right, .cs420-post-content .cs420-img-left, .cs420-post-content .blog-img-right, .cs420-post-content .blog-img-left, .cs420-post-content .img-right, .cs420-post-content .img-left { float: none; display: block; max-width: 100%; width: 100%; margin: 1.2em 0; } .cs420-post-content table { min-width: 620px; } .cs420-blog-cta { grid-template-columns: 1fr; text-align: center; } .cs420-blog-cta__button { width: 100%; } .cs420-related-grid, .cs420-post-grid { grid-template-columns: 1fr; } .cs420-blog-layout-magazine .cs420-post-grid .cs420-post-card:first-child { grid-column: auto; } .cs420-blog-layout-list .cs420-post-card { display: flex; } .cs420-blog-layout-list .cs420-post-card__media { aspect-ratio: 16 / 10; } .cs420-post-card { border-radius: 22px; } .cs420-post-card__body { padding: 18px; } } @media (max-width: 480px) { .cs420-post-kicker a, .cs420-post-card__kicker a { font-size: 10px; padding: 8px 11px; } .cs420-post-content blockquote, .cs420-post-content .cs420-highlight, .cs420-post-content .article-highlight, .cs420-post-content .ltf-highlight, .cs420-post-content nav, .cs420-post-content .cs420-index, .cs420-post-content .article-index, .cs420-post-content .ltf-index, .cs420-post-content .wp-block-simpletoc-toc, .cs420-post-content .rank-math-list-item, .cs420-post-content .wp-block-rank-math-faq-block .rank-math-list-item { padding: 18px; border-radius: 18px; } } .cs420-blog-index__description { max-width: 780px; margin: 18px auto 0; color: color-mix(in srgb, var(--cs420-text, #142033) 72%, #ffffff); font-size: clamp(17px, 2vw, 21px); line-height: 1.7; } .cs420-blog-index__description p:last-child { margin-bottom: 0; } /* ============================================================ 420CreaStack v5.2 — Blog PRO mockup + Header/Footer premium ============================================================ */ .cs420-header-style-premium.site-header{background:#fff;box-shadow:0 14px 35px rgba(9,34,72,.08);border-bottom:1px solid rgba(15,56,98,.08)} .cs420-header-style-premium .header-bar{background:linear-gradient(90deg,#07234b,#063d79);color:#fff;font-size:13px} .cs420-header-style-premium .header-bar__inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:20px} .cs420-header-style-premium .header-bar__contacts{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .cs420-header-style-premium .header-bar__link{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px;opacity:.96} .cs420-header-style-premium .header-bar__socials{display:flex;gap:10px;align-items:center} .cs420-header-style-premium .header-bar__socials a,.footer-socials a{width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:11px;font-weight:800;text-transform:uppercase;background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.18)} .cs420-header-style-premium .header-nav{background:#fff} .cs420-header-style-premium .header-nav__inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px} .cs420-header-style-premium .site-logo img{max-height:58px;width:auto} .cs420-header-style-premium .nav-list a{color:#092452;font-weight:700} .cs420-header-style-premium .nav-list a:hover{color:#1668d9} .cs420-header-style-premium .nav-cta{background:#073e86;color:#fff;border-radius:999px;padding:13px 22px;font-weight:800;box-shadow:0 12px 25px rgba(7,62,134,.2);display:inline-flex;gap:8px;align-items:center;text-decoration:none} .cs420-header-style-minimal .header-bar{display:none}.cs420-header-style-minimal.site-header{background:#fff;border-bottom:1px solid #e9eef7;box-shadow:none} .cs420-blog-pro.cs420-blog-shell{max-width:none;width:100%;padding:0;background:linear-gradient(180deg,#f6faff 0%,#fff 44%)} .cs420-blog-pro-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 76% 50%,rgba(44,151,255,.5),transparent 22%),linear-gradient(120deg,#06295d 0%,#053b7b 50%,#021834 100%);min-height:250px;color:#fff;padding:72px max(24px,calc((100vw - 1200px)/2)) 74px;display:grid;grid-template-columns:minmax(0,1fr) 450px;align-items:center;gap:40px} .cs420-blog-pro-hero__content{max-width:650px;position:relative;z-index:2}.cs420-blog-pro-hero__content span{display:block;color:#7ee5ff;font-weight:900;letter-spacing:.12em;font-size:13px;margin-bottom:16px;text-transform:uppercase}.cs420-blog-pro-hero__content h1{font-size:clamp(36px,5vw,58px);line-height:1.06;margin:0 0 20px;font-weight:850;color:#fff}.cs420-blog-pro-hero__content p{font-size:18px;line-height:1.75;margin:0;color:rgba(255,255,255,.9);max-width:580px} .cs420-blog-pro-hero__visual{height:210px;position:relative}.cs420-brain-orb{position:absolute;inset:0;border-radius:48% 52% 55% 45%;background:radial-gradient(circle at 52% 43%,rgba(80,180,255,.92),rgba(16,83,173,.62) 38%,rgba(2,14,42,.05) 70%);filter:drop-shadow(0 24px 50px rgba(35,142,255,.28));opacity:.95}.cs420-brain-orb:before,.cs420-brain-orb:after{content:"";position:absolute;border-radius:999px;background:rgba(132,224,255,.75);box-shadow:0 0 24px rgba(117,220,255,.65)}.cs420-brain-orb:before{width:8px;height:8px;left:20%;top:36%}.cs420-brain-orb:after{width:6px;height:6px;right:28%;top:25%}.cs420-brain-orb span{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(155,229,255,.85),transparent);transform:rotate(-12deg)}.cs420-brain-orb span:nth-child(1){left:13%;right:14%;top:38%}.cs420-brain-orb span:nth-child(2){left:18%;right:22%;top:54%;transform:rotate(13deg)}.cs420-brain-orb span:nth-child(3){left:24%;right:28%;top:68%;transform:rotate(-25deg)} .cs420-blog-tools{max-width:1200px;margin:30px auto 20px;padding:0 24px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:center}.cs420-blog-tabs{display:flex;gap:12px;overflow:auto;padding-bottom:4px}.cs420-blog-tabs a{white-space:nowrap;text-decoration:none;color:#56667e;font-weight:800;padding:13px 18px;border-radius:12px}.cs420-blog-tabs a.is-active,.cs420-blog-tabs a:hover{background:#063e87;color:#fff}.cs420-blog-search{height:48px;border:1px solid #dfe8f3;border-radius:12px;background:#fff;display:flex;overflow:hidden;box-shadow:0 10px 25px rgba(8,45,93,.04)}.cs420-blog-search input{border:0;flex:1;padding:0 16px;outline:0;color:#1c2b44;background:#fff}.cs420-blog-search button{width:52px;border:0;border-left:1px solid #dfe8f3;background:#fff;color:#50647e;font-size:22px;cursor:pointer} .cs420-blog-pro__layout{max-width:1200px;margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}.cs420-blog-pro__main .cs420-post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.cs420-blog-pro .cs420-post-card{border:1px solid #e5edf7;border-radius:18px;background:#fff;box-shadow:0 18px 45px rgba(9,49,93,.08);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}.cs420-blog-pro .cs420-post-card:hover{transform:translateY(-4px);box-shadow:0 24px 55px rgba(9,49,93,.12)}.cs420-blog-pro .cs420-post-card__media{height:260px;background:#edf5ff;display:block;overflow:hidden}.cs420-blog-pro .cs420-post-card__media img{width:100%;height:100%;object-fit:cover;display:block}.cs420-blog-pro .cs420-post-card__body{padding:24px}.cs420-blog-pro .cs420-post-card__kicker a{display:inline-flex;background:#eef5ff;color:#1f67c7;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:900;padding:7px 11px;text-decoration:none}.cs420-blog-pro .cs420-post-card__title{font-size:clamp(24px,2.4vw,32px);line-height:1.05;margin:16px 0 12px}.cs420-blog-pro .cs420-post-card__title a{color:#0b3470;text-decoration:none}.cs420-blog-pro .cs420-post-card__meta{display:flex;gap:15px;flex-wrap:wrap;color:#7587a0;font-size:13px;font-weight:700;margin-bottom:14px}.cs420-blog-pro .cs420-post-card__body p{color:#405069;line-height:1.7;margin:0 0 20px}.cs420-blog-pro .cs420-post-card__link{color:#1367cf;text-decoration:none;font-weight:900} .cs420-blog-sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:120px}.cs420-sidebar-card,.cs420-sidebar-cta{background:#fff;border:1px solid #e5edf7;border-radius:18px;padding:20px;box-shadow:0 16px 36px rgba(9,49,93,.07)}.cs420-sidebar-card h2,.cs420-sidebar-cta h2{font-size:18px;line-height:1.2;margin:0 0 16px;color:#092d65}.cs420-author-card__photo{height:132px;border-radius:14px;background:linear-gradient(135deg,#e9f4ff,#fff),radial-gradient(circle at 50% 20%,#bcdcff,transparent 36%);margin-bottom:16px}.cs420-author-card h3{font-size:17px;margin:0 0 8px;color:#08295c}.cs420-author-card p{font-size:14px;color:#56667e;line-height:1.6;margin:0 0 14px}.cs420-author-card a{display:inline-flex;padding:10px 14px;border:1px solid #0d62ca;border-radius:10px;text-decoration:none;font-weight:800;color:#0d62ca;font-size:13px}.cs420-recent-item{display:grid;grid-template-columns:74px 1fr;gap:12px;text-decoration:none;padding:10px 0;border-top:1px solid #edf2f8}.cs420-recent-item:first-of-type{border-top:0}.cs420-recent-item__thumb{width:74px;height:62px;border-radius:10px;overflow:hidden;background:#edf5ff}.cs420-recent-item__thumb img{width:100%;height:100%;object-fit:cover}.cs420-recent-item strong{display:block;color:#0a2f68;font-size:13px;line-height:1.25}.cs420-recent-item small{display:block;color:#7c8da4;font-size:12px;margin-top:6px}.cs420-sidebar-cta{background:linear-gradient(145deg,#e9f4ff,#fff);position:relative;overflow:hidden}.cs420-sidebar-cta:after{content:"";position:absolute;right:-34px;bottom:-34px;width:120px;height:120px;border-radius:999px;border:22px solid rgba(29,117,225,.08)}.cs420-sidebar-cta p{color:#475a76;line-height:1.55}.cs420-sidebar-cta a{display:inline-flex;background:#073e86;color:#fff;text-decoration:none;border-radius:10px;padding:12px 16px;font-weight:900;position:relative;z-index:2} .cs420-trust-strip{background:#fff;border-top:1px solid #e7eef7;border-bottom:1px solid #e7eef7;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:28px max(24px,calc((100vw - 1200px)/2));box-shadow:0 -10px 30px rgba(7,43,82,.03)}.cs420-trust-item{display:grid;grid-template-columns:58px 1fr;column-gap:15px;align-items:center}.cs420-trust-item span{grid-row:1/3;width:52px;height:52px;border-radius:18px;background:#eaf4ff;color:#0d62ca;display:flex;align-items:center;justify-content:center;font-weight:900}.cs420-trust-item strong{display:block;color:#0a2f68;line-height:1.2}.cs420-trust-item p{margin:5px 0 0;color:#607189;font-size:14px;line-height:1.45} .cs420-footer-style-premium.site-footer{background:linear-gradient(135deg,#041b3f 0%,#052b63 70%,#03142f 100%);color:#dbe8ff}.cs420-footer-style-premium .footer-body{padding:58px 0 34px}.cs420-footer-style-premium .footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.15fr;gap:48px}.cs420-footer-style-premium .footer-col__title{color:#fff;font-size:18px;font-weight:900;margin:0 0 20px}.cs420-footer-style-premium .footer-description,.cs420-footer-style-premium .footer-doctor,.cs420-footer-style-premium .footer-contact li{color:#dbe8ff;line-height:1.7}.cs420-footer-style-premium .footer-description{max-width:330px;margin-top:20px}.cs420-footer-style-premium .footer-nav,.cs420-footer-style-premium .footer-contact{list-style:none;padding:0;margin:0;display:grid;gap:11px}.cs420-footer-style-premium .footer-nav a,.cs420-footer-style-premium .footer-contact a{color:#dbe8ff;text-decoration:none}.cs420-footer-style-premium .footer-nav a:hover,.cs420-footer-style-premium .footer-contact a:hover{color:#fff}.cs420-footer-style-premium .footer-pill{display:inline-flex;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 12px;color:#fff;background:rgba(255,255,255,.07)}.cs420-footer-style-premium .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;color:#b9c9df}.cs420-footer-style-premium .footer-bottom__inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.cs420-footer-style-premium .custom-logo{max-height:62px;width:auto;filter:brightness(0) invert(1) saturate(0) brightness(2)}.cs420-footer-style-minimal.site-footer{background:#f7fbff;color:#263f5c;border-top:1px solid #e6eef8}.cs420-footer-style-minimal .footer-body{padding:36px 0}.cs420-footer-style-minimal .footer-bottom{border-top:1px solid #dde8f4;padding:18px 0} @media (max-width:1024px){.cs420-blog-pro-hero{grid-template-columns:1fr;padding-top:54px;padding-bottom:54px}.cs420-blog-pro-hero__visual{display:none}.cs420-blog-tools,.cs420-blog-pro__layout{grid-template-columns:1fr}.cs420-blog-sidebar{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.cs420-sidebar-cta{grid-column:1/-1}.cs420-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.cs420-footer-style-premium .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:680px){.cs420-header-style-premium .header-bar__inner{justify-content:center}.cs420-header-style-premium .header-bar__contacts{justify-content:center;gap:12px}.cs420-header-style-premium .header-bar__link--email,.cs420-header-style-premium .header-bar__socials{display:none}.cs420-blog-pro-hero{padding:42px 20px}.cs420-blog-pro-hero__content h1{font-size:36px}.cs420-blog-tools{padding:0 16px;margin-top:18px}.cs420-blog-tabs a{padding:10px 13px;font-size:13px}.cs420-blog-pro__layout{padding:0 16px 38px}.cs420-blog-pro__main .cs420-post-grid{grid-template-columns:1fr;gap:20px}.cs420-blog-pro .cs420-post-card__media{height:210px}.cs420-blog-pro .cs420-post-card__body{padding:20px}.cs420-blog-sidebar{grid-template-columns:1fr}.cs420-trust-strip{grid-template-columns:1fr;padding:24px 18px}.cs420-footer-style-premium .footer-grid{grid-template-columns:1fr;gap:30px}.cs420-footer-style-premium .footer-bottom__inner{display:grid;text-align:left}.cs420-header-style-premium .nav-cta{width:100%;justify-content:center}.cs420-blog-search{height:44px}} /* ============================================================ 420CreaStack Theme v5.3 — Artículo individual PRO ============================================================ */ .cs420-single-shell { width: min(100% - 32px, 1240px); margin-inline: auto; padding-block: clamp(20px, 3vw, 46px) 64px; } .cs420-single-hero-pro { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: center; gap: clamp(26px, 4vw, 56px); isolation: isolate; overflow: hidden; margin: 0 auto clamp(28px, 4vw, 46px); padding: clamp(28px, 5vw, 68px); border-radius: 34px; background: radial-gradient(circle at 82% 22%, rgba(56,210,247,.28), transparent 32%), radial-gradient(circle at 12% 16%, rgba(88,143,230,.25), transparent 32%), linear-gradient(135deg, #061a3b 0%, #0a3470 54%, #04214b 100%); color: #ffffff; box-shadow: 0 26px 82px rgba(4, 25, 59, .20); } .cs420-single-hero-pro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 48px 48px; opacity: .10; z-index: -1; } .cs420-single-hero-pro .cs420-post-hero__copy, .cs420-single-hero-pro__copy { max-width: 720px; } .cs420-single-hero-pro .cs420-post-kicker a { background: rgba(255,255,255,.13); color: #ffffff; border: 1px solid rgba(255,255,255,.22); } .cs420-single-hero-pro .cs420-post-title { color: #ffffff; text-align: left; text-wrap: balance; } .cs420-single-hero-pro .cs420-post-excerpt { margin-inline: 0; color: rgba(255,255,255,.82); text-align: left; } .cs420-single-hero-pro .cs420-post-meta { justify-content: flex-start; color: rgba(255,255,255,.78); } .cs420-single-hero-pro .cs420-post-meta span:not(:last-child)::after { background: rgba(255,255,255,.45); } .cs420-featured-image-pro { margin: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; box-shadow: 0 24px 72px rgba(0,0,0,.28); } .cs420-featured-image-pro img { aspect-ratio: 4 / 3; object-fit: cover; } .cs420-single-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(26px, 4vw, 44px); align-items: start; max-width: 1180px; margin-inline: auto; } .cs420-single-content-layout.no-sidebar, .cs420-single-style-classic .cs420-single-content-layout, .cs420-single-style-compact .cs420-single-content-layout { display: block; max-width: var(--cs420-blog-max, 860px); } .cs420-single-main { min-width: 0; } .cs420-single-intro-card { max-width: var(--cs420-blog-max, 860px); margin: 0 auto 18px; padding: 20px 22px; border: 1px solid rgba(26,86,219,.12); border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(243,248,255,.94)); box-shadow: 0 14px 38px rgba(20,32,51,.07); } .cs420-single-intro-card span { display: inline-flex; margin-bottom: 6px; color: var(--cs420-primary, #1a56db); font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .cs420-single-intro-card p { margin: 0; color: color-mix(in srgb, var(--cs420-text, #142033) 74%, #ffffff); font-size: 15px; line-height: 1.65; } .cs420-single-post-pro .cs420-post-content { padding: clamp(22px, 3vw, 36px); border: 1px solid rgba(26,86,219,.08); border-radius: 28px; background: #ffffff; box-shadow: 0 18px 56px rgba(20,32,51,.07); } .cs420-single-style-classic .cs420-post-content, .cs420-single-style-compact .cs420-post-content { border: 0; box-shadow: none; background: transparent; padding-inline: 0; } .cs420-single-style-compact .cs420-single-hero-pro { grid-template-columns: 1fr; text-align: center; } .cs420-single-style-compact .cs420-single-hero-pro .cs420-post-title, .cs420-single-style-compact .cs420-single-hero-pro .cs420-post-excerpt { text-align: center; } .cs420-single-style-compact .cs420-single-hero-pro .cs420-post-meta { justify-content: center; } .cs420-single-sidebar { position: sticky; top: 112px; display: grid; gap: 18px; } .cs420-single-sidebar .cs420-sidebar-card, .cs420-single-sidebar .cs420-sidebar-cta, .cs420-single-side-card { margin: 0; border: 1px solid rgba(26,86,219,.10); border-radius: 24px; background: #ffffff; box-shadow: 0 16px 46px rgba(20,32,51,.07); } .cs420-single-sidebar .cs420-sidebar-card, .cs420-single-side-card { padding: 22px; } .cs420-single-side-card--notice { background: radial-gradient(circle at top right, rgba(56,210,247,.18), transparent 38%), #ffffff; } .cs420-single-side-card--notice span { display: inline-flex; margin-bottom: 8px; color: var(--cs420-primary, #1a56db); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .cs420-single-side-card h2, .cs420-single-sidebar .cs420-sidebar-card h2, .cs420-single-sidebar .cs420-sidebar-cta h2 { margin: 0 0 10px; color: var(--cs420-blog-title, #29425f); font-family: var(--cs420-heading-font, serif); font-size: 22px; line-height: 1.12; } .cs420-single-side-card p, .cs420-single-sidebar .cs420-sidebar-card p, .cs420-single-sidebar .cs420-sidebar-cta p { color: color-mix(in srgb, var(--cs420-text, #142033) 72%, #ffffff); font-size: 14px; line-height: 1.62; } .cs420-single-sidebar .cs420-sidebar-cta { padding: 22px; background: radial-gradient(circle at bottom right, rgba(56,210,247,.26), transparent 42%), linear-gradient(135deg, #eff7ff, #ffffff); } .cs420-single-sidebar .cs420-sidebar-cta a, .cs420-single-sidebar .cs420-author-card a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 8px; padding: 11px 16px; border-radius: 999px; background: var(--cs420-primary, #1a56db); color: #ffffff; font-size: 13px; font-weight: 850; text-decoration: none; } .cs420-single-sidebar .cs420-recent-card .cs420-recent-item { grid-template-columns: 72px 1fr; } .cs420-single-sidebar .cs420-recent-item__thumb { width: 72px; height: 58px; } .cs420-single-post-pro .cs420-post-content > p:first-of-type { font-size: calc(var(--cs420-blog-font-size, 18px) + 1px); line-height: 1.78; color: color-mix(in srgb, var(--cs420-text, #142033) 86%, #000000); } .cs420-single-post-pro .cs420-post-content h2 { position: relative; padding-top: .75em; border-top: 0; } .cs420-single-post-pro .cs420-post-content h2::before { content: ""; display: block; width: 58px; height: 4px; margin-bottom: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--cs420-primary, #1a56db), var(--cs420-secondary, #38d2f7)); } .cs420-single-post-pro .cs420-post-content .wp-block-image, .cs420-single-post-pro .cs420-post-content figure { clear: both; } .cs420-single-post-pro .cs420-post-content .wp-block-image img, .cs420-single-post-pro .cs420-post-content figure img { width: auto; } @media (max-width: 1120px) { .cs420-single-hero-pro, .cs420-single-content-layout { grid-template-columns: 1fr; } .cs420-single-hero-pro .cs420-post-title, .cs420-single-hero-pro .cs420-post-excerpt { text-align: center; } .cs420-single-hero-pro .cs420-post-meta { justify-content: center; } .cs420-single-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs420-single-sidebar .cs420-recent-card { grid-column: 1 / -1; } } @media (max-width: 760px) { .cs420-single-shell { width: min(100% - 22px, 1240px); padding-block: 14px 44px; } .cs420-single-hero-pro { padding: 26px 18px; border-radius: 26px; } .cs420-single-post-pro .cs420-post-content { padding: 22px 18px; border-radius: 24px; } .cs420-single-intro-card { padding: 18px; border-radius: 20px; } .cs420-single-sidebar { grid-template-columns: 1fr; } } /* ============================================================ 420CreaStack v5.4 — Single Article Responsive PRO + Theme Cover ============================================================ */ body.single-post .site-main{background:linear-gradient(180deg,#f5f9ff 0%,#ffffff 46%);overflow:hidden;} .cs420-single-v54{width:100%;padding:0 0 64px;color:#142033;} .cs420-single-v54 *{box-sizing:border-box;} .cs420-single-hero-v54{position:relative;isolation:isolate;min-height:clamp(260px,34vw,440px);display:flex;align-items:center;margin:0 0 clamp(26px,4vw,48px);padding:clamp(46px,8vw,96px) max(22px,calc((100vw - 1160px)/2));overflow:hidden;background:linear-gradient(135deg,#042451 0%,#07498f 55%,#02172f 100%);color:#fff;} .cs420-single-hero-v54::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,23,47,.94),rgba(5,50,105,.76),rgba(2,23,47,.38)),var(--cs420-hero-img);background-size:cover;background-position:center;filter:saturate(1.05);z-index:-2;} .cs420-single-hero-v54::after{content:"";position:absolute;inset:auto -10% -42% auto;width:520px;height:520px;border-radius:999px;background:radial-gradient(circle,rgba(56,210,247,.28),transparent 66%);z-index:-1;} .cs420-single-hero-v54__inner{width:min(100%,920px);} .cs420-single-hero-v54 .cs420-post-kicker{margin-bottom:16px;} .cs420-single-hero-v54 .cs420-post-kicker a{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#aeefff;backdrop-filter:blur(10px);} .cs420-single-hero-v54 .cs420-post-title{max-width:900px;margin:0;color:#fff;font-family:var(--cs420-heading-font,inherit);font-size:clamp(34px,5.4vw,66px);font-weight:900;line-height:1.03;letter-spacing:-.045em;text-wrap:balance;} .cs420-single-hero-v54 .cs420-post-excerpt{max-width:740px;margin:20px 0 0;color:rgba(255,255,255,.9);font-size:clamp(17px,2vw,21px);line-height:1.65;} .cs420-single-hero-v54 .cs420-post-meta{justify-content:flex-start;margin-top:22px;color:rgba(255,255,255,.82);} .cs420-single-hero-v54 .cs420-post-meta a{color:inherit;} .cs420-single-wrap-v54{width:min(100% - 42px,1180px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,820px) 320px;gap:36px;align-items:start;} .cs420-single-wrap-v54.no-sidebar{grid-template-columns:minmax(0,920px);justify-content:center;} .cs420-single-main-v54{min-width:0;} .cs420-single-simple-v54{padding:32px 0 18px;} .cs420-single-simple-v54 .cs420-post-meta{justify-content:flex-start;} .cs420-featured-image-v54{margin:0 0 26px;overflow:hidden;border-radius:28px;background:#fff;box-shadow:0 22px 60px rgba(20,32,51,.12);} .cs420-featured-image-v54 img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;} .cs420-single-intro-v54{display:grid;gap:6px;margin:0 0 24px;padding:18px 20px;border:1px solid rgba(26,86,219,.10);border-radius:22px;background:linear-gradient(135deg,#ffffff,#f1f7ff);box-shadow:0 16px 38px rgba(20,32,51,.06);} .cs420-single-intro-v54 strong{color:#063b78;font-size:15px;letter-spacing:.02em;} .cs420-single-intro-v54 span{color:#53677f;font-size:15px;line-height:1.55;} .cs420-single-v54 .cs420-post-content{max-width:none;margin:0;padding:clamp(24px,4vw,42px);border:1px solid rgba(26,86,219,.08);border-radius:30px;background:#fff;box-shadow:0 22px 66px rgba(20,32,51,.08);font-size:var(--cs420-blog-font-size,18px);line-height:1.84;} .cs420-single-v54 .cs420-post-content>p:first-of-type{font-size:calc(var(--cs420-blog-font-size,18px) + 1px);color:#24384f;} .cs420-single-v54 .cs420-post-content h2{margin-top:1.45em;border-top:0;padding-top:.25em;font-size:clamp(28px,4vw,var(--cs420-blog-h2,36px));line-height:1.12;color:var(--cs420-blog-title,#29425f);text-wrap:balance;} .cs420-single-v54 .cs420-post-content h2::before{content:"";display:block;width:58px;height:4px;margin-bottom:14px;border-radius:999px;background:linear-gradient(90deg,var(--cs420-primary,#1a56db),var(--cs420-secondary,#38d2f7));} .cs420-single-v54 .cs420-post-content h3{font-size:clamp(23px,3vw,29px);} .cs420-single-v54 .cs420-post-content img{border-radius:var(--cs420-blog-radius,18px);box-shadow:0 18px 44px rgba(20,32,51,.13);} .cs420-single-v54 .cs420-post-content figure img{width:auto;max-width:100%;} .cs420-single-v54 .cs420-post-content .alignright,.cs420-single-v54 .cs420-post-content .img-blog-right,.cs420-single-v54 .cs420-post-content .cs420-img-right,.cs420-single-v54 .cs420-post-content .blog-img-right,.cs420-single-v54 .cs420-post-content .img-right{float:right;width:min(42%,360px);max-width:360px;margin:.35em 0 1.2em 2em;} .cs420-single-v54 .cs420-post-content .alignleft,.cs420-single-v54 .cs420-post-content .img-blog-left,.cs420-single-v54 .cs420-post-content .cs420-img-left,.cs420-single-v54 .cs420-post-content .blog-img-left,.cs420-single-v54 .cs420-post-content .img-left{float:left;width:min(42%,360px);max-width:360px;margin:.35em 2em 1.2em 0;} .cs420-single-v54 .cs420-post-content nav,.cs420-single-v54 .cs420-post-content .cs420-index,.cs420-single-v54 .cs420-post-content .article-index,.cs420-single-v54 .cs420-post-content .ltf-index,.cs420-single-v54 .cs420-post-content .wp-block-simpletoc-toc{background:#f7fbff;border-color:rgba(26,86,219,.12);} .cs420-single-v54 .cs420-blog-cta{max-width:none;margin:30px 0 0;} .cs420-single-v54 .cs420-related-posts{width:min(100% - 42px,1180px);margin:56px auto 0;} .cs420-single-sidebar{position:sticky;top:104px;display:grid;gap:18px;min-width:0;} .cs420-single-sidebar .cs420-sidebar-card,.cs420-single-sidebar .cs420-sidebar-cta,.cs420-single-side-card{border-radius:24px;border:1px solid rgba(26,86,219,.10);background:#fff;box-shadow:0 16px 46px rgba(20,32,51,.07);overflow:hidden;} .cs420-single-sidebar .cs420-sidebar-card,.cs420-single-side-card,.cs420-single-sidebar .cs420-sidebar-cta{padding:22px;} .cs420-single-sidebar .cs420-author-card__photo{height:132px;border-radius:18px;background:linear-gradient(135deg,#edf6ff,#dbeeff);} .cs420-single-sidebar .cs420-recent-card .cs420-recent-item{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(26,86,219,.08);text-decoration:none;} .cs420-single-sidebar .cs420-recent-card .cs420-recent-item:first-of-type{border-top:0;} .cs420-single-sidebar .cs420-recent-item__thumb{display:block;width:72px;height:58px;border-radius:12px;overflow:hidden;background:#eef5ff;} .cs420-single-sidebar .cs420-recent-item__thumb img{width:100%;height:100%;object-fit:cover;display:block;} .cs420-single-sidebar .cs420-recent-item strong{display:block;color:#0a3162;font-size:13px;line-height:1.25;} .cs420-single-sidebar .cs420-recent-item small{display:block;margin-top:4px;color:#7a92aa;font-size:11px;} .cs420-single-sidebar .cs420-sidebar-cta{background:linear-gradient(135deg,#eef7ff,#ffffff);} .cs420-single-sidebar .cs420-sidebar-cta a,.cs420-single-sidebar .cs420-author-card a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:8px;padding:11px 16px;border-radius:999px;background:var(--cs420-primary,#1a56db);color:#fff;font-weight:850;font-size:13px;text-decoration:none;} body.single-post .cs420-content-area.has-sidebar,body.single-post .cs420-sidebar:not(.cs420-single-sidebar){display:block;} body.single-post .cs420-content-area.has-sidebar>.cs420-sidebar:not(.cs420-single-sidebar){display:none;} @media (max-width:1120px){.cs420-single-wrap-v54{grid-template-columns:minmax(0,1fr);width:min(100% - 32px,920px);}.cs420-single-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr));}.cs420-single-sidebar .cs420-recent-card{grid-column:1/-1;}.cs420-single-hero-v54 .cs420-post-title,.cs420-single-hero-v54 .cs420-post-excerpt{text-align:left;}} @media (max-width:760px){body.single-post .site-main{background:#fff;}.cs420-single-v54{padding-bottom:44px;}.cs420-single-hero-v54{min-height:0;margin-bottom:18px;padding:38px 20px 42px;}.cs420-single-hero-v54::before{background:linear-gradient(180deg,rgba(2,23,47,.9),rgba(5,50,105,.82)),var(--cs420-hero-img);background-size:cover;background-position:center;}.cs420-single-hero-v54 .cs420-post-title{font-size:clamp(29px,9vw,40px);line-height:1.08;letter-spacing:-.035em;}.cs420-single-hero-v54 .cs420-post-excerpt{font-size:16px;line-height:1.58;}.cs420-single-hero-v54 .cs420-post-meta{gap:8px 12px;font-size:12px;}.cs420-single-wrap-v54{width:min(100% - 22px,760px);gap:18px;}.cs420-featured-image-v54{border-radius:22px;margin-bottom:18px;}.cs420-featured-image-v54 img{max-height:none;aspect-ratio:4/3;object-fit:cover;}.cs420-single-intro-v54{margin-bottom:16px;padding:16px;border-radius:18px;}.cs420-single-v54 .cs420-post-content{padding:22px 18px;border-radius:22px;box-shadow:0 12px 34px rgba(20,32,51,.06);font-size:16px;line-height:1.76;}.cs420-single-v54 .cs420-post-content h2{font-size:clamp(25px,7.6vw,32px);}.cs420-single-v54 .cs420-post-content .alignright,.cs420-single-v54 .cs420-post-content .alignleft,.cs420-single-v54 .cs420-post-content .img-blog-right,.cs420-single-v54 .cs420-post-content .img-blog-left,.cs420-single-v54 .cs420-post-content .cs420-img-right,.cs420-single-v54 .cs420-post-content .cs420-img-left,.cs420-single-v54 .cs420-post-content .blog-img-right,.cs420-single-v54 .cs420-post-content .blog-img-left,.cs420-single-v54 .cs420-post-content .img-right,.cs420-single-v54 .cs420-post-content .img-left{float:none;display:block;width:100%;max-width:100%;margin:1.15em 0;}.cs420-single-sidebar{display:none;}.cs420-single-v54 .cs420-related-posts{width:min(100% - 22px,760px);margin-top:34px;}.cs420-single-v54 .cs420-blog-cta{grid-template-columns:1fr;text-align:center;border-radius:22px;}.cs420-single-v54 .cs420-blog-cta__button{width:100%;}} @media (max-width:480px){.cs420-single-hero-v54{padding:32px 16px 36px;}.cs420-single-wrap-v54{width:min(100% - 18px,480px);}.cs420-single-v54 .cs420-post-content{padding:20px 15px;border-radius:20px;}.cs420-single-v54 .cs420-post-content p{text-align:left;}.cs420-single-v54 .cs420-post-content table{min-width:620px;}.cs420-single-v54 .cs420-post-content .wp-block-table{overflow-x:auto;}.cs420-post-meta span:not(:last-child)::after{display:none;}} /* ============================================================ 420CreaStack v5.5 — Single limpio editorial real Corrige mezcla de sidebar clásico + headings FAQ en artículos. ============================================================ */ body.single-post{background:#f6f9fc;} body.single-post .cs420-content-area, body.single-post .cs420-content-area.has-sidebar{display:block;width:100%;max-width:none;margin:0;padding:0;} body.single-post .cs420-sidebar, body.single-post aside.widget-area, body.single-post #secondary{display:none !important;} .cs420-single-clean-v55{width:100%;padding:clamp(28px,5vw,64px) 0 72px;background:linear-gradient(180deg,#f4f8fc 0%,#fff 44%);color:#24384a;} .cs420-single-article-v55{width:min(100% - 32px,920px);margin:0 auto;} .cs420-single-header-v55{margin:0 0 24px;padding:clamp(24px,4vw,42px);border:1px solid rgba(26,86,219,.09);border-radius:28px;background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%);box-shadow:0 18px 52px rgba(20,32,51,.08);} .cs420-single-kicker-v55{margin-bottom:14px;} .cs420-single-kicker-v55 a{display:inline-flex;align-items:center;min-height:28px;padding:6px 12px;border-radius:999px;background:#eaf3ff;color:#1a56db;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;} .cs420-single-title-v55{max-width:840px;margin:0;color:var(--cs420-blog-title,#29425f);font-size:clamp(34px,6vw,var(--cs420-blog-h1,46px));font-weight:900;line-height:1.08;letter-spacing:-.035em;text-wrap:balance;} .cs420-single-excerpt-v55{max-width:760px;margin:18px 0 0;color:#52677d;font-size:clamp(17px,2vw,20px);line-height:1.65;} .cs420-single-header-v55 .cs420-post-meta{justify-content:flex-start;margin-top:18px;color:#71869a;font-size:13px;} .cs420-featured-image-v55{margin:0 0 26px;overflow:hidden;border-radius:28px;background:#eaf3ff;box-shadow:0 20px 60px rgba(20,32,51,.12);} .cs420-featured-image-v55 img{display:block;width:100%;height:auto;max-height:540px;object-fit:cover;} .cs420-post-content-v55{width:100%;margin:0;padding:clamp(24px,4vw,44px);border:1px solid rgba(26,86,219,.08);border-radius:30px;background:#fff;box-shadow:0 20px 64px rgba(20,32,51,.07);font-size:var(--cs420-blog-font-size,18px);line-height:1.82;overflow:hidden;} .cs420-post-content-v55 p{margin:0 0 1.15em;color:#31465a;} .cs420-post-content-v55 a{color:var(--cs420-blog-link,#1a70a8);font-weight:800;text-decoration:none;} .cs420-post-content-v55 a:hover{text-decoration:underline;} .cs420-post-content-v55 h2{clear:both;margin:1.55em 0 .65em;padding:0;color:var(--cs420-blog-title,#29425f);font-size:clamp(27px,4.5vw,var(--cs420-blog-h2,34px));font-weight:900;line-height:1.16;letter-spacing:-.025em;text-wrap:balance;border:0;} .cs420-post-content-v55 h2::before{content:"";display:block;width:54px;height:4px;margin:0 0 14px;border-radius:999px;background:linear-gradient(90deg,var(--cs420-primary,#1a56db),var(--cs420-secondary,#38d2f7));} .cs420-post-content-v55 h3{clear:both;margin:1.25em 0 .5em;color:#29425f;font-size:clamp(21px,3.2vw,26px);font-weight:850;line-height:1.22;letter-spacing:-.015em;} .cs420-post-content-v55 ul,.cs420-post-content-v55 ol{margin:0 0 1.25em 1.2em;padding:0;} .cs420-post-content-v55 li{margin:.35em 0;color:#31465a;} .cs420-post-content-v55 img{max-width:100%;height:auto;border-radius:var(--cs420-blog-radius,18px);box-shadow:0 16px 40px rgba(20,32,51,.12);} .cs420-post-content-v55 figure{max-width:100%;margin:1.4em 0;} .cs420-post-content-v55 .alignright,.cs420-post-content-v55 .img-blog-right,.cs420-post-content-v55 .cs420-img-right,.cs420-post-content-v55 .blog-img-right,.cs420-post-content-v55 .img-right{float:right;width:min(42%,360px);max-width:360px;margin:.35em 0 1.2em 2em;} .cs420-post-content-v55 .alignleft,.cs420-post-content-v55 .img-blog-left,.cs420-post-content-v55 .cs420-img-left,.cs420-post-content-v55 .blog-img-left,.cs420-post-content-v55 .img-left{float:left;width:min(42%,360px);max-width:360px;margin:.35em 2em 1.2em 0;} .cs420-post-content-v55 table{width:100%;border-collapse:collapse;border-radius:18px;overflow:hidden;box-shadow:0 14px 36px rgba(20,32,51,.08);} .cs420-post-content-v55 th{background:#113f69;color:#fff;text-align:left;font-weight:850;} .cs420-post-content-v55 th,.cs420-post-content-v55 td{padding:16px;border:1px solid rgba(17,63,105,.12);vertical-align:top;} .cs420-post-content-v55 .wp-block-table{overflow-x:auto;} .cs420-post-content-v55 .wp-block-rank-math-faq-block, .cs420-post-content-v55 .rank-math-block{margin:1.4em 0;padding:24px;border:1px solid rgba(26,86,219,.09);border-radius:24px;background:#fff;box-shadow:0 16px 42px rgba(20,32,51,.07);} .cs420-post-content-v55 .rank-math-list-item{padding:18px 0;border-bottom:1px solid rgba(20,32,51,.09);} .cs420-post-content-v55 .rank-math-list-item:last-child{border-bottom:0;} .cs420-post-content-v55 .rank-math-question, .cs420-post-content-v55 .rank-math-list-item h3{margin:0 0 8px;color:#29425f;font-size:clamp(18px,3.6vw,22px);font-weight:900;line-height:1.22;letter-spacing:-.01em;} .cs420-post-content-v55 .rank-math-question::before, .cs420-post-content-v55 .rank-math-list-item h3::before{display:none;content:none;} .cs420-post-content-v55 .rank-math-answer, .cs420-post-content-v55 .rank-math-answer p{margin:0;color:#41566b;font-size:16px;line-height:1.72;} .cs420-single-clean-v55 .cs420-blog-cta{width:100%;max-width:none;margin:28px 0 0;border-radius:28px;} .cs420-single-clean-v55 .cs420-related-posts{width:100%;max-width:none;margin:46px 0 0;} @media (max-width:760px){body.single-post .site-main{overflow-x:hidden;}.cs420-single-clean-v55{padding:18px 0 48px;background:#fff;}.cs420-single-article-v55{width:min(100% - 22px,720px);}.cs420-single-header-v55{padding:22px 18px;border-radius:22px;margin-bottom:18px;}.cs420-single-title-v55{font-size:clamp(30px,8.4vw,38px);line-height:1.1;}.cs420-single-excerpt-v55{font-size:16px;line-height:1.58;}.cs420-featured-image-v55{border-radius:22px;margin-bottom:18px;}.cs420-featured-image-v55 img{aspect-ratio:4/3;object-fit:cover;}.cs420-post-content-v55{padding:22px 17px;border-radius:22px;box-shadow:0 12px 32px rgba(20,32,51,.06);font-size:16px;line-height:1.76;}.cs420-post-content-v55 h2{font-size:clamp(25px,7.2vw,31px);line-height:1.14;letter-spacing:-.02em;word-spacing:normal;}.cs420-post-content-v55 h3{font-size:clamp(20px,5.4vw,24px);}.cs420-post-content-v55 .alignright,.cs420-post-content-v55 .alignleft,.cs420-post-content-v55 .img-blog-right,.cs420-post-content-v55 .img-blog-left,.cs420-post-content-v55 .cs420-img-right,.cs420-post-content-v55 .cs420-img-left,.cs420-post-content-v55 .blog-img-right,.cs420-post-content-v55 .blog-img-left,.cs420-post-content-v55 .img-right,.cs420-post-content-v55 .img-left{float:none;display:block;width:100%;max-width:100%;margin:1.15em 0;}.cs420-post-content-v55 .wp-block-rank-math-faq-block,.cs420-post-content-v55 .rank-math-block{padding:18px;border-radius:20px;}.cs420-post-content-v55 th,.cs420-post-content-v55 td{padding:13px;}.cs420-single-clean-v55 .cs420-blog-cta{grid-template-columns:1fr;text-align:center;border-radius:22px;}.cs420-single-clean-v55 .cs420-blog-cta__button{width:100%;}} @media (max-width:480px){.cs420-single-article-v55{width:min(100% - 18px,480px);}.cs420-post-content-v55{padding:20px 15px;}.cs420-post-content-v55 p{text-align:left;}.cs420-post-content-v55 table{min-width:620px;}} /* ============================================================ 420CreaStack Theme v5.6 — Single médico definitivo Objetivo: que los posts individuales NO hereden sidebar clásico, no rompan FAQ y mantengan lectura editorial en móvil. ============================================================ */ body.single-post { background: #f5f8fc; } body.single-post .cs420-content-area.has-sidebar, body.single-post .cs420-content-area.sidebar-right, body.single-post .cs420-content-area.sidebar-left { display: block !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: none !important; gap: 0 !important; } body.single-post .cs420-content-area > .cs420-sidebar, body.single-post .cs420-content-area .cs420-sidebar:not(.cs420-single-sidebar), body.single-post aside.cs420-sidebar, body.single-post aside.widget-area, body.single-post .widget-area, body.single-post #secondary, body.single-post .secondary, body.single-post .sidebar-main { display: none !important; width: 0 !important; max-width: 0 !important; overflow: hidden !important; } body.single-post .cs420-primary { width: min(100% - 32px, 920px) !important; max-width: 920px !important; margin: 0 auto !important; } body.single-post .cs420-page { width: 100% !important; max-width: 920px !important; margin: clamp(22px, 4vw, 54px) auto !important; padding: clamp(24px, 4vw, 44px) !important; border: 1px solid rgba(26,86,219,.08) !important; border-radius: 30px !important; background: #fff !important; box-shadow: 0 20px 64px rgba(20,32,51,.07) !important; overflow: hidden !important; } body.single-post .comments-area, body.single-post #comments, body.single-post .comment-respond, body.single-post .post-navigation, body.single-post .navigation.post-navigation { display: none !important; } .cs420-single-v56 { width: 100%; padding: clamp(22px, 4vw, 56px) 0 72px; background: linear-gradient(180deg, #f2f7fc 0%, #ffffff 48%); color: #263a4d; overflow-x: hidden; } .cs420-single-article-v56 { width: 100%; margin: 0 auto; } .cs420-single-hero-v56 { width: min(100% - 32px, 920px); margin: 0 auto 24px; border-radius: 30px; background: radial-gradient(circle at 90% 0%, rgba(56,210,247,.22), transparent 34%), linear-gradient(135deg, #082a58 0%, #0b477c 56%, #0f8dad 100%); box-shadow: 0 22px 70px rgba(10, 45, 85, .18); overflow: hidden; } .cs420-single-hero-v56__inner { padding: clamp(26px, 5vw, 52px); } .cs420-single-kicker-v56 { margin-bottom: 14px; } .cs420-single-kicker-v56 a { display: inline-flex; align-items: center; min-height: 30px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #dff7ff; font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; } .cs420-single-title-v56 { max-width: 840px; margin: 0; color: #fff; font-size: clamp(34px, 6vw, var(--cs420-blog-h1, 48px)); font-weight: 900; line-height: 1.07; letter-spacing: -.035em; text-align: left; text-wrap: balance; } .cs420-single-excerpt-v56 { max-width: 760px; margin: 18px 0 0; color: rgba(255,255,255,.86); font-size: clamp(16px, 2vw, 20px); line-height: 1.64; } .cs420-single-hero-v56 .cs420-post-meta { justify-content: flex-start; margin-top: 18px; color: rgba(255,255,255,.72); font-size: 13px; } .cs420-single-hero-v56 .cs420-post-meta a { color: #fff; } .cs420-single-body-v56 { width: min(100% - 32px, 920px); margin: 0 auto; } .cs420-featured-image-v56 { margin: 0 0 24px; border-radius: 28px; overflow: hidden; background: #eaf3ff; box-shadow: 0 18px 56px rgba(20,32,51,.12); } .cs420-featured-image-v56 img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; } .cs420-entry-v56, body.single-post .cs420-page, body.single-post .entry-content { font-size: var(--cs420-blog-font-size, 18px); line-height: 1.82; color: #304558; text-align: left; word-spacing: normal; } .cs420-entry-v56 { width: 100%; padding: clamp(24px, 4vw, 44px); border: 1px solid rgba(26,86,219,.08); border-radius: 30px; background: #fff; box-shadow: 0 20px 64px rgba(20,32,51,.07); overflow: hidden; } .cs420-entry-v56 p, body.single-post .cs420-page p, body.single-post .entry-content p { margin: 0 0 1.15em; color: #304558; text-align: left !important; word-spacing: normal !important; } .cs420-entry-v56 a, body.single-post .cs420-page a, body.single-post .entry-content a { color: var(--cs420-blog-link, #1a70a8); font-weight: 800; text-decoration: none; } .cs420-entry-v56 a:hover, body.single-post .entry-content a:hover { text-decoration: underline; } .cs420-entry-v56 > h1:first-child, body.single-post .cs420-page > h1:first-child, body.single-post .entry-content > h1:first-child { display: none !important; } .cs420-entry-v56 h2, body.single-post .cs420-page h2, body.single-post .entry-content h2 { clear: both; margin: 1.55em 0 .65em; padding: 0; border: 0; color: var(--cs420-blog-title, #29425f); font-size: clamp(27px, 4.5vw, var(--cs420-blog-h2, 34px)); font-weight: 900; line-height: 1.16; letter-spacing: -.025em; text-align: left !important; word-spacing: normal !important; text-wrap: balance; } .cs420-entry-v56 h2::before, body.single-post .cs420-page h2::before, body.single-post .entry-content h2::before { content: ""; display: block; width: 54px; height: 4px; margin: 0 0 14px; border-radius: 999px; background: linear-gradient(90deg, var(--cs420-primary, #1a56db), var(--cs420-secondary, #38d2f7)); } .cs420-entry-v56 h3, body.single-post .cs420-page h3, body.single-post .entry-content h3, .cs420-entry-v56 .rank-math-question, body.single-post .entry-content .rank-math-question { clear: both; margin: 1.1em 0 .45em; color: #29425f; font-size: clamp(20px, 3.1vw, 25px); font-weight: 850; line-height: 1.23; letter-spacing: -.012em; text-align: left !important; word-spacing: normal !important; text-wrap: balance; } .cs420-entry-v56 ul, .cs420-entry-v56 ol, body.single-post .entry-content ul, body.single-post .entry-content ol { margin: 0 0 1.25em 1.2em; padding: 0; } .cs420-entry-v56 li, body.single-post .entry-content li { margin: .35em 0; color: #304558; } .cs420-entry-v56 img, body.single-post .cs420-page img, body.single-post .entry-content img { max-width: 100%; height: auto; border-radius: var(--cs420-blog-radius, 18px); box-shadow: 0 16px 40px rgba(20,32,51,.12); } .cs420-entry-v56 figure, body.single-post .entry-content figure { max-width: 100%; margin: 1.4em 0; } .cs420-entry-v56 .alignright, .cs420-entry-v56 .img-blog-right, .cs420-entry-v56 .cs420-img-right, .cs420-entry-v56 .blog-img-right, .cs420-entry-v56 .img-right, body.single-post .entry-content .alignright, body.single-post .entry-content .img-blog-right, body.single-post .entry-content .cs420-img-right, body.single-post .entry-content .blog-img-right, body.single-post .entry-content .img-right { float: right; width: min(42%, 360px); max-width: 360px; margin: .35em 0 1.2em 2em; } .cs420-entry-v56 .alignleft, .cs420-entry-v56 .img-blog-left, .cs420-entry-v56 .cs420-img-left, .cs420-entry-v56 .blog-img-left, .cs420-entry-v56 .img-left, body.single-post .entry-content .alignleft, body.single-post .entry-content .img-blog-left, body.single-post .entry-content .cs420-img-left, body.single-post .entry-content .blog-img-left, body.single-post .entry-content .img-left { float: left; width: min(42%, 360px); max-width: 360px; margin: .35em 2em 1.2em 0; } .cs420-entry-v56 .wp-block-table, body.single-post .entry-content .wp-block-table { overflow-x: auto; } .cs420-entry-v56 table, body.single-post .entry-content table { width: 100%; border-collapse: collapse; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 36px rgba(20,32,51,.08); } .cs420-entry-v56 th, body.single-post .entry-content th { background: #113f69; color: #fff; text-align: left; font-weight: 850; } .cs420-entry-v56 th, .cs420-entry-v56 td, body.single-post .entry-content th, body.single-post .entry-content td { padding: 16px; border: 1px solid rgba(17,63,105,.12); vertical-align: top; } .cs420-entry-v56 .wp-block-rank-math-faq-block, .cs420-entry-v56 .rank-math-block, body.single-post .entry-content .wp-block-rank-math-faq-block, body.single-post .entry-content .rank-math-block { margin: 1.4em 0; padding: 24px; border: 1px solid rgba(26,86,219,.09); border-radius: 24px; background: #fff; box-shadow: 0 16px 42px rgba(20,32,51,.07); } .cs420-entry-v56 .rank-math-list-item, body.single-post .entry-content .rank-math-list-item { padding: 18px 0; border-bottom: 1px solid rgba(20,32,51,.09); } .cs420-entry-v56 .rank-math-list-item:last-child, body.single-post .entry-content .rank-math-list-item:last-child { border-bottom: 0; } .cs420-single-v56 .cs420-blog-cta, body.single-post .cs420-blog-cta { width: 100%; max-width: none; margin: 28px 0 0; border-radius: 28px; } .cs420-single-v56 .cs420-related-posts, body.single-post .cs420-related-posts { width: 100%; max-width: none; margin: 46px 0 0; } @media (max-width: 760px) { body.single-post { background: #fff; } body.single-post .cs420-primary { width: min(100% - 22px, 720px) !important; max-width: 720px !important; } body.single-post .cs420-page { margin: 18px auto 44px !important; padding: 22px 17px !important; border-radius: 22px !important; box-shadow: 0 12px 32px rgba(20,32,51,.06) !important; } .cs420-single-v56 { padding: 18px 0 48px; background: #fff; } .cs420-single-hero-v56, .cs420-single-body-v56 { width: min(100% - 22px, 720px); } .cs420-single-hero-v56 { margin-bottom: 18px; border-radius: 22px; } .cs420-single-hero-v56__inner { padding: 24px 18px; } .cs420-single-title-v56 { font-size: clamp(30px, 8.4vw, 38px); line-height: 1.1; } .cs420-single-excerpt-v56 { font-size: 16px; line-height: 1.58; } .cs420-featured-image-v56 { border-radius: 22px; margin-bottom: 18px; } .cs420-featured-image-v56 img { aspect-ratio: 4 / 3; object-fit: cover; } .cs420-entry-v56, body.single-post .cs420-page, body.single-post .entry-content { font-size: 16px; line-height: 1.76; } .cs420-entry-v56 { padding: 22px 17px; border-radius: 22px; box-shadow: 0 12px 32px rgba(20,32,51,.06); } .cs420-entry-v56 h2, body.single-post .cs420-page h2, body.single-post .entry-content h2 { font-size: clamp(25px, 7vw, 31px); line-height: 1.14; } .cs420-entry-v56 h3, body.single-post .cs420-page h3, body.single-post .entry-content h3, .cs420-entry-v56 .rank-math-question, body.single-post .entry-content .rank-math-question { font-size: clamp(20px, 5.3vw, 24px); line-height: 1.18; } .cs420-entry-v56 .alignright, .cs420-entry-v56 .alignleft, .cs420-entry-v56 .img-blog-right, .cs420-entry-v56 .img-blog-left, .cs420-entry-v56 .cs420-img-right, .cs420-entry-v56 .cs420-img-left, .cs420-entry-v56 .blog-img-right, .cs420-entry-v56 .blog-img-left, .cs420-entry-v56 .img-right, .cs420-entry-v56 .img-left, body.single-post .entry-content .alignright, body.single-post .entry-content .alignleft, body.single-post .entry-content .img-blog-right, body.single-post .entry-content .img-blog-left, body.single-post .entry-content .cs420-img-right, body.single-post .entry-content .cs420-img-left, body.single-post .entry-content .blog-img-right, body.single-post .entry-content .blog-img-left, body.single-post .entry-content .img-right, body.single-post .entry-content .img-left { float: none; display: block; width: 100%; max-width: 100%; margin: 1.15em 0; } .cs420-entry-v56 .wp-block-rank-math-faq-block, .cs420-entry-v56 .rank-math-block, body.single-post .entry-content .wp-block-rank-math-faq-block, body.single-post .entry-content .rank-math-block { padding: 18px; border-radius: 20px; } .cs420-entry-v56 th, .cs420-entry-v56 td, body.single-post .entry-content th, body.single-post .entry-content td { padding: 13px; } .cs420-single-v56 .cs420-blog-cta, body.single-post .cs420-blog-cta { grid-template-columns: 1fr; text-align: center; border-radius: 22px; } .cs420-single-v56 .cs420-blog-cta__button, body.single-post .cs420-blog-cta__button { width: 100%; } } @media (max-width: 480px) { body.single-post .cs420-primary { width: min(100% - 18px, 480px) !important; } body.single-post .cs420-page, .cs420-entry-v56 { padding: 20px 15px !important; } .cs420-entry-v56 table, body.single-post .entry-content table { min-width: 620px; } } /* ========================================================= 420CreaStack Header/Footer Builder Lite v5.6.4 ========================================================= */ .cs420-width-contained { max-width: 1200px; } .cs420-width-wide { max-width: 1440px; } .cs420-width-full { max-width: none; padding-inline: 28px; } .header-bar { background: var(--cs420-topbar-bg, var(--cs420-primary)); } .header-bar__link { color: color-mix(in srgb, var(--cs420-topbar-text, #fff) 78%, transparent); } .header-bar__link:hover { color: var(--cs420-topbar-text, #fff); } .header-bar__socials { display:flex; align-items:center; gap:8px; flex-shrink:0; } .header-bar__socials a { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; color:var(--cs420-topbar-text,#fff); text-decoration:none; border:1px solid color-mix(in srgb, var(--cs420-topbar-text,#fff) 22%, transparent); font-size:10px; font-weight:700; text-transform:uppercase; } .cs420-topbar-layout-centered .header-bar__inner { justify-content:center; } .cs420-topbar-layout-centered .header-bar__contacts { justify-content:center; } .cs420-topbar-layout-cta_right .header-bar__cta { margin-left:auto; } .header-nav { background: color-mix(in srgb, var(--cs420-header-bg, #fff) 96%, transparent); } .site-logo__text b, .nav-toggle span, .nav-list a { color: var(--cs420-header-text, var(--cs420-text)); } .header-custom-html { font-size:13px; color: color-mix(in srgb, var(--cs420-header-text, var(--cs420-text)) 72%, transparent); display:flex; align-items:center; gap:8px; max-width:280px; } .nav-cta-mobile { display:none; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; background:var(--cs420-primary); color:#fff; text-decoration:none; font-size:12px; font-weight:700; margin-left:auto; } .cs420-header-style-clean .header-nav { box-shadow:none; border-bottom:1px solid rgba(0,0,0,.06); backdrop-filter:none; } .cs420-header-style-soft .header-nav__inner { margin-top:10px; margin-bottom:10px; border-radius:22px; padding-inline:22px; background:var(--cs420-header-bg,#fff); box-shadow:0 14px 34px rgba(15,30,55,.08); } .cs420-header-style-solid .header-nav { background:var(--cs420-primary); border:0; } .cs420-header-style-solid .site-logo__text b, .cs420-header-style-solid .site-logo__text small, .cs420-header-style-solid .nav-list a { color:#fff; } .cs420-header-style-solid .nav-toggle { border-color:rgba(255,255,255,.22); } .cs420-header-style-solid .nav-toggle span { background:#fff; } .cs420-header-style-solid .nav-cta { background:#fff; color:var(--cs420-primary)!important; box-shadow:none; } .cs420-header-layout-centered_logo .header-nav__inner { justify-content:center; flex-wrap:wrap; row-gap:10px; } .cs420-header-layout-centered_logo .site-logo { order:1; width:100%; justify-content:center; } .cs420-header-layout-centered_logo .nav-toggle { order:2; } .cs420-header-layout-centered_logo .primary-nav { order:3; } .cs420-header-layout-split .header-custom-html { display:flex; } .cs420-header-layout-minimal .header-bar { display:none; } .cs420-header-layout-minimal .nav-cta, .cs420-header-layout-minimal .header-custom-html { display:none!important; } @media (max-width: 768px) { .cs420-mobile-header-logo_menu_cta .nav-cta-mobile { display:inline-flex; } .cs420-mobile-header-centered_logo .header-nav__inner { justify-content:center; } .cs420-mobile-header-centered_logo .site-logo { margin-inline:auto; } .cs420-mobile-header-centered_logo .nav-toggle { position:absolute; right:18px; } .header-bar__link--address { display:none; } .cs420-width-full { padding-inline:18px; } } .site-footer { background: var(--cs420-footer-custom-bg, var(--cs420-footer-bg)); color: color-mix(in srgb, var(--cs420-footer-custom-text, #d2e1f5) 72%, transparent); } .site-footer a { color: color-mix(in srgb, var(--cs420-footer-custom-text, #d2e1f5) 68%, transparent); } .site-footer a:hover { color: var(--cs420-footer-accent, var(--cs420-secondary)); } .footer-pill { color: var(--cs420-footer-accent, var(--cs420-secondary)); border-color: color-mix(in srgb, var(--cs420-footer-accent, var(--cs420-secondary)) 28%, transparent); } .footer-col__title { color: color-mix(in srgb, var(--cs420-footer-accent, var(--cs420-secondary)) 62%, transparent); } .footer-description { margin-top:16px; max-width:360px; color: color-mix(in srgb, var(--cs420-footer-custom-text, #d2e1f5) 66%, transparent); font-size:14px; } .footer-socials { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; } .footer-socials a { width:32px; height:32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--cs420-footer-custom-text, #d2e1f5) 18%, transparent); text-decoration:none; text-transform:uppercase; font-size:11px; font-weight:800; } .footer-custom-html { margin-top:18px; font-size:14px; color: color-mix(in srgb, var(--cs420-footer-custom-text, #d2e1f5) 72%, transparent); } .footer-legal-inline { display:flex; gap:14px; list-style:none; flex-wrap:wrap; margin:0; padding:0; } .footer-legal-inline li { list-style:none; } .footer-legal-inline a { font-size:12px; text-decoration:none; } .cs420-footer-layout-compact_3 .footer-grid { grid-template-columns:1.4fr 1fr 1fr; } .cs420-footer-layout-compact_3 .footer-col--services { display:none; } .cs420-footer-layout-centered .footer-grid { grid-template-columns:1fr; text-align:center; max-width:820px; } .cs420-footer-layout-centered .footer-col--brand, .cs420-footer-layout-centered .footer-socials, .cs420-footer-layout-centered .footer-nav, .cs420-footer-layout-centered .footer-contact { align-items:center; justify-content:center; } .cs420-footer-layout-centered .footer-description { margin-left:auto; margin-right:auto; } .cs420-footer-layout-minimal .footer-bottom { border-top:0; padding:28px 0; } .cs420-footer-layout-minimal .footer-bottom__inner { justify-content:center; text-align:center; } @media (max-width: 920px) { .cs420-footer-layout-compact_3 .footer-grid, .footer-grid { grid-template-columns:1fr 1fr; } } @media (max-width: 580px) { .cs420-footer-layout-compact_3 .footer-grid, .footer-grid { grid-template-columns:1fr; } .footer-bottom__inner { align-items:flex-start; } .footer-legal-inline { flex-direction:column; gap:6px; } } /* ───────────────────────────────────────────── 420CreaStack Header/Footer Builder Pro v5.6.6 Sistema por zonas inspirado en builders visuales. ───────────────────────────────────────────── */ .cs420-hfb-header{background:var(--cs420-header-bg,#fff);color:var(--cs420-header-text,#142033);z-index:80;width:100%;} .cs420-hfb-row{border-bottom:1px solid rgba(20,32,51,.08);background:inherit;} .cs420-hfb-row--top{font-size:13px;background:var(--cs420-topbar-bg,var(--cs420-primary));color:var(--cs420-topbar-text,#fff);} .cs420-hfb-row--main{background:var(--cs420-header-bg,#fff);} .cs420-hfb-row--bottom{background:rgba(255,255,255,.76);backdrop-filter:blur(14px);} .cs420-hfb-row__inner{min-height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;} .cs420-hfb-row--main .cs420-hfb-row__inner{min-height:var(--cs420-header-height,68px);} .cs420-hfb-zone{display:flex;align-items:center;gap:12px;min-width:0;} .cs420-hfb-zone--left{justify-content:flex-start;} .cs420-hfb-zone--center{justify-content:center;} .cs420-hfb-zone--right{justify-content:flex-end;} .cs420-hfb-el{display:inline-flex;align-items:center;min-width:0;} .cs420-hfb-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;} .cs420-hfb-logo img{max-height:var(--cs420-logo-height,48px);width:auto;display:block;} .cs420-hfb-logo__mark{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:var(--cs420-primary);color:#fff;font-weight:800;} .cs420-hfb-logo__text{display:grid;line-height:1.05;} .cs420-hfb-logo__text b{font-size:16px;color:inherit;} .cs420-hfb-logo__text small{font-size:11px;opacity:.72;text-transform:uppercase;letter-spacing:.05em;} .cs420-hfb-contact{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;white-space:nowrap;opacity:.9;} .cs420-hfb-socials,.footer-socials{display:inline-flex;gap:8px;align-items:center;} .cs420-hfb-socials a,.footer-socials a{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;text-decoration:none;color:inherit;border:1px solid currentColor;opacity:.85;font-size:11px;font-weight:700;} .cs420-hfb-icon-btn{width:38px;height:38px;border-radius:999px;border:1px solid rgba(20,32,51,.14);background:transparent;color:inherit;display:inline-grid;place-items:center;text-decoration:none;position:relative;} .cs420-hfb-icon-btn small{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:999px;background:var(--cs420-primary);color:#fff;font-size:10px;display:grid;place-items:center;} .cs420-hfb-cta{white-space:nowrap;} .cs420-hfb-html{font-size:13px;opacity:.9;} .cs420-hfb-nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;} .cs420-hfb-nav-list li{margin:0;} .cs420-hfb-nav-list a{display:inline-flex;padding:9px 10px;text-decoration:none;color:inherit;font-weight:650;font-size:14px;border-radius:999px;} .cs420-hfb-nav-list a:hover{background:rgba(20,32,51,.06);} .cs420-hfb-footer{background:var(--cs420-footer-bg,#07162b);color:#fff;} .cs420-hfb-footer-row{border-top:1px solid rgba(255,255,255,.08);} .cs420-hfb-footer-row--top{background:rgba(255,255,255,.035);} .cs420-hfb-footer-row--main .cs420-hfb-row__inner{align-items:flex-start;padding:46px 0;grid-template-columns:1.1fr 1fr 1fr;} .cs420-hfb-footer-row--top .cs420-hfb-row__inner{padding:22px 0;} .cs420-hfb-footer-row--bottom .cs420-hfb-row__inner{padding:18px 0;min-height:auto;font-size:13px;color:rgba(255,255,255,.62);} .cs420-hfb-footer .cs420-hfb-zone{align-items:flex-start;flex-wrap:wrap;} .cs420-hfb-footer .cs420-hfb-zone--left,.cs420-hfb-footer .cs420-hfb-zone--center,.cs420-hfb-footer .cs420-hfb-zone--right{justify-content:flex-start;} .cs420-hfb-footer .cs420-hfb-el{width:100%;display:block;} .cs420-hfb-footer-cta{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;} .cs420-hfb-footer .footer-nav{list-style:none;margin:0;padding:0;display:grid;gap:9px;} .cs420-hfb-footer .footer-contact{list-style:none;margin:0;padding:0;display:grid;gap:9px;} .cs420-hfb-footer a{color:inherit;} @media (max-width: 900px){.cs420-hfb-row__inner{grid-template-columns:1fr auto;}.cs420-hfb-row--top .cs420-hfb-zone--center,.cs420-hfb-row--top .cs420-hfb-zone--right,.cs420-hfb-row--bottom{display:none;}.cs420-hfb-row--main .cs420-hfb-zone--center{display:none;}.cs420-hfb-footer-row--main .cs420-hfb-row__inner{grid-template-columns:1fr;gap:28px;}.cs420-hfb-footer-cta{display:grid;}.cs420-hfb-contact{white-space:normal;}.cs420-hfb-el--cta{display:none;}} /* 420CreaStack v5.6.8 — Elementor editor safety */ .elementor-editor-active .cs420-hfb-header, .elementor-editor-active .cs420-hfb-footer, .elementor-editor-active #header-spacer { position: relative !important; inset: auto !important; transform: none !important; } .cs420-elementor-safe-header { position: relative !important; z-index: 1 !important; min-height: 54px !important; background: #fff !important; border-bottom: 1px solid rgba(20,32,51,.08) !important; } .cs420-elementor-safe-header .header-nav__inner { min-height: 54px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .cs420-elementor-safe-note { font-size: 12px !important; opacity: .55 !important; } body.elementor-editor-active #cs420-hfb-visual-builder, body.elementor-editor-active .cs420-hfb-vb-head, body.elementor-editor-active .cs420-hfb-vb-body, body.elementor-editor-active .cs420-hfb-vb-library { display: none !important; } /* ============================================================ 420CreaStack v5.7.1 — Preset Premium Rojo Layout real basado en el mockup aprobado: #CB593E, footer rojo, iconos blancos, CTA blanco y trust bar PRO. ============================================================ */ body.cs420-preset-premium_red { --cs420-premium-red: #CB593E; --cs420-primary: var(--cs420-premium-red); --cs420-secondary: var(--cs420-premium-red); --cs420-topbar-bg: var(--cs420-premium-red); --cs420-topbar-text: #ffffff; --cs420-footer-custom-bg: var(--cs420-premium-red); --cs420-footer-custom-text: #ffffff; --cs420-footer-accent: #ffffff; } body.cs420-preset-premium_red .cs420-hfb-row--top{background:var(--cs420-topbar-bg,#CB593E);color:#fff;border-bottom:0} body.cs420-preset-premium_red .cs420-hfb-row--top .cs420-hfb-row__inner{min-height:45px} body.cs420-preset-premium_red .cs420-hfb-row--main{background:#fff;border-bottom:1px solid rgba(18,30,44,.08);box-shadow:0 14px 42px rgba(17,24,39,.06)} body.cs420-preset-premium_red .cs420-hfb-row--main .cs420-hfb-row__inner{min-height:98px} body.cs420-preset-premium_red .cs420-hfb-logo img{max-height:68px} body.cs420-preset-premium_red .cs420-hfb-nav-list a{color:#12213a;font-weight:750;font-size:13px} body.cs420-preset-premium_red .cs420-hfb-nav-list a:hover{color:var(--cs420-premium-red);background:rgba(203,89,62,.08)} body.cs420-preset-premium_red .nav-cta,body.cs420-preset-premium_red .cs420-hfb-cta{background:var(--cs420-premium-red);color:#fff!important;border-radius:999px;border:0;box-shadow:0 12px 26px rgba(203,89,62,.22)} body.cs420-preset-premium_red .cs420-hfb-row--main .cs420-hfb-icon-btn,body.cs420-preset-premium_red .cs420-hfb-toggle{background:#fff;border-color:rgba(18,30,44,.13);color:#12213a;box-shadow:0 8px 22px rgba(17,24,39,.06)} body.cs420-preset-premium_red .cs420-hfb-socials a{color:#fff;border-color:rgba(255,255,255,.72)} body.cs420-preset-premium_red .cs420-trust-strip{background:#fff;border-top:1px solid rgba(203,89,62,.09);border-bottom:1px solid rgba(203,89,62,.10);box-shadow:0 -14px 42px rgba(203,89,62,.035)} body.cs420-preset-premium_red .cs420-trust-item span{background:#CB593E;color:#fff;border-radius:999px} body.cs420-preset-premium_red .cs420-trust-item strong{color:#15253d} body.cs420-preset-premium_red .cs420-trust-item p{color:#697789} body.cs420-preset-premium_red .cs420-hfb-footer,body.cs420-preset-premium_red .site-footer.cs420-hfb-footer{background:linear-gradient(135deg,#CB593E 0%,#c64f39 48%,#b94631 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)} body.cs420-preset-premium_red .cs420-hfb-footer-row{border-top-color:rgba(255,255,255,.18)} body.cs420-preset-premium_red .cs420-hfb-footer-row--top{background:rgba(255,255,255,.11)} body.cs420-preset-premium_red .cs420-hfb-footer-row--top .cs420-hfb-row__inner{padding:25px 0} body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-row__inner{padding:50px 0 42px;gap:56px} body.cs420-preset-premium_red .cs420-hfb-footer .footer-col__title,body.cs420-preset-premium_red .cs420-hfb-footer strong,body.cs420-preset-premium_red .cs420-hfb-footer .footer-doctor{color:#fff} body.cs420-preset-premium_red .cs420-hfb-footer .footer-description,body.cs420-preset-premium_red .cs420-hfb-footer .footer-contact,body.cs420-preset-premium_red .cs420-hfb-footer .footer-contact li,body.cs420-preset-premium_red .cs420-hfb-footer a{color:rgba(255,255,255,.90)} body.cs420-preset-premium_red .cs420-hfb-footer a:hover{color:#fff} body.cs420-preset-premium_red .cs420-hfb-footer .footer-nav li{border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:8px} body.cs420-preset-premium_red .cs420-hfb-footer .footer-nav a::after{content:'›';float:right;opacity:.85} body.cs420-preset-premium_red .footer-pill{color:#fff;border-color:rgba(255,255,255,.82);background:rgba(255,255,255,.07)} body.cs420-preset-premium_red .footer-socials a,body.cs420-preset-premium_red .cs420-hfb-footer .cs420-hfb-socials a{color:#fff;border-color:rgba(255,255,255,.88);background:rgba(255,255,255,.06)} body.cs420-preset-premium_red .footer-cta__inner.cs420-hfb-footer-cta{background:rgba(255,255,255,.04);border-radius:0;color:#fff} body.cs420-preset-premium_red .cs420-hfb-footer-cta .footer-cta__title{color:#fff;font-family:var(--cs420-heading-font);font-size:clamp(22px,2.2vw,30px)} body.cs420-preset-premium_red .cs420-hfb-footer-cta .footer-cta__sub{color:rgba(255,255,255,.82)} body.cs420-preset-premium_red .cs420-hfb-footer-cta .btn-primary,body.cs420-preset-premium_red .cs420-hfb-footer .btn-primary{background:#fff;color:var(--cs420-premium-red)!important;border:0;box-shadow:0 16px 30px rgba(89,28,16,.18)} body.cs420-preset-premium_red .cs420-hfb-footer-row--bottom .cs420-hfb-row__inner{color:rgba(255,255,255,.82)} body.cs420-preset-premium_red .cs420-hfb-footer-row--bottom .cs420-hfb-zone--center::before{content:'IH';display:inline-grid;place-items:center;width:34px;height:34px;margin-inline:auto;border-radius:999px;border:1px solid rgba(255,255,255,.45);color:#fff;font-family:var(--cs420-heading-font);font-weight:700} @media (max-width:900px){body.cs420-preset-premium_red .cs420-hfb-row--top .cs420-hfb-zone--left{width:100%;justify-content:flex-start;flex-wrap:wrap}body.cs420-preset-premium_red .cs420-hfb-row--main .cs420-hfb-row__inner{min-height:90px}body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-row__inner{gap:0;padding:32px 0 24px}body.cs420-preset-premium_red .cs420-hfb-footer .cs420-hfb-zone{border-bottom:1px solid rgba(255,255,255,.15);padding:18px 0}body.cs420-preset-premium_red .cs420-hfb-footer .cs420-hfb-zone--center::before,body.cs420-preset-premium_red .cs420-hfb-footer .cs420-hfb-zone--right::before{display:block;width:100%;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-zone--center::before{content:'Enlaces rápidos'}body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-zone--right::before{content:'Contacto'}body.cs420-preset-premium_red .cs420-hfb-footer-row--bottom .cs420-hfb-row__inner{text-align:center}} @media (max-width:680px){body.cs420-preset-premium_red .cs420-trust-strip{grid-template-columns:1fr;gap:10px;padding:18px}body.cs420-preset-premium_red .cs420-trust-item{grid-template-columns:44px 1fr;padding:12px 0;border-bottom:1px solid rgba(203,89,62,.10)}body.cs420-preset-premium_red .cs420-trust-item span{width:34px;height:34px;border-radius:999px}body.cs420-preset-premium_red .cs420-hfb-footer-cta{gap:16px;text-align:left}body.cs420-preset-premium_red .cs420-hfb-footer-cta .btn-primary{width:100%;justify-content:center}} /* ============================================================ 420CreaStack v5.7.3 — Footer Builder Pro sync fix El frontend debe corresponder con los elementos del Builder Pro. Se eliminan títulos automáticos heredados que duplicaban headings como “Enlaces rápidos” y “Contacto” en responsive. ============================================================ */ body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-zone--center::before, body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-zone--right::before, body.cs420-preset-premium_red .cs420-hfb-footer .cs420-hfb-zone--center::before, body.cs420-preset-premium_red .cs420-hfb-footer .cs420-hfb-zone--right::before { content: none !important; display: none !important; } body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-zone--center, body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-zone--right { padding-top: 18px; } body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-zone--center .footer-col__title:first-child, body.cs420-preset-premium_red .cs420-hfb-footer-row--main .cs420-hfb-zone--right .footer-col__title:first-child { margin-top: 0; } body.cs420-preset-premium_red .cs420-hfb-footer-row--top .cs420-hfb-row__inner { display: block; } body.cs420-preset-premium_red .cs420-hfb-footer-row--top .cs420-hfb-zone { width: 100%; } body.cs420-preset-premium_red .cs420-hfb-footer-row--top .cs420-hfb-zone:empty { display: none; } body.cs420-preset-premium_red .cs420-hfb-footer-cta { max-width: 1180px; margin-inline: auto; } @media (max-width: 900px) { body.cs420-preset-premium_red .cs420-hfb-footer .footer-col__title { margin-top: 0; } body.cs420-preset-premium_red .cs420-hfb-footer .cs420-hfb-zone { border-bottom: 1px solid rgba(255,255,255,.15); padding: 18px 0; } body.cs420-preset-premium_red .cs420-hfb-footer-row--bottom .cs420-hfb-zone { justify-content: center; text-align: center; } }