/*
Theme Name: Kadence Child — Santiana Brochure
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Johann Gonzalez
Description: Child theme de Kadence para el sitio Santiana Brochure.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* ============================================
   FUENTES — Gotham registrada vía plugin kadence-custom-fonts
   (posts kt_font; archivos en uploads, copia de respaldo
   versionada en themes/kadence-child/fonts/). El plugin emite
   los @font-face y añade las familias a los pickers de Kadence.
   ============================================ */

/* ============================================
   SPACING SCALE — presets de Kadence
   El sitio de referencia usa los presets stock
   (xxs=8, xs=16, sm=24, md=32, lg=48, xl=64) — sin re-apuntar.
   ============================================ */

/* ============================================
   OVERRIDES
   Solo reglas que ningún control nativo de Kadence cubre.
   Cada regla debe documentar su origen y por qué existe.
   ============================================ */

/* --------------------------------------------
   Advanced Slider — flechas y dots (aprobado por Johann 2026-07-26).
   Por qué CSS: los 5 presets nativos de flechas/dots de Kadence
   (whiteondark/outlinewhite/…) no casan con el diseño (cajas con
   borde; dots pegados al borde inferior e invisibles sobre el
   overlay). Se estiliza el lenguaje del sitio: chevrons ligeros
   salvia claro sin caja, dots elevados y con estado activo claro.
   Alcance: todos los Advanced Slider del sitio (consistencia).
   !important: las reglas del plugin (kadence-splide.min.css) van
   con la misma especificidad y orden de carga no garantizado.
   -------------------------------------------- */
.wp-block-kadence-slider .splide__arrow {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	width: 48px !important;
	height: 48px !important;
	opacity: 0.75;
}
.wp-block-kadence-slider .splide__arrow:hover,
.wp-block-kadence-slider .splide__arrow:focus {
	opacity: 1;
}
.wp-block-kadence-slider .splide__arrow svg {
	fill: var(--global-palette8) !important;
	width: 34px !important;
	height: 34px !important;
}
.wp-block-kadence-slider .splide__arrow--prev {
	left: 24px;
}
.wp-block-kadence-slider .splide__arrow--next {
	right: 24px;
}
.wp-block-kadence-slider .splide {
	margin-bottom: 0 !important; /* el plugin reserva 30px bajo el slider para
	   los dots externos; con los dots dentro (regla siguiente) ese margen
	   dejaba una banda blanca dentro del row del hero */
}
.wp-block-kadence-slider .splide__pagination {
	bottom: 24px !important; /* el plugin lo cuelga a -25px del borde (invisible) */
	z-index: 20;
}
.wp-block-kadence-slider .splide__pagination__page {
	width: 9px !important;
	height: 9px !important;
	background: var(--global-palette8) !important;
	border: 0 !important;
	opacity: 0.45 !important;
	transform: none;
}
.wp-block-kadence-slider .splide__pagination__page.is-active {
	opacity: 1 !important;
	transform: scale(1.25);
}

/* Clase utilitaria: slider con esquinas redondeadas 8px (estándar del
   sitio, Johann 2026-07-26 — mismo radio que las tarjetas del bloque 4).
   Por qué CSS: el bloque slider no tiene control de border-radius y el
   radio nativo de la columna no recorta el contenido (overflow visible;
   verificado). Se aplica añadiendo la clase al bloque slider. */
.sb-slider-rounded .splide__track {
	border-radius: 8px;
	overflow: hidden;
}

/* --------------------------------------------
   Chips de especificaciones (bloque 09) — pedido de Johann
   2026-07-26: compactar fiel al mock; los presets nativos de
   padding/spacer quedaban demasiado amplios. Se aplica con la
   clase sb-spec-chip en la columna del chip. !important para
   ganar al CSS por-bloque generado por Kadence.
   -------------------------------------------- */
.sb-spec-chip > .kt-inside-inner-col {
	padding: 10px 8px !important;
}

.sb-spec-chip .wp-block-kadence-advancedheading {
	margin: 0 !important;
	line-height: 1.2 !important; /* compacto; heredaba el 1.6 del body */
}

.sb-spec-chip .kt-block-spacer {
	height: 12px !important;
}

/* --------------------------------------------
   Carrusel con "peek" (bloque 12) — aprobado por Johann 2026-07-26.
   Por qué CSS: el motor Splide de Kadence solo expone columnas enteras
   (verificado en kb-splide-slider-init: sin padding/fixedWidth), así que
   el efecto "pista alineada al contenido que sangra hasta el borde del
   viewport asomando la siguiente tarjeta" no es configurable nativo.
   La sección (full-bleed) recorta en el viewport; la pista ocupa el ancho
   de contenido con 4 columnas reales y `showOverflow` nativo deja visible
   la 5ª asomando — así el drag de Splide sí tiene recorrido.
   -------------------------------------------- */
.sb-peek-carousel {
	overflow: hidden;
}

.sb-peek-carousel .wp-block-kadence-slider {
	/* pista = ancho de contenido centrado; el 5º slide desborda visible
	   (showOverflow nativo) y la sección lo recorta en el viewport */
	margin-left: max(1.5rem, calc((100% - 1242px) / 2));
	width: min(1242px, calc(100% - 3rem));
	/* peek SOLO a la derecha: recorta el desborde por la izquierda en el
	   borde del contenido, deja libre el derecho (pedido de Johann) */
	clip-path: inset(-100px -100vw -100px 0);
}

/* Tarjeta del carrusel: foto con radio 8 y "+" anclado abajo-derecha
   (sin posicionamiento absoluto nativo en Kadence). */
.sb-peek-carousel .kb-advanced-slide-inner-wrap {
	background: transparent !important; /* el slide trae #f2f2f2 y padding de */
	padding: 0 !important;              /* fábrica (48px en modo carousel);   */
}                                      /* aquí las tarjetas van al aire      */

.sb-peek-carousel .sb-card-photo {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}

/* Play de los Video Popups = PNG oficial de marca (aprobado por Johann
   2026-07-27): el playBtn del videopopup solo acepta iconos de librería
   — sin control nativo para imagen. Se oculta el SVG hidratado y el span
   pinta el asset (copia versionada del child; misma pieza que el bloque
   11 y Santiana Materials/placeholders/icon-play.png). */
.sb-peek-carousel .kt-video-svg-icon {
	display: inline-block;
	width: 64px;
	height: 64px;
	background: url(images/icon-play.png) center / contain no-repeat;
}

.sb-peek-carousel .kt-video-svg-icon svg {
	display: none !important; /* sin !important el CSS del editor del plugin
	   re-muestra el vector encima del PNG (lo detectó Johann en el editor);
	   el icono kb-custom-231 queda como fallback si el PNG faltara */
}

/* Overlay de las tarjetas: verde oscuro de la paleta (palette1) en
   MULTIPLY (Johann 2026-07-29 — el velo plano del mock a 50-60% le
   enturbiaba la foto a gris; multiplicado oscurece con dominante verde
   y conserva la profundidad de la imagen). Mismo valor en hover: el
   hover de fábrica del videopopup aclara su overlay (por eso se había
   zeroado). !important: el CSS por-bloque del plugin (mayor
   especificidad) pone opacity 0. */
.sb-peek-carousel .kadence-video-overlay,
.sb-peek-carousel .kadence-video-popup-wrap:hover .kadence-video-overlay {
	background: var(--global-palette1) !important;
	opacity: 0.6 !important; /* 0.8 → 0.6, Johann 2026-07-29 */
	mix-blend-mode: multiply !important;
}

/* --------------------------------------------
   Testimonios (bloque 15, sb-testimonials) — aprobado por Johann
   2026-07-27. Por qué CSS: el slide del carrusel de Kadence mete un
   padding de fábrica (20/48) sin atributo que lo controle (misma trampa
   que el bloque 12) y encoge las tarjetas; y el mock pide tarjetas de
   ALTURA IGUAL con contenido centrado — la columna-tarjeta solo llena la
   altura del slide encadenando height:100% (los slides de Splide sí
   igualan altura por flex). Alcance: solo .sb-testimonials.
   -------------------------------------------- */
.sb-testimonials .kb-advanced-slide-inner-wrap {
	padding: 0 !important;
	background: transparent !important;
	height: 100%;
}

.sb-testimonials .kb-advanced-slide,
.sb-testimonials .kb-advanced-slide-inner,
.sb-testimonials .kb-advanced-slide-inner > .kb-row-layout-wrap,
.sb-testimonials .kb-advanced-slide-inner .kt-row-column-wrap,
.sb-testimonials .kb-advanced-slide-inner .wp-block-kadence-column,
.sb-testimonials .kb-advanced-slide-inner .kt-inside-inner-col {
	height: 100%;
}

.sb-testimonials .kb-advanced-slide-inner .kt-row-column-wrap {
	grid-template-rows: 1fr; /* el track auto del grid se ajusta al contenido
	   y la columna-tarjeta no llenaba la altura del slide */
}

/* flechas FUERA de las tarjetas (Johann 2026-07-27): el override global
   las pone a 24px del borde del slider, que aquí es el ancho de contenido
   y quedaban encima de los testimonios. Solo cuando el viewport deja
   canal suficiente a los lados; en pantallas menores vuelven adentro. */
@media (min-width: 1360px) {
	.sb-testimonials .splide__arrow--prev {
		left: -64px !important; /* .kb-splide .splide__arrow--prev del plugin
		   (misma especificidad, carga después) pone left:clamp(...) */
	}

	.sb-testimonials .splide__arrow--next {
		right: -64px !important;
	}
}

/* --------------------------------------------
   Footer — barra de partners (sb-footer-strip), aprobado por Johann
   2026-07-27 («si hace falta CSS para ser fiel, procede»).
   Por qué CSS: la tira izquierda lleva etiqueta + 6 logos EN LÍNEA
   (7 ítems) y el Row Layout de Kadence tope 6 columnas; además el mock
   pide subrayado corto bajo las etiquetas y un divisor vertical entre
   los logos del grupo derecho — nada de eso tiene control nativo.
   Alcance: solo dentro de .sb-footer-strip.
   -------------------------------------------- */
.sb-footer-strip .kt-inside-inner-col {
	display: flex;
	flex-direction: row !important; /* la columna de Kadence genera su propio
	   flex-direction: column por bloque; misma especificidad, gana por orden */
	align-items: center;
	flex-wrap: wrap;
	gap: 24px 32px !important; /* el CSS por-bloque de la columna mete su
	   propio gap (16px tras re-guardar desde el editor); el divisor
	   ::before de .sb-after-divider asume gap 32 para quedar centrado */
}

.sb-footer-strip .kt-inside-inner-col > * {
	margin: 0; /* los bloques imagen/heading traen márgenes de flujo vertical */
}

.sb-footer-strip .wp-block-kadence-column:last-child .kt-inside-inner-col {
	justify-content: flex-end; /* el grupo derecho remata contra el borde del contenido */
}

.sb-footer-strip .sb-after-divider {
	position: relative; /* divisor vertical del mock entre los dos logos del
	   grupo derecho — pintado como pseudo-elemento centrado en el gap del
	   flex (32px), sin bloque extra */
}

.sb-footer-strip .sb-after-divider::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 44px;
	background: var(--global-palette7);
	opacity: 0.4;
}



/* --------------------------------------------
   BLOQUE 18 · Get brochure — formulario (Gravity Forms)
   Portado 2026-07-29 del plugin santiana-custom-styles de santiana.local
   (mandato: idéntico al fuente). Solo las reglas de formulario — el resto
   de ese plugin estiliza header/footer/panorama de AQUEL sitio y no aplica.
   Ningún control nativo cubre internals de GF (theme orbital).
   Alcance: .sb-getbrochure (único form del sitio). Colores → tokens.
   -------------------------------------------- */
.sb-getbrochure .gform_fields {
	grid-row-gap: 15px !important; /* el orbital trae un gap mayor */
}

.sb-getbrochure .gform-theme--foundation .gfield textarea.large {
	min-block-size: auto !important;
	height: 100px !important; /* el fuente compacta el Message (orbital: 288px) */
}

.sb-getbrochure .gform-footer.gform_footer.top_label {
	justify-content: center; /* submit centrado como el fuente */
}

.sb-getbrochure .gform_button {
	font-weight: bold !important;
	font-family: Gotham !important;
	padding: 10px 46px !important;
	border-radius: 4px !important;
}

.sb-getbrochure .gform_button:hover {
	background-color: var(--global-palette2) !important; /* sin cambio en hover */
	color: var(--global-palette1) !important;
}

/* botón interno del campo teléfono (bandera iti): sin bg de theme al interactuar */
.sb-getbrochure .gform_wrapper .gfield button:hover,
.sb-getbrochure .gform_wrapper .gfield button:focus,
.sb-getbrochure .gform_wrapper .gfield button:active {
	background: transparent !important;
}

.sb-getbrochure #gform_confirmation_message_1 {
	text-align: center;
	color: var(--global-palette8);
}

.sb-getbrochure span.gfield_required.gfield_required_text {
	color: var(--global-palette2) !important; /* asterisco requerido coral */
}

/* validación en coral (el orbital la pinta con su rojo propio) */
.sb-getbrochure .gform-theme--framework .gfield_validation_message {
	color: var(--global-palette2);
}

.sb-getbrochure .gform-theme--framework .gform_validation_errors .gform_submission_error {
	color: var(--global-palette2);
}

.sb-getbrochure .gform-theme--framework .gform_validation_errors:focus {
	border-color: var(--global-palette2);
}

.sb-getbrochure .gform-theme--framework .gform_validation_errors .gform-icon {
	border-color: var(--global-palette2);
	color: var(--global-palette2);
}

/* --------------------------------------------
   Language switcher EN|ES del header (Johann 2026-07-29, réplica del
   sd-language-switcher de la referencia santiana-district.local).
   El markup lo imprime santiana-core (hook kadence_header_button);
   ningún control nativo del Header Builder renderiza un switcher
   custom. Colores → tokens (la referencia usa los mismos hex).
   -------------------------------------------- */
.sb-language-switcher {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 16px;
}

.sb-lang-item {
	color: var(--global-palette7);
	text-decoration: none;
	font-weight: 400;
	opacity: 0.75; /* el inactivo cede protagonismo a la pastilla activa */
}

/* activo = solo COLOR (Johann 2026-07-29, descartó la pastilla):
   blanco palette9 en bold sobre el header verde; el inactivo queda
   salvia al 75% — tres estados legibles (activo/inactivo/hover) */
.sb-lang-active {
	font-weight: 700 !important;
	color: var(--global-palette9);
	opacity: 1;
}

.sb-lang-item:hover {
	color: var(--global-palette11); /* #e2e8dd — mismo hex que la referencia */
	opacity: 1;
}

.sb-lang-separator {
	color: var(--global-palette7);
	opacity: 0.35;
}

/* Switcher dentro del drawer móvil (Johann 2026-07-30): centrado bajo
   el botón «Get brochure», tamaño táctil acorde a los links del menú.
   El item del botón es un flex ROW (el switcher, hermano del wrap del
   botón, quedaba montado a su lado — pantallazo de Johann): se apila
   en columna y centrado. */
#mobile-drawer .site-header-item[data-section="kadence_customizer_mobile_button"] {
	flex-direction: column;
	align-items: center;
}

#mobile-drawer .sb-language-switcher {
	justify-content: center;
	margin: 24px 0 0;
	font-size: 18px;
	gap: 8px;
}