/* CSS for Outros Produtos Page */

/* Section 1: Intro */
.op-intro-section {
    padding: 80px 0;
    /* Adjust padding as needed */
    background-color: var(--bg-light);
    /* Or white/light gray based on image */
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Prevent image overflow */
}

.op-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.op-content {
    flex: 1;
    max-width: 50%;
    z-index: 2;
    /* Ensure text is above */
}

.op-overline {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #4A8BDF;
    /* Lighter blue for tracking */
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.op-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 43px;
    /* Large title */
    line-height: 130%;
    color: #0D4291;
    /* Main dark blue */
}

.op-title-light {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 43px;
    line-height: 120%;
    color: #0D4291;
    margin-top: 10px;
    display: block;
}

.op-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.op-image img {
    max-width: 120%;
    /* Allow it to be large */
    height: auto;
    margin-right: -50px;
    /* Slight overlap to the right */
}

/* Section 2: Yamalux */
.op-product-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    min-height: 500px;
    /* Ensure height */
}

.op-yamalux-blue {
    background-color: #003B8F;
    /* Maintain base color */
}

.op-background-overlay {
    position: absolute;
    top: 0;
    right: 0;
    /* Align to right as per design intent usually */
    width: 50%;
    /* Reduced from 60% */
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* If the background image is meant to be full cover but design shows it on the right side mostly */
.op-background-overlay .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    /* Adjust part of image shown */
    opacity: 1;
}

/* If the user wants FULL background */
/* The user said "como se fosse o fundo", so maybe full width?
   But the text is on the left on a solid blue. 
   The provided image shows the background image has the blue bottles and blue bg.
   Let's make it cover the right half merging into the blue on the left?
   Or just absolute positioned to the right side.
*/
.op-background-overlay {
    width: 100%;
    /* Or 100% and let object-fit handle it */
    mix-blend-mode: normal;
}

/* Adjusting specific to match the print where text is on solid blue 
   and complex image is on right. */

.op-container {
    position: relative;
    z-index: 2;
    /* Content above background */
}

.op-content .op-overline.op-light {
    color: rgba(255, 255, 255, 0.7);
}

.op-product-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 110%;
    margin-bottom: 30px;
    color: white;
}

.op-description-box {
    max-width: 450px;
}

.op-description-box p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: rgba(255, 255, 255, 0.9);
}

/* Composition Container */
.op-composition {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    height: 450px;
    /* Fixed height for positioning context */
}

.op-composition img {
    position: absolute;
    bottom: 0;
    transition: transform 0.3s ease;
}

/* Thin Bottle (Left Front) */
.bottle {
    z-index: 20;
    left: -10%;
    /* Keep position as requested or close to it */
    top: 0%;
    height: 100%;
    width: auto;
    /* Fix distortion */
    object-fit: contain;
    /* Ensure it keeps aspect ratio */
}


/* Responsive Design */
@media (max-width: 1024px) {
    .op-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .op-background-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        /* Fade it on mobile so text is readable if it overlaps */
    }

    .op-content {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .op-image {
        justify-content: center;
        width: 100%;
    }

    .op-image img {
        margin-right: 0;
        max-width: 100%;
    }

    .op-composition {
        width: 100%;
        height: 300px;
        /* Smaller height on mobile */
    }

    .op-composition img {
        position: static;
        margin: 0 auto;
        max-width: 80%;
        height: auto;
        display: block;
        transform: none;
    }

    .op-title {
        font-size: 22px;
        /* Reduced to match prototype */
        line-height: 1.3;
    }

    .op-title-light {
        font-weight: 300;
        font-size: 26px;
        margin-top: 5px;
    }

    .op-title-light br {
        display: none;
    }

    .op-product-title {
        font-size: 30px;
    }

    .op-description-box {
        margin: 0 auto;
        /* Center the description box */
    }

    .op-description-box p {
        font-size: 16px;
    }
}

/* Features Section */
.op-features-section {
    padding: 80px 0;
    background-color: #0949A0;
    /* Continue the blue from previous section */
}

.op-features-box {
    border: 2px solid #056dff;
    border-radius: 12px;
    padding: 70px;
}

.op-features-grid {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 50px;
}

.op-feature-col {
    flex: 1;
}

.op-feature-col h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: white;
    margin-bottom: 30px;
}

.op-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.op-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.op-feature-list li img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.op-feature-list li span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: white;
    line-height: 150%;
}

.op-feature-note {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #fff;
    font-style: italic;
    margin-top: 30px;
}

/* Video Button */
.btn-op-video {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #1E7DFF;
    /* Brighter blue */
    color: white;
    text-decoration: none;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    transition: background-color 0.3s;
    letter-spacing: 0.5px;
    min-height: 60px;
}

.btn-op-video:hover {
    background-color: #3b82f6;
}

.box-icon-play {
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    height: 30px;
    width: 30px;
    flex-shrink: 0;
}

.play-icon {
    margin-left: 1.5px;
    margin-top: 1.5px;
}

/* Responsive for Features */
@media (max-width: 768px) {
    .op-features-grid {
        flex-direction: column;
        gap: 40px;
    }

    .op-features-box {
        padding: 30px 20px;
    }

    .op-feature-col h3 {
        font-size: 24px;   
    }

    .op-feature-list li span {
        font-size: 16px;
    }
    
    .op-feature-note br {
        display: none;
    }

    .op-colors-bg {
        width: 80%;
        opacity: 0.3;
        top: 0;
        transform: none;
        height: 50%;
    }

    .op-colors-bg.left {
        left: -30%;
        top: 0;
        transform: scaleX(-1);
    }

    .op-colors-bg.right {
        right: -30%;
        top: auto;
        bottom: 0;
    }

    .op-colors-bg {
        display: none;
    }

    .btn-op-video {
        font-size: 14px;
    }
}

.op-image-product img {
    width: 83%;
    height: 100%;
}

/* Colors Section */
.op-colors-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    background-color: #003B8F;
    /* Fallback to blue */
    /* Ensure no gradient override if same class as section 2, or just rely on class */
}

.op-colors-bg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 90%;
    /* Adjust size of splashes */
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.op-colors-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Adjust visibility vs background */
}

.op-colors-bg.left {
    left: -30%;
    width: 20%;
    /* Pull offscreen slightly */
    transform: translateY(-50%) scaleX(-1);
    /* Flip horizontally */
}

.op-colors-bg.right {
    right: -5%;
}

/* Ensure content is above background */
.op-colors-section .op-container {
    position: relative;
    z-index: 5;
}

/* Warning Item */
.op-feature-list li.op-warning-item {
    margin-top: 20px;
    align-items: center;
}

.op-feature-list li.op-warning-item img {
    width: 28px;
    height: 28px;
}

.op-feature-list li.op-warning-item span strong {
    font-weight: 700;
}

/* Kits Section */
.op-kits-section {
    padding: 80px 0;
    background-color: var(--white);
    /* White background as base */
}

.op-kit-row {
    display: flex;
    align-items: center;
    /* Vertical center alignment */
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 100px;
    /* Space between products */
}

.op-kit-row:last-child {
    margin-bottom: 0;
}

.op-kit-row.reverse {
    flex-direction: row-reverse;
}

.op-kit-content {
    flex: 1;
    max-width: 50%;
}

.op-kit-image-box {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

/* The grey background shape behind images */
.op-image-bg {
    position: absolute;
    width: 70%;
    height: 70%;
    background-color: #F0F0F0;
    /* Light grey blob */
    border-radius: 20px;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.op-kit-image-box img {
    position: relative;
    z-index: 2;
    /* Above bg */
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Specific styling for manual shadow if needed or done inline */
/* Typography */
.op-overline-blue {
    display: block;
    font-family: 'Poppins', sans-serif;


    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #4A8BDF;
    /* Lighter blue */
    margin-bottom: 10px;
    text-transform: uppercase;
}

.op-kit-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #003B8F;
    /* Deep blue */
    margin-bottom: 20px;
    line-height: 120%;
}

.op-kit-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: #0949A0;
    /* Dark grey text */
    line-height: 160%;
    margin-bottom: 20px;
}

.op-kit-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #003B8F;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Lists */
.op-kit-list {
    list-style: none;
    padding: 0;
    margin-bottom: 10px;
}

.op-kit-list li {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #0949A0;
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
    line-height: 150%;
}

.op-kit-list li::before {
    content: "•";
    color: #003B8F;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
}

/* Icon Grid */
.op-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    /* Increased gap for better spacing */
    margin-bottom: 30px;
}

/* New Kit Block Layout (Split Top/Bottom) */
.op-kit-block {
    margin-bottom: 50px;
}

.op-kit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 40px;
    /* Space before divider */
}

.op-kit-text {
    flex: 1;
    max-width: 50%;
}

.op-kit-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.op-kit-image-wrapper img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.op-section-divider {
    height: 1px;
    background-color: #DDD;
    /* Light divider */
    width: 100%;
    margin: 40px 0;
}

.op-kit-bottom {
    width: 100%;
}

/* Kit Bottom Row: text + image side by side */
.op-kit-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.op-kit-bottom-text {
    flex: 1;
}

.op-kit-bottom-image {
    flex: 0 0 350px;
    display: flex;
    justify-content: center;
}

.op-kit-bottom-image img {
    width: 500px;
    height: 420px;
    border-radius: 16px;
    object-fit: cover;
}

.btn-op-kit.full-width {
    width: 100%;
    margin-top: 40px;
    padding: 18px;
    /* Taller button */
    font-size: 16px;
}

/* Responsive for Kit Block */
@media (max-width: 1024px) {
    .op-kit-top {
        flex-direction: column;
        text-align: center;
    }

    .op-kit-text {
        max-width: 100%;
    }

    .op-kit-bottom-row {
        flex-direction: column;
    }
}

.op-icon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #003B8F;
    /* Blue text for icon items? Or dark? Let's check image... Blue typically */
    font-weight: 500;
}

.op-icon-item img {
    width: 20px;
    height: 20px;
}

/* List with checks */
.op-kit-list-checks {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.op-kit-list-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #003B8F;
}

.op-kit-list-checks li img {
    width: 20px;
    height: 20px;
}


/* Button */
.btn-op-kit {
    display: inline-flex;
    align-items: center;
    background-color: #1E7DFF;
    color: white;
    padding: 12px 30px;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    gap: 15px;
    min-height: 60px;
}

.btn-op-kit:hover {
    background-color: #3b82f6;
}

.btn-op-kit .arrow-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    filter: brightness(0) invert(1);
    transform: rotate(90deg);
    /* Right arrow */
}


/* Responsive */
@media (max-width: 1024px) {
    .op-kit-row {
        flex-direction: column-reverse;
        /* Image on top on mobile? Prompt said "Mobile: Text top, Image bottom" usually. 
                                           But wait. Section 2 was Text top, Image bottom.
                                           Standard stacking: usually image Top or Bottom depending on content essentiality.
                                           Let's stick to consistent stacking: Content First (Top), Image Second (Bottom)
                                           So Flex-direction column.
                                        */
        flex-direction: column;
        gap: 30px;
        margin-bottom: 80px;
        text-align: center;
    }

    .op-kit-row.reverse {
        flex-direction: column;
        /* Keep same order: content then image */
    }

    /* However, if image is visual aid, maybe it should be bottom.
       If the HTML has content first, flex-direction column puts text on top. Correct.
       The Manual section has image first in HTML (.reverse). 
       So for Manual: content is second. 
       If we want Text Top for ALL, we might need column-reverse for the manual one if HTML is reversed.
       Let's keep it simple: column for normal rows (Text->Image), column-reverse for reverse rows (Image->Text -> becomes Text(bottom)->Image(top)? No.
       Normal Row: Content, Image. Column -> Content, Image. (Text Top).
       Reverse Row: Image, Content. Column -> Image, Content. (Image Top).
       If user wants Text Top always:
       Reverse Row needs column-reverse.
    */
    .op-kit-row.reverse {
        flex-direction: column-reverse;
    }

    .op-kit-content {
        max-width: 100%;
        text-align: left;
        /* Or center? usually left for long text */
    }

    .op-kit-title {
        font-size: 20px;
    }

    .op-kit-title br {
        display: none;
    }

    .op-kit-subtitle {
        font-size: 20px;
    }

    .op-kit-list li,
    .op-kit-desc {
        font-size: 16px;
        text-align: left;
    }

    .op-icon-grid {
        grid-template-columns: 1fr;
        /* Stack icons */
    }

    .btn-op-kit {
        width: 100%;
        font-size: 12px!important;
    }
}

/* Manometer Specific Layout */
.op-manometer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: flex-start;
}

.op-manometer-info-col {
    flex: 1;
    max-width: 60%;
}

.op-manometer-use-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.op-manometer-use-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
}

/* Manometer Composition Grid (Horizontal 3 items) */
.op-manometer-comp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.op-check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #003B8F;
    font-weight: 500;
    line-height: 140%;
}

.op-check-item img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Responsive Manometer */
@media (max-width: 1024px) {
    .op-manometer-bottom {
        flex-direction: column;
    }

    .op-manometer-info-col {
        max-width: 100%;
    }

    .op-manometer-comp-grid {
        grid-template-columns: 1fr;
    }
}

/* Reseller Section */
.op-reseller-section {
    padding: 80px 0;
    background-color: #EEEEEE;
    /* Background color from image */
}

.op-reseller-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    /* Position context for the seal */
}

.op-reseller-seal {
    position: absolute;
    top: -185px;
    right: 0;
    width: 220px;
    height: auto;
    z-index: 10;
}

.op-reseller-content {
    flex: 1;
    max-width: 50%;
}

.op-reseller-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.op-reseller-image img {
    max-width: 100%;
    height: auto;
}

.op-text-blue-small {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 21px;
    color: #003B8F;
    margin-bottom: 20px;
    display: block;
    line-height: 140%;
}

.op-reseller-title {
    font-family: 'Poppins', sans-serif;
    /* Might be Montserrat based on boldness */
    font-weight: 800;
    /* Extra bold */
    font-size: 46px;
    color: #003B8F;
    line-height: 110%;
    margin-bottom: 30px;
    text-transform: none;
}

.op-reseller-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    max-width: 500px;
    font-size: 21px;
    color: #0949A0;
    /* Or typical text color */
    line-height: 150%;
    margin-bottom: 40px;
}

.btn-op-reseller {
    display: inline-flex;
    align-items: center;
    background-color: #1E7DFF;
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-op-reseller:hover {
    background-color: #3b82f6;
}

.btn-op-reseller .arrow-icon-circle {
    width: 24px;
    height: 24px;
    filter: none;
}

/* Responsive Reseller */
@media (max-width: 1024px) {
    .op-reseller-container {
        flex-direction: column;
        text-align: center;
    }

    .op-reseller-image {
        position: relative; /* Context for absolute seal */
        justify-content: center;
        width: 100%;
        order: -2;
        margin-bottom: 20px;
    }

    .op-reseller-seal {
        position: absolute;
        top: 25%;
        right: 15%;
        width: 100px; /* Make it slightly smaller for mobile fit */
        margin: 0;
        order: unset; /* No longer a flex item basically */
        z-index: 10;
        transform: translate(0, -50%); /* Fine-tune vertical centering relative to top */
    }

    .op-reseller-content {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .op-reseller-title {
        font-size: 24px;
    }

    .op-reseller-desc {
        font-size: 16px;
    }

    .op-text-blue-small {
        font-size: 18px;
    }
    
    .op-text-blue-small br {
        display: none;
    }
}