/* Theme Name: ibd Author: Renovatio Comunicación Author URI: https://www.renovatio-comunicacion.com Theme URI: Tags: full-site-editing, block-patterns Text Domain: ibd Requires at least: 6.4 Requires PHP: 7.4 Tested up to: 6.4 Version: 100.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* Styles intended only for the front.*/ html { scroll-behavior: smooth; } @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /*-----------------------------------------------------------------*/ /* ROOT /*-----------------------------------------------------------------*/ :root { --base:#132631; --blue: #00aeef; --blue-hover: #0086b7; --button: #004a76; --white: #fff; --black: #000; --grey: #767676; --grey-bg:#E6E7E8; --grey-bg-light:#F7F7F7; --grey-line: #BDBDBD; /* Fuentes */ --lato: Lato,Arial,sans-serif; --domine: Domine,Arial,sans-serif; /* Lineas */ accent-color: #00AEEF; /* Tamaño Web */ --width-web: 100%; --max-width-web: 1400px; --padding-web: 20px; } /*-----------------------------------------------------------------*/ /* GENERALES /*-----------------------------------------------------------------*/ body,html{ margin: 0; font-family: var(--lato); font-weight: 400; font-size: 18px; color: var(--base); } b, .b, strong, .strong{ font-weight: 800 !important;} .italic{font-style: italic;} h1, h2 , h4 , h5 , h6, h3.h2 { font-family: var(--lato); font-weight: 800; margin-top: 0; margin-bottom: 30px; color: var(--white); } h1 { font-size: 45px; line-height: 1.1;} h2, h3.h2 { font-size: 45px; line-height: 1.3; } h3 { font-size: 30px; font-weight: normal !important; } h4.h3{font-size: 30px; line-height: 1.1; color: var(--white);} h4, .h4, .entry-content h4 { font-size: 30px; margin: 0px; font-weight: normal; line-height: 1.1;} h5, .h5, .entry-content h5 { color: var(--white); font-weight: normal; font-size: 18px; line-height: 1.1;} h6, .h6, .entry-content h6 { font-size: 16px !important; margin: 0 0 20px !important; } h1 i, h2 i, h3 i, h4 i, h5 i, h6 i{} p {margin-top: 0; margin-bottom: 20px; font-family: var(--lato); font-weight: 400; font-size: 18px; line-height: 1.2; } p:last-child { margin-bottom: 0px; } article p, article ul{} a, .a {color: var(--blue); transition: all .3s; cursor: pointer; } figure {margin: 0;} img {width: 100%; height: 100%;} ul {list-style-type: none; margin: 0; padding: 0;} li {position: relative; margin: 0 0 30px; padding: 0 0 0 30px; } li:before { content: ""; position: absolute; top: 1px; left: 0; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.549' height='19.526' viewBox='0 0 22.549 19.526'%3E%3Cpath id='Trazado_13' data-name='Trazado 13' d='M20.752,1,8.759,18.133,1,8.263' transform='translate(0.405 0.393)' fill='none' stroke='%23a6e7ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");} /* Logo */ figure.ayming-logo { display: flex; } figure.ayming-logo svg g.ayming__logo-blue, figure.ayming-logo svg g.ayming__logo-grey {fill:var(--white);} figure.ayming-logo.white svg g.ayming__logo-blue, figure.ayming-logo.white svg g.ayming__logo-grey {fill:var(--white);} /* Botones */ a.button, #informe { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; font-weight: 700; padding: 16px 20px !important; color: var(--white); background-color: var(--blue); border: 2px solid var(--blue); border-radius: 100px; width: fit-content; transition: all .3s; cursor: pointer; text-shadow: none !important; /* box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%); */ box-shadow: none; overflow: hidden; position: relative;} a.button:hover, #informe:hover {background-color: var(--blue-hover); border-color: var(--blue-hover);} a.button:focus, #informe:focus {background-color: var(--blue); border-color: var(--blue);} a.button.on{background-color: var(--white);color:var(--blue);position: relative;} a.button.on::before{content:"✓";width: 20px;height: 20px;position: absolute;top:10px;left: 10px;color:green;} main#ayming-app.ayming-app a.button { background-color: var(--white); color: var(--button); border: none; font-size: 18px; font-weight: 700; position: relative; } main#ayming-app.ayming-app a.button:after { content: ""; position: absolute; z-index: -1; width: 100%; height: 100%; background-image: linear-gradient(280deg, rgb(0, 174, 239) -33.08%, rgb(255, 255, 255) 26.5%); opacity: 1; } main#ayming-app.ayming-app a.button:hover { background-color: transparent; } main#ayming-app.ayming-app a.button:hover:after {opacity: 1;} main#ayming-app.ayming-app a.button.on { background-color: var(--blue); color: var(--white); position: relative;} main#ayming-app.ayming-app a.button.on::after {} main#ayming-app.ayming-app a.button.on::before { display: none; content: ""; width: 7px; height: 7px; border-radius: 100px; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; background-color: var(--white); } /* Estructura */ main#ayming-app {overflow: hidden; position: relative; min-height: 100vh;} main#ayming-app { /* background-image: linear-gradient(116deg,#00aeef 0%,#00b08b 100%); */ background-image: linear-gradient(rgb(0, 74, 118) 0%, rgb(39, 143, 201) 70.67%, rgb(0, 174, 239) 100%);} figure.ayming-app__figure {display: none;} /* figure.ayming-app__figure { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; margin: 0; } figure.ayming-app__figure img { width: 100%; height: 100%; object-fit: cover; } */ main section {padding: 0 var(--padding-web);} main .container { width: 100%; max-width: var(--max-width-web); margin: 0 auto; padding: 0; z-index: 99;} /* */ main .container-wide { width: 100%; max-width: 95%; margin: 0 auto; padding: 0; } section.section-full { margin-left: 0; margin-right: calc(-50vw + 50%); max-width: 100vw; width: 100%; } section .container-full {margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; width: 100vw; padding: 0;} /* Loader */ .ayming-app-interior__envio, .ayming-app-interior__envio_loader { color: var(--white) !important; } /* Smooth scroll */ html { scroll-behavior: smooth; } @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /*-----------------------------------------------------------------*/ /* BODY /*-----------------------------------------------------------------*/ body {background-color: var(--blue); height: 100%;} body * { box-sizing: border-box;} /*-----------------------------------------------------------------*/ /* WHITE - SHADOW /*-----------------------------------------------------------------*/ main#ayming-app.ayming-app.white, main#ayming-app.ayming-app.white .title { color: var(--white); } main#ayming-app.ayming-app.white a.button { background-color: var(--white); color: var(--button); border: none; font-size: 18px; font-weight: 700; } main#ayming-app.ayming-app.white a.button:after { content: ""; position: absolute; z-index: -1; width: 100%; height: 100%; background-image: linear-gradient(280deg, rgb(0, 174, 239) -33.08%, rgb(255, 255, 255) 26.5%); opacity: 1; } main#ayming-app.ayming-app.white a.button:hover { background-color: transparent; } main#ayming-app.ayming-app.shadow * {text-shadow: none;} main#ayming-app.ayming-app.shadow input, main#ayming-app.ayming-app.shadow a.button {box-shadow: none;} /* main#ayming-app.ayming-app.shadow * { text-shadow: 0 2px 1px rgba(0,0,0,.16);} */ /* main#ayming-app.ayming-app.shadow input, main#ayming-app.ayming-app.shadow a.button {text-shadow: none; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);} */ input.ayming-app-input.animate__animated.animate__fadeInUp.error { border: 2px solid red;} /*-----------------------------------------------------------------*/ /* HEADER /*-----------------------------------------------------------------*/ main header {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100px; overflow: hidden; padding: 0 var(--padding-web);} main header.fixed{position: fixed;} main header > .header__container {width: 100%; max-width: var(--max-width-web); margin: 0 auto; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 50px;} /*-----------------------------------------------------------------*/ /* FOOTER /*-----------------------------------------------------------------*/ footer {} /*-----------------------------------------------------------------*/ /* HOME - INDEX y PASO 1 /*-----------------------------------------------------------------*/ main.ayming-app.home { /*background-image: url(/wp-content/plugins/cuestionario-ibd/cuestionario_app/public/img/img_ayming-app_home-bg.jpg); */ background-position: center; background-repeat: no-repeat; background-size: cover; background-image: linear-gradient(rgb(0, 74, 118) 0%, rgb(39, 143, 201) 70.67%, rgb(0, 174, 239) 100%) !important; } .ayming-app-home__container.container.step1{position: relative;z-index: 999;} /*.ayming-app-home__container.container.step1:after{*/ main.ayming-app.home:after { content: ""; position: absolute; top: 60%; transform: translateY(-60%); left: 0px; aspect-ratio: 1/1; border-radius: 0; -webkit-mask-composite: source-in,xor; mask-composite: intersect; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='730' height='724' fill='none'%3E%3Cpath d='M183 723.093c0-298.732 244.708-540.903 546.571-540.903' stroke='%23D9D9D9' stroke-width='364.64'/%3E%3C/svg%3E"),linear-gradient(90deg,#fff 0,#fff 60%,hsla(0,0%,100%,0) 95%),linear-gradient(180deg,#fff 0,#fff 60%,hsla(0,0%,100%,0) 95%); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='730' height='724' fill='none'%3E%3Cpath d='M183 723.093c0-298.732 244.708-540.903 546.571-540.903' stroke='%23D9D9D9' stroke-width='364.64'/%3E%3C/svg%3E"),linear-gradient(90deg,#fff 0,#fff 60%,hsla(0,0%,100%,0) 95%),linear-gradient(180deg,#fff 0,#fff 60%,hsla(0,0%,100%,0) 95%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain,100% 100%,100% 100%; mask-size: contain,100% 100%,100% 100%; -o-object-fit: cover; object-fit: cover; width: 730px; background-size: 730px; z-index: 1; background-image: url(/wp-content/plugins/cuestionario-ibd/cuestionario_app/public/img/ayming-back-img.webp); } /*.ayming-app-home__container.container.step1:before{*/ main.ayming-app.home:before{ content: ""; position: absolute; background-image: linear-gradient(116deg, rgb(0, 174, 239) 0%, rgb(0, 176, 139) 100%); border-radius: 740px; content: ""; filter: blur(110px); height: 575px; left: -200px; position: absolute; top: 50%; transform: rotate(-132deg) translateY(50%); width: 494px; z-index: 0; } section.ayming-app-home__section { padding: 150px var(--padding-web) 100px; height: 100vh; display: flex; align-items: center;} section.ayming-app-home__section > .ayming-app-home__container {display: grid; grid-template-columns: 0.5fr; justify-content: end;} section.ayming-app-home__section > .ayming-app-home__container.step2 { padding-top: 50px; } section.ayming-app-home__section .title { } div.ayming-app-home__row-tablet { display: grid; grid-template-columns: 0.7fr 1fr; gap: 30px; margin: 50px 0 30px; position: relative; } div.ayming-app-home__row-tablet:after {content: ""; position: absolute; bottom: 0px; left: 0px; width: 100vw; height: 1px; background-color: var(--white); } div.ayming-app-home__row-tablet figure.ayming-app-home__row-tablet__image { width: 100%; height: 100%; aspect-ratio: 280/279;} div.ayming-app-home__row-tablet figure.ayming-app-home__row-tablet__image img { width: 100%; height: 100%; } div.ayming-app-home__row-tablet ul {padding-top: 15px;} section.ayming-app-home__section input { display: block; border: 1px solid var(--white); border-radius: 5px; appearance: none; -webkit-appearance: none; outline: none; padding: 15px 20px; margin: 10px 0 40px; width: 100%; max-width: 380px; font-size: 22px; color: var(--base); transition: border .3s; } section.ayming-app-home__section input::placeholder {color: var(--base);} section.ayming-app-home__section input:focus-within { border: 1px solid var(--blue); } /* section.ayming-app-home__section a.button {font-size: 22px; padding: 15px 30px;} */ /*-----------------------------------------------------------------*/ /* INTERIORES - PASO 2 y PASO 3 /*-----------------------------------------------------------------*/ .progress { position: relative; margin-top: 0px; margin-bottom: 0px; overflow: visible; border-radius: 100px; background-color: var(--white); box-shadow: none; width: 65%; height: 10px; } .progress-bar { float: left; width: 10%; height: 100%; font-size: 12px; line-height: 20px; color: #fff; border-radius: 100px; text-align: right; background-color: var(--blue); background-color: #aad4c1; transition: width .6s ease; overflow: visible; position: relative; } .ico__pb { position: absolute; width: 15px; height: 15px; margin-top: -2px; right: 0px; filter: drop-shadow(0px 0px 3px #b3b3b3); -webkit-filter: drop-shadow(0px 0px 3px #b3b3b3); -moz-filter: drop-shadow(0px 0px 3px #b3b3b3); } section.ayming-app-interior__section .back {color: var(--white);} section.ayming-app-interior__section { padding: 150px var(--padding-web) 50px; /* background-image: url(/wp-content/plugins/cuestionario-ibd/cuestionario_app/public/img/img_ayming-app_interior-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 720px; */ } section.ayming-app-interior__section > .ayming-app-interior__container {display: grid; grid-template-columns: auto 1fr; justify-content: end; align-items: center; gap: 150px; } section.ayming-app-interior__section .hello { color: var(--white); font-weight: 500; display: block; margin-bottom: 25px; } section.ayming-app-interior__section .title {font-size: 35px;} figure.ayming-app-interior__figure { width: 400px; height: 400px; aspect-ratio: 1/1; position: relative; border-radius: 100%; border: 30px solid rgba(255, 255, 255, 0.2); } figure.ayming-app-interior__figure:before {content: ""; position: absolute; top: 50%; left: -280%; transform: translateY(-50%); width: 400%; height: 400px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(../../plugins/cuestionario-ibd/cuestionario_app/public/img/ilus_circulo-left.svg); } figure.ayming-app-interior__figure img { border-radius: 100%; overflow: hidden;} .ayming-app-interior__content { } .ayming-app__row-buttons {margin-top: 60px; display: flex; align-items: center; flex-wrap: wrap; gap: 25px 40px; } section.ayming-app-interior__section input {border: 1px solid var(--white); border-radius: 5px; appearance: none; -webkit-appearance: none; outline: none; padding: 15px 20px; margin: 10px 0 40px; width: 100%; max-width: 450px; font-size: 22px; color: var(--base); transition: border .3s; margin: 0; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%); } section.ayming-app-interior__section input::placeholder {color: var(--base);} section.ayming-app-interior__section input:focus-within { border: 1px solid var(--blue); } .button_home > a.button:before, .ayming-app__row-buttons.ayming-app__row-buttons-next > a.button:before, main#ayming-app.ayming-app.informe .header__container a.button:before { content: ""; position: relative; order: 2; margin-left: 5px; display: flex; width: 25px; height: 20px; background-position: center; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23004a76' class='bi bi-arrow-right-short' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8'/%3E%3C/svg%3E");} /*-----------------------------------------------------------------*/ /* INFORME /*-----------------------------------------------------------------*/ main#ayming-app.ayming-app.informe {} main#ayming-app.ayming-app.informe > figure.ayming-app__figure {max-height: 100vh;} main#ayming-app.ayming-app.informe .header__container a.button {} main#ayming-app.ayming-app.informe .header__container a.button::after {opacity: 0; transition: all .3s;} main#ayming-app.ayming-app.informe .header__container a.button:hover {background-color: var(--white);} main#ayming-app.ayming-app.informe .header__container a.button:hover::after {opacity: 1; transition: all .3s;} main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button { background-color: var(--blue); color: var(--white); position: fixed; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%) !important;} main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button::after { background-image: linear-gradient(270deg,#0072b6 0%,#00aeef 39.7%,#44c8f5 100%); opacity: 0; transition: all .3s; } main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button::before { content: ""; position: relative; order: 2; margin-left: 5px; display: flex; width: 25px; height: 20px; background-position: center; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-arrow-right-short' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8'/%3E%3C/svg%3E");} main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button:hover {background-color: transparent;} main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button:hover::after { opacity: 1; transition: all .3s;} section.ayming-app-informe__section { padding: 150px var(--padding-web) 50px; position: relative; /* background-image: url(/wp-content/plugins/cuestionario-ibd/cuestionario_app/public/img/img_ayming-app_interior-bg.jpg);background-position: top center; background-repeat: no-repeat; background-size: contain; */ } section.ayming-app-informe__section > .ayming-app-informe__container { padding: 60px 60px ; background-color: var(--white); border-radius: 10px; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);} /* FILA TITULO */ .ayming-app-informe__row.title { margin-bottom: 50px; padding: 0 30px;} .ayming-app-informe__row.title .title { font-size: 45px; color: var(--button); } .ayming-app-informe__row.title .subtitle { font-size: 26px; color: var(--button); } .ayming-app-informe__row.title .title span { color: var(--blue); font-family: var(--lato); } .ayming-app-informe__row.title p {} /* FILA RESUMEN */ .ayming-app-informe__row.resume { padding: 30px; border: 1px solid var(--grey-bg); border-radius: 10px; margin-bottom: 70px; } .ayming-app-informe__resmune-wrapper {max-width: 850px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 30px; } figure.ayming-app-informe__image.resume { width: auto; height: 250px; aspect-ratio: 169/242;} figure.ayming-app-informe__image.resume img { width: 100%; height: 100%; } .ayming-app-informe__row.resume .description {} /* GRAFICA - https://codepen.io/t_afif/pen/XWaPXZO */ @property --p { syntax: ""; inherits: true; initial-value: 0; } .pie, .pie-2 { --p: 20; --b: 25px; --c: var(--blue); --w: 200px; } .pie { width: var(--w); aspect-ratio: 1; position: relative; display: inline-grid; margin: 0px; place-content: center; font-size: 43px; color: var(--base); font-family: var(--lato); text-align: center; } .pie:before, .pie:after { content: ""; position: absolute; border-radius: 50%; } .pie:before { inset: 0; background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0); -webkit-mask: radial-gradient( farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)) ); mask: radial-gradient( farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)) ); } .pie:after { inset: calc(50% - var(--b) / 2); background: var(--c); transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2)); } .pie.animate { animation: p 3s 0.5s both; } .pie span {display: block; font-size: 15px; font-weight: 600;} .pie-2 {position: relative;} .pie-2 svg { position: absolute; top: 0; left: 0; width: var(--w); height: var(--w); position: absolute; z-index: 0; background-color: transparent; } .pie-2 svg .pie-background { width: var(--w); height: var(--w); r: 87.5px; cx: 50%; cy: 50%; fill: none; stroke: var(--grey-bg); stroke-width: var(--b); } @keyframes p { from { --p: 0; } } /* FILA BARRAS */ .ayming-app-informe__row.bars { padding-bottom: 70px; margin-bottom: 70px;} .ayming-app-informe__bars-wrapper { display: table; table-layout: fixed; width: 100%; height: 150px; margin: 0 auto; border-bottom: 1px solid var(--grey-line); } .bar { position: relative; height: 150px; display: table-cell; vertical-align: bottom; } span.bar-content { display: block; vertical-align: bottom; margin: 0 15%; background-color: var(--blue); background-repeat: no-repeat; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='157' height='129' x='0' y='0' version='1.1' viewBox='0 0 157 129'%3E%3Cg opacity='.47' transform='translate(-7545 448) translate(7460.595 -467.989)'%3E%3ClinearGradient id='a' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25282.88 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23a)' d='m111.6 0 9.3 4.3-81.6 113.1-9.3-4.3L111.6 0z'/%3E%3ClinearGradient id='b' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25259.688 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23b)' d='m134.8 0 9.3 4.3-81.6 113.1-9.3-4.3L134.8 0z'/%3E%3ClinearGradient id='c' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25237.385 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23c)' d='m157.1 0 9.3 4.3-81.6 113.1-9.3-4.3L157.1 0z'/%3E%3ClinearGradient id='d' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25214.191 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23d)' d='m180.3 0 9.3 4.3L108 117.4l-9.3-4.3L180.3 0z'/%3E%3ClinearGradient id='e' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25191.89 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23e)' d='m202.6 0 9.3 4.3-81.6 113.1-9.3-4.3L202.6 0z'/%3E%3ClinearGradient id='f' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25168.697 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23f)' d='m225.8 0 9.3 4.3-81.6 113.1-9.3-4.3L225.8 0z'/%3E%3ClinearGradient id='g' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25146.396 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23g)' d='m248.1 0 9.3 4.3-81.6 113.1-9.3-4.3L248.1 0z'/%3E%3ClinearGradient id='h' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25124.096 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23h)' d='m270.4 0 9.3 4.3L198 117.4l-9.3-4.3L270.4 0z'/%3E%3ClinearGradient id='i' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25100.902 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23i)' d='m293.6 0 9.3 4.3-81.6 113.1-9.3-4.3L293.6 0z'/%3E%3ClinearGradient id='j' x1='-870.625' x2='-870.625' y1='625.627' y2='624.627' gradientTransform='matrix(21.034 12.144 69.8595 -121.0002 -25305.182 86272.07)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23j)' d='m89.3 0 9.3 4.3L17 117.4l-9.3-4.3L89.3 0z'/%3E%3C/g%3E%3C/svg%3E"); } span.bar-content.animate {animation: draw-bar 1s ease-in-out;} span.bar-content.dark-blue {background-color: #0072B6;} span.bar-content.blue {background-color: #009FE3;} span.bar-content.green {background-color: #00A883;} span.bar-content.grey {background-color: #6A6F7F;} span.bar-content.light-blue {background-color: #03CEFF;} span.bar-content:before {position: absolute; left: 0; right: 0; bottom: -45px; display: block; font-family: var(--lato); font-size: 30px; text-align: center; content: attr(title); word-wrap: break-word;} span.bar-content:after {position: absolute; left: 0; right: 0; bottom: -65px; display: block; font-family: var(--lato); font-weight: 600; font-size: 12px; text-align: center; content: attr(description); word-wrap: break-word;} @keyframes draw-bar { 0% { height: 0; } } /* FILA RECOMENDACIONES */ .ayming-app-informe__row.recomendation {padding: 50px; border: 1px solid var(--grey-bg); border-radius: 10px; margin-bottom: 30px;} .ayming-app-informe__row.recomendation .title {margin: 0 0 20px; padding-left: 25px; color: var(--blue); font-size: 26px; font-weight: 500; position: relative; } .ayming-app-informe__row.recomendation .title:before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 14px; height: 14px; background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='17px' height='17px' viewBox='0 0 17 17' enable-background='new 0 0 17 17' xml:space='preserve'%3E%3Cg id='Elipse_4' opacity='0.5'%3E%3Ccircle fill='%23FFFFFF' cx='8.5' cy='8.5' r='8.5'/%3E%3Cpath fill='%2300AEEF' d='M8.5,17C3.8,17,0,13.2,0,8.5C0,3.8,3.8,0,8.5,0C13.2,0,17,3.8,17,8.5C17,13.2,13.2,17,8.5,17z M8.5,3 C5.5,3,3,5.5,3,8.5c0,3,2.5,5.5,5.5,5.5c3,0,5.5-2.5,5.5-5.5C14,5.5,11.5,3,8.5,3z'/%3E%3C/g%3E%3C/svg%3E"); } .ayming-app-informe__row.recomendation .title span {color: var(--base); font-family: var(--lato); padding-left: 20px;} .ayming-app-informe__row.recomendation ul { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; background: var(--grey-bg-light); padding: 50px; margin-top: 50px;} .ayming-app-informe__row.recomendation li {font-weight: 500; max-width: 300px; margin: 0;} .ayming-app-informe__row.recomendation li:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.549' height='19.526' viewBox='0 0 22.549 19.526'%3E%3Cpath id='Trazado_13' data-name='Trazado 13' d='M20.752,1,8.759,18.133,1,8.263' transform='translate(0.405 0.393)' fill='none' stroke='%2300aeef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E%0A");} .ayming-app-informe__recomendation-wrapper { display: grid; grid-template-columns: auto auto; align-items: center; gap: 50px; } figure.ayming-app-informe__recomendation-wrapper__image {width: 280px; height: 280px; border-radius: 100%; border: 10px solid rgba(0, 175, 239, 0.2); overflow: hidden; } figure.ayming-app-informe__recomendation-wrapper__image img { width: 100%; height: 100%; object-fit: contain; } .ayming-app-informe__recomendation-wrapper__text { width: 100%; } /* FILA BOTON */ .ayming-app-informe__row.button {display: flex; align-items: center; justify-content: center; margin-top: 70px;} /* FILA BLOQUEO */ .ayming-app-reporte_block { position: absolute; bottom: 0; left: 0; width: 100%; } .ayming-app-reporte_block .ayming-app-informe__container{ min-height: 400px; padding-top: 40px; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 73%, rgba(255,255,255,0) 100%); } /*-----------------------------------------------------------------*/ /* FORMULARIO /*-----------------------------------------------------------------*/ .ayming-app-form__section { /* background-image: url(/wp-content/uploads/2024/04/img_ayming-app_interior-bg.jpg); */ background-image: linear-gradient(rgb(0, 74, 118) 0%, rgb(39, 143, 201) 70.67%, rgb(0, 174, 239) 100%) !important; background-size: 100% 50%; background-repeat: no-repeat; } .ayming-app-form__container { padding: 60px 60px !important; background-color: var(--white); border-radius: 10px; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);} .ayming-app-form__row-logo { padding: 20px 0 !important; margin-bottom: 40px !important; } .ayming-app-form__row-logo > figure {width: 165px; height: 100%; margin-left: 0 !important;} .ayming-app-form__row-text { display: grid !important; grid-template-columns: 1fr 220px; gap: 50px; } .ayming-app-form__row-text .hello { color: var(--blue); font-size: 22px; font-weight: 500; display: block; margin-bottom: 25px;} .ayming-app-form__row-form { padding: 30px 30px 50px; border: 1px solid var(--grey-bg); border-radius: 10px; margin-bottom: 70px; } .ayming-app-form__row-form form {margin-bottom: 50px;} /*-----------------------------------------------------------------*/ /* GRAVITY FORMS /*-----------------------------------------------------------------*/ /* Estructura */ form .gform_fields { grid-template-columns: repeat(2, 1fr) !important; gap: 50px !important; } form .gform_fields > .gfield--width-half {grid-column: auto !important;} form .gform_fields > .gfield--width-full {grid-column: 1/-1 !important;} form .gform_fields > .gfield--width-third {grid-column: auto !important;} /* Columna captcha - Acceptance */ .ayming-captcha { justify-content: flex-end !important; } .ayming-captcha > .ginput_recaptcha {width: fit-content !important;} .ayming-acceptance.first {} .ayming-acceptance.second {} form .gform_fields > .gfield--width-third.ayming-acceptance > .ginput_container {inline-size: 100% !important; float: left !important;} form .gform_fields > .gfield--width-third.ayming-acceptance.second {grid-column: 2/3 !important; margin-top: -70px;} /* Footer */ .gform_footer { padding: 0 !important; align-items: center !important; justify-content: center !important; } /* Field */ div.gfield { display: flex; align-items: center; justify-content: space-between; gap: 40px; } /* Label*/ label.gform-field-label { font-size: 15px !important; font-weight: 600 !important; position: relative; height: 100% !important; justify-content: flex-start !important; padding-top: 7px !important; inline-size: auto !important; position: relative; width: 160px; } label.gform-field-label > span.gfield_required {position: absolute; top: 5px; right: 0;} label.gform-field-label > span.gfield_required::after {content: "*"; position: absolute; top: 0px; right: 0; font-size: 16px; color: var(--blue);} label.gform-field-label > span.gfield_required > .gfield_required_text {display: none !important;} label.gfield_consent_label { padding-top: 1px !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 400 !important; color: var(--grey) !important; } /* Input */ .ginput_container {width: calc(100% - 160px) !important;} .ginput_container > input, .ginput_container > select, .ginput_container > textarea {border-color: var(--grey-line) !important;} .ginput_container > input:focus, .ginput_container > select:focus, .ginput_container > textarea:focus {border-color: var(--blue) !important; box-shadow: 0 0 0 0 transparent ,0 0 0 3px hsl(196.32deg 100% 46.86% / 30%);} /* Input - Checkbox */ .ginput_container > input[type=checkbox]:before {color: var(--blue) !important;} /* Botón */ main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button { background-color: var(--blue); color: var(--white); position: fixed;} main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button::after { background-image: linear-gradient(270deg,#0072b6 0%,#00aeef 39.7%,#44c8f5 100%); opacity: 0; transition: all .3s; } main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button:hover {background-color: transparent;} main#ayming-app.ayming-app.informe .ayming-app-informe__row.button a.button:hover::after { opacity: 1; transition: all .3s;} input.gform_button { text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; line-height: 1 !important; font-weight: 700 !important; padding: 12px 30px !important; color: var(--white) !important; background-color: var(--blue) !important; border: none; border-radius: 100px !important; width: 100% !important; max-width: 200px !important; transition: all .3s !important; cursor: pointer !important; text-shadow: none !important; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%) !important; position: relative; } input.gform_button:hover {background-image: linear-gradient(270deg,#0072b6 0%,#00aeef 39.7%,#44c8f5 100%); } div.gform_confirmation_message { text-align: center; margin-bottom: 60px; } a#informe {margin-top: 40px;} /*------------------------------------------------------------------------------------------ RESPONSIVE ----*/ /*-----------------------------------------------------------------*/ /* IPAD /*-----------------------------------------------------------------*/ @media (max-width: 1024px) { /* GENERALES */ body {font-weight: 400;} h1, h2, h4, h5, h6, h3.h2 {margin-bottom: 20px;} h2, h3.h2 {font-size: 27px;} p {font-weight: 400;} b, .b, strong, .strong {font-weight: 700;} li {margin-bottom: 15px;} /* MAIN */ main#ayming-app {} /* HEADER */ main header {position: absolute;} main header > .header__container { padding: 15px 0; } figure.ayming-logo svg { width: 100px; height: auto;} main header > .header__container a.button { font-size: 15px; padding: 7px 20px;} main.informe header > .header__container {gap: 30px;} /* HOME */ main.ayming-app.home:after, main.ayming-app.home:before{ opacity: 0.3; } section.ayming-app-home__section > .ayming-app-home__container {display: block;} /*main.ayming-app.home {background-position: 30%; background-color: rgb(0 0 0 / 60%); background-blend-mode: multiply;}*/ section.ayming-app-home__section {padding-top: 80px; height: 100%;} section.ayming-app-home__section > .ayming-app-home__container {display: block;} section.ayming-app-home__section .title {font-size: 40px;} /* section.ayming-app-home__section .title br {display: none;} */ div.ayming-app-home__row-tablet {display: flex; flex-direction: column-reverse; margin-top: 0px;} div.ayming-app-home__row-tablet:after { left: -20px; } div.ayming-app-home__row-tablet ul {padding-top: 5px;} div.ayming-app-home__row-tablet figure.ayming-app-home__row-tablet__image {width: 250px; margin-inline: auto;} section.ayming-app-home__section input {max-width: 100%;} section.ayming-app-home__section a.button { margin-inline: auto; display: flex;} section.ayming-app-home__section > .ayming-app-home__container.step1 .button_home { position: fixed; width: 100%; height: auto; bottom: 0; left: 0; border-radius: 0; /* background-color: var(--white); */ background-color: var(--blue); padding: 20px 0;} section.ayming-app-home__section > .ayming-app-home__container.step1 .button_home a.button {box-shadow: none !important; border: 2px solid var(--white);} section.ayming-app-home__section > .ayming-app-home__container.step2 {text-align: center;} /* PASOS */ section.ayming-app-interior__section {padding-top: 80px; height: 100%;} section.ayming-app-interior__section > .ayming-app-interior__container { display: block; } figure.ayming-app-interior__figure {width: 200px; height: 200px; margin: 0 auto 30px; border-width: 15px;} figure.ayming-app-interior__figure:before {height: 200px; left: -285%; } figure.ayming-app-interior__figure:after {content: ""; position: absolute; top: 50%; right: -285%; transform: translateY(-50%); width: 400%; height: 200px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(../../plugins/cuestionario-ibd/cuestionario_app/public/img/ilus_circulo-right.svg); } .ayming-app-interior__content { text-align: center; } section.ayming-app-interior__section .hello {margin-bottom: 5px;} section.ayming-app-interior__section .title { font-size: 30px; } .ayming-app__row-buttons {margin-top: 30px; justify-content: center;} .ayming-app__row-buttons.multi-column {grid-template-columns: 1fr 1fr; justify-items: center;} .ayming-app__row-buttons.ayming-app__row-buttons-next {justify-content: center; margin-top: 60px;} .ayming-app__row-buttons.ayming-app__row-buttons-next > a.button {width: 90%; } /* INFORME */ main#ayming-app.ayming-app.informe figure.ayming-app__figure img {object-fit: contain; object-position: top;} section.ayming-app-informe__section { padding: 80px var(--padding-web) 20px; height: 100%;} section.ayming-app-informe__section > .ayming-app-informe__container {padding: 20px;} section.ayming-app-informe__section p {font-size: 16px;} .ayming-app-informe__row.title { margin-bottom: 30px; padding: 0 0px; } .ayming-app-informe__row.title .title {font-size: 27px;} .ayming-app-informe__row.resume { padding: 20px; margin-bottom: 20px;} .ayming-app-informe__resmune-wrapper { flex-direction: column; } figure.ayming-app-informe__image.resume {width: 150px; height: auto;} .ayming-app-informe__row.bars { padding-bottom: 50px; margin-bottom: 40px; } span.bar-content {margin: 0 8%;} span.bar-content:before { font-size: 20px; bottom: -30px;} span.bar-content:after { font-size: 8px; bottom: -40px;} .ayming-app-informe__row.recomendation { padding: 20px; height: 400px;} .ayming-app-informe__row.recomendation .title {font-size: 22px;} /* .ayming-app-informe__row.recomendation p {font-size: 16px;} */ .ayming-app-informe__row.recomendation ul { padding: 20px; margin-top: 20px; flex-wrap: wrap;} .ayming-app-informe__row.recomendation li {font-size: 16px; padding: 0 0 0 25px;} .ayming-app-informe__row.recomendation li:before { width: 17px; height: 17px; } .ayming-app-informe__recomendation-wrapper {display: flex; flex-direction: column; gap: 25px;} figure.ayming-app-informe__recomendation-wrapper__image { width: 180px; height: 180px; border-width: 8px; margin-inline:auto; order: 1;} .ayming-app-informe__recomendation-wrapper__text {order: 2;} main#ayming-app.ayming-app.informe .header__container a.button {font-size: 16px;} main#ayming-app.ayming-app.informe .header__container a.button:before {width: 22px; height: 10px;} .ayming-app-reporte_block .ayming-app-informe__container { min-height: 100px !important; padding-top: 40px !important; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); } .ayming-app-informe__row.button {margin: 0px auto 10px; width: 95%;} /* FORMULARIO */ .ayming-app-form__section {padding: 0 var(--padding-web) 20px;} .ayming-app-form__row-logo {padding: 15px 0 !important; margin-bottom: 7px !important;} .ayming-app-form__row-logo > figure {width: 100px; height: auto;} .ayming-app-form__container { margin-top: 0 !important; padding: 20px !important; } .ayming-app-form__row-text {display: block !important;} .ayming-app-form__row-text .hello {font-size: 20px;} .ayming-app-form__row-text figure { width: 165px; margin: 20px auto !important;} .ayming-app-form__row-form { padding: 20px 20px 50px;} .gform_wrapper {margin-top: 0 !important;} form .gform_fields {display: block !important;} div.gfield { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0px; margin-bottom: 15px !important; } label.gform-field-label {margin-bottom: 3px !important;} label.gform-field-label > span.gfield_required::after {right: -7px;} .ginput_container { width: 100% !important; } .ayming-captcha > .ginput_recaptcha { width: 100% !important; } .ayming-captcha > .ginput_recaptcha > div { position: relative; left: 50%; transform: translateX(-50%) scale(0.8); transform-origin: center; } form .gform_fields > .gfield--width-third.ayming-acceptance.second {margin-top: 20px;} } /*-----------------------------------------------------------------*/ /* MOVIL /*-----------------------------------------------------------------*/ @media (max-width: 767px) { .ayming-app__row-buttons.multi-column {grid-template-columns: 1fr; justify-items: center;} .ayming-app-informe__row.button a.button { font-size: 14px !important; width: 95%;} } /* PRINT */ @media print { .breakprint{page-break-after: always; margin-top:50px; padding-top: 100px; height: 100px;} .subtitle, .recomendation{margin-top: 50px;} .mt0{margin-top: 0!important;} b, .b, strong, .strong { font-weight: 400;} .noprint{display: none;} .ayming-app-informe__resmune-wrapper { flex-direction: row; } body{background-color: #ffffff;} section.ayming-app-informe__section > .ayming-app-informe__container{box-shadow: none;} .pie.animate, span.bar-content.animate{ animation: none!important;} }