/*
 * Clases reutilizables desde Elementor (Advanced > CSS Classes).
 * Contrato de entrega: cada clase de aquí corresponde a una fila de la tabla
 * "Clases reutilizables sugeridas" del Design System (guidelines/elementor-handoff).
 */

/* Estructura global: .section (ritmo vertical + fondo) > .container (anchura + gutter) > contenido */

.section {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
	box-sizing: border-box;
}

.section--tight {
	padding-top: var(--section-y-tight);
	padding-bottom: var(--section-y-tight);
}

.section--brand {
	background-color: var(--color-primary);
	color: var(--color-background);
}

.section--brand-deep {
	background-color: var(--color-primary-deep);
	color: var(--color-background);
}

.section--stone {
	background-color: var(--color-background-alt);
}

.section--surface {
	background-color: var(--color-surface);
}

.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	box-sizing: border-box;
}

.container--narrow {
	max-width: var(--container-narrow);
}

/* Eyebrow — versalitas + filete de madera sobre el titular */

.eyebrow {
	display: inline-block;
	padding-top: 18px;
	border-top: 2px solid var(--color-accent);
	font-family: var(--font-body);
	font-size: var(--type-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.eyebrow--inverse {
	color: rgba(244, 241, 235, 0.7);
}

.rule-gold {
	border-top: 2px solid var(--color-accent);
}

/* Botones — dos variantes de marca + inverse para fondos oscuros/fotografía */

.button--primary,
.button--secondary,
.button--inverse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--field-height, 48px);
	padding: 0 24px;
	font-family: var(--font-body);
	font-size: var(--type-body-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.button--primary {
	background-color: var(--color-primary);
	color: var(--color-background);
	border: 1px solid var(--color-primary);
}

.button--primary:hover {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-background);
}

.button--secondary {
	height: auto;
	padding: 0 2px 10px;
	border: 0;
	border-bottom: 1px solid var(--color-accent);
	border-radius: 0;
	background: transparent;
	color: var(--color-primary);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.button--secondary:hover {
	color: var(--color-primary-hover);
	border-bottom-color: var(--color-primary-hover);
}

.button--inverse {
	background-color: var(--color-background);
	color: var(--color-primary);
	border: 1px solid var(--color-background);
}

.button--inverse:hover {
	background-color: var(--color-surface);
	border-color: var(--color-surface);
}

.button--lg {
	height: 56px;
	padding: 0 32px;
	font-size: var(--type-body);
}

.button--icon svg,
.button--icon .elementor-button-icon {
	transition: transform 0.2s ease;
}

.button--icon:hover svg,
.button--icon:hover .elementor-button-icon {
	transform: translateX(3px);
}

/* Tarjetas — ficha jurídica: blanco cálido, filete piedra fino, hover a piedra clara */

.card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.card--service:hover {
	background-color: var(--color-background-alt);
	border-color: var(--color-secondary);
}

.card--float {
	border-radius: var(--radius-xl);
	box-shadow: 0 18px 44px -14px rgba(16, 36, 58, 0.16), 0 2px 8px rgba(16, 36, 58, 0.05);
}

/* Figuras — aspect-ratio fijo + object-fit:cover, siempre a escuadra (sin radio) */

.figure--21x9,
.figure--3x4,
.figure--4x5 {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.figure--21x9 { aspect-ratio: 21 / 9; max-height: 560px; }
.figure--3x4 { aspect-ratio: 3 / 4; max-height: 640px; }
.figure--4x5 { aspect-ratio: 4 / 5; max-height: 640px; }
/* El tope de altura aplica en todos los tamaños (algunas figuras son a
   sangre completa y en pantallas anchas el aspect-ratio por sí solo las
   dispara por encima de los 800px); responsive.css lo aprieta más en
   tablet/móvil. */

.figure--21x9 img,
.figure--3x4 img,
.figure--4x5 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Estado "sin imagen todavia": mientras la figura no contiene una <img>, se
   presenta como marcador intencional (trama diagonal sutil + etiqueta) en
   lugar de un rectangulo vacio. Al insertar la imagen definitiva esta cubre
   por completo el pseudo-elemento y la trama. Requiere :has() (soportado por
   todos los navegadores actuales); si no, degrada a un bloque plano. */
.figure--21x9:not(:has(img)),
.figure--3x4:not(:has(img)),
.figure--4x5:not(:has(img)) {
	position: relative;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(16, 36, 58, 0.05) 0,
		rgba(16, 36, 58, 0.05) 1px,
		transparent 1px,
		transparent 12px
	);
}

.figure--21x9:not(:has(img))::after,
.figure--3x4:not(:has(img))::after,
.figure--4x5:not(:has(img))::after {
	content: "Imagen";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body, "Manrope", sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(16, 36, 58, 0.32);
}

/* Cuerpo editorial de artículo — post-content de Elementor Theme Builder */
.elementor-widget-theme-post-content p {
	font-family: var(--font-body);
	font-size: 19px;
	line-height: 1.72;
	color: var(--color-text-secondary);
	margin: 0 0 26px;
}

.elementor-widget-theme-post-content h2 {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--color-primary);
	margin: 56px 0 20px;
}

.elementor-widget-theme-post-content blockquote {
	margin: 48px 0;
	padding-left: 32px;
	border-left: 2px solid var(--color-primary);
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.3;
	color: var(--color-primary);
}

@media (max-width: 767px) {
	.elementor-widget-theme-post-content p { font-size: 17px; }
	.elementor-widget-theme-post-content h2 { font-size: 26px; }
}

/* Utilidades de color */

.text-muted { color: var(--color-text-muted); }
.bg-surface { background-color: var(--color-surface); }

/*
 * Parche: VERSALITAS perdidas por un bug de Elementor 4.2.
 * Cuando un widget de heading usa una tipografia GLOBAL (H2/H3 del Kit) Y
 * ademas fija "Text Transform: uppercase" en local, Elementor genera el CSS
 * del preset global (familia, tamano, interlineado...) pero omite el
 * text-transform local — el ajuste queda guardado pero nunca se pinta.
 * Afecta a los titulos "Escuchamos/Analizamos/Actuamos" y a los 5 titulos
 * de "Cinco areas" en Inicio, todos configurados en mayusculas en el editor.
 * Se fija aqui por ID hasta que el plugin lo corrija; revisar tras cada
 * actualizacion de Elementor por si ya no hace falta.
 */
.elementor-element-0c7d996 .elementor-heading-title,
.elementor-element-52a62c7 .elementor-heading-title,
.elementor-element-c989c9d .elementor-heading-title,
.elementor-element-170f181 .elementor-heading-title,
.elementor-element-989980e .elementor-heading-title,
.elementor-element-de4343c .elementor-heading-title,
.elementor-element-17eda21 .elementor-heading-title,
.elementor-element-926d8ea .elementor-heading-title {
	text-transform: uppercase;
}

/*
 * Marco desplazado — bloque solido a escuadra (sin radio, ver "Radius" en
 * variables.css) que asoma detras de una figura de retrato, tal como en el
 * Design System. Se pinta con box-shadow (en vez de ::before) a propósito:
 * las figuras llevan overflow:hidden para recortar la <img> con
 * object-fit:cover, y eso recortaría un pseudo-elemento pero no una sombra
 * — la sombra se dibuja fuera de la caja del propio elemento y no la
 * recorta su propio overflow.
 */
.figure--offset {
	position: relative;
	z-index: 1;
	box-shadow: calc(-1 * var(--space-5)) var(--space-5) 0 0 var(--color-background-alt);
}

@media (max-width: 759px) {
	.figure--offset {
		box-shadow: calc(-1 * var(--space-3)) var(--space-3) 0 0 var(--color-background-alt);
	}
}

/*
 * Campo de formulario "segmentado" (p.ej. Consulta: Telemática / Presencial):
 * en el Design System es un toggle de dos pildoras, no un <select> nativo.
 * El campo se deja como field_type:"select" en Elementor (combinar un campo
 * radio con el checkbox del formulario corrompe el HTML de ambos en esta
 * versión de Elementor Pro) y lleva la clase "field--segmented" en
 * Field > Advanced > CSS Classes; assets/js/main.js sustituye visualmente el
 * <select> por los dos botones — ver enhanceSegmentedSelects().
 */
.field--segmented {
	position: relative;
}

.field--segmented select.is-segmented-source {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.field--segmented .select-caret-down-wrapper {
	display: none;
}

.segmented-toggle {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.segmented-toggle__btn {
	flex: 1 1 auto;
	padding: 12px var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-text-secondary);
	font-family: var(--font-body);
	font-size: var(--type-body-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.segmented-toggle__btn.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-background);
}

.segmented-toggle__btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/*
 * Parche: fecha/comentarios del listado de Blog salen con tipografia de H1.
 * El widget "Posts" (skin cards) de Elementor Pro, cuando no se personaliza
 * su tipografia de "Meta Data", cae por defecto a la fuente global
 * "Secondary" del Kit (var(--e-global-typography-secondary-*)). En este
 * Design System "Secondary" es la tipografia de H1 (56/44/34px, Georgia,
 * negrita) pensada para titulares — así que la fecha y "No hay comentarios"
 * de cada tarjeta del blog salían a tamaño de titular en vez de metadato.
 * Se fuerza aquí a la escala "caption" hasta personalizar explícitamente la
 * tipografia de "Meta Data" en el propio widget.
 */
.elementor-widget-posts .elementor-post__meta-data,
.elementor-widget-posts .elementor-post__meta-data span {
	font-family: var(--font-body);
	font-size: var(--type-caption);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
}

/*
 * Parche: titulares del listado de Blog salen a tamano de "Display" (88/64/44px).
 * Elementor genera para el widget "Posts" sin tipografia de titulo
 * personalizada la regla ".elementor-widget-posts .elementor-post__title,
 * .elementor-widget-posts .elementor-post__title a { font-size: var(
 * --e-global-typography-primary-font-size ) }" — en este Design System
 * "Primary" es la tipografia "Display" reservada para el titular principal
 * del hero, no para una tarjeta de blog. Se fuerza aqui a la escala "H3"
 * (la que corresponde a un titulo de tarjeta) hasta personalizar
 * explicitamente la tipografia de "Title" en el propio widget.
 */
.elementor-widget-posts .elementor-post__title,
.elementor-widget-posts .elementor-post__title a {
	font-family: var(--font-display);
	font-size: var(--type-h3);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: normal;
}

/*
 * Parche: los botones nativos de Elementor ("Cuéntanos tu caso" en el
 * header, "Conócenos", "Hablar sobre mi caso") salen en VERSALITAS con
 * tracking exagerado, provocando que el boton de cabecera parta el texto en
 * dos lineas en movil. El widget "Button" con tipografia "custom" fija
 * font-family/size/weight en local, pero dado que no se fijo tambien
 * letter-spacing ni text-transform, Elementor rellena esos dos con la
 * tipografia global "Accent" del Kit (la de "Eyebrow": mayusculas +
 * 0.18em de tracking), pensada para pretitulos, no para botones. Se
 * neutraliza aqui a un tracking normal y sin forzar mayusculas.
 */
.elementor-widget-button .elementor-button {
	text-transform: none;
	letter-spacing: normal;
}

/*
 * Formulario de contacto (Contact Form 7). Los 10 formularios del sitio
 * (home, servicios, sobre nosotros, blog, articulo y las 5 areas) comparten
 * el mismo formulario CF7 "Contacto SMAB" insertado via shortcode, con
 * marcado propio (".form-row") en vez del grid nativo de Elementor Forms
 * — de ahi que necesite su propio bloque de estilos aqui.
 */
.wpcf7-form .form-row {
	margin-bottom: var(--space-4);
}

.wpcf7-form .form-row--split {
	display: flex;
	gap: var(--space-4);
}

.wpcf7-form .form-row--split > label {
	flex: 1 1 0;
}

.wpcf7-form label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--type-label);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2);
}

/*
 * Scoped a input/select/textarea a proposito: CF7 reutiliza la misma clase
 * ".wpcf7-form-control" en el <span> que envuelve cada acceptance/checkbox,
 * y aplicarle aqui el mismo recuadro producia una caja fantasma alrededor
 * de cada casilla.
 */
input.wpcf7-form-control:not([type="submit"]),
select.wpcf7-form-control,
textarea.wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: var(--type-body-sm);
	color: var(--color-text-primary);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	padding: var(--space-2) var(--space-4);
}

textarea.wpcf7-form-control {
	min-height: 96px;
	resize: vertical;
}

.wpcf7-form select.wpcf7-form-control {
	appearance: none;
}

/*
 * El toggle "Telematica / Presencial" (JS en main.js, enhanceSegmentedSelects)
 * ya sustituye visualmente el <select> nativo por los dos botones y solo
 * necesita que el <select> original quede fuera de flujo, igual que hacia
 * el campo equivalente de Elementor Forms.
 */
.field--segmented select.is-segmented-source {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wpcf7-form .form-row--checkbox {
	margin-bottom: var(--space-3);
}

.wpcf7-list-item {
	display: block;
}

.wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-bottom: 0;
	font-size: var(--type-body-sm);
	color: var(--color-text-secondary);
	cursor: pointer;
}

.wpcf7-list-item input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.wpcf7-submit {
	width: 100%;
	background-color: var(--color-primary);
	color: var(--color-surface);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--type-body-sm);
	border: none;
	border-radius: var(--radius-xs);
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wpcf7-submit:hover {
	background-color: var(--color-primary-hover);
}

.wpcf7-spinner {
	margin: var(--space-2) auto 0;
}

.wpcf7-not-valid-tip {
	display: block;
	font-size: var(--type-caption);
	color: var(--color-error);
	margin-top: var(--space-1);
}

.wpcf7-response-output {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-xs);
	font-size: var(--type-body-sm);
}

.wpcf7-mail-sent-ok {
	border: 1px solid var(--color-success);
	color: var(--color-success);
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked,
.wpcf7-aborted {
	border: 1px solid var(--color-error);
	color: var(--color-error);
}