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

:root {
    /* Base: 1rem = 16px */
    font-size: 16px;
}

body { /*this is the background of the page*/
    background-color: #0b1324;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.backdrop-servicios { /*this is the contents boundaries of the page*/
    position: relative;
    width: 100%;
    min-height: 271.5625rem; /* 4345px */
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}

/* Navigation Bar styles are in navbar.css */

/* HERO SECTION */
.hero-section-servicios {
    position: relative; /* not absolute anymore */
    display: flex;
    margin-top: 8%;
    justify-content: center;
    text-align: center;
    width: 100%;
    overflow: hidden;
  }
  
.hero-gradient-overlay {
    position: relative; /* needed so children are positioned normally */
    width: 100%;
    padding: clamp(4rem, 10vw, 8rem) 2rem; /* space inside */
    background: linear-gradient(178deg, rgba(11,18,36,0.6) 0%, rgba(42,73,138,0.6) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    gap: clamp(3rem, 6vw, 6rem); /* space between hero and cards */
    max-width: 94.5rem;
}

  
  .hero-title-servicios {
    position: relative;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw + 1rem, 2.8rem);
    letter-spacing: 0.08rem;
    line-height: 1.4;
    max-width: 70rem;
    background: linear-gradient(to right, #a7becf 0%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
  }
  
  /* SERVICES SECTION */
  .servicios-container-main {
    position: relative;
    width: 100%;
    margin-top: 2%;
  }
  
  .servicios-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2rem, 6vw, 8rem);
  }
  
  .servicio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 18rem;
    height: 100%;
    text-align: center;
    gap: 1rem;
  }
  
  .servicio-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(3rem, 6vw, 5rem);
    height: clamp(3rem, 6vw, 5rem);
  }
  
  .servicio-icon-wrapper img {
    width: 100%;
    height: auto;
  }
  
  .servicio-title-card {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(to right, #a7becf 0%, #66a0cb 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
  }
  
  /* Divider Line */
  .divider-line {
    width: 100%;
    height: 0.25rem;
    background: #3d5a7a;
    margin: 0;
  }
  
  /* MEDIA QUERIES */
  @media (max-width: 900px) {
    .servicios-wrapper {
      gap: 3rem;
    }
  }
  
  @media (max-width: 600px) {
    .servicio-card {
      width: 100%;
    }
  
    .hero-section-servicios {
      padding: 5rem 1.5rem;
    }
  }

/* Section Title */
.section-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.8125rem; /* 45px */
    letter-spacing: 0.084375rem; /* 1.35px */
    color: #f2f2f2;
    line-height: normal;
}

/* Mirada Externa Section */
.mirada-externa-section {
    position: relative;
    margin-top: 4%; /* 932px */
    left: 0;
    width: 100%;
    height: 33.375rem; /* 534px */
}

.mirada-externa-content {
    position: absolute;
    left: 4.5625rem; /* 73px */
    top: 0.5625rem; /* 9px - aligned with image */
    width: 39.625rem; /* 634px */
}

.mirada-externa-subtitle {
    margin-top: 1%;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(1.75rem, 4vw, 2.3rem);
    text-align: left;
    background: linear-gradient(to right, #a7becf 0%, #0857a0 134%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mirada-externa-text {
    position: absolute;
    left: 0;
    top: 8.125rem; /* 130px */
    width: 39.75rem; /* 636px */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.375rem; /* 22px */
    line-height: 1.5;
    letter-spacing: 0.055rem; /* 0.88px */
    color: #cad3da;
}

.mirada-externa-text p {
    margin-bottom: 0;
}

.mirada-externa-text strong {
    font-weight: 900;
}

.mirada-externa-text ol {
    margin-left: 0;
    margin-top: 0.625rem;
    padding-left: 0;
    list-style: decimal;
    list-style-position: inside;
}

.mirada-externa-text ol li {
    margin-left: 2.34375rem; /* 37.5px */
    margin-bottom: 0;
    line-height: 1.5;
}

.mirada-externa-image {
    position: absolute;
    left: 46.4375rem; /* 743px */
    top: 0.5625rem; /* 9px */
    width: 44.4375rem; /* 711px */
    height: 32.8125rem; /* 525px */
    border-radius: 0.625rem; /* 10px */
    overflow: hidden;
}

.mirada-externa-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mirada-externa-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Mirada Interna Section */
.mirada-interna-section {
    position: relative;
    margin-top: 5%; /* 1560px */
    left: 3.375rem; /* 54px */
    width: 87.75rem; /* 1404px */
    height: 37.6875rem; /* 603px */
}

.mirada-interna-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.625rem;
    overflow: hidden;
}

.mirada-interna-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mirada-interna-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.mirada-interna-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
}

.mirada-interna-text {
    position: absolute;
    left: 3.1875rem; /* 51px */
    top: 50%;
    transform: translateY(-50%);
    width: 33.1875rem; /* 531px */
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.375rem; /* 22px */
    line-height: 1.5;
    letter-spacing: 0.055rem; /* 0.88px */
    color: white;
    text-shadow: 0 0 3.125rem #000000;
}

.mirada-interna-text p {
    margin-bottom: 0;
}

.mirada-interna-text strong {
    font-weight: 700;
}

.mirada-interna-text ol {
    list-style-type: lower-alpha;
    margin-left: 4.6875rem; /* 75px */
    padding-left: 0;
    margin-top: 0.625rem;
}

.mirada-interna-text ol li {
    margin-bottom: 0;
}

.mirada-interna-title-container {
    position: absolute;
    left: 53.125rem; /* 850px */
    top: 50%;
    transform: translateY(-50%);
    width: 31.1875rem; /* 499px */
    text-align: center;
}

.mirada-interna-title {
    text-align: center;
    text-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.5);
    margin: 0;
}

.mirada-interna-subtitle {
    margin-top: 1%;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(1.75rem, 4vw, 2.3rem);
    text-align: center;
    background: linear-gradient(to right, #a7becf 0%, #0857a0 134%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mirada Evolutiva Section */
.mirada-evolutiva-section {
    position: relative;
    margin-top: 5%; /* 2263px */
    left: 0;
    width: 100%;
    height: 32.8125rem; /* 525px */
}

.mirada-evolutiva-image {
    position: absolute;
    left: 3.375rem; /* 54px */
    top: 0;
    width: 46.625rem; /* 746px */
    height: 32.8125rem; /* 525px */
    border-radius: 0.625rem;
    overflow: hidden;
}

.mirada-evolutiva-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mirada-evolutiva-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.mirada-evolutiva-content {
    position: absolute;
    left: 53.1875rem; /* 851px */
    top: 5.8125rem; /* 93px */
}

.mirada-evolutiva-subtitle {
    margin-top: 1%;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(1.75rem, 4vw, 2.3rem);
    text-align: left;
    background: linear-gradient(to right, #a7becf 0%, #0857a0 134%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mirada-evolutiva-text {
    position: relative;
    margin-top: 5%;
    width: 32.9375rem; /* 527px */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.5625rem; /* 25px */
    line-height: 1.5;
    letter-spacing: 0.0625rem; /* 1px */
    color: #cad3da;
}

.mirada-evolutiva-text strong {
    font-weight: 700;
}



/* Partners Section */
.partners-section {
    position: relative;
    margin-top: 5%;
    width: 100%;
}

.partners-content {
    width: min(1100px, 90%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 2.5rem);
}

.partners-title {
    width: 100%;
    text-align: center;
    margin: 0;
}

.partners-subtitle {
    font-family: 'Afacad', sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.2vw, 1.75rem);
    letter-spacing: 0.06rem; /* 0.96px */
    color: #a7becf;
    text-align: center;
    max-width: 48rem;
    margin: 0 auto;
}

.partners-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1.5rem, 4vw, 2.75rem);
    align-items: stretch;
}

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    border-radius: 28px;
    background: rgba(12, 30, 52, 0.75);
    border: 1px solid rgba(167, 190, 207, 0.18);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.partner-logo {
    width: min(12.5rem, 70%);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
}

.partner-logo-trust {
    background-color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 16px;
}

.partner-description {
    font-family: 'Inter', sans-serif;   
    font-weight: 500;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    letter-spacing: 0.045rem; /* 0.72px */
    color: #c7d7e6;
    max-width: 22.5rem;
    margin: 0 auto;
}

@media screen and (min-width: 90rem) {
    .partners-section {
        position: relative;
        margin-top: 5%;
        width: 100%;
    }
}

/* Areas Background */
.areas-background {
    position: relative;
    margin-top: 10%;
    width: 100%;
    min-height: 100vh; /* this is the height of the background image */
    overflow: hidden; /* Changed from hidden to visible to prevent content cutoff */
}

.areas-background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.areas-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Areas Section */
.areas-section {
    position: relative;
    width: 100%;
    z-index: 10;
    text-align: center;
}

.areas-title {
    position: relative;
    margin-top: 5%;
    left: 0; /* 55px */
    width: auto; /* 786px */
}

.areas-grid {
    position: relative;
    margin-top: 5%; /* 178px */
    left: 0;
    width: 100%;
    display: flex;
    gap: 2.5rem; /* 40px */
    justify-content: center;
}

/* Area Items */
.area-item {
    position: relative;
    width: 14rem; /* 220px */
    height: 14rem; /* 220px */
    flex-shrink: 0;
}

.area-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.area-circle img {
    display: none;
}

.area-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
    letter-spacing: 0.0375rem; /* 0.6px */
    color: #f7f2e4;
    text-align: center;
    margin: 0;
    padding: 0.625rem;
}

.area-number {
    position: absolute;
    bottom: 0.9375rem; /* 15px */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
    letter-spacing: 0.0375rem; /* 0.6px */
    color: #a7becf;
    text-align: center;
    margin: 0;
}

/* CTA Button */
.cta-button {
    position: relative;
    margin-top: 8%;
    left: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10px */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border: 0.1625rem solid white;
    border-radius: 1.875rem; /* 30px */
    background: transparent;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 2;
}

.cta-button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.cta-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    letter-spacing: 0.0375rem; /* 0.6px */
    color: white;
}

.cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
}

.cta-icon svg {
    width: 100%;
    height: 100%;
}

/* Decorative Ellipses */
.ellipse {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.ellipse-11 {
    top: 179.9375rem; /* 2879px */
    left: -7.75rem; /* -124px */
    width: 31.9375rem; /* 511px */
    height: 26.9375rem; /* 431px */
    background: radial-gradient(circle, rgba(167, 190, 207, 0.15) 0%, rgba(167, 190, 207, 0) 70%);
    filter: blur(3.75rem);
}

.ellipse-9 {
    top: 49.6875rem; /* 795px */
    left: -6.625rem; /* -106px */
    width: 19.9375rem; /* 319px */
    height: 18.25rem; /* 292px */
    background: radial-gradient(circle, rgba(167, 190, 207, 0.15) 0%, rgba(167, 190, 207, 0) 70%);
    filter: blur(3.75rem);
}

.ellipse-8 {
    top: 56.5rem; /* 904px */
    left: 83.5625rem; /* 1337px */
    width: 9.75rem; /* 156px */
    height: 6.5625rem; /* 105px */
    background: radial-gradient(circle, rgba(167, 190, 207, 0.15) 0%, rgba(167, 190, 207, 0) 70%);
    filter: blur(3.75rem);
}

.ellipse-10 {
    top: 83.0625rem; /* 1329px */
    left: 47.375rem; /* 758px */
    width: 13rem; /* 208px */
    height: 11.75rem; /* 188px */
    background: radial-gradient(circle, rgba(167, 190, 207, 0.15) 0%, rgba(167, 190, 207, 0) 70%);
    filter: blur(3.75rem);
}

.ellipse-5-left {
    top: 93rem; /* 1488px */
    left: -2.875rem; /* -46px */
    width: 12.5rem; /* 200px */
    height: 9.8125rem; /* 157px */
    background: radial-gradient(circle, rgba(167, 190, 207, 0.15) 0%, rgba(167, 190, 207, 0) 70%);
    filter: blur(3.75rem);
}

.ellipse-5-center {
    top: 137.5625rem; /* 2201px */
    left: 33.625rem; /* 538px */
    width: 12.5rem; /* 200px */
    height: 9.8125rem; /* 157px */
    background: radial-gradient(circle, rgba(167, 190, 207, 0.15) 0%, rgba(167, 190, 207, 0) 70%);
    filter: blur(3.75rem);
}

.ellipse-11-right {
    top: 122.1875rem; /* 1955px */
    left: 74.625rem; /* 1194px */
    width: 31.9375rem; /* 511px */
    height: 26.9375rem; /* 431px */
    background: radial-gradient(circle, rgba(167, 190, 207, 0.15) 0%, rgba(167, 190, 207, 0) 70%);
    filter: blur(3.75rem);
}

/* Footer styles are in footer.css */

/* ====================
   RESPONSIVE ADAPTATIONS
   ==================== */

/* Use container queries and relative units for natural adaptation */
@media screen and (max-width: 90rem) {
    /* Tablet adjustments */
    .backdrop-servicios {
        max-width: 100%;
    }
    
    .hero-section-servicios,
    .servicios-container-main,
    .mirada-externa-section,
    .mirada-interna-section,
    .mirada-evolutiva-section,
    .partners-section {
        position: relative;
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
    }
    
    .servicios-wrapper {
        position: relative;
        left: auto;
        top: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding: 2rem;
    }
    
    .mirada-externa-section,
    .mirada-evolutiva-section {
        display: flex;
        flex-wrap: wrap;
        padding: 3rem 2rem;
        gap: 2rem;
    }
    
    .mirada-externa-content,
    .mirada-externa-image,
    .mirada-externa-text,
    .mirada-evolutiva-content,
    .mirada-evolutiva-image,
    .mirada-evolutiva-text {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 100%;
    }
    
    .mirada-interna-section {
        display: flex;
        flex-direction: column;
        padding: 2rem;
        margin: 2rem auto;
        width: calc(100% - 4rem);
    }
    
    .mirada-interna-content {
        position: relative;
        display: block;
        height: auto;
    }
    
    .mirada-interna-text,
    .mirada-interna-title-container {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        padding: 1rem;
    }
    
    .partners-grid {
        position: relative;
        left: auto;
        top: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding: 2rem;
    }
    
    .partner-item:first-child {
        margin-right: 0;
    }

    .areas-background {
        overflow: visible; /* Changed to visible to prevent content cutoff */
    }
    
    .areas-grid {
        position: relative;
        top: 20%;
        flex-wrap: wrap;
        padding: 2rem;
    }
    
    .cta-button {
        position: relative;
        left: auto;
        top: auto;
        margin: 2rem auto;
    }
}

@media screen and (max-width: 48rem) {
    /* Mobile adjustments */
    .hamburger {
        display: block;
        width: 1.5625rem;
        height: 1.125rem;
        cursor: pointer;
    }
    
    .hamburger img {
        width: 100%;
        height: 100%;
    }
    
    /* Navigation styles are in navbar.css */
    
    .hero-title-servicios {
        font-size: clamp(1.25rem, 5vw, 2.1875rem);
    }
    
    .servicio-title-card {
        font-size: clamp(1.125rem, 4vw, 1.5625rem);
    }
    
    .section-title {
        font-size: clamp(1.375rem, 6vw, 1.875rem);
        text-align: center;
    }
    
    .mirada-externa-subtitle {
        text-align: center;
    }
    
    .mirada-interna-subtitle {
        text-align: center;
    }
    
    .mirada-evolutiva-subtitle {
        text-align: center;
    }
    
    .mirada-externa-text {
        margin-top: 5%;
    }
    
    .mirada-externa-text,
    .mirada-interna-text,
    .mirada-evolutiva-text {
        font-size: clamp(1rem, 4vw, 1.125rem);
    }
    
    .partner-description {
        font-size: clamp(1rem, 3.5vw, 1.125rem);
    }

    .areas-background {
        overflow: visible;
    }
    
    .area-text {
        font-size: clamp(1rem, 4vw, 1.125rem);
    }
    
    .ellipse {
        display: none;
    }
}