/* ============================================================ RonB Studio — Brand Overrides ============================================================ Este archivo se carga DESPUÉS de style.css y redefine los tokens de marca del template TechCore. Estrategia: - No tocar style.css original (queda limpio, updateable) - Toda la identidad RonB Studio vive aquí - Usa las mismas variables CSS que el template ya usa (132 usos del color, 74 del navy), por lo que con sólo cambiar estas :root se propaga a todo el sitio. Historial de mapeo (TechCore → RonB Studio): - --atf-thm-black: #0a165e → #1a2a3e (navy del logo RonB) - --atf-thm-color: #1A73E8 → #2056d9 (azul eléctrico del logo) - --atf-thm-base: #E8F0FE → #eaf1ff (tint claro del nuevo azul) - --atf-grey-7: #dceaff → #dce7ff (alineado al nuevo azul) - --atf-grey-8: #e6effd → #e6eeff (alineado al nuevo azul) ============================================================ */ /* ------------------------------------------------------------ 1. Tokens de color — sobrescriben los del template ------------------------------------------------------------ */ :root { /* --- Colores de marca RonB Studio --- */ --atf-thm-black: #1a2a3e; /* Navy primario del logo */ --atf-thm-color: #2056d9; /* Azul eléctrico del logo */ --atf-thm-base: #eaf1ff; /* Tint suave (backgrounds, pills) */ /* --- Grises tonificados hacia el nuevo azul --- */ --atf-grey-7: #dce7ff; /* Blue-tinted light grey */ --atf-grey-8: #e6eeff; /* Blue-tinted light grey */ /* --- Variables adicionales propias de RonB Studio --- */ /* Disponibles por si queremos matices específicos sin tocar los tokens base del template */ --rb-navy-deep: #0f1a2b; /* Navy más oscuro para contraste fuerte */ --rb-blue-soft: #4a7bea; /* Azul medio, para hover/links secundarios */ --rb-blue-glow: rgba(32, 86, 217, 0.12); /* Para shadows y halos */ } /* ------------------------------------------------------------ 2. Refinamientos visuales menores alineados al branding ------------------------------------------------------------ */ /* Selección de texto con nuestro azul */ ::selection { background: var(--atf-thm-color); color: #ffffff; } ::-moz-selection { background: var(--atf-thm-color); color: #ffffff; } /* ------------------------------------------------------------ 12. Utilidades: desactivar elementos específicos ------------------------------------------------------------ */ /* Desactiva el cursor custom (bolita azul que seguía al mouse). Quitar este bloque para restaurarlo. */ .cursor_body { display: none !important; } /* Clase utilitaria para ocultar secciones completas sin borrarlas. Uso: agregar la clase "rb-disabled" al
que se quiera ocultar. Para re-activar: quitar la clase de la etiqueta
. */ .rb-disabled { display: none !important; } /* ------------------------------------------------------------ 13. Etiqueta de versión (solo homepage) ------------------------------------------------------------ */ .rb-version { font-family: var(--font-mono, 'JetBrains Mono', 'Menlo', monospace); font-size: 11px; font-weight: 400; letter-spacing: 0.05em; text-align: center; color: rgba(255, 255, 255, 0.35); margin-top: 6px; margin-bottom: 0; } /* ------------------------------------------------------------ 14. Sección "Cómo trabajamos" — números de etapa y frase de cierre ------------------------------------------------------------ */ /* Número de etapa (01, 02, 03, 04) — discreto pero presente */ .rb-stage-num { display: inline-block; font-family: var(--font-mono, 'JetBrains Mono', 'Menlo', monospace); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--atf-thm-color); margin-bottom: 8px; padding: 2px 8px; background: var(--atf-thm-base); border-radius: 4px; } /* Frase de cierre — editorial, en cursiva, mid-weight */ .rb-closing-quote { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(1.25rem, 2vw, 1.625rem); font-style: italic; font-weight: 400; color: var(--atf-thm-black); margin: 0 auto; max-width: 720px; line-height: 1.4; letter-spacing: -0.01em; } .rb-closing-quote em { font-style: italic; color: var(--atf-thm-color); } /* Tagline editorial del footer */ .rb-footer-tagline { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 1rem; font-style: italic; color: rgba(255, 255, 255, 0.65); line-height: 1.5; border-left: 2px solid var(--atf-thm-color); padding-left: 14px; margin-top: 18px; } .rb-footer-tagline em { font-style: italic; color: rgba(255, 255, 255, 0.85); } /* ------------------------------------------------------------ 15. Capitalización natural en títulos de servicios ------------------------------------------------------------ */ /* El template aplica text-transform: capitalize a varios titles, lo que rompe palabras compuestas en español (ej. "De Información"). Forzamos casing natural para los títulos del sitio. */ .atf-service-content .title, .atf-service-content .title a, .atf-about-content .title, .atf-about-content .title a, .atf-choose-content .title { text-transform: none !important; } /* ------------------------------------------------------------ 16. Ícono WhatsApp en botones "Conversemos" ------------------------------------------------------------ */ .rb-wa-icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; fill: currentColor; flex-shrink: 0; } /* ------------------------------------------------------------ 17. Fix responsive del header en viewports anchos (>1720px) ------------------------------------------------------------ El template define la zona blanca diagonal del header con: .atf_bg_skew::after { left: calc(25% + 0px) } En viewports muy anchos (1920+ con escalado 4K, monitores ultrawide), el container Bootstrap (1320px centrado) ubica el logo MÁS A LA DERECHA que ese 25% del viewport. Como el logo en ese estado es la versión blanca (sobre fondo azul), queda sobre fondo blanco y se vuelve INVISIBLE. Fix: usar max() para que la zona blanca empiece SIEMPRE después del logo, sin importar el ancho del viewport. - 50% - 660px = inicio del container 1320 centrado - + 230px = ancho del bloque del logo más margen de seguridad → posición mínima de la zona blanca = calc(50% - 430px) */ .atf-site-header.atf_bg_skew::after { left: max(25%, calc(50% - 430px)) !important; } /* ------------------------------------------------------------ 18. Botón flotante WhatsApp (FAB) ------------------------------------------------------------ Se ubica en la esquina inferior izquierda. Verde oficial WhatsApp. Animación pulse sutil al cargar (3 ciclos), luego reposo. En hover hace un lift micro + cambio de tono. */ .rb-wa-fab { position: fixed; bottom: 100px; right: 24px; z-index: 9990; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .rb-wa-fab:hover, .rb-wa-fab:focus-visible { background: #1FBD58; color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0, 0, 0, 0.16); text-decoration: none; outline: none; } .rb-wa-fab svg { width: 30px; height: 30px; display: block; } /* Mobile: un toque más chico para no estorbar contenido */ @media (max-width: 575.98px) { .rb-wa-fab { bottom: 90px; right: 18px; width: 52px; height: 52px; } .rb-wa-fab svg { width: 28px; height: 28px; } } /* Si el usuario tiene activada la preferencia de "reduce motion", desactivamos la animación de pulso. */ @media (prefers-reduced-motion: reduce) { .rb-wa-fab:hover, .rb-wa-fab:focus-visible { transform: none; } } /* ------------------------------------------------------------ 18b. Refuerzo defensivo del FAB (v0.4.2) ------------------------------------------------------------ El template puede tener reglas que afecten el color de en hover/active, y un fill="currentColor" en el SVG quedaría afectado por eso. Forzamos el fill del path a blanco con alta especificidad para que el ícono nunca cambie de color, sin importar qué intente hacer el resto del CSS. */ .rb-wa-fab svg, .rb-wa-fab svg path { fill: #ffffff !important; }