/* ========================================== */ /* 1. RESET, VARIABLES Y TIPOGRAFÍA MEJORADA */ /* ========================================== */ /* Variables CSS para una Paleta Cohesiva y Fácil de Cambiar */ :root { --color-primary: #00b894; /* Verde brillante (Acción principal) */ --color-secondary: #0984e3; /* Azul profesional (Fondo Hero) */ --color-accent: #6c5ce7; /* Morado/Púrpura (Gradiente de Hero) */ --color-text: #2d3436; /* Texto casi negro, más suave */ --color-light-bg: #f5f6fa; /* Fondo claro para secciones */ --color-white: #ffffff; --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave para elementos */ } * { box-sizing: border-box; margin: 0; padding: 0; /* Usar una fuente moderna de Google Fonts para mejor estética */ font-family: 'Inter', sans-serif; } body { line-height: 1.65; /* Aumentado ligeramente para mejor lectura (UX) */ color: var(--color-text); background-color: var(--color-white); } /* Enlaza Inter en tu HTML : */ .container { width: 90%; max-width: 1200px; margin: 0 auto; } /* ========================================== */ /* 2. ENCABEZADO Y NAVEGACIÓN */ /* ========================================== */ .header { background: var(--color-white); box-shadow: var(--shadow-subtle); /* Sombra más moderna que border-bottom */ position: sticky; /* Sticky Header para mejor UX */ top: 0; z-index: 1000; } .nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; /* Padding fijo en píxeles, más control */ } .logo { height: 45px; /* Tamaño ajustado */ transition: opacity 0.3s; } .logo:hover { opacity: 0.8; } .menu { display: flex; list-style: none; } .menu li { margin-left: 30px; /* Más espaciado para mejor claridad */ } .menu a { text-decoration: none; color: var(--color-text); font-weight: 500; padding: 5px 0; position: relative; transition: color 0.3s; } .menu a:hover { color: var(--color-primary); } /* Efecto de Subrayado Moderno (UX visual) */ .menu a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--color-primary); transition: width 0.3s ease-out; } .menu a:hover::after { width: 100%; } .cta { background: var(--color-primary); color: var(--color-white); padding: 0.6rem 1.2rem; border-radius: 8px; /* Más redondeado, más moderno */ text-decoration: none; font-weight: 600; transition: background-color 0.3s, transform 0.2s; } .cta:hover { background: #00a382; /* Tono más oscuro al pasar el ratón */ transform: translateY(-1px); /* Efecto sutil de levantamiento */ } /* ========================================== */ /* 3. SECCIÓN HERO (Alto Impacto) */ /* ========================================== */ .hero { /* Mantenemos el gradiente atractivo */ background: linear-gradient(135deg, var(--color-secondary), var(--color-accent)); color: var(--color-white); text-align: center; padding: 6rem 1rem; /* Más padding para impacto visual */ border-radius: 0 0 50px 50px; /* Bordes inferiores redondeados para un look suave */ } .hero h1 { font-size: 3.2rem; /* Título más grande */ margin-bottom: 0.75rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .hero p { font-size: 1.3rem; /* Subtítulo destacado */ margin-bottom: 2rem; opacity: 0.9; } .btn-primary { background: var(--color-white); /* Color inverso para destacar sobre el fondo azul */ color: var(--color-primary); /* Texto del color primario */ padding: 0.9rem 2rem; text-decoration: none; border-radius: 8px; font-weight: 700; transition: background-color 0.3s, transform 0.2s; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para que "flote" */ } .btn-primary:hover { background: #e0e0e0; transform: translateY(-2px); } /* ========================================== */ /* 4. SECCIÓN DE SERVICIOS (Cards) */ /* ========================================== */ .services { padding: 4rem 0; /* Más espacio */ text-align: center; background-color: var(--color-light-bg); /* Fondo sutilmente diferente */ } .services h2 { font-size: 2rem; margin-bottom: 3rem; color: var(--color-text); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Mínimo más grande para cards */ gap: 2rem; /* Más espacio entre cards */ text-align: left; } .card { background: var(--color-white); border: none; /* Eliminar el borde delgado */ border-radius: 12px; /* Bordes más pronunciados */ padding: 1.5rem; box-shadow: var(--shadow-subtle); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-5px); /* Efecto de levantamiento */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra más fuerte al pasar el ratón */ } .card img { width: 100%; /* Altura fija para uniformidad visual (Asegúrate de que tus imágenes tengan buena resolución) */ height: 180px; object-fit: cover; /* Ajuste moderno para imágenes */ border-radius: 8px; margin-bottom: 1.5rem; } .card h3 { color: var(--color-primary); margin-bottom: 0.5rem; font-size: 1.3rem; } /* ========================================== */ /* 5. SECCIÓN ABOUT Y FOOTER */ /* ========================================== */ .about { background: var(--color-white); /* Cambiar a blanco si el fondo de services es claro */ padding: 4rem 1rem; text-align: center; } .about h2 { color: var(--color-secondary); } .footer { background: var(--color-text); color: #ccc; text-align: center; padding: 1.5rem 0; margin-top: 0; /* Eliminar el margen superior */ } /* ========================================== */ /* 6. MEDIA QUERIES (Responsividad) */ /* ========================================== */ @media (max-width: 900px) { .nav { flex-wrap: wrap; /* Permite que los elementos se muevan si no hay espacio */ } .menu { display: none; /* Ocultar el menú en tablet/móvil. Se implementaría un menú hamburguesa con JS */ } .hero { padding: 4rem 1rem; border-radius: 0; /* Simplificar en móvil */ } .hero h1 { font-size: 2.2rem; } /* Alinear logo y CTA en la misma línea */ .header .container { display: flex; justify-content: space-between; align-items: center; } }