/* Salud Visual Page - Figma design implementation */
/* Full width sections, content centered */
/* Colors: Okio Negro #000000, Okio Blanco #FFFFFF, Okio Gris Oscuro #676F78, Okio Gris Claro #E1E5E6, #F0F0F0 */

/* Keep header visible on Salud Visual page - overrides header hide/scroll effects */
#wrapwrap:has(.sv_section) header {
    transform: none !important;
    opacity: 1 !important;
}
#wrapwrap:has(.sv_section) header .o_header_hide_on_scroll.hidden {
    max-height: none !important;
    padding-block: revert !important;
    overflow: visible !important;
}

:root {
    --sv-max-width: 1380px;
    --sv-col-gap: 48px;
    --sv-padding-x: 70px;
    --sv-color-black: #000000;
    --sv-color-white: #FFFFFF;
    --sv-color-gray-dark: #676F78;
    --sv-color-gray-light: #E1E5E6;
    --sv-color-gray-bg: #F0F0F0;
}

/* Full width sections - background extends edge to edge */
.sv_section {
    width: 100%;
    margin: 0;
    padding: 80px 0;
}

/* Anchor scroll offset for fixed header - ensures #section-id links scroll to correct position */
.sv_section[id],
.sv_face_section[id] {
    scroll-margin-top: 140px;
}

.sv_section_white {
    background-color: var(--sv-color-white);
}

.sv_section_gray {
    background-color: var(--sv-color-gray-bg);
}

/* Content wrapper - centered, max-width for readability */
.sv_section > .sv_split_wrapper {
    max-width: var(--sv-max-width);
    margin: 0 auto;
    padding: 0 var(--sv-padding-x);
}

/* First section - Figma: 551px min height for hero block */
/* .sv_section:first-of-type {
    min-height: 551px;
} */

.sv_split_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

section.sv_section.sv_section_gray {
    padding: 0;
}

section.sv_section.sv_section_gray .sv_col.sv_col_content {
    border-left: 1px solid #000;
    padding: 50px;
}

section.sv_section {
    border-bottom: 1px solid #000;
}

section.sv_section.section_3 .sv_col.sv_col_content {
    padding-right: 10px;
}

/* Column types */
.sv_col_title {
    min-width: 0;
    padding-top: 50px;
}

.sv_col_content {
    min-width: 0;
}

.sv_col_img {
    min-width: 0;
}

section.sv_section.sv_section_white {
    padding: 0px;
}

section.sv_section.sv_section_white .sv_col.sv_col_content {
    padding: 50px;
}

/* Typography - Figma: Jost, 49px titles, 16px body, 18px subheadings */
.sv_article_title {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 500;
    font-size: 49px;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--sv-color-black);
    margin: 0 0 24px 0;
}

.sv_article_lead {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.445;
    letter-spacing: -0.02em;
    color: var(--sv-color-black);
    margin: 0 0 16px 0;
}

.sv_article_body {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.445;
    letter-spacing: -0.02em;
    color: var(--sv-color-black);
    margin-bottom: 24px;
}

.sv_article_body p,
.sv_article_body ul {
    margin-bottom: 16px;
}

.sv_article_body ul {
    padding-left: 24px;
}

.sv_article_body li {
    margin-bottom: 8px;
}

.sv_subheading {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--sv-color-black);
    margin: 0 0 8px 0;
}

/* Buttons - Figma: black, rectangular, 40px height, 16px uppercase */
.sv_btn_primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.44;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sv-color-white) !important;
    background-color: var(--sv-color-black);
    padding: 12px 28px;
    min-height: 40px;
    border-radius: 5px;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
}

.sv_btn_primary:hover {
    background-color: #000000;
    color: var(--sv-color-white) !important;
}

.sv_btn_group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

/* Section images - full width within column */
.sv_section_img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Section 5 (Sube tus lentes): Figma 410px content height, image full width of column */
.sv_section_sube .sv_split_wrapper {
    align-items: stretch;
}

.sv_section_sube {
    padding: 60px 0;
    /* min-height: 490px; */
}

section.sv_section {
    border-bottom: 1px solid #000;
}

section.sv_section.section_3 .sv_col.sv_col_content {
    padding-right: 10px;
}

.sv_col_img_fill {
    display: flex;
    overflow: hidden;
    min-height: 370px;
}

.sv_section_img_fill {
    width: 100%;
    height: 100%;
    min-height: 370px;
    object-fit: cover;
    object-position: center;
}

/* Face shape section - Figma: full width, 2x2 grid, cards #E1E5E6, horizontal layout per card */
.sv_face_section {
    width: 100%;
    padding: 70px 0 80px;
    background-color: var(--sv-color-white);
}

.sv_face_container {
    max-width: var(--sv-max-width);
    margin: 0 auto;
    padding: 0 var(--sv-padding-x);
}

.sv_section_title {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 500;
    font-size: 49px;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--sv-color-black);
    margin-bottom: 48px;
    text-align: left;
}

/* 2 columns in one row - equal height columns */
.sv_face_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
    align-items: stretch;
}

/* Each card: equal height, content area + gray bar */
.sv_face_card {
    background: var(--sv-color-white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100%;
}

/* Content: face left | text right - equal height, flex to fill */
.sv_face_card_content {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 24px;
    padding: 24px 24px 20px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.sv_face_card_left {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv_face_img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    object-position: center;
}

.sv_face_card_right {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Gray bar - Figma: #E1E5E6, proper spacing for specs row */
.sv_face_glasses_bar {
    background: #E1E5E6;
    min-height: 120px;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 24px 32px;
    margin-top: auto;
}

.sv_face_glass_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sv_glass_icon {
    width: 110px;
    height: 45px;
    object-fit: contain;
}

.sv_face_glass_item span {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--sv-color-black);
    text-align: center;
}

/* Monturas ideales - Figma: 18px semibold label, 16px list items */
.sv_face_ideal_block {
    margin: 0;
}

.sv_face_ideal_block ul {
    margin: 0;
    padding-left: 24px;
}

.sv_face_ideal_block li {
    margin-bottom: 6px;
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1;
    color: var(--sv-color-black);
}

.sv_face_title {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--sv-color-black);
    margin: 0 0 12px 0;
}

.sv_face_char {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1;
    color: var(--sv-color-black);
    margin: 0 0 12px 0;
}

.sv_face_char strong {
    font-weight: 600;
    font-size: 18px;
}

.sv_face_ideal_block .sv_face_ideal {
    font-family: 'Jost', 'Bould-Regular', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    color: var(--sv-color-black);
    margin: 0 0 8px 0;
}

.sv_face_cta {
    text-align: center;
}

/* Responsive */
@media (max-width: 1200px) {
    :root {
        --sv-padding-x: 40px;
    }

    .sv_face_row {
        grid-template-columns: 1fr;
    }

    .sv_face_card_content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sv_face_row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    :root {
        --sv-padding-x: 24px;
    }

    .sv_split_wrapper {
        grid-template-columns: 1fr;
    }

    /* Section 4 mobile: image first, text second */
    #luz_azul_realmente_necesitas_proteccion .sv_split_wrapper .sv_col_img {
        order: 1;
    }
    #luz_azul_realmente_necesitas_proteccion .sv_split_wrapper .sv_col_content {
        order: 2;
    }

    .sv_section_img {
        max-width: 100%;
    }

    .sv_article_title {
        font-size: 32px;
    }

    .sv_section_title {
        font-size: 32px;
    }

    /* Mobile/tablet only: remove border, reduce padding */
    section.sv_section.sv_section_gray .sv_col.sv_col_content {
        border-left: none;
        padding: 24px var(--sv-padding-x);
    }

    section.sv_section {
        border-bottom: none;
    }

    section.sv_section.section_3 .sv_col.sv_col_content {
        padding-right: var(--sv-padding-x);
    }

    section.sv_section.sv_section_white .sv_col.sv_col_content {
        padding: 24px var(--sv-padding-x);
    }

    .sv_col_title {
        padding-top: 24px;
    }

    .sv_col_img_fill {
        min-height: 240px;
    }

    .sv_section_img_fill {
        min-height: 240px;
    }

    .sv_face_section {
        padding: 40px 0 48px;
    }

    .sv_face_card_content {
        padding: 16px;
    }

    .sv_face_glasses_bar {
        padding: 16px;
        min-height: auto;
    }

    .sv_glass_icon {
        width: 48px;
        height: 24px;
    }

    .sv_face_glass_item span {
        font-size: 14px;
    }
}

/* Section 5 mobile slider - same structure as Ver/Sol cat-img2 sliders */
.sv-sube-mobile-slider {
    display: none;
}

@media (max-width: 768px) {
    .sv_section_sube .sv_sube_desktop {
        display: none !important;
    }
    .sv-sube-mobile-slider {
        display: block !important;
        width: 100%;
        position: relative;
    }
    .sv-sube-mobile-slider .cat-img2-slider-viewport {
        overflow: hidden;
        min-height: 200px;
        position: relative;
    }
    .sv-sube-mobile-slider .sv-sube-slider-track {
        display: flex;
        width: 400%;
        min-height: 200px;
        transition: transform 0.35s ease;
    }
    .sv-sube-mobile-slider .cat-img2-slide {
        flex: 0 0 25%;
        width: 25%;
        box-sizing: border-box;
        position: relative;
        min-height: 200px;
        height: 200px;
    }
    /* Slide 1: image as background, text overlay */
    .sv-sube-mobile-slider .sv-sube-slide-1 {
        background-image: url('/okio_techspawn/static/images/salud/sv_slider_mobile.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .sv-sube-mobile-slider .sv-sube-slide-1-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem 1rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 0rem;
    }
    .sv-sube-mobile-slider .sv-sube-slide-1-title {
        font-family: 'Jost', 'Bould-Regular', sans-serif;
        font-size: 24px;
        font-weight: 400;
        color: #fff;
        text-align: left;
        line-height: 100%;
    }
    .sv-sube-mobile-slider .sv-sube-slide-1-text {
        font-family: 'Jost', 'Bould-Regular', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.95);
        text-align: left;
        line-height: 100%;
    }
    /* Slide 2: black background */
    .sv-sube-mobile-slider .cat-img2-slide-dark {
        background: #000;
        color: #fff;
        padding: 1rem 1.25rem;
        display: flex;
    }
    .sv-sube-mobile-slider .cat-img2-slide-dark .cat-img2-slide-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .sv-sube-mobile-slider .cat-img2-slide-dark .cat-img2-slide-title {
        font-size: 32px;
        font-weight: 400;
        margin: 0 0 10px 0;
        color: #fff;
        text-align: left;
    }
    .sv-sube-mobile-slider .cat-img2-slide-dark .cat-img2-slide-text {
        font-size: 12px;
        line-height: 100%;
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
        text-align: left;
    }
    .sv-sube-mobile-slider .cat-img2-slide-light {
        background: #fff;
        color: #333;
        padding: 1rem 1rem;
        display: flex;
    }
    /* Slide 3: white bg table */
    .sv-sube-mobile-slider .sv-sube-slide-table-wrap {
        width: 100%;
        overflow-x: auto;
    }
    .sv-sube-mobile-slider .sv-sube-slide-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.75rem;
    }
    .sv-sube-mobile-slider .sv-sube-slide-table th,
    .sv-sube-mobile-slider .sv-sube-slide-table td {
        text-align: left;
        padding: 0.5rem 0.4rem;
        border-bottom: 1px solid #000;
        vertical-align: top;
    }
    .sv-sube-mobile-slider .sv-sube-slide-table th {
        font-weight: 400;
        color: #000;
    }
    .sv-sube-mobile-slider .sv-sube-slide-table td {
        color: #000;
        line-height: 100%;
    }
    .sv-sube-mobile-slider .sv-sube-slide-table .sv-sube-price {
        font-weight: 600;
    }
    /* Remove last row border (slides 3 & 4) */
    .sv-sube-mobile-slider .sv-sube-slide-table tbody tr:last-child td {
        border-bottom: none;
    }
    /* Slide 4: black bg table */
    .sv-sube-mobile-slider .sv-sube-slide-table-dark th,
    .sv-sube-mobile-slider .sv-sube-slide-table-dark td {
        border-bottom-color: rgba(255, 255, 255, 0.5);
        color: #fff;
    }
    .sv-sube-mobile-slider .sv-sube-slide-table-dark th {
        color: #fff;
    }
    .sv-sube-mobile-slider .cat-img2-slide-light .cat-img2-slide-content {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: flex-start;
    }
    .sv-sube-mobile-slider .sv-sube-slide-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 0.75rem 0;
        color: #333;
        text-align: left;
    }
    .sv-sube-mobile-slider .sv-sube-slide-lead {
        font-size: 1rem;
        line-height: 1.5;
        margin: 0;
        color: #333;
    }
    .sv-sube-mobile-slider .sv-sube-slide-text {
        font-size: 0.85rem;
        line-height: 1.5;
        margin: 0;
        color: #333;
    }
    .sv-sube-mobile-slider .sv-sube-slide-cta {
        align-items: center;
        justify-content: center;
    }
    .sv-sube-mobile-slider .cat-img2-slider-dots {
        position: absolute;
        bottom: 0.5rem;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 0.4rem;
        z-index: 2;
        pointer-events: none;
    }
    .sv-sube-mobile-slider .cat-img2-slider-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.7);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.2s;
        pointer-events: auto;
    }
    .sv-sube-mobile-slider .cat-img2-slider-dots .dot.active {
        background: #fff;
    }
    .sv-sube-mobile-slider .cat-img2-slider-dots.dots-on-light {
        background: rgba(255, 255, 255, 0.6);
    }
    .sv-sube-mobile-slider .cat-img2-slider-dots.dots-on-light .dot {
        background: rgba(0, 0, 0, 0.4);
    }
    .sv-sube-mobile-slider .cat-img2-slider-dots.dots-on-light .dot.active {
        background: #000;
    }
}

@media (min-width: 769px) {
    .sv-sube-mobile-slider {
        display: none !important;
    }
}

@media (max-width: 767px) {
    :root {
        --sv-padding-x: 16px;
    }

    .sv_section {
        padding: 32px 0;
    }

    section.sv_section.sv_section_gray .sv_col.sv_col_content,
    section.sv_section.sv_section_white .sv_col.sv_col_content {
        padding: 20px var(--sv-padding-x);
    }

    .sv_col_title {
        padding-top: 20px;
    }

    .sv_article_title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .sv_article_lead {
        font-size: 16px;
    }

    .sv_section_title {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .sv_article_body {
        font-size: 15px;
    }

    .sv_btn_primary {
        padding: 10px 20px;
        font-size: 13px;
    }

    .sv_btn_group {
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;
    }

    .sv_btn_group .sv_btn_primary {
        display: flex;
        justify-content: center;
    }

    .sv_section_sube {
        padding: 32px 0;
    }

    .sv_col_img_fill {
        min-height: 200px;
    }

    .sv_section_img_fill {
        min-height: 200px;
    }

    .sv_face_section {
        padding: 32px 0 40px;
    }

    .sv_face_row {
        gap: 16px;
        margin-bottom: 20px;
    }

    .sv_face_card_content {
        padding: 12px;
    }

    .sv_face_glasses_bar {
        padding: 12px;
        gap: 8px 12px;
    }

    .sv_glass_icon {
        width: 40px;
        height: 20px;
    }

    .sv_face_glass_item span {
        font-size: 12px;
    }

    .sv_face_title {
        font-size: 18px;
    }

    .sv_face_char,
    .sv_face_ideal_block li {
        font-size: 14px;
    }

    .sv_face_ideal_block .sv_face_ideal {
        font-size: 16px;
    }

    .sv_face_img {
        max-height: 120px;
    }

    /* Section 5 mobile slider - smaller on very small screens */
    .sv-sube-mobile-slider .cat-img2-slider-viewport {
        min-height: 200px;
    }
    .sv-sube-mobile-slider .sv-sube-slider-track {
        min-height: 200px;
    }
    .sv-sube-mobile-slider .cat-img2-slide {
        min-height: 200px;
        height: 200px;
    }
    .sv-sube-mobile-slider .sv-sube-slide-title {
        font-size: 1.1rem;
    }
}