Preview de mixed.css
/* MIXED CSS PACK */
/* Template: megabrokerconsultores.com.ar/index.html */
/* Template mtime: 2026-04-09 19:34:59 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ============================================================
TOKENS
============================================================ */
:root {
--accent: #1544d2;
--accent-2: #fed644;
--accent-dk: #0f34a8;
--accent-lt: #e8eeff;
--bg: #ffffff;
--surface: #f6f7fb;
--surface-2: #edf0fc;
--text: #0d0f14;
--muted: #5a6278;
--muted-lt: #8f96a8;
--line: #e4e8f2;
--shadow-sm: 0 2px 12px rgba(14,20,52,.06);
--shadow: 0 12px 48px rgba(14,20,52,.09);
--shadow-lg: 0 28px 80px rgba(14,20,52,.13);
--radius: 20px;
--radius-lg: 28px;
--radius-xl: 36px;
--nav-h: 80px;
--font-head: 'Sora', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
}
/* ============================================================
RESET / BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }
p { margin: 0; }
/* ============================================================
LAYOUT
============================================================ */
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px,4vw,40px); }
.section { padding: 112px 0; }
.section-alt { background: var(--surface); }
/* ============================================================
EYEBROW / LABELS
============================================================ */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
border-radius: 999px;
background: var(--surface-2);
color: var(--accent);
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.eyebrow::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.display-title {
font-family: var(--font-head);
font-size: clamp(2.8rem, 5.5vw, 5.5rem);
line-height: 1;
letter-spacing: -.01em;
margin: 0;
}
.section-title {
font-family: var(--font-head);
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.08;
letter-spacing: -.01em;
margin: 0;
}
.section-sub {
font-size: 1.05rem;
line-height: 1.85;
color: var(--muted);
max-width: 680px;
}
.lead-text {
font-size: 1.1rem;
line-height: 1.85;
color: var(--muted);
}
/* ============================================================
BUTTONS
============================================================ */
.btn-prime {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--accent);
color: #fff !important;
border: none;
border-radius: 999px;
font-family: var(--font-body);
font-size: .96rem;
font-weight: 700;
cursor: pointer;
transition: transform .2s, box-shadow .2s, background .2s;
box-shadow: 0 8px 28px rgba(21,68,210,.28);
white-space: nowrap;
}
.btn-prime:hover {
transform: translateY(-2px);
background: var(--accent-dk);
box-shadow: 0 16px 40px rgba(21,68,210,.36);
}
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: transparent;
color: var(--accent) !important;
border: 1.5px solid rgba(21,68,210,.3);
border-radius: 999px;
font-family: var(--font-body);
font-size: .96rem;
font-weight: 700;
cursor: pointer;
transition: transform .2s, background .2s, border-color .2s;
white-space: nowrap;
}
.btn-ghost:hover {
transform: translateY(-2px);
background: var(--surface-2);
border-color: rgba(21,68,210,.55);
}
/* ============================================================
NAVBAR
============================================================ */
.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--nav-h);
background: rgba(255,255,255,.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(20,30,80,.07);
transition: box-shadow .3s;
}
.site-nav.scrolled {
box-shadow: 0 4px 32px rgba(14,20,52,.08);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-h);
}
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
color: var(--text);
font-weight: 800;
font-size: .92rem;
letter-spacing: -.01em;
flex-shrink: 0;
}
.nav-brand img {
height: 38px;
width: auto;
}
.nav-links {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0; padding: 0;
}
.nav-links a {
display: block;
padding: 8px 13px;
font-size: .86rem;
font-weight: 600;
color: #2a2e3f;
border-radius: 10px;
transition: color .15s, background .15s;
}
.nav-links a:hover {
color: var(--accent);
background: var(--surface-2);
}
.nav-cta {
margin-left: 10px;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 8px;
border: none;
background: transparent;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform .25s, opacity .25s;
}
.nav-mobile {
display: none;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 16px;
margin-top: 12px;
box-shadow: var(--shadow-lg);
}
.nav-mobile.open { display: block; }
.nav-mobile a {
display: block;
padding: 11px 16px;
border-radius: 12px;
font-weight: 600;
font-size: .95rem;
color: var(--text);
transition: background .15s, color .15s;
}
.nav-mobile a:hover {
background: var(--surface-2);
color: var(--accent);
}
/* ============================================================
HERO
============================================================ */
.hero {
padding-top: calc(var(--nav-h) + 68px);
padding-bottom: 96px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 78% 14%, rgba(21,68,210,.12), transparent 26%),
radial-gradient(circle at 10% 88%, rgba(21,68,210,.08), transparent 30%),
radial-gradient(circle at 62% 82%, rgba(254,214,68,.13), transparent 22%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(21,68,210,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(21,68,210,.035) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
mask-image: radial-gradient(ellipse 82% 74% at 50% 12%, black 30%, transparent 85%);
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
gap: clamp(38px, 4vw, 68px);
align-items: center;
}
.hero-copy {
min-width: 0;
max-width: 720px;
}
.hero-kicker {
margin-bottom: 18px;
}
.hero-title {
font-family: var(--font-head);
font-size: clamp(2.7rem, 3.9vw, 4.3rem);
line-height: .96;
letter-spacing: -.05em;
font-weight: 800;
max-width: 13.6ch;
margin: 0 0 20px;
color: #090c14;
text-wrap: balance;
}
.hero-title em {
font-style: normal;
color: var(--accent);
position: relative;
display: inline-block;
z-index: 1;
}
.hero-title em::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: .12em;
height: .18em;
border-radius: 999px;
background: rgba(254,214,68,.9);
z-index: -1;
}
.hero-body {
font-size: 1.04rem;
line-height: 1.82;
color: var(--muted);
max-width: 610px;
margin-bottom: 26px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 26px;
}
.hero-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 15px;
border-radius: 999px;
background: rgba(255,255,255,.9);
border: 1px solid rgba(21,68,210,.13);
font-size: .87rem;
font-weight: 700;
color: var(--text);
box-shadow: var(--shadow-sm);
transition: border-color .15s, transform .15s, box-shadow .15s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-pill:hover {
border-color: rgba(21,68,210,.35);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(14,20,52,.08);
}
.hero-pill svg {
color: var(--accent);
flex-shrink: 0;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 640px;
}
.hero-stat {
background: rgba(255,255,255,.92);
border: 1px solid rgba(21,68,210,.12);
border-radius: 22px;
padding: 20px 18px;
box-shadow: var(--shadow-sm);
transition: transform .2s, box-shadow .2s;
}
.hero-stat:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.hero-stat strong {
display: block;
font-family: var(--font-head);
font-size: 1.45rem;
color: var(--accent);
line-height: 1;
margin-bottom: 7px;
letter-spacing: -.04em;
}
.hero-stat span {
font-size: .87rem;
color: var(--muted);
line-height: 1.55;
}
.hero-visual {
position: relative;
width: 100%;
max-width: 620px;
margin-left: auto;
}
.hero-card {
position: relative;
overflow: hidden;
min-height: 440px;
padding: 18px;
border-radius: 32px;
border: 1px solid rgba(21,68,210,.10);
background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(241,245,255,.96) 100%);
box-shadow: 0 22px 54px rgba(14,20,52,.12);
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.hero-card::before {
content: '';
position: absolute;
inset: 12px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,.92);
pointer-events: none;
}
.hero-card::after {
content: '';
position: absolute;
width: 240px;
height: 240px;
right: -42px;
bottom: -48px;
border-radius: 50%;
background: radial-gradient(circle, rgba(254,214,68,.18), transparent 72%);
pointer-events: none;
z-index: -1;
}
.hero-logo-stage {
position: relative;
width: 100%;
max-width: none;
min-height: 400px;
border-radius: 26px;
display: flex;
align-items: center;
justify-content: center;
padding: 26px;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 58%, rgba(245,247,255,.82) 78%, transparent 100%),
linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,249,255,.92));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.96),
0 16px 40px rgba(21,68,210,.06);
}
.hero-logo-stage::before {
content: '';
position: absolute;
inset: 12px;
border-radius: 20px;
border: 1px solid rgba(21,68,210,.08);
pointer-events: none;
}
.hero-logo-stage::after {
content: '';
position: absolute;
width: 70%;
height: 70%;
border-radius: 50%;
border: 1px dashed rgba(21,68,210,.10);
opacity: .7;
pointer-events: none;
}
.hero-logo-wrap {
position: relative;
width: 100%;
height: 100%;
display: grid;
place-items: center;
z-index: 1;
}
.hero-logo {
display: block;
width: min(100%, 520px);
max-width: 100%;
max-height: 290px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 16px 28px rgba(21,68,210,.12));
}
.hero-mini-card {
display: none;
position: absolute;
left: 18px;
bottom: 18px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(21,68,210,.10);
border-radius: 18px;
padding: 14px 16px;
box-shadow: 0 16px 34px rgba(14,20,52,.11);
max-width: 220px;
}
.hero-mini-card strong {
display: block;
font-size: .94rem;
font-weight: 800;
line-height: 1.35;
margin-bottom: 3px;
color: #11141d;
}
.hero-mini-card span {
display: block;
font-size: .83rem;
line-height: 1.55;
color: var(--muted);
}
.hero-badge {
display: none;
position: absolute;
top: 26px;
left: -18px;
background: var(--accent-2);
color: #11141d;
border-radius: 16px;
padding: 12px 18px;
font-size: .9rem;
font-weight: 800;
box-shadow: 0 12px 26px rgba(0,0,0,.12);
z-index: 3;
animation: floatBadge 3s ease-in-out infinite;
}
@keyframes floatBadge {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.hero-badge-2 {
display: none;
position: absolute;
right: -18px;
bottom: 44px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(21,68,210,.10);
border-radius: 18px;
padding: 14px 18px;
box-shadow: 0 18px 40px rgba(14,20,52,.12);
z-index: 3;
animation: floatBadge 3.6s ease-in-out .4s infinite;
}
.hero-badge-2 strong {
display: block;
color: #0d0f14;
font-size: .96rem;
line-height: 1.3;
margin-bottom: 2px;
}
.hero-badge-2 span {
display: block;
color: var(--muted);
font-weight: 600;
font-size: .79rem;
}
.hero-svg { width: 100%; height: auto; position: relative; z-index: 1; }
/* ============================================================
QUIÉNES SOMOS
============================================================ */
.about-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 40px;
align-items: center;
}
.about-copy { }
.about-copy .section-title {
margin: 16px 0 20px;
}
.about-copy .lead-text {
margin-bottom: 24px;
}
.highlight-box {
background: linear-gradient(135deg, var(--surface-2) 0%, #fff 100%);
border: 1px solid rgba(21,68,210,.14);
border-left: 4px solid var(--accent);
border-radius: 0 16px 16px 0;
padding: 20px 24px;
margin: 24px 0;
color: #1a2444;
font-weight: 500;
line-height: 1.8;
font-size: 1rem;
}
.feature-list {
list-style: none;
padding: 0; margin: 0 0 28px;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: .97rem;
font-weight: 500;
color: #1e2336;
line-height: 1.6;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before {
content: '';
flex-shrink: 0;
margin-top: 6px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(21,68,210,.15);
}
.about-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.commitment-card {
background: var(--accent);
color: #fff;
border-radius: var(--radius-xl);
padding: 40px 36px;
position: relative;
overflow: hidden;
height: 100%;
}
.commitment-card::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.08);
}
.commitment-card::after {
content: '';
position: absolute;
bottom: -80px; left: -40px;
width: 200px; height: 200px;
border-radius: 50%;
background: rgba(254,214,68,.12);
}
.commitment-card .eyebrow {
background: rgba(255,255,255,.18);
color: rgba(255,255,255,.95);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.commitment-card .eyebrow::before {
background: rgba(255,255,255,.8);
}
.commitment-card h3 {
font-family: var(--font-head);
font-size: clamp(1.6rem, 2.5vw, 2.1rem);
line-height: 1.1;
margin: 0 0 18px;
position: relative;
z-index: 1;
}
.commitment-card p {
color: rgba(255,255,255,.82);
line-height: 1.8;
font-size: .97rem;
position: relative;
z-index: 1;
margin-bottom: 28px;
}
.commitment-card .motto {
display: inline-block;
background: var(--accent-2);
color: #0d0f14;
border-radius: 999px;
padding: 10px 20px;
font-weight: 800;
font-size: .9rem;
position: relative;
z-index: 1;
letter-spacing: .02em;
}
/* ============================================================
SERVICIOS
============================================================ */
.services-header {
margin-bottom: 48px;
}
.services-header .section-title {
margin: 16px 0 16px;
}
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.service-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: transform .25s, box-shadow .25s, border-color .25s;
cursor: default;
}
.service-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--surface-2), #fff);
opacity: 0;
transition: opacity .25s;
border-radius: inherit;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(21,68,210,.2);
}
.service-card:hover::before { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }
.service-number {
font-family: var(--font-head);
font-size: 3.5rem;
color: rgba(21,68,210,.07);
line-height: 1;
position: absolute;
top: 16px; right: 20px;
font-style: italic;
z-index: 0;
transition: color .25s;
}
.service-card:hover .service-number {
color: rgba(21,68,210,.12);
}
.icon-ring {
width: 56px; height: 56px;
border-radius: 16px;
display: grid;
place-items: center;
background: var(--surface-2);
color: var(--accent);
border: 1px solid rgba(21,68,210,.14);
margin-bottom: 20px;
transition: background .25s, transform .25s;
}
.service-card:hover .icon-ring {
background: var(--accent);
color: #fff;
transform: scale(1.08) rotate(-4deg);
}
.service-card h3 {
font-family: var(--font-head);
font-size: 1.2rem;
margin: 0 0 10px;
line-height: 1.2;
}
.service-card p {
font-size: .93rem;
color: var(--muted);
line-height: 1.75;
}
/* ============================================================
SPLIT SECTIONS (retiro, proteccion, salud, vehiculos, formacion)
============================================================ */
.split {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 40px;
align-items: start;
}
.split-copy {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 44px 40px;
box-shadow: var(--shadow-sm);
}
.split-copy .eyebrow { margin-bottom: 20px; }
.split-copy h2 {
font-family: var(--font-head);
font-size: clamp(1.8rem, 3vw, 2.8rem);
line-height: 1.1;
margin-bottom: 20px;
}
.split-copy .lead-text {
margin-bottom: 16px;
}
.detail-list {
list-style: none;
padding: 0; margin: 20px 0 24px;
}
.detail-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: .95rem;
font-weight: 500;
color: #1e2336;
line-height: 1.6;
border-bottom: 1px solid var(--line);
}
.detail-list li:last-child { border-bottom: none; }
.detail-list li::before {
content: '';
flex-shrink: 0;
margin-top: 7px;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 0 3px rgba(254,214,68,.25);
}
.wide-note {
background: linear-gradient(135deg, var(--surface-2), #fff);
border: 1px solid rgba(21,68,210,.12);
border-radius: 16px;
padding: 20px 22px;
color: #1a2448;
font-weight: 600;
line-height: 1.75;
font-size: .96rem;
margin-top: 20px;
}
.split-media {
display: flex;
flex-direction: column;
gap: 20px;
}
.illustration-box {
border-radius: var(--radius-xl);
overflow: hidden;
background: linear-gradient(160deg, #fff 0%, #edf2ff 100%);
border: 1px solid rgba(21,68,210,.1);
min-height: 240px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.illustration-box svg { width: 100%; height: auto; }
.section-side-logo {
display: block;
width: min(100%, 360px);
max-width: 100%;
max-height: 190px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 14px 28px rgba(21,68,210,.14));
}
.mini-note {
background: var(--surface-2);
border: 1px solid rgba(21,68,210,.12);
border-radius: 16px;
padding: 18px 20px;
color: #1a2448;
font-weight: 600;
line-height: 1.75;
font-size: .93rem;
}
/* Form card */
.form-panel {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 32px 28px;
box-shadow: var(--shadow-sm);
}
.form-panel h3 {
font-family: var(--font-head);
font-size: 1.35rem;
margin: 0 0 6px;
}
.form-panel > p {
color: var(--muted);
font-size: .93rem;
margin-bottom: 20px;
line-height: 1.7;
}
.form-control, .form-select {
min-height: 50px;
border-radius: 12px;
border: 1.5px solid #dde2ef;
padding: 12px 16px;
font-family: var(--font-body);
font-size: .96rem;
box-shadow: none !important;
transition: border-color .2s, box-shadow .2s;
background: #fcfcfe;
}
textarea.form-control { min-height: 120px; resize: vertical; }
.form-control:focus, .form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(21,68,210,.1) !important;
background: #fff;
}
.form-control::placeholder { color: #aab0c4; }
/* ============================================================
POR QUÉ ELEGIRNOS
============================================================ */
.why-header { margin-bottom: 52px; }
.why-header .section-title { margin: 16px 0 16px; }
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.why-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: transform .25s, box-shadow .25s;
}
.why-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
/* Accent stripe on top */
.why-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.why-card:hover::before {
transform: scaleX(1);
}
.why-card .icon-ring {
margin-bottom: 18px;
}
.why-card h3 {
font-family: var(--font-head);
font-size: 1.15rem;
margin: 0 0 10px;
}
.why-card p {
font-size: .92rem;
color: var(--muted);
line-height: 1.75;
margin: 0;
}
/* ============================================================
GALLERY (kept original, minor wrapper polish)
============================================================ */
.gal-gallery .carousel { max-width: 980px; margin-inline: auto; position: relative; }
.gal-frame {
height: clamp(280px,58vh,520px);
background: #fff;
border-radius: 28px;
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.gal-img {
width: auto !important;
max-width: 100%;
height: auto !important;
max-height: 100%;
object-fit: contain !important;
object-position: center;
cursor: zoom-in;
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20;
width: 56px; height: 56px;
top: 50%; transform: translateY(-50%);
opacity: 1;
background: rgba(17,17,17,.62);
border-radius: 50%;
margin: 0 10px;
}
.gal-gallery .carousel-control-prev { left: 0; }
.gal-gallery .carousel-control-next { right: 0; }
.gal-gallery .gal-ctrl-icon { width: 2.8rem; height: 2.8rem; background-size: 58% 58%; }
.gal-gallery .carousel-indicators { z-index: 10; bottom: -56px; }
.gal-gallery .carousel-indicators button {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(17,17,17,.4);
border: none;
}
.gal-gallery .carousel-indicators button.active { background: var(--accent); }
.gal-gallery { padding-bottom: 64px; }
#galLightbox .modal-content { background: #000; border-radius: 24px; overflow: hidden; }
#galLightboxImg { max-height: 86vh; width: 100%; height: auto; object-fit: contain; background: #000; }
.gal-lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
border: 0; width: 48px; height: 48px; border-radius: 999px;
background: rgba(255,255,255,.18); color: #fff;
font-size: 32px; line-height: 48px; text-align: center;
z-index: 5; cursor: pointer;
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,.28); }
.gal-lightbox-nav.gal-prev { left: 12px; }
.gal-lightbox-nav.gal-next { right: 12px; }
/* ============================================================
FAQ
============================================================ */
.faq-header { margin-bottom: 48px; }
.faq-header .section-title { margin: 16px 0 16px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.faq-item.open {
border-color: rgba(21,68,210,.25);
box-shadow: var(--shadow);
}
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 24px;
cursor: pointer;
gap: 16px;
user-select: none;
}
.faq-q-text {
font-weight: 700;
font-size: 1.02rem;
color: var(--text);
line-height: 1.4;
flex: 1;
}
.faq-item.open .faq-q-text { color: var(--accent); }
.faq-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--line);
display: grid;
place-items: center;
transition: transform .3s, background .2s;
color: var(--muted);
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease, padding .35s;
padding: 0 24px;
color: var(--muted);
line-height: 1.85;
font-size: .97rem;
}
.faq-item.open .faq-a {
max-height: 400px;
padding: 0 24px 22px;
}
/* ============================================================
CONTACTO
============================================================ */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 36px;
align-items: start;
}
.contact-info {
background: var(--accent);
color: #fff;
border-radius: var(--radius-xl);
padding: 48px 40px;
position: relative;
overflow: hidden;
}
.contact-info::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 240px; height: 240px;
border-radius: 50%;
background: rgba(255,255,255,.07);
}
.contact-info::after {
content: '';
position: absolute;
bottom: -60px; left: -40px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(254,214,68,.1);
}
.contact-info .eyebrow {
background: rgba(255,255,255,.18);
color: #fff;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.contact-info .eyebrow::before { background: rgba(255,255,255,.8); }
.contact-info h2 {
font-family: var(--font-head);
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.1;
margin: 0 0 16px;
position: relative;
z-index: 1;
}
.contact-info .lead-text {
color: rgba(255,255,255,.8);
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.contact-items {
list-style: none;
padding: 0; margin: 0 0 32px;
position: relative;
z-index: 1;
}
.contact-items li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.12);
font-size: .97rem;
font-weight: 500;
}
.contact-items li:last-child { border-bottom: none; }
.contact-items a { color: rgba(255,255,255,.9); }
.contact-items a:hover { color: var(--accent-2); }
.contact-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(255,255,255,.15);
display: grid;
place-items: center;
flex-shrink: 0;
}
.contact-btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
position: relative;
z-index: 1;
}
.btn-wa {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 24px;
background: #25d366;
color: #fff !important;
border-radius: 999px;
font-weight: 700;
font-size: .9rem;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 8px 24px rgba(37,211,102,.28);
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37,211,102,.38); }
.btn-ghost-white {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 24px;
background: transparent;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,.4);
border-radius: 999px;
font-weight: 700;
font-size: .9rem;
transition: background .2s, border-color .2s;
}
.btn-ghost-white:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.7);
}
.contact-form-panel {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: 44px 36px;
box-shadow: var(--shadow);
}
.contact-form-panel h3 {
font-family: var(--font-head);
font-size: 1.6rem;
margin: 0 0 8px;
}
.contact-form-panel > p {
color: var(--muted);
font-size: .95rem;
margin-bottom: 24px;
line-height: 1.7;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: #0c1535;
color: rgba(255,255,255,.85);
padding: 80px 0 0;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
}
.site-footer::after {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(21,68,210,.15), transparent 70%);
pointer-events: none;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 40px;
padding-bottom: 56px;
position: relative;
z-index: 1;
}
.footer-brand-block { }
.footer-logo-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.footer-logo-row img { height: 38px; width: auto; }
.footer-logo-row span {
font-size: .88rem;
font-weight: 700;
color: rgba(255,255,255,.9);
line-height: 1.2;
}
.footer-brand-block p {
font-size: .92rem;
line-height: 1.8;
color: rgba(255,255,255,.55);
}
.footer-col h4 {
font-size: .82rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
margin: 0 0 18px;
}
.footer-links {
list-style: none;
padding: 0; margin: 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
color: rgba(255,255,255,.65);
font-size: .93rem;
transition: color .15s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.footer-links a::before {
content: '→';
font-size: .75rem;
color: rgba(254,214,68,.5);
transition: color .15s, transform .15s;
}
.footer-links a:hover { color: rgba(255,255,255,.95); }
.footer-links a:hover::before { color: var(--accent-2); transform: translateX(3px); }
.footer-contact-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: .92rem;
color: rgba(255,255,255,.65);
}
.footer-contact-item a { color: rgba(255,255,255,.7); }
.footer-contact-item a:hover { color: var(--accent-2); }
.footer-contact-icon {
width: 34px; height: 34px;
border-radius: 9px;
background: rgba(255,255,255,.08);
display: grid;
place-items: center;
flex-shrink: 0;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding: 22px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: .85rem;
color: rgba(255,255,255,.4);
position: relative;
z-index: 1;
}
.footer-bottom a {
color: rgba(255,255,255,.55);
transition: color .15s;
}
.footer-bottom a:hover { color: var(--accent-2); }
/* ============================================================
SECTION HERO DIVIDER
============================================================ */
.hero-divider {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 0;
background: var(--accent);
color: #fff;
overflow: hidden;
}
.hero-divider-item {
padding: 28px 24px;
text-align: center;
border-right: 1px solid rgba(255,255,255,.15);
transition: background .2s;
}
.hero-divider-item:last-child { border-right: none; }
.hero-divider-item:hover { background: rgba(255,255,255,.07); }
.hero-divider-item strong {
display: block;
font-family: var(--font-head);
font-size: 2rem;
line-height: 1;
margin-bottom: 6px;
}
.hero-divider-item span {
font-size: .84rem;
color: rgba(255,255,255,.75);
line-height: 1.4;
}
/* ============================================================
SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1099px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-copy { max-width: 100%; }
.hero-title { max-width: 13.4ch; }
.hero-visual { max-width: 100%; margin-left: 0; }
.hero-card { min-height: auto; }
.hero-logo-stage { max-width: 620px; margin-inline: auto; min-height: 380px; }
.hero-mini-card { left: 20px; bottom: 20px; }
.hero-badge, .hero-badge-2 { display: none; }
.about-grid { grid-template-columns: 1fr; }
.service-grid { grid-template-columns: repeat(2,1fr); }
.why-grid { grid-template-columns: repeat(2,1fr); }
.split { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-divider { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 767px) {
:root { --nav-h: 72px; }
.section { padding: 80px 0; }
.service-grid, .why-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.hero-stats { grid-template-columns: 1fr; gap: 12px; }
.hero-divider { grid-template-columns: repeat(2,1fr); }
.split-copy, .contact-info, .contact-form-panel { padding: 28px 22px; }
.commitment-card { padding: 30px 24px; }
.about-actions, .contact-btns { flex-direction: column; align-items: stretch; }
.btn-prime, .btn-ghost, .btn-wa, .btn-ghost-white { width: 100%; justify-content: center; }
.hero-actions {
flex-direction: column;
align-items: stretch;
order: 5;
margin-bottom: 0;
}
.footer-bottom { flex-direction: column; }
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: flex; }
.hero-inner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.hero-copy { display: contents; }
.hero-kicker { order: 1; }
.hero-title {
order: 2;
font-size: clamp(2.45rem, 10.8vw, 3.35rem);
max-width: 10.6ch;
margin-bottom: 18px;
}
.hero-body {
order: 3;
font-size: 1.02rem;
line-height: 1.8;
margin-bottom: 0;
}
.hero-visual {
order: 4;
max-width: 100%;
margin: 6px 0 4px;
}
.hero-card {
min-height: auto;
padding: 14px;
border-radius: 24px;
}
.hero-logo-stage {
max-width: 100%;
min-height: 0;
padding: 16px;
border-radius: 20px;
}
.hero-logo {
width: min(100%, 330px);
max-height: 220px;
}
.hero-pills {
order: 6;
margin-bottom: 0;
}
.hero-stats { order: 7; }
.hero-mini-card { display: none; }
.gal-frame { height: clamp(220px,42vh,360px); }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next { width: 48px; height: 48px; }
}
@media (min-width: 768px) {
.nav-mobile { display: none !important; }
}
@media (max-width: 479px) {
.hero-title { font-size: clamp(2.15rem, 10.6vw, 2.75rem); }
.hero-card { padding: 10px; }
.hero-logo-stage { max-width: 100%; border-radius: 18px; padding: 12px; }
.hero-logo {
width: min(100%, 260px);
max-height: 180px;
}
.hero-divider { grid-template-columns: 1fr 1fr; }
.hero-pill { font-size: .8rem; }
.section-side-logo {
width: min(100%, 240px);
max-height: 140px;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
.logos-ticker {
padding: 54px 0;
background: #edf2f7;
overflow: hidden;
}
.logos-ticker .wrap {
overflow: hidden;
}
.logos-ticker .ticker-shell {
padding: 16px 0;
border-radius: 24px;
border: 1px solid #d9e1eb;
background: linear-gradient(180deg, #f5f8fc 0%, #edf2f7 100%);
box-shadow: 0 14px 34px rgba(14,20,52,.06);
}
.logos-ticker .ticker {
position: relative;
overflow: hidden;
width: 100%;
}
.logos-ticker .ticker::before,
.logos-ticker .ticker::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: clamp(28px, 6vw, 90px);
z-index: 2;
pointer-events: none;
}
.logos-ticker .ticker::before {
left: 0;
background: linear-gradient(90deg, #edf2f7 0%, rgba(237,242,247,0) 100%);
}
.logos-ticker .ticker::after {
right: 0;
background: linear-gradient(270deg, #edf2f7 0%, rgba(237,242,247,0) 100%);
}
.logos-ticker .track {
--gap: 22px;
--speed: 30s;
display: flex;
align-items: center;
gap: var(--gap);
width: max-content;
animation: logos-scroll var(--speed) linear infinite;
will-change: transform;
}
.logos-ticker .ticker:hover .track {
animation-play-state: paused;
}
.logos-ticker .ticker-group {
display: flex;
align-items: center;
gap: var(--gap);
flex-shrink: 0;
min-width: max-content;
}
.logos-ticker .item {
flex: 0 0 auto;
min-width: clamp(150px, 18vw, 210px);
height: 82px;
display: flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 18px;
background: rgba(255,255,255,.9);
border: 1px solid rgba(21,68,210,.08);
box-shadow: 0 8px 18px rgba(14,20,52,.05);
}
.logos-ticker .item img {
max-width: 100%;
max-height: 42px;
width: auto;
height: auto;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
opacity: .98;
transition: transform .22s ease, opacity .22s ease;
}
.logos-ticker .item:hover img {
transform: translateY(-2px) scale(1.01);
opacity: 1;
}
@keyframes logos-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - (var(--gap) / 2))); }
}
@media (max-width: 767px) {
.logos-ticker {
padding: 42px 0;
}
.logos-ticker .ticker-shell {
border-radius: 20px;
padding: 12px 0;
}
.logos-ticker .track {
--gap: 16px;
--speed: 24s;
}
.logos-ticker .item {
min-width: 132px;
height: 70px;
padding: 12px 16px;
border-radius: 16px;
}
.logos-ticker .item img {
max-height: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
.logos-ticker .track {
animation: none;
}
}
/* ===== INLINE <style> BLOCK #3 ===== */
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:2147483647;
display:flex;
flex-direction:column;
align-items:flex-end;
font-family:inherit;
}
.wa-btn{
width:60px;
height:60px;
border-radius:50%;
border:none;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 10px 30px rgba(37,211,102,.45);
transition:transform .25s, box-shadow .25s;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(37,211,102,.55);
}
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:#fff;
border-radius:18px;
border:1px solid #e3e6ea;
box-shadow:0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
transform:translateY(10px);
opacity:0;
transition:.25s ease;
}
.wa-card[aria-modal="true"]{
transform:none;
opacity:1;
}
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;
}
.wa-avatar{
width:40px;
height:40px;
background:#fff;
border-radius:10px;
display:grid;
place-items:center;
overflow:hidden;
}
.wa-avatar img{
width:26px;
height:26px;
object-fit:contain;
}
.wa-title{
font-weight:800;
line-height:1.1;
}
.wa-status{
font-size:.85rem;
opacity:.9;
}
.wa-close{
margin-left:auto;
border:none;
background:transparent;
color:#fff;
font-size:24px;
cursor:pointer;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
opacity:.9;
}
.wa-close:hover{
opacity:1;
background:rgba(255,255,255,.14);
}
.wa-body{
padding:14px;
max-height:40vh;
overflow:auto;
background:#f8f9fa;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
background:#fff;
border:1px solid #e3e6ea;
align-self:flex-start;
}
.wa-user{
background:#eaf7f0;
border:1px solid #cfeedd;
align-self:flex-end;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid #e3e6ea;
background:#fff;
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid #e3e6ea;
font-family:inherit;
outline:none;
}
.wa-send{
background:#25D366;
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
}
.wa-send:hover{
background:#1fb85a;
}
@media(max-width:480px){
.wa-float{
right:12px;
bottom:12px;
}
.wa-card{
width:calc(100vw - 24px);
}
}