/* ===================================
   ATABEY MASSAGE - CSS OPTIMIZADO
   =================================== */

/* ===================================
   BACKGROUNDS
   =================================== */
html,
body,
#header.web,
#main-buttons,
.tab,
.row.row-eq-height-xs.default.row-mg .section {
    background: #fffef4 !important;
}

/* ===================================
   OCULTAR HEADER
   =================================== */
#header {
    display: none !important;
}

/* ===================================
   TIPOGRAFÍA - TÍTULOS
   =================================== */
.cap,
.title-main,
.container-caption,
.title-small,
.title-sub {
    font-family: "Cormorant", serif !important;
    color: #333333 !important;
}

/* Títulos grandes (h2) */
.cap,
.title-main,
.container-caption {
    font-weight: 600 !important;
}

/* Títulos medios (h3) */
.title-small {
    font-weight: 600 !important;
    font-size: 18px !important;
}

/* Subtítulos */
.title-sub {
    font-weight: 400 !important;
    color: #555555 !important;
}

/* ===================================
   TIPOGRAFÍA - TEXTO GENERAL
   =================================== */
.txt,
.content {
    font-family: "Inter", sans-serif !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    color: #4a4a4a !important;
    line-height: 1.6 !important;
}

/* Metadata */
.badge,
.time {
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    color: #333333 !important;
}

/* ===================================
   BORDER-RADIUS
   =================================== */
/* 8px radius */
.nav-trigger,
.row.row-eq-height-xs.default.row-mg .section,
.tab {
    border-radius: 8px !important;
}

/* 30px radius */
#main-buttons .btn {
    border-radius: 30px !important;
}

/* ===================================
   SOMBRAS
   =================================== */
.row.row-eq-height-xs.default.row-mg .section,
.tab {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* ===================================
   BORDES
   =================================== */
/* Borde 2px */
#header.web,
.row.row-eq-height-xs.default.row-mg .section {
    border: 2px solid #8fbc8f !important;
}

/* Borde 1px */
.tab {
    border: 1px solid #8fbc8f !important;
}

/* ===================================
   NAVEGACIÓN
   =================================== */
.nav-trigger {
    background-color: #8fbc8f !important;
    background-image: none !important;
    box-shadow: none !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nav-trigger i {
    color: #333333 !important;
}

/* ===================================
   HERO SECTION
   =================================== */
#main-buttons {
    background-image: none !important;
    background-color: transparent !important;
    padding: 30px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
}

#main-buttons .company-name {
    display: none !important;
}

#main-buttons .btn {
    overflow: hidden;
}

.btn.book.btn-with-icon.custom::after {
    color: #333333 !important;
}

/* Reset contenedores internos */
#main-buttons .container-fluid,
#main-buttons .container,
#main-buttons .column,
#main-buttons .wrapper,
#main-buttons .inner,
#main-buttons .bar {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
}

/* ===================================
   OCULTAR SECCIONES
   =================================== */
#about,
#about-us,
#aboutus,
div.col-sm-4.col-md-6:has(> #about-us) {
    display: none !important;
    visibility: hidden !important;
}

/* ===================================
   RESPONSIVE - GRID GAP
   =================================== */
@media (min-width: 992px) {
    .row.row-eq-height-xs.default.row-mg {
        display: flex !important;
        gap: 150px !important;
    }
}