/* ========================================================= SONRILASER · Plantilla moderna 2026 Una sola hoja, dos temas: → Clínico premium → Lujo estético Solo apariencia: no cambia ningún texto del sitio. ========================================================= */ /* ---------- 1. Tokens por tema ---------- */ .sr-clinico { --bg: #f5f8fb; --bg-alt: #ffffff; --surface: #ffffff; --surface-2: #eef4f9; --ink: #0f2238; --ink-soft: #4a5d73; --muted: #6b7c90; --brand: #1560bd; /* azul del banner */ --brand-2: #0c8c9d; /* turquesa de la marca */ --brand-deep: #0a2a4a; --accent: #19b3c9; --line: rgba(15, 34, 56, .08); --line-strong: rgba(21, 96, 189, .22); --grad: linear-gradient(135deg, #1560bd 0%, #0c8c9d 100%); --grad-soft: linear-gradient(135deg, rgba(21,96,189,.10), rgba(12,140,157,.10)); --shadow-sm: 0 2px 6px rgba(10, 42, 74, .05); --shadow: 0 18px 40px -18px rgba(10, 42, 74, .22); --shadow-lg: 0 30px 70px -25px rgba(10, 42, 74, .35); --nav-bg: rgba(255,255,255,.82); --topbar-bg: #0a2a4a; --topbar-ink: #cfe3f5; --footer-bg: #081c33; --footer-ink: #a9bbcf; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --display-weight: 800; --display-tracking: -.02em; --radius: 22px; } .sr-lujo { --bg: #0c1118; --bg-alt: #111822; --surface: #141c27; --surface-2: #1a2431; --ink: #f4efe6; --ink-soft: #d4ccbe; --muted: #9aa3ae; --brand: #c9a45c; /* dorado del logo */ --brand-2: #e3c88f; --brand-deep: #f4efe6; --accent: #e3c88f; --line: rgba(227, 200, 143, .12); --line-strong: rgba(227, 200, 143, .38); --grad: linear-gradient(135deg, #b8893f 0%, #e9d196 50%, #b8893f 100%); --grad-soft: linear-gradient(135deg, rgba(201,164,92,.10), rgba(227,200,143,.04)); --shadow-sm: 0 2px 6px rgba(0,0,0,.3); --shadow: 0 22px 50px -22px rgba(0,0,0,.7); --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.85); --nav-bg: rgba(12,17,24,.78); --topbar-bg: #070a0f; --topbar-ink: #b9ae98; --footer-bg: #070a0f; --footer-ink: #8f97a1; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --display-weight: 600; --display-tracking: .005em; --radius: 14px; } /* ---------- 2. Base ---------- */ html { scroll-behavior: smooth; } body.sr { font-family: var(--font-body); background: var(--bg); color: var(--ink-soft); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .sr a { transition: color .2s ease; } .sr a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .sr ::selection { background: var(--brand); color: #fff; } /* Barra de progreso de lectura */ .sr-progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad); z-index: 100000; pointer-events: none; } /* Fondo decorativo */ .sr-orbs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .sr-orbs span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; } .sr-clinico .sr-orbs span:nth-child(1) { width: 520px; height: 520px; background: #cfe4ff; top: -160px; left: -140px; } .sr-clinico .sr-orbs span:nth-child(2) { width: 460px; height: 460px; background: #c9f1f4; top: 40%; right: -180px; } .sr-lujo .sr-orbs span:nth-child(1) { width: 560px; height: 560px; background: rgba(201,164,92,.16); top: -200px; right: -160px; } .sr-lujo .sr-orbs span:nth-child(2) { width: 500px; height: 500px; background: rgba(40,80,140,.22); top: 45%; left: -220px; } /* ---------- 3. Barra superior ---------- */ .sr .top-info-bar { background: var(--topbar-bg); color: var(--topbar-ink); font-size: 13px; padding: 9px 0; letter-spacing: .02em; } .sr .top-info-bar i { color: var(--accent); margin-right: 4px; } .sr .top-info-bar a { color: #fff !important; font-weight: 600; text-decoration: none; margin-left: 18px; } .sr .top-info-bar a:hover { color: var(--accent) !important; } .sr-lujo .top-info-bar { border-bottom: 1px solid var(--line); } /* ---------- 4. Menú ---------- */ .sr .navbar-default { position: sticky; top: 0; z-index: 9999; background: var(--nav-bg); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; padding: 10px 0; transition: padding .3s ease, box-shadow .3s ease; } .sr .navbar-default.is-scrolled { padding: 3px 0; box-shadow: var(--shadow); } .sr .navbar-default .navbar-collapse { border: 0; box-shadow: none; } @media (min-width: 768px) { .sr .navbar-default .navbar-nav { float: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 2px; } .sr .navbar-default .navbar-nav > li { float: none; } } .sr .navbar-default .navbar-nav > li > a { color: var(--ink) !important; font-weight: 600; font-size: 13px; padding: 8px 11px; border-radius: 999px; position: relative; transition: background .2s ease, color .2s ease; } .sr-lujo .navbar-default .navbar-nav > li > a { color: var(--ink-soft) !important; font-weight: 500; letter-spacing: .03em; } .sr .navbar-default .navbar-nav > li > a:hover { background: var(--grad-soft) !important; color: var(--brand) !important; } .sr .navbar-default .navbar-nav > .active > a, .sr .navbar-default .navbar-nav > .active > a:hover, .sr .navbar-default .navbar-nav > .active > a:focus { background: var(--grad) !important; color: #fff !important; box-shadow: 0 6px 16px -6px var(--line-strong); } .sr-lujo .navbar-default .navbar-nav > .active > a { color: #1a1206 !important; } .sr .navbar-default .navbar-brand { font-weight: 800; letter-spacing: .14em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .sr-lujo .navbar-default .navbar-brand { font-family: var(--font-display); font-size: 22px; letter-spacing: .18em; } .sr .navbar-default .navbar-toggle { border: 1px solid var(--line-strong); border-radius: 12px; } .sr .navbar-default .navbar-toggle:hover, .sr .navbar-default .navbar-toggle:focus { background: var(--grad-soft); } .sr .navbar-default .navbar-toggle .icon-bar { background: var(--brand); } @media (max-width: 767px) { .sr .navbar-default .navbar-nav { margin: 8px 0 12px; } .sr .navbar-default .navbar-nav > li > a { padding: 11px 16px; font-size: 15px; } .sr .navbar-default .navbar-collapse { max-height: 72vh; } } /* ---------- 5. Portada (hero) ---------- */ .sr .hero-banner-wrap { position: relative; background: none; text-align: center; padding: 44px 0 10px; } .sr .hero-image-container { position: relative; border-radius: calc(var(--radius) + 8px); overflow: hidden; border: 0; margin-bottom: 0; box-shadow: var(--shadow-lg); isolation: isolate; } .sr .hero-image-container::after { /* brillo que recorre la imagen */ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); animation: sr-shine 2.4s .8s ease-out 1 forwards; } .sr-lujo .hero-image-container { outline: 1px solid var(--line-strong); outline-offset: 8px; } .sr .hero-image-container img { width: 100%; animation: sr-zoom 1.6s cubic-bezier(.16,1,.3,1) both; } /* Botones de la portada: barra flotante tipo "cristal" */ .sr .action-cta-box { position: relative; z-index: 3; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: -34px auto 40px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); } .sr .btn-modern-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .01em; text-decoration: none !important; box-shadow: none; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .sr .btn-modern-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(0,0,0,.45); filter: saturate(1.1); } .sr .btn-modern-cta.wa { background: #25D366; color: #fff; } .sr .btn-modern-cta.wa::before { /* pulso de atención */ content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: sr-pulse 2.4s infinite; } .sr .btn-modern-cta.ig { background: linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); color: #fff; } .sr .btn-modern-cta.tiktok { background: #0b0b0b !important; color: #fff !important; } .sr-lujo .btn-modern-cta.tiktok { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } @media (max-width: 767px) { .sr .hero-banner-wrap { padding-top: 18px; } .sr .action-cta-box { margin: 18px auto 30px; border-radius: 24px; display: flex; flex-direction: column; } .sr .btn-modern-cta { justify-content: center; } } /* ---------- 6. Video ---------- */ .sr .video-box-modern { position: relative; background: #000; border-radius: var(--radius); overflow: visible; margin-bottom: 90px; box-shadow: var(--shadow-lg); } .sr .video-box-modern::before { /* marco degradado */ content: ""; position: absolute; inset: -2px; border-radius: calc(var(--radius) + 2px); background: var(--grad); z-index: -1; opacity: .9; } .sr .video-box-modern::after { /* halo */ content: ""; position: absolute; inset: 10% 8% -8%; z-index: -2; background: var(--grad); filter: blur(60px); opacity: .35; border-radius: 50%; } .sr .video-box-modern video { display: block; border-radius: var(--radius); } /* ---------- 7. Encabezado de sección ---------- */ .sr .section-header-wrap { text-align: center; margin: 0 auto 50px; max-width: 820px; } .sr .section-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--grad-soft); color: var(--brand); border: 1px solid var(--line-strong); font-weight: 700; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; margin-bottom: 14px; } .sr .section-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px var(--grad-soft); } .sr h1.grisazuloso { background: none !important; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12; margin: 0; padding: 0; text-transform: none; color: var(--ink) !important; } .sr-clinico h1.grisazuloso { background: linear-gradient(120deg, #0a2a4a 0%, #1560bd 55%, #0c8c9d 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; } .sr-lujo h1.grisazuloso { font-size: clamp(30px, 4.2vw, 54px); text-transform: uppercase; letter-spacing: .04em; background: var(--grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; } .sr .section-header-wrap::after { content: ""; display: block; width: 72px; height: 3px; margin: 22px auto 0; border-radius: 3px; background: var(--grad); } .sr-lujo .section-header-wrap::after { width: 120px; height: 1px; } /* ---------- 8. Tarjetas de servicios ---------- */ .sr .sr-grid { display: flex; flex-wrap: wrap; counter-reset: sr-card; } .sr .sr-grid::before, .sr .sr-grid::after { display: none; } .sr .modern-service-col { margin-bottom: 30px; display: flex; float: none; } .sr .sr-grid .thumbnail { counter-increment: sr-card; position: relative; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; margin: 0; overflow: hidden; min-height: 0; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .3s ease; } .sr .sr-grid .thumbnail::before { /* número de tarjeta (decorativo) */ content: counter(sr-card, decimal-leading-zero); position: absolute; top: 14px; left: 14px; z-index: 3; font: 700 12px/1 var(--font-body); letter-spacing: .1em; color: #fff; padding: 7px 10px; border-radius: 999px; background: rgba(10, 20, 35, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); } .sr-lujo .sr-grid .thumbnail::before { color: #1a1206; background: var(--grad); border: 0; } .sr .sr-grid .thumbnail > a { display: block; overflow: hidden; position: relative; } .sr .sr-grid .thumbnail > a::after { /* velo sobre la foto */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 20, 38, .35)); opacity: .8; transition: opacity .4s ease; } .sr .sr-grid .thumbnail img { width: 100%; height: 220px; object-fit: cover; border: 0; transition: transform .9s cubic-bezier(.16,1,.3,1); } .sr .sr-grid .thumbnail .caption { padding: 24px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; } .sr .sr-grid .thumbnail .caption h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; line-height: 1.25; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sr-lujo .sr-grid .thumbnail .caption h2 { font-size: 25px; font-weight: 600; letter-spacing: .01em; } .sr .sr-grid .thumbnail .caption h2 a { color: var(--ink); text-decoration: none; } .sr .sr-grid .thumbnail .caption h2 a::after { /* toda la tarjeta es clicable */ content: ""; position: absolute; inset: 0; z-index: 2; } .sr .sr-grid .thumbnail .caption h2::after { /* flecha */ content: "\2192"; flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 17px/1 var(--font-body); color: var(--brand); background: var(--grad-soft); border: 1px solid var(--line-strong); transition: transform .35s ease, background .35s ease, color .35s ease; } .sr .sr-grid .thumbnail .caption p { font-size: 14.5px; line-height: 1.7; color: var(--muted); text-align: left; margin: 0; } .sr .sr-grid .thumbnail:hover, .sr .sr-grid .thumbnail:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .sr .sr-grid .thumbnail:hover img { transform: scale(1.07); } .sr .sr-grid .thumbnail:hover > a::after { opacity: .35; } .sr .sr-grid .thumbnail:hover .caption h2::after { transform: translateX(3px) rotate(-45deg); background: var(--grad); color: #fff; border-color: transparent; } .sr-lujo .sr-grid .thumbnail:hover .caption h2::after { color: #1a1206; } .sr .sr-grid .thumbnail:hover .caption h2 a { color: var(--brand); } .sr-lujo .sr-grid .thumbnail { background: linear-gradient(180deg, var(--surface-2), var(--surface)); } /* ---------- 9. Director médico ---------- */ .sr .director-card-section { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); padding: 54px 48px; margin: 70px 0 30px; box-shadow: var(--shadow); } .sr .director-card-section::before { /* franja de color */ content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; background: var(--grad); opacity: .1; } .sr-lujo .director-card-section { background: linear-gradient(135deg, #161f2b, #0f151e); } .sr-lujo .director-card-section::before { opacity: .07; } .sr .display-flex { display: flex; flex-wrap: wrap; } .sr .display-flex::before, .sr .display-flex::after { display: none; } .sr .dr-portrait { position: relative; border-radius: 50%; border: 0; max-width: 240px; box-shadow: 0 0 0 8px var(--surface), 0 0 0 10px var(--brand), var(--shadow-lg); } .sr-lujo .dr-portrait { box-shadow: 0 0 0 6px #141c27, 0 0 0 7px var(--brand), 0 0 0 16px rgba(201,164,92,.08), var(--shadow-lg); } .sr .director-card-section h3 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px) !important; font-weight: var(--display-weight) !important; letter-spacing: var(--display-tracking); color: var(--ink) !important; margin-top: 6px !important; } .sr-lujo .director-card-section h3 { font-size: clamp(32px, 3.4vw, 44px) !important; } .sr .director-card-section hr { border-top: 1px solid var(--line-strong); width: 90px; margin-left: 0 !important; } .sr .dr-credentials { font-style: normal; color: var(--ink-soft); font-size: 15px; line-height: 2 !important; margin: 0; } .sr .dr-credentials strong { color: var(--ink); font-weight: 700; font-size: 14.5px; } .sr-lujo .dr-credentials strong { color: var(--brand-2); font-weight: 600; } .sr .dr-credentials a { color: var(--brand) !important; font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--line-strong); } .sr .dr-credentials a:hover { border-bottom-style: solid; } @media (max-width: 991px) { .sr .director-card-section { padding: 36px 22px; text-align: left; } .sr .director-card-section::before { width: 100%; height: 170px; bottom: auto; } .sr .display-flex > [class*="col-"] { width: 100%; } .sr .dr-portrait { margin-bottom: 26px; max-width: 190px; } } /* ---------- 10. Pie de página ---------- */ .sr .modern-footer { position: relative; background: var(--footer-bg); color: var(--footer-ink); padding: 70px 0 40px; margin-top: 80px; font-size: 14.5px; } .sr .modern-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); } .sr-lujo .modern-footer::before { height: 1px; } .sr .modern-footer h4 { font-family: var(--font-display); color: #fff; font-weight: 700; margin: 0 0 18px; font-size: 18px; } .sr-lujo .modern-footer h4 { font-size: 24px; font-weight: 600; color: var(--brand-2); } .sr .modern-footer p { line-height: 1.9; } .sr .modern-footer a { color: #e3ecf5; text-decoration: none; border-bottom: 1px solid transparent; } .sr .modern-footer a:hover { color: var(--accent); border-bottom-color: currentColor; } .sr .modern-footer .col-md-4 { margin-bottom: 26px; } /* ---------- 11. WhatsApp flotante ---------- */ .sr .floating-wa { position: fixed; z-index: 99999; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none !important; transition: transform .3s ease; bottom: 24px; right: 24px; width: 62px; height: 62px; font-size: 32px; box-shadow: 0 12px 30px -6px rgba(37,211,102,.55); } .sr .floating-wa:hover { transform: scale(1.08); color: #fff; } .sr .floating-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.55); animation: sr-pulse 2.6s infinite; } /* ---------- 12. Aparición al hacer scroll ---------- */ .sr-js .sr-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); } .sr-js .sr-reveal.is-in { opacity: 1; transform: none; } /* ---------- 13. Animaciones ---------- */ @keyframes sr-zoom { from { transform: scale(1.08); opacity: .4; } to { transform: scale(1); opacity: 1; } } @keyframes sr-shine { to { transform: translateX(120%); } } @keyframes sr-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } @media (prefers-reduced-motion: reduce) { .sr *, .sr *::before, .sr *::after { animation: none !important; transition: none !important; } .sr-js .sr-reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ---------- 14. Banner y video al mismo ancho que el resto ---------- */ @media (min-width: 992px) { .sr .hero-banner-wrap .col-md-10.col-md-offset-1, .sr .col-md-10.col-md-offset-1:has(> .video-box-modern) { width: 100%; margin-left: 0; } } /* ========================================================= 15. PÁGINAS INTERNAS () Misma estética de la portada V1 sobre la estructura interna ========================================================= */ .sr-page { font-family: var(--font-body); } .sr-page > .container-fluid { padding-left: 15px; padding-right: 15px; } /* Ancho: todo alineado al mismo ancho de la portada (1170px) */ .sr-page .container-fluid > .row:not(.sr-navrow):not(.sr-footer) { max-width: 1170px; margin-left: auto; margin-right: auto; } /* Menú fijo arriba a todo el ancho */ .sr-page .sr-navrow { position: sticky; top: 0; z-index: 9999; margin-left: -15px; margin-right: -15px; } .sr-page .sr-navrow > .col-md-12 { padding: 0; } .sr-page .sr-navrow .navbar-default { position: relative; } .sr-page .navbar-default > .container-fluid { max-width: 1170px; margin: 0 auto; } .sr-page .navbar-default .navbar-brand { font-size: 16px; } /* Portada interna: banner + botones en cápsula */ .sr-page .header-section { background: none; box-shadow: none; padding: 44px 0 10px; } .sr-page .brand-hero { max-width: none; position: relative; border-radius: calc(var(--radius) + 8px); overflow: hidden; box-shadow: var(--shadow-lg); isolation: isolate; } .sr-page .brand-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); animation: sr-shine 2.4s .8s ease-out 1 forwards; } .sr-page .brand-hero img { width: 100%; border-radius: 0; box-shadow: none; animation: sr-zoom 1.6s cubic-bezier(.16,1,.3,1) both; } .sr-page .social-action-bar, .sr-page .header-section .brand-hero + .row { position: relative; z-index: 3; display: inline-block; margin: -34px auto 30px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); } .sr-page .header-section .brand-hero + .row > .col-md-12 { padding: 0; width: auto; float: none; } .sr-page .call-to-action-text { display: inline-block; vertical-align: middle; margin: 0 14px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } .sr-page .action-buttons { display: inline-flex; vertical-align: middle; gap: 10px; flex-wrap: wrap; justify-content: center; } .sr-page .social-btn { min-width: 0; padding: 12px 24px; border: 0; border-radius: 999px; box-shadow: none; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .sr-page .social-btn img { width: 22px; margin-right: 9px; border-radius: 6px; } .sr-page .social-btn span { font-weight: 700; font-size: 15px; color: #fff !important; } .sr-page .insta-btn { background: linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); } .sr-page .whats-btn { background: #25D366; } .sr-page .whats-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: sr-pulse 2.4s infinite; } .sr-page .social-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(0,0,0,.45); border: 0; } .sr-page .social-btn:hover span { color: #fff !important; } @media (max-width: 767px) { .sr-page .header-section { padding-top: 18px; } .sr-page .social-action-bar, .sr-page .header-section .brand-hero + .row { display: block; margin: 18px 0 26px; border-radius: 24px; } .sr-page .call-to-action-text { display: block; margin: 4px 0 12px; } .sr-page .action-buttons { display: flex; flex-direction: column; } .sr-page .social-btn { justify-content: center; } } /* Títulos de la página */ .sr-page .grisazuloso { background: none; box-shadow: none; padding: 0; border-radius: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; text-align: left; margin: 44px 0 18px; line-height: 1.2; background-image: linear-gradient(120deg, #0a2a4a 0%, #1560bd 55%, #0c8c9d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ink); } .sr-page h1.grisazuloso { text-align: center; font-size: clamp(28px, 3.4vw, 42px); margin: 36px 0 34px; } .sr-page h1.grisazuloso::after, .sr-page .sr-director-title .grisazuloso::after { content: ""; display: block; width: 72px; height: 3px; margin: 20px auto 0; border-radius: 3px; background: var(--grad); } .sr-page h2.grisazuloso { font-size: clamp(24px, 2.6vw, 32px); } /* Cuerpo del artículo: tipografía de lectura */ .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] { color: var(--ink-soft); font-size: 16.5px; line-height: 1.8; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] h2:not(.grisazuloso), .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] h3, .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] h4 { font-family: var(--font-display); color: var(--ink); font-weight: 800; letter-spacing: -.01em; line-height: 1.3; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] h2:not(.grisazuloso) { font-size: 26px; margin: 34px 0 14px; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] h3 { font-size: 21px; margin: 30px 0 12px; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] h4 { font-size: 18px; margin: 26px 0 10px; } .sr-page .subtitulo-azul, .sr-page .subtitulo-seo, .sr-page .faq-section h4 { color: var(--brand) !important; font-weight: 800 !important; border-bottom: 0 !important; padding-left: 16px !important; position: relative; } .sr-page .subtitulo-azul::before, .sr-page .subtitulo-seo::before, .sr-page .faq-section h4::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: var(--grad); } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] strong { color: var(--ink); } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] ul:not(.list-unstyled):not(.lista-cv) { list-style: none; padding-left: 0; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] ul:not(.list-unstyled):not(.lista-cv) > li { position: relative; padding-left: 30px; margin-bottom: 10px; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] ul:not(.list-unstyled):not(.lista-cv) > li::before { content: "\2713"; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--grad); } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] ol { padding-left: 0; list-style: none; counter-reset: sr-ol; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] ol > li { counter-increment: sr-ol; position: relative; padding: 14px 16px 14px 58px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] ol > li::before { content: counter(sr-ol); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--grad); } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] hr { border: 0; height: 1px; margin: 44px 0; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] a:not(.footer-tel):not(.social-btn) { color: var(--brand); font-weight: 600; border-bottom: 1px dashed var(--line-strong); } .sr-page .referencia-bibliografica { background: var(--surface-2); border-left: 4px solid var(--brand-2) !important; border-radius: 0 12px 12px 0; padding: 12px 18px !important; margin: 18px 0 !important; font-size: 13.5px; color: var(--muted); } .sr-page .referencia-bibliografica p { margin: 4px 0; } .sr-page .philosophie-box { background: var(--surface) !important; border: 1px solid var(--line); border-left: 4px solid var(--brand) !important; border-radius: 16px !important; box-shadow: var(--shadow-sm); padding: 24px !important; } .sr-page .philosophie-box h3 { color: var(--brand) !important; } .sr-page .lista-cv li { border-left: 2px solid var(--line-strong) !important; } .sr-page .price-tag, .sr-page .destacado-precio { color: var(--brand-2) !important; } /* Imagen principal del artículo */ .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] .thumbnail { padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); margin: 0 0 34px; background: none; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] .thumbnail img { width: 100%; border-radius: 0; } /* Mapa y bloques embebidos (contacto) */ .sr-page .embed-responsive { border: 0 !important; border-radius: var(--radius); box-shadow: var(--shadow-lg) !important; } /* Director: tarjeta igual a la portada */ .sr-page .sr-director-title .grisazuloso { text-align: center; margin-top: 70px; } .sr-page .sr-director { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); box-shadow: var(--shadow); padding: 48px 30px; margin-top: 10px; margin-bottom: 30px; background: linear-gradient(90deg, rgba(21,96,189,.08) 0 33.333%, var(--surface) 33.333%); } .sr-page .sr-director::before, .sr-page .sr-director::after { display: none; } .sr-page .sr-director > .col-md-2 { width: 33.333%; margin-left: 0; text-align: center; position: relative; } .sr-page .sr-director > .col-md-6 { width: 66.666%; position: relative; } .sr-page .sr-director img.img-circle { position: relative; z-index: 1; display: inline-block; max-width: 220px; height: auto; box-shadow: 0 0 0 8px var(--surface), 0 0 0 10px var(--brand), var(--shadow-lg); } .sr-page .sr-director h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(26px, 3vw, 34px); color: var(--ink); margin: 0 0 14px; } .sr-page .sr-director address { font-style: normal; color: var(--ink-soft); font-size: 15px; line-height: 1.85; margin: 0; } .sr-page .sr-director address strong { color: var(--ink); } .sr-page .sr-director address a { color: var(--brand) !important; font-weight: 700; } .sr-page .sr-director address img { width: 34px; height: auto; vertical-align: middle; border-radius: 8px; margin: 6px 4px 6px 0; } @media (max-width: 991px) { .sr-page .sr-director { padding: 30px 18px; } .sr-page .sr-director > .col-md-2, .sr-page .sr-director > .col-md-6 { width: 100%; } .sr-page .sr-director > .col-md-2 { margin-bottom: 24px; } .sr-page .sr-director { background: linear-gradient(180deg, rgba(21,96,189,.08) 0 190px, var(--surface) 190px); } .sr-page .sr-director img.img-circle { max-width: 180px; } } /* Pie de página a todo el ancho, igual al de la portada */ .sr-page .sr-footer { position: relative; background: var(--footer-bg); color: var(--footer-ink); margin: 80px -15px 0; padding: 60px 0 36px; font-size: 14.5px; line-height: 1.9; } body.sr-page > .sr-footer { margin-left: 0; margin-right: 0; } .sr-page .sr-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); } .sr-page .sr-footer .grisazuloso2 { float: none; width: auto; max-width: 1170px; margin: 0 auto !important; padding: 0 !important; background: none; border-radius: 0; color: var(--footer-ink); font-size: 14.5px; display: flex; flex-wrap: wrap; } .sr-page .sr-footer .grisazuloso2 > .col-md-4 { margin-bottom: 20px; } .sr-page .sr-footer a { color: #e3ecf5 !important; text-decoration: none; } .sr-page .sr-footer a:hover { color: var(--accent) !important; } @media (max-width: 991px) { .sr-page .sr-footer .grisazuloso2 > .col-md-4 { width: 100%; } } /* WhatsApp flotante de las internas */ .sr-page .whatsapp-float { width: 62px !important; height: 62px !important; bottom: 24px !important; right: 24px !important; z-index: 99999 !important; box-shadow: 0 12px 30px -6px rgba(37,211,102,.55) !important; transition: transform .3s ease; } .sr-page .whatsapp-float:hover { transform: scale(1.08); } .sr-page .whatsapp-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: sr-pulse 2.6s infinite; } .sr-page .whatsapp-float img { width: 34px !important; height: 34px !important; } /* Ajustes de lectura */ .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] :is(h1,h2,h3,h4,h5) { text-align: left; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] h1.grisazuloso { text-align: center; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] .thumbnail img { height: auto !important; object-fit: contain; max-height: none; } @media (max-width: 767px) { .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"], .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] * { text-align: left !important; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] h1.grisazuloso { text-align: center !important; } .sr-page .container-fluid > .row:not(.sr-footer) [class*="col-md-8"] { font-size: 16px; } } .sr-page .sr-director-title .grisazuloso { text-align: center !important; } /* Imagen principal de las páginas internas: altura completa, sin recorte */ .sr-page .texto-justificado > .thumbnail { height: auto; padding: 0; border: 0; background: none; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); margin: 0 0 34px; } .sr-page .texto-justificado > .thumbnail img { width: 100%; height: auto !important; max-height: none; object-fit: contain; border-radius: 0; } .sr-page .texto-justificado > .thumbnail:hover { transform: none; } .sr-page .texto-justificado > .thumbnail:hover img { transform: none; }