/* NEXOBRA — landing Fuente de verdad: editar aquí, no hay paso de build. El layout vive en atributos style="" dentro de index.html (heredado del diseño original); aquí queda lo que un atributo inline no puede expresar: base, :hover, keyframes y media queries. */ /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:'Open Sans',system-ui,sans-serif;color:#4A4A4A;background:#FFFFFF;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:#163A5F;text-decoration:none} a:hover{color:#F58220} :focus-visible{outline:2px solid #F58220;outline-offset:3px;border-radius:2px} summary{list-style:none;cursor:pointer} summary::-webkit-details-marker{display:none} details[open] span[data-plus]{transform:rotate(45deg)} input,select,textarea,button{font-family:inherit} ::placeholder{color:#9AA3AC} @keyframes nxDraw{to{stroke-dashoffset:0}} @keyframes nxUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes nxFade{from{opacity:0}to{opacity:1}} @keyframes nxDot{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(9px);opacity:.35}} @media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}} /* ---------- hover ---------- Sustituye al atributo style-hover del runtime de diseño. 34 usos en el markup original colapsados en 8 reglas reales. */ .nx-h1:hover{background:#DE7016;transform:translateY(-2px)} .nx-h2:hover{background:#DE7016;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22)} .nx-h3:hover{background:rgba(255,255,255,.12);border-color:#FFFFFF} .nx-h4:hover{color:#F58220} .nx-h5:hover{background:#163A5F;color:#FFFFFF} .nx-h6:hover{background:#DE7016} .nx-h7:hover{background:rgba(255,255,255,.12)} .nx-h8:hover{background:#F58220;transform:translateY(-3px)} .nx-h1,.nx-h2,.nx-h3,.nx-h4,.nx-h5,.nx-h6,.nx-h7,.nx-h8{transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease} /* ---------- degradación sin JS ---------- Los bloques con data-reveal arrancan en opacity:0 y los revela el IntersectionObserver. Sin JS quedarían invisibles: esto los fuerza a verse. La clase no-js la pone y la quita main.js al arrancar. */ .no-js [data-reveal]{opacity:1 !important;transform:none !important} .no-js [data-wa-link]{display:none !important} /* ---------- datos de contacto vacíos ---------- Si un dato de CONFIG no está diligenciado, main.js marca su fila con data-empty y aquí se oculta, en vez de mostrar "por definir" al visitante. */ [data-contact-row][data-empty]{display:none} /* =========================================================================== RESPONSIVE El layout base ya es fluido: usa clamp() para tipografía y espaciado, y rejillas auto-fit que colapsan solas. Aquí sólo va lo que no se resuelve por sí mismo. Sobre !important: el maquetado vive en atributos style="" heredados del diseño original, y un estilo inline gana a cualquier hoja externa. Sin !important estas reglas no aplicarían. Se limita a estos bloques. =========================================================================== */ /* --------------------------------------------------------------------------- Táctil (móvil y tablet) Objetivo: 44px de alto mínimo, que es el umbral cómodo para el dedo. Llega hasta 1023px para cubrir la tablet en vertical, que también es táctil. --------------------------------------------------------------------------- */ @media (max-width: 1023px) { #contacto a, [data-contact-row] a { min-height: 44px !important; display: flex !important; align-items: center !important; } [data-ref="menuPanel"] a { min-height: 48px !important; display: flex !important; align-items: center !important; } footer a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } /* La casilla de autorización se agranda un poco. El