/* Font Face Declarations */
/* Montserrat (локально, вариативный шрифт: веса 400–700) */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-cyrillic.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Иконки (бывший Font Awesome): inline SVG внутри <i class="fas|fab ..."> */
.fas, .fab {
    display: inline-block;
    font-style: normal;
    line-height: 1;
}

.fas > svg, .fab > svg {
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    overflow: visible;
}

.social-link .fa-instagram:hover > svg {
    fill: url(#igGradient);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #7C9A92;     /* Soft green */
    --nav-active-color: #587B71;  /* Текст активного/ховер пункта меню (контраст 4.68:1 на белом) */
    --heading-color: #4D6F66;     /* Заголовки разделов: тот же зелёный, темнее (контраст ≥4.5:1 на белом и персиковом) */
    --secondary-color: #F5E6D3;   /* Beige */
    --accent-color: #A7C4BC;      /* Light sage */
    --text-color: #2C3E50;        /* Dark blue-gray */
    --white: #FFFFFF;
    --light-bg: #F9F9F9;
}

body {
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.header {
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
    overflow: visible;
}

.header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px; /* было 15px: место под подпись .logo-tagline, чтобы шапка не стала выше */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: visible;
    overflow-y: visible;
}

.logo {
    width: 100%;
    text-align: center;
}

.logo h1,
.logo .brand {
    color: var(--heading-color); /* как у заголовков разделов */
    font-size: 28px;
    font-weight: 700; /* бренд раньше был h1 (жирный по умолчанию) */
    margin: 0;
    padding: 0;
}

/* Логотип-ссылка: выглядит так же, как заголовок (без цвета и подчёркивания ссылки) */
.logo-link,
.logo-link:visited,
.logo-link:hover,
.logo-link:active {
    color: inherit;
    text-decoration: none;
}

/* Подпись под брендом: ширина строки равна ширине названия «Adiós contracturas».
   Размер (--tg-f, в em от размера названия) и трекинг (--tg-t) подобраны замером для каждого языка. */
.logo-tagline {
    --tg-f: 0.46;
    --tg-t: 0.2118;
    display: block;
    margin-top: 2px;
    font-size: calc(var(--tg-f) * 1em);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: calc(var(--tg-t) * 1em);
    padding-left: calc(var(--tg-t) * 1em); /* компенсирует хвостовой отступ трекинга, строка остаётся по центру */
    text-transform: uppercase;
    color: var(--text-color);
    opacity: 0.7;
}
html[lang="en"] .logo-tagline { --tg-t: 0.5183; }
html[lang="ru"] .logo-tagline { --tg-t: 0.2876; }
html[lang="uk"] .logo-tagline { --tg-t: 0.3198; }

@media (max-width: 768px) {
    .logo-tagline { --tg-f: 0.51; --tg-t: 0.1204; line-height: 1.2; }
    html[lang="en"] .logo-tagline { --tg-f: 0.52; --tg-t: 0.3806; }
    html[lang="ru"] .logo-tagline { --tg-f: 0.52; --tg-t: 0.1693; }
    html[lang="uk"] .logo-tagline { --tg-f: 0.52; --tg-t: 0.1963; }
}

.nav-menu {
    width: 100%;
    display: flex;
    justify-content: center;
}

.nav-menu ul {
    display: inline-flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    justify-content: center;
}

.nav-menu li {
    white-space: nowrap;
}

.nav-menu a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
    font-size: 16px;
    padding: 5px 10px;
    display: block;
}

.nav-menu a:hover {
    color: var(--nav-active-color);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 94px; /* Synchronized with script.js buffer */
    }

    html, body {
        max-width: 100%;
        overflow-x: hidden;
        position: relative;
        width: 100vw;
        overscroll-behavior-x: none;
        touch-action: pan-y;
    }

    .container, 
    .about,
    .services,
    .feedbacks,
    .location,
    .footer {
        max-width: 100vw;
        overflow-x: hidden;
        width: 100%;
        scroll-margin-top: 94px; /* Synchronized buffer */
    }

    /* Keep hero out of overflow-x:hidden — otherwise overflow-y becomes auto and traps touch scroll */
    .hero {
        max-width: 100vw;
        width: 100%;
        scroll-margin-top: 94px;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .hero-content {
        overscroll-behavior: auto;
    }

    .services-grid {
        margin: 0;
        padding: 0 15px;
        width: auto;
    }

    .service-card:has(h3[data-en="COURSE PACKAGES"]) {
        transform: none;
    }

    .feedbacks-grid {
        margin: 40px auto;
        width: auto;
    }

    .location-info {
        width: auto;
        margin: 0 15px;
    }

    .header .container {
        gap: 2px; /* было 10px: место под подпись .logo-tagline */
        padding: 0 10px;
        width: auto;
        overflow: visible;
    }

    .logo h1,
    .logo .brand {
        font-size: 22px;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

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

    .header {
        padding: 10px 0;
    }

    .nav-menu {
        width: 100%;
    }

    .nav-menu ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 5px 0;
        gap: 5px;
    }

    .nav-menu a {
        font-size: 14px;
        padding: 5px 4px;
        white-space: nowrap;
        text-align: center;
    }

    .about {
        margin-top: 0 !important;
    }

    .service-card:has(h3[data-en="PACKAGES"]) {
        grid-column: auto !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .logo h1,
    .logo .brand {
        font-size: 20px;
    }

    .nav-menu ul {
        gap: 4px;
    }

    .nav-menu a {
        font-size: 13px;
        padding: 4px 3px;
    }
}

@media (max-width: 375px) {
    .header .container {
        padding: 0 5px;
        overflow: visible;
    }

    .logo h1,
    .logo .brand {
        font-size: 18px;
    }

    .nav-menu {
        width: 100%;
    }

    .nav-menu ul {
        gap: 3px;
    }

    .nav-menu a {
        font-size: 12px;
        padding: 4px 2px;
    }

    /* Language-specific adjustments */
    [lang="es"] .nav-menu a {
        font-size: 11px;
        padding: 4px 2px;
    }
}

/* Hero Section */
.hero {
    background-image: url('images/4V4-1920-hq.webp'); /* без тёмной заливки: фото яркое, как на телефоне */
    background-size: cover;
    background-position: center;
    height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--white);
    margin-top: 100px;
    position: relative;
    touch-action: pan-y;
}

/* Лёгкая вертикальная версия фона для мобильных (только в вертикальной ориентации) */
@media (max-width: 768px) and (orientation: portrait) {
    /* Квадратный кадр с обоими локтями: первый экран на телефоне почти квадратный, фото без затемнения и без полос */
    .hero {
        background-image: url('images/4V4-mobile-wide-hq.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.hero-content {
    width: 100%;
    padding: 20px;
    position: relative;
    z-index: 2;
    margin-top: -100px;
    touch-action: pan-y;
    pointer-events: auto;
}

.hero-content h1,
.hero-content h2 {
    font-size: 56px;
    margin-bottom: 15px;
    white-space: nowrap;
}

.hero-subtitle {
    font-size: 22px;
    margin-bottom: 30px;
    font-weight: 400;
    opacity: 0.9;
}

.hero-content p {
    margin-bottom: 30px;
}

.hero-content .cta-button {
    margin-top: 10px;
    display: inline-block;
    pointer-events: auto;
}

@keyframes backgroundFlow {
    0%, 100% {
        background-position: 
            center,
            center,
            left center,
            right center;
    }
    50% {
        background-position: 
            center,
            center,
            right center,
            left center;
    }
}

/* Add floating anatomical elements */
/* Removed external Unsplash images to avoid loading errors
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url('https://images.unsplash.com/photo-1584814169175-cee76f164419?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'),
        url('https://images.unsplash.com/photo-1581093458791-9cd22e2a31d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
    background-position: 
        20% 80%,
        80% 20%;
    background-size: 
        200px,
        200px;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
    animation: floatingElements 20s ease-in-out infinite;
}
*/

@keyframes floatingElements {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(20px) scale(1.05);
    }
}

/* Responsive background adjustments */
@media (max-width: 768px) {
    .hero::after {
        background-size: 
            150px,
            150px;
    }

    .hero-content {
        margin: 0 15px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .hero::after {
        background-size: 
            100px,
            100px;
    }

    .hero-content {
        margin: 0 10px;
        padding: 10px;
    }
}

/* About Section */
.about {
    background-color: var(--white); /* _preview-colors */
    padding: 50px 0;
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.about h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--heading-color);
    animation: fadeIn 1.2s ease-out;
    position: relative;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding: 0 15px;
    box-sizing: border-box;
}

@keyframes expandWidth {
    to {
        width: 60px;
    }
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.about-text {
    order: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.about-images {
    order: -1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.about-text {
    padding: 10px 20px;
    animation: slideFromRight 1s ease-out;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.about-text p {
    margin-bottom: 10px;
    font-size: 1.1em;
    line-height: 1.8;
    text-align: left; /* было justify: давало большие пробелы между словами */
    max-width: 100%;
}

.about-text p:last-child {
    margin-bottom: 0;
}

.about-text {
    text-align: left;
}

/* Телефон: строки текста «Método» чуть плотнее */
@media (max-width: 768px) {
    .about-text p {
        line-height: 1.6;
    }
}

.about-images {
    padding: 10px 20px;
    animation: slideFromLeft 1s ease-out;
}

/* About Main Image Block */
.about-main-image {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    overflow: visible;
    padding: 10px;
}

.about-img-large {
    width: 45%;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: floatAnimation 6s ease-in-out infinite;
}

.about-img-large:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .about-img-large:hover {
        transform: scale(1);
    }
}

/* About Gallery Block - Carousel */
.about-gallery-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 40px 0;
    padding: 0 20px;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y;
    z-index: 1;
}

.about-arrow-left, .about-arrow-right {
    z-index: 20 !important;
}

.about-gallery-wrapper:active {
    cursor: grabbing;
}

.about-gallery {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.about-slide {
    flex: 0 0 calc(25% - 15px);
    min-width: calc(25% - 15px);
}

.about-img-small {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.about-slide:hover .about-img-small {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.about-gallery .about-img-small:nth-child(1) {
    animation: fadeIn 1s ease-out 0.3s backwards;
}

.about-gallery .about-img-small:nth-child(2) {
    animation: fadeIn 1s ease-out 0.6s backwards;
}

.about-gallery .about-img-small:nth-child(3) {
    animation: fadeIn 1s ease-out 0.9s backwards;
}

.about-gallery .about-img-small:nth-child(4) {
    animation: fadeIn 1s ease-out 1.2s backwards;
}

/* Legacy image-grid styles for backwards compatibility */
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: start;
}

.image-grid img:first-child {
    grid-column: span 4;
    animation: floatAnimation 6s ease-in-out infinite;
}

.image-grid img:nth-child(2) {
    animation: fadeIn 1s ease-out 0.3s backwards;
    width: 250px;
    height: 250px;
    object-fit: cover;
}

.image-grid img:nth-child(3) {
    animation: fadeIn 1s ease-out 0.6s backwards;
    width: 250px;
    height: 250px;
    object-fit: cover;
}

.image-grid img:nth-child(4) {
    animation: fadeIn 1s ease-out 0.9s backwards;
    width: 250px;
    height: 250px;
    object-fit: cover;
}

.image-grid img:nth-child(5) {
    animation: fadeIn 1s ease-out 1.2s backwards;
    width: 250px;
    height: 250px;
    object-fit: cover;
}

.about-img {
    width: 40%;
    height: 250px;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 1s ease-out;
}

.about-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Responsive design for about section */
@media (max-width: 768px) {
    .about {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        padding: 50px 0;
    }

    .about .container {
        overflow-x: hidden;
        padding: 0 15px;
        width: 100%;
        max-width: 100%;
    }

    .about h2 {
        padding: 0 10px;
        margin-bottom: 15px;
    }

    .faq h2 {
        padding: 0 10px;
        margin-bottom: 30px;
        font-size: 28px;
        text-align: center;
    }

    .faq-question {
        font-size: 1em;
        padding: 18px 45px 18px 15px;
        -webkit-tap-highlight-color: transparent;
    }

    .faq-question:focus:not(.active) {
        background-color: white;
    }
    
    .faq-question::after {
        right: 15px;
        font-size: 1em;
    }
    
    .faq-answer {
        padding: 0 15px;
    }
    
    .faq-answer.active {
        padding: 10px 15px 20px 15px;
    }
    
    .faq-answer p {
        font-size: 1em;
    }

    .about-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .about-main-image {
        margin-bottom: 20px;
        padding: 15px;
        overflow: visible;
    }

    .about-img-large {
        width: 70%;
    }
    
    .about-img-large:hover {
        transform: scale(1);
    }

    .about-slide {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
    }
    
    .about-gallery {
        gap: 10px;
    }
    
    .about-gallery-wrapper {
        padding: 0 15px;
    }

    .about-img-small {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .image-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }

    .image-grid img:first-child {
        grid-column: span 1;
    }

    .about-text, .about-images {
        padding: 10px;
    }

    .image-grid img:nth-child(2),
    .image-grid img:nth-child(3),
    .image-grid img:nth-child(4),
    .image-grid img:nth-child(5) {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .about-img {
        height: auto;
        max-height: 300px;
        width: 100%;
        object-fit: contain;
    }
}

@media (max-width: 1024px) {
    .about-main-image {
        padding: 15px;
    }

    .about-img-large {
        width: 60%;
    }
    
    .about-img-large:hover {
        transform: scale(1);
    }

    .about-slide {
        flex: 0 0 calc(33.333% - 13.33px);
        min-width: calc(33.333% - 13.33px);
    }

    .about-img-small {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 375px) and (max-width: 768px) {
    .about-main-image {
        padding: 15px;
    }

    .about-img-large {
        width: 80%;
    }
    
    .about-img-large:hover {
        transform: scale(1);
    }

    .about-slide {
        flex: 0 0 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
    
    .about-gallery {
        gap: 15px;
    }
    
    .about-gallery-wrapper {
        padding: 0 15px;
    }

    .about-img-small {
        width: 100%;
        height: auto;
        max-height: 200px;
    }

    .about-img {
        height: auto;
        max-height: 350px;
        width: 100%;
        object-fit: contain;
        margin: 10px 0;
    }

    .image-grid {
        gap: 25px;
        max-width: 100%;
        overflow: hidden;
    }

    .image-grid img {
        max-width: 100%;
        width: 100%;
        object-fit: cover;
    }

    .about-images {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 0 15px;
    }
}

/* FAQ Section */
.faq {
    padding: 80px 0;
    background-color: var(--white); /* _preview-colors */ /* как у блока «Método» (.about) */
    overflow: hidden;
    position: relative;
}

.faq h2 {
    text-align: center;
    margin-bottom: 50px;
    color: var(--heading-color);
    position: relative;
    animation: fadeIn 1.2s ease-out;
}

.faq-accordion {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #c8d1d8;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    background: white;
    border: none;
    padding: 20px 50px 20px 20px;
    text-align: left;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
}

.faq-question:hover {
    background-color: #f8f9fa;
}

.faq-question::after {
    content: '';
    width: 1.05em;
    height: 1.2em;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    background-color: var(--primary-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.faq-question.active {
    background-color: #f8f9fa;
}

.faq-question.active::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 20px;
}

.faq-answer.active {
    max-height: 1000px;
    padding: 10px 20px 20px 20px;
}

.faq-answer p {
    color: #555;
    margin-bottom: 10px;
    font-size: 1.05em;
    line-height: 1.7;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Services Section */
.services {
    padding: 80px 0;
    background-color: var(--secondary-color); /* _preview-colors */
    overflow: hidden;
    position: relative;
}

.services h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--heading-color);
    position: relative;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding: 0 15px;
    box-sizing: border-box;
}

.promo-banner {
    text-align: center;
    color: #e70808;
    font-size: 1em;
    margin-bottom: 50px;
    position: relative;
    padding: 10px;
    font-weight: 500;
    animation: glowPulse 2s infinite;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.promo-banner::before,
.promo-banner::after {
    content: '★';
    color: #e70808;
    margin: 0 10px;
    animation: rotateStar 3s linear infinite;
    display: inline-block;
}

@keyframes glowPulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateStar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Add vertical spacing between consecutive services rows to prevent overlap on hover */
.services-grid + .services-grid {
    margin-top: 40px;
}

/* Services panel container similar to FAQ accordion */
.services-panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 1030px;
    margin: 0 auto;
    padding: 150px 150px 50px 150px;
}

@media (max-width: 768px) {
    .services-panel {
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }
}

/* Desktop: lock service card size to previous fixed layout and center the grid */
@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(267.5px, 267.5px));
        justify-content: center;
        justify-items: center;
        align-items: stretch;
    }

    .service-card,
    .services-grid .service-card { /* более точный селектор: перебивает базовое height: 100%, иначе высота фиксировалась только после анимации и раздел ниже «прыгал» */
        height: 420.34px;
        width: 267.5px; /* track width match for stability */
    }

    /* Keep height stable when reveal becomes active to avoid jump */
    .service-card.reveal.active {
        height: 420.34px;
    }

    /* RU / UK: denser feature list so booking button fits fixed card height */
    body.lang-ru .service-card h3,
    body.lang-uk .service-card h3 {
        margin-bottom: 25px; /* было 8px: как в остальных языках */
    }

    body.lang-ru .service-card .service-features,
    body.lang-uk .service-card .service-features {
        margin-bottom: 8px;
    }

    body.lang-ru .service-card .service-features li,
    body.lang-uk .service-card .service-features li {
        margin-bottom: 5px;
        line-height: 1.32;
    }

    body.lang-ru .service-card .price-action,
    body.lang-uk .service-card .price-action {
        gap: 8px;
        flex-shrink: 0;
    }

    body.lang-ru .service-card .learn-more.intro-promo,
    body.lang-uk .service-card .learn-more.intro-promo {
        padding: 12px 20px;
    }
}

/* (Reverted) Keep original responsive sizing for cards */

/* Ensure PACKAGES card follows natural grid flow without offsets */
.service-card:has(h3[data-en="PACKAGES"]) {
    grid-column: auto;
}

.service-card {
    background-color: var(--white);
    padding: 17px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card.reveal.active {
    background: #ffffff;
    border: 1px solid rgba(124,154,146,0.25);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.service-card h3 {
    color: #4D6F66;
    margin-bottom: 25px; /* было 15px: больше воздуха между названием услуги и пунктами */
}

.service-card > p:not(.price) {
    margin-bottom: 30px;
    flex-grow: 1;
}

.service-card .service-features {
    flex-grow: 1;
    margin-bottom: 30px;
    text-align: center;
}

.service-card .service-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-card .service-features li {
    margin: 0 0 16px;
    line-height: 1.55;
}

.service-card .service-features li::before {
    content: "• ";
}

.service-card .service-features li:last-child {
    margin-bottom: 0;
}

.service-card .price-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}

.service-card .price {
    margin: 0;
    font-weight: bold;
    color: var(--text-color);
    font-size: 1.1em;
}

.service-card .learn-more {
    margin: 0;
    width: 100%;
    justify-content: center;
}

/* Subtitle in services block – match feedbacks subtitle styling */
.services-subtitle {
    text-align: center;
    color: var(--text-color);
    font-size: 1.2em;
    font-weight: 500;
    margin-top: -110px;
    margin-bottom: 35px;
    font-style: normal;
}

/* Responsive fixes for services block */
@media (max-width: 992px) {
    .services-panel {
        padding: 40px 18px;
        margin: 0 12px;
    }
    
    .services-subtitle {
        margin-top: -10px;
        margin-bottom: 24px;
    }
    
    .services h2 {
        text-align: center;
        margin-bottom: 12px;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .service-card {
        width: 100%;
        height: auto;
    }
    
    .service-card.reveal.active {
        height: auto;
    }
}
/* Карточка «Sesión inicial» до 1199px: та же ширина, что на компьютере (267.5px), по центру,
   на очень узких экранах сжимается до ширины панели. Отступы внутри карточки не менялись. */
@media (max-width: 1199px) {
    .services-grid {
        grid-template-columns: minmax(0, 267.5px);
        justify-content: center;
    }
}

/* Кнопка «Reservar sesión»: ~75% ширины карточки, по центру (.price-action центрирует детей).
   Боковые отступы уменьшены, чтобы подпись не переносилась (высота кнопки прежняя, вертикальные отступы не менялись);
   min-width: max-content не даёт подписи вылезти или перенестись в других языках и на узких экранах. */
.service-card .learn-more.intro-promo {
    width: 75%;
    min-width: max-content;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
}

/* Disable reveal fade/shift for service cards to avoid late render */
.services .service-card.reveal,
.services .service-card.reveal.active {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Contact Section */
.contact {
    padding: 80px 0;
    background-color: var(--white);
}

.contact h2 {
    text-align: center;
    margin-bottom: 50px;
    color: var(--primary-color);
}

.contact-links {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--light-bg);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
    font-size: 1.2em;
}

.contact-link i {
    font-size: 2em;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.contact-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background-color: var(--secondary-color);
}

.contact-link:hover i {
    transform: scale(1.2);
}

/* Instagram specific color */
.contact-link:has(.fa-instagram):hover i {
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Telegram specific color */
.contact-link:has(.fa-telegram):hover i {
    color: #0088cc;
}

/* Email specific color */
.contact-link:has(.fa-envelope):hover i {
    color: #EA4335;
}

/* Footer */
.footer {
    background-color: var(--text-color);
    color: var(--white);
    padding: 20px 0;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    font-size: 14px;
}

.footer-links a:hover {
    opacity: 1;
}

.footer-links .cookie-settings-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--white);
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.footer-links .cookie-settings-link:hover {
    opacity: 1;
}

.footer-links .separator {
    opacity: 0.5;
    color: var(--white);
}

.copyright {
    opacity: 0.8;
}

/* Responsive design for contact section */
@media (max-width: 768px) {
    .contact-links {
        padding: 10px;
    }

    .contact-link {
        padding: 15px;
        font-size: 1em;
    }

    .contact-link i {
        font-size: 1.5em;
    }
    
    .footer-links {
        gap: 10px;
    }
    
    .footer-links a,
    .footer-links .cookie-settings-link {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .footer-links {
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .footer-links .separator {
        display: inline;
    }
    
    .footer-links a {
        font-size: 12px;
        white-space: nowrap;
    }
}

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(44, 62, 80, 0.95);
    color: white;
    padding: 20px;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cookie-banner.show {
    transform: translateY(0);
}

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

.cookie-content p {
    margin: 0;
    flex: 1;
    min-width: 300px;
}

.cookie-content a {
    color: #A7C4BC;
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 10px 20px;
    min-width: 130px; /* обе кнопки одной ширины на всех языках */
    border: 1px solid #587B71;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: all 0.3s ease;
}

/* «Принять» и «Отклонить» визуально равноправны: одинаковые размер, шрифт, цвет и яркость (контраст белого на #587B71 = 4,68:1) */
.cookie-btn.accept,
.cookie-btn.reject {
    background: #587B71;
    color: #fff;
}

.cookie-btn.accept:hover,
.cookie-btn.reject:hover {
    background: #4D6F66;
    border-color: #4D6F66;
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-content p {
        min-width: auto;
    }
    
    .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
}

/* Language Selector Dropdown */
.language-selector {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
}

.lang-dropdown-btn {
    background-color: var(--white);
    border: 1px solid var(--primary-color);
    color: #4D6F66;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.lang-dropdown-btn:hover {
    background-color: #4D6F66;
    color: var(--white);
}

.lang-dropdown-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.language-selector.active .lang-dropdown-btn i {
    transform: rotate(180deg);
}

.lang-dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background-color: var(--white);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    min-width: 150px;
    overflow: hidden;
}

.language-selector.active .lang-dropdown-content {
    display: flex;
}

.lang-option {
    padding: 10px 15px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-color);
    transition: all 0.3s ease;
    font-size: 14px;
    width: 100%;
}

.lang-option:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.lang-option.active {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Mobile Optimizations for Language Selector */
@media (max-width: 768px) {
    .language-selector {
        top: 15px;
        right: 15px;
    }

    .lang-dropdown-content {
        right: 0;
        left: auto;
        min-width: 130px;
    }
}

@media (max-width: 480px) {
    .language-selector {
        top: 10px;
        right: 10px;
    }

    .lang-dropdown-btn {
        padding: 6px 10px;
        font-size: 13px;
    }

    .lang-dropdown-content {
        min-width: 120px;
        right: -5px;
    }
}

@media (max-width: 375px) {
    .language-selector {
        top: 8px;
        right: 8px;
    }

    .lang-dropdown-btn {
        padding: 5px 8px;
        font-size: 12px;
    }

    .lang-dropdown-content {
        min-width: 110px;
        right: -8px;
    }
}

/* Ensure dropdown doesn't get cut off on small screens */
@media (max-width: 320px) {
    .language-selector {
        right: 5px;
    }

    .lang-dropdown-content {
        right: -10px;
        min-width: 100px;
    }
}

/* Ensure text doesn't overflow in service cards */
.service-card p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: none;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Apply animations to elements (первый экран #home без анимации появления — виден сразу) */
.cta-button, .book-button {
    animation: fadeIn 1s ease-out 1s backwards;
    transition: all 0.3s ease;
}

.hero .cta-button {
    animation: none;
}

.cta-button:hover, .book-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.service-card {
    animation: fadeIn 0.8s ease-out;
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.about-img {
    transition: all 0.5s ease;
    animation: fadeIn 1s ease-out;
}

.about-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.nav-menu a {
    position: relative;
    transition: color 0.3s ease;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

/* Active navigation state - only show underline when section is active */
.nav-menu a.active-nav::after {
    width: 100%;
}

.social-links a {
    transition: all 0.3s ease;
}

.social-links a:hover {
    transform: translateY(-5px) scale(1.2);
    color: var(--accent-color);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.submit-button {
    transition: all 0.3s ease;
}

.submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    background-color: var(--accent-color);
}

/* Add scroll reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* About Section Animations */
@keyframes slideFromLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.about-text {
    animation: slideFromRight 1s ease-out;
}

.about-images {
    animation: slideFromLeft 1s ease-out;
}

.about .book-button {
    opacity: 0;
    animation: fadeIn 1s ease-out 1s forwards;
}

/* Button Styles */
.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

.cta-button,
.book-button,
.learn-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.cta-button {
    background-color: var(--primary-color);
    color: var(--white);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.cta-button.telegram {
    background-color: #0088cc;
}

.cta-button.telegram:hover {
    background-color: #0099e6;
}

.cta-button.instagram {
    background: linear-gradient(45deg, #4D6F66 0%, #3A7A5A 100%);
}

.cta-button.instagram:hover {
    background: linear-gradient(45deg, #3F5E56 0%, #2F6B4F 100%);
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.book-button.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.book-button.instagram:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0.9;
}

.learn-more.email-link {
    background-color: var(--white);
    color: var(--text-color);
    border: 2px solid var(--primary-color);
    font-size: 0.9em;
}

.learn-more.email-link:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.learn-more.promo-gradient {
    background: linear-gradient(36deg, #d5f3a6 0%, #62bf7e 50%, #879d92 100%);
    color: white !important;
    border: none !important;
    font-size: 0.9em;
    padding: 14px 27px;
}

.learn-more.promo-gradient:hover {
    opacity: 0.9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.learn-more.intro-promo {
    background: linear-gradient(45deg, #4D6F66, #3A7A5A);
    color: white !important;
    border: none !important;
    font-size: 0.9em;
    padding: 14px 27px;
}

.learn-more.intro-promo:hover {
    background: linear-gradient(45deg, #3F5E56, #2F6B4F);
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.learn-more.whatsapp {
    background-color: #25D366;
    color: white !important;
    border: none !important;
    font-size: 0.9em;
    padding: 14px 27px;
}

.learn-more.whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.learn-more.email-link i {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.learn-more.email-link:hover i {
    transform: scale(1.1);
}

/* Add responsive styles for buttons */
@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .cta-button,
    .book-button,
    .learn-more {
        width: 100%;
        justify-content: center;
        padding: 15px 20px;
    }
}

/* Content Responsive Styles */
@media (max-width: 768px) {
    .hero-content h1,
    .hero-content h2 {
        font-size: 38px;
        padding: 0 15px;
        margin-bottom: 12px;
        white-space: normal;
    }

    .hero-subtitle {
        font-size: 18px;
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .hero-content p {
        font-size: 16px;
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .services {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        padding: 60px 0;
    }

    .services .container {
        overflow-x: hidden;
        padding: 0 15px;
        width: 100%;
        max-width: 100%;
    }

    .services h2 {
        padding: 0 10px;
        margin-bottom: 30px;
    }

    .service-card h3 {
        font-size: 20px;
    }

    .service-card p {
        font-size: 14px;
        line-height: 1.4;
    }

    .price {
        font-size: 16px;
    }

    .services-grid {
        gap: 20px;
        padding: 0 15px;
    }

    .service-card {
        padding: 20px;
    }

    .about-grid {
        padding: 0 15px;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .contact-link {
        padding: 15px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .about {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        padding: 40px 0;
    }

    .about .container {
        overflow-x: hidden;
        padding: 0 10px;
        width: 100%;
        max-width: 100%;
    }

    .about h2 {
        padding: 0 10px;
        margin-bottom: 15px;
        font-size: 28px;
    }

    .services {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        padding: 50px 0;
    }

    .services .container {
        overflow-x: hidden;
        padding: 0 10px;
        width: 100%;
        max-width: 100%;
    }

    .services h2 {
        padding: 0 10px;
        margin-bottom: 25px;
        font-size: 28px;
    }

    .about-img-large {
        width: 100%;
    }
    
    .about-img-large:hover {
        transform: scale(1);
    }

    .about-main-image {
        padding: 15px 10px;
        overflow: visible;
    }

    .about-slide {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
    }
    
    .about-gallery {
        gap: 10px;
    }
    
    .about-gallery-wrapper {
        padding: 0 10px;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: 32px;
        padding: 0 10px;
    }

    .hero-subtitle {
        font-size: 16px;
        padding: 0 15px;
    }

    .hero-content p {
        font-size: 14px;
        padding: 0 15px;
    }

    .service-card {
        padding: 15px;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .service-card p {
        font-size: 13px;
    }

    .price {
        font-size: 15px;
    }

    .contact-link {
        padding: 12px;
        font-size: 14px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 10px;
        padding: 0 15px;
    }

    .cta-button, .book-button {
        width: 100%;
        padding: 10px 15px;
        font-size: 14px;
    }
}

@media (max-width: 375px) {
    .hero-content h1,
    .hero-content h2 {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-content p {
        font-size: 13px;
    }

    .service-card {
        padding: 12px;
    }

    .service-card h3 {
        font-size: 16px;
        margin-bottom: 20px; /* было 10px */
    }

    .service-card p {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .price {
        font-size: 14px;
    }

    .contact-link {
        padding: 10px;
        font-size: 13px;
    }

    .cta-button, .book-button {
        padding: 8px 12px;
        font-size: 13px;
    }

    .services-grid {
        gap: 15px;
        padding: 0 10px;
    }
}

/* Location Section */
.location {
    padding: 80px 0;
    background-color: var(--white); /* _preview-colors */
}

.location h2 {
    text-align: center;
    color: var(--heading-color);
    margin-bottom: 40px;
}

.map-container {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 40px;
}

/* Превью карты (картинка со ссылкой на Google Maps вместо встроенной карты) */
.map-link {
    position: relative;
    display: block;
}

.map-link img {
    display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.map-link-label {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--white);
    color: var(--text-color);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.map-attribution {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 6px;
    background: rgba(255,255,255,0.85);
    color: #333;
    font-size: 11px;
    line-height: 1.4;
}

.map-link:hover .map-link-label {
    background: var(--primary-color);
    color: var(--white);
}

.location-info {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    padding: 20px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.address-block,
.hours-block,
.phone-block {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
}

.address-block i,
.hours-block i,
.phone-block i {
    color: var(--primary-color);
    font-size: 24px;
}

.phone-link,
.address-link {
    color: inherit;
    text-decoration: none;
}

.phone-link:hover,
.address-link:hover {
    text-decoration: underline;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-color);
    margin-top: 8px;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.social-link:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.social-link .fa-instagram:hover {
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.social-link .fa-whatsapp:hover {
    color: #25D366;
}

.hours {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hours p {
    margin: 0;
    color: var(--text-color);
}

/* Location Section Responsive */
@media (max-width: 768px) {
    .location {
        padding: 60px 0;
    }

    .map-container {
        margin-bottom: 30px;
    }

    .map-link img {
        height: 350px;
    }

    .location-info {
        gap: 30px;
        padding: 15px;
    }

    .address-block,
    .hours-block,
    .phone-block {
        padding: 15px;
    }

    .address-block i,
    .hours-block i,
    .phone-block i {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .location {
        padding: 40px 0;
    }

    .map-container {
        margin-bottom: 20px;
    }

    .map-link img {
        height: 300px;
    }

    .location-info {
        flex-direction: column;
        gap: 20px;
        padding: 10px;
    }

    .address-block,
    .hours-block,
    .phone-block {
        width: 100%;
        padding: 10px;
    }

    .address-block i,
    .hours-block i,
    .phone-block i {
        font-size: 18px;
    }
}

/* Hero Section Responsive Adjustments */
@media (max-width: 768px) {
    .hero {
        margin-top: 100px;
        height: 70vh;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: 38px;
        padding: 0 15px;
        margin-bottom: 12px;
        white-space: normal;
    }

    .hero-subtitle {
        font-size: 18px;
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .hero-content p {
        font-size: 16px;
        padding: 0 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .hero {
        margin-top: 90px;
        height: 60vh;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: 32px;
        padding: 0 10px;
    }

    .hero-subtitle {
        font-size: 16px;
        padding: 0 15px;
    }

    .hero-content p {
        font-size: 14px;
        padding: 0 15px;
    }
}

@media (max-width: 375px) {
    .hero {
        margin-top: 80px;
        height: 50vh;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: 26px;
        padding: 0 8px;
    }

    .hero-subtitle {
        font-size: 13px;
        padding: 0 10px;
    }

    .hero-content p {
        font-size: 13px;
        padding: 0 10px;
    }
}

/* Language flag colors */
.lang-option[data-lang="en"] .fa-flag {
    color: #012169; /* UK Blue */
}

.lang-option[data-lang="es"] .fa-flag {
    color: #c60b1e; /* Spanish Red */
}

.lang-option[data-lang="ru"] .fa-flag {
    color: #d52b1e; /* Russian Red */
}

.lang-option[data-lang="uk"] .fa-flag {
    color: #005bbb; /* Ukrainian Blue */
}

.lang-dropdown-btn .fa-flag {
    color: #012169; /* Default to UK Blue */
}

/* Adjust spacing for flags */
.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Testimonial Slider Styles */
.testimonial-slider {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.slides {
    display: flex;
    gap: 20px;
    overflow: hidden;
    flex: 1;
}

.slide {
    flex: 1;
    min-width: 0;
}

.slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.slide img:hover {
    transform: scale(1.05);
}

.nav-button {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.nav-button:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary-color);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

/* Responsive styles for testimonial slider */
@media (max-width: 768px) {
    .slider-container {
        gap: 10px;
    }

    .nav-button {
        width: 30px;
        height: 30px;
        font-size: 0.8em;
    }

    .slide img {
        border-radius: 8px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }
}

/* Feedbacks Section */
.feedbacks {
    padding: 80px 0;
    background-color: var(--secondary-color); /* _preview-colors */
}

.feedbacks h2 {
    text-align: center;
    color: var(--heading-color);
    margin-bottom: 20px;
}

.feedbacks-subtitle {
    text-align: center;
    color: var(--text-color);
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 40px;
    font-style: normal;
}

/* Feedbacks Carousel */
.feedbacks-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 40px 0;
    padding: 0 20px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
}

.feedbacks-carousel-wrapper:active {
    cursor: grabbing;
}

/* Carousel Navigation Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.carousel-arrow:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-arrow.flash {
    animation: arrowFlash 0.4s ease;
}

@keyframes arrowFlash {
    0% {
        background-color: var(--primary-color);
        color: white;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    }
    100% {
        background-color: rgba(255, 255, 255, 0.9);
        color: var(--primary-color);
    }
}

.carousel-arrow i {
    font-size: 20px;
}

.carousel-arrow-left {
    left: 10px;
}

.carousel-arrow-right {
    right: 10px;
}

/* Hide arrows on mobile devices */
@media (max-width: 768px) {
    .carousel-arrow {
        display: none;
    }
}

.feedbacks-carousel {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.feedback-slide {
    flex: 0 0 calc(25% - 15px);
    min-width: calc(25% - 15px);
}

.feedback-img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.feedback-slide:hover .feedback-img {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Old grid styles - kept for backwards compatibility */
.feedbacks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 40px 0;
    padding: 0 20px;
}

/* Responsive design for feedbacks section */
@media (max-width: 1024px) {
    .feedback-slide {
        flex: 0 0 calc(33.333% - 13.33px);
        min-width: calc(33.333% - 13.33px);
    }
}

@media (max-width: 768px) {
    .feedback-slide {
        flex: 0 0 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
    
    .feedbacks-carousel {
        gap: 15px;
    }
    
    .feedbacks-carousel-wrapper {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .feedback-slide {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
    }
    
    .feedbacks-carousel {
        gap: 10px;
    }
    
    .feedbacks-carousel-wrapper {
        padding: 0 10px;
    }
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
}

.modal-content {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}

.modal-close {
    position: fixed;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10000;
}

.modal-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-prev {
    left: 20px;
}

.modal-next {
    right: 20px;
}

.modal-counter {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 15px;
    border-radius: 20px;
    z-index: 10000;
}

@media (max-width: 768px) {
    .modal {
        padding: 10px;
        align-items: center;
        justify-content: center;
    }

    .modal[style*="display: block"] {
        display: flex !important;
    }

    .modal-content {
        max-width: 95%;
        max-height: 80vh;
    }

    .modal-nav {
        font-size: 24px;
        padding: 12px 16px;
    }

    .modal-prev {
        left: 10px;
    }

    .modal-next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    .modal-nav {
        font-size: 20px;
        padding: 10px 14px;
    }

    .modal-counter {
        font-size: 14px;
        padding: 6px 12px;
    }
}

.service-card:has(h3[data-en="COURSE PACKAGES"]) {
    transform: translateX(445px);
}

@media (max-width: 768px) {
    .service-card:has(h3[data-en="COURSE PACKAGES"]) {
        transform: none;
    }
}

/* Save text styling */
.save-text {
    color: #e70808;
}

/* Return to top button */
.return-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 999;
    opacity: 0;
    transition: all 0.3s ease;
}

.return-to-top.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.return-to-top:hover {
    transform: translateY(-3px);
    background-color: var(--accent-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.return-to-top i {
    font-size: 20px;
}

@media (min-width: 769px) {
    .return-to-top {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .return-to-top {
        bottom: 37px;
        right: 15px;
        width: 35px;
        height: 35px;
    }
    
    .return-to-top i {
        font-size: 16px;
    }
}

html {
    scroll-padding-top: 122px; /* Final final 2px adjustment for perfect alignment */
    scroll-behavior: smooth;
}

/* Desktop specific adjustments */
@media (min-width: 769px) and (max-width: 1920px) {
    html {
        scroll-padding-top: 122px;
    }

    .hero {
        margin-top: 100px;
        min-height: calc(100vh - 100px);
    }

    section {
        scroll-margin-top: 122px;
        padding-top: 60px;
    }

    .about,
    .services,
    .feedbacks,
    .location {
        scroll-margin-top: 122px;
        padding-top: 60px;
        margin-top: -1px; /* Prevent gap between sections */
    }

    .about {
        padding-top: 60px;
    }

    .feedbacks {
        padding-top: 60px;
    }
}
 

/* ===== Телефон (до 768px): компактные отступы между блоками, обрезка пустоты в отзывах, скругления 3px ===== */
@media (max-width: 768px) {
    /* Вертикальные отступы секций */
    .about, .feedbacks, .faq, .services, .location {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Отступ между заголовком секции и содержимым (вдвое меньше) */
    .about h2 { margin-bottom: 8px; }
    .feedbacks h2 { margin-bottom: 10px; }
    .feedbacks-subtitle { margin-bottom: 20px; }
    .faq h2 { margin-bottom: 25px; }
    .services h2 { margin-bottom: 13px; }
    .location h2 { margin-bottom: 20px; }

    /* Карточки отзывов: пустое белое поле внизу скриншотов обрезано по содержимому каждой картинки */
    .feedback-img { object-fit: cover; object-position: top; }
    .feedback-slide:nth-child(1) .feedback-img { aspect-ratio: 591 / 965; }
    .feedback-slide:nth-child(2) .feedback-img { aspect-ratio: 591 / 1065; }
    .feedback-slide:nth-child(3) .feedback-img { aspect-ratio: 591 / 900; }
    .feedback-slide:nth-child(4) .feedback-img { aspect-ratio: 591 / 755; }
    .feedback-slide:nth-child(5) .feedback-img { aspect-ratio: 591 / 785; }
    .feedback-slide:nth-child(6) .feedback-img { aspect-ratio: 591 / 790; }
    .feedback-slide:nth-child(7) .feedback-img { aspect-ratio: 591 / 1005; }
    .feedback-slide:nth-child(8) .feedback-img { aspect-ratio: 591 / 780; }
    .feedback-slide:nth-child(9) .feedback-img { aspect-ratio: 591 / 1065; }

    /* Скругления 3px */
    .faq .faq-accordion, .service-card, .services-panel, .map-container {
        border-radius: 3px;
    }
}

/* ===== Логотип: знак + название + подпись образуют одну группу, вся группа по центру шапки =====
   Знак стоит слева от названия через gap; margin-top = 0.4585 × размер названия
   (верх заглавной «A» Montserrat внутри строки line-height 1.6), чтобы верх знака был на уровне верха букв. */
.logo {
    --brand-fs: 28px;               /* = font-size у .logo .brand */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 9px;                       /* + ~2.5px пустого поля внутри svg ≈ 11–12px до букв */
}

.logo-link {
    display: inline-block;
}

.logo-mark-link {
    display: block;
    flex: none;
    line-height: 0;
    margin-top: calc(var(--brand-fs) * 0.4585);
}

.logo-mark {
    display: block;
    height: 44px;
    width: auto;
}

@media (max-width: 768px) {
    .logo { --brand-fs: 22px; }
    .logo-mark { height: 34px; }
}

@media (max-width: 480px) {
    .logo { --brand-fs: 20px; }
    .logo-mark { height: 31px; }
}

@media (max-width: 375px) {
    .logo { --brand-fs: 18px; }
    .logo-mark { height: 28px; }
}

.footer-mark {
    height: 1.4em;
    width: auto;
    vertical-align: -0.35em;
    margin-right: 0.4em;
}

/* ===== H1 первого экрана: одна строка без переноса на любой ширине ===== */
.hero-content h1 {
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* ширина текста в капслоке ≈ k × размер шрифта (es 16, en 17.5, ru 14.1, uk 13); поля по 14px с каждой стороны */
    .hero-content h1 {
        --h1-k: 16.4;
        font-size: min(38px, calc((100vw - 28px) / var(--h1-k)));
        padding: 0;
        margin-left: -10px;
        margin-right: -10px;
        white-space: nowrap;
    }
    html[lang="en"] .hero-content h1 { --h1-k: 17.9; }
    html[lang="ru"] .hero-content h1 { --h1-k: 14.5; }
    html[lang="uk"] .hero-content h1 { --h1-k: 13.4; }
}

/* Подзаголовок первого экрана на телефоне: одна строка (k = ширина текста / размер шрифта: es 19.6, en 21, ru 24.5, uk 21.6) */
@media (max-width: 480px) {
    .hero-subtitle {
        --sub-k: 19.6;
        font-size: min(16px, calc((100vw - 24px) / var(--sub-k)));
        padding: 0;
        margin-left: -10px;
        margin-right: -10px;
        white-space: nowrap;
    }
    html[lang="en"] .hero-subtitle { --sub-k: 21; }
    html[lang="ru"] .hero-subtitle { --sub-k: 24.5; }
    html[lang="uk"] .hero-subtitle { --sub-k: 21.6; }
}

/* ===== Кнопки записи (первый экран и блок с ценой): салатово-зелёный градиент, объём, тёмный текст ===== */
/* Контраст #0F3D2A: на #8FD46E 6,86:1, на #4FB26C 4,6:1; при наведении фон светлее, контраст растёт */
a.cta-button.instagram,
a.learn-more.intro-promo {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 55%),
        linear-gradient(90deg, #8FD46E 0%, #4FB26C 100%);
    color: #0F3D2A !important;
    font-weight: 800;
    letter-spacing: 0.01em;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 8px 18px rgba(60, 140, 80, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 5px rgba(0, 60, 30, 0.12);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

a.cta-button.instagram:hover,
a.learn-more.intro-promo:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
        linear-gradient(90deg, #9BDD7B 0%, #58BA75 100%);
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(60, 140, 80, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 5px rgba(0, 60, 30, 0.12);
}

a.cta-button.instagram:active,
a.learn-more.intro-promo:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 8px rgba(60, 140, 80, 0.4), inset 0 2px 5px rgba(0, 60, 30, 0.22);
}

a.cta-button.instagram:focus-visible,
a.learn-more.intro-promo:focus-visible {
    outline: 3px solid #0F3D2A;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    a.cta-button.instagram,
    a.learn-more.intro-promo {
        transition: none;
    }
    a.cta-button.instagram:hover,
    a.cta-button.instagram:active,
    a.learn-more.intro-promo:hover,
    a.learn-more.intro-promo:active {
        transform: none;
    }
}

/* ===== Кнопка выбора языка: уменьшена примерно на 18% (размер, отступы, шрифт, стрелка) ===== */
.lang-dropdown-btn {
    padding: 6.5px 10px;
    font-size: 11.5px;
    gap: 6.5px;
    border-radius: 3.5px;
}

.lang-dropdown-btn i {
    font-size: 10px;
}

@media (max-width: 480px) {
    .lang-dropdown-btn {
        padding: 5px 8px;
        font-size: 10.7px;
        gap: 5.5px;
    }
}

@media (max-width: 375px) {
    .lang-dropdown-btn {
        padding: 4px 6.5px;
        font-size: 10px;
        gap: 5px;
    }
}

/* ===== Кнопка языка: вертикальный центр = центр названия «Adiós contracturas» (не подписи) ===== */
/* Центр названия = padding шапки + 0.8 × размер шрифта бренда: 37.4px (>768), 27.6px (≤768), 26px (≤480), 24.4px (≤375) */
.language-selector {
    top: 37.4px;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .language-selector { top: 27.6px; }
}

@media (max-width: 480px) {
    .language-selector { top: 26px; }
}

@media (max-width: 375px) {
    .language-selector { top: 24.4px; }
}

/* Невидимая область нажатия ≈ 44px, внешний вид кнопки не меняется (список открывается поверх: он идёт позже в DOM) */
.lang-dropdown-btn {
    position: relative;
}

.lang-dropdown-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ===== Телефон (вертикально): первый экран ≈ квадрат; читаемость текста — тенью у самого текста ===== */
@media (max-width: 768px) and (orientation: portrait) {
    .hero {
        height: min(100vw, 85vh);
    }

    .hero-content h1 {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.7), 0 2px 20px rgba(0, 0, 0, 0.5);
    }

    .hero-content .hero-subtitle {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 9px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 0, 0, 0.55);
    }

    .hero-content .cta-buttons + p {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 9px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 0, 0, 0.55) !important;
    }
}

/* ===== Кнопка в первом экране на телефоне: ширина по тексту + боковые поля, ниже и мельче шрифт ===== */
@media (max-width: 768px) {
    .hero .cta-buttons {
        align-items: center;
        padding: 0;
    }

    .hero a.cta-button.instagram {
        width: auto;
        max-width: 100%;
        white-space: nowrap;
        padding: 10px 18px;
        font-size: 13.5px;
        line-height: 1.35;
        border-radius: 12px;
        text-align: center;
    }
}

@media (max-width: 375px) {
    .hero a.cta-button.instagram {
        padding: 9px 14px;
        font-size: 13px;
    }
}

/* Строка «📍 Chamartín…» на узких экранах: в одну строку, шрифт чуть меньше (ширина строки ≈ 20,5 × размер шрифта, запас по бокам) */
@media (max-width: 480px) {
    .hero-content .cta-buttons + p {
        font-size: min(15px, calc((100vw - 56px) / 20.8)) !important;
        white-space: nowrap;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ===== «Método»: фото-карусель на телефоне (до 480 px) =====
   Нативная прокрутка со scroll-snap: листается только по горизонтали, вертикальный свайп прокручивает страницу,
   одно фото за свайп и всегда ровно на месте. Первое фото у левого края (10px), справа виден краешек следующего.
   Широким (на весь экран) сделан только блок с фото; текст остаётся с обычными отступами. */
@media (max-width: 480px) {
    .about .about-grid {
        grid-template-columns: minmax(0, 1fr);   /* колонка не растягивается шириной карусели */
        overflow: visible;
        row-gap: 14px;
    }

    .about .about-images {
        padding: 0;
        min-width: 0;
        overflow: visible;
        animation: none;
    }

    .about .about-gallery-wrapper {
        width: 100vw;
        margin: 12px 0 0 calc(50% - 50vw);       /* на всю ширину экрана, чтобы справа виднелось следующее фото */
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 10px;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;               /* горизонталь — карусель, вертикаль — страница */
        scrollbar-width: none;
        cursor: default;
    }

    .about .about-gallery-wrapper::-webkit-scrollbar {
        display: none;
    }

    .about .about-gallery {
        display: flex;
        gap: 10px;
        width: max-content;
        padding: 0 10px;
        transform: none !important;              /* позицию задаёт нативная прокрутка, не script.js */
        transition: none;
    }

    .about .about-slide {
        flex: 0 0 calc(100vw - 80px);
        min-width: calc(100vw - 80px);
        scroll-snap-align: start;
        scroll-snap-stop: always;                /* не перелистывать несколько фото за один свайп */
    }

    .about .about-img-small {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 1 / 0.97;                  /* одинаковый фиксированный размер, ничего не прыгает при загрузке */
        object-fit: cover;
        border-radius: 6px;
        transform: none;
    }

    .about .about-slide:hover .about-img-small {
        transform: none;
    }
}

/* ===== «Reservar»: без внешней белой рамки/подложки вокруг блока; карточка «Sesión inicial» остаётся ===== */
.services .services-panel {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0 auto;
}

/* Подзаголовок «Di adiós a tus contracturas»: чуть меньше, на телефоне в одну строку */
.services .services-subtitle {
    margin-top: 0;
    margin-bottom: 28px;
    font-size: 1.1em;
}

@media (max-width: 768px) {
    .services .services-subtitle {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: clamp(14px, 4.3vw, 17.6px);
        white-space: nowrap;
    }
}

/* Тень карточки «Sesión inicial» не обрезается: сетка не режет содержимое, снизу запас под тень (вычтен из отступа секции) */
.services .services-grid {
    overflow: visible;
    padding-bottom: 24px;
}

.services {
    padding-bottom: 56px;
}

@media (max-width: 768px) {
    .services {
        padding-bottom: 16px;
    }
}

/* ===== Подвал: компактный, ссылки по центру с разделителями, одна мелкая строка © ===== */
.footer {
    padding: 12px 0 10px;
}

.footer-content {
    gap: 6px;
}

.footer-links {
    gap: 8px;
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-links a,
.footer-links .cookie-settings-link {
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

.footer-links .separator {
    opacity: 0.5;
}

.copyright {
    opacity: 0.6;
}

.copyright p {
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
}

@media (max-width: 640px) {
    .footer {
        padding: 10px 0 8px;
    }

    .footer-links {
        flex-direction: column;
        gap: 3px;
    }

    .footer-links .separator-rows {
        display: none;
    }

    .footer-links a,
    .footer-links .cookie-settings-link {
        font-size: 12px;
    }
}

/* Кнопка «наверх»: подъём над подвалом следует за прокруткой без задержки (margin не анимируется) */
.return-to-top {
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== «Contacto»: список контактов по центру карточки, строки выровнены влево ===== */
.location-info {
    gap: 0;
    padding: 24px 20px;
}

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;      /* строки по левому краю, сам блок по центру карточки */
    gap: 14px;                    /* одинаковые промежутки между строками */
    max-width: 100%;
}

.contact-list li {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 1em;
    line-height: 1.35;
    color: var(--text-color);
    text-decoration: none;
}

.contact-row:hover {
    transform: none;
}

.contact-row:hover span {
    text-decoration: underline;
}

/* иконки одной колонкой, одного размера */
.contact-row i {
    flex: 0 0 26px;
    width: 26px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: var(--primary-color);
}

.contact-row i svg {
    width: auto;
    height: 22px;
    max-width: 26px;
    fill: currentColor;
}

.contact-row:hover .fa-whatsapp {
    color: #25D366;
}

@media (max-width: 480px) {
    .location-info {
        padding: 20px 16px;
    }
}

/* ===== Первый экран на десктопе — по образцу мобильной версии ===== */
@media (min-width: 769px) {
    /* те же тени у текста, что на телефоне (вместо тёмной заливки фото) */
    .hero-content h1 {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.7), 0 2px 20px rgba(0, 0, 0, 0.5);
    }

    .hero-content .hero-subtitle {
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 0, 0, 0.6);
    }

    .hero-content .cta-buttons + p {
        font-size: 20px !important;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 0, 0, 0.6) !important;
    }

    /* зелёная кнопка крупнее: шрифт и поля выросли примерно в 1,3 раза */
    .hero a.cta-button.instagram {
        font-size: 21px;
        line-height: 1.35;
        padding: 15px 44px;
        border-radius: 16px;
    }
}

/* ===== Отступ «карточка Sesión inicial → Contacto» = отступу «конец блока FAQ → Reservar» ===== */
/* запас под тень карточки (24px в .services-grid) остаётся; нижний отступ секции убран, верхний у «Contacto» подобран */
.services {
    padding-bottom: 0;
}

.location {
    padding-top: 36px;
}

@media (max-width: 768px) {
    .location {
        padding-top: 17px;
    }
}

/* ===== iPhone: страница прокручивается как единое целое (hero и «Método» уезжают вместе) =====
   Раньше html, body, секции и их .container имели overflow-x: hidden — из-за этого они становились самостоятельными
   прокручиваемыми контейнерами (overflow-y: auto) и на iOS «Método» мог прокручиваться отдельно/под hero.
   overflow-x: clip обрезает по горизонтали, но не создаёт контейнер прокрутки. В старых браузерах без clip остаётся прежнее поведение. */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: clip;
        overflow-y: visible;
        width: auto;
        max-width: 100%;
    }

    .container,
    .about,
    .about .container,
    .services,
    .services .container,
    .feedbacks,
    .feedbacks .container,
    .faq,
    .faq .container,
    .location,
    .location .container,
    .footer {
        overflow-x: clip;
        overflow-y: visible;
    }

    .about {
        -webkit-overflow-scrolling: auto;   /* не создавать отдельный слой прокрутки для обычного блока */
    }
}

/* ===== «Método»: карточки фото целиком, без обрезки (_preview-colors) =====
   Все 7 фото 640×960 (2:3), поэтому карточка = то же 2:3: все фото одной высоты, видны полностью.
   Перебивает фиксированные высоты: 250px на компьютере, max-height 200px на планшете, aspect-ratio 1/0.97 на телефоне.
   Ширину слайдов (сколько фото видно и насколько выглядывает следующее) и работу свайпа не трогаем. */
.about .about-img-small {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 2 / 3;
    object-fit: contain;
}

/* ===== «Método»: рамка карусели на компьютере/планшете не прокручивается (_preview-colors) =====
   overflow: hidden оставляет рамку прокручиваемым контейнером: после телефонного режима (там нативная прокрутка)
   или при любом программном сдвиге в ней оставался scrollLeft, и стрелки (они лежат внутри рамки) уезжали
   с содержимым: «вперёд» оказывалась между 2-м и 3-м фото, «назад» пропадала, слева виден край предыдущего фото.
   overflow: clip тоже обрезает, но прокрутки нет и быть не может; листает только JS (translateX).
   До 480px (нативный scroll-snap) правило не действует. Первая строка — запасная для старых браузеров. */
@media (min-width: 481px) {
    .about .about-gallery-wrapper {
        overflow: hidden;
        overflow: clip;
    }
}

/* ===== Бургер-меню (_preview-colors; только страницы с <html class="has-burger">: es, en, ru, uk) =====
   Шапка — сетка из трёх колонок: [пусто] [надпись «Adiós contracturas» + подпись] [бургер].
   Боковые колонки равной ширины (minmax(0,1fr)), средняя по содержимому → надпись строго по центру экрана.
   Знак-человечек стоит слева от надписи вплотную и в центровку не входит. Бургер стоит справа от надписи (начало
   третьей колонки = конец надписи) со своим отступом: на компьютере — зеркально знаку, но в 1.5 раза дальше от надписи;
   на телефоне — зеркально знаку целиком (внешний край бургера от правого края экрана = внешний край знака от левого).
   Кнопки ES в шапке нет: выбор языка — внизу боковой панели, которая выезжает справа. Пункты меню — в панели. */
html.has-burger {
    --edge: 20px;                   /* поля шапки по краям (на положение бургера не влияют) */
    --mark-h: 44px;                 /* = высота .logo-mark */
    --mw: calc(var(--mark-h) * 120 / 76);   /* ширина .logo-mark: viewBox 120×76 */
    --bs: calc(var(--mark-h) * 1.2 / 76);   /* px на единицу svg бургера: на 20% крупнее масштаба знака (mark-h/76) */
    --side-dy: 7.11px;              /* сдвиг бургера вниз от центра рамки шапки на визуальный центр блока логотипа
                                       (знак + две строки), измерен по пикселям снимка Chrome */
}

html.has-burger .header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding-left: var(--edge);
    padding-right: var(--edge);
}

html.has-burger .header .container {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Бургер. Размер: масштаб на 20% крупнее знака-человечка, при этом штрихи в самом svg поделены на 1.2, поэтому толщина полосок
   на экране = толщине линий человечка, а кружок (r, обводка, точка) = кружку на его плече; крупнее становятся длины и расстояния.
   Кнопка = ровно размер значка (чтобы расчёт положения был точным); зона нажатия ≥44×44 — невидимая подложка ::before. */
.burger-btn {
    position: relative;
    top: var(--side-dy);
    grid-column: 3;                 /* третья колонка начинается ровно там, где кончается надпись */
    grid-row: 1;
    justify-self: start;
    display: block;
    width: calc(70 * var(--bs));
    height: calc(42 * var(--bs));
    /* Компьютер: расстояние от конца надписи до видимого края бургера = 2.5 × расстояние от видимого края знака до начала надписи
       (зазор 9px + пустое поле знака 0.0375 × его ширины): бургер читается как отдельная кнопка; 2.9167 — пустое поле значка
       слева (в единицах svg). На телефоне (≤768px) положение задаёт зеркальное правило ниже. */
    margin: 0 0 0 calc(2.5 * (9px + 0.0375 * var(--mw)) - 2.9167 * var(--bs));
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.burger-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
}

.burger-btn:hover .burger-icon {
    opacity: 0.8;
}

.burger-btn:focus-visible,
.menu-close:focus-visible {
    outline: 2px solid var(--heading-color);
    outline-offset: 2px;
}

/* Значок по образцу заказчика (viewBox 70×42): кружок на верхней полоске в 1/4 её длины от левого конца (центр x=20, полоска 5…65);
   три полоски через равные промежутки (шаг 12 ед.), кружок не касается средней полоски (просвет 1.79 ед.) */
.burger-icon {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
    html.has-burger { --edge: 16px; --mark-h: 34px; --side-dy: 3.91px; }
    /* Телефон: бургер зеркален знаку целиком: видимый правый край бургера стоит от правого края экрана так же, как видимый
       левый край знака от левого. Начало бургера от конца надписи = зазор 9px + 0.9625 × ширина знака − ширина видимой части бургера. */
    .burger-btn { margin-left: calc(9px + 0.9625 * var(--mw) - 67.083 * var(--bs)); }
}

@media (max-width: 480px) {
    html.has-burger { --mark-h: 31px; --side-dy: 3.38px; }
}

@media (max-width: 375px) {
    html.has-burger { --mark-h: 28px; --side-dy: 3.23px; }
}

/* Затемнение за панелью */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(25, 38, 34, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    touch-action: none;
}

/* Боковая панель */
.site-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1101;
    width: min(320px, 86vw);
    box-sizing: border-box;
    padding: 76px 0 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

html.menu-open,
body.menu-open {
    overflow: hidden;               /* пока панель открыта, страница не прокручивается */
}

body.menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

body.menu-open .site-menu {
    transform: none;
    visibility: visible;
    transition: transform 0.28s ease;
}

.site-menu .nav-menu {
    display: block;
    flex: none;
    width: 100%;
    margin-bottom: 24px;            /* минимальный зазор до блока языков на низких экранах */
}

.site-menu .nav-menu ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

.site-menu .nav-menu li {
    white-space: normal;
    border-bottom: 1px solid rgba(77, 111, 102, 0.14);
}

.site-menu .nav-menu li:first-child {
    border-top: 1px solid rgba(77, 111, 102, 0.14);
}

.site-menu .nav-menu a {
    display: block;
    padding: 16px 24px;
    font-size: 18px;
    text-align: left;
    white-space: normal;
}

.site-menu .nav-menu a::after {
    display: none;                  /* подчёркивание активного пункта заменено полоской слева */
}

.site-menu .nav-menu a.active-nav {
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--primary-color);
}

/* Выбор языка: внизу панели, под пунктами, отделён тонкой линией. Текстовые ссылки без флагов. */
.menu-lang {
    margin-top: auto;               /* прижат к низу панели */
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding: 10px 24px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(77, 111, 102, 0.28);
}

.menu-lang a,
.menu-lang .is-current {
    display: flex;
    align-items: center;
    min-height: 44px;               /* зона нажатия */
    font-size: 16px;
    color: var(--text-color);
    text-decoration: none;
}

.menu-lang a:hover {
    color: var(--nav-active-color);
}

.menu-lang a:focus-visible {
    outline: 2px solid var(--heading-color);
    outline-offset: -2px;
}

.menu-lang .is-current {
    font-weight: 700;
    color: var(--nav-active-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--primary-color);
    text-underline-offset: 6px;
}

.menu-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.menu-close:hover {
    background: var(--secondary-color);
}

@media (prefers-reduced-motion: reduce) {
    .menu-overlay,
    .site-menu,
    body.menu-open .menu-overlay,
    body.menu-open .site-menu {
        transition: none;
    }
}

/* ----- Шапка стала ниже на высоту строки меню: сдвигаем всё, что было привязано к её высоте -----
   Было → стало: компьютер 129.5 → 89.9, 481–768: 115 → 70.6, 376–480: 107 → 66.2, ≤375: 99.4 → 61.8 (замер в Chrome).
   Отступы уменьшены на ту же разницу, чтобы первый экран и заголовки разделов стояли как раньше относительно шапки. */
html.has-burger {
    scroll-padding-top: 82px;       /* было 122 */
}

html.has-burger section,
html.has-burger .about,
html.has-burger .services,
html.has-burger .feedbacks,
html.has-burger .location {
    scroll-margin-top: 82px;
}

html.has-burger #faq {
    scroll-margin-top: 60px !important;     /* у секции FAQ в разметке inline 100px */
}

html.has-burger .faq-item[id] {
    scroll-margin-top: 70px !important;     /* inline 110px */
}

@media (min-width: 769px) {
    html.has-burger .hero {
        margin-top: 60px;                   /* было 100 */
        height: calc(100vh - 60px);
        min-height: calc(100vh - 60px);
    }
}

@media (max-width: 768px) {
    html.has-burger { scroll-padding-top: 56px; }       /* было 94 */

    html.has-burger section,
    html.has-burger .container,
    html.has-burger .about,
    html.has-burger .services,
    html.has-burger .feedbacks,
    html.has-burger .location,
    html.has-burger .footer,
    html.has-burger .hero {
        scroll-margin-top: 56px;
    }

    html.has-burger #faq { scroll-margin-top: 58px !important; }
    html.has-burger .faq-item[id] { scroll-margin-top: 68px !important; }

    html.has-burger .hero { margin-top: 56px; }         /* было 100 */
}

@media (max-width: 480px) {
    html.has-burger .hero { margin-top: 49px; }         /* было 90 */
}

@media (max-width: 375px) {
    html.has-burger .hero { margin-top: 42px; }         /* было 80 */
}


/* ===== Шапка, логотип (_preview-colors; только <html class="has-burger">) =====
   По центру экрана стоит сама надпись («Adiós contracturas» + подпись, обе строки по центру друг друга).
   Знак-человечек — слева от надписи вплотную (зазор 9px, как был) и в центровку не входит: он позиционируется от левого края надписи.
   Строки названия и подписи сближены: подпись поднята на 0.22 × размер названия (между строками был большой запас от
   line-height 1.6), а освободившаяся высота возвращена полями шапки поровну сверху и снизу — высота шапки и все
   привязанные к ней отступы (прокрутка, первый экран) остались прежними. */
html.has-burger {
    --brand-fs: 28px;               /* = font-size названия (как у .logo .brand) */
    --hdr-pad: 15px;                /* прежний вертикальный padding шапки */
}

html.has-burger .header {
    padding-top: calc(var(--hdr-pad) + (2px + var(--brand-fs) * 0.22) / 2);
    padding-bottom: calc(var(--hdr-pad) + (2px + var(--brand-fs) * 0.22) / 2);
}

html.has-burger .logo {
    display: block;
    position: relative;
    width: auto;                    /* рамка = только надпись */
}

html.has-burger .logo-mark-link {
    position: absolute;
    right: calc(100% + 9px);
    top: calc(var(--brand-fs) * 0.4585);   /* верх знака на уровне верха заглавной «A», как раньше */
    margin-top: 0;
}

html.has-burger .logo-mark {
    max-width: none;
}

html.has-burger .logo-tagline {
    margin-top: calc(var(--brand-fs) * -0.22);   /* было 2px */
}

@media (max-width: 768px) {
    html.has-burger { --brand-fs: 22px; --hdr-pad: 10px; }
}

@media (max-width: 480px) {
    html.has-burger { --brand-fs: 20px; }
}

@media (max-width: 375px) {
    html.has-burger { --brand-fs: 18px; }
}