/* ═══════════════════════════════════════════════════════════════════ CUSTOM SCROLL SYSTEM · Base CSS · v1.1 ─────────────────────────────────────────────────────────────────── Cárgalo en WordPress junto con scroll-system.js, antes que el CSS del tema/Elementor. ═══════════════════════════════════════════════════════════════════ */ /* ╔═══════════════════════════════════════════════════════════════╗ ║ 1 · MODO FRONTEND (vista pública de la página) ║ ║ Las secciones se apilan sobre el viewport y el JS las anima. ║ ╚═══════════════════════════════════════════════════════════════╝ */ html, body { height: 100%; width: 100%; overflow: hidden !important; overscroll-behavior: none; margin: 0; } .css-stage { position: fixed; inset: 0; overflow: hidden; } .css-section { position: absolute !important; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; /* No añadas CSS transitions sobre transform/opacity: el JS las actualiza cada frame y un transition lucharía contra esos cambios. */ } [data-entry], [data-exit] { will-change: transform, opacity; } /* ╔═══════════════════════════════════════════════════════════════╗ ║ 2 · MODO EDITOR (Elementor) ║ ║ Cuando la página se ve dentro del editor, el JS añade la ║ ║ clase `.scroll-system-editor-mode` a . Estas reglas ║ ║ apilan las secciones verticalmente para editarlas cómodos. ║ ╚═══════════════════════════════════════════════════════════════╝ */ html.scroll-system-editor-mode, html.scroll-system-editor-mode body { overflow: auto !important; height: auto !important; } html.scroll-system-editor-mode .css-stage { position: relative !important; inset: auto !important; height: auto !important; overflow: visible !important; } html.scroll-system-editor-mode .css-section { position: relative !important; inset: auto !important; min-height: 100vh !important; height: auto !important; /* Cancelamos cualquier transform/opacity que pudiera haber quedado aplicado por el JS antes de detectar el editor. */ transform: none !important; opacity: 1 !important; /* Eliminamos el contexto de compositing para que el editor de Elementor pueda renderizar sus overlays y handles sin interferencias. */ will-change: auto !important; /* Separador visual entre secciones para que se distingan en edición. */ margin-bottom: 40px; outline: 1px dashed rgba(127, 127, 127, 0.35); outline-offset: -1px; } /* Que los hijos con efectos propios también se vean en su posición original mientras editas. */ html.scroll-system-editor-mode [data-entry], html.scroll-system-editor-mode [data-exit] { transform: none !important; opacity: 1 !important; will-change: auto !important; } /* Red de seguridad: cualquier hijo de css-section que haya recibido opacity/transform por inline style (detección tardía del editor) queda limpio. Sin !important para no sobreescribir estilos legítimos de Elementor — el JS ya habrá quitado los inline styles con stopForEditor(). */ html.scroll-system-editor-mode .css-section * { opacity: 1; transform: none; } /* Etiqueta sutil arriba de cada sección, solo en editor, para identificarlas rápido. Comenta este bloque si no la quieres. */ html.scroll-system-editor-mode .css-section::before { content: "css-section #" counter(scroll-section); counter-increment: scroll-section; position: absolute; top: 8px; left: 8px; z-index: 9999; font: 700 12px/1 ui-monospace, monospace; text-decoration: underline; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(127, 127, 127, 0.9); padding: 0px 8px; border-radius: 3px; pointer-events: none; } html.scroll-system-editor-mode .css-stage { counter-reset: scroll-section; } /* ╔═══════════════════════════════════════════════════════════════╗ ║ 3 · NAV DOTS — puntos de navegación lateral ║ ║ Generados dinámicamente por JS. Se superponen sobre todo. ║ ║ ║ ║ Tema adaptativo: el JS añade la clase .nav-theme-light al ║ ║ contenedor cuando la sección activa tiene fondo claro ║ ║ (data-nav-theme="light"). Sin esa clase, modo oscuro. ║ ║ ║ ║ Color oscuro: #1A003A | Color claro: blanco ║ ╚═══════════════════════════════════════════════════════════════╝ */ /* ── Variables de color por tema ─────────────────────────────── */ #scroll-nav-dots { /* Tema oscuro (defecto) — puntos blancos */ --dot-pip-bg: rgba(255, 255, 255, 0.35); --dot-pip-border: rgba(255, 255, 255, 0.55); --dot-pip-hover-bg: rgba(255, 255, 255, 0.65); --dot-pip-hover-border:rgba(255, 255, 255, 0.9); --dot-pip-active-bg: rgba(255, 255, 255, 1); --dot-pip-active-border:rgba(255, 255, 255, 1); --dot-tip-color: rgba(255, 255, 255, 0.9); --dot-tip-bg: rgba(0, 0, 0, 0.45); /* Transición suave al cambiar de tema */ --dot-theme-transition: 0.35s ease; } /* Tema claro — puntos en #1A003A */ #scroll-nav-dots.nav-theme-light { --dot-pip-bg: rgba(36, 18, 95 , 0.30); --dot-pip-border: rgba(36, 18, 95 , 0.50); --dot-pip-hover-bg: rgba(36, 18, 95 , 0.65); --dot-pip-hover-border: rgba(36, 18, 95 , 0.90); --dot-pip-active-bg: rgba(36, 18, 95 , 1); --dot-pip-active-border:rgba(36, 18, 95 , 1); --dot-tip-color: rgba(36, 18, 95 , 0.9); --dot-tip-bg: rgba(101, 88, 177, 0.80); } /* ── Layout ──────────────────────────────────────────────────── */ #scroll-nav-dots { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; /* el contenedor no captura; solo los botones */ } .scroll-nav-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: transparent; cursor: pointer; pointer-events: all; outline: none; -webkit-tap-highlight-color: transparent; } /* El pip — círculo visual del punto */ .scroll-nav-dot__pip { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--dot-pip-bg); border: 1.5px solid var(--dot-pip-border); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background var(--dot-theme-transition), border-color var(--dot-theme-transition); will-change: transform; } /* Hover — pip se escala ligeramente */ .scroll-nav-dot:hover .scroll-nav-dot__pip { transform: scale(2); background: var(--dot-pip-hover-bg); border-color: var(--dot-pip-hover-border); } /* Activo — pip relleno y más grande */ .scroll-nav-dot.is-active .scroll-nav-dot__pip { transform: scale(3); background: var(--dot-pip-active-bg); border-color: var(--dot-pip-active-border); } /* Hover sobre activo — no escalar más */ .scroll-nav-dot.is-active:hover .scroll-nav-dot__pip { transform: scale(1.75); } /* Tooltip — label de la sección */ .scroll-nav-dot__label { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dot-tip-color); background: var(--dot-tip-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 9px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease, color var(--dot-theme-transition), background var(--dot-theme-transition); transform: translateY(-50%) translateX(4px); } /* Tooltip visible en hover */ .scroll-nav-dot:hover .scroll-nav-dot__label { opacity: 1; transform: translateY(-50%) translateX(0); } /* En modo editor, ocultamos los nav dots completamente */ html.scroll-system-editor-mode #scroll-nav-dots { display: none; } /* * * FLECHA EN Conoce Mas -> * */ /* Estado inicial */ .more-info-btn { cursor:pointer; } .more-info-arrow { display: inline-block; transform: scaleX(1); transform-origin: center; } /* Al hacer hover en el contenedor */ .more-info-btn:hover .more-info-arrow { animation: arrowPingPong 0.5s ease-in-out infinite alternate; } /* Animación ping pong */ @keyframes arrowPingPong { from { transform: translateX(0); } to { transform: translateX(10px); } } #footer-mail { background-color: transparent; border-bottom: 1px solid #24125F; } #footer-mail input { background-color: transparent; color: #EDE939; width: 100%; border-width: medium; border-style: none; border-image: initial; font-family: "Archivo", Sans-serif; font-weight: 400; } #footer-mail input::placeholder { color: #24125F; font-family: "Archivo", Sans-serif; font-weight: 400; } #footer-mail input:focus { outline: none; }