:root {
    --bg-cream: #FCF9F2;
    --color-orange: rgb(242, 126, 53);
    --color-nav-text: rgb(93, 35, 4);
    --color-olive: rgb(150, 168, 80);
    --color-text-dark: #3a3a3a;
    --color-white: #ffffff;
    --color-yellow: rgb(255, 195, 3);
    --font-serif: 'Bitter', serif;
    --font-sans: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-cream);
    color: var(--color-text-dark);
}

/* Header Styles */
.site-header {
    background-color: var(--bg-cream);
    padding: 0.8rem 0;
    position: relative;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Soft border for separation */
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 0 2rem;
}

/* Logo */
.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    height: auto;
    flex-shrink: 0;
}

/* Navbar image logo */
.navbar-logo-img {
    height: 40px;
    width: auto;
    mix-blend-mode: multiply;
    display: block;
}

/* Footer image logo */
.footer-logo-img {
    height: 60px;
    width: auto;
    mix-blend-mode: multiply;
}

.logo-text::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23f27e35' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M 4 17 Q 15 28 26 17' /%3E%3Cline x1='10' y1='9' x2='10' y2='13' /%3E%3Cline x1='20' y1='9' x2='20' y2='13' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logo-alegria {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-orange);
    letter-spacing: 0px;
    line-height: 1;
}

.logo-bewell {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin-left: 4px;
    background: linear-gradient(to right, #f4ab43 0%, #f7d559 30%, #a2b16a 60%, var(--color-olive) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
}

.logo-bewell i {
    display: none !important;
}

/* Larger logo for footer */
.logo-footer .logo-alegria {
    font-size: 2rem;
}

.logo-footer .logo-bewell {
    font-size: 1.3rem;
}

/* Navigation */
.main-nav {
    display: flex;
    align-items: center;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 1rem;
}

.nav-list a {
    text-decoration: none;
    color: var(--color-nav-text);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    padding-bottom: 3px;
    white-space: nowrap;
}

.nav-list a:hover {
    color: var(--color-orange);
}

.nav-list a.active {
    border-bottom: 2px solid var(--color-nav-text);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-switcher {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-nav-text);
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-current:hover {
    color: var(--color-orange);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: var(--color-white);
    list-style: none;
    padding: 0.5rem 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.lang-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown li {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--color-nav-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-dropdown li:hover {
    background-color: var(--bg-cream);
    color: var(--color-orange);
}

/* CTA Button */
.cta-button {
    background-color: var(--color-orange);
    color: var(--color-white);
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
}

.cta-button:hover {
    background-color: #d16e2b;
    transform: translateY(-2px);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--color-orange);
    cursor: pointer;
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Medium desktop: 19" monitors (1366px) and similar — compress navbar so CTA is always visible */
@media (max-width: 1400px) {
    /* Reduce container gaps and padding — nav items keep their original look */
    .header-container {
        gap: 0.5rem;
        padding: 0 1rem;
    }

    /* Hide language label text, keep only globe icon + chevron — saves ~55px */
    #current-lang {
        display: none;
    }

    /* Shrink only the CTA button padding/font — keeps full text visible */
    .cta-button {
        font-size: 0.82rem;
        padding: 9px 14px;
        letter-spacing: 0.5px;
    }

    .navbar-logo-img {
        height: 35px;
    }
}

/* Tablet & small desktop: show hamburger menu */
@media (max-width: 1024px) {
    .site-header {
        padding: 0;
    }

    .header-container {
        padding: 0.75rem 1.5rem;
        flex-wrap: wrap;
        position: relative;
    }

    /* Make sure language text is visible on mobile menu */
    #current-lang {
        display: inline;
    }

    /* Logo stays left */
    .logo {
        flex-shrink: 0;
        order: 1;
    }

    .navbar-logo-img {
        height: 34px;
    }

    /* Hamburger button visible */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 2;
        margin-left: auto;
        font-size: 1.6rem;
        padding: 0;
        height: auto;
    }

    /* Nav hidden by default, shown on open */
    .main-nav {
        width: 100%;
        display: none;
        order: 3;
        margin-top: 0.5rem;
        padding: 1rem 0;
        border-top: 1px solid rgba(0,0,0,0.07);
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 0;
    }

    .nav-list li {
        width: 100%;
        text-align: center;
    }

    .nav-list a {
        display: block;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-radius: 6px;
        transition: background-color 0.2s, color 0.2s;
    }

    /* Active link: inline so border only covers the text */
    .nav-list a.active {
        display: inline-block;
        padding: 0.75rem 0;
    }

    .nav-list a:hover {
        background-color: rgba(242, 126, 53, 0.08);
    }

    /* Actions hidden by default */
    .header-actions {
        width: 100%;
        display: none;
        order: 4;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        padding: 1rem 0 1.25rem;
        border-top: 1px solid rgba(0,0,0,0.07);
    }

    /* Show nav and actions when menu is open */
    .header-container.menu-open .main-nav,
    .header-container.menu-open .header-actions {
        display: flex;
    }

    /* Language dropdown in mobile */
    .lang-dropdown {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        box-shadow: none;
        background: transparent;
        text-align: center;
        opacity: 1;
        visibility: visible;
        display: none;
        padding-top: 8px;
    }

    .lang-dropdown.show {
        display: block;
        transform: none;
    }

    .lang-dropdown li {
        padding: 0.4rem 1rem;
    }

    .cta-button {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .header-container {
        padding: 0.6rem 1rem;
    }

    .navbar-logo-img {
        height: 30px;
    }

    .mobile-menu-btn {
        font-size: 1.4rem;
    }

    .nav-list a {
        font-size: 0.95rem;
        padding: 0.65rem 1rem;
    }
}

/* ==========================================
   HERO RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .hero {
        height: 70vh;
        min-height: 420px;
    }

    .hero-alegria {
        font-size: 5rem;
    }

    .hero-smiley {
        /* size is relative (0.28em), auto-scales with parent font */
        top: -0.35em;
    }

    .hero-subtitle {
        font-size: 1.6rem;
    }

    .hero-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 65vh;
        min-height: 360px;
    }

    .hero-alegria {
        font-size: 3.8rem;
        padding-right: 14px;
    }

    .hero-smiley {
        /* size is relative (0.28em), auto-scales with parent font */
        top: -0.35em;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        margin-top: -0.5rem;
    }

    .hero-text {
        font-size: 0.95rem;
    }
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    height: 85vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

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

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    padding: 0 20px;
}

.hero-title {
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.hero-alegria {
    font-family: var(--font-serif);
    font-size: 10rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-orange);
    position: relative;
    display: inline-block;
    line-height: 1;
    padding-right: 20px;
}

/* The letter 'i' container — smiley is positioned relative to this */
.hero-i-letter {
    position: relative;
    display: inline-block;
}

.hero-smiley {
    width: 0.2em;
    height: auto;
    position: absolute;
    top: -0.02em;            /* tiny gap above the i stem */
    left: 55%;
    transform: translateX(-50%);
    display: block;
}

.hero-subtitle {
    font-family: var(--font-sans);
    font-size: 2.8rem;
    font-weight: 700;
    margin-top: -1rem;
    line-height: 1.2;
}

.hero-text {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 400;
    margin-top: 0.5rem;
}

/* Marquee */
.marquee-container {
    width: 100%;
    overflow: hidden;
    background: rgb(252, 249, 242);
    padding: 30px 0;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    animation: marquee 25s linear infinite;
}

.marquee-content span {
    font-family: var(--font-serif);
    font-size: 3.2rem;
    color: rgb(150, 168, 80);
    margin-right: 50px;
    opacity: 1;
}

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

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

/* Retreats Section */
.retreats-section {
    padding: 3rem 2rem 1rem 2rem;
    background-color: var(--bg-cream);
}

.retreats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 5rem;
}

.retreats-image {
    flex: 1;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.retreats-image img {
    width: 100%;
    height: auto;
    display: block;
}

.retreats-image-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color-white);
    width: 100%;
}

.overlay-small {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #a3223f;
    background: white;
    padding: 3px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: -30px;
    position: relative;
    z-index: 2;
}

.overlay-large {
    font-family: var(--font-serif);
    font-size: 6.5rem;
    font-weight: 400;
    font-style: italic;
    display: block;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.overlay-date {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
    margin-top: -15px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}

.overlay-year {
    border: 1px solid white;
    border-radius: 50px;
    padding: 1px 10px;
    font-weight: 400;
}

.retreats-content {
    flex: 1;
    text-align: center;
}

.retreats-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--color-orange);
    line-height: 1.3;
    margin-bottom: 2rem;
}

.retreats-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 1.5rem;
}

.retreats-btn {
    display: inline-block;
    background-color: var(--color-yellow);
    color: #4a3e35;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 15px 40px;
    border-radius: 10px;
    margin-top: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.retreats-btn:hover {
    background-color: #e6b847;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .retreats-container {
        flex-direction: column;
    }
}

/* About Section */
.about-section {
    padding: 3rem 2rem 1rem 2rem;
    background-color: var(--color-white);
}

.about-quote {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem auto;
    color: var(--color-olive);
    line-height: 1.4;
}

.quote-highlight {
    color: var(--color-orange);
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 5rem;
    align-items: center;
}

.about-content {
    flex: 1;
}

.about-text-bold {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5;
    color: #4a3e35;
    margin-bottom: 1.5rem;
}

.about-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #5d4f45;
    margin-bottom: 1.5rem;
}

.about-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: #4a3e35;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.about-btn {
    display: inline-block;
    background-color: var(--color-yellow);
    color: #4a3e35;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 15px 40px;
    border-radius: 10px;
    margin-top: 2rem;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.about-btn:hover {
    background-color: #e6b847;
    transform: translateY(-2px);
}

.about-image {
    flex: 1;
    border-radius: 4px;
    overflow: hidden;
}

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

@media (max-width: 900px) {
    .about-container {
        flex-direction: column;
    }
}

/* Community Section */
.community-section {
    padding: 3rem 2rem 1rem 2rem;
    background-color: var(--bg-cream);
}

.community-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.community-image {
    flex: 1;
}

.community-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.community-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.community-orange-box {
    color: var(--color-orange);
    font-size: 1.05rem;
    line-height: 1.6;
}

.community-orange-box p {
    margin-bottom: 1rem;
}

.community-orange-box strong {
    font-weight: 700;
}

.community-signature {
    font-weight: 700;
    margin-top: 1.5rem;
}

.community-brown-box {
    color: #4a3e35;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-top: 1rem;
}

.community-brown-box p {
    margin-bottom: 1rem;
}

/* Colors Section */
.colors-section {
    padding: 3rem 0;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
}

.curved-marquee-container {
    width: 100%;
    height: 150px;
    position: relative;
    margin-bottom: 2rem;
}

.curved-marquee-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.curved-text {
    font-family: var(--font-serif);
    font-size: 3rem;
    fill: #a2b07e;
    opacity: 0.8;
}

.curved-text textPath {
    animation: move-curve 40s linear infinite;
}

@keyframes move-curve {
    0% {
        startOffset: 0%;
    }

    100% {
        startOffset: -100%;
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100vw);
    }
}

@keyframes scroll-curve {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1000px);
    }
}

.colors-intro {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: #4a3e35;
    line-height: 1.6;
    margin-bottom: 4rem;
}

.colors-intro strong {
    font-weight: 700;
}

.colors-grid {
    display: flex;
    justify-content: center;
    gap: 6rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 200px;
}

.color-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.color-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.color-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    font-weight: 700;
    font-style: italic;
    padding-bottom: 4px;
    margin-bottom: 1.2rem;
    display: inline-block;
    position: relative;
}

/* Curva SVG "underlineCurve" fiel al original de Squarespace */
.color-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10'%3E%3Cpath d='M 0%2C8.5 c 18.75%2C-0.43 37.5%2C-1.25 75%2C-1.63 c 37.5%2C-0.37 57%2C0 75%2C0.16 c 1.7%2C0.03 -1.35%2C0.42 -1.43%2C0.46' stroke='%235d4f45' stroke-width='2' fill='none' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.color-desc {
    font-size: 0.97rem;
    color: #5d4f45;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .community-container {
        flex-direction: column;
    }

    .colors-grid {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
}

/* Pilares Section */
.pilares-section {
    padding: 3rem 2rem 1rem 2rem;
    background-color: var(--bg-cream);
}

.pilares-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 6rem;
    align-items: center;
}

.pilares-content {
    flex: 1;
}

.pilares-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-olive);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.pilares-title span {
    color: var(--color-orange);
    font-style: italic;
}

.pilares-text {
    font-size: 1.05rem;
    color: #4a3e35;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.pilares-image {
    flex: 1;
}

.pilares-image img {
    width: 100%;
    height: auto;
    border-radius: 40px;
    object-fit: cover;
}

/* Accordion Base */
.accordion {
    display: flex;
    flex-direction: column;
}

.accordion-item {
    border-bottom: 1px solid #d2c8c0;
    padding: 1.5rem 0;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-orange);
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
}

.accordion-header .icon {
    font-size: 1.5rem;
    font-weight: 300;
}

.accordion-content {
    display: none;
    padding-top: 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #5d4f45;
}

.accordion-item.active .accordion-content {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Beneficios Section */
.beneficios-section {
    padding: 4rem 2rem 1rem 2rem;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}

.beneficios-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.beneficios-title-col {
    flex: 1;
}

.beneficios-title {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    color: white;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.beneficios-title em {
    font-style: italic;
}

.highlight-yellow {
    border-bottom: 3px solid var(--color-yellow);
    padding-bottom: 2px;
}

.beneficios-content-col {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.beneficios-box {
    background: white;
    padding: 3rem;
    border-radius: 4px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.orange-acc .accordion-header {
    color: var(--color-orange);
}

/* Terapias Section */
.terapias-section {
    padding: 3rem 2rem 1rem 2rem;
    background-color: var(--bg-cream);
}

.terapias-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-olive);
    text-align: center;
    margin-bottom: 4rem;
}

.terapias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto 4rem auto;
}

.terapia-card {
    text-align: center;
}

.terapia-card h3 {
    color: var(--color-orange);
    font-family: var(--font-serif);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.terapia-card p {
    color: #5d4f45;
    font-size: 0.95rem;
    line-height: 1.6;
}

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

.btn-yellow {
    display: inline-block;
    background-color: var(--color-yellow);
    color: #4a3e35;
    padding: 15px 40px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-yellow:hover {
    background-color: #e6b847;
    transform: translateY(-2px);
}

/* Mini Retreats Section */
.mini-retreats-section {
    padding: 3rem 2rem 1rem 2rem;
    background-color: var(--bg-cream);
}

.mini-retreats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 5rem;
    align-items: center;
}

.mini-retreats-image {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-retreats-image-overlay {
    text-align: center;
    color: white;
    padding: 2rem;
}

.mini-retreats-image-overlay h2 {
    font-family: var(--font-serif);
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.mini-retreats-image-overlay p {
    font-size: 1rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.mini-retreats-content {
    flex: 1;
}

.mini-retreats-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: #4a3e35;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.mini-retreats-title em {
    color: var(--color-orange);
    font-style: italic;
}

.mini-retreats-desc {
    color: #5d4f45;
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.green-acc .accordion-header {
    color: var(--color-olive);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.mini-btn {
    margin-top: 2.5rem;
}

/* Contactanos Section */
.contacto-section {
    background-color: var(--bg-cream);
    padding-bottom: 3rem;
}

.marquee-simple {
    width: 100%;
    overflow: hidden;
    background: transparent;
    padding: 2rem 0;
}

.marquee-track {
    white-space: nowrap;
    animation: marquee-scroll 20s linear infinite;
}

.marquee-track span {
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--color-olive);
    opacity: 0.8;
}

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

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

.contacto-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 5rem;
    padding: 0 2rem;
}

.contacto-image {
    flex: 1;
}

.contacto-image img {
    width: 100%;
    height: auto;
    display: block;
}

.contacto-content {
    flex: 1;
    padding-top: 2rem;
}

.contacto-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-orange);
    margin-bottom: 1rem;
}

.contacto-desc {
    color: #5d4f45;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1.5rem;
}

.form-row .form-group {
    flex: 1;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    color: var(--color-olive);
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: 1px solid #d2c8c0;
    border-radius: 20px;
    padding: 12px 15px;
    font-family: inherit;
    background: transparent;
    outline: none;
}

.form-group textarea {
    border-radius: 10px;
    resize: vertical;
}

.btn-green {
    background-color: var(--color-yellow);
    color: #4a3e35;
    border: none;
    padding: 15px 40px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    align-self: flex-start;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.btn-green:hover {
    background-color: #e6b847;
    transform: translateY(-2px);
}

/* Quien Soy Page Section */
.quiensoy-page-section {
    padding: 2rem 2rem 4rem;
    background-color: var(--bg-cream);
}

.quiensoy-page-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: center;
}

.quiensoy-page-image {
    flex: 1;
}

.quiensoy-page-image img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    object-position: top;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.quiensoy-page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.quiensoy-page-greeting {
    color: var(--color-olive);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: -5px;
    font-family: var(--font-serif);
}

.quiensoy-page-name {
    color: var(--color-orange);
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 2rem;
    font-family: var(--font-serif);
}

.quiensoy-page-texts {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.quiensoy-page-text {
    color: #5d4f45;
    font-size: 1.05rem;
    line-height: 1.6;
}

.quiensoy-page-text strong {
    font-weight: 600;
    color: #4a3e35;
}

/* Quien Soy Fundadora Section */
.quiensoy-fundadora-section {
    padding: 2rem 2rem 4rem;
    background-color: var(--bg-cream);
}

.quiensoy-fundadora-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.quiensoy-fundadora-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #5d4f45;
    font-size: 1.05rem;
    line-height: 1.6;
}

.quiensoy-fundadora-text strong {
    color: #4a3e35;
    font-weight: 600;
}

.quiensoy-fundadora-title-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.quiensoy-fundadora-title-col h2 {
    color: var(--color-orange);
    font-size: 3rem;
    font-weight: 400;
    font-family: var(--font-serif);
    line-height: 1.1;
}

/* Group Photo Section */
.quiensoy-group-section {
    width: 100%;
    background-color: var(--bg-cream);
    padding: 2rem 2rem 1rem 2rem;
}

.quiensoy-group-img {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Mision Section */
.quiensoy-mision-section {
    padding: 6rem 2rem 1rem 2rem;
    background-color: var(--bg-cream);
}

.quiensoy-mision-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: center;
}

.quiensoy-mision-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.quiensoy-mision-image img {
    max-width: 80%;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.quiensoy-mision-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.quiensoy-mision-line {
    width: 100%;
    height: 1px;
    background-color: var(--color-olive);
    margin-bottom: 1rem;
}

.quiensoy-mision-quote {
    color: #5d4f45;
    font-size: 1.1rem;
    line-height: 1.6;
    font-family: var(--font-serif);
}

.quiensoy-mision-quote strong {
    color: #4a3e35;
    font-weight: 600;
}

.quiensoy-mision-sig {
    color: var(--color-olive);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: right;
    margin-top: 1rem;
}

/* Servicios Hero Section */
.servicios-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
}

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

.servicios-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(60, 65, 45, 0.4);
    z-index: -1;
}

.servicios-hero-content {
    max-width: 900px;
    padding: 2rem;
    z-index: 1;
}

.servicios-hero-title {
    font-size: 3.5rem;
    font-family: var(--font-serif);
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.wavy-underline {
    text-decoration: underline wavy var(--color-yellow);
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

.servicios-hero-text {
    font-size: 1.2rem;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 1.5;
}

/* Servicios Sections */
.servicio-section {
    padding: 6rem 2rem 1rem 2rem;
    background-color: var(--bg-cream);
}

.servicio-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 3.5rem;
    align-items: stretch;
}

.align-center {
    align-items: center !important;
}

.servicio-image {
    flex: 1;
    display: flex;
}

.servicio-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
}

.servicio-section .servicio-image img {
    max-height: 450px;
    aspect-ratio: 4 / 3;
}

.servicio-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
}

.servicio-title {
    font-size: 3.2rem;
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: 2rem;
    line-height: 1.1;
}

.orange-title {
    color: var(--color-orange);
}

.green-title {
    color: var(--color-olive);
}

.servicio-texts {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.servicio-text {
    color: #5d4f45;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Retreats Page Styles */
.experiencia-section {
    padding: 6rem 2rem 1rem 2rem;
    background-color: var(--color-white);
}

.experiencia-header {
    text-align: center;
    margin-bottom: 4rem;
}

.experiencia-title {
    font-size: 2.8rem;
    font-family: var(--font-serif);
    line-height: 1.2;
}

.experiencia-text-block p {
    color: #5d4f45;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}

.experiencia-list {
    margin-bottom: 0.8rem;
    padding-left: 20px;
    list-style-type: disc;
    color: var(--color-olive);
}

.experiencia-list li {
    margin-bottom: 0.3rem;
    color: #5d4f45;
    font-size: 0.95rem;
}

.experiencia-list li strong {
    color: #4a3e35;
}

.renueva-list {
    margin-top: 0.5rem;
    margin-bottom: 0.8rem;
    padding-left: 20px;
    list-style-type: disc;
    color: var(--color-olive);
}

.renueva-list li {
    margin-bottom: 0.3rem;
    color: #5d4f45;
    font-size: 0.95rem;
}

.accordion {
    width: 100%;
}

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

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    cursor: pointer;
    font-size: 1rem;
    color: #8c8375;
    font-weight: 500;
    text-transform: uppercase;
    list-style: none; /* removes default arrow */
}

.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: #8c8375;
}

.accordion-content {
    padding-bottom: 1.5rem;
    color: #5d4f45;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Accordion Color Modifiers */

/* Olive Text / Brown Borders (Mini Retreats) */
.acc-olive-brown {
    border-top: 1px solid #d2c8c0;
}
.acc-olive-brown .accordion-item {
    border-bottom: 1px solid #d2c8c0;
}
.acc-olive-brown .accordion-header {
    color: #a2b07e;
}
.acc-olive-brown .icon {
    color: #5d4f45;
    font-weight: 300;
}

/* Orange Text / Brown Borders (Pilares) */
.acc-orange-brown {
    border-top: 1px solid var(--color-brown);
}
.acc-orange-brown .accordion-item {
    border-bottom: 1px solid var(--color-brown);
}
.acc-orange-brown .accordion-header {
    color: var(--color-orange);
    text-transform: none;
}
.acc-orange-brown .icon {
    color: var(--color-orange);
}

/* Orange Text / Orange Borders (Beneficios) */
.acc-orange-orange {
    border-top: 1px solid var(--color-orange);
}
.acc-orange-orange .accordion-item {
    border-bottom: 1px solid var(--color-orange);
}
.acc-orange-orange .accordion-header {
    color: var(--color-orange);
    text-transform: none;
}
.acc-orange-orange .icon {
    color: var(--color-orange);
}
.acc-orange-orange .accordion-content {
    color: var(--color-orange);
}

/* Ayudarte Section */
.ayudarte-section {
    position: relative;
    padding: 8rem 2rem 1rem 2rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayudarte-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

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

.ayudarte-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(60, 65, 45, 0.4);
    z-index: -1;
}

.ayudarte-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.ayudarte-title {
    text-align: center;
    font-size: 3rem;
    font-family: var(--font-serif);
    margin-bottom: 4rem;
    font-weight: 400;
}

.ayudarte-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.ayudarte-card {
    text-align: center;
}

.ayudarte-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ayudarte-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 300;
}

/* Footer Section */
.site-footer {
    background-color: var(--bg-cream);
    padding: 4rem 2rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-logo {
    flex: 1;
    min-width: 250px;
}

.footer-btn-wrapper {
    display: flex;
    justify-content: center;
    flex: 1;
    min-width: 200px;
}

.footer-social {
    display: flex;
    gap: 1rem;
    flex: 1;
    justify-content: center;
    min-width: 150px;
}

.social-icon {
    background-color: var(--color-olive);
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
}

.social-icon:hover {
    background-color: #656b4a;
}

.footer-categories {
    display: flex;
    gap: 4rem;
    flex: 2;
    justify-content: flex-end;
    min-width: 300px;
}

.footer-column h4 {
    color: var(--color-olive);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column ul li a {
    color: var(--color-orange);
    text-decoration: underline;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--color-olive);
}

/* Blogs Section */
.blogs-section {
    background-color: var(--bg-cream);
    padding: 6rem 2rem 1rem 2rem;
}

.blogs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 3rem;
    max-width: 950px;
    margin: 0 auto;
}

.blog-card {
    text-align: center;
}

.blog-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-bottom: 1.5rem;
}

.blog-date {
    color: var(--color-brown);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.blog-title {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    color: var(--color-brown);
    margin-bottom: 1rem;
    font-weight: 400;
    line-height: 1.2;
}

.blog-link {
    color: var(--color-orange);
    text-decoration: underline;
    font-size: 1rem;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

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

/* Single Blog Page */
.single-blog-section {
    background-color: var(--bg-cream);
    padding: 6rem 2rem 1rem 2rem;
    min-height: 60vh;
}

.single-blog-container {
    max-width: 800px;
    margin: 0 auto;
}

.single-blog-date {
    font-size: 0.85rem;
    color: var(--color-brown);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.single-blog-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-brown);
    margin-bottom: 2rem;
    font-weight: 400;
}

.single-blog-content p {
    font-size: 1.1rem;
    color: #5d4f45;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

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

@media (max-width: 900px) {
    .community-container {
        flex-direction: column;
    }

    .colors-grid {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .pilares-container,
    .beneficios-container,
    .mini-retreats-container,
    .contacto-container {
        flex-direction: column;
    }

    .terapias-grid {
        grid-template-columns: 1fr;
    }
    
    .ayudarte-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .quiensoy-page-container,
    .quiensoy-fundadora-container,
    .quiensoy-mision-container,
    .servicio-container {
        flex-direction: column;
        gap: 2.5rem;
        align-items: center;
    }
    
    .servicio-image, .servicio-content {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }
    
    .footer-logo {
        min-width: auto;
        margin-bottom: 0;
    }
    
    .footer-social {
        justify-content: center;
        min-width: auto;
    }
    
    .footer-btn-wrapper {
        width: 100%;
        min-width: auto;
    }
    
    .footer-btn-wrapper .btn-yellow {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    
    .footer-categories {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        width: 100%;
        min-width: auto;
    }
    
    .footer-column h4, 
    .footer-column ul {
        text-align: center;
    }

    .hero-alegria {
        font-size: 5rem;
    }
    .hero-smiley {
        font-size: 1.5rem;
        top: 5px;
    }
    .hero-subtitle {
        font-size: 1.8rem;
    }
    .hero-text {
        font-size: 1.2rem;
    }
    
    .quiensoy-page-greeting {
        font-size: 2rem;
    }
    .quiensoy-page-name {
        font-size: 2.5rem;
    }
    
    .quiensoy-fundadora-title-col h2 {
        font-size: 2.5rem;
    }
    
    .ayudarte-title {
        font-size: 2.5rem;
    }
    
    .servicios-hero-title {
        font-size: 2.5rem;
    }
    
    .psicoterapia-title {
        font-size: 2.5rem;
    }
    
    .marquee-content span {
        font-size: 2.5rem;
    }
    
    .overlay-large {
        font-size: 4rem;
    }
    .overlay-date {
        font-size: 1.1rem;
    }
    
    .retreats-title {
        font-size: 1.8rem;
    }
    
    .about-quote {
        font-size: 1.6rem;
    }
    
    .curved-text {
        font-size: 2rem;
    }
    
    .pilares-title,
    .beneficios-title,
    .terapias-title,
    .mini-retreats-image-overlay h2,
    .mini-retreats-title,
    .contacto-title {
        font-size: 2rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .beneficios-box {
        padding: 2rem;
    }
    
    .mini-retreats-image {
        min-height: 300px;
    }
    
    .curved-marquee-container {
        height: 100px;
    }
}

@media (max-width: 900px) {
    .tienda-section {
        flex-direction: column !important;
        padding: 2rem !important;
    }
    .tienda-section img {
        display: none !important;
    }
    .tienda-content h1 {
        font-size: 4rem !important;
    }
    .hero-content h1 {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 480px) {
    .hero-alegria {
        font-size: 3.5rem;
    }
    .hero-subtitle {
        font-size: 1.4rem;
    }
    .overlay-large {
        font-size: 2.8rem;
    }
    .pilares-title,
    .beneficios-title,
    .terapias-title,
    .contacto-title {
        font-size: 1.6rem;
    }
    .tienda-content h1 {
        font-size: 3rem !important;
    }
    .hero-content h1 {
        font-size: 2rem !important;
    }
}

/* =========================================
   RESERVA PAGE STYLES
   ========================================= */

.reserva-hero-section {
    background: linear-gradient(to right, #fdf5f0 0%, #fefcfb 50%, #ffffff 100%);
    display: flex;
    align-items: stretch;
    min-height: 85vh;
}

.reserva-hero-content-wrapper {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 8rem 4rem 4rem 2rem; /* Account for header overlap */
}

.reserva-hero-content {
    max-width: 550px;
    width: 100%;
}

.reserva-hero-title {
    font-family: var(--font-serif);
    font-size: 4.5rem; /* Reduced font size from 5.5rem to 4.5rem */
    color: rgb(150, 168, 80);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    font-weight: 400;
}

.reserva-hero-text-orange {
    color: var(--color-orange);
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.reserva-hero-text-orange strong {
    font-weight: 600;
}

.reserva-hero-text-brown {
    color: #5d4f45;
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.reserva-hero-image-wrapper {
    flex: 1;
    background-image: url('reserva_hero.png');
    background-size: cover;
    background-position: center;
}

.reserva-ayuda-section {
    padding: 6rem 2rem 1rem 2rem;
    background-color: var(--bg-cream);
    display: flex;
    justify-content: center;
}

.reserva-ayuda-container {
    max-width: 1100px;
    width: 100%;
    display: flex;
    gap: 6rem;
    align-items: center;
}

.reserva-ayuda-images {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.reserva-ayuda-images img {
    width: 100%;
    max-width: 450px;
}

.reserva-ayuda-content {
    flex: 1;
}

.reserva-ayuda-title {
    font-family: var(--font-serif);
    font-size: 4rem;
    color: rgb(150, 168, 80);
    margin-bottom: 3rem;
    line-height: 1.1;
    font-weight: 400;
}

/* Accordion for Ayuda */
.acc-brown-brown {
    border-top: 1px solid #5d4f45;
}
.acc-brown-brown .accordion-item {
    border-bottom: 1px solid #5d4f45;
    padding: 1rem 0;
}
.acc-brown-brown .accordion-header {
    color: #5d4f45;
    text-transform: none;
    font-size: 1.5rem;
    font-family: var(--font-serif);
    padding: 0.5rem 0;
}
.acc-brown-brown .icon {
    color: #5d4f45;
    font-weight: 300;
}

.reserva-servicios-section {
    padding: 4rem 0 8rem;
    background-color: var(--bg-cream);
}

.reserva-laptop-img {
    display: block;
    margin: -110px auto 4rem;
    max-width: 700px;
    width: 90%;
    border-radius: 15px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.reserva-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    padding: 0 2rem;
    margin: 0 auto;
    text-align: center;
}

.reserva-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reserva-card-title {
    color: var(--color-orange);
    font-family: var(--font-serif);
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}

.reserva-card-text {
    color: #5d4f45;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    flex-grow: 1;
}

.btn-outline-orange {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid var(--color-orange);
    color: var(--color-orange);
    background: transparent;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-outline-orange:hover {
    background-color: var(--color-orange);
    color: white;
}

@media (max-width: 768px) {
    .reserva-hero-section {
        flex-direction: column;
    }
    .reserva-hero-image-wrapper {
        min-height: 400px;
    }
    .reserva-hero-content-wrapper {
        padding: 2rem 2rem;
    }
    .reserva-ayuda-container {
        flex-direction: column;
    }
    .reserva-grid {
        grid-template-columns: 1fr;
    }
    
    /* Global reduction of massive top/bottom padding for mobile */
    .beneficios-section,
    .quiensoy-fundadora-section,
    .quiensoy-mision-section,
    .servicio-section,
    .experiencia-section,
    .ayudarte-section,
    .blogs-section,
    .single-blog-section,
    .reserva-ayuda-section,
    .reserva-servicios-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: white;
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.show .modal-content {
    transform: translateY(0);
}

.modal-icon {
    font-size: 3rem;
    color: var(--color-olive);
    margin-bottom: 1rem;
}

.modal-content h3 {
    font-family: var(--font-serif);
    color: var(--color-orange);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.modal-content p {
    color: #5d4f45;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.modal-content .btn-yellow {
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
}
/* ==========================================
   GLOBAL RESPONSIVE — TABLET & MOBILE
   ========================================== */

/* General: images never overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Tablet and mobile */
@media (max-width: 768px) {

    /* Marquee smaller on mobile */
    .marquee-content span {
        font-size: 2rem;
        margin-right: 30px;
    }

    /* About section stacks vertically */
    .about-section {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
    .about-quote {
        order: 2;
        font-size: 1.5rem;
    }
    .about-container {
        display: contents;
    }
    .about-content {
        order: 3;
    }
    .about-image {
        order: 1;
    }


    /* Footer stacks vertically */
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }

    .footer-logo-img {
        height: 45px;
    }

    /* Grid sections: 1 column */
    .services-grid,
    .blogs-grid,
    .events-grid,
    .tienda-grid {
        grid-template-columns: 1fr !important;
    }

    /* General section padding */
    .about-section,
    .services-section,
    .retreats-section,
    .blogs-section {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

@media (max-width: 480px) {
    .about-quote {
        font-size: 1.2rem;
    }

    .footer-logo-img {
        height: 36px;
    }
}