/* =========================================================================
   Synowiec — componentes del sistema de diseño.
   Los colores, tipografías y espaciados base están en theme.json.
   Recursos gráficos tomados del manual de marca: píldora, flecha circular,
   etiqueta vertical. El amarillo se usa solo como acento.
   ========================================================================= */

:root {
	--syn-radio: 28px;
	--syn-radio-chico: 16px;
	--syn-sombra: 0 24px 60px -30px rgba(51, 3, 127, .5);
	--syn-gris-texto: #4a4458;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--amarillo); color: #000; }

/* Las secciones de ancho completo van pegadas: el color separa, no el margen. */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }
main.wp-block-group { margin-top: 0; }

/* ---------- Encabezado fijo ---------- */
.syn-header-wrap { position: sticky; top: 0; z-index: 60; }
.admin-bar .syn-header-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .syn-header-wrap { top: 46px; } }
/* El desenfoque va en un pseudo-elemento: un backdrop-filter en .syn-header lo convierte en el
   contenedor de los elementos fijos de adentro y el menú de celular quedaba atrapado en 80 px. */
.syn-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid rgba(51, 3, 127, .08);
}
.syn-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.syn-header .wp-block-navigation a { text-decoration: none; }
.syn-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--violeta); }
.syn-header__cta .wp-block-button__link { font-size: var(--wp--preset--font-size--s); padding: .8em 1.4em; }
@media (max-width: 781px) { .syn-header__cta { display: none; } }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--violeta-oscuro) !important;
	color: #fff !important;
	font-size: var(--wp--preset--font-size--xl);
}
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-radius: var(--syn-radio-chico);
	box-shadow: var(--syn-sombra);
	padding: .5rem 0;
	min-width: 280px !important;
}

/* ---------- Bandas de color: texto y links claros ---------- */
.has-violeta-oscuro-background-color,
.has-negro-background-color,
.has-violeta-background-color,
.syn-foto { color: #fff; }
.has-violeta-oscuro-background-color a:not(.wp-element-button),
.has-negro-background-color a:not(.wp-element-button),
.has-violeta-background-color a:not(.wp-element-button),
.syn-foto a:not(.wp-element-button) { color: #fff; }

/* ---------- Recurso del manual: píldora ("NOVEDAD") ---------- */
p.is-style-pildora {
	display: block;
	width: fit-content;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: .5em 1.2em;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	letter-spacing: .22em;
	line-height: 1.2;
	text-transform: uppercase;
}
.syn-centro { text-align: center; }
.syn-centro p.is-style-pildora { margin-inline: auto; }

/* ---------- Botones ---------- */
.wp-block-button__link { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.wp-block-button.is-style-blanco .wp-block-button__link { background: #fff; color: var(--wp--preset--color--violeta-oscuro); }
.wp-block-button.is-style-blanco .wp-block-button__link:hover { background: var(--wp--preset--color--amarillo); color: #000; }
.wp-block-button.is-style-acento .wp-block-button__link { background: var(--wp--preset--color--amarillo); color: #000; }
.wp-block-button.is-style-acento .wp-block-button__link:hover { background: #fff; color: #000; }
.wp-block-button.is-style-outline .wp-block-button__link { border-width: 1.5px; }
.syn-foto .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-violeta-oscuro-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-negro-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-violeta-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff; color: var(--wp--preset--color--violeta-oscuro); border-color: #fff;
}
/* Recurso del manual: flecha circular amarilla */
.wp-block-button.is-style-flecha .wp-block-button__link {
	width: 3.5rem; height: 3.5rem; padding: 0;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--amarillo); color: #000;
	font-size: 1.5rem; line-height: 1;
}
.wp-block-button.is-style-flecha .wp-block-button__link:hover { background: var(--wp--preset--color--amarillo); color: #000; transform: translateY(4px); }

/* ---------- Heroes ---------- */
.syn-hero {
	position: relative;
	/* Alto de la ventana menos el encabezado (~88 px): el hero entero entra en la primera pantalla. */
	min-height: min(calc(100svh - 88px), 880px);
	display: flex; flex-direction: column; justify-content: flex-end;
	background: #0B0021 url(../img/fondo-pluma.webp) center 30% / cover no-repeat;
}
.syn-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%);
}
.syn-hero > * { position: relative; }
/* Título de la home: una frase por renglón y un tamaño que se ajusta también al alto de la pantalla,
   para que en notebooks (1366×633 útiles) no quede cortado. En celular vuelve al ajuste por ancho. */
.syn-hero h1 { max-width: none; }
.syn-hero h1.has-xxxl-font-size { font-size: clamp(2.75rem, min(6.4vw, 10.5svh), 5.5rem) !important; line-height: 1.02; }
.syn-bajada { max-width: 42ch; opacity: .94; }

.syn-hero-pagina { position: relative; overflow: hidden; }
.syn-hero-pagina h1 { max-width: 18ch; }

/* Etiqueta vertical gigante (recurso del manual) en el hero de cada especialidad */
p.syn-etiqueta-grande {
	position: absolute; right: var(--wp--preset--spacing--40); top: 50%;
	margin: 0; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
	font-size: clamp(3rem, 9vw, 8rem); font-weight: 700; line-height: 1; letter-spacing: -.02em;
	color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .28);
	pointer-events: none; user-select: none;
}
@media (max-width: 900px) { p.syn-etiqueta-grande { display: none; } }

/* Fondos con foto (duotono violeta ya aplicado en la imagen) */
.syn-foto { background-color: #0B0021; background-size: cover; background-position: center; background-repeat: no-repeat; }
.syn-foto--edificios { background-image: url(../img/fondo-edificios.webp); }
.syn-foto--acuerdo { background-image: url(../img/fondo-acuerdo.webp); background-position: center 40%; }
.syn-foto--guitarra { background-image: url(../img/fondo-guitarra.webp); }
.syn-foto--pluma { background-image: url(../img/fondo-pluma.webp); background-position: center 25%; }
.syn-foto--claqueta { background-image: url(../img/hero-claqueta.webp); background-position: center 28%; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.syn-foto--fija { background-attachment: fixed; }
}

/* ---------- Tarjetas de especialidad con etiqueta vertical ---------- */
.syn-grilla-tarjetas { gap: var(--wp--preset--spacing--30) !important; }
.syn-tarjeta {
	position: relative;
	display: flex; flex-direction: column;
	min-height: 100%;
	background: #fff;
	border-radius: var(--syn-radio);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--40) + 3.4rem);
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(51, 3, 127, .07);
	transition: transform .3s ease, box-shadow .3s ease;
}
.syn-tarjeta:hover { transform: translateY(-5px); box-shadow: var(--syn-sombra); }
.syn-tarjeta > * { margin-block: 0; }
.syn-tarjeta > * + * { margin-top: .75rem; }
.syn-tarjeta p.syn-etiqueta {
	position: absolute; left: 0; top: 0; bottom: 0; width: 3.4rem; margin: 0;
	display: flex; align-items: center; justify-content: center;
	writing-mode: vertical-rl; transform: rotate(180deg);
	background: var(--wp--preset--color--violeta); color: #fff;
	font-size: var(--wp--preset--font-size--s); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.syn-tarjeta.syn-tarjeta--industrial p.syn-etiqueta { background: var(--wp--preset--color--violeta-oscuro); }
.syn-tarjeta p.syn-rama { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--violeta); font-weight: 600; letter-spacing: .04em; }
.syn-tarjeta h3 { font-size: var(--wp--preset--font-size--l); line-height: 1.2; }
.syn-tarjeta h3 a { color: inherit; text-decoration: none; }
.syn-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.syn-tarjeta p { color: var(--syn-gris-texto); }
.syn-tarjeta p.syn-mas { margin-top: auto; padding-top: .75rem; color: var(--wp--preset--color--violeta); font-weight: 600; }

/* ---------- Puntos (cómo trabajamos) ---------- */
.syn-punto {
	background: #fff; border-radius: var(--syn-radio);
	padding: var(--wp--preset--spacing--40);
	border-top: 5px solid var(--wp--preset--color--violeta);
}
.syn-punto > * { margin-block: 0; }
.syn-punto > * + * { margin-top: .75rem; }
.syn-punto p.syn-num { font-size: var(--wp--preset--font-size--xl); font-weight: 600; color: var(--wp--preset--color--violeta); line-height: 1; }
.syn-punto p { color: var(--syn-gris-texto); }

/* ---------- Casos ---------- */
.syn-caso-img { margin: 0; }
.syn-caso-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--syn-radio); display: block; }

/* ---------- Logos de clientes ---------- */
/* Grilla de logos en filas con la última centrada: con 22 logos no hay filas iguales, así que
   8 por fila en escritorio (8 · 8 · 6) y nunca un logo suelto contra el margen. */
.syn-clientes {
	--syn-logos-fila: 8; --syn-logos-gap: var(--wp--preset--spacing--20);
	display: flex !important; flex-wrap: wrap; justify-content: center; gap: var(--syn-logos-gap) !important;
}
.syn-clientes > .wp-block-image {
	flex: 0 0 calc((100% - (var(--syn-logos-fila) - 1) * var(--syn-logos-gap)) / var(--syn-logos-fila));
	max-width: none; min-width: 0; box-sizing: border-box;
}
@media (max-width: 1100px) { .syn-clientes { --syn-logos-fila: 6; } }
@media (max-width: 781px) { .syn-clientes { --syn-logos-fila: 4; } }
.syn-clientes .wp-block-image {
	margin: 0; background: #fff; border-radius: var(--syn-radio-chico);
	aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 1rem;
	box-shadow: 0 0 0 1px rgba(51, 3, 127, .07);
}
.syn-clientes .wp-block-image img {
	max-height: 64px; max-width: 100%; width: auto; height: auto; object-fit: contain;
	filter: grayscale(1); opacity: .8; mix-blend-mode: multiply;
	transition: filter .3s ease, opacity .3s ease;
}
.syn-clientes .wp-block-image:hover img { filter: none; opacity: 1; }

/* ---------- Chips de países ---------- */
.syn-chips { gap: .6rem !important; }
.syn-chips p.is-style-pildora { margin: 0; }

/* ---------- Equipo ---------- */
.syn-foto-erika { margin: 0; }
.syn-foto-erika img { display: block; width: 100%; background: var(--wp--preset--color--lavanda); border-radius: var(--syn-radio); }
.syn-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--wp--preset--spacing--40); }
.syn-miembro__foto {
	aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--syn-radio);
	background: #fff; display: flex; align-items: center; justify-content: center;
}
.syn-miembro__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.syn-miembro__iniciales { font-size: 3.5rem; font-weight: 600; color: var(--wp--preset--color--violeta); letter-spacing: -.02em; }
.syn-miembro h3 { margin: 1rem 0 .3rem; font-size: var(--wp--preset--font-size--l); }
.syn-miembro p { margin: 0; font-size: var(--wp--preset--font-size--s); color: var(--syn-gris-texto); }

/* ---------- Testimonios ---------- */
.syn-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--wp--preset--spacing--40); }
.syn-testimonio {
	position: relative; margin: 0; background: #fff; border-radius: var(--syn-radio);
	padding: calc(var(--wp--preset--spacing--50) + 1.5rem) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}
.syn-testimonio::before {
	content: "\201C"; position: absolute; top: .6rem; left: var(--wp--preset--spacing--40);
	font-size: 5rem; line-height: 1; color: var(--wp--preset--color--violeta);
}
.syn-testimonio blockquote { margin: 0; font-size: var(--wp--preset--font-size--m); line-height: 1.6; }
.syn-testimonio figcaption { margin-top: 1.25rem; display: grid; gap: .15rem; font-size: var(--wp--preset--font-size--s); }
.syn-testimonio figcaption span { color: var(--syn-gris-texto); }

/* ---------- Listas con viñeta de marca ---------- */
ul.is-style-tildes { list-style: none; padding-left: 0; }
ul.is-style-tildes li { position: relative; padding-left: 1.9rem; margin-bottom: .85rem; }
ul.is-style-tildes li::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: .75rem; height: .75rem; border-radius: 50%;
	background: var(--wp--preset--color--violeta);
}
.has-violeta-oscuro-background-color ul.is-style-tildes li::before,
.has-negro-background-color ul.is-style-tildes li::before { background: var(--wp--preset--color--amarillo); }

/* ---------- Columna lateral (páginas de especialidad y contacto) ---------- */
.syn-aside {
	border-radius: var(--syn-radio);
	padding: var(--wp--preset--spacing--40);
}
@media (min-width: 782px) { .syn-aside--fija { position: sticky; top: 120px; } }
.syn-aside > * { margin-block: 0; }
.syn-aside > * + * { margin-top: 1rem; }
.syn-aside p { font-size: var(--wp--preset--font-size--s); }
.syn-otras a { display: block; padding: .5rem 0; border-bottom: 1px solid rgba(51, 3, 127, .12); text-decoration: none; font-weight: 500; }
.syn-otras a:hover { color: var(--wp--preset--color--violeta); }

/* ---------- Formulario ---------- */
.syn-form { display: grid; gap: .25rem; }
.syn-form p { margin: 0 0 .75rem; }
.syn-form label { display: block; margin-bottom: .4rem; font-size: var(--wp--preset--font-size--s); font-weight: 600; }
.syn-form input[type="text"], .syn-form input[type="email"], .syn-form input[type="tel"], .syn-form select, .syn-form textarea {
	width: 100%; box-sizing: border-box;
	font: inherit; color: #000; background: #fff;
	padding: .85rem 1rem;
	border: 1.5px solid rgba(51, 3, 127, .22); border-radius: 14px;
}
.syn-form textarea { resize: vertical; }
.syn-form input:focus, .syn-form select:focus, .syn-form textarea:focus {
	outline: 3px solid var(--wp--preset--color--violeta); outline-offset: 1px; border-color: transparent;
}
.syn-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .syn-form__fila { grid-template-columns: 1fr; } }
.syn-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.syn-check { display: flex; gap: .65rem; align-items: flex-start; }
.syn-check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--violeta); }
.syn-check label { font-weight: 400; margin: 0; }
.syn-form button { cursor: pointer; border: 0; }
.syn-form__aviso { padding: 1rem 1.25rem; border-radius: var(--syn-radio-chico); margin-bottom: 1.5rem; }
.syn-form__aviso--ok { background: var(--wp--preset--color--lavanda); border-left: 5px solid var(--wp--preset--color--violeta); }
.syn-form__aviso--error { background: #fdecec; border-left: 5px solid #b32d2e; }

/* ---------- Pie ---------- */
.syn-footer a { color: #fff; text-decoration: none; opacity: .86; }
.syn-footer a:hover { opacity: 1; color: var(--wp--preset--color--amarillo); }
.syn-footer p { font-size: var(--wp--preset--font-size--s); line-height: 1.9; }
.syn-footer .syn-logo img { width: 210px; height: auto; }
.syn-footer h4.syn-footer__titulo { font-size: var(--wp--preset--font-size--s); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: .65; }
.syn-footer hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .16); opacity: 1; }
.syn-footer .syn-legal { opacity: .7; text-align: center; }

/* ---------- Blog ---------- */
.syn-notas .wp-block-post-featured-image img { border-radius: var(--syn-radio-chico); }
.syn-notas .wp-block-post-title a { text-decoration: none; color: inherit; }
.syn-notas .wp-block-post-title a:hover { color: var(--wp--preset--color--violeta); }

/* ---------- Accesibilidad ---------- */
a:focus-visible, button:focus-visible, .wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--amarillo); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Ajustes tras la revisión visual (v0.1.1) ---------- */
/* Hero: en columna flex los márgenes automáticos impiden estirar; se fuerza el ancho. */
.syn-hero > * { width: 100%; }
/* Casos: las dos piezas son 2:3, así no se recorta nada del afiche. */
.syn-caso-img img { aspect-ratio: 2 / 3; }
/* Más aire entre el encabezado de una sección y su contenido. */
section.wp-block-group.alignfull > * + * { margin-block-start: var(--wp--preset--spacing--50); }
/* "Contacto" en el menú solo en celular: en escritorio ya está el botón. */
@media (min-width: 782px) { .wp-block-navigation .syn-solo-movil { display: none; } }

/* ---------- Celular (v0.1.2) ---------- */
/* El CSS de layout que genera WordPress se imprime después y ganaba con la misma especificidad. */
@media (max-width: 781px) {
	.syn-header .syn-header__cta { display: none !important; }
}
@media (max-width: 600px) {
	p.is-style-pildora { letter-spacing: .12em; font-size: .75rem; }
	.syn-clientes { --syn-logos-fila: 2; } /* 22 logos = 11 filas completas */
	.syn-clientes .wp-block-image { padding: .6rem; }
	.syn-clientes .wp-block-image img { max-height: 40px; }
	.syn-tarjeta { padding-left: calc(var(--wp--preset--spacing--40) + 2.8rem); }
	.syn-tarjeta p.syn-etiqueta { width: 2.8rem; }
}

/* ---------- Fondos generados para los heroes de cada página (v0.2.0) ---------- */
/* El motivo está a la derecha: en celular se corre el encuadre para que no desaparezca. */
.syn-foto--servicios { background-image: url(../img/fondo-servicios.webp); }
.syn-foto--audiovisual { background-image: url(../img/fondo-audiovisual.webp); }
.syn-foto--clearance { background-image: url(../img/fondo-clearance.webp); }
.syn-foto--musica { background-image: url(../img/fondo-musica.webp); }
.syn-foto--marcas { background-image: url(../img/fondo-marcas-lacre.webp); }
.syn-foto--software { background-image: url(../img/fondo-software.webp); }
.syn-foto--datos { background-image: url(../img/fondo-datos.webp); }
.syn-foto--casos { background-image: url(../img/fondo-casos.webp); }
.syn-foto--equipo { background-image: url(../img/fondo-equipo.webp); }
.syn-foto--testimonios { background-image: url(../img/fondo-testimonios.webp); }
.syn-foto--servicios, .syn-foto--audiovisual, .syn-foto--clearance, .syn-foto--musica, .syn-foto--marcas,
.syn-foto--software, .syn-foto--datos, .syn-foto--casos, .syn-foto--equipo, .syn-foto--testimonios {
	background-position: 72% center;
}
/* Con foto de fondo, la etiqueta vertical gigante queda más sutil para no competir con el motivo. */
.syn-foto p.syn-etiqueta-grande { -webkit-text-stroke-color: rgba(255, 255, 255, .18); }

/* Legibilidad del texto sobre foto: degradado negro suave solo del lado del texto (v0.2.1). */
.syn-hero-pagina.syn-foto::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .18) 40%, rgba(0, 0, 0, 0) 65%);
}
.syn-hero-pagina > * { position: relative; z-index: 1; }

/* Menú de celular: todo alineado a la izquierda y las especialidades sangradas bajo "Servicios" (v0.2.3). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	padding-top: 4.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: .4rem 0 .2rem 1.1rem !important;
	gap: .55rem;
	font-size: var(--wp--preset--font-size--l);
	border-left: 2px solid var(--wp--preset--color--amarillo) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { opacity: .88; }
/* Marcas: el lacre está en la parte baja de la foto; se baja el encuadre para que se vea. */
.syn-foto--marcas { background-position: 72% 82%; }

/* ---------- Selector de idioma ES / EN (v0.3.0) ---------- */
.wp-block-navigation .syn-idioma > a,
.wp-block-navigation .syn-idioma .wp-block-navigation-item__content {
	border: 1px solid currentColor; border-radius: 999px;
	padding: .15em .75em !important;
	font-size: var(--wp--preset--font-size--s); font-weight: 600; letter-spacing: .08em;
}
.wp-block-navigation__responsive-container.is-menu-open .syn-idioma { margin-top: .6rem; }

/* Celular (menú colapsado, < 600 px): el selector sale del menú y queda a la izquierda del botón que lo abre. */
.syn-header p.syn-idioma-movil { display: none; margin: 0; }
.syn-idioma-movil a {
	display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: .15em .75em;
	font-size: var(--wp--preset--font-size--s); font-weight: 600; letter-spacing: .08em; line-height: 1.5;
	color: inherit; text-decoration: none;
}
@media (max-width: 599px) {
	.syn-header p.syn-idioma-movil { display: block; }
	.wp-block-navigation .syn-idioma { display: none !important; }
	.syn-header .syn-header__acciones { gap: 1rem !important; }
}

/* ---------- Preguntas frecuentes: acordeón nativo <details> (v0.4.0) ---------- */
.syn-faqs { display: grid; gap: .75rem; }
.syn-faq {
	background: #fff; border-radius: var(--syn-radio-chico);
	box-shadow: 0 0 0 1px rgba(51, 3, 127, .09);
	padding: 0 1.4rem; margin: 0;
}
.syn-faq summary {
	cursor: pointer; list-style: none; position: relative;
	padding: 1.15rem 2.6rem 1.15rem 0;
	font-weight: 600; font-size: var(--wp--preset--font-size--l); line-height: 1.35;
}
.syn-faq summary::-webkit-details-marker { display: none; }
.syn-faq summary::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 1.9rem; height: 1.9rem; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.25rem; font-weight: 500;
	background: var(--wp--preset--color--lavanda); color: var(--wp--preset--color--violeta);
}
.syn-faq[open] summary::after { content: "\2013"; background: var(--wp--preset--color--violeta); color: #fff; }
.syn-faq summary:hover { color: var(--wp--preset--color--violeta); }
.syn-faq[open] { padding-bottom: 1.1rem; }
.syn-faq p { margin: 0 0 .75rem; color: var(--syn-gris-texto); }

/* ---------- Nota individual ---------- */
.syn-nota-cat { margin: 0; }
.syn-nota-cat a {
	display: inline-block; border: 1px solid currentColor; border-radius: 999px;
	padding: .45em 1.15em; font-size: var(--wp--preset--font-size--s); font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
}
.syn-nota-titulo { max-width: none; }
.syn-nota-meta { gap: 1.25rem !important; opacity: .88; font-size: var(--wp--preset--font-size--s); }
.syn-nota-meta > * { margin: 0 !important; }
.syn-nota-imagen img { border-radius: var(--syn-radio); }
.syn-nota-cuerpo { font-size: 1.125rem; line-height: 1.75; }
.syn-nota-cuerpo h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 2.6rem; }
.syn-nota-cuerpo .syn-faq summary { font-size: 1.1rem; }
.syn-nota-cta { border-radius: var(--syn-radio); padding: var(--wp--preset--spacing--40); margin-top: 3rem !important; }
.syn-nota-cta > * { margin-block: 0; }
.syn-nota-cta > * + * { margin-top: .9rem; }

/* ---------- Listado de notas ---------- */
.syn-notas .wp-block-post-template { gap: var(--wp--preset--spacing--40); }
.syn-notas .wp-block-post-featured-image { margin-bottom: 1rem; }
.syn-notas .wp-block-post-date { color: var(--syn-gris-texto); }
.syn-foto--faq { background-image: url(../img/fondo-faq.webp); background-position: 72% center; }

/* Paginación del blog: números separados y legibles */
.wp-block-query-pagination-numbers { display: inline-flex; gap: .35rem; }
.wp-block-query-pagination-numbers .page-numbers { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .5rem; border-radius: 999px; text-decoration: none; }
.wp-block-query-pagination-numbers .page-numbers.current { background: var(--wp--preset--color--violeta, #6D05FF); color: #fff; }
.wp-block-query-pagination-numbers a.page-numbers:hover { background: var(--wp--preset--color--lavanda, #F1ECFB); }

/* Videos verticales de LinkedIn (9:16) dentro de una nota: angostos y centrados */
.wp-block-video.syn-video-vertical { max-width: 360px; margin: 2.2rem auto; }
.wp-block-video.syn-video-vertical video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: var(--wp--preset--color--violeta-oscuro, #1A0442); display: block; }

/* Preguntas en borrador (solo staging): recuadro punteado y notas pendientes resaltadas */
.syn-borrador { border: 2px dashed var(--wp--preset--color--violeta); border-radius: 22px; padding: 2rem clamp(1.1rem, 4vw, 2.5rem) 2.4rem; }
.syn-pildora-borrador { background: #F2FF00; border-color: #F2FF00 !important; color: #000 !important; }
.syn-faq.syn-faq--borrador { border: 1px dashed var(--wp--preset--color--violeta); }
mark.syn-nota-interna { background: #F2FF00; color: #000; padding: 0 .2em; border-radius: 3px; }