/* Base, cabecera, pie y portada de Soft Advertising. Colores y medidas en tokens.css. */

/* ---------- Base ---------- */
body {
	font-family: var(--sa-fuente);
	color: var(--sa-texto);
	background: var(--sa-blanco);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-family: var(--sa-fuente);
	color: var(--sa-oscuro);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
a { color: var(--sa-morado-texto); transition: color var(--sa-transicion); }
a:hover { color: var(--sa-morado-hover); }
:focus-visible { outline: 3px solid var(--sa-morado-texto); outline-offset: 3px; border-radius: 4px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

.sa-contenedor {
	width: 100%;
	max-width: calc(var(--sa-ancho) + 2 * var(--sa-gutter));
	margin-inline: auto;
	padding-inline: var(--sa-gutter);
	box-sizing: border-box;
}

.sa-skip {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	background: var(--sa-oscuro); color: var(--sa-blanco); padding: 12px 16px; border-radius: 6px;
}
.sa-skip:focus { top: 16px; color: var(--sa-blanco); }

/* ---------- Cabecera ---------- */
.sa-cabecera { background: var(--sa-blanco); position: relative; z-index: 30; }
.sa-cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.sa-logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--sa-oscuro); font-weight: 700; text-decoration: none; }
.sa-logo img { display: block; width: auto; height: 44px; }

.sa-cabecera__derecha { display: flex; align-items: center; gap: 8px; }

/* Selector EN | ES */
.sa-idioma ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--sa-borde); }
.sa-idioma li + li::before { content: "|"; color: var(--sa-borde); padding: 0 2px; }
.sa-idioma a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
	color: var(--sa-texto); font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 6px;
}
.sa-idioma a:hover { color: var(--sa-morado-texto); }
.sa-idioma a[aria-current="true"] { color: var(--sa-oscuro); font-weight: 700; }

.sa-menu__lista { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sa-menu__lista a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
	color: var(--sa-oscuro); font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 6px;
}
/* Sin estilo de «actual»: en una sola página las anclas (#about, #services) quedan todas marcadas como actuales. */
.sa-menu__lista a:hover { color: var(--sa-morado-texto); }

.sa-menu-boton {
	display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px;
	background: transparent; color: var(--sa-oscuro); cursor: pointer;
}
.sa-menu-boton__barras,
.sa-menu-boton__barras::before,
.sa-menu-boton__barras::after {
	display: block; width: 22px; height: 2px; margin: 0 auto; background: currentColor; border-radius: 2px;
	transition: transform var(--sa-transicion), opacity var(--sa-transicion);
}
.sa-menu-boton__barras { position: relative; }
.sa-menu-boton__barras::before,
.sa-menu-boton__barras::after { content: ""; position: absolute; left: 0; }
.sa-menu-boton__barras::before { top: -7px; }
.sa-menu-boton__barras::after { top: 7px; }
.sa-menu-boton[aria-expanded="true"] .sa-menu-boton__barras { background: transparent; }
.sa-menu-boton[aria-expanded="true"] .sa-menu-boton__barras::before { transform: translateY(7px) rotate(45deg); }
.sa-menu-boton[aria-expanded="true"] .sa-menu-boton__barras::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
	.sa-cabecera__fila { min-height: 72px; }
	.sa-logo img { height: 38px; }
	.sa-menu-boton { display: inline-flex; align-items: center; justify-content: center; }
	.sa-idioma ul { border-left: 0; padding-left: 0; }
	.sa-menu {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--sa-blanco); border-top: 1px solid var(--sa-borde); box-shadow: var(--sa-sombra);
	}
	.sa-menu.is-abierto { display: block; }
	.sa-menu__lista { flex-direction: column; gap: 0; padding: 8px var(--sa-gutter) 16px; }
	.sa-menu__lista a { width: 100%; padding: 0 4px; font-size: 17px; min-height: 48px; }
}

/* ---------- Portada (plantilla Landing) ---------- */
.sa-landing > * { margin-block: 0; }
.sa-landing [id] { scroll-margin-top: 24px; }
.sa-landing .wp-block-group.alignfull { padding-inline: var(--sa-gutter); }
.sa-landing .wp-block-group.alignfull > * { max-width: var(--sa-ancho); margin-inline: auto; }

/* Hero */
.sa-hero {
	background: linear-gradient(180deg, var(--sa-blanco) 0%, var(--sa-morado) 100%);
	padding-block: clamp(96px, 16vw, 200px) clamp(96px, 14vw, 180px);
	text-align: center;
}
.sa-hero h1 { font-size: clamp(40px, 6vw, 60px); font-weight: 600; margin: 0 0 12px; }
.sa-hero p { font-size: clamp(17px, 2vw, 20px); color: var(--sa-oscuro); margin: 0 0 32px; }
.sa-hero .wp-block-buttons { justify-content: center; }

/* Botones */
.sa-landing .wp-block-button__link {
	display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px;
	background: var(--sa-morado-texto); color: var(--sa-blanco); border-radius: 6px;
	font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
	transition: background-color var(--sa-transicion);
}
.sa-landing .wp-block-button__link:hover { background: var(--sa-morado-hover); color: var(--sa-blanco); }

/* Intro (About) */
.sa-intro { padding-block: clamp(72px, 10vw, 120px) clamp(24px, 4vw, 48px); text-align: center; }
.sa-intro h2 {
	max-width: 900px !important; margin: 0 auto clamp(40px, 6vw, 64px);
	font-size: clamp(26px, 3.4vw, 38px); font-weight: 500; line-height: 1.4;
}
.sa-intro figure { margin: 0 auto; max-width: 620px !important; }
.sa-intro img { width: 100%; height: auto; }

/* Servicios */
.sa-servicios { padding-block: clamp(48px, 8vw, 96px) clamp(72px, 10vw, 120px); }
.sa-servicios h2 { text-align: center; font-size: clamp(30px, 4vw, 40px); font-weight: 600; margin: 0 auto 48px; }
/* Kadence no tiene theme.json: WordPress envuelve el interior de cada Grupo en .wp-block-group__inner-container. */
.sa-servicios__grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1023px) { .sa-servicios__grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .sa-servicios__grid > .wp-block-group__inner-container { grid-template-columns: 1fr; } }
.sa-servicio {
	background: var(--sa-blanco); border: 1px solid var(--sa-borde); border-radius: var(--sa-radio);
	padding: 32px 28px; margin: 0 !important; box-shadow: var(--sa-sombra);
}
.sa-servicio::before {
	content: ""; display: block; width: 28px; height: 28px; margin-bottom: 20px;
	background: var(--sa-morado-texto);
	-webkit-mask: var(--sa-icono) center / contain no-repeat;
	mask: var(--sa-icono) center / contain no-repeat;
}
.sa-servicio h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.sa-servicio p { font-size: 15px; margin: 0; }

/* Sección oscura */
.sa-oscuro {
	background: var(--sa-oscuro);
	padding-block: clamp(72px, 10vw, 128px);
	text-align: center;
}
.sa-oscuro h2 { color: var(--sa-blanco); font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; max-width: 820px !important; margin: 0 auto 20px; }
.sa-oscuro p { color: var(--sa-borde); font-size: 17px; max-width: 760px !important; margin: 0 auto; }

/* ---------- Pie ---------- */
.sa-pie { background: var(--sa-blanco); color: var(--sa-texto); font-size: 15px; }
.sa-pie__fila { padding-block: 56px 40px; }
.sa-pie__nombre { color: var(--sa-oscuro); font-weight: 600; margin: 0 0 16px; }
.sa-pie__direccion { font-style: normal; line-height: 1.7; }
.sa-pie__legal { border-top: 1px solid var(--sa-borde); }
.sa-pie__legal p { padding-block: 24px; margin: 0 auto; text-align: center; font-size: 14px; }

/* Kadence: sin márgenes propios alrededor de la plantilla Landing. */
.page-template-landing #inner-wrap { padding: 0; }
.page-template-landing .site-container,
.page-template-landing .content-container { max-width: none; padding: 0; }