:root {

  --color-primary: #0c1c2c;
  --color-secondary: #A22224;

  --color-dark: #111111;
  --color-light: #ffffff;

  --color-text: #222222;
  --color-background: #f7f7f7;

  --shadow:
    0 10px 25px rgba(0, 0, 0, 0.08);

  --border-radius: 12px;

  --transition: 0.3s ease;

  --container-width: 1200px;

  --font-primary: 'Lexend', sans-serif;

}
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend/Lexend-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend/Lexend-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend/Lexend-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend/Lexend-Bold.ttf') format('truetype');
  font-weight: 700;
}

/* RESET */

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

html {
  scroll-behavior: smooth;
}

body {

  font-family: var(--font-primary);

  color: var(--color-text);

  background-color: var(--color-light);

  line-height: 1.6;

  overflow-x: hidden;
}

/* GLOBAL */

img {
  width: 100%;
  display: block;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {

  width: min(90%, var(--container-width));

  margin: auto;
}

.section {
  padding: 6rem 0;
}

.section-title {

  font-size: clamp(2rem, 5vw, 3rem);

  text-align: center;

  margin-bottom: 2rem;

  color: var(--color-primary);
}

.section-text {

  max-width: 900px;

  margin: auto;

  text-align: center;

  line-height: 1.8;
}

.section-text p + p{
  margin-top: 1rem;
}

/* NAVBAR */

.navbar {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background: transparent;

  transition:
    background-color 0.3s ease,
    padding 0.3s ease,
    box-shadow 0.3s ease;

  padding: 0.5rem 0;
}

/* navbar cuando el usuario hace scroll */

.navbar.scrolled {

  background: rgba(12, 28, 44, 0.96);

  backdrop-filter: blur(10px);

  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

.nav-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 72px;
}

.logo {
  width: 180px;
}

.img-logo {
  width: 100%;
}

.nav-links {

  display: flex;

  align-items: center;

  gap: 2rem;
}

.nav-links a {

  color: var(--color-light);

  font-weight: 400;

  position: relative;

  transition: var(--transition);
}

.nav-links a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -6px;

  width: 0;

  height: 2px;

  background: var(--color-secondary);

  transition: var(--transition);
}

.nav-links a:hover {

  color: var(--color-secondary);
}

.nav-links a:hover::after {

  width: 100%;
}

.menu-toggle {

  display: none;

  background: none;

  border: none;

  color: white;

  font-size: 1.5rem;

  cursor: pointer;
}

/* HERO */

.hero {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 2rem;

  background:
    url("../img/home.png") center/cover no-repeat;
}

.hero-content {

  color: var(--color-primary);

  max-width: 900px;
}

.hero-content h1 {

  font-size: clamp(3rem, 7vw, 5rem);

  font-weight: 700;

  letter-spacing: 2px;

  line-height: normal;

  text-shadow: 10px 10px 20px #fff;
}

.hero-content h2 {

  font-size: clamp(1.2rem, 3vw, 2rem);

  font-weight: 500;

  text-shadow: 10px 10px 20px #fff;
}

.hero-content p {

  margin-top: 2rem;

  font-size: 1.1rem;

  background: #ffffff5c;
  
  padding: 5px;
}

/* ABOUT */

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

/* STATS */

.stats {

  background: var(--color-primary);

  color: white;
}

.stats-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;
}

.stat-card {

  text-align: center;
}

.stat-card h3 {

  font-size: clamp(2.5rem, 5vw, 4rem);

  font-weight: 700;
}

.stat-card p {

  margin-top: 1rem;

  font-size: 1rem;
}

/* PROJECTS */

.projects {
  background: var(--color-light);
}

/* PROJECTS CAROUSEL */

.projects-carousel {

  margin-top: 4rem;

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));

  gap: 1.5rem;
}

.project-item {

  position: relative;

  overflow: hidden;

  border-radius: var(--border-radius);

  min-height: 420px;

  cursor: pointer;

  box-shadow: var(--shadow);
}

.project-link {

  display: block;

  width: 100%;

  height: 100%;

  color: inherit;

  text-decoration: none;
}

.project-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

/* OVERLAY */

.project-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.92),
      rgba(0,0,0,.25)
    );

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

  text-align: center;

  padding: 2rem;

  opacity: 0;

  overflow-y: auto;

  transition: var(--transition);
}

.project-overlay h3 {

  color: white;

  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 1rem;

  transform: translateY(20px);

  transition: var(--transition);
}

.project-overlay p {

  color: rgba(255,255,255,.9);

  font-size: .95rem;

  line-height: 1.7;

  max-width: 90%;

  opacity: 0;

  transform: translateY(20px);

  transition:
    transform 0.4s ease,
    opacity 0.4s ease;

  transition-delay: 0.08s;
}

/* HOVER */

.project-item:hover img {

  transform: scale(1.08);

  filter: brightness(.8);
}

.project-item:hover .project-overlay {

  opacity: 1;
}

.project-item:hover .project-overlay h3 {

  transform: translateY(0);
}

.project-item:hover .project-overlay p {

  transform: translateY(0);

  opacity: 1;
}

/* SERVICES */

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

.services-grid {

  margin-top: 4rem;

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr));

  gap: 1.5rem;
}

.service-card {

  background: white;

  min-height: 260px;

  padding: 2rem;

  border-radius: var(--border-radius);

  box-shadow: var(--shadow);

  transition: var(--transition);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  gap: 1.5rem;
}

.service-card:hover {

  transform: translateY(-8px);

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8f8f8
    );

  box-shadow:
    0 18px 35px rgba(0,0,0,.12);
}

.service-card h3 {

  font-size: 1.1rem;

  color: var(--color-primary);

  line-height: 1.5;

  font-weight: 500;
}

.service-card p {

  margin-top: .5rem;

  font-size: .95rem;

  color: #666;
}

.service-icon {

  font-size: 3.5rem;

  color: var(--color-primary);

  transition: var(--transition);
}

.service-card:hover .service-icon {

  transform: scale(1.12);
}

/* CUSTOM ICONS */
.service-custom-icon {

  width: 90px;

  height: 90px;

  object-fit: contain;

  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

/* HOVER */

.service-card:hover .service-custom-icon {

  transform:
    scale(1.12)
    translateY(-4px);

 
}
/* CONTACT */

.contact {

  position: relative;

  background:
    linear-gradient(
      rgba(12, 28, 44, 0),
      rgba(12, 28, 44, 0)
    ),
    url("../img/mapa.png")
    right/cover no-repeat;

  overflow: hidden;
}

.contact-container {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: start;

  margin-top: 1rem;
}

/* LEFT SIDE */

.contact-info .section-title {

  text-align: left;
}

.contact-text {

  margin-bottom: 3rem;

  line-height: 1.8;

  color: var(--color-primary);
}

.contact-items {

  display: flex;

  flex-direction: column;

  gap: 2rem;
}

.contact-item {

  display: flex;

  align-items: flex-start;

  gap: 1rem;
}

.contact-icon {

  font-size: 1.4rem;

  color: var(--color-secondary);

  margin-top: .2rem;
}

.contact-item h3 {

  font-size: 1rem;

  margin-bottom: .35rem;

  color: var(--color-primary);
}

.contact-item p {

  color: var(--color-primary);
}

/* FORM */

.contact-form-wrapper {

  background: white;

  padding: 2.5rem;

  border-radius: var(--border-radius);

  box-shadow: var(--shadow);
}

.contact-form {

  display: flex;

  flex-direction: column;

  gap: 1.25rem;
}

.form-group input,
.form-group textarea {

  width: 100%;

  border: 1px solid #ddd;

  border-radius: 10px;

  padding: 1rem 1.2rem;

  font-family: var(--font-primary);

  font-size: 1rem;

  transition: var(--transition);

  resize: none;
}

.form-group input:focus,
.form-group textarea:focus {

  outline: none;

  border-color: var(--color-secondary);

  box-shadow:
    0 0 0 4px rgba(162, 34, 36, .08);
}

.contact-button {

  border: none;

  background: var(--color-primary);

  color: white;

  padding: 1rem 2rem;

  border-radius: 999px;

  font-size: 1rem;

  font-family: var(--font-primary);

  cursor: pointer;

  transition: var(--transition);
}

.contact-button:hover {

  background: var(--color-secondary);

  transform: translateY(-2px);
}
.form-message {

  margin-top: 1rem;

  font-size: 0.95rem;

  color: #ffffff;

  opacity: 0.9;

}
/* FOOTER */

.footer {

  background: var(--color-primary);

  color: white;

  padding: 3rem 0 2rem;
}

.footer-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  gap: 1.5rem;
}

/* LOGO */

.footer-logo-wrapper {

  width: 180px;
}

.footer-logo {

  width: 100%;

  object-fit: contain;
}

/* SOCIAL */

.footer-social {

  display: flex;

  align-items: center;

  justify-content: center;
}

.footer-social a {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255,255,255,.08);

  color: white;

  font-size: 1.2rem;

  transition: var(--transition);
}

.footer-social a:hover {

  background: var(--color-secondary);

  transform: translateY(-4px);
}

/* COPYRIGHT */

.footer-copy {

  font-size: .95rem;

  color: rgba(255,255,255,.7);

  line-height: 1.7;
}

/* RESPONSIVE */

@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .nav-links {

    position: fixed;

    top: 72px;

    left: 0;

    width: 100%;

    height: calc(100vh - 72px);

    background: rgba(12, 28, 44, 0.98);

    backdrop-filter: blur(10px);

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    padding-top: 4rem;

    transform: translateX(-100%);

    opacity: 0;

    visibility: hidden;

    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .nav-links.active {

    transform: translateX(0);

    opacity: 1;

    visibility: visible;
  }

  .stats-grid {

    grid-template-columns: repeat(2, 1fr);
  }

  .section {
    padding: 4rem 0;
  }

  .hero {
    min-height: 85vh;
  }

  .projects-carousel {

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

  grid-template-columns: 1fr;

  gap: 3rem;
}

.contact-info .section-title {

  text-align: center;
}

.contact-text {

  text-align: center;
}

.contact-item {

  justify-content: center;
}
}

@media (max-width: 480px) {

  .stats-grid {

    grid-template-columns: 1fr;
  }

  .footer-content {

    flex-direction: column;

    text-align: center;
  }

  .project-item {

    min-height: 360px;
  }

}