/*   
Theme Name: Julia Monastero
Description: Tema para o site da Julia Monastero – Psicóloga Comportamental.
Author: Camila Lins
Author URI: http://camilalins.co
Version: 2025
*/

@charset "utf-8";

/* Reset */
*, *:before, *:after {box-sizing:border-box; -moz-box-sizing:border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block;}
audio, canvas, progress, video {display:inline-block;}
img, object, embed, video, iframe {max-width:100%;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
th {font-weight:bold; vertical-align:bottom;}
td {font-weight:normal; vertical-align:middle;}
hr {display:block; height:1px; border:0; border-top:1px solid #CCC; margin:10px 0; padding:0;}
input, select {vertical-align:middle;}
pre {white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom; vertical-align:baseline;}
input:focus, textarea:focus, button:focus, select:focus {outline:0;}
a:hover, a:active {outline:0;}
small {font-size:85%;}
strong, th {font-weight:bold;}
td, td img {vertical-align:top;}
sub, sup {font-size:75%; line-height:0; position:relative;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
pre, code, kbd, samp {font-family:monospace, sans-serif;}
label, input[type=button], input[type=submit], button {cursor:pointer;}
body, select, input, textarea {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
button, input, select, textarea {margin:0; resize:none; color:inherit; font:inherit; border:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
button {width:auto; overflow:visible; background-position:center;}
textarea {overflow:auto;}
ins {background:#FDD900; color:#000; text-decoration:none;}
mark {background:#FDD900; color:#000; font-style:italic; font-weight:bold;}
audio, canvas, iframe, img, svg, video {vertical-align:middle;}
html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

::-moz-selection{background:#501C19; color:#E5D3BB; text-shadow:none;}
::selection {background:#501C19; color:#E5D3BB; text-shadow:none;}

::-webkit-input-placeholder {color:#E5D3BB; text-transform: uppercase; font-weight: 600;}
::-moz-placeholder {color:#E5D3BB; text-transform: uppercase; font-weight: 600;}
::placeholder {color:#E5D3BB; text-transform: uppercase; font-weight: 600;}

*::-webkit-media-controls-start-playback-button {display:none !important; -webkit-appearance:none;}

/* Toolbox */
.hidden {display:none !important;}
.flex {display:flex;}

/* Variáveis */
:root {
    --cor-bege:#E5D3BB;
    --cor-marsala:#761E1A;
    --cor-marsala-escuro:#501C19;
    --cor-verde:#919E82;
    --cor-amarelo:#E2A749;
    --cor-branco:#EEE8DD;
    --cor-preto:#1D0202;

    --padding:50px;
}


/* Page style */
html {overscroll-behavior:none; background: var(--cor-bege); scrollbar-color:var(--cor-marsala) var(--cor-bege); min-height:100vh;}
body::-webkit-scrollbar {width:8px;}
body::-webkit-scrollbar-track {box-shadow:inset 0 0 3px rgba(0, 0, 0, .2); background: var(--cor-bege);}
body::-webkit-scrollbar-thumb {background-color:var(--cor-marsala); border-radius:5px;}

body {font:500 26px/1.3 'Instrument Sans', sans-serif; font-optical-sizing: auto; font-variation-settings: "wdth" 85; color:var(--cor-marsala); background:var(--cor-bege) url(img/layout/bg-pattern.png) repeat; min-height:100vh;}

a {color:var(--cor-marsala-escuro); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:all 250ms ease-out;}
a:hover {color:var(--cor-cinza);}

.mobile-check {display:none;}

.video-embed {position:relative; width:100%; padding-bottom:56.3%; height:0; background:var(--cor-bege) url(img/layout/loading.svg) no-repeat center; background-size:15%;}
.video-embed iframe {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}

#wrap {position:relative; width:100%; min-height:100vh; overflow-x: hidden;}

header {padding: var(--padding) var(--padding) 0; display: flex; justify-content: space-between; align-items: flex-start;}
header h1 {width: 25%; max-width: 185px;}
header h1 a {display: block; width: 100%; height: 0; padding-bottom: 43%; background: url(img/layout/logo.svg) no-repeat top left / 100%; text-indent: -99999px; transition: none;}
header nav {text-transform: uppercase; font-size: 28px; line-height:50px; font-weight: 700; font-variation-settings:"wdth" 75; display: flex; gap:8px; align-items: center; padding-right:58px;}
header nav a {color:var(--cor-marsala); padding:0 16px; border-radius:50px;}
header nav a:hover, header nav a.active {background:var(--cor-amarelo); color:var(--cor-marsala);}

header .whatsapp {position:fixed; z-index:100; top:var(--padding); right:var(--padding); width:50px; height:50px; border-radius:100%; background:var(--cor-verde); display:flex; align-items: center; justify-content: center; color:var(--cor-branco);}
header .whatsapp:hover {transform:scale(1.08);}

footer {text-align: center; margin-top: 60px; padding-bottom: 20px; font-size:14px; font-weight: 600;}
footer .dev, footer .dev a {font-size: 12px !important;}

/* Home */
.highlight-atendimentos {display:flex; align-items: start; padding-top:200px; position: relative; overflow: hidden;}
.highlight-atendimentos .text {background:var(--cor-amarelo); width:50%; margin-top:75px; position: relative;}
.highlight-atendimentos .text::after {content:''; background:var(--cor-amarelo); position: absolute; left:100%; top:0; bottom:0; width:500px; border-radius:0 100% 100% 0; transform:translateX(-250px); pointer-events: none;}
.highlight-atendimentos .text .wrapper {margin:0 0 0 auto; max-width:600px; padding:var(--padding); position: relative; z-index: 5;}
.highlight-atendimentos .text h3 {font:italic 700 40px/1.2 'Playfair Display', sans-serif;}
.highlight-atendimentos .text p {margin:30px 0; font-size:28px;}
.highlight-atendimentos .text a {display:inline-block; font:italic 700 24px/50px 'Playfair Display', sans-serif; background:var(--cor-marsala); color:var(--cor-branco); padding:0 30px; border-radius:60px;}
.highlight-atendimentos .text a:hover {background-color: var(--cor-bege); color:var(--cor-marsala);}
.highlight-atendimentos .media {width:50%; padding-left:var(--padding); margin-top:auto; overflow: hidden; position: relative; z-index: 5; border-radius:50% 0 0 0;}
.highlight-atendimentos .media video {width:100%; height:auto; border-radius:50% 0 0 0;}
.highlight-atendimentos .circle {position: absolute; left:calc(54.5%); top:130px; background:var(--cor-marsala); width:160px; height:160px; border-radius:100%;
width: clamp(5rem, 2.9927rem + 5.8394vw, 10rem); height: clamp(5rem, 2.9927rem + 5.8394vw, 10rem);}

#contato {min-height:100vh; display:flex; align-items: center; justify-content: center; flex-direction: column; background:var(--cor-marsala); color:var(--cor-bege); overflow: hidden;}
#contato .wrapper {max-width:1180px;  margin:auto auto 0; display:flex; gap:var(--padding); padding:0 var(--padding);}
#contato .text {order:2; width:100%; margin-top:30px;}
#contato .text h3 {font:italic 600 40px/1.2 'Playfair Display', sans-serif; color:var(--cor-branco);}
#contato .text p {margin:30px 0;}
#contato .text ul {display:flex; flex-direction: column; gap:30px;}
#contato .text a svg {margin-right:12px; transition:all 250ms ease-out;}
#contato .text a:hover svg {transform:scale(1.15);}
#contato a {color:var(--cor-bege); font-weight: 600;}
#contato a:hover {color:var(--cor-amarelo);}
#contato form {order:1; width:100%; position: relative;}
#contato footer {margin-top:auto; font-weight: 500;}

form {display:flex; flex-direction: column; gap:18px; color:var(--cor-branco)}
form input {height:60px; border:2px solid var(--cor-bege); background:transparent; line-height:60px; border-radius:60px; width:100%; padding:0 24px; transition:all 250ms ease-out;}
form textarea {height:200px; border:2px solid var(--cor-bege); background:transparent; line-height:120%; border-radius:30px; width:100%; padding:18px 24px; transition:all 250ms ease-out;}
form input:focus, form textarea:focus {border-color:var(--cor-amarelo);}
form button {background:var(--cor-amarelo); color:var(--cor-marsala); border-radius:60px; padding:0 24px; align-self: flex-start; font:italic 600 30px/60px 'Playfair Display', sans-serif; transition:all 250ms ease-out;}
form button:hover, form button:focus {background:var(--cor-bege);}
form .error {border-color:red;}
form .error:focus {border-color:red; box-shadow:0 0 0 2px var(--cor-amarelo);}
form .feedback {position: absolute; top:100%; left:0; right:0; font-size: 18px; margin-top:18px;}

/* Sobre */
#sobre {position: relative;}
#sobre .wrapper {max-width:1310px; margin:0 auto; padding:0 var(--padding);}
#sobre .intro {width:100%; display: flex; align-items: center; gap:var(--padding); position: relative; z-index: 5;}
#sobre .intro .image {width:50%; flex-shrink: 0; border-radius:100% 100% 0 100%; overflow: hidden;}
#sobre .intro .text {margin-right: 5%; margin-top:5%;}
#sobre .intro h2 {font:italic 600 62px/1.2 'Playfair Display', sans-serif; margin-bottom:30px;}
#sobre .intro h2 svg {width:40%; max-width:158px; margin-top:-16px; margin-left:-5px;}
#sobre .intro p {font-size:30px;}
#sobre .info {background:var(--cor-verde); margin:-160px 5.37% 0; padding:240px 8.5% 115px; border-radius:0 500px 0 500px; position: relative; z-index:4;}
#sobre .info h3 {font:italic 600 40px/1.2 'Playfair Display', sans-serif; color:var(--cor-branco); margin-bottom:12px;}
#sobre .info p {margin-bottom:var(--padding);}
#sobre .info h4 {font:italic 600 28px/1.2 'Playfair Display', sans-serif; color:var(--cor-bege); text-align: right;}
#sobre .more {background: var(--cor-amarelo); margin-right:40%; padding:190px 90px 60px 90px; border-radius: 0 350px 350px 0; margin-top:-130px; position: relative;}
#sobre .more a {display: block; text-align: right; font-size:30px; font-weight: 600; line-height: 1.5; color: var(--cor-marsala);}
#sobre .more a svg {transition: all 250ms ease-out;}
#sobre .more a:hover {color: var(--cor-marsala-escuro);}
#sobre .more a:hover svg {scale:1.2;}
#sobre .circle {position: absolute; z-index: 5; right:40%; top:calc(100% - 210px); width:110px; height:110px; background:var(--cor-marsala); border-radius: 50%; transform:translate(40%, -50%);}

/* Atendimentos */
#atendimentos {padding-top:40px;}
#atendimentos .hero {position: relative; padding-left:18%;}
#atendimentos .hero h2 {font:italic 600 62px/1.2 'Playfair Display', sans-serif; position: absolute; left:18%; top:25%; z-index: 5;}
#atendimentos .hero .image {border-radius:666px 0 0 0; overflow: hidden; position: relative;}
#atendimentos .hero .image::after {content:''; position: absolute; left:0; top:0; width:100%; height:100%; opacity: 0.8; background: linear-gradient(324deg, rgba(145, 158, 130, 0.00) 68.39%, #E5D3BB 85.69%);}
#atendimentos .hero .image img {width: 100%; height: auto;}

#atendimentos .services {background:var(--cor-amarelo); padding:80px 18%;}
#atendimentos .services .wrapper {max-width:1180px; margin:0 auto; display: flex; flex-direction: column; gap:60px; padding:0 var(--padding);}
#atendimentos .services .flex {gap:80px;}
#atendimentos .services .psicoterapia {width:100%; display: flex; flex-direction: column; gap:10px;}
#atendimentos .services .psicoterapia h3 {line-height: 130%;}
#atendimentos .services .psicoterapia h3 span {font-size:32px; font-weight: 700; text-transform: uppercase; font-variation-settings: "wdth" 75;}
#atendimentos .services .psicoterapia h3 strong {display:block; font-family:'Playfair Display', sans-serif; font-size: 40px; font-style: italic; font-weight: 700;}

#atendimentos .details {background-color: var(--cor-marsala); color:var(--cor-bege); margin-left:18%; margin-bottom:150px; padding-right: 18%; border-radius: 0 0 360px 0; position: relative;}
#atendimentos .details .wrapper {max-width:1180px; margin:0 auto; padding:62px var(--padding);}
#atendimentos .details h4 {font-family:'Playfair Display', sans-serif; font-size: 42px; font-style: italic; font-weight: 700; color:var(--cor-branco);}
#atendimentos .details p {margin-top:30px;}
#atendimentos .details .contact-cta {position: absolute; top:100%; padding:20px 32px; background-color: var(--cor-branco); border-radius:0 0 16px 16px; font-size:30px; font-weight: 600; color:var(--cor-marsala);}
#atendimentos .details .contact-cta:hover {background:var(--cor-amarelo);}

/* Tela de espera */
body.soon {background:var(--cor-bege) url(img/layout/background-tapume.jpg) no-repeat center / cover; font:500 16px 'IBM Plex Sans Condensed', sans-serif;}
body.soon #wrap {display:flex; flex-direction:column; justify-content:space-around; align-items: center; text-align:center; padding:var(--padding);}
body.soon h1 {order:2; width:100%; max-width:888px; text-indent:-99999px;}
body.soon h1 span {display:block; width:100%; height:0; padding-bottom:42.34%; background:url(img/layout/logo-full.svg) no-repeat top left / contain;}
body.soon h2 {order:1; font-size:32px; font-weight: 600; text-transform: uppercase; color: var(--cor-marsala);}
body.soon .links {order:3; display:flex; flex-direction: column; gap:10px;}
body.soon .links a {font-size:32px; font-weight: 500; color:var(--cor-marsala-escuro);}
body.soon .links svg {transition:all 250ms ease-out;}
body.soon .links a:hover {color:var(--cor-marsala);}
body.soon .links a:hover svg {fill:var(--cor-marsala-escuro);}
body.soon .dev {order:4; position: absolute; right:calc(var(--padding) * .25); bottom:calc(var(--padding) * .25); padding:calc(var(--padding) * .25); font-size:12px; opacity:.5; color:var(--cor-bege); transition:opacity 250ms ease-out; cursor:default;}
body.soon .dev a {color:var(--cor-bege); font-weight:700;}
body.soon .dev:hover {opacity:1;}
body.soon .dev a:hover {text-decoration: underline;}

@media screen and (max-width:760px){
    body.soon .links a {font-size:20px;}
}






body.home header {position: absolute; left:0; right:0; z-index: 100;}
body.home header nav a {color:var(--cor-amarelo);}
body.home header nav a:hover {color:var(--cor-marsala);}
#hero {max-width:100%; height:100vh; min-height:800px; position: relative; aspect-ratio: 19/6; overflow: hidden;}
#hero.loading {background:url(img/layout/loading.svg) no-repeat center;}
#hero .text {opacity: 0; position: absolute; left:calc(50% + var(--padding)); bottom:5vw; max-width: 520px; color:var(--cor-bege);}
#hero .text h2 {width: 61.53%; text-indent: -99999px;}
#hero .text h2 span {display:block; width:100%; height:0; padding-bottom:45.62%; background:url(img/layout/julia-monastero.svg) no-repeat;}
#hero .text h3 {font-size:36px; font-variation-settings: "wdth" 75; text-transform: uppercase; font-weight: 500; margin-top:12px;}
#hero .text p {font-size:30px; margin:30px 0;}
#hero .text a {display:inline-block; background:var(--cor-amarelo); color:var(--cor-marsala); border-radius:60px; padding:0 24px; align-self: flex-start; font:italic 700 30px/60px 'Playfair Display', sans-serif;}
#hero .text a:hover {background:var(--cor-bege);}

#hero .background {height:100%; display: flex;}
#hero img {min-height:100%; min-width:100%; object-fit: cover; position: absolute;}

.clip-svg {position: absolute; width: 0; height: 0;}
.image.clipped {width:47.6%; height:100%; -webkit-clip-path: url(#left); clip-path: url(#left); position: relative; opacity: 0;}
.right.clipped {width:45.42%; background:var(--cor-marsala); -webkit-clip-path: url(#right); clip-path: url(#right); opacity: 0;}
.middle {background:var(--cor-verde); position: absolute; left:20vw; right:30vw; bottom:0; opacity: 0;  top:50.48%; border-radius:50vw 50vw 0 0;}


@media screen and (max-width:1500px){
    #hero .text {left:50%;}
}

@media screen and (max-width:1350px){
    #hero .text {max-width:400px;}
    #hero .text h3 {font-size:30px;}
    #hero .text p {font-size:26px;}
    #hero .text a {font-size:26px;}

    #sobre .intro h2 {font-size: clamp(2.5rem, 0.7288rem + 3.7288vw, 3.875rem);}
    #sobre .intro p {font-size: clamp(1.125rem, 0.6094rem + 1.5vw, 1.875rem);}

    #atendimentos .hero h2 {font-size: clamp(2.5rem, 0.7288rem + 3.7288vw, 3.875rem);}
}

@media screen and (max-width:1150px){
    .right.clipped {width:50%;}
}

@media screen and (max-width:1080px){
    :root {
        --padding:35px;
    }

    header nav {gap:12px; font-size:26px;}
    
    #hero .text {max-width:380px;}
    #hero .text p {font-size:22px; margin:15px 0;}
    #hero .text a {font-size:22px; line-height:50px;}

    #sobre .wrapper {padding-top:var(--padding);}
    #sobre .info {padding:210px 8.5% 180px; border-radius:0 420px 0 420px;}
    #sobre .more a {font-size:24px;}

    #atendimentos .services .flex {flex-direction: column;}
    #atendimentos .details .contact-cta {font-size:24px;}
}

@media screen and (max-width:960px){
    .mobile-check {display:block;}

    #contato a {font-size:22px;}

    header h1 {max-width:50px; min-width:40px;}
    header h1 a {background:url(img/layout/logo-icon2.svg) no-repeat top left / 100%; padding-bottom:127%;}

    #hero .text h2 span {background:url(img/layout/julia-monastero-marsala.svg) no-repeat;}
    #hero .text {opacity:1; color:var(--cor-marsala); left:var(--padding); bottom:auto; top:50%; transform:translateY(-50%) !important; margin-top:var(--padding);}
    #hero .text h2 {width:82%;}
    #hero .text h3 {text-shadow: 0 0 15px #E5D3BB;}
    #hero .text p {font-size:26px; text-shadow: 0 0 15px #E5D3BB;}
    .middle {display: none;}
    .right.clipped {display: none;}
    .image.clipped {opacity:1; transform:none !important; clip-path:none; width:76%; margin-left:auto; border-radius:0 0 0 365px; overflow: hidden;}

    .highlight-atendimentos .text {margin-top:0;}
    .highlight-atendimentos .text p {font-size:24px;}
    .highlight-atendimentos .text a {font-size: clamp(1.125rem, 0.7896rem + 0.9756vw, 1.375rem); line-height:clamp(1.125rem, 0.7896rem + 0.9756vw, 1.375rem); padding:16px 30px;}
    .highlight-atendimentos .media {margin-top:auto; padding:0;}
}

@media screen and (max-width:860px){
    #sobre .intro h2 svg {margin-top:-10px;}
    #sobre .info h3 {font-size:36px;}
    #sobre .info h4 {font-size:26px;}
    #sobre .more {padding:150px 60px 60px 35px; display:flex; flex-direction: column; gap:12px;}
    #sobre .circle {top:calc(100% - 180px);}
}

@media screen and (max-width:760px){
    body {font-size:22px;}
    
    #hero {display:flex; flex-direction: column; height:auto; aspect-ratio: auto;}
    #hero .background {flex-shrink: 0; height:80vh;}
    .image.clipped {width:100%;}
    #hero .text {position: static; transform:none !important; max-width: 100%; padding:0 var(--padding);}
    #hero .text h2 {max-width:320px;}

    .highlight-atendimentos {flex-direction: column; padding-top:100px;}
    .highlight-atendimentos .text {width: 100%;}
    .highlight-atendimentos .text .wrapper {max-width: none;}
    .highlight-atendimentos .media {width: 100%; border-radius: 0;}
    .highlight-atendimentos .media video {border-radius: 0;}
    .highlight-atendimentos .circle {width: clamp(5rem, 1.0473rem + 16.2162vw, 8.75rem); height:clamp(5rem, 1.0473rem + 16.2162vw, 8.75rem); top:0; left:auto; right:5vw;}

    #contato .wrapper {flex-direction: column; gap:50px;}
    #contato .text {order:1;}
    #contato form {order:2;}
    form .feedback {font-size:16px; margin-top:8px;}
    #contato footer {margin-top:60px;}
    #contato a {font-size:26px;}

    #sobre .intro h2 {margin-bottom:12px;}
    #sobre .info {padding: 190px 8.5% 120px; border-radius: 0 340px 0 340px;}
    #sobre .info h4 {font-size:22px;}
    #sobre .more a {font-size:22px;}
    #sobre .more a svg {width:18px;}

    #atendimentos .details {border-radius:0 0 130px 0;}
}

@media screen and (max-width:700px){
    header nav {font-size:22px; gap:8px;}
    #sobre .intro h2 {font-size: clamp(2.0625rem, 0.4583rem + 4.6667vw, 2.5rem);}
    #sobre .intro .text {margin-right: 0;}
    #sobre .info {margin:-160px 0 115px;}
    #sobre .more {margin-top:-230px; margin-right:25%;}
    #sobre .circle {right:25%;}
}

@media screen and (max-width:600px){
    #sobre .intro {flex-direction: column;}
    #sobre .intro .image {width:100%;}
    #sobre .intro .text {margin:0; text-align: center;}
    #sobre .intro h2 {font-size: clamp(3.25rem, 2.0893rem + 4.7619vw, 3.875rem);}
    #sobre .intro h2 br {display: none;}
    #sobre .intro p {font-size: clamp(1.375rem, 0.4464rem + 3.8095vw, 1.875rem);}

    #sobre .info {margin:50px calc(var(--padding) * -1) 0; padding:calc(var(--padding) * 2) var(--padding); border-radius:0;}
    #sobre .info h4 {text-align: center;}
    #sobre .info h4 br {display:none;}
    #sobre .more {margin:-100px 9% 0 0; padding:150px 60px 60px 20px;}
    #sobre .more a {font-size:20px;}
    #sobre .more a svg {width:14px;}
    #sobre .circle {width:70px; height:70px; right:9%;}

    #atendimentos .hero {padding-left:0;}
    #atendimentos .hero h2 {position: static; text-align: right; font-size: clamp(3.25rem, 2.0893rem + 4.7619vw, 3.875rem); padding:0 var(--padding) var(--padding);}
    #atendimentos .services {padding:50px 0;}
    #atendimentos .details {margin-left:0; padding-right:var(--padding);}
    #atendimentos .details .contact-cta {font-size:20px;}
    #atendimentos .details .contact-cta svg {width:14px;}

    #atendimentos .services .psicoterapia h3 span {font-size:28px;}
    #atendimentos .services .psicoterapia h3 strong {font-size:36px;}
}

@media screen and (max-width:550px){
    :root {
        --padding:20px;
    }

    header nav {gap:0;}
    header nav a {padding:0 8px;}

    .image.clipped {border-radius:0 0 0 250px;}
    .highlight-atendimentos .circle {top:40px;}

    #contato .wrapper {padding-bottom:50px;}
    form .feedback {font-size:16px; margin-top:12px;}

    #atendimentos .details .contact-cta {border-radius:16px; top:calc(100% + var(--padding));}
}

@media screen and (max-width:440px){
    header nav {padding-right:0;}
    header .whatsapp {top:80px;}

    #contato a {font-size:24px;}
}