/* Estilos del bloque hero-principal. Archivo generado desde la base comun de la pagina principal. */

.wp-block-onlines-hero-principal,
.wp-block-onlines-hero-principal::before,
.wp-block-onlines-hero-principal::after {
    box-sizing: border-box;
}

.wp-block-onlines-hero-principal {
    max-width: none;
    margin-top: 0 !important;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--wp--preset--font-family--barlow, "Satoshi Variable", Satoshi, Arial, Helvetica, sans-serif);
}

.wp-block-onlines-hero-principal *,
.wp-block-onlines-hero-principal *::before,
.wp-block-onlines-hero-principal *::after {
    box-sizing: border-box;
}

.wp-block-onlines-hero-principal.alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.editor-styles-wrapper .wp-block-onlines-hero-principal.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.grimaco-button {
    --grimaco-button-accent: var(--wp--preset--color--custom-naranja, #FF5F00);
    --grimaco-button-contrast: var(--wp--preset--color--custom-blanco, #FFFFFF);
    --grimaco-button-text: var(--wp--preset--color--custom-negro, #111111);
    display: inline-flex;
    align-items: center;
    gap: 13px;
    min-height: 56px;
    padding: 7px 7px 7px 25px;
    border-radius: 999px;
    background: var(--grimaco-button-contrast);
    border: 1px solid var(--grimaco-button-accent);
    color: var(--grimaco-button-text);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    width: max-content;
    max-width: 100%;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.grimaco-button {
    cursor: pointer;
    pointer-events: auto;
}

.grimaco-button__text {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    white-space: nowrap;
}

.grimaco-button__icon {
    display: inline-grid;
    place-items: center;
    width: 41px;
    height: 41px;
    border-radius: 50%;
    flex: 0 0 41px;
    background: var(--grimaco-button-accent);
    color: var(--grimaco-button-contrast);
    transition: background-color 180ms ease, color 180ms ease;
}

.grimaco-button:hover,
.grimaco-button:focus-visible {
    color: var(--grimaco-button-contrast);
    background: var(--grimaco-button-accent);
    border-color: var(--grimaco-button-accent);
}

.grimaco-button:hover .grimaco-button__icon,
.grimaco-button:focus-visible .grimaco-button__icon {
    background: var(--grimaco-button-contrast);
    color: var(--grimaco-button-accent);
}

.grimaco-editor-link,
.grimaco-editor-media-control,
.grimaco-editor-repeater-item {
    width: 100%;
}

.grimaco-editor-link {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-negro, #111111) 14%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--wp--preset--color--custom-blanco, #FFFFFF) 97%, var(--wp--preset--color--custom-negro, #111111) 3%);
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.14);
}

.grimaco-editor-link__label,
.grimaco-editor-media-control__title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wp--preset--color--custom-negro, #111111);
}

.grimaco-editor-link .components-base-control__label,
.grimaco-editor-link .components-toggle-control__label,
.grimaco-editor-link .components-input-control__label,
.grimaco-editor-link .block-editor-url-input__label {
    color: var(--wp--preset--color--custom-negro, #111111);
}

.grimaco-editor-link input,
.grimaco-editor-link .components-input-control__input,
.grimaco-editor-link .block-editor-url-input__input {
    color: var(--wp--preset--color--custom-negro, #111111);
    background: var(--wp--preset--color--custom-blanco, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-negro, #111111) 16%, transparent);
}

.grimaco-editor-link input::placeholder,
.grimaco-editor-link .components-input-control__input::placeholder,
.grimaco-editor-link .block-editor-url-input__input::placeholder {
    color: color-mix(in srgb, var(--wp--preset--color--custom-negro, #111111) 48%, transparent);
}

.grimaco-editor-link .components-form-toggle__track {
    border-color: color-mix(in srgb, var(--wp--preset--color--custom-negro, #111111) 28%, transparent);
    background: color-mix(in srgb, var(--wp--preset--color--custom-negro, #111111) 20%, transparent);
}

.grimaco-editor-link .components-form-toggle__input:checked + .components-form-toggle__track {
    background: var(--wp--preset--color--custom-naranja, #FF5F00);
    border-color: var(--wp--preset--color--custom-naranja, #FF5F00);
}

.grimaco-editor-media-control {
    margin-bottom: 18px;
}

.grimaco-editor-media-control__preview {
    display: block;
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 5px;
}

.grimaco-editor-repeater-item {
    padding: 14px 0;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-negro, #111111) 14%, transparent);
}

.grimaco-editor-repeater-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.hero-principal {
    --hero-color-naranja: var(--wp--preset--color--custom-naranja, #FF5F00);
    --hero-color-negro: var(--wp--preset--color--custom-negro, #111111);
    --hero-color-blanco: var(--wp--preset--color--custom-blanco, #FFFFFF);
    --hero-header-offset: var(--grimaco-header-height, 0px);
    --hero-inner-width-desktop: 782px;
    --hero-inner-width-tablet: 782px;
    --hero-inline-padding-desktop: max(24px, calc((100% - var(--hero-inner-width-desktop)) / 2));
    --hero-inline-padding-mobile: 24px;
    --hero-title-size-desktop: 90px;
    --hero-title-size-mobile: 48px;
    --hero-button-size-desktop: 16px;
    --hero-button-size-mobile: 15px;
    --hero-padding-top-desktop: 265px;
    --hero-padding-top-mobile: 160px;
    --hero-padding-bottom-desktop: 265px;
    --hero-padding-bottom-mobile: 150px;
    --hero-overlay-color: color-mix(in srgb, var(--hero-color-negro) 8%, transparent);
    --hero-veil-start: color-mix(in srgb, var(--hero-color-naranja) 82%, transparent);
    --hero-veil-mid: color-mix(in srgb, var(--hero-color-naranja) 38%, transparent);
}

.hero-principal__preview {
    min-height: 720px;
}

.hero-principal__preview,
.hero-principal {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--hero-padding-top-desktop) var(--hero-inline-padding-desktop) var(--hero-padding-bottom-desktop);
    color: var(--hero-color-blanco);
    background: var(--hero-color-negro);
}

.hero-principal {
    height: calc(100vh - var(--hero-header-offset));
}

.hero-principal__picture,
.hero-principal__picture img,
.hero-principal__image,
.hero-principal__overlay,
.hero-principal__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-principal__picture img,
.hero-principal__image {
    display: block;
    width: 100%;
    max-width: none;
    object-fit: cover;
}

.hero-principal__overlay {
    z-index: -1;
    background: var(--hero-overlay-color);
}

.hero-principal__veil {
    z-index: -1;
    top: auto;
    height: 68%;
    background: linear-gradient(0deg, var(--hero-veil-start) 0%, var(--hero-veil-mid) 62%, transparent 100%);
}

.hero-principal__picture {
    display: block;
    z-index: -2;
}

.wp-block-onlines-hero-principal.has-hero-parallax .hero-principal__picture,
.wp-block-onlines-hero-principal.has-hero-parallax .hero-principal__overlay,
.wp-block-onlines-hero-principal.has-hero-parallax .hero-principal__inner {
    will-change: transform;
}

.hero-principal__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    width: min(100%, var(--hero-inner-width-desktop));
    text-align: center;
}

.hero-principal__title {
    margin: 0;
    color: var(--hero-color-blanco);
    font-size: 83px;
    font-weight: 700;
    line-height: 0.97;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.hero-principal__button {
    font-size: var(--hero-button-size-desktop);
}

.hero-principal__button.grimaco-button {
    font-weight: 700;
}

.wp-block-onlines-hero-principal.has-hero-animations .hero-principal__title-visual {
    display: block;
    overflow: visible;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

.wp-block-onlines-hero-principal.has-hero-animations .hero-principal__title-word {
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(0, 0.12em, 0);
    transform-origin: 50% 100%;
    transition:
        opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.96s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.96s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}

.wp-block-onlines-hero-principal.has-hero-animations.is-title-visible .hero-principal__title-word {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

.wp-block-onlines-hero-principal.has-hero-animations .hero-principal__button {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        opacity 0.95s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.95s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0ms, 0ms, 0ms, 420ms, 420ms;
    will-change: opacity, transform;
}

.wp-block-onlines-hero-principal.has-hero-animations.is-button-visible .hero-principal__button {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.hero-principal__button.grimaco-button:hover,
.hero-principal__button.grimaco-button:focus-visible {
    background: var(--wp--preset--color--custom-naranja, #ff5f00);
    border-color: var(--wp--preset--color--custom-naranja, #ff5f00);
    color: var(--wp--preset--color--custom-blanco, #ffffff);
}

.hero-principal__button.grimaco-button:hover .grimaco-button__icon,
.hero-principal__button.grimaco-button:focus-visible .grimaco-button__icon {
    background: var(--wp--preset--color--custom-blanco, #ffffff);
    color: var(--wp--preset--color--custom-naranja, #ff5f00);
}

.hero-principal__button.grimaco-button:hover .grimaco-button__text,
.hero-principal__button.grimaco-button:focus-visible .grimaco-button__text,
.hero-principal__button.grimaco-button:hover .grimaco-button__text *,
.hero-principal__button.grimaco-button:focus-visible .grimaco-button__text * {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
.wp-block-onlines-hero-principal.has-hero-animations .hero-principal__title-word,
    .wp-block-onlines-hero-principal.has-hero-animations .hero-principal__button {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}

@media (max-width: 1023px) {

.hero-principal__title {
    font-size: 50px;
}

.wp-block-onlines-hero-principal.alignfull {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

.hero-principal__preview {
        min-height: 620px;
    }

.hero-principal__preview,
    .hero-principal {
        padding: var(--hero-padding-top-mobile) var(--hero-inline-padding-mobile) var(--hero-padding-bottom-mobile);
    }

.hero-principal {
    height: calc(100vh - var(--hero-header-offset));
    }

.hero-principal__inner {
        gap: 34px;
        width: min(100%, var(--hero-inner-width-tablet));
    }

.hero-principal__button {
        font-size: var(--hero-button-size-mobile);
    }
}

@media (max-width: 599px) {
.grimaco-button {
        display: flex;
        width: 100%;
        justify-content: space-between;
        min-height: 52px;
        padding-left: 18px;
    }

.grimaco-button__text {
        white-space: normal;
        text-align: left;
    }
}