/*
 Theme Name:   symmetry child
 Theme URI:    https://symmetry.com
 Description:  symmetry child theme
 Author:       xinxeta
 Author URI:   https://www.xinxeta.es/
 Template:     symmetry
 Version:      v1.0(0.1)
*/

/*

COLORES

Negro   ·   000000  ·   var(--negro)
Blanco  ·   FFFFFF  ·   var(--blanco)
Fondo   ·   F5F5ED  ·   var(--fondo)
Rojo    ·   BC2A24  ·   var(--rojo)
Verde   ·   619C42  ·   var(--verde)
Azul    ·   4470B4  ·   var(--azul)
Naranja ·   FE9A66  ·   var(--naranja)

*/

/*^* FONTS *^*/

@font-face {
    font-family: 'Favorit Pro';
    src: url('fonts/FavoritPro-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Favorit Pro Book';
    src: url('fonts/FavoritPro-Book.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Favorit Pro Book';
    src: url('fonts/FavoritPro-BookItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Favorit Pro';
    src: url('fonts/FavoritPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/*^* CUSTOM *^*/

/*root - variables*/
:root {
    --blanco: #FFFFFF;
    --negro: #000000;
    --fondo: #F5F5ED;
    --rojo: #BC2A24;
    --verde: #619C42;
    --azul: #4470B4;
    --naranja: #FE9A66;

    --favorit: 'Favorit Pro';
    --favoritbook: 'Favorit Pro Book';
}
html {
    font-size: 25px;
}
body, button, input, select, textarea {
    font-family: var(--favorit);
    font-size: 1rem;
}

/*textos colores*/
.texto-blanco h1,
.texto-blanco h2,
.texto-blanco p,
.texto-blanco a {
    color: var(--blanco);
}
.texto-naranja h1,
.texto-naranja h2,
.texto-naranja p,
.texto-naranja a {
    color: var(--naranja);
}
.texto-destacado em {
    color: var(--naranja);
    font-style: normal;
}
.texto-destacado-rojo em {
    color: var(--rojo);
    font-style: normal;
}
.texto-destacado-verde em {
    color: var(--verde);
    font-style: normal;
}
.texto-destacado-azul em {
    color: var(--azul);
    font-style: normal;
}

/*textos tamanyos*/
h1,h2 {
    line-height: 1.3 !important;
}
.texto-jumbo h1 {
    font-size: 4rem;
    line-height: 1 !important;
}
.texto-xxxl p {
    font-size: 2.4rem;
    line-height: 1 !important;
}
.texto-xxl p,
.texto-xxl h1,
.texto-xxl h2 {
    font-size: 2rem;
    line-height: 1 !important;
}
.texto-xl p,
.texto-xl h1,
.texto-xl h2 {
    font-size: 1.4rem;
    line-height: 1 !important;
}
.texto-s p {
    font-size: 0.8rem;
}
.enc-dos h2 {
    font-size: 1.6rem;
    line-height: 1 !important;
}
.mini-titulo h2 {
    font-size: 1.2rem;
    line-height: 1 !important;
}
/*textos estilos*/
.texto-upper p {
    text-transform: uppercase;
}

/*fondos*/
.bg-naranja {
    background-color: var(--naranja);
}
.bg-rojo {
    background-color: var(--rojo);
}
.bg-verde {
    background-color: var(--verde);
}
.bg-azul {
    background-color: var(--azul);
}

/*botones*/
.adc-btn-trans-naranja a {
    font-size: 0.8rem;
    color: var(--negro) !important;
    border: solid 2px var(--negro);
    background-color: var(--fondo);
    border-radius: 30px;
    padding: 12px 24px;
}
.adc-btn-trans-naranja a:hover {
    color: var(--blanco) !important;
    border: solid 2px var(--naranja);
    background-color: var(--naranja);
}

.adc-btn-blanco-naranja a {
    font-size: 0.8rem;
    color: var(--negro) !important;
    border: solid 2px var(--negro);
    background-color: var(--blanco);
    border-radius: 30px;
    padding: 12px 24px;
}
.adc-btn-blanco-naranja a:hover {
    color: var(--blanco) !important;
    border: solid 2px var(--naranja);
    background-color: var(--naranja);
}

.adc-btn-blanco-azul a {
    font-size: 0.8rem;
    color: var(--negro) !important;
    border: solid 2px var(--negro);
    background-color: var(--blanco);
    border-radius: 30px;
    padding: 12px 24px;
}
.adc-btn-blanco-azul a:hover {
    color: var(--blanco) !important;
    border: solid 2px var(--azul);
    background-color: var(--azul);
}

.adc-btn-blanco-verde a {
    font-size: 0.8rem;
    color: var(--negro) !important;
    border: solid 2px var(--negro);
    background-color: var(--blanco);
    border-radius: 30px;
    padding: 12px 24px;
}
.adc-btn-blanco-verde a:hover {
    color: var(--blanco) !important;
    border: solid 2px var(--verde);
    background-color: var(--verde);
}

.adc-btn-blanco-rojo a {
    font-size: 0.8rem;
    color: var(--negro) !important;
    border: solid 2px var(--negro);
    background-color: var(--blanco);
    border-radius: 30px;
    padding: 12px 24px;
}
.adc-btn-blanco-rojo a:hover {
    color: var(--blanco) !important;
    border: solid 2px var(--rojo);
    background-color: var(--rojo);
}

/*espacios*/
.last-nomargin p:last-child {
    margin: 0;
}
.nomargin {
    margin: 0 !important;
}

/*^* HEADER *^*/
/*popup*/
#elementor-popup-modal-351 .dialog-widget-content {
    background-color: #282828;
}
.adc-menu-nav a {
    font-size: 1.6rem;
    line-height: 1 !important;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}
.adc-menu-nav a:hover {
    transform: skewX(-10deg);
}
.adc-menu-nav .elementor-item-active {
    transform: skewX(-10deg);
}

/*bloque imagenes*/
/* Cada bloque de imagen */
.adc-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.adc-img img {
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
}
/* Imagen activa */
.adc-img-active img {
    opacity: 1 !important;
    z-index: 1 !important;
}
/*boton cerrar*/
.dialog-close-button svg {
    display: none;
}
.dialog-close-button::after {
    content: '';
    display: inline-block;
    width: 41px;
    height: 41px;
    background-image: url('https://symmetry.wearexinxeta.com/wp-content/uploads/2025/04/iso-symmetry.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

html {
    overflow-y: scroll !important;
}
  
/*^* HOME *^*/
/*hero*/
.hero-img img {
    max-height: calc(100vh - 60px);
    object-fit: contain;
    object-position: right;
}
.hero-img-dos img {
    display: none !important;
}
.tronco-img img {
    max-height: 107vh;
    object-fit: contain;
}
/*flip boxes*/
.adc-flip-box .elementor-flip-box {
    aspect-ratio: 1;
    height: auto;
    width: auto;
}
.adc-flip-box .elementor-flip-box__front,
.adc-flip-box .elementor-flip-box__back {
    background-color: transparent;
    border: solid 1px var(--fondo);
}

/*carrusel*/
.adc-carousel .offset-right {
    padding-inline-end: 25% !important;
}
.enc-carousel p {
    font-size: 1.2rem;
    color: var(--naranja);
}
.texto-carousel p {
    font-size: .8rem;
}

/*^* CONTACTO *^*/
.adc-form input::placeholder,
.adc-form textarea::placeholder {
    color: var(--negro) !important;
    opacity: 1 !important;
    padding: 0 !important;
}
.adc-form input,
.adc-form textarea {
    color: var(--negro) !important;
    padding: 0 !important;
    background-color: transparent !important;
    font-size: 1.2rem !important;
}
.adc-form button {
    font-size: 0.8rem;
    text-transform: uppercase;
    background-color: transparent;
    color: var(--negro) !important;
    border-radius: 30px !important;
    border: solid 2px var(--negro) !important;
    padding: 12px 24px !important;
    min-width: 221px;
}
.adc-form button:hover {
    background-color: var(--naranja);
    color: var(--blanco) !important;
    border-radius: 30px !important;
    border: solid 2px var(--naranja) !important;
}
.adc-form .elementor-field-type-acceptance label {
    font-size: 1rem !important;
}
.adc-form .elementor-field-type-acceptance a {
    color: var(--negro) !important;
}
.adc-form .elementor-field-type-acceptance a:hover {
    color: var(--naranja) !important;
}
.adc-form .elementor-field-type-acceptance {
    margin: 15px 0px 30px 0px !important;
}

/*^* PRODUCTOS *^*/
.adc-img-square img {
    aspect-ratio: 1;
    object-fit: cover !important;
}
/*ESTIRAR LA FOTO PARA QUE RELLENE EL ALTO DE LA COLUMNA IZQUIERDA CON EL MISMO DE LA DERECHA*/
/* 1. La sección principal asegura que las dos columnas se estiren igual */
.adc-section-stretch {
    display: flex !important;
    align-items: stretch !important;
}
/* 2. Columna izquierda: columna vertical con imagen que se estira */
.adc-col-izq-stretch {
    display: flex !important;
    flex-direction: column !important;
}
/* 3. Imagen que se estira hasta el fondo de la columna */
.adc-img-stretch {
    flex-grow: 1 !important;
    display: flex !important;
}
.adc-img-stretch img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* 4. Columna derecha también se estira correctamente */
.adc-col-der-stretch {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* opcional, por si quieres centrar el contenido */
}

/*SELECTOR DE IDIOMA*/
.adc-lang .wpml-ls-legacy-list-horizontal {
    border: 0;
    padding: 0;
    font-size: 1.6rem;
}
.adc-lang .wpml-ls-legacy-list-horizontal a {
    padding: 0;
}
.adc-lang .wpml-ls-last-item span {
    padding-left: 10px;
}
.adc-lang .wpml-ls-current-language a {
    color: var(--naranja);
}
.adc-lang .wpml-ls-first-item span::after {
    content: "/";
    padding-left: 10px;
    color: var(--negro);
}

/*^* MEDIA QUERIES *^*/
@media screen and (max-width:1700px) {
    .texto-jumbo h1 {
        font-size: 3.72rem;
    }
}
@media screen and (max-width:1628px) {
    .texto-jumbo h1 {
        font-size: 3.72rem;
    }
}
@media screen and (max-width:1550px) {
    .texto-hero {
        max-width: 850px !important;
    }
    .texto-jumbo h1 {
        font-size: 3.5rem;
    }
}
@media screen and (max-width:1400px) {
    .texto-hero {
        max-width: 600px !important;
    }
    .texto-xxl p, .texto-xxl h1,.texto-xxl h2 {
        font-size: 1.7rem;
    }
    .tronco-img {
        position: inherit !important;
        bottom: inherit !important;
    }
    .texto-xl p, .texto-xl h1, .texto-xl h2 {
        font-size: 1.3rem;
    }
    body, button, input, select, textarea {
        font-size: 0.9rem;
    }
    .texto-jumbo h1 {
        font-size: 3rem;
    }
}
@media screen and (max-width:1300px) {
/*^* HOME *^*/
/*hero*/
    .hero-img img {
        display: none !important;
    }
    .hero-img-dos img {
        display: block !important;
        padding-top: 40px !important;
    }
    .columna-foto-crema {
        padding-bottom: 0 !important;
    }
    .texto-hero {
        max-width: 100% !important;
    }
    .texto-jumbo h1 {
        font-size: 2.8rem;
    }
    .texto-xxl p, .texto-xxl h1, .texto-xxl h2 {
        font-size: 1.4rem;
    }
    .enc-dos h2 {
        font-size: 1.5rem;
    }
}
@media screen and (max-width:1250px) {
    .texto-jumbo h1 {
        font-size: 2.6rem;
    }
}
@media screen and (max-width:1024px) {
    .texto-xl p,.texto-xl h1,.texto-xl h2 {
        font-size: 1.2rem;
    }
    body, button, input, select, textarea {
        font-size: 0.8rem;
    }
    /*^* HOME *^*/
    .mini-titulo {
        position: inherit !important;
    }
    /*^* HEADER *^*/
    /*popup*/
    .adc-menu-nav a {
        font-size: 1rem;
    }
    .dialog-close-button::after {
        width: 25px;
        height: 25px;
    }
}
@media screen and (max-width:767px) {
    .texto-xl p, .texto-xl h1, .texto-xl h2 {
        font-size: 1rem;
        line-height: 1.3 !important;
    }
    .texto-xxxl p {
        font-size: 2rem;
    }
    /*^* HEADER *^*/
    /*popup*/
    .adc-menu-nav a {
        font-size: 0.8rem;
    }
    /*SELECTOR DE IDIOMA*/  
    .adc-lang .wpml-ls-legacy-list-horizontal {
        border: 0;
        padding: 0;
        font-size: 0.8rem;
    }
}
@media screen and (max-width:500px) {
    .texto-xxl p, .texto-xxl h1, .texto-xxl h2 {
        font-size: 1.2rem;
        line-height: 1.3 !important;
    }
    .enc-dos h2 {
        font-size: 1.3rem;
    }
    .adc-btn-trans-naranja a {
        font-size: 0.6rem;
    }
    .adc-btn-blanco-naranja a {
        font-size: 0.6rem;
    }
    .texto-jumbo h1 {
        font-size: 2rem;
    }
    .texto-xxxl p {
        font-size: 1.5rem;
    }
}
@media screen and (max-width:375px) {
    .texto-xxl p, .texto-xxl h1, .texto-xxl h2 {
        font-size: 1rem;
    }
    .enc-dos h2 {
        font-size: 1.1rem;
    }
    .texto-jumbo h1 {
        font-size: 1.5rem;
    }
}