/* ================================================= F. S. PINTOS Microelectrónica ESTILO GENERAL ================================================= */ * { box-sizing:border-box; user-select:none; } html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; font-family: Arial, Helvetica, sans-serif; color:white; } /* ================================================= FONDO GENERAL ================================================= */ body { display:flex; flex-direction:column; background: linear-gradient( rgba(15,23,42,.72), rgba(15,23,42,.72) ), url("fondo.png"); background-size:cover; background-position:center; background-repeat:no-repeat; } /* ================================================= NAVBAR ================================================= */ .navbar { flex-shrink:0; width:100%; display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; white-space:nowrap; padding:15px 10px; font-size:16px; } .navbar a { color:#ffffff; text-decoration:none; padding:4px 7px; background:transparent; border:none; -webkit-tap-highlight-color:transparent; text-shadow: 0 0 4px rgba(56,189,248,.45), 0 0 10px rgba(56,189,248,.25); transition: color .25s ease, text-shadow .25s ease; } .navbar a:hover, .navbar a:focus { color:#ffffff; text-shadow: 0 0 2px rgba(255,255,255,1), 0 0 6px rgba(96,165,250,1), 0 0 12px rgba(37,99,235,1), 0 0 22px rgba(29,78,216,1), 0 0 45px rgba(37,99,235,1), 0 0 100px rgba(59,130,246,.95), 0 0 200px rgba(37,99,235,.85), 0 0 350px rgba(29,78,216,.70), 0 0 520px rgba(30,64,175,.50), 0 0 700px rgba(30,64,175,.30); outline:none; } /* ================================================= IDENTIDAD DE EMPRESA ================================================= */ .identidad { flex-shrink:0; text-align:center; } .identidad h1 { margin: 10px 0 0 0; font-size:50px; letter-spacing:12px; color:#ffffff; text-shadow: 0 3px 12px rgba(0,0,0,.95), 0 0 8px rgba(125,211,252,.85), 0 0 22px rgba(56,189,248,.65), 0 0 40px rgba(14,165,233,.35); } .identidad h2 { margin: 5px 0 15px 0; font-size:34px; font-weight:normal; letter-spacing:8px; color:#ffffff; text-shadow: 0 3px 12px rgba(0,0,0,.95), 0 0 8px rgba(125,211,252,.85), 0 0 22px rgba(56,189,248,.65), 0 0 40px rgba(14,165,233,.35); } /* ================================================= SEPARADOR DE MARCA ================================================= */ .separador { flex-shrink:0; width:80%; max-width:900px; height:1px; margin: 0 auto 15px auto; background: rgba(255,255,255,.45); } /* ================================================= CONTENEDOR PRINCIPAL ================================================= */ .contenido { flex:1; min-height:0; width:90%; max-width:900px; margin:auto; display:flex; flex-direction:column; } /* ================================================= CABECERA DE SECCIÓN Título + lema ================================================= */ .cabecera-seccion { flex-shrink:0; text-align:center; } .cabecera-seccion h3 { margin:0; font-size:40px; letter-spacing:4px; text-shadow: 0 3px 10px rgba(0,0,0,.9); } .cabecera-seccion p { margin: 5px 0 20px 0; font-size:18px; font-style:italic; color:#e5e7eb; } /* ================================================= TEXTO DESPLAZABLE SOLO ESTA PARTE HACE SCROLL ================================================= */ .texto-scroll { flex:1; min-height:0; overflow-y:auto; padding-right:10px; text-align:justify; font-size:18px; line-height:1.7; scrollbar-width:none; /* Firefox */ } /* Chrome / Edge / Brave / Safari */ .texto-scroll::-webkit-scrollbar { display:none; } .texto-scroll p { margin-bottom:18px; } /* ================================================= PIE ================================================= */ .pie { flex-shrink:0; width:100%; text-align:center; padding:10px; font-size:14px; } /* ================================================= TABLET ================================================= */ @media(max-width:900px) { .navbar { font-size:14px; } .identidad h1 { font-size:34px; } .identidad h2 { font-size:20px; } .cabecera-seccion h3 { font-size:30px; } .texto-scroll { font-size:16px; } } /* ================================================= CELULAR VERTICAL ================================================= */ @media(max-width:600px) { .navbar { flex-wrap:wrap; white-space:normal; font-size:11px; line-height:1.8; padding:8px 10px; } .navbar a { padding:2px 4px; } .identidad h1 { font-size:26px; letter-spacing:3px; } .identidad h2 { font-size:16px; } .separador { margin-bottom:8px; } .cabecera-seccion h3 { font-size:24px; } .cabecera-seccion p { font-size:16px; } .texto-scroll { font-size:15px; } .pie { font-size:11px; } } /* ================================================= CELULARES PEQUEÑOS A04S ================================================= */ @media(max-width:380px) { .navbar { font-size:10px; } .identidad h1 { font-size:23px; } .identidad h2 { font-size:14px; } .cabecera-seccion h3 { font-size:21px; } .texto-scroll { font-size:14px; } .pie { font-size:10px; } } /* ================================================= CELULAR HORIZONTAL ================================================= */ @media(max-height:500px) and (orientation:landscape) { .navbar { font-size:10px; padding:5px; } .identidad h1 { font-size:20px; letter-spacing:2px; margin-top:5px; } .identidad h2 { font-size:12px; letter-spacing:2px; margin-bottom:5px; } .separador { margin-bottom:3px; } .cabecera-seccion h3 { font-size:20px; letter-spacing:2px; } .cabecera-seccion p { font-size:12px; margin-bottom:8px; } .texto-scroll { font-size:14px; line-height:1.5; } .pie { font-size:10px; padding:5px; } }