/* ============================================================ VARIABLES & RESET ============================================================ */ :root { /* Nueva Paleta Global */ --harbor: #345b64; --depths: #2d555c; --lagoon: #1f464d; --abyss: #02171c; --tide: #254d52; --storm: #3e6773; --slate: #183e46; --mist: #4a727f; --marine: #11343e; --drift: #547e8f; --twilight: #032122; --cove: #0a2c2d; --brand-green-primary: #4cb79b; --brand-green-sec: #3fa48d; --gold: #bf935e; --gold-light: #d4ac7d; --white: #ffffff; /* Mapeo Funcional para compatibilidad */ --brand: var(--brand-green-primary); --brand2: var(--brand-green-sec); --brand3: var(--lagoon); --brand-dark: var(--abyss); --brand-dark2: var(--cove); --sun: var(--gold); --sun2: var(--gold-light); --sun-bg: #fffbeb; --green-bg: #eaf2f2; --page: #e1e9e9; --border: #e5e7eb; --border2: #cfdadd; /* Progreso de "pintado" de títulos fijo al 100% (sin depender de JS/scroll) */ --reveal-progress: 100%; --text: var(--harbor); --text2: var(--lagoon); --text3: var(--tide); --r-leaf: 80px 0 80px 0; --r: 20px; --sh: 0 4px 6px -1px rgba(0, 0, 0, 0.05); --shmd: 0 10px 15px -3px rgba(0, 0, 0, 0.08); --shlg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --section-pad: 6rem 0; --section-pad-lg: 8rem 0; --promo-banner-initial-height: 2.5rem; /* Altura inicial del promo banner */ --header-initial-height: 5rem; /* Altura inicial del header */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: "Inter", sans-serif; background-color: var(--page); /* Fondo: Malla de líneas circulares cruzadas comentada para un look más limpio background-image: repeating-radial-gradient(circle at 0% 0%, transparent 0, transparent 29px, rgba(76, 183, 155, 0.08) 30px, rgba(76, 183, 155, 0.08) 31px), repeating-radial-gradient(circle at 100% 100%, transparent 0, transparent 29px, rgba(76, 183, 155, 0.05) 30px, rgba(76, 183, 155, 0.05) 31px); */ background-repeat: no-repeat; background-attachment: fixed; color: var(--text); /* overflow-x lo maneja ; en rompía position:sticky */ line-height: 1.7; -webkit-font-smoothing: antialiased; min-height: 100vh; /* Asegura que el body ocupe toda la altura del viewport */ display: flex; /* Habilita flexbox para el sticky footer */ flex-direction: column; /* Apila los hijos verticalmente */ } section { margin: 0; border-radius: 0; margin: 0; border-radius: 0; } h1, h2, h3, h4, .font-heading { font-family: "Bricolage Grotesque", sans-serif; color: var(--text); } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } strong { font-weight: 700; } /* ============================================================ UTILITIES GENERALES ============================================================ */ .container { max-width: 90rem; /* Aumentado a 1440px para mayor amplitud */ margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } .text-gradient { background: linear-gradient(167deg, var(--brand) 45%, var(--brand3) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ============================================================ ANIMACIONES ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .reveal-anim { opacity: 0; } .reveal-anim.revealed { animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .reveal-left.revealed { animation-name: fadeInLeft; } .reveal-right.revealed { animation-name: fadeInRight; } .reveal-top.revealed { animation-name: fadeInDown; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .reveal-fade.revealed { animation-name: fadeIn; animation-duration: 1.5s; /* Aparición más suave y lenta */ animation-delay: 0.8s; /* Espera casi un segundo antes de empezar a mostrarse */ } /* Efecto de llenado de color progresivo por scroll */ .text-reveal-scroll { /* Doble capa de fondo: color de marca sobre color base (apagado) */ background-image: linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--text3), var(--text3)); background-repeat: no-repeat; background-position: left center; /* La primera capa (marca) empieza en 0%, la segunda (base) siempre al 100% */ background-size: 0% 100%, 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; /* Transición suave para evitar saltos en el scroll */ transition: background-size 0.1s linear; } /* Ajuste de color base para el efecto de revelado en secciones oscuras */ .section--dark .text-reveal-scroll { background-image: linear-gradient(var(--white), var(--white)), linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)); } @keyframes btn-shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } } .btn-shine-effect { position: relative; overflow: hidden; } .btn-shine-effect::after { display: none; } @keyframes pulse-attention { 0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(15, 139, 141, 0.3); } 50% { transform: scale(1.04); box-shadow: 0 4px 25px rgba(15, 139, 141, 0.5); } } .pulse-btn { animation: none; } /* ============================================================ BOTONES ============================================================ */ .btn-brand { display: inline-flex; align-items: center; justify-content: center; background-color: var(--brand); color: var(--white); border-radius: 100px; font-weight: 700; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(15, 139, 141, 0.25); cursor: pointer; border: none; } .btn-brand:hover { background-color: var(--brand2); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(15, 139, 141, 0.35); } .btn-dark-corp { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; background-color: var(--abyss); color: var(--white); border-radius: 100px; font-weight: 700; padding: 0.9rem 2rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); } .btn-dark-corp:hover { background-color: var(--lagoon); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .btn-wa { display: inline-flex; align-items: center; justify-content: center; background: #00a685; color: var(--white); border-radius: 100px; font-weight: 700; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(22, 197, 94, 0.25); cursor: pointer; gap: 0.5rem; } .btn-wa i { font-size: 1.25rem; } .btn-wa:hover { background: #008d6f; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22, 197, 94, 0.35); } /* ============================================================ CARDS ============================================================ */ .premium-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-leaf); transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 10px 30px -10px rgba(48, 79, 83, 0.08); } .premium-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -15px rgba(15, 139, 141, 0.15); border-color: var(--brand3); } /* ============================================================ PROMO BANNER ============================================================ */ .promo-banner { background: var(--brand-dark); color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; position: relative; z-index: 60; overflow: hidden; width: 100%; max-width: 100vw; display: block; position: fixed; /* Hacemos el promo banner fijo */ top: 0; left: 0; z-index: 10001; /* Aseguramos que esté por encima del header */ height: var(--promo-banner-initial-height); /* Usamos la altura inicial definida */ transition: height 0.3s ease, padding 0.3s ease, opacity 0.3s ease; /* Transición para ocultar */ } .promo-banner.hidden { height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; /* Cambiado de flex para permitir que el track se desborde */ } @media (max-width: 1023px) { /* Removed to make it visible on responsive */ /* .promo-banner { display: none; } */ } .promo-track { display: flex; width: max-content; animation: marquee 30s linear infinite; will-change: transform; } .promo-item { display: flex; align-items: center; gap: 1.5rem; padding: 0 4rem; white-space: nowrap; flex-shrink: 0; /* Evita que el texto se comprima */ } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .promo-banner span.highlight { color: var(--brand); /* Desactivamos el pulso para mantener la sobriedad en el movimiento lateral */ animation: none; margin-left: 5px; } @keyframes pulse-discount-mini { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; transform: scale(1.02); } } @media (min-width: 640px) { .promo-banner { font-size: 0.875rem; } } .promo-banner svg { width: 1rem; height: 1rem; color: var(--brand); } /* ============================================================ WHATSAPP FLOTANTE ============================================================ */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; background: #00a685; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); z-index: 1000; transition: all 0.3s ease; } .whatsapp-float:hover { transform: scale(1.1) rotate(5deg); background: #008d6f; } .whatsapp-float i { font-size: 2.2rem; } /* ============================================================ FOOTER ============================================================ */ footer { position: relative; overflow: hidden; background-color: var(--brand-dark); background-image: radial-gradient( circle at center, rgba(76, 183, 155, 0.15) 0%, transparent 30% ), repeating-radial-gradient( circle at 0% 0%, transparent 0, transparent 20px, rgba(255, 255, 255, 0.01) 21px, rgba(255, 255, 255, 0.01) 22px ), repeating-radial-gradient( circle at 100% 100%, transparent 0, transparent 20px, rgba(255, 255, 255, 0.01) 21px, rgba(255, 255, 255, 0.01) 22px ); background-size: 80% 80%, 30% 30%, 30% 30%; background-position: left -40% bottom 10%, left top, right bottom; background-repeat: no-repeat; color: #d1d5db; margin: 0; border-radius: 0; border: none; padding: 6rem 0 2rem; } @media (max-width: 767px) { footer { text-align: center; } .justify-self-center { justify-self: center; } .footer-logo img { margin: 0 auto 1rem; } .footer-col h4 { margin-bottom: 1rem; } .footer-col ul { align-items: center; } .footer-addresses { align-items: center; text-align: center; } .footer-socials { justify-content: center; } .footer-links { justify-content: center; } } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* ============================================================ FOOTER MARQUEE ============================================================ */ .footer-marquee { padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; width: 100vw; margin-left: calc(-50vw + 50%); background: rgba(0, 0, 0, 0.05); /* Sutil contraste de fondo */ } .marquee-slider .swiper-wrapper { transition-timing-function: linear !important; /* Movimiento constante sin aceleración/frenado */ } .marquee-item { width: auto !important; display: flex; align-items: center; gap: 4rem; padding: 0 2rem; } .marquee-text { font-family: "Inter", sans-serif; /* Usamos Inter para un look más integrado */ font-size: 4rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.08); white-space: nowrap; transition: color 0.4s ease; } .marquee-dot { width: 12px; height: 12px; background: var(--sun); border-radius: 50%; opacity: 0.3; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } } .footer-logo img { height: 2.5rem; width: auto; filter: brightness(0) invert(1); margin-bottom: 1rem; } .footer-logo p { font-size: 0.75rem; color: #9ca3af; line-height: 1.7; font-weight: 500; } .footer-cert { display: grid; padding-top: 2.5rem; } .footer-logo .footer-badge { font-size: 0.75rem; color: var(--sun); font-weight: 700; margin-top: 0.75rem; } .footer-col h4 { color: #fff; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .footer-col ul a { font-size: 0.75rem; font-weight: 600; transition: color 0.2s; } .footer-col ul a:hover { color: var(--brand); } .footer-addresses { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.75rem; font-weight: 600; } .footer-addresses strong { color: #fff; display: block; } .footer-addresses span { color: #9ca3af; display: block; } .footer-socials { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .social-btn { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; color: #d1d5db; } .social-btn svg { width: 1rem; height: 1rem; fill: currentColor; } .social-btn--yt:hover { background: #dc2626; } .social-btn--li:hover { background: #2563eb; } .social-btn--ig:hover { background: #db2777; } .footer-store { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1rem; } .footer-store .store-title { color: var(--sun); font-size: 0.75rem; font-weight: 700; display: block; margin-bottom: 0.25rem; } .footer-store p { font-size: 0.625rem; color: #9ca3af; line-height: 1.5; } .footer-copy { padding-top: 2rem; text-align: center; font-size: 0.625rem; color: #6b7280; font-weight: 600; } .footer-links { display: flex; justify-content: center; gap: 1rem; margin-top: 0.5rem; } .footer-links a { transition: text-decoration 0.2s; } .footer-links a:hover { text-decoration: underline; } .footer-links span { color: #4b5563; } /* ============================================================ PAGE HERO — banner compartido de páginas internas Gradiente: blanco sólido arriba → transparente abajo Texto centrado, altura fija, imagen de fondo ============================================================ */ .page-hero { position: relative; min-height: 850px; display: flex; align-items: center; background-size: cover; background-position: center top; background-repeat: no-repeat; overflow: hidden; margin: 0 !important; /* Ancho máximo sin márgenes */ border-radius: 0 !important; /* Sin redondeo */ } /* Capa de difuminado: blanco arriba → transparente abajo */ .page-hero::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: linear-gradient( to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.92) 25%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0) 100% ); z-index: 1; pointer-events: none; } /* Versión oscura: para fondos con overlay negro (quiénes somos, gran escala) */ .page-hero--dark::before { background: linear-gradient( to bottom, rgba(2, 23, 28, 1) 0%, rgba(2, 23, 28, 0.95) 35%, rgba(2, 23, 28, 0.6) 70%, rgba(2, 23, 28, 0) 100% ); } .page-hero .container { position: relative; z-index: 2; width: 100%; } .page-hero-content { text-align: center; max-width: 57rem; margin: 0 auto; padding: 0rem 0 4rem; /* Subimos el contenido un poco más */ } @media (min-width: 1024px) { .page-hero-content { padding: 0rem 0 5rem; /* El título ahora respira mejor cerca del header */ } .page-hero { min-height: 1000px; /* Altura estándar Premium */ } } .page-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--green-bg); color: var(--brand2); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.4rem 0.9rem; border-radius: 9999px; margin-bottom: 1.5rem; } .page-hero--dark .page-hero-badge { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fcd34d; } .page-hero-content h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: #111827; margin-bottom: 1.25rem; } .page-hero--dark .page-hero-content h1 { color: #fff; } @media (min-width: 640px) { .page-hero-content h1 { font-size: 3.25rem; } } @media (min-width: 1024px) { .page-hero-content h1 { font-size: 4rem; } } .page-hero-content p { font-size: 1.125rem; color: var(--text2); font-weight: 500; max-width: 38rem; margin: 0 auto 2.25rem; line-height: 1.7; } .page-hero--dark .page-hero-content p { color: #d1d5db; } @media (min-width: 640px) { .page-hero-content p { font-size: 1.25rem; } } .page-hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .page-hero-btns a { padding: 1rem 2rem; font-size: 1rem; gap: 0.5rem; } /* ============================================================ UTILIDAD: SECCIÓN UNIFORME ============================================================ */ .section { padding: var(--section-pad); } .section--light { background: transparent; } .section--soft { background: transparent; } .section--dark { position: relative; overflow: hidden; background-color: var(--brand-dark); background-image: radial-gradient( circle at center, rgba(76, 183, 155, 0.15) 0%, transparent 30% ), repeating-radial-gradient( circle at 0% 0%, transparent 0, transparent 20px, rgba(255, 255, 255, 0.01) 21px, rgba(255, 255, 255, 0.01) 22px ), repeating-radial-gradient( circle at 100% 100%, transparent 0, transparent 20px, rgba(255, 255, 255, 0.01) 21px, rgba(255, 255, 255, 0.01) 22px ); background-size: 80% 80%, 30% 30%, 30% 30%; background-position: left -40% bottom 10%, left top, right bottom; background-repeat: no-repeat; color: #fff; } .section-title { font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; color: #111827; margin-bottom: 1rem; } @media (min-width: 640px) { .section-title { font-size: 3rem; } } .section--dark .section-title { color: #fff; } .section-subtitle { font-size: 1.125rem; color: var(--text2); font-weight: 500; max-width: 44rem; margin: 0 auto; line-height: 1.7; } .section--dark .section-subtitle { color: #d1d5db; } /* ============================================================ ALIANZAS / ASOCIADOS (Global) ============================================================ */ .section-alianzas { padding: 5rem 0; background: transparent; } .alianzas-label { font-size: 0.75rem; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; display: block; text-align: center; margin-bottom: 1.5rem; } .alianzas-image-wrap { max-width: 1186px; margin: 0 auto; padding: 0 1rem; opacity: 0.8; transition: opacity 0.3s ease; } .alianzas-image-wrap:hover { opacity: 1; } /* ============================================================ SOCIAL MEDIA SIDEBAR (STICKY/FIXED) ============================================================ */ .social-float { position: fixed; left: 0; top: 30%; transform: translateY(-50%); z-index: 100000; display: flex; flex-direction: column; gap: 2px; } .social-float-btn { width: 44px; height: 44px; background-color: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 0 6px 6px 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; text-decoration: none; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); } .social-float-btn:hover { width: 54px; padding-left: 10px; background-color: var(--brand2); } .social-float-btn i { font-size: 1.2rem; } .social-float-tooltip { position: absolute; left: 100%; top: 50%; transform: translateY(-50%) translateX(15px); background: var(--brand-dark); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; box-shadow: var(--shlg); } .social-float-btn:hover .social-float-tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(8px); } .social-float-btn[aria-label="Facebook"]:hover { background-color: #1877f2; } .social-float-btn[aria-label="Instagram"]:hover { background-color: #e4405f; } .social-float-btn[aria-label="YouTube"]:hover { background-color: #ff0000; } .social-float-btn[aria-label="LinkedIn"]:hover { background-color: #0077b5; } /* ============================================================ LAYOUT: STICKY VERTICAL LIST (Shared Utility) ============================================================ */ .process-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: stretch; } @media (min-width: 1024px) { .process-layout { grid-template-columns: 4.5fr 7.5fr; gap: 6rem; } } .process-sticky-col { height: 100%; } .process-sticky { position: -webkit-sticky !important; position: sticky !important; top: 150px; height: fit-content; align-self: start; z-index: 20; } @media (max-width: 1023px) { .process-sticky { position: relative !important; top: 0 !important; margin-bottom: 3.5rem; text-align: center; /* Centramos para que actúe como encabezado en móvil */ } .process-sticky .section-label { justify-content: center; } .process-sticky .section-desc-corp { margin-left: auto; margin-right: auto; } .process-sticky .warning-box { margin-top: 2rem !important; } } .process-steps-vertical { display: flex; flex-direction: column; gap: 2rem; } .step-item { display: flex; align-items: center; gap: 2.5rem; padding: 3.5rem 3rem; border-radius: var(--r-leaf); border: 1px solid var(--border); background: var(--white); transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1); opacity: 0; transform: translateX(30px); will-change: transform, opacity; } .step-item.revealed { opacity: 1; transform: translateX(0); } .step-item:hover { transform: translateY(-8px); box-shadow: var(--shlg); border-color: var(--brand); } .step-icon { width: 6rem; height: 6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; flex-shrink: 0; transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); perspective: 1000px; } .step-item:hover .step-icon { box-shadow: 0 10px 25px rgba(76, 183, 155, 0.2); } .step-item strong { display: block; font-size: 1.4rem; margin-bottom: 0.5rem; color: var(--text); font-family: "Bricolage Grotesque", sans-serif; } .step-item p { color: var(--text2); font-size: 1.1rem; line-height: 1.6; font-weight: 500; } .warning-box { /* border-left: 4px solid var(--brand); */ padding: 1.5rem 2rem; border-radius: 12px; display: flex; gap: 1.25rem; align-items: flex-start; line-height: 1.6; box-shadow: var(--sh); } /* Variante para que las cajas continúen hasta el fin de la página (derecha) */ .step-item--bleed { border-radius: var(--r) 0 0 var(--r) !important; border-right: none !important; position: relative; /* Eliminamos el recorte del contenedor padre inmediato si fuera necesario */ } .step-item--bleed::after { content: ""; position: absolute; top: -1px; /* Alinea con el borde superior de la caja */ bottom: -1px; /* Alinea con el borde inferior de la caja */ left: 99%; /* Empieza justo donde termina la caja (solape mínimo para evitar grietas) */ width: 100vw; /* Se extiende mucho más allá del borde de la pantalla */ background: inherit; /* Hereda el color de fondo (blanco) */ border-top: inherit; /* Hereda el estilo de borde superior */ border-bottom: inherit; /* Hereda el estilo de borde inferior */ box-shadow: 20px 0 25px -5px rgba(0, 0, 0, 0.1); /* Extiende la sombra hacia la derecha */ z-index: -1; pointer-events: none; } @media (max-width: 768px) { .social-float { display: none; } .step-item { flex-direction: column; text-align: center; padding: 3rem 1.5rem; gap: 1.5rem; } } @media (max-width: 1023px) { /* Desactivar efecto bleed en móviles para evitar scroll horizontal */ .step-item--bleed { border-radius: var(--r) !important; border-right: 1px solid var(--border) !important; margin-right: 0 !important; } .step-item--bleed::after { display: none !important; } } /* ============================================================ BOTONES TEMPORALES DE DEFINICIÓN ============================================================ */ .btn-sample { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.6rem 0.6rem 0.6rem 1.8rem; /* Padding asimétrico para el círculo */ border-radius: 100px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 0.95rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; text-decoration: none; white-space: nowrap; } .btn-icon-circle { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; } .btn-icon-circle i { font-size: 1rem; line-height: 1; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .btn-sample:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } /* ============================================================ BOTONES: ANIMACIÓN (btn-anim) ============================================================ */ .btn-anim .btn-icon-circle i { /* Estado inicial neutro para iconos que no son flechas */ transform: rotate(0deg); } .btn-anim .btn-icon-circle i.fa-arrow-right, .btn-anim .btn-icon-circle i.fa-arrow-up-right, .btn-anim .btn-icon-circle i.fa-chevron-right { /* Solo las flechas inician inclinadas */ transform: rotate(-45deg); } .btn-anim:hover .btn-icon-circle i { /* Efecto de rotación: Diagonal -> Derecha */ transform: rotate(0deg) scale(1.1); } .btn-anim:hover .btn-icon-circle i:not(.fa-arrow-right) { /* Si no es una flecha (ej. sobre, pdf), solo escala un poco */ transform: rotate(0deg) scale(1.2); } /* VARIANTES DE COLOR */ /* 1. Brand Primary (Verde Energy) */ .btn-brand-green-primary { background-color: var(--brand-green-primary); color: var(--abyss); } .btn-brand-green-primary .btn-icon-circle { background-color: var(--abyss); color: var(--brand-green-primary); } /* 2. Dark (Abyss) */ .btn-abyss { background-color: var(--abyss); color: var(--white); } .btn-abyss .btn-icon-circle { background-color: var(--brand-green-primary); color: var(--abyss); } /* 3. Gold (Premium) */ .btn-gold { background-color: var(--gold); color: var(--white); } .btn-gold .btn-icon-circle { background-color: var(--abyss); color: var(--gold); } /* 4. Glass Light (Blur blanco) */ .btn-glass-white { background: rgba(255, 255, 255, 0.8); /* Más sólido para que se note el blanco */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--abyss); color: var(--abyss); } /* 5. Glass Dark (Blur oscuro) */ .btn-glass-abyss { background: rgba(2, 23, 28, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--white); } /* ============================================================ FIXES RESPONSIVE GLOBALES (móvil) ============================================================ */ @media (max-width: 560px) { /* Botones con etiquetas largas: que ajusten en vez de desbordar */ .btn-sample, .btn-brand, .btn-dark-corp, .btn-primary-corp { white-space: normal; max-width: 100%; text-align: left; } }