@font-face { font-family: "Squ721Rm"; /* Nombre que le das a la fuente */ src: url("fonts/Squ721Rm.ttf") format("truetype"); /* Archivo .ttf */ font-weight: normal; font-style: normal; } /* ---------- General Reset ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; line-height: 1.6; color: #333333; background-color: #f9f9f9; margin: 0; padding: 0; } /* ---------- Global Variables ---------- */ :root { --primary-color: #f86515; --secondary-color: #666666; --background-color: #f9f9f9; --text-color: #333333; --light-gray: #eaeaea; --white: #ffffff; --font: "Square"; } /* ---------- Header ---------- */ header { background-color: var(--primary-color); color: var(--white); padding: 20px 15px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } header h1 { font-size: 2rem; font-weight: bold; } h1.logo { font-family: "Squ721Rm"; } header p { font-size: 1rem; } /* ---------- Navigation ---------- */ nav { display: flex; justify-content: center; gap: 20px; padding: 10px 0; } nav a { text-decoration: none; color: var(--white); font-size: 1rem; font-weight: bold; padding: 8px 16px; border: 2px solid transparent; transition: 0.3s ease; } nav a.active { border-bottom: 2px solid #fff; } nav a:not(.active):hover { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); border-radius: 4px; } /* ---------- Main Section ---------- */ main { padding: 20px; background-color: var(--white); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-width: 1200px; margin: 20px auto; border-radius: 8px; } main h2 { color: var(--primary-color); margin-bottom: 10px; } main p { color: var(--secondary-color); margin-bottom: 15px; line-height: 1.8; } main .cta { text-align: center; margin-top: 20px; } main .cta a { background-color: var(--primary-color); color: var(--white); text-decoration: none; padding: 10px 20px; font-size: 1rem; font-weight: bold; border-radius: 4px; transition: 0.3s ease; } main .cta a:hover { background-color: var(--secondary-color); } /* ---------- Footer ---------- */ footer { background-color: var(--primary-color); color: var(--white); text-align: center; padding: 15px 0; font-size: 0.9rem; } footer a { color: var(--white); text-decoration: underline; transition: 0.3s ease; } footer a:hover { color: var(--light-gray); } /* ---------- Additional Styles ---------- */ .card { background-color: var(--light-gray); padding: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 15px; } .card h3 { color: var(--primary-color); margin-bottom: 10px; } .card p { color: var(--secondary-color); } .who-we-are { padding: 40px 20px; background-color: #fff; color: #333; text-align: center; } .who-we-are h2 { font-size: 28px; color: #f86515; margin-bottom: 20px; } .who-we-are p { font-size: 18px; line-height: 1.6; max-width: 800px; margin: 0 auto 20px; } /* Sección de Misión, Visión y Valores */ .mission-vision-values { padding: 40px 20px; background-color: #e9ecef; color: #333; } .mission-vision-values h2 { font-size: 26px; color: #f86515; margin-bottom: 20px; text-align: center; } .mission-vision-values p { font-size: 18px; line-height: 1.6; max-width: 800px; margin: 20px auto; text-align: center; } .mission-vision-values ul { list-style-type: none; padding: 0; text-align: center; } .mission-vision-values ul li { font-size: 18px; margin: 10px 0; } /* Estilos de pie de página */ footer { background-color: #333; color: white; text-align: center; padding: 20px 0; font-size: 14px; } footer p { margin: 0; } /* Agregar un poco de margen entre los bloques */ section { margin-bottom: 40px; } .flex { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 20px; flex-direction: column; } /* Contenedor general de las tarjetas */ .services-container { display: flex; justify-content: space-around; gap: 20px; margin: 50px auto; flex-wrap: wrap; } /* Estilo para cada tarjeta */ .service-card { background-color: #f4f4f4; width: 280px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease; } /* Efecto al pasar el mouse */ .service-card:hover { transform: translateY(-10px); /* Eleva la tarjeta al hacer hover */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Aumenta la sombra */ } /* Contenido dentro de la tarjeta */ .card-content { padding: 20px; text-align: center; } /* Títulos */ .card-content h3, .cards-container h3 { font-family: "Squ721Rm", sans-serif; font-size: 24px; margin-bottom: 15px; color: #f86515; /* Color del texto */ transition: color 0.3s ease; } /* Texto de descripción */ .card-content p { font-family: Arial, sans-serif; font-size: 16px; color: #555; margin-bottom: 20px; line-height: 1.5; } /* Efecto al hacer hover en los títulos */ .service-card:hover .card-content h3 { color: #e14e00; /* Cambia el color del título al hacer hover */ } /* Animación de entrada para las tarjetas */ .service-card { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s forwards; } .service-card:nth-child(1) { animation-delay: 0.1s; } .service-card:nth-child(2) { animation-delay: 0.2s; } .service-card:nth-child(3) { animation-delay: 0.3s; } #valores { background-color: #f4f4f4; padding: 50px 10%; text-align: center; } #valores .section-title { font-size: 1.5rem; font-weight: bold; color: #f86515; margin-bottom: 30px; } .cards-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .card { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 30%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .card h3 { color: #f86515; font-size: 1.5rem; margin-bottom: 10px; } .card p { font-size: 1rem; color: #333; line-height: 1.5; } #contacto { background-color: #f4f4f4; padding: 50px 10%; text-align: center; } #contacto .section-title h2 { font-size: 2.5rem; font-weight: bold; color: #f86515; margin-bottom: 15px; } #contacto .section-title p { font-size: 1.2rem; color: #333; margin-bottom: 30px; } .contact-content p { font-size: 1.1rem; line-height: 1.8; color: #555; margin-bottom: 30px; } .contact-content h3 { font-size: 2rem; color: #f86515; margin-bottom: 15px; } .contact-info { font-size: 1.1rem; color: #333; } .contact-info h4 { font-weight: bold; color: #f86515; margin-top: 20px; } .contact-info p { font-size: 1rem; margin-bottom: 10px; } #clientes { background-color: #f4f4f4; padding: 50px 10%; text-align: center; } #clientes .section-title h2 { font-size: 1.5rem; font-weight: bold; color: #f86515; margin-bottom: 15px; } #clientes .section-title p { font-size: 1.2rem; color: #333; margin-bottom: 30px; } .clients-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .client-card { background-color: #fff; border: 2px solid #f86515; border-radius: 10px; padding: 20px; text-align: center; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .client-card h3 { font-size: 1.2rem; color: #f86515; font-weight: bold; } .client-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { .clients-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .clients-list { grid-template-columns: 1fr; } } /* Estilos para dispositivos móviles */ @media (max-width: 768px) { #valores { padding: 50px 5%; } #valores .section-title { font-size: 1.5rem; /* Reducir tamaño del título */ } .cards-container { display: block; } .card { width: 100%; /* Hacer que las tarjetas ocupen el 100% del ancho */ margin-bottom: 20px; /* Separar las tarjetas en móviles */ } .card h3 { font-size: 1.3rem; /* Reducir tamaño de los subtítulos */ } .card p { font-size: 0.9rem; /* Reducir tamaño del texto */ } } img.people { width: 960px; } img.todo { width: 600px; } a.user { text-decoration: none; animation: pulse 2s infinite; color: var(--primary-color); display: flex; justify-content: center; align-items: center; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Estilos para pantallas muy pequeñas (por ejemplo, móviles en modo apaisado) */ @media (max-width: 480px) { #valores .section-title { font-size: 1.5rem; } .card h3 { font-size: 1.2rem; } .card p { font-size: 0.85rem; } } /* Animación de desvanecimiento y subida */ @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { nav { gap: 10px; } nav a { padding: 8px; border: 2px solid transparent; transition: 0.3s ease; } img.people { width: 350px; } img.todo { width: 300px; } } /* Estilo para pantallas aún más pequeñas (por ejemplo, teléfonos móviles) */ @media (max-width: 480px) { .navtabs a { font-size: 14px; padding: 10px 18px; } }