/* universal.css OPTIMIZADO - CSS moderno con funciones nativas */ /* h3, p, li y a base: movidos a critical.css (primer pantallazo, evita CLS) */ /* Enlaces en secciones con fondo claro */ :is(.post_content, .paquete-content, .cta-option, .bg_white) a { color: var(--text-black); &:hover { color: var(--color-primary); } } small { font-size: 90%; font-weight: 900; display: block; color: var(--text-primary); } /* 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; -webkit-border-before: 4px solid currentColor; border-block-start: 4px solid currentColor; transition: transform 0.3s ease; } .has-submenu:hover .arrow-down { transform: rotate(180deg); } /* Listas optimizadas */ ol li { -webkit-margin-start: 3em; 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 { -webkit-border-after: 2px dotted var(--color-secondary); border-block-end: 2px dotted var(--color-secondary); display: flex; padding-block: 1.2em; padding-inline: 1rem; flex-wrap: wrap; gap: 1em; inline-size: 100%; &:nth-child(even) { /* se adapta al color del texto: legible en fondo oscuro y claro */ background-color: color-mix(in srgb, currentColor 8%, transparent); } } th { font-weight: 900; } td, th { flex: 1 0 200px; } } /* CTA con logical properties */ .bg_cta { position: relative; overflow: hidden; padding-block: var(--space-lg, 4rem); min-height: 500px; display: grid; place-items: center; p { font-size: clamp(1.5rem, 1.4rem + 0.2.5vw, 2rem); font-weight: bold; color: ffffff; } &::before { content: ""; position: absolute; inset: -50% 0 0 0; height: 200%; background-image: url('/img/parallax.avif'); background-size: cover; background-position: center; will-change: transform; transform: translateY(var(--parallax-y, 0px)); z-index: 0; } &::after { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 7, 0.578); z-index: 1; } .wrapper { position: relative; z-index: 2; } } /* Background optimizado */ .bg_white { background-image: url('../img/bg-logos-clientes-since.avif'); background-size: cover; background-position: center; min-block-size: 20vh; } /* .two_columns y .two_columns_left: movidos a critical.css (hero de servicios, evita CLS) */ .three_columns { display: flex; flex-wrap: wrap; gap: 3em; justify-content: center; align-items: flex-start; -webkit-margin-after: 4em; margin-block-end: 4em; > div { position: relative; width: 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); } } :is(h4, .h4) { font-size: 24px; max-inline-size: 296px; margin: 0; } } /* Utilidades de texto (.text_center, .text-primary, .highlight...): movidas a critical.css (hero, evita CLS) */ /* Keyframes de WhatsApp/tooltip (las reglas que los usan estan en critical.css) */ /* Animaciones optimizadas */ @-webkit-keyframes whatsappFloat { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } } @keyframes whatsappFloat { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } } @-webkit-keyframes whatsappPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } @keyframes whatsappPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } /* Animaciones del tooltip */ @-webkit-keyframes tooltipSlideIn { from { transform: translateY(20px) scale(0.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes tooltipSlideIn { from { transform: translateY(20px) scale(0.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @-webkit-keyframes tooltipPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes tooltipPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* =================================== ACCESIBILIDAD ================================= */ @media (prefers-reduced-motion: reduce) { .whatsapp-float, .scroll-to-top, .three_columns img { -webkit-animation: none !important; animation: none !important; transition: none !important; } .whatsapp-float::before { -webkit-animation: none !important; 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; } } } :root { --transition-standard: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-hover: transform 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: -webkit-fill-available; -o-object-fit: cover; object-fit: cover; } } /* 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 { margin-bottom: 0.45em; } h2 + p { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); color: #c8c8cc; } &.text_center h2 + p { max-width: 52ch; margin-inline: auto; } } /* 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); max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; height: auto; } .partners { position: relative; display: grid; gap: 3em; align-items: center; .partners_content { width: min(100%, 600px); } } /* Grid de logos de partners (Kommo, Google Ads, Meta, LinkedIn, Leadsy, D'Noir) */ .partners_logo_label { color: var(--color-primary); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); text-align: center; margin-bottom: 1.25em; } .partners_logo_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; width: 100%; } .partners_logo_grid li { position: relative; display: grid; place-items: center; padding: 1.5em 1.25em; min-height: 128px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.09); transition: var(--transition-standard); overflow: hidden; &:hover { transform: var(--transform-lift); border-color: var(--color-primary); } &::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; filter: blur(30px); z-index: -1; opacity: 0.5; } &[data-glow="gold"]::before { background: radial-gradient(ellipse at center, rgba(221,179,8,0.7) 0%, transparent 70%); } &[data-glow="blue"]::before { background: radial-gradient(ellipse at center, rgba(37,99,235,0.65) 0%, transparent 70%); } &[data-glow="cyan"]::before { background: radial-gradient(ellipse at center, rgba(103,232,249,0.5) 0%, transparent 70%); } &[data-glow="green"]::before { background: radial-gradient(ellipse at center, rgba(167,243,208,0.45) 0%, transparent 70%); } &[data-glow="purple"]::before { background: radial-gradient(ellipse at center, rgba(196,148,255,0.5) 0%, transparent 70%); } } .partners_logo_grid img { max-width: 100%; width: auto; height: auto; max-height: 78px; -o-object-fit: contain; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)); position: relative; z-index: 1; } /* 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-hidden { opacity: 0; } &.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; } } } .right { display: grid; } /* 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, .h3, p) { color: var(--text-grey); margin: 0; } :is(h3, .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, .h3 { color: var(--color-dark); } } .categories-container { padding: 8em 0; :is(h3, p.h3):not(.h4) { 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, .h3, p) { max-width: 600px; } } .post_content{ display: grid; grid-template-columns: 1fr 400px; gap: 2em; align-items: start; background: var(--bg-content); padding: 3rem 2rem; margin: 3rem 0; color: var(--text-black); border-radius: var(--radius-sm); box-shadow: 0 2px 24px rgba(0,0,0,0.18); h2, h3, .h3{color: var(--text-black);} p, li{color: var(--text-black);} } .post_aside{ position: -webkit-sticky; position: sticky; top: 120px; display: grid; justify-items: start; border-left: 2px solid var(--text-grey-dark); box-shadow: var(--shadow-card); padding-top: 1.5rem; padding-left: 1.5rem; p:not(.h3, .h4){font-size: 0.98rem;} .btn{margin-top: 2em;} } @media (max-width: 768px) { .post_content { margin-right: 0; grid-template-columns: 1fr; } .post_aside { position: relative; top: 0; width: 100%; height: auto; margin: 2rem 0; right: 0; } } /* 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; text-align: center; 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 { background-color: var(--bg-grey); .popular-badge{ background-color: var(--bg-main); padding: 8px; text-transform: uppercase; text-align: center; border-radius: 12px 12px 0 0; } &.featured { border: 4px solid 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: var(--bg-content); background-size: cover; background-position: center; opacity: 0.95; h4, .h4 { color: var(--text-black); margin-bottom: 1rem; } p, .service-results, .service-results li{color: var(--text-black);} .paquete-kicker { color: var(--color-primary-dark); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 0; } } .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: #ede9e3; 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; } .valor__precio { 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; } /* Precio mensual con descuento (tarjetas de planes) */ .precio-antes { text-decoration: line-through; color: var(--text-black); opacity: 0.7; font-size: 1.1rem; } .precio-plan { display: flex; align-items: baseline; gap: 0.75rem; margin: 0.5rem 0 1rem; .precio-actual { font-size: 2.25rem; font-weight: var(--fw-black); color: var(--text-black); small { font-size: 1rem; font-weight: var(--fw-bold); color: var(--text-black); opacity: 0.7; } } } /* Banner de oferta en implementación */ .implementacion-banner { display: grid; gap: 0.5rem; place-items: center; max-width: min(100%, 620px); margin: 2rem auto 3rem; padding: 1.5rem 2rem; background: var(--bg-content); border: 2px dashed var(--color-primary); border-radius: var(--radius-sm); text-align: center; .implementacion-banner__label { color: var(--color-primary-dark); font-weight: var(--fw-bold); text-transform: uppercase; font-size: 0.85rem; margin: 0; } .implementacion-banner__precio { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; strong { font-size: 1.75rem; color: var(--text-black); } } } /* Space services - páginas de ciudades */ .space-services { background: var(--bg-main); padding-block: 5rem; .services { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; align-items: start; } .highlighted-title { grid-column: 1 / -1; } .text-left.flow { display: contents; } .hover { background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--radius-sm); padding: 2rem; h3, .h3 { color: var(--text-primary); } &:hover { border-color: var(--color-primary); background: rgb(255 255 255 / 0.07); } } } /* 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; text-align: center; p { max-width: 60ch; } } } .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); } } /* 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, .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; color: var(--text-black); opacity: 0.75; } } /* 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(--text-primary); &:hover { transform: translateY(-2px); 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, .h3 { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.3; p{font-size: 16px; } a { color: var(--text-primary); text-decoration: none; transition: color 0.2s ease; &:hover { color: var(--color-primary); } } } .table_blog { position: relative; tr { -webkit-border-after: 2px dotted var(--grey-1); 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; } } } .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); } } /* Blog filter buttons */ .blog-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; } .blog-filter-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; background: var(--bg-grey); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 100px; font-size: 0.9rem; font-weight: 600; color: var(--text-grey-dark); cursor: pointer; transition: var(--transition-standard); white-space: nowrap; &:hover { border-color: var(--color-primary); color: var(--color-primary); } &.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-black); } .filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem; background: rgba(255, 255, 255, 0.15); border-radius: 100px; font-size: 0.75rem; font-weight: 700; } &.active .filter-count { background: rgba(0, 0, 0, 0.15); } } /* Category navigation */ .categories-navigation { background: var(--bg-grey); padding: 2rem; border-radius: var(--radius-sm); 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 auto; 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, .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, .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: flex-start; list-style: none; gap: 1rem; } .breadcrumbs li{ margin: 0; &:last-child { font-size: 0.95rem; color: var(--text-grey); } &:not(:last-child)::after { content: "→"; margin-left: 1rem; color: var(--text-grey); } } .breadcrumbs a { color: var(--color-primary); text-decoration: none; font-size: 0.95rem; } .breadcrumbs a:hover { text-decoration: underline; } /* Newsletter CTA */ .blog-newsletter-cta { background: var(--bg-grey); padding: 3rem 2rem; border-radius: var(--radius-sm); 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(--bg-content); padding: 2rem; border-radius: var(--radius-sm); &:hover { border-color: var(--color-primary); transform: translateY(-4px); } h3, .h3 { color: var(--text-black); margin-bottom: 1rem; } p { color: var(--text-black); } } .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-secondary); 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; } } /* =================================== CONTACT OPTIONS GRID - Página de contacto =================================== */ .contact-options-section { padding: 3rem 0; background: var(--bg-main); } .contact-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1000px; margin: 0 auto; } .contact-option { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 3rem 2rem; background: var(--bg-grey); border-radius: var(--radius-sm); text-decoration: none; text-align: center; border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); &:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.03); } h3, .h3 { margin: 0; font-size: 1.5rem; color: var(--text-primary); } p { margin: 0; font-size: 1rem; color: var(--text-grey-dark); max-width: 100%; opacity: 0.9; } } .contact-option__icon { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; transition: all 0.4s ease; position: relative; &::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; transition: all 0.4s ease; } svg { transition: transform 0.4s ease; z-index: 2; } } .contact-option__cta { display: inline-block; padding: 0.85rem 1.75rem; border-radius: 50px; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; margin-top: 0.5rem; } /* WhatsApp */ .contact-option--whatsapp { &:hover { border-color: rgba(37, 211, 102, 0.4); box-shadow: 0 20px 40px rgba(37, 211, 102, 0.15); .contact-option__icon { transform: scale(1.1); &::after { border-color: rgba(37, 211, 102, 0.3); } } } .contact-option__icon { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: white; box-shadow: 0 8px 16px rgba(37, 211, 102, 0.2); } .contact-option__cta { background: #25D366; color: var(--color-dark); &:hover { background: #128C7E; transform: scale(1.05); } } } /* Phone */ .contact-option--phone { &:hover { border-color: rgba(221, 179, 8, 0.4); box-shadow: 0 20px 40px rgba(221, 179, 8, 0.15); .contact-option__icon { transform: scale(1.1); &::after { border-color: rgba(221, 179, 8, 0.3); } } } .contact-option__icon { background: linear-gradient(135deg, var(--color-primary) 0%, #f59e0b 100%); color: var(--color-dark); box-shadow: 0 8px 16px rgba(221, 179, 8, 0.2); } .contact-option__cta { background: var(--color-primary); color: var(--color-dark); &:hover { background: #f59e0b; transform: scale(1.05); } } } /* Email */ .contact-option--email { &:hover { border-color: rgba(37, 99, 235, 0.4); box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15); .contact-option__icon { transform: scale(1.1); &::after { border-color: rgba(37, 99, 235, 0.3); } } } .contact-option__icon { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2); } .contact-option__cta { background: #2563eb; color: white; &:hover { background: #1d4ed8; transform: scale(1.05); } } } /* Responsive */ @media (max-width: 900px) { .contact-options-grid { grid-template-columns: 1fr; max-width: 400px; } .contact-option { padding: 2rem 1.5rem; } } @media (min-width: 901px) and (max-width: 1100px) { .contact-options-grid { gap: 1.5rem; } .contact-option { padding: 2rem 1rem; } } /* =================================== SECCIÓN DE EQUIPO - Tarjetas estilo blog =================================== */ .equipo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 2rem; padding: 2rem 0; } .equipo-card { background-color: var(--bg-grey); border-radius: var(--radius-sm); overflow: hidden; transition: var(--transition-standard); border: 2px solid transparent; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); &:hover { transform: var(--transform-lift); border-color: var(--color-primary); box-shadow: var(--shadow-card-hover); } } .equipo-card-image { width: 100%; height: 280px; overflow: hidden; img { width: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.3s ease; } } .equipo-card:hover .equipo-card-image img { transform: scale(1.05); } .equipo-card-content { padding: 1.5rem; text-align: center; h3, .h3 { color: var(--text-primary); margin: 0 0 0.5rem 0; font-size: 1.25rem; } .equipo-cargo { color: var(--color-primary); font-weight: 700; font-size: 0.95rem; margin: 0 0 1rem 0; } .equipo-descripcion { color: var(--text-grey-dark); font-size: 0.9rem; line-height: 1.5; margin: 0; } } /* ============================================ BLOG POSTS GRID + CARDS ============================================ */ .blog-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2.5rem; margin-bottom: 4rem; } .blog-post-card { background: var(--bg-content); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); display: none; flex-direction: column; border: 1px solid rgba(0, 0, 0, 0.08); } .blog-post-card.card-visible { display: flex; -webkit-animation: cardFadeIn 0.5s ease-out forwards; animation: cardFadeIn 0.5s ease-out forwards; } @-webkit-keyframes cardFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes cardFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .blog-post-card.card-visible:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; border-color: var(--color-primary); } .blog-card-image { position: relative; aspect-ratio: 16/9; overflow: hidden; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-post-card:hover .blog-card-image img { transform: scale(1.05); } .blog-card-category { position: absolute; top: 1rem; left: 1rem; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--color-dark); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .blog-card-meta { display: flex; gap: 0.5rem; color: var(--color-dark); font-size: 0.85rem; margin-bottom: 0.75rem; } .blog-card-title { font-size: 1.25rem; line-height: 1.3; margin: 0 0 1rem 0; font-weight: 800; } .blog-card-title a { color: var(--text-black); text-decoration: none; background-image: linear-gradient(var(--color-primary), var(--color-primary)); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 3px; transition: background-size 0.3s; } .blog-post-card:hover .blog-card-title a { background-size: 100% 3px; } .blog-card-desc { font-size: 0.95rem; margin-bottom: 1.5rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-dark); } .blog-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid #eee; font-size: 0.85rem; color: var(--color-dark); } .blog-card-avatar { border-radius: 50%; margin-right: 0.5rem; } .blog-card-footer span { font-weight: 600; margin-right: auto; } .blog-card-link { color: var(--color-dark); font-weight: 700; text-decoration: none; } .blog-load-more-wrap { text-align: center; margin: 0 0 4rem; } .blog-no-more { color: var(--text-grey-dark); margin-top: 1rem; font-size: 0.9rem; } @media (max-width: 768px) { .blog-posts-grid { grid-template-columns: 1fr; } } /* Author bio - E-E-A-T */ .author-bio { margin-block: 2rem; .author-bio__header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .author-bio__photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .author-bio__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-grey-dark); margin: 0; } strong { display: block; font-size: 1.1rem; } p[itemprop="jobTitle"] { font-size: 0.9rem; color: var(--text-grey-dark); margin: 0; } } /* =================================== CIFRAS - Home .text_center fija inline-size: min(100%, 720px); en las fichas las apilaba en una sola columna. Se centra el texto sin esa clase. =================================== */ .stats .three_columns > div { text-align: center; } /* =================================== PRECIOS POR SERVICIO - Home =================================== */ .precios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; padding: 0; list-style: none; } .precio-card { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 2rem 1.75rem; background: #111313; border-radius: var(--radius-sm, 24px); h3, .h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--color-white, #fbfbfb); } .precio-valor { margin: 0; font-size: clamp(2rem, 1.75rem + 1vw, 2.5rem); font-weight: 900; line-height: 1; color: var(--color-primary, #ddb308); span { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; font-weight: 400; color: var(--text-grey, #c1c4ce); } small { display: inline; font-size: 1rem; font-weight: 700; letter-spacing: normal; } } .precio-nota { margin: 0; font-size: 0.95rem; color: var(--text-grey, #c1c4ce); } a { align-self: flex-start; margin-top: auto; font-size: 1rem; font-weight: 700; color: var(--color-primary, #ddb308); } } /* Párrafo centrado con enlaces. .text_center usa display: grid y convierte cada enlace en una celda (una palabra por línea); aquí solo se centra. */ .parrafo-centrado { max-width: 70ch; margin-inline: auto; margin-block-start: 2.5rem; text-align: center; } /* SLIDER INFINITO - Solo fixes esenciales para Safari/Opera */ .slider { /* Espacio profundo — 4 capas de estrellas con tamaños primos para evitar patrón visible */ background-color: #060d14; background-image: radial-gradient(circle, rgba(255,255,255,0.92) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,0.58) 1px, transparent 1px), radial-gradient(circle, rgba(200,218,255,0.38) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px); background-size: 97px 97px, 73px 89px, 53px 67px, 37px 43px; background-position: 13px 7px, 43px 61px, 17px 37px, 29px 53px; min-height: 20vh; display: grid; place-items: center; overflow: hidden; position: relative; padding: 52px 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); mask-composite: intersect; } /* Niebla nebulosa sobre las estrellas — no tapa el contenido */ .slider::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 15% 50%, rgba(22,38,46,0.65) 0%, transparent 55%), radial-gradient(ellipse 55% 90% at 82% 25%, rgba(37,99,235,0.10) 0%, transparent 55%), radial-gradient(ellipse 45% 55% at 55% 85%, rgba(179,149,59,0.09) 0%, transparent 50%); pointer-events: none; z-index: 0; } .gallery-slider { width: 100%; max-width: 1320px; overflow: hidden; position: relative; z-index: 1; } .slide-container { display: flex; gap: 4rem; width: calc(var(--items-count, 20) * 320px + var(--items-count, 20) * 4rem); -webkit-animation: slide 25s linear infinite; animation: slide 25s linear infinite; transform: translateZ(0); will-change: transform; } .slide-container:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .slide-container figure { flex: none; margin: 0; display: grid; place-items: center; width: 320px; position: relative; padding: 20px 28px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.09); } /* Halo nebulosa — se extiende fuera del card y queda DETRÁS del vidrio */ .slide-container figure::before { content: ''; position: absolute; inset: -40px; border-radius: 50%; filter: blur(36px); z-index: -1; opacity: 0.55; -webkit-animation: nebula-pulse 4s ease-in-out infinite alternate; animation: nebula-pulse 4s ease-in-out infinite alternate; } /* Rotación de colores por nth-child — crea variedad visual sin JS */ .slide-container figure:nth-child(6n+1)::before { background: radial-gradient(ellipse at center, rgba(221,179,8,0.7) 0%, transparent 70%); } .slide-container figure:nth-child(6n+2)::before { background: radial-gradient(ellipse at center, rgba(37,99,235,0.65) 0%, transparent 70%); } .slide-container figure:nth-child(6n+3)::before { background: radial-gradient(ellipse at center, rgba(103,232,249,0.5) 0%, transparent 70%); } .slide-container figure:nth-child(6n+4)::before { background: radial-gradient(ellipse at center, rgba(179,149,59,0.7) 0%, rgba(37,99,235,0.25) 60%, transparent 80%); } .slide-container figure:nth-child(6n+5)::before { background: radial-gradient(ellipse at center, rgba(167,243,208,0.45) 0%, transparent 70%); } .slide-container figure:nth-child(6n+6)::before { background: radial-gradient(ellipse at center, rgba(196,148,255,0.5) 0%, transparent 70%); } @-webkit-keyframes nebula-pulse { from { transform: scale(0.75); opacity: 0.35; } to { transform: scale(1.25); opacity: 0.7; } } @keyframes nebula-pulse { from { transform: scale(0.75); opacity: 0.35; } to { transform: scale(1.25); opacity: 0.7; } } /* Desfase de animación para que no pulsen todos al mismo tiempo */ .slide-container figure:nth-child(2n)::before { -webkit-animation-delay: -1.3s; animation-delay: -1.3s; } .slide-container figure:nth-child(3n)::before { -webkit-animation-delay: -2.6s; animation-delay: -2.6s; } .slide-container figure:nth-child(5n)::before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .slide-container img { height: 200px; width: auto; max-width: 270px; -o-object-fit: contain; object-fit: contain; image-rendering: -webkit-optimize-contrast; transform: translateZ(0); filter: drop-shadow(0 2px 10px rgba(0,0,0,0.65)); position: relative; z-index: 1; /* Placa clara detrás del logo: sin esto, los logos oscuros se pierden contra el fondo casi negro del slider (rgba blanco al 5%). */ background: rgba(255, 255, 255, 0.94); border-radius: 14px; padding: 14px 22px; box-sizing: border-box; } .equipo-img { height: auto; width: auto; max-width: 320px; -o-object-fit: contain; 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 */ @-webkit-keyframes slide { to { transform: translateX(-50%) translateZ(0); } } @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; padding: 14px 18px; } .slide-container figure::before { inset: -24px; filter: blur(22px); } .slide-container img { height: 80px; max-width: 170px; padding: 8px 14px; border-radius: 10px; } } /* Componente único de testimonios: tarjeta con monograma + cita, reutilizada en variante "split" (intro + pila desfasada) y variante "grid" (muro masonry). */ .testimonios { padding: 5rem 0; } /* Variante: intro a la izquierda + pila de tarjetas desfasada a la derecha */ .testimonios-split.two_columns { align-items: center; } .testimonios-intro { gap: 1.25rem; } .testimonios-flourish { display: inline-flex; width: 48px; height: 48px; color: var(--color-primary); } .testimonios-flourish svg { width: 100%; height: 100%; display: block; } .testimonios-cta { margin-top: 0.5rem; } .pila-testimonios { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; max-width: 460px; margin-inline: auto; } .pila-testimonios .testimonio-card { margin-bottom: 0; } .pila-testimonios .testimonio-card--destacado { transform: translateX(-2.5rem); z-index: 2; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45); } .pila-testimonios .testimonio-card--destacado:hover { transform: translateX(-2.5rem) translateY(-6px); } @media (max-width: 860px) { .pila-testimonios .testimonio-card--destacado, .pila-testimonios .testimonio-card--destacado:hover { transform: translateY(-4px); } } .testimonios-grid { columns: 3 320px; -webkit-column-gap: 1.5rem; column-gap: 1.5rem; width: min(100%, 1200px); margin-inline: auto; } .testimonio-card { display: inline-block; width: 100%; box-sizing: border-box; -webkit-column-break-inside: avoid; break-inside: avoid; margin-bottom: 1.5rem; padding: 2.25rem 1.75rem 1.5rem; background: linear-gradient(160deg, var(--bg-main, #141820) 0%, #000 75%); border: 1px solid rgba(221, 179, 8, 0.16); border-radius: 20px; position: relative; transition: var(--transition-standard, transform 0.35s ease, border-color 0.35s ease); } .testimonio-card:hover { transform: var(--transform-lift, translateY(-6px)); border-color: var(--color-primary); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35); } .testimonio-card--destacado { background: linear-gradient(160deg, rgba(221, 179, 8, 0.16) 0%, #000 75%); border-color: var(--color-primary); } .testimonio-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .testimonio-monograma { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--color-primary); background: rgba(221, 179, 8, 0.1); color: var(--color-primary); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; } .testimonio-comillas { display: inline-flex; width: 30px; height: 22px; color: var(--color-primary); opacity: 0.7; } .testimonio-comillas svg { width: 100%; height: 100%; display: block; } .testimonio-texto { color: #fff; font-size: 1.05rem; line-height: 1.65; font-style: italic; margin: 0 0 1.75rem; } .testimonio-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.09); } .testimonio-datos { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .testimonio-datos strong { color: #fff; font-size: 0.92rem; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testimonio-datos span { color: var(--color-primary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } .testimonio-metric { color: var(--text-grey-dark, #e7e7e7) !important; text-transform: none !important; opacity: 0.8; } .testimonio-estrellas { color: var(--color-primary); font-size: 0.7rem; letter-spacing: 1px; align-self: start; white-space: nowrap; } @media (max-width: 640px) { .testimonios-grid { columns: 1; } } /* Variante: filas a todo el ancho con imagen (logo/foto) a un lado y cita al otro */ .testimonios-filas { display: flex; flex-direction: column; gap: 3.5rem; width: min(100%, 1080px); margin-inline: auto; } .testimonio-fila { display: flex; align-items: center; gap: 3rem; } .testimonio-fila--invertida { flex-direction: row-reverse; } .testimonio-fila-imagen { flex: 0 0 260px; } .testimonio-fila-imagen-inner { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; border: 1px solid rgba(221, 179, 8, 0.25); border-radius: 20px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25); } .testimonio-fila-imagen-inner img { width: 100%; height: auto; object-fit: contain; } .testimonio-fila-contenido { flex: 1; min-width: 0; } .testimonio-fila-contenido .testimonio-comillas { margin-bottom: 1rem; } .testimonio-fila-contenido .testimonio-texto { font-size: 1.2rem; margin-bottom: 1.5rem; } .testimonio-fila-contenido .testimonio-footer { border-top: none; padding-top: 0; } @media (max-width: 720px) { .testimonio-fila, .testimonio-fila--invertida { flex-direction: column; gap: 1.5rem; text-align: center; } .testimonio-fila-imagen { flex: 0 0 auto; width: 180px; } .testimonio-fila-contenido .testimonio-comillas { margin-inline: auto; } .testimonio-fila-contenido .testimonio-footer { flex-direction: column; gap: 0.5rem; } } @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; } @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); } } .partners { grid-template-columns: minmax(320px, 480px) 1fr; gap: 4em; } } @media (max-width: 768px) { .equipo-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; } .equipo-card-content { padding: 1rem; h3, .h3 { font-size: 1.1rem; } .equipo-cargo { font-size: 0.85rem; } } } .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; } }