/* === Artefacto 3D Website Styles === */
:root {
  --orange-primary: #ffa424;
  --orange-secondary: #ff9800;
  --gray-dark: #595959;
  --black: #000000;
  --white: #ffffff;
}

* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Bahnschrift', sans-serif; color: var(--gray-dark); background-color: var(--white); line-height: 1.6; scroll-behavior: smooth;}

.navbar {display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background-color: var(--white); border-bottom: 2px solid var(--orange-primary); position: sticky; top: 0; z-index: 100;}
.logo {height: 55px;}
nav a {color: var(--gray-dark); text-decoration: none; margin-left: 1.5rem; font-weight: 600; transition: color 0.3s;}
nav a:hover {color: var(--orange-secondary);}

.hero {display: flex; justify-content: center; align-items: center; text-align: center; height: 80vh; background-color: var(--white); color: var(--gray-dark); padding: 2rem;}
.hero h1 {font-size: 2.8rem; color: var(--orange-primary); margin-bottom: 1rem;}
.hero p {max-width: 600px; margin: 0 auto 1.5rem;}
.btn-primary {display: inline-block; background-color: var(--orange-primary); color: var(--white); padding: 0.75rem 1.5rem; border-radius: 4px; text-decoration: none; font-weight: 600; transition: background-color 0.3s;}
.btn-primary:hover {background-color: var(--orange-secondary);}

.section {padding: 4rem 10%; text-align: center;}
.section h2 {font-size: 2rem; color: var(--orange-primary); margin-bottom: 2rem;}
.services-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;}
.service {background: var(--white); border: 1px solid #e5e5e5; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
.gallery p {color: var(--gray-dark); font-style: italic;}

.contact-form {display: flex; flex-direction: column; gap: 1rem; max-width: 500px; margin: 0 auto;}
.contact-form input, .contact-form textarea {width: 100%; padding: 0.75rem; border: 1px solid #ccc; border-radius: 4px;}
.contact-form button {align-self: center;}

footer {text-align: center; background-color: var(--black); color: var(--white); padding: 1rem; margin-top: 2rem;}
footer a {color: var(--orange-primary); text-decoration: none;}