/* ============================================================
   CASA DE VIDA IDN
   Global Update Styles
   Archivo: main-update.css
   ============================================================ */


/* ============================================================
   01. WEBFONTS
   ============================================================ */

/* Achemost - Headings */
@font-face {
    font-family: 'Achemost';
    src:
        url('../fonts/Achemost-L3gln.woff2') format('woff2'),
        url('../fonts/Achemost-L3gln.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Barcelony - Signature */
@font-face {
    font-family: 'Barcelony';
    src:
        url('../fonts/Barcelony.woff2') format('woff2'),
        url('../fonts/Barcelony.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Articulat CF - Normal */
@font-face {
    font-family: 'Articulat CF';
    src:
        url('../fonts/ArticulatCF-Normal.woff2') format('woff2'),
        url('../fonts/ArticulatCF-Normal.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Articulat CF - Medium */
@font-face {
    font-family: 'Articulat CF';
    src:
        url('../fonts/ArticulatCF-Medium.woff2') format('woff2'),
        url('../fonts/ArticulatCF-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Articulat CF - Medium Oblique */
@font-face {
    font-family: 'Articulat CF';
    src:
        url('../fonts/ArticulatCF-MediumOblique.woff2') format('woff2'),
        url('../fonts/ArticulatCF-MediumOblique.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Articulat CF - Demi Bold */
@font-face {
    font-family: 'Articulat CF';
    src:
        url('../fonts/ArticulatCF-DemiBold.woff2') format('woff2'),
        url('../fonts/ArticulatCF-DemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Articulat CF - Bold */
@font-face {
    font-family: 'Articulat CF';
    src:
        url('../fonts/ArticulatCF-Bold.woff2') format('woff2'),
        url('../fonts/ArticulatCF-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   02. DESIGN TOKENS
   ============================================================ */

:root {
    /* Brand */
    --cdv-blue: #1f55ac;
    --cdv-blue-hover: #174895;
    --cdv-blue-active: #123d80;

    /* Neutral */
    --cdv-gray: #e6e6e6;
    --cdv-white: #ffffff;

    /* Typography */
    --cdv-font-heading: 'Achemost', sans-serif;
    --cdv-font-body: 'Articulat CF', Arial, Helvetica, sans-serif;
    --cdv-font-sign: 'Barcelony', cursive;
}


/* ============================================================
   03. GLOBAL TYPOGRAPHY
   ============================================================ */

html,
body {
    font-family: var(--cdv-font-body) !important;
}

body {
    font-weight: 400 !important;
}

button,
input,
textarea,
select,
option,
label {
    font-family: var(--cdv-font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--cdv-font-heading) !important;
    font-weight: 400 !important;
}

/* Tipografía manuscrita / firma */
.text-sign-live {
    font-family: var(--cdv-font-sign) !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Articulat CF helpers */
.font-normal {
    font-family: var(--cdv-font-body) !important;
    font-weight: 400 !important;
}

.font-medium {
    font-family: var(--cdv-font-body) !important;
    font-weight: 500 !important;
}

.font-medium-oblique {
    font-family: var(--cdv-font-body) !important;
    font-weight: 500 !important;
    font-style: italic !important;
}

.font-semibold {
    font-family: var(--cdv-font-body) !important;
    font-weight: 600 !important;
}

.font-bold {
    font-family: var(--cdv-font-body) !important;
    font-weight: 700 !important;
}


/* Fuerza Articulat CF sobre la tipografía heredada del tema anterior. */
body,
body p,
body span,
body a,
body li,
body ul,
body ol,
body div,
body section,
body article,
body header,
body footer,
body nav,
body table,
body td,
body th,
body button,
body input,
body textarea,
body select,
body option,
body label {
    font-family: var(--cdv-font-body) !important;
}

/* Los títulos siempre conservan Achemost. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: var(--cdv-font-heading) !important;
    font-weight: 400 !important;
}

/* Barcelony tiene prioridad incluso dentro de títulos u otros componentes. */
body .text-sign-live {
    font-family: var(--cdv-font-sign) !important;
    font-weight: 400 !important;
    font-style: normal !important;
}


/* ============================================================
   04. GLOBAL COLOR HELPERS
   ============================================================ */

.text-primary,
.text-blue {
    color: var(--cdv-blue) !important;
}

.bg-primary,
.bg-blue {
    background-color: var(--cdv-blue) !important;
}

.bg-gray,
.bg-grey,
.bg-gray-light,
.bg-grey-light {
    background-color: var(--cdv-gray) !important;
}

.bg-white {
    background-color: var(--cdv-white) !important;
}

.border-primary,
.border-blue {
    border-color: var(--cdv-blue) !important;
}


/* ============================================================
   05. LINKS
   ============================================================ */

a {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}


/* ============================================================
   06. PRIMARY BUTTONS
   Compatible con clases comunes de Bootstrap y estilos propios.
   ============================================================ */

.btn-primary,
a.btn-primary,
button.btn-primary,
.button-primary,
a.button-primary,
button.button-primary {
    background-color: var(--cdv-blue) !important;
    border-color: var(--cdv-blue) !important;
    color: var(--cdv-white) !important;
    font-family: var(--cdv-font-body) !important;
    font-weight: 600 !important;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
.button-primary:hover,
.button-primary:focus,
a.button-primary:hover,
a.button-primary:focus,
button.button-primary:hover,
button.button-primary:focus {
    background-color: var(--cdv-blue-hover) !important;
    border-color: var(--cdv-blue-hover) !important;
    color: var(--cdv-white) !important;
}

.btn-primary:active,
.btn-primary.active,
.button-primary:active,
.button-primary.active {
    background-color: var(--cdv-blue-active) !important;
    border-color: var(--cdv-blue-active) !important;
    color: var(--cdv-white) !important;
}


/* ============================================================
   07. COMMON BOOTSTRAP 3 PRIMARY COMPONENTS
   Laravel 4.x projects frequently use Bootstrap 3.
   ============================================================ */

.label-primary,
.badge-primary,
.progress-bar,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--cdv-blue) !important;
    border-color: var(--cdv-blue) !important;
    color: var(--cdv-white) !important;
}

.panel-primary {
    border-color: var(--cdv-blue) !important;
}

.panel-primary > .panel-heading {
    background-color: var(--cdv-blue) !important;
    border-color: var(--cdv-blue) !important;
    color: var(--cdv-white) !important;
}


/* ============================================================
   08.01 HERO HOME
   Video Background Fullscreen
   ============================================================ */

.cdv-hero {
    position: relative !important;

    width: 100% !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 600px !important;

    overflow: hidden !important;

    background-color: #000000 !important;

    isolation: isolate;
}


/* ============================================================
   VIDEO
   ============================================================ */

.cdv-hero__media {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 0 !important;

    overflow: hidden !important;
}


.cdv-hero__video {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    transform: translate(-50%, -50%) !important;

    object-fit: cover !important;
    object-position: center center !important;

    pointer-events: none !important;
}


/* ============================================================
   OVERLAY
   ============================================================ */

.cdv-hero__overlay {
    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.16) 0%,
            rgba(0, 0, 0, 0.27) 45%,
            rgba(0, 0, 0, 0.44) 100%
        ) !important;

    pointer-events: none !important;
}


/* ============================================================
   CONTENT
   ============================================================ */

.cdv-hero__content {
    position: relative !important;

    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    padding:
        clamp(100px, 12vh, 150px)
        24px
        clamp(80px, 10vh, 120px) !important;

    text-align: center !important;
}


.cdv-hero__inner {
    width: 100% !important;
    max-width: 1000px !important;

    margin: 0 auto !important;
}


/* ============================================================
   TITLE
   ============================================================ */

.cdv-hero__title {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: var(--cdv-font-heading) !important;
    font-weight: 400 !important;

    text-align: center !important;

    line-height: 1 !important;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.22) !important;
}


.cdv-hero__welcome,
.cdv-hero__name {
    display: block !important;

    color: #ffffff !important;

    font-family: var(--cdv-font-heading) !important;
    font-weight: 400 !important;
}


/* Bienvenidos a */

.cdv-hero__welcome {
    margin-bottom: 8px !important;

    font-size:
        clamp(1.55rem, 2.8vw, 2.8rem) !important;

    line-height: 1.05 !important;
}


/* Casa de Vida IDN */

.cdv-hero__name {
    font-size:
        clamp(2.8rem, 5.6vw, 5.8rem) !important;

    line-height: 0.98 !important;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.cdv-hero__actions {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-wrap: wrap !important;

    gap: 14px !important;

    margin-top: 34px !important;
}


/* ============================================================
   HERO BUTTON BASE
   ============================================================ */

.cdv-hero .cdv-btn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 205px !important;
    min-height: 52px !important;

    padding: 14px 28px !important;

    border: 2px solid transparent !important;
    border-radius: 4px !important;

    font-family: var(--cdv-font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */

.cdv-hero .cdv-btn--primary {
    background-color: #1f55ac !important;
    border-color: #1f55ac !important;

    color: #ffffff !important;
}


.cdv-hero .cdv-btn--primary:hover,
.cdv-hero .cdv-btn--primary:focus {
    background-color: #174895 !important;
    border-color: #174895 !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18) !important;
}


.cdv-hero .cdv-btn--primary:active {
    background-color: #123d80 !important;
    border-color: #123d80 !important;

    transform: translateY(0) !important;
}


/* ============================================================
   WHITE BUTTON
   ============================================================ */

.cdv-hero .cdv-btn--white {
    background-color: #ffffff !important;
    border-color: #ffffff !important;

    color: #1f55ac !important;
}


.cdv-hero .cdv-btn--white:hover,
.cdv-hero .cdv-btn--white:focus {
    background-color: #e6e6e6 !important;
    border-color: #e6e6e6 !important;

    color: #174895 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18) !important;
}


.cdv-hero .cdv-btn--white:active {
    transform: translateY(0) !important;
}


/* ============================================================
   SCROLL INDICATOR
   ============================================================ */

.cdv-hero__scroll {
    position: absolute !important;

    z-index: 3 !important;

    left: 50% !important;
    bottom: 25px !important;

    width: 30px !important;
    height: 46px !important;

    padding: 0 !important;

    transform: translateX(-50%) !important;

    border: 2px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 20px !important;

    background: transparent !important;

    cursor: pointer !important;

    opacity: 0.9 !important;
}


.cdv-hero__scroll span {
    position: absolute !important;

    top: 9px !important;
    left: 50% !important;

    width: 4px !important;
    height: 8px !important;

    transform: translateX(-50%) !important;

    border-radius: 4px !important;

    background-color: #ffffff !important;

    animation: cdvHeroScroll 1.8s infinite !important;
}


@keyframes cdvHeroScroll {

    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 14px);
        opacity: 0;
    }

}


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

@media (max-width: 991px) {

    .cdv-hero {
        min-height: 620px !important;
    }

    .cdv-hero__content {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .cdv-hero__welcome {
        font-size:
            clamp(1.45rem, 3.5vw, 2.3rem) !important;
    }

    .cdv-hero__name {
        font-size:
            clamp(2.6rem, 7vw, 4.8rem) !important;
    }

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

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .cdv-hero {
        width: 100% !important;

        height: 100vh !important;
        height: 100svh !important;

        min-height: 580px !important;
    }


    .cdv-hero__content {
        padding:
            100px
            20px
            80px !important;
    }


    .cdv-hero__welcome {
        margin-bottom: 6px !important;

        font-size:
            clamp(1.35rem, 6vw, 2rem) !important;
    }


    .cdv-hero__name {
        font-size:
            clamp(2.5rem, 10vw, 3.9rem) !important;

        line-height: 1 !important;
    }


    .cdv-hero__actions {
        flex-direction: column !important;

        width: 100% !important;

        max-width: 330px !important;

        margin:
            28px
            auto
            0 !important;

        gap: 10px !important;
    }


    .cdv-hero .cdv-btn {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 50px !important;

        padding:
            13px
            20px !important;
    }


    .cdv-hero__scroll {
        bottom: 18px !important;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .cdv-hero__content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .cdv-hero__welcome {
        font-size: 1.3rem !important;
    }

    .cdv-hero__name {
        font-size: 2.7rem !important;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .cdv-hero__scroll span {
        animation: none !important;
    }

    .cdv-hero .cdv-btn {
        transition: none !important;
    }

}

/* ============================================================
   08. SECTION UPDATES
   Los estilos de cada sección se añadirán desde aquí.
   ============================================================ */

/* 08.01 Header */
/* 08.02 Hero */
/* 08.03 Services */
/* 08.04 About */
/* 08.05 Events */
/* 08.06 Messages */
/* 08.07 Blog */
/* 08.08 Gallery */
/* 08.09 Contact */
/* 08.10 Footer */