/* ============================================================ AUTOMATIZA AIA — HIGH-VALUE ENTERPRISE DESIGN SYSTEM Posicionamiento: Arquitecto de Transformación Empresarial con IA CRO-Optimized | Mobile-First | Executive Authority ============================================================ */ /* Las fuentes se cargan con en el de cada pagina, no aqui: un @import dentro de la hoja obliga a descargar y parsear este fichero antes de descubrirlas, y desperdicia el preconnect ya declarado. */ /* ─── DESIGN TOKENS ─── */ :root { /* ═══ PALETA DE AUTORIDAD EJECUTIVA ═══ */ --color-primary: #10b981; /* Esmeralda de transformación */ --color-primary-dark: #047857; --color-primary-light: #34d399; --color-primary-pale: rgba(16, 185, 129, 0.08); --color-primary-glow: rgba(16, 185, 129, 0.25); /* Acentos de prestigio */ --color-gold: #e2c974; /* Oro / Champán sutil */ --color-gold-light: #fef08a; --color-accent: #38bdf8; /* Cyan técnico */ --color-accent-pale: rgba(56, 189, 248, 0.08); /* ═══ FONDOS PROFUNDOS (Obsidian / Slate / Navy) ═══ */ --bg-darkest: #040711; --bg-dark: #080d1a; --bg-card: #0f172a; --bg-card-elevated: #141e36; --bg-card-hover: #182442; --bg-surface: #1e293b; /* ═══ BORDES & CRISTAL ═══ */ --border-subtle: rgba(255, 255, 255, 0.07); --border-card: rgba(255, 255, 255, 0.10); --border-card-hover: rgba(16, 185, 129, 0.35); --glass-bg: rgba(15, 23, 42, 0.75); --glass-blur: blur(16px); /* ═══ TEXTO & CONTRASTE ═══ */ --text-white: #ffffff; --text-primary: #f8fafc; --text-body: #cbd5e1; --text-muted: #94a3b8; /* Subido de #64748b a #94a3b8 el 26-ago-2026: sobre --bg-dark el anterior daba ~4.0:1, por debajo del minimo de 4.5:1 para texto normal. Afectaba al selector de idioma, las etiquetas de los casos, la cabecera del calendario y el copyright. */ --text-subtle: #94a3b8; /* ═══ TIPOGRAFÍA ═══ */ --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* ═══ SOMBRAS & EFECTOS ═══ */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 50px rgba(16, 185, 129, 0.18); --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.45); /* ═══ ESPACIADO & MEDIDAS ═══ */ --container-w: 1240px; --section-pad: 6.5rem 0; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ═══ TRANSICIONES ═══ */ --t-fast: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); --t-smooth: all 0.32s cubic-bezier(0.16, 1, 0.3, 1); } /* ─── RESET & BASE ─── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100vw; background-color: var(--bg-darkest); } body { font-family: var(--font-sans); background-color: var(--bg-darkest); color: var(--text-body); line-height: 1.68; overflow-x: hidden; max-width: 100vw; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; transition: var(--t-fast); } img { max-width: 100%; display: block; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; } /* ─── CONTENEDOR & LAYOUT ─── */ .container { max-width: var(--container-w); margin: 0 auto; padding: 0 1.5rem; } .section-pad { padding: var(--section-pad); position: relative; } /* ─── TIPOGRAFÍA DE AUTORIDAD ─── */ h1, h2, h3, h4, h5 { color: var(--text-white); font-family: var(--font-sans); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .font-serif, .text-serif { font-family: var(--font-serif); font-style: italic; font-weight: 600; } .text-gradient { background: linear-gradient(135deg, var(--color-primary-light), #6ee7b7 50%, var(--color-gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-gold { background: linear-gradient(135deg, #fff, var(--color-gold-light) 60%, var(--color-gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── SECTION HEADERS ─── */ .section-tag { display: inline-flex; align-items: center; gap: 0.55rem; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.22); color: var(--color-primary-light); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.38rem 0.95rem; border-radius: var(--r-pill); margin-bottom: 1.25rem; } .section-tag .dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; box-shadow: 0 0 8px var(--color-primary); animation: pulse-dot 2.2s infinite ease-in-out; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } } .section-title { font-size: clamp(2rem, 3.8vw, 3.15rem); color: var(--text-white); margin-bottom: 1.15rem; letter-spacing: -0.025em; font-weight: 800; } .section-title span { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--color-primary-light); } .section-subtitle { font-size: 1.08rem; color: var(--text-muted); max-width: 640px; line-height: 1.72; } .section-header { text-align: center; margin-bottom: 3.75rem; } .section-header .section-subtitle { margin: 0 auto; } /* ─── BOTONES ─── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; background: linear-gradient(135deg, #10b981, #059669); color: #ffffff; font-weight: 700; font-size: 0.94rem; letter-spacing: 0.02em; padding: 0.88rem 1.95rem; border-radius: var(--r-pill); transition: var(--t-smooth); box-shadow: 0 4px 20px rgba(16, 185, 129, 0.32); position: relative; overflow: hidden; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.15); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(16, 185, 129, 0.48); filter: brightness(1.06); color: #ffffff; } .btn-primary:active { transform: translateY(0); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font-weight: 600; font-size: 0.92rem; padding: 0.85rem 1.8rem; border-radius: var(--r-pill); border: 1px solid var(--border-card); transition: var(--t-smooth); } .btn-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); color: var(--text-white); transform: translateY(-2px); } .btn-hero { padding: 1.05rem 2.4rem; font-size: 1.02rem; box-shadow: 0 6px 32px rgba(16, 185, 129, 0.42); } /* ─── REVEAL: RETIRADO (27-ago-2026) ─── Estas clases nacían en opacity:0 y solo las revelaba un observer que corría cuando GSAP NO estaba. Con GSAP cargado, 44 elementos quedaban invisibles para siempre: "no carga ninguna sección". El contenido ya no se oculta NUNCA por CSS a la espera de JavaScript. */ .reveal, .reveal-left, .reveal-right, .reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; } /* ─── HEADER / NAVBAR ─── */ #main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0; transition: var(--t-smooth); } #main-nav.scrolled { background: rgba(4, 7, 17, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 1.5rem; } .nav-brand { display: flex; align-items: center; gap: 0.85rem; } .nav-brand img { height: 48px; width: auto; filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.3)); } .nav-menu { display: flex; align-items: center; gap: 1.8rem; } .nav-menu a { font-size: 0.86rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; transition: var(--t-fast); } .nav-menu a:hover, .nav-menu a.active { color: var(--text-white); } .nav-actions { display: flex; align-items: center; gap: 1.1rem; } .lang-switch { display: flex; align-items: center; gap: 0.35rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); padding: 0.25rem 0.6rem; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; } .lang-switch a { color: var(--text-subtle); padding: 0.15rem 0.35rem; border-radius: 4px; } .lang-switch a.lang-current { color: var(--color-primary-light); background: rgba(16, 185, 129, 0.12); } .nav-cta-btn { font-size: 0.84rem; padding: 0.6rem 1.25rem; border-radius: var(--r-pill); } .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; cursor: pointer; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-white); border-radius: 2px; transition: var(--t-fast); } /* ─── HERO SECTION ─── */ .hero-section { position: relative; padding-top: 130px; padding-bottom: 5.5rem; overflow: hidden; background: radial-gradient(circle at 50% 15%, rgba(16, 185, 129, 0.09) 0%, rgba(4, 7, 17, 0) 70%); } .hero-backdrop-glow { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 800px; height: 450px; background: radial-gradient(ellipse, rgba(16, 185, 129, 0.14), transparent 70%); pointer-events: none; filter: blur(60px); z-index: 0; } .hero-grid-pattern { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 70%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 70%, transparent 100%); pointer-events: none; z-index: 0; } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 980px; margin: 0 auto; } .hero-badge { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); color: var(--color-primary-light); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.45rem 1.25rem; border-radius: var(--r-pill); margin-bottom: 1.8rem; } .hero-title { font-size: clamp(2.4rem, 5.2vw, 4.35rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; color: var(--text-white); margin-bottom: 1.6rem; } .hero-title .text-serif { font-family: var(--font-serif); font-style: italic; font-weight: 600; display: inline-block; } .hero-subtitle { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--text-body); max-width: 780px; margin: 0 auto 2.4rem; line-height: 1.72; } .hero-cta-group { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; margin-bottom: 3.5rem; } .hero-guarantee { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--text-muted); } .hero-guarantee i { color: var(--color-primary-light); } .hero-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.85rem; margin-bottom: 3.5rem; } .hero-pill { display: inline-flex; align-items: center; gap: 0.55rem; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-card); padding: 0.55rem 1.1rem; border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 600; color: var(--text-primary); backdrop-filter: blur(10px); } .hero-pill i { color: var(--color-primary-light); } /* ─── VSL / SHOWCASE FRAME ─── */ .vsl-showcase-container { max-width: 920px; margin: 0 auto; position: relative; z-index: 2; } .vsl-frame-wrapper { position: relative; background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(255, 255, 255, 0.05)); padding: 2px; border-radius: var(--r-xl); box-shadow: var(--shadow-lg), 0 0 60px rgba(16, 185, 129, 0.15); } .vsl-frame { position: relative; border-radius: calc(var(--r-xl) - 2px); overflow: hidden; background: #000; aspect-ratio: 16/9; } .vsl-yt-facade { width: 100%; height: 100%; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; } .vsl-yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.88; transition: transform 0.6s ease, opacity 0.3s ease; } .vsl-yt-facade:hover .vsl-yt-poster { transform: scale(1.02); opacity: 0.95; } .vsl-play-overlay { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; background: none; border: none; } .vsl-play-circle { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), #059669); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; box-shadow: 0 0 35px rgba(16, 185, 129, 0.65); transition: var(--t-smooth); } .vsl-play-overlay:hover .vsl-play-circle { transform: scale(1.1); box-shadow: 0 0 50px rgba(16, 185, 129, 0.85); } .vsl-play-text { text-align: center; } .vsl-play-title { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); } .vsl-play-sub { color: rgba(255, 255, 255, 0.85); font-size: 0.84rem; margin-top: 0.2rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); } .vsl-sound-btn { position: absolute; right: 16px; bottom: 16px; z-index: 5; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); font-size: 1rem; transition: var(--t-fast); } .vsl-sound-btn:hover { background: var(--color-primary); border-color: var(--color-primary); } .vsl-yt-facade video.vsl-yt-iframe { pointer-events: none; width: 100%; height: 100%; object-fit: cover; } /* ─── EL PROBLEMA (4 CUELLOS DE BOTELLA) ─── */ .problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } .problem-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-xl); padding: 2.25rem; position: relative; transition: var(--t-smooth); } .problem-card:hover { border-color: rgba(239, 68, 68, 0.35); background: var(--bg-card-elevated); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); } .problem-icon-wrapper { width: 52px; height: 52px; border-radius: var(--r-lg); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.22); display: flex; align-items: center; justify-content: center; color: #f87171; font-size: 1.35rem; margin-bottom: 1.4rem; } .problem-card h3 { font-size: 1.28rem; font-weight: 700; margin-bottom: 0.85rem; color: var(--text-white); } .problem-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.68; margin-bottom: 1.25rem; } .problem-pain-badge { display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.18); color: #fca5a5; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: var(--r-pill); } .problem-highlight-box { margin-top: 2.75rem; background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(15, 23, 42, 0.9)); border-left: 4px solid #ef4444; border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 1.75rem 2rem; display: flex; align-items: center; gap: 1.5rem; } .problem-highlight-box p { font-size: 1.04rem; color: var(--text-primary); line-height: 1.65; margin: 0; } .problem-highlight-box strong { color: #fca5a5; } /* ─── EL MÉTODO AUTOMATIZA (7 PASOS) ─── */ .method-timeline { position: relative; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .method-step-card { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 2rem; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-xl); padding: 1.85rem 2.25rem; transition: var(--t-smooth); position: relative; } .method-step-card:hover { background: var(--bg-card-elevated); border-color: var(--border-card-hover); transform: translateX(6px); box-shadow: var(--shadow-card), var(--shadow-glow); } .method-num-badge { width: 72px; height: 72px; border-radius: var(--r-lg); background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--color-primary-light); flex-shrink: 0; } .method-step-content h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.45rem; color: var(--text-white); } .method-step-content p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.65; } .method-step-tag { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); background: rgba(226, 201, 116, 0.08); border: 1px solid rgba(226, 201, 116, 0.25); padding: 0.35rem 0.85rem; border-radius: var(--r-pill); white-space: nowrap; } /* ─── CASOS REALES (4 ESTUDIOS DE IMPACTO) ─── */ .cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .case-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-xl); padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: var(--t-smooth); } .case-card:hover { background: var(--bg-card-elevated); border-color: var(--border-card-hover); transform: translateY(-4px); box-shadow: var(--shadow-card), var(--shadow-glow); } .case-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .case-category { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); } .case-metric-badge { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.28); color: var(--color-primary-light); font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: var(--r-pill); } .case-title { font-size: 1.38rem; font-weight: 700; color: var(--text-white); margin-bottom: 1.25rem; line-height: 1.25; } .case-body { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.75rem; flex-grow: 1; } .case-row { display: flex; flex-direction: column; gap: 0.3rem; } .case-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); } .case-text { font-size: 0.92rem; color: var(--text-muted); line-height: 1.62; } .case-impact { background: rgba(16, 185, 129, 0.05); border-left: 3px solid var(--color-primary); padding: 0.85rem 1.15rem; border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 0.92rem; color: var(--text-primary); font-weight: 500; } /* ─── NÓMINA DIGITAL (9 TRABAJADORES CON IA) ─── */ .workers-highlight-banner { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(15, 23, 42, 0.85)); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--r-xl); padding: 1.75rem 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 3rem; } .workers-banner-text { display: flex; align-items: center; gap: 1rem; } .workers-banner-text i { font-size: 1.75rem; color: var(--color-primary-light); } .workers-banner-text p { font-size: 1rem; color: var(--text-primary); line-height: 1.6; } .workers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .worker-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-xl); padding: 2rem 1.75rem; transition: var(--t-smooth); display: flex; flex-direction: column; } .worker-card:hover { background: var(--bg-card-elevated); border-color: var(--border-card-hover); transform: translateY(-4px); box-shadow: var(--shadow-card); } .worker-icon-box { width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2); display: flex; align-items: center; justify-content: center; color: var(--color-primary-light); font-size: 1.25rem; margin-bottom: 1.25rem; } .worker-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-white); } .worker-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; flex-grow: 1; } .worker-footer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; font-size: 0.76rem; font-weight: 700; color: var(--color-primary-light); } /* ─── QUIÉN SOY / WILLIAM URIBE ─── */ .authority-grid { display: grid; grid-template-columns: 420px 1fr; gap: 3.5rem; align-items: center; } .authority-photo-card { position: relative; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(255, 255, 255, 0.05)); padding: 3px; } .authority-photo-inner { position: relative; border-radius: calc(var(--r-xl) - 3px); overflow: hidden; background: var(--bg-card); } .authority-photo-inner img { width: 100%; height: 480px; object-fit: cover; object-position: top center; display: block; } .authority-badge-floating { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; background: rgba(15, 23, 42, 0.92); border: 1px solid var(--border-card); backdrop-filter: blur(12px); padding: 1rem 1.25rem; border-radius: var(--r-lg); display: flex; align-items: center; gap: 0.85rem; } .authority-badge-floating i { color: var(--color-primary-light); font-size: 1.35rem; } .authority-badge-floating div { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); } .authority-info h2 { font-size: clamp(2rem, 3.5vw, 2.85rem); font-weight: 800; margin-bottom: 0.5rem; } .authority-role-title { font-size: 1.12rem; color: var(--color-primary-light); font-weight: 700; margin-bottom: 1.5rem; } .authority-bio { font-size: 1rem; color: var(--text-body); line-height: 1.74; margin-bottom: 1.25rem; } .credentials-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 1.8rem 0 2.2rem; } .credential-chip { display: flex; align-items: center; gap: 0.65rem; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-card); padding: 0.65rem 1rem; border-radius: var(--r-md); font-size: 0.84rem; font-weight: 600; color: var(--text-primary); } .credential-chip i { color: var(--color-primary-light); font-size: 1rem; } .authority-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .authority-socials { display: flex; align-items: center; gap: 0.65rem; } .social-icon-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.05rem; transition: var(--t-fast); } .social-icon-btn:hover { color: var(--color-primary-light); border-color: var(--color-primary-light); background: rgba(16, 185, 129, 0.1); transform: translateY(-2px); } /* ─── FILTRO DE CLIENTE IDEAL (CALIFICACIÓN) ─── */ .filter-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .filter-column { border-radius: var(--r-xl); padding: 2.75rem 2.25rem; position: relative; } .filter-column.yes { background: linear-gradient(135deg, rgba(16, 185, 129, 0.07), var(--bg-card)); border: 1px solid rgba(16, 185, 129, 0.28); } .filter-column.no { background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), var(--bg-card)); border: 1px solid rgba(239, 68, 68, 0.2); } .filter-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.75rem; } .filter-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .filter-column.yes .filter-icon { background: rgba(16, 185, 129, 0.15); color: var(--color-primary-light); } .filter-column.no .filter-icon { background: rgba(239, 68, 68, 0.12); color: #f87171; } .filter-header h3 { font-size: 1.35rem; font-weight: 800; } .filter-list { display: flex; flex-direction: column; gap: 1.15rem; } .filter-item { display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.96rem; line-height: 1.65; } .filter-column.yes .filter-item i { color: var(--color-primary-light); margin-top: 0.25rem; flex-shrink: 0; } .filter-column.no .filter-item i { color: #f87171; margin-top: 0.25rem; flex-shrink: 0; } /* ─── CAPTURA & DIAGNÓSTICO 360 (FORMULARIO + CALENDARIO) ─── */ .booking-section { position: relative; background: radial-gradient(circle at 50% 10%, rgba(16, 185, 129, 0.08), transparent 70%); } .booking-executive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-xl); padding: 3rem; box-shadow: var(--shadow-lg); } .booking-form-col h3, .booking-cal-col h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.65rem; color: var(--text-white); } .booking-form-col p, .booking-cal-col p { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.75rem; line-height: 1.6; } .form-group { margin-bottom: 1.15rem; } .form-label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.45rem; text-transform: uppercase; letter-spacing: 0.04em; } .form-input, .form-select { width: 100%; background: rgba(4, 7, 17, 0.6); border: 1px solid var(--border-card); color: var(--text-white); padding: 0.82rem 1.1rem; border-radius: var(--r-md); font-size: 0.92rem; transition: var(--t-fast); outline: none; } .form-input:focus, .form-select:focus { border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); background: rgba(4, 7, 17, 0.9); } .form-input::placeholder { color: var(--text-subtle); } .form-select option { background: #0f172a; color: #fff; } /* Calendario */ .cal-widget-container { background: rgba(4, 7, 17, 0.5); border: 1px solid var(--border-card); border-radius: var(--r-lg); padding: 1.5rem; } .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .cal-title { font-size: 1.05rem; font-weight: 700; color: var(--text-white); } .cal-nav { display: flex; gap: 0.4rem; } .cal-nav button { width: 32px; height: 32px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.05); color: var(--text-primary); display: flex; align-items: center; justify-content: center; transition: var(--t-fast); } .cal-nav button:hover { background: var(--color-primary); color: #fff; } .cal-days-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.76rem; font-weight: 700; color: var(--text-subtle); margin-bottom: 0.75rem; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; border-radius: var(--r-sm); color: var(--text-muted); cursor: pointer; transition: var(--t-fast); } .cal-day.empty { cursor: default; } .cal-day.available:hover { background: rgba(16, 185, 129, 0.2); color: var(--color-primary-light); } .cal-day.selected { background: var(--color-primary) !important; color: #fff !important; font-weight: 700; box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); } .cal-day.blocked, .cal-day.occupied { opacity: 0.25; cursor: not-allowed; } .time-slots { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); } .time-slots-title { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; } .slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-height: 160px; overflow-y: auto; padding-right: 4px; } .time-slot { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); padding: 0.45rem 0.6rem; border-radius: var(--r-sm); font-size: 0.78rem; font-weight: 600; text-align: center; color: var(--text-muted); cursor: pointer; transition: var(--t-fast); } .time-slot:hover { border-color: var(--color-primary-light); color: var(--text-white); background: rgba(16, 185, 129, 0.1); } .time-slot.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .time-slot.blocked { opacity: 0.25; cursor: not-allowed; } .cal-booking-form { display: none; margin-top: 1.5rem; } .cal-booking-form.show { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .booking-success { text-align: center; padding: 2.5rem 1.5rem; } .booking-success-icon { font-size: 3rem; color: var(--color-primary-light); margin-bottom: 1rem; } .booking-success h4 { font-size: 1.4rem; margin-bottom: 0.75rem; } .booking-success p { color: var(--text-body); font-size: 0.95rem; } .booking-success-sub { margin-top: 0.75rem; font-size: 0.88rem; color: var(--text-muted); } .booking-success-sub a { color: var(--color-primary-light); text-decoration: underline; } /* Fallback contact channels */ .contact-fallbacks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .contact-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-lg); padding: 1.5rem; display: flex; align-items: center; gap: 1rem; transition: var(--t-fast); } .contact-card:hover { border-color: var(--border-card-hover); background: var(--bg-card-elevated); } .contact-card-icon { width: 44px; height: 44px; border-radius: var(--r-md); background: rgba(16, 185, 129, 0.1); color: var(--color-primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .contact-card h4 { font-size: 0.96rem; font-weight: 700; margin-bottom: 0.2rem; } .contact-card p { font-size: 0.82rem; color: var(--text-muted); } /* ─── PREGUNTAS FRECUENTES (FAQ) ─── */ .faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .faq-item { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-lg); overflow: hidden; transition: var(--t-fast); } .faq-item:hover { border-color: rgba(255, 255, 255, 0.18); } .faq-question { padding: 1.35rem 1.65rem; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; user-select: none; } .faq-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--color-primary-light); transition: transform 0.3s ease; flex-shrink: 0; } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--color-primary); color: #fff; } .faq-answer { display: none; padding: 0 1.65rem 1.5rem; color: var(--text-muted); font-size: 0.94rem; line-height: 1.72; border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 1rem; } .faq-item.open .faq-answer { display: block; } /* ─── BLOG PREVIEWS ─── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .blog-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: var(--t-smooth); } .blog-card:hover { border-color: var(--border-card-hover); transform: translateY(-4px); box-shadow: var(--shadow-card); } .blog-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #080d1a; } .blog-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-card:hover .blog-thumb-img { transform: scale(1.05); } .blog-tag { position: absolute; top: 12px; left: 12px; background: rgba(4, 7, 17, 0.85); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-primary-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.25rem 0.65rem; border-radius: var(--r-pill); backdrop-filter: blur(8px); } .blog-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; } .blog-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.35; color: var(--text-white); } .blog-excerpt { color: var(--text-muted); font-size: 0.88rem; line-height: 1.62; margin-bottom: 1.25rem; flex-grow: 1; } .blog-read { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-primary-light); font-size: 0.85rem; font-weight: 700; } .blog-read:hover { gap: 0.75rem; } /* ─── FOOTER ─── */ #footer { background: #02040a; border-top: 1px solid var(--border-subtle); padding: 5rem 0 2.5rem; position: relative; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3.5rem; margin-bottom: 4rem; } .footer-brand img { height: 48px; width: auto; margin-bottom: 1.25rem; } .footer-tagline { color: var(--text-muted); font-size: 0.9rem; line-height: 1.68; max-width: 340px; margin-bottom: 1.5rem; } .footer-social { display: flex; gap: 0.65rem; } .footer-col h5 { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-white); margin-bottom: 1.25rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; } .footer-col a { color: var(--text-muted); font-size: 0.88rem; transition: var(--t-fast); } .footer-col a:hover { color: var(--color-primary-light); transform: translateX(2px); } .footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: 2rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--text-subtle); } .footer-legal { display: flex; align-items: center; gap: 0.75rem; } .footer-legal a { color: var(--text-muted); } .footer-legal a:hover { color: var(--text-white); } /* ─── BURBUJA FLOTANTE CHATWOOT / WHATSAPP ─── */ .wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; } .wa-bubble-sm { width: 54px; height: 54px; border-radius: 50%; background: var(--bg-card); border: 1px solid rgba(16, 185, 129, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--t-smooth); } .wa-bubble-sm:hover { transform: scale(1.08); border-color: var(--color-primary-light); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 30px rgba(16, 185, 129, 0.5); } .wa-bubble-sm img { width: 32px; height: 32px; } /* ─── RESPONSIVE & MOBILE DESIGN ─── */ @media (max-width: 1080px) { .workers-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .authority-grid { grid-template-columns: 1fr; gap: 2.5rem; } .authority-photo-inner img { height: 380px; } } @media (max-width: 900px) { .nav-menu { display: none; } .nav-hamburger { display: flex; } .problem-grid, .cases-grid, .filter-matrix, .booking-executive-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .contact-fallbacks { grid-template-columns: 1fr; } .method-step-card { grid-template-columns: 70px 1fr; gap: 1.25rem; } .method-step-tag { grid-column: span 2; justify-self: flex-start; } } @media (max-width: 640px) { :root { --section-pad: 4.5rem 0; } .hero-section { padding-top: 110px; } .workers-grid { grid-template-columns: 1fr; } .credentials-list { grid-template-columns: 1fr; } .booking-executive-grid { padding: 1.75rem; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } .workers-highlight-banner { flex-direction: column; text-align: center; } .workers-banner-text { flex-direction: column; } .method-step-card { grid-template-columns: 1fr; text-align: left; } .method-num-badge { width: 56px; height: 56px; font-size: 1.25rem; } } /* ============================================================ ACCESIBILIDAD — anadido el 26-ago-2026 ============================================================ */ /* Foco visible en todo lo que se pueda enfocar. Antes solo lo tenian los campos de formulario, asi que quien navega con el teclado no veia donde estaba al pasar por los botones, el menu y las llamadas a la accion. */ :focus-visible { outline: 3px solid var(--color-gold, #e2c974); outline-offset: 3px; border-radius: 4px; } /* Quien pide menos movimiento en su sistema deja de recibirlo. Hasta ahora esa preferencia solo apagaba el desplazamiento suave; las animaciones de entrada seguian corriendo igual. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ─── ENTRADA DEL HERO EN CSS PURO (27-ago-2026) ─── Sin GSAP, sin clases puestas por JS, sin plan B: la animación arranca en el primer pintado y SIEMPRE termina en visible (fill-mode both). Si el usuario prefiere menos movimiento, no hay animación y todo se ve de inmediato. */ @media (prefers-reduced-motion: no-preference) { @keyframes heroEntrada { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroEntradaEscala { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .hero-badge { animation: heroEntrada .6s ease-out both; } .hero-title { animation: heroEntrada .7s ease-out .12s both; } .hero-subtitle { animation: heroEntrada .7s ease-out .24s both; } .hero-cta-group { animation: heroEntrada .7s ease-out .36s both; } .hero-pills .hero-pill { animation: heroEntrada .6s ease-out .48s both; } .vsl-frame-wrapper { animation: heroEntradaEscala .8s ease-out .3s both; } } /* ============================================================ MÓVIL — REPARACIÓN Y CONVERSIÓN (27-ago-2026) El menú no abría (no existía el panel), un botón se salía 56 px de la pantalla, 24 zonas tocables medían menos de 40 px y la página eran 33 pantallas de scroll. Misma estructura, menos fricción. No se borra ni una palabra: se muestra menos de golpe. ============================================================ */ /* ─── 1. PANEL DEL MENÚ MÓVIL ─── */ .mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; max-height: 100dvh; overflow-y: auto; padding: 92px 1.35rem 2rem; background: var(--bg-darkest); border-bottom: 1px solid var(--border-card); box-shadow: var(--shadow-lg); transform: translateY(-100%); transition: transform .3s cubic-bezier(.16,1,.3,1); z-index: 998; } .mobile-menu.open { transform: translateY(0); } .mobile-menu nav { display: flex; flex-direction: column; } .mobile-menu nav a { display: flex; align-items: center; min-height: 52px; /* objetivo táctil cómodo */ padding: 0 .5rem; font-size: 1.05rem; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); } .mobile-menu nav a:active { color: var(--color-primary-light); } .mobile-menu-cta { width: 100%; margin-top: 1.5rem; min-height: 54px; font-size: 1rem; white-space: normal; } .mobile-menu-wa { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 50px; margin-top: .75rem; border-radius: var(--r-pill); border: 1px solid var(--border-card); color: var(--text-primary); font-weight: 600; } .mobile-menu-wa i { color: #25d366; font-size: 1.15rem; } /* La hamburguesa se vuelve una X al abrir, para que se vea que responde. */ #hamburger-btn { min-width: 44px; min-height: 44px; align-items: center; z-index: 999; } #hamburger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #hamburger-btn.active span:nth-child(2) { opacity: 0; } #hamburger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── 2. BARRA FIJA DE CONVERSIÓN ─── */ .cta-movil { display: none; position: fixed; left: 0; right: 0; bottom: 0; gap: .6rem; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(4, 7, 17, .93); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--border-card); transform: translateY(110%); transition: transform .3s cubic-bezier(.16,1,.3,1); z-index: 940; } .cta-movil.visible { transform: translateY(0); } .cta-movil-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; border-radius: var(--r-pill); background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-weight: 700; font-size: .97rem; box-shadow: 0 4px 18px rgba(16,185,129,.35); } .cta-movil-wa { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #25d366; color: #fff; font-size: 1.35rem; flex-shrink: 0; } @media (max-width: 900px) { .mobile-menu { display: block; } .cta-movil { display: flex; } /* El botón principal del nav estorba junto a la hamburguesa: el CTA vive ahora en el panel del menú y en la barra fija de abajo. */ .nav-cta-btn { display: none; } } /* ─── 3. NADA SE SALE DE LA PANTALLA ─── */ @media (max-width: 640px) { .btn-primary, .btn-outline { white-space: normal; /* "Solicitar Diagnóstico 360 para mi Empresa" medía 407 px en 375 px */ text-align: center; max-width: 100%; line-height: 1.35; } .hero-cta-group .btn-primary, .hero-cta-group .btn-outline { width: 100%; } /* Objetivo táctil mínimo cómodo en todo lo que se pulsa. OJO: .cal-day NO entra aquí. Tiene aspect-ratio:1, así que un min-height de 44 px le impone también 44 px de ancho, y siete de esos no caben en una pantalla de 375. El calendario se gobierna con su propia regla. */ .btn-primary, .btn-outline, .faq-question, .time-slot { min-height: 44px; } /* Palabras largas (URLs, correos) que empujaban la caja. */ p, li, td, h1, h2, h3 { overflow-wrap: break-word; } } /* ─── 4. MENOS TEXTO DE GOLPE, SIN BORRAR NADA ─── Los párrafos de apoyo largos se recortan a 4 líneas con un degradado y se abren al tocar "Ver más". El texto completo sigue en el HTML: Google y los modelos de IA lo leen igual, el lector decide si lo quiere. */ @media (max-width: 640px) { .texto-plegable { position: relative; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .texto-plegable::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em; background: linear-gradient(to bottom, transparent, var(--bg-dark) 92%); pointer-events: none; } .texto-plegable.abierto { display: block; -webkit-line-clamp: unset; } .texto-plegable.abierto::after { display: none; } .ver-mas { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: .1rem; color: var(--color-primary-light); font-size: .92rem; font-weight: 600; } /* Menos aire desperdiciado: la página eran 33 pantallas de scroll. */ :root { --section-pad: 3.4rem 0; } .section-header { margin-bottom: 2.4rem; } .hero-section { padding-top: 96px; padding-bottom: 3.5rem; } /* Sitio para la barra fija, que si no tapa el pie. */ body { padding-bottom: 74px; } } /* ─── 5. LA SECCIÓN DE AGENDAMIENTO SE SALÍA DE LA PANTALLA ─── La causa no era el ancho del formulario: los hijos de un grid nacen con min-width:auto, o sea que se niegan a encogerse por debajo de su contenido. Las franjas horarias pedían 3 columnas de 106 px (338 px) y empujaban la caja a 388 px dentro de un contenedor de 327. Es la seccion que agenda las citas, asi que era el desborde mas caro de la pagina. */ @media (max-width: 900px) { .booking-executive-grid > * { min-width: 0; } } @media (max-width: 640px) { .booking-executive-grid { padding: 1.25rem; } .slots-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .cal-nav button { min-width: 44px; min-height: 44px; } .cal-days-header, .cal-grid { min-width: 0; } } /* El calendario aprovecha todo el ancho disponible: celdas lo mas grandes que quepan, sin forzar un minimo que lo saque de la pantalla. */ @media (max-width: 640px) { .cal-grid, .cal-days-header { gap: 4px; } .cal-day { min-height: 0; font-size: .82rem; } }