/* ========================================================================== Panorámica Publicidad — sistema de diseño compartido Paleta A "Panorámica Corporativo" + utilidades de animación. Los estilos de layout van inline en cada página; aquí sólo vive lo que CSS-en-línea no puede expresar: variables, keyframes, hover y scroll-reveal. ========================================================================== */ :root{ --c-primary:#0A2A5E; /* Azul Profundo */ --c-primary-2:#0d3268; --c-primary-3:#123b7a; --c-primary-deep:#071e45; --c-night:#050f26; --c-secondary:#1C74C4; /* Azul Panorámica */ --c-secondary-2:#2380d3; --c-secondary-lt:#7FC0FF; --c-accent:#F04E23; /* Naranja Panorámica */ --c-accent-2:#f65c34; --c-accent-hover:#c93c17; --c-bg:#F5F6F8; /* Gris Neutro */ --c-surface:#FFFFFF; --c-border:#E7EAF0; --c-ink:#16233B; /* Tinta */ --c-muted:#5A6B85; --c-primary-rgb:10,42,94; --c-secondary-rgb:28,116,196; --c-secondary-lt-rgb:127,192,255; --c-accent-rgb:240,78,35; /* Tokens de espaciado, radio y sombra — rescatados de assets/css/main.css (sistema antiguo) para reutilizarlos donde el layout inline no baste. */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 88px; --space-4xl: 120px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 2px 8px rgba(10,42,94,.06); --shadow-md: 0 6px 20px rgba(10,42,94,.08); --shadow-lg: 0 16px 40px rgba(10,42,94,.12); } *{box-sizing:border-box} html,body{margin:0;padding:0} /* Nada de overflow-x:hidden en html/body ni en los contenedores de página: convierte el documento en contenedor de scroll y rompe el header sticky. El recorte horizontal lo hace overflow-x:clip en el wrapper de cada página. */ body{background:var(--c-surface);color:var(--c-ink);font-family:'Manrope',system-ui,sans-serif} a{color:var(--c-accent);text-decoration:none} a:hover{color:var(--c-accent-hover)} /* ---------- keyframes ---------- */ @keyframes pano-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes pano-pulse{0%,100%{opacity:.5}50%{opacity:1}} @keyframes pano-scroll-cue{0%{transform:translateY(0);opacity:0}35%{opacity:1}100%{transform:translateY(14px);opacity:0}} /* ---------- scroll reveal (se repiten al entrar y salir del viewport) ---------- Scopeado a .pano-js (clase que agrega un script inline en , antes de pintar la página): si JavaScript está deshabilitado, html no tiene esa clase y el contenido queda visible por defecto, sin animación. */ .pano-js .pano-reveal{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1)} .pano-reveal.pano-in{opacity:1;transform:none} .pano-js .pano-reveal-l{opacity:0;transform:translateX(-80px);transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1)} .pano-reveal-l.pano-in{opacity:1;transform:none} .pano-js .pano-reveal-r{opacity:0;transform:translateX(80px);transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1)} .pano-reveal-r.pano-in{opacity:1;transform:none} .pano-js .pano-reveal-scale{opacity:0;transform:scale(.92);transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1)} .pano-reveal-scale.pano-in{opacity:1;transform:none} .pano-js .pano-reveal-clip{opacity:0;transform:translateX(-60px) skewX(-4deg);transition:opacity .7s ease,transform .95s cubic-bezier(.16,.84,.44,1)} .pano-reveal-clip.pano-in{opacity:1;transform:none} .pano-js .pano-stagger>*{opacity:0;transform:translateY(26px);transition:opacity .65s cubic-bezier(.16,.84,.44,1),transform .65s cubic-bezier(.16,.84,.44,1)} .pano-stagger.pano-in>*{opacity:1;transform:none} .pano-stagger.pano-in>*:nth-child(2){transition-delay:.09s} .pano-stagger.pano-in>*:nth-child(3){transition-delay:.18s} .pano-stagger.pano-in>*:nth-child(4){transition-delay:.27s} .pano-stagger.pano-in>*:nth-child(5){transition-delay:.36s} .pano-stagger.pano-in>*:nth-child(6){transition-delay:.45s} .pano-stagger.pano-in>*:nth-child(7){transition-delay:.54s} .pano-stagger.pano-in>*:nth-child(8){transition-delay:.63s} .pano-js .pano-stagger-x>*{opacity:0;transform:translateX(-70px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)} .pano-stagger-x.pano-in>*{opacity:1;transform:none} .pano-stagger-x.pano-in>*:nth-child(2){transition-delay:.1s} .pano-stagger-x.pano-in>*:nth-child(3){transition-delay:.2s} .pano-stagger-x.pano-in>*:nth-child(4){transition-delay:.3s} .pano-d1{transition-delay:.1s}.pano-d2{transition-delay:.2s}.pano-d3{transition-delay:.3s}.pano-d4{transition-delay:.4s} /* ---------- hover ---------- */ .pano-btn{transition:transform .22s cubic-bezier(.16,.84,.44,1),box-shadow .22s ease,background-color .25s ease,color .25s ease,border-color .25s ease} .pano-btn:hover{transform:translateY(-3px)} .pano-card{transition:transform .3s cubic-bezier(.16,.84,.44,1),box-shadow .3s ease,background-color .3s ease,border-color .25s ease} .pano-card:hover{transform:translateY(-6px)} .pano-zoom{transition:transform .8s cubic-bezier(.16,.84,.44,1)} .pano-tile:hover .pano-zoom{transform:scale(1.07)} .pano-ov{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,.84,.44,1)} .pano-tile:hover .pano-ov{opacity:1;transform:none} .pano-tile .pano-scrim{transition:opacity .5s ease} .pano-tile:hover .pano-scrim{opacity:.94} .pano-row{transition:background-color .35s ease} .pano-row-title{transition:transform .4s cubic-bezier(.16,.84,.44,1),color .3s ease} .pano-row:hover{background-color:var(--c-bg)} .pano-row:hover .pano-row-title{transform:translateX(20px);color:var(--c-accent)} .pano-row-thumb{transition:transform .45s cubic-bezier(.16,.84,.44,1),opacity .35s ease} .pano-row:hover .pano-row-thumb{transform:scale(1.06) rotate(-1.5deg);opacity:1} .pano-row-arrow{opacity:0;transform:translateX(-14px);transition:opacity .35s ease,transform .4s cubic-bezier(.16,.84,.44,1)} .pano-row:hover .pano-row-arrow{opacity:1;transform:none} .pano-clip-text{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .pano-social{transition:padding-left .3s ease,color .3s ease,border-color .3s ease} .pano-social:hover{padding-left:16px;color:var(--c-accent)} /* ---------- navegación: estado activo por página ---------- */ .pano-nav-link{position:relative;transition:color .2s ease} .pano-nav-link::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,.84,.44,1)} .pano-nav-link:hover::after{transform:scaleX(1)} .pano-nav[data-active="inicio"] .pano-nav-link[data-page="inicio"], .pano-nav[data-active="soportes"] .pano-nav-link[data-page="soportes"], .pano-nav[data-active="campanas"] .pano-nav-link[data-page="campanas"], .pano-nav[data-active="nosotros"] .pano-nav-link[data-page="nosotros"], .pano-nav[data-active="contacto"] .pano-nav-link[data-page="contacto"]{color:var(--c-accent)} .pano-nav[data-active="inicio"] .pano-nav-link[data-page="inicio"]::after, .pano-nav[data-active="soportes"] .pano-nav-link[data-page="soportes"]::after, .pano-nav[data-active="campanas"] .pano-nav-link[data-page="campanas"]::after, .pano-nav[data-active="nosotros"] .pano-nav-link[data-page="nosotros"]::after, .pano-nav[data-active="contacto"] .pano-nav-link[data-page="contacto"]::after{transform:scaleX(1)} .pano-nav-mobile{display:none} .pano-nav-mobile .pano-nav-link:hover{color:var(--c-accent)} .pano-nav-mobile .pano-nav-link::after{display:none} /* ---------- botón hamburguesa (solo móvil, ver @media max-width:900px) ---------- */ .pano-nav-toggle{ display:none !important;flex:0 0 auto;width:34px;height:34px;padding:0; align-items:center;justify-content:center;gap:5px;flex-direction:column; background:transparent;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent; } /* Anillo de foco propio: el outline nativo del navegador puede perderse sobre el header (fondo blanco o azul, según scroll). No afecta clic/touch. */ .pano-nav-toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:6px} /* ---------- enlaces de texto del footer compacto ---------- padding vertical amplía el área táctil sin cambiar el tamaño visual del texto (mínimo recomendado ~44px de alto en el bloque completo). */ .pano-footer-link{display:inline-block;padding:5px 2px} .pano-footer-link:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px} .pano-nav-toggle-bar{ display:block;width:22px;height:2px;border-radius:2px;background:#fff; transition:transform .28s cubic-bezier(.16,.84,.44,1),opacity .2s ease; } .pano-nav-toggle[aria-expanded="true"] .pano-nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)} .pano-nav-toggle[aria-expanded="true"] .pano-nav-toggle-bar:nth-child(2){opacity:0} .pano-nav-toggle[aria-expanded="true"] .pano-nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (prefers-reduced-motion:reduce){ .pano-nav-toggle-bar{transition:none} } /* ---------- formularios ---------- */ .pano-field{width:100%;font-family:'Manrope',system-ui,sans-serif;font-size:15px;color:var(--c-ink);background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;padding:14px 16px;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease} .pano-field::placeholder{color:#9AA6B8} .pano-field:focus{outline:none;border-color:var(--c-secondary);box-shadow:0 0 0 3px rgba(var(--c-secondary-rgb),.16)} .pano-label{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-bottom:9px} /* Campos sobre fondo de color (ej. tarjeta "Trabaja con nosotros"): el placeholder gris por defecto (#9AA6B8) pierde contraste sobre el naranja de marca. Aquí se aclara el placeholder, se fuerza texto oscuro en las opciones del