@import 'reset.css';
@import 'variables.css';

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-black);
    color: var(--color-white);
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Utility Classes */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
    position: relative;
}

h1,
h2,
h3 {
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* Navbar Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, padding 0.3s ease, transform 0.3s ease-in-out;
    background-color: transparent;
}

/* Only on scroll up appear the color*/
.navbar.scrolled-up {
    background-color: var(--color-black);
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

    transform: translateY(0);
}

.navbar.scrolled-down {
    transform: translateY(-100%);
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Make the logo and menu align to the left and right */
    padding: 0 20px;
}

.logo img {
    height: 100px;
    width: auto;
}

.nav-menu ul {
    display: flex;
    gap: 70px;
    /* remove dots */
    list-style: none;
}

.nav-menu a {
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-white);
    letter-spacing: 1px;
}

.nav-menu a:hover {
    color: var(--color-yellow);
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

/* Hero Section */
.hero-section {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-bottom: 4%;
    /* Adjust based on design */
    position: sticky;
    top: 0;
    z-index: 1;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 12, 27, 0.3);
    /* Slight dark tint */
    z-index: -1;
}

.hero-content {
    width: 100%;
    z-index: 1;
    /* Move title more to the left */
    margin-left: 10%;
    margin-bottom: 5%;
}

.hero-title {
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--color-white);
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    /* Make the title take less horizontal space */
    width: 100%;
}

.hero-title-light-weight {
    font-weight: 200;
    font-style: italic;
}

/* Quienes Somos Section */
.about-section {
    background-color: var(--color-black);
    color: var(--color-white);
    overflow: hidden;
    padding: 190px;
    /* Prevent SVG overflow */
    position: relative;
    z-index: 2;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image-wrapper {
    position: relative;
}

.about-contrast-bg {
    position: absolute;
    top: 38px;
    left: 26px;
    width: 95%;
    height: 90%;
    background-color: var(--color-yellow);
    border-radius: 20px;
    z-index: 1;
    transform: translate(-20px, -35px);
}

.about-image-mask {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 20px;
    /* Sharp edges as per modern design, or adjust if needed */
    box-shadow: -15px -14px 0px 0px rgb(222 210 66)
}

.about-main-image {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%) contrast(110%);
    /* Slight styling */
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-title {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-white);
    font-weight: 800;
    text-transform: uppercase;
}

.about-text {
    font-size: 1.5rem;
}

.about-title .we-are-title {
    font-style: italic;
}

/* Metricas Section */
.metrics-section {
    padding: 0;
    /* Remove default padding to handle overlap manually */
    position: relative;
    z-index: 10;
    /* Ensure it sits above background transitions */
    height: 0;
    /* The section itself doesn't take up space, the card floats */
    display: flex;
    justify-content: center;
    align-items: center;
}

.metrics-container {
    position: relative;
    top: 0;
    /* Pull up to overlap with Quienes Somos */
    width: 100%;
    display: flex;
    justify-content: center;
}

.metrics-card {
    background-color: var(--color-grey-blue);
    border-radius: 20px;
    box-shadow: 10px 3px 10px 2px rgba(0, 0, 0, 0.4);
    padding: 40px 80px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 65%;
    max-width: 900px;
    gap: 40px;
}

.metric-item {
    text-align: center;
    flex: 1;
}

.metric-number {
    display: block;
    font-style: italic;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1;
    margin-bottom: 10px;
}

.metric-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.text-black {
    color: var(--color-black);
}

.text-blue {
    color: var(--color-blue);
}

/* Porque Nosotros Section */
.why-us-section {
    background-color: var(--color-grey-blue);
    padding-top: 150px;
    /* Extra padding for overlap */
    padding-bottom: 100px;
    color: var(--color-black);
    position: relative;
    z-index: 2;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    text-transform: uppercase;
}

.why-us-grid {
    display: grid;
    /* Increase gap between ROWS */
    grid-template-columns: repeat(3, 1fr);
    row-gap: 45px;
    /* grid-template-rows: repeat(2, 1fr); */
    column-gap: 25px;
    /* make the grid take up the full width */
    width: 100%;
}

.why-us-card {
    background-color: var(--color-grey-blue);
    border-radius: 20px;
    padding: 20px 18px 16px 11px;
    box-shadow: 7px 7px 8px 1px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Make the card wider */
    width: 100%;
}

.why-us-card:hover {
    background-color: var(--color-yellow);
    transform: translateY(-5px);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.2;
}

.card-text {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    font-weight: 700;
}

/* Nuestros Clientes Section */
.clients-section {
    background-color: var(--color-black);
    padding: 80px 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.marquee-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.marquee-track {
    width: 100%;
    height: 100px;
    background-color: var(--color-grey-blue);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
}

.marquee-content {
    display: inline-flex;
    gap: 60px;
    /* Avoid the hop when the animation restarts with forwards*/
    animation: marquee 40s linear infinite;
    padding-right: 60px;
}
/* Reverse animation for the middle track if desired, or all same direction. 
   User asked for Right to Left (standard marquee). */
.marquee-track-2 .marquee-content {
    animation-duration: 45s;
    /* Vary speed slightly */
    animation-direction: reverse;
}

.marquee-track-3 .marquee-content {
    animation-duration: 50s;
}

.client-logo {
    height: 35px;
    width: auto;
    max-width: 100px;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Nuestros Aliados Section */
.partners-section {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 100px 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.partners-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.partners-content {
    flex: 1;
    max-width: 720px;
    padding-right: 40px;
    margin-left: 91px
}

.section-title-left {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.partners-text {
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 300;
    padding-right: 40px;
}

.text-yellow {
    color: var(--color-yellow);
    font-weight: 700;
}

.partners-visuals {
    flex: 1.5;
    display: flex;
    justify-content: flex-end;
}

.partners-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Spacing between rows */
    align-items: flex-end;
    /* Align rows to the right or center? "aleatoriedad ordenada" usually implies centered or scattered. Let's center rows relative to each other */
    /* align-items: center; */
}

.partner-row {
    display: flex;
    gap: 15px;
    /* Spacing between items */
    justify-content: center;
}

.partner-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    opacity: var(--opacity);
    transition: all 0.3s ease;
    position: relative;
}

.partner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover Effect: Brighter, Round margin (scale/margin) */
.partner-item:hover {
    opacity: 1 !important;
    transform: scale(1.3);
    z-index: 10;
    box-shadow: 0 0 15px rgba(222, 210, 66, 0.5);
    /* Yellow glow */
    margin: 0 10px;
    /* "adds round margin" - effectively pushing others */
}

/* Footer Section */
.footer-section {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 0;
    text-align: center;
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.footer-title {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: center;
    row-gap: 10px
}

.footer-question-left {
    /* Center alignment */
    text-align:right;
    grid-column:1;
    grid-row:1;
}

.footer-question-right {
    /* Center alignment */
    text-align: left;
    grid-column: 2;
    grid-row: 1;
}

.footer-cta {
    /* Align to the right, roughly under the 'R' of ESPERAS */
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    /* margin-top: 10px; */

    margin: 0;
}

.text-highlight {
    background-color: var(--color-yellow);
    color: var(--color-black);
    padding: 0 10px;
    display: inline-block;
    /* Ensure background wraps nicely */
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-link {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: opacity 0.3s ease;
    align-items: center;
}

.footer-link:hover {
    opacity: 0.8;
}

.footer-icon {
    width: 0.8rem;
    height: 0.8rem;
    /* Icons are likely black or colored, if SVGs are black we might need to invert or style them. 
       Assuming they are correct color or white. If they are black SVG, filter invert can make them white. */
    filter: brightness(0) invert(1);
    /* Invert to white if they are black assets */
}

.footer-copyright {
    position: absolute;
    top: 97%;
    left: 73%;
    margin-top: 40px;
    font-size: 0.9rem;
    color: var(--color-grey-blue);
    opacity: 0.6;
}