/*
Original design: Variant Duo (v1.0 - Oct 08, 2010) - A free xhtml/css website template by Andreas Viklund.
For more information, see http://andreasviklund.com/templates/variant-duo/
*/

/*

font-family: 'Kalam', cursive;
font-family: 'Shadows Into Light Two', cursive;
*/

/* Main containers */

@font-face {
    font-family: phatOtto;
    src: url('../fonts/phat_otto.otf');
}



* {
  box-sizing: border-box;
}  

.bgcolor_blue {
	ssbackground-color: #00ACEE;
	background-color: #204099;
	color: white;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5473c8+0,204099+25,204099+100 */
	sbackground: linear-gradient(to bottom,  #5473c8 0%,#204099 25%,#204099 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#204099+0,204099+75,5473c8+100 */
	background: linear-gradient(to bottom,  #204099 0%,#204099 75%,#5473c8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
	
	
}



.bgcolor_menu {
	background-color: #EBEBEB;
}
.bgcolor_blue_darkgrey {
	background-color: #333333;
}

.color_blue {
	color: #204099;
}

body {
	padding:0; margin:0; 
	background-color: white;
	
    color: #111;
	text-align:left; 
	line-height: 1.8em;
	font:110% phatOtto, tahoma, sans-serif;
}


.width_columm {
	width:790px; 
	margin: 0 auto;
}

.flex_column {
	width:90%; 
	margin: 0 auto;
}




/* Camadas (z-index) do site, da mais alta para a mais baixa:
   300 menu principal | 100 botão fixo "Agendar consulta" | demais: sem z-index
   O menu fica acima de tudo para o conteúdo (cartões, bolinhas, fotos) nunca passar por cima dele ao rolar. */
#headerfixed {
	background-color: #204099;
	width: 100%;
	position: fixed;
	z-index: 300;
	border-bottom: 1px solid white;
}

.empresainfo {
	height: 100px;
	padding-top: 20px;
}

.mainlogo {
	float: left;
	width: 250px;
	text-align: right;
	margin: 0px 0 0px -10px;
}

.logotext {
	padding-top: 30px;
	padding-left: 20px;
	float: left;
	width: 520px;
	text-align: left;
}
.logotext h2 {
	margin: 0;
	color: #204099;
    font-size: 2.8em;
	
}
.logotext h3 {
	color: #00ACEE;
	margin: 0;
	margin-top: 5px;
}

.logotext h2 a, .logotext h3 a {text-decoration: none; color: #204099;}
.logotext h2 a:hover, .logotext h3 a:hover {color:#204099;}

.bgcolor_blue .logotext h2 a, .bgcolor_blue .logotext h3 a, .bgcolor_blue p {
	color: #F1F1F1;
}
.bgcolor_blue a {color:#F1F1F1; text-decoration: none;}
.bgcolor_blue a:hover, .bgcolor_blue .logotext h2 a:hover, .bgcolor_blue .logotext h3 a:hover {color:#F1F1F1;}



.logotext h3 a {color: #00ACEE;}

#mainintro {
	padding: 100px 0 20px;
}

#mainintro.onlyone {
	padding: 150px 0 150px 0;
}


#mainintro.bgcurvedlines {
	display: none;
}

#mainintro.bigpicture {
	padding: 0px 0 0px 0;
	height: auto;
	
	background: linear-gradient(to right, #D3C7C3 75%, #B6A8A0 100%);
}

#mainintro .karlafoto {
	background: transparent url('../images_thisproject/karla-lacht-cons-2026-transp-kleiner.png') no-repeat;
	background-position: center calc(50% + 60px);
	background-size: cover;
}

.display_only_for_smaller_than_950 {
	display: none;
}

#mainintro .logointro {
	padding: 100px 20px 20px;
}




#mainintro .intropic {
	width: 300px;
}

.roundedpic {
	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-bottomleft: 40px;
	border-bottom-left-radius: 40px;
}

p.lematext {
	padding-right: 20px;
}

h2.lematext {
	font-size: 1.9em;
	line-height: 1.3em;
}

p.lematext {
	margin-top: 30px;
}

.twothird {
	float: left;
	width: 66%;
}

.onethird {
	float: left;
	width: 33%;
	
}

.half {
	float: left;
	width: 50%;
	
}


.separator_simple {
	height: 25px;
}

.mainsection {
	margin-bottom: 0px;
}

.logo_opaque {
	padding-top: 0px;
	padding-bottom: 40px;
	background: #FFF url('../images_thisproject/logo-auge-opaque2-w1200.png') no-repeat center top;
}

.bgcurvedlines {
	background: #FFF url('../backgrounds/harrybrasil_wallpaper_structure1.png') repeat center top;
}



.separator_logo_line {
	background: #FFF url('../images_thisproject/logomarca-outline-darkgrey-h105.png') repeat-x center center;
	height: 100px;
}


.textinfo {
	padding: 40px 0;
}

.textinfo.bigpadding {
	padding: 40px 0;
}


/* Navitab menu */

.nicelist .onethird {
	padding-right: 20px;
}

.nicelist h3 {
	padding: 10px 10px 8px;
	ssbackground-color: #00ACEE;
	background-color: #204099;
	color: white;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.logo_whiteoutline {
	background-color: #204099;
	background-image: url('../images_thisproject/logo-ivi-whiteoutline-w900.png');
	background-position: center 25px;
	background-repeat: no-repeat;
	min-height: 400px;
}

.youtube {
	padding: 90px 0 30px;
	text-align: center;
}


.youtube h3 {
	margin-top: 60px;
	margin-bottom: 10px;
}


#menu {
	text-align:center;

}

/* https://saruwakakun.com/en/css3-buttons */

.bluebutton, .question {
	margin-top: 20px;
	color: #FFF;
	border-radius: 15px;
	display: inline-block;
	height: auto;
	width: auto;
	text-align: left;
	font-size: 1.6em;
	line-height: 1.3em;
	vertical-align: middle;
	ssbackground: #1da1f3;
	background: #204099;
	
	overflow: hidden;
	text-decoration:none;
	padding: 10px 20px 4px;
	display: block;
	transition: background-color 0.3s ease;
}

.bluebutton:hover, .question:hover {
	color: #FFF;
	background: #1880C1;
}

.question .fa-twitter {
    text-shadow: 2px 2px 0px #4287d6;
    font-size: 30px;
}

.bluebutton span, .question span {
  display:inline;
  transition: .5s}

.bluebutton:hover span, .question:hover span{/*HoverEffect*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}


.bluebutton.whiteoutlinebutton {
    background: transparent;
	border: 1px solid white;
	transition: background-color 0.3s ease;
}

.bluebutton.whiteoutlinebutton:hover {
	background: #1880C1;
}




p.nobreak {
	white-space: pre-line;
}

.answer {
	ssdisplay: none;
	width: 80%;
	margin: 0 auto 20px;
	padding: 20px;
	background-color: #E1E1E1;
	
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

.abstand {
	height: 20px;
}

/* ++++++ */

.maintext {
	margin: 0 0 0px 0;
	padding: 0 40px 100px;
	font-size: 1.3em;
}

.maintext ul, ol {
	margin: 20px 20px;
}
.maintext p {
	line-height: 1.5em;
}

.maintext p.destaque {
	font-weight: bold;
	line-height: 1.5em;
	text-decoration: underline;
}



/* HTML Tags */
a {color: #88F; text-decoration: underline;}
a:hover {color:#336;}
a img {border:0;}




.navitab {
padding:4px 8px 4px 8px;
margin:0 0 4px 0;
text-decoration:none;
font-size:1.3em;
font-weight: normal;
font-size: 1.1em;
text-decoration:none;
transition: background-color 0.3s ease
}

.navitab:hover {
text-decoration:none;
background:#5473C8;
}

.navitab_hilite {
text-decoration:none;
background:#d0d0d0;
border-bottom:1px solid #ffffff;
}

.activenavitab {
padding:4px 8px 5px 8px;
margin:0 0 5px 0;
font-size:1.1em;
text-decoration: underline;
ssbackground-color: #d0d0d0;
font-weight: normal;
font-size: 1.1em;
}

.activenavitab:hover {
text-decoration: underline;
background:#5473C8;
}



#navitabs {text-align: center; }
#navitabs ul{ list-style:none; margin:0; padding:0; }
#navitabs li { display: inline-block; padding:0px; margin:0;}
#navitabs li a { color: #EFEFEF; padding:15px 10px;  margin: 0; border: none; width:auto; display:block; text-align:center; margin-right:10px;  transition: background-color 0.3s ease}
#navitabs li a:hover { }
#navitabs ul ul { margin-left: -1px; display:none; position:absolute; z-index:999; }
#navitabs li li { float:none; display: block; padding:0px; margin:0;}
#navitabs li li a { text-decoration: none; background:#48645D; color: white; text-align:left; height:auto; line-height:1; width:auto; padding:6px 20px 6px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0; -webkit-border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px 0px 0px;border-radius: 0px 0px 0px 0px;
transition: background-color 0.3s ease;
}
#navitabs li li a.first {
	
}
#navitabs li li a.last {
}
#navitabs li li a.onlyone {

}
#navitabs li li a:hover {background-color:#a0a0a0; }
* html li li { display:inline; } /* IE6 Bugfix... */




#content {
	background-color: white;
}

.leftcontent {
	float: left;
	width: 300px;
}

.rightcontent {
	margin-left: 340px;
	margin-bottom: 80px;
}


.leftcontent_invert {
	float: left;
	width: 500px;
}

.rightcontent_invert {
	margin-left: 540px;
	margin-bottom: 80px;
}


img.chefbild {
	width: 250px;
	padding: 5px;
	sborder: 5px solid #59816B;
	border-radius: 25px;
}


.infoboxes {
	margin-bottom: 40px;
}

.infobox {
	float: left;
}

.fouritems {
	width: 200px;
	margin-left: 29px;
}

.twoitems {
	width: 400px;
	margin-left: 29px;
}

.infobox.centered {
	text-align: center;
}


.infobox.firstitem {
	margin-left: 0px;
}

.infobox img {
	width: 200px;
}

.infobox p.destaque {
	font-size: 2em;
	line-height: 1.2em;
	border: 4px solid #EEE;
	min-height: 80px;
	padding: 20px 5px;
}

div.spacertop {
	margin-top: 55px;
}


img.floatimg {
	float: left;
	margin: 0 20px 10px 0;
}

/*  */


#container {
	text-align:left; 
	margin: 0px auto 0;
}


.wrap2 {
	width:890px; text-align:left; margin:0px auto 0;
}
#fone {
	width:180px; 
	margin:0 20px 0 630px;
	background-color: #A5000C;
}
#fone p {
	width:180px; 
	text-align:center; 
	margin: 0;
	padding: 5px 0;
	color: white;
}

#logo {
	float: right;
	width: 170px;
	margin: 20px 0 0 0;
}
#logo img {
	padding: 5px;
	background-color: white;
	border: 1px solid #000;
}



.bottomfixed {
	position: absolute;
	bottom: 10px;
	width: 100%;
}


.centered {
	text-align: center;
}

.blocksatz {
	text-align: justify;
}


#indexlink {
	z-index: 30;
}





#footer {
	margin-top: 0px;
	padding: 50px 0 10px;
	background-color: white;
	font-size: 0.9em;
	sborder-top: 25px solid #333;
}


#footer p {
	margin: 0;
	font-size: 1.0em;
	line-height: 1.1em;
}


#footer p.moremargin {
	margin-top: 10px;
}

#footer p.top_padding {
	padding-top: 5px;
}

#footer p.copyright {
	margin-top: 30px;
	background-color: transparent;
	padding: 10px;
	color: #CCF;
}

#footer p.copyright a {
	color: #CCF;
	text-decoration: underline;
}


#footer .infobox img {
	width: auto;
}

#footer .logotext h2 {
	color: #FFF;
}



#footer .labelwrap.spacer {
	margin-top: 12px;
}
#footer .labelwrap p.mylabel {
	width: 80px;
	float: left;
	display: block;
	font-weight: normal;
}
#footer .labelwrap p.info {
	margin-left: 90px;
}


#footer h1 {
	margin-bottom: 0;
	font-size: 1.6em;
}


#footer p.moremargin {
	margin-top: 10px;
}



#footer i.fab,  #footer i.fas, #footer i.far {
	font-size: 1.8em;
	sscolor: #FF831C;
	color: #EEE;
}


.bigicons i.fab,  #footer i.fas, #footer i.far {
	font-size: 1.8em;
	sscolor: #FF831C;
	color: #EEE;
}

.bgcolor_blue .bigicons i.fab,  #footer .bgcolor_blue i.fas, #footer.bgcolor_blue i.far {
	font-size: 1.8em;
	sscolor: #FF831C;
	color: #EEE;
}



#footer a.framedlink i.fab,  
#footer a.framedlink i.fas, 
#footer a.framedlink i.far {
	font-size: 1.0em;
	color: #8888FF;
}

#footer.bgcolor_blue a.framedlink i.fab,  
#footer.bgcolor_blue a.framedlink i.fas, 
#footer.bgcolor_blue a.framedlink i.far {
	color: #CCF;
}






#footer #footerinfo {
	margin: 20px 0 0 0;
}


.gridcontainer {
	display: grid;
	grid-template-columns: 200px auto 200px;
	grid-template-rows: auto;
	grid-gap: 50px;
}

.gridcontainer.half {
	float: none;
	width: auto;
	grid-template-columns: 1fr 1fr;
}


#mainintro .gridcontainer.leftfixed {
	grid-template-columns: 500px 1fr;
}



.gridcontainer.twothird {
	float: none;
	width: auto;
	grid-template-columns: 2fr 1fr;
}
.gridcontainer.onethird {
	float: none;
	width: auto;
	grid-template-columns: 1fr 2fr;
}

.gridcontainer.drittel {
	float: none;
	width: auto;
	grid-template-columns: 1fr 1fr 1fr;
}


.gridcontainer.icon {
	grid-template-columns: 1fr 9fr;
	grid-gap: 10px;
}

.gridcontainer.icon .mygriditem:nth-child(2n-1) {
	text-align: center;
}


.gridcontainer img {
	width: 100%;
	height: auto;
}

.gridcontainer.realsizeimg img {
	width: auto;
	height: auto;
}


.mygriditem, .griditem_left, .griditem_right {
	grid-column-start: auto;
	grid-column-end: span 1;
	grid-row-start: auto;
	grid-row-end: auto;
}

.griditem_middle {
	grid-column-start: auto;
	grid-column-end: span 1;
	grid-row-start: auto;
	grid-row-end: auto;
}





#footerwrap {
	width:820px; 
	text-align:left; 
	margin:0 auto;
	padding: 20px 0 1px 0;
	color: #111;
}


a.framedlink {
	color: #8888FF;
	border: 1px solid #8888FF;
	padding: 4px 10px 3px;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 20px;
	border-radius: 5px;
}

.bgcolor_blue a.framedlink {
	color: #CCF;
	border: 1px solid #CCF;
}



a.framedlink.biglink {
	font-size: 2em;
	line-height: 2em;
	padding: 0px 40px;
	ssdisplay: block;
	
}

a.rounded {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}


p.copyright {
	font-size: 0.8em;
	text-align: center;
	color: white;
	margin: 0;
	padding: 2px 10px;
}

p.copyright a {
	color: white;
}



h1, h2, h3, h4, h5, h6 {
}

h1 {
    font-size: 2.5em;
    line-height: 1em;
	padding: 0;
	margin: 0px 0 20px;
	font-weight: normal;
    font-weight: 700;
	text-align: left;
}

h1 a {font-weight:700; text-decoration:none;}
h1 a:hover {color:#333; text-decoration:none;}


h2 {
	margin:0px 0 40px; 
	font-size: 1.9em;
}

h2 a {
}



h2 span {
	color: #00ACEE;
    position: relative;
}

.center {
	text-align: center;
}

h3 {font-size:1.4em; font-weight:400; margin:0px 0 10px 0;}
p {margin:0 0 10px 0; font-size: 1.1em; line-height: 1.3em;}

h4 {
	font-size: 1.3em;
	margin: 20px 0 10px;
}


#mainintro h3 {
	margin-top: 20px;
}




p.pale {
	margin:0 0 30px 0;
	text-align: center;
    color: #c1cac5;
    display: block;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
	font-size: 1.5em;
    text-transform: uppercase;
}

ul {
	margin:0 0 15px 20px; 
	padding:0;
	font-size: 1.1em; 
	line-height: 1.3em;
}
li {margin:0; padding:0 0 0 5px;}



.left {width:auto; padding: 20px 0;}
.left p {width: 80%;}
.right {float:right; width:24%;background:#fff; padding: 20px; margin-top: 20px;}
.centered {text-align:center;}
.hide {display:none;}


.artigosimples {
	border: 2px solid #00ACEE;
	padding: 20px;
	margin: 0 0 80px 0;

	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-bottomleft: 40px;
	border-bottom-left-radius: 40px;
	-webkit-border-top-right-radius: 40px;
	-moz-border-radius-topright: 40px;
	border-top-right-radius: 40px;
	
}

.artigosimples.background_blue {
	background: #FFF;
}

.artigosimples .gridcontainer {
	grid-gap: 30px;
}

span.question_mito_verdade {
	display: inline-block;
	font-weight: bold;
}
span.verdade {
	display: inline-block;
	padding: 2px 5px;
	border: 2px solid #161;
	color: #161;
}
span.mito {
	display: inline-block;
	padding: 2px 5px;
	border: 2px solid #F11;
	color: #F11;
}

/* MAPS */

#map_canvas1 {
	width: 450px;
	height: 350px;
	border: 1px solid #999;
}


#myinfowindow {
	width:180px;
	height:40px;
	color: black;
}





.clearer {
 clear: both;
}

.mobileonly {
	display: none;
}


/* INPUT TEXTAREA */

label {
	ssfont: normal 0.9em Verdana, sans-serif;
	
	text-align:right;
	margin: 0px;
	padding: 5px 6px 5px 3px;
	width:158px;
	float:left;
	sborder: 1px solid #efefef;
}

label.needed {
	font-weight: bold;
}

label.leftlabel {
	display: block;
	margin-top: 10px;
	float: none;
	text-align: left;
}



input,
textarea,
select {
  padding: 4px;
  font-size: 1.0em;

  
  color: #666;
  background: #FFF;
  border-width: 1px;
  border-style: solid;
  border-color: #888 #DDD #DDD #888;  
}

input.fileload {
	width: 330px;
}


input:focus,
textarea:focus,
select:focus {  
  padding: 3px;
  color: #000;
  background: #FFFFD1;
  border-width: 2px;
}

input.huge {
	font-size: 2.0em;
	padding: 10px;
	width: 90%;
}



input.text {
	width: 180px;
}

input.mini {
	width: 50px;
}



textarea.bigger {
	sfont-size: 1.5em;
	padding: 5px;
	width: 90%;
	height: 200px;
}

textarea.huge {
	sfont-size: 1.5em;
	padding: 10px;
	width: 90%;
	height: 300px;
}


.bigbuttonwrap {
	margin: 20px 0;
	text-align: center;
}

input.button, a.button {
	font-size: 1.25em;
    padding: 0.25em 1.25em;
	background: #b1ddab none repeat scroll 0 0;
    border: 0 none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    line-height: 1em;
    outline: 0 none;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease-in-out 0s;
}

a.button {
	padding: 1px 10px 2px;
}



a.button.big {
	font-size: 1.65em;
    padding: 0.85em 1.85em;
	background: #b1ddab none repeat scroll 0 0;
    border: 0 none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    line-height: 1em;
    outline: 0 none;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease-in-out 0s;
}


a.button.big:hover {
	background-color: #C1E9CB;
}





input.buttonspeichernmini {
  padding: 3px;
  cursor: pointer;
  color: #fff;
  background: #C12C23;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}


/* DIVERSE */

.fotoplaceholder {
	background: #FFF url('../backgrounds/image_add80.jpg') repeat top left;
}


/* Stil für das a-Element als rechteckiger Button */
.copy-button {
    display: inline-flex; /* Inline-Layout */
    align-items: center; /* Zentriere Icon und Text vertikal */
    padding: 12px 20px; /* Innenabstand */
    background-color: #007BFF; /* Blau als Hintergrundfarbe */
    color: white; /* Weiße Schriftfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    border-radius: 5px; /* Abgerundete Ecken */
	margin: 0 20px 0 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Stil für das FontAwesome-Icon */
.copy-button i {
    margin-right: 10px; /* Abstand zwischen Icon und Text */
    font-size: 18px; /* Größe des Icons */
}

/* Stil für den Text */
.copy-button span {
    font-size: 18px; /* Schriftgröße */
}

/* Hover-Effekt */
.copy-button:hover {
    background-color: #0056b3; /* Dunkleres Blau bei Hover */
    color: white; /* Weiße Schriftfarbe */
}



/* CONTACT FORM */



#contact_form label {
	ssfont: normal 0.9em Verdana, sans-serif;
	text-align:left;
	margin: 0px;
	padding: 5px 6px 5px 3px;
	width:auto;
	float:none;
	sborder: 1px solid #efefef;
}


/* email */

div.loadingmini {
	background-image: url('../myimages/ajax-loader-galpao.gif');
	background-repeat: no-repeat;
	background-position: 10px 5px;
	height: 16px;
	width: 150px;
	border: 1px solid #CCC;
	padding: 3px 3px 8px 40px;
}


#error_block {
	padding: 5px;
	background-color: #FF2222;
	color: white;
}



#message {
	padding: 5px; 
	color: white;
}

#message.isok {
	background-color: #229922;
}


#message.iserror {
	background-color: #991111;
}


.announcebig {
	font-family: 'PT Sans Narrow', sans-serif;
    background-color: #eee;
    color: #444;
    padding: 20px 10px 10px;
	margin: 10px 0 40px;
	
}

.announcebig p {
	margin: 20px 0;
}

.announcebig a {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefefd+0,aebf76+100 */
	background: rgb(254,254,253); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,254,253,1) 0%, rgba(174,191,118,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(254,254,253,1) 0%,rgba(174,191,118,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(254,254,253,1) 0%,rgba(174,191,118,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefd', endColorstr='#aebf76',GradientType=0 ); /* IE6-9 */
	
	border: 1px solid #A2D999;
	padding: 10px 20px;
}



 /* Style the buttons that are used to open and close the accordion panel */
button.accordion, button.accordion-no {
	font-family: 'PT Sans Narrow', sans-serif;
    font-size: 24px;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
	margin-top: 3px;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefefd+0,aebf76+100 */
	background: rgb(254,254,253); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,254,253,1) 0%, rgba(174,191,118,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(254,254,253,1) 0%,rgba(174,191,118,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(254,254,253,1) 0%,rgba(174,191,118,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefd', endColorstr='#aebf76',GradientType=0 ); /* IE6-9 */
	
	border: 1px solid #A2D999;
}

button.accordion-no {
    cursor: auto;
}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 24px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}


/* Style the accordion panel. Note: hidden by default */
div.panel {
	border: 1px solid #A2D999;
	padding: 10px 10px;
    background-color: white;
    display: none;
} 




#email_sent_message {
	color: white;
	padding: 10px;
	display: none;
}
#email_sent_message.isok {
	background-color: #22DD22;
}
#email_sent_message.iserror {
	background-color: #EE2222;
}


/* ===== AGENDAR CONSULTA =====
   Botão fixo (barra no celular, pílula no desktop) que vai direto ao WhatsApp.
   Markup em code_end_all.php, rastreio da conversão em javascript/agendar.js */

/* Botão verde reutilizado na barra fixa e no topo da home */
.agendar-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #25D366; /* verde oficial do WhatsApp */
	color: #fff;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.2;
	text-decoration: none;
	padding: 14px 26px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.agendar-cta:hover {
	background: #1ebc5a;
	color: #fff;
	transform: translateY(-2px);
}

.agendar-cta i {
	font-size: 1.4em;
}

/* Pílula flutuante (desktop): canto inferior direito */
.agendar-bar {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 100;
}

/* Pulso discreto no botão fixo para chamar a atenção sem incomodar */
.agendar-bar .agendar-cta {
	animation: agendar-pulso 3s ease-out 2s infinite;
}

@keyframes agendar-pulso {
	0%   { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.6); }
	70%  { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 0 18px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Quem prefere menos movimento não recebe o pulso */
@media (prefers-reduced-motion: reduce) {
	.agendar-bar .agendar-cta {
		animation: none;
	}
}

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

	/* Barra de largura total colada no rodapé da tela do celular */
	.agendar-bar {
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(32, 64, 153, 0.97);
		box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.35);
	}

	.agendar-bar .agendar-cta {
		display: flex;
		width: 100%;
		border-radius: 12px;
		box-shadow: none;
		animation: none;
	}

	/* Rodapé ganha espaço extra para a barra fixa não cobrir o último texto */
	#footer {
		padding-bottom: 90px;
	}
}

/* ===== HOME: FAIXA DE CREDENCIAIS E PASSOS DA PRIMEIRA CONSULTA ===== */

/* Quatro itens lado a lado (dois por linha no celular) */
.credenciais {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.credenciais li {
	text-align: center;
	margin: 0;
	padding: 0 6px;
}

.credenciais i {
	display: block;
	margin-bottom: 10px;
	font-size: 2.2em;
	color: #204099;
}

.credenciais strong {
	display: block;
	font-size: 1.2em;
	line-height: 1.2;
	color: #204099;
}

.credenciais span {
	display: block;
	margin-top: 6px;
	line-height: 1.3;
}

/* Fundo azul bem claro para separar do resto da página */
#primeira-consulta {
	background: #eef2fb;
}

/* Três cartões numerados; o número vem do contador do CSS (counter) */
.passos {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	counter-reset: passo;
}

.passos li {
	position: relative;
	margin: 0;
	padding: 30px 22px 22px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 14px rgba(32, 64, 153, 0.12);
	line-height: 1.35;
}

/* Bolinha com o número, "pendurada" na borda de cima do cartão */
.passos li::before {
	counter-increment: passo;
	content: counter(passo);
	position: absolute;
	top: -20px;
	left: 22px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #204099;
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.passos strong {
	display: block;
	margin-bottom: 6px;
	font-size: 1.3em;
	color: #204099;
}

.passos-cta {
	margin: 36px 0 0;
	text-align: center;
}

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

	.credenciais {
		grid-template-columns: 1fr 1fr;
		gap: 22px 12px;
	}

	.passos {
		grid-template-columns: 1fr;
		gap: 38px;
	}
}


.whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #25D366; /* Cor oficial WhatsApp */
  color: white;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 10px; /* Arredondado */
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background 0.3s, transform 0.2s;
}

.whatsapp-button i {
  font-size: 20px;
}

.whatsapp-button:hover {
  background-color: #1ebe5d;
  transform: scale(1.05);
}


/*------------------------------------*\
	WIDE
\*------------------------------------*/


@media screen and (min-width: 1450px){

body{
}

.mobileonly {
	display: none;
}

.width_columm {
	width:1200px; 
	margin: 0 auto;
}

.flex_column {
	width:90%; 
	margin: 0 auto;
}


#mainintro .intropic {
	height: 400px;
	width: auto;
}

#imagebar {
	background: #FFF url('../images_thisproject/full-banner-1200x800.jpg') no-repeat scroll center center;
	background-repeat: no-repeat;
	background-position: center center;

	
	position: relative;
	height: 550px;

	border-bottom: 40px solid #FEFFDB;
	margin-top: 55px;
	margin-bottom: 20px;
}



} /* END 1400 */





/*------------------------------------*\

.88b  d88.  .d88b.  d8888b. d888888b db      d88888b 
88'YbdP`88 .8P  Y8. 88  `8D   `88'   88      88'     
88  88  88 88    88 88oooY'    88    88      88ooooo 
88  88  88 88    88 88~~~b.    88    88      88~~~~~ 
88  88  88 `8b  d8' 88   8D   .88.   88booo. 88.     
YP  YP  YP  `Y88P'  Y8888P' Y888888P Y88888P Y88888P 
                                                     
                                                     

\*------------------------------------*/


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

body{
}

.mobileonly {
	display: block;
}

#container {
	margin: 0;
}

.maintext {
	padding: 0 20px 50px;
}

#menumobileopener {
	sfloat: left;
	width: 70px;
}

.width_columm.empresainfo {
	height: auto;
	padding-top: 2px;
	margin-left: 80px;
}

 
#headerfixed {
	width: auto;
	position: relative;
	top:0;
	z-index: 300;
	sborder: 1px solid #999;
	text-align: left;
	padding: 10px 20px;
}


.mainlogo {
	float: none;
	width: auto;
	text-align: center;
}

#mainintro {
	padding: 40px 0 50px 0;
}

#mainintro.onlyone {
	padding: 40px 0 80px 0;
}



.flex_column {
	width: auto; 
	margin: 0;
}



#mainintro.bigpicture {
	padding: 0;
	height: auto;
}


/* topo: foto (versão leve, mobile - <img> própria, não background) */
#mainintro .karlafoto {
	background: none;
}

.display_only_for_smaller_than_950 {
	display: block;
	width: 100%;
	height: auto;
}

/* embaixo: logo + nome + texto, com o mesmo fundo em degradê da foto */
#mainintro .logointro {
	padding: 80px 20px 10px;
}


#mainintro.bigpicture .mainlogo {
	width: 30%;
}


.logotext {
	padding: 10px 0 20px; 
	float: none;
	width: auto;
	text-align: center;
}
.logotext h2 {
	margin: 0 0 10px;
	color: #204099;
    font-size: 1.8em;
	
}
.logotext h3 {
	color: #00ACEE;
	margin: 0;
	margin-top: 15px;
}

#footer .logotext p {
	margin: 4px 0 0;
}

h3 {
	margin-top: 20px;
	font-size: 1.6em;
}

h4 {
	margin-top: 15px;
	font-size: 1.5em;
}


.logotext h2 a, .logotext h3 a {text-decoration: none; color: #204099;}
.logotext h2 a:hover, .logotext h3 a:hover {color:#204099;}

.logotext h3 a {color: #00ACEE;}


#mainintro .intropic {
	width: 100%;
}

#quemsoueu .intropic {
	display: none;
}

.textinfo {
	padding: 40px 0px;
}


.textinfo.bigpadding {
	padding: 20px 10px;
}


#imagebar {
	
	background: #FFF url('../images_thisproject/full-banner-1200x800.jpg') no-repeat scroll center center;
	background-repeat: no-repeat;
	background-position: center center;
		
	position: relative;
	height: 450px;

	border-bottom: 40px solid #FEFFDB;
	margin-top: 0px;
	margin-bottom: 10px;
}


div.spacertop {
	margin-top: 0px;
}

#content img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}


#menu {
	display: none;
	padding: 5px 0;
	text-align:center;
	margin: 10px 0;
	background-color: #EBEBEB;
	
	width: auto;
}

#mainintro h2 {
	margin-top: 10px;
}

#mainintro h2, h2 {
	margin-top: 30px;
}



#mainintro .gridcontainer {
	grid-template-columns: auto;
	grid-template-rows: auto;
}

.artigosimples .gridcontainer {
	grid-template-columns: auto;
	grid-template-rows: auto;
}

.artigosimples .gridcontainer .roundedpic {
	-webkit-border-top-right-radius: 30px;
	-moz-border-radius-topright: 30px;
	border-top-right-radius: 30px;
}


.gridcontainer {
	display: grid;
	grid-template-columns: 1fr;
}


.gridcontainer.half {
	grid-template-columns: 1fr;
}

.gridcontainer.twothird {
	grid-template-columns: 1fr;
}
.gridcontainer.onethird {
	grid-template-columns: 1fr;
}

.gridcontainer.drittel {
	grid-template-columns: 1fr;
}

.gridcontainer.icon {
	grid-template-columns: 1fr;
}


#mainintro .gridcontainer.leftfixed {
	grid-template-columns: 1fr;
}



.mygriditem, .griditem_left, .griditem_right {
	margin-bottom: 0px;
}


a.framedlink.biglink {
	padding: 0 10px;
	font-size: 1.5em;
	display: block;
	
}

#footer {
	font-size: 1.3em;
	line-height: 1.6em;
}

#footer .gridcontainer.half {
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-gap: 30px;
}


#footer .gridcontainer {
	display: grid;
	grid-gap: 30px;
	margin-bottom: 20px;
}


#footer .gridcontainer,icon {
	display: grid;
	grid-gap: 10px;
	margin-bottom: 0px;
}

.bigicons .gridcontainer,icon {
	display: grid;
	grid-gap: 10px;
	margin-bottom: 0px;
}


/*
#menu ul{list-style:none;margin:10px 30px 6px 20px;}
#menu ul li{background:none!important;display:block;text-align:center;height:auto;line-height:25px;margin-bottom:0;position:relative;}
#menu ul li a{color: #333; display:block;font-size:1.3em;padding-top:10px;padding-bottom: 10px;text-transform:none;border: 1px solid #999; margin: 5px; 10px}
#menu ul li a:hover{color:#111;}
#menu ul li a.current{color:#FEFFDB; background-color: #CCC;}
*/


.desktoponly {
	display: none;
}

.width_columm {
	width: auto;
	margin: 0 24px;
}






.navitab {
padding:4px 8px 4px 8px;
margin:0 0 4px 0;
text-decoration:none;
background-color: none;
border-bottom:1px solid #ffffff;
border-left:1px solid #ffffff;
font-weight: normal;
font-size: 1.1em;
background-color:#00ACEE;
}

.navitab:hover {
text-decoration:none;
background:#EBEBEB;
border-bottom:1px solid #ffffff;
}

.navitab_hilite {
text-decoration:none;
background:#d0d0d0;
border-bottom:1px solid #ffffff;
}

.activenavitab {
padding:4px 8px 5px 8px;
margin:0 0 5px 0;
font-size:1.1em;
text-decoration:none;
background-color:#333333;
color: #FEFFDB;
font-weight: normal;
font-size: 1.1em;
}

#menu ul li a.activenavitab {
color: #FEFFDB;
}

.activenavitab:hover {
text-decoration:none;
color:#ffffff;
}



#navitabs {text-align: center; }
#navitabs ul{ list-style:none; margin:0; padding:0; }
#navitabs li { display:block; padding:0px; margin:5px 10px;}
#navitabs li a { padding:15px 10px;  margin: 0; border: none; width:auto; display:block; text-align:center; margin-right:0px; margin-bottom: 10px; text-decoration:none; text-transform: uppercase; -webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px; color: #333; }
#navitabs li a:hover { }
#navitabs ul ul { margin: 0px 40px; display:block; position:relative; z-index:999; }
#navitabs li li { float:none; display: block; padding:0px; margin:0;}
#navitabs li li a { background-color:#C9C9C9; color: #333; text-align:center; height:auto; line-height:1; width:auto; padding:15px 20px 15px 20px; border:1px solid #D0D0D0; border-top:none; margin-right:0; -webkit-border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px 0px 0px;border-radius: 0px 0px 0px 0px;}
#navitabs li li a.first {
	-webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px;
}
#navitabs li li a.last {
	-webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px;
}
#navitabs li li a:hover {background-color:#a0a0a0; }
* html li li { display:inline; } /* IE6 Bugfix... */





.leftcontent {
	float: none;
	width: auto;
	text-align: center;
}

.rightcontent {
	width: auto;
	margin: 0 auto;
}


#footer {
	font-size: 0.9em;
	line-height: 1.3em;
}

#footer .labelwrap p.mylabel {
	width: 50%;
	text-align: right;
	float: left;
	display: block;
	font-weight: normal;
}
#footer .labelwrap p.info {
	width: auto;
	display: inline-block;
	
}

#footer p.government {
	margin-top: 50px;
}


#footer p.copyright {
	text-align: center;
}



.whatsapp-button {
	margin: 20px 0;
  display: block;
  text-align: center;
}





} /* END 900 */



/* VERY NARROW */
@media screen and (max-width: 850px){

	#menumobileopener {
		float: none;
		width: auto;
	}
	

	#mainintro.bigpicture {
		padding: 0;
		height: auto;
	}
	

	#mainintro .logointro {
		padding: 20px;
	}
	


	#mainintro .gridcontainer.leftfixed {
		grid-template-columns: 1fr;
	}
	
	.mainsection {
		padding-bottom: 20px;
	}


	.width_columm.empresainfo {
		margin: 0px 10px;
	}

	h1 {
		font-size: 1.8em;
	}

	#mainintro h2, h2 {
		margin-top: 30px;
	}

	h3 {
		font-size: 1.3em;
	}

	#mainintro {
		padding: 40px 0 50px 0;
	}

	.textinfo {
		padding: 5px 0;
		
	}

	.logo_opaque {
		padding: 0px 0;
		margin-bottom: 20px;
	}
	


	.gridcontainer {
		grid-gap: 40px;
	}
	
	.gridcontainer.icon {
		grid-template-columns: 50px 1fr;
		grid-gap: 10px;
	}

	.gridcontainer.icon .mygriditem:nth-child(2n-1) {
		text-align: right;
	}
	
	
}
/* END VERY NARROW */










/* Botões de doenças da home: o link ocupa o botão azul inteiro e herda a cor branca */
.nicelist h3 a {
	display: block;
	color: inherit;
	text-decoration: none;
}


/* ===== CONTATO: CARTÕES DAS UNIDADES =====
   Markup em contato.php, comportamento em javascript/contato.js */

/* Dois cartões lado a lado no desktop, empilhados no celular */
.unidades {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: stretch;
}

.unidade-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20px;
	overflow: hidden; /* a foto de cima acompanha o canto arredondado */
	box-shadow: 0 8px 28px rgba(32, 64, 153, 0.18);
}

.unidade-foto {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover; /* as duas fotos ficam com a mesma altura */
}

.unidade-corpo {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-grow: 1;
}

.unidade-corpo h3 {
	margin: 0;
	color: #204099;
}

.unidade-corpo p {
	margin: 0;
}

/* Caixa de destaque com a dica de como chegar */
.unidade-dica {
	background: #eef2fb;
	border-left: 4px solid #204099;
	border-radius: 8px;
	padding: 12px 14px;
	line-height: 1.35;
}

.unidade-dica i {
	color: #204099;
	margin-right: 6px;
}

/* Grade de atalhos: o botão do WhatsApp ocupa a linha inteira */
.unidade-acoes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.unidade-acoes .agendar-cta {
	grid-column: 1 / -1;
	font-size: 1.15em;
	box-shadow: none;
}

/* Botões secundários: contorno azul, fundo branco */
.acao-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 8px;
	border: 2px solid #204099;
	border-radius: 12px;
	background: #fff;
	color: #204099;
	font: inherit;
	font-size: 1.05em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.acao-btn:hover {
	background: #204099;
	color: #fff;
}

/* Se sobrar um botão sozinho na última linha, ele ocupa a linha inteira */
.unidade-acoes .acao-btn:last-child:nth-child(even) {
	grid-column: 1 / -1;
}

/* Botão que vira mapa depois do clique */
.unidade-mapa {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 220px;
	border: 2px dashed #9fb0e0;
	border-radius: 14px;
	background: linear-gradient(135deg, #eef2fb, #dbe4f8);
	color: #204099;
	font: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.unidade-mapa:hover {
	background: #dbe4f8;
}

.unidade-mapa i {
	font-size: 2.6em;
}

.unidade-mapa strong {
	font-size: 1.3em;
}

.unidade-mapa small {
	color: #555;
}

.unidade-mapa-frame {
	width: 100%;
	height: 220px;
	border: 0;
	border-radius: 14px;
}

.unidade-contatos {
	line-height: 1.6;
	margin-top: auto !important; /* empurra os contatos para o fim do cartão */
}

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

	.unidades {
		grid-template-columns: 1fr;
	}

	/* Botões um pouco menores para os rótulos caberem em uma linha só */
	.unidade-corpo {
		padding: 20px 16px 22px;
	}

	.acao-btn {
		font-size: 0.95em;
		gap: 6px;
		padding: 11px 4px;
	}

	.unidade-acoes .agendar-cta {
		font-size: 1.05em;
		padding: 12px 10px;
	}
}


/* ===== AMSLER: TESTE DA GRADE (degeneracao-macula.php) =====
   Comportamento em javascript/amsler.js */

/* Grade à esquerda, instruções e respostas à direita */
.amsler {
	display: grid;
	grid-template-columns: minmax(260px, 420px) 1fr;
	gap: 36px;
	align-items: center;
	margin: 30px 0 18px;
	padding: 26px;
	background: #eef2fb;
	border-radius: 20px;
}

.amsler-grade svg {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid #204099;
	border-radius: 8px;
	background: #fff;
}

.amsler-passos {
	margin: 0 0 18px;
	padding-left: 22px;
	line-height: 1.4;
}

.amsler-passos li {
	margin-bottom: 8px;
}

.amsler-pergunta {
	margin: 0 0 10px;
	font-size: 1.3em;
	font-weight: bold;
	color: #204099;
}

/* Três respostas empilhadas; a escolhida fica azul cheia */
.amsler-respostas {
	display: grid;
	gap: 10px;
}

.amsler-respostas .acao-btn {
	text-align: left;
	justify-content: flex-start;
	padding: 12px 16px;
}

.amsler-respostas .acao-btn.amsler-escolhido {
	background: #204099;
	color: #fff;
}

.amsler-resultado {
	margin-top: 18px;
	padding: 16px 18px;
	background: #fff;
	border-left: 5px solid #25D366;
	border-radius: 10px;
	line-height: 1.4;
}

/* Resultado de atenção usa a cor de alerta (âmbar) para se destacar */
.amsler-resultado.amsler-atencao {
	border-left-color: #f0a000;
}

.amsler-resultado p {
	margin: 0 0 12px;
}

.amsler-resultado .agendar-cta {
	font-size: 1.1em;
	box-shadow: none;
}

.amsler-aviso {
	font-size: 0.9em;
	color: #555;
}

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

	.amsler {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 16px;
	}
}


/* Botão azul só com contorno, para fundos claros (o "whiteoutlinebutton" é para fundos azuis) */
.bluebutton.blueoutlinebutton {
	background: transparent;
	border: 2px solid #204099;
	color: #204099;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.bluebutton.blueoutlinebutton:hover {
	background: #204099;
	color: #fff;
}


/* ===== ÍNDICE DE ATALHOS (olhando.php) ===== */

/* Rolagem suave ao clicar nos atalhos (desligada para quem prefere menos movimento) */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Ao chegar por atalho, a seção para um pouco abaixo do menu fixo */
.artigo-secao {
	scroll-margin-top: 80px;
}

/* Atalhos no topo da página: "pílulas" azuis lado a lado */
.indice-artigos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.indice-artigos a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #204099;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.indice-artigos a:hover {
	background: #1880C1;
	color: #fff;
	transform: translateY(-2px);
}


/* ===== INFANTIL: LINHA DO TEMPO E CHECKLIST DE SINAIS (oftalmo-infantil.php) =====
   Comportamento em javascript/infantil.js */

/* Três etapas lado a lado, ligadas por uma linha tracejada */
.linha-infantil {
	list-style: none;
	margin: 30px 0 50px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.linha-infantil li {
	position: relative;
	margin: 0;
	text-align: center;
	line-height: 1.35;
}

/* Linha que sai do círculo e vai até o círculo da próxima etapa */
.linha-infantil li:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 36px;
	left: calc(50% + 46px);
	width: calc(100% - 92px + 24px);
	border-top: 3px dashed #9fb0e0;
}

.linha-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #204099;
	color: #fff;
	font-size: 2em;
}

.linha-infantil strong {
	display: block;
	margin-bottom: 4px;
	font-size: 1.3em;
	color: #204099;
}

.sinais-titulo {
	margin-top: 10px;
}

/* Checklist em duas colunas, cada sinal é um cartão grande para tocar */
.sinais-lista {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 20px 0;
}

.sinal {
	/* Anula a regra antiga de "label" do site (largura fixa, flutuando, texto à direita) */
	width: auto;
	float: none;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 2px solid #dfe5f5;
	border-radius: 14px;
	background: #fff;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sinal:hover {
	border-color: #9fb0e0;
}

.sinal input {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	accent-color: #204099;
}

/* Cartão marcado fica azul claro com borda azul */
.sinal.sinal-marcado {
	border-color: #204099;
	background: #eef2fb;
}

/* Resultado: verde por padrão, âmbar quando há sinais marcados */
.sinais-resultado {
	padding: 18px 20px;
	background: #fff;
	border-left: 5px solid #25D366;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(32, 64, 153, 0.12);
	line-height: 1.4;
}

.sinais-resultado.sinais-atencao {
	border-left-color: #f0a000;
}

.sinais-resultado p {
	margin: 0 0 12px;
}

.sinais-resultado strong {
	display: block;
	font-size: 1.3em;
	color: #204099;
}

.sinais-resultado .agendar-cta {
	box-shadow: none;
}

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

	.linha-infantil {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	/* Sem linha de ligação quando as etapas ficam empilhadas */
	.linha-infantil li:not(:last-child)::after {
		display: none;
	}

	.sinais-lista {
		grid-template-columns: 1fr;
	}
}


/* ===== LOGOMARCA NA BARRA DO CELULAR =====
   Logo horizontal (símbolo + nome) à direita do botão do menu; escondida no desktop pela classe .mobileonly */
.logoheader {
	position: absolute;
	top: 26px; /* centraliza na altura do botão do menu (10px de margem + 60px de botão) */
	left: 96px;
	width: calc(100% - 116px);
	max-width: 260px;
}

.logoheader img {
	display: block;
	width: 100%;
	height: auto;
}


/* ===== AJUSTES DE ESPAÇAMENTO E ALINHAMENTO (todas as páginas) ===== */

/* Número das bolinhas de "Como é a primeira consulta": a fonte do site deixa o dígito cerca de
   3px acima do centro; uma fonte de sistema centraliza no círculo */
.passos li::before {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1;
}

/* Seções com o conteúdo direto em .width_columm (sem .textinfo) ficavam sem espaço no topo e no fim,
   com o título colado na linha azul de separação */
.mainsection > .width_columm {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* Rodapé no desktop: espaço abaixo da linha de copyright (no celular a barra fixa já reserva 90px) */
@media screen and (min-width: 851px) {

	#footer {
		padding-bottom: 25px;
	}
}

/* Logo da home no celular: alinhada com o texto (sem o recuo negativo) */
@media screen and (max-width: 950px) {

	#mainintro.bigpicture .mainlogo {
		margin-left: 0;
		width: 32%;
	}
}

/* No celular: o padding vertical das seções era de só 5px; agora 25px, para o conteúdo
   não ficar encostado nas linhas azuis de separação */
@media screen and (max-width: 850px) {

	.textinfo {
		padding: 25px 0;
	}

	.mainsection > .width_columm {
		padding-top: 25px;
		padding-bottom: 25px;
	}

	/* Botão "Copiar endereço" quebrava em duas linhas encostado na borda */
	.acao-btn {
		padding: 11px 8px;
	}
}


/* Logo da home: espaço entre a logo e o nome (o PNG antigo trazia essa margem dentro da própria imagem) */
#mainintro .mainlogo img {
	display: block;
	width: 200px; /* no desktop; no celular a largura vem do contêiner (32%) */
	height: auto;
	margin-bottom: 22px;
}

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

	#mainintro .mainlogo img {
		width: 100%;
	}
}


/* ===== FAQ MODERNO (tratamentos.php) =====
   Perguntas em <details> nativo: abrir e fechar não precisa de JavaScript */

.faq {
	display: grid;
	gap: 14px;
	margin-top: 24px;
}

.faq-item {
	background: #fff;
	border: 1px solid #dfe5f5;
	border-left: 5px solid #dfe5f5;
	border-radius: 16px;
	box-shadow: 0 4px 14px rgba(32, 64, 153, 0.08);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.faq-item:hover {
	box-shadow: 0 8px 22px rgba(32, 64, 153, 0.16);
}

/* Cartão aberto ganha a faixa azul na lateral */
.faq-item[open] {
	border-left-color: #204099;
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	list-style: none; /* tira a setinha padrão do navegador */
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary:focus-visible {
	outline: 3px solid #1880C1;
	outline-offset: 2px;
	border-radius: 14px;
}

.faq-pergunta {
	font-size: 1.4em;
	line-height: 1.25;
	color: #204099;
}

/* Ícone: círculo com "+" desenhado em CSS; ao abrir vira "x" e o círculo fica azul */
.faq-icone {
	position: relative;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #eef2fb;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.faq-icone::before,
.faq-icone::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 3px;
	margin: -1.5px 0 0 -8px;
	border-radius: 2px;
	background: #204099;
	transition: background-color 0.25s ease;
}

.faq-icone::after {
	transform: rotate(90deg);
}

.faq-item[open] .faq-icone {
	background: #204099;
	transform: rotate(45deg);
}

.faq-item[open] .faq-icone::before,
.faq-item[open] .faq-icone::after {
	background: #fff;
}

.faq-resposta {
	padding: 0 22px 22px;
	border-top: 1px solid #eef2fb;
	line-height: 1.5;
}

.faq-resposta p {
	margin: 14px 0 0;
}

/* Resposta aparece com um leve deslize ao abrir (desligado para quem prefere menos movimento) */
.faq-item[open] .faq-resposta {
	animation: faq-abrir 0.3s ease-out;
}

@keyframes faq-abrir {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.faq-item[open] .faq-resposta {
		animation: none;
	}
	.faq-icone {
		transition: none;
	}
}

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

	.faq-item summary {
		padding: 16px 16px;
	}

	.faq-pergunta {
		font-size: 1.25em;
	}

	.faq-resposta {
		padding: 0 16px 18px;
	}
}


/* ===== LEIA MAIS (textos longos em .artigosimples) =====
   Comportamento em javascript/leiamais.js. O texto completo fica sempre no HTML:
   o corte é só visual (altura máxima), nada é removido nem escondido com display:none. */

.leiamais-fechado {
	position: relative;
	max-height: var(--leiamais-altura, 340px);
	overflow: hidden;
}

/* Degradê branco no pé do texto cortado, para o corte não parecer um erro */
.leiamais-fechado::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 110px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
}

.leiamais-botao {
	margin-top: 14px;
	padding: 10px 24px;
	font-size: 1.1em;
}

/* Na impressão o texto sai completo */
@media print {
	.leiamais-fechado {
		max-height: none;
		overflow: visible;
	}
	.leiamais-fechado::after,
	.leiamais-botao {
		display: none;
	}
}

/* Frase do dia (home): no desktop a imagem em pé ocupa a coluna esquerda inteira do grid onethird; o resto usa os blocos que já existem */
#frase-do-dia img {
	display: block;
	width: 100%;
	height: auto;
}

/* No celular (mesmo breakpoint em que o grid vira uma coluna) a imagem volta a ter 312px no máximo */
@media screen and (max-width: 850px) {
	#frase-do-dia img {
		max-width: 312px;
	}
}