/* ============================================================
   SML | Saladillo Medicina Laboral
   Estilos globales del tema hijo (Etapa 2: identidad visual).
   ============================================================ */

/* ---------- Fuentes locales (variable, subset latin) ---------- */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ---------- Tokens de marca ---------- */
:root {
	--sml-teal: #21999A;          /* teal del logo: iconos, acentos */
	--sml-primario: #0F5E63;      /* teal profundo: header, botones, titulos */
	--sml-primario-hover: #0B4B4F;
	--sml-salvia: #74C1A1;        /* verde salvia del logo: detalles */
	--sml-salvia-oscuro: #4F9E7F;
	--sml-texto: #1F2A33;
	--sml-texto-suave: #5B6B78;
	--sml-fondo: #FFFFFF;
	--sml-fondo-alt: #F3F7F9;
	--sml-borde: #DCE5EA;
	--sml-alerta: #E8A33D;

	--sml-radio: 10px;
	--sml-radio-sm: 8px;
	--sml-sombra: 0 6px 24px rgba(15, 94, 99, 0.08);
	--sml-sombra-fuerte: 0 10px 30px rgba(15, 94, 99, 0.14);
	--sml-contenedor: 1200px;

	/* Escala tipografica fluida */
	--sml-fs-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17 - 18 px */
	--sml-fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--sml-fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	--sml-fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
	--sml-fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
	--sml-fs-small: 0.9375rem;
}

/* ---------- Base ---------- */
body {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: var(--sml-fs-base);
	line-height: 1.6;
	color: var(--sml-texto);
	background: var(--sml-fondo);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: "Manrope", "Inter", system-ui, sans-serif;
	color: var(--sml-primario);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
}
h1 { font-size: var(--sml-fs-h1); font-weight: 800; }
h2 { font-size: var(--sml-fs-h2); }
h3 { font-size: var(--sml-fs-h3); }
h4 { font-size: var(--sml-fs-h4); }

a { color: var(--sml-primario); }
a:hover { color: var(--sml-teal); }

p { margin-bottom: 1.1em; }

.grid-container,
.inside-article,
.site-content .container {
	max-width: var(--sml-contenedor);
}

/* ---------- Botones ---------- */
.wp-block-button__link,
.button,
button.button,
input[type="submit"],
.gb-button {
	font-family: "Manrope", sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--sml-radio);
	padding: 0.85em 1.6em;
	line-height: 1.2;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}

/* Primario */
.wp-block-button__link,
.button,
input[type="submit"],
.gb-button {
	background-color: var(--sml-primario);
	color: #ffffff;
	border: 2px solid var(--sml-primario);
}
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover,
.gb-button:hover {
	background-color: var(--sml-primario-hover);
	border-color: var(--sml-primario-hover);
	color: #ffffff;
	transform: translateY(-1px);
}

/* Secundario / outline */
.is-style-outline .wp-block-button__link,
.button.sml-btn-outline,
.gb-button.sml-btn-outline {
	background-color: transparent;
	color: var(--sml-primario);
	border: 2px solid var(--sml-primario);
}
.is-style-outline .wp-block-button__link:hover,
.button.sml-btn-outline:hover,
.gb-button.sml-btn-outline:hover {
	background-color: var(--sml-primario);
	color: #ffffff;
}

/* Foco accesible */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--sml-alerta);
	outline-offset: 2px;
}

/* ---------- Barra superior de contacto (desktop) ---------- */
.sml-topbar {
	background: var(--sml-primario);
	color: #e8f1f2;
	font-size: var(--sml-fs-small);
}
.sml-topbar__inner {
	max-width: var(--sml-contenedor);
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.sml-topbar__group { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.sml-topbar a { color: #e8f1f2; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.sml-topbar a:hover { color: #ffffff; }
.sml-topbar strong { color: #ffffff; }
.sml-topbar svg { width: 16px; height: 16px; flex: none; }
.sml-topbar .sml-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sml-salvia); display: inline-block; }
.sml-topbar__badge { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; }
@media (max-width: 900px) { .sml-topbar { display: none; } }

/* ---------- Header ---------- */
.site-header { background: var(--sml-fondo); border-bottom: 1px solid var(--sml-borde); }
.site-header .site-logo .header-image,
.site-header .header-image { width: 160px; height: auto; }
.main-navigation { background: transparent; }
.main-navigation .main-nav ul li a { font-family: "Manrope", sans-serif; font-weight: 600; color: var(--sml-texto); font-size: 0.95rem; }
.main-navigation .main-nav > ul > li > a { padding-left: 14px; padding-right: 14px; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--sml-primario); }

/* CTA del menu */
.main-navigation .main-nav ul li.sml-cta a,
.menu-item.sml-cta > a {
	background: var(--sml-primario);
	color: #ffffff !important;
	border-radius: var(--sml-radio);
	margin: 8px 0 8px 10px;
	padding: 10px 20px !important;
	line-height: 1.1;
}
.main-navigation .main-nav ul li.sml-cta a:hover,
.menu-item.sml-cta > a:hover { background: var(--sml-primario-hover); }

/* ---------- Secciones utilitarias ---------- */
.sml-bg-alt { background: var(--sml-fondo-alt); }
.sml-section { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); }

/* ---------- Footer ---------- */
.site-footer,
.site-info {
	background: var(--sml-primario);
	color: #cfe0e2;
}
.site-footer a, .site-info a { color: #ffffff; }
.site-info { font-size: var(--sml-fs-small); border-top: 1px solid rgba(255,255,255,0.12); }

/* ---------- WhatsApp flotante ---------- */
.sml-wa-float {
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 9998;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease;
}
.sml-wa-float:hover { transform: scale(1.06); }
.sml-wa-float svg { width: 32px; height: 32px; fill: #ffffff; }
@media (max-width: 768px) {
	.sml-wa-float { bottom: 76px; right: 14px; width: 52px; height: 52px; }
	.sml-wa-float svg { width: 28px; height: 28px; }
}

/* ---------- Barra inferior fija (mobile) ---------- */
.sml-mobile-bar { display: none; }
@media (max-width: 768px) {
	.sml-mobile-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 9997;
		background: #ffffff;
		border-top: 1px solid var(--sml-borde);
		box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
	}
	.sml-mobile-bar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 54px;
		font-family: "Manrope", sans-serif;
		font-weight: 600;
		font-size: 0.95rem;
		text-decoration: none;
		color: var(--sml-primario);
	}
	.sml-mobile-bar a.sml-mobile-wa { background: #25D366; color: #ffffff; }
	.sml-mobile-bar a + a { border-left: 1px solid var(--sml-borde); }
	.sml-mobile-bar svg { width: 20px; height: 20px; }
	body { padding-bottom: 54px; }
}

/* ---------- Iconos inline ---------- */
.sml-ico { display: inline-flex; color: var(--sml-teal); }
.sml-ico svg { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; }