:root {

 --color-primary: #f4a261;
 --color-primary-dark: #e76f51;
 --color-primary-light: #f9c89b;
 --color-secondary: #e76f51;
 --color-accent: #2a9d8f;
 --color-text: #264653;
 --color-text-light: #5f7a82;
 --color-background: #fefefe;
 --color-background-alt: #f7e5d0;
 --color-white: #ffffff;
 --color-border: #e5e5e5;
 --color-success: #2a9d8f;
 --color-error: #e63946;


 --font-heading: 'Outfit', sans-serif;
 --font-body: 'Open Sans', sans-serif;
 --font-size-h1: 64px;
 --font-size-h2: 48px;
 --font-size-h3: 32px;
 --font-size-h4: 24px;
 --font-size-body: 16px;
 --font-size-small: 14px;
 --line-height-heading: 1.2;
 --line-height-body: 1.6;


 --spacing-xs: 8px;
 --spacing-sm: 16px;
 --spacing-md: 24px;
 --spacing-lg: 32px;
 --spacing-xl: 40px;
 --spacing-2xl: 48px;
 --spacing-3xl: 64px;
 --spacing-4xl: 80px;
 --spacing-5xl: 96px;
 --spacing-6xl: 120px;
 --spacing-7xl: 160px;


 --container-max-width: 1200px;
 --section-padding-mobile: 80px;
 --section-padding-tablet: 120px;
 --section-padding-desktop: 160px;


 --button-height: 48px;
 --button-padding: 0 32px;
 --button-radius: 8px;
 --card-padding: 32px;
 --card-radius: 16px;
 --input-height: 48px;
 --input-padding: 0 16px;
 --input-radius: 8px;


 --shadow-sm: 0 2px 8px rgba(38, 70, 83, 0.08);
 --shadow-md: 0 4px 16px rgba(38, 70, 83, 0.12);
 --shadow-lg: 0 8px 32px rgba(38, 70, 83, 0.16);


 --transition-fast: 0.2s ease;
 --transition-base: 0.3s ease;
 --transition-slow: 0.5s ease;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 font-size: 16px;
}

body {
 font-family: var(--font-body);
 font-size: var(--font-size-body);
 line-height: var(--line-height-body);
 color: var(--color-text);
 background-color: var(--color-background);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-heading);
 font-weight: 700;
 line-height: var(--line-height-heading);
 color: var(--color-text);
}

a {
 color: var(--color-primary);
 text-decoration: none;
 transition: color var(--transition-fast);
}

a:hover {
 color: var(--color-primary-dark);
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

.site-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 background-color: var(--color-white);
 box-shadow: var(--shadow-sm);
 z-index: 1000;
 transition: transform var(--transition-base);
}

.header-container {
 max-width: var(--container-max-width);
 margin: 0 auto;
 padding: var(--spacing-md) var(--spacing-md);
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.logo a {
 font-family: var(--font-heading);
 font-size: 24px;
 font-weight: 700;
 color: var(--color-primary);
 transition: color var(--transition-fast);
}

.logo a:hover {
 color: var(--color-primary-dark);
}

.main-nav {
 display: none;
}

.nav-list {
 display: flex;
 gap: var(--spacing-lg);
 list-style: none;
}

.nav-link {
 font-weight: 500;
 color: var(--color-text);
 transition: color var(--transition-fast);
}

.nav-link:hover {
 color: var(--color-primary);
}

.menu-toggle {
 display: flex;
 flex-direction: column;
 gap: 8px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 8px;
 z-index: 1001;
}

.hamburger-line {
 width: 24px;
 height: 4px;
 background-color: var(--color-text);
 border-radius: 2px;
 transition: all var(--transition-base);
}

.menu-toggle.active .hamburger-line:nth-child(1) {
 transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .hamburger-line:nth-child(2) {
 opacity: 0;
}

.menu-toggle.active .hamburger-line:nth-child(3) {
 transform: translateY(-16px) rotate(-45deg);
}

.main-nav.active {
 display: block;
 position: fixed;
 top: 72px;
 left: 0;
 right: 0;
 background-color: var(--color-white);
 box-shadow: var(--shadow-md);
 padding: var(--spacing-lg);
}

.main-nav.active .nav-list {
 flex-direction: column;
 gap: var(--spacing-md);
}

.hero-section {
 padding-top: 152px;
 padding-bottom: var(--section-padding-mobile);
 background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--color-white) 100%);
 position: relative;
}

.hero-container {
 max-width: var(--container-max-width);
 margin: 0 auto;
 padding: 0 var(--spacing-md);
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--spacing-3xl);
 align-items: center;
}

.hero-content {
 text-align: center;
}

.hero-title {
 font-size: 48px;
 margin-bottom: var(--spacing-md);
 color: var(--color-text);
 animation: fadeInUp 0.8s ease;
}

.hero-subtitle {
 font-size: 18px;
 color: var(--color-text-light);
 margin-bottom: var(--spacing-2xl);
 line-height: 1.7;
 animation: fadeInUp 0.8s ease 0.2s backwards;
}

.hero-buttons {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-sm);
 animation: fadeInUp 0.8s ease 0.4s backwards;
}

.hero-image {
 animation: fadeInUp 0.8s ease 0.6s backwards;
}

.hero-image img {
 width: 100%;
 border-radius: var(--card-radius);
 box-shadow: var(--shadow-lg);
}

.scroll-indicator {
 position: absolute;
 bottom: var(--spacing-lg);
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--spacing-xs);
 color: var(--color-text-light);
 animation: bounce 2s infinite;
}

.scroll-text {
 font-size: var(--font-size-small);
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 1px;
}

.scroll-chevron {
 color: var(--color-primary);
}

.btn-primary,
.btn-secondary {
 display: inline-block;
 height: var(--button-height);
 padding: var(--button-padding);
 border-radius: var(--button-radius);
 font-family: var(--font-heading);
 font-size: var(--font-size-body);
 font-weight: 600;
 text-align: center;
 border: 2px solid transparent;
 cursor: pointer;
 transition: all var(--transition-base);
 line-height: 44px;
}

.btn-primary {
 background-color: var(--color-primary);
 color: var(--color-white);
 border-color: var(--color-primary);
}

.btn-primary:hover {
 background-color: var(--color-primary-dark);
 border-color: var(--color-primary-dark);
 color: var(--color-white);
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}

.btn-secondary {
 background-color: transparent;
 color: var(--color-text);
 border-color: var(--color-text);
}

.btn-secondary:hover {
 background-color: var(--color-text);
 color: var(--color-white);
 transform: translateY(-2px);
}

.btn-full {
 width: 100%;
}

.section-container {
 max-width: var(--container-max-width);
 margin: 0 auto;
 padding: var(--section-padding-mobile) var(--spacing-md);
}

.section-header {
 text-align: center;
 margin-bottom: var(--spacing-3xl);
}

.section-title {
 font-size: var(--font-size-h2);
 margin-bottom: var(--spacing-sm);
 color: var(--color-text);
}

.section-subtitle {
 font-size: 18px;
 color: var(--color-text-light);
}

.about-section {
 background-color: var(--color-white);
}

.about-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--spacing-3xl);
 align-items: center;
}

.about-image img {
 width: 100%;
 border-radius: var(--card-radius);
 box-shadow: var(--shadow-md);
}

.about-heading {
 font-size: var(--font-size-h3);
 margin-bottom: var(--spacing-md);
 color: var(--color-text);
}

.about-description {
 color: var(--color-text-light);
 margin-bottom: var(--spacing-md);
}

.about-features {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-md);
 margin-top: var(--spacing-lg);
}

.feature-item {
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
}

.feature-icon {
 color: var(--color-primary);
 flex-shrink: 0;
}

.feature-text {
 font-weight: 500;
 color: var(--color-text);
}

.services-section {
 background-color: var(--color-background-alt);
}

.services-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--spacing-xl);
}

.service-card {
 background-color: var(--color-white);
 padding: var(--card-padding);
 border-radius: var(--card-radius);
 box-shadow: var(--shadow-sm);
 transition: all var(--transition-base);
}

.service-card:hover {
 transform: translateY(-8px);
 box-shadow: var(--shadow-lg);
}

.service-icon {
 width: 48px;
 height: 48px;
 color: var(--color-primary);
 margin-bottom: var(--spacing-md);
}

.service-title {
 font-size: var(--font-size-h4);
 margin-bottom: var(--spacing-sm);
 color: var(--color-text);
}

.service-description {
 color: var(--color-text-light);
 line-height: 1.7;
 margin-bottom: var(--spacing-sm);
}

.service-price {
 color: var(--color-primary);
 font-weight: 600;
 font-size: 18px;
}

.contact-section {
 background-color: var(--color-white);
}

.contact-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--spacing-3xl);
}

.contact-heading {
 font-size: var(--font-size-h3);
 margin-bottom: var(--spacing-sm);
 color: var(--color-text);
}

.contact-description {
 color: var(--color-text-light);
 margin-bottom: var(--spacing-lg);
}

.contact-details {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-lg);
}

.contact-item {
 display: flex;
 gap: var(--spacing-sm);
}

.contact-icon {
 color: var(--color-primary);
 flex-shrink: 0;
}

.contact-text {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.contact-text strong {
 font-weight: 600;
 color: var(--color-text);
}

.contact-text span,
.contact-text a {
 color: var(--color-text-light);
}

.contact-form {
 background-color: var(--color-background-alt);
 padding: var(--spacing-2xl);
 border-radius: var(--card-radius);
}

.form-group {
 margin-bottom: var(--spacing-md);
}

.form-label {
 display: block;
 margin-bottom: var(--spacing-xs);
 font-weight: 500;
 color: var(--color-text);
}

.form-input,
.form-textarea {
 width: 100%;
 height: var(--input-height);
 padding: var(--input-padding);
 border: 2px solid var(--color-border);
 border-radius: var(--input-radius);
 font-family: var(--font-body);
 font-size: var(--font-size-body);
 color: var(--color-text);
 background-color: var(--color-white);
 transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
 outline: none;
 border-color: var(--color-primary);
}

.form-textarea {
 height: auto;
 padding: var(--spacing-sm);
 resize: vertical;
}

.form-message {
 margin-top: var(--spacing-md);
 padding: var(--spacing-sm);
 border-radius: var(--input-radius);
 font-weight: 500;
 text-align: center;
 display: none;
}

.form-message.success {
 background-color: rgba(42, 157, 143, 0.1);
 color: var(--color-success);
 display: block;
}

.form-message.error {
 background-color: rgba(230, 57, 70, 0.1);
 color: var(--color-error);
 display: block;
}

.site-footer {
 background-color: var(--color-text);
 color: var(--color-white);
 padding: var(--spacing-2xl) 0 var(--spacing-md);
}

.footer-container {
 max-width: var(--container-max-width);
 margin: 0 auto;
 padding: 0 var(--spacing-md);
}

.footer-content {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--spacing-md);
 margin-bottom: var(--spacing-md);
}

.footer-logo {
 font-size: var(--font-size-h4);
 color: var(--color-primary);
 margin-bottom: var(--spacing-xs);
}

.footer-heading {
 font-size: 18px;
 margin-bottom: var(--spacing-xs);
 color: var(--color-white);
}

.footer-text {
 color: rgba(255, 255, 255, 0.8);
 line-height: 1.8;
 margin-bottom: var(--spacing-xs);
}

.footer-text a {
 color: rgba(255, 255, 255, 0.8);
 transition: color var(--transition-fast);
}

.footer-text a:hover {
 color: var(--color-primary);
}

.footer-bottom {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-xs);
 padding-top: var(--spacing-md);
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 text-align: center;
}

.footer-copyright,
.footer-credit {
 font-size: var(--font-size-small);
 color: rgba(255, 255, 255, 0.6);
}

.footer-credit a {
 color: var(--color-primary);
 font-weight: 600;
}

.footer-credit a:hover {
 color: var(--color-primary-light);
}

.whatsapp-btn {
 position: fixed;
 bottom: var(--spacing-md);
 right: var(--spacing-md);
 width: 56px;
 height: 56px;
 background-color: #25d366;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: var(--shadow-lg);
 z-index: 1000;
 transition: all var(--transition-base);
 color: var(--color-white);
}

.whatsapp-btn:hover {
 background-color: #20b358;
 color: var(--color-white);
 transform: translateY(-8px);
 box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4);
}

@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(32px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes bounce {
 0%, 100% {
 transform: translateX(-50%) translateY(0);
 }
 50% {
 transform: translateX(-50%) translateY(-8px);
 }
}

.fade-in {
 opacity: 0;
 transform: translateY(32px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
 opacity: 1;
 transform: translateY(0);
}

@media (min-width: 768px) {
 :root {
 --font-size-h1: 64px;
 --font-size-h2: 56px;
 --font-size-h3: 36px;
 }

 .menu-toggle {
 display: none;
 }

 .main-nav {
 display: block;
 }

 .main-nav.active {
 position: static;
 box-shadow: none;
 padding: 0;
 }

 .section-container {
 padding: var(--section-padding-tablet) var(--spacing-lg);
 }

 .hero-section {
 padding-top: 152px;
 padding-bottom: var(--section-padding-tablet);
 }

 .hero-container {
 grid-template-columns: 1fr 1fr;
 gap: var(--spacing-3xl);
 }

 .hero-content {
 text-align: left;
 }

 .hero-title {
 font-size: 56px;
 }

 .hero-buttons {
 flex-direction: row;
 gap: var(--spacing-md);
 }

 .about-content {
 grid-template-columns: 1fr 1fr;
 }

 .services-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: var(--spacing-xl);
 }

 .contact-content {
 grid-template-columns: 1fr 1fr;
 }

 .footer-content {
 grid-template-columns: repeat(3, 1fr);
 gap: var(--spacing-lg);
 }

 .footer-bottom {
 flex-direction: row;
 justify-content: space-between;
 }
}

@media (min-width: 1024px) {
 .section-container {
 padding: var(--section-padding-desktop) var(--spacing-xl);
 }

 .hero-section {
 padding-bottom: var(--section-padding-desktop);
 }

 .hero-title {
 font-size: var(--font-size-h1);
 }

 .services-grid {
 grid-template-columns: repeat(3, 1fr);
 gap: var(--spacing-xl);
 }
}