* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/****
overrides for default styles
****/
.wp-block-embed {
    width: 100%;
    max-width: 100%;
}

.wp-block-embed .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.wp-block-embed .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body {
    color: var(--text-color);
    font-family: "Nunito Sans", sans-serif;
    overflow-x: hidden;
    position: relative;
    font-size: 16px;
}

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

a {
    color: var(--primary);
}

a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5rem;
}

h1,
h2 {
    color: var(--blue-1);
    font-weight: 800;
}


h3 {
    color: var(--primary);
}

h4 {
    color: var(--accent-1);
}

h5,
h6 {
    color: var(--accent-1-dark);
    font-weight: 700;
}

h3,
h4,
h5,
h6 {
    margin-top: 2rem;
}

h1 {
    font-size: var(--font-size-xxx-large);
    margin-top: 0;
}

h2 {
    font-size: var(--font-size-xx-large);
    margin-top: 2.2rem;
}

h2:first-child {
    margin-top: 0;
}

h3 {
    font-size: var(--font-size-x-large);
}

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

h5 {
    font-size: var(--font-size-medium);
}

h6 {
    font-size: var(--font-size-small);
}

h2+h3,
h3+h4,
h4+h5,
h5+h6 {
    margin-top: 0.4rem;
}

hgroup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & p {
        font-size: var(--font-size-medium);
    }
}

.heading {
    --color: var(--primary);
    --font-size: var(--font-size-x-large);
    color: var(--color);
    font-size: var(--font-size);

    &.heading--extra-large {
        --font-size: var(--font-size-xxx-large);
    }

    &.heading--large {
        --font-size: var(--font-size-xx-large);
    }

    &.heading--medium {
        --font-size: var(--font-size-large);
    }

    &.heading--small {
        --font-size: var(--font-size-medium);
    }

    &.heading--extra-small {
        --font-size: var(--font-size-small);
    }

    &.heading--default {
        --color: var(--primary);
    }

    &.heading--accent-color {
        --color: var(--accent-1-dark);
    }

    &.heading--light-color {
        --color: var(--text-color-light);
    }

    &.heading--light-color-2 {
        --color: var(--secondary-light);
    }
}

p,
ul,
ol {
    margin: 0 0 1.4rem 0;
}

p+h2,
p+h3,
p+h4,
p+h5,
p+h6,
ul+h2,
ul+h3,
ul+h4,
ul+h5,
ul+h6,
ol+h2,
ol+h3,
ol+h4,
ol+h5,
ol+h6 {
    margin-top: 0.4rem;
}


p,
li {
    line-height: 1.65;
}


/* buttons */
.btn {

    --button-color: var(--primary);
    --button-color-hover: var(--blue-1);
    --button-color-border: var(--primary);
    --button-color-border-hover: var(--blue-1);
    --button-color-text: var(--text-color-light-80);
    --button-color-text-hover: var(--text-color-light);
    --button-font-size: var(--font-size-medium);

    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 10rem;
    text-decoration: none;
    font-weight: 800;
    background-color: var(--button-color);
    border: 1px solid var(--button-color-border);
    color: var(--button-color-text);
    font-size: var(--button-font-size);

    &:hover {
        background-color: var(--button-color-hover);
        border-color: var(--button-color-border-hover);
        color: var(--button-color-text-hover);
    }

    &.btn--large {
        --button-font-size: var(--font-size-large);
        padding: 0.75rem 1.5rem;
    }

    &.btn--medium {
        --button-font-size: var(--font-size-medium);
        padding: 0.5rem 1rem;
    }

    &.btn--small {
        --button-font-size: var(--font-size-small);
        padding: 0.25rem 0.5rem;
    }

    &.btn--primary {
        --button-color: var(--primary);
        --button-color-border: var(--primary);
        --button-color-hover: var(--blue-1);
        --button-color-border-hover: var(--blue-1);
        --button-color-text: var(--text-color-light-80);
        --button-color-text-hover: var(--text-color-light);
    }

    &.btn--secondary {
        --button-color: var(--secondary-light);
        --button-color-hover: var(--secondary);
        --button-color-border: var(--blue-1);
        --button-color-border-hover: var(--primary);
        --button-color-text: var(--primary-80);
        --button-color-text-hover: var(--primary);
    }

    &.btn--tertiary {
        --button-color: transparent;
        --button-color-hover: var(--secondary-light);
        --button-color-border: var(--secondary);
        --button-color-border-hover: var(--secondary);
        --button-color-text: var(--text-color-80);
        --button-color-text-hover: var(--text-color);
    }
}


/* content / main sections */

.section {
    width: var(--max-width-full);
    margin: 0 auto;
    padding: 2rem 1rem;

    &.section--nospacing {
        padding-top: 0;
        padding-bottom: 0;
    }

    &.section--spacing__small {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    &.section--spacing__large {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.section--narrow {
    max-width: var(--max-width-narrow);
}

.section--wide {
    max-width: var(--max-width);

    & .container {
        max-width: var(--max-width);
        margin: 0 auto;
    }

    & .container--narrow {
        max-width: var(--max-width-narrow);
        margin: 0 auto;
    }
}

.section--full {
    max-width: var(--max-width-full);
    padding-right: 0;
    padding-left: 0;

    & .container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    & .container--narrow {
        max-width: var(--max-width-narrow);
        margin: 0 auto;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}


/* columns system */
.section--wide {
    & .grid-12 {
        display: flex;
        flex-direction: column;
        gap: var(--grid-gap);
        align-items: start;
    }

    & .col-span-1,
    & .col-span-2,
    & .col-span-3,
    & .col-span-4,
    & .col-span-5,
    & .col-span-6,
    & .col-span-7,
    & .col-span-8,
    & .col-span-9,
    & .col-span-10,
    & .col-span-11,
    & .col-span-12 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    & .column-inner {
        --column-inner-gap: 0;
        --column-inner-align: flex-start;
        display: flex;
        flex-direction: column;
        align-items: var(--column-inner-align);

        gap: var(--column-inner-gap);

        &.column-inner--align-left {
            --column-inner-align: start;
        }

        &.column-inner--align-center {
            --column-inner-align: center;
        }

        &.column-inner--align-right {
            --column-inner-align: end;
        }

        &.column-inner--align-stretch {
            --column-inner-align: stretch;
        }

        &.column-inner--full-height {
            height: 100%;
        }

        &.column-inner--gap-1 {
            --column-inner-gap: 1rem;
        }

        &.column-inner--gap-2 {
            --column-inner-gap: 2rem;
        }

        &.column-inner--gap-3 {
            --column-inner-gap: 3rem;
        }
    }
}


/* hero slider */
.slider-container {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    height: 100%;
}

.slider-container .swiper {
    width: 100%;
    height: 100%;
}

/* Slides con imágenes/video (opcional, usar cuando aplique) */
.slider-container--media .swiper-slide a,
.slider-container--media .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

.slider-container--media .swiper-slide img {
    /* aspect-ratio: 16 / 9; */
    object-fit: cover;
}




/* media queries */
@media (min-width: 768px) {
    .section {
        padding: 2rem 0;
    }

    .section--wide {
        & .container {
            padding-right: 0;
            padding-left: 0;
        }

        & .container--narrow {
            padding-right: 0;
            padding-left: 0;
        }
    }

    .section--wide {

        & .grid-12 {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: var(--grid-gap);
            align-items: start;

        }

        & .col-span-1 {
            grid-column-end: span 1;
        }

        & .col-span-2 {
            grid-column-end: span 2;
        }

        & .col-span-3 {
            grid-column-end: span 3;
        }

        & .col-span-4 {
            grid-column-end: span 4;
        }

        & .col-span-5 {
            grid-column: span 5;
        }

        & .col-span-6 {
            grid-column-end: span 6;
        }

        & .col-span-7 {
            grid-column-end: span 7;
        }

        & .col-span-8 {
            grid-column-end: span 8;
        }

        & .col-span-9 {
            grid-column-end: span 9;
        }

        & .col-span-10 {
            grid-column-end: span 10;
        }

        & .col-span-11 {
            grid-column-end: span 11;
        }

        & .col-span-12 {
            grid-column-end: span 12;
        }

        & .col-start-1 {
            grid-column-start: 1;
        }

        & .col-start-2 {
            grid-column-start: 2;
        }

        & .col-start-3 {
            grid-column-start: 3;
        }

        & .col-start-4 {
            grid-column-start: 4;
        }

        & .col-start-5 {
            grid-column-start: 5;
        }

        & .col-start-6 {
            grid-column-start: 6;
        }

        & .col-start-7 {
            grid-column-start: 7;
        }

        & .col-start-8 {
            grid-column-start: 8;
        }

        & .col-start-9 {
            grid-column-start: 9;
        }

        & .col-start-10 {
            grid-column-start: 10;
        }

        & .col-start-11 {
            grid-column-start: 11;
        }

        & .col-start-12 {
            grid-column-start: 12;
        }
    }
}