/*
Theme Name: Saren Child
Description: Child theme for Aër Studio.
Author: Promokore
Author URI: http://promokore.com
Template: saren
*/

/* Typografias*/

@font-face { font-family: 'brockmann-bold-webfont'; font-weight: normal; font-style: normal; src: url('fonts/brockmann-bold-webfont.woff2') format('woff2'), url('fonts/brockmann-bold-webfont.woff') format('woff'), url('fonts/brockmann-bold-webfont.ttf') format('truetype'); }
@font-face { font-family: 'brockmann-semibold-webfont'; font-weight: normal; font-style: normal; src: url('fonts/brockmann-semibold-webfont.woff2') format('woff2'), url('fonts/brockmann-semibold-webfont.woff') format('woff'), url('fonts/brockmann-semibold-webfont.ttf') format('truetype'); }
@font-face { font-family: 'brockmann-medium-webfont'; font-weight: normal; font-style: normal; src: url('fonts/brockmann-medium-webfont.woff2') format('woff2'), url('fonts/brockmann-medium-webfont.woff') format('woff'), url('fonts/brockmann-medium-webfont.ttf') format('truetype'); }
@font-face { font-family: 'brockmann-regular-webfont'; font-weight: normal; font-style: normal; src: url('fonts/brockmann-regular-webfont.woff2') format('woff2'), url('fonts/brockmann-regular-webfont.woff') format('woff'), url('fonts/brockmann-regular-webfont.ttf') format('truetype'); }
h1 {font-family: "brockmann-semibold-webfont", Arial, Helvetica, "sans-serif"; letter-spacing: -2px;}
.text-h2 {font-family: "brockmann-semibold-webfont", Arial, Helvetica, "sans-serif";}
.coming {opacity: 0.5;}
.text-h2, h2 {font-family: "brockmann-regular-webfont", Arial, Helvetica, "sans-serif";}
body .text-h4, body h4 { font-size: 2.45rem;line-height: 2.7rem;letter-spacing: -0.42px;}
body .text-h5, body h5 { font-size: 2.2777rem;line-height: 2.48rem;letter-spacing: -0.1px;font-family: brockmann-medium-webfont, Arial, Helvetica, "sans-serif";} 
body .text-h6, body h6 { font-family: "brockmann-medium-webfont", Arial, Helvetica, "sans-serif"; font-size: 2.333rem; line-height: 2.4rem; }

.anim_word, .anim_line {display: inline-block;overflow: visible; /* Permite que las letras descendentes sean visibles */padding-bottom: 5px; /* Ajusta el espacio para evitar recortes */}
.anim_char { display: inline-block;position: relative;overflow: visible; /* Asegura que las letras no sean recortadas */padding-bottom: 3px; /* Ajusta según sea necesario */}
.pb--small {font-size: 14px;padding-top: .2em !important; padding-bottom: .2em !important;padding-left: 1.5em !important;padding-right: 1.5em !important;}
.anim_word {white-space: nowrap;padding-right: .055em;margin-right: -.055em;padding-bottom: .099em;margin-bottom: -.099em; }

/* Header*/
header.site-header:not(.header--switched) svg circle {fill: #333333 !important;}
header.site-header:not(.header--switched) svg linearGradient stop {stop-color: #333333 !important;}
.header--switched.header--sticked {background: #eae8e8ed;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(12px);}
.site-header.header--switched { background-color: transparent;background-color: #d5d5d500 !important;background: #eae8e8ed;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(12px);box-shadow: 0 0 30px 0 rgb(103 103 103 / 22%);background: linear-gradient(40deg, transparent 10%, rgba(255, 255, 255, 0.16) 60%, transparent 100%); -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);border: .4px solid rgba(255, 255, 255, 0.08);}

/* botones*/
body, button, input, select, optgroup, textarea {font-family: "brockmann-regular-webfont", Arial, Helvetica, "sans-serif"; }
.pe--button i.material-icons.md-arrow_outward {display: inline-block;animation: arrow-diagonal 1.6s infinite ease-in-out;}
/* Asegura que el wrapper actúe como contenedor del link */
.premium-wrapper-link-yes { position: relative; }

/* Si el plugin crea un <a> overlay, que cubra todo y reciba hover/click */
.premium-wrapper-link-yes a.premium-addons-link,
.premium-wrapper-link-yes a.__wraplink {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: auto;
}

/* Cursor de mano en todo el contenido clicable del wrapper */
.premium-wrapper-link-yes,
.premium-wrapper-link-yes * {
  cursor: pointer !important;
}

/* Evita que pseudos/overlays decorativos “tapen” el link */
.premium-wrapper-link-yes .elementor-widget-container::before,
.premium-wrapper-link-yes .elementor-widget-container::after,
.premium-wrapper-link-yes [class*="overlay"] {
  pointer-events: none;
}

/* (Importante en Elementor) Evita romper el área de hover si algún <a> lleva display: contents */
.premium-wrapper-link-yes a { display: inline-block; }





/* iconos Y  animaciones*/
span.inner--icon.false.elementor-repeater-item-5aeb88f{overflow: visible; width: 28px;margin-right: 4px !important;margin-left: -6px !important;}
@keyframes swipe-soft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
i.material-icons.md-swipe { display: inline-block; color: #333333; font-size: 20px; animation: swipe-soft 1.8s ease-in-out infinite; }
@keyframes bounce-down { 0% { transform: translateY(-4px); } 50% { transform: translateY(6px); } 100% { transform: translateY(-4px); } }
.pe--scroll--button i.material-icons.md-arrow_downward { display: inline-block; color: #9ef980; animation: bounce-down 1.8s ease-in-out infinite; }
@keyframes arrow-diagonal { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -6px); } }
.material-icons[data-md-icon]:before {content: attr(data-md-icon);font-size: 1em;margin-left: 5px !important;}
span.inner--icon.false.elementor-repeater-item-5aeb88f {width: 36px!important;margin-left: -4px !important;margin-right: 6px !important;overflow: visible!important;}
i.material-icons.md-lightbulb_outline {color: #a0ff80;}

/* By Promokore*/

.pe--button i {padding-left: 3px !important;}
.box-by {display: flex;width: 100%;justify-content: space-between;}
.bypromokore {z-index: 9999;width: fit-content;-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);justify-content: space-between;align-items: center;margin-left: 0;margin-right: 0;padding: 4px;display: flex;}
.box-div {font-family: "brockmann-medium-webfont", Arial, Helvetica, "sans-serif";display: flex;align-items: center;justify-content: center;font-size: 14px;color: #FFFFFF;letter-spacing: 0.5px;}
.buttonx .letter {display: inline-block !important;position: relative !important;transition: transform 0.4s ease-out !important;}
.rotacion-smile {width: 24px;height: 24px;background-color: rgba(31, 33, 35, .8); background-position: 50%;background-repeat: no-repeat;background-size: 40% 40%;border: 1px #000;border-radius: 100%;flex: none;justify-content: center;align-items: center;margin-left: 7px;transition: transform .2s, background-color .3s;display: flex;transform: rotate(45deg);opacity: 0.6;}
.rotacion-smile:hover {transform: rotateZ(360deg);opacity: 1;}
.smile, .eyes {stroke: #FAFF00;stroke-width: 1.4px;stroke-linecap: round;fill: #ff000000;}
#smile-full {width: 14px; max-width: 20px;height: auto;position:absolute;z-index:9999999;margin-left: -27px;margin-top: 8px; transform:rotate(45deg);opacity:1;transition:transform 300ms ease-out;}
#smile-full:hover {transform:rotate(360deg);transition:transform 300ms ease-out 100ms;}
.rotation:hover .rotation-smile {transform: rotate(360deg); }
button.buttonx.light {    background-color: #ffffff00;color: #252525; border-color: transparent !important;letter-spacing: -0.2px;font-size: 15px;font-family: "brockmann-regular-webfont", Arial, Helvetica, "sans-serif";} 
svg#smile-full {background-color: #4c4c4c;border-radius: 28px;width: 32px;padding: 5px;}		
.alternative svg#smile-full {background-color: #2e2e2e;border-radius: 28px;width: 14px;padding: 4px !important;}
.buttonx span {display: inline-block;transition: transform 0.3s ease-out; }
.buttonx div {display: inline-flex;overflow: visible;}
.buttonx .letter {display: inline-block !important;position: relative !important;transition: transform 0.4s ease-out !important;}
.buttonx.in .letter {animation: move 0.7s linear forwards !important;}
.buttonx.out .letter {animation: move-out 0.7s linear forwards !important;}
.buttonx:hover  {    letter-spacing: .1px;} 
.buttonx:hover .letter svg {transform: rotate(360deg)!important;transition: transform 0.4s ease-out!important;}
.buttonx:hover #smile-full {transform: rotate(360deg)!important;opacity: 1!important;transition: transform 300ms ease-out!important;}
.buttonx {&.alternative {--color-hover: #ffffff;--background: #2f2f2f;--hover-back: #000000;--hover-front: #2f2f2f;}&.simple {--background: #275EFE;--background-hover: #1749DB;}}
.buttonx {--color: #e9e9e9;--color-hover: #ffffff;--background: transparent;--background-hover: transparent;--hover-back: #f2f2f2;--hover-front: #e6e6e6;padding: 5px 35px 5px 18px;line-height: 24px;letter-spacing: .1px;border: none;outline: none;position: relative;cursor: pointer;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;-webkit-mask-image: -webkit-radial-gradient(white, black);color: var(--c, var(--color)); background: #ffffff;transition: color .2slinear var(--c-d, .2s), background .3slinear var(--b-d, .2s);
    &:not(.simple) {
        &:before,
        &:after {
            content: '';
            top: 0;
            left: 0;
            right: 0;
            height: 200%;

        }
        &:after {
            --pb: var(--hover-front);
            --d: .44s;
        }
    }
    div {
        z-index: 1;
        position: relative;
        display: flex;
        span {display: block; backface-visibility: hidden;transform: translateZ(0); animation: var(--name, none) .7slinear forwards .18s !important;  } 
    }
    &.in {
        --name: move;
        &:not(.out) {
            --c: var(--color-hover);
            --b: var(--background-hover);
            &:before,
            &:after {
                --y: 0;
                --br: 10%;
            }
            &:after {
                --br: 20%;
                --d-d: .02s;
            }
        }
        &.out {
            --name: move-out;
            &:before {
                --d-d: .06s;
            }
        }
    }
}

@keyframes move {
    30%,36% {transform: translateY(calc(-9px * var(--move))) translateZ(0) rotate(calc(-19deg * var(--rotate) * var(--part)))!important;}
    50% {transform: translateY(calc(4px * var(--move))) translateZ(0) rotate(calc(8deg * var(--rotate) * var(--part)))!important;}
    70% {transform: translateY(calc(-4px * var(--move))) translateZ(0) rotate(calc(-5deg * var(--rotate) * var(--part)))!important;}
}

@keyframes move-out {30%, 36% { transform: translateY(calc(9px * var(--move))) translateZ(0) rotate(calc(19deg * var(--rotate) * var(--part)))!important;}50% {transform: translateY(calc(-4px * var(--move))) translateZ(0) rotate(calc(-8deg * var(--rotate) * var(--part)))!important;}70% {transform: translateY(calc(4px * var(--move))) translateZ(0) rotate(calc(5deg * var(--rotate) * var(--part)))!important;}}
.elementor-4232 .elementor-element.elementor-element-b405a62 .text-wrapper p, .elementor-4232 .elementor-element.elementor-element-b405a62 .text-wrapper>* {letter-spacing: -15px !important;padding-left: 25vw;}
i.material-icons.md-roundabout_right[data-md-icon]:before { color: #333333!important;}
i.material-icons.md-roundabout_right:before { color: #333333!important;}
 * {box-sizing: border-box;}

/* ficha productos */
.elementor-7614 .elementor-element.elementor-element-cb0ecd2 {width: -webkit-fill-available;}
.pe--icon svg {width: 60px;height: 60px;}
.pe--accordion.ac--ordered span.ac-order{width: 0px!important;}
.pe--accordion.ac--ordered .pe-accordion-item-content p {padding-left: 40px!important;}
.elementor-7614 .elementor-element.elementor-element-cfa367a .product-name {font-size: 2.1rem;text-transform: capitalize;line-height: 2.4rem;font-family: "brockmann-medium-webfont", Arial, Helvetica, "sans-serif";letter-spacing: -0.8px;}
div#highlightss {width: -webkit-fill-available;}

/* ficha proyetos */
.project--gallery--image { -webkit-border-radius: 18px;-moz-border-radius: 18px;border-radius: 18px; }
.project--gallery--image img { -webkit-border-radius: 18px;-moz-border-radius: 18px;border-radius: 18px;}
.project--image--gallery--wrapper { gap: 1rem!important;}
.plyr__video-wrapper{MARGIN-TOP: -2PX;}
.cta--wrapper {align-items: start!important;}


/* formulario contacto */
.form-row {display: flex;gap: 10px;}
.half-width {width: 50%;}
label {display: block;font-weight: bold;margin-bottom: 5px;}
form label {display: contents!important; margin-bottom: 0.34em;}
.wpcf7-form-control {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;font-size: 16px;}
.wpcf7-not-valid {border: 2px solid red !important;background-color: #ffe6e6;}
.wpcf7 form .wpcf7-response-output {margin: 0;padding: 2.5em; border: 1px solid #dcdcdc !important;border-radius: 14px;font-family: brockmann-semibold-webfont, Arial, Helvetica, sans-serif;letter-spacing: -2px;font-weight: normal;font-style: normal;font-size: 3em;line-height: 1.1; background-color: #a0ff80;}
.formulario-proyecto {margin-bottom: 30px;}/* Contenedor principal */
.form-row {display: flex;flex-wrap: wrap;gap: 20px;}/* Fila flexible */
.form-col {flex: 1 1 30%;min-width: 220px;} /* Columna individual */
.form-col label {display: block;font-weight: bold;margin-bottom: 6px;}
.wpcf7-form-control {width: 100%;padding: 8px 10px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}/* Estilo de los inputs */
.formulario-proyecto{width: 100%;}

select.wpcf7-form-control.wpcf7-select {
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ffffff;
}
.espacio-box {
    background-color: #dddddd;
    border-radius: 15px;
    padding: 20px;
}
/* Configurador productos */

input[type="radio"] {display: none;}
input[type="radio"]:checked + label span {transform: scale(1.25);}
/* Colores y estilos */
label {display: inline-block;width: 25px;height: 25px;margin-right: 10px;cursor: pointer;}
label span {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .2s ease-in-out;
}

.blanco { background: #ffffff; }
.plata { background: #bfbfbf; }
.beige { background: #d5cfb3; }
.tabaco { background: #5e5248; }
.marron { background: #8e522e; }
.gris { background: #575757; }
.negro { background: #333333; }
.ral { background: #9FF980; }


/* Bordes al seleccionar */
input#red:checked + label .red { border: 2px solid #871818; }
input#orange:checked + label .orange { border: 2px solid #a14b0e; }
input#yellow:checked + label .yellow { border: 2px solid #a97406; }
input#olive:checked + label .olive { border: 2px solid #7a8b11; }
input#green:checked + label .green { border: 2px solid #158436; }
input#teal:checked + label .teal { border: 2px solid #00726c; }
input#blue:checked + label .blue { border: 2px solid #165a94; }
input#violet:checked + label .violet { border: 2px solid #3e2392; }
input#purple:checked + label .purple { border: 2px solid #6e2087; }
input#pink:checked + label .pink { border: 2px solid #8e2364; }



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

/* Mac Book Air*/
@media screen and (max-width: 1440px) {
	
	body .text-h4, body h4{font-size: 1.88rem;line-height: 2rem;letter-spacing: -0.42px;}
	
}

/* Benq Vertical 1080px */
@media (min-width: 1025px) and (max-width: 1180px) {
	
.material-icons.md-arrow_downward {font-size: 24px; /* Tamaño de la flecha */ display: inline-block;transition: transform 0.3s ease; /* Esto es solo para darle un toque suave por defecto */}
h1, p.text-h1, .text-h1.big-title, h1.big-title {font-size: 5.8rem !important; line-height: 5.888rem;padding-right: 0.055em;margin-right: -0.055em;padding-bottom: 0.08em;margin-bottom: -0.08em;}
#hero { max-height: 1080px}
	 
}



@media (max-width: 767px) {
   
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  body .text-h4, body h4 { font-size: 1.8rem; line-height: 1.8rem; letter-spacing: -0.02px; }
}

/* iPads en horizontal */
@media (min-width: 768px) and (orientation: landscape) {
.ipad-landscape-text {font-size: 7rem !important;line-height: 7.6rem !important;}
.text-h2, h2 {font-size: 2.09rem; }
}



/* Solo tablets en modo vertical (portrait) */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .text-h4, h4 { font-size: 1.69rem !important; line-height: 1.2; letter-spacing: -0.31px; font-weight: normal;}
  .elementor-7614 .elementor-element.elementor-element-0296307 .pe--accordion .pe-accordion-item-title .ac-order { letter-spacing: 2.2px; font-size: 12px; }
  .pe--accordion.ac--ordered span.ac-order{ margin-right: 40px; width: 0px;}pe--accordion.ac--ordered .pe-accordion-item-content p {padding-left: 42px;}
  .elementor-7614 .elementor-element.elementor-element-0296307 .pe--accordion .pe-accordion-item-content p {font-size: 0.9rem;line-height: 19px;} 
  .elementor-7504 .elementor-element.elementor-element-0296307 .pe--accordion .pe-accordion-item-title .ac-order {display: none;}
  .pe--accordion.ac--ordered .pe-accordion-item-content p {padding-left: 0px !important;}
  body .text-h5, body h5 { font-size: 1.777rem;line-height: 1.88rem;letter-spacing: -0.1px;font-family: brockmann-medium-webfont;} 
	
	
}

/* Ancho máximo de 480px */
@media (max-width: 480px) {
body .text-h5, body h5{ font-family: "brockmann-medium-webfont", Arial, Helvetica, "sans-serif"; font-size: 1.8rem;font-weight: normal; line-height: 1.2;}
.pe--accordion--images--wrapper .pe--accordion--image {width: 84%!important;height: 300px !important;display: none;overflow: hidden; margin: auto;}
span.ac-order {display: none;}
.pe--accordion.ac--ordered .pe-accordion-item-content p {padding-left: 0px !important;}
.pe--accordion--image.accordion--image--active {display: block; margin-top: 40px; margin-bottom: -40px;}
.elementor video { margin-left: -490px; }
.main-navigation ul { display: -webkit-box;display: -ms-flexbox;display: flex;flex-wrap: wrap;justify-content: center;}
.project--gallery--image { border-radius: 12px;}
.project--gallery--image img { border-radius: 12px;}
body .text-h4, body h4 {font-size: 1.5rem;line-height: 1.88rem;letter-spacing: -0.42px;}   
.project--image--gallery--wrapper{ gap: 0.6rem !important;}
	
	
}