/**
 * Retiro Literário de Cadaqués — estilos do plugin
 *
 * O layout inteiro vive nos atributos style="" dos templates, exatamente como
 * no arquivo original. Este CSS faz só duas coisas:
 *
 *   1. Blinda a página contra o CSS do tema (regras de reset com escopo .rc-root).
 *   2. Adapta o layout ao mobile, via media queries.
 *
 * Nenhuma regra aqui muda a aparência em telas largas: acima de 900px o
 * resultado é idêntico ao original, pixel a pixel. Todas as regras responsivas
 * precisam de !important porque estão sobrescrevendo estilos inline.
 */

/* -------------------------------------------------------------------------
 * 1. Blindagem contra o tema
 * ---------------------------------------------------------------------- */

.rc-root {
	/* O fundo original vinha do <body>; aqui fica no contêiner do shortcode
	   para não depender do tema. */
	background: #fbfaf7;
	/* Nenhuma seção deve poder empurrar a página para os lados. */
	overflow-x: clip;
}

/* content-box, e não border-box.
 *
 * O arquivo original não declarava box-sizing em lugar nenhum, então tudo
 * seguia o padrão do navegador (content-box) — e o layout foi desenhado em
 * cima disso. Os círculos das redes sociais, por exemplo, são 44px de
 * conteúdo MAIS 1px de borda de cada lado: 46px na tela.
 *
 * Quase todo tema de WordPress declara `*{box-sizing:border-box}`, o que
 * encolheria esses elementos e faria a página inteira andar alguns pixels.
 * Esta regra devolve o comportamento do original. Onde o próprio projeto
 * pedia border-box (os campos de formulário), o valor vem do style inline ou
 * de uma regra mais específica, e continua valendo.
 */
.rc-root,
.rc-root *,
.rc-root *::before,
.rc-root *::after {
	box-sizing: content-box;
}

/* Temas costumam impor margens, sublinhados e alturas de linha em h1-h6, p e
   a. Zeramos aqui para que só valha o que está no style inline. */
.rc-root h1,
.rc-root h2,
.rc-root h3,
.rc-root p,
.rc-root div,
.rc-root span,
.rc-root label {
	margin: 0;
	padding: 0;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
}

.rc-root a {
	box-shadow: none;
	text-decoration: none;
}

.rc-root a:hover,
.rc-root a:focus {
	text-decoration: none;
}

/* Sem height:auto aqui: as imagens do projeto têm altura fixa no style
   inline (que sempre vence o CSS) e recorte "cover". */
.rc-root img {
	max-width: 100%;
	border: 0;
	border-radius: 0;
	vertical-align: middle;
}

/* Dentro de uma moldura recortada, a imagem precisa poder ultrapassar a
   largura do contêiner — é isso que produz o corte. */
.rc-root .rc-frame > img {
	max-width: none;
}

.rc-root button,
.rc-root input,
.rc-root textarea,
.rc-root select {
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: normal;
	text-transform: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Rádios e caixas de seleção ficam exatamente como o navegador desenha.
 *
 * `revert` desfaz o reset acima e devolve o valor da folha de estilo do
 * navegador — inclusive a margem lateral nativa, que é o que separa o
 * quadradinho do texto. Zerar essa margem (como o reset genérico fazia)
 * encostava a caixa no rótulo e movia a linha inteira alguns pixels. */
.rc-root input[type="radio"],
.rc-root input[type="checkbox"] {
	-webkit-appearance: auto;
	appearance: auto;
	width: revert;
	height: revert;
	margin: revert;
	padding: revert;
	font: revert;
	/* Único acréscimo: impede que o controle seja espremido quando a linha
	   quebra no celular. Em telas largas não muda nada. */
	flex-shrink: 0;
}

.rc-root button {
	background: none;
	border: 0;
	border-radius: 0;
	text-align: inherit;
}

/* Foco visível — o original não previa, e teclado precisa disso. */
.rc-root a:focus-visible,
.rc-root button:focus-visible,
.rc-root input:focus-visible,
.rc-root textarea:focus-visible {
	outline: 2px solid #2c5f7c;
	outline-offset: 2px;
}

/* Blocos condicionais (o antigo <sc-if>). */
.rc-root [hidden] {
	display: none !important;
}

/* Correção: botões dentro de uma sobreposição continuam clicáveis.
 *
 * As faixas com foto de fundo põem o texto numa camada absoluta com
 * `pointer-events:none`, para o clique atravessar até a imagem. Quem tem um
 * controle de verdade dentro precisa reativar o clique — no arquivo original
 * a home faz isso (`pointer-events:auto` na linha dos botões), mas a página
 * de perguntas frequentes não faz, e os três botões do rodapé ficam mortos:
 * o clique passa por baixo e chega na foto.
 *
 * Reativar no próprio controle resolve em qualquer página e não muda nada
 * onde já funcionava — ali o valor já era `auto`. Nenhum texto, cor ou medida
 * é afetado; só volta a ser clicável o que sempre pareceu clicável.
 */
.rc-root [style*="pointer-events:none"] a,
.rc-root [style*="pointer-events:none"] button {
	pointer-events: auto;
}

/* -------------------------------------------------------------------------
 * 1b. CSS que vinha no <helmet> dos arquivos originais
 *
 * Copiado sem alteração de valores; só ganhou o escopo .rc-root, já que no
 * WordPress não podemos estilizar o <body> do tema inteiro.
 * ---------------------------------------------------------------------- */

/* body { margin: 0; background:#fbfaf7; } — ver .rc-root acima e .rc-canvas abaixo. */

.rc-root ::selection {
	background: #bcd6e4;
}

.rc-root input[type=text],
.rc-root input[type=email],
.rc-root input[type=tel],
.rc-root textarea {
	font-family: 'Newsreader', serif;
	font-size: 16px;
	color: #16323f;
	border: 1px solid #cdd9de;
	border-radius: 2px;
	padding: 12px 14px;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
}

.rc-root input[type=text]::placeholder,
.rc-root textarea::placeholder {
	color: #9aa9af;
}

.rc-root label.field {
	display: block;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #2c5f7c;
	margin-bottom: 8px;
}

/* Página em "tela cheia": o tema não desenha nada em volta. */
body.rc-canvas {
	margin: 0;
	background: #fbfaf7;
}

body.rc-canvas ::selection {
	background: #bcd6e4;
}

/* Trava o scroll do fundo enquanto o modal de contato está aberto. */
body.rc-modal-open {
	overflow: hidden;
}

/* Honeypot anti-spam: fora da tela, invisível para quem lê e para leitores
   de tela, preenchido só por robôs. */
.rc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Resultado da busca nas perguntas frequentes. */
.rc-faq-hidden {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * 2. Tablet — 1024px
 *
 * A caixa original tem 1280px. Entre 900 e 1024 só sobra a folga lateral,
 * então basta encolher o respiro de 72px.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.rc-root .rc-px {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

/* -------------------------------------------------------------------------
 * 3. Mobile — 900px
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {

	/* Todas as grades viram uma coluna só. */
	.rc-root .rc-grid {
		grid-template-columns: 1fr !important;
	}

	/* Linhas de botões quebram em vez de estourar a largura.
	 *
	 * Mas só as que são linha de verdade. Dois casos precisam ficar de fora:
	 *
	 * 1. flex-direction:column — permitir quebra num contêiner em coluna faz
	 *    o conteúdo saltar para uma SEGUNDA COLUNA, ao lado e fora da tela.
	 *    Era o que sumia com os botões do rodapé.
	 *
	 * 2. align-items:baseline — são as linhas de marcador (o ponto e o texto).
	 *    Quebrando, o ponto fica sozinho numa linha e o texto vai para a de
	 *    baixo.
	 */
	.rc-root .rc-flex:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not([style*="align-items:baseline"]):not([style*="align-items: baseline"]) {
		flex-wrap: wrap !important;
	}

	/* O ponto do marcador nunca encolhe nem se separa do texto. */
	.rc-root .rc-flex[style*="align-items:baseline"] > span:first-child,
	.rc-root .rc-flex[style*="align-items: baseline"] > span:first-child {
		flex-shrink: 0;
	}

	/* Faixa de chamada com foto de fundo: no celular quem manda na altura
	 * passa a ser o conteúdo, não a foto.
	 *
	 * No desktop a foto tem altura fixa e o texto cabe folgado por cima. Numa
	 * tela estreita o texto cresce (o título quebra em três linhas, os botões
	 * empilham) e passa a não caber — os botões ficavam para fora da faixa.
	 *
	 * A inversão resolve: a foto vira fundo absoluto e o bloco de texto entra
	 * no fluxo, empurrando a altura da seção conforme precisa. O véu escuro
	 * continua absoluto e cobre tudo, porque não casa com o seletor. */
	.rc-root div[style*="position:relative"]:has(> [style*="inset:0"][style*="flex-direction:column"]) > .rc-media {
		position: absolute !important;
		inset: 0 !important;
		height: 100% !important;
		max-height: none !important;
	}

	.rc-root [style*="position:absolute"][style*="inset:0"][style*="flex-direction:column"] {
		position: relative !important;
		min-height: 62vw;
		padding-top: 52px !important;
		padding-bottom: 52px !important;
	}

	/* Enquadramento das fotos em tela estreita.
	 *
	 * Numa moldura estreita e alta, o recorte pelo centro come as laterais e o
	 * topo — e é sempre a cabeça que se perde. Cada foto pede o seu ponto de
	 * ancoragem. No desktop nada disso vale: a moldura é larga e o centro
	 * funciona. */
	.rc-root img[src*="b_hero"] {
		object-position: 100% 50% !important;  /* a mulher está à direita */
	}

	.rc-root img[src*="b_dali"],
	.rc-root img[src*="b_nara"],
	.rc-root img[src*="b_vero"] {
		object-position: 50% 0% !important;    /* retratos: preservar o topo */
	}

	/* "Quem organiza": no celular os retratos viram avatares redondos.
	 *
	 * Em tela cheia a foto ocupa metade da largura, ao lado do texto. Empilhada
	 * num celular, ela vira um retângulo alto que domina a tela e ainda corta a
	 * cabeça. Como avatar, o rosto fica inteiro e a seção volta a respirar. */
	.rc-root .rc-frame:has(> img[src*="b_nara"]),
	.rc-root .rc-frame:has(> img[src*="b_vero"]) {
		width: 80vw !important;
		height: 80vw !important;
		min-height: 0 !important;
		/* a regra geral de .rc-media limita a altura a 460px; sem desfazer
		   isso, o "círculo" sai achatado nas telas mais largas */
		max-height: none !important;
		border-radius: 50% !important;
		justify-self: center;
		margin: 0 auto 8px !important;
	}

	/* No HTML a foto da Veronica vem depois do texto, para alternar o lado no
	   desktop. Empilhado, isso deixaria o avatar dela embaixo da biografia e o
	   da Nara em cima — sobe, para as duas serem apresentadas igual. */
	.rc-root .rc-frame:has(> img[src*="b_vero"]) {
		order: -1;
	}

	/* Capa: no celular os textos ficam centralizados.
	 *
	 * Alinhados à esquerda como no desktop, eles quebram em muitas linhas
	 * curtas e desencontradas — a tarja do topo em duas, a linha "Estudo e
	 * escrita literária" em duas, o título em duas. Centralizado, o bloco
	 * inteiro se organiza em torno de um eixo só.
	 *
	 * O `.rc-px` distingue a faixa de texto da capa das legendas das fotos,
	 * que também são absolutas e coladas embaixo. Título e subtítulo têm
	 * max-width em ch: sem margem automática ficariam centralizados por dentro
	 * e à esquerda por fora. */
	.rc-root--home .rc-px[style*="bottom:0"] {
		text-align: center !important;
	}

	.rc-root--home .rc-px[style*="bottom:0"] h1,
	.rc-root--home .rc-px[style*="bottom:0"] p {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.rc-root--home .rc-px[style*="bottom:0"] .rc-flex {
		justify-content: center !important;
	}

	/* A tarja do topo já é centralizada pelo flex, mas quando quebra em duas
	   linhas a segunda encosta à esquerda da caixa. O respiro de 34px também
	   fica curto quando ela ocupa duas linhas: desce um pouco. */
	.rc-root--home [style*="top:0"][style*="pointer-events:none"] {
		text-align: center !important;
		padding-top: 64px !important;
	}

	/* Véu mais forte sobre a foto da capa.
	 *
	 * O degradê original é escuro no topo (.5), quase transparente no meio
	 * (.12 aos 38%) e escuro de novo embaixo (.82). No desktop isso funciona:
	 * o texto fica na faixa de baixo, sobre a parte escura. No celular a foto
	 * é alta e estreita, o bloco de texto sobe, e título e subtítulo caem
	 * justamente na cintura clara — em cima do mar, das casas e do vestido
	 * estampado, que é o trecho mais agitado da imagem.
	 *
	 * O degradê continua degradê, para o botão não perder o apoio escuro no
	 * pé; o que muda é o meio, que deixa de ser transparente. */
	.rc-root--home [style*="rgba(20,38,52,.12)"] {
		background: linear-gradient(180deg,
			rgba(20, 38, 52, .60) 0%,
			rgba(20, 38, 52, .45) 45%,
			rgba(20, 38, 52, .88) 100%) !important;
	}

	/* Respiro lateral de 72-80px é grande demais num celular. */
	.rc-root .rc-px {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	/* Alturas fixas (300px a 760px) viram proporção da largura da tela. */
	.rc-root .rc-media {
		height: 62vw !important;
		min-height: 0 !important;
		max-height: 460px;
	}

	.rc-root .rc-media--hero {
		height: 118vw !important;
		max-height: 620px;
	}

	/* Tipografia: as escalas grandes do desktop não cabem em 360px. */
	.rc-root .rc-fs-76 { font-size: 40px !important; }
	.rc-root .rc-fs-52 { font-size: 32px !important; }
	.rc-root .rc-fs-46 { font-size: 30px !important; }
	.rc-root .rc-fs-34 { font-size: 25px !important; }
	.rc-root .rc-fs-32 { font-size: 24px !important; }
	.rc-root .rc-fs-28 { font-size: 22px !important; }
	.rc-root .rc-fs-27 { font-size: 21px !important; }
	.rc-root .rc-fs-26 { font-size: 21px !important; }
	.rc-root .rc-fs-24 { font-size: 19px !important; }

	/* Nos cartões, o valor promocional vem primeiro e ganha destaque; o valor
	   original riscado fica logo abaixo. */
	.rc-root .rc-price-values {
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 8px !important;
	}

	.rc-root .rc-price-current {
		order: 1;
		font-size: 38px !important;
	}

	.rc-root .rc-price-original {
		order: 2;
	}

	/* Os cartões de preço colocam rótulo e valor lado a lado; em tela
	   estreita ficam um sobre o outro. */
	.rc-root .rc-flex[style*="justify-content:space-between"],
	.rc-root .rc-flex[style*="justify-content: space-between"] {
		gap: 18px !important;
	}
}

/* -------------------------------------------------------------------------
 * 4. Celulares estreitos — 560px
 * ---------------------------------------------------------------------- */

@media (max-width: 560px) {
	.rc-root .rc-px {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.rc-root .rc-fs-76 { font-size: 33px !important; }
	.rc-root .rc-fs-52 { font-size: 28px !important; }
	.rc-root .rc-fs-46 { font-size: 26px !important; }
	.rc-root .rc-fs-34 { font-size: 22px !important; }
	.rc-root .rc-fs-32 { font-size: 21px !important; }
	.rc-root .rc-fs-28 { font-size: 20px !important; }
	.rc-root .rc-fs-27 { font-size: 19px !important; }
	.rc-root .rc-fs-26 { font-size: 19px !important; }
	.rc-root .rc-fs-24 { font-size: 18px !important; }
	.rc-root .rc-price-current { font-size: 38px !important; }

	/* Botões de largura total, para virarem alvos de toque confortáveis.
	 *
	 * Exceto os ícones redondos das redes sociais (`border-radius:50%`, 44px de
	 * lado). Eles também são <button> — o do envelope, em "Quem organiza" —, e
	 * a largura total transformava o círculo numa elipse atravessada de ponta a
	 * ponta, ao lado de um Instagram que continuava redondo (aquele é um <a>
	 * com display:inline-flex, que o seletor não pega). Ícone não é botão de
	 * ação: mantém os 44px do original. */
	.rc-root .rc-flex > a[style*="display:inline-block"],
	.rc-root .rc-flex > button:not([style*="border-radius:50%"]) {
		flex: 1 1 100% !important;
		text-align: center !important;
	}
}

/* -------------------------------------------------------------------------
 * 5. Impressão
 * ---------------------------------------------------------------------- */

@media print {
	.rc-root [style*="position:fixed"] {
		display: none !important;
	}

	.rc-root .rc-grid {
		break-inside: avoid;
	}
}

/* -------------------------------------------------------------------------
 * 6. Preferência por menos movimento
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rc-root * {
		transition: none !important;
		animation: none !important;
	}
}