/*
Theme Name: SoniaTheme
Author: Antigravity
Description: Tema E-commerce liviano y minimalista para Sonia Busquets.
Version: 1.1.47
*/

:root {
    /* Colors */
    --color-primary: #DBBA76;
    --color-secondary: #B2C3B3;
    --color-accent: #FFCD62;
    --color-text-title: #000000;
    --color-text-body: #414141;
    --color-bg-base: #F5F5F1;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Fonts */
    --font-title: 'Barlow Condensed', sans-serif;
    --font-body: 'Onest', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Layout */
    --container-width: 1200px;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg-base);
    color: var(--color-text-body);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    color: var(--color-text-title);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

strong {
    font-weight: 700;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
    width: 100%;
}

/* Spacing Utilities */
.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.btn,
.btn-gold-pill,
.btn-white-pill,
.btn-black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn:hover,
.btn-gold-pill:hover,
.btn-white-pill:hover {
    transform: translateY(-3px);
    filter: brightness(0.95);
}

.btn-gold-pill {
    background-color: #DBBA76;
    color: #000000;
    border-color: #000000;
}

.btn-gold-pill:hover {
    background-color: #000000;
    color: #DBBA76;
    border-color: #000000;
    filter: none;
}

.btn-white-pill {
    background-color: #FFFFFF;
    color: #000000;
}

.btn-white-pill:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    filter: none;
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-text-title);
}

/* Standardize Typography for Home Sections */
.ls-9 {
    letter-spacing: 9px !important;
}

.home section h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 5vw, 53px);
    line-height: 1.1;
    letter-spacing: 2.12px;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.home section p {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 2vw, 24px);
    line-height: 1.5;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: var(--spacing-sm);
}

/* Sections General */
section {
    padding: var(--spacing-xl) 0;
}

/* Hero Section */
.hero-section {
    position: relative;
    display: block;
    /* Let image dictate layout */
    min-height: auto;
    height: auto;
    padding: 0;
    /* Removing padding as requested */
    overflow: hidden;
    color: var(--color-white);
}

/* Ensure container allows text over image */
.hero-content {
    position: absolute;
    /* Overlay */
    top: 59%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Precise centering */
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    /* Or var(--container-width) */
    padding: 0 20px;
    /* Horizontal padding constraints */
    box-sizing: border-box;
    color: #ffffff;
}

.hero-content .hero-main-title {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 42px;
    /* Fallback */
    /* User requested specific: font: normal normal 300 42px/47px Onest; */
    font: normal normal 300 clamp(28px, 4vw, 42px)/1.15 'Onest', sans-serif;
    /* kept clamp but max 42px as requested roughly or just use clamp max 47px as before? 
       User said: "font: normal normal 300 42px/47px Onest". 
       I will respect the 42px request but keep clamp for mobile. */
    font-size: clamp(28px, 4vw, 42px);
    /* As requested */
    letter-spacing: -0.42px;
    margin-bottom: var(--spacing-sm);
    color: #FFFFFF !important;
    /* Force white */
    max-width: 550px;
    text-transform: uppercase;
    /* Standardized */
}

@media (min-width: 992px) and (max-width: 1400px) {
    .hero-content .hero-main-title {
        font-size: clamp(18px, 3vw, 30px);
        line-height: 1.2;
    }

    .hero-content .hero-description {
        font-size: clamp(14px, 2vw, 18px);
    }
}

.hero-content .hero-main-title strong {
    font-weight: 700;
}

.hero-content .hero-description {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: clamp(18px, 2.5vw, 24px);
    line-height: 1.4;
    letter-spacing: -0.24px;
    color: #FFFFFF !important;
    margin-bottom: var(--spacing-sm);
    max-width: 530px;
}

/* Condensed Hero for Product Pages */
.hero-product-condensed {
    min-height: 40vh !important;
    /* Start with 40-50% of viewport */
    height: 400px;
    /* Fallback/Fixed height */
    display: flex;
    align-items: center;
}

.hero-product-condensed .hero-image,
.hero-product-condensed .hero-image img {
    height: 100%;
    object-fit: cover;
}

.hero-product-condensed .hero-content {
    top: 50%;
    /* Center vertically */
}

/* Classic Product Layout */
.product-layout-classic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    align-items: start;
}

.product-gallery-column {
    position: relative;
}

.product-info-column {
    padding-top: 10px;
}

.product-price-large {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #DBBA76;
    /* Gold */
    margin-bottom: 20px;
    display: block;
}

.product-short-description {
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #414141;
    margin-bottom: 30px;
}

.product-meta-small {
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

@media (max-width: 991px) {
    .product-layout-classic {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-product-condensed {
        min-height: 30vh !important;
        height: 300px;
    }
}

.hero-signature {
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 23px;
    line-height: 31px;
    /* As requested: 23px/31px */
    letter-spacing: 3.82px;
    color: #FFFFFF !important;
    /* Force white */
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

/* Full Width Image */
.hero-image {
    position: relative;
    /* Takes space in flow */
    width: 100%;
    height: auto;
    z-index: 1;
    display: block;
}

.hero-image img {
    width: 100%;
    height: auto;
    /* Natural height */
    display: block;
    object-fit: cover;
}

span.hero-label-program {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 300;
    line-height: 1.2;
    color: #ffffff;
    display: block;
    /* Ensure it behaves like a label */
    margin-bottom: 10px;
}

.program-title-wrapper-hero h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 5vw, 53px);
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

/* Hero Program Watermark Wrapper */
.program-title-wrapper-hero {
    position: relative;
    display: inline-block;
    /* Or block, context dependent */
    text-align: left;
    margin-bottom: 20px;
}

/* Program Title Image Replacement */
.program-title-image {
    width: 100%;
    max-width: 348px;
    height: auto;
    max-height: 174px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px auto;
    /* Centered with bottom margin */
}

/* Hero Program Title Image Replacement */
.program-hero-title-image {
    width: 100%;
    max-width: 486px;
    height: auto;
    max-height: 242px;
    object-fit: contain;
    display: block;
    /* Align left as per previous text-align: left in wrapper? 
       Wrapper .program-title-wrapper-hero has text-align: left.
       So no margin: 0 auto needed unless requested.
       User didn't specify alignment, but context is Hero.
       Let's keep it left aligned (default) or check wrapper.
       Wrapper is 'text-align: left'. So it will be left.
    */
}

.program-watermark-center-hero {
    position: absolute;
    top: 36%;
    left: 47%;
    transform: translate(-38%, -50%);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(80px, 15vw, 260px);
    line-height: 1;
    color: rgba(255, 255, 255, 0.25);
    pointer-events: none;
    z-index: -1;
}

.ls-9 {
    letter-spacing: 9px;
}

.site-header {
    /* Existing: top: 78px (desktop) */
    padding-top: 60px;
    /* Requested spacing */
}

/* Video Section */
.video-section {
    background-color: var(--color-secondary);
    /* #B2C3B3 */
    padding: var(--spacing-xl) 0;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

/* Desktop: 2 Columns */
@media (min-width: 992px) {
    .video-grid {
        grid-template-columns: 1.2fr 0.8fr;
        /* Adjust ratio as per visual weight, video looks wider */
        gap: 80px;
        /* Increased gap */
    }
}

.video-wrapper {
    position: relative;
    width: 100%;
    /* User reported 652.8px x 423.86px -> ~1.54 aspect ratio */
    aspect-ratio: 1.54 / 1;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Removed old .video-facade as it is no longer in HTML */

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.video-facade:hover img {
    opacity: 0.7;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: #FDFEF5;
    /* Light creamy white */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.video-facade:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Video Content Typography - relying on global standards */
.video-content p {
    max-width: 400px;
}

/* Mobile Responsiveness for Video Typography */
@media (max-width: 768px) {
    .home section h2 {
        font-size: 36px;
        line-height: 1.1;
    }

    .home section p {
        font-size: 18px;
        line-height: 1.5;
    }
}

/* Mobile Responsiveness for Video Typography */
@media (max-width: 768px) {
    .video-content h2 {
        font-size: 36px;
        line-height: 1.1;
    }

    .video-content p {
        font-size: 18px;
        line-height: 1.5;
    }
}

/* Philosophy Section */
.philosophy-section {
    background-color: #FFFFFF;
    position: relative;
    /* For transition text positioning */
    padding-bottom: 0;
    padding-top: 0;
    /* Let image hit bottom or overlap */
    overflow: hidden;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (min-width: 992px) {
    .philosophy-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.philosophy-content {
    padding: var(--spacing-lg) 0;
    max-width: 500px;
    /* Limit text width */
}

.philosophy-content h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 5vw, 50px);
    /* Adjusted based on design */
    line-height: 1.1;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.philosophy-content p {
    max-width: 400px;
}

.philosophy-image img {
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .philosophy-image img {
        width: 100%;
        height: auto;
        border-radius: 0;
        max-width: 150%;
        width: 150%;
    }
}


.btn-gold-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #DBBA76;
    color: #000000;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 12px 30px;
    border-radius: 50px;
    border: 1px solid #000000;
    /* Subtle border depicted? Or maybe none. Let's assume solid. */
    transition: all 0.3s ease;
}

.btn-gold-pill:hover {
    background-color: #000000;
    color: #DBBA76;
    border-color: #000000;
}

/* Transition Text "SONIA BUSQUETS" */
.transition-text-container {
    position: absolute;
    bottom: -20px;
    /* Adjust relative to overlapping sections */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    /* Above both sections ideally, or sandwiched */
    pointer-events: none;
    overflow: hidden;
}

.transition-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(50px, 10vw, 130px);
    /* Massive text */
    line-height: .8;
    color: #DBBA76;
    /* Gold color */
    text-transform: uppercase;
    letter-spacing: 10px;
    white-space: nowrap;

    /* In design it bridges white and gold sections. 
       If it is in Philosophy (white) section, bottom part needs to overlap Program (gold) 
       or Program needs to be negative margin top? 
       Or text has mix-blend-mode?
       Let's try absolute positioning bridging the gap.
    */
}

@media (max-width: 991px) {
    .transition-text {
        font-size: 50px;
        /* Responsive size */
        bottom: -20px;
    }

    .transition-text-container {
        bottom: -20px;
    }
}

/* Program Section */
.program-section {
    background-color: #DBBA76;
    color: #000000;
    position: relative;
    padding: 10rem 0;
    /* Huge vertical spacing as requested */
    text-align: center;
    overflow: hidden;
    margin-top: 0;
}

.program-watermark-center {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(80px, 15vw, 220px);
    line-height: 1;
    color: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    z-index: -1;
}

.program-watermark-right {
    position: absolute;
    right: -5%;
    bottom: -110px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(200px, 20vw, 700px);
    line-height: 1;
    color: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    z-index: 0;
}

@media (max-width:991px) {
    .program-watermark-right {
        font-size: 500px;
    }
}

.program-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

/* Wrapper to align Label start of Title while centering block */
.program-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align inner items to left */
    text-align: left;
    margin-bottom: var(--spacing-sm);
    position: relative;
}

.program-label {
    font-family: 'Onest', sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 0;
    display: block;
}


.program-section p {
    max-width: 570px;
}

/* Button with black border */
.btn-white-pill {
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #000000 !important;
    /* Force border */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.btn-white-pill:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.arrow-icon {
    transition: transform 0.3s ease;
}

.btn-gold-pill:hover .arrow-icon,
.btn-white-pill:hover .arrow-icon {
    transform: translateX(3px);
}

/* Button with green background - same style as white pill */
.btn-green-pill {
    background-color: var(--color-secondary);
    /* #B2C3B3 */
    color: #000000;
    border: 1px solid #000000 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.btn-green-pill:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
    filter: brightness(0.95);
}

/* Sessions Section */
.sessions-section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #F9F9F9;
    /* Slight off-white like screenshot often allows */
}

.sessions-image-side {
    width: 100%;
    position: relative;
    height: 400px;
}

.sessions-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sessions-content-side {
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Left align text */
    text-align: left;
}


.sessions-content-side p {
    max-width: 470px;
}

@media (max-width: 991px) {
    .sessions-inverted {
        display: flex;
        flex-direction: column;
    }

    .sessions-inverted .sessions-image-side {
        order: -1;
        /* Forzar que la imagen vaya primero en mobile */
    }
}

@media (min-width: 992px) {
    .sessions-section {
        flex-direction: row;
        align-items: stretch;
    }

    .sessions-image-side {
        width: 50%;
        height: auto;
        min-height: 600px;
        aspect-ratio: 1/1;
        /* Standardize square aspect ratio */
    }

    .sessions-image-side img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .sessions-content-side {
        width: 50%;
        padding: var(--spacing-xl) 4rem;
        /* Adjusted padding for 50/50 split */
    }
}

/* Testimonials Section */
.testimonials-section {
    background-color: var(--color-secondary);
}

.testimonials-slider {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.testimonials-slider::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.testimonial-card {
    flex: 0 0 300px;
    scroll-snap-align: center;
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: 8px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
}

/* Animations (.reveal-up) */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Header & Navigation */
.site-header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    /* User requested 60px air above menu. 
       If Topbar is 78px, and site-header top is adjusted in media query.
       So we add padding here.
    */
    padding: 60px 0 20px 0;
    background-color: transparent;
    /* Overlay style per screenshot */
}

/* Ensure header content is legible on light backgrounds if needed, 
   but user requested WHITE text, so assuming dark background behind header. 
   If Hero is 50/50, we might need a workaround, but strictly following font specs for now. */

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding a {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    /* Assuming brand should also be white to match menu? Override if needed. */
}

.custom-logo {
    width: 127px;
    height: 105px;
    object-fit: contain;
    /* Ensure aspect ratio is kept inside the box */
    display: block;
}

/* Menu Principal */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    font-family: 'Onest', sans-serif;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    /* Medium */
    letter-spacing: 0.65px;
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    /* Important for pseudo-element */
    padding-bottom: 5px;
    /* Space for line */
    transition: color 0.3s ease;
}

/* Menu Hover/Active - Modern Left-to-Right Underline */
.main-navigation a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    /* Thickness */
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;
    /* White line */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item>a::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.main-navigation a:hover,
.main-navigation .current-menu-item>a {
    /* No font-weight shift to prevent jumping */
    opacity: 1;
}

/* Submenu Dropdown */
.main-navigation li {
    position: relative;
}

.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: -10px;
    background: #FFFFFF;
    padding: 15px;
    display: none;
    flex-direction: column;
    gap: 12px;
    min-width: 180px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    margin-top: 0px;
}

.main-navigation li:hover .sub-menu {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.main-navigation .sub-menu a {
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0px;
    color: #000000;
    text-decoration: none;
}

.main-navigation .sub-menu a:hover {
    text-decoration: underline;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Testimonials Section */
/* Testimonials Section */
.testimonials-section {
    background-color: var(--color-secondary);
    padding: var(--spacing-xl) 0;
    text-align: center;
    overflow: hidden;
    /* Ensure section doesn't weirdly scroll */
}

.testimonials-section h2 {
    text-align: center;
    font-family: 'Onest', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0px !important;
    text-transform: initial !important;
    color: #000000 !important;
    margin-bottom: 60px;
}

.testimonials-slider {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden !important;
    /* Force hide overflow */
    padding-bottom: 60px;
    /* Space for dots */
    width: 100%;
}

.testimonials-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* Smooth slide */
    gap: 30px;
    width: 100%;
    will-change: transform;
    padding: 30px 6px;
}

.testimonial-card {
    background: #FFFFFF;
    padding: 60px 40px 40px 40px;
    /* Top padding for quote space */
    border-radius: 0;
    text-align: left;
    position: relative;
    flex: 0 0 100%;
    /* Mobile default */
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    /* Crucial */
    height: max-content;
}

/* Quote Icon */
.testimonial-quote-icon {
    font-family: 'Onest', sans-serif;
    font-size: 140px;
    line-height: 1;
    color: #FFCD62;
    position: absolute;
    top: -30px;
    left: -15px;
    z-index: 10;
}

/* Specific Content Styling */
.testimonial-author-title {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: clamp(20px, 2.5vw, 26px);
    line-height: 1.2;
    color: #222222;
    margin-bottom: 20px;
    position: relative;
    z-index: 5;
}

.testimonial-author-title strong {
    font-weight: 700;
}

.testimonial-text {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #646464;
    letter-spacing: 0px;
    position: relative;
    z-index: 5;

    /* Clamping Logic */
    max-height: 110px;
    /* Approx 4-5 lines */
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.testimonial-text.expanded {
    max-height: 1000px;
    /* Arbitrary large height for transition */
}

.read-more-btn {
    background: transparent;
    border: none;
    color: #DBBB76;
    /* Gold accent */
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
    padding: 0;
    text-transform: uppercase;
    display: none;
    /* Hidden by default, shown via JS if needed */
}

.read-more-btn:hover {
    text-decoration: underline;
}

/* Slider Pagination (Dots) */
.slider-pagination {
    display: flex;
    justify-content: center;
    gap: 15px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    padding: 10px 0;
}

.slider-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #000000;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active {
    background: #000000;
}

@media (min-width: 992px) {
    .testimonial-card {
        flex: 0 0 calc(50% - 15px);
        /* Perfectly split 2 cards with gap */
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #000000;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.btn-whatsapp:hover {
    transform: scale(1.1);
}

.btn-whatsapp svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

.btn-hablemos {
    background-color: #DBBB76;
    /* User requested specific color */
    color: #ffffff;
    border-radius: 50px;
    /* Pill shape */
    padding: 8px 30px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.3px;
    border: 2px solid #ffffff;
    /* White border per screenshot look? Or maybe transparent border */
    /* Screenshot shows a white ring OUTSIDE or INSIDE? Looks like a pill with white text. 
       Let's stick to the color requested. If bordered, we can add it. 
       Actually, screenshot 2 shows a white border around the pill?
       "bg del hablemos #DBBB76" -> The user mentioned BG. 
       Let's add a white border just in case to match the "pill" look if it's an outline button filled.
    */
    border: 2px solid #ffffff;
}


/* Top Bar */
.book-icon {
    height: 94px !important;
    /* Force height to override potential Woo styles */
    width: auto !important;
    max-width: none !important;
    /* Prevent 100% limitation if needed */
    display: block;
}

.top-bar {
    background-color: #CAC4B0;
    height: 98px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1001;
    /* Above header */
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 920px;
    width: 100%;
}

.top-bar-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-bar-image {
    flex-shrink: 0;
    /* Prevent shrinking */
}

.top-bar-text {
    text-align: left;
    font-family: 'Onest', sans-serif;
    font-weight: 500;
    /* Medium */
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0px;
    color: #414141;
    text-transform: uppercase;
}

.btn-topbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Onest', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 1.3px;
    color: #414141;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid #ffffff;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: #ffffff;
    color: #000000;
}

.btn-topbar:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

.btn-topbar svg {
    margin-bottom: 2px;
}

/* Default Menu Toggle (Hidden on Desktop) */
.menu-toggle {
    display: none;
}

/* Header Position Adjustment for Topbar */
@media (min-width: 992px) {
    .site-header {
        top: 58px;
        /* Push header down by topbar height on desktop */
    }
}

@media (max-width: 991px) {
    .top-bar {
        height: auto;
        padding: 15px 0;
    }

    .top-bar-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .top-bar-content {
        flex-direction: column;
        gap: 10px;
    }

    .top-bar-text {
        text-align: center;
        font-size: 13px;
    }

    /* Mobile Header Position - Assuming sticky or relative behavior changes */
    .site-header {
        position: relative;
        /* Or keep absolute if overlay wanted on mobile too */
        /* If absolute, we might need top: auto or calculation. 
           For now, let's keep it absolute but push it down if it's overlaying. 
           Actually, on mobile, often the topbar scrolls away. 
           Let's leave site-header absolute top: 0 relative to logical start?
           No, if Topbar is in flow, and Header is absolute to body, Header is at 0.
           We need Header to be below Topbar on mobile too if it's overlaying content.
           Let's use JS or just position relative for header on mobile? 
           If designs usually have transparent header on mobile hero too.
        */
        top: 0;
        position: relative;
        /* Change to relative on mobile to avoid overlap issues with topbar height variance */
        background-color: var(--color-black);
        /* Mobile header usually needs background if relative */
    }

    /* If we want transparent overlay on mobile too, we need JS to calculate topbar height.
       For simplicity and robustness, making it relative on mobile is safer unless requested otherwise.
       However, user said "Minimalist light weight".
       Let's try to keep it overlay if possible. 
       If Topbar is static, Header absolute. Header covers Topbar? No, Topbar pushes 'body' content? 
       Actually no, absolute elements are removed from flow.
       So Topbar is at top (block). Next element is Hero. Hero starts at Topbar bottom.
       Header (absolute) starts at TOP:0 of Body (so 0). 
       So Header overlaps Topbar.
       We need Header Top = Topbar Height.
       On mobile, Topbar Height varies.
       Let's stick to `position: relative` for Header on Mobile, giving it a background color or transparent provided Hero is below.
       If Hero is below Header (in valid HTML structure), then `position: relative` works fine.
       But original design was overlay. Hero is -header-height margin?
       Let's assume the previous code `hero-section { padding-top: 0; }` meant overlay.
       I'll use `position: relative` for mobile header for now to ensure usability.
    */
    .site-header {
        position: relative;
        background-color: #1a1a1a;
        /* Dark background for mobile header */
        padding: 10px 0;
    }

    .header-container {
        padding: 0 var(--spacing-sm);
    }

    /* Mobile Branding */
    .site-branding a {
        font-size: 1.2rem;
        /* Reduce size */
        white-space: nowrap;
    }

    /* Hamburger Toggle */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1100;
        padding: 0;
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #FFFFFF;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* Mobile Navigation */
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #1a1a1a;
        padding: 20px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        /* Increased z-index */
        text-align: center;
    }

    .main-navigation.toggled {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
        /* Removing gap to control with padding */
    }

    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-navigation li:last-child {
        border-bottom: none;
    }

    .main-navigation a {
        font-size: 16px;
        display: block;
        padding: 15px;
        color: #ffffff;
    }

    /* Mobile Submenu */
    .main-navigation .sub-menu {
        position: static;
        /* Stack naturally on mobile */
        display: none;
        /* Hidden strictly by default */
        background-color: #2a2a2a;
        /* Slightly lighter bg */
        box-shadow: none;
        width: 100%;
        padding: 0;
        min-width: unset;
        animation: none;
        /* Remove desktop animation */
    }

    /* Submenu Toggle Logic usually needs JS or :focus-within. 
       For simplicity without extra JS, let's allow it to be visible if parent active or hover? 
       Hover doesn't work well on touch. 
       Let's make them always visible for now on mobile or indent them?
       Better: just show them indented.
    */
    .main-navigation li:hover .sub-menu,
    .main-navigation li.focus>.sub-menu,
    .main-navigation li.menu-item-has-children:hover>.sub-menu {
        display: block;
        /* Fallback interaction */
    }

    /* Better approach for simple mobile menu: Show submenus indented always or on interaction */
    .main-navigation .sub-menu a {
        font-size: 14px;
        padding: 12px 15px 12px 30px;
        /* Indent */
        color: #cccccc;
    }

    /* WhatsApp Button Clean Hover */
    .btn-whatsapp {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        /* Adjust size */
        height: 45px;
        background-color: #000000;
        border-radius: 50%;
        transition: background-color 0.3s ease;
        transform: none !important;
        /* Disable any existing zoom/shift */
        margin-right: 15px;
        /* Spacing from 'Hablemos' btn */
    }

    .btn-whatsapp svg {
        width: 24px;
        height: 24px;
        fill: #ffffff;
        transition: fill 0.3s ease;
    }

    .btn-whatsapp:hover {
        background-color: #ffffff;
        transform: none !important;
        /* Ensure no movement */
    }

    .btn-whatsapp:hover svg {
        fill: #000000;
    }

    /* Header Actions Mobile */
    .header-actions {
        display: flex;
        /* Default desktop */
        align-items: center;
    }
}

@media (max-width: 991px) {
    .header-actions {
        display: none;
        /* Hide desktop actions on mobile if needed, or adjust */
    }

    /* Hero Typography Mobile Adjustments */
    .hero-content .hero-main-title {
        font-size: 16px !important;
        line-height: 1.2 !important;
        max-width: 230px;
    }

    .hero-content p {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .hero-signature {
        font-size: 18px !important;
        letter-spacing: 2px !important;
    }

    .btn-hero {
        width: 100% !important;
        /* Full width btn on mobile */
        max-width: 300px;
        /* But keep max */
    }

    .hero-content .btn-hero {
        margin-top: 20px;
        font-size: 12px;
        height: 30px;
        max-width: 220px;
        letter-spacing: 1px;
        padding: 0 10px;
    }

    .hero-content p,
    .hero-signature {
        display: none !important;
        /* Hide paragraph and signature on mobile */
    }
}

/* End Mobile Styles */

/* Hero Button Custom Style (Global previously added, ensure it stays) */
.btn-hero {
    background-color: #FFFFFF;
    color: #000000;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: 1px solid #FFFFFF;
    /* Added border for hover state swap */
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: var(--spacing-sm);
}

.btn-hero:hover {
    transform: translateY(-3px);
    background-color: #000000;
    /* Swap to black */
    color: #FFFFFF;
    /* Swap to white */
    border-color: #000000;
}




/* Hide toggle on desktop */
.menu-toggle {
    display: none;
}


@media (max-width: 991px) {

    /* Ensure toggle is visible on mobile/tablet */
    .menu-toggle {
        display: flex;
        /* Flex set in the rule above within media query block */
    }
}

/* ------------------------------------------------------------------------- *
 *  Footer Styles
 * ------------------------------------------------------------------------- */
ul.footer-links {
    list-style: none;
}

.site-footer {
    background-color: #000000;
    color: #FFFFFF;
    padding: 80px 0 40px 0;
    /* Vertical spacing */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    /* Logo column wider */
    gap: 40px;
    margin-bottom: 60px;
}

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

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Typography */
.footer-logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: 2px;
    color: #FFFFFF;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.copyright-text {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: normal;
    color: #FFFFFF;
    letter-spacing: 0px;
    margin-top: 5px;
}

.footer-title {
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    /* Normal */
    font-size: 18px;
    line-height: 43px;
    color: #FFFFFF;
    letter-spacing: 0px;
    margin-bottom: 10px;
    text-align: left;
}

.footer-text p,
.footer-text p a,
.footer-links li a {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.5;
    color: #FFFFFF;
    letter-spacing: 0px;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: block;
    /* Ensure transform works */
}

.footer-text p a:hover,
.footer-links li a:hover {
    color: #DBBA76;
    /* Accent Gold */
    transform: translateX(5px);
    /* Subtle shift */
}


.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin: 0 0 14px 0;
}

/* Divider */
.footer-divider {
    height: 1px;
    background-color: #FFFFFF;
    width: 100%;
    margin-bottom: 40px;
}

/* Social Media */
.footer-social {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.footer-social a {
    color: #FFFFFF;
    transition: transform 0.3s ease;
}

.footer-social a:hover {
    transform: translateY(-3px);
}

/* Responsive Overrides */
@media (max-width: 576px) {

    .footer-title,
    .footer-text p,
    .footer-links li a {
        text-align: center;
    }

    .footer-col {
        margin-bottom: 30px;
    }
}

/* ------------------------------------------------------------------------- *
 *  Acompañamientos Page
 * ------------------------------------------------------------------------- */

.program-details-section {
    background-color: #ffffff;
    padding-bottom: 150px;
    /* Space for watermark */
}

.program-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

/* Header Titles */
.program-subtitle-upper {
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    /* normal */
    font-style: normal;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 2.2px;
    color: #000000;
    text-transform: uppercase;
    max-width: 675px;
    margin: 0 auto 10px auto;
    display: block;
}

.program-main-title {
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    /* normal */
    font-style: normal;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.3;
    color: #000000;
    max-width: 969px;
    margin: 0 auto 40px auto;
    text-transform: none;
}

/* Accordion */
.accordion-container {
    max-width: 900px;
    margin: 0 auto;
    border: none;
    border-radius: 0;
}

.accordion-item {
    background-color: #f5f5f1;
    border: 1px solid #CCCCCC;
    margin-bottom: 20px;
}

.accordion-item:last-child {
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 0;
}

.accordion-header {
    width: 100%;
    padding: 20px 30px;
    background: transparent;
    border: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-size: 18px;
    color: #000000;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: transparent;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: transparent;
}

.accordion-body {
    padding: 0 30px 30px 30px;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    text-align: left;
}

.accordion-body p {
    margin-bottom: 15px;
}

/* Icons */
.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

/* Link Button in Accordion Section */
.btn-gold-pill .arrow {
    margin-left: 8px;
}

.accordion-cta-container {
    margin-top: 60px;
    /* Specific 60px spacing */
    text-align: center;
}

/* Info Bar Section */
.info-bar-section {
    background-color: #B2C3B3;
    /* Green secondary */
    padding: 40px 0;
    margin-top: 0;
    position: relative;
    /* margin-top: 100px removed to fix grey gap */
}

/* Watermark styles */
.info-bar-watermark {
    position: absolute;
    top: -95px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(60px, 10vw, 140px);
    letter-spacing: 10px;
    line-height: 0.8;
    color: #B2C3B3;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    width: 100%;
    text-align: center;
}

.info-bar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr;
    gap: 30px;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 950px;
    margin: 0 auto;
    max-width: 100%;
}

.info-col {
    text-align: left;
}

.info-col.col-btn {
    text-align: right;
}

.info-title {
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.info-text {
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    color: #333333;
    margin: 0;
}

@media (max-width: 991px) {
    .info-bar-grid {
        grid-template-columns: 1fr 1fr;
    }

    .info-bar-watermark {
        font-size: 100px;
        top: -60px;
    }
}

@media (max-width: 768px) {
    .info-bar-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }

    .info-col,
    .info-col.col-btn {
        text-align: center;
    }

    .info-bar-watermark {
        font-size: 50px;
        top: -40px;
    }
}

/* ------------------------------------------------------------------------- *
 *  WooCommerce Specifics (Cart & Checkout)
 * ------------------------------------------------------------------------- */
.woocommerce-cart .site-header,
.woocommerce-checkout .site-header {
    margin-bottom: 40px !important;
}

.woocommerce-cart #primary,
.woocommerce-checkout #primary,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
    margin-top: 40px !important;
}

/* ------------------------------------------------------------------------- *
 *  Checkout Button (Place Order)
 * ------------------------------------------------------------------------- */
.wc-block-components-checkout-place-order-button {
    background-color: #DBBA76 !important;
    color: #000000 !important;
    font-family: 'Onest', sans-serif !important;
    font-weight: 700 !important;
    /* Slightly larger for main action */
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    padding: 15px 20px !important;
    border-radius: 50px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    /* Full width in block usually looks good */
}

.wc-block-components-checkout-place-order-button:hover {
    background-color: #C9A865 !important;
    /* Darker gold */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.wc-block-components-checkout-return-to-cart-button {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: 'Onest', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    padding: 15px 30px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease !important;
    margin-right: 20px;
    /* Space between buttons if they sit side-by-side or stacked */
}

.wc-block-components-checkout-return-to-cart-button svg {
    fill: #ffffff !important;
    /* Ensure icon is white */
    width: 20px;
    height: 20px;
}

.wc-block-components-checkout-return-to-cart-button:hover {
    background-color: #333333 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------------------------- *
 *  Quien Soy Page
 * ------------------------------------------------------------------------- */
.bio-section {
    background-color: var(--color-bg-base);
    /* #F5F5F1 */
    padding: var(--spacing-xl) 0;
}

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

.bio-content {
    max-width: 550px;
    /* Improve readability */
}

.bio-intro {
    font-size: 16px;
    line-height: 1.6;
}

.bio-highlight {
    margin-top: 40px;
    margin-bottom: 40px;
}

.bio-label {
    font-family: 'Onest', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #000000;
}

.bio-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 0;
}

.bio-image-wrapper {
    position: relative;
    text-align: right;
    /* To align image if not full width, but usually width 100% */
}

.bio-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 450px;
    /* Limit image width to look balanced like in design */
    margin-left: auto;
    /* Right align if smaller */
}

@media (max-width: 991px) {
    .bio-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bio-content {
        max-width: 100%;
        order: 1;
    }

    .bio-image-wrapper {
        order: 2;
        text-align: center;
    }

    .bio-image {
        margin: 0 auto;
    }
}

/* Estudios Section (Carousel) */
.studies-section {
    background-color: #B2C3B4;
    /* Specific green requested */
    padding: var(--spacing-xl) 0;
    color: #000000;
}

.studies-intro {
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 18px;
    line-height: 1.5;
    font-family: 'Onest', sans-serif;
    text-align: center;
}

/* Reusing Slider Structure from Testimonials but applying specific styles */
.studies-slider {
    position: relative;
    overflow: hidden;
    padding-bottom: 40px;
    /* Space for dots */
}

/* Slider Logic Styles (Generic) */
.testimonials-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    will-change: transform;
}

/* Studies Card */
.study-card {
    flex: 0 0 100%;
    /* Mobile 100% */
    padding: 20px;
    box-sizing: border-box;
    /* No bg, transparent as per design screenshot? Actually looks transparent/same as bg */
    text-align: left;
}

@media (min-width: 992px) {
    .study-card {
        flex: 0 0 50%;
        /* 2 cards per view */
        padding: 0 40px 0 0;
        /* Gap between cards */
    }
}

.study-title {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.study-title .arrow-icon {
    font-weight: 300;
    /* Thin arrow */
}

.study-text {
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
    min-height: 80px;
    /* Align footers approximately */
}

.study-footer {
    margin-top: auto;
}

.study-book-label {
    font-size: 14px;
    margin-bottom: 5px;
}

.study-book-title {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

/* Slider Pagination (Dots) for Studies - Reuse Testimonial styles essentially */
/* But dots need to be centered. The logic in JS creates .slider-dot */
.studies-slider .slider-pagination {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.studies-slider .slider-dot {
    width: 14px;
    /* Hollow dot style from screenshot? Looks like circles */
    height: 14px;
    border: 1px solid #000000;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.3s ease;
}

.studies-slider .slider-dot.active {
    background-color: #000000;
}

/* Bonus Books Section */
.books-bonus-section {
    background-color: var(--color-bg-base);
    /* Assuming #F5F5F1 based on screenshot "off-white" */
    padding: 80px 0;
    text-align: center;
}

.bonus-title {
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    /* Normal */
    line-height: 1.3;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: 20px;
}

.bonus-subtitle {
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #646464;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.bonus-books-grid {
    display: flex;
    justify-content: center;
    gap: 100px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.book-item p {
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    /* Bold */
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: 0px;
    color: #000000;
    margin: 0;
}

span.book-author {
    font-weight: 400;
}

.bonus-footer {
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    /* Normal */
    line-height: 1.1;
    letter-spacing: 0px;
    color: #000000;
    margin: 0;
}

@media (max-width: 768px) {
    .bonus-books-grid {
        flex-direction: column;
        gap: 40px;
    }

    .bonus-title,
    .bonus-footer {
        font-size: 32px;
        /* Scale down for mobile */
        line-height: 1.2;
    }
}

/* Final Section (Image | Text) */
.final-section {
    background-color: #ffffff;
    padding: 100px 0;
}

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

.final-image-wrapper {
    /* Image specific alignment if needed */
}

.final-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 500px;
    /* Guessing size */
}

.final-content {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align items to right (btn) */
    max-width: 505px;
    /* Requested max-width */
    margin-left: auto;
    /* Push to right of its column area if space exists */
}

.final-text {
    font-family: 'Onest', sans-serif;
    font-size: 20px;
    /* Looking at screenshot */
    line-height: 1.6;
    color: #000000;
}

/* Button White Pill */
.btn-white-pill {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 50px;
    padding: 12px 30px;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-white-pill:hover {
    background-color: #000000;
    color: #ffffff;
}

@media (max-width: 991px) {
    .final-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .final-content {
        align-items: center;
        /* Center on mobile */
        text-align: center;
        margin: 0 auto;
    }
}

/* Quien Soy Transition (White Watermark on Green) */
.studies-section {
    position: relative;
    /* Ensure watermark positions relative to this section */
}

.studies-section .transition-watermark-white {
    color: #b2c3b4;
    width: 100%;
    text-align: center;
    position: absolute;
    top: -80px;
    /* Pull up to overlap boundary */
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(60px, 10vw, 130px);
    letter-spacing: 5px;
    z-index: 10;
    pointer-events: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    line-height: 0.8;
}

@media (max-width: 768px) {
    .studies-section .transition-watermark-white {
        font-size: 50px;
        top: -30px;
    }
}

/* Hero Sesiones de Coaching */
h1.hero-title-large {
    font-weight: 700;
}



/* Modifier for the watermark in Hero context */
.hero-watermark-bottom {
    position: absolute;
    top: auto !important;
    /* Force override of base class top: -95px */
    bottom: -20px;
    /* Sit at the very bottom line */
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(60px, 10vw, 140px);
    /* Match standard size 140px or 130px */
    color: #ffffff;
    z-index: 1;
    pointer-events: none;
    line-height: 0.8;
    width: 100%;
    text-align: center;
}

@media (max-width: 991px) {
    .hero-watermark-bottom {
        font-size: 50px;
    }
}

@media (max-width: 768px) {
    .hero-title-large {
        font-size: 40px;
    }

    .hero-watermark-bottom {
        font-size: 50px;
        bottom: -10px;
    }
}

/* Coaching Products Grid */
.coaching-products-section {
    background-color: #ffffff;
    padding: 80px 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Mobile: 2 columns as requested */
@media (max-width: 991px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Product Card */
.product-card-wrapper {
    height: 100%;
}

.product-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 4px;
    /* Slight radius */
    overflow: hidden;
    /* For image zoom */
}

/* Hover Effect: Lift and Shadow */
.product-card-link:hover {
    transform: translateY(-5px);
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.05);  Optional shadow */
}

.product-image-container {
    position: relative;
    padding-top: 65%;
    /* Aspect ratio landscape */
    overflow: hidden;
    background-color: #f0f0f0;
    margin-bottom: 25px;
}

.product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card-link:hover .product-img {
    transform: scale(1.05);
    /* Slight zoom on hover */
}

.product-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 15px;
}

.product-excerpt {
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    color: #646464;
    /* Grey description */
    line-height: 1.5;
    margin-bottom: 25px;
    flex-grow: 1;
    /* Push footer down */
}

.product-pricing {
    margin-bottom: 25px;
}

.price-value {
    display: block;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #000000;
    line-height: 1;
    margin-bottom: 5px;
}

.price-label {
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    font-size: 19px;
    color: #000000;
    margin: 0;
}

/* Custom Button for Product ("Ver Más") */
.btn-product-view {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 30px;
    border: 1px solid #000000;
    border-radius: 50px;
    /* Pill */
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    /* Screenshot looks small caps */
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000000;
    background: transparent;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 200px;
    /* Cap width like screenshot */
}

.btn-product-view .arrow-icon {
    width: 18px;
    transition: transform 0.3s ease;
}

.product-card-link:hover .btn-product-view {
    background-color: #000000;
    color: #ffffff;
}

.product-card-link:hover .btn-product-view .arrow-icon {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .product-title {
        font-size: 20px;
    }

    .products-grid {
        gap: 30px 15px;
        /* Tighter horizontal gap on mobile */
    }

    .btn-product-view {
        width: 100%;
        /* Full width button on mobile? */
        max-width: 100%;
        justify-content: center;
        gap: 10px;
    }
}

/* Single Product Styles */
.product-layout-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    /* Sidebar fixed width */
    gap: 60px;
}

@media (max-width: 991px) {
    .product-layout-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 40px;
    }
}

.product-single-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(32px, 5vw, 53px);
    letter-spacing: 2.2px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px;
    line-height: 1.1;
}

/* Meta Row */
.product-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.terapeuta-info {
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.terapeuta-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.terapeuta-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ddd;
}

.terapeuta-text {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 2px;
}

.meta-value {
    font-size: 16px;
    color: #414141;
}

.btn-agendar {
    border: 1px solid #000;
    border-radius: 50px;
    padding: 12px 30px;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #000;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-agendar:hover {
    background: #000;
    color: #fff;
}

/* Main Image */
.product-single-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Tabs */
.product-tabs-header {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 30px;
}

.tab-btn {
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
    color: #999;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-btn.active {
    color: #000;
    border-bottom-color: #000;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.5s;
}

.entry-content {
    font-family: 'Onest', sans-serif;
    color: #414141;
    font-size: 16px;
    line-height: 1.6;
}

/* Sidebar Info Box */
.sidebar-info-box {
    background-color: #798C9F;
    /* Grey-blueish from screenshot */
    padding: 30px;
    margin-bottom: 30px;
    color: #fff;
}

.info-box-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
}

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

.info-list li {
    font-family: 'Onest', sans-serif;
    font-size: 15px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 700;
    margin-right: 5px;
}

/* Sidebar Related */
.sidebar-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 0.88px;
}

.related-mini-card {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    text-decoration: none;
}

.mini-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: #f0f0f0;
}

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

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

.mini-title {
    font-family: 'Onest', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
    margin: 0 0 5px 0;
}

.mini-price {
    font-size: 13px;
    color: #646464;
}

/* Social Circles */
.social-link-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000;
    display: block;
    /* add icons via background or inner svg */
    /* Placeholder */
}

/* Bottom Related */
.bottom-related-title {
    font-family: 'Onest', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Sidebar Social Icons - Custom Override */
.sidebar-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    /* Circle size */
    background-color: #000000;
    /* Black Circle */
    color: #ffffff;
    /* White Icon */
    border-radius: 50%;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.sidebar-social-icons a:hover {
    transform: translateY(-3px);
    background-color: #333;
}

.sidebar-social-icons a svg {
    width: 17px;
    display: block;
}

/* Non-Hero Pages: Robust Structure Helper */
body.no-hero-page .site-header {
    position: relative !important;
    top: auto !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    background-color: #000;
    /* Fallback beige/white matching topbar concept or clean white */
    /* Let's try White initially as it's cleaner for content pages */
    background-color: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Slight shadow to separate from content */
    margin-bottom: 0px;
}

/* Adjust wrapper/content if needed */
body.no-hero-page {
    /* Reset padding as we are using relative positioning now */
    padding-top: 0 !important;
}

/* Fix for shop header title color if hero-main-title class is missing */
.hero-content .hero-title-large {
    color: #FFFFFF !important;
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.42px;
}

@media (min-width: 992px) and (max-width: 1400px) {
    .hero-content .hero-title-large {
        font-size: clamp(18px, 3vw, 30px);
    }
}

/* WhatsApp Floating Button */
/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    z-index: 100;
    display: flex;
    /* Helps remove any weird anchor sizing, though flex might stretch img */
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    /* Removed background-color, box-shadow, border-radius as the image provides the design */
    background-color: transparent;
    border-radius: 50%;
    /* Just in case */
}

.whatsapp-float:hover {
    transform: scale(1.1);
    /* Removed background-color change */
}

.whatsapp-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
}

/* -------------------------------------------------------------------------- */
/*                                CONTACT PAGE                                */
/* -------------------------------------------------------------------------- */

/* Hero modifications for contact page */
.hero-contact .hero-main-title {
    font-size: clamp(40px, 8vw, 80px);
    margin-bottom: 20px;
}

.hero-contact .hero-description {
    font-size: clamp(18px, 3vw, 24px);
    max-width: 600px;
}

.contact-content-section {
    background-color: #FFFFFF;
    padding: var(--spacing-xl) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

@media (min-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.contact-info h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 42px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.contact-details p {
    font-size: 18px;
    margin-bottom: 10px;
}

.contact-details a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Contact Form 7 Styles */
.wpcf7-form label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: #000;
}

.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
}

input.wpcf7-form-control {
    width: 100%;
    height: 55px;
    /* Added height */
    padding: 10px 15px;
    /* Added horizontal padding */
    border: 1px solid #c0c0c0;
    /* Refined border */
    background-color: transparent;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease;
    border-radius: 0;
}

input.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Subtle shadow on focus */
}

.wpcf7-textarea {
    height: 180px;
    /* Slightly taller */
    resize: vertical;
    border: 1px solid #c0c0c0;
    padding: 15px;
    background-color: transparent;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease;
    width: 100%;
}

.wpcf7-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Submit Button styling to match btn-gold-pill */
.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #DBBA76;
    color: #000000;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 15px 40px;
    border-radius: 50px;
    border: 1px solid #000000;
    transition: all 0.3s ease;
    cursor: pointer;
    width: auto;
    min-width: 200px;
    /* Make it substantial */
}

.wpcf7-submit:hover {
    background-color: #000000;
    color: #DBBA76;
    border-color: #000000;
    transform: translateY(-3px);
}

/* Loader and Response styling */
.wpcf7-spinner {
    margin-left: 10px;
}

.wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 15px !important;
    border: none !important;
    border-radius: 5px;
    font-family: 'Onest', sans-serif;
    font-size: 14px;
}

.wpcf7-not-valid-tip {
    font-family: 'Onest', sans-serif;
    font-size: 12px;
    margin-top: 5px;
    color: #dc3232;
}

/* Dynamic Sidebar Banner */
.dynamic-sidebar-banner {
    position: relative;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    width: 100%;
}

.banner-product-title {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-banner-action {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Separation */
    width: 100%;
    padding: 0;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
}

.banner-btn-text {
    flex-grow: 1;
    border: 1px solid #ffffff;
    padding: 15px 20px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Hover Effects */
.btn-banner-action:hover .banner-btn-text {
    background-color: #ffffff;
    color: #000000;
}

.btn-banner-action:hover .icon-circle {
    border-color: #ffffff;
    background-color: transparent;
    /* Or fill it white if desired, but screenshot looks outline? */
    /* Screenshot has white arrow in circle. Let's make circle fill white on hover? */
    background-color: #ffffff;
}

.btn-banner-action:hover .icon-circle path {
    stroke: #000000;
}