/* Theme Name: Digital Bee Child Theme URI: https://digitalbee.cl Description: Child theme personalizado para Digital Bee Marketing. Aquí vive todo el código custom del sitio. Author: Digital Bee Marketing Author URI: https://digitalbee.cl Template: Divi Version: 1.0.0 Text Domain: digitalbee-child */ /* ============================================================ DIGITAL BEE — SISTEMA DE DISEÑO Variables, reset, base, componentes y utilidades. No editar el header de tema (líneas superiores). ============================================================ */ /* ----- 1. VARIABLES CSS (paleta, tipografías, espaciados) ---- */ :root { /* Paleta de marca */ --db-negro: #0A0A0F; /* Fondo principal */ --db-negro-suave: #14141C; /* Variación del fondo */ --db-gris-oscuro: #1A1A24; /* Cards y secciones */ --db-gris-medio: #2A2A36; /* Bordes y divisores */ --db-gris-claro: #6B7280; /* Texto secundario */ --db-amarillo: #FFB800; /* Marca principal, CTAs */ --db-amarillo-suave: #FFC533; /* Hover */ --db-naranja: #FF8A00; /* Acentos cálidos */ --db-azul: #3B82F6; /* Links y elementos tech */ --db-azul-suave: #60A5FA; /* Hover de links */ --db-blanco: #FAFAF7; /* Texto principal */ --db-blanco-suave: #E5E5E0; /* Texto cuerpo */ --db-blanco-tenue: rgba(250, 250, 247, 0.6); /* Texto suave */ /* Tipografías */ --db-font-titulo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --db-font-cuerpo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --db-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; /* Escala de espaciado (base 8px) */ --db-space-1: 0.25rem; /* 4px */ --db-space-2: 0.5rem; /* 8px */ --db-space-3: 0.75rem; /* 12px */ --db-space-4: 1rem; /* 16px */ --db-space-5: 1.5rem; /* 24px */ --db-space-6: 2rem; /* 32px */ --db-space-7: 3rem; /* 48px */ --db-space-8: 4rem; /* 64px */ --db-space-9: 6rem; /* 96px */ --db-space-10: 8rem; /* 128px */ --db-space-11: 10rem; /* 160px */ --db-space-12: 12rem; /* 192px */ /* Radios */ --db-radio-sm: 6px; --db-radio-md: 10px; --db-radio-lg: 16px; --db-radio-xl: 24px; --db-radio-pill: 9999px; /* Sombras y resplandores */ --db-sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --db-sombra-md: 0 4px 12px rgba(0, 0, 0, 0.40); --db-sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.50); --db-glow-amarillo: 0 0 24px rgba(255, 184, 0, 0.35); --db-glow-naranja: 0 0 24px rgba(255, 138, 0, 0.35); /* Transiciones */ --db-trans-rapida: 150ms ease; --db-trans-base: 250ms ease; --db-trans-lenta: 400ms ease; /* Contenedor */ --db-container-max: 1280px; } /* ----- 2. RESET MINIMALISTA (estilo moderno, no normalize completo) ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } button { cursor: pointer; border: none; background: none; color: inherit; } /* ----- 3. BODY Y TIPOGRAFÍA BASE (dark mode por defecto) ---- */ body { background-color: var(--db-negro); color: var(--db-blanco-suave); font-family: var(--db-font-cuerpo); font-size: 1rem; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--db-font-titulo); color: var(--db-blanco); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } /* Escala fluida con clamp() — responsive sin media queries */ h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; } h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); } h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); } h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; } p { color: var(--db-blanco-suave); } a { color: var(--db-azul); text-decoration: none; transition: color var(--db-trans-rapida); } a:hover { color: var(--db-azul-suave); } code, pre, kbd { font-family: var(--db-font-mono); font-size: 0.9em; } code { background: var(--db-gris-oscuro); padding: 0.15em 0.4em; border-radius: var(--db-radio-sm); color: var(--db-amarillo); } /* ----- 4. BOTONES ---- */ /* Botón base reutilizable */ .db-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--db-space-2); padding: 0.85rem 1.75rem; font-family: var(--db-font-titulo); font-weight: 600; font-size: 0.95rem; border-radius: var(--db-radio-md); text-decoration: none; cursor: pointer; border: none; transition: transform var(--db-trans-base), background-color var(--db-trans-base), box-shadow var(--db-trans-base), color var(--db-trans-base); will-change: transform; } .db-btn:hover { transform: translateY(-2px); } .db-btn:active { transform: translateY(0); } /* Primario: amarillo → naranja en hover, con elevación */ .db-btn-primario { background: var(--db-amarillo); color: var(--db-negro); } .db-btn-primario:hover { background: var(--db-naranja); color: var(--db-negro); box-shadow: var(--db-glow-naranja); } /* Secundario: outline amarillo, se rellena en hover */ .db-btn-secundario { background: transparent; color: var(--db-amarillo); border: 1px solid var(--db-amarillo); } .db-btn-secundario:hover { background: var(--db-amarillo); color: var(--db-negro); box-shadow: var(--db-glow-amarillo); } /* Fantasma: para zonas con poco peso visual */ .db-btn-fantasma { background: transparent; color: var(--db-blanco-suave); border: 1px solid var(--db-gris-medio); } .db-btn-fantasma:hover { border-color: var(--db-amarillo); color: var(--db-amarillo); } /* Inverso: para usar SOBRE fondo amarillo (ej. sección CTA final). Resting: negro con texto amarillo. Hover: naranja con texto negro — contrasta sobre el bg amarillo de la sección y refuerza el naranja miel de la marca. */ .db-btn-inverso { background: var(--db-negro); color: var(--db-amarillo); } .db-btn-inverso:hover { background: var(--db-naranja); color: var(--db-negro); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); } /* Override del botón nativo de Divi (.et_pb_button) para que herede el estilo Digital Bee. Usamos !important porque Divi inyecta su propio CSS con alta especificidad. */ .et_pb_button, .et_pb_button:hover { font-family: var(--db-font-titulo) !important; font-weight: 600 !important; padding: 0.85rem 1.75rem !important; border-radius: var(--db-radio-md) !important; letter-spacing: 0 !important; transition: transform var(--db-trans-base), background-color var(--db-trans-base), box-shadow var(--db-trans-base), color var(--db-trans-base) !important; } .et_pb_button { background-color: var(--db-amarillo) !important; color: var(--db-negro) !important; border: none !important; } .et_pb_button:hover { background-color: var(--db-naranja) !important; color: var(--db-negro) !important; box-shadow: var(--db-glow-naranja); transform: translateY(-2px); } /* Quitar la flechita por defecto de Divi en los botones */ .et_pb_button:after { display: none !important; } /* ----- 5. SCROLLBAR PERSONALIZADA ---- */ * { scrollbar-width: thin; scrollbar-color: var(--db-gris-medio) var(--db-negro-suave); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--db-negro-suave); } ::-webkit-scrollbar-thumb { background: var(--db-gris-medio); border-radius: var(--db-radio-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--db-amarillo); } /* ----- 6. SELECCIÓN DE TEXTO ---- */ ::selection { background: var(--db-amarillo); color: var(--db-negro); } ::-moz-selection { background: var(--db-amarillo); color: var(--db-negro); } /* ----- 7. ANIMACIONES BASE ---- */ @keyframes db-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes db-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes db-pulse-suave { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.03); } } /* Clases utilitarias para aplicar las animaciones desde HTML/Divi */ .db-fade-up { animation: db-fade-up 600ms ease-out both; } .db-fade-in { animation: db-fade-in 600ms ease-out both; } .db-pulse { animation: db-pulse-suave 2.4s ease-in-out infinite; } /* Accesibilidad: respetar a usuarios que prefieren menos movimiento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----- Animaciones al scroll (utilidad reusable [data-db-animate]) ---- Cualquier elemento con data-db-animate="fade-up|fade-in" arranca invisible y se anima cuando js/home-scroll-animations.js le añade .db-visible al entrar al viewport. Usamos animation (no transition) con animation-fill-mode: backwards para que el stagger por nth-child no contamine las transitions de hover de las propias cards. */ [data-db-animate="fade-up"]:not(.db-visible) { opacity: 0; transform: translateY(24px); } [data-db-animate="fade-in"]:not(.db-visible) { opacity: 0; } [data-db-animate].db-visible { animation-duration: 700ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-fill-mode: backwards; } [data-db-animate="fade-up"].db-visible { animation-name: db-on-scroll-fade-up; } [data-db-animate="fade-in"].db-visible { animation-name: db-on-scroll-fade-in; } @keyframes db-on-scroll-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes db-on-scroll-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ----- 8. UTILIDADES ---- */ .db-container { width: 100%; max-width: var(--db-container-max); margin-inline: auto; padding-inline: var(--db-space-5); } .db-text-centro { text-align: center; } .db-mono { font-family: var(--db-font-mono); } .db-color-amarillo { color: var(--db-amarillo); } .db-color-naranja { color: var(--db-naranja); } .db-color-azul { color: var(--db-azul); } .db-color-tenue { color: var(--db-blanco-tenue); } /* Skip-link de accesibilidad (oculto hasta recibir foco con tab) */ .db-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: var(--db-space-3) var(--db-space-5); background: var(--db-amarillo); color: var(--db-negro); font-weight: 600; } .db-skip-link:focus { left: var(--db-space-4); } /* ============================================================ 9. OVERRIDE DE DIVI — DARK MODE GLOBAL Divi inyecta fondos blancos y colores oscuros en múltiples contenedores asumiendo light mode. Forzamos la paleta Digital Bee en TODAS las capas del contenido. El header se trabaja aparte en Etapa B (no se toca aquí). ============================================================ */ /* ----- 9.1 Contenedores principales del layout ---- */ #page-container, #et-main-area, #main-content { background-color: var(--db-negro); } /* El .container interno y las variantes de sidebar de Divi */ #main-content .container, body.et_right_sidebar #main-content .container, body.et_left_sidebar #main-content .container, body.et_full_width_page #main-content .container, body.et_no_sidebar #main-content .container { background-color: transparent !important; } /* Áreas de contenido y sidebar */ #left-area, #sidebar, #content-area, .entry-content, article.post, article.page, .et_pb_post { background-color: transparent; color: var(--db-blanco-suave); } /* ----- 9.2 Secciones, filas y columnas del Divi Builder ---- */ /* Solo override del default blanco del padre — si el usuario fija un color en el Builder, ese estilo inline gana sobre éste. */ .et_pb_section, .et_pb_section.et_pb_section_regular { background-color: var(--db-negro); } .et_pb_row, .et_pb_column { background-color: transparent; } /* ----- 9.3 Títulos y meta de posts ---- */ .entry-title, .entry-title a, .post-title, .post-title a, #left-area .entry-title, #left-area .entry-title a, .et_pb_post .entry-title, .et_pb_post .entry-title a { color: var(--db-blanco) !important; } .entry-title a:hover, .post-title a:hover, #left-area .entry-title a:hover { color: var(--db-amarillo) !important; } .post-meta, .post-meta a, .entry-meta, .entry-meta a { color: var(--db-blanco-tenue); } .post-meta a:hover, .entry-meta a:hover { color: var(--db-amarillo); } /* ----- 9.4 Sidebar y widgets ---- */ #sidebar { background-color: transparent; } .widget, .et_pb_widget { background-color: transparent; color: var(--db-blanco-suave); margin-bottom: var(--db-space-6); } .widget a, .et_pb_widget a { color: var(--db-blanco-suave); transition: color var(--db-trans-rapida); } .widget a:hover, .et_pb_widget a:hover { color: var(--db-amarillo); } .widget h4, .widgettitle, .widget_title, h4.widgettitle, .et_pb_widget h4.widgettitle { color: var(--db-blanco) !important; font-family: var(--db-font-titulo); border-bottom: 1px solid var(--db-gris-medio); padding-bottom: var(--db-space-3); margin-bottom: var(--db-space-3); } .widget ul, .widget ol { list-style: none; padding-left: 0; } .widget ul li, .widget ol li { border-bottom: 1px solid var(--db-gris-medio); padding: var(--db-space-2) 0; } .widget ul li:last-child, .widget ol li:last-child { border-bottom: none; } /* ----- 9.5 Formularios (inputs, búsqueda, contacto) ---- */ input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], textarea, select, .et_pb_searchform input[type="text"], .et_pb_contact_form_container input, .et_pb_contact_form_container textarea { background-color: var(--db-gris-oscuro) !important; color: var(--db-blanco) !important; border: 1px solid var(--db-gris-medio) !important; border-radius: var(--db-radio-md) !important; padding: 0.75rem 1rem !important; font-family: var(--db-font-cuerpo) !important; transition: border-color var(--db-trans-base), box-shadow var(--db-trans-base) !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus { border-color: var(--db-amarillo) !important; box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.2) !important; outline: none !important; } /* Placeholders */ input::placeholder, textarea::placeholder { color: var(--db-blanco-tenue); } /* Botones submit nativos (incluye #searchsubmit del widget de búsqueda) */ input[type="submit"], button[type="submit"], #searchsubmit { background-color: var(--db-amarillo) !important; color: var(--db-negro) !important; border: none !important; padding: 0.75rem 1.5rem !important; border-radius: var(--db-radio-md) !important; font-family: var(--db-font-titulo) !important; font-weight: 600 !important; cursor: pointer; transition: background-color var(--db-trans-base), transform var(--db-trans-base), box-shadow var(--db-trans-base) !important; } input[type="submit"]:hover, button[type="submit"]:hover, #searchsubmit:hover { background-color: var(--db-naranja) !important; color: var(--db-negro) !important; transform: translateY(-2px); box-shadow: var(--db-glow-naranja); } /* ----- 9.6 Comentarios ---- */ #comments, .comments-area, .comment-respond, .comment-form { color: var(--db-blanco-suave); } .comments-area .comments-title, .comment-respond .comment-reply-title { color: var(--db-blanco); } .comment-form label { color: var(--db-blanco-suave); } .comment-list .comment { background: var(--db-gris-oscuro); padding: var(--db-space-4); border-radius: var(--db-radio-md); margin-bottom: var(--db-space-4); border: 1px solid var(--db-gris-medio); } .comment-list .comment .comment-author { color: var(--db-blanco); } .comment-list .comment .comment-meta a { color: var(--db-blanco-tenue); } /* ----- 9.7 Tablas y blockquote ---- */ table { background-color: var(--db-gris-oscuro); color: var(--db-blanco-suave); border-collapse: collapse; width: 100%; } table th, table td { border: 1px solid var(--db-gris-medio) !important; padding: var(--db-space-3) var(--db-space-4); } table th { background-color: var(--db-negro-suave); color: var(--db-blanco); } blockquote { background: var(--db-gris-oscuro); border-left: 4px solid var(--db-amarillo); padding: var(--db-space-4) var(--db-space-5); color: var(--db-blanco-suave); font-style: italic; border-radius: 0 var(--db-radio-md) var(--db-radio-md) 0; margin: var(--db-space-5) 0; } /* ----- 9.8 Paginación y enlaces "Read more" ---- */ .wp-pagenavi, .pagination, .nav-links { color: var(--db-blanco-suave); } .wp-pagenavi a, .pagination a, .nav-links a { color: var(--db-blanco-suave); background: var(--db-gris-oscuro); padding: var(--db-space-2) var(--db-space-3); border-radius: var(--db-radio-sm); transition: all var(--db-trans-base); } .wp-pagenavi a:hover, .pagination a:hover, .nav-links a:hover { background: var(--db-amarillo); color: var(--db-negro); } .more-link, a.more-link { display: inline-block; color: var(--db-amarillo); font-weight: 600; margin-top: var(--db-space-3); } .more-link:hover { color: var(--db-amarillo-suave); } /* ============================================================ 10. HEADER GLOBAL PERSONALIZADO Estiliza el header de Divi (#main-header) para Digital Bee: fondo negro, logo placeholder, menú, CTA, mobile drawer y comportamiento sticky con blur al scrollear más de 50px. La inyección del CTA y el toggle de scroll viven en js/header.js. ============================================================ */ /* ----- 10.1 Estructura base del header ---- */ #main-header { background-color: var(--db-negro) !important; box-shadow: 0 1px 0 var(--db-gris-medio), 0 4px 24px rgba(0, 0, 0, 0.4) !important; border-bottom: none !important; padding: 0 !important; position: fixed !important; top: 0; left: 0; right: 0; z-index: 99999; transition: background-color var(--db-trans-base), box-shadow var(--db-trans-base), backdrop-filter var(--db-trans-base), padding var(--db-trans-base); } #main-header .container { padding-top: 14px !important; padding-bottom: 14px !important; background: transparent !important; display: flex !important; align-items: center; justify-content: space-between; gap: var(--db-space-6); min-height: 56px; position: relative; } /* Compensar el header fixed para que el contenido no quede debajo */ body { padding-top: 80px; } @media (max-width: 980px) { body { padding-top: 64px; } } /* Esconder la top-bar de Divi (barrita superior de redes/contacto) */ #top-header { display: none !important; } /* ----- 10.2 Logo placeholder (texto "Digital Bee" en amarillo) ---- El lo inyecta js/header.js dentro del de .logo_container. Divi usa la CLASE .logo_container (no id) — gotcha confirmado leyendo el header.php del tema padre. Cuando llegue la imagen de la abeja: 1) Subirla por Apariencia > Personalizar > Identidad del sitio. 2) Eliminar este bloque entero — el volverá a verse. --------------------------------------------------------------- */ .logo_container, #logo_container { /* fallback por si en algún Divi viejo era id */ display: flex !important; align-items: center; /* Anular el position:absolute que Divi le pone por defecto. Sin esto, el logo se sale del flex y se encima al menú. */ position: relative !important; float: none !important; margin: 0 !important; width: auto !important; height: auto !important; /* Reservar espacio cómodo y evitar que el logo se encoja */ flex-shrink: 0; min-width: 160px; padding-right: var(--db-space-5); } .logo_container img#logo, #main-header img#logo { display: none !important; } .logo_container > a, #main-header .logo_container > a { display: inline-flex; align-items: center; text-decoration: none !important; } .db-logo-text { font-family: var(--db-font-titulo); font-weight: 800; font-size: 1.6rem; color: var(--db-amarillo); letter-spacing: -0.02em; line-height: 1; transition: color var(--db-trans-base), font-size var(--db-trans-base); } .logo_container > a:hover .db-logo-text { color: var(--db-amarillo-suave); } /* ----- 10.3 Menú principal (desktop) ---- */ #et-top-navigation { display: flex !important; align-items: center; justify-content: flex-end; gap: var(--db-space-5); padding-top: 0 !important; float: none !important; width: auto !important; /* Tomar el espacio restante del header sin pisar al logo */ flex: 1 1 auto; min-width: 0; /* evita overflow cuando hay flex anidados */ } #top-menu, #top-menu li { background: transparent !important; } #top-menu { display: flex !important; align-items: center; gap: var(--db-space-2); margin: 0; padding: 0; } #top-menu li { padding: 0 !important; list-style: none; } #top-menu li a { color: var(--db-blanco-suave) !important; font-family: var(--db-font-titulo); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; padding: 0.5rem 1rem !important; opacity: 1 !important; border-radius: var(--db-radio-sm); transition: color var(--db-trans-rapida), background-color var(--db-trans-rapida); } #top-menu li a:hover { color: var(--db-amarillo) !important; opacity: 1 !important; } #top-menu li.current-menu-item > a, #top-menu li.current_page_item > a, #top-menu li.current-menu-ancestor > a { color: var(--db-amarillo) !important; } /* Submenús dropdown en desktop */ #top-menu li ul.sub-menu { background: var(--db-gris-oscuro) !important; border: 1px solid var(--db-gris-medio) !important; border-radius: var(--db-radio-md); box-shadow: var(--db-sombra-lg); padding: var(--db-space-2) 0 !important; margin-top: var(--db-space-2); } #top-menu li ul.sub-menu li a { padding: var(--db-space-2) var(--db-space-4) !important; width: 100%; border-radius: 0; } #top-menu li ul.sub-menu li a:hover { background: var(--db-gris-medio); color: var(--db-amarillo) !important; } /* ----- 10.4 CTA "Diagnóstico Digital Gratis" en header ---- El CTA se inyecta dinámicamente por js/header.js en el contenedor #et-top-navigation (desktop) y dentro de #mobile_menu (mobile). --------------------------------------------------------------- */ .db-header-cta { display: inline-flex !important; align-items: center; justify-content: center; padding: 0.7rem 1.4rem !important; background: var(--db-amarillo) !important; color: var(--db-negro) !important; font-family: var(--db-font-titulo); font-weight: 600; font-size: 0.9rem !important; border-radius: var(--db-radio-md); text-decoration: none !important; white-space: nowrap; border: none; cursor: pointer; transition: transform var(--db-trans-base), background-color var(--db-trans-base), box-shadow var(--db-trans-base), color var(--db-trans-base); will-change: transform; } .db-header-cta:hover { background: var(--db-naranja) !important; color: var(--db-negro) !important; transform: translateY(-2px); box-shadow: var(--db-glow-naranja); } .db-header-cta:active { transform: translateY(0); } /* (La visibilidad del CTA desktop vs mobile se consolida en 10.7) */ /* CTA dentro del drawer mobile */ #mobile_menu .db-header-cta-wrap { list-style: none; padding: var(--db-space-4) var(--db-space-4) var(--db-space-2); border-bottom: none !important; } #mobile_menu .db-header-cta { display: block !important; width: 100%; text-align: center; padding: 0.9rem 1.4rem !important; } /* ----- 10.5 Mobile: hamburger + drawer ---- */ /* Icono hamburguesa en blanco, amarillo al hover */ .mobile_menu_bar, .mobile_menu_bar::before { color: var(--db-blanco) !important; transition: color var(--db-trans-rapida); } .mobile_menu_bar:hover::before, .et_mobile_nav_menu .mobile_menu_bar:hover::before { color: var(--db-amarillo) !important; } /* Drawer (panel desplegable del menú mobile) */ .et_mobile_menu { background-color: var(--db-negro-suave) !important; border-top: 3px solid var(--db-amarillo) !important; box-shadow: var(--db-sombra-lg); padding: var(--db-space-2) 0 var(--db-space-4) !important; } .et_mobile_menu li a { color: var(--db-blanco-suave) !important; font-family: var(--db-font-titulo); font-weight: 500; border-bottom: 1px solid var(--db-gris-medio) !important; padding: var(--db-space-3) var(--db-space-5) !important; opacity: 1 !important; transition: color var(--db-trans-rapida), background-color var(--db-trans-rapida); } .et_mobile_menu li a:hover { color: var(--db-amarillo) !important; background-color: var(--db-gris-oscuro) !important; opacity: 1 !important; } .et_mobile_menu li.current-menu-item > a { color: var(--db-amarillo) !important; } /* Submenús anidados dentro del drawer */ .et_mobile_menu .sub-menu { background: var(--db-negro) !important; padding-left: var(--db-space-4) !important; } /* ----- 10.6 Estado sticky con scroll (clase .db-scrolled en body) ---- El toggle se hace desde js/header.js cuando scrollY > 50. Aplicamos blur + transparencia leve para un efecto premium. --------------------------------------------------------------- */ body.db-scrolled #main-header { background-color: rgba(10, 10, 15, 0.85) !important; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 1px 0 var(--db-gris-medio), 0 8px 32px rgba(0, 0, 0, 0.6) !important; } body.db-scrolled #main-header .container { padding-top: 10px !important; padding-bottom: 10px !important; } body.db-scrolled .db-logo-text { font-size: 1.4rem; } /* Reset de la clase nativa de Divi 'et-fixed-header' (no la usamos) */ #main-header.et-fixed-header { background-color: var(--db-negro) !important; } body.db-scrolled #main-header.et-fixed-header { background-color: rgba(10, 10, 15, 0.85) !important; } /* ----- 10.7 Esconder elementos default de Divi que no usamos ---- - Lupa del header (#et_top_search + form expandido). - Hamburger solo visible en mobile (≤980px), nunca en desktop. - CTA desktop oculto en mobile (lo replica el JS en el drawer). --------------------------------------------------------------- */ #et_top_search, #et_search_icon, .et_search_outer, .et_search_form_container { display: none !important; } /* Desktop: ocultar elementos mobile que Divi puede dejar en el DOM */ .mobile_menu_bar, .et_mobile_nav_menu { display: none !important; } @media (max-width: 980px) { /* Mobile: mostrar hamburger, ocultar menú desktop y CTA desktop */ .et_mobile_nav_menu { display: block !important; } .mobile_menu_bar { display: inline-block !important; } #top-menu-nav { display: none !important; } #et-top-navigation > .db-header-cta { display: none !important; } } /* ============================================================ 11. HOME — HERO (sección 1 de 8 del home) front-page.php →
. Layout de 2 columnas en desktop, apilado en mobile. Animaciones de entrada en cascada + abeja flotante con glow. ============================================================ */ /* ----- 11.1 Contenedor del hero ---- */ .db-hero { position: relative; min-height: 90vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--db-space-7); background-color: var(--db-negro); overflow: hidden; } /* ----- 11.2 Patrón de puntos del fondo (puro CSS) ---- */ .db-hero__patron { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; /* Difumina los bordes del patrón para que respire con la composición */ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%); } /* ----- 11.3 Grid de 2 columnas ---- */ .db-hero__grid { position: relative; /* sobre el patrón */ display: grid; grid-template-columns: 60% 40%; align-items: center; gap: var(--db-space-7); width: 100%; } /* ----- 11.4 Contenido textual + animaciones en cascada ---- */ .db-hero__contenido { display: flex; flex-direction: column; gap: var(--db-space-5); max-width: 640px; } .db-hero__titulo { font-family: var(--db-font-titulo); font-weight: 800; font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--db-blanco); margin: 0; animation: db-fade-up 700ms ease-out 0.1s both; } .db-hero__acento { color: var(--db-amarillo); text-shadow: 0 0 32px rgba(255, 184, 0, 0.30); } .db-hero__subtitulo { font-family: var(--db-font-cuerpo); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--db-blanco-suave); max-width: 600px; margin: 0; animation: db-fade-up 700ms ease-out 0.3s both; } .db-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--db-space-4); margin-top: var(--db-space-3); animation: db-fade-up 700ms ease-out 0.5s both; } /* CTA secundario "Ver Servicios" — variante outline BLANCA solo en el hero. No toca la .db-btn-secundario global (amarilla). */ .db-hero .db-btn-secundario { background: transparent !important; border-color: var(--db-blanco) !important; color: var(--db-blanco) !important; } .db-hero .db-btn-secundario:hover { background: var(--db-blanco) !important; color: var(--db-negro) !important; box-shadow: 0 0 24px rgba(250, 250, 247, 0.25); } /* ----- 11.5 Columna derecha: abeja + glow + flotación ---- */ .db-hero__media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 280px; } /* Glow amarillo difuso detrás de la abeja, con respiración sutil */ .db-hero__glow { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255, 184, 0, 0.25) 0%, rgba(255, 184, 0, 0.08) 35%, transparent 65%); filter: blur(40px); pointer-events: none; animation: db-pulse-suave 5s ease-in-out infinite; } /* Abeja: fade-in con scale al cargar + flotación continua a partir de 1s */ .db-hero__abeja { position: relative; width: 100%; max-width: 460px; height: auto; filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5)); animation: db-fade-in-scale 800ms ease-out 0.2s both, db-flotar 4s ease-in-out 1s infinite; } @keyframes db-fade-in-scale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes db-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ----- 11.6 Indicador de scroll (flechita parpadeante abajo-centro) ---- */ .db-hero__scroll { position: absolute; bottom: var(--db-space-5); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--db-space-2); color: var(--db-blanco-tenue); text-decoration: none; font-family: var(--db-font-mono); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; animation: db-pulse-suave 2.4s ease-in-out infinite; transition: color var(--db-trans-base); } .db-hero__scroll:hover { color: var(--db-amarillo); } .db-hero__scroll-flecha { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } /* ----- 11.7 Mobile (≤980px): 1 columna, abeja arriba ---- */ @media (max-width: 980px) { .db-hero { min-height: 80vh; padding-block: var(--db-space-6); text-align: center; } .db-hero__grid { grid-template-columns: 1fr; gap: var(--db-space-5); } .db-hero__media { order: -1; /* abeja arriba del texto */ min-height: 200px; } .db-hero__abeja { max-width: 260px; } .db-hero__contenido { align-items: center; margin: 0 auto; } .db-hero__ctas { justify-content: center; } .db-hero__scroll { display: none; } /* no aporta en mobile */ } /* ============================================================ 12. HOME — QUÉ RESOLVEMOS (sección 2 de 8) front-page.php →
. 4 cards de dolor con ghost-number, grid 4/2/1, entrada en cascada via [data-db-animate] (ver bloque 7). ============================================================ */ /* ----- 12.1 Contenedor de la sección ---- */ .db-resolvemos { background-color: var(--db-negro-suave); padding-block: var(--db-space-9); position: relative; } /* ----- 12.2 Cabecera (título + subtítulo, centrados) ---- */ .db-resolvemos__cabecera { text-align: center; max-width: 720px; margin: 0 auto var(--db-space-8); } .db-resolvemos__titulo { font-family: var(--db-font-titulo); font-weight: 700; font-size: clamp(1.875rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--db-blanco); margin: 0 0 var(--db-space-3); } .db-resolvemos__subtitulo { font-family: var(--db-font-cuerpo); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--db-blanco-tenue); margin: 0; } /* ----- 12.3 Grid de cards: 4 → 2 → 1 columnas ---- */ .db-resolvemos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--db-space-5); } @media (max-width: 1100px) { .db-resolvemos__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .db-resolvemos__grid { grid-template-columns: 1fr; } } /* ----- 12.4 Card individual ---- */ .db-resolvemos__card { position: relative; padding: var(--db-space-6) var(--db-space-5); background-color: var(--db-gris-oscuro); border: 1px solid var(--db-gris-medio); border-radius: var(--db-radio-lg); transition: transform var(--db-trans-base), border-color var(--db-trans-base), box-shadow var(--db-trans-base); will-change: transform; } .db-resolvemos__card:hover { border-color: var(--db-amarillo); transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 184, 0, 0.15); } .db-resolvemos__card:hover .db-resolvemos__numero { opacity: 0.35; } /* ----- 12.5 Ghost number (01, 02, 03, 04) ---- */ .db-resolvemos__numero { display: block; font-family: var(--db-font-titulo); font-weight: 800; font-size: 3.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--db-amarillo); opacity: 0.18; margin-bottom: var(--db-space-4); font-variant-numeric: tabular-nums; transition: opacity var(--db-trans-base); } /* ----- 12.6 Texto del dolor ---- */ .db-resolvemos__texto { font-family: var(--db-font-titulo); font-weight: 600; font-size: 1.0625rem; /* 17px */ line-height: 1.4; color: var(--db-blanco); margin: 0; } /* ----- 12.7 Stagger de entrada en cascada (100ms entre cards) ---- La cabecera entra primero (sin delay). Las cards en orden. */ .db-resolvemos__card:nth-child(1).db-visible { animation-delay: 0ms; } .db-resolvemos__card:nth-child(2).db-visible { animation-delay: 100ms; } .db-resolvemos__card:nth-child(3).db-visible { animation-delay: 200ms; } .db-resolvemos__card:nth-child(4).db-visible { animation-delay: 300ms; } /* ============================================================ 13. HOME — LOS 3 BLOQUES (sección 3 de 8) front-page.php →
. Sección clave del home: 3 servicios principales con la card central destacada como "Más popular". id="bloques" = destino del CTA "Ver Servicios" del hero. ============================================================ */ /* ----- 13.1 Contenedor de la sección ---- */ .db-bloques { background-color: var(--db-negro); padding-block: var(--db-space-9); position: relative; } /* ----- 13.2 Cabecera (título + subtítulo, centrados) ---- */ .db-bloques__cabecera { text-align: center; max-width: 780px; margin: 0 auto var(--db-space-8); } .db-bloques__titulo-seccion { font-family: var(--db-font-titulo); font-weight: 700; font-size: clamp(1.875rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--db-blanco); margin: 0 0 var(--db-space-3); } .db-bloques__subtitulo-seccion { font-family: var(--db-font-cuerpo); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--db-blanco-tenue); margin: 0; } /* ----- 13.3 Grid 3 columnas (apila a 1 ≤1024px) ---- */ .db-bloques__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--db-space-5); align-items: stretch; perspective: 1200px; /* para el rotateX en hover de las cards */ } @media (max-width: 1024px) { .db-bloques__grid { grid-template-columns: 1fr; } } /* ----- 13.4 Card base ---- */ .db-bloques__card { display: flex; flex-direction: column; padding: var(--db-space-7) var(--db-space-6); background-color: var(--db-gris-oscuro); border: 1px solid var(--db-gris-medio); border-radius: var(--db-radio-xl); transform-style: preserve-3d; transition: transform var(--db-trans-base), border-color var(--db-trans-base), box-shadow var(--db-trans-base); will-change: transform; } @media (hover: hover) { .db-bloques__card:hover { border-color: var(--db-amarillo); transform: translateY(-8px) rotateX(2deg); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 184, 0, 0.20); } } /* ----- 13.5 Card destacada (Néctar Promo, centro) ---- NO usa transform en estado base para no colisionar con la animación de entrada [data-db-animate]. Elevación visual via margin negativo (pull-up real del layout). */ .db-bloques__card--destacada { border-color: var(--db-amarillo); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 32px rgba(255, 184, 0, 0.15); } @media (min-width: 1025px) { .db-bloques__card--destacada { margin-block: -16px 16px; padding: var(--db-space-8) var(--db-space-6); } } @media (hover: hover) { .db-bloques__card--destacada:hover { transform: translateY(-12px) rotateX(2deg); box-shadow: 0 28px 56px rgba(0, 0, 0, 0.6), 0 0 48px rgba(255, 184, 0, 0.30); } } /* ----- 13.6 Etiqueta superior (BLOQUE N · ...) ---- */ .db-bloques__etiqueta { display: block; font-family: var(--db-font-mono); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--db-amarillo); margin-bottom: var(--db-space-4); } /* ----- 13.7 Título y subtítulo de card ---- */ .db-bloques__titulo { font-family: var(--db-font-titulo); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--db-blanco); margin: 0 0 var(--db-space-1); } .db-bloques__subtitulo { font-family: var(--db-font-cuerpo); font-size: 0.95rem; color: var(--db-blanco-tenue); margin: 0 0 var(--db-space-4); } /* ----- 13.8 Separador (gradient amarillo en la destacada) ---- */ .db-bloques__separador { width: 100%; height: 1px; background: var(--db-gris-medio); margin: 0 0 var(--db-space-4); } .db-bloques__card--destacada .db-bloques__separador { background: linear-gradient(to right, transparent, var(--db-amarillo), transparent); } /* ----- 13.9 Descripción ---- */ .db-bloques__descripcion { font-family: var(--db-font-cuerpo); font-size: 1rem; line-height: 1.6; color: var(--db-blanco-suave); margin: 0 0 var(--db-space-5); } /* ----- 13.10 Lista con checkmark amarillo ---- Círculo amarillo + SVG inline (data-URL) stroke negro centrado. */ .db-bloques__lista { list-style: none; padding: 0; margin: 0 0 var(--db-space-6); display: flex; flex-direction: column; gap: var(--db-space-3); } .db-bloques__item { position: relative; padding-left: 30px; font-family: var(--db-font-cuerpo); font-size: 0.95rem; line-height: 1.4; color: var(--db-blanco-suave); } .db-bloques__item::before { content: ''; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; background-color: var(--db-amarillo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A0A0F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 70%; } /* ----- 13.11 CTA inferior (anclado al fondo del card) ---- */ .db-bloques__cta { margin-top: auto; /* empuja el botón al fondo, alinea todas las cards */ align-self: stretch; justify-content: center; } /* ----- 13.12 Stagger de entrada en cascada (150ms entre cards) ---- */ .db-bloques__card:nth-child(1).db-visible { animation-delay: 0ms; } .db-bloques__card:nth-child(2).db-visible { animation-delay: 150ms; } .db-bloques__card:nth-child(3).db-visible { animation-delay: 300ms; } /* ============================================================ 14. HOME — CASO DE ÉXITO (sección 4 de 8) front-page.php →
. Caso ANÓNIMO (fábrica de muebles en Santiago). Layout 60/40 con storytelling a la izquierda y 3 métricas a la derecha. Counters animados via [data-counter] (ver js/counter-animation.js). ============================================================ */ /* ----- 14.1 Contenedor de la sección ---- */ .db-caso { background-color: var(--db-negro-suave); padding-block: var(--db-space-9); position: relative; } /* ----- 14.2 Cabecera ---- */ .db-caso__cabecera { text-align: center; max-width: 820px; margin: 0 auto var(--db-space-8); } .db-caso__etiqueta { display: inline-block; font-family: var(--db-font-mono); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--db-amarillo); margin-bottom: var(--db-space-3); } .db-caso__titulo { font-family: var(--db-font-titulo); font-weight: 700; font-size: clamp(1.875rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--db-blanco); margin: 0 0 var(--db-space-3); } .db-caso__subtitulo { font-family: var(--db-font-cuerpo); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--db-blanco-tenue); margin: 0; } /* ----- 14.3 Grid 60/40 (apila a 1 col ≤1024px) ---- */ .db-caso__grid { display: grid; grid-template-columns: 60% 40%; align-items: start; /* métricas no se estiran a la altura del texto */ gap: var(--db-space-7); } @media (max-width: 1024px) { .db-caso__grid { grid-template-columns: 1fr; } } /* ----- 14.4 Historia (columna izquierda) ---- */ .db-caso__historia { display: flex; flex-direction: column; gap: var(--db-space-6); } .db-caso__parrafo { display: flex; flex-direction: column; gap: var(--db-space-2); } .db-caso__parrafo-etiqueta { display: inline-block; font-family: var(--db-font-mono); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--db-amarillo); } .db-caso__parrafo p { font-family: var(--db-font-cuerpo); font-size: 1.0625rem; line-height: 1.7; color: var(--db-blanco-suave); margin: 0; } /* Stagger de párrafos */ .db-caso__parrafo:nth-child(1).db-visible { animation-delay: 0ms; } .db-caso__parrafo:nth-child(2).db-visible { animation-delay: 100ms; } .db-caso__parrafo:nth-child(3).db-visible { animation-delay: 200ms; } /* ----- 14.5 Métricas (columna derecha) ---- */ .db-caso__metricas { display: flex; flex-direction: column; gap: var(--db-space-4); } .db-caso__metrica { background-color: var(--db-gris-oscuro); border: 1px solid var(--db-gris-medio); border-radius: var(--db-radio-lg); padding: var(--db-space-5); } /* Stagger de métricas (paralelo al de párrafos) */ .db-caso__metrica:nth-child(1).db-visible { animation-delay: 0ms; } .db-caso__metrica:nth-child(2).db-visible { animation-delay: 100ms; } .db-caso__metrica:nth-child(3).db-visible { animation-delay: 200ms; } /* ----- 14.6 Número de métrica + label ---- */ .db-caso__metrica-numero { display: block; font-family: var(--db-font-titulo); font-weight: 800; font-size: clamp(2.5rem, 4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--db-amarillo); margin-bottom: var(--db-space-2); /* tabular-nums OBLIGATORIO en counters animados: evita layout shift mientras los dígitos cambian de width al contar. */ font-variant-numeric: tabular-nums; } .db-caso__metrica-label { font-family: var(--db-font-cuerpo); font-size: 0.95rem; line-height: 1.5; color: var(--db-blanco-suave); margin: 0; } /* ----- 14.7 CTA final centrado ---- */ .db-caso__cta-wrap { text-align: center; margin-top: var(--db-space-8); } /* ============================================================ 15. HOME — POR QUÉ DIGITAL BEE (sección 5 de 8) front-page.php →
. 4 diferenciadores en grid 2×2 con SVG inline Lucide-style. Reutiliza [data-db-animate] del bloque 7. Sin JS adicional. ============================================================ */ /* ----- 15.1 Contenedor de la sección ---- */ .db-porque { background-color: var(--db-negro); padding-block: var(--db-space-9); position: relative; } /* ----- 15.2 Cabecera ---- */ .db-porque__cabecera { text-align: center; max-width: 780px; margin: 0 auto var(--db-space-8); } .db-porque__etiqueta { display: inline-block; font-family: var(--db-font-mono); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--db-amarillo); margin-bottom: var(--db-space-3); } .db-porque__titulo { font-family: var(--db-font-titulo); font-weight: 700; font-size: clamp(1.875rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--db-blanco); margin: 0 0 var(--db-space-3); } .db-porque__subtitulo { font-family: var(--db-font-cuerpo); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--db-blanco-tenue); margin: 0; } /* ----- 15.3 Grid 2×2 (apila a 1 col ≤768px) ---- */ .db-porque__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--db-space-5); } @media (max-width: 768px) { .db-porque__grid { grid-template-columns: 1fr; } } /* ----- 15.4 Card ---- */ .db-porque__card { display: flex; flex-direction: column; padding: var(--db-space-6); background-color: var(--db-gris-oscuro); border: 1px solid var(--db-gris-medio); border-radius: var(--db-radio-lg); transition: transform var(--db-trans-base), border-color var(--db-trans-base), box-shadow var(--db-trans-base); will-change: transform; } /* ----- 15.5 Icono (SVG inline, color heredado via currentColor) ---- */ .db-porque__icono { width: 64px; height: 64px; color: var(--db-amarillo); margin-bottom: var(--db-space-4); transition: transform var(--db-trans-base); } .db-porque__icono svg { display: block; width: 100%; height: 100%; } /* ----- 15.6 Título y descripción de card ---- */ .db-porque__card-titulo { font-family: var(--db-font-titulo); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--db-blanco); margin: 0 0 var(--db-space-3); } .db-porque__card-descripcion { font-family: var(--db-font-cuerpo); font-size: 1rem; line-height: 1.7; color: var(--db-blanco-suave); margin: 0; } /* ----- 15.7 Hover (solo mouse, no touch) ---- */ @media (hover: hover) { .db-porque__card:hover { border-color: var(--db-amarillo); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4), 0 0 32px rgba(255, 184, 0, 0.15); } .db-porque__card:hover .db-porque__icono { transform: scale(1.1) rotate(-3deg); } } /* ----- 15.8 Stagger de entrada (100ms entre cards) ---- */ .db-porque__card:nth-child(1).db-visible { animation-delay: 0ms; } .db-porque__card:nth-child(2).db-visible { animation-delay: 100ms; } .db-porque__card:nth-child(3).db-visible { animation-delay: 200ms; } .db-porque__card:nth-child(4).db-visible { animation-delay: 300ms; } /* ============================================================ 16. HOME — PARA QUIÉN / RUBROS (sección 6 de 8) front-page.php →
. 12 cards pequeñas con SVG icon + nombre. Grid 4/3/2 cols. Reutiliza [data-db-animate] del bloque 7. Sin JS adicional. ============================================================ */ /* ----- 16.1 Contenedor ---- */ .db-rubros { background-color: var(--db-negro-suave); padding-block: var(--db-space-9); position: relative; } /* ----- 16.2 Cabecera ---- */ .db-rubros__cabecera { text-align: center; max-width: 820px; margin: 0 auto var(--db-space-8); } .db-rubros__etiqueta { display: inline-block; font-family: var(--db-font-mono); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--db-amarillo); margin-bottom: var(--db-space-3); } .db-rubros__titulo { font-family: var(--db-font-titulo); font-weight: 700; font-size: clamp(1.875rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--db-blanco); margin: 0 0 var(--db-space-3); } .db-rubros__subtitulo { font-family: var(--db-font-cuerpo); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--db-blanco-tenue); margin: 0; } /* ----- 16.3 Grid 4/3/2 cols ---- */ .db-rubros__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--db-space-4); } @media (max-width: 1024px) { .db-rubros__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .db-rubros__grid { grid-template-columns: repeat(2, 1fr); } } /* ----- 16.4 Card (compacta, vertical, centrada) ---- */ .db-rubros__card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--db-space-3); padding: var(--db-space-5) var(--db-space-3); text-align: center; background-color: var(--db-gris-oscuro); border: 1px solid var(--db-gris-medio); border-radius: var(--db-radio-md); transition: transform var(--db-trans-base), border-color var(--db-trans-base), box-shadow var(--db-trans-base); will-change: transform; } /* ----- 16.5 Icono ---- */ .db-rubros__icono { width: 28px; height: 28px; color: var(--db-amarillo); transition: transform var(--db-trans-base); } .db-rubros__icono svg { display: block; width: 100%; height: 100%; } /* ----- 16.6 Nombre del rubro ---- */ .db-rubros__nombre { font-family: var(--db-font-titulo); font-weight: 500; font-size: 0.95rem; color: var(--db-blanco); line-height: 1.2; } /* ----- 16.7 Hover (solo mouse) ---- */ @media (hover: hover) { .db-rubros__card:hover { border-color: var(--db-amarillo); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 184, 0, 0.10); } .db-rubros__card:hover .db-rubros__icono { transform: scale(1.15); } } /* ----- 16.8 Cierre (texto + link "Diagnóstico Digital Gratis →") ---- */ .db-rubros__cierre { display: flex; flex-direction: column; align-items: center; gap: var(--db-space-3); margin-top: var(--db-space-7); text-align: center; } .db-rubros__cierre-texto { color: var(--db-blanco-tenue); font-family: var(--db-font-cuerpo); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 600px; } .db-rubros__cierre-link { display: inline-block; color: var(--db-amarillo); font-family: var(--db-font-titulo); font-weight: 600; font-size: 1rem; text-decoration: none; transition: color var(--db-trans-rapida), transform var(--db-trans-rapida); } .db-rubros__cierre-link:hover { color: var(--db-amarillo-suave); transform: translateX(4px); /* la flecha "tira" del link */ } /* ----- 16.9 Stagger 12 cards (50ms entre cada una) ---- */ .db-rubros__card:nth-child(1).db-visible { animation-delay: 0ms; } .db-rubros__card:nth-child(2).db-visible { animation-delay: 50ms; } .db-rubros__card:nth-child(3).db-visible { animation-delay: 100ms; } .db-rubros__card:nth-child(4).db-visible { animation-delay: 150ms; } .db-rubros__card:nth-child(5).db-visible { animation-delay: 200ms; } .db-rubros__card:nth-child(6).db-visible { animation-delay: 250ms; } .db-rubros__card:nth-child(7).db-visible { animation-delay: 300ms; } .db-rubros__card:nth-child(8).db-visible { animation-delay: 350ms; } .db-rubros__card:nth-child(9).db-visible { animation-delay: 400ms; } .db-rubros__card:nth-child(10).db-visible { animation-delay: 450ms; } .db-rubros__card:nth-child(11).db-visible { animation-delay: 500ms; } .db-rubros__card:nth-child(12).db-visible { animation-delay: 550ms; } /* ============================================================ 17. HOME — CTA FINAL (sección 7 de 8) front-page.php →
. Bloque AMARILLO de máximo contraste antes del footer. Fondo amarillo, texto negro, botón con colores invertidos (.db-btn-inverso). Decoración hexagonal sutil en esquinas. ============================================================ */ /* ----- 17.1 Contenedor ---- */ .db-cta-final { position: relative; background-color: var(--db-amarillo); padding-block: var(--db-space-10); text-align: center; overflow: hidden; /* contiene las decoraciones que salen del borde */ } /* ----- 17.2 Decoración hexagonal (panal en esquinas opuestas) ---- */ .db-cta-final__decoracion { position: absolute; width: 420px; height: 420px; color: var(--db-negro); opacity: 0.08; pointer-events: none; } .db-cta-final__decoracion svg { display: block; width: 100%; height: 100%; } .db-cta-final__decoracion--tr { top: -120px; right: -120px; } .db-cta-final__decoracion--bl { bottom: -120px; left: -120px; } /* ----- 17.3 Contenedor del contenido ---- */ .db-cta-final__contenido { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; } /* ----- 17.4 Título ---- */ .db-cta-final__titulo { font-family: var(--db-font-titulo); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--db-negro); margin: 0 0 var(--db-space-5); } /* ----- 17.5 Subtítulo ---- */ .db-cta-final__subtitulo { font-family: var(--db-font-cuerpo); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: rgba(10, 10, 15, 0.8); margin: 0 auto var(--db-space-6); max-width: 640px; } /* ----- 17.6 Botón grande (override scoped al CTA Final) ---- */ .db-cta-final__boton { padding: 1.1rem 2.5rem !important; font-size: 1.05rem !important; margin-bottom: var(--db-space-4); } /* ----- 17.7 Nota debajo del botón ---- */ .db-cta-final__nota { font-family: var(--db-font-cuerpo); font-size: 0.9rem; color: rgba(10, 10, 15, 0.7); margin: 0; line-height: 1.5; } /* ----- 17.8 Mobile: padding más cómodo y decoraciones más chicas ---- */ @media (max-width: 768px) { .db-cta-final { padding-block: var(--db-space-8); } .db-cta-final__decoracion { width: 280px; height: 280px; } .db-cta-final__decoracion--tr { top: -80px; right: -80px; } .db-cta-final__decoracion--bl { bottom: -80px; left: -80px; } } /* ============================================================ 18. FOOTER GLOBAL (override del de Divi) footer.php (child) →