/*
Theme Name: Harmonia del Massatge
Description: Tema hijo de Hello Elementor para Harmonia del Massatge.
Author: Viewgital
Template: hello-elementor
Version: 1.0.0
Text Domain: harmonia-del-massatge
*/


/* ========================================
   ARCHIVOS DEL PROYECTO
======================================== */

/*--- SECTION HOME ---*/
@import url("assets/css/root.css");
@import url("assets/css/header.css");
@import url("assets/css/hero.css");
@import url("assets/css/wellness.css");
@import url("assets/css/services.css");
@import url("assets/css/why.css");
@import url("assets/css/why-story.css");
@import url("assets/css/why-booking.css");
@import url("assets/css/why-cta.css");
@import url("assets/css/testimonials.css");
@import url("assets/css/about.css");
@import url("assets/css/blog.css");
@import url("assets/css/gallery.css");
@import url("assets/css/reels.css");
@import url("assets/css/faq.css");
@import url("assets/css/contact.css");
@import url("assets/css/cta-final.css");
@import url("assets/css/footer.css");

/*--- SECTION BLOG ---*/
@import url("assets/css/blog/header.css");
@import url("assets/css/blog/featured.css");
@import url("assets/css/blog/latest.css");

/*--- SECTION SINGLE BLOG ---*/
@import url("assets/css/blog/single-blog.css");

/*--- SECTION CATEGORIES ---*/
@import url("assets/css/blog/categories.css");

/*--- SECTION SEARCH-RESULT ---*/
@import url("assets/css/blog/search-result.css");

/* ========================================
   RESET GENERAL
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

body {
    min-width: 320px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: var(--hdm-text);
    background: var(--hdm-background);
    font-family: var(--hdm-font-body);
    font-size: var(--hdm-font-base);
    font-weight: var(--hdm-weight-regular);
    line-height: var(--hdm-line-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ========================================
   TIPOGRAFÍA
======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--hdm-primary-dark);
    font-family: var(--hdm-font-heading);
    font-weight: var(--hdm-weight-semibold);
    line-height: var(--hdm-line-heading);
    letter-spacing: var(--hdm-letter-tight);
}

h1 {
    font-size: var(--hdm-font-h1);
    line-height: var(--hdm-line-tight);
}

h2 {
    font-size: var(--hdm-font-h2);
}

h3 {
    font-size: var(--hdm-font-h3);
}

h4 {
    font-size: var(--hdm-font-h4);
}

h5 {
    font-size: var(--hdm-font-lg);
}

h6 {
    font-size: var(--hdm-font-base);
}

p {
    margin: 0 0 var(--hdm-space-4);
}

p:last-child {
    margin-bottom: 0;
}

strong,
b {
    font-weight: var(--hdm-weight-semibold);
}

small {
    font-size: var(--hdm-font-sm);
}


/* ========================================
   ENLACES
======================================== */

a {
    color: var(--hdm-primary);
    text-decoration: none;
    transition:
        color var(--hdm-transition-normal),
        background-color var(--hdm-transition-normal);
}

a:hover {
    color: var(--hdm-accent);
}

a:focus-visible {
    border-radius: var(--hdm-radius-sm);
    outline: 2px solid var(--hdm-accent);
    outline-offset: 3px;
}


/* ========================================
   IMÁGENES
======================================== */

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

figure {
    margin: 0;
}


/* ========================================
   BOTONES
======================================== */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border: 0;
    border-radius: var(--hdm-button-radius);
    font-family: var(--hdm-font-body);
    font-size: var(--hdm-button-font-size);
    font-weight: var(--hdm-button-font-weight);
    line-height: var(--hdm-button-line-height);
    cursor: pointer;
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: 3px solid rgb(166 95 70 / 35%);
    outline-offset: 3px;
}


/* ========================================
   FORMULARIOS
======================================== */

input,
select,
textarea {
    width: 100%;
    border: var(--hdm-border-width) var(--hdm-border-style) var(--hdm-border);
    border-radius: var(--hdm-radius-md);
    color: var(--hdm-text);
    background: var(--hdm-white);
    font-family: var(--hdm-font-body);
    font-size: var(--hdm-font-base);
    line-height: var(--hdm-line-normal);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--hdm-primary);
    outline: 3px solid rgb(63 88 72 / 12%);
}

textarea {
    resize: vertical;
}


/* ========================================
   SELECCIÓN DE TEXTO
======================================== */

::selection {
    color: var(--hdm-white-pure);
    background: var(--hdm-primary);
}


/* ========================================
   CONTENEDORES GENERALES
======================================== */

.hdm-container {
    width: 100%;
    max-width: var(--hdm-container);
    margin: 0 auto;
    padding-right: var(--hdm-page-desktop);
    padding-left: var(--hdm-page-desktop);
}

.hdm-container--small {
    max-width: var(--hdm-container-small);
}

.hdm-content {
    width: 100%;
    max-width: var(--hdm-content);
}


/* ========================================
   SECCIONES GENERALES
======================================== */

.hdm-section {
    position: relative;
    width: 100%;
    padding-top: var(--hdm-section-desktop);
    padding-bottom: var(--hdm-section-desktop);
}

.hdm-section--cream {
    background: var(--hdm-cream);
}

.hdm-section--sage {
    background: var(--hdm-sage);
}

.hdm-section--dark {
    color: var(--hdm-white);
    background: var(--hdm-primary-dark);
}

.hdm-section--dark h1,
.hdm-section--dark h2,
.hdm-section--dark h3,
.hdm-section--dark h4,
.hdm-section--dark h5,
.hdm-section--dark h6 {
    color: var(--hdm-white);
}


/* ========================================
   ACCESIBILIDAD
======================================== */

.hdm-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    white-space: nowrap !important;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1024px) {
    html {
        scroll-padding-top: 100px;
    }

    .hdm-container {
        padding-right: var(--hdm-page-tablet);
        padding-left: var(--hdm-page-tablet);
    }

    .hdm-section {
        padding-top: var(--hdm-section-tablet);
        padding-bottom: var(--hdm-section-tablet);
    }
}


/* ========================================
   MÓVIL
======================================== */

@media (max-width: 767px) {
    html {
        scroll-padding-top: 90px;
    }

    .hdm-container {
        padding-right: var(--hdm-page-mobile);
        padding-left: var(--hdm-page-mobile);
    }

    .hdm-section {
        padding-top: var(--hdm-section-mobile);
        padding-bottom: var(--hdm-section-mobile);
    }
}


/* ========================================
   MOVIMIENTO REDUCIDO
======================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}