/*
Theme Name: ORINTE Theme
Theme URI: https://orinte.tech
Author: ORINTE / Origen Sostenible
Author URI: https://orinte.tech
Description: Theme padre de bloques para la plataforma ORINTE. Base visual compartida (paleta, tipografía, espaciado, componentes) sin lógica de negocio ni integraciones.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orinte-theme
Tags: block-theme, full-site-editing, accessibility-ready, custom-colors, custom-logo, wide-blocks

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

ORINTE Theme is based on WordPress core's block theme APIs and contains no code
copied from any other project. Bundled fonts (Bricolage Grotesque, Inter) are
licensed separately under the SIL Open Font License 1.1 — see
assets/fonts/*/OFL.txt.
*/

/*
 * Los estilos base y las declaraciones @font-face viven en theme.json
 * (settings.typography.fontFamilies[].fontFace), que es el mecanismo nativo
 * de los block themes para tipografías locales. Este archivo cubre
 * exclusivamente lo que theme.json no puede expresar: utilidades de
 * accesibilidad y prefers-reduced-motion.
 */

/* Skip link: visible solo al recibir foco por teclado. */
.skip-link {
	position: absolute;
	top: -1000px;
	left: 0;
	background-color: var(--wp--preset--color--orinte-navy);
	color: var(--wp--preset--color--orinte-cream);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	z-index: 100000;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}

.skip-link:focus {
	top: 0;
}

/* Foco de teclado visible y consistente en toda la interfaz. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--orinte-orange);
	outline-offset: 2px;
}

/* Enlace de navegación provisional (aún no funcional): estilo diferenciado, no solo el texto.
   0.9 (no 0.75) porque con las paletas de exploración B el contraste al 75%
   cae a 3.7-3.9:1; al 90% se mantiene por encima de 4.5:1 en las tres paletas. */
.is-provisional > .wp-block-navigation-item__content {
	opacity: 0.9;
	text-decoration-style: dashed;
	cursor: default;
}

/* Enlaces: subrayado en color de acento sin comprometer el contraste del texto. */
.wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	text-decoration-color: var(--wp--preset--color--orinte-coral);
	text-underline-offset: 0.15em;
}

.wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover {
	text-decoration-thickness: 2px;
}

/* Sobre fondos oscuros, el color de enlace por defecto (marino) se sustituye por crema. */
.orinte-section-dark a:not(.wp-block-button__link):not(.wp-block-navigation-item__content),
.orinte-section-slate a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	color: var(--wp--preset--color--orinte-cream);
}

/* Botón — variante contorno (registrada en functions.php como is-style-outline). */
.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--orinte-navy);
	border-color: var(--wp--preset--color--orinte-navy);
}

.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--orinte-navy);
	color: var(--wp--preset--color--orinte-cream);
}

/* Sobre fondos oscuros (marino o pizarra), el botón de contorno se invierte a crema. */
.orinte-section-dark .is-style-outline > .wp-block-button__link,
.orinte-section-slate .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--orinte-cream);
	border-color: var(--wp--preset--color--orinte-cream);
}

.orinte-section-dark .is-style-outline > .wp-block-button__link:hover,
.orinte-section-slate .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--orinte-cream);
	color: var(--wp--preset--color--orinte-navy);
}

/* Rejilla de tarjetas: cada hijo ocupa un mínimo cómodo y se ajusta por fila disponible. */
.orinte-grid {
	gap: var(--wp--preset--spacing--md);
}

.orinte-grid > * {
	flex: 1 1 16rem;
	min-width: 0;
}

/* Tarjeta destacada: ocupa la fila completa (equivalente visual a "dos columnas"). */
.orinte-grid > .orinte-card--feature {
	flex-basis: 100%;
}

/* Lista de insignias (integraciones, sectores): chips en fila, con separación real y
   fondo tenue para que cada una se perciba como elemento independiente. */
.orinte-badge-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xs);
}

.orinte-badge-list li {
	margin: 0;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	border: 1px solid currentColor;
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--sm);
}

/* Etiqueta corta en mayúsculas (kicker) usada delante de titulares. */
.orinte-kicker {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Tarjeta: superficie elevada con tokens de radio y sombra de theme.json.
   Sin borde duro: la separación viene de la sombra y el color de fondo,
   no de una línea, para evitar la sensación de caja de interfaz administrativa. */
.orinte-card {
	background-color: var(--wp--preset--color--orinte-cream);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--sm);
}

.orinte-card:hover {
	box-shadow: var(--wp--custom--shadow--md);
	transform: translateY(-2px);
}

/* Dentro de secciones oscuras, la tarjeta usa pizarra como superficie elevada sobre marino. */
.orinte-section-dark .orinte-card {
	background-color: var(--wp--preset--color--orinte-slate);
	color: var(--wp--preset--color--orinte-cream);
}

/* Sobre fondo pizarra, la tarjeta usa crema para un contraste fuerte. */
.orinte-section-slate .orinte-card {
	background-color: var(--wp--preset--color--orinte-cream);
	color: var(--wp--preset--color--orinte-navy);
}

/* ---------------------------------------------------------------------- */
/* Composición editorial: hero, splits asimétricos y numerales decorativos */
/* ---------------------------------------------------------------------- */

/* Barra de acento de marca en el borde superior del header. */
.orinte-accent-bar {
	height: 5px;
	background-color: var(--wp--preset--color--orinte-orange);
}

/* Hero: presencia alta en escritorio, composición asimétrica. */
.orinte-hero {
	display: flex;
	align-items: center;
	min-height: 62vh;
}

@media (min-width: 768px) {
	.orinte-hero {
		min-height: 85vh;
	}
}

.orinte-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--xl);
	width: 100%;
}

@media (min-width: 768px) {
	.orinte-hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--wp--preset--spacing--2xl);
	}
}

.orinte-hero__visual {
	position: relative;
}

.orinte-hero__visual svg {
	display: block;
	width: 100%;
	height: auto;
}

.orinte-hero__pill {
	position: relative;
	margin-top: var(--wp--preset--spacing--md);
}

@media (min-width: 768px) {
	.orinte-hero__pill {
		position: absolute;
		left: -10%;
		bottom: -10%;
		max-width: 75%;
		margin-top: 0;
	}
}

/* Splits asimétricos reutilizables (40/60, 60/40, 70/30). */
.orinte-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--lg);
	align-items: start;
}

@media (min-width: 768px) {
	.orinte-split--40-60 {
		grid-template-columns: 2fr 3fr;
	}

	.orinte-split--60-40 {
		grid-template-columns: 3fr 2fr;
	}

	.orinte-split--70-30 {
		grid-template-columns: 7fr 3fr;
	}
}

/* Numeral decorativo de gran escala (p. ej. ciclo, valores): puramente
   ornamental, marcado aria-hidden en el marcado. */
.orinte-ghost-index {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(3.5rem, 9vw, 6rem);
	line-height: 1;
	opacity: 0.15;
	color: currentColor;
}

/* Lista editorial en dos columnas (p. ej. Valores): filas tipográficas
   separadas por una línea fina, sin fondo ni sombra de tarjeta. */
.orinte-list-2col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--wp--preset--spacing--xl);
}

@media (min-width: 768px) {
	.orinte-list-2col {
		grid-template-columns: 1fr 1fr;
	}
}

.orinte-value-row {
	border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	padding-block: var(--wp--preset--spacing--md);
}

/* ------------------------------------------------------------------ */
/* Páginas interiores: composición menos convencional que la portada   */
/* (bandas en diagonal, titulares superpuestos, fondos gráficos a      */
/* sangre). Ver VISUAL-EXPLORATION.md para qué de esto podría aplicarse */
/* más adelante a la portada.                                          */
/* ------------------------------------------------------------------ */

/* Bandas con un borde en diagonal en vez del corte recto habitual.
   El padding vertical de la sección ya es lo bastante generoso para
   que el contenido no quede recortado por el ángulo. */
.orinte-diagonal-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
}

.orinte-diagonal-top {
	clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
}

/* clip-path no es aditivo: para cortar ambos bordes a la vez hace falta
   un único polígono combinado, no las dos clases anteriores juntas. */
.orinte-diagonal-both {
	clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
}

/* Titular que se superpone al límite entre dos bandas (tira hacia
   arriba con margen negativo). Requiere position:relative implícito
   por el propio flujo del documento; no necesita z-index porque el
   heading ya pertenece a la banda siguiente en el DOM. */
.orinte-overlap-heading {
	margin-top: calc(-1 * var(--wp--preset--spacing--2xl));
}

@media (max-width: 767px) {
	.orinte-overlap-heading {
		margin-top: calc(-1 * var(--wp--preset--spacing--md));
	}
}

/* Gráfico decorativo a sangre detrás de un módulo, con el contenido
   real superpuesto encima. */
.orinte-bleed-visual {
	position: relative;
	overflow: hidden;
}

.orinte-bleed-visual__graphic {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.14;
	pointer-events: none;
}

.orinte-bleed-visual__graphic svg {
	width: 100%;
	height: 100%;
}

.orinte-bleed-visual__content {
	position: relative;
	z-index: 1;
}

/* Formulario (prototipo visual, sin envío real). */
.orinte-form {
	display: grid;
	gap: var(--wp--preset--spacing--md);
}

.orinte-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
}

@media (min-width: 768px) {
	.orinte-form-row {
		grid-template-columns: 1fr 1fr;
	}
}

.orinte-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3xs);
}

.orinte-field label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
}

.orinte-field input,
.orinte-field select,
.orinte-field textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--orinte-navy);
	background-color: var(--wp--preset--color--orinte-cream);
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--orinte-navy) 35%, transparent);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}

.orinte-field input:focus-visible,
.orinte-field select:focus-visible,
.orinte-field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--orinte-orange);
	outline-offset: 2px;
}

.orinte-field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2xs);
}

.orinte-field--checkbox input {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	margin-top: 0.2em;
}

.orinte-field--checkbox label {
	font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Navegación lateral modular (prototipo, páginas interiores).         */
/* Escritorio: columna fija de módulos cuadrados. Móvil: <details>     */
/* nativo (sin JavaScript) que despliega una cuadrícula de los mismos  */
/* módulos. El estado activo nunca depende solo del color: también     */
/* cambia el peso tipográfico y aparece un borde lateral.               */
/* ------------------------------------------------------------------ */

.orinte-sidebar-wrap {
	position: relative;
}

/* Versión de escritorio: columna fija a la izquierda. */
.orinte-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.orinte-sidebar {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		width: 5.5rem;
		height: 100vh;
		overflow-y: auto;
		z-index: 100;
		background-color: var(--wp--preset--color--orinte-navy);
	}
}

.orinte-sidebar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	aspect-ratio: 1 / 1;
	width: 100%;
	color: var(--wp--preset--color--orinte-cream);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--orinte-cream) 18%, transparent);
	padding: var(--wp--preset--spacing--3xs);
	box-sizing: border-box;
}

.orinte-sidebar__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 700;
}

.orinte-sidebar__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	line-height: 1.1;
}

/* El módulo activo se distingue por tres señales a la vez (relleno,
   borde y peso), no solo por el color. */
.orinte-sidebar__item.is-active {
	background-color: var(--wp--preset--color--orinte-orange);
	color: var(--wp--preset--color--orinte-navy);
	border-left: 4px solid var(--wp--preset--color--orinte-navy);
}

.orinte-sidebar__item.is-active .orinte-sidebar__label {
	font-weight: 800;
}

.orinte-sidebar__item:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--orinte-cream) 12%, transparent);
}

.orinte-sidebar__item.is-active:hover {
	background-color: var(--wp--preset--color--orinte-orange);
}

.orinte-sidebar__item.is-provisional {
	opacity: 0.9;
}

/* Versión móvil: <details> nativo, sin JS. El resumen actúa como botón. */
.orinte-sidebar-mobile {
	background-color: var(--wp--preset--color--orinte-navy);
	color: var(--wp--preset--color--orinte-cream);
}

@media (min-width: 1024px) {
	.orinte-sidebar-mobile {
		display: none;
	}
}

.orinte-sidebar-mobile summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	font-weight: 700;
}

.orinte-sidebar-mobile summary::-webkit-details-marker {
	display: none;
}

.orinte-sidebar-mobile summary::after {
	content: "Menú ▾";
	font-size: var(--wp--preset--font-size--sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.orinte-sidebar-mobile[open] summary::after {
	content: "Cerrar ▴";
}

.orinte-sidebar-mobile__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background-color: color-mix(in srgb, var(--wp--preset--color--orinte-cream) 18%, transparent);
	padding: 1px;
}

.orinte-sidebar-mobile__grid .orinte-sidebar__item {
	/* El fondo marino ya lo aporta el contenedor .orinte-sidebar-mobile;
	   no repetirlo aquí evita empatar en especificidad con .is-active
	   (que perdía ese empate por orden de declaración y quedaba invisible). */
	border-bottom: none;
	aspect-ratio: 1 / 1;
}

/* En escritorio, el contenido deja hueco para la columna fija. */
@media (min-width: 1024px) {
	.orinte-page-with-sidebar {
		/* padding, no margin: con margin-left el elemento seguía ocupando
		   el 100% del ancho y su borde derecho acababa fuera del viewport
		   (overflow horizontal real, detectado en QA a 1440px). */
		padding-left: 5.5rem;
		box-sizing: border-box;
	}
}

/* Transiciones simples, deshabilitadas por completo si el usuario lo prefiere. */
.wp-block-button__link,
.wp-block-navigation-item > a,
.orinte-card,
.orinte-header {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}