/** * DANG3R — capa de efectos. * * Los colores y la tipografía NO se definen aquí: viven en el kit de Elementor (post 733) * para que el cliente pueda editarlos desde la UI. Este archivo solo consume sus variables * (--e-global-color-*) y añade lo que Elementor no sabe expresar: profundidad y movimiento. * * Clases pensadas para escribirse en Elementor → Avanzado → Clases CSS. */ /* --------------------------------------------------------------- Fuentes autoalojadas: sustituyen las 4 peticiones a Google Fonts. Enlazarlas en caliente manda la IP de cada visitante a Google, que el LG München declaró violación del RGPD en enero de 2022. El español entero cabe en el subconjunto latin; latin-ext solo se descarga si aparece un carácter que lo exija (nicks, otros idiomas). Rangos copiados literalmente de la respuesta de la API de Google. --------------------------------------------------------------- */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/anton-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Variable: un solo archivo cubre 400-700 y sustituye a tres estáticas. */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: block; src: url('fonts/nunito-sans-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: block; src: url('fonts/nunito-sans-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------- Tokens de la capa de efectos. Cuelgan de `body`, NO de `:root`. Elementor declara sus variables en `.elementor-kit-733`, que es una clase del ; desde :root (el , su padre) no se ven, porque las custom properties heredan hacia abajo y nunca hacia arriba. Puestas en :root, cada var() caería al valor de reserva y el kit quedaría desconectado sin dar ningún error: se vería bien y no seguiría a la UI. Las superficies salen del kit (custom_colors con _id legibles, que Elementor convierte en --e-global-color-surfaceN). El kit es la única fuente de verdad; los valores de reserva solo cubren el caso de que el kit no haya cargado. --------------------------------------------------------------- */ body { --d3-surface-0: var(--e-global-color-surface0, #0b0b0c); --d3-surface-1: var(--e-global-color-surface1, #131315); --d3-surface-2: var(--e-global-color-surface2, #1d1d1d); --d3-surface-3: var(--e-global-color-surface3, #26262a); --d3-surface-4: var(--e-global-color-surface4, #33333a); --d3-hairline: color-mix(in srgb, #fff 10%, transparent); --d3-glow: color-mix(in srgb, var(--e-global-color-secondary, #fac308) 45%, transparent); --d3-lift-1: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 28%); --d3-lift-2: 0 2px 4px rgb(0 0 0 / 45%), 0 16px 40px rgb(0 0 0 / 38%); --d3-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* --------------------------------------------------------------- Reveals al scroll — nativos, cero JS. Elementor Pro ya trae entrance animations; esto es el fallback fino para secciones que las necesitan ligadas al scroll real. --------------------------------------------------------------- */ @keyframes d3-reveal-in { from { opacity: 0; transform: translateY(2rem); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .d3-reveal { animation: d3-reveal-in linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; } } } /* --------------------------------------------------------------- Superficie con profundidad. Pensada para tarjetas de eventos, colaboraciones y clips. Se combina con el 3D Tilt de Elementor Pro. --------------------------------------------------------------- */ .d3-card { background: linear-gradient(180deg, var(--d3-surface-3), var(--d3-surface-1)); border: 1px solid var(--d3-hairline); box-shadow: var(--d3-lift-1); transition: box-shadow 0.35s var(--d3-ease), border-color 0.35s var(--d3-ease); } .d3-card:hover { border-color: var(--d3-glow); box-shadow: var(--d3-lift-2), 0 0 0 1px var(--d3-glow); } /* --------------------------------------------------------------- El contenedor de Elementor que envuelve un widget HTML con aspect-ratio propio a veces colapsa a la altura de una línea de texto (bug de sizing flex + widget HTML anidado). Forzar el mismo aspect-ratio en el contenedor padre lo resuelve sin depender de que el hijo determine el alto solo. --------------------------------------------------------------- */ .d3-profile-photo-slot { aspect-ratio: 4 / 3; } /* Columna de texto junto a la tarjeta de Sobre Mí: sin tope, las líneas se estiran al ancho entero del contenedor (hasta ~770px en desktop) y el texto se ve disperso. Limitar a una medida de lectura normal. */ .d3-bio-measure { max-width: 52ch; margin-left: 0; margin-right: auto; } /* Párrafo de presentación con toque editorial: alineado a la izquierda (coherente con la home y con la barra de acento), barra amarilla a la izquierda y la primera frase destacada vía en el contenido. */ .d3-bio-styled { position: relative; text-align: left; padding-left: 1.2em; border-left: 3px solid var(--e-global-color-secondary, #fac308); } .d3-bio-styled p:first-child strong { color: var(--e-global-color-secondary, #fac308); } /* "Este soy yo…" y cualquier enlace del bio: amarillo y con peso, como el resto de destacados (DANG3R). Que se lea como parte del texto, no como un botón aparte. */ .d3-bio-styled a { color: var(--e-global-color-secondary, #fac308); font-weight: 900; text-decoration: none; } .d3-bio-styled a:hover { text-decoration: underline; } /* --------------------------------------------------------------- Formulario de contacto: el form del cliente trae inputs blancos (clase cyber-input) que chocan con el tema oscuro. Se reestilan a superficie oscura + acento amarillo al enfocar, sin tocar el CF7. --------------------------------------------------------------- */ .d3-contact-form label { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: #cfcfcf; display: block; margin-bottom: 8px; } .d3-contact-form .form-group { margin-bottom: 18px; } .d3-contact-form input.cyber-input, .d3-contact-form textarea.cyber-textarea { width: 100%; background: var(--d3-surface-2, #1d1d1d) !important; border: 1px solid var(--d3-hairline, rgba(255,255,255,.14)); border-radius: 8px; color: #fff !important; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem; padding: 13px 15px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .d3-contact-form .cyber-textarea { min-height: 150px; resize: vertical; } .d3-contact-form .cyber-input::placeholder, .d3-contact-form .cyber-textarea::placeholder { color: #7d7d7d; font-weight: 700; } .d3-contact-form .cyber-input:focus, .d3-contact-form .cyber-textarea:focus { outline: none; border-color: var(--e-global-color-secondary, #fac308); box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-global-color-secondary, #fac308) 22%, transparent); } .d3-contact-form .acceptance-group { font-family: 'Nunito', sans-serif; font-size: 0.82rem; color: #b8b8b8; } .d3-contact-form .cyber-btn-submit { width: 100%; background: var(--e-global-color-secondary, #fac308); color: #0d0d0d; font-family: 'Nunito', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.5px; border: none; border-radius: 8px; padding: 15px; cursor: pointer; transition: background 0.2s ease; } .d3-contact-form .cyber-btn-submit:hover { background: #ffffff; } .d3-bio-styled p { margin-block-end: 0.9em; } .d3-bio-styled p:last-child { margin-block-end: 0; } /* --------------------------------------------------------------- Glitch. fx.js rellena data-d3-text para que en Elementor baste con escribir la clase; el cliente no toca atributos a mano. --------------------------------------------------------------- */ .d3-glitch { position: relative; display: inline-block; } .d3-glitch::before, .d3-glitch::after { content: attr(data-d3-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; } .d3-glitch::before { color: var(--e-global-color-secondary, #fac308); transform: translateX(-2px); } .d3-glitch::after { color: #00e5ff; transform: translateX(2px); } @media (prefers-reduced-motion: no-preference) { .d3-glitch:hover::before, .d3-glitch:hover::after { opacity: 0.85; animation: d3-glitch-shift 0.4s steps(2, end) infinite; } .d3-glitch:hover::after { animation-delay: 0.08s; } } @keyframes d3-glitch-shift { 0% { clip-path: inset(0 0 82% 0); } 50% { clip-path: inset(58% 0 22% 0); } 100% { clip-path: inset(86% 0 0 0); } } /* --------------------------------------------------------------- HERO — móvil primero (80-90% del tráfico). El hero era una caja de 60vh con un vídeo 4K dentro y CERO contenido: el mensaje empezaba en el bloque siguiente, centrado. Aquí se ancla el texto abajo-izquierda, se rompe el centrado y se le da un h1 de verdad (antes no había ninguno en toda la portada). --------------------------------------------------------------- */ /* El vídeo debe CUBRIR, no caber. Elementor lo mete en su propio contenedor y sin esto se queda en su tamaño natural dejando franjas negras. */ .d3-hero .elementor-background-video-container, .d3-hero .elementor-background-video-embed, .d3-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* El hero debe ocupar la pantalla ENTERA, sin negociar con sus contenedores. No basta con compensar el header: el contenedor padre tiene su propio desplazamiento y su padding, y el ancho lo limita el contenedor de Elementor. Compensar solo el header dejaba 31px negros arriba y 35px de estrechez. - Vertical: fx.js mide la distancia REAL desde el borde de la ventana hasta donde caería el hero y la sube entera. Se devuelve como padding-top para que el titular no acabe debajo del menú. Medir en vez de cablear: cualquier cambio de logo, menú o padding lo recalcula solo. - Horizontal: la técnica de sangrado completo. `50% - 50vw` lo saca de cualquier contenedor con ancho máximo, mida lo que mida. El `overflow-x: hidden` que el kit ya tiene en html/body absorbe el pelo de desbordamiento que provoca `100vw` al contar la barra de scroll. */ .d3-hero { position: relative; overflow: hidden; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* margin: tira del hero hasta el borde superior (distancia REAL medida por fx.js, incluye header + cualquier desplazamiento del contenedor padre) → el vídeo llena desde arriba. padding: solo el alto del menú, para que el titular no quede debajo del header. */ margin-top: calc(-1 * var(--d3-hero-pull, var(--d3-hero-offset, 0px))); padding-top: var(--d3-hero-offset, 0px); } /* Kicker: la etiqueta pequeña sobre el titular. Da un punto de entrada a la vista antes del golpe grande. */ .d3-hero__kicker .elementor-heading-title { font-family: "Nunito Sans", sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.35em; text-transform: uppercase; color: var(--e-global-color-secondary, #fac308); margin-bottom: 0.75rem; } /* El titular. Escala agresiva a propósito: el contraste de tamaño es lo que crea jerarquía, y con Anton (un solo peso) es la ÚNICA herramienta que hay. line-height 0.92 para que dos líneas se lean como un bloque, no como una lista. */ .d3-hero__title .elementor-heading-title { font-family: "Anton", sans-serif; /* 9vw (no 11) para que en móvil "CERO ABURRIMIENTO." quepa en una línea; en desktop sigue topando en 6rem, no cambia. */ font-size: clamp(2.1rem, 9vw, 6rem); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: var(--e-global-color-primary, #fff); max-width: 19ch; /* cabe la línea más larga sin partirla; el
ya marca el salto. */ text-wrap: balance; } .d3-hero__sub .elementor-heading-title { font-family: "Nunito Sans", sans-serif; font-size: clamp(0.95rem, 3.6vw, 1.15rem); font-weight: 400; line-height: 1.5; color: var(--e-global-color-accent, #a0a0a8); margin-top: 1rem; max-width: 34ch; /* Medida de lectura: más de ~40ch cansa en móvil. */ text-transform: none; } /* El texto alineado a la izquierda, SIEMPRE. El centrado en párrafos largos deja los dos bordes dentados y es la marca visual del amateur. */ .d3-hero .elementor-widget-heading { text-align: left; width: 100%; } /* --------------------------------------------------------------- Header fijo: transparente sobre el hero, sólido al despegarse. El sticky lo hace Elementor Pro, no este CSS. Al fijarse añade la clase `.elementor-sticky--effects` al contenedor — ese es el único gancho que necesitamos. Hacerlo con JS propio sería reimplementar algo que ya está pagado, y encima pelearía con lo que el cliente toque en el editor. --------------------------------------------------------------- */ .elementor-location-header .e-con { transition: background-color 0.35s var(--d3-ease), backdrop-filter 0.35s var(--d3-ease), box-shadow 0.35s var(--d3-ease), border-color 0.35s var(--d3-ease); border-bottom: 1px solid transparent; } .elementor-location-header .elementor-sticky--effects { background-color: color-mix(in srgb, var(--d3-surface-0) 88%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--d3-hairline); box-shadow: var(--d3-lift-1); } /* Sin transición no hay salto raro para quien pidió no marearse, pero el fondo sólido sí debe aparecer: es legibilidad, no adorno. */ @media (prefers-reduced-motion: reduce) { .elementor-location-header .e-con { transition: none; } } /* --------------------------------------------------------------- Menú desplegable (móvil): el mismo cristal que el header, no un negro plano. El widget nav-menu de Elementor Pro trae `background_color_dropdown_item: #000000` — negro sólido al 100%, sin relación con el header transparente/ blur de encima. Al abrirlo, el menú "cambiaba de material" respecto al resto del sitio. Se sustituye por el mismo `color-mix` + `backdrop-filter` que usa `.elementor-sticky--effects`, para que sea una única superficie coherente en vez de dos estéticas distintas. --------------------------------------------------------------- */ .elementor-nav-menu--dropdown { background-color: color-mix(in srgb, var(--d3-surface-0) 92%, transparent) !important; backdrop-filter: blur(14px); border-top: 1px solid var(--d3-hairline); } /* --------------------------------------------------------------- Marco del skin en la sección BIO Y SKIN. Antes: la imagen flotaba sola sobre el negro, sin ningún tratamiento — se ve exactamente así en la primera captura que mandó el cliente. DOS INTENTOS PREVIOS, los dos con `inset` en porcentaje, y los dos mal por razones distintas: 1. inset:-10% — la caja del resplandor era casi del tamaño del marco. El degradado tocaba su propio borde antes de desvanecerse del todo: recorte duro. 2. inset:-55% — un `inset` simétrico SÍ mantiene el centro de la caja alineado con el centro del marco (verificado con la aritmética), pero el tamaño por defecto del círculo (`farthest-corner`, la distancia hasta la esquina más lejana) escala con el tamaño de la caja. Al hacer la caja mucho más grande, el "núcleo" brillante del degradado quedaba proporcionalmente más pequeño y descolgado del personaje: se leía como una lámpara flotando encima, no como un fondo pegado a la piel del personaje. LA SOLUCIÓN: centrado por `translate(-50%,-50%)` en vez de `inset` (matemática directa, no depende del tamaño del contenedor) + tamaño de círculo `closest-side` en vez del `circle` por defecto. `closest-side` define el radio como la distancia al lado MÁS CERCANO de la propia caja: la parada de 100% cae, por definición, exactamente en el borde de la caja. Es imposible que se corte, y como la caja es solo un poco más grande que el marco (no una caja gigante), el resplandor queda pegado al personaje en vez de flotar suelto. --------------------------------------------------------------- */ .d3-skin-frame { position: relative; } .d3-skin-frame::before { content: ""; position: absolute; top: 50%; left: 50%; width: 122%; height: 110%; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient( closest-side circle at 50% 40%, var(--d3-glow) 0%, color-mix(in srgb, var(--d3-glow) 40%, transparent) 45%, transparent 100% ); pointer-events: none; } /* --------------------------------------------------------------- Botones magnéticos. fx.js escribe el transform inline. --------------------------------------------------------------- */ .d3-magnetic { transition: transform 0.35s var(--d3-ease); will-change: transform; } /* --------------------------------------------------------------- Contacto: el formulario no aparece de golpe. Un botón "Escríbeme" lo revela (mejor primera impresión, menos muro de campos). El contenedor arranca oculto y se despliega con la clase is-open. --------------------------------------------------------------- */ .d3-formzone { display: none; } .d3-formzone.is-open { display: block; animation: d3-reveal-in 1s var(--d3-ease, cubic-bezier(.2,.8,.2,1)) both; } .d3-escribeme { display: inline-block; font-family: 'Nunito', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.5px; font-size: 1rem; color: #0d0d0d; background: var(--e-global-color-secondary, #fac308); border: none; border-radius: 8px; padding: 15px 34px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .d3-escribeme:hover { background: #ffffff; transform: translateY(-2px); } /* --------------------------------------------------------------- Footer compacto (todas las páginas). Elementor lo dejaba muy alto: el logo es el ::before del contenedor vacío 5c66150 con min-height 96px, el outer e22d616 llevaba padding 40, y el logo quedaba desalineado del nav → parecía 5 filas con huecos. Lo apretamos a 2 filas reales: [logo · enlaces] y copyright debajo. --------------------------------------------------------------- */ footer.elementor-location-footer .elementor-element-e22d616 { padding-top: 20px !important; padding-bottom: 20px !important; gap: 6px !important; } footer.elementor-location-footer .elementor-element-4747bfa { align-items: center !important; align-content: center !important; flex-wrap: nowrap !important; min-height: 0 !important; height: auto !important; } /* El logo es un ::before position:absolute (top:0;left:0) del contenedor vacío 5c66150, así que ignora flex y caía pegado arriba-izquierda, desalineado del nav. Damos a la celda una altura fija que contiene el logo y la centramos en la fila; el nav también se centra (sin su padding ni altura extra), así logo y enlaces comparten el mismo eje. */ footer.elementor-location-footer .elementor-element-5c66150 { min-height: 42px !important; height: 42px !important; align-self: center !important; } footer.elementor-location-footer .elementor-element-5c66150::before { width: 120px !important; height: 42px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } footer.elementor-location-footer .elementor-element-06e9099 { align-self: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* copyright discreto, no compite con los enlaces */ footer.elementor-location-footer .elementor-element-cdd2d7c, footer.elementor-location-footer .elementor-element-cdd2d7c * { font-size: 13px !important; } footer.elementor-location-footer .elementor-element-cdd2d7c { opacity: 0.72; } @media (max-width: 767px) { footer.elementor-location-footer .elementor-element-e22d616 { padding-top: 16px !important; padding-bottom: 16px !important; gap: 10px !important; } /* en móvil apilado pero centrado y apretado, sin huecos */ footer.elementor-location-footer .elementor-element-4747bfa { flex-direction: column !important; align-items: center !important; gap: 10px !important; } footer.elementor-location-footer .elementor-element-5c66150 { align-self: center !important; min-height: 40px !important; width: 140px !important; } /* logo centrado H+V dentro de su celda (::before absoluto) */ footer.elementor-location-footer .elementor-element-5c66150::before { width: 108px !important; height: 38px !important; left: 50% !important; top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%) !important; } /* enlaces centrados y apretados: caben en 2 líneas justas */ footer.elementor-location-footer .dang3r-footer-links { justify-content: center !important; gap: 8px 16px !important; } footer.elementor-location-footer .dang3r-footer-links a { font-size: 13px !important; } footer.elementor-location-footer .elementor-element-cdd2d7c, footer.elementor-location-footer .elementor-element-cdd2d7c * { font-size: 12px !important; } } /* Sangrado completo: saca un elemento de cualquier contenedor con ancho máximo del kit y lo lleva de borde a borde. El overflow-x:hidden del body absorbe el pelo que provoca 100vw al contar la barra de scroll. */ .d3-fullbleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }