/*
Theme Name: Permiso Alegre
Theme URI: https://permisoalegre.cl
Author: Sebastián Becerra
Author URI: https://www.sebastianbecerra.cl
Description: Block theme (FSE) a medida para la landing de Permiso Alegre (permisoalegre.cl), servicio de arquitectura y regularizaciones. One-page: hero, servicios, mitos, FAQ y contacto, con bloques core y design tokens en theme.json.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: permisoalegre
*/

/* ==========================================================================
   Animaciones y transiciones (progressive enhancement)
   Todo lo de acá abajo asume que si JS no corre o el usuario prefiere menos
   movimiento, el sitio se ve y funciona igual — solo sin la animación.
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

a,
.wp-element-button,
.wp-block-button__link,
.hero-rail__img img {
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease,
		box-shadow 0.2s ease, filter 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	filter: brightness(0.96);
	box-shadow: 0 6px 16px rgba(10, 181, 122, 0.25);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
	filter: brightness(0.92);
}

.hero-rail__img {
	overflow: hidden;
}

.hero-rail__img:hover img {
	transform: scale(1.045);
}

/* Reveal on scroll: la clase .reveal solo la agrega interactions.js, así que
   si JS no corre el contenido queda visible desde siempre (nunca depende de
   JS para mostrarse, solo para animarse). */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

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

	a,
	.wp-element-button,
	.wp-block-button__link,
	.hero-rail__img img,
	.reveal {
		transition: none !important;
	}

	.hero-rail__img:hover img {
		transform: none;
	}
}

/* ==========================================================================
   Navegación mobile (menú overlay del bloque core/navigation)
   ========================================================================== */

/* Todo acá va escopado a .is-menu-open a propósito: el bloque core/navigation
   reutiliza el MISMO div "responsive-container-content" tanto para el overlay
   mobile como para el nav inline de escritorio (siempre presente en el DOM,
   solo se oculta/muestra por breakpoint). Sin el scope, este CSS pensado para
   el overlay se filtraba también al nav de escritorio y le agregaba un
   margin-top enorme antes de "Servicios/Preguntas" — el "mucho aire" que vio
   el usuario ahí. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--fondo);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--tinta);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__label {
	display: block;
	padding: var(--wp--preset--spacing--30) 0;
	font-family: var(--wp--preset--font-family--andes);
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--tinta);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a:hover .wp-block-navigation-item__label {
	color: var(--wp--preset--color--verde);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero-rule.wp-block-separator {
	width: 48px;
	height: 3px;
	border: none;
	background-color: var(--wp--preset--color--verde);
	margin-left: 0;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
	opacity: 1;
}

/* Split hero: photo rail runs from the very top of the page (y=0), the
   header (logo/nav/WhatsApp) lives alongside the content instead of
   spanning the full page width above everything. CSS Grid with named areas
   (not flex + DOM order) because the reading order needs to be genuinely
   different between desktop (rail beside everything) and mobile (rail
   inserted as its own step between the hero text and Servicios) — flex
   `order` can only move a block before/after its siblings as a whole, it
   can't reposition it in the middle of them. */
.hero-split {
	display: grid;
	grid-template-columns: 30% 1fr;
	grid-template-areas:
		"rail header"
		"rail text"
		"rail servicios"
		"rail mitos"
		"rail faq";
}

.hero-split__rail {
	grid-area: rail;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.hero-split__header {
	grid-area: header;
}

.hero-split__text {
	grid-area: text;
}

.hero-split__servicios {
	grid-area: servicios;
}

.hero-split__mitos {
	grid-area: mitos;
}

.hero-split__faq {
	grid-area: faq;
}

/* Un solo método de centrado para las 5 secciones de la columna de contenido,
   aplicado siempre al mismo nivel (la sección, no a veces la sección y a veces
   sus hijos) para que el contenido interno quede perfectamente alineado entre
   sí sin importar el ancho de pantalla. El padding crece más allá del mínimo
   una vez que el contenedor supera ~900px, centrando el contenido en vez de
   dejarlo pegado al borde de la columna (que en monitores anchos puede ser
   mucho más ancha que 900px). Los fondos de color de Mitos/FAQ siguen
   llenando el 100% de la columna porque el padding vive en la sección misma,
   no en un hijo interno. */
.hero-split__header,
.hero-split__text,
.hero-split__servicios,
.hero-split__mitos,
.hero-split__faq {
	padding-left: max(var(--wp--preset--spacing--40), calc((100% - 900px) / 2 + var(--wp--preset--spacing--40)));
	padding-right: max(var(--wp--preset--spacing--40), calc((100% - 900px) / 2 + var(--wp--preset--spacing--40)));
}

.hero-split__text {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}

.hero-split__servicios {
	border-top: 1px solid var(--wp--preset--color--borde);
}

.hero-rail__img {
	margin: 0;
	overflow: hidden;
}

.hero-rail__img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Full-width divider bars that split the rail into "Diseños" / "Regularizaciones"
   sections — the treatment from the original brochure that the client liked,
   not a small corner badge. */
.hero-rail__divider {
	margin: 0;
	padding: 0.55rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	text-align: center;
}

.hero-rail__divider--disenos {
	background-color: var(--wp--preset--color--magenta);
}

.hero-rail__divider--regularizaciones {
	background-color: var(--wp--preset--color--oliva);
	/* Blanco sobre oliva da 2.27:1 (falla WCAG AA); verde-oscuro da 6.03:1. */
	color: var(--wp--preset--color--verde-oscuro);
}

/* Mobile: single column, but the rail is inserted as its own step right
   after the hero text (before Servicios) instead of trailing everything —
   that reordering is exactly what grid-template-areas gives us for free. */
@media (max-width: 781px) {
	.hero-split {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"text"
			"rail"
			"servicios"
			"mitos"
			"faq";
	}

	.hero-split__logo img {
		max-width: 170px;
		width: auto;
		height: auto;
	}

	.hero-split__rail {
		width: 100%;
		max-width: 100%;
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	}

	.hero-rail__img {
		flex: 0 0 auto;
		width: 55vw;
		scroll-snap-align: start;
	}

	.hero-rail__img img {
		height: 100%;
	}

	.hero-rail__divider {
		flex: 0 0 auto;
		width: 32px;
		writing-mode: vertical-rl;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem 0.4rem;
	}
}

/* ==========================================================================
   Servicios
   ========================================================================== */

.kicker {
	margin: 0 0 0.35rem 0;
	color: var(--wp--preset--color--verde-texto);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
}

.servicio-item {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--borde);
}

.servicio-item:first-child {
	border-top: none;
	padding-top: 0;
}

.servicio-item__num {
	flex: 0 0 auto;
	min-width: 2.25rem;
	margin: 0;
	color: var(--wp--preset--color--verde-texto);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
}

/* ==========================================================================
   Acordeón (Mitos + FAQ, mismo tratamiento — bloque core Details)
   ========================================================================== */

.acordeon-item {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.acordeon-item:first-child {
	border-top: 1px solid var(--wp--preset--color--borde);
}

.acordeon-item summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 1rem 2rem 1rem 0;
	font-family: var(--wp--preset--font-family--andes);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--tinta);
}

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

.acordeon-item summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 0.9rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--verde);
	transition: transform 0.25s ease;
}

.acordeon-item.is-open summary::after,
.acordeon-item[open]:not(.is-open) summary::after {
	transform: rotate(45deg);
}

.acordeon-item p {
	margin-top: 0;
	padding-bottom: 1.25rem;
	color: var(--wp--preset--color--texto);
}

/* Wrapper que agrega interactions.js alrededor del contenido (todo menos el
   <summary>). El alto de partida/llegada lo calcula el JS en px (scrollHeight)
   y lo anima vía transition:height — más compatible entre navegadores que
   max-height arbitrario o grid-template-rows con unidades fr. Sin JS, el
   navegador anima igual la apertura/cierre nativa de <details> (sin
   transición, pero funcional). */
.acordeon-item__content {
	overflow: hidden;
	height: 0;
	transition: height 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.acordeon-item summary::after,
	.acordeon-item__content {
		transition: none !important;
	}
}

/* ==========================================================================
   Contacto
   ========================================================================== */

/* El contenido de esta sección vive en la página "Inicio" (post-content,
   administrable desde wp-admin) y no en este archivo — el WAF del hosting
   bloquea guardar bloques con "<!--" en el body (ver memoria del proyecto),
   así que el color de fondo del bloque y el padding vertical (ambos fijados
   como atributos del bloque en el contenido guardado) se overridean acá con
   !important en vez de editarse en el editor. .has-verde-background-color es
   la única sección del sitio que usa esa clase, así que el override es
   seguro y no afecta a otro lado. */
#contacto.has-verde-background-color {
	background-color: var(--wp--preset--color--fondo-verde) !important;
}

/* Contacto quedó envuelto en un <main> extra dentro del contenido guardado
   (residuo de cuando, antes de la migración a post-content, Contacto vivía
   en su propio <main> en el template). Ese <main> no tiene align:full, así
   que WordPress lo trata como hijo normal del is-layout-constrained de
   post-content y lo encierra en los 760px del contentSize — el mismo bug
   de "encuadrado" que se arregló en el template, pero esta vez viene del
   contenido en la base de datos, que el WAF no deja editar. Se neutraliza
   por CSS en vez de re-migrar el contenido. */
.entry-content > main.wp-block-group {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* WP tiene una regla propia que ANULA el negative-margin breakout de
   alignfull cuando detecta dos .has-global-padding anidados (evita un
   doble cálculo en layouts normales) — pero acá el anidamiento es un
   artefacto, no un layout real, así que #contacto nunca llegaba a los
   bordes reales del viewport pese al fix de arriba. Se repite el cálculo
   del breakout a mano con !important para ganarle a esa regla. */
#contacto.alignfull {
	margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}

#contacto {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

.contacto-cards {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.contacto-cards .wp-block-column:last-child {
	border-left: 1px solid var(--wp--preset--color--borde);
	padding-left: var(--wp--preset--spacing--40);
}

.contacto-card {
	margin: 0;
	text-align: center;
}

.contacto-card a {
	display: block;
	color: var(--wp--preset--color--verde-oscuro);
	text-decoration: none;
}

.contacto-card a:hover {
	color: var(--wp--preset--color--verde);
}

.contacto-card strong {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--verde-texto);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
}

.contacto-card a {
	font-family: var(--wp--preset--font-family--andes);
	font-size: var(--wp--preset--font-size--lg);
}

@media (max-width: 781px) {
	.contacto-cards .wp-block-column:last-child {
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--borde);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--30);
		margin-top: var(--wp--preset--spacing--30);
	}
}