/* Components CSS */

/* Header */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2) 0;
  z-index: var(--z-navigation);
  transition: all var(--transition-normal);
}

#header.scrolled {
  background-color: white;
  box-shadow: var(--shadow-md);
}

#header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo h1 {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: 0;
}

/* Navigation */
nav ul {
  display: none;
}

.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  width: 3rem;
  cursor: pointer;
}

.mobile-menu-btn span {
  height: 0.3rem;
  width: 100%;
  background-color: var(--color-primary);
  margin-bottom: 0.5rem;
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(0.8rem, 0.6rem);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(0.8rem, -0.6rem);
}

/* Mobile Menu */
nav.active ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: var(--shadow-md);
  padding: var(--space-2) 0;
}

nav.active ul li {
  text-align: center;
  padding: var(--space-1) 0;
}

nav.active ul li a {
  display: block;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  font-weight: 500;
}

nav.active ul li a:hover {
  color: var(--color-primary);
}

/* Services Section */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.service-card {
  background-color: white;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: all var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-0.8rem);
  box-shadow: var(--shadow-md);
}

.service-icon {
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto var(--space-3);
  background-color: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 3.2rem;
  background-repeat: no-repeat;
  background-position: center;
}

.document-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z'/%3E%3C/svg%3E");
}

.advice-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='white' d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.1 62.1-12.3c36.8 20.1 83.2 31.5 133 32.3l0 0c1.5 0 3 .1 4.5 .1c12.5 13.1 28.8 23.5 48.2 30.3c21.6 7.6 45.6 10.9 69.2 9.6l12.3 30.7c-2.8 .8-5.4 1.8-7.8 3c-7.6 3.7-12 8.3-14.1 13.8c-2.1 5.5-2 11.9 .5 19.4c2.6 7.6 7.6 15 14.6 20.7s15.3 9.7 23.8 11.5c8.5 1.8 17 1.9 25.4-.2c8.4-2 16.2-6.2 22.7-12.3c6.5-6.2 11.1-14 13.2-23c2.1-9 .8-18.7-4-28c11.2-8.3 20.9-17.2 29.1-26.7c13.6-15.8 22.5-33.3 27.2-51.5c4.8-18.3 5.5-37.5 2-56.5c3-1.4 5.9-2.8 8.8-4.3c20.4-10.8 37.4-23.7 50.3-38.1c13-14.4 21.1-30.1 25.2-46.3c4.2-16.3 4.3-33 .3-49c-4-16-11.9-31.2-23.1-45c-11.2-13.8-25.5-26.2-42.3-36.6C505.3 39.5 481.5 32 457.7 32s-47.6 7.5-67.3 19.9c-16.7 10.4-31 22.8-42.3 36.6c-11.2 13.8-19.1 29-23.1 45c-4 16-3.9 32.7 .3 49c4.2 16.2 12.2 31.9 25.2 46.3c12.9 14.3 29.9 27.2 50.3 38.1c7.6 4 15.6 7.6 23.6 10.9c-4.5 18.9-10.4 35.8-18.5 50.5c-8.9 16.2-20.3 30.5-35.5 42.6c-15.3 12.1-34.4 22.2-58.5 30.2c-24.1 8-53.3 13.4-88.5 16c-.3 0-.6 0-.9 .1c-23.5 0-45.4-5.2-62.8-14.5l0 0 0 0c-8.8-4.7-16.4-10.5-22.7-17.2c5.9-.8 11.8-1.8 17.7-2.9c19-3.7 36.3-9.7 51.2-17.8c15-8.2 27.7-18.5 37.2-30.9c9.4-12.4 15.9-27 19.1-43.2c3.1-16.2 2.8-33.9-1-52.6c-4-19.4-11.5-37.1-22.3-52.3C304 101.7 286.8 79.3 264.5 60c-22.4-19.4-49.7-35.7-80.3-47.2c-30.6-11.4-64.4-17.9-98.3-17.9c-33.6 0-66 6.1-95.3 17.3C19.8 27.8 0 49.5 0 80c0 21.4 0 47.1 .1 76.8L0 176z'/%3E%3C/svg%3E");
}

.solutions-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56V56c0-30.9 25.1-56 56-56z'/%3E%3C/svg%3E");
}

/* About Section */
#nosotros {
  background-color: var(--color-background-alt);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.about-text {
  font-size: var(--font-size-lg);
}

.about-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-primary);
  padding: var(--space-4);
}

.values-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.value-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: rgba(255, 255, 255, 0.1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.value-icon {
  width: 4rem;
  height: 4rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 2.4rem;
  background-repeat: no-repeat;
  background-position: center;
}

.value-item h4 {
  color: white;
  margin-bottom: 0;
  font-size: var(--font-size-lg);
}

.efficiency-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
}

.trust-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='white' d='M288 0c-69.6 0-126.7 51.2-137 117.7c-9.5-3.5-20-5.7-31-5.7c-66.3 0-120 64.5-120 144s53.7 144 120 144c5.6 0 11.1-.5 16.4-1.5c5.2 8.8 11.2 16.9 18 24.1C141.5 432.7 126.7 448 109 448c-21.4 0-42-10.9-55.8-33.3c-14.8-24.1-19.2-57.9-12.8-97.7c4.9-30.2-6.4-61.2-28.5-79.8C4.9 231.7 0 223.3 0 214.4c0-15.6 15.5-28.4 34.6-28.4c4.7 0 9.4 .8 13.8 2.2C61.2 163.3 97.7 145 139 145c.6 0 1.2 0 1.8 0c6.1-15.9 13.3-30.9 21.6-44.5C180.7 72.9 231.2 0 288 0zm109 73.5c28.9 0 53.9 12.9 72.4 32.6c28 29.7 42.6 73.7 42.6 123.9s-14.5 94.2-42.6 123.9c-18.5 19.6-43.5 32.6-72.4 32.6s-53.9-12.9-72.4-32.6c-28-29.7-42.6-73.7-42.6-123.9s14.5-94.2 42.6-123.9c18.5-19.6 43.5-32.6 72.4-32.6zM358.5 229.7l-14.3-14.3c-13.1-13.1-34.2-13.1-47.3 0l-69.8 69.8-21.2-21.2c-13.1-13.1-34.2-13.1-47.3 0l-14.3 14.3c-13.1 13.1-13.1 34.2 0 47.3l47.3 47.3c13.1 13.1 34.2 13.1 47.3 0l95.9-95.9c13.1-13.1 13.1-34.2 0-47.3z'/%3E%3C/svg%3E");
}

.experience-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");
}

/* Contact Section */
.contact-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.contact-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.info-card {
  background-color: white;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.info-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-2);
  background-color: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 2.4rem;
  background-repeat: no-repeat;
  background-position: center;
}

.location-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
}

.hours-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
}

.contact-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
}

.info-card h3 {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.info-card p {
  margin-bottom: var(--space-1);
}

.map-container {
  height: 30rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.contact-cta {
  text-align: center;
  background-color: var(--color-primary);
  color: white;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}

.contact-cta h3 {
  margin-bottom: var(--space-3);
}

/* Media Queries */
@media (min-width: 768px) {
  /* Header */
  .mobile-menu-btn {
    display: none;
  }
  
  nav ul {
    display: flex;
    gap: var(--space-3);
  }
  
  nav ul li a {
    padding: var(--space-1);
    font-weight: 500;
    color: var(--color-text);
  }
  
  nav ul li a:hover {
    color: var(--color-primary);
  }
  
  /* Services */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* About */
  .about-content {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  
  .values-list {
    grid-template-columns: 1fr;
  }
  
  /* Contact */
  .contact-content {
    grid-template-columns: 1fr 1fr;
  }
  
  .contact-info {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) {  
  .contact-info {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .values-list {
    grid-template-columns: repeat(3, 1fr);
  }
}