/* ============================================================ MERCURY FISH AGENCY — Premium Design System (light-first) Fondo claro que conecta · Navy #0A0E27 como acento de autoridad Acento: azul eléctrico #2E5BFF ============================================================ */ :root { --navy: #0A0E27; --navy-2: #0E1433; --blue: #2E5BFF; --blue-hover: #1E46E0; --blue-soft: rgba(46, 91, 255, 0.09); /* Acento de datos: los números no compiten con el azul de marca */ --amber: #FF9A1F; --amber-ink: #B45309; --amber-soft: rgba(255, 154, 31, 0.13); --white: #FFFFFF; --bg: #F1F4FB; --grey-100: #E9ECF3; --grey-400: #9AA3B8; --grey-600: #5A6378; --ink: #0A0E27; --font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --serif: 'Fraunces', Georgia, serif; --max-w: 1280px; --pad: clamp(1.25rem, 4vw, 3rem); --radius: 4px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; /* clip recorta sin crear contenedor de scroll: no rompe sticky */ } ::selection { background: var(--blue); color: var(--white); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } .container { max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } /* ---------- Typography ---------- */ h1, h2, h3 { font-weight: 800; letter-spacing: -0.022em; line-height: 1.05; } .display { font-size: clamp(2.75rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; } .hero .display, .hero-l .display { font-size: clamp(2rem, 6.6vw, 5rem); } .h-xl { font-size: clamp(2.25rem, 5.5vw, 4.25rem); } .h-lg { font-size: clamp(1.75rem, 4vw, 3rem); } .h-md { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; } .serif-accent { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; } .eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--blue); margin-bottom: 1.5rem; } .eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--blue); } .lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--grey-600); line-height: 1.65; } .body-txt { color: var(--grey-600); font-size: 1rem; } .accent { color: var(--blue); } /* ---------- Sections ---------- */ section { padding: clamp(5rem, 12vh, 9rem) 0; } /* Blancos con lavado azul sutil — nunca blanco plano */ .white { background: linear-gradient(165deg, #FFFFFF 0%, #F4F7FF 55%, #EBF0FE 100%); position: relative; } .tint { background: linear-gradient(165deg, #F1F4FB 0%, #E9EEFB 60%, #E3EAFB 100%); position: relative; } .dark { background: var(--navy); color: var(--white); } .dark .lead, .dark .body-txt { color: var(--grey-400); } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease); padding: 1.5rem 0; } .nav.scrolled { background: rgba(247, 248, 251, 0.9); backdrop-filter: blur(12px); padding: 0.9rem 0; box-shadow: 0 1px 0 rgba(10,14,39,0.07); } .nav-inner { display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; color: var(--ink); } .nav-logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); display: inline-block; } .footer .nav-logo { color: var(--white); } /* Logo: se normaliza a oscuro en el nav claro y a blanco en el footer navy */ .nav-logo img { height: 40px; width: auto; display: block; } .nav .nav-logo img { filter: brightness(0); opacity: 0.92; } .footer .nav-logo img { filter: brightness(0) invert(1); } .nav-logo .logo-text { display: inline-flex; align-items: center; letter-spacing: 0.02em; } .nav-links { display: flex; gap: 2.25rem; align-items: center; } .nav-links > a, .nav-item > a { font-size: 0.9rem; font-weight: 500; color: var(--grey-600); transition: color 0.25s; position: relative; } .nav-links > a:hover, .nav-item > a:hover, .nav-links > a.active, .nav-item > a.active { color: var(--ink); } .nav-links > a.active::after, .nav-item > a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--blue); } .nav-right { display: flex; align-items: center; gap: 1.25rem; } /* Dropdown */ .nav-item { position: relative; } .nav-item .caret { font-size: 0.65em; opacity: 0.7; } .dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); background: var(--white); border: 1px solid var(--grey-100); border-radius: 10px; min-width: 260px; padding: 0.5rem; display: flex; flex-direction: column; box-shadow: 0 20px 48px rgba(10, 14, 39, 0.14); opacity: 0; visibility: hidden; transition: all 0.28s var(--ease); } .dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown a { padding: 0.7rem 0.9rem; border-radius: 6px; font-size: 0.88rem; font-weight: 500; color: var(--grey-600); transition: all 0.2s; } .dropdown a:hover { background: var(--blue-soft); color: var(--blue); } .lang-toggle { background: transparent; border: 1px solid rgba(10,14,39,0.2); color: var(--grey-600); border-radius: 100px; padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; transition: all 0.25s; } .lang-toggle:hover { border-color: var(--blue); color: var(--blue); } .nav-burger { display: none; background: none; border: none; width: 28px; height: 20px; position: relative; z-index: 102; } .nav-burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); transition: all 0.3s var(--ease); } .nav-burger span:nth-child(1) { top: 0; } .nav-burger span:nth-child(2) { top: 9px; } .nav-burger span:nth-child(3) { top: 18px; } .nav-burger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2rem; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; transition: all 0.3s var(--ease); border: none; } .btn-primary { background: var(--blue); color: var(--white); } .btn-primary:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(46, 91, 255, 0.3); } .btn-outline { background: transparent; color: var(--ink); border: 1px solid rgba(10,14,39,0.22); } .btn-outline:hover { border-color: var(--blue); color: var(--blue); } .dark .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.3); } .dark .btn-outline:hover { color: var(--blue); border-color: var(--blue); } .btn .arrow { transition: transform 0.3s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .text-link { font-weight: 600; font-size: 0.95rem; color: var(--blue); display: inline-flex; align-items: center; gap: 0.5rem; } .text-link .arrow { transition: transform 0.3s var(--ease); } .text-link:hover .arrow { transform: translateX(4px); } /* ---------- Hero ---------- */ .hero { min-height: 90svh; display: flex; align-items: center; position: relative; padding-top: 9rem; padding-bottom: 4rem; overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 82% 8%, rgba(46,91,255,0.10), transparent 62%), radial-gradient(ellipse 45% 40% at 8% 95%, rgba(46,91,255,0.07), transparent 60%); } .dark .hero-bg { background: radial-gradient(ellipse 60% 50% at 80% 10%, rgba(46,91,255,0.16), transparent 60%), radial-gradient(ellipse 50% 40% at 10% 90%, rgba(46,91,255,0.09), transparent 60%); } .hero-grid-lines { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: linear-gradient(rgba(10,14,39,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(10,14,39,0.5) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent); } /* Blobs azules flotantes — movimiento lento y elegante */ .hero-bg::before, .hero-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; } .hero-bg::before { width: 460px; height: 460px; background: rgba(46, 91, 255, 0.16); top: -8%; right: -4%; animation: drift1 16s ease-in-out infinite alternate; } .hero-bg::after { width: 360px; height: 360px; background: rgba(46, 91, 255, 0.10); bottom: -12%; left: -6%; animation: drift2 20s ease-in-out infinite alternate; } @keyframes drift1 { to { transform: translate(-70px, 60px) scale(1.15); } } @keyframes drift2 { to { transform: translate(80px, -50px) scale(0.9); } } /* Olas animadas (inyectadas por main.js al pie de hero/page-hero) */ .waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; overflow: hidden; pointer-events: none; } .waves svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; animation: waveMove linear infinite; } .waves svg:nth-child(1) { fill: rgba(46, 91, 255, 0.06); animation-duration: 18s; } .waves svg:nth-child(2) { fill: rgba(46, 91, 255, 0.10); animation-duration: 12s; animation-direction: reverse; } .waves svg:nth-child(3) { fill: rgba(46, 91, 255, 0.16); animation-duration: 8s; } @keyframes waveMove { to { transform: translateX(-50%); } } .hero-inner { position: relative; z-index: 1; } .hero-sub { max-width: 580px; margin-top: 2rem; } .hero-ctas { display: flex; gap: 1rem; margin-top: 3rem; flex-wrap: wrap; } .hero-meta { margin-top: 5rem; display: flex; gap: 3rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--grey-400); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .page-hero { padding: clamp(8.5rem, 16vh, 11rem) 0 clamp(3.5rem, 7vh, 5rem); position: relative; overflow: hidden; } /* ---------- Manifesto / statement ---------- */ .statement { font-size: clamp(1.6rem, 3.6vw, 2.9rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; max-width: 900px; } .statement .dim { color: var(--grey-400); } .dark .statement .dim { color: var(--grey-600); } /* ---------- Disciplinas ---------- */ .discipline-row { display: flex; align-items: baseline; justify-content: space-between; padding: 1.75rem 0; border-bottom: 1px solid rgba(10,14,39,0.09); transition: padding-left 0.35s var(--ease); } .discipline-main { display: flex; flex-direction: column; } .discipline-desc { max-height: 0; opacity: 0; overflow: hidden; color: var(--grey-600); font-size: 1rem; font-weight: 400; max-width: 560px; transition: max-height 0.45s var(--ease), opacity 0.45s var(--ease), margin-top 0.45s var(--ease); } .discipline-row:hover .discipline-desc, .discipline-row:focus-visible .discipline-desc { max-height: 4.5em; opacity: 1; margin-top: 0.6rem; } .discipline-name::after { content: "→"; display: inline-block; margin-left: 0.6rem; opacity: 0; transform: translateX(-8px); color: var(--blue); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .discipline-row:hover .discipline-name::after { opacity: 1; transform: translateX(0); } @media (hover: none) { .discipline-desc { max-height: none; opacity: 1; margin-top: 0.5rem; } } .discipline-row:first-child { border-top: 1px solid rgba(10,14,39,0.09); } .discipline-row:hover { padding-left: 1rem; } .discipline-row:hover .discipline-name { color: var(--blue); } .discipline-name { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; transition: color 0.3s; } .discipline-num { font-size: 0.8rem; color: var(--grey-400); font-weight: 600; letter-spacing: 0.1em; } /* ---------- Cards ---------- */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .card { background: var(--white); border: 1px solid var(--grey-100); border-radius: 10px; padding: 2.5rem 2rem; transition: all 0.35s var(--ease); position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(10,14,39,0.04); } .card:hover { border-color: rgba(46,91,255,0.45); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,14,39,0.1); } .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .card:hover::before { transform: scaleX(1); } .card-num { font-size: 0.78rem; color: var(--blue); font-weight: 700; letter-spacing: 0.15em; margin-bottom: 1.5rem; display: block; } .card h3 { font-size: 1.35rem; margin-bottom: 0.85rem; } .card p { color: var(--grey-600); font-size: 0.95rem; } .card .result-tag { display: inline-block; margin-top: 1.5rem; font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.05rem; } /* ---------- Diferenciadores ---------- */ .diff-item { padding: 2rem 0; border-top: 1px solid rgba(10,14,39,0.09); display: grid; grid-template-columns: 80px 1fr 2fr; gap: 2rem; align-items: baseline; } .dark .diff-item { border-color: rgba(255,255,255,0.1); } .diff-item .num { font-size: 0.85rem; font-weight: 700; color: var(--blue); letter-spacing: 0.1em; } .diff-item h3 { font-size: 1.4rem; } .diff-item p { color: var(--grey-600); } .dark .diff-item p { color: var(--grey-400); } /* ---------- Proceso ---------- */ .step { display: grid; grid-template-columns: 120px 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding: 3.5rem 0; border-top: 1px solid rgba(10,14,39,0.09); align-items: start; } .step-num { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--blue); letter-spacing: -0.03em; line-height: 1; } .step h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1rem; } .step .deliverable { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--blue-soft); border-left: 2px solid var(--blue); font-size: 0.9rem; border-radius: 0 var(--radius) var(--radius) 0; } .step .deliverable strong { color: var(--blue); } /* ---------- Solución (detalle) ---------- */ .solution-block { padding: clamp(4rem, 9vh, 7rem) 0; border-top: 1px solid rgba(10,14,39,0.08); } .solution-head { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .solution-head .tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); border: 1px solid rgba(46,91,255,0.4); padding: 0.3rem 0.8rem; border-radius: 100px; } .solution-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: 2.5rem; } .solution-cols h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--grey-400); margin-bottom: 1rem; font-weight: 600; } .solution-cols ul li { padding: 0.65rem 0; border-bottom: 1px solid rgba(10,14,39,0.07); font-size: 0.95rem; color: var(--grey-600); } .solution-cols ul li::before { content: "→ "; color: var(--blue); font-weight: 700; } .solution-result { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--ink); } .dark .solution-result { color: var(--white); } /* ---------- Sección humana (estilo Star5: personas primero) ---------- */ .human-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 4rem; align-items: start; } .human-grid figure { border-radius: 12px; overflow: hidden; position: relative; } .human-grid figure:nth-child(2) { transform: translateY(2.5rem); } .human-grid img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.6s var(--ease); } .human-grid figure:hover img { transform: scale(1.04); } .human-quote { max-width: 720px; margin-top: 6rem; } .human-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.45; color: var(--ink); } .human-quote cite { display: block; margin-top: 1.5rem; font-family: var(--font); font-style: normal; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-400); } /* ---------- Marquee (cinta animada de disciplinas) ---------- */ .marquee { overflow: hidden; background: var(--navy); padding: 1.35rem 0; position: relative; } .marquee-track { display: flex; align-items: center; gap: 3.5rem; width: max-content; animation: marquee 26s linear infinite; } .marquee-track span { font-size: 1rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.88); white-space: nowrap; } .marquee-track .sep { color: var(--blue); font-size: 0.8rem; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- Proceso resumido en el landing ---------- */ .process-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } .p-step { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 1.75rem 1.4rem; transition: all 0.35s var(--ease); display: block; } .p-step:hover { border-color: rgba(46,91,255,0.6); transform: translateY(-4px); background: rgba(46,91,255,0.08); } .p-step .n { display: block; font-size: 2.2rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1.3px var(--blue); line-height: 1; margin-bottom: 1rem; } .p-step h3 { font-size: 1.05rem; color: var(--white); margin-bottom: 0.5rem; } .p-step p { font-size: 0.85rem; color: var(--grey-400); line-height: 1.5; } @media (max-width: 960px) { .process-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .process-strip { grid-template-columns: 1fr; } } /* ---------- Hero con más impacto ---------- */ .hero .display { font-size: clamp(3rem, 9vw, 7.4rem); } /* ---------- Banda de estadísticas (prueba social en números) ---------- */ .stats-band { position: relative; overflow: hidden; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: 3.5rem; } .stat { border-left: 2px solid rgba(255, 154, 31, 0.55); padding-left: 1.5rem; } .stat-num { font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--amber); display: block; font-variant-numeric: tabular-nums; } .stat p { color: var(--grey-400); font-size: 0.92rem; margin-top: 0.75rem; max-width: 220px; } @media (max-width: 960px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } } /* ---------- Galaxia (hero + cierre del landing) ---------- */ .galaxy { background: radial-gradient(ellipse 100% 100% at 50% 120%, #131C55 0%, #0C1233 45%, var(--navy) 100%); color: var(--white); position: relative; overflow: hidden; } .hero.galaxy { background: radial-gradient(ellipse 110% 90% at 75% -10%, #16205C 0%, #0D1338 45%, var(--navy) 100%); } .galaxy .lead { color: var(--grey-400); } .galaxy-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .galaxy .container { position: relative; z-index: 2; } .galaxy::before { content: ""; position: absolute; left: 10%; top: 10%; width: 80%; height: 110%; background: radial-gradient(circle at 30% 45%, rgba(46, 91, 255, 0.28), transparent 55%), radial-gradient(circle at 72% 60%, rgba(130, 90, 255, 0.18), transparent 55%); filter: blur(70px); pointer-events: none; animation: nebula 16s ease-in-out infinite alternate; } @keyframes nebula { to { transform: translate(-5%, 6%) scale(1.18) rotate(6deg); } } /* Nav con barra clara fija (landing: legible sobre el hero galaxia sin cambiar su estilo) */ .nav-solid { background: rgba(247, 248, 251, 0.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(10,14,39,0.07); } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; text-align: center; padding: clamp(6rem, 14vh, 10rem) 0; } .cta-band h2 { margin-bottom: 1.25rem; } .cta-band .lead { max-width: 560px; margin: 0 auto 2.5rem; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-field { display: flex; flex-direction: column; gap: 0.5rem; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-600); } .form-field input, .form-field textarea { background: var(--white); border: 1px solid rgba(10,14,39,0.15); border-radius: var(--radius); padding: 1rem 1.15rem; color: var(--ink); font-family: inherit; font-size: 1rem; transition: border-color 0.25s, box-shadow 0.25s; } .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } .form-field textarea { resize: vertical; min-height: 140px; } /* ---------- Contact layout ---------- */ .contact-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } .contact-aside .aside-block { padding: 1.75rem 0; border-top: 1px solid rgba(10,14,39,0.1); } .contact-aside .aside-block:first-child { border-top: none; } .contact-aside .aside-block h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--grey-400); margin-bottom: 0.6rem; font-weight: 600; } .contact-aside .aside-block a { color: var(--ink); font-weight: 600; } .contact-aside .aside-block a:hover { color: var(--blue); } /* ---------- Footer (navy — el ancla oscura del sitio) ---------- */ .footer { background: var(--navy); color: var(--white); padding: 4rem 0 2rem; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; } .footer h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--grey-600); margin-bottom: 1.25rem; font-weight: 600; } .footer ul li { margin-bottom: 0.7rem; } .footer ul a { color: var(--grey-400); font-size: 0.92rem; transition: color 0.25s; } .footer ul a:hover { color: var(--white); } .footer-tagline { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -0.03em; max-width: 420px; line-height: 1.2; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.07); font-size: 0.82rem; color: var(--grey-600); flex-wrap: wrap; gap: 1rem; } /* ---------- WhatsApp float ---------- */ .wa-float { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.25); transition: transform 0.3s var(--ease); } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 28px; height: 28px; fill: #fff; } /* ---------- Reveal on scroll ---------- Solo se oculta si el JS confirmó que corre (html.js). Si el JS no carga, TODO el contenido queda visible. */ html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } html.js .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; } .reveal-d3 { transition-delay: 0.3s; } /* "Reducir movimiento": solo desactivamos las entradas al hacer scroll. La ambientación (estrellas, cinta, olas) se mantiene: es decorativa y suave. */ @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Banner de imagen editorial ---------- */ .media-banner { margin-top: 4.5rem; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 30px 70px rgba(10, 14, 39, 0.18); } .media-banner img { width: 100%; height: auto; display: block; } .media-banner .media-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem clamp(1.5rem, 4vw, 3rem); background: linear-gradient(transparent, rgba(10, 14, 39, 0.85)); color: var(--white); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.06em; } @media (max-width: 720px) { /* Móvil: menos alto y menos recorte que el 4/3 anterior */ .media-banner { margin-top: 2.5rem; border-radius: 12px; box-shadow: 0 16px 36px rgba(10, 14, 39, 0.16); } .media-banner img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center; } } /* ---------- Section header ---------- */ .section-head { margin-bottom: clamp(3rem, 7vh, 5rem); display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; } .section-head .lead { max-width: 480px; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; } .contact-layout { grid-template-columns: 1fr; } .solution-cols { grid-template-columns: 1fr; } .diff-item { grid-template-columns: 50px 1fr; } .diff-item p { grid-column: 2; } } @media (max-width: 720px) { .nav-links { position: fixed; inset: 0; background: var(--bg); flex-direction: column; justify-content: center; gap: 1.75rem; transform: translateX(100%); transition: transform 0.4s var(--ease); z-index: 101; } .nav-links.open { transform: translateX(0); } /* Con el menú abierto el header no debe filtrar el fondo: backdrop-filter crea un bloque contenedor y el menú fixed quedaba encerrado en la barra. */ .nav.menu-open, .nav.menu-open.scrolled { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav.menu-open .lang-toggle, .nav.menu-open .nav-logo { position: relative; z-index: 102; } /* CTA de WhatsApp dentro del menú móvil */ .nav.menu-open .nav-chat { display: inline-flex; position: fixed; z-index: 102; left: 50%; bottom: clamp(3rem, 12vh, 6rem); transform: translateX(-50%); font-size: 0.95rem; padding: 0.85rem 1.6rem; border-color: #25D366; color: #16994c; background: rgba(37, 211, 102, 0.08); } .nav-links > a, .nav-item > a { font-size: 1.4rem; font-weight: 700; color: var(--ink); } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .nav-item .caret { display: none; } .dropdown { position: static; transform: none; opacity: 1; visibility: visible; background: none; border: none; box-shadow: none; min-width: 0; padding: 0; align-items: center; gap: 0.25rem; } .dropdown::before { display: none; } .dropdown a { font-size: 0.95rem; color: var(--grey-600); padding: 0.3rem 0.9rem; } .nav-burger { display: block; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 2rem; } .step { grid-template-columns: 1fr; gap: 1rem; } .hero-meta { gap: 0.9rem 1.5rem; font-size: 0.72rem; margin-top: 3rem; } /* Móvil: mosaico 2 columnas en vez de 3 fotos apiladas (ocupaban muchísimo alto) */ .human-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 2.5rem; } .human-grid figure:nth-child(2) { transform: none; } .human-grid figure:first-child { grid-column: 1 / -1; } .human-grid figure:first-child img { aspect-ratio: 16 / 10; } .human-grid img { aspect-ratio: 1 / 1; } .human-quote { margin-top: 3rem; } /* Mobile: tipografía y espacios afinados */ section { padding: 4rem 0; } .hero { min-height: auto; padding: 9rem 0 4rem; } .page-hero { padding: 7.5rem 0 3rem; } .display { font-size: clamp(2.3rem, 10.5vw, 3.1rem); } .hero .display, .hero-l .display { font-size: clamp(1.95rem, 8.6vw, 2.7rem); } .h-xl { font-size: clamp(1.9rem, 8vw, 2.6rem); } .statement { font-size: clamp(1.35rem, 6.5vw, 1.75rem); } .hero-ctas { margin-top: 2.25rem; } .hero-ctas .btn { width: 100%; justify-content: center; } .hero-sub { margin-top: 1.5rem; } .marquee-track span { font-size: 0.8rem; } .section-head { margin-bottom: 2.5rem; } .media-caption { font-size: 0.78rem; padding: 1.25rem; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .card { padding: 2rem 1.5rem; } .solution-block { padding: 3.5rem 0; } .cta-band { padding: 5rem 0; } } /* ---------- Pulido: accesibilidad y micro-interacciones ---------- */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } .btn:focus-visible { outline-offset: 2px; } .has-dropdown .caret { display: inline-block; transition: transform 0.25s var(--ease); } .has-dropdown:hover .caret { transform: rotate(180deg); } /* WhatsApp: anillo de atención sutil */ .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); animation: waPulse 2.6s ease-out infinite; } @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); } 70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* Anclas con nav fija */ [id] { scroll-margin-top: 6rem; } /* ---------- Nav: CTA de chat (WhatsApp) ---------- */ .nav-chat { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; font-weight: 600; color: var(--grey-600); border: 1px solid rgba(10,14,39,0.2); border-radius: 100px; padding: 0.38rem 1rem; transition: all 0.25s var(--ease); white-space: nowrap; } .nav-chat:hover { border-color: #25D366; color: #16994c; } .nav-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2); flex: none; } @media (max-width: 1080px) { .nav-chat { display: none; } } /* ---------- Chips de plataformas / entregables ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .chip { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(46, 91, 255, 0.25); padding: 0.4rem 0.85rem; border-radius: 100px; } /* ============================================================ MÓDULOS VISUALES v2 — campañas · automatización · chat ============================================================ */ /* ---------- Encabezado de sección con número ---------- */ .sec-kicker { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; } .sec-kicker .n { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; color: var(--amber-ink); font-variant-numeric: tabular-nums; } .dark .sec-kicker .n { color: var(--amber); } /* ---------- Franja de anuncios (mocks fieles a cada plataforma) ---------- */ .ads-rail { margin-top: 2.5rem; display: grid; gap: 1.1rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .ads-row { display: flex; gap: 1.1rem; width: max-content; align-items: stretch; animation: adsScroll 78s linear infinite; } .ads-row.rev { animation-duration: 96s; animation-direction: reverse; } .ads-rail:hover .ads-row { animation-play-state: paused; } @keyframes adsScroll { to { transform: translateX(-50%); } } .ads-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 2rem; font-size: 0.78rem; color: var(--grey-600); } .ads-legend b { color: var(--ink); font-weight: 700; } .ad-card { width: 302px; flex: none; background: var(--white); border: 1px solid var(--grey-100); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 28px rgba(10, 14, 39, 0.07); display: flex; flex-direction: column; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .ad-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(10, 14, 39, 0.14); } /* -- Cabecera tipo feed (Meta) -- */ .ad-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.8rem 0.85rem 0.5rem; } .ad-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--c, #2E5BFF); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; } .ad-id { line-height: 1.25; min-width: 0; } .ad-id b { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ad-id span, .ad-id em { display: flex; font-style: normal; align-items: center; gap: 0.25rem; font-size: 0.66rem; color: var(--grey-400); } .ad-id svg { width: 9px; height: 9px; fill: var(--grey-400); } .ad-dots { margin-left: auto; color: var(--grey-400); font-size: 0.9rem; letter-spacing: 0.06em; align-self: flex-start; } .ad-primary { padding: 0 0.85rem 0.6rem; font-size: 0.76rem; line-height: 1.45; color: var(--grey-600); } /* -- Creatividad -- */ .ad-shot { height: 134px; position: relative; display: flex; align-items: flex-end; padding: 0.9rem; color: #fff; } .ad-shot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 16%, rgba(255,255,255,0.26), transparent 55%), linear-gradient(transparent 45%, rgba(0,0,0,0.32)); } .ad-copy { position: relative; z-index: 1; font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-shadow: 0 1px 12px rgba(0,0,0,0.28); } .g1 { background: linear-gradient(140deg, #2E5BFF, #1129A8); } .g2 { background: linear-gradient(140deg, #C2410C, #7C2D12); } .g3 { background: linear-gradient(140deg, #0F766E, #064E3B); } .g4 { background: linear-gradient(140deg, #6D28D9, #312E81); } .g5 { background: linear-gradient(140deg, #B91C1C, #4C0519); } .g6 { background: linear-gradient(140deg, #0369A1, #082F49); } /* -- Barra de CTA (Meta) -- */ .ad-cta { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; background: #F0F2F5; border-top: 1px solid var(--grey-100); } .ad-cta > div { min-width: 0; } .ad-dom { display: block; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-400); } .ad-cta b { display: block; font-size: 0.74rem; font-weight: 700; line-height: 1.25; color: var(--ink); } .ad-btn { margin-left: auto; flex: none; font-size: 0.68rem; font-weight: 700; background: #E4E6EB; color: #050505; padding: 0.42rem 0.7rem; border-radius: 6px; white-space: nowrap; } .ad-social { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem; font-size: 0.66rem; color: var(--grey-400); border-top: 1px solid var(--grey-100); } .rx { display: inline-flex; align-items: center; } .rx i { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 1.5px solid #fff; } .rx i:nth-child(2) { margin-left: -4px; } .rx-like { background: #1877F2; } .rx-love { background: #F33E58; } .ad-social .sep2 { margin-left: auto; } /* -- Mock de resultado de Google -- */ .g-serp { padding: 1.15rem 1rem 1.2rem; flex: 1; display: flex; flex-direction: column; justify-content: center; } .g-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; } .g-ad { font-size: 0.62rem; font-weight: 800; color: #0B5D1E; border: 1px solid rgba(11,93,30,0.35); border-radius: 4px; padding: 0.06rem 0.28rem; } .g-url { font-size: 0.68rem; color: #4D5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g-title { font-size: 0.95rem; font-weight: 500; line-height: 1.28; color: #1A0DAB; letter-spacing: -0.01em; } .g-desc { margin-top: 0.3rem; font-size: 0.72rem; line-height: 1.45; color: #4D5156; } .g-links { display: flex; gap: 0.9rem; margin-top: 0.55rem; } .g-links span { font-size: 0.7rem; color: #1A0DAB; border-bottom: 1px solid rgba(26,13,171,0.25); } .g-rating { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.68rem; color: #4D5156; } .g-rating .stars { color: #E8A33D; letter-spacing: -0.04em; font-size: 0.72rem; } /* -- Mock de TikTok -- */ .tt-shot { position: relative; height: 236px; padding-right: 4rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 0.9rem; color: #fff; } .tt-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,0.55)); } .tt-shot > * { position: relative; z-index: 1; } .tt-user { font-size: 0.74rem; font-weight: 700; } .tt-user span { font-weight: 500; opacity: 0.75; } .tt-copy { font-size: 0.86rem; line-height: 1.35; margin-top: 0.25rem; } .tt-cta { margin-top: 0.7rem; background: #FE2C55; color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; padding: 0.5rem; border-radius: 5px; } .tt-side { position: absolute; right: 0.7rem; bottom: 3.6rem; display: grid; gap: 0.7rem; text-align: center; z-index: 1; } .tt-side div { font-size: 0.6rem; font-weight: 700; } .tt-side svg { width: 21px; height: 21px; fill: #fff; display: block; margin: 0 auto 0.1rem; } /* -- Panel de métricas -- */ .ad-metrics-box { margin-top: auto; padding: 0.7rem 0.85rem 0.85rem; border-top: 1px solid var(--grey-100); background: #FBFCFE; } .ad-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .ad-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-400); } .ad-metrics { display: flex; gap: 0.35rem; flex-wrap: wrap; } .ad-metric { white-space: nowrap; } .ad-metric { font-size: 0.65rem; font-weight: 700; padding: 0.28rem 0.5rem; border-radius: 5px; background: var(--amber-soft); color: var(--amber-ink); font-variant-numeric: tabular-nums; } .ad-metric.up { background: rgba(21, 128, 61, 0.1); color: #15803D; } /* estado de campaña (reemplaza la mini-gráfica) */ .ad-live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #15803D; } .ad-live i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); display: block; } .ads-swipe { display: none; align-items: center; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-400); } .ads-swipe svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; animation: nudge 1.8s ease-in-out infinite; } /* Móvil: las franjas se deslizan con el dedo en vez de correr solas */ @media (max-width: 720px) { .ads-rail { -webkit-mask-image: none; mask-image: none; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); } .ads-row { animation: none; width: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0.5rem var(--pad) 1rem; scrollbar-width: none; } .ads-row::-webkit-scrollbar { display: none; } .ads-row.rev { display: none; } /* una sola fila deslizable */ .ads-row > .ad-card:nth-child(n+6) { display: none; } /* sin duplicados al deslizar a mano */ .ad-card { scroll-snap-align: center; width: 270px; } .ads-swipe { display: flex; } } .ads-note { margin-top: 1.75rem; font-size: 0.78rem; color: var(--grey-400); max-width: 760px; line-height: 1.6; } /* ---------- Diagrama de flujo automatizado ---------- */ .auto-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: 3.5rem; } .flow { position: relative; } .flow-step { display: grid; grid-template-columns: 46px 1fr; gap: 1.15rem; padding-bottom: 1.9rem; position: relative; } .flow-step:last-child { padding-bottom: 0; } .flow-step::before { content: ""; position: absolute; left: 22px; top: 48px; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.13); } .flow-step:last-child::before { display: none; } .flow-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(46, 91, 255, 0.16); border: 1px solid rgba(46, 91, 255, 0.45); position: relative; z-index: 1; } .flow-icon svg { width: 20px; height: 20px; stroke: #A9C0FF; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .flow-step h3 { font-size: 1.06rem; margin-bottom: 0.25rem; } .flow-step p { color: var(--grey-400); font-size: 0.9rem; line-height: 1.55; } .flow-tag { display: inline-block; margin-top: 0.5rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7B9BFF; border: 1px solid rgba(123, 155, 255, 0.35); border-radius: 100px; padding: 0.22rem 0.6rem; } /* entrada escalonada + haz de luz que recorre el flujo */ html.js .flow-step { opacity: 0; transform: translateY(16px); } .visible .flow-step { animation: flowIn 0.6s var(--ease) forwards; } .visible .flow-step:nth-child(1) { animation-delay: 0.05s; } .visible .flow-step:nth-child(2) { animation-delay: 0.25s; } .visible .flow-step:nth-child(3) { animation-delay: 0.45s; } .visible .flow-step:nth-child(4) { animation-delay: 0.65s; } .visible .flow-step:nth-child(5) { animation-delay: 0.85s; } @keyframes flowIn { to { opacity: 1; transform: translateY(0); } } .flow-beam { position: absolute; left: 20px; top: 0; width: 6px; height: 74px; border-radius: 6px; background: linear-gradient(180deg, transparent, #2E5BFF, transparent); filter: blur(1px); opacity: 0; pointer-events: none; } .visible .flow-beam { animation: beam 3.4s 1.2s var(--ease) infinite; } @keyframes beam { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 40px); opacity: 0; } } /* ---------- Mock de WhatsApp ---------- */ .wa-mock { justify-self: center; width: min(310px, 100%); } .wa-phone { background: #0B141A; border-radius: 34px; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04) inset; } .wa-screen { border-radius: 24px; overflow: hidden; background: #0B141A; } .wa-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0.9rem; background: #1F2C34; } .wa-pic { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--blue); display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; color: #fff; letter-spacing: 0.02em; } .wa-who { line-height: 1.2; } .wa-who b { display: block; font-size: 0.8rem; color: #E9EDEF; font-weight: 700; } .wa-who span { font-size: 0.64rem; color: #25D366; font-weight: 600; } .wa-thread { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; min-height: 336px; justify-content: flex-end; background: radial-gradient(circle at 20% 15%, rgba(46,91,255,0.07), transparent 45%), #0B141A; } .wa-msg { max-width: 84%; padding: 0.5rem 0.7rem 0.42rem; border-radius: 11px; font-size: 0.79rem; line-height: 1.42; opacity: 0; transform: translateY(9px) scale(0.97); } .wa-msg.in { background: #1F2C34; color: #E9EDEF; align-self: flex-start; border-top-left-radius: 3px; } .wa-msg.out { background: #0B5D4B; color: #E9EDEF; align-self: flex-end; border-top-right-radius: 3px; } .wa-msg i { display: block; font-style: normal; font-size: 0.58rem; text-align: right; color: rgba(233,237,239,0.5); margin-top: 0.15rem; } .visible .wa-msg { animation: waIn 0.45s var(--d, 0.4s) var(--ease) forwards; } @keyframes waIn { to { opacity: 1; transform: translateY(0) scale(1); } } .wa-dots { align-self: flex-start; display: flex; gap: 4px; padding: 0.55rem 0.7rem; background: #1F2C34; border-radius: 11px; border-top-left-radius: 3px; opacity: 0; } .wa-dots span { width: 5px; height: 5px; border-radius: 50%; background: #8696A0; } .visible .wa-dots { animation: dotsShow 1.5s 0.75s var(--ease) forwards; } @keyframes dotsShow { 0% { opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; height: 0; padding: 0; margin-top: -0.45rem; } } .visible .wa-dots span { animation: dotJump 1.1s ease-in-out infinite; } .visible .wa-dots span:nth-child(2) { animation-delay: 0.15s; } .visible .wa-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes dotJump { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } .wa-caption { margin-top: 1.5rem; text-align: center; font-size: 0.82rem; color: var(--grey-400); line-height: 1.5; } .wa-caption b { color: #fff; font-weight: 700; } /* ---------- Responsive de los módulos nuevos ---------- */ @media (max-width: 900px) { .auto-grid { grid-template-columns: 1fr; gap: 3rem; } } @media (max-width: 720px) { .ad-card { width: 226px; } .ad-shot { height: 118px; } .ad-shot span { font-size: 0.92rem; } .ads-rail { margin-top: 2.25rem; } .flow-step { grid-template-columns: 40px 1fr; gap: 0.9rem; padding-bottom: 1.6rem; } .flow-icon { width: 40px; height: 40px; border-radius: 12px; } .flow-step::before { left: 19px; top: 42px; } .flow-beam { left: 17px; } .wa-thread { min-height: 300px; } } /* ============================================================ MANIFIESTO IA — apilado por defecto, scroll horizontal si el navegador puede ============================================================ */ /* Mejora progresiva: solo con sticky verificado */ /* bandeja de mensajes sin responder */ .inbox { max-width: 430px; background: #fff; border: 1px solid var(--grey-100); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(10,14,39,0.14); } .inbox-top { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--grey-100); } .inbox-top b { font-size: 0.86rem; } .inbox-count { font-size: 0.7rem; font-weight: 800; color: #fff; background: #E11D48; border-radius: 100px; padding: 0.22rem 0.6rem; } .inbox-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 0.7rem; align-items: center; padding: 0.72rem 1rem; border-bottom: 1px solid #F1F3F9; } .inbox-row:last-of-type { border-bottom: 0; } .inbox-av { width: 30px; height: 30px; border-radius: 50%; background: var(--grey-100); display: grid; place-items: center; font-size: 0.64rem; font-weight: 800; color: var(--grey-600); } .inbox-txt { min-width: 0; } .inbox-txt b { display: block; font-size: 0.78rem; } .inbox-txt span { display: block; font-size: 0.74rem; color: var(--grey-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox-ago { font-size: 0.68rem; font-weight: 700; color: #E11D48; white-space: nowrap; } .inbox-foot { padding: 0.8rem 1rem; font-size: 0.76rem; color: var(--grey-400); background: #FAFBFE; } /* burbujas + calificación de la IA */ .bubble-stack { display: grid; gap: 0.6rem; max-width: 420px; } .bub { padding: 0.8rem 1rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; box-shadow: 0 10px 30px rgba(10,14,39,0.09); } .bub-in { background: #fff; border: 1px solid var(--grey-100); justify-self: start; border-top-left-radius: 4px; } .bub-out { background: #0B5D4B; color: #fff; justify-self: end; border-top-right-radius: 4px; } .bub-tag { display: inline-flex; align-items: center; gap: 0.35rem; justify-self: end; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 0.26rem 0.6rem; border-radius: 100px; } .bub-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: block; } .chipset { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; } .qchip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; color: #15803D; background: rgba(21,128,61,0.1); padding: 0.32rem 0.65rem; border-radius: 100px; opacity: 0; transform: translateY(6px); } @keyframes qIn { to { opacity: 1; transform: translateY(0); } } .qchip svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; } /* cadena de automatización */ .chain { display: grid; gap: 0.55rem; max-width: 420px; } .chain-step { display: grid; grid-template-columns: 26px 1fr; gap: 0.85rem; align-items: center; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); opacity: 0; transform: translateX(-14px); } @keyframes chainIn { to { opacity: 1; transform: translateX(0); } } .chain-tick { width: 26px; height: 26px; border-radius: 50%; background: rgba(21,128,61,0.22); border: 1px solid rgba(74,222,128,0.55); display: grid; place-items: center; } .chain-tick svg { width: 13px; height: 13px; stroke: #4ADE80; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .chain-step b { font-size: 0.86rem; font-weight: 600; color: #fff; } .chain-step em { font-style: normal; display: block; font-size: 0.72rem; color: var(--grey-400); margin-top: 0.1rem; } /* actividad 24 h */ .clock24 { max-width: 430px; } .clock-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.9rem; } .clock-head span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-400); } .clock-head b { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; color: var(--amber); font-variant-numeric: tabular-nums; } .clock-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 108px; } .clock-bars i { display: block; border-radius: 3px 3px 0 0; background: rgba(255,255,255,0.22); height: calc(var(--h) * 1%); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease); } .clock-bars i.night { background: var(--amber); } .clock-axis { display: flex; justify-content: space-between; margin-top: 0.6rem; font-size: 0.66rem; color: var(--grey-400); font-variant-numeric: tabular-nums; } .clock-note { margin-top: 1rem; font-size: 0.78rem; color: var(--grey-400); } .clock-note b { color: var(--amber); font-weight: 700; } /* progreso */ @media (max-width: 720px) { .bub { font-size: 0.86rem; } } /* ============================================================ V3 — base clara con anclas oscuras ============================================================ */ .pill { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); background: rgba(46,91,255,0.08); border: 1px solid rgba(46,91,255,0.2); border-radius: 100px; padding: 0.45rem 1rem; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } /* ---------- Hero claro ---------- */ .hero-l { position: relative; overflow: hidden; padding: clamp(9rem, 20vh, 13rem) 0 clamp(4rem, 9vh, 7rem); background: linear-gradient(175deg, #FFFFFF 0%, #F3F6FF 46%, #E9EFFD 100%); text-align: center; } .hero-l-bg { position: absolute; inset: 0; pointer-events: none; } .hero-l-bg::before, .hero-l-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(110px); } .hero-l-bg::before { width: 620px; height: 620px; background: rgba(46,91,255,0.16); top: -22%; right: -8%; animation: drift1 18s ease-in-out infinite alternate; } .hero-l-bg::after { width: 460px; height: 460px; background: rgba(255,154,31,0.16); bottom: -28%; left: -6%; animation: drift2 22s ease-in-out infinite alternate; } .hero-l-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .hero-l .display { margin-top: 1.6rem; max-width: 20ch; font-size: clamp(2.2rem, 5.4vw, 4.4rem); } .hero-l-sub { margin-top: 1.75rem; max-width: 44ch; } .hero-l-ctas { display: flex; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; justify-content: center; } .trust { margin-top: 4rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; justify-content: center; } .tr-avs { display: flex; } .tr-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #2E5BFF); color: #fff; font-size: 0.7rem; font-weight: 800; border: 2px solid #fff; margin-left: -10px; box-shadow: 0 4px 14px rgba(10,14,39,0.14); } .tr-av:first-child { margin-left: 0; } .trust p { font-size: 0.88rem; color: var(--grey-600); max-width: 34ch; text-align: left; } /* ---------- Estadísticas sobre claro ---------- */ .stats-l .stat { border-left-color: rgba(255,154,31,0.6); } .stats-l .stat-num { color: var(--amber-ink); } .stats-l .stat p { color: var(--grey-600); } /* ---------- Casos ---------- */ .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3.25rem; } .case { background: var(--white); border: 1px solid var(--grey-100); border-radius: 16px; padding: 1.75rem 1.6rem; display: flex; flex-direction: column; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); box-shadow: 0 6px 22px rgba(10,14,39,0.05); } .case:hover { transform: translateY(-6px); border-color: rgba(46,91,255,0.4); box-shadow: 0 22px 48px rgba(10,14,39,0.12); } .case-top { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.15rem; } .case-n { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; color: var(--amber-ink); font-variant-numeric: tabular-nums; } .case-top b { display: block; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.02em; } .case-top span { display: block; font-size: 0.72rem; color: var(--grey-400); } .case h3 { font-size: 1.18rem; line-height: 1.25; margin-bottom: 0.65rem; } .case p { font-size: 0.9rem; line-height: 1.6; color: var(--grey-600); flex: 1; } .case-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; } .case-chip { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: var(--blue); background: var(--blue-soft); padding: 0.3rem 0.6rem; border-radius: 6px; } /* ---------- Las cuatro piezas ---------- */ .piezas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3.5rem; } .pieza { padding: 2rem 1.5rem; border-radius: 16px; background: linear-gradient(170deg, #FFFFFF, #F5F8FF); border: 1px solid var(--grey-100); position: relative; overflow: hidden; } .pieza::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--blue), var(--amber)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); } .pieza.visible::before { transform: scaleX(1); } .pieza:nth-child(2).visible::before { transition-delay: 0.12s; } .pieza:nth-child(3).visible::before { transition-delay: 0.24s; } .pieza:nth-child(4).visible::before { transition-delay: 0.36s; } .pieza-n { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; color: rgba(46,91,255,0.18); line-height: 1; display: block; margin-bottom: 0.9rem; } .pieza h3 { font-size: 1.3rem; margin-bottom: 0.6rem; } .pieza p { font-size: 0.9rem; line-height: 1.6; color: var(--grey-600); } /* ---------- FAQ ---------- */ .faq-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .faq-list { border-top: 1px solid rgba(10,14,39,0.12); } .faq { border-bottom: 1px solid rgba(10,14,39,0.12); } .faq summary { list-style: none; cursor: pointer; padding: 1.35rem 0; display: flex; align-items: center; gap: 1.5rem; font-size: clamp(1rem, 1.5vw, 1.12rem); font-weight: 700; letter-spacing: -0.015em; transition: color 0.25s; } .faq summary::-webkit-details-marker { display: none; } .faq summary span { flex: 1; } .faq summary:hover { color: var(--blue); } .faq summary i { position: relative; width: 15px; height: 15px; flex: none; } .faq summary i::before, .faq summary i::after { content: ""; position: absolute; background: var(--blue); border-radius: 2px; transition: transform 0.3s var(--ease); } .faq summary i::before { left: 0; top: 6.5px; width: 15px; height: 2px; } .faq summary i::after { left: 6.5px; top: 0; width: 2px; height: 15px; } .faq[open] summary i::after { transform: scaleY(0); } .faq[open] summary { color: var(--blue); } .faq p { padding: 0 0 1.5rem; font-size: 0.95rem; line-height: 1.7; color: var(--grey-600); max-width: 56ch; } /* ---------- CTA en 3 pasos ---------- */ .pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; text-align: left; } .paso { padding: 1.75rem 1.5rem; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); } .paso-n { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; color: var(--amber); display: block; margin-bottom: 1rem; } .paso h3 { font-size: 1.14rem; margin-bottom: 0.5rem; color: #fff; } .paso p { font-size: 0.9rem; line-height: 1.6; color: var(--grey-400); } .cta-band .pasos + .btn { margin-top: 3rem; } @media (max-width: 1024px) { .cases { grid-template-columns: repeat(2, 1fr); } .piezas { grid-template-columns: repeat(2, 1fr); } .faq-wrap { grid-template-columns: 1fr; } .pasos { grid-template-columns: 1fr; } } @media (max-width: 720px) { .hero-l { padding: 8rem 0 3.5rem; } .hero-l .display { max-width: none; font-size: clamp(1.95rem, 8.4vw, 2.7rem); } .hero-l-ctas { width: 100%; } .hero-l-ctas .btn { width: 100%; justify-content: center; } .trust { margin-top: 2.75rem; flex-direction: column; gap: 0.9rem; } .trust p { text-align: center; max-width: none; font-size: 0.84rem; } .cases { grid-template-columns: 1fr; } .piezas { grid-template-columns: 1fr; } .case, .pieza { padding: 1.5rem 1.35rem; } } /* ---------- Manifiesto: más recorrido para poder leer ---------- */ /* ---------- Servicios destacados ---------- */ .serv-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3.25rem; } .serv-big { display: block; padding: 2.25rem 2rem 2rem; border-radius: 20px; background: linear-gradient(165deg, #FFFFFF, #F4F7FF); border: 1px solid var(--grey-100); box-shadow: 0 10px 34px rgba(10,14,39,0.06); color: var(--ink); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); } .serv-big:hover { transform: translateY(-6px); border-color: rgba(46,91,255,0.45); box-shadow: 0 26px 56px rgba(10,14,39,0.13); } .serv-big.dark { background: radial-gradient(ellipse 100% 90% at 15% 0%, #16205C 0%, #0C1233 55%, var(--navy) 100%); border-color: rgba(255,255,255,0.12); color: #fff; } .serv-big.dark:hover { border-color: rgba(255,154,31,0.5); } .serv-plats { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; } .plat { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.34rem 0.7rem; border-radius: 100px; } .plat.meta { background: rgba(24,119,242,0.12); color: #1877F2; } .plat.goog { background: rgba(52,168,83,0.12); color: #1E8E3E; } .plat.tikt { background: rgba(254,44,85,0.1); color: #D91E43; } .plat.wa { background: rgba(37,211,102,0.16); color: #4ADE80; } .plat.ai { background: rgba(255,154,31,0.18); color: var(--amber); } .serv-big h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.03em; margin-bottom: 0.9rem; } .serv-big > p { font-size: 0.98rem; line-height: 1.65; color: var(--grey-600); } .serv-big.dark > p { color: var(--grey-400); } .serv-list { margin-top: 1.5rem; display: grid; gap: 0.55rem; } .serv-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.5; color: var(--grey-600); } .serv-big.dark .serv-list li { color: var(--grey-400); } .serv-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); } .serv-big.dark .serv-list li::before { background: var(--amber); } .serv-go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; font-size: 0.9rem; font-weight: 700; color: var(--blue); } .serv-big.dark .serv-go { color: var(--amber); } .serv-big:hover .serv-go .arrow { transform: translateX(5px); } .serv-go .arrow { transition: transform 0.3s var(--ease); } .serv-rest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; } .serv-min { display: block; padding: 1.5rem 1.4rem; border-radius: 14px; background: var(--white); border: 1px solid var(--grey-100); transition: all 0.3s var(--ease); } .serv-min:hover { border-color: rgba(46,91,255,0.4); transform: translateY(-4px); } .serv-min b { display: block; font-size: 1.02rem; margin-bottom: 0.35rem; } .serv-min span { font-size: 0.86rem; line-height: 1.55; color: var(--grey-600); } /* ---------- Industrias ---------- */ .inds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 3.25rem; } .ind { padding: 1.5rem 1.25rem; border-radius: 14px; background: var(--white); border: 1px solid var(--grey-100); transition: all 0.3s var(--ease); } .ind:hover { transform: translateY(-5px); border-color: rgba(46,91,255,0.4); box-shadow: 0 18px 40px rgba(10,14,39,0.1); } .ind-n { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; color: var(--amber-ink); margin-bottom: 0.8rem; font-variant-numeric: tabular-nums; } .ind b { display: block; font-size: 0.98rem; line-height: 1.25; margin-bottom: 0.35rem; letter-spacing: -0.02em; } .ind span { font-size: 0.8rem; line-height: 1.5; color: var(--grey-400); } @media (max-width: 1024px) { .serv-hero { grid-template-columns: 1fr; } .serv-rest { grid-template-columns: 1fr; } .inds { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .serv-big { padding: 1.75rem 1.4rem; } .inds { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .ind { padding: 1.15rem 1rem; } } /* ============================================================ LAB — software, IA y automatización · tratamiento premium ============================================================ */ .lab { position: relative; overflow: hidden; background: #05070F; color: #fff; padding: clamp(6rem, 15vh, 11rem) 0 clamp(5rem, 12vh, 8rem); } .lab-grid { position: absolute; inset: 0; opacity: 0.5; background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%); } .lab-glow { position: absolute; inset: 0; pointer-events: none; } .lab-glow::before, .lab-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(130px); } .lab-glow::before { width: 560px; height: 560px; background: rgba(46,91,255,0.22); top: -18%; left: -8%; animation: drift1 20s ease-in-out infinite alternate; } .lab-glow::after { width: 420px; height: 420px; background: rgba(255,154,31,0.14); bottom: -14%; right: -6%; animation: drift2 26s ease-in-out infinite alternate; } .lab-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem, 7vw, 6rem); align-items: start; } .lab-head { position: sticky; top: 8rem; } .lab-eyebrow { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--amber); padding-bottom: 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.14); margin-bottom: 2rem; min-width: 8rem; } .lab-title { font-size: clamp(2rem, 3.9vw, 3.35rem); font-weight: 700; letter-spacing: -0.032em; line-height: 1.1; } .lab-title .serif-accent { color: var(--amber); font-weight: 400; } .lab-sub { margin-top: 1.75rem; max-width: 34ch; font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.6); } .lab-cta { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 2.25rem; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: #fff; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(255,255,255,0.3); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .lab-cta:hover { color: var(--amber); border-color: var(--amber); } .lab-cta .arrow { transition: transform 0.3s var(--ease); } .lab-cta:hover .arrow { transform: translateX(5px); } .lab-list { border-top: 1px solid rgba(255,255,255,0.1); } .cap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.75rem; padding: 1.85rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; position: relative; transition: padding 0.4s var(--ease); } .cap::before { content: ""; position: absolute; left: -1.5rem; right: -1.5rem; top: 0; bottom: 0; z-index: -1; border-radius: 12px; opacity: 0; background: linear-gradient(90deg, rgba(46,91,255,0.14), transparent 70%); transition: opacity 0.4s var(--ease); } .cap:hover { padding-left: 1.1rem; } .cap:hover::before { opacity: 1; } .cap-n { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; color: rgba(255,255,255,0.32); font-variant-numeric: tabular-nums; transition: color 0.3s var(--ease); } .cap:hover .cap-n { color: var(--amber); } .cap-txt b { display: block; font-size: clamp(1.02rem, 1.5vw, 1.22rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.4rem; } .cap-txt span { display: block; font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.52); max-width: 46ch; } .cap-go { width: 19px; height: 19px; stroke: rgba(255,255,255,0.28); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease), stroke 0.3s var(--ease); } .cap:hover .cap-go { stroke: var(--amber); transform: translateX(6px); } .lab-quote { position: relative; z-index: 1; margin: clamp(4.5rem, 10vh, 7rem) auto 0; max-width: 22ch; text-align: center; font-size: clamp(1.7rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.18; } .lab-quote .serif-accent { color: var(--amber); font-weight: 400; } .lab-quote::before { content: ""; display: block; width: 34px; height: 1px; background: var(--amber); margin: 0 auto 2.25rem; } @media (max-width: 1024px) { .lab-inner { grid-template-columns: 1fr; gap: 3rem; } .lab-head { position: static; } .lab-sub { max-width: 52ch; } } @media (max-width: 720px) { .lab { padding: 4.5rem 0 4rem; } .lab-eyebrow { margin-bottom: 1.5rem; padding-bottom: 1rem; } .cap { grid-template-columns: auto 1fr; gap: 1rem; padding: 1.4rem 0; } .cap-go { display: none; } .cap:hover { padding-left: 0; } .lab-quote { max-width: none; } } /* Nota centrada en la tercera fila de industrias */ .ind-note { grid-column: span 3; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1.25rem; border-radius: 14px; text-align: center; border: 1px dashed rgba(46,91,255,0.32); background: rgba(46,91,255,0.045); } .ind-note p { font-size: 0.88rem; line-height: 1.65; color: var(--grey-600); max-width: 40ch; } @media (max-width: 1024px) { .ind-note { grid-column: span 3; } } @media (max-width: 720px) { .ind-note { grid-column: span 2; } .ind-note p { font-size: 0.82rem; } } /* ---------- Promo PPC (banda simple oscura) ---------- */ .promo { position: relative; overflow: hidden; background: #05070F; color: #fff; padding: clamp(3.5rem, 9vh, 6rem) 0; } .promo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 120% at 88% 10%, rgba(120,170,255,0.30), transparent 62%), radial-gradient(ellipse 60% 100% at 100% 90%, rgba(46,91,255,0.22), transparent 60%); } .promo-arc { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 640px; height: 640px; border-radius: 50%; border: 90px solid rgba(255,255,255,0.035); filter: blur(2px); } .promo-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.85fr; gap: 3rem; align-items: center; } .promo-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.85); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 1.6rem; } .promo-copy h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.16; max-width: 20ch; } .promo-copy h2 .accent { color: var(--amber); } .promo-rule { display: block; width: 110px; height: 1px; background: rgba(255,255,255,0.35); margin: 1.5rem 0; } .promo-copy p { font-size: 0.98rem; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 52ch; } .promo-btn { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.9rem; padding: 0.8rem 1.5rem; border-radius: 100px; font-size: 0.88rem; font-weight: 600; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); transition: all 0.3s var(--ease); } .promo-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); } .promo-btn .arrow { transition: transform 0.3s var(--ease); } .promo-btn:hover .arrow { transform: translateX(4px); } .promo-logos { position: relative; height: 300px; } .lg { position: absolute; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.5rem; border-radius: 100px; font-size: 1.02rem; font-weight: 600; white-space: nowrap; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(14px); box-shadow: 0 18px 45px rgba(0,0,0,0.35); animation: floatY 7s ease-in-out infinite; } .lg svg { width: 20px; height: 20px; fill: currentColor; } .lg-1 { top: 4%; right: 2%; color: #fff; animation-delay: 0s; } .lg-2 { top: 42%; right: 26%; color: #cfe0ff; animation-delay: 1.1s; } .lg-3 { top: 76%; right: 6%; color: #ffd9e2; animation-delay: 2.2s; } @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } @media (max-width: 900px) { .promo-inner { grid-template-columns: 1fr; gap: 2.25rem; } .promo-logos { height: auto; display: flex; flex-wrap: wrap; gap: 0.6rem; } .lg { position: static; animation: none; font-size: 0.88rem; padding: 0.6rem 1rem; } .promo-arc { display: none; } } @media (max-width: 720px) { .promo-copy h2 { max-width: none; } } /* ---------- Manifiesto: recorrido más corto ---------- */ /* ---------- Industrias: la nota nunca deja huérfana la última tarjeta ---------- */ @media (max-width: 1024px) { .ind-note { order: 1; grid-column: 1 / -1; } } @media (max-width: 720px) { .ind-note { order: 1; grid-column: 1 / -1; } } /* ---------- Logos de plataforma ---------- */ .brand { flex: none; display: block; } .lg .brand { width: 30px; height: 30px; } .lg .brand[viewBox^="0 0 36"] { width: 38px; } .lg { font-size: 1.18rem; padding: 1rem 1.9rem; gap: 0.85rem; } .lg b { font-weight: 600; letter-spacing: -0.01em; } .lg-1 { top: 2%; right: 0%; } .lg-2 { top: 40%; right: 27%; } .lg-3 { top: 78%; right: 4%; } .ad-plat .brand { width: 13px; height: 13px; } .ad-plat .brand[viewBox^="0 0 36"] { width: 17px; } .plat { display: inline-flex; align-items: center; gap: 0.4rem; } .plat .brand { width: 15px; height: 15px; } .plat .brand[viewBox^="0 0 36"] { width: 19px; } @media (max-width: 900px) { .lg { font-size: 0.95rem; padding: 0.7rem 1.15rem; gap: 0.6rem; } .lg .brand { width: 22px; height: 22px; } .lg .brand[viewBox^="0 0 36"] { width: 28px; } } /* Industrias sin descripción: más aire, nombre más grande */ .ind { display: flex; flex-direction: column; justify-content: space-between; min-height: 140px; padding: 1.35rem 1.25rem; } .ind b { font-size: 1.06rem; line-height: 1.2; margin-bottom: 0; } .ind-n { margin-bottom: 1.75rem; } @media (max-width: 720px) { .ind { min-height: 108px; } .ind b { font-size: 0.95rem; } .ind-n { margin-bottom: 1.1rem; } } /* Servicios sin párrafo: los bullets suben */ .serv-list { margin-top: 0; } /* ---------- Logos de clientes ---------- */ .trust { flex-direction: column; gap: 1.25rem; } .tr-logos { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; } .tr-logos img { height: 30px; width: auto; max-width: 130px; object-fit: contain; opacity: 0.72; filter: saturate(0.9); transition: opacity 0.3s var(--ease), filter 0.3s var(--ease); } .tr-logos img:hover { opacity: 1; filter: none; } /* Vilsa es cian claro: sobre fondo claro necesita un punto más de peso */ .tr-logos img[alt="Vilsa"] { filter: saturate(1.15) brightness(0.82); } .trust p { text-align: center; max-width: 46ch; } /* logo dentro de la tarjeta de anuncio */ .ad-av { background: #fff; border: 1px solid var(--grey-100); border-radius: 8px; overflow: hidden; padding: 3px; } .ad-av img { width: 100%; height: 100%; object-fit: contain; display: block; } .ad-card.meta .ad-av img[alt="Vilsa"] { filter: brightness(0.75) saturate(1.2); } @media (max-width: 720px) { .tr-logos { gap: 1.25rem 1.75rem; } .tr-logos img { height: 24px; max-width: 96px; } } /* alturas por logo para que se vean del mismo peso óptico */ .tr-logos img[alt="GSM Financial Group"] { height: 36px; } .tr-logos img[alt="HEMAQM"] { height: 34px; } .tr-logos img[alt="Vilsa"] { filter: none; } @media (max-width: 720px) { .tr-logos img[alt="GSM Financial Group"] { height: 28px; } .tr-logos img[alt="HEMAQM"] { height: 27px; } } .ad-av-txt { background: var(--c, #2E5BFF); border: 0; color: #fff; display: grid; place-items: center; padding: 0; } /* Vilsa: marca denominativa provisional hasta tener el archivo del logo */ .tr-word { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); opacity: 0.62; line-height: 1; transition: opacity 0.3s var(--ease); } .tr-word:hover { opacity: 1; } @media (max-width: 720px) { .tr-word { font-size: 1.05rem; } } .tr-logos img[alt="Vilsa"] { height: 30px; max-width: 116px; filter: saturate(0.9); } .ad-card.meta .ad-av img[alt="Vilsa"] { filter: none; } @media (max-width: 720px) { .tr-logos img[alt="Vilsa"] { height: 24px; max-width: 92px; } } /* ---------- Banda de clientes (fuera del hero) ---------- */ .logos-band { background: var(--white); border-bottom: 1px solid var(--grey-100); padding: 1.9rem 0; } .logos-band-inner { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; } .lb-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-400); white-space: nowrap; } .logos-band .tr-logos { gap: clamp(1.5rem, 4vw, 3rem); } .logos-band .tr-logos img { opacity: 0.6; } .logos-band .tr-logos img:hover { opacity: 1; } /* ---------- Hero simplificado ---------- */ .hero-l { padding: clamp(8rem, 17vh, 11rem) 0 clamp(3.5rem, 8vh, 5.5rem); } .hero-l-ctas { margin-top: 2.25rem; } /* ---------- Móvil ---------- */ @media (max-width: 720px) { .hero-l { padding: 7rem 0 2.75rem; } .hero-l-sub { margin-top: 0.9rem; font-size: 0.92rem; } .hero-l-ctas { margin-top: 1.75rem; gap: 0.7rem; } .hero-l-ctas .btn { padding: 0.85rem 1.5rem; font-size: 0.9rem; } /* el chip se cortaba: fuera la etiqueta y más ancho para el texto rotativo */ .logos-band { padding: 1.35rem 0; } .logos-band-inner { gap: 0.9rem; } .lb-label { font-size: 0.62rem; letter-spacing: 0.14em; } .logos-band .tr-logos { gap: 1.35rem; } .logos-band .tr-logos img { height: 21px; max-width: 84px; } .logos-band .tr-logos img[alt="GSM Financial Group"] { height: 25px; } .logos-band .tr-logos img[alt="HEMAQM"] { height: 24px; } .logos-band .tr-logos img[alt="Vilsa"] { height: 21px; max-width: 80px; } } /* ---------- Hero de páginas internas: mismo tratamiento claro que el home ---------- */ .page-hero-l { background: linear-gradient(175deg, #FFFFFF 0%, #F3F6FF 46%, #E9EFFD 100%); padding: clamp(8.5rem, 18vh, 11.5rem) 0 clamp(3.5rem, 8vh, 5.5rem); } .page-hero-l .hero-bg { display: none; } .page-hero-l .container { position: relative; z-index: 1; } .page-hero-l .display { max-width: 17ch; font-size: clamp(1.95rem, 3.9vw, 3.2rem); } .page-hero-l .lead { max-width: 52ch; margin-top: 1.5rem; } @media (max-width: 720px) { .page-hero-l { padding: 7rem 0 2.75rem; } .page-hero-l .display { max-width: none; font-size: clamp(1.95rem, 8.4vw, 2.7rem); } } /* ---------- Fotografía (v45) ---------- .ph lleva un degradado de marca de fondo: si la imagen no carga, el bloque sigue viéndose como un elemento de diseño, no como algo roto. */ .ph { position: relative; overflow: hidden; border-radius: 14px; margin: 0; background: linear-gradient(135deg, #0F1740 0%, #24409B 55%, #2E5BFF 100%); isolation: isolate; } .ph::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,14,39,0) 45%, rgba(10,14,39,0.34) 100%); } .ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease), filter 0.5s var(--ease); } .ph-wide { aspect-ratio: 16 / 9; } .ph-sq { aspect-ratio: 1 / 1; border-radius: 11px; } /* Fotos dentro de las tarjetas de servicio */ .serv-big { padding-top: 0; overflow: hidden; } .serv-big .ph-wide { border-radius: 0; margin: 0 -2rem 1.75rem; aspect-ratio: 16 / 7.6; } .serv-big:hover .ph img { transform: scale(1.045); } .serv-big.dark .ph { background: linear-gradient(135deg, #05070F 0%, #16205C 60%, #B45309 100%); } .serv-big.dark .ph img { filter: none; } .serv-big.dark:hover .ph img { filter: none; } .serv-min { padding: 0.9rem 0.9rem 1.35rem; overflow: hidden; } .serv-min .ph-sq { margin-bottom: 1.05rem; } .serv-min-t { display: block; padding: 0 0.5rem; } .serv-min:hover .ph img { transform: scale(1.05); } /* Banda visual a lo ancho */ .band { padding: 0; background: var(--white); } .band-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .band .ph { border-radius: 0; aspect-ratio: 4 / 3.4; transition: flex 0.4s var(--ease); } .band .ph img { filter: grayscale(1) contrast(1.05) brightness(0.95); } .band .ph:hover img { filter: grayscale(0) saturate(1) contrast(1.03); transform: scale(1.04); } @media (max-width: 900px) { .band-row { grid-template-columns: repeat(2, 1fr); } .band .ph { aspect-ratio: 4 / 3; } } @media (max-width: 720px) { .serv-big .ph-wide { margin: 0 -1.4rem 1.4rem; aspect-ratio: 16 / 8.6; } .serv-big { padding-top: 0; } .serv-min { padding: 0.75rem 0.75rem 1.2rem; } .band .ph img { filter: grayscale(0.25) contrast(1.03); } } /* Fotos en páginas internas */ .ph-band { padding: 0 0 clamp(2rem, 5vh, 3.25rem); background: var(--white); } .ph-band .ph-wide { aspect-ratio: 16 / 9; max-height: 460px; border-radius: 18px; } .card { overflow: hidden; } .card .ph-wide { aspect-ratio: 16 / 9; margin-bottom: 1.35rem; } .card:hover .ph img { transform: scale(1.04); } @media (max-width: 720px) { .ph-band .ph-wide { aspect-ratio: 16 / 9; border-radius: 14px; } } /* Fotos: alturas contenidas en tablet */ @media (max-width: 900px) { .serv-min .ph-sq { max-height: 300px; } .band .ph { max-height: 260px; } } /* ---------- Cómo empezamos (página de servicios) ---------- */ .diag-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .diag-txt .h-lg { margin-bottom: 1.25rem; } .diag-txt .lead { max-width: 46ch; margin-bottom: 2rem; } .diag-card { background: var(--white); border: 1px solid var(--grey-100); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 14px 44px rgba(10,14,39,0.07); } .diag-row { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.15rem 0; border-top: 1px solid var(--grey-100); } .diag-row:first-child { border-top: 0; padding-top: 0; } .diag-n { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--blue); padding-top: 0.28rem; } .diag-t b { display: block; font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: 0.3rem; } .diag-t span { display: block; font-size: 0.9rem; line-height: 1.6; color: var(--grey-600); } .diag-foot { margin-top: 1.35rem; padding-top: 1.2rem; border-top: 1px solid var(--grey-100); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--grey-400); } @media (max-width: 900px) { .diag-grid { grid-template-columns: 1fr; gap: 2.25rem; } .diag-txt .lead { max-width: none; } } /* ---------- Móvil: menos alto, más legible (v47) ---------- */ @media (max-width: 720px) { /* Tarjetas menores en horizontal: foto a la izquierda, texto a la derecha */ .serv-min { display: grid; grid-template-columns: 38% 1fr; gap: 0.95rem; align-items: center; padding: 0.7rem; } .serv-min .ph-sq { margin-bottom: 0; aspect-ratio: 1 / 1; max-height: none; } .serv-min-t { padding: 0 0.35rem 0 0; } .serv-min b { font-size: 0.98rem; } .serv-min span { font-size: 0.82rem; } .serv-rest { gap: 0.85rem; margin-top: 0.85rem; } /* Paneles del manifiesto apilados: separación clara entre uno y otro */ } /* ---------- Industrias en carrusel (v48) ---------- */ .inds-wrap { margin-top: 3.25rem; } .inds-rail { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; } .inds-rail::-webkit-scrollbar { display: none; } .inds-rail .ind { flex: 0 0 calc((100% - 2rem) / 3); scroll-snap-align: start; min-height: 112px; margin: 0; padding: 1.25rem 1.25rem 1.35rem; } .inds-rail .ind-n { margin-bottom: 1.15rem; } .inds-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; } .inds-dots { display: flex; gap: 0.45rem; } .inds-dots i { display: block; width: 26px; height: 3px; border-radius: 2px; background: rgba(10,14,39,0.14); transition: background 0.3s var(--ease); } .inds-dots i.on { background: var(--blue); } .inds-nav { display: flex; gap: 0.5rem; } .inds-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1px solid var(--grey-100); cursor: pointer; transition: all 0.3s var(--ease); color: var(--ink); } .inds-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .inds-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); } .inds-btn[disabled] { opacity: 0.32; cursor: default; transform: none; border-color: var(--grey-100); color: var(--ink); } .inds-wrap .ind-note { grid-column: auto; margin-top: 1.5rem; } @media (max-width: 900px) { .inds-rail .ind { flex: 0 0 calc((100% - 1rem) / 2); } } @media (max-width: 620px) { .inds-rail { gap: 0.65rem; } .inds-rail .ind { flex: 0 0 calc((100% - 0.65rem) / 2); min-height: 112px; padding: 1.1rem 0.9rem; } .inds-rail .ind b { font-size: 0.9rem; } .inds-ctrl { margin-top: 1.15rem; } .inds-btn { width: 40px; height: 40px; } .inds-dots i { width: 16px; } .inds-dots { gap: 0.35rem; } } /* ---------- Industrias: icono de fondo y cabecera equilibrada (v51) ---------- */ .sec-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: end; } .sec-split .lead { margin: 0 0 0.5rem; max-width: 34ch; } @media (max-width: 860px) { .sec-split { grid-template-columns: 1fr; gap: 1.1rem; align-items: start; } .sec-split .lead { max-width: none; margin-bottom: 0; } } .inds-rail .ind { position: relative; overflow: hidden; isolation: isolate; } .inds-rail .ind::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, rgba(46,91,255,0.07) 0%, rgba(46,91,255,0) 58%); opacity: 0; transition: opacity 0.35s var(--ease); } .inds-rail .ind:hover::before { opacity: 1; } .ind-ico { position: absolute; right: -14px; bottom: -16px; width: 104px; height: 104px; fill: none; stroke: var(--navy); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.09; z-index: -1; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); } .inds-rail .ind:hover .ind-ico { opacity: 0.18; stroke: var(--blue); transform: translate(-4px, -4px) scale(1.04); } .inds-rail .ind b { position: relative; max-width: 74%; } /* El bloque fijado ya reparte su propio aire: sin doble margen */ @media (max-width: 620px) { .ind-ico { width: 78px; height: 78px; right: -10px; bottom: -12px; } } .inds-wrap { margin-top: 2.25rem; } .sec-split h2 { margin-bottom: 0; } .ind-ico { opacity: 0.11; } @media (max-width: 620px) { .ind-ico { width: 62px; height: 62px; right: -8px; bottom: -8px; opacity: 0.085; } .inds-rail .ind b { max-width: 88%; } } /* ---------- Manifiesto: paneles que se apilan (v52) ---------- Cada panel queda fijo con position:sticky y el siguiente lo cubre. Sin secuestro del scroll: la rueda del ratón se comporta como siempre. */ @media (min-width: 901px) { /* pequeño respiro al final para que el último panel no choque con la sección siguiente */ } /* Contador de panel, discreto, arriba a la derecha */ /* Costura entre paneles apilados: una línea fina marca dónde empieza el nuevo */ @media (min-width: 901px) { } /* ================= PASADA DE DENSIDAD (v53) ================= Mismo diseño, menos aire. La página bajaba demasiado. */ /* 1) Ritmo vertical general de las secciones */ section { padding: clamp(3.5rem, 9vh, 6.5rem) 0; } .cta-band { padding: clamp(4rem, 10vh, 7rem) 0; } .lab { padding: clamp(4rem, 10vh, 7.5rem) 0 clamp(3.5rem, 9vh, 6.5rem); } .promo { padding: clamp(2.75rem, 7vh, 4.5rem) 0; } .hero-l { padding: clamp(7rem, 14vh, 9rem) 0 clamp(2.5rem, 6vh, 4rem); } /* 2) El manifiesto: los paneles siguen ocupando la pantalla, pero se solapan antes, así el efecto de apilado cuesta un tercio menos de scroll. */ @media (min-width: 901px) { } @media (max-width: 900px) { } /* 3) Servicios más compactos */ .serv-hero { margin-top: 2.25rem; gap: 1.25rem; } .serv-rest { margin-top: 1.25rem; } .serv-big { padding-bottom: 1.6rem; } .serv-big .ph-wide { aspect-ratio: 16 / 6.6; margin-bottom: 1.4rem; } .serv-list { gap: 0.42rem; } .serv-go { margin-top: 1.25rem; } .ph-sq { aspect-ratio: 16 / 11; } /* 4) Ingeniería: filas más juntas */ .lab-head { margin-bottom: 2rem; } .cap { padding-top: 1.15rem; padding-bottom: 1.15rem; } /* 5) Resultados, FAQ y cierre */ .stats-grid { gap: 1.25rem; } .faq summary { padding: 1.15rem 0; } @media (max-width: 720px) { section { padding: 3rem 0; } .cta-band { padding: 3.25rem 0; } .lab { padding: 3.25rem 0 3rem; } .hero-l { padding: 6.25rem 0 2.25rem; } .serv-big { padding-bottom: 1.35rem; } .serv-big .ph-wide { aspect-ratio: 16 / 7.4; margin-bottom: 1.15rem; } .serv-big h3 { margin-bottom: 0.7rem; } .serv-list { margin-top: 1.1rem; } .site-footer { padding-top: 2.75rem; } } /* ---------- Densidad en móvil (v53) ---------- */ @media (max-width: 720px) { /* Resultados en dos columnas en vez de cuatro filas */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem 1.1rem; margin-top: 2rem; } .stat { padding-left: 1rem; } .stat-num { font-size: clamp(2rem, 9vw, 2.6rem); } .stat p { font-size: 0.82rem; margin-top: 0.5rem; } /* Los tres pasos: más juntos */ .pasos { margin-top: 1.75rem; gap: 0.85rem; } .paso { padding: 1.15rem 1.15rem; } .paso-n { margin-bottom: 0.6rem; } .paso h3 { font-size: 1.02rem; margin-bottom: 0.35rem; } .paso p { font-size: 0.85rem; } .cta-band .pasos + .btn { margin-top: 1.75rem; } /* Pie: las dos listas de enlaces, lado a lado */ .footer { padding: 2.75rem 0 1.5rem; } .footer-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1.25rem; margin-bottom: 2rem; } .footer-top > :first-child { grid-column: 1 / -1; } .footer h4 { margin-bottom: 0.8rem; } .footer ul li { margin-bottom: 0.5rem; } .footer-bottom { padding-top: 1.25rem; } /* Ingeniería: filas de capacidades más juntas */ .cap { padding-top: 0.95rem; padding-bottom: 0.95rem; } .lab-head { margin-bottom: 1.5rem; } .lab-cta { margin-top: 1.25rem; } /* Manifiesto: el visual de cada panel, más contenido */ } /* Últimos ajustes de densidad (v53) */ @media (max-width: 720px) { .lab-title { font-size: clamp(1.75rem, 7.6vw, 2.3rem); } .lab-sub { margin-top: 0.85rem; font-size: 0.92rem; } .sec-kicker { margin-bottom: 0.9rem; } .h-xl, .h-lg { line-height: 1.06; } .promo-inner, .promo .container { } .serv-big .ph-wide { aspect-ratio: 16 / 6.8; } .serv-plats { margin-bottom: 1rem; } } @media (min-width: 721px) { .sec-kicker { margin-bottom: 1.1rem; } } /* ================= LA FUGA REAL — compacta y premium (v54) ================= */ .leak { position: relative; overflow: hidden; color: #fff; background: radial-gradient(ellipse 120% 90% at 12% 0%, #16205C 0%, #0B1130 46%, #05070F 100%); padding: clamp(3.5rem, 9vh, 6rem) 0; } .leak-dots { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%); } .leak-glow { position: absolute; top: -22%; right: -12%; width: 58%; height: 78%; pointer-events: none; background: radial-gradient(circle, rgba(255,154,31,0.20) 0%, rgba(255,154,31,0) 66%); } .leak .container { position: relative; z-index: 2; } /* --- Fila principal --- */ .leak-hero { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; } .leak-kicker { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.9rem; } .leak-title { font-size: clamp(1.85rem, 4vw, 3.15rem); font-weight: 800; letter-spacing: -0.032em; line-height: 1.06; } .leak-title .accent { color: var(--amber); } .leak-sub { margin-top: 0.95rem; max-width: 40ch; font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.6; color: rgba(255,255,255,0.62); } .leak-metrics { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 1.6rem; } .leak-metrics > div { display: flex; flex-direction: column; } .leak-metrics b { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; } .leak-metrics span { margin-top: 0.4rem; font-size: 0.76rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.45); } /* --- Bandeja de entrada --- */ .lk-card { background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 1rem 1.1rem; backdrop-filter: blur(8px); box-shadow: 0 24px 60px rgba(0,0,0,0.35); } .lk-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.10); } .lk-top b { font-size: 0.88rem; } .lk-badge { background: #E5484D; color: #fff; font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px; } .lk-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; padding: 0.62rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .lk-row:last-child { border-bottom: 0; padding-bottom: 0; } .lk-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(46,91,255,0.22); color: #A9BEFF; font-size: 0.66rem; font-weight: 800; } .lk-txt { min-width: 0; } .lk-txt b { display: block; font-size: 0.8rem; } .lk-txt span { display: block; font-size: 0.76rem; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lk-row em { font-style: normal; font-size: 0.7rem; color: var(--amber); opacity: 0.85; white-space: nowrap; } /* --- Las tres tarjetas --- */ .leak-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(1.75rem, 4vh, 2.75rem); } .leak-card { display: flex; flex-direction: column; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; padding: 1.25rem 1.25rem 1.1rem; transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s var(--ease); } .leak-card:hover { border-color: rgba(255,154,31,0.42); transform: translateY(-4px); background: rgba(255,255,255,0.06); } .leak-card-h { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } .leak-n { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; color: var(--amber); } .leak-tag { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.38); } .leak-h { display: block; font-size: clamp(1.02rem, 1.4vw, 1.22rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; } .leak-h .accent { color: var(--amber); } .leak-card > p { margin-top: 0.55rem; font-size: 0.84rem; line-height: 1.55; color: rgba(255,255,255,0.55); } .leak-mini { margin-top: auto; padding-top: 1rem; } /* mini: chat */ .lk-chat { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; } .lk-b { font-size: 0.76rem; line-height: 1.4; padding: 0.5rem 0.7rem; border-radius: 12px; max-width: 92%; } .lk-b.in { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); border-bottom-left-radius: 4px; } .lk-b.out { background: rgba(37,211,102,0.18); color: #A8EEC5; align-self: flex-end; border-bottom-right-radius: 4px; } .lk-ia { align-self: flex-end; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; color: #6E8BFF; } /* mini: cadena */ .lk-chain { display: grid; gap: 0.42rem; } .lk-chain span { display: flex; align-items: center; gap: 0.55rem; font-size: 0.76rem; color: rgba(255,255,255,0.66); } .lk-chain i { flex: none; width: 15px; height: 15px; border-radius: 50%; background: rgba(37,211,102,0.20); position: relative; } .lk-chain i::after { content: ""; position: absolute; left: 4px; top: 5px; width: 6px; height: 3px; border-left: 1.6px solid #48D68A; border-bottom: 1.6px solid #48D68A; transform: rotate(-45deg); } .lk-chain em { font-style: normal; } /* mini: gráfico */ .lk-bars { display: flex; align-items: flex-end; gap: 2px; height: 62px; } .lk-bars i { flex: 1; height: var(--h); background: rgba(255,255,255,0.22); border-radius: 2px 2px 0 0; } .lk-bars i.am { background: var(--amber); } .lk-axis { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.6rem; color: rgba(255,255,255,0.32); } .lk-note { margin-top: 0.5rem; font-size: 0.72rem; line-height: 1.45; color: rgba(255,255,255,0.42); } .lk-note span { color: var(--amber); font-weight: 700; } @media (max-width: 1000px) { .leak-steps { grid-template-columns: 1fr 1fr; } .leak-steps > :last-child { grid-column: 1 / -1; } } @media (max-width: 860px) { .leak-hero { grid-template-columns: 1fr; gap: 1.5rem; } .leak-sub { max-width: none; } } @media (max-width: 640px) { .leak-steps { grid-template-columns: 1fr; gap: 0.85rem; } .leak-steps > :last-child { grid-column: auto; } .leak-metrics { gap: 1.1rem; } .leak-metrics b { font-size: 1.45rem; } .leak-card { padding: 1.1rem; } } @media (max-width: 640px) { .leak { padding: 3rem 0; } .leak-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.25rem; } .leak-metrics b { font-size: 1.3rem; } .leak-metrics span { font-size: 0.68rem; margin-top: 0.3rem; } .leak-sub { margin-top: 0.75rem; font-size: 0.9rem; } .leak-hero { gap: 1.25rem; } .lk-card { padding: 0.85rem 0.95rem; } .lk-row { padding: 0.5rem 0; } .leak-card { padding: 1rem; } .leak-card > p { font-size: 0.8rem; margin-top: 0.45rem; } .leak-mini { padding-top: 0.8rem; } .lk-bars { height: 52px; } } /* ---------- Bandeja → asistente: dos diapositivas (v55) ---------- */ .lk-stage { display: grid; } .lk-slide { grid-area: 1 / 1; opacity: 0; transform: translateX(18px) scale(0.985); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; } .lk-slide.is-on { opacity: 1; transform: none; pointer-events: auto; } .lk-slide.is-out { opacity: 0; transform: translateX(-18px) scale(0.985); } .lk-foot { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.74rem; line-height: 1.45; } .lk-foot-bad { color: rgba(255,255,255,0.40); } .lk-foot-ok { color: #8FE9B6; display: flex; align-items: center; gap: 0.5rem; } .lk-foot-ok i { flex: none; width: 15px; height: 15px; border-radius: 50%; background: rgba(37,211,102,0.22); position: relative; } .lk-foot-ok i::after { content: ""; position: absolute; left: 4px; top: 5px; width: 6px; height: 3px; border-left: 1.6px solid #48D68A; border-bottom: 1.6px solid #48D68A; transform: rotate(-45deg); } /* Cabecera del asistente */ .lk-top-ia { display: flex; align-items: center; gap: 0.65rem; } .lk-ia-av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(37,211,102,0.18); display: grid; place-items: center; } .lk-ia-av svg { width: 17px; height: 17px; fill: none; stroke: #48D68A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lk-ia-name b { display: block; font-size: 0.82rem; } .lk-ia-name em { display: block; font-style: normal; font-size: 0.68rem; color: #48D68A; } /* Conversación */ .lk-conv { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; padding-top: 0.85rem; } .lk-msg { font-size: 0.78rem; line-height: 1.45; padding: 0.55rem 0.75rem; border-radius: 13px; max-width: 88%; } .lk-msg.in { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); border-bottom-left-radius: 4px; } .lk-msg.in b { display: block; font-size: 0.68rem; color: #A9BEFF; margin-bottom: 0.15rem; } .lk-msg.out { background: rgba(37,211,102,0.17); color: #B4F0CE; align-self: flex-end; border-bottom-right-radius: 4px; } /* Puntos de "escribiendo" */ .lk-dots { display: inline-flex; gap: 4px; padding: 0.55rem 0.75rem; border-radius: 13px; background: rgba(255,255,255,0.08); } .lk-dots i, .typing i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.65); animation: lkDot 1.15s infinite ease-in-out; } .lk-dots i:nth-child(2), .typing i:nth-child(2) { animation-delay: 0.16s; } .lk-dots i:nth-child(3), .typing i:nth-child(3) { animation-delay: 0.32s; } @keyframes lkDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Entrada escalonada de la conversación cuando la diapositiva se activa */ .lk-slide[data-lk="1"] .lk-conv > * { opacity: 0; transform: translateY(8px); } .lk-slide[data-lk="1"].is-on .lk-conv > * { animation: lkIn 0.45s var(--ease) forwards; } .lk-slide[data-lk="1"].is-on .lk-conv > :nth-child(1) { animation-delay: 0.10s; } .lk-slide[data-lk="1"].is-on .lk-conv > :nth-child(2) { animation-delay: 0.38s; } .lk-slide[data-lk="1"].is-on .lk-conv > :nth-child(3) { animation-delay: 0.80s; } .lk-slide[data-lk="1"].is-on .lk-conv > :nth-child(4) { animation-delay: 1.20s; } @keyframes lkIn { to { opacity: 1; transform: none; } } /* Puntitos de navegación */ .lk-nav { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.9rem; } .lk-nav button { width: 22px; height: 3px; border-radius: 2px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,0.18); transition: background 0.3s var(--ease); } .lk-nav button.is-on { background: var(--amber); } /* "escribiendo" dentro de la tarjeta de servicio oscura */ .typing { display: flex; align-items: center; gap: 5px; width: -moz-fit-content; width: fit-content; margin-top: 0.95rem; } .typing i { background: rgba(255,255,255,0.55); } .typing em { font-style: normal; font-size: 0.74rem; letter-spacing: 0.01em; color: rgba(255,255,255,0.45); margin-left: 0.35rem; } @media (prefers-reduced-motion: reduce) { .lk-dots i, .typing i { animation: none; opacity: 0.6; } .lk-slide[data-lk="1"] .lk-conv > * { opacity: 1; transform: none; } } .lk-top-ia { justify-content: flex-start; } /* ================= MÓVIL: ergonomía táctil y detalle fino (v56) ================= */ /* Nada de destello gris al tocar; el toque responde de inmediato */ a, button, summary, .btn, [role="button"] { -webkit-tap-highlight-color: rgba(46,91,255,0.14); touch-action: manipulation; } /* Hamburguesa: el dibujo sigue midiendo 28×20, pero el área que se toca es 44×44 */ .nav-burger { width: 44px; height: 44px; display: none; place-items: center; } .nav-burger span { left: 8px; width: 28px; } .nav-burger span:nth-child(1) { top: 12px; } .nav-burger span:nth-child(2) { top: 21px; } .nav-burger span:nth-child(3) { top: 30px; } .nav-burger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); } .nav-burger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); } @media (max-width: 900px) { .nav-burger { display: grid; } } @media (max-width: 900px) { .lang-toggle { min-height: 40px; display: inline-flex; align-items: center; } } @media (max-width: 720px) { /* Enlaces del pie: alto de toque cómodo sin abrir la lista */ .footer ul li { margin-bottom: 0.1rem; } .footer ul a { display: inline-flex; align-items: center; min-height: 40px; } /* Enlaces de texto y CTA secundarios */ .text-link, .lab-cta, .serv-go, .card .text-link { min-height: 44px; display: inline-flex; align-items: center; } .contact-direct a, .contacto-link a { min-height: 44px; display: inline-flex; align-items: center; } /* Micro-etiquetas: subir un punto para que se lean de verdad */ .plat { font-size: 0.72rem; padding: 0.4rem 0.7rem; } .ad-dom, .ad-label, .ad-live, .g-ad { font-size: 0.68rem; } .ad-btn, .g-url { font-size: 0.72rem; } .ad-metric { font-size: 0.72rem; } .flow-tag { font-size: 0.72rem; } /* Puntitos del carrusel de la fuga: más fáciles de tocar */ .lk-nav { gap: 0.65rem; margin-top: 0.7rem; } .lk-nav button { height: 24px; width: 34px; background: none; display: grid; place-items: center; } .lk-nav button::after { content: ""; width: 26px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.20); transition: background 0.3s var(--ease); } .lk-nav button.is-on::after { background: var(--amber); } /* Flechas del carrusel de industrias: ya son 40px, se les da aire */ .inds-ctrl { gap: 0.75rem; } /* El botón de WhatsApp no debe tapar los CTA del final */ .site-footer, .footer { padding-bottom: 5.5rem; } } /* Áreas seguras en iPhone con notch */ @supports (padding: max(0px)) { @media (max-width: 720px) { .container { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); } .wa-float { bottom: max(1.25rem, env(safe-area-inset-bottom)); } .nav-links.open { padding-bottom: env(safe-area-inset-bottom); } } } @media (max-width: 720px) { .aside-block a { min-height: 44px; display: inline-flex; align-items: center; } .lk-nav button { height: 44px; width: 40px; margin: -10px 0; } .lk-av, .lk-txt span, .lk-row em, .lk-ia-name em { font-size: 0.7rem; } .lk-av { font-size: 0.68rem; } .leak-tag, .leak-n { font-size: 0.7rem; } } /* ---------- Ilustración dentro del hero de las páginas internas (v56) ---------- */ .page-hero-l { position: relative; overflow: hidden; } .page-hero-l .container { position: relative; z-index: 2; } .page-hero-l .display { max-width: 17ch; font-size: clamp(1.95rem, 3.9vw, 3.2rem); } .page-hero-l .lead { max-width: 46ch; } .hero-viz { position: absolute; z-index: 1; pointer-events: none; right: clamp(1rem, 4vw, 4rem); top: 50%; transform: translateY(-44%); width: min(42%, 560px); } .hero-viz img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 30px 80px rgba(10,14,39,0.20); } @media (max-width: 900px) { .hero-viz { position: static; transform: none; width: 100%; margin: 1.75rem 0 0; } .hero-viz img { border-radius: 16px; box-shadow: 0 18px 46px rgba(10,14,39,0.16); } .page-hero-l { padding-bottom: 2.5rem; } .page-hero-l .lead { max-width: none; } } /* La franja suelta ya no se usa */ .ph-band { display: none; } /* Frases manifiesto: tamaño más contenido (v56) */ .statement { font-size: clamp(1.35rem, 2.4vw, 2.05rem); line-height: 1.32; max-width: 46ch; } @media (max-width: 720px) { .statement { font-size: clamp(1.15rem, 5vw, 1.4rem); } } /* ---------- Página de Servicios: los dos primeros pesan más (v56) ---------- */ .card-flag { display: inline-flex; align-items: center; gap: 0.4rem; } .card-flag > span { color: var(--amber-ink); font-weight: 800; } .card-hot { position: relative; border-color: rgba(255,154,31,0.42); background: linear-gradient(165deg, #FFFFFF 0%, #FFF7EC 100%); box-shadow: 0 18px 48px rgba(180,83,9,0.10); } .card-hot::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--amber), rgba(255,154,31,0)); } .card-hot:hover { border-color: rgba(255,154,31,0.75); box-shadow: 0 26px 60px rgba(180,83,9,0.16); } .card-hot .card-flag > span { color: var(--amber-ink); } .card-hot .result-tag { background: rgba(255,154,31,0.12); color: var(--amber-ink); } .card-hot .text-link { color: var(--amber-ink); } /* ---------- Lo que hacemos: simetría y remate (v56) ---------- */ .serv-hero { align-items: stretch; } .serv-big { display: flex; flex-direction: column; } .serv-big .serv-list { flex: 1 1 auto; } .serv-big .serv-go { margin-top: 1.4rem; } .serv-big .typing { margin-top: 0.85rem; } /* la línea viva de la tarjeta clara */ .serv-live i.serv-pulse { width: 7px; height: 7px; border-radius: 50%; background: #17B26A; animation: none; box-shadow: 0 0 0 0 rgba(23,178,106,0.5); animation: servPulse 2.2s infinite; } .serv-live em { color: var(--grey-400); } @keyframes servPulse { 0% { box-shadow: 0 0 0 0 rgba(23,178,106,0.45); } 70% { box-shadow: 0 0 0 7px rgba(23,178,106,0); } 100% { box-shadow: 0 0 0 0 rgba(23,178,106,0); } } /* El encabezado nunca queda pegado al header fijo */ html { scroll-padding-top: 92px; } section[id], .serv-hero, .leak, .inds-wrap { scroll-margin-top: 92px; } @media (prefers-reduced-motion: reduce) { .serv-live i.serv-pulse { animation: none; } } /* Tarjetas de la página de Servicios: misma altura y remate alineado */ .grid-2 { align-items: stretch; } .grid-2 .card { display: flex; flex-direction: column; } .grid-2 .card > p:last-child { margin-top: auto !important; padding-top: 1.25rem; } .grid-2 .card .result-tag { align-self: flex-start; } /* Cortes de línea equilibrados en los titulares (los navegadores que no lo soportan simplemente lo ignoran) */ .display, .h-xl, .h-lg, .leak-title, .lab-title, .pin-title, .statement { text-wrap: balance; } .page-hero-l .display { max-width: 19ch; } /* El header nunca puede ser más ancho que la pantalla (v57) */ .nav-inner { min-width: 0; flex-wrap: nowrap; } .nav-logo { min-width: 0; flex: 0 1 auto; } .nav-logo .logo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-right { flex: none; } @media (max-width: 400px) { .nav-logo img { height: 32px; } .nav-logo { font-size: 0.92rem; gap: 0.4rem; } .nav-right { gap: 0.7rem; } } @media (max-width: 340px) { .nav-logo .logo-text { font-size: 0.82rem; } .nav-logo img { height: 28px; } } /* ---------- Menú móvil: mismo punto de corte que la hamburguesa (v57) ---------- Antes el menú desplegable arrancaba en 720px pero la hamburguesa aparecía en 900px: entre 721 y 900 el botón estaba y no abría nada. */ @media (max-width: 900px) { .nav-links { position: fixed; inset: 0; background: var(--bg); flex-direction: column; justify-content: center; gap: 1.75rem; transform: translateX(100%); transition: transform 0.4s var(--ease), visibility 0.4s; z-index: 101; visibility: hidden; /* cerrado: fuera del cálculo de ancho */ } .nav-links.open { transform: translateX(0); visibility: visible; } .nav-links > a, .nav-item > a { font-size: 1.4rem; font-weight: 700; color: var(--ink); } .nav-item.has-dropdown { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; background: none; border: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .dropdown a { font-size: 1rem; font-weight: 500; color: var(--grey-600); padding: 0.35rem 0; } .nav-links .caret { display: none; } } /* El menú cerrado vive desplazado a la derecha; en emulación móvil eso ensancha el viewport de maquetación y el header se salía 21px. Con clip se corta sin crear contenedor de scroll (hidden sí lo crearía y rompería position:sticky). */ html { overflow-x: clip; } /* Estas reglas vivían solo bajo 720px: en tablet (721–900) la hamburguesa aparecía pero el backdrop-filter del header encerraba el menú en la barra. */ @media (max-width: 900px) { .nav.menu-open, .nav.menu-open.scrolled { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav.menu-open .lang-toggle, .nav.menu-open .nav-logo { position: relative; z-index: 102; } .nav.menu-open .nav-chat { display: inline-flex; position: fixed; z-index: 102; left: 50%; bottom: clamp(2.5rem, 9vh, 5rem); transform: translateX(-50%); font-size: 0.95rem; padding: 0.85rem 1.6rem; border-color: #25D366; color: #16994c; background: rgba(37, 211, 102, 0.08); } .nav-chat { display: none; } .nav-links { overflow-y: auto; padding: 5.5rem 1.25rem 7rem; justify-content: flex-start; } } /* Las tarjetas menores ya no llevan imagen: vuelven a bloque simple (v58) */ @media (max-width: 720px) { .serv-min { display: block; padding: 1.15rem 1.15rem 1.25rem; } .serv-min-t { padding: 0; } .serv-min b { font-size: 1rem; margin-bottom: 0.3rem; } .serv-min span { font-size: 0.85rem; } } @media (max-width: 720px) { /* el color vive en el ::after, no en el botón (que es solo área de toque) */ .lk-nav button, .lk-nav button.is-on { background: none; } } /* El menú cerrado ya no se aparca fuera de la pantalla (eso ensanchaba el viewport de maquetación en móvil). Ahora entra con fundido y escala. */ @media (max-width: 900px) { .nav-links { transform: none; opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), visibility 0.28s, clip-path 0.32s var(--ease); clip-path: inset(0 0 100% 0); } .nav-links.open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); } } /* ================= Chips de plataforma: iconos nítidos y alineados (v60) ================= Cada logo tiene su propia proporción; forzarlos todos a 15×15 aplastaba el de Meta (40×24) y dejaba el de TikTok borroso. Ahora cada uno va a su medida. */ .serv-plats { gap: 0.5rem; margin-bottom: 1.5rem; align-items: center; } .plat { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 30px; padding: 0 0.75rem; font-size: 0.68rem; letter-spacing: 0.09em; line-height: 1; } .plat .brand { flex: none; display: block; } .plat .brand[viewBox="0 0 40 24"] { width: 22px; height: 13px; } /* Meta */ .plat .brand[viewBox="0 0 48 48"] { width: 15px; height: 15px; } /* Google */ .plat .brand[viewBox="0 0 32 32"] { width: 14px; height: 14px; } /* TikTok */ /* sin logo (WhatsApp Business, IA): el mismo alto para que la fila quede recta */ .plat.wa, .plat.ai { padding: 0 0.85rem; } /* Los mismos ajustes en las maquetas de anuncios */ .ad-plat { display: inline-flex; align-items: center; gap: 0.4rem; } .ad-plat .brand[viewBox="0 0 40 24"] { width: 19px; height: 11px; } .ad-plat .brand[viewBox="0 0 48 48"] { width: 13px; height: 13px; } .ad-plat .brand[viewBox="0 0 32 32"] { width: 12px; height: 12px; } /* Y en la franja de logos de la sección de publicidad */ .lg { display: inline-flex; align-items: center; gap: 0.55rem; } .lg .brand[viewBox="0 0 40 24"] { width: 34px; height: 20px; } .lg .brand[viewBox="0 0 48 48"] { width: 24px; height: 24px; } .lg .brand[viewBox="0 0 32 32"] { width: 23px; height: 23px; } @media (max-width: 900px) { .lg .brand[viewBox="0 0 40 24"] { width: 28px; height: 17px; } .lg .brand[viewBox="0 0 48 48"] { width: 20px; height: 20px; } .lg .brand[viewBox="0 0 32 32"] { width: 19px; height: 19px; } } @media (max-width: 720px) { .plat { min-height: 28px; font-size: 0.7rem; padding: 0 0.7rem; gap: 0.45rem; } } /* ================= La barra superior, cuadriculada ================= */ .nav-inner { gap: 1.5rem; min-height: 72px; } .nav-links { gap: 2rem; } .nav-right { gap: 1rem; } .lang-toggle { line-height: 1; } .nav-logo img { display: block; } @media (max-width: 900px) { .nav-inner { min-height: 64px; gap: 0.85rem; } } /* Flecha del submenú: pequeña, alineada y con reacción al pasar el cursor */ .nav-links .caret { display: inline-block; font-size: 0.6em; line-height: 1; margin-left: 0.3em; opacity: 0.5; transform: translateY(-1px); transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); } .nav-item:hover .caret { opacity: 0.9; transform: translateY(1px); } /* Hamburguesa: tres trazos parejos, centrados en su área de 44×44 */ .nav-burger span { left: 11px; width: 22px; height: 2px; border-radius: 2px; } .nav-burger span:nth-child(1) { top: 15px; } .nav-burger span:nth-child(2) { top: 21px; } .nav-burger span:nth-child(3) { top: 27px; } .nav-burger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); } .nav-burger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* ================= Píldoras de plataforma: más aire (v61) ================= */ .serv-plats { gap: 0.6rem; } .plat { min-height: 34px; padding: 0 1.05rem 0 0.9rem; /* el logo pide un poco menos de aire a su lado */ gap: 0.62rem; font-size: 0.7rem; letter-spacing: 0.1em; } .plat.wa, .plat.ai { padding: 0 1.15rem; } /* sin logo: aire parejo a los dos lados */ /* Maquetas de anuncios */ .ad-plat { gap: 0.5rem; } /* Franja de logos de la sección de publicidad */ .lg { gap: 0.7rem; padding: 0.72rem 1.25rem; } @media (max-width: 720px) { .serv-plats { gap: 0.5rem; } .plat { min-height: 32px; padding: 0 0.95rem 0 0.8rem; gap: 0.55rem; font-size: 0.7rem; } .plat.wa, .plat.ai { padding: 0 1rem; } .lg { gap: 0.6rem; padding: 0.62rem 1.05rem; } } /* ================= Los logos se despegan de la curva de la píldora (v62) ================= La píldora es totalmente redondeada: su radio es la mitad de su alto (17 px). Con 14 px de padding el logo caía justo sobre la curva y parecía pegado al borde aunque el número dijera lo contrario. Se aparta lo suficiente para librar el arco por completo. */ .plat { padding: 0 1.15rem 0 1.25rem; gap: 0.6rem; } .plat.wa, .plat.ai { padding: 0 1.25rem; } .ad-plat { padding-left: 0.15rem; } @media (max-width: 720px) { .plat { padding: 0 1.05rem 0 1.15rem; } .plat.wa, .plat.ai { padding: 0 1.1rem; } } /* ================= v63 — LO QUE FALTABA ================= Las píldoras arrancaban a 1 px del borde superior de la tarjeta: quedó padding-top: 0 de cuando la tarjeta llevaba una ilustración arriba. Se quitó la ilustración y nunca se devolvió el aire. Ese era el problema, no el tamaño de los logos. */ .serv-big { padding: 2rem 2rem 1.75rem; } .serv-plats { margin-bottom: 1.5rem; } /* Los logos vuelven a su tamaño discreto (solo se respeta su proporción real, que era lo que estaba mal de origen). */ .plat { min-height: 30px; padding: 0 0.85rem; gap: 0.5rem; font-size: 0.67rem; letter-spacing: 0.09em; } .plat.wa, .plat.ai { padding: 0 0.9rem; } .plat .brand[viewBox="0 0 40 24"] { width: 19px; height: 11px; } /* Meta */ .plat .brand[viewBox="0 0 48 48"] { width: 13px; height: 13px; } /* Google */ .plat .brand[viewBox="0 0 32 32"] { width: 12px; height: 12px; } /* TikTok */ @media (max-width: 720px) { .serv-big { padding: 1.5rem 1.4rem 1.35rem; } .serv-plats { margin-bottom: 1.15rem; } .plat { min-height: 28px; padding: 0 0.8rem; gap: 0.45rem; font-size: 0.68rem; } .plat.wa, .plat.ai { padding: 0 0.85rem; } } /* ================= v64 — La píldora "Ahora mismo" ================= */ /* El contenedor del texto rotativo medía 1.35em con overflow oculto, pero la línea del texto ocupa más: las letras con cola (y, g, j) se cortaban por abajo. Ahora el alto del cajón y el de la línea son el mismo número. */ /* Y la píldora deja de rozar el header fijo */ .hero-l { padding-top: clamp(9rem, 19vh, 12rem); } @media (max-width: 900px) { .hero-l { padding-top: 7.5rem; } } @media (max-width: 720px) { .hero-l { padding-top: 7rem; } } /* Lo mismo en los heros de páginas internas */ .page-hero-l { padding-top: clamp(9rem, 18vh, 11.5rem); } @media (max-width: 900px) { .page-hero-l { padding-top: 7.5rem; } } @media (max-width: 900px) { .hero-l { padding-top: 8.75rem; } .page-hero-l { padding-top: 8.5rem; } } @media (max-width: 720px) { .hero-l { padding-top: 8.25rem; } .page-hero-l { padding-top: 8rem; } } /* El ícono de industria vivía fuera de la tarjeta y la recortaba; ahora entra completo, y de paso el escáner de recortes queda limpio. */ .ind-ico { right: 10px; bottom: 10px; width: 84px; height: 84px; } @media (max-width: 620px) { .ind-ico { right: 8px; bottom: 8px; width: 56px; height: 56px; } } /* Hero limpio: sin adornos detrás del titular */ .hero-l { position: relative; overflow: hidden; } .hero-l .container { position: relative; z-index: 2; } .hero-l .display { margin-top: 0; } /* ================= HERO con más presencia (v67) ================= */ .hero-l { background: radial-gradient(ellipse 90% 70% at 50% 118%, rgba(46,91,255,0.16) 0%, transparent 62%), linear-gradient(168deg, #FFF6EE 0%, #F7F9FF 38%, #EAF0FE 70%, #DDE6FC 100%); } .hero-l-bg::before { width: 720px; height: 720px; background: rgba(46,91,255,0.22); } .hero-l-bg::after { width: 540px; height: 540px; background: rgba(255,154,31,0.20); } /* Titular más grande y más apretado */ .hero-l .display { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.042em; line-height: 1.0; max-width: 18ch; } /* El degradado en el texto lo hacía ver lavado, como con un velo encima. Azul sólido, saturado, sin trucos. */ .hero-l .display .accent { color: #1B3FF5; } .hero-l-sub { margin-top: 1.5rem; max-width: 46ch; font-size: clamp(1rem, 1.28vw, 1.15rem); color: var(--grey-600); } /* Botones con más peso */ .hero-l-ctas { margin-top: 2.25rem; gap: 0.85rem; } .hero-l-ctas .btn { padding: 1rem 1.9rem; font-size: 0.98rem; border-radius: 100px; } .hero-l-ctas .btn-primary { box-shadow: 0 14px 34px rgba(46,91,255,0.32); } .hero-l-ctas .btn-primary:hover { box-shadow: 0 20px 44px rgba(46,91,255,0.42); } .hero-l-ctas .btn-outline { background: rgba(255,255,255,0.7); border-color: rgba(10,14,39,0.14); backdrop-filter: blur(6px); } .hero-l-ctas .btn-outline:hover { background: #fff; border-color: var(--blue); } /* Una línea de confianza, en texto plano: informa sin saturar */ .hero-l-trust { margin-top: 1.65rem; display: flex; align-items: center; justify-content: center; gap: 0.55rem; flex-wrap: wrap; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--grey-400); } .hero-l-trust i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; } @media (max-width: 720px) { .hero-l .display { font-size: clamp(2.1rem, 9vw, 2.9rem); max-width: none; } .hero-l-sub { margin-top: 1.15rem; font-size: 0.98rem; } .hero-l-ctas { margin-top: 1.75rem; gap: 0.7rem; } .hero-l-ctas .btn { padding: 0.95rem 1.5rem; } .hero-l-trust { margin-top: 1.35rem; font-size: 0.68rem; gap: 0.4rem; } .hero-l::after { background-size: 44px 44px; } } /* ================= HERO: foco de luz detrás del titular (v68) ================= Fuera la cuadrícula. En su lugar, un halo casi blanco justo donde va el texto que se oscurece hacia los bordes: el negro del titular resalta contra él. */ .hero-l { background: radial-gradient(ellipse 58% 46% at 50% 42%, #FFFFFF 0%, rgba(255,255,255,0.86) 38%, rgba(255,255,255,0) 72%), radial-gradient(ellipse 85% 70% at 50% 130%, rgba(46,91,255,0.30) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 6% 8%, rgba(255,154,31,0.20) 0%, transparent 58%), linear-gradient(160deg, #E9EEFB 0%, #DCE5FA 46%, #C9D7F6 100%); } /* viñeta suave: los bordes bajan un punto y el centro respira */ .hero-l::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 46%, rgba(10,14,39,0.07) 100%); } .hero-l-bg::before { opacity: 0.75; } .hero-l-bg::after { opacity: 0.75; } /* El titular gana contraste y peso */ .hero-l .display { color: #05070F; } /* Un solo botón: que se vea que es EL botón */ .hero-l-ctas { justify-content: center; } .hero-l-ctas .btn-primary { padding: 1.05rem 2.4rem; font-size: 1.02rem; } @media (max-width: 720px) { .hero-l .display { font-size: clamp(2.6rem, 11.2vw, 3.5rem); letter-spacing: -0.045em; line-height: 0.98; } .hero-l-ctas .btn-primary { width: 100%; justify-content: center; padding: 1.05rem 1.5rem; font-size: 1rem; } .hero-l-sub { font-size: 1rem; max-width: 30ch; } } @media (max-width: 720px) { /* En vertical el bloque de texto es más alto: el halo lo acompaña */ .hero-l { background: radial-gradient(ellipse 96% 40% at 50% 34%, #FFFFFF 0%, rgba(255,255,255,0.88) 42%, rgba(255,255,255,0) 78%), radial-gradient(ellipse 120% 55% at 50% 122%, rgba(46,91,255,0.30) 0%, transparent 62%), radial-gradient(ellipse 80% 40% at 0% 2%, rgba(255,154,31,0.22) 0%, transparent 62%), linear-gradient(165deg, #E7EDFB 0%, #D8E2F9 48%, #C4D3F5 100%); } .hero-l::after { background: radial-gradient(ellipse 100% 70% at 50% 38%, transparent 42%, rgba(10,14,39,0.08) 100%); } } @media (max-width: 720px) { /* dos líneas equilibradas en vez de una huérfana */ .hero-l-trust { max-width: 21ch; margin-left: auto; margin-right: auto; row-gap: 0.35rem; } } /* ================= v69 — Logo más grande y línea de confianza ================= */ .nav-logo img { height: 48px; } .nav-logo { font-size: 1.16rem; gap: 0.6rem; } .nav-inner { min-height: 82px; } @media (max-width: 900px) { .nav-logo img { height: 42px; } .nav-logo { font-size: 1.05rem; } .nav-inner { min-height: 72px; } } @media (max-width: 400px) { .nav-logo img { height: 36px; } .nav-logo { font-size: 0.95rem; gap: 0.45rem; } } @media (max-width: 340px) { .nav-logo img { height: 32px; } .nav-logo .logo-text { font-size: 0.85rem; } } /* el hero baja lo justo para acompañar al header más alto */ .hero-l { padding-top: clamp(9.5rem, 20vh, 12.5rem); } .page-hero-l { padding-top: clamp(9.5rem, 19vh, 12rem); } @media (max-width: 900px) { .hero-l { padding-top: 9rem; } .page-hero-l { padding-top: 8.75rem; } } @media (max-width: 720px) { .hero-l { padding-top: 8.5rem; } .page-hero-l { padding-top: 8.25rem; } } /* "y más" cierra la fila con un matiz distinto */ .trust-more { color: var(--blue); opacity: 0.75; } @media (max-width: 720px) { .hero-l-trust { max-width: 27ch; } } /* La fila de confianza usa el ancho del contenedor (el 'ch' de una fuente tan pequeña daba un ancho ridículo y partía cada ítem a su propia línea). */ .hero-l-trust { max-width: none; } @media (max-width: 720px) { .hero-l-trust { max-width: none; font-size: 0.64rem; gap: 0.45rem; row-gap: 0.4rem; letter-spacing: 0.08em; } } @media (max-width: 380px) { .hero-l-trust { font-size: 0.6rem; gap: 0.35rem; } } /* ================= v70 — Menos aire arriba, titular más grande ================= */ .hero-l { padding-top: clamp(7.5rem, 15vh, 9.5rem); } .page-hero-l { padding-top: clamp(7.5rem, 15vh, 9.5rem); } .hero-l .display { font-size: clamp(2.7rem, 6.5vw, 5.6rem); letter-spacing: -0.045em; line-height: 0.97; } @media (max-width: 900px) { .hero-l { padding-top: 7rem; } .page-hero-l { padding-top: 7rem; } } @media (max-width: 720px) { .hero-l { padding-top: 6.25rem; padding-bottom: 2.25rem; } .page-hero-l { padding-top: 6.25rem; } .hero-l .display { font-size: clamp(2.9rem, 12.4vw, 4rem); line-height: 0.96; letter-spacing: -0.048em; } .hero-l-sub { margin-top: 1.1rem; } } @media (max-width: 360px) { .hero-l .display { font-size: clamp(2.5rem, 11.6vw, 3.2rem); } } /* ================= v70b — El header ocupa menos ================= */ .nav { padding: 0.7rem 0; } .nav.scrolled { padding: 0.55rem 0; } .nav-inner { min-height: 62px; } .nav-logo img { height: 44px; } @media (max-width: 900px) { .nav { padding: 0.5rem 0; } .nav.scrolled { padding: 0.45rem 0; } .nav-inner { min-height: 56px; } .nav-logo img { height: 40px; } } @media (max-width: 400px) { .nav-logo img { height: 34px; } } @media (max-width: 340px) { .nav-logo img { height: 30px; } } /* y el hero recupera una holgura sana bajo un header más bajo */ .hero-l { padding-top: clamp(7rem, 13vh, 8.5rem); } .page-hero-l { padding-top: clamp(7rem, 13vh, 8.5rem); } @media (max-width: 900px) { .hero-l, .page-hero-l { padding-top: 6.5rem; } } @media (max-width: 720px) { .hero-l, .page-hero-l { padding-top: 6rem; } } @media (max-width: 720px) { .hero-l, .page-hero-l { padding-top: 6.6rem; } } /* ================= v71 — La fila de plataformas, legible ================= Estaba en gris claro sobre un fondo casi del mismo tono: 1,1 de contraste, prácticamente invisible. Ahora usa un azul-tinta oscuro. */ .hero-l-trust { color: #2E3752; font-weight: 800; } .hero-l-trust i { background: #2E3752; opacity: 0.42; } .trust-more { color: #1B44D8; opacity: 1; } /* la bajada también gana un punto de contraste */ .hero-l-sub { color: #3D4661; } .trust-more { color: #1636B4; } /* ================= v72 — El azul del titular, sólido y fuerte ================= */ .hero-l .display .accent { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #1B3FF5; color: #1B3FF5; }