/*
Theme Name: IPSW

Author: Marlei Grolli

Version: 1.1
Tags: tres paginas, uma coluna, laranja
*/

/*
Theme Name: IPSW
Theme URI: https://kairos-instituto.ong.br
Author: Marlei Grolli
Author URI: https://marleigrolli.com.br
Description: Site desenvolvido para o Instituto Kairos.
Requires at least: 5.6
Tested up to: 5.9
Requires PHP: 8.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-IPSW
Tags: one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

@font-face {
    font-family: 'Oswald-Regular';
    src: url('./fonts/oswald-v56-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('./fonts/lato-v24-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   Variáveis CSS (Custom Properties)
   ========================================================================== */
:root {
    /* Cores */
    --primary-blue: #1c388c;
    --secondary-blue: #3553ae;
    --dark-gray: #4d4d4d;
    --medium-gray: #717171;
    --light-gray: #cccccc;
    --lighter-gray: #d2d2d2;
    --background-gray: #f2f2f2;
    --white: #ffffff;
    --off-white: #f8f9fa;
    --cream: #fcfae1;
    --accent-yellow: #f6e497;
    --dark-yellow: #201c0c;
    --text-dark: #373737;
    --text-medium: #444;
    --text-light: #9c9c9c;
    --link-hover-blue: #9ca9d6;
    --red-accent: #bf1f1f;

    /* Fontes */
    --font-oswald: 'Oswald', sans-serif;
    --font-lato: 'Lato', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --font-size-small: 14px;
    --font-size-medium: 1.5rem; /* ~24px */
    --font-size-large: 2.25rem; /* ~36px */
    --font-size-xl: 3rem; /* ~48px */
    --font-size-xxl: 4rem; /* ~64px */

    --font-weight-light: 200;
    --font-weight-regular: 400;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 900;
}


/************** GENERAL *****************/
html {
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
}

*, *::before, *::after {
    box-sizing: inherit; /* Herda o box-sizing para todos os elementos */
}

body {
    font-family: var(--font-lato);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-dark); /* Cor padrão para o texto do corpo */
    margin: 0; /* Remover margem padrão do body */
    padding: 0;
}

h1 {
    font-size: var(--font-size-xl); /* Tamanho padrão para mobile */
    margin: 15px 0;
    font-family: var(--font-oswald);
    font-weight: var(--font-weight-semi-bold);
    color: var(--text-dark); /* Cor padrão para h1 */
}

h2 {
    font-size: 24px; /* Mantém 24px como padrão */
    margin-top: 0;
    color: var(--text-dark);
}

h3 {
    font-size: 20px;
    margin-top: 0;
    color: var(--text-dark);
}

h4 {
    font-size: 18px;
    margin-top: 0;
    color: var(--text-dark);
}

p {
    margin-bottom: 1em; /* Espaçamento padrão para parágrafos */
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    color: var(--secondary-blue);
    text-decoration: underline;
}

button {
    background-color: var(--primary-blue);
    border: none;
    border-radius: 50px;
    color: var(--white);
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--font-size-base);
    margin-bottom: 20px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--secondary-blue);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.largura {
    width: 90%;
    margin-inline: auto;
    padding: 0 15px; /* Adiciona um padding horizontal para evitar que o conteúdo grude nas bordas */
}

/* ==========================================================================
   HOME PAGE - Estilos Padrão (Mobile)
   ========================================================================== */

/* Top Bar Section */
.top-bar {
    background: var(--dark-gray);
    color: var(--white);
    padding: 15px 0;
    display: flex;
    flex-direction: column; /* Em mobile, pode ser melhor empilhar */
    align-items: center; /* Centralizar itens na coluna */
    gap: 10px; /* Espaçamento entre os itens */
}

.top-bar .row { /* Se esta classe for do Bootstrap, ajuste conforme necessário */
    justify-content: center; /* Centralizar itens na row mobile */
}

/* Top Bar - Social Widgets */
.social-media-icons ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-media-icons ul li {
    margin: 0; /* Gerenciado pelo gap do flexbox */
}

/* Top Bar - Search */
.search {
    width: 100%; /* Ocupa toda a largura disponível em mobile */
    display: flex;
    justify-content: center;
    align-items: center;
}

.search input[type="search"] {
    color: var(--text-light);
    background: #ededed; /* Cor específica */
    border: 0;
    padding: 8px 10px; /* Aumenta um pouco o padding para melhor toque */
    width: 70%; /* Largura do input em mobile */
    border-radius: 3px;
}

input.search-field {
    border: none;
}

.search button {
    background: var(--primary-blue); /* Ajustei para azul primário */
    border: 0;
    color: var(--white);
    padding: 8px 12px; /* Ajustei padding */
    margin-left: -4px; /* Ajuste para sobrepor */
    border-radius: 0 3px 3px 0; /* Arredondar apenas um lado */
}

.search label {
    margin: 0;
}

.search > form .screen-reader-text,
.search-form .screen-reader-text {
    clip: auto;
    clip-path: none;
    position: static !important;
    width: auto;
    height: auto;
    overflow: visible;
}

.search-form {
    display: flex;
    flex-wrap: nowrap;
}

/* Header - Main Menu */
.menu-area{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

nav img {
    margin: 1%;
}

.menu-menu-principal-container ul{
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 30px;
   margin: 0;
}
.menu-menu-principal-container ul li{
    list-style: none;
    text-transform: uppercase;
}

.menu-menu-principal-container ul li a{
    text-decoration: none;
     transition: background-image 0.3s ease, color 0.3s ease; 
  color: var(--primary-blue);
}
.menu-menu-principal-container ul li a:hover{
    color: var(--link-hover-blue);
}
/*footer menu*/
.menu-bottom-menu-container ul{
display: flex;
flex-direction: row;
gap: 30px;
}

.menu-bottom-menu-container ul li{
list-style: none;
text-transform: uppercase;
}

.menu-bottom-menu-container ul li a{
color: var(--white);
text-decoration: none;
}
/* Mobile menu*/
.mobile-menu .main-nav ul li{
    margin-top: 0;
    padding: 0;
    transition: none;
    list-style: none;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--primary-blue);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  
  color: var(--purple-main);
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: var(--orange-highlight);
}

#main {
  transition: margin-left .5s;

}

/* Remove redundant .menu li a as global a styles are defined */
/* .menu li a {
    color: #1c388c;
} */

.dropdown-menu {
    left: -100%;
}

.navbar-brand img {
    max-width: 80%;
}


/* Esconde o .desktop-menu em telas menores que 768px */
@media screen and (max-width: 767px) {
    .desktop-menu {
        display: none;
    }
}

/* Esconde o .mobile-menu em telas maiores ou iguais a 768px */
@media screen and (min-width: 768px) {
    .mobile-menu {
        display: none;
    }
}


/* topo section */
.topo {
    background-color: var(--primary-blue);
    display: flex;
    flex-direction: column; /* Empilhado em mobile */
    height: auto; /* Altura automática em mobile */
    gap: 0; /* Remove gap para mobile, controlamos com padding/margin */
    
}

.intro {
    width: 100%; /* Largura total em mobile */
    background-color: var(--background-gray);
    padding: 5%;
    order: 2; /* Ordem para aparecer depois da imagem em mobile */
}

.intro button {
    border: 2px solid var(--primary-blue);
    background-color: transparent;
    color: var(--primary-blue);
    transition: all 0.3s ease;
}

.intro button a {
    color: var(--primary-blue);
}

.intro button a:hover {
    text-decoration: none;
    color: var(--link-hover-blue);
}

.intro button:hover {
    border-color: var(--link-hover-blue);
    background-color: transparent;
}

.topo h1 {
    color: var(--text-dark);
    font-size: 2.5rem; /* Ajustado para mobile */
    font-family: var(--font-oswald);
    font-weight: var(--font-weight-semi-bold);
    text-align: center; /* Centraliza em mobile */
    margin-bottom: 10px;
}

.topo p {
    font-style: italic;
    font-family: var(--font-lato);
    font-size: var(--font-size-small);
    text-align: center;
    margin-bottom: 20px;
}

.topo h4 {
    text-transform: uppercase;
    padding-top: 20px; /* Menos padding em mobile */
    font-family: var(--font-lato);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.imagem-topo {
    background-image: url('./assets/images/wright_alesc.webp');
    background-repeat: no-repeat;
    background-position: center top; /* Ajustado para mobile */
    height: 300px; /* Altura menor em mobile */
    width: 100%;
    background-size: cover;
    order: 1; /* Ordem para aparecer primeiro em mobile */
}

/* Biografia Section */
.biografia {
    display: flex;
    flex-direction: column; /* Empilhado em mobile */
    justify-content: center;
    align-items: center;
    gap: 30px; /* Espaçamento entre os blocos */
    padding: 5%;
}

.texto-bio {
    width: 100%; /* Largura total em mobile */
}

.imagem-bio {
    background-image: url('./assets/images/foto_dops.webp');
    background-repeat: no-repeat;
    background-position: center center;
    height: 300px; /* Altura menor em mobile */
    width: 100%; /* Largura total em mobile */
    background-size: contain;
}

/* Quadros Section */
.azul {
    background-color: var(--primary-blue);
    height: 150px; /* Altura menor em mobile */
    position: relative;
    z-index: -1;
}

.quadros {
    display: flex;
    flex-direction: column; /* Empilhado em mobile */
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: var(--background-gray);
    padding: 20px 0; /* Adiciona padding para o conteúdo */
}

.item-quadro {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%; /* Mais largura em mobile */
    height: auto;
    box-shadow: 0px 5px 10px var(--text-light);
    text-align: center;
    padding: 20px;
}

.item-quadro h1 {
    text-transform: uppercase;
    font-size: var(--font-size-medium);
}

.item-quadro p {
    padding: 5%;
}

.superior1,
.superior2 {
    margin-top: 0; /* Remove o ajuste de margem em mobile, serão empilhados */
}

/* Cinza Section */
.cinza {
    background-color: var(--background-gray);
    display: flex;
    flex-direction: column; /* Empilhado em mobile */
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: -1;
}

.cinza div {
    width: 100%; /* Largura total em mobile */
}
.cinza h1{
    width: 100%;
}

.cinza div p,
.cinza div a {
    padding: 20px 5%; /* Ajusta padding */
    text-align: center;
}

.cinza h1 {
    padding: 20px 5%; /* Ajusta padding */
    width: 100%; /* Largura total em mobile */
    text-align: center;
    font-size: 2rem; /* Ajuste para mobile */
}

.icone {
    width: 80px; /* Reduz tamanho do ícone */
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5% auto; /* Centraliza em mobile */
    background-color: var(--lighter-gray);
}

.texto-destaque {
    font-size: 1.2rem; /* Ajustado para mobile */
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-bold);
    font-style: normal;
    margin: 15px 0 0;
    text-align: center;
}

#svg-6c4a {
    height: 1.5rem; /* Ajustado para mobile */
    color: var(--primary-blue);
}

/* Seção citação */
.citacao {
    padding: 5%;
}

.citacao p {
    font-size: 1.2rem; /* Ajustado para mobile */
    line-height: 1.7;
    font-weight: var(--font-weight-bold);
    font-style: normal;
    margin: 25px;
    text-align: center;
}

.icone img,
.icone svg {
    max-width: 50%;
    height: auto;
}

/* Rodapé topo */
.rodape-topo1 h5,
.rodape-topo2 h5,
.rodape-topo3 h5 {
    margin: 5% 0; /* Ajusta margem para mobile */
    text-align: center;
}

.rodape-topo button {
    background-color: var(--white); /* Este continua um override específico */
    border: none;
    color: var(--primary-blue); /* Ajustei a cor do texto do botão */
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: block; /* Ocupa a largura total em mobile */
    margin: 0 auto 20px; /* Centraliza e adiciona margem inferior */
    font-size: var(--font-size-base);
    cursor: pointer;
    text-transform: uppercase;
}

.recortes h1 {
    background-color: var(--light-gray);
    text-align: center;
    padding: 30px 0 0; /* Ajusta padding para mobile */
    margin: 0;
    font-size: 2rem; /* Ajustado para mobile */
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

.recortes .news {
    background-color: var(--light-gray);
    padding: 5% 0;
}

.recortes article {
    background-color: var(--white);
    padding: 5%;
    margin-bottom: 20px; /* Espaçamento entre artigos */
}

.documentos-button {
    text-align: center; /* Centraliza o botão */
}

.documentos-button button a {
    color: var(--white);
}

.documentos-button button a:hover {
    text-decoration: none;
}

/* Middle Area */
.middle-area {
    padding: 25px 0;
}

.middle-area h1 {
    color: var(--text-dark);
    text-transform: uppercase;
    text-align: center;
    font-size: 2rem; /* Ajuste para mobile */
}



/* Featured section */
.featured {
    background-color: var(--white);
    padding: 5%;
}

.featured-button {
    display: flex;
    justify-content: center;
}

.featured button a {
    color: var(--white);
}

/* Middle Area - Featured News */
.middle-area h1,
.home .news h1 {
    color: var(--text-dark);
    font-size: 2rem; /* Ajustado para mobile */
    font-family: var(--font-oswald);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.home .news .format-image h2,
.home .news .format-video h2,
.home .news .format-standard h2 {
    color: var(--text-dark); /* Ajustado para preto */
    background: transparent;
    display: inline-block;
    padding: 10px 0 5px;
    font-weight: var(--font-weight-bold);
    font-size: 1.2rem; /* Ajustado para mobile */
}

.home .news .featured h2 {
    font-size: 20px; /* Ajustado para mobile */
    color: var(--text-dark);
}

.home .news .secondary h2 {
    font-size: 8px; /* Mantém */
    color: var(--text-dark);
}

.home .news .meta-info p {
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

.home .news span,
.news span a {
    color: var(--text-light);
    font-weight: normal;
    margin-right: 2px;
}

/* Pagination */
.pagination {
    width: 100%;
    text-align: center;
    margin: 30px auto; /* Ajusta margem para mobile */
    display: flex; /* Para flexbox para os números */
    justify-content: center; /* Centraliza os números */
    flex-wrap: wrap; /* Permite que os números quebrem linha */
    gap: 5px; /* Espaçamento entre os números */
}

.pagination .page-numbers {
    padding: 8px 12px; /* Aumenta padding para melhor toque */
    background: var(--primary-blue);
    color: var(--white);
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-radius: 3px; /* Leve arredondamento */
}

.pagination .page-numbers:hover {
    background: var(--lighter-gray);
}

.pagination .current {
    background: var(--medium-gray);
}

/* Footer */
footer {
    background: var(--dark-gray);
    padding: 20px 0; /* Ajusta padding */
    color: var(--cream);
}

footer .row {
    display: flex;
    flex-direction: column; /* Empilhado em mobile */
    align-items: center;
    gap: 15px;
    text-align: center;
}


footer span{
    font-size: 12px;
}
footer span a{
    text-decoration: none;
    color: #ffffff;
}

/* Footer - Footer Menu */
.footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 18px; /* Ajustado para mobile */
    display: flex;
    flex-direction: column; /* Empilhado em mobile */
    gap: 8px;
}

.footer-menu ul li {
    margin: 0; /* Gerenciado pelo gap */
}

.footer-menu li a {
    color: var(--cream);
}

.footer-menu li a:hover {
    color: var(--link-hover-blue); /* Cor de hover para footer */
}

/* ==========================================================================
   INNER PAGES - Estilos Padrão (Mobile)
   ========================================================================== */

/* Blog */
.blog {
    padding: 5%;
}

.wp-post-image {
    float: none; /* Remove float em mobile */
    margin: 0 auto 15px; /* Centraliza imagem e adiciona margem */
    max-width: 100%;
}

.blog article {
    display: block; /* Garante que ocupa a largura total */
    margin-bottom: 30px;
    width: 100%;
}

.blog article h2 {
    margin-bottom: 15px;
    text-align: center; /* Centraliza título em mobile */
}

.blog article p > img {
    width: 100%;
    height: auto;
}

.blog .meta-info p {
    line-height: 1em;
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.blog .meta-info p > a {
    color: #9d9d9d;
    font-weight: normal;
}

/* Contact section */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	border: 1px solid #eeeeee;
	width: 100%;
	padding: 10px;
}

.wpcf7 textarea {
	height: 70px;
}

.wpcf7 input[type="submit"] {
	background: var(--primary-blue);
	border: 0;
	color: var(--white);
	text-transform: uppercase;
	width: initial;
	padding: 10px;
cursor: pointer;
border-radius: 50px;
width: 100%;
}

.wpcf7 input[type="submit"]:hover{
    background-color: var(--secondary-blue);
}

.contato {
	background: #e0e5eb;

}

.contato h1 {
	margin-top: 0;
	text-align: center;
	font-family: 'Oswald', sans-serif;
}

.contato .container {
	display: flex;
	height: 800px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 0;
	margin-top: 0;

}

.container-azul {
	width: 90%;
	height: 400px;
	background-color: var(--primary-blue);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.container-branco {
	width: 85%;
	padding-top: 2%;
	background-color: white;


}

.campos {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;

}

.formulario{
    padding: 0 30px ;
}

/* Post Formats */
.format-image h2,
.format-video h2,
.format-standard h2 {
    padding: 15px;
    text-align: center;
    font-size: 1.5rem; /* Ajustado para mobile */
}

.format-image h2 {
    color: var(--white);
    background: var(--medium-gray);
}

.format-video h2 {
    color: var(--white);
    background: #211e1e; /* Cor específica */
}

.format-standard h2 {
    color: var(--text-medium);
    background: var(--lighter-gray);
}

/* Pagination - (já definido acima, remover duplicidade se houver) */
.blog .pages,
.archive .pages,
.single .pages {
    margin-bottom: 40px;
}

.pagina-bio {
    display: flex;
    flex-direction: column; /* Empilhado em mobile */
    align-items: center;
    justify-content: center;
    background-color: var(--background-gray);
    padding: 20px; /* Adiciona padding geral */
}

.pagina-bio div {
    width: 100%; /* Largura total em mobile */
}

.imagem-pagina-bio {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('./assets/images/paulo_3x4.webp');
    background-repeat: no-repeat;
    background-position: center center;
    height: 400px; /* Altura menor em mobile */
    width: 100%;
    background-size: cover;
    margin-bottom: 20px;
}

.pagina-bio h1 {
    padding-left: 0;
    text-align: center;
    font-size: 2.2rem; /* Ajustado para mobile */
}

.pagina-bio p {
    padding: 0 5%; /* Ajusta padding */
    text-align: justify; /* Justifica texto para melhor leitura */
}

.pagina-bio-conteudo {
    column-count: 1; /* Uma coluna em mobile */
    column-gap: 40px;
    padding: 50px 5%; /* Reduz padding em mobile */
}

.pagina-bio-conteudo h1 {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    margin: 0 0 10px; /* Ajusta margem */
    color: var(--red-accent);
    text-align: center;
}

.pagina-bio-conteudo h2 {
    font-size: var(--font-size-large); /* Ajustado para mobile */
    font-weight: var(--font-weight-extra-bold);
    line-height: 1.5; /* Ajusta line-height */
    text-align: center;
}

.pagina-bio-conteudo h3 {
    font-style: italic;
    font-size: var(--font-size-medium);
    margin: 20px 0 30px; /* Ajusta margem */
    color: #b3b3b3; /* Cor específica */
    padding-bottom: 0; /* Remove padding */
    text-align: center;
}

.pagina-bio-conteudo hr {
    border-color: var(--red-accent);
    border-width: 3px;
    width: 80px; /* Largura menor para hr */
    margin: 20px auto; /* Centraliza hr */
}

.delora {
    background-color: var(--background-gray);
    padding: 50px 5%; /* Reduz padding para mobile */
}

.delora h1 {
    font-size: var(--font-size-large); /* Ajustado para mobile */
    line-height: 1.1;
    padding: 20px 0; /* Ajusta padding */
    font-weight: var(--font-weight-extra-bold);
    text-align: center;
}

.delora h1 span {
    font-size: var(--font-size-medium); /* Ajustado para mobile */
    font-weight: var(--font-weight-regular);
    display: block; /* Garante que o span fique em nova linha */
}

.delora div {
    column-count: 1; /* Uma coluna em mobile */
    column-gap: 40px;
    column-rule-style: solid;
    column-rule-width: 1px;
    padding: 20px 0; /* Adiciona padding */
}

.delora p {
    font-style: italic;
    margin-bottom: 20px; /* Espaçamento entre parágrafos */
}

/* ==========================================================================
   MEDIA QUERIES (Mobile First - Crescendo a partir daqui)
   ========================================================================== */

/* Small Tablets / Larger Phones (ex: landscape mode, ou celulares maiores) */
@media screen and (min-width: 600px) {
    /* Top Bar Section */
    .top-bar {
        flex-direction: row; /* Volta a ser row */
        justify-content: flex-end; /* Alinha ao final */
        gap: 20px; /* Aumenta gap */
    }

    .top-bar .row {
        justify-content: flex-end;
    }

    .search {
        width: auto; /* Deixa a largura automática */
    }

    .search input[type="search"] {
        width: auto; /* Deixa a largura automática */
    }

    /* Header - Main Menu */
    nav {
        flex-direction: row; /* Volta a ser row */
        justify-content: space-between;
        align-items: center;
        gap: 0; /* Remove gap, o justify-content gerencia */
    }

    nav img {
        margin: 1%; /* Retorna a margem original */
        max-width: none; /* Remove limitação de tamanho */
    }

    .menu ul {
        flex-direction: row; /* Volta a ser row */
        gap: 20px; /* Ajusta espaçamento entre itens */
    }

    /* topo section */
    .topo {
        flex-direction: column; /* Volta a ser row */
        height: 653px; /* Altura original */
        width: 100%;
    }

    .intro {
        width: 100%;
        order: 1; /* Volta à ordem original */
    }

    .imagem-topo {
        height: 653px;
        width: 100%;
        background-position: center center;
        order: 2; /* Volta à ordem original */
    }

    .topo h1 {
        font-size: 3.5rem; /* Aumenta um pouco */
        text-align: left;
    }

    .topo p, .topo h4 {
        text-align: left;
    }

    /* Biografia Section */
    .biografia {
        flex-direction: row; /* Volta a ser row */
        flex-wrap: wrap; /* Pode manter o wrap se quiser quebrar em telas um pouco maiores */
        gap: 5%;
    }

    .texto-bio {
        width: 50%;
    }

    .imagem-bio {
        width: 50%;
        height: 570px; /* Altura original */
    }

    /* Quadros Section */
    .azul {
        height: 250px; /* Altura original */
    }

    .quadros {
        flex-direction: row; /* Volta a ser row */
        
        justify-content: center;
    }

    .item-quadro {
        width: 45%; /* Duas colunas para small tablets */
        padding: 30px;
    }

    .superior1 {
        margin-top: -160px; /* Retorna o ajuste */
    }

    .superior2 {
        margin-top: -260px; /* Retorna o ajuste */
    }

    /* Cinza Section */
    .cinza {
        flex-direction: row; /* Volta a ser row */
        justify-content: center;
        padding: 5%;
    }

    .cinza div {
        width: 50%;
    }

    .cinza h1 {
        width: 30%;
        text-align: left;
        padding: 5%;
    }

    .cinza div p, .cinza div a {
        text-align: left;
    }

    /* Citação */
    .citacao p {
        font-size: 1.5rem; /* Volta ao tamanho original */
    }

    /* Rodapé topo */
    .rodape-topo button {
        display: inline-block; /* Volta a ser inline */
        margin: 0 auto 20px;
    }

    /* Middle Area */
    .middle-area h1 {
        font-size: 2.5rem; /* Volta ao tamanho original */
    }

    /* Blog */
    .wp-post-image {
        float: left; /* Volta ao float */
        margin: 0 15px 10px 0;
    }

    .blog article h2,
    .blog .meta-info p {
        text-align: left;
    }

    /* Contact Page */
    .contato h1 {
        font-size: 48px; /* Volta ao tamanho original */
    }

    .container-laranja {
        height: 400px; /* Volta à altura original */
        width: 90%;
    }

    .container-branco {
        width: 85%;
    }

    .campos {
        flex-direction: row; /* Volta a ser row */
    }

    /* Pagina Bio */
    .pagina-bio {
        flex-direction: row; /* Volta a ser row */
        padding: 0; /* Remove padding geral */
    }

    .pagina-bio div {
        width: 50%;
    }

    .imagem-pagina-bio {
        height: 600px; /* Volta à altura original */
        width: 50%;
        margin-bottom: 0;
    }

    .pagina-bio h1 {
        padding-left: 10%;
        text-align: left;
        font-size: var(--font-size-xl);
    }

    .pagina-bio p {
        padding: 10%;
        text-align: left;
    }

    .pagina-bio-conteudo {
        column-count: 2; /* Duas colunas */
        padding: 100px 0px;
    }

    .pagina-bio-conteudo h1,
    .pagina-bio-conteudo h2,
    .pagina-bio-conteudo h3 {
        text-align: left;
    }

    .pagina-bio-conteudo hr {
        margin-left: 0; /* Alinha à esquerda */
    }

    /* Delora */
    .delora h1 {
        font-size: var(--font-size-xl);
    }

    .delora h1 span {
        display: inline; /* Volta a ser inline */
    }

    .delora div {
        column-count: 2; /* Duas colunas */
    }
}

/* Tablets (ex: iPad em portrait) */
@media screen and (min-width: 768px) {
    /* Ajustes específicos para tablets, se necessário */
    .item-quadro {
        width: 28%; /* Três colunas para tablets */
    }
    .topo h1 {
        font-size: 4rem; /* Tamanho original para desktop */
    }
    .recortes h1 {
        font-size: 2.5rem; /* Tamanho original */
    }
    .middle-area h1 {
        font-size: 2.5rem; /* Tamanho original */
    }
        .biografia {
        flex-direction: row;
        flex-wrap: nowrap; 
        gap: 5%;
    }
     /* topo section */
    .topo {
        flex-direction: row; /* Volta a ser row */
        height: 653px; /* Altura original */
        align-items: center;
        gap: 30px;
        
    }

    .intro {
        width: 50%;
        order: 1; /* Volta à ordem original */
    }

    .imagem-topo {
        height: 653px;
        width: 50%;
        background-position: center center;
        order: 2; /* Volta à ordem original */
    }
    .imagem-topo img{
        max-width: 100%;
    }
}

/* Desktops Pequenos / Laptops */
@media screen and (min-width: 992px) {
    /* Ajustes para desktops */
    .item-quadro {
        width: 20%; /* Quatro colunas */
    }
    .delora div {
        column-count: 3; /* Três colunas */
    }
    footer .row {
        flex-direction: row; /* Volta a ser row no footer */
        justify-content: space-between;
    }
    .footer-menu ul {
        flex-direction: row; /* Volta a ser row no menu do footer */
        gap: 10px;
    }
}

/* Desktops Grandes */
@media screen and (min-width: 1200px) {
    
}