/* Bloques compartidos entre páginas standalone de lavendi.mx: quienes-somos, contacto-cta, footer. Usan las mismas variables de marca que ya define cada página (--bg, --ink, --brand, etc.) con fallback al azul real de marca (#1e73be) si una página no las define. */ /* Header/nav reutilizable — mismo patrón que curso-taller-de-ventas-estrategicas: logo + volver a lavendi.mx + CTA "Solicitar cotización" (ancla a #contacto). Cada página debe darle id="top" al y id="contacto" a su sección de contacto. */ header.nav{ display:flex; align-items:center; justify-content:space-between; padding:20px clamp(20px,4vw,64px); border-bottom:1px solid var(--line, #232833); position:sticky; top:0; z-index:50; background:rgba(13,16,21,0.97); } .nav-logo{display:flex; align-items:center;} header.nav img{height:24px;} .nav-tag{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim, #838d9c); display:none; } .nav-actions{display:flex; align-items:center; gap:20px;} .nav-back{ font-family:'IBM Plex Sans', sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.02em; color:var(--ink-dim, #838d9c); white-space:nowrap; } .nav-back:hover{color:var(--brand-tint, #5fa8ea);} .btn{ font-family:'IBM Plex Sans', sans-serif; font-weight:700; letter-spacing:0.02em; padding:12px 18px; border-radius:4px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:.25s ease; cursor:pointer; border:none; text-transform:uppercase; font-size:0.78rem; white-space:nowrap; } .btn-primary{background:var(--brand, #1e73be); color:#fff;} .btn-primary:hover{background:var(--brand-tint, #5fa8ea);} @media (max-width: 520px){ header.nav{padding:14px 20px; flex-wrap:wrap; row-gap:10px;} .nav-actions{width:100%; justify-content:space-between; gap:12px;} .nav-cta{padding:10px 14px; font-size:0.7rem;} } /* Widget de WhatsApp — en desktop se usa el widget de chat de GHL (captura nombre/tel/email + atribución nativa). En móvil se oculta el widget de GHL y se muestra un botón flotante propio que replica el patrón de 2 pasos que tenía JoinChat en la landing original: click en la burbuja → panel con saludo + botón "Enviar WhatsApp" (deep-link real a la app) — no navega directo al primer click. El botón final SIGUE siendo un real (no JS redirect) para que el tracking de clic saliente de GTM/GA4 lo siga detectando igual. */ .wa-widget{position:fixed; right:18px; bottom:18px; z-index:999; display:none;} @media (max-width: 767px){ .wa-widget{display:block;} chat-widget{display:none !important;} } .wa-float-btn{ width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,0.35); } .wa-float-btn svg{width:30px; height:30px; fill:#fff;} .wa-panel{ position:absolute; right:0; bottom:70px; width:min(88vw, 300px); background:var(--panel, #12161d); border:1px solid var(--line, #232833); border-radius:10px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.5); } .wa-panel-header{ background:#075e54; color:#fff; padding:14px 16px; font-size:0.88rem; font-weight:600; display:flex; align-items:center; justify-content:space-between; font-family:'IBM Plex Sans', sans-serif; } .wa-panel-close{background:none; border:none; color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; padding:0;} .wa-panel-body{padding:16px;} .wa-bubble{ background:var(--bg, #0d1015); border:1px solid var(--line, #232833); border-radius:8px; padding:12px 14px; color:var(--ink, #edeff2); font-family:'IBM Plex Sans', sans-serif; font-size:0.86rem; line-height:1.5; } .wa-panel-cta{ display:flex; align-items:center; justify-content:center; gap:8px; background:#25d366; color:#fff; text-decoration:none; font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:0.9rem; padding:13px; margin:0 16px 16px; } .wa-panel-cta svg{width:18px; height:18px; fill:#fff;} /* "Quiénes somos" y "Contacto" reproducen tal cual el contenido/estructura de lavendi.mx/curso-taller-de-ventas-estrategicas (secciones .about y .form-section) — mismo copy, misma foto real de equipo, mismo formulario GHL. Solo el color de acento (dorado en esa landing) se sustituye por --brand-tint de cada página, y el copy de "Contacto" se genericé (esa landing lo tiene específico del curso). */ .about{ background:var(--bg, #0d1015); border-top:1px solid var(--line, #232833); padding:clamp(56px,8vw,110px) clamp(20px,5vw,64px); } .about-inner{ max-width:1520px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; } .section-label{ font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-dim, #838d9c); font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:12px; } .section-label::before{content:''; width:28px; height:1px; background:var(--line, #232833);} .heading-display{ font-family:'Fraunces', serif; font-style:italic; font-weight:400; color:var(--ink, #edeff2); font-size:clamp(1.8rem,3.2vw,2.7rem); margin-bottom:20px; } .heading-display .accent{color:var(--brand-tint, #5fa8ea); font-style:normal;} .about p.desc, .form-grid p.desc{ color:var(--ink-dim, #838d9c); font-family:'IBM Plex Sans', sans-serif; font-size:1.02rem; line-height:1.6; margin-bottom:16px; max-width:44ch; } .about p.desc b{color:var(--ink, #edeff2);} .about-photo{ position:relative; min-height:420px; mask-image:radial-gradient(85% 85% at 50% 50%, #000 62%, transparent 100%); -webkit-mask-image:radial-gradient(85% 85% at 50% 50%, #000 62%, transparent 100%); } .about-photo img{width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(0.85) brightness(0.92);} /* "Reseñas" — reutilizado tal cual de curso-taller-de-ventas-estrategicas (12 reseñas reales: 6 de Google con foto verificada, 6 curadas de clientes reales con link a su sitio). */ .testimonials{ background:var(--bg, #0d1015); border-top:1px solid var(--line, #232833); padding:clamp(56px,8vw,110px) clamp(20px,5vw,64px); } .testimonials-inner{max-width:1520px; margin:0 auto;} .testimonials-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:36px; } .google-rating{display:flex; align-items:center; gap:10px; font-size:0.9rem; color:var(--ink-dim, #838d9c);} .google-rating b{font-family:'Fraunces', serif; color:var(--brand-tint, #5fa8ea); font-size:1.3rem;} .testimonial-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;} .testimonial-card{ background:var(--panel, #12161d); border:1px solid var(--line, #232833); border-radius:4px; padding:22px; display:flex; flex-direction:column; transition:transform .2s ease, border-color .2s ease; } .testimonial-card:hover{transform:translateY(-3px); border-color:var(--brand-tint, #5fa8ea);} .t-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;} .t-avatar{width:38px; height:38px; border-radius:50%; flex-shrink:0; object-fit:cover;} .t-avatar-initial{ display:flex; align-items:center; justify-content:center; background:rgba(30,115,190,0.14); color:var(--brand-tint, #5fa8ea); font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem; } .t-id{display:flex; flex-direction:column; min-width:0;} .t-name{font-size:0.88rem; font-weight:600; color:var(--ink, #edeff2);} .t-name:hover{color:var(--brand-tint, #5fa8ea);} .t-company{font-size:0.75rem; color:var(--ink-dim, #838d9c);} .t-stars{color:var(--brand-tint, #5fa8ea); font-size:0.75rem; letter-spacing:2px; margin-bottom:10px;} .testimonial-card blockquote{color:var(--ink, #edeff2); font-size:0.9rem; line-height:1.5; margin-top:auto;} @media (max-width: 960px){ .testimonial-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width: 620px){ .testimonial-grid{grid-template-columns:1fr;} } .form-section{ background:var(--panel, #12161d); border-top:1px solid var(--line, #232833); padding:clamp(56px,8vw,110px) clamp(20px,5vw,64px); } .form-grid{ max-width:1520px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; } .form-frame-wrap{ background:var(--ink, #edeff2); border-radius:10px; overflow:hidden; box-shadow:0 24px 60px -20px rgba(10,14,23,0.65); min-height:640px; } .form-frame-wrap iframe{width:100%; height:100%; min-height:640px; border:none; display:block;} .wa-cta{color:var(--brand-tint, #5fa8ea); text-decoration:underline; font-weight:500;} @media (max-width: 860px){ .about-inner, .form-grid{grid-template-columns:1fr;} .about-photo{min-height:280px; order:-1;} } footer{ border-top:1px solid var(--line, #232833); background:var(--bg, #0d1015); padding:56px clamp(20px,5vw,64px) 40px; max-width:1520px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; } footer .f-brand{ font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem; margin-bottom:14px; color:var(--ink, #edeff2); } footer .f-brand span{color:var(--brand-tint, #5fa8ea);} footer p{color:var(--ink-dim, #838d9c); font-family:'IBM Plex Sans', sans-serif; font-size:0.85rem; line-height:1.55; max-width:34ch;} footer h4{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim, #838d9c); margin-bottom:14px; font-weight:500;} footer .f-links{display:flex; flex-direction:column; gap:9px; font-size:0.88rem;} footer .f-links a{color:var(--ink, #edeff2);} footer .f-links a:hover{color:var(--brand-tint, #5fa8ea);} .f-bottom{ max-width:1520px; margin:0 auto; padding:24px clamp(20px,5vw,64px) 40px; border-top:1px solid var(--line, #232833); color:var(--ink-dim, #838d9c); font-size:0.78rem; background:var(--bg, #0d1015); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } @media (max-width: 860px){ footer{grid-template-columns:1fr 1fr; row-gap:32px;} } @media (max-width: 480px){ footer{grid-template-columns:1fr;} }