/*
Theme Name: Blocksy Child
Theme URI: https://bonitastudio.com
Description: Child theme personalizado basado en Blocksy.
Author: Isabel Salinero
Author URI: https://bonitastudio.com
Template: blocksy
Version: 1.0
Text Domain: blocksy-child

/* EFECTO EN IMÁGENES DE ESENCIA */

/* Playfair Display – Regular */
@font-face {
  font-family: 'Playfair Display';
  src:
    url('assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2'),
    url('assets/fonts/PlayfairDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Playfair Display – Semi Bold */
@font-face {
  font-family: 'Playfair Display';
  src:
    url('assets/fonts/PlayfairDisplay-SemiBold.woff2') format('woff2'),
    url('assets/fonts/PlayfairDisplay-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Playfair Display – Bold */
@font-face {
  font-family: 'Playfair Display';
  src:
    url('assets/fonts/PlayfairDisplay-Bold.woff2') format('woff2'),
    url('assets/fonts/PlayfairDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter – Regular */
@font-face {
  font-family: 'Inter';
  src:
    url('assets/fonts/Inter-Regular.woff2') format('woff2'),
    url('assets/fonts/Inter-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter – Medium */
@font-face {
  font-family: 'Inter';
  src:
    url('assets/fonts/Inter-Medium.woff2') format('woff2'),
    url('assets/fonts/Inter-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Inter – Semi Bold */
@font-face {
  font-family: 'Inter';
  src:
    url('assets/fonts/Inter-SemiBold.woff2') format('woff2'),
    url('assets/fonts/Inter-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}



@keyframes agrandar {
    from {
        transform: scale(1.1) translateX(20px);
    }

    to {
        transform: scale(1) translateX(0px);
    }
}

@keyframes reducir {
    from {
        transform: scale(1) translateX(0px);
    }

    to {
        transform: scale(1.1) translateX(20px);
    }
}

/* ESTILOS GENERALES DE ESENCIA */


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

:root {
    --theme-heading-font-family: 'Playfair Display', serif;
}

h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

h2{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}

h3,h5,h6{
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

h4{
    font-family: 'Inter';
    font-weight: 400;
}

body,p, label, a {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.ct-container-full[data-vertical-spacing*=top] {
    padding: 0;
}

.button-esencia a {
    letter-spacing: 1px;
}

.button-esencia{
    opacity: .8;
}

.hero-esencia, .contacto-esencia {
    max-height: 100vh;
}

.conEfecto img {
    transform: scale(1.1) translateX(20px);
}

.hero-image, .contacto-image {
    overflow: hidden;
    height: 100%;
    transition: all 0.5s ease;
}

.efecto-image img {
    animation: agrandar 1s 1 forwards;
}

.noEfecto-image img {
    animation: reducir 1s 1 forwards;
}

.conEfecto {
    overflow: hidden;
}

.sinEfecto {
    animation: none;
}

.modulo-esencia {
    padding: 88px 40px;
    margin-block-end: 0 !important;
}

/* HOME PAGE ESENCIA */
body.home .is-layout-flex.hero-esencia-desktop {
    display: flex;
}

body.home .is-layout-flex.hero-esencia-mobile {
    display: none;
}

.about-esencia {
    position: relative;
    margin-block-end: 0 !important;
}

.about-esencia::after {
    content: '';
    z-index: -1;
    position: absolute;
    width: 60%;
    height: 100%;
    right: 0;
    background-color: var(--theme-palette-color-1); /* detallar en la guía que es el color 1 de la paleta */
}

.about-esencia .wp-block-columns {
    max-width: 1024px;
    margin: 0 auto;
}

.about-esencia figure {
    width: 400px;
    height: 400px;
    padding-right: 32px;
    display: block;
}


.about-esencia img {
    width: 100%;
    height: 100%;
}


/* ABOUT PAGE */

.row-hero-about-page {
    padding-top: 88px;
}

.row-hero-about-page .left-image {
    padding-bottom: 88px;
}

.border-column-esencia {
    padding: 48px;
}

/* CONTACT PAGE */

.contacto-esencia div.wpforms-container-full input, .contacto-esencia div.wpforms-container-full input:focus,.contacto-esencia div.wpforms-container-full input:focus:invalid,
.contacto-esencia div.wpforms-container-full textarea, .contacto-esencia div.wpforms-container-full textarea:focus:invalid, .contacto-esencia div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error{
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
}

.contacto-esencia div.wpforms-container-full .wpforms-field{
    padding: 16px 0;
}

.contacto-esencia div.wpforms-container-full .wpforms-field-label{
    margin: 0;
    font-weight: normal;
    font-size: 16px;
}

.contacto-esencia div.wpforms-container-full button{
    padding: 8px 24px;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: 24px;
}

.contacto-esencia div.wpforms-container-full button:hover{
    opacity: .8;
}

.contacto-esencia div.wpforms-container-full button:focus:after{
    border: none;
}

.contacto-esencia div.wpforms-container-full .wpforms-required-label{
    display: none;
}

.contacto-esencia div.wpforms-container-full .wpforms-confirmation-container-full{
    background: none;
    border: none;
    text-align: center;
}



/* FOOTER */


footer .ct-container {
    padding-bottom: 24px;
}

footer .ct-container .ct-widget:not(:first-child) {
    margin-top: 16px;
}

footer li{
    padding-bottom: 8px;
}

footer li:last-child{
    padding-bottom: 0;
}


@media screen and (min-width: 768px) {
    .hide-desktop {
        display: none;
    }
}


@media screen and (max-width: 768px) {

    body .hide-mobile,
    .hide-mobile {
        display: none;
    }

    /* HOME PAGE*/

    body.home .is-layout-flex.hero-esencia-desktop {
        display: none;
    }

    body.home .is-layout-flex.hero-esencia-mobile {
        display: flex;
    }

    .hero-esencia {
        max-height: 100%;
        position: relative;
    }

    .hero-esencia-text {
        position: absolute;
    }

    .hero-image {
        width: 100vw;
        height: 100vh;
    }

    .hero-image.wp-block-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .efecto-image img {
        animation: none;
    }

    .conEfecto img {
        transform: scale(1) translateX(0);
    }

    .modulo-esencia {
        margin: 0;
        padding: 40px 24px;
    }

    .about-esencia .wp-block-columns {
        padding: 40px 0;
    }

    .about-esencia figure {
        width: 100%;
        height: 500px;
        padding: 0 24px;
    }

    .about-esencia-text {
        padding: 24px;
    }

    .about-esencia::after {
        height: 50%;
        max-height: 372px;
        top: 0;
    }

    .button-esencia.secondary-button {
        border: 1px solid var(--theme-palette-color-2); /* detallar en la guía que es el color 2 de la paleta */
    }

    /* PORTFOLIO PAGE */
    .portfolio-esencia{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

     .portfolio-esencia .portfolio-esencia-row{
        gap:24px;
    }

    /* ABOUT PAGE */

    .row-hero-about-page {
        padding-top: 0;
    }

    .row-hero-about-page .left-image {
        padding-bottom: 0;
    }

    .border-column-esencia {
        border: none;
    }

    .border-column-esencia:first-child {
        padding-top: 0;
    }

    .border-column-esencia:last-child {
        padding-bottom: 0;
    }

    .contacto-esencia {
        margin-block-end: 0 !important;
        padding: 80px 32px;
        max-height: 100%;
    }

    .error-cover-esencia{
        margin-top: 0 !important;
    }


}