/* universal.css OPTIMIZADO - CSS moderno con funciones nativas */ /* Tipografía optimizada */ h4 { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--grey-1); } h5 { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--gris2); text-transform: uppercase; letter-spacing: 0.05em; } /* Arrow con transform optimizada */ .arrow-down { width: 0; height: 0; border-inline: 4px solid transparent; border-block-start: 4px solid currentColor; transition: transform 0.3s ease; } .has-submenu:hover .arrow-down { transform: rotate(180deg); } /* Listas optimizadas */ ol li { margin-inline-start: 3em; list-style: none; } ::marker { line-height: 1; font-size: 1.2rem; color: var(--text-primary); font-family: var(--font); } /* HR con background moderno */ hr { border: none; block-size: 2px; background-image: linear-gradient(to right, #fff 50%, transparent 50%); background-size: 40px 3px; inline-size: 100%; margin-block: 2rem; opacity: 0.5; } /* Tablas con CSS Grid donde sea posible */ table { inline-size: 100%; margin-block: 2em 4em; border-collapse: collapse; tr { border-block-end: 2px dotted var(--grey-1); display: flex; padding-block: 1.2em; flex-wrap: wrap; gap: 1em; inline-size: 100%; &:nth-child(even) { background-color: var(--bg-grey); } } th { font-weight: 900; } td, th { flex: 1 0 200px; } } /* CTA con logical properties */ .bg_cta { background: linear-gradient( 196deg, rgb(221 179 8) 0%, rgb(221 179 8) 52%, rgb(8 8 7) 95% ); padding-block: var(--space-lg, 4rem); h2 { color: var(--text-black); position: relative; margin-block-end: 1.5rem; &::after { content: ""; position: absolute; inset-block-end: -0.2em; inset-inline-start: 0; inline-size: 7em; block-size: 4px; background-color: #ffce00; border-radius: 2px; } } p { color: var(--text-primary); } a { font-size: 16px; } } /* Background optimizado */ .bg_white { background-image: url('../img/bg-logos-clientes-since.avif'); background-size: cover; background-position: center; min-block-size: 20vh; } /* Layout con Container Queries support */ .two_columns { position: relative; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; z-index: 0; > div { flex: 1 0 280px; inline-size: min(100%, 680px); } iframe{width: min(100%, 600px);} } .two_columns_left { flex-direction: row-reverse; } .three_columns { display: flex; flex-wrap: wrap; gap: 3em; justify-content: center; align-items: flex-start; margin-block-end: 4em; > div { position: relative; inline-size: min(100%, 376px); display: grid; border-radius: var(--radius-cards, 12px); overflow: hidden; &:last-child { ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; li { flex: 1 0 120px; font-size: 16px; margin: 0 0 0.5rem 1em; } } } } img { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); &:hover { transform: scale(1.015); } } h4 { font-size: 24px; max-inline-size: 296px; margin: 0; } } /* Utilidades de texto */ .text_center { display: grid; gap: 1em; place-items: center; inline-size: min(100%, 720px); margin-inline: auto; text-align: center; } .lista-desordenada li { color: var(--text-primary); list-style-type: disc; margin-inline-start: 2em; } .text-black { color: var(--text-black); } .text-primary { color: var(--color-primary); } .center { display: flex; justify-content: center; align-items: center; } .highlight { color: var(--color-primary); text-transform: uppercase; font-weight: 900; } /* =================================== WHATSAPP FLOTANTE OPTIMIZADO ================================= */ .whatsapp-floating-container { position: fixed; inset-block-end: 120px; inset-inline-end: 20px; z-index: 9998; } .whatsapp-float { display: grid; place-items: center; inline-size: 60px; block-size: 60px; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); border-radius: 50%; color: white; text-decoration: none; box-shadow: 0 8px 24px rgb(37 211 102 / 0.3); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: whatsappFloat 3s ease-in-out infinite; &:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 12px 32px rgb(37 211 102 / 0.4); background: linear-gradient(135deg, #128C7E 0%, #25D366 100%); svg { transform: scale(1.1); } } &:active { transform: scale(0.95); } svg { transition: transform 0.3s ease; } /* Pulso con pseudo-element */ &::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgb(37 211 102 / 0.4); animation: whatsappPulse 2s infinite; z-index: -1; } } /* Animaciones optimizadas */ @keyframes whatsappFloat { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } } @keyframes whatsappPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } /* Tooltip de WhatsApp */ .whatsapp-tooltip { position: fixed; inset-block-end: 180px; inset-inline-end: 20px; background: white; border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.15); z-index: 9999; animation: tooltipSlideIn 0.4s ease-out; max-inline-size: 260px; border: 2px solid #25D366; &.pulse { animation: tooltipPulse 2s infinite; } } .whatsapp-tooltip-content { padding: 16px; position: relative; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: white; border-radius: 10px; text-align: center; } .whatsapp-tooltip-text { strong { font-size: 14px; display: block; margin-block-end: 4px; } span { font-size: 12px; opacity: 0.9; } } .whatsapp-tooltip-close { position: absolute; inset-block-start: 4px; inset-inline-end: 8px; background: none; border: none; color: white; font-size: 16px; cursor: pointer; padding: 2px; border-radius: 50%; inline-size: 20px; block-size: 20px; display: grid; place-items: center; line-height: 1; &:hover { background: rgb(255 255 255 / 0.2); } } .whatsapp-tooltip-arrow { position: absolute; inset-block-end: -8px; inset-inline-end: 24px; inline-size: 0; block-size: 0; border-inline: 8px solid transparent; border-block-start: 8px solid #25D366; } /* Animaciones del tooltip */ @keyframes tooltipSlideIn { from { transform: translateY(20px) scale(0.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes tooltipPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* =================================== SCROLL TO TOP OPTIMIZADO ================================= */ .scroll-to-top { position: fixed; inset-block-end: 40px; inset-inline-end: 20px; color: var(--color-primary); background-color: transparent; inline-size: 60px; block-size: 60px; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 99; border: none; &.visible { opacity: 1; visibility: visible; } &:hover { transform: translateY(-4px) scale(1.1); color: var(--blanco); svg { transform: translateY(-2px); } } svg { transition: transform 0.2s ease; inline-size: 40px; block-size: 40px; } } /* =================================== OPTIMIZACIONES DE PERFORMANCE ================================= */ .whatsapp-float, .scroll-to-top { will-change: transform; backface-visibility: hidden; } /* =================================== RESPONSIVE DESIGN ================================= */ @media (max-width: 768px) { .whatsapp-floating-container { inset-block-end: 80px; inset-inline-end: 15px; } .whatsapp-float { inline-size: 56px; block-size: 56px; svg { inline-size: 28px; block-size: 28px; } } .whatsapp-tooltip { inset-block-end: 140px; /* Ajustado para móviles */ inset-inline-end: 15px; max-inline-size: 200px; } .whatsapp-tooltip-content { padding: 12px; } .whatsapp-tooltip-text { strong { font-size: 13px; } span { font-size: 11px; } } .scroll-to-top { inline-size: 45px; block-size: 45px; inset-inline-end: 28px; inset-block-end: 35px; } } /* =================================== ACCESIBILIDAD ================================= */ @media (prefers-reduced-motion: reduce) { .whatsapp-float, .scroll-to-top, .three_columns img { animation: none !important; transition: none !important; } .whatsapp-float::before { animation: none !important; } } /* Mejoras para alto contraste */ @media (prefers-contrast: high) { .whatsapp-float { border: 2px solid white; &:hover { border-color: black; } } .whatsapp-tooltip { border-width: 3px; } } /* Soporte para dark mode */ @media (prefers-color-scheme: dark) { .whatsapp-tooltip { background: rgb(30 30 30); border-color: #25D366; &-content { background: linear-gradient(135deg, #1a5d2b 0%, #0f3d26 100%); } &-arrow { border-block-start-color: #1a5d2b; } } } /* Navegación base */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: var(--color-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .main-menu { display: flex; justify-content: space-between; align-items: center; width: min(calc(100% - 2rem), 1320px); margin-inline: auto; padding: 1rem 0; } .logo img { width: 148px; height: 48px; object-fit: contain; } /* Navegación desktop */ .navegacion { display: flex; align-items: center; gap: 2rem; list-style: none; } .navegacion a { color: var(--color-primary); font-weight: var(--fw-bold); font-size: 16px; text-decoration: none; padding: 0.5rem 1rem; border-radius: 8px; transition: var(--transition); &:hover { background-color: rgba(221, 179, 8, 0.1); transform: translateY(-2px); } } /* Toggle móvil */ .nav-toggle { display: none; } .menu-icon { display: none; flex-direction: column; cursor: pointer; gap: 4px; span { width: 28px; height: 3px; background-color: var(--text-primary); border-radius: 2px; transition: var(--transition); } } /* Submenú desktop */ .submenu-item { position: relative; &:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); } &:hover .arrow { transform: rotate(180deg); } } .submenu-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--color-primary); font-weight: var(--fw-bold); font-size: 16px; padding: 0.5rem 1rem; } .arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--color-primary); transition: var(--transition); } .submenu { position: absolute; top: 100%; left: 0; min-width: 280px; padding: 1.5rem 1.25rem; background-color: rgba(254, 254, 254, 0.95); backdrop-filter: blur(10px); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); a { display: block; color: var(--color-secondary); padding: 0.75rem 0; font-size: 15px; white-space: nowrap; border-bottom: 1px solid rgba(82, 81, 81, 0.1); &:last-child { border-bottom: none; } &:hover { color: var(--color-primary); transform: translateX(4px); background-color: transparent; } } } /* Details/Summary para móvil */ details { summary { list-style: none; cursor: pointer; &::-webkit-details-marker { display: none; } } } /* Estructura del header */ .hero { position: relative; padding-top: 80px; overflow: hidden; min-height: 85dvh; } .hero-background { position: absolute; bottom: 0; left: 0; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center bottom; object-position: center bottom; z-index: -1; } /* hero servicios */ .hero-services { position: relative; min-height: 90vh; overflow: visible; } .img-bottom { position: relative; top: 320px; z-index: 2; animation: astronaut-gentle-float 5s ease-in-out infinite; } .hero-space { position: relative; height: 90vh; min-height: 450px; overflow: hidden; } .text-overlay { position: absolute; bottom: 2%; left: 0; width: 100%; text-align: center; z-index: 2; h1{ margin: 0; } } .hero-content { display: grid; place-items: center; padding-top: 14vh; h1{text-align: center;} } .hero-text { display: grid; place-items: center; } .vertical-text::before { content: "Agencia de Colombia para toda latinoamérica"; position: absolute; right: 20px; top: 40%; transform: rotate(-90deg) translateY(-20px); transform-origin: right bottom; color: white; font-size: 16px; white-space: nowrap; letter-spacing: 1px; transition: opacity 0.3s ease; } .header_general{ min-height: 95dvh; display: grid; align-content: center; h1{ margin: 0; max-width: 800px; } } /* Overlay para mejorar legibilidad en hero principal */ .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 25% 50%, rgba(1, 1, 1, 0.8) 0%, rgba(1, 1, 1, 0.3) 50%, transparent 80%), linear-gradient(135deg, rgba(1, 1, 1, 0.6) 0%, rgba(1, 1, 1, 0.1) 100%); z-index: 1; pointer-events: none; } /* Asegurar que el contenido esté encima del overlay */ .hero-content { position: relative; z-index: 2; } /* Overlay para hero de servicios */ .hero-services::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to right, rgba(1, 1, 1, 0.85) 0%, rgba(1, 1, 1, 0.4) 50%, rgba(1, 1, 1, 0.1) 100% ); z-index: 1; pointer-events: none; } /* Asegurar contenido encima en servicios */ .hero-services .wrapper { position: relative; z-index: 2; } /* Text shadow sutil para mejor contraste */ .hero h1, .hero-services h1 { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.4); } .hero p, .hero-services p { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); } /* Mejorar botón en hero */ .hero .btn, .hero-services .btn { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(221, 179, 8, 0.4); position: relative; z-index: 3; } /* Para hero general (otras páginas) */ .header_general > * { position: relative; z-index: 2; } /* Botones */ .btn { display: inline-block; top: 20px; padding: 12px 24px; border: none; border-radius: var(--radius-sm); font-family: var(--font); font-weight: var(--fw-bold); font-size: 16px; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.4s ease; animation: astronaut-gentle-float 5s ease-in-out infinite; max-width: max-content; } .btn-primary { background-color: var(--color-primary); color: var(--text-primary); } .btn-primary:hover { background-color: var(--text-primary); color: var(--text-black); box-shadow: var(--shadow-card); } .btn-secondary { background-color: var(--color-secondary); color: var(--text-primary); } .btn-secondary:hover { background-color: var(--text-grey-dark); color: var(--text-black); box-shadow: var(--shadow-card); } /* Variables CSS personalizadas para valores repetitivos */ :root { --transition-standard: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-hover: all 0.3s ease-in-out; --shadow-hover: 0 8px 24px rgba(0,0,0,0.12); --shadow-card-hover: 0 12px 32px rgba(0,0,0,0.15); --transform-lift: translateY(-5px); --transform-scale: translateY(-5px) scale(1.02); } /* Selectores base para elementos comunes */ .breadcrumbs span { font-size: 18px; } /* Layout utilities - Usando Grid/Flex moderno */ :is(.section-center, .text_center) { display: grid; place-content: center; place-items: center; &.text_center { gap: 1em; width: min(100%, 720px); margin-inline: auto; text-align: center; } } :is(.text-right, .text_right_intro) { display: grid; place-content: flex-end; width: min(100%, 700px); text-align: right; margin-left: auto; &.text-right { gap: 2rem; } } /* Card components - Unificando estilos de tarjetas */ :is(.highlight-card, .paquete-card, .featured-post-card, .post-slide, .cta-option) { border-radius: var(--radius-sm); transition: var(--transition-standard); border: 2px solid transparent; &:hover { transform: var(--transform-lift); border-color: var(--color-primary); } } .highlight-card { display: flex; flex-wrap: wrap; gap: 2rem; max-width: min(100% - 2rem, 1000px); margin: 8em auto; border-width: 0.25rem; align-items: center; .card-content { flex: 1 0 300px; padding: 2em; img { border-radius: var(--radius-sm); } } .team-img-card { flex: 0 0 300px; width: min(100%, 300px); height: auto; -o-object-fit: cover; object-fit: cover; border-radius: 0 0 var(--radius-lg) 0; } } /* Hover effects unificados */ :is(.hover, .service-individual-content) { transition: var(--transition-hover); &:hover { transform: var(--transform-lift); p { color: var(--text-grey-dark); } } } /* Títulos destacados con decoración */ .highlighted-title { position: relative; max-width: 720px; margin-bottom: 2em; h2 { position: relative; z-index: 2; &::after { content: ""; position: absolute; bottom: 0.2em; left: -4%; width: min(100%, 420px); height: clamp(45px, 6.5vw, 65px); background-color: var(--color-secondary); z-index: -1; top: 60px; transform: rotate(-2deg); } } } /* Secciones numeradas */ .numbered-section { position: relative; padding: 4rem 0; .content { position: relative; z-index: 2; max-width: 600px; } .background-number { position: absolute; left: -50px; top: 0; font-size: 18rem; font-weight: var(--fw-black); color: rgba(255, 255, 255, 0.24); line-height: 1; z-index: 1; } } /* Containers de imágenes */ :is(.image-container, .partners) img { width: min(100%, 600px); height: auto; } .partners { position: relative; display: grid; gap: 4em; .partners_content { width: min(100%, 600px); } .partners_logos { -o-object-position: center; object-position: center; -o-object-fit: fill; object-fit: fill; } } /* Rating y logos */ .logo-rating { display: flex; align-items: center; gap: 1em; .stars { color: var(--color-primary); font-size: clamp(1.25rem, 2.5vw, 1.5rem); } } /* Información de contacto */ .contact_info { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-evenly; li { display: grid; gap: 0.5rem; place-items: center; width: 200px; img { width: 100%; height: 200px; background-color: var(--bg-main); border-radius: 50%; } span { color: var(--text-black); font-weight: 700; max-width: 100%; word-break: break-all; text-align: center; } } } /* Animaciones de scroll */ .scroll-animations { .animate-element { opacity: 0; transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; &.slide-from-left { transform: translateX(-50px); } &.slide-from-right { transform: translateX(50px); } &.is-visible { opacity: 1; transform: translateX(0); } } .numbered-section { transition-delay: calc(var(--section-index, 0) * 0.15s); &:nth-of-type(1) { --section-index: 1; } &:nth-of-type(2) { --section-index: 2; } &:nth-of-type(3) { --section-index: 3; } } } /* Backgrounds y espacios */ .bg-blog { background: url("/img/blog-since-agencia.avif") center/cover no-repeat; } .herramientas-marketing { background: url("../img/herramientas-marquting-digital-since.avif") center/cover; min-height: 100vh; padding: 4rem 0; position: relative; overflow: hidden; } /* Experience items */ .experience-item { text-align: center; :is(h3, p) { color: var(--text-black); margin: 0; } h3 { font-weight: 900; } } /* Categorías de blog */ .segunda-categoria-de-el-blog { background-color: var(--color-primary); box-shadow: 0 0 0 100vmax var(--color-primary); -webkit-clip-path: inset(0 -100vmax); clip-path: inset(0 -100vmax); h3 { color: var(--color-dark); } } .categories-container { padding: 8em 0; h3 { width: 16ch; } } /* Blog slider */ .tarjeta-blog-container { width: 100%; overflow: hidden; padding: 20px 0; } .tarjeta-blog { display: flex; gap: 20px; overflow-x: auto; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px; transition: scroll-behavior 0.5s ease-in-out; cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; &::-webkit-scrollbar { display: none; } &:active { cursor: -webkit-grabbing; cursor: grabbing; } scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .digital-item { flex: 0 0 300px; position: relative; background-size: cover; background-position: center; min-height: 300px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: flex; align-items: flex-end; scroll-snap-align: start; } .excerpt-overlay { width: 100%; background: rgba(0, 0, 0, 0.7); padding: clamp(10px, 5%, 20px); text-align: center; display: grid; gap: 1rem; } /* Post content */ .post-content { line-height: 1.6; position: relative; img { position: absolute; right: 0; width: min(100%, 450px); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } :is(h1, h2, h3, p) { width: 50%; max-width: 500px; } } /* Floating message */ .floating-message { position: fixed; bottom: 30%; right: 40%; max-width: min(90%, 500px); padding: 1.25rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); transform: translateX(150%); background-color: var(--color-secondary); z-index: 1000; transition: transform 0.5s ease-out; } .close-btn { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; background: var(--color-primary); color: #000; border: none; border-radius: 50%; font: 900 1.2rem/1 sans-serif; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 0; &:hover { background: var(--text-primary); transform: rotate(90deg); } } /* Listas */ .lista li { list-style-type: decimal; } /* Antena special layout */ .antena { position: relative; img { position: absolute; top: 300px; } } /* Services */ .services_list { display: grid; gap: 8em; } .services_data { gap: 0; margin-bottom: 2em; span { font-size: 4rem; color: var(--color-primary); font-weight: 900; } p { margin: 0; } } /* Paquetes */ .paquetes-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2rem; margin: 4rem 0; } .paquete-card { display: flex; flex-direction: column; height: 100%; background-color: var(--bg-grey); &.featured { border-color: var(--color-primary); box-shadow: 0 8px 24px rgba(221, 179, 8, 0.15); } &:hover { transform: translateY(-10px); box-shadow: var(--shadow-card-hover); } } .paquete-content { padding: 1.5rem; flex-grow: 1; background-color: white; background-size: cover; background-position: center; opacity: 0.95; } .lista-servicios { list-style: none; padding: 0; margin: 0; li { display: flex; align-items: flex-start; margin-bottom: 0.75rem; font-size: 1rem; color: var(--text-black); } } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; margin-top: 5px; flex-shrink: 0; &.primary { background-color: var(--color-primary); } &.secondary { background-color: var(--color-secondary); opacity: 0.5; } } .paquete-footer { padding: 1.5rem; background-color: #f8f8f8; border-top: 1px solid rgba(0, 0, 0, 0.1); } .valor { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 1rem; gap: 1rem; span { background-color: var(--color-primary); color: var(--text-black); padding: 0.5rem 1rem; font-weight: var(--fw-bold); font-size: 1rem; border-radius: 4px; } h5 { margin: 0; font-size: 1.5rem; font-weight: var(--fw-black); color: var(--text-black); } } .legal-text { font-size: 0.75rem; color: var(--text-black); margin: 0; line-height: 1.4; } /* Space services individual */ .space-services-individual { position: relative; background: var(--color-dark); overflow: hidden; isolation: isolate; min-height: 100dvh; &::before { content: ''; position: absolute; inset: 0; background: url("../img/space-bg.avif") center/cover no-repeat; background-attachment: fixed; opacity: 0.6; z-index: 1; } &::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(1, 1, 1, 0.7) 0%, rgba(1, 1, 1, 0.5) 50%, rgba(1, 1, 1, 0.7) 100% ); z-index: 2; } } .services-individual-container { position: relative; z-index: 10; } .services-individual-intro { display: grid; place-items: center; place-content: center; padding: 2rem; h2 { text-align: center; } } .service-individual-section { min-height: 100vh; display: flex; align-items: center; &:nth-child(even) { justify-content: flex-start; } &:nth-child(odd) { justify-content: flex-end; } } .service-individual-content { width: min(100%, 600px); padding: 3rem; background: rgba(1, 1, 1, 0.95); border: 1px solid rgba(221, 179, 8, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); &:hover { transform: var(--transform-scale); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); border-color: var(--color-primary); a { transform: translateY(-4px); } } } /* Blog hub styles */ .blog-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, #f59e0b 100%); border-radius: var(--radius-lg); color: var(--text-black); } .stat-item { text-align: center; h3 { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--fw-black); margin: 0; color: var(--text-black); } p { font-size: 0.9rem; margin: 0.5rem 0 0; opacity: 0.8; } } /* Featured posts grid */ .featured-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin: 3rem 0; } .featured-post-card { background: var(--bg-grey); border-radius: var(--radius-lg); &:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); .post-image img { transform: scale(1.05); } } } .post-image { position: relative; overflow: hidden; img { width: 100%; height: 250px; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } } .post-category { position: absolute; top: 1rem; left: 1rem; background: var(--color-primary); color: var(--text-black); padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.5px; } .post-content { padding: 1.5rem; h3 { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.3; a { color: var(--text-primary); text-decoration: none; transition: color 0.2s ease; &:hover { color: var(--color-primary); } } } } .post-meta { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-grey); margin-bottom: 1rem; } .post-author { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--grey-1); img { border-radius: 50%; width: 40px; height: 40px; -o-object-fit: cover; object-fit: cover; } div { display: flex; flex-direction: column; } strong { font-size: 0.9rem; color: var(--text-primary); } span { font-size: 0.8rem; color: var(--text-grey); } } /* Category navigation */ .categories-navigation { background: var(--bg-grey); padding: 2rem; border-radius: var(--radius-lg); margin: 4rem 0; h2 { text-align: center; margin-bottom: 2rem; color: var(--text-primary); } } .category-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .category-tab { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem 1rem; background: var(--color-white); border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-standard); text-align: center; &:is(:hover, .active) { border-color: var(--color-primary); background: var(--color-primary); color: var(--text-black); transform: translateY(-4px); } .tab-icon { font-size: 2rem; } .tab-text { font-weight: var(--fw-bold); font-size: 0.9rem; } .tab-count { font-size: 0.8rem; opacity: 0.7; } } /* Category sections */ .category-section { margin: 4rem 0; padding: 2rem 0; display: none; &:first-of-type { display: block; } &:not(:first-of-type) { border-top: 1px solid var(--grey-1); } } .category-header { text-align: center; margin-bottom: 2rem; h3 { color: var(--text-primary); margin-bottom: 0.5rem; } } /* Posts slider */ .posts-slider-container { position: relative; margin: 2rem 0; } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: var(--color-primary); color: var(--text-black); border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: var(--transition-standard); box-shadow: 0 4px 12px rgba(0,0,0,0.15); &:hover { background: var(--color-secondary); transform: translateY(-50%) scale(1.1); } &.prev { left: -25px; } &.next { right: -25px; } } .posts-slider { display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; padding: 1rem 0; &::-webkit-scrollbar { height: 8px; &-track { background: var(--grey-1); border-radius: 4px; } &-thumb { background: var(--color-primary); border-radius: 4px; } } } .post-slide { flex: 0 0 320px; background: var(--bg-grey); scroll-snap-align: start; border: 1px solid transparent; &:hover { transform: translateY(-4px); border-color: var(--color-primary); } } .slide-image img { width: 100%; height: 180px; -o-object-fit: cover; object-fit: cover; } .slide-content { padding: 1.25rem; h4 { margin: 0 0 0.75rem; font-size: 1.1rem; line-height: 1.3; a { color: var(--text-primary); text-decoration: none; &:hover { color: var(--color-primary); } } } p { font-size: 0.9rem; color: var(--text-grey-dark); margin-bottom: 1rem; line-height: 1.4; } } .slide-meta { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--text-grey); margin-bottom: 1rem; } .slide-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; } .author { color: var(--text-grey); font-weight: var(--fw-bold); } .read-more { color: var(--color-primary); text-decoration: none; font-weight: var(--fw-bold); transition: color 0.2s ease; &:hover { color: var(--color-secondary); } } /* CTAs */ .category-cta { background: linear-gradient(135deg, var(--color-primary) 0%, #f59e0b 100%); padding: 1.5rem 2rem; border-radius: var(--radius-sm); text-align: center; margin-top: 2rem; p { color: var(--text-black); margin: 0 0 1rem; font-weight: var(--fw-bold); } } .category-cta-btn { background: var(--text-black); color: var(--color-primary); padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: var(--fw-bold); transition: var(--transition-standard); &:hover { background: var(--text-primary); color: var(--color-white); transform: translateY(-2px); } } .post-meta { display: flex; gap: 2rem; justify-content: center; margin-bottom: 2rem; font-size: 0.9rem; } .post-meta a { background: var(--color-primary); color: var(--text-black); padding: 0.5rem 1rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: var(--fw-bold); text-transform: uppercase; } .post-meta span { color: var(--text-grey); font-weight: var(--fw-bold); } .post-author { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem 0; } .post-author img { border-radius: 50%; border: 3px solid var(--color-primary); } .post-author div { text-align: left; } .post-author strong { display: block; color: var(--text-primary); font-size: 1.1rem; } .post-author time { font-size: 0.9rem; color: var(--text-grey); } @media (max-width: 768px) { .post-meta { flex-direction: column; gap: 1rem; } .post-author { flex-direction: column; text-align: center; } .post-author div { text-align: center; } } .breadcrumbs { padding: 1rem 0; border-bottom: 1px solid var(--color-secondary); margin-bottom: 2rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; gap: 1rem; font-size: 0.9rem; } .breadcrumbs li:not(:last-child)::after { content: "→"; margin-left: 1rem; color: var(--text-grey); } .breadcrumbs a { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs li:last-child { color: var(--text-grey); } /* Newsletter CTA */ .blog-newsletter-cta { background: var(--bg-grey); padding: 3rem 2rem; border-radius: var(--radius-lg); text-align: center; margin: 4rem 0; } .newsletter-content h2 { color: var(--text-primary); margin-bottom: 1rem; } .cta-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .cta-option { background: var(--color-white); padding: 2rem; &:hover { border-color: var(--color-primary); transform: translateY(-4px); } h3 { color: var(--text-primary); margin-bottom: 1rem; } } .cta-btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: var(--fw-bold); transition: var(--transition-standard); margin-top: 1rem; &.primary { background: var(--color-primary); color: var(--text-black); &:hover { background: var(--color-secondary); transform: translateY(-2px); } } &.secondary { background: var(--text-black); color: var(--color-primary); &:hover { background: var(--text-primary); color: var(--color-white); transform: translateY(-2px); } } } /* Responsive usando container queries modernas donde sea posible */ @container (max-width: 768px) { .slider-nav { display: none; } .category-tabs { grid-template-columns: repeat(2, 1fr); } .featured-posts-grid { grid-template-columns: 1fr; } .cta-options { grid-template-columns: 1fr; } } /* Fallback para browsers sin soporte de container queries */ @media (max-width: 768px) { .posts-slider { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } :is(.slider-nav) { display: none; } .category-tabs { grid-template-columns: repeat(2, 1fr); } .featured-posts-grid { grid-template-columns: 1fr; } .cta-options { grid-template-columns: 1fr; } } /* SLIDER INFINITO - Solo fixes esenciales para Safari/Opera */ .slider { background: linear-gradient( 31deg, rgba(221, 179, 8, 1) 0%, rgba(221, 179, 8, 1) 35%, rgba(8, 8, 7, 1) 93% ); background-image: url('../img/bg-logos-clientes-since.avif'); background-size: cover; background-position: center; min-height: 20vh; display: grid; place-items: center; overflow: hidden; } .gallery-slider { width: 100%; max-width: 1320px; overflow: hidden; } .slide-container { display: flex; gap: 4rem; /* FIX Safari: Usar ancho fijo calculado en lugar de max-content */ width: calc(var(--items-count, 20) * 320px + var(--items-count, 20) * 4rem); animation: slide 25s linear infinite; /* FIX Opera: Forzar aceleración por hardware */ transform: translateZ(0); will-change: transform; } .slide-container:hover { animation-play-state: paused; } .slide-container figure { flex: none; margin: 0; display: grid; place-items: center; /* FIX Safari: Ancho fijo para evitar colapso */ width: 320px; } .slide-container img { height: 120px; width: auto; max-width: 320px; object-fit: contain; /* FIX Safari: Mejor rendering de imágenes */ image-rendering: -webkit-optimize-contrast; transform: translateZ(0); } /* Animación con translateZ para hardware acceleration */ @keyframes slide { to { transform: translateX(-50%) translateZ(0); } } /* Responsive */ @media (width <= 768px) { .slide-container { gap: 2rem; width: calc(var(--items-count, 20) * 200px + var(--items-count, 20) * 2rem); } .slide-container figure { width: 200px; } .slide-container img { height: 80px; max-width: 200px; } } .testimonios { padding: 2rem 0; background-color: #000; } .tarjetas-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 2rem; width: min(100%, 1200px); margin-inline: auto; } .tarjeta-testimonio { position: relative; height: 200px; background-color: #000; border-radius: 1.5rem; border: 1px solid var(--color-primary); display: flex; justify-content: space-between; } .contenido-testimonio { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; z-index: 1; } .header-testimonio { display: flex; align-items: center; gap: 0.75rem; } .estrellas { color: var(--color-primary); font-size: 1rem; letter-spacing: 2px; } .tarjeta-testimonio h3 { color: #fff; font-size: 1.25rem; margin: 0; } .imagen-testimonio { height: 100%; width: auto; -o-object-fit: cover; object-fit: cover; margin-left: auto; } .testimonio-with-image { position: relative; img { opacity: 0.8; } } .testimonio-float { position: absolute; width: 280px; height: 350px; -o-object-fit: cover; object-fit: cover; box-shadow: 0 20px 40px rgba(221, 179, 8, 0.2); z-index: 10; -webkit-animation: float 6s ease-in-out infinite; animation: float 6s ease-in-out infinite; } .testimonio-float-left { left: -240px; top: 50%; transform: translateY(-50%); } .testimonio-float-right { right: -240px; top: 50%; transform: translateY(-50%); -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes float { 0%, 100% { transform: translateY(-50%) rotate(-2deg); } 50% { transform: translateY(-60%) rotate(2deg); } } @keyframes float { 0%, 100% { transform: translateY(-50%) rotate(-2deg); } 50% { transform: translateY(-60%) rotate(2deg); } } @-webkit-keyframes mobileFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes mobileFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @media (max-width: 480px) { .client-logo { flex: 0 0 120px; height: 60px; } .slider-content { gap: 0.5rem; } } @media (max-width: 768px) { .hero::before { background: rgba(1, 1, 1, 0.8); } .hero-services::before { background: linear-gradient( to bottom, rgba(1, 1, 1, 0.9) 0%, rgba(1, 1, 1, 0.6) 100% ); } .hero h1, .hero-services h1, .hero p, .hero-services p { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); text-align: center; } .highlight-card { flex-direction: column; align-items: center; } .clients-slider { padding: 2rem 0; } .slider-container { flex-direction: column; gap: 1.5rem; } .slider-nav { position: static; order: 2; } .slider-track { order: 1; width: 100%; } .slider-content { gap: 1rem; -webkit-animation-duration: 20s; animation-duration: 20s; } .tarjeta-testimonio { height: auto; min-height: 200px; } .imagen-testimonio { width: 40%; height: 100%; } .client-logo { flex: 0 0 150px; height: 80px; padding: 0.5rem; } .slider-title { margin-bottom: 2rem; } /* Navegación móvil */ .slider-nav-mobile { display: flex; justify-content: center; gap: 1rem; order: 3; } .post-content { display: grid; place-content: center; place-items: center; } .post-content img { position: relative; display: block; width: 100%; margin: 1.5rem 0; right: auto; } .post-content h3, .post-content h2, .post-content h1, .post-content p { width: 100%; } .vertical-text::before { content: "Agencia de Colombia y Ecuador"; font-size: 12px; } .vertical-text { right: 8px; top: 40%; } .paquetes-container { grid-template-columns: 1fr; } .paquete-card { max-width: 100%; } .space-services-individual::before { background: url("../img/space-bg-tablet.avif") center/cover no-repeat; background-attachment: fixed; } } /* Mobile - ocultar astronautas completamente */ @media (max-width: 1023px) { .astronaut-floating { display: none !important; } .service-individual-section { justify-content: center; text-align: center; } .services-individual-intro { justify-content: center; } .services-intro-content { text-align: center; } } .astronaut-floating { opacity: 0 !important; visibility: hidden !important; } .astronaut-floating.active { opacity: 1 !important; visibility: visible !important; } /* Responsive Design */ @media (max-width: 1200px) { .menu-icon { display: flex; } .navegacion { position: fixed; top: 80px; left: 0; right: 0; bottom: 0; background-color: var(--color-dark); flex-direction: column; align-items: stretch; gap: 0; padding: 2rem; transform: translateX(-100%); transition: var(--transition); overflow-y: auto; } .nav-toggle:checked ~ .navegacion { transform: translateX(0); } .nav-toggle:checked ~ .menu-icon { span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } span:nth-child(2) { opacity: 0; } span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } } .navegacion > li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .navegacion a { display: block; width: 100%; padding: 1rem 0; font-size: 18px; text-align: left; } /* Submenú móvil optimizado */ .submenu-item { position: static; details { summary .submenu-trigger { padding: 1rem 0; font-size: 18px; justify-content: space-between; width: 100%; } &[open] summary .arrow { transform: rotate(180deg); } } } .submenu { position: static; opacity: 1; visibility: visible; transform: none; background-color: transparent; box-shadow: none; padding: 0 0 1rem 1rem; border-left: 2px solid var(--color-primary); margin-top: 1rem; min-width: auto; a { color: var(--text-grey-dark); padding: 0.5rem 0; font-size: 16px; border-bottom: none; &:hover { color: var(--color-primary); transform: none; } } } .service-individual-section { min-height: 80dvh; } .testimonio-float { position: relative; left: auto; right: auto; top: auto; transform: none; width: 200px; height: 250px; margin: 0 auto 1.5rem; display: block; -webkit-animation: mobileFloat 4s ease-in-out infinite; animation: mobileFloat 4s ease-in-out infinite; } .testimonio-float-left, .testimonio-float-right { left: auto; right: auto; top: auto; transform: none; } } @media (min-width: 1024px) { .astronaut-floating { position: fixed; width: min(100%, 480px); height: auto; z-index: 100; top: 50%; opacity: 0; visibility: hidden; transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; transform: translateY(-20%); } .astronaut-floating.active { opacity: 1; visibility: visible; } .astronaut-floating img { width: 100%; height: auto; -webkit-filter: drop-shadow(0 0 20px rgba(221, 179, 8, 0.5)); filter: drop-shadow(0 0 20px rgba(221, 179, 8, 0.5)); -webkit-animation: astronaut-gentle-float 8s ease-in-out infinite; animation: astronaut-gentle-float 8s ease-in-out infinite; } /* Posiciones específicas por data-service */ .astronaut-floating[data-service="1"], .astronaut-floating[data-service="3"] { right: 8%; } .astronaut-floating[data-service="2"], .astronaut-floating[data-service="4"] { left: 8%; } /* Animación de flotación */ @-webkit-keyframes astronaut-gentle-float { 0%, 100% { transform: translateY(-50%) translateY(0) rotate(0deg); } 25% { transform: translateY(-50%) translateY(-15px) rotate(3deg); } 50% { transform: translateY(-50%) translateY(0) rotate(0deg); } 75% { transform: translateY(-50%) translateY(-10px) rotate(-3deg); } } @keyframes astronaut-gentle-float { 0%, 100% { transform: translateY(-50%) translateY(0) rotate(0deg); } 25% { transform: translateY(-50%) translateY(-15px) rotate(3deg); } 50% { transform: translateY(-50%) translateY(0) rotate(0deg); } 75% { transform: translateY(-50%) translateY(-10px) rotate(-3deg); } } } @media screen and (min-width: 1440px) { .partners { display: block; .partners_logos { position: absolute; top: 80px; right: 0; } } } .footer-since{ position: relative; background-image: url("../img/footer-since-marketing-digital.avif"); background-size: cover; background-position: center; min-height: 596px; section{ display: grid; gap: 2em; z-index: 2; .logo-footer{ width: 240px; height: 240px; margin-inline: auto; display: block; } ul{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-evenly; a{font-size: 16px;} } div{ display: flex; flex-wrap: wrap; gap: 2em; margin-inline: auto; text-align: center; justify-content: center; } } &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 25% 50%, rgba(1, 1, 1, 0.8) 0%, rgba(1, 1, 1, 0.3) 50%, transparent 80%), linear-gradient(135deg, rgba(1, 1, 1, 0.6) 0%, rgba(1, 1, 1, 0.1) 100%); z-index: 1; pointer-events: none; } }