/* Geofones Page Styles */
.geofones-hero {
    position: relative;
    background: url('../images/home/background-section-one-geofones.png') 85% center no-repeat, #1560C6;
    /* Match primary-blue or the image color */
    min-height: 600px;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
    /* Ensure curve doesn't overflow if using image */
}

.gh-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.gh-text {
    /* flex: 0 0 500px; Fixed width for text part */
    max-width: 60%;
    /* Reduced slightly so it doesn't cross center too much */
    color: white;
    padding-left: 0;
    /* Remove padding to align with container/header */
}

.gh-text h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 120%;
    margin-bottom: 40px;
}

.gh-text h1 strong {
    font-weight: 700;
}

.btn-hero-geo {
    background-color: #2F80ED;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 30px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.btn-hero-geo:hover {
    background-color: #1A6FD6;
}

.btn-hero-geo img {
    width: 16px;
    height: 16px;
}

.box-icon-button-cta {
    padding: 7px;
    background-color: #F9FAFB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gh-image {
    /* flex: 1; */
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 500px;
    /* Match section min-height or auto */
    padding-top: 50px;
}

.gh-image img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    /* Remove translate to avoid pushing out, just scale */
    transform: scale(0.9);
    transform-origin: bottom right;
    /* Anchor to bottom right */
}

/* Responsive */
@media (max-width: 1024px) {
    .geofones-hero {
        padding: 60px 0;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        height: auto;
    }

    .gh-content {
        flex-direction: column;
        justify-content: center;
    }

    .gh-text {
        max-width: 100%;
        padding: 0 20px;
        flex: auto;
    }

    .gh-text h1 {
        font-size: 24px;
    }

    .gh-text h1 br {
        display: none;
    }

    .btn-hero-geo {
        width: 100%;
        justify-content: center;
    }

    .gh-image {
        height: auto;
        justify-content: center;
        padding-top: 20px;
    }

    .gh-image img {
        transform: none;
        max-width: 90%;
    }
}

/* Custom Navbar for Geofones Page */
.geofones-nav {
    background-color: #0949A0;
}

/* Models Section */
.models-section {
    padding: 80px 0;
    background-color: white;
}

.models-header-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: #0D4291;
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Model Card */
.model-card {
    background-color: #F9FAFB;
    /* Light gray background */
    border-radius: 20px;
    padding: 60px;
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.model-content {
    flex: 1;
}

.model-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.model-image::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    background-color: #EDEDED;
    /* Darker gray than card background */
    border-radius: 20px;
    z-index: 0;
}

.model-image img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
    transform: scale(1.1);
    /* Slightly pop out of the bg */
}

/* Typography in Card */
.model-title-group {
    margin-bottom: 40px;
}

.model-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 100%;
    color: #0D4291;
    margin-bottom: 5px;
}

.model-category {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #0D4291;
    text-transform: uppercase;
    opacity: 0.8;
}

.model-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #0D4291;
    margin-bottom: 20px;
    margin-top: 30px;
}

.model-section-title:first-of-type {
    margin-top: 0;
}

/* Technical List */
.model-list-tech {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    max-width: 460px;
}

.model-list-tech li {

    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.model-list-tech li img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 3px;
}

.model-list-tech li span {

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 150%;
    color: #0949A0;
}

.model-list-tech li span strong {
    font-weight: 700;
}

/* Composition Grid */
.model-composition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.comp-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comp-item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.comp-item span {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #0949A0;
    line-height: 130%;
}

/* Responsive */
@media (max-width: 1024px) {
    .model-card {
        padding: 40px 30px;
        flex-direction: column-reverse;
        /* Image on top? Design usually image right on desktop. Mobile: Top or Bottom? Let's keep content first or align with design flow. Usually image top is good visual anchor, but content is important. Let's do Image Bottom on mobile or Top? Original design has text left, image right. Stack: Text Top, Image Bottom or vice versa. Most product cards put image on top. Let's try Image Top for mobile. */
        flex-direction: column;
    }

    .model-image {
        order: 1;
        /* Image first on mobile */
        margin-bottom: 40px;
    }

    .model-content {
        order: 2;
    }

    .model-composition-grid {
        grid-template-columns: 1fr;
        /* Stack composition items */
    }

    .model-image img {
        max-width: 80%;
        /* Don't be too huge */
    }

    .model-name {
        font-size: 28px;
    }

    .model-list-tech li span {
        font-size: 16px;
    }
    
    .model-list-tech li span br {
        display: none;
    }

    .comp-item span {
        font-size: 15px;
    }

    .models-header-title {
        font-size: 28px;
    }

    .models-section {
        padding: 40px 0;
    }

    #comparativo-section {
        padding: 40px 0;
    }
}

/* Comparativo Section */
.comparativo-section {
    padding: 80px 0;
    background-color: white;
    /* Changed to white as per prototype? Or keeping light gray section but table is white? Image shows white page background? Let's keep section white or light. Prototype typically white or very light gray. */
    background-color: white;
}

.comparativo-table-container {
    overflow-x: auto;
    margin-bottom: 20px;
    /* Space before buttons */
    border-radius: 10px;
    /* overflow: hidden; Removed to allow scrolling */
    scrollbar-width: thin;
}

.comparativo-table {
    width: 100%;
    border-collapse: separate;
    /* Allow border spacing */
    border-spacing: 2px;
    /* White borders between cells */
    min-width: 800px;
    font-family: 'Poppins', sans-serif;
    background-color: white;
    /* Background of gaps */
    table-layout: fixed;
    /* Crucial for equal width columns */
}

.comparativo-table thead th {
    background-color: #0D4291;
    color: white;
    padding: 25px 5px;
    /* Reduced side padding to prevent overflow */
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    border: none;
    vertical-align: middle;
}

/* First header cell (Modelo) is gray */
.comparativo-table thead th:first-child {
    background-color: #EEEEEE;
    color: #444;
    /* Dark gray text */
    text-align: center;
    width: 16%;
    /* Slightly larger for "Modelo" label? Or fixed 15? Let's try 15%. */
    width: 15%;
}

/* Product columns */
.col-product {
    width: 21.25%;
    /* (100% - 15%) / 4 = 21.25% */
}

.comparativo-table tbody td {
    padding: 20px 5px;
    text-align: center;
    color: #333;
    font-size: 14px;
    vertical-align: middle;
    background-color: #F9FAFB;
    /* Default cell background - light gray/white? Prototype shows alternating or flat. */
    height: 100%;
    /* Try to fill */
}

/* First column cells (Row Headers) are gray #EEEEEE */
.comparativo-table tbody td:first-child {
    background-color: #EEEEEE;
    font-weight: 700;
    color: #0D4291;
    text-align: center;
}

/* Alternating rows logic? 
   Prototype image:
   - Row 1 (Ideal para): White/Light
   - Row 2 (Destaques): Darker?
   Actually simple stripes might differ from the complex coloring requested.
   Let's check "fundo cinza predominante". Maybe ALL cells are gray #EEEEEE?
   If all cells are gray, then gaps are white.
   Let's look at the uploaded image 1 again. 
   First column: Gray.
   Header: Blue.
   Body cells: Alternating or fixed. It looks like "Ideal para" row is WHITE. "Destaques" row is Gray (lighter than first col?). 
   "Sensibilidade" row is White.
   "Ergonomia" row is Gray.
   "Preço" row is White.
*/

.comparativo-table tbody tr:nth-child(odd) td:not(:first-child) {
    background-color: #EDEDED;
}

.comparativo-table tbody tr:nth-child(even) td:not(:first-child) {
    background-color: #EDEDED;
    /* Very light gray */
}

/* Buttons Grid */
.comparativo-buttons-grid {
    display: grid;
    /* Grid columns must match the table. Table is: 15% (first) + 4 columns.
       4 columns = 85% / 4 = 21.25%.
       This is hard to perfect with pixels.
       Better to use flex with same base basis.
    */
    grid-template-columns: 15% 21.25% 21.25% 21.25% 21.25%;
    gap: 2px;
    /* Match table border spacing */
    min-width: 800px;
    /* Match table min-width */
    margin-top: 2px;
}

/* .empty-cell {
     Empty for the first column under "Modelo" 
} */

.btn-comp {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2F80ED;
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 10px;
    border-radius: 5px;
    /* Rounded buttons */
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    /* Allow wrap */
    transition: background 0.3s;
    height: 100%;
}

.btn-comp:hover {
    background-color: #1A6FD6;
}

/* Responsive adjustment for Grid/Table scroll */
.comparativo-section .container {
    overflow-x: auto;
    /* Allow whole container to scroll if needed, or handle grid scrolling */
}

/* Sync scrolling if they are separate?
   Actually, if I scroll the table, the buttons won't scroll with it unless they are in the same container.
   I should move the buttons-grid INSIDE .comparativo-table-container to share the scrolling context.
*/

/* Todos Com Section */
.common-features-title {
    margin-top: 60px;
    margin-bottom: 60px;
}

.common-features-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    /* Increased from 40px */
    flex-wrap: wrap;
    margin-bottom: 60px;
    /* Increased bottom margin */
}

.second-row-features {
    margin-top: -20px;
    margin-bottom: 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    padding: 0 20px;
}

.feature-item:not(:last-child)::after {
    /* Vertical divider logic */
    content: '';
    position: absolute;
    right: -40px;
    /* Adjusted for 80px gap (half of 80) */
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
    /* Taller divider as per visual */
    width: 2px;
    /* Slightly thicker */
    background-color: #2F80ED;
    display: block;
}

/* Fix divider for last item in a row or flex wrap scenarios */
/* This is tricky with flex wrap. We can try to hide it on last-child but if it wraps... */
/* For now, just last child hidden */
.feature-item:last-child::after {
    display: none;
}

.feature-item img {
    height: 45px;
    /* Slightly larger per design */
    width: auto;
}

.feature-text {
    font-family: 'Poppins', sans-serif;
    color: #0D4291;
    font-size: 16px;
    /* High contrast text */
    line-height: 1.2;
    text-align: left;
}

.feature-text strong {
    font-weight: 700;
    font-size: 20px;
}

/* CTA Card */
.geo-cta-card {
    background-color: #0D4291;
    /* Dark blue */
    border-radius: 10px;
    padding: 60px 40px;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.geo-cta-card h2 {
    color: white;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 30px;
    font-family: 'Poppins', sans-serif;
}

.btn-geo-cta {
    background-color: #2F80ED;
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.btn-geo-cta img {
    height: 25px;
    width: auto;
}

.btn-geo-cta:hover {
    background-color: #1A6FD6;
}

/* Responsive */
@media (max-width: 1024px) {
    .feature-item {
        width: 100%;
        justify-content: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        margin-bottom: 20px;
        text-align: center;
        flex-direction: column;
    }

    .feature-item::after {
        display: none !important;
    }

    .common-features-grid {
        flex-direction: column;
        gap: 0;
    }

    .second-row-features .feature-item:last-child {
        border-bottom: none;
    }

    .feature-text {
        text-align: center;
    }

    .feature-text strong {
        font-size: 16px;
    }

    .feature-text strong br {
        display: none;
    }

    .geo-cta-card {
        padding: 40px 20px;
    }

    .geo-cta-card h2 {
        font-size: 28px;
    }

    .geo-cta-card h2 br {
        display: none;
    }
}