/*
Theme Name: Ximplar Child
Theme URI: https://ximplar.cl/
Description: Tema hijo de Blocksy para Ximplar Limitada, empresa agricola de La Araucania (trigo, raps y avena). Optimizado para velocidad: sin fuentes externas, sin librerias JS, solo CSS propio y patrones de bloques nativos.
Author: Ximplar Limitada
Author URI: https://ximplar.cl/
Template: blocksy
Version: 1.0.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: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ximplar-child
Tags: agricultura, empresa, bloques, rapido
*/

/* =========================================================
   1. TOKENS DE MARCA
   Paleta verde "tipo Excel" sobre fondo blanco.
   Estas variables se replican en theme.json para el editor.
   ========================================================= */
:root {
	--xi-verde-900: #0F3D2A;
	--xi-verde-700: #14653F;
	--xi-verde-600: #217346; /* Primario */
	--xi-verde-500: #2E8B57;
	--xi-verde-100: #E6F2EB;
	--xi-verde-50:  #F3F9F5;
	--xi-trigo:     #C9A227; /* Acento */
	--xi-tinta:     #16211C;
	--xi-texto:     #1F2A24;
	--xi-gris:      #6B7B72;
	--xi-borde:     #DCE7E0;
	--xi-blanco:    #FFFFFF;

	/* Radios, bordes y sombras: discretos y coherentes */
	--xi-radio:      10px;
	--xi-radio-sm:   8px;
	--xi-borde-fino: 1px solid var(--xi-borde);
	--xi-sombra:     0 1px 2px rgba(15, 61, 42, .04), 0 2px 8px rgba(15, 61, 42, .05);
	--xi-sombra-alt: 0 2px 4px rgba(15, 61, 42, .06), 0 8px 24px rgba(15, 61, 42, .07);

	/* Stack tipografico del sistema: cero descargas de fuentes */
	--xi-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji";
	--xi-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* =========================================================
   2. BASE
   ========================================================= */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--xi-blanco); /* La pagina siempre es blanca */
	color: var(--xi-texto);
	font-family: var(--xi-fuente);
	line-height: 1.65;
	text-rendering: optimizeSpeed;
}

/* Respeta la preferencia de menos animacion del sistema operativo */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

h1, h2, h3, h4, h5, h6 {
	color: var(--xi-verde-900);
	font-family: var(--xi-fuente);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.2;
	text-wrap: balance; /* Evita titulares con una sola palabra colgando */
}

p, li {
	text-wrap: pretty;
}

a {
	color: var(--xi-verde-600);
	text-underline-offset: .18em;
}

a:hover,
a:focus {
	color: var(--xi-verde-700);
}

/* Foco visible y accesible en toda la interfaz */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--xi-verde-600);
	outline-offset: 2px;
	border-radius: 4px;
}

img,
svg,
video {
	height: auto;
	max-width: 100%;
}

/* Reserva de espacio: evita saltos de maquetacion (CLS) */
img[width][height] {
	height: auto;
}

/* =========================================================
   3. BOTONES
   ========================================================= */
.wp-block-button__link,
.xi-boton {
	border-radius: var(--xi-radio-sm);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	padding: .85em 1.6em;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Boton primario (relleno verde) */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--xi-verde-600);
	border: 1px solid var(--xi-verde-600);
	color: var(--xi-blanco);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus {
	background-color: var(--xi-verde-700);
	border-color: var(--xi-verde-700);
	color: var(--xi-blanco);
}

/* Boton secundario (contorno) */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--xi-verde-600);
	color: var(--xi-verde-700);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--xi-verde-50);
	border-color: var(--xi-verde-700);
	color: var(--xi-verde-900);
}

/* Variante para botones sobre fondo verde oscuro (CTA) */
.xi-sobre-verde .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: rgba(255, 255, 255, .6);
	color: var(--xi-blanco);
}

.xi-sobre-verde .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, .12);
	border-color: var(--xi-blanco);
	color: var(--xi-blanco);
}

/* =========================================================
   4. COMPONENTES DE LOS PATRONES
   Clases con prefijo .xi- para no chocar con Blocksy.
   ========================================================= */

/* --- Etiqueta superior (kicker) --- */
.xi-kicker {
	color: var(--xi-verde-600);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.xi-sobre-verde .xi-kicker {
	color: var(--xi-verde-100);
}

/* --- Portada --- */
.xi-hero {
	background-color: var(--xi-verde-50);
	border-bottom: var(--xi-borde-fino);
}

.xi-hero__titulo {
	max-width: 20ch;
}

.xi-hero__bajada,
.xi-bajada {
	color: var(--xi-gris);
	max-width: 62ch;
}

/* --- Banda de cifras --- */
.xi-cifras {
	border-top: var(--xi-borde-fino);
	padding-top: clamp(1.25rem, 3vw, 2rem);
}

.xi-cifra {
	border-left: 3px solid var(--xi-verde-600);
	padding-left: 1rem;
}

.xi-cifra__numero {
	color: var(--xi-verde-700);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 .25rem;
}

.xi-cifra__texto {
	color: var(--xi-gris);
	font-size: .9375rem;
	margin: 0;
}

/* --- Tarjetas genericas --- */
.xi-tarjeta {
	background-color: var(--xi-blanco);
	border: var(--xi-borde-fino);
	border-radius: var(--xi-radio);
	box-shadow: var(--xi-sombra);
	height: 100%;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	transition: box-shadow .18s ease, border-color .18s ease;
}

.xi-tarjeta:hover {
	border-color: var(--xi-verde-100);
	box-shadow: var(--xi-sombra-alt);
}

.xi-tarjeta h3,
.xi-tarjeta h4 {
	margin-top: 0;
}

.xi-tarjeta p:last-child {
	margin-bottom: 0;
}

/* Tarjeta suave, sin sombra, para pilares */
.xi-tarjeta--suave {
	background-color: var(--xi-verde-50);
	box-shadow: none;
}

/* --- Dato destacado dentro de tarjeta (destino habitual, etc.) --- */
.xi-dato {
	border-top: var(--xi-borde-fino);
	color: var(--xi-gris);
	font-size: .875rem;
	margin-top: 1rem;
	padding-top: .75rem;
}

.xi-dato strong {
	color: var(--xi-verde-700);
	display: block;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --- Pasos numerados --- */
.xi-paso__numero {
	align-items: center;
	background-color: var(--xi-verde-600);
	border-radius: 50%;
	color: var(--xi-blanco);
	display: flex;
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 700;
	height: 2.25rem;
	justify-content: center;
	margin: 0 0 1rem;
	width: 2.25rem;
}

/* --- Lista con vinetas verdes --- */
.xi-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xi-lista li {
	padding-left: 1.5rem;
	position: relative;
}

.xi-lista li + li {
	margin-top: .5rem;
}

.xi-lista li::before {
	color: var(--xi-verde-600);
	content: "\2713"; /* Check */
	font-weight: 700;
	left: 0;
	position: absolute;
}

/* --- Banda verde (CTA) --- */
.xi-banda-verde {
	background-color: var(--xi-verde-700);
	color: var(--xi-blanco);
}

.xi-banda-verde h2,
.xi-banda-verde h3 {
	color: var(--xi-blanco);
}

.xi-banda-verde p {
	color: var(--xi-verde-100);
}

/* Filete de trigo para acentuar secciones clave */
.xi-filete-trigo {
	border-top: 3px solid var(--xi-trigo);
}

/* =========================================================
   5. FORMULARIO DE CONTACTO (HTML plano, sin plugin)
   ========================================================= */
.xi-form {
	display: grid;
	gap: 1rem;
}

.xi-form__campo {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.xi-form label {
	color: var(--xi-verde-900);
	font-size: .875rem;
	font-weight: 600;
}

.xi-form input[type="text"],
.xi-form input[type="email"],
.xi-form input[type="tel"],
.xi-form select,
.xi-form textarea {
	background-color: var(--xi-blanco);
	border: var(--xi-borde-fino);
	border-radius: var(--xi-radio-sm);
	color: var(--xi-texto);
	font-family: inherit;
	font-size: 1rem;
	padding: .7rem .85rem;
	width: 100%;
}

.xi-form input:focus,
.xi-form select:focus,
.xi-form textarea:focus {
	border-color: var(--xi-verde-600);
	outline: 2px solid var(--xi-verde-100);
	outline-offset: 0;
}

.xi-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.xi-form button[type="submit"] {
	background-color: var(--xi-verde-600);
	border: 1px solid var(--xi-verde-600);
	border-radius: var(--xi-radio-sm);
	color: var(--xi-blanco);
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	justify-self: start;
	padding: .8rem 1.75rem;
}

.xi-form button[type="submit"]:hover {
	background-color: var(--xi-verde-700);
	border-color: var(--xi-verde-700);
}

.xi-form__nota {
	color: var(--xi-gris);
	font-size: .8125rem;
	margin: 0;
}

/* Campo trampa anti-spam: oculto para personas, visible para robots */
.xi-form__trampa {
	left: -9999px;
	position: absolute;
}

/* --- Ficha de datos de contacto --- */
.xi-ficha {
	background-color: var(--xi-verde-50);
	border: var(--xi-borde-fino);
	border-radius: var(--xi-radio);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.xi-ficha dl {
	margin: 0;
}

.xi-ficha dt {
	color: var(--xi-verde-700);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.xi-ficha dd {
	margin: .15rem 0 1rem;
}

.xi-ficha dd:last-of-type {
	margin-bottom: 0;
}

/* =========================================================
   6. MENU MOVIL MINIMO (lo activa assets/menu.js)
   ========================================================= */
.xi-menu-toggle {
	align-items: center;
	background: var(--xi-blanco);
	border: var(--xi-borde-fino);
	border-radius: var(--xi-radio-sm);
	color: var(--xi-verde-900);
	cursor: pointer;
	display: none;
	font: inherit;
	font-weight: 600;
	gap: .5rem;
	padding: .5rem .9rem;
}

@media (max-width: 782px) {
	.xi-menu-toggle {
		display: inline-flex;
	}

	.xi-menu-movil[hidden] {
		display: none;
	}
}

/* =========================================================
   7. UTILIDADES
   ========================================================= */
.xi-oculto-visual {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Espaciado vertical uniforme para secciones de patrones */
.xi-seccion {
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Impresion: sin fondos pesados */
@media print {
	.xi-banda-verde,
	.xi-hero {
		background: none !important;
		color: #000 !important;
	}
}


/* ----------------------------------------------------------------
   Ajustes del sitio publicado: las paginas traen su propio encabezado
   dentro del contenido, por eso se oculta el titulo que agrega el tema.
   ---------------------------------------------------------------- */
.page [class*="hero-section"],
.page .page-title,
.home .entry-header { display: none !important; }
.page .site-main > article > .entry-content > *:first-child { margin-top: 0; }

/* ================================================================
   Portada a pantalla completa, fotos circulares y banda de cifras
   ================================================================ */
.xi-portada { min-height: 100svh !important; }
.xi-portada .wp-block-cover__inner-container { max-width: 860px; margin-inline: auto; text-align: center; }
.xi-portada h1, .xi-portada p { color: #ffffff !important; }
.xi-portada .xi-kicker-claro { color: rgba(255,255,255,.85) !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; font-size: .8rem; }
.xi-portada .xi-bajada-portada { color: rgba(255,255,255,.92) !important; max-width: 62ch; margin-inline: auto; }
.xi-portada .wp-block-buttons { justify-content: center; }
.xi-boton-claro .wp-block-button__link { color: #fff !important; border-color: rgba(255,255,255,.7) !important; }
.xi-boton-claro .wp-block-button__link:hover { background: rgba(255,255,255,.16) !important; }

.xi-circulos { gap: 22px; align-items: flex-start; }
.xi-circulos .wp-block-column { min-width: 140px; }
.xi-circulo { margin: 0; }
.xi-circulo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%;
  box-shadow: 0 12px 30px -18px rgba(15,61,42,.65); transition: transform .25s ease; }
.xi-circulo:hover img { transform: scale(1.04); }
.xi-circulo figcaption { text-align: center; font-size: .82rem; color: #6B7B72; margin-top: .7em; }
@media (max-width: 780px) { .xi-circulos { flex-wrap: wrap !important; } .xi-circulos .wp-block-column { flex: 1 1 40% !important; } }

.xi-banda-cifras .xi-cifra { color: #14653F; margin-bottom: .1em; }
.xi-banda-cifras .xi-cifra-texto { color: #6B7B72; }

/* ================================================================
   Encabezado con logo, portada y pie de pagina propio
   ================================================================ */
.site-header .site-branding .site-logo-container img,
.site-header .site-title-container img { max-height: 46px; width: auto; }
.site-header { box-shadow: 0 1px 0 #DCE7E0, 0 6px 24px -20px rgba(15,61,42,.5); }
.site-header .site-title, .site-header .site-title a { color: #0F3D2A !important; font-weight: 800; letter-spacing: -.02em; }
.site-header .menu > li > a { font-weight: 600; letter-spacing: .01em; }
.site-header .menu > li > a:hover { color: #217346 !important; }

/* la foto de fondo de la portada */
.xi-portada img.wp-block-cover__image-background {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.xi-portada .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* pie de pagina propio */
.site-footer, footer.site-footer { display: none !important; }
.xi-pie { background: #0F3D2A; color: rgba(255,255,255,.78); padding: 56px 20px 0; font-size: .93rem; }
.xi-pie a { color: rgba(255,255,255,.82); text-decoration: none; }
.xi-pie a:hover { color: #fff; text-decoration: underline; }
.xi-pie__grilla { max-width: 1140px; margin: 0 auto; display: grid; gap: 32px;
  grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 860px) { .xi-pie__grilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .xi-pie__grilla { grid-template-columns: 1fr; } }
.xi-pie h3 { color: #fff; font-size: .95rem; margin: 0 0 .8em; letter-spacing: .02em; }
.xi-pie p { margin: 0 0 .6em; line-height: 1.65; }
.xi-pie__marca { display: flex; gap: 14px; align-items: flex-start; }
.xi-pie__marca strong { color: #fff; display: block; margin-bottom: .35em; font-size: 1.05rem; }
.xi-pie__logo { filter: brightness(0) invert(1); opacity: .92; flex: none; }
.xi-pie__lista { list-style: none; margin: 0; padding: 0; }
.xi-pie__lista li { margin-bottom: .45em; }
.xi-pie__tenue { color: rgba(255,255,255,.55); }

.xi-pie__barra { max-width: 1140px; margin: 40px auto 0; padding: 18px 0 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .85rem; color: rgba(255,255,255,.6); }
.xi-pie__pcb { position: relative; display: inline-block; margin-left: .35em; font-weight: 800;
  letter-spacing: .08em; text-decoration: none !important;
  background: linear-gradient(90deg, #9fe0bd 0%, #ffffff 45%, #C9A227 55%, #9fe0bd 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: xi-brillo 5s linear infinite; }
.xi-pie__pcb::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.xi-pie__pcb:hover::after { transform: scaleX(1); }
@keyframes xi-brillo { 0% { background-position: 0% 50%; } 100% { background-position: -250% 50%; } }
@media (prefers-reduced-motion: reduce) { .xi-pie__pcb { animation: none; } }

/* ---- ajustes finos: logo, pie del tema y portada a ancho completo ---- */
.ct-header .site-logo, .ct-header img.site-logo, header .site-logo,
.site-branding img, .site-logo-container img { max-height: 48px !important; width: auto !important; }
.site-logo-container { display: flex; align-items: center; gap: 12px; }
.ct-footer, footer[data-footer], .site-footer { display: none !important; }
.xi-portada { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important; width: 100vw !important; }
.entry-content > .xi-portada:first-child { margin-top: calc(-1 * var(--wp--custom--spacing--outer, 0px)); }

/* ---- marca del encabezado en linea: logo + nombre ---- */
.site-branding, [data-id] .site-branding { display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 14px !important; text-align: left !important; }
.site-branding .site-title, .site-title { margin: 0 !important; line-height: 1.15 !important; font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem) !important; }
.site-branding .site-description { margin: 0 !important; font-size: .78rem; color: #6B7B72; }
.ct-header [data-row="middle"] > div { padding-block: 10px; }

/* ---- que se vea la foto de la portada, con contraste para el texto ---- */
.xi-portada .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(15,61,42,.72) 0%, rgba(15,61,42,.38) 45%, rgba(15,61,42,.78) 100%) !important;
}
.xi-portada h1 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }